/* Cozy Breakout game page: single dark look (the game's own world), inside the light Cozy Rewards app. */

/* Layout: one centred phone-width column: HUD, board, phone controls, test drawer. Single dark look matching the rewards app. */
:root{
  --broth:#1B120B; --bowl:#271A10; --bowl-2:#33231A; --line:#4A3426;
  --cream:#FBEFD9; --muted:#C9B49A; --noodle:#F7D774; --orange:#F5A623; --ok:#4CC38A; --red:#E4572E;
  --display:"Lilita One","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--broth);color:var(--cream)}
body{margin:0;font:15px/1.45 var(--body)}
body.playing{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
.wrap{max-width:440px;margin:0 auto;padding-inline:16px;padding-block:14px 32px;display:flex;flex-direction:column;gap:10px}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.brand h1{font:400 30px/1 var(--display);margin:2px 0 0;color:var(--noodle);text-shadow:0 3px 0 #7a4a12}
.hud{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:end}
.score{font:400 38px/1 var(--display);font-variant-numeric:tabular-nums}
.score small{font:600 12px var(--body);color:var(--muted);margin-left:6px}
.right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.level{font:800 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.level.boss{color:var(--red)}
.lives{display:flex;gap:4px;align-items:center}
.lives i{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#F5A623 0 38%,#fff7ea 40%);display:inline-block}
.stage{position:relative;border-radius:20px;background:var(--bowl);padding:8px;box-shadow:inset 0 0 0 2px var(--line)}
canvas#board{display:block;width:100%;aspect-ratio:360/600;max-width:100%;border-radius:13px;touch-action:none;cursor:none}
.overlay{position:absolute;top:8px;right:8px;bottom:8px;left:8px;inset:8px;border-radius:13px;background:rgba(27,18,11,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:22px;overflow:auto}
.overlay h2{font:400 30px/1.05 var(--display);margin:0;color:var(--noodle);text-wrap:balance}
.overlay p{margin:0;color:var(--muted);max-width:32ch}
.overlay .big{font:400 54px/1 var(--display);color:var(--cream);font-variant-numeric:tabular-nums}
.overlay.boss{background:rgba(20,12,16,.93)}
.overlay.boss h2{color:#ff8a6a}
.gloat{display:flex;flex-direction:column;align-items:center;gap:6px}
.gloat img{width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));animation:gl .6s ease-out both}
.gloat .bub{background:#fff;color:#1b1c22;font:800 12px var(--body);padding:6px 12px;border-radius:12px;max-width:30ch;animation:gl .4s .5s ease-out both}
.gloat .bub.good{background:var(--ok);color:#06281a;animation-delay:1.1s}
@keyframes gl{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gloat img,.gloat .bub{animation:none}}
#ovOver{justify-content:flex-start;padding-top:18px;gap:8px}
.overlay .bossimg{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.overlay .eyebrow{font:800 11px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.overlay .story{color:var(--cream);font-size:14px;max-width:32ch}
.btn{border:0;border-radius:14px;padding:13px 22px;font:800 16px var(--body);cursor:pointer;background:var(--orange);color:#1B120B;box-shadow:0 4px 0 #9a5f0d}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #9a5f0d}
.btn.ghost{background:var(--bowl-2);color:var(--cream);box-shadow:0 4px 0 #120c07}
.keys{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;font-size:12px;color:var(--muted)}
.keys kbd{background:var(--bowl-2);border-radius:6px;padding:2px 7px;font:800 12px var(--body);color:var(--cream);box-shadow:0 2px 0 #120c07}
.note{font-size:11px;color:var(--muted)}
.pad{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pad button{height:64px;border:0;border-radius:16px;background:var(--bowl-2);color:var(--cream);font-size:26px;cursor:pointer;touch-action:none;box-shadow:0 4px 0 #120c07}
.pad button.on{background:var(--orange);color:#1B120B}
.hint{font-size:12px;color:var(--muted);text-align:center}
button:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--noodle);outline-offset:2px}

.brand .back{display:inline-block;color:var(--orange);font-weight:800;font-size:12px;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.notice{background:var(--bowl-2);border-radius:12px;padding:10px 12px;color:var(--cream)!important;font-size:13px}
.result{font-size:14px;color:var(--cream);max-width:32ch}
.result.ok{color:#bff0d6}.result.bad{color:#ffb3a1}
.overlay a.btn{text-decoration:none;display:inline-block}
body.practice #modeHint::before{content:"Practice mode. "}

/* 1.4.1: sound button over the board, power-up list, leaderboard (tuned by Rana in the lab, 2 Oct 2026) */
.sndfab{position:absolute;top:14px;right:14px;z-index:6;width:38px;height:38px;border-radius:50%;border:2px solid var(--broth);background:var(--orange);color:var(--broth);display:grid;place-items:center;cursor:pointer;padding:0}
.sndfab svg{width:20px;height:20px;fill:currentColor}
.sndfab svg .w{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sndfab .off{display:none}.sndfab.muted .on{display:none}.sndfab.muted .off{display:block}.sndfab.muted{background:var(--bowl-2);color:var(--muted);border-color:var(--line)}
.sndfab:focus-visible,.trophyfab:focus-visible{outline:3px solid var(--noodle);outline-offset:2px}
.trophyfab{position:absolute;top:14px;left:14px;z-index:6;width:38px;height:38px;border-radius:50%;border:2px solid rgba(251,239,217,.35);background:rgba(27,18,11,.72);display:none;place-items:center;cursor:pointer;padding:0;font-size:17px;line-height:1}
body.playing .trophyfab{display:grid}
.fxlist{position:absolute;left:14px;top:66%;z-index:4;display:flex;flex-direction:column;gap:4px;max-width:62%;pointer-events:none}
.fx{position:relative;overflow:hidden;display:flex;align-items:center;gap:5px;padding:4px 8px 6px;border-radius:8px;background:rgba(27,18,11,.30);color:var(--cream);font:800 9px var(--body);border-left:3px solid var(--ok);text-shadow:0 1px 2px rgba(0,0,0,.8)}
.fx.bad{border-left-color:var(--red)}
.fx .fxn{white-space:nowrap}
.fx .fxt{margin-left:auto;font-variant-numeric:tabular-nums;color:#fff;background:rgba(255,255,255,.14);border-radius:5px;padding:0 4px}
.fx b{position:absolute;left:0;bottom:0;height:2px;background:var(--ok);transition:width .2s linear}
.fx.bad b{background:var(--red)}
.fx.flash{animation:fxin .25s ease-out}
@keyframes fxin{from{transform:translateX(-10px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.fx.flash{animation:none}.fx b{transition:none}}
.lbbtn{margin-top:2px}
#ovLb .lbsub{font-size:12px}
.lbl{list-style:none;margin:4px 0 6px;padding:0;width:100%;max-width:290px;display:flex;flex-direction:column;gap:4px}
.lbl li{display:flex;align-items:center;gap:10px;background:var(--bowl-2);border-radius:10px;padding:6px 10px;font:600 14px var(--body)}
.lbl li .rk{font:16px var(--display);color:var(--noodle);width:22px;text-align:center}
.lbl li b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--noodle)}
.lbl li.me{box-shadow:inset 0 0 0 2px var(--orange)}
.lbl li.gap{background:none;justify-content:center;color:var(--muted);padding:0}
.lbl li.lbmsg{justify-content:center;color:var(--muted)}
.lbprz{width:100%;max-width:290px;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);margin-bottom:6px}
.lbprz div{display:flex;justify-content:space-between;gap:8px;background:rgba(255,255,255,.05);border-radius:8px;padding:5px 10px}
.lbprz b{color:var(--cream);text-align:right}

/* 1.5.0: desktop layout (mouse only, page locked, 3 columns: title | game | empty) with the comic-story background and the Cozy Breakout logo (logo 3, ramen king, cut out).
   Values tuned by Rana in the Cozy Breakout Desktop Lab, 2 Oct 2026. Phones and tablets keep the layout above. */
.keys.ms{display:none}
.brand h1 .logo{display:none}
.howto{display:none}
.prog{display:none}
.side{display:none}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  :root{--page:#F4E6CF;--ink:#3B2416;--title-size:54px;--title-shadow:#F5A623;--board-h:calc(100dvh - 88px);--bg-fade:.47;--bg-blur:2.5px}
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  html,body{background:var(--page)}
  body::before{content:"";position:fixed;inset:calc(var(--bg-blur) * -2);z-index:0;background:var(--desk-bg,none) center/cover no-repeat;filter:blur(var(--bg-blur))}
  body::after{content:"";position:fixed;inset:0;z-index:0;background:var(--page);opacity:var(--bg-fade);pointer-events:none}
  .wrap{position:relative;z-index:1;max-width:none;height:100%;margin:0;padding:16px 32px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:40px;row-gap:10px;grid-template-areas:"title hud side" "title stage side" ". hint ." ". . ."}
  .top{grid-area:title;align-self:stretch;min-height:0;overflow:visible;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;text-align:center;padding-top:4px;min-height:0}
  .brand{display:flex;flex-direction:column;align-items:center;width:100%;flex:0 1 calc(24vh + 44px);min-height:80px}
  .brand h1{margin:0;width:100%;flex:1 1 auto;min-height:0;display:flex;justify-content:center;align-items:flex-start}
  .brand h1 .logo{max-height:100%;width:auto!important;max-width:100%!important;min-height:0;object-fit:contain}
  .howto{display:flex;flex-direction:column;flex:0 0 auto;min-height:0;width:100%;max-width:480px;text-align:left;background:#FBEFD9;color:#2A1C12;border:3px solid #1B120B;border-radius:12px;box-shadow:5px 5px 0 #1B120B;overflow:hidden}
  .ht-tabs{display:flex;border-bottom:3px solid #1B120B;background:#F5A623}
  .ht-tabs button{flex:1;border:0;border-right:2px solid #1B120B;background:transparent;color:#1B120B;font:800 12.5px var(--body);padding:6px 4px;cursor:pointer;letter-spacing:.02em}
  .ht-tabs button:last-child{border-right:0}
  .ht-tabs button:hover{background:#ffc24a}
  .ht-tabs button.on{background:#FBEFD9}
  .ht-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px 12px;scrollbar-width:thin}
  .ht-body{display:grid}
  .ht-body>.ht-pane{grid-area:1/1;min-width:0}
  .howto .ht-body>.ht-pane[hidden]{display:block!important;visibility:hidden}
  .prog{display:flex;flex-direction:column;flex:1 0 auto;min-height:0;width:100%;max-width:480px;text-align:left;background:#FBEFD9;color:#2A1C12;border:3px solid #1B120B;border-radius:12px;box-shadow:5px 5px 0 #1B120B;overflow:hidden}
  .pg-head{background:#1B120B;color:#F7D774;font:400 15px/1 var(--display);letter-spacing:.04em;padding:6px 12px 5px}
  .pg-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 12px 8px;display:flex;flex-direction:column;gap:5px;scrollbar-width:thin}
  .pg-msg{margin:0;font-size:12.5px;color:#4A3426}
  .pg-msg a{color:#1B120B;font-weight:800}
  .pg-top{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
  .pg-lbl{display:block;font:800 10px var(--body);letter-spacing:.08em;text-transform:uppercase;color:#8a5a2b}
  .pg-pts{display:block;font:400 24px/1 var(--display);color:#1B120B;font-variant-numeric:tabular-nums}
  .pg-chip{font:800 11px var(--body);border-radius:6px;padding:3px 8px;background:#F5A623;color:#1B120B;white-space:nowrap}
  .pg-chip.done{background:#4CC38A;color:#06281a}
  .pg-sec{border-top:2px dashed #e0c9a6;padding-top:5px;display:flex;flex-direction:column;gap:3px}
  .pg-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;line-height:1.25}
  .pg-line b{color:#1B120B}
  .pg-need{font:800 11.5px var(--body);color:#C0392B;white-space:nowrap}
  .pg-bar{position:relative;height:8px;border-radius:5px;background:#ead6b8;box-shadow:inset 0 0 0 1.5px #1B120B;overflow:hidden}
  .pg-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#F5A623,#F7D774);border-right:1.5px solid #1B120B}
  .pg-row{display:flex;align-items:center;gap:8px}
  .pg-row .pg-bar{flex:1 1 auto}
  .pg-tiers{display:flex;gap:3px;flex:0 0 auto}
  .pg-tiers span{font:700 10.5px var(--body);border-radius:5px;padding:1px 6px;background:#ead6b8;color:#4A3426}
  .pg-tiers span.won{background:#4CC38A;color:#06281a}
  .pg-tiers span.out{background:#d9cbb5;color:#8a7a66;text-decoration:line-through}
  .pg-tiers span.next{background:#1B120B;color:#F7D774}
  .pg-stamp{display:flex;gap:9px;align-items:center}
  .pg-stamp img{width:56px;height:36px;object-fit:cover;border-radius:5px;box-shadow:0 0 0 2px #1B120B;flex:0 0 auto}
  .pg-stamp>div{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
  .ht-steps{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:2px;font:500 12px/1.3 var(--body)}
  .ht-steps b,.ht-list b{color:#1B120B}
  .ht-orbs{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 2px;font-size:12px}
  .ht-orbs div{display:flex;align-items:center;gap:6px}
  .ht-note{margin:0 0 4px;font-size:11px;color:#6E5340}
  .ht-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 12px}
  .ht-list li{display:flex;gap:7px;align-items:flex-start;min-width:0}
  .ht-list li div{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:12px;line-height:1.25;min-width:0}
  .ht-list li div span:last-child{flex-basis:100%;color:#4A3426;font-size:11px}
  .ht-t{font:800 10px var(--body);background:#1B120B;color:#FBEFD9;border-radius:5px;padding:1px 6px;font-variant-numeric:tabular-nums}
  .orb{flex:0 0 auto;display:inline-block;width:16px;height:16px;border-radius:50%;margin-top:1px;background:radial-gradient(circle,#fff 0 18%,var(--oc) 45%,transparent 72%);box-shadow:0 0 0 1.5px var(--oc)}
  .orb.good{--oc:#4CC38A}.orb.bad{--oc:#ff4d6d}.orb.gold{--oc:#F7D774}
  .orb.ember{--oc:#ff7a2a;background:radial-gradient(circle at 50% 45%,#ffd36e 0 22%,#ff7a2a 30% 55%,transparent 70%);box-shadow:0 0 6px #ff5a1f}
  .bk{flex:0 0 auto;display:inline-block;width:20px;height:11px;border-radius:3px;margin-top:3px;background:#E3B98A;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 0 0 1.5px #1B120B}
  .bk-b{background:#F5A623}.bk-l{background:#ff6fb0}.bk-i{background:#bfe9ff}.bk-s{background:#9a9aa0}.bk-c{background:#E4572E}.bk-g{background:#e9e4f7;opacity:.7}.bk-f{background:#F7D774}.bk-h{background:#5a2a1a;box-shadow:inset 0 -3px 0 #ff7a2a,0 0 0 1.5px #1B120B}.bk-m{background:repeating-linear-gradient(45deg,#b98cf0 0 4px,#8e63d0 4px 8px)}
  .brand h1{font-size:var(--title-size);color:var(--ink);text-shadow:0 4px 0 var(--title-shadow);text-wrap:balance}
  .brand h1 .logo{display:block;width:100%;max-width:480px;height:auto;margin:6px auto 0;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
  .brand h1 .ttl.has-logo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .brand .back{font-size:16px;font-weight:800;letter-spacing:.08em;color:#1B120B;background:#FBEFD9;border:3px solid #1B120B;border-radius:8px;padding:6px 14px;box-shadow:3px 3px 0 #1B120B}
  .brand .back:hover{background:#F5A623}
  .hud{grid-area:hud;color:var(--ink)}
  .hud .score small{color:var(--ink)}
  .stage{grid-area:stage;box-shadow:inset 0 0 0 2px var(--line),0 10px 30px rgba(0,0,0,.35)}
  .hint{grid-area:hint;justify-self:center;color:var(--ink);background:#FBEFD9;border-radius:999px;padding:3px 12px}
  canvas#board{height:var(--board-h);width:auto;max-width:none}
  .pad{display:none!important}
  .keys.kb,.keys.ph{display:none}
  .keys.ms{display:flex}
  .lbbtn,.trophyfab,body.playing .trophyfab{display:none!important}
  .side{grid-area:side;align-self:stretch;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding-top:4px}
  .sd-row{width:100%;max-width:480px;display:flex;align-items:stretch;gap:8px}
  .sd-row .sd-card{width:auto}
  .sd-card{width:100%;max-width:480px;background:#FBEFD9;color:#2A1C12;border:3px solid #1B120B;border-radius:12px;box-shadow:5px 5px 0 #1B120B;overflow:hidden;display:flex;flex-direction:column;text-align:left}
  .sd-lb{flex:0 0 auto}
  .sd-prz{flex:0 0 118px;min-width:0}
  .sd-tasks{flex:1 1 auto;min-width:0}
  .sd-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;background:#1B120B;color:#F7D774;font:400 17px/1 var(--display);letter-spacing:.03em;padding:8px 12px 7px}
  .sd-head small{font:700 11px var(--body);color:#C9B49A;letter-spacing:.02em}
  .sd-list{list-style:none;margin:0;padding:8px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:5px 8px;flex:1 1 auto;min-height:0}
  .sd-list li.sd-msg{grid-column:1/-1;grid-row:1/-1;align-self:start}
  .sd-you{margin:0 8px 8px;padding:8px 12px;border-radius:8px;background:#F5A623;box-shadow:inset 0 0 0 2px #1B120B;display:flex;align-items:center;justify-content:space-between;gap:10px;font:700 13px var(--body);color:#1B120B}
  .sd-you b{font:400 20px/1 var(--display);font-variant-numeric:tabular-nums}
  .sd-you span{font:800 13px var(--body)}
  .sd-you span{display:inline-flex;align-items:center}
  .sd-you em{display:inline-flex;align-items:center;justify-content:center;font:700 11.5px/1 var(--body);font-style:normal;margin-left:8px;padding:5px 10px;border-radius:6px;background:#1B120B;color:#F7D774}
  .sd-you b{margin-left:auto;text-align:right}
  .sd-list li{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:8px;background:#f5e3c6;font:600 13px var(--body)}
  .sd-list li .rk{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font:400 13px var(--display);background:#ead6b8;color:#1B120B}
  .sd-list li.r1 .rk{background:#F7D774;box-shadow:0 0 0 2px #b8860b}.sd-list li.r2 .rk{background:#e3e3e3;box-shadow:0 0 0 2px #9a9aa0}.sd-list li.r3 .rk{background:#e8b58a;box-shadow:0 0 0 2px #a0522d}
  .sd-list li .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sd-list li{min-width:0}
  .sd-list li b{font-variant-numeric:tabular-nums;color:#1B120B}
  .sd-list li.me{background:#F5A623;box-shadow:inset 0 0 0 2px #1B120B}
  .sd-list li.empty{background:transparent;border:1.5px dashed #d9c3a0;color:#a08566;font-weight:500;font-style:italic}
  .sd-list li.empty b{color:#a08566}
  .sd-list li.gap{background:none;justify-content:center;padding:0;color:#8a5a2b}
  .sd-list li.sd-msg{background:none;color:#4A3426;font-weight:500}
  .sd-prizes{display:flex;flex-direction:column;gap:5px;padding:2px 8px 4px;flex:1 1 auto;justify-content:center}
  .pz-big{display:flex;flex-direction:column;align-items:center;padding:8px 6px 4px;line-height:1}
  .pz-big b{font:400 34px/1 var(--display);color:#1B120B}
  .pz-big span{font:800 10px var(--body);letter-spacing:.06em;text-transform:uppercase;color:#8a5a2b;margin-top:3px;text-align:center}
  .pz-note{margin:0 8px 7px;font-size:9.5px;line-height:1.25;color:#6E5340;text-align:center}
  .sd-pz{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:4px 6px;border-radius:7px;background:#f5e3c6}
  .sd-pz img{display:none;height:26px;aspect-ratio:25/16;width:auto;object-fit:cover;border-radius:5px;box-shadow:0 0 0 2px #1B120B}
  .sd-pz div{display:flex;justify-content:space-between;align-items:baseline;gap:4px;line-height:1.1}
  .sd-pz b{font:400 13px/1.1 var(--display);color:#1B120B}
  .sd-pz span{font:800 10px var(--body);color:#8a5a2b;letter-spacing:.04em;text-transform:uppercase}
  .sd-pz em{align-self:stretch;text-align:center;font:800 10px var(--body);font-style:normal;border-radius:5px;padding:2px 4px;background:#ead6b8;color:#1B120B;white-space:nowrap}
  .sd-pz em.won{background:#4CC38A;color:#06281a}.sd-pz em.out{background:#d9cbb5;color:#8a7a66}.sd-pz em.low{background:#C0392B;color:#fff}
  .tk-how{margin:5px 12px 0;font-size:11.5px;color:#4A3426}
  .tk-list{list-style:none;margin:0;padding:4px 8px 6px;display:flex;flex-direction:column;gap:3px}
  .tk-list li{display:flex;align-items:center;gap:8px;padding:3px 6px 3px 4px;border-radius:7px;background:#f5e3c6;min-height:30px}
  .tk-list li.done{background:#e3f3e9}
  .tk-ic{flex:0 0 22px;height:22px;border-radius:6px;font-size:12px!important;display:grid;place-items:center;font-size:14px;background:#1B120B;color:#F7D774}
  .tk-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.15}
  .tk-tx b{font-size:12.5px;color:#1B120B}
  .tk-tx small{font-size:10.5px;color:#6E5340;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tk-pts{flex:0 0 34px;text-align:right;font:800 11px var(--body);color:#C0392B}
  .tk-btn{flex:0 0 84px;width:84px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border:2px solid #1B120B;border-radius:6px;padding:4px 8px;font:800 11.5px/1 var(--body);cursor:pointer;background:#F5A623;color:#1B120B;box-shadow:2px 2px 0 #1B120B;text-decoration:none}
  .tk-btn:hover{background:#ffc24a}
  .tk-btn.claim{background:#4CC38A;color:#06281a}
  .tk-btn.claimed,.tk-btn[disabled]{background:#ead6b8;color:#6E5340;box-shadow:none;cursor:default;border-color:#cdb594}
  .tk-msg{background:none!important;color:#4A3426;font-size:12px}
  .tk-fh{display:flex;gap:5px;flex:1 1 auto;min-width:0;margin:0}
  .tk-fh input{flex:1 1 auto;min-width:0;border:2px solid #1B120B;border-radius:6px;padding:3px 7px;font:600 12px var(--body);background:#fff;color:#1B120B}
  .tk-fh button.x{background:#ead6b8;color:#1B120B;padding:3px 8px}
  .tk-fh button{border:2px solid #1B120B;border-radius:6px;padding:3px 10px;font:800 12px var(--body);background:#4CC38A;color:#06281a;cursor:pointer}
  .tk-note{margin:0 12px 4px;min-height:0;font-size:11px;color:#2E7D4F}
  .tk-note:empty{display:none}
  .tk-note.bad{color:#C0392B}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine) and (max-height:760px){
  .brand{flex-basis:calc(20vh + 38px)}
  .brand .back{font-size:14px;padding:4px 12px}
  .sd-list{gap:4px 8px;padding:6px 8px;grid-template-rows:repeat(5,auto)}
  .sd-you{padding:6px 12px;margin-bottom:6px}
  .sd-list li{padding:3px 8px;font-size:12.5px}
  .sd-list li .rk{flex-basis:20px;height:20px;font-size:12px}
  .sd-head{padding:6px 12px 5px;font-size:16px}
  .sd-prizes{gap:4px;padding:6px 10px 0}
  .sd-pz img{height:24px}
}

@media (min-width:1024px) and (max-width:1499px) and (hover:hover) and (pointer:fine){
  .sd-row{flex-direction:column}
  .sd-row .sd-prz{flex:0 0 auto;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center}
  .sd-row .sd-prz .sd-head{grid-column:1/-1}
  .sd-row .pz-big{padding:4px 10px;flex-direction:row;gap:6px;align-items:baseline}
  .sd-row .pz-big b{font-size:24px}
  .sd-row .pz-big span{margin-top:0;text-align:left}
  .sd-row .sd-prizes{flex-direction:row;padding:5px 8px 6px 0;gap:4px}
  .sd-row .sd-pz{flex:1 1 0;min-width:0}
  .sd-row .pz-note{display:none}
  .tk-tx b,.tk-tx small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* 1.5.0: prize tooltip */
.pz-tip{position:fixed;z-index:50;width:220px;padding:10px;border:3px solid #1B120B;border-radius:10px;background:#FBEFD9;color:#2A1C12;box-shadow:4px 4px 0 #1B120B;font:500 12px/1.35 var(--body);pointer-events:none;text-align:left}
.pz-tip img{display:block;width:100%;aspect-ratio:25/16;object-fit:cover;border-radius:6px;box-shadow:0 0 0 2px #1B120B;margin-bottom:7px}
.pz-tip b{display:block;font:400 16px/1.15 var(--display);color:#1B120B;margin-bottom:3px}
.pz-tip p{margin:3px 0 0}
.pz-tip .how{color:#8a5a2b}
.pz-tip .st{font-weight:800;color:#C0392B}
.sd-pz{cursor:help}
.sd-pz:focus-visible{outline:3px solid #F5A623;outline-offset:1px}

@media (min-width:1024px) and (max-width:1499px) and (hover:hover) and (pointer:fine){
  .sd-list li{padding:3px 8px}
  .sd-list{gap:4px 8px;padding:6px 8px}
  .tk-list li{min-height:26px;padding-top:2px;padding-bottom:2px}
}

/* 1.5.0: review boxes, Google | Facebook, filling the rest of column 3 (no points, Rana 3 Oct 2026) */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .sd-revs{width:100%;max-width:480px;flex:1 1 0;min-height:64px;display:flex;gap:8px;padding-bottom:5px}
  .sd-rev{flex:1 1 0;min-width:0;container-type:size}
  .sd-rev .sd-head{justify-content:center;text-align:center}
  .rv-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 10px;text-align:center}
  .rv-q{font:400 16px/1.1 var(--display);color:#1B120B}
  .rv-tx{margin:0;font-size:11.5px;line-height:1.3;color:#4A3426;max-width:26ch}
  .rv-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:170px;box-sizing:border-box;border:2px solid #1B120B;border-radius:6px;padding:6px 8px;font:800 12px/1 var(--body);box-shadow:2px 2px 0 #1B120B;text-decoration:none;white-space:nowrap}
  .rv-g .rv-btn{background:#fff;color:#1A73E8;border-bottom:4px solid;border-image:linear-gradient(90deg,#EA4335 0 25%,#FBBC05 0 50%,#34A853 0 75%,#4285F4 0) 1;border-radius:0;padding-bottom:4px}
  .rv-f .rv-btn{background:#1565D8;color:#fff}
  .rv-btn:hover{filter:brightness(1.08)}
  .rv-btn:focus-visible{outline:3px solid #F5A623;outline-offset:2px}
  @container (max-height:150px){.rv-tx{display:none}}
  @container (max-height:90px){.rv-q{display:none}.rv-body{padding:6px 8px}}
  @container (max-height:66px){.sd-rev .sd-head{display:none}.rv-body{padding:5px 8px}}
}
@media (min-width:1024px) and (max-width:1499px) and (hover:hover) and (pointer:fine){
  .sd-revs{min-height:40px}
}
/* 1.5.0: the hint line must never make the game column wider than the board */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .hint{max-width:calc(var(--board-h) * .6 + 16px);box-sizing:border-box;text-align:center}
}

/* 1.5.0: logo moved onto the game screen (start screen only, Rana's tuner: width 85%, 58px from the top, menu text from 374px on a 715px screen),
   an "About Cozy Breakout" box in its place on the left, and a full-width back button. Hidden on phones and tablets for now. */
.about,.ov-logo,.ov-gap,.bk-long{display:none}
.ht-ph{display:none}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .bk-short{display:none}.bk-long{display:inline}
  .brand{flex:0 0 auto;min-height:0;max-width:480px}
  .brand h1{display:none}
  .brand .back{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;font-size:15px;letter-spacing:.04em;padding:8px 14px}
  .about{display:flex;flex:1 1 auto;min-height:0;width:100%;max-width:480px;flex-direction:column;text-align:left;background:#FBEFD9;color:#2A1C12;border:3px solid #1B120B;border-radius:12px;box-shadow:5px 5px 0 #1B120B;overflow:hidden}
  .ab-head{background:#1B120B;color:#F7D774;font:400 15px/1 var(--display);letter-spacing:.04em;padding:6px 12px 5px}
  .ab-body{flex:1 1 auto;min-height:0;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:6px;align-content:center}
  .ab-it{background:#f5e3c6;border-radius:8px;padding:4px 7px;display:flex;flex-direction:column;gap:2px;min-width:0}
  .ab-it b{font:400 13px/1.1 var(--display);color:#1B120B}
  .ab-it span{font-size:11px;line-height:1.25;color:#4A3426}
  #ovStart{justify-content:flex-start;padding-top:calc((var(--board-h) + 16px) * .081 - 8px)}
  .ov-logo{display:block;flex:0 1 auto;min-height:0;width:calc((var(--board-h) * .6 + 16px) * .85);max-width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}
  .ov-gap{display:block;flex:0 1 calc((var(--board-h) + 16px) * .0965 - 24px)}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .about{flex:0 0 auto}
  .ab-body{align-content:start}
  .prog{flex:1 1 auto}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .ab-head{font-size:14px;padding:5px 12px 4px}
  .ab-body{gap:4px;padding:4px}
  .ab-it{padding:3px 7px;gap:0}
  .ab-it b{font-size:12.5px}
  .ab-it span{font-size:11px;line-height:1.2}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .brand .back{white-space:nowrap}
}
@media (min-width:1024px) and (max-width:1499px) and (hover:hover) and (pointer:fine){
  .brand .back{font-size:12.5px;letter-spacing:.02em;padding:7px 10px}
  .ht-steps{font-size:11.5px;line-height:1.25;gap:1px}
  .ht-list{gap:3px 10px}
  .ht-list li div{font-size:11.5px;line-height:1.2}
  .ht-list li div span:last-child{font-size:10.5px}
  .ht-note{margin-bottom:3px}
  .pg-body{gap:3px;padding:5px 10px 6px}
  .pg-pts{font-size:20px}
  .pg-stamp img{width:46px;height:30px}
}

/* 1.5.0: About box gets the spare height (longest wording that fits, picked by play-controller.js); Your progress shrinks to its content */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .about{flex:1 1 0;min-height:0}
  .prog{flex:0 0 auto}
  .pg-body{overflow:visible}
  .ab-body{align-content:center;gap:6px;padding:6px}
  .ab-it{padding:6px 9px;gap:3px;justify-content:center}
  .ab-it b{font-size:14px}
  .ab-it span{font-size:11.5px;line-height:1.3}
  .about .t-m,.about .t-s{display:none}
  .about[data-v="m"] .t-l,.about[data-v="s"] .t-l{display:none}
  .about[data-v="m"] .t-m{display:inline}
  .about[data-v="s"] .t-s{display:inline}
  .about[data-v="s"] .ab-it{padding:3px 7px;gap:0}
  .about[data-v="s"] .ab-it b{font-size:12.5px}
  .about[data-v="s"] .ab-it span{font-size:11px;line-height:1.2}
  .about[data-v="s"] .ab-body{gap:4px;padding:4px}
}
/* 1.5.0: Your progress as compact as possible without cutting anything */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .pg-head{padding:5px 12px 4px;font-size:14px}
  .pg-body{gap:4px;padding:5px 10px 7px}
  .pg-top{align-items:center}
  .pg-top>div{display:flex;align-items:baseline;gap:8px}
  .pg-pts{font-size:20px}
  .pg-sec{padding-top:4px;gap:2px}
  .pg-line{font-size:11.5px;line-height:1.2}
  .pg-bar{height:7px}
  .pg-tiers span{padding:0 5px;font-size:10px}
  .pg-stamp{gap:8px}
  .pg-stamp img{width:44px;height:28px}
  .pg-stamp>div{gap:2px}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .about[data-v="m"] .ab-it{padding:4px 8px;gap:1px}
  .about[data-v="m"] .ab-it b{font-size:13px}
  .about[data-v="m"] .ab-it span{font-size:11px;line-height:1.22}
  .about[data-v="m"] .ab-body{gap:4px;padding:5px}
}

/* 1.5.0: left column locked (Rana): About fits its wording, How to play and Your progress keep their size, and a dark "Live now" box fills the gap at the bottom */
.live{display:none}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .about,.howto,.prog{flex:0 0 auto}
  .ab-body{align-content:start}
  .live{display:flex;flex:1 1 0;min-height:46px;width:100%;max-width:480px;flex-direction:column;background:#1B120B;color:#FBEFD9;border:3px solid #1B120B;border-radius:12px;box-shadow:5px 5px 0 #F5A623;overflow:hidden;text-align:left}
  .lv-head{display:flex;align-items:center;gap:7px;padding:6px 12px 4px;font:400 15px/1 var(--display);color:#F7D774;letter-spacing:.04em}
  .lv-head small{margin-left:auto;font:700 11px var(--body);color:#C9B49A;letter-spacing:.02em}
  .lv-dot{width:9px;height:9px;border-radius:50%;background:#4CC38A;box-shadow:0 0 0 0 rgba(76,195,138,.7);animation:lvPulse 1.6s infinite}
  @keyframes lvPulse{0%{box-shadow:0 0 0 0 rgba(76,195,138,.7)}70%{box-shadow:0 0 0 8px rgba(76,195,138,0)}100%{box-shadow:0 0 0 0 rgba(76,195,138,0)}}
  .lv-feed{list-style:none;margin:0;padding:2px 12px 8px;display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-height:0;overflow:hidden}
  .lv-feed li{font:600 12px/1.3 var(--body);color:#FBEFD9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lv-feed li b{color:#F7D774}
  .lv-feed li small{color:#C9B49A;font-weight:600}
  .lv-feed li.me b{color:#4CC38A}
  .live.ticker .lv-feed li{display:none}
  .live.ticker .lv-feed li.on{display:block;animation:lvIn .4s ease}
  @keyframes lvIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.lv-dot,.live.ticker .lv-feed li.on{animation:none}}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .live{min-height:32px}
  .live.ticker{flex-direction:row;align-items:center}
  .live.ticker .lv-head{padding:4px 4px 4px 12px;flex:0 0 auto}
  .live.ticker .lv-head small{display:none}
  .live.ticker .lv-feed{padding:4px 12px 4px 6px;justify-content:center;min-width:0}
  .about[data-v="x"] .t-l,.about[data-v="x"] .t-m,.about[data-v="x"] .t-s{display:none}
  .about[data-v="x"] .ab-it{padding:3px 7px}
  .about[data-v="x"] .ab-it b{font-size:12.5px}
  .about[data-v="x"] .ab-body{gap:4px;padding:4px}
}
@media (min-width:1024px) and (max-width:1499px) and (hover:hover) and (pointer:fine){
  .sd-rev .sd-head{font-size:14px;white-space:nowrap}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .lv-feed li{flex:0 0 auto}
}

/* 1.5.0: About tiles have a hover/focus tooltip with the full details (Rana) */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .ab-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
  .ab-head small{font:700 10.5px var(--body);color:#C9B49A;letter-spacing:.02em}
  .ab-it[data-abtip]{cursor:help}
  .ab-it[data-abtip]:hover,.ab-it[data-abtip]:focus-visible{background:#F7D774;outline:none}
  .ab-tip{width:270px}
  .ab-tip ul{margin:4px 0 0;padding-left:16px;display:flex;flex-direction:column;gap:4px}
  .ab-tip li{font-size:12px;line-height:1.35}
}

/* 1.5.0: start screen words and buttons sit in a see-through box (Rana's tuner); phones keep the old layout */
.ov-panel{display:contents}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .ov-panel{display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;max-width:100%;box-sizing:border-box;flex:0 0 auto}
}

/* 1.6.0: phones and tablets — game first, then the boxes stacked below in one column (Rana, 3 Oct 2026).
   Same look as desktop: light comic page, cream cards, comic game backgrounds, logo on the start screen. */
@media not all and (min-width:1024px) and (hover:hover) and (pointer:fine){
  .howto{display:flex;flex-direction:column;flex:0 0 auto;min-height:0;width:100%;max-width:480px;text-align:left;background:#FBEFD9;color:#2A1C12;border:3px solid #1B120B;border-radius:12px;box-shadow:5px 5px 0 #1B120B;overflow:hidden}
  .ht-tabs{display:flex;border-bottom:3px solid #1B120B;background:#F5A623}
  .ht-tabs button{flex:1;border:0;border-right:2px solid #1B120B;background:transparent;color:#1B120B;font:800 12.5px var(--body);padding:6px 4px;cursor:pointer;letter-spacing:.02em}
  .ht-tabs button:last-child{border-right:0}
  .ht-tabs button:hover{background:#ffc24a}
  .ht-tabs button.on{background:#FBEFD9}
  .ht-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px 12px;scrollbar-width:thin}
  .ht-body{display:grid}
  .ht-body>.ht-pane{grid-area:1/1;min-width:0}
  .howto .ht-body>.ht-pane[hidden]{display:block!important;visibility:hidden}
  .prog{display:flex;flex-direction:column;flex:1 0 auto;min-height:0;width:100%;max-width:480px;text-align:left;background:#FBEFD9;color:#2A1C12;border:3px solid #1B120B;border-radius:12px;box-shadow:5px 5px 0 #1B120B;overflow:hidden}
  .pg-head{background:#1B120B;color:#F7D774;font:400 15px/1 var(--display);letter-spacing:.04em;padding:6px 12px 5px}
  .pg-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 12px 8px;display:flex;flex-direction:column;gap:5px;scrollbar-width:thin}
  .pg-msg{margin:0;font-size:12.5px;color:#4A3426}
  .pg-msg a{color:#1B120B;font-weight:800}
  .pg-top{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
  .pg-lbl{display:block;font:800 10px var(--body);letter-spacing:.08em;text-transform:uppercase;color:#8a5a2b}
  .pg-pts{display:block;font:400 24px/1 var(--display);color:#1B120B;font-variant-numeric:tabular-nums}
  .pg-chip{font:800 11px var(--body);border-radius:6px;padding:3px 8px;background:#F5A623;color:#1B120B;white-space:nowrap}
  .pg-chip.done{background:#4CC38A;color:#06281a}
  .pg-sec{border-top:2px dashed #e0c9a6;padding-top:5px;display:flex;flex-direction:column;gap:3px}
  .pg-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;line-height:1.25}
  .pg-line b{color:#1B120B}
  .pg-need{font:800 11.5px var(--body);color:#C0392B;white-space:nowrap}
  .pg-bar{position:relative;height:8px;border-radius:5px;background:#ead6b8;box-shadow:inset 0 0 0 1.5px #1B120B;overflow:hidden}
  .pg-bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#F5A623,#F7D774);border-right:1.5px solid #1B120B}
  .pg-row{display:flex;align-items:center;gap:8px}
  .pg-row .pg-bar{flex:1 1 auto}
  .pg-tiers{display:flex;gap:3px;flex:0 0 auto}
  .pg-tiers span{font:700 10.5px var(--body);border-radius:5px;padding:1px 6px;background:#ead6b8;color:#4A3426}
  .pg-tiers span.won{background:#4CC38A;color:#06281a}
  .pg-tiers span.out{background:#d9cbb5;color:#8a7a66;text-decoration:line-through}
  .pg-tiers span.next{background:#1B120B;color:#F7D774}
  .pg-stamp{display:flex;gap:9px;align-items:center}
  .pg-stamp img{width:56px;height:36px;object-fit:cover;border-radius:5px;box-shadow:0 0 0 2px #1B120B;flex:0 0 auto}
  .pg-stamp>div{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
  .ht-steps{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:2px;font:500 12px/1.3 var(--body)}
  .ht-steps b,.ht-list b{color:#1B120B}
  .ht-orbs{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 2px;font-size:12px}
  .ht-orbs div{display:flex;align-items:center;gap:6px}
  .ht-note{margin:0 0 4px;font-size:11px;color:#6E5340}
  .ht-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 12px}
  .ht-list li{display:flex;gap:7px;align-items:flex-start;min-width:0}
  .ht-list li div{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:12px;line-height:1.25;min-width:0}
  .ht-list li div span:last-child{flex-basis:100%;color:#4A3426;font-size:11px}
  .ht-t{font:800 10px var(--body);background:#1B120B;color:#FBEFD9;border-radius:5px;padding:1px 6px;font-variant-numeric:tabular-nums}
  .orb{flex:0 0 auto;display:inline-block;width:16px;height:16px;border-radius:50%;margin-top:1px;background:radial-gradient(circle,#fff 0 18%,var(--oc) 45%,transparent 72%);box-shadow:0 0 0 1.5px var(--oc)}
  .orb.good{--oc:#4CC38A}.orb.bad{--oc:#ff4d6d}.orb.gold{--oc:#F7D774}
  .orb.ember{--oc:#ff7a2a;background:radial-gradient(circle at 50% 45%,#ffd36e 0 22%,#ff7a2a 30% 55%,transparent 70%);box-shadow:0 0 6px #ff5a1f}
  .bk{flex:0 0 auto;display:inline-block;width:20px;height:11px;border-radius:3px;margin-top:3px;background:#E3B98A;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 0 0 1.5px #1B120B}
  .bk-b{background:#F5A623}.bk-l{background:#ff6fb0}.bk-i{background:#bfe9ff}.bk-s{background:#9a9aa0}.bk-c{background:#E4572E}.bk-g{background:#e9e4f7;opacity:.7}.bk-f{background:#F7D774}.bk-h{background:#5a2a1a;box-shadow:inset 0 -3px 0 #ff7a2a,0 0 0 1.5px #1B120B}.bk-m{background:repeating-linear-gradient(45deg,#b98cf0 0 4px,#8e63d0 4px 8px)}
  .sd-card{width:100%;max-width:480px;background:#FBEFD9;color:#2A1C12;border:3px solid #1B120B;border-radius:12px;box-shadow:5px 5px 0 #1B120B;overflow:hidden;display:flex;flex-direction:column;text-align:left}
  .sd-lb{flex:0 0 auto}
  .sd-prz{flex:0 0 118px;min-width:0}
  .sd-tasks{flex:1 1 auto;min-width:0}
  .sd-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;background:#1B120B;color:#F7D774;font:400 17px/1 var(--display);letter-spacing:.03em;padding:8px 12px 7px}
  .sd-head small{font:700 11px var(--body);color:#C9B49A;letter-spacing:.02em}
  .sd-list{list-style:none;margin:0;padding:8px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:5px 8px;flex:1 1 auto;min-height:0}
  .sd-list li.sd-msg{grid-column:1/-1;grid-row:1/-1;align-self:start}
  .sd-you{margin:0 8px 8px;padding:8px 12px;border-radius:8px;background:#F5A623;box-shadow:inset 0 0 0 2px #1B120B;display:flex;align-items:center;justify-content:space-between;gap:10px;font:700 13px var(--body);color:#1B120B}
  .sd-you b{font:400 20px/1 var(--display);font-variant-numeric:tabular-nums}
  .sd-you span{font:800 13px var(--body)}
  .sd-you span{display:inline-flex;align-items:center}
  .sd-you em{display:inline-flex;align-items:center;justify-content:center;font:700 11.5px/1 var(--body);font-style:normal;margin-left:8px;padding:5px 10px;border-radius:6px;background:#1B120B;color:#F7D774}
  .sd-you b{margin-left:auto;text-align:right}
  .sd-list li{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:8px;background:#f5e3c6;font:600 13px var(--body)}
  .sd-list li .rk{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font:400 13px var(--display);background:#ead6b8;color:#1B120B}
  .sd-list li.r1 .rk{background:#F7D774;box-shadow:0 0 0 2px #b8860b}.sd-list li.r2 .rk{background:#e3e3e3;box-shadow:0 0 0 2px #9a9aa0}.sd-list li.r3 .rk{background:#e8b58a;box-shadow:0 0 0 2px #a0522d}
  .sd-list li .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sd-list li{min-width:0}
  .sd-list li b{font-variant-numeric:tabular-nums;color:#1B120B}
  .sd-list li.me{background:#F5A623;box-shadow:inset 0 0 0 2px #1B120B}
  .sd-list li.empty{background:transparent;border:1.5px dashed #d9c3a0;color:#a08566;font-weight:500;font-style:italic}
  .sd-list li.empty b{color:#a08566}
  .sd-list li.gap{background:none;justify-content:center;padding:0;color:#8a5a2b}
  .sd-list li.sd-msg{background:none;color:#4A3426;font-weight:500}
  .sd-prizes{display:flex;flex-direction:column;gap:5px;padding:2px 8px 4px;flex:1 1 auto;justify-content:center}
  .pz-big{display:flex;flex-direction:column;align-items:center;padding:8px 6px 4px;line-height:1}
  .pz-big b{font:400 34px/1 var(--display);color:#1B120B}
  .pz-big span{font:800 10px var(--body);letter-spacing:.06em;text-transform:uppercase;color:#8a5a2b;margin-top:3px;text-align:center}
  .pz-note{margin:0 8px 7px;font-size:9.5px;line-height:1.25;color:#6E5340;text-align:center}
  .sd-pz{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:4px 6px;border-radius:7px;background:#f5e3c6}
  .sd-pz img{display:none;height:26px;aspect-ratio:25/16;width:auto;object-fit:cover;border-radius:5px;box-shadow:0 0 0 2px #1B120B}
  .sd-pz div{display:flex;justify-content:space-between;align-items:baseline;gap:4px;line-height:1.1}
  .sd-pz b{font:400 13px/1.1 var(--display);color:#1B120B}
  .sd-pz span{font:800 10px var(--body);color:#8a5a2b;letter-spacing:.04em;text-transform:uppercase}
  .sd-pz em{align-self:stretch;text-align:center;font:800 10px var(--body);font-style:normal;border-radius:5px;padding:2px 4px;background:#ead6b8;color:#1B120B;white-space:nowrap}
  .sd-pz em.won{background:#4CC38A;color:#06281a}.sd-pz em.out{background:#d9cbb5;color:#8a7a66}.sd-pz em.low{background:#C0392B;color:#fff}
  .tk-how{margin:5px 12px 0;font-size:11.5px;color:#4A3426}
  .tk-list{list-style:none;margin:0;padding:4px 8px 6px;display:flex;flex-direction:column;gap:3px}
  .tk-list li{display:flex;align-items:center;gap:8px;padding:3px 6px 3px 4px;border-radius:7px;background:#f5e3c6;min-height:30px}
  .tk-list li.done{background:#e3f3e9}
  .tk-ic{flex:0 0 22px;height:22px;border-radius:6px;font-size:12px!important;display:grid;place-items:center;font-size:14px;background:#1B120B;color:#F7D774}
  .tk-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.15}
  .tk-tx b{font-size:12.5px;color:#1B120B}
  .tk-tx small{font-size:10.5px;color:#6E5340;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tk-pts{flex:0 0 34px;text-align:right;font:800 11px var(--body);color:#C0392B}
  .tk-btn{flex:0 0 84px;width:84px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border:2px solid #1B120B;border-radius:6px;padding:4px 8px;font:800 11.5px/1 var(--body);cursor:pointer;background:#F5A623;color:#1B120B;box-shadow:2px 2px 0 #1B120B;text-decoration:none}
  .tk-btn:hover{background:#ffc24a}
  .tk-btn.claim{background:#4CC38A;color:#06281a}
  .tk-btn.claimed,.tk-btn[disabled]{background:#ead6b8;color:#6E5340;box-shadow:none;cursor:default;border-color:#cdb594}
  .tk-msg{background:none!important;color:#4A3426;font-size:12px}
  .tk-fh{display:flex;gap:5px;flex:1 1 auto;min-width:0;margin:0}
  .tk-fh input{flex:1 1 auto;min-width:0;border:2px solid #1B120B;border-radius:6px;padding:3px 7px;font:600 12px var(--body);background:#fff;color:#1B120B}
  .tk-fh button.x{background:#ead6b8;color:#1B120B;padding:3px 8px}
  .tk-fh button{border:2px solid #1B120B;border-radius:6px;padding:3px 10px;font:800 12px var(--body);background:#4CC38A;color:#06281a;cursor:pointer}
  .tk-note{margin:0 12px 4px;min-height:0;font-size:11px;color:#2E7D4F}
  .tk-note:empty{display:none}
  .tk-note.bad{color:#C0392B}
  .sd-revs{width:100%;max-width:480px;flex:1 1 0;min-height:64px;display:flex;gap:8px;padding-bottom:5px}
  .sd-rev{flex:1 1 0;min-width:0;container-type:size}
  .sd-rev .sd-head{justify-content:center;text-align:center}
  .rv-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 10px;text-align:center}
  .rv-q{font:400 16px/1.1 var(--display);color:#1B120B}
  .rv-tx{margin:0;font-size:11.5px;line-height:1.3;color:#4A3426;max-width:26ch}
  .rv-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:170px;box-sizing:border-box;border:2px solid #1B120B;border-radius:6px;padding:6px 8px;font:800 12px/1 var(--body);box-shadow:2px 2px 0 #1B120B;text-decoration:none;white-space:nowrap}
  .rv-g .rv-btn{background:#fff;color:#1A73E8;border-bottom:4px solid;border-image:linear-gradient(90deg,#EA4335 0 25%,#FBBC05 0 50%,#34A853 0 75%,#4285F4 0) 1;border-radius:0;padding-bottom:4px}
  .rv-f .rv-btn{background:#1565D8;color:#fff}
  .rv-btn:hover{filter:brightness(1.08)}
  .rv-btn:focus-visible{outline:3px solid #F5A623;outline-offset:2px}
  @container (max-height:150px){.rv-tx{display:none}}
  @container (max-height:90px){.rv-q{display:none}.rv-body{padding:6px 8px}}
  @container (max-height:66px){.sd-rev .sd-head{display:none}.rv-body{padding:5px 8px}}
  .about{display:flex;flex:1 1 auto;min-height:0;width:100%;max-width:480px;flex-direction:column;text-align:left;background:#FBEFD9;color:#2A1C12;border:3px solid #1B120B;border-radius:12px;box-shadow:5px 5px 0 #1B120B;overflow:hidden}
  .ab-head{background:#1B120B;color:#F7D774;font:400 15px/1 var(--display);letter-spacing:.04em;padding:6px 12px 5px}
  .ab-body{flex:1 1 auto;min-height:0;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:6px;align-content:center}
  .ab-it{background:#f5e3c6;border-radius:8px;padding:4px 7px;display:flex;flex-direction:column;gap:2px;min-width:0}
  .ab-it b{font:400 13px/1.1 var(--display);color:#1B120B}
  .ab-it span{font-size:11px;line-height:1.25;color:#4A3426}
  .live{display:flex;flex:1 1 0;min-height:46px;width:100%;max-width:480px;flex-direction:column;background:#1B120B;color:#FBEFD9;border:3px solid #1B120B;border-radius:12px;box-shadow:5px 5px 0 #F5A623;overflow:hidden;text-align:left}
  .lv-head{display:flex;align-items:center;gap:7px;padding:6px 12px 4px;font:400 15px/1 var(--display);color:#F7D774;letter-spacing:.04em}
  .lv-head small{margin-left:auto;font:700 11px var(--body);color:#C9B49A;letter-spacing:.02em}
  .lv-dot{width:9px;height:9px;border-radius:50%;background:#4CC38A;box-shadow:0 0 0 0 rgba(76,195,138,.7);animation:lvPulse 1.6s infinite}
  @keyframes lvPulse{0%{box-shadow:0 0 0 0 rgba(76,195,138,.7)}70%{box-shadow:0 0 0 8px rgba(76,195,138,0)}100%{box-shadow:0 0 0 0 rgba(76,195,138,0)}}
  .lv-feed{list-style:none;margin:0;padding:2px 12px 8px;display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-height:0;overflow:hidden}
  .lv-feed li{font:600 12px/1.3 var(--body);color:#FBEFD9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lv-feed li b{color:#F7D774}
  .lv-feed li small{color:#C9B49A;font-weight:600}
  .lv-feed li.me b{color:#4CC38A}
  .live.ticker .lv-feed li{display:none}
  .live.ticker .lv-feed li.on{display:block;animation:lvIn .4s ease}
  @keyframes lvIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.lv-dot,.live.ticker .lv-feed li.on{animation:none}}
  .ab-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
  .ab-head small{font:700 10.5px var(--body);color:#C9B49A;letter-spacing:.02em}
  .ab-tip ul{margin:4px 0 0;padding-left:16px;display:flex;flex-direction:column;gap:4px}
  .ab-tip li{font-size:12px;line-height:1.35}
}
@media not all and (min-width:1024px) and (hover:hover) and (pointer:fine){
  :root{--page:#F4E6CF;--ink:#3B2416;--bg-fade:.47;--bg-blur:2.5px;--ph-chrome:178px}
  html,body{background:var(--page)}
  body::before{content:"";position:fixed;inset:calc(var(--bg-blur) * -2);z-index:0;background:var(--desk-bg,none) center/cover no-repeat;filter:blur(var(--bg-blur))}
  body::after{content:"";position:fixed;inset:0;z-index:0;background:var(--page);opacity:var(--bg-fade);pointer-events:none}
  .wrap{position:relative;z-index:1;max-width:520px;padding-block:10px 28px;gap:12px}
  .top,.side,.sd-row{display:contents}
  .brand{order:0}.hud{order:1}.stage{order:2}.pad{order:3}.hint{order:4}
  .howto{order:5}.prog{order:6}.live{order:7}.sd-lb{order:8}.sd-tasks{order:9}.sd-prz{order:10}.sd-revs{order:11}.about{order:12}
  .brand h1{display:none}
  .bk-short{display:none}.bk-long{display:inline}
  .brand .back{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;font-size:13px;letter-spacing:.03em;color:#1B120B;background:#FBEFD9;border:3px solid #1B120B;border-radius:8px;padding:7px 10px;box-shadow:3px 3px 0 #1B120B;white-space:nowrap}
  .hud{color:var(--ink)}.hud .score small{color:var(--ink)}
  .stage{width:min(100%,calc((100dvh - var(--ph-chrome)) * .6 + 16px));align-self:center;box-shadow:inset 0 0 0 2px var(--line),0 10px 30px rgba(0,0,0,.35)}
  .pad button{background:#FBEFD9;color:#1B120B;border:3px solid #1B120B;box-shadow:4px 4px 0 #1B120B;height:58px}
  .pad button.on{background:var(--orange)}
  .hint{color:var(--ink);background:#FBEFD9;border-radius:999px;padding:3px 12px;align-self:center}
  .howto,.prog,.about,.live,.sd-card,.sd-revs{width:100%;max-width:none;flex:none}
  .ht-body{overflow:visible}
  .ht-tabs button{padding:9px 4px;font-size:13px}
  .sd-prz{display:flex}
  .sd-prizes{flex-direction:row;gap:6px;padding:8px}
  .sd-pz{flex:1 1 0;min-width:0}
  .sd-pz img{display:block;width:100%;height:auto}
  .pz-note{font-size:11px}
  .tk-list li{min-height:40px}
  .tk-btn{flex-basis:92px;width:92px;padding:8px}
  .tk-tx small{white-space:normal}
  .sd-revs{display:flex;gap:10px;min-height:0;padding-bottom:5px}
  .sd-rev{container-type:normal}
  .sd-revs .sd-rev{width:auto;flex:1 1 0;min-width:0}
  .sd-rev .sd-head{font-size:14px;white-space:nowrap;padding-inline:6px}
  .rv-btn{padding:10px 8px;max-width:none}
  .about .t-m,.about .t-s{display:none}
  .about .t-l{display:inline}
  .ab-head small{display:none}
  .ab-body{grid-template-columns:1fr;gap:6px;padding:6px;overflow:visible}
  .ab-it{padding:7px 10px;gap:2px}
  .ab-it b{font-size:15px}
  .ab-it span{font-size:12.5px;line-height:1.35}
  .live{min-height:0}
  .lv-feed{max-height:112px}
  .lv-feed li{flex:0 0 auto}
  .ov-panel{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;max-width:100%;box-sizing:border-box;flex:0 0 auto}
  #ovStart{justify-content:flex-start;padding:5% 14px 14px;gap:8px}
  .ov-logo{display:block;flex:0 1 auto;min-height:0;width:68%;max-width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}
  .ov-gap{display:none}
  #ovStart h2{font-size:26px}
  #ovStart .btn{padding:11px 20px;font-size:15px}
}
@media not all and (min-width:1024px) and (hover:hover) and (pointer:fine){
  @media (pointer:coarse){.keys.kb{display:none}}
}
@media not all and (min-width:1024px) and (hover:hover) and (pointer:fine){
  .ht-ms{display:none}.ht-ph{display:inline}
  .howto .ht-body>.ht-pane[hidden]{display:none!important}
}

/* 1.6.0: phones — no ◀ ▶ buttons (drag the board), and the game goes full screen when it starts; "‹ Back" (top left) leaves full screen and pauses */
.fsback{display:none}
@media not all and (min-width:1024px) and (hover:hover) and (pointer:fine){
  :root{--ph-chrome:120px}
  .pad{display:none!important}
  html.fs,html.fs body{overflow:hidden;overscroll-behavior:none;height:100%}
  body.fs .stage{position:fixed;inset:0;align-self:stretch;justify-self:stretch;z-index:100;width:auto;max-width:none;margin:0;border-radius:0;padding:max(8px,env(safe-area-inset-top,0px)) 8px max(8px,env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:center}
  body.fs canvas#board{width:min(100%,calc((100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * .6));height:auto;max-height:100%}
  body.fs .overlay{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(100% - 16px),calc((100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * .6));aspect-ratio:360/600;max-height:calc(100% - 16px)}
  body.fs .fsback{display:flex;align-items:center;position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:10px;z-index:120;height:38px;padding:0 14px;border-radius:999px;border:2px solid #1B120B;background:#FBEFD9;color:#1B120B;font:800 14px var(--body);cursor:pointer;box-shadow:2px 2px 0 #1B120B}
  body.fs .trophyfab{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:104px}
  body.fs .sndfab{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:10px}
  body.fs .fxlist{position:fixed}
}

/* 1.6.0: phones in full screen: the board sits higher, with a finger zone under it (drag to move) and a swipe hint until the first touch (Rana) */
.swipezone{display:none}
.bwrap{display:contents}
@media not all and (min-width:1024px) and (hover:hover) and (pointer:fine){
  :root{--zone:88px}
  body.fs .stage{flex-direction:column;justify-content:center}
  body.fs canvas#board{width:min(100%,calc((100dvh - 16px - var(--zone) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * .6));border-radius:13px 13px 0 0}
  body.fs .overlay{top:calc(50% - var(--zone) / 2);width:min(calc(100% - 16px),calc((100dvh - 16px - var(--zone) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * .6));max-height:calc(100% - 16px - var(--zone))}
  body.fs .swipezone{display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 var(--zone);width:min(100%,calc((100dvh - 16px - var(--zone) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * .6));background:linear-gradient(#1f150d,#140d08);border-radius:0 0 13px 13px;border-top:1px dashed rgba(247,215,116,.25);touch-action:none;-webkit-user-select:none;user-select:none}
  .sw-hint{position:relative;width:170px;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;pointer-events:none;transition:opacity .25s}
  .sw-hint.gone{opacity:0}
  .sw-finger{position:absolute;top:2px;left:50%;font-size:30px;line-height:1;transform:translateX(-50%);animation:swipe 1.8s ease-in-out infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
  .sw-txt{font:800 11px var(--body);letter-spacing:.08em;text-transform:uppercase;color:#F7D774}
  @keyframes swipe{0%,100%{transform:translateX(-160%)}50%{transform:translateX(60%)}}
  @media (prefers-reduced-motion:reduce){.sw-finger{animation:none}}
}
/* 1.6.1: equal gap left and right of the board in full screen (Rana) */
@media not all and (min-width:1024px) and (hover:hover) and (pointer:fine){
  body.fs .stage{padding-left:20px;padding-right:20px}
  body.fs .overlay{width:min(calc(100% - 40px),calc((100dvh - 16px - var(--zone) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * .6))}
}


/* 1.6.2 markup without the preview: the track looks like the 1.6.1 arrows */
.sw-track{position:absolute;top:6px;left:0;right:0;display:flex;justify-content:center;gap:70px;font:800 22px/1 var(--body);color:rgba(247,215,116,.55)}
.sw-track i{font-style:normal}.sw-grip{display:none}
/* 1.6.2/1.6.3 (approved by Rana, 3 Oct 2026): phones in full screen keep the desktop look: the comic page behind, the board in its framed border, and a designed drag bar (Rana) */
@media not all and (min-width:1024px) and (hover:hover) and (pointer:fine){
  body.fs .stage{--bw:min(calc(100vw - 56px),calc((100dvh - 32px - var(--zone) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * .6));background:linear-gradient(rgba(244,230,207,.47),rgba(244,230,207,.47)),var(--desk-bg,none) center/cover no-repeat,var(--page);box-shadow:none}
  body.fs .bwrap{display:flex;flex-direction:column;align-items:center;padding:8px;border-radius:20px;background:var(--fs-frame,#000);box-shadow:inset 0 0 0 3px var(--fs-edge,#000),0 10px 30px rgba(0,0,0,.35)}
  body.fs canvas#board{width:var(--bw);border-radius:13px 13px 0 0}
  body.fs .swipezone{width:var(--bw);flex:0 0 var(--zone);flex-direction:column;gap:6px;border-top:2px solid #F5A623;border-radius:0 0 13px 13px;
    background:repeating-linear-gradient(135deg,rgba(245,166,35,.07) 0 10px,transparent 10px 20px),linear-gradient(#2a1b10,#150d08)}
  body.fs .overlay{width:var(--bw);max-height:none}
  .sw-hint{width:100%;height:100%;justify-content:center;gap:7px}
  .sw-track{position:relative;display:flex;align-items:center;justify-content:space-between;width:78%;height:30px;padding:0 12px;border-radius:999px;background:#0e0805;box-shadow:inset 0 2px 5px rgba(0,0,0,.7),0 0 0 2px rgba(245,166,35,.45)}
  .sw-track i{font-style:normal}
  .sw-l,.sw-r{font:800 18px/1 var(--body);color:#F5A623;animation:swNudge 1.8s ease-in-out infinite}
  .sw-r{animation-delay:.9s}
  .sw-grip{position:absolute;left:22%;right:22%;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(247,215,116,.55) 0 6px,transparent 6px 12px)}
  .sw-finger{top:auto;bottom:20px;font-size:28px}
  .sw-txt{font-size:10.5px;letter-spacing:.12em}
  .sw-hint.gone{opacity:1}
  .sw-hint.gone .sw-finger,.sw-hint.gone .sw-txt{opacity:0;transition:opacity .25s}
  .sw-hint.gone .sw-l,.sw-hint.gone .sw-r{animation:none;opacity:.6}
  @keyframes swNudge{0%,100%{opacity:.35}50%{opacity:1}}
  @media (prefers-reduced-motion:reduce){.sw-l,.sw-r{animation:none}}
}
@media not all and (min-width:1024px) and (hover:hover) and (pointer:fine){
  body.fs .sw-finger{top:22px;bottom:auto;font-size:26px}
}

/* 1.7.0: music button (♪) beside the sound button */
.musfab{position:absolute;top:14px;right:58px;z-index:6;width:38px;height:38px;border-radius:50%;border:2px solid var(--broth);background:var(--orange);color:var(--broth);display:grid;place-items:center;cursor:pointer;padding:0;font:900 19px/1 var(--body)}
.musfab.muted{background:var(--bowl-2);color:var(--muted);border-color:var(--line);text-decoration:line-through}
.musfab:focus-visible{outline:3px solid var(--noodle);outline-offset:2px}
@media not all and (min-width:1024px) and (hover:hover) and (pointer:fine){
  body.fs .musfab{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:56px}
}

/* 2.1.0 Competition pack */
.btn.daily{background:#FFD43B;color:#1B120B;box-shadow:0 4px 0 #9a7a10}
.bdg{font-size:.95em;margin-left:3px}.stk{font:800 11px var(--body,system-ui);color:#E4572E;margin-left:3px;white-space:nowrap}
.lbdaily{width:100%;max-width:340px;margin:8px auto 4px;text-align:left}.lbdaily h3{font:400 15px var(--display,system-ui);margin:0 0 4px;color:#FFD43B}
.dlist{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:3px}.dlist li{display:flex;justify-content:space-between;gap:8px;padding:3px 8px;border-radius:7px;background:rgba(255,255,255,.08);font:600 12px var(--body,system-ui)}.dlist li.me{background:rgba(255,212,59,.25)}
.result .dlist li{background:rgba(0,0,0,.06)}
.pg-badges .bdgs{display:flex;gap:6px;flex-wrap:wrap;font-size:18px}.pg-badges .bdgs .off{filter:grayscale(1);opacity:.3}
.ht-emo{flex:0 0 18px;font-style:normal;font-size:14px;line-height:16px;text-align:center;font-weight:800}
.btn.daily{white-space:nowrap}@media (max-width:360px){.btn.daily{font-size:13px;padding-left:14px;padding-right:14px}}

/* 2.5.2: inside another page, pass mouse-wheel scrolling on to that page */
html.tcb-framed,html.tcb-framed body,html.tcb-framed body.playing{overscroll-behavior:auto!important}
/* 2.5.3: inside the Cozy Rewards page the host page draws the comic background, so the game goes see-through (desktop layout only) */
@media (min-width:1024px){
  html.tcb-framed{color-scheme:light}
  html.tcb-framed,html.tcb-framed body{background:transparent!important}
  html.tcb-framed body::before,html.tcb-framed body::after{display:none!important}
}
/* 2.5.4: line the three desktop columns up - same top as the game screen, same bottom. "How to play" takes the space left (scrolls if a tab is long), the cards below keep their own size */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .top{padding-top:10px}
  .side{padding-top:10px}
  .top>.howto{flex:1 1 0;min-height:140px}
  .top>.prog,.top>.live{flex:0 0 auto}
  .howto .ht-body>.ht-pane[hidden]{display:none!important}
  .side>.sd-row{flex:0 1 auto;min-height:0}
  .side>.sd-row>.sd-card{min-height:0}
  .sd-tasks .tk-list{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin}
  .sd-prz{overflow-y:auto;scrollbar-width:thin}
}
/* 2.7.0: browsers without dvh (Safari before 15.4): use vh, or the desktop board's height is lost and the canvas keeps growing */
@supports not (height:100dvh){
  @media (min-width:1024px) and (hover:hover) and (pointer:fine){
    :root{--board-h:calc(100vh - 88px)}
  }
}