/* PaneSlide styles. Original work. Font: Fredoka (SIL OFL 1.1), self-hosted. */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/fredoka-latin.woff2) format("woff2"); }
[hidden] { display: none !important; }
:root {
  color-scheme: only light;
  --sky1: #2B1466; --sky2: #6A2FB8; --sky3: #E86FB0; --hill1: #4B1E93; --hill2: #2E1170; --glow: #FFC6E8;
  --ink: #2A1B4D; --muted: #8B7FB0; --panel: #FFFFFF; --panel2: #F3EEFF; --pshadow: #CFC3F0;
  --frame: #F4EFFF; --frame2: #D9CCF7; --well: #FFFFFF;
  --C: #3CC8F0; --M: #F0509A; --Y: #FFD84A;
  --cell: 64px; --gap: 6px; --pad: 10px;
  font-family: "Fredoka", ui-rounded, "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
}
* { box-sizing: border-box; }
html { background: var(--sky1); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; background: transparent; color: var(--ink); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
svg { display: block; }

/* ---------- scene ---------- */
.scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 55%, var(--sky3) 100%); transition: background .6s; }
.scene .rays { position: absolute; left: 50%; top: 18%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.09) 0deg 9deg, rgba(255,255,255,0) 9deg 24deg); animation: spin 90s linear infinite; -webkit-mask: radial-gradient(circle, #000 0%, transparent 55%); mask: radial-gradient(circle, #000 0%, transparent 55%); }
.scene .sun { position: absolute; left: 50%; top: 18%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; background: radial-gradient(circle, var(--glow) 0%, rgba(255,255,255,0) 68%); opacity: .55; }
.scene .hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 26vh; }
.scene .hills .h1 { fill: var(--hill1); opacity: .75; }
.scene .hills .h2 { fill: var(--hill2); }
.motes i { position: absolute; bottom: -20px; width: 10px; height: 10px; border-radius: 3px; background: rgba(255,255,255,.5); animation: float 14s linear infinite; }
.motes i:nth-child(3n+1) { background: rgba(60,200,240,.55); } .motes i:nth-child(3n+2) { background: rgba(240,80,154,.5); } .motes i:nth-child(3n) { background: rgba(255,216,74,.6); }
.motes i:nth-child(1) { left: 6%; animation-delay: -1s; } .motes i:nth-child(2) { left: 18%; animation-delay: -7s; width: 7px; height: 7px; }
.motes i:nth-child(3) { left: 29%; animation-delay: -3s; animation-duration: 18s; } .motes i:nth-child(4) { left: 41%; animation-delay: -11s; width: 6px; height: 6px; }
.motes i:nth-child(5) { left: 52%; animation-delay: -5s; animation-duration: 16s; } .motes i:nth-child(6) { left: 63%; animation-delay: -9s; width: 8px; height: 8px; }
.motes i:nth-child(7) { left: 72%; animation-delay: -2s; animation-duration: 20s; } .motes i:nth-child(8) { left: 81%; animation-delay: -13s; width: 6px; height: 6px; }
.motes i:nth-child(9) { left: 90%; animation-delay: -6s; } .motes i:nth-child(10) { left: 96%; animation-delay: -10s; animation-duration: 17s; width: 7px; height: 7px; }
@keyframes float { from { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { transform: translateY(-110vh) rotate(360deg); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- candy buttons ---------- */
.cbtn { --b1: #fff; --b2: #EDE7FF; --b3: #B9AEDB; --tx: var(--ink); position: relative; border: none; color: var(--tx); background: linear-gradient(180deg, var(--b1), var(--b2)); box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.08), 0 5px 0 var(--b3), 0 8px 14px rgba(20,0,60,.3); transition: transform .08s, box-shadow .08s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cbtn::before { content: ""; position: absolute; left: 12%; right: 12%; top: 5px; height: 32%; border-radius: 999px; background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none; }
.cbtn:active, .cbtn.pressed { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.08), 0 1px 0 var(--b3), 0 3px 6px rgba(20,0,60,.3); }
.cbtn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.cbtn svg.fill { fill: currentColor; stroke: none; }
.cbtn.green { --b1: #8BE04E; --b2: #3FB02A; --b3: #2A7D1B; --tx: #fff; }
.cbtn.blue { --b1: #5EC4FF; --b2: #2D7FE6; --b3: #1C56A8; --tx: #fff; }
.cbtn.purple { --b1: #A88BFF; --b2: #6A46EA; --b3: #4630A8; --tx: #fff; }
.cbtn.pink { --b1: #FF8CC6; --b2: #EC3F94; --b3: #A82366; --tx: #fff; }
.cbtn.gold { --b1: #FFE16A; --b2: #FFAE1A; --b3: #C27400; --tx: #6B3A00; }
.cbtn.red { --b1: #FF7B7B; --b2: #E63946; --b3: #A0202B; --tx: #fff; }
.cbtn.round { width: 52px; height: 52px; border-radius: 18px; padding: 0; flex: none; }
.cbtn.round b { font-size: 26px; font-weight: 700; }
.cbtn.big { min-height: 66px; padding: 10px 30px; border-radius: 24px; font-size: 28px; font-weight: 700; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0,0,0,.22); }
.cbtn.big small { font-size: 15px; font-weight: 600; letter-spacing: 0; opacity: .95; }
.cbtn:disabled { filter: grayscale(.6) brightness(.95); }

/* ---------- HUD ---------- */
.hud { position: sticky; top: 0; z-index: 20; width: 100%; max-width: 520px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px 8px; }
.hud .cbtn.round { width: 46px; height: 46px; border-radius: 16px; }
.hud .cbtn svg { width: 22px; height: 22px; }
.badge { display: flex; align-items: center; gap: 8px; padding: 5px 16px 5px 6px; min-height: 46px; border-radius: 999px; background: linear-gradient(180deg, #fff, #EFE8FF); box-shadow: 0 4px 0 #B9AEDB, 0 8px 14px rgba(20,0,60,.25); }
.badge .bi { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: linear-gradient(180deg, #A88BFF, #6A46EA); box-shadow: inset 0 2px 0 rgba(255,255,255,.4); color: #fff; }
.badge .bi svg { width: 22px; height: 22px; }
.badge .bt { display: flex; flex-direction: column; line-height: 1; }
.badge small { font-size: 11px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.badge b { font-size: 20px; font-weight: 700; color: var(--ink); }
.chips { display: flex; align-items: center; gap: 8px; }
.chip { display: flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px 0 6px; border-radius: 999px; background: rgba(20,0,60,.35); box-shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.2); color: #fff; font-size: 18px; font-weight: 700; }
.chip .ico { width: 26px; height: 26px; }
.chip b.bump { animation: pop .35s ease; }
.ico { display: inline-block; width: 20px; height: 20px; background: center / contain no-repeat; flex: none; }
.ico.star { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l3 6.2 6.8.9-5 4.7 1.3 6.8L12 17.5l-6.1 3.3 1.3-6.8-5-4.7 6.8-.9z' fill='%23FFC62A' stroke='%23C27400' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M9 8.6l3-5 1.6 3.4' fill='none' stroke='%23FFF1B0' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ico.flag { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 21V3' stroke='%236A46EA' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M7 4h11l-3 4 3 4H7z' fill='%23EC3F94'/%3E%3C/svg%3E"); }
.ico.foot { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='14' height='14' rx='4' fill='%233CC8F0'/%3E%3Cpath d='M14 12h8M19 9l3 3-3 3' fill='none' stroke='%236A46EA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ico.bulb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2Z' fill='%23FFC62A' stroke='%23C27400' stroke-width='1.3'/%3E%3Crect x='9' y='18.5' width='6' height='3.5' rx='1.5' fill='%238B7FB0'/%3E%3C/svg%3E"); }
.ico.fire { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 4 6 6 6 12a6 6 0 0 1-12 0c0-3 2-5 3-6 0 2 1 3 2 3 0-3-1-6 1-9Z' fill='%23FF7A1A'/%3E%3Cpath d='M12 12c1 2 3 3 3 5a3 3 0 0 1-6 0c0-1.5 1-2.5 1.5-3 .2 1 .8 1.5 1.5 1.5 0-1.2-.5-2.3 0-3.5Z' fill='%23FFD84A'/%3E%3C/svg%3E"); }
.ico.spark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z' fill='%23A88BFF'/%3E%3Cpath d='M19 2l.9 2.6L22.5 5.5l-2.6.9L19 9l-.9-2.6-2.6-.9 2.6-.9z' fill='%23FFC62A'/%3E%3C/svg%3E"); }
.ico.clock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%235EC4FF'/%3E%3Cpath d='M12 6v6l4 2' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ico.pad { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='7' width='20' height='11' rx='5.5' fill='%236A46EA'/%3E%3Cpath d='M7 10.5v4M5 12.5h4' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='11' r='1.4' fill='%23FFD84A'/%3E%3Ccircle cx='18' cy='14' r='1.4' fill='%23F0509A'/%3E%3C/svg%3E"); }
.ico.trophy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v2h3v3a5 5 0 0 1-4.6 5A5 5 0 0 1 13 15.9V18h3v3H8v-3h3v-2.1A5 5 0 0 1 8.6 13 5 5 0 0 1 4 8V5h3V3Z' fill='%23FFC62A' stroke='%23C27400' stroke-width='1.2'/%3E%3C/svg%3E"); }
.ico.medal { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h4l2 6H9zM13 2h4l-2 6h-4z' fill='%23EC3F94'/%3E%3Ccircle cx='12' cy='15' r='7' fill='%23FFC62A' stroke='%23C27400' stroke-width='1.3'/%3E%3Ccircle cx='12' cy='15' r='3.5' fill='%23FFE88A'/%3E%3C/svg%3E"); }
@keyframes pop { 50% { transform: scale(1.4); } }

main { width: 100%; max-width: 520px; padding: 0 14px 28px; display: flex; flex-direction: column; align-items: center; flex: 1; }

/* ---------- home ---------- */
.home { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 10px 0 60px; }
.logo-big { position: relative; width: 150px; height: 140px; isolation: isolate; animation: bob 3.2s ease-in-out infinite; }
.logo-big .lg { position: absolute; width: 84px; height: 84px; border-radius: 24px; mix-blend-mode: multiply; box-shadow: inset 0 4px 0 rgba(255,255,255,.45); }
.logo-big .lg.c { left: 0; top: 0; background: var(--C); animation: slideC 3.2s ease-in-out infinite; }
.logo-big .lg.m { left: 58px; top: 0; background: var(--M); animation: slideM 3.2s ease-in-out infinite; }
.logo-big .lg.y { left: 30px; top: 50px; background: var(--Y); }
.logo-big::before { content: ""; position: absolute; inset: -14px -16px; border-radius: 34px; background: #fff; box-shadow: 0 8px 0 var(--pshadow), 0 18px 30px rgba(20,0,60,.4); z-index: -1; }
.logo-big .shine { position: absolute; inset: -14px -16px; border-radius: 34px; overflow: hidden; pointer-events: none; }
.logo-big .shine::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent); animation: shine 3.6s ease-in-out infinite; mix-blend-mode: normal; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-1.5deg); } }
@keyframes slideC { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes slideM { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
@keyframes shine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
.title { margin: 6px 0 4px; font-size: 56px; line-height: 1; font-weight: 700; color: #fff; letter-spacing: 1px; text-shadow: 0 4px 0 #4630A8, 0 8px 18px rgba(20,0,60,.5); -webkit-text-stroke: 2px #4630A8; paint-order: stroke fill; }
.title span { color: #FFD84A; }
.home .cbtn.big { width: min(300px, 86vw); }
#btnPlay { flex-direction: column; gap: 0; min-height: 88px; font-size: 40px; animation: throb 1.8s ease-in-out infinite; }
#btnPlay small { margin-top: -2px; }
@keyframes throb { 50% { transform: scale(1.04); } }
#btnPlay:active { animation: none; }
#btnDaily { justify-content: flex-start; gap: 14px; padding-left: 14px; }
.cal { width: 46px; height: 48px; border-radius: 10px; background: #fff; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 3px 0 rgba(0,0,0,.18); text-shadow: none; flex: none; }
.cal i { font-style: normal; font-size: 11px; line-height: 16px; background: #E63946; color: #fff; letter-spacing: 1px; }
.cal b { flex: 1; display: grid; place-items: center; color: var(--ink); font-size: 22px; font-weight: 700; }
.dstat { margin-left: auto; display: flex; align-items: center; gap: 2px; font-size: 20px; }
.dstat .ico { width: 26px; height: 26px; }
.dstat .done { width: 30px; height: 30px; border-radius: 50%; background: #3FB02A; display: grid; place-items: center; box-shadow: 0 2px 0 #2A7D1B; font-size: 18px; }
.dstat .new { font-size: 13px; background: #FFD84A; color: #6B3A00; padding: 3px 8px; border-radius: 999px; text-shadow: none; animation: throb 1.2s ease-in-out infinite; }
.home-row { display: flex; gap: 16px; margin-top: 6px; }
.home-row .cbtn.round { width: 60px; height: 60px; border-radius: 20px; }
.home-row .cbtn svg { width: 28px; height: 28px; }

/* ---------- play ---------- */
.play { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 2px; }
.goal { position: relative; display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, #fff, var(--panel2)); border-radius: 20px; padding: 8px 12px 8px 8px; box-shadow: 0 5px 0 var(--pshadow), 0 10px 20px rgba(20,0,60,.3); }
.goal-ic { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(180deg, #A88BFF, #6A46EA); color: #fff; box-shadow: inset 0 2px 0 rgba(255,255,255,.4); }
.goal-ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.4; }
.mini { display: grid; gap: 3px; isolation: isolate; padding: 4px; border-radius: 10px; background: var(--frame2); }
.mini .c { width: 22px; height: 22px; border-radius: 5px; background: var(--well); position: relative; overflow: hidden; }
.mini .c .lay { position: absolute; inset: 0; mix-blend-mode: darken; }

.stage-wrap { position: relative; margin-top: 34px; }
.tip { position: absolute; left: 50%; top: -5px; transform: translate(-50%, -100%); z-index: 1005; background: #fff; color: var(--ink); font-size: 16px; font-weight: 700; padding: 8px 14px; border-radius: 16px; white-space: nowrap; box-shadow: 0 4px 0 var(--pshadow), 0 10px 20px rgba(20,0,60,.35); pointer-events: none; opacity: 0; transition: opacity .2s; max-width: calc(100vw - 30px); }
.tip::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; }
.tip.coaching { opacity: 1; animation: tipin .35s cubic-bezier(.34,1.6,.64,1); }
@keyframes tipin { from { transform: translate(-50%, -80%) scale(.6); opacity: 0; } }
.board { position: relative; isolation: isolate; padding: var(--pad); border-radius: 24px; background: linear-gradient(180deg, var(--frame), var(--frame2)); box-shadow: inset 0 3px 0 rgba(255,255,255,.8), inset 0 -3px 0 rgba(0,0,0,.06), 0 7px 0 rgba(20,0,60,.35), 0 18px 30px rgba(20,0,60,.4); touch-action: none; user-select: none; -webkit-user-select: none; }
.board .wells { display: grid; gap: var(--gap); }
.board .well { width: var(--cell); height: var(--cell); border-radius: 13px; background: var(--well); box-shadow: inset 0 3px 5px rgba(40,20,90,.12); }
.pane { position: absolute; left: var(--pad); top: var(--pad); mix-blend-mode: darken; /* darken: same colour over same colour stays the same, like the rules */ transition: transform .34s cubic-bezier(.34, 1.5, .64, 1); will-change: transform; cursor: grab; }
.pane.dragging { transition: none; cursor: grabbing; }
.pane .g { position: absolute; width: var(--cell); height: var(--cell); border-radius: 13px; background: var(--pc); transition: transform .15s; }
.pane .g::after { content: ""; position: absolute; inset: 0; border-radius: 13px; background: linear-gradient(140deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 40%); box-shadow: inset 0 -4px 0 rgba(0,0,0,.06); }
.pane.lifted .g { transform: scale(1.05); filter: saturate(1.15); }
.pane.squish .g { animation: squish .4s ease; }
@keyframes squish { 30% { transform: scale(1.1, .9); } 60% { transform: scale(.95, 1.05); } }
.grip { position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell); display: grid; place-items: center; pointer-events: none; z-index: 1000; transition: transform .34s cubic-bezier(.34, 1.5, .64, 1); }
.grip.dragging { transition: none; }
.grip svg { width: 46%; height: 46%; fill: none; stroke: rgba(255,255,255,.97); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.track { position: absolute; z-index: 4; border-radius: 16px; border: 3px dashed rgba(106,70,234,.35); pointer-events: none; opacity: 0; transition: opacity .2s; }
.track.on { opacity: 1; }
.board.won .pane .g { animation: glow 1.2s ease; }
@keyframes glow { 40% { filter: brightness(1.15) saturate(1.2); transform: scale(1.06); } }
.board .sparkle { position: absolute; inset: 0; z-index: 999; pointer-events: none; border-radius: 24px; overflow: hidden; }
.board .sparkle::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%); transform: translateX(-110%); }
.board.won .sparkle::after { animation: sweep 1s ease-out .1s; }
@keyframes sweep { to { transform: translateX(110%); } }
.board.bump { animation: bump .25s ease; }
@keyframes bump { 50% { transform: scale(1.015); } }
.spk { position: absolute; z-index: 1001; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.8 9.2L24 12l-9.2 2.8L12 24l-2.8-9.2L0 12l9.2-2.8z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat; filter: drop-shadow(0 0 4px rgba(255,255,255,.9)); animation: spk .7s ease-out forwards; }
@keyframes spk { from { transform: scale(0) rotate(0); opacity: 1; } 50% { transform: scale(1.2) rotate(90deg); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(0) rotate(180deg); opacity: 0; } }

.patterns .pane .g.C, .patterns .mini .lay.C { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.28) 0 3px, transparent 3px 9px); }
.patterns .pane .g.M, .patterns .mini .lay.M { background-image: radial-gradient(rgba(0,0,0,.32) 22%, transparent 24%); background-size: 10px 10px; }
.patterns .pane .g.Y, .patterns .mini .lay.Y { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 8px); }
.patterns .mini .lay.M { background-size: 6px 6px; }

.hand { position: absolute; z-index: 1002; width: 44px; height: 44px; pointer-events: none; font-size: 40px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.mix-chip { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1003; background: #fff; box-shadow: 0 4px 0 var(--pshadow), 0 10px 24px rgba(20,0,60,.35); border-radius: 999px; padding: 8px 16px; font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 8px; white-space: nowrap; animation: chipin .4s cubic-bezier(.34,1.6,.64,1); }
.mix-chip i { display: inline-block; width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 3px 0 rgba(255,255,255,.4); }
.mix-chip i.res { width: 34px; height: 34px; animation: pop .5s ease .25s; }
@keyframes chipin { from { opacity: 0; transform: translate(-50%, 20px) scale(.7); } }

.meter { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 240px; padding: 8px 16px 10px; border-radius: 20px; background: rgba(36,10,84,.68); box-shadow: inset 0 2px 6px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.15); }
.mstars { display: flex; gap: 4px; }
.mstars .st { width: 26px; height: 26px; transition: transform .3s, opacity .3s; }
.mstars .st:not(.on) { transform: scale(.8); }
.mstars .st.lose { animation: lose .5s ease; }
@keyframes lose { 30% { transform: scale(1.3) rotate(-15deg); } }
.pips { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; max-width: 300px; }
.pips i { width: 16px; height: 16px; border-radius: 6px; background: rgba(255,255,255,.32); box-shadow: inset 0 2px 3px rgba(0,0,0,.25); transition: background .2s; }
.pips i.on { background: linear-gradient(180deg, #8BE04E, #3FB02A); box-shadow: 0 2px 0 #2A7D1B; animation: pop .3s ease; }
.pips i.over { background: linear-gradient(180deg, #FFB86A, #FF7A1A); box-shadow: 0 2px 0 #B04A00; }
.pips i.on.over { animation: pop .3s ease; }
.mcount { display: flex; align-items: center; gap: 5px; color: #fff; font-size: 17px; }
.mcount b { font-weight: 700; } .mcount .slash { opacity: .5; margin: 0 4px; }
.mcount b.bounce { animation: pop .3s ease; display: inline-block; }
.actions { display: flex; gap: 14px; justify-content: center; align-items: center; }
.hintb em { position: absolute; right: -8px; top: -8px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: #E63946; color: #fff; font-style: normal; font-size: 16px; font-weight: 700; display: grid; place-items: center; border: 2.5px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.hintb.empty { filter: grayscale(1) brightness(.9); }
.hintb.empty em { background: #8B7FB0; }
.hintb svg { width: 28px; height: 28px; }
.pane.locked { cursor: not-allowed; }
.pane.locked .g { box-shadow: inset 0 0 0 4px rgba(42,27,77,.25); }
.grip.lock svg { width: 40%; height: 40%; stroke: rgba(42,27,77,.65); filter: none; }
.pane.hinted .g { animation: hintpulse 1s ease-in-out infinite; }
@keyframes hintpulse { 50% { filter: brightness(1.12); transform: scale(1.06); box-shadow: 0 0 0 4px #fff, 0 0 22px #FFD84A; } }
.board .ghost { position: absolute; inset: 0; pointer-events: none; z-index: 998; }
.board .ghost .gc { position: absolute; width: var(--cell); height: var(--cell); border-radius: 13px; border: 4px dashed; background: rgba(255,255,255,.4); animation: ghostp 1s ease-in-out infinite; }
@keyframes ghostp { 50% { transform: scale(.92); } }

/* ---------- map ---------- */
.map { width: 100%; display: flex; flex-direction: column; align-items: center; }
.path { position: relative; width: 100%; max-width: 380px; display: flex; flex-direction: column-reverse; align-items: center; padding: 20px 0 calc(122px + env(safe-area-inset-bottom)); /* bar height + safe area + margin; JS also measures the bar */ }
.road { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.road .r1 { fill: none; stroke: rgba(20,0,60,.35); stroke-width: 30; stroke-linecap: round; }
.road .r2 { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 22; stroke-linecap: round; }
.road .r3 { fill: none; stroke: rgba(106,70,234,.3); stroke-width: 4; stroke-dasharray: 2 14; stroke-linecap: round; }
.road .done { stroke: #FFD84A; }
.node { position: relative; z-index: 2; width: 66px; height: 66px; margin: 18px 0; border-radius: 50%; border: 4px solid #fff; padding: 0; color: #fff; font-size: 24px; font-weight: 700; text-shadow: 0 2px 0 rgba(0,0,0,.25); display: grid; place-items: center; background: radial-gradient(circle at 35% 28%, #FFB3DA 0%, #EC3F94 45%, #B32470 100%); box-shadow: 0 6px 0 rgba(20,0,60,.4), 0 10px 18px rgba(20,0,60,.35); }
.node.done { background: radial-gradient(circle at 35% 28%, #B8F08A 0%, #3FB02A 50%, #2A7D1B 100%); }
.node.current { z-index: 6; width: 82px; height: 82px; font-size: 30px; background: radial-gradient(circle at 35% 28%, #FFF0A0 0%, #FFAE1A 50%, #C27400 100%); color: #fff; animation: nodepulse 1.4s ease-in-out infinite; }
@keyframes nodepulse { 50% { transform: scale(1.08); box-shadow: 0 6px 0 rgba(20,0,60,.4), 0 0 0 10px rgba(255,216,74,.35), 0 0 30px rgba(255,216,74,.7); } }
.node.locked { background: radial-gradient(circle at 35% 28%, #E9E3F7 0%, #B9AEDB 60%, #8B7FB0 100%); border-color: rgba(255,255,255,.6); cursor: default; }
.node.locked .nb svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.6; }
.node.chal:not(.locked) { background: radial-gradient(circle at 35% 28%, #D6C8FF 0%, #6A46EA 50%, #3A2391 100%); }
.node.chal.done { box-shadow: 0 6px 0 rgba(20,0,60,.4), 0 0 0 4px #FFD84A; }
.node .tag { position: absolute; right: -14px; top: -12px; width: 30px; height: 30px; }
.node .ns { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); display: flex; }
.node .ns .st { width: 20px; height: 20px; } .node .ns .st:nth-child(2) { transform: translateY(-5px); }
.node .you { position: absolute; top: -58px; left: 50%; width: 44px; height: 44px; margin-left: -22px; border-radius: 14px; background: #fff; box-shadow: 0 4px 0 var(--pshadow), 0 6px 12px rgba(20,0,60,.4); display: grid; place-items: center; animation: you 1.2s ease-in-out infinite; }
.node .you::after { content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; }
.node .you i { position: absolute; width: 18px; height: 18px; border-radius: 5px; mix-blend-mode: multiply; }
@keyframes you { 50% { transform: translateY(-6px); } }
.chap { position: relative; z-index: 3; margin: 26px 0 10px; display: flex; align-items: center; gap: 10px; padding: 8px 26px 8px 10px; border-radius: 16px; color: #fff; background: linear-gradient(180deg, var(--cb1, #A88BFF), var(--cb2, #6A46EA)); box-shadow: 0 5px 0 rgba(20,0,60,.4), 0 10px 18px rgba(20,0,60,.35); }
.chap::before, .chap::after { content: ""; position: absolute; top: 10px; width: 22px; height: 100%; background: var(--cb2, #6A46EA); z-index: -1; filter: brightness(.75); }
.chap::before { left: -14px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.chap::after { right: -14px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.chap .ci { font-size: 30px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.25); }
.chap b { display: block; font-size: 19px; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.chap small { display: flex; align-items: center; gap: 3px; font-size: 15px; }
.chap small .ico { width: 18px; height: 18px; }
/* Level map: the PLAY button sits in a solid bar docked to the bottom, so it never covers a level node. */
.mapbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; justify-content: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #FFFFFF; border-radius: 24px 24px 0 0; box-shadow: 0 -4px 0 rgba(20,0,60,.12), 0 -10px 24px rgba(20,0,60,.18); animation: dockin .45s cubic-bezier(.34,1.4,.64,1); }
.mapbar .cbtn { min-width: 200px; }
.mapbar b { font-size: 32px; font-weight: 700; }
@keyframes dockin { from { transform: translateY(120px); } }

/* ---------- panels (dialogs) ---------- */
dialog.panel { border: 4px solid #fff; border-radius: 30px; background: linear-gradient(180deg, #fff, var(--panel2)); color: var(--ink); width: min(370px, calc(100vw - 28px)); padding: 44px 20px 22px; overflow: visible; box-shadow: 0 10px 0 var(--pshadow), 0 30px 60px rgba(20,0,60,.55); text-align: center; }
dialog[open] { animation: panelin .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes panelin { from { opacity: 0; transform: translateY(40px) scale(.7); } }
dialog::backdrop { background: rgba(20, 8, 50, .62); }
.ribbon { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); min-width: 200px; padding: 10px 28px; border-radius: 16px; color: #fff; font-size: 24px; font-weight: 700; white-space: nowrap; text-shadow: 0 2px 0 rgba(0,0,0,.25); background: linear-gradient(180deg, #FF8CC6, #EC3F94); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 5px 0 #A82366; z-index: 2; }
.ribbon::before, .ribbon::after { content: ""; position: absolute; top: 12px; width: 26px; height: 100%; background: #A82366; z-index: -1; }
.ribbon::before { left: -16px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.ribbon::after { right: -16px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.ribbon.purple { background: linear-gradient(180deg, #A88BFF, #6A46EA); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 5px 0 #4630A8; } .ribbon.purple::before, .ribbon.purple::after { background: #4630A8; }
.ribbon.gold { background: linear-gradient(180deg, #FFE16A, #FFAE1A); color: #6B3A00; text-shadow: 0 1px 0 rgba(255,255,255,.5); box-shadow: inset 0 3px 0 rgba(255,255,255,.45), 0 5px 0 #C27400; } .ribbon.gold::before, .ribbon.gold::after { background: #C27400; }
.ribbon.pink::before, .ribbon.pink::after { background: #A82366; }
.x { position: absolute !important; right: 8px; top: 8px; width: 40px !important; height: 40px !important; border-radius: 50% !important; z-index: 3; }
.x svg { width: 20px; height: 20px; stroke-width: 3.4; }
.btnrow { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.btnrow .cbtn.big { flex: 1; max-width: 200px; }
.statrow { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; min-height: 10px; }
.stat { display: flex; align-items: center; gap: 6px; padding: 6px 14px 6px 8px; border-radius: 999px; background: #fff; box-shadow: 0 3px 0 var(--pshadow); font-size: 20px; font-weight: 700; color: var(--ink); }
.stat .ico { width: 26px; height: 26px; }
.stat.plus { background: linear-gradient(180deg, #FFE16A, #FFAE1A); color: #6B3A00; box-shadow: 0 3px 0 #C27400; animation: plus .6s cubic-bezier(.34,1.6,.64,1) 1.2s both; }
@keyframes plus { from { transform: scale(0); } }
.st { display: inline-block; width: 18px; height: 18px; }
.st svg { width: 100%; height: 100%; fill: rgba(255,255,255,.22); stroke: rgba(255,255,255,.35); stroke-width: 1.2; }
.panel .st svg, .node .st svg { fill: #DCD3EE; stroke: #B9AEDB; }
.st.on svg { fill: #FFC62A; stroke: #C27400; stroke-width: 1.2; filter: drop-shadow(0 1px 0 rgba(160,100,0,.4)); }
.stars.big { display: flex; justify-content: center; align-items: flex-end; gap: 4px; margin: 6px 0 6px; position: relative; z-index: 1; }
.stars.big .st { width: 76px; height: 76px; }
.stars.big .st:nth-child(2) { width: 96px; height: 96px; transform: translateY(-14px); }
.st.pop.on { animation: starpop .55s cubic-bezier(.34,1.7,.64,1) both; animation-delay: calc(var(--i) * .38s + .25s); }
@keyframes starpop { from { transform: scale(3) rotate(-60deg); opacity: 0; } 60% { opacity: 1; } }
.stars.big .st.pop.on:nth-child(2) { animation-name: starpop2; }
@keyframes starpop2 { from { transform: translateY(-14px) scale(3) rotate(-60deg); opacity: 0; } 60% { opacity: 1; } to { transform: translateY(-14px); } }
.burst { position: absolute; left: 50%; top: 92px; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,216,74,.35) 0 12deg, transparent 12deg 30deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: spin 12s linear infinite; pointer-events: none; }
.share-mini { position: absolute !important; left: -14px; top: -14px; width: 44px !important; height: 44px !important; border-radius: 50% !important; z-index: 3; }
.share-mini svg { width: 20px; height: 20px; }

.medal-stage { position: relative; width: 170px; height: 170px; margin: 0 auto; }
.mrays { position: absolute; inset: -50px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,174,26,.4) 0 10deg, transparent 10deg 24deg); -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%); mask: radial-gradient(circle, #000 25%, transparent 70%); animation: spin 14s linear infinite; }
.medal { position: relative; width: 170px; height: 170px; animation: medalin 1s cubic-bezier(.3,1.5,.6,1) both; }
.medal svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 0 rgba(20,0,60,.25)); }
.medal::after { content: ""; position: absolute; inset: 10% 10% 22%; border-radius: 50%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.9) 50%, transparent 60%); background-size: 300% 100%; animation: mshine 2.4s ease-in-out 1s infinite; pointer-events: none; mix-blend-mode: soft-light; }
@keyframes medalin { 0% { transform: translateY(-260px) scale(.3) rotate(-200deg); opacity: 0; } 60% { transform: translateY(10px) scale(1.15) rotate(10deg); opacity: 1; } 80% { transform: scale(.95) rotate(-3deg); } }
@keyframes mshine { 0% { background-position: 100% 0; } 60%, 100% { background-position: -100% 0; } }
.rank { margin: 4px 0 10px; font-size: 32px; font-weight: 700; color: #6A46EA; text-shadow: 0 3px 0 #E1D8FF; }
.rankbar { position: relative; height: 26px; margin: 0 26px 6px 6px; border-radius: 13px; background: #E6DEFA; box-shadow: inset 0 3px 4px rgba(40,20,90,.18); }
.rankbar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 13px; background: linear-gradient(180deg, #FFE16A, #FFAE1A); box-shadow: inset 0 3px 0 rgba(255,255,255,.5); transition: width 1.2s cubic-bezier(.3,1.2,.6,1) .8s; }
.rankbar .rb-ic { position: absolute; right: -24px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 700; color: var(--muted); }
.rankbar .rb-ic .ico { width: 34px; height: 34px; }

/* help demo */
.demo { position: relative; width: 250px; height: 118px; margin: 0 auto 8px; }
.dgrid { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; padding: 6px; border-radius: 14px; background: var(--frame2); isolation: isolate; }
.dgrid i { width: 34px; height: 34px; border-radius: 8px; background: #fff; }
.dp { position: absolute; width: 34px; height: 34px; border-radius: 8px; mix-blend-mode: multiply; z-index: 2; box-shadow: inset 0 3px 0 rgba(255,255,255,.4); }
.dm { left: 44px; top: 6px; background: var(--M); width: 72px; }
.dc { left: 6px; top: 44px; background: var(--C); animation: demo 3s ease-in-out infinite; }
.dhand { position: absolute; left: 20px; top: 60px; font-size: 30px; z-index: 3; animation: demoh 3s ease-in-out infinite; }
@keyframes demo { 0%, 15% { transform: translate(0, 0); } 45%, 85% { transform: translate(38px, -38px); } 100% { transform: translate(0, 0); } }
@keyframes demoh { 0%, 15% { transform: translate(0, 0); opacity: 1; } 45% { transform: translate(38px, -38px); opacity: 1; } 55%, 90% { opacity: 0; transform: translate(38px, -38px); } 100% { opacity: 0; } }
.dgrid { isolation: isolate; }
.demo .dp, .demo .dgrid { } 
.dgoal { position: absolute; right: 0; top: 14px; display: grid; grid-template-columns: repeat(3, 22px); gap: 3px; padding: 5px; border-radius: 10px; background: var(--frame2); }
.dgoal i { width: 22px; height: 22px; border-radius: 5px; background: #fff; }
.dgoal i.b { background: rgb(57,64,152); }
.dgoal::before { content: ""; position: absolute; left: -46px; top: 30px; width: 32px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath d='M2 10h26M20 3l8 7-8 7' fill='none' stroke='%236A46EA' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.mixes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 12px; }
.mixes span { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 18px; font-weight: 700; color: var(--muted); padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--pshadow); }
.mixes i { width: 24px; height: 24px; border-radius: 7px; display: inline-block; box-shadow: inset 0 2px 0 rgba(255,255,255,.4); }
.mixes i.res { width: 28px; height: 28px; }
.rules { display: flex; justify-content: center; gap: 5px; margin-bottom: 14px; }
.rules > div { display: flex; align-items: center; gap: 2px; padding: 6px 7px; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--pshadow); font-size: 15px; font-weight: 700; color: var(--muted); }
.rules .st { width: 15px; height: 15px; }
.panel .cbtn.big { width: 100%; }
.btnrow .cbtn.big { width: auto; }

/* stats */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--pshadow); }
.tile .ico { width: 32px; height: 32px; }
.tile b { font-size: 26px; font-weight: 700; line-height: 1.1; }
.tile.wide { grid-column: span 3; flex-direction: row; justify-content: center; gap: 10px; }
.tile.wide b { font-size: 20px; }
.sect { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 8px; font-size: 15px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.sect .ico { width: 22px; height: 22px; }

/* settings */
.toggles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tgl { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px 10px; border-radius: 20px; background: linear-gradient(180deg, #F1ECFB, #E2DAF5); box-shadow: 0 4px 0 #B9AEDB; cursor: pointer; transition: transform .08s; filter: grayscale(.8); opacity: .75; }
.tgl:active { transform: translateY(3px); }
.tgl input { position: absolute; opacity: 0; pointer-events: none; }
.tgl:has(input:checked) { background: linear-gradient(180deg, #8BE04E, #3FB02A); box-shadow: 0 4px 0 #2A7D1B; filter: none; opacity: 1; color: #fff; }
.tgl.on { background: linear-gradient(180deg, #8BE04E, #3FB02A); box-shadow: 0 4px 0 #2A7D1B; filter: none; opacity: 1; color: #fff; }
.tg-ic { font-size: 34px; line-height: 1; height: 40px; display: grid; place-items: center; }
.tg-ic.pat { display: flex; gap: 3px; }
.tg-ic.pat i { width: 14px; height: 30px; border-radius: 4px; }
.tg-ic.pat i:nth-child(1) { background: var(--C) repeating-linear-gradient(45deg, rgba(0,0,0,.3) 0 2px, transparent 2px 6px); }
.tg-ic.pat i:nth-child(2) { background: var(--M) radial-gradient(rgba(0,0,0,.35) 22%, transparent 25%) 0 0/6px 6px; }
.tg-ic.pat i:nth-child(3) { background: var(--Y) repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 2px, transparent 2px 6px); }
.tg-lb { font-size: 15px; font-weight: 700; }

.toast { position: fixed; left: 50%; top: 14px; transform: translate(-50%, -110px); background: #fff; color: var(--ink); padding: 10px 18px; border-radius: 16px; font-size: 17px; font-weight: 700; box-shadow: 0 4px 0 var(--pshadow), 0 10px 20px rgba(20,0,60,.35); transition: transform .3s cubic-bezier(.34,1.5,.64,1); z-index: 40; white-space: nowrap; }
.toast.show { transform: translate(-50%, 0); }
#confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 2147483647; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-height: 700px) { .home { gap: 12px; } .logo-big { transform: scale(.8); } .title { font-size: 46px; } }
.stat .mx { display: inline-block; width: 24px; height: 24px; border-radius: 7px; box-shadow: inset 0 2px 0 rgba(255,255,255,.4); }
.stat small { opacity: .4; }
.stat .ico.flag { width: 22px; height: 22px; }

.dgoal i.m { background: var(--M); }
.rules > div { white-space: nowrap; }
.rules .st3, .rules .st2 { display: inline-flex; gap: 1px; }
body[data-view=map] .hud { background: linear-gradient(180deg, var(--sky1) 55%, transparent); }
.cbtn:focus { outline: none; }
.cbtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.rankbar .fill.snap { transition: none; }
.rankbar.done .fill { background: linear-gradient(180deg, #B8F27A, #3FB02A); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 0 16px #FFE16A; }
.rankbar.done .rb-ic { animation: pop .4s ease; }

/* ---- v5: puzzle colours are painted on canvas (immune to browser dark modes / Dark Reader) ---- */
.board { box-sizing: border-box; }
.board .bcv { position: absolute; left: 0; top: 0; border-radius: 24px; pointer-events: none; }
.board .pane { opacity: 0; mix-blend-mode: normal; transition: none; }
.board .pane:focus-visible { outline: none; }
.grip, .grip.dragging { transition: none; }
.mini:has(canvas) { padding: 0; background: transparent; display: block; line-height: 0; }
canvas.swatch { display: inline-block; vertical-align: middle; border-radius: 7px; }
.glide-rules { list-style: none; margin: 4px 0 10px; padding: 0; text-align: left; display: grid; gap: 6px; }
.glide-rules li { display: flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 600; color: var(--ink); background: #fff; border-radius: 14px; padding: 8px 12px; box-shadow: 0 3px 0 var(--pshadow); }
.glide-rules b { font-size: 20px; width: 24px; text-align: center; flex: none; }
#btnUndo.empty { opacity: .45; }
html, body, .board, .mini, canvas { forced-color-adjust: none; }

/* ---------- v6: music button, settings volume, gift bar, coach marks ---------- */
.home-row { gap: 12px; }
#btnMusic .slash { display: none; position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; fill: none; filter: drop-shadow(0 0 1.5px #1C56A8); }
#btnMusic { position: relative; }
#btnMusic.off { --b1: #C9C3DA; --b2: #9C94B6; --b3: #6E6690; }
#btnMusic.off .slash { display: block; }
#btnMusic.off .note { opacity: .75; }
.toggles { grid-template-columns: repeat(2, 1fr); }
.vol { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; margin-top: 14px; padding: 12px 14px; border-radius: 20px; background: linear-gradient(180deg, #F1ECFB, #E2DAF5); box-shadow: 0 4px 0 #B9AEDB; color: #2A1B4D; text-align: left; }
.vol .vi { font-size: 22px; grid-row: span 2; }
.vol .vl { font-weight: 600; font-size: 15px; }
.vol b { font-size: 14px; color: #5B3FD0; grid-row: span 2; min-width: 42px; text-align: right; }
.vol input[type=range] { grid-column: 2; width: 100%; height: 28px; accent-color: #6A46EA; margin: 0; cursor: pointer; }
.help-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.help-btns .cbtn.big { min-width: 0; flex: 1 1 130px; }
.gift { display: flex; align-items: center; gap: 8px; margin: 2px auto 14px; max-width: 280px; padding: 6px 12px 6px 8px; border-radius: 999px; background: #FFF4D6; box-shadow: inset 0 0 0 2px #FFD66B; color: #8A5200; }
.gift .gi { font-size: 22px; animation: giftbob 1.8s ease-in-out infinite; }
.gift .gtrack { flex: 1; height: 12px; border-radius: 99px; background: #F2DFAE; overflow: hidden; box-shadow: inset 0 2px 2px rgba(120,70,0,.18); }
.gift .gfill { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #FFC62A, #FF9A1A); transition: width .9s cubic-bezier(.3,1.3,.5,1); }
.gift b { font-size: 13px; white-space: nowrap; }
@keyframes giftbob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-6deg); } }

.cm-layer { position: fixed; inset: 0; z-index: 9000; background: rgba(25, 10, 60, .34); cursor: pointer; forced-color-adjust: none; color-scheme: only light; animation: cmfade .25s ease-out; -webkit-tap-highlight-color: transparent; }
.cm-layer.in-dlg { position: absolute; border-radius: 26px; }
.cm-ring { position: absolute; border-radius: 18px; border: 3px solid #FFD84A; box-shadow: 0 0 0 4px rgba(255, 216, 74, .35), 0 0 22px rgba(255, 216, 74, .7); animation: cmring 1.3s ease-in-out infinite; pointer-events: none; }
.cm-bub { position: absolute; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; padding: 12px 14px 10px; border-radius: 18px; background: #FFFFFF; color: #2A1B4D; box-shadow: 0 6px 0 #C9BCEB, 0 14px 30px rgba(20, 0, 60, .35); text-align: left; animation: cmpop .35s cubic-bezier(.34, 1.56, .64, 1); }
.cm-ico { font-size: 30px; line-height: 1; grid-row: span 2; animation: cmbob 1.4s ease-in-out infinite; }
.cm-txt { font-size: 16px; font-weight: 600; line-height: 1.25; }
.cm-bub small { font-size: 12px; color: #7A6AA8; }
.cm-arrow { position: absolute; width: 24px; height: 18px; background: #FFD84A; filter: drop-shadow(0 2px 0 #C79A00); animation: cmbounce .9s ease-in-out infinite; pointer-events: none; }
.cm-arrow.up { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cm-arrow.down { clip-path: polygon(0 0, 100% 0, 50% 100%); }
@keyframes cmfade { from { opacity: 0; } }
@keyframes cmpop { from { transform: scale(.7); opacity: 0; } }
@keyframes cmring { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes cmbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px) rotate(-8deg); } }
@keyframes cmbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.cm-arrow.up { animation-name: cmbounceup; }
@keyframes cmbounceup { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---------- v7: visual help, button text that always fits ---------- */
.hgoal { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 8px; font-size: 18px; color: var(--ink); }
.hgoal span { font-size: 22px; }
.hdemos { display: flex; justify-content: center; gap: 14px; margin-bottom: 10px; }
.hd { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hd figcaption { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.hg { display: grid; grid-template-columns: repeat(3, 26px); gap: 3px; padding: 6px; border-radius: 12px; background: var(--frame2); isolation: isolate; }
.hg i { width: 26px; height: 26px; border-radius: 7px; background: #E1D8F1; box-shadow: inset 0 3px 3px rgba(60,30,130,.18); }
.hp { position: absolute; top: 35px; left: 6px; width: 26px; height: 26px; border-radius: 7px; mix-blend-mode: multiply; box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 2px 3px rgba(40,15,90,.3); }
.hp.c { background: var(--C); } .hp.m { background: var(--M); }
.hp.fixed { left: 35px; }
.hp.glide { animation: hglide 3.2s ease-in-out infinite; }
.hp.stick { animation: hstick 3.2s ease-in-out infinite; }
.hh { position: absolute; top: 46px; left: 10px; font-size: 22px; z-index: 3; pointer-events: none; }
.hh.glide { animation: hhand 3.2s ease-in-out infinite; }
.hh.stick { animation: hhand2 3.2s ease-in-out infinite; }
@keyframes hglide { 0%, 18% { transform: translateX(0); } 48%, 85% { transform: translateX(58px); } 100% { transform: translateX(0); } }
@keyframes hstick { 0%, 18% { transform: translateX(0); } 40%, 85% { transform: translateX(29px); } 100% { transform: translateX(0); } }
@keyframes hhand { 0%, 10% { transform: translateX(0); opacity: 1; } 40% { transform: translateX(40px); opacity: 1; } 52%, 100% { transform: translateX(40px); opacity: 0; } }
@keyframes hhand2 { 0%, 10% { transform: translateX(0); opacity: 1; } 36% { transform: translateX(29px); opacity: 1; } 48%, 100% { transform: translateX(29px); opacity: 0; } }
.help-btns { flex-wrap: nowrap; }
.help-btns .cbtn.big { flex: 1 1 0; min-width: 0; padding: 10px 8px; min-height: 58px; font-size: clamp(17px, 5.4vw, 22px); letter-spacing: .5px; }
.help-btns #btnReplayTut { flex-grow: 1.35; }
.cbtn .lbl { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mixes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mixes span { gap: 3px; font-size: 16px; padding: 6px 4px; min-width: 0; }
.mixes i { width: 22px; height: 22px; flex: none; } .mixes i.res { width: 26px; height: 26px; }
.btnrow .cbtn.big { min-width: 0; padding-left: 12px; padding-right: 12px; font-size: clamp(19px, 6.4vw, 28px); gap: 6px; }
.mixes .swatch { width: 20px !important; height: 20px !important; flex: none; } .mixes .swatch.res { width: 25px !important; height: 25px !important; }
.btnrow .cbtn.big { padding-left: 8px; padding-right: 8px; letter-spacing: 0; font-size: clamp(18px, 6vw, 28px); }
.mixes span { gap: 2px; font-size: 15px; padding: 6px 3px; }

/* ---------- v8: new glass, rewards, Glass House, shop, daily gift ---------- */
.ico.shard { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2l9 4-2 15-11-4z' fill='%2360D4F5' stroke='%231C56A8' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M9 2l3 9 6-5M12 11l4 10M12 11l-7 6' fill='none' stroke='%23fff' stroke-width='1' opacity='.8'/%3E%3Cpath d='M9 2l-4 15 7-6z' fill='%23A88BFF' opacity='.55'/%3E%3C/svg%3E"); }
.ico.gem { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22 2 9l4-5h12l4 5z' fill='%233FB8F5' stroke='%231C56A8' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M2 9h20M8 4l-2 5 6 13 6-13-2-5' fill='none' stroke='%23fff' stroke-width='1.1' opacity='.85'/%3E%3C/svg%3E"); }
.ico.crown { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 8l4.5 4L12 4l4.5 8L21 8l-2 11H5z' fill='%23FFC62A' stroke='%23C27400' stroke-width='1.4' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='15' r='1.8' fill='%23EC3F94'/%3E%3C/svg%3E"); }
.ico.gift { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='9' width='18' height='12' rx='2' fill='%23EC3F94'/%3E%3Crect x='2' y='6' width='20' height='5' rx='1.5' fill='%23FF8CC6'/%3E%3Cpath d='M12 6v15' stroke='%23FFD84A' stroke-width='3'/%3E%3Cpath d='M12 6c-2-4-6-3-5 0zM12 6c2-4 6-3 5 0z' fill='%23FFD84A'/%3E%3C/svg%3E"); }
.ico.newg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23fff' stroke='%236A46EA' stroke-width='1.6'/%3E%3Cpath d='M12 4l1.9 6.1L20 12l-6.1 1.9L12 20l-1.9-6.1L4 12l6.1-1.9z' fill='%23FFC62A' stroke='%23C27400' stroke-width='.8'/%3E%3C/svg%3E"); }
button.chip { border: none; font: inherit; cursor: pointer; }
.hud .chips { gap: 6px; }
.hud .chip { padding: 0 10px 0 5px; font-size: 17px; }
.hud .chip .ico { width: 24px; height: 24px; }
body[data-view="play"] #chipShards, body[data-view="tutorial"] #chipShards { display: none; }
body[data-view="home"] #chipStars { display: none; }

.home-meta { display: flex; gap: 10px; margin-top: 14px; }
.cbtn.meta { flex-direction: column; gap: 2px; width: 84px; height: 72px; border-radius: 20px; padding: 6px 4px; }
.cbtn.meta .me { font-size: 28px; line-height: 1; }
.cbtn.meta svg.win { width: 30px; height: 30px; }
.cbtn.meta .ml { font-size: 15px; font-weight: 700; letter-spacing: .3px; text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.cbtn.meta.gold .ml { text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.cbtn .dot { position: absolute; right: 6px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #FFD84A; border: 2px solid #fff; box-shadow: 0 0 0 0 rgba(255,216,74,.8); animation: dotpulse 1.4s ease-in-out infinite; }
@keyframes dotpulse { 50% { box-shadow: 0 0 0 7px rgba(255,216,74,0); transform: scale(1.12); } }

.mapbar { flex-direction: column; align-items: center; gap: 8px; padding-top: 10px; }
.teaser { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; min-height: 30px; padding: 4px 14px 4px 6px; border-radius: 999px; background: #F3EEFF; box-shadow: inset 0 0 0 2px #D9CCF7; color: var(--ink); font-size: 15px; font-weight: 600; }
.teaser:empty { display: none; }
.teaser .tz-ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #fff; font-size: 16px; box-shadow: 0 2px 0 #D9CCF7; flex: none; }
.teaser .tz-tx { min-width: 0; line-height: 1.2; text-align: center; }
.teaser b { color: #5B3FD0; font-weight: 700; font-size: inherit; line-height: inherit; }
.teaser.in-card { margin: -6px auto 12px; max-width: 290px; }

.meter .mtop { display: flex; align-items: center; gap: 10px; }
.gemct { display: flex; align-items: center; gap: 3px; padding: 2px 10px 2px 4px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 16px; }
.gemct .ico { width: 22px; height: 22px; }
.gemct .slash { opacity: .55; margin: 0 1px; }
.gemct.bounce { animation: pop .35s ease; }
.spk.gem { width: 18px; height: 18px; margin: -9px 0 0 -9px; filter: drop-shadow(0 0 5px rgba(60,184,245,.95)); }
.grip.oneway svg { width: 56%; height: 56%; stroke-width: 3.2; stroke: #FFF6C8; filter: drop-shadow(0 0 2px rgba(120,70,0,.75)); }

.node.boss:not(.locked) { background: radial-gradient(circle at 35% 28%, #FFF3B0 0%, #F2B21E 50%, #A86A00 100%); border-color: #FFE58A; }
.node.boss { box-shadow: 0 6px 0 rgba(20,0,60,.4), 0 0 0 4px rgba(255,216,74,.55), 0 10px 18px rgba(20,0,60,.35); }
.node.intro:not(.done):not(.current) { box-shadow: 0 6px 0 rgba(20,0,60,.4), 0 0 0 4px rgba(255,255,255,.55), 0 0 18px rgba(255,240,160,.8); }

.win-cv { display: block; margin: 0 auto; }
.house-big { display: grid; place-items: center; margin: 2px 0 6px; }
.house-name { margin: 2px 0 0; font-size: 24px; color: var(--ink); }
.house-sub { font-size: 15px; color: var(--muted); margin-bottom: 10px; }
.house-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; justify-content: flex-start; scrollbar-width: thin; }
.house-row:has(.hw:only-child) { justify-content: center; }
.hw { flex: none; width: 64px; height: 64px; display: grid; place-items: center; border: none; border-radius: 18px; background: #fff; box-shadow: 0 3px 0 var(--pshadow); padding: 0; }
.hw.sel { box-shadow: 0 0 0 3px #6A46EA, 0 3px 0 var(--pshadow); }
.house-tip { margin: 6px 0 0; font-size: 14px; color: var(--muted); line-height: 1.3; }

.bal { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px 6px 8px; border-radius: 999px; background: #fff; box-shadow: 0 3px 0 var(--pshadow); font-size: 17px; color: var(--ink); }
.bal .ico { width: 28px; height: 28px; } .bal b { font-size: 22px; }
#shopBody .sect { margin: 12px 0 6px; }
.shop-it { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; margin-bottom: 6px; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 var(--pshadow); text-align: left; }
.shop-it .si { width: 34px; height: 34px; display: grid; place-items: center; font-size: 24px; flex: none; }
.shop-it .sw { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.shop-it .sw i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 2px 2px rgba(0,0,0,.18); }
.shop-it .sn { flex: 1; min-width: 0; font-size: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-it .sb { flex: none; min-width: 72px; height: 38px; padding: 0 10px; border-radius: 14px; font-size: 16px; font-weight: 700; gap: 3px; }
.shop-it .sb .ico { width: 20px; height: 20px; }
.shop-it span.sb.on { display: grid; place-items: center; color: #3FB02A; font-size: 22px; }

.gift-chest { font-size: 56px; line-height: 1; margin: 0 0 4px; animation: giftbob 1.8s ease-in-out infinite; }
.gift-msg { margin: 0 0 10px; font-size: 16px; color: var(--ink); }
.gift-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.gd { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--pshadow); color: var(--ink); position: relative; }
.gd small { font-size: 11px; color: var(--muted); }
.gd b { display: flex; align-items: center; gap: 1px; font-size: 16px; }
.gd b .ico { width: 18px; height: 18px; }
.gd em { font-style: normal; font-size: 11px; }
.gd.big { grid-column: span 2; background: linear-gradient(180deg, #FFF4D6, #FFE19A); }
.gd.got { opacity: .55; } .gd.got::after { content: "✔"; position: absolute; right: 4px; top: 2px; font-size: 12px; color: #3FB02A; }
.gd.now { box-shadow: 0 0 0 3px #3FB02A, 0 3px 0 var(--pshadow); animation: throb 1.4s ease-in-out infinite; }
#btnClaim b { font-size: 26px; } #btnClaim .ico { width: 28px; height: 28px; }
.gift-next { font-size: 17px; color: var(--muted); padding: 10px; }

.achs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; text-align: left; }
.ach { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 14px; background: #F1ECFB; opacity: .7; min-width: 0; }
.ach.got { background: #fff; box-shadow: 0 3px 0 var(--pshadow); opacity: 1; }
.ach .ai { font-size: 20px; flex: none; filter: grayscale(1); } .ach.got .ai { filter: none; }
.ach .at { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ach b { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ach small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes giftbob { 50% { transform: translateY(-6px) rotate(-4deg); } }
.house-row { position: relative; }
@media (max-width: 400px) {
  .hud .chips { gap: 4px; }
  .hud .chip { padding: 0 8px 0 3px; font-size: 15px; }
  .hud .chip .ico { width: 20px; height: 20px; }
  body[data-view="map"] #chipShards { display: none; } /* shards stay on the home screen and in the shop */
}
/* v9: progress code + install in Settings */
.set-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cbtn.wide { flex: 1 1 140px; min-height: 48px; border-radius: 18px; font-size: 16px; font-weight: 700; padding: 8px 12px; text-shadow: 0 1px 0 rgba(0,0,0,.2); }
#dlgSave .cbtn.wide { width: 100%; margin: 8px 0 4px; }
.set-links { margin: 12px 0 0; text-align: center; font-size: 14px; font-weight: 500; color: var(--muted); }
.set-links a { color: #5B23B0; }
.save-tip { margin: 4px 0 10px; font-size: 15px; font-weight: 500; line-height: 1.45; }
.save-lb { display: block; font-size: 14px; font-weight: 600; margin-top: 10px; color: #5E5285; }
.save-box { width: 100%; font: 500 12.5px/1.35 ui-monospace, Menlo, Consolas, monospace; color: var(--ink); background: var(--panel2); border: 2px solid var(--pshadow); border-radius: 14px; padding: 8px 10px; resize: none; word-break: break-all; user-select: text; -webkit-user-select: text; }
.save-msg { min-height: 1.2em; margin: 6px 0 0; font-size: 14px; color: #B3204D; text-align: center; }

/* v10: dialogs never clip their ribbon or close button. The ribbon and ✕ stay on the panel while
   only the content (.pscroll, wrapped by game.js) scrolls, so the header is always visible. */
dialog.panel[open] { display: flex; flex-direction: column; max-height: calc(100dvh - 76px); }
dialog.panel > .pscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: -6px -20px -22px; padding: 6px 20px 22px; border-radius: 0 0 26px 26px; scrollbar-width: thin; }
.ribbon { z-index: 2; }
.tile small { font-size: 11.5px; line-height: 1.15; color: var(--muted); font-weight: 600; letter-spacing: .2px; max-width: 100%; overflow-wrap: anywhere; }
/* daily distribution: one label column, one track per row, counts in their own column */
.dist { margin-top: 12px; padding: 10px 12px 12px; border-radius: 16px; background: #fff; box-shadow: 0 4px 0 var(--pshadow); text-align: left; }
.dist .dhead { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 0 0 6px; }
.dist .drow { display: grid; grid-template-columns: 52px 1fr 30px; align-items: center; gap: 8px; height: 26px; }
.dist .dl { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: 14px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.dist .dl .ico { width: 15px; height: 15px; }
.dist .dt { position: relative; height: 16px; border-radius: 8px; background: #EEE8FB; overflow: hidden; }
.dist .df { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(180deg, #A88BFF, #6A46EA); }
.dist .drow.me .df { background: linear-gradient(180deg, #8BE04E, #3FB02A); }
.dist .drow.me .dl, .dist .drow.me .dn { color: #2E8A1F; }
.dist .dn { text-align: right; font-size: 15px; font-weight: 700; }

/* ---------- v10: tablet and desktop layouts (phones under 700px wide are unchanged) ---------- */
.home-hero, .home-actions { display: contents; }
.home-tag, .home-feats, .keys { display: none; }
@media (hover: hover) and (pointer: fine) {
  .board .pane { cursor: grab; }
  .board .pane.locked { cursor: not-allowed; }
  body.grabbing, body.grabbing .board .pane { cursor: grabbing; }
  .cbtn:hover { filter: brightness(1.06); }
}
@media (min-width: 700px) {
  main { max-width: 680px; }
  .hud { max-width: 720px; }
  .meter { min-width: 300px; }
}
@media (min-width: 960px) and (min-height: 560px) {
  .hud { max-width: 1180px; padding-left: 28px; padding-right: 28px; }
  main { max-width: 1180px; padding: 0 28px 32px; }
  /* home: hero on the left, a glass card of actions on the right */
  .home { flex-direction: row; align-items: center; justify-content: center; gap: clamp(48px, 7vw, 120px); padding: 24px 0 90px; }
  .home-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 480px; }
  .home-hero .logo-big { margin: 14px 0 18px 16px; }
  .home-hero .title { font-size: clamp(64px, 6vw, 84px); margin: 0; text-align: left; }
  .home-tag { display: block; margin: 0; color: #fff; font-size: 22px; font-weight: 600; line-height: 1.35; text-shadow: 0 2px 8px rgba(20,0,60,.35); }
  .home-feats { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 14px 0 0; padding: 0; color: #fff; font-size: 17px; line-height: 1.35; }
  .home-feats li { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 18px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
  .home-feats .ico { width: 28px; height: 28px; flex: none; }
  .home-actions { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px 40px 34px; border-radius: 34px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 24px 60px rgba(20,0,60,.35); }
  .home .cbtn.big { width: 340px; min-height: 76px; font-size: 32px; }
  .home-row .cbtn.round { width: 66px; height: 66px; }
  .home-meta { margin-top: 4px; }
  /* play: target and moves on the left, board in the middle, controls on the right */
  .play { display: grid; grid-template-columns: minmax(220px, 270px) auto minmax(220px, 270px); grid-template-rows: auto auto 1fr; grid-template-areas: "goal stage keys" "meter stage keys" "actions stage keys"; column-gap: clamp(28px, 4vw, 60px); row-gap: 18px; justify-content: center; align-items: start; padding-top: 18px; }
  .play > .goal { grid-area: goal; flex-direction: column; justify-self: stretch; gap: 12px; padding: 16px; margin-top: 34px; }
  .play > .goal::after { content: "Match this picture"; font-size: 15px; font-weight: 600; color: var(--muted); }
  .play > .stage-wrap { grid-area: stage; }
  .play > .meter { grid-area: meter; justify-self: stretch; min-width: 0; }
  .play > .actions { grid-area: actions; flex-wrap: wrap; gap: 12px; }
  .keys { display: block; grid-area: keys; margin-top: 34px; padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 5px 0 var(--pshadow), 0 12px 26px rgba(20,0,60,.25); }
  .keys h2 { margin: 0 0 10px; font-size: 18px; }
  .keys dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; margin: 0; align-items: center; font-size: 14px; }
  .keys dt { white-space: nowrap; display: flex; gap: 3px; align-items: center; } .keys dd { margin: 0; color: var(--muted); white-space: nowrap; }
  .keys kbd { display: inline-block; min-width: 22px; padding: 1px 4px; border-radius: 6px; background: #F1ECFD; border: 1px solid #D9CCF7; border-bottom-width: 3px; font: 600 12.5px/1.4 "Fredoka", system-ui, sans-serif; text-align: center; color: var(--ink); }
  .keys p { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
  body[data-view="tutorial"] .keys { visibility: hidden; }
  /* map: a wider path column */
  .map { max-width: 720px; margin: 0 auto; }
}
@media (min-width: 960px) and (max-height: 700px) and (min-height: 560px) { .home-hero .logo-big { transform: none; } }