/* My Cowboy: tema C, "dentro do jogo".
   Cena do jogo em tela cheia, painel de metal e madeira com abas, fundo azul-petróleo escuro, títulos em Arvo, interface em Cuprum,
   texto em Barlow, ícones oficiais, fio vermelho de luz, barras verde-limão e botões como os do jogo.
   As peças do painel (barra, ornamento, bordas) vêm da pasta Dashboard do projeto. */

:root {
  color-scheme: dark;
  --bg:#0a0f10; --panel:#101a1c; --soft:#14201f; --slot:#070c0d; --card:#101a1c;
  --ink:#f2ece0; --sand:#c9d6d6; --gold:#f1cc8b; --muted:#8fa2a4;
  --line:#22343a; --line-hi:#2d4247; --line-ui:#32484e;
  --thread:#e0291d; --red:#e0291d; --red-deep:#8d160d; --copper:#c8742f;
  --accent:#e28711; --accent-ink:#f3d46a; --blue:#30c2bd; --cyan-btn:#00c0b0;
  --good:#a1ca23; --good-bg:#17210a; --bad:#ff6b57; --bad-bg:#3a0f0a;
  --alta:#e0291d; --media:#ffe468; --baixa:#3b4c50;
  --f-display:"Arvo",Georgia,serif; --f-ui:"Cuprum","Arial Narrow",Arial,sans-serif; --f-body:"Barlow",system-ui,sans-serif;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { accent-color:var(--thread); scrollbar-color:var(--line-hi) #050809; }
::selection { background:var(--blue); color:#001a19; }
body {
  margin:0; color:var(--sand); font:17px/1.5 var(--f-body); caret-color:var(--blue); min-height:100vh;
  background:#2a2418 url(img/cena.jpg) center top/cover fixed no-repeat;
}
button, select, input, textarea { font:inherit; color:inherit; }
b, strong { color:#fff; font-weight:600; }
.muted { color:var(--muted); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

/* ---------- títulos ---------- */
h1, h2, h3 { margin:0; color:#fff; text-shadow:0 2px 1px #000; }
h2 { font:700 21px/1.2 var(--f-display); margin:0 0 12px; }
h3 { font:700 18px var(--f-ui); letter-spacing:.06em; text-transform:uppercase; }
.big { font:700 34px/1.1 var(--f-ui); color:#fff; text-shadow:0 2px 1px #000; }
.grupo, .j-lab { font:600 13px/1.2 var(--f-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:14px 0 4px; }

/* ---------- moldura: logo, barra de abas e painel ---------- */
.stage { max-width:1400px; margin:0 auto; padding:0 max(16px, env(safe-area-inset-right,0px)) 40px max(16px, env(safe-area-inset-left,0px)); }
.logo-c { display:block; margin:clamp(24px,5vh,64px) auto -8px; position:relative; z-index:3; line-height:0; text-align:center; }
.logo-c img { width:clamp(280px,23vw,440px); height:auto; filter:drop-shadow(0 6px 6px rgba(0,0,0,.75)); }
.painel { position:relative; padding-top:110px; }
.hdr { position:absolute; left:0; top:0; right:0; height:110px; display:grid; grid-template-columns:60px minmax(0,1fr) 470px minmax(0,1fr) 60px; z-index:2; pointer-events:none; }
.hdr > div { height:110px; }
.hdr .l { background:url(img/hdr-capL.png) no-repeat; } .hdr .r { background:url(img/hdr-capR.png) no-repeat; }
.hdr .f { background:url(img/hdr-fill.png) repeat-x; } .hdr .m { background:url(img/hdr-mid.png) no-repeat; }
.navs { position:absolute; left:0; right:0; top:34px; height:50px; z-index:3; display:flex; justify-content:space-between; align-items:center; padding:0 78px; pointer-events:none; }
.navs .grp { display:flex; align-items:center; gap:6px; pointer-events:auto; }
.tab { position:relative; background:none; border:0; color:var(--gold); font:600 21px/1 var(--f-ui); text-shadow:0 2px 1px #000; padding:12px 14px; min-height:44px; cursor:pointer; white-space:nowrap; transition:color .15s ease; }
.tab:hover { color:#fff; }
.tab[aria-selected="true"] { color:#fff; }
.tab[aria-selected="true"]::after { content:""; position:absolute; left:8px; right:8px; top:2px; height:3px; background:var(--red); }
.corpo { position:relative; margin:-25px 10px 0 11px; background:var(--panel); padding:34px 34px 44px; min-height:560px; z-index:1; }
.corpo::before, .corpo::after { content:""; position:absolute; top:0; bottom:0; }
.corpo::before { left:0; width:4px; background:url(img/edge-l.png) -10px 0 repeat-y; }
.corpo::after { right:0; width:3px; background:url(img/edge-r.png) 0 0 repeat-y; }
.base-c { height:13px; margin:0 10px 0 11px; background:url(img/edge-b.png) repeat-x; }
.conta { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:2px 6px; margin:-14px 0 10px; font:500 15px var(--f-ui); color:var(--muted); }
.conta b { color:var(--sand); font-weight:600; }
.rodape-c { text-align:center; margin:14px 0 0; font:400 13px var(--f-body); color:rgba(255,255,255,.72); text-shadow:0 1px 2px #000; }

/* ---------- sub-abas ---------- */
.j-chips { display:flex; flex-wrap:wrap; gap:2px; margin:0 0 12px !important; border-bottom:1px solid var(--line); }
body .j-chipb { background:none; border:0; border-radius:0; box-shadow:none; position:relative; min-height:44px; padding:0 15px; margin-bottom:-1px; font:600 16px var(--f-ui); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); cursor:pointer; transition:color .15s ease; }
body .j-chipb:hover { color:#fff; }
body .j-chipb[aria-pressed="true"] { color:#fff; background:linear-gradient(180deg,rgba(224,41,29,0),rgba(224,41,29,.12)); font-weight:700; }
body .j-chipb[aria-pressed="true"]::after { content:""; position:absolute; left:6px; right:6px; bottom:-1px; height:3px; background:var(--red); }
/* chips de escolha dentro das calculadoras (Gold): continuam como botões */
.j-chips[aria-label="Filtro por item"] { border-bottom:0; gap:6px; }
.j-chips[aria-label="Filtro por item"] .j-chipb { border:1px solid var(--line-ui); border-bottom:2px solid var(--line-ui); border-radius:3px; background:#0a1214; margin:0; text-transform:none; letter-spacing:.02em; font-size:16px; }
.j-chips[aria-label="Filtro por item"] .j-chipb[aria-pressed="true"] { border-color:#587a14; border-bottom-color:var(--good); background:var(--good-bg); }

/* ---------- painéis e cartões ---------- */
.panel, .card, .j-entry, .meta, .srv { position:relative; background:var(--card); border:1px solid var(--line); border-radius:4px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.panel { padding:18px 20px; }
.panel::before, .plate::before { content:""; position:absolute; left:-1px; top:-1px; width:min(40%,360px); height:3px; background:linear-gradient(90deg,var(--red),rgba(224,41,29,0)); }
.card, .j-entry { padding:14px 16px; background:var(--soft); }
.j-entry { display:grid; gap:4px; border-radius:4px; }
.meta { display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; padding:11px 14px; background:var(--soft); }
.dash { border:1px dashed var(--line-hi); border-radius:4px; padding:14px; }
.center { text-align:center; display:grid; gap:12px; justify-items:center; padding:44px 16px; }
.aviso { font:400 14px/1.45 var(--f-body); color:var(--muted); background:var(--slot); border:1px solid var(--line); border-radius:3px; padding:10px 14px; }
.row2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.j-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.j-head { display:flex; justify-content:space-between; gap:8px; align-items:center; font:700 17px var(--f-ui); color:#fff; }
.j-stat { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid #1a2a2e; align-items:center; }
.j-n { font:700 22px var(--f-ui); color:#fff; }
.j-gold { color:var(--accent-ink) !important; } .j-stone { color:#6fe3de !important; }
.j-total { display:flex; justify-content:space-between; gap:12px; align-items:center; font-weight:700; }
.j-pend { display:flex; gap:12px; align-items:flex-start; background:var(--slot); border:1px solid var(--line); border-radius:3px; padding:10px 14px; color:var(--sand); font-size:15px; }
.j-pend-i { flex:none; display:grid; place-items:center; width:22px; height:22px; margin-top:1px; border:1px solid var(--accent); border-radius:50%; color:var(--accent); font:700 14px/1 var(--f-ui); }
.evt { border-color:var(--copper); margin-bottom:14px; }
.evt-e { margin-right:6px; } .evt-e:empty { display:none; } .evt-t { color:#ff8a78; font-weight:700; }

/* ---------- botões ---------- */
.btn { background:linear-gradient(180deg,#e0291d,var(--red-deep)); color:#fff; border:1px solid #5a0d07; border-radius:3px; padding:0 22px; min-height:44px; font:700 17px/1 var(--f-ui); letter-spacing:.08em; text-transform:uppercase; text-shadow:0 2px 1px #000; box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 #2a0402; cursor:pointer; transition:filter .15s ease, transform .1s ease; }
.btn:hover { filter:brightness(1.12); }
.btn:active { transform:translateY(2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 0 #2a0402; }
.btn.sec { background:linear-gradient(180deg,#14201f,#070c0d); border:1px solid #2b3f44; color:var(--gold); text-shadow:none; box-shadow:inset 0 -3px 0 #00c0b0, 0 3px 0 #000; }
.btn.sec:hover { color:#fff; filter:none; background:linear-gradient(180deg,#1a2b2a,#0a1514); }
.btn.link { background:none; border:0; box-shadow:none; text-shadow:none; color:#7fe3de; text-transform:none; letter-spacing:0; font:500 15px var(--f-ui); text-decoration:underline; text-underline-offset:3px; padding:0 8px; min-height:44px; }
.btn.link:hover { color:#b9f6f2; filter:none; }
.btn.discord { background:linear-gradient(180deg,#e0291d,var(--red-deep)); }

/* ---------- campos: slots afundados ---------- */
.field { display:grid; gap:5px; margin-bottom:12px; }
.field label { font:600 13px var(--f-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.field input, .field select, .field textarea, .ctl, .filtros select {
  width:100%; background:var(--slot); color:#fff; min-height:46px; padding:6px 12px; border:1px solid var(--line); border-bottom:2px solid var(--red); border-radius:3px;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.8); font:500 17px var(--f-body); transition:border-color .15s ease, background-color .15s ease;
}
.field input:hover, .field select:hover, .ctl:hover, .filtros select:hover { background:#0b1315; }
.field input:focus, .field select:focus, .ctl:focus, .filtros select:focus, .field textarea:focus { border-color:var(--blue); outline:none; }
select option, select optgroup { background:#0c1314; color:#fff; }
.field input::placeholder, .ctl::placeholder { color:#5c6f72; }
.ctl { width:auto; }
.filtros { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.filtros select { width:auto; padding-right:34px; }
.j-linha { display:flex; gap:10px; align-items:end; flex-wrap:wrap; }
.j-linha .field { margin-bottom:0; min-width:180px; flex:1 1 180px; }
.j-fi { display:grid; grid-template-columns:44px minmax(0,1fr) 110px 100px; gap:10px; align-items:center; padding:6px 0; border-top:1px solid #1a2a2e; }
.j-fi img.ic { width:40px; height:40px; object-fit:contain; }
.j-fi input { width:100%; background:var(--slot); color:#fff; border:1px solid var(--line); border-bottom:2px solid var(--red); border-radius:3px; padding:8px; min-height:44px; box-shadow:inset 0 3px 8px rgba(0,0,0,.8); }

/* ---------- etiquetas ---------- */
.badge { display:inline-block; font:700 13px/1 var(--f-ui); letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:2px; background:var(--good-bg); color:#c4e84a; border:1px solid #587a14; }
.chip { display:inline-block; font:700 13px/1 var(--f-ui); letter-spacing:.07em; border-radius:2px; padding:4px 8px; text-transform:uppercase; color:#fff; }
.chip.srv-tag { background:var(--blue); color:#001a19; }
.p-alta { background:var(--alta); color:#fff; } .p-media { background:var(--media); color:#1a1503; } .p-baixa { background:var(--baixa); color:#d9e3e2; }
.fora { color:var(--bad); font-weight:700; } .dentro { color:#c4e84a; font-weight:700; } .andamento { color:var(--muted); font-weight:700; }
.chip.evt-tag { background:transparent; color:var(--gold); border:1px solid var(--line-ui); }

/* ---------- barras ---------- */
.bar { height:13px; background:#050809; border:1px solid var(--line); border-radius:2px; overflow:hidden; margin-top:6px; box-shadow:inset 0 2px 3px rgba(0,0,0,.8); }
.bar i { display:block; height:100%; background:linear-gradient(180deg,#d4f54a,#a3d300 45%,#6d9100); box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }

/* ---------- tabelas ---------- */
.tbl, .j-ref { width:100%; border-collapse:collapse; }
.tbl th, .j-ref th { text-align:left; font:600 13px var(--f-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:9px 10px; border-bottom:2px solid var(--line-hi); background:#0a1214; }
.tbl td, .j-ref td { padding:9px 10px; border-top:1px solid #1a2a2e; vertical-align:middle; }
.tbl tbody tr:hover td, .j-ref tbody tr:hover td { background:rgba(255,255,255,.03); }
.tbl .num, .j-ref td.d { text-align:right; font-variant-numeric:tabular-nums; color:#fff; }
.j-ref th:not(:first-child) { text-align:right; } .j-ref { table-layout:fixed; margin-bottom:8px; } .j-ref th:first-child { width:40%; }
.tbl-chars { min-width:900px; } .tbl-chars .srv-nome { white-space:nowrap; }
.tbl-chars input[data-edit="nome"] { width:170px; } .tbl-chars input[data-edit="level"] { width:80px; }
.tbl-chars input[data-edit="dd"], .tbl-chars input[data-edit="fama"] { width:130px; text-align:right; font-variant-numeric:tabular-nums; }
.tbl-npc .j-grp th { background:#0a1214; color:#fff; font-size:14px; padding:8px 10px; }
.tbl-npc td { vertical-align:middle; } .tbl-npc .j-npcn { display:flex; gap:10px; align-items:center; min-width:0; } .tbl-npc .j-npcn > span { min-width:0; } .tbl-npc td.num { white-space:nowrap; }
.tbl-npc .j-cid { white-space:nowrap; } .tbl-npc.porcid .j-cid { display:none; } .j-cid-sub { display:none; }
.tbl-baby { table-layout:fixed; } .tbl-baby th:last-child, .tbl-baby td:last-child { width:190px; text-align:right; }
.j-lib { min-height:40px; min-width:140px; padding:0 14px; border-radius:2px; border:1px solid var(--line-ui); background:#0a1214; color:var(--muted); font:700 14px var(--f-ui); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.j-lib.on { background:var(--good); border-color:var(--good); color:#142003; }
.j-ok { color:#c4e84a; font-weight:700; } .j-bloq { color:var(--muted); }
.emo { height:1.35em; width:auto; vertical-align:-.3em; margin-right:4px; }

/* ---------- gráficos redondos ---------- */
.j-visao { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.j-donut { width:150px; height:150px; flex:none; } .j-donut-n { font:700 20px var(--f-ui); fill:#fff; } .j-donut-s { font-size:11px; fill:var(--muted); }
.j-legenda { flex:1 1 200px; display:grid; gap:6px; min-width:0; }
.j-leg { display:flex; gap:8px; align-items:center; padding:4px 0; border-top:1px solid #1a2a2e; } .j-leg:first-child { border-top:0; } .j-leg span:nth-child(2) { flex:1; min-width:0; } .j-dot { width:12px; height:12px; border-radius:50%; flex:none; }
.j-mini { width:100%; max-width:84px; height:auto; } .j-mini .j-donut-n { font-size:26px; }
.j-minis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:6px; } .j-minic { display:grid; justify-items:center; gap:2px; text-align:center; font-size:14px; }
.j-srvgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr)); gap:12px; }
.j-npcsrv { display:flex; gap:12px; align-items:center; margin-top:6px; } .j-npcsrv .j-mini { width:72px; flex:none; }

/* ---------- coleção: cartões com ícone, level e barra ---------- */
.dg { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.j-col { display:grid; grid-template-columns:56px minmax(0,1fr); grid-template-areas:"ic nm" "ic sel" "bar bar"; gap:2px 12px; align-items:center; padding:10px 12px; background:var(--slot); border:1px solid #1b2a2e; border-bottom:2px solid #1b2a2e; border-radius:3px; }
.j-col.tem { border-bottom-color:var(--good); } .j-col.sup { border-color:#6e5a1c; } .j-col.sup.tem { border-bottom-color:#d9b13a; }
.j-col .j-colicon { grid-area:ic; display:grid; place-items:center; } .j-col .j-colicon .emo { height:46px; margin:0; max-width:56px; object-fit:contain; }
.j-col:not(.tem) .j-colicon .emo { filter:grayscale(1) brightness(.6); opacity:.45; }
.j-col .j-colname { grid-area:nm; font:700 16px/1.15 var(--f-ui); color:#fff; min-width:0; overflow-wrap:anywhere; }
.j-col select { grid-area:sel; width:100%; min-height:36px; padding:2px 8px; font-size:14px; }
.j-colbar { grid-area:bar; margin:8px 0 0; height:8px; } .j-colbar i { transition:width .25s cubic-bezier(.16,1,.3,1); }
.j-resumo { margin-bottom:12px; font:600 15px var(--f-body); color:var(--sand); }

/* ---------- Home e Visão geral: personagem em destaque ---------- */
.hero { position:relative; min-height:214px; border:1px solid var(--line-hi); border-radius:4px; overflow:hidden; background:#05090a url(img/hero.jpg) 62% 30%/cover; box-shadow:0 10px 20px -12px #000; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,15,16,.97) 0,rgba(9,15,16,.93) 42%,rgba(9,15,16,.62) 62%,rgba(9,15,16,0) 92%), linear-gradient(180deg,rgba(9,15,16,.35),rgba(9,15,16,0) 30%,rgba(9,15,16,0) 70%,rgba(9,15,16,.7)); }
.hero::after { content:""; position:absolute; left:0; top:0; width:520px; max-width:60%; height:3px; background:linear-gradient(90deg,var(--red),rgba(224,41,29,0)); }
.hg { position:relative; display:grid; grid-template-columns:minmax(300px,392px) minmax(0,1fr) minmax(280px,336px); gap:22px; padding:18px 24px; align-items:center; }
.lbl { font:600 13px var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.hid { display:flex; gap:18px; align-items:center; margin-top:10px; }
.cg { width:78px; height:94px; flex:none; display:grid; place-items:center; background:var(--slot); border:1px solid var(--line); border-radius:0; box-shadow:inset 0 4px 10px rgba(0,0,0,.8), inset 0 -3px 0 var(--red); }
.hid .cg { width:96px; height:118px; } .cg img { height:76px; width:auto; } .hid .cg img { height:96px; }
.hid .nome { font:700 clamp(36px,3.4vw,54px)/1 var(--f-display); color:#fff; text-shadow:0 3px 2px #000; overflow-wrap:anywhere; }
.chips { display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.pill { font:700 14px var(--f-ui); letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:2px; border:1px solid #32484e; background:#0a1214; color:#c9d6d6; }
.pill.g { border-color:#587a14; color:#c4e84a; background:#17210a; }
.hud { display:grid; align-content:center; margin:0; }
.hr { display:grid; grid-template-columns:32px 86px minmax(60px,1fr) 52px 66px; gap:10px; align-items:center; padding:6px 0; border-top:1px solid rgba(45,66,71,.8); }
.hr:first-child { border-top:0; } .hr .emo { height:28px; margin:0; } .hr .n { font:700 17px var(--f-ui); letter-spacing:.08em; text-transform:uppercase; color:#d9cfb8; }
.hr .bar { margin:0; height:14px; } .hr b { font:700 22px var(--f-ui); color:#fff; text-align:right; text-shadow:0 2px 1px #000; }
.hr small { font:500 13px var(--f-body); color:#d3dedd; text-align:right; text-shadow:0 1px 2px #000; white-space:nowrap; }
.hs { display:grid; gap:10px; align-content:center; }
.hring { display:flex; align-items:center; gap:16px; padding:12px 16px; background:rgba(9,15,16,.84); border:1px solid var(--line-hi); border-radius:4px; }
.hring svg { flex:none; } .hring .t1 { font:600 12.5px var(--f-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.hring .t2 { font:700 28px/1.05 var(--f-ui); color:#fff; } .hring .t3 { font:400 13.5px/1.3 var(--f-body); color:var(--sand); }
.hv { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.val { display:flex; align-items:center; gap:10px; padding:10px 12px; background:rgba(9,15,16,.84); border:1px solid var(--line); border-radius:3px; min-width:0; }
.val img { height:32px; width:auto; } .val b { display:block; font:700 22px/1 var(--f-ui); color:#fff; } .val span { font:600 12px var(--f-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.hh { display:flex; align-items:baseline; gap:12px; margin:16px 0 8px; } .hh h2 { margin:0; font-size:20px; }
.tiles { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.tile { position:relative; display:flex; align-items:center; gap:12px; min-height:76px; padding:0 14px; background:linear-gradient(180deg,#14201f,#0f191b); border:1px solid var(--line); border-radius:4px; color:#fff; text-align:left; cursor:pointer; transition:border-color .15s ease; }
.tile:hover { border-color:var(--line-hi); }
.tile.on { border-color:var(--copper); background:linear-gradient(180deg,#1c2a2d,#101a1c); }
.tile.on::before { content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:3px; background:linear-gradient(90deg,var(--red),rgba(224,41,29,.2)); }
.tile .c { height:42px; width:36px; object-fit:contain; flex:none; } .tile .tx { flex:1; min-width:0; } .tile .s { font:700 20px/1.1 var(--f-ui); color:#fff; } .tile .d { font:400 14px var(--f-body); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile .j-mini { width:52px; flex:none; }
.tile.vazio { background:transparent; border:1px dashed var(--line-hi); justify-content:center; color:var(--muted); font:600 16px var(--f-ui); letter-spacing:.05em; }
.cards3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:14px; } .cards3 .card { padding:12px 16px; } .cards3 h2 { font-size:17px; margin-bottom:6px; color:var(--gold); }
.ev-n { font:700 22px/1.1 var(--f-display); color:#fff; } .ev-d { font:700 20px var(--f-ui); color:#ff8a78; margin:1px 0 6px; }
.pbar { height:9px; background:#050809; border:1px solid var(--line); border-radius:2px; overflow:hidden; } .pbar i { display:block; height:100%; background:linear-gradient(180deg,#ff5a49,#c4160c); } .pbar.v i { background:linear-gradient(180deg,#d4f54a,#6d9100); }
.li { display:flex; gap:10px; align-items:center; padding:7px 0; border-top:1px solid #1a2a2e; } .li:first-of-type { border-top:0; }
.dt { flex:none; width:44px; text-align:center; border:1px solid var(--line); border-radius:3px; background:var(--slot); padding:2px 0; } .dt b { display:block; font:700 18px/1 var(--f-ui); color:#fff; } .dt span { font:600 10px var(--f-ui); letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.li .t { flex:1; min-width:0; font:600 14.5px/1.25 var(--f-body); color:#fff; } .li .t small { display:block; font:400 12.5px var(--f-body); color:var(--muted); }
.tag { font:700 12px var(--f-ui); letter-spacing:.07em; text-transform:uppercase; padding:3px 7px; border-radius:2px; background:var(--blue); color:#001a19; }
.mt { display:flex; justify-content:space-between; align-items:center; margin-bottom:3px; font:600 14.5px var(--f-body); color:#fff; }

/* Visão geral: servidores em lista com 4 mini valores */
.vg { display:grid; grid-template-columns:minmax(420px,462px) minmax(0,1fr); gap:16px; margin-top:12px; align-items:start; }
.sg { display:grid; grid-template-columns:30px minmax(0,1fr) auto 52px; gap:12px; align-items:center; padding:7px 8px; border-top:1px solid #1a2a2e; position:relative; width:100%; background:none; border-left:0; border-right:0; border-bottom:0; color:#fff; text-align:left; cursor:pointer; }
.sg:first-of-type { border-top:0; } .sg img.c { height:34px; margin:0 auto; } .sg .s { font:700 18px/1.1 var(--f-ui); color:#fff; } .sg .s small { display:block; font:400 13px var(--f-body); color:var(--muted); }
.sg .m4 { display:flex; gap:8px; } .sg .m4 div { width:40px; text-align:center; } .sg .m4 .emo { height:16px; margin:0 auto 1px; display:block; } .sg .m4 b { font:700 14.5px var(--f-ui); color:#d9e3e2; }
.sg .tt { font:700 22px var(--f-ui); color:#fff; text-align:right; }
.sg.on { background:linear-gradient(90deg,#24373a,#101a1c); box-shadow:inset 0 0 0 1px var(--copper); }
.cr { display:grid; grid-template-columns:128px minmax(0,1fr); gap:12px; align-items:center; padding:8px 0; border-top:1px solid #1a2a2e; } .cr:first-child { border-top:0; }
.cr .l { display:flex; align-items:center; gap:10px; font:700 18px var(--f-ui); color:#fff; letter-spacing:.04em; } .cr .l .emo { height:30px; margin:0; } .cr .l small { display:block; font:400 12.5px var(--f-body); color:var(--muted); letter-spacing:0; }
.slots { display:flex; gap:5px; } .sl { flex:1; height:46px; display:grid; place-items:center; background:var(--slot); border:1px solid #1b2a2e; border-bottom:2px solid #1b2a2e; border-radius:3px; box-shadow:inset 0 3px 7px rgba(0,0,0,.7); min-width:0; }
.sl .emo { max-height:34px; max-width:84%; margin:0; object-fit:contain; } .sl.ok { border-bottom-color:var(--good); } .sl:not(.ok) .emo { filter:grayscale(1) brightness(.55); opacity:.38; } .sl.sup { border-color:#6e5a1c; } .sl.sup.ok { border-bottom-color:#d9b13a; }
.cap { display:flex; gap:18px; flex-wrap:wrap; font:400 13.5px var(--f-body); color:var(--muted); padding:8px 4px 0; }

/* ---------- janelas (adicionar personagem, exportar, importar) ---------- */
.ov { position:fixed; inset:0; z-index:50; background:rgba(3,7,8,.74); display:grid; place-items:center; padding:20px; overflow:auto; }
.modal { position:relative; width:min(100%,680px); background:linear-gradient(180deg,#14201f,#0c1314); border:1px solid var(--line-hi); border-radius:5px; padding:28px 32px 26px; box-shadow:0 20px 40px rgba(0,0,0,.7), 0 0 0 1px var(--copper); }
.modal.larga { width:min(100%,760px); }
.modal::before { content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:4px; background:linear-gradient(90deg,var(--red),rgba(224,41,29,.2)); }
.modal h2 { font:700 30px var(--f-display); margin:0 0 6px; }
.macoes, .dados-acoes { display:flex; gap:14px; margin-top:20px; flex-wrap:wrap; }
.dados-txt { min-height:190px; resize:vertical; font:400 13px/1.5 Consolas,"Courier New",monospace; }
.f-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.chk { display:flex; align-items:center; gap:10px; font:500 17px var(--f-body); color:var(--sand); margin:4px 0 0; cursor:pointer; } .chk input { width:20px; height:20px; accent-color:var(--good); }

/* ---------- entrada ---------- */
.entrada { max-width:700px; margin:0 auto; position:relative; padding-top:110px; }
.entrada .painel { padding-top:110px; } .entrada .corpo { padding:30px 44px 40px; min-height:0; margin-top:-25px; text-align:center; }
.entrada h2 { font:700 34px var(--f-display); margin:0 0 8px; } .entrada .sub { font-size:18px; line-height:1.5; color:var(--muted); margin:0 auto 22px; max-width:480px; }
.entrada .btn { display:block; width:100%; padding:16px 0; font-size:20px; } .entrada .btn.sec { font-size:18px; padding:13px 0; }
.ou { display:flex; align-items:center; gap:14px; margin:16px 0; color:#6c7f82; font:600 15px var(--f-ui); letter-spacing:.1em; text-transform:uppercase; } .ou i { flex:1; height:1px; background:var(--line); }
.nota-e { margin-top:20px; font-size:14.5px; line-height:1.5; color:var(--muted); text-align:center; }
.lk { color:#7fe3de; text-decoration:underline; text-underline-offset:3px; background:none; border:0; cursor:pointer; font:500 16px var(--f-body); padding:10px 4px; min-height:44px; }
.entrada .field { text-align:left; }

@media (max-width:1100px) {
  .hg { grid-template-columns:minmax(0,1fr); } .hs { grid-template-columns:1fr; }
  .tiles { grid-template-columns:repeat(3,minmax(0,1fr)); } .cards3 { grid-template-columns:minmax(0,1fr); } .vg { grid-template-columns:minmax(0,1fr); }
  .dg { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .hdr { grid-template-columns:60px minmax(0,1fr) 60px; } .hdr .m, .hdr .f { display:none; } .hdr { background:linear-gradient(180deg,#140704,#080302); border:1px solid #4d2510; border-radius:4px; height:56px; }
  .navs { top:6px; padding:0 10px; flex-wrap:wrap; height:auto; justify-content:center; position:relative; } .navs .grp { flex-wrap:wrap; justify-content:center; }
  .painel { padding-top:0; } .hdr { position:relative; } .hdr .l, .hdr .r { display:none; } .corpo { margin-top:0; padding:20px 16px 30px; } .tab { font-size:18px; padding:10px 10px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }
.entrada { padding-top:0 !important; } .entrada .painel { padding-top:110px; }
.stage.login .logo-c { margin-top:clamp(24px,14vh,172px); }


/* Personagens: seletor, Roupas e Boss Cyber */
.pill-b { font:700 14px var(--f-ui); letter-spacing:.08em; text-transform:uppercase; padding:0 12px; min-height:40px; border-radius:2px; border:1px solid #32484e; background:#0a1214; color:#c9d6d6; cursor:pointer; }
.pill-b:hover { color:#fff; border-color:var(--line-hi); }
.pill-b.on { border-color:#587a14; color:#d6f35e; background:#17210a; }
.chkb { flex:none; width:24px; height:24px; border-radius:3px; background:var(--slot); border:1px solid #32484e; color:var(--good); font:700 15px/1 var(--f-ui); cursor:pointer; display:inline-grid; place-items:center; padding:0; }
.chkb.on { background:#1d2a0b; border-color:#5d7a14; }
.chkl { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.35; } .chkl .muted { min-width:0; }
.bossg { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:16px; align-items:start; }
.bossc { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 28px; }
.bossl { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:center; } .bossl .bar { margin:4px 0 0; }
.bossi .emo { height:34px; margin:0; } .bossn { white-space:nowrap; font:700 16px var(--f-ui); color:var(--muted); } .bossn input { width:70px; min-height:34px; padding:2px 8px; text-align:right; }
@media (max-width:1100px) { .bossg { grid-template-columns:minmax(0,1fr); } .bossc { grid-template-columns:minmax(0,1fr); } }
.dg .j-lab { grid-column:1/-1; }
.j-npcfiltros .field { max-width:340px; }

/* Metas: anel, barra e prioridade */
.mlista { display:grid; gap:0; background:var(--soft); border:1px solid var(--line); border-radius:4px; padding:0 16px; }
.mrow { display:grid; grid-template-columns:76px minmax(0,1fr) 230px; gap:18px; align-items:center; padding:13px 0; border-top:1px solid #1a2a2e; } .mrow:first-child { border-top:0; }
.mrow .t { font:700 21px/1.15 var(--f-ui); color:#fff; } .mrow .d { font:400 14.5px var(--f-body); color:var(--muted); margin:1px 0 6px; }
.mrow .r { text-align:right; display:grid; gap:2px; justify-items:end; } .mrow .r small { font:400 14px var(--f-body); color:var(--muted); min-height:1em; }
.mr-acoes { display:flex; align-items:center; gap:4px; margin-top:2px; }

/* Calendário: grade do mês */
.mcal { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:#1a2a2e; border:1px solid #1a2a2e; border-radius:3px; overflow:hidden; }
.mcal .h { background:#0a1214; padding:8px; font:600 13px var(--f-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:center; }
.mcal .d { background:var(--card); min-height:74px; padding:6px 7px; min-width:0; } .mcal .d.x { background:#0a1012; }
.mcal .d b { font:700 16px var(--f-ui); color:#c9d6d6; } .mcal .d.passou { background:#0d1517; } .mcal .d.passou b { color:#5c6f72; }
.mcal .d.hoje { box-shadow:inset 0 0 0 2px var(--blue); } .mcal .d.hoje b { color:var(--blue); }
.ev2 { display:block; margin-top:4px; padding:2px 6px; font:700 12px var(--f-ui); letter-spacing:.05em; text-transform:uppercase; color:#fff; border-radius:2px; background:var(--red); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ev2.f { background:var(--blue); color:#001a19; } .ev2.p { background:var(--media); color:#1a1503; } .ev2.c { background:#7a1710; }
.leg { display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font:400 14px var(--f-body); color:var(--muted); } .leg i { display:inline-block; width:11px; height:11px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
.evt { background:linear-gradient(90deg,#1c2a2d,#101a1c); padding:16px 22px; } .evt .grupo { color:var(--muted); }

.aviso-proto { margin-top:26px; padding-top:12px; border-top:1px solid var(--line); text-align:center; font:400 13px var(--f-body); color:var(--muted); }


/* Upgrade: itens necessários por level (regras antigas, ainda usadas como reserva) */
.upl { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 6px; }
.upi { font:500 15px var(--f-body); color:var(--sand); background:var(--slot); border:1px solid var(--line); border-radius:3px; padding:4px 10px; }
.upi b { color:#fff; font:700 16px var(--f-ui); }
/* Upgrade: ícone - item - quantidade, e por último o Dino Dollar */
.upls { display:grid; gap:0; margin:6px 0 4px; }
.upr { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:12px; align-items:center; padding:6px 2px; border-top:1px solid #1a2a2e; }
.upr:first-child { border-top:0; }
.upico { width:36px; height:36px; display:grid; place-items:center; background:var(--slot); border:1px solid var(--line); border-radius:3px; }
.upico img { max-width:30px; max-height:30px; object-fit:contain; } .upico .emo { height:28px; margin:0; }
.upn { font:600 17px var(--f-body); color:#fff; } .upq { font:700 22px var(--f-ui); color:#fff; text-align:right; }
.upr.dd { border-top:1px solid var(--line-hi); margin-top:4px; padding-top:10px; } .upr.dd .upq { color:var(--accent-ink); }
.uph { flex:1; border-top:0 !important; padding:2px 12px 2px 0; } .uph .upn { font:700 20px var(--f-ui); letter-spacing:.03em; } .uph .upq { color:var(--good); font-size:20px; } .uph .upico .emo { height:30px; }
.uplv { font:600 14px var(--f-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-left:6px; }

/* Upgrade, versão compacta: cartões lado a lado, materiais em blocos de 2 colunas, Dino Dollar em destaque */
.upg { display:grid; grid-template-columns:repeat(auto-fill,minmax(440px,1fr)); gap:12px; align-items:start; }
.upg .j-entry { padding:12px 14px 14px; gap:8px; background:linear-gradient(180deg,#182628,#111b1d); }
.upg .j-head { padding-bottom:8px; border-bottom:1px solid var(--line); }
.upls { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:0; }
.upr { grid-template-columns:34px minmax(0,1fr) auto; gap:9px; padding:5px 10px 5px 6px; background:var(--slot); border:1px solid #1b2a2e; border-radius:3px; }
.upr:first-child { border-top:1px solid #1b2a2e; }
.upico { width:30px; height:30px; background:none; border:0; } .upico img { max-width:28px; max-height:28px; }
.upn { font:600 15px/1.15 var(--f-body); min-width:0; } .uplv { display:block; margin:1px 0 0; font:600 11.5px var(--f-ui); letter-spacing:.1em; color:var(--muted); }
.upq { font:700 21px var(--f-ui); min-width:1.4em; }
.upr.dd { grid-column:1/-1; margin:2px 0 0; padding:7px 12px 7px 6px; background:linear-gradient(90deg,#2a2410,#14110a); border:1px solid #6e5a1c; }
.upr.dd .upq { color:var(--accent-ink); font-size:24px; } .upr.dd .upn { font:700 16px var(--f-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }
.uph { padding:0 !important; background:none !important; border:0 !important; grid-template-columns:34px minmax(0,1fr) auto; }
.uph .upico { width:34px; height:34px; background:var(--slot); border:1px solid var(--line); border-radius:3px; } .uph .upico .emo { height:26px; }
.uph .upn { font:700 19px var(--f-ui); } .uph .upq { font-size:17px; color:var(--good); text-align:left; margin-left:2px; }
.uph { display:flex !important; align-items:center; gap:10px; } .uph .upq { order:3; }
.upg + .card .upls, .card > .upls { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.card > .upls .upr.dd { grid-column:1/-1; }
@media (max-width:560px) { .upg { grid-template-columns:minmax(0,1fr); } .upls { grid-template-columns:minmax(0,1fr); } }

/* Meta de Upgrade: lista dos itens com o level de hoje */
.mi { list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:4px 14px; }
.mi li { display:flex; justify-content:space-between; gap:10px; font:500 14.5px var(--f-body); color:var(--sand); padding:2px 0; border-top:1px solid #1a2a2e; }
.mi-n { color:#fff; font-weight:600; } .mi-l { color:var(--muted); white-space:nowrap; } .mi li.ok .mi-l { color:#c4e84a; font-weight:600; }

/* polish: alvo de toque dos links e Metas em telas estreitas */
.btn.link { min-width:44px; justify-content:center; }
@media (max-width:760px) {
  .mrow { grid-template-columns:64px minmax(0,1fr); gap:12px 14px; }
  .mrow .r { grid-column:1/-1; text-align:left; justify-items:start; display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; }
  .mrow .r small { min-height:0; }
  .mrow .r .mr-acoes { margin:0 0 0 auto; }
  .mlista { padding:0 12px; }
  .mi { grid-template-columns:minmax(0,1fr); }
}
.mi li { flex-wrap:wrap; column-gap:12px; } .mi-n { min-width:0; overflow-wrap:anywhere; } @media (max-width:760px) { .mi-l { white-space:normal; } }
.j-entry { grid-template-columns:minmax(0,1fr); } .upg .j-entry { min-width:0; } .j-head > span { min-width:0; overflow-wrap:anywhere; }

/* barra de abas: textos centrados na faixa escura da imagem (do pixel 49 ao 80) e traço vermelho embaixo do texto, dentro da faixa */
.navs { top:49px; height:32px; }
.tab { padding:0 14px; }
.tab[aria-selected="true"]::after { top:auto; bottom:9px; left:12px; right:12px; }
@media (max-width:900px) { .navs { top:6px; height:auto; } .tab[aria-selected="true"]::after { bottom:6px; } }

.conta { align-items:center; }
.conta-conf { color:#ffb4a8; font-weight:600; margin-left:10px; }
.btn.link.perigo { color:#ff8a78; }

/* a linha da conta começa abaixo da base da barra (110 px), senão o topo do texto é coberto */
.conta { margin:0 0 12px; min-height:32px; }

.obra { grid-column:1/-1; display:flex; align-items:baseline; gap:10px 14px; flex-wrap:wrap; margin:0 0 12px; padding:10px 14px; background:#2a1d0c; border:1px solid #8a6420; border-radius:3px; font:400 14px/1.45 var(--f-body); color:#f1deb8; }
.obra b { font:700 13px var(--f-ui); letter-spacing:.08em; color:#ffc94d; }

.lang select { background:#0c1314; color:var(--sand); border:1px solid var(--line); border-radius:3px; font:500 14px var(--f-ui); padding:4px 24px 4px 8px; min-height:32px; cursor:pointer; }
.lang select:hover { background:#0b1315; }
.lang select:focus { border-color:var(--blue); outline:none; }
.lang-topo { position:absolute; right:78px; top:-46px; z-index:4; display:flex; align-items:center; gap:8px; }
.lang-topo .conta { margin:0; min-height:36px; padding:0 4px 0 12px; gap:2px 4px; flex-wrap:nowrap; background:rgba(12,19,20,.82); border:1px solid var(--line); border-radius:3px; white-space:nowrap; }
.lang-topo .conta .btn.link { min-height:34px; }
.lang-topo .lang select { background:rgba(12,19,20,.82); color:var(--sand); border:1px solid var(--line); border-radius:3px; font:500 15px var(--f-ui); padding:5px 26px 5px 10px; min-height:36px; }
.lang-topo .lang select:hover, .lang-topo .lang select:focus { background:#0b1315; border-color:var(--blue); color:#fff; }
@media (max-width:900px) { .lang-topo { position:static; flex-wrap:wrap; justify-content:flex-end; padding:0 10px 8px; } .lang-topo .conta { flex-wrap:wrap; white-space:normal; } }