.board-step-frame,
.board-frame-inner,
.portrait-board-wrap,
.board{
  position:relative;
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  box-shadow:none;
  clip-path:none;
  overflow:visible;
}

.board-step-frame{
  width:min(94vw,calc(100svh - 250px),500px);
  aspect-ratio:1;
}

.board{touch-action:none}
.board::before{display:none}
.board-shine{display:none}

.board-bg-layer{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:visible;
}

.board-cell{
  position:absolute;
  z-index:1;
  width:12.5%;
  height:12.5%;
  padding:0;
  margin:0;
  transform-origin:top left;
  pointer-events:none;
  isolation:isolate;
}

.board-cell-fill{
  position:absolute;
  z-index:2;
  inset:0;
  background:#35404b;
}

.board-cell.checker-a .board-cell-fill{background:#3c4753}
.board-cell.checker-b .board-cell-fill{background:#303a45}

.board-cell.corner-tl .board-cell-fill{border-top-left-radius:var(--board-tile-radius)}
.board-cell.corner-tr .board-cell-fill{border-top-right-radius:var(--board-tile-radius)}
.board-cell.corner-bl .board-cell-fill{border-bottom-left-radius:var(--board-tile-radius)}
.board-cell.corner-br .board-cell-fill{border-bottom-right-radius:var(--board-tile-radius)}

.board-edge,
.board-corner{
  position:absolute;
  pointer-events:none;
  z-index:1;
}

.board-edge-top{
  left:var(--board-border-overlap-x);
  right:var(--board-border-overlap-x);
  top:calc((var(--board-border-size) - var(--board-border-underlap)) * -1);
  height:var(--board-border-size);
  background:var(--board-border-color);
}
.board-edge-right{
  top:var(--board-border-overlap-y);
  bottom:var(--board-border-overlap-y);
  right:calc((var(--board-border-size) - var(--board-border-underlap)) * -1);
  width:var(--board-border-size);
  background:var(--board-border-color);
}
.board-edge-bottom{
  left:var(--board-border-overlap-x);
  right:var(--board-border-overlap-x);
  bottom:calc((var(--board-border-size) - var(--board-border-underlap)) * -1);
  height:var(--board-border-size);
  background:var(--board-border-color);
}
.board-edge-left{
  top:var(--board-border-overlap-y);
  bottom:var(--board-border-overlap-y);
  left:calc((var(--board-border-size) - var(--board-border-underlap)) * -1);
  width:var(--board-border-size);
  background:var(--board-border-color);
}

/* Solid circular corner pieces behind the cell and edge layers. */
.board-corner{
  width:var(--board-corner-size);
  height:var(--board-corner-size);
  z-index:-1;
  border-radius:50%;
  background:var(--board-border-color);
}
.board-corner::after{content:none}
.board-corner-tl{
  left:calc(var(--board-border-size) * -1);
  top:calc(var(--board-border-size) * -1);
  transform:translate(var(--board-corner-offset-x),var(--board-corner-offset-y));
}
.board-corner-tr{
  right:calc(var(--board-border-size) * -1);
  top:calc(var(--board-border-size) * -1);
  transform:translate(calc(var(--board-corner-offset-x) * -1),var(--board-corner-offset-y));
}
.board-corner-bl{
  left:calc(var(--board-border-size) * -1);
  bottom:calc(var(--board-border-size) * -1);
  transform:translate(var(--board-corner-offset-x),calc(var(--board-corner-offset-y) * -1));
}
.board-corner-br{
  right:calc(var(--board-border-size) * -1);
  bottom:calc(var(--board-border-size) * -1);
  transform:translate(calc(var(--board-corner-offset-x) * -1),calc(var(--board-corner-offset-y) * -1));
}

.tile{
  position:absolute;
  width:12.5%;
  height:12.5%;
  padding:0;
  margin:0;
  z-index:2;
  will-change:transform,opacity;
  transition:transform .23s cubic-bezier(.2,.8,.2,1);
}

.tile-inner{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  position:relative;
  background:transparent;
  border:0;
  box-shadow:none;
  transform:none;
}

.item-anchor{
  position:relative;
  width:84%;
  height:84%;
  display:grid;
  place-items:center;
  transform-origin:center;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.22));
  transition:transform .15s ease,opacity .15s ease;
  pointer-events:none;
}

.asset-item,
.tile-visual{
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}

.tile:hover .item-anchor{transform:translateY(-2px) scale(1.04)}
.tile.selected .item-anchor{transform:scale(1.12)}
.tile.selected .asset-item,
.tile.selected .tile-visual{
  filter:
    brightness(1.14)
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 5px 3px rgba(0,0,0,.24));
}
.tile.selected .item-placeholder{
  filter:brightness(1.14);
  text-shadow:2px 0 #fff,-2px 0 #fff,0 2px #fff,0 -2px #fff,0 4px 2px rgba(0,0,0,.24);
}
.tile.hint .item-anchor{animation:hintPulseIcon .75s ease-in-out infinite}

/* Selection belongs to the item only; the static checker cell never changes. */
.tile.selected .tile-inner{background:transparent;border:0;box-shadow:none}
.tile.spawn .item-anchor{animation:tileSpawnIcon var(--drop-duration,430ms) cubic-bezier(.18,1.2,.35,1) var(--drop-delay,0ms) both}
.tile.matched{pointer-events:none}
.tile.matched .item-anchor{animation:tilePopIcon .35s cubic-bezier(.2,.8,.2,1) forwards}
.tile.invalid .item-anchor{animation:invalidIcon .3s ease}

@keyframes hintPulseIcon{50%{transform:scale(1.08);filter:drop-shadow(0 0 10px rgba(255,201,74,.35))}}
@keyframes tileSpawnIcon{from{transform:translateY(var(--drop-y,-300%)) scale(.7);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes tilePopIcon{35%{transform:scale(1.18) rotate(4deg);filter:brightness(1.35)}100%{transform:scale(.1) rotate(-15deg);opacity:0}}
@keyframes invalidIcon{30%{transform:translateX(-7%) rotate(-4deg)}65%{transform:translateX(7%) rotate(4deg)}}

.tile.victory-clear{pointer-events:none;z-index:6}
.tile.victory-clear .item-anchor{
  animation:victoryClearIcon .62s cubic-bezier(.16,.82,.18,1) var(--victory-delay,0ms) both!important;
}
.board-wrap.victory-clearing .board-cell-fill{
  animation:victoryCellPulse .74s cubic-bezier(.18,.8,.2,1) var(--victory-cell-delay,0ms) both;
}
.board-wrap.victory-clearing .board-cell{
  animation:victoryCellLift .72s cubic-bezier(.18,.8,.2,1) var(--victory-cell-delay,0ms) both;
}
@keyframes victoryClearIcon{
  0%{transform:translate(0,0) scale(1) rotate(0);opacity:1;filter:brightness(1)}
  24%{transform:translate(0,-7px) scale(1.2) rotate(calc(var(--victory-rot,24deg) * -.18));opacity:1;filter:brightness(1.45)}
  48%{transform:translate(calc(var(--victory-x,0px) * .35),-14px) scale(.92) rotate(calc(var(--victory-rot,24deg) * .28));opacity:1;filter:brightness(1.25)}
  100%{transform:translate(var(--victory-x,0px),-62px) scale(.06) rotate(var(--victory-rot,24deg));opacity:0;filter:brightness(1.65)}
}
@keyframes victoryCellPulse{
  0%{filter:brightness(1);transform:scale(1)}
  34%{filter:brightness(1.42);transform:scale(.93)}
  68%{filter:brightness(1.12);transform:scale(1.025)}
  100%{filter:brightness(1);transform:scale(1)}
}
@keyframes victoryCellLift{
  0%,100%{z-index:0}
  35%{z-index:1}
}

.floating-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:visible;
  z-index:10;
}

.score-popup{
  position:absolute;
  transform:translate(-50%,-50%);
  color:#fff;
  font-family:'Lilita One',system-ui,sans-serif;
  font-size:clamp(15px,3.6vw,25px);
  text-shadow:0 3px 0 rgba(48,24,121,.8);
  animation:scoreFly .8s ease-out forwards;
  white-space:nowrap;
}
.score-popup.big{color:#ffc94a;font-size:clamp(24px,6vw,38px)}
@keyframes scoreFly{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-55%) scale(1.18)}100%{opacity:0;transform:translate(-50%,-145%) scale(.9)}}

