/* Front-end menus in the HUD Master look (the approved title-preview.html/.css): condensed caps, skewed plates, lime primary,
   ghost secondaries. skinButtons() in interface.js adds .js-btn-primary/.js-btn-ghost (hud.css); inside #overlay this file turns
   them into the preview's menu items (.item). Loaded after style.css and hud.css, so it overrides with #overlay selectors.
   Layouts:
   - #overlay.scene-side: a left column over the preview's 52% wash, so a live scene shows through on the right. The home and the
     online lobby (.lobby) and the results (.results) use it (setOverlay's side argument; it drops the blur and the plate).
   - otherwise (setOverlay panels): a centred clipped-corner plate on the blurred backdrop from style.css.
   Sizes follow the overlay through container units (it is a size container), so the menus scale with the 16:9 arena and with
   the full-screen touch layout alike. */
:root{--js-amber:#f59a2a;--js-ease:cubic-bezier(.2,.8,.2,1)}
#overlay{container:overlay/size;overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(197,250,105,.35) transparent;
 font-family:var(--js-font);color:var(--js-text);--js-skew:-12deg;
 /* Type scale: base text, small spaced labels, section heads and form fields. Resolved on the children, against the overlay. */
 --base:clamp(12px,min(1.2cqw,2.13cqh),18px);--small:clamp(10.5px,min(.8cqw,1.42cqh),12.5px);--head:clamp(11px,min(.92cqw,1.64cqh),14px);--field:clamp(13px,min(1.1cqw,1.95cqh),17px)}
#overlay>*{font-size:var(--base)}

/* ---------- Scene-side layout: left column over the wash (home, online lobby, results) ---------- */
#overlay.scene-side{justify-content:flex-start;align-items:flex-start;backdrop-filter:none;-webkit-backdrop-filter:none;
 background:linear-gradient(90deg,rgba(9,23,30,.88),rgba(9,23,30,.55) 55%,rgba(9,23,30,0)) 0 0/52% 100% no-repeat}
#overlay.scene-side>section{display:flex;flex-direction:column;flex:none;align-self:flex-start;width:min(34em,100% - 8cqw);max-width:none;min-height:100%;max-height:none;
 margin:0 0 0 6.2cqw;padding:7.5cqh 0 5cqh;overflow:visible;background:none;border:0;border-radius:0;clip-path:none;box-shadow:none}

/* Logo lockup */
#overlay .logo{display:block;height:auto;margin:0 0 min(2.4em,5cqh)}
#overlay .word{display:block;margin:0;font:italic 800 6.2em/.84 var(--js-font);letter-spacing:.01em;color:var(--js-text);white-space:nowrap;
 text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 38px rgba(255,160,90,.14)}
#overlay .tag{margin-top:.6em;font:500 1.05em/1 var(--js-font);letter-spacing:.42em;color:var(--js-amber);white-space:nowrap}
#overlay .tag i{font-style:normal;color:var(--js-text);opacity:.5;margin-right:.4em}

/* Home menu and its hint row */
#overlay .home-menu{display:flex;flex-direction:column;gap:.62em;max-width:27em}
#overlay .home-menu .js-btn-primary{margin-bottom:.28em;padding:.47em .7em .44em;font-size:1.8em}
#overlay .home-menu .js-btn-ghost{padding:.5em .85em .46em;font-size:1.4em}
#overlay .hint{margin-top:auto;padding-top:1.6em;font:600 var(--small)/2 var(--js-font);letter-spacing:.28em;color:var(--js-muted);text-transform:uppercase}
#overlay .hint>span{white-space:nowrap;margin-right:.9em}
#overlay .hint kbd{min-width:0;margin-right:.6em;padding:2px 6px 1px;border:1px solid var(--js-line);border-radius:0;background:none;color:var(--js-text);font:600 1em/1 var(--js-font);letter-spacing:.12em}
@container overlay (max-height:330px){#overlay .hint{display:none}}

/* ---------- Menu items: every skinned button in the overlay (the preview's .item) ---------- */
#overlay .js-btn-primary,#overlay .js-btn-ghost{position:relative;isolation:isolate;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em .9em;width:100%;min-height:0;margin:0;
 padding:.55em .9em .5em;border:0;border-radius:0;background:none;box-shadow:none;color:var(--js-text);cursor:pointer;outline:none;
 font:700 1.3em/1 var(--js-font);letter-spacing:.12em;text-transform:uppercase;text-align:left;white-space:nowrap;transition:transform .22s var(--js-ease),color .2s}
/* Plate: skewed, content stays upright. */
#overlay .js-btn-primary::before,#overlay .js-btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--js-skew));
 transition:background .22s var(--js-ease),border-color .22s,box-shadow .22s}
