@charset "UTF-8";
@font-face{font-family:'Nunito';font-weight:200 1000;font-style:normal;font-display:swap;src:local('Nunito'),url('fonts/Nunito-Variable.ttf') format('truetype')}
:root{
  --ink:#20343C;--paper:#F7FAF9;--muted:#5B7580;--sub:#4A6670;--body:#E9EFEE;
  --amber-bg:#E5A03824;--amber-fg:#8A5A0B;--teal:#1F8A8A;--line:#20343C33;
  --shadow:0 0 0 1px #20343C14,0 12px 30px -14px #20343C66;
  --btn-bg:#20343C;--btn-fg:#fff;--btn-shadow:0 8px 18px -8px #20343Caa;
  --safe-t:env(safe-area-inset-top);--safe-b:env(safe-area-inset-bottom);
  /* Board takes the full width, but leaves room for header + tray on short phones */
  --board-size:min(calc(100vw - 28px),500px,calc(100dvh - var(--ad-h,0px) - var(--safe-t) - var(--safe-b) - 320px));
  --gap:clamp(3px,1vw,5px);--pad:clamp(6px,1.8vw,9px);--mini:clamp(20px,8vw,32px);
  color-scheme:light
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;background:var(--body);color:var(--ink);
  font-family:'Nunito',ui-rounded,'SF Pro Rounded',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.game{transition:background .3s;height:calc(100dvh - var(--ad-h,0px));max-width:520px;margin:auto;display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--safe-t) + 6px) 14px calc(var(--safe-b) + 12px)}

