/* Online Command shares the war room's olive armor, amber controls and type.
   Only the middle grid track scrolls; no estimated header/footer heights. */
.online-hub{box-sizing:border-box;position:fixed;inset:10px var(--safe-right,16px) 10px var(--safe-left,16px);margin:auto;width:min(1040px,calc(100vw - var(--safe-left,16px) - var(--safe-right,16px)));height:min(780px,calc(100dvh - 20px));max-height:calc(100dvh - 20px);padding:0;border:1px solid #71816b;border-radius:8px;background:radial-gradient(ellipse at 80% -15%,#40564766,transparent 60%),#101d19;color:#e8ecdf;box-shadow:0 24px 90px #000c,inset 0 1px #d4e4ce18;font-family:'Chakra Petch',sans-serif;overflow:hidden;touch-action:pan-y}
.online-hub[open]{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;animation:oh-enter .18s ease-out}
.online-hub *{box-sizing:border-box;touch-action:pan-y}.online-hub::backdrop{background:#030b12de;backdrop-filter:blur(4px)}
.oh-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;border-bottom:1px solid #4e6454;background:#15251fd9}
.oh-header h2{font:800 30px/1.05 'Barlow Condensed',sans-serif;letter-spacing:1px;margin:4px 0 0;color:#f1e8ce}
.oh-eyebrow{display:block;color:#c3b785;font:700 9px/1.3 'Chakra Petch',sans-serif;letter-spacing:.15em}
.oh-button{cursor:pointer;min-height:42px;border:1px solid #6e8065;border-radius:4px;background:#26382b;color:#e9efdf;font:700 12px/1.2 'Chakra Petch',sans-serif;padding:9px 14px;transition:background .14s,border-color .14s,transform .14s;touch-action:manipulation}
.oh-button:hover{background:#3b4c32;border-color:#d6b975}.oh-button:active{transform:scale(.985)}.oh-button:focus-visible,.oh-body:focus-visible,.oh-ranking-filter select:focus-visible{outline:2px solid #ffda8e;outline-offset:2px}.oh-button:disabled{opacity:.5;cursor:default}
.oh-primary{background:linear-gradient(#f0bd58,#cc9734);border-color:#f7ce7a;color:#172117;box-shadow:0 4px 20px #ce9c3222,inset 0 1px #ffe5a4;font-size:14px;min-height:46px}.oh-primary:hover{background:#f2c66e;color:#172117}
.oh-tabs{display:flex;gap:0;padding:0 16px;background:#102019;border-bottom:1px solid #52654c;min-width:0}
.oh-tabs .oh-button{flex:1;border:none;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:#aabdac;min-height:48px;font:700 15px 'Chakra Petch',sans-serif;letter-spacing:.04em}
.oh-tabs .oh-button.active{color:#f9d486;border-bottom-color:#f0bc58;background:linear-gradient(0deg,#e9bc441c,transparent)}
.oh-body{min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;padding:18px 20px;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#84956b #17261d;scroll-padding:14px}
.oh-body h3{font:800 32px/1.05 'Barlow Condensed',sans-serif;letter-spacing:.035em;margin:0 0 7px}.oh-body h4{font:800 24px/1.05 'Barlow Condensed',sans-serif;letter-spacing:.035em;margin:0 0 7px}
.oh-body p{font-size:13px;line-height:1.5;margin:7px 0 12px}.oh-muted,.oh-category{color:#adbfaf}.oh-body .oh-muted{font-size:11px}
.oh-status{min-width:0;margin:0;padding:10px 20px;border-top:1px solid #465d49;background:#0c1916;color:#b4ceb6;font-size:11px;line-height:1.4;overflow-wrap:anywhere}.oh-status.oh-error{color:#edb09b}
.oh-battle-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:260px;border:1px solid #697458;border-radius:5px;overflow:hidden;background:radial-gradient(ellipse at 25% 100%,#4d6e4e80,transparent 70%),linear-gradient(120deg,#1d3025,#17231d)}
.oh-faceoff{position:relative;overflow:hidden;min-height:240px;background:linear-gradient(120deg,#2a4c3b66,transparent 60%)}
.oh-faceoff img{position:absolute;width:69%;height:88%;object-fit:contain;bottom:0;filter:drop-shadow(0 12px 9px #0009);pointer-events:none}.oh-tank-aegis{left:-7%;z-index:1}.oh-faceoff .oh-tank-dominion{right:-9%;bottom:10%;width:63%}.oh-faceoff>span{position:absolute;top:22%;left:46%;z-index:2;color:#f6d78d;font:800 27px 'Barlow Condensed',sans-serif;text-shadow:0 2px 6px #000}
.oh-battle-copy{align-self:center;padding:24px 22px 24px 6px;min-width:0}.oh-battle-copy h3{font-size:39px;margin-top:8px;color:#f6e9c9}.oh-battle-copy p{color:#baccb5;max-width:390px}.oh-battle-copy .oh-primary{margin-top:6px;width:100%}
.oh-command-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.oh-card{min-width:0;border:1px solid #4d6352;border-radius:5px;background:linear-gradient(130deg,#23352af5,#12251df5);padding:16px}.oh-card>.oh-button{margin:5px 7px 0 0}.oh-feature-card{display:flex;align-items:center;gap:15px}.oh-feature-emblem{width:66px;height:80px;object-fit:contain;flex:none}.oh-feature-card>div{flex:1;min-width:0}.oh-feature-card h4{margin-top:5px}.oh-feature-card p{font-size:12px;color:#afc2ad}.oh-feature-card .oh-button{min-height:38px;font-size:10px}
.oh-network{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 2px 2px;color:#afc3af;font-size:10px;letter-spacing:.08em}.oh-network .oh-button{font-size:10px;min-height:38px}
.oh-standings-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.oh-standings-heading h3{margin:5px 0 0}.oh-ranking-filter{display:flex;flex-direction:column;gap:6px;min-width:190px;font:700 9px 'Chakra Petch',sans-serif;color:#cabb87;letter-spacing:.12em}
.oh-ranking-filter select{min-height:42px;padding:8px 10px;border:1px solid #80906e;border-radius:4px;background:#213529;color:#eef0de;font:700 13px 'Chakra Petch',sans-serif;letter-spacing:0;max-width:100%}
.oh-category{margin-bottom:4px!important}.oh-table-wrap{max-width:100%;min-width:0;margin-top:14px}.oh-list-head,.oh-rank-row{display:grid;grid-template-columns:35px minmax(160px,1.3fr) minmax(140px,1fr) 108px;gap:12px;align-items:center}
.oh-list-head{position:sticky;top:-18px;z-index:1;padding:10px 12px;background:#15271fed;border-bottom:1px solid #788265;color:#a9bda8;font-size:9px;font-weight:700;letter-spacing:.09em}.oh-list-head>span:last-child{text-align:right}
.oh-rank-list{list-style:none;padding:0;margin:0;display:grid;gap:6px}.oh-rank-row{padding:12px;min-height:82px;border:1px solid #425b49;border-radius:4px;background:linear-gradient(115deg,#22362a,#15271e)}
.oh-rank-row[data-place="1"],.oh-rank-row[data-place="2"],.oh-rank-row[data-place="3"]{border-left:3px solid #d8b660;background:linear-gradient(110deg,#51492855,#1b2d22 65%)}
.oh-place{color:#b0c4af;font:800 23px 'Barlow Condensed',sans-serif}.oh-rank-row[data-place="1"] .oh-place{color:#ffe08e}.oh-rank-row[data-place="2"] .oh-place{color:#cbded9}.oh-rank-row[data-place="3"] .oh-place{color:#d3ab7f}
.oh-commander{display:flex;gap:11px;align-items:center;min-width:0}.oh-avatar{width:43px;height:53px;object-fit:cover;object-position:center 15%;border:1px solid #7d9577;border-radius:3px;flex:none;background:#324c3b}
.oh-commander-copy{display:flex;flex-wrap:wrap;gap:4px 7px;align-items:center;min-width:0}.oh-commander-copy>strong{width:100%;font:700 18px/1.05 'Barlow Condensed',sans-serif;overflow-wrap:anywhere}.oh-commander-copy>small{font-size:10px;color:#afc6ad}.oh-you{padding:2px 4px;background:#c9a34d;color:#14231a;border-radius:2px;font-size:8px;font-weight:800}
.oh-alliance{display:flex;align-items:center;gap:8px;min-width:0}.oh-alliance-crest{width:29px;height:34px;flex:none;object-fit:contain}.oh-alliance>div{display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:anywhere}.oh-alliance strong{font-size:11px;color:#e1c78a}.oh-alliance span{font-size:10px;color:#abc3ae}.oh-unaligned span{color:#869e8c}
.oh-ranking-score{text-align:right;min-width:0}.oh-ranking-score>strong{display:block;font:800 28px/1 'Barlow Condensed',sans-serif;color:#f7d28b}.oh-ranking-score>small{display:block;margin-top:4px;color:#cabd8a;font-size:8px;font-weight:700;letter-spacing:.06em}.oh-record{display:block;color:#a0bea5;font-size:10px;margin-top:5px}
.oh-empty{padding:30px 20px;border:1px dashed #637657;border-radius:5px;background:radial-gradient(ellipse at 50% 10%,#3e57343d,transparent 70%),#13271e;text-align:center;color:#b7c8ad}.oh-empty-art{display:block;width:72px;height:84px;object-fit:contain;margin:0 auto 14px}.oh-empty h4{font-size:26px;color:#e5d4a5}.oh-empty p{max-width:450px;margin:8px auto 0;font-size:12px}.oh-loading{padding:22px;color:#c8d5bc}
.oh-tournament-list{display:grid;gap:14px;margin-top:16px}.oh-event-head{display:flex;align-items:center;gap:14px}.oh-event-emblem{width:44px;height:53px;object-fit:contain}.oh-event-head h4{margin:6px 0 0;font-size:27px}.oh-bracket{margin-top:16px;padding-top:14px;border-top:1px solid #6b7a5c}.oh-bracket>p{padding:9px 10px;border:1px solid #4b624c;background:#0e2119;overflow-wrap:anywhere;font-size:12px}
.oh-entrants{display:grid;gap:5px;margin-bottom:15px}.oh-entrants>h4{font-size:19px}.oh-entrant{display:grid;grid-template-columns:43px minmax(0,1fr) minmax(120px,.8fr);align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #415c48}.oh-entrant>div:not(.oh-alliance){display:flex;flex-direction:column;gap:4px;min-width:0}.oh-entrant strong{font-size:13px;overflow-wrap:anywhere}.oh-entrant small{font-size:10px;color:#a6c2a8}
.oh-friend-shortcut{margin-top:8px;width:100%}.phone-nav .phone-dropdown-options{max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin}
.bk-upgrade-guide{list-style:none;color:#c7dbe1;padding:12px!important;border:1px solid #315564;border-radius:8px;background:#0d2634}.bk-upgrade-guide p{font-size:14px;line-height:1.4;margin:8px 0}
@keyframes oh-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:500px){.oh-header{padding:8px 14px}.oh-header h2{font-size:25px}.oh-header .oh-eyebrow{font-size:8px}.oh-header>.oh-button{min-height:38px;font-size:11px}.oh-tabs{padding:0 10px}.oh-tabs .oh-button{min-height:40px;font-size:13px}.oh-body{padding:12px 14px}.oh-status{padding:7px 14px;font-size:10px}.oh-battle-hero{min-height:200px;grid-template-columns:.9fr 1.1fr}.oh-faceoff{min-height:190px}.oh-battle-copy{padding:16px 18px 16px 4px}.oh-battle-copy h3{font-size:29px}.oh-battle-copy p{font-size:12px}.oh-battle-copy .oh-primary{font-size:12px;min-height:42px}.oh-feature-card{padding:12px;gap:10px}.oh-feature-emblem{width:48px;height:60px}.oh-list-head{top:-12px}.oh-network{padding-bottom:5px}}
@media(max-width:650px){.oh-header{padding:10px 12px}.oh-header h2{font-size:25px}.oh-header .oh-eyebrow{font-size:8px}.oh-tabs{padding:0 7px}.oh-tabs .oh-button{font-size:12px;padding:8px 5px}.oh-body{padding:13px 12px}.oh-battle-hero{grid-template-columns:1fr}.oh-faceoff{min-height:180px}.oh-faceoff img{height:100%;width:60%}.oh-battle-copy{padding:0 18px 18px}.oh-battle-copy h3{font-size:32px}.oh-command-grid{grid-template-columns:1fr}.oh-network{align-items:flex-start;flex-direction:column;gap:8px}.oh-standings-heading{gap:10px}.oh-standings-heading h3{font-size:29px}.oh-standings-heading .oh-eyebrow{font-size:7px}.oh-ranking-filter{min-width:0;width:155px;flex:none}.oh-ranking-filter select{font-size:11px;padding:7px}.oh-list-head{display:none}.oh-rank-row{grid-template-columns:24px minmax(0,1fr) 80px;gap:7px 9px;padding:10px}.oh-place{grid-column:1;grid-row:1/span 2;font-size:21px}.oh-commander{grid-column:2;grid-row:1;gap:8px}.oh-avatar{width:36px;height:45px}.oh-commander-copy>strong{font-size:16px}.oh-commander-copy>small{font-size:9px}.oh-rank-row>.oh-alliance{grid-column:2;grid-row:2;margin-left:44px;gap:5px}.oh-rank-row .oh-alliance-crest{width:20px;height:24px}.oh-rank-row .oh-alliance>div{gap:2px}.oh-rank-row .oh-alliance strong,.oh-rank-row .oh-alliance span{font-size:9px}.oh-ranking-score{grid-column:3;grid-row:1/span 2}.oh-ranking-score>strong{font-size:25px}.oh-ranking-score>small{font-size:7px}.oh-record{font-size:9px}.oh-entrant{grid-template-columns:36px minmax(0,1fr);gap:8px}.oh-entrant>.oh-alliance{grid-column:2}.oh-feature-card{gap:13px}.oh-status{font-size:10px;padding:8px 12px}}
@media(prefers-reduced-motion:reduce){.online-hub[open]{animation:none}.online-hub *{transition:none!important;scroll-behavior:auto!important}}
@media(max-height:500px){.oh-standings-heading .oh-eyebrow{display:none}.oh-standings-heading h3{font-size:27px;margin:0}.oh-ranking-filter{font-size:0;gap:0}.oh-body .oh-category{font-size:10px;margin:4px 0!important}.oh-standings-heading~.oh-muted{font-size:9px;margin:3px 0 5px}.oh-table-wrap{margin-top:8px}.oh-list-head{padding:7px 12px;font-size:8px}.oh-rank-row{min-height:72px;padding:9px 12px}.oh-avatar{width:36px;height:44px}.oh-ranking-score>strong{font-size:26px}}
