/* Twelve-device challenge: home standings and a visible NAC-to-segment route. */
.home-dashboard { display:grid; grid-template-columns:minmax(220px,1fr) minmax(350px,1.5fr) minmax(220px,1fr); gap:28px; align-items:center; min-height:calc(100vh - 215px); }
.home-welcome { text-align:center; }
.home-welcome .eyebrow { justify-content:center; font-size:9px; letter-spacing:1.3px; }
.home-welcome h1 { font-size:clamp(70px,7vw,110px); margin:22px 0; line-height:.9; }
.home-welcome h1 em { text-transform:lowercase; }
.home-welcome .muted { margin-bottom:0; }
.home-welcome .quick-facts { justify-content:center; margin:22px 0; padding-top:16px; }
.home-welcome .name-form { text-align:left; padding:20px; margin:auto; }
.home-welcome .input-row input { width:100%; }
.mode-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.mode-actions .primary { white-space:normal; min-height:52px; }
.mode-actions .education { background:#a67cff; color:#160b24; }
.mode-actions .education:hover { background:#bd9aff; }
.home-welcome .text-button { margin-top:20px; font-size:12px; }
.home-ranking { border:1px solid #684583; border-radius:16px; background:#25172f; overflow:hidden; }
.home-ranking-title { padding:20px 18px 15px; background:linear-gradient(120deg,#572380,#281b36); }
.home-ranking-title span { font-size:10px; letter-spacing:2px; color:#d3a5ff; }
.home-ranking-title h3 { font-size:19px; margin:5px 0 0; }
.home-ranking.bottom .home-ranking-title { background:linear-gradient(120deg,#57273e,#281b36); }
.home-ranking.bottom .home-ranking-title span { color:#ffa1b2; }
.home-ranking ol { list-style:none; margin:0; padding:8px 14px; }
.home-ranking li { display:flex; align-items:center; gap:8px; min-height:35px; border-bottom:1px solid #62407155; font-size:12px; }
.home-ranking .rank { width:22px; color:#b494cd; }
.home-ranking .rank-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-ranking strong { font-size:12px; font-variant-numeric:tabular-nums; }
.home-ranking .vacant { color:#8a739c; }
.home-ranking p { margin:6px 12px 14px; text-align:center; font-size:10px; color:#b59ac9; }
.leaderboard-filters { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:18px; }
.leaderboard-filters label { display:flex; flex-direction:column; gap:8px; font-size:12px; color:#c7b0d8; }
.full-board { max-height:calc(100vh - 345px); overflow:auto; }
.full-board thead { position:sticky; top:0; background:#392149; z-index:1; }
.full-board .empty { text-align:center; }
main.game-layout { display:flex; flex-direction:column; height:calc(100vh - 152px); min-height:610px; padding:18px 0 10px; }
.game-layout .hud { flex:none; margin-bottom:10px; }
.game-layout .progress-track { flex:none; margin-bottom:8px; }
.game-layout .flow-arena { flex:1; height:auto; min-height:290px; margin:0 0 15px; }
.game-layout .arrival-label { font-size:11px; font-weight:800; color:#e7c9ff; text-shadow:0 0 18px #c98cff88; }
.game-layout .arrival-label span { font-size:21px; }
.game-layout .flow-arena #device-area { width:370px; margin-top:0; }
.game-layout .flow-arena .active-device { padding:13px 22px; animation-duration:.5s; border:3px solid #d19cff; background:linear-gradient(135deg,#4a2b5d,#2b193a); box-shadow:0 0 48px #bd70ff66,0 16px 45px #08030f88; }
.game-layout .flow-arena .device-heading { flex-direction:row; text-align:left; gap:15px; margin-bottom:7px; }
.game-layout .flow-arena .device-icon,.game-layout .flow-arena .device-icon svg { width:64px; height:54px; }
.game-layout .flow-arena .signal { padding:5px 0 0; }
.game-layout .flow-arena .signal-value { font-size:27px; }
.game-layout .flow-arena .signal-value.bad { font-size:19px; }
.policy-engine { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:22px; width:min(520px,45vw); min-height:104px; padding:20px 36px; border:2px solid #765e87; border-radius:20px; background:linear-gradient(135deg,#2d2038,#21162c); z-index:2; box-shadow:0 12px 35px #08030f55; color:#ad9bb9; }
.policy-engine strong { display:block; font-size:26px; letter-spacing:2.5px; line-height:1.05; white-space:nowrap; }
.policy-engine strong b { color:#c0a9cf; font-weight:900; }
.policy-engine small { display:block; font-size:9px; letter-spacing:1.7px; color:#887895; margin-top:9px; white-space:nowrap; }
.engine-symbol svg { width:52px; height:52px; color:#9d88aa; stroke-width:1.6; }
.policy-engine.processing { color:#f2ddff; border-color:#c184f4; background:#5a2783; box-shadow:0 0 45px #b270ed66; }
.policy-engine.processing strong b,.policy-engine.processing .engine-symbol svg { color:#eed7ff; }
.game-layout .route-label { bottom:6px; font-size:10px; }
.game-layout .segment-grid { flex:none; gap:18px; }
.segment-grid .segment { overflow:visible; background:transparent; border:0; box-shadow:none; border-radius:0; }
.segment-grid .segment:before { display:none; }
.segment-grid .policy-top { justify-content:center; padding:0 3px 12px; }
.segment-grid .policy-name { font-size:15px; }
.segment-bin { position:relative; min-height:115px; border:2px solid var(--segment-color); border-top:0; border-radius:0 0 22px 22px; background:linear-gradient(0deg,#9d64d329,#29183b); margin:0 7px; }
.segment-rim { position:absolute; top:-4px; left:-8px; right:-8px; height:10px; border:2px solid var(--segment-color); border-radius:6px; background:#352341; }
.segment { --segment-color:#be9aff; color:var(--segment-color); }
.segment:nth-child(2) { --segment-color:#75caff; }
.segment:nth-child(3) { --segment-color:#efc072; }
.segment:nth-child(4) { --segment-color:#6bd4ba; }
.segment:nth-child(5) { --segment-color:#ff819c; }
.segment .slot { border-color:var(--segment-color); color:var(--segment-color); }
.landed-devices { display:flex; flex-wrap:wrap; align-content:flex-end; justify-content:center; gap:5px; min-height:111px; padding:13px 9px; position:relative; z-index:1; }
.landed-device { display:grid; place-items:center; width:34px; height:34px; border:1px solid #ffffff26; background:#181024; border-radius:7px; }
.landed-device svg { width:26px; height:26px; }
.empty-bin { align-self:center; margin:auto; font-size:8px; letter-spacing:1px; opacity:.55; }
.quarantine-segment .segment-bin { background:repeating-linear-gradient(90deg,transparent 0 28px,#ed799529 28px 32px),#341629; border-radius:0 0 8px 8px; }
.cage-lock { position:absolute; right:-7px; bottom:6px; background:#341629; padding:0 3px; color:#ff95ab; font-size:19px; }
.segment-grid .policy-access { display:flex; justify-content:space-between; gap:5px; font-size:12px; font-weight:650; border:0; background:none; padding:10px 7px 0; color:var(--segment-color); }
.device-count { font-size:10px; font-weight:400; color:#b7a2c7; }
.segment-grid .receiving .segment-bin { box-shadow:0 0 35px #bc80ff55; }
.segment-grid .wrong .segment-bin { border-color:#ff526d; background:#5a1d30; }
.game-layout .active-device.routing { opacity:.2; }
.flying-device { position:fixed; width:60px; height:60px; z-index:12; color:#eed9ff; pointer-events:none; padding:6px; background:#442265; border:1px solid #d29cff; border-radius:12px; box-shadow:0 0 25px #c18afa66; }
.flying-device svg { width:100%; height:100%; }
.game-layout .feedback { flex:none; margin-top:8px; height:18px; font-size:11px; }
.intermission-button { min-width:min(440px,90vw); min-height:64px; font-size:18px; text-transform:uppercase; letter-spacing:.08em; animation:intermission-pulse 1.4s ease-in-out infinite; }
@keyframes intermission-pulse { 50% { transform:scale(1.025); box-shadow:0 0 34px #bdff6760; } }
.penalty-flash { position:fixed; inset:0; z-index:18; display:grid; place-content:center; text-align:center; pointer-events:none; background:radial-gradient(circle at center,#ff173a2e 0,transparent 42%); }
.penalty-flash.play { animation:penalty-backdrop .85s ease-out both; }
.penalty-amount { color:#ff3e5f; font-size:clamp(82px,11vw,180px); font-weight:950; line-height:.82; letter-spacing:-7px; text-shadow:0 0 12px #ff173a,0 5px 0 #5b0718,0 0 70px #ff173aaa; }
.penalty-amount span { display:block; margin-top:20px; font-size:.28em; letter-spacing:.18em; color:#fff; text-shadow:0 2px 0 #710e20,0 0 22px #ff173a; }
.penalty-reason { display:inline-block; justify-self:center; margin-top:26px; padding:10px 20px; border:2px solid #ff5270; border-radius:7px; background:#530d20e8; color:#ffdce2; font-size:clamp(15px,1.5vw,25px); font-weight:900; letter-spacing:.18em; box-shadow:0 0 35px #ff173a66; }
.penalty-flash.play .penalty-amount { animation:penalty-impact .85s cubic-bezier(.16,.85,.32,1) both; }
.penalty-flash.play .penalty-reason { animation:penalty-reason .85s ease-out both; }
@keyframes penalty-impact { 0%{transform:scale(1.65);opacity:0} 13%{transform:scale(.91);opacity:1} 25%{transform:scale(1.04)} 68%{transform:scale(1);opacity:1} 100%{transform:scale(.96);opacity:0} }
@keyframes penalty-reason { 0%,12%{transform:translateY(15px);opacity:0} 28%,70%{transform:translateY(0);opacity:1} 100%{opacity:0} }
@keyframes penalty-backdrop { 0%{opacity:0} 14%,62%{opacity:1} 100%{opacity:0} }
@media(max-height:850px) {
  main.game-layout { height:calc(100vh - 121px); min-height:555px; }
  .home-dashboard { min-height:calc(100vh - 160px); }
  .home-welcome h1 { font-size:76px; margin:18px 0; }
}
@media(max-height:800px) {
  main.game-layout { height:calc(100vh - 105px); min-height:540px; }
  .game-layout .flow-arena { min-height:275px; }
  .segment-bin { min-height:93px; }
  .landed-devices { min-height:89px; padding:10px 7px; }
  .home-ranking li { min-height:32px; }
  .home-welcome h1 { font-size:67px; }
  .home-welcome .name-form { padding:15px; }
  .home-welcome .quick-facts { margin:15px 0; }
}
@media(max-width:1200px) {
  .home-dashboard { gap:16px; grid-template-columns:minmax(200px,1fr) minmax(310px,1.5fr) minmax(200px,1fr); }
  .home-ranking-title { padding:16px 12px; }
  .home-ranking-title h3 { font-size:16px; }
  .home-welcome .primary { padding:12px; }
  .segment-grid .policy-name { font-size:12px; }
  .segment-grid .policy-access { font-size:10px; }
  .policy-engine { width:430px; min-height:96px; padding:18px 28px; }
  .policy-engine strong { font-size:22px; }
  .engine-symbol svg { width:48px; height:48px; }
}

/* Booth displays: use the room available on 1080p, 1440p, and ultrawide screens. */
@media (min-width:1700px) and (min-height:900px) {
  body { font-size:20px; }
  .app-shell { padding:0 72px; }
  .topbar { height:112px; }
  .extreme-logo { width:190px; }
  .brand { font-size:23px; gap:20px; }
  .brand-divider { height:48px; }
  .brand small { font-size:10px; }
  .nav-button { padding:16px 26px; font-size:19px; }
  .system-status { font-size:14px; }
  .icon-button { width:44px; height:44px; }
  main { max-width:2200px; padding:34px 0 24px; }
  footer { padding:20px 0; font-size:14px; }

  .home-dashboard {
    min-height:calc(100vh - 210px);
    grid-template-columns:minmax(330px,1fr) minmax(620px,1.35fr) minmax(330px,1fr);
    gap:48px;
    align-items:stretch;
    padding:52px 0;
  }
  .home-welcome { display:flex; flex-direction:column; justify-content:center; }
  .home-welcome .eyebrow { font-size:14px; letter-spacing:2px; }
  .home-welcome h1 { font-size:clamp(122px,7vw,170px); margin:28px 0; letter-spacing:-7px; }
  .home-welcome > .muted { font-size:27px; line-height:1.5; }
  .home-welcome .quick-facts { gap:48px; margin:30px 0; padding-top:24px; }
  .home-welcome .quick-facts strong { font-size:36px; }
  .home-welcome .quick-facts small { font-size:15px; }
  .home-welcome .name-form { width:100%; max-width:720px; padding:28px; border-radius:18px; }
  .home-welcome .field-label { font-size:17px; }
  .home-welcome input { padding:20px; font-size:21px; }
  .home-welcome .primary { padding:20px 30px; font-size:20px; }
  .mode-actions { gap:14px; margin-top:16px; }
  .mode-actions .primary { min-height:74px; }
  .home-welcome .micro,.home-welcome .form-error { font-size:16px; }
  .home-welcome .text-button { margin-top:25px; font-size:18px; }
  .home-welcome .booth-pillars { font-size:14px; margin-top:28px; padding-top:22px; }

  .home-ranking { display:flex; flex-direction:column; border-radius:22px; }
  .home-ranking-title { padding:28px 26px 22px; }
  .home-ranking-title span { font-size:15px; }
  .home-ranking-title h3 { font-size:31px; margin-top:8px; }
  .home-ranking ol { flex:1; display:grid; grid-template-rows:repeat(10,1fr); padding:12px 24px; }
  .home-ranking li { min-height:0; font-size:21px; gap:14px; }
  .home-ranking .rank { width:38px; font-size:20px; }
  .home-ranking strong { font-size:21px; }
  .home-ranking p { margin:12px 18px 22px; font-size:15px; }

  .page-head h2 { font-size:46px; }
  .page-head .muted { font-size:18px; }
  .leaderboard-filters { gap:24px; }
  .leaderboard-filters label { font-size:15px; }
  .leaderboard-filters input,.leaderboard-filters select { padding:16px; font-size:17px; }
  .full-board { max-height:calc(100vh - 380px); }
  .board table { font-size:17px; }
  .board th { padding:16px 24px; font-size:12px; }
  .board td { padding:17px 24px; }
  .board-note { font-size:15px; }

  .tutorial-top { gap:30px; }
  .tutorial-top .info-panel { padding:28px; }
  .tutorial-top p,.tutorial-top li { font-size:17px; }
  .policy-grid { gap:18px; }
  .policy-top { padding:18px 16px 14px; }
  .policy-name { font-size:18px; }
  .policy-picture svg { width:62px; height:62px; }
  .policy-hint { font-size:16px; margin:14px 10px; }
  .policy-access { padding:15px 16px; font-size:15px; }
  .tutorial-cta .muted { font-size:17px; }

  main.game-layout { height:calc(100vh - 166px); min-height:730px; padding:22px 0 12px; }
  .game-layout .hud { min-height:105px; }
  .hud-player strong { font-size:25px; }
  .small-label { font-size:13px; }
  .hud-center .timer { font-size:72px; }
  .hud-right strong { font-size:24px; }
  .game-layout .flow-arena { min-height:410px; }
  .game-layout .arrival-label { font-size:14px; }
  .game-layout .arrival-label span { font-size:28px; }
  .game-layout .flow-arena #device-area { width:500px; }
  .game-layout .flow-arena .active-device { padding:20px 28px; border-radius:22px; }
  .game-layout .flow-arena .device-icon,.game-layout .flow-arena .device-icon svg { width:96px; height:82px; }
  .game-layout .flow-arena .device-heading h3 { font-size:22px; }
  .game-layout .flow-arena .device-heading small { font-size:14px; }
  .game-layout .flow-arena .signal-label { font-size:13px; }
  .game-layout .flow-arena .signal-value { font-size:40px; }
  .game-layout .flow-arena .signal-value.bad { font-size:29px; }
  .policy-engine { width:650px; min-height:128px; bottom:52px; }
  .policy-engine strong { font-size:32px; }
  .policy-engine small { font-size:12px; }
  .engine-symbol svg { width:65px; height:65px; }
  .game-layout .route-label { font-size:13px; }
  .game-layout .segment-grid { gap:26px; }
  .segment-grid .policy-top { padding-bottom:15px; }
  .segment-grid .policy-name { font-size:20px; }
  .segment-grid .slot { min-width:42px; height:42px; font-size:20px; }
  .segment-bin { min-height:160px; margin:0 10px; }
  .landed-devices { min-height:156px; gap:8px; padding:18px 12px; }
  .landed-device { width:46px; height:46px; }
  .landed-device svg { width:35px; height:35px; }
  .empty-bin { font-size:11px; }
  .segment-grid .policy-access { padding:14px 10px 0; font-size:16px; }
  .device-count { font-size:13px; }
  .game-layout .feedback { height:26px; margin-top:12px; font-size:15px; }

  .setup-grid { gap:32px; }
  .setup-grid .info-panel { padding:30px; }
  .setting label,.mapping-row,.library-item p { font-size:16px; }
  .mapping-row { padding:15px 18px; }
  .result { max-width:1150px; }
  .result h1 { font-size:72px; }
  .result .final-time { font-size:120px; }
  .result-stats strong { font-size:32px; }
}