/* ============================================================
   ForraDAO 21 — CASSINO PEGANDO FOGO
   degen/cartoon: fogo laranja + dinheiro + bombas + mascotes
   Fonts: Lilita One (display) · Fredoka (body) · Permanent Marker (carimbo)
   ============================================================ */

:root {
  --bg: #1a0a05; --bg2: #2e1206;
  --fire1: #ff3b00; --fire2: #ff7a00; --fire3: #ffb320; --ember: #ff5510;
  --money: #2fbf57; --money-dark: #127a33; --gold: #ffcf2e;
  --ink: #140a04; --outline: #1a0700;
  --paper: #fff4d6; --cream: #fff8e7; --card-white: #fffaf0;
  --felt: #0f5132; --felt-hi: #16723f;
  --accent: #ff2d6f; --pop: #00e0ff;
  --win: #3ee87a; --lose: #ff2a2a; --push: #ffb320;
  --smoke: #3a2418; --bomb: #211008;

  --r-card: 12px; --r-btn: 12px; --r-plaque: 12px;
  --hard: 4px 4px 0 var(--ink);
  --hard-sm: 3px 3px 0 rgba(20,7,0,.85);
  --ease: cubic-bezier(.2,1.4,.4,1);
  --ease-pop: cubic-bezier(.2,1.5,.4,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Fredoka", system-ui, sans-serif;
  color: var(--cream);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  position: relative; isolation: isolate;
  border: 6px solid var(--ink);
  box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 240px 70px rgba(26,10,5,.9);
}

/* ====== FUNDO DE FOGO (5 camadas) ====== */
.room { position: fixed; inset: 0; z-index: -5;
  background: radial-gradient(140% 100% at 50% 118%,
    #ffb320 0%, #ff7a00 22%, #ff3b00 42%, #2e1206 74%, #1a0a05 100%);
  animation: fogoPulsa 2.6s ease-in-out infinite alternate;
}
@keyframes fogoPulsa { from { filter: brightness(1) saturate(1.05); } to { filter: brightness(1.12) saturate(1.28); } }
.room::before { content: ""; position: absolute; inset: 0; mix-blend-mode: screen; filter: blur(5px);
  background:
    radial-gradient(42% 32% at 28% 102%, rgba(255,122,0,.78), transparent 70%),
    radial-gradient(38% 30% at 72% 102%, rgba(255,59,0,.78), transparent 70%),
    radial-gradient(30% 24% at 50% 102%, rgba(255,207,46,.65), transparent 70%);
  animation: chama 1.1s steps(6) infinite alternate;
}
@keyframes chama { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-12px) scaleY(1.09); } }
.room::after { content: ""; position: absolute; inset: -25%; opacity: .14; mix-blend-mode: multiply;
  background:
    radial-gradient(#c93a14 22%, transparent 23%) 0 0 / 14px 14px,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  background-blend-mode: multiply; animation: halftoneGira 60s linear infinite;
}
@keyframes halftoneGira { to { transform: rotate(360deg); } }

.brasas { position: fixed; left: 0; bottom: -12px; z-index: -4; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); pointer-events: none; filter: drop-shadow(0 0 6px var(--fire2));
  box-shadow:
    10vw 0 var(--fire2), 25vw -4vh var(--gold), 40vw -2vh var(--ember), 55vw -6vh var(--fire3),
    70vw -1vh var(--fire2), 85vw -5vh var(--gold), 18vw -8vh var(--ember), 63vw -9vh var(--gold),
    33vw -3vh var(--fire3), 48vw -7vh var(--fire2), 78vw -8vh var(--gold), 92vw -2vh var(--ember);
  animation: brasas 3.4s linear infinite;
}
@keyframes brasas { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(-108vh); opacity: 0; } }

/* chuva de dinheiro */
.chuva-nota { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; }
.nota { position: absolute; top: -8%; font-family: "Lilita One", cursive; font-size: 30px;
  color: var(--money); -webkit-text-stroke: 2px var(--ink); opacity: .18; will-change: transform;
  animation: caiNota linear infinite; }
.nota::before { content: "$"; }
.nota.gold { color: var(--gold); }
.nota.gold::before { content: "🪙"; -webkit-text-stroke: 0; }
@keyframes caiNota { 0% { transform: translateY(-12vh) rotate(0); } 100% { transform: translateY(118vh) rotate(420deg); } }

@media (prefers-reduced-motion: reduce) {
  .room, .room::before, .room::after, .brasas, .nota { animation: none !important; }
  .nota { opacity: .1; }
}

/* ====== MASTHEAD ====== */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .8rem clamp(.8rem, 3vw, 2rem) .3rem; flex-wrap: wrap; }
.brand { display: flex; flex-direction: column; line-height: .92; }
.wordmark, .forra-title { margin: 0; font-family: "Lilita One", cursive; color: var(--gold);
  font-size: clamp(2.1rem, 7vw, 4rem); letter-spacing: 1px; transform: rotate(-2deg);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 4px 4px 0 var(--fire1), 7px 7px 0 var(--ink); }
