/* Mind-Reading Cards. Look A "Magic Show" from the design canvas
   (https://claude.ai/artifact/CfaPp3QfP96SFFfPp1n1T3), made as clean as look C (Nick, 2026-11-07:
   "I like magic show but it can be cleaner like starry cards"): a starry night-blue stage (plum until 2026-11-08, Nick: "remove purple everywhere"), gold, soft glows instead
   of outlines, ivory cards that each keep one colour for their dots and name. */
:root{
  --stage:#14336e; --stage-2:#2a5cc0; --ivory:#fff8e8; --ink:#2a1240; --text:#fff8e8; --muted:#d8e4fb; --chip:#1d4590;
  --gold:#ffc94a; --gold-d:#d99a12;
  --side:80px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--stage);color:var(--text);font-family:'Baloo 2',system-ui,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overflow:hidden}
body{background:radial-gradient(ellipse 90% 75% at 50% 0%,var(--stage-2) 0%,var(--stage) 75%)}
/* a few soft sparkles on the stage, behind everything */
body::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.55;background:radial-gradient(circle at 12% 22%,#fff 0 2px,transparent 3px),radial-gradient(circle at 46% 9%,#ffe08a 0 2.5px,transparent 3.5px),radial-gradient(circle at 71% 30%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 88% 58%,#ffe08a 0 2px,transparent 3px),radial-gradient(circle at 6% 66%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 58% 92%,#fff 0 2px,transparent 3px),radial-gradient(circle at 33% 80%,#ffe08a 0 1.5px,transparent 2.5px)}
#app{z-index:1}
button{font-family:inherit;color:inherit;touch-action:manipulation;cursor:pointer}
#app{height:100%;display:flex;flex-direction:column;gap:10px;padding:14px 0 14px;position:relative}

/* ── header ───────────────────────────────────────────────────────────── */
#top{display:flex;align-items:center;gap:12px 16px;padding:0 var(--side);min-height:52px;flex-wrap:wrap}
#title{font:800 30px 'Baloo 2',sans-serif;margin:0;letter-spacing:-.01em;white-space:nowrap;color:var(--gold)}
.seg{display:flex;background:var(--chip);border-radius:26px;padding:3px}
.seg button{font:700 16px 'Baloo 2',sans-serif;height:44px;padding:0 16px;border:0;border-radius:22px;background:transparent;color:var(--muted);white-space:nowrap}
.seg button.on{background:var(--ivory);color:var(--ink)}
#levels{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:700 15px 'Baloo 2',sans-serif;height:44px;padding:0 14px;border-radius:22px;border:0;background:var(--chip);color:var(--muted);white-space:nowrap}
.chip.on{background:var(--gold);color:var(--ink)}

/* ── middle ───────────────────────────────────────────────────────────── */
#mid{flex:1;min-height:0;display:flex;gap:24px;padding:0 var(--side)}
#stageCol{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;gap:12px}
#stage{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:relative}
#goal{flex:none;text-align:center;font:700 18px/1.2 'Baloo 2',sans-serif;color:var(--gold);padding:0 6px}
.hbtn{font:800 18px 'Baloo 2',sans-serif;height:48px;padding:0 16px;border:0;border-radius:24px;background:var(--ivory);color:var(--ink);white-space:nowrap}
.hbtn.nudge{animation:hintNudge 1.1s ease-in-out infinite}
@keyframes hintNudge{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,201,74,.95)}50%{transform:scale(1.08);box-shadow:0 0 0 12px rgba(255,201,74,0)}}
button.pc.hintme{animation:hintCard .8s ease-in-out infinite;outline:4px solid var(--gold);outline-offset:3px}
@keyframes hintCard{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
#actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;min-height:0}
#actions:empty{display:none}
#slots{display:flex;gap:12px;justify-content:center;min-height:0}
#slots:empty{display:none}

.big{font:800 26px 'Baloo 2',sans-serif;height:64px;min-width:160px;padding:0 30px;border:0;border-radius:32px;background:var(--gold);color:var(--ink);
  box-shadow:0 0 0 6px rgba(255,201,74,.18);white-space:nowrap}
.big.plain{background:var(--ivory);box-shadow:none}
.big:active{transform:scale(.96)}
.quiet{font:700 17px 'Baloo 2',sans-serif;height:52px;padding:0 20px;border:0;border-radius:26px;background:var(--chip);color:var(--text)}
.ask-line{font:700 25px/1.2 'Baloo 2',sans-serif;text-align:center;margin:0}
.ask-line b{font-weight:800}
.pill{color:#fff;padding:0 12px;border-radius:14px;display:inline-block}
.eq .num{font:800 30px 'Baloo 2',sans-serif;background:var(--ivory);border-radius:14px;padding:0 12px}

/* a card: ivory, its colour on the name and dots, its numbers below */
.card{background:var(--ivory);border-radius:26px;padding:12px 16px 16px;display:flex;flex-direction:column;gap:10px;color:var(--ink);
  box-shadow:0 0 50px rgba(255,255,255,.18),0 10px 0 rgba(0,0,0,.22)}
.big-card{padding:18px}
.big-card .nums{gap:8px}
.card .head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px}
.card .head .nm{font:800 19px 'Baloo 2',sans-serif}
.dots{display:grid;gap:4px;justify-content:start}
.dots i{display:block;width:12px;height:12px;border-radius:50%;background:currentColor}
.dots.d32{gap:3px}
.dots.d32 i{width:8px!important;height:8px!important}
.nums{display:grid;gap:7px}
.nums span{background:var(--ivory);color:var(--ink);border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800}
.nums span.mark{background:var(--gold);box-shadow:0 0 0 4px var(--ink) inset}
.card.enter{animation:deal .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes deal{from{transform:translateX(120px) rotate(10deg);opacity:0}to{transform:none;opacity:1}}

/* the think screen: a fan of card backs */
.fan{position:relative;width:420px;height:270px;flex:none;margin-bottom:14px}
.fan div{position:absolute;width:190px;height:240px;border-radius:22px;border:8px solid var(--ivory);
  background:repeating-linear-gradient(45deg,#e8475f 0 14px,#c9334b 14px 28px)!important;box-shadow:0 10px 0 rgba(0,0,0,.25)}
.fan .q{display:flex;align-items:center;justify-content:center;font-size:0!important}
.fan .q::after{content:'?';width:96px;height:96px;border-radius:50%;background:var(--ivory);color:#e8475f;display:flex;align-items:center;justify-content:center;font:800 64px 'Baloo 2',sans-serif}

/* mini cards under the stage */
.slot{width:60px;height:72px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font:800 15px 'Baloo 2',sans-serif;color:#fff;transition:transform .3s,opacity .3s}
.slot.later{opacity:.28}
.slot.now{transform:translateY(-8px);box-shadow:0 0 0 3px var(--gold),0 0 22px rgba(255,201,74,.55)}
.slot.no{background:var(--chip)!important;color:var(--muted)}
.slot.glow{animation:glow .7s ease-out}
@keyframes glow{0%{transform:scale(1)}40%{transform:scale(1.25) translateY(-10px);box-shadow:0 0 0 6px rgba(255,201,74,.8),0 0 30px rgba(255,201,74,.8)}100%{transform:scale(1)}}

/* the reveal: a golden spotlight and the sum */
.ball{width:200px;height:200px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 40% 35%,#fff8d6 0%,#ffc94a 50%,#d99a12 100%);display:flex;align-items:center;justify-content:center;
  font:800 100px 'Baloo 2',sans-serif;line-height:1;color:var(--ink);box-shadow:0 0 70px rgba(255,201,74,.45)}
.ball.glow{animation:orb 1.2s ease-in-out infinite}
.ball.pop{animation:orbPop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes orb{0%,100%{box-shadow:0 0 40px rgba(255,201,74,.35)}50%{box-shadow:0 0 90px rgba(255,201,74,.75)}}
@keyframes orbPop{0%{transform:scale(.8)}100%{transform:scale(1)}}
.eq{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;min-height:64px}
.eq .op,.eq .tot{font:800 34px 'Baloo 2',sans-serif}
.eq .tot{color:var(--gold)}
.mini{width:72px;height:84px;border-radius:14px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  font:800 20px 'Baloo 2',sans-serif;animation:popIn .4s cubic-bezier(.2,1.6,.4,1) both}
.mini .dots i{width:8px;height:8px;background:#fff}
@keyframes popIn{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}

/* You read Marvo */
.row-cards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.pc{width:112px;height:132px;border-radius:16px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font:800 22px 'Baloo 2',sans-serif;position:relative;box-shadow:0 0 26px rgba(255,201,74,.45)}
.pc .dots i{width:10px;height:10px;background:#fff}
.pc.off{background:transparent!important;color:#b9cdf2!important;box-shadow:none;border:2px dashed #7896d6}
.pc.off .dots i{background:#7896d6}
.pc .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--ink);font:700 13px 'Baloo 2',sans-serif;padding:0 10px;border-radius:10px;white-space:nowrap}
.pc.off .tag{background:var(--chip);color:var(--muted)}
.pad{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;flex:1;min-height:0;width:100%}
.pad button{border:0;background:var(--ivory);color:var(--ink);border-radius:14px;font-weight:800;padding:0;margin:3px}
.pad button:active{transform:scale(.92)}
.pad button.miss{background:transparent;color:#b9cdf2;border:2px dashed #7896d6;animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.hint{font:800 22px 'Baloo 2',sans-serif;background:var(--chip);color:var(--gold);border-radius:18px;padding:4px 18px}
button.pc{border:0;cursor:pointer;padding:0}
button.pc:not(.open){animation:shimmer 1.6s ease-in-out infinite}
button.pc:active{transform:scale(.94)}
.pc .val{font:800 30px 'Baloo 2',sans-serif;line-height:1}
@keyframes shimmer{0%,100%{box-shadow:0 0 18px rgba(255,201,74,.45)}50%{box-shadow:0 0 34px rgba(255,201,74,.95)}}
.glowword{color:var(--gold)}
.sumline{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;font:800 34px 'Baloo 2',sans-serif}
.sumline span{background:var(--ivory);border-radius:14px;padding:0 14px}
.sumline i{font-style:normal;color:var(--text)}
.sumline b{color:var(--gold)}
.sumline em{font:700 20px 'Baloo 2',sans-serif;font-style:normal;color:var(--muted)}

/* ── Marvo ────────────────────────────────────────────────────────────── */
#foxCol{width:250px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding-bottom:6px}
#boardBtn{margin-bottom:auto;align-self:flex-end;height:48px;padding:0 16px;border:0;border-radius:24px;background:var(--chip);color:var(--text);font:700 16px 'Baloo 2',sans-serif;
  display:flex;align-items:center;gap:8px}
#boardBtn i{width:16px;height:16px;background:var(--gold);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
#boardBtn b{color:var(--gold);font-weight:800}
#boardBtn.ping{animation:ping 1.2s ease-out}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,201,74,.9)}60%{box-shadow:0 0 0 18px rgba(255,201,74,0)}100%{box-shadow:none}}
#bubble{background:var(--ivory);color:var(--ink);border-radius:22px 22px 22px 6px;padding:12px 16px;font:600 18px/1.3 'Baloo 2',sans-serif;align-self:stretch;min-height:52px}
#fox svg{width:200px;height:230px;display:block}
#fox .spark{opacity:0;transition:opacity .3s}
#fox.glow .spark{opacity:1}
#fox.hop{animation:hop .6s ease-out}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-16px)}}

/* ── overlays ─────────────────────────────────────────────────────────── */
.veil{position:absolute;inset:0;background:rgba(10,30,80,.88);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px;animation:fade .25s ease-out both}
.veil[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.veil .card{background:var(--ivory);color:var(--ink);align-items:center;text-align:center;max-width:720px;max-height:100%;overflow:auto;padding:22px 28px}
.veil h2{font:800 32px 'Baloo 2',sans-serif;margin:0}
.veil p{font:600 18px/1.35 'Baloo 2',sans-serif;color:#5e4d7a;margin:0}
#boardGrid{display:grid;grid-template-columns:repeat(9,44px);gap:6px;justify-content:center;margin:6px 0}
#boardGrid span{height:44px;border-radius:10px;background:#f1e7d0;display:flex;align-items:center;justify-content:center;font:700 16px 'Baloo 2',sans-serif;color:#8f7fa8}
#boardGrid span.got{color:var(--ink);background:var(--gold)}
#toast{display:none}

/* ── smaller screens ──────────────────────────────────────────────────── */
@media (max-width:1100px){
  :root{--side:68px}
  #title{font-size:25px}
  #foxCol{width:220px}
  #fox svg{width:170px;height:196px}
}
/* phones, upright: the 🏠 ⛶ ? own the top corners, 📮 🔊 the bottom-left */
@media (max-width:760px){
  #app{gap:8px;padding:12px 0 10px}
  #top{padding:0 68px;gap:8px;min-height:0}
  #title{display:none}
  .seg button{font-size:15px;padding:0 13px}
  .seg .x{display:none}
  #levels{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #levels::-webkit-scrollbar{display:none}
  .chip{font-size:14px;padding:0 11px}
  #mid{flex-direction:column-reverse;padding:0 14px;gap:8px}
  #foxCol{width:auto;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;padding:0}
  #fox{order:0;flex:none}
  #fox svg{width:60px;height:69px}
  #bubble{order:1;flex:1;font-size:15px;padding:8px 12px;min-height:0;border-radius:16px 16px 16px 6px}
  #boardBtn{order:2;margin:0;align-self:center;height:44px;padding:0 10px;font-size:14px}
  #stageCol{gap:10px}
  #actions,#slots{padding-left:52px}
  .pad{padding-left:48px}
  .fan{transform:scale(.7);margin:-40px 0}
  .ask-line{font-size:19px}
  .big{font-size:22px;min-width:120px;height:56px;padding:0 18px}
  .slot{width:44px;height:54px;font-size:13px}
  #slots{gap:8px}
  .ball{width:140px;height:140px;font-size:66px}
  .mini{width:54px;height:66px;font-size:16px}
  .mini .dots i{width:6px;height:6px}
  .eq .op,.eq .tot{font-size:26px}
  .pc{width:44px;height:58px;font-size:14px;border-radius:10px}
  .sumline{font-size:22px;min-height:40px;gap:5px;flex-wrap:wrap}
  .hbtn{height:44px;min-width:44px;padding:0 10px;font-size:16px}
  .hbtn .w{display:none}
  .sumline span{padding:0 8px;border-radius:10px}
  .sumline em{font-size:15px}
  .pc .val{font-size:18px}
  .pc .dots{gap:2px}
  .pc .dots i,.pc .dots.d32 i{width:4px!important;height:4px!important}
  .row-cards{gap:6px;flex-wrap:nowrap}
  .hint{font-size:17px}
  #boardGrid{grid-template-columns:repeat(7,38px)}
  #boardGrid span{height:38px;font-size:14px}
}
@media (max-height:700px){
  #goal{display:none}
}
@media (max-width:760px) and (max-height:700px){
  .ball{width:110px;height:110px;font-size:52px}
}
/* phones on their side */
@media (max-height:500px) and (min-width:600px){
  #app{gap:6px;padding:8px 0}
  #title{display:none}
  #top{flex-wrap:nowrap;min-height:0}
  #levels{flex-wrap:nowrap}
  .seg button,.chip{height:40px;font-size:14px}
  #foxCol{width:170px}
  #fox svg{width:92px;height:106px}
  #bubble{font-size:14px;padding:6px 10px;min-height:0}
  #boardBtn{height:40px;font-size:14px}
  .fan{transform:scale(.55);margin:-60px 0}
  .big{height:48px;font-size:20px}
  .slot{width:40px;height:48px;font-size:12px}
  .ball{width:110px;height:110px;font-size:52px}
  .pc{width:56px;height:66px;font-size:16px}
  .ask-line{font-size:17px}
  .sumline{min-height:40px;font-size:26px}
  .hbtn{height:44px;min-width:44px;padding:0 10px;font-size:16px}
  .hbtn .w{display:none}
}