:root{--red:#1c9a6c;--red2:#0d6448;--gold:#f2c14e;--gold2:#d9921c;--ink:#10302a;--paper:#fffaf0;--glass:rgba(8,38,34,.55);--glass2:rgba(255,255,255,.12);--line:rgba(255,255,255,.18);--txt:#fff;--ok:#43c46b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;font-family:"Nunito","Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;color:var(--txt);background:#0f2e2a;touch-action:none}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none}
#bg{position:fixed;inset:0;background-size:cover;background-position:center;transition:opacity .6s;transform:scale(1.04)}
body.photoBg #bgShade{background:linear-gradient(180deg,rgba(4,28,26,.22) 0,rgba(4,28,26,0) 20%,rgba(4,28,26,.05) 50%,rgba(4,28,26,.45) 66%,rgba(4,28,26,.72) 100%)}
#bgShade{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,28,26,.14) 0,rgba(4,28,26,0) 22%,rgba(4,28,26,0) 40%,rgba(4,28,26,.30) 64%,rgba(4,28,26,.58) 100%)}
#app{position:relative;height:100%;max-width:520px;margin:0 auto}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 10px);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .35s,transform .35s}
.screen.on{opacity:1;pointer-events:auto;transform:none}
.topbar{display:flex;align-items:center;gap:8px;min-height:44px}
.topbar .ttl{flex:1;text-align:center;font-weight:800;font-size:17px;text-shadow:0 2px 6px rgba(0,0,0,.4);line-height:1.1}
.topbar .ttl small{display:block;font-weight:600;font-size:12px;opacity:.85}
.iconbtn{width:42px;height:42px;border-radius:14px;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--line)}
.pill{background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:22px;padding:7px 12px;font-weight:800;display:flex;align-items:center;gap:6px;box-shadow:inset 0 0 0 1px var(--line);font-size:15px}
.pill.coins{margin-left:auto}
#scrHome .pill.streak{margin-left:auto}
#scrHome .pill.coins{margin-left:0}
.coin{display:inline-block;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7c4,var(--gold) 45%,var(--gold2) 80%);box-shadow:inset 0 0 0 2px rgba(150,90,0,.55),0 1px 2px rgba(0,0,0,.3);flex:none}
.coin.lg{width:28px;height:28px}
/* HOME */
.logo{text-align:center;margin-top:5vh;position:relative}
.logo h1{margin:0;font-size:52px;font-weight:900;letter-spacing:1px;color:#fff;text-shadow:0 3px 0 var(--red2),0 6px 18px rgba(0,0,0,.45);animation:float 4s ease-in-out infinite}
.logo-sub{font-weight:700;opacity:.95;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.logo-orn{height:18px;margin:0 auto 6px;width:220px;background-repeat:repeat-x;background-size:18px 18px;opacity:.95;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
@keyframes float{50%{transform:translateY(-6px)}}
.homeMain{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.playbtn{min-width:230px;padding:16px 28px 12px;border-radius:28px;background:linear-gradient(180deg,#ffe07a,var(--gold) 45%,var(--gold2));color:#3b2300;font-weight:900;font-size:28px;box-shadow:0 6px 0 #b86d0c,0 12px 28px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;transition:transform .1s;animation:pulse 2.4s ease-in-out infinite}
.playbtn small{font-size:14px;font-weight:800;opacity:.75}
.playbtn:active{transform:translateY(4px);box-shadow:0 2px 0 #b86d0c}
@keyframes pulse{50%{box-shadow:0 6px 0 #b86d0c,0 12px 40px rgba(248,201,79,.55)}}
.chapterline{font-weight:700;text-shadow:0 2px 6px rgba(0,0,0,.5);font-size:14px;opacity:.95;cursor:pointer}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-bottom:4px}
.tile{position:relative;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:18px;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;box-shadow:inset 0 0 0 1px var(--line);font-size:11.5px;font-weight:700;line-height:1.1;text-align:center;transition:transform .12s}
.tile:active{transform:scale(.95)}
.tile .ic{font-size:26px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.tile.wide{grid-column:span 2;flex-direction:row;justify-content:flex-start;gap:10px;padding:10px 12px;text-align:left;font-size:13px}
.tile.wide .ic{font-size:30px}
.tile.wide b{display:block;font-size:15px}
.tile.wide small{opacity:.8;font-weight:600}
.dot{position:absolute;top:6px;right:8px;width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px rgba(255,255,255,.8);animation:blink 1.6s infinite}
@keyframes blink{50%{transform:scale(1.3)}}
/* MAP */
.maplist{flex:1;overflow-y:auto;padding:8px 2px 20px;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.chap{position:relative;height:118px;border-radius:22px;overflow:hidden;background-size:cover;background-position:center 60%;box-shadow:0 8px 20px rgba(0,0,0,.3),inset 0 0 0 2px rgba(255,255,255,.25);flex:none;text-align:left}
.chap .in{position:absolute;inset:0;padding:12px 14px;background:linear-gradient(90deg,rgba(4,28,26,.7),rgba(4,28,26,.05));display:flex;flex-direction:column;justify-content:flex-end}
.chap b{font-size:22px;font-weight:900;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.chap small{font-weight:700;opacity:.9}
.chap .bar{height:6px;border-radius:3px;background:rgba(255,255,255,.25);margin-top:6px;overflow:hidden;width:60%}
.chap .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#ff8a5c)}
.chap.locked{filter:grayscale(.85) brightness(.7)}
.chap.locked:after{content:"🔒";position:absolute;right:58px;bottom:14px;font-size:24px}
.chap .num{position:absolute;right:14px;bottom:12px;font-weight:900;font-size:34px;opacity:.35}
.chap.cur{box-shadow:0 0 0 3px var(--gold),0 8px 24px rgba(248,201,79,.4)}
.lvlgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.lvl{aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.lvl.done{background:linear-gradient(180deg,#7be495,#2fa356);box-shadow:0 3px 0 #1d7a3c}
.lvl.cur{background:linear-gradient(180deg,#ffe07a,var(--gold2));color:#3b2300;box-shadow:0 3px 0 #b86d0c;animation:blink 1.6s infinite}
.lvl.lock{opacity:.45}
/* GAME */
.prog{height:6px;background:rgba(255,255,255,.2);border-radius:3px;margin:6px 4px 0;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#ff7a59);transition:width .45s cubic-bezier(.2,.9,.3,1.2)}
#gridWrap{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;padding:10px 0}
#grid{display:grid;gap:4px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}
.cell{border-radius:22%;display:flex;align-items:center;justify-content:center;font-weight:900;text-transform:uppercase;color:var(--ink);position:relative}
.cell.on{background:rgba(6,34,30,.22);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),0 2px 6px rgba(0,0,0,.12);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.cell.found{background:linear-gradient(180deg,#fffdf6,#ffeec9);box-shadow:0 3px 0 #d9b77a;animation:pop .4s cubic-bezier(.2,.9,.3,1.4)}
.cell.hint{background:linear-gradient(180deg,#fff3c4,#ffd97a);box-shadow:0 3px 0 #c99a3a}
.cell.flash{animation:flash .6s}
@keyframes pop{0%{transform:scale(.3)}100%{transform:scale(1)}}
@keyframes flash{40%{transform:scale(1.15);filter:brightness(1.2) drop-shadow(0 0 8px #ffe066)}}
#preview{height:48px;display:flex;align-items:center;justify-content:center}
#preview span{background:var(--paper);color:var(--ink);font-weight:900;font-size:26px;padding:4px 16px;border-radius:14px;text-transform:uppercase;letter-spacing:3px;box-shadow:0 4px 0 #d9b77a,0 6px 14px rgba(0,0,0,.25);transition:background .2s}
#preview span:empty{display:none}
#preview .bad{animation:shake .35s;background:#ffc2c2}
#preview .dup{background:#cfe3ff}
#preview .good{background:#c9f5d4}
@keyframes shake{25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}
#bottom{position:relative;display:flex;align-items:center;justify-content:center;padding-bottom:8px}
#wheel{position:relative;border-radius:50%;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.97) 0,rgba(255,251,242,.94) 55%,rgba(246,236,218,.92) 100%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 0 0 3px rgba(28,154,108,.85),inset 0 2px 14px rgba(255,255,255,.9),inset 0 -6px 18px rgba(150,110,60,.12)}
.wheelOrn{position:absolute;inset:12%;pointer-events:none;color:#0f7a55;opacity:.24;animation:ornSpin 80s linear infinite;will-change:transform}
.wheelOrn .ornB{width:100%;height:100%;animation:ornBreath 9s ease-in-out infinite}
#wheel .wheelOrn svg{position:static;display:block;width:100%;height:100%;overflow:visible;opacity:.5}
.wheelOrn .ornP.pulse{animation:ornPulse 1.1s ease-out}
@keyframes ornSpin{to{transform:rotate(360deg)}}
@keyframes ornBreath{0%,100%{transform:scale(.96);opacity:.8}50%{transform:scale(1.02);opacity:1}}
@keyframes ornPulse{0%{transform:scale(1);opacity:.5}30%{transform:scale(1.05);opacity:1}100%{transform:scale(1);opacity:.5}}
body.hiddenTab .wheelOrn,body.hiddenTab .wheelOrn .ornB{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.wheelOrn,.wheelOrn .ornB,.wheelOrn .ornP.pulse{animation:none}}
#wheel svg{position:absolute;inset:0;pointer-events:none;overflow:visible}
.let{position:absolute;width:24%;height:24%;margin:-12% 0 0 -12%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--ink);text-transform:uppercase;transition:transform .15s,background .15s,color .15s}
.let.sel{background:radial-gradient(circle at 40% 35%,#ff6b74,var(--red) 60%,var(--red2));color:#fff;transform:scale(1.12);box-shadow:0 4px 10px rgba(158,31,43,.45)}
.let.in{animation:letin .45s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes letin{from{transform:scale(0) rotate(-90deg);opacity:0}}
.side{position:absolute;bottom:14px;display:flex;flex-direction:column;gap:12px}
.side.l{left:0}.side.r{right:0}
.gbtn{position:relative;width:54px;height:54px;border-radius:18px;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--line),0 4px 12px rgba(0,0,0,.25);transition:transform .1s}
.gbtn:active{transform:scale(.9)}
.gbtn small{font-size:10px;display:flex;align-items:center;gap:2px;font-weight:800}
.gbtn small .coin{width:10px;height:10px}
.gbtn.ad{background:linear-gradient(180deg,#7ad0ff,#2f86d6)}
.badge{position:absolute;top:-5px;right:-5px;background:var(--red);font-size:11px;border-radius:10px;padding:1px 6px;font-weight:900;box-shadow:0 0 0 2px #fff}
.badge.free{background:var(--ok)}
.ring{position:absolute;inset:-3px;width:60px;height:60px;transform:rotate(-90deg);pointer-events:none}
.ring circle{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-dasharray:100.5;stroke-dashoffset:100.5;transition:stroke-dashoffset .4s;stroke-linecap:round}
/* overlays */
.modal{position:fixed;inset:0;z-index:20;background:rgba(8,6,28,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;animation:fade .25s}
.modal[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.sheet{position:relative;width:100%;max-width:520px;max-height:88%;overflow-y:auto;background:linear-gradient(170deg,rgba(14,92,74,.97),rgba(10,58,66,.97));border-radius:26px 26px 0 0;padding:18px 16px calc(env(safe-area-inset-bottom) + 16px);box-shadow:0 -10px 40px rgba(0,0,0,.5);animation:up .35s cubic-bezier(.2,.9,.3,1.1);touch-action:pan-y;-webkit-overflow-scrolling:touch}
.sheet:before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background-repeat:repeat-x;background-size:10px 10px;opacity:.8;border-radius:26px 26px 0 0;background-image:var(--orn)}
.modal.center{align-items:center;padding:14px}
.modal.center .sheet{border-radius:26px;text-align:center}
@keyframes up{from{transform:translateY(60px);opacity:0}}
.sheet h2{margin:6px 0 4px;font-size:24px;font-weight:900;color:var(--gold);text-align:center}
.sheet .sub{text-align:center;opacity:.85;font-size:13.5px;margin-bottom:10px}
.sheet .x{position:absolute;right:10px;top:12px;width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.12);font-size:20px}
.big{background:linear-gradient(180deg,#ffe07a,var(--gold) 45%,var(--gold2));color:#3b2300;font-weight:900;font-size:18px;padding:12px 26px;border-radius:24px;box-shadow:0 4px 0 #b86d0c;margin:8px 4px;min-width:150px}
.big:disabled{filter:grayscale(1);opacity:.6}
.big.green{background:linear-gradient(180deg,#8ff0a8,#2fa356);color:#05351a;box-shadow:0 4px 0 #1d7a3c}
.ghost{color:#fff;border:1px solid rgba(255,255,255,.4);font-size:14px;padding:8px 16px;border-radius:18px;margin:4px}
.list{list-style:none;padding:0;margin:8px 0;text-align:left}
.list li{padding:9px 6px;border-bottom:1px solid rgba(255,255,255,.1);font-size:14.5px;display:flex;align-items:center;gap:8px;cursor:pointer}
.list li b{text-transform:uppercase;color:#fff3c4;letter-spacing:.5px}
.list li .gl{opacity:.9;flex:1}
.en{opacity:.6;font-style:italic}
/* daily calendar */
.cal{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.cal .d{border-radius:16px;padding:10px 4px;background:rgba(255,255,255,.1);text-align:center;font-weight:800;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:inset 0 0 0 1px var(--line)}
.cal .d.got{background:linear-gradient(180deg,#7be495,#2fa356)}
.cal .d.today{background:linear-gradient(180deg,#ffe07a,var(--gold2));color:#3b2300;animation:blink 1.6s infinite}
.cal .d.chest{grid-column:span 2}
.cal .d .ic{font-size:24px}
/* quests / achievements */
.q{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border-radius:16px;padding:10px 12px;margin:8px 0;text-align:left}
.q .ic{font-size:26px}
.q .t{flex:1;font-weight:700;font-size:14px}
.q .pb{height:6px;border-radius:3px;background:rgba(255,255,255,.2);margin-top:5px;overflow:hidden}
.q .pb i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#ff8a5c)}
.q .r{font-weight:800;font-size:13px;display:flex;align-items:center;gap:3px}
.q button{padding:8px 12px;border-radius:14px;font-weight:900;background:linear-gradient(180deg,#8ff0a8,#2fa356);color:#05351a;font-size:13px}
.q.done{opacity:.55}
.ach{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ach .a{background:rgba(255,255,255,.08);border-radius:16px;padding:10px 4px;text-align:center;font-size:11.5px;font-weight:700}
.ach .a .ic{font-size:30px;display:block;filter:grayscale(1);opacity:.4}
.ach .a.got .ic{filter:none;opacity:1;animation:pop .5s}
.ach .a.got{background:linear-gradient(180deg,rgba(248,201,79,.35),rgba(248,201,79,.1))}
/* spin */
.spinwrap{position:relative;width:284px;height:284px;margin:16px auto 12px}
.spinGlow{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(248,201,79,.35),rgba(248,201,79,0) 70%);pointer-events:none}
.spinDisk{position:absolute;inset:0;width:100%;height:100%;will-change:transform;backface-visibility:hidden;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.spinDisk .bulb{fill:#fff3b0}
.spinDisk .bulb.b1{animation:bulb 1.2s steps(1) infinite}.spinDisk .bulb.b2{animation:bulb 1.2s steps(1) infinite .6s}
body.spinning .spinDisk .bulb.b1,body.spinning .spinDisk .bulb.b2{animation-duration:.3s}
@keyframes bulb{0%{fill:#fff3b0}50%{fill:#b8862a}}
#spinWin.win{animation:winsec 1s ease-in-out 3}
@keyframes winsec{0%,100%{opacity:0}50%{opacity:.45}}
.spinwrap .ptr{position:absolute;left:50%;top:-18px;width:34px;height:44px;margin-left:-17px;transform-origin:50% 30%;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45));z-index:2}
.spinwrap .ptr.tick{animation:tick .14s ease-out}
@keyframes tick{0%{transform:rotate(0)}35%{transform:rotate(-16deg)}100%{transform:rotate(0)}}
.spinPrize{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:130px;padding:12px 18px;border-radius:22px;text-align:center;background:rgba(8,48,42,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 0 3px #f8c94f,0 12px 30px rgba(0,0,0,.5);animation:prizepop .5s cubic-bezier(.2,.9,.3,1.4);z-index:3}
@keyframes prizepop{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.spinPrize .pi{font-size:34px;line-height:1}.spinPrize .pi .coin.lg{width:40px;height:40px}
.spinPrize b{display:block;font-size:36px;font-weight:900;color:#ffe07a;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.spinPrize small{font-weight:800;opacity:.9}
/* card */
.wcard h2{text-transform:none;text-align:left;font-size:30px;margin:0}
.wcard .meta{font-size:12px;opacity:.75;margin-bottom:6px}
.sense{margin:8px 0 3px;font-size:15px;line-height:1.35}
.sense .lab{font-style:italic;opacity:.7;font-size:13px}
.sense .num{color:var(--gold);font-weight:800;margin-right:4px}
.ex{margin:3px 0 4px 12px;font-size:13px;line-height:1.3;border-left:2px solid rgba(248,201,79,.45);padding-left:8px}
.ex i{display:block;color:#fff3c4}
.ex span{display:block;opacity:.85}
.ex small{opacity:.55}
.xtra{font-size:13px;margin-top:8px}
.xtra b{color:var(--gold);font-weight:700}
.csrc{font-size:11px;opacity:.55;margin-top:12px}
.homn{font-size:12px;color:#ffb3b3;margin-top:10px;font-weight:800}
.wotdbig{font-size:44px;font-weight:900;color:#fff;text-shadow:0 3px 0 var(--red2);margin:4px 0}
/* collection */
.coll input{width:100%;padding:10px 14px;border-radius:14px;border:none;font-size:16px;background:rgba(255,255,255,.15);color:#fff;outline:none;user-select:text;-webkit-user-select:text}
.coll input::placeholder{color:rgba(255,255,255,.6)}
.letters{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}
.letters button{min-width:28px;padding:4px 6px;border-radius:9px;background:rgba(255,255,255,.12);font-weight:800;text-transform:uppercase;font-size:13px}
.letters button.on{background:var(--gold);color:#3b2300}
.stat{display:flex;justify-content:center;gap:16px;margin:6px 0 4px;font-weight:800}
.stat div{text-align:center}.stat small{display:block;font-weight:600;opacity:.75;font-size:11px}
/* settings */
.row{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.1);font-weight:700}
.sw{width:52px;height:30px;border-radius:15px;background:rgba(255,255,255,.25);position:relative;transition:background .2s}
.sw:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .2s}
.sw.on{background:var(--ok)}.sw.on:after{left:25px}
.seg{display:flex;background:rgba(255,255,255,.15);border-radius:14px;padding:3px}
.seg button{padding:6px 12px;border-radius:11px;font-weight:800}
.seg button.on{background:var(--gold);color:#3b2300}
.about{font-size:12px;opacity:.75;margin-top:12px;line-height:1.4}
/* toast, combo, fx */
#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 62px);transform:translate(-50%,-14px) scale(.96);background:rgba(4,26,24,.26);-webkit-backdrop-filter:blur(9px) saturate(1.5);backdrop-filter:blur(9px) saturate(1.5);border:1px solid rgba(255,255,255,.28);padding:5px 12px 6px;border-radius:14px;max-width:76%;text-align:center;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:15;box-shadow:0 4px 14px rgba(0,0,0,.18);text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 8px rgba(0,0,0,.45)}
#toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
#toast b{font-size:17px;text-transform:uppercase;color:#ffe07a;letter-spacing:1px}
#toast div{font-size:13px;line-height:1.3;margin-top:1px;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#toast .en{color:#e6e6ff}
#toast .more{display:inline-block;font-size:11px;font-weight:800;color:#3b2300;text-shadow:none;background:rgba(255,224,122,.88);border-radius:10px;padding:2px 9px;margin-top:4px;pointer-events:auto;cursor:pointer;-webkit-line-clamp:unset}
#combo{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%) scale(0);font-weight:900;font-size:40px;color:var(--gold);text-shadow:0 3px 0 var(--red2),0 0 20px rgba(248,201,79,.6);pointer-events:none;z-index:16}
#combo.show{animation:comboA 1s ease-out}
@keyframes comboA{0%{transform:translate(-50%,-50%) scale(0) rotate(-10deg);opacity:1}30%{transform:translate(-50%,-50%) scale(1.2) rotate(3deg)}100%{transform:translate(-50%,-90%) scale(1);opacity:0}}
#fly{position:fixed;inset:0;pointer-events:none;z-index:17}
.flyl{position:fixed;display:flex;align-items:center;justify-content:center;font-weight:900;text-transform:uppercase;color:var(--ink);background:var(--paper);border-radius:22%;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.flyc{position:fixed;width:20px;height:20px}
#fx{position:fixed;inset:0;pointer-events:none;z-index:18;width:100%;height:100%}

#cardModal{z-index:22}
#cardModal .sheet{max-height:80%}
#spinSvg{width:100%;height:100%;transition:transform 4s cubic-bezier(.17,.67,.2,1)}


.cardBtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.cardBtns .big{min-width:0;padding-left:20px;padding-right:20px}
.big.blue{background:linear-gradient(180deg,#7cc8ff,#3b8fe0);box-shadow:0 5px 0 #23619e;color:#fff}

.brand{display:block;text-align:center;font-size:11px;font-weight:700;color:rgba(255,255,255,.62);text-decoration:none;padding:6px 0 calc(env(safe-area-inset-bottom) + 2px);letter-spacing:.2px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.credits p{margin:6px 0}.credits ul{margin:4px 0 6px;padding-left:18px}.credits li{margin:3px 0}.credits a{color:#ffe07a}

#hMusic.off{opacity:.6}
.row input[type=range]{width:46%;accent-color:#f8c94f}
/* ---- tutorial coach marks */
#tut{position:fixed;inset:0;z-index:40;pointer-events:none}
#tut[hidden]{display:none}
#tut .tutB{position:fixed;pointer-events:auto;background:transparent;touch-action:none}
#tut .tutHole{position:fixed;pointer-events:none;box-shadow:0 0 0 200vmax rgba(4,26,24,.68),0 0 0 3px rgba(248,201,79,.95),0 0 22px 6px rgba(248,201,79,.45);transition:left .25s,top .25s,width .25s,height .25s;animation:tutGlow 1.8s ease-in-out infinite}
#tut .tutHole[hidden]{display:none}
#tut.noHole .tutB[data-b="t"]{background:rgba(4,26,24,.68)}
@keyframes tutGlow{50%{box-shadow:0 0 0 200vmax rgba(4,26,24,.68),0 0 0 3px rgba(255,224,122,1),0 0 30px 10px rgba(248,201,79,.6)}}
#tut .tutPath{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#tut .tutPath path{fill:none;stroke:rgba(248,201,79,.85);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 14;animation:tutDash 1s linear infinite}
@keyframes tutDash{to{stroke-dashoffset:-16}}
#tut .tutFinger{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0}
#tut .tutFinger[hidden]{display:none}
#tut .tutFinger i{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 3px rgba(248,201,79,.9);animation:tutTap 1s ease-in-out infinite}
#tut .tutFinger b{position:absolute;left:-14px;top:-4px;font-size:40px;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
@keyframes tutTap{50%{transform:scale(.8)}}
#tut .tutTip{position:fixed;pointer-events:auto;width:min(330px,calc(100vw - 24px));background:linear-gradient(170deg,rgba(14,92,74,.98),rgba(10,58,66,.98));border-radius:20px;padding:14px 16px 10px;box-shadow:0 12px 34px rgba(0,0,0,.5),inset 0 0 0 1.5px rgba(255,255,255,.18);font-size:15.5px;line-height:1.35;font-weight:700;color:#fff;animation:tutIn .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes tutIn{from{opacity:0;transform:translateY(8px) scale(.97)}}
#tut .tutTip:after{content:"";position:absolute;width:16px;height:16px;background:inherit;transform:rotate(45deg);border-radius:3px}
#tut .tutTip.below:after{top:-7px;left:calc(var(--ax) - 8px);background:rgba(14,92,74,.98)}
#tut .tutTip.above:after{bottom:-7px;left:calc(var(--ax) - 8px);background:rgba(10,58,66,.98)}
#tut .tutTip.right:after{left:-7px;top:calc(var(--ay) - 8px);background:rgba(16,84,70,.98)}
#tut .tutTip.left:after{right:-7px;top:calc(var(--ay) - 8px);background:rgba(18,96,78,.98)}
#tut .tutTip.mid:after{display:none}
#tut .tutBtns{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}
#tut .tutSkip{color:rgba(255,255,255,.75);font-size:13.5px;font-weight:700;padding:8px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.28)}
#tut .tutNext{margin-left:auto;background:linear-gradient(180deg,#ffe07a,var(--gold) 45%,var(--gold2));color:#3b2300;font-weight:900;font-size:15px;padding:9px 18px;border-radius:18px;box-shadow:0 3px 0 #b86d0c}
#tut .tutNext[hidden]{display:none}
#tut .tutN{position:absolute;right:14px;top:-11px;background:var(--red);font-size:11px;font-weight:900;padding:2px 8px;border-radius:10px;box-shadow:0 0 0 2px #fff}
@media (prefers-reduced-motion:reduce){#tut .tutHole,#tut .tutPath path,#tut .tutFinger i{animation:none}}
/* ---- ad simulation (plain web test site with ?adsim=1 only) */
.adSim{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center}
.adSim>div{position:relative;background:#fff;color:#222;border-radius:18px;padding:28px 34px;text-align:center;font-weight:800}
.adSim small{display:block;font-weight:600;opacity:.7;margin-top:6px}
.adSim button{position:absolute;right:6px;top:4px;font-size:18px;color:#555}
#adSimBanner{position:fixed;left:0;right:0;bottom:0;height:50px;z-index:30;background:repeating-linear-gradient(45deg,#ececec 0 12px,#dcdcdc 12px 24px);color:#555;font:700 13px/50px system-ui,sans-serif;text-align:center}
html.withBanner #app{height:calc(100% - 50px)}
/* ---- phone landscape (low height): two columns so nothing overlaps or falls off-screen */
@media (orientation:landscape) and (max-height:540px){
  #app{max-width:940px}
  #scrHome{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"top top" "logo tiles" "main tiles" "brand tiles";grid-template-rows:auto auto 1fr auto;column-gap:16px}
  #scrHome .topbar{grid-area:top}
  #scrHome .logo{grid-area:logo;margin-top:2px}
  #scrHome .logo h1{font-size:36px}
  #scrHome .logo-orn{margin-bottom:2px}
  #scrHome .homeMain{grid-area:main;gap:6px}
  #scrHome .playbtn{min-width:200px;padding:10px 22px 8px;font-size:23px}
  #scrHome .tiles{grid-area:tiles;align-self:center}
  #scrHome .tile{padding:7px 4px 6px}
  #scrHome .tile .ic{font-size:22px}
  #scrHome .brand{grid-area:brand}
  #scrGame{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,42%);grid-template-areas:"top top" "prog prog" "grid preview" "grid bottom";grid-template-rows:auto auto 1fr auto;column-gap:10px}
  #scrGame .topbar{grid-area:top}
  #scrGame .prog{grid-area:prog}
  #gridWrap{grid-area:grid;padding:6px 0}
  #preview{grid-area:preview;align-self:end;height:42px}
  #bottom{grid-area:bottom;padding-bottom:2px}
  .side{bottom:4px;gap:8px}
  .gbtn{width:50px;height:50px}
}

/* ===================== Sanamaailma — Nordic style =====================
   deep navy · ice blue · snow white · spruce green; warm accents: rowan / cloudberry orange.
   Fonts: Manrope (text) + Unbounded (titles, tiles, letters), both SIL OFL, bundled in fonts/ (Latin + ä ö å + Cyrillic). */
:root{--navy:#0b2545;--navy2:#13315c;--blue:#1d4e89;--ice:#8ecae6;--ice2:#cfe8f3;--snow:#f4f8fb;--spruce:#1f5f4a;--rowan:#e4572e;--berry:#ff8c42;
  --red:#e4572e;--red2:#b23a1c;--gold:#ff8c42;--gold2:#e4572e;--ink:#0b2545;--paper:#f4f8fb;--ok:#2bb37a;
  --glass:rgba(11,37,69,.42);--line:rgba(207,232,243,.55);--H:"Unbounded","Manrope",system-ui,sans-serif}
html,body{font-family:"Manrope","Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;background:var(--navy)}
#bgShade{background:linear-gradient(180deg,rgba(11,37,69,.10) 0,rgba(11,37,69,0) 25%,rgba(11,37,69,0) 45%,rgba(11,37,69,.35) 70%,rgba(11,37,69,.65) 100%)}
.ico{width:24px;height:24px;display:block}
/* top bar: round frosted buttons */
.iconbtn{width:44px;height:44px;border-radius:50%;background:rgba(244,248,251,.22);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);color:#fff}
.iconbtn .ico{width:22px;height:22px}
.pill{border-radius:12px;background:rgba(11,37,69,.55);box-shadow:inset 0 0 0 1px rgba(207,232,243,.4);font-family:var(--H);font-weight:600;font-size:14px;padding:7px 11px}
.pill .ico{width:18px;height:18px;color:var(--berry)}
.coin{background:radial-gradient(circle at 35% 30%,#fff3e0,var(--berry) 50%,var(--rowan) 90%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 1px 2px rgba(0,0,0,.3)}
/* HOME: left-aligned wordmark, chapter card with play, light cards + round dock */
.logo{text-align:left;margin:4vh 6px 0}
.logo h1{font-family:var(--H);font-weight:800;font-size:40px;letter-spacing:-.5px;color:#fff;text-shadow:0 2px 14px rgba(11,37,69,.35);animation:none}
.logo-sub{font-weight:700;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--navy);background:var(--ice2);display:inline-block;padding:4px 10px;border-radius:6px;margin-top:6px;text-shadow:none}
.logo-orn{width:180px;height:12px;margin:12px 0 0;background-image:var(--band)!important;background-size:48px 12px;opacity:.9;filter:none}
.homeMain{flex:1;justify-content:center;align-items:stretch;gap:0;padding:0 8px}
.chapterline{display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px 10px;background:rgba(244,248,251,.9);color:var(--navy);border-radius:22px 22px 0 0;padding:14px 18px 12px;text-shadow:none;box-shadow:0 10px 30px rgba(11,37,69,.25);opacity:1;font-size:13px}
.chapterline small{grid-column:1/3;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#5b7088;font-size:11px}
.chapterline b{font-family:var(--H);font-size:26px;font-weight:700}
.chapterline span{grid-column:1/3;font-weight:700;color:#3a5470;margin-top:-2px}
.chapterline .cbar{grid-column:1;height:6px;border-radius:3px;background:#dbe7ef;overflow:hidden;margin-top:6px}
.chapterline .cbar i{display:block;height:100%;background:linear-gradient(90deg,var(--ice),var(--blue))}
.chapterline em{font-style:normal;font-weight:800;color:var(--blue)}
.playbtn{min-width:0;width:100%;border-radius:0 0 22px 22px;background:linear-gradient(90deg,var(--rowan),var(--berry));color:#fff;font-family:var(--H);font-weight:700;font-size:24px;padding:14px 18px;
  flex-direction:row;justify-content:flex-start;gap:14px;box-shadow:0 10px 30px rgba(228,87,46,.35);animation:none;position:relative;overflow:hidden;text-align:left}
.playbtn .pt{display:flex;flex-direction:column;line-height:1.1}
.playbtn small{font-family:"Manrope",sans-serif;font-size:13px;font-weight:700;opacity:.9}
.playbtn .playIc{width:48px;height:48px;border-radius:50%;background:#fff;color:var(--rowan);display:flex;align-items:center;justify-content:center;flex:none}
.playbtn .playIc .ico{width:22px;height:22px;margin-left:3px}
.playbtn:after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%,55%{left:-50%}100%{left:130%}}
.playbtn:active{transform:scale(.98);box-shadow:0 4px 14px rgba(228,87,46,.35)}
.tiles{grid-template-columns:repeat(6,1fr);gap:8px 6px;padding:0 4px 4px}
.tile{background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:2px 0;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(11,37,69,.7);outline:none}
.tile .ic{width:48px;height:48px;border-radius:50%;background:rgba(244,248,251,.92);color:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(11,37,69,.3);filter:none;font-size:0}
.tile .ic .ico{width:24px;height:24px}
.tile.wide,.tile.bar{grid-column:span 3;flex-direction:row;background:rgba(244,248,251,.92);color:var(--navy);text-shadow:none;border-radius:16px;padding:10px 12px;gap:10px;box-shadow:0 6px 16px rgba(11,37,69,.25);text-align:left;justify-content:flex-start}
.tile.bar{grid-column:span 6;padding:8px 12px}
.tile.wide .ic,.tile.bar .ic{width:38px;height:38px;background:var(--navy);color:var(--ice2);box-shadow:none;flex:none}
.tile.wide .ic .ico,.tile.bar .ic .ico{width:20px;height:20px}
.tile.wide b,.tile.bar b{display:block;font-family:var(--H);font-weight:600;font-size:13px}
.tile.wide small,.tile.bar small{color:#4b6580;font-weight:700;font-size:11.5px}
.tile.bar .go{margin-left:auto;font-size:26px;color:var(--blue);font-weight:800}
.tile.wide:nth-child(2) .ic{background:var(--berry);color:#fff}
.dot{background:var(--rowan);box-shadow:0 0 0 2px #fff;top:2px;right:6px}
.tile:not(.wide):not(.bar) .dot{right:calc(50% - 26px)}
.brand{color:rgba(244,248,251,.75)}
/* MAP: postcards in two columns */
.maplist{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;align-content:start;padding:10px 4px 24px}
.chap{height:168px;border-radius:6px;background-size:cover;background-position:center 62%;box-shadow:0 0 0 5px #fff,0 10px 22px rgba(11,37,69,.35);margin:5px;transform:rotate(var(--tilt,0deg));transition:transform .2s}
.chap:nth-child(4n+1){--tilt:-1.2deg}.chap:nth-child(4n+2){--tilt:1deg}.chap:nth-child(4n+3){--tilt:.8deg}.chap:nth-child(4n){--tilt:-.8deg}
.chap:active{transform:scale(.97)}
.chap .in{inset:auto 0 0 0;padding:8px 10px 8px;background:#fff;color:var(--navy);display:block;border-radius:0}
.chap b{font-family:var(--H);font-weight:700;font-size:15px;text-shadow:none;display:block}
.chap small{font-size:11px;color:#4b6580;display:block;line-height:1.2}
.chap .bar{width:100%;height:4px;margin-top:5px;background:#e3ecf2}
.chap .bar i{background:linear-gradient(90deg,var(--ice),var(--blue))}
.chap .num{right:8px;top:6px;bottom:auto;font-family:var(--H);font-size:16px;opacity:1;color:#fff;background:rgba(11,37,69,.6);border-radius:50%;width:30px;height:30px;line-height:30px;text-align:center}
.chap.cur{box-shadow:0 0 0 5px #fff,0 0 0 9px var(--berry),0 10px 26px rgba(11,37,69,.4)}
.chap.locked{filter:grayscale(.7) brightness(.85)}
.chap.locked:after{content:"";right:auto;left:10px;top:10px;bottom:auto;width:26px;height:26px;border-radius:50%;background:rgba(11,37,69,.65) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2'%3E%3Crect x='6' y='11' width='12' height='9' rx='2'/%3E%3Cpath d='M9 11V8a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center/16px no-repeat}
.lvl{border-radius:10px;background:#e8f0f5;color:var(--navy);box-shadow:none;font-family:var(--H);font-weight:600;font-size:16px}
.lvl.done{background:var(--navy);color:#fff;box-shadow:none}
.lvl.cur{background:linear-gradient(135deg,var(--rowan),var(--berry));color:#fff;box-shadow:0 4px 12px rgba(228,87,46,.4);animation:none}
/* GAME */
.topbar .ttl{font-family:var(--H);font-weight:600;font-size:16px}
.topbar .ttl small{font-family:"Manrope",sans-serif;font-weight:700}
.prog{height:4px;background:rgba(255,255,255,.3)}
.prog i{background:linear-gradient(90deg,var(--ice2),var(--berry))}
#grid{filter:none;padding:8px;border-radius:14px;background:rgba(11,37,69,.28);box-shadow:inset 0 0 0 1px rgba(207,232,243,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);gap:5px;perspective:600px}
.cell{border-radius:5px;font-family:var(--H);font-weight:700;line-height:1}
.cell.on{background:rgba(244,248,251,.22);box-shadow:inset 0 0 0 1.5px rgba(244,248,251,.85)}
.cell.on.found,.cell.found{background:var(--snow);color:var(--navy);box-shadow:0 2px 0 var(--ice),0 4px 10px rgba(11,37,69,.3);animation:flip .5s cubic-bezier(.3,.7,.3,1.2) both;text-shadow:none}
.cell.on.hint,.cell.hint{background:var(--ice);color:var(--navy);box-shadow:0 2px 0 #5aa6c9;animation:none}
@keyframes flip{0%{transform:rotateX(90deg);background:var(--berry)}60%{transform:rotateX(-12deg)}100%{transform:none}}
.cell.on.found.flash,.cell.flash{animation:frost .6s}
@keyframes frost{40%{transform:translateY(-4px);box-shadow:0 0 0 3px var(--berry),0 6px 14px rgba(11,37,69,.3)}}
#preview span{font-family:var(--H);font-weight:700;font-size:24px;letter-spacing:4px;background:var(--snow);color:var(--navy);border-radius:8px;box-shadow:0 4px 14px rgba(11,37,69,.3);padding:5px 14px}
#preview .good{background:#d6f5e6}#preview .dup{background:var(--ice2)}#preview .bad{background:#ffd9cc}
/* letter ring: frosted navy glass, thin ice rings, white pebble letters */
#wheel{background:radial-gradient(circle at 50% 40%,rgba(29,78,137,.78),rgba(11,37,69,.88) 70%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 34px rgba(11,37,69,.45),inset 0 0 0 2px rgba(207,232,243,.65),inset 0 0 0 9px rgba(11,37,69,.0),inset 0 0 0 10px rgba(207,232,243,.18)}
#wheel:before{content:"";position:absolute;inset:7%;border-radius:50%;border:1.5px dashed rgba(207,232,243,.35);pointer-events:none}
.wheelOrn{inset:28%;color:var(--ice2);opacity:.35;animation:ornSpin 120s linear infinite}
.let{width:23%;height:23%;margin:-11.5% 0 0 -11.5%;background:var(--snow);color:var(--navy);font-family:var(--H);font-weight:700;box-shadow:0 3px 0 #b9cfdd,0 6px 12px rgba(0,0,0,.25);transition:transform .15s,background .15s,color .15s}
.let.sel{background:linear-gradient(135deg,var(--rowan),var(--berry));color:#fff;transform:scale(1.1) translateY(-2px);box-shadow:0 4px 0 var(--red2),0 0 0 3px rgba(255,255,255,.65)}
.let.in{animation:drop .5s cubic-bezier(.25,.9,.3,1.3) both}
@keyframes drop{from{transform:translateY(-36px) scale(.6);opacity:0}}
.gbtn{width:52px;height:52px;border-radius:50%;background:rgba(244,248,251,.92);color:var(--navy);box-shadow:0 6px 14px rgba(11,37,69,.3);backdrop-filter:none;-webkit-backdrop-filter:none;outline:none}
.gbtn .ico{width:24px;height:24px}
.gbtn small{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;border-radius:8px;padding:1px 6px;font-size:10px;white-space:nowrap}
.gbtn.ad{background:var(--ice)}
.badge{background:var(--rowan);box-shadow:0 0 0 2px #fff;border-radius:50%;min-width:20px;height:20px;padding:0 5px;line-height:20px;text-align:center}
.badge.free{background:var(--spruce)}
.ring{inset:-4px;width:60px;height:60px}.ring circle{stroke:var(--berry)}
.side{gap:20px}
/* sheets: snow-white paper, navy text */
.modal{background:rgba(11,37,69,.55)}
.sheet{background:var(--snow);color:var(--navy);border-radius:24px 24px 0 0;box-shadow:0 -10px 40px rgba(11,37,69,.45)}
.sheet:before{left:50%;width:44px;margin-left:-22px;top:8px;height:5px;border-radius:3px;background:#c9d7e2!important;opacity:1}
.modal.center .sheet{border-radius:24px}
.modal.center .sheet:before{display:none}
.sheet h2{font-family:var(--H);font-weight:700;color:var(--navy);font-size:22px;text-shadow:none}
.sheet .sub{color:#4b6580;opacity:1}
.sheet .x{background:#e8f0f5;color:var(--navy);border-radius:50%}
.winIc{width:64px;height:64px;margin:0 auto;border-radius:50%;background:var(--navy);color:var(--ice2);display:flex;align-items:center;justify-content:center;animation:spinIn 1.2s cubic-bezier(.2,.9,.3,1.2)}
.winIc .ico{width:38px;height:38px}
@keyframes spinIn{from{transform:rotate(-180deg) scale(.2);opacity:0}}
.big{background:linear-gradient(90deg,var(--rowan),var(--berry));color:#fff;font-family:var(--H);font-weight:600;font-size:16px;border-radius:14px;box-shadow:0 6px 16px rgba(228,87,46,.35);outline:none}
.big.green{background:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(11,37,69,.3)}
.big.blue{background:var(--ice);color:var(--navy);box-shadow:0 6px 16px rgba(11,37,69,.2)}
.big:disabled{filter:grayscale(.6);opacity:.55}
.ghost{color:var(--navy);border-color:#9fb3c4}
.list li{border-bottom:1px solid #e1e9ef}
.list li b{color:var(--blue);font-family:var(--H);font-weight:600;font-size:14px}
.en{color:#5b7088}
.cal .d{background:#e8f0f5;box-shadow:none;color:var(--navy)}
.cal .d.got{background:var(--navy);color:#fff}
.cal .d.today{background:linear-gradient(135deg,var(--rowan),var(--berry));color:#fff;animation:none}
.q{background:#edf3f7}.q .pb{background:#d5e2ea}.q .pb i,.chap .bar i{background:linear-gradient(90deg,var(--ice),var(--blue))}
.q button{background:var(--navy);color:#fff}
.ach .a{background:#edf3f7}.ach .a.got{background:linear-gradient(180deg,#ffe3cf,#fff3ea)}
.spinPrize{background:rgba(11,37,69,.9);box-shadow:0 0 0 3px var(--berry),0 12px 30px rgba(0,0,0,.5);color:#fff}
.spinPrize b{color:var(--ice2)}
.wcard h2{font-size:28px}
.sense .num,.xtra b{color:var(--rowan)}
.ex{border-left-color:var(--ice)}.ex i{color:var(--blue)}
.homn{color:var(--rowan)}
.wotdbig{font-family:var(--H);color:var(--navy);text-shadow:none;font-size:38px}
.coll input{background:#e8f0f5;color:var(--navy)}
.coll input::placeholder{color:#7b8fa3}
.letters button{background:#e8f0f5;color:var(--navy)}
.letters button.on{background:var(--navy);color:#fff}
.row{border-bottom:1px solid #e1e9ef}
.sw{background:#c9d7e2}.sw.on{background:var(--spruce)}
.seg{background:#e8f0f5}.seg button.on{background:var(--navy);color:#fff}
.about{color:#3a5470;opacity:1}
.credits a{color:var(--rowan)}
/* toast / combo */
#toast{background:rgba(11,37,69,.72);border-color:rgba(207,232,243,.45);border-radius:10px}
#toast b{font-family:var(--H);color:var(--ice2);font-weight:600}
#toast .more{background:var(--berry);color:#fff}
#combo{font-family:var(--H);color:#fff;text-shadow:0 3px 0 var(--rowan),0 0 24px rgba(142,202,230,.8)}
.flyl{font-family:var(--H);border-radius:5px;background:var(--snow);color:var(--navy)}
/* tutorial */
#tut .tutTip,.tutTip{background:var(--navy);box-shadow:0 12px 34px rgba(0,0,0,.5),inset 0 0 0 1.5px var(--ice);outline:none}
#tut .tutTip.below:after,#tut .tutTip.above:after,#tut .tutTip.right:after,#tut .tutTip.left:after{background:var(--navy)}
#tut .tutNext{background:linear-gradient(90deg,var(--rowan),var(--berry));color:#fff;box-shadow:none;border-radius:12px}
#tut .tutHole{box-shadow:0 0 0 200vmax rgba(11,37,69,.7),0 0 0 3px var(--ice),0 0 22px 6px rgba(142,202,230,.5);animation:none}
#tut .tutPath path{stroke:rgba(255,140,66,.9)}
#tut .tutFinger i{box-shadow:0 0 0 3px var(--berry)}
@media (orientation:landscape) and (max-height:540px){
  #scrHome .logo h1{font-size:30px}
  #scrHome .tiles{grid-template-columns:repeat(6,1fr)}
  .maplist{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){.playbtn:after,.cell.found,.let.in,.winIc{animation:none}}
.logo h1{font-size:clamp(28px,9.6vw,40px)}
.tile{min-width:0;overflow:hidden}
.tile:not(.wide):not(.bar){font-size:10.5px;line-height:1.15;word-break:break-word;hyphens:auto}
.tile.wide>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-height:680px) and (orientation:portrait){
  .logo{margin-top:1vh}.logo-orn{margin-top:8px}
  .chapterline{padding:10px 14px 8px}.chapterline b{font-size:21px}
  .playbtn{padding:9px 14px;font-size:20px}.playbtn .playIc{width:38px;height:38px}
  .tile .ic{width:40px;height:40px}.tile .ic .ico{width:21px;height:21px}
  .tile.wide,.tile.bar{padding:7px 9px}.tile.wide .ic,.tile.bar .ic{width:32px;height:32px}
  .tiles{gap:6px 4px}
}
.gbtn[hidden],[hidden]{display:none!important}
.spinDisk .bulb{fill:#cfe8f3}@keyframes bulb{0%{fill:#cfe8f3}50%{fill:#ff8c42}}
.spinGlow{background:radial-gradient(circle,rgba(142,202,230,.4),rgba(142,202,230,0) 70%)}
.list li .go{color:var(--blue);font-size:20px;font-weight:800}
/* ---- photo backgrounds (img/bg/chNN.webp): navy frost so the crossword / wheel stay readable over bright snow & sun and dark night photos ---- */
body.photoBg #bgShade{background:linear-gradient(180deg,rgba(11,37,69,.42) 0,rgba(11,37,69,.12) 14%,rgba(11,37,69,.10) 45%,rgba(11,37,69,.38) 66%,rgba(11,37,69,.62) 100%)}
body.photoBg #grid{background:rgba(11,37,69,.52);box-shadow:inset 0 0 0 1px rgba(207,232,243,.45),0 8px 24px rgba(4,18,36,.35);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1)}
body.photoBg .cell.on:not(.found):not(.hint){background:rgba(244,248,251,.16);box-shadow:inset 0 0 0 1.5px rgba(244,248,251,.92)}
body.photoBg #scrGame .ttl,body.photoBg #scrMap h2,body.photoBg #scrHome .logo{text-shadow:0 1px 3px rgba(4,18,36,.75),0 0 12px rgba(4,18,36,.35)}
/* ===== Game-field frames (Sanamaailma's own Nordic look: knitted-yoke band, stitched seam, rowan-berry corner diamonds) =====
   Crossword panel: snow-white rim + stitched inner seam + knitted band tabs top & bottom + corner diamonds.
   Letter ring: knitted yoke ring (alternating snow / ice / navy segments) with a snow rim. All frames are pointer-events:none. */
#grid{position:relative;border:2px solid rgba(244,248,251,.9);border-radius:16px;
  box-shadow:0 0 0 1px rgba(11,37,69,.55),0 10px 26px rgba(4,18,36,.38),inset 0 0 0 1px rgba(11,37,69,.35)}
#grid:before{content:"";position:absolute;inset:4px;border-radius:11px;border:1.5px dashed rgba(207,232,243,.7);pointer-events:none}
#grid:after{content:"";position:absolute;inset:-7px;pointer-events:none;
  /* 4 rowan-berry corner diamonds + knitted bands (on a navy ribbon) along the middle of the top and bottom edges */
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M7 0L14 7L7 14L0 7Z' fill='%23e4572e' stroke='%23f4f8fb' stroke-width='1.6'/></svg>") left top/14px 14px no-repeat,url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M7 0L14 7L7 14L0 7Z' fill='%23e4572e' stroke='%23f4f8fb' stroke-width='1.6'/></svg>") right top/14px 14px no-repeat,url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M7 0L14 7L7 14L0 7Z' fill='%23e4572e' stroke='%23f4f8fb' stroke-width='1.6'/></svg>") left bottom/14px 14px no-repeat,url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M7 0L14 7L7 14L0 7Z' fill='%23e4572e' stroke='%23f4f8fb' stroke-width='1.6'/></svg>") right bottom/14px 14px no-repeat,
    var(--band) center 2px/36px 9px repeat-x,var(--band) center calc(100% - 2px)/36px 9px repeat-x,
    linear-gradient(var(--navy),var(--navy)) center top/100% 13px no-repeat,linear-gradient(var(--navy),var(--navy)) center bottom/100% 13px no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) left top/14px 14px no-repeat,linear-gradient(#000 0 0) right top/14px 14px no-repeat,linear-gradient(#000 0 0) left bottom/14px 14px no-repeat,linear-gradient(#000 0 0) right bottom/14px 14px no-repeat,
    linear-gradient(#000 0 0) center top/min(56%,200px) 13px no-repeat,linear-gradient(#000 0 0) center bottom/min(56%,200px) 13px no-repeat;
  mask:linear-gradient(#000 0 0) left top/14px 14px no-repeat,linear-gradient(#000 0 0) right top/14px 14px no-repeat,linear-gradient(#000 0 0) left bottom/14px 14px no-repeat,linear-gradient(#000 0 0) right bottom/14px 14px no-repeat,
    linear-gradient(#000 0 0) center top/min(56%,200px) 13px no-repeat,linear-gradient(#000 0 0) center bottom/min(56%,200px) 13px no-repeat}
.cell.on:not(.found):not(.hint){border-radius:6px;box-shadow:inset 0 0 0 1.5px rgba(244,248,251,.92),0 0 0 1px rgba(11,37,69,.45)}
.cell.found,.cell.on.found{box-shadow:inset 0 0 0 1px rgba(142,202,230,.9),0 2px 0 var(--ice),0 4px 10px rgba(11,37,69,.3)}
/* letter ring frame: knitted yoke */
#wheel{outline:2px solid rgba(244,248,251,.92);outline-offset:0}
#wheel:after{content:"";position:absolute;inset:-11px;border-radius:50%;pointer-events:none;z-index:-1;
  background:repeating-conic-gradient(from 0deg,var(--snow) 0 5deg,var(--ice) 5deg 10deg,var(--navy) 10deg 15deg,var(--ice) 15deg 20deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));
  box-shadow:0 0 0 1px rgba(11,37,69,.5);opacity:.95}
#wheel{isolation:isolate}