:root {
  --cell: 40px; --gap: 2px;
  --bg: #f6f1e7; --ink: #1e1b16; --muted: #6b6459; --accent: #2f6fd8;
  --empty: #e6dfd2; --empty-alt: #efe7d6; --frame: #cfc6b4;
  --c1: #1f9e8e; --c2: #2f6fd8; --c3: #ef8a1f; --c4: #8a4fd6; --c5: #3aa64a; --c6: #e0457b;
  --c7: #2b2b2b; --c8: #f2c014; --c9: #8d8578;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body, .btn, .icon, .relic-btn, .slot { touch-action: manipulation; }
.board, .tray, .opp-tray, .drag { direction: ltr; } /* grid geometry never mirrors; only text does */
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font: 20px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
#app {
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px 8px calc(10px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto;
}
.hud { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.back { font-size: 20px; font-weight: 700; color: var(--accent); text-decoration: none; padding: 10px; min-height: 48px; display: flex; align-items: center; }
.score { text-align: center; font-weight: 800; font-size: 34px; line-height: 1; }
.score.bump, #score.bump { animation: bump .4s; display: inline-block; }
.score small { display: block; font-size: 15px; color: var(--muted); font-weight: 600; margin-top: 3px; }
.icon { font-size: 26px; background: none; border: 0; min-width: 48px; min-height: 48px; cursor: pointer; }
.stage-bar { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 17px; font-weight: 700; color: var(--muted); }
.stage-bar #progressText { margin-inline-start: auto; }
.bar { flex: 1 1 100%; order: 10; height: 16px; background: var(--empty); border-radius: 8px; overflow: hidden; }
.bar > div { height: 100%; width: 0; background: var(--c5); border-radius: 7px; transition: width .4s; }

.opp-row { width: 100%; display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; color: #d7263d; min-height: 44px; }
.opp-tray { display: flex; gap: 14px; align-items: center; }
.opp-slot { min-width: 42px; height: 40px; display: flex; align-items: center; justify-content: center; }
.opp-slot .piece i { box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.piece i.k10 { background: #d7263d !important; }

/* board */
.board {
  position: relative; display: grid; grid-template-columns: repeat(9, var(--cell)); /* overridden per board size in JS */ grid-auto-rows: var(--cell);
  gap: var(--gap); padding: 6px; background: var(--frame); border-radius: 12px; touch-action: none;
}
.board.shake { animation: shake .35s; }
.cell { position: relative; border-radius: 5px; background: var(--empty); transition: background .1s; }
.cell.gemcell { box-shadow: inset 0 0 0 3px #fff, inset 0 -4px 0 rgba(0,0,0,.2), 0 0 10px 2px rgba(255,255,255,.55); animation: gemglow 1.6s ease-in-out infinite alternate; }
.cell.gemcell::after { content: ''; position: absolute; inset: 20%; background: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%23fff%22%20d=%22M12%202l2.9%206.6%207.1.7-5.4%204.8%201.6%207L12%2017.4%205.8%2021.1l1.6-7L2%209.3l7.1-.7z%22/%3E%3C/svg%3E) center/contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); pointer-events: none; }
.cell.alt { background: var(--empty-alt); } /* keep this low-specificity: .blocked/.rock/[data-v] rules below must win */
.cell.blocked { background: #7a7264 repeating-linear-gradient(45deg, transparent 0 4px, rgba(0,0,0,.22) 4px 8px); box-shadow: inset 0 0 0 2px #574f43; border-radius: 3px; }
.cell.own1:not(.filled) { background: repeating-linear-gradient(45deg, #dbe8ff 0 5px, #c5d8fb 5px 10px); }
.cell.own2:not(.filled) { background: repeating-linear-gradient(45deg, #ffe4e7 0 5px, #f7c6cd 5px 10px); }
.cell.own1.filled, .cell.own2.filled { box-shadow: inset 0 0 0 3px #fff, inset 0 -5px 0 rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.25); }
.cell[data-v="10"] { background: #d7263d; }
.cell.cap1 { animation: capture1 .7s; } .cell.cap2 { animation: capture2 .7s; }
.cell[data-v="1"] { background: var(--c1); } .cell[data-v="2"] { background: var(--c2); }
.cell[data-v="3"] { background: var(--c3); } .cell[data-v="4"] { background: var(--c4); }
.cell[data-v="5"] { background: var(--c5); } .cell[data-v="6"] { background: var(--c6); }
.cell[data-v="7"] { background: var(--c7); } .cell[data-v="8"] { background: var(--c8); }
.cell[data-v="9"] { background: var(--c9); }
.cell.filled { box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.28); }
.cell[data-v="9"].filled { background-image: radial-gradient(circle at 35% 35%, rgba(255,255,255,.3), transparent 55%); }
.cell.ghost { background: var(--gc) !important; box-shadow: inset 0 0 0 3px rgba(0,0,0,.6), 0 0 0 2px #fff; z-index: 1; }
.cell.will-clear { box-shadow: 0 0 0 3px #fff, 0 0 14px 4px rgba(255,200,0,.9); animation: pulse .5s infinite alternate; z-index: 1; }
.cell.hint { outline: 4px solid #f2c014; outline-offset: -1px; animation: pulse .45s infinite alternate; }
.cell.placed { animation: drop .28s backwards; }
.cell.pop { animation: pop .42s forwards; z-index: 2; }
.cell.boom { animation: boom .5s forwards; z-index: 2; }
.flash { position: absolute; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0)); pointer-events: none; z-index: 5; animation: flash .5s ease-out forwards; }
.flash.red { background: linear-gradient(90deg, rgba(215,38,61,0), rgba(215,38,61,.55), rgba(215,38,61,0)); }
.spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--sc, #f2c014); pointer-events: none; z-index: 6; box-shadow: 0 0 6px var(--sc, #f2c014); animation: spark .65s ease-out forwards; }
.board.glow { animation: boardglow .7s; }
.float {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: 36px; font-weight: 900; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.6), 0 0 2px #000; pointer-events: none; animation: floatUp 1.2s forwards; white-space: nowrap; z-index: 10; text-align: center; line-height: 1.1;
}
.float small { display: block; font-size: 22px; }

/* tray */
.tray { display: flex; justify-content: center; gap: 10px; width: 100%; touch-action: none; }
.slot {
  width: calc(var(--mini, 22px) * 5.7); height: calc(var(--mini, 22px) * 5.7); display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: rgba(0,0,0,.05); transition: opacity .2s;
}
.slot.nofit { opacity: .3; }
.slot.lifted .piece { opacity: .2; }
.slot.pulse { animation: pulse .45s infinite alternate; box-shadow: 0 0 0 4px #f2c014; }
.piece { position: relative; }
.piece i { position: absolute; border-radius: 4px; display: block; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.28); }
.piece i.k7 { box-shadow: inset 0 0 0 3px #e0457b, inset 0 -3px 0 rgba(0,0,0,.3); }
.piece i.k8 { box-shadow: inset 0 0 0 3px #fff, 0 0 8px #f2c014; }
.piece .tag { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; pointer-events: none; }
.drag { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 50; filter: drop-shadow(0 14px 14px rgba(0,0,0,.35)); will-change: transform; }

/* score fly-in + Blot */
.fly { position: fixed; z-index: 55; pointer-events: none; font-size: 30px; font-weight: 900; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6), 0 0 2px #000; transform: translate(-50%, -50%); margin: -18px 0 0 0; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s; will-change: transform; }
.blot { position: fixed; left: 0; top: 0; width: 64px; height: 64px; z-index: 30; pointer-events: none; transition: transform .45s cubic-bezier(.3,1.3,.5,1); filter: drop-shadow(0 6px 6px rgba(0,0,0,.3)); }
.blot svg { animation: bob 1.8s ease-in-out infinite; }
.blot.strike svg { animation: strike .5s; }
.blot-timer { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); background: #fff; color: #d7263d; font-weight: 800; font-size: 15px; border-radius: 10px; padding: 1px 8px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.intro-blot svg { width: 110px; height: 110px; animation: bob 1.8s ease-in-out infinite; }
.blot-say { position: absolute; top: -6px; inset-inline-start: 60px; background: #fff; color: #1e1b16; font-weight: 800; font-size: 16px; border-radius: 14px; padding: 6px 12px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.3); animation: drop .25s; }
.blot-say::before { content: ''; position: absolute; top: 12px; inset-inline-start: -8px; border: 6px solid transparent; border-inline-end-color: #fff; }
.slot.slapped { animation: slap .5s; }
.cell.gem { animation: gem .55s forwards; z-index: 2; }


/* buttons */
.actions { display: flex; gap: 12px; width: 100%; }
.btn {
  flex: 1; min-height: 60px; font: inherit; font-size: 22px; font-weight: 700; border: 0; border-radius: 14px;
  background: #fff; box-shadow: 0 3px 0 #c9bfae; color: var(--ink); cursor: pointer;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #c9bfae; }
.btn:disabled { opacity: .35; }
.btn.primary { background: var(--accent); color: #fff; box-shadow: 0 3px 0 #1d4c9c; }
.relics { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: 19px; font-weight: 700; color: var(--ink); }
.relics span { background: #fff; border-radius: 12px; padding: 8px 14px; box-shadow: 0 2px 0 #c9bfae; }

/* overlays */
.overlay { position: fixed; inset: 0; background: rgba(30,27,22,.62); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 40; }
.card { background: var(--bg); border-radius: 22px; padding: 24px 20px; width: 100%; max-width: 440px; text-align: center; animation: drop .25s; }
.card h2 { font-size: 32px; margin: 0 0 6px; }
.card p { font-size: 20px; color: var(--muted); margin: 0 0 18px; }
.card .big { font-size: 48px; font-weight: 900; margin: 4px 0 14px; }
.relic-btn {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: start; padding: 12px 14px; min-height: 84px; margin-bottom: 12px;
  border: 3px solid transparent; border-radius: 16px; background: #fff; font: inherit; color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 #c9bfae;
}
.relic-btn:active { border-color: var(--accent); transform: translateY(2px); }
.relic-btn .ic { font-size: 38px; width: 52px; text-align: center; flex: none; }
.relic-btn > span:last-child { flex: 1; min-width: 0; }
.relic-btn b { font-size: 22px; display: block; }
.relic-btn small { font-size: 17px; color: var(--muted); }
.card .btn { width: 100%; margin-top: 6px; }
.confetti { position: fixed; top: -20px; left: var(--x); width: 12px; height: 18px; background: var(--col); animation: fall var(--d) linear forwards; z-index: 60; border-radius: 3px; }

@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.3); filter: brightness(1.7); } 100% { transform: scale(0); opacity: 0; } }
@keyframes boom { 0% { transform: scale(1); filter: brightness(2); } 100% { transform: scale(0); opacity: 0; filter: brightness(.5); } }
@keyframes drop { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes pulse { from { filter: brightness(1); } to { filter: brightness(1.35); } }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-4px); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: #3aa64a; } 100% { transform: scale(1); } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes strike { 0% { transform: scale(1); } 50% { transform: scale(1.35) rotate(10deg); } 100% { transform: scale(1); } }
@keyframes capture1 { 0% { box-shadow: 0 0 0 0 #2f6fd8; } 50% { box-shadow: 0 0 16px 6px #2f6fd8; filter: brightness(1.4); } 100% { box-shadow: none; } }
@keyframes capture2 { 0% { box-shadow: 0 0 0 0 #d7263d; } 50% { box-shadow: 0 0 16px 6px #d7263d; filter: brightness(1.4); } 100% { box-shadow: none; } }
@keyframes slap { 0% { transform: rotate(0); } 25% { transform: rotate(-14deg) scale(1.08); } 60% { transform: rotate(10deg); } 100% { transform: rotate(0); } }
@keyframes gem { 0% { transform: scale(1); filter: brightness(1); } 40% { transform: scale(1.35) rotate(15deg); filter: brightness(2.2) saturate(1.5); } 100% { transform: scale(0) rotate(45deg); opacity: 0; } }
@keyframes gemglow { from { box-shadow: inset 0 0 0 3px #fff, inset 0 -4px 0 rgba(0,0,0,.2), 0 0 6px 1px rgba(255,255,255,.35); } to { box-shadow: inset 0 0 0 3px #fff, inset 0 -4px 0 rgba(0,0,0,.2), 0 0 14px 4px rgba(255,255,255,.75); } }
@keyframes flash { 0% { opacity: 0; transform: scaleX(.2); } 30% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.05); } }
@keyframes spark { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); } }
@keyframes boardglow { 0% { box-shadow: none; } 40% { box-shadow: 0 0 22px 6px rgba(242,192,20,.75); } 100% { box-shadow: none; } }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .board.shake, .board.glow, .confetti, .flash, .spark, .cell.gemcell { animation: none; } }

/* ---- v3: rounds, hearts, tug-of-war bar, tools, brush mode ---- */
.hearts { color: #d7263d; font-size: 18px; letter-spacing: 1px; white-space: nowrap; }
.bar { position: relative; }
.bar > div.opp { position: absolute; right: 0; top: 0; height: 100%; width: 0; background: #d7263d; border-radius: 7px; transition: width .4s; }
[dir="rtl"] .bar > div.opp { right: auto; left: 0; }
.bar > #progress { position: relative; z-index: 1; }
.pieces { margin-inline-start: auto; color: var(--muted); font-size: 16px; font-weight: 700; white-space: nowrap; }
.tools { display: flex; gap: 10px; width: 100%; }
.tool { flex: 1; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 #c9bfae; color: var(--ink); cursor: pointer; font: inherit; padding: 6px 4px; }
.tool .ic { font-size: 22px; line-height: 1; }
.tool .name { font-size: 15px; font-weight: 800; }
.tool .count { font-size: 14px; color: var(--muted); font-weight: 700; }
.tool:active { transform: translateY(2px); box-shadow: 0 1px 0 #c9bfae; }
.tool:disabled { opacity: .35; }
.tool.armed { outline: 4px solid #f2c014; outline-offset: -2px; }
.tool:focus-visible { outline: 4px solid #2f6fd8; outline-offset: 2px; }
.brush-bar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff3c4; border: 2px solid #f2c014; border-radius: 14px; padding: 8px 12px; font-weight: 800; }
.btn.small { flex: none; min-height: 44px; font-size: 18px; padding: 0 16px; }
.board.brush-mode .cell { cursor: pointer; }
.board.brush-mode .cell:not(.blocked) { outline: 2px dashed rgba(47,111,216,.5); outline-offset: -2px; }
.cell.rock { background-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,.18) 25%, transparent 27%); }
.blot.frozen svg { filter: saturate(.3) brightness(1.4) hue-rotate(180deg); animation: none; }
.blot.frozen .blot-timer { background: #cfe6ff; color: #1d4c9c; }
.round-bar { display: flex; gap: 10px; justify-content: center; font-size: 22px; font-weight: 800; margin: 6px 0 14px; }
.round-bar .you { color: #2f6fd8; } .round-bar .it { color: #d7263d; }

/* ---- v4: 3D skin (wooden tray, glossy cubes, chunky buttons) ---- */
body { background: radial-gradient(120% 70% at 50% -10%, #fffdf7 0%, #f6f1e7 55%, #e9dfcc 100%) fixed; }
.score { text-shadow: 0 2px 0 #fff; }
.board { border-radius: 16px; background: linear-gradient(#e3d0aa, #cdb489); border: 0; box-shadow: 0 8px 0 #a58a5c, 0 16px 24px rgba(70,50,20,.3), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.12); }
.cell { border-radius: 6px; background: #f3ecdd; box-shadow: inset 0 2px 3px rgba(0,0,0,.16), inset 0 -1px 0 rgba(255,255,255,.7); }
.cell.blocked { background: linear-gradient(#b99a6c, #a98858); box-shadow: inset 0 3px 6px rgba(0,0,0,.38), inset 0 -1px 0 rgba(255,255,255,.25); border-radius: 6px; }
.cell.own1:not(.filled), .cell.own2:not(.filled) { box-shadow: inset 0 2px 3px rgba(0,0,0,.16); }
.cell.filled, .piece i { background-image: linear-gradient(160deg, rgba(255,255,255,.4), rgba(255,255,255,0) 50%, rgba(0,0,0,.1)); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(0,0,0,.3), 0 2px 3px rgba(0,0,0,.35); }
.cell.own1.filled, .cell.own2.filled { box-shadow: inset 0 0 0 3px #fff, inset 0 -5px 0 rgba(0,0,0,.28), 0 2px 3px rgba(0,0,0,.35); }
.cell[data-v="10"] { background-image: linear-gradient(160deg, rgba(255,255,255,.35), rgba(255,255,255,0) 50%, rgba(0,0,0,.12)); }
.piece i { border-radius: 6px; }
.piece i.k7 { box-shadow: inset 0 0 0 3px #e0457b, inset 0 -4px 0 rgba(0,0,0,.3), 0 2px 3px rgba(0,0,0,.35); }
.piece i.k8 { box-shadow: inset 0 0 0 3px #fff, inset 0 -4px 0 rgba(0,0,0,.3), 0 0 10px #f2c014; }
.piece i.k10 { background-color: #d7263d !important; }
.slot { border-radius: 16px; background: linear-gradient(#e9e0cd, #f5efe2); box-shadow: inset 0 3px 6px rgba(0,0,0,.16), inset 0 -1px 0 #fff; }
.drag { filter: drop-shadow(0 18px 14px rgba(0,0,0,.4)); }
.bar { height: 18px; background: #e3d9c6; box-shadow: inset 0 2px 3px rgba(0,0,0,.22); }
.bar > div { background: linear-gradient(#6fd67f, #3aa64a); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.bar > div.opp { background: linear-gradient(#ff6b7d, #d7263d); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.btn, .tool, .relic-btn, .relics span { border-radius: 18px; background: linear-gradient(#ffffff, #f1eadc); box-shadow: 0 5px 0 #cbbca0, 0 8px 14px rgba(70,50,20,.15), inset 0 1px 0 #fff; }
.btn:active, .tool:active, .relic-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #cbbca0, inset 0 1px 0 #fff; }
.btn.primary { background: linear-gradient(#5d93f0, #2f6fd8); box-shadow: 0 5px 0 #1d4c9c, 0 8px 14px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.5); text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.btn.primary:active { box-shadow: 0 2px 0 #1d4c9c; }
.tool .ic { font-size: 24px; }
.brush-bar { background: linear-gradient(#fff7d6, #ffe9a3); border: 0; box-shadow: 0 4px 0 #d9a800, 0 6px 10px rgba(0,0,0,.15); }
.card { background: linear-gradient(#ffffff, #f6efe2); border: 2px solid #fff; border-radius: 26px; box-shadow: 0 8px 0 #cbbca0, 0 24px 40px rgba(0,0,0,.35); }
.blot { filter: drop-shadow(0 8px 8px rgba(0,0,0,.35)); }
.blot-timer, .blot-say { box-shadow: 0 3px 0 #cbbca0, 0 5px 8px rgba(0,0,0,.25); }
.intro-blot svg { filter: drop-shadow(0 10px 10px rgba(0,0,0,.3)); }