:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #0a2143; overflow: hidden; }
body { font-family: "Trebuchet MS", "Microsoft YaHei", sans-serif; }
.game-shell { position: relative; width: 100vw; height: 100vh; min-height: 520px; isolation: isolate; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; background: radial-gradient(circle at 50% 38%, rgba(38, 103, 190, .32), rgba(6, 19, 47, .74)); transition: opacity .24s ease; }
.overlay.hidden { opacity: 0; pointer-events: none; }
.start-card { width: min(430px, calc(100vw - 44px)); padding: 36px 34px 32px; border: 4px solid rgba(121, 222, 255, .72); border-radius: 33px; text-align: center; background: linear-gradient(150deg, rgba(41, 102, 179, .94), rgba(23, 53, 119, .96)); box-shadow: 0 22px 0 rgba(3, 12, 35, .52), inset 0 2px 0 rgba(255,255,255,.25); }
.start-card.compact { width: min(355px, calc(100vw - 44px)); }
.level-card { width: min(530px, calc(100vw - 38px)); padding-bottom: 25px; }
.eyebrow { margin: 0 0 9px; color: #7eebff; font-size: 13px; font-weight: 900; letter-spacing: .2em; }
h1, h2, strong { margin: 0; font-weight: 900; text-shadow: 0 4px 0 #172f74, 0 7px 15px rgba(0,0,0,.35); }
h1 { color: #ffdf42; font-size: clamp(42px, 8vw, 67px); line-height: .88; -webkit-text-stroke: 2px #e5691a; }
h2 { color: #fff; font-size: 38px; }
.start-card p:not(.eyebrow) { color: #e6f7ff; font-size: 16px; font-weight: 700; }
strong { display: block; color: #ffdf42; font-size: 66px; margin: 9px 0 21px; }
button { border: 3px solid #a94308; border-radius: 19px; padding: 14px 24px; color: #713000; background: linear-gradient(#ffe96a, #ffab15); box-shadow: 0 7px 0 #742b0c, inset 0 3px 0 rgba(255,255,255,.66); font: 900 20px "Trebuchet MS", "Microsoft YaHei", sans-serif; cursor: pointer; transition: transform .1s ease, filter .1s ease; }
button:hover { filter: brightness(1.08); transform: translateY(-2px); }
button:active { transform: translateY(5px); box-shadow: 0 2px 0 #742b0c, inset 0 3px 0 rgba(255,255,255,.66); }
button span { padding-left: 8px; }
.mode-choices { display: grid; gap: 13px; margin-top: 22px; }
.mode-choices .aqua { color: #07586f; border-color: #047995; background: linear-gradient(#75f7ff, #1ac7df); box-shadow: 0 7px 0 #075e7a, inset 0 3px 0 rgba(255,255,255,.72); }
.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 20px 0; }
.level-grid button { min-width: 0; padding: 12px 4px; border-radius: 14px; font-size: 18px; }
.level-grid button.locked { color: #7892b9; border-color: #39557c; background: linear-gradient(#7b93b6, #536b92); box-shadow: 0 5px 0 #2d4569; cursor: not-allowed; filter: saturate(.45); }
.level-grid button.done { color: #145600; border-color: #5e9600; background: linear-gradient(#e1ff67, #8ed420); box-shadow: 0 5px 0 #48750a; }
.back-button { padding: 9px 16px; border-radius: 14px; font-size: 15px; }