.match-particle{position:absolute;width:7px;height:7px;border-radius:2px;background:#ffc94a;transform:translate(-50%,-50%);animation:particleFly var(--duration,.65s) cubic-bezier(.15,.7,.2,1) forwards}
.match-particle.round{border-radius:50%}
@keyframes particleFly{from{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2) rotate(var(--rot))}}

.sparkle-burst{
  position:absolute;
  z-index:17;
  width:9px;
  height:9px;
  pointer-events:none;
  background:currentColor;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 4px currentColor);
  transform:translate(-50%,-50%) scale(.25);
  animation:sparkleBurstFly .72s cubic-bezier(.18,.82,.2,1) both;
}
@keyframes sparkleBurstFly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(12deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.15) rotate(42deg)}
}

@media (max-width:390px){
  .board-step-frame{width:min(95vw,calc(100svh - 232px),445px)}
}
@media (max-height:700px) and (orientation:portrait){
  .board-step-frame{width:min(92vw,calc(100svh - 202px),405px)}
}
@media (max-height:590px) and (orientation:portrait){
  .board-step-frame{width:min(89vw,calc(100svh - 168px),350px)}
}
@media (orientation:landscape) and (max-height:520px){
  .board-step-frame{width:min(82vh,460px)}
}
.board-wrap.shake{animation:boardShake .32s ease}
.board-wrap.impact{animation:boardImpact .28s ease}
.board-wrap.impact-big{animation:boardImpactBig .34s ease}
@keyframes boardShake{20%{transform:translateX(-5px) rotate(-.3deg)}40%{transform:translateX(5px) rotate(.3deg)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes boardImpact{35%{transform:scale(.985)}70%{transform:scale(1.012)}}
@keyframes boardImpactBig{30%{transform:scale(.972)}62%{transform:scale(1.022)}}
.board-shine{display:block;position:absolute;inset:-5%;z-index:8;pointer-events:none;opacity:0;border-radius:24px;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.42),rgba(255,216,104,.16) 36%,transparent 70%)}
.board-shine.flash{animation:boardFlash .34s ease-out}
@keyframes boardFlash{0%{opacity:0}25%{opacity:.8}100%{opacity:0}}

/* Prism texture morph: no shine, lines, circles, or gold outline. */
.item-anchor .base-asset,
.item-anchor .shine-asset{
  transform-origin:50% 55%;
  transition:opacity .16s ease,transform .30s cubic-bezier(.2,1.25,.3,1);
  will-change:transform,opacity;
}
.item-anchor .base-asset{
  position:relative;
  z-index:1;
  opacity:1;
  transform:scale(1);
}
.item-anchor .shine-asset{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  opacity:0;
  transform:scale(.82);
  filter:none!important;
}
.tile.shine-active .base-asset{
  opacity:0;
  transform:scale(.88);
  filter:none!important;
}
.tile.shine-active .shine-asset{
  opacity:1;
  transform:scale(1);
  filter:none!important;
  animation:prismTextureMorphIn .34s cubic-bezier(.18,1.35,.3,1) both;
}
.tile.selected.shine-active .shine-asset{
  filter:
    brightness(1.14)
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 5px 3px rgba(0,0,0,.24))!important;
}
@keyframes prismTextureMorphIn{
  0%{opacity:0;transform:scale(.78)}
  58%{opacity:1;transform:scale(1.08)}
  100%{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .item-anchor .base-asset,
  .item-anchor .shine-asset{transition:opacity .10s linear;animation:none!important}
}


/* Alpha-masked crystal sweep: follows the transparent prism asset silhouette. */
.item-anchor::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(112deg,
      transparent 0%,
      transparent 39%,
      rgba(255,255,255,.10) 44%,
      rgba(255,255,255,.92) 49%,
      rgba(210,247,255,.72) 52%,
      rgba(255,255,255,.16) 57%,
      transparent 63%,
      transparent 100%);
  background-size:300% 100%;
  background-position:145% 50%;
  -webkit-mask-image:var(--prism-mask,none);
  mask-image:var(--prism-mask,none);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  mix-blend-mode:screen;
  will-change:background-position,opacity;
}
.tile.shine-active .item-anchor::after{
  animation:prismMaskedSweep 3.15s ease-in-out var(--prism-sweep-delay,0s) infinite;
}
@keyframes prismMaskedSweep{
  0%,57%{opacity:0;background-position:145% 50%}
  62%{opacity:.12}
  70%{opacity:.95;background-position:52% 50%}
  78%{opacity:.20}
  84%,100%{opacity:0;background-position:-48% 50%}
}
@media (prefers-reduced-motion:reduce){
  .tile.shine-active .item-anchor::after{animation:none;opacity:0}
}


/* Prism mint: match converges -> prism is born -> gravity may move it. */
.prism-merge-streak{
  position:absolute;
  width:11px;
  height:11px;
  z-index:18;
  pointer-events:none;
  border-radius:2px;
  background:#fff;
  box-shadow:0 0 0 2px rgba(110,225,255,.30),0 0 12px rgba(255,255,255,.72);
  transform:translate(-50%,-50%) scale(.5) rotate(45deg);
  animation:prismMergeIn .38s cubic-bezier(.22,.82,.2,1) var(--prism-merge-delay,0ms) both;
}
@keyframes prismMergeIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(0deg)}
  16%{opacity:1}
  82%{opacity:.95;transform:translate(calc(-50% + var(--prism-merge-x)),calc(-50% + var(--prism-merge-y))) scale(.82) rotate(210deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--prism-merge-x)),calc(-50% + var(--prism-merge-y))) scale(.08) rotate(270deg)}
}
.tile.prism-minted .item-anchor{
  animation:prismMintPunch .56s cubic-bezier(.16,1.35,.24,1) both!important;
}
@keyframes prismMintPunch{
  0%{transform:scale(.72) rotate(-4deg);filter:brightness(1.05) drop-shadow(0 4px 3px rgba(0,0,0,.22))}
  34%{transform:scale(1.22) rotate(3deg);filter:brightness(1.42) drop-shadow(0 5px 4px rgba(0,0,0,.24))}
  62%{transform:scale(.96) rotate(-1deg)}
  82%{transform:scale(1.07) rotate(.5deg)}
  100%{transform:scale(1) rotate(0);filter:drop-shadow(0 4px 3px rgba(0,0,0,.22))}
}
.prism-birth-shard{
  position:absolute;
  z-index:19;
  width:6px;
  height:13px;
  pointer-events:none;
  border-radius:1px;
  transform:translate(-50%,-50%) scale(.4);
  box-shadow:0 0 7px currentColor;
  animation:prismBirthShard .62s cubic-bezier(.12,.72,.18,1) var(--pdelay,0ms) both;
}
@keyframes prismBirthShard{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py))) scale(.05) rotate(var(--prot))}
}
.prism-birth-glint{
  position:absolute;
  z-index:20;
  width:12px;
  height:12px;
  pointer-events:none;
  background:#fff;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 5px rgba(174,241,255,.95));
  transform:translate(-50%,-50%) scale(.2);
  animation:prismBirthGlint .7s cubic-bezier(.18,.85,.2,1) var(--sdelay,0ms) both;
}
@keyframes prismBirthGlint{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(-20deg)}
  24%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(4deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.35) rotate(34deg)}
}
@media (prefers-reduced-motion:reduce){
  .prism-merge-streak,.prism-birth-shard,.prism-birth-glint{display:none!important}
  .tile.prism-minted .item-anchor{animation:none!important}
}


