/* ============================================================================
   Cartomante FC — App 2026 · runas.css
   Caixa de Runas (/runas/) — lootbox esotérica com créditos Cartomante.
   Design FIXO dark místico (como o editor do escalar): NÃO usa tokens de tema.
   Paleta: navy #0B1022/#0F172A · roxo #2D2E6E · dourado #FBBF24 · accent #F5921A
   (texto sobre o accent laranja é SEMPRE branco — regra do projeto).
   Assets: images/runas/*.webp (mesa, bau, saquinho ×2, pedra-a/b/c).
   Glifos das runas: SVG inline gerado pelo js/runas.js (overlay sobre a pedra).
   ============================================================================ */

.rn-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 16px 48px;
  color: #E2E8F0;
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── Cabeçalho ── */
.rn-head { text-align: center; margin: 8px 0 14px; }
.rn-head h1 {
  font-size: 26px; font-weight: 900; letter-spacing: .5px; margin: 0 0 6px;
  background: linear-gradient(180deg, #FDE68A, #F5921A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rn-head p { margin: 0; font-size: 13.5px; color: #94A3B8; line-height: 1.45; }

/* ── Banner do último ganhador ── */
.rn-banner {
  display: none; align-items: center; gap: 8px; justify-content: center;
  background: linear-gradient(90deg, rgba(45,46,110,.55), rgba(245,146,26,.18), rgba(45,46,110,.55));
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 12px; padding: 9px 12px; margin: 0 0 14px;
  font-size: 13px; color: #FDE68A; text-align: center;
}
.rn-banner.on { display: flex; }
.rn-banner b { color: #fff; }

/* ── Cena (mesa + baú + saquinho + pedras) ── */
.rn-scene {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: #0B1022 url('/images/runas/mesa.webp') center / cover no-repeat;
  box-shadow: 0 10px 40px rgba(0,0,0,.55), inset 0 0 80px rgba(5,8,20,.55);
  border: 1px solid rgba(77,82,175,.35);
  user-select: none; -webkit-user-select: none;
}

.rn-som {
  position: absolute; left: 10px; top: 10px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(251,191,36,.35);
  background: rgba(15,23,42,.65); backdrop-filter: blur(4px);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0;
}
.rn-som:active { background: rgba(45,46,110,.8); }

.rn-bau {
  position: absolute; left: 50%; bottom: 2%;
  width: 54%; transform: translateX(-50%);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.6));
  pointer-events: none;
}

.rn-pouch {
  position: absolute; right: 4%; top: 6%;
  width: 24%;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.6));
  transform-origin: 50% 20%;
  pointer-events: none;
  transition: opacity .25s;
}
/* chacoalhar (fase 1 do lançamento, ~0.9s) */
.rn-pouch.shake { animation: rnShake .22s ease-in-out 4; }
@keyframes rnShake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-9deg) translateY(-2%); }
  75% { transform: rotate(9deg) translateY(2%); }
}
/* despejando (fase 2) */
.rn-pouch.pour { transform: rotate(-28deg) translate(-6%, 10%); transition: transform .35s ease; }

/* ── Pedras ── */
.rn-stones {
  position: absolute; left: 50%; bottom: 26%;
  width: 78%; transform: translateX(-50%);
  display: flex; justify-content: space-between; align-items: flex-end;
  pointer-events: none;
}
.rn-stone {
  width: 30%; aspect-ratio: 1 / 1;
  perspective: 500px;
  opacity: 0;
}
.rn-stone.in { opacity: 1; }
.rn-stone__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.3, .1, .3, 1.15);
}
.rn-stone.flip .rn-stone__inner { transform: rotateY(180deg); }
.rn-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
}
.rn-face--verso { transform: rotateY(0deg); }
.rn-face--glifo { transform: rotateY(180deg); }
.rn-face img { width: 100%; height: 100%; object-fit: contain;
               filter: drop-shadow(0 6px 7px rgba(0,0,0,.55)); } /* sombra de contato (o recorte alpha tirou a pintada) */
