/* Costume tab of the character window (C): costume slots with a quality-coloured frame, greyed unavailable slot, costume grid; plus the enchanter dialog. */
.ow-page { display: flex; flex-direction: column; gap: 6px; }
.ow-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 8px; background: var(--gf-paper-dark); border: 1px solid #a88a58; border-radius: 6px; }
.ow-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ow-cap { font-size: 9px; text-align: center; line-height: 1.1; color: #6a5230; max-width: 56px; }
.ow-cell.off .ow-cap { color: #8a8478; }
.ow-slot, .ow-tile { box-shadow: 0 0 0 2px var(--q, #9c8b6a); }
.q-white { --q: #e5e7eb; } .q-green { --q: #4ade80; } .q-blue { --q: #60a5fa; } .q-orange { --q: #fb923c; } .q-gold { --q: #facc15; } .q-violet { --q: #c084fc; } .q-red { --q: #f87171; }
.ow-slot.q-gold, .ow-tile.q-gold { box-shadow: 0 0 0 2px var(--q), 0 0 8px rgba(250, 204, 21, 0.7); }
.ow-slot.q-violet, .ow-tile.q-violet { box-shadow: 0 0 0 2px var(--q), 0 0 9px rgba(192, 132, 252, 0.75); }
.ow-slot.q-red, .ow-tile.q-red { box-shadow: 0 0 0 2px var(--q), 0 0 10px rgba(248, 113, 113, 0.8); }
.ow-slot.off { filter: grayscale(1); opacity: 0.45; background: repeating-linear-gradient(45deg, #b9b2a0, #b9b2a0 4px, #a39c8a 4px, #a39c8a 8px); cursor: not-allowed; }
.ow-lock { position: absolute; font-size: 18px; }
.ow-tile { position: relative; cursor: pointer; }
.ow-tile.worn { outline: 2px solid #3fbf4a; outline-offset: 1px; }
.ow-q { position: absolute; right: 2px; bottom: 2px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #3a2a18; }
.ow-sum { padding: 4px 8px; background: var(--gf-paper-dark); border: 1px solid #a88a58; border-radius: 6px; }
.ow-sum h4 { margin: 0 0 2px; font-size: 12px; color: #6a4a22; }
.ow-sum p { margin: 2px 0; font-size: 11px; }
.ow-empty { text-align: center; padding: 14px 6px; }
.ow-stats { font-weight: 700; color: #2e7d32; font-size: 12px; margin: 2px 0; }
.ow-grid { display: flex; flex-direction: column; gap: 6px; max-height: 270px; overflow-y: auto; padding-right: 2px; }
.ow-setname { font-size: 12px; font-weight: 700; color: #6a4a22; margin-bottom: 2px; }
.ow-row { display: flex; flex-wrap: wrap; gap: 6px; }
/* Costume enchanter dialog */
.ench-list { max-height: 330px; overflow-y: auto; }
.ench-q.on { background: linear-gradient(#fff3c4, #e9c76a); }
.ench-q .small { font-size: 11px; color: #4a2f14; }
.ench-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.ench-pv { margin: 0; font-size: 11px; color: #6a5230; }
.nd-ench .nd-cols.compact { grid-template-columns: minmax(0, 1fr); }
.nd-ench .nd-cols.compact .ench-list { display: none; }
.ench-h { margin: 8px 0 3px; font-size: 11px; font-weight: 700; color: #6a4a22; text-transform: uppercase; letter-spacing: 0.04em; }
.ench-quals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ench-q { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; padding: 3px 2px; border-width: 3px; text-align: center; }
.ench-vars { display: flex; flex-direction: column; gap: 3px; max-height: 230px; overflow-y: auto; }
.ench-var { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 6px; align-items: center; text-align: left; padding: 2px 6px; color: var(--gf-ink); background: #efe4c8; border: 2px solid transparent; border-left: 5px solid #b0a58c; border-radius: 6px; }
.ench-var.k2 { border-left-color: #6a8fd8; } .ench-var.k3 { border-left-color: #c06ad8; }
.ench-var.on { border-color: #d98f1f; background: #f9ecc4; }
.ench-vk { grid-row: 1 / 3; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #6a5230; }
.ench-vs { font-size: 10px; color: #6a5230; }
.ench-vl { font-size: 12px; color: #2e7d32; }
.ench-own { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow-y: auto; }
.ench-oi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 3px 5px; background: #efe4c8; border-radius: 6px; }
.ench-ot { display: flex; flex-direction: column; flex: 1 1 140px; min-width: 0; line-height: 1.2; }
.ench-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #3a2a18; flex: none; }