/* Hero combo callouts: centered pose with Treasure Room assets, no generic glyph icons. */
.combo-callout{
  position:absolute;
  z-index:42;
  pointer-events:none;
  transform:translate(-50%,-50%);
  white-space:nowrap;
  text-align:center;
  font-family:'Lilita One',system-ui,sans-serif;
  isolation:isolate;
}
.combo-callout.combo-local{
  padding:5px 10px;
  border-radius:12px;
  background:rgba(9,43,78,.82);
  border:2px solid rgba(255,231,167,.75);
  filter:drop-shadow(0 5px 2px rgba(0,0,0,.28));
  animation:comboLocalPose 1.02s cubic-bezier(.16,1.2,.25,1) both;
}
.combo-callout.combo-local .combo-callout-label{
  display:block;
  color:#fff;
  font-size:clamp(15px,3.5vw,22px);
  line-height:1;
  text-shadow:0 2px 0 #174c7e,0 4px 2px rgba(0,0,0,.22);
}
.combo-callout.combo-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  min-width:min(82%,330px);
  filter:drop-shadow(0 8px 4px rgba(0,0,0,.3));
  animation:comboHeroPose 1.28s cubic-bezier(.15,1.3,.24,1) both;
}
.combo-callout-icon{
  width:clamp(54px,15vw,82px);
  height:clamp(54px,15vw,82px);
  margin-bottom:-8px;
  object-fit:contain;
  transform-origin:50% 78%;
  filter:drop-shadow(0 5px 2px rgba(0,0,0,.25));
  animation:comboHeroIconPose 1.14s cubic-bezier(.15,1.35,.22,1) both;
}
.combo-callout.combo-hero .combo-callout-label{
  display:block;
  color:#fff3aa;
  font-size:clamp(28px,7.4vw,48px);
  line-height:.95;
  letter-spacing:.015em;
  text-shadow:
    0 2px 0 #c27716,
    0 4px 0 #9e5410,
    0 7px 3px rgba(42,24,7,.45);
}
.combo-callout.mint.combo-hero .combo-callout-label{
  color:#c8ffe2;
  text-shadow:0 2px 0 #248963,0 4px 0 #17684e,0 7px 3px rgba(5,45,35,.4);
}
.combo-callout.epic.combo-hero .combo-callout-label{
  color:#f7dcff;
  text-shadow:0 2px 0 #8750b9,0 4px 0 #61358e,0 7px 3px rgba(45,20,70,.45);
}
.combo-callout.legendary.combo-hero .combo-callout-label{
  color:#fff8c6;
  text-shadow:0 2px 0 #d18d18,0 4px 0 #a95f0b,0 7px 3px rgba(62,34,6,.46);
}
@keyframes comboHeroPose{
  0%{opacity:0;transform:translate(-50%,-42%) scale(.58) rotate(-3deg)}
  18%{opacity:1;transform:translate(-50%,-53%) scale(1.12) rotate(1.5deg)}
  34%{transform:translate(-50%,-50%) scale(.98) rotate(-.5deg)}
  48%,72%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-76%) scale(.9)}
}
@keyframes comboHeroIconPose{
  0%{opacity:0;transform:translateY(16px) scale(.55) rotate(-12deg)}
  24%{opacity:1;transform:translateY(-4px) scale(1.18) rotate(5deg)}
  43%{transform:translateY(0) scale(.96) rotate(-2deg)}
  62%,100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}
@keyframes comboLocalPose{
  0%{opacity:0;transform:translate(-50%,-35%) scale(.72)}
  22%{opacity:1;transform:translate(-50%,-58%) scale(1.08)}
  62%{opacity:1;transform:translate(-50%,-70%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-115%) scale(.9)}
}

/* Stronger alpha-masked prism sweep. It stays inside the prism WebP silhouette. */
.item-anchor::after{
  z-index:6;
  background:
    linear-gradient(108deg,
      transparent 0%,
      transparent 31%,
      rgba(255,255,255,0) 36%,
      rgba(220,250,255,.42) 41%,
      rgba(255,255,255,1) 47%,
      rgba(255,245,174,.98) 51%,
      rgba(203,246,255,.92) 55%,
      rgba(255,255,255,.34) 61%,
      transparent 68%,
      transparent 100%);
  background-size:235% 100%;
  background-position:165% 50%;
  mix-blend-mode:screen;
  filter:brightness(1.18);
}
.tile.shine-active .item-anchor::after{
  animation:prismMaskedSweepStrong 2.05s cubic-bezier(.3,.05,.25,1) var(--prism-sweep-delay,0s) infinite;
}
@keyframes prismMaskedSweepStrong{
  0%,31%{opacity:0;background-position:165% 50%}
  36%{opacity:.32}
  43%{opacity:1;background-position:112% 50%}
  54%{opacity:1;background-position:48% 50%}
  64%{opacity:.72;background-position:-16% 50%}
  72%{opacity:0;background-position:-65% 50%}
  100%{opacity:0;background-position:-65% 50%}
}
@media(max-width:430px){
  .combo-callout.combo-hero{top:42%!important}
  .combo-callout-icon{width:58px;height:58px}
  .combo-callout.combo-hero .combo-callout-label{font-size:clamp(25px,8vw,38px)}
}
@media(prefers-reduced-motion:reduce){
  .combo-callout{animation:none!important;opacity:1}
  .combo-callout-icon{animation:none!important}
  .tile.shine-active .item-anchor::after{animation:none!important;opacity:.18;background-position:50% 50%}
}


/* ================================================================
   LOCKED TILE / KEY MECHANIC
   ================================================================ */
