/* ═══ TOYSGZ LAB — app v2 (abas, preto puro, respiro) ═══ */

@font-face { font-family:'Anton'; src:url('../fonts/anton.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Grotesk'; src:url('../fonts/grotesk.woff2') format('woff2'); font-weight:300 700; font-display:swap; }

:root {
  --bg:#050505; --bg-2:#0c0c0d; --red:#ff1e2d; --red-dk:#b30f1b;
  --white:#f5f2ee; --grey:#77726f; --line:#1a1919;
  --purple:#9b5cff; --blue:#3fa9ff; --green:#35d07f; --gold:#ffb300;
  --anton:'Anton', Impact, sans-serif;
  --body:'Grotesk', system-ui, sans-serif;
  --mono:ui-monospace, 'SF Mono', Menlo, monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { overflow-x:clip; touch-action:manipulation; }
body { background:var(--bg); color:var(--white); font-family:var(--body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
::selection { background:var(--red); color:#000; }
button { font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
em { font-style:normal; color:var(--red); }
[hidden] { display:none !important; }

.btn {
  font-family:var(--anton); font-size:15px; letter-spacing:.08em;
  padding:14px 26px; display:inline-block; text-align:center;
  transition:background .2s, color .2s, box-shadow .2s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.btn:active { transform:scale(.96); }
.btn-red { background:var(--red); color:#fff; box-shadow:0 0 24px rgba(255,30,45,.3); }
.btn-red:hover { background:#fff; color:var(--red); }
.btn-red:disabled { background:#2c2c2e; color:#6b6b6b; box-shadow:none; cursor:not-allowed; }
.btn-ghost { color:var(--white); outline:1px solid var(--line); outline-offset:-1px; }
.btn-ghost:hover { outline-color:var(--red); color:var(--red); }
.btn-big { font-size:18px; padding:17px 38px; }

/* ═══ LOGIN ═══ */
.login { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden; background:var(--bg); }
.login-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.26) saturate(.9); }
.login-card {
  position:relative; width:min(400px,92vw); text-align:center;
  background:rgba(8,8,9,.94); border:1px solid #2a1214;
  padding:44px 36px; display:flex; flex-direction:column; gap:16px;
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
}
.lg-x { width:52px; height:52px; margin:0 auto; color:var(--red); filter:drop-shadow(0 0 14px rgba(255,30,45,.6)); }
.login-card h1 { font-family:var(--anton); font-size:34px; letter-spacing:.03em; }
.lg-tag { font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--grey); }
.login-card input {
  background:var(--bg); border:1px solid var(--line); color:var(--white);
  font-family:var(--mono); font-size:15px; letter-spacing:.3em; text-align:center;
  padding:14px; outline:none; border-radius:0;
}
.login-card input:focus { border-color:var(--red); }
.lg-err { font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--red); }
.login-card.shake { animation:shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-10px)} 75%{transform:translateX(10px)} }

/* ═══ ESTRUTURA ═══ */
.app { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; max-width:1060px; margin:0 auto; padding:0 clamp(14px,3vw,32px); }

.top { display:flex; align-items:center; gap:14px; padding:18px 0 12px; }
.top-logo { display:flex; align-items:center; gap:10px; font-family:var(--anton); font-size:22px; }
.nav-x { width:28px; height:28px; color:var(--red); flex:none; filter:drop-shadow(0 0 10px rgba(255,30,45,.55)); }
.wallet { margin-left:auto; display:flex; gap:8px; }
.w-chip { font-family:var(--mono); font-size:12px; letter-spacing:.12em; border:1px solid var(--line); padding:8px 13px; background:var(--bg-2); }
.w-chip b { color:var(--gold); }
.w-red b { color:var(--red); }
.top-exit { font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--grey); border:1px solid var(--line); padding:9px 12px; }
.top-exit:hover { color:var(--red); border-color:var(--red); }

.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40; background:var(--bg); }
.tabs button {
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--grey);
  padding:14px 18px 12px; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .2s;
}
.tabs button.on { color:var(--white); border-color:var(--red); }
.tabs button:hover { color:var(--white); }

.content { flex:1; display:flex; flex-direction:column; padding:clamp(22px,4vh,40px) 0 40px; }
.tab { display:none; flex-direction:column; gap:26px; animation:tabIn .35s ease; }
.tab.on { display:flex; }
@keyframes tabIn { from { opacity:0; transform:translateY(14px) } }
.tab-head { display:flex; align-items:baseline; gap:14px; }
.tab-head h3 { font-family:var(--anton); font-size:clamp(24px,3.4vw,34px); letter-spacing:.03em; }
.tab-head span { margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--grey); text-align:right; }

