/* Play screen kit (9 Oct 2026): HUD header, booster buttons, caption chip. Specs: art/kit/hud, art/kit/boosters (art/kit/tray and board are drawn in topple.js).
   One light, top-left. Everything has a top highlight, a thick bottom edge and a dark cocoa outline. Only transforms and opacity animate. */
/* Board v2 (9 Oct 2026): the board itself is canvas art in topple.js (matArt, bTile, silLayers); these tokens name its colours. */
:root { --k-walnut-1: #9A6842; --k-walnut-2: #7B4F34; --k-rim-gold: #E8C58C; --k-outline: #3B1D10; --k-halo: #FFF1D6; --k-cocoa: #4A1F1B; --k-cream-1: #FFF8EA; --k-cream-2: #F7E3C0; --k-cream-3: #EBCB98; --k-brown: #4A2218; --k-coral: #E4503A; }

/* ---- header slab ---- */
#game header { position: relative; display: block; height: calc(var(--sat) + 104px); padding: 0; gap: 0; z-index: 4; flex: none; }
#game header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--sat) + 12px); background: #E09355; }
.kslab { position: absolute; left: 0; top: var(--sat); width: 100%; height: 140px; pointer-events: none; overflow: visible; filter: drop-shadow(0 12px 10px rgba(20, 6, 2, .5)); }
#game header .tools { position: absolute; top: calc(var(--sat) + 24px); display: flex; gap: 6px; }
#game header .tools:first-of-type { left: 10px; }
#game header .tools:last-of-type { right: 10px; }
#game header .icon.hide { display: none; }

/* cream button: back, help, sound, palette */
#game .icon { width: 42px; height: 42px; margin: 0; border-radius: 14px; color: var(--k-brown); overflow: visible;
  background: linear-gradient(180deg, var(--k-cream-1), var(--k-cream-2) 60%, var(--k-cream-3));
  box-shadow: 0 0 0 2.5px var(--k-cocoa), 0 5px 0 2.5px var(--k-cocoa), inset 0 -5px 0 #D9AE72, inset 0 2px 0 #fff; }
#game .icon::before { content: ""; position: absolute; left: 6px; top: 4px; width: 18px; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .8); pointer-events: none; }
#game .icon::after { content: ""; position: absolute; inset: -7px; }
#game .icon:active { transform: translateY(3px); box-shadow: 0 0 0 2.5px var(--k-cocoa), 0 2px 0 2.5px var(--k-cocoa), inset 0 2px 3px rgba(120, 70, 20, .35); }
#game .icon:active::before { display: none; }
#game .icon svg { width: 24px; height: 24px; position: relative; stroke-width: 3.8; }
#game .icon b { position: relative; font: 700 29px/1 Fredoka, system-ui, sans-serif; color: var(--k-coral); text-shadow: 0 2px 0 var(--k-cocoa); }
#game .icon .on-only { stroke: var(--k-coral); stroke-width: 2.8; }
#game .icon.off { color: #9A7B6E; }
#game .icon .off-only { stroke: var(--k-coral); }
#game #lookBtn { left: auto !important; right: 12px; top: calc(var(--sat) + 100px) !important; width: 38px; height: 38px; border-radius: 50%; z-index: 5; }
#game #lookBtn::before { left: 7px; top: 4px; width: 16px; }
#game #lookBtn svg { width: 22px; height: 22px; stroke: none; }

/* title pill and plaque (bar, stars, score) */
#game .hd { position: absolute; left: calc(50% - 85px); top: calc(var(--sat) + 30px); width: 170px; height: 72px; flex: none; z-index: 1; border-radius: 14px;
  background: linear-gradient(180deg, #FFF7E6, #F6E2BF);
  box-shadow: 0 0 0 2.5px var(--k-cocoa), 0 4px 0 2.5px var(--k-cocoa), inset 0 2px 0 #fff, inset 0 -4px 0 #E4C792; }
#game .hd b#hdTitle { position: absolute; left: 0; top: -22px; width: 170px; box-sizing: border-box; z-index: 5; margin: 0; padding: 2px 18px 4px; border-radius: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 700 21px/26px Fredoka, system-ui, sans-serif; color: #FFF1D6; text-shadow: 0 2px 0 #2E0F0C; letter-spacing: 0;
  background: linear-gradient(180deg, #823327, #5E211A); box-shadow: 0 0 0 2.5px #3B1411, 0 3px 0 2.5px #3B1411, inset 0 2px 0 rgba(255, 255, 255, .28); }
#game .hd b#hdTitle.long { font-size: 17px; padding: 3px 14px 5px; }
#game .sbar { position: absolute; left: 14px; top: 26px; width: 138px; max-width: none; height: 13px; margin: 0; z-index: 1; }
#game .sbar .prog { position: relative; max-width: none; width: 100%; height: 13px; margin: 0; border-radius: 7px; overflow: hidden;
  background: linear-gradient(180deg, #4A2A28, #6A3E38); box-shadow: 0 0 0 2px #3B1814, 0 2px 0 2px rgba(255, 255, 255, .55), inset 0 3px 3px rgba(0, 0, 0, .55); }
#game .sbar .prog i { border-radius: 7px; background: linear-gradient(180deg, #FFA55F, #F2703F 55%, #E0533A); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4); }
#game .hd small { position: absolute; left: 0; right: 0; top: 46px; z-index: 3; font: 600 14px/22px Fredoka, system-ui, sans-serif; color: #7A5446; }
#game .hd small b { display: inline; font: 700 19px/22px Fredoka, system-ui, sans-serif; color: var(--k-brown); text-shadow: none; }

/* stars ride the bar: carved when unlit, glossy gold when earned. The earn glow lives inside the star (z -1) and the score text sits above the bar (z 3), so the glow is always behind the text. */
#game .hstars { overflow: visible; }
#game .hstars i { top: 50%; width: 27px; height: 27px; margin: -13.5px 0 0 -13.5px; }
#game .hstars i:last-child { margin-left: -13.5px; }
#game .hstars svg { fill: url(#kh-starU); stroke: #3B1814; stroke-width: 1.8; overflow: visible; }
#game .hstars i.on svg { fill: url(#kh-star); stroke: #8A4E10; stroke-width: 1.8; filter: drop-shadow(0 1.6px 0 #7A3F0C); }
#game .hstars i.on::after { content: ""; position: absolute; left: 7px; top: 5px; width: 8px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .85); transform: rotate(-35deg); }
#game .hstars i.pop { animation: kStarPop .5s cubic-bezier(.3, 1.6, .5, 1); }
#game .hstars i.pop::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; z-index: -1; opacity: 0; pointer-events: none; animation: kGlow .7s ease-out;
  background: radial-gradient(circle, rgba(255, 233, 160, .95) 0, rgba(255, 194, 74, 0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'%3E%3Cpath d='M0-4.5 1 -1 4.5 0 1 1 0 4.5-1 1-4.5 0-1-1z' fill='%23FFF6C8'/%3E%3C/svg%3E") 0 2px / 9px 9px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'%3E%3Cpath d='M0-4.5 1 -1 4.5 0 1 1 0 4.5-1 1-4.5 0-1-1z' fill='%23FFF6C8'/%3E%3C/svg%3E") 100% 8px / 7px 7px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'%3E%3Cpath d='M0-4.5 1 -1 4.5 0 1 1 0 4.5-1 1-4.5 0-1-1z' fill='%23FFF6C8'/%3E%3C/svg%3E") 60% 100% / 8px 8px no-repeat; }
@keyframes kStarPop { 0% { transform: scale(.6); } 45% { transform: scale(1.4) rotate(-8deg); } 100% { transform: none; } }
@keyframes kGlow { 0% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }

/* caption chip: the toast, right-aligned under the slab, its tail pointing at the palette */
body:has(#game.on) #toast { top: calc(var(--sat) + 106px); left: auto; right: 58px; transform: none; z-index: 6; height: 30px; padding: 0 13px; border-radius: 12px; color: var(--k-brown);
  font: 600 14px/30px Fredoka, system-ui, sans-serif; background: linear-gradient(180deg, var(--k-cream-1), var(--k-cream-2) 60%, var(--k-cream-3));
  box-shadow: 0 0 0 2.5px var(--k-cocoa), 0 4px 0 2.5px var(--k-cocoa), inset 0 2px 0 #fff, inset 0 -4px 0 #D9AE72; }
body:has(#game.on) #toast.on { transform: none; }
body:has(#game.on) #toast::after { content: ""; position: absolute; right: -7px; top: 8px; width: 12px; height: 12px; background: #F0D5A8; border-top: 2.5px solid var(--k-cocoa); border-right: 2.5px solid var(--k-cocoa); transform: rotate(45deg); }

/* ---- booster buttons: glass bubbles in a gold bezel ---- */
.boosts { gap: 14px; padding: 0 0 4px; }
.boost { width: 64px; height: 72px; padding: 0; border-radius: 0; background: none; box-shadow: none; display: block; color: inherit; }
.boost:active { transform: translateY(3px); box-shadow: none; }
.boost .bsv { width: 64px; height: 72px; display: block; overflow: visible; pointer-events: none; }
.boost b { left: 41px; right: auto; top: 1px; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; border-radius: 11px; text-align: center; font: 700 15px/22px Fredoka, system-ui, sans-serif; color: #fff; text-shadow: 0 1px 0 rgba(120, 30, 10, .5);
  background: linear-gradient(180deg, #FF8F78, #F0644F 55%, #C9452F); box-shadow: 0 0 0 2.5px #fff, 0 3px 3px rgba(40, 10, 5, .35), inset 0 2px 0 rgba(255, 255, 255, .45); }
.boost.empty b { background: linear-gradient(180deg, #C3D0D6, #8DA2AD); text-shadow: 0 1px 0 rgba(30, 50, 60, .4); }
.boost small { bottom: 2px; padding: 0 7px; height: 16px; line-height: 13px; box-sizing: border-box; border-radius: 8px; background: #4A2E22; border: 1.5px solid #8B5A3C; font: 700 11px/13px Fredoka, system-ui, sans-serif; color: #FFE9CF; }
.bs-lock, .bs-lock2 { display: none; }
.bs-halo, .bs-ring, .bs-rays { opacity: 0; transform-box: fill-box; transform-origin: center; }
.boost.empty .bs-glass { fill: url(#kb-glassE); } .boost.empty .bs-bez { fill: url(#kb-bezE); } .boost.empty .bs-ic { opacity: .5; }
.boost.lock { background: none; box-shadow: none; color: inherit; }
.boost.lock .bsv { filter: none; opacity: 1; }
.boost.lock .bs-glass { fill: url(#kb-glassL); } .boost.lock .bs-bez { fill: url(#kb-bezL); } .boost.lock .bs-ic { opacity: .35; } .boost.lock .bs-lock { display: inline; }
/* spending one: a golden halo and a turning dashed ring */
.boost.go .bs-halo { animation: kbHalo 1.2s ease-out; } .boost.go .bs-ring { animation: kbRing 1.2s linear; }
@keyframes kbHalo { 0% { opacity: 0; transform: scale(.8); } 20% { opacity: .85; } 100% { opacity: 0; transform: scale(1.05); } }
@keyframes kbRing { 0% { opacity: .9; transform: rotate(0); } 100% { opacity: 0; transform: rotate(150deg); } }
/* just unlocked: rays turn behind it, the padlock swings off and falls away, a NEW pill, then it all fades */
.boost.new .bs-rays { animation: kbRays 1.2s linear 2; } .boost.new .bs-halo { animation: kbHaloNew 2.4s ease-out; }
.boost.new .bs-lock2 { display: inline; animation: kbDrop .6s ease-in .5s forwards; }
.boost.new::after { content: "NEW"; position: absolute; left: 50%; bottom: 2px; translate: -50% 0; height: 16px; padding: 0 9px; box-sizing: border-box; border-radius: 8px; font: 700 10px/12px Fredoka, system-ui, sans-serif; letter-spacing: .04em; color: #6B4204;
  background: linear-gradient(180deg, #FFE48F, #F2B33D 55%, #C98A12); border: 2px solid #fff; box-shadow: 0 2px 2px rgba(60, 25, 5, .35); animation: kbFade .3s ease-in 2.4s forwards; }
@keyframes kbRays { 0% { opacity: .9; transform: rotate(0); } 100% { opacity: .9; transform: rotate(180deg); } }
@keyframes kbHaloNew { 0% { opacity: 0; } 15% { opacity: .9; } 85% { opacity: .9; } 100% { opacity: 0; } }
@keyframes kbDrop { to { translate: 14px 12px; rotate: 28deg; opacity: 0; } }
@keyframes kbFade { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .boost.new .bs-rays, .boost.go .bs-ring { animation: none; } }
#game #cv { margin-top: 12px; } /* clear the header slab lip (was overlapping the board by ~10px) */

/* ---- Pip's speech banner (9 Oct 2026): Pip's lines slide down under the header, over the board's top rim, never over a playable cell.
   topple.js placeHint sets its top and shrinks the font if a long line would reach the cells. Only transform and opacity animate. */
#game #hint { left: 6px; right: 54px; width: auto; bottom: auto; min-height: 0; display: block; box-sizing: border-box; padding: 4px 10px 5px 48px; border-radius: 14px;
  background: linear-gradient(180deg, var(--k-cream-1), var(--k-cream-2)); color: var(--k-brown); font: 600 16px/1.15 Fredoka, system-ui, sans-serif; text-wrap: pretty;
  box-shadow: 0 0 0 2px var(--k-cocoa), 0 5px 8px rgba(46, 20, 12, .3), inset 0 2px 0 #fff; z-index: 5; pointer-events: auto; cursor: pointer;
  transform: translateY(-14px); transform-origin: 50% 0; transition: opacity .25s, transform .3s cubic-bezier(.2, .9, .3, 1.3); }
#game #hint.on { transform: none; }
#game #hint.pop { animation: hintPop .3s ease-out; }
@keyframes hintPop { 0% { opacity: .3; transform: translateY(-8px); } }
#game #hint::before { content: ""; position: absolute; left: 5px; top: 50%; width: 38px; height: 30px; margin-top: -15px; border: 0; border-radius: 12px 12px 8px 8px; background: url(img/pip_peek_open.webp?v=2) center / contain no-repeat; }
#game #hint.up::before { left: 6px; top: 50%; bottom: auto; margin-top: -15px; border: 0; }
#game #hint[data-more]:not([data-more=""])::after { display: inline; margin: 0 0 0 6px; font-size: .8em; color: rgba(74, 34, 24, .8); }
@media (prefers-reduced-motion: reduce) { #game #hint { transition: opacity .25s; transform: none; } #game #hint.pop { animation: none; } }