/* A temporary surface over the original grid. Slot numbers stay anchored while only foil moves. */
.sr-board-grid.sri-active { position:relative; }
.sri-active > .sr-cell { visibility:hidden; }
.sri-layer {
  --sri-gap:3px;
  position:absolute; inset:4px; isolation:isolate; overflow:hidden; z-index:3;
  display:grid; grid-template:repeat(4,minmax(0,1fr)) / repeat(4,minmax(0,1fr)); gap:var(--sri-gap);
  background:#131718; border-radius:4px; touch-action:pan-y; user-select:none;
}
.sri-slot {
  position:relative; min-width:0; min-height:0;
  background:#263034; box-shadow:inset 0 0 0 1px #625944; border-radius:4px;
}
.sri-number { z-index:4; }
.sri-specimen,.sri-cover {
  position:absolute; inset:0; display:grid; place-items:center; align-content:center;
  border-radius:4px; pointer-events:none;
}
.sri-specimen { background:#183332; box-shadow:inset 0 0 0 1px #48746e; color:#dcf2ed; }
.sri-slot[data-sample=crown] .sri-specimen { background:#41351f; color:#ffe5a3; box-shadow:inset 0 0 0 1px #b99854; }
.sri-slot[data-sample=rift] .sri-specimen { background:#32242d; color:#ffccd7; box-shadow:inset 0 0 0 1px #704550; }
.sri-treasure { position:absolute; inset:13% 12% 5%; width:76%; height:82%; object-fit:contain; opacity:0; }
.sri-loaded .sri-treasure { opacity:1; }
.sri-loaded .sri-word,.sri-art-ready .sri-plain-name { visibility:hidden; }
.sri-word,.sri-plain-name { padding:10px 2px 0; font-size:clamp(9px,2.8vw,13px); font-weight:700; text-align:center; overflow-wrap:anywhere; }
.sri-cover {
  z-index:2; opacity:0; color:#f0dfb3; overflow:hidden; background-color:#293034; background-repeat:no-repeat;
  background-size:400% 400%; box-shadow:inset 0 0 0 1px #807359; transform-origin:center;
}
.sri-art-ready[data-theme=mural] .sri-cover { background-image:url("../assets/ui/scratch_board_mural.webp"); }
.sri-art-ready[data-theme=compass] .sri-cover { background-image:url("../assets/ui/scratch_board_compass.webp"); background-size:100% 100%; }
.sri-art-ready[data-theme=relics] .sri-cover { background-image:url("../assets/ui/scratch_board_relics.webp"); }
.sri-art-ready[data-theme=mixed] .sri-cover { background-image:url("../assets/ui/scratch_board_mixed.webp"); }
.sri-layer[data-phase=cover] .sri-specimen { animation:sri-put-away 200ms ease-out both; }
.sri-layer[data-phase=mix] .sri-specimen { visibility:hidden; }
.sri-layer[data-theme=compass][data-phase=cover] .sri-cover { animation:sri-close 600ms ease-in-out both; }
.sri-layer[data-theme=compass][data-phase=mix] .sri-cover { opacity:1; animation:sri-cross 1400ms ease-in-out both; }
.sri-layer[data-theme=relics][data-phase=mix] .sri-cover,
.sri-layer[data-theme=mixed][data-phase=mix] .sri-cover { animation:sri-relief 480ms var(--sri-delay) ease-out both; }
.sri-cover[data-direction=up] { --sri-dx:0%; --sri-dy:-115%; }
.sri-cover[data-direction=down] { --sri-dx:0%; --sri-dy:115%; }
.sri-cover[data-direction=left] { --sri-dx:-115%; --sri-dy:0%; }
.sri-cover[data-direction=right] { --sri-dx:115%; --sri-dy:0%; }
.sri-layer[data-theme=mural][data-phase=mix] .sri-cover { animation:sri-assemble 1180ms cubic-bezier(.22,.65,.25,1) both; }
.sri-layer.sri-paused .sri-slot .sri-cover,.sri-layer.sri-paused .sri-slot .sri-specimen { animation-play-state:paused; }
.sri-reader { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@keyframes sri-put-away { to { opacity:0; transform:scale(.86); } }
@keyframes sri-close {
  from { opacity:0; transform:perspective(280px) rotateX(84deg); }
  35% { opacity:1; }
  to { opacity:1; transform:perspective(280px) rotateX(0deg); }
}
@keyframes sri-cross {
  0%,8% { transform:translate(0,0); }
  23% { transform:translateX(calc(var(--sri-x) / 2)) scale(.89); }
  42%,55% { transform:translateX(var(--sri-x)); }
  70% { transform:translate(var(--sri-x),calc(var(--sri-y) / 2)) scale(.89); }
  90%,100% { transform:translate(var(--sri-x),var(--sri-y)); }
}
@keyframes sri-relief {
  from { opacity:0; transform:translateY(12%) scale(.91); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes sri-assemble {
  from { opacity:0; transform:translate(var(--sri-dx),var(--sri-dy)); }
  30% { opacity:1; }
  to { opacity:1; transform:translate(0,0); }
}
@media (prefers-reduced-motion:reduce) {
  .sri-layer[data-phase] .sri-slot .sri-specimen,
  .sri-layer[data-phase] .sri-slot .sri-cover { animation:none; }
  .sri-layer[data-phase=cover] .sri-specimen { visibility:hidden; }
  .sri-layer[data-phase=mix] .sri-cover,.sri-layer[data-theme=compass][data-phase=cover] .sri-cover { opacity:1; }
}