:root {
  --bg: #05070f;
  --panel: rgba(12, 22, 48, 0.78);
  --line: #2f7bff;
  --glow: rgba(64, 140, 255, 0.55);
  --text: #dbe7ff;
  --muted: #7f93bf;
  --gem: #2ee6a6;
  --gold: #ffcc4d;
  --danger: #ff3b5c;
  --radius: 12px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(47, 123, 255, 0.18), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(124, 58, 237, 0.18), transparent 60%),
    linear-gradient(rgba(47, 123, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(47, 123, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--bg);
  color: var(--text);
  font: 15px/1.4 system-ui, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
.app { display: flex; flex-direction: column; height: 100%; padding: 12px clamp(12px, 3vw, 28px); gap: 12px; }

/* topo */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand { font-weight: 800; letter-spacing: 0.12em; text-shadow: 0 0 12px var(--glow); }
.brand span { margin-left: 10px; color: var(--muted); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8em; }
.who { display: flex; align-items: center; gap: 10px; }
.name { font-weight: 600; }
.rank { font-size: 0.85em; color: var(--muted); }
.bal { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); box-shadow: 0 0 14px var(--glow) inset; font-variant-numeric: tabular-nums; }
.icon { background: none; border: 0; font-size: 18px; padding: 4px; }

/* palco */
.stage { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; min-height: 0; }
.board-wrap { position: relative; display: grid; place-items: center; min-height: 0; }
.board {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(6px, 1.2vw, 12px);
  width: min(100%, calc((100vh - 140px) * 1.25)); max-width: 640px;
}
.tile {
  aspect-ratio: 1; border-radius: var(--radius); border: 1px solid rgba(47, 123, 255, 0.45);
  background: linear-gradient(160deg, #0f1f45, #0a1430);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 6px 18px rgba(0, 0, 0, 0.4);
  display: grid; place-items: center; font-size: clamp(20px, 4.2vw, 40px);
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.25s ease, border-color 0.2s;
  position: relative; overflow: hidden; user-select: none;
}
.tile::before { content: "🌫️"; opacity: 0.55; filter: grayscale(0.4); transition: opacity 0.2s; }
.tile:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 0 18px var(--glow); border-color: var(--line); }
.tile:not(:disabled):active { transform: scale(0.95); }
.tile:disabled { cursor: default; }
.board.locked .tile { opacity: 0.55; }

/* abrindo: aparece na hora do clique, antes da resposta */
.tile.opening { animation: pulse 0.45s ease-in-out infinite alternate; border-color: #9cc3ff; }
.tile.opening::before { content: "✦"; opacity: 1; color: #9cc3ff; }
@keyframes pulse { from { box-shadow: 0 0 6px var(--glow); } to { box-shadow: 0 0 26px #9cc3ff; } }

.tile.safe { background: radial-gradient(circle at 50% 40%, rgba(46, 230, 166, 0.35), #082a24 70%); border-color: var(--gem); animation: pop 0.35s ease-out; }
.tile.safe::before { content: "💎"; opacity: 1; filter: drop-shadow(0 0 8px var(--gem)); }
.tile.monster { background: radial-gradient(circle at 50% 40%, rgba(255, 59, 92, 0.25), #2a0a12 70%); border-color: rgba(255, 59, 92, 0.6); animation: pop 0.3s ease-out both; }
.tile.monster::before { content: "👹"; opacity: 1; }
.tile.hit { background: radial-gradient(circle at 50% 40%, rgba(255, 59, 92, 0.6), #3a0610 70%); border-color: var(--danger); box-shadow: 0 0 28px var(--danger); animation: shake 0.4s ease; }
.tile.hit::before { content: "💥"; opacity: 1; }
.tile.ghost::before { content: "💠"; opacity: 0.35; }
@keyframes pop { 0% { transform: scale(0.6) rotateY(90deg); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

/* faixa de resultado */
.banner {
  position: absolute; inset: auto 0 6% 0; margin: auto; width: fit-content; max-width: 92%;
  padding: 12px 22px; border-radius: 14px; text-align: center; font-weight: 700; font-size: clamp(16px, 2.4vw, 22px);
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 0 30px var(--glow); backdrop-filter: blur(6px);
  animation: rise 0.35s ease-out;
}
.banner.win { border-color: var(--gold); box-shadow: 0 0 34px rgba(255, 204, 77, 0.45); }
.banner.lose { border-color: var(--danger); box-shadow: 0 0 34px rgba(255, 59, 92, 0.45); }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* painel lateral */
.panel {
  background: var(--panel); border: 1px solid rgba(47, 123, 255, 0.55); border-radius: 16px; padding: 18px;
  box-shadow: 0 0 24px rgba(47, 123, 255, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  display: flex; flex-direction: column; gap: 10px; align-self: start; position: relative;
  max-height: 100%; overflow-y: auto;
}
.panel > div { display: flex; flex-direction: column; gap: 10px; }
.title { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85em; color: #9cc3ff; }
.lbl { color: var(--muted); font-size: 0.9em; }
.input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(47, 123, 255, 0.5); background: #07102a; color: var(--text); font-size: 1.05em; font-variant-numeric: tabular-nums; }
.input:focus { outline: none; border-color: var(--line); box-shadow: 0 0 12px var(--glow); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { flex: 1; min-width: 44px; padding: 6px 4px; border-radius: 8px; border: 1px solid rgba(47, 123, 255, 0.35); background: #0b1838; font-size: 0.85em; }
.chips button:hover { border-color: var(--line); }
input[type=range] { width: 100%; accent-color: var(--line); }
.grade { display: inline-block; min-width: 22px; text-align: center; padding: 0 6px; border-radius: 6px; background: #0b1838; border: 1px solid var(--line); color: #9cc3ff; font-weight: 800; }
.hint, .sub { color: var(--muted); font-size: 0.88em; }
.cta { margin-top: 4px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, #2457d6, #173a99); font-weight: 700; box-shadow: 0 0 18px var(--glow); }
.cta:hover:not(:disabled) { filter: brightness(1.12); }
.cta:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.cta.gold { background: linear-gradient(180deg, #d4a017, #8a6508); border-color: var(--gold); box-shadow: 0 0 18px rgba(255, 204, 77, 0.4); color: #fff8e0; }
.cta.ghost { background: transparent; box-shadow: none; }
.mult { font-size: clamp(38px, 5vw, 54px); font-weight: 800; line-height: 1; text-shadow: 0 0 18px var(--glow); font-variant-numeric: tabular-nums; }
.mult.bump { animation: bump 0.25s ease-out; }
@keyframes bump { 50% { transform: scale(1.12); color: var(--gem); } }
.progress { height: 6px; border-radius: 6px; background: #0b1838; overflow: hidden; }
#bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--line), var(--gem)); transition: width 0.3s ease; }

.foot { color: #4f6290; font-size: 0.75em; text-align: center; }

#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 10; }
#flash.red { animation: flash-red 0.5s ease-out; }
#flash.gold { animation: flash-gold 0.7s ease-out; }
@keyframes flash-red { from { opacity: 1; background: radial-gradient(circle, rgba(255, 59, 92, 0.35), transparent 70%); } to { opacity: 0; } }
@keyframes flash-gold { from { opacity: 1; background: radial-gradient(circle, rgba(255, 204, 77, 0.3), transparent 70%); } to { opacity: 0; } }
.board.shake { animation: shake 0.45s ease; }

.spark { position: fixed; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; z-index: 11; }

/* telas estreitas (celular / janela pequena da Activity) */
@media (max-width: 760px) {
  body { overflow: auto; }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .board { width: min(100%, 460px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}

/* ---------- abas ---------- */
.tabs { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: rgba(12, 22, 48, 0.6); border: 1px solid rgba(47, 123, 255, 0.35); }
.tab { border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; font-weight: 700; color: var(--muted); }
.tab.active { background: linear-gradient(180deg, #2457d6, #173a99); color: #fff; box-shadow: 0 0 14px var(--glow); }

/* ---------- aviso (fixo, vale para as duas abas) ---------- */
.toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 20; max-width: min(92vw, 520px);
  padding: 10px 16px; border-radius: 10px; background: #2a0a12; border: 1px solid var(--danger); font-size: 0.92em;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); animation: rise 0.25s ease-out;
}
.toast.good { background: #082a24; border-color: var(--gem); }

/* ---------- portal ---------- */
.pstage {
  position: relative; min-height: 0; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(47, 123, 255, 0.45); background: radial-gradient(ellipse at 50% 60%, #0b1a3d, #050a18 70%);
  box-shadow: 0 0 30px rgba(47, 123, 255, 0.2) inset;
}
#pCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.poverlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; padding: 16px; }
.pstatus { font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; font-size: clamp(11px, 1.4vw, 14px); color: #9cc3ff; text-shadow: 0 0 10px var(--glow); }
.pmult { font-size: clamp(54px, 10vw, 112px); font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; text-shadow: 0 0 28px var(--glow); }
.pmult.crash { color: var(--danger); text-shadow: 0 0 34px rgba(255, 59, 92, 0.7); animation: shake 0.45s ease; }
.pmult.idle { opacity: 0.55; }
.psub { color: var(--muted); font-size: clamp(13px, 1.6vw, 16px); min-height: 1.4em; }
.phist { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }
.phist span { font-size: 0.78em; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(5, 10, 24, 0.75); border: 1px solid rgba(255, 59, 92, 0.45); color: #ff9aac; font-variant-numeric: tabular-nums; }
.phist span.hi { border-color: rgba(46, 230, 166, 0.55); color: #8ff5d0; }
.phist span.mega { border-color: rgba(255, 204, 77, 0.7); color: var(--gold); }

.title.small { font-size: 0.75em; margin-top: 6px; }
.muted { color: var(--muted); font-weight: 600; }
.panel > .mine { display: block; }
.mine { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(36, 87, 214, 0.15); font-size: 0.95em; }
.mine.win { border-color: var(--gem); background: rgba(46, 230, 166, 0.12); }
.mine.lose { border-color: var(--danger); background: rgba(255, 59, 92, 0.1); }
.mine b { font-variant-numeric: tabular-nums; }
.plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 32vh; overflow-y: auto; }
.plist li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(11, 24, 56, 0.6); font-size: 0.86em; font-variant-numeric: tabular-nums; }
.plist li.me { outline: 1px solid var(--line); }
.plist li.out { background: rgba(46, 230, 166, 0.12); }
.plist li.dead { background: rgba(255, 59, 92, 0.1); color: #c98a96; }
.plist .who-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist .empty { justify-content: center; color: var(--muted); background: transparent; }

@media (max-width: 760px) {
  .app { height: auto; min-height: 100%; }
  .panel { max-height: none; overflow: visible; }
  .pstage { min-height: 46vh; }
  .top { justify-content: center; }
}

/* ---------- sobrevivência ---------- */
.tile.dead { background: radial-gradient(circle at 50% 40%, rgba(255, 59, 92, 0.45), #2a0610 70%); border-color: var(--danger); }
.tile.dead::before { content: "💀"; opacity: 1; }
.tile.myturn:not(:disabled) { border-color: var(--gold); box-shadow: 0 0 14px rgba(255, 204, 77, 0.35); }
.plist.log li { background: transparent; color: var(--muted); padding: 2px 4px; font-size: 0.8em; }
.plist li .join { border: 1px solid var(--line); background: #173a99; border-radius: 8px; padding: 2px 10px; font-weight: 700; }
.plist li.turn { outline: 1px solid var(--gold); background: rgba(255, 204, 77, 0.1); }
.mine.turn { border-color: var(--gold); background: rgba(255, 204, 77, 0.12); animation: pulse-gold 1s ease-in-out infinite alternate; }
@keyframes pulse-gold { from { box-shadow: 0 0 4px rgba(255, 204, 77, 0.3); } to { box-shadow: 0 0 18px rgba(255, 204, 77, 0.6); } }

/* ---------- roleta ao vivo ---------- */
.rstage { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }
.rwheel-wrap {
  position: relative; flex: 1; min-height: 220px; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(47, 123, 255, 0.45); background: radial-gradient(ellipse at 50% 55%, #0b1a3d, #050a18 70%);
}
#rCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.roverlay {
  position: absolute; left: 50%; top: calc(50% + 6px); transform: translate(-50%, -50%); width: min(46%, 300px);
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; pointer-events: none;
}
.roverlay .pstatus { font-size: clamp(9px, 1.1vw, 12px); letter-spacing: 0.08em; }
.roverlay .psub { font-size: clamp(11px, 1.3vw, 14px); }
.rbig { font-size: clamp(34px, 6vw, 64px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px var(--glow); }
.rbig.red { color: #ff5470; text-shadow: 0 0 24px rgba(255, 59, 92, 0.6); }
.rbig.black { color: #e8eefc; }
.rbig.green { color: #2ee6a6; text-shadow: 0 0 24px rgba(46, 230, 166, 0.6); }
.rtable-wrap { overflow-x: auto; padding-bottom: 4px; }
.rtable {
  display: grid; grid-template-columns: 44px repeat(12, minmax(34px, 1fr)); grid-auto-rows: 38px; gap: 3px;
  min-width: 520px; user-select: none;
}
.rcell {
  position: relative; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; font-weight: 800; font-size: 0.92em;
  display: grid; place-items: center; background: #0b1838; color: #fff; padding: 0;
}
.rcell.red { background: linear-gradient(180deg, #b3122f, #7a0b20); }
.rcell.black { background: linear-gradient(180deg, #1b1f2c, #0d1018); }
.rcell.green { background: linear-gradient(180deg, #0f8a5f, #075a3d); }
.rcell.out { background: #10224f; font-size: 0.8em; }
.rcell:not(:disabled):hover { outline: 2px solid var(--gold); z-index: 1; }
.rcell:disabled { cursor: default; opacity: 0.85; }
.rcell.win { outline: 3px solid var(--gold); box-shadow: 0 0 18px rgba(255, 204, 77, 0.8); z-index: 2; animation: pulse-gold 0.6s ease-in-out infinite alternate; }
.rcell .chip-me {
  position: absolute; top: -7px; right: -5px; min-width: 22px; padding: 1px 5px; border-radius: 999px; font-size: 0.68em;
  background: var(--gold); color: #3a2a00; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); z-index: 3;
}
.rcell .chip-all { position: absolute; bottom: 1px; left: 3px; font-size: 0.6em; font-weight: 600; color: rgba(255, 255, 255, 0.65); }
.chips button.sel { border-color: var(--gold); background: rgba(255, 204, 77, 0.18); color: var(--gold); }
@media (max-width: 760px) {
  .rwheel-wrap { min-height: 42vh; }
}
.rwheel-wrap .phist { top: auto; bottom: 10px; }

/* =====================================================================
   v2.5: grupos de abas, cassino completo e lado RPG
   ===================================================================== */
.groups { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: rgba(12, 22, 48, 0.6); border: 1px solid rgba(47, 123, 255, 0.35); }
.group { border: 0; background: transparent; padding: 7px 16px; border-radius: 9px; font-weight: 800; color: var(--muted); }
.group.active { background: linear-gradient(180deg, #2457d6, #173a99); color: #fff; box-shadow: 0 0 14px var(--glow); }
.app > .tabs { overflow-x: auto; scrollbar-width: thin; flex-wrap: nowrap; flex-shrink: 0; }
.app > .tabs .tab { white-space: nowrap; flex-shrink: 0; }
.bal { cursor: pointer; }
.view.page { flex: 1; min-height: 0; overflow-y: auto; }
.page-body { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding-bottom: 12px; }
.loading { color: var(--muted); text-align: center; padding: 40px; }
.box { background: var(--panel); border: 1px solid rgba(47, 123, 255, 0.45); border-radius: 16px; padding: 16px; box-shadow: 0 0 20px rgba(47, 123, 255, 0.15); min-width: 0; }
.box > * + * { margin-top: 8px; }
.box > .cta { display: block; width: 100%; }
.box > .mini { display: inline-block; }
.box h3 { margin: 0 0 4px; font-size: 0.85em; letter-spacing: 0.08em; text-transform: uppercase; color: #9cc3ff; }
.box.glow { border-color: var(--line); box-shadow: 0 0 26px var(--glow); }
.box.glow-gold { border-color: var(--gold); box-shadow: 0 0 26px rgba(255, 204, 77, 0.35); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.center { text-align: center; }
.mini { padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(47, 123, 255, 0.5); background: #10224f; font-size: 0.85em; font-weight: 700; }
.mini:hover:not(:disabled) { border-color: var(--line); filter: brightness(1.15); }
.mini:disabled { opacity: 0.45; cursor: default; }
.mini.gold { border-color: var(--gold); background: rgba(255, 204, 77, 0.16); color: var(--gold); }
.mini.sel { border-color: var(--gold); color: var(--gold); }
.mini.back { align-self: flex-start; }
.cta.big { font-size: 1.15em; padding: 14px 22px; }
.cta.danger { background: linear-gradient(180deg, #d6243f, #8a0f22); border-color: var(--danger); box-shadow: 0 0 18px rgba(255, 59, 92, 0.45); }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: rgba(47, 123, 255, 0.18); border: 1px solid rgba(47, 123, 255, 0.45); font-size: 0.78em; font-weight: 700; }
.tag.gold, .tag.vip { background: rgba(255, 204, 77, 0.15); border-color: var(--gold); color: var(--gold); }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-row span { padding: 4px 10px; border-radius: 8px; background: rgba(11, 24, 56, 0.8); border: 1px solid rgba(47, 123, 255, 0.25); font-size: 0.88em; }
.bar { flex: 1; height: 8px; border-radius: 8px; background: rgba(47, 123, 255, 0.18); overflow: hidden; min-width: 40px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--line), var(--gem)); border-radius: 8px; transition: width 0.4s ease; }
.cd { font-variant-numeric: tabular-nums; color: #9cc3ff; font-weight: 700; }
.cd.ready { color: var(--gem); }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline .input { flex: 1; min-width: 80px; }
.confirm { padding: 10px; border-radius: 10px; border: 1px solid var(--gold); background: rgba(255, 204, 77, 0.1); display: flex; flex-direction: column; gap: 8px; }
.stars { color: var(--gold); letter-spacing: 1px; }
.sub2 { opacity: 0.7; }
.paytable li { justify-content: space-between; }
#flash.purple { animation: flash-purple 0.9s ease-out; }
@keyframes flash-purple { from { opacity: 1; background: radial-gradient(circle, rgba(124, 58, 237, 0.45), transparent 70%); } to { opacity: 0; } }
.pop-in { animation: pop-in 0.35s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes pop-in { from { transform: scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* janela do Sistema (nível e missões) */
/* não bloqueia a tela: fica em cima, o jogo continua visível embaixo */
.notice { position: fixed; left: 0; right: 0; top: 64px; z-index: 30; display: flex; justify-content: center; pointer-events: none; }
.notice .n-win { pointer-events: auto; cursor: pointer; }
.n-win {
  min-width: min(88vw, 340px); max-width: 92vw; padding: 20px 26px; border-radius: 14px; text-align: center; display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, rgba(14, 30, 70, 0.96), rgba(6, 12, 30, 0.96)); border: 1px solid var(--line);
  box-shadow: 0 0 40px var(--glow), 0 0 0 1px rgba(156, 195, 255, 0.2) inset;
}
.n-head { font-weight: 800; letter-spacing: 0.2em; color: #9cc3ff; text-shadow: 0 0 10px var(--glow); }
.n-title { font-weight: 900; letter-spacing: 0.08em; color: var(--gold); }
.n-big { font-size: 1.5em; font-weight: 900; }
.n-rank { padding: 8px; border-radius: 10px; background: rgba(124, 58, 237, 0.18); border: 1px solid rgba(167, 139, 250, 0.5); }
.n-ok { color: var(--muted); font-size: 0.75em; }

/* ---------- mesas do cassino ---------- */
.felt, .machine, .temple, .coin-stage, .arena {
  position: relative; min-height: 0; border-radius: 18px; overflow: hidden; padding: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border: 1px solid rgba(47, 123, 255, 0.45); background: radial-gradient(ellipse at 50% 45%, #0f2453, #050a18 75%);
  box-shadow: 0 0 30px rgba(47, 123, 255, 0.2) inset;
}
.felt { background: radial-gradient(ellipse at 50% 50%, #0f3a2c, #041510 78%); border-color: rgba(46, 230, 166, 0.35); }
.felt-msg { font-weight: 800; font-size: clamp(15px, 2.2vw, 20px); text-align: center; padding: 8px 16px; border-radius: 12px; background: rgba(5, 10, 24, 0.55); border: 1px solid rgba(47, 123, 255, 0.35); max-width: 94%; }
.felt-msg.win { border-color: var(--gem); color: #8ff5d0; box-shadow: 0 0 22px rgba(46, 230, 166, 0.35); }
.felt-msg.gold { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 26px rgba(255, 204, 77, 0.45); }
.felt-msg.lose { border-color: var(--danger); color: #ff9aac; }
.felt-msg.push { border-color: #9ca3af; color: #d1d5db; }
.mtitle { font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: #9cc3ff; text-shadow: 0 0 12px var(--glow); }

/* blackjack */
.hand { display: flex; gap: 10px; min-height: clamp(96px, 16vh, 130px); justify-content: center; flex-wrap: wrap; }
.hand-lbl { color: #b9f5dc; font-weight: 800; letter-spacing: 0.06em; }
.card {
  width: clamp(62px, 8vw, 84px); aspect-ratio: 5 / 7; border-radius: 10px; background: linear-gradient(160deg, #ffffff, #e6e9f2);
  color: #111827; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); border: 1px solid #cbd5e1; position: relative;
}
.card span { font-size: clamp(22px, 3vw, 30px); line-height: 1; }
.card small { font-size: clamp(18px, 2.4vw, 26px); }
.card.red { color: #c81e3a; }
.card.back { background: repeating-linear-gradient(45deg, #2457d6 0 8px, #173a99 8px 16px); border: 2px solid #9cc3ff; }
.card.back::after { content: "🗡️"; font-size: 26px; filter: drop-shadow(0 0 6px #000); }
.card.deal { animation: deal 0.38s cubic-bezier(.2, .8, .3, 1.15) both; }
@keyframes deal { from { transform: translate(40vw, -30vh) rotate(25deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* slots */
.reels { display: flex; gap: clamp(8px, 2vw, 16px); padding: 14px; border-radius: 16px; background: #050a18; border: 2px solid var(--gold); box-shadow: 0 0 30px rgba(255, 204, 77, 0.25); }
.reel { width: clamp(80px, 13vw, 130px); height: clamp(170px, 30vh, 240px); border-radius: 12px; background: linear-gradient(180deg, #0b1838, #12275a 50%, #0b1838); display: flex; flex-direction: column; align-items: center; justify-content: space-around; overflow: hidden; border: 1px solid rgba(47, 123, 255, 0.4); }
.r-mid { font-size: clamp(44px, 7vw, 68px); filter: drop-shadow(0 0 10px rgba(156, 195, 255, 0.5)); }
.r-side { font-size: clamp(22px, 3.5vw, 32px); opacity: 0.3; }
.reel.spin .r-mid, .reel.spin .r-side { filter: blur(2px); }
.reel.stop { animation: reel-stop 0.3s ease-out; }
@keyframes reel-stop { 0% { transform: translateY(-14px); } 60% { transform: translateY(5px); } 100% { transform: none; } }

/* templo */
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; border-radius: 16px; background: #0a0d18; border: 2px solid #8a6b2b; box-shadow: 0 0 30px rgba(255, 204, 77, 0.15); }
.tcell { width: clamp(70px, 11vw, 110px); aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; font-size: clamp(34px, 5.5vw, 54px); background: linear-gradient(160deg, #1b1a2b, #0e0d18); border: 1px solid rgba(255, 215, 120, 0.25); transition: box-shadow 0.2s, border-color 0.2s; }
.tcell.spin { filter: blur(2px); opacity: 0.7; }
.tcell.empty { background: #07070d; }
.tcell.locked { border-color: var(--gold); box-shadow: 0 0 14px rgba(255, 204, 77, 0.35) inset; }
.tcell.win { border-color: var(--gold); box-shadow: 0 0 22px rgba(255, 204, 77, 0.8); animation: pulse-gold 0.6s ease-in-out infinite alternate; }
.tcell.slip { animation: slip 0.9s ease-in forwards; }
@keyframes slip { 0%, 40% { transform: none; opacity: 1; } 100% { transform: translateY(60px); opacity: 0; } }

/* moeda */
.coin-wrap { perspective: 800px; }
.coin-wrap.toss { animation: toss 1.6s cubic-bezier(.3, .1, .3, 1); }
@keyframes toss { 0% { transform: none; } 45% { transform: translateY(-90px) scale(1.15); } 100% { transform: none; } }
.coin { width: clamp(140px, 22vw, 200px); aspect-ratio: 1; position: relative; transform-style: preserve-3d; transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font-size: clamp(64px, 10vw, 96px); backface-visibility: hidden; }
.face.luz { background: radial-gradient(circle at 35% 30%, #fff2b0, #e0a81c 60%, #8a6508); border: 6px solid #ffd76a; box-shadow: 0 0 40px rgba(255, 204, 77, 0.5); }
.face.sombra { background: radial-gradient(circle at 35% 30%, #a78bfa, #4c1d95 60%, #1e0b45); border: 6px solid #8b5cf6; box-shadow: 0 0 40px rgba(124, 58, 237, 0.5); transform: rotateY(180deg); }
.sides { display: flex; gap: 8px; }
.side { flex: 1; padding: 12px; border-radius: 12px; border: 1px solid rgba(47, 123, 255, 0.45); background: #0b1838; font-weight: 800; font-size: 1.05em; }
.side.sel { border-color: var(--gold); background: rgba(255, 204, 77, 0.15); color: var(--gold); box-shadow: 0 0 14px rgba(255, 204, 77, 0.3); }

/* duelo */
.duelists { display: flex; align-items: center; gap: clamp(14px, 4vw, 40px); }
.fighter { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: clamp(48px, 8vw, 72px); transition: transform 0.4s, opacity 0.4s; }
.fighter b { font-size: 15px; max-width: 160px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fighter.wait { opacity: 0.5; animation: pulse 1s ease-in-out infinite alternate; }
.fighter.done.won { transform: scale(1.15); filter: drop-shadow(0 0 16px var(--gold)); }
.fighter.done.lost { opacity: 0.35; transform: rotate(-12deg); }
.vs { font-weight: 900; font-size: clamp(22px, 4vw, 34px); color: var(--danger); text-shadow: 0 0 14px rgba(255, 59, 92, 0.6); }
.moves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 520px; width: 100%; }
.moves li { padding: 8px 12px; border-radius: 10px; background: rgba(5, 10, 24, 0.6); border: 1px solid rgba(47, 123, 255, 0.3); }
.later { animation: rise 0.4s ease-out both; }
.target { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--gold); background: rgba(255, 204, 77, 0.1); display: flex; align-items: center; gap: 6px; }
.x { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 1em; }
.plist.picker li.pick { cursor: pointer; padding: 8px 10px; font-size: 0.95em; }
.plist.picker li.pick:hover { outline: 1px solid var(--line); }

/* ---------- RPG ---------- */
.quest { margin: 0; padding: 10px 12px; border-radius: 10px; background: #050a18; border: 1px solid rgba(47, 123, 255, 0.35); font: 13px/1.5 ui-monospace, Consolas, monospace; color: #9cc3ff; overflow-x: auto; }
.refcode { font-size: 1.6em; font-weight: 800; letter-spacing: 0.18em; color: var(--gold); text-align: center; padding: 6px; border: 1px dashed var(--gold); border-radius: 10px; user-select: all; }
.reward { padding: 8px 10px; border-radius: 10px; background: rgba(255, 204, 77, 0.12); border: 1px solid var(--gold); }
.trow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(47, 123, 255, 0.12); flex-wrap: wrap; }
.trow > span:first-child { flex: 1; min-width: 120px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tile-btn { padding: 14px; border-radius: 12px; border: 1px solid rgba(47, 123, 255, 0.45); background: #0b1838; text-align: left; font-size: 0.95em; }
.tile-btn:hover { border-color: var(--line); box-shadow: 0 0 14px var(--glow); }
.tile-btn.glow { border-color: var(--gold); box-shadow: 0 0 16px rgba(255, 204, 77, 0.35); }

.prof { border-radius: 18px; overflow: hidden; border: 1px solid var(--rank, var(--line)); box-shadow: 0 0 28px rgba(47, 123, 255, 0.25); background: var(--panel); }
.prof-banner { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.prof-head { display: flex; align-items: center; gap: 16px; padding: 16px; flex-wrap: wrap; }
.avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 900; background: radial-gradient(circle at 35% 30%, #4b6fc4, #0b1838); border: 2px solid var(--rank, var(--line)); box-shadow: 0 0 16px var(--rank, var(--line)); flex-shrink: 0; }
.prof-id { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 4px; }
.lbl2 { color: var(--muted); font-size: 0.75em; letter-spacing: 0.15em; }
.prof-name { font-size: 1.5em; font-weight: 900; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.rank-badge { text-align: center; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--rank, var(--line)); background: rgba(5, 10, 24, 0.5); font-weight: 800; }
.rank-badge .re { font-size: 28px; }
.rank-badge .lv { color: var(--gold); }
.xp { display: flex; align-items: center; gap: 10px; padding: 0 16px 16px; font-size: 0.85em; color: var(--muted); flex-wrap: wrap; }
.xpbar { height: 12px; }
.xpbar i { background: linear-gradient(90deg, #7c3aed, var(--line), var(--gem)); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat { padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid rgba(47, 123, 255, 0.35); }
.stat .k { color: var(--muted); font-size: 0.8em; }
.stat .v { font-size: 1.3em; font-weight: 900; font-variant-numeric: tabular-nums; }
.stat .s { color: var(--muted); font-size: 0.75em; }
.srow { display: grid; grid-template-columns: 130px 1fr 36px; align-items: center; gap: 8px; font-size: 0.92em; }
.srow b { text-align: right; }
.gslot { padding: 6px 0; border-bottom: 1px solid rgba(47, 123, 255, 0.12); }

.hunt-top { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; justify-content: center; }
.hunt-side { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 10px; }
.gate { position: relative; width: clamp(170px, 26vw, 240px); aspect-ratio: 1; display: grid; place-items: center; }
.gate-ring { position: absolute; inset: 0; border-radius: 50%; border: 4px solid rgba(124, 58, 237, 0.4); border-top-color: #2f7bff; border-left-color: #a78bfa; animation: spin 6s linear infinite; }
.gate-ring.r2 { inset: 14%; animation-duration: 3.5s; animation-direction: reverse; border-color: rgba(47, 123, 255, 0.3); border-bottom-color: #7c3aed; }
.gate-core { font-size: clamp(48px, 7vw, 70px); z-index: 1; filter: grayscale(0.6); opacity: 0.7; }
.gate.open .gate-ring { box-shadow: 0 0 40px rgba(124, 58, 237, 0.6), 0 0 30px rgba(47, 123, 255, 0.5) inset; }
.gate.open .gate-core { filter: none; opacity: 1; animation: pulse-core 1.4s ease-in-out infinite alternate; }
.gate.entering .gate-ring { animation-duration: 0.5s; }
.gate.entering { animation: gate-in 0.7s ease-in forwards; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-core { from { transform: scale(1); } to { transform: scale(1.12); filter: drop-shadow(0 0 16px #a78bfa); } }
@keyframes gate-in { to { transform: scale(1.25); filter: brightness(1.8); } }
.big-cd { font-size: 1.1em; padding: 10px 14px; border-radius: 12px; background: rgba(5, 10, 24, 0.55); border: 1px solid rgba(47, 123, 255, 0.35); }
.hres { padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(5, 10, 24, 0.6); display: flex; flex-direction: column; gap: 8px; }
.hres.win { border-color: var(--gem); }
.hres.gold { border-color: var(--gold); box-shadow: 0 0 22px rgba(255, 204, 77, 0.3); }
.hres.shadow { border-color: #a78bfa; box-shadow: 0 0 22px rgba(124, 58, 237, 0.35); }
.hres.lose { border-color: var(--danger); }
.htitle { font-weight: 900; font-size: 1.15em; }
.loot { display: flex; gap: 14px; flex-wrap: wrap; }
.drops, .buffs { display: flex; gap: 6px; flex-wrap: wrap; }
.drop { padding: 3px 9px; border-radius: 999px; background: rgba(11, 24, 56, 0.85); border: 1px solid rgba(47, 123, 255, 0.35); font-size: 0.85em; }
.arise { margin-top: 12px; padding: 16px; border-radius: 16px; border: 1px solid #7c3aed; background: radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, 0.35), rgba(5, 10, 24, 0.8)); display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.arise.done { opacity: 0.85; }
.arise-btn { background: linear-gradient(180deg, #7c3aed, #3b1680); border-color: #a78bfa; box-shadow: 0 0 22px rgba(124, 58, 237, 0.6); font-size: 1.15em; letter-spacing: 0.06em; }
.arise-btn.charging { animation: charge 0.45s ease-in infinite alternate; }
@keyframes charge { to { box-shadow: 0 0 46px #a78bfa; transform: scale(1.04); } }
.arise.arise-ok { animation: arise-ok 1s ease-out; }
@keyframes arise-ok { 0% { box-shadow: 0 0 0 #7c3aed; } 30% { box-shadow: 0 0 80px #a78bfa; transform: scale(1.04); } 100% { box-shadow: none; transform: none; } }
.alog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.boss { position: relative; padding: 18px; border-radius: 18px; border: 1px solid var(--danger); background: radial-gradient(ellipse at 50% 20%, rgba(255, 59, 92, 0.22), rgba(5, 10, 24, 0.9) 70%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; box-shadow: 0 0 30px rgba(255, 59, 92, 0.2); }
.boss-emoji { font-size: clamp(64px, 11vw, 110px); filter: drop-shadow(0 0 20px rgba(255, 59, 92, 0.6)); }
.boss-emoji.dim { filter: grayscale(1); opacity: 0.4; }
.boss-emoji.hurt { animation: hurt 0.45s ease; }
@keyframes hurt { 20% { transform: translateX(-10px) rotate(-6deg); filter: brightness(2) drop-shadow(0 0 20px #fff); } 50% { transform: translateX(8px); } 100% { transform: none; } }
.boss-name { font-size: 1.3em; font-weight: 900; }
.lore { color: var(--muted); font-style: italic; }
.hp { width: min(100%, 560px); display: flex; flex-direction: column; gap: 4px; }
.hpbar { height: 16px; border: 1px solid rgba(255, 59, 92, 0.5); }
.hpbar i { background: linear-gradient(90deg, #ff3b5c, #ff8a3d); }
.dmg { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); font-size: 2em; font-weight: 900; color: #fff; text-shadow: 0 0 12px #ff3b5c; pointer-events: none; animation: dmg 1.3s ease-out forwards; }
.dmg.crit { color: var(--gold); font-size: 2.6em; text-shadow: 0 0 18px var(--gold); }
@keyframes dmg { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -70px); } }
.board li.me { outline: 1px solid var(--line); }

.points { font-size: 1.05em; padding: 8px 12px; border-radius: 10px; background: rgba(5, 10, 24, 0.5); }
.points.glow { border: 1px solid var(--gold); box-shadow: 0 0 14px rgba(255, 204, 77, 0.3); }
.statrow { display: grid; grid-template-columns: 150px 1fr 70px; grid-template-areas: "n b v" "d d s"; gap: 4px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(47, 123, 255, 0.12); }
.statrow .sname { grid-area: n; }
.statrow .bar { grid-area: b; }
.statrow .sval { grid-area: v; text-align: right; font-variant-numeric: tabular-nums; }
.statrow .sdesc { grid-area: d; color: var(--muted); font-size: 0.88em; }
.statrow .sbtn { grid-area: s; display: flex; gap: 4px; justify-content: flex-end; }

.shadow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.shadow-card { padding: 12px; border-radius: 14px; border: 1px dashed rgba(127, 147, 191, 0.4); background: rgba(5, 10, 24, 0.5); text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.shadow-card.owned { border: 1px solid #7c3aed; background: radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, 0.3), rgba(5, 10, 24, 0.8)); box-shadow: 0 0 16px rgba(124, 58, 237, 0.25); }
.shadow-card .se { font-size: 38px; }
.shadow-card:not(.owned) .se { opacity: 0.4; }
.shadow-card .sn { font-weight: 800; }
.shadow-card .sb { font-size: 0.82em; color: #c4b5fd; }
.pips { display: flex; gap: 3px; }
.pips i { width: 14px; height: 6px; border-radius: 3px; background: #1e1b3a; }
.pips i.on { background: #a78bfa; box-shadow: 0 0 6px #a78bfa; }

.mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.mat { padding: 10px; border-radius: 12px; background: rgba(5, 10, 24, 0.5); border: 1px solid rgba(47, 123, 255, 0.35); text-align: center; }
.mat.zero { opacity: 0.45; }
.mat .me { font-size: 30px; }
.crafts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.craft { padding: 12px; border-radius: 12px; background: rgba(5, 10, 24, 0.5); border: 1px solid rgba(47, 123, 255, 0.35); display: flex; flex-direction: column; gap: 6px; }
.qty { color: var(--gold); font-weight: 800; }
.recipe { display: flex; gap: 5px; flex-wrap: wrap; }
.need { padding: 2px 8px; border-radius: 999px; font-size: 0.82em; border: 1px solid rgba(255, 59, 92, 0.5); color: #ff9aac; background: rgba(255, 59, 92, 0.08); }
.need.ok { border-color: rgba(46, 230, 166, 0.5); color: #8ff5d0; background: rgba(46, 230, 166, 0.08); }
.need small { opacity: 0.75; }
.cbtn { display: flex; gap: 6px; flex-wrap: wrap; }
.bignum { font-size: 2em; font-weight: 900; }

.eqrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.eqslot { padding: 10px; border-radius: 12px; background: rgba(5, 10, 24, 0.5); border: 1px solid rgba(47, 123, 255, 0.35); text-align: center; }
.eqslot .ee { font-size: 30px; }
.eqslot .ee.dim { opacity: 0.35; }
.gear { padding: 10px; border-radius: 12px; background: rgba(5, 10, 24, 0.5); border: 1px solid rgba(127, 147, 191, 0.35); display: flex; flex-direction: column; gap: 6px; }
.gear.t2 { border-color: rgba(47, 123, 255, 0.55); }
.gear.t3 { border-color: rgba(249, 115, 22, 0.6); }
.gear.on { box-shadow: 0 0 16px var(--glow); }
.gear .tier { font-size: 0.75em; color: var(--muted); }
.gear.t3 .tier { color: #fdba74; }
.gear.t2 .tier { color: #93c5fd; }
.lvl { color: var(--gold); font-weight: 900; }

.feat-box { border-color: var(--gold); background: radial-gradient(ellipse at 80% 0%, rgba(255, 204, 77, 0.2), var(--panel) 60%); }
.featured { display: flex; flex-direction: column; gap: 6px; }
.flabel { color: var(--gold); font-weight: 800; letter-spacing: 0.08em; font-size: 0.85em; }
.fname { font-size: 1.6em; font-weight: 900; }
.pity { display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; }
.pitybar i { background: linear-gradient(90deg, #7c3aed, var(--gold)); }
.crys { font-size: 1.1em; }
.pulls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pulls .cta small { font-weight: 600; opacity: 0.85; }
.gc-pull { position: relative; padding: 20px; border-radius: 18px; border: 1px solid #7c3aed; background: radial-gradient(ellipse at 50% 50%, rgba(124, 58, 237, 0.3), rgba(5, 10, 24, 0.95)); display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 220px; justify-content: center; }
.gc-pull.light-gold { border-color: var(--gold); box-shadow: 0 0 60px rgba(255, 204, 77, 0.5); background: radial-gradient(circle, rgba(255, 204, 77, 0.45), rgba(5, 10, 24, 0.95) 70%); }
.gc-pull.light-purple { box-shadow: 0 0 50px rgba(124, 58, 237, 0.55); background: radial-gradient(circle, rgba(167, 139, 250, 0.45), rgba(5, 10, 24, 0.95) 70%); }
.gc-portal { width: 120px; height: 120px; border-radius: 50%; border: 6px solid transparent; border-top-color: #a78bfa; border-bottom-color: #2f7bff; animation: spin 0.8s linear infinite; box-shadow: 0 0 40px rgba(124, 58, 237, 0.7); }
.gc-text { font-weight: 800; text-align: center; }
.gc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; width: 100%; }
.gcard { padding: 12px; border-radius: 12px; text-align: center; background: #0b1838; border: 1px solid #3b82f6; animation: card-flip 0.5s ease-out both; display: flex; flex-direction: column; gap: 4px; }
.gcard.r-SR { border-color: #a855f7; box-shadow: 0 0 16px rgba(168, 85, 247, 0.45); background: linear-gradient(180deg, #2a1050, #0b1838); }
.gcard.r-SSR { border-color: var(--gold); box-shadow: 0 0 24px rgba(255, 204, 77, 0.6); background: linear-gradient(180deg, #4a3608, #0b1838); }
.gcard .gr { font-size: 0.8em; font-weight: 800; }
.gcard .new { color: var(--gem); }
@keyframes card-flip { from { transform: rotateY(90deg) scale(0.8); opacity: 0; } to { transform: none; opacity: 1; } }
.gcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gcol { display: flex; flex-direction: column; gap: 6px; }
.hcard { padding: 8px 10px; border-radius: 10px; background: rgba(5, 10, 24, 0.5); border: 1px solid rgba(59, 130, 246, 0.45); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.hcard.r-SR { border-color: rgba(168, 85, 247, 0.55); }
.hcard.r-SSR { border-color: rgba(255, 204, 77, 0.6); }
.hcard.partner { box-shadow: 0 0 16px var(--glow); border-color: var(--line); }
.hcard.unknown { opacity: 0.45; }

.mission { padding: 8px 0; border-bottom: 1px solid rgba(47, 123, 255, 0.12); display: flex; flex-direction: column; gap: 4px; }
.mission.done { opacity: 0.6; }
.mission.done .mt b { text-decoration: line-through; }
.mprog { display: flex; align-items: center; gap: 8px; font-size: 0.85em; font-variant-numeric: tabular-nums; }
.mprog.big .bar { height: 12px; }
.mrew { font-size: 0.82em; color: var(--gold); }
select.input { appearance: auto; }

.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.bcard { border-radius: 14px; overflow: hidden; border: 1px solid rgba(47, 123, 255, 0.4); background: rgba(5, 10, 24, 0.6); display: flex; flex-direction: column; }
.bcard.on { border-color: var(--gem); box-shadow: 0 0 18px rgba(46, 230, 166, 0.35); }
.bcard img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; background: #0b1838; }
.bi { padding: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

.tabs2 { margin-bottom: 4px; }
.plist.rank { max-height: none; }
.plist.rank li { cursor: pointer; padding: 9px 10px; font-size: 0.95em; }
.plist.rank li:hover { outline: 1px solid var(--line); }

.toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.toggle { flex: 1; min-width: 180px; padding: 10px; border-radius: 12px; border: 1px solid rgba(127, 147, 191, 0.4); background: #0b1838; }
.toggle.on { border-color: var(--gem); background: rgba(46, 230, 166, 0.12); box-shadow: 0 0 12px rgba(46, 230, 166, 0.25); }
.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.plan { padding: 12px; border-radius: 12px; border: 1px solid rgba(47, 123, 255, 0.45); background: #0b1838; text-align: left; }
.plan.sel { border-color: var(--gold); background: rgba(255, 204, 77, 0.12); }
.pix { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.qr { width: min(240px, 100%); background: #fff; padding: 8px; border-radius: 12px; }
.pixcode { font: 12px/1.4 ui-monospace, Consolas, monospace; resize: none; word-break: break-all; }

@media (max-width: 900px) {
  .grid3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .grid2, .gcols, .eqrow, .pulls { grid-template-columns: minmax(0, 1fr); }
  .view.page { overflow: visible; }
  .felt, .machine, .temple, .coin-stage, .arena { min-height: 46vh; }
  .statrow { grid-template-columns: 1fr 60px; grid-template-areas: "n v" "b b" "d d" "s s"; }
  .statrow .sbtn { justify-content: flex-start; }
  .srow { grid-template-columns: 110px 1fr 30px; }
}

/* ---------- mesa do Igris (blackjack até 7) ---------- */
.bigtable { justify-content: space-between; gap: 10px; padding: 16px 14px 44px; border-radius: 26px 26px 120px 120px / 26px 26px 70px 70px; }
.dealer-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.igris { font-size: clamp(30px, 4vw, 44px); filter: drop-shadow(0 0 14px rgba(255, 59, 92, 0.7)); }
.seats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; width: 100%; }
.seat {
  min-height: 132px; border-radius: 14px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(4, 21, 16, 0.75); border: 1px solid rgba(46, 230, 166, 0.3); text-align: center; transition: box-shadow 0.2s, border-color 0.2s;
}
.seat.empty { border-style: dashed; opacity: 0.5; justify-content: center; }
.seat.me { border-color: var(--line); box-shadow: 0 0 14px var(--glow); }
.seat.turn { border-color: var(--gold); box-shadow: 0 0 20px rgba(255, 204, 77, 0.55); animation: pulse-gold 0.9s ease-in-out infinite alternate; }
.seat.r-win, .seat.r-gold { border-color: var(--gem); background: rgba(46, 230, 166, 0.12); }
.seat.r-lose { opacity: 0.7; border-color: rgba(255, 59, 92, 0.5); }
.seat .sname { font-weight: 800; font-size: 0.8em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .scards { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; min-height: 46px; }
.seat .sinfo { font-size: 0.78em; color: #b9f5dc; }
.seat .sstat, .seat .sres { font-size: 0.72em; font-weight: 800; padding: 2px 6px; border-radius: 999px; background: rgba(5, 10, 24, 0.6); }
.seat .sres.win { color: #8ff5d0; }
.seat .sres.gold { color: var(--gold); }
.seat .sres.lose { color: #ff9aac; }
.seat .sres.push { color: #d1d5db; }
.card.sm { width: 30px; border-radius: 5px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); }
.card.sm span { font-size: 13px; }
.card.sm small { font-size: 11px; }
.card.sm.back::after { font-size: 12px; }
.bigtable .tbhist { top: auto; bottom: 10px; justify-content: center; }
@media (max-width: 760px) {
  .seats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bigtable { border-radius: 22px; }
}

/* ---------- loja e sombras (v2.6) ---------- */
.offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.offer { padding: 14px; border-radius: 14px; background: rgba(5, 10, 24, 0.6); border: 1px solid rgba(255, 204, 77, 0.45); display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.offer.soldout { opacity: 0.5; border-color: rgba(127, 147, 191, 0.35); }
.offer .oe { font-size: 40px; }
.offer .oprice { font-size: 1.2em; font-weight: 900; color: var(--gold); }
.shadow-card .mini { margin-top: 4px; }
.shadow-card.skinned { border-color: var(--gold); box-shadow: 0 0 16px rgba(255, 204, 77, 0.3); }
.pips i.on.evo { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.mini-sel { padding: 4px 6px; font-size: 0.8em; margin-top: 4px; }
.gcard .big-emo { font-size: 30px; }

/* ---------- UR (acima do SSR) ---------- */
.gcols.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hcard.r-UR { border-color: rgba(255, 45, 85, 0.75); background: linear-gradient(180deg, rgba(255, 45, 85, 0.15), rgba(5, 10, 24, 0.5)); }
.hcard.r-UR:not(.unknown) { box-shadow: 0 0 16px rgba(255, 45, 85, 0.35); }
.gcard.r-UR { border-color: #ff2d55; box-shadow: 0 0 30px rgba(255, 45, 85, 0.75); background: linear-gradient(180deg, #5a0717, #0b1838); }
.gc-pull.light-red { border-color: #ff2d55; box-shadow: 0 0 70px rgba(255, 45, 85, 0.6); background: radial-gradient(circle, rgba(255, 45, 85, 0.5), rgba(5, 10, 24, 0.95) 70%); }
.ur-tag { color: #ff8099; font-weight: 900; letter-spacing: 0.1em; }
.urbar i { background: linear-gradient(90deg, #7c3aed, #ff2d55); }
@media (max-width: 900px) { .gcols.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===================== PORTÃO VERMELHO ===================== */
@font-face{font-family:"Chakra Petch";font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/ChakraPetch-700i.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ChakraPetch-400.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ChakraPetch-600.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ChakraPetch-700.woff2) format("woff2")}
@font-face{font-family:"IM Fell English";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/IMFellEnglish-400i.woff2) format("woff2")}
@font-face{font-family:"IM Fell English SC";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/IMFellEnglishSC-400.woff2) format("woff2")}
.pv { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 14px; background: #07060b; color: #e8ebf4;
  --pv-sys: #5cc8ff; --pv-gate: #ff2b40; --pv-amber: #ffb547; --pv-violet: #a07bff; --pv-dim: #8a90a6;
  --pv-ui: "Chakra Petch", "Segoe UI", system-ui, sans-serif; --pv-old: "IM Fell English SC", Georgia, serif; --pv-oldi: "IM Fell English", Georgia, serif;
  font-family: var(--pv-ui); }
.pv button { font: inherit; color: inherit; cursor: pointer; }
.pv-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pv-vig { position: absolute; inset: 0; pointer-events: none; z-index: 2; box-shadow: inset 0 0 16vmin 3vmin rgba(0,0,0,.85); }
.pv-vig.alarm { animation: pvAlarm 1.3s ease-in-out infinite; }
.pv-vig.hit { box-shadow: inset 0 0 22vmin 7vmin rgba(255,20,40,.5) !important; animation: none; }
@keyframes pvAlarm { 0%,100% { box-shadow: inset 0 0 16vmin 3vmin rgba(0,0,0,.85); } 50% { box-shadow: inset 0 0 20vmin 5vmin rgba(150,0,20,.5); } }
.pv-ui { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 10px; padding: 12px; z-index: 3; }
.pv-win { position: relative; background: linear-gradient(180deg, rgba(10,30,60,.78), rgba(5,14,30,.66)); border: 1px solid rgba(92,200,255,.55);
  box-shadow: 0 0 22px rgba(92,200,255,.16), inset 0 0 18px rgba(92,200,255,.07); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 2px; }
.pv-win::before, .pv-win::after { content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid var(--pv-sys); pointer-events: none; }
.pv-win::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.pv-win::after { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }
.pv-eye { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pv-sys); }
.pv-eye2 { margin-top: 10px; }
.pv-top { display: flex; justify-content: space-between; gap: 12px; }
.pv-boss { padding: 12px 16px; width: 100%; max-width: 580px; border-color: rgba(255,43,64,.55); box-shadow: 0 0 26px rgba(255,43,64,.16), inset 0 0 18px rgba(255,43,64,.06);
  background: linear-gradient(180deg, rgba(40,6,12,.78), rgba(14,4,8,.66)); }
.pv-boss::before, .pv-boss::after { border-color: var(--pv-gate); }
.pv-boss .pv-eye { color: #ff7d8a; }
.pv-name { margin: 4px 0 0; font-family: var(--pv-old); font-weight: 400; font-size: clamp(22px, 4vw, 34px); line-height: 1.05; color: #f3ece4; text-shadow: 0 0 18px rgba(255,43,64,.35); text-wrap: balance; }
.pv-quote { margin: 2px 0 16px; font-family: var(--pv-oldi); font-style: italic; font-size: 15px; color: #c9a9ad; }
.pv-hp { position: relative; height: 16px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,43,64,.5); }
.pv-hp-ghost, .pv-hp-fill { position: absolute; inset: 0 auto 0 0; }
.pv-hp-ghost { background: #ffd9dd; opacity: .75; transition: width .9s cubic-bezier(.3,.7,.2,1) .25s; }
.pv-hp-fill { background: linear-gradient(180deg, #ff5466, #c4061c 55%, #7a0412); transition: width .15s; }
.pv-hp-fill::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 23px, rgba(0,0,0,.45) 23px 25px); }
.pv-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #f3ece4; box-shadow: 0 0 6px #fff; }
.pv-mark span { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-family: var(--pv-old); font-size: 11px; color: #f3ece4; }
.pv-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 12px; color: var(--pv-dim); font-variant-numeric: tabular-nums; }
.pv-meta b { color: #e8ebf4; font-weight: 600; }
.pv-meta .ph { color: #ff7d8a; font-weight: 700; letter-spacing: .14em; }
.pv-meta .bell { flex-basis: 100%; color: #ffb3ba; }
.pv-meta .bell b { color: #fff; }
.pv-meta .stk { color: var(--pv-gate); font-weight: 700; }
.pv-mid { position: relative; min-height: 0; }
.pv-feed { position: absolute; left: 0; top: 0; width: 270px; padding: 10px 12px; max-height: calc(100% - 8px); overflow: hidden; }
.pv-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; font-size: 13px; font-variant-numeric: tabular-nums; }
.pv-list:empty { display: none; }
.pv-list li { display: flex; align-items: baseline; gap: 6px; animation: pvIn .35s ease-out; }
.pv-list li b { font-weight: 600; color: #bfe9ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.pv-list li .v { margin-left: auto; }
.pv-list li.c .v { color: #fff; font-weight: 700; text-shadow: 0 0 8px var(--pv-gate); }
.pv-list li.s { color: #ff7d8a; letter-spacing: .04em; }
.pv-list li.me b { color: var(--pv-sys); }
.pv-list li.ch, .pv-list li.held { color: var(--pv-amber); }
.pv-list li.held button { margin-left: auto; background: rgba(255,181,71,.12); border: 1px solid var(--pv-amber); color: var(--pv-amber); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; }
@keyframes pvIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.pv-board { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 12px; font-variant-numeric: tabular-nums; }
.pv-board li { display: flex; gap: 6px; }
.pv-board li span { color: var(--pv-dim); width: 18px; }
.pv-board li b { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-board li i { font-style: normal; }
.pv-board li.me b { color: var(--pv-sys); }
.pv-intent { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: min(440px, 100%); padding: 10px 16px 12px; text-align: center; }
.pv-intent .row { display: flex; justify-content: center; align-items: center; gap: 10px; }
.pv-tipo { font-size: 11px; font-weight: 700; letter-spacing: .16em; padding: 2px 8px; border: 1px solid currentColor; border-radius: 2px; }
.pv-tipo.t-LEVE { color: var(--pv-sys); }
.pv-tipo.t-PESADO { color: var(--pv-gate); }
.pv-tipo.t-CONTROLE { color: var(--pv-amber); }
.pv-tipo.t-LETAL { color: #fff; background: var(--pv-gate); border-color: var(--pv-gate); animation: pvBlink .7s steps(2) infinite; }
.pv-tipo.t-OLHAR { color: #fff; background: #7a0a16; border-color: var(--pv-gate); box-shadow: 0 0 12px rgba(255,43,64,.6); }
.pv-tipo.t-Q { color: #c9a9ad; border-style: dashed; }
@keyframes pvBlink { 50% { opacity: .55; } }
.pv-iname-sm { margin: 6px 0 2px; font-family: var(--pv-old); font-size: 21px; line-height: 1.15; min-height: 1.15em; color: #f3ece4; }
.pv-tip { margin: 0; font-size: 12.5px; color: var(--pv-dim); min-height: 1.4em; }
.pv-dock { position: relative; display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: 10px; }
.pv-player { padding: 10px 14px; display: grid; gap: 6px; }
.pv-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--pv-dim); font-variant-numeric: tabular-nums; }
.pv-row b { color: #e8ebf4; font-weight: 600; }
.pv-me { font-size: 15px; letter-spacing: .04em; }
.pv-lv { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.pv-bar { position: relative; height: 9px; background: rgba(0,0,0,.55); border: 1px solid rgba(92,200,255,.35); }
.pv-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #1f8fd1, var(--pv-sys)); box-shadow: 0 0 10px var(--pv-sys); transition: width .35s; }
.pv-bar.low i { background: linear-gradient(90deg, #9e1020, var(--pv-gate)); box-shadow: 0 0 10px var(--pv-gate); }
.pv-pips { display: flex; gap: 4px; }
.pv-pips span { width: 16px; height: 7px; transform: skewX(-20deg); border: 1px solid rgba(92,200,255,.5); }
.pv-pips span.on { background: var(--pv-sys); box-shadow: 0 0 8px var(--pv-sys); }
.pv-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pv-act { min-height: 72px; padding: 10px 12px; text-align: left; display: grid; align-content: space-between; gap: 4px; transition: transform .12s, border-color .12s, box-shadow .12s; }
.pv-act:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--pv-sys); box-shadow: 0 0 26px rgba(92,200,255,.32), inset 0 0 18px rgba(92,200,255,.12); }
.pv-act:active:not(:disabled) { transform: scale(.98); }
.pv-act:disabled { opacity: .42; cursor: default; }
.pv-act:focus-visible { outline: 2px solid var(--pv-sys); outline-offset: 2px; }
.pv-act .k { font-size: 10px; color: var(--pv-dim); letter-spacing: .1em; }
.pv-act .l { font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.pv-act .c { font-size: 11px; color: var(--pv-dim); }
.pv-act.skill { background: linear-gradient(180deg, rgba(20,40,90,.85), rgba(8,16,40,.7)); }
.pv-act.skill .l { color: #d6f1ff; text-shadow: 0 0 10px var(--pv-sys); }
.pv-ico { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; mix-blend-mode: screen; pointer-events: none; }
.pv-lock { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pv-amber); background: repeating-linear-gradient(-35deg, rgba(255,181,71,0) 0 22px, rgba(255,181,71,.18) 22px 26px); }
.pv-lock span { background: rgba(10,6,2,.88); padding: 6px 12px; border: 1px solid var(--pv-amber); }
.pv-fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.pv-num { position: absolute; font: italic 700 34px/1 var(--pv-ui); color: #fff; -webkit-text-stroke: 6px #0a0407; paint-order: stroke fill; white-space: nowrap;
  animation: pvRise 1.1s cubic-bezier(.2,.8,.2,1) forwards; --r: 0deg; }
.pv-num.crit { font-size: 64px; color: #fff6f6; text-shadow: 0 0 24px var(--pv-gate), 0 0 4px #fff; animation-duration: 1.4s; }
.pv-num.crit small { display: block; font-size: 14px; letter-spacing: .3em; text-align: center; -webkit-text-stroke: 3px #0a0407; color: #ff8d98; margin-bottom: 2px; }
.pv-num.hurt { color: var(--pv-gate); font-size: 30px; }
.pv-num.tag { font-size: 18px; font-style: normal; letter-spacing: .2em; color: var(--pv-sys); -webkit-text-stroke: 4px #02060c; }
.pv-num.tag.warn { color: var(--pv-amber); }
@keyframes pvRise { 0% { opacity: 0; transform: translate(-50%,-30%) scale(1.7) rotate(var(--r)); } 12% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(var(--r)); }
  70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-150%) scale(.92) rotate(var(--r)); } }
.pv-ring { position: absolute; width: 30px; height: 30px; border: 3px solid rgba(255,60,80,.85); border-radius: 50%; transform: translate(-50%,-50%); animation: pvRing 1.6s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes pvRing { to { width: 180vmax; height: 180vmax; opacity: 0; border-width: 1px; } }
.pv.pv-shake .pv-ui, .pv.pv-shake .pv-stage { animation: pvShake .38s linear; }
.pv.pv-shake.pv-big .pv-ui, .pv.pv-shake.pv-big .pv-stage { animation: pvShakeBig .55s linear; }
@keyframes pvShake { 0%,100% { transform: none; } 20% { transform: translate(-7px,4px); } 40% { transform: translate(6px,-5px); } 60% { transform: translate(-4px,3px); } 80% { transform: translate(3px,-2px); } }
@keyframes pvShakeBig { 0%,100% { transform: none; } 15% { transform: translate(-14px,8px); } 30% { transform: translate(12px,-10px); } 45% { transform: translate(-9px,6px); } 60% { transform: translate(7px,-4px); } 80% { transform: translate(-3px,2px); } }
.pv.pv-dead .pv-stage, .pv.pv-dead .pv-ui { filter: grayscale(1) brightness(.5); transition: filter 1.2s; }
.pv.pv-glitch .pv-stage { animation: pvGlitch .38s steps(5) both; }
.pv.pv-glitch .pv-name { text-shadow: -3px 0 #00e5ff, 3px 0 #ff2bd6; }
.pv.pv-glitch .pv-actions { filter: hue-rotate(80deg); }
@keyframes pvGlitch { 0% { transform: none; } 20% { transform: translate(-8px,2px) skewX(5deg); } 40% { transform: translate(6px,-3px); } 60% { transform: translate(-4px,1px) skewX(-4deg); } 80% { transform: translate(3px,0); } 100% { transform: none; } }
/* cenas */
.pv-ov { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px 16px; text-align: center; background: rgba(2,1,4,.94); transition: opacity .5s; overflow-y: auto; }
.pv-ov.clear { background: rgba(2,1,4,.3); }
.pv-ov.out { opacity: 0; }
.pv-inner { display: grid; justify-items: center; gap: 16px; max-width: 560px; width: 100%; }
.pv-rift { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%) scaleY(0); background: linear-gradient(180deg, transparent, #fff 30%, #fff 70%, transparent);
  box-shadow: 0 0 18px 6px var(--pv-gate), 0 0 70px 20px rgba(255,43,64,.5); animation: pvRift 1.1s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes pvRift { to { transform: translateX(-50%) scaleY(1); } }
.pv-alert { padding: 14px 18px; min-width: min(420px, 100%); text-align: left; opacity: 0; animation: pvFade .4s .9s forwards; }
.pv-typed { margin: 6px 0 0; font-size: 16px; min-height: 1.4em; }
.pv-typed::after { content: "▌"; color: var(--pv-sys); animation: pvBlink .8s steps(2) infinite; }
.pv-iname { margin: 0; font-family: var(--pv-old); font-weight: 400; font-size: clamp(32px, 8vw, 62px); line-height: 1; color: #f3ece4; text-shadow: 0 0 30px rgba(255,43,64,.6); text-wrap: balance; }
.pv-iname span { display: inline-block; opacity: 0; animation: pvLetter .5s forwards; }
@keyframes pvLetter { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.pv-iq { margin: 0; font-family: var(--pv-oldi); font-style: italic; font-size: 19px; color: #c9a9ad; opacity: 0; animation: pvFade .8s forwards; }
@keyframes pvFade { to { opacity: 1; } }
.pv-skip { position: absolute; right: 16px; bottom: 16px; }
.pv-phase-title { margin: 0; font-family: var(--pv-old); font-weight: 400; font-size: clamp(56px, 14vw, 120px); line-height: 1; color: #f3ece4; text-shadow: 0 0 40px var(--pv-gate); animation: pvSlam .7s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pvSlam { from { opacity: 0; transform: scale(2.2); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.pv-arise { margin: 0; font-weight: 700; font-style: italic; font-size: clamp(44px, 12vw, 108px); letter-spacing: .06em; line-height: 1; color: #efe6ff; -webkit-text-stroke: 2px #1b0b33;
  text-shadow: 0 0 30px var(--pv-violet), 0 0 80px #5b2bd6; }
.pv-arise span { display: inline-block; opacity: 0; animation: pvAriseL .55s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes pvAriseL { from { opacity: 0; transform: translateY(30px) scale(1.6); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.pv-arise.tremble { animation: pvTremble .09s linear infinite; }
@keyframes pvTremble { 0% { transform: translate(1px,0); } 50% { transform: translate(-1px,1px); } 100% { transform: translate(0,-1px); } }
.pv-shadow-win, .pv-drop-win, .pv-gold-win, .pv-revive { padding: 16px 18px; text-align: left; width: 100%; }
.pv-shadow-win { border-color: rgba(160,123,255,.6); box-shadow: 0 0 30px rgba(160,123,255,.25); background: linear-gradient(180deg, rgba(28,14,60,.85), rgba(10,6,24,.75)); animation: pvFade .5s both; }
.pv-shadow-win::before, .pv-shadow-win::after { border-color: var(--pv-violet); }
.pv-shadow-win .pv-eye { color: #c9b3ff; }
.pv-drop-win { border-color: rgba(255,43,64,.55); }
.pv-drop-win::before, .pv-drop-win::after { border-color: var(--pv-gate); }
.pv-drop-win .pv-eye { color: #ff7d8a; }
.pv-gold-win { border-color: rgba(255,204,77,.6); }
.pv-gold-win::before, .pv-gold-win::after { border-color: #ffcc4d; }
.pv-gold-win .pv-eye { color: #ffcc4d; }
.pv-ov h3 { margin: 6px 0 4px; font-family: var(--pv-old); font-weight: 400; font-size: 24px; }
.pv-ov p { margin: 4px 0; font-size: 14px; line-height: 1.5; color: #d4cfe0; }
.pv-sh-row { display: flex; gap: 12px; align-items: center; }
.pv-sh-icon { width: 64px; height: 64px; flex-shrink: 0; mix-blend-mode: screen; border: 1px solid rgba(160,123,255,.35); }
.pv-loot { width: min(240px, 55vw); filter: drop-shadow(0 0 30px rgba(255,43,64,.55)); animation: pvLoot 1s cubic-bezier(.2,1.3,.4,1) both, pvFloat 3s ease-in-out 1s infinite; }
@keyframes pvLoot { from { opacity: 0; transform: scale(.3) rotate(-200deg); } to { opacity: 1; transform: none; } }
@keyframes pvFloat { 50% { transform: translateY(-8px); } }
.pv-broken { width: min(520px, 100%); border: 1px solid rgba(255,43,64,.4); }
.pv-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pv-btn { padding: 10px 16px; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; border-radius: 2px; background: rgba(92,200,255,.12); border: 1px solid var(--pv-sys); }
.pv-btn:hover:not(:disabled) { background: rgba(92,200,255,.25); }
.pv-btn:disabled { opacity: .4; cursor: default; }
.pv-btn.v { border-color: var(--pv-violet); background: rgba(160,123,255,.15); }
.pv-btn.q { border-color: rgba(255,255,255,.25); background: transparent; color: var(--pv-dim); }
.pv-btn.main { animation: pvPulse 1.6s ease-in-out infinite; }
@keyframes pvPulse { 50% { box-shadow: 0 0 26px rgba(92,200,255,.55); } }
.pv-ov .pv-death-q { margin: 0; font-family: var(--pv-oldi); font-style: italic; font-size: clamp(28px, 6vw, 44px); color: #e9e0d6; line-height: 1.15; }
.pv-ov .pv-death-sub { margin: 0; color: var(--pv-dim); }
/* fechado */
.pv-closed { position: absolute; inset: 0; z-index: 3; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(180deg, rgba(7,6,11,.55), rgba(7,6,11,.92)); }
.pv-closed > * { width: 100%; max-width: 900px; margin: 0 auto; flex-shrink: 0; }
.pv-hero { display: flex; gap: 16px; align-items: center; padding: 16px; border: 1px solid rgba(255,43,64,.45); border-radius: 16px; background: rgba(30,4,10,.7); }
.pv-hero img { width: 96px; height: 96px; flex-shrink: 0; mix-blend-mode: screen; }
.pv-hero h2 { margin: 4px 0; font-family: var(--pv-old); font-weight: 400; font-size: 28px; }
.pv-hero p { margin: 4px 0; }
.pv-trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.pv-trophy { display: grid; justify-items: center; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); text-align: center; font-size: 12px; }
.pv-trophy img { width: 72px; height: 72px; object-fit: contain; filter: brightness(0) opacity(.35); }
.pv-trophy.own { border-color: rgba(255,43,64,.5); background: rgba(255,43,64,.06); }
.pv-trophy.own img { filter: drop-shadow(0 0 12px rgba(255,43,64,.5)); }
.pv-shrow { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.pv-shrow .em { font-size: 24px; width: 32px; text-align: center; }
.pv-shrow div { flex: 1; display: grid; }
.pv-shrow small { color: var(--pv-dim); }
.pv-shrow.locked { opacity: .5; }
.pv-shrow.eq b { color: var(--pv-violet); }
.pv-top5 { margin: 8px 0; padding-left: 20px; }
.pv-top5 li span { color: var(--pv-dim); }
.pv-top5 li.me b { color: var(--pv-sys); }
@media (max-width: 760px) {
  .pv-feed { width: auto; right: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
  .pv-feed::before, .pv-feed::after, .pv-feed .pv-eye, .pv-board { display: none; }
  .pv-list { gap: 2px; font-size: 12px; }
  #pvFeed li:nth-child(n+3) { display: none; }
  .pv-list li { background: rgba(0,0,0,.45); padding: 2px 6px; max-width: 320px; }
  .pv-dock { grid-template-columns: minmax(0, 1fr); }
  .pv-quote { font-size: 13px; }
}
@media (max-width: 520px) {
  .pv-ui { padding: 8px; gap: 8px; }
  .pv-boss { padding: 10px 12px; }
  .pv-act { min-height: 58px; padding: 8px; }
  .pv-act .c { display: none; }
  .pv-act .l { font-size: 12px; letter-spacing: .06em; }
  .pv-ico { width: 24px; height: 24px; }
  .pv-iname-sm { font-size: 17px; }
  .pv-num { font-size: 26px; }
  .pv-num.crit { font-size: 46px; }
  .pv-hero { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pv.pv-shake .pv-ui, .pv.pv-shake .pv-stage, .pv-vig.alarm, .pv-arise.tremble, .pv-tipo.t-LETAL, .pv.pv-glitch .pv-stage { animation: none; }
}

/* ---------- Plinko da Gate ---------- */
.pk-stage { position: relative; min-height: 0; border-radius: 18px; overflow: hidden; padding: 14px; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid rgba(47, 123, 255, 0.45); background: radial-gradient(ellipse at 50% 8%, #16336f, #050a18 70%); box-shadow: 0 0 30px rgba(47, 123, 255, 0.2) inset; }
.pk-canvas { flex: 1; width: 100%; min-height: 300px; display: block; }
.pk-hist { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; min-height: 22px; }
.pk-hist span { font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 6px; color: #0b1020; }
.side:disabled { opacity: .45; cursor: default; }
@media (max-width: 760px) { .pk-stage { min-height: 52vh; } }

/* ---------- Castelo do Demônio ---------- */
.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 10px; }
.cs-stats div { display: flex; flex-direction: column; align-items: center; padding: 8px; border-radius: 10px; background: rgba(11, 24, 56, 0.7); border: 1px solid rgba(47, 123, 255, 0.25); }
.cs-stats small { color: var(--muted); font-size: 0.75em; }
.cs-stats b { font-size: 1.35em; font-variant-numeric: tabular-nums; }
.cs-ok { color: #2ee6a6; }
.cs-bad { color: #ff5c7a; }
.cs-end { text-align: center; font-size: 1.1em; }
.cs-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-floor { font-weight: 800; letter-spacing: 0.18em; color: var(--gold); }
.cs-enemy { font-size: 1.35em; font-weight: 800; margin: 6px 0; }
.cs-bar { position: relative; height: 22px; border-radius: 8px; background: rgba(11, 24, 56, 0.9); border: 1px solid rgba(47, 123, 255, 0.3); overflow: hidden; }
.cs-bar i { position: absolute; inset: 0 auto 0 0; transition: width 0.35s ease; }
.cs-bar.enemy i { background: linear-gradient(90deg, #a3122e, #ff3b5c); }
.cs-bar.me i { background: linear-gradient(90deg, #12795a, #2ee6a6); }
.cs-bar span { position: relative; display: block; text-align: center; font-size: 0.8em; line-height: 22px; font-variant-numeric: tabular-nums; }
.cs-intent { display: flex; flex-direction: column; align-items: center; margin: 10px auto 4px; padding: 8px 14px; border-radius: 12px; max-width: 280px; border: 1px solid var(--line); background: rgba(47, 123, 255, 0.12); }
.cs-intent small { color: var(--muted); letter-spacing: 0.2em; font-size: 0.7em; }
.cs-intent b { font-size: 1.15em; }
.cs-intent span { font-size: 0.75em; font-weight: 800; letter-spacing: 0.15em; }
.cs-intent.t-pesado, .cs-intent.t-letal { border-color: #ff3b5c; background: rgba(255, 59, 92, 0.12); }
.cs-intent.t-letal b { color: #ff5c7a; }
.cs-intent.t-encanto, .cs-intent.t-fogo, .cs-intent.t-postura, .cs-intent.t-barreira { border-color: var(--gold); background: rgba(255, 204, 77, 0.1); }
.cs-me { display: flex; flex-direction: column; gap: 6px; }
.cs-energy { display: flex; align-items: center; gap: 8px; }
.cs-energy small { color: var(--muted); }
.pips { display: flex; gap: 4px; }
.pips i { width: 18px; height: 8px; border-radius: 4px; background: rgba(47, 123, 255, 0.2); }
.pips i.on { background: var(--gold); box-shadow: 0 0 8px rgba(255, 204, 77, 0.6); }
.cs-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
@media (max-width: 520px) { .cs-acts { grid-template-columns: repeat(2, 1fr); } }
.cs-act { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 12px; border: 1px solid var(--line); background: #10306f; color: inherit; font: inherit; cursor: pointer; }
.cs-act:not(:disabled):hover { box-shadow: 0 0 16px rgba(47, 123, 255, 0.6); transform: translateY(-1px); }
.cs-act:disabled { opacity: 0.4; cursor: not-allowed; }
.cs-act small { color: var(--muted); font-size: 0.72em; }
.cs-act.a-habilidade { border-color: var(--gold); background: #3a2d0a; }
.cs-log { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.85em; min-height: 40px; }
.cs-log li { padding: 2px 6px; border-radius: 6px; color: var(--muted); }
.cs-log li.crit { color: var(--gold); }
.cs-log li.hurt { color: #ff8197; }
.cs-log li.warn { color: #ffb44d; font-weight: 700; }
.cs-log li.win { color: #2ee6a6; background: rgba(46, 230, 166, 0.08); }

/* ---------- Guilda ---------- */
.gd-emb { font-size: 1.3em; }
.gd-rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.gd-room { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: rgba(11, 24, 56, 0.7); border: 1px solid rgba(47, 123, 255, 0.25); min-width: 0; }
.gd-room-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.gd-room .mini { align-self: flex-start; }
.gd-bar.gold i, .gd-room .gd-bar i { background: linear-gradient(90deg, #8a6508, #ffcc4d); }
.gd-emblems { display: flex; flex-wrap: wrap; gap: 6px; }
.plist li.gd-frame { outline: 1px solid var(--gold); background: rgba(255, 204, 77, 0.1); }

/* ---------- Cashback (aviso no topo) ---------- */
.cb-bar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--gold); background: rgba(255, 204, 77, 0.12); color: #fff3cc; font-size: 0.92em; }

/* ---------- Leilão ---------- */
.au-name { font-size: 1.2em; font-weight: 800; }
.au-top { display: flex; flex-direction: column; align-items: center; padding: 10px; border-radius: 12px; background: rgba(11, 24, 56, 0.7); border: 1px solid rgba(47, 123, 255, 0.3); }
.au-top small { color: var(--muted); font-size: 0.75em; letter-spacing: 0.12em; text-transform: uppercase; }
.au-top > b { font-size: 1.6em; font-variant-numeric: tabular-nums; }
.au-top.mine { border-color: var(--gold); background: rgba(255, 204, 77, 0.1); }
.au-bid { display: flex; gap: 8px; flex-wrap: wrap; }
.au-bid .input { flex: 1 1 140px; min-width: 0; }
.au-bid .cta { flex: 0 0 auto; margin-top: 0; }