/* ==========================================================================
   Jogo da Família — visual "mesa real de fantasia": azul-noite, dourado e vinho.
   ========================================================================== */
:root {
  --bg0: #070a16;
  --bg1: #0e1530;
  --bg2: #16204a;
  --gold: #f0cc75;
  --gold2: #c8943a;
  --gold3: #8a5d1c;
  --wine: #7a1830;
  --wine2: #4a0d1d;
  --blue: #2a57b8;
  --green: #3fbf7f;
  --red: #ff4d5e;
  --text: #f6eedd;
  --muted: #b9ae95;
  --glass: rgba(18, 26, 58, 0.62);
  --line: rgba(240, 204, 117, 0.28);
  --cw: 96px;
  --ch: calc(var(--cw) * 1.4);
  --hw: calc(var(--cw) * 1.22);
  --gap: 8px;
  --r: 12px;
  --font-title: 'Cinzel', 'Georgia', serif;
  --font-deco: 'Cinzel Decorative', 'Cinzel', serif;
  --font: 'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg0);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(1200px 700px at 50% 45%, rgba(42, 87, 184, 0.28), transparent 60%),
    radial-gradient(900px 500px at 15% 110%, rgba(122, 24, 48, 0.35), transparent 60%),
    radial-gradient(900px 500px at 90% -10%, rgba(200, 148, 58, 0.18), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  z-index: -2;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Ctext x='45' y='58' font-size='34' text-anchor='middle' fill='%23f0cc75' opacity='0.05'%3E%E2%9A%9C%3C/text%3E%3C/svg%3E");
  z-index: -1;
  pointer-events: none;
}
#sparks { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
button { font-family: inherit; color: inherit; cursor: pointer; }
input { font-family: inherit; }
.hidden { display: none !important; }
.row { display: flex; align-items: center; }
.gap { gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------- telas */
#app { position: fixed; inset: 0; }
.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.screen.active { display: flex; animation: screenIn 0.45s ease both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(12px) scale(0.99); } }
.screen-head {
  width: 100%; max-width: 1100px;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px;
}
.screen-head h2 {
  font-family: var(--font-title); font-weight: 800; font-size: clamp(20px, 3.4vw, 32px);
  margin: 0; letter-spacing: 1px;
  background: linear-gradient(180deg, #fff3cf, var(--gold) 55%, var(--gold2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------------------------------------------------------------- botões */
.btn {
  position: relative;
  border: 1px solid rgba(240, 204, 117, 0.45);
  background: linear-gradient(180deg, rgba(40, 56, 110, 0.95), rgba(18, 26, 60, 0.95));
  color: var(--text);
  padding: 10px 18px;
  border-radius: 12px;
  font-family: var(--font-title); font-weight: 700; font-size: 15px; letter-spacing: 0.4px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.2s;
  overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-20deg); transition: left 0.5s;
}
.btn:hover::after { left: 130%; }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.btn:disabled { opacity: 0.45; filter: grayscale(0.6); cursor: not-allowed; }
.btn.gold {
  background: linear-gradient(180deg, #ffe39a, var(--gold) 40%, var(--gold2));
  color: #2b1a05; border-color: #fff0c0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 0 var(--gold3), 0 0 24px rgba(240, 204, 117, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.btn.wine { background: linear-gradient(180deg, #a82745, var(--wine) 60%, var(--wine2)); border-color: #ff9aae66; }
.btn.green { background: linear-gradient(180deg, #54d99a, #26995f); color: #04210f; border-color: #b6ffd9; }
.btn.small { padding: 7px 12px; font-size: 13px; }
.btn.back { padding: 8px 14px; font-size: 14px; }
.btn.big {
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto;
  text-align: left; align-items: center; column-gap: 12px; padding: 14px 18px;
}
.btn.big i { grid-row: 1 / 3; font-style: normal; font-size: 30px; text-align: center; }
.btn.big b { font-size: 17px; }
.btn.big small { font-family: var(--font); font-weight: 600; font-size: 12.5px; opacity: 0.8; }
.link { background: none; border: 0; color: var(--muted); font-weight: 700; font-size: 14px; padding: 6px 8px; }
.link:hover { color: var(--gold); }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(14, 21, 48, 0.85);
  font-size: 18px; display: grid; place-items: center; flex: none;
}
.icon-btn:hover { border-color: var(--gold); }

/* ---------------------------------------------------------------- menu */
#menu { justify-content: center; gap: 10px; }
.hero { text-align: center; position: relative; margin-bottom: 4px; }
.fan { position: relative; height: clamp(150px, 26vh, 250px); width: min(640px, 92vw); margin: 0 auto; }
.fan .fc {
  position: absolute; left: 50%; bottom: 0;
  width: clamp(92px, 15vh, 150px); aspect-ratio: 530 / 742;
  border-radius: 8px; background-size: cover;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 230, 160, 0.4);
  transform-origin: 50% 120%;
  animation: fanIn 0.9s cubic-bezier(.2, .9, .3, 1.2) both, float 6s ease-in-out infinite;
}
@keyframes fanIn { from { transform: translateX(-50%) rotate(0deg) translateY(40px); opacity: 0; } }
@keyframes float { 50% { margin-bottom: 8px; } }
.logo {
  font-family: var(--font-deco); font-weight: 900; margin: 6px 0 0; line-height: 0.95;
  font-size: clamp(44px, 9vw, 92px);
  background: linear-gradient(180deg, #fff8e0 10%, var(--gold) 50%, var(--gold2) 80%, #7a4f15);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 30px rgba(240, 204, 117, 0.35));
}
.logo small { display: block; font-size: 0.36em; letter-spacing: 0.3em; font-family: var(--font-title); }
.tagline { margin: 6px 0 0; color: var(--muted); font-style: italic; letter-spacing: 0.5px; }
.menu-panel { width: min(640px, 100%); padding: 18px; }
.who { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.name-field { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.name-field input, .code-input, #col-search {
  background: rgba(5, 8, 20, 0.6); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); padding: 11px 14px; font-size: 17px; font-weight: 700; outline: none;
}
.name-field input:focus, .code-input:focus, #col-search:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240, 204, 117, 0.15); }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.menu-foot { display: flex; justify-content: space-between; margin-top: 10px; }
@media (max-width: 560px) { .menu-grid { grid-template-columns: 1fr; } .fan { height: 130px; } }

.avatar {
  --img: none;
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--img) 50% 22% / 190% auto no-repeat, #223;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.4), 0 0 18px rgba(240, 204, 117, 0.3);
  padding: 0;
}
.avatar.big { width: 64px; height: 64px; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 12px; }
.avatar-grid button { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; font-weight: 700; font-size: 13px; }
.avatar-grid .avatar { width: 64px; height: 64px; transition: transform 0.15s; }
.avatar-grid button:hover .avatar { transform: scale(1.1); }
.avatar-grid button.on .avatar { box-shadow: 0 0 0 3px var(--green), 0 0 18px var(--green); }

/* ---------------------------------------------------------------- dificuldade */
.diff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; width: min(1000px, 100%); }
.diff { padding: 0 0 18px; text-align: center; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.diff:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--gold); }
.diff-art { height: 190px; background: var(--img) 50% 18% / cover; mask-image: linear-gradient(180deg, #000 55%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); }
.diff h3 { font-family: var(--font-deco); font-size: 30px; margin: -26px 0 6px; color: var(--gold); text-shadow: 0 3px 10px #000; }
.diff p { color: var(--muted); margin: 0 18px 10px; font-size: 14.5px; line-height: 1.45; }
.stars { color: var(--gold); font-size: 22px; letter-spacing: 3px; }
.toggle { margin-top: 18px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; font-weight: 700; cursor: pointer; width: min(820px, 100%); }
.toggle input { display: none; }
.toggle span { width: 46px; height: 26px; border-radius: 20px; background: #333a55; position: relative; flex: none; transition: background 0.2s; }
.toggle span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left 0.2s; }
.toggle input:checked + span { background: var(--green); }
.toggle input:checked + span::after { left: 23px; }

/* ---------------------------------------------------------------- online */
.online-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; width: min(860px, 100%); }
.online-card { padding: 22px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; }
.online-card h3 { font-family: var(--font-title); margin: 0; font-size: 22px; color: var(--gold); }
.online-card p { margin: 0; color: var(--muted); }
.code-input { text-align: center; font-family: var(--font-title); font-size: 34px; letter-spacing: 12px; text-transform: uppercase; }
.room-code {
  font-family: var(--font-title); font-weight: 800; font-size: 54px; letter-spacing: 14px;
  color: var(--gold); text-shadow: 0 0 24px rgba(240, 204, 117, 0.5);
  background: rgba(0, 0, 0, 0.35); border: 1px dashed var(--gold2); border-radius: 14px; padding: 10px 0 10px 14px;
}
.host-box { display: flex; flex-direction: column; gap: 12px; }
.waiting { color: var(--muted); }
.dots::after { content: '●●●'; letter-spacing: 3px; animation: dots 1.2s infinite; color: var(--gold); }
@keyframes dots { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }
.net-status { min-height: 20px; font-weight: 700; }
.online-note { color: var(--muted); font-size: 13px; max-width: 700px; text-align: center; margin-top: 18px; }

/* ---------------------------------------------------------------- tutorial */
#tutorial { padding-bottom: 90px; }
.tut-progress { margin-left: auto; display: flex; gap: 6px; }
.tut-progress i { width: 10px; height: 10px; border-radius: 50%; background: #2c3560; transition: all 0.3s; }
.tut-progress i.on { background: var(--gold); box-shadow: 0 0 10px var(--gold); width: 22px; border-radius: 6px; }
.tut-stage { width: min(1100px, 100%); flex: 1; display: flex; }
.tut-slide { display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; align-items: center; width: 100%; animation: slideIn 0.45s ease both; padding: 8px 0; }
@keyframes slideIn { from { opacity: 0; transform: translateX(30px); } }
.tut-slide h3 { font-family: var(--font-deco); color: var(--gold); font-size: clamp(26px, 4vw, 40px); margin: 0 0 10px; line-height: 1.1; }
.tut-slide p, .tut-slide li { font-size: clamp(15px, 1.7vw, 18px); line-height: 1.55; color: #e9e0cc; }
.tut-slide ul { padding-left: 20px; margin: 8px 0; }
.tut-slide li { margin: 4px 0; }
.tut-slide b { color: var(--gold); }
.tut-visual { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 260px; position: relative; }
.tut-visual .tcard { width: clamp(110px, 16vw, 190px); aspect-ratio: 530/742; border-radius: 10px; background-size: cover; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); transition: transform 0.3s; }
.tut-visual .tcard:hover { transform: translateY(-8px) rotate(-1deg); }
.tut-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 14px; padding: 14px 16px max(14px, env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(7, 10, 22, 0.95), transparent); }
@media (max-width: 760px) { .tut-slide { grid-template-columns: 1fr; } .tut-visual { order: -1; min-height: 0; } }
.anatomy { position: relative; width: clamp(200px, 30vw, 300px); aspect-ratio: 530/742; border-radius: 12px; background-size: cover; box-shadow: 0 16px 50px #000; }
.anatomy .tag {
  position: absolute; background: var(--gold); color: #2b1a05; font-weight: 800; font-size: 12px;
  padding: 3px 8px; border-radius: 20px; white-space: nowrap; box-shadow: 0 3px 10px #000;
  animation: pop 0.4s ease both;
}
.anatomy .tag::before { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(240, 204, 117, 0.35); }
.anatomy .tag.l::before { right: -16px; top: 5px; }
.anatomy .tag.r::before { left: -16px; top: 5px; }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } }
.mini-board { display: grid; gap: 6px; width: min(420px, 100%); }
.mini-row { display: flex; gap: 6px; justify-content: center; align-items: center; }
.mini-slot { width: 58px; height: 80px; border-radius: 8px; border: 2px dashed rgba(240, 204, 117, 0.5); display: grid; place-items: center; font-size: 22px; background: rgba(0, 0, 0, 0.25); }
.mini-slot.atk { border-color: #ff7b7b; } .mini-slot.def { border-color: #7bb4ff; } .mini-slot.apo { border-color: #8dffb8; } .mini-slot.sup { border-color: #caa2ff; }
.mini-label { font-size: 12px; font-weight: 800; width: 76px; text-align: right; color: var(--muted); }
.flow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.flow .step { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-align: center; min-width: 110px; }
.flow .step b { display: block; font-family: var(--font-title); font-size: 16px; }
.flow .step span { font-size: 26px; }
.flow .arrow { font-size: 22px; color: var(--gold); }
.duel { display: flex; flex-direction: column; gap: 10px; width: min(460px, 100%); }
.duel-row { display: flex; align-items: center; gap: 10px; background: rgba(0, 0, 0, 0.3); border-radius: 12px; padding: 8px 12px; border: 1px solid var(--line); }
.duel-row .n { font-family: var(--font-title); font-weight: 800; font-size: 20px; min-width: 110px; text-align: center; }
.duel-row .r { font-size: 14.5px; }

/* ---------------------------------------------------------------- coleção */
.col-tools { display: flex; gap: 12px; flex-wrap: wrap; width: min(1200px, 100%); align-items: center; }
.tabs { display: flex; gap: 6px; background: rgba(0, 0, 0, 0.35); padding: 5px; border-radius: 14px; border: 1px solid var(--line); }
.tab { background: none; border: 0; padding: 8px 14px; border-radius: 10px; font-weight: 800; color: var(--muted); }
.tab b { font-size: 12px; opacity: 0.7; }
.tab.active { background: linear-gradient(180deg, #ffe39a, var(--gold2)); color: #2b1a05; }
#col-search { flex: 1; min-width: 200px; font-size: 15px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; width: min(1200px, 100%); margin: 12px 0; }
.chip { border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); border-radius: 20px; padding: 5px 12px; font-weight: 700; font-size: 13px; color: var(--muted); }
.chip.on { border-color: var(--gold); color: var(--gold); background: rgba(240, 204, 117, 0.12); }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; width: min(1200px, 100%); padding-bottom: 30px; }
.col-card { aspect-ratio: 530/742; border-radius: 10px; background-size: cover; background-color: #111a33; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); cursor: zoom-in; transition: transform 0.18s, box-shadow 0.18s; animation: pop 0.35s ease both; border: 0; padding: 0; }
.col-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--gold); }
@media (max-width: 560px) { .col-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } }

/* ==========================================================================
   JOGO
   ========================================================================== */
#game { padding: 0; flex-direction: row; overflow: hidden; }
.g-side {
  width: 270px; flex: none; height: 100%;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 10px 12px 12px;
  background: linear-gradient(90deg, rgba(5, 8, 20, 0.55), rgba(5, 8, 20, 0.1));
  border-right: 1px solid rgba(240, 204, 117, 0.12);
}
.g-board {
  flex: 1; height: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 10px 0;
  position: relative;
}
.g-corner { position: absolute; top: 10px; right: 12px; display: flex; gap: 8px; z-index: 20; }
.m-top, .m-bottom { display: none; }

/* placas dos jogadores */
.plate {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center;
  padding: 10px 12px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(30, 42, 88, 0.9), rgba(12, 17, 40, 0.9));
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.plate.turn { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 28px rgba(240, 204, 117, 0.35); }
.plate .avatar { grid-row: 1 / 4; width: 58px; height: 58px; }
.plate .pname { font-family: var(--font-title); font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate .pname em { font-style: normal; font-family: var(--font); font-size: 11px; color: var(--muted); margin-left: 4px; }
.hearts { display: flex; gap: 2px; font-size: 18px; line-height: 1; }
.hearts i { font-style: normal; filter: drop-shadow(0 0 4px rgba(255, 60, 80, 0.6)); transition: transform 0.3s; }
.hearts i.off { filter: grayscale(1) brightness(0.45); opacity: 0.55; }
.energy { display: flex; gap: 3px; align-items: center; }
.energy i { width: 13px; height: 17px; clip-path: polygon(55% 0, 0 58%, 42% 58%, 30% 100%, 100% 38%, 58% 38%); background: #2c3355; }
.energy i.on { background: linear-gradient(180deg, #fff3a6, #ffc93a); filter: drop-shadow(0 0 3px #ffcf40); }
.energy b { font-family: var(--font-title); font-size: 14px; margin-left: 4px; color: #ffd84a; }
.plate .meta { grid-column: 1 / 3; display: flex; gap: 10px; font-size: 12px; color: var(--muted); font-weight: 700; margin-top: 2px; }
.plate.target { cursor: crosshair; animation: targetPulse 0.9s infinite; border-color: var(--red); }
.plate.hit { animation: shake 0.45s; }
.plate-slot.compact .plate { grid-template-columns: auto auto auto 1fr; padding: 5px 10px; gap: 8px; border-radius: 30px; }
.plate-slot.compact .plate .avatar { grid-row: auto; width: 34px; height: 34px; }
.plate-slot.compact .plate .pname { font-size: 13px; max-width: 90px; }
.plate-slot.compact .plate .meta { grid-column: auto; margin: 0; justify-content: flex-end; }
.plate-slot.compact .hearts { font-size: 14px; }
.plate-slot.compact .energy i { width: 9px; height: 12px; }

/* evento */
.event-box { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; background: rgba(60, 10, 22, 0.45); border: 1px solid rgba(255, 120, 140, 0.25); cursor: zoom-in; }
.event-box .ev-card { width: 74px; flex: none; aspect-ratio: 530/742; border-radius: 6px; background-size: cover; box-shadow: 0 6px 16px #000; }
.event-box h4 { margin: 0 0 4px; font-family: var(--font-title); font-size: 14px; color: #ffd6a0; }
.event-box p { margin: 0; font-size: 11.5px; color: #e6d7c0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.marker { display: flex; gap: 5px; margin-top: 6px; }
.marker i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: #2a1a24; color: #a88; border: 1px solid #533; }
.marker i.on { background: radial-gradient(#ffe7a0, #e0a33a); color: #3a1d00; border-color: #fff0c0; box-shadow: 0 0 10px #f5c050; }

.decks { display: flex; gap: 8px; justify-content: space-between; }
.deck { flex: 1; text-align: center; font-size: 11px; font-weight: 800; color: var(--muted); cursor: pointer; background: none; border: 0; padding: 0; }
.deck .pile { position: relative; width: 44px; height: 60px; margin: 0 auto 4px; }
.deck .pile span { position: absolute; inset: 0; border-radius: 5px; }
.deck .n { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-title); font-size: 17px; color: #fff; text-shadow: 0 2px 4px #000; z-index: 3; }

.log { flex: 1; min-height: 60px; overflow-y: auto; padding: 8px 10px; font-size: 12.5px; line-height: 1.4; border-radius: 12px; user-select: text; -webkit-user-select: text; }
.log div { padding: 2px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); color: #d9cfbb; animation: logIn 0.3s ease both; }
@keyframes logIn { from { opacity: 0; transform: translateX(-6px); } }
.log .turn { color: var(--gold); font-family: var(--font-title); font-weight: 700; text-align: center; border: 0; margin-top: 4px; }
.log .bad { color: #ff9aa6; } .log .good { color: #9dffc6; } .log .warn { color: #ffd58a; } .log .event { color: #ffb4e0; } .log .win { color: var(--gold); font-weight: 800; font-size: 14px; }

/* verso das cartas */
.back-art {
  background:
    radial-gradient(circle at 50% 50%, rgba(240, 204, 117, 0.35) 0 18%, transparent 19%),
    repeating-linear-gradient(45deg, rgba(240, 204, 117, 0.08) 0 6px, transparent 6px 12px),
    radial-gradient(circle at 50% 40%, #2b3f86, #0f1736 70%);
  border: 2px solid #caa24f;
  box-shadow: inset 0 0 0 3px #0b0f22, inset 0 0 0 4px rgba(240, 204, 117, 0.5), 0 3px 8px rgba(0, 0, 0, 0.6);
}
.back-art.sup { background: radial-gradient(circle at 50% 50%, rgba(240, 204, 117, 0.35) 0 18%, transparent 19%), repeating-linear-gradient(45deg, rgba(240, 204, 117, 0.08) 0 6px, transparent 6px 12px), radial-gradient(circle at 50% 40%, #1f6b45, #0a2a1a 70%); }
.back-art.ev { background: radial-gradient(circle at 50% 50%, rgba(240, 204, 117, 0.35) 0 18%, transparent 19%), repeating-linear-gradient(45deg, rgba(240, 204, 117, 0.08) 0 6px, transparent 6px 12px), radial-gradient(circle at 50% 40%, #8a1f35, #2a0710 70%); }
.back-art::after { content: '⚜'; position: absolute; inset: 0; display: grid; place-items: center; color: #f0cc75; font-size: calc(var(--bw, 44px) * 0.5); text-shadow: 0 0 8px rgba(240, 204, 117, 0.8); }

/* ---------------------------------------------------------------- campo */
.opp-hand { height: 30px; display: flex; justify-content: center; align-items: flex-start; gap: 0; flex: none; margin-top: 2px; }
.opp-hand .bk { --bw: 22px; position: relative; width: 22px; height: 31px; border-radius: 3px; margin: 0 -3px; transform: rotate(var(--r)); }
.opp-hand .cnt { margin-left: 12px; font-size: 12px; font-weight: 800; color: var(--muted); align-self: center; }

.field {
  display: grid;
  grid-template-columns: var(--cw) auto var(--cw);
  gap: 0 calc(var(--gap) * 2);
  padding: var(--gap) calc(var(--gap) * 1.5);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(20, 30, 66, 0.35), rgba(10, 14, 32, 0.35));
  border: 1px solid rgba(240, 204, 117, 0.14);
  position: relative;
  flex: none;
}
.field.me { background: linear-gradient(0deg, rgba(20, 30, 66, 0.45), rgba(10, 14, 32, 0.3)); }
.field .col, .field .rows { display: flex; flex-direction: column; gap: var(--gap); }
.field .row { display: flex; gap: var(--gap); position: relative; }
.zone-tag {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(240, 204, 117, 0.55);
  pointer-events: none; white-space: nowrap;
}
.slot {
  position: relative;
  width: var(--cw); height: var(--ch);
  border-radius: calc(var(--cw) * 0.07);
  border: 2px dashed rgba(240, 204, 117, 0.22);
  background: rgba(0, 0, 0, 0.18);
  display: grid; place-items: center;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.slot > .zicon { font-size: calc(var(--cw) * 0.3); opacity: 0.22; pointer-events: none; filter: grayscale(0.3); }
.slot.z-atk { border-color: rgba(255, 110, 110, 0.28); }
.slot.z-def { border-color: rgba(110, 170, 255, 0.3); }
.slot.z-apoio { border-color: rgba(120, 255, 170, 0.26); }
.slot.z-perm { border-color: rgba(200, 160, 255, 0.28); }
.slot.drop {
  border-style: solid; border-color: var(--green); cursor: pointer;
  background: rgba(63, 191, 127, 0.14);
  box-shadow: 0 0 18px rgba(63, 191, 127, 0.45), inset 0 0 18px rgba(63, 191, 127, 0.25);
  animation: dropPulse 1.1s ease-in-out infinite;
}
.slot.drop::after { content: attr(data-cost); position: absolute; bottom: 6px; font-size: 11px; font-weight: 800; color: #b8ffd8; }
@keyframes dropPulse { 50% { box-shadow: 0 0 30px rgba(63, 191, 127, 0.75), inset 0 0 22px rgba(63, 191, 127, 0.35); } }

.midline {
  width: 100%; flex: none;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  min-height: 48px; padding: 5px 0;
  position: relative;
}
.midline::before { content: ''; position: absolute; left: 4%; right: 4%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold2), transparent); z-index: -1; }
.phase-pill {
  font-family: var(--font-title); font-weight: 800; font-size: 13px; letter-spacing: 0.6px;
  padding: 7px 14px; border-radius: 30px;
  background: linear-gradient(180deg, #1b2550, #0d1330); border: 1px solid var(--gold2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  display: flex; gap: 8px; align-items: center;
}
.phase-pill .steps { display: flex; gap: 4px; }
.phase-pill .steps i { font-style: normal; font-size: 10px; padding: 2px 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: #8d88a0; }
.phase-pill .steps i.on { background: var(--gold); color: #2b1a05; }
.phase-pill.theirs { border-color: #6b7bb0; color: #c7cff0; }
.midline .btn { padding: 8px 14px; font-size: 13.5px; }
.midline .hint { font-size: 12.5px; color: #e8dcc0; background: rgba(0, 0, 0, 0.45); padding: 6px 12px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08); }

/* ---------------------------------------------------------------- cartas */
.card {
  position: relative;
  width: var(--cw); height: var(--ch);
  border-radius: calc(var(--cw) * 0.07);
  background: #0d1430;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 230, 160, 0.3);
  transition: transform 0.18s ease, box-shadow 0.2s, filter 0.3s;
  cursor: pointer;
  will-change: transform;
}
.card img { width: 100%; height: 100%; border-radius: inherit; display: block; pointer-events: none; }
.card .stats {
  position: absolute; left: 3%; right: 3%; bottom: 3%;
  display: flex; justify-content: space-between; gap: 2px;
  font-family: var(--font-title); font-weight: 800; font-size: max(10px, calc(var(--cw) * 0.13));
  pointer-events: none;
}
.card .stats span { padding: 1px 5px; border-radius: 8px; background: rgba(5, 8, 20, 0.82); border: 1px solid rgba(255, 255, 255, 0.18); line-height: 1.25; }
.card .stats .a { color: #ffb0a8; } .card .stats .d { color: #a9ccff; }
.card .stats .dim { opacity: 0.45; }
.card .badges { position: absolute; top: 2%; right: 2%; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.card .badges b { font-size: max(11px, calc(var(--cw) * 0.14)); background: rgba(5, 8, 20, 0.8); border-radius: 50%; width: 1.6em; height: 1.6em; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); }
.card.fresh::after { content: '💤'; position: absolute; top: 4%; left: 6%; font-size: calc(var(--cw) * 0.16); opacity: 0.85; animation: zz 2s ease-in-out infinite; pointer-events: none; }
@keyframes zz { 50% { transform: translateY(-4px); opacity: 0.5; } }
.card.stunned { filter: grayscale(0.75) brightness(0.75); transform: rotate(-9deg) scale(0.94); }
.card.stunned::before {
  content: '💫'; position: absolute; top: -10%; left: 50%; font-size: calc(var(--cw) * 0.3); z-index: 3;
  transform: translateX(-50%); animation: spin 2.4s linear infinite; pointer-events: none; filter: none;
}
@keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }
.card.can-attack { box-shadow: 0 0 0 2px #ff9a4a, 0 0 22px rgba(255, 120, 50, 0.75); animation: readyPulse 1.2s ease-in-out infinite; }
@keyframes readyPulse { 50% { box-shadow: 0 0 0 2px #ffc36a, 0 0 34px rgba(255, 140, 60, 0.95); } }
.card.selectable { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(240, 204, 117, 0.6); }
.card.sel { transform: translateY(-8px) scale(1.06); box-shadow: 0 0 0 3px #fff3c4, 0 0 34px rgba(240, 204, 117, 0.95); z-index: 5; }
.card.target { cursor: crosshair; animation: targetPulse 0.9s ease-in-out infinite; }
.card.target::after { content: '🎯'; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * 0.36); pointer-events: none; animation: none; opacity: 0.9; }
@keyframes targetPulse { 0%, 100% { box-shadow: 0 0 0 2px var(--red), 0 0 16px rgba(255, 77, 94, 0.6); } 50% { box-shadow: 0 0 0 4px #ff8a95, 0 0 34px rgba(255, 77, 94, 0.95); } }
.card.good-target::before { content: '✔'; position: absolute; top: 3%; left: 5%; z-index: 4; background: var(--green); color: #032; border-radius: 50%; width: 1.5em; height: 1.5em; display: grid; place-items: center; font-weight: 900; font-size: calc(var(--cw) * 0.13); }
.card.bad-target { opacity: 0.88; }
.card.protected { box-shadow: 0 0 0 2px #9fd8ff, 0 0 18px rgba(120, 200, 255, 0.7); }
.card.back { cursor: default; }
.card.back .inner { position: absolute; inset: 0; border-radius: inherit; }
.card.enter { animation: enter 0.55s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes enter { from { transform: scale(1.6); filter: brightness(2.5); opacity: 0; } }
.card.flash { animation: flash 0.6s ease; }
@keyframes flash { 30% { filter: brightness(2.2) saturate(1.4); transform: scale(1.08); } }

/* ---------------------------------------------------------------- mão */
.hand { position: relative; width: 100%; flex: 1; min-height: calc(var(--hw) * 1.4 * 0.72); }
.hand .card { position: absolute; bottom: calc(var(--hw) * -0.12); width: var(--hw); height: calc(var(--hw) * 1.4); transform-origin: 50% 110%; }
.hand .card:hover, .hand .card.sel { z-index: 50 !important; }
.hand .card.playable { box-shadow: 0 0 0 2px rgba(140, 255, 190, 0.9), 0 0 16px rgba(63, 191, 127, 0.55); }
.hand .card.unaffordable img { filter: brightness(0.62) saturate(0.7); }
.hand .card .cost-tag { position: absolute; top: -8px; left: -8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-title); font-weight: 800; font-size: 14px; background: radial-gradient(#fff2a8, #e2a92c); color: #3a2200; box-shadow: 0 2px 8px #000; pointer-events: none; }
.hand .card .cost-tag.no { background: radial-gradient(#777, #333); color: #ddd; }
.hand-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-style: italic; }

/* ---------------------------------------------------------------- modais */
#modal-root { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.modal-bg {
  position: absolute; inset: 0; pointer-events: auto;
  background: rgba(3, 5, 14, 0.72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  display: grid; place-items: center; padding: 14px;
  animation: fadeIn 0.25s ease both;
}
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  width: min(920px, 100%); max-height: calc(100vh - 28px); overflow-y: auto;
  padding: 20px; text-align: center;
  animation: modalIn 0.35s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes modalIn { from { transform: translateY(24px) scale(0.96); opacity: 0; } }
.modal h3 { font-family: var(--font-title); font-size: clamp(18px, 2.6vw, 24px); color: var(--gold); margin: 0 0 6px; }
.modal .sub { color: var(--muted); margin: 0 0 14px; font-size: 15px; }
.modal .choices { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 10px 0 16px; }
.modal .choice { position: relative; width: clamp(110px, 17vw, 170px); aspect-ratio: 530/742; border-radius: 10px; background-size: cover; border: 0; padding: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); transition: transform 0.15s, box-shadow 0.15s; }
.modal .choice:hover { transform: translateY(-5px); }
.modal .choice.on { box-shadow: 0 0 0 4px var(--green), 0 0 30px rgba(63, 191, 127, 0.8); transform: translateY(-8px); }
.modal .choice .num { position: absolute; top: -10px; left: -10px; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #2b1a05; display: grid; place-items: center; font-weight: 900; font-family: var(--font-title); box-shadow: 0 3px 10px #000; }
.modal .choice .zoom { position: absolute; bottom: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); display: grid; place-items: center; font-size: 13px; }
.modal .btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.modal .opt-list { display: flex; flex-direction: column; gap: 10px; align-items: center; margin: 12px 0; }
.modal .opt-list .btn { min-width: 260px; }

.zoom-wrap { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; }
.zoom-card { width: min(380px, 78vw, calc((100vh - 140px) / 1.4)); aspect-ratio: 530/742; border-radius: 16px; background-size: cover; box-shadow: 0 30px 80px #000, 0 0 0 2px rgba(255, 230, 160, 0.4); animation: modalIn 0.35s ease both; }
.zoom-info { width: min(340px, 100%); text-align: left; }
.zoom-info h3 { font-family: var(--font-title); color: var(--gold); margin: 0; font-size: 24px; }
.zoom-info .ttl { color: var(--muted); font-style: italic; margin-bottom: 10px; }
.zoom-info .kv { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.zoom-info .kv span { background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line); padding: 4px 10px; border-radius: 20px; font-weight: 800; font-size: 14px; }
.zoom-info .txt { font-size: 16px; line-height: 1.55; background: rgba(0, 0, 0, 0.3); border-left: 3px solid var(--gold); padding: 10px 12px; border-radius: 6px; }
.zoom-info .status { margin-top: 10px; color: #9fd8ff; font-weight: 700; }
.rar-b { color: #ddd; } .rar-e { color: #7fb2ff; } .rar-m { color: #d19bff; } .rar-l { color: #ffd45a; }

.rules-doc { text-align: left; max-width: 760px; margin: 0 auto; line-height: 1.55; }
.rules-doc h4 { font-family: var(--font-title); color: var(--gold); margin: 18px 0 6px; font-size: 18px; }
.rules-doc p, .rules-doc li { color: #e6dcc6; font-size: 15px; }
.rules-doc table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rules-doc td, .rules-doc th { border: 1px solid var(--line); padding: 6px 8px; }

/* ---------------------------------------------------------------- toasts, banner, fx */
#toast-root { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(560px, 94vw); }
.toast { pointer-events: auto; background: rgba(12, 17, 40, 0.96); border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); animation: toastIn 0.35s ease both; font-size: 14.5px; }
.toast.err { border-color: #ff6a7a; color: #ffd0d6; }
.toast.coach { border-color: var(--gold); display: flex; gap: 12px; align-items: flex-start; text-align: left; background: linear-gradient(135deg, rgba(40, 32, 10, 0.97), rgba(14, 18, 42, 0.97)); }
.toast.coach .who { width: 42px; height: 42px; border-radius: 50%; flex: none; background: url(../assets/cards/personagens/13.webp) 50% 22% / 190% no-repeat; border: 2px solid var(--gold); margin: 0; }

.toast.coach p { margin: 0; font-weight: 600; line-height: 1.4; }
.toast.coach .ok { margin-top: 8px; }
.toast.out { animation: toastOut 0.3s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-14px); } }
.toast.emote { font-size: 40px; background: none; border: 0; box-shadow: none; animation: emote 2.2s ease both; }
@keyframes emote { 0% { transform: scale(0.2); opacity: 0; } 15% { transform: scale(1.3); opacity: 1; } 25% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }

#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.banner {
  position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
  text-align: center; padding: 18px 0;
  background: linear-gradient(90deg, transparent, rgba(8, 12, 30, 0.9) 20%, rgba(8, 12, 30, 0.9) 80%, transparent);
  border-top: 1px solid var(--gold2); border-bottom: 1px solid var(--gold2);
  animation: banner 1.3s cubic-bezier(.2, .9, .3, 1) both;
}
.banner b { font-family: var(--font-deco); font-size: clamp(28px, 6vw, 58px); color: var(--gold); text-shadow: 0 0 30px rgba(240, 204, 117, 0.6), 0 4px 0 #000; letter-spacing: 2px; }
.banner.theirs b { color: #cdd6ff; text-shadow: 0 0 30px rgba(140, 160, 255, 0.6), 0 4px 0 #000; }
.banner small { display: block; color: var(--muted); font-weight: 700; margin-top: 2px; }
@keyframes banner { 0% { opacity: 0; transform: translateY(-50%) scaleY(0.2); } 18% { opacity: 1; transform: translateY(-50%) scaleY(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) translateX(40px); } }
.float-num { position: absolute; font-family: var(--font-title); font-weight: 800; font-size: 30px; text-shadow: 0 3px 0 #000, 0 0 16px currentColor; animation: floatUp 1.3s ease-out both; white-space: nowrap; }
.float-num.dmg { color: #ff5a6b; font-size: 40px; }
.float-num.heal { color: #7dffb0; }
.float-num.nrg { color: #ffd84a; }
@keyframes floatUp { 0% { transform: translate(-50%, 0) scale(0.4); opacity: 0; } 15% { transform: translate(-50%, -10px) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -80px) scale(1); opacity: 0; } }
.spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 10px #ffb347; }
.slash { position: absolute; width: 140px; height: 8px; border-radius: 8px; background: linear-gradient(90deg, transparent, #fff, #ffcf70, transparent); transform-origin: center; animation: slash 0.35s ease-out both; box-shadow: 0 0 20px #ffb347; }
@keyframes slash { from { transform: translate(-50%, -50%) rotate(var(--a)) scaleX(0.1); opacity: 1; } to { transform: translate(-50%, -50%) rotate(var(--a)) scaleX(1.4); opacity: 0; } }
.vs-tag { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-title); font-weight: 800; font-size: 26px; padding: 4px 14px; border-radius: 20px; background: rgba(0, 0, 0, 0.85); border: 1px solid var(--gold); color: #fff; animation: pop 0.25s ease both; white-space: nowrap; }
.vs-tag .a { color: #ff9a8a; } .vs-tag .d { color: #9ec4ff; }
.showcase { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; animation: showcase 2.2s cubic-bezier(.2, .9, .3, 1) both; }
.showcase .sc-card { width: min(300px, 60vw, calc(62vh / 1.4)); aspect-ratio: 530/742; border-radius: 14px; background-size: cover; box-shadow: 0 0 0 2px #ffe6a6, 0 0 60px rgba(240, 204, 117, 0.6), 0 30px 80px #000; margin: 0 auto; }
.showcase .sc-title { font-family: var(--font-title); font-weight: 800; font-size: 20px; color: var(--gold); margin-top: 10px; text-shadow: 0 2px 8px #000; }
.showcase.long { animation-duration: 2.8s; }
@keyframes showcase { 0% { opacity: 0; transform: translate(-50%, -40%) scale(0.6) rotateY(90deg); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotateY(0); } 82% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) translateX(-60%); } }
.shatter { position: absolute; border-radius: 8px; background-size: cover; animation: shatter 0.6s ease-in both; }
@keyframes shatter { 0% { filter: brightness(1.5); } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.4); opacity: 0; filter: brightness(3) blur(3px); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px) rotate(-1deg); } 40% { transform: translateX(8px) rotate(1deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
.screen-flash { position: absolute; inset: 0; background: radial-gradient(circle, transparent 40%, rgba(255, 30, 50, 0.45)); animation: fadeOut 0.7s ease both; }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

.preview { position: fixed; z-index: 150; pointer-events: none; width: 300px; aspect-ratio: 530/742; border-radius: 14px; background-size: cover; box-shadow: 0 30px 80px #000, 0 0 0 2px rgba(255, 230, 160, 0.5); opacity: 0; transform: scale(0.92); transition: opacity 0.15s, transform 0.15s; }
.preview.on { opacity: 1; transform: none; }

.end-screen { text-align: center; }
.end-screen .crown { font-size: 70px; animation: pop 0.6s ease both; }
.end-screen h2 { font-family: var(--font-deco); font-size: clamp(34px, 7vw, 60px); margin: 0; color: var(--gold); text-shadow: 0 0 30px rgba(240, 204, 117, 0.5); }
.end-screen.lose h2 { color: #c9d2ff; text-shadow: 0 0 30px rgba(140, 160, 255, 0.5); }
.emote-bar { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.emote-bar button { font-size: 30px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); border-radius: 14px; width: 58px; height: 58px; }
.emote-bar button:hover { transform: scale(1.1); border-color: var(--gold); }

/* ---------------------------------------------------------------- responsivo (celular / telas estreitas) */
@media (max-width: 900px), (max-height: 520px) and (max-width: 1100px) {
  .g-side, .g-corner { display: none; }
  .g-board { padding: max(4px, env(safe-area-inset-top)) 6px 0; }
  .m-top, .m-bottom { display: flex; width: 100%; gap: 8px; align-items: center; flex: none; }
  .m-top .plate-slot, .m-bottom .plate-slot { flex: 1; min-width: 0; }
  .m-bottom { margin-top: 4px; }
  .opp-hand { height: 20px; }
  .opp-hand .bk { --bw: 14px; width: 14px; height: 20px; }
  .midline { min-height: 42px; gap: 6px; }
  .midline .btn { padding: 7px 10px; font-size: 12px; }
  .phase-pill { font-size: 11px; padding: 5px 10px; }
  .phase-pill .steps { display: none; }
  .midline .hint { font-size: 11px; }
  .field { gap: 0 var(--gap); padding: 5px 6px; }
  .zone-tag { display: none; }
  #btn-event { background-size: cover; background-position: center; border-radius: 8px; width: 34px; height: 46px; }
}

/* posição em leque da mão (variáveis definidas em ui.js) */
.hand .card { transform: translateY(var(--y, 0px)) rotate(var(--r, 0deg)); }
.hand .card:hover { transform: translateY(calc(var(--y, 0px) - 20%)) rotate(0deg) scale(1.08); }
.hand .card.sel { transform: translateY(-24%) rotate(0deg) scale(1.1); }
@media (hover: none) { .hand .card:hover { transform: translateY(var(--y, 0px)) rotate(var(--r, 0deg)); } .hand .card.sel { transform: translateY(-22%) scale(1.06); } }
#coach-root { position: fixed; left: 16px; bottom: 16px; z-index: 210; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
#coach-root .toast { pointer-events: auto; }
.toast.coach b.ttl { color: var(--gold); display: block; margin-bottom: 2px; font-family: var(--font-title); }
.toast.coach p b { color: #ffe39a; display: inline; font-family: inherit; }
@media (max-width: 900px) { #coach-root { bottom: auto; top: 60px; left: 50%; transform: translateX(-50%); } }
.midline { flex-wrap: nowrap; padding: 5px 8px; }
.midline .hint { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.midline .btn { flex: none; white-space: nowrap; }
@media (max-width: 1500px) { .midline .hint.idle { display: none; } }
@media (max-width: 900px) { .midline { flex-wrap: wrap; } .midline .phase-pill .lbl { display: none; } }
.slot.empty { grid-template-rows: 1fr auto; padding: 8% 0; }
.slot > .zicon { align-self: end; }
.slot > .zlabel { font-size: max(8px, calc(var(--cw) * 0.1)); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: rgba(240, 204, 117, 0.35); align-self: start; margin-top: 4px; pointer-events: none; }
.slot.drop > .zlabel { color: #b8ffd8; }
.plate-slot.compact .plate { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 30px; }
.plate-slot.compact .plate .pname { flex: 1; min-width: 0; font-size: 13px; }
.plate-slot.compact .hearts { font-size: 13px; gap: 1px; }
.plate-slot.compact .nrg-num { font-family: var(--font-title); font-weight: 800; font-size: 15px; color: #ffd84a; white-space: nowrap; }
.plate-slot.compact .hand-num { font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; }
@media (max-width: 360px) { .plate-slot.compact .plate .pname { display: none; } }
.card .stats { display: none; }
.hand .card { bottom: auto; top: 8px; }
.btn .lg { display: inline; }
@media (max-width: 900px) {
  .btn .lg { display: none; }
  .midline .phase-pill.mine { display: none; }
  .midline { flex-wrap: nowrap; }
}
.hand .card { top: max(8px, calc(50% - var(--hw) * 0.7)); }
.phase-pill { white-space: nowrap; }
@media (max-width: 900px) { .midline .phase-pill.theirs + .hint { display: none; } }
.flow { flex-direction: column; gap: 4px; }
.flow .step { display: grid; grid-template-columns: 62px 1fr; text-align: left; align-items: center; width: min(320px, 100%); column-gap: 10px; }
.flow .step span { grid-row: 1 / 3; text-align: center; }
.flow .arrow { font-size: 16px; line-height: 1; }
.midline { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 1250px) { .phase-pill .steps { display: none; } }
.slot.drop > .zlabel { display: none; }
.slot.drop::after { bottom: 10%; font-size: max(9px, calc(var(--cw) * 0.11)); text-align: center; }
.midline .hint { max-width: 420px; }

.vol { display: flex; align-items: center; gap: 12px; justify-content: center; min-width: 260px; color: var(--muted); font-weight: 700; }
.vol input { flex: 1; accent-color: #f0cc75; }

/* Evento ativo grande, ao lado direito do campo */
#event-big { position: absolute; z-index: 6; display: none; flex-direction: column; align-items: center; gap: 6px; cursor: zoom-in; text-align: center; }
#event-big .evb-title { font-family: var(--font-title); font-weight: 800; font-size: clamp(15px, calc(var(--evw, 140px) * 0.09), 24px); color: #ffd6a0; text-shadow: 0 2px 8px #000; line-height: 1.15; }
#event-big .evb-text { font-size: clamp(13px, calc(var(--evw, 140px) * 0.058), 17px); line-height: 1.35; font-weight: 600; color: #fff0d8; background: rgba(8, 10, 28, 0.78); border: 1px solid rgba(255, 215, 150, 0.45); border-radius: 12px; padding: 8px 10px; text-align: left; text-shadow: 0 1px 3px #000; }
#event-big.compact .evb-text { display: none; }
#event-big .evb-card { width: 100%; aspect-ratio: 530/742; border-radius: 10px; background-size: cover; box-shadow: 0 0 0 2px rgba(255, 215, 150, 0.7), 0 0 26px rgba(255, 120, 80, 0.45), 0 14px 30px #000; animation: evGlow 3s ease-in-out infinite; transition: transform 0.2s; }
#event-big:hover .evb-card { transform: scale(1.04); }
#event-big .evb-slot { width: 100%; aspect-ratio: 530/742; border-radius: 10px; border: 2px dashed rgba(255, 140, 120, 0.35); display: grid; place-items: center; align-content: center; gap: 4px; color: rgba(255, 190, 160, 0.55); background: rgba(60, 10, 22, 0.25); }
#event-big .evb-slot span { font-size: 34px; opacity: 0.6; }
#event-big .evb-slot small { font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: 11px; }
#event-big .evb-note { font-size: clamp(12px, calc(var(--evw, 140px) * 0.052), 15px); font-weight: 700; color: var(--muted); }
#event-big.active { animation: evIn 0.6s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes evGlow { 50% { box-shadow: 0 0 0 2px rgba(255, 230, 170, 0.95), 0 0 40px rgba(255, 120, 80, 0.7), 0 14px 30px #000; } }
@keyframes evIn { from { opacity: 0; transform: translateX(30px) scale(0.85); } }

/* seletor de música */
.musicpick { max-width: 560px; }
.mp { text-align: left; max-height: 52vh; overflow-y: auto; margin-top: 10px; padding-right: 4px; }
.mp-group { font-family: var(--font-title); color: var(--gold); margin: 14px 0 6px; font-size: 14px; letter-spacing: 1px; }
.mp-list { display: flex; flex-direction: column; gap: 6px; }
.mp-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px; font-weight: 700; font-size: 15px; }
.mp-item small { color: var(--muted); font-weight: 600; }
.mp-item:hover { border-color: var(--gold); }
.mp-item.on { background: rgba(240, 204, 117, 0.16); border-color: var(--gold); }
.mp-item.on::after { content: '▶'; color: var(--gold); }
.toggle.inline { width: auto; margin: 10px 0 0; padding: 8px 12px; font-size: 14px; text-align: left; }

/* mini player de música */
.mini-player { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 22px; background: rgba(14, 21, 48, 0.85); border: 1px solid var(--line); }
.mini-player button, .np-ctl button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; font-size: 16px; display: grid; place-items: center; }
.mini-player button:hover, .np-ctl button:hover { background: rgba(240, 204, 117, 0.2); }
.np { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); border-radius: 14px; padding: 6px 8px 6px 14px; margin-bottom: 8px; }
.np-title { font-weight: 800; font-size: 15px; text-align: left; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-ctl { display: flex; gap: 2px; flex: none; }
.np-ctl button { width: 40px; height: 40px; font-size: 19px; background: rgba(240, 204, 117, 0.12); }

/* painel de sons de meme */
#meme-panel { position: fixed; z-index: 95; right: 12px; top: 58px; width: min(340px, calc(100vw - 24px)); max-height: min(70vh, 560px); display: flex; flex-direction: column; background: rgba(12, 17, 40, 0.97); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); animation: modalIn 0.25s ease both; }
.mm-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-family: var(--font-title); }
.mm-now { flex: 1; text-align: right; font-size: 12px; color: var(--gold); font-weight: 700; font-family: var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-x { background: none; border: 0; font-size: 16px; color: var(--muted); }
.mm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; overflow-y: auto; }
.mm-btn { display: flex; align-items: center; gap: 8px; text-align: left; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-weight: 700; font-size: 13px; line-height: 1.15; }
.mm-btn span { font-size: 20px; flex: none; }
.mm-btn:hover { border-color: var(--gold); }
.mm-btn:active { transform: scale(0.97); }
.mm-btn.on { background: rgba(240, 204, 117, 0.2); border-color: var(--gold); box-shadow: 0 0 14px rgba(240, 204, 117, 0.4); }
.mm-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 10px; border-top: 1px solid var(--line); }
.mm-mute { font-size: 12.5px; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 6px; }
@media (max-width: 900px) { #meme-panel { right: 0; left: 0; top: auto; bottom: 0; width: 100%; max-height: 52vh; border-radius: 16px 16px 0 0; } }

/* voz */
.online-only { display: none !important; }
body.online .online-only { display: grid !important; }
.icon-btn.live { border-color: #3fbf7f; box-shadow: 0 0 0 2px rgba(63, 191, 127, 0.45), 0 0 14px rgba(63, 191, 127, 0.5); }
.plate.speaking { border-color: #3fbf7f; box-shadow: 0 0 0 2px #3fbf7f, 0 0 26px rgba(63, 191, 127, 0.7); }
.fan .fc.back-art { background-size: cover; }

/* vida em pontos: 5 corações que esvaziam aos poucos; energia x/máximo */
.hearts { align-items: center; }
.hearts i { position: relative; display: inline-block; width: 1.25em; height: 1.1em; font-style: normal; filter: none !important; opacity: 1 !important; transform: none; }
.hearts i s { text-decoration: none; filter: grayscale(1) brightness(0.45); opacity: 0.6; }
.hearts i b { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; font-weight: 400; filter: drop-shadow(0 0 4px rgba(255, 60, 80, 0.6)); transition: width 0.5s; }
.hearts .lifenum { font-style: normal; font-family: var(--font-title); font-weight: 800; font-size: 0.8em; margin-left: 6px; color: #ffb4bd; }
.energy i.spent { background: #4a4468; }
.energy i.lock { background: #1c2038; opacity: 0.5; }
.energy { flex-wrap: wrap; row-gap: 2px; }
.energy i { width: 11px; height: 15px; }
.card .stats .d.hurt { color: #ff8a8a; border-color: #ff6a6a; }
.float-num.dmg { font-size: 24px; }
.plate-slot.compact .energy { display: none; }

/* placa compacta (celular): corações menores para a energia x/máx caber sem sobrepor os botões */
@media (max-width: 520px) {
  .plate-slot.compact .plate { gap: 5px; padding-right: 8px; min-width: 0; overflow: hidden; }
  .plate-slot.compact .hearts i { width: 1.05em; }
  .plate-slot.compact .hearts .lifenum { margin-left: 2px; font-size: 0.85em; }
  .plate-slot.compact .nrg-num { font-size: 14px; }
}

/* carta danificada: vida atual visível, barra de vida e rachaduras */
.card.damaged { box-shadow: 0 6px 16px rgba(0,0,0,.55), 0 0 0 2px rgba(255,80,80,.75), 0 0 14px rgba(255,60,60,.55); }
.card.damaged img { filter: saturate(.78) brightness(.92) sepia(.15) hue-rotate(-12deg); }
.card .dmgtag {
  position: absolute; left: 50%; bottom: 40%; transform: translateX(-50%); z-index: 6; pointer-events: none;
  font-family: var(--font-title); font-weight: 800; font-size: max(11px, calc(var(--cw) * 0.15)); white-space: nowrap;
  color: #fff; padding: 1px 7px; border-radius: 10px; background: linear-gradient(#e0343f, #8f1420); border: 1px solid #ffb4b8;
  box-shadow: 0 2px 6px rgba(0,0,0,.6); text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.card .hpbar { position: absolute; left: 6%; right: 6%; bottom: 37%; height: max(4px, calc(var(--cw) * 0.045)); z-index: 3; pointer-events: none; border-radius: 4px; background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.35); overflow: hidden; }
.card .hpbar i { display: block; height: 100%; background: linear-gradient(90deg, #ff4b55, #ffb04a); }
.card .cracks {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: .85; mix-blend-mode: multiply;
  background:
    linear-gradient(115deg, transparent 46%, rgba(70,0,0,.75) 47%, transparent 48.4%) 0 0 / 100% 100% no-repeat,
    linear-gradient(62deg, transparent 58%, rgba(70,0,0,.65) 59%, transparent 60.2%) 0 0 / 100% 100% no-repeat,
    linear-gradient(155deg, transparent 30%, rgba(70,0,0,.6) 31%, transparent 32%) 0 0 / 100% 100% no-repeat,
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(150,0,10,.45) 100%);
}

/* perk: turnos restantes */
.card .badges .perkleft { width: auto; height: auto; font-size: max(11px, calc(var(--cw) * 0.14)); background: rgba(10, 14, 36, .9); color: #ffd84a; border: 1px solid #ffd84a; border-radius: 9px; padding: 0 5px; font-weight: 800; }

.stats .buff{color:#7dff9a;text-shadow:0 0 6px #2ecc71}
.badges .modb{background:#1e6b36;color:#fff;border-radius:8px;padding:0 4px;font-size:.7em}
.badges .modb.down{background:#245a8a}

.set-box { text-align: left; }
.set-box h4 { margin: 10px 0 6px; font-family: var(--font-title); color: var(--gold); }
.set-row { display: grid; grid-template-columns: 150px 1fr 46px; gap: 10px; align-items: center; margin: 6px 0; font-weight: 700; font-size: 14px; }
.set-row.sel { grid-template-columns: 110px 1fr; }
.set-row select { width: 100%; background: rgba(0,0,0,.4); color: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 6px; font: inherit; }
.set-row b { text-align: right; color: var(--gold); font-size: 13px; }
.set-note { font-size: 12px; margin: 4px 0; }
.set-player { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; margin: 8px 0; }
.set-player .np-title { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-player button { background: rgba(255,255,255,.1); border: 0; color: inherit; border-radius: 50%; width: 34px; height: 34px; margin-left: 4px; }
.chat-dot { position: absolute; top: -4px; right: -4px; background: #e54; color: #fff; border-radius: 9px; font-size: 10px; font-style: normal; min-width: 16px; padding: 0 3px; line-height: 16px; }
#btn-chat, #btn-chat-m { position: relative; }
#chat-panel { position: fixed; z-index: 96; right: 12px; bottom: 70px; width: min(340px, calc(100vw - 24px)); height: min(52vh, 420px); display: flex; flex-direction: column; background: var(--panel, #12132e); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.chat-msgs { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.chat-msgs .cm { background: rgba(255,255,255,.08); border-radius: 10px; padding: 6px 10px; font-size: 14px; word-break: break-word; max-width: 90%; align-self: flex-start; }
.chat-msgs .cm.me { background: rgba(240,204,117,.2); align-self: flex-end; }
.chat-msgs .cm b { color: var(--gold); margin-right: 4px; font-size: 12px; }
.chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; min-width: 0; background: rgba(0,0,0,.4); color: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: inherit; }
@media (max-width: 900px) { #chat-panel { right: 0; left: 0; bottom: 0; width: 100%; height: 55vh; border-radius: 16px 16px 0 0; } .set-row { grid-template-columns: 110px 1fr 40px; } }

.card .modrib { position: absolute; left: 2%; right: 2%; top: 14%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px; pointer-events: none; z-index: 4; }
.card .modrib span { font-family: var(--font-title); font-weight: 900; font-size: max(9px, calc(var(--cw) * 0.11)); white-space: nowrap; max-width: 96%; padding: 0 4px; border-radius: 10px; color: #fff; background: linear-gradient(180deg, #2fbf5b, #137a36); border: 2px solid #b8ffcf; box-shadow: 0 0 10px rgba(60, 255, 120, .8); text-shadow: 0 1px 2px #000; }
.card .modrib span.down { background: linear-gradient(180deg, #3d8fe0, #1a4f93); border-color: #bfe0ff; box-shadow: 0 0 10px rgba(90, 170, 255, .8); }
.card.buffed { outline: 3px solid #4cff8a; outline-offset: -1px; animation: buffglow 1.6s ease-in-out infinite; }
.card.shielded { outline: 3px solid #5aaaff; outline-offset: -1px; animation: shieldglow 1.6s ease-in-out infinite; }
@keyframes buffglow { 50% { box-shadow: 0 0 18px 4px rgba(76, 255, 138, .85); } }
@keyframes shieldglow { 50% { box-shadow: 0 0 18px 4px rgba(90, 170, 255, .85); } }

.card.swap-target { outline: 3px dashed #ffd84a; outline-offset: -2px; animation: buffglow 1s ease-in-out infinite; cursor: pointer; }
.slot[data-slot]::before { content: ''; }

#pressure-chip { position: fixed; z-index: 30; right: 12px; top: 62px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 280px; pointer-events: none; font-family: var(--font-title); font-size: 12px; font-weight: 800; }
#pressure-chip span { background: rgba(8, 10, 28, .82); border: 1px solid var(--line); border-radius: 12px; padding: 1px 9px; color: var(--muted, #cbd); }
#pressure-chip.hot span:nth-child(2) { color: #ffb347; border-color: #ff8a3d; box-shadow: 0 0 10px rgba(255, 138, 61, .6); }
#pressure-chip.hot span:nth-child(3) { color: #ff8f8f; border-color: #ff6a6a; }
@media (max-width: 900px) { #pressure-chip { right: auto; left: 50%; transform: translateX(-50%); top: 2px; font-size: 10px; justify-content: center; } }