html, body { margin:0; height:100%; overflow:hidden; font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif; background:#17191d; color:#f4f1e8; touch-action:none; }
#c { width:100vw; height:100vh; display:block; }

#topbar { position:fixed; z-index:10; left:0; top:0; width:100%; height:42px; box-sizing:border-box; padding:6px 10px; padding-top:max(6px, env(safe-area-inset-top)); display:flex; align-items:center; justify-content:space-between; gap:8px; background:rgba(20,22,26,.88); border-bottom:1px solid rgba(255,255,255,.12); backdrop-filter:blur(10px); }
#topbar .brand { font-weight:850; font-size:16px; letter-spacing:.2px; flex-shrink:0; white-space:nowrap; }
#topbar .meta { display:flex; gap:6px; align-items:center; font-size:11px; color:#c8c3b8; flex-wrap:nowrap; overflow:hidden; min-width:0; max-width:70%; }
#topbar .meta span { padding:3px 7px; border-radius:999px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:rgba(0,0,0,.18); }
#seatLabel { display:inline-flex; align-items:center; gap:5px; max-width:120px; }
#seatLabel canvas, #seatLabel img { width:32px; height:32px; border-radius:5px; display:block; flex-shrink:0; }

#lobbyTools { position:fixed; z-index:12; right:10px; top:50px; display:flex; flex-direction:row; gap:7px; background:rgba(20,22,26,.9); border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:7px; box-shadow:0 8px 22px rgba(0,0,0,.4); }
#lobbyTools button { font-size:12px; padding:7px 12px; }

#bottomSheet { position:fixed; z-index:10; left:0; bottom:0; width:100%; box-sizing:border-box; padding:6px 10px 10px; padding-bottom:max(10px, env(safe-area-inset-bottom)); background:rgba(20,22,26,.92); border-top:1px solid rgba(255,255,255,.14); backdrop-filter:blur(12px); display:flex; flex-direction:column; }
#pieceList { display:flex; justify-content:flex-start; gap:10px; overflow-x:auto; overflow-y:hidden; padding:2px 2px 4px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
#pieceList::-webkit-scrollbar { height:5px; }
#pieceList::-webkit-scrollbar-thumb { background:rgba(255,255,255,.25); border-radius:3px; }

.piece-card { flex:0 0 auto; scroll-snap-align:start; display:flex; align-items:center; justify-content:center; width:76px; height:76px; border:1px solid rgba(255,255,255,.16); background:rgba(45,50,58,.92); color:#fff; border-radius:16px; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; padding:6px; touch-action:pan-x; }
.piece-card.dragging { opacity:.65; transform:scale(.92); }
.piece-card:hover, .piece-card:active { background:rgba(64,72,84,.95); }
.piece-card img { width:64px; height:64px; display:block; pointer-events:none; }
.piece-card.disabled { opacity:.45; pointer-events:none; filter:grayscale(.4); }

#placementTools { position:fixed; z-index:11; left:50%; bottom:132px; transform:translateX(-50%); display:flex; gap:8px; align-items:center; background:rgba(20,22,26,.93); border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:8px; box-shadow:0 12px 30px rgba(0,0,0,.45); backdrop-filter:blur(10px); }
#placementTools button { min-width:42px; min-height:42px; font-size:20px; display:inline-flex; align-items:center; justify-content:center; }
#placementTools .big { min-width:80px; font-size:15px; font-weight:800; }
#placementTools .icon { padding:0; }
#placeBtn.disabled { opacity:.45; pointer-events:none; filter:grayscale(.4); }

button { border:1px solid rgba(255,255,255,.18); background:#2a2e35; color:#fff; border-radius:10px; padding:8px 10px; cursor:pointer; font-weight:750; -webkit-tap-highlight-color:transparent; }
button:hover, button:active { background:#38404a; }
button.danger { background:#542b31; }
button.danger:hover, button.danger:active { background:#71343d; }
button.primary { background:#244d75; }
button.primary:hover, button.primary:active { background:#2f638f; }

.hidden { display:none !important; }

#turnToast { position:fixed; z-index:20; left:50%; top:50%; transform:translate(-50%,-50%); background:rgba(36,77,117,.92); color:#fff; padding:16px 28px; border-radius:18px; font-weight:800; font-size:18px; box-shadow:0 16px 40px rgba(0,0,0,.45); pointer-events:none; transition:opacity .55s ease; opacity:1; }

@media (min-width: 860px) {
  #bottomSheet { left:0; bottom:0; width:100%; border-radius:0; }
  #pieceList { justify-content:center; }
  .piece-card { width:76px; height:76px; }
}