.brand__sub { font-family: "Permanent Marker", cursive; color: var(--cream);
  font-size: clamp(.72rem, 2.6vw, 1rem); transform: rotate(-2deg); margin-top: .3rem; opacity: .92; }

.streak { font-family: "Permanent Marker", cursive; font-size: clamp(.7rem, 2.4vw, .9rem);
  padding: .25rem .7rem; border-radius: 10px; white-space: nowrap; align-self: center;
  border: 3px solid var(--ink); box-shadow: var(--hard-sm); transform: rotate(-3deg);
  opacity: 0; transition: opacity .3s; }
.streak.show { opacity: 1; }
.streak.hot { color: var(--ink); background: var(--gold); }
.streak.cold { color: var(--cream); background: #2b6fa3; }

.masthead__right { display: flex; align-items: center; gap: clamp(.4rem, 1.5vw, .9rem); }
.icon-btn { width: 46px; height: 46px; border-radius: 12px; border: 3px solid var(--ink);
  background: var(--cream); color: var(--ink); cursor: pointer; display: grid; place-items: center;
  box-shadow: var(--hard-sm); transition: transform .12s var(--ease); }
.icon-btn:hover { transform: translate(-1px,-1px) rotate(-3deg); }
.icon-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(20,7,0,.8); }
.icon-btn svg { width: 22px; height: 22px; }

/* ROBÔ = Modo Macaco */
.robot { display: flex; align-items: center; gap: .55rem; padding: .35rem .7rem; cursor: pointer;
  border: 3px solid var(--ink); border-radius: 12px; background: var(--cream); color: var(--ink);
  box-shadow: var(--hard-sm); transition: transform .12s var(--ease); }
.robot:hover { transform: translate(-1px,-1px); }
.robot__monocle { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center;
  background: var(--fire3); border: 2px solid var(--ink); font-size: 20px; }
.robot__monocle::before { content: "🐵"; }
.robot__eye { display: none; }
.robot__text { display: flex; flex-direction: column; line-height: 1.05; }
.robot__label { font-family: "Lilita One", cursive; font-size: .8rem; letter-spacing: .3px; }
.robot__state { font-family: "Permanent Marker", cursive; font-size: .62rem; color: var(--money-dark); }
.robot.is-on { background: var(--gold); }
.robot.is-on .robot__monocle { background: var(--fire1); animation: macacoHype .5s ease-in-out infinite alternate; }
@keyframes macacoHype { to { transform: rotate(8deg) scale(1.08); } }
.robot.is-on .robot__state { color: var(--fire1); }

/* ====== STAGE + MESA ====== */
.stage { flex: 1; display: flex; align-items: center; justify-content: center;
  padding: clamp(.4rem, 2vw, 1rem); position: relative; min-height: 0; }
.table { position: relative; width: min(1080px, 96vw); display: grid; grid-template-rows: 1fr auto 1fr;
  gap: .3rem; padding: clamp(18px, 4vw, 34px); border-radius: 30px;
  background: radial-gradient(120% 120% at 50% 0%, var(--felt-hi), var(--felt) 70%);
  border: 6px solid var(--gold); box-shadow: 0 22px 60px -8px rgba(255,122,0,.55), inset 0 0 0 2px rgba(255,255,255,.08), var(--hard);
  transition: box-shadow .4s, filter .4s; min-height: 62vh; }
.table.is-win { box-shadow: 0 0 50px 6px rgba(62,232,122,.6), inset 0 0 0 2px rgba(255,255,255,.1), var(--hard); }
.table.is-lose { filter: grayscale(.45) brightness(.85); }
.table.treme { animation: shake .42s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%,90%{transform:translate(-2px,1px)} 20%,80%{transform:translate(4px,-2px)} 30%,50%,70%{transform:translate(-7px,3px)} 40%,60%{transform:translate(7px,-3px)} }

.table__crop, .table__motto, .shoe { display: none; }
.table__rules { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-4deg);
  font-family: "Permanent Marker", cursive; font-size: clamp(.6rem, 2vw, .8rem); color: var(--gold);
  border: 3px solid var(--gold); border-radius: 8px; padding: 4px 10px; text-align: center;
  opacity: 0; transition: opacity .4s; pointer-events: none; white-space: nowrap; box-shadow: 2px 2px 0 rgba(20,7,0,.5); }
.table.idle .table__rules { opacity: .85; }

.dealer-zone, .player-zone { position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .35rem; padding: .3rem; z-index: 2; }
.dealer-zone { align-self: start; }
.player-zone { align-self: end; }
.zone-label { font-family: "Permanent Marker", cursive; font-size: clamp(.65rem, 2.2vw, .85rem);
  color: var(--cream); background: rgba(20,7,0,.45); padding: .1rem .6rem; border-radius: 8px;
  border: 2px solid rgba(255,255,255,.15); }

