:root { --ice:#a9f3ff; --cyan:#35d8f1; --navy:#062646; --deep:#04182f; --yellow:#ffd848; --white:#f8fdff; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; min-height:100%; overflow:hidden; overscroll-behavior:none; background:#061a31; color:var(--white); font-family:"Arial Rounded MT Bold","Microsoft JhengHei",system-ui,sans-serif; }
button { font:inherit; }
button:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.page-shell { min-height:100svh; display:grid; place-items:center; align-content:center; gap:10px; padding:0; background:radial-gradient(circle at 50% 12%,#1f6d8c 0,#092b4a 44%,#031528 100%); }
.game-frame { position:relative; width:min(100vw,60svh,480px); aspect-ratio:3/5; overflow:hidden; isolation:isolate; background:#8be7f5; box-shadow:0 24px 80px #0009,0 0 0 1px #bdf8ff44; touch-action:none; }
#gameCanvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.overlay { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity .22s ease,visibility .22s; }
.is-hidden { opacity:0!important; visibility:hidden!important; pointer-events:none!important; }
.loading-screen { background:linear-gradient(160deg,#0e6d8f,#071b36 68%); }
.snowflake-logo { width:88px; height:88px; border-radius:28px; display:grid; place-items:center; font-size:48px; background:#ffffff17; border:1px solid #fff4; box-shadow:0 14px 36px #00182f80; animation:float 2s ease-in-out infinite; }
.eyebrow { margin:18px 0 10px; color:#bdf7ff; font-size:11px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; }
.progress-track { width:58%; height:10px; padding:2px; border-radius:99px; background:#00162f88; border:1px solid #aaf4ff55; overflow:hidden; }
.progress-bar { width:6%; height:100%; border-radius:99px; background:linear-gradient(90deg,#43def6,#fff58e); box-shadow:0 0 12px #4de9ff; transition:width .3s; }
.loading-copy { margin:12px 0; font-size:13px; color:#d9faff; }
.ready-screen { justify-content:flex-start; padding:48px 28px 22px; background:linear-gradient(180deg,#06254011,#06213a0f 55%,#03152dcc); }
.sound-button { position:absolute; top:18px; right:18px; }
.icon-button { min-width:46px; height:46px; border:1px solid #fff5; border-radius:16px; background:#062d4cbf; color:#fff; box-shadow:0 8px 18px #00152f66; cursor:pointer; }
.title-block { text-align:center; filter:drop-shadow(0 4px 0 #07365b); }
.title-block .eyebrow { margin:0 0 8px; font-size:10px; }
h1 { margin:0; font-size:41px; line-height:.98; letter-spacing:.02em; color:#fff; }
h1 span { color:#fff3a1; }
.subtitle { display:inline-block; margin:10px 0 0; padding:5px 16px; border-radius:99px; background:#0b4d70; color:#d9fbff; font-size:13px; letter-spacing:.22em; }
.hero-portrait { width:164px; height:190px; margin:13px 0 4px; border-radius:48% 48% 42% 42%; overflow:hidden; border:4px solid #dffcff; box-shadow:0 0 0 7px #41d9ef66,0 14px 35px #001b3988; background:#122f44; }
.hero-portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 49%; transform:scale(1.48); }
.best-chip { display:flex; align-items:baseline; gap:9px; margin:3px 0 12px; padding:7px 16px; border-radius:99px; background:#001c36a8; border:1px solid #c7faff4d; }
.best-chip span { color:#a9f3ff; font-size:11px; letter-spacing:.12em; }
.best-chip strong { font-size:19px; color:#fff6a3; }
.primary-button { min-width:210px; min-height:58px; border:0; border-radius:20px; padding:0 24px; background:linear-gradient(180deg,#fff176,#ffc62f); color:#17334b; font-weight:1000; font-size:18px; box-shadow:0 7px 0 #d68a15,0 13px 24px #00162e7a; cursor:pointer; transition:transform .12s,filter .12s; }
.primary-button:hover { filter:brightness(1.05); transform:translateY(-1px); }
.primary-button:active { transform:translateY(5px); box-shadow:0 2px 0 #d68a15,0 5px 12px #00162e7a; }
.primary-button b { margin-left:12px; }
.instructions { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; width:100%; margin-top:18px; }
.instructions>div { min-width:0; text-align:center; padding:9px 3px 7px; border-radius:15px; background:#052d4b9c; border:1px solid #c8f8ff24; }
.instructions span { display:grid; place-items:center; height:25px; color:#fff59a; font-size:20px; font-weight:1000; }
.instructions p { margin:3px 0 0; font-size:9px; color:#d5f8ff; white-space:nowrap; }
.key-visual { font-size:12px!important; letter-spacing:.08em; }
.feather-visual { transform:rotate(-25deg); font-size:28px!important; }
.hud { position:absolute; inset:0 0 auto; z-index:10; height:76px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:start; padding:14px 14px 0; pointer-events:none; text-shadow:0 2px 3px #002040; }
.lives { padding-top:7px; color:#ff6f88; font-size:20px; letter-spacing:2px; filter:drop-shadow(0 2px 0 #8e2242); }
.score-panel { text-align:center; }
.score-panel span { display:block; font-size:9px; letter-spacing:.17em; color:#c8f8ff; }
.score-panel strong { font-size:23px; color:#fff; }
.hud-right { display:flex; justify-content:flex-end; align-items:center; gap:8px; }
.hud-right>span { font-size:13px; color:#e8fcff; }
.hud .icon-button { position:static; min-width:40px; width:40px; height:40px; border-radius:14px; pointer-events:auto; }
.wave-badge { grid-column:2; justify-self:center; margin-top:4px; padding:4px 12px; border-radius:99px; background:#032541b8; border:1px solid #7deaf580; color:#fff7ad; font-size:10px; letter-spacing:.15em; }
.touch-controls { position:absolute; z-index:11; left:0; right:0; bottom:18px; display:flex; justify-content:space-between; padding:0 16px; pointer-events:none; }
.touch-controls button { width:70px; height:58px; border:1px solid #e7fdff66; border-radius:21px; background:#07345680; color:#fff; font-size:45px; line-height:1; box-shadow:inset 0 1px #fff4,0 8px 18px #00182f55; pointer-events:auto; user-select:none; }
.touch-controls button.is-pressed { background:#28caeab5; transform:scale(.96); }
.drag-hint { position:absolute; z-index:8; bottom:7px; left:50%; transform:translateX(-50%); font-size:9px; letter-spacing:.12em; color:#0836569c; pointer-events:none; white-space:nowrap; }
.modal-overlay { background:#021224bd; backdrop-filter:blur(6px); padding:20px; }
.modal-card { width:88%; padding:28px 25px 22px; text-align:center; border-radius:32px; background:linear-gradient(165deg,#f7fdff,#d8f7ff); color:#082b49; border:2px solid #fff; box-shadow:0 24px 70px #001126aa,0 0 0 7px #64e1ef33; }
.compact-card { padding-block:34px; }
.modal-icon { font-size:42px; color:#32cde6; }
.modal-card .eyebrow { margin:5px 0; color:#1784a0; }
.modal-card h2 { margin:4px 0 18px; font-size:28px; }
.modal-card .primary-button { width:100%; margin-top:15px; font-size:15px; }
.final-score { display:flex; flex-direction:column; margin:12px auto 14px; width:70%; padding:13px; border-radius:19px; background:#082c49; color:#fff; }
.final-score span { font-size:10px; letter-spacing:.16em; color:#a9f3ff; }
.final-score strong { font-size:39px; color:#fff29a; line-height:1.1; }
.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.result-grid div { padding:10px 3px; border-radius:14px; background:#bceef4; }
.result-grid span { display:block; font-size:9px; color:#377088; }
.result-grid strong { display:block; margin-top:3px; font-size:15px; }
.secondary-button { width:100%; min-height:48px; margin-top:12px; border:1px solid #156b87; border-radius:17px; background:transparent; color:#0b5875; font-weight:900; cursor:pointer; }
.new-best { display:inline-block; margin:-5px 0 4px; padding:5px 11px; border-radius:99px; background:#ffe25c; color:#6a4700; font-size:11px; font-weight:1000; }
.milestone { position:absolute; z-index:30; top:116px; left:50%; transform:translateX(-50%); padding:10px 18px; border-radius:99px; background:#fff4a5; color:#082b49; font-size:13px; font-weight:1000; box-shadow:0 8px 24px #00264f66; white-space:nowrap; animation:pop .4s both; }
.desktop-note { margin:0; color:#c8f8ff9c; font-size:11px; letter-spacing:.1em; }
.landscape-warning { display:none; position:fixed; inset:0; z-index:99; place-items:center; align-content:center; text-align:center; background:#061a31; color:#dffcff; }
.landscape-warning span { font-size:58px; }
.landscape-warning p { line-height:1.7; }
@keyframes float { 50% { transform:translateY(-8px) rotate(5deg); } }
@keyframes pop { from { opacity:0; transform:translate(-50%,-10px) scale(.85); } }
@media (hover:hover) and (pointer:fine) { .touch-controls { opacity:.5; } .touch-controls:hover { opacity:1; } }
@media (max-height:690px) { .desktop-note{display:none}.ready-screen{padding-top:27px}.hero-portrait{width:132px;height:150px;margin-top:8px}.instructions{margin-top:12px}h1{font-size:34px}.game-frame{height:100svh;width:60svh}.modal-card{padding-block:20px} }
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse) { .landscape-warning{display:grid}.page-shell{display:none} }