/* Layout: one calm column. Score on top, a recessed 8x8 tray in the middle, three pieces underneath, hint / bomb / new game last. Settings hide behind a gear. */

/* The [hidden] attribute must always win. Author rules such as `.over { display:flex }`
   and `.menu { display:flex }` would otherwise override the browser default and leave the
   game-over overlay and the settings dropdown permanently visible. */
[hidden] { display: none !important; }

:root {
  --bg: #EEEAF4;
  --tray: #D9D2E7;
  --cell-bg: #E8E2F1;
  --chip: #E0D9EC;
  --ink: #2A2540;
  --muted: #6B6585;
  --accent: #6A4BDF;
  --on-accent: #FFFFFF;
  --scrim: rgba(238, 234, 244, 0.93);
  --blast: #FF5A36;
  --b0: #F0684F;
  --b1: #F2A93B;
  --b2: #3DBE8F;
  --b3: #3F96E6;
  --b4: #8B62E6;
  --b5: #EC5E9C;
  --display: 'Rubik', system-ui, sans-serif;
  --body: 'Figtree', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #19162A; --tray: #262040; --cell-bg: #302A4D; --chip: #2E2850;
    --ink: #EDE9FA; --muted: #A39CC4; --accent: #9D86FF; --on-accent: #17132B;
    --scrim: rgba(25, 22, 42, 0.93); --blast: #FF7A55;
    --b0: #FF7A63; --b1: #FFBF4F; --b2: #55D6A6; --b3: #5BAEF5; --b4: #A07CFF; --b5: #FF7AB2;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #19162A; --tray: #262040; --cell-bg: #302A4D; --chip: #2E2850;
  --ink: #EDE9FA; --muted: #A39CC4; --accent: #9D86FF; --on-accent: #17132B;
  --scrim: rgba(25, 22, 42, 0.93); --blast: #FF7A55;
  --b0: #FF7A63; --b1: #FFBF4F; --b2: #55D6A6; --b3: #5BAEF5; --b4: #A07CFF; --b5: #FF7AB2;
  color-scheme: dark;
}