.hand { display: flex; align-items: center; justify-content: center; min-height: clamp(110px, 20vh, 170px); }
.hands-row { display: flex; gap: clamp(.8rem, 3vw, 2rem); align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.hand-slot { display: flex; flex-direction: column; align-items: center; gap: .3rem; transition: .2s var(--ease); }
.hand-slot.is-active .lozenge { transform: scale(1.1) rotate(-2deg); box-shadow: 0 0 0 3px var(--gold), var(--hard-sm); }
.hand-slot.is-bust { filter: grayscale(.5) brightness(.8); }
.card-stack { display: flex; }
.card-stack .card:not(:first-child) { margin-left: clamp(-42px, -5vw, -30px); }
.card-stack .card:nth-child(2n) { --rot: 3deg; }
.card-stack .card:nth-child(3n) { --rot: -4deg; }
.card-stack .card:nth-child(4n) { --rot: 2deg; }

.lozenge { font-family: "Lilita One", cursive; font-size: clamp(1.2rem, 3.2vw, 1.8rem); color: var(--ink);
  background: var(--cream); padding: .05em .5em; border-radius: 10px; border: 3px solid var(--ink);
  box-shadow: var(--hard-sm); min-width: 1.8em; text-align: center; transition: .2s var(--ease); }
.lozenge--soft::after { content: "·s"; font-size: .5em; color: var(--money-dark); vertical-align: super; }
.lozenge.is-bust { background: var(--lose); color: var(--cream); }
.lozenge.is-bj { background: var(--gold); }
.hand__bet { font-family: "Lilita One", cursive; font-size: clamp(.8rem, 2.4vw, 1rem); color: var(--gold);
  -webkit-text-stroke: 1px var(--ink); }
.hand__bet small { color: var(--cream); -webkit-text-stroke: 0; }

.center-rail { display: flex; align-items: center; justify-content: center; z-index: 3; min-height: 2.4em; }
.message { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .6rem;
  text-align: center; padding: 0 .6rem; font-family: "Lilita One", cursive; font-size: clamp(1rem, 3vw, 1.5rem);
  color: var(--cream); opacity: 0; transform: translateY(6px) scale(.9); transition: .3s var(--ease); }
.message.show { opacity: 1; transform: none; }
.message .result-tag { font-family: "Permanent Marker", cursive; font-size: .7em; padding: .15em .6em;
  border-radius: 8px; border: 3px solid currentColor; transform: rotate(-4deg); box-shadow: 2px 2px 0 rgba(20,7,0,.5); white-space: nowrap; }
.message .result-val { font-family: "Lilita One", cursive; -webkit-text-stroke: 1.5px var(--ink); }
.message .result-quip { flex-basis: 100%; font-family: "Permanent Marker", cursive; font-size: .56em; opacity: .92; color: var(--cream); }
.message.win { color: var(--win); } .message.lose { color: var(--lose); }
.message.push { color: var(--push); } .message.bj { color: var(--gold); }
.insurance-prompt { display: flex; align-items: center; gap: .6rem; }

.robot-caption { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-2deg);
  font-family: "Permanent Marker", cursive; font-size: clamp(.75rem, 2.6vw, 1rem); color: var(--ink);
  background: var(--gold); border: 3px solid var(--ink); border-radius: 12px; padding: .25rem .7rem;
  box-shadow: var(--hard-sm); z-index: 5; opacity: 0; transition: opacity .25s; white-space: nowrap; pointer-events: none; }
.robot-caption::before { content: "🐵 "; }
.robot-caption.show { opacity: 1; }
.robot-caption .rc-sep { opacity: .5; margin: 0 .2em; }
.robot-caption .rc-cursor { display: inline-block; width: .4em; background: var(--ink); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ====== CARTAS (gibi) ====== */
.card { --cw: clamp(66px, 16vw, 104px); --rot: 0deg;
  width: var(--cw); height: calc(var(--cw) * 1.4); position: relative; perspective: 900px; flex: 0 0 auto; }
.card.enter { animation: flick .42s var(--ease-pop) both; }
@keyframes flick {
  0% { transform: translateY(-120%) rotate(-25deg) scale(.7); opacity: 0; }
  60% { transform: translateY(8%) rotate(3deg) scale(1.06, .94); opacity: 1; }
  100% { transform: translateY(0) rotate(0) scale(1); }
}
.card__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .45s var(--ease); border-radius: var(--r-card); transform: rotate(var(--rot)); }
.card.is-down .card__inner { transform: rotate(var(--rot)) rotateY(180deg); }
.card__face { position: absolute; inset: 0; border-radius: var(--r-card); backface-visibility: hidden;
  -webkit-backface-visibility: hidden; overflow: hidden; }
.card__front { background: var(--card-white); border: 3px solid var(--ink); box-shadow: var(--hard-sm) inset, var(--hard-sm);
  color: var(--ink); padding: 5%; }