.tile.locked-tile{
  z-index:5;
}
.tile.locked-tile .item-anchor{
  transform:scale(.92);
  filter:brightness(.78) saturate(.82) drop-shadow(0 4px 3px rgba(0,0,0,.3));
}
.tile.locked-tile:hover .item-anchor{
  transform:scale(.92);
}
.tile-lock-overlay{
  position:absolute;
  inset:-7%;
  z-index:12;
  pointer-events:none;
  display:grid;
  place-items:center;
  transform-origin:center;
}
.tile-lock-chain{
  position:absolute;
  left:50%;
  top:50%;
  width:34%;
  height:142%;
  object-fit:contain;
  transform-origin:center;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.42));
  will-change:transform,opacity;
}
.tile-lock-chain-a{
  transform:translate(-50%,-50%) rotate(-45deg);
}
.tile-lock-chain-b{
  transform:translate(-50%,-50%) rotate(45deg);
}
.tile-lock-padlock{
  position:absolute;
  left:50%;
  top:50%;
  width:56%;
  height:56%;
  object-fit:contain;
  transform:translate(-50%,-50%);
  z-index:2;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.38));
  will-change:transform,opacity;
}
.board-wrap.unlock-mode .tile:not(.unlock-target){
  filter:brightness(.72) saturate(.78);
  transition:filter .22s ease;
}
.board-wrap.unlock-mode .tile.unlock-target{
  z-index:20;
  cursor:pointer;
}
.board-wrap.unlock-mode .tile.unlock-target .tile-lock-overlay{
  animation:unlockTargetFloat .86s ease-in-out infinite;
}
.board-wrap.unlock-mode .tile.unlock-target .tile-lock-padlock{
  filter:
    drop-shadow(0 4px 3px rgba(0,0,0,.4))
    drop-shadow(0 0 7px rgba(255,205,70,.75));
}
@keyframes unlockTargetFloat{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}

.tile.lock-opening .tile-lock-overlay{
  animation:lockOverlayPop .2s ease-out both;
}
@keyframes lockOverlayPop{
  to{transform:scale(1.08)}
}
.unlock-flying-padlock,
.unlock-flying-chain{
  position:fixed;
  z-index:5000;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 5px 3px rgba(0,0,0,.36));
  will-change:transform,opacity;
}
.lock-break-spark{
  position:absolute;
  z-index:50;
  width:7px;
  height:7px;
  border-radius:2px;
  background:#ffd35a;
  box-shadow:0 0 5px rgba(255,225,132,.75);
  transform:translate(-50%,-50%);
  animation:lockBreakSpark .66s cubic-bezier(.16,.75,.22,1) forwards;
}
.lock-break-spark:nth-child(3n){
  background:#fff5c5;
  clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%);
}
@keyframes lockBreakSpark{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.45) rotate(0)}
  25%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(25deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.12) rotate(95deg)}
}

/* Key is intentionally a little larger than ordinary valuables. */
.tile[data-type="8"] .item-anchor{
  width:90%;
  height:90%;
}

/* First-time lock tutorial. */
.lock-tutorial{
  --finger-x:56.5%;
  --finger-y:56.5%;
  --finger-dx:0%;
  --finger-dy:12.5%;
  position:absolute;
  inset:0;
  z-index:80;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease;
}
.lock-tutorial.visible{
  opacity:1;
  visibility:visible;
}
.lock-tutorial-label{
  position:absolute;
  left:50%;
  top:-15%;
  transform:translateX(-50%);
  min-width:150px;
  padding:7px 17px 8px;
  border:2px solid rgba(255,255,255,.8);
  border-radius:999px;
  background:linear-gradient(#ffe98c,#ffc83e);
  color:#704514;
  font-family:'Lilita One',system-ui,sans-serif;
  font-size:clamp(14px,3.2vw,19px);
  letter-spacing:.4px;
  text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.72);
  box-shadow:0 5px 0 rgba(120,70,15,.24),0 8px 16px rgba(0,0,0,.18);
  white-space:nowrap;
}
.lock-tutorial-finger{
  position:absolute;
  left:var(--finger-x);
  top:var(--finger-y);
  width:clamp(48px,15%,76px);
  height:auto;
  transform:translate(-25%,-12%);
  transform-origin:25% 10%;
  filter:drop-shadow(0 5px 3px rgba(0,0,0,.32));
}
.lock-tutorial.phase-match .lock-tutorial-finger{
  animation:tutorialKeySwipe 1.35s cubic-bezier(.35,.02,.25,1) infinite;
}
.lock-tutorial.phase-choose .lock-tutorial-finger{
  animation:tutorialLockTap 1.12s ease-in-out infinite;
}
@keyframes tutorialKeySwipe{
  0%,12%{opacity:0;transform:translate(-25%,-12%) scale(.9)}
  20%{opacity:1;transform:translate(-25%,-12%) scale(1)}
  56%{opacity:1;transform:translate(calc(-25% + var(--finger-dx)),calc(-12% + var(--finger-dy))) scale(.96)}
  70%{opacity:1;transform:translate(calc(-25% + var(--finger-dx)),calc(-12% + var(--finger-dy))) scale(.86)}
  84%,100%{opacity:0;transform:translate(calc(-25% + var(--finger-dx)),calc(-12% + var(--finger-dy))) scale(.9)}
}
@keyframes tutorialLockTap{
  0%,15%{opacity:0;transform:translate(-25%,-10%) scale(.92)}
  25%{opacity:1;transform:translate(-25%,-10%) scale(1)}
  48%{opacity:1;transform:translate(-25%,0%) scale(.84)}
  66%{opacity:1;transform:translate(-25%,-10%) scale(1)}
  82%,100%{opacity:0}
}
@media(max-width:390px){
  .lock-tutorial-label{
    top:-13%;
    min-width:132px;
    padding:6px 13px 7px;
    font-size:14px;
  }
  .tile-lock-padlock{
    width:60%;
    height:60%;
  }
}
@media(prefers-reduced-motion:reduce){
  .lock-tutorial-finger,
  .board-wrap.unlock-mode .tile.unlock-target .tile-lock-overlay{
    animation:none!important;
  }
}


/* LOCK V2 polish ------------------------------------------------ */
.tile-lock-overlay{
  inset:0!important;
  overflow:hidden;
  border-radius:inherit;
}
.tile-lock-chain{
  width:25%!important;
  height:108%!important;
}
.tile-lock-padlock{
  width:50%!important;
  height:50%!important;
}

/* Center the fingertip on the actual key/cell center. */
.lock-tutorial-finger{
  width:clamp(46px,13.5%,68px)!important;
  transform:translate(-50%,-13%)!important;
  transform-origin:50% 13%!important;
}
.lock-tutorial.phase-match .lock-tutorial-finger{
  animation:tutorialKeySwipeV2 1.5s cubic-bezier(.32,.02,.22,1) infinite!important;
}
.lock-tutorial.phase-choose .lock-tutorial-finger{
  animation:tutorialLockTapV2 1.15s ease-in-out infinite!important;
}
@keyframes tutorialKeySwipeV2{
  0%,10%{opacity:0;transform:translate(-50%,-13%) scale(.9)}
  18%{opacity:1;transform:translate(-50%,-13%) scale(1)}
  30%{opacity:1;transform:translate(-50%,-7%) scale(.9)}
  68%{opacity:1;transform:translate(calc(-50% + var(--finger-dx)),calc(-13% + var(--finger-dy))) scale(.92)}
  78%{opacity:1;transform:translate(calc(-50% + var(--finger-dx)),calc(-8% + var(--finger-dy))) scale(.84)}
  90%,100%{opacity:0;transform:translate(calc(-50% + var(--finger-dx)),calc(-13% + var(--finger-dy))) scale(.9)}
}
@keyframes tutorialLockTapV2{
  0%,14%{opacity:0;transform:translate(-50%,-13%) scale(.92)}
  24%{opacity:1;transform:translate(-50%,-13%) scale(1)}
  48%{opacity:1;transform:translate(-50%,-3%) scale(.83)}
  66%{opacity:1;transform:translate(-50%,-13%) scale(1.02)}
  82%,100%{opacity:0;transform:translate(-50%,-13%) scale(.94)}
}

