@font-face { font-family: 'Baloo 2'; src: url('lib/baloo2-sub.woff') format('woff'); font-weight: 600 800; font-display: swap; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1a3a; color: #fff; font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; user-select: none; -webkit-user-select: none; }
#cv { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; touch-action: none; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(6, 14, 40, .72); z-index: 10; overflow-y: auto; }
.screen.show { display: flex; }
#menu { background: radial-gradient(circle at 50% 30%, #1d4fb8, #0b1a3a 75%); }
.box { width: min(100%, 400px); background: #0646c0; border: 3px solid #5a92ff; border-radius: 24px; padding: 16px; text-align: center; box-shadow: 0 10px 0 rgba(2, 16, 66, .55); margin: auto; }
h1 { margin: 0 0 4px; font-size: 34px; line-height: 1.1; }
h2 { margin: 0 0 8px; font-size: 28px; }
.tag { font-size: 14px; background: #ffd23f; color: #4a2700; border-radius: 999px; padding: 2px 10px; vertical-align: middle; }
.sub { margin: 4px 0 10px; color: #cfe2ff; }
.help { font-size: 13px; color: #bcd6ff; font-weight: 600; margin: 10px 0 0; line-height: 1.3; }
#picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; }
#picks button { background: rgba(255, 255, 255, .12); border: 3px solid transparent; border-radius: 16px; padding: 4px 2px 2px; color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
#picks button img { width: 100%; max-width: 64px; aspect-ratio: 1; display: block; margin: 0 auto; }
#picks button.on { border-color: #ffd23f; background: rgba(255, 210, 63, .2); }
.btn { display: block; width: 100%; margin: 8px 0; padding: 12px; border-radius: 18px; border: 3px solid #0a1d5c; font: inherit; font-size: 20px; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(#5aa0ff, #2a6ef0); box-shadow: 0 5px 0 #143f9e; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #143f9e; }
.btn.yellow { background: linear-gradient(#ffe36e, #ffb400); color: #4a2700; box-shadow: 0 5px 0 #c27800; }
.btn.green { background: linear-gradient(#4fe08f, #17b464); box-shadow: 0 5px 0 #0c7a42; }
.btn.pink { background: linear-gradient(#ff7fac, #f2407f); box-shadow: 0 5px 0 #b01d55; }
.btn.blue { background: linear-gradient(#8fb6ff, #4f86ff); box-shadow: 0 5px 0 #2552b8; font-size: 16px; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: #cfe2ff; font-size: 16px; }
.row, .joinrow { display: flex; gap: 8px; align-items: center; }
.row .btn { flex: 1; white-space: nowrap; }
.joinrow input { flex: 1; min-width: 0; height: 56px; margin: 8px 0; border-radius: 18px; border: 3px solid #0a1d5c; text-align: center; font: inherit; font-size: 28px; letter-spacing: 6px; text-transform: uppercase; color: #0646c0; }
.joinrow .btn { flex: 0 0 auto; width: auto; padding: 12px 16px; }
.status { min-height: 22px; margin: 6px 0; color: #ffd23f; }
.status.err { color: #ffb3c0; }
.code { font-size: clamp(48px, 16vw, 68px); font-weight: 800; letter-spacing: .2em; padding-left: .2em; color: #0a1d5c; background: #fff6cf; border: 4px dashed #ffd23f; border-radius: 18px; margin: 4px 0 8px; user-select: all; -webkit-user-select: all; line-height: 1.15; }
/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#scores { position: absolute; left: max(8px, env(safe-area-inset-left)); top: max(8px, env(safe-area-inset-top)); font-size: 15px; line-height: 1.25; text-shadow: 0 2px 0 #000a; background: rgba(0, 0, 0, .25); border-radius: 12px; padding: 4px 10px; }
#scores b { color: #ffd23f; }
#stats { position: absolute; right: max(8px, env(safe-area-inset-right)); top: calc(max(8px, env(safe-area-inset-top)) + 46px); font: 600 11px/1.2 ui-monospace, monospace; color: #cfe2ffcc; text-align: right; white-space: pre; }
#topbtns { position: absolute; right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); display: flex; gap: 6px; pointer-events: auto; }
.ib { width: 40px; height: 40px; border-radius: 12px; border: 2px solid #0a1d5c; background: #fff; font-size: 18px; cursor: pointer; color: #0646c0; font-weight: 800; }
#turbo { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); width: 92px; height: 92px; border-radius: 50%; border: 4px solid #0a1d5c; background: radial-gradient(circle at 40% 35%, #ffe36e, #ff9f1c); font-size: 34px; line-height: 1; pointer-events: auto; touch-action: none; box-shadow: 0 6px 0 #c25a00; color: #4a2700; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: .9; }
#turbo small { font-size: 13px; font-weight: 800; }
#turbo.on { transform: translateY(4px) scale(.96); box-shadow: 0 2px 0 #c25a00; background: radial-gradient(circle at 40% 35%, #fff, #ffd23f); }
#note { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); background: rgba(0, 0, 0, .55); padding: 6px 14px; border-radius: 14px; font-size: 18px; }
@media (orientation: landscape) and (max-height: 500px) { #turbo { width: 78px; height: 78px; font-size: 28px; } .box { padding: 10px; } #picks { grid-template-columns: repeat(8, 1fr); } h1 { font-size: 26px; } .btn { padding: 8px; margin: 6px 0; } }