:root{--red:#d23a44;--red2:#9e1f2b;--gold:#f8c94f;--gold2:#e89a1c;--ink:#22183a;--paper:#fffaf0;--glass:rgba(18,16,46,.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:#18204a;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)}
#bgShade{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,40,.14) 0,rgba(10,10,40,0) 22%,rgba(10,10,40,0) 40%,rgba(10,10,40,.30) 64%,rgba(10,10,40,.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(10,10,40,.7),rgba(10,10,40,.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(20,22,60,.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(210,58,68,.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:#b0283a;opacity:.22;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(43,56,122,.97),rgba(70,32,96,.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(30,22,70,.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(18,14,44,.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(10,8,32,.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(10,8,32,.68)}
@keyframes tutGlow{50%{box-shadow:0 0 0 200vmax rgba(10,8,32,.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(43,56,122,.98),rgba(70,32,96,.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(45,54,120,.98)}
#tut .tutTip.above:after{bottom:-7px;left:calc(var(--ax) - 8px);background:rgba(68,34,98,.98)}
#tut .tutTip.right:after{left:-7px;top:calc(var(--ay) - 8px);background:rgba(52,46,112,.98)}
#tut .tutTip.left:after{right:-7px;top:calc(var(--ay) - 8px);background:rgba(60,40,104,.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}
}