.unlock-shockwave{
  position:absolute;
  left:50%;
  top:50%;
  width:24%;
  aspect-ratio:1;
  z-index:18;
  pointer-events:none;
  border:4px solid rgba(255,226,103,.95);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.2);
  box-shadow:0 0 12px rgba(255,211,66,.7), inset 0 0 8px rgba(255,255,255,.7);
  animation:unlockShockwave .66s cubic-bezier(.12,.74,.22,1) forwards;
}
@keyframes unlockShockwave{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}
  15%{opacity:1}
  65%{opacity:.8;transform:translate(-50%,-50%) scale(3.15)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(3.8)}
}
.board-wrap.unlock-impact{
  animation:unlockBoardImpact .34s cubic-bezier(.2,.8,.2,1);
}
@keyframes unlockBoardImpact{
  0%,100%{transform:translate3d(0,0,0)}
  18%{transform:translate3d(-2px,1px,0)}
  36%{transform:translate3d(3px,-1px,0)}
  54%{transform:translate3d(-2px,-1px,0)}
  72%{transform:translate3d(1px,1px,0)}
}
.tile.lock-opening::after{
  content:"";
  position:absolute;
  inset:7%;
  z-index:17;
  pointer-events:none;
  border-radius:18%;
  background:radial-gradient(circle,rgba(255,245,190,.86) 0,rgba(255,211,72,.34) 33%,rgba(255,190,30,0) 72%);
  mix-blend-mode:screen;
  animation:unlockGoldFlash .46s ease-out forwards;
}
@keyframes unlockGoldFlash{
  0%{opacity:0;transform:scale(.5)}
  25%{opacity:1;transform:scale(1.04)}
  100%{opacity:0;transform:scale(1.34)}
}
@media(max-width:390px){
  .tile-lock-chain{width:24%!important;height:106%!important}
  .tile-lock-padlock{width:51%!important;height:51%!important}
  .lock-tutorial-finger{width:clamp(42px,13%,60px)!important}
}


/* Lock mechanic v3 tuning */
:root{
  --lock-tutorial-finger-offset-x:0px;
  --lock-tutorial-finger-offset-y:0px;
  --lock-tutorial-finger-swipe-extra-x:0px;
  --lock-tutorial-finger-swipe-extra-y:0px;
  --lock-tutorial-finger-size:clamp(52px,16%,82px);
}

.tile-lock-chain{
  width:28%!important;
  height:122%!important;
}

.lock-tutorial-finger{
  width:var(--lock-tutorial-finger-size)!important;
  margin-left:var(--lock-tutorial-finger-offset-x);
  margin-top:var(--lock-tutorial-finger-offset-y);
}

.lock-tutorial.phase-match .lock-tutorial-finger{
  --finger-dx-adjusted:calc(var(--finger-dx) + var(--lock-tutorial-finger-swipe-extra-x));
  --finger-dy-adjusted:calc(var(--finger-dy) + var(--lock-tutorial-finger-swipe-extra-y));
}

@keyframes tutorialKeySwipe{
  0%,10%{opacity:0;transform:translate(-25%,-12%) scale(.9)}
  17%{opacity:1;transform:translate(-25%,-12%) scale(1)}
  28%{opacity:1;transform:translate(-25%,-12%) scale(.86)}
  36%{opacity:1;transform:translate(-25%,-12%) scale(1)}
  67%{opacity:1;transform:translate(calc(-25% + var(--finger-dx-adjusted,var(--finger-dx))),calc(-12% + var(--finger-dy-adjusted,var(--finger-dy)))) scale(.96)}
  77%{opacity:1;transform:translate(calc(-25% + var(--finger-dx-adjusted,var(--finger-dx))),calc(-12% + var(--finger-dy-adjusted,var(--finger-dy)))) scale(.84)}
  88%,100%{opacity:0;transform:translate(calc(-25% + var(--finger-dx-adjusted,var(--finger-dx))),calc(-12% + var(--finger-dy-adjusted,var(--finger-dy)))) scale(.9)}
}

.key-cashout .item-anchor{
  z-index:25;
  animation:keyCashoutPop .44s cubic-bezier(.16,1.45,.24,1) forwards!important;
  filter:
    brightness(1.35)
    drop-shadow(0 0 10px rgba(255,221,95,.9))
    drop-shadow(0 5px 3px rgba(0,0,0,.25))!important;
}
@keyframes keyCashoutPop{
  0%{transform:scale(1) rotate(0deg)}
  35%{transform:scale(1.34) rotate(-7deg)}
  62%{transform:scale(1.12) rotate(6deg)}
  100%{transform:scale(.18) rotate(14deg);opacity:0}
}
.key-cashout-ring{
  position:absolute;
  width:28px;
  height:28px;
  border:4px solid rgba(255,216,72,.95);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.25);
  box-shadow:0 0 9px rgba(255,225,115,.75);
  pointer-events:none;
  z-index:40;
  animation:keyCashoutRing .62s ease-out forwards;
}
@keyframes keyCashoutRing{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.25)}
  70%{opacity:.9;transform:translate(-50%,-50%) scale(2.15)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.7)}
}
.key-cashout-spark{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:2px;
  background:#ffd84d;
  box-shadow:0 0 6px rgba(255,235,145,.8);
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:41;
  animation:keyCashoutSpark .6s cubic-bezier(.16,.78,.22,1) forwards;
}
.key-cashout-spark:nth-child(odd){
  background:#fff6bb;
  clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%);
}
@keyframes keyCashoutSpark{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.4) rotate(0)}
  28%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(25deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--kx)),calc(-50% + var(--ky))) scale(.1) rotate(120deg)}
}


/* ================================================================
   LOCK TUTORIAL V4 — true tile-to-tile pointer loop
   The JS writes exact rendered tile centers into these variables.
   ================================================================ */
:root{
  --lock-tutorial-finger-offset-x:0px;
  --lock-tutorial-finger-offset-y:0px;
  --lock-tutorial-finger-end-offset-x:0px;
  --lock-tutorial-finger-end-offset-y:0px;
  --lock-tutorial-finger-size:clamp(52px,16%,82px);
}

.lock-tutorial{
  --finger-start-x:50%;
  --finger-start-y:50%;
  --finger-end-x:50%;
  --finger-end-y:50%;
}

.lock-tutorial-finger{
  left:0!important;
  top:0!important;
  width:var(--lock-tutorial-finger-size)!important;
  margin:0!important;
  transform-origin:42% 13%!important;
  will-change:transform,opacity;
}

/* Keep the fingertip itself on the center of the target icon.
   42% / 13% matches the transparent finger artwork hotspot. */
.lock-tutorial.phase-match .lock-tutorial-finger{
  animation:tutorialKeyPointLoop 2.25s cubic-bezier(.42,0,.2,1) infinite!important;
}

