/* $$P Fortune v50 | last, page-scoped layer after the shared design system.
   All controls and economy stay in game.js. Motion affects visuals only. */
.fortune-page {
  --f50-gold: #e9c784;
  --f50-light: #f8e9c6;
  --f50-green: #58e7ba;
  --f50-border: rgba(245, 217, 150, .23);
  --f50-glass: rgba(14, 26, 23, .84);
  --f50-ease: cubic-bezier(.22,1,.36,1);
  color: #f6f3ea;
  background:
    radial-gradient(ellipse 65% 34% at 50% 2%, rgba(66,128,108,.23), transparent 95%),
    radial-gradient(ellipse 36% 25% at 96% 62%, rgba(190,137,59,.10), transparent 90%),
    linear-gradient(180deg,#080e0d 0%,#050807 44%,#070b09 100%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, system-ui, sans-serif;
}
.fortune-page::before {
  opacity: .24;
  background: linear-gradient(110deg,transparent 10%,rgba(255,255,255,.018) 50%,transparent 90%);
}
.fortune-page header {
  min-width: 0;
  height: 76px;
  padding-inline: clamp(13px,4vw,60px);
  border-bottom: 1px solid rgba(237,208,141,.16);
  background: rgba(6,12,10,.82);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.fortune-page header .brand,
.fortune-page header .top-actions { min-width: 0; }
.fortune-page .brand-coin {
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(242,204,128,.08), 0 9px 18px rgba(0,0,0,.35);
}
.fortune-page .brand span:last-child { line-height: 1.2; }
.fortune-page .brand small { color:#d4b680; }
.fortune-page .hub-button,
.fortune-page header .icon-button {
  border:1px solid rgba(241,213,157,.27);
  background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.025));
  color:#f5e9cb;
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 6px 14px #0003;
}
.fortune-page header .icon-button {
  border-radius:14px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
}
.fortune-page main {
  width:min(1160px,calc(100% - 32px));
  max-width:none;
  padding:clamp(24px,2.7vw,38px) 0 0;
}
.fortune-page .stage-title {
  align-items:center;
  margin:0 0 24px;
  padding:0 6px;
  gap:12px;
}
.fortune-page .eyebrow { color:#bfa980; font-weight:700; font-size:10px; letter-spacing:.22em; }
.fortune-page .stage-title h1 {
  font-size:clamp(32px,4.4vw,58px);
  line-height:1.06;
  letter-spacing:-.04em;
  text-shadow:0 10px 26px rgba(0,0,0,.4);
}
.fortune-page .stage-title h1 em {
  background:linear-gradient(180deg,#fff4d6 10%,#eac078 58%,#a16b38);
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}
.fortune-page .seal {
  padding:10px 15px;
  border:1px solid rgba(235,201,132,.18);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  color:#b5bdad;
  font-weight:600;
}
.fortune-page .machine {
  min-width:0;
  isolation:isolate;
  overflow:visible;
  border:1px solid rgba(247,206,126,.58);
  border-radius:30px;
  background:linear-gradient(145deg,#152520 0%,#08100d 48%,#17201a 100%);
  box-shadow:
    0 0 0 5px #050b09,
    0 0 0 6px rgba(236,194,114,.25),
    0 30px 78px rgba(0,0,0,.68),
    inset 0 1px rgba(255,241,194,.2),
    0 0 70px rgba(62,191,140,.08);
}
.fortune-page .machine::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(ellipse 65% 30% at 50% 0%,rgba(248,207,133,.11),transparent);
}
.fortune-page .machine-crown { top:-20px; filter:drop-shadow(0 8px 16px #0008); }
.fortune-page .machine-crown b {
  padding:7px 27px;
  border:1px solid #f7e7b5;
  border-radius:999px;
  background:linear-gradient(145deg,#ffeabd,#e3b662 62%,#94692d);
  color:#35220d;
  letter-spacing:.12em;
}
.fortune-page .machine-crown span { background:linear-gradient(90deg,transparent,#d3a65d); }
.fortune-page .machine-top {
  min-width:0;
  height:clamp(115px,11vw,145px);
  border-radius:29px 29px 0 0;
  background:
    radial-gradient(ellipse at 50% 105%,rgba(53,188,138,.16),transparent 60%),
    linear-gradient(105deg,#0a1411,#25382e 48%,#0a1511);
  border-bottom:1px solid rgba(240,204,137,.19);
}
.fortune-page .machine-top > p { color:#9daea4; }
.fortune-page .machine-top small,
.fortune-page .machine-top div p { color:#e3c794; }
.fortune-page .machine-top h2 {
  color:#fff0ce;
  text-shadow:0 5px 22px rgba(232,178,85,.16);
  letter-spacing:.035em;
}
.fortune-page .machine-top h2 span { color:#67efbd; }
.fortune-page .tiger { filter:drop-shadow(0 12px 14px #0009); }
.fortune-page .feature-strip {
  min-height:37px;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-bottom:1px solid rgba(235,204,140,.13);
  background:linear-gradient(90deg,#0c1612,#13201a,#0c1612);
  color:#b3bfae;
  font-size:clamp(8px,.83vw,11px);
  letter-spacing:.065em;
}
.fortune-page .feature-strip b { color:#efcf94; }
.fortune-page .reel-frame {
  min-width:0;
  overflow:hidden;
  padding:clamp(12px,1.4vw,18px);
  gap:12px;
  background:
    radial-gradient(ellipse 60% 105% at 50% 50%,rgba(65,123,91,.24),transparent 90%),
    linear-gradient(180deg,#0d1813,#050a08);
  box-shadow:inset 0 6px 24px rgba(0,0,0,.5),inset 0 -1px rgba(239,195,114,.13);
}
.fortune-page .reel-frame::after {
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 18%,transparent 75%,rgba(255,229,165,.035));
}
.fortune-page .side-ornament {
  flex:0 0 28px;
  width:28px;
  margin:5px 0;
  border:1px solid rgba(236,204,136,.62);
  border-radius:11px;
  color:#6c4b20;
  font-size:20px;
  background:linear-gradient(160deg,#ffe5a0,#ae7c37);
  box-shadow:inset 0 1px #fff9cf80,0 2px 12px #0008;
}
.fortune-page .reels {
  min-width:0;
  max-width:700px;
  padding:0;
  gap:clamp(5px,.7vw,10px);
}
.fortune-page .reel {
  min-width:0;
  gap:clamp(5px,.6vw,8px);
  padding:clamp(5px,.6vw,9px);
  border:1px solid rgba(240,210,143,.45);
  border-radius:16px;
  background:linear-gradient(165deg,#1b2821,#090e0b);
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 8px 20px rgba(0,0,0,.3);
}
.fortune-page .reel .cell {
  min-width:0;
  aspect-ratio:1.12;
  border:1px solid rgba(245,215,158,.32);
  border-radius:11px;
  background:radial-gradient(ellipse at 35% 24%,#fff6dc,#f1daaa 54%,#a67e43 125%);
  box-shadow:inset 0 1px rgba(255,255,255,.84),inset 0 -7px 14px rgba(92,63,24,.18);
  transition:box-shadow .22s ease,filter .22s ease;
}
.fortune-page .reel .cell img {
  width:81%;
  height:81%;
  max-width:81%;
  max-height:81%;
  object-fit:contain;
  filter:drop-shadow(0 5px 6px rgba(59,40,23,.27));
}
.fortune-page .cell.winning {
  border-color:#fff4ba;
  box-shadow:inset 0 0 24px rgba(255,246,164,.6),0 0 0 2px #f7df91,0 0 28px rgba(255,232,118,.55);
}
.fortune-page .reels.spinning .cell {
  filter:none !important;
  animation:fortune-v50-step .16s var(--f50-ease) both !important;
}
.fortune-page .reels.spinning .reel:nth-child(2) .cell {animation-delay:16ms !important;}
.fortune-page .reels.spinning .reel:nth-child(3) .cell {animation-delay:32ms !important;}
@keyframes fortune-v50-step {
  0%{opacity:.79;transform:translate3d(0,-6px,0) scale(.978)}
  67%{opacity:1;transform:translate3d(0,2px,0) scale(1.008)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
.fortune-page .message {
  min-height:44px;
  display:grid;
  place-items:center;
  padding:10px 16px;
  border-block:1px solid rgba(245,207,141,.13);
  background:rgba(8,16,12,.96);
  color:#d7e3d4;
  font-size:clamp(11px,.96vw,14px);
  letter-spacing:.01em;
  text-wrap:balance;
}
.fortune-page .machine .controls {
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.16fr) minmax(144px,1.3fr) minmax(70px,.57fr) minmax(70px,.57fr) minmax(0,1fr) !important;
  gap:clamp(8px,1vw,14px) !important;
  margin:0 12px 10px;
  padding:clamp(12px,1.45vw,19px);
  border:1px solid rgba(236,211,156,.15);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.024));
  box-shadow:inset 0 1px rgba(255,255,255,.1);
}
.fortune-page .machine .controls > * {min-width:0;}
.fortune-page .metric,.fortune-page .bet {min-width:0;}
.fortune-page .metric span,.fortune-page .bet > span {
  margin-bottom:7px;
  color:#b9c8b8;
  font-size:clamp(9px,.7vw,11px);
  letter-spacing:.11em;
  font-weight:700;
}
.fortune-page .metric strong,.fortune-page .bet strong {
  min-width:0;
  max-width:100%;
  display:block;
  color:#fff0c7;
  font-size:clamp(11px,1.26vw,18px);
  font-weight:850;
  line-height:1.3;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.fortune-page .bet > div {min-width:0;justify-content:space-between;gap:5px;}
.fortune-page .bet button {
  width:36px;height:36px;flex:0 0 36px;
  border-radius:12px;
  border:1px solid rgba(241,203,135,.33);
  background:linear-gradient(145deg,#29362e,#101a14);
  color:#f6d69c;
  font-size:23px;
  font-weight:600;
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 6px 10px #0003;
}
.fortune-page .spin {
  position:relative;
  isolation:isolate;
  min-width:0;
  min-height:59px;
  border:1px solid #c2ffe3;
  border-radius:17px;
  background:linear-gradient(145deg,#9bffdd 0%,#46d9a4 46%,#108b62 100%);
  box-shadow:inset 0 1px #e3fff6,0 5px 20px rgba(39,224,157,.22),0 0 0 3px rgba(75,232,172,.12);
  color:#062b20;
  font-size:clamp(13px,1.15vw,17px);
  font-weight:900;
  letter-spacing:.085em;
  transition:transform .2s var(--f50-ease),box-shadow .2s var(--f50-ease),filter .2s;
}
.fortune-page .spin > span {font-size:clamp(21px,1.8vw,26px);vertical-align:middle;}
.fortune-page .spin.free {
  border-color:#fff4c1;
  background:linear-gradient(150deg,#ffebb2,#f0bc5c,#aa7525);
  color:#322007;
}
.fortune-page .spin:not(:disabled):hover {
  transform:translateY(-2px);
  filter:brightness(1.04);
  box-shadow:inset 0 1px #e3fff6,0 10px 23px rgba(39,224,157,.3),0 0 0 4px rgba(75,232,172,.12);
}
.fortune-page .spin:not(:disabled):active {transform:scale(.975);}
.fortune-page .machine .controls > #turbo,
.fortune-page .machine .controls > .auto-spin {
  min-width:0;
  min-height:43px;
  padding:8px 6px;
  border:1px solid rgba(241,210,151,.22);
  border-radius:14px;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px rgba(255,255,255,.07);
  color:#e7d0a7;
  font-size:clamp(9px,.68vw,11px);
  letter-spacing:.03em;
  transition:background .2s,color .2s,transform .2s;
}
.fortune-page .controls > #turbo.on,
.fortune-page .controls > .auto-spin.on {
  background:linear-gradient(140deg,#91f5d0,#24af7b);
  color:#09251b;
  border-color:#b7ffe3;
}
.fortune-page .machine-footer {
  min-width:0;
  flex-wrap:wrap;
  gap:10px;
  border-top:1px solid rgba(241,207,146,.16);
  background:#0b1410;
  color:#c8b08b;
  border-radius:0 0 29px 29px;
}
.fortune-page .machine-footer button {
  padding:6px 9px;
  color:#e6d2a6;
  border-radius:8px;
}
.fortune-page .symbols-bar {
  min-width:0;
  gap:clamp(10px,1.4vw,20px);
  margin:30px 0;
  padding:18px;
  border:1px solid var(--f50-border);
  border-radius:22px;
  background:linear-gradient(130deg,rgba(32,48,38,.74),rgba(8,13,10,.86));
  box-shadow:inset 0 1px rgba(255,255,255,.06);
}
.fortune-page .symbol-intro,.fortune-page .symbol-item {min-width:0;}
.fortune-page .symbol-item div {min-width:0;}
.fortune-page .symbol-intro h2 {font-size:clamp(15px,1.25vw,20px);}
.fortune-page .symbol-item img {
  flex-shrink:0;
  border:1px solid rgba(243,218,167,.45);
  box-shadow:0 4px 14px #0006;
}
.fortune-page .symbol-item small {color:#b9c7b7;line-height:1.4;}
.fortune-page .paytable {
  flex-shrink:0;
  border:1px solid rgba(237,207,149,.35);
  border-radius:13px;
  background:rgba(255,255,255,.06);
  color:#f4e1b7;
  font-weight:700;
}
.fortune-page dialog {
  border:1px solid rgba(237,201,136,.53);
  border-radius:24px;
  background:linear-gradient(150deg,#1b2b23,#0b140f);
  color:#eee6d5;
  box-shadow:0 20px 100px #000d;
  overscroll-behavior:contain;
}
.fortune-page dialog::backdrop {background:rgba(2,5,4,.82);backdrop-filter:blur(6px);}
.fortune-page :is(button,a,[role="button"]):focus-visible {
  outline:3px solid #9ff7d7 !important;
  outline-offset:3px !important;
}
@media (max-width:1050px){
  .fortune-page .machine .controls {grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:11px !important;}
  .fortune-page .machine .controls .metric:first-child {grid-column:1;grid-row:1;}
  .fortune-page .machine .controls .bet {grid-column:2;grid-row:1;}
  .fortune-page .machine .controls .last {grid-column:1;grid-row:2;text-align:left;}
  .fortune-page .machine .controls .spin {grid-column:2;grid-row:2;}
  .fortune-page .machine .controls #turbo {grid-column:1;grid-row:3;}
  .fortune-page .machine .controls .auto-spin {grid-column:2;grid-row:3;}
  .fortune-page .machine .controls :is(.metric strong,.bet strong){font-size:clamp(12px,2.3vw,19px);}
  .fortune-page .symbols-bar {flex-wrap:wrap;}
}
@media (max-width:620px){
  .fortune-page header {height:62px;padding-inline:12px;}
  .fortune-page .brand {font-size:12px;letter-spacing:.05em;gap:8px;}
  .fortune-page .brand-coin {width:37px;height:37px;font-size:13px;}
  .fortune-page .brand small {font-size:8px;letter-spacing:.08em;}
  .fortune-page header .top-actions {gap:6px;}
  .fortune-page .hub-button {min-height:34px;padding:0 9px;font-size:9px;letter-spacing:0;}
  .fortune-page header .icon-button {width:34px;height:34px;border-radius:10px;font-size:17px;}
  .fortune-page main {width:calc(100% - 18px);padding-top:27px;}
  .fortune-page .stage-title {margin-bottom:21px;padding-inline:6px;}
  .fortune-page .stage-title h1 {font-size:clamp(30px,9vw,39px);}
  .fortune-page .machine {border-radius:20px;box-shadow:0 0 0 3px #050b09,0 0 0 4px rgba(236,194,114,.24),0 22px 48px #000b;}
  .fortune-page .machine-top {height:108px;border-radius:20px 20px 0 0;padding-inline:10px;}
  .fortune-page .machine-crown span {width:36px;}
  .fortune-page .machine-top h2 {font-size:clamp(25px,7.2vw,33px);}
  .fortune-page .feature-strip {min-height:35px;padding-inline:9px;font-size:8px;gap:8px;}
  .fortune-page .reel-frame {padding:9px 6px;gap:5px;}
  .fortune-page .side-ornament {flex-basis:12px;width:12px;font-size:9px;border-radius:5px;}
  .fortune-page .reels {gap:4px;}
  .fortune-page .reel {gap:3px;padding:3px;border-radius:9px;}
  .fortune-page .reel .cell {aspect-ratio:.93;border-radius:7px;}
  .fortune-page .reel .cell img {width:84%;height:84%;max-width:84%;max-height:84%;}
  .fortune-page .message {min-height:45px;padding:8px;font-size:11px;}
  .fortune-page .machine .controls {margin:0 7px 8px;padding:11px;gap:10px !important;border-radius:16px;}
  .fortune-page .metric span,.fortune-page .bet > span {font-size:9px;letter-spacing:.06em;}
  .fortune-page .machine .controls :is(.metric strong,.bet strong) {
    font-size:clamp(11px,3.1vw,16px);
    letter-spacing:-.06em;
    line-height:1.3;
    overflow-wrap:anywhere;
  }
  .fortune-page .bet > div {gap:4px;}
  .fortune-page .bet button {width:31px;height:33px;flex-basis:31px;font-size:21px;border-radius:10px;}
  .fortune-page .spin {min-height:54px;border-radius:14px;font-size:13px;letter-spacing:.03em;}
  .fortune-page .machine-footer {padding:9px 10px;border-radius:0 0 20px 20px;font-size:9px;letter-spacing:0;}
  .fortune-page .symbols-bar {padding:14px;border-radius:17px;gap:12px;}
  .fortune-page .symbol-intro {display:block;width:100%;}
  .fortune-page .symbol-item {flex:1 1 44%;max-width:100%;}
  .fortune-page .symbol-item img {width:38px;height:38px;}
  .fortune-page .paytable {width:100%;}
}
@media (max-width:375px){
  .fortune-page .machine .controls {padding:9px;gap:7px !important;}
  .fortune-page .brand small {display:none;}
  .fortune-page .hub-button {font-size:8px;padding-inline:7px;}
  .fortune-page .metric strong,.fortune-page .bet strong {font-size:10.5px !important;}
  .fortune-page .feature-strip {letter-spacing:0;font-size:7px;}
}
@media (hover:hover) and (pointer:fine){
  .fortune-page .bet button:not(:disabled):hover,
  .fortune-page .controls > #turbo:not(:disabled):hover,
  .fortune-page .auto-spin:not(:disabled):hover {transform:translateY(-2px);border-color:#f2dda5;}
}
/* Keep the main GIRAR action visible on normal-height laptop monitors.
   Taller screens retain the more cinematic spacing and reel sizing. */
@media (min-width:761px) and (max-height:950px) {
  .fortune-page header { height:65px!important; }
  .fortune-page main { padding-top:11px!important; }
  .fortune-page .stage-title { margin-bottom:12px!important; }
  .fortune-page .stage-title h1 { font-size:clamp(30px,3.4vw,43px)!important; }
  .fortune-page .machine-top { height:102px!important; }
  .fortune-page .feature-strip { min-height:27px; padding-block:5px; }
  .fortune-page .reel-frame { padding:9px 11px; }
  .fortune-page .reel .cell { height:88px!important; aspect-ratio:auto!important; }
  .fortune-page .message { min-height:32px; padding:7px 12px; }
  .fortune-page .machine .controls { padding:10px 14px; margin-bottom:6px; }
  .fortune-page .spin { min-height:52px; }
}
@media (prefers-reduced-motion:reduce){
  .fortune-page .reels.spinning .cell,
  .fortune-page .reel .cell.winning,
  .fortune-page .max-win.jackpot .golden-burst img {animation:none !important;}
  .fortune-page .machine *,
  .fortune-page .symbols-bar * {transition:none !important;scroll-behavior:auto !important;}
}

/* v51 — consistent circular symbol medals on restrained, neutral trays.
   Existing source images include varied square backplates. Clip each within
   a true 1:1 round medallion instead of stretching it to a cell-sized oval. */
.fortune-page #reels { grid-template-columns:repeat(3,minmax(0,1fr)); }
.fortune-page #reels .reel {
  position:relative;
  min-width:0;
  overflow:hidden;
  isolation:isolate;
}
.fortune-page #reels .reel .cell {
  min-width:0;
  min-height:0;
  aspect-ratio:1.09;
  overflow:hidden;
  border:1px solid #e7ca8552;
  border-radius:clamp(9px,1.1vw,15px);
  background:
    radial-gradient(ellipse at 50% 37%,#304b3d 0%,#172720 62%,#101a17 100%);
  box-shadow:inset 0 1px #ffffff19,inset 0 -3px 9px #0005;
}
.fortune-page #reels .reel .cell .symbol-medal,
.fortune-page #reels .reel .spin-face .symbol-medal {
  position:relative;
  display:grid;
  flex:0 1 auto;
  place-items:center;
  width:min(76%,108px);
  max-height:calc(100% - 17px);
  height:auto;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border:clamp(1.5px,.2vw,3px) solid #f4d99c;
  border-radius:50%;
  background:radial-gradient(circle at 32% 20%,#fae8b3 0%,#d4a85a 59%,#795124 100%);
  box-shadow:inset 0 2px 3px #fff8,0 0 0 2px #090f0ba8,0 5px 10px #0007;
  transform:none;
}
.fortune-page #reels .reel .cell .symbol-medal img,
.fortune-page #reels .reel .spin-face .symbol-medal img {
  display:block;
  width:100% !important;
  height:100% !important;
  min-width:100%;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:1 / 1;
  margin:0;
  padding:0;
  border:0;
  border-radius:50% !important;
  object-fit:cover;
  object-position:center;
  filter:none;
  box-shadow:none;
}
.fortune-page #reels .reel .cell small {
  z-index:1;
  left:3px;
  right:3px;
  bottom:3px;
  max-width:calc(100% - 6px);
  padding:2px 3px;
  border:1px solid #dfc88a23;
  border-radius:6px;
  background:#07120ee5;
  color:#f4e4bc;
  font-size:clamp(6px,.65vw,9px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 1px #000;
}
.fortune-page #reels .cell.golden-cell {
  background:radial-gradient(circle at 50% 28%,#5b4620,#1b1b12 80%);
  border-color:#ffe293;
}
.fortune-page #reels .cell.golden-cell .symbol-medal {
  border-color:#ffe88d;
  box-shadow:0 0 0 2px #392810,0 0 18px #fbd26490;
}
.fortune-page #reels .cell.negative-cell {
  background:radial-gradient(circle at 50% 28%,#54302c,#201713 80%);
  border-color:#e7ae86;
}
.fortune-page #reels .cell.winning {
  border-color:#ffe9a6;
  box-shadow:inset 0 0 13px #f9d97955,0 0 0 2px #f6dc8b,0 0 16px #ffdf85a6;
}

/* The strip is a purely decorative sibling of the 3 authoritative cells.
   Transforming one layer per reel avoids continuously rebuilding 9 cells,
   invalidating labels or triggering image decode on every spin frame. */
.fortune-page #reels.spinning .reel .cell {
  filter:none !important;
  transform:none !important;
  animation:none !important;
}
.fortune-page #reels .reel-spin-veil {
  position:absolute;
  z-index:4;
  inset:clamp(3px,.6vw,9px);
  overflow:hidden;
  border-radius:10px;
  background:#111d17;
  pointer-events:none;
  opacity:1;
  transition:opacity .13s ease-out;
  contain:paint;
}
.fortune-page #reels .reel-spin-veil.is-stopping {opacity:0;}
.fortune-page #reels .reel-spin-track {
  display:grid;
  grid-template-rows:repeat(12,minmax(0,1fr));
  width:100%;
  height:400%;
  transform:translate3d(0,0,0);
  animation:fortune-v51-roll .52s linear infinite;
  will-change:transform;
}
.fortune-page #reels .reel:nth-child(2) .reel-spin-track {animation-duration:.58s;}
.fortune-page #reels .reel:nth-child(3) .reel-spin-track {animation-duration:.64s;}
.fortune-page.turbo-mode #reels .reel-spin-track,
html.turbo-mode .fortune-page #reels .reel-spin-track {animation-duration:.32s;}
.fortune-page #reels .reel-spin-veil.is-stopping .reel-spin-track {animation-play-state:paused;}
.fortune-page #reels .spin-face {
  display:flex;
  position:relative;
  min-height:0;
  min-width:0;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-block:1px solid #e8d19724;
  background:radial-gradient(ellipse at 50% 35%,#2a4134,#15211b 78%);
}
.fortune-page #reels .spin-face .symbol-medal {
  width:min(67%,92px);
  max-height:85%;
  box-shadow:0 0 0 2px #132219,0 5px 12px #0008;
}
.fortune-page #reels .spin-face small {display:none;}
@keyframes fortune-v51-roll {
  from {transform:translate3d(0,0,0);}
  to {transform:translate3d(0,-50%,0);}
}
@media (max-width:620px) {
  .fortune-page #reels .reel {gap:3px;padding:3px;border-radius:10px;}
  .fortune-page #reels .reel .cell {aspect-ratio:.94;border-radius:8px;}
  .fortune-page #reels .reel .cell .symbol-medal {width:72%;max-height:calc(100% - 13px);border-width:1.5px;}
  .fortune-page #reels .reel .cell small {font-size:6px;padding:1px 2px;bottom:2px;}
  .fortune-page #reels .reel-spin-veil {inset:3px;border-radius:7px;}
  .fortune-page #reels .spin-face .symbol-medal {width:71%;}
}
@media (max-width:375px) {
  .fortune-page #reels .reel .cell .symbol-medal {width:68%;max-height:calc(100% - 12px);}
  .fortune-page #reels .reel .cell small {font-size:5.5px;}
}
/* Existing short-desktop mode fixes each cell to 88px. Keep the medallion
   diameter below the cell's AVAILABLE HEIGHT, never an oval at 768/1440px. */
@media (min-width:761px) and (max-height:950px) {
  .fortune-page #reels .reel .cell .symbol-medal {
    width:min(65px,70%);
    max-height:65px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .fortune-page #reels .reel-spin-track {animation:none !important;will-change:auto;}
  .fortune-page #reels .reel-spin-veil {display:none !important;transition:none !important;}
  .fortune-page #reels .cell.winning {animation:none !important;}
}