/* BATTLE FLAGS 4.0 — componentes de videogame. Re-estiliza os painéis/telas existentes (.panel, .btn, .card, .seg, .bar…)
   e define os novos (.bf-*). Nada de retângulo com background-color: toda peça tem borda forte, brilho interno,
   textura sutil, sombra de profundidade e estado de hover/press/focus/selected/locked. */
body { font-family: var(--bf-body); color: var(--bf-text); }
#overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto; background: radial-gradient(120% 90% at 50% 40%, rgba(7, 17, 31, .55), rgba(7, 17, 31, .92)); backdrop-filter: blur(6px) saturate(1.1); animation: bf-fade-in var(--bf-t) both; overflow: auto; }
#overlay.hidden { display: none; }

/* ---------- painel de tela (PERSONAGENS, ARSENAL, LOJA…) ---------- */
.panel { width: min(100vw - 28px, 1380px); max-height: calc(100vh - 28px); overflow: auto; padding: 0 0 22px; background: linear-gradient(180deg, var(--bf-bg2), var(--bf-bg0)); border: 3px solid var(--bf-line); border-radius: var(--bf-r-lg); box-shadow: var(--bf-shadow), var(--bf-inner); position: relative; animation: bf-pop var(--bf-t-slow) var(--bf-ease) both; color: var(--bf-text); }
.panel.narrow { width: min(100vw - 28px, 640px); } .panel.wide { width: min(100vw - 28px, 1500px); }
.panel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--bf-tex); pointer-events: none; }
.panel-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px 12px; margin: 0 0 16px; background: linear-gradient(90deg, var(--bf-bg3), var(--bf-bg1)); border-bottom: 3px solid var(--bf-line); border-radius: 20px 20px 0 0; }
.panel-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 6px; background: repeating-linear-gradient(135deg, var(--bf-yellow) 0 14px, var(--bf-ink) 14px 28px); opacity: .9; }
.panel-head h2 { margin: 0; font-family: var(--bf-display); font-weight: 700; font-size: clamp(34px, 4vw, 56px); line-height: .9; text-transform: uppercase; letter-spacing: .02em; color: var(--bf-yellow); -webkit-text-stroke: 2px var(--bf-ink); paint-order: stroke fill; text-shadow: 0 4px 0 rgba(0, 0, 0, .55); font-style: italic; }
.panel-body { padding: 0 22px; position: relative; }
.panel-body h3, .shop-h { font-family: var(--bf-cond); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--bf-yellow); font-size: 15px; margin: 18px 0 8px; padding-left: 10px; border-left: 4px solid var(--bf-yellow); }
.help { color: var(--bf-muted); font-size: 13px; font-family: var(--bf-cond); font-weight: 700; letter-spacing: .04em; }
.kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 6px; background: var(--bf-bg3); border: 2px solid var(--bf-line); box-shadow: 0 2px 0 rgba(0, 0, 0, .5); font-family: var(--bf-cond); font-weight: 900; color: var(--bf-yellow); font-size: 12px; text-align: center; }