#overlay .js-btn-ghost::before{border:1px solid var(--js-line);background:rgba(9,23,30,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#overlay .js-btn-primary{color:var(--js-ground)}
#overlay .js-btn-primary::before{border:1px solid var(--js-lime);background:var(--js-lime);box-shadow:0 10px 40px -18px rgba(197,250,105,.8)}
/* Left bar, shown on hover and keyboard focus. */
#overlay .js-btn-primary::after,#overlay .js-btn-ghost::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--js-lime);opacity:0;pointer-events:none;
 transform:skewX(var(--js-skew)) scaleY(.4);transition:opacity .2s,transform .25s var(--js-ease)}
#overlay .js-btn-primary::after{background:var(--js-text)}
#overlay .js-btn-primary:not(:disabled):hover,#overlay .js-btn-ghost:not(:disabled):hover,#overlay .js-btn-primary:not(:disabled):focus-visible,#overlay .js-btn-ghost:not(:disabled):focus-visible{transform:translateX(12px)}
#overlay:not(.scene-side) .js-btn-primary:not(:disabled):hover,#overlay:not(.scene-side) .js-btn-ghost:not(:disabled):hover,
#overlay:not(.scene-side) .js-btn-primary:not(:disabled):focus-visible,#overlay:not(.scene-side) .js-btn-ghost:not(:disabled):focus-visible{transform:translateX(6px)}
#overlay .js-btn-ghost:hover::before,#overlay .js-btn-ghost:focus-visible::before{background:rgba(20,40,44,.72);border-color:rgba(197,250,105,.42);
 box-shadow:0 0 0 1px rgba(197,250,105,.08),-6px 0 22px -8px rgba(197,250,105,.55)}
#overlay .js-btn-primary:hover::before,#overlay .js-btn-primary:focus-visible::before{background:#d4ff84;border-color:#d4ff84;
 box-shadow:0 12px 44px -14px rgba(197,250,105,.95),-6px 0 22px -8px rgba(197,250,105,.7)}
#overlay .js-btn-primary:hover::after,#overlay .js-btn-ghost:hover::after,#overlay .js-btn-primary:focus-visible::after,#overlay .js-btn-ghost:focus-visible::after{opacity:1;transform:skewX(var(--js-skew)) scaleY(1)}
#overlay .js-btn-primary:disabled,#overlay .js-btn-ghost:disabled{opacity:.45;cursor:default;transform:none}
#overlay .js-btn-primary:disabled::before{background:var(--js-lime);border-color:var(--js-lime);box-shadow:none}
#overlay .js-btn-ghost:disabled::before{background:rgba(9,23,30,.5);border-color:var(--js-line);box-shadow:none}
#overlay .js-btn-primary:disabled::after,#overlay .js-btn-ghost:disabled::after{opacity:0}
/* Sub label: right-aligned small spaced caps (a trailing <span>, or .sub on the home). */
#overlay .js-btn-primary>span:not(.ico):not(.lab),#overlay .js-btn-ghost>span:not(.ico):not(.lab){display:inline;float:none;margin-left:auto;font:600 var(--small)/1 var(--js-font);letter-spacing:.24em;
 color:var(--js-muted);text-transform:uppercase;white-space:nowrap;transition:color .2s}
#overlay .js-btn-primary>span:not(.ico):not(.lab){color:rgba(9,23,30,.65)}
#overlay .js-btn-ghost:hover>span:not(.ico):not(.lab),#overlay .js-btn-ghost:focus-visible>span:not(.ico):not(.lab){color:var(--js-text)}
#overlay .js-btn-primary>.lab,#overlay .js-btn-ghost>.lab{display:inline;float:none;font:inherit;color:inherit;letter-spacing:inherit}
#overlay .ico{display:inline-block;flex:none;font-size:inherit;align-self:center;width:0;height:0;border-left:.44em solid currentColor;border-top:.3em solid transparent;border-bottom:.3em solid transparent}
/* Small ghost (BACK, DONE, LEAVE ROOM, RESET KEYS). */
#overlay .js-btn-ghost.text-button{width:auto;flex:none;align-items:center;padding:.62em 1.25em .58em;font-size:var(--head);letter-spacing:.24em}
/* QUIT TO MENU's armed "CONFIRM QUIT" (interface.js wireQuit): the HUD's warning red (hud.css --js-red) instead of lime. */
#overlay .js-btn-ghost.js-btn-warn{color:var(--js-red)}
#overlay .js-btn-ghost.js-btn-warn::after{background:var(--js-red)}
#overlay .js-btn-ghost.js-btn-warn::before{border-color:rgba(255,146,125,.4)}
#overlay .js-btn-ghost.js-btn-warn:hover::before,#overlay .js-btn-ghost.js-btn-warn:focus-visible::before{border-color:var(--js-red);background:rgba(255,146,125,.1);
 box-shadow:0 0 0 1px rgba(255,146,125,.15),-6px 0 22px -8px rgba(255,146,125,.55)}