/* ═══ INÍCIO ═══ */
.hello h2 { font-family:var(--anton); font-size:clamp(32px,5vw,52px); letter-spacing:.02em; }
.hello-sub { color:var(--grey); margin:6px 0 14px; }
.hello-bar { height:5px; background:var(--line); max-width:420px; }
.hello-bar i { display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--red-dk),var(--red)); transition:width .8s cubic-bezier(.2,.8,.2,1); }
.home-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.home-card {
  text-align:left; background:var(--bg-2); border:1px solid var(--line); padding:20px;
  display:flex; flex-direction:column; gap:8px; transition:border-color .2s, transform .2s;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.home-card:hover { border-color:var(--red); transform:translateY(-3px); }
.hc-red { border-color:#2a1214; background:linear-gradient(135deg,#140708, var(--bg-2)); }
.hc-tag { font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:var(--grey); }
.home-card b { font-family:var(--anton); font-size:clamp(18px,2.4vw,24px); letter-spacing:.04em; font-weight:400; }
.hc-go { font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--red); }
.drop-mini { font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--grey); display:flex; align-items:center; gap:8px; }
.drop-mini b { color:var(--white); font-variant-numeric:tabular-nums; }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 10px var(--red); animation:blink 1.2s steps(2) infinite; flex:none; }
@keyframes blink { 50% { opacity:.35 } }

