.block1010-screen { overflow:hidden; padding:0; justify-content:flex-start; position:relative; }
.block1010-lobby { flex:1; min-height:0; overflow:auto; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; padding:16px; }
.block1010-lobby img { width:150px; height:150px; object-fit:contain; }
.block1010-lobby h2 { font-size:26px; }
.block1010-lobby p { margin:0; font-size:14px; }
.block1010-lobby button,.block1010-new,#block1010-finished button,.block1010-request button { padding:11px 18px; min-height:40px; border-radius:6px; background:var(--theme-color); color:var(--theme-text-color); font-size:14px; }
.block1010-lobby > button { width:min(300px,100%); }
.block1010-play { --board-max:440px; flex:1; min-height:0; width:min(480px,100%); align-self:center; padding:12px 16px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.block1010-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:12px; text-align:center; flex-shrink:0; }
.block1010-metrics span { display:block; font-size:12px; color:#A9B5C3; margin-bottom:3px; }
.block1010-metrics strong { font-size:23px; line-height:28px; font-variant-numeric:tabular-nums; }
.block1010-board-area { position:relative; width:min(100%,440px,var(--board-max)); margin:auto 0; flex-shrink:0; }
.block1010-board { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:3px; aspect-ratio:1; width:100%; }
.block1010-cell { aspect-ratio:1; min-width:0; padding:0; border:0; border-radius:4px; background:var(--cell-colour); opacity:1; touch-action:none; }
.block1010-cell:disabled { opacity:1; }
.block1010-cell:focus-visible { background:var(--theme-color); opacity:.65; }
.block1010-cell.drop-preview { background:var(--preview-colour); opacity:.65; }
.block1010-tray { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; height:100px; flex:0 0 100px; gap:8px; }
.block1010-piece { display:grid; place-items:center; min-width:0; background:transparent; border:0; border-radius:6px; padding:4px; touch-action:none; }
.block1010-piece.selected { background:#FFFFFF0D; }
.block1010-piece { cursor:grab; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.block1010-piece.dragging-origin .block1010-mini { visibility:hidden; }
.block1010-mini { --mini-cell:15px; display:grid; grid-template-columns:repeat(var(--shape-columns),var(--mini-cell)); grid-template-rows:repeat(var(--shape-rows),var(--mini-cell)); gap:3px; pointer-events:none; }
.block1010-mini i { border:0; border-radius:3px; background:var(--block-colour); }
.block1010-drag { position:fixed; pointer-events:none; z-index:1100; opacity:.9; }
.block1010-drag.invalid { opacity:.4; }
#block1010-play-status { margin:0; font-size:12px; line-height:16px; color:#A9B5C3; min-height:0; flex-shrink:0; text-align:center; }
#block1010-play-status:empty { display:none; }
#block1010-finished { flex-shrink:0; text-align:center; }
#block1010-finished strong { display:block; margin-bottom:8px; font-size:14px; }
#block1010-points { position:absolute; top:40%; left:0; right:0; text-align:center; color:#FFF; font-size:22px; font-weight:800; opacity:0; pointer-events:none; text-shadow:0 1px 6px #000; }
.block1010-modes { max-width:600px; margin:0 auto; }
.block1010-modes .mode-option-btn { margin-bottom:12px; }
.block1010-modes .block1010-new { margin-top:12px; }
.block1010-request:empty { display:none; }
.block1010-request { text-align:center; padding:8px; font-size:13px; flex-shrink:0; }
.block1010-request p { margin:0 0 8px; }
.block1010-request button + button { margin-left:8px; }
.block1010-complete-overlay span::after { content:attr(data-label); }
.block1010-stats-row { grid-template-columns:1fr auto; }
.block1010-stat-best { font-size:28px; color:var(--theme-color); font-weight:800; }
@media(prefers-reduced-motion:no-preference) {
    .block1010-placed { animation:block1010-place .18s ease-out; }
    .block1010-clear { animation:block1010-clear .55s ease-out; }
    #block1010-points.block1010-points-pop { animation:block1010-points .75s ease-out; }
    @keyframes block1010-place { from { transform:scale(.8); } to { transform:scale(1); } }
    @keyframes block1010-clear { 0% { background:var(--theme-color); transform:scale(1); } 45% { background:#FFF; transform:scale(.85); } 100% { background:var(--cell-colour); transform:scale(1); } }
    @keyframes block1010-points { 0% { opacity:0; transform:translateY(8px); } 20%,65% { opacity:1; } 100% { opacity:0; transform:translateY(-16px); } }
}
@media(max-height:620px) { .block1010-play { padding:6px 12px; gap:4px; } .block1010-tray { height:80px; flex-basis:80px; } .block1010-lobby { gap:8px; } .block1010-lobby img { width:100px; height:100px; } }