/* ---------- Panels (setOverlay): clipped-corner dark plates ---------- */
#overlay .pause-panel,#overlay .config-panel{position:relative;flex:none;margin:auto;max-width:calc(100% - 1.5em);max-height:94%;padding:2em 2.2em 2.1em;overflow:hidden auto;counter-reset:head;
 border:1px solid var(--js-line);border-radius:0;box-shadow:none;scrollbar-width:thin;scrollbar-color:rgba(197,250,105,.35) transparent;
 background:linear-gradient(var(--js-lime),var(--js-lime)) 0 0/3.2em 2px no-repeat,
  linear-gradient(to top right,transparent calc(50% - 1px),var(--js-line) 50%,transparent calc(50% + 1px)) 100% 0/1.2em 1.2em no-repeat,
  linear-gradient(to top right,transparent calc(50% - 1px),var(--js-line) 50%,transparent calc(50% + 1px)) 0 100%/1.2em 1.2em no-repeat,
  linear-gradient(160deg,rgba(14,32,39,.95),rgba(9,23,30,.92));
 clip-path:polygon(0 0,calc(100% - 1.2em) 0,100% 1.2em,100% 100%,1.2em 100%,0 calc(100% - 1.2em))}
#overlay .pause-panel{width:27em}
#overlay .config-panel{width:44em}
#overlay .party-panel{width:62em}
#overlay .net-panel{width:39em}
#overlay .panel-heading{align-items:flex-start;gap:1.2em;margin-bottom:1.3em}
#overlay h2{margin:.22em 0 .12em;font:italic 800 2.9em/.9 var(--js-font);letter-spacing:.01em;color:var(--js-text);text-transform:uppercase}
#overlay .pause-panel h2{margin:.25em 0 .3em;font-size:3.6em}
#overlay .net-panel h2{margin:.25em 0 .35em}
/* Section heads: "01 LABEL" with a lime number (the preview's .head). */
#overlay .eyebrow,#overlay .config-panel h3:not(.mode-group){font:600 var(--head)/1.3 var(--js-font);letter-spacing:.3em;color:var(--js-muted);text-transform:uppercase}
#overlay .config-panel h3:not(.mode-group){margin:0 0 1.1em}
#overlay .eyebrow::before,#overlay .config-panel h3:not(.mode-group)::before{counter-increment:head;content:counter(head,decimal-leading-zero);margin-right:.9em;color:var(--js-lime);font-weight:700;letter-spacing:.08em}
#overlay p{font:500 1.05em/1.45 var(--js-font);letter-spacing:.02em;color:#a9bcb8}
#overlay p strong{color:var(--js-text);font-weight:700;letter-spacing:.06em}
#overlay .field-note{font-family:var(--js-font);font-size:.95em!important;line-height:1.45!important;letter-spacing:.03em;color:var(--js-muted)!important}
#overlay .pause-panel>button,#overlay .net-panel>button{margin-top:.55em}
#overlay .pause-panel>.js-btn-primary{margin:1em 0 .45em}
#overlay .config-panel>.js-btn-primary{margin-top:.7em}
#overlay .net-panel>.js-btn-ghost.text-button{margin-top:1em}
#overlay .result-actions,#overlay .net-lobby-actions{gap:.55em}

/* Form controls */
#overlay .fields{gap:1em 1.2em;margin-top:1.4em}
#overlay .fields label,#overlay .net-name,#overlay .net-panel label,#overlay .range-field{font:600 var(--head)/1.2 var(--js-font);letter-spacing:.22em;color:var(--js-muted);text-transform:uppercase}
#overlay .fields label,#overlay .net-name{gap:.65em}
#overlay select{appearance:none;-webkit-appearance:none;width:100%;min-height:2.5em;padding:.5em 2.4em .45em .8em;border:1px solid var(--js-line);border-radius:0;cursor:pointer;
 background:rgba(9,23,30,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23c5fa69' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .85em center/.7em;
 color:var(--js-text);font:600 var(--field)/1.2 var(--js-font);letter-spacing:.08em;text-transform:uppercase;transition:border-color .2s,box-shadow .2s}
