/* POST OR PERISH — linguagem visual de thumbnail: adesivo com contorno grosso, sombra dura, amarelo/vermelho de capa,
   sobre o quarto escuro iluminado pelo monitor. Mundo visual único (não segue tema claro/escuro do sistema). */
:root {
  --ink: #13111c;
  --night-1: #2a2352;
  --night-2: #120f22;
  --panel: #2b2550;
  --panel-2: #3a3270;
  --paper: #fff9ee;
  --paper-2: #efe4cf;
  --yt: #ff3b3b;
  --yt-dark: #b81f2a;
  --reach: #2f8cff;
  --reach-dark: #1b4fa8;
  --gold: #ffd23f;
  --amber: #ffb020;
  --mint: #23d18b;
  --text: #fdfbff;
  --muted: #b9b2d9;
  --display: 'Lilita One', 'Arial Black', 'Segoe UI Black', system-ui, sans-serif;
  --body: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --cw: 110px;
  --gap: 12px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--night-2); color: var(--text); font-family: var(--body); overflow: hidden;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
button { font-family: inherit; color: inherit; cursor: pointer; }
button:focus-visible, .card-slot:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
img { max-width: 100%; -webkit-user-drag: none; }

#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }
#app { position: relative; z-index: 1; height: 100%; }

/* ---------- elementos comuns ---------- */
.sticker {
  background: var(--panel); border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: 0 5px 0 var(--ink), 0 14px 30px rgba(0,0,0,.35);
}
.btn {
  font: 900 15px/1 var(--body); letter-spacing: .02em; padding: 12px 18px; border-radius: 14px;
  border: 3px solid var(--ink); background: var(--panel-2); color: var(--text);
  box-shadow: 0 4px 0 var(--ink); transition: transform .08s, box-shadow .08s, filter .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.btn.red { background: var(--yt); }
.btn.gold { background: var(--gold); color: var(--ink); }
.btn.blue { background: var(--reach); }
.btn.mint { background: var(--mint); color: var(--ink); }
.btn.big { font: 400 26px/1 var(--display); letter-spacing: .03em; padding: 14px 28px; border-radius: 18px; box-shadow: 0 6px 0 var(--ink); }
.btn img { width: 22px; height: 22px; }
.title-stroke {
  font-family: var(--display); color: var(--gold); letter-spacing: .02em;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  border: 2px solid var(--ink); font: 900 12px/1.2 var(--body); background: var(--panel-2);
}
.chip img { width: 18px; height: 18px; }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ---------- MENU ---------- */
#menu { height: 100%; display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-left, 0px)) 24px max(16px, env(safe-area-inset-right, 0px)); }
.menu-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; max-width: 720px; }
.logo { position: relative; display: flex; flex-direction: column; align-items: center; line-height: .86; transform: rotate(-3deg); }
.logo .l1 { font: 400 clamp(64px, 14vw, 132px) var(--display); color: #fff; -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; text-shadow: 0 9px 0 var(--ink); }
.logo .l2 { font: 400 clamp(26px, 5vw, 44px) var(--display); color: var(--ink); background: var(--gold); border: 4px solid var(--ink); border-radius: 12px; padding: 2px 14px 6px; margin: -4px 0 -2px; transform: rotate(4deg); box-shadow: 0 5px 0 var(--ink); z-index: 2; }
.logo .l3 { font: 400 clamp(64px, 14vw, 132px) var(--display); color: var(--yt); -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; text-shadow: 0 9px 0 var(--ink); }
.logo .playbadge { position: absolute; right: -8%; top: -14%; width: clamp(58px, 11vw, 96px); transform: rotate(12deg); filter: drop-shadow(0 6px 0 var(--ink)); }
.tagline { font: 800 clamp(16px, 2.4vw, 21px) var(--body); color: var(--text); max-width: 34ch; text-wrap: balance; }
.menu-btns { display: flex; flex-direction: column; gap: 12px; align-items: stretch; width: min(340px, 100%); }
.menu-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.toggle { font: 800 13px var(--body); padding: 9px 14px; }
.toggle b { color: var(--gold); }
.best-line { font: 800 13px var(--body); color: var(--muted); }
.floaty { position: fixed; width: clamp(56px, 8vw, 110px); pointer-events: none; z-index: 0; filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); animation: bob 5s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-16px) rotate(calc(var(--r, 0deg) + 6deg)); } }

