/* Interface edition 03. Shared mint accents, quieter surfaces, readable controls. */
:root{--bg:#0b1117;--panel:#141d26;--line:#2a3844;--text:#eff6f5;--muted:#a2b2bf;--mint:#62e6b5;--purple:#b4a0ed;--coral:#ff8598}
html{scroll-behavior:smooth}
body{background:radial-gradient(ellipse at 15% 0,#15382e55,transparent 45%),var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,select{font-family:inherit}
.topbar{height:auto;min-height:88px;padding:12px max(24px,calc((100vw - 1616px)/2));gap:24px;background:#0f171ef2;border-bottom:1px solid #293b42;box-shadow:none}
.brand{font-size:27px;font-weight:800;letter-spacing:-1px;gap:10px}
.brand-trader{width:45px;height:60px;background-position:100% 100%;filter:drop-shadow(0 4px 9px #28edb325)}
.demo-badge{font-size:8px;letter-spacing:1.2px;padding:5px 7px;border-radius:5px;margin-left:2px;color:#a9c2ba;border-color:#304a42;background:#172a23}
.topbar nav{gap:4px;padding:4px;background:#0b1218;border:1px solid #24313b;border-radius:12px;align-self:center;margin:auto}
.nav,.topbar nav a.nav{font-size:12px;font-weight:600;padding:11px 13px;height:40px;color:#acbcc9;border-radius:8px}
.nav:hover,.topbar nav a.nav:hover{background:#1c2a32;color:#edfff7}
.nav.active{background:#63e6b5;color:#0b2c20;box-shadow:0 3px 10px #0002}
.nav.active .live-dot{background:#124e37;box-shadow:none}
.top-right{gap:8px}.top-right .local-tag{display:none}
.social-x,.icon-btn{height:40px;min-width:40px;border:1px solid #30404c;background:#17232d;border-radius:10px;color:#c6d6df}
.social-handle{font-size:11px}.social-x:hover,.icon-btn:hover{border-color:var(--mint);background:#20352f;color:var(--mint)}
main{max-width:1664px;padding:0 24px}
.arena-intro{height:auto;min-height:128px;padding:26px 0 24px;gap:20px}
.arena-intro .eyebrow{font-size:9px;letter-spacing:2px;color:#8bb5a7}
.arena-intro h1{font-size:clamp(20px,2.2vw,30px);letter-spacing:-1px;font-weight:700;color:var(--text);margin:7px 0 6px;line-height:1.2}
.arena-intro h1 span{font-weight:500;color:#a4b8b1}
.arena-intro p{font-size:12px;color:var(--muted)}
.arena-intro>span.arena-status{display:flex;align-items:center;gap:9px;flex:none;font:9px ui-monospace,monospace;letter-spacing:1px;border:1px solid #2b4b40;background:#12271f;color:#9ed4bd;border-radius:30px;padding:10px 13px}
.arena-layout{gap:20px;grid-template-columns:minmax(0,1fr) 316px}
.game-panel{border:1px solid #354650;border-radius:16px;box-shadow:0 12px 36px #0003}
.stage{width:100%;min-width:0}
.game-top{height:46px;background:#16212b;padding:0 18px;font-size:10px}
.game-title strong{font-size:11px}.game-timer{font-size:10px}
.integrity,.team-count{background:#0c1821eb;border-color:#50676e;box-shadow:0 4px 16px #0003}
.progress i{background:linear-gradient(90deg,#30ba8c,#70ecc0);box-shadow:none}
.camera-label{background:#101d26e6;border-color:#3c545e;color:#c5d9df}
.roster-heading{margin:22px 3px 11px;font-size:10px;color:#c3d4db;letter-spacing:1px}
.roster-heading small{font-size:11px;color:#9caeba}
.players{gap:9px}
.player-card{border:1px solid #30434e;border-radius:13px;background:linear-gradient(155deg,#1c2a34,#131e27);min-height:124px;padding:5px 4px 12px;transition:transform .18s,border-color .18s,background .18s}
.player-card:hover{border-color:var(--bot);background:#20313b;transform:translateY(-2px)}
.player-card.selected{border:1px solid var(--mint);padding:5px 4px 12px;background:linear-gradient(145deg,#244c3c,#172a29);box-shadow:0 0 0 2px #62e6b519}
.player-card strong{font-size:12px}.player-card small{color:#b0bec8;font-size:10px}
.bot-dot{width:6px;height:6px;box-shadow:none}
.controls{margin-top:14px;padding:9px;border-radius:12px;background:#121e27;border-color:#2c3d49;flex-wrap:wrap;gap:8px}
.control-group{gap:4px;flex-wrap:wrap}
.control{min-height:38px;padding:9px 11px;color:#bbccd6;font-size:11px;border-radius:8px}
.control:hover{background:#253844;color:#fff}
.control.selected{border-color:#3e7661;background:#234637;color:#b2fbd7;box-shadow:none}
.control.meeting-control{border-color:#72505c;background:#35252d;color:#ffb8c4}
.control.speed{background:#1d303a;border-color:#39515e}
.feed-panel{border-radius:16px;background:#121d26;border-color:#30424e}
.panel-heading{padding:20px 19px 15px}.panel-heading h2{font-size:13px;letter-spacing:1.2px}
.count-badge{background:#263843;color:#b5c9d4;border-radius:6px}
.feed-tabs{padding:0 16px 14px;border-bottom-color:#2a3c48;gap:6px}
.feed-tabs button{min-height:34px;flex:1;border-radius:7px;color:#aebfcb}
.feed-tabs .active{background:#254b3d;color:#b0f9d8;border-color:#3c705d}
.feed{padding:12px;scrollbar-color:#3c5662 transparent}
.event{background:#1a2934;border-color:#304552;border-left-color:var(--event-color);border-radius:10px;padding-top:13px;padding-bottom:13px;margin-bottom:9px}
.event p{color:#c8d7e2;line-height:1.6;font-size:12px}.event-head time{color:#9eb1be}
.event.compact{border-color:#293f4a}.event.compact p{color:#b2c3cf}
.feed-footer{padding:14px 16px;color:#a0b6c1;border-color:#2a3c48}
.mission{margin-top:18px;padding:22px;background:radial-gradient(ellipse at 100% 0,#294d3d65,transparent 80%),#14252a;border:1px solid #315347;border-radius:14px}
.mission .eyebrow{color:#9cdbbc;font-size:9px;letter-spacing:1.4px}.mission h2{font-size:25px;letter-spacing:-.7px;margin:15px 0 12px}
.mission p{font-size:12px;line-height:1.7;color:#aebfc6}.mission button{color:#a7ecc9;font-size:12px;border-color:#315348;padding-top:16px;margin-top:18px}.mission-art{color:#70d6a40b}
.bottom-strip{padding:22px;margin-top:20px;background:#16222c;border-color:#334652;border-radius:14px;gap:16px}
.mini-label{color:#9edfc2;font-size:9px}.bottom-strip strong{font-size:15px}.bottom-strip p{font-size:12px}
.primary{min-height:40px;background:#62e6b5;border:1px solid #62e6b5;color:#0a2c20;border-radius:8px;font-size:12px;padding:11px 16px;box-shadow:none}
.primary:hover{background:#94f4cf;border-color:#94f4cf}
select{min-height:40px;border-color:#425c6b;background:#101c25;border-radius:8px;padding:10px 12px;font-size:12px}
.staking-section,.protocol-section{margin-top:32px;padding:32px;border-color:#304b48;border-radius:18px;background:radial-gradient(ellipse at 0 0,#20533c33,transparent 65%),#131f28;scroll-margin-top:24px}
.staking-copy h2,.protocol-heading h2{font-size:32px;letter-spacing:-1px;line-height:1.2}
.staking-copy>p,.protocol-intro>p{color:#aebfc9;font-size:14px}
.tech-note{background:#0f1d23;border-color:#5dcca0;border-radius:0 10px 10px 0}.tech-note span{color:#b6c6ce}
.staking-console{border-color:#3a6355;border-radius:14px;background:#10211f;box-shadow:none}
.staking-console-top{color:#9dbeb2;border-color:#2e4f42}.build-dot{background:#7cd4ad;box-shadow:none}
.staking-symbol{color:#6bd5aa;text-shadow:0 0 25px #69d3ad20}.staking-console>strong{color:#c0efda;font-size:17px;letter-spacing:3px}
.staking-console button{background:#203b32;border-color:#355a4a;color:#b6cfc3;opacity:1;min-height:42px;border-radius:8px}
.protocol-steps li{background:#172934;border-color:#304b58;border-radius:12px}.protocol-status{border-color:#344b50}.protocol-status p{color:#a6bcc5}
.planned-badge{background:#192c26;color:#b6d3c5;border-color:#365f4c;border-radius:6px}
.stat,.table-wrap,.history-item{background:#14232e;border-color:#30434f;border-radius:12px}
.stat span{color:#afc1cd}.table-wrap table{background:#14232e}.table-wrap th,.table-wrap td{border-color:#2c3f4c}
footer{padding:32px 0;color:#97aebb;align-items:center;line-height:1.6}footer .footer-brand{color:#b7d4c7}.footer-x{color:#a8dfc6}
dialog{border-color:#496455;border-radius:18px;background:#15232b}dialog>p{color:#b1c4cd}
.info-note{background:#20343e;color:#b9cbd4;border-radius:9px}
button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #99f5d1;outline-offset:4px}
@media(min-width:1700px){.arena-layout{grid-template-columns:minmax(0,1fr) 350px}}
@media(max-width:1250px){.topbar{flex-wrap:wrap;padding:12px 24px;gap:10px 18px}.top-right{margin-left:auto}.topbar nav{order:3;width:100%;margin:0;justify-content:center;gap:10px;height:auto}.social-handle{display:inline}.arena-layout{grid-template-columns:minmax(0,1fr) 286px;gap:16px}.nav,.topbar nav a.nav{padding:11px 16px}.players{gap:6px}.player-card{min-height:114px}}
@media(max-width:950px){.arena-layout{grid-template-columns:1fr}.arena-intro{min-height:120px}.sidebar{grid-template-columns:1.25fr 1fr;gap:16px}.mission{margin:0}.players .sprite-avatar{width:54px;height:72px}.feed-panel{height:360px}}
@media(max-width:680px){.topbar{padding:10px 14px}.brand{font-size:24px;gap:7px}.brand-trader{width:36px;height:48px}.demo-badge{font-size:7px;padding:4px 5px}.social-handle{display:none}.top-right{gap:6px}.social-x,.icon-btn{min-width:36px;width:36px;height:36px}.topbar nav{justify-content:flex-start;gap:4px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#365346 transparent;max-width:100%;padding:4px}.nav,.topbar nav a.nav{font-size:11px;padding:11px 12px;height:40px;flex:none}.arena-intro{padding:22px 0;min-height:120px}.arena-intro>span.arena-status{display:none}.arena-intro h1{font-size:23px;max-width:350px;line-height:1.25}.arena-intro p{font-size:12px;max-width:320px}main{padding:0 14px}.sidebar{grid-template-columns:1fr}.mission{padding:22px}.game-top{height:40px;padding:0 10px}.game-title strong{font-size:9px}.game-timer{font-size:9px}.players{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.player-card,.player-card.selected{min-height:114px;padding:5px 4px 12px}.players .sprite-avatar{width:48px;height:64px}.roster-heading{font-size:9px}.roster-heading small{display:none}.roster-heading>span:last-child{font-size:7px}.controls{padding:7px;gap:5px}.control{min-height:40px;padding:9px 8px;font-size:11px}.controls #camera span,.controls #reveal span{display:inline}.controls #reveal{font-size:11px}.control-group{gap:3px}.bottom-strip{padding:18px}.prediction-controls{width:100%;flex-wrap:wrap;gap:10px}.prediction-controls select{max-width:none;flex:1;min-width:130px}.prediction-controls .primary{flex:1;min-width:130px;min-height:42px;font-size:11px}.staking-section,.protocol-section{padding:24px 19px;margin-top:24px;border-radius:15px}.staking-copy h2,.protocol-heading h2{font-size:27px}.staking-copy>p,.protocol-intro>p{font-size:13px}.protocol-heading{gap:17px}.planned-badge{font-size:8px}.feed-panel{height:360px}footer{font-size:9px;padding:25px 0;gap:12px}}
@media(max-width:680px){.demo-badge{display:none}.topbar{column-gap:8px}.top-right{flex:none}}
@media(max-width:360px){.brand{font-size:23px}.arena-intro h1{font-size:22px}.controls .control{font-size:10px;padding:8px 6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.building-dots{animation:none}.player-card{transition:none}.player-card:hover{transform:none}}