html { height: 100%; }
body {
  margin: 0;
  overscroll-behavior: none;
  min-height: 100%;
  box-sizing: border-box;
  padding-block: 10px 14px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  display: flex;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.app {
  --pad: 8px;
  --gap: 3px;
  /* Height budget. The board is square and the tray under it is 2.7 cells tall.
     With cell = (board - 37px) / 8, the tray is 0.3375 * board - 12.5px, so
     board + tray = 1.3375 * board - 12.5px. The rest of the column (header,
     score, controls, footer, the five gaps and the page padding) measures about
     248px, so the board fits when board <= (100dvh - 236px) / 1.3375. A few
     extra pixels of slack are kept below. This lets short phones use their full
     height instead of leaving a gap under the footer. */
  --board: max(240px, min(100vw - 24px, 480px, (100dvh - 246px) / 1.3375));
  --cell: calc((var(--board) - 2 * var(--pad) - 7 * var(--gap)) / 8);
  width: var(--board);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.top { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.top h1 { margin: 0; font: 600 16px/1 var(--display); letter-spacing: 0.02em; }
.tools { display: flex; align-items: center; gap: 2px; }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon {
  height: 40px; min-width: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; gap: 2px; padding: 0 6px; cursor: pointer;
}
.icon:hover, .icon[aria-expanded="true"] { background: var(--chip); color: var(--ink); }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
svg.i.caret { width: 12px; height: 12px; stroke-width: 2.6; }
.gear svg.i:first-child { width: 21px; height: 21px; stroke-width: 1.7; }

.menu {
  position: absolute; right: 0; top: 46px; z-index: 40; width: min(300px, 100%); box-sizing: border-box;
  padding: 14px; border-radius: 16px; background: var(--bg); border: 1px solid var(--chip);
  box-shadow: 0 12px 30px rgba(20, 12, 50, 0.22); display: flex; flex-direction: column; gap: 10px;
}
.menu .lbl { margin: 0; }
.menu p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.menu hr { border: 0; height: 1px; background: var(--chip); margin: 2px 0; width: 100%; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.row .lbl { margin-bottom: 4px; }
.switch { flex: none; width: 48px; height: 30px; border: 0; border-radius: 15px; background: var(--chip); position: relative; cursor: pointer; padding: 0; transition: background 0.18s; }
.switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: transform 0.18s, background 0.18s; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--on-accent); }
.opts { display: flex; background: var(--chip); border-radius: 12px; padding: 3px; }
.opts button { flex: 1; border: 0; background: transparent; border-radius: 9px; height: 34px; padding: 0 8px; cursor: pointer; font: 600 13px/1 var(--body); color: var(--muted); }
.opts button[aria-checked="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }

.scorebar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; }
.lbl { display: block; font: 600 11px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.num { display: block; font: 700 40px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.num.sm { font-size: 24px; }
.best { text-align: right; }
.num.bump { animation: bump 0.3s ease-out; }
.combo {
  align-self: center; justify-self: center; padding: 6px 12px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font: 600 13px/1 var(--display); white-space: nowrap;
  visibility: hidden; opacity: 0; transition: opacity 0.2s;
}
.combo.on { visibility: visible; opacity: 1; }

.boardwrap { position: relative; width: var(--board); }
.board {
  box-sizing: border-box; width: var(--board); padding: var(--pad); gap: var(--gap);
  display: grid; grid-template-columns: repeat(8, var(--cell)); grid-auto-rows: var(--cell);
  background: var(--tray); border-radius: 18px;
}
.cell { position: relative; width: var(--cell); height: var(--cell); border-radius: calc(var(--cell) * 0.2); background: var(--cell-bg); }
.cell.f, .pc {
  background: var(--c);
  box-shadow: inset 0 calc(var(--cell) * -0.09) 0 rgba(0, 0, 0, 0.16), inset 0 calc(var(--cell) * 0.07) 0 rgba(255, 255, 255, 0.32);
}
.cell.ghostcell::after, .cell.hintcell::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--c); opacity: 0.5;
}
.cell.hintcell::after { animation: hintpulse 0.8s ease-in-out infinite alternate; }
.cell.blast::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--blast); opacity: 0.32; }
.cell.f.blast::after { opacity: 0.6; }
.cell.blast-core::after { opacity: 0.85; }
.cell.landed { animation: land 0.26s ease-out; }
.cell.clearing { animation: clr 0.4s ease-in forwards; animation-delay: calc(var(--d, 0) * 30ms); }

.toast {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); padding: 9px 18px; border-radius: 999px;
  background: var(--ink); color: var(--bg); font: 700 clamp(18px, 5.5vw, 26px)/1.1 var(--display);
  white-space: nowrap; opacity: 0; pointer-events: none; z-index: 4;
}
.toast.show { animation: toast 1.05s ease-out; }
.gain {
  position: absolute; z-index: 4; pointer-events: none; font: 700 22px/1 var(--display); color: var(--ink);
  transform: translate(-50%, -50%); animation: gain 0.9s ease-out forwards;
  text-shadow: 0 0 6px var(--bg), 0 0 6px var(--bg);
}

.over {
  position: absolute; inset: 0; z-index: 6; border-radius: 18px; background: var(--scrim);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px;
}
.over h2 { margin: 0; font: 700 26px/1.1 var(--display); }
.over .big { font: 700 52px/1 var(--display); font-variant-numeric: tabular-nums; }
.over p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.4; max-width: 28ch; }
.actions { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; }
.primary {
  border: 0; cursor: pointer; padding: 13px 26px; border-radius: 14px; background: var(--accent); color: var(--on-accent);
  font: 600 16px/1 var(--display); display: inline-flex; align-items: center; gap: 10px;
}
.primary:hover { filter: brightness(1.06); }
.primary .bsvg { width: 22px; height: 22px; }
.ghost { border: 0; background: transparent; cursor: pointer; padding: 10px 16px; border-radius: 12px; color: var(--muted); font: 600 14px/1 var(--body); }
.ghost:hover { background: var(--chip); color: var(--ink); }

