@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url(fonts/barlow-condensed-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url(fonts/barlow-condensed-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-style: italic; font-display: swap; src: url(fonts/barlow-condensed-latin-800-italic.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(fonts/inter-latin-700-normal.woff2) format('woff2'); }
:root {
  --bg: #0b111c;
  --panel: #18243a;
  --line: #2a3a57;
  --text: #e8edf5;
  --muted: #8d9ab3;
  --accent: #f2b33d;
  --good: #3ccf8e;
  --bad: #ff5d5d;
  --red: #c8323a; --green: #1f8a4c; --blue: #2564c4; --purple: #7a3bb5; --black: #3a3f48; --yellow: #c9a227;
  --mat: #b8a9a6;
  --mat-zone: rgba(160, 140, 138, .55);
  --mat-red: #c8202a;
  --ch: clamp(74px, 11.2vh, 118px);
}
/* a largura acompanha a altura em qualquer elemento que redefinir --ch (proporção oficial 63x88) */
*, *::before, *::after { --cw: calc(var(--ch) * .716); }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: radial-gradient(ellipse at top, #1a2a48, var(--bg) 60%); color: var(--text); font: 14px/1.4 Inter, system-ui, sans-serif; min-height: 100vh; }
h1, h2, h3 { font-family: 'Barlow Condensed', sans-serif; letter-spacing: .5px; margin: 0 0 10px; }
button { font: inherit; background: #263755; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; cursor: pointer; }
button:hover { border-color: var(--accent); }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--accent); color: #1a1205; border: 0; font-weight: 600; }
input, select, textarea { font: inherit; background: #0e1828; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px; width: 100%; }
label { display: block; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
label input, label select { margin-top: 4px; }
.hidden { display: none !important; }
.loading { position: fixed; inset: 0; display: grid; place-items: center; font: 600 22px 'Barlow Condensed'; color: var(--muted); }
.screen { padding: 16px; }
.msg { color: var(--bad); white-space: pre-line; font-size: 12px; min-height: 1em; }
.hint { color: var(--muted); font-size: 12px; }
.row { display: flex; gap: 8px; margin-top: 10px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.center { max-width: 420px; margin: 10vh auto; text-align: center; }
.brand { max-width: 1100px; margin: 4vh auto 20px; }
.brand h1 { font-size: 44px; }
.brand p { color: var(--muted); margin: 0; }
.tag { font-size: 16px; background: var(--accent); color: #1a1205; padding: 2px 8px; border-radius: 6px; vertical-align: middle; }
.lobby-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.lobby-grid button { width: 100%; margin-top: 4px; }
.row button { width: auto; margin: 0; }
details summary { cursor: pointer; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.code { font: 700 48px 'Barlow Condensed'; letter-spacing: 8px; color: var(--accent); margin: 10px 0; }
.deck-preview { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.deck-preview img { width: 64px; border-radius: 4px; }

/* ------------------------- mesa (v2: playmat, DON!!, pilhas) ------------------------- */
#game {
  --gold: #e7b545; --gold-2: #ffd977; --crimson: #c4161c;
  display: grid; grid-template-columns: 280px minmax(0, 1fr) 250px; gap: 10px; padding: 8px; height: 100vh; height: 100dvh;
  background: radial-gradient(ellipse at 50% 0%, #1b2c4d 0%, transparent 60%), radial-gradient(ellipse at 50% 120%, #2a1220 0%, transparent 55%), var(--bg);
  touch-action: manipulation; --ch-hand: calc(var(--ch) * 1.08);
}
.table { display: flex; flex-direction: column; gap: 5px; min-width: 0; min-height: 0; position: relative; }
.mat {
  position: relative; border-radius: 14px; padding: 7px; display: grid; gap: 6px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(120,90,80,.25), transparent 60%),
    repeating-linear-gradient(115deg, rgba(0,0,0,.022) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #d3ccc6, #b3aaa4);
  box-shadow: 0 10px 28px #0009, inset 0 0 0 1px #ffffff40, inset 0 -6px 18px #0002;
  grid-template-columns: calc(var(--cw) + 18px) minmax(110px, 1fr) repeat(3, calc(var(--cw) + 18px));
  grid-template-rows: calc(var(--ch) + 14px) calc(var(--ch) + 14px) calc(var(--ch) * .62);
  transition: box-shadow .35s;
}
.has-ui-playmat .mat { background: linear-gradient(#0002, #0002), var(--ui-playmat) center / cover; }
.has-ui-playmat .zone { background: rgba(255,255,255,.08); }
/* playmat do oponente girado 180° (como na mesa de verdade) */
.has-ui-playmat .mat.opp { background: #0b111c; }
.has-ui-playmat .mat.opp::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transform: rotate(180deg); background: linear-gradient(#0002, #0002), var(--ui-playmat) center / cover; }
.mat.turn { box-shadow: 0 0 0 2px var(--gold), 0 0 26px #e7b54566, 0 10px 28px #0009, inset 0 0 0 1px #ffffff40; }
.mat.me { grid-template-areas: "life chars chars chars chars" "life phase leader stage deck" "dond cost  cost   cost  trash"; }
.mat.opp {
  grid-template-columns: repeat(3, calc(var(--cw) + 18px)) minmax(110px, 1fr) calc(var(--cw) + 18px);
  grid-template-rows: calc(var(--ch) * .62) calc(var(--ch) + 14px) calc(var(--ch) + 14px);
  grid-template-areas: "trash cost  cost   cost  dond" "deck  stage leader phase life" "chars chars chars chars life";
}
.zone {
  position: relative; isolation: isolate; background: var(--zone-bg, rgba(150, 128, 124, .35)); border: 2px solid var(--zone-line, var(--crimson)); border-radius: 6px;
  box-shadow: inset 0 0 0 1px #ffffff55, inset 0 2px 8px #0000001a;
  display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 4px;
}
.zone > .lbl { position: absolute; font: 700 clamp(12px, 1.9vh, 21px) 'Barlow Condensed'; color: var(--zone-label, rgba(110, 22, 22, .38)); letter-spacing: 2px; pointer-events: none; text-transform: uppercase; z-index: -1; }
.zone > .num { position: absolute; top: -2px; left: -2px; background: var(--crimson); color: #fff; font: 700 11px/1.35 'Barlow Condensed'; padding: 0 5px; border-radius: 4px 0 5px 0; z-index: 4; }
.z-chars { grid-area: chars; justify-content: flex-start; padding-left: 12px; gap: 8px; }
.z-chars .lbl { right: 12px; bottom: 4px; }
.z-life { grid-area: life; flex-direction: column; justify-content: flex-start; padding-top: 18px; gap: 0; }
.z-life .lbl { bottom: 4px; }
.z-leader { grid-area: leader; } .z-stage { grid-area: stage; } .z-deck { grid-area: deck; } .z-dond { grid-area: dond; } .z-trash { grid-area: trash; }
.z-cost { grid-area: cost; justify-content: flex-start; align-items: center; padding: 2px 10px 2px 22px; gap: 0; overflow: hidden; }
.z-leader .lbl, .z-stage .lbl, .z-deck .lbl, .z-trash .lbl, .z-dond .lbl { bottom: 2px; font-size: 13px; }
.z-cost .lbl { right: 12px; }
.z-leader { background: radial-gradient(circle, rgba(255,255,255,.35), rgba(150,128,124,.3) 70%); }

/* fases */
.phases { grid-area: phase; display: flex; flex-direction: column; justify-content: center; gap: 3px; max-width: 160px; justify-self: center; width: 100%; }
.phases div { background: #2b2524b3; color: #f3ece8; font: 600 11px/1.5 'Barlow Condensed'; letter-spacing: .6px; text-align: center; border-radius: 20px; padding: 1px 6px; opacity: .45; text-transform: uppercase; transition: all .3s; }
.phases div.on { opacity: 1; background: linear-gradient(90deg, #8a5a10, #e7b545, #8a5a10); color: #1a1205; box-shadow: 0 0 12px #e7b54599; transform: scale(1.06); }
.stack-count { position: absolute; bottom: 3px; right: 3px; background: #000d; color: #fff; font: 700 13px/1.3 'Barlow Condensed'; padding: 0 6px; border-radius: 6px; z-index: 5; border: 1px solid #ffffff30; }

/* verso das cartas (desenho próprio; pode ser trocado por images/_ui/back.png) */
.card.back, .life-card, .mini-back, .deck-pile {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 17%, var(--gold) 17.5% 19.5%, transparent 20% 25%, #e7b54570 25.5% 26.5%, transparent 27%),
    conic-gradient(from 0deg at 50% 50%, #ffffff0d 0 15deg, transparent 15deg 30deg, #ffffff0d 30deg 45deg, transparent 45deg 60deg, #ffffff0d 60deg 75deg, transparent 75deg 90deg, #ffffff0d 90deg 105deg, transparent 105deg 120deg, #ffffff0d 120deg 135deg, transparent 135deg 150deg, #ffffff0d 150deg 165deg, transparent 165deg 180deg, #ffffff0d 180deg 195deg, transparent 195deg 210deg, #ffffff0d 210deg 225deg, transparent 225deg 240deg, #ffffff0d 240deg 255deg, transparent 255deg 270deg, #ffffff0d 270deg 285deg, transparent 285deg 300deg, #ffffff0d 300deg 315deg, transparent 315deg 330deg, #ffffff0d 330deg 345deg, transparent 345deg),
    linear-gradient(155deg, #9a1d26, #5a0d16 55%, #2c060c);
  border: 1px solid #170306; box-shadow: inset 0 0 0 2px #e7b54555, inset 0 0 0 4px #00000040, 0 2px 4px #0007;
}
.has-ui-back .card.back, .has-ui-back .life-card, .has-ui-back .mini-back, .has-ui-back .deck-pile { background: var(--ui-back) center / cover; }
.deck-pile { position: relative; width: var(--cw); height: var(--ch); border-radius: 6px; box-shadow: inset 0 0 0 2px #e7b54555, inset 0 0 0 4px #00000040, 1px 1px 0 #ddd, 2px 2px 0 #999, 3px 3px 0 #ddd, 4px 4px 0 #888, 5px 6px 8px #000a; }
.deck-pile.thin { box-shadow: inset 0 0 0 2px #e7b54555, 1px 1px 0 #ccc, 2px 3px 5px #000a; }
.life-card { width: calc(var(--cw) * .98); height: calc(var(--cw) * .7); border-radius: 5px; flex: 0 0 auto; transition: margin .2s; }
.life-card + .life-card { margin-top: calc(var(--cw) * -.48); }
.z-life:hover .life-card + .life-card { margin-top: calc(var(--cw) * -.36); }
.opp-hand { display: flex; gap: 0; justify-content: center; align-items: center; height: 30px; flex: 0 0 auto; }
.opp-hand .mini-back { width: 20px; height: 28px; border-radius: 3px; margin-left: -6px; box-shadow: inset 0 0 0 1px #e7b54566, 0 1px 3px #0009; }
.opp-hand .hint { margin-left: 8px; }

/* DON!! — carta do mesmo formato das outras (desenho próprio; images/_ui/don.png substitui) */
.don-card {
  --dh: calc(var(--ch) * .56); width: calc(var(--dh) * .716); height: var(--dh); flex: 0 0 auto; border-radius: 5px; position: relative;
  display: grid; place-items: center; overflow: hidden; color: transparent; font-size: 0;
  background: var(--don-bg,
    radial-gradient(circle at 50% 46%, #fff6 0, #ffd97733 18%, transparent 46%),
    repeating-conic-gradient(from 0deg at 50% 46%, #ffffff18 0 7deg, transparent 7deg 14deg),
    linear-gradient(165deg, #3a250c, #170d03 70%));
  border: 2px solid var(--don-border, var(--gold)); box-shadow: inset 0 0 0 1px #000a, 0 2px 4px #0008;
  transition: transform .25s, box-shadow .2s, margin .25s, opacity .25s;
}
.don-card::before { content: 'DON!!'; font: italic 800 calc(var(--dh) * .25)/1 'Barlow Condensed'; letter-spacing: -.5px; color: var(--don-text, var(--gold-2)); text-shadow: 0 1px 0 #0009, 0 2px 0 #0006, 0 0 8px var(--don-glow, #ffb20080); transform: rotate(-14deg); white-space: nowrap; display: var(--don-hide, block); }
.don-card::after { display: var(--don-hide, block); content: '+1000'; position: absolute; bottom: 4%; left: 0; right: 0; text-align: center; font: 700 calc(var(--dh) * .1)/1 'Barlow Condensed'; color: #ffe9b0b0; }
.has-ui-don .don-card { background: var(--ui-don) center / cover; }
.has-ui-don .don-card::before, .has-ui-don .don-card::after { display: none; }
.z-cost .don-card + .don-card { margin-left: clamp(calc(var(--dh) * -.62), calc((100% - 34px - var(--n, 1) * var(--dh) * .716) / max(1, var(--n, 1) - 1)), calc(var(--dh) * -.24)); }
.z-cost .don-card.rested { transform: rotate(90deg) scale(.9); filter: brightness(.6) saturate(.7); }
.z-cost .don-card:not(.rested) + .don-card.rested { margin-left: calc(var(--dh) * .1); }
.don-card::before { font-size: calc(var(--dh) * .22); }
.don-card.clickable { cursor: pointer; }
.don-card.clickable:hover, .don-card.armed { box-shadow: 0 0 0 2px var(--gold-2), 0 0 14px 3px #ffc94dcc; transform: translateY(-5px); z-index: 2; }
.don-card.armed { animation: donArmed 1s ease-in-out infinite; }
@keyframes donArmed { 50% { box-shadow: 0 0 0 2px #fff, 0 0 22px 6px #ffc94d; } }
.z-dond .don-card { --dh: calc(var(--ch) * .58); box-shadow: inset 0 0 0 1px #000a, 1px 1px 0 #c8962f, 2px 2px 0 #6b4a10, 3px 3px 0 #c8962f, 4px 5px 6px #000a; }
.don-count { position: absolute; top: 2px; right: 3px; font: 700 11px 'Barlow Condensed'; color: #4a1111; letter-spacing: .5px; z-index: 5; }
.don-count b { color: #1a5c22; }

/* ------------------------- cartas ------------------------- */
.card { width: var(--cw); height: var(--ch); box-sizing: content-box; flex: 0 0 auto; border-radius: 6px; position: relative; cursor: pointer; border: 2px solid transparent; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, filter .2s; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; background: #f3efe6; color: #1b1b1b; overflow: visible; }
.card img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; display: block; background: #111; pointer-events: none; }
.card .face { position: absolute; inset: 0; padding: 14px 4px 4px; font-size: 9px; overflow: hidden; border-radius: 5px; display: none; }
.card.noimg .face { display: block; }
.card.noimg img { display: none; }
.card .face::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 11px; background: var(--cc, #777); }
.card .face .nm { font: 700 12px/1.05 'Barlow Condensed'; margin-top: 8px; }
.card .face .tx { font-size: 7.5px; line-height: 1.15; margin-top: 3px; color: #333; max-height: 54%; overflow: hidden; }
.card .face .cst { position: absolute; top: 1px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font: 700 11px 'Barlow Condensed'; z-index: 1; }
.table .card:not(.back) { box-shadow: 0 3px 8px #0008; }
.card .pw { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); background: linear-gradient(#262626, #0b0b0b); color: #fff; font: 700 14px/1.25 'Barlow Condensed'; padding: 0 8px; border-radius: 10px; border: 1px solid var(--gold); z-index: 3; white-space: nowrap; box-shadow: 0 2px 5px #000a; letter-spacing: .3px; }
.card .pw.up { background: linear-gradient(#18a35f, #0b6b3c); border-color: #9dffcf; } .card .pw.down { background: linear-gradient(#c53030, #7d1515); border-color: #ffb0b0; }
.card .cbadge { position: absolute; top: -7px; left: -7px; background: #111; color: #fff; border: 1px solid #fff8; font: 700 12px 'Barlow Condensed'; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; z-index: 3; }
.card .cbadge.down { background: #0b7a45; }
.card .donb { position: absolute; top: -8px; right: -8px; background: linear-gradient(160deg, #4a300c, #170d03); border: 1.5px solid var(--gold); color: var(--gold-2); font: italic 800 12px/1.3 'Barlow Condensed'; padding: 0 5px; border-radius: 6px; z-index: 3; box-shadow: 0 2px 5px #000a; }
/* DON!! anexado: cartas DON!! enfiadas por baixo, aparecendo pela lateral */
.card .tuck { position: absolute; z-index: -1; left: 0; top: 0; pointer-events: none; --dh: var(--ch); }
.card .tuck .don-card { position: absolute; left: 0; top: 0; --dh: calc(var(--ch) * .96); border-width: 1.5px; }
.card .kw { position: absolute; top: 38%; left: -5px; display: flex; flex-direction: column; gap: 2px; z-index: 3; }
.card .kw span { background: linear-gradient(90deg, #1b1b1b, #3a2a0c); color: var(--gold-2); font: 700 9px/1.4 'Barlow Condensed'; padding: 0 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: .5px; border-left: 2px solid var(--gold); }
.card.rested { transform: rotate(90deg) scale(.86); }
.card.rested img { filter: brightness(.82) saturate(.85); }
.card.sick img { filter: saturate(.55) brightness(.85); }
.card.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 18px #f2b33d99, 0 8px 18px #0009; }
.card.cand { border-color: #5dffb0; box-shadow: 0 0 0 1px #5dffb0, 0 0 16px 3px #3ccf8ecc; animation: candPulse 1.2s ease-in-out infinite; }
@keyframes candPulse { 50% { box-shadow: 0 0 0 2px #b6ffda, 0 0 24px 6px #3ccf8e; } }
.card.attacking { border-color: #ff4040; box-shadow: 0 0 0 2px #ff4040, 0 0 24px 6px #ff2a2acc; }
.card.target { border-color: #ffb35c; box-shadow: 0 0 0 2px #ffb35c, 0 0 20px 4px #ff9a2acc; }
.card.back { border-radius: 6px; }
.slot { width: var(--cw); height: var(--ch); border: 1.5px dashed rgba(140, 40, 38, .35); border-radius: 6px; flex: 0 0 auto; background: rgba(255,255,255,.08); }

/* mão: leque levemente sobreposto */
.hand { --ch: var(--ch-hand); display: flex; gap: 0; overflow-x: auto; overflow-y: visible; padding: 14px 14px 8px; background: linear-gradient(#0b1322cc, #070d18); border: 1px solid var(--line); border-radius: 14px; min-height: calc(var(--ch) + 26px); flex: 0 0 auto; align-items: flex-end; scrollbar-width: thin; }
.hand .card { margin-left: calc(var(--cw) * -.12); }
.hand .card:first-child { margin-left: 0; }
.hand .card:hover, .hand .card.sel { transform: translateY(-12px) scale(1.06); z-index: 5; }
.hand .card.playable { box-shadow: 0 0 0 2px #5fb2ff, 0 0 12px #5fb2ff88, 0 4px 10px #0009; }
.hand .card.playable.sel { box-shadow: 0 0 0 2px var(--accent), 0 0 18px #f2b33d99; }
.hand > .hint { align-self: center; margin-left: 10px; }

/* ------------------------- laterais da partida ------------------------- */
.gl, .gr { background: linear-gradient(180deg, #17233aee, #101a2cee); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; box-shadow: 0 8px 24px #0007; }
.preview { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.preview img { width: 100%; max-height: 52vh; object-fit: contain; border-radius: 12px; box-shadow: 0 8px 22px #000a; }
.preview b { color: var(--text); }
.preview .txt { white-space: pre-line; color: #c9d2e3; margin-top: 4px; max-height: 18vh; overflow-y: auto; }
.gl h3 { margin: 4px 0 0; }
.log { margin: 0; padding-left: 18px; font-size: 11.5px; color: var(--muted); overflow-y: auto; flex: 1; min-height: 60px; }
.log li { margin-bottom: 2px; }
.log li.turnline { color: var(--accent); }
.log li.manual { color: #f5a7ff; }
.turn-info { font: 600 18px 'Barlow Condensed'; }
.turn-info b { color: var(--accent); }
.step { font: 700 34px/1 'Barlow Condensed'; color: #fff; text-shadow: 0 2px 10px #0008; min-height: 34px; background: linear-gradient(90deg, #fff, #ffe2a0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ptext { font-size: 13px; color: #d6deec; }
.ptext .eff { font-size: 12px; background: #0008; border-radius: 6px; padding: 6px 8px; margin: 6px 0; white-space: pre-line; max-height: 26vh; overflow-y: auto; }
.big-btns { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
button.big { font: 700 22px 'Barlow Condensed'; letter-spacing: .4px; padding: 12px 10px; background: linear-gradient(#efe0b4, #cfb983); color: #2a1d08; border: 2px solid #8a7444; border-radius: 12px; box-shadow: 0 4px 0 #6f5a2e, 0 6px 14px #0008; transition: transform .08s, filter .15s, box-shadow .08s; }
button.big:hover { filter: brightness(1.08); }
button.big:active { transform: translateY(3px); box-shadow: 0 1px 0 #6f5a2e, 0 2px 6px #0008; }
button.big.primary { background: linear-gradient(#ffd36b, #e9a325); border-color: #a5741c; box-shadow: 0 4px 0 #8a5d12, 0 0 18px #f2b33d55, 0 6px 14px #0008; }
button.big.attack { background: linear-gradient(#ff6a5a, #c92a2a); color: #fff; border-color: #8f2020; box-shadow: 0 4px 0 #6e1717, 0 0 18px #ff2a2a55, 0 6px 14px #0008; text-shadow: 0 1px 2px #0008; }
button.big.end { background: linear-gradient(#7a4848, #4e2a2a); color: #fff; border-color: #3a2222; box-shadow: 0 4px 0 #2a1818, 0 6px 14px #0008; }
.small-btns { display: flex; flex-wrap: wrap; gap: 5px; }
.small-btns button { font-size: 11.5px; padding: 4px 7px; }
.concede { font-size: 12px; opacity: .7; }
#btnLog, .log-close { display: none; }
.gl.open .log-close { display: block; align-self: flex-end; }

/* camadas de efeitos */
.arrow-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9; overflow: visible; }
.arrow-layer .shaft { stroke-dasharray: 18 12; animation: arrowFlow .6s linear infinite; filter: drop-shadow(0 0 6px #ff2a2a); }
@keyframes arrowFlow { to { stroke-dashoffset: -30; } }
.fx-layer, .anim-layer { position: fixed; inset: 0; pointer-events: none; z-index: 10; overflow: hidden; }
.anim-layer { z-index: 11; }
.bpow { position: absolute; transform: translate(-50%, -50%); font: italic 800 36px 'Barlow Condensed'; color: #fff; -webkit-text-stroke: 1.5px #b0124f; paint-order: stroke fill; text-shadow: 0 0 14px #ff2a7a, 0 3px 0 #6a0a2a; animation: bpowIn .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes bpowIn { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }
.vs-badge { position: absolute; transform: translate(-50%, -50%); font: italic 800 26px 'Barlow Condensed'; color: var(--gold-2); text-shadow: 0 0 10px #000, 0 2px 0 #000; }
.float-txt { position: absolute; transform: translate(-50%, -50%); font: italic 800 26px 'Barlow Condensed'; white-space: nowrap; paint-order: stroke fill; -webkit-text-stroke: 1px #000; text-shadow: 0 2px 6px #000a; }
.float-txt.up { color: #6dffb4; } .float-txt.down { color: #ff7a7a; } .float-txt.ko { font-size: 44px; color: #ffe066; -webkit-text-stroke: 2px #8a0b0b; text-shadow: 0 0 18px #ff3b3b, 0 4px 0 #5a0505; }
.float-txt.life { color: #ff8a8a; font-size: 30px; } .float-txt.don { color: var(--gold-2); font-size: 20px; }
.ghost { position: absolute; margin: 0; }
.ghost .tuck { display: none; }
.turn-banner { position: fixed; left: 0; right: 0; top: 42%; z-index: 12; pointer-events: none; display: grid; place-items: center; padding: 16px 0; background: linear-gradient(90deg, transparent, #0b111cf0 20%, #0b111cf0 80%, transparent); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.turn-banner b { font: italic 800 clamp(30px, 6vw, 64px)/1 'Barlow Condensed'; letter-spacing: 2px; color: var(--gold-2); text-shadow: 0 0 18px #e7b545aa, 0 3px 0 #5a3a05; }
.turn-banner.opp { border-color: #ff5d5d; } .turn-banner.opp b { color: #ffd0d0; text-shadow: 0 0 18px #ff3b3baa, 0 3px 0 #5a0505; }
.turn-banner small { display: block; text-align: center; font: 600 14px Inter; color: var(--muted); letter-spacing: 3px; margin-top: 6px; text-transform: uppercase; }
.shake { animation: shake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake { 15% { translate: -7px 2px; } 30% { translate: 6px -3px; } 45% { translate: -5px 1px; } 60% { translate: 4px 2px; } 80% { translate: -2px -1px; } }
.hit-flash { position: fixed; inset: 0; pointer-events: none; z-index: 13; background: radial-gradient(ellipse at center, transparent 40%, #ff1a1a66 100%); animation: hitFlash .6s ease-out forwards; }
@keyframes hitFlash { from { opacity: 1; } to { opacity: 0; } }
.zone.glow-life { animation: lifeGlow .9s ease-out; }
@keyframes lifeGlow { 30% { box-shadow: inset 0 0 0 2px #fff, 0 0 26px 6px #ff3b3b; } }
.zone.glow-gain { animation: gainGlow .9s ease-out; }
@keyframes gainGlow { 30% { box-shadow: inset 0 0 0 2px #fff, 0 0 26px 6px #3ccf8e; } }
.card.pulse-don { animation: pulseDon .7s ease-out; }
@keyframes pulseDon { 40% { box-shadow: 0 0 0 2px var(--gold-2), 0 0 26px 8px #ffc94d; } }

.ctx-menu { position: fixed; z-index: 40; background: #101a2c; border: 1px solid var(--accent); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 150px; box-shadow: 0 10px 30px #000c; }
.ctx-menu .ttl { font: 600 13px 'Barlow Condensed'; color: var(--accent); padding: 2px 4px; }
.ctx-menu button { text-align: left; font-size: 12px; padding: 4px 8px; }
.toast { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: #1d2a42; border: 1px solid var(--accent); padding: 10px 16px; border-radius: 10px; z-index: 50; max-width: 90vw; box-shadow: 0 10px 30px #000a; animation: toastIn .25s ease-out; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } }
.overlay { position: fixed; inset: 0; background: #000b; display: grid; place-items: center; z-index: 25; animation: fadeIn .2s ease-out; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
@keyframes fadeIn { from { opacity: 0; } }
.overlay .panel { text-align: center; max-width: 92vw; animation: popIn .28s cubic-bezier(.2,1.4,.4,1); }
@keyframes popIn { from { transform: scale(.85); opacity: 0; } }
.overlay .panel .row { justify-content: center; }
.trash-list { display: flex; flex-wrap: wrap; gap: 10px; max-width: 86vw; max-height: 72vh; overflow: auto; padding: 10px; --ch: 120px; justify-content: center; }
.zoom { position: fixed; z-index: 30; pointer-events: none; width: 250px; right: 40px; top: 16px; border-radius: 10px; box-shadow: 0 10px 40px #000c; }
/* tela de vitória */
.overlay.win { overflow: hidden; }
.overlay.win::before { content: ''; position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; translate: -50% -50%; background: repeating-conic-gradient(from 0deg, #e7b54522 0 8deg, transparent 8deg 16deg); animation: rays 18s linear infinite; pointer-events: none; }
.overlay.win.lost::before { background: repeating-conic-gradient(from 0deg, #ff3b3b14 0 8deg, transparent 8deg 16deg); }
@keyframes rays { to { rotate: 360deg; } }
.overlay.win .panel { position: relative; border-color: var(--gold); box-shadow: 0 0 60px #e7b54555, 0 20px 60px #000c; }
.win-title { font: italic 800 64px/1 'Barlow Condensed' !important; letter-spacing: 1px; animation: winPop .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes winPop { from { transform: scale(.3) rotate(-8deg); opacity: 0; } }
.confetti { position: fixed; top: -20px; width: 9px; height: 14px; z-index: 16; pointer-events: none; border-radius: 2px; }
/* visualização grande da carta (segurar no celular) */
.card-peek { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; background: #000d; animation: fadeIn .15s; }
.card-peek img { max-width: min(86vw, 420px); max-height: 66vh; border-radius: 14px; box-shadow: 0 10px 40px #000; }
.card-peek .txt { max-width: min(92vw, 520px); max-height: 24vh; overflow-y: auto; white-space: pre-line; font-size: 13px; color: #d6deec; background: #101a2c; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }

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

/* ---- tablet / notebook pequeno ---- */
@media (max-width: 1200px) and (min-width: 761px) {
  #game { grid-template-columns: 220px minmax(0, 1fr) 210px; }
  button.big { font-size: 19px; }
  .step { font-size: 28px; }
}
/* ---- celular em pé ---- */
@media (max-width: 760px) {
  #game {
    --ch: min(calc((100vw - 40px) / 6.6 / .716), calc((100dvh - 318px) / 5.75));
    --ch-hand: calc(var(--ch) * 1.12);
    display: flex; flex-direction: column; gap: 4px; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); overflow: hidden;
  }
  .gl { display: none; }
  .gl.open { display: flex; position: fixed; inset: 8px; z-index: 44; }
  .table { flex: 1 1 auto; gap: 3px; justify-content: center; }
  .mat { padding: 3px; gap: 3px; border-radius: 10px;
    grid-template-columns: calc(var(--cw) + 6px) minmax(0, 1fr) repeat(3, calc(var(--cw) + 6px));
    grid-template-rows: calc(var(--ch) + 6px) calc(var(--ch) + 6px) calc(var(--ch) * .6); }
  .mat.opp { grid-template-columns: repeat(3, calc(var(--cw) + 6px)) minmax(0, 1fr) calc(var(--cw) + 6px); grid-template-rows: calc(var(--ch) * .6) calc(var(--ch) + 6px) calc(var(--ch) + 6px); }
  .zone { padding: 1px; border-width: 1.5px; border-radius: 4px; }
  .zone > .num { display: none; }
  .zone > .lbl { font-size: 9px !important; letter-spacing: 1px; }
  .z-chars { padding-left: 3px; gap: 3px; justify-content: space-evenly; }
  .z-cost { padding: 1px 4px 1px 6px; }
  .z-life { padding-top: 4px; }
  .phases { gap: 2px; max-width: none; padding: 0 2px; }
  .phases div { font-size: 8px; line-height: 1.45; padding: 0 3px; letter-spacing: 0; }
  .card { border-width: 1.5px; border-radius: 4px; }
  .card img { border-radius: 3px; }
  .card .pw { font-size: 11px; padding: 0 5px; bottom: -6px; }
  .card .donb { font-size: 10px; top: -6px; right: -5px; padding: 0 3px; }
  .card .kw span { font-size: 7px; padding: 0 3px; }
  .card .cbadge { width: 16px; height: 16px; font-size: 10px; top: -5px; left: -5px; }
  .stack-count { font-size: 11px; padding: 0 4px; }
  .opp-hand { height: 22px; }
  .opp-hand .mini-back { width: 14px; height: 20px; margin-left: -4px; }
  .opp-hand .hint { font-size: 11px; }
  .hand { padding: 10px 8px 4px; min-height: calc(var(--ch) + 16px); border-radius: 10px; }
  .hand .card { margin-left: calc(var(--cw) * -.28); }
  .hand .card:hover { transform: none; }
  .hand .card.sel { transform: translateY(-10px) scale(1.04); }
  .gr { flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "info step" "prompt prompt" "btns btns" "small small" "foot foot"; gap: 4px 8px; padding: 6px 8px; border-radius: 12px; overflow: visible; }
  .turn-info { grid-area: info; font-size: 14px; line-height: 1.15; }
  .turn-info .hint { font-size: 10px; }
  .step { grid-area: step; font-size: 20px; min-height: 0; align-self: center; text-align: right; }
  .ptext { grid-area: prompt; font-size: 12px; max-height: 3.9em; overflow-y: auto; }
  .ptext .eff { max-height: 12vh; }
  .big-btns { grid-area: btns; flex-direction: row; flex-wrap: wrap; gap: 6px; margin: 0; }
  .big-btns button.big { flex: 1 1 30%; font-size: 16px; padding: 7px 6px; border-radius: 10px; box-shadow: 0 3px 0 #6f5a2e; }
  .small-btns { grid-area: small; }
  .g-foot { grid-area: foot; margin: 0; gap: 5px; }
  .g-foot button { padding: 3px 6px; font-size: 11px; }
  #btnLog { display: block; }
  .clock { font-size: 11px; margin-top: 1px; }
  .bpow { font-size: 24px; }
  .float-txt { font-size: 20px; } .float-txt.ko { font-size: 32px; }
  .zoom { display: none; }
  .win-title { font-size: 46px !important; }
}
/* ---- celular deitado ---- */
@media (max-height: 520px) and (orientation: landscape) {
  #game { --ch: calc((100dvh - 30px) / 7); --ch-hand: calc(var(--ch) * .95); grid-template-columns: minmax(0, 1fr) 200px; gap: 6px; padding: 4px; }
  .gl { display: none; }
  .gl.open { display: flex; position: fixed; inset: 8px; z-index: 44; }
  .opp-hand { display: none; }
  .table { gap: 2px; }
  .mat { padding: 3px; gap: 3px; grid-template-rows: calc(var(--ch) + 4px) calc(var(--ch) + 4px) calc(var(--ch) * .55); }
  .mat.opp { grid-template-rows: calc(var(--ch) * .55) calc(var(--ch) + 4px) calc(var(--ch) + 4px); }
  .zone > .num { display: none; }
  .zone > .lbl { font-size: 10px !important; }
  .phases div:not(.on) { display: none; }
  .phases div.on { font-size: 10px; }
  .hand { padding: 6px 6px 2px; min-height: calc(var(--ch) + 10px); }
  .hand .card { margin-left: calc(var(--cw) * -.2); }
  .gr { padding: 6px; gap: 4px; }
  .step { font-size: 20px; min-height: 0; }
  .turn-info { font-size: 14px; }
  button.big { font-size: 15px; padding: 6px; }
  .big-btns { gap: 5px; }
  #btnLog { display: block; }
}

/* ------------------------- login / topbar ------------------------- */
.topbar { max-width: 1100px; margin: 0 auto; display: flex; gap: 8px; align-items: center; justify-content: flex-end; color: var(--muted); }
.topbar span { margin-right: auto; }
.topbar b { color: var(--accent); }
#loginForm { max-width: 360px; }
#loginForm label { text-align: left; }
button.danger { background: #3b2020; border-color: #6a3030; }

/* ------------------------- editor de decks ------------------------- */
#editor { display: grid; grid-template-columns: 330px 1fr; gap: 10px; padding: 8px; height: 100vh; }
button.tan, label.tan { background: #d9c79a; color: #2a1d08; border: 2px solid #8a7444; border-radius: 8px; box-shadow: 0 3px 0 #7a6436; font: 600 18px 'Barlow Condensed'; padding: 8px 10px; text-align: center; cursor: pointer; }
button.tan:hover, label.tan:hover { filter: brightness(1.07); }
button.tan:active { transform: translateY(2px); box-shadow: 0 1px 0 #7a6436; }
.tan.sm { font-size: 14px; padding: 6px 6px; line-height: 1.1; margin: 0; }
.tan.big2 { font-size: 22px; flex: 1; }
.ed-side { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.ed-pair { display: flex; gap: 8px; }
.ed-pair select, .ed-pair input { flex: 1; font-size: 16px; }
.ed-pair.bottom { margin-top: auto; }
.ed-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filebtn input { display: none; }
.ed-status { color: var(--good); font-size: 13px; min-height: 1em; }
.ed-help { font-size: 12.5px; color: var(--muted); }
.ed-help p { margin: 0 0 8px; }
.ed-help b { color: var(--text); }
.ed-main { display: grid; grid-template-rows: minmax(200px, 42%) auto 1fr; gap: 8px; min-height: 0; }
.ed-deckarea { position: relative; background: #0b1322; border: 1px solid var(--line); border-radius: 12px; overflow-y: auto; padding: 10px 10px 18px; }
.ed-total { position: sticky; top: 0; float: right; font: 700 32px 'Barlow Condensed'; z-index: 5; text-shadow: 0 2px 6px #000; }
.ed-total.ok { color: var(--good); }
.ed-total.over { color: var(--bad); }
.ed-deck-cards { --ch: 132px; display: flex; flex-wrap: wrap; gap: 14px 22px; padding-right: 70px; }
.stack { position: relative; cursor: pointer; }
.stack .card { position: absolute; top: 0; left: 0; }
.stack .card:hover { transform: none; }
.stack .qty { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #1a1205; font: 700 14px 'Barlow Condensed'; border-radius: 9px; padding: 0 8px; z-index: 6; box-shadow: 0 1px 4px #000a; }
.stack.leader .card { box-shadow: 0 0 0 2px var(--accent); }
.ed-filters { display: grid; grid-template-columns: repeat(5, auto) 1fr; grid-auto-flow: row; gap: 6px 16px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.ed-filters .ed-q { grid-row: span 2; font-size: 16px; }
.ed-filters #edCount { grid-column: 6; }
.chk { display: flex; gap: 6px; align-items: center; margin: 0; white-space: nowrap; font-size: 14px; color: var(--text); }
.chk input { width: 18px; height: 18px; margin: 0; }
.c-red { color: #ff7a80; } .c-blue { color: #79a8ff; } .c-black { color: #c4c9d2; } .c-green { color: #5fd58f; } .c-purple { color: #c08cff; } .c-yellow { color: #f2d45c; }
.ed-results { --ch: 150px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--cw) + 6px), 1fr)); gap: 8px; padding: 8px; background: #0b1322; border: 1px solid var(--line); border-radius: 12px; align-content: start; min-height: 0; }
.ed-results .card { justify-self: center; }
.ed-results .card .inDeck { position: absolute; top: -6px; right: -6px; background: var(--accent); color: #1a1205; font: 700 13px 'Barlow Condensed'; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; z-index: 3; box-shadow: 0 1px 4px #0008; }
.ed-results.nocounts .inDeck { display: none; }
.ed-results .sentinel { grid-column: 1 / -1; height: 20px; }
@media (max-width: 1000px) {
  #editor { grid-template-columns: 1fr; height: auto; }
  .ed-main { grid-template-rows: auto auto 70vh; }
  .ed-filters { grid-template-columns: repeat(3, auto); }
  .ed-filters .ed-q { grid-column: 1 / -1; grid-row: auto; }
  .ed-results { --ch: 110px; }
  .ed-deck-cards { --ch: 96px; }
}

/* ------------------------- Coliseu / navegação ------------------------- */
#lobby { min-height: 100vh; }
.topnav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 4px; padding: 10px 18px; background: #0a101b; border-bottom: 1px solid var(--line); }
.topnav .logo { font: 700 24px 'Barlow Condensed'; margin-right: 18px; }
.topnav a { color: var(--muted); text-decoration: none; padding: 7px 12px; border-radius: 8px; font-weight: 500; cursor: pointer; }
.topnav a:hover { color: var(--text); background: #18243a; }
.topnav a.on { color: #1a1205; background: var(--accent); }
.nav-right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.conn { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.conn::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.conn.ok::before { background: var(--good); box-shadow: 0 0 6px var(--good); }
.conn.bad::before { background: var(--bad); }
.who b { color: var(--accent); }
.page { padding: 18px; max-width: var(--wide); margin: 0 auto; }
.col-layout { display: grid; grid-template-columns: 1fr 320px; gap: 18px; }
.col-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.col-head h1 { margin: 0; font-size: 36px; }
.col-head .hint { margin-left: auto; }
.equip { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.equip-l { display: flex; gap: 12px; align-items: center; --ch: 110px; min-width: 260px; }
.equip-l .slot { display: grid; place-items: center; color: var(--muted); font-size: 11px; text-align: center; border-color: var(--line); }
.equip-r { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.equip-r select { font-size: 15px; }
.queue { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; border-color: var(--accent); }
.queue button { margin-left: auto; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff2; border-top-color: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.mode { position: relative; overflow: hidden; background: linear-gradient(160deg, #1d2c48, #141e31); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.mode::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--mc, var(--accent)); }
.mode h3 { margin: 0; font-size: 26px; }
.mode p { margin: 0; color: var(--muted); font-size: 13px; flex: 1; }
.mode .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.mode .tags span { font-size: 11px; background: #0b1322; border: 1px solid var(--line); padding: 1px 8px; border-radius: 10px; color: var(--muted); }
.mode .row { margin: 0; }
.mode label { margin: 0; }
.mode button.tan { width: 100%; font-size: 20px; }
.mode .row button.tan { width: auto; flex: 0 0 auto; }
.mode .row input { flex: 1; }
.m-ranked { --mc: #f2b33d; } .m-friendly { --mc: #3ccf8e; } .m-private { --mc: #5fb2ff; } .m-solo { --mc: #c08cff; } .m-ai { --mc: #ff6b6b; }
.col-side { display: flex; flex-direction: column; gap: 14px; }
.col-side h3 { margin: 0 0 8px; }
.me-name { font: 700 26px 'Barlow Condensed'; margin-bottom: 8px; }
.me-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.me-stats b { display: block; font: 700 22px 'Barlow Condensed'; color: var(--accent); }
.me-stats span { font-size: 11px; color: var(--muted); }
.history { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.hist { display: flex; gap: 10px; align-items: center; font-size: 12.5px; background: #0e1828; border-radius: 8px; padding: 6px 8px; border-left: 3px solid var(--muted); }
.hist b { font: 700 18px 'Barlow Condensed'; width: 16px; }
.hist.w { border-left-color: var(--good); } .hist.w b { color: var(--good); }
.hist.l { border-left-color: var(--bad); } .hist.l b { color: var(--bad); }
.hist small { color: var(--muted); }
.mini-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #ffffff0d; }
.mini-row b { color: var(--accent); }
.link { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--accent); cursor: pointer; }
/* biblioteca */
.lib-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.lib-bar input { flex: 1; font-size: 15px; }
.lib-layout { display: grid; grid-template-columns: 1fr 340px; gap: 14px; height: calc(100vh - 150px); }
.lib-grid { --ch: 160px; height: 100%; }
.lib-view { overflow-y: auto; }
.lib-view img { width: 100%; border-radius: 10px; }
.lib-view .txt { white-space: pre-line; font-size: 13px; color: #c9d2e3; }
/* meta */
.meta-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.meta-grid > div { display: flex; flex-direction: column; gap: 14px; }
.meta-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid #ffffff0d; }
.meta-row img { width: 46px; border-radius: 4px; }
.mr-txt { flex: 1; }
.bar { height: 8px; background: #0b1322; border-radius: 4px; overflow: hidden; margin: 4px 0; flex: 1; }
.bar div { height: 100%; border-radius: 4px; }
.meta-color { display: flex; gap: 10px; align-items: center; margin: 6px 0; }
.meta-color span { width: 80px; }
.fs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: center; }
.fs b { display: block; font: 700 40px 'Barlow Condensed'; color: var(--accent); }
.fs span { font-size: 12px; color: var(--muted); }
/* ranking */
table.rank { width: 100%; border-collapse: collapse; }
table.rank th, table.rank td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #ffffff12; }
table.rank th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; }
table.rank tr.mine td { background: #f2b33d1a; }
table.rank td b { color: var(--accent); }
/* partida */
.g-foot { margin: 0; flex-wrap: wrap; }
.g-foot button { font-size: 12px; padding: 5px 8px; flex: 1; }
.win-title { font-size: 48px; }
.win-title.good, .elo-change.good { color: var(--good); }
.win-title.bad, .elo-change.bad { color: var(--bad); }
.elo-change { font: 700 28px 'Barlow Condensed'; margin: 0 0 10px; }
@media (max-width: 1000px) {
  .col-layout, .meta-grid, .lib-layout { grid-template-columns: 1fr; }
  .lib-layout { height: auto; }
  .lib-grid { height: 60vh; --ch: 120px; }
  .topnav { flex-wrap: wrap; }
  .nav-right { width: 100%; justify-content: flex-end; }
  .equip { flex-direction: column; align-items: stretch; }
}

/* ------------------------- biblioteca v2 ------------------------- */
.lib-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.lib-head h1 { margin: 0; font-size: 36px; }
.lib-count { color: var(--accent); font: 600 18px 'Barlow Condensed'; }
.lib-bar { flex-wrap: wrap; }
.lib-bar input#libQ { flex: 1 1 280px; }
.lib-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-filters select { width: auto; padding: 6px 8px; font-size: 13px; }
.lib-filters select.active { border-color: var(--accent); color: var(--accent); }
.lib-filters .clear { font-size: 12px; }
.view-toggle { font-size: 18px; padding: 4px 10px; }
.lib-grid.list { display: flex; flex-direction: column; gap: 2px; }
.lib-row { display: grid; grid-template-columns: 34px 1fr 46px 90px 1.2fr; gap: 10px; align-items: center; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.lib-row:hover { background: #18243a; }
.lib-row img { width: 34px; border-radius: 3px; }
.lr-rar { font: 700 12px 'Barlow Condensed'; text-align: center; border-radius: 4px; padding: 1px 4px; background: #263755; }
.r-SR, .r-SEC { background: #f2b33d; color: #1a1205; } .r-L { background: #c8323a; } .r-R { background: #2564c4; } .r-P { background: #7a3bb5; }
.lr-id { color: var(--muted); font-family: monospace; }
.lr-meta { color: var(--muted); font-size: 12px; }
/* ------------------------- meta v2 ------------------------- */
.meta-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 12px; }
.seg { display: inline-flex; background: #0e1828; border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 6px 12px; font-size: 13px; }
.seg button.on { background: var(--accent); color: #1a1205; font-weight: 600; }
.seg.tabs { margin-bottom: 12px; }
.inl { display: flex; gap: 6px; align-items: center; margin: 0; color: var(--muted); }
.inl select { width: auto; margin: 0; }
.tier { margin-bottom: 12px; border-left: 4px solid var(--muted); }
.tier.good { border-left-color: var(--good); } .tier.bad { border-left-color: var(--bad); }
.tier-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.tier-card { display: flex; gap: 10px; background: #0e1828; border-radius: 10px; padding: 8px; }
.tier-card img { width: 64px; border-radius: 5px; }
.tier-card > div { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.tier-card small { color: var(--muted); }
.meta-t td { vertical-align: middle; }
.meta-t .wr b { color: var(--text); }
.meta-t .wr small { display: block; color: var(--muted); font-size: 11px; }
.lc { display: flex; gap: 8px; align-items: center; }
.lc img { width: 36px; border-radius: 4px; }
.mu-wrap { overflow: auto; }
.mu-t { border-collapse: collapse; font-size: 12px; }
.mu-t th { padding: 4px; font-weight: 500; color: var(--muted); }
.mu-t thead th img { width: 34px; display: block; margin: 0 auto 2px; border-radius: 3px; }
.mu-t thead th span { font-size: 10px; }
.mu-t td.mu { width: 52px; height: 42px; text-align: center; font-weight: 700; border: 1px solid #0b1322; }
.mu-t td.mu small { display: block; font-weight: 400; font-size: 10px; opacity: .8; }
.mu-t td.none { color: #ffffff30; }

/* ------------------------- login / cadastro ------------------------- */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(ellipse at 30% 20%, #3a1d2a 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, #1a2f5a 0%, transparent 55%), var(--bg); }
.auth-card { display: grid; grid-template-columns: 1fr 380px; max-width: 860px; width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px #000a; }
.auth-brand { padding: 36px; background: linear-gradient(160deg, #c8323a33, #f2b33d22); display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.auth-logo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #4fc3ff55, 0 0 34px #2aa8ff66; align-self: flex-start; }
.auth-brand h1 { font-size: 44px; margin: 0; }
.auth-brand p { margin: 0; color: #d6deec; }
.auth-form { padding: 32px; display: flex; flex-direction: column; gap: 4px; }
.auth-form h2 { font-size: 30px; }
.auth-btn { width: 100%; padding: 12px; font-size: 16px; margin-top: 6px; }
.auth-terms { font-size: 12.5px; color: var(--muted); margin: 6px 0; }
.auth-switch { font-size: 13px; color: var(--muted); text-align: center; margin: 8px 0 0; }
.auth-switch a { color: var(--accent); }
.auth-foot { margin-top: 14px; }
.auth-foot a { color: var(--muted); }
.auth-safe { margin-top: 14px; padding: 12px 14px; border: 1px solid #3ccf8e55; background: #3ccf8e14; border-radius: 12px; font-size: 13px; }
.auth-safe b { color: var(--good); }
.auth-safe ul { margin: 6px 0 6px 18px; padding: 0; color: #d6deec; }
.auth-safe li { margin: 2px 0; }
.auth-safe a { color: var(--good); font-weight: 600; }
.auth-terms { white-space: normal; align-items: flex-start; }
.auth-terms a { color: var(--accent); }
.pw { position: relative; display: block; }
.pw input { width: 100%; padding-right: 40px; box-sizing: border-box; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 4px 8px; cursor: pointer; opacity: .55; font-size: 15px; }
.pw-eye.on, .pw-eye:hover { opacity: 1; }
.pw-meter { display: flex; align-items: center; gap: 8px; margin: -2px 0 4px; min-height: 14px; }
.pw-meter i { flex: 1; height: 4px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; }
.pw-meter i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; transition: width .2s, background .2s; }
.pw-meter[data-lv="1"] i::after { width: 20%; background: var(--bad); }
.pw-meter[data-lv="2"] i::after { width: 45%; background: #f08a3d; }
.pw-meter[data-lv="3"] i::after { width: 72%; background: var(--accent); }
.pw-meter[data-lv="4"] i::after { width: 100%; background: var(--good); }
.pw-meter span { font-size: 11px; color: var(--muted); min-width: 70px; text-align: right; }
.auth-btn:disabled { opacity: .6; cursor: wait; }
.rec-dlg { max-width: 440px; }
.code-in { font: 700 26px/1 ui-monospace, Consolas, monospace; letter-spacing: 10px; text-align: center; }
.auth-switch a.off { opacity: .5; pointer-events: none; }
#recSend { margin: 4px 0 6px; }
.rec-dlg h2 { margin-top: 0; }
.rec-code { font: 700 24px/1.2 ui-monospace, Consolas, monospace; letter-spacing: 2px; text-align: center; padding: 14px; margin: 10px 0; border: 2px dashed var(--accent); border-radius: 10px; background: #0006; user-select: all; word-break: break-all; }
.rec-dlg .row { margin: 8px 0; }
.acc-safe a { color: var(--good); }
.auth-discord { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding: 11px 14px; border-radius: 12px; background: #5865f2; color: #fff; text-decoration: none; transition: filter .15s, transform .15s; }
.auth-discord:hover { filter: brightness(1.12); transform: translateY(-1px); }
.auth-discord b { font-size: 14px; }
.auth-discord b::before { content: '💬 '; }
.auth-discord span { font-size: 12px; opacity: .85; }
.auth-form .hint a { color: var(--accent); }
.discord-btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 6px 11px; border-radius: 999px; background: #5865f2; color: #fff !important; font-weight: 600; font-size: 13px; text-decoration: none; }
.discord-btn:hover { filter: brightness(1.12); }
.discord-btn i { font-style: normal; }
.nav-right .who { white-space: nowrap; }
@media (max-width: 1500px) { .discord-btn span { display: none; } .discord-btn { padding: 6px 9px; } }
@media (max-width: 800px) { .auth-card { grid-template-columns: 1fr; } .auth-brand { padding: 22px; } }

/* ------------------------- deck builder v2 ------------------------- */
.ed-deckbar { position: sticky; top: -10px; z-index: 6; display: flex; gap: 8px; align-items: center; background: #0b1322; padding: 4px 0 8px; }
.ed-deckbar button { font-size: 13px; padding: 5px 10px; }
.ed-deckbar button.on { border-color: var(--accent); color: var(--accent); }
.ed-deckbar .ed-total { float: none; position: static; margin-left: auto; }
.valid-badge { font: 600 13px Inter; padding: 4px 10px; border-radius: 12px; }
.valid-badge.ok { background: #3ccf8e26; color: var(--good); }
.valid-badge.bad { background: #ff5d5d26; color: var(--bad); cursor: help; }
.ed-stats-panel { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 16px; background: #111b2d; border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.st-col h4 { margin: 0 0 6px; font: 600 15px 'Barlow Condensed'; }
.st-col h4 small { color: var(--muted); font-weight: 400; }
.st-curve { display: flex; gap: 3px; align-items: flex-end; height: 90px; }
.st-curve div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 10px; }
.st-curve i { display: block; width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; }
.st-curve span { color: var(--muted); }
.sbar { display: grid; grid-template-columns: 110px 1fr 28px; gap: 6px; align-items: center; font-size: 12px; margin: 3px 0; }
.sbar div { height: 8px; background: #0b1322; border-radius: 4px; overflow: hidden; }
.sbar i { display: block; height: 100%; border-radius: 4px; }
.sbar b { text-align: right; }
@media (max-width: 1000px) { .ed-stats-panel { grid-template-columns: 1fr 1fr; } }

/* ------------------------- biblioteca v3 (estilo card list) ------------------------- */
.lib-head .hint { margin-left: 8px; }
.lib-panel { background: #0f1828; border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.lib-panel .lib-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.lib-search { display: flex; align-items: center; gap: 6px; background: #0b1322; border: 1px solid var(--line); border-radius: 22px; padding: 0 12px; flex: 0 1 280px; }
.lib-search input { border: 0; background: transparent; padding: 9px 4px; }
.lib-search input:focus { outline: none; }
.lib-filters select { border-radius: 20px; padding: 8px 12px; background: #131e31; }
.lib-alt { font-size: 13px; color: var(--muted); }
.lib-size { width: auto; margin-left: auto; border-radius: 20px; }
.lib-grid2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(var(--tile, 230px), 1fr)); }
.lib-grid2.size-auto { --tile: clamp(170px, 16vw, 260px); }
.lib-grid2.size-lg { --tile: 300px; }
.lib-grid2.size-md { --tile: 200px; }
.lib-grid2.size-sm { --tile: 140px; }
.lib-grid2.size-list { display: flex; flex-direction: column; gap: 2px; }
.lib-grid2 .sentinel { grid-column: 1 / -1; height: 10px; }
.lib-tile { background: #141f33; border: 1px solid #ffffff10; border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.lib-tile:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 26px #000a; }
.lt-img { position: relative; aspect-ratio: 63 / 88; background: #0b1322; }
.lt-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lt-fallback { display: none; position: absolute; inset: 0; padding: 12px; color: var(--muted); font-size: 13px; }
.lt-img.noimg img { display: none; }
.lt-img.noimg .lt-fallback { display: block; }
.lt-cap { padding: 8px 10px 10px; }
.lt-top { display: flex; justify-content: space-between; align-items: center; }
.r-txt { font: 700 12px 'Barlow Condensed'; color: var(--accent); }
.lt-name { font-weight: 600; font-size: 14px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-id { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); }
.dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.dots i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; border: 1px solid #ffffff30; }
.alt { font-size: 10.5px; background: #3a2d10; color: var(--accent); padding: 1px 6px; border-radius: 6px; font-family: Inter; }
/* modal da carta */
.overlay.card-modal { align-items: center; padding: 20px; }
.cm { position: relative; width: min(1100px, 92vw); max-height: 92vh; overflow-y: auto; background: #0f1828; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 80px #000d; text-align: left; }
.cm-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.cm-code { font: 600 16px ui-monospace, monospace; color: var(--accent); }
.cm-x { background: transparent; border: 0; font-size: 18px; color: var(--muted); }
.cm-body { display: grid; grid-template-columns: 340px 1fr; gap: 26px; padding: 22px; }
.cm-img img { width: 100%; border-radius: 14px; box-shadow: 0 10px 30px #000b; display: block; }
.cm-print { margin-top: 12px; font-size: 12px; color: var(--muted); letter-spacing: 1px; background: #131e31; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.cm-print b { color: var(--accent); }
.cm-right h2 { font: 600 36px Georgia, 'Times New Roman', serif; margin: 0 0 4px; letter-spacing: 0; }
.cm-sub { color: var(--muted); font-size: 14px; }
.cm-stats { display: flex; gap: 28px; margin: 18px 0 8px; }
.cm-stat span { display: block; font-size: 11px; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.cm-stat b { font: 600 24px ui-monospace, monospace; }
.cm-sec { font-size: 11px; letter-spacing: 1.5px; color: var(--muted); margin: 16px 0 6px; }
.cm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-chips span { border: 1px solid var(--line); background: #131e31; border-radius: 8px; padding: 5px 12px; font-size: 13px; }
.cm-eff { font-size: 15px; line-height: 1.7; }
.tg { display: inline-block; border-radius: 5px; padding: 0 7px; font-size: 13px; font-weight: 600; line-height: 1.5; color: #fff; }
.tg-time { background: #1f6fbf; }
.tg-opt { background: #d1406f; }
.tg-don { background: #111; border: 1px solid #fff4; }
.tg-trig { background: #e6c13a; color: #1a1205; }
.tg-ctr { background: #c8323a; }
.tg-kw { background: #e07a1f; }
.tg-type { color: #9fc4ff; }
.reminder { color: var(--muted); font-style: italic; font-size: 13px; }
.cm-engine { margin-top: 10px; font-size: 12.5px; }
.cm-engine.yes { color: var(--good); } .cm-engine.partial { color: var(--accent); } .cm-engine.none { color: var(--muted); }
.cm-prints { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cm-pr { border: 2px solid transparent; border-radius: 10px; padding: 4px; cursor: pointer; background: #131e31; font-size: 12px; color: var(--muted); }
.cm-pr img { width: 100%; border-radius: 6px; display: block; margin-bottom: 4px; aspect-ratio: 63 / 88; object-fit: contain; }
.cm-pr.on { border-color: var(--accent); }
.cm-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; font-size: 30px; line-height: 1; background: #0f1828; border: 1px solid var(--line); z-index: 16; }
.cm-nav.prev { left: max(10px, calc(50vw - 610px)); }
.cm-nav.next { right: max(10px, calc(50vw - 610px)); }
.cm-nav:disabled { opacity: .3; }
@media (max-width: 800px) { .cm-body { grid-template-columns: 1fr; } .cm-img { max-width: 320px; margin: 0 auto; } .cm-nav { display: none; } }
.who { cursor: pointer; color: var(--text); text-decoration: none; }
.who:hover { text-decoration: underline; }
.panel.account { width: min(440px, 92vw); text-align: left; }
.acc-grid { display: grid; grid-template-columns: 90px 1fr; gap: 4px 10px; font-size: 13px; margin-bottom: 12px; }
.acc-grid span { color: var(--muted); }
.panel.account h3 { margin: 14px 0 6px; }
.card .info-btn { position: absolute; top: 4px; left: 4px; z-index: 7; width: 26px; height: 26px; padding: 0; border-radius: 50%; font-size: 13px; background: #0f1828e6; border: 1px solid var(--accent); display: none; }
.card:hover .info-btn { display: block; }
.ed-help .info-hint { color: var(--accent); }

.clock { margin-top: 4px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted, #9fb0c8); }
.clock.low { color: #ff5a5a; animation: clockPulse 1s infinite; }
@keyframes clockPulse { 50% { opacity: .55; } }

#bigBtns button.opt { white-space: normal; text-align: left; font-size: 13px; line-height: 1.25; padding: 8px 10px; }

.mini-btn { margin-left: auto; padding: 3px 8px; font-size: 12px; align-self: center; }
.hist { display: flex; gap: 8px; align-items: flex-start; }
#oppHand .card.mini-open { --ch: 64px; }

/* ------------------------- polimento geral (v0.9) ------------------------- */
body { background: radial-gradient(ellipse at 15% -10%, #2a1a3a 0%, transparent 45%), radial-gradient(ellipse at 90% 0%, #1a3358 0%, transparent 50%), var(--bg); }
.topnav { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: #0a101bd9; }
.topnav .logo { background: linear-gradient(90deg, #fff, #ffd977); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.topnav .logo .tag { -webkit-text-fill-color: #1a1205; }
.topnav a { transition: background .15s, color .15s; }
.mode { transition: transform .18s, box-shadow .18s, border-color .18s; }
.mode:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--mc) 60%, var(--line)); box-shadow: 0 12px 28px #0008, 0 0 0 1px color-mix(in srgb, var(--mc) 35%, transparent); }
.mode::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--mc) 22%, transparent), transparent 70%); pointer-events: none; }
button.tan, label.tan { background: linear-gradient(#efe0b4, #cfb983); transition: transform .08s, filter .15s, box-shadow .08s; }
.panel { box-shadow: 0 8px 24px #0005; }
@media (max-width: 760px) {
  .topnav { flex-wrap: wrap; padding: 8px 10px; gap: 2px; row-gap: 6px; }
  .topnav .logo { font-size: 20px; margin-right: auto; order: 0; }
  .nav-right { order: 1; width: auto; margin-left: 0; gap: 8px; font-size: 12px; }
  .nav-right .conn { display: none; }
  .nav-right button { padding: 4px 8px; font-size: 12px; }
  .topnav a[data-page] { order: 2; padding: 6px 10px; font-size: 13.5px; }
  .topnav { overflow-x: auto; }
  .page { padding: 12px; }
  .col-head { flex-wrap: wrap; gap: 6px 10px; }
  .col-head h1 { font-size: 28px; }
  .col-head .hint { margin-left: 0; width: 100%; }
  .equip { flex-direction: row; align-items: center; gap: 12px; padding: 12px; }
  .equip-l { --ch: 92px; min-width: 0; flex: 0 0 auto; }
  .equip-l > div:not(.card):not(.slot) { display: none; }
  .modes { grid-template-columns: 1fr; gap: 10px; }
  .mode { padding: 12px 14px; }
  .mode h3 { font-size: 22px; }
  .lib-grid2.size-auto { --tile: 46vw; }
  .lib-grid2 { gap: 10px; }
  .lt-cap { padding: 6px 8px; }
  .cm-body { padding: 14px; gap: 14px; }
  .cm-right h2 { font-size: 26px; }
  .overlay .panel { padding: 14px; }
  table.rank th, table.rank td { padding: 6px; font-size: 12.5px; }
  .ed-filters { gap: 6px; }
  .auth-brand h1 { font-size: 34px; }
}
@media (max-width: 760px) {
  .topnav a[data-page] { padding: 5px 8px; font-size: 13px; }
  #editor { grid-template-columns: minmax(0, 1fr); padding: 6px; gap: 8px; }
  .ed-side, .ed-main, .ed-deckarea, .ed-results, .ed-filters { min-width: 0; }
  .ed-side { padding: 10px; gap: 8px; }
  .ed-pair select, .ed-pair input { min-width: 0; font-size: 15px; }
  .ed-pair button.tan { flex: 0 0 auto; }
  .ed-grid2 { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .tan.sm { font-size: 12.5px; padding: 6px 4px; }
  .ed-help { display: none; }
  .tan.big2 { font-size: 17px; }
  .ed-deckbar { flex-wrap: wrap; }
  .ed-deck-cards { --ch: 84px; gap: 12px 14px; padding-right: 0; }
  .ed-results { --ch: 104px; grid-template-columns: repeat(auto-fill, minmax(calc(var(--cw) + 4px), 1fr)); }
  .ed-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
  .ed-filters #edCount { grid-column: auto; }
}
.z-cost:has(.don-card) > .lbl { display: none; }
.don-count { font-size: 13px; top: 3px; right: 6px; }

/* esconder o painel da esquerda (computador) */
.hide-left-btn { align-self: flex-start; font-size: 11.5px; padding: 3px 9px; opacity: .75; }
.hide-left-btn:hover { opacity: 1; }
.show-left-btn { display: none; position: fixed; left: 0; top: 50%; translate: 0 -50%; z-index: 8; padding: 18px 5px; border-radius: 0 10px 10px 0; border-left: 0; font-size: 13px; opacity: .8; }
.show-left-btn:hover { opacity: 1; }
@media (min-width: 761px) and (min-height: 521px) {
  #game.hide-left { grid-template-columns: minmax(0, 1fr) 250px; padding-left: 26px; }
  #game.hide-left .gl:not(.open) { display: none; }
  #game.hide-left .show-left-btn { display: block; }
}
@media (max-width: 1200px) and (min-width: 761px) and (min-height: 521px) { #game.hide-left { grid-template-columns: minmax(0, 1fr) 210px; } }
@media (max-width: 760px), (max-height: 520px) { .hide-left-btn { display: none; } }

/* ------------------------- v0.10: economia, loja, coleção, trocas ------------------------- */
.berries { font: 700 15px 'Barlow Condensed'; color: #1a1205; background: linear-gradient(#ffe08a, #e7b545); padding: 3px 10px; border-radius: 20px; box-shadow: 0 0 0 1px #8a5d12, 0 2px 8px #e7b54544; letter-spacing: .3px; white-space: nowrap; }
.berries.bump { animation: bump .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes bump { 40% { transform: scale(1.18); } }
.topnav a[data-badge]:not([data-badge=""])::after { content: attr(data-badge); margin-left: 5px; background: var(--bad); color: #fff; font: 700 11px/1 Inter; padding: 2px 6px; border-radius: 10px; vertical-align: 1px; }
.mat.dark-mat .phases div { background: #ffffff22; }
.mat.dark-mat .slot { border-color: #ffffff30; background: #ffffff08; }
.mat.dark-mat .don-count { color: #e8edf5; } .mat.dark-mat .don-count b { color: #6dffb4; }
@keyframes cos-holo { 0%, 100% { background-position: 0% 50%, 0 0; } 50% { background-position: 100% 50%, 0 0; } }
@keyframes cos-holo2 { 0%, 100% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } }
@keyframes cos-pulse { 50% { filter: brightness(1.25) saturate(1.2); } }
@keyframes cos-flame { 50% { filter: brightness(1.2) hue-rotate(-8deg); } }
@keyframes cos-flash { 0%, 86%, 100% { filter: none; } 90% { filter: brightness(2.2); } }
/* brilho holográfico das cartas AA / SP / TR */
.card.foil::after, .iv-card.foil::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 20%, #ff5fa233 32%, #ffe68044 40%, #6dffb433 48%, #5fb2ff44 56%, transparent 68%); background-size: 250% 250%; mix-blend-mode: color-dodge; animation: foil 4.5s ease-in-out infinite; }
@keyframes foil { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 100%; } }
/* visual dos itens */
.iv { position: relative; display: grid; place-items: center; }
.iv-card { aspect-ratio: 63 / 88; width: 100%; border-radius: 6px; overflow: hidden; background: #0b1322; box-shadow: 0 4px 12px #0008; }
.iv-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-card.noimg { padding: 8px; font: 600 13px 'Barlow Condensed'; color: var(--muted); text-align: center; }
.iv-don { aspect-ratio: 63 / 88; width: 100%; --ch: 160px; }
.iv-don .don-card { --dh: 100%; width: 100%; height: 100%; border-radius: 8px; }
.iv-don .don-card::before { font-size: clamp(16px, 3.2vw, 34px); }
.iv-don .don-card::after { font-size: 11px; }
.iv-sleeve { aspect-ratio: 63 / 88; width: 100%; }
.sleeve-face { width: 100%; height: 100%; border-radius: 8px; box-shadow: inset 0 0 0 2px #e7b54555, inset 0 0 0 4px #00000040, 0 4px 12px #0008; background: linear-gradient(155deg, #9a1d26, #2c060c); }
.iv-pm { aspect-ratio: 63 / 88; width: 100%; }
.mat-mini { width: 100%; height: 100%; border-radius: 8px; padding: 8%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.4fr 1fr 1fr .6fr; gap: 6%; box-shadow: 0 4px 12px #0008; background: linear-gradient(160deg, #d3ccc6, #b3aaa4); }
.mat-mini i { border: 2px solid var(--zone-line, #c4161c); background: var(--zone-bg, rgba(150,128,124,.35)); border-radius: 3px; }
.mat-mini i:first-child { grid-column: 1 / -1; }
.mat-mini i:last-child { grid-column: 1 / -1; }
.iv-empty { aspect-ratio: 63 / 88; width: 100%; border: 2px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 12px; }
.rbadge { display: inline-block; font: 700 11px/1.45 'Barlow Condensed'; letter-spacing: .4px; padding: 0 6px; border-radius: 4px; color: #fff; text-shadow: 0 1px 1px #000a; background: var(--rc); vertical-align: 1px; white-space: nowrap; }
.ct-btns button { white-space: nowrap; }
.cf-msg { font-size: 15px; margin-bottom: 14px; line-height: 1.5; }
/* loja */
.shop-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 10px; }
.shop-head h1 { font-size: 38px; margin: 0; }
.shop-head .hint b { color: var(--accent); }
.odds { font-size: 12.5px; color: #c9d2e3; background: #0f1828; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 9px 12px; margin-bottom: 14px; line-height: 1.6; }
.odds b { color: var(--accent); }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.prod { background: linear-gradient(170deg, hsl(var(--hue) 45% 22%), #111a2b 60%); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; transition: transform .18s, box-shadow .18s; }
.prod:hover { transform: translateY(-3px); box-shadow: 0 14px 30px #0009; }
.pack-art { position: relative; width: 62%; margin: 0 auto; aspect-ratio: 63 / 105; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, hsl(var(--hue, 30) 70% 45%), hsl(calc(var(--hue, 30) + 40) 70% 22%)); box-shadow: 0 10px 24px #000a, inset 0 0 0 2px #ffffff30; transform: rotate(-3deg); transition: transform .25s; }
.prod:hover .pack-art { transform: rotate(0) scale(1.04); }
.pack-art img { position: absolute; left: 8%; right: 8%; top: 13%; width: 84%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4px; box-shadow: 0 4px 10px #0009; }
.pack-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, #ffffff40 45%, transparent 60%); background-size: 250% 100%; animation: foil 3.5s ease-in-out infinite; pointer-events: none; }
.pack-crimp { position: absolute; left: 0; right: 0; top: 0; height: 7%; background: repeating-linear-gradient(90deg, #ffffff40 0 3px, #00000030 3px 6px); }
.pack-crimp.bottom { top: auto; bottom: 0; }
.pack-label { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font: italic 800 clamp(18px, 2.4vw, 28px)/1 'Barlow Condensed'; color: #fff; text-shadow: 0 2px 0 #000, 0 0 10px #000; }
.prod-name { text-align: center; line-height: 1.15; }
.prod-name b { display: block; font: 700 22px 'Barlow Condensed'; color: #fff; }
.prod-name span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.prod-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto; }
.buy-btn { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 4px; background: #0e1828cc; border: 1px solid var(--line); border-radius: 10px; line-height: 1.15; }
.buy-btn span { font-size: 12px; color: var(--muted); }
.buy-btn b { font: 700 16px 'Barlow Condensed'; color: var(--accent); }
.buy-btn:hover { border-color: var(--accent); background: #1d2a42; }
.buy-btn.hot { background: linear-gradient(#ffd36b, #e9a325); border-color: #a5741c; }
.buy-btn.hot span { color: #3a2400; } .buy-btn.hot b { color: #1a1205; }
.buy-btn.wide { width: 100%; flex-direction: row; justify-content: center; gap: 10px; padding: 9px; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.set-card { background: linear-gradient(170deg, #22304d, #111a2b); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.set-card h3 { margin: 4px 0 0; font-size: 24px; }
.set-card p { margin: 0; flex: 1; }
.set-prev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 6px; }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.acc { background: #141f33; border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.acc .iv { width: 74%; margin: 0 auto; }
.acc-name { line-height: 1.25; font-size: 13.5px; } .acc-name span { display: block; color: var(--muted); font-size: 12px; }
/* abertura */
.overlay.opening { display: block; place-items: normal; overflow-y: auto; background: radial-gradient(ellipse at 50% 30%, #1b2c4dee, #05080ff5 70%); padding: 24px 12px 40px; }
.open-stage { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 80vh; justify-content: center; }
.sealed { width: min(300px, 62vw); cursor: pointer; animation: sealedIdle 1.6s ease-in-out infinite; filter: drop-shadow(0 20px 40px #000); }
.sealed .pack-art { width: 100%; transform: none; }
@keyframes sealedIdle { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
.sealed.tear { animation: tear .65s ease-in forwards; }
@keyframes tear { 30% { transform: scale(1.08) rotate(-4deg); filter: brightness(1.4) drop-shadow(0 0 30px #ffd977); } 100% { transform: scale(1.6) translateY(-40px); opacity: 0; filter: brightness(3); } }
.box-art { aspect-ratio: 1.3; width: 100%; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(150deg, #c4161c, #5a0a10 60%, #2a0508); box-shadow: inset 0 0 0 3px #e7b545aa, inset 0 0 40px #0008, 0 20px 40px #000; position: relative; overflow: hidden; }
.box-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, #ffffff35 45%, transparent 60%); background-size: 250% 100%; animation: foil 3s ease-in-out infinite; }
.box-art b { font: italic 800 54px/1 'Barlow Condensed'; color: #fff; text-shadow: 0 3px 0 #000; }
.box-art span { font: 700 14px 'Barlow Condensed'; letter-spacing: 3px; color: var(--gold-2, #ffd977); }
.box-art.set { background: linear-gradient(150deg, #8a5d12, #2a1a05); } .box-art.set b { font-size: 30px; text-align: center; padding: 0 12px; }
.tap { font-size: 14px; animation: clockPulse 1.4s infinite; }
.open-title { font: 700 28px 'Barlow Condensed'; color: #fff; margin-top: 6px; }
.open-sub { font: 700 20px 'Barlow Condensed'; color: var(--accent); margin-top: 10px; }
.flip-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; width: min(900px, 100%); align-self: center; }
.flip-grid.hits, .flip-grid.cos { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.flip { aspect-ratio: 63 / 88; perspective: 900px; cursor: pointer; animation: dealIn .35s ease-out backwards; }
@keyframes dealIn { from { transform: translateY(40px) scale(.8); opacity: 0; } }
.flip-in { position: relative; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.3,1.3,.5,1); transform-style: preserve-3d; }
.flip.open .flip-in { transform: rotateY(180deg); }
.flip-back, .flip-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6px; }
.flip-back.card { width: 100%; height: 100%; box-sizing: border-box; }
.flip-front { transform: rotateY(180deg); }
.flip-front .iv { width: 100%; height: 100%; }
.flip-tag { position: absolute; left: 50%; bottom: -9px; translate: -50% 0; z-index: 3; }
.flip.hit .flip-back { box-shadow: 0 0 0 2px var(--rc), 0 0 22px 4px var(--rc); animation: hitPulse .8s ease-in-out infinite; }
@keyframes hitPulse { 50% { box-shadow: 0 0 0 3px #fff, 0 0 34px 10px var(--rc); } }
.flip.hit.open .flip-front { box-shadow: 0 0 0 2px var(--rc), 0 0 30px 6px var(--rc); animation: hitBurst .9s ease-out; }
@keyframes hitBurst { 0% { box-shadow: 0 0 0 2px #fff, 0 0 80px 40px var(--rc); } }
.rar-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rchip { background: #0f1828; border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px; font: 600 14px 'Barlow Condensed'; }
.cos-got { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; font-size: 12.5px; }
.cos-got .iv { width: 100%; }
.open-foot { margin-top: 16px; }
/* coleção */
.equipped { display: grid; grid-template-columns: repeat(3, 120px) 1fr; gap: 14px; background: #0f1828; border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 12px; align-items: center; }
.eq-slot { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.eq-slot .iv { width: 76px; }
.eq-lbl { line-height: 1.2; font-size: 12px; } .eq-lbl span { display: block; color: var(--muted); }
.eq-slot.info { align-items: flex-start; text-align: left; font-size: 13px; gap: 2px; }
.eq-slot.info b { font: 700 30px 'Barlow Condensed'; color: var(--accent); }
.eq-slot.info small { color: var(--muted); }
.coll-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.coll-bar input { flex: 1 1 220px; width: auto; }
.coll-bar select { width: auto; max-width: 260px; }
.coll-count { margin-bottom: 8px; }
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ctile { position: relative; background: #141f33; border: 1px solid #ffffff10; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: border-color .15s, transform .15s; }
.ctile:hover { border-color: var(--accent); transform: translateY(-2px); }
.ctile.eq { border-color: #3ccf8e; box-shadow: 0 0 0 1px #3ccf8e, 0 0 16px #3ccf8e44; }
.ctile.missing .iv { filter: grayscale(1) brightness(.4); }
.ctile.missing { opacity: .65; }
.ctile .qty { position: absolute; top: 4px; right: 4px; z-index: 4; background: var(--accent); color: #1a1205; font: 700 14px 'Barlow Condensed'; border-radius: 10px; padding: 0 7px; box-shadow: 0 2px 6px #000a; }
.ct-cap { font-size: 12.5px; line-height: 1.25; } .ct-cap b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ct-cap span { color: var(--muted); font-size: 11.5px; font-family: ui-monospace, monospace; }
.ct-btns { display: flex; gap: 5px; } .ct-btns button { flex: 1; font-size: 12px; padding: 4px 6px; }
.ct-btns button.on { background: #0b7a45; border-color: #3ccf8e; color: #fff; }
.more-btn { display: block; margin: 16px auto; }
/* trocas */
.trade-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: start; }
.trade-new { display: flex; flex-direction: column; gap: 10px; }
.trade-new h3 { margin: 0; }
.trade-new .row { margin: 0; } .trade-new .row input { flex: 1; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trade-side { background: #0f1828; border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.trade-side h4 { margin: 0; font: 700 17px 'Barlow Condensed'; color: var(--accent); }
.pick-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.pick { display: grid; grid-template-columns: 34px 1fr auto auto auto; gap: 6px; align-items: center; padding: 3px 5px; border-radius: 8px; font-size: 12px; }
.pick.on { background: #f2b33d1f; box-shadow: inset 0 0 0 1px #f2b33d66; }
.pick .iv { width: 34px; } .pick .iv-card { border-radius: 3px; }
.pick-txt { min-width: 0; line-height: 1.2; } .pick-txt b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pick-txt span { color: var(--muted); font-size: 11px; }
.pick button { padding: 1px 8px; font-size: 14px; } .pick-n { min-width: 16px; text-align: center; color: var(--accent); }
.berry-in { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--text); } .berry-in input { width: 120px; margin: 0; }
.trade-lists { display: flex; flex-direction: column; gap: 14px; }
.trade-lists h3 { margin: 0 0 8px; }
.trade-row { background: #0f1828; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; font-size: 12.5px; border-left: 3px solid var(--accent); }
.trade-row.st-done { border-left-color: var(--good); } .trade-row.st-declined, .trade-row.st-cancelled, .trade-row.st-expired { border-left-color: var(--muted); opacity: .75; }
.tr-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; } .tr-sides .hint { display: block; } .tr-sides small { color: var(--muted); }
.tr-note { font-style: italic; color: #c9d2e3; margin-bottom: 6px; }
.trade-row .row { margin: 4px 0 0; justify-content: flex-end; }
/* recompensa no fim da partida */
.reward-box { margin: 6px auto 12px; padding: 10px 16px; border-radius: 12px; background: linear-gradient(#3a2a08cc, #1a1205cc); border: 1px solid var(--gold, #e7b545); font-size: 13px; color: #f3e6c4; max-width: 360px; }
.rw-total { display: block; font: italic 800 34px/1.1 'Barlow Condensed'; color: #ffd977; text-shadow: 0 0 14px #e7b54588; animation: winPop .6s cubic-bezier(.2,1.6,.4,1); }
@media (max-width: 760px) {
  .nav-right .berries { font-size: 13px; padding: 2px 8px; }
  .shop-head { flex-direction: column; align-items: flex-start; } .shop-head h1 { font-size: 30px; }
  .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .prod { padding: 10px; } .prod-name b { font-size: 18px; } .buy-btn b { font-size: 14px; }
  .set-grid { grid-template-columns: 1fr; }
  .acc-grid, .coll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .flip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .flip-grid.hits, .flip-grid.cos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .equipped { grid-template-columns: repeat(3, 1fr); } .eq-slot.info { grid-column: 1 / -1; }
  .trade-layout, .trade-cols { grid-template-columns: 1fr; }
  .box-art b { font-size: 40px; }
}

.nav-links { display: flex; gap: 4px; align-items: center; }
@media (max-width: 760px) {
  .nav-links { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a[data-page] { flex: 0 0 auto; white-space: nowrap; }
  .topnav { overflow-x: visible; }
}

/* ======================= COMPONENTES PADRÃO (ver SPECS.md) ======================= */
/* Notificações: notify(msg, { type }) — empilhadas no canto, com ícone e barra de tempo */
.ntf-stack { position: fixed; top: 14px; right: 14px; z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 28px)); pointer-events: none; }
.ntf { --c: #5fb2ff; position: relative; overflow: hidden; pointer-events: auto; display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 11px 12px 13px; background: #101a2cf2; border: 1px solid #ffffff14; border-left: 3px solid var(--c); border-radius: 12px; box-shadow: 0 12px 30px #000b; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 13.5px; color: var(--text); animation: ntfIn .28s cubic-bezier(.2,1.2,.4,1); }
.ntf.out { animation: ntfOut .22s ease-in forwards; }
.ntf.bump { animation: bump .4s; }
.ntf-success { --c: #3ccf8e; } .ntf-error { --c: #ff5d5d; } .ntf-warn { --c: #f2b33d; } .ntf-info { --c: #5fb2ff; }
.ntf-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 14px Inter; color: #0b111c; background: var(--c); }
.ntf-body { line-height: 1.35; min-width: 0; overflow-wrap: anywhere; } .ntf-body b { display: block; font-weight: 600; }
.ntf-x { background: none; border: 0; color: var(--muted); padding: 2px 4px; font-size: 12px; }
.ntf-x:hover { color: var(--text); }
.ntf-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c); opacity: .55; transform-origin: left; animation: ntfBar linear forwards; }
.ntf.hold .ntf-bar { animation-play-state: paused; }
@keyframes ntfIn { from { transform: translateX(30px); opacity: 0; } }
@keyframes ntfOut { to { transform: translateX(30px); opacity: 0; } }
@keyframes ntfBar { to { transform: scaleX(0); } }
@media (max-width: 760px) { .ntf-stack { top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px; width: auto; } }
/* Diálogo de confirmação: confirmDialog(html, { ok, danger }) */
.panel.dlg { max-width: min(440px, 92vw); text-align: left; }
.panel.dlg .row { justify-content: flex-end; margin-top: 4px; }
button.danger { background: linear-gradient(#d84545, #a52a2a); border-color: #8f2020; color: #fff; }
/* Lista de seleção: botão de ponta arredondada + painel de ponta quadrada */
.uisel { position: relative; display: inline-flex; width: 100%; min-width: 0; vertical-align: middle; }
.sel-native { position: absolute !important; inset: 0; opacity: 0; pointer-events: none; width: 100% !important; height: 100% !important; margin: 0 !important; }
.sel-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; background: #0e1828; border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; font: inherit; color: var(--text); min-height: 36px; transition: border-color .15s, box-shadow .15s; }
.sel-btn:hover { border-color: #3d5378; }
.sel-btn:focus-visible, .uisel.open .sel-btn { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #f2b33d26; }
.sel-btn:disabled { opacity: .5; cursor: default; }
.sel-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sel-chev { flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .75; transition: transform .2s; }
.uisel.open .sel-chev { transform: translateY(2px) rotate(-135deg); }
.uisel.active .sel-btn { border-color: var(--accent); color: var(--accent); }
.sel-panel { position: fixed; z-index: 70; background: #0f1828; border: 1px solid #3a4f72; border-radius: 0; box-shadow: 0 14px 34px #000c; overflow-y: auto; padding: 3px 0; animation: selIn .14s ease-out; font-size: 14px; max-width: min(420px, calc(100vw - 12px)); }
@keyframes selIn { from { opacity: 0; transform: translateY(-4px); } }
.sel-opt { padding: 7px 14px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #dfe6f2; }
.sel-opt.hl { background: #2563c9; color: #fff; }
.sel-opt.on { font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.sel-opt.dis { opacity: .4; cursor: default; }
.sel-group { padding: 8px 12px 3px; font: 700 11px Inter; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
/* larguras herdadas dos lugares onde havia <select> */
.lib-filters .uisel, .inl .uisel, .coll-bar .uisel, .meta-filters .uisel, .sel-lib-size { width: auto; }
.lib-filters .sel-btn, .sel-lib-size .sel-btn { border-radius: 20px; background: #131e31; }
.ed-pair .uisel { flex: 1; }
.coll-bar .uisel { max-width: 280px; }
.sel-lib-size { margin-left: auto; }
/* montagem dos 10 DON!! */
.don-builder { background: #0f1828; border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.don-builder h3 { margin: 0 0 4px; display: flex; gap: 10px; align-items: baseline; }
.don-builder h3 small { font: 500 13px Inter; color: var(--muted); }
.db-total { margin-left: auto; font: 700 20px 'Barlow Condensed'; color: var(--good); }
.db-total.full { color: var(--accent); }
.db-preview { display: flex; gap: 0; padding: 10px 6px 14px; overflow-x: auto; }
.db-preview .don-card { --dh: 84px; flex: 0 0 auto; }
.db-preview .don-card + .don-card { margin-left: -26px; }
.db-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.db-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto auto; min-width: 0; gap: 8px; align-items: center; background: #141f33; border-radius: 10px; padding: 6px 8px; font-size: 12.5px; }
.db-row .don-card { --dh: 52px; }
.db-row > div:nth-child(2) { min-width: 0; }
.db-row b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-row span { color: var(--muted); font-size: 11.5px; }
.db-row button { padding: 2px 10px; font-size: 15px; }
.db-row .db-n { min-width: 20px; text-align: center; font: 700 18px 'Barlow Condensed'; color: var(--accent); }
.db-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
/* produtos oficiais na loja */
.seg.tabs button small { font-size: 11px; opacity: .7; margin-left: 3px; }
.shop-sub { margin: 22px 0 10px; }
.off-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.oprod { background: linear-gradient(175deg, #1a2741, #111a2b); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s, border-color .18s; }
.oprod:hover { transform: translateY(-3px); box-shadow: 0 14px 30px #0009; border-color: #3d5378; }
.oprod.soon { opacity: .7; }
.op-art { position: relative; aspect-ratio: 16 / 9; background: #0b1322; overflow: hidden; }
.op-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.oprod:hover .op-art img { transform: scale(1.04); }
.op-code { position: absolute; left: 10px; top: 10px; background: #000c; color: var(--accent); font: 700 14px 'Barlow Condensed'; padding: 2px 9px; border-radius: 8px; border: 1px solid #f2b33d66; }
.op-soon { position: absolute; right: 10px; top: 10px; background: var(--bad); color: #fff; font: 700 12px Inter; padding: 3px 9px; border-radius: 8px; }
.op-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.op-name { font: 700 19px/1.15 'Barlow Condensed'; color: #fff; }
.op-date { font-size: 11.5px; color: var(--muted); }
.op-gives { margin: 2px 0 0; padding-left: 16px; font-size: 12.5px; color: #c9d2e3; line-height: 1.45; flex: 1; }
.op-don { font-size: 12px; color: var(--accent); }
.op-buy { margin-top: auto; }
.op-buy .buy-btn.wide, .oprod .buy-btn.wide { width: 100%; }
.oprod .prod-btns { margin-top: 6px; }
.off-sealed { width: min(560px, 86vw); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px #000, 0 0 0 2px #e7b54566; position: relative; background: #0b1322; }
.off-sealed img { display: block; width: 100%; }
.off-sealed span { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; text-align: center; font: italic 800 26px 'Barlow Condensed'; color: #fff; background: linear-gradient(transparent, #000d); text-shadow: 0 2px 0 #000; }
.iv-goods { aspect-ratio: 16 / 10; width: 100%; border-radius: 8px; overflow: hidden; background: #0b1322; box-shadow: 0 4px 12px #0008; }
.iv-goods img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .off-grid { grid-template-columns: 1fr; gap: 12px; } .op-name { font-size: 17px; } }
@media (max-width: 760px) {
  .seg.tabs { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg.tabs::-webkit-scrollbar { display: none; }
  .seg.tabs button { flex: 0 0 auto; white-space: nowrap; }
}
/* abertura de pacote: rasgar o topo e passar as cartas */
.tear-wrap { --tear: 0; position: relative; width: min(300px, 64vw); aspect-ratio: 63 / 105; filter: drop-shadow(0 22px 40px #000); animation: sealedIdle 2.2s ease-in-out infinite; user-select: none; -webkit-user-select: none; touch-action: none; }
.tear-wrap.torn { animation: none; }
.pk-layer { position: absolute; inset: 0; }
.pk-layer .pack-art { width: 100%; height: 100%; transform: none; }
.pack-art.off img { top: 0; left: 0; right: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; }
.pk-body { clip-path: polygon(0 15%, 6% 13.5%, 12% 15.5%, 18% 13.8%, 25% 15.6%, 31% 13.6%, 38% 15.4%, 44% 13.7%, 50% 15.5%, 57% 13.6%, 63% 15.3%, 70% 13.8%, 76% 15.6%, 83% 13.5%, 89% 15.4%, 95% 13.8%, 100% 15%, 100% 100%, 0 100%); }
.pk-flap { clip-path: polygon(0 0, 100% 0, 100% 15%, 95% 13.8%, 89% 15.4%, 83% 13.5%, 76% 15.6%, 70% 13.8%, 63% 15.3%, 57% 13.6%, 50% 15.5%, 44% 13.7%, 38% 15.4%, 31% 13.6%, 25% 15.6%, 18% 13.8%, 12% 15.5%, 6% 13.5%, 0 15%); transform-origin: 0 15%; }
.tear-strip { position: absolute; left: -6%; right: -6%; top: -4%; height: 24%; cursor: grab; z-index: 3; display: flex; align-items: flex-start; justify-content: center; }
.tear-strip span { margin-top: -26px; font: 700 13px Inter; color: var(--accent); background: #0b111ccc; border: 1px solid #f2b33d66; border-radius: 20px; padding: 3px 10px; white-space: nowrap; animation: clockPulse 1.6s infinite; }
.tear-line { position: absolute; left: 6%; right: 6%; top: 62%; height: 2px; background: repeating-linear-gradient(90deg, #ffffffcc 0 8px, transparent 8px 14px); }
.tear-line::after { content: ''; position: absolute; left: 0; top: -2px; height: 6px; width: calc(var(--tear) * 100%); background: linear-gradient(90deg, #fff, #ffd977); box-shadow: 0 0 14px 4px #ffd977; border-radius: 3px; transition: width .08s; }
.tear-wrap.auto .tear-line::after { width: 100%; transition: width .4s ease-in; }
.tear-wrap.torn .tear-strip { display: none; }
.tear-wrap.torn .pk-flap { animation: flapOff .7s cubic-bezier(.3,.7,.4,1) forwards; }
.tear-wrap.torn .pk-body { animation: bodyDrop .75s ease-in .25s forwards; }
@keyframes flapOff { to { transform: translate(-60px, -160px) rotate(-28deg); opacity: 0; } }
@keyframes bodyDrop { 0% { filter: brightness(1); } 30% { filter: brightness(1.6) drop-shadow(0 -10px 30px #ffd977); } 100% { transform: translateY(70%); opacity: 0; } }
/* pilha de cartas */
.stack-count-txt { font: 700 20px 'Barlow Condensed'; color: var(--muted); letter-spacing: 1px; }
.stack-area { position: relative; width: min(300px, 66vw); aspect-ratio: 63 / 88; cursor: pointer; margin: 6px 0 10px; }
.sc { position: absolute; inset: 0; perspective: 1000px; transform: translate(calc(var(--i) * 3px), calc(var(--i) * -3px)); transition: transform .25s; animation: dealIn .35s ease-out backwards; }
.sc-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,1.3,.5,1); }
.sc-back, .sc-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; }
.sc-back.card { width: 100%; height: 100%; box-sizing: border-box; }
.sc-front { transform: rotateY(180deg); }
.sc-front .iv { width: 100%; height: 100%; border-radius: 10px; box-shadow: 0 12px 30px #000c; }
.sc-in { transform: rotateY(180deg); }
.sc.facedown .sc-in { transform: rotateY(0); }
.sc.facedown .sc-back { box-shadow: 0 0 0 3px var(--rc), 0 0 40px 10px var(--rc); animation: hitPulse .9s ease-in-out infinite; }
.sc.reveal .sc-front { box-shadow: 0 0 0 3px var(--rc), 0 0 60px 16px var(--rc); animation: hitBurst 1.1s ease-out; border-radius: 10px; }
.sc.out { animation: cardOut .38s ease-in forwards; pointer-events: none; }
@keyframes cardOut { to { transform: translate(-130%, 10%) rotate(-16deg); opacity: 0; } }
.flip-grid.all .flip { animation: dealIn .35s ease-out backwards; }

/* valor de mercado real (TCGplayer) */
.mkt{display:inline-block;padding:1px 6px;border-radius:6px;background:#1f7a4d33;color:#7fe0a8;font:600 11px/1.5 Inter,sans-serif;white-space:nowrap}
.ct-mkt{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:0 8px 6px;font-size:11px;color:var(--muted,#9aa3ad)}
.ct-mkt span:last-child{white-space:nowrap}
.side-mkt{margin:6px 0}
.open-mkt{margin:12px auto 0;text-align:center;color:var(--muted,#9aa3ad);font-size:14px}.open-mkt b{color:#7fe0a8}
.op-mkt{font-size:11px;color:#7fe0a8;margin:2px 0 6px}
.op-don.off{opacity:.6;font-style:italic}
/* coleção: produtos oficiais (não equipáveis) */
.coll-grid.goods { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ctile.goods .iv-goods { aspect-ratio: 16 / 9; }
.ctile.goods .iv-goods img { width: 100%; height: 100%; object-fit: cover; }
.ctile.goods .ct-cap b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13.5px; margin: 3px 0 2px; }
.ctile.goods .ct-cap span:last-child { font-family: inherit; }
.rbadge.off { --rc: #2563c9; }
.ctile.goods .ct-btns button { flex: 1; }
@media (max-width: 760px) { .coll-grid.goods { grid-template-columns: 1fr; } }
/* missões */
.missions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; margin-top: 10px; width: 100%; }
.mission { position: relative; background: #141f33; border: 1px solid #ffffff12; border-radius: 10px; padding: 8px 10px 12px; font-size: 12.5px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; overflow: hidden; }
.mission b { grid-column: 1; } .mission span { grid-column: 1; color: var(--muted); font-size: 11.5px; } .mission em { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 700 16px 'Barlow Condensed'; color: var(--accent); font-style: normal; }
.mission i { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p); background: var(--accent); }
.mission.done { border-color: #3ccf8e66; } .mission.done em { color: var(--good); } .mission.done i { background: var(--good); }
.shop-head { flex-wrap: wrap; }
.opp-off { margin-top: 6px; padding: 4px 8px; border-radius: 8px; background: #ffb02033; color: #ffcf6b; font-size: 12px; }
#btnFeedback { font-size: 13px; padding: 5px 10px; }
#btnAdmin { color: var(--accent); font-weight: 600; text-decoration: none; padding: 0 6px; }

/* ---------------- tutorial (Escola Pirata) ---------------- */
.learn-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; border: 1px solid #f5b94255; background: linear-gradient(90deg, #f5b9421a, transparent); }
.learn-banner > div { display: grid; gap: 2px; }
.learn-prog { display: grid; gap: 8px; margin-bottom: 16px; }
.learn-bar { height: 8px; border-radius: 6px; background: #ffffff12; overflow: hidden; }
.learn-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #ffd98a); transition: width .4s; }
.learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.lesson { display: flex; flex-direction: column; gap: 6px; position: relative; transition: transform .15s, border-color .15s; }
.lesson:hover { transform: translateY(-2px); }
.lesson h3 { margin: 0; font: 700 21px 'Barlow Condensed'; }
.lesson p { margin: 0; flex: 1; }
.lesson-n { font: 600 12px Inter, sans-serif; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; display: flex; align-items: center; gap: 6px; }
.lesson-n span { font-size: 20px; }
.lesson-foot { font-size: 13px; }
.lesson-rw { color: var(--accent); font-weight: 700; }
.lesson-ok { color: var(--good); font-weight: 700; }
.lesson.done { opacity: .78; }
.lesson.next { border: 1px solid var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 24px #f5b94233; }
.lesson.final { background: linear-gradient(135deg, #f5b94222, #141f33 60%); }
.learn-sub { font: 700 26px 'Barlow Condensed'; margin: 26px 0 10px; }
.learn-guide { display: grid; gap: 8px; }
.learn-guide details summary { cursor: pointer; font: 700 18px 'Barlow Condensed'; list-style: none; }
.learn-guide details summary::before { content: '▸ '; color: var(--accent); }
.learn-guide details[open] summary::before { content: '▾ '; }
.guide-body { margin-top: 8px; line-height: 1.55; font-size: 14px; }
/* professor na partida */
@keyframes tutPulse { 0%, 100% { box-shadow: 0 0 0 0 #f5b94299; } 50% { box-shadow: 0 0 0 8px #f5b94200; } }
.tut-done .panel { text-align: center; max-width: 420px; }
.tut-medal { font-size: 54px; line-height: 1; margin-bottom: 4px; animation: hitBurst 1s ease-out; }
@media (prefers-reduced-motion: reduce) { .tut-focus { animation: none; } }
@media (max-width: 760px) {
  .learn-banner { flex-direction: column; align-items: stretch; }
  /* no celular o professor fica em cima, compacto, e pode ser recolhido */
}

/* ---------------- torneios ---------------- */
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.tr-card { display: flex; flex-direction: column; gap: 8px; }
.tr-card h3 { margin: 0; font: 700 22px 'Barlow Condensed'; }
.tr-top { display: flex; gap: 6px; flex-wrap: wrap; }
.tr-badge { display: inline-block; font: 700 12px Inter, sans-serif; padding: 2px 9px; border-radius: 20px; background: #ffffff14; color: var(--muted); letter-spacing: .3px; }
.tr-badge.open { background: #3ccf8e26; color: #6fe0ae; }
.tr-badge.live { background: #ff5a5a26; color: #ff8a8a; }
.tr-badge.done { background: #f5b94226; color: var(--accent); }
.tr-badge.off { background: #ffffff10; color: #8a93a3; text-decoration: line-through; }
.tr-badge.me { background: #2563c933; color: #8db8ff; }
.tr-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.tr-champ { font-weight: 700; color: var(--accent); }
.tr-back { display: inline-block; margin-bottom: 10px; }
.tr-hero h1 { font: 700 34px 'Barlow Condensed'; margin: 8px 0 12px; }
.tr-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.tr-info div { background: #141f33; border-radius: 10px; padding: 8px 12px; display: grid; gap: 2px; }
.tr-info b { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.tr-info span { font-size: 14px; }
.tr-desc { margin: 12px 0 0; white-space: pre-line; }
.tr-me { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.tr-me > div:first-child { display: grid; gap: 4px; }
.tr-table { border: 1px solid var(--accent); box-shadow: 0 0 22px #f5b94233; }
.tr-table b { font: 700 22px 'Barlow Condensed'; }
.tr-admin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; border: 1px dashed #f5b94266; }
.tr-tabs { margin: 16px 0 10px; }
.tr-ld { width: 26px; height: 26px; object-fit: cover; object-position: 50% 18%; border-radius: 50%; vertical-align: middle; border: 1px solid #ffffff30; }
.tr-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 6px; }
.tr-pl { display: grid; grid-template-columns: 26px 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; background: #141f33; border-radius: 10px; padding: 6px 10px; }
.tr-pl .tr-n { grid-row: 1 / 3; color: var(--muted); font: 700 14px 'Barlow Condensed'; }
.tr-pl .tr-ld { grid-row: 1 / 3; }
.tr-pl .hint { font-size: 12px; }
.tr-pl.drop { opacity: .5; }
.tr-round { margin-bottom: 12px; }
.tr-round h3 { margin: 0 0 8px; font: 700 20px 'Barlow Condensed'; }
.tr-table-list { width: 100%; border-collapse: collapse; font-size: 14px; }
.tr-table-list th { text-align: left; font: 600 12px Inter, sans-serif; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; padding: 6px 8px; border-bottom: 1px solid #ffffff14; }
.tr-table-list td { padding: 7px 8px; border-bottom: 1px solid #ffffff0a; vertical-align: middle; }
.tr-table-list td.w { color: var(--good); font-weight: 700; }
.tr-table-list td.vs { color: var(--muted); width: 20px; }
.tr-table-list tr.pending td { background: #ffffff05; }
.tr-table-list tr.drop td { opacity: .5; }
.tr-stand tr.cut td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.tr-live { color: #ff8a8a; font-weight: 600; animation: clockPulse 1.4s infinite; }
.tr-watch, .tr-judge { margin-left: 6px; padding: 2px 8px; font-size: 13px; }
.tr-podium { display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin: 6px 0 18px; flex-wrap: wrap; }
.tr-pod { display: grid; justify-items: center; gap: 4px; background: #141f33; border-radius: 12px; padding: 12px 18px; min-width: 150px; }
.tr-pod .tr-ld { width: 54px; height: 54px; }
.tr-pod.p1 { order: 2; padding-top: 26px; border: 1px solid var(--accent); box-shadow: 0 0 26px #f5b94244; }
.tr-pod.p2 { order: 1; } .tr-pod.p3 { order: 3; }
.tr-place { font: 700 20px 'Barlow Condensed'; color: var(--accent); }
.tr-deck { max-height: 50vh; overflow: auto; background: #0b1322; padding: 10px; border-radius: 8px; font-size: 13px; text-align: left; white-space: pre; }
.tr-f { display: grid; gap: 4px; font-size: 13px; color: var(--muted); margin-bottom: 8px; text-align: left; }
.tr-f input, .tr-f textarea { width: 100%; box-sizing: border-box; }
.match-info { margin-top: 4px; font-size: 12px; color: var(--accent); font-weight: 600; }
.match-time.low { color: #ff5a5a; }
@media (max-width: 760px) { .tr-table-list { font-size: 12.5px; } .tr-table-list th:nth-child(n+6), .tr-table-list td:nth-child(n+6) { display: none; } .tr-stand th:nth-child(n+5), .tr-stand td:nth-child(n+5) { display: none; } }
/* barra do topo em telas médias (notebook): tudo numa linha só */
.nav-links a[data-page] { white-space: nowrap; }
@media (min-width: 1001px) and (max-width: 1500px) {
  .topnav { padding: 10px 12px; }
  .topnav .logo { margin-right: 8px; }
  .nav-links { gap: 0; min-width: 0; }
  .nav-links a[data-page] { padding: 7px 8px; font-size: 14px; }
  .nav-right { gap: 8px; }
  .nav-right .conn { font-size: 0; gap: 0; }
  .nav-right button { padding: 6px 9px; }
}
@media (min-width: 1001px) and (max-width: 1250px) {
  .nav-links a[data-page] { padding: 6px 6px; font-size: 13px; }
  .topnav .logo .tag { display: none; }
}
@media (min-width: 1001px) {
  .nav-right { flex-shrink: 0; }
  .nav-links { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
}
@media (min-width: 1001px) and (max-width: 1350px) { .who-elo { display: none; } }
@media (min-width: 1001px) and (max-width: 1250px) {
  .nav-links a[data-page] { padding: 6px 5px; font-size: 12.5px; }
  .nav-links { mask-image: linear-gradient(90deg, #000 92%, transparent); }
}

/* logo */
.nav-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 8px; box-shadow: 0 0 0 2px #4fc3ff44; }
.topnav .logo { display: flex; align-items: center; white-space: nowrap; }
.legal-top .nav-logo, .adm-top .nav-logo { width: 36px; height: 36px; margin-right: 0; }
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.loading img { width: 120px; height: 120px; border-radius: 50%; animation: logoPulse 1.6s ease-in-out infinite; }
@keyframes logoPulse { 50% { transform: scale(1.05); filter: drop-shadow(0 0 18px #2aa8ffaa); } }
@media (max-width: 800px) { .auth-logo { width: 96px; height: 96px; align-self: center; } }
@media (min-width: 1001px) and (max-width: 1250px) { .nav-logo { width: 34px; height: 34px; } }
@media (min-width: 1001px) and (max-width: 1350px) { .topnav .logo .tag { display: none; } .nav-logo { width: 34px; height: 34px; } }
/* janela de escolha (busca no topo do deck, lixo): centralizada e cabendo no celular */
.pick-modal .panel { max-width: min(94vw, 900px); max-height: 92vh; display: flex; flex-direction: column; box-sizing: border-box; }
.pick-modal .panel h3 { text-align: center; margin: 0 0 8px; }
.pick-modal .trash-list { max-width: none; flex: 1 1 auto; min-height: 0; }
.pick-modal .row { justify-content: center; margin-top: 8px; }
@media (max-width: 600px) {
  .pick-modal .panel { padding: 12px; width: 94vw; }
  .pick-modal .trash-list { --ch: 92px; gap: 8px; padding: 4px; }
  .pick-modal .panel h3 { font-size: 18px; }
}
/* playmat na proporção real 60 x 35 cm (cada lado da mesa), centralizado */
.mat { --mat-h: calc(var(--ch) * 2.62 + 54px); width: min(100%, max(calc(var(--mat-h) * 60 / 35), calc(var(--ch) * 2.864 + 220px))); align-self: center; box-sizing: border-box; }
@media (max-width: 760px) { .mat { --mat-h: calc(var(--ch) * 2.6 + 24px); width: min(100%, max(calc(var(--mat-h) * 60 / 35), calc(var(--ch) * 2.864 + 60px))); } }
@media (max-height: 520px) and (orientation: landscape) { .mat { --mat-h: calc(var(--ch) * 2.55 + 20px); width: min(100%, calc(var(--mat-h) * 60 / 35)); } }
/* tela grande: cartas crescem para a mesa (60x35) usar a altura disponível */
@media (min-width: 761px) and (min-height: 521px) { #game { --ch: clamp(74px, calc((100dvh - 190px) / 6.32), 150px); } }
/* ---- mercado ---- */
.mk-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.mk-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mk-filters input { flex: 1 1 240px; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.mk-empty { grid-column: 1 / -1; padding: 30px; text-align: center; }
.mk-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: transform .15s, border-color .15s; }
.mk-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.mk-card.mine { border-color: #3ccf8e66; }
.mk-card .iv { width: 100%; aspect-ratio: 63 / 88; height: auto; }
.mk-card .iv-pm, .mk-card .iv-don, .mk-card .iv-sleeve { aspect-ratio: auto; height: 150px; }
.mk-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.mk-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-price { font: 700 24px/1.1 'Barlow Condensed', sans-serif; color: var(--accent); margin-top: 4px; }
.mk-price small { font-size: 13px; color: var(--muted); font-weight: 500; }
.mk-info .good, .trade-balance .good { color: var(--good); } .mk-info .bad, .trade-balance .bad { color: var(--bad); }
.mk-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.mk-btns button { flex: 1 1 auto; }
.mk-sell { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.mk-pick { max-height: 60vh; }
.mk-pick .pick { cursor: pointer; grid-template-columns: 34px 1fr; }
.mk-form { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 70px; }
.mk-form .iv { width: 140px; align-self: center; }
.mk-form .iv-card { aspect-ratio: 63 / 88; height: auto; }
.mk-form label { font-size: 12px; color: var(--muted); margin-top: 4px; }
.mk-ref { background: #0006; border-radius: 8px; padding: 8px 10px; }
.mk-get { margin-top: 6px; font-size: 14px; }
.big-pub { margin-top: 8px; padding: 12px; font-size: 16px; }
.mk-hist { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.mk-body .panel { margin-bottom: 14px; }
@media (max-width: 800px) { .mk-sell { grid-template-columns: 1fr; } .mk-form { position: static; } .mk-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
/* trocas: miniaturas e balança */
.tr-thumbs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.tr-thumbs .iv { width: 42px; position: relative; }
.tr-thumbs .iv-card { aspect-ratio: 63 / 88; height: auto; }
.tr-n { position: absolute; right: -4px; bottom: -4px; background: var(--accent); color: #1a1205; font-size: 10px; border-radius: 8px; padding: 0 4px; }
.trade-balance { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: #0006; font-size: 14px; }
.tr-val { margin-top: 4px; }

/* importar deck */
.imp-dlg { width: min(640px, 94vw); }
.imp-dlg h3 { margin: 0 0 6px; }
.imp-dlg code { background: #0006; padding: 0 4px; border-radius: 4px; font-size: 11px; }
.imp-text { width: 100%; box-sizing: border-box; font: 13px/1.45 ui-monospace, Consolas, monospace; resize: vertical; min-height: 180px; margin: 8px 0; }
.imp-text.drop { outline: 2px dashed var(--accent); }
.imp-sum { font-size: 13px; min-height: 1.2em; }
.imp-sum .ok { color: var(--good); } .imp-sum .warn { color: var(--accent); }
.imp-err { margin: 6px 0; max-height: 140px; overflow: auto; }
.mk-filters .uisel, .mk-filters select { flex: 0 1 200px; width: auto; min-width: 150px; }
@media (min-width: 1001px) and (max-width: 1600px) {
  .nav-links a[data-page] { padding: 6px 7px; font-size: 13.5px; }
  .nav-right { gap: 6px; }
}

/* ---- acessibilidade ---- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card:focus-visible, .ctile:focus-visible, .mk-card:focus-visible { outline: 3px solid var(--accent); }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--accent); color: #1a1205; padding: 8px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 8px; }
#app:focus { outline: none; }
.auth-discord span { opacity: 1; }
#equipPreview .slot { color: #b9c4d8; }
.oprod.soon .op-soon { background: #b3261e; color: #fff; }
.oprod.soon { opacity: 1; filter: saturate(.55) brightness(.85); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

.store-notice { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 640px; margin: 0 auto; display: flex; gap: 12px; align-items: center; background: #101a2c; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 30px #000a; font-size: 13px; }
.store-notice p { margin: 0; flex: 1; }
.store-notice a { color: var(--accent); }
@media (max-width: 760px) { .store-notice { left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; font-size: 11.5px; gap: 8px; line-height: 1.35; } .store-notice button { padding: 6px 12px; } }
.auth-why { margin: -2px 0 4px; font-size: 11.5px; }

/* ---- chat da partida ---- */
#btnChat { position: relative; }
.chat-badge { position: absolute; top: -6px; right: -6px; background: var(--bad); color: #fff; font: 700 10px/1 Inter; padding: 3px 5px; border-radius: 9px; }
.chat-box { position: fixed; right: 16px; bottom: 16px; z-index: 46; width: min(360px, calc(100vw - 32px)); height: min(440px, 70vh); display: flex; flex-direction: column; background: #101a2c; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px #000b; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.chat-head .hint { flex: 1; font-size: 10.5px; line-height: 1.2; }
.chat-head button { padding: 3px 8px; font-size: 12px; }
.chat-list { flex: 1; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.chat-msg { align-self: flex-start; max-width: 85%; background: #1d2b45; border-radius: 10px 10px 10px 2px; padding: 5px 9px; font-size: 13px; word-wrap: break-word; }
.chat-msg b { display: block; font-size: 11px; color: var(--accent); }
.chat-msg.mine { align-self: flex-end; background: #2b3f63; border-radius: 10px 10px 2px 10px; }
.chat-msg.mine b { color: var(--good); }
.chat-quick { display: flex; gap: 5px; flex-wrap: wrap; padding: 6px 10px 0; }
.chat-quick button { padding: 3px 8px; font-size: 11.5px; border-radius: 999px; }
.chat-form { display: flex; gap: 6px; padding: 8px 10px 10px; }
.chat-form input { flex: 1; min-width: 0; }
@media (max-width: 760px) { .chat-box { right: 8px; left: 8px; bottom: 8px; width: auto; height: 55vh; } }

.m-collection { --mc: #ff9a3c; }
#edColl:empty { display: none; }
.m-private .chk { white-space: normal; font-size: 12.5px; align-items: flex-start; margin: 4px 0 2px; }


/* Deck Builder no modo Coleção */
.ed-mode { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, #f2b33d22, #f2b33d08); border: 1px solid #f2b33d55; }
.ed-mode b { font: 700 18px 'Barlow Condensed'; color: var(--accent); letter-spacing: .3px; }
.ed-mode span { font-size: 12.5px; color: var(--muted, #9fb0c8); line-height: 1.4; }
.ed-mode button { margin-top: 4px; }
.ed-results .card .have { position: absolute; left: 4px; bottom: 4px; background: #000b; color: #fff; font: 600 11px Inter; padding: 2px 6px; border-radius: 8px; z-index: 3; pointer-events: none; }
.ed-results.nocounts .have { display: none; }
.ed-empty { grid-column: 1 / -1; padding: 24px; text-align: center; }

/* Biblioteca: prévias de coleção que ainda não saiu */
.lib-previews { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.lp-set summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0 10px; list-style: none; }
.lp-set summary::-webkit-details-marker { display: none; }
.lp-tag { background: var(--accent); color: #1a1205; font: 700 11px Inter; padding: 3px 8px; border-radius: 6px; letter-spacing: .5px; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.lp-card { position: relative; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; overflow: hidden; }
.lp-card img { width: 100%; aspect-ratio: 0.716; object-fit: cover; display: block; border-radius: 8px; transition: transform .15s; }
.lp-card:hover img, .lp-card:focus-visible img { transform: scale(1.04); }
.lp-id { position: absolute; left: 4px; bottom: 4px; background: #000b; color: #fff; font: 600 10.5px Inter; padding: 2px 6px; border-radius: 6px; }
.lp-zoom { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: zoom-out; }
.lp-zoom img { max-height: 82vh; max-width: 92vw; border-radius: 14px; box-shadow: 0 20px 60px #000c; }
.lp-cap { color: #fff; font: 600 14px Inter; }

/* Entrar com Google */
.g-wrap { display: grid; gap: 10px; justify-items: center; margin-top: 4px; }
.g-or { width: 100%; display: flex; align-items: center; gap: 10px; color: var(--muted, #9fb0c8); font-size: 12px; }
.g-or::before, .g-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.g-btn { width: 100%; display: flex; justify-content: center; min-height: 44px; }
.g-terms { text-align: center; font-size: 11.5px; margin: 0; }

/* ---------- barras de rolagem no tema do site (antes ficavam brancas) ---------- */
html { color-scheme: dark; }
* { scrollbar-width: thin; scrollbar-color: #33435f transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: #2c3a55; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #41557c; }

/* ---------- tamanho conforme a tela de cada pessoa ----------
   As telas (lobby, páginas e painel de admin) ocupam a largura disponível e, em monitores grandes,
   tudo cresce na mesma proporção (o tamanho fica igual ao de um monitor de 1600 px). A mesa da partida
   e o Deck Builder já se ajustam sozinhos à tela. */
:root { --wide: 1600px; } /* sem vw: dentro do zoom o vw passaria da tela */
@media (min-width: 1800px) { #lobby, .adm { zoom: 1.1; } }
@media (min-width: 2100px) { #lobby, .adm { zoom: 1.22; } }
@media (min-width: 2500px) { #lobby, .adm { zoom: 1.4; } }
@media (min-width: 3200px) { #lobby, .adm { zoom: 1.75; } }

/* logo do topo: volta ao menu principal */
.topnav .logo { cursor: pointer; }
.topnav .logo:hover .nav-logo { filter: brightness(1.15); }

/* janelas (Minha conta, diálogos): nunca passam da altura da tela; o conteúdo rola dentro */
.overlay > .panel { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
/* botão do Google: o iframe dele é "claro"; com o site em tema escuro o navegador pintava um fundo branco
   em volta. Marcando o iframe como claro, o fundo fica transparente. */
.g-btn, .g-btn iframe { color-scheme: light; background: transparent; }

/* ---------- mesa ocupando toda a arena central (computador e tablet) ----------
   Os dois playmats usam toda a largura do meio da tela; a altura é dividida entre os dois lados e a mão,
   que fica maior (1,3× as cartas da mesa) para ler as cartas. As cartas crescem até onde a altura deixa. */
@media (min-width: 761px) and (min-height: 521px) {
  #game { --ch: clamp(70px, calc((100dvh - 168px) / 6.42), 200px); --ch-hand: calc(var(--ch) * 1.3); padding: 6px; gap: 8px; }
  .table { gap: 4px; justify-content: space-between; }
  .mat { width: 100%; padding: 5px; gap: 4px;
    grid-template-rows: calc(var(--ch) + 8px) calc(var(--ch) + 8px) calc(var(--ch) * .58); }
  .mat.opp { grid-template-rows: calc(var(--ch) * .58) calc(var(--ch) + 8px) calc(var(--ch) + 8px); }
  .opp-hand { height: 26px; }
  /* espaço em cima para a carta subir ao passar o mouse sem ser cortada */
  .hand { padding: 28px 12px 6px; min-height: calc(var(--ch-hand) + 36px); justify-content: center; }
  .hand .card { transform-origin: 50% 100%; }
  .hand .card:hover, .hand .card.sel { transform: translateY(-14px) scale(1.08); }
  /* fases ao lado do Leader (o meio do playmat ficou largo) */
  .mat.me .phases { justify-self: end; margin-right: 10px; }
  .mat.opp .phases { justify-self: start; margin-left: 10px; }
}
/* celular em pé: mão um pouco maior */
@media (max-width: 760px) {
  #game { --ch-hand: calc(var(--ch) * 1.25); }
  .hand { padding-top: 16px; min-height: calc(var(--ch-hand) + 22px); }
  .hand .card { transform-origin: 50% 100%; }
}
/* celular deitado: playmat na largura toda (antes ficava mais estreito que as zonas) */
@media (max-height: 520px) and (orientation: landscape) { .mat { width: 100%; } }
/* botões do card da coleção não estouram o quadro: com 3 botões, "Equipar" vai para a linha de cima */
.ct-btns { flex-wrap: wrap; }
.ct-btns button { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ct-btns:has(> button:nth-child(3)) > button:first-child { flex-basis: 100%; }
.ct-mkt { flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 380px) { .ct-btns button { font-size: 11px; padding: 4px 2px; } .ct-mkt { padding: 0 6px 6px; } }
/* apoio (Patreon) e página de atualizações */
.patreon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: #ff424d; color: #fff !important; font-weight: 700; font-size: 13.5px; text-decoration: none; }
.patreon-btn:hover { filter: brightness(1.1); }
.patreon-btn i { font-style: normal; font-size: 12px; }
.patreon-btn.sm { padding: 6px 11px; font-size: 13px; font-weight: 600; }
@media (max-width: 1500px) { .patreon-btn.sm span { display: none; } .patreon-btn.sm { padding: 6px 9px; } }
.support h3 { margin: 0 0 6px; }
.support p { margin: 0 0 10px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.support p b { color: var(--text, #fff); }
.support .link { margin-left: 8px; font-size: 13px; }
.upd-wrap { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.upd-h { font: 700 34px 'Barlow Condensed', sans-serif; margin: 0; }
.upd-main { display: grid; gap: 12px; min-width: 0; }
.upd-main > .hint { margin: 0 0 4px; }
.upd header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.upd time { color: var(--accent); font: 700 15px 'Barlow Condensed', sans-serif; letter-spacing: .5px; }
.upd h2 { margin: 0; font: 700 21px 'Barlow Condensed', sans-serif; }
.upd ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 5px; line-height: 1.45; }
.upd-side { position: sticky; top: 12px; }
@media (max-width: 860px) { .upd-wrap { grid-template-columns: 1fr; } .upd-side { position: static; order: -1; } .upd-h { font-size: 28px; } }
/* marcadores do formato Standard no Deck Builder */
.fmt-mark { position: absolute; left: 4px; right: 4px; top: 42%; z-index: 3; text-align: center; font: 700 10px/1.2 Inter, sans-serif; letter-spacing: .3px; padding: 3px 2px; border-radius: 5px; color: #fff; pointer-events: none; box-shadow: 0 2px 6px #0008; }
.fmt-mark.ban { background: #d6334acc; }
.fmt-mark.rot { background: #4a5468dd; }
.topnav .upd-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; padding: 5px 10px; background: #263755; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--text); }
.topnav .upd-btn:hover, .topnav .upd-btn.on { border-color: var(--accent); background: #263755; }
.topnav .upd-btn.new::after { content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px #0b1322; }
/* status de conexão só como bolinha no PC (o texto fica no title) para sobrar espaço no menu */
@media (min-width: 1001px) { .nav-right .conn { font-size: 0; gap: 0; } }
.topnav .nav-right a.upd-btn { order: 0; }
@media (max-width: 760px) { .topnav .nav-right a.upd-btn { padding: 4px 8px; font-size: 12px; } .nav-right { gap: 6px; } .nav-right .who-elo { display: none; } }
/* ===== identidade MugiSea TCG (logo nova e fundo do login) ===== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nav-logo { border-radius: 0; box-shadow: none; object-fit: contain; width: 46px; height: 46px; filter: drop-shadow(0 2px 4px #0006); }
.topnav .logo:hover .nav-logo { filter: drop-shadow(0 2px 4px #0006) brightness(1.12); }
@media (min-width: 1001px) and (max-width: 1350px) { .nav-logo { width: 40px; height: 40px; } }
.legal-top .nav-logo, .adm-top .nav-logo { width: 40px; height: 40px; }
.loading img { border-radius: 0; width: 170px; height: 170px; object-fit: contain; }
.auth-page { background: linear-gradient(#0b111c66, #0b111caa), url(/bg-dark.webp) center / cover no-repeat fixed, var(--bg); }
.auth-card { background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(8px); }
.auth-brand { align-items: center; text-align: center; }
.auth-logo { width: 220px; height: 220px; border-radius: 0; box-shadow: none; object-fit: contain; align-self: center; filter: drop-shadow(0 6px 18px #0008); margin-bottom: 4px; }
.auth-safe { text-align: left; }
@media (max-width: 800px) { .auth-logo { width: 150px; height: 150px; } }
/* seletor de preferências na Minha conta */
.pref-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
.seg-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.seg-pick button { flex: 1 1 auto; }
.seg-pick button.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; font-weight: 600; }
@media (max-width: 560px) { .pref-row { grid-template-columns: 1fr; } }
.pref-l { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.lang-pick { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: inherit; color: inherit; }
.lang-pick select { width: auto; padding: 2px 6px; font-size: 12px; }
.topnav .logo { background: linear-gradient(90deg, #ffd977 0%, #ffc04d 45%, #7fd3ff 60%, #4fb2ff 100%); -webkit-background-clip: text; background-clip: text; }
.nav-right button, .nav-right a { white-space: nowrap; }
/* nome no menu: MugiSeaTCG (Mugi dourado, Sea azul, como na logo) */
.topnav .logo { flex-shrink: 0; background: none; -webkit-text-fill-color: currentColor; color: var(--text); gap: 0; }
.topnav .logo .logo-txt { display: inline-flex; letter-spacing: .3px; }
.topnav .logo .logo-txt b, .topnav .logo .logo-txt i, .topnav .logo .logo-txt u { font: inherit; text-decoration: none; }
.topnav .logo .logo-txt b { color: #ffc94d; }
.topnav .logo .logo-txt i { color: #5cc2ff; }
.topnav .logo .logo-txt u { color: var(--text); margin-left: 1px; }
.topnav .logo .tag { margin-left: 6px; -webkit-text-fill-color: #1a1205; }

/* Meta · decks de torneio */
.tdecks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tdeck { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.tdeck img { width: 72px; border-radius: 6px; flex: none; }
.tdeck-info { display: grid; gap: 3px; min-width: 0; }
.tdeck-info span { overflow-wrap: anywhere; }
.tdeck-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.tdeck-btns a { color: var(--accent); font-size: 13px; }
@media (max-width: 430px) { .tdecks { grid-template-columns: 1fr; } }

/* Guia de regras (public/rules/*.md) */
.rules-intro { margin: 0; }
.rules-h1 { font: 700 22px 'Barlow Condensed'; margin: 14px 0 2px; }
.guide-body p { margin: 0 0 10px; }
.guide-body ul, .guide-body ol { margin: 0 0 10px; padding-left: 22px; }
.guide-body li { margin: 3px 0; }
.rules-table { overflow-x: auto; margin: 0 0 10px; }
.rules-table table { border-collapse: collapse; min-width: 100%; font-size: 13.5px; }
.rules-table th, .rules-table td { border: 1px solid var(--line, #ffffff1f); padding: 6px 10px; text-align: left; }
.rules-table th { background: var(--panel2, rgba(255,255,255,.04)); }

/* ---- Tutorial: professor no meio da tela + holofote */
.tut-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.tut-dim { position: absolute; inset: 0; width: 100%; height: 100%; }
.tut-shade { fill: rgba(4, 8, 18, .68); transition: fill .25s; }
.tut-layer.docked .tut-shade { fill: rgba(4, 8, 18, .28); }
.tut-rings i { position: absolute; border-radius: 12px; border: 3px solid var(--accent); box-shadow: 0 0 0 4px #f5b94233, 0 0 22px #f5b942aa; animation: tutRing 1.4s ease-in-out infinite; }
@keyframes tutRing { 50% { box-shadow: 0 0 0 9px #f5b94200, 0 0 30px #f5b942; } }
.tut-focus { position: relative; z-index: 3; }
.tut-card { pointer-events: auto; position: absolute; left: 50%; top: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
  background: linear-gradient(180deg, #1d2d4b, #111a2d); border: 1px solid #f5b94288; border-radius: 18px; padding: 18px 20px 16px; box-shadow: 0 24px 60px #000a, 0 0 0 1px #ffffff0d inset; color: var(--text); }
.tut-card.pop { animation: tutPop .28s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes tutPop { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.96); } }
.tut-card.shake { animation: tutShake .4s; }
@keyframes tutShake { 20%, 60% { margin-left: -8px; } 40%, 80% { margin-left: 8px; } }
.tc-head { display: flex; align-items: center; gap: 12px; }
.tc-ico { font-size: 30px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #f5b9421f; border: 1px solid #f5b94255; flex: none; }
.tc-lesson { display: grid; min-width: 0; flex: 1; }
.tc-lesson small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.tc-lesson b { font: 700 19px 'Barlow Condensed'; color: var(--accent); line-height: 1.15; }
.tc-x { width: 34px; height: 34px; padding: 0; border-radius: 10px; flex: none; }
.tc-dots { display: flex; gap: 5px; margin: 14px 0 12px; }
.tc-dots i { flex: 1; height: 5px; border-radius: 4px; background: #ffffff1a; }
.tc-dots i.ok { background: #f5b94299; }
.tc-dots i.now { background: var(--accent); box-shadow: 0 0 8px #f5b942aa; }
.tc-title { font: 700 26px 'Barlow Condensed'; margin: 0 0 8px; line-height: 1.1; }
.tc-say { font-size: 15.5px; line-height: 1.6; }
.tc-say b, .tc-tip b, .tc-task b { color: #ffe3a3; }
.tc-tip, .tc-task { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.tc-tip { background: #3ccf8e14; border: 1px solid #3ccf8e40; }
.tc-task { background: #f5b94214; border: 1px solid #f5b94266; }
.tc-tip > span, .tc-task > span { font-size: 18px; line-height: 1.3; }
.tc-task small { display: block; font: 700 12px 'Barlow Condensed'; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); }
.tc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.tc-count { color: var(--muted); font-size: 13px; }
.tc-foot .primary { width: auto; margin: 0; padding: 10px 18px; font-size: 15px; }
/* barra de tarefa (passos de ação, depois do "Entendi") */
.tut-card.dock { top: 10px !important; width: min(620px, calc(100vw - 16px)); padding: 10px 12px 8px; border-radius: 14px; }
.td-row { display: flex; align-items: center; gap: 10px; }
.td-ico { font-size: 20px; flex: none; }
.td-text { flex: 1; font-size: 14.5px; line-height: 1.4; font-weight: 600; }
.td-row button { width: 32px; height: 32px; padding: 0; margin: 0; border-radius: 9px; flex: none; }
.td-prog { height: 3px; margin-top: 8px; border-radius: 3px; background: #ffffff14; overflow: hidden; }
.td-prog i { display: block; height: 100%; background: var(--accent); transition: width .4s; }
@media (max-width: 760px) {
  .tut-card { padding: 14px 14px 12px; border-radius: 16px; }
  .tc-title { font-size: 22px; }
  .tc-say { font-size: 14.5px; line-height: 1.5; }
  .tc-ico { width: 40px; height: 40px; font-size: 24px; }
  .tc-foot .primary { flex: 1; }
  .td-text { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .tut-rings i, .tut-card.pop, .tut-card.shake { animation: none; } }

/* torneios: organizador de eventos */
.tr-badge.org { background: #a78bfa26; color: #c4b5fd; }
.tr-by { font-size: 13px; color: var(--muted); margin-top: 4px; }
.tr-org-note { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
@media (max-width: 760px) {
  .lib-head { flex-wrap: wrap; align-items: center; }
  .lib-head .hint { flex: 1 1 100%; margin-left: 0; order: 3; }
}

/* quem pode atacar agora (azul = seu, vermelho pulsando = do adversário) e quem entrou neste turno (cinza) */
.card.ready:not(.sel):not(.cand):not(.attacking):not(.target) { box-shadow: 0 0 0 2px var(--rdy, #4cc9f0), 0 0 10px var(--rdy, #4cc9f0); }
.card.ready.enemy { --rdy: #ff5a5a; }
.card.sick img { filter: grayscale(.75) brightness(.7); }
.card.sick::after { content: '💤'; position: absolute; top: 2px; right: 3px; font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 2px #000); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .card.ready.enemy:not(.sel):not(.cand):not(.attacking):not(.target) { animation: rdyPulse 1.6s ease-in-out infinite; } }
@keyframes rdyPulse { 50% { box-shadow: 0 0 0 2px #ff5a5a, 0 0 20px #ff5a5a; } }

/* ---------- estados da carta na mesa (congelada, efeito anulado, não ataca, imune...) ---------- */
.card .stx { position: absolute; top: 30%; right: -9px; display: flex; flex-direction: column; gap: 3px; z-index: 4; }
.card .stx .st { width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; line-height: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a3f4a, #0d1016); border: 1.5px solid #ffffff55; box-shadow: 0 2px 6px #000b; cursor: help; }
.card .stx .st-frozen { background: radial-gradient(circle at 35% 30%, #c9f2ff, #1d6c9c); border-color: #bdf0ff; }
.card .stx .st-negated { background: radial-gradient(circle at 35% 30%, #6b6b6b, #1a1a1a); border-color: #ff8a8a; }
.card .stx .st-noAttack, .card .stx .st-noAttackLeader, .card .stx .st-noAttackChars { background: radial-gradient(circle at 35% 30%, #ff7b7b, #7d1515); border-color: #ffc0c0; }
.card .stx .st-noRest { background: radial-gradient(circle at 35% 30%, #ffe08a, #7a5a00); border-color: #ffe9a8; }
.card .stx .st-immuneAll, .card .stx .st-immuneBattle, .card .stx .st-immuneEffect, .card .stx .st-noRemove { background: radial-gradient(circle at 35% 30%, #fff3c4, #a77b12); border-color: #ffe7a0; }
.card .stx .st-attackActive, .card .stx .st-noBlockers { background: radial-gradient(circle at 35% 30%, #ffb26b, #8a3d00); border-color: #ffd2a8; }
.card .stx .st-noBlock { background: radial-gradient(circle at 35% 30%, #9aa7ff, #252f8a); border-color: #c6ceff; }
/* congelada: camada de gelo por cima da carta */
.card .fx-ice { position: absolute; inset: 0; border-radius: 6px; pointer-events: none; z-index: 2; background: linear-gradient(160deg, #e6fbffdd 0%, #9ee3ff77 30%, #5cc8ff44 55%, #c9f4ffaa 100%); box-shadow: inset 0 0 0 2px #bdf0ff, inset 0 0 18px #7fd8ff; mix-blend-mode: screen; }
.card .fx-ice::before { content: '❄'; position: absolute; left: 6%; top: 4%; font-size: 15px; color: #fff; text-shadow: 0 0 6px #7fd8ff; opacity: .9; }
.card .fx-ice::after { content: '❄'; position: absolute; right: 18%; bottom: 14%; font-size: 11px; color: #fff; text-shadow: 0 0 6px #7fd8ff; opacity: .7; }
.card.st-frozen img { filter: saturate(.6) hue-rotate(-10deg) brightness(1.05); }
/* efeito anulado: carta acinzentada com faixas */
.card.st-negated img { filter: grayscale(1) brightness(.75) !important; }
.card .fx-neg { position: absolute; inset: 0; border-radius: 6px; pointer-events: none; z-index: 2; background: repeating-linear-gradient(135deg, #0000 0 9px, #ff3b3b33 9px 12px); }
/* não pode atacar: borda vermelha tracejada */
.card.st-noAttack:not(.sel):not(.cand):not(.target) { outline: 2px dashed #ff6b6b; outline-offset: 2px; }
/* imune: brilho dourado */
.card.st-immuneAll, .card.st-immuneBattle, .card.st-immuneEffect { --imm: #ffd76a; }
.card.st-immuneAll:not(.sel):not(.cand):not(.attacking):not(.target):not(.ready), .card.st-immuneBattle:not(.sel):not(.cand):not(.attacking):not(.target):not(.ready), .card.st-immuneEffect:not(.sel):not(.cand):not(.attacking):not(.target):not(.ready) { box-shadow: 0 0 0 1px #ffd76a99, 0 0 9px #ffd76a77; }
/* Banish: aura roxa; Double Attack: brilho laranja */
.card.fx-banish:not(.sel):not(.cand):not(.attacking):not(.target):not(.ready) { box-shadow: 0 0 0 1px #b46cff, 0 0 10px #8b3dff99; }
.card .kw .k-banish { border-left-color: #b46cff; color: #e0c4ff; background: linear-gradient(90deg, #1b1b1b, #3a1c5c); }
.card .kw .k-doubleAttack { border-left-color: #ff9d3d; color: #ffd2a3; background: linear-gradient(90deg, #1b1b1b, #5c2e0c); }
.card .kw .k-rush { border-left-color: #ffe14d; }
.card .kw .k-blocker { border-left-color: #4cc9f0; color: #bfeeff; background: linear-gradient(90deg, #1b1b1b, #0c3a4a); }
.card .kw .k-unblockable { border-left-color: #ff6bd6; color: #ffc4ef; background: linear-gradient(90deg, #1b1b1b, #4a0c3a); }
@media (max-width: 700px) { .card .stx { right: -6px; gap: 2px; } .card .stx .st { width: 16px; height: 16px; font-size: 9px; } }
@media (prefers-reduced-motion: no-preference) {
  .card .fx-ice { animation: iceShine 3.2s ease-in-out infinite; }
  @keyframes iceShine { 50% { box-shadow: inset 0 0 0 2px #e6fbff, inset 0 0 22px #7fd8ff; } }
}