:root {
  --bg1: #140a33;
  --bg2: #2a0f5c;
  --panel: #231450;
  --panel2: #2e1a66;
  --ink: #1a0f2e;
  --txt: #f4efff;
  --muted: #b9a9e6;
  --gold: #ffc83d;
  --gold2: #ff9f1c;
  --cyan: #3ee0ff;
  --pink: #ff4d6d;
  --violet: #8c6bff;
  --green: #4de08a;
  --r: 22px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--txt);
  background: radial-gradient(1200px 700px at 80% -10%, #7a2bbf 0%, transparent 60%),
              radial-gradient(900px 600px at -10% 110%, #0d6b9c 0%, transparent 60%),
              linear-gradient(160deg, var(--bg1), var(--bg2) 60%, #3b0f5c);
  background-attachment: fixed;
  overflow-x: hidden;
}
#stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#app { position: relative; z-index: 1; min-height: 100vh; }
h1, h2, h3, .game { font-family: 'Lilita One', 'Nunito', sans-serif; font-weight: 400; letter-spacing: .5px; }
h1, h2, h3 { margin: 0; }
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: middle; overflow: visible; }
.hide { display: none !important; }

/* ---------- Painéis ---------- */
.panel {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 4px solid var(--ink);
  border-radius: var(--r);
  box-shadow: 0 6px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,.18), inset 0 0 0 2px rgba(140,107,255,.35);
  padding: 18px;
  position: relative;
}
.panel.gold { box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px var(--gold), inset 0 2px 0 rgba(255,255,255,.3); }
.ribbon {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Lilita One'; font-size: 20px; color: var(--ink);
  background: linear-gradient(180deg, #ffe07a, var(--gold));
  border: 3px solid var(--ink); border-radius: 12px; padding: 4px 16px;
  box-shadow: 0 4px 0 var(--ink); position: relative; top: -34px; margin-bottom: -26px;
}
.ribbon .ico { font-size: 26px; }

/* ---------- Botões gordinhos animados ---------- */
.btn {
  --c1: #ffe07a; --c2: #ffb000; --tc: var(--ink);
  font-family: 'Lilita One', sans-serif; font-size: 20px; letter-spacing: .6px;
  color: var(--tc); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px; min-height: 58px;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  border: 4px solid var(--ink); border-radius: 18px;
  box-shadow: 0 7px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,.55), inset 0 -5px 0 rgba(0,0,0,.15);
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .12s cubic-bezier(.3,1.6,.5,1), box-shadow .12s;
  user-select: none;
}
.btn .ico { font-size: 30px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.btn::after {
  content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: rotate(20deg); animation: sheen 3.2s infinite;
}
@keyframes sheen { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,.55), inset 0 -5px 0 rgba(0,0,0,.15); }
.btn:active { transform: translateY(5px) scale(.98); box-shadow: 0 2px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,.4); }
.btn.cyan { --c1: #9ff4ff; --c2: #1fc3e8; }
.btn.pink { --c1: #ff9fb2; --c2: #ff3d63; --tc: #fff; text-shadow: 0 2px 0 var(--ink); }
.btn.violet { --c1: #b9a3ff; --c2: #7249ff; --tc: #fff; text-shadow: 0 2px 0 var(--ink); }
.btn.green { --c1: #a6ffc8; --c2: #22c46a; }
.btn.ghost { --c1: #3a2580; --c2: #2a1a60; --tc: #fff; }
.btn.block { width: 100%; }
.btn.small { font-size: 16px; min-height: 44px; padding: 8px 14px; border-radius: 14px; box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,.5); }
.btn.small .ico { font-size: 22px; }
.btn[disabled] { filter: grayscale(.9) brightness(.7); pointer-events: none; }
.btn.pulse { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

.iconbtn {
  width: 48px; height: 48px; border-radius: 14px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, #4a3399, #2e1a66); box-shadow: 0 4px 0 var(--ink);
  display: grid; place-items: center; cursor: pointer; position: relative; color: #fff;
  transition: transform .12s cubic-bezier(.3,1.6,.5,1);
}
.iconbtn .ico { font-size: 30px; }
.iconbtn:hover { transform: translateY(-2px) rotate(-4deg); }
.iconbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.dot {
  position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px;
  background: var(--pink); color: #fff; border: 2px solid var(--ink); border-radius: 12px;
  font: 13px/18px 'Lilita One'; text-align: center; animation: pop .5s;
}

/* ---------- Telas ---------- */
.screen { max-width: 1100px; margin: 0 auto; padding: 18px 16px 120px; animation: screenIn .45s cubic-bezier(.2,1.3,.4,1); }
@keyframes screenIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.float { animation: float 3s ease-in-out infinite; }
.center { text-align: center; }
.muted { color: var(--muted); }
.row { display: flex; gap: 12px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.title-xl { font-size: clamp(34px, 8vw, 58px); line-height: .95; color: #fff; text-shadow: 0 4px 0 var(--ink), 0 0 24px rgba(140,107,255,.8); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.title-l { font-size: 30px; color: #fff; text-shadow: 0 3px 0 var(--ink); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.sectitle { display: flex; align-items: center; gap: 10px; font-size: 26px; margin: 26px 0 14px; color: #fff; text-shadow: 0 3px 0 var(--ink); }
.sectitle .ico { font-size: 38px; }

/* ---------- Portal NFC ---------- */
.portal { max-width: 520px; }
.logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 18px; }
.logo .ico { font-size: 44px; animation: wobble 2.5s infinite; }
.logo b { font-family: 'Lilita One'; font-size: 26px; line-height: 1; text-shadow: 0 3px 0 var(--ink); }
.logo small { display: block; font-family: 'Lilita One'; color: var(--gold); font-size: 14px; letter-spacing: 3px; }
.chipzone { position: relative; width: 220px; height: 220px; margin: 0 auto 8px; display: grid; place-items: center; }
.chipzone img { width: 170px; height: 170px; border-radius: 50%; object-fit: cover; border: 5px solid var(--ink); box-shadow: 0 0 0 5px var(--cyan), 0 0 50px var(--cyan); position: relative; z-index: 2; animation: float 3s ease-in-out infinite; }
.chipzone .ring { position: absolute; inset: 20px; border-radius: 50%; border: 4px solid var(--cyan); animation: ring 2s infinite; opacity: 0; }
.chipzone .ring:nth-child(2) { animation-delay: .66s; }
.chipzone .ring:nth-child(3) { animation-delay: 1.33s; }
@keyframes ring { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.chiptag { display: inline-flex; align-items: center; gap: 8px; background: #0d0626; border: 3px solid var(--cyan); border-radius: 30px; padding: 6px 16px; font-family: 'Lilita One'; color: var(--cyan); letter-spacing: 1.5px; box-shadow: 0 0 18px rgba(62,224,255,.5); }
.chiptag .ico { font-size: 22px; }
.guild {
  display: flex; gap: 14px; align-items: center; margin: 26px 0 8px; padding: 14px;
  background: linear-gradient(135deg, #1ad0f0, #5a8bff); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink);
  color: var(--ink); animation: pop .6s .2s both;
}
.guild .emb { width: 66px; height: 66px; flex: none; display: grid; place-items: center; background: #fff; border: 4px solid var(--ink); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.guild .emb .ico { font-size: 44px; }
.guild small { font-family: 'Lilita One'; letter-spacing: 2px; opacity: .8; }
.guild h3 { font-size: 22px; line-height: 1.05; }
.heroslot {
  display: flex; align-items: center; gap: 12px; padding: 10px; cursor: pointer;
  background: #1a0e40; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink), inset 0 0 0 2px var(--gold);
  transition: transform .15s cubic-bezier(.3,1.6,.5,1);
}
.heroslot:hover { transform: translateY(-3px) scale(1.02); }
.heroslot:active { transform: translateY(3px); }
.heroslot img { width: 62px; height: 62px; border-radius: 14px; object-fit: cover; object-position: top; border: 3px solid var(--ink); }
.heroslot b { font-family: 'Lilita One'; font-size: 20px; }
.heroslot .go { margin-left: auto; font-size: 34px; animation: float 1.6s infinite; }
.lvl {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px;
  font-family: 'Lilita One'; font-size: 18px; color: var(--ink);
  background: linear-gradient(180deg, #ffe07a, var(--gold2)); border: 3px solid var(--ink);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-family: 'Lilita One'; margin: 18px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 3px; background: rgba(185,169,230,.3); border-radius: 3px; }
.mascote-mini { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; border: 4px solid var(--ink); box-shadow: 0 0 0 4px #fff, 0 0 30px var(--violet); margin: -70px auto 6px; background: #221640; }
.mascote-mini img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5) translateY(4%); }
.speech { background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 18px; padding: 10px 14px; font-weight: 800; position: relative; box-shadow: 0 4px 0 var(--ink); }
.speech::before { content: ''; position: absolute; top: -12px; left: 50%; margin-left: -10px; border: 10px solid transparent; border-bottom-color: var(--ink); border-top: 0; }

/* ---------- Formulários ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: 'Lilita One'; font-size: 16px; letter-spacing: .5px; color: var(--gold); }
.input {
  font: 800 18px 'Nunito'; color: var(--ink); padding: 12px 16px; min-height: 54px;
  background: #fff; border: 4px solid var(--ink); border-radius: 16px; box-shadow: inset 0 4px 0 rgba(0,0,0,.08); outline: none;
  transition: box-shadow .2s, transform .2s;
}
.input:focus { box-shadow: 0 0 0 4px var(--cyan), inset 0 4px 0 rgba(0,0,0,.08); transform: scale(1.01); }
.pin { letter-spacing: 16px; text-align: center; font-family: 'Lilita One'; font-size: 26px; }
.err { color: #ff9fb2; font-weight: 800; min-height: 22px; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---------- Criação de personagem ---------- */
.steps { display: flex; justify-content: center; gap: 8px; margin: 4px 0 18px; }
.steps i { width: 38px; height: 10px; border-radius: 6px; background: #3a2580; border: 2px solid var(--ink); }
.steps i.on { background: var(--gold); }
.classes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.ccard {
  cursor: pointer; border: 4px solid var(--ink); border-radius: 22px; overflow: hidden; background: #1a0e40;
  box-shadow: 0 7px 0 var(--ink); transition: transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .2s; position: relative;
}
.ccard:hover { transform: translateY(-6px) rotate(-1deg); }
.ccard.sel { box-shadow: 0 7px 0 var(--ink), 0 0 0 5px var(--c), 0 0 40px var(--c); transform: translateY(-6px) scale(1.02); }
.ccard .art { height: 230px; background-size: cover; background-position: center 15%; position: relative; }
.ccard .art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, #1a0e40); }
.ccard .cic { position: absolute; top: 10px; right: 10px; z-index: 2; width: 52px; height: 52px; border-radius: 50%; background: var(--c); border: 3px solid var(--ink); display: grid; place-items: center; }
.ccard .cic .ico { font-size: 36px; }
.ccard .body { padding: 4px 14px 14px; }
.ccard h3 { font-size: 26px; color: var(--c); text-shadow: 0 3px 0 var(--ink); }
.ccard p { margin: 4px 0 10px; font-size: 14px; color: var(--muted); font-weight: 700; }
.ccard .check { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 44px; display: none; animation: pop .4s; }
.ccard.sel .check { display: block; }
.minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; }
.mini .ico { font-size: 18px; }
.pips { display: flex; gap: 2px; }
.pips i { width: 6px; height: 10px; border-radius: 2px; background: #3a2580; }
.pips i.on { background: var(--pc, var(--gold)); }
.colors { display: flex; gap: 10px; flex-wrap: wrap; }
.colors button { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--ink); cursor: pointer; box-shadow: 0 4px 0 var(--ink); transition: transform .15s; }
.colors button.sel { transform: scale(1.2); box-shadow: 0 0 0 4px #fff, 0 4px 0 var(--ink); }

/* ---------- HUD ---------- */
.hud {
  position: sticky; top: 0; z-index: 20; padding: 10px 16px;
  background: linear-gradient(180deg, rgba(20,10,51,.97), rgba(20,10,51,.85)); backdrop-filter: blur(8px);
  border-bottom: 4px solid var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.25);
}
.hud .in { max-width: 1100px; margin: 0 auto; display: flex; gap: 12px; align-items: center; }
.avatar { position: relative; width: 58px; height: 58px; flex: none; cursor: pointer; }
.avatar img { width: 100%; height: 100%; border-radius: 16px; object-fit: cover; object-position: top; border: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--hc, var(--gold)); }
/* z-index 2: a skin levanta a img para z-index 1 (loja.css), e sem isto o
   badge de nível ficava atrás da foto. Abaixo da coroa de VIP (z-index 3). */
.avatar .lvl { position: absolute; bottom: -10px; right: -10px; transform: scale(.8); z-index: 2; }
.hud .who { flex: 1; min-width: 0; }
.hud .who b { font-family: 'Lilita One'; font-size: 19px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { height: 18px; background: #0d0626; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; position: relative; }
.bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(180deg, #a6ffc8, #22c46a); box-shadow: inset 0 3px 0 rgba(255,255,255,.4); transition: width .8s cubic-bezier(.2,1.2,.4,1); }
.bar.blue i { background: linear-gradient(180deg, #9ff4ff, #1fa3e8); }
.bar.red i { background: linear-gradient(180deg, #ffb0c0, #ff3d63); }
.bar.gold i { background: linear-gradient(180deg, #ffe07a, #ff9f1c); }
.bar span { position: absolute; inset: 0; display: grid; place-items: center; font: 12px 'Lilita One'; color: #fff; text-shadow: 0 1px 0 var(--ink), 0 0 3px var(--ink); letter-spacing: .5px; }
.res { display: flex; align-items: center; gap: 4px; font-family: 'Lilita One'; font-size: 18px; background: #0d0626; border: 3px solid var(--ink); border-radius: 14px; padding: 3px 10px 3px 4px; }
.res .ico { font-size: 26px; }
.res.bump { animation: pop .4s; }
@media (max-width: 560px) { .hud .res.hideSm { display: none; } }

/* ---------- Navegação inferior ---------- */
.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: center; gap: 4px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(20,10,51,.98), rgba(20,10,51,.9)); border-top: 4px solid var(--ink);
}
.nav a {
  flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px;
  color: var(--muted); text-decoration: none; font: 13px 'Lilita One'; letter-spacing: .4px; border-radius: 14px;
  transition: transform .15s cubic-bezier(.3,1.6,.5,1), background .2s;
}
.nav a .ico { font-size: 34px; filter: grayscale(.6) brightness(.8); transition: filter .2s, transform .2s; }
.nav a:hover .ico { transform: translateY(-4px) rotate(-8deg); }
.nav a.on { color: #fff; background: #3a2580; box-shadow: inset 0 0 0 3px var(--ink), inset 0 -4px 0 var(--gold); }
.nav a.on .ico { filter: none; transform: translateY(-6px) scale(1.15); }

/* ---------- Mapa ---------- */
.worldmap { position: relative; border: 5px solid var(--ink); border-radius: 26px; overflow: hidden; box-shadow: 0 8px 0 var(--ink), 0 0 60px rgba(140,107,255,.4); aspect-ratio: 3/2; background: #221640 center/cover; }
.worldmap::after { content: ''; position: absolute; inset: 0; background: radial-gradient(transparent 55%, rgba(20,10,51,.7)); pointer-events: none; }
.mpin {
  position: absolute; transform: translate(-50%, -100%); z-index: 2; cursor: pointer; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; animation: float 3s ease-in-out infinite;
}
.mpin .ball { width: 64px; height: 64px; border-radius: 50%; background: var(--c); border: 4px solid var(--ink); display: grid; place-items: center; box-shadow: 0 5px 0 var(--ink), 0 0 26px var(--c); transition: transform .2s cubic-bezier(.3,1.6,.5,1); }
.mpin .ball .ico { font-size: 44px; }
.mpin:hover .ball { transform: scale(1.18) rotate(-8deg); }
.mpin .lbl { margin-top: 6px; font: 15px 'Lilita One'; color: #fff; background: var(--ink); padding: 3px 10px; border-radius: 10px; white-space: nowrap; }
@media (max-width: 600px) { .mpin .ball { width: 46px; height: 46px; } .mpin .ball .ico { font-size: 30px; } .mpin .lbl { font-size: 11px; padding: 2px 6px; } }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.tile {
  text-decoration: none; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px;
  background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 55%, #1a0e40)); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 7px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,.4);
  transition: transform .18s cubic-bezier(.3,1.6,.5,1);
}
.tile:hover { transform: translateY(-5px) rotate(-1.5deg); }
.tile:active { transform: translateY(4px); }
.tile .ico { font-size: 64px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.3)); }
.tile b { font: 21px 'Lilita One'; text-shadow: 0 2px 0 var(--ink); }
.tile small { font-weight: 800; font-size: 13px; opacity: .95; text-shadow: 0 1px 0 var(--ink); text-align: center; }
.hello { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.hello .mascote-mini { margin: 0; flex: none; width: 76px; height: 76px; }
.hello .speech::before { top: 50%; left: -12px; margin: -10px 0 0; border: 10px solid transparent; border-right-color: var(--ink); border-left: 0; }

/* ---------- Missões ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tab { font: 16px 'Lilita One'; color: #fff; padding: 8px 14px; border-radius: 14px; background: #2a1a60; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: transform .12s; }
.tab .ico { font-size: 22px; }
.tab.on { background: var(--gold); color: var(--ink); transform: translateY(-2px); }
.quest { display: flex; gap: 14px; align-items: flex-start; }
.quest .qi { width: 72px; height: 72px; flex: none; border-radius: 18px; background: var(--c); border: 4px solid var(--ink); display: grid; place-items: center; box-shadow: 0 5px 0 var(--ink); }
.quest .qi .ico { font-size: 50px; }
.quest h3 { font-size: 22px; }
.quest p { margin: 4px 0 10px; font-weight: 700; color: var(--muted); }
.tag { display: inline-block; font: 12px 'Lilita One'; letter-spacing: 1px; padding: 2px 8px; border-radius: 8px; border: 2px solid var(--ink); background: var(--c, #3a2580); color: var(--ink); margin-right: 6px; }
.rewards { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-family: 'Lilita One'; }
.rewards span { display: inline-flex; align-items: center; gap: 4px; }
.rewards .ico { font-size: 22px; }
.quest.done { opacity: .6; }
.quest.done .qi { filter: grayscale(.5); }
.list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }

/* ---------- Arena / Batalha ---------- */
.bosscard { overflow: hidden; padding: 0; cursor: pointer; transition: transform .18s cubic-bezier(.3,1.6,.5,1); }
.bosscard:hover { transform: translateY(-6px); }
.bosscard .art { height: 220px; background: #0d0626 center/cover; position: relative; }
.bosscard .art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--panel)); }
.bosscard .body { padding: 0 16px 18px; margin-top: -30px; position: relative; }
.bosscard.won .art { filter: grayscale(.8); }
.stamp { position: absolute; top: 14px; right: 14px; z-index: 3; font: 18px 'Lilita One'; color: #fff; background: var(--green); border: 3px solid var(--ink); padding: 4px 12px; border-radius: 10px; transform: rotate(8deg); box-shadow: 0 4px 0 var(--ink); }
.battle { max-width: 640px; }
.arena { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 16px; }
.fighter { text-align: center; }
.fighter .pic { width: 100%; max-width: 180px; aspect-ratio: 1; margin: 0 auto 8px; border-radius: 24px; border: 4px solid var(--ink); background: #0d0626 center/cover; box-shadow: 0 6px 0 var(--ink), 0 0 30px var(--c, var(--violet)); }
.fighter .pic.hero { background-position: center 15%; }
.fighter b { font-family: 'Lilita One'; font-size: 18px; }
.vs { font: 44px 'Lilita One'; color: var(--gold); text-shadow: 0 4px 0 var(--ink); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; animation: pulse 1s infinite; }
.hearts { display: flex; justify-content: center; gap: 2px; font-size: 26px; }
.hearts .off { filter: grayscale(1) brightness(.5); }
.hitfx { animation: hitfx .45s; }
@keyframes hitfx { 0% { transform: translateX(0); filter: brightness(3); } 25% { transform: translateX(-12px) rotate(-4deg); } 50% { transform: translateX(10px) rotate(3deg); } 100% { transform: none; filter: none; } }
.qbox h3 { font-size: 24px; margin-bottom: 14px; line-height: 1.15; }
.opts { display: grid; gap: 12px; }
.opt {
  font: 800 18px 'Nunito'; text-align: left; color: var(--ink); padding: 14px 16px; cursor: pointer;
  background: #fff; border: 4px solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 var(--ink);
  display: flex; gap: 12px; align-items: center; transition: transform .12s cubic-bezier(.3,1.6,.5,1);
}
.opt:hover { transform: translateX(6px); background: #fff7d6; }
.opt:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.opt .k { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--violet); color: #fff; border: 3px solid var(--ink); display: grid; place-items: center; font-family: 'Lilita One'; }
.opt.ok { background: #a6ffc8; animation: pop .35s; }
.opt.bad { background: #ffb0c0; animation: shake .4s; }
.opt.escolhida:not(.ok):not(.bad) { background: #fff3b0; } /* esperando a correção do servidor */
/* Bordas da tela no golpe (golpeTela em js/app.js): acendem e apagam aos poucos; abaixo dos modais (80) */
.golpe-fx { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 75; pointer-events: none; opacity: 0; }
.golpe-fx.dano { box-shadow: inset 0 0 90px 24px rgba(255, 40, 70, .8); animation: golpeFx 1.2s ease-out; }
.golpe-fx.acerto { box-shadow: inset 0 0 90px 24px rgba(60, 230, 130, .75); animation: golpeFx 1.2s ease-out; }
@keyframes golpeFx { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.dmg { position: fixed; z-index: 90; font: 40px 'Lilita One'; color: var(--gold); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; pointer-events: none; animation: dmg 1s forwards; }
@keyframes dmg { 0% { transform: translate(-50%, 0) scale(.5); opacity: 0; } 20% { transform: translate(-50%, -20px) scale(1.3); opacity: 1; } 100% { transform: translate(-50%, -90px) scale(1); opacity: 0; } }

/* ---------- Árvore de habilidades ---------- */
.trees { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.tree { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.node { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 18px; background: #1a0e40; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); position: relative; }
.node .nb { width: 60px; height: 60px; flex: none; border-radius: 50%; background: #3a2580; border: 4px solid var(--ink); display: grid; place-items: center; }
.node .nb .ico { font-size: 38px; }
.node.learned .nb { background: var(--c); box-shadow: 0 0 20px var(--c); }
.node.locked { opacity: .55; }
.node.locked .nb .ico { filter: grayscale(1); }
.node .info { flex: 1; min-width: 0; }
.node b { font: 18px 'Lilita One'; display: block; }
.node small { font-weight: 700; color: var(--muted); display: block; }
.link { width: 8px; height: 22px; margin-left: 38px; background: #3a2580; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); }
.link.on { background: var(--c); box-shadow: 0 0 12px var(--c); }
/* Etapa de trilha que é atividade: o cartão inteiro vira link */
.node.linkable { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.node.linkable:hover, .node.linkable:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink), 0 0 0 3px var(--c); }
.node.linkable:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
/* Etapa em que o aluno parou */
.node.atual { box-shadow: 0 5px 0 var(--ink), 0 0 0 3px var(--c), 0 0 30px -2px var(--c); }
.tag.now { background: var(--c); color: #101728; font-weight: 900; }
/* Trilha como cartão colapsável: cabeçalho sempre visível, atividades ao abrir */
.trilhas-col { display: grid; gap: 12px; padding: 12px 12px 14px; }
.trailcard { border: 2px solid var(--ink); border-radius: 14px; background: color-mix(in srgb, var(--c) 10%, #141a30); box-shadow: 0 4px 0 var(--ink); overflow: hidden; }
.tc-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tc-head:hover { background: color-mix(in srgb, var(--c) 12%, transparent); }
.tc-head:active { transform: translateY(1px); }
.tc-ic { flex: 0 0 auto; font-size: 34px; color: var(--c); display: grid; place-items: center; }
.tc-txt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.tc-txt b { font-size: 17px; line-height: 1.2; }
.tc-txt small { font-size: 12px; font-weight: 800; }
.tc-txt .bar { margin-top: 2px; }
.tc-st { color: var(--c); }
.tc-chev { flex: 0 0 auto; font-size: 18px; opacity: .7; }
.tc-body { display: none; padding: 0 12px 14px; }
.trailcard.open .tc-body { display: block; }
.trailcard.open .tc-chev { opacity: 1; }
.trilha-topo { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px 0; font-size: 13px; font-weight: 800; }
/* Cartão "retomar a trilha" no mapa */
.retomar { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 16px; border-radius: 18px; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 26%, #17203a), #17203a); border: 2px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }
.retomar .rt-ic { font-size: 32px; color: var(--c); flex: 0 0 auto; }
.retomar b { display: block; font-size: 16px; line-height: 1.25; }
.retomar small { display: block; font-size: 12px; font-weight: 800; opacity: .85; }
/* Realce da atividade de destino quando o aluno chega pela trilha */
.destaque { animation: brilhaDestaque 2.6s ease-out; }
@keyframes brilhaDestaque {
  0%, 60% { box-shadow: 0 5px 0 var(--ink), 0 0 0 4px var(--c), 0 0 26px var(--c); }
  100% { box-shadow: 0 5px 0 var(--ink), 0 0 0 0 transparent; }
}
/* Tarja de propósito: mostra que a atividade foi chamada pela trilha e o que vem depois */
.ctxbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 14px; border-radius: 14px; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 16%, #141a30); box-shadow: 0 4px 0 var(--ink); }
.ctxbar .ctx-ic { font-size: 26px; color: var(--c); flex: 0 0 auto; }
.ctxbar .ctx-txt { flex: 1; min-width: 0; }
.ctxbar .ctx-txt b { display: block; font-size: 15px; line-height: 1.2; }
.ctxbar .ctx-txt small { display: block; font-size: 11.5px; font-weight: 800; opacity: .85; }
@media (max-width: 520px) { .ctxbar .btn { padding: 8px 10px; font-size: 12px; } }

/* Atividade de treino: a "aula" com a tarefa do aluno */
.modulo { text-align: center; padding: 22px 18px; border: 2px solid var(--c); border-radius: 20px; background: color-mix(in srgb, var(--c) 12%, #141a30); box-shadow: 0 5px 0 var(--ink); }
.modulo .mod-ic { font-size: 62px; color: var(--c); line-height: 1; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); }
.modulo .rewards { justify-content: center; margin-top: 12px; }
.mod-tarefas { margin-top: 14px; padding: 16px; border: 2px solid var(--ink); border-radius: 18px; background: #141a30; box-shadow: 0 4px 0 var(--ink); }
.mod-tarefas h3 { display: flex; align-items: center; gap: 8px; }
.check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-top: 8px; border-radius: 12px; border: 2px solid var(--ink); background: #1b2440; cursor: pointer; font-weight: 700; font-size: 14px; transition: background .15s; }
.check:hover { background: #223055; }
.check input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--c); cursor: pointer; }
.check.on { background: color-mix(in srgb, var(--c) 20%, #1b2440); }
.check.on span { text-decoration: line-through; opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .node.linkable { transition: none; }
  .node.linkable:hover, .node.linkable:active { transform: none; }
  .destaque { animation: none; outline: 4px solid var(--c); outline-offset: 2px; }
}

/* ---------- Ficha do personagem ---------- */
.sheet { display: grid; grid-template-columns: 330px 1fr; gap: 24px; }
@media (max-width: 860px) { .sheet { grid-template-columns: 1fr; } }
.portrait { position: relative; border: 5px solid var(--ink); border-radius: 24px; overflow: hidden; aspect-ratio: 4/5; background: #0d0626 center 15%/cover; box-shadow: 0 0 0 4px var(--hc), 0 8px 0 4px var(--ink); }
.portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13,6,38,.95)); }
.portrait .name { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; text-align: center; }
.portrait .name h2 { font-size: 34px; text-shadow: 0 3px 0 var(--ink); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.portrait .name span { font: 16px 'Lilita One'; color: var(--gold); letter-spacing: 1px; }
.portrait .lvlbig { position: absolute; top: 12px; left: 12px; z-index: 2; width: 70px; height: 76px; display: grid; place-items: center; background: linear-gradient(180deg, #ffe07a, var(--gold2)); border: 4px solid var(--ink); clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%); font-family: 'Lilita One'; color: var(--ink); line-height: .9; text-align: center; }
.portrait .lvlbig small { display: block; font-size: 12px; }
.portrait .lvlbig b { font-size: 32px; }
.portrait .clsic { position: absolute; top: 12px; right: 12px; z-index: 2; width: 58px; height: 58px; border-radius: 50%; background: var(--hc); border: 4px solid var(--ink); display: grid; place-items: center; }
.portrait .clsic .ico { font-size: 40px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-weight: 800; }
.kv dt { color: var(--muted); font-family: 'Lilita One'; font-weight: 400; }
.kv dd { margin: 0; }
.attrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.attr { background: #1a0e40; border: 3px solid var(--ink); border-radius: 16px; padding: 10px; display: flex; gap: 10px; align-items: center; box-shadow: 0 4px 0 var(--ink); }
.attr .ico { font-size: 38px; flex: none; }
.attr .v { font: 28px 'Lilita One'; margin-left: auto; color: var(--ac); text-shadow: 0 2px 0 var(--ink); }
.attr small { font: 14px 'Lilita One'; letter-spacing: .5px; display: block; }
.attr .pips i { width: 7px; height: 8px; }
.radarwrap { display: grid; place-items: center; }
.radar { width: 100%; max-width: 300px; }
.equip { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
.slot {
  aspect-ratio: 1; border-radius: 16px; border: 4px solid var(--ink); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 45%, #1a0e40), #120a30);
  box-shadow: 0 5px 0 var(--ink), inset 0 0 0 3px var(--rc); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; text-align: center; position: relative; cursor: pointer;
  transition: transform .15s cubic-bezier(.3,1.6,.5,1);
}
.slot:hover { transform: translateY(-4px) rotate(2deg); }
.slot .ico { font-size: 46px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.slot small { font: 11px 'Lilita One'; line-height: 1; letter-spacing: .3px; }
.slot.locked { --rc: #3a2580; }
.slot.locked .ico { filter: grayscale(1) brightness(.6); font-size: 36px; }
.slot.leg { animation: legglow 2s infinite; }
@keyframes legglow { 50% { box-shadow: 0 5px 0 var(--ink), inset 0 0 0 3px var(--rc), 0 0 24px var(--rc); } }
.slot .rtag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font: 10px 'Lilita One'; background: var(--rc); color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; padding: 0 5px; white-space: nowrap; }
.notes { display: flex; flex-direction: column; gap: 10px; }
.note { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: #1a0e40; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); animation: screenIn .4s both; }
.note .ico { font-size: 34px; flex: none; }
.note.new { box-shadow: 0 4px 0 var(--ink), inset 4px 0 0 var(--gold); }
.note b { display: block; font-family: 'Lilita One'; font-weight: 400; }
.note small { color: var(--muted); font-weight: 700; }
.note.linkavel { cursor: pointer; }
.note .note-ir { display: flex; align-items: center; gap: 4px; margin-top: 4px; font: 14px 'Lilita One'; color: var(--pink); }
.note .note-ir .ico { font-size: 16px; }

/* ---------- Guilda ---------- */
.rank { display: flex; flex-direction: column; gap: 10px; }
.rk { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #1a0e40; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); }
.rk.me { background: linear-gradient(90deg, #5a3cc9, #2e1a66); box-shadow: 0 4px 0 var(--ink), inset 0 0 0 3px var(--gold); transform: scale(1.02); }
.rk .pos { width: 40px; font: 24px 'Lilita One'; text-align: center; }
.rk img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; object-position: top; border: 3px solid var(--ink); }
.rk b { font-family: 'Lilita One'; font-weight: 400; font-size: 18px; }
.rk .xp { margin-left: auto; font-family: 'Lilita One'; color: var(--green); }

/* ---------- Modal / toast / confete ---------- */
.overlay { position: fixed; inset: 0; z-index: 80; background: rgba(10,4,30,.75); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; animation: fadein .25s; }
/* janela mais alta que a tela (ex.: convite de xadrez no iPhone): o fundo rola. margin:auto centraliza quando cabe e
   encosta no topo quando não cabe; o padding de cima deixa espaço para o ícone grande, que sobe 80px acima da janela */
.overlay { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-top: 90px; }
.overlay > .modal { margin: auto; }
@keyframes fadein { from { opacity: 0; } }
.modal { width: 100%; max-width: 420px; text-align: center; animation: pop .45s cubic-bezier(.2,1.4,.4,1); }
.modal .big { font-size: 110px; margin: -80px 0 4px; filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)); }
.modal .big .ico { animation: float 2s infinite; }
.modal h2 { font-size: 34px; color: var(--gold); text-shadow: 0 3px 0 var(--ink); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.modal p { font-weight: 800; }
.rays { position: absolute; left: 50%; top: 0; width: 360px; height: 360px; margin: -200px 0 0 -180px; background: repeating-conic-gradient(rgba(255,200,61,.25) 0 10deg, transparent 10deg 20deg); border-radius: 50%; animation: spin 12s linear infinite; z-index: -1; -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); }
.toasts { position: fixed; top: 86px; left: 50%; transform: translateX(-50%); z-index: 95; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 8px; font: 18px 'Lilita One'; color: var(--ink); background: linear-gradient(180deg, #ffe07a, var(--gold)); border: 3px solid var(--ink); border-radius: 16px; padding: 6px 16px; box-shadow: 0 5px 0 var(--ink); animation: toast 2.6s forwards; }
.toast .ico { font-size: 28px; }
.toast.err { background: linear-gradient(180deg, #ffb0c0, #ff5d7d); }
@keyframes toast { 0% { transform: translateY(-30px) scale(.6); opacity: 0; } 12% { transform: none; opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } }
.confetti { position: fixed; top: -20px; z-index: 99; width: 12px; height: 16px; border: 2px solid var(--ink); border-radius: 3px; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 85; width: min(420px, 92vw); background: linear-gradient(180deg, var(--panel2), var(--bg1)); border-left: 4px solid var(--ink); padding: 18px; overflow-y: auto; animation: slidein .35s cubic-bezier(.2,1.2,.4,1); }
@keyframes slidein { from { transform: translateX(100%); } }

/* ajustes pós-teste */
.worldmap { max-width: calc(62vh * 1.5); margin: 0 auto; }
.tiles.wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.attrs { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.attr { padding: 8px; gap: 8px; }
.attr > div { min-width: 0; }
.attr .pips { flex-wrap: wrap; }
.attr .pips i { width: 5px; }
.attr .v { font-size: 24px; }

/* ---------- Eventos ---------- */
.dot.gold { background: var(--gold); color: var(--ink); }
.rankbtn { text-decoration: none; }
.mpin .evst { margin-top: 3px; font: 11px 'Lilita One'; letter-spacing: .5px; color: var(--ink); background: #fff; border: 2px solid var(--ink); padding: 0 6px; border-radius: 8px; white-space: nowrap; }
.mpin.ev-live .evst { background: var(--pink); color: #fff; animation: pulse 1s infinite; }
.mpin.ev-live .ball { animation: livering 1.4s infinite; }
@keyframes livering { 0% { box-shadow: 0 5px 0 var(--ink), 0 0 0 0 var(--c); } 70% { box-shadow: 0 5px 0 var(--ink), 0 0 0 18px transparent; } 100% { box-shadow: 0 5px 0 var(--ink), 0 0 0 0 transparent; } }
.mpin.ev-breve .ball { filter: saturate(.8); }
.mapvazio { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; max-width: 80%; text-align: center; }
.evcard, .evlink { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--txt); transition: transform .18s cubic-bezier(.3,1.6,.5,1); }
.evcard:hover, .evlink:hover { transform: translateY(-4px) rotate(-.5deg); }
.evcard:active, .evlink:active { transform: translateY(3px); }
.evcard h3, .evlink h3 { font-size: 21px; margin: 6px 0 2px; }
.evcard small { font-weight: 800; }
.evcard.ev-fim { opacity: .55; }
.evcard.ev-live { box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px var(--pink), 0 0 30px rgba(255,77,109,.35); }
.evic { width: 70px; height: 70px; flex: none; border-radius: 20px; background: var(--c); border: 4px solid var(--ink); display: grid; place-items: center; box-shadow: 0 5px 0 var(--ink); }
.evic .ico { font-size: 48px; }
.evtag { display: inline-block; font: 12px 'Lilita One'; letter-spacing: 1px; padding: 2px 8px; border-radius: 8px; border: 2px solid var(--ink); margin-right: 6px; background: #fff; color: var(--ink); }
.evtag.live { background: var(--pink); color: #fff; animation: pulse 1s infinite; }
.evtag.fim { background: #3a2580; color: var(--muted); }
.evtag.big { font-size: 16px; padding: 4px 14px; border-width: 3px; }
.evok { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 14px 'Lilita One'; color: var(--green); }
.evok .ico { font-size: 20px; }
.evhero { text-align: center; margin-top: 60px; box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px var(--c), 0 0 40px color-mix(in srgb, var(--c) 40%, transparent); }
.evbig { width: 120px; height: 120px; margin: -80px auto 10px; border-radius: 50%; background: var(--c); border: 5px solid var(--ink); display: grid; place-items: center; box-shadow: 0 7px 0 var(--ink), 0 0 40px var(--c); }
.evbig .ico { font-size: 84px; }
.evmeta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font: 16px 'Lilita One'; color: var(--gold); margin: 6px 0 4px; }
.evmeta span { display: inline-flex; align-items: center; gap: 6px; }
.evmeta .ico { font-size: 22px; }
@media (max-width: 600px) {
  .worldmap { aspect-ratio: 1 / 1; max-width: none; }
  .mpin .lbl { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
}
/* pino ancorado pela base-centro mesmo flutuando */
.mpin { animation-name: pinfloat; }
@keyframes pinfloat { 0%, 100% { transform: translate(-50%, -100%); } 50% { transform: translate(-50%, calc(-100% - 10px)); } }

/* ---------- Arena: inscrição e prêmios ---------- */
.premios { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.premios .pr { flex: 1 1 90px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 8px; border-radius: 14px; border: 3px solid var(--ink); background: #1a0e40; box-shadow: 0 4px 0 var(--ink); text-align: center; }
.premios .pr > .ico { font-size: 28px; }
.premios .pr small { font: 11px 'Lilita One'; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.premios .pr b { font: 16px 'Lilita One'; font-weight: 400; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.premios .pr b .ico { font-size: 18px; }
.premios .pr.ins { box-shadow: 0 4px 0 var(--ink), inset 0 0 0 2px var(--gold); }
.premios .pr.ins b { color: var(--gold); }
.premios .pr.win { box-shadow: 0 4px 0 var(--ink), inset 0 0 0 2px var(--green); }
.premios .pr.win b { color: var(--green); }
.premios .pr.lose b { color: var(--cyan); }

/* ---------- Roleta Diária ---------- */
.roleta { position: relative; width: min(340px, 86vw); aspect-ratio: 1; margin: 0 auto; }
.roleta::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; background: conic-gradient(#ffc83d, #ff4d6d, #8c6bff, #3ee0ff, #4de08a, #ffc83d); filter: blur(18px); opacity: .55; animation: spin 8s linear infinite; }
.roda { position: relative; width: 100%; height: 100%; border-radius: 50%; border: 6px solid var(--ink); box-shadow: 0 8px 0 var(--ink), 0 0 0 6px var(--gold), 0 8px 0 6px var(--ink); background: #1a0f2e; will-change: transform; }
.rodasvg { width: 100%; height: 100%; display: block; }
.rodatxt { font: 13px 'Lilita One'; fill: #fff; paint-order: stroke; stroke: #1a0f2e; stroke-width: 3.5px; letter-spacing: .3px; }
.rodaxp { font: 19px 'Lilita One'; fill: #fff3c4; paint-order: stroke; stroke: #1a0f2e; stroke-width: 5px; letter-spacing: .5px; }
.rodaval { font: 17px 'Lilita One'; fill: #fff; paint-order: stroke; stroke: #1a0f2e; stroke-width: 4.5px; letter-spacing: .5px; }
.giros-rest { display: block; margin-top: 2px; font-size: 15px; letter-spacing: 4px; opacity: .9; }
.ponteiro { position: absolute; top: -26px; left: 50%; z-index: 3; width: 44px; height: 54px; margin-left: -22px; background: linear-gradient(180deg, #ff9fb2, #ff3d63); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 4px 0 var(--ink)); }
.roleta.feita .roda { filter: saturate(.85); }
.contagem { font-family: 'Lilita One'; color: var(--gold); letter-spacing: 1px; }

/* Ícone da roleta no topo: colorido e girando = liberado; cinza = já girou hoje */
/* Sino dos pergaminhos chamando a atenção (convite de duelo que chegou durante uma atividade): cresce e balança até ser aberto */
.iconbtn.sino-chama { background: linear-gradient(180deg, #ffe07a, var(--gold)); color: var(--ink); animation: sinoChama 1.1s ease-in-out infinite; }
@keyframes sinoChama { 0%, 100% { transform: scale(1); box-shadow: 0 4px 0 var(--ink); } 40% { transform: scale(1.3) rotate(-10deg); box-shadow: 0 4px 0 var(--ink), 0 0 22px var(--gold); } 60% { transform: scale(1.3) rotate(10deg); box-shadow: 0 4px 0 var(--ink), 0 0 22px var(--gold); } }
@media (prefers-reduced-motion: reduce) { .iconbtn.sino-chama { animation: none; box-shadow: 0 4px 0 var(--ink), 0 0 22px var(--gold); } }
.iconbtn.roleta-on {background: linear-gradient(180deg, #ff9fb2, #8c6bff); box-shadow: 0 4px 0 var(--ink), 0 0 16px rgba(255,200,61,.8); }
.iconbtn.roleta-on .ico { animation: spin 4s linear infinite; }
.iconbtn.roleta-off { cursor: not-allowed; filter: grayscale(1) brightness(.55); box-shadow: 0 2px 0 var(--ink); }
.iconbtn.roleta-off:hover { transform: none; }
@media (max-width: 480px) { .hud .who span.muted { display: none; } }
@media (max-width: 480px) {
  .hud { padding: 8px 10px; }
  .hud .in { gap: 7px; }
  .hud .avatar { width: 48px; height: 48px; }
  .hud .iconbtn { width: 40px; height: 40px; border-radius: 12px; }
  .hud .iconbtn .ico { font-size: 25px; }
  .hud .res { padding: 2px 7px 2px 3px; font-size: 16px; }
  .hud .res .ico { font-size: 22px; }
  .hud .who b { font-size: 16px; }
  .hud .bar span { font-size: 10px; }
}

/* Barra do usuário: sem nome, barra de XP ocupa todo o espaço livre */
.hud .who { flex: 1 1 0; min-width: 56px; display: flex; align-items: center; }
.hud .xpbar { width: 100%; height: 24px; border-radius: 13px; }
.hud .xpbar i { border-radius: 9px; }
.hud .xpbar span { font-size: clamp(10px, 2.9vw, 14px); white-space: nowrap; letter-spacing: .3px; }
@media (max-width: 480px) { .hud .xpbar { height: 22px; } }
/* Meu dia (js/app/hud/hoje.js): barrinha do XP de hoje (ou da meta) embaixo da barra de nível e a chama da sequência */
.hud .who { position: relative; }
.hud .hojebar { position: absolute; left: 10px; right: 10px; bottom: -6px; height: 5px; border-radius: 3px; background: #1a0e40; border: 1px solid var(--ink); overflow: hidden; }
.hud .xpbar span { grid-auto-flow: column; justify-content: center; }
.hud .xpbar:not(.max) span::after { content: '\00a0XP'; }
.hud .hojebar b { display: block; height: 100%; background: linear-gradient(90deg, #ff9a3d, #ffc83d); transition: width .4s; }
.hud .hojebar.ok b { background: linear-gradient(90deg, #22c46a, #a6ffc8); }
.hud .seqbtn .ico { color: #6b5a9e; }
.hud .seqbtn.risco .ico { color: #ffb02e; }
.hud .seqbtn.on .ico { color: #ff7a1a; filter: drop-shadow(0 0 6px #ff9a3d); }
.hud .seqbtn .dot { background: #ff7a1a; }
.hoje-box { text-align: left; font-weight: 700; }
.hoje-seq { display: flex; gap: 10px; align-items: center; }
.hoje-seq > .ico { font-size: 42px; color: #ff7a1a; flex: none; }
.hoje-seq b { font: 22px 'Lilita One'; display: block; }
.hoje-seq small { display: block; opacity: .85; }
.hoje-l { margin: 10px 0 4px; }
.hoje-l .ico { vertical-align: -3px; }
.hoje-barra { display: block; height: 10px; border-radius: 6px; background: #1a0e40; border: 2px solid var(--ink); overflow: hidden; }
.hoje-barra i { display: block; height: 100%; background: linear-gradient(90deg, #ff9a3d, #ffc83d); }
.hoje-barra.meta i { background: linear-gradient(90deg, #22c46a, #a6ffc8); }
.bc-chips .rend { color: #ffb02e; }
.hoje-metas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.hoje-metas .btn { flex-direction: column; gap: 0; padding: 6px 4px; line-height: 1.1; }
.hoje-metas .btn small { font: 12px 'Nunito', sans-serif; font-weight: 800; opacity: .85; }
@media (max-width: 480px) { .hud .xpbar span::after { content: none !important; } .hud .seqbtn { width: 34px; } .hud .seqbtn .ico { font-size: 22px; } }
.extrato-dia { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 14px; }
.extrato-dia b { font: 18px 'Lilita One'; min-width: 52px; }
.extrato-dia small { flex-basis: 100%; opacity: .8; }
.extrato-dias .ganho, .extrato-itens .ganho { color: #6ff0a4; font-weight: 900; }
.extrato-dias .perda, .extrato-itens .perda { color: #ff6b8b; font-weight: 900; }
.extrato-item { display: flex; gap: 12px; align-items: flex-start; padding: 6px 2px; border-bottom: 1px solid #ffffff14; }
.extrato-item > span { min-width: 54px; text-align: right; font: 17px 'Lilita One'; }
.extrato-item b { display: block; font-weight: 800; }
.extrato-item small { display: block; }
@media (max-width: 360px) {
  .hud { padding: 7px 8px; }
  .hud .in { gap: 5px; }
  .hud .avatar { width: 42px; height: 42px; }
  .hud .avatar .lvl { transform: scale(.7); bottom: -12px; right: -12px; }
  .hud .iconbtn { width: 36px; height: 36px; border-width: 2px; border-radius: 10px; }
  .hud .iconbtn .ico { font-size: 22px; }
  .hud .dot { min-width: 18px; height: 18px; font-size: 11px; line-height: 15px; top: -7px; right: -7px; }
  .hud .res { font-size: 14px; border-width: 2px; padding: 1px 6px 1px 2px; gap: 2px; }
  .hud .res .ico { font-size: 19px; }
}

/* Nenhuma grade exige mais que a largura da tela (celulares de 320px) */
.list { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.trees { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.tiles.wide { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.classes { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
/* brilhos e destaques não criam rolagem lateral */
.screen { overflow-x: clip; }

/* ---------- Arena: chefões sem imagem, recordes, cronômetro ---------- */
.bosscard .art.semimg, .pic.semimg, .hc-art.semimg { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c) 55%, transparent), #0d0626 70%); }
.bosscard .art.semimg .ico { font-size: 120px; filter: drop-shadow(0 0 18px var(--c)); animation: pinfloatChefe 3s ease-in-out infinite; }
.pic.semimg .ico { font-size: 70px; filter: drop-shadow(0 0 12px var(--c)); }
@keyframes pinfloatChefe { 50% { transform: translateY(-8px) scale(1.04); } }
.bosscard.nivelbloq .art { filter: grayscale(1) brightness(.55); }
.tag.especial { --c: #3ee0ff; display: inline-flex; align-items: center; gap: 3px; }
.tag.especial .ico { font-size: 14px; }
.dific { color: #ffc83d; font-size: 15px; letter-spacing: 1px; white-space: nowrap; display: block; }
.recorde { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 200, 61, .12); border: 2px dashed rgba(255, 200, 61, .55); font-weight: 800; font-size: 14px; color: #ffe7a3; }
.recorde .ico { font-size: 22px; flex: none; }
/* card do chefe: inscrição, vitória, tempo e recorde em chips de ícone + número */
.bc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.bc-chips span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: #1a0e40; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font: 15px 'Lilita One'; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bc-chips span .ico { font-size: 18px; flex: none; }
.bc-chips .ins { color: var(--gold); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 1px var(--gold); }
.bc-chips .win { color: var(--green); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 1px var(--green); }
.bc-chips .rec { color: #ffe7a3; background: rgba(255, 200, 61, .12); }
.recorde small { color: #cbb8ff; }
.cronometro .ico { font-size: 22px; }
.cronometro.urgente { color: #ff4d6d; animation: pulse .6s infinite; }
.novorecorde { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Lilita One'; font-size: 20px; color: #ffc83d; text-shadow: 0 2px 0 var(--ink); }
.novorecorde .ico { font-size: 32px; }

/* ---------- Hall dos Chefões ---------- */
.hallcard { padding: 14px; border-color: var(--c); }
.hc-top { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.hc-top > div:last-child { display: flex; flex-direction: column; min-width: 0; }
.hc-art { width: 64px; height: 64px; flex: none; border-radius: 16px; border: 3px solid var(--ink); background: #0d0626 center/cover; }
.hc-art.semimg .ico { font-size: 40px; }
.hc-nome { font-family: 'Lilita One'; font-size: 20px; color: var(--c); }
.trono { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; border: 3px solid var(--ink); background: linear-gradient(90deg, rgba(255, 200, 61, .28), rgba(255, 200, 61, .06)); box-shadow: 0 4px 0 var(--ink); }
.trono > .ico { font-size: 30px; flex: none; }
.trono img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 3px solid var(--hc, #fff); flex: none; }
.trono div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.trono b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trono small { color: #cbb8ff; font-weight: 800; }
.trono .tempo { font-family: 'Lilita One'; font-size: 22px; color: #ffc83d; }
.trono.me { outline: 3px solid #4de08a; }
.trono.vazio { background: rgba(255, 255, 255, .05); }
.hc-lista { margin: 8px 0 0; padding-left: 26px; font-weight: 800; }
.hc-lista li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed rgba(255, 255, 255, .12); }
.hc-lista li small { color: #cbb8ff; }
.hc-lista li.me { color: #4de08a; }

/* ---------- Rankings (abas) ---------- */
.rk-abas { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; margin-top: 14px; scrollbar-width: thin; }
.rk-abas button { flex: none; display: inline-flex; align-items: center; gap: 5px; font: 15px 'Lilita One'; color: #d9cffb; background: #2a1a60; border: 3px solid var(--ink); border-radius: 14px; padding: 6px 12px; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.rk-abas button .ico { font-size: 20px; }
.rk-abas button.on { background: linear-gradient(180deg, #ffe07a, #ffb000); color: var(--ink); }
.rk-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 6px; }
.rk-filtros select { min-height: 44px; flex: 1 1 200px; font-size: 16px; padding: 6px 12px; }
.rk-per { display: inline-flex; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; }
.rk-per button { font: 14px 'Lilita One'; color: #d9cffb; background: #1a0e40; border: 0; padding: 8px 12px; cursor: pointer; min-height: 40px; }
.rk-per button + button { border-left: 2px solid var(--ink); }
.rk-per button.on { background: var(--cyan); color: var(--ink); }
.rk-abas button:focus-visible, .rk-per button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.rk-eu { text-align: center; color: var(--muted); font-weight: 900; letter-spacing: 4px; }

/* botão discreto para o aluno reportar erro numa pergunta do banco */
.qbox .reportar { display: block; margin: 10px auto 0; background: none; border: 0; color: var(--muted); font: 700 13px 'Nunito'; cursor: pointer; text-decoration: underline; }
.qbox .reportar:hover { color: #fff; }



/* Atributos da ficha: barra do valor em relação ao teto do nível */
.abar { display: block; height: 10px; margin-top: 4px; border-radius: 6px; background: #3a2580; border: 2px solid var(--ink); overflow: hidden; }
.abar i { display: block; height: 100%; background: var(--pc, var(--gold)); border-radius: 4px; }
.attr > div { flex: 1; min-width: 0; }

/* Arena: duelos entre heróis */
.dueloinfo .poder { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.dueloinfo .poder span { display: flex; align-items: center; gap: 6px; background: #1a0e40; border: 3px solid var(--ink); border-radius: 12px; padding: 6px 10px; font-weight: 800; }
.dueloinfo .poder span .ico { font-size: 24px; }
.dueloinfo .poder span small { color: var(--muted); }
.dueloinfo .poder span b { font: 18px 'Lilita One'; }
.reinos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.reino { display: inline-flex; align-items: center; gap: 8px; font: 16px 'Lilita One'; color: #fff; padding: 8px 14px; border-radius: 14px; background: #2a1a60; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); cursor: pointer; }
.reino .ico { font-size: 24px; }
.reino.on { background: var(--c); color: var(--ink); transform: translateY(-2px); }
.reino:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.sectitle .btn.small { font-size: 14px; min-height: 36px; padding: 4px 12px; }
.onlinecard { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.onlinecard b { font: 18px 'Lilita One'; display: block; }
.onlinecard small { display: block; font-weight: 800; }
.onlinecard .avatar.mini { flex: none; }
.eqajuda { margin: 12px 0 0; color: var(--muted); font-weight: 700; font-size: 13.5px; line-height: 1.5; }
.eqajuda b { color: #fff; }

/* Duelo: desafiar um colega pelo nick */
.nickduelo { display: flex; gap: 8px; align-items: stretch; }
.nickduelo .input { flex: 1; min-width: 0; margin: 0; }
.nickduelo .btn { flex: none; }

/* ---------- Arena de duelos: visual de jogo (lobby .dl e combate .battle.duelo) ----------
   Tudo escopado: a batalha contra chefes reutiliza .arena/.fighter/.qbox/.opt e não muda. */
.dl-palco { overflow: hidden; isolation: isolate; padding-top: 20px;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 77, 109, .28), transparent 60%),
              radial-gradient(80% 60% at 50% 110%, rgba(62, 224, 255, .18), transparent 70%),
              linear-gradient(180deg, #2e1a66, #170b3a);
  box-shadow: 0 6px 0 var(--ink), inset 0 0 0 2px rgba(255, 200, 61, .45), inset 0 2px 0 rgba(255,255,255,.2); }
.dl-luz { position: absolute; inset: -40% -20% auto; height: 120%; z-index: -1; pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%, transparent 0 150deg, rgba(255,255,255,.10) 165deg 175deg, transparent 190deg 200deg, rgba(255,255,255,.08) 205deg 212deg, transparent 225deg); }
.dl-titulo { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 8px; font-size: 30px; text-align: center;
  color: var(--gold); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink), 0 0 22px rgba(255, 77, 109, .6); }
.dl-titulo .ico { font-size: 34px; filter: drop-shadow(0 3px 0 var(--ink)); }
.dl-regras { margin: 0 auto 12px; text-align: center; }
.dl-regras summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font: 14px 'Lilita One'; letter-spacing: .5px; color: var(--cyan); padding: 4px 12px; border-radius: 999px; background: rgba(62, 224, 255, .1); border: 2px solid rgba(62, 224, 255, .4); }
.dl-regras summary::-webkit-details-marker { display: none; }
.dl-regras summary::before { content: '?'; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--cyan); color: var(--ink); font-size: 12px; }
.dl-regras p { font-weight: 800; margin: 8px 0 0; text-align: left; }
.dl-regras summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
/* prêmios: aposta → pote do vencedor (o pote é o protagonista) */
.dl .premios .pr { background: linear-gradient(180deg, #24135a, #120838); }
.dl .premios .pr.win { flex: 1.6 1 140px; background: radial-gradient(120% 90% at 50% 0%, rgba(77, 224, 138, .35), transparent 70%), linear-gradient(180deg, #1d4a3c, #0e2620);
  box-shadow: 0 4px 0 var(--ink), inset 0 0 0 2px var(--green), 0 0 22px rgba(77, 224, 138, .35); }
.dl .premios .pr.win > .ico { font-size: 36px; filter: drop-shadow(0 0 10px rgba(255, 200, 61, .8)); animation: dlBrilho 2.4s ease-in-out infinite; }
.dl .premios .pr.win b { font-size: 18px; }
@keyframes dlBrilho { 50% { transform: translateY(-3px) scale(1.08); } }
/* poder do herói: medalhões em vez de linha de tabela */
.dl .poder { justify-content: center; }
.dl .poder span { flex-direction: column; gap: 0; min-width: 74px; padding: 6px 10px 4px; background: radial-gradient(circle at 50% 20%, #3a2580, #150a38); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.dl .poder span .ico { font-size: 28px; }
.dl .poder span b { font-size: 22px; line-height: 1; order: 1; }
.dl .poder span small { order: 2; font-size: 11px; font-family: 'Lilita One'; letter-spacing: .5px; text-transform: uppercase; }
.dl .poder .btn.small { font-size: 14px; min-height: 40px; padding: 4px 12px; }
.dl-legenda { margin: 14px 0 8px; font: 15px 'Lilita One'; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); text-shadow: 0 2px 0 var(--ink); display: flex; align-items: center; gap: 8px; }
.dl-legenda::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, rgba(255, 200, 61, .6), transparent); }
/* reinos: estandartes */
.dl .reinos { flex-wrap: wrap; gap: 6px; padding: 6px 0 10px; margin-bottom: 8px; } /* todos os reinos sempre visíveis, sem rolagem: as flâmulas dividem a largura */
.dl .reino { flex: 1 1 64px; min-width: 0; flex-direction: column; gap: 4px; padding: 10px 4px 16px; font-size: clamp(10px, 3.1vw, 14px); white-space: nowrap; text-align: center;
  /* sem color-mix (o Safari do iOS 15 não tem; com var() a regra nem cai na reserva, a flâmula ficava sem cor):
     #2a1a60 a 70% por cima da cor do reino = a mesma mistura de 30% da cor */
  background: linear-gradient(180deg, rgba(42, 26, 96, .7), #1a0e40) var(--c);
  clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%); border-radius: 12px 12px 0 0; box-shadow: none; transition: transform .15s; }
.dl .reino .ico { font-size: clamp(26px, 8vw, 34px); filter: drop-shadow(0 2px 0 var(--ink)); }
.dl .reino:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--cyan); } /* o clip-path cortaria o outline */
.dl .reino.on { background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0)) var(--c); transform: translateY(-4px); } /* = 85% da cor + 15% de branco no topo, sem color-mix */
/* CTA: o botão principal da tela */
.dl .dl-cta { min-height: 66px; font-size: 22px; margin-top: 6px; box-shadow: 0 6px 0 var(--ink), 0 0 26px rgba(255, 77, 109, .55); animation: dlChama 1.8s ease-in-out infinite; }
.dl .dl-cta:disabled { animation: none; box-shadow: 0 6px 0 var(--ink); }
@keyframes dlChama { 50% { box-shadow: 0 6px 0 var(--ink), 0 0 40px rgba(255, 77, 109, .85); } }
/* campo de nick: escuro, como o resto do jogo (não um formulário branco) */
.dl .nickduelo .input { background: #120838; color: #fff; border-color: var(--ink); box-shadow: inset 0 0 0 2px rgba(255, 200, 61, .5); font-weight: 800; }
.dl .nickduelo .btn { padding: 10px 16px; font-size: 18px; }
.dl .nickduelo .input::placeholder { color: #8a7bc0; }
.dl .nickduelo .input:focus { box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px rgba(255, 200, 61, .45); outline: none; }
/* heróis online: cartas de desafiante */
.dl .onlines { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.dl .onlinecard { padding: 10px 12px; background: linear-gradient(110deg, #3a2580, #1a0e40 70%); box-shadow: 4px 5px 0 var(--ink), inset 0 0 0 2px rgba(255, 77, 109, .25); }
.dl .onlinecard .avatar.mini { width: 48px; height: 48px; }
.dl .onlinecard b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl .onlinecard small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-on { position: absolute; z-index: 2; right: -4px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--green); border: 3px solid var(--ink); animation: dlOn 1.6s ease-in-out infinite; }
.dl .onlinecard.ocupado { filter: saturate(.55); }
.dl .onlinecard.ocupado .dl-on { background: var(--gold); animation: none; }
@keyframes dlOn { 50% { box-shadow: 0 0 0 5px rgba(77, 224, 138, .25); } }

/* combate */
.battle.duelo .dl-topo { flex-wrap: wrap; gap: 8px; }
.battle.duelo .dl-topo .title-l { color: var(--gold); text-shadow: 0 3px 0 var(--ink); }
.battle.duelo .cronometro { font: 20px 'Lilita One'; padding: 4px 12px; border-radius: 999px; background: #120838; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 2px rgba(62, 224, 255, .45); }
.battle.duelo .cronometro.urgente { box-shadow: 0 3px 0 var(--ink), inset 0 0 0 2px var(--pink), 0 0 16px rgba(255, 77, 109, .7); }
.battle.duelo .arena, .dl .dl-ringue { position: relative; isolation: isolate; overflow: hidden; padding: 18px 12px 14px; border: 4px solid var(--ink); border-radius: var(--r); box-shadow: 0 6px 0 var(--ink);
  background: radial-gradient(60% 55% at 22% 30%, color-mix(in srgb, var(--cyan) 30%, transparent), transparent 70%),
              radial-gradient(60% 55% at 78% 30%, color-mix(in srgb, var(--pink) 32%, transparent), transparent 70%),
              linear-gradient(180deg, #1b0d45, #0d0626 62%, #241257); }
/* holofotes do alto e chão do ringue em perspectiva */
.battle.duelo .arena::before, .dl .dl-ringue::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: conic-gradient(from 160deg at 25% -10%, transparent 0 10deg, rgba(255,255,255,.09) 16deg 26deg, transparent 32deg),
              conic-gradient(from 174deg at 75% -10%, transparent 0 10deg, rgba(255,255,255,.09) 16deg 26deg, transparent 32deg); }
.battle.duelo .arena::after, .dl .dl-ringue::after { content: ''; position: absolute; left: -20%; right: -20%; bottom: 0; height: 42%; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 46px), linear-gradient(180deg, color-mix(in srgb, var(--rc, var(--violet)) 35%, #1a0e40), #120838);
  transform: perspective(260px) rotateX(52deg); transform-origin: bottom; border-top: 3px solid color-mix(in srgb, var(--rc, var(--violet)) 70%, #fff); }
.battle.duelo .fighter, .dl-ringue .fighter { position: relative; min-width: 0; }
.battle.duelo .fighter .pic, .dl-ringue .fighter .pic { max-width: 140px; border-radius: 50%; position: relative; z-index: 1; margin-bottom: 0;
  box-shadow: 0 0 0 4px var(--c, var(--violet)), 0 6px 0 4px var(--ink), 0 0 34px var(--c, var(--violet)); }
.battle.duelo .fighter.eu .pic { border-color: var(--ink); }
.dl-pedestal { display: block; width: 78%; max-width: 130px; height: 20px; margin: -8px auto 8px; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }
.fighter.eu .dl-pedestal { background: radial-gradient(circle at 50% 30%, #b9f6ff, var(--cyan) 45%, #0b5a7a); }
.fighter.rival .dl-pedestal { background: radial-gradient(circle at 50% 30%, #ffc2cd, var(--pink) 45%, #7a0b2b); }
.battle.duelo .fighter b, .dl-ringue .fighter b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 0 var(--ink); }
/* barra de vida estilo jogo de luta: inclinada e espelhada no rival */
.battle.duelo .bar { height: 22px; transform: skewX(-12deg); box-shadow: 0 3px 0 var(--ink); }
.battle.duelo .fighter.rival .bar { transform: skewX(12deg); }
.battle.duelo .bar span { transform: skewX(12deg); }
.battle.duelo .fighter.rival .bar span { transform: skewX(-12deg); }
.battle.duelo .fighter.eu .bar i { background: linear-gradient(180deg, #b9f6ff, #1fa3e8); }
.battle.duelo .fighter.rival .bar i { margin-left: auto; }
.battle.duelo #progRival { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: rgba(0, 0, 0, .35); font-size: 12px; }
/* medalhão do VS */
.battle.duelo .vs, .dl-ringue .vs { position: relative; z-index: 2; display: grid; place-items: center; width: 64px; height: 64px; font-size: 30px; border-radius: 50%; color: #fff; -webkit-text-stroke: 2px var(--ink);
  background: radial-gradient(circle at 40% 30%, #ffe07a, var(--gold2) 55%, #b85a00); border: 4px solid var(--ink); box-shadow: 0 5px 0 var(--ink), 0 0 26px rgba(255, 200, 61, .7);
  animation: dlVs 1.6s ease-in-out infinite; }
@keyframes dlVs { 50% { transform: scale(1.1) rotate(-6deg); } }
/* pergunta e alternativas: botões de golpe */
.battle.duelo .qbox { margin-top: 14px; background: linear-gradient(180deg, #2a1764, #160a3c); box-shadow: 0 6px 0 var(--ink), inset 0 0 0 2px color-mix(in srgb, var(--rc, var(--violet)) 60%, transparent); }
.battle.duelo .qbox > small { display: inline-block; margin-bottom: 8px; padding: 3px 12px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 2px solid color-mix(in srgb, var(--rc, var(--violet)) 70%, transparent); color: #e6dcff; }
.battle.duelo .opt { color: #fff; background: linear-gradient(180deg, #3a2580, #22125a); box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,.15); }
.battle.duelo .opt:hover { background: linear-gradient(180deg, #4a31a0, #2c1870); }
.battle.duelo .opt:nth-child(1) .k { background: var(--cyan); color: var(--ink); }
.battle.duelo .opt:nth-child(2) .k { background: var(--pink); }
.battle.duelo .opt:nth-child(3) .k { background: var(--gold); color: var(--ink); }
.battle.duelo .opt:nth-child(4) .k { background: var(--green); color: var(--ink); }
.battle.duelo .opt.ok { background: #a6ffc8; color: var(--ink); }
.battle.duelo .opt.bad { background: #ffb0c0; color: var(--ink); }
.battle.duelo .dl-ampulheta { display: inline-block; animation: dlGira 2s ease-in-out infinite; }
@keyframes dlGira { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
/* setup do duelo dentro do ringue (aba Duelos): herói no palco × desafiante misterioso, pote embaixo */
.dl .dl-ringue { row-gap: 4px; margin-bottom: 18px; padding-top: 14px; }
.dl-ringue > .dl-titulo, .dl-ringue > .poder, .dl-ringue > .premios { grid-column: 1 / -1; position: relative; z-index: 1; }
.dl-ringue > .dl-titulo { margin-bottom: 6px; }
.dl-ringue .fighter .pic { max-width: 120px; }
.dl-ringue .fighter b { font-size: 17px; }
.dl-misterio { display: grid; place-items: center; --c: var(--pink); background: radial-gradient(circle at 50% 40%, #4a1030, #12051f 70%) !important; animation: dlMisterio 2.2s ease-in-out infinite; }
.dl-misterio span { font: 64px 'Lilita One'; color: var(--pink); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 0 18px rgba(255, 77, 109, .9); }
@keyframes dlMisterio { 50% { box-shadow: 0 0 0 4px var(--pink), 0 6px 0 4px var(--ink), 0 0 50px var(--pink); } }
/* círculo girando na base do avatar do desafiante: procurando oponente */
.dl-carregando { position: absolute; left: 50%; bottom: -14px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; z-index: 2; background: #12051f; border: 4px solid rgba(255, 77, 109, .25); border-top-color: var(--pink); box-shadow: 0 0 0 3px var(--ink), 0 0 12px rgba(255, 77, 109, .7); animation: dlCarrega .9s linear infinite; }
@keyframes dlCarrega { to { transform: rotate(360deg); } }
.dl-ringue > .poder { order: 1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.dl-ringue > .poder span { display: flex; align-items: center; border: 3px solid var(--ink); font-weight: 800; }
.dl-ringue > .premios { order: 2; display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; margin: 10px 0 0; }
.dl-ringue .premios .pr { padding: 5px 6px; }
.dl-ringue .premios .pr.lose { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 8px; padding: 3px 8px; }
.dl-ringue .premios .pr.lose > .ico { font-size: 20px; }
.dl-ringue .premios .pr b { white-space: normal; justify-content: center; flex-wrap: wrap; }
@media (max-width: 480px) {
  .dl-ringue .fighter .pic { max-width: 96px; }
  .dl-misterio span { font-size: 48px; }
  .battle.duelo .dl-topo .title-l { order: 9; flex-basis: 100%; text-align: center; font-size: 22px; } /* no celular o título vira faixa abaixo dos botões */
  .battle.duelo .arena { gap: 6px; padding: 14px 8px 12px; }
  .battle.duelo .fighter .pic { max-width: 104px; }
  .battle.duelo .vs { width: 48px; height: 48px; font-size: 22px; }
  .battle.duelo .fighter b { font-size: 15px; }
  .dl-titulo { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .dl .dl-cta, .dl-on, .dl .premios .pr.win > .ico, .battle.duelo .vs, .battle.duelo .dl-ampulheta, .dl-ringue .vs, .dl-misterio { animation: none; }
}

/* Roleta Diária: baú do fundo dos duelos (assets/img/cesto-cristais-*.svg) no canto inferior esquerdo da
   roda. O canto inferior direito fica livre para o próximo elemento. */
.roleta { margin-top: 44px; }
.roleta .bau-fundo { position: absolute; left: -12%; bottom: -8%; z-index: 4; width: 34%; height: auto; pointer-events: none; filter: drop-shadow(0 5px 0 rgba(26, 15, 46, .45)); }

/* ===== Transmissões da Frota (missões com comprovação) ===== */
.transm .tx-topo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.transm .tx-rem { display: inline-flex; align-items: center; gap: 5px; font: 13px 'Lilita One'; letter-spacing: .4px; color: var(--c); text-transform: uppercase; }
.transm .tx-rem .ico { font-size: 22px; }
.transm .tag .ico { font-size: 15px; margin-right: 3px; vertical-align: -3px; }
.transm .tx-hist { font-style: italic; color: #e6dcff; }
.transm .tx-codigo { margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: #0b0620; border: 3px solid var(--ink); color: #9ff4ff; font: 700 17px ui-monospace, 'Consolas', monospace; letter-spacing: 2px; white-space: pre-wrap; word-break: break-word; box-shadow: inset 0 0 18px rgba(62,224,255,.25); }
.transm .tx-obj { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 4px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.07); border-left: 5px solid var(--c); }
.transm .tx-obj .ico { font-size: 22px; flex: none; }
.transm .tx-dica { margin: 6px 0; font-weight: 700; color: var(--muted); }
.transm .tx-dica summary { cursor: pointer; color: var(--gold); font-weight: 900; }
.transm .tx-acao { margin-top: 12px; }
.transm .tx-nota { margin: 6px 0 0; font-size: 13px; font-weight: 800; color: var(--muted); }
.transm .tx-nota a { color: var(--cyan); }
.transm .tx-barra { margin-bottom: 10px; max-width: 360px; }
.transm .tx-resp { display: flex; gap: 8px; flex-wrap: wrap; }
.transm .tx-resp .input { flex: 1; min-width: 150px; max-width: 260px; text-transform: uppercase; font-weight: 900; letter-spacing: 1px; }
.transm .tx-luas { display: grid; grid-template-columns: repeat(4, minmax(64px, 1fr)); gap: 8px; max-width: 420px; }
.transm .tx-lua { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; background: #160c36; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); color: #fff; font: 800 12px 'Nunito'; cursor: pointer; }
.transm .tx-lua:hover { background: #241452; transform: translateY(-2px); }
.transm .lua-ic { width: 44px; height: 44px; }
.transm .tx-analise { font-weight: 900; color: var(--gold); display: flex; gap: 6px; align-items: center; }
.transm .tx-recusa { font-weight: 800; color: #ffb0c0; margin: 0 0 8px; }
.tabuleiro { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: min(280px, 100%); aspect-ratio: 1; margin: 10px 0; border: 4px solid var(--ink); border-radius: 8px; overflow: hidden; box-shadow: 0 5px 0 var(--ink); }
.tabuleiro > span { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; font-size: clamp(20px, 6vw, 30px); line-height: 1; }
.tabuleiro .cla { background: #f0d9b5; }
.tabuleiro .esc { background: #b58863; }
.tabuleiro .br { color: #fff; text-shadow: 0 0 2px #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; }
.tabuleiro .pr { color: #1a0f2e; }
.tabuleiro small { position: absolute; font: 900 9px 'Nunito'; color: rgba(26,15,46,.7); text-shadow: none; }
.tabuleiro .tb-n { top: 2px; left: 3px; }
.tabuleiro .tb-l { bottom: 1px; right: 3px; }

/* Ficha: título de cada faixa de nível na aba Conquistas */
.faixa-conq { margin-top: 14px; }

/* Selos de conquista de destaque ao lado do nome (rankings, duelo, Central do Diretor, admin) */
.selos { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.selo { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; cursor: pointer; color: inherit; font: inherit; border-radius: 7px; background: var(--rc); border: 2px solid var(--ink); box-shadow: 0 0 8px var(--rc); }
.selo .ico { font-size: 15px; }

/* Ficha → Conquistas: progresso das bloqueadas */
.slot .cq-barra { display: block; width: 80%; height: 6px; margin-top: 4px; border-radius: 4px; background: rgba(0,0,0,.4); overflow: hidden; }
.slot .cq-barra i { display: block; height: 100%; background: var(--gold); }

/* Desafio do treino (perguntas do banco, corrigidas no servidor) */
.qz-perg { margin: 12px 0; }
.qz-perg b { display: block; margin-bottom: 8px; }
.qz-ops { display: grid; gap: 8px; }
.qz-op { text-align: left; font: 800 15px 'Nunito'; color: #fff; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.07); border: 3px solid var(--ink); cursor: pointer; }
.qz-op:hover { background: rgba(255,255,255,.14); }
.qz-op.on { background: var(--c, var(--violet)); color: var(--ink); box-shadow: 0 0 0 3px #fff inset; }

/* ---------- Duelos de xadrez (js/app.js → telas.xadrez; server/xadrez.mjs) ---------- */
.xz-modos { justify-content: center; margin-bottom: 10px; }
.xz-ratings { display: flex; gap: 8px; justify-content: center; margin: 4px 0 10px; }
.xz-ratings span { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; padding: 6px 8px; border-radius: 14px; border: 3px solid var(--ink); background: #1a0e40; box-shadow: 0 4px 0 var(--ink); }
.xz-ratings b { font: 24px 'Lilita One'; color: var(--gold); }
.xz { max-width: 560px; margin: 0 auto; }
.xz .dl-topo .title-l { color: var(--gold); text-shadow: 0 3px 0 var(--ink); }
.xz-jog { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 0 0 8px; }
.xz-jog .avatar.mini { flex: none; }
.xz-jog.vez { box-shadow: 0 5px 0 var(--ink), inset 0 0 0 3px var(--gold); }
.xz-nome { flex: 1; min-width: 0; }
.xz-nome b { display: block; font: 17px 'Lilita One'; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xz-nome small { display: flex; align-items: center; gap: 4px; font-weight: 800; color: var(--muted); }
.xz-relogio { flex: none; font: 22px 'Lilita One'; padding: 4px 12px; border-radius: 12px; background: #120838; border: 3px solid var(--ink); font-variant-numeric: tabular-nums; }
.xz-jog.vez .xz-relogio { background: #f4efff; color: var(--ink); }
.xz-relogio.urgente { background: var(--pink) !important; color: #fff !important; }
/* quadrado pelo padding-top: 100% (não depende de aspect-ratio, que no Safari do iOS 15 deixava as linhas crescerem
   pelo tamanho da imagem da peça e cortava a parte de baixo); 8 linhas × 8 colunas iguais por cima */
.xz-tabuleiro { position: relative; width: 100%; max-width: 520px; margin: 0 auto 8px; border: 4px solid var(--ink); border-radius: 10px; overflow: hidden; box-shadow: 0 6px 0 var(--ink); }
.xz-tabuleiro::before { content: ''; display: block; padding-top: 100%; }
/* iPhone (Safari): sem isto a tela piscava a cada toque. O tabuleiro e cada peça ficam em camada própria — trocar a
   cor de uma casa não repinta o resto nem redesenha as imagens das peças; e sem realce de toque/seleção do iOS */
.xz-tabuleiro { -webkit-transform: translateZ(0); transform: translateZ(0); isolation: isolate; }
.xz-casa { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; outline: none; }
.xz-casa .pc { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.xz-grade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); }
.xz-casa { position: relative; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0; -webkit-appearance: none; appearance: none; overflow: hidden; cursor: pointer; font: inherit; line-height: 1; touch-action: manipulation; }
.xz-casa.clara { background: #e9dcff; }
.xz-casa.escura { background: #8b6fd1; }
.xz-casa.ult.clara { background: #f6e98a; }
.xz-casa.ult.escura { background: #cbb64a; }
.xz-casa.final.clara { background: #ff9aa9; }
.xz-casa.final.escura { background: #e0435c; }
.xz-casa.final { box-shadow: inset 0 0 0 3px #b0102c; }
.xz-casa.apoio { box-shadow: inset 0 0 0 4px #e0102c; }
.xz-setas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.xz-casa.sel { box-shadow: inset 0 0 0 4px var(--cyan); }
.xz-casa.xeque { background: radial-gradient(circle, #ff4d6d 0%, #ff4d6d 35%, transparent 80%), #e9dcff; }
.xz-casa .pc { position: absolute; z-index: 1; top: 4%; left: 4%; display: block; width: 92%; height: 92%; max-width: none; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.xz-lin, .xz-col { position: absolute; font: 800 10px 'Nunito', sans-serif; font-style: normal; color: rgba(26, 15, 46, .7); pointer-events: none; }
.xz-lin { top: 2px; left: 3px; }
.xz-col { bottom: 1px; right: 3px; }
.xz-status { text-align: center; font: 20px 'Lilita One'; margin: 6px 0 8px; }
.xz-status.xeque { color: var(--pink); }
.xz-verres { max-width: 520px; margin: 0 auto 10px; }
.xz-acoes { justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.xz-empate { text-align: center; margin-bottom: 10px; box-shadow: 0 5px 0 var(--ink), inset 0 0 0 3px var(--gold); }
.xz-empate .row { justify-content: center; gap: 8px; margin-top: 8px; }
.xz-lances { display: flex; flex-wrap: wrap; gap: 4px 12px; font-weight: 800; font-size: 14px; max-height: 120px; overflow-y: auto; }
.xz-lances small { color: var(--muted); margin-right: 3px; }
.xz-perfil { text-align: center; }
.xz-rating { display: flex; flex-direction: column; align-items: center; }
.xz-rating .ico { font-size: 34px; }
.xz-rating b { font: 46px 'Lilita One'; color: var(--gold); text-shadow: 0 3px 0 var(--ink); line-height: 1.1; }
.xz-rating small { font-weight: 800; color: var(--muted); }
.xz-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; }
.xz-item > .ico { font-size: 28px; flex: none; }
.xz-item b { display: block; font: 17px 'Lilita One'; }
.xz-item small { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-weight: 800; }
.xz-item.win { box-shadow: 0 5px 0 var(--ink), inset 4px 0 0 var(--green); }
.xz-item.lose { box-shadow: 0 5px 0 var(--ink), inset 4px 0 0 var(--pink); }
.xz-item.draw { box-shadow: 0 5px 0 var(--ink), inset 4px 0 0 var(--muted); }
.xz-item summary { cursor: pointer; font-weight: 800; color: var(--cyan); margin-top: 4px; }
.xz-pgn { margin: 4px 0 0; font-size: 13px; font-weight: 700; word-break: break-word; }

/* Arena: telas de escolha (Chefões | Duelos entre heróis → Perguntas | Xadrez ao vivo), em js/app.js (arenaMenuHtml/arenaModosHtml) */
.arena-topo { gap: 10px; align-items: center; }
.arena-topo h2 { margin: 0; }
.arena-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 16px; }
.panel.am-card { display: block; padding: 0; overflow: hidden; text-decoration: none; color: var(--txt); cursor: pointer; transition: transform .18s cubic-bezier(.3,1.6,.5,1);
  box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px var(--c), 0 0 26px color-mix(in srgb, var(--c) 35%, transparent); }
.panel.am-card:hover { transform: translateY(-6px); }
.panel.am-card:active { transform: translateY(3px); }
.am-art { position: relative; height: 170px; display: flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 55%, transparent), #0d0626 72%); }
.am-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, var(--panel)); pointer-events: none; }
.am-body { padding: 4px 16px 18px; position: relative; }
.am-body h3 { font: 30px 'Lilita One'; color: var(--c); margin: 0 0 4px; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.am-body p { margin: 0 0 10px; font-weight: 800; color: var(--muted); }
.am-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.am-chips span { display: inline-flex; align-items: center; gap: 4px; font: 15px 'Lilita One'; background: #1a0e40; border: 2px solid var(--ink); border-radius: 10px; padding: 3px 10px; }
/* Chefões: um chefe de cada reino em leque */
.am-boss { width: 100px; height: 100px; object-fit: cover; object-position: top; border-radius: 20px; border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink); background: #0d0626; position: relative; z-index: 1; }
.am-boss.b0 { transform: rotate(-10deg) translateY(12px); }
.am-boss.b1 { width: 126px; height: 126px; z-index: 2; margin: 0 -22px; animation: amFlutua 3s ease-in-out infinite; }
.am-boss.b2 { transform: rotate(10deg) translateY(12px); }
/* Duelos: o seu herói contra o desafiante misterioso (mesma ideia do ringue dos duelos) */
.am-eu, .am-rival { width: 108px; height: 108px; border-radius: 50%; border: 4px solid var(--ink); position: relative; z-index: 1; }
.am-eu { object-fit: cover; object-position: top; box-shadow: 0 0 0 4px var(--hc), 0 6px 0 4px var(--ink); background: #0d0626; }
.am-rival { display: grid; place-items: center; font: 62px 'Lilita One'; color: #fff; background: radial-gradient(circle, var(--pink), #5a0f2e); box-shadow: 0 0 0 4px var(--pink), 0 6px 0 4px var(--ink); }
.am-vs { position: relative; z-index: 2; font: 36px 'Lilita One'; color: var(--gold); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; animation: amFlutua 2s ease-in-out infinite; }
/* Modos dos duelos: os reinos do quiz e as peças de xadrez */
.am-reino { width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center; background: var(--rc); border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink); position: relative; z-index: 1; color: #fff; }
.am-reino .ico { font-size: 44px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)); }
.am-reino:nth-child(2) { transform: translateY(-14px) scale(1.12); z-index: 2; }
.am-peca { width: 112px; height: 112px; position: relative; z-index: 1; filter: drop-shadow(0 6px 0 var(--ink)) drop-shadow(0 0 16px var(--c)); }
.am-peca + .am-peca { margin-left: -26px; transform: rotate(10deg) translateY(8px); }
@keyframes amFlutua { 50% { transform: translateY(-8px); } }
.am-trilha { display: flex; align-items: center; position: relative; z-index: 1; }
.am-trilha span { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #1a0e40; border: 4px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }
.am-trilha span .ico { font-size: 32px; }
.am-trilha span.ok { background: #1f6b45; }
.am-trilha span.agora { width: 76px; height: 76px; background: radial-gradient(circle, var(--gold), #b86a00); box-shadow: 0 0 0 4px var(--c), 0 6px 0 4px var(--ink); animation: amFlutua 2.4s ease-in-out infinite; }
.am-trilha span.agora .ico { font-size: 44px; }
.am-trilha span.fecha { opacity: .6; }
.am-trilha i { width: 22px; height: 0; border-top: 6px dotted var(--c); }
.am-trilha span:nth-of-type(2n) { transform: translateY(-16px); }
.am-trilha span.agora:nth-of-type(2n) { transform: none; }
@media (max-width: 380px) { .am-trilha span { width: 48px; height: 48px; } .am-trilha i { width: 12px; } }
@media (prefers-reduced-motion: reduce) { .am-boss.b1, .am-vs, .am-trilha .agora { animation: none; } }

/* Card de um herói online (aba Duelos → toque no avatar ou no nick): acoes.verHeroi em js/app.js */
.oc-ver { cursor: pointer; }
.hc { text-align: center; }
.hc .portrait { max-width: 170px; margin: 0 auto 10px; }
.hc .portrait .name h2 { font-size: 26px; }
.hc .portrait .lvlbig { width: 56px; height: 62px; }
.hc .portrait .lvlbig b { font-size: 24px; }
.hc .portrait .clsic { width: 46px; height: 46px; }
.hc .portrait .clsic .ico { font-size: 30px; }
.hc-escola { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; font-weight: 800; color: var(--muted); }
.hc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.hc-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; background: #1a0e40; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); }
.hc-tile .ico { font-size: 26px; }
.hc-tile b { font: 22px 'Lilita One'; line-height: 1; }
.hc-tile small { font-size: 11px; font-weight: 800; color: var(--muted); line-height: 1.15; }
.hc-sub { margin: 14px 0 6px; font: 15px 'Lilita One'; color: var(--gold); letter-spacing: .5px; text-transform: uppercase; }
.hc-poder { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.hc-poder span { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; background: #1a0e40; border: 2px solid var(--ink); border-radius: 10px; padding: 4px 10px; }
.hc-poder b { font-family: 'Lilita One'; font-weight: 400; font-size: 18px; }
.hc-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.hc-badge { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #1a0e40; border: 3px solid var(--ink); border-radius: 12px; box-shadow: inset 0 0 0 2px var(--rc); }
.hc-badge .ico { font-size: 28px; flex: none; filter: drop-shadow(0 0 6px var(--rc)); }
.hc-badge b { display: block; font: 14px 'Lilita One'; line-height: 1.1; }
.hc-badge small { color: var(--rc); font-weight: 800; font-size: 11px; }

/* Plateia: assistir ao duelo de outro herói (telas.plateia em js/app.js). Reaproveita o ringue dos duelos. */
.plateia .fighter { gap: 4px; }
.plateia .pl-prog { margin-top: 6px; width: 100%; }
.plateia .pl-prog span { font-size: 12px; }
.plateia .pl-tempo { margin-top: 6px; }
.plateia .pl-tempo.pouco { background: var(--pink); color: #fff; animation: pulse .8s ease-in-out infinite; }
.pl-aovivo { background: var(--pink); color: #fff; }
.pl-aovivo .ico { animation: pulse 1.4s ease-in-out infinite; }
.pl-legenda { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-weight: 800; color: var(--muted); text-align: center; }
.pl-fim { margin-bottom: 14px; }
.pl-fim > .ico { font-size: 56px; }
.pl-jog { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 8px 0; background: #1a0e40; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); transition: box-shadow .2s; }
.pl-jog.vez { box-shadow: 0 4px 0 var(--ink), inset 0 0 0 3px var(--gold), 0 0 18px rgba(255,200,61,.5); }
.pl-jog img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; object-position: top; border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--hc); }
.pl-jog > div { flex: 1; min-width: 0; }
.pl-jog b { display: block; font-family: 'Lilita One'; font-weight: 400; font-size: 18px; }
.pl-jog small { color: var(--muted); font-weight: 800; }
.pl-tab { pointer-events: none; } /* a plateia só olha o tabuleiro */
@media (prefers-reduced-motion: reduce) { .plateia .pl-tempo.pouco, .pl-aovivo .ico { animation: none; } }

/* "N na plateia" na tela dos duelistas (pintarPlateia em js/app.js) */
.pl-conta { display: flex; align-items: center; justify-content: center; gap: 6px; width: max-content; margin: 10px auto 0; padding: 4px 14px;
  font: 16px 'Lilita One'; color: #fff; background: var(--pink); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink), 0 0 16px rgba(255,77,109,.55); }
.pl-conta .ico { font-size: 22px; }
.pl-conta.pop { animation: plPop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes plPop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pl-conta.pop { animation: none; } }

/* Avatar/nome de herói clicável (js/app/util/avatar.js): abre o card do herói */
.heroi-link, [data-act="verHeroi"] { cursor: pointer; }
.avatar.heroi-link img, img.heroi-link, .pic.heroi-link { transition: transform .15s, box-shadow .15s; }
.avatar.heroi-link:hover img, img.heroi-link:hover, .pic.heroi-link:hover { transform: scale(1.06); box-shadow: 0 0 0 3px var(--gold); }
.heroi-link:focus-visible, [data-act="verHeroi"]:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 12px; }
.hc-online { font: 12px 'Lilita One'; padding: 2px 8px; border-radius: 8px; background: #3a3060; color: var(--muted); border: 2px solid var(--ink); }
.hc-online.on { background: #22c46a; color: var(--ink); }

/* Card do herói em tela cheia (verHeroi): retrato grande como na Ficha + guilda e cidade */
.modal.modal-heroi { padding-top: 14px; }
.modal-heroi > .big, .modal-heroi > h2 { display: none; }
.hc-full .portrait { max-width: none; width: 100%; aspect-ratio: 1 / 1.08; margin: 0 0 12px; border-radius: 22px; }
.hc-full .portrait .name h2 { font-size: clamp(28px, 8vw, 38px); }
.hc-full .portrait .name span { font-size: 16px; }
.hc-full .portrait .lvlbig { width: 64px; height: 70px; }
.hc-full .portrait .lvlbig b { font-size: 28px; }
.hc-full .portrait .clsic { width: 54px; height: 54px; }
.hc-full .portrait .clsic .ico { font-size: 36px; }
.hc-full .portrait .hc-online, .hc-full .portrait .hc-voce { position: absolute; z-index: 2; top: 80px; right: 12px; }
.hc-voce { font: 12px 'Lilita One'; padding: 2px 8px; border-radius: 8px; background: var(--gold); color: var(--ink); border: 2px solid var(--ink); }
.hc-guilda { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; margin-top: 10px; border-radius: 16px; border: 3px solid var(--ink); background: linear-gradient(90deg, color-mix(in srgb, var(--ec) 35%, #1a0e40), #1a0e40); background-color: #1a0e40; box-shadow: 0 4px 0 var(--ink); }
.hc-emb { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--ec); border: 3px solid var(--ink); }
.hc-emb .ico { font-size: 40px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)); }
.hc-guilda > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.hc-guilda small { font-size: 11px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: .5px; }
.hc-guilda b { font: 18px 'Lilita One'; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.hc-guilda > div > span { display: flex; align-items: center; gap: 4px; font-weight: 800; color: #d9cffb; font-size: 14px; }
.hc-guilda > div > span .ico { font-size: 16px; }
/* botão ✕ da janela (modal({ fechar: true })) */
.modal { position: relative; }
.modal-x { position: absolute; top: -16px; right: -12px; z-index: 5; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 3px solid var(--ink); background: #ff4d6d; color: #fff; cursor: pointer; box-shadow: 0 4px 0 var(--ink); transition: transform .12s; }
.modal-x .ico { font-size: 24px; }
.modal-x:hover { transform: scale(1.08) rotate(90deg); }
.modal-x:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.modal-heroi .modal-x { top: -24px; right: -20px; }
/* selo VIP dentro do retrato: mantém o mesmo visual do ranking (o estilo do título .name span não vale para ele) */
.portrait .name span.selovip { font: 11px "Lilita One"; letter-spacing: 1px; color: var(--ink); }

/* Rolagem horizontal discreta (.rolagem): barra invisível parada, fina enquanto a lista se move (js/app/index.js) */
.rolagem { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.rolagem.rolando { scrollbar-color: rgba(255, 255, 255, .35) transparent; }
.rolagem::-webkit-scrollbar { height: 6px; }
.rolagem::-webkit-scrollbar-track { background: transparent; }
.rolagem::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.rolagem.rolando::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .35); }