/* Casual-game art direction: navy stage, warm tiles, cyan glass and golden rims.
   Layout, hit targets and text remain native HTML rather than baked into art. */
:root,:root[data-theme=light],:root[data-theme=dark]{
 --bg:#173c59;--surface:#fff1d4;--surface-2:#f6e2bd;--clue:#ddc9a9;--clue-text:#34495c;
 --text:#21354b;--muted:#465c70;--faint:#52697d;--line:#c6aa7e;--edge:#b58c56;
 --accent:#0785bd;--accent-strong:#006b9c;--accent-ink:#07577d;--word:#c5ebf5;--cur:#79d2ed;--clue-on:#b0e2f2;
 --key:#fff8e8;--key-edge:#bb925e;--key-alt:#e4d2b3;--accent-lip:#075379;
 --lip-soft:0 6px 10px -5px #081e2d88;--danger:#b91c1c;--backdrop:#071c2eb3;color-scheme:light;
}
body{background:radial-gradient(ellipse at 50% 10%,#285779 0%,#173c59 62%,#13324b 100%);background-attachment:fixed}
#app{background:linear-gradient(180deg,#ffffff03,#051e3214)}
.bar{height:60px;gap:8px}
.bar h1,.brand h1{color:#fff6df;text-shadow:0 2px 0 #10293e;font-size:18px}
.bar .flat-icon{color:#e2f5ff}
.bar .flat-icon:is(.pressed,:active){color:#fff;background:#ffffff20}
#pz-timer{color:#dcf0fa;font-family:var(--font-game);font-size:14px}
.icon-btn:not(.flat-icon){background:linear-gradient(#2fc8ef,#0785bd);color:white;border:1px solid #ffe7a3;box-shadow:0 3px 0 #075379,inset 0 1px 0 #ffffff99}
.sub,.legend{color:#d4e7f2}
.home-hero{display:flex;align-items:center;gap:8px;min-height:154px;padding:4px 0 12px}
.home-hero .hero-copy{flex:1;min-width:0}
.home-hero h2{color:#fff4cd;font-family:var(--font-game);font-size:29px;line-height:1.08;letter-spacing:-.025em;margin:0 0 12px;text-wrap:balance;text-shadow:0 3px 0 #0b2941}
.home-hero p{color:#d4e7f2;font-size:13px;line-height:1.5;margin:0}
.home-hero img{width:146px;height:146px;object-fit:contain;flex:none}
.home-play{width:100%;height:56px;margin:0 0 24px;border:2px solid #ffe4a2;border-radius:15px;background:linear-gradient(#40c9ed 0%,#13a5db 46%,#0783ba 48%,#0877ac 100%);color:#fff;font:700 21px var(--font-game);text-shadow:0 2px 0 #07517c;box-shadow:0 5px 0 #075077,inset 0 2px 0 #ffffff88}
.home-play:is(:active,.pressed){transform:translateY(3px);box-shadow:0 2px 0 #075077}
.section-label{margin:4px 2px 12px;color:#d9eef9;font-family:var(--font-game);font-size:14px;letter-spacing:.1em}
.level{border:1px solid #ffe6ae;background:linear-gradient(#fff5dc,#f7dfb3);box-shadow:0 4px 0 #9c7040,inset 0 2px 0 #fff9ee;padding:12px 14px}
.level .code{width:48px;height:48px;background:linear-gradient(#29c9ed,#0984bb);color:white;border:1px solid #ffe7ac;box-shadow:0 3px 0 #075b81,inset 0 2px 0 #ffffff80;text-shadow:0 1px 0 #075379}
.level .name{font-size:17px}
.level.soon{background:#11334c;border:1px solid #31536c;box-shadow:none}
.level.soon .code{background:#284b64;color:#c4d7e3;border-color:#426077;box-shadow:none;text-shadow:none}
.level.soon .name,.level.soon .hint,.level.soon .count,.level.soon .tag{color:#b5cbd8}
.level.soon .tag{border-color:#446176}
.meter{height:6px;background:#c9a472;border-radius:6px;box-shadow:inset 0 1px 2px #684b2730}
.meter i{background:linear-gradient(#a1e642,#4fb81c);border-bottom:1px solid #398711;box-sizing:border-box}
.puz-grid{padding:14px 10px 18px;border:2px solid #d2a871;border-radius:20px;background:linear-gradient(#f9e7c7,#edcfa0);box-shadow:0 5px 0 #93683c,inset 0 2px 0 #fff9df;gap:14px 10px}
.tile{background:linear-gradient(#40c8ed 0%,#0da0d3 48%,#0785bd 50%,#0875a8 100%);color:#fff;border:1px solid #fff2c1;box-shadow:0 4px 0 #075379,inset 0 2px 0 #ffffff88;text-shadow:0 2px 0 #075379;font-size:24px}
.tile .ring{background:#075c86}
.tile .ring i{background:#d1f68a}
.tile.solved{background:linear-gradient(#a6ed40,#67c91a 48%,#4fb311 50%,#3d9b0b);color:#fff;box-shadow:0 4px 0 #276f0b,inset 0 2px 0 #efffc28c;text-shadow:0 2px 0 #28770b}
.tile .time{font-size:11px;text-shadow:none}
#gridwrap{padding-left:8px;padding-right:8px}
.cell.l{background:linear-gradient(#fffaf0,#fff0d2);box-shadow:0 3px 0 #ac8451,inset 0 1px 0 #fff;color:#24364a;border-radius:10px}
.cell.c{background:linear-gradient(#e6d5b9,#d7c19e);border-radius:9px}
.cell.l.hl{background:linear-gradient(#d9f6fd,#b9e6f5)}
.cell.l.cur{background:linear-gradient(#99e4f6,#60c8e7);box-shadow:0 3px 0 #2584aa,inset 0 0 0 2px #ffffff66}
.cell.l.wrong{color:#b91c1c}
.cell.c .seg.on{background:#adddea;color:#064d6e}
#cluebar{border:1px solid #efcf9a;border-radius:14px;background:linear-gradient(#fff8e9,#ffedce);box-shadow:0 3px 0 #a17b49;padding-top:6px;padding-bottom:6px}
#cluebar.done{background:linear-gradient(#d5f8b0,#b5e983);border-color:#e6ffc7}
#cluetext .n{color:#53687b}
#example-btn{background:transparent;box-shadow:none;border:0}
#kbd{padding-top:3px}
.key{background:linear-gradient(#fffdf5,#fff0d1);box-shadow:0 var(--lip) 0 #ad824d,inset 0 1px 0 #fff;color:#21354b;border-radius:11px}
.key.wide{background:linear-gradient(#e9d7b7,#d7bf98);color:#344c61}
#menu .panel,#sheet .panel,#example-dialog{background:linear-gradient(#fff7e5,#ffedcd);border:2px solid #d3aa73;border-radius:18px}
#sheet .panel{border-bottom:0;border-radius:20px 20px 0 0}
#menu .panel{box-shadow:0 5px 0 #9c7444}
#example-dialog{box-sizing:border-box}
#example-dialog::backdrop{background:#071c2eb3}
.btn.primary,.next-btn{border:1px solid #fff0bd;background:linear-gradient(#36c8ec,#0784bb);box-shadow:0 3px 0 #075379,inset 0 1px 0 #ffffff88;color:white;text-shadow:0 1px 0 #075379}
.btn:not(.primary){background:linear-gradient(#ffedc9,#e9cb97);box-shadow:0 3px 0 #a17c49,inset 0 1px 0 #fff6de}
.review-card{border-color:#d3aa73;background:linear-gradient(#fff6dd,#f4dcae);box-shadow:0 4px 0 #9b7343;margin-bottom:22px}
.review-card h2{color:#243b52}
.field input{background:#fff8e9}
@media(max-width:370px){.home-hero h2{font-size:26px}.home-hero img{width:128px;height:128px}.puz-grid{gap:12px 8px;padding-left:8px;padding-right:8px}}
@media(prefers-reduced-motion:reduce){.home-play:is(:active,.pressed){transform:none}}