/* ---------- botões físicos ---------- */
.btn, .bf-btn { --c: var(--bf-bg3); --c2: var(--bf-bg2); --edge: #041022; --fg: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; padding: 12px 22px; border: 3px solid var(--bf-ink); border-radius: 14px; background: linear-gradient(180deg, var(--c), var(--c2)); color: var(--fg); font-family: var(--bf-cond); font-weight: 900; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 0 var(--edge), 0 12px 22px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .28), inset 0 -3px 0 rgba(0, 0, 0, .25); transition: transform var(--bf-t-fast), box-shadow var(--bf-t-fast), filter var(--bf-t-fast); overflow: hidden; }
.btn::after, .bf-btn::after { content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); transform: translateX(-140%) skewX(-20deg); pointer-events: none; }
.btn:hover, .bf-btn:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 8px 0 var(--edge), 0 16px 26px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(0, 0, 0, .25); }
.btn:hover::after, .bf-btn:hover::after { animation: bf-shine .7s var(--bf-ease-out) both; }
.btn:active, .bf-btn:active, .btn.pressed, .bf-btn.pressed { transform: translateY(4px); box-shadow: 0 2px 0 var(--edge), 0 6px 12px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .2); filter: brightness(.96); }
.btn:focus-visible, .bf-btn:focus-visible { outline: 3px solid var(--bf-white); outline-offset: 2px; }
.btn.primary, .bf-btn.yellow { --c: #ffe04a; --c2: var(--bf-yellow2); --edge: #8a5a00; --fg: #221a00; }
.btn.blue, .bf-btn.blue { --c: #2c9bff; --c2: var(--bf-blue2); --edge: #03357d; }
.btn.red, .bf-btn.red, .btn.danger { --c: #ff5b7a; --c2: var(--bf-red2); --edge: #6d0620; }
.btn.green, .bf-btn.green { --c: #5cf08a; --c2: var(--bf-green2); --edge: #0b5a2a; --fg: #06210f; }
.btn.purple, .bf-btn.purple { --c: #b07bff; --c2: var(--bf-purple2); --edge: #33127a; }
.btn.ghost, .bf-btn.ghost { --c: rgba(22, 41, 74, .9); --c2: rgba(10, 23, 40, .9); --edge: #030a16; border-color: var(--bf-line); }
.btn.small, .bf-btn.small { padding: 8px 14px; font-size: 14px; border-radius: 11px; }
.btn.big, .bf-btn.big { padding: 16px 30px; font-size: 22px; border-radius: 18px; }
.btn:disabled, .bf-btn:disabled, .btn.locked { filter: grayscale(.7) brightness(.6); cursor: not-allowed; transform: none; }
.btn svg, .bf-btn svg { width: 20px; height: 20px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- cards ---------- */
.card, .bf-card { position: relative; background: linear-gradient(180deg, var(--bf-bg3), var(--bf-bg1)); border: 3px solid var(--bf-line); border-radius: var(--bf-r); padding: 12px; box-shadow: var(--bf-shadow-sm), var(--bf-inner); transition: transform var(--bf-t-fast), border-color var(--bf-t-fast), box-shadow var(--bf-t-fast); color: var(--bf-text); overflow: hidden; }
.card::before, .bf-card::before { content: ''; position: absolute; inset: 0; background: var(--bf-tex); pointer-events: none; border-radius: inherit; }
.card:hover, .bf-card:hover { transform: translateY(-3px); border-color: #7fb6ff; box-shadow: 0 10px 24px rgba(0, 0, 0, .45), 0 0 0 2px rgba(22, 139, 255, .25), var(--bf-inner); }
.card.sel, .card.selected, .bf-card.selected { border-color: var(--bf-yellow); box-shadow: 0 0 0 3px rgba(255, 211, 38, .35), 0 0 22px rgba(255, 211, 38, .35), var(--bf-shadow-sm); }
.card.locked, .bf-card.locked { filter: grayscale(.8) brightness(.55); }
.card.locked::after, .bf-card.locked::after { content: '🔒'; position: absolute; right: 8px; top: 6px; font-size: 16px; filter: none; }
.card.new::after, .bf-card.new::after { content: 'NOVO'; position: absolute; right: -28px; top: 10px; transform: rotate(35deg); background: var(--bf-red); color: #fff; font-family: var(--bf-cond); font-weight: 900; font-size: 11px; letter-spacing: .1em; padding: 2px 34px; box-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .grid3, .grid4 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- barras de status ---------- */
.stat { display: flex; justify-content: space-between; align-items: center; font-family: var(--bf-cond); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--bf-muted); margin-top: 8px; }
.stat b { color: #fff; }
.bar, .bf-bar { height: 12px; border-radius: 6px; background: #050d1a; border: 2px solid rgba(0, 0, 0, .7); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7); overflow: hidden; margin-top: 3px; position: relative; }
.bar i, .bf-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(180deg, #ffe04a, var(--bf-yellow2)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 8px rgba(255, 211, 38, .45); transition: width .25s var(--bf-ease-out); }
.bar.blue i, .bf-bar.blue i { background: linear-gradient(180deg, #4aa8ff, var(--bf-blue2)); box-shadow: 0 0 8px rgba(22, 139, 255, .5); }
.bar.red i, .bf-bar.red i { background: linear-gradient(180deg, #ff6e88, var(--bf-red2)); box-shadow: 0 0 8px rgba(255, 53, 93, .5); }
.bar.green i, .bf-bar.green i { background: linear-gradient(180deg, #6ff59a, var(--bf-green2)); box-shadow: 0 0 8px rgba(66, 223, 114, .5); }
.bar.purple i, .bf-bar.purple i { background: linear-gradient(180deg, #b98bff, var(--bf-purple2)); box-shadow: 0 0 8px rgba(152, 86, 255, .5); }

/* ---------- abas / segmentos ---------- */
.seg, .bf-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 3px solid var(--bf-line); border-radius: 14px; background: var(--bf-bg0); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); }
.seg button, .bf-tabs button, .tab { border: 0; background: transparent; color: var(--bf-muted); padding: 8px 16px; border-radius: 10px; font-family: var(--bf-cond); font-weight: 900; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: all var(--bf-t-fast); }
.seg button:hover, .bf-tabs button:hover, .tab:hover { color: #fff; background: rgba(22, 139, 255, .15); }
.seg button.on, .bf-tabs button.on, .tab.on { color: #221a00; background: linear-gradient(180deg, #ffe04a, var(--bf-yellow2)); box-shadow: 0 3px 0 #8a5a00, inset 0 2px 0 rgba(255, 255, 255, .35); }

/* ---------- listas / tabelas / configurações ---------- */
.list { display: flex; flex-direction: column; gap: 8px; }
.mission, .ev, .fr, .rw-daily, .ss-tier, .shopitem, .setting { background: linear-gradient(180deg, var(--bf-bg3), var(--bf-bg1)); border: 3px solid var(--bf-line); border-radius: 14px; padding: 12px 14px; box-shadow: var(--bf-shadow-sm), var(--bf-inner); }
.mission b, .ev b, .fr b { font-family: var(--bf-cond); font-weight: 900; letter-spacing: .05em; text-transform: uppercase; font-size: 16px; }
.mission.done { border-color: var(--bf-green); } .ev.on { border-color: var(--bf-yellow); }
.table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-family: var(--bf-cond); font-weight: 700; font-size: 16px; letter-spacing: .03em; }
.table th { color: var(--bf-yellow); text-transform: uppercase; font-weight: 900; letter-spacing: .1em; font-size: 13px; text-align: left; padding: 6px 12px; }
.table td { background: linear-gradient(180deg, var(--bf-bg3), var(--bf-bg1)); padding: 10px 12px; border-top: 3px solid var(--bf-line); border-bottom: 3px solid var(--bf-line); }
.table td:first-child { border-left: 3px solid var(--bf-line); border-radius: 12px 0 0 12px; } .table td:last-child { border-right: 3px solid var(--bf-line); border-radius: 0 12px 12px 0; }
.table tr.me td { border-color: var(--bf-yellow); background: linear-gradient(180deg, #3a3210, #201a08); }
.setting { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.setting > span:first-child { font-family: var(--bf-cond); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: 15px; }
input[type=range] { accent-color: var(--bf-yellow); width: 160px; } input[type=text] { background: var(--bf-bg0); border: 3px solid var(--bf-line); border-radius: 10px; color: #fff; padding: 8px 10px; font-family: var(--bf-cond); font-weight: 800; font-size: 16px; letter-spacing: .06em; }

/* mundos / níveis / mapas (setup do solo e do 4x4) */
.worlds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.world { position: relative; background: linear-gradient(180deg, var(--bf-bg3), var(--bf-bg1)); border: 3px solid var(--bf-line); border-radius: 14px; padding: 12px 8px; text-align: center; cursor: pointer; font-family: var(--bf-cond); font-weight: 900; text-transform: uppercase; letter-spacing: .05em; box-shadow: var(--bf-shadow-sm), var(--bf-inner); transition: all var(--bf-t-fast); }
.world:hover { transform: translateY(-2px); border-color: #7fb6ff; } .world.sel { border-color: var(--bf-yellow); box-shadow: 0 0 0 3px rgba(255, 211, 38, .35), var(--bf-shadow-sm); }
.world.locked { filter: grayscale(.8) brightness(.55); }
.levels { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-top: 12px; }
.lvl { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--bf-bg3), var(--bf-bg1)); border: 3px solid var(--bf-line); border-radius: 12px; font-family: var(--bf-display); font-size: 24px; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, .5); transition: all var(--bf-t-fast); }
.lvl:hover { transform: translateY(-2px); border-color: #7fb6ff; } .lvl.done { border-color: var(--bf-green); color: var(--bf-green); } .lvl.boss { border-color: var(--bf-red); color: var(--bf-red); } .lvl.locked { opacity: .35; cursor: not-allowed; } .lvl.cur { border-color: var(--bf-yellow); color: var(--bf-yellow); animation: bf-glow 1.6s infinite; }
.map-card { padding: 0; overflow: hidden; cursor: pointer; } .map-card img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-bottom: 3px solid var(--bf-line); } .map-card .mc-t { padding: 8px 12px; font-family: var(--bf-cond); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.rar-common { color: #cfd8e6; } .rar-rare { color: #4da3ff; } .rar-epic { color: #c86bff; } .rar-legendary { color: var(--bf-yellow); }

/* selo / chip */
.bf-chip, .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--bf-bg0); border: 2px solid var(--bf-line); font-family: var(--bf-cond); font-weight: 900; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--bf-muted); }
.bf-chip.yellow { border-color: var(--bf-yellow); color: var(--bf-yellow); } .bf-chip.red { border-color: var(--bf-red); color: var(--bf-red); } .bf-chip.blue { border-color: var(--bf-blue); color: var(--bf-blue); } .bf-chip.green { border-color: var(--bf-green); color: var(--bf-green); } .bf-chip.purple { border-color: var(--bf-purple); color: var(--bf-purple); }

/* scrollbars */
.panel::-webkit-scrollbar, #overlay::-webkit-scrollbar, .hs-grid::-webkit-scrollbar, .ar-grid::-webkit-scrollbar { width: 10px; } .panel::-webkit-scrollbar-thumb, .hs-grid::-webkit-scrollbar-thumb, .ar-grid::-webkit-scrollbar-thumb { background: var(--bf-line-strong); border-radius: 6px; }