/* COROA — Templo Neon e Urubu Rei no layout clássico de caça-níquel:
   painel à esquerda (bônus, multiplicadores, ganhos do giro), rolos no centro com a faixa de ganho,
   personagem à direita e a barra de comandos embaixo (saldo, aposta, prêmio, botão redondo de girar). */
.sl { --a: #f7c85e; --a2: #ffe7a3; --glow: #4aa8ff; --panel: rgba(6, 10, 24, .82); --line: rgba(247, 200, 94, .35); --bar: rgba(4, 6, 18, .9);
  position: relative; height: 100%; display: flex; flex-direction: column; isolation: isolate; border-radius: 20px; overflow: hidden; }
.sl.rs-urubu { --glow: #ff3b2f; --panel: rgba(22, 6, 6, .84); --line: rgba(255, 170, 60, .42); --bar: rgba(20, 4, 4, .92); }
.sl-bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: 60% 25%; }
.sl-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(4, 6, 18, .25), rgba(4, 6, 18, .78) 75%), linear-gradient(180deg, rgba(4, 6, 18, .2), rgba(4, 6, 18, .65)); }
.sl.rs-urubu .sl-bg::after { background: radial-gradient(ellipse at 50% 45%, rgba(26, 5, 5, .25), rgba(26, 5, 5, .8) 75%), linear-gradient(180deg, rgba(26, 5, 5, .2), rgba(26, 5, 5, .65)); }

.sl-main { flex: 1; min-height: 0; display: grid; grid-template-columns: clamp(170px, 15vw, 220px) minmax(0, 1fr) clamp(200px, 20vw, 300px); gap: 14px; padding: 14px 14px 10px; }

