:root{--re-bg:#fffdf8;--re-ink:#2a2f3a;--re-muted:#736c7c;--re-line:#e2dccd;--re-accent:#5b3f8f;color-scheme:light;--paper:#f4efe6;--card:#fffdf8;--ink:#2a2f3a;--muted:#6f6878;--line:#e2dccd;--plum:#5b3f8f;--amber:#c27f22;--gold:#d9a531;
  --red:#e5483d;--blue:#3b82e6;--yellow:#f3bd25;--purple:#9050d6;--orange:#f2832a;--green:#37ad57}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation;border:0;color:inherit}button:disabled{cursor:default}
button:focus-visible,a:focus-visible{outline:3px solid var(--plum);outline-offset:3px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
.sprites{position:absolute;width:0;height:0;overflow:hidden}
.shell{max-width:1220px;margin:auto;padding:24px 38px 44px}
header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px}
.brand{font:800 16px 'Manrope',sans-serif;letter-spacing:2px}.brand span{color:var(--amber)}
.utilities{display:flex;gap:8px}.utilities button{padding:9px 13px;border:1px solid var(--line);border-radius:8px;background:transparent;font-size:12px;font-weight:700}.utilities button:disabled{opacity:.45}
.heading{margin:30px 0 22px}
.game-boot{margin:0 0 16px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.8px;margin:0 0 12px;color:var(--plum)}
h1{font:800 clamp(38px,5vw,60px)/1.05 'Manrope',sans-serif;letter-spacing:-3px;margin:0}h1 em{font-style:normal;color:var(--plum)}
.howto{margin:10px 0 0;font-size:15px;color:var(--muted);line-height:1.5}
.layout{display:block;max-width:760px;margin:0 auto}
.lab{position:relative;border:1px solid var(--line);border-radius:20px;padding:18px;background:var(--card);box-shadow:0 12px 40px #3a2f1a08;min-width:0;scroll-margin-top:76px}
.ad-below-game{margin:20px 0 0}.ad-below-game:empty{display:none}
.hud{display:grid;grid-template-columns:1fr 1.3fr 1fr;padding-bottom:12px;border-bottom:1px solid var(--line)}
.hud>div{padding-left:15px;border-left:1px solid var(--line);min-width:0}.hud>div:first-child{padding-left:0;border:0}
.hud small{display:block;color:var(--muted);font-size:12px;letter-spacing:.6px;font-weight:700}
.hud strong{display:flex;align-items:center;gap:6px;font:800 22px 'Manrope',sans-serif;margin-top:5px;white-space:nowrap;min-height:28px}
#moves.over{color:var(--amber)}.hud .stars{color:var(--gold);letter-spacing:1px;font-size:19px}
.day-line{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--muted);padding:8px 0 8px}#level-name{color:var(--plum);font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picks{display:flex;gap:4px;flex:none}.picks .text-button{min-height:44px;margin:-6px 0}
.text-button{background:none;color:var(--plum);padding:0 8px;min-height:32px;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px}.text-button:disabled{opacity:.45}
.small{font-size:12px;color:var(--muted)}
.primary,.secondary{padding:12px 15px;font-size:13px;font-weight:800;border-radius:9px;transition:transform .12s}
.primary{background:var(--plum);color:#fff}.secondary{background:#efe8f6;color:var(--plum);border:1px solid #dccfee}
.primary:active,.secondary:active{transform:translateY(2px)}.primary:disabled,.secondary:disabled{opacity:.5}
/* The stage: an alchemist's slate. The board is the cell area plus a rim where the gates sit. */
.stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:280px;padding:10px 6px;border-radius:16px;background:radial-gradient(120% 90% at 50% 0%,#3d3152 0%,#271f35 60%,#1d1727 100%);box-shadow:inset 0 0 0 1px #ffffff12}
.board{--cell:48px;--rim:calc(var(--cell) * .32);--gap:max(2px,calc(var(--cell) * .055));--rad:calc(var(--cell) * .2);position:relative;flex:none;width:calc(var(--cols,5) * var(--cell) + 2 * var(--rim));height:calc(var(--rows,5) * var(--cell) + 2 * var(--rim));border-radius:calc(var(--rim) + 4px);background:linear-gradient(#2a2238,#211a2c);box-shadow:inset 0 0 0 2px #c9a25c55,0 10px 24px #0007}
.floor,.gates,.blocks,.arrows{position:absolute;inset:var(--rim)}
.floor{border-radius:6px;background-color:#352c46;background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:var(--cell) var(--cell);background-position:-1px -1px;box-shadow:inset 0 2px 8px #0006}
.blocks,.arrows{pointer-events:none}
.pool{position:absolute;left:calc(var(--c) * var(--cell));top:calc(var(--r) * var(--cell));width:var(--cell);height:var(--cell);display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--k) 70%,#fff) 0 22%,var(--k) 42%,color-mix(in srgb,var(--k) 55%,transparent) 62%,transparent 72%);animation:ripple 2.6s ease-in-out infinite}
.pool .glyph{width:34%;height:34%;fill:#fffffff0}
@keyframes ripple{50%{transform:scale(.92)}}
.gate{position:absolute;display:grid;place-items:center;background:linear-gradient(var(--k),color-mix(in srgb,var(--k) 75%,#000));box-shadow:0 0 12px color-mix(in srgb,var(--k) 65%,transparent),inset 0 0 0 2px #ffffff4d}
.gate.top{left:calc(var(--at) * var(--cell) + 2px);width:calc(var(--len) * var(--cell) - 4px);top:calc(-1 * var(--rim) + 2px);height:calc(var(--rim) - 2px);border-radius:8px 8px 3px 3px}
.gate.bottom{left:calc(var(--at) * var(--cell) + 2px);width:calc(var(--len) * var(--cell) - 4px);bottom:calc(-1 * var(--rim) + 2px);height:calc(var(--rim) - 2px);border-radius:3px 3px 8px 8px}
.gate.left{top:calc(var(--at) * var(--cell) + 2px);height:calc(var(--len) * var(--cell) - 4px);left:calc(-1 * var(--rim) + 2px);width:calc(var(--rim) - 2px);border-radius:8px 3px 3px 8px}
.gate.right{top:calc(var(--at) * var(--cell) + 2px);height:calc(var(--len) * var(--cell) - 4px);right:calc(-1 * var(--rim) + 2px);width:calc(var(--rim) - 2px);border-radius:3px 8px 8px 3px}
.gate .glyph{width:min(80%,calc(var(--rim) * .78));height:min(80%,calc(var(--rim) * .78));fill:#fff;stroke:#0005;stroke-width:1.5;paint-order:stroke}
.gate.glow{animation:gate .5s ease-out}
@keyframes gate{40%{filter:brightness(1.7);box-shadow:0 0 26px var(--k),inset 0 0 0 2px #fff}}
/* Blocks: the button is only a frame; its cells take the taps, so an L-shape never covers a neighbour. */
.block{position:absolute;left:0;top:0;width:calc(var(--w) * var(--cell));height:calc(var(--h) * var(--cell));padding:0;background:none;pointer-events:none;touch-action:none;
  transform:translate(calc((var(--x) + var(--px,0)) * var(--cell)),calc((var(--y) + var(--py,0)) * var(--cell)));transition:transform var(--t,140ms) cubic-bezier(.25,.8,.35,1),opacity .22s;filter:drop-shadow(0 3px 2px #0007)}
.block:focus-visible{outline:none}.block:focus-visible .cell{box-shadow:0 0 0 3px #fff}
.cell{--gl:0px;--gr:0px;--gt:0px;--gb:0px;position:absolute;pointer-events:auto;cursor:grab;left:calc(var(--c) * var(--cell) + var(--gl));top:calc(var(--r) * var(--cell) + var(--gt));width:calc(var(--cell) - var(--gl) - var(--gr));height:calc(var(--cell) - var(--gt) - var(--gb));
  background-color:var(--k);background-image:linear-gradient(160deg,#ffffff5c 0%,#ffffff14 38%,#0000 55%,#00000026 100%);background-size:calc(var(--w) * var(--cell)) calc(var(--h) * var(--cell));background-position:calc(var(--c) * var(--cell) * -1 + var(--gl) * -1) calc(var(--r) * var(--cell) * -1 + var(--gt) * -1)}
.cell.l{--gl:var(--gap)}.cell.r{--gr:var(--gap)}.cell.t{--gt:var(--gap)}.cell.b{--gb:var(--gap)}
.cell.t.l{border-top-left-radius:var(--rad)}.cell.t.r{border-top-right-radius:var(--rad)}.cell.b.l{border-bottom-left-radius:var(--rad)}.cell.b.r{border-bottom-right-radius:var(--rad)}
.cell.b{box-shadow:inset 0 calc(var(--cell) * -.07) 0 #00000033}.cell.t:not(.b){box-shadow:inset 0 calc(var(--cell) * .05) 0 #ffffff40}.cell.t.b{box-shadow:inset 0 calc(var(--cell) * .05) 0 #ffffff40,inset 0 calc(var(--cell) * -.07) 0 #00000033}
.cell .glyph{position:absolute;inset:22%;width:56%;height:56%;fill:#fffffff0;stroke:#00000038;stroke-width:1.3;paint-order:stroke;pointer-events:none}
.block .frost{position:absolute;right:4%;top:4%;width:min(42%,calc(var(--cell) * .42));height:min(42%,calc(var(--cell) * .42));fill:#fff;filter:drop-shadow(0 0 2px #7cc8ff);pointer-events:none}
.block.frozen .cell{background-color:color-mix(in srgb,var(--k) 50%,#d9f0ff);background-image:linear-gradient(135deg,#ffffff8c 0 12%,#ffffff1a 12% 40%,#ffffff59 40% 46%,#ffffff14 46%),linear-gradient(160deg,#ffffff40,#0000 60%);box-shadow:inset 0 0 0 2px #e9f8ff}
.block.picked{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 8px 6px #0008)}.block.picked .cell{filter:brightness(1.1)}
.block.hinted .cell{animation:hinted 1s ease-in-out infinite}
@keyframes hinted{50%{filter:brightness(1.35);box-shadow:0 0 0 3px #ffe7a0}}
.block.bump .cell{animation:bump .2s ease-out}
@keyframes bump{40%{transform:translate(calc(var(--bx,0) * 3px),calc(var(--by,0) * 3px)) scale(.97)}}
.block.nudge .cell{animation:nudge .26s ease-out}
@keyframes nudge{30%{transform:translate(calc(var(--bx,0) * 5px),calc(var(--by,0) * 5px))}60%{transform:translate(calc(var(--bx,0) * -2px),calc(var(--by,0) * -2px))}}
.block.leaving{opacity:0;transition:transform var(--t,220ms) ease-in,opacity .24s ease-in}
.block.absorbed .cell{animation:absorb .24s ease-in forwards}
@keyframes absorb{to{transform:scale(.4);opacity:0}}
.block.brewing .cell{animation:brew .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes brew{0%{transform:scale(.82);filter:brightness(1.9) saturate(.5)}55%{transform:scale(1.06)}100%{transform:none;filter:none}}
.block.thawing .cell{animation:thaw .5s ease-out}
@keyframes thaw{0%{filter:brightness(2.2)}30%{transform:translateX(-2px)}60%{transform:translateX(2px)}}
.spark{position:absolute;left:calc(var(--x) * var(--cell));top:calc(var(--y) * var(--cell));width:max(6px,calc(var(--cell) * .14));height:max(6px,calc(var(--cell) * .14));margin:-3px;border-radius:50%;background:var(--k);box-shadow:0 0 6px var(--k);animation:spark .6s ease-out forwards}
@keyframes spark{to{transform:translate(calc(var(--dx) * var(--cell)),calc(var(--dy) * var(--cell))) scale(.2);opacity:0}}
.arrow{position:absolute;left:calc(var(--ax) * var(--cell));top:calc(var(--ay) * var(--cell));width:clamp(30px,calc(var(--cell) * .74),44px);height:clamp(30px,calc(var(--cell) * .74),44px);transform:translate(-50%,-50%);border-radius:50%;background:#fffdf8;box-shadow:0 3px 8px #0006;pointer-events:auto;display:grid;place-items:center;z-index:3}
.arrow::before{content:'';width:32%;height:32%;border:solid var(--plum);border-width:4px 4px 0 0;transform:translateY(18%) rotate(-45deg)}
.arrow.right::before{transform:translateX(-18%) rotate(45deg)}.arrow.down::before{transform:translateY(-18%) rotate(135deg)}.arrow.left::before{transform:translateX(18%) rotate(-135deg)}
.arrow.hint{background:#ffe7a0;animation:pointing 1s ease-in-out infinite}
@keyframes pointing{50%{box-shadow:0 0 0 6px #ffe7a066,0 3px 8px #0006}}
.board[data-phase=paused] .blocks{opacity:.4;filter:blur(2px)}
.board[data-phase=won] .cell{cursor:default}
.start{position:absolute;inset:auto 0 50%;z-index:4;display:flex;justify-content:center;transform:translateY(50%);pointer-events:none}
.start button{pointer-events:auto;min-width:168px;min-height:56px;padding:0 34px;border-radius:999px;font:800 20px 'Manrope',sans-serif;box-shadow:0 10px 30px #1d162880}
.brew-note{position:absolute;inset:auto 0 50%;z-index:4;width:max-content;max-width:calc(100% - 24px);margin:0 auto;padding:10px 18px;transform:translateY(50%);border-radius:999px;background:#1d1727e6;color:#fff;font:700 14px 'Manrope',sans-serif;box-shadow:0 10px 30px #1d162880;animation:brewing-in .2s ease-out}
@keyframes brewing-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.brew-note{animation:none}}
.tools{display:flex;gap:8px;margin-top:12px}.tools button{flex:1;min-height:44px}
.tools .suggest{background:var(--plum);color:#fff;box-shadow:0 0 0 3px #d8c8f0}
.notice{font-size:14px;line-height:1.5;color:var(--plum);min-height:40px;margin:10px 0 0}
.game-help-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:14px 0}
.game-help-links a,.game-help-links button{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;touch-action:manipulation;background:transparent}
.game-help-links .play-guide-link{color:var(--plum);font-size:14px;text-decoration:underline;text-underline-offset:3px}.catalog{font-size:12px;font-weight:700}
#help-panel{width:min(560px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);overflow:hidden;box-shadow:0 18px 70px #2a2f3a33}
#help-panel::backdrop,.levels-sheet::backdrop{background:#2a2f3a80}
.lab-help{display:flex;flex-direction:column;max-height:calc(100dvh - 24px)}
.help-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:22px;line-height:1.65;overflow-wrap:anywhere}
.help-body h2{font:800 24px/1.25 'Manrope',sans-serif;margin:0 0 14px}.help-body p,.help-steps{font-size:14px}
.help-steps{padding-left:22px}.help-steps li{padding-left:4px;margin:12px 0}.help-body .help-keys{font-size:12px;color:var(--muted)}
.help-full-guide{display:inline-flex;align-items:center;min-height:44px;color:var(--plum);text-decoration:underline;text-underline-offset:3px}
.help-actions{flex:0 0 auto;border-top:1px solid var(--line);padding:14px 22px;background:var(--paper)}.help-actions button{width:100%;min-height:44px;font-size:14px}
.levels-sheet{width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink)}
.levels-sheet h2{font:800 20px 'Manrope',sans-serif;margin:0 0 12px}
.level-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px;max-height:min(420px,calc(100dvh - 160px));overflow:auto;padding:2px}
.level-list button{display:grid;place-items:center;gap:1px;min-height:54px;border:1px solid #dccfee;border-radius:10px;background:var(--card)}
.level-list b{font:800 16px 'Manrope',sans-serif;color:var(--plum)}.level-list span{font-size:12px;color:var(--gold);letter-spacing:.5px;min-height:14px}
.level-list button[aria-current=true]{border-color:var(--plum);box-shadow:inset 0 0 0 1px var(--plum)}
.levels-sheet>.text-button{display:block;margin:12px auto 0;min-height:44px}
body[data-phase=paused] .lab{border-color:#cdbfe2}body[data-phase=paused] #level-name:before{content:'PAUSED · '}
@media(max-width:900px){.shell{padding:18px 22px 30px}.lab{padding:15px}}
@media(max-width:700px){.shell{padding:12px 12px 24px}header{position:sticky;top:0;z-index:5;background:var(--paper);padding:6px 0 12px}.brand{font-size:13px;letter-spacing:1.2px}.utilities{gap:6px}.utilities button{padding:8px;font-size:12px;min-height:44px}.heading{margin:18px 4px 16px}.eyebrow{font-size:12px;letter-spacing:1px;margin-bottom:8px}h1{font-size:36px;letter-spacing:-2px}.howto{font-size:14px}.lab{padding:12px;border-radius:15px}.hud>div{padding-left:10px}.hud strong{font-size:19px}.stage{padding:8px 2px;min-height:250px}aside{margin-top:16px}.help-body{padding:16px}.help-actions{padding:12px 16px}.help-body h2{font-size:22px}.tools button{min-height:44px}}
/* Short laptop screens: a compact title so the board and Play sit above the fold. */
@media(min-width:701px) and (max-height:1000px){.shell{padding-top:14px}header{padding-bottom:12px}.heading{margin:14px 0 12px}.eyebrow{margin-bottom:6px}h1{font-size:40px;letter-spacing:-2px}.howto{margin-top:4px;font-size:14px}.lab{padding:14px 18px;scroll-margin-top:12px}.hud{padding-bottom:8px}.hud strong{font-size:20px;margin-top:3px}.day-line{padding:5px 0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
/* Phones: 44px hit areas that leave the layout where it was, no double-tap zoom or long-press
   text selection on the play panel, and a pressed state on the small text controls. */
.brand{display:inline-flex;align-items:center;min-height:44px;margin:-4px 0}
.lab{touch-action:manipulation}.stage{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.utilities button:active,.text-button:active,.game-help-links a:active,.game-help-links button:active{opacity:.6}
/* Inside the /play/ feed or a portal frame (html.cc-embed, set by play-bridge.js): no site chrome;
   the HUD, board and tools share one screen and game.mjs sizes the cells to the stage. */
.cc-embed .brand,.cc-embed .heading,.cc-embed .catalog,.cc-embed .ad-below-game{display:none}
.cc-embed .shell{position:relative;display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:1220px;padding:8px 12px 10px}
.cc-embed header{position:static;justify-content:flex-end;border:0;padding:0 0 6px;background:none;z-index:auto}
.cc-embed .game-help-links{position:absolute;top:8px;left:12px;margin:0;z-index:3}
.cc-embed .game-help-links .play-guide-link{min-height:44px;padding:0 4px;font-size:0}
.cc-embed .game-help-links .play-guide-link::before{content:'How to play';font-size:12px;font-weight:700}
.cc-embed .layout{display:flex;flex-direction:column;flex:1;min-height:0;max-width:760px;width:100%;margin:0 auto}
.cc-embed aside{flex:none;margin:0}
.cc-embed .lab{flex:1;display:flex;flex-direction:column;min-height:0;padding:10px}
.cc-embed .stage{flex:1;min-height:0}
.cc-embed .notice{min-height:36px;margin-top:6px;font-size:12px}
@media(max-width:700px){.cc-embed .shell{padding:6px 8px 8px}.cc-embed .game-help-links{top:10px;left:8px}.cc-embed .lab{min-height:440px}}