@keyframes tutorialKeyPointLoop{
  /* arrive at key #1 */
  0%{
    opacity:0;
    transform:
      translate(
        calc(var(--finger-start-x) + var(--lock-tutorial-finger-offset-x)),
        calc(var(--finger-start-y) + var(--lock-tutorial-finger-offset-y))
      )
      translate(-42%,-13%)
      scale(.92);
  }
  7%{
    opacity:1;
    transform:
      translate(
        calc(var(--finger-start-x) + var(--lock-tutorial-finger-offset-x)),
        calc(var(--finger-start-y) + var(--lock-tutorial-finger-offset-y))
      )
      translate(-42%,-13%)
      scale(1);
  }

  /* point/press key #1 */
  18%{
    opacity:1;
    transform:
      translate(
        calc(var(--finger-start-x) + var(--lock-tutorial-finger-offset-x)),
        calc(var(--finger-start-y) + var(--lock-tutorial-finger-offset-y))
      )
      translate(-42%,-8%)
      scale(.84);
  }
  27%{
    opacity:1;
    transform:
      translate(
        calc(var(--finger-start-x) + var(--lock-tutorial-finger-offset-x)),
        calc(var(--finger-start-y) + var(--lock-tutorial-finger-offset-y))
      )
      translate(-42%,-13%)
      scale(1);
  }

  /* slide to target tile */
  49%{
    opacity:1;
    transform:
      translate(
        calc(var(--finger-end-x) + var(--lock-tutorial-finger-end-offset-x)),
        calc(var(--finger-end-y) + var(--lock-tutorial-finger-end-offset-y))
      )
      translate(-42%,-13%)
      scale(.98);
  }

  /* point/press target */
  61%{
    opacity:1;
    transform:
      translate(
        calc(var(--finger-end-x) + var(--lock-tutorial-finger-end-offset-x)),
        calc(var(--finger-end-y) + var(--lock-tutorial-finger-end-offset-y))
      )
      translate(-42%,-8%)
      scale(.83);
  }
  70%{
    opacity:1;
    transform:
      translate(
        calc(var(--finger-end-x) + var(--lock-tutorial-finger-end-offset-x)),
        calc(var(--finger-end-y) + var(--lock-tutorial-finger-end-offset-y))
      )
      translate(-42%,-13%)
      scale(1);
  }

  /* return to key #1 so the loop reads continuously */
  91%{
    opacity:1;
    transform:
      translate(
        calc(var(--finger-start-x) + var(--lock-tutorial-finger-offset-x)),
        calc(var(--finger-start-y) + var(--lock-tutorial-finger-offset-y))
      )
      translate(-42%,-13%)
      scale(.96);
  }
  100%{
    opacity:0;
    transform:
      translate(
        calc(var(--finger-start-x) + var(--lock-tutorial-finger-offset-x)),
        calc(var(--finger-start-y) + var(--lock-tutorial-finger-offset-y))
      )
      translate(-42%,-13%)
      scale(.92);
  }
}

.lock-tutorial.phase-choose .lock-tutorial-finger{
  animation:tutorialExactLockTap 1.25s ease-in-out infinite!important;
}

@keyframes tutorialExactLockTap{
  0%,10%{
    opacity:0;
    transform:
      translate(
        calc(var(--finger-start-x) + var(--lock-tutorial-finger-offset-x)),
        calc(var(--finger-start-y) + var(--lock-tutorial-finger-offset-y))
      )
      translate(-42%,-13%)
      scale(.92);
  }
  20%{
    opacity:1;
    transform:
      translate(
        calc(var(--finger-start-x) + var(--lock-tutorial-finger-offset-x)),
        calc(var(--finger-start-y) + var(--lock-tutorial-finger-offset-y))
      )
      translate(-42%,-13%)
      scale(1);
  }
  48%{
    opacity:1;
    transform:
      translate(
        calc(var(--finger-start-x) + var(--lock-tutorial-finger-offset-x)),
        calc(var(--finger-start-y) + var(--lock-tutorial-finger-offset-y))
      )
      translate(-42%,-7%)
      scale(.82);
  }
  68%{
    opacity:1;
    transform:
      translate(
        calc(var(--finger-start-x) + var(--lock-tutorial-finger-offset-x)),
        calc(var(--finger-start-y) + var(--lock-tutorial-finger-offset-y))
      )
      translate(-42%,-13%)
      scale(1);
  }
  86%,100%{
    opacity:0;
    transform:
      translate(
        calc(var(--finger-start-x) + var(--lock-tutorial-finger-offset-x)),
        calc(var(--finger-start-y) + var(--lock-tutorial-finger-offset-y))
      )
      translate(-42%,-13%)
      scale(.94);
  }
}

@media(max-width:390px){
  :root{
    --lock-tutorial-finger-size:clamp(48px,15%,68px);
  }
}


/* ================================================================
   LOCK TUTORIAL V5 — JS pixel-path owns finger movement.
   Old CSS keyframes are explicitly disabled.
   ================================================================ */
:root{
  --lock-tutorial-finger-offset-x:0px;
  --lock-tutorial-finger-offset-y:0px;
  --lock-tutorial-finger-end-offset-x:0px;
  --lock-tutorial-finger-end-offset-y:0px;
  --lock-tutorial-finger-size:clamp(52px,16%,82px);
}

.lock-tutorial-finger,
.lock-tutorial.phase-match .lock-tutorial-finger,
.lock-tutorial.phase-choose .lock-tutorial-finger{
  left:0!important;
  top:0!important;
  width:var(--lock-tutorial-finger-size)!important;
  margin:0!important;
  animation:none!important;
  transform-origin:42% 13%!important;
  will-change:transform,opacity;
}


/* ================================================================
   LOCK TUTORIAL V6
   Pointer lives under <body> in viewport coordinates.
   It no longer inherits any board/container positioning.
   ================================================================ */
:root{
  --lock-tutorial-finger-offset-x:0px;
  --lock-tutorial-finger-offset-y:0px;
  --lock-tutorial-finger-end-offset-x:0px;
  --lock-tutorial-finger-end-offset-y:0px;
  --lock-tutorial-finger-size:72px;
}

#lock-tutorial .lock-tutorial-finger{
  display:none!important;
}

.lock-tutorial-pointer{
  position:fixed!important;
  left:0!important;
  top:0!important;
  width:var(--lock-tutorial-finger-size)!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  z-index:2147483000!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  visibility:hidden;
  opacity:0;
  transform-origin:43% 7%!important;
  filter:drop-shadow(0 5px 3px rgba(0,0,0,.35));
  will-change:transform,opacity;
}

@media(max-width:390px){
  :root{
    --lock-tutorial-finger-size:64px;
  }
}


/* ================================================================
   GOLD PLATES
   Static cell objective: match/remove a valuable on top to clear it.
   ================================================================ */
.board-cell.has-gold-plate .board-cell-fill{
  filter:brightness(.76) saturate(.78);
}

.gold-plate{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  width:92%;
  height:92%;
  object-fit:contain;
  transform:translate(-50%,-50%) scale(.93);
  transform-origin:center;
  pointer-events:none;
  user-select:none;
  filter:
    brightness(.92)
    saturate(.9)
    drop-shadow(0 3px 2px rgba(0,0,0,.34));
  will-change:transform,opacity,filter;
}

.board-cell.has-gold-plate::after{
  content:"";
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  width:78%;
  height:78%;
  transform:translate(-50%,-50%);
  border-radius:13%;
  pointer-events:none;
  box-shadow:inset 0 0 9px rgba(255,239,166,.12);
}

