/* Warm cosmic prairie: shared cabinet, four rows, a compact live feature sign. */
.app.stampede::before { background: radial-gradient(ellipse at 50% 25%, #c64d2470, transparent 60%), linear-gradient(#160827, #462039 50%, #120b22); }
.app.stampede { --cell: calc((min(100vw, 520px) - 32px - 34px - 24px) / 5); --stampede-cell-height: min(var(--cell), calc((100dvh - var(--safe-top) - var(--safe-bottom) - 404px) / 4)); }
.stampede .reel { height: calc(var(--stampede-cell-height) * 4); }
.stampede .cell { height: var(--stampede-cell-height); }
.stampede .cell.letter { font-size: calc(var(--stampede-cell-height) * .7); }
.stampede .sym-img { max-height: var(--stampede-cell-height); }
.stampede-sign { flex: 1; min-height: 134px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 4px; position: relative; margin: 5px 0 22px; }
.stampede-sign[hidden] { display: none; }
.stampede-scene { position: absolute; inset: 0; overflow: hidden; z-index: -1; opacity: .7; border-radius: 24px; mask-image: linear-gradient(transparent, #000 15%, #000 50%, transparent 95%); }
.stampede-scene img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.stampede-title { color: #ffe886; font: 22px/1.05 var(--display); text-align: center; text-shadow: 0 2px #741e22, 0 0 16px #ec7413; }
.stampede-jackpots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.stampede-jackpot { min-width: 0; padding: 2px 7px; text-align: center; border: 2px solid #ecc15a; border-radius: 8px; background: linear-gradient(#2e103a, #140821); box-shadow: inset 0 0 8px #cd842844; }
.stampede-jackpot-name { display: block; font: 12px/1.05 var(--display); color: #94e87e; }
.stampede-jackpot.grand .stampede-jackpot-name { color: #ff7572; }
.stampede-jackpot.minor .stampede-jackpot-name { color: #86c6ff; }
.stampede-jackpot.mini .stampede-jackpot-name { color: #ffc374; }
.stampede-jackpot-value { display: block; font: 18px/1.1 var(--display); color: #fff0b2; }
.stampede-hint, .stampede-status { text-align: center; color: #ffe8a5; font: 11px/1.2 var(--display); }
.stampede-meter { display: flex; justify-content: space-between; gap: 5px; padding: 5px 7px; color: #fff0c3; background: #18092ce6; border: 1px solid #c89c55; border-radius: 6px; font: 11px/1.2 var(--display); }
.stampede .reel { background: linear-gradient(#211028, #4d2542 50%, #211028); }
.stampede-herd .sym-face { transform: scale(.8); }
.stampede-herd.locked { background: radial-gradient(#ffd85b45, #11081d); box-shadow: inset 0 0 0 2px #efc65b; }
.stampede-value { position: absolute; bottom: 3%; left: 3%; right: 3%; color: #fff6b3; background: #1b082de8; border: 1px solid #edc05a; border-radius: 7px; padding: 2px; text-align: center; font: 12px/1 var(--display); }
.stampede-dark { background: #0b0619; }
.ns-spinning { background: repeating-linear-gradient(180deg, #10071d 0, #693761 35%, #ffd35c44 50%, #10071d 80%); background-size: 100% 160%; animation: ns-respin .25s linear infinite; }
@keyframes ns-respin { to { background-position: 0 160%; } }
.stampede-coin-face { width: 76%; height: 76%; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px double #fff6a8; color: #ffffb7; font-size: calc(var(--cell) * .5); background: radial-gradient(circle at 35% 25%, #fff4ac, #ebb238 45%, #8c4512); box-shadow: 0 0 8px #ffc43b; text-shadow: 0 2px #aa631e; }
.stampede-tag { position: absolute; bottom: 5%; color: #fff5b2; font: 10px/1 var(--display); text-shadow: 0 1px 3px #310811; }
.letter-9 .glyph { color: #82f765; }
.stampede-show { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: max(20px, var(--safe-top)) 20px max(20px, var(--safe-bottom)); z-index: 25; background: #12071deb; }
.stampede-show.show { display: flex; }
.stampede-show-panel { width: min(100%, 380px); padding: 26px 16px; text-align: center; background: radial-gradient(ellipse at 50% 0, #794338, #270c35 70%); border: 3px solid #ffdb75; border-radius: 22px; box-shadow: 0 0 35px #de824d66; color: #ffeeb3; }
.stampede-show-panel h2 { margin: 0 0 15px; font: 30px/1.1 var(--display); }
.stampede-show-main { font: 42px/1.2 var(--display); overflow-wrap: anywhere; }
.stampede-show-sub { margin: 14px 0; font: 16px/1.3 var(--display); }
.stampede-show-panel button { min-height: 48px; min-width: 150px; padding: 8px 20px; color: #301424; border: 2px solid #fff2a8; border-radius: 12px; background: linear-gradient(#fff0ab, #efb43b); font: 20px/1 var(--display); }
@media (prefers-reduced-motion: reduce) { .ns-spinning { animation: none; } }
