/* Birla's Gambit — "Cosmic Gambit" theme: a universe of stars and planets for kids. */
:root{
  --bg0:#070b1c; --bg1:#0e1440;
  --card:rgba(255,255,255,.055); --card2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.14);
  --txt:#f5f7ff; --muted:#a9b3d9;
  --green:#22c55e; --green-d:#15803d; --red:#ef4444; --amber:#f59e0b;
  --blue:#3b82f6; --violet:#8b5cf6; --gold:#fbbf24; --pink:#ec4899;
  --sq-l:#f6f1e3; --sq-d:#5a7fb8;   /* cream + blue board, never green */
  --radius:18px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  color:var(--txt);
  font-family:ui-rounded,"SF Pro Rounded","Baloo 2","Chalkboard SE","Comic Sans MS",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh; touch-action:manipulation;
  background:
    radial-gradient(1200px 800px at 85% -5%, rgba(139,92,246,.28), transparent 60%),
    radial-gradient(1000px 700px at 8% 12%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(900px 900px at 50% 110%, rgba(236,72,153,.14), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 70%);
  background-attachment:fixed;
  overflow-x:hidden;
}
/* twinkling starfield */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff 55%, transparent 60%),
    radial-gradient(1.2px 1.2px at 32% 8%, #cfe4ff 55%, transparent 60%),
    radial-gradient(1.8px 1.8px at 54% 22%, #fff 55%, transparent 60%),
    radial-gradient(1.1px 1.1px at 71% 12%, #ffe9b8 55%, transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 26%, #fff 55%, transparent 60%),
    radial-gradient(1.2px 1.2px at 6% 44%, #cfe4ff 55%, transparent 60%),
    radial-gradient(1.7px 1.7px at 24% 58%, #fff 55%, transparent 60%),
    radial-gradient(1.1px 1.1px at 45% 48%, #ffe9b8 55%, transparent 60%),
    radial-gradient(1.6px 1.6px at 63% 62%, #fff 55%, transparent 60%),
    radial-gradient(1.2px 1.2px at 82% 52%, #cfe4ff 55%, transparent 60%),
    radial-gradient(1.8px 1.8px at 94% 70%, #fff 55%, transparent 60%),
    radial-gradient(1.1px 1.1px at 15% 78%, #ffe9b8 55%, transparent 60%),
    radial-gradient(1.5px 1.5px at 36% 86%, #fff 55%, transparent 60%),
    radial-gradient(1.2px 1.2px at 58% 78%, #cfe4ff 55%, transparent 60%),
    radial-gradient(1.7px 1.7px at 76% 88%, #fff 55%, transparent 60%),
    radial-gradient(1.2px 1.2px at 90% 92%, #ffe9b8 55%, transparent 60%);
  animation:twinkle 3.2s ease-in-out infinite alternate;
}
/* drifting nebula clouds */
body::after{
  content:""; position:fixed; inset:-20%; z-index:0; pointer-events:none; filter:blur(70px); opacity:.5;
  background:
    radial-gradient(420px 420px at 20% 20%, rgba(139,92,246,.35), transparent 70%),
    radial-gradient(380px 380px at 80% 35%, rgba(59,130,246,.30), transparent 70%),
    radial-gradient(460px 460px at 55% 85%, rgba(236,72,153,.22), transparent 70%);
  animation:aurora 26s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.45;}to{opacity:1;}}
@keyframes aurora{from{transform:translate3d(-4%,-2%,0) scale(1);}to{transform:translate3d(4%,3%,0) scale(1.12);}}
/* denser star layer — extra faint stars behind the twinklers */
body{background-image:
    radial-gradient(1.3px 1.3px at 18% 32%, rgba(255,255,255,.75) 55%, transparent 60%),
    radial-gradient(1px 1px at 42% 5%, rgba(207,228,255,.7) 55%, transparent 60%),
    radial-gradient(1.4px 1.4px at 66% 30%, rgba(255,255,255,.7) 55%, transparent 60%),
    radial-gradient(1px 1px at 84% 8%, rgba(255,233,184,.7) 55%, transparent 60%),
    radial-gradient(1.2px 1.2px at 95% 42%, rgba(207,228,255,.7) 55%, transparent 60%),
    radial-gradient(1px 1px at 4% 62%, rgba(255,255,255,.65) 55%, transparent 60%),
    radial-gradient(1.3px 1.3px at 28% 72%, rgba(255,233,184,.65) 55%, transparent 60%),
    radial-gradient(1px 1px at 50% 60%, rgba(207,228,255,.65) 55%, transparent 60%),
    radial-gradient(1.4px 1.4px at 70% 74%, rgba(255,255,255,.7) 55%, transparent 60%),
    radial-gradient(1px 1px at 88% 84%, rgba(255,233,184,.6) 55%, transparent 60%),
    radial-gradient(1.2px 1.2px at 10% 92%, rgba(207,228,255,.6) 55%, transparent 60%),
    radial-gradient(1px 1px at 48% 94%, rgba(255,255,255,.6) 55%, transparent 60%),
    radial-gradient(1.3px 1.3px at 22% 6%, rgba(255,255,255,.7) 55%, transparent 60%),
    radial-gradient(1px 1px at 78% 55%, rgba(207,228,255,.65) 55%, transparent 60%),
    radial-gradient(1.1px 1.1px at 60% 3%, rgba(255,233,184,.65) 55%, transparent 60%),
    radial-gradient(1.2px 1.2px at 33% 40%, rgba(255,255,255,.6) 55%, transparent 60%),
    radial-gradient(1200px 800px at 85% -5%, rgba(139,92,246,.28), transparent 60%),
    radial-gradient(1000px 700px at 8% 12%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(900px 900px at 50% 110%, rgba(236,72,153,.14), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 70%);}

/* ================= universe: planets & shooting stars ================= */
.planet{position:fixed;z-index:0;pointer-events:none;animation:floaty 16s ease-in-out infinite alternate;}
.planet .globe{border-radius:50%;position:relative;}
@keyframes floaty{from{transform:translateY(-9px) rotate(-1.5deg);}to{transform:translateY(11px) rotate(1.5deg);}}

/* ringed gas giant, top-right */
.saturn{top:-46px;right:-64px;width:270px;height:230px;animation-duration:19s;}
.saturn .globe{width:150px;height:150px;margin:40px auto 0;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.9), transparent 44%),
    repeating-linear-gradient(176deg, rgba(255,255,255,.10) 0 7px, transparent 7px 15px),
    radial-gradient(circle at 38% 34%, #ffe9b8 0%, #f7c46c 34%, #d99543 58%, #8a5a24 84%, #5e3a14 100%);
  box-shadow:inset -18px -22px 42px rgba(60,30,5,.55), 0 0 64px rgba(247,196,108,.35);}
.saturn .orbit{position:absolute;left:5px;top:52px;width:260px;height:126px;border-radius:50%;
  background:radial-gradient(ellipse at center, transparent 57%, rgba(255,238,190,.75) 61%, rgba(240,200,120,.42) 68%, rgba(240,200,120,.12) 76%, transparent 81%);
  transform:rotate(-16deg);}
.saturn .ring-back{z-index:0;clip-path:inset(0 0 50% 0);}
.saturn .globe{z-index:1;}
.saturn .ring-front{z-index:2;clip-path:inset(50% 0 0 0);}

/* red cratered planet, bottom-left */
.mars{left:-56px;bottom:5%;width:180px;height:180px;animation-duration:23s;}
.mars .globe{width:180px;height:180px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.55), transparent 46%),
    radial-gradient(circle at 62% 56%, rgba(110,35,19,.6) 0 11%, transparent 12%),
    radial-gradient(circle at 40% 70%, rgba(110,35,19,.5) 0 8%, transparent 9%),
    radial-gradient(circle at 52% 38%, rgba(110,35,19,.42) 0 6%, transparent 7%),
    radial-gradient(circle at 72% 30%, rgba(255,235,220,.28) 0 13%, transparent 14%),
    radial-gradient(circle at 38% 34%, #ff9d6b 0%, #e2593a 45%, #a83a22 75%, #6e2313 100%);
  box-shadow:inset -18px -22px 40px rgba(70,15,5,.6), 0 0 60px rgba(226,89,58,.35);}

/* small icy moon, upper-left */
.moon{left:5%;top:11%;width:74px;height:74px;animation-duration:14s;}
.moon .globe{width:74px;height:74px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.95), transparent 46%),
    radial-gradient(circle at 56% 46%, rgba(140,160,200,.55) 0 11%, transparent 12%),
    radial-gradient(circle at 38% 62%, rgba(140,160,200,.5) 0 8%, transparent 9%),
    radial-gradient(circle at 68% 62%, rgba(140,160,200,.45) 0 6%, transparent 7%),
    radial-gradient(circle at 38% 34%, #f2f6ff 0%, #c9d6f2 55%, #8fa3cc 100%);
  box-shadow:inset -8px -10px 18px rgba(60,80,140,.5), 0 0 34px rgba(200,215,255,.4);}

/* shooting stars */
.meteor{position:fixed;z-index:0;pointer-events:none;width:130px;height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,#ffffff,rgba(255,255,255,0));
  animation:meteor 11s linear infinite;}
.meteor::before{content:"";position:absolute;left:0;top:-1.5px;width:5px;height:5px;border-radius:50%;
  background:#fff;box-shadow:0 0 10px 3px rgba(255,255,255,.9);}
.m1{top:9%;left:72%;}
.m2{top:26%;left:44%;animation-delay:4.2s;animation-duration:14s;}
.m3{top:5%;left:30%;animation-delay:8.1s;animation-duration:17s;width:90px;}
@keyframes meteor{
  0%{opacity:0;transform:rotate(-32deg) translateX(0) scaleX(.4);}
  3%{opacity:1;transform:rotate(-32deg) translateX(-6vw) scaleX(1);}
  10%{opacity:0;transform:rotate(-32deg) translateX(-42vw) scaleX(1);}
  100%{opacity:0;transform:rotate(-32deg) translateX(-42vw) scaleX(1);}}
@media (max-width:560px){
  .saturn{scale:.6;right:-118px;top:-72px;}
  .mars{scale:.68;left:-72px;bottom:3%;}
  .moon{scale:.8;left:3%;top:9%;}
  .m2{left:60%;}
}

#app{max-width:640px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1;}
.hidden{display:none !important;}

/* top bar */
#topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;
  background:rgba(13,19,48,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
  box-shadow:0 4px 24px rgba(0,0,0,.35);}
.brand{background:none;border:none;cursor:pointer;display:flex;gap:8px;align-items:center;
  font-size:20px;font-weight:900;letter-spacing:.3px;color:var(--txt);}
.brand span{background:linear-gradient(92deg,#fde68a,#f59e0b 45%,#fbbf24);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 6px rgba(251,191,36,.35));}
.topbar-stats{display:flex;align-items:center;gap:8px;}
.pill{background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 2px 8px rgba(0,0,0,.3);}
.pill b{font-variant-numeric:tabular-nums;}
.xpwrap{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;}
.xpbar{width:64px;height:8px;background:rgba(0,0,0,.45);border-radius:99px;overflow:hidden;border:1px solid var(--line);}
#xp-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink));transition:width .6s ease;
  box-shadow:0 0 8px rgba(139,92,246,.8);}

main{flex:1;padding:14px 14px 44px;}
.screen-title{margin:8px 0 2px;font-size:27px;font-weight:900;letter-spacing:.3px;
  background:linear-gradient(92deg,#fff,#c7d6ff 60%,#fde68a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 10px rgba(99,102,241,.35));}
.screen-sub{color:var(--muted);margin:0 0 14px;font-size:14.5px;line-height:1.5;}
.backlink{background:rgba(255,255,255,.07);border:1px solid var(--line);color:#cdd8ff;font-size:15px;font-weight:700;
  cursor:pointer;padding:7px 14px;border-radius:999px;transition:transform .12s ease;}
.backlink:active{transform:scale(.94);}
.foot{text-align:center;color:var(--muted);font-size:12.5px;margin-top:20px;letter-spacing:.3px;}

/* hero */
.hero-title{text-align:center;margin:2px 0 4px;font-size:44px;font-weight:900;letter-spacing:.5px;line-height:1.05;
  background:linear-gradient(94deg,#fde68a 5%,#f59e0b 30%,#fff 52%,#93c5fd 75%,#c4b5fd);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 18px rgba(251,191,36,.35)) drop-shadow(0 2px 8px rgba(139,92,246,.4));
  animation:heroshine 5s ease-in-out infinite;}
.hero-title span{background:linear-gradient(94deg,#93c5fd,#c4b5fd,#f0abfc);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
@keyframes heroshine{0%,100%{filter:drop-shadow(0 4px 18px rgba(251,191,36,.35)) drop-shadow(0 2px 8px rgba(139,92,246,.4));}
  50%{filter:drop-shadow(0 4px 26px rgba(251,191,36,.55)) drop-shadow(0 2px 14px rgba(139,92,246,.6));}}
.hero-sub{text-align:center;color:#cdd8ff;font-size:15.5px;margin:0 0 12px;font-weight:600;
  text-shadow:0 2px 12px rgba(139,92,246,.5);}

/* coach */
.coach{display:flex;gap:10px;align-items:flex-start;margin:8px 0 14px;}
.coach.compact{margin:2px 0 10px;}
.coach-avatar{flex:0 0 46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6 60%,#ec4899);
  display:flex;align-items:center;justify-content:center;font-size:25px;color:#fff;
  box-shadow:0 4px 16px rgba(139,92,246,.55), inset 0 2px 4px rgba(255,255,255,.35);
  border:2px solid rgba(255,255,255,.35);}
.coach-bubble{position:relative;background:rgba(20,27,60,.82);backdrop-filter:blur(8px);
  border:1px solid rgba(139,92,246,.4);border-radius:6px 16px 16px 16px;padding:11px 13px;
  font-size:15px;line-height:1.5;flex:1;min-height:46px;
  box-shadow:0 6px 20px rgba(0,0,0,.4), 0 0 18px rgba(139,92,246,.18);}
/* the hint button lives inside the puzzle bubble — keep text clear of it */
.coach.compact .coach-bubble{padding-right:58px;}
.coach-bubble:before{content:"";position:absolute;left:-8px;top:14px;border:8px solid transparent;
  border-right-color:rgba(139,92,246,.4);border-left:none;}
.coach-bubble .tw:empty:after{content:"▍";animation:blink 1s steps(1) infinite;color:var(--violet);}
@keyframes blink{50%{opacity:0;}}
.chess-speak{display:block;margin-top:8px;padding:9px 11px;background:rgba(245,158,11,.1);
  border-left:3px solid var(--amber);border-radius:0 10px 10px 0;font-size:13.5px;color:var(--muted);}
.chess-speak b{color:var(--amber);}
.hintbtn{position:absolute;right:6px;bottom:6px;background:rgba(255,255,255,.1);border:1px solid var(--line);
  border-radius:12px;font-size:18px;padding:5px 9px;cursor:pointer;transition:transform .12s ease;}
.hintbtn:active{transform:scale(.88) rotate(-8deg);}
.hintbtn:disabled{opacity:.35;cursor:default;}

/* cards — magical quest cards */
.card{position:relative;display:flex;gap:14px;align-items:center;width:100%;text-align:left;color:var(--txt);
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:16px 16px;margin:0 0 13px;
  cursor:pointer;font-size:15px;overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .14s ease, box-shadow .14s ease;
  animation:cardin .5s cubic-bezier(.2,.9,.3,1.2) backwards;}
.mode-grid .card:nth-child(2){animation-delay:.07s;} .mode-grid .card:nth-child(3){animation-delay:.14s;}
.mode-grid .card:nth-child(4){animation-delay:.21s;}
@keyframes cardin{from{opacity:0;transform:translateY(18px) scale(.97);}to{opacity:1;transform:none;}}
.card::after{content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-20deg);transition:left .5s ease;pointer-events:none;}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 24px rgba(139,92,246,.35);}
.card:hover::after{left:130%;}
.card:active{transform:scale(.97);}
.card h2{margin:0 0 4px;font-size:18px;font-weight:800;letter-spacing:.2px;
  text-shadow:0 2px 8px rgba(0,0,0,.5);}
.card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.45;}
.card-emoji{flex:0 0 56px;height:56px;border-radius:18px;font-size:30px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#3b82f6,#8b5cf6 55%,#ec4899);
  box-shadow:0 6px 18px rgba(139,92,246,.5), inset 0 2px 4px rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.3);}
.card-go{margin-left:auto;flex:0 0 38px;height:38px;border-radius:50%;font-size:20px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  box-shadow:0 0 14px rgba(139,92,246,.4);transition:transform .14s ease;}
.card:hover .card-go{transform:translateX(4px);}
.mode-grid{display:grid;gap:2px;}
@media(min-width:560px){.mode-grid{grid-template-columns:1fr 1fr;}}

/* board — cream & blue, floating in a starlight frame */
.board-shell{width:100%;max-width:520px;margin:2px auto;user-select:none;-webkit-user-select:none;
  background:linear-gradient(140deg,#f59e0b,#8b5cf6 40%,#3b82f6 75%,#22d3ee);
  padding:9px;border-radius:24px;
  box-shadow:0 26px 60px rgba(0,0,0,.6), 0 0 44px rgba(139,92,246,.4), inset 0 2px 6px rgba(255,255,255,.4);}
.bw-grid{display:grid;grid-template-columns:24px 1fr 24px;grid-template-rows:24px 1fr 24px;align-items:center;
  background:rgba(7,11,28,.9);border-radius:17px;padding:4px;}
.bw-coords{display:flex;justify-content:space-around;align-items:center;color:#e8c96a;
  font-size:11.5px;font-weight:800;text-shadow:0 1px 4px rgba(0,0,0,.6);}
.bw-coords.vert{flex-direction:column;height:100%;}
.bw-board{position:relative;width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25), 0 6px 24px rgba(0,0,0,.5);
  touch-action:none;} /* drags must never become scroll gestures */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* keyboard focus cursor on the board */
.sq.kb-cursor:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px #facc15;pointer-events:none;}
.bw-board:focus{outline:none;}
.bw-board:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,255,255,.25), 0 6px 24px rgba(0,0,0,.5), 0 0 0 3px rgba(250,204,21,.55);}
.bw-squares{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);}
.sq{position:relative;}
.sq.l{background:var(--sq-l);} .sq.d{background:var(--sq-d);}
.sq.lastmove:after{content:"";position:absolute;inset:0;background:rgba(255,213,79,.5);box-shadow:inset 0 0 14px rgba(255,180,40,.55);}
.sq.selected:after{content:"";position:absolute;inset:0;background:rgba(59,130,246,.45);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.75), inset 0 0 18px rgba(59,130,246,.8);}
.sq.hintmark:after{content:"";position:absolute;inset:0;background:rgba(245,158,11,.55);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.7);}
.sq.wrong:after{content:"";position:absolute;inset:0;background:rgba(239,68,68,.55);}
/* pathway highlight — shown ONLY while a piece is selected */
.sq.movepath-through:after{content:"";position:absolute;inset:0;background:rgba(37,99,235,.15);pointer-events:none;}
.sq.movepath:after{content:"";position:absolute;inset:0;background:rgba(37,99,235,.40);pointer-events:none;
  box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.65), inset 0 0 16px rgba(37,99,235,.65);}
.sq.movepath-cap:after{background:rgba(220,38,38,.48);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.8), inset 0 0 20px rgba(220,38,38,.8);}
.bw-pieces{position:absolute;inset:0;pointer-events:none;}
.piece{position:absolute;width:12.5%;height:12.5%;display:flex;align-items:center;justify-content:center;
  pointer-events:auto;cursor:grab;z-index:2;
  transition:left .26s cubic-bezier(.34,1.3,.5,1),top .26s cubic-bezier(.34,1.3,.5,1);}
/* flat 2D SVG pieces, uniform size, always inside their square */
.piece img.pp{width:86%;height:86%;object-fit:contain;display:block;pointer-events:none;
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;filter:none;}
.piece.drag{transition:none;z-index:20;cursor:grabbing;filter:none;}
.piece.fade{opacity:0;transition:opacity .25s;}
.promo-pop{position:absolute;z-index:30;background:rgba(20,27,60,.96);border:1px solid rgba(139,92,246,.5);
  border-radius:14px;padding:8px;display:flex;gap:8px;box-shadow:0 10px 30px rgba(0,0,0,.65),0 0 20px rgba(139,92,246,.4);}
.promo-pop button{font-size:32px;background:rgba(255,255,255,.1);border:1px solid var(--line);border-radius:10px;
  padding:6px 10px;cursor:pointer;color:var(--txt);transition:transform .12s ease;}
.promo-pop button:active{transform:scale(.9);}

/* puzzle hud */
.puzzle-hud{display:flex;justify-content:space-between;align-items:center;margin:4px 0 8px;font-size:15px;}
.hud-left,.hud-right{display:flex;align-items:center;gap:8px;}
#hud-timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:18px;color:#fde68a;
  text-shadow:0 0 12px rgba(251,191,36,.5);}
#hud-hearts{color:#fb7185;font-size:16px;letter-spacing:2px;text-shadow:0 0 10px rgba(251,113,133,.6);}
#hud-rating{font-size:17px;text-shadow:0 2px 8px rgba(0,0,0,.5);}
.bandtag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;padding:4px 10px;
  border-radius:99px;background:rgba(255,255,255,.1);border:1px solid var(--line);}
.bandtag.beginner{color:#4ade80;box-shadow:0 0 10px rgba(34,197,94,.35);}
.bandtag.intermediate{color:#38bdf8;box-shadow:0 0 10px rgba(56,189,248,.35);}
.bandtag.advanced{color:var(--amber);box-shadow:0 0 10px rgba(245,158,11,.35);}
.bandtag.expert{color:#fb7185;box-shadow:0 0 10px rgba(239,68,68,.4);}
.themes{margin:8px 0;display:flex;flex-wrap:wrap;gap:6px;}
.theme-chip{font-size:12px;background:rgba(255,255,255,.08);border:1px solid var(--line);
  border-radius:99px;padding:4px 11px;color:var(--muted);}

/* buttons */
.btn{position:relative;overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.09);color:var(--txt);
  border-radius:20px;padding:13px 22px;font-size:16px;cursor:pointer;font-weight:800;letter-spacing:.2px;
  transition:transform .13s ease, box-shadow .13s ease;box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);}
.btn:active{transform:scale(.95);}
.btn.primary{background:linear-gradient(135deg,#3b82f6,#8b5cf6 60%,#a855f7);border-color:rgba(255,255,255,.35);
  box-shadow:0 10px 28px rgba(139,92,246,.5), inset 0 2px 4px rgba(255,255,255,.35);
  text-shadow:0 2px 6px rgba(0,0,0,.35);}
.btn.primary::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);
  transition:left .45s ease;}
.btn.primary:hover::after{left:135%;}
.btn.warn{background:linear-gradient(135deg,#b45309,#f59e0b);border-color:rgba(255,255,255,.3);
  box-shadow:0 8px 22px rgba(245,158,11,.4);}
.btn.ghost{background:rgba(255,255,255,.06);}
.btn.big{width:100%;padding:17px;font-size:18.5px;margin-top:12px;border-radius:22px;}
.btn.small{padding:5px 12px;font-size:13px;border-radius:12px;}
.btn:disabled{opacity:.4;cursor:default;}
.action-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.action-row .btn{flex:1;white-space:nowrap;}
#btn-next-solo{margin-top:10px;}
.stepper{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px;}
.stepper button{background:rgba(255,255,255,.09);border:1px solid var(--line);color:var(--txt);
  border-radius:12px;padding:9px 15px;font-size:16px;cursor:pointer;transition:transform .12s ease;}
.stepper button:active{transform:scale(.9);}
#step-label{color:var(--muted);font-size:13px;min-width:90px;text-align:center;}

.solve-banner{margin-top:12px;border-radius:var(--radius);padding:16px;text-align:center;font-size:17px;font-weight:800;
  animation:bannerpop .45s cubic-bezier(.2,1.4,.4,1);}
@keyframes bannerpop{from{opacity:0;transform:scale(.85) translateY(10px);}to{opacity:1;transform:none;}}
.solve-banner.ok{background:linear-gradient(135deg,rgba(34,197,94,.28),rgba(34,197,94,.12));
  border:1.5px solid #4ade80;box-shadow:0 0 26px rgba(34,197,94,.35), inset 0 1px 0 rgba(255,255,255,.2);
  text-shadow:0 2px 8px rgba(0,0,0,.4);}
.solve-banner.bad{background:linear-gradient(135deg,rgba(239,68,68,.25),rgba(239,68,68,.1));
  border:1.5px solid #f87171;box-shadow:0 0 22px rgba(239,68,68,.3);}
.delta{display:inline-block;font-variant-numeric:tabular-nums;margin-left:8px;}
.delta.up{color:#4ade80;} .delta.down{color:#fb7185;}
.badge-check{display:inline-block;background:linear-gradient(135deg,#22c55e,#4ade80);color:#06240f;border-radius:50%;
  width:28px;height:28px;line-height:28px;margin-right:8px;box-shadow:0 0 14px rgba(34,197,94,.6);}
.badge-x{display:inline-block;background:linear-gradient(135deg,#ef4444,#f87171);color:#fff;border-radius:50%;
  width:28px;height:28px;line-height:28px;margin-right:8px;box-shadow:0 0 14px rgba(239,68,68,.6);}

/* forms */
.fld{display:block;margin:12px 0;font-size:14.5px;font-weight:700;}
.fld select,.fld input{background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--txt);
  border-radius:12px;padding:11px;width:100%;font-size:15px;margin-top:5px;}
.fld select option{background:#141b3a;}
.fld-row{display:flex;gap:10px;} .fld-row .fld{flex:1;}
.muted{color:var(--muted);font-weight:400;}
.theme-grid{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px;}
.tchip{border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--txt);border-radius:99px;
  padding:9px 14px;font-size:13.5px;font-weight:700;cursor:pointer;transition:all .13s ease;}
.tchip:active{transform:scale(.93);}
.tchip.on{background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-color:rgba(255,255,255,.4);
  box-shadow:0 0 16px rgba(139,92,246,.55);}
.tchip .pct{color:var(--muted);font-size:11px;margin-left:4px;}
.daily-bar{display:flex;gap:8px;margin:10px 0;}
.daily-bar input{flex:1;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--txt);
  border-radius:12px;padding:11px;font-size:15px;color-scheme:dark;}

.exercise-box{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;margin-top:10px;box-shadow:0 8px 22px rgba(0,0,0,.35);}
.exercise-box h3{margin:0 0 8px;font-size:16px;}
.quiz-opt{display:block;width:100%;text-align:left;margin:6px 0;}

/* countdown */
#countdown{position:fixed;inset:0;background:rgba(5,8,20,.9);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;z-index:200;}
#countdown-num{font-size:120px;font-weight:900;
  background:linear-gradient(180deg,#fde68a,#f59e0b 60%,#ec4899);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 30px rgba(251,191,36,.5));animation:countpop .9s ease;}
@keyframes countpop{from{transform:scale(.4);opacity:0;}60%{transform:scale(1.15);}to{transform:scale(1);opacity:1;}}

/* modal */
.modal-veil{position:fixed;inset:0;background:rgba(5,8,20,.78);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:300;padding:18px;}
.modal{background:linear-gradient(165deg,#1a2350,#10173a);border:1px solid rgba(139,92,246,.45);
  border-radius:22px;max-width:440px;width:100%;padding:22px;max-height:85vh;overflow:auto;
  box-shadow:0 30px 70px rgba(0,0,0,.65), 0 0 40px rgba(139,92,246,.3);
  animation:bannerpop .35s cubic-bezier(.2,1.4,.4,1);}
.modal h2{margin:0 0 8px;font-size:21px;}
.modal p{color:var(--muted);font-size:14.5px;line-height:1.55;}
.modal .btn{margin-top:12px;width:100%;}
.results-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:14px;}
.results-table td{padding:7px 4px;border-bottom:1px solid var(--line);}
.results-table td:last-child{text-align:right;font-weight:800;}

/* toast */
#toast-root{position:fixed;bottom:26px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:400;pointer-events:none;}
.toast{background:rgba(20,27,60,.95);border:1px solid rgba(139,92,246,.5);border-radius:16px;padding:11px 20px;
  font-size:15px;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 18px rgba(139,92,246,.35);
  animation:toastup 2.4s ease forwards;}
@keyframes toastup{0%{opacity:0;transform:translateY(12px);}12%{opacity:1;transform:none;}80%{opacity:1;}100%{opacity:0;transform:translateY(-8px);}}

/* drag hover target + illegal-drop shake */
.sq.hover-ok::after{content:'';position:absolute;inset:5px;border:3.5px solid rgba(59,130,246,.95);border-radius:12px;
  pointer-events:none;box-shadow:0 0 16px rgba(59,130,246,.7);}
.sq.hover-bad::after{content:'';position:absolute;inset:5px;border:3.5px solid rgba(239,68,68,.8);border-radius:12px;pointer-events:none;}
@keyframes bgshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.bw-board.shake{animation:bgshake .28s ease;}

/* ---------- Kashmir valley backdrop on the puzzle screen ---------- */
#screen-puzzle{position:relative;overflow:hidden;border-radius:26px;padding:16px 12px 26px;
  background:rgba(10,14,34,.55);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 50px rgba(0,0,0,.45);}
.valley-bg{position:absolute;inset:-5%;z-index:0;pointer-events:none;
  background:url('assets/kashmir-bg.jpg') center/cover no-repeat;
  filter:brightness(.5) saturate(1.25) blur(3px);
  animation:kenburns 40s ease-in-out infinite alternate;}
.valley-bg:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,12,24,.66),rgba(9,12,24,.3) 38%,rgba(9,12,24,.2) 55%,rgba(9,12,24,.6));}
@keyframes kenburns{from{transform:scale(1) translate(0,0);}to{transform:scale(1.14) translate(-2.5%,2%);}}
#screen-puzzle>:not(.valley-bg){position:relative;z-index:1;}
/* board floats over the valley */
#screen-puzzle .board-shell{filter:drop-shadow(0 24px 44px rgba(0,0,0,.6));}

/* ---------- mascot ---------- */
.mascot-hero{position:relative;text-align:center;margin:10px 0 6px;animation:herofloat 4s ease-in-out infinite;}
@keyframes herofloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
.mascot-hero::before,.mascot-hero::after{position:absolute;font-size:26px;pointer-events:none;z-index:2;
  filter:drop-shadow(0 0 8px rgba(253,230,138,.9));animation:sparkle 2.4s ease-in-out infinite;}
.mascot-hero::before{content:"✨";left:16%;top:6%;}
.mascot-hero::after{content:"⭐";right:15%;top:22%;animation-delay:1.2s;}
@keyframes sparkle{0%,100%{opacity:.35;transform:scale(.8) rotate(-8deg);}50%{opacity:1;transform:scale(1.25) rotate(10deg);}}
.mascot-wrap{position:relative;display:inline-block;width:158px;height:158px;cursor:pointer;touch-action:manipulation;
  border-radius:46% 54% 52% 48%/52% 48% 54% 46%;
  border:4px solid rgba(255,255,255,.4);
  box-shadow:0 14px 36px rgba(0,0,0,.55),0 0 34px rgba(139,92,246,.55),0 0 70px rgba(251,191,36,.22),
    inset 0 3px 8px rgba(255,255,255,.35);
  overflow:hidden;transition:transform .15s ease;}
.mascot-wrap img{display:block;width:100%;height:100%;object-fit:cover;}
.mascot-wrap:active{transform:scale(.9) rotate(-3deg);}
.mascot-face{position:absolute;left:0;top:0;pointer-events:none;
  clip-path:inset(-3% -3% 42% -3%);transform-origin:50% 64%;}
.mascot-wrap.giggling .mascot-face{animation:facegiggle .95s ease;}
@keyframes facegiggle{
  0%{transform:rotate(0) translateY(0);}
  12%{transform:rotate(-8deg) translateY(3px);}
  26%{transform:rotate(7deg) translateY(-2px);}
  40%{transform:rotate(-6deg) translateY(3px);}
  54%{transform:rotate(5deg) translateY(-2px);}
  68%{transform:rotate(-3.5deg) translateY(2px);}
  82%{transform:rotate(2deg) translateY(-1px);}
  100%{transform:rotate(0) translateY(0);}}
.solve-mascot{width:48px;height:48px;object-fit:cover;border-radius:50%;vertical-align:-15px;margin-right:8px;
  border:2px solid rgba(255,255,255,.4);box-shadow:0 0 14px rgba(139,92,246,.6);animation:hop .55s ease 3;}
@keyframes hop{0%,100%{transform:translateY(0);}50%{transform:translateY(-13px);}}

/* ---------- confetti ---------- */
#confetti-root{position:fixed;inset:0;pointer-events:none;z-index:600;overflow:hidden;}
.confetti{position:absolute;top:-16px;animation-name:confall;animation-timing-function:linear;animation-fill-mode:forwards;}
@keyframes confall{to{transform:translateY(110vh) rotate(720deg);}}

@media (prefers-reduced-motion:reduce){
  body::before,body::after,.valley-bg,.mascot-hero,#mascot.giggling,.mascot-hero::before,.mascot-hero::after,
  .hero-title,.card,.solve-mascot,.sq.movepath:after{animation:none !important;}
  .piece{transition:none;}
  .card::after,.btn.primary::after{display:none;}
}

/* king in check */
.sq.incheck{box-shadow:inset 0 0 0 3px #ef4444,inset 0 0 22px rgba(239,68,68,.85);}