/* ═══ COLEÇÃO ═══ */
.col-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; }
.col-slot { text-align:center; }
.col-slot img.pack { width:100%; display:block;
  -webkit-mask-image:radial-gradient(ellipse 92% 92% at 50% 50%, #000 55%, transparent 100%);
  mask-image:radial-gradient(ellipse 92% 92% at 50% 50%, #000 55%, transparent 100%); }
.col-slot figcaption { font-family:var(--mono); font-size:10px; letter-spacing:.16em; margin-top:6px; }
.col-slot .rar { display:block; font-size:9px; color:var(--grey); margin-top:2px; }
.col-locked { border:1px dashed #242222; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:210px; }
.col-locked img { width:74px; height:74px; border-radius:50%; filter:brightness(.3) grayscale(.85); border:2px solid #242222; object-fit:cover; }
.col-locked span { font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--grey); }
.col-new { animation:colpop .6s cubic-bezier(.2,1.4,.3,1); }
@keyframes colpop { from { transform:scale(.6) rotate(-4deg); opacity:0 } }

/* ═══ ROLETA ═══ */
.roleta-wrap { display:grid; grid-template-columns:auto 1fr; gap:clamp(26px,5vw,60px); align-items:center; }
.wheel-box { position:relative; width:min(360px,82vw); aspect-ratio:1; margin:0 auto; }
#wheelCanvas { width:100%; height:100%; display:block; filter:drop-shadow(0 0 40px rgba(255,30,45,.15)); }
.wheel-pointer {
  position:absolute; top:-8px; left:50%; transform:translateX(-50%); z-index:2;
  border-left:13px solid transparent; border-right:13px solid transparent; border-top:22px solid var(--red);
  filter:drop-shadow(0 0 8px rgba(255,30,45,.8));
}
.roleta-side { display:flex; flex-direction:column; gap:18px; align-items:flex-start; min-width:0; }
.roleta-txt { color:var(--grey); font-size:15px; max-width:48ch; }
.roleta-txt b { color:var(--white); }
.spin-result { display:flex; align-items:center; gap:16px; background:var(--bg-2); border:1px solid var(--line); padding:14px 18px; }
.spin-result img { height:100px; width:auto; }
.sr-title { font-family:var(--anton); font-size:22px; letter-spacing:.04em; }
.sr-sub { font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--grey); }

/* ═══ ARCADE ═══ */
.arcade-box { display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.arcade-txt { color:var(--grey); max-width:58ch; }
.arcade-txt b { color:var(--white); }
.arcade-chars { display:flex; gap:12px; flex-wrap:wrap; }
.arcade-chars img { width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
.arcade-chars img.locked { filter:brightness(.3) grayscale(.85); }

/* ═══ LOJA ═══ */
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.shop-card {
  background:var(--bg-2); border:1px solid var(--line); padding:20px;
  display:flex; flex-direction:column; gap:10px;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.shop-card h4 { font-family:var(--anton); font-size:19px; letter-spacing:.05em; font-weight:400; }
.shop-card p { color:var(--grey); font-size:13px; }
.shop-pips { display:flex; gap:6px; }
.shop-pips i { width:26px; height:6px; background:var(--line); }
.shop-pips i.full { background:var(--red); box-shadow:0 0 8px rgba(255,30,45,.5); }
.shop-buy { margin-top:auto; font-family:var(--anton); font-size:14px; letter-spacing:.06em;
  border:1px solid var(--line); padding:11px; transition:border-color .2s, color .2s; }
.shop-buy:hover:not(:disabled) { border-color:var(--gold); color:var(--gold); }
.shop-buy:disabled { color:#4d4a48; cursor:not-allowed; }
.shop-buy b { color:var(--gold); }
.shop-buy.maxed { color:var(--green); border-color:#12301f; }

.app-foot { margin-top:34px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:#4d4a48; }
.app-foot button { margin-left:auto; font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:#3c3939; }
.app-foot button:hover { color:var(--red); }

/* ═══ ABERTURA DE BAÚ ═══ */
.case { position:fixed; inset:0; z-index:400; background:rgba(3,3,3,.94); display:flex; align-items:center; justify-content:center; padding:20px; }
.case-inner { width:min(760px,96vw); display:flex; flex-direction:column; gap:22px; text-align:center; }
.case-tag { font-family:var(--anton); font-size:clamp(20px,3.4vw,30px); letter-spacing:.06em; }
.case-window { position:relative; overflow:hidden; border:1px solid #2a1214; background:var(--bg-2); padding:18px 0; }
.case-marker { position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--red); z-index:2;
  box-shadow:0 0 14px rgba(255,30,45,.9); }
.case-reel { display:flex; gap:10px; will-change:transform; }
.case-item {
  flex:none; width:104px; height:120px; background:var(--bg);
  border:1px solid var(--line); border-top:3px solid var(--rar,#3a3a3c);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.case-item img { width:58px; height:58px; border-radius:50%; object-fit:cover; border:2px solid var(--rar,#3a3a3c); }
.case-item span { font-family:var(--mono); font-size:9px; letter-spacing:.14em; color:var(--grey); }
.case-item b { font-family:var(--anton); font-size:15px; font-weight:400; color:var(--white); }
.case-item.win { box-shadow:0 0 30px var(--rar,#fff3); border-color:var(--rar); }
.case-result { display:flex; flex-direction:column; gap:8px; align-items:center; }
.cr-title { font-family:var(--anton); font-size:clamp(26px,4.6vw,40px); letter-spacing:.04em; }
.cr-sub { font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--grey); margin-bottom:10px; }

/* ═══ TOYS BLAST ═══ */
.game {
  position:fixed; inset:0; z-index:300; background:#050505; display:flex; flex-direction:column;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none;
}
.g-count {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:5;
  font-family:var(--anton); font-size:min(38vh,38vw); color:var(--red); pointer-events:none;
  text-shadow:0 0 80px rgba(255,30,45,.5);
}
.g-flash { position:absolute; inset:0; background:var(--red); opacity:0; pointer-events:none; z-index:4; }
.game-top { display:flex; align-items:center; gap:16px; padding:12px 16px; border-bottom:1px solid var(--line); }
.g-logo { font-family:var(--anton); font-size:20px; letter-spacing:.04em; }
.g-hud { display:flex; gap:14px; margin-left:auto; font-family:var(--mono); font-size:12px; letter-spacing:.14em; }
.g-hud span { color:var(--grey); }
.g-hud #gLives { color:var(--red); }
.g-hud #gKeys { color:var(--gold); }
.g-hud #gScore { color:var(--white); }
.g-exit { margin-left:auto; border:1px solid var(--line); color:var(--grey); font-family:var(--mono); font-size:10px; letter-spacing:.2em; padding:8px 12px; }
.g-hud:not([hidden]) ~ .g-exit { margin-left:0; }
.g-exit:hover { color:var(--red); border-color:var(--red); }
.game-stage { flex:1; position:relative; display:flex; align-items:center; justify-content:center; min-height:0; }
#gameCanvas { display:block; max-width:100%; max-height:100%; }
.g-screen {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; background:rgba(5,5,5,.93); padding:24px 16px; text-align:center;
  touch-action:pan-y; overflow-y:auto;
}
.gs-tag { font-family:var(--anton); font-size:clamp(26px,4vw,38px); letter-spacing:.04em; }
.gs-label { font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--red); }
.gs-maps { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.gs-map {
  border:1px solid var(--line); padding:12px 18px; display:flex; flex-direction:column; gap:3px; min-width:130px;
  transition:border-color .2s;
}
.gs-map b { font-family:var(--anton); font-size:15px; font-weight:400; letter-spacing:.06em; }
.gs-map small { font-family:var(--mono); font-size:8px; letter-spacing:.14em; color:var(--grey); }
.gs-map.sel { border-color:var(--map,#ff1e2d); box-shadow:0 0 20px color-mix(in srgb, var(--map,#ff1e2d) 30%, transparent); }
.gs-chars { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.gs-char {
  background:var(--bg-2); border:1px solid var(--line); padding:14px 12px 10px; width:116px;
  display:flex; flex-direction:column; align-items:center; gap:8px; transition:border-color .2s, transform .2s;
}
.gs-char:hover { transform:translateY(-4px); }
.gs-char.sel { border-color:var(--red); box-shadow:0 0 24px rgba(255,30,45,.25); }
.gs-char img { width:58px; height:58px; border-radius:50%; object-fit:cover; border:2px solid var(--pk,#333); }
.gs-char b { font-family:var(--anton); font-size:12px; letter-spacing:.06em; font-weight:400; }
.gs-char small { font-family:var(--mono); font-size:8px; letter-spacing:.12em; color:var(--grey); }
.gs-char.locked { opacity:.38; }
.gs-char.locked small { color:var(--red); }
.gs-hint { font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--grey); }
.gr-title { font-family:var(--anton); font-size:clamp(40px,7vw,72px); letter-spacing:.03em; }
.gr-sub { font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--grey); line-height:2; }
.gr-sub b { color:var(--gold); }
.gr-actions { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

.g-legend {
  display:flex; justify-content:center; gap:18px; flex-wrap:wrap;
  padding:8px 12px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; color:var(--grey);
}
.g-legend i { font-style:normal; font-weight:700; }
.g-touch { display:flex; align-items:center; justify-content:space-between; padding:8px 16px calc(12px + env(safe-area-inset-bottom)); gap:18px; }
.g-dpad { display:grid; gap:6px; grid-template-areas:". u ." "l . r" ". d ."; grid-template-columns:repeat(3,58px); grid-template-rows:repeat(3,58px); }
.g-dpad button, .g-bomb {
  background:var(--bg-2); border:1px solid var(--line); color:var(--white);
  font-size:17px; border-radius:12px; touch-action:none; user-select:none; -webkit-user-select:none;
}
.g-dpad button:active { background:#241012; border-color:var(--red); }
.g-bomb { width:96px; height:96px; border-radius:50%; font-family:var(--anton); font-size:34px; color:var(--red);
  border-color:#2a1214; box-shadow:0 0 24px rgba(255,30,45,.25); }
.g-bomb:active { background:var(--red); color:#fff; }

/* ═══ MOBILE ═══ */
@media (max-width: 820px) {
  .top { padding:14px 0 10px; }
  .tabs { position:fixed; top:auto; bottom:0; left:0; right:0; background:rgba(5,5,5,.97);
    border-top:1px solid var(--line); border-bottom:none;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom)); z-index:60; }
  .tabs button { flex:1; padding:12px 2px 10px; font-size:9.5px; letter-spacing:.12em;
    border-bottom:none; border-top:2px solid transparent; margin:0; text-align:center; }
  .tabs button.on { border-top-color:var(--red); }
  .content { padding-bottom:100px; }
  .home-grid { grid-template-columns:1fr; }
  .roleta-wrap { grid-template-columns:1fr; }
  .roleta-side { align-items:stretch; }
  .roleta-side .btn { width:100%; }
  .spin-result { justify-content:center; }
  .col-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .shop-grid { grid-template-columns:1fr; }
  .arcade-box .btn-big { width:100%; }
  .case-item { width:88px; height:106px; }
  .game-top { padding:8px 10px; gap:10px; }
  .g-logo { font-size:16px; }
  .g-hud { gap:8px; font-size:10px; }
  .g-screen { justify-content:flex-start; padding:24px 12px 40px; gap:14px; }
  .gs-char { width:100px; padding:10px 8px 8px; }
  .gs-char img { width:48px; height:48px; }
}

/* ═══════════ v3: raridades, fichas, chances, mobile top ═══════════ */
.rar-basic     { --rc:#9a9490; }
.rar-rare      { --rc:#3fa9ff; }
.rar-epic      { --rc:#9b5cff; }
.rar-legendary { --rc:#ff1e2d; }
.rar-ultra     { --rc:#ffb300; }
.rar-boosted   { --rc:#3fd6e8; }

.mini-btn {
  font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--grey);
  border:1px solid var(--line); padding:8px 12px;
}
.mini-btn:hover { color:var(--red); border-color:var(--red); }

/* coleção em cards clicáveis */
.col-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:14px; }
.col-slot {
  text-align:left; background:var(--bg-2); border:1px solid var(--line); padding:0; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .2s, border-color .2s, box-shadow .2s;
  border-top:3px solid var(--rc);
}
.col-slot:hover { transform:translateY(-4px); border-color:var(--rc); box-shadow:0 12px 34px rgba(0,0,0,.6), 0 0 26px color-mix(in srgb, var(--rc) 22%, transparent); }
.cs-img { aspect-ratio:3/4; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#08080a; }
.cs-img img { width:100%; height:100%; object-fit:contain; }
.cs-img.locked img { width:56%; height:auto; border-radius:50%; filter:brightness(.32) grayscale(.85); }
.cs-info { padding:10px 12px 12px; display:flex; flex-direction:column; gap:3px; }
.cs-info b { font-family:var(--anton); font-size:14px; letter-spacing:.04em; font-weight:400; }
.cs-meta { font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; color:var(--grey); }
.cs-rar { font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; color:var(--rc); font-weight:700; }
.col-locked { opacity:.72; }
.col-new { animation:colpop .6s cubic-bezier(.2,1.4,.3,1); }

/* modal genérico */
.modal { position:fixed; inset:0; z-index:380; background:rgba(3,3,3,.9); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:16px; overflow-y:auto; }
.modal-close { position:absolute; top:12px; right:14px; color:var(--grey); font-size:18px; z-index:3; }
.modal-close:hover { color:var(--red); }

/* ficha */
.ficha-box {
  position:relative; width:min(860px,100%); max-height:92vh; overflow-y:auto;
  background:var(--bg-2); border:1px solid var(--line); border-top:4px solid var(--rc);
  padding:clamp(20px,3.4vw,38px); animation:popIn .3s cubic-bezier(.2,1.4,.3,1);
  box-shadow:0 0 60px color-mix(in srgb, var(--rc) 18%, transparent);
}
@keyframes popIn { from { transform:scale(.9); opacity:0 } }
.ficha-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(18px,3vw,34px); align-items:start; }
.fb-img { background:#08080a; border:1px solid var(--line); padding:10px; }
.fb-img img { width:100%; display:block; }
.fb-num { font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; color:var(--grey); }
.fb-name { font-family:var(--anton); font-size:clamp(26px,4vw,44px); line-height:1; margin:6px 0 2px; }
.fb-zh { font-family:var(--mono); font-size:12px; letter-spacing:.3em; color:var(--grey); margin-bottom:10px; }
.fb-rar { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.2em; border:1px solid currentColor; padding:5px 10px; display:inline-block; }
.fb-lore { color:var(--grey); font-size:14.5px; margin:14px 0; }
.fb-stats { display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.fs-row { display:grid; grid-template-columns:64px 1fr; align-items:center; gap:12px;
  font-family:var(--mono); font-size:9px; letter-spacing:.22em; color:var(--grey); }
.fs-row i { display:block; height:8px; background:var(--line); overflow:hidden; }
.fs-row b { display:block; height:100%; width:0%; background:var(--rc); box-shadow:0 0 10px var(--rc); }
.fb-skill { font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--grey); margin-bottom:12px; }
.fb-skill b { color:var(--rc); font-size:12px; letter-spacing:.1em; }
.fb-traits { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.fb-traits i { font-style:normal; font-family:var(--mono); font-size:8.5px; letter-spacing:.16em; color:var(--white); border:1px solid var(--line); padding:6px 9px; }
.fb-lvl { margin-bottom:12px; }
.fl-head { display:flex; justify-content:space-between; font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--grey); margin-bottom:6px; }
.fl-bar { height:6px; background:var(--line); }
.fl-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--red-dk),var(--red)); }
.fb-game { font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--rc); }

/* chances */
.chances-box { position:relative; width:min(760px,100%); max-height:90vh; overflow-y:auto;
  background:var(--bg-2); border:1px solid var(--line); padding:clamp(22px,3.4vw,38px); }
.ch-title { font-family:var(--anton); font-size:clamp(24px,4vw,36px); letter-spacing:.03em; }
.ch-sub { color:var(--grey); font-size:13.5px; margin:6px 0 20px; }
.ch-group { border:1px solid var(--line); border-left:3px solid var(--rc); padding:14px 16px; margin-bottom:12px; }
.ch-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.ch-head b { font-family:var(--anton); font-size:17px; letter-spacing:.06em; color:var(--rc); font-weight:400; }
.ch-head span { font-family:var(--mono); font-size:13px; color:var(--white); font-weight:700; }
.ch-toys { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.ch-toy { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--grey); }
.ch-toy img { width:26px; height:26px; border-radius:50%; object-fit:cover; border:1px solid var(--rc); flex:none; }
.ch-toy span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-toy b { color:var(--rc); }

/* caixa: efeitos por raridade */
.case-fx { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s; }
.case-fx.on { opacity:1; }
.case-fx.on::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rar) 30%, transparent), transparent 60%);
  animation:fxPulse 1.6s ease-in-out infinite;
}
@keyframes fxPulse { 50% { opacity:.55; transform:scale(1.06) } }
.fx-legendary::after, .fx-ultra::after, .fx-boosted::after {
  content:''; position:absolute; inset:-40%;
  background:conic-gradient(from 0deg, transparent 0 12%, color-mix(in srgb, var(--rar) 55%, transparent) 14%, transparent 16% 100%);
  animation:fxRays 6s linear infinite; opacity:.5;
}
@keyframes fxRays { to { transform:rotate(360deg) } }
.case-item.rar-legendary, .case-item.rar-ultra, .case-item.rar-boosted { box-shadow:inset 0 -30px 40px -30px var(--rar); }
.case-item small { font-family:var(--mono); font-size:7.5px; letter-spacing:.12em; color:var(--rar); }
.case-item.win { animation:winPop .5s cubic-bezier(.2,1.5,.3,1); }
@keyframes winPop { from { transform:scale(.8) } 60% { transform:scale(1.12) } }
.case-result img { width:150px; margin:0 auto 6px; display:block; }
.cr-title { font-family:var(--anton); font-size:clamp(26px,4.6vw,42px); letter-spacing:.03em; }
.cr-rar { font-family:var(--mono); font-size:11px; letter-spacing:.24em; font-weight:700; }
.cr-sub { font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--grey); margin-bottom:14px; }

/* loja */
.sc-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.sc-lvl { font-family:var(--mono); font-size:9px; letter-spacing:.16em; color:var(--grey); }
.shop-pips i { flex:1; }

/* toast do jogo */
.g-toast {
  position:absolute; top:16%; left:50%; transform:translateX(-50%); z-index:6;
  font-family:var(--anton); font-size:clamp(22px,4vw,38px); letter-spacing:.05em; color:var(--white);
  background:rgba(5,5,5,.8); border:1px solid var(--red); padding:12px 24px; pointer-events:none;
  text-shadow:0 0 20px rgba(255,30,45,.7);
}
.g-hud #gLevel { color:#35d07f; }

/* ═══ MOBILE: barra em cima, proporções ═══ */
@media (max-width: 820px) {
  .app { padding:0 12px; }
  .top { padding:10px 0 8px; gap:8px; }
  .top-logo b { display:none; }
  .nav-x { width:26px; height:26px; }
  .wallet { margin-left:0; flex:1; }
  .w-chip { font-size:11px; padding:8px 10px; flex:1; text-align:center; }
  /* tabs FIXAS NO TOPO (não embaixo) */
  .tabs {
    position:sticky; top:0; bottom:auto; left:0; right:0;
    background:var(--bg); border-top:none; border-bottom:1px solid var(--line);
    padding:0; margin:0 -12px; padding-left:12px; padding-right:12px;
    overflow-x:auto; scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar { display:none; }
  .tabs button { flex:1 0 auto; padding:13px 12px 11px; font-size:10px; letter-spacing:.14em;
    border-top:none; border-bottom:2px solid transparent; margin-bottom:-1px; }
  .tabs button.on { border-bottom-color:var(--red); border-top-color:transparent; }
  .content { padding:20px 0 40px; gap:20px; }
  .hello h2 { font-size:clamp(26px,8vw,40px); }
  .hello-sub { font-size:14px; }
  .home-grid { grid-template-columns:1fr; gap:10px; }
  .home-card { padding:16px; }
  .home-card b { font-size:19px; }
  .tab-head { flex-wrap:wrap; gap:8px; }
  .tab-head h3 { font-size:22px; }
  .tab-head span { font-size:9px; }
  .col-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .cs-info b { font-size:12.5px; }
  .roleta-wrap { grid-template-columns:1fr; gap:16px; }
  .wheel-box { width:min(320px,86vw); }
  .roleta-side { align-items:stretch; }
  .roleta-side .btn { width:100%; }
  .roleta-txt { font-size:14px; }
  .shop-grid { grid-template-columns:1fr; gap:10px; }
  .arcade-chars img { width:44px; height:44px; }
  .arcade-box .btn-big { width:100%; }
  .ficha-grid { grid-template-columns:1fr; gap:16px; }
  .fb-img img { max-height:34vh; width:auto; margin:0 auto; }
  .ch-toys { grid-template-columns:1fr; }
  .case-item { width:82px; height:100px; }
  .case-item img { width:44px; height:44px; }
  .case-result img { width:110px; }
  .g-legend { gap:10px; font-size:8px; padding:6px 8px; }
}