#overlay select:hover{border-color:rgba(197,250,105,.42)}
#overlay select:focus-visible{outline:none;border-color:var(--js-lime);box-shadow:0 0 0 1px var(--js-lime),-4px 0 0 -1px var(--js-lime)}
#overlay select option,#overlay select optgroup{background:#0b1a20;color:var(--js-text);text-transform:none;letter-spacing:.02em}
#overlay input:not([type]),#overlay input[type=text]{border:1px solid var(--js-line);border-radius:0;background:rgba(9,23,30,.72);color:var(--js-text);transition:border-color .2s,box-shadow .2s}
#overlay input:not([type]):focus,#overlay input[type=text]:focus{outline:none;border-color:var(--js-lime);box-shadow:0 0 0 1px var(--js-lime)}
#overlay input::placeholder{color:rgba(130,156,157,.55)}
#overlay .net-name input{padding:.55em .8em .5em;font:700 var(--field)/1.2 var(--js-font);letter-spacing:.14em}
#overlay .net-code-row input{padding:.28em .5em .22em;border-color:rgba(197,250,105,.35);color:var(--js-lime);font:800 calc(var(--field)*1.9)/1 var(--js-font);letter-spacing:.3em}
#overlay .net-code-row{gap:.8em;margin-top:.7em}
#overlay .net-code-row .js-btn-primary{width:auto;flex:none;align-items:center;justify-content:center;min-width:5.5em;padding:0 1.3em}
#overlay input[type=checkbox],#overlay input[type=radio]{appearance:none;-webkit-appearance:none;flex:none;width:1.15em;height:1.15em;margin:0;border:1px solid rgba(237,242,231,.4);border-radius:0;
 background:rgba(9,23,30,.72);transform:skewX(var(--js-skew));cursor:pointer;transition:background .15s,border-color .15s}
#overlay .option input{width:calc(var(--field)*1.1);height:calc(var(--field)*1.1)}
#overlay input[type=checkbox]:checked,#overlay input[type=radio]:checked{border-color:var(--js-lime);background:var(--js-lime);box-shadow:inset 0 0 0 3px var(--js-ground)}
#overlay input[type=checkbox]:hover,#overlay input[type=radio]:hover{border-color:var(--js-lime)}
#overlay input[type=checkbox]:focus-visible,#overlay input[type=radio]:focus-visible{outline:2px solid var(--js-lime);outline-offset:3px}
#overlay .option{gap:.75em;margin:1.1em 0;font:600 var(--field)/1.3 var(--js-font);letter-spacing:.06em;color:#b6c7c2}
#overlay .range-field{margin-bottom:1.5em}
#overlay .range-field output{font:700 var(--field)/1 var(--js-font);letter-spacing:.06em;color:var(--js-lime)}
#overlay .range-field input{height:1.4em;margin-top:.8em;accent-color:var(--js-lime)}
#overlay input[type=range]:focus-visible{outline:2px solid var(--js-lime);outline-offset:3px}
#overlay .options-grid{gap:2.2em}

/* Key bindings */
#overlay .bindings{gap:.45em}
#overlay .bindings>div{gap:1em;font:600 var(--field)/1.2 var(--js-font);letter-spacing:.08em;color:#b6c7c2;text-transform:uppercase}
#overlay .bindings button{position:relative;isolation:isolate;min-width:6.5em;padding:.5em .9em .45em;border:0;border-radius:0;background:none;outline:none;
 color:var(--js-text);font:700 var(--field)/1 var(--js-font);letter-spacing:.14em}
#overlay .bindings button::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--js-skew));border:1px solid var(--js-line);background:rgba(9,23,30,.6);transition:border-color .2s,background .2s,box-shadow .2s}
#overlay .bindings button:hover::before{border-color:rgba(197,250,105,.42);background:rgba(20,40,44,.72)}
#overlay .bindings button:focus-visible::before{border-color:var(--js-lime);box-shadow:0 0 0 1px var(--js-lime)}
#overlay .bindings button.listening{color:var(--js-lime)}
#overlay .bindings button.listening::before{border-color:var(--js-lime);background:rgba(197,250,105,.1)}

/* Map cards (setup) and mode cards (party) */
#overlay .map-choices{gap:.9em}
#overlay .map-card{gap:.5em;padding:.75em;border:1px solid var(--js-line);border-radius:0;background:rgba(9,23,30,.55);transition:border-color .2s,background .2s;
 clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
#overlay .map-card:hover{border-color:rgba(197,250,105,.42)}
#overlay .map-card:has(input:checked){border-color:var(--js-lime);background:rgba(197,250,105,.07);box-shadow:inset 3px 0 0 var(--js-lime)}
#overlay .map-card:has(input:focus-visible){box-shadow:inset 3px 0 0 var(--js-lime),inset 0 0 0 2px var(--js-lime)}
#overlay .map-card input{top:1.2em;right:1.2em}
#overlay .map-card svg{height:6em;border-radius:0}
#overlay .map-card strong{font:700 var(--field)/1.1 var(--js-font);letter-spacing:.14em;color:var(--js-text)}
#overlay .map-card span{font:500 calc(var(--field)*.92)/1.4 var(--js-font);letter-spacing:.02em;color:#91aba4}
#overlay .mode-grid{gap:.45em;max-height:38cqh;padding-right:.35em;scrollbar-color:rgba(197,250,105,.35) transparent}
#overlay .mode-group{margin:.8em 0 0!important;font:600 var(--head)/1 var(--js-font)!important;letter-spacing:.3em!important;color:var(--js-amber)!important;text-transform:uppercase}
#overlay .mode-group:first-child{margin-top:0!important}
#overlay .mode-card{gap:.2em .7em;padding:.65em .75em .6em;border:1px solid var(--js-line);border-radius:0;background:rgba(9,23,30,.55);outline:none;
 font:500 var(--field)/1.3 var(--js-font);transition:border-color .2s,background .2s;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