.gold-plate.gold-plate-intro{
  animation:goldPlateIntro .9s cubic-bezier(.2,.85,.2,1) 2;
}

@keyframes goldPlateIntro{
  0%,100%{
    transform:translate(-50%,-50%) scale(.93);
    filter:brightness(.92) saturate(.9) drop-shadow(0 3px 2px rgba(0,0,0,.34));
  }
  45%{
    transform:translate(-50%,-50%) scale(1.04);
    filter:
      brightness(1.22)
      saturate(1.14)
      drop-shadow(0 0 8px rgba(255,215,74,.72))
      drop-shadow(0 4px 2px rgba(0,0,0,.28));
  }
}

.gold-plate.gold-plate-hit{
  animation:goldPlateHit .28s cubic-bezier(.2,.9,.28,1);
}

@keyframes goldPlateHit{
  0%{transform:translate(-50%,-50%) scale(.93) rotate(0)}
  32%{transform:translate(-50%,-50%) scale(1.05) rotate(-2deg);filter:brightness(1.28)}
  62%{transform:translate(-50%,-50%) scale(.9) rotate(2deg)}
  100%{transform:translate(-50%,-50%) scale(.93) rotate(0)}
}

.gold-plate.gold-plate-breaking{
  z-index:6;
  animation:goldPlateBreak .5s cubic-bezier(.16,.84,.24,1) forwards;
}

@keyframes goldPlateBreak{
  0%{
    opacity:1;
    transform:translate(-50%,-50%) scale(.93) rotate(0);
  }
  20%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.12) rotate(-2deg);
    filter:
      brightness(1.42)
      saturate(1.18)
      drop-shadow(0 0 10px rgba(255,225,105,.9));
  }
  48%{
    opacity:1;
    transform:translate(-50%,-50%) scale(.88) rotate(3deg);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(1.24) rotate(-6deg);
    filter:brightness(1.65) saturate(.75);
  }
}

.board-cell.gold-plate-cleared .board-cell-fill{
  animation:goldPlateCellFlash .48s ease-out;
}

@keyframes goldPlateCellFlash{
  0%{filter:brightness(.76)}
  30%{filter:brightness(1.55)}
  100%{filter:brightness(1)}
}

.gold-plate-break-flash,
.gold-plate-break-ring,
.gold-plate-shard{
  position:absolute;
  z-index:52;
  pointer-events:none;
}

.gold-plate-break-flash{
  width:24px;
  height:24px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(255,246,190,.95);
  box-shadow:
    0 0 12px rgba(255,226,93,.92),
    0 0 28px rgba(255,190,35,.48);
  animation:goldPlateFlash .48s ease-out forwards;
}

@keyframes goldPlateFlash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.3)}
}

.gold-plate-break-ring{
  width:22px;
  height:22px;
  border:3px solid rgba(255,212,62,.95);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.3);
  box-shadow:0 0 7px rgba(255,228,124,.72);
  animation:goldPlateRing .62s cubic-bezier(.18,.75,.2,1) forwards;
}

@keyframes goldPlateRing{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}
  72%{opacity:.82;transform:translate(-50%,-50%) scale(2.05)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.55)}
}

.gold-plate-shard{
  width:7px;
  height:10px;
  border-radius:2px;
  background:linear-gradient(135deg,#fff1a6 0 26%,#ffd13c 27% 70%,#b96c08 71%);
  transform:translate(-50%,-50%);
  box-shadow:0 1px 2px rgba(91,48,0,.35);
  animation:goldPlateShard .7s cubic-bezier(.12,.72,.2,1) forwards;
}

.gold-plate-shard.bright{
  width:6px;
  height:6px;
  background:#fff4b7;
  transform:translate(-50%,-50%) rotate(45deg);
  box-shadow:0 0 6px rgba(255,228,105,.85);
}

@keyframes goldPlateShard{
  0%{
    opacity:1;
    transform:translate(-50%,-50%) scale(.35) rotate(0);
  }
  30%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.08) rotate(25deg);
  }
  100%{
    opacity:0;
    transform:
      translate(calc(-50% + var(--plate-x)),calc(-50% + var(--plate-y)))
      scale(.45)
      rotate(var(--plate-r));
  }
}

.goal-mechanic-symbol{
  width:94%!important;
  height:94%!important;
  object-fit:contain;
  filter:drop-shadow(0 2px 1px rgba(83,48,0,.28));
}

@media(max-width:390px){
  .gold-plate{
    width:94%;
    height:94%;
  }
}


/* ================================================================
   TURNTABLE — pure CSS mechanical 2x2 platform
   ================================================================ */
.turntable-base{
  position:absolute;
  width:25%;
  height:25%;
  z-index:8;
  pointer-events:none;
  padding:1.7%;
  box-sizing:border-box;
  filter:drop-shadow(0 4px 2px rgba(0,0,0,.28));
  transform:translateZ(0);
}

.turntable-frame{
  position:absolute;
  inset:1.5%;
  border-radius:24%;
  background:#705127;
  border:3px solid #f4dda0;
  box-shadow:
    inset 0 0 0 3px #a47a37,
    inset 0 0 0 7px #4f3a20,
    0 2px 0 rgba(255,241,193,.22);
}

.turntable-frame::before{
  content:"";
  position:absolute;
  inset:6%;
  border-radius:50%;
  background:#b7893f;
  border:3px solid #efd47e;
  box-shadow:
    inset 0 0 0 4px #6e5127,
    inset 0 0 0 8px #caa34f;
}

.turntable-disc{
  position:absolute;
  inset:9%;
  border-radius:50%;
  background:#a77b38;
  border:2px solid #f7e6af;
  box-shadow:
    inset 0 0 0 4px #745526,
    inset 0 0 0 7px #c69c48;
  transform-origin:center;
}

.turntable-disc::before,
.turntable-disc::after{
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  background:#5c4528;
  opacity:.76;
  transform:translate(-50%,-50%);
  border-radius:999px;
}

.turntable-disc::before{
  width:5px;
  height:88%;
  box-shadow:1px 0 0 rgba(255,231,153,.28);
}

.turntable-disc::after{
  width:88%;
  height:5px;
  box-shadow:0 1px 0 rgba(255,231,153,.28);
}

.turntable-cross{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  background:#d7b55e;
  opacity:.72;
  border-radius:999px;
  transform:translate(-50%,-50%);
}

.turntable-cross-v{
  width:2px;
  height:84%;
}

.turntable-cross-h{
  width:84%;
  height:2px;
}

.turntable-hub{
  position:absolute;
  z-index:6;
  left:50%;
  top:50%;
  width:23%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#e4c876;
  border:3px solid #fff0b5;
  box-shadow:
    inset 0 0 0 4px #8a672f,
    0 2px 0 rgba(39,27,15,.42);
}