.tray { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.slot {
  --s: calc(var(--cell) * 0.48); --g: calc(var(--gap) * 0.5);
  display: flex; align-items: center; justify-content: center; min-height: calc(var(--cell) * 2.7);
  border-radius: 14px; touch-action: none;
}
.slot.has { cursor: grab; }
.slot.deal { animation: deal 0.35s ease-out backwards; }
.slot.deal:nth-child(2) { animation-delay: 0.05s; }
.slot.deal:nth-child(3) { animation-delay: 0.1s; }
@media (hover: hover) { .slot.has:hover { background: var(--chip); } }
.slot.lifted .piece { opacity: 0.2; }
.slot.hint .piece { animation: nudge 0.7s ease-in-out 3; }
.slot.guide { box-shadow: inset 0 0 0 2px var(--accent); }
.slot.guide .piece { animation: nudge 1.4s ease-in-out infinite; }
.piece { display: grid; gap: var(--g); }
.piece i { display: block; width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.2); }
.piece i.pc {
  box-shadow: inset 0 calc(var(--s) * -0.09) 0 rgba(0, 0, 0, 0.16), inset 0 calc(var(--s) * 0.07) 0 rgba(255, 255, 255, 0.32);
}
.piece.float {
  --s: var(--cell); --g: var(--gap);
  position: fixed; left: 0; top: 0; z-index: 20; pointer-events: none; scale: 0.55; transition: scale 0.12s ease-out;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.22));
}
.piece.float.on { scale: 1; }
.bsvg { display: block; width: 100%; height: 100%; overflow: visible; }

.controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; padding: 0 14px; height: 48px;
  border-radius: 14px; background: var(--chip); font: 600 14px/1 var(--body);
}
.btn:hover { filter: brightness(0.97); }
.btn:disabled { opacity: 0.38; cursor: default; filter: none; }
.btn.icononly { width: 48px; padding: 0; justify-content: center; }
.btn.sure { background: var(--accent); color: var(--on-accent); }
.bomb {
  display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 12px; border-radius: 26px;
  border: 2px solid rgba(255, 255, 255, 0.14); background: #2B2540; color: #fff; cursor: grab; touch-action: none;
  font: 600 15px/1 var(--display); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
}
.bomb .bi { width: 30px; height: 30px; }
.bomb .inf { font-size: 18px; color: #FFB84D; line-height: 1; }
.bomb.lifted { opacity: 0.45; }
.bomb.needs { animation: needs 0.9s ease-in-out infinite; }
@media (max-width: 480px) { .btn .t { display: none; } .btn.wide { padding: 0 13px; } }

.foot { margin: 0; text-align: center; color: var(--muted); font: 500 12px/1.3 var(--body); letter-spacing: 0.01em; }
.foot .heart { color: #E75C86; }
.foot .handle { font-weight: 600; }

/* big popups, drawn above everything */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 25; }
.layer { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; display: grid; place-items: center; }
.pop {
  --pc: var(--b3); --pd: color-mix(in srgb, var(--pc) 45%, #000); --sz: 1;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: -14vh;
  transform: rotate(-4deg); animation: popin 1.55s cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
}
.pop.t2 { --pc: var(--b1); --sz: 1.1; }
.pop.t3 { --pc: var(--b0); --sz: 1.2; }
.pop.t4 { --pc: var(--b5); --sz: 1.3; }
.pop.t5 { --pc: var(--b1); --sz: 1.3; }
.pop .word {
  position: relative; font: 700 calc(clamp(40px, 13.5vw, 84px) * var(--sz))/0.95 var(--display); color: #fff; letter-spacing: -0.01em; text-align: center; padding-inline: 12px;
  text-shadow: 3px 0 0 var(--pd), -3px 0 0 var(--pd), 0 3px 0 var(--pd), 0 -3px 0 var(--pd), 2px 2px 0 var(--pd), -2px -2px 0 var(--pd), 2px -2px 0 var(--pd), -2px 2px 0 var(--pd), 0 8px 0 var(--pd), 0 16px 26px rgba(0, 0, 0, 0.35);
}
.pop .mult {
  position: relative; padding: 6px 20px 8px; border-radius: 20px; background: var(--pc); color: #fff; font: 700 calc(clamp(30px, 10vw, 56px) * var(--sz))/1 var(--display);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.2), inset 0 4px 0 rgba(255, 255, 255, 0.35), 0 6px 0 var(--pd), 0 14px 22px rgba(0, 0, 0, 0.3);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.pop .rays {
  position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; z-index: -1; opacity: 0.4;
  background: repeating-conic-gradient(from 0deg, var(--pc) 0deg 9deg, transparent 9deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 28%); mask-image: radial-gradient(circle, #000 0, transparent 28%);
  animation: spin 6s linear infinite;
}
.ring { position: fixed; z-index: 29; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 6px solid var(--rc, #FFB84D); animation: ring 0.7s ease-out forwards; }
.flash { position: fixed; inset: 0; z-index: 28; background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), rgba(255, 226, 150, 0.7), transparent 60%); animation: flash 0.45s ease-out forwards; }
.boardwrap.shake1 { animation: shake1 0.4s linear; }
.boardwrap.shake2 { animation: shake2 0.55s linear; }

@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes land { 0% { transform: scale(0.82); filter: brightness(1.4); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes hintpulse { from { opacity: 0.25; } to { opacity: 0.7; } }
@keyframes needs { 0%, 100% { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(255, 184, 77, 0.8); } 50% { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28), 0 0 0 12px rgba(255, 184, 77, 0); } }
@keyframes clr {
  0% { transform: scale(1); filter: brightness(1); opacity: 1; }
  30% { transform: scale(1.04); filter: brightness(1.8); opacity: 1; }
  100% { transform: scale(0); filter: brightness(1.8); opacity: 0; }
}
@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, -35%) scale(0.7); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  30% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -75%) scale(1); }
}
@keyframes gain { 0% { opacity: 0; margin-top: 8px; } 20% { opacity: 1; } 100% { opacity: 0; margin-top: -36px; } }
@keyframes deal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes popin {
  0% { opacity: 0; transform: rotate(-12deg) scale(0.25); }
  14% { opacity: 1; transform: rotate(-4deg) scale(1.22); }
  24% { transform: rotate(-4deg) scale(1); }
  76% { opacity: 1; transform: rotate(-4deg) scale(1.03); }
  100% { opacity: 0; transform: rotate(-4deg) translateY(-70px) scale(1.08); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ring { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(16); opacity: 0; } }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
@keyframes shake1 { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3px, 2px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, -2px); } 80% { transform: translate(2px, 2px); } }
@keyframes shake2 { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-7px, 4px); } 30% { transform: translate(6px, -5px); } 45% { transform: translate(-5px, -4px); } 60% { transform: translate(5px, 4px); } 80% { transform: translate(-3px, 2px); } }
@media (prefers-reduced-motion: reduce) {
  .cell.clearing { animation-duration: 0.15s; animation-delay: 0s; }
  .slot.deal, .slot.hint .piece, .slot.guide .piece, .cell.hintcell::after, .bomb.needs, .pop .rays, .ring, .flash, .boardwrap.shake1, .boardwrap.shake2 { animation: none; }
  .pop { animation: popfade 1.4s ease-out forwards; }
  .pop .rays, .ring, .flash { display: none; }
  .toast.show { animation-duration: 0.6s; }
  .switch, .switch::after { transition: none; }
}
@keyframes popfade { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.grp { display: flex; gap: 8px; }