* { box-sizing: border-box; }
:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f4fffb; background: #102735; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 4% 13%, #164f59 0, transparent 34%), radial-gradient(circle at 93% 80%, #42375f 0, transparent 36%), #102735; }
button { font: inherit; cursor: pointer; }
.shell { max-width: 1200px; margin: auto; padding: 24px 22px 18px; }
.header { display: flex; align-items: end; gap: 20px; margin-bottom: 22px; }
.brand small { color: #80e8d9; font-size: 11px; font-weight: 850; letter-spacing: .19em; }
h1 { margin: 5px 0 0; font-size: clamp(35px, 5vw, 60px); line-height: 1; letter-spacing: -.075em; font-weight: 950; }
h1 em { color: #ffbd73; font-style: normal; }
.brand p { color: #accacb; font-size: 13px; margin: 8px 0 0; }
.header nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 7px; justify-content: end; }
.header a { color: #cbe3e5; text-decoration: none; font-size: 11px; font-weight: 800; padding: 10px; border: 1px solid #456978; border-radius: 9px; }
.header a:hover { background: #245263; }
.layout { display: grid; grid-template-columns: minmax(185px, 1fr) minmax(0, 390px) minmax(185px, 1fr); gap: 18px; align-items: start; }
.panel { background: #183b49; border: 1px solid #3d6b78; border-radius: 18px; padding: 19px; box-shadow: 0 17px 34px #071a2399; }
.panel-heading { color: #83e8d7; font-size: 11px; font-weight: 850; letter-spacing: .15em; margin-bottom: 22px; }
.panel-heading span { display: inline-grid; place-items: center; width: 23px; height: 23px; border: 1px solid #64aaad; border-radius: 50%; margin-right: 7px; }
.metric { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #3c6171; }
.metric small, .metric-row small, .next-box small { display: block; color: #9cc0c9; font-size: 10px; font-weight: 850; letter-spacing: .16em; margin-bottom: 6px; }
.metric strong { font-size: clamp(23px, 2.7vw, 31px); font-variant-numeric: tabular-nums; }
.metric-row { display: flex; gap: 22px; margin-bottom: 18px; }
.metric-row > div { flex: 1; }
.metric-row strong { font-size: 23px; font-variant-numeric: tabular-nums; }
.next-box { background: #102f3c; border: 1px solid #456e7b; border-radius: 12px; padding: 12px; text-align: center; }
.next-box small { text-align: left; }
.next-box canvas { display: block; width: 100px; height: 90px; margin: auto; }
.hint { color: #b8d0d2; font-size: 12px; line-height: 1.55; margin: 18px 0 0; }
.hint span { color: #ffca80; font-size: 20px; float: left; margin-right: 7px; }
.play-column { border: 1px solid #72a1a6; padding: 10px; background: #23505d; border-radius: 18px; box-shadow: 0 25px 58px #041b22ae; width: 100%; max-width: 390px; justify-self: center; }
.screen-top, .screen-bottom { display: flex; justify-content: space-between; align-items: center; color: #b3d7d7; font-size: 10px; font-weight: 850; letter-spacing: .13em; padding: 5px 4px 12px; }
.screen-top span:first-child { color: #a0f8e9; }
.screen-bottom { padding: 12px 3px 5px; }
.screen-bottom strong { color: #ffd08c; }
.board-wrap { position: relative; width: 100%; border: 2px solid #80b5b8; border-radius: 9px; background: #102e3b; overflow: hidden; }
#gameCanvas { display: block; width: 100%; height: auto; touch-action: none; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; background: #0b2534df; }
.overlay[hidden] { display: none; }
.overlay-inner { max-width: 275px; }
.overlay-bubbles { display: flex; justify-content: center; gap: 5px; margin-bottom: 22px; }
.overlay-bubbles i { width: 28px; height: 28px; border-radius: 50%; background: #ff91ad; box-shadow: inset -5px -5px #d74e7c, inset 4px 4px #ffd4df; }
.overlay-bubbles i:nth-child(2) { background: #ffd477; box-shadow: inset -5px -5px #cc9341, inset 4px 4px #fff1bd; }
.overlay-bubbles i:nth-child(3) { background: #82e6dc; box-shadow: inset -5px -5px #3fa89e, inset 4px 4px #c6fff5; }
.overlay small { color: #91eedf; font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.overlay h2 { font-size: 29px; letter-spacing: -.05em; margin: 13px 0; }
.overlay p { color: #cce0e2; line-height: 1.55; font-size: 13px; margin: 0 0 24px; }
.overlay button { width: 100%; background: #ffca82; border: 0; border-radius: 10px; color: #3b2d22; padding: 13px 18px; font-weight: 850; }
.overlay button:hover { background: #ffe0ae; }
.overlay button span { float: right; }
.guide-title { font-size: 22px; line-height: 1.35; letter-spacing: -.045em; margin: 0 0 20px; }
.guide-title strong { color: #ffcb8c; }
.control { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid #3c6171; color: #d1e7e9; font-size: 12px; }
kbd { display: inline-block; border: 1px solid #7295a0; border-radius: 5px; padding: 4px 6px; background: #2b5665; color: white; font: 750 10px ui-sans-serif, system-ui; }
.guide-note { font-size: 12px; color: #abcbd0; line-height: 1.55; margin: 18px 0; }
.guide button { width: 100%; padding: 12px; border: 1px solid #6c9aa5; border-radius: 9px; background: #356779; color: white; font-weight: 800; }
.guide button:hover { background: #427d8e; }
.touch-controls { display: none; }
footer { color: #7da5ac; text-align: center; padding: 22px 0 2px; font-size: 10px; font-weight: 850; letter-spacing: .2em; }
footer span { color: #ffcb8c; margin: 0 8px; }
@media (max-width: 850px) { .layout { grid-template-columns: minmax(0, 1fr) minmax(0, 390px); } .guide { grid-column: 1 / -1; } }
@media (max-width: 620px) { .shell { padding: 17px 10px 20px; } .header { flex-direction: column; align-items: center; text-align: center; } .header nav { margin: 4px auto 0; justify-content: center; } .layout { display: flex; flex-direction: column; align-items: center; gap: 12px; } .stats { width: min(100%, 390px); display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 13px; } .stats .panel-heading { grid-column: 1 / -1; margin-bottom: 10px; } .stats .metric { margin-bottom: 9px; padding-bottom: 9px; } .stats .metric strong { font-size: 21px; } .stats .metric-row { margin: 0; } .stats .metric-row strong { font-size: 19px; } .stats .next-box { min-height: 74px; display: flex; align-items: center; justify-content: space-around; padding: 5px; } .stats .next-box canvas { width: 66px; height: 60px; margin: 0; } .stats .hint { grid-column: 1 / -1; margin-top: 8px; } .guide { display: none; } .touch-controls { display: grid; grid-template-columns: 1fr 1.3fr 1fr 1fr .7fr; gap: 5px; max-width: 390px; margin: 12px auto 0; } .touch-controls button { min-height: 46px; border: 1px solid #7baeb5; border-radius: 8px; background: #286071; color: white; font-size: 14px; font-weight: 850; touch-action: manipulation; } .touch-controls button:first-child, .touch-controls button:nth-child(3) { font-size: 24px; } .touch-controls button:active { background: #ffca82; color: #32291c; } }

.privacy-link{display:inline-block;margin-left:12px;color:inherit;text-decoration:underline;text-underline-offset:3px}