/* Wardrobe, volume, rewards and phone layout. Loaded after theme.css. */
.cell{background:var(--flat-light,#d2c4a6)}
.cell.dark{background:var(--flat-dark,#687e7a)}

/* Settings: volume */
.volume-control{display:flex;align-items:center;gap:10px}
.volume-control input[type=range]{width:150px;accent-color:var(--accent);min-height:32px}
.volume-control output{min-width:42px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text-2);font-size:13px}

/* Result reward line */
.result-reward{margin:-4px 0 14px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-2);font-size:13px;line-height:1.5}
.result-reward[data-awarded=true]{border-color:#f2b54366;background:var(--accent-soft);color:var(--accent)}

/* Wardrobe */
#wardrobe-dialog h3{margin:22px 0 10px;font-size:14px;color:var(--text-2)}
.wardrobe-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2)}
.wardrobe-summary span{font-size:14px;color:var(--text-2);white-space:nowrap}
.wardrobe-summary b{font-size:26px;font-weight:800;color:var(--text);margin-right:3px;font-variant-numeric:tabular-nums}
.wardrobe-summary small{font-size:12px;color:var(--text-3);text-align:right}
.wardrobe-status{min-height:20px;margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--text)}
.wardrobe-status:empty{margin:0;min-height:0}
.skin-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.skin-item{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;gap:10px 12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2)}
.skin-item[data-state=equipped]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.skin-swatch{width:44px;height:44px;border-radius:var(--radius);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:inset 0 0 0 1px #0005}
.skin-swatch i{display:block}
.skin-text{min-width:0}
.skin-text b{display:block;font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skin-text small{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--text-3)}
.skin-action{grid-column:1/-1;min-height:40px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);font-size:13px;font-weight:700;color:var(--text);background:var(--surface-3)}
.skin-item[data-state=locked] .skin-action{background:none;border-color:var(--border-strong);color:var(--text-2)}
.skin-item[data-state=locked][data-affordable=true] .skin-action{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.skin-item[data-state=equipped] .skin-action{background:none;border-color:transparent;color:var(--accent)}
.skin-action:disabled{opacity:1;cursor:default}

@media (max-width:650px){
 /* Top bar */
 .topbar{height:56px;padding:0 8px 0 12px}
 .brand{font-size:16px;gap:8px}
 .crest{width:30px;height:30px;font-size:20px;line-height:30px}
 .top-actions{gap:4px}
 .top-actions button{min-width:44px;min-height:44px;padding:0 10px;justify-content:center;border-color:transparent;background:none}
 .top-actions button:not(.points-chip) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .points-chip{border-color:var(--border)!important;background:var(--surface)!important;padding:0 12px 0 8px!important}

 /* Match bar */
 .match-bar{top:62px;width:calc(100% - 16px);padding:4px;gap:4px;grid-template-columns:1fr minmax(0,auto) 1fr}
 .seat{gap:7px;padding:5px 6px}
 .seat-mark{width:28px;height:28px;font-size:17px;border-radius:var(--radius)}
 #seat-janggi .seat-mark{font-size:15px}
 .seat-text b{font-size:13px}
 .seat-text small{font-size:12px}
 .match-center{max-width:104px}
 #turn-title{font-size:12px}
 .threat{top:124px;font-size:13px;padding:9px 14px;min-width:0;width:calc(100% - 24px);max-width:none}

 /* Play */
 #stage{inset:118px 0 158px}
 .game-hud{width:calc(100% - 16px);bottom:92px;gap:6px}
 .selected-card{padding:8px 12px;gap:10px;min-height:56px}
 .selected-card>span{font-size:24px;min-width:26px}
 .selected-card .small-label{display:none}
 .selected-card b{font-size:14px}
 .selected-card p{font-size:12px;line-height:1.4;margin-top:2px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
 .op-card{min-width:84px;padding:6px 10px}
 .op-card .small-label{font-size:12px}
 .op-card small{display:none}
 #op-number{font-size:18px}
 .queen{font-size:16px}
 .bottom-bar{width:calc(100% - 16px);bottom:max(8px,env(safe-area-inset-bottom));flex-direction:column;gap:6px}
 #notice{width:100%;text-align:center;font-size:12px;min-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .board-controls{width:100%;justify-content:space-between;padding:3px}
 .board-controls button,body #nameplates-toggle{flex:1 1 0;min-width:0;max-width:60px;min-height:44px;padding:0 2px!important}
 .board-controls span:not(.toolbar-divider){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .toolbar-divider{display:none}
 body .tactical-legend{font-size:12px}
 body .selection-readout{font-size:12px}

 /* Menu: bottom sheet over the live board preview. --lobby-h is measured by app.js. */
 .lobby{left:0;right:0;top:auto;bottom:0;width:auto;max-height:calc(100dvh - 140px);padding:12px 12px max(12px,env(safe-area-inset-bottom));gap:10px;border-radius:6px 6px 0 0;border-width:1px 0 0}
 .mode-tabs button{flex-direction:row;min-height:46px;gap:6px;font-size:13px}
 .mode-tabs button .icon{width:18px;height:18px}
 .mode-panel{gap:10px}
 .mode-lead{display:none}
 #panel-multi .mode-lead{display:block;font-size:12px}
 .field{gap:5px}
 .faction{min-height:52px;padding:6px 10px;gap:9px}
 .faction-mark{width:34px;height:34px;font-size:21px}
 .faction.jade .faction-mark{font-size:18px}
 .faction-text small{display:none}
 .primary{min-height:50px}
 .multi-card{padding:10px;gap:10px}
 .multi-icon{width:36px;height:36px}
 .multi-text b{font-size:14px}
 .lobby-links{gap:6px}
 .lobby-links button{flex-direction:row;min-height:46px;gap:6px;font-size:12px}
 .lobby-links button .icon{width:18px;height:18px}
 body[data-screen=menu] #stage{left:0;right:0;top:56px;bottom:calc(var(--lobby-h,330px) - 14px)}
 body[data-screen=menu] .bottom-bar{left:50%;width:auto;bottom:calc(var(--lobby-h,330px) + 8px)}
 body[data-screen=menu] .board-controls{width:auto;background:#1a1d22e6}
 body[data-screen=menu] .board-controls button{flex:none;width:44px}
 .preview-note{top:64px;left:8px;right:8px}
 .preview-note small{font-size:12px;line-height:1.45}

 /* Gallery and battle */
 body[data-screen=gallery] #stage{inset:56px 0 80px}
 .gallery-title{left:16px;top:72px}
 .gallery-title h2{font-size:26px}
 .gallery-controls{width:calc(100% - 16px);bottom:max(8px,env(safe-area-inset-bottom));justify-content:space-between}
 .gallery-controls select{min-width:0;flex:1}
 .gallery-controls button{padding:0 8px;font-size:13px}
 .battle-banner h2{font-size:26px}

 /* 2D board */
 .flat-board{inset:8px;max-width:calc(100% - 16px)}
 .cell small{font-size:9px}

 /* Dialogs */
 dialog{width:min(560px,calc(100vw - 16px));max-height:88dvh;padding:20px 16px 16px;overscroll-behavior:contain}
 dialog h2{font-size:20px;padding-right:44px}
 .dialog-close{right:6px;top:6px}
 .rule-sides{grid-template-columns:1fr;gap:4px}
 .result-card{max-width:340px;padding:24px 20px}
 .skin-grid{grid-template-columns:1fr}
 .skin-item{grid-template-columns:44px 1fr auto;grid-template-rows:auto}
 .skin-action{grid-column:auto;min-width:92px}
}
@media (max-width:370px){
 .brand-name i{display:none}
 .seat-mark{display:none}
}
@media (max-height:700px) and (max-width:650px){
 .lobby-links button{min-height:42px}
 .faction{min-height:46px}
 #stage{bottom:150px}
 .game-hud{bottom:88px}
}
@media (max-width:650px){
 .faction>.faction-mark{font-size:21px}
 .faction.jade>.faction-mark{font-size:18px}
}
@media (max-width:650px){
 .faction>.faction-mark{height:34px}
 body[data-screen=menu] #stage{bottom:calc(var(--lobby-h,330px) - 14px)}
 .preview-note>div{border-radius:var(--radius);padding:7px 12px}
 .preview-note small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
}