:root{
  --pink:#ff7eb3; --pink-soft:#ffd6e7; --pink-bg:#fff0f6;
  --mint:#9ee7c9; --lav:#c9b6ff; --sky:#a9d8ff; --sun:#ffe08a;
  --plum:#3a2a3f; --charcoal:#2b2030; --blood:#ff4d6d;
  --ink:#3a2a3f; --ink-soft:#8a7a90;
  --good:#3ecf8e; --bad:#ff4d6d;
  --cell:#fffdfe; --given:#ffe3ef; --sel:#ffd34d;
  --shadow:0 6px 0 rgba(58,42,63,.18);
  --r:18px;

  /* ===== THEME TOKENS (default = Lotus Stepwell) — overridden by .theme-* ===== */
  --t-base:linear-gradient(160deg,#20351f 0%,#152317 48%,#090f0b 100%);
  --t-glow:rgba(255,181,71,.26); --t-glow2:rgba(50,180,130,.18);
  --t-board1:#4b3a1d; --t-board2:#1d170c;
  --t-cell1:#3f5a36; --t-cell2:#22301f;
  --t-given1:#201a10; --t-given2:#15110a;
  --t-num:#fff2b8; --t-numglow:rgba(255,203,87,.95);
  --t-seam:#0b0f08; --t-accent:#f7b955; --t-sel:#ffe08a;
}
/* ===== Agni Mandapa ===== */
.theme-forge{
  --t-base:linear-gradient(160deg,#4a1608 0%,#2a0d06 55%,#130602 100%);
  --t-glow:rgba(255,146,34,.42); --t-glow2:rgba(214,41,20,.28);
  --t-board1:#70451e; --t-board2:#301506; --t-cell1:#854f1e; --t-cell2:#482309;
  --t-given1:#2b1205; --t-given2:#1c0b03; --t-num:#ffe6a3; --t-numglow:rgba(255,160,45,1);
  --t-seam:#170602; --t-accent:#ff9b2f; --t-sel:#ffd34d;
}
/* ===== Himalayan Shrine ===== */
.theme-frost{
  --t-base:linear-gradient(160deg,#102f43 0%,#0b2031 55%,#061018 100%);
  --t-glow:rgba(173,224,255,.32); --t-glow2:rgba(255,255,255,.16);
  --t-board1:#31556a; --t-board2:#142b38; --t-cell1:#42687a; --t-cell2:#203b49;
  --t-given1:#132934; --t-given2:#0c1b23; --t-num:#f3feff; --t-numglow:rgba(178,235,255,1);
  --t-seam:#06131a; --t-accent:#9adfff; --t-sel:#fff2b8;
}
/* ===== Nakshatra Sanctum ===== */
.theme-void{
  --t-base:linear-gradient(160deg,#151540 0%,#100d2b 55%,#070715 100%);
  --t-glow:rgba(122,96,255,.32); --t-glow2:rgba(255,211,77,.18);
  --t-board1:#322b63; --t-board2:#171333; --t-cell1:#40387a; --t-cell2:#211b49;
  --t-given1:#171333; --t-given2:#0f0b23; --t-num:#eee7ff; --t-numglow:rgba(180,150,255,1);
  --t-seam:#080618; --t-accent:#a68bff; --t-sel:#ffd34d;
}
/* ===== Raksha Rang Mahal ===== */
.theme-blood{
  --t-base:linear-gradient(160deg,#4a0714 0%,#27040b 55%,#110204 100%);
  --t-glow:rgba(220,20,60,.36); --t-glow2:rgba(255,165,0,.18);
  --t-board1:#651522; --t-board2:#2a0710; --t-cell1:#7c1d2c; --t-cell2:#42101a;
  --t-given1:#2a0710; --t-given2:#1b050a; --t-num:#ffe0c2; --t-numglow:rgba(255,96,88,1);
  --t-seam:#150306; --t-accent:#ff5a3d; --t-sel:#ffd34d;
}
/* ===== Yantra Archive ===== */
.theme-clock{
  --t-base:linear-gradient(160deg,#2b2114 0%,#18140e 52%,#0d0b08 100%);
  --t-glow:rgba(255,200,96,.30); --t-glow2:rgba(64,190,180,.16);
  --t-board1:#5d4725; --t-board2:#251b0d; --t-cell1:#6b5129; --t-cell2:#332513;
  --t-given1:#24190b; --t-given2:#171006; --t-num:#fff0b8; --t-numglow:rgba(255,200,80,.95);
  --t-seam:#0d0803; --t-accent:#d6a642; --t-sel:#63d6c6;
}
/* ===== Ashoka Courtyard ===== */
.theme-garden{
  --t-base:linear-gradient(160deg,#12351f 0%,#0b2116 54%,#06100b 100%);
  --t-glow:rgba(126,211,87,.30); --t-glow2:rgba(255,146,34,.16);
  --t-board1:#315c2c; --t-board2:#142712; --t-cell1:#3d6b33; --t-cell2:#1d351b;
  --t-given1:#142712; --t-given2:#0c170a; --t-num:#edffd7; --t-numglow:rgba(170,255,140,.95);
  --t-seam:#061006; --t-accent:#9bd66f; --t-sel:#ffd34d;
}
/* ===== Monsoon Ghat ===== */
.theme-reef{
  --t-base:linear-gradient(160deg,#073847 0%,#08252e 55%,#041218 100%);
  --t-glow:rgba(64,220,210,.30); --t-glow2:rgba(255,211,77,.16);
  --t-board1:#1f5b61; --t-board2:#0c2c34; --t-cell1:#287077; --t-cell2:#123a42;
  --t-given1:#0e2a31; --t-given2:#081a20; --t-num:#ddfff3; --t-numglow:rgba(120,255,235,.95);
  --t-seam:#041218; --t-accent:#58e0c0; --t-sel:#ffe08a;
}
/* ===== Indra Storm Fort ===== */
.theme-storm{
  --t-base:linear-gradient(160deg,#1d1b3e 0%,#10172f 54%,#060b18 100%);
  --t-glow:rgba(255,224,138,.28); --t-glow2:rgba(91,160,255,.24);
  --t-board1:#383568; --t-board2:#151a34; --t-cell1:#47427a; --t-cell2:#22284a;
  --t-given1:#171936; --t-given2:#0e1025; --t-num:#f6f0ff; --t-numglow:rgba(255,224,138,.95);
  --t-seam:#070914; --t-accent:#ffe08a; --t-sel:#7ad6ff;
}
.theme-gold{
  --t-base:linear-gradient(160deg,#3b2606 0%,#241604 52%,#100902 100%);
  --t-glow:rgba(255,211,77,.38); --t-glow2:rgba(255,126,40,.22);
  --t-board1:#6b4a16; --t-board2:#2a1906; --t-cell1:#72511d; --t-cell2:#3a2409;
  --t-given1:#2d1a05; --t-given2:#1a0f03; --t-num:#fff0b8; --t-numglow:rgba(255,211,77,1);
  --t-seam:#120a02; --t-accent:#ffd34d; --t-sel:#fff0b8;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Baloo 2","Segoe UI Rounded","Comic Sans MS",system-ui,sans-serif;
  color:#f3e8df;
  background:
    radial-gradient(80% 50% at 50% -8%,var(--t-glow),transparent 60%),
    radial-gradient(90% 60% at 50% 115%,var(--t-glow2),transparent 60%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 2px,transparent 2px 46px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 64px),
    var(--t-base);
  background-attachment:fixed;
  background-size:auto,auto,100% 100%,100% 100%,100% 100%;
  overflow-x:hidden;
  user-select:none;-webkit-user-select:none;
  transition:background .8s ease;
}
/* flickering torch vignette */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 120% at 50% 40%,transparent 55%,rgba(0,0,0,.55));
  animation:flicker 4s ease-in-out infinite}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.22;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 20px,color-mix(in srgb,var(--t-accent) 55%,transparent) 21px 22px,transparent 23px 54px,color-mix(in srgb,var(--t-accent) 45%,transparent) 55px 56px,transparent 57px),
    repeating-conic-gradient(from 45deg at 50% 50%,transparent 0 8deg,color-mix(in srgb,var(--t-accent) 32%,transparent) 8deg 10deg,transparent 10deg 18deg);
  background-size:220px 220px,220px 220px;background-position:center;mix-blend-mode:screen}
@keyframes flicker{0%,100%{opacity:.85}45%{opacity:1}70%{opacity:.78}}
#app{z-index:1}
#app{max-width:520px;margin:0 auto;min-height:100%;
  min-height:100dvh;display:flex;flex-direction:column;position:relative}

/* ---------- screens ---------- */
.screen{display:none;flex-direction:column;flex:1;padding:18px;gap:14px;align-items:center}
.screen.active{display:flex}
#screen-game.active{padding:8px 10px;gap:7px;height:100dvh;overflow:hidden;justify-content:flex-start}

/* ---------- title ---------- */
.title-art{font-size:74px;margin-top:8vh;animation:bob 2.4s ease-in-out infinite;
  width:130px;height:130px;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 6px 8px rgba(58,42,63,.3))}
.title-art svg{width:130px;height:130px}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}
.game-title{font-family:"Cinzel Decorative","Cinzel",serif;font-size:46px;line-height:.95;text-align:center;
  background:linear-gradient(180deg,#ffe9a8 0%,#f7b955 45%,#c77b2b 75%,#ffe9a8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #4a2d12) drop-shadow(0 4px 6px rgba(0,0,0,.5));letter-spacing:2px}
.tagline{color:#c9a6ff;font-size:15px;margin-bottom:14px;letter-spacing:.5px}
.game-card{width:min(380px,90%);display:flex;align-items:center;gap:14px;text-align:left;
  padding:14px 16px;border-radius:14px;border:1px solid rgba(255,180,120,.28);
  background:linear-gradient(180deg,rgba(45,33,55,.95),rgba(30,22,40,.95));
  color:#f3e8df;box-shadow:0 5px 0 #16101d,0 8px 14px rgba(0,0,0,.38);cursor:pointer}
.game-card:active{transform:translateY(3px);box-shadow:0 2px 0 #16101d}
.game-card-art{width:54px;height:54px;display:grid;place-items:center;flex:none;border-radius:10px;
  background:linear-gradient(180deg,#ffd98a,#e8a33c);color:#3a2410;
  font-family:"Cinzel",serif;font-size:30px;font-weight:900}
.game-card b{display:block;font-family:"Cinzel",serif;font-size:19px}
.game-card small{display:block;color:#cdbcd6;font:800 13px "Baloo 2",system-ui}
.account-status{color:#9ee7c9;font-size:13px;font-weight:800;min-height:20px;text-align:center}
.title-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.title-actions .btn{padding:11px 15px;font-size:14px}
.best-stats{margin-top:10px;color:#cdbcd6;font-size:14px;text-align:center;line-height:1.7}
.mute-toggle{position:absolute;top:14px;right:14px;background:#2b2030;color:#f3e8df;border:1px solid rgba(255,180,120,.3);
  width:42px;height:42px;border-radius:50%;font-size:20px;box-shadow:var(--shadow);cursor:pointer}

/* ---------- buttons ---------- */
.btn{font-family:"Cinzel","Baloo 2",serif;border:1px solid rgba(255,180,120,.25);border-radius:var(--r);padding:14px 22px;
  font-size:17px;font-weight:800;color:#f3e8df;letter-spacing:.5px;
  background:linear-gradient(180deg,#3a2c44,#271d31);cursor:pointer;
  box-shadow:0 5px 0 #16101d,0 7px 10px rgba(0,0,0,.4);transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #16101d}
.btn-big{width:min(320px,80%);padding:18px;font-size:20px}
.btn-primary{background:linear-gradient(180deg,#ff8fb8,#e0467f);color:#fff;
  border-color:rgba(255,255,255,.4);text-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 5px 0 #9c2350,0 7px 10px rgba(0,0,0,.4)}
.btn-primary:active{box-shadow:0 2px 0 #9c2350}
.btn-ghost{background:linear-gradient(180deg,#322640,#241a2e)}
.btn-start{background:linear-gradient(180deg,#ffd98a,#e8a33c);color:#3a2410;
  border-color:rgba(255,255,255,.45);box-shadow:0 5px 0 #9c6a1a,0 7px 10px rgba(0,0,0,.4)}
.btn-start:active{box-shadow:0 2px 0 #9c6a1a}
.btn-tiny{border:1px solid rgba(255,180,120,.25);background:linear-gradient(180deg,#3a2c44,#271d31);
  color:#f3e8df;border-radius:12px;width:38px;height:38px;font-size:18px;box-shadow:0 4px 0 #16101d;cursor:pointer}
.btn-tiny:active{transform:translateY(2px);box-shadow:0 2px 0 #16101d}

/* ---------- howto ---------- */
.panel-title{font-family:"Cinzel Decorative","Cinzel",serif;font-size:28px;color:#f7b955;margin-top:6vh;
  text-shadow:0 2px 4px rgba(0,0,0,.5)}
.howto-body{background:linear-gradient(180deg,rgba(45,33,55,.95),rgba(30,22,40,.95));
  border:1px solid rgba(255,180,120,.2);color:#e8dcef;border-radius:var(--r);padding:18px;font-size:15px;
  line-height:1.7;box-shadow:0 6px 0 #16101d;max-width:420px}
.howto-body p{margin-bottom:10px}

/* ---------- HUD (one slim row) ---------- */
#hud{width:100%;display:flex;align-items:center;gap:8px;
  background:
    linear-gradient(90deg,transparent 0 12px,rgba(247,185,85,.16) 12px 14px,transparent 14px 28px),
    linear-gradient(180deg,rgba(45,33,55,.92),rgba(30,22,40,.92));
  border:1px solid rgba(255,180,120,.22);border-radius:13px;
  padding:6px 9px;box-shadow:0 4px 0 #16101d;color:#f3e8df}
#hud .btn-tiny{width:34px;height:34px;font-size:16px;flex:none}
.hud-floor{font-family:"Cinzel",serif;font-weight:800;font-size:14px;white-space:nowrap;flex:none}
.hud-hearts{font-size:15px;letter-spacing:.5px;flex:1;text-align:center;white-space:nowrap;overflow:hidden}
.hud-hearts.hurt{animation:shake .42s}
#board-wrap.shake{animation:shake .35s}
.hud-hearts .lost{filter:grayscale(1);opacity:.3}
.hud-mana{font-size:12px;font-weight:800;color:var(--lav);display:flex;align-items:center;gap:4px;flex:none}
.mana-bar{width:46px;height:8px;background:#2b2240;border:1px solid rgba(160,140,220,.35);border-radius:5px;overflow:hidden}
.mana-fill{height:100%;background:linear-gradient(90deg,var(--lav),var(--sky));transition:width .25s}
.hud-score{font-weight:800;font-size:14px;white-space:nowrap;flex:none}

/* ---------- monster strip (compact) ---------- */
#monster-strip{width:100%;display:flex;align-items:center;gap:12px;
  background:
    radial-gradient(circle at 10% 50%,color-mix(in srgb,var(--t-accent) 18%,transparent),transparent 24%),
    linear-gradient(135deg,rgba(58,42,63,.9),rgba(43,32,48,.9));
  border-radius:13px;padding:4px 10px 4px 5px;box-shadow:0 4px 0 #16101d;
  border:1px solid rgba(255,126,179,.3);position:relative;overflow:visible}
#monster-art{width:64px;height:64px;flex:none;filter:drop-shadow(0 4px 5px rgba(0,0,0,.42));position:relative;
  animation:bob 2.6s ease-in-out infinite;z-index:1}
#monster-art svg{width:100%;height:100%;display:block;position:relative;z-index:2}
#monster-art i{position:absolute;display:block;pointer-events:none}
.m-cracks{inset:4px;z-index:6;opacity:0;
  background:
    linear-gradient(118deg,transparent 0 38%,rgba(255,240,184,.9) 39% 41%,transparent 42%) 47% 17%/34px 44px no-repeat,
    linear-gradient(42deg,transparent 0 44%,rgba(255,240,184,.85) 45% 47%,transparent 48%) 56% 36%/38px 42px no-repeat,
    linear-gradient(98deg,transparent 0 46%,rgba(255,240,184,.8) 47% 49%,transparent 50%) 33% 46%/30px 46px no-repeat;
  filter:drop-shadow(0 0 4px #fff0b8)}
.m-ragefire{left:50%;bottom:-5px;width:58px;height:42px;margin-left:-29px;z-index:1;opacity:0;
  background:radial-gradient(ellipse at 50% 100%,#ff4d6d 0 22%,#ff8f5a 38%,transparent 70%);
  filter:blur(1px) drop-shadow(0 0 10px #ff4d6d);animation:rageFire .46s ease-in-out infinite alternate}
.m-ashes{inset:-12px;z-index:7;opacity:0;
  background:
    radial-gradient(circle at 26% 18%,#ffe08a 0 2px,transparent 3px),
    radial-gradient(circle at 72% 24%,#ff7eb3 0 2px,transparent 3px),
    radial-gradient(circle at 44% 78%,#9ee7c9 0 2px,transparent 3px),
    radial-gradient(circle at 78% 70%,#fff0b8 0 2px,transparent 3px);
  animation:ashDrift 1s linear infinite}
@keyframes rageFire{from{transform:scale(.9,.72);opacity:.62}to{transform:scale(1.18,1.08);opacity:1}}
@keyframes ashDrift{0%{transform:translateY(6px) rotate(0);opacity:.35}50%{opacity:.95}100%{transform:translateY(-8px) rotate(18deg);opacity:.35}}
/* ---- emotions: persistent mood + transient emote face ---- */
#monster-art.mood-happy{}  /* default bob/idle */
#monster-art.mood-angry{filter:drop-shadow(0 0 8px rgba(255,77,109,.85)) saturate(1.4) contrast(1.06)}
#monster-art.mood-scared{animation:tremble .34s ease-in-out infinite;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.35)) saturate(.65) brightness(.9)}
#monster-art.mood-dead{filter:grayscale(.85) brightness(.6);opacity:.55}
#monster-art.hp-full svg{filter:saturate(1.08) contrast(1.03)}
#monster-art.hp-hurt svg{filter:saturate(1.25) contrast(1.08) drop-shadow(0 0 5px rgba(255,224,138,.55))}
#monster-art.hp-hurt .m-cracks{opacity:.55;animation:crackPulse 1.1s ease-in-out infinite}
#monster-art.hp-critical{animation:tremble .28s ease-in-out infinite}
#monster-art.hp-critical svg{filter:saturate(1.55) contrast(1.18) hue-rotate(-8deg) drop-shadow(0 0 10px rgba(255,77,109,.85))}
#monster-art.hp-critical .m-cracks{opacity:1;animation:crackPulse .55s ease-in-out infinite}
#monster-art.hp-critical .m-ragefire,#monster-art.hp-critical .m-ashes{opacity:1}
#monster-art.hp-defeated .m-cracks,#monster-art.hp-defeated .m-ashes{opacity:.8}
@keyframes crackPulse{0%,100%{filter:drop-shadow(0 0 2px #fff0b8)}50%{filter:drop-shadow(0 0 9px #ffe08a)}}
@keyframes tremble{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-1.8px) rotate(-2.5deg)}75%{transform:translateX(1.8px) rotate(2.5deg)}}
#monster-emote{position:absolute;left:38px;top:-8px;font-size:23px;z-index:6;pointer-events:none;
  opacity:0;transform:scale(.3) translateY(8px);filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
#monster-emote.show{animation:emotePop .4s cubic-bezier(.2,1.8,.4,1) forwards}
@keyframes emotePop{0%{opacity:0;transform:scale(.3) translateY(8px) rotate(-12deg)}
  55%{opacity:1;transform:scale(1.3) translateY(-2px) rotate(6deg)}100%{opacity:1;transform:scale(1) translateY(0)}}
.boss #monster-emote{font-size:27px;left:46px}
/* All monster anims use smooth springs + soft glow (no harsh brightness flips). */
#monster-art.hit{animation:mHit .42s cubic-bezier(.22,1,.36,1)}
@keyframes mHit{0%{transform:scale(1)}
  28%{transform:translateX(-7px) scale(1.16,.86);filter:drop-shadow(0 0 9px var(--t-accent))}
  60%{transform:translateX(3px) scale(.95,1.05)}100%{transform:scale(1);filter:none}}
#monster-art.hitR{animation:mHitR .42s cubic-bezier(.22,1,.36,1)}
@keyframes mHitR{0%{transform:scale(1)}
  28%{transform:translateX(7px) scale(1.16,.86);filter:drop-shadow(0 0 9px var(--t-accent))}
  60%{transform:translateX(-3px) scale(.95,1.05)}100%{transform:scale(1);filter:none}}
#monster-art.hitPierce{animation:mPierce .42s cubic-bezier(.2,1,.3,1)}
@keyframes mPierce{0%,100%{transform:translateX(0) scale(1)}25%{transform:translateX(-2px) scale(.72,1.28);filter:drop-shadow(0 0 12px #ff7eb3)}55%{transform:translateX(5px) scale(1.08,.94)}}
#monster-art.hitCleave{animation:mCleave .5s cubic-bezier(.22,1,.36,1)}
@keyframes mCleave{0%,100%{transform:rotate(0) scale(1)}28%{transform:rotate(-13deg) translateX(-8px) scale(1.15);filter:drop-shadow(0 0 12px #9ee7c9)}58%{transform:rotate(8deg) translateX(5px) scale(.96)}}
#monster-art.hitBolt{animation:mBolt .48s steps(2,end)}
@keyframes mBolt{0%,100%{transform:translate(0,0);filter:none}20%{transform:translate(-7px,4px) skewX(7deg);filter:drop-shadow(0 0 14px #ffe08a) brightness(1.5)}45%{transform:translate(6px,-3px) skewX(-8deg)}70%{transform:translate(-4px,-2px)}}
#monster-art.hitFrost{animation:mFrost .62s ease-out}
@keyframes mFrost{0%{transform:scale(1)}25%{transform:scale(.88,1.08);filter:drop-shadow(0 0 12px #a9d8ff) saturate(.5)}58%{transform:scale(1.03);filter:drop-shadow(0 0 16px #d9f7ff)}100%{transform:scale(1);filter:none}}
#monster-art.hitFlame{animation:mFlame .5s cubic-bezier(.2,1,.36,1)}
@keyframes mFlame{0%,100%{transform:scale(1);filter:none}30%{transform:translateY(-5px) scale(1.18,.88);filter:drop-shadow(0 0 16px #ff8f5a) brightness(1.25)}65%{transform:translateY(2px) scale(.96,1.07)}}
#monster-art.hitStar{animation:mStarHit .58s cubic-bezier(.22,1,.36,1)}
@keyframes mStarHit{0%,100%{transform:scale(1) rotate(0)}35%{transform:scale(1.22) rotate(18deg);filter:drop-shadow(0 0 15px #c9b6ff)}70%{transform:scale(.95) rotate(-8deg)}}
#monster-art.hitBlast{animation:mBlast .56s cubic-bezier(.2,1.4,.35,1)}
@keyframes mBlast{0%{transform:scale(1)}28%{transform:scale(1.45);filter:drop-shadow(0 0 22px #ff4d6d) brightness(1.35)}48%{transform:scale(.82)}74%{transform:scale(1.08)}100%{transform:scale(1);filter:none}}
#monster-art.hitVortex{animation:mVortex .64s cubic-bezier(.3,1,.4,1)}
@keyframes mVortex{0%,100%{transform:rotate(0) scale(1)}36%{transform:rotate(26deg) scale(.82);filter:drop-shadow(0 0 16px #7ad6ff)}68%{transform:rotate(-12deg) scale(1.08)}}
#monster-art.hitNova{animation:mNova .68s cubic-bezier(.18,1,.32,1)}
@keyframes mNova{0%{transform:scale(1);filter:none}24%{transform:scale(1.35);filter:drop-shadow(0 0 24px #ffd34d) brightness(1.7)}55%{transform:scale(1.04)}82%{transform:scale(1.16);filter:drop-shadow(0 0 10px #fff)}100%{transform:scale(1);filter:none}}
#monster-art.morph{animation:mMorph .7s cubic-bezier(.18,1.4,.35,1)}
@keyframes mMorph{0%,100%{transform:scale(1);border-radius:0}30%{transform:scale(.72,1.35) rotate(-8deg);filter:hue-rotate(70deg) drop-shadow(0 0 14px var(--t-accent))}65%{transform:scale(1.32,.78) rotate(7deg)}}
#monster-art.stomp{animation:mStomp .55s cubic-bezier(.2,1.5,.35,1)}
@keyframes mStomp{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-10px) scale(.9,1.15)}58%{transform:translateY(8px) scale(1.25,.72);filter:drop-shadow(0 8px 0 rgba(0,0,0,.28))}}
#monster-art.blink{animation:mBlink .5s steps(2,end)}
@keyframes mBlink{0%,100%{opacity:1;transform:scale(1)}25%{opacity:.25;transform:translateX(-9px) scale(.82)}50%{opacity:1;transform:translateX(8px) scale(1.12)}}
#monster-art.howl{animation:mHowl .72s ease-in-out}
@keyframes mHowl{0%,100%{transform:scale(1)}30%{transform:translateY(-6px) scale(1.08);filter:drop-shadow(0 0 18px #ffe08a)}60%{transform:translateY(2px) scale(1.2,.9)}}
#monster-art.rubber{animation:mRubber .68s cubic-bezier(.2,1.7,.35,1)}
@keyframes mRubber{0%,100%{transform:scale(1)}18%{transform:scale(1.35,.65)}38%{transform:scale(.78,1.28)}58%{transform:scale(1.16,.88)}78%{transform:scale(.94,1.05)}}
#monster-art.flip{animation:mFlip .68s cubic-bezier(.2,1.35,.35,1)}
@keyframes mFlip{0%,100%{transform:rotateY(0) scale(1)}35%{transform:rotateY(180deg) scale(1.12);filter:drop-shadow(0 0 15px var(--t-accent))}70%{transform:rotateY(340deg) scale(.92)}}
#monster-art.squash{animation:mSquash .58s cubic-bezier(.2,1.65,.35,1)}
@keyframes mSquash{0%,100%{transform:scale(1)}24%{transform:scale(1.55,.48) translateY(9px)}52%{transform:scale(.75,1.35) translateY(-7px)}76%{transform:scale(1.08,.92)}}
#monster-art.phase{animation:mPhase .7s ease-in-out}
@keyframes mPhase{0%,100%{opacity:1;transform:translateX(0);filter:none}22%{opacity:.35;transform:translateX(-16px);filter:blur(2px) hue-rotate(80deg)}48%{opacity:.9;transform:translateX(14px)}72%{opacity:.45;transform:translateX(-5px);filter:blur(1px)}}
#monster-art.rage{animation:mRage .62s cubic-bezier(.3,1.3,.4,1)}
@keyframes mRage{0%,100%{transform:scale(1);filter:none}20%{transform:scale(1.18) rotate(-5deg);filter:drop-shadow(0 0 18px #ff4d6d) saturate(1.7)}42%{transform:scale(1.1) rotate(6deg)}64%{transform:scale(1.24) rotate(-3deg)}}
#monster-art.dizzy{animation:mDizzy .72s ease-in-out}
@keyframes mDizzy{0%,100%{transform:translate(0,0) rotate(0)}18%{transform:translate(-8px,-4px) rotate(-12deg)}38%{transform:translate(8px,4px) rotate(14deg)}60%{transform:translate(-5px,5px) rotate(-9deg)}82%{transform:translate(4px,-3px) rotate(6deg)}}
/* crit — satisfying zoom-punch with a coloured glow bloom */
#monster-art.crit{animation:mCrit .6s cubic-bezier(.22,1,.36,1)}
@keyframes mCrit{0%{transform:scale(1)}
  22%{transform:scale(1.5) rotate(-5deg);filter:drop-shadow(0 0 20px var(--t-accent)) drop-shadow(0 0 8px #fff)}
  50%{transform:scale(1.06) rotate(3deg)}75%{transform:scale(1.14)}100%{transform:scale(1);filter:none}}
/* attack — anticipation then a smooth lunge toward the player */
#monster-art.attack{animation:mAttack .55s cubic-bezier(.5,0,.2,1)}
@keyframes mAttack{0%{transform:translate(0,0) scale(1)}
  22%{transform:translate(-7px,-7px) scale(.9,1.1)}
  52%{transform:translate(15px,15px) scale(1.28,.82);filter:drop-shadow(0 0 14px var(--bad))}
  100%{transform:translate(0,0) scale(1);filter:none}}
/* dead — bloom then dissolve away */
#monster-art.dead{animation:mDead .7s cubic-bezier(.4,0,.2,1) forwards}
@keyframes mDead{0%{transform:scale(1);opacity:1}
  28%{transform:scale(1.25);filter:drop-shadow(0 0 18px var(--t-accent)) brightness(1.5)}
  100%{transform:scale(.25) translateY(26px) rotate(20deg);opacity:0;filter:blur(5px)}}
/* spawn — materialise softly from a blur, gentle overshoot (no spin jank) */
#monster-art.spawn{animation:mSpawn .6s cubic-bezier(.22,1,.36,1)}
@keyframes mSpawn{0%{opacity:0;transform:translateY(-26px) scale(.45);filter:blur(4px)}
  55%{opacity:1;transform:translateY(0) scale(1.12);filter:blur(0)}
  78%{transform:scale(.96)}100%{transform:scale(1)}}
/* emoji burst over monster on hit/attack */
.burst{position:absolute;font-size:26px;pointer-events:none;z-index:4;
  animation:burst .5s ease-out forwards;text-shadow:0 2px 3px rgba(0,0,0,.35)}
@keyframes burst{0%{transform:scale(.3) rotate(-20deg);opacity:1}
  100%{transform:scale(1.7) translateY(-16px) rotate(25deg);opacity:0}}
#monster-info{flex:1;z-index:1;min-width:0}
#monster-name{color:#fff;font-weight:800;font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#monster-name .mtitle{display:none}
.hp-bar{position:relative;height:13px;background:rgba(0,0,0,.4);border-radius:7px;
  margin-top:4px;overflow:hidden;border:1px solid rgba(255,255,255,.15)}
#monster-hp{height:100%;width:100%;border-radius:7px;
  background:linear-gradient(90deg,#ff4d6d,#ff7eb3);transition:width .35s cubic-bezier(.2,.8,.2,1)}
#monster-hp-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
#hud-combo{flex:none;font-size:13px;font-weight:800;color:var(--sun);min-width:42px;text-align:right;
  text-shadow:0 1px 2px rgba(0,0,0,.5)}
.boss #monster-strip{border-color:#ff4d6d;
  box-shadow:0 0 0 1px rgba(255,77,109,.4),0 4px 0 #16101d,0 0 18px rgba(255,77,109,.4)}
.boss #monster-art{width:72px;height:72px}
.boss #monster-hp{background:linear-gradient(90deg,#b8002e,#ff4d6d,#ffb347)}

/* prominent monster dialogue — appears at top of the board, tail points up to the monster */
#monster-bubble{position:absolute;top:8px;left:50%;z-index:8;
  width:max-content;max-width:min(90%,380px);text-align:center;
  background:linear-gradient(180deg,#ffffff,#ffe6f0);color:#2b2030;
  font-family:"Baloo 2",sans-serif;line-height:1.25;
  padding:9px 15px;border-radius:15px;border:2px solid #ff9ec4;
  box-shadow:0 8px 20px rgba(0,0,0,.55),0 0 0 4px rgba(255,158,196,.18);
  opacity:0;transform:translate(-50%,-10px) scale(.8);transform-origin:50% 0;pointer-events:none;
  transition:opacity .2s,transform .25s cubic-bezier(.2,1.7,.4,1)}
#monster-bubble.show{opacity:1;transform:translate(-50%,0) scale(1)}
#monster-bubble .who{display:block;font-family:"Cinzel",serif;font-size:10.5px;font-weight:800;
  letter-spacing:1px;color:#c0397a;text-transform:uppercase;margin-bottom:1px}
#monster-bubble .line{font-size:14px;font-weight:800}
#monster-bubble.big .line{font-size:16.5px}
#monster-bubble::after{content:"";position:absolute;left:42px;bottom:100%;
  border:9px solid transparent;border-bottom-color:#ff9ec4}

/* claw-slash overlay when the monster hits you */
.claw{position:absolute;left:50%;top:42%;transform:translate(-130%,-140%) rotate(-35deg) scale(.6);
  font-size:54px;z-index:6;pointer-events:none;filter:drop-shadow(0 0 8px #ff4d6d);
  animation:clawSlash .4s ease-out forwards}
@keyframes clawSlash{0%{opacity:0;transform:translate(-130%,-140%) rotate(-35deg) scale(.4)}
  35%{opacity:1}100%{opacity:0;transform:translate(50%,60%) rotate(-35deg) scale(1.6)}}

#board-wrap.shake-big{animation:shakeBig .45s}
@keyframes shakeBig{0%,100%{transform:translate(0,0) rotate(0)}
  15%{transform:translate(-9px,3px) rotate(-1.5deg)}30%{transform:translate(9px,-3px) rotate(1.5deg)}
  45%{transform:translate(-7px,2px) rotate(-1deg)}60%{transform:translate(7px,-2px) rotate(1deg)}
  80%{transform:translate(-3px,1px)}}

/* ===== correct placement: forged blade thrust + shockwave ring + sparks ===== */
#board-fx{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:visible}
.floor-spawnfx{position:absolute;left:50%;top:50%;width:0;height:0;z-index:4;pointer-events:none}
.floor-spawnfx b{position:absolute;width:min(72vw,340px);aspect-ratio:1;margin:calc(min(72vw,340px)/-2);border-radius:50%;
  border:2px solid color-mix(in srgb,var(--t-accent) 72%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--t-accent) 55%,transparent);
  animation:spawnSeal .9s ease-out forwards}
.floor-spawnfx i{position:absolute;width:9px;height:9px;margin:-4px;border-radius:50%;background:var(--t-accent);
  box-shadow:0 0 12px var(--t-accent);animation:spawnBit .72s ease-out var(--t) forwards}
@keyframes spawnSeal{0%{opacity:0;transform:scale(.25) rotate(0)}35%{opacity:.9}100%{opacity:0;transform:scale(1.25) rotate(80deg)}}
@keyframes spawnBit{0%{opacity:0;transform:rotate(var(--a)) translateX(0) scale(.3)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(1.4)}}
.strike{position:absolute;width:0;height:0;pointer-events:none;z-index:7}
.strike .blade{position:absolute;left:-7px;top:-64px;width:14px;height:64px;transform-origin:50% 100%;overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#e8edf5 30%,#aab4c4 55%,#eef3fa 80%,#fff 100%);
  clip-path:polygon(50% 0,100% 16%,68% 100%,32% 100%,0 16%);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.9));opacity:0;
  animation:blade .42s cubic-bezier(.2,.9,.25,1) forwards}
.strike.big .blade{background:linear-gradient(180deg,#fff,#ffd1d8 50%,#ff5d7a 78%,#fff);filter:drop-shadow(0 0 11px #ff4d6d)}
@keyframes blade{0%{opacity:0;transform:translateY(34px) scaleY(.2)}
  35%{opacity:1;transform:translateY(0) scaleY(1.05)}
  68%{opacity:1;transform:translateY(-6px) scaleY(1)}
  100%{opacity:0;transform:translateY(-30px) scaleY(.92)}}
.strike .blade .gleam{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(255,255,255,.95) 50%,transparent 70%);
  transform:translateY(120%);animation:bgleam .42s ease-out .08s}
@keyframes bgleam{to{transform:translateY(-120%)}}
.strike .ring{position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px;border-radius:50%;
  border:3px solid var(--t-accent);opacity:.95;box-shadow:0 0 12px var(--t-accent);animation:ring .55s ease-out forwards}
.strike.big .ring{border-color:#ff7a90;box-shadow:0 0 16px #ff7a90}
@keyframes ring{0%{transform:scale(.2);opacity:1}100%{transform:scale(4.6);opacity:0}}
.strike .slash{position:absolute;left:-26px;top:-2px;width:52px;height:5px;border-radius:4px;
  background:linear-gradient(90deg,transparent,#fff,transparent);transform:rotate(-38deg) scaleX(0);
  filter:drop-shadow(0 0 5px #fff);animation:slashfx .3s ease-out forwards}
@keyframes slashfx{0%{transform:rotate(-38deg) scaleX(0);opacity:0}45%{opacity:1;transform:rotate(-38deg) scaleX(1.1)}100%{opacity:0;transform:rotate(-38deg) scaleX(1.3)}}
.strike .spk{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#fff;
  box-shadow:0 0 6px var(--t-accent);animation:spk .5s ease-out forwards}
.strike.big .spk{box-shadow:0 0 6px #ff5d7a}
@keyframes spk{0%{opacity:1;transform:rotate(var(--a)) translateX(2px) scale(1)}
  100%{opacity:0;transform:rotate(var(--a)) translateX(34px) scale(.3)}}
.strike.weapon{--fx-c:var(--t-accent)}
.strike.weapon .projectile{position:absolute;left:-18px;top:-18px;width:36px;height:36px;
  transform-origin:50% 50%;filter:drop-shadow(0 0 8px var(--fx-c));
  animation:weaponFly .52s cubic-bezier(.2,.85,.24,1) forwards}
.strike.weapon .projectile svg{width:100%;height:100%;display:block}
@keyframes weaponFly{0%{opacity:0;transform:translate(0,0) scale(.35) rotate(-35deg)}
  18%{opacity:1;transform:translate(0,0) scale(1.05) rotate(0)}
  78%{opacity:1;transform:translate(calc(var(--tx)*.94),calc(var(--ty)*.94)) scale(1.1) rotate(335deg)}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.3) rotate(390deg)}}
.strike.weapon .impact{position:absolute;left:var(--tx);top:var(--ty);width:46px;height:46px;margin:-23px;
  border-radius:50%;opacity:0;box-shadow:0 0 0 3px var(--fx-c),0 0 26px var(--fx-c);
  animation:weaponImpact .38s ease-out .34s forwards}
@keyframes weaponImpact{0%{opacity:0;transform:scale(.15)}35%{opacity:1;transform:scale(1.35)}100%{opacity:0;transform:scale(2.8)}}
.impact-pierce .impact{border-radius:2px;width:10px;height:52px;margin:-26px -5px;transform:rotate(8deg)}
.impact-cleave .impact{width:58px;height:12px;margin:-6px -29px;border-radius:10px;transform:rotate(-28deg)}
.impact-bolt .impact{clip-path:polygon(44% 0,72% 0,56% 38%,86% 38%,32% 100%,45% 55%,18% 55%)}
.impact-frost .impact{border-radius:8px;box-shadow:0 0 0 3px #d9f7ff,0 0 20px #a9d8ff}
.impact-flame .impact{border-radius:70% 45% 70% 45%;background:radial-gradient(circle,#ffe08a,#ff8f5a 55%,transparent 70%)}
.impact-star .impact,.impact-nova .impact{clip-path:polygon(50% 0,60% 35%,98% 35%,67% 56%,78% 94%,50% 70%,22% 94%,33% 56%,2% 35%,40% 35%)}
.impact-blast .impact{background:radial-gradient(circle,#fff 0 18%,var(--fx-c) 19% 48%,transparent 52%)}
.impact-vortex .impact{border-style:dashed;animation:weaponImpact .34s ease-out .36s forwards,spin .34s linear .36s}
@keyframes spin{to{rotate:180deg}}

/* ===== heart loss: shockwave + flying shards + shattering HUD heart ===== */
.heartburst{position:fixed;left:50%;top:33%;width:0;height:0;z-index:66;pointer-events:none}
.heartburst .core{position:absolute;left:0;top:0;font-size:84px;transform:translate(-50%,-50%) scale(.3);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));animation:hbcore .85s cubic-bezier(.3,1.3,.5,1) forwards}
@keyframes hbcore{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1.35) rotate(6deg)}
  45%{transform:translate(-50%,-50%) scale(1.1) rotate(-4deg)}
  100%{opacity:0;transform:translate(-50%,18%) scale(.95) rotate(10deg)}}
.heartburst .ring{position:absolute;left:0;top:0;width:56px;height:56px;margin:-28px;border-radius:50%;
  border:3px solid var(--bad);animation:hbring .6s ease-out forwards}
@keyframes hbring{0%{transform:scale(.2);opacity:.85}100%{transform:scale(4);opacity:0}}
.heartburst .shard{position:absolute;left:0;top:0;width:7px;height:11px;margin:-5px;border-radius:2px;
  background:linear-gradient(180deg,#ff8aa0,#c41733);animation:shard .7s ease-out forwards}
@keyframes shard{0%{opacity:1;transform:rotate(var(--a)) translateX(6px)}
  100%{opacity:0;transform:rotate(var(--a)) translateX(120px) rotate(220deg)}}
.hud-hearts span.break{animation:heartShatter .6s ease-out forwards}
@keyframes heartShatter{0%{transform:scale(1.5)}30%{transform:scale(1.8) rotate(-14deg);filter:drop-shadow(0 0 7px var(--bad))}
  100%{transform:scale(.4) rotate(28deg);filter:grayscale(1);opacity:.25}}

/* ===== monster strikes you: sleek triple claw slash over the board ===== */
.clawfx{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.clawfx i{position:absolute;top:-12%;width:6px;height:130%;border-radius:6px;
  background:linear-gradient(180deg,transparent,rgba(255,60,90,.95),transparent);
  filter:drop-shadow(0 0 8px #ff4d6d);transform-origin:50% 0;
  transform:rotate(22deg) scaleY(0);animation:claw .42s ease-out forwards}
.clawfx i:nth-child(1){left:20%}
.clawfx i:nth-child(2){left:46%;animation-delay:.05s}
.clawfx i:nth-child(3){left:72%;animation-delay:.1s}
@keyframes claw{0%{opacity:0;transform:rotate(22deg) translateY(-12%) scaleY(0)}
  45%{opacity:1;transform:rotate(22deg) translateY(0) scaleY(1)}
  100%{opacity:0;transform:rotate(22deg) translateY(14%) scaleY(1)}}

/* ===== "descend" prompt — slim flow pill, ZERO space when hidden ===== */
#descend{display:none;width:auto;max-width:94%;cursor:pointer;text-align:center;
  flex-direction:column;align-items:center;line-height:1.15;
  font-family:"Cinzel",serif;border:2px solid #ffd34d;border-radius:13px;
  padding:6px 18px;color:#fff;background:linear-gradient(180deg,#4a2a16,#2a1408);
  box-shadow:0 4px 0 #160a04,0 0 16px rgba(255,200,90,.55);flex:none}
#descend.show{display:inline-flex;animation:descIn .35s cubic-bezier(.2,1.6,.4,1),descGlow 1.6s ease-in-out infinite .35s}
#descend:active{transform:translateY(2px);box-shadow:0 1px 0 #160a04}
#descend .dt{font-size:13px;font-weight:800;color:#ffd98a;white-space:nowrap}
#descend .ds{font-size:12px;font-weight:700;font-family:"Baloo 2",sans-serif;white-space:nowrap}
#descend .ds small{opacity:.7;font-size:10px}
@keyframes descIn{0%{opacity:0;transform:translateY(10px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes descGlow{0%,100%{box-shadow:0 4px 0 #160a04,0 0 12px rgba(255,200,90,.45)}
  50%{box-shadow:0 4px 0 #160a04,0 0 22px rgba(255,200,90,.9)}}

/* ---------- board (carved stone slab) ---------- */
#board-wrap{position:relative;width:100%;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
#board-wrap::before{content:"";position:absolute;width:min(102vw,500px,calc(100dvh - 282px));aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:
    repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--t-accent) 35%,transparent) 0 3deg,transparent 3deg 15deg),
    radial-gradient(circle,transparent 0 58%,color-mix(in srgb,var(--t-accent) 24%,transparent) 59% 60%,transparent 61% 100%);
  opacity:.35;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--t-accent) 45%,transparent));animation:yantraTurn 36s linear infinite}
#board-wrap::after{content:"";position:absolute;width:min(100vw,492px,calc(100dvh - 290px));aspect-ratio:1;pointer-events:none;opacity:.42;
  background:
    linear-gradient(var(--t-accent),var(--t-accent)) 50% 0/56% 3px no-repeat,
    linear-gradient(135deg,transparent 0 43%,color-mix(in srgb,var(--t-accent) 55%,transparent) 44% 47%,transparent 48%) 50% -2%/64% 18% no-repeat,
    linear-gradient(90deg,color-mix(in srgb,var(--t-accent) 45%,transparent),color-mix(in srgb,var(--t-accent) 18%,transparent)) 5% 14%/4px 72% no-repeat,
    linear-gradient(90deg,color-mix(in srgb,var(--t-accent) 18%,transparent),color-mix(in srgb,var(--t-accent) 45%,transparent)) 95% 14%/4px 72% no-repeat,
    radial-gradient(circle at 5% 88%,color-mix(in srgb,var(--t-accent) 55%,transparent) 0 5px,transparent 6px),
    radial-gradient(circle at 95% 88%,color-mix(in srgb,var(--t-accent) 55%,transparent) 0 5px,transparent 6px);
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--t-accent) 38%,transparent))}
@keyframes yantraTurn{to{rotate:360deg}}
/* explicit square: smaller of width budget and height budget — never collapses */
#board{
  --bsize:min(95vw, 460px, calc(100dvh - 318px));
  display:grid;gap:3px;
  position:relative;
  background:
    linear-gradient(45deg,transparent 0 47%,color-mix(in srgb,var(--t-accent) 18%,transparent) 48% 52%,transparent 53%),
    linear-gradient(-45deg,transparent 0 47%,color-mix(in srgb,var(--t-accent) 14%,transparent) 48% 52%,transparent 53%),
    radial-gradient(circle at 50% 50%,transparent 0 42%,color-mix(in srgb,var(--t-accent) 24%,transparent) 43% 44%,transparent 45%),
    linear-gradient(160deg,var(--t-board1),var(--t-board2));
  padding:7px;border-radius:12px;
  box-shadow:0 0 0 2px #1a120d,0 8px 0 #120b08,0 10px 22px rgba(0,0,0,.6),
             inset 0 0 24px rgba(0,0,0,.5);
  width:var(--bsize);height:var(--bsize);
  touch-action:manipulation;
  z-index:1;
}
/* empty cell = a polished bevelled socket carved into the slab */
.cell{
  background:
    radial-gradient(circle at 50% 8%,color-mix(in srgb,var(--t-accent) 15%,transparent),transparent 24%),
    radial-gradient(115% 80% at 30% 18%, rgba(255,255,255,.14), transparent 55%),
    radial-gradient(130% 120% at 50% 125%, rgba(0,0,0,.42), transparent 62%),
    linear-gradient(158deg, var(--t-cell1), var(--t-cell2));
  display:flex;align-items:center;justify-content:center;
  font-family:"Cinzel Decorative","Cinzel",serif;
  font-size:clamp(18px,6.2vw,32px);font-weight:900;
  position:relative;z-index:1;border-radius:7px;cursor:pointer;overflow:hidden;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.20),
    inset 0 -3px 7px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(0,0,0,.28);
}
/* clue cell = a deeper recessed socket (the number sits sunken in stone) */
.cell.given{
  background:
    radial-gradient(120% 120% at 50% 16%, rgba(0,0,0,.45), transparent 60%),
    linear-gradient(158deg, var(--t-given1), var(--t-given2));
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.7),
    inset 0 -1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(0,0,0,.35);
}
.cell.box-0{--box-c:var(--t-accent)}
.cell.box-1{--box-c:#ff7eb3}
.cell.box-2{--box-c:#4db8ff}
.cell.box-3{--box-c:#ffe08a}
.cell.box-4{--box-c:#c98aff}
.cell.box-5{--box-c:#55e6a5}
.cell.box-6{--box-c:#ff4d6d}
.cell.box-7{--box-c:#39d6d6}
.cell.box-8{--box-c:#f7b955}
.cell[class*="box-"]{
  background:
    radial-gradient(115% 80% at 30% 18%, color-mix(in srgb,var(--box-c) 38%,transparent), transparent 58%),
    radial-gradient(130% 120% at 50% 125%, rgba(0,0,0,.50), transparent 62%),
    linear-gradient(158deg,color-mix(in srgb,var(--box-c) 54%,var(--t-cell1)),color-mix(in srgb,var(--box-c) 34%,var(--t-cell2)));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--box-c) 62%,rgba(255,255,255,.08)),
    inset 0 1.5px 0 rgba(255,255,255,.18),
    inset 0 -3px 7px rgba(0,0,0,.52);
}
.cell.given[class*="box-"]{
  background:
    radial-gradient(120% 120% at 50% 16%, rgba(0,0,0,.5), transparent 60%),
    linear-gradient(158deg,color-mix(in srgb,var(--box-c) 38%,var(--t-given1)),color-mix(in srgb,var(--box-c) 24%,var(--t-given2)));
}
.cell.sel{outline:3px solid var(--t-sel);outline-offset:-3px;z-index:3;
  box-shadow:inset 0 0 16px color-mix(in srgb,var(--t-sel) 55%,transparent),0 0 14px color-mix(in srgb,var(--t-sel) 65%,transparent)}
.cell.peer{filter:brightness(1.18)}
.cell.same{outline:3px solid var(--t-accent);outline-offset:-5px;filter:brightness(1.28) saturate(1.22);z-index:2}
.cell.sel{outline:3px solid var(--t-sel);outline-offset:-3px;z-index:3}
/* placement: number STAMPS down (weighty spring) + metallic gleam sweep */
.cell.pop{animation:stamp .42s cubic-bezier(.34,1.7,.45,1)}
@keyframes stamp{0%{transform:scale(2.6) rotate(-6deg);opacity:0}26%{opacity:1}66%{transform:scale(.86)}100%{transform:scale(1)}}
.cell.pop::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.95) 50%,transparent 64%);
  transform:translateX(-130%);animation:gleam .55s ease-out .04s}
@keyframes gleam{to{transform:translateX(130%)}}
/* prominent themed shock-ring bursting from the placed cell */
.cell.pop::before{content:"";position:absolute;inset:0;border-radius:7px;pointer-events:none;z-index:2;
  animation:cellPulse .55s ease-out}
@keyframes cellPulse{0%{box-shadow:0 0 0 2px var(--t-numglow),0 0 16px 5px var(--t-numglow);opacity:1}
  100%{box-shadow:0 0 0 13px transparent,0 0 22px 10px transparent;opacity:0}}
/* screen zoom-punch for big hits */
#app.punch{animation:appPunch .3s ease}
@keyframes appPunch{0%{transform:scale(1)}32%{transform:scale(1.04)}100%{transform:scale(1)}}
.cell.bad{animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
/* ===== NUMBERS — weapon glyphs that keep the digit readable ===== */
.cell .num,.np-btn .num{
  --num-c:#ffff4d;--num-d:#2a182f;
  position:relative;z-index:1;display:inline-grid;place-items:center;
  width:1.28em;height:1.28em;font-family:"Cinzel Decorative","Cinzel",serif;
  font-weight:900;line-height:1;color:#ffff99;-webkit-text-fill-color:#ffff99;
  -webkit-text-stroke:1.15px rgba(24,12,20,.92);text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 8px color-mix(in srgb,var(--num-c) 70%,transparent),0 0 14px rgba(255,255,77,.4);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.48)) drop-shadow(0 0 6px rgba(255,255,77,.5))}
.cell .num::before,.np-btn .num::before{
  content:"";position:absolute;inset:-.32em;z-index:-2;border:1px solid color-mix(in srgb,var(--num-c) 62%,rgba(255,255,255,.15));
  background:linear-gradient(160deg,color-mix(in srgb,var(--num-c) 24%,#211827),rgba(18,12,22,.82) 74%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -2px 5px rgba(0,0,0,.42),0 0 12px color-mix(in srgb,var(--num-c) 60%,transparent);
  opacity:.85}
.cell .num::after,.np-btn .num::after{
  content:"";position:absolute;z-index:-1;background:var(--num-c);box-shadow:0 0 10px color-mix(in srgb,var(--num-c) 85%,transparent),0 0 16px rgba(255,255,77,.4);opacity:.60}
.num.n-1{--num-c:#ff7eb3;--num-d:#4a1730}.num.n-1::before{clip-path:polygon(50% 0,88% 18%,76% 100%,24% 100%,12% 18%)}.num.n-1::after{left:49%;top:-.44em;width:.11em;height:2.05em;border-radius:9px;clip-path:polygon(50% 0,100% 18%,62% 100%,38% 100%,0 18%)}
.num.n-2{--num-c:#9ee7c9;--num-d:#173a31}.num.n-2::before{border-radius:48% 52% 44% 56%;transform:rotate(-8deg)}.num.n-2::after{left:.02em;right:.02em;top:.05em;height:.14em;border-radius:99px;box-shadow:0 .58em 0 var(--num-c),0 0 5px color-mix(in srgb,var(--num-c) 70%,transparent);transform:rotate(-28deg)}
.num.n-3{--num-c:#ffe08a;--num-d:#443113}.num.n-3::before{clip-path:polygon(50% 0,96% 28%,84% 100%,16% 100%,4% 28%)}.num.n-3::after{left:50%;top:-.32em;width:.42em;height:1.72em;clip-path:polygon(42% 0,78% 0,58% 42%,90% 42%,20% 100%,42% 55%,10% 55%);transform:translateX(-50%)}
.num.n-4{--num-c:#a9d8ff;--num-d:#12324a}.num.n-4::before{border-radius:7px;transform:rotate(45deg) scale(.82)}.num.n-4::after{left:-.02em;right:-.02em;top:.42em;height:.3em;border-radius:4px;clip-path:polygon(0 18%,70% 18%,100% 50%,70% 82%,0 82%);transform:rotate(-8deg)}
.num.n-5{--num-c:#ff8f5a;--num-d:#4a2115}.num.n-5::before{clip-path:polygon(50% 0,90% 22%,78% 92%,50% 100%,22% 92%,10% 22%)}.num.n-5::after{left:.18em;top:-.2em;width:.92em;height:1.38em;clip-path:polygon(48% 0,63% 0,63% 40%,100% 28%,78% 70%,55% 100%,47% 52%,15% 72%,29% 35%,48% 38%)}
.num.n-6{--num-c:#c9b6ff;--num-d:#2c2254}.num.n-6::before{border-radius:50%;transform:scale(.96)}.num.n-6::after{left:-.02em;top:-.02em;width:1.32em;height:1.32em;border-radius:50%;background:conic-gradient(from 25deg,transparent 0 20%,var(--num-c) 21% 30%,transparent 31% 52%,var(--num-c) 53% 62%,transparent 63% 84%,var(--num-c) 85% 96%,transparent 97% 100%)}
.num.n-7{--num-c:#ff4d6d;--num-d:#4d1120}.num.n-7::before{clip-path:polygon(50% 0,96% 50%,50% 100%,4% 50%)}.num.n-7::after{left:.02em;top:.53em;width:1.22em;height:.32em;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transform:rotate(-30deg)}
.num.n-8{--num-c:#7ad6ff;--num-d:#14354b}.num.n-8::before{border-radius:42% 58% 42% 58%;transform:rotate(18deg)}.num.n-8::after{left:.01em;top:.1em;width:1.22em;height:1.02em;border-radius:50%;border:.11em dashed var(--num-c);background:transparent;box-shadow:0 0 5px color-mix(in srgb,var(--num-c) 70%,transparent);animation:none}
.num.n-9{--num-c:#ffd34d;--num-d:#4d3510}.num.n-9::before{clip-path:polygon(50% 0,62% 32%,96% 32%,68% 53%,80% 90%,50% 68%,20% 90%,32% 53%,4% 32%,38% 32%)}.num.n-9::after{left:50%;top:50%;width:1.35em;height:1.35em;clip-path:polygon(50% 0,58% 38%,96% 18%,65% 50%,96% 82%,58% 62%,50% 100%,42% 62%,4% 82%,35% 50%,4% 18%,42% 38%);transform:translate(-50%,-50%) scale(.72)}
/* clues are plain engraved steel, not weapon tokens */
.cell.given .num{
  width:auto;height:auto;color:#dbe3ee;-webkit-text-fill-color:#dbe3ee;-webkit-text-stroke:1px rgba(0,0,0,.65);
  text-shadow:0 -1px 0 rgba(0,0,0,.8),0 1px 1px rgba(255,255,255,.14);filter:none}
.cell.given .num::before,.cell.given .num::after{display:none}
/* placement stamp must win over other cell rules (id raises specificity) */
#board .cell.pop{animation:stamp .38s cubic-bezier(.34,1.56,.5,1)}
/* thick box dividers = mortar seams */
.cell.br{box-shadow:inset -3px 0 0 var(--t-seam),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 4px rgba(0,0,0,.45)}
.cell.bb{box-shadow:inset 0 -3px 0 var(--t-seam),inset 0 1px 0 rgba(255,255,255,.12)}
.cell.br.bb{box-shadow:inset -3px 0 0 var(--t-seam),inset 0 -3px 0 var(--t-seam)}
/* notes */
.notes{position:absolute;inset:0;display:grid;font-size:9px;color:#b9a98f;
  font-family:"Baloo 2",sans-serif;font-weight:700;padding:2px;pointer-events:none}
.notes span{display:flex;align-items:center;justify-content:center}
/* cage */
.cage-sum{position:absolute;top:1px;left:3px;font-size:9px;font-weight:900;color:#ffe08a;opacity:1;
  font-family:"Baloo 2",sans-serif;text-shadow:0 1px 2px #000,0 0 5px rgba(255,224,138,.55)}
.cell.cage{box-shadow:inset 0 0 0 2px rgba(255,224,138,.42),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 4px rgba(0,0,0,.45)}

/* ---------- relic quickbar: fixed-height bag + all owned powers ---------- */
#relic-strip{display:flex;gap:5px;width:100%;align-items:center;justify-content:safe center;
  overflow-x:auto;overflow-y:hidden;padding:1px 4px;height:38px;flex:none;scrollbar-width:none;
  background:
    repeating-linear-gradient(90deg,transparent 0 18px,rgba(247,185,85,.12) 18px 20px,transparent 20px 38px),
    linear-gradient(90deg,transparent,rgba(247,185,85,.08),transparent);
  border-radius:12px}
#relic-strip::-webkit-scrollbar{display:none}
#relic-strip.empty{display:none}
.relic,.relic-bag{position:relative;flex:none;width:34px;height:34px;border-radius:10px;
  border:1px solid rgba(255,220,170,.3);
  background:
    radial-gradient(circle at 50% 25%,rgba(255,224,138,.16),transparent 32%),
    radial-gradient(circle at 50% 35%,#5a4636,#2c211a);
  font-size:18px;box-shadow:0 3px 0 #16101d;cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;transition:transform .08s}
.relic-bag{width:auto;min-width:48px;padding:0 9px;font:900 13px "Baloo 2",sans-serif;background:linear-gradient(180deg,#3a2c48,#241a30)}
.relic:active,.relic-bag:active{transform:translateY(2px);box-shadow:0 1px 0 #16101d}
.relic.ready{border-color:#ffd34d;box-shadow:0 3px 0 #16101d,0 0 10px rgba(255,200,90,.75);
  animation:relicPulse 1.4s ease-in-out infinite}
@keyframes relicPulse{0%,100%{box-shadow:0 3px 0 #16101d,0 0 7px rgba(255,200,90,.5)}
  50%{box-shadow:0 3px 0 #16101d,0 0 16px rgba(255,200,90,.95)}}
.relic.passive{width:28px;height:28px;border-radius:8px;font-size:16px;box-shadow:0 2px 0 #16101d;
  border-color:rgba(160,200,255,.3);background:radial-gradient(circle at 50% 35%,#3a3550,#241f33);opacity:.9}
.relic.disabled{opacity:.4;filter:grayscale(.4)}
.relic .cost{position:absolute;bottom:-5px;right:-5px;background:linear-gradient(180deg,#b07bff,#7d4fd6);color:#fff;
  font-size:9px;font-weight:800;border-radius:8px;padding:0 5px;box-shadow:0 2px 0 rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.3)}
.relic .uses{display:none}

/* ---------- numpad (bright weapon keys) ---------- */
#numpad{display:grid;gap:7px;width:100%;padding:5px 4px 8px;flex:none;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,126,179,.42),transparent 28%),
    radial-gradient(circle at 55% 6%,rgba(255,224,138,.45),transparent 26%),
    radial-gradient(circle at 86% 80%,rgba(122,214,255,.36),transparent 31%),
    linear-gradient(90deg,rgba(255,126,179,.28),rgba(158,231,201,.24),rgba(255,211,77,.28),rgba(201,182,255,.26));
  border-radius:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 22px rgba(255,211,77,.18)}
#numpad::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:linear-gradient(110deg,transparent 0 28%,rgba(255,255,255,.5) 42%,transparent 56% 100%);
  transform:translateX(-120%);animation:numpadSweep 2.8s ease-in-out infinite}
#numpad::after{content:"";position:absolute;inset:2px;border-radius:12px;pointer-events:none;
  border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 0 18px rgba(255,255,255,.1)}
@keyframes numpadSweep{0%,38%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}
.np-btn{--key-c:#ffd34d;--key-d:#2a182f;font-family:"Cinzel Decorative","Cinzel",serif;border:1px solid color-mix(in srgb,var(--key-c) 58%,rgba(255,255,255,.35));
  border-radius:12px;background:
    radial-gradient(circle at 50% 12%,rgba(255,255,255,.42),transparent 27%),
    radial-gradient(circle at 50% 82%,color-mix(in srgb,var(--key-c) 60%,transparent),transparent 48%),
    linear-gradient(180deg,color-mix(in srgb,var(--key-c) 72%,#fff),color-mix(in srgb,var(--key-c) 34%,var(--key-d)) 52%,var(--key-d));
  font-size:26px;font-weight:900;color:#ffff4d;
  text-shadow:0 1px 0 #2a1a0c,0 -1px 0 rgba(255,247,214,.5),0 2px 3px rgba(0,0,0,.5),0 0 10px color-mix(in srgb,var(--key-c) 80%,transparent);
  padding:13px 0;box-shadow:0 4px 0 color-mix(in srgb,var(--key-d) 85%,#000),inset 0 1px 0 rgba(255,255,255,.42),0 0 15px color-mix(in srgb,var(--key-c) 64%,transparent);cursor:pointer;position:relative;overflow:hidden;z-index:1;
  transition:transform .08s,filter .15s,box-shadow .15s}
.np-btn::before{content:"";position:absolute;inset:-30%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--key-c) 55%,transparent),transparent 42%);
  opacity:.45;animation:keyHalo 2.4s linear infinite}
.np-btn::after{content:"";position:absolute;left:-30%;right:-30%;top:-120%;height:90%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.82),transparent);transform:rotate(20deg);animation:keyGleam 2.2s ease-in-out infinite}
@keyframes keyHalo{to{rotate:360deg}}
@keyframes keyGleam{0%,44%{translate:-70% 0;opacity:0}60%{opacity:.8}100%{translate:120% 0;opacity:0}}
.np-btn[data-n="1"]{--key-c:#ff7eb3;--key-d:#4a1730}.np-btn[data-n="2"]{--key-c:#9ee7c9;--key-d:#173a31}
.np-btn[data-n="3"]{--key-c:#ffe08a;--key-d:#443113}.np-btn[data-n="4"]{--key-c:#7ad6ff;--key-d:#12324a}
.np-btn[data-n="5"]{--key-c:#ff8f5a;--key-d:#4a2115}.np-btn[data-n="6"]{--key-c:#c9b6ff;--key-d:#2c2254}
.np-btn[data-n="7"]{--key-c:#ff4d6d;--key-d:#4d1120}.np-btn[data-n="8"]{--key-c:#38bdf8;--key-d:#14354b}
.np-btn[data-n="9"]{--key-c:#ffd34d;--key-d:#4d3510}
.np-btn .num{font-size:24px}
.np-btn .num::before{inset:-.16em}
.np-btn:hover{filter:saturate(1.18) brightness(1.08)}
.np-btn:active{transform:translateY(3px) scale(.98);box-shadow:0 1px 0 color-mix(in srgb,var(--key-d) 85%,#000),0 0 20px color-mix(in srgb,var(--key-c) 80%,transparent)}
.np-btn .left{position:absolute;bottom:2px;right:6px;font-size:10px;color:#fff7d6;font-weight:800;font-family:"Baloo 2",sans-serif;text-shadow:0 1px 2px #000}
.np-btn.done{opacity:.42;filter:saturate(.55);animation:keyDone .8s ease-out}
@keyframes keyDone{0%{transform:scale(1);filter:saturate(1.5) brightness(1.3)}45%{transform:scale(1.08)}100%{transform:scale(1);filter:saturate(.55)}}
.np-btn.tool{background:linear-gradient(180deg,#5a3550,#3a2034);font-size:20px;color:#ffd6e7}
.np-btn.tool.on{background:linear-gradient(180deg,#ff8fb8,#e0467f);color:#fff;box-shadow:0 0 12px rgba(255,120,170,.7),0 4px 0 #160f08}

/* ---------- overlay/modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(10,6,14,.7);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.overlay.show{display:flex}
.modal{background:
  radial-gradient(circle at 50% -10%,color-mix(in srgb,var(--t-accent) 25%,transparent),transparent 36%),
  linear-gradient(180deg,#2d2137,#1c1428);
  border:1px solid rgba(255,180,120,.3);border-radius:22px;padding:22px;width:100%;max-width:440px;
  box-shadow:0 14px 0 #100a16,0 16px 30px rgba(0,0,0,.6);text-align:center;max-height:88vh;overflow:auto;color:#e8dcef}
.modal h2{font-family:"Cinzel Decorative","Cinzel",serif;color:#f7b955;font-size:26px;margin-bottom:6px;
  text-shadow:0 2px 4px rgba(0,0,0,.5)}
.modal p{color:#c9b8d4;margin-bottom:14px;font-size:15px;line-height:1.5;white-space:pre-line}
.modal label{display:block;text-align:left;color:#f3e8df;font-weight:800;font-size:13px;margin:8px 0 4px}
.modal input{width:100%;border:1px solid rgba(255,220,170,.26);border-radius:10px;background:#160f20;color:#fff;
  padding:11px 12px;font:700 15px "Baloo 2",system-ui,sans-serif;outline:none}
.modal input:focus{border-color:#f7b955;box-shadow:0 0 0 2px rgba(247,185,85,.18)}
.modal .field-note{color:#9f8dad;font-size:12px;text-align:left;margin:6px 0 10px}
.modal .auth-error{min-height:18px;color:#ff9eb1;font-size:13px;font-weight:800;margin:4px 0 8px}
.leader-row{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;text-align:left;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);color:#f3e8df;font-weight:800}
.leader-row span{color:#c9b8d4;font-size:12px;font-weight:700}
.reward-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:8px 0 14px}
.reward-card{background:linear-gradient(180deg,#3a2c48,#271d33);border-radius:16px;padding:14px;display:flex;gap:12px;align-items:center;
  text-align:left;cursor:pointer;box-shadow:0 4px 0 #16101d;border:2px solid rgba(255,180,120,.25);transition:transform .08s;color:#e8dcef}
.reward-card:active{transform:scale(.97)}
.reward-card.disabled{opacity:.48;filter:grayscale(.35)}
.reward-card .ico{font-size:32px;flex:none;width:44px;text-align:center}
.reward-card .rt{font-weight:800;font-size:16px;color:#fff}
.reward-card .rd{font-size:13px;color:#b6a6c4}
.modal .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.coin-line{font-weight:800;color:#f7b955;margin-bottom:10px}

/* ---------- confetti ---------- */
#dmg-flash{position:fixed;inset:0;pointer-events:none;z-index:64;opacity:0;
  background:radial-gradient(circle at 50% 65%,transparent 38%,rgba(255,77,109,.55))}
#dmg-flash.show{animation:dflash .42s ease-out}
@keyframes dflash{0%{opacity:1}100%{opacity:0}}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti-bit{position:absolute;width:10px;height:14px;border-radius:3px;top:-20px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

.descent-fx{position:fixed;inset:0;z-index:90;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,211,77,.26),transparent 26%),
    radial-gradient(circle at 50% 105%,rgba(160,80,30,.35),transparent 32%),
    rgba(8,5,12,.94);
  animation:descFade .72s ease forwards;pointer-events:none}
.descent-fx .shaft{position:absolute;left:50%;top:-20%;width:34%;height:150%;transform:translateX(-50%);
  background:
    repeating-linear-gradient(180deg,rgba(255,211,77,.46) 0 10px,transparent 10px 24px),
    linear-gradient(90deg,transparent,rgba(255,224,138,.22),transparent);
  filter:drop-shadow(0 0 20px var(--t-accent));animation:shaftFall .72s linear forwards}
.descent-fx .mandala-ring{position:absolute;width:min(84vw,430px);aspect-ratio:1;border-radius:50%;opacity:.72;
  border:2px solid color-mix(in srgb,var(--t-accent) 70%,transparent);
  background:repeating-conic-gradient(from 0deg,transparent 0 10deg,rgba(255,211,77,.28) 10deg 12deg,transparent 12deg 20deg);
  filter:drop-shadow(0 0 22px color-mix(in srgb,var(--t-accent) 65%,transparent));animation:ringDesc .72s ease forwards}
.descent-fx .mandala-ring.r2{width:min(58vw,290px);animation-direction:reverse;border-style:dashed}
.descent-fx .pillar{position:absolute;top:0;width:54px;height:100%;opacity:.42;
  background:repeating-linear-gradient(180deg,rgba(255,224,138,.24) 0 18px,rgba(70,39,15,.24) 18px 42px)}
.descent-fx .pillar.left{left:8%}.descent-fx .pillar.right{right:8%}
.descent-fx .temple-roof{position:absolute;top:7%;left:50%;width:min(84vw,520px);height:96px;transform:translateX(-50%);
  background:
    linear-gradient(135deg,transparent 0 46%,rgba(255,211,77,.55) 47% 51%,transparent 52%) 0 0/50% 100% no-repeat,
    linear-gradient(225deg,transparent 0 46%,rgba(255,211,77,.55) 47% 51%,transparent 52%) 100% 0/50% 100% no-repeat,
    linear-gradient(90deg,transparent 0 8%,rgba(255,224,138,.42) 8% 92%,transparent 92%) 50% 78%/100% 18px no-repeat;
  filter:drop-shadow(0 0 16px rgba(255,211,77,.45));animation:roofFall .72s ease forwards}
.descent-fx .statue{position:absolute;bottom:16%;width:78px;height:170px;opacity:.68;
  background:
    radial-gradient(circle at 50% 18%,rgba(255,224,138,.75) 0 18px,transparent 19px),
    linear-gradient(90deg,transparent 0 18%,rgba(255,224,138,.45) 18% 82%,transparent 82%) 50% 36%/100% 38px no-repeat,
    linear-gradient(150deg,transparent 0 36%,rgba(255,224,138,.38) 37% 58%,transparent 59%) 10% 48%/58px 74px no-repeat,
    linear-gradient(210deg,transparent 0 36%,rgba(255,224,138,.38) 37% 58%,transparent 59%) 90% 48%/58px 74px no-repeat,
    linear-gradient(180deg,rgba(255,224,138,.45),rgba(92,52,18,.38)) 50% 72%/50px 82px no-repeat;
  border-bottom:8px solid rgba(255,224,138,.45);filter:drop-shadow(0 0 15px rgba(255,211,77,.35));animation:statueSink .72s ease forwards}
.descent-fx .statue.left{left:11%}.descent-fx .statue.right{right:11%;transform:scaleX(-1)}
.descent-fx .statue i{position:absolute;left:50%;top:23px;width:38px;height:38px;margin-left:-19px;border:2px solid rgba(255,224,138,.65);border-radius:50%;box-shadow:0 0 12px rgba(255,211,77,.45)}
.descent-fx .diya{position:absolute;bottom:22%;width:18px;height:14px;border-radius:0 0 14px 14px;background:#b66a21;box-shadow:0 0 18px #ffd34d;animation:diyaFloat .72s ease forwards}
.descent-fx .diya::before{content:"";position:absolute;left:6px;top:-20px;width:8px;height:24px;border-radius:50% 50% 45% 45%;background:linear-gradient(#fff0b8,#ff9b2f 70%,transparent)}
.descent-fx .diya.d1{left:28%}.descent-fx .diya.d2{right:28%;animation-delay:.06s}
.descent-fx .lotus{position:absolute;bottom:8%;width:72px;height:38px;opacity:.75;background:
  radial-gradient(ellipse at 50% 100%,rgba(255,126,179,.75) 0 42%,transparent 43%),
  radial-gradient(ellipse at 30% 100%,rgba(255,211,77,.55) 0 34%,transparent 35%),
  radial-gradient(ellipse at 70% 100%,rgba(255,211,77,.55) 0 34%,transparent 35%);
  animation:lotusDrift .72s ease forwards}
.descent-fx .lotus.l1{left:18%}.descent-fx .lotus.l2{right:18%;transform:scaleX(-1)}
.descent-fx .step{position:absolute;left:50%;width:220px;height:24px;border-radius:50%;transform:translateX(-50%);
  border:1px solid rgba(255,224,138,.42);background:rgba(90,54,20,.34);animation:stepFall .72s ease forwards}
.descent-fx .step.s1{bottom:18%;animation-delay:0s}.descent-fx .step.s2{bottom:30%;width:170px;animation-delay:.05s}.descent-fx .step.s3{bottom:42%;width:120px;animation-delay:.1s}
.descent-fx .glyph{font:900 78px "Cinzel Decorative",serif;color:#ffd34d;text-shadow:0 0 18px #ffd34d;
  animation:glyphDrop .72s cubic-bezier(.2,1.4,.4,1) forwards;z-index:2}
.descent-fx .caption{position:absolute;bottom:12%;font:900 18px "Cinzel",serif;color:#fff0b8;letter-spacing:1px;text-transform:uppercase;text-shadow:0 0 10px #000}
@keyframes shaftFall{to{transform:translateX(-50%) translateY(35%)}}
@keyframes glyphDrop{0%{transform:translateY(-80px) scale(.7);opacity:0}45%{opacity:1}100%{transform:translateY(110px) scale(1.25);opacity:0}}
@keyframes ringDesc{0%{transform:scale(.65) rotate(0);opacity:0}35%{opacity:.8}100%{transform:scale(1.25) rotate(65deg);opacity:0}}
@keyframes stepFall{0%{transform:translate(-50%,-70px) scale(.65);opacity:0}35%{opacity:1}100%{transform:translate(-50%,70px) scale(1.18);opacity:0}}
@keyframes roofFall{0%{transform:translate(-50%,-90px);opacity:0}35%{opacity:.9}100%{transform:translate(-50%,36px);opacity:0}}
@keyframes statueSink{0%{translate:0 -40px;opacity:0}32%{opacity:.72}100%{translate:0 76px;opacity:0}}
@keyframes diyaFloat{0%{translate:0 -20px;opacity:0}35%{opacity:1}100%{translate:0 -80px;opacity:0}}
@keyframes lotusDrift{0%{translate:0 24px;opacity:0}35%{opacity:.8}100%{translate:0 -40px;opacity:0}}
@keyframes descFade{0%{opacity:0}15%,78%{opacity:1}100%{opacity:0}}

.float-txt{position:absolute;font-weight:900;font-size:24px;pointer-events:none;
  font-family:"Cinzel",serif;-webkit-text-stroke:.6px rgba(0,0,0,.5);
  animation:floatUp 1s ease-out forwards;z-index:5;text-shadow:0 1px 2px rgba(0,0,0,.15)}
@keyframes floatUp{0%{opacity:0;transform:translateY(8px) scale(.5)}
  16%{opacity:1;transform:translateY(0) scale(1.2)}34%{transform:scale(1)}
  100%{opacity:0;transform:translateY(-56px) scale(1)}}

/* ---------- Sudhbai Crossword: mobile-first play surface ---------- */
.cw-title-screen,.cw-screen{
  color:#172033;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),transparent 32%),
    linear-gradient(180deg,#35c8d5 0%,#7bd9c0 54%,#f4dda0 100%)}
.cw-sun{margin-top:8vh;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,#fff8d2,#ffd45f 68%,#e89138);color:#30224f;
  font:900 34px "Cinzel",serif;box-shadow:0 10px 0 rgba(20,70,80,.16),0 0 34px rgba(255,238,130,.72)}
.cw-screen.active{
  display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto auto;
  height:100dvh;padding:8px 10px calc(10px + env(safe-area-inset-bottom));gap:8px;align-items:stretch;position:relative}
.cw-hud{display:grid;grid-template-columns:38px 1fr auto auto;align-items:center;gap:8px;
  min-height:48px;padding:6px 8px;border-radius:12px;background:#154557;color:#fff;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 4px 0 rgba(23,51,58,.24)}
.cw-hud b{display:block;font-family:"Cinzel",serif;font-size:13px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-hud span{display:block;color:#c8f7e5;font-size:10px;font-weight:900;text-transform:uppercase}
#cw-lives{color:#ffdce5;font-weight:900;letter-spacing:1px;white-space:nowrap}
#cw-score{font-weight:900;color:#ffe680;white-space:nowrap}
.cw-scene{position:absolute;inset:0;z-index:-1;border-radius:0;overflow:hidden;pointer-events:none}
.cw-scene::after{content:"";position:absolute;inset:34% 0 0;background:linear-gradient(180deg,transparent,rgba(244,221,160,.92))}
.cw-moon{position:absolute;right:10%;top:72px;width:44px;height:44px;border-radius:50%;background:#fff7ce;
  box-shadow:0 0 20px rgba(255,255,255,.78)}
.cw-mountains{position:absolute;left:0;right:0;bottom:38%;height:130px;background:
  linear-gradient(135deg,transparent 0 40%,rgba(61,111,115,.45) 41% 61%,transparent 62%) 0 24px/180px 120px repeat-x,
  linear-gradient(155deg,transparent 0 43%,rgba(119,158,128,.38) 44% 64%,transparent 65%) 50px 0/210px 130px repeat-x}
.cw-yogi{position:absolute;left:18px;top:68px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#ffe680,#ffb23e);color:#35255a;font:900 14px "Cinzel",serif;
  box-shadow:0 5px 0 rgba(80,60,40,.28)}
#cw-board{align-self:center;justify-self:center;display:grid;gap:3px;width:min(96vw,430px);
  max-height:calc(100dvh - 290px);aspect-ratio:1;padding:5px;border-radius:12px;
  background:rgba(21,69,87,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.cw-cell{position:relative;display:grid;place-items:center;border-radius:6px;min-width:0;border:0;background:rgba(255,255,255,.13)}
.cw-cell.play{background:#fffdf1;color:#11152b;border:1px solid rgba(19,55,66,.18);
  box-shadow:0 2px 0 rgba(23,69,82,.18);font:900 clamp(14px,5.1vw,28px) "Baloo 2",system-ui}
.cw-cell.active{background:#ffd95b;border-color:#c28d1f}
.cw-cell.done{background:#9de7b1;border-color:#55b978}
.cw-cell .cw-num{position:absolute;top:1px;left:3px;font:900 8px system-ui;color:#48606f}
.cw-active{width:100%;border-radius:14px;padding:10px 12px;background:#143f52;color:#fff;
  box-shadow:0 4px 0 rgba(18,48,58,.25)}
#cw-clue{font-weight:900;font-size:15px;line-height:1.2}
#cw-entry{display:flex;gap:6px;min-height:42px;margin-top:8px;justify-content:center}
#cw-entry span{width:34px;height:38px;display:grid;place-items:center;border-radius:8px;
  background:#f9fff4;color:#12142d;font:900 22px "Cinzel",serif;box-shadow:inset 0 -3px 0 rgba(20,60,70,.14)}
#cw-clues{width:100%;display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:1px 1px 5px}
#cw-clues::-webkit-scrollbar{display:none}
.cw-clue-btn{flex:0 0 72%;border:0;border-radius:10px;padding:9px 10px;text-align:left;background:rgba(255,255,255,.86);
  color:#26364a;font:900 12px "Baloo 2",system-ui;box-shadow:0 3px 0 rgba(25,60,70,.16)}
.cw-clue-btn.active{background:#ffd95b}.cw-clue-btn.done{background:#c6f0d2;color:#426452}
#cw-letters{width:100%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;padding:0}
.cw-letter{height:46px;border:0;border-radius:10px;background:#ffd45f;color:#12142d;
  font:900 22px "Cinzel",serif;box-shadow:0 4px 0 #b87924}
.cw-letter:active{transform:translateY(2px);box-shadow:0 2px 0 #b87924}
.cw-letter:disabled{opacity:.35;filter:grayscale(.45);transform:none}
.cw-actions{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:8px;width:100%}
.cw-actions .btn{padding:11px 6px;font-size:12px;border-radius:12px}
@media (min-width:700px){
  .cw-screen.active{max-width:520px;margin:0 auto}
  .cw-clue-btn{flex-basis:48%}
}
@media (max-height:720px){
  #cw-board{max-height:calc(100dvh - 250px)}
  #cw-entry span{height:32px;width:30px;font-size:19px}
  .cw-letter{height:40px}
}