.board{position:relative;isolation:isolate}
.tile-layer{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;border-radius:inherit}
.score-layer{
  position:absolute;inset:0;z-index:5;overflow:hidden;border-radius:inherit;
  pointer-events:none;user-select:none;container-type:inline-size;
}
.score-wave{
  position:absolute;inset:0;display:grid;
  grid-template:repeat(7,minmax(0,1fr)) / repeat(7,minmax(0,1fr));
  font:900 clamp(12px,4.5vw,21px)/1 var(--font),sans-serif;
  font-size:clamp(12px,5.05cqw,22px);font-variant-numeric:tabular-nums;
}
.score-pop{
  display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;
  --score-from:-30%;--score-rest:-51%;--score-to:-67%;
}
.score-pop[data-lane="1"]{--score-from:64%;--score-rest:51%;--score-to:39%}
.score-pop b{
  display:inline-block;padding:0 .06em;white-space:nowrap;opacity:0;transform:translateY(var(--score-rest));
  color:#fff4d6;font:inherit;letter-spacing:-.035em;-webkit-text-stroke:2.6px #153349;
  paint-order:stroke fill;text-shadow:0 1.5px 0 #0f2b3b,1px 0 #173648,-1px 0 #173648;
}
.score-pop[data-points="30"] b{color:#ffce5e}
.score-pop[data-points="50"] b{
  font-size:.91em;color:#a0ffec;background:#133f49;border:1px solid #80e7d4;border-radius:.55em;
  padding:.025em .16em .065em;-webkit-text-stroke:1px #133f49;text-shadow:0 1px 0 #072630;
}
.moving-tile{position:absolute;top:0;left:0;width:calc(100% / 7);height:calc(100% / 7);pointer-events:none;backface-visibility:hidden}
.tile-face,.tile-badge,.food-thumbnail{display:block;background-image:url("assets/board-pieces.webp");background-size:900% 100%;background-repeat:no-repeat;pointer-events:none}
.tile-face,.tile-badge{position:absolute}
.food-thumbnail{position:static}
.tile-face{inset:2%;transform-origin:center}
.food-art{background-image:url("assets/foods-atlas.webp");background-size:582.374101% 349.280576%;background-repeat:no-repeat}
.tile-face.tile-gold{
  background:center / contain no-repeat url("assets/gold-app-icon.webp");
  filter:drop-shadow(0 0 2px #ffc85b8a);
}
.gold-rim{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke-linecap:round;pointer-events:none}
.gold-rim-track{stroke:#ffe49b;stroke-width:1.5;opacity:.62}
.gold-rim-trail{stroke:#ffed9c;stroke-width:5;stroke-dasharray:18 82;opacity:.8;animation:fx-gold-orbit 2.6s linear infinite}
.gold-rim-spark{stroke:#fffdec;stroke-width:2.6;stroke-dasharray:5 95;animation:fx-gold-orbit 2.6s linear -.39s infinite}
@keyframes fx-gold-orbit{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
.tile-gold::before,.tile-gold::after{
  content:"";position:absolute;width:18%;height:18%;pointer-events:none;
  background:linear-gradient(145deg,#fffbe1 22%,#ffe594 66%,#f4ba52);
  clip-path:polygon(50% 0,62% 35%,100% 50%,62% 62%,50% 100%,37% 63%,0 50%,37% 36%);
  opacity:.7;animation:fx-gold-glint 2.4s ease-in-out infinite;
}
.tile-gold::after{right:5%;top:4%}
.tile-gold::before{left:4%;bottom:9%;width:13%;height:13%;animation-delay:-1.2s}
@keyframes fx-gold-glint{0%,100%{opacity:.42;transform:scale(.78)}50%{opacity:1;transform:scale(1.12)}}
.tile-badge{right:0;bottom:0;width:36%;height:36%;transform-origin:bottom right}
.tile-badge.converted-badge{
  width:48%;height:48%;right:-1%;bottom:-1%;
  filter:drop-shadow(0 1px .65px #183344) drop-shadow(0 0 1.25px #fff0ae);
  animation:fx-arm-badge 340ms cubic-bezier(.18,.75,.3,1) 160ms both;
}
@keyframes fx-arm-badge{0%{opacity:0;transform:scale(.35)}65%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
.conversion-still{
  position:absolute;inset:0;z-index:5;pointer-events:none;display:grid;
  grid-template:repeat(7,minmax(0,1fr)) / repeat(7,minmax(0,1fr));
}
.conversion-still>span{position:relative;min-width:0;min-height:0}
.conversion-still .converted-badge{right:2%;bottom:2%}
.cell:focus-visible{z-index:auto}.cell.selected::after,.cell.marked::after{z-index:2}
.cell .hint-arrow{display:none}.cell.guide-from .hint-arrow{position:absolute;display:grid;place-items:center;z-index:3;bottom:2px;left:1px;min-width:17px;height:17px;border-radius:50%;border:1px solid #fff3c8;background:#102c42;color:#fff3c8;font:900 14px/1 var(--font);pointer-events:none}
.wave-fx{
  position:absolute;inset:0;z-index:4;width:100%;height:100%;opacity:0;overflow:hidden;
  pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round;
  --ink:#ffdc83;--peak:.84;animation:fx-wave-life var(--wave-life) linear both;
}
.fx-rail{stroke:#ffe4a0;stroke-width:3.5;stroke-dasharray:5 4;--peak:.65}
.fx-rail,.fx-gold-rays,.fx-wick{animation:fx-lit var(--life) ease-out var(--at) both}
.fx-donor,.fx-ignite,.fx-gold-origin{
  stroke:var(--ink);stroke-width:3.8;transform-box:fill-box;transform-origin:center;
  animation:fx-halo var(--life) ease-out var(--at) both;
}
.fx-donor{stroke-width:2.8;stroke-dasharray:20 5;--peak:.66}
.fx-gather,.fx-signal{
  stroke:#fff4c0;stroke-width:6.4;stroke-dasharray:15 150;
  animation:fx-spark var(--life) cubic-bezier(.42,.04,.8,.87) var(--at) both;
}
.fx-gather-wake{
  stroke:var(--ink);stroke-width:14;stroke-dasharray:24 150;
  animation:fx-spark-wake var(--life) cubic-bezier(.42,.04,.8,.87) var(--at) both;
}
.fx-seal{
  transform-origin:0 0;animation:fx-seal-in var(--life) ease-out var(--at) both;
}
.fx-seal-rim{stroke:#ffd788;stroke-width:2.6;stroke-opacity:.8}
.fx-enamel{stroke-width:5}
.fx-glint{fill:#fff1b8;stroke:#68522f;stroke-width:1.2}
.fx-direction{stroke:#ffdf8b;stroke-width:5}
.fx-lane-bed,.fx-lane,.fx-lane-core,.fx-trace{
  stroke-dasharray:100 125;animation:fx-draw var(--travel) linear var(--at) both,
    fx-route var(--life) linear var(--at) both;
}
.fx-ignite{stroke:#fff0b3;stroke-width:7;--peak:1}
.fx-wick{stroke:#ffcf6b;stroke-width:7;--peak:1}
.fx-lane-bed{stroke:#71452e;stroke-width:26;--peak:.84}
.fx-lane{stroke:#ffae3f;stroke-width:20;--peak:.98}
.fx-lane-core{stroke:#ffefae;stroke-width:7;--peak:1}
.fx-salvo-rail{stroke:#ffd775;stroke-width:10;--peak:.79}
.fx-front{animation:fx-sweep var(--life) linear var(--at) both}
.fx-jet{fill:#ffc24c;stroke:#253b42;stroke-width:4.5;paint-order:stroke fill}
.fx-jet-core{fill:#fff4bb}
.fx-shockfront{stroke:#ffedaf;stroke-width:4.8}
.fx-gold-origin{stroke:#ffd068;stroke-dasharray:28 4;stroke-width:6}
.fx-gold-rays{stroke:#ffdf93;stroke-width:6;--peak:1}
.fx-trace{stroke:var(--ink);stroke-width:4.8;--peak:.79}
.fx-signal{stroke:#fff0bf;stroke-width:7.5;stroke-dasharray:10 150}
.fx-dense .fx-trace{--peak:.44;stroke-width:2.8}
.fx-lock,.fx-burst-body,.fx-chips{transform-origin:0 0}
.fx-lock{animation:fx-lock-on var(--life) ease-out var(--at) both}
.fx-convert-lock{animation:fx-unlock var(--life) ease-out var(--at) both}
.fx-convert-lock{--ink:#ffe194}
@keyframes fx-unlock{from{opacity:.94}to{opacity:0}}
.fx-lock-ink{stroke:#183544;stroke-width:8}
.fx-lock-light{stroke:var(--ink,#ffe1a0);stroke-width:4.5}
.fx-burst-shell{fill:var(--shell,#ffa23c);stroke:#1b3544;stroke-width:6;paint-order:stroke fill}
.fx-burst-fire{fill:#ffcf55}
.fx-burst-core{fill:#fff1b6}
.fx-chip-ink{fill:var(--shell,#ffb24c);stroke:#193643;stroke-width:3;paint-order:stroke fill}
.fx-burst-body{animation:fx-burst var(--life) linear var(--at) both}
.fx-chips{animation:fx-chips-out var(--life) cubic-bezier(.19,.5,.48,1) var(--at) both}
.fx-crowd{--burst-size:.82;--burst-fade:.97;--chip-range:1.09}
.fx-crowd .fx-burst-core{fill:#ffe6a6}
@keyframes fx-lock-on{
  0%{opacity:0;transform:scale(1.19)}18%,73%{opacity:.92;transform:scale(1)}
  100%{opacity:0;transform:scale(.8)}
}
@keyframes fx-burst{
  0%{opacity:0;transform:scale(.21)}
  17%{opacity:1;transform:scale(var(--burst-size,1.01))}
  43%{opacity:1;transform:scale(var(--burst-size,1.01))}
  100%{opacity:0;transform:scale(var(--burst-fade,1.17))}
}
@keyframes fx-chips-out{
  0%{opacity:0;transform:scale(.55)}16%,56%{opacity:1}
  100%{opacity:0;transform:scale(var(--chip-range,1.27))}
}
.fx-callout{
  font-family:var(--font),sans-serif;font-size:44px;font-weight:900;
  fill:#ffe89b;stroke:#142f43;stroke-width:8.5;paint-order:stroke fill;
  transform-origin:0 0;pointer-events:none;animation:fx-callout-in var(--life) ease-out var(--at) both;
}
@keyframes fx-callout-in{
  0%{opacity:0;transform:translateY(5px) scale(.84)}
  18%{opacity:1;transform:translateY(-1px) scale(1.055)}
  33%,77%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-5px) scale(.98)}
}
@keyframes fx-wave-life{0%,93%{opacity:1}100%{opacity:0}}
@keyframes fx-lit{
  0%{opacity:0}23%,66%{opacity:var(--peak)}100%{opacity:0}
}
@keyframes fx-halo{
  0%{opacity:0;transform:scale(.8)}
  28%{opacity:var(--peak)}58%{opacity:var(--peak);transform:scale(1)}
  100%{opacity:0;transform:scale(1.16)}
}
@keyframes fx-spark{
  0%{stroke-dashoffset:18;opacity:0}13%{opacity:1}83%{opacity:1}
  100%{stroke-dashoffset:-104;opacity:0}
}
@keyframes fx-spark-wake{
  0%{stroke-dashoffset:28;opacity:0}16%,76%{opacity:.76}
  100%{stroke-dashoffset:-95;opacity:0}
}
@keyframes fx-seal-in{
  0%{opacity:0;transform:scale(.78)}27%{opacity:1;transform:scale(1.07)}
  48%,78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.04)}
}
@keyframes fx-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes fx-route{
  0%{opacity:0}13%,72%{opacity:var(--peak)}100%{opacity:0}
}
@keyframes fx-sweep{
  0%{opacity:0;transform:translate(0,0)}9%,88%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy))}
}
@media (prefers-reduced-motion:reduce){.wave-fx{display:none}.tile-gold::before,.tile-gold::after,.gold-rim-trail,.gold-rim-spark,.converted-badge{animation:none!important}}
.combo-key{width:31px;height:31px;vertical-align:middle;margin-right:4px}
.rule-combos b{display:flex!important;align-items:center}