/* Visual edition 02: illustrated playfield and concept-inspired spectator interface. */
.social-x{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:37px;height:37px;padding:0 10px;border:1px solid #363b50;border-radius:10px;background:#191b2a;color:#f4f3ff;white-space:nowrap}.social-x>span:first-child{font-size:20px}.social-handle{font-size:11px;font-weight:600}.social-x:hover{border-color:#28edb3;color:#28edb3}.footer-x{color:#c8cde0;font:600 11px Arial;white-space:nowrap}.footer-x:hover{color:#28edb3}@media(max-width:1450px){.social-handle{display:none}.social-x{padding:0 8px}}@media(max-width:540px){.social-x{height:30px;min-width:30px;padding:0 6px}.social-x>span:first-child{font-size:17px}.footer-x{font-size:10px}}
.art-status{position:absolute;inset:0;display:grid;place-items:center;background:#0a0e1cf5;color:#bdf9e9;z-index:5;font:600 13px Arial;letter-spacing:.5px}.art-status.asset-warning{inset:auto 8px 32px;display:block;padding:7px 10px;border:1px solid #b28f44;background:#2a211deb;color:#e3cc8a;font-size:10px;border-radius:5px}
:root{--bg:#090b15;--panel:#111420;--line:#2a2d41;--text:#f4f3ff;--muted:#989db3;--mint:#28edb3;--purple:#a672ff;--coral:#ff5874}
body{background:radial-gradient(ellipse at 35% 0,#24204244,transparent 55%),var(--bg);font-family:Arial,Helvetica,sans-serif}
.topbar{height:74px;min-height:74px;padding:0 24px;gap:22px;background:linear-gradient(180deg,#181827,#10121d);box-shadow:0 2px 18px #0004}
.brand{gap:9px;letter-spacing:-.8px;font-size:28px;white-space:nowrap}
.brand-trader{width:43px;height:58px;flex:none;background-image:url('assets/traders-atlas.png');background-size:400% 200%;background-position:100% 100%;filter:drop-shadow(0 0 6px #28edb330)}
.demo-badge{font-size:11px;letter-spacing:1px;border:1px solid #1d8b6f;color:var(--mint);padding:8px 10px;border-radius:8px;margin-left:7px;background:#0e2822}
.topbar nav{gap:13px;align-items:center;align-self:stretch;margin-right:auto}
.nav,.topbar nav a.nav{padding:12px 18px;font-size:13px;border-radius:9px;align-self:center;height:40px;white-space:nowrap}
.nav.active{background:linear-gradient(135deg,#8131ff,#4c1fbf);box-shadow:0 0 22px #7425ff50;color:white}
.nav.active:after{display:none}.nav .live-dot{width:5px;height:5px}
.local-tag{font-size:8px;letter-spacing:.6px;background:#101b1e;border-color:#25443d}
.top-right{gap:10px}.icon-btn{height:37px;width:37px;background:#191b2a;border-radius:10px}
main{max-width:2040px;padding:0 18px}
.arena-intro{height:38px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.arena-intro h1{font-size:11px;font-weight:600;letter-spacing:.2px;margin:0;color:#bac0d4}
.arena-intro h1 span{font-weight:400;color:#777f99}.arena-intro>span{font:9px monospace;letter-spacing:1px;color:#737b98}.arena-intro b{color:var(--mint);margin:0 8px}
.arena-layout{grid-template-columns:minmax(0,1fr) 330px;gap:16px}
.game-panel{border-color:#36384f;background:#0b0f1c;border-radius:12px;box-shadow:0 8px 28px #0004}
.game-top{height:35px;padding:0 15px;background:#131523;font-size:9px}
.game-title strong{font-size:10px}.game-timer{font-size:9px}
.stage{height:clamp(380px,61vh,740px);aspect-ratio:auto}
.stage:fullscreen{height:100vh}
.map-hud{top:13px;left:13px;right:13px;align-items:flex-start;gap:10px}
.integrity{width:310px;max-width:44%;padding:10px 13px;background:#090e1deb;border:1px solid #51546f;border-radius:10px;box-shadow:0 3px 12px #0006}
.integrity>div:first-child{font:700 10px Arial;letter-spacing:.4px;margin-bottom:8px}
.integrity strong{color:#bfffee}.progress{height:8px;background:#263d43;border-radius:5px}.progress i{background:linear-gradient(90deg,#00d49d,#37f5cb);box-shadow:0 0 12px #05f2ac50;border-radius:5px}
.hud-right{display:flex;align-items:flex-end;flex-direction:column;gap:7px}
.team-count{display:flex;gap:15px;padding:12px 14px;background:#090e1de8;border:1px solid #51546f;border-radius:10px;font-size:11px;font-weight:700;box-shadow:0 3px 12px #0006}
.team-count>span{display:flex;align-items:center;gap:5px}.team-count b{font-size:14px;color:var(--mint)}.team-count>span+span b{color:var(--coral)}
.team-dot{width:8px;height:8px;background:var(--mint);border-radius:50%;margin-right:2px}.rugger-dot{background:var(--coral)}
.camera-label{padding:6px 9px;border-radius:6px;background:#090e1dc9;font:8px monospace;letter-spacing:.6px}
.map-caption{bottom:9px;left:12px;right:12px;font:8px monospace;letter-spacing:1px;text-shadow:0 1px 4px #000}
.map-caption>span{background:#060b18c7;padding:5px 7px;border-radius:5px}.map-caption b{color:var(--mint)}
.roster-heading{margin:12px 3px 8px;font-size:9px;color:#b6bbce}.roster-heading small{font-size:10px}
.players{padding:0;gap:8px;grid-template-columns:repeat(8,minmax(0,1fr))}
.player-card{border:1px solid #3a3e54;border-radius:11px;background:linear-gradient(150deg,#242638,#111420);padding:3px 3px 10px;min-height:119px}
.player-card:before{display:none}.player-card:hover{transform:translateY(-2px)}
.player-card.selected{border:2px solid var(--mint);padding:2px 2px 9px;background:linear-gradient(150deg,#1d3d39,#141a26);box-shadow:0 0 12px #26f4ad55,inset 0 0 12px #26f4ad12}
.sprite-avatar{background-image:url('assets/traders-atlas.png');background-size:400% 200%;background-position:var(--sprite-x) var(--sprite-y);background-repeat:no-repeat;display:block;flex:none;width:60px;height:80px;margin:0 auto;filter:drop-shadow(0 3px 4px #0007)}
.players .sprite-avatar{width:60px;height:80px}.fallback-avatar{display:none}.art-fallback .sprite-avatar{background-image:none}.art-fallback .fallback-avatar{display:block}
.player-card strong{font-size:12px;margin-top:1px}.player-card small{font:10px Arial;color:#a3b1be;margin-top:4px}.bot-dot{width:8px;height:8px;right:8px;top:8px;box-shadow:0 0 7px #25ec9d55}
.player-card.dead{opacity:.42}.player-card.dead .sprite-avatar{filter:grayscale(1)}
.controls{border:1px solid #2e3045;border-radius:10px;background:#111421;margin-top:10px;min-height:53px;padding:8px 10px;gap:10px}
.control-group{gap:7px}.control{font-size:11px;border:1px solid transparent;border-radius:7px;padding:9px 11px}
.control.selected{border-color:#8755f7;background:linear-gradient(135deg,#7838f3,#5020b9);color:#fff;box-shadow:0 0 13px #662eff25}
.control.meeting-control{border-color:#753242;background:#301621;color:#ff8797}.control.speed{background:#1c1e30;border-color:#363b50;min-width:37px}
.control:disabled{opacity:.4}.control-divider{height:20px;margin:0}
.feed-panel{height:clamp(435px,68vh,795px);background:linear-gradient(160deg,#111422,#0e111c);border-color:#34364c;border-radius:12px}
.panel-heading{padding:19px 19px 13px}.panel-heading h2{font-size:17px;letter-spacing:.5px}
.feed-tabs{padding:0 18px 12px;gap:5px}.feed-tabs button{font-size:11px;padding:6px 12px}.feed-tabs .active{background:#263140;color:#abffe2;border-color:#386557}
.feed{padding:12px 14px}.event{position:relative;padding:12px 11px;margin-bottom:10px;border:1px solid #2d3247;border-radius:9px;background:linear-gradient(115deg,#202335,#151824);border-left:3px solid var(--event-color,#6c58a3)}
.event .event-avatar{position:absolute;left:9px;top:11px}.event-avatar .sprite-avatar{width:42px;height:56px}
.event.has-portrait{padding-left:62px;min-height:81px}.event-head{gap:5px;margin-bottom:5px}.event-head strong{font-size:12px}.event-head time{font:9px monospace;white-space:nowrap;color:#959eb9}
.event p{font-size:12px;line-height:1.5;padding-left:0;color:#d7daea}.event.danger p{color:#f4acb5}.event-icon{font-size:13px}.has-portrait .event-icon{display:none}
.event.compact{border:0;border-bottom:1px solid #292d40;background:none;padding:10px 0;border-radius:0;margin-bottom:0}.event.compact p{font-size:11px;color:#a6adc3}
.event.compact .event-head strong{font-size:10px}.feed-footer{font:9px Arial;padding:12px 15px;color:#8d96ac}
.mission{margin-top:14px;padding:19px 21px;background:radial-gradient(ellipse at 100% 100%,#542f8550,transparent 65%),linear-gradient(120deg,#1d1c34,#101322);border:1px solid #3b345c}
.mission .eyebrow{font:700 11px Arial;letter-spacing:1px;color:#a86eff}.mission h2{font-size:23px;line-height:1.2;margin:13px 0 10px}.mission p{font-size:11px;max-width:100%}.mission button{padding-top:11px;margin-top:13px;font-size:11px}.mission-art{font-size:160px}
.bottom-strip{margin-top:15px;background:#131724;border-color:#30364c}.primary{background:linear-gradient(135deg,#8253f7,#6131cd);border-color:#8b68db;color:white}.primary:hover{background:#9267ff}
.meeting{background:linear-gradient(145deg,#1c203af5,#0b1120fa);border-color:#9a6aff;backdrop-filter:blur(10px);box-shadow:0 0 45px #8644ff24,0 12px 30px #000a;inset:12% 8% 8%;padding:22px}
.meeting h2{font-size:27px}.meeting-message{background:#292344dd;border-color:#af80ff;border-radius:6px}.voter{min-width:63px;padding:6px;background:#1c2239}.voter .sprite-avatar{width:42px;height:56px}.voter small{font-size:9px}.vote-roster{gap:7px}
.result{background:#0b1022e8}.result .primary{min-width:140px}.alert{top:84px;z-index:2;border-radius:8px;background:#471b32ee;box-shadow:0 0 24px #fc466a33;font:700 11px Arial;letter-spacing:.7px;padding:10px 17px}
td .sprite-avatar{width:36px;height:48px}.stat{background:#171b2c}.table-wrap{border-color:#30364c}.ranking-heading{padding-top:25px}
.protocol-section{background:radial-gradient(ellipse at 0 0,#16483755,transparent 65%),#111623;margin-top:25px}.protocol-steps li{background:#171d2b}.protocol-status p{font-family:Arial;letter-spacing:.2px}
@media(min-width:1700px){.arena-layout{grid-template-columns:minmax(0,1fr) 390px}.event p{font-size:14px}.event-head strong{font-size:14px}.players .sprite-avatar{width:69px;height:92px}.player-card{min-height:133px}.player-card strong{font-size:14px}.stage{height:clamp(520px,64vh,810px)}}
@media(max-width:1200px){.topbar{padding:0 16px;gap:15px}.brand{font-size:23px}.demo-badge{font-size:9px;padding:6px}.nav,.topbar nav a.nav{padding:11px 10px;font-size:12px}.topbar nav{gap:6px}.local-tag{display:none}.arena-layout{grid-template-columns:minmax(0,1fr) 285px;gap:12px}.integrity{width:250px}.team-count{font-size:9px;gap:9px;padding:10px}.team-count b{font-size:12px}.stage{height:clamp(355px,56vh,640px)}.players .sprite-avatar{width:51px;height:68px}.player-card{min-height:106px}.player-card small{font-size:9px}.controls{padding:8px 6px}.control{padding:8px;font-size:10px}.control-group{gap:3px}.feed-panel{height:clamp(410px,65vh,700px)}}
@media(max-width:950px){.topbar{height:auto;min-height:70px;padding:10px 16px;flex-wrap:wrap;gap:8px}.topbar nav{order:3;width:100%;margin:0;height:40px;justify-content:center;gap:14px}.top-right{margin-left:auto}.nav,.topbar nav a.nav{font-size:12px;padding:10px 17px}.arena-layout{grid-template-columns:1fr}.stage{height:auto;aspect-ratio:1200/760}.arena-intro{height:38px}.sidebar{display:grid;grid-template-columns:1.3fr 1fr;gap:12px}.feed-panel{height:340px}.mission{margin:0}.players .sprite-avatar{width:60px;height:80px}.player-card{min-height:119px}.control{font-size:12px}.team-count{font-size:11px}.integrity{max-width:42%}.meeting{inset:13% 7% 7%}.meeting h2{font-size:25px}}
@media(max-width:540px){main{padding:0 8px}.topbar{padding:8px 12px}.brand{font-size:23px;gap:6px}.brand-trader{width:33px;height:44px}.demo-badge{font-size:9px}.topbar nav{justify-content:space-between;gap:4px;height:35px}.nav,.topbar nav a.nav{font-size:10px;padding:9px 8px;height:33px}.arena-intro>span{display:none}.arena-intro{height:31px;padding-left:3px}.arena-intro h1{font-size:10px}.game-top{height:31px;font-size:8px;padding:0 9px}.game-title strong{font-size:8px}.game-timer{font-size:8px}.game-timer .divider{display:none}.game-timer #alive-count{display:none}.stage{aspect-ratio:1200/850;min-height:270px}.map-hud{top:8px;left:7px;right:7px;gap:6px}.integrity{width:170px;max-width:48%;padding:7px 8px;border-radius:6px}.integrity>div:first-child{font-size:7px;letter-spacing:0;margin-bottom:5px}.progress{height:5px}.team-count{font-size:7px;gap:8px;padding:8px 7px;border-radius:6px}.team-count b{font-size:10px}.team-dot{width:5px;height:5px;margin:0}.team-count>span{gap:3px}.hud-right{gap:4px}.camera-label{font-size:6px;padding:3px 6px}.map-caption{font-size:6px;letter-spacing:0;bottom:5px;left:5px;right:5px}.map-caption>span{padding:3px}.roster-heading{font-size:8px;margin:10px 2px 7px}.players{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.players .sprite-avatar{width:48px;height:64px}.player-card{min-height:99px;padding-bottom:7px}.player-card.selected{padding-bottom:6px}.player-card strong{font-size:11px}.player-card small{font-size:9px}.bot-dot{width:6px;height:6px;top:7px;right:7px}.controls{flex-wrap:wrap;justify-content:space-between;gap:6px;margin-top:8px;padding:7px}.control{padding:7px;font-size:10px}.control-group{gap:2px}.control-divider{display:none}.controls #camera span{display:inline}.controls #reveal span{display:none}.controls #reveal{font-size:14px}.sidebar{grid-template-columns:1fr}.feed-panel{height:350px}.mission{display:block;padding:18px}.mission h2{font-size:22px}.mission p{font-size:12px}.mission-art{font-size:130px}.meeting{inset:16% 3% 3%;padding:12px}.meeting h2{font-size:18px;margin:9px 0 4px}.meeting-message{font-size:10px;padding:9px;margin:9px 0;min-height:40px}.meeting>p{font-size:9px}.voter{min-width:36px;padding:4px;font-size:8px}.voter .sprite-avatar{width:27px;height:36px}.voter small{font-size:7px}.vote-roster{gap:4px}.alert{top:57px;font-size:8px;padding:7px 10px}.result{gap:9px}.result h2{font-size:25px}.result p{font-size:10px}.result .result-symbol{font-size:32px}.result small{font-size:9px}.result .primary{padding:9px}.protocol-section{padding:20px 16px}.planned-badge{font-size:7px}.protocol-heading h2{font-size:26px}.bottom-strip{padding:14px}.roster-heading small{display:none}}
@media(prefers-reduced-motion:reduce){.player-card:hover{transform:none}}