/* Extreme Networks booth theme. The official white logo is bundled unchanged. */
:root {
  --extreme-purple: #61269e;
  --extreme-violet: #9e61ef;
  --extreme-lavender: #d5b2ff;
  --extreme-surface: #1b1429;
  --extreme-border: #453355;
}
/* A device arrives, waits for a decision, then drops through the chosen policy. */
.flow-arena { position: relative; height: 310px; display: flex; flex-direction: column; align-items: center; margin: 0 0 12px; }
.arrival-label { font-size: 10px; letter-spacing: 2px; color: #c9a8e6; display: grid; text-align: center; gap: 3px; }
.arrival-label span { font-size: 24px; color: #cd99ff; }
.flow-rail { position: absolute; top: 40px; bottom: 34px; width: 2px; background: linear-gradient(#ba7eed80, #ba7eed20); }
.flow-arena #device-area { position: relative; z-index: 3; width: 330px; margin-top: 5px; }
.flow-arena .active-device { animation: descend .25s ease-out both; padding: 16px 20px; text-align: center; border-radius: 18px; }
.flow-arena .device-heading { flex-direction: column; gap: 7px; margin-bottom: 9px; }
.flow-arena .device-icon { width: 100px; height: 78px; border: 0; background: none; }
.flow-arena .device-icon svg { width: 88px; height: 78px; stroke-width: 1.2; filter: drop-shadow(0 0 12px #ac6bee55); }
.flow-arena .device-heading h3 { font-size: 15px; margin-bottom: 3px; }
.flow-arena .device-heading small { font-size: 10px; }
.flow-arena .signal { display: flex; flex-direction: column; gap: 3px; padding: 8px 0 0; }
.flow-arena .signal-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.6px; }
.flow-arena .signal-value { font-size: 30px; font-weight: 850; color: #f4e9ff; }
.flow-arena .signal-value.bad { font-size: 22px; color: #ff9ba9; background: #9c183d40; border-radius: 6px; padding: 5px; }
.route-label { position: absolute; bottom: 0; font-size: 11px; letter-spacing: 1px; color: #dbc2ef; }
.policy-picture { display: grid; place-items: center; color: #dcb8ff; }
.policy-picture svg { width: 46px; height: 46px; }
.policy-hint { color: #cbb8da; font-size: 12px; margin: 9px 8px; }
.policy-card { position: relative; overflow: hidden; }
.policy-card.receiving { border-color: #d9a3ff; box-shadow: 0 0 25px #b671ff66; }
.policy-card:last-child .policy-picture { color: #ff8b9e; }
.active-device.routing { pointer-events: none; }
@keyframes descend { from { transform: translateY(-90px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media(max-height:800px) {
  .flow-arena { height: 285px; }
  .flow-arena .device-icon, .flow-arena .device-icon svg { height: 62px; }
  .policy-picture svg { width: 36px; height: 36px; }
  .policy-hint { margin: 6px; }
}
body { background: #110b1b; color: #f7f3fc; }
.app-shell {
  background:
    radial-gradient(ellipse at 88% 29%, #7437b640, transparent 51%),
    radial-gradient(ellipse at 10% 96%, #552c862c, transparent 47%),
    linear-gradient(135deg, #160e22, #100b18 62%);
}
.topbar { border-bottom-color: #44295c; }
.brand { gap: 18px; font-size: 19px; letter-spacing: .4px; }
.extreme-logo { width: 150px; height: auto; display: block; }
.brand-divider { width: 1px; height: 38px; background: #66447d; }
.game-wordmark { white-space: nowrap; }
.brand-light { font-weight: 750; margin-left: 4px; }
.brand small { color: #bea6d4; font-size: 8px; letter-spacing: 1.2px; }
.nav-button { color: #b6a7c6; }
.nav-button.active { background: #61269e; color: #fff; }
.nav-button:hover:not(:disabled) { background: #4b276f; }
.system-status { color: #bcb0cc; }
.icon-button { border-color: #674b7d; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline-color: #e0baff; }
.eyebrow { color: #c998ff; }
.eyebrow:before { background: #b87cef; }
.home-grid { gap: 56px; }
.home-grid h1 { font-size: clamp(84px, 8vw, 124px); line-height: .86; letter-spacing: -5px; margin: 27px 0 25px; }
.home-grid h1 em { color: #bf83ff; }
h1 em { color: #c38dff; }
.muted { color: #b7a9c7; }
.micro { color: #ac9cbe; }
.intro > .muted { max-width: 500px; }
.quick-facts { border-top-color: #4a335e; }
.quick-facts strong { color: #f6efff; }
.quick-facts small { color: #ae96c4; }
.name-form { background: #271936; border-color: #775294; box-shadow: 0 10px 30px #05020725; }
.field-label { color: #d0bde2; }
input, select { background: #150e20; border-color: #6b4b85; color: #fff; }
input::placeholder { color: #a28caf; }
.primary { background: linear-gradient(115deg, #7431b8, #8440cb); color: #fff; box-shadow: 0 5px 25px #7335ac33; border: 1px solid #aa72dc; }
.primary:hover { background: linear-gradient(115deg, #8946cc, #9d59e0); }
.secondary { background: #322040; border-color: #6a4783; color: #eadbf7; }
.secondary:hover { background: #472b5c; }
.scene { background: linear-gradient(145deg, #49216d, #221234 59%, #1a1226); border-color: #8752b2; box-shadow: 0 20px 70px #08030f66; }
.scene:before { background-image: radial-gradient(#d2a5f739 1px, transparent 1px); }
.scene:after { content: ''; position: absolute; width: 230px; height: 540px; top: -235px; right: 25px; transform: rotate(43deg); border-left: 24px solid #c99aff10; border-right: 10px solid #c99aff10; pointer-events: none; }
.scene-top { color: #dec9ef; }
.live-pill { color: #dfbbff; border-color: #c79bf761; background: #c796ff14; }
.hero-device { background: #1b122a; border-color: #8765a3; box-shadow: 0 20px 40px #09011155; }
.device-icon { color: #d7b2ff; border-color: #a36ad15c; background: #a769e21f; }
.device-heading small, .signal-label { color: #b7a2c9; }
.signal { border-top-color: #45314f; }
.connection-line { background: linear-gradient(#c18af7, #8450bf); }
.engine { background: #61269e; border-color: #c28ded; color: white; box-shadow: 0 0 40px #a65ef13b; width: 210px; }
.engine small { display: block; font-size: 8px; color: #d7b9f4; letter-spacing: 1.8px; margin-top: 6px; }
.mini-routes span { background: #190d29; border-color: #76518f; color: #bfa7d3; }
.mini-routes .selected { background: #7634b43d; border-color: #d69aff; color: #e5c5ff; }
.scene-caption { color: #cdb6de; }
.booth-pillars { display: flex; align-items: center; justify-content: center; gap: 20px; border-top: 1px solid #78479580; margin-top: 19px; padding-top: 15px; color: #d5b8ec; font-size: 9px; letter-spacing: 1.6px; font-weight: 700; }
.booth-pillars span + span:before { content: '+'; color: #b072e1; margin-right: 20px; }
.bottom-strip, .info-panel { background: #20152d; border-color: #573769; }
.bottom-strip p { color: #b09ac4; }
.text-button { color: #d1a0ff; }
.tag { background: #352043; border-color: #80589a; color: #ddc4f0; }
.policy-card { background: #24192f; border-color: #624875; }
.policy-access { border-top-color: #584065; background: #120a1a33; }
.policy-checks li { color: #c5b4d2; }
.policy-card.highlight { background: #4f3164; }
.policy-card.wrong { background: #49202a; border-color: #ff526d; }
.step-label { color: #d1a0ff; }
.info-panel ol { color: #c4b4d1; }
.small-label, .game-instruction { color: #b7a1c9; }
.hud-center .timer { color: #f2e5ff; }
.hud-center .timer small { color: #b899cf; }
.progress-track, .progress-track i { background: #432750; }
.progress-track i.done { background: #bc7cf4; }
.queue-icons svg { color: #a57bbf; }
.queue-scene p { color: #b492ce; }
.arrow { color: #c48bf4; }
.active-device { background: linear-gradient(135deg, #392248, #22162f); border-color: #b38cce; box-shadow: 0 15px 45px #10041866; }
.gate-shape { border-color: #bd7bf2; background: #7338a814; box-shadow: inset 0 0 30px #a85cea28, 0 0 50px #a556ee20; }
.gate-shape svg { color: #d7a5ff; }
.gate small { color: #c4a1de; }
.overlay { background: radial-gradient(ellipse at center, #542283ed, #160920f7 68%); }
.count-number { color: #fff; text-shadow: 0 0 65px #ac5ff97a; }
.count-label { color: #e0bcff; }
.modal { background: #24142f; border-color: #9a65bb; }
.modal p { color: #ceb4df; }
.result-badge { background: #9f58ed20; color: #dcafff; border-color: #b87eeb88; }
.result .final-time { color: #d6a3ff; }
.result-stats { background: #634273; border-color: #634273; }
.result-stats div { background: #24182f; }
.result-stats small { color: #bba0cf; }
.board { background: #21162c; border-color: #65467a; }
.board-title { background: linear-gradient(100deg, #502679, #25172f); border-bottom-color: #71508b; }
.board-title h3 { color: #e8cdff; }
.board.bottom .board-title { background: linear-gradient(100deg, #542638, #25172f); }
.board-title small, .board th, .board td:first-child { color: #bea6cf; }
.board td { border-top-color: #483054; }
.board tr.me { background: #ae70e51c; }
.empty, .board-note { color: #b49fc4; }
.mapping-row, .library-item { background: #1a1025; border-color: #5d3e70; }
.mapping-row strong, .mapping-number { color: #d8aeff; }
.setting label, .library-item p, .mapping-row span:last-child { color: #c4abd5; }
.setting input[type=checkbox] { accent-color: #9f5bd9; }
.toast { background: #4a2863; border-color: #b47ed9; }
footer { border-top-color: #49305b; color: #b19ac4; font-size: 9px; }
footer b { color: #d6c4e5; }
.platform-footer { letter-spacing: .8px; }
.platform-footer strong { color: #e5b8ff; }
.platform-footer i { font-style: normal; color: #815b9a; margin: 0 3px; }
@media(max-width:1200px) {
  .brand { gap: 12px; font-size: 16px; }
  .extreme-logo { width: 123px; }
  .brand small { font-size: 7px; }
  .topbar { gap: 16px; }
  .home-grid { gap: 30px; }
  .platform-footer { font-size: 8px; }
}
@media(max-height:950px) { .home-grid h1 { font-size: 99px; } .booth-pillars { margin-top: 15px; padding-top: 12px; } }
@media(max-height:800px) {
  .home-grid h1 { font-size: 77px; margin: 20px 0; }
  .home-grid .name-form { padding: 15px; }
  .home-grid .quick-facts { margin: 14px 0; }
  .booth-pillars { margin-top: 11px; padding-top: 10px; }
  .scene-caption { font-size: 10px; }
  .extreme-logo { width: 130px; }
}