/* ===== Telas premium: seleção de personagem, loadout, arsenal, revelação ===== */
.panel.wide { width: min(96vw, 1360px); max-height: 94vh; }
.panel-hero { font-family: var(--h-font); }
.panel-hero h2 { font-family: 'Anton', var(--h-font); }
.sbar { flex: 1; height: 10px; border-radius: 5px; background: rgba(0,0,0,.5); border: 1px solid var(--h-line); overflow: hidden; }
.sbar i { display: block; height: 100%; border-radius: 5px; box-shadow: 0 0 8px currentColor; transition: width .35s; }
.chip { padding: 6px 12px; border-radius: 8px; background: var(--h-navy3); border: 2px solid var(--h-line); color: #fff; font-family: var(--h-font); font-weight: 800; font-size: 14px; letter-spacing: .5px; cursor: pointer; text-transform: uppercase; }
.chip.eq { border-color: var(--h-yellow); color: var(--h-yellow); } .chip.lock { opacity: .55; }
.pick-strip { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: var(--h-navy3); border: 2px solid var(--h-line); cursor: pointer; }
.pick-strip img { width: 56px; height: 56px; border-radius: 10px; border: 2px solid var(--h-yellow); background: var(--h-navy4); }
.pick-strip .ps-t { flex: 1; display: flex; flex-direction: column; line-height: 1.1; } .pick-strip small { font-size: 11px; color: var(--h-gray); letter-spacing: 1px; } .pick-strip b { font-family: 'Anton', var(--h-font); font-size: 22px; } .pick-strip span { font-size: 12px; color: var(--h-gray); font-weight: 700; }

/* --- seleção de personagem --- */
.hsel { display: grid; grid-template-columns: 200px 1fr 380px; gap: 14px; min-height: 560px; }
.hs-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; max-height: 70vh; overflow-y: auto; padding-right: 4px; }
.hs-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 10px; background: var(--h-navy3); border: 2px solid var(--h-line); color: #fff; cursor: pointer; transition: transform .12s, border-color .12s; }
.hs-card img { width: 64px; height: 64px; border-radius: 8px; background: var(--h-navy4); } .hs-card b { font-size: 13px; letter-spacing: .5px; } .hs-card small { font-size: 9px; color: var(--cls); font-weight: 800; letter-spacing: .5px; }
.hs-card:hover { transform: translateY(-2px); } .hs-card.sel { border-color: var(--cls); box-shadow: 0 0 14px color-mix(in srgb, var(--cls) 60%, transparent); }
.hs-card .mast { position: absolute; top: 4px; right: 4px; font-style: normal; font-size: 10px; font-weight: 900; padding: 1px 5px; border-radius: 6px; background: var(--h-yellow); color: #221a00; }
.hs-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; border-radius: 16px; background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--cls) 35%, #0b1629), #07101f 70%); border: 2px solid var(--h-line); overflow: hidden; min-height: 520px; }
.hs-glow { position: absolute; left: 50%; bottom: 40px; width: 300px; height: 60px; transform: translateX(-50%); border-radius: 50%; background: var(--cls); filter: blur(30px); opacity: .55; }
.hs-big { position: relative; height: 96%; max-height: 640px; filter: drop-shadow(0 20px 20px rgba(0,0,0,.6)); animation: hb-float 4s ease-in-out infinite; }
.hs-stage.pop .hs-big { animation: hs-pop .45s ease-out, hb-float 4s ease-in-out .45s infinite; }
.hs-stage.flash::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0) 60%); animation: hs-flash .5s ease-out forwards; }
@keyframes hs-pop { 0% { transform: scale(.85) translateY(30px); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }
@keyframes hs-flash { to { opacity: 0; } }
.hs-name { position: absolute; left: 16px; top: 14px; display: flex; flex-direction: column; line-height: .95; }
.hs-name b { font-family: 'Anton', var(--h-font); font-size: 46px; font-style: italic; text-shadow: 0 4px 0 #000, 0 0 20px color-mix(in srgb, var(--cls) 70%, transparent); } .hs-name small { font-size: 16px; letter-spacing: 3px; color: var(--cls); font-weight: 800; }
.hs-info { display: flex; flex-direction: column; gap: 10px; }
.hs-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hs-cls { padding: 3px 10px; border-radius: 6px; background: var(--cls); color: #0a0a12; font-weight: 900; font-size: 13px; letter-spacing: 1px; }
.hs-diff, .hs-fac { font-size: 12px; color: var(--h-gray); font-weight: 800; letter-spacing: 1px; } .hs-diff b { color: #fff; }
.hs-stats { display: flex; flex-direction: column; gap: 6px; }
.hs-stats > div { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 1px; } .hs-stats span { width: 84px; color: var(--h-gray); } .hs-stats b { width: 56px; text-align: right; font-size: 13px; }
.hs-weapon { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--h-navy3); border: 2px solid var(--h-line); }
.hs-weapon img { width: 150px; height: 62px; object-fit: contain; } .hs-weapon small { font-size: 10px; color: var(--h-gray); letter-spacing: 1px; } .hs-weapon b { display: block; font-family: 'Anton', var(--h-font); font-size: 18px; } .hs-weapon p { margin: 2px 0 0; font-size: 11px; color: var(--h-gray); text-transform: none; }
.hs-kit { display: flex; flex-direction: column; gap: 6px; }
.hs-ab { padding: 7px 10px; border-radius: 10px; background: var(--h-navy3); border-left: 4px solid var(--h-gray); }
.hs-ab.pas { border-left-color: var(--h-green); } .hs-ab.skl { border-left-color: var(--h-blue3); } .hs-ab.ult { border-left-color: var(--h-yellow); }
.hs-ab .k { font-size: 10px; color: var(--h-gray); letter-spacing: 1.5px; font-weight: 800; } .hs-ab .k i { font-style: normal; padding: 0 5px; border-radius: 4px; background: rgba(255,255,255,.12); margin-left: 4px; }
.hs-ab b { display: block; font-size: 15px; letter-spacing: .5px; } .hs-ab p { margin: 1px 0 0; font-size: 11.5px; color: var(--h-gray); text-transform: none; } .hs-ab em { color: var(--h-yellow); font-style: normal; }
.hs-flag { font-size: 11px; color: var(--h-gray); text-transform: none; } .hs-flag b { color: var(--h-red3); }
.hs-mast { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 1px; } .hs-mast b { color: var(--h-yellow); } .hs-mast small { color: var(--h-gray); }
.hs-actions { display: flex; gap: 8px; margin-top: auto; } .hs-actions .btn.big { flex: 1; font-size: 20px; padding: 12px; }
@media (max-width: 1000px) { .hsel { grid-template-columns: 1fr; } .hs-list { grid-template-columns: repeat(4, 1fr); max-height: none; } .hs-stage { min-height: 300px; } .hs-big { max-height: 300px; } }

/* --- loadout --- */
.loadout { display: flex; flex-direction: column; gap: 10px; }
.lo-top { display: flex; gap: 14px; align-items: flex-start; } .lo-big { width: 180px; height: 300px; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(0,0,0,.6)); }
.lo-meta { flex: 1; display: flex; flex-direction: column; gap: 6px; } .lo-meta > b { font-family: 'Anton', var(--h-font); font-size: 34px; line-height: 1; } .lo-meta > small { color: var(--h-gray); letter-spacing: 2px; font-weight: 800; }
.lo-rewards { display: flex; flex-wrap: wrap; gap: 6px; } .lo-rewards span { font-size: 10px; padding: 3px 7px; border-radius: 6px; background: var(--h-navy3); border: 1px solid var(--h-line); color: var(--h-gray); } .lo-rewards span b { color: var(--h-yellow); margin-right: 4px; } .lo-rewards span.ok { border-color: var(--h-yellow); color: #fff; }
.lo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.lo-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 12px; background: var(--h-navy3); border: 2px solid var(--rar, var(--h-line)); color: #fff; cursor: pointer; }
.lo-card img { width: 100%; height: 150px; object-fit: contain; } .lo-card[data-kind="wskin"] img { height: 70px; }
.lo-card b { font-size: 13px; letter-spacing: .5px; } .lo-card small { font-size: 10px; color: var(--rar, var(--h-gray)); font-weight: 800; letter-spacing: .5px; } .lo-card em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--h-yellow); }
.lo-card.eq { box-shadow: 0 0 14px color-mix(in srgb, var(--rar) 60%, transparent); } .lo-card.lock img { filter: grayscale(.6) brightness(.6); } .lo-card.lock em { color: var(--h-gray); }
.lo-card.rar-legendary { background: linear-gradient(#111d33, #2a2010); } .lo-card.rar-mythic { background: linear-gradient(#111d33, #2a0a14); animation: hb-glow 2.4s infinite; } .lo-card.rar-epic { background: linear-gradient(#111d33, #1a1030); }
.lo-row { display: flex; flex-wrap: wrap; gap: 6px; }
.lo-ic { width: 42px; height: 42px; }

/* --- arsenal --- */
.arsenal { display: flex; flex-direction: column; gap: 10px; }
.ar-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-body { display: grid; grid-template-columns: 1fr 420px; gap: 12px; }
.ar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; align-content: start; max-height: 66vh; overflow-y: auto; padding-right: 4px; }
.ar-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; border-radius: 12px; background: var(--h-navy3); border: 2px solid var(--rar); color: #fff; cursor: pointer; }
.ar-card img { width: 100%; height: 80px; object-fit: contain; } .ar-card b { font-size: 14px; letter-spacing: .5px; } .ar-card small { font-size: 10px; color: var(--rar); font-weight: 800; }
.ar-card.sel { box-shadow: 0 0 14px color-mix(in srgb, var(--rar) 60%, transparent); transform: translateY(-2px); }
.ar-detail { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--rar) 25%, #0b1629), #07101f 70%); border: 2px solid var(--rar); }
.ar-big { width: 100%; height: 170px; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0,0,0,.6)); }
.ar-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .ar-title b { font-family: 'Anton', var(--h-font); font-size: 28px; } .ar-rar { padding: 2px 8px; border-radius: 6px; background: var(--rar); color: #0a0a12; font-size: 11px; font-weight: 900; } .ar-title small { color: var(--h-gray); font-weight: 800; letter-spacing: 1px; }
.ar-detail p { margin: 0; font-size: 12px; color: var(--h-gray); text-transform: none; }
.ar-users { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--h-yellow); }
.ar-skins { display: flex; gap: 4px; flex-wrap: wrap; } .ar-skins img { width: 56px; height: 26px; object-fit: contain; border-radius: 4px; background: rgba(0,0,0,.3); }
@media (max-width: 900px) { .ar-body { grid-template-columns: 1fr; } .ar-grid { max-height: none; } }

