/* Authored plates, uniform fit and explicit contact anchors. Wood frames use
   intentional nine-slice resizing; character, wheel and plates preserve aspect. */
.game{grid-template-rows:6% 39% 10% 32% 10% 3%}
.header-art{position:absolute;object-fit:contain;z-index:0;max-width:100%;max-height:100%}
.hero-stage .mascot{z-index:3;filter:drop-shadow(0 2px 2px #0008)}
.hero-stage .ambient-wheel{z-index:2;filter:drop-shadow(0 2px 4px #0005)}
.stage-frame{position:absolute;z-index:5;pointer-events:none;border:12px solid transparent;border-image:url('../assets/raccoon/vault-frame.webp') 170 stretch;filter:drop-shadow(0 4px 3px #0009)}
.number-accessible{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.drawn-number{display:flex;align-items:center;justify-content:center;gap:calc(var(--digit)*.025);height:var(--digit);filter:drop-shadow(0 1px 1px #100800)}
.drawn-number i{display:block;flex:none;height:var(--digit);width:calc(var(--digit)*var(--gw)/240);background-image:url('../assets/shared/win-numerals.webp');background-size:calc(var(--digit)*2128/240) var(--digit);background-position:calc(var(--digit)*var(--gx)/-240) 0;background-repeat:no-repeat}
.symbol-amount.has-drawn-number{left:50%;right:auto;width:calc(var(--symbol-size)*.66);transform:translateX(-50%)}
.credit-well,.bet-well,.win-well{border:6px solid transparent;border-image:url('../assets/raccoon/vault-frame.webp') 170 stretch;border-radius:0;background:#081c26e6;box-shadow:0 3px 5px #0008}
.reel-spin{position:absolute;overflow:hidden;background:#091522;z-index:8;pointer-events:none}
.reel-track{height:200%;display:flex;flex-direction:column;animation:reel-run .21s linear infinite;filter:blur(1.1px)}
.reel-track img{width:100%;height:16.66667%;flex:none;object-fit:contain;padding:2px}
.reel-spin.anticipating{box-shadow:inset 0 0 14px #ffbe4b,0 0 15px #ffbe4b88}.reel-spin.anticipating .reel-track{animation-duration:.085s;filter:blur(2px)}
@keyframes reel-run{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.jackpots{padding:0 17%;position:relative;gap:0;z-index:7;isolation:isolate}
.jackpots:before{content:'';position:absolute;left:17%;right:17%;bottom:0;height:100%;background:url('../assets/raccoon/jackpot-beam.webp') center / cover;box-shadow:0 3px 6px #000a;z-index:-1;border-radius:5px}
.board-zone{padding:0 17%}
.cabinet{border:18px solid transparent;border-image:url('../assets/raccoon/vault-frame.webp') 170 stretch;padding:2px;gap:0;border-radius:0;background:linear-gradient(#050b1577,#050b1577),url('../assets/raccoon/vault-interior.webp') center/cover;box-shadow:0 7px 15px #0009;overflow:visible}
.cell{background:transparent;border:0;border-right:1px solid #ad986e30;border-bottom:1px solid #ad986e22;border-radius:0}
.cell:nth-child(5n){border-right:0}.cell:nth-child(n+11){border-bottom:0}
.cell[data-kind="super"]{box-shadow:inset 0 0 12px #efbd612b}
.matrix-board{gap:12px}.vault-title{background:linear-gradient(#623f22,#291f1a);border:1px solid #af8a4d;color:#efcf94;border-radius:5px 5px 0 0}
.vault .cabinet{border:9px solid transparent;border-image:url('../assets/raccoon/vault-frame.webp') 170 stretch;gap:0;padding:1px;border-radius:0}
.vault .cell:nth-child(n+11){border-bottom:1px solid #ad986e22}.vault .cell:nth-child(n+16){border-bottom:0}
.vault-door{background:linear-gradient(#07101977,#07101999),url('../assets/raccoon/vault-interior.webp') center/cover;border:9px solid transparent;border-image:url('../assets/raccoon/vault-frame.webp') 170 stretch;border-radius:0;box-shadow:none}
.vault-door strong{color:#dac08b}.vault-door small{color:#c6d5d4}
.game[data-mode="super"],.game[data-mode="hold"]{background:linear-gradient(#06141b88,#06141b88),url('../assets/raccoon/vault-interior.webp') center/cover;grid-template-rows:6% 9% 12% 55% 14% 4%}
.game[data-mode="super"] .jackpots,.game[data-mode="hold"] .jackpots{padding:0 10%}.game[data-mode="super"] .jackpots:before,.game[data-mode="hold"] .jackpots:before{left:10%;right:10%}.game[data-mode="super"] .board-zone,.game[data-mode="hold"] .board-zone{padding:0 10%}
@media(orientation:portrait){
 .game{grid-template-rows:4% 29% 10% 38% 15% 4%}
 .hero-stage{padding:0}.jackpots{padding:0 2%}.jackpots:before{left:2%;right:2%}.board-zone{padding:0 2%}.cabinet{border-width:12px}.controls{padding-top:4px}
 .game[data-mode="super"],.game[data-mode="hold"]{grid-template-rows:4% 9% 11% 57% 15% 4%}
 .game[data-mode="super"] .jackpots,.game[data-mode="hold"] .jackpots{padding:0 2%}.game[data-mode="super"] .jackpots:before,.game[data-mode="hold"] .jackpots:before{left:2%;right:2%}.game[data-mode="super"] .board-zone,.game[data-mode="hold"] .board-zone{padding:0 2%}
 .matrix-board{gap:8px}.vault .cabinet,.vault-door{border-width:7px}.wheel-scene{inset:4% 0 19%}
}
@media(max-height:500px) and (orientation:landscape){
 .game{grid-template-rows:8% 32% 12% 30% 14% 4%}.board-zone{padding:0 18%}.jackpots{padding:0 18%}.jackpots:before{left:18%;right:18%}.cabinet{border-width:10px}
 .game[data-mode="super"],.game[data-mode="hold"]{grid-template-rows:8% 9% 13% 51% 15% 4%}.matrix-board{gap:5px}.vault .cabinet,.vault-door{border-width:6px}
}



/* Continuous downward travel, followed by an outcome-only braking strip. */
.reel-track{height:533.333333%;animation-duration:.55s}
.reel-track>img{height:6.25%}
.reel-spin.anticipating .reel-track{animation-duration:.30s}
.reel-track.settling{height:200%;animation:none;filter:none}
.reel-track.settling>.cell{height:16.666667%;flex:none;background:transparent;border:0;border-radius:0}

.reel-track.authored-strip{animation:none;filter:none;will-change:transform}
.reel-track.authored-strip>.cell{background:transparent;border:0;border-radius:0}
.feature-strip{inset:0;width:100%;height:100%;background:#09152288}
.cell.anticipation-symbol{box-shadow:inset 0 0 16px #efc96088}.anticipation-symbol .symbol{filter:drop-shadow(0 0 5px #ffe092)}
.cell[data-kind="prize"]:has(.symbol){isolation:isolate}.cell[data-kind="prize"]:has(.symbol):before{content:'';position:absolute;width:91%;aspect-ratio:1;border-radius:50%;z-index:0;background-image:url('../assets/raccoon/raccoon.webp'),radial-gradient(circle at 34% 25%,#fff6b6 0 6%,#f5bf38 14%,#8b4b0e 54%,#251307 74%);background-size:72% auto,100% 100%;background-position:50% 36%,center;background-repeat:no-repeat;box-shadow:0 0 14px #f5bd3e88,inset 0 0 0 2px #ffe8a0;transform:perspective(130px) rotateX(9deg) rotateY(-10deg)}.cell[data-kind="prize"] .symbol{display:none}.cell[data-kind="prize"] .symbol-amount{z-index:3;border:1px solid #ffd76b;border-radius:999px;background:linear-gradient(180deg,#46236feb,#13081fef);color:#fff3b1;font-family:RaidersPlaque,Georgia,serif;font-weight:900;letter-spacing:.02em;text-shadow:0 2px 1px #150702;filter:drop-shadow(0 2px 1px #150702)}

.cell[data-kind="wild"].is-new{z-index:3}.cell[data-kind="wild"].is-new .symbol{animation:wild-arrival .52s ease-out both}
@keyframes wild-arrival{0%{transform:translate(-50%,-50%) scale(.82);filter:brightness(1.7) drop-shadow(0 0 9px #ffe890)}60%{transform:translate(-50%,-50%) scale(1.08);filter:brightness(1.2) drop-shadow(0 0 9px #ffe890)}100%{transform:translate(-50%,-50%) scale(1);filter:brightness(1) drop-shadow(0 0 0 #ffe89000)}}
.cell.is-win{z-index:3;box-shadow:inset 0 0 0 2px #ffe7a288}

/* Per-symbol idle and win motion (Barak 2026-10-05). Every keyframe keeps translate(-50%,-50%) so symbols stay seated in their cells;
   only scale/rotate/filter change. Reduced motion is handled by the global rule in game.css. */
.game[data-mode="base"] #base-board .cell[data-kind="raccoon"]>.symbol{animation:sym-idle-tilt 5.2s ease-in-out infinite}
.game[data-mode="base"] #base-board .cell[data-kind="fox"]>.symbol{animation:sym-idle-tilt 6.1s ease-in-out -1.7s infinite}
.game[data-mode="base"] #base-board .cell[data-kind="owl"]>.symbol{animation:sym-idle-breathe 4.4s ease-in-out -.9s infinite}
.game[data-mode="base"] #base-board .cell[data-kind="chest"]>.symbol{animation:sym-idle-breathe 5.6s ease-in-out -2.4s infinite}
.game[data-mode="base"] #base-board .cell[data-kind="key"]>.symbol{animation:sym-idle-glint 4.8s ease-in-out -.4s infinite}
.game[data-mode="base"] #base-board .cell[data-kind="map"]>.symbol{animation:sym-idle-tilt 6.8s ease-in-out -3.1s infinite}
.game[data-mode="base"] #base-board .cell[data-kind="lantern"]>.symbol{animation:sym-idle-flicker 2.6s ease-in-out infinite}
@keyframes sym-idle-tilt{0%,100%{transform:translate(-50%,-50%) rotate(0)}50%{transform:translate(-50%,-50%) rotate(1.6deg)}}
@keyframes sym-idle-breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.025)}}
@keyframes sym-idle-glint{0%,80%,100%{transform:translate(-50%,-50%);filter:brightness(1)}90%{transform:translate(-50%,-50%) scale(1.03);filter:brightness(1.28)}}
@keyframes sym-idle-flicker{0%,100%{transform:translate(-50%,-50%);filter:brightness(1)}35%{transform:translate(-50%,-50%);filter:brightness(1.12)}60%{transform:translate(-50%,-50%);filter:brightness(.97)}}
.game #base-board .cell.is-win[data-kind="raccoon"]>.symbol{animation:sym-win-cheer .9s ease-in-out infinite}
.game #base-board .cell.is-win[data-kind="fox"]>.symbol{animation:sym-win-sway .8s ease-in-out infinite}
.game #base-board .cell.is-win[data-kind="owl"]>.symbol{animation:sym-win-pop .7s ease-in-out infinite}
.game #base-board .cell.is-win[data-kind="chest"]>.symbol{animation:sym-win-shake .55s ease-in-out infinite}
.game #base-board .cell.is-win[data-kind="key"]>.symbol{animation:sym-win-spin 1s ease-in-out infinite}
.game #base-board .cell.is-win[data-kind="map"]>.symbol{animation:sym-win-sway 1s ease-in-out infinite}
.game #base-board .cell.is-win[data-kind="lantern"]>.symbol{animation:sym-win-glow .7s ease-in-out infinite}
@keyframes sym-win-cheer{0%,100%{transform:translate(-50%,-50%);filter:brightness(1)}50%{transform:translate(-50%,-50%);filter:brightness(1.15) drop-shadow(0 0 8px #ffe090)}}
@keyframes sym-win-sway{0%,100%{transform:translate(-50%,-50%);filter:drop-shadow(0 0 5px #ffe090)}50%{transform:translate(-50%,-50%);filter:drop-shadow(0 0 8px #ffe090)}}
@keyframes sym-win-pop{0%,100%{transform:translate(-50%,-50%);filter:brightness(1)}50%{transform:translate(-50%,-50%);filter:brightness(1.15) drop-shadow(0 0 8px #ffe090)}}
@keyframes sym-win-shake{0%,100%{transform:translate(-50%,-50%);filter:drop-shadow(0 0 5px #ffd45a)}50%{transform:translate(-50%,-50%);filter:drop-shadow(0 0 8px #ffd45a)}}
@keyframes sym-win-spin{0%,100%{transform:translate(-50%,-50%) scale(1.05) rotate(-8deg);filter:brightness(1.1)}50%{transform:translate(-50%,-50%) scale(1.14) rotate(8deg);filter:brightness(1.35) drop-shadow(0 0 10px #fff0a0)}}
@keyframes sym-win-glow{0%,100%{transform:translate(-50%,-50%) scale(1.03);filter:brightness(1.1) drop-shadow(0 0 6px #ffcf5a)}50%{transform:translate(-50%,-50%) scale(1.09);filter:brightness(1.4) drop-shadow(0 0 16px #ffe28a)}}
