:root{--design-width:390px;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--bg-top:#09111f;--bg-bottom:#152c46;--panel:rgba(9,18,31,0.78);--stroke:rgba(173,208,255,0.18);--text-main:#f4f8ff;--text-dim:rgba(244,248,255,0.7);--accent:#7be0ff;--accent-2:#ffd86b;--danger:#ff7b7b;--player-a:#7be0ff;--player-b:#ff9bb6}*{box-sizing:border-box}body,html{width:100%;min-height:100%;margin:0;background:radial-gradient(circle at top,#264a72 0,transparent 34%),linear-gradient(180deg,var(--bg-top) 0,var(--bg-bottom) 100%);color:var(--text-main);font-family:Trebuchet MS,Avenir Next,Segoe UI,sans-serif}body{overflow-x:hidden;overscroll-behavior-y:none}.shell-scale{padding:0;display:flex;justify-content:center}.shell,.shell-scale{min-height:100dvh;width:100%}.shell{max-width:var(--design-width);background:radial-gradient(circle at top,rgba(135,205,255,.16),transparent 20%),linear-gradient(180deg,rgba(9,18,31,.96),rgba(18,35,58,.98));box-shadow:0 20px 60px rgba(0,0,0,.45)}.screen{min-height:100dvh;display:flex;flex-direction:column;gap:8px;padding:calc(14px + var(--safe-top)) calc(16px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(16px + var(--safe-left));position:relative}.board-card,.controls-card,.drop-timer-card,.history-card,.overlay-card,.status-card,.topbar{background:var(--panel);border:1px solid var(--stroke);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.topbar{border-radius:18px;padding:12px 14px}.title-row{display:flex;align-items:center;justify-content:center}.title{margin:0;font-size:28px;line-height:.95;font-weight:900}.pill{border-radius:999px;padding:8px 12px;background:rgba(255,255,255,.08);font-size:12px;font-weight:800;white-space:nowrap}.status-card{border-radius:22px;padding:14px;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}.drop-timer-card{align-self:center;min-width:86px;border-radius:18px;padding:10px 18px;text-align:center}.drop-timer-value{font-size:32px;line-height:1;font-weight:900}.player-column{display:grid;gap:8px;justify-items:center}.player-name{font-size:13px;font-weight:800}.player-name.active{color:var(--accent-2)}.ring-wrap{position:relative;width:76px;height:76px}.ring-wrap svg{width:100%;height:100%;transform:rotate(-90deg)}.ring-center{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:900}.turn-column{display:grid;gap:6px;justify-items:center;text-align:center}.turn-badge{min-width:92px;border-radius:16px;padding:10px 12px;background:linear-gradient(180deg,rgba(123,224,255,.18),rgba(123,224,255,.06));border:1px solid rgba(123,224,255,.2);font-size:12px;font-weight:900}.turn-remaining{font-size:24px;font-weight:900}.board-card{flex:1 1;min-height:0;border-radius:28px;padding:14px;display:flex;flex-direction:column;gap:12px}.top3-list{display:grid;gap:8px}.top3-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border-radius:14px;background:rgba(255,255,255,.05);padding:10px 12px}.top3-rank{font-size:12px;font-weight:900;color:var(--accent)}.top3-label{font-size:13px;font-weight:800}.top3-score{font-size:12px;color:var(--text-dim);font-weight:800}.classification-strip{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border-radius:20px;background:linear-gradient(180deg,rgba(123,224,255,.12),rgba(255,255,255,.05));border:1px solid rgba(123,224,255,.14);padding:12px 14px}.classification-title{margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);font-weight:900}.classification-label{margin:0;font-size:28px;line-height:.95;font-weight:900}.classification-score{font-size:12px;color:var(--text-dim)}.board-wrap{position:relative;flex:1 1;min-height:0;display:grid;place-items:center;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),rgba(2,7,14,.42);overflow:hidden}.board-canvas{width:100%;aspect-ratio:1;display:block;border-radius:18px;border:1px solid rgba(255,255,255,.06);touch-action:manipulation}.controls-card{border-radius:22px;padding:14px;display:grid;gap:12px}.controls-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.metric{border-radius:16px;background:rgba(255,255,255,.05);padding:10px}.metric-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim)}.metric-value{margin-top:4px;font-size:20px;font-weight:900}.buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.buttons-single{grid-template-columns:1fr}button{appearance:none;border:0;border-radius:14px;min-height:42px;padding:0 12px;font:inherit;font-size:14px;font-weight:900;color:#07111d;background:linear-gradient(180deg,#7be0ff,#47c0ff);box-shadow:0 10px 20px rgba(0,0,0,.2)}button.secondary{color:var(--text-main);background:rgba(255,255,255,.08)}button:disabled{opacity:.45;box-shadow:none}a{color:inherit;text-decoration:none}.mode-screen{justify-content:center;gap:18px}.mode-hero{display:grid;gap:8px;text-align:center}.mode-title{margin:0;font-size:40px;line-height:.95;font-weight:900}.mode-list{display:grid;gap:12px}.mode-link{display:grid;gap:8px;border-radius:18px;padding:18px;background:var(--panel);border:1px solid var(--stroke);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.mode-link-primary{background:linear-gradient(180deg,rgba(123,224,255,.16),rgba(255,255,255,.06));border-color:rgba(123,224,255,.34)}.mode-link-title{font-size:22px;font-weight:900}.mode-link-copy{color:var(--text-dim);font-size:13px;line-height:1.45}.drop-board-wrap,.drop-canvas{touch-action:none}.drop-canvas{aspect-ratio:512/656;cursor:grab}.drop-canvas:active{cursor:grabbing}.drop-controls{display:grid;gap:8px}.buttons-three{grid-template-columns:repeat(3,minmax(0,1fr))}.history-strip{display:grid;gap:6px}.history-chip{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;border-radius:12px;padding:8px 10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:12px;font-weight:800;color:var(--text-dim)}.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--text-dim)}.legend-chip{display:inline-flex;align-items:center;gap:6px}.legend-swatch{width:12px;height:12px;border-radius:999px}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:rgba(5,10,18,.54);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.overlay-card{width:100%;border-radius:24px;padding:18px;display:grid;gap:12px;text-align:center}.overlay-title{margin:0;font-size:28px;line-height:1;font-weight:900}.helper,.overlay-text{margin:0;color:var(--text-dim);font-size:13px;line-height:1.5}@media (min-width:391px){.shell{border-left:1px solid rgba(255,255,255,.05);border-right:1px solid rgba(255,255,255,.05)}}.comparison-panel{border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.comparison-panel{padding:10px;display:grid;gap:8px}.comparison-label{font-size:12px;font-weight:800;color:var(--text-dim)}.comparison-canvas{width:100%;aspect-ratio:1;display:block;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.tag-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.tag{border-radius:999px;padding:8px 10px;background:rgba(255,255,255,.08);font-size:12px}.loading,.tag{font-weight:800}.loading{display:inline-flex;align-items:center;gap:8px;font-size:13px;justify-content:center}.loading-dot{width:10px;height:10px;border-radius:999px;background:var(--accent);animation:pulse .9s ease-in-out infinite alternate}@keyframes pulse{0%{opacity:.35;transform:scale(.9)}to{opacity:1;transform:scale(1.15)}}