@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Chivo:wght@400;600&display=swap";:root{font-family:Space Grotesk,Chivo,SF Pro Display,Segoe UI,system-ui,-apple-system,sans-serif;color:#e9edf5;background:radial-gradient(circle at 20% 20%,rgba(124,240,253,.1),transparent 32%),radial-gradient(circle at 80% 10%,rgba(255,105,180,.12),transparent 30%),linear-gradient(135deg,#0b1021,#0f1629 40%,#0c1022);min-height:100vh;height:100%;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overscroll-behavior:none}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;height:100vh;overflow:hidden}#root{min-height:100vh;height:100%}a{color:inherit}:root{--shell-padding: clamp(14px, 3vw, 32px);--grid-gap: clamp(12px, 2vw, 18px)}.app-shell{max-width:1200px;margin:0 auto;padding:var(--shell-padding);color:#e9edf5;min-height:100vh;height:100vh;display:flex;flex-direction:column;gap:var(--grid-gap);overflow:hidden}.hero{display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,2vw,24px);padding:clamp(12px,2vh,18px) clamp(14px,2vw,22px);border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(135deg,#7cf0fd1a,#7b61ff0f);box-shadow:0 25px 80px #00000073}.hero h1{margin:0 0 8px;font-size:clamp(26px,3vw,34px);letter-spacing:-.6px}.eyebrow{text-transform:uppercase;letter-spacing:.24em;font-size:12px;margin:0 0 6px;color:#95a8e5}.lede{margin:0;color:#cbd8ff}.pill{padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:#ffffff0f;box-shadow:inset 0 0 20px #ffffff0f;font-weight:600}.game-grid{display:grid;grid-template-columns:minmax(200px,.95fr) minmax(320px,1.2fr) minmax(200px,.95fr);grid-template-areas:"stats play queue";grid-auto-rows:1fr;gap:var(--grid-gap);align-items:stretch;flex:1;min-height:0;height:100%}.panel{background:linear-gradient(180deg,#141a30e6,#0e1221e6);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:clamp(14px,2vw,18px);box-shadow:0 25px 60px #00000059;display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}.panel-heading h2{margin:0;font-size:clamp(18px,2.4vw,22px);letter-spacing:-.2px}.pill.compact{padding:8px 12px;font-size:14px}.stats-panel{grid-area:stats}.queue-panel{grid-area:queue}.stat{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.label{color:#8ca0d8;font-weight:600;letter-spacing:.03em;font-size:clamp(12px,1.5vw,14px)}.label.next{margin:6px 0 8px}.value{font-size:clamp(18px,2.2vw,20px);font-weight:700;color:#f6f6ff}.divider{height:1px;width:100%;margin:12px 0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}.controls{display:flex;gap:10px;margin-top:6px}button{flex:1;font-family:inherit;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;color:#e9edf5;padding:10px 12px;font-weight:700;letter-spacing:.02em;font-size:15px;cursor:pointer;transition:transform .12s ease,box-shadow .18s ease,border-color .12s ease}button:hover:not(:disabled){transform:translateY(-2px);border-color:#7cf0fd99;box-shadow:0 8px 18px #7cf0fd2e}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:linear-gradient(135deg,#7cf0fd,#7b61ff);color:#0b0f1f;border:none}button.ghost{background:#ffffff0a}.hints{margin-top:8px;color:#a9b7e2;font-size:13px}.hints p{margin:0 0 6px;font-weight:700;color:#dbe4ff;font-size:13px}.hints ul{margin:0;padding-left:18px;display:grid;gap:4px}.play-area{grid-area:play;height:100%;min-height:0;display:flex;align-items:center;justify-content:center}.board{position:relative;width:min(100%,min(clamp(240px,55vw,520px),calc((100vh - var(--shell-padding) * 2 - 80px) / 2)));aspect-ratio:10 / 20;display:grid;grid-template-rows:repeat(20,1fr);grid-template-columns:1fr;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 30% 20%,rgba(124,240,253,.08),transparent 28%),#0c1021;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 70px #00000073,inset 0 0 0 1px #ffffff0d}.row{display:grid;grid-template-columns:repeat(10,1fr)}.cell{position:relative;border:1px solid rgba(255,255,255,.03);background:#ffffff05;transition:transform .1s ease}.cell.filled{box-shadow:inset 0 0 0 1px #ffffff1f,0 10px 24px #00000059}.cell.ghost{background:linear-gradient(145deg,#ffffff14,#ffffff05);border-style:dashed}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#0c1021d6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-weight:700;letter-spacing:.04em;text-align:center}.mini{margin-bottom:8px}.mini .label{display:block;margin-bottom:6px}.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#ffffff0a;padding:8px;border-radius:12px;border:1px solid rgba(255,255,255,.06);min-height:80px}.mini-grid.empty{display:flex;align-items:center;justify-content:center;color:#7f8bbd;font-weight:600}.mini-cell{aspect-ratio:1;border-radius:6px;background:#ffffff0d;border:1px solid rgba(255,255,255,.06)}.mini-cell.filled{box-shadow:inset 0 0 0 1px #ffffff2e,0 10px 26px #00000059}.next-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}.next-card{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:8px;padding:6px;border-radius:12px;background:#ffffff08;border:1px solid rgba(255,255,255,.06);flex:0 0 150px}.next-card .label{text-align:right;color:#c5cffd}.next-card .mini{margin-bottom:0}.next-card .mini-grid{min-height:64px}@media(max-width:1080px){.game-grid{grid-template-columns:minmax(170px,.9fr) minmax(260px,1.1fr);grid-template-areas:"stats play" "queue play";grid-auto-rows:1fr}.panel{padding:clamp(12px,2vw,16px)}.board{width:min(100%,min(clamp(220px,60vw,480px),calc((100vh - var(--shell-padding) * 2 - 70px) / 2)))}}@media(max-width:760px){:root{--grid-gap: clamp(10px, 3vw, 14px)}.app-shell{padding:clamp(12px,4vw,18px)}.hero{flex-direction:column;align-items:stretch}.controls{flex-direction:column}.game-grid{grid-template-columns:minmax(130px,.9fr) minmax(200px,1.1fr)}.board{width:min(100%,min(clamp(200px,70vw,440px),calc((100vh - var(--shell-padding) * 2 - 60px) / 2)))}}