.card.suit-heart .card__front, .card.suit-diamond .card__front { --suit-color: var(--fire1); }
.card.suit-spade .card__front, .card.suit-club .card__front { --suit-color: var(--ink); }
.card__corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: .85; z-index: 2; }
.card__corner .rank { font-family: "Lilita One", cursive; font-size: calc(var(--cw) * .3); color: var(--suit-color); }
.card__corner .pip { font-size: calc(var(--cw) * .18); color: var(--suit-color); }
.card__corner--tl { top: 5%; left: 7%; }
.card__corner--br { bottom: 5%; right: 7%; transform: rotate(180deg); }
.card__center { position: absolute; inset: 16% 9%; z-index: 1; }
.card__pip { position: absolute; transform: translate(-50%,-50%); font-size: calc(var(--cw) * .2); color: var(--suit-color); }
.card__pip.flip { transform: translate(-50%,-50%) rotate(180deg); }
.card__ace { position: absolute; inset: 0; display: grid; place-items: center; }
.card__ace .glyph { font-size: calc(var(--cw) * .5); color: var(--suit-color); }
.card__ace .ring { position: absolute; width: 56%; aspect-ratio: 1; border: 3px solid var(--gold); border-radius: 50%; }
.card__court { position: absolute; inset: 12% 9%; display: grid; place-items: center; border: 3px solid var(--gold); border-radius: 8px;
  background: repeating-linear-gradient(45deg, rgba(255,45,111,.08) 0 5px, transparent 5px 10px); }
.card__court .court-letter { font-family: "Lilita One", cursive; font-size: calc(var(--cw) * .52); color: var(--suit-color); }
.card__court .court-suit { position: absolute; font-size: calc(var(--cw) * .2); color: var(--suit-color); }
.card__court .court-suit.t { top: 5%; left: 7%; } .card__court .court-suit.b { bottom: 5%; right: 7%; transform: rotate(180deg); }
.card__court .court-mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Lilita One", cursive; font-size: calc(var(--cw)); color: rgba(255,207,46,.12); }
.card__caption { display: none; }
.card__back { transform: rotateY(180deg); border: 3px solid var(--gold); box-shadow: var(--hard-sm);
  background: repeating-linear-gradient(45deg, var(--felt) 0 7px, var(--felt-hi) 7px 14px); display: grid; place-items: center; }
.card__back::after { content: "💣"; font-size: calc(var(--cw) * .42); filter: drop-shadow(0 0 4px var(--gold)); }
.card.flipping::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--gold);
  box-shadow: 0 0 14px var(--gold); z-index: 5; opacity: 0; animation: glint .45s ease-in-out; }
@keyframes glint { 50% { opacity: 1; } }
.card.is-bj .card__inner { animation: bjTreme .5s ease-in-out 2; }
@keyframes bjTreme { 25% { transform: rotate(calc(var(--rot) + 5deg)) translateY(-3px); } 75% { transform: rotate(calc(var(--rot) - 5deg)); } }

/* ====== RAIL / BANCA / FICHAS / BOTÕES ====== */
.rail { display: grid; grid-template-columns: minmax(120px,1fr) auto minmax(120px,1fr); align-items: center;
  gap: clamp(.6rem, 2vw, 1.6rem); padding: .5rem clamp(.8rem, 3vw, 2rem) 1rem; position: relative; z-index: 2; }
