.app{max-width:1200px;margin:0 auto;padding:32px 24px 48px;color:var(--ink);font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,sans-serif}.header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px}.eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}.header h1{font-size:clamp(28px,4vw,44px);margin:0 0 8px}.subtle{color:var(--muted);margin:0;max-width:520px}.status-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:#ffffffb3;border:1px solid rgba(15,23,42,.08);box-shadow:0 12px 30px #0f172a14;font-weight:600}.status-pill .dot{width:10px;height:10px;border-radius:50%;background:var(--accent-2);display:inline-block}.status-pill.status-won .dot{background:#22c55e}.status-pill.status-lost .dot{background:#ef4444}.panel{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-radius:20px;background:var(--panel);box-shadow:var(--shadow);margin-bottom:24px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:rise .5s ease both}.stats{display:flex;gap:28px}.stat-value{font-size:22px;font-weight:700}.stat-label{font-size:12px;color:var(--muted)}.controls{display:flex;gap:12px}.controls button{border:none;border-radius:12px;padding:10px 18px;font-weight:600;background:linear-gradient(135deg,var(--accent),#fb923c);color:#fff;cursor:pointer;box-shadow:0 10px 20px #f9731640;transition:transform .2s ease,box-shadow .2s ease}.controls button:nth-child(2){background:linear-gradient(135deg,var(--accent-2),#38bdf8);box-shadow:0 10px 20px #0ea5e947}.controls button:nth-child(3){background:linear-gradient(135deg,#111827,#334155);box-shadow:0 10px 20px #0f172a4d}.controls button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.controls button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 14px 26px #0f172a38}.controls .count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;padding:2px 8px;margin-left:8px;border-radius:999px;font-size:12px;background:#fff3;color:#fffffff2}.board-shell{position:relative;padding:24px;border-radius:28px;background:#ffffffb8;box-shadow:var(--shadow);margin-bottom:26px;overflow:hidden}.board-shell:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at top left,rgba(14,165,233,.12),transparent 60%),radial-gradient(circle at bottom right,rgba(249,115,22,.12),transparent 65%);pointer-events:none}.board{position:relative;margin:0 auto;width:calc(var(--tile-size) * var(--board-cols) + var(--layer-offset));height:calc(var(--tile-size) * var(--board-rows) + var(--layer-offset))}.tile{position:absolute;width:var(--tile-size);height:var(--tile-size);border-radius:18px;border:1px solid rgba(15,23,42,.12);background:linear-gradient(145deg,#fff,#f8fafc);box-shadow:0 10px 20px #0f172a1f;cursor:pointer;display:grid;place-items:center;transform-origin:center;transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;animation:pop .25s ease both}.tile-face{font-size:26px;position:relative;z-index:2}.tile-shadow{position:absolute;top:12px;right:12px;bottom:12px;left:12px;border-radius:14px;background:#0ea5e914;pointer-events:none}.tile.layer-1{background:linear-gradient(150deg,#fff,#e0f2fe)}.tile.blocked{filter:grayscale(.2) brightness(.85);cursor:not-allowed}.tile:not(.blocked):hover{transform:translateY(-4px) scale(1.02);box-shadow:0 18px 30px #0f172a33}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#0f172a6b;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:5}.overlay-card{background:#fff;padding:28px 32px;border-radius:20px;text-align:center;min-width:240px;box-shadow:0 20px 50px #0f172a40;position:relative;z-index:6}.overlay-card h2{margin:0 0 8px;font-size:24px}.overlay-card p{margin:0 0 16px;color:var(--muted)}.overlay-card button{border:none;border-radius:12px;padding:10px 20px;background:linear-gradient(135deg,var(--accent),#fb923c);color:#fff;font-weight:600;cursor:pointer}.overlay-start{background:#0f172a8c}.overlay-card-start{text-align:left;max-width:520px}.overlay-card-start h2{margin-top:6px}.difficulty-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-top:18px}.difficulty-card{border:1px solid rgba(15,23,42,.12);border-radius:16px;padding:16px;background:#fff;cursor:pointer;display:grid;gap:6px;text-align:left;box-shadow:0 12px 26px #0f172a1f;transition:transform .2s ease,box-shadow .2s ease}.difficulty-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px #0f172a2e}.difficulty-title{font-size:18px;font-weight:700;color:var(--ink)}.difficulty-desc{font-size:12px;color:var(--muted)}.difficulty-easy{background:linear-gradient(135deg,#f9731614,#f9731605)}.difficulty-casual{background:linear-gradient(135deg,#0ea5e91a,#0ea5e905)}.difficulty-challenge{background:linear-gradient(135deg,#0f172a14,#0f172a05)}.tray{display:grid;gap:12px}.tray-label{font-weight:600;color:var(--ink)}.tray-slots{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}.tray-slot{height:58px;border-radius:14px;background:#ffffffb3;border:1px dashed rgba(15,23,42,.2);display:grid;place-items:center;font-size:24px;color:var(--muted)}.tray-slot .ghost{opacity:.5}@keyframes pop{0%{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 900px){.header,.panel{flex-direction:column;align-items:flex-start}.controls{width:100%;justify-content:flex-start;flex-wrap:wrap}}@media (max-width: 700px){.tray-slots{grid-template-columns:repeat(4,minmax(0,1fr))}}*{box-sizing:border-box}:root{--tile-size: 64px;--layer-offset: 8px;--bg-1: #fff7ed;--bg-2: #f1f5f9;--bg-3: #e2e8f0;--ink: #1f2937;--muted: #64748b;--panel: rgba(255, 255, 255, .78);--accent: #f97316;--accent-2: #0ea5e9;--shadow: 0 18px 50px rgba(15, 23, 42, .18)}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 15%,var(--bg-1),transparent 60%),radial-gradient(circle at 80% 20%,#e0f2fe,transparent 45%),linear-gradient(180deg,var(--bg-2),var(--bg-3))}#root{min-height:100vh}button{font-family:inherit}@media (max-width: 900px){:root{--tile-size: 54px;--layer-offset: 6px}}@media (max-width: 600px){:root{--tile-size: 48px;--layer-offset: 5px}}