:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 50% 0, #251b49, #060914 58%); color: #f8fbff; }
.wrap-header { display: flex; align-items: center; justify-content: space-between; min-height: 66px; padding: .8rem 4vw; border-bottom: 1px solid #2c3152; background: rgba(6, 9, 20, .9); }
.wrap-header a { color: #66e8ff; font-weight: 900; text-decoration: none; }
.wrap-header > strong { letter-spacing: .22em; }
.wrap-header div { display: flex; gap: .4rem; }
.wrap-header button { padding: .5rem .7rem; border: 1px solid #424a72; border-radius: 8px; background: #11172a; color: #dbeafe; font: inherit; cursor: pointer; }
main { display: grid; place-items: center; min-height: calc(100vh - 66px); padding: 1.2rem 3vw; }
.wrap-game { position: relative; width: min(960px, 96vw); overflow: hidden; border: 1px solid #3d4975; border-radius: 16px; background: #0b1120; box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.wrap-hud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #26304d; }
.wrap-hud div { display: grid; padding: .58rem .8rem; background: #0c1325; }
.wrap-hud span { color: #8292b5; font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.wrap-hud strong { overflow: hidden; color: #f8fbff; text-overflow: ellipsis; white-space: nowrap; }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; touch-action: manipulation; cursor: pointer; }
.wrap-overlay { position: absolute; inset: 57px 0 0; display: grid; place-content: center; justify-items: center; padding: 2rem; background: rgba(6, 9, 20, .82); text-align: center; backdrop-filter: blur(7px); }
.wrap-overlay[hidden] { display: none; }
.wrap-overlay p { margin: 0; color: #66e8ff; font-size: .72rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.wrap-overlay h1 { margin: .3rem 0 .6rem; font-size: clamp(3rem, 9vw, 6.5rem); line-height: .9; text-transform: uppercase; }
.wrap-overlay span { max-width: 610px; color: #b5c0d7; line-height: 1.6; }
.wrap-overlay button { margin-top: 1.2rem; padding: .8rem 1.5rem; border: 0; border-radius: 10px; background: linear-gradient(135deg, #58e7ff, #b76dff); color: #07101d; font: inherit; font-weight: 950; cursor: pointer; }
@media (max-width: 600px) { .wrap-header > strong { display: none; } .wrap-hud div { padding: .45rem; } .wrap-hud strong { font-size: .8rem; } }