.sorting-screen { padding:0; overflow:hidden; position:relative; justify-content:flex-start; }
.sorting-lobby { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; text-align:center; }
.sorting-lobby > img { width:140px; height:140px; object-fit:contain; }
.sorting-lobby h2 { font-size:26px; margin:0; }
.sorting-lobby p { margin:0; font-size:14px; max-width:360px; }
.sorting-lobby > button { width:min(300px,100%); }
.sorting-screen button:not(.nav-tab-btn):not(.sorting-slot):not(.mode-select-btn):not(.header-icon-btn),.sorting-settings > button { min-height:40px; }
.sorting-lobby > button,.sorting-settings > button,#sorting-finished button,.sorting-request button,.sorting-reconnect,#sorting-cancel-pick { padding:10px 16px; border-radius:6px; background:var(--theme-color); color:var(--theme-text-color); font-size:14px; }
.sorting-play { flex:1; min-height:0; overflow:auto; align-self:center; width:min(760px,100%); padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.sorting-metrics { display:grid; grid-template-columns:1fr auto; gap:4px 12px; font-size:13px; font-variant-numeric:tabular-nums; flex-shrink:0; }
.sorting-metrics strong { font-size:14px; overflow-wrap:anywhere; }
#sorting-time { text-align:right; }
.sorting-urgent { color:#f18a92; }
.sorting-board { width:100%; margin:4px 0; flex-shrink:0; }
.sorting-columns { display:grid; grid-template-columns:repeat(var(--sorting-columns),minmax(0,1fr)); gap:8px; }
.sorting-column { min-width:0; display:flex; flex-direction:column; gap:8px; }
.sorting-shelf { min-width:0; border-bottom:4px solid #6f7881; background:#ffffff08; }
.sorting-shelf-caption { font-size:10px; color:#b9c3c6; height:16px; padding:1px 4px; overflow:hidden; white-space:nowrap; }
.sorting-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.sorting-slot { position:relative; height:calc(max(28px,var(--sorting-label-lines,1)*13px) + 74px); min-width:0; border:1px solid #ffffff12; border-radius:3px; padding:3px; background:transparent; color:#f1f5f7; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; cursor:grab; }
.sorting-slot img { width:100%; height:70px; object-fit:contain; transform:scale(var(--item-scale,1)); transform-origin:center bottom; pointer-events:none; }
.sorting-item-label { display:flex; flex-direction:column; justify-content:center; width:100%; height:max(28px,var(--sorting-label-lines,1)*13px); flex-shrink:0; overflow:hidden; font-size:9px; line-height:13px; color:#d5dfe2; text-align:center; overflow-wrap:anywhere; pointer-events:none; }
.sorting-item-label > span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sorting-empty { font-size:18px; color:#ffffff35; margin:auto; }
.sorting-selected { outline:2px solid var(--theme-color); outline-offset:-2px; background:#ffffff10; }
.sorting-slot:focus-visible { outline:3px solid #fff; outline-offset:-3px; }
.sorting-drop { background:#73d9ae24; outline:2px solid #73d9ae; outline-offset:-2px; }
.sorting-drop-invalid { background:#e9828d20; outline:2px solid #e9828d; outline-offset:-2px; }
.sorting-ghost-valid { outline:2px solid #73d9ae; outline-offset:-2px; border-radius:3px; }
.sorting-ghost-invalid { outline:2px solid #e9828d; outline-offset:-2px; border-radius:3px; opacity:.7; }
.sorting-origin > * { visibility:hidden; }
.sorting-reserved { opacity:.45; cursor:not-allowed; }
.sorting-locked { border-color:#73d9ae; }
.sorting-locked button:disabled { opacity:1; }
.sorting-buffers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.sorting-buffer { border-bottom-color:#919c9f; }
.sorting-queue { font-size:10px; color:#b9c3c6; min-height:14px; text-align:center; }
.sorting-queue:empty { display:none; }
.sorting-ghost { position:fixed; z-index:1200; pointer-events:none; display:flex; align-items:center; justify-content:flex-end; flex-direction:column; opacity:.95; }
.sorting-ghost .sorting-item-label { visibility:hidden; }
.sorting-ghost img { width:100%; height:70px; object-fit:contain; transform:scale(var(--item-scale,1)); transform-origin:center bottom; }
#sorting-play-status { margin:0; font-size:12px; text-align:center; min-height:16px; }
#sorting-play-status:empty { display:none; }
#sorting-finished { text-align:center; flex-shrink:0; }
#sorting-finished h2 { margin:0; font-size:19px; }
#sorting-finished p { font-size:13px; margin:5px 0 10px; }
.sorting-request { text-align:center; font-size:13px; }
.sorting-request:empty { display:none; }
.sorting-request p { margin:4px 0 8px; }
.sorting-request button + button,#sorting-finished button + button { margin-left:8px; }
.sorting-reconnect { align-self:center; margin:4px; }
.sorting-settings { max-width:600px; margin:auto; display:flex; flex-direction:column; gap:10px; padding:8px 0; }
.sorting-settings select,.sorting-settings input[type=number],.sorting-stat-filters select { width:100%; min-height:40px; border:1px solid #ffffff30; border-radius:5px; padding:8px; background:#23272b; color:#fff; font-size:14px; }
.sorting-settings label { font-size:14px; }
.sorting-settings fieldset { border:0; border-top:1px solid #ffffff25; padding:12px 0; margin:4px 0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sorting-check { display:flex; align-items:center; gap:9px; min-height:32px; }
.sorting-check .app-checkbox { accent-color:var(--theme-color); flex-shrink:0; }
.sorting-stat-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.sorting-stat-filters label { font-size:12px; display:flex; flex-direction:column; gap:4px; }
.sorting-stats-row { grid-template-columns:1fr auto; }
.sorting-difficulty-row { grid-template-columns:minmax(0,1fr) minmax(68px,.7fr) minmax(58px,.6fr); gap:8px; }
.sorting-difficulty-row > span { text-align:right; }
#sorting-stats-content h5 { margin:16px 0 8px; font-size:13px; color:#c9d1d9; }
.sorting-best-times { margin-top:14px; border-top:1px solid #30363d; padding-top:12px; }
.sorting-best-times summary { cursor:pointer; color:var(--theme-color); font-size:13px; min-height:32px; }
.sorting-best-row strong { overflow-wrap:anywhere; }
.sorting-best-row small { display:block; margin-top:3px; color:#c9d1d9; font-size:11px; font-weight:400; }
.sorting-history-row { display:grid; grid-template-columns:1fr auto; font-size:12px; gap:4px; padding:8px 0; border-bottom:1px solid #ffffff15; }
.sorting-history-row span:last-child { grid-column:1/-1; color:#b9c3c6; }
.sorting-complete-overlay span::after { content:attr(data-label); }
@media(max-width:600px) { .sorting-play { padding:8px; } .sorting-columns { grid-template-columns:repeat(2,minmax(0,1fr)); } .sorting-columns,.sorting-column { gap:6px; } .sorting-slot { height:calc(max(28px,var(--sorting-label-lines,1)*13px) + 56px); padding:2px; } .sorting-slot img,.sorting-ghost img { height:50px; } .sorting-item-label { font-size:9px; } .sorting-shelf-caption { font-size:10px; } }
@media(max-height:650px) { .sorting-lobby { gap:8px; } .sorting-lobby > img { width:90px; height:90px; } .sorting-play { gap:5px; } }