:root{--bg:#0f1220;--bg2:#181c31;--card:rgba(255,255,255,.06);--line:rgba(255,255,255,.14);--text:#eef1ff;--muted:#98a0c4;
  --correct:#22c55e;--present:#eab308;--absent:#3a3f58;--key:#2b3152;--tile:rgba(255,255,255,.03);--accent:#8b5cf6;--accent2:#ec4899}
[data-theme=light]{--bg:#f3f4fb;--bg2:#ffffff;--card:rgba(255,255,255,.85);--line:rgba(20,25,60,.15);--text:#161a2e;--muted:#5d6488;
  --absent:#878da6;--key:#dde0ef;--tile:#fff}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
html{height:100%;height:var(--app-height,100dvh);overflow:hidden;touch-action:none}
body{height:100%;height:var(--app-height,100dvh);overflow:hidden;touch-action:none;overscroll-behavior:none;
  font-family:Rubik,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);
  background:radial-gradient(900px 500px at 0% -10%,#7c3aed33,transparent),radial-gradient(800px 500px at 110% 110%,#06b6d433,transparent),var(--bg);
  position:relative;display:flex;align-items:center;justify-content:center}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* app shell: capped card on desktop, fills the visible viewport on phones — same responsive rule as match-3-bolls */
.app{position:relative;max-width:400px;width:100%;height:100%;max-height:640px;margin:0 auto;overflow:hidden}
@media(max-width:500px){.app{width:100%;height:100%;max-width:none;max-height:none}}
@media(min-width:1600px){.app{max-height:none}}

.app,dialog,#toasts{zoom:var(--ui-zoom,1)}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  padding:max(14px,env(safe-area-inset-top)) 5px max(10px,env(safe-area-inset-bottom));overflow-y:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.screen::-webkit-scrollbar{display:none}
.screen.active{display:flex;animation:fade .3s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}

/* splash */
#splash{padding:0;justify-content:flex-start;background:#0b2a1f url(../images/background-img.png) center/cover no-repeat}
#splash .splash-aajtak{position:absolute;top:max(48px,0%);left:50%;transform:translateX(-50%);width:76px;filter:drop-shadow(0 2px 4px #0006)}
#splash .sp-logo {
    width: 65%;
    max-width: 300px;
    margin-top: 40%;
    filter: drop-shadow(2px 9px 13px #0006);
}


#splash .sp-book {
    position: absolute;
    left: 50%;
    bottom: 20%;
    width: 50%;
    max-width: 240px;
    transform: translateX(-50%);
}

#splash .sp-load{position:absolute;left:0;right:0;bottom:5%;display:flex;flex-direction:column;align-items:center;gap:10px}
#splash .bar{width:80%;height:22px;border-radius:99px;background:#0b1f2e;border:3px solid #3b4a63;padding:2px;box-shadow:0 3px 8px #0008}
#splash .bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(#5eead4,#10b981);animation:spload 2.4s ease-out forwards}
#splash .sp-load b{color:#fff;font-size:1rem;letter-spacing:.03em;text-shadow:0 2px 3px #000a}
#splash .sp-stop{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;z-index:2;padding:6px 14px;border-radius:99px;background:#0b1f2ecc;border:2px solid #fff6;color:#fff;font-weight:700;font-size:.85rem}
@keyframes spload{to{width:100%}}

/* logo */
.logo{display:flex;gap:6px;justify-content:center}
.logo span{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:1.6rem;color:#fff;
  animation:flip .6s ease both;box-shadow:0 6px 20px #0004}
.logo span:nth-child(3n+1){background:var(--correct)}.logo span:nth-child(3n+2){background:var(--present)}.logo span:nth-child(3n){background:var(--absent)}

/* common */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:.9rem}
.icon{width:40px;height:40px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:1.1rem;display:grid;place-items:center}
.btn{width:100%;padding:14px 18px;border-radius:16px;background:var(--card);border:1px solid var(--line);font-weight:600;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .15s,box-shadow .15s}
.btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 8px 24px #0003}
.btn:not(:disabled):active{transform:scale(.97)}
.btn small{font-weight:400;font-size:.75rem;opacity:.8}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:0;font-size:1.25rem;padding:18px;letter-spacing:.05em}
.btn.daily{background:linear-gradient(135deg,#16a34a,#0891b2);color:#fff;border:0}
.btn.ghost{background:transparent;font-size:.85rem;padding:10px}
.btn.small{width:auto;padding:8px 16px;font-size:.9rem;flex-direction:row}

/* home */
#home{padding:0;background:url(../images/home-screen.png) center/cover no-repeat,#1b5e3a}
.home-wrap{width:100%;height:100%;padding:max(14px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;overflow-y:auto;scrollbar-width:none}
.topbar{display:flex;gap:8px;align-items:center}
.avatar{width:44px;height:44px;border-radius:50%;background:#dbdbdb;border:3px solid #fff8;display:grid;place-items:center;font-size:1.3rem; display:none}
.topbar .chip{background:#0b1f2ecc;border:2px solid #fff6;color:#fff;font-size:1.1rem;font-weight:700;padding:6px 16px}
.topbar .chip.streak-chip,#soundBtn{display:none}
.topbar .icon{margin-left:auto;width:44px;height:44px;border-radius:50%;background:#0b1f2ecc;border:2px solid #f43f5e;color:#fff;font-size:1.4rem}
.home-logo {
    width: 48%;
    max-width: 210px;
    margin: 25px auto 26px;
    filter: drop-shadow(0 6px 8px #0006);
}


.home-wrap .grid2 .btn {
    font-size: 1rem;
    gap: 9px;
    text-align: center;
}
.home-wrap .btn {
    color: #fff;
    border: 2px solid #87878788;
    border-radius: 24px;
    text-shadow: 2px 1px 1px #0006;
    box-shadow: 0 5px 0 #0004, inset 0 2px 0 #fff4;
    font-weight: 800;
    padding: 10px 15px;
    transition: all 0.5s;
}
.home-wrap .btn small{display:none}

.home-wrap .btn.primary {
    background: linear-gradient(#009626, #00d128);
    font-size: 1.6rem;
    padding: 11px 11px;
    flex-direction: row;
    gap: 10px;
    width: 80%;
    margin: 0 auto;
    text-shadow: 1px 1px 1px #0006;
    box-shadow: 0 5px 0 #0004, inset 0 -1px 0 #fff4;
    transition: all 0.5s;
}

.home-wrap .grid2 .btn {
    font-size: 14px;
    gap: 4px;
    text-align: center;
    font-weight: normal;
    line-height: 1;
}
.home-wrap .btn i{font-style:normal;font-size:1.9rem;line-height:1}
.b-daily{background:linear-gradient(#a855f7,#6d28d9)}.b-levels{background:linear-gradient(#fb923c,#ea580c)}
.b-time{background:linear-gradient(#38bdf8,#0284c7)}.b-endless{background:linear-gradient(#f472b6,#db2777)}
.home-wrap .grid2{margin-top:6px}
.row3{margin-top:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:6px; margin-top: 20px;}

.home-wrap .btn.ghost{background:#0b1f2ecc;font-size:.62rem;padding:6px 2px;border-radius:14px;gap:2px;box-shadow:none;border:2px solid #fff4;height:62px}
.home-wrap .btn.ghost i{font-size:1.3rem}
.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 80%;
    margin: 0 auto;
}

/* hints */
#hints{width:min(330px,calc(100vw - 24px));padding:12px;border:2px solid #8da0dc;border-radius:20px;background:linear-gradient(#1a2a5c,#0e1840);color:#fff}
.hhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.hhead h2{margin:0;flex:1;text-align:center;font-size:1.1rem}
.hhead .icon{width:38px;height:38px;border-radius:50%;background:#14224a;border:2px solid #6c7fb8;color:#fff;font-size:1.1rem}
#hintsInfo{text-align:center;font-size:.75rem;color:#c9d1f2;margin-bottom:8px}
.hlist{display:flex;flex-direction:column;gap:2px;border-radius:14px;overflow:hidden;background:#eaf1ff}
#hints .btn.hint{border-radius:0;background:#eaf1ff;border:0;border-bottom:2px solid #c6d4f2;color:#1b2a5a;box-shadow:none;padding:12px 10px;gap:12px}
#hints .btn.hint:last-child{border-bottom:0}
#hints .hint .hi{font-size:2.2rem;width:44px;text-align:center}
#hints .hint b{font-size:.95rem}#hints .hint small{font-size:.75rem;color:#44527f;opacity:1}
#hints .hint em{display:flex;align-items:center;gap:6px;color:#1b2a5a;font-weight:700;font-size:1rem}
#hints .hint .hc{font-style:normal;font-size:1.4rem}
#hints .btn.hint:disabled{opacity:.5}

/* timed game */
.pausebtn{display:none}
#game.timed .pausebtn{display:grid}#game.timed [data-open=settings],#game.timed .gpill .sep,#game.timed .gpill .coin,#game.timed .gpill .coins,#game.timed .gtools,#game.timed #gSub{display:none}
#game.timed .gpill{background:none;border:0;padding:0;font-size:1rem}#game.timed #gTitle::before{content:"⏱  "}
#game.timed .ginfo{flex-direction:column;gap:8px;margin:6px 0 4px}
#game.timed .timer{--p:100;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;font-weight:700;color:#fff;background:radial-gradient(circle,#0e1840 0 62%,transparent 63%),conic-gradient(#ff3fa8 0,#ffb020 calc(var(--p)*.33%),#22d3ee calc(var(--p)*.66%),#6d4aff calc(var(--p)*1%),#26335f 0)}
#game.timed .timer.low{animation:none;color:#ff6b81}

/* daily done */
#result.daily .res{background:linear-gradient(#0b1030aa,#0b1030f2 70%),url("../images/Floating Kingdom of Clouds.png") center/cover}
.dhead{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.15rem}.dcal{font-size:1.6rem}
.ddate{font-size:.9rem;margin:2px 0 10px;color:#e6ebff}
.dboard{display:flex;flex-direction:column;gap:5px;align-items:center}.drow{display:flex;gap:5px}.drow .tile{--t:38px}
.dstats{display:flex;justify-content:center;gap:22px;margin:12px 0 8px;font-size:.9rem}.dstats b{margin-left:6px}
.dstreak{display:flex;align-items:center;gap:10px;justify-content:center;padding:8px;border-radius:14px;background:#0f1b45e6;border:2px solid #34447a}
.dstreak i{font-style:normal;font-size:2rem}.dstreak div{text-align:left;display:flex;flex-direction:column}.dstreak b{color:#ffd23f;font-size:1.05rem}.dstreak span{font-size:.8rem}
#result.rs .btn.primary.share{background:linear-gradient(#8a3ff0,#5b1fc4);border-color:#c4a0ff;box-shadow:0 3px 0 #35118a;color:#fff;font-size:1.05rem}

/* pause */
#pause{width:min(300px,calc(100vw - 48px));padding:26px 16px 18px;border:2px solid #8da0dc;border-radius:22px;background:linear-gradient(#1a2a5c,#0e1840);color:#fff;overflow:visible}
#pause .x{top:-14px;right:-12px;width:36px;height:36px;border-radius:50%;background:#14224a;border:2px solid #fff;color:#fff;font-size:1rem;box-shadow:0 3px 0 #0a1230}
#pause .pico{width:50px;height:50px;margin:0 auto 6px;border-radius:50%;background:#fff;color:#14224a;display:grid;place-items:center;font-size:1.4rem; line-height: 1px; margin-bottom: 20px;}

#pause h2{font-size:1.05rem;font-weight:700;margin-bottom:6px; }

#pause .btn{flex-direction:row;gap:10px;background:linear-gradient(#2d4075,#1c2a55);border:2px solid #5c70ad;color:#fff;font-weight:700;border-radius:14px;box-shadow:0 3px 0 #0a1230}
#pause .btn.primary{background:linear-gradient(#2fdc4e,#14a833);border-color:#8ff0a0;box-shadow:0 3px 0 #0b6d20;font-size:1rem;letter-spacing:0;padding:14px 18px}

/* modes */
#modes{padding:max(14px,env(safe-area-inset-top)) 14px 14px;background:linear-gradient(#0b1030d8,#0b1030f2),url("../images/Floating Kingdom of Clouds.png") center/cover no-repeat,#0b1030;color:#fff}
.mhead{width:100%;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.mhead .icon{position:absolute;left:0;background:#14224a;border:2px solid #6c7fb8;color:#fff;border-radius:50%;width:42px;height:42px;font-size:1.3rem}
.mhead h2{font-size:1.15rem;font-weight:700}
.mlist{width:100%;display:flex;flex-direction:column;gap:10px; margin-top: 50px;}
.mode{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 14px;border-radius:18px;border:2px solid #fff7;color:#fff;box-shadow:0 4px 0 #0005,inset 0 2px 0 #fff4;min-height:78px}
.mode i{font-style:normal;font-size:2.4rem;width:48px;text-align:center;flex:none;filter:drop-shadow(0 2px 2px #0005)}
.mode div{flex:1;display:flex;flex-direction:column;gap:2px}.mode b{font-size:1.05rem;font-weight:700}.mode span{font-size:.78rem;line-height:1.25;opacity:.95}
.mode u{text-decoration:none;font-size:1.8rem;opacity:.8}
.m-classic{background:linear-gradient(#a6e45a,#5fbf2c);color:#12310a}.m-classic b,.m-classic span{text-shadow:none}
.m-level{background:linear-gradient(#a24cf0,#6a1fc4)}.m-daily{background:linear-gradient(#2cb4ff,#0a7fd6)}
.m-time{background:linear-gradient(#ff9a2e,#f06a0a)}.m-endless{background:linear-gradient(#ff3fa8,#d81b82)}
.mode:active{transform:translateY(2px)}

/* sub screens */
.shead{width:100%;max-width:560px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.shead h2{font-size:1.2rem;flex:1}
.panel{width:100%;max-width:560px}
.panel h3{margin:18px 0 8px;font-size:1rem}.panel h3 small{color:var(--muted);font-weight:400;font-size:.8rem;margin-left:6px}
#levels{padding:max(14px,env(safe-area-inset-top)) 12px 14px;background:linear-gradient(#0b1030cc,#0b1030f0),url("../images/Floating Kingdom of Clouds.png") center/cover no-repeat,#0b1030;color:#fff}
.lhead{width:100%;position:relative;display:flex;justify-content:center;margin-bottom:14px}
.lhead .icon{position:absolute;left:0;top:0}
.icon.round.big{width:50px;height:50px;font-size:2rem;line-height:1}.icon.round:disabled{opacity:.4}
.ltitle{display:flex;flex-direction:column;align-items:center;padding:6px 26px;border-radius:14px;background:#14224a;border:2px solid #6c7fb8;font-weight:700;line-height:1.25}
.ltitle b{font-size:1rem}.ltitle span{font-size:1rem}
.lvgrid{width:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.lv{aspect-ratio:1;border-radius:10px;background:linear-gradient(#1f2f63,#14214b);border:2px solid #34447a;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;box-shadow:0 3px 0 #0a1230}
.lv b{font-size:1.05rem;font-weight:600}.lv span{font-size:.75rem;color:#ffc933;letter-spacing:0;line-height:1}.lv .lock{font-size:1.2rem;color:#fff}
.lv:disabled{opacity:1;cursor:not-allowed}
.lv.done{border-color:#8ff0a0;background:linear-gradient(#37e05a,#16a834);box-shadow:0 3px 0 #0b6d20}
.lv.current{border:2px solid #ffc933}
.lnav{margin-top:auto;width:100%;display:flex;align-items:center;justify-content:space-between}
.lpage{padding:6px 24px;border-radius:99px;background:#0b1030aa;font-weight:600}
@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 30%,transparent)}}

/* game */
.game{padding-top:max(10px,env(safe-area-inset-top));overflow:hidden}
.frame{width:100%;max-width:440px;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;padding:6px 8px 9px}
#game{background:linear-gradient(#0b1030e0,#0b1030f5),url("../images/Floating Kingdom of Clouds.png") center/cover no-repeat,#0b1030}
.ghead{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px}
.icon.round{width:42px;height:42px;border-radius:50%;background:#14224a;border:2px solid #6c7fb8;color:#fff;font-size:1.3rem;box-shadow:0 3px 0 #0a1230; line-height: 1;}
.gpill{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:99px;background:#14224a;border:2px solid #6c7fb8;font-weight:700;font-size:.95rem;color:#fff}
.gpill .sep{width:1px;height:16px;background:#fff3}
.ginfo{width:100%;display:flex;justify-content:center;align-items:center;gap:12px;margin:10px 0 4px;font-size:.8rem;color:#c9d1f2}
.hearts{display:flex;gap:6px;font-size:1.3rem;line-height:1}.hearts span{color:#3a4a7a}.hearts span.on{color:#ef4444;text-shadow:0 2px 4px #0006}
.gtools{width:100%;display:flex;justify-content:flex-start;margin:4px 0 10px}
.toolbtn{position:relative;width:54px;height:54px;border-radius:16px;background:linear-gradient(#4a5a9a,#2c3a72);border:2px solid #8da0dc;font-size:1.7rem;box-shadow:0 4px 0 #0a1230}
.toolbtn em{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;border-radius:99px;background:#ef4444;border:2px solid #fff;color:#fff;font:700 .75rem/18px Rubik,sans-serif;font-style:normal;padding:0 4px}
.toolbtn:disabled{opacity:.45}
.timer{font-variant-numeric:tabular-nums;font-weight:700;color:var(--text)}
.timer.low{color:#ef4444;animation:pulse 1s infinite}
#boardWrap{flex:1;min-height:0;width:100%;max-width:520px;display:grid;place-items:center;transition:filter .2s}
#boardWrap.blur{filter:blur(12px)}
#board{display:grid;gap:6px}
.row{display:grid;grid-template-columns:repeat(var(--len),var(--t));gap:6px}
.tile{width:var(--t);height:var(--t);border-radius:10px;display:grid;place-items:center;color:#fff;text-shadow:0 2px 2px #0005;
  font-size:calc(var(--t)*.52);font-weight:800;background:#1a2750cc;border:2px solid #34447a;box-shadow:inset 0 2px 5px #0007}
[data-theme=light] .tile:not(.filled,.correct,.present,.absent){background:linear-gradient(180deg,#dfe3f1,#d3d8ea);box-shadow:inset 0 2px 4px #0002}
.tile:empty::after{content:attr(data-hint);opacity:.35}
.tile.filled,.tile.absent{background:linear-gradient(180deg,#6a7596,#454f6e);box-shadow:inset 0 1px 0 #ffffff45,0 3px 0 #2a3049,0 5px 10px #0004}
.tile.correct{background:linear-gradient(180deg,#66e572,#22a83f);box-shadow:inset 0 1px 0 #ffffff70,0 3px 0 #16752b,0 5px 12px #22c55e40}
.tile.present{background:linear-gradient(180deg,#ffd54f,#e99c00);box-shadow:inset 0 1px 0 #ffffff70,0 3px 0 #a36b00,0 5px 12px #eab30840}
.tile.pop{animation:pop .12s}
.tile.flip{animation:flip .5s ease}
.tile.bounce{animation:bounce .5s ease}
.row.shake{animation:shake .45s}
@keyframes pop{from{transform:scale(.86)}}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@keyframes bounce{30%{transform:translateY(-22%)}60%{transform:translateY(4%)}}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
#hintBar{min-height:28px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:6px 0}
#hintBar .chip{font-size:.8rem;padding:4px 10px}
#hintBar .pattern{letter-spacing:.3em;font-weight:800}
#keyboard{width:100%;display:flex;flex-direction:column;gap:7px}
.krow{display:flex;gap:5px;justify-content:center}
.key{flex:1;max-width:40px;height:clamp(38px,6.2dvh,50px);border-radius:9px;color:#fff;font-weight:700;font-size:1rem;
  background:linear-gradient(180deg,#2d4075,#1c2a55);border:1.5px solid #5c70ad;box-shadow:0 3px 0 #0a1230;transition:background .3s,transform .08s}
.key:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff35,0 1px 0 #242a40}
.key.wide{flex:1.7;max-width:62px;font-size:1.1rem}.key.enter{font-size:.8rem;letter-spacing:0}
.key.correct{background:linear-gradient(180deg,#5fe06b,#23a940);box-shadow:inset 0 1px 0 #ffffff60,0 3px 0 #16752b}
.key.present{background:linear-gradient(180deg,#ffd54f,#e99c00);box-shadow:inset 0 1px 0 #ffffff60,0 3px 0 #a36b00}
.key.absent{background:linear-gradient(180deg,#2a3150,#20263e);color:#a3abc9;box-shadow:0 3px 0 #151a2b}

/* dialogs */
dialog{margin:auto;border:1px solid var(--line);border-radius:22px;background:var(--bg2);color:var(--text);padding:22px;
  width:min(420px,calc(100vw - 32px));max-height:90dvh;box-shadow:0 30px 80px #0008}
dialog::backdrop{background:#05060d99;backdrop-filter:blur(4px)}
dialog[open]{animation:dlg .25s ease}
@keyframes dlg{from{opacity:0;transform:scale(.92)}}
dialog h2{text-align:center;margin-bottom:12px}
dialog .stack{display:flex;flex-direction:column;gap:10px;margin-top:25px;}

.x{position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:10px;background:var(--card)}
.help{width:min(330px,calc(100vw - 24px));padding:16px 16px 14px;border:3px solid #c9944a;border-radius:20px;background:linear-gradient(#fbe6b8,#f0cf8c);color:#4a2f12;overflow:visible}
.help h2{font-size:1.3rem;color:#4a2f12;margin-bottom:10px}
.help .x{top:-12px;right:-10px;width:34px;height:34px;border-radius:50%;background:#14224a;border:2px solid #fff;color:#fff}
.help .step{display:flex;align-items:center;gap:12px;margin-bottom:10px;text-align:left}
.help .step b{font-size:1rem;color:#2a1a08}.help .step p{font-size:.85rem;line-height:1.25;color:#4a2f12;margin-top:2px}
.help .num{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.2rem;color:#fff;border:2px solid #fff8;box-shadow:0 2px 0 #0004}
.help .n1{background:#22b24c}.help .n2{background:#22b24c}
.hrow{display:flex;gap:5px;justify-content:center;margin-top:8px}.hrow .tile{--t:38px;border-radius:8px}
.hrow .tile.navy{background:linear-gradient(#2d4075,#1c2a55);box-shadow:0 3px 0 #0a1230}
.help .cap{text-align:center;font-size:.85rem;line-height:1.2;color:#2a1a08;margin:4px 0 4px}
.set{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.set small{display:block;color:var(--muted);font-size:.75rem}
.set input{appearance:none;width:46px;height:26px;border-radius:99px;background:var(--absent);position:relative;cursor:pointer;transition:background .2s;flex:none}
.set input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.set input:checked{background:var(--correct)}.set input:checked::after{transform:translateX(20px)}
.hint{display:flex;align-items:center;gap:12px;text-align:left;flex-direction:row;justify-content:flex-start}
.hint .hi{font-size:1.5rem}.hint div{flex:1}.hint small{display:block}.hint em{font-style:normal;font-weight:700;color:var(--present)}
.res{text-align:center}
#result.rs{padding:0;border:2px solid #8da0dc;background:#0b1030;overflow:auto;scrollbar-width:none}
#result.rs .res{padding:14px 16px 16px}
#result.win .res{background:linear-gradient(#0b103000,#0b103066 30%,#0b1030ee 62%),url("../images/Floating Kingdom of Clouds.png") center top/cover}

.res .ribbon {
    margin: 6px 0 8px;
    padding: 9px 4px;
    background: linear-gradient(#ffb43c, #e07b10);
    color: #fff;
    font-weight: 800;
    font-size: 1.25rem;
    text-shadow: 0 2px 2px #0006;
    background: url;
    background: url(https://instore-tosshub-com.s3.ap-south-1.amazonaws.com/sites/games/Wordle-game/images/level.png);
    background-repeat: no-repeat;
    width: 230px;
    height: 141px;
    background-size: contain;
    text-align: center;
    margin: 0 auto;
    transform: translate(50%, -6%);
    left: -110px;
    top: 50%;
    position: relative;
}
 
.res .stars {
    font-size: 2.3rem;
    letter-spacing: 6px;
    color: #ffc933;
    text-shadow: 0 2px 3px #0008;
    margin-top: -100px;
    margin-bottom: 66px;
}

.res .stars s{text-decoration:none;color:#3a4a7a}
.res .statbox {
    margin: 2px 0 3px;
    padding: 4px 16px;
    border-radius: 14px;
    background: #0f1b45e6;
    border: 2px solid #34447a;
    text-align: left;
}
.res .statbox div{display:flex;justify-content:space-between;padding:4px 0;font-size:.95rem}.res .statbox span{color:#e6ebff}.res .statbox b{font-size:.95rem;color:#fff}
#result.rs .btn{background:linear-gradient(#2d4075,#1c2a55);border:2px solid #5c70ad;color:#fff;font-weight:700;border-radius:14px;flex-direction:row;gap:8px;box-shadow:0 3px 0 #0a1230}
#result.rs .btn.primary{background:linear-gradient(#2fdc4e,#14a833);border-color:#8ff0a0;box-shadow:0 3px 0 #0b6d20;font-size:1.05rem;letter-spacing:0;padding:12px}
#result.over .res{background:linear-gradient(#2a0a1a88,#1a0a20f2 60%),url("../images/Floating Kingdom of Clouds.png") center/cover;filter:none}
#result.over .res .heart{font-size:4.2rem;line-height:1;filter:drop-shadow(0 6px 10px #0008)}
#result.over h2{margin:2px 0 0;font-size:1.7rem;font-weight:700;text-shadow:0 2px 3px #0008}
#result.over .word .tile{background:linear-gradient(#ff5b7a,#d8153f);box-shadow:0 3px 0 #8f0c2a;border:0}
#result.over .statbox{margin:8px 0}
#result.rs .btn.lose{background:linear-gradient(#ff4d6d,#e0123f);border-color:#ff9db0;box-shadow:0 3px 0 #8f0c2a;font-size:1.05rem;padding:12px}
#result.rs .btn.cont{background:linear-gradient(#8a3ff0,#5b1fc4);border-color:#c4a0ff;box-shadow:0 3px 0 #35118a;line-height:1.1}
#result.rs .btn.ghost{background:none;border:0;box-shadow:none;font-size:.8rem;color:#c9d1f2;padding:4px}
#result.rs .stack{gap:8px;margin-top:8px}
.res .note{font-size:.75rem;color:#c9d1f2}
.res .big{font-size:3rem;line-height:1}
.res .word {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin: 5px 0;
    margin-top: 17px;
    position: relative;
    top: -6px;
}

.res .word .tile{--t:40px}
.res .kv{display:flex;justify-content:space-around;margin:12px 0}
.res .kv b{display:block;font-size:1.5rem}.res .kv span{font-size:.75rem;color:var(--muted)}
.res .stars{font-size:2rem;letter-spacing:6px;color:var(--present)}
.res .note{font-size:.85rem;color:var(--muted);margin-top: 20px;
    margin-bottom: 20px;}
.emoji-grid{font-size:1.3rem;line-height:1.3;margin:10px 0;white-space:pre}

#toasts{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--text);color:var(--bg);padding:10px 18px;border-radius:12px;font-weight:600;animation:fade .2s;white-space:nowrap}
.confetti{position:fixed;top:-12px;width:8px;height:14px;z-index:99;pointer-events:none;animation:fall linear forwards}

/* debug: test every scenario, hide when done */
#dbgFab{position:fixed;right:14px;bottom:14px;z-index:200;width:44px;height:44px;border-radius:50%;font-size:1.3rem;
  background:#000;border:2px solid #ff3860;box-shadow:0 4px 16px #0008}
#dbgPanel{position:fixed;right:14px;bottom:66px;z-index:200;width:240px;max-height:70dvh;overflow-y:auto;display:none;
  background:#0d0f1e;border:1px solid #ff3860;border-radius:14px;padding:10px;gap:6px;flex-direction:column}
#dbgPanel.open{display:flex}
#dbgPanel b{color:#ff3860;font-size:.7rem;letter-spacing:.1em;margin:6px 0 -2px}
#dbgPanel button{background:#1e2340;color:#fff;border-radius:8px;padding:7px 8px;font-size:.78rem;text-align:left}
#dbgPanel button:hover{background:#2a3060}
#dbgPanel .hide{background:#ff3860;color:#fff;text-align:center;margin-top:8px}
@keyframes fall{to{transform:translateY(105dvh) rotate(720deg)}}

.no-anim *,.no-anim *::after{animation:none!important;transition:none!important}
@media (max-height:640px){.key{height:40px}.btn.primary{padding:14px}}
dialog{overflow-y:auto;scrollbar-width:none}
@media (max-height:700px){
  #game.timed .timer{width:68px;height:68px;font-size:1.1rem}
  .ginfo{margin:4px 0 2px}.hearts{font-size:1.05rem}
  .toolbtn{width:44px;height:44px;font-size:1.4rem}.gtools{margin:2px 0 6px}
  .home-logo{width:46%}.home-wrap{gap:8px}
  
.res .stars{font-size:1.9rem}
  #hints .btn.hint{padding:8px 8px}#hints .hint .hi{font-size:1.8rem}
}
@media (max-height:560px){
  .key{height:34px}.krow{gap:4px}#keyboard{gap:5px}
  #game.timed .timer{width:54px;height:54px;font-size:.95rem}
  .home-logo{width:36%}.mode{min-height:60px;padding:6px 12px}
}
@media (max-width:360px){
  .krow{gap:3px}.key{font-size:.9rem}
  .drow .tile,.hrow .tile{--t:32px}.res .word .tile{--t:34px}
  .home-wrap .btn.primary{width:92%}.grid2{width:92%}
  .lv b{font-size:.95rem}.gpill{padding:5px 10px;font-size:.85rem}
}

     .rotate-notice {
            display: none;
         
        }

   @media (orientation:landscape) and (max-width:1023px) and (pointer:coarse) {
          .rotate-notice {
            display:flex; position:fixed; inset:0; z-index:9999;
            align-items:center; justify-content:center; text-align:center;
            padding:24px;
            background:radial-gradient(120% 60% at 50% 0%, var(--bg-1) 0%, var(--bg-3) 55%, var(--bg-2) 100%);
              background-color: #000;
          }
          .rotate-notice::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.45); }
          .rotate-inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:12px; max-width:420px; }
          .rotate-inner svg { width:52px; height:52px; color:var(--gold-1); animation:rotateHint 2s ease-in-out infinite; }
          .rotate-hi { font-weight:800; font-size:18px; line-height:1.3; color:#fff; }
          .rotate-en { font-weight:600; font-size:13px; color:var(--gold-1); }
          @keyframes rotateHint { 0%,60%,100% { transform:rotate(0); } 30% { transform:rotate(-90deg); } }
        }


        .rotate-notice{display:none;}
 @media (orientation:landscape) and (max-width:1023px) and (pointer:coarse) {

    body{background-color:#000; width: 100%; height: 100%; overflow:hidden;}
         
    
    .rotate-notice {
            display:flex; position:fixed; inset:0; z-index:9999;
            align-items:center; justify-content:center; text-align:center;
            padding:24px;
            background:#27133e;}
          .rotate-notice::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.45); }
          .rotate-inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:12px; max-width:420px; }
          .rotate-inner svg { width:52px; height:52px; color:var(--gold-1); animation:rotateHint 2s ease-in-out infinite; }
          .rotate-hi { font-weight:800; font-size:18px; line-height:1.3; color:#fff; }
          .rotate-en { font-weight:600; font-size:13px; color:var(--gold-1); }
          @keyframes rotateHint { 0%,60%,100% { transform:rotate(0); } 30% { transform:rotate(-90deg); } }
        
}