/* Main Event Broadcast theme (design B). Layered over app.css. */
:root{
  --bg:#0A0A0B;--bg2:#131315;--card:#18181b;--card2:#202024;--line:#2a2a2e;--text:#F4F1EA;--muted:#a9a49a;
  --accent:#D4A62A;--accent2:#E10600;--blue:#0A5BFF;--good:#3ccf6e;--bad:#E10600;--radius:2px;--header-h:58px;
}
html,body{font-family:"Barlow Condensed",system-ui,sans-serif;font-size:18px}
body{background:radial-gradient(80% 40% at 50% 0%,#2a2414 0%,transparent 70%),#0A0A0B;background-attachment:fixed;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
h1,h2,h3,.winner,.name,.big-result,.mode-tile b,.bc-logo,.btn{font-family:Teko,"Barlow Condensed",sans-serif;font-weight:600;letter-spacing:.5px;line-height:1}
h1{font-size:34px}h2{font-size:28px}h3{font-size:24px}
a{color:var(--accent)}
.stickytop{background:transparent}
.topbar{background:rgba(10,10,11,.94);border-bottom:1px solid #2a2414}
.logo{font:600 24px/1 Teko,sans-serif;letter-spacing:1px;color:var(--text)}
.logo b{color:#D4A62A;font-weight:600}
.topbar-actions{min-width:0;margin-left:auto}
.player-chip,.feedback-btn{border-radius:0!important;background:#18181b!important;border:1px solid #2a2a2e!important;color:var(--text)!important;font-family:"Barlow Condensed",sans-serif;letter-spacing:.05em}
@media(max-width:420px){.player-chip{max-width:26vw}}
/* bottom broadcast tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(72px + env(safe-area-inset-bottom));padding:8px 0 env(safe-area-inset-bottom);background:#050506;border-top:2px solid #D4A62A;border-bottom:none}
.tabbar a{font:600 13px "Barlow Condensed",sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#77736b;border-radius:0}
.tabbar a span{font-size:20px}
.tabbar a.active{color:#D4A62A;background:none}
body.modal-open .tabbar{z-index:1}
.toast{bottom:100px}
/* surfaces */
.card{background:linear-gradient(160deg,#18181b,#0f0f11);border:1px solid #2a2a2e;border-radius:0;box-shadow:none;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.modal-card,.ask-shell{background:#111113!important;border-color:#2a2a2e!important}
.pill,.chip{border-radius:0}
.seg{border-radius:0;background:#111113;border-color:#2a2a2e}
.seg button{border-radius:0;font-family:"Barlow Condensed",sans-serif;letter-spacing:.06em;}
.seg button.on{background:#D4A62A;color:#0A0A0B}
.choice{border-radius:0;background:#18181b;border-color:#2a2a2e;font-family:Teko,sans-serif;font-size:22px;font-weight:600}
.choice.right{background:#2a2414;border-color:#D4A62A}
.btn{border-radius:0;font-size:22px;background:#18181b;border:1px solid #2a2a2e;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.btn.small{font-size:18px}
.btn.primary{background:linear-gradient(90deg,#D4A62A,#a87f1a);color:#0A0A0B;border:none}
.btn.red{background:#E10600;color:#fff;border:none}
.btn.blue{background:#0A5BFF;color:#fff;border:none}
.fcard{border-radius:0;background:#18181b;border-color:#2a2a2e}
.fcard b{font:600 18px/1 Teko,sans-serif;letter-spacing:.3px}
.fpic{border-radius:0;background:radial-gradient(circle at 50% 35%,#2a2414,#0e0e10 72%)}
.fpic .p4p{background:#D4A62A;border-radius:0}
.banner{border-radius:0;background:linear-gradient(90deg,#D4A62A22,#E1060022);border-color:#D4A62A66}
.tape td{border-bottom-color:#222225}
.tape td.win{color:#D4A62A}
.side-a{color:#ff4b44}.side-b{color:#4d8bff}
.mbar .trk{background:#222225;border-radius:0}.mbar .trk i{background:#D4A62A}
.bar i{background:#222225}
/* home */
.bc-hdr{display:flex;justify-content:space-between;align-items:center;margin:2px 0 8px}
.bc-logo{font-size:38px;line-height:.85;letter-spacing:1px}.bc-logo b{color:#D4A62A;font-weight:600}
.bc-live{font:600 13px "Barlow Condensed",sans-serif;letter-spacing:.2em;background:#E10600;color:#fff;padding:4px 12px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);white-space:nowrap}
.bc-me{display:block;margin:0 -14px 12px;text-decoration:none;color:var(--text)}
.bc-stage{position:relative;height:200px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;background:linear-gradient(90deg,rgba(225,6,0,.55),transparent 40%,transparent 60%,rgba(10,91,255,.55))}
.oct{width:150px;height:150px;flex:none;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:#D4A62A;padding:4px}
.oct>div{width:100%;height:100%;clip-path:inherit;background:#ddd;display:flex;align-items:center;justify-content:center;overflow:hidden}
.oct img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
.oct .avatar{font:600 44px Teko,sans-serif;color:#0A0A0B}
.bc-vs{font:600 54px/1 Teko,sans-serif;color:#D4A62A}
.bc-lt{display:flex;height:64px}
.bc-lt>div{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 14px;min-width:0}
.bc-lt .r{background:#E10600}.bc-lt .b{background:#0A5BFF;text-align:right}
.bc-lt b{font:600 28px/.9 Teko,sans-serif;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-lt small{font:600 12px "Barlow Condensed",sans-serif;letter-spacing:.12em;opacity:.85;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-tick{background:#D4A62A;color:#0A0A0B;font:700 13px "Barlow Condensed",sans-serif;letter-spacing:.16em;padding:6px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-h1{margin-top:4px}
.mode-tiles{grid-template-columns:1fr 1fr;gap:10px}
.mode-tile{display:block;min-height:118px;border-radius:0;padding:12px;border:1px solid #2a2a2e!important;background:linear-gradient(160deg,#18181b,#0f0f11)!important;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.mode-tile .ico{width:auto;text-align:left;font:700 11px "Barlow Condensed",sans-serif;letter-spacing:.2em;color:#D4A62A;margin-bottom:10px}
.mode-tile b{font-size:26px;text-transform:uppercase;margin-bottom:2px}
.mode-tile span.d{font:500 14px/1.2 "Barlow Condensed",sans-serif;color:#a9a49a}
.mode-tile.friends{grid-column:1/-1;min-height:0}
/* predictor & result */
.vs-badge{font:600 46px/1 Teko,sans-serif;color:#D4A62A;text-shadow:none}
.vs .side .fpic{width:120px;height:120px;max-width:120px;aspect-ratio:1;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);border:none;background:#D4A62A;padding:4px;box-shadow:none;outline:none;position:relative}
.vs .side .fpic img{clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:#ddd}

.vs .side .fpic img{object-position:center 12%}
.vs .side .name{font:600 26px/.9 Teko,sans-serif;margin-top:8px}
.slot:not(.filled){border-radius:0!important;border-color:#2a2a2e!important}
.bc-pick-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.bc-the{font:600 34px/1 Teko,sans-serif;letter-spacing:.5px}.bc-the b{color:#D4A62A;font-weight:600}
.bc-wc{font:700 12px "Barlow Condensed",sans-serif;letter-spacing:.2em;background:#D4A62A;color:#0A0A0B;padding:4px 12px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);white-space:nowrap}
.winner{font-size:36px;color:var(--text)}
.bc-nums{display:flex;justify-content:space-between;font:600 48px/1 Teko,sans-serif;margin-top:6px}
.meter{height:14px;border-radius:0;background:#222225;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);font-size:0;margin:4px 0 6px}
.meter .l{background:#E10600}.meter .r{background:#0A5BFF}
.bc-verdict{margin:12px 0 8px;padding:10px 18px 10px 14px;background:linear-gradient(90deg,#D4A62A,#a87f1a);color:#0A0A0B;display:flex;justify-content:space-between;align-items:center;gap:10px;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.bc-verdict b{display:block;font:600 26px/1 Teko,sans-serif;text-transform:uppercase}
.bc-verdict small{font:700 12px "Barlow Condensed",sans-serif;letter-spacing:.12em;text-transform:uppercase;text-align:right}
.bc-verdict div small{text-align:left}
.reasons li{background:#141416;border-radius:0}
.reasons li.a{border-left-color:#E10600}.reasons li.b{border-left-color:#0A5BFF}
.round{border-radius:0!important}
.big-result.good{color:#D4A62A}
.footer{color:#77736b}
.topbar{overflow:hidden}
.logo{font-size:21px}
@media(max-width:420px){.player-chip{max-width:24vw}.feedback-btn{padding:6px 7px!important}}
button,input,select,textarea{font-family:inherit}

/* ---- Header fix: nothing hides or gets cropped under the sticky header (iPhone Safari) ---- */
.stickytop{background:rgba(8,8,8,1);border-bottom:1px solid rgba(212,166,42,.35);padding-top:env(safe-area-inset-top,0px)}
html{scroll-padding-top:calc(var(--header-h) + 12px)}
#app [id],#app .card,#app section,#after,#fight{scroll-margin-top:calc(var(--header-h) + 12px)}
#app{padding-top:6px}
.pic img,.pick img,.result img,.ask-card img,.fpic img,.orb img{object-position:50% 12%}
.fpic.wide img{object-position:50% 100%}
.pic,.pick,.fpic,.orb{overflow:hidden}
/* full-screen sheets on phones: keep titles/search clear of the notch and status bar */
@media(max-width:719px){
  .modal-card.picker-open{padding-top:0}
  .modal-card.picker-open .picker-sticky{padding-top:calc(12px + env(safe-area-inset-top,0px))}
  .ask-shell{padding-top:env(safe-area-inset-top,0px)}
}
.picker-grid .pick{scroll-margin-top:200px}

/* ---- Accounts + Leaderboard (Main Event Broadcast) ---- */
.acct-panel{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:8px 0 12px;background:linear-gradient(90deg,#1c1708,#131315);border:1px solid #3a2f12;border-left:4px solid var(--accent)}
.acct-panel.on{border-left-color:var(--good)}
.acct-panel b{font-family:Teko,"Barlow Condensed",sans-serif;font-size:22px;letter-spacing:.5px;font-weight:600}
.acct-panel a,.linkbtn{color:var(--accent);background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer}
.acct-tabs{margin:6px 0 4px}
.acct-pin{letter-spacing:10px;font-size:26px;text-align:center}
.acct-err{color:#ff5a4f;min-height:18px;margin:8px 0 6px;font-weight:700}
.lb-hdr{display:flex;align-items:flex-end;justify-content:space-between;margin:6px 0 6px;padding-bottom:8px;border-bottom:3px solid var(--accent)}
.lb-kicker{display:inline-block;background:var(--accent2);color:#fff;font:700 13px/1 "Barlow Condensed",sans-serif;letter-spacing:2px;padding:4px 8px}
.lb-title{font:600 44px/0.9 Teko,"Barlow Condensed",sans-serif;margin:6px 0 0;text-transform:uppercase;color:var(--accent)}
.lb-list{display:flex;flex-direction:column;gap:4px}
.lb-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:linear-gradient(90deg,#18181b,#111113);border:1px solid var(--line);border-left:4px solid #3a3a3e}
.lb-row.top1{border-left-color:var(--accent);background:linear-gradient(90deg,#2a2210,#131315)}
.lb-row.top2{border-left-color:#c8c8cc}.lb-row.top3{border-left-color:#b0703a}
.lb-row.me{outline:1px solid var(--accent);background:linear-gradient(90deg,#3a2c08,#18181b)}
.lb-rank{width:30px;text-align:center;font:600 26px/1 Teko,sans-serif;color:var(--accent)}
.lb-av{width:40px;height:40px;display:grid;place-items:center;font-size:22px;background:#0A0A0B;border:1px solid var(--accent)}
.lb-who b{font-family:Teko,"Barlow Condensed",sans-serif;font-size:24px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.lb-pts{font:600 34px/0.9 Teko,sans-serif;color:var(--accent);text-align:right}
.lb-pts small{display:block;font:700 11px "Barlow Condensed",sans-serif;letter-spacing:2px;color:var(--muted)}
/* no sideways overflow on phones (an overflowing row zooms the whole page out on iPhone) */
#app{overflow-x:clip}
.player-chip{min-width:0;flex:0 1 auto}
.topbar .logo{flex:0 1 auto;min-width:0}
.card>.row{flex-wrap:wrap;row-gap:8px}
.predict-next{margin:12px 0}

/* ---- Rivalries (Main Event Broadcast) ---- */
.tabbar a{position:relative}
.rv-badge{position:absolute;top:2px;right:16%;min-width:18px;height:18px;padding:0 5px;background:var(--accent2);color:#fff;font:700 12px/18px "Barlow Condensed",sans-serif;font-style:normal;text-align:center}
.rv-hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:6px 0 10px;padding-bottom:8px;border-bottom:3px solid var(--accent)}
.rv-head{margin:6px 0 10px}
.rv-item{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:4px 0;background:linear-gradient(90deg,#18181b,#111113);border:1px solid var(--line);border-left:4px solid #3a3a3e;color:var(--text);text-decoration:none}
.rv-item.hot{border-left-color:var(--accent2);background:linear-gradient(90deg,#2a1210,#131315)}
.rv-item b{font-family:Teko,"Barlow Condensed",sans-serif;font-size:24px;font-weight:600;text-transform:uppercase}
.rv-go{font-size:28px;color:var(--accent)}
.rv-pill{display:inline-block;margin-top:4px;padding:2px 8px;font:700 13px "Barlow Condensed",sans-serif;letter-spacing:1px;text-transform:uppercase;background:#202024;color:var(--muted)}
.rv-pill.hot{background:var(--accent2);color:#fff}
.rv-tally{display:flex;align-items:center;justify-content:center;gap:16px;margin:10px 0 4px;background:#0A0A0B;border:1px solid #3a2f12;padding:8px}
.rv-tally div{text-align:center;min-width:90px}.rv-tally small{display:block;font:700 13px "Barlow Condensed",sans-serif;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
.rv-tally b{font:600 48px/0.9 Teko,sans-serif;color:var(--accent)}.rv-tally>span{font:600 30px Teko,sans-serif;color:var(--muted)}
.rv-turn{border-left:4px solid var(--accent2)!important}.rv-turn.wait{border-left-color:#3a3a3e!important}
.rv-turnlbl{display:inline-block;font:700 14px/1 "Barlow Condensed",sans-serif;letter-spacing:2px;color:#fff;background:var(--accent2);padding:4px 8px;margin-bottom:6px}
.rv-turn.wait .rv-turnlbl{background:#2a2a2e;color:var(--muted)}
.rv-pair{display:flex;align-items:center;gap:6px;margin:12px 0}
.rv-side{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;background:#131315;border:1px solid #2a2a2e;color:var(--text);cursor:pointer}
.rv-side .fpic,.rv-side img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 12%}
.rv-side b{font-family:Teko,"Barlow Condensed",sans-serif;font-size:22px;font-weight:600;text-transform:uppercase;text-align:center;line-height:1}
.rv-vs{font:600 32px Teko,sans-serif;color:var(--accent)}
.rv-histh{margin:18px 0 6px}.rv-round{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;margin:4px 0;background:#131315;border:1px solid var(--line);border-left:3px solid var(--accent)}
.rv-n{font:600 22px/1 Teko,sans-serif;color:var(--accent);min-width:30px}
.rv-next{margin:12px 0}.rv-oldnote{border-left:4px solid var(--accent2)!important}
.oldcode summary{cursor:pointer;font-weight:700}.acct-why{font-weight:700;color:var(--accent);margin:6px 0}