/* ---------- JOGO ---------- */
#game { height: 100%; display: grid; gap: var(--gap); padding: 12px max(16px, env(safe-area-inset-left, 0px)) 12px max(16px, env(safe-area-inset-right, 0px)); }
.side { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.main { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }

/* boleto */
.bill { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); padding: 12px 14px 14px; position: relative; overflow: hidden; }
.bill::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px); opacity: .18; }
.bill-head { display: flex; align-items: center; gap: 10px; }
.bill-head img { width: 44px; height: 44px; flex: none; }
.bill-name { font: 400 22px/1 var(--display); letter-spacing: .02em; }
.bill-month { font: 900 11px var(--body); letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.bill.boss { background: #ffe9e9; }
.bill.boss .bill-name { color: var(--yt-dark); }
.bill-goal { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font: 800 12px var(--body); text-transform: uppercase; letter-spacing: .05em; }
.bill-goal .num { font-size: 26px; color: var(--ink); text-transform: none; }
.progress { height: 18px; border: 3px solid var(--ink); border-radius: 999px; background: var(--paper-2); overflow: hidden; margin-top: 6px; position: relative; }
.progress i { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(90deg, var(--mint), #8af7c4); border-right: 3px solid var(--ink); transition: width .5s cubic-bezier(.2,.9,.3,1.2); }
.progress span { position: absolute; inset: 0; display: grid; place-items: center; font: 900 11px var(--body); }
.bill-reward { margin-top: 6px; font: 800 12px var(--body); opacity: .75; }
.stamp { position: absolute; right: 8px; top: 18px; font: 400 34px var(--display); color: var(--yt); border: 5px solid var(--yt); border-radius: 10px; padding: 0 10px; transform: rotate(-14deg) scale(0); opacity: 0; letter-spacing: .06em; }
.stamp.on { animation: stamp .45s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes stamp { 0% { transform: rotate(-14deg) scale(3); opacity: 0; } 100% { transform: rotate(-14deg) scale(1); opacity: .9; } }
.event { border-radius: 12px; border: 3px solid var(--ink); background: var(--yt); padding: 8px 10px; font: 800 12.5px/1.3 var(--body); display: flex; gap: 8px; align-items: center; box-shadow: 0 4px 0 var(--ink); }
.event img { width: 30px; height: 30px; flex: none; }
.event b { display: block; font: 400 15px var(--display); letter-spacing: .03em; }
.trend { border-radius: 12px; border: 3px solid var(--ink); padding: 7px 10px; font: 900 12.5px var(--body); display: flex; gap: 8px; align-items: center; box-shadow: 0 4px 0 var(--ink); color: #fff; }
.trend img { width: 26px; height: 26px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: var(--panel); border: 3px solid var(--ink); border-radius: 12px; padding: 6px 10px; box-shadow: 0 4px 0 var(--ink); min-width: 0; }
.stat small { display: block; font: 900 10px var(--body); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.stat .num { font-size: 22px; line-height: 1.1; display: block; }
.stat.up .num { color: var(--reach); }
.stat.br .num { color: var(--yt); }
.stat.mo .num { color: var(--gold); }
.stat.su .num { color: #fff; }
.channel { background: #0f0d1a; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 10px; box-shadow: 0 4px 0 var(--ink); display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.channel > small { font: 900 10px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.channel .vid { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; font: 700 11.5px/1.2 var(--body); animation: pop .3s ease; }
.channel .vid i { width: 34px; height: 20px; border-radius: 4px; display: grid; place-items: center; border: 1px solid #000; }
.channel .vid i img { width: 16px; height: 16px; }
.channel .vid span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ddd; }
.channel .vid b { font-size: 13px; color: var(--gold); font-weight: 400; }
.channel .vid.empty { display: block; color: var(--muted); font-style: italic; }
.side-btns { display: flex; gap: 8px; margin-top: auto; }
.side-btns .btn { flex: 1; padding: 10px 8px; font-size: 13px; }

/* estante */
.shelf { display: flex; gap: 8px; align-items: stretch; background: linear-gradient(#5a3b2a, #3e2719); border: 3px solid var(--ink); border-radius: 14px; padding: 8px; box-shadow: 0 5px 0 var(--ink), inset 0 -6px 0 rgba(0,0,0,.25); }
.shelf-group { display: flex; gap: 8px; flex: 1; min-width: 0; }
.shelf-group.tools { flex: 0 0 auto; padding-left: 10px; border-left: 3px dashed rgba(255,255,255,.18); }
.slot { flex: 1 1 0; min-width: 0; max-width: 92px; aspect-ratio: 1; border-radius: 12px; border: 2px dashed rgba(255,255,255,.22); display: grid; place-items: center; position: relative; }
.shelf-group.tools .slot { width: 64px; flex: none; border-color: rgba(120,200,255,.35); }
.slot.filled { border: 3px solid var(--ink); background: radial-gradient(circle at 50% 35%, #fff6 0, #ffffff14 60%), var(--panel-2); box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.slot.filled.ai { background: radial-gradient(circle at 50% 35%, #9ee7ff66 0, #ffffff10 60%), #2a3c6e; }
.slot.filled.tool { background: radial-gradient(circle at 50% 35%, #b9f5ff77 0, #ffffff10 60%), #1f4f66; }
.slot img { width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 4px 3px rgba(0,0,0,.4)); pointer-events: none; }
.slot .ailabel { position: absolute; top: -7px; right: -7px; font: 900 9px var(--body); background: #7fdcff; color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; padding: 1px 4px; }
.slot.off { filter: grayscale(1) brightness(.6); }
.slot.jig { animation: jig .35s ease; }
@keyframes jig { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-8deg); } 70% { transform: scale(.95) rotate(5deg); } 100% { transform: scale(1); } }

/* palco: monitor + placar */
.stage { flex: 1 1 auto; min-height: 0; container: stage / size; position: relative; }
.stage-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.monitor { width: max(220px, min(100cqw, calc((100cqh - 150px) * 1.7778), 660px)); background: #0f0d1a; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink), 0 0 60px rgba(120,140,255,.18); padding: 8px; position: relative; }
.thumb { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; position: relative; border: 2px solid #000; background: #3a3555; isolation: isolate; }
.thumb .rays { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.16) 0 9deg, transparent 9deg 22deg); animation: spin 40s linear infinite; z-index: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.thumb .vign { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.45)); z-index: 1; }
.thumb .tmain { position: absolute; z-index: 2; inset: 6% 6% 6% 30%; display: flex; align-items: center; justify-content: center; gap: 2%; }
.thumb .tmain img { width: 46%; max-height: 92%; object-fit: contain; filter: drop-shadow(0 6px 4px rgba(0,0,0,.5)); animation: pop .35s cubic-bezier(.2,1.6,.4,1); }
.thumb .tmain.n2 img { width: 40%; }
.thumb .tmain.n3 img { width: 31%; }
.thumb .tmain img:nth-child(2) { transform: translateY(8%) rotate(6deg); }
.thumb .tmain img:nth-child(3) { transform: translateY(-6%) rotate(-7deg); }
.thumb .tface { position: absolute; z-index: 3; left: 3%; bottom: -4%; width: 34%; filter: drop-shadow(0 6px 4px rgba(0,0,0,.55)); animation: pop .35s cubic-bezier(.2,1.6,.4,1); }
.thumb .ttag { position: absolute; z-index: 4; left: 4%; top: 6%; max-width: 62%; font: 400 clamp(14px, 5.2cqw, 44px)/1 var(--display); color: var(--gold); -webkit-text-stroke: 5px #000; paint-order: stroke fill; transform: rotate(-4deg); text-shadow: 0 4px 0 #000; letter-spacing: .02em; }
.thumb .tarrow { position: absolute; z-index: 4; width: 18%; left: 31%; top: 30%; transform: rotate(20deg); filter: drop-shadow(0 3px 0 #000); }
.thumb .tdur { position: absolute; z-index: 4; right: 3%; bottom: 4%; background: rgba(0,0,0,.85); color: #fff; font: 800 11px var(--body); padding: 2px 6px; border-radius: 4px; }
.thumb .tempty { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; font: 800 15px var(--body); color: rgba(255,255,255,.72); padding: 10px; }
.thumb .tempty img { width: 56px; display: block; margin: 0 auto 6px; opacity: .85; }
.thumb.gold { box-shadow: 0 0 0 3px var(--gold), 0 0 30px var(--gold); }
@keyframes pop { 0% { scale: .3; opacity: 0; } 100% { scale: 1; opacity: 1; } }
.vmeta { display: flex; gap: 10px; padding: 8px 4px 2px; align-items: flex-start; }
.avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--yt); border: 2px solid #fff3; display: grid; place-items: center; overflow: hidden; }
.avatar img { width: 80%; }
.vtitle { font: 800 15px/1.25 var(--body); color: #fff; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.vsub { font: 700 12px var(--body); color: #aaa; margin-top: 2px; }
.vsub b { color: #fff; font-family: var(--display); font-weight: 400; font-size: 14px; letter-spacing: .02em; }
.comments { position: absolute; right: -6px; bottom: 70px; width: min(250px, 46%); pointer-events: none; z-index: 8; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.cmt { background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 12px 12px 4px 12px; padding: 5px 9px; font: 700 12px/1.25 var(--body); box-shadow: 0 3px 0 var(--ink); max-width: 100%; }
.cmt b { display: block; font: 900 10.5px var(--body); color: #666; }
.cmt.bad { background: #ffe1e1; }

.scoreline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.formula { font: 400 20px/1 var(--display); letter-spacing: .03em; color: #fff; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.formula small { font: 900 12px var(--body); color: var(--muted); }
.formula.bad { color: #ff9a9a; }
.formula.top { color: var(--gold); }
.boxes { display: flex; align-items: center; gap: 6px; }
.box { min-width: 92px; padding: 6px 12px; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink); text-align: center; }
.box small { display: block; font: 900 9.5px var(--body); letter-spacing: .1em; opacity: .9; }
.box .num { font-size: 26px; line-height: 1; display: block; }
.box.reach { background: var(--reach); }
.box.ret { background: var(--yt); }
.times { font: 400 26px var(--display); color: #fff; }
.box.bump { animation: bump .22s ease; }
@keyframes bump { 50% { transform: scale(1.18) rotate(-3deg); } }

/* tela larga e baixa: placar ao lado do monitor */
@container stage (min-aspect-ratio: 2 / 1) {
  .stage-in { flex-direction: row; gap: 20px; }
  .monitor { width: max(220px, min(calc(100cqw - 260px), calc((100cqh - 74px) * 1.7778), 720px)); }
  .scoreline { flex-direction: column; align-items: stretch; width: 210px; gap: 8px; }
  .formula { justify-content: center; text-align: center; flex-wrap: wrap; font-size: 22px; }
  .boxes { flex-direction: column; align-items: stretch; gap: 4px; }
  .box .num { font-size: 34px; }
  .times { text-align: center; line-height: .8; }
}

/* pontuação: as cartas jogadas sobem, o resto da mão apaga */
.hand.scoring .card-slot:not(.playing) { opacity: .28; transform: translateY(16px) scale(.92); filter: grayscale(.6); }
.card-slot.playing { transform: translateY(-26px); z-index: 2; }
.card-slot.playing .card { box-shadow: 0 5px 0 var(--ink), 0 0 0 3px var(--gold), 0 0 30px rgba(255,210,63,.8); animation: none; }

/* mão */
.hand-wrap { position: relative; }
.hand { display: flex; justify-content: center; gap: 8px; padding-top: 22px; min-height: calc(var(--cw) * 1.4 + 26px); }
.hand.many .card-slot + .card-slot { margin-left: calc(var(--cw) * -.28); }
.card-slot { width: var(--cw); height: calc(var(--cw) * 1.4); position: relative; transition: transform .16s cubic-bezier(.2,1.4,.4,1); cursor: pointer; flex: none; outline: none; }
.card-slot.sel { transform: translateY(-20px); }
.card-slot.sel .card { box-shadow: 0 5px 0 var(--ink), 0 0 0 3px var(--gold), 0 0 26px rgba(255,210,63,.65); }
.card-slot.blocked { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.card {
  position: absolute; inset: 0; border-radius: calc(var(--cw) * .11); background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink), 0 10px 18px rgba(0,0,0,.35);
  display: flex; flex-direction: column; overflow: hidden; transform-style: preserve-3d; transition: transform .12s ease-out;
  animation: idle 4s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes idle { 0%,100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.card .band { height: 21%; background: var(--tc); border-bottom: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; gap: 4px; font: 900 calc(var(--cw) * .088) var(--body); color: #fff; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.4); flex: none; }
.card.twist .band { color: var(--ink); text-shadow: none; }
.card .art { flex: 1; display: grid; place-items: center; min-height: 0; position: relative; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--tc) 28%, transparent) 0, transparent 70%); }
.card .art img { width: 60%; height: auto; max-height: 92%; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.card .name { font: 900 calc(var(--cw) * .098)/1.08 var(--body); text-align: center; padding: 0 6% 9%; min-height: calc(var(--cw) * .098 * 2.25); display: flex; align-items: center; justify-content: center; flex: none; text-wrap: balance; }
.card .val { position: absolute; top: 24%; right: 5%; font: 400 calc(var(--cw) * .13)/1 var(--display); padding: 3px 6px 4px; border-radius: 8px; border: 2px solid var(--ink); color: #fff; z-index: 2; }
.card .val.r { background: var(--reach); }
.card .val.m { background: var(--yt); }
.card .val.x { background: var(--gold); color: var(--ink); }
.card .best { position: absolute; top: 24%; left: 5%; width: calc(var(--cw) * .2); height: calc(var(--cw) * .2); border-radius: 50%; border: 2px solid var(--ink); background: var(--bc); display: grid; place-items: center; z-index: 2; }
.card .best img { width: 80%; }
.card .trendfire { position: absolute; top: 24%; left: 5%; width: calc(var(--cw) * .24); z-index: 2; animation: flick 1s infinite alternate; }
@keyframes flick { to { transform: scale(1.12) rotate(-6deg); } }
.card.ed-shiny::after, .card.ed-holo::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit; }
.card.ed-shiny::after { background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.85) 45%, transparent 60%); background-size: 260% 100%; animation: sheen 2.4s linear infinite; mix-blend-mode: screen; }
.card.ed-holo::after { background: linear-gradient(125deg, #ff6ad5, #c774e8, #ad8cff, #8795e8, #94d0ff, #6effc1, #ffe66e, #ff6ad5); background-size: 300% 300%; animation: holo 4s linear infinite; mix-blend-mode: overlay; opacity: .75; }
@keyframes sheen { from { background-position: 130% 0; } to { background-position: -130% 0; } }
@keyframes holo { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
.card-slot.ed-viral::before { content: ''; position: absolute; inset: -5px; border-radius: calc(var(--cw) * .13); background: conic-gradient(from var(--a, 0deg), #ff3b3b, #ffd23f, #23d18b, #2f8cff, #b04cff, #ff3b3b); animation: rot 2s linear infinite; filter: blur(1px); z-index: -1; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes rot { to { --a: 360deg; } }
.ed-tag { position: absolute; bottom: 24%; left: 50%; translate: -50% 0; font: 900 calc(var(--cw) * .072) var(--body); background: var(--ink); color: #fff; padding: 1px 6px; border-radius: 6px; z-index: 4; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

.actions { display: flex; align-items: center; justify-content: center; gap: 12px; }
.actions .btn.big { min-width: 190px; }
.actions .btn.post { background: var(--yt); }
.actions .btn.post .play { width: 0; height: 0; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; filter: drop-shadow(0 2px 0 var(--ink)); }
.actions .btn.brain { font-size: 18px; }
.actions .cnt { font: 900 12px var(--body); background: var(--ink); color: #fff; border-radius: 8px; padding: 2px 7px; }
.mini-btns { display: none; gap: 6px; }
.mini-btns .btn { padding: 8px; }
.mini-btns .btn img { width: 22px; height: 22px; }
.deckpile { display: flex; align-items: center; gap: 8px; font: 900 12px var(--body); color: var(--muted); }
.deckpile .pile { width: 34px; height: 46px; border-radius: 6px; border: 3px solid var(--ink); background: repeating-linear-gradient(45deg, var(--yt) 0 6px, var(--yt-dark) 6px 12px); box-shadow: 3px 3px 0 var(--ink), 6px 6px 0 #0006; }
.hint { font: 800 13px var(--body); color: var(--muted); text-align: center; min-height: 18px; }

/* números flutuantes */
.floater { position: fixed; z-index: 70; pointer-events: none; font: 400 26px var(--display); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); white-space: nowrap; translate: -50% -50%; }
.floater.r { color: #8cc4ff; }
.floater.m { color: #ff8f8f; }
.floater.x { color: var(--gold); font-size: 32px; }
.floater.cash { color: var(--mint); }
.floater.t { color: #fff; font-size: 20px; }
.floater.big { font-size: clamp(40px, 8vw, 84px); -webkit-text-stroke: 9px var(--ink); text-shadow: 0 6px 0 var(--ink); color: var(--gold); }

/* ---------- OVERLAYS ---------- */
.ov { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px max(16px, env(safe-area-inset-left, 0px)) 20px max(16px, env(safe-area-inset-right, 0px)); background: rgba(10,8,22,.72); backdrop-filter: blur(4px); overflow-y: auto; }
.ov[hidden] { display: none !important; }
.panel { width: min(760px, 100%); padding: 22px; display: flex; flex-direction: column; gap: 16px; animation: panelIn .32s cubic-bezier(.2,1.4,.4,1); max-height: calc(100vh - 40px); overflow-y: auto; }
@keyframes panelIn { from { transform: translateY(40px) scale(.94); opacity: 0; } }
.panel h2 { margin: 0; font-size: clamp(28px, 5vw, 44px); line-height: 1; text-align: center; }
.panel .sub { text-align: center; font: 800 15px var(--body); color: var(--muted); margin-top: -6px; text-wrap: balance; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.choice { background: var(--panel-2); border: 3px solid var(--ink); border-radius: 16px; padding: 16px; box-shadow: 0 5px 0 var(--ink); text-align: left; display: flex; flex-direction: column; gap: 6px; transition: transform .1s; }
.choice:hover { transform: translateY(-3px) rotate(-.6deg); }
.choice img { width: 64px; height: 64px; }
.choice b { font: 400 22px/1.05 var(--display); letter-spacing: .02em; }
.choice span { font: 700 14px/1.35 var(--body); color: var(--muted); }
.choice.learn { background: #1f5c47; }
.choice.fun { background: #5b2a6e; }
.note { text-align: center; font: 700 13px var(--body); color: var(--muted); }

.month-bills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mb { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; padding: 12px; box-shadow: 0 5px 0 var(--ink); display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; min-width: 0; }
.mb img { width: 48px; }
.mb b { font: 400 18px var(--display); }
.mb .num { font-size: 20px; }
.mb small { font: 800 11px var(--body); opacity: .7; }
.mb.boss { background: #ffe1e1; }
.mb .ev { font: 800 11.5px/1.3 var(--body); color: var(--yt-dark); }

.pay-rows { display: flex; flex-direction: column; gap: 8px; }
.pay-row { display: flex; justify-content: space-between; align-items: center; background: var(--panel-2); border: 3px solid var(--ink); border-radius: 12px; padding: 8px 14px; font: 800 15px var(--body); box-shadow: 0 3px 0 var(--ink); }
.pay-row .num { color: var(--gold); font-size: 22px; }
.pay-row.total { background: var(--gold); color: var(--ink); }
.pay-row.total .num { color: var(--ink); }

.shop-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
.shop-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.shop-col h3 { margin: 0; font: 400 18px var(--display); color: var(--muted); letter-spacing: .04em; }
.offer { display: flex; gap: 12px; align-items: center; background: var(--panel-2); border: 3px solid var(--ink); border-radius: 14px; padding: 10px; box-shadow: 0 4px 0 var(--ink); min-width: 0; }
.offer > img { width: 58px; height: 58px; flex: none; filter: drop-shadow(0 4px 3px rgba(0,0,0,.4)); }
.offer .info { flex: 1; min-width: 0; }
.offer .info b { font: 400 17px/1.1 var(--display); letter-spacing: .02em; display: block; }
.offer .info span { font: 700 12.5px/1.3 var(--body); color: var(--muted); display: block; }
.offer .info .tipline { color: #9fe8c4; margin-top: 3px; }
.offer .btn { padding: 9px 12px; font-size: 14px; flex: none; }
.offer.sold { opacity: .35; }
.offer .tagai { font: 900 9px var(--body); background: #7fdcff; color: var(--ink); border-radius: 5px; padding: 1px 4px; margin-left: 4px; vertical-align: middle; }
.sell-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sellchip { padding: 6px 10px 6px 6px; font-size: 12.5px; gap: 6px; box-shadow: 0 3px 0 var(--ink); }
.sellchip img { width: 26px; height: 26px; }
.sellchip b { color: var(--gold); }
.shop-foot { display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.wallet { font: 400 26px var(--display); color: var(--gold); display: flex; align-items: center; gap: 8px; }
.wallet img { width: 34px; }

.pack-stage { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; perspective: 900px; min-height: 160px; }
.pack-card { --cw: clamp(96px, 22vw, 140px); width: var(--cw); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.pack-card .card-slot { cursor: default; }
.pack-card .flipper { width: var(--cw); height: calc(var(--cw) * 1.4); position: relative; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,1.3,.4,1); }
.pack-card .flipper.open { transform: rotateY(180deg); }
.pack-card .back, .pack-card .front { position: absolute; inset: 0; backface-visibility: hidden; }
.pack-card .front { transform: rotateY(180deg); }
.pack-card .back { border-radius: calc(var(--cw) * .11); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); background: repeating-linear-gradient(45deg, var(--yt) 0 10px, var(--yt-dark) 10px 20px); display: grid; place-items: center; }
.pack-card .back img { width: 50%; filter: drop-shadow(0 4px 0 var(--ink)); }
.pack-card .desc { font: 700 12px/1.3 var(--body); color: var(--muted); text-align: center; min-height: 3.6em; }
.formula-card { width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: calc(var(--cw) * .11); border: 3px solid var(--ink); background: linear-gradient(160deg, #3b2f86, #1b1640); box-shadow: 0 5px 0 var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 8px; }
.formula-card img { width: 46%; }
.formula-card b { font: 400 calc(var(--cw) * .12)/1 var(--display); color: var(--gold); }
.formula-card span { font: 800 calc(var(--cw) * .085)/1.2 var(--body); color: #fff; }
.tool-card { width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: calc(var(--cw) * .11); border: 3px solid var(--ink); background: linear-gradient(160deg, #1f6f8b, #133447); box-shadow: 0 5px 0 var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 8px; }
.tool-card img { width: 50%; }
.tool-card b { font: 400 calc(var(--cw) * .12)/1 var(--display); color: #bff3ff; }
.tool-card span { font: 800 calc(var(--cw) * .082)/1.2 var(--body); color: #fff; }

.how-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.how-step { background: var(--panel-2); border: 3px solid var(--ink); border-radius: 14px; padding: 12px; box-shadow: 0 4px 0 var(--ink); display: flex; flex-direction: column; gap: 6px; }
.how-step img { width: 48px; }
.how-step b { font: 400 18px/1.1 var(--display); color: var(--gold); letter-spacing: .02em; }
.how-step span { font: 700 13.5px/1.35 var(--body); color: var(--text); }
/* celular: ícone ao lado do texto, senão os botões do fim do treino ficam abaixo da dobra */
@media (max-width: 640px) {
  .how-list { gap: 8px; }
  .how-step { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; row-gap: 2px; padding: 8px 10px; align-items: start; }
  .how-step img { width: 36px; grid-row: span 2; }
  .how-step b { font-size: 15px; }
  .how-step span { font-size: 12.5px; }
}

.ftable { display: flex; flex-direction: column; gap: 6px; }
.frow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: center; background: var(--panel-2); border: 2px solid var(--ink); border-radius: 10px; padding: 7px 10px; }
.frow b { font: 400 15px var(--display); letter-spacing: .02em; }
.frow b small { font: 900 11px var(--body); color: var(--muted); margin-left: 4px; }
.frow span { font: 700 12px/1.3 var(--body); color: var(--muted); }
.frow .rr { font: 400 14px var(--display); white-space: nowrap; }
.frow .rr .a { color: #8cc4ff; } .frow .rr .m { color: #ff8f8f; }
.frow .lesson { grid-column: 1 / -1; font: 700 12.5px/1.35 var(--body); color: #9fe8c4; }
.frow.bad b { color: #ff9a9a; }

.end-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }
.end-thumb .monitor { width: 100%; }
.end-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mission { background: #1f5c47; border: 3px solid var(--ink); border-radius: 14px; padding: 12px 14px; box-shadow: 0 4px 0 var(--ink); font: 700 14px/1.4 var(--body); }
.mission b { display: block; font: 400 18px var(--display); color: #9ff5c9; margin-bottom: 4px; letter-spacing: .02em; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* toasts de lição e marcos */
#toasts { position: fixed; z-index: 55; right: max(14px, env(safe-area-inset-right, 0px)); top: 14px; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 28px)); pointer-events: none; }
.toast { pointer-events: auto; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; animation: toastIn .35s cubic-bezier(.2,1.4,.4,1); font: 700 13px/1.35 var(--body); cursor: pointer; }
.toast img { width: 38px; flex: none; }
.toast b { display: block; font: 400 15px var(--display); letter-spacing: .02em; color: #1f7a55; }
.toast.ms b { color: var(--yt-dark); }
.toast.out { animation: toastOut .3s forwards; }
@keyframes toastIn { from { transform: translateX(120%); } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }

/* tooltip */
#tip { position: fixed; z-index: 80; pointer-events: none; width: min(270px, calc(100vw - 24px)); background: var(--ink); color: #fff; border: 2px solid #fff3; border-radius: 12px; padding: 10px 12px; font: 700 12.5px/1.4 var(--body); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#tip b { display: block; font: 400 16px var(--display); letter-spacing: .02em; color: var(--gold); }
#tip .tl { color: #9fe8c4; margin-top: 6px; display: block; }
#tip .act { display: flex; gap: 6px; margin-top: 8px; pointer-events: auto; }
#tip.interactive { pointer-events: auto; }

/* banner central (VIRALIZOU, CONTA PAGA) */
.banner { position: fixed; z-index: 65; left: 50%; top: 42%; translate: -50% -50%; pointer-events: none; text-align: center; }
.banner .t { font: 400 clamp(46px, 10vw, 110px)/1 var(--display); color: var(--gold); -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; text-shadow: 0 8px 0 var(--ink); white-space: nowrap; }
.banner .s { font: 900 clamp(15px, 2.4vw, 22px) var(--body); color: #fff; text-shadow: 0 3px 0 var(--ink); margin-top: 6px; }

/* ---------- LAYOUT DESKTOP (paisagem) ---------- */
@media (min-aspect-ratio: 5/4) and (min-width: 820px) {
  #game { grid-template-columns: clamp(230px, 21vw, 300px) minmax(0, 1fr); }
  :root { --cw: clamp(70px, min(6.9vw, 14vh), 136px); }
  .side { overflow-y: auto; }
}

/* ---------- LAYOUT CELULAR (retrato) ---------- */
@media not ((min-aspect-ratio: 5/4) and (min-width: 820px)) {
  :root { --cw: min(calc((100vw - 32px - 24px) / 4), 12vh, 120px); --gap: 8px; }
  #game { grid-template-rows: auto minmax(0, 1fr); padding-top: max(8px, env(safe-area-inset-top, 0px)); padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  .side { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
  .side .bill { grid-column: 1 / 2; padding: 8px 10px 9px; }
  .bill-head img { width: 30px; height: 30px; }
  .bill-name { font-size: 17px; }
  .bill-goal { margin-top: 4px; }
  .bill-goal .num { font-size: 19px; }
  .progress { height: 14px; margin-top: 4px; }
  .bill-reward { display: none; }
  .stamp { font-size: 24px; top: 8px; }
  .side .stats { grid-column: 2 / 3; grid-row: 1 / 2; grid-template-columns: 1fr 1fr; gap: 5px; align-content: start; }
  .stat { padding: 3px 7px; border-width: 2px; box-shadow: 0 2px 0 var(--ink); }
  .stat small { font-size: 8.5px; }
  .stat .num { font-size: 16px; }
  .side .channel { display: none; }
  .side .event, .side .trend { grid-column: 1 / -1; padding: 5px 8px; font-size: 11.5px; box-shadow: 0 2px 0 var(--ink); }
  .side .event b { font-size: 13px; display: inline; margin-right: 4px; }
  .side .event img, .side .trend img { width: 22px; height: 22px; }
  .side-btns { display: none; }
  .mini-btns { display: flex; }
  .shelf { padding: 5px; gap: 5px; }
  .shelf-group { gap: 5px; }
  .shelf-group.tools .slot { width: 44px; }
  .slot { max-width: 60px; }
  .monitor { width: min(100cqw, calc((100cqh - 112px) * 1.7778)); padding: 5px; border-radius: 14px; }
  .vmeta { padding: 5px 2px 0; gap: 7px; }
  .avatar { width: 26px; height: 26px; }
  .vtitle { font-size: 12.5px; }
  .vsub { font-size: 10.5px; }
  .formula { font-size: 16px; }
  .box { min-width: 70px; padding: 3px 8px; box-shadow: 0 3px 0 var(--ink); }
  .box .num { font-size: 19px; }
  .times { font-size: 20px; }
  .scoreline { gap: 6px; }
  .hand { display: grid; grid-template-columns: repeat(4, var(--cw)); justify-content: center; gap: 8px; padding-top: 16px; min-height: 0; }
  .hand.many { --cw: min(calc((100vw - 32px - 32px) / 5), 10vh); grid-template-columns: repeat(5, var(--cw)); }
  .hand.many .card-slot + .card-slot { margin-left: 0; }
  .monitor { width: max(180px, min(100cqw, calc((100cqh - 112px) * 1.7778))); }
  .card-slot.sel { transform: translateY(-12px); }
  .actions .btn.big { min-width: 0; flex: 1; font-size: 19px; padding: 12px 8px; }
  .actions { gap: 8px; }
  .deckpile { display: none; }
  .comments { bottom: 40px; width: 56%; }
  .cmt { font-size: 10.5px; padding: 3px 7px; }
  .shop-grid, .end-wrap { grid-template-columns: 1fr; }
  .month-bills { grid-template-columns: 1fr; }
  .mb { flex-direction: row; text-align: left; gap: 10px; }
  .mb img { width: 38px; }
  .hint { display: none; }
  .floater { font-size: 20px; }
  .floater.x { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ======================================================================
   v2 — arte 3D por código, sistemas do Balatro, Caderno, streamer
   ====================================================================== */
#bg { image-rendering: pixelated; }
.card .art img.ico, .slot img, .offer > img, .thumb .tmain img, .thumb .tface, .toast img, .how-step img, .choice img,
.mb img, .event img, .trend img, .bill-head img, .channel .vid img, .nentry img, .mini img, .formula-card img, .tool-card img,
.menu-wrap img, .btn img, .chip img, .algo img, .tagprev img, .loan img, .best img, .trendfire, .avatar img, .tempty img { image-rendering: pixelated; }
.card .art img.ico { width: 66%; }

#loading { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; gap: 10px; text-align: center; background: var(--night-2); color: var(--text); }
#loading b { font: 400 clamp(40px, 8vw, 72px) var(--display); color: var(--gold); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); }
#loading span { font: 800 15px var(--body); color: var(--muted); }

/* menu */
.menu-btns .daily { justify-content: flex-start; text-align: left; gap: 12px; padding: 10px 16px; }
.menu-btns .daily img { width: 38px; height: 38px; }
.menu-btns .daily span { display: flex; flex-direction: column; gap: 2px; }
.menu-btns .daily b { font: 400 20px/1 var(--display); letter-spacing: .02em; }
.menu-btns .daily small { font: 800 12px var(--body); opacity: .8; }
.menu-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-pair .btn img, .menu-row .btn img { width: 24px; height: 24px; }
.logo .playbadge { filter: drop-shadow(0 6px 0 var(--ink)); }

/* holográfico: brilho que segue o ponteiro (técnica das cartas de Pokémon em CSS) */
.card .glare, .offer .glare, .slot .glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; z-index: 4; transition: opacity .2s;
  background: radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55) 0%, rgba(255,255,255,.1) 30%, transparent 60%); mix-blend-mode: overlay; }
.card-slot:hover .card .glare { opacity: 1; }
.card.ed-holo .glare, .card.ed-viral .glare, .offer.ed-holo .glare, .offer.ed-viral .glare, .slot.ed-holo .glare, .slot.ed-viral .glare, .offer.r3 .glare, .offer.r4 .glare, .slot.r3 .glare, .slot.r4 .glare { opacity: .9;
  background:
    radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.7) 0%, transparent 45%),
    repeating-linear-gradient(115deg, #ff6ad5 0%, #c774e8 6%, #94d0ff 12%, #6effc1 18%, #ffe66e 24%, #ff6ad5 30%);
  background-size: 100% 100%, 300% 300%; background-position: center, var(--mx, 50%) var(--my, 50%); mix-blend-mode: color-dodge; filter: saturate(1.2) brightness(.75); }
.card.ed-holo::after { display: none; }
.card.back { background: repeating-linear-gradient(45deg, var(--yt) 0 10px, var(--yt-dark) 10px 20px); display: grid; place-items: center; }
.card.back .back-art { width: 60%; aspect-ratio: 1; display: grid; place-items: center; background: var(--paper); border: 3px solid var(--ink); border-radius: 50%; }
.card.back .back-art img { width: 70%; image-rendering: pixelated; }
.card.banned { filter: grayscale(.85) brightness(.75); }
.card-slot.stuck .card { box-shadow: 0 5px 0 var(--ink), 0 0 0 3px #c48bff, 0 0 26px rgba(196,139,255,.8); }

/* placar pegando fogo quando o vídeo já paga a conta */
.boxes.onfire .box { animation: burn .35s ease-in-out infinite alternate; }
.boxes.onfire .box.ret { box-shadow: 0 4px 0 var(--ink), 0 -6px 18px #ff9a2e, 0 -14px 30px #ff4a4a; }
.boxes.onfire .box.reach { box-shadow: 0 4px 0 var(--ink), 0 -6px 18px #8cc4ff, 0 -14px 30px #2f8cff; }
@keyframes burn { to { transform: translateY(-2px) scale(1.04); } }

/* estante: raridade e edições */
.slot.filled { border-color: var(--rc, var(--ink)); }
.slot.filled.r1 { border-color: var(--ink); }
.slot .copy { position: absolute; bottom: -6px; right: -4px; font: 900 13px var(--body); background: var(--gold); color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; padding: 0 4px; }
.slot.ed-ghost { border-style: dashed; opacity: .9; }
.slot.ed-shiny::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.7) 45%, transparent 60%); background-size: 260% 100%; animation: sheen 2.4s linear infinite; mix-blend-mode: screen; pointer-events: none; }
.stat.mo.neg .num { color: #ff6b6b; }

/* seleção de conta (encarar ou adiar) */
.month-bills .mb { position: relative; justify-content: flex-start; padding: 14px 12px; }
.month-bills .mb.cur { outline: 4px solid var(--gold); outline-offset: 2px; transform: translateY(-4px); }
.month-bills .mb.done { opacity: .62; }
.mb .algo { display: flex; gap: 8px; align-items: center; text-align: left; background: #2b2550; color: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 6px 8px; font: 800 11.5px/1.3 var(--body); margin-top: 4px; }
.mb .algo img { width: 40px; height: 40px; flex: none; }
.mb .algo small { display: block; font: 900 9.5px var(--body); color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.mb .ev { display: flex; gap: 6px; align-items: center; text-align: left; font: 800 11.5px/1.3 var(--body); color: var(--yt-dark); }
.mb .ev img { width: 34px; height: 34px; flex: none; }
.mb .ev b { display: block; font: 400 14px var(--display); letter-spacing: .02em; }
.mb .ev.final b { color: #7a2bd6; }
.mb .btn.big { margin-top: 6px; width: 100%; }
.skipbtn { width: 100%; justify-content: flex-start; text-align: left; padding: 6px 10px; gap: 8px; background: #3b2f86; font-size: 12px; }
.skipbtn img { width: 34px; height: 34px; flex: none; }
.skipbtn span { display: flex; flex-direction: column; gap: 1px; color: #fff; }
.skipbtn b { font: 400 14px var(--display); color: var(--gold); letter-spacing: .02em; }
.skipbtn small { font: 700 10.5px/1.25 var(--body); color: #d9d4ff; }
.tagprev { display: flex; gap: 6px; align-items: center; justify-content: center; font: 800 11px var(--body); opacity: .75; }
.tagprev img { width: 22px; height: 22px; }
.mstamp { position: absolute; top: 34%; left: 50%; translate: -50% 0; rotate: -14deg; font: 400 26px var(--display); border: 4px solid; border-radius: 10px; padding: 0 10px; letter-spacing: .06em; background: rgba(255,255,255,.7); }
.mstamp.paid { color: var(--yt); }
.mstamp.skip { color: #3b2f86; }
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.subh { margin: 6px 0 0; font: 400 17px var(--display); color: var(--muted); letter-spacing: .04em; }
.event.final { background: #7a2bd6; }

/* loja v2 */
.offer { position: relative; overflow: hidden; }
.offer.r2 { border-color: #1f8a55; }
.offer.r3 { border-color: #c62d4c; background: #4a2550; }
.offer.r4 { border-color: #8e4dd6; background: #3d2470; }
.offer .rar { font: 900 10.5px var(--body); text-transform: uppercase; letter-spacing: .07em; color: var(--rc, var(--muted)); display: flex; gap: 6px; align-items: center; }
.edtag { font: 900 9.5px var(--body); padding: 1px 6px; border-radius: 6px; border: 2px solid var(--ink); background: #fff; color: var(--ink); }
.edtag.ed-holo { background: linear-gradient(90deg, #ff6ad5, #94d0ff, #6effc1); }
.edtag.ed-viral { background: linear-gradient(90deg, #ff3b3b, #ffd23f, #23d18b, #2f8cff); color: #fff; }
.edtag.ed-ghost { background: #2b2550; color: #fff; }
.offer.voucher { background: #2a3c6e; border-style: dashed; }
.offer.pack > img { transform: rotate(-6deg); }
.wallet.neg { color: #ff6b6b; }
.debt { background: var(--yt); border: 3px solid var(--ink); border-radius: 12px; padding: 8px 12px; font: 800 13px var(--body); text-align: center; }
.tool-card.legend { background: linear-gradient(160deg, #6b2fc4, #24124a); }
.tool-card.legend b { color: #e4c6ff; }

/* tooltip v2 */
#tip .rartip { display: block; font: 900 10.5px var(--body); text-transform: uppercase; letter-spacing: .07em; margin: -2px 0 4px; }
#tip em { color: #ff9a9a; font-style: normal; }
#tip .act .btn { padding: 6px 10px; font-size: 12px; }

/* baralho */
.deckgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.mini { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); color: var(--ink); border-top: 6px solid var(--tc); font: 800 10.5px/1.1 var(--body); text-align: center; }
.mini img { width: 34px; height: 34px; }
.mini em { position: absolute; top: 2px; right: 3px; font: 900 8px var(--body); font-style: normal; background: var(--ink); color: #fff; border-radius: 4px; padding: 0 3px; }
.mini.used { opacity: .35; }

/* caderno */
.ov.notebook .panel { width: min(980px, 100%); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tabs .chip, .stakes .chip { cursor: pointer; color: var(--text); padding: 6px 12px; font-size: 12.5px; }
.tabs .chip.on, .stakes .chip.on { background: var(--gold); color: var(--ink); }
.ngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.nentry { display: flex; gap: 10px; align-items: flex-start; background: var(--panel-2); border: 2px solid var(--ink); border-radius: 12px; padding: 8px 10px; }
.nentry img { width: 48px; height: 48px; flex: none; }
.nentry b { display: block; font: 400 15px/1.15 var(--display); letter-spacing: .02em; }
.nentry span { display: block; font: 700 12px/1.35 var(--body); color: var(--muted); }
.nentry .tl { color: #9fe8c4; margin-top: 4px; }
.nentry .tl.dim { color: var(--muted); font-style: italic; }
.nentry .bestf { color: var(--gold); margin-top: 4px; }
.nentry.unk { opacity: .55; }
.nentry.unk img { filter: brightness(0) invert(.35); }

/* escolha de criador e dificuldade */
.choices.arch { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.choice.locked { opacity: .55; cursor: not-allowed; }
.choice.locked img { filter: grayscale(1); }
.stakes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.stakes > small { font: 900 11px var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-right: 4px; }
.stake-d { flex-basis: 100%; text-align: center; font: 700 12.5px var(--body); color: var(--muted); }
.chip.locked { opacity: .45; }

/* cheque especial, desafio do dia */
.loan { display: flex; gap: 14px; align-items: center; background: var(--panel-2); border: 3px solid var(--ink); border-radius: 14px; padding: 12px; }
.loan img { width: 70px; flex: none; }
.loan p { margin: 0; font: 700 15px/1.4 var(--body); }
.dailybox { background: #2a3c6e; border: 3px solid var(--ink); border-radius: 14px; padding: 10px 12px; box-shadow: 0 4px 0 var(--ink); }
.dailybox b { display: block; font: 400 16px var(--display); color: var(--gold); margin-bottom: 4px; }
.dailybox .grid { font-size: 18px; letter-spacing: 1px; line-height: 1.5; word-break: break-word; }

/* modo streamer */
.form { display: flex; flex-direction: column; gap: 8px; }
.form label { font: 900 11px var(--body); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.form input { font: 800 16px var(--body); padding: 10px 12px; border-radius: 12px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); }
.form input:focus { outline: 3px solid var(--gold); }
.ststatus { font: 800 13px var(--body); padding: 6px 10px; border-radius: 10px; background: var(--panel-2); border: 2px solid var(--ink); }
.ststatus.on { background: #1f5c47; }
.ststatus.err { background: var(--yt-dark); }
.chatpick { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.3); border-radius: 8px; padding: 2px 6px; }
.chatpick img { width: 18px; height: 18px; }
.cmt.chat { background: #e9e0ff; }
.cmt.chat b { color: #6b2fc4; }
.vote { position: fixed; z-index: 58; top: 12px; left: 50%; translate: -50% 0; width: min(320px, calc(100vw - 24px)); background: var(--panel); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.vote b { display: flex; align-items: center; gap: 6px; font: 400 17px var(--display); color: var(--gold); }
.vote b img { width: 24px; height: 24px; }
.vote small { font: 700 11px var(--body); color: var(--muted); }
.vrow { display: grid; grid-template-columns: 110px 1fr 28px; gap: 6px; align-items: center; font: 800 12px var(--body); }
.vrow i { height: 10px; border-radius: 6px; border: 2px solid var(--ink); min-width: 4px; transition: width .3s; }
.vrow em { font-style: normal; text-align: right; }
.toast.ach b { color: #7a2bd6; }

/* painel lateral: 3 botões */
.side-btns .btn img { width: 22px; height: 22px; }
@media (min-aspect-ratio: 5/4) and (min-width: 820px) {
  .side-btns { flex-wrap: wrap; }
  .side-btns .btn { flex: 1 1 30%; padding: 8px 6px; font-size: 12px; flex-direction: column; gap: 2px; }
  .deckpile { cursor: pointer; }
}
@media not ((min-aspect-ratio: 5/4) and (min-width: 820px)) {
  .month-bills .mb { flex-direction: column; align-items: stretch; text-align: center; }
  .month-bills .mb > img { align-self: center; }
  .month-bills .mb:not(.cur) { padding: 8px 10px; }
  .month-bills .mb:not(.cur) .algo, .month-bills .mb:not(.cur) .tagprev { display: none; }
  .ngrid { grid-template-columns: 1fr; max-height: 60vh; }
  .vrow { grid-template-columns: 90px 1fr 24px; }
}
.offer .info .tagai { display: inline-block; }
.card .trendfire { width: calc(var(--cw) * .2); top: 22%; left: 3%; }

/* ---------- treino: o Algoritmo explica, as cartas certas piscam ---------- */
.coach { display: flex; gap: 12px; align-items: flex-start; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); padding: 10px 14px; flex: none; }
.coach > img { width: 56px; height: 56px; flex: none; }
.coach small { font: 900 11px var(--body); letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.coach p { margin: 3px 0 0; font: 800 15px/1.35 var(--body); text-wrap: pretty; }
.coach p.nudge { color: var(--yt-dark); }
.coach .btn { margin-top: 8px; }
.coach.blocked { animation: shake .3s; }
.card-slot.pickme .card { animation: pickme 1s ease-in-out infinite; }
.card-slot.trashme .card { animation: trashme 1s ease-in-out infinite; }
@keyframes pickme { 0%,100% { box-shadow: 0 5px 0 var(--ink), 0 0 0 3px var(--gold); } 50% { box-shadow: 0 5px 0 var(--ink), 0 0 0 5px var(--gold), 0 0 26px rgba(255,210,63,.95); translate: 0 -5px; } }
@keyframes trashme { 0%,100% { box-shadow: 0 5px 0 var(--ink), 0 0 0 3px var(--yt); } 50% { box-shadow: 0 5px 0 var(--ink), 0 0 0 5px var(--yt), 0 0 22px rgba(255,59,59,.9); } }
/* dica do próximo degrau: linha própria no placar, com espaço reservado pra nada pular quando ela aparece */
.nextf { min-height: 24px; display: flex; align-items: center; justify-content: center; text-align: center; font: 900 12px/1.25 var(--body); color: var(--gold); letter-spacing: .01em; }
.nextf i { font-style: normal; background: rgba(19,17,28,.88); border: 2px solid var(--ink); border-radius: 8px; padding: 2px 8px; }
@media not ((min-aspect-ratio: 5/4) and (min-width: 820px)) {
  .coach { padding: 6px 10px; gap: 8px; border-width: 2px; box-shadow: 0 3px 0 var(--ink); }
  .coach > img { width: 34px; height: 34px; }
  .coach small { font-size: 9px; }
  .coach p { font-size: 12px; line-height: 1.3; }
  .coach .btn { margin-top: 5px; padding: 7px 12px; font-size: 13px; }
  .nextf { order: 3; flex-basis: 100%; min-height: 20px; font-size: 10.5px; }
  .nextf i { padding: 1px 6px; }
  .monitor { width: max(180px, min(100cqw, calc((100cqh - 136px) * 1.7778))); }
  .progress span { font-size: 9px; line-height: 1; }
}
.coach[data-act] { cursor: pointer; }
.actions .btn.post.next { background: var(--gold); color: var(--ink); }
/* celular baixo (ex.: o jogo aberto dentro do app do Claude, ~360×650): tudo mais compacto, e o balão do treino
   flutua no topo, por cima do painel da conta, com rolagem; sem isso o monitor e a mão cobriam o texto e o botão */
@media (max-height: 760px) and (not ((min-aspect-ratio: 5/4) and (min-width: 820px))) {
  :root { --cw: min(calc((100vw - 32px - 24px) / 4), 10.5vh, 110px); --gap: 6px; }
  .side .bill { padding: 6px 9px 7px; }
  .bill-head img { width: 24px; height: 24px; }
  .bill-name { font-size: 15px; }
  .bill-goal .num { font-size: 16px; }
  .progress { height: 12px; }
  .stat .num { font-size: 14px; }
  .stat small { font-size: 8px; }
  .side .event, .side .trend { padding: 3px 8px; font-size: 11px; }
  .monitor { width: min(100cqw, calc((100cqh - 150px) * 1.7778)); }
  /* palco largo e raso (placar ao lado do monitor): a coluna do placar do PC (210 px) não cabe no celular */
  @container stage (min-aspect-ratio: 2 / 1) {
    .stage-in { gap: 10px; }
    .scoreline { width: 124px; gap: 4px; }
    .monitor { width: min(calc(100cqw - 136px), calc((100cqh - 44px) * 1.7778)); }
    .formula { font-size: 13px; }
    .box { min-width: 0; padding: 2px 6px; }
    .box .num { font-size: 16px; }
    .times { font-size: 15px; line-height: 1; }
    .vsub { display: none; }
  }
  .hand { padding-top: 10px; gap: 6px; }
  .actions .btn.big { font-size: 17px; padding: 9px 8px; }
  .coach { position: fixed; z-index: 30; left: 8px; right: 8px; top: max(8px, env(safe-area-inset-top, 0px)); max-height: 46vh; overflow-y: auto; box-shadow: 0 3px 0 var(--ink), 0 10px 30px rgba(0,0,0,.55); }
  .coach p { font-size: 13px; }
}

/* ---------- máquina de figurinhas, pacotinho e álbum ---------- */
.algo-live, .stk img, .reel img, .slot-rules img, .fichas img, .fichas-run img, .apage-h img, .pay-row.ficha img { image-rendering: pixelated; }
.menu-btns .slotbtn { background: #7c4dff; color: #fff; }
.menu-btns .slotbtn.has img { animation: packWiggle 1.4s ease-in-out infinite; }
.ov.machine .panel { width: min(560px, 100%); }
.slotm { position: relative; width: min(420px, calc(100% - 44px)); margin: 0 auto; }
.slot-top { display: flex; align-items: flex-end; justify-content: center; gap: 6px; position: relative; z-index: 2; margin-bottom: -16px; }
.slot-algo { width: 92px; height: 92px; flex: none; filter: drop-shadow(0 5px 0 var(--ink)); }
.slot-say { position: relative; margin-bottom: 28px; max-width: 250px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); padding: 8px 12px; font: 800 13.5px/1.3 var(--body); text-wrap: pretty; }
.slot-say::before { content: ''; position: absolute; left: -11px; bottom: 12px; border: 8px solid transparent; border-right-color: var(--ink); border-left: 0; }
.slot-cab { position: relative; background: linear-gradient(180deg, #ff5f5f, #c42536); border: 4px solid var(--ink); border-radius: 26px 26px 16px 16px; padding: 24px 14px 12px; box-shadow: inset 0 -8px 0 rgba(0,0,0,.22), 0 7px 0 var(--ink); }
.slot-lights { height: 10px; margin: -12px 4px 10px; background: radial-gradient(circle, var(--gold) 0 3px, transparent 4px) 0 50% / 18px 10px repeat-x; animation: lights .7s steps(2) infinite; }
@keyframes lights { 50% { background-position: 9px 50%; } }
.reels { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--ink); padding: 8px; border-radius: 14px; }
.reel { --cell: 96px; height: var(--cell); overflow: hidden; position: relative; border-radius: 10px; background: linear-gradient(#e2d6bd, var(--paper) 28%, var(--paper) 72%, #e2d6bd); transition: box-shadow .2s; }
.reel .strip { display: flex; flex-direction: column; }
.reel .strip img { display: block; flex: none; width: 100%; height: var(--cell); object-fit: contain; padding: 12px; }
.reel.spin .strip img { filter: blur(1.4px); }
.reel.win { box-shadow: 0 0 0 3px var(--gold), 0 0 20px var(--gold); animation: reelWin .45s 3; }
.reel.bad { box-shadow: 0 0 0 3px var(--yt); animation: shake .3s 2; }
.reels.tease .reel:last-child { box-shadow: 0 0 0 3px var(--gold), 0 0 16px var(--gold); }
@keyframes reelWin { 50% { transform: scale(1.06); } }
.payline { position: absolute; left: 3px; right: 3px; top: 50%; height: 3px; margin-top: -1.5px; background: rgba(255,59,59,.5); pointer-events: none; }
.slot-result { min-height: 38px; margin-top: 10px; text-align: center; font: 400 30px/1.1 var(--display); letter-spacing: .02em; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.slot-result.win { color: var(--mint); }
.slot-result.jack { color: var(--gold); animation: reelWin .4s 4; }
.slot-result.flop { color: #cfc8ee; }
.slot-lever { position: absolute; right: -40px; top: 120px; width: 36px; height: 130px; padding: 0; border: 0; background: transparent; }
.slot-lever i { position: absolute; left: 14px; bottom: 0; width: 9px; height: 112px; border: 2px solid var(--ink); border-radius: 4px; background: linear-gradient(90deg, #9aa3b5, #eef1f6, #9aa3b5); transform-origin: 50% 100%; transition: transform .2s cubic-bezier(.3,1.6,.5,1); }
.slot-lever i::before { content: ''; position: absolute; left: 50%; top: -18px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; border: 3px solid var(--ink); background: radial-gradient(circle at 35% 35%, #ffa3a3, var(--yt) 55%, var(--yt-dark)); }
.slot-lever.pulled i { transform: scaleY(-.55); }
.slot-lever:disabled { opacity: .5; cursor: not-allowed; }
.slot-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font: 800 13px var(--body); color: var(--muted); }
.slot-rules span { display: inline-flex; align-items: center; gap: 3px; }
.slot-rules img { width: 26px; height: 26px; }
.fichas { display: inline-flex; align-items: center; gap: 6px; font: 800 14px var(--body); padding: 0 4px; }
.fichas img { width: 30px; height: 30px; }
.fichas .num { font-size: 26px; color: var(--gold); }
/* figurinha: papel branco, número no canto, fundo na cor da página */
.stk { position: relative; width: 112px; aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; overflow: hidden; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink); }
.stk > img { width: 100%; aspect-ratio: 1; padding: 10%; border-radius: 8px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--pc) 30%, #fff), var(--pc)); }
.stk b { font: 400 12.5px/1.05 var(--display); letter-spacing: .02em; text-align: center; text-wrap: balance; }
.stk .stk-n { position: absolute; top: 8px; left: 9px; z-index: 1; padding: 1px 5px; border-radius: 6px; background: var(--ink); color: #fff; font: 900 10px var(--body); }
.stk.r2 { background: #d9ebff; }
.stk.r3 { background: linear-gradient(160deg, #fff1a8, #ffc53d); }
.stk-tag, .stk-holo { position: absolute; z-index: 2; padding: 2px 6px; border: 2px solid var(--ink); border-radius: 6px; font: normal 900 10px var(--body); }
.stk-tag { top: 6px; right: 6px; transform: rotate(6deg); }
.stk-tag.new { background: var(--mint); }
.stk-tag.dup { background: var(--paper-2); }
.stk-holo { right: 6px; top: 46%; background: linear-gradient(90deg, #ff8ad8, #8ae6ff, #ffe98a); }
.stk.holo::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; background: linear-gradient(115deg, transparent 22%, rgba(255,120,220,.55) 36%, rgba(120,220,255,.55) 50%, rgba(255,240,120,.55) 64%, transparent 78%) 0 0 / 260% 260%; animation: holo 2.4s linear infinite; }
@keyframes holo { to { background-position: 260% 260%; } }
@keyframes packWiggle { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) scale(1.04); } }
.aslot .stk { width: 100%; height: 100%; }
/* o palco do pacotinho (a abertura do Packroll): tudo posicionado pelo game.js a cada quadro */
.ov.pstage { display: block; padding: 0; overflow: hidden; touch-action: none; backdrop-filter: none; background: radial-gradient(125% 125% at 50% 35%, #3b2a78 0%, #1d1640 48%, #0d0a1c 100%); }
.pstage > * { position: absolute; }
.ps-veil, .ps-flash, .ps-fx { inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ps-veil { background: #000; opacity: 0; }
.ps-flash { z-index: 9; background: #fff8e6; opacity: 0; }
.ps-fx { z-index: 8; }
.ps-pack { left: 0; top: 0; z-index: 3; pointer-events: none; }
.ps-pack canvas { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(0 14px 24px rgba(0,0,0,.45)); }
.ps-aura { position: absolute; left: -35%; right: -35%; top: -20%; bottom: -20%; opacity: 0; background: radial-gradient(closest-side, rgba(255,205,100,.55), rgba(233,160,8,.12) 60%, transparent); }
.ps-card { left: 0; top: 0; width: 120px; height: 160px; display: none; pointer-events: none; }
.ps-card .stk { width: 100%; height: 100%; box-shadow: 0 8px 14px rgba(0,0,0,.4), 0 4px 0 var(--ink); }
.pstage.espalhado .ps-card { pointer-events: auto; cursor: pointer; }
.ps-top { left: 0; right: 0; top: 0; z-index: 10; padding: 10px 16px 0; text-align: center; pointer-events: none; }
.ps-top h2 { margin: 28px 0 6px; font: 400 clamp(26px, 4vw, 36px)/1.1 var(--display); letter-spacing: .02em; color: #fbf3e9; }
.ps-top p { margin: 0; font: 800 14px var(--body); color: rgba(251,243,233,.72); }
.ps-x { position: absolute; left: 10px; top: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: rgba(251,243,233,.8); font: 900 17px var(--body); pointer-events: auto; }
.ps-hint { left: 16px; right: 16px; z-index: 10; display: none; text-align: center; font: 900 13px var(--body); letter-spacing: .05em; color: rgba(255,227,168,.9); pointer-events: none; }
.ps-dot { left: 0; top: 0; z-index: 10; display: none; width: 14px; height: 14px; border-radius: 50%; background: #fff6d6; box-shadow: 0 0 12px 5px rgba(255,214,110,.9); pointer-events: none; }
.ps-quick { left: 50%; bottom: 22px; z-index: 10; translate: -50% 0; padding: 12px 22px; border: 1.5px solid rgba(255,227,168,.35); border-radius: 999px; background: transparent; color: #fbf3e9; font: 800 14px var(--body); }
.ps-final { left: 16px; right: 16px; bottom: 18px; z-index: 10; display: none; max-width: 600px; margin: 0 auto; text-align: center; }
.ps-final b { display: block; font: 400 26px var(--display); letter-spacing: .02em; color: #fbf3e9; }
.ps-final p { margin: 4px 0 14px; font: 700 14px var(--body); color: rgba(251,243,233,.72); }
.ov.album .panel { width: min(900px, 100%); }
.tabs .chip img { width: 20px; height: 20px; image-rendering: pixelated; }
.tabs .chip.done:not(.on) { background: #1f5c47; }
.apage { background: color-mix(in srgb, var(--pc) 24%, var(--paper)); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 var(--ink); padding: 12px; }
.apage-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--ink); }
.apage-h img { width: 36px; height: 36px; }
.apage-h b { font: 400 22px var(--display); letter-spacing: .02em; }
.agrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.aslot { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; background: transparent; }
.aslot.miss { display: grid; place-content: center; gap: 4px; border: 3px dashed rgba(19,17,28,.4); border-radius: 12px; background: rgba(255,255,255,.4); color: rgba(19,17,28,.6); }
.aslot.miss .stk-n { font: 400 24px var(--display); }
.aslot.miss .rr { font: 900 10px var(--body); text-transform: uppercase; letter-spacing: .05em; }
.aslot.miss.r2 { border-color: #2f6fd1; }
.aslot.miss.r3 { border-color: #b8860b; background: rgba(255,214,90,.35); }
.aslot.have:hover .stk { transform: translateY(-3px) rotate(-1.5deg); }
.aslot .stk { transition: transform .12s; }
.dupn { position: absolute; right: -6px; bottom: -6px; z-index: 3; padding: 2px 7px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yt); color: #fff; font: 900 11px var(--body); }
.algo-say { display: flex; align-items: center; justify-content: center; gap: 10px; }
.algo-say img { width: 60px; height: 60px; flex: none; }
.algo-say p { margin: 0; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); padding: 8px 12px; font: 800 14px/1.3 var(--body); }
.fichas-run { display: flex; align-items: center; gap: 8px; font: 800 14px var(--body); }
.fichas-run img { width: 28px; height: 28px; }
.fichas-run .num { color: var(--gold); font-size: 22px; }
.pay-row.ficha span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.pay-row.ficha img { width: 24px; height: 24px; }
@media (max-width: 640px) {
  .slotm { width: calc(100% - 38px); }
  .reel { --cell: 74px; }
  .reel .strip img { padding: 9px; }
  .slot-algo { width: 64px; height: 64px; }
  .slot-say { font-size: 12px; max-width: 200px; margin-bottom: 22px; }
  .slot-lever { right: -34px; top: 96px; height: 110px; }
  .slot-lever i { height: 94px; }
  .slot-result { font-size: 24px; }
  .agrid { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .ov.album .tabs .tn { display: none; }
  .stk { padding: 4px; border-width: 2px; }
  .stk b { font-size: 10px; }
  .stk .stk-n { top: 5px; left: 6px; font-size: 9px; }
  .algo-say img { width: 44px; height: 44px; }
  .algo-say p { font-size: 12.5px; }
}