.bank { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.bank__label { font-family: "Permanent Marker", cursive; font-size: .8rem; color: var(--cream); transform: rotate(-2deg); }
.bank__row { display: flex; align-items: baseline; gap: .2rem; background: var(--money); border: 3px solid var(--ink);
  border-radius: 10px; padding: .1rem .5rem; box-shadow: var(--hard-sm); }
.bank__cur { font-family: "Lilita One", cursive; color: var(--ink); }

.odometer { display: inline-flex; align-items: center; font-family: "Lilita One", cursive; line-height: 1; color: var(--ink); }
.odometer--bank { font-size: clamp(1.3rem, 4vw, 2rem); }
.odometer--bet { font-size: clamp(1.1rem, 3vw, 1.6rem); color: var(--gold); -webkit-text-stroke: 1.5px var(--ink); }
.odo-cell { height: 1em; overflow: hidden; position: relative; width: .62em; }
.odo-strip { display: flex; flex-direction: column; transition: transform .26s var(--ease); }
.odo-num { height: 1em; display: grid; place-items: center; }
.odo-sep { padding: 0 .03em; }

.bet-zone { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.bet-spot { position: relative; width: 100%; min-height: 44px; display: flex; align-items: flex-end; justify-content: center;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bet-spot__hint { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  font-family: "Permanent Marker", cursive; font-size: .72rem; color: var(--cream); white-space: nowrap; transition: opacity .3s; pointer-events: none; }
.bet-spot__stack { position: relative; width: 42px; height: 42px; }
.bet-spot.has-chips:active .bet-spot__stack { transform: scale(.93); }
.mini-chip { position: absolute; left: 50%; bottom: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--ink); transform: translateX(-50%) translateY(calc(var(--i) * -6px)) rotate(calc(var(--i) * 4deg - 8deg));
  box-shadow: var(--hard-sm); --c: var(--money); background: radial-gradient(circle at 38% 30%, #fff, var(--c) 70%); }
.mini-chip.c5 { --c: #c9a24a; } .mini-chip.c25 { --c: var(--money); } .mini-chip.c100 { --c: var(--accent); }
.mini-chip.c500 { --c: var(--fire2); } .mini-chip.c1000 { --c: var(--gold); }
.mini-chip.drop { animation: chipDrop .3s var(--ease); }
@keyframes chipDrop { 0% { transform: translateX(-50%) translateY(calc(var(--i) * -6px - 60px)); opacity: 0; } 60% { opacity: 1; }
  100% { transform: translateX(-50%) translateY(calc(var(--i) * -6px)) rotate(calc(var(--i) * 4deg - 8deg)); opacity: 1; } }

.bet-plaque { display: flex; align-items: center; gap: .4rem; padding: .1rem .7rem; border-radius: 10px;
  background: var(--ink); border: 3px solid var(--gold); box-shadow: var(--hard-sm); }
.bet-plaque .lbl { font-family: "Permanent Marker", cursive; font-size: .68rem; color: var(--gold); }

.chip-tray { display: flex; gap: clamp(.4rem, 1.5vw, .8rem); align-items: center; flex-wrap: wrap; justify-content: center; }
.chip { width: clamp(48px, 12vw, 60px); aspect-ratio: 1; border-radius: 50%; position: relative; cursor: pointer;
  border: 3px solid var(--ink); padding: 0; flex: 0 0 auto; box-shadow: var(--hard-sm);
  --c: var(--money); background: radial-gradient(circle at 38% 30%, #fff 0%, var(--c) 62%, rgba(0,0,0,.25) 130%);
  transition: transform .12s var(--ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.chip::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.6); }
.chip .denom { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  font-family: "Lilita One", cursive; font-size: clamp(.85rem, 2.4vw, 1.1rem); color: var(--ink); }
.chip.c5 { --c: #d8b45a; } .chip.c25 { --c: var(--money); } .chip.c100 { --c: var(--accent); }
.chip.c500 { --c: var(--fire2); } .chip.c1000 { --c: var(--gold); }
.chip.c100 .denom, .chip.c500 .denom { color: var(--cream); }
.chip:hover:not(:disabled) { transform: translateY(-5px) rotate(-6deg); }
.chip:active:not(:disabled) { transform: translateY(-1px) scale(.92); }
.chip:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(.6); }
.chip.bump { animation: chipBump .3s; }
@keyframes chipBump { 25% { transform: rotate(-8deg) translateX(-5px); } 75% { transform: rotate(8deg) translateX(5px); } }

.bet-tools { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.text-btn { background: var(--ink); border: 2px solid var(--gold); color: var(--gold); cursor: pointer;
  font-family: "Permanent Marker", cursive; font-size: .62rem; padding: .25rem .5rem; border-radius: 8px;
  touch-action: manipulation; transition: transform .1s; }
.text-btn:hover { transform: scale(1.05); }
.text-btn.allin { background: var(--bomb); border-color: var(--fire2); color: var(--fire3); }

.actions { display: flex; gap: clamp(.4rem, 1.2vw, .6rem); justify-content: flex-end; flex-wrap: wrap; }
.btn { font-family: "Lilita One", cursive; font-size: clamp(.78rem, 2.3vw, 1rem); color: var(--ink);
  background: var(--cream); border: 3px solid var(--ink); border-radius: var(--r-btn);
  padding: .55rem clamp(.6rem, 1.6vw, 1.1rem); cursor: pointer; box-shadow: var(--hard-sm);
  transition: transform .12s var(--ease); white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.btn:hover:not(:disabled) { transform: translate(-1px,-1px) rotate(-1deg); }
.btn:active:not(:disabled) { transform: translate(2px,2px) scale(.95); box-shadow: 1px 1px 0 rgba(20,7,0,.8); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.5); }
.btn--primary { color: var(--ink); background: var(--gold); }
.btn--ghost { background: var(--bomb); color: var(--fire3); border-color: var(--fire2); }
@media (prefers-reduced-motion: no-preference) {
  .btn--primary:not(:disabled) { animation: bocejo 3.4s ease-in-out infinite; }
}
@keyframes bocejo { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04) rotate(-1deg); } }

/* ====== MASCOTES (figurinhas) ====== */
.crew { display: flex; gap: .6rem; padding: .2rem clamp(.6rem,3vw,1.5rem) .6rem; overflow-x: auto;
  scroll-snap-type: x proximity; justify-content: center; z-index: 2; -webkit-overflow-scrolling: touch; }
.crew::-webkit-scrollbar { display: none; }
.mascote { flex: 0 0 auto; scroll-snap-align: center; display: inline-grid; place-items: center; gap: 3px;
  width: clamp(62px, 17vw, 84px); padding: 6px 6px 4px; background: var(--paper); border: 4px solid var(--ink);
  border-radius: 14px; box-shadow: 5px 5px 0 var(--ink); transform: rotate(var(--rot, -4deg)); transition: transform .15s; }
.mascote .cara { font-size: clamp(30px, 9vw, 40px); line-height: 1; }
.mascote .balao { font-family: "Permanent Marker", cursive; font-size: 10px; color: var(--ink);
  background: var(--cream); border: 2px solid var(--ink); border-radius: 8px; padding: 1px 5px;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.1em; }
.mascote.win { animation: pula .5s ease 2; }
@keyframes pula { 50% { transform: rotate(var(--rot,-4deg)) translateY(-16px) scale(1.1); } }
.mascote.bj { animation: euforia .5s ease-in-out 3; }
@keyframes euforia { 50% { transform: rotate(var(--rot,-4deg)) scale(1.32); } }
.mascote.lose { animation: nega .5s ease; }
@keyframes nega { 50% { transform: rotate(var(--rot,-4deg)) scaleX(-1); } }
.mascote.bust { animation: tomba .5s ease forwards; }
@keyframes tomba { to { transform: rotate(90deg) translateY(8px); opacity: .55; } }
.mascote.panic { animation: panic .25s linear infinite; }
@keyframes panic { 50% { transform: rotate(calc(var(--rot,-4deg) + 4deg)) translateY(-2px); } }

/* ====== FX (overlays) ====== */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.boom { position: fixed; left: 50%; top: 46%; width: 44px; height: 44px; transform: translate(-50%,-50%);
  border-radius: 50%; pointer-events: none; background: radial-gradient(#fff8e7, #ffb320 38%, #ff3b00 70%, transparent 72%);
  animation: boom .5s ease-out forwards; }
.boom.win { background: radial-gradient(#fff8e7, #3ee87a 38%, #127a33 70%, transparent 72%); }
@keyframes boom { from { transform: translate(-50%,-50%) scale(.2); opacity: 1; } to { transform: translate(-50%,-50%) scale(7); opacity: 0; } }
.pow { position: fixed; left: 50%; top: 40%; transform: translate(-50%,-50%); pointer-events: none;
  font-family: "Permanent Marker", cursive; font-size: clamp(2.6rem, 13vw, 6rem); color: var(--gold);
  -webkit-text-stroke: 4px var(--ink); text-shadow: 6px 6px 0 var(--fire1);
  animation: soco .4s var(--ease) both, some .35s ease-in .55s forwards; }
@keyframes soco { 0% { transform: translate(-50%,-50%) scale(0) rotate(-12deg); } 70% { transform: translate(-50%,-50%) scale(1.2); } 100% { transform: translate(-50%,-50%) scale(1); } }
@keyframes some { to { opacity: 0; } }
.flash { position: fixed; inset: 0; pointer-events: none; background: var(--gold); opacity: 0; animation: flashAnim .45s ease-out; }
@keyframes flashAnim { 30% { opacity: .85; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .boom, .pow, .flash, .mascote.win, .mascote.bj, .table.treme { animation: none !important; } .boom, .pow, .flash { display: none; } }

.toast { position: fixed; bottom: 1rem; left: 50%; transform: translate(-50%, 40px); z-index: 70;
  font-family: "Permanent Marker", cursive; font-size: clamp(.8rem, 2.4vw, 1rem); color: var(--ink);
  background: var(--gold); border: 3px solid var(--ink); border-radius: 12px; padding: .6rem 1.1rem;
  box-shadow: var(--hard); opacity: 0; transition: .3s var(--ease); pointer-events: none; max-width: 92vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0) rotate(-1deg); }

/* ====== DRAWER + MODAIS ====== */
.scrim { position: fixed; inset: 0; background: rgba(10,4,2,.7); z-index: 49; opacity: 0; pointer-events: none; transition: .3s; }
.scrim.show { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(420px, 92vw); z-index: 50;
  background: var(--bg2); border-right: 5px solid var(--gold); box-shadow: 12px 0 40px rgba(0,0,0,.6);
  transform: translateX(-100%); transition: transform .35s var(--ease); display: flex; flex-direction: column; overflow-y: auto; }
.drawer.show { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.4rem 1rem; border-bottom: 3px solid rgba(255,207,46,.3); }
.drawer__title { font-family: "Lilita One", cursive; font-size: 1.6rem; color: var(--gold); -webkit-text-stroke: 1.5px var(--ink); }
.drawer__body { padding: 1.1rem 1.4rem 2rem; display: flex; flex-direction: column; gap: 1.2rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field__label { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: .82rem; color: var(--cream); display: flex; justify-content: space-between; align-items: baseline; }
.field__label .val { font-family: "Lilita One", cursive; color: var(--gold); }
.field input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px; background: var(--smoke); outline: none; border: 2px solid var(--ink); }
.field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); cursor: pointer; border: 3px solid var(--ink); }
.field input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 3px solid var(--ink); border-radius: 50%; background: var(--gold); cursor: pointer; }
.seg { display: flex; gap: .3rem; flex-wrap: wrap; }
.seg button { flex: 1; min-width: 3.2rem; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: .72rem;
  padding: .45rem .3rem; border: 3px solid var(--ink); border-radius: 8px; background: var(--cream); color: var(--ink); cursor: pointer; box-shadow: var(--hard-sm); }
.seg button.sel { background: var(--gold); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.switch { position: relative; width: 50px; height: 28px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; border-radius: 999px; background: var(--smoke); border: 3px solid var(--ink); transition: .2s; cursor: pointer; }
.switch .track::before { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--cream); top: 2px; left: 3px; transition: .2s var(--ease); }
.switch input:checked + .track { background: var(--money); }
.switch input:checked + .track::before { background: var(--gold); transform: translateX(22px); }
.drawer__note { font-family: "Fredoka", sans-serif; font-size: .72rem; color: var(--fire3); line-height: 1.5; border-top: 3px solid rgba(255,207,46,.2); padding-top: 1rem; }
.drawer__apply { margin-top: .3rem; }

.modal { position: fixed; inset: 0; z-index: 55; display: none; align-items: center; justify-content: center; padding: 1.2rem; }
.modal.show { display: flex; }
.modal__card { width: min(440px, 94vw); background: var(--paper); border: 5px solid var(--ink); border-radius: 18px;
  box-shadow: 8px 8px 0 var(--ink); padding: 1.5rem 1.6rem; position: relative; transform: rotate(-1deg); animation: modalIn .35s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) rotate(-1deg) scale(.96); } to { opacity: 1; transform: rotate(-1deg); } }
.modal__title { font-family: "Lilita One", cursive; font-size: 1.7rem; color: var(--fire1); -webkit-text-stroke: 1.5px var(--ink); margin: 0 0 .8rem; }
.modal__card p { font-family: "Fredoka", sans-serif; color: var(--ink); line-height: 1.5; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.2rem; }
.stat { display: flex; flex-direction: column; }
.stat .k { font-family: "Permanent Marker", cursive; font-size: .68rem; color: var(--smoke); }
.stat .v { font-family: "Lilita One", cursive; font-size: 1.4rem; color: var(--ink); }
.stat .v.pos { color: var(--money-dark); } .stat .v.neg { color: var(--lose); }
.modal__actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.2rem; flex-wrap: wrap; }

/* foco visível */
:focus-visible { outline: 3px solid var(--pop); outline-offset: 2px; }

/* ====== MOBILE ====== */
@media (max-width: 720px) {
  body { border-width: 4px; }
  .masthead { padding: .6rem .7rem .2rem; }
  .streak { order: 3; width: 100%; text-align: center; }
  .stage { padding: .3rem; }
  .table { width: 97vw; min-height: 56vh; padding: 14px; }
  .card { --cw: clamp(58px, 17vw, 92px); }
  .rail { grid-template-columns: 1fr; gap: .4rem; padding: .4rem .6rem 1rem; }
  .bank { align-items: center; }
  .actions { justify-content: center; }
  .actions .btn { flex: 1 1 28%; min-height: 50px; }
  .robot__text { display: none; }
  .robot { padding: .3rem; }
  .crew { justify-content: flex-start; }
}
@media (max-width: 420px) {
  .table { min-height: 50vh; }
  .chip { width: 46px; }
  .actions .btn { font-size: .72rem; padding: .5rem .35rem; }
}

/* ============================================================
   TELAS (router) + LOBBY + MESA ONLINE
   ============================================================ */
.screen { display: none; }
.screen.is-active { display: flex; flex-direction: column; flex: 1; min-height: 100dvh; }

/* --- HOME / LOBBY --- */
.home { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.2rem; gap: 1rem; }
.home__brand { text-align: center; }
.home-card { width: min(440px, 94vw); background: var(--paper); border: 5px solid var(--ink); border-radius: 18px;
  box-shadow: 8px 8px 0 var(--ink); padding: 1.3rem 1.3rem 1.1rem; display: flex; flex-direction: column; gap: .8rem; transform: rotate(-1deg); }
.home__big { width: 100%; font-size: clamp(1rem, 4vw, 1.3rem); padding: .8rem; }
.home__online { display: flex; flex-direction: column; gap: .7rem; border-top: 3px dashed var(--ink); padding-top: .9rem; }
.home__title { font-family: "Permanent Marker", cursive; color: var(--ink); text-align: center; font-size: 1.1rem; }
.home__or { text-align: center; font-family: "Fredoka"; color: var(--smoke); font-size: .8rem; }
.home__join { display: flex; gap: .5rem; }
.field-input { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 16px; padding: .7rem .8rem;
  border: 3px solid var(--ink); border-radius: 10px; background: var(--cream); color: var(--ink); width: 100%; outline: none; }
.field-input:focus-visible { outline: 3px solid var(--pop); }
.code-input { font-family: "Lilita One", cursive; text-transform: uppercase; letter-spacing: .3em; text-align: center; flex: 1; }
.conn-status { text-align: center; font-family: "Permanent Marker"; color: var(--fire1); font-size: .8rem; min-height: 1em; }

/* --- ONLINE header --- */
.online-head { align-items: center; }
.room-badge { display: flex; align-items: center; gap: .4rem; font-family: "Permanent Marker", cursive; color: var(--cream); font-size: 1rem; }
.room-badge b { font-family: "Lilita One", cursive; color: var(--gold); -webkit-text-stroke: 1.5px var(--ink); font-size: 1.6rem; letter-spacing: .1em; }
.icon-btn--sm { width: 34px; height: 34px; font-size: 16px; }
.online-status { text-align: center; font-family: "Permanent Marker", cursive; color: var(--gold); font-size: clamp(.9rem, 3.4vw, 1.2rem); padding: .3rem; min-height: 1.6em; }
.code-big { font-family: "Lilita One", cursive; color: var(--gold); font-size: clamp(3rem, 16vw, 6rem); line-height: 1; letter-spacing: .12em;
  -webkit-text-stroke: 4px var(--ink); text-shadow: 5px 5px 0 var(--fire1), 9px 9px 0 var(--ink); cursor: pointer; }
.code-hint { font-family: "Permanent Marker"; color: var(--cream); font-size: .85rem; margin-top: .3rem; }

/* --- ASSENTOS --- */
.seats-row { display: flex; flex-wrap: wrap; gap: clamp(.6rem, 2.5vw, 1.4rem); align-items: flex-end; justify-content: center; z-index: 2; padding: .3rem; }
.table[data-mode="x1"] .seats-row { flex-direction: column; align-items: center; }
.seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .5rem; border-radius: 14px;
  border: 3px solid transparent; transition: .2s var(--ease); min-width: 90px; }
.seat--me { border-color: var(--gold); background: rgba(255,207,46,.08); box-shadow: 0 0 0 2px rgba(255,207,46,.3); }
.seat--turn { animation: seatTurn 1s ease-in-out infinite alternate; }
@keyframes seatTurn { from { box-shadow: 0 0 0 2px var(--gold); } to { box-shadow: 0 0 22px 3px var(--gold); } }
.seat--turn::before { content: "🔥"; position: absolute; transform: translateY(-2.4em); font-size: 1.4rem; animation: bobFlame .6s ease-in-out infinite alternate; }
@keyframes bobFlame { to { transform: translateY(-2.8em) scale(1.15); } }
.seat--gone { opacity: .5; filter: grayscale(.6); }
.seat--empty { color: var(--cream); opacity: .5; font-family: "Permanent Marker"; min-height: 90px; justify-content: center; border: 3px dashed rgba(255,255,255,.25); }
.seat__head { display: flex; gap: .5rem; align-items: baseline; font-family: "Fredoka"; font-weight: 600; }
.seat__name { color: var(--cream); font-size: .85rem; max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat--me .seat__name { color: var(--gold); }
.seat__bank { font-family: "Lilita One", cursive; color: var(--money); -webkit-text-stroke: 1px var(--ink); font-size: .9rem; }
.seat__foot { display: flex; align-items: center; gap: .4rem; }
.seat__bet { font-family: "Lilita One", cursive; color: var(--gold); -webkit-text-stroke: 1px var(--ink); font-size: .85rem; }
.seat .split-extra { margin-top: .3rem; }
.ready-pill { font-family: "Permanent Marker", cursive; font-size: .7rem; color: var(--cream); background: rgba(20,7,0,.5);
  border: 2px solid rgba(255,255,255,.2); border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; }
.ready-pill.on { color: var(--ink); background: var(--money); border-color: var(--ink); }
.result-tag.win { color: var(--win); border-color: var(--win); }
.result-tag.lose { color: var(--lose); border-color: var(--lose); }
.result-tag.push { color: var(--push); border-color: var(--push); }
.seat__foot .result-tag { font-family: "Permanent Marker", cursive; font-size: .62rem; padding: .1em .4em; border: 2px solid currentColor; border-radius: 6px; }

/* --- bet online --- */
.bet-num { font-family: "Lilita One", cursive; color: var(--gold); -webkit-text-stroke: 1.5px var(--ink); font-size: 1.3rem; }
.online-rail .bet-zone { gap: .5rem; }

@media (max-width: 720px) {
  .room-badge b { font-size: 1.3rem; }
  .seats-row { gap: .5rem; }
  .seat { min-width: 76px; padding: .35rem; }
  .home-card { padding: 1rem; }
}