.turntable-hub i{
  position:absolute;
  left:50%;
  top:50%;
  width:28%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#54402a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}

.turntable-direction-mark{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  width:47%;
  height:47%;
  transform:translate(-50%,-50%) rotate(20deg);
  border-radius:50%;
  border:3px solid transparent;
  border-top-color:#ffe998;
  border-right-color:#ffe998;
  opacity:.92;
}

.turntable-direction-mark::after{
  content:"";
  position:absolute;
  right:-5px;
  top:46%;
  width:0;
  height:0;
  border-left:7px solid #ffe998;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  transform:rotate(34deg);
  transform-origin:center;
}

.turntable-ccw .turntable-direction-mark{
  transform:translate(-50%,-50%) scaleX(-1) rotate(20deg);
}

.turntable-rivet{
  position:absolute;
  z-index:7;
  width:7%;
  aspect-ratio:1;
  border-radius:50%;
  background:#e7e1ce;
  border:1px solid #554d42;
  box-shadow:
    inset 0 0 0 2px #9e998c,
    0 1px 1px rgba(0,0,0,.42);
}

.rivet-tl{left:9%;top:9%}
.rivet-tr{right:9%;top:9%}
.rivet-br{right:9%;bottom:9%}
.rivet-bl{left:9%;bottom:9%}

.turntable-base.turntable-intro{
  animation:turntableIntroPulse .9s cubic-bezier(.2,.8,.2,1) 2;
}

@keyframes turntableIntroPulse{
  0%,100%{
    filter:drop-shadow(0 4px 2px rgba(0,0,0,.28));
    transform:scale(1);
  }
  45%{
    filter:
      brightness(1.18)
      drop-shadow(0 0 10px rgba(255,215,93,.72))
      drop-shadow(0 4px 2px rgba(0,0,0,.25));
    transform:scale(1.045);
  }
}

.turntable-cw.turntable-active .turntable-disc{
  animation:turntableSpinCW .56s cubic-bezier(.2,.72,.18,1);
}

.turntable-ccw.turntable-active .turntable-disc{
  animation:turntableSpinCCW .56s cubic-bezier(.2,.72,.18,1);
}

@keyframes turntableSpinCW{
  0%{transform:rotate(0deg) scale(1)}
  28%{transform:rotate(18deg) scale(1.035)}
  100%{transform:rotate(90deg) scale(1)}
}

@keyframes turntableSpinCCW{
  0%{transform:rotate(0deg) scale(1)}
  28%{transform:rotate(-18deg) scale(1.035)}
  100%{transform:rotate(-90deg) scale(1)}
}

.turntable-base.turntable-active .turntable-hub{
  animation:turntableHubPunch .56s cubic-bezier(.18,.9,.2,1);
}

@keyframes turntableHubPunch{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  30%{transform:translate(-50%,-50%) scale(1.18)}
  54%{transform:translate(-50%,-50%) scale(.92)}
  72%{transform:translate(-50%,-50%) scale(1.05)}
}

.tile.turntable-moving{
  z-index:16!important;
}

.tile.turntable-moving .item-anchor{
  filter:
    brightness(1.08)
    drop-shadow(0 7px 5px rgba(0,0,0,.3));
}

.board-wrap.turntable-board-pulse{
  animation:turntableBoardPulse .42s ease-out;
}

@keyframes turntableBoardPulse{
  0%,100%{transform:translateZ(0)}
  30%{transform:translateY(1px)}
  55%{transform:translateY(-1px)}
}

@media(max-width:390px){
  .turntable-frame{
    border-width:2px;
  }
  .turntable-direction-mark{
    border-width:2px;
  }
}

@media(prefers-reduced-motion:reduce){
  .turntable-base.turntable-intro,
  .turntable-cw.turntable-active .turntable-disc,
  .turntable-ccw.turntable-active .turntable-disc,
  .turntable-base.turntable-active .turntable-hub,
  .board-wrap.turntable-board-pulse{
    animation:none!important;
  }
}


/* TURNABLE ASSET STACKED V2 */
.turntable-base{
  position:absolute;
  width:25%;
  height:25%;
  z-index:8;
  pointer-events:none;
  box-sizing:border-box;
  transform:translateZ(0);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.32));
}
.turntable-frame{
  position:absolute;
  inset:0;
}
.turntable-ring,
.turntable-rotor{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
  -webkit-user-drag:none;
}
.turntable-ring{
  position:absolute;
  inset:0;
  z-index:1;
}
.turntable-rotor-wrap{
  position:absolute;
  inset:16%;
  z-index:2;
  transform-origin:center;
  will-change:transform, filter;
}
.turntable-rotor{
  width:100%;
  height:100%;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.18));
}
.turntable-glow{
  position:absolute;
  inset:14%;
  z-index:0;
  border-radius:50%;
  opacity:0;
  background:radial-gradient(circle, rgba(255,236,148,.42) 0%, rgba(255,236,148,.14) 48%, rgba(255,236,148,0) 72%);
  transform:scale(.92);
}
.turntable-base.turntable-intro .turntable-frame{
  animation:turntableAssetIntro .9s cubic-bezier(.2,.8,.2,1) 2;
}
.turntable-base.turntable-intro .turntable-glow{
  animation:turntableAssetGlow .9s cubic-bezier(.2,.8,.2,1) 2;
}
@keyframes turntableAssetIntro{
  0%,100%{ transform:scale(1); filter:brightness(1); }
  45%{ transform:scale(1.045); filter:brightness(1.08); }
}
@keyframes turntableAssetGlow{
  0%,100%{ opacity:0; transform:scale(.92); }
  45%{ opacity:1; transform:scale(1.05); }
}
.turntable-cw.turntable-active .turntable-rotor-wrap{
  animation:turntableRotorCW .56s cubic-bezier(.2,.72,.18,1);
}
.turntable-ccw.turntable-active .turntable-rotor-wrap{
  animation:turntableRotorCCW .56s cubic-bezier(.2,.72,.18,1);
}
.turntable-base.turntable-active .turntable-glow{
  animation:turntableActiveGlow .56s ease-out;
}
.turntable-base.turntable-active .turntable-ring{
  animation:turntableRingPunch .56s cubic-bezier(.18,.9,.2,1);
}
@keyframes turntableRotorCW{
  0%{transform:rotate(0deg) scale(1)}
  28%{transform:rotate(18deg) scale(1.04)}
  100%{transform:rotate(90deg) scale(1)}
}
@keyframes turntableRotorCCW{
  0%{transform:rotate(0deg) scale(1)}
  28%{transform:rotate(-18deg) scale(1.04)}
  100%{transform:rotate(-90deg) scale(1)}
}
@keyframes turntableActiveGlow{
  0%,100%{opacity:0; transform:scale(.95)}
  40%{opacity:.95; transform:scale(1.08)}
}
@keyframes turntableRingPunch{
  0%,100%{transform:scale(1)}
  30%{transform:scale(1.015)}
  55%{transform:scale(.995)}
}
@media (max-width: 480px){
  .turntable-rotor-wrap{ inset:16.5%; }
}
@media (prefers-reduced-motion:reduce){
  .turntable-base.turntable-intro .turntable-frame,
  .turntable-base.turntable-intro .turntable-glow,
  .turntable-cw.turntable-active .turntable-rotor-wrap,
  .turntable-ccw.turntable-active .turntable-rotor-wrap,
  .turntable-base.turntable-active .turntable-glow,
  .turntable-base.turntable-active .turntable-ring{
    animation:none !important;
  }
}


/* ================================================================
   TURNTABLE V3 — persistent cumulative rotor angle
   Rotor movement is owned by JS/Web Animations API.
   ================================================================ */
.turntable-rotor-wrap{
  animation:none!important;
}

.turntable-cw.turntable-active .turntable-rotor-wrap,
.turntable-ccw.turntable-active .turntable-rotor-wrap{
  animation:none!important;
}