/* --- revelação --- */
.reveal { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(4,8,16,.94); font-family: var(--h-font); opacity: 0; transition: opacity .4s; }
.reveal.go { opacity: 1; }
.rv-beam { position: absolute; left: 50%; top: -10%; width: 420px; height: 120%; transform: translateX(-50%); background: linear-gradient(rgba(255,212,42,.35), rgba(255,212,42,0)); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); opacity: 0; transition: opacity 1s .3s; }
.reveal.go .rv-beam { opacity: 1; }
.rv-img { height: 70vh; filter: brightness(0) drop-shadow(0 0 30px rgba(255,212,42,.6)); transform: scale(.85); transition: filter 1.2s .6s, transform 1.2s .6s; }
.reveal.go .rv-img { filter: brightness(1) drop-shadow(0 20px 30px rgba(0,0,0,.7)); transform: scale(1); }
.rv-text { text-align: center; opacity: 0; transform: translateY(20px); transition: all .6s 1.4s; } .reveal.go .rv-text { opacity: 1; transform: none; }
.rv-text small { display: block; font-size: 16px; letter-spacing: 4px; color: var(--h-yellow); font-weight: 800; } .rv-text b { font-family: 'Anton', var(--h-font); font-size: 56px; font-style: italic; text-shadow: 0 4px 0 #000; }
.reveal .btn { opacity: 0; transition: opacity .4s 2s; } .reveal.go .btn { opacity: 1; }

/* --- legenda de fala --- */
.subtitle { position: absolute; left: 50%; bottom: calc(120px + var(--safe-b)); transform: translateX(-50%); display: flex; gap: 8px; align-items: baseline; padding: 6px 14px; border-radius: 10px; background: rgba(7,16,31,.85); border: 2px solid var(--h-line); font-family: var(--h-font); pointer-events: none; z-index: 20; }
.subtitle b { color: var(--h-yellow); font-size: 14px; letter-spacing: 1px; } .subtitle span { font-size: 15px; font-weight: 700; color: #fff; }
/* --- vitória: alinhamento do time --- */
.lineup { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin: 4px 0 10px; }
.lu { position: relative; display: flex; flex-direction: column; align-items: center; width: 130px; animation: lu-in .5s ease-out both; animation-delay: calc(var(--i) * .12s); }
.lu img { height: 190px; filter: drop-shadow(0 10px 10px rgba(0,0,0,.6)); animation: hb-float 3.5s ease-in-out infinite; } .lu.mvp img { height: 240px; } .lu.mvp { width: 160px; }
.lu b { font-family: var(--h-font); font-size: 15px; letter-spacing: .5px; } .lu small { font-size: 10px; color: var(--h-gray); font-weight: 800; }
.lu.me b { color: var(--h-yellow); }
.lu-mvp { position: absolute; top: 0; padding: 2px 10px; border-radius: 6px; background: var(--h-yellow); color: #221a00; font-family: 'Anton', var(--h-font); font-size: 16px; box-shadow: 0 0 16px rgba(255,212,42,.8); }
@keyframes lu-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.rw.gold { background: #3a2a05; border-color: var(--h-yellow); color: var(--h-yellow); }