.rn-face--glifo svg {
  position: absolute; left: 50%; top: 47%;
  width: 34%; height: 44%;
  transform: translate(-50%, -50%);
  overflow: visible;
}
/* glifo "entalhado que acende": traço escuro por baixo + traço colorido por cima */
.rn-glifo-sombra { stroke: #05070F; stroke-width: 4.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rn-glifo-luz    { stroke: var(--rn-cor, #94A3B8); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round;
                   filter: drop-shadow(0 0 6px var(--rn-cor, #94A3B8)); }

/* cores por tier (aplicadas no .rn-stone via classe) */
.rn-tier-perda  { --rn-cor: #64748B; }
.rn-tier-comum  { --rn-cor: #38BDF8; }
.rn-tier-raro   { --rn-cor: #F59E0B; }
.rn-tier-epico  { --rn-cor: #A78BFA; }
.rn-tier-lenda  { --rn-cor: #FBBF24; }

/* brilho ao redor da pedra revelada (segue a silhueta do alpha) + sombra de contato */
.rn-stone.flip .rn-face--glifo img {
  filter: drop-shadow(0 0 14px var(--rn-cor, transparent)) drop-shadow(0 6px 7px rgba(0,0,0,.55));
}
.rn-stone.regente.flip { animation: rnPulse 1.2s ease-in-out 2; }
@keyframes rnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
/* aguardando resposta: pedras viradas "respirando" */
.rn-stone.waiting { animation: rnWait 1.1s ease-in-out infinite; }
@keyframes rnWait {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4%); }
}

/* raios do jackpot (Dagaz) */
.rn-flash {
  position: absolute; inset: -30%;
  background: conic-gradient(from 0deg,
    transparent 0 14deg, rgba(251,191,36,.28) 14deg 22deg,
    transparent 22deg 40deg, rgba(251,191,36,.22) 40deg 48deg,
    transparent 48deg 66deg, rgba(253,230,138,.30) 66deg 74deg,
    transparent 74deg 100deg, rgba(251,191,36,.24) 100deg 108deg,
    transparent 108deg 138deg, rgba(253,230,138,.26) 138deg 146deg,
    transparent 146deg 180deg, rgba(251,191,36,.28) 180deg 188deg,
    transparent 188deg 224deg, rgba(253,230,138,.24) 224deg 232deg,
    transparent 232deg 268deg, rgba(251,191,36,.26) 268deg 276deg,
    transparent 276deg 316deg, rgba(253,230,138,.28) 316deg 324deg, transparent 324deg);
  opacity: 0; pointer-events: none;
  animation: rnRaios 9s linear infinite;
  transition: opacity .6s;
}
.rn-flash.on { opacity: 1; }
@keyframes rnRaios { to { transform: rotate(360deg); } }

/* ── Mensagem de resultado (overlay na cena) ── */
.rn-result {
  position: absolute; left: 50%; top: 7%;
  transform: translateX(-50%);
  width: 88%; text-align: center;
  opacity: 0; transition: opacity .45s;
  pointer-events: none;
}
.rn-result.on { opacity: 1; }
.rn-result__runa { font-size: 15px; font-weight: 800; color: #FDE68A; text-shadow: 0 2px 8px #000; }
.rn-result__msg  { font-size: 13px; color: #CBD5E1; text-shadow: 0 2px 6px #000; margin-top: 2px; }
.rn-result__premio {
  font-size: 30px; font-weight: 900; margin-top: 4px;
  color: #FBBF24; text-shadow: 0 0 18px rgba(251,191,36,.65), 0 2px 8px #000;
}
.rn-result__premio.zero { color: #94A3B8; text-shadow: 0 2px 8px #000; font-size: 20px; }

/* ── Controles ── */
.rn-controls {
  margin-top: 16px;
  background: linear-gradient(180deg, #131A33, #0F172A);
  border: 1px solid rgba(77,82,175,.35);
  border-radius: 16px; padding: 16px;
}
.rn-saldo { text-align: center; font-size: 13.5px; color: #94A3B8; margin-bottom: 12px; }
.rn-saldo b { color: #FDE68A; font-size: 16px; }
.rn-saldo .rn-login-link { color: #F5921A; font-weight: 700; cursor: pointer; text-decoration: underline; }
.rn-buy {
  margin-left: 8px; vertical-align: middle;
  background: linear-gradient(180deg, #F5921A, #D97706);
  color: #fff;                       /* texto branco sobre o laranja, sempre */
  border: 0; border-radius: 9px; padding: 6px 11px;
  font-size: 12px; font-weight: 800; font-family: inherit; cursor: pointer;
}
.rn-buy:active { filter: brightness(.9); }

/* ── Modal de compra de CC (PIX) ── */
.rn-modal-ov {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(4, 7, 18, .78); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.rn-modal {
  width: min(94vw, 420px); max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, #131A33, #0F172A);
  border: 1px solid rgba(251,191,36,.35); border-radius: 16px;
  padding: 16px; color: #E2E8F0; font-family: 'Inter', system-ui, sans-serif;
  box-shadow: 0 18px 60px rgba(0,0,0,.7);
}
.rn-modal__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rn-modal__hd b { font-size: 15px; color: #FDE68A; }
.rn-modal__x {
  background: none; border: 0; color: #94A3B8; font-size: 24px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
.rn-modal__spin { text-align: center; color: #94A3B8; font-size: 13px; padding: 26px 0; }
.rn-modal__err { color: #FCA5A5; font-size: 13px; padding: 12px 0; text-align: center; }
.rn-modal__saldo { font-size: 13px; color: #94A3B8; margin-bottom: 12px; }
.rn-modal__saldo b { color: #FDE68A; }
.rn-modal__field { margin-bottom: 10px; }
.rn-modal__field label { display: block; font-size: 11px; color: #94A3B8; margin-bottom: 3px; letter-spacing: .3px; }
.rn-modal__field input {
  width: 100%; box-sizing: border-box;
  background: #0B1022; border: 1px solid rgba(77,82,175,.5); border-radius: 10px;
  color: #E2E8F0; padding: 9px 11px; font-size: 14px; font-family: inherit;
}
.rn-modal__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rn-modal__lbl { font-size: 11px; font-weight: 800; color: #A5B4FC; letter-spacing: .5px; text-transform: uppercase; margin: 12px 0 8px; }
.rn-modal__plan {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  background: #1B2342; border: 1px solid rgba(77,82,175,.5); border-radius: 12px;
  color: #E2E8F0; padding: 10px 12px; margin-bottom: 8px;
  font-family: inherit; cursor: pointer; text-align: left;
}
.rn-modal__plan:active { background: #2D2E6E; }
.rn-modal__q { font-weight: 900; font-size: 15px; color: #FDE68A; white-space: nowrap; }
.rn-modal__pinfo { flex: 1; min-width: 0; font-size: 13px; }
.rn-modal__pinfo small { display: block; color: #94A3B8; font-size: 11.5px; }
.rn-modal__val { font-weight: 800; font-size: 13.5px; color: #fff; white-space: nowrap; }
.rn-modal__note { font-size: 11.5px; color: #64748B; margin-top: 12px; line-height: 1.45; }
.rn-modal__center { text-align: center; }
.rn-modal__sol { font-size: 12.5px; color: #CBD5E1; margin: 0 0 8px; }
.rn-modal__qr { display: inline-block; background: #fff; border-radius: 12px; padding: 8px; min-height: 60px; min-width: 60px; }
.rn-modal__qr img { display: block; max-width: 100%; height: auto; }
.rn-modal__valor { font-size: 20px; font-weight: 900; color: #FDE68A; margin-top: 8px; }
.rn-modal__copy { display: flex; gap: 8px; align-items: stretch; }
.rn-modal__copy textarea {
  flex: 1; min-width: 0; height: 58px; resize: none;
  background: #0B1022; border: 1px solid rgba(77,82,175,.5); border-radius: 10px;
  color: #94A3B8; font-size: 11px; padding: 8px; font-family: monospace;
}
.rn-modal__btn {
  background: linear-gradient(180deg, #F5921A, #D97706);
  color: #fff; border: 0; border-radius: 10px; padding: 10px 14px;
  font-size: 13px; font-weight: 800; font-family: inherit; cursor: pointer; white-space: nowrap;
}
.rn-modal__btn.ghost { background: #1B2342; border: 1px solid rgba(77,82,175,.5); color: #CBD5E1; }
.rn-modal__actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }

.rn-slider { margin-bottom: 14px; }
.rn-slider__val { text-align: center; margin-bottom: 10px; }
.rn-slider__val b { display: block; font-size: 30px; font-weight: 900; color: #fff; }
.rn-slider__val span { font-size: 11px; color: #94A3B8; letter-spacing: .4px; }
.rn-slider input[type=range] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 8px; border-radius: 6px;
  background: #1B2342;              /* preenchimento laranja é pintado via JS (rnSetAposta) */
  outline: none; cursor: pointer; margin: 10px 0 0;
}
.rn-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FDE68A, #F5921A 60%, #D97706);
  border: 2px solid #0B1022;
  box-shadow: 0 0 12px rgba(245,146,26,.6);
  cursor: pointer;
}
.rn-slider input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FDE68A, #F5921A 60%, #D97706);
  border: 2px solid #0B1022;
  box-shadow: 0 0 12px rgba(245,146,26,.6);
  cursor: pointer;
}
.rn-slider input[type=range]::-moz-range-track { height: 8px; border-radius: 6px; background: transparent; }
.rn-slider input[type=range]:disabled { opacity: .45; cursor: default; }
.rn-slider__marks { display: flex; justify-content: space-between; font-size: 11px; color: #64748B; margin-top: 6px; }

.rn-btn {
  display: block; width: 100%;
  background: linear-gradient(180deg, #F5921A, #D97706);
  color: #fff;                       /* NUNCA texto preto sobre o laranja */
  border: 0; border-radius: 14px;
  padding: 15px 10px; font-size: 16px; font-weight: 900; letter-spacing: .4px;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 6px 20px rgba(245,146,26,.35);
}
.rn-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.rn-hint { text-align: center; font-size: 11.5px; color: #64748B; margin-top: 10px; }
.rn-hint a { color: #F5921A; font-weight: 700; text-decoration: none; }

/* ── Histórico / ganhadores ── */
.rn-listas { margin-top: 18px; display: grid; gap: 14px; }
.rn-card {
  background: #111936; border: 1px solid rgba(77,82,175,.3);
  border-radius: 14px; padding: 14px;
}
.rn-card h2 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: #A5B4FC; letter-spacing: .5px; text-transform: uppercase; }
.rn-card ul { list-style: none; margin: 0; padding: 0; }
.rn-card li {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; color: #CBD5E1; padding: 6px 0;
  border-bottom: 1px dashed rgba(100,116,139,.25);
}
.rn-card li:last-child { border-bottom: 0; }
.rn-card li .ok { color: #FBBF24; font-weight: 800; }
.rn-card li .no { color: #64748B; }
.rn-card li time { color: #64748B; font-size: 12px; white-space: nowrap; }
.rn-vazio { color: #64748B; font-size: 12.5px; }

/* ── Página /runas/regras/ (disclosure de odds — exigência de loja) ── */
.rn-regras-txt { font-size: 13.5px; color: #CBD5E1; line-height: 1.6; }
.rn-regras-txt p { margin: 0 0 10px; }
.rn-regras-txt p:last-child { margin-bottom: 0; }
.rn-regras-txt b { color: #FDE68A; }
.rn-regras-scroll { overflow-x: auto; margin-bottom: 10px; }
.rn-regras-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rn-regras-table th {
  text-align: left; color: #A5B4FC; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; padding: 6px 8px; border-bottom: 1px solid rgba(100,116,139,.4);
}
.rn-regras-table td { padding: 7px 8px; border-bottom: 1px dashed rgba(100,116,139,.25); color: #E2E8F0; }
.rn-regras-table tr:last-child td { border-bottom: 0; }
.rn-regras-table td:nth-child(3), .rn-regras-table td:nth-child(4) { font-variant-numeric: tabular-nums; }

/* ── Toast (cooldown / erros) ── */
.rn-toast {
  position: fixed; left: 50%; bottom: 26px;
  transform: translate(-50%, 20px);
  background: #1B2342; color: #E2E8F0;
  border: 1px solid rgba(245,146,26,.5);
  border-radius: 12px; padding: 12px 16px;
  font-size: 13.5px; font-family: 'Inter', system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 90; max-width: min(92vw, 420px); text-align: center;
}
.rn-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 480px) {
  .rn-page { padding: 12px 10px 40px; }
  .rn-head h1 { font-size: 22px; }
}