:root { --bg0: #050816; --bg1: #0b1024; --bg2: #121a34; --glass: rgba(255, 255, 255, 0.07); --glass2: rgba(255, 255, 255, 0.11); --stroke: rgba(255, 255, 255, 0.14); --stroke2: rgba(255, 255, 255, 0.22); --text: rgba(255, 255, 255, 0.94); --muted: rgba(255, 255, 255, 0.68); --accent: #38bdf8; --accent2: #a78bfa; --danger: #fb7185; --good: #86efac; --shadow: rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; touch-action: none; } body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color: var(--text); background: radial-gradient(900px 420px at 18% 10%, rgba(168, 85, 247, 0.25), transparent 60%), radial-gradient(700px 360px at 82% 20%, rgba(56, 189, 248, 0.2), transparent 58%), radial-gradient(600px 420px at 50% 100%, rgba(34, 197, 94, 0.12), transparent 62%), linear-gradient(180deg, var(--bg0), var(--bg1) 55%, var(--bg2)); } button, input { font: inherit; } button { cursor: pointer; } .gameShell { width: 100%; height: 100dvh; min-height: 100dvh; display: flex; flex-direction: column; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); gap: 10px; } .gameTop { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--stroke); border-radius: 18px; background: rgba(255, 255, 255, 0.055); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .titleBlock { min-width: 0; } #ggTitle { font-weight: 1000; letter-spacing: -0.03em; font-size: clamp(17px, 3.2vw, 26px); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ggSub { margin-top: 4px; color: var(--muted); font-size: clamp(11px, 1.8vw, 13px); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hud { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: nowrap; } .pill { min-width: 78px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--stroke); background: rgba(0, 0, 0, 0.24); color: var(--text); font-size: 12px; font-weight: 850; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .pill b { font-size: 14px; font-variant-numeric: tabular-nums; } .dot { width: 8px; height: 8px; border-radius: 999px; background: linear-gradient(135deg, var(--good), var(--accent)); box-shadow: 0 0 18px rgba(56, 189, 248, 0.55); } .gameStage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden; border-radius: 22px; border: 1px solid var(--stroke); background: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.12), transparent 18%), radial-gradient(circle at 82% 28%, rgba(56, 189, 248, 0.13), transparent 20%), linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)); box-shadow: 0 22px 80px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08); } canvas#c { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; outline: none; background: transparent; touch-action: none; user-select: none; } .overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 18px; background: radial-gradient(circle at 50% 38%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.52)), rgba(0, 0, 0, 0.18); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .card { width: min(620px, 100%); max-height: min(82dvh, 620px); overflow: auto; padding: clamp(18px, 4vw, 28px); border-radius: 26px; border: 1px solid var(--stroke2); background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.075)), rgba(5, 8, 22, 0.78); box-shadow: 0 24px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); text-align: left; } #panelTitle { font-size: clamp(26px, 6vw, 48px); line-height: 0.98; letter-spacing: -0.06em; font-weight: 1000; background: linear-gradient(135deg, #fff, #bae6fd 42%, #ddd6fe); -webkit-background-clip: text; background-clip: text; color: transparent; } #panelText { margin: 14px 0 0; color: var(--muted); font-size: clamp(13px, 2.4vw, 16px); font-weight: 700; line-height: 1.45; white-space: pre-line; } .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .cta, .ghost { min-height: 44px; border: 1px solid var(--stroke2); border-radius: 16px; padding: 12px 16px; color: var(--text); font-weight: 1000; letter-spacing: -0.01em; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25); } .cta { background: linear-gradient(135deg, rgba(56, 189, 248, 0.95), rgba(167, 139, 250, 0.92)); } .ghost { background: rgba(255, 255, 255, 0.08); } .cta:active, .ghost:active { transform: translateY(1px) scale(0.99); } .hiddenCompat { position: absolute; width: 1px; height: 1px; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; } .gameBottom { flex: 0 0 0; height: 0; } @media (max-width: 760px) { .gameShell { padding: 8px; gap: 8px; } .gameTop { grid-template-columns: 1fr; padding: 10px; border-radius: 16px; } #ggSub { white-space: normal; line-height: 1.25; } .hud { justify-content: stretch; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .pill { min-width: 0; padding: 8px 7px; font-size: 11px; } .pill b { font-size: 13px; } .gameStage { border-radius: 18px; } .overlay { padding: 12px; align-items: flex-end; } .card { border-radius: 22px; padding: 18px; } .row { display: grid; grid-template-columns: 1fr; } .cta, .ghost { width: 100%; } } @media (max-height: 560px) and (orientation: landscape) { .gameShell { padding: 6px; gap: 6px; } .gameTop { grid-template-columns: 1fr auto; padding: 7px 8px; border-radius: 14px; } #ggTitle { font-size: 16px; } #ggSub { display: none; } .pill { padding: 6px 8px; font-size: 11px; } .gameStage { border-radius: 16px; } .overlay { align-items: center; } .card { max-height: 82dvh; padding: 14px; } #panelTitle { font-size: 28px; } #panelText { font-size: 12px; line-height: 1.35; } .row { margin-top: 12px; } .cta, .ghost { min-height: 38px; padding: 9px 12px; } }