/* ---------- coluna esquerda */
.sl-left { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding-top: 34px; }
.sl-card { padding: 10px; border-radius: 14px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); backdrop-filter: blur(4px); }
.sl-card h5 { margin: 0 0 8px; text-align: center; font: 800 10.5px var(--display); letter-spacing: .12em; color: var(--a2); }
.sl-buy { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 10px; border-radius: 14px; cursor: pointer; color: #fff; text-align: center;
  background: linear-gradient(180deg, #2c1d55, #120a2a); border: 2px solid #ffd84d; box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), 0 0 24px rgba(255, 216, 77, .35), 0 10px 24px rgba(0, 0, 0, .5); }
.sl.rs-urubu .sl-buy { background: linear-gradient(180deg, #5a0f0a, #1f0404); }
.sl-buy::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 236, 170, .35) 50%, transparent 65%); background-size: 250% 100%; animation: slShine 3s linear infinite; }
@keyframes slShine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.sl-buy small { font: 900 12px var(--display); letter-spacing: .14em; color: #ffd84d; display: inline-flex; align-items: center; gap: 4px; }
.sl-buy > b { font: 900 14px var(--display); letter-spacing: .04em; line-height: 1.15; }
.sl-buy > span { margin-top: 4px; width: 100%; padding: 6px 8px; border-radius: 10px; font: 900 20px var(--display); color: #2a1a04; background: linear-gradient(180deg, #fff3c4, #ffd84d 50%, #e09a17); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.sl-buy > span.bump { animation: rbPrice .4s cubic-bezier(.2, 1.8, .4, 1); }
.sl-buy em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #cbb98f; }
.sl-buy:hover { filter: brightness(1.12); }
.sl-buy:active { transform: scale(.97); }
.sl-mults .rs-mults { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sl-mults .rs-mults span { height: 32px; border-radius: 9px; background: linear-gradient(180deg, #2b1a07, #120a02); border: 2px solid #b8862b; }
.sl.rs-urubu .sl-mults .rs-mults span { background: linear-gradient(180deg, #3a0b07, #1d0404); border-color: #a8641a; }
.sl-mults .rs-mults b { font-family: var(--display); font-size: 15px; color: #fff3c4; }
.sl-hist { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#slHist { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
#slHist p { margin: auto 0; text-align: center; font-size: 11.5px; color: #8d96ad; }
.sl-hrow { display: grid; grid-template-columns: 22px 30px 1fr; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, .05); animation: fadein .3s; }
.sl-hrow span { font: 900 14px var(--display); color: #fff; }
.sl-hrow img { width: 30px; height: 30px; object-fit: contain; }
.sl-hrow b { text-align: right; font: 800 13px var(--display); color: var(--a2); }

/* ---------- centro: faixa de ganho + rolos */
.sl-stage { display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 0; }
.sl-banner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; min-width: min(300px, 70%); padding: 3px 26px 5px; margin-bottom: -6px; border-radius: 12px 12px 4px 4px; text-align: center;
  background: linear-gradient(180deg, #3a2306, #1a0e02); border: 2px solid #e0a83a; box-shadow: 0 0 18px rgba(247, 200, 94, .35); }
.sl.rs-urubu .sl-banner { background: linear-gradient(180deg, #4a0c08, #1f0303); }
.sl-banner small { font: 900 11px var(--display); letter-spacing: .14em; color: var(--a2); }
.sl-banner b { font: 900 clamp(18px, 2vw, 24px) var(--display); color: #fff; line-height: 1.05; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(255, 216, 77, .5); }
.sl-banner b.pop { animation: rbPop .45s cubic-bezier(.2, 1.8, .4, 1); }
.sl-stage .rs-fit { flex: 1; width: 100%; }

/* ---------- direita: logo + personagem */
.sl-right { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.sl-logo { display: flex; flex-direction: column; align-items: center; line-height: .88; font-family: var(--serif); font-weight: 900; text-align: center; }
.sl-logo b { font-size: clamp(28px, 3vw, 50px); background: linear-gradient(180deg, #fff7d1 5%, #f7c85e 45%, #a8680e 80%, #f5d27a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #3b2205); }
.sl-logo em { font-style: normal; font-size: clamp(30px, 3.3vw, 54px); }
.sl.rs-templo .sl-logo em { color: #c9f4ff; -webkit-text-stroke: 2px #2a8cff; text-shadow: 0 0 10px #39a0ff, 0 0 24px #5b6bff, 0 0 44px #a64dff; }
.sl.rs-urubu .sl-logo em { background: linear-gradient(180deg, #ff8a7a, #e0151b 55%, #7a0508); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #3b0404) drop-shadow(0 0 12px rgba(255, 60, 40, .5)); }
.sl-right .rs-zeus { flex: 1; min-height: 0; }

/* ---------- barra de comandos */
.sl-bar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 8px 18px; background: var(--bar); border-top: 1px solid var(--line); }
.sl-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sl-icons { display: flex; gap: 6px; }
.sl-icons button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #e8ecf6; font-size: 18px; cursor: pointer; }
.sl-icons button:hover { background: rgba(255, 255, 255, .14); }
.sl-nums { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sl-nums span { font: 900 12px var(--display); letter-spacing: .06em; color: var(--a); white-space: nowrap; }
.sl-nums b { margin-left: 6px; color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; }
.sl-msg { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font: 800 15px var(--display); color: #e8ecf6; text-align: center; text-shadow: 0 2px 6px #000; }
.sl-msg span { font: 900 clamp(16px, 1.7vw, 24px) var(--display); letter-spacing: .04em; color: var(--a); }
.sl-msg b { font: 900 clamp(18px, 1.9vw, 26px) var(--display); color: #fff; }
.sl-msg .chip { font: 700 11px var(--body); padding: 2px 8px; border-radius: 20px; background: rgba(255, 255, 255, .08); color: #dfe4f1; }
.sl-play { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.sl-pm { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .35); color: #fff; font-size: 18px; cursor: pointer; }
.sl-pm:hover { background: rgba(255, 255, 255, .14); }
.sl-turbo { display: flex; flex-direction: column; align-items: center; gap: 0; width: 46px; height: 46px; justify-content: center; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .35); color: #9aa3ba; cursor: pointer; }
.sl-turbo i { font-size: 18px; }
.sl-turbo small { font: 900 7.5px var(--display); letter-spacing: .08em; }
.sl-turbo.on { color: #2a1a04; border-color: #fff3c4; background: linear-gradient(180deg, #fff3c4, #ffd84d 55%, #e09a17); box-shadow: 0 0 14px rgba(255, 216, 77, .6); }
.sl-spin { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: -34px; }
.sl .sl-spin .rs-go { display: grid; place-items: center; width: 88px; height: 88px; margin: 0; padding: 0; border-radius: 50%; font-size: 44px; color: #2a1a04;
  background: radial-gradient(circle at 50% 30%, #fff7d1, #ffd84d 45%, #d18a0d 85%); border: 4px solid rgba(255, 255, 255, .85); box-shadow: 0 0 0 4px rgba(0, 0, 0, .45), 0 0 26px rgba(255, 216, 77, .55), 0 8px 18px rgba(0, 0, 0, .55); transition: transform .15s; }
.sl.rs-urubu .sl-spin .rs-go { background: radial-gradient(circle at 50% 30%, #ffe1b0, #ff9a1f 45%, #b3120f 90%); box-shadow: 0 0 0 4px rgba(0, 0, 0, .45), 0 0 26px rgba(255, 90, 40, .55), 0 8px 18px rgba(0, 0, 0, .55); }
.sl .sl-spin .rs-go:hover { transform: scale(1.05); }
.sl .sl-spin .rs-go:active { transform: scale(.94); }
.sl .sl-spin .rs-go.busy i { animation: slSpin .6s linear infinite; }
@keyframes slSpin { to { transform: rotate(360deg); } }
.sl .sl-spin .rs-go.stop { color: #fff; background: radial-gradient(circle at 50% 30%, #ffb3b3, #e5484d 50%, #8a1418); }
.sl .sl-spin .rs-go.stop { grid-template-rows: auto auto; align-content: center; font-size: 28px; }
.sl .sl-spin .rs-go.stop small { font: 900 15px var(--display); line-height: 1; }
.sl-auto { margin-top: -10px; position: relative; z-index: 2; padding: 4px 12px; border-radius: 99px; border: 2px solid rgba(255, 255, 255, .75); background: #0b0f1d; color: #fff; font: 900 10px var(--display); letter-spacing: .08em; cursor: pointer; white-space: nowrap; }
.sl-auto:hover { background: #1b2238; }
.sl-automodal h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.sl-autogrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.sl-autogrid button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 4px; border-radius: 14px; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.sl-autogrid button:hover { border-color: #ffd84d; background: rgba(255, 216, 77, .1); }
.sl-autogrid b { font: 900 24px var(--display); color: #ffd84d; }
.sl-autogrid small { font-size: 11px; color: #9aa3ba; }

/* telas médias: personagem sai, painel continua */
@media (max-width: 1180px) {
  .sl-main { grid-template-columns: clamp(160px, 20vw, 210px) minmax(0, 1fr); }
  .sl-right { display: none; }
}
/* celular / retrato: rolos em cima, bônus e multiplicadores em faixa, barra de comandos embaixo */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .sl { border-radius: 14px; }
  .sl-main { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 4px; }
  .sl-left { order: 2; flex: none; flex-direction: row; gap: 6px; padding: 0; }
  .sl-hist { display: none; }
  .sl-buy { flex: 1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px 8px; padding: 6px 8px; }
  .sl-buy > b { font-size: 12px; }
  .sl-buy > span { width: auto; margin: 0; padding: 3px 10px; font-size: 15px; }
  .sl-buy em { display: none; }
  .sl-mults { flex: 1.2; padding: 6px; }
  .sl-mults h5 { display: none; }
  .sl-mults .rs-mults { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .sl-mults .rs-mults span { height: 24px; }
  .sl-mults .rs-mults b { font-size: 12px; }
  .sl-stage { order: 1; flex: 1; }
  .sl-banner { min-width: 60%; padding: 2px 18px 4px; }
  .sl-banner small { font-size: 9.5px; }
  .sl-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px 10px; padding: 8px 10px 10px; }
  .sl-msg { grid-column: 1 / -1; grid-row: 1; font-size: 13px; min-height: 22px; }
  .sl-msg span { font-size: 14px; } .sl-msg b { font-size: 16px; }
  .sl-info { grid-row: 2; flex-direction: column; align-items: flex-start; gap: 6px; }
  .sl-icons button { width: 32px; height: 32px; font-size: 16px; }
  .sl-play { grid-row: 2; gap: 8px; }
  .sl-spin { margin-top: 0; }
  .sl .sl-spin .rs-go { width: 70px; height: 70px; font-size: 34px; }
  .sl-pm { width: 36px; height: 36px; }
  .sl-turbo { width: 38px; height: 38px; }
  .sl-auto { font-size: 8.5px; padding: 3px 8px; }
  .sl-autogrid { grid-template-columns: 1fr 1fr; }
}
/* celular: ajustes finos (rolos colados na faixa de ganho, comandos em duas linhas sem sobrepor) */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .sl-stage { justify-content: center; }
  .sl-stage .rs-fit { flex: none; aspect-ratio: 5 / 3; height: auto; }
  .sl-mults .rs-mults { display: flex; }
  .sl-mults .rs-mults span { flex: 1; min-width: 0; }
  .sl-bar { grid-template-columns: minmax(0, 1fr); }
  .sl-info { grid-row: 2; flex-direction: row; justify-content: space-between; align-items: center; }
  .sl-nums { align-items: flex-end; }
  .sl-play { grid-row: 3; justify-content: center; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .sl-buy::before, .sl .sl-spin .rs-go.busy i { animation: none; } }

/* ---------- multiplicadores: o sorteado acende, o painel brilha e o ×N voa até a faixa de ganho */
.sl-mults { position: relative; transition: border-color .3s, box-shadow .3s; }
.sl-mults .rs-mults span { overflow: visible; }
.sl-mults.hit { border-color: #ffd84d; box-shadow: 0 0 0 2px rgba(255, 216, 77, .25), 0 0 26px rgba(255, 216, 77, .45), 0 10px 24px rgba(0, 0, 0, .45); animation: slMHit .5s ease-out; }
@keyframes slMHit { 30% { transform: scale(1.05); } }
/* no bônus os multiplicadores ficam mais frequentes: painel "ativo" pulsando e cada valor respirando em sequência */
.sl-mults.on { border-color: #ffd84d; animation: slMOn 1.6s ease-in-out infinite; }
.sl-mults.on h5 { color: #fff3c4; text-shadow: 0 0 10px #ffd84d; }
@keyframes slMOn { 50% { box-shadow: 0 0 0 2px rgba(255, 216, 77, .25), 0 0 30px rgba(255, 216, 77, .5), 0 10px 24px rgba(0, 0, 0, .45); } }
.sl-mults.on .rs-mults span:not(.lit) { animation: slMBreath 1.6s ease-in-out infinite; }
.sl-mults.on .rs-mults span:nth-child(2) { animation-delay: .2s; } .sl-mults.on .rs-mults span:nth-child(3) { animation-delay: .4s; }
.sl-mults.on .rs-mults span:nth-child(4) { animation-delay: .6s; } .sl-mults.on .rs-mults span:nth-child(5) { animation-delay: .8s; }
.sl-mults.on .rs-mults span:nth-child(6) { animation-delay: 1s; } .sl-mults.on .rs-mults span:nth-child(7) { animation-delay: 1.2s; }
@keyframes slMBreath { 50% { border-color: #ffe7a3; box-shadow: 0 0 12px rgba(255, 216, 77, .45); } }
.sl-banner { overflow: visible; }
.sl-bmult { position: absolute; right: -18px; top: 50%; z-index: 4; padding: 2px 10px; border-radius: 10px; font: 900 22px var(--display); font-style: normal; color: #fff;
  background: color-mix(in srgb, var(--mc) 55%, #120a02); border: 2px solid var(--mc); box-shadow: 0 0 18px var(--mc); text-shadow: 0 0 8px var(--mc);
  animation: slBMult 1.6s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes slBMult { 0% { opacity: 0; transform: translate(-260px, 120px) scale(.6); } 30% { opacity: 1; transform: translate(0, -50%) scale(1.35); } 45% { transform: translate(0, -50%) scale(1); } 80% { opacity: 1; transform: translate(0, -50%) scale(1); } 100% { opacity: 0; transform: translate(0, -90%) scale(.9); } }
@media (max-width: 760px), (max-aspect-ratio: 4/5) { .sl-bmult { right: -6px; font-size: 17px; } @keyframes slBMult { 0% { opacity: 0; transform: translate(0, 200px) scale(.6); } 30% { opacity: 1; transform: translate(0, -50%) scale(1.3); } 45%, 80% { opacity: 1; transform: translate(0, -50%) scale(1); } 100% { opacity: 0; transform: translate(0, -90%); } } }
@media (prefers-reduced-motion: reduce) { .sl-mults.on, .sl-mults.on .rs-mults span, .sl-bmult { animation: none !important; } }

/* ---------- Tesouro da Coroa e Fortaleza Real na mesma moldura */
.sl-stage .ts-fit { flex: 1; width: 100%; }
.sl-hrow svg { width: 30px; height: 30px; }
.sl-state { display: flex; flex-direction: column; gap: 6px; }
.sl-note { margin: 0; text-align: center; font-size: 11.5px; line-height: 1.35; color: #c9b9e6; }
.sl-stat { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.sl-stat[hidden] { display: none; }
.sl-stat span { font-size: 11.5px; font-weight: 700; color: #cfd5e6; }
.sl-stat b { font: 900 18px var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.sl-stat b.pop { animation: rbPop .45s cubic-bezier(.2, 1.8, .4, 1); }
.sl-stat.on b, .sl .ft-mult.on b { color: #ffb36b; text-shadow: 0 0 12px rgba(255, 138, 61, .8); }
.sl #tsAcc { color: #ff8a7a; }
.sl-state.on { border-color: #ffd84d; animation: slMOn 1.6s ease-in-out infinite; }
.sl-right .sl-pays { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sl-pays h5 small { font-size: 9.5px; color: #8d96ad; letter-spacing: 0; font-weight: 700; }
.sl-pays .ts-pays { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .sl-stage .ts-fit { flex: none; aspect-ratio: 6 / 5; height: auto; }
  .sl.rs-fortaleza .sl-stage .ts-fit { aspect-ratio: 6 / 5.4; }
  .sl-state { flex: 1.2; padding: 6px; gap: 4px; }
  .sl-state h5 { display: none; }
  .sl-state .sl-note { margin: auto 0; font-size: 10.5px; line-height: 1.25; }
  .sl-state:has(.sl-stat:not([hidden])) .sl-note { display: none; }
  .sl-stat { padding: 3px 8px; }
  .sl-stat span { font-size: 10px; }
  .sl-stat b { font-size: 14px; }
}

/* ---------- mais área para os rolos: faixa + ícone de pagamentos numa linha, barra e margens mais enxutas */
.sl-top { position: relative; z-index: 3; width: 100%; display: flex; justify-content: center; align-items: flex-end; margin-bottom: -8px; }
.sl-top .sl-banner { margin-bottom: 0; }
.sl-paybtn { position: absolute; right: 0; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--a2); font: 800 11.5px var(--display); letter-spacing: .04em; box-shadow: 0 6px 14px rgba(0, 0, 0, .4); backdrop-filter: blur(4px); }
.sl-paybtn i { font-size: 17px; }
.sl-paybtn:hover { border-color: var(--a); color: #fff; }
.sl-main { padding: 8px 12px 4px; gap: 12px; }
.sl-left { padding-top: 0; }
.sl-bar { padding: 4px 18px; }
.sl-spin { margin-top: -40px; }
.sl-icons button { width: 34px; height: 34px; }
/* sem coluna da direita (Tesouro e Fortaleza): logo no topo do painel e os rolos com a largura toda */
.sl-noright .sl-main { grid-template-columns: clamp(170px, 15vw, 220px) minmax(0, 1fr); }
.sl-logo-l { margin-bottom: 2px; }
.sl-logo-l b { font-size: clamp(22px, 2vw, 32px); }
.sl-logo-l em { font-size: clamp(20px, 1.9vw, 30px); }
.sl.rs-tesouro .sl-logo-l em { background: linear-gradient(180deg, #f3d6ff, #b04bff 55%, #4a0f86); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #22053d) drop-shadow(0 0 12px rgba(176, 75, 255, .55)); }
.sl.rs-fortaleza .sl-logo-l em { background: linear-gradient(180deg, #ffb3b3, #c8102e 55%, #5c0614); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #2a0306) drop-shadow(0 0 12px rgba(200, 16, 46, .5)); }
@media (max-width: 1180px) { .sl-noright .sl-main { grid-template-columns: clamp(160px, 20vw, 210px) minmax(0, 1fr); } }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .sl-logo-l { display: none; }
  .sl-main { padding: 6px 4px 4px; gap: 8px; }
  .sl-top { margin-bottom: -6px; }
  .sl-paybtn { bottom: 10px; width: 34px; padding: 0; justify-content: center; }
  .sl-paybtn span { display: none; }
  .sl-spin { margin-top: 0; }
}

/* ---------- Tesouro e Fortaleza com personagem à direita (mesmo padrão do Urubu Rei) */
.sl-hero { flex: 1; min-height: 0; }
.sl-hero img { object-position: 50% 30%; }
.sl.rs-tesouro .sl-hero { background: #160629; border-color: rgba(247, 200, 94, .45); }
.sl.rs-tesouro .sl-hero::after { background: linear-gradient(180deg, transparent 45%, rgba(10, 3, 20, .94) 90%); }
.sl.rs-fortaleza .sl-hero { background: #1d0a05; }
.sl.rs-fortaleza .sl-hero::after { background: linear-gradient(180deg, transparent 45%, rgba(20, 7, 3, .94) 90%); }
.sl-hero .rs-zeus-say b { text-shadow: 0 0 12px rgba(247, 200, 94, .75), 0 2px 0 #000; }
.sl-hero .rs-zeus-say small { color: #f3e2c0; }
/* 14 Selos Reais: 3 por linha; escada da Fortaleza: 4 por linha */
.sl-mults #tsMults { grid-template-columns: repeat(3, 1fr); gap: 5px; }
.sl-mults #tsMults span { height: 26px; }
.sl-mults #tsMults b { font-size: 12.5px; }
.sl-mults #ftMults { grid-template-columns: repeat(4, 1fr); gap: 5px; }
.sl-mults #ftMults span { height: 28px; }
.sl-mults #ftMults b { font-size: 13px; }
.sl-state.sl-mults .sl-stat { margin-top: 2px; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .sl-mults #tsMults { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .sl-mults #tsMults span { height: 20px; }
  .sl-mults #tsMults b { font-size: 9.5px; }
  .sl-mults #ftMults { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
  .sl-mults #ftMults b { font-size: 10px; }
  .sl-state.sl-mults .sl-stat { display: none; }
}