/* ---------- the start screen (index.html #startOv; the owner's direction, 2026-10-13; the home hub since 2026-10-18) ----------
   The header bar the width of the window: the logo cut from the intro art (tools/cut_logo.py), the menu (Play, Watch,
   Leaderboard, How to play, Discord; the leaderboard only on a server with accounts: #startOv.acct-on), who I am (the
   profile chip, or Sign in / Create account) and a gear for the match settings. Under it the home hub (below). Every size
   scrolls with the window, never a second scroller; the intro art stays behind, softened. */
#startOv{display:block;padding:0;overflow-y:auto;overflow-x:hidden}
#startOv .startArt{filter:blur(.375rem) brightness(.5) saturate(1.1);transform:scale(1.04);opacity:1}
#startOv::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 120% 80% at 50% 0%,transparent 30%,#060a16cc 100%)}
/* the header */
.startTop{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:1.25rem;padding:.5rem clamp(1rem,2.5vw,2.5rem);min-height:4.75rem;
  background:linear-gradient(180deg,rgba(7,11,24,.94),rgba(9,14,30,.86));border-bottom:1px solid #2a3560;box-shadow:0 .375rem 1.5rem #0008;backdrop-filter:blur(.375rem)}
#startOv .startBrand{height:auto;margin:0;flex:none;line-height:0}
.startLogo{display:block;height:3.75rem;width:auto;filter:drop-shadow(0 .125rem .375rem #000a)}
.startNav{display:flex;gap:.25rem;margin-left:clamp(.5rem,2vw,2.5rem)}
#startOv .snav{display:inline-flex;align-items:center;gap:.5rem;width:auto;margin:0;padding:.625rem 1rem;border:1px solid transparent;border-radius:.625rem;background:none;color:#c9d4e6;
  font-family:var(--disp);font-size:.8125rem;font-weight:800;letter-spacing:.08em;box-shadow:none;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
#startOv .snav:hover{color:#fff;background:rgba(255,255,255,.05)}
#startOv .snav.discord{text-decoration:none;color:#9aa5ff}#startOv .snav.discord:hover{color:#d6daff;background:rgba(88,101,242,.16)}#startOv .snav.discord .dcIc{width:1.1em;height:1.1em;display:block}   /* the studio's Discord (2026-10-14): a link in the menu, in Discord's blurple */
#startOv .snav.on{color:var(--gold);border-color:#af955c;background:linear-gradient(180deg,rgba(255,201,74,.14),rgba(255,201,74,.04));box-shadow:inset 0 0 .75rem rgba(255,201,74,.12)}
.snIc{font-style:normal;font-size:.95em;filter:grayscale(.2)}
#startOv:not(.acct-on) #navBoard{display:none}
.startAcct{margin-left:auto;display:flex;align-items:center;min-width:0}
#startOv .startAcct .acctRow{margin:0;gap:.375rem;flex-wrap:nowrap}
#startOv .startAcct .acctMe{padding:.25rem .375rem;border:1px solid #344976;border-radius:.75rem;background:rgba(10,17,34,.85)}
#startOv .startAcct .acctChip{flex:none;max-width:15rem}
#startOv .startAcct .acctChip .fav{width:2.5rem;height:2.5rem}
#startOv .startAcct #acctSignOut{font-size:.6875rem;color:#8f9cc0;padding:0 .375rem}
#startOv .startAcct .acctBtn{flex:none;min-height:2.5rem;padding:.375rem .875rem;font-size:.75rem;color:#e8ecff}
#startOv .startAcct .acctBtn.primary{background:linear-gradient(#ffdc54,#ffb520);color:#171106;border-color:#ffe994}
/* the profile icon while nobody is signed in: the same chip, my Captain's face; with accounts, Create account beside it
   (Sign in is the chip itself) */
#startOv .startAcct{gap:.5rem}
#startOv .guestChip{flex:none;max-width:15rem;padding:.25rem .625rem .25rem .25rem;border:1px solid #344976;border-radius:.75rem;background:rgba(10,17,34,.85);color:var(--fg);cursor:pointer}
#startOv .guestChip:hover{border-color:#9fb4d8;background:#111a33}
#startOv .guestChip .fav{width:2.5rem;height:2.5rem;border-radius:50%;overflow:hidden;border:.125rem solid #58658b;flex:none}
#startOv .guestChip .fav img{width:100%;height:100%;object-fit:cover}
#startOv .guestChip small{color:var(--ki)}
#startOv .startAcct #acctIn{display:none}
#startOv .startGear{flex:none;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin:0;padding:0;border:1px solid #344976;border-radius:.75rem;background:rgba(10,17,34,.85);cursor:pointer}
#startOv .startGear img{width:1.75rem;height:1.75rem}
#startOv .startGear:hover{border-color:#9fb4d8}
#startOv .startTop .xBtn{position:static;flex:none;margin-left:.25rem}
/* ---------- the home hub (the owner's revamp, 2026-10-18: Overwatch's clarity, the anime's art) ----------
   A desktop fills the window: the hero is the window's height under the header, the Captain banner over the eight
   Captains on the left, the play panel on the right with its Play button always in reach (sticky at the panel's foot);
   under the hero, the arena gallery (big cards, the owner's art) and the cards round the game. Chamfered corners and
   slanted tags, the orange accent of Play. A tablet stacks the hero; a phone shows the Captains four across, small. */
#startOv{--acc:#ff9f1c;--acc2:#ffb547;--hubPanel:rgba(9,14,32,.94);--hubLine:#2a3766;--hubCard:#0e1530}
#startOv .startTop{min-height:4.4375rem}
#startOv:not(.ready) .startTop>*{visibility:hidden}
/* who I am, in the hub's look: the profile chip and the gear chamfered, Create account Play's slanted orange */
#startOv .startAcct .acctBtn{border-radius:0;font-family:var(--disp);font-style:italic;text-transform:uppercase;clip-path:polygon(.625rem 0,100% 0,calc(100% - .625rem) 100%,0 100%);padding:.375rem 1.125rem}
#startOv .startAcct .acctBtn.primary{background:var(--acc);border:0;color:#160c00}
#startOv .startAcct .acctBtn.primary:hover{filter:brightness(1.08)}
#startOv .guestChip,#startOv .startAcct .acctMe,#startOv .startGear{border-radius:0;border-color:#2a3766;background:#121a33;clip-path:polygon(.5rem 0,100% 0,100% calc(100% - .5rem),calc(100% - .5rem) 100%,0 100%,0 .5rem)}
#startOv .guestChip .fav{border-radius:0;border-color:#2a3766}
#startOv .guestChip small{color:var(--acc2)}   /* the header's bar at once, its logo, menu and buttons with the panels (startCheck: their pictures and faces in) */
#startOv .snav{font-style:italic}
#startOv .snav.on{color:var(--acc2);border-color:transparent;border-bottom:.1875rem solid var(--acc);border-radius:0;background:none;box-shadow:none}
.cham{clip-path:polygon(.875rem 0,100% 0,100% calc(100% - .875rem),calc(100% - .875rem) 100%,0 100%,0 .875rem)}
#startOv .startContent{width:100%;max-width:none;margin:0;padding:0}
#startOv .startBox{display:grid;grid-template-columns:minmax(0,1fr) clamp(23rem,30vw,31rem);gap:1.25rem;align-items:stretch;
  min-height:calc(100vh - 4.4375rem);min-height:calc(100dvh - 4.4375rem);width:100%;max-width:none;margin:0;padding:1.125rem clamp(1rem,3vw,3rem);border:0;border-radius:0;background:none;box-shadow:none}
#startOv .startBox::before{display:none}
.startMain{display:flex;flex-direction:column;gap:.75rem;min-width:0;min-height:0}
/* the Captain chosen: a banner framed on the face (ui.js renderCapHero) */
.capHero{position:relative;flex:none;display:flex;align-items:stretch;height:clamp(9.5rem,22vh,15rem);overflow:hidden;--aura:#ffc94a;
  background:linear-gradient(90deg,#0d1430,#121a3a);border:1px solid var(--hubLine);clip-path:polygon(.875rem 0,100% 0,100% calc(100% - .875rem),calc(100% - .875rem) 100%,0 100%,0 .875rem)}
.capHero::after{content:"";position:absolute;inset:auto 0 0 0;height:.1875rem;background:linear-gradient(90deg,var(--aura),transparent 70%)}
.chBanner{flex:none;height:100%;aspect-ratio:12/5;object-fit:cover;object-position:50% 30%;display:block;-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}
.chText{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.375rem;padding:1rem 1.5rem 1rem .5rem}
.chLbl{font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc2)}
.chName{font-family:var(--disp);font-style:italic;font-size:clamp(1.75rem,3vw,3.25rem);line-height:.9;text-transform:uppercase;color:#fff;text-shadow:0 .125rem .75rem #000a;overflow-wrap:anywhere}
.chChips{display:flex;flex-wrap:wrap;gap:.375rem}
.chChips i{font-style:normal;padding:.3125rem 1.25rem;font-size:.8125rem;background:rgba(255,255,255,.08);color:#dfe4ff;clip-path:polygon(.875rem 0,100% 0,calc(100% - .875rem) 100%,0 100%)}
.chChips i.kind{background:var(--acc);color:#160c00;font-family:var(--disp);font-style:italic;text-transform:uppercase;font-size:.9375rem}
/* the Captains: eight cards, four across */
#startOv .startPick{flex:1;display:flex;min-height:0;padding:0;border:0;background:none;box-shadow:none}
#startOv .capPick{flex:1;display:flex;flex-direction:column;gap:.625rem;margin:0;min-height:0}
.capHead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem}
#startOv .capPick h2{margin:0;font-family:var(--disp);font-style:italic;font-size:clamp(1.375rem,1.9vw,1.875rem);letter-spacing:.01em;text-transform:uppercase}
#startOv .capPick h2::before{display:none}
#startOv .capPick h2 em{font-style:italic;color:var(--acc2)}
#startOv .capLead{margin:0;font-size:.8125rem;color:#9aa6d6}
#startOv .caps{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(9rem,1fr);gap:.75rem;min-height:0}
#startOv .caps .cap{position:relative;width:auto;min-height:9rem;margin:0;padding:0;overflow:hidden;text-align:left;border:.1875rem solid #22305c;border-radius:0;background:var(--hubCard);color:var(--fg);cursor:pointer;
  clip-path:polygon(.875rem 0,100% 0,100% calc(100% - .875rem),calc(100% - .875rem) 100%,0 100%,0 .875rem);transition:border-color .15s}
#startOv .caps .cap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block;filter:saturate(.8) brightness(.82);transition:transform .35s ease,filter .35s ease}
#startOv .caps .cap::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,11,24,.95) 0%,rgba(7,11,24,.15) 50%,transparent 70%)}
#startOv .caps .cap:hover{border-color:#5a6aa8}
#startOv .caps .cap:hover img{transform:scale(1.06);filter:none}
#startOv .caps .cap.on{border-color:var(--acc)}
#startOv .caps .cap.on img{filter:none}
.capTag{display:none;position:absolute;z-index:1;right:.625rem;top:.625rem;padding:.25rem 1rem;background:var(--acc);color:#160c00;font-family:var(--disp);font-style:italic;font-size:.8125rem;text-transform:uppercase;clip-path:polygon(.75rem 0,100% 0,calc(100% - .75rem) 100%,0 100%)}
.cap.on .capTag{display:block}
.capTx{position:absolute;z-index:1;left:.75rem;right:.75rem;bottom:.625rem;display:flex;flex-direction:column;gap:.125rem}
.capTx .capNm{font-family:var(--disp);font-style:italic;font-size:clamp(1rem,1.45vw,1.375rem);line-height:.95;text-transform:uppercase;color:#fff;text-shadow:0 .0625rem .375rem #000}
.capTx small{font-size:.75rem;color:#c8cff2}
#startOv .capHint{margin:0;font-size:.75rem;color:#9aa6d6}
#startOv .startPanel{scroll-margin-top:5rem}   /* (under the sticky header when the menu's Play scrolls to it) */
/* the play panel */
#startOv .startPanel{position:relative;top:auto;display:flex;flex-direction:column;gap:.75rem;min-height:0;padding:1.25rem 1.25rem 0;border:1px solid var(--hubLine);border-radius:0;background:var(--hubPanel);box-shadow:0 .75rem 2.5rem #05091799;
  clip-path:polygon(.875rem 0,100% 0,100% calc(100% - .875rem),calc(100% - .875rem) 100%,0 100%,0 .875rem)}
.spHead{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.spHead h2{margin:0;font-family:var(--disp);font-style:italic;font-size:2.125rem;line-height:1;text-transform:uppercase}
#startOv .spHead .acctLink{font-size:.8125rem;color:var(--acc2)}
.spRulesTx{margin:0;padding:.625rem .75rem;font-size:.8125rem;line-height:1.5;color:#c8d2f0;background:rgba(63,214,255,.06);border:1px solid rgba(63,214,255,.3)}
.modes{display:flex;flex-direction:column;gap:.5rem}
#startOv .modes .mode{display:flex;align-items:center;gap:.75rem;width:100%;margin:0;padding:.5625rem .875rem;text-align:left;font:inherit;text-transform:none;letter-spacing:0;color:var(--fg);background:#10172e;border:.125rem solid #22305c;border-radius:0;box-shadow:none;cursor:pointer;
  clip-path:polygon(.875rem 0,100% 0,100% calc(100% - .875rem),calc(100% - .875rem) 100%,0 100%,0 .875rem);transition:border-color .15s,background .15s}
#startOv .modes .mode:hover{border-color:#5a6aa8}
#startOv .modes .mode.on{border-color:var(--acc);background:linear-gradient(120deg,rgba(255,159,28,.2),#121a33)}
#startOv .modes .mode.locked .mdIc{filter:grayscale(1);opacity:.6}
#startOv .modes .mode.locked .mdTx b::after{content:"🔒";margin-left:.5rem;font-size:.8em;font-style:normal}
.mdIc{flex:none;width:2.75rem;height:2.75rem;display:grid;place-items:center;font-size:1.375rem;background:#1a2346;clip-path:polygon(.5rem 0,100% 0,100% calc(100% - .5rem),calc(100% - .5rem) 100%,0 100%,0 .5rem)}
.mode.on .mdIc{background:var(--acc)}
.mdTx{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.mdTx b{font-family:var(--disp);font-style:italic;font-size:1.375rem;line-height:1;text-transform:uppercase}
.mdTx small{font-size:.8125rem;color:#9aa6d6}
.mdTx small i{display:inline-block;width:.5rem;height:.5rem;margin-right:.375rem;border-radius:50%;background:var(--rk)}
#startOv .modes .mode.learn{background:rgba(63,214,255,.06);border-color:rgba(63,214,255,.35)}
#startOv .modes .mode.learn:hover{border-color:#3fd6ff}
#startOv .modes .mode.learn .mdIc{background:rgba(63,214,255,.18)}
#startOv #tourBtn.nudge{animation:tourNudge 1.6s ease-in-out infinite}
#startOv .acctNote{margin:0;font-size:.8125rem}
#startOv .nameField{flex:none}
#startOv .nameField>span{padding-left:0;font-size:.75rem;margin-bottom:.3125rem}
#startOv .nameField input{width:100%;height:2.875rem;font:inherit;font-size:1rem;padding:.5rem .75rem;border-radius:0;border:1px solid #344976;background:#080e1d;color:var(--fg)}
.nameNote{margin:-.375rem 0 0;font-size:.8125rem;color:#ffb0a3}
#startOv .matchSettings{margin-top:0;padding-top:.625rem}
/* Casual's ways in: Quick match, Create room, Join room (ui.js renderModes), and a room's code */
.roomPick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:.1875rem;background:#0b1129;border:1px solid #2a3766}   /* one segmented control: three plain tabs in a frame, the chosen one filled */
#startOv .roomPick .rp{width:auto;min-height:2.5rem;margin:0;padding:0 .375rem;border:0;border-radius:0;box-shadow:none;cursor:pointer;background:transparent;color:#c8cff2;font-family:var(--disp);font-style:italic;font-size:.875rem;line-height:1.1;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;transition:background .15s,color .15s}
#startOv .roomPick .rp:hover{background:#1a2346;color:#fff}
#startOv .roomPick .rp:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:-.125rem}
#startOv .roomPick .rp.on{background:var(--acc);color:#160c00}
#startOv .roomField{flex:none}
#startOv .roomField>span{display:block;font-size:.75rem;color:#c4cde4;margin-bottom:.3125rem}
#startOv .roomField input{display:block;width:100%;height:3.25rem;margin:0;padding:0 .875rem;border:1px solid #344976;border-radius:0;background:#080e1d;color:#fff;font-family:var(--disp);font-style:normal;font-size:1.625rem;letter-spacing:.3em;text-transform:uppercase;box-sizing:border-box}
#startOv :is(.roomField,.nameField) input:focus,#startOv :is(.roomField,.nameField) input:focus-visible{outline:none;border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}   /* the focus inside the field's own edge: never over its label or its neighbours */
#startOv .roomField input::placeholder{font-family:var(--body);font-size:1rem;letter-spacing:.04em;text-transform:none;color:#56618f}
/* the lobby waiting area: what it is, the room's code to share, the eight seats as cards, Start and Leave */
#startOv .lobbyBox{display:flex;flex-direction:column;gap:.625rem;padding:.875rem;background:#0b1129;border:1px solid var(--hubLine);
  clip-path:polygon(.875rem 0,100% 0,100% calc(100% - .875rem),calc(100% - .875rem) 100%,0 100%,0 .875rem)}
#startOv .startPanel .ascStart{display:none}   /* Ascension's two cards: their rank and title are the Ranked and Casual mode cards' own lines now (account.js renderAcct) */
#startOv .modes .mode.emb .mdIc{background:transparent;width:3rem;height:3rem}   /* my rank's emblem in its icon's place */
#startOv .modes .mode .mdIc[style*="--mdc"]{background:var(--mdc);color:#071318}   /* my casual title's colour */
.startPanel.busy :is(.roomPick,.roomField,#roomNote,.nameField,.nameNote,.acctNote,.ascStart){display:none!important}   /* in a lobby or a game: the lobby alone */
.lobbyKind{font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc2)}
#startOv .lobbyBox .onlineStatus{margin:-.375rem 0 0;min-height:0;font-family:var(--body);font-size:.875rem;color:#dfe4ff}
.roomCode{display:flex;flex-direction:column;align-items:flex-start;gap:.375rem;padding:.75rem .875rem;background:linear-gradient(120deg,rgba(255,159,28,.18),#121a33);border-left:.1875rem solid var(--acc)}
.rcLab{font-size:.75rem;color:#c8cff2}
.roomCode b{font-family:var(--disp);font-style:italic;font-size:2.75rem;line-height:1;letter-spacing:.3em;color:#fff;user-select:all}
.rcBtns{display:flex;flex-wrap:wrap;gap:.375rem}
#startOv .rcBtns button{width:auto;min-height:2.25rem;margin:0;padding:0 1rem;border:0;border-radius:0;box-shadow:none;cursor:pointer;background:#1a2346;color:#dfe4ff;font-family:var(--disp);font-style:italic;font-size:.8125rem;text-transform:uppercase;clip-path:polygon(.5rem 0,100% 0,calc(100% - .5rem) 100%,0 100%)}
#startOv .rcBtns button:hover{background:#243063;color:#fff}
/* two even columns whatever the names (minmax(0,1fr): a long name ellipsizes in its own seat, never widening its column),
   square seats (a chamfer's clip cut the border off its corner), and room for the italic's slant and descenders */
#startOv .lobbySeats{margin:0;gap:.375rem;grid-template-columns:repeat(2,minmax(0,1fr))}
#startOv .lobbySeats li{min-height:2.75rem;padding:.25rem .5rem .25rem .25rem;border:1px solid #22305c;border-radius:0;background:#10172e;font-size:.875rem;min-width:0}
#startOv .lobbySeats li .n{min-width:1.25rem;text-align:center;font-style:italic;color:#56618f}
#startOv .lobbySeats li .fav{width:2rem;height:2rem;border-radius:0;border:0}
#startOv .lobbySeats li .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4;padding:.125rem .25rem .125rem 0}
#startOv .lobbySeats li.me{border-color:var(--acc);color:#fff;background:linear-gradient(120deg,rgba(255,159,28,.18),#10172e)}
#startOv .lobbySeats li.host .who::before{content:"👑 "}
#startOv .lobbySeats li.cpu{border-style:dashed;background:transparent;color:#56618f}
#startOv #onlineStart{width:100%;min-height:3.75rem;margin:0;border:0;border-radius:0;background:var(--acc);color:#160c00;box-shadow:0 .5rem 2rem rgba(255,159,28,.35);font-family:var(--disp);font-style:italic;font-size:1.5rem;text-transform:uppercase;cursor:pointer;
  clip-path:polygon(1.125rem 0,100% 0,calc(100% - 1.125rem) 100%,0 100%)}
#startOv #onlineStart:disabled{filter:grayscale(.85) brightness(.7)}
#startOv #onlineLeave{width:100%;min-height:2.75rem;margin:0;border:1px solid #3a4880;border-radius:0;background:transparent;color:#c8cff2;font-family:var(--disp);font-style:italic;text-transform:uppercase;cursor:pointer}
#startOv #onlineLeave:hover{border-color:#ff8a7a;color:#ffb0a3}
/* Play: always in reach at the panel's foot */
.playDock{position:sticky;bottom:0;z-index:2;display:flex;flex-direction:column;gap:.375rem;margin:auto -1.25rem 0;padding:.875rem 1.25rem 1rem;background:#090e20;border-top:1px solid #2a3766}   /* solid, with an edge: what scrolls under it never shows through */
#startOv{scroll-padding-bottom:9.5rem}   /* a field focused or scrolled to stays clear of the Play bar */
.startPanel:not([data-mode="ranked"]) #acctNote{display:none}   /* the note is about ranked alone (an account, a confirmed email, a season): only with Ranked picked */
#startOv .playGo{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;min-height:4.75rem;margin:0;padding:0 1.5rem;border:0;border-radius:0;background:var(--acc);color:#160c00;box-shadow:0 .5rem 2.5rem rgba(255,159,28,.4);cursor:pointer;
  clip-path:polygon(1.375rem 0,100% 0,calc(100% - 1.375rem) 100%,0 100%);transition:filter .15s,transform .15s}
#startOv .playGo:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-.0625rem)}
#startOv .playGo:disabled,#startOv .playGo[aria-disabled="true"]{filter:grayscale(.85) brightness(.7);cursor:not-allowed}
#startOv .playGo svg{width:1.5rem;height:1.5rem;fill:currentColor;flex:none}
#playLbl{font-family:var(--disp);font-style:italic;font-size:clamp(1.375rem,2.1vw,2.125rem);line-height:1;text-transform:uppercase;white-space:nowrap}
.playNote{margin:0;font-size:.8125rem;color:#9aa6d6;text-align:center}
#startOv .playDock #continueBtn{display:flex;align-items:center;justify-content:center;gap:.625rem;width:100%;min-height:3.25rem;margin:0;padding:0 1.25rem;border:0;border-radius:0;box-shadow:none;cursor:pointer;
  background:linear-gradient(120deg,rgba(255,159,28,.3),#16204a);color:#ffd28a;font-family:var(--disp);font-style:italic;font-size:1.125rem;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
  clip-path:polygon(1.125rem 0,100% 0,calc(100% - 1.125rem) 100%,0 100%);transition:filter .15s}   /* a solo run put away: the slanted bar of Play, in its quieter colours */
#startOv .playDock #continueBtn::before{content:"";width:.875rem;height:.875rem;flex:none;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
#startOv .playDock #continueBtn:hover:not(:disabled){filter:brightness(1.18)}
/* round the game */
.startStrip{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;padding:2.5rem clamp(1rem,3vw,3rem) 3.5rem;background:#0a1027}
#startOv .ssCard{display:flex;flex-direction:column;gap:.5rem;width:auto;margin:0;padding:1.375rem;text-align:left;font:inherit;text-transform:none;letter-spacing:0;text-decoration:none;color:var(--fg);border:1px solid #3b2f6a;border-radius:0;background:linear-gradient(120deg,#1d1435,#101836);box-shadow:none;cursor:pointer;
  clip-path:polygon(.875rem 0,100% 0,100% calc(100% - .875rem),calc(100% - .875rem) 100%,0 100%,0 .875rem)}
#startOv .ssCard.watch{border-color:#1f4a5a;background:linear-gradient(120deg,#0f2030,#101836)}
#startOv .ssCard.guide{border-color:#275a40;background:linear-gradient(120deg,#13261d,#101836)}
#startOv .ssCard:hover{filter:brightness(1.12)}
.ssLab{font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#ffcf6a}
.ssCard.watch .ssLab{color:#3fd6ff}.ssCard.guide .ssLab{color:#7be3a6}
.ssCard b{font-family:var(--disp);font-style:italic;font-size:1.75rem;line-height:.95;text-transform:uppercase}
.ssCard small{font-size:.875rem;color:#c8cff2}
#startOv:not(.acct-on) #boardCard{display:none}
#startOv:not(.acct-on) .startStrip{grid-template-columns:repeat(2,minmax(0,1fr))}
#startOv .startFoot{max-width:none;margin:0;padding:1.5rem clamp(1rem,3vw,3rem);text-align:center;border-top:1px solid #1a2348;background:#060914}
#startOv .startFoot p{max-width:100ch;margin:0 auto .5rem}
#startOv .startPanel .ascStart{margin:0}
/* a short desktop window: the hero grows past the window rather than squeezing the Captains */
@media (min-width:1100px) and (max-height:760px){#startOv .startBox{min-height:0}#startOv .caps{grid-auto-rows:9.5rem}}
/* a tablet: the hero stacked, the Captains four across */
@media (max-width:1099px){
  #startOv .startBox{grid-template-columns:1fr;min-height:0}
  #startOv .caps{grid-auto-rows:minmax(10rem,auto)}
  .startNav{margin-left:.5rem}
  #startOv .snav{padding:.5rem .5rem;font-size:.6875rem;gap:.375rem}   /* four tabs in a phone's width (LEARN ran off the edge with no sign the row scrolls, 2026-10-19) */
}
/* a phone: the header in two rows (the logo, who I am and the gear; then the menu as a strip of chips) */
@media (max-width:760px){
  .startTop{flex-wrap:wrap;gap:.5rem .625rem;padding:.5rem .75rem .375rem;min-height:0}
  .startLogo{height:2.75rem}
  .startAcct{margin-left:auto}
  #startOv .startAcct .acctChip{max-width:10rem}
  #startOv .startAcct .acctChip .acctWho small{display:none}
  #startOv .startAcct #acctSignOut{display:none}
  #startOv .startAcct .acctBtn{min-height:2.25rem;padding:.25rem .5rem;font-size:.625rem}
  #startOv .guestChip{padding:.1875rem}#startOv .guestChip .acctWho{display:none}
  #startOv .startGear{width:2.5rem;height:2.5rem}
  .startNav{order:5;flex:1 1 100%;margin:0;overflow-x:auto;scrollbar-width:none;gap:.25rem;padding-bottom:.125rem}
  .startNav::-webkit-scrollbar{display:none}
  #startOv .snav{flex:none;padding:.375rem .625rem;font-size:.6875rem;border:1px solid #2c3a66;background:rgba(10,17,34,.7)}
  #startOv .startBox{padding:.75rem 1rem;gap:.875rem}
  .capHero{height:10.5rem}   /* the banner the box's width, the name over its foot */
  .chBanner{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-position:30% 30%;-webkit-mask-image:none;mask-image:none}
  .chText{position:absolute;left:0;right:0;bottom:0;gap:.25rem;padding:2rem .875rem .75rem;background:linear-gradient(0deg,rgba(7,11,24,.95) 35%,transparent)}
  .chName{font-size:1.5rem}
  .chChips i:not(.kind){display:none}
  .capHead{flex-direction:column}
  #startOv .caps{gap:.375rem;grid-auto-rows:auto}
  #startOv .caps .cap{min-height:0;aspect-ratio:3/4;border-width:.125rem}
  .capTag{display:none!important}
  .capTx{left:.375rem;right:.375rem;bottom:.375rem}
  .capTx .capNm{font-size:.8125rem}
  .capTx small{display:none}
  #startOv .startPanel{padding:1rem 1rem 0}
  .playDock{margin:auto -1rem 0;padding:.75rem 1rem .875rem}
  #startOv .playGo{min-height:4rem}
  #startOv .roomPick .rp{font-size:.75rem;padding:0 .25rem}
  .roomCode b{font-size:2.25rem}
  .startStrip,#startOv:not(.acct-on) .startStrip{grid-template-columns:1fr}
  .startStrip{padding:1.5rem 1rem 2rem}
}
@media (max-width:420px){ .startLogo{height:2.25rem} #startOv .startAcct .acctChip .acctWho{display:none} #startOv .snav .snIc{display:none} }   /* the tabs' icons go on the narrowest phones, so all four tabs stand in the row */
@media (prefers-reduced-motion:reduce){#startOv .snav,#startOv .startGear,#startOv .caps .cap img{transition:none}#startOv .caps .cap:hover img{transform:none}}
.startGuideLinks{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0 auto 1rem}   /* the public guides (docs/SEARCH_AND_GROWTH.md), as the hub's slanted chips */
#startOv .startGuideLinks a{padding:.5rem 1.25rem;background:#141d3d;color:#dfe4ff;font-family:var(--disp);font-style:italic;font-size:.8125rem;text-transform:uppercase;text-decoration:none;letter-spacing:.02em;clip-path:polygon(.625rem 0,100% 0,calc(100% - .625rem) 100%,0 100%)}
#startOv .startGuideLinks a:hover{background:#243063;color:#fff}