/* Painel admin — mesma identidade do jogo, densidade de ferramenta de trabalho */
body.adm { background: linear-gradient(160deg, #120830, #1d0c45 60%, #2a0d50); background-attachment: fixed; }
.adm .ico { width: 1.15em; height: 1.15em; }
.a-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
@media (max-width: 900px) { .a-shell { grid-template-columns: 1fr; } .a-side { position: static !important; height: auto !important; } .a-menu { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 6px; } .a-menu a { white-space: nowrap; } .a-menu .grp { display: none; } }

/* Lateral */
.a-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: rgba(13,6,38,.85); border-right: 4px solid var(--ink); padding: 16px 12px; display: flex; flex-direction: column; gap: 14px; }
.a-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; border-bottom: 3px solid #2a1a60; }
.a-brand .ico { font-size: 34px; }
.a-brand b { font: 19px/1 'Lilita One'; display: block; }
.a-brand small { font: 12px 'Lilita One'; color: var(--gold); letter-spacing: 2px; }
.a-menu { display: flex; flex-direction: column; gap: 3px; }
.a-menu .grp { font: 11px 'Lilita One'; letter-spacing: 1.5px; color: var(--muted); opacity: .7; margin: 10px 8px 2px; }
.a-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: #d9cffb; text-decoration: none; font: 16px 'Lilita One'; letter-spacing: .3px; transition: background .15s, transform .15s; }
.a-menu a .ico { font-size: 24px; }
.a-menu a:hover { background: #2a1a60; transform: translateX(3px); }
.a-menu a.on { background: linear-gradient(90deg, #5a3cc9, #2e1a66); color: #fff; box-shadow: inset 0 0 0 2px var(--ink), inset 4px 0 0 var(--gold); }
.a-menu a .n { margin-left: auto; font-size: 12px; background: #0d0626; border-radius: 8px; padding: 1px 7px; color: var(--muted); }
.a-side .rodape { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }

/* Conteúdo */
.a-main { padding: 22px clamp(14px, 3vw, 34px) 60px; min-width: 0; }
.a-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.a-head h1 { font: 32px 'Lilita One'; color: #fff; text-shadow: 0 3px 0 var(--ink); display: flex; align-items: center; gap: 10px; margin: 0; }
.a-head h1 .ico { font-size: 40px; }
.a-head p { margin: 2px 0 0; color: var(--muted); font-weight: 700; flex-basis: 100%; }
.a-head .sp { flex: 1; }
.abtn {
  --c1: #ffe07a; --c2: #ffb000; --tc: var(--ink);
  display: inline-flex; align-items: center; gap: 7px; font: 15px 'Lilita One'; letter-spacing: .3px; color: var(--tc); text-decoration: none;
  background: linear-gradient(180deg, var(--c1), var(--c2)); border: 3px solid var(--ink); border-radius: 12px; padding: 7px 13px;
  box-shadow: 0 4px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,.5); cursor: pointer; transition: transform .1s; white-space: nowrap;
}
.abtn .ico { font-size: 20px; }
.abtn:hover { transform: translateY(-2px); }
.abtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.abtn.cyan { --c1: #9ff4ff; --c2: #1fc3e8; }
.abtn.pink { --c1: #ff9fb2; --c2: #ff3d63; --tc: #fff; }
.abtn.green { --c1: #a6ffc8; --c2: #22c46a; }
.abtn.ghost { --c1: #3a2580; --c2: #2a1a60; --tc: #fff; }
.abtn.mini { padding: 3px 8px; font-size: 13px; border-radius: 9px; box-shadow: 0 3px 0 var(--ink); }
.abtn.mini .ico { font-size: 16px; }
.abtn[disabled] { opacity: .5; pointer-events: none; }

.a-card { background: linear-gradient(180deg, #2a1862, #20124c); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink), inset 0 0 0 1px rgba(140,107,255,.35); padding: 16px; }
.a-card h3 { font: 19px 'Lilita One'; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.a-card h3 .ico { font-size: 26px; }
.a-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 16px; }
.kpi { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #1a0e40; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.kpi .ico { font-size: 40px; flex: none; }
.kpi b { font: 28px/1 'Lilita One'; display: block; }
.kpi small { color: var(--muted); font-weight: 800; }

/* Tabelas */
.a-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.cid-res { display: flex; flex-wrap: wrap; gap: 8px; }
.a-tools .input, .a-tools select { min-height: 42px; font-size: 15px; padding: 6px 12px; border-width: 3px; border-radius: 12px; }
.a-tools .input { flex: 1; min-width: 180px; }
.tbl-wrap { overflow-x: auto; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 var(--ink); background: #1a0e40; }
table.tbl { width: 100%; border-collapse: collapse; font-weight: 700; font-size: 14.5px; }
.tbl th { text-align: left; font: 13px 'Lilita One'; letter-spacing: .8px; color: var(--gold); background: #120a30; padding: 10px 12px; position: sticky; top: 0; white-space: nowrap; }
.tbl td { padding: 9px 12px; border-top: 2px solid #26165a; vertical-align: middle; }
.tbl tr:hover td { background: #22145a; }
.tbl tr.off td { opacity: .5; }
.tbl .ic-cell .ico { font-size: 30px; }
.tbl .acts { display: flex; gap: 6px; justify-content: flex-end; }
.tbl .strong { font: 16px 'Lilita One'; font-weight: 400; }
.tbl .sub { display: block; color: var(--muted); font-size: 12.5px; font-weight: 700; max-width: 380px; }
.tbl img.av { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; object-position: top; border: 2px solid var(--ink); vertical-align: middle; }
.chip-rar { display: inline-block; font: 11px 'Lilita One'; letter-spacing: .8px; padding: 1px 7px; border-radius: 7px; border: 2px solid var(--ink); color: var(--ink); background: var(--c); }
.st { display: inline-flex; align-items: center; gap: 5px; font: 12px 'Lilita One'; letter-spacing: .6px; padding: 2px 8px; border-radius: 8px; border: 2px solid var(--ink); }
.st.on { background: var(--green); color: var(--ink); }
.st.off { background: #3a2580; color: var(--muted); }
.st.live { background: var(--pink); color: #fff; }
.st.soon { background: #fff; color: var(--ink); }
.st.info { background: var(--cyan); color: var(--ink); }
.vazio { padding: 30px; text-align: center; color: var(--muted); font-weight: 800; }
.dot-cor { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink); vertical-align: middle; }

/* Gaveta de edição */
.a-ov { position: fixed; inset: 0; z-index: 70; background: rgba(8,3,24,.7); backdrop-filter: blur(3px); animation: fadein .2s; }
.a-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(720px, 100vw); background: linear-gradient(180deg, #2a1862, #140a33); border-left: 4px solid var(--ink); display: flex; flex-direction: column; animation: slidein .3s cubic-bezier(.2,1.2,.4,1); }
.a-drawer header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 3px solid var(--ink); background: #1a0e40; }
.a-drawer header h2 { font: 24px 'Lilita One'; margin: 0; flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.a-drawer header h2 .ico { font-size: 32px; flex: none; }
.a-drawer .corpo { flex: 1; overflow-y: auto; padding: 18px; }
.a-drawer footer { display: flex; gap: 10px; padding: 12px 18px; border-top: 3px solid var(--ink); background: #1a0e40; }
.a-drawer footer .sp { flex: 1; }
.a-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 18px 0; background: #1a0e40; }
.a-tabs button { font: 14px 'Lilita One'; color: var(--muted); background: transparent; border: 0; border-bottom: 4px solid transparent; padding: 6px 10px; cursor: pointer; }
.a-tabs button.on { color: #fff; border-bottom-color: var(--gold); }

/* Formulários */
.fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 14px; }
.fgrid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .fgrid { grid-template-columns: 1fr; } }
.ff { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ff > label { font: 14px 'Lilita One'; letter-spacing: .4px; color: var(--gold); }
.ff .ajuda { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.ff .input, .ff select, .ff textarea { font: 700 15px 'Nunito'; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 11px; min-height: 42px; outline: none; width: 100%; }
.ff textarea { min-height: 80px; resize: vertical; }
.ff .input:focus, .ff select:focus, .ff textarea:focus { box-shadow: 0 0 0 3px var(--cyan); }
.ff input[type=color] { padding: 2px; height: 42px; width: 64px; cursor: pointer; }
.ff .linha { display: flex; gap: 8px; align-items: center; }
.sw { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 800; }
.sw input { display: none; }
.sw i { width: 46px; height: 26px; border-radius: 16px; background: #3a2580; border: 3px solid var(--ink); position: relative; transition: background .2s; }
.sw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s; }
.sw input:checked + i { background: var(--green); }
.sw input:checked + i::after { left: 22px; }
.icsel { display: flex; align-items: center; gap: 10px; }
.icsel .prev { width: 46px; height: 46px; border-radius: 12px; background: #1a0e40; border: 3px solid var(--ink); display: grid; place-items: center; }
.icsel .prev .ico { font-size: 34px; }
.icgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; padding: 8px; background: #120a30; border: 3px solid var(--ink); border-radius: 12px; margin-top: 6px; }
.icgrid button { aspect-ratio: 1; border-radius: 10px; background: #2a1a60; border: 2px solid transparent; cursor: pointer; display: grid; place-items: center; }
.icgrid button .ico { font-size: 30px; }
.icgrid button:hover, .icgrid button.on { border-color: var(--gold); background: #3a2580; }
.attrgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.attrgrid label { display: flex; align-items: center; gap: 6px; background: #1a0e40; border: 2px solid var(--ink); border-radius: 10px; padding: 4px 8px; font-weight: 800; font-size: 13px; }
.attrgrid label .ico { font-size: 22px; flex: none; }
.attrgrid input { width: 52px; min-height: 30px !important; padding: 2px 6px !important; margin-left: auto; }
.imgsel { display: flex; gap: 12px; align-items: flex-start; }
.imgsel .prev { width: 96px; height: 96px; flex: none; border-radius: 14px; border: 3px solid var(--ink); background: #0d0626 center 20%/cover; }
.imgsel .col { flex: 1; gap: 8px; }
.a-erro { color: #ffb0c0; font-weight: 800; min-height: 20px; margin-top: 10px; }

/* Perguntas do quiz */
.perg { background: #1a0e40; border: 3px solid var(--ink); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.perg .topo { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.perg .topo b { font: 15px 'Lilita One'; color: var(--gold); }
.perg .opcoes { display: grid; gap: 6px; margin-top: 8px; }
.perg .op { display: flex; gap: 8px; align-items: center; }
.perg .op input[type=radio] { width: 20px; height: 20px; accent-color: var(--green); flex: none; }
.perg .op .input { min-height: 36px; padding: 4px 10px; }

/* Editor visual do mapa */
.mapa-ed { position: relative; aspect-ratio: 3 / 2; border: 4px solid var(--ink); border-radius: 18px; overflow: hidden; background: #0d0626 center/cover; box-shadow: 0 5px 0 var(--ink); user-select: none; touch-action: none; }
.mapa-ed .pino { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; cursor: grab; }
.mapa-ed .pino.arrastando { cursor: grabbing; z-index: 5; }
.mapa-ed .pino .bola { width: 48px; height: 48px; border-radius: 50%; background: var(--c); border: 3px solid var(--ink); display: grid; place-items: center; box-shadow: 0 4px 0 var(--ink); }
.mapa-ed .pino .bola .ico { font-size: 32px; }
.mapa-ed .pino span { font: 12px 'Lilita One'; background: var(--ink); color: #fff; padding: 1px 7px; border-radius: 7px; margin-top: 3px; white-space: nowrap; }
.mapa-ed .pino.fim { opacity: .45; }
.mapa-ed .pino.sel .bola { box-shadow: 0 4px 0 var(--ink), 0 0 0 4px #fff, 0 0 20px #fff; }
.mapa-ed .mira { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink); pointer-events: none; }

/* Heróis */
.h-top { display: flex; gap: 14px; align-items: center; }
.h-top img { width: 76px; height: 76px; border-radius: 16px; object-fit: cover; object-position: top; border: 3px solid var(--ink); }
.checks { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.checks label { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #1a0e40; border: 2px solid var(--ink); border-radius: 10px; font-weight: 800; font-size: 14px; cursor: pointer; }
.checks label .ico { font-size: 22px; flex: none; }
.checks input { width: 18px; height: 18px; accent-color: var(--green); flex: none; }
.bdg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bdg { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 10px 8px; border-radius: 14px; border: 3px solid var(--ink); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc) 40%, #1a0e40), #120a30); box-shadow: inset 0 0 0 2px var(--rc); }
.bdg.nao { --rc: #3a2580 !important; opacity: .65; }
.bdg .ico { font-size: 40px; }
.bdg b { font: 14px 'Lilita One'; }
.bdg small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.feed { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; }
.feed .it { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: #1a0e40; border: 2px solid var(--ink); border-radius: 12px; }
.feed .it .ico { font-size: 28px; flex: none; }
.feed .it b { font-family: 'Lilita One'; font-weight: 400; }
.feed .it small { display: block; color: var(--muted); font-weight: 700; font-size: 12.5px; }
.barra { height: 14px; background: #0d0626; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
.barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--cyan)); }

/* Login do admin */
.a-login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.a-login .panel { width: min(420px, 100%); text-align: center; }
.a-toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 99; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.a-toast div { font: 16px 'Lilita One'; padding: 8px 16px; border-radius: 12px; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); background: var(--green); color: var(--ink); animation: toast 2.8s forwards; display: flex; gap: 8px; align-items: center; }
.a-toast div.err { background: #ff5d7d; color: #fff; }
.a-toast .ico { font-size: 22px; }

/* Roleta: card do fundo dos duelos */
.fundo-roleta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.fundo-roleta > div { flex: 1; min-width: 220px; }

/* Provas das missões */
.prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.prov img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #0b0620; border: 3px solid var(--ink); border-radius: 12px; margin-bottom: 8px; }

/* Créditos: quem recebeu em cada lançamento */
.cr-itens { display: flex; flex-wrap: wrap; gap: 6px 14px; font-weight: 700; font-size: 14px; }
.cr-itens small { color: var(--muted); }

/* Tabela de heróis: títulos que ordenam */
.th-ord { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font: inherit; color: inherit; white-space: nowrap; }
.th-ord span { font-size: 11px; opacity: .45; }
.th-ord.on { color: var(--gold); }
.th-ord.on span { opacity: 1; }
.th-ord:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.online { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); vertical-align: middle; }

/* Eleger promotor */
.eleger-lista { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; margin: 8px 0; }
.eleger-it { display: flex; gap: 10px; align-items: center; text-align: left; font: inherit; color: #fff; background: rgba(255,255,255,.06); border: 2px solid transparent; border-radius: 12px; padding: 8px 10px; cursor: pointer; }
.eleger-it:hover, .eleger-it.on { border-color: var(--cyan); background: rgba(62,224,255,.1); }
.eleger-it:disabled { opacity: .45; cursor: default; }
.eleger-it .ico, .eleger-escolhido .ico { font-size: 26px; flex: none; }
.eleger-it div, .eleger-escolhido div { flex: 1; min-width: 0; }
.eleger-it b, .eleger-escolhido b { display: block; }
.eleger-it small, .eleger-escolhido small { color: var(--muted); font-weight: 700; }
.eleger-escolhido { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(77,224,138,.12); border: 2px solid var(--green); margin: 6px 0 10px; }
.e-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 72; width: min(560px, calc(100vw - 32px)); max-height: 90vh; overflow-y: auto; }

/* Tabela de heróis: ícones pequenos nos números */
.tbl-herois td .strong .ico, .tbl-herois td .sub .ico { font-size: 15px; vertical-align: -2px; margin-right: 2px; }

/* Cristais da fatia do fundo, editáveis no cartão do fundo (página Roleta) */
.fr-cfg { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.fr-cfg label { font-weight: 800; color: var(--gold, #ffc83d); }
.fr-cfg-l { display: flex; gap: 8px; align-items: center; }
.fr-cfg-l .input { width: 90px; }