#overlay .mode-card b{font:italic 800 1.35em/1 var(--js-font);color:#6f8c86}
#overlay .mode-card strong{font:700 1em/1.1 var(--js-font);letter-spacing:.1em;color:var(--js-text);text-transform:uppercase}
#overlay .mode-card span{font:500 .86em/1.3 var(--js-font);letter-spacing:.02em;color:#8ea8a0}
#overlay .mode-card:hover{border-color:rgba(197,250,105,.42);background:rgba(20,40,44,.72)}
#overlay .mode-card:focus-visible{box-shadow:inset 0 0 0 2px var(--js-lime)}
#overlay .mode-card.selected{border-color:var(--js-lime);background:rgba(197,250,105,.08);box-shadow:inset 3px 0 0 var(--js-lime)}
#overlay .mode-card.selected:focus-visible{box-shadow:inset 3px 0 0 var(--js-lime),inset 0 0 0 2px var(--js-lime)}
#overlay .mode-card.selected b{color:var(--js-lime)}
#overlay .party-how{min-height:4.4em;margin:1em 0 0;padding:.8em 1em;border-left:3px solid var(--js-amber);background:rgba(9,23,30,.55);font:500 var(--field)/1.45 var(--js-font);color:#b9cbc4}
#overlay .party-how strong{font:700 1em/1.2 var(--js-font);letter-spacing:.14em;color:#ffd9a0;text-transform:uppercase}
#overlay .party-how em{font:500 .9em/1.3 var(--js-font);letter-spacing:.06em;color:var(--js-muted)}

/* ---------- Results: the preview's .board (skewed rows, winner row lime-tinted) ---------- */
#overlay .result-table{display:block;margin-top:1.2em;border-collapse:separate;font:600 var(--field)/1 var(--js-font);letter-spacing:.08em}
#overlay .result-table thead,#overlay .result-table tbody{display:flex;flex-direction:column;gap:.35em}
#overlay .result-table thead{margin-bottom:.35em}
#overlay .result-table tr{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 5.4em 3.4em 3.4em 4.8em;align-items:center;gap:.5em;padding:.6em 1.1em .55em;background:none}
#overlay .result-table thead tr{padding-top:0;padding-bottom:0}
#overlay .result-table tbody tr::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--js-skew));border:1px solid var(--js-line);background:rgba(9,23,30,.5)}
#overlay .result-table th,#overlay .result-table td{padding:0;border:0;text-align:right;font:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#overlay .result-table th{font:600 var(--small)/1 var(--js-font);letter-spacing:.28em;color:var(--js-muted);text-transform:uppercase}
#overlay .result-table th:first-child,#overlay .result-table td:first-child{text-align:left}
#overlay .result-table td:first-child span{display:inline-flex;align-items:center;gap:.55em;font-weight:700;letter-spacing:.1em}
#overlay .result-table td:first-child span::before{content:"";flex:none;width:4px;height:1em;background:currentColor}
/* The player's own row: lime outline and left bar; the winner's row adds the lime fill. */
#overlay .result-table tbody tr.you-row::before{border-color:rgba(197,250,105,.38);box-shadow:inset 3px 0 0 var(--js-lime)}
#overlay .result-table tbody tr:first-child::before{border-color:rgba(197,250,105,.5);background:rgba(197,250,105,.12)}
#overlay .result-table tbody tr:first-child td:nth-child(2){color:var(--js-lime);font-weight:700}
#overlay .round-stats{gap:1em;margin:1.3em 0;font:600 var(--small)/1.2 var(--js-font);letter-spacing:.24em;color:var(--js-muted);text-transform:uppercase}
#overlay .round-stats strong{margin-bottom:.2em;font:italic 800 calc(var(--base)*1.9)/1 var(--js-font);letter-spacing:.02em;color:var(--js-text)}

/* ---------- Online: room code (the preview's .room/.code) and lobby rows (the preview's .card) ---------- */
#overlay .room-code{position:relative;isolation:isolate;margin:calc(var(--base)*.6) 0 calc(var(--base)*1.3);padding:.52em .5em .16em .42em;border:0;border-radius:0;background:none;text-align:left;
 font:800 calc(var(--base)*3.6)/1 var(--js-font);letter-spacing:.14em;color:var(--js-text);white-space:nowrap;overflow:visible}
