:root{
  --bg:#f3f1ea; --panel:#ffffff; --ink:#1d2433; --muted:#6b7385; --line:#e3e0d6;
  --accent:#2f6fed; --good:#1f9d61; --bad:#e5484d; --gold:#f2b01e; --purple:#9c36b5;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overscroll-behavior:none}
body{display:flex;justify-content:center}
#app{width:100%;max-width:520px;height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden}
.screen{display:none;flex:1;flex-direction:column;gap:14px;overflow-y:auto;min-height:0;
  padding:calc(16px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px))}
.screen.active{display:flex}
/* A screen scrolls, and its top padding scrolls with it, so content would otherwise pass under
   the status bar. This band holds that strip and carries the colour the bar is tinted with. */
body::before{content:'';position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);
  background:var(--barTint,var(--bg));z-index:60;pointer-events:none;transition:background .4s}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px}
.topbar h2{margin:0;font-size:20px;flex:1;text-align:center}
.iconbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--panel);
  font-size:20px;line-height:1;cursor:pointer;color:var(--ink);display:grid;place-items:center;flex:none}
.coins{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);
  padding:7px 12px;border-radius:999px;font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.coin-ic{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe28a,#f2b01e 60%,#c98a00);
  box-shadow:inset 0 0 0 1.5px #c98a00;display:inline-block;flex:none}
.btn{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-weight:650;
  padding:13px 16px;border-radius:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#3a2a00}
.btn.purple{background:var(--purple);border-color:var(--purple);color:#fff}
.btn.big{font-size:19px;padding:16px}
.btn.small{padding:9px 12px;font-size:14px;border-radius:11px}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin-top:6px}
.hero h1{margin:4px 0 0;font-size:38px;letter-spacing:-.5px}
/* The title is drawn rather than set, so the heading carries the name for a screen reader and
   the drawing is left out of the accessibility tree. */
.hero h1.wordmark{margin:2px 0 0;line-height:0;font-size:0}
.hero h1.wordmark svg{display:block;width:250px;max-width:74vw;height:auto;margin:0 auto}
.hero p{margin:0;color:var(--muted);max-width:330px}
.stack{display:flex;flex-direction:column;gap:10px}
.testbadge{background:#fff4d6;border:1px solid #f3d37a;color:#6b4d00;border-radius:12px;padding:9px 12px;font-size:13px;text-align:center}
.world{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px;display:flex;gap:12px;align-items:center}
.world{transition:border-color .2s}
.world .sw{width:68px;height:68px;border-radius:16px;flex:none;display:flex;align-items:center;justify-content:center;
  background:#a8a39a;color:#fff;line-height:1}
.world .sw .swi{font-size:36px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.world .sw:not(.on) .swi{font-size:24px}
.go{width:40px;height:40px;flex:none;border:0;border-radius:50%;color:#fff;font-size:17px;font-weight:800;
  cursor:pointer;display:grid;place-items:center;box-shadow:0 3px 0 rgba(0,0,0,.14);font-family:inherit}
.go:active{transform:translateY(2px);box-shadow:none}
.world .wtagline{font-size:12px;font-style:italic;color:var(--muted);margin:1px 0 3px}
.world .wtro{font-size:15px}
.world .info{flex:1;min-width:0}
.world h3{margin:0 0 3px;font-size:17px}
.world p{margin:0;color:var(--muted);font-size:13px;line-height:1.35}
.world .meta{margin-top:5px;font-size:12px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.lvl{aspect-ratio:1;border-radius:14px;border:1px solid var(--line);background:var(--panel);font:inherit;font-weight:750;font-size:20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;color:var(--ink)}
.lvl{transition:background .2s,color .2s}
.lvl .st{font-size:11px;letter-spacing:1px;color:var(--gold)}
.lvl.done .st{color:#ffe9a8}
.lvl .st .off{color:#ddd8cb}
.lvl.done .st .off{color:rgba(255,255,255,.3)}
.lvl .sub{font-size:10px;display:block;font-weight:600;opacity:.8;color:inherit}
.lvl.done .mm{color:rgba(255,255,255,.85)}
.lvl.done span{color:#fff}
#s-levels{transition:background .3s}
.lvlIcon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;
  font-size:15px;vertical-align:-6px;margin-right:2px}
.lvl.locked{opacity:.4;cursor:default}
.desc{color:var(--muted);font-size:14px;margin:0}
/* game */
#s-game{gap:6px;
  padding:calc(8px + env(safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px))}
.hud{display:flex;align-items:center;gap:8px}
.hud .label{flex:1;font-weight:750;font-size:15px;line-height:1.15;min-width:0}
.hud .label small{display:block;color:var(--muted);font-weight:500;font-size:12px}
.lives{font-size:19px;letter-spacing:1px;color:var(--bad);flex:none}
.lives .off{color:#cfcabd}
.timerRow{display:flex;align-items:center;gap:10px}
#timerText{font-weight:800;font-size:22px;font-variant-numeric:tabular-nums;min-width:62px;color:var(--ink);transition:color .2s}
.timerBar{flex:1;height:10px;border-radius:99px;background:#e6e1d5;overflow:hidden}
#timerFill{height:100%;width:100%;border-radius:99px;background:var(--good);transition:background-color .3s}
.timerRow.warn #timerText{color:#e8590c}
.timerRow.warn #timerFill{background:#f08c00}
.timerRow.danger #timerText{color:var(--bad);animation:pulse .5s ease-in-out infinite alternate}
.timerRow.danger #timerFill{background:var(--bad)}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.18)}}
#boardWrap.danger{box-shadow:inset 0 0 0 3px rgba(229,72,77,.55);border-radius:14px;animation:dangerGlow .5s ease-in-out infinite alternate}
@keyframes dangerGlow{from{box-shadow:inset 0 0 0 2px rgba(229,72,77,.25)}to{box-shadow:inset 0 0 0 4px rgba(229,72,77,.7)}}
.req{margin-top:6px;font-size:12px;color:#6b4d00;background:#fff4d6;border-radius:8px;padding:5px 8px}
.lvl .sc{font-size:10px;color:var(--muted);font-weight:600}

.newtag{display:inline-block;background:var(--gold);color:#3a2a00;font-size:11px;font-weight:800;border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:middle}
.scoreline{font-size:15px;color:var(--ink);margin:4px 0}
#boardWrap{flex:1;min-height:0;position:relative}
/* none, not manipulation: the board handles every gesture itself, and anything the browser
   keeps for itself arrives late and half swallowed. */
#board{position:absolute;left:0;top:0;width:100%;height:100%;touch-action:none;display:block}
.gamebar{display:flex;gap:6px;align-items:center}
.gamebar .btn{flex:1;padding:11px 2px;font-size:13px;white-space:nowrap}

#designBar{display:none;align-items:center;gap:10px;background:#f6ebfa;border:1px solid #e2c6ee;border-radius:14px;padding:8px 10px;font-size:13px;color:#5b1f6e}
#designBar.show{display:flex}
#designBar span{flex:1}
/* settings */
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px}
.row span{font-weight:600}
.row small{display:block;color:var(--muted);font-weight:400}
.switch{width:50px;height:30px;accent-color:var(--accent)}
/* modal */
.modal{position:absolute;inset:0;background:rgba(20,24,34,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}
.modal.hidden{display:none}
.card{background:var(--panel);border-radius:22px;padding:20px;width:100%;max-width:380px;text-align:center;max-height:100%;overflow-y:auto;
  box-shadow:0 20px 50px rgba(0,0,0,.25);animation:pop .22s ease-out}
.card h3{margin:0 0 6px;font-size:23px}
.card p{margin:6px 0;color:var(--muted);line-height:1.4}
.card .stars{font-size:40px;letter-spacing:6px;color:var(--gold);margin:6px 0}
.card .stars .off{color:#e2ddd0}
.card .reward{display:inline-flex;align-items:center;gap:8px;font-size:22px;font-weight:800;margin:8px 0 12px}
.card .stack{margin-top:14px}
.legend{text-align:left;display:flex;flex-direction:column;gap:10px;margin:10px 0 4px}
.legend div{display:flex;gap:10px;align-items:center;font-size:14px;line-height:1.35}
.legend svg{flex:none}
.legend b{color:var(--ink)}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
/* Encouragement sits in its own strip below the board. It never covers a single arrow,
   the row keeps its height so nothing jumps, and the message is small. */
#praiseBar{height:24px;display:flex;align-items:center;justify-content:center;pointer-events:none;margin:2px 0 0}
#praise{background:#1f9d61;color:#fff;font-weight:700;padding:3px 11px;border-radius:999px;font-size:12px;
  opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s;white-space:nowrap;max-width:100%;
  overflow:hidden;text-overflow:ellipsis}
#praise.show{opacity:1;transform:none}
#debugBox{display:none;font-size:10px;line-height:1.4;color:#5b6472;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 6px}
body[data-world]{transition:background .4s}
body.lefty .gamebar{flex-direction:row-reverse}
body.lefty .hud{flex-direction:row-reverse}
.sect{margin-top:4px;font-weight:800;font-size:13px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;
  font-size:13px;font-weight:650;cursor:pointer}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.slider{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.slider span{font-weight:600;min-width:104px;font-size:14px}
.slider input{flex:1;accent-color:var(--accent)}
.slider b{min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
.preview{height:54px;border-radius:12px;border:1px solid var(--line);background:var(--panel);display:block;width:100%}
#s-game{transition:background .4s}
#s-game[data-tint]{background:var(--wtint)}
.medal{font-size:44px;line-height:1;margin:2px 0 4px}
.lvl .mm{font-size:9px;letter-spacing:1px;color:var(--good)}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:40;display:none}
#praise.big{font-size:13.5px;padding:4px 14px;background:var(--gold);color:#3a2a00}
#boardWrap.endgame{box-shadow:inset 0 0 0 3px rgba(242,176,30,.5);border-radius:14px}
.label small.endgame{color:#b35c00;font-weight:800}
/* the count of hints still available, worn on the hint button */
.btn .tag{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;margin-left:5px;
  border-radius:999px;background:rgba(0,0,0,.22);color:#fff;font-size:11px;font-weight:800;vertical-align:1px}
.btn .tag.empty{background:rgba(0,0,0,.14);color:rgba(255,255,255,.65)}
/* the rules sit behind a question mark in the corner rather than a full width button */
.gamebar .iconbtn{flex:none;width:44px;height:44px;padding:0;font-size:17px;font-weight:800}
.sel{font:inherit;font-size:13px;padding:7px 9px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);max-width:56%}
.wtag{font-size:13px;font-style:italic;color:var(--muted);margin:2px 0 6px}
.carry{font-size:12.5px;color:var(--muted);text-align:left;margin-top:10px}
.wbadge{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 6px;box-shadow:0 4px 0 rgba(0,0,0,.12)}
.monthHero{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:10px}
.monthEmblem{font-size:46px;display:block;line-height:1}
.monthHero h3{margin:4px 0 6px}
.monthHero p{font-size:13px;color:var(--muted);margin:0}
.monthStats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.monthStats div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 4px}
.monthStats b{display:block;font-size:19px}
.monthStats span{font-size:10.5px;color:var(--muted)}
.monthDone{text-align:center;font-weight:700;color:var(--good);font-size:13px}
.shelf{margin:0 0 18px;padding:0 4px}
.shelfRow{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.shelfBoard{height:11px;border-radius:3px;background:linear-gradient(#c39769,#8a6540);
  box-shadow:0 6px 12px rgba(0,0,0,.2);margin:-2px 0 7px}
.tro{text-align:center;display:flex;flex-direction:column;align-items:center;padding:0 2px}
.troCv{width:100%;height:118px;display:block;align-self:end}
.tro b{font-size:13px;margin-top:2px}
.troTier{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.5px;text-transform:uppercase}
.tro.gold .troTier{color:#a87d13}
.tro.silver .troTier{color:#878e97}
.tro.bronze .troTier{color:#8f5520}
.troNote{font-size:10.5px;color:var(--muted);margin-bottom:6px}
/* Look and feel, within reach of the thumb: it slides up over the button bar of the
   playing screen, changes take effect on the board behind it, and one tap returns to play. */
#quickPanel{position:absolute;left:0;right:0;bottom:0;z-index:45;background:var(--panel);
  border-top:1px solid var(--line);border-radius:18px 18px 0 0;
  padding:10px calc(12px + env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px));
  box-shadow:0 -10px 30px rgba(0,0,0,.18);max-height:62%;overflow-y:auto;
  transform:translateY(0);transition:transform .22s ease,opacity .22s}
#quickPanel.hidden{display:block;transform:translateY(105%);opacity:0;pointer-events:none}
.qHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.qHead b{font-size:15px;display:block}
.qHead small{font-size:11px;color:var(--muted)}
.qClose{border:0;background:var(--accent);color:#fff;font:inherit;font-size:12.5px;font-weight:700;
  border-radius:999px;padding:7px 12px;cursor:pointer}
.qSect{font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:9px 0 5px}
#quickBody .chip{padding:6px 11px;font-size:12px}
#quickBody .chips{gap:6px}
.hintleft{text-align:center;font-size:11px;color:var(--muted);margin:-2px 0 2px}
.mrow{display:flex;gap:8px;margin-top:10px}
.mrow .btn{flex:1}
.ribbon{background:var(--accent);color:#fff;font-weight:800;font-size:20px;padding:10px 18px;border-radius:12px;
  margin:-6px -6px 8px;box-shadow:0 6px 0 rgba(0,0,0,.08)}
.masteryBox{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0}
.mastery{font-size:13px;color:var(--muted);text-align:left;padding:5px 8px;border-radius:9px;background:#f4f2ec}
.mastery.on{color:var(--good);font-weight:700;background:#e8f6ee}
.newtag.boss{background:#d6336c;color:#fff}
.newtag.daily{background:#2f6fed;color:#fff}
.newtag.calm{background:#6ec7a0;color:#0b3b25}
/* under the effects canvas (40), so the confetti falls over it, and over the result dialog (20) */
#reveal{position:absolute;inset:0;display:none;z-index:35;overflow:hidden}
#reveal.show{display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--rc,#2b5fa8) 78%,#fff) 0%,color-mix(in srgb,var(--rc,#2b5fa8) 55%,#0b0f1c) 55%,#0b0f1c 100%);
  animation:revealIn .45s ease-out}
@keyframes revealIn{from{opacity:0}to{opacity:1}}
.revealRays{position:absolute;left:50%;top:38%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;
  background:repeating-conic-gradient(rgba(255,255,255,.10) 0 8deg,transparent 8deg 22deg);
  animation:raySpin 26s linear infinite;pointer-events:none}
@keyframes raySpin{to{transform:rotate(360deg)}}
.revealInner{position:relative;max-width:360px}
.revealEmblem{width:124px;height:124px;margin:0 auto 14px;display:grid;place-items:center;font-size:62px;
  box-shadow:0 0 0 6px rgba(255,255,255,.25),0 0 60px rgba(255,255,255,.45);animation:emblemIn .9s cubic-bezier(.2,1.6,.4,1) both .15s}
@keyframes emblemIn{0%{transform:scale(0) rotate(-40deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.revealSmall{letter-spacing:4px;font-weight:800;font-size:13px;animation:fadeUp .5s ease-out both .05s}
.revealBig{font-size:40px!important;font-weight:900;color:#fff!important;text-shadow:0 3px 0 rgba(0,0,0,.25),0 0 24px rgba(255,255,255,.35);
  animation:fadeUp .6s ease-out both .55s}
.revealTag{animation:fadeUp .6s ease-out both .75s}
.revealDesc{font-size:14px;opacity:.85;margin:0 0 20px;line-height:1.45;animation:fadeUp .6s ease-out both .9s}
#reveal .stack{animation:fadeUp .6s ease-out both 1.1s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.revealGo{background:#fff;color:var(--rc,#2b5fa8);border:0;font-weight:800}
.revealStay{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35)}
body.calmMotion .revealRays{animation:none}
.revealInner{text-align:center;color:#fff;padding:24px;animation:pop .4s ease-out}
.revealSmall{font-size:15px;letter-spacing:2px;opacity:.85;margin-bottom:18px}
.revealIcon{font-size:64px;margin-bottom:6px}
.revealBig{font-size:34px;font-weight:800;letter-spacing:1px}
.revealTag{opacity:.85;margin:8px 0 22px}
.homeRow{display:flex;gap:10px}
.homeRow .btn{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;background:#fff3d6;color:#7a5400;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}
.badge{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;opacity:.55}
.badge.on{opacity:1;border-color:var(--gold)}
.badge .bIcon{font-size:26px}
.badge small{display:block;color:var(--muted);font-weight:400;font-size:12px}
.badge .bState{margin-left:auto;color:var(--good);font-weight:800;font-size:18px}
#toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);background:#1d2433;color:#fff;padding:10px 14px;border-radius:12px;
  font-size:14px;max-width:90%;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30}
#toast.show{opacity:1}

/* ---------- rating and privacy ---------- */
.rateStar{color:var(--gold);font-size:22px}
.rateAsk{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);text-align:center}
.rateAsk p{margin:0 0 8px;font-size:13px;color:var(--muted)}
.rateAsk .btn{width:100%}
#s-privacy{overflow:hidden}   /* only the policy inside the frame scrolls, never the bar with Back */
#s-privacy.active{display:flex;flex-direction:column}
#policyFrame{flex:1;width:100%;min-height:0;border:1px solid var(--line);border-radius:14px;background:#fff;margin-top:8px}
.rateBtn{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.2}
.rateStars{color:var(--gold);font-size:18px;letter-spacing:3px;text-shadow:0 1px 0 rgba(0,0,0,.12)}

/* ---------- icons ---------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.iconbtn .ic{width:21px;height:21px}
#i-play path{fill:currentColor;stroke-width:1.5}
.btn .ic{width:20px;height:20px;vertical-align:-4px;margin-right:8px}

/* ---------- home ---------- */
#s-home .hero svg[width="132"]{width:104px;height:104px}
#s-home .hero p{font-size:14px}
.homeMain{margin-top:2px}
.homeSect{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:4px 2px -6px}
.tileGrid{display:grid;gap:10px}
.tileGrid.two{grid-template-columns:1fr 1fr}
.tileGrid.three{grid-template-columns:1fr 1fr 1fr}
.tile{appearance:none;font:inherit;color:var(--ink);background:var(--panel);border:0;border-radius:18px;padding:12px 10px;
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;cursor:pointer;
  box-shadow:0 1px 2px rgba(20,24,34,.06),0 4px 14px rgba(20,24,34,.06);transition:transform .08s}
.tile:active{transform:scale(.97)}
.tile .ic{width:24px;height:24px;color:var(--accent);margin-bottom:2px}
.tile b{font-size:15px;font-weight:700}
.tile small{font-size:12px;color:var(--muted);line-height:1.25}
.tile.t-gold{background:#fff6dc}.tile.t-gold .ic{color:#c98a00}
.tile.t-purple{background:#f5eafa}.tile.t-purple .ic{color:var(--purple)}
.tile.t-green{background:#e6f5ee}.tile.t-green .ic{color:#27866b}
.tile.t-blue{background:#e8eef9}.tile.t-blue .ic{color:#2b5fa8}
.tile.small{align-items:center;text-align:center;padding:12px 6px}
.tile.small b{font-size:13px;font-weight:650}
.tile:disabled{opacity:1}
.homeFoot{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 6px;margin-top:auto;padding-top:6px}
.homeFoot button{appearance:none;background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--muted);padding:8px 8px;cursor:pointer}
.homeFoot .rateStars{font-size:12px;letter-spacing:1px}
.homeFoot .ic{width:14px;height:14px;vertical-align:-2px}

/* ---------- the game bar: five borderless icon buttons, the hint raised in the middle ---------- */
.gamebar{display:flex;justify-content:space-around;align-items:center;gap:8px;padding:2px 4px}
.barbtn{appearance:none;position:relative;width:54px;height:54px;border:0;border-radius:18px;background:var(--panel);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none;
  box-shadow:0 1px 2px rgba(20,24,34,.07),0 4px 14px rgba(20,24,34,.08);transition:transform .08s}
.barbtn:active{transform:scale(.93)}
.barbtn .ic{width:25px;height:25px;opacity:.85}
.barbtn.hint{width:62px;height:62px;border-radius:21px;color:#c98a00;background:#fff6dc}
.barbtn.hint .ic{width:29px;height:29px;opacity:1}
.barbtn .count{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;
  background:var(--accent);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;
  box-shadow:0 0 0 2px var(--bg)}
.barbtn.hint.empty{color:var(--muted);background:var(--panel)}
.barbtn.hint.empty .count{background:var(--muted)}
.barbtn:disabled{opacity:.45}

/* ---------- home: language, worlds card ---------- */
.topLeft{display:flex;gap:8px}
/* same height as the Settings button, a little wider so the flag and its letters sit side by side */
.langBtn{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;width:auto;padding:0 10px;line-height:1}
.langBtn .flag{font-size:17px}
.langBtn .code{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--muted)}
.langList{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow-y:auto;margin:6px 0 10px}
.langItem{appearance:none;font:inherit;display:flex;align-items:center;gap:12px;text-align:left;background:var(--bg);
  border:0;border-radius:12px;padding:9px 12px;color:var(--ink);cursor:pointer}
.langItem .flag{font-size:22px}
.langItem b{display:block;font-size:14px}.langItem small{color:var(--muted);font-size:12px}
.langItem.on{background:var(--accent);color:#fff}.langItem.on small{color:rgba(255,255,255,.8)}
.worldsCard{appearance:none;font:inherit;display:flex;align-items:center;gap:14px;width:100%;border:0;cursor:pointer;
  padding:16px 16px;border-radius:22px;color:#fff;text-align:left;position:relative;overflow:hidden;
  background:linear-gradient(120deg,#27866b 0%,#2b5fa8 55%,#6a3fb5 100%);
  box-shadow:0 6px 18px rgba(43,95,168,.28);transition:transform .08s}
.worldsCard:active{transform:scale(.98)}
.worldsCard::after{content:'';position:absolute;right:-30px;top:-40px;width:140px;height:140px;border-radius:50%;
  background:rgba(255,255,255,.10)}
.wcIcon{width:48px;height:48px;border-radius:15px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.wcIcon .ic{width:28px;height:28px}
.wcText{flex:1;display:flex;flex-direction:column;gap:2px}
.wcText b{font-size:21px;font-weight:800;letter-spacing:.01em}
.wcText small{font-size:12.5px;opacity:.88}
.wcGo{width:24px;height:24px;opacity:.9}

/* ---------- reset view: a small shake when there is nothing to reset ---------- */
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
#boardWrap.shake{animation:shake .36s ease}

/* ---------- secret list: a chevron at the right edge ---------- */
.badge .bText{flex:1;min-width:0}
.goBtn{appearance:none;flex:none;margin-left:auto;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent);color:#fff;display:grid;place-items:center}
.goBtn .ic{width:22px;height:22px;stroke-width:2.5}

/* ---------- weekly: six animal tiles in the style of the level grid ---------- */
.weekGrid{grid-template-columns:repeat(3,1fr)}
.lvl.wk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.lvl.wk .wkIcon{font-size:34px;line-height:1.1}
.lvl.wk .wkName{font-size:13px;font-weight:700}
.lvl.wk{border-color:#e9c46a;background:#fff8e6;color:var(--ink)}
.lvl.wk.done{border-color:#2f9e6b;background:#2f9e6b;color:#fff}

/* the clock has not started yet: it starts with the first tap */
.timerRow.waiting #timerText{opacity:.55}
.timerRow.waiting .timerBar{opacity:.55}

/* ---------- dark themes: deep versions of the surfaces that are otherwise fixed pale colours ---------- */
body.darkUi .tile.t-gold{background:rgba(242,176,30,.16)}  body.darkUi .tile.t-gold .ic{color:#f2c14e}
body.darkUi .tile.t-green{background:rgba(63,160,127,.20)} body.darkUi .tile.t-green .ic{color:#5fd3a6}
body.darkUi .tile.t-purple{background:rgba(156,54,181,.24)} body.darkUi .tile.t-purple .ic{color:#d08ae6}
body.darkUi .tile.t-blue{background:rgba(63,127,208,.24)}  body.darkUi .tile.t-blue .ic{color:#8ab8f0}
body.darkUi .tile .ic{color:#8ab8f0}
body.darkUi .tile,body.darkUi .barbtn,body.darkUi .worldsCard{box-shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.25)}
body.darkUi .barbtn.hint{background:rgba(242,176,30,.18);color:#f2c14e}
body.darkUi .barbtn.hint.empty{background:var(--panel);color:var(--muted)}
body.darkUi .barbtn .count{box-shadow:0 0 0 2px var(--bg)}
body.darkUi .lvl.wk{background:rgba(233,196,106,.12);border-color:#b8913a;color:var(--ink)}
body.darkUi .lvl.wk.done{background:#2f9e6b;border-color:#2f9e6b;color:#fff}
body.darkUi .mastery{background:rgba(255,255,255,.06)}
body.darkUi #designBar{background:rgba(156,54,181,.22);border-color:rgba(156,54,181,.5);color:#ecd3f5}
body.darkUi #debugBox{background:var(--panel);color:var(--muted)}
body.darkUi .homeFoot button{color:var(--muted)}
body.darkUi .mastery.on{background:rgba(31,157,97,.18);color:#5fd3a6}

/* a drawn calendar for the daily dialogs: the emoji one shows a fixed date on Android */
.medalIcon{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:20px;background:#fff6dc;color:#c98a00}
.medalIcon .ic{width:36px;height:36px}
body.darkUi .medalIcon{background:rgba(242,176,30,.16);color:#f2c14e}