/* Header: crown + record left, score centre, round buttons right */
.header{position:relative;width:100%;height:72px;flex:none;display:flex;align-items:center;justify-content:space-between}
.record{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 9px;border-radius:99px;background:var(--amber-bg);color:var(--amber-fg);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.crown{width:20px;height:20px;fill:#E5A038;stroke:#B97A14;stroke-width:1.4}
.score{position:relative;text-align:right;min-width:90px}
.score strong{display:block;font-size:40px;line-height:1;font-weight:900;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.score small{position:absolute;right:0;top:100%;margin-top:2px;font-size:15px;font-weight:800;color:var(--teal);opacity:0;white-space:nowrap}
.gain{animation:gain 1.2s both}
.tools{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:12px;transition:opacity .25s}
.is-over .tools{opacity:0;pointer-events:none;visibility:hidden}
.record{width:fit-content}
.icon-button{width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);color:var(--ink)}
.icon-button:active{transform:scale(.95)}

/* Board – same field look as PATH */
.board-wrap{position:relative;width:var(--board-size);height:var(--board-size);flex-shrink:0;margin-top:auto}
.board{width:100%;height:100%;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:var(--gap);padding:var(--pad);
  border-radius:22px;background:linear-gradient(180deg,hsl(172 30% 96%),hsl(190 32% 90%));box-shadow:var(--shadow)}
.cell{position:relative;min-width:0;min-height:0;border-radius:clamp(6px,2vw,10px);background:#20343C0d;display:flex;align-items:center;justify-content:center;
  font-size:clamp(14px,4.6vw,22px);font-weight:900;font-variant-numeric:tabular-nums;color:var(--ink);transition:box-shadow .12s,background .12s}
.cell.occupied{background:var(--tile);color:var(--ink-t);box-shadow:inset 0 -3px 0 #00000014,0 2px 4px -2px #20343C55}
.cell.ghost{background:var(--tile);color:var(--ink-t);opacity:.55;box-shadow:inset 0 0 0 2px var(--ink-t)}
.cell.invalid{background:#F3D2CC;box-shadow:inset 0 0 0 2px #C9705F;color:#9A4A3B;opacity:.85}
.cell.target{box-shadow:inset 0 0 0 3px var(--target-color),0 0 0 2px #fff;z-index:2}
.cell.chain-target{box-shadow:inset 0 0 0 2px var(--target-color);z-index:1}
.cell.blast-zone{box-shadow:inset 0 0 0 2px #E5703A;background-image:repeating-linear-gradient(45deg,#E5703A22 0 4px,transparent 4px 8px)}
.cell.target .number,.cell.chain-target .number{transform:translateY(-4px)}
.target-label{position:absolute;bottom:1px;font-size:clamp(8px,2.3vw,11px);line-height:1.2;font-weight:900;color:var(--target-color);white-space:nowrap}
.cell.keyboard-anchor:after{content:"";position:absolute;inset:1px;border:2px dashed var(--teal);border-radius:6px}
.cell.pop .number{animation:pop .28s ease-out}
.cell.boom{animation:boom .38s cubic-bezier(.3,.7,.4,1) both}
.effects{position:absolute;inset:0;pointer-events:none;z-index:8}
.flying-tile{position:absolute;display:grid;place-items:center;background:var(--tile);color:var(--ink-t);font-size:clamp(14px,4.6vw,22px);font-weight:900;border-radius:10px;box-shadow:0 6px 14px -6px #20343C88}
.shock{position:absolute;border-radius:50%;border:4px solid #E5A038;pointer-events:none;animation:shock .5s ease-out both}
.boom-label{position:absolute;transform:translate(-50%,-50%);font-weight:900;font-size:22px;color:var(--amber-fg);text-shadow:0 2px 0 #fff;white-space:nowrap;animation:floatup 1s ease-out both}

.status{flex:none;height:44px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;font-weight:700;color:var(--muted)}
.status.has-preview{color:var(--teal)}.status.invalid-status{color:#B0584A}.status.boom-status{color:var(--amber-fg)}

/* Tray – big touch targets */
.tray{flex:none;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;height:clamp(112px,18dvh,150px);margin-bottom:auto}
.piece-slot{position:relative;display:grid;place-items:center;border:0;border-radius:20px;background:var(--paper);box-shadow:var(--shadow);padding:6px;min-width:0;overflow:hidden;touch-action:none}
.piece-slot.selected{box-shadow:0 0 0 2.5px var(--teal),0 12px 30px -14px #20343C66}
.piece-slot.dragging .mini-shape{opacity:.2}
.piece-slot.used{background:transparent;box-shadow:inset 0 0 0 1.5px #20343C1a;cursor:default}
.piece-slot.no-fit .mini-shape{opacity:.35}
.mini-shape{display:grid;gap:3px;pointer-events:none}
.mini-tile{width:var(--mini);height:var(--mini);display:grid;place-items:center;background:var(--tile);color:var(--ink-t);font-size:calc(var(--mini) * .5);font-weight:900;border-radius:6px;box-shadow:inset 0 -2px 0 #00000014}

.floating{display:none;position:fixed;left:0;top:0;z-index:50;pointer-events:none;opacity:.95;filter:drop-shadow(0 10px 12px #20343C40)}
.floating .mini-tile{width:var(--drag-cell);height:var(--drag-cell);font-size:calc(var(--drag-cell) * .45);border-radius:10px}
.floating .mini-shape{gap:var(--gap)}

/* Dialogs – PATH overlay look */
dialog{border:0;padding:0;background:var(--paper);color:var(--ink);border-radius:24px;box-shadow:var(--shadow);width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;touch-action:pan-y;text-align:center}
dialog::backdrop{background:#EDF3F2d9;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal-inner{padding:28px 24px}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--muted);margin:0 0 8px}
dialog h2{font-size:24px;font-weight:800;margin:0 0 12px}
dialog p{font-size:15px;line-height:1.5;color:var(--sub);margin:10px 0;font-weight:600}
dialog strong{color:var(--ink)}
.rule-demo{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0;font-weight:900;color:var(--muted)}
.demo-tile{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;font-size:18px;font-weight:900;background:var(--tile);color:var(--ink-t);box-shadow:inset 0 -3px 0 #00000014}
.result-score{font-size:56px;font-weight:900;margin:6px 0}
.new-record{display:inline-block;padding:3px 12px;border-radius:99px;background:var(--amber-bg);color:var(--amber-fg);font-weight:800;font-size:14px}
.primary-button,.secondary-button{display:block;width:100%;min-height:54px;border-radius:99px;font-size:17px;font-weight:800;letter-spacing:.06em;margin-top:12px}
.primary-button{border:0;background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--btn-shadow)}
.secondary-button{min-height:46px;font-size:15px;background:transparent;border:2px solid var(--line);color:var(--ink)}
.primary-button:active,.secondary-button:active{transform:scale(.97)}

@keyframes pop{0%{transform:scale(.8)}55%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes boom{0%{transform:scale(1);filter:brightness(1)}30%{transform:scale(1.15);filter:brightness(1.4)}100%{transform:scale(0);opacity:0}}
@keyframes shock{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.6);opacity:0}}
@keyframes floatup{0%{opacity:0;margin-top:6px}20%{opacity:1}100%{opacity:0;margin-top:-34px}}
@keyframes gain{0%{opacity:1;transform:translateY(4px)}80%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}

@media (max-height:640px){.header{height:58px}.score strong{font-size:32px}.icon-button{width:36px;height:36px}.status{height:28px;font-size:13px}
  :root{--board-size:min(calc(100vw - 24px),500px,calc(100dvh - var(--ad-h,0px) - var(--safe-t) - var(--safe-b) - 245px))}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Game over text */
.board-wrap.shake{animation:shake .32s}
.over-text{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;text-align:center;pointer-events:none;
  font-size:clamp(38px,12vw,56px);line-height:1.02;font-weight:900;letter-spacing:.06em;color:var(--ink);
  background:#F7FAF9b0;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:22px;
  text-shadow:0 3px 0 #fff,0 10px 28px #20343C33;animation:overpop .55s cubic-bezier(.2,1.5,.4,1) both}
.board-wrap.over .cell.occupied{filter:grayscale(.75) brightness(1.05);transition:filter .6s}
@keyframes overpop{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}60%{transform:translateX(5px)}}

/* Result popup */
.result{display:flex;flex-direction:column;align-items:center}
.result-best{display:flex;align-items:center;gap:6px;padding:4px 14px 4px 10px;border-radius:99px;background:var(--amber-bg);color:var(--amber-fg);font-weight:800;font-size:16px}
.result-best.is-new{animation:recpop .65s cubic-bezier(.2,1.5,.4,1) both}
.result-actions{display:flex;gap:18px;align-items:center;justify-content:center;margin-top:24px}
.ibtn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;padding:0;border-radius:50%;border:2px solid var(--line);background:transparent;color:var(--ink)}
.ibtn.primary{width:80px;height:80px;border:0;background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--btn-shadow)}
.ibtn svg{width:46%;height:46%}
.ibtn:active{transform:scale(.95)}
@keyframes recpop{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}

/* Home screen – like the PATH start overlay */
.home{position:fixed;inset:0 0 var(--ad-h,0px) 0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:var(--home-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:calc(var(--safe-t) + 20px) 20px calc(var(--safe-b) + 40px)}
.home-main{display:flex;flex-direction:column;align-items:center;flex:1;justify-content:center}
.home-logo{display:grid;grid-template-columns:repeat(2,34px);gap:6px;margin-bottom:22px;transform:rotate(-8deg)}
.home-logo i{height:34px;border-radius:9px;box-shadow:inset 0 -3px 0 #00000014}
.home-logo i:nth-child(1){background:#B4E2DB}.home-logo i:nth-child(2){background:#4FB8AF}.home-logo i:nth-child(3){background:#F4C468}.home-logo i:nth-child(4){background:#EE8A5B}
.logo{font-size:56px;font-weight:900;letter-spacing:.2em;margin-right:-.2em;line-height:1;animation:rise .7s ease both}
.logo-sub{font-size:16px;font-weight:800;letter-spacing:.6em;margin-right:-.6em;color:var(--muted);margin-top:8px}
.bestline{display:flex;align-items:center;gap:6px;margin-top:26px;font-size:16px;font-weight:800;color:var(--amber-fg)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Ad placeholders (browser only) */
.ad-banner{position:fixed;left:0;right:0;bottom:0;height:50px;z-index:45;display:flex;align-items:center;justify-content:center;background:#d5dddc;color:#6d8088;font-size:11px;font-weight:800;letter-spacing:.2em}
.ad-interstitial{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#1b2a30;color:#9fb3ba;font-weight:900;letter-spacing:.2em;text-align:center}
.ad-interstitial small{display:block;margin-top:6px;letter-spacing:0;font-weight:600;font-size:12px}
.ad-interstitial button{position:absolute;top:calc(var(--safe-t) + 14px);right:14px;min-width:40px;height:40px;border-radius:99px;border:0;background:#ffffff22;color:#fff;font-weight:800}
.ad-interstitial button:disabled{opacity:.6}
[hidden]{display:none!important}

/* Dark mode */
html[data-theme=dark]{color-scheme:dark;--ink:#E6F1F0;--paper:#16242A;--muted:#8AA3AB;--sub:#A3B9BF;--body:#0D171B;
  --amber-bg:#F4C46822;--amber-fg:#F4C468;--teal:#4FD1C5;--line:#9FC4C840;
  --shadow:0 0 0 1px #9FC4C81f,0 14px 34px -14px #000c;--btn-bg:#4FD1C5;--btn-fg:#06201E;--btn-shadow:0 8px 22px -8px #4FD1C599}
html[data-theme=dark] .board{background:linear-gradient(180deg,#17272D,#11201F)}
html[data-theme=dark] .cell:not(.occupied):not(.ghost):not(.invalid){background:#ffffff0c}
html[data-theme=dark] .cell.occupied{box-shadow:inset 0 -3px 0 #00000030,0 2px 6px -2px #000}
html[data-theme=dark] .crown{fill:#F4C468;stroke:#C99428}
html[data-theme=dark] dialog::backdrop{background:#0D171Bd9}
html[data-theme=dark] .over-text{background:#0D171Bb0;text-shadow:0 3px 0 #000,0 10px 28px #000}
html[data-theme=dark] .ad-banner{background:#1d2c31;color:#6d8a92}
html[data-theme=dark] .cell.target{box-shadow:inset 0 0 0 3px var(--target-color),0 0 0 2px #0D171B}

/* Settings – same controls as PATH */
.settings{display:flex;flex-direction:column;gap:14px;width:100%;max-width:290px;margin:6px auto 4px}
.seg{display:flex;gap:6px;width:100%}
.seg .chip{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:6px 4px;border-radius:14px;
  font-size:12px;font-weight:700;color:var(--sub);background:transparent;border:1.5px solid var(--line)}
.seg .chip[aria-checked=true]{color:var(--btn-fg);background:var(--btn-bg);border-color:var(--btn-bg)}
.sdiv{height:1.5px;border-radius:1px;background:var(--line);margin:2px 0}
.srow{display:flex;align-items:center;gap:12px;width:100%}
.srow .ic{flex:none;display:flex;color:var(--sub)}.srow .ic svg{width:22px;height:22px}
.srow .sp{flex:1}.srow .lbl{flex:1;text-align:left;font-weight:700;color:var(--sub);font-size:15px}
input.vol{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:30px;margin:0;background:transparent;cursor:pointer;touch-action:pan-x}
input.vol::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--teal) var(--p,50%),var(--line) var(--p,50%))}
input.vol::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;border:0;background:var(--btn-bg);box-shadow:var(--btn-shadow)}
input.vol::-moz-range-track{height:4px;border-radius:2px;background:var(--line)}
input.vol::-moz-range-progress{height:4px;border-radius:2px;background:var(--teal)}
input.vol::-moz-range-thumb{width:22px;height:22px;border-radius:50%;border:0;background:var(--btn-bg)}
.sw{position:relative;flex:none;width:46px;height:28px;padding:0;border-radius:99px;border:1.5px solid var(--line);background:transparent;transition:background .2s,border-color .2s}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.sw[aria-checked=true]{background:var(--btn-bg);border-color:var(--btn-bg)}
.sw[aria-checked=true]::after{transform:translateX(18px);background:var(--btn-fg)}
.howto-btn{display:flex;align-items:center;justify-content:center;gap:8px}
.howto-btn svg{width:18px;height:18px}

/* How-to-play animation */
.demo{position:relative;width:216px;height:162px;margin:14px auto 6px}
.demo .slot{position:absolute;width:50px;height:50px;border-radius:12px;background:#20343C0d}
html[data-theme=dark] .demo .slot{background:#ffffff0c}
.demo .t{position:absolute;width:50px;height:50px;border-radius:12px;display:grid;place-items:center;font-size:20px;font-weight:900;background:var(--tile);color:var(--ink-t);box-shadow:inset 0 -3px 0 #00000014;transition:background .15s}
.demo .t.new{box-shadow:0 0 0 2.5px var(--teal),0 8px 16px -6px #20343C66}
.demo .shock{border-width:5px}
.demo-cap{min-height:24px;font-size:17px;font-weight:900;color:var(--ink);margin:4px 0 2px}
.demo-cap.boom{color:var(--amber-fg)}
.howto p{margin:8px 0}
.demo .t.boom{animation:boom .4s cubic-bezier(.3,.7,.4,1) both}

:root{--home-bg:#E9EFEEcc}html[data-theme=dark]{--home-bg:#0D171Bcc}
.home-actions{display:flex;flex-direction:column;align-items:center;gap:18px}
.home .ibtn:not(.primary){background:var(--paper);border-color:var(--line)}
.danger-confirm{color:#B0584A!important;border-color:#B0584A88!important}
.settings-actions{display:flex;flex-direction:column}
.small-button{display:flex;align-items:center;gap:7px;margin:16px auto 0;min-height:36px;padding:0 18px;border-radius:99px;border:1.5px solid #C9705F;background:transparent;color:#B0584A;font-size:14px;font-weight:700}
.small-button+.primary-button{margin-top:10px}
.small-button svg{width:16px;height:16px}
html[data-theme=dark] .small-button{border-color:#E08A78;color:#E08A78}
.danger-button{display:flex;align-items:center;justify-content:center;gap:8px;background:#C2543F!important;box-shadow:0 8px 18px -8px #C2543Faa!important;color:#fff!important}
.danger-button svg{width:18px;height:18px}

/* Tutorial */
.in-tut .tools{visibility:hidden}
.tut-skip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:34px;padding:0 14px;border-radius:99px;border:1.5px solid var(--line);background:var(--paper);color:var(--sub);font-size:13px;font-weight:700}
.status.tut-status{font-size:18px;font-weight:900;color:var(--ink)}
.status.tut-status.good{color:var(--teal)}
.cell.tut-target{box-shadow:inset 0 0 0 3px var(--teal);animation:tutpulse 1.2s ease-in-out infinite}
@keyframes tutpulse{0%,100%{background:#1F8A8A10}50%{background:#1F8A8A33}}
.tut-finger{position:fixed;z-index:60;width:44px;height:44px;margin:0;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);
  background:radial-gradient(circle,#ffffffee 0 34%,#20343C55 36% 60%,transparent 62%);box-shadow:0 0 0 3px #ffffffaa,0 6px 16px #20343C55}
html[data-theme=dark] .tut-finger{background:radial-gradient(circle,#E6F1F0 0 34%,#4FD1C566 36% 60%,transparent 62%)}

/* Combo pop-ups */
.combo{position:absolute;transform:translate(-50%,-50%) rotate(var(--rot));white-space:nowrap;pointer-events:none;z-index:12;
  font-weight:1000;font-size:clamp(48px,14vw,68px);letter-spacing:.02em;line-height:1;animation:comboOut 1.35s ease-in both}
.combo.lv1{font-size:clamp(40px,12vw,58px)}.combo.lv2{font-size:clamp(48px,14vw,68px)}.combo.lv3{font-size:clamp(56px,16vw,78px)}.combo.lv4{font-size:clamp(56px,16vw,80px)}
.combo span{display:inline-block;background:linear-gradient(180deg,var(--c2),var(--c1));-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:3px #fff;paint-order:stroke fill;filter:drop-shadow(0 3px 0 #20343C55) drop-shadow(0 8px 14px #20343C40);
  animation:letterPop .5s cubic-bezier(.2,1.8,.4,1) both}
html[data-theme=dark] .combo span{-webkit-text-stroke:2px #0D171B;filter:drop-shadow(0 3px 0 #000a) drop-shadow(0 0 14px var(--c1))}
@keyframes letterPop{0%{transform:translateY(18px) scale(.2);opacity:0}60%{transform:translateY(-6px) scale(1.25);opacity:1}100%{transform:none}}
@keyframes comboOut{0%,70%{opacity:1;margin-top:0}100%{opacity:0;margin-top:-30px}}
.spark{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);background:var(--c);pointer-events:none;z-index:11;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;animation:sparkFly .8s cubic-bezier(.1,.7,.3,1) var(--d) both}
@keyframes sparkFly{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(160deg)}}
/* Confetti on new record */
.modal-inner{position:relative;overflow:hidden}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-16px;background:var(--c);border-radius:2px;animation:confFall var(--t) cubic-bezier(.3,.2,.6,1) var(--d) both}
@keyframes confFall{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--x),420px) rotate(var(--r));opacity:0}}

/* More effects */
.rays{position:absolute;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;z-index:10;opacity:0;
  background:repeating-conic-gradient(from 0deg,var(--c1) 0 10deg,transparent 10deg 30deg);
  -webkit-mask:radial-gradient(circle,#000 0 15%,transparent 68%);mask:radial-gradient(circle,#000 0 15%,transparent 68%);
  animation:rays 1.25s ease-out both}
@keyframes rays{0%{opacity:0;transform:scale(.3) rotate(0)}20%{opacity:.55}100%{opacity:0;transform:scale(1.15) rotate(70deg)}}
.cring{position:absolute;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;border:6px solid var(--c);pointer-events:none;z-index:10;opacity:0;animation:cring .8s ease-out both}
@keyframes cring{0%{opacity:.9;transform:scale(.3);border-width:10px}100%{opacity:0;transform:scale(5);border-width:1px}}
.spark.dot{clip-path:none;border-radius:50%}
.flash{position:absolute;inset:0;border-radius:22px;background:radial-gradient(circle,#fff 0,var(--c) 60%,transparent 100%);pointer-events:none;z-index:9;animation:flash .45s ease-out both}
@keyframes flash{0%{opacity:.75}100%{opacity:0}}
.board-wrap.bigshake{animation:bigshake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes bigshake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-6px,2px)}40%,60%{transform:translate(6px,-1px)}}
.score strong.bump{animation:bump .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.3);color:var(--teal)}100%{transform:scale(1)}}
.board-wrap .confetti{z-index:13;border-radius:22px}

/* ===== Block Fuse! – colourful theme ===== */
:root{--ink:#1B2A55;--muted:#5A6A9A;--sub:#4A5A88;--teal:#7B4DFF;--line:#1B2A5533;--paper:#FFFFFF;
  --btn-bg:linear-gradient(180deg,#9A6BFF,#6A3DF0);--btn-fg:#fff;--btn-shadow:0 8px 20px -8px #6A3DF0cc;
  --amber-bg:#FFC24A33;--amber-fg:#B86A00;--home-bg:#EAF3FFd9;
  --shadow:0 0 0 1px #6A3DF014,0 14px 34px -14px #3A2A9966;
  --app-bg:radial-gradient(120% 70% at 15% 0%,#BDE8FF 0,transparent 60%),radial-gradient(90% 60% at 100% 30%,#F3D5FF 0,transparent 60%),radial-gradient(100% 60% at 50% 100%,#FFE3C2 0,transparent 65%),#EEF4FF}
html[data-theme=dark]{--ink:#F2F5FF;--paper:#16204A;--muted:#9AA8D8;--sub:#B6C2EE;--teal:#A98BFF;--line:#B6C2EE40;
  --btn-bg:linear-gradient(180deg,#A98BFF,#7B4DFF);--btn-fg:#fff;--btn-shadow:0 8px 24px -8px #7B4DFFcc;
  --amber-bg:#FFC24A22;--amber-fg:#FFC24A;--home-bg:#0B1430d9;--shadow:0 0 0 1px #A98BFF26,0 16px 38px -14px #000c;
  --app-bg:radial-gradient(120% 70% at 15% 0%,#2A3F8A 0,transparent 60%),radial-gradient(90% 60% at 100% 35%,#4A2A80 0,transparent 60%),radial-gradient(100% 60% at 50% 100%,#14306A 0,transparent 65%),#0B1430}
html,body{background:var(--app-bg)}
.primary-button,.ibtn.primary{background:var(--btn-bg)}
.seg .chip[aria-checked=true],.sw[aria-checked=true]{background:#7B4DFF;border-color:#7B4DFF}
input.vol::-webkit-slider-thumb{background:#7B4DFF}
.board{background:linear-gradient(180deg,#FFFFFFcc,#FFFFFF8c);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 0 0 2px #FFFFFFaa,0 18px 40px -16px #3A2A9966}
html[data-theme=dark] .board{background:linear-gradient(180deg,#1B2758cc,#121B44cc);box-shadow:0 0 0 1.5px #A98BFF33,0 18px 40px -16px #000}
.cell{background:#6A7FD914}
html[data-theme=dark] .cell:not(.occupied):not(.ghost):not(.invalid){background:#FFFFFF10}
/* glossy tiles like the logo */
.cell.occupied,.flying-tile,.mini-tile,.demo .t{background:var(--tile);color:#fff;text-shadow:0 1px 0 #0000004d,0 2px 6px #00000026;
  box-shadow:inset 0 2px 0 #FFFFFF80,inset 0 -4px 0 #00000026,0 3px 8px -3px #1B2A5566}
html[data-theme=dark] .cell.occupied{box-shadow:inset 0 2px 0 #FFFFFF66,inset 0 -4px 0 #00000040,0 3px 10px -3px #000}
.cell.ghost{background:var(--tile);color:#fff;box-shadow:inset 0 0 0 2px #fff}
.mini-tile{box-shadow:inset 0 1.5px 0 #FFFFFF80,inset 0 -2px 0 #00000026}
.piece-slot{background:#FFFFFFb3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html[data-theme=dark] .piece-slot{background:#16204Ab3}
.record{background:linear-gradient(180deg,#FFE8A8,#FFC24A);color:#7A4300;box-shadow:0 4px 12px -6px #F0A020}
.record .crown{fill:#fff;stroke:#B86A00}
.icon-button{background:#FFFFFFcc;border-color:#FFFFFF}
html[data-theme=dark] .icon-button{background:#16204Acc;border-color:#A98BFF33}
.score strong{background:linear-gradient(180deg,#7B4DFF,#3A8DF0);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=dark] .score strong{background:linear-gradient(180deg,#FFFFFF,#C9B8FF);-webkit-background-clip:text;background-clip:text}
.status.has-preview{color:#7B4DFF}
/* home screen logo */
.home-main{gap:0}
.home-icon{width:min(62vw,300px);height:auto;filter:drop-shadow(0 18px 30px #3A2A9955);animation:rise .7s ease both}
.home-word{margin:6px 0 0;line-height:0}.home-word img{width:min(78vw,380px);height:auto;animation:rise .7s .1s ease both}
.home-word .w-dark{display:none}html[data-theme=dark] .home-word .w-light{display:none}html[data-theme=dark] .home-word .w-dark{display:inline}
.byline{flex:none;line-height:0;opacity:.55}.byline img{width:min(44vw,170px);height:auto}
.byline .w-dark{display:none}html[data-theme=dark] .byline .w-light{display:none}html[data-theme=dark] .byline .w-dark{display:inline}

/* Drag preview: only a light outline where the held shape would land */
.cell.ghost{background:transparent!important;opacity:1;box-shadow:inset 0 0 0 2.5px var(--ghost),0 0 10px -2px var(--ghost)!important;text-shadow:none}
.cell.ghost .number{opacity:0}
.cell.ghost.occupied{background:var(--tile)!important}
.cell.ghost.occupied .number{opacity:1}
.cell.invalid{background:transparent!important;box-shadow:inset 0 0 0 2.5px #E5533D!important;opacity:1}
.cell.invalid .number{opacity:0}
.floating{opacity:1;filter:drop-shadow(0 14px 14px #1B2A5555)}
.floating .mini-tile{transform:scale(1.04)}
.cell.invalid.occupied{background:var(--tile)!important}.cell.invalid.occupied .number{opacity:1}
.floating{opacity:.92}
/* "a game by·xe" – exactly like PATH */
.byline{display:flex;justify-content:center;margin-top:16px;opacity:.55}
.byline img{display:block;height:15px;width:auto}

/* Studio splash – identical to PATH */
#splash{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding-bottom:18vh;background:#121317;color:#F4F2ED;transition:opacity .5s ease;}#splash .sp-in{display:flex;flex-direction:column;align-items:center;gap:18px;animation:splashin .7s ease both}#splash svg{display:block;height:auto;width:auto;fill:initial;stroke:none}#splash .sp-pre svg{width:min(22vw,96px);opacity:.6}#splash .sp-in>svg{width:min(60vw,280px)}#splash.out{opacity:0;pointer-events:none}@keyframes splashin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){#splash .sp-in{animation:none}#splash{transition:none}}

/* Drag: shape stays under the finger, slightly see-through so the landing outline shows */
.floating{opacity:.78;filter:drop-shadow(0 10px 12px #1B2A5540)}
.floating .mini-shape{gap:var(--gap)}
.floating .mini-tile{transform:none}
.cell.ghost{box-shadow:inset 0 0 0 3.5px var(--ghost),0 0 14px 0 var(--ghost)!important}
.cell.invalid{box-shadow:inset 0 0 0 3.5px #E5533D,0 0 14px 0 #E5533D99!important}
/* Bigger board, smaller tray */
:root{--board-size:min(calc(100vw - 20px),540px,calc(100dvh - var(--ad-h,0px) - var(--safe-t) - var(--safe-b) - 250px));--mini:clamp(15px,5.4vw,24px)}
.game{padding-left:10px;padding-right:10px}
.tray{height:clamp(84px,12dvh,112px);gap:8px}
.piece-slot{border-radius:16px}
.status{height:34px}
@media (max-height:640px){:root{--board-size:min(calc(100vw - 16px),540px,calc(100dvh - var(--ad-h,0px) - var(--safe-t) - var(--safe-b) - 215px))}.tray{height:76px}}