#overlay .room-code::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--js-skew));border:1px solid var(--js-line);background:rgba(9,23,30,.6)}
#overlay .room-code::after{content:"ROOM CODE";position:absolute;left:calc(var(--base)*1.5);top:calc(var(--base)*.8);font:600 var(--small)/1 var(--js-font);letter-spacing:.32em;color:var(--js-muted)}
#overlay .net-players{gap:.4em!important;font:700 var(--field)/1 var(--js-font)!important;letter-spacing:.1em;text-transform:uppercase}
#overlay .net-players>div{position:relative;isolation:isolate;gap:.8em;min-height:2.5em;padding:.5em 1em .45em 0!important;border:0;border-radius:0;background:none;color:var(--js-text)}
#overlay .net-players>div::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--js-skew));border:1px solid var(--js-line);background:rgba(9,23,30,.5)}
#overlay .net-players .player-chip{flex:none;align-self:stretch;width:6px;height:auto;margin:-.5em 0 -.45em;border-radius:0;transform:skewX(var(--js-skew))}
#overlay .net-players em{font:600 var(--small)/1 var(--js-font);letter-spacing:.26em;color:var(--js-muted)}
#overlay .net-players .bot-slot{color:#9fb3ad}
#overlay .net-players .open-slot{color:#56706a}
#overlay .net-players .open-slot::before{border-style:dashed;background:none}
#overlay .net-divider{margin:1.4em 0 1.1em;font:600 var(--head)/1 var(--js-font);letter-spacing:.3em;color:var(--js-muted)}
#overlay .net-settings{font:600 var(--field)/1.3 var(--js-font);letter-spacing:.1em;color:#b9cbc4;text-transform:uppercase}

/* ---------- Touch mode: 44 px targets, lighter effects, phone layouts ---------- */
.mobile-mode #overlay button,.mobile-mode #overlay select,.mobile-mode #overlay input:not([type=checkbox]):not([type=radio]){min-height:44px}
.mobile-mode #overlay .js-btn-primary,.mobile-mode #overlay .js-btn-ghost{align-items:center}
.mobile-mode #overlay .js-btn-ghost::before{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(9,23,30,.66)}
.mobile-mode #overlay .option input{width:22px;height:22px}
/* Portrait phones: logo on top, menu at the bottom within thumb reach (the preview's narrow layout). */
@media (max-aspect-ratio:23/20){
 .mobile-mode #overlay.scene-side{background:linear-gradient(180deg,rgba(9,23,30,0) 30%,rgba(9,23,30,.82) 58%,rgba(9,23,30,.94))}
 .mobile-mode #overlay.scene-side>section{width:100%;margin:0;padding:1em .6em calc(2.6em + env(safe-area-inset-bottom))}
 .mobile-mode #overlay>*{font-size:clamp(12px,3.6cqw,16px)}
 .mobile-mode #overlay .logo{margin-bottom:auto;text-align:center}
 .mobile-mode #overlay .word{font-size:clamp(48px,15cqw,84px)}
 .mobile-mode #overlay .tag{letter-spacing:.3em}
 .mobile-mode #overlay .home-menu{max-width:none;margin-top:1.5em}
 .mobile-mode #overlay .hint{margin-top:0;padding-top:1.2em;text-align:center}
 .mobile-mode #overlay .js-btn-primary:hover,.mobile-mode #overlay .js-btn-ghost:hover,.mobile-mode #overlay .js-btn-primary:focus-visible,.mobile-mode #overlay .js-btn-ghost:focus-visible{transform:translateX(6px)}
}
/* Landscape phones: logo and hint on the left, the menu on the right. */
@media (max-height:460px) and (min-aspect-ratio:3/2){
 .mobile-mode #overlay.scene-side{background-size:78% 100%}
 .mobile-mode #overlay.scene-side>section.home-col{display:grid;grid-template-columns:auto minmax(0,21em);grid-template-rows:auto 1fr;column-gap:2.4em;align-content:start;width:auto;max-width:100%;padding:0 0 .6em;margin-left:3cqw}
 .mobile-mode #overlay .home-col .logo{grid-column:1;grid-row:1;margin:.2em 0 0}
 .mobile-mode #overlay .home-col .home-menu{grid-column:2;grid-row:1/span 2;gap:6px}
 .mobile-mode #overlay .home-col .hint{grid-column:1;grid-row:2;align-self:end;padding-top:1em}
 .mobile-mode #overlay .home-menu .js-btn-primary{margin-bottom:0}
}
/* ---------- Scene columns: the online lobby (.lobby) and the results (.results) over their scenes ----------
   The preview's lobby and results: a left column on the wash, the scene on the right. cinematics lineup() frames the pilots in
   the right 58 % of a wide box (from 42 %) and the results winner sits right of centre with the gantry from 50 %, so the lobby
   column ends by 40 % and the results column by 45 %. A tall box (touch portrait) holds either scene in the top band, so the
   column starts below it. The column scrolls vertically inside the overlay and, where there is height for it, keeps the actions
   in view. After the touch section so it overrides its column. */
#overlay.scene-side:is(.lobby,.results)>section{width:min(30em,35cqw);margin:0 0 0 5cqw;padding:6cqh 0 4cqh}
#overlay.scene-side.results>section{width:min(32em,40cqw)}
#overlay.lobby .eyebrow{margin:1.5em 0 .8em}
#overlay.lobby .eyebrow:first-child{margin-top:0}
#overlay.lobby .room-code{margin:0 0 calc(var(--base)*1.2);font-size:calc(var(--base)*3.2)}
#overlay.lobby .net-name{display:flex;margin:0}
#overlay.lobby .net-players{grid-template-columns:minmax(0,1fr)}
#overlay.lobby .net-players>div{min-height:2.3em;min-width:0;white-space:nowrap}
/* Cards: accent strip, slot number, name, role; players get the preview's ready tint in their own accent. */
#overlay .net-players .slot-n{flex:none;min-width:1.4em;font:600 var(--small)/1 var(--js-font);letter-spacing:.1em;color:var(--js-muted)}
#overlay .net-players>div:not(.bot-slot):not(.open-slot)::before{border-color:color-mix(in srgb,var(--a) 55%,transparent);background:rgba(20,40,44,.65)}
#overlay .net-players>div:not(.bot-slot):not(.open-slot) .player-chip{box-shadow:0 0 14px var(--a)}
#overlay .net-players .bot-slot .player-chip{opacity:.6}
#overlay.lobby .net-fields{grid-template-columns:repeat(auto-fit,minmax(min(13em,100%),1fr));margin-top:0}
#overlay.lobby .net-settings{margin:0}
#overlay.lobby .party-how{min-height:0}
/* Results: the verdict headline, the winner line, the .board table (see Results above) and the actions. */
#overlay.results .eyebrow{margin:0}
#overlay.results .verdict{margin:.12em 0 .12em;font-size:4.6em;line-height:.86;overflow-wrap:anywhere}
#overlay.results .winner{display:flex;flex-wrap:wrap;align-items:center;gap:.3em .8em;margin:.3em 0 .2em;font:700 1.45em/1.1 var(--js-font);letter-spacing:.16em;color:var(--js-text);text-transform:uppercase}
#overlay.results .winner i{flex:none;width:1.4em;height:.3em;transform:skewX(var(--js-skew))}
#overlay.results .winner span{font:600 var(--small)/1 var(--js-font);letter-spacing:.28em;color:var(--js-muted)}
#overlay.results .round-stats{margin:1.1em 0 .6em}
#overlay.results .field-note{margin:0 0 .6em}
@container overlay (max-width:900px){#overlay.results .result-table tr{grid-template-columns:minmax(0,1fr) 4em 3em 3.6em 4.4em;gap:.35em;padding-inline:.8em}#overlay.results .result-table th{letter-spacing:.16em}}
#overlay.results .result-actions{grid-template-columns:repeat(auto-fit,minmax(min(12em,100%),1fr))}
#overlay.results .result-actions>.js-btn-primary{grid-column:1/-1}
/* Actions: the lobby's pair (COPY, START) and the results' REMATCH over NEXT and SETUP (or the room's lobby and leave). */
#overlay.lobby .net-lobby-actions{grid-template-columns:repeat(auto-fit,minmax(min(11em,100%),1fr));margin-top:.4em}
#overlay:is(.lobby,.results) :is(.net-lobby-actions,.result-actions)>button{min-height:max(3em,44px);align-items:center;justify-content:center;font-size:1.15em}
#overlay:is(.lobby,.results) :is(.net-lobby-actions,.result-actions)>button>span{margin-left:0!important}
/* Sticky where there is height for it. A focused field scrolls into view clear of the bar (up to two rows; --base is the
   column's em); without the bar nothing is reserved, so REMATCH taking focus doesn't scroll the headline away on a short box. */
@container overlay (min-height:420px){
 #overlay:is(.lobby,.results) :is(input,select,button):not(:is(.net-lobby-actions,.result-actions) *){scroll-margin-bottom:calc(var(--base)*11)}
 #overlay:is(.lobby,.results) :is(.net-lobby-actions,.result-actions){position:sticky;bottom:0;z-index:1;margin-top:0;padding:1.4em 0 1em;background:linear-gradient(rgba(9,23,30,0),rgba(9,23,30,.97) 1.4em)}
}
/* A small wide box (a phone-width window): the scene can't clear a usable column, so the column takes the width on its own wash.
   width:100%, not auto: the column is a flex:none item, so auto would grow it to its longest line and clip it sideways. */
@container overlay (max-width:620px){
 #overlay.scene-side:is(.lobby,.results)>section{width:100%;margin:0;padding:1.1em 1.2em 1.3em;background:rgba(9,23,30,.9)}
 /* The hover/focus nudge stays inside the column's padding (12px plus the skewed plate would poke out sideways). */
 #overlay.scene-side:is(.lobby,.results) :is(.js-btn-primary,.js-btn-ghost):not(:disabled):is(:hover,:focus-visible){transform:translateX(6px)}
}
@container overlay (max-aspect-ratio:23/20){
 #overlay.scene-side:is(.lobby,.results)>section{width:100%;margin:0;padding:50cqh 1em 1.6em;background:linear-gradient(180deg,rgba(9,23,30,0) 42cqh,rgba(9,23,30,.92) 49cqh)}
}
@media (max-aspect-ratio:23/20){.mobile-mode #overlay.scene-side:is(.lobby,.results){background:none}}
@media (max-height:460px) and (min-aspect-ratio:3/2){.mobile-mode #overlay.scene-side:is(.lobby,.results){background-size:52% 100%}}

/* ---------- WebGL notice (game-view.js unsupported()): a full-screen card over the inert page ---------- */
#webgl-notice{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;
 background:radial-gradient(90% 70% at 25% 15%,rgba(197,250,105,.07),transparent 60%),radial-gradient(80% 70% at 85% 95%,rgba(245,154,42,.08),transparent 60%),var(--js-ground);
 font:500 clamp(14px,1.05vw + 8px,18px)/1.45 var(--js-font);color:var(--js-text);--js-skew:-12deg}
#webgl-notice .webgl-card{position:relative;width:min(36em,100%);margin:auto;padding:2em 2.2em 2.1em;border:1px solid var(--js-line);
 background:linear-gradient(var(--js-lime),var(--js-lime)) 0 0/3.2em 2px no-repeat,
  linear-gradient(to top right,transparent calc(50% - 1px),var(--js-line) 50%,transparent calc(50% + 1px)) 100% 0/1.2em 1.2em no-repeat,
  linear-gradient(to top right,transparent calc(50% - 1px),var(--js-line) 50%,transparent calc(50% + 1px)) 0 100%/1.2em 1.2em no-repeat,
  linear-gradient(160deg,rgba(14,32,39,.95),rgba(9,23,30,.92));
 clip-path:polygon(0 0,calc(100% - 1.2em) 0,100% 1.2em,100% 100%,1.2em 100%,0 calc(100% - 1.2em))}
#webgl-notice .eyebrow{font:600 .78em/1.3 var(--js-font);letter-spacing:.3em;color:var(--js-muted);text-transform:uppercase}
#webgl-notice .eyebrow::before{content:"01";margin-right:.9em;color:var(--js-lime);font-weight:700;letter-spacing:.08em}
#webgl-notice h2{margin:.25em 0 .35em;font:italic 800 3.4em/.9 var(--js-font);letter-spacing:.01em;text-transform:uppercase}
#webgl-notice p{margin:0 0 1.1em;color:#a9bcb8}
#webgl-notice ol{margin:0 0 1.5em;padding:0;list-style:none;counter-reset:tip}
#webgl-notice li{position:relative;margin:.55em 0;padding-left:2.2em;color:#a9bcb8;counter-increment:tip}
#webgl-notice li::before{content:counter(tip,decimal-leading-zero);position:absolute;left:0;top:.05em;font-weight:700;letter-spacing:.08em;color:var(--js-lime)}
#webgl-notice li strong{color:var(--js-text);font-weight:700;letter-spacing:.04em}
#webgl-notice .webgl-actions{display:flex;flex-wrap:wrap;gap:.8em 1.4em;padding-left:.4em}
#webgl-notice .js-btn-primary,#webgl-notice .js-btn-ghost{border-radius:0;text-decoration:none;font-size:1.1em;letter-spacing:.12em}
#webgl-notice .js-btn-ghost{color:var(--js-text)}
/* Focus rings follow the skewed plate. */
#webgl-notice .js-btn-primary:focus-visible::before,#webgl-notice .js-btn-ghost:focus-visible::before{box-shadow:0 0 0 2px var(--js-ground),0 0 0 4px var(--js-lime)}
@media (max-width:480px){#webgl-notice .webgl-card{padding:1.5em 1.3em 1.6em}#webgl-notice h2{font-size:2.6em}}

/* Forced colours drop the plates and glows, so focus falls back to a system outline. */
@media (forced-colors:active){
 #overlay button:focus-visible,#overlay select:focus-visible,#overlay input:focus-visible,#overlay .map-card:has(input:focus-visible),#webgl-notice :focus-visible{outline:2px solid CanvasText;outline-offset:2px}
}
@media (prefers-reduced-motion:reduce){
 #overlay .js-btn-primary,#overlay .js-btn-ghost,#overlay .js-btn-primary::before,#overlay .js-btn-ghost::before,#overlay .js-btn-primary::after,#overlay .js-btn-ghost::after{transition:none}
}