/* ---------- Archivo (variable: wdth 62-125, wght 400-900), self-hosted from Google Fonts (v25, OFL) so the game needs no network. only the latin subset: no text the game can show (names are ASCII) falls in latin-ext / vietnamese ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ---------- Lists '72: tokens. no red, no black (see DESIGN.md) ---------- */
:root{--navy:#1f2d5c;--navy2:#3b4a7e;--sky:#3a9ad9;--skyD:#1f74b8;--skyL:#cfe7f7;--skyLL:#ecf5fc;--green:#2e9a4f;--greenD:#1f7038;--lime:#8cc63f;
  --yellow:#f6c700;--orange:#f08a1c;--orangeD:#c8650a;--violet:#6a4fa3;--silver:#c9ced3;--silverL:#e9ecef;--silverD:#7d858d;--paper:#f6f7f8;
  /* old names, still used by markup built in script */
  --ink:var(--navy);--vel:#fff;--vel2:var(--silverL);--gold:var(--yellow);--goldD:var(--orange);--verm:var(--orange);--vermD:var(--orangeD);--lapis:var(--sky);--lapisD:var(--skyD);--verd:var(--green);--verdD:var(--greenD);
  --band:linear-gradient(90deg,var(--sky) 0 20%,var(--green) 20% 40%,var(--lime) 40% 60%,var(--yellow) 60% 80%,var(--orange) 80% 100%);
  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#dfeef8;overflow:hidden;color:var(--navy);font-family:var(--sans);font-synthesis:none;user-select:none;-webkit-user-select:none;-webkit-font-smoothing:antialiased}
canvas{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;transition:filter .12s}
.sc{font-stretch:78%;font-weight:700;text-transform:uppercase;letter-spacing:.035em}
[hidden]{display:none!important}
kbd{font-family:var(--sans);font-stretch:78%;font-weight:700;font-size:.82em;letter-spacing:.03em;background:var(--navy);color:#fff;padding:.08em .45em;border-radius:2px;margin:0 2px;white-space:nowrap;text-transform:uppercase}
.pg{display:inline-block;width:1.4em;height:1.4em;vertical-align:-.32em;flex:none}
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none}

/* ---------- HUD: two scoreboard plates and a round box ---------- */
#hud{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;
  padding:calc(12px + var(--sat)) calc(16px + var(--sar)) 12px calc(16px + var(--sal));gap:14px;pointer-events:none;opacity:0;transition:opacity .4s}
#hud.on{opacity:1}
.plate{flex:1;max-width:40vw;--c:var(--orange);--c2:var(--orangeD);background:#fff;padding:7px 10px 10px;border-top:7px solid var(--c)}
.plate.right{--c:var(--sky);--c2:var(--skyD);text-align:right}
.nm{font-size:clamp(13px,1.55vw,19px);color:var(--navy);margin-bottom:6px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nm small{font-size:.72em;color:var(--silverD);letter-spacing:.06em}
.qb{display:inline-block;font-style:normal;font-size:.7em;line-height:1;padding:.22em .45em;margin:0 .35em;vertical-align:.1em;background:var(--lime);color:var(--navy)}
.qb.used{background:var(--silverL);color:var(--silver)}
.bar{position:relative;height:clamp(20px,2.9vw,34px);background:var(--silverL)}
.bar i,.sta i,.pcd i{position:absolute;inset:0;transform-origin:left center;display:block;will-change:transform}
.right .bar i,.right .sta i,.right .pcd i{transform-origin:right center}
.ghost{background:repeating-linear-gradient(135deg,rgba(31,45,92,.55) 0 3px,rgba(31,45,92,.12) 3px 7px)}
.fill{background:var(--c)}
/* ten blocks, cut by white gaps */
.bar::after,.sta::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 3px),#fff calc(10% - 3px) 10%)}
.lb{position:absolute;top:50%;transform:translateY(-50%);left:-3.9em;width:3.5em;font-size:clamp(9px,.95vw,11.5px);color:var(--silverD);font-weight:700;font-stretch:78%;text-transform:uppercase;letter-spacing:.06em;text-align:right}
.right .lb{left:auto;right:-3.9em;text-align:left}
.sta{position:relative;height:clamp(12px,1.7vw,20px);margin:7px 0 0 3.9em;background:var(--silverL);width:calc(90% - 3.9em)}
.right .sta{margin:7px 3.9em 0 auto}
.sta i{background:var(--green)}
.sta.low i{background:var(--orange);animation:lowp .5s steps(2,jump-none) infinite}
.sta.ex i{background:var(--orange)}
.sta.ex{box-shadow:0 0 0 3px var(--orange)}
@keyframes lowp{50%{opacity:.45}}
.pcd{position:relative;height:clamp(7px,1vw,11px);margin:6px 0 0 3.9em;background:var(--silverL);width:calc(56% - 3.9em)}
.right .pcd{margin:6px 3.9em 0 auto}
.pcd i{background:var(--silver)}
.pcd.rdy i{background:var(--sky)}
.pcd.nope{box-shadow:0 0 0 3px var(--orange)}
#mid{text-align:center;color:var(--navy);min-width:96px;background:#fff;padding:7px 12px 9px;border-top:7px solid var(--navy)}
#rnd{font-size:clamp(14px,1.8vw,22px);line-height:1}
#pips{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:7px;flex-wrap:wrap;max-width:150px}
.pip{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2.5px var(--navy)}
.pip.w{background:var(--navy)}
.pip.cur{box-shadow:inset 0 0 0 2.5px var(--orange)}
#pips .gap{width:12px}
#timer{font-size:clamp(15px,1.9vw,23px);margin-top:7px;font-variant-numeric:tabular-nums;line-height:1.1;font-weight:800}
#timer small{display:block;font-size:.58em;color:var(--silverD);font-weight:700}
#watchers{font-size:clamp(10px,1.1vw,13px);color:var(--sky);margin-top:5px}
#ping{font-size:clamp(9px,1vw,12px);color:var(--sky);opacity:.75;margin-top:3px;font-variant-numeric:tabular-nums}
body.playing #mute{opacity:0}
#mute{transition:opacity .4s}
#toast{position:fixed;left:50%;bottom:calc(58px + var(--sab));transform:translateX(-50%);padding:8px 16px;background:var(--navy);color:#fff;font-size:clamp(12px,1.4vw,15px);opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap;z-index:9}
#toast.on{opacity:1}
#legend{position:fixed;bottom:calc(10px + var(--sab));left:50%;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:3px 14px;max-width:calc(100vw - 24px);
  padding:6px 12px;background:#fff;color:var(--navy);font-size:clamp(10.5px,1.08vw,13px);opacity:0;transition:opacity .5s;pointer-events:none}
#legend.on{opacity:.94}
#legend span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
#legend kbd{margin:0}

/* narrow screens: the plates lose their labels, not their bars */
@media (max-width:640px){
  #hud{gap:6px;padding:calc(8px + var(--sat)) calc(8px + var(--sar)) 8px calc(8px + var(--sal))}
  .plate{max-width:none;padding:5px 6px 7px;border-top-width:5px;min-width:0}
  .nm{font-size:11px;margin-bottom:4px}.nm small{display:none}
  .lb{display:none}
  .sta,.pcd{margin-left:0;width:92%}.right .sta,.right .pcd{margin-right:0}
  .sta{margin-top:5px}.pcd{margin-top:4px;width:60%}
  #mid{min-width:0;padding:5px 7px 6px;border-top-width:5px}#rnd{font-size:12px}#pips{gap:4px;margin-top:5px}.pip{width:9px;height:9px;box-shadow:inset 0 0 0 2px var(--navy)}.pip.w{background:var(--navy)}
  #timer{font-size:13px}
}
/* banners & callouts: solid blocks that wipe in */
#banner,#callout{position:fixed;left:0;right:0;text-align:center;pointer-events:none;opacity:0;white-space:nowrap}
.bk{display:inline-block;background:var(--sky);color:#fff;padding:.04em .32em .08em;font-weight:900;font-stretch:72%;text-transform:uppercase;letter-spacing:-.005em;line-height:1}
#banner{top:30%;font-size:clamp(40px,9vw,120px)}
#banner small{display:table;margin:.12em auto 0;font-size:.2em;background:var(--navy);color:#fff;padding:.4em .9em;font-weight:700;font-stretch:78%;text-transform:uppercase;letter-spacing:.06em}
#banner.show{animation:bn 1.7s both}
#callout{top:21%;font-size:clamp(22px,4.2vw,54px)}
#callout .bk{color:var(--navy)}
#callout.show{animation:pop .95s both}
@keyframes bn{0%{opacity:1;clip-path:inset(0 100% 0 0)}9%{clip-path:inset(0 0 0 0)}82%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:1;clip-path:inset(0 0 0 100%)}}
@keyframes pop{0%{opacity:0;transform:translateY(14px)}10%{opacity:1;transform:none}78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}

/* ---------- sheets: white panels with the colour band ---------- */
#sheet{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(31,45,92,.32);transition:opacity .35s,visibility .35s}
#sheet.off{opacity:0;pointer-events:none;visibility:hidden}
/* the title leaves the duel in view: the programme sits on the left, the bout plays on the right */
#sheet.ttl{justify-content:flex-start;padding-left:max(16px,var(--sal),min(6vw,calc(11vw - 50px)));background:linear-gradient(90deg,rgba(236,245,252,.7),rgba(236,245,252,0) 58%)}
.page{position:relative;width:min(760px,92vw);max-width:calc(100vw - var(--sal) - var(--sar) - 8px);max-height:min(94vh,calc(100dvh - var(--sat) - var(--sab) - 12px));overflow:auto;
  padding:34px 34px 24px;background:#fff;color:var(--navy);box-shadow:0 22px 50px -24px rgba(31,45,92,.55)}
.page::before{content:'';position:absolute;left:0;right:0;top:0;height:9px;background:var(--band)}
#page{width:min(560px,92vw)}
#sheet.ttl #page{width:clamp(340px,40vw,460px);padding:clamp(26px,4.4vh,40px) 30px clamp(16px,3vh,26px)}
#page.help{width:min(860px,94vw)}
.page h1{margin:0;text-align:left;text-wrap:balance;font-weight:850;font-stretch:96%;text-transform:lowercase;letter-spacing:-.025em;font-size:clamp(30px,min(5.4vw,9vh),54px);line-height:.98}
.help h1{font-size:clamp(28px,min(4.6vw,7.4vh),46px)}
.page h1 b{color:var(--sky);font-weight:850}
.page h1.ttl{font-size:clamp(58px,min(9.4vw,14vh),112px);line-height:.84;letter-spacing:-.045em}
.page h1.ttl small{display:block;font-size:.42em;letter-spacing:-.02em;color:var(--silverD);margin-bottom:.06em}
.kicker{font-size:12px;color:var(--silverD);margin-bottom:10px;display:flex;gap:10px;align-items:center}
.kicker b{color:var(--navy);font-weight:800}
.page .sub{text-align:left;text-wrap:balance;margin:10px 0 14px;font-size:clamp(13.5px,min(1.6vw,2.8vh),16.5px);line-height:1.32;color:var(--navy2)}
.rule{height:1px;margin:clamp(8px,1.6vh,13px) 0;background:var(--silver)}
.plate-h{font-size:12px;color:var(--silverD);text-align:left;margin:0 0 8px}
.foot{margin-top:10px;font-size:clamp(12.5px,1.45vw,15px);line-height:1.38}
.score{text-align:left;font-size:clamp(40px,min(6vw,10vh),68px);line-height:1;font-weight:900;font-stretch:72%;font-variant-numeric:tabular-nums;letter-spacing:0}
.score+.vs{text-align:left;font-size:clamp(13px,1.5vw,15.5px);margin:4px 0 14px;color:var(--navy2)}
.picrow{display:flex;gap:6px;margin:14px 0 18px}
.picrow span{width:clamp(30px,3.6vw,40px);height:clamp(30px,3.6vw,40px);display:flex;align-items:center;justify-content:center;color:#fff}
.picrow .pg{width:78%;height:78%}
/* menu: one primary deed, a short list, then quiet links */
.menu{display:flex;flex-direction:column;gap:0}
.mi{font:inherit;color:var(--navy);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0 12px;width:100%;margin:0;text-align:left;cursor:pointer;
  padding:clamp(7px,1.3vh,11px) 8px;background:transparent;border:0;border-top:1px solid var(--silver);border-radius:0}
.mi{font-size:clamp(17px,min(2vw,3.3vh),21px)}
.mi:not(.pri):not(.wait){grid-template-columns:minmax(5.6em,max-content) 1fr auto}
.mi .lbl{white-space:nowrap;text-transform:lowercase;font-stretch:100%;font-weight:750;letter-spacing:-.01em}
.mi .ds{font-size:clamp(12.5px,min(1.3vw,2.4vh),14.5px)!important;color:var(--silverD);line-height:1.15;min-width:0}
.mi:hover{background:var(--skyLL)}
.mi:active{background:var(--skyL)}
.mi.pri{background:var(--sky);color:#fff;padding:clamp(11px,2.1vh,16px) 14px;border:0;margin-bottom:6px}
.mi.pri{font-size:clamp(22px,min(2.8vw,4.6vh),30px)}
.mi.pri .ds{color:rgba(255,255,255,.82)}
.mi.pri:hover{background:var(--skyD)}
.mi.pri:active{background:var(--navy)}
.mi.wait{background:var(--silverL);color:var(--navy);cursor:default;grid-template-columns:1fr;text-align:center}
.mi kbd{font-size:12px;margin:0;vertical-align:.1em;background:var(--silverL);color:var(--navy)}
.mi.pri kbd{background:rgba(255,255,255,.22);color:#fff}
.seg{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:0;font-size:13px;margin:2px 0 8px}
.seg .sl{color:var(--silverD);margin-right:6px;font-stretch:78%;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:12px;min-width:3.4em}
.seg button{font-family:var(--sans);font-size:13px;font-weight:650;color:var(--navy);background:#fff;border:2px solid var(--navy);margin:0 -2px 0 0;padding:3px 7px 3px 5px;cursor:pointer;display:inline-flex;align-items:baseline;gap:6px}
.seg .sl u{text-decoration:none;font-weight:800;color:var(--navy);margin-left:2px}
.seg button u{text-decoration:none;font-size:.78em;font-weight:800;color:var(--silverD);font-stretch:78%}
.seg button:hover{background:var(--skyLL)}
.seg button[aria-checked="true"]{background:var(--navy);color:#fff;position:relative}
.seg button[aria-checked="true"] u{color:var(--skyL)}
.menu .seg+.seg{margin-top:-2px}
.aux{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:6px 18px;margin-top:clamp(12px,2.2vh,18px);padding-top:10px;border-top:1px solid var(--silver)}
.lnk kbd{font-size:10.5px;margin:0;background:var(--silverL);color:var(--navy)}
.lnk{font-family:var(--sans);font-weight:650;font-size:14px;color:var(--navy);background:none;border:0;border-bottom:2px solid transparent;padding:2px 0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-transform:lowercase}
.lnk:hover{color:var(--skyD);border-bottom-color:var(--sky)}
#page button:focus{outline:none}
#page button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
body.padmode #page button:focus{outline:4px solid var(--orange);outline-offset:2px}
/* how to fight: pictogram tiles */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:4px 0 2px}
.tile{display:flex;flex-direction:column;min-width:0}
.tile .ic{height:clamp(48px,8.5vh,72px);display:flex;align-items:center;justify-content:center;color:#fff;position:relative}
.tile .ic .pg{height:80%;width:auto;aspect-ratio:1}
.tile .ic kbd{position:absolute;left:5px;top:5px;background:#fff;color:var(--navy);font-size:11px}
.tile b{font-weight:800;font-size:14.5px;margin-top:6px;text-transform:lowercase}
.tile em{font-style:normal;font-size:12.5px;line-height:1.25;color:var(--navy2);margin-top:2px}
.hg{display:grid;grid-template-columns:1fr 1fr;gap:4px 30px}
.hg .plate-h{text-align:left;margin:0 0 4px}
.kr{display:grid;grid-template-columns:5.2em 1fr;align-items:center;gap:8px;font-size:clamp(13px,min(1.4vw,2.6vh),15px);line-height:1.22;margin:3px 0}
.kr kbd{justify-self:start;font-size:.8em}
.kr b{font-weight:750;color:var(--navy)}
.kr em{font-style:normal;color:var(--navy2)}
.kr .pg{color:var(--navy)}
.truths{margin:0;padding-left:0;list-style:none;font-size:clamp(13px,min(1.4vw,2.6vh),15px);line-height:1.3}
.truths li{margin:4px 0;padding-left:16px;position:relative}
.truths li::before{content:'';position:absolute;left:0;top:.42em;width:8px;height:8px;background:var(--sky)}
.truths b{font-weight:750}
.help .menu{max-width:360px;margin:clamp(10px,1.8vh,16px) 0 0}
.help .sub{margin:6px 0 8px}
.help .aux{margin-top:clamp(8px,1.4vh,12px);font-size:13px}
.aux .quiet{font-size:12.5px;color:var(--silverD);display:inline-flex;align-items:center;gap:5px}
.aux .quiet kbd{font-size:.8em;margin:0;background:var(--silverL);color:var(--navy)}
@media (max-width:760px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){#sheet.ttl{justify-content:center;padding-left:0;background:rgba(236,245,252,.45)}#sheet.ttl #page{width:92vw}.hg{grid-template-columns:1fr}}
/* the arena row made the title a line taller: on a short screen the spacing round the tagline and the pictograms gives it back */
#sheet.ttl .menu>.seg.aseg:last-child{margin-bottom:0}
@media (max-height:800px) and (min-width:560px){#sheet.ttl .page .sub{margin:6px 0 8px}#sheet.ttl .picrow{margin:8px 0 10px}}
@media (max-height:520px) and (min-width:560px){
  #sheet.ttl #page{width:min(430px,52vw);padding:22px 22px 12px}
  #sheet.ttl .picrow,#sheet.ttl .sub,#sheet.ttl .kicker{display:none}
  .page h1.ttl{font-size:56px;margin-bottom:12px}
  .mi{padding-top:5px;padding-bottom:5px}.mi.pri{padding-top:8px;padding-bottom:8px;margin-bottom:4px}
  .seg{margin:0 0 4px}.seg button{padding:2px 8px 2px 6px}.aux{margin-top:6px;padding-top:6px}
}
@media (max-width:480px){.page#page{padding:28px 18px 16px}.mi{padding-left:8px;padding-right:8px;gap:0 9px}.tiles{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){#sheet{transition:none}#banner.show,#callout.show{animation-duration:.01s}}

/* ---------- armoury ---------- */
#select{position:fixed;inset:0;pointer-events:none;transition:opacity .35s}
#select.off{opacity:0;visibility:hidden}
#selTop,#rosTop,#bdTop,#lobTop{text-align:center;font-weight:850;text-transform:lowercase;letter-spacing:-.03em;color:var(--navy);line-height:1}
#selTop{position:absolute;top:calc(18px + var(--sat));left:0;right:0;font-size:clamp(26px,4.2vw,50px)}
#selTop small,#rosTop small,#bdTop small,#lobTop small{display:block;font-size:12.5px;letter-spacing:.06em;color:var(--skyD);margin-top:8px;font-weight:700;font-stretch:78%;text-transform:uppercase}
#selPanel{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;width:min(920px,97vw);padding:22px 22px 12px;pointer-events:auto;max-height:none;overflow:visible}
.tabs{display:flex;gap:0;justify-content:flex-start;margin-bottom:12px;flex-wrap:wrap;border-bottom:1px solid var(--silver)}
.tab{padding:6px 14px 7px;cursor:pointer;font-size:clamp(12.5px,1.4vw,15px);color:var(--silverD);border-bottom:4px solid transparent;margin-bottom:-1px}
.tab.a{color:var(--navy);border-bottom-color:var(--sky)}
.tab .sw{margin-right:6px}
.rows{display:grid;grid-template-columns:1fr 1fr;gap:2px 22px}
.row{display:flex;align-items:center;gap:8px;padding:3px 8px;border-left:4px solid transparent;cursor:pointer}
.row.s{border-left-color:var(--sky);background:var(--skyLL)}
.row b{font-weight:700;width:6.6em;color:var(--silverD);font-size:clamp(11.5px,1.2vw,13.5px);letter-spacing:.05em}
.row .val{flex:1;text-align:center;font-size:clamp(14px,1.6vw,17px);white-space:nowrap;font-weight:650}
.row .ar{font-style:normal;padding:0 9px;cursor:pointer;background:var(--silverL);color:var(--navy);font-size:12px;line-height:22px}
.row .ar:hover{background:var(--sky);color:#fff}
.sw{display:inline-block;width:13px;height:13px;margin:0 2px 0 0;vertical-align:-1px;box-shadow:inset 0 0 0 1px rgba(31,45,92,.25)}
.hint{line-height:1.8;text-align:center;font-size:clamp(11px,1.2vw,13px);margin-top:8px;color:var(--navy2)}
.hint kbd{background:var(--silverL);color:var(--navy)}
.hint em{font-style:normal;color:var(--silverD)}

/* ---------- roster ---------- */
#roster,#board,#lobby{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(236,245,252,.55);transition:opacity .35s}
#roster.off,#board.off,#lobby.off{opacity:0;visibility:hidden;pointer-events:none}
#rosTop,#bdTop,#lobTop{font-size:clamp(26px,4.2vw,50px);margin-bottom:14px}
#rosPanel{width:min(1000px,97vw);padding:24px 18px 12px;max-height:min(84vh,calc(100dvh - var(--sat) - var(--sab) - 110px))}
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.card{position:relative;background:var(--paper);padding:0 0 7px;cursor:pointer;text-align:left;min-width:0;transition:transform .08s;border-top:5px solid var(--c,var(--silver))}
.card img.th{width:100%;height:auto;aspect-ratio:1/1.06;object-fit:cover;object-position:50% 45%;display:block;background:linear-gradient(var(--skyLL),#fff)}
.card .cn{font-size:clamp(11px,1.15vw,14px);line-height:1.1;margin:5px 7px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .ce{font-size:clamp(9.5px,.95vw,11.5px);color:var(--silverD);margin:1px 7px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .star{position:absolute;top:4px;left:6px;color:var(--orange);font-size:16px;z-index:2}
.card:hover{transform:translateY(-2px)}
.card.s{background:var(--navy);color:#fff;transform:translateY(-4px);box-shadow:0 0 0 3px var(--navy)}
.card.s .ce{color:var(--skyL)}
/* ---------- name bar, board ---------- */
.namebar{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
.namebar>.sc{font-size:12.5px;color:var(--silverD)}
.namebar .pre{color:var(--navy)!important;font-size:17px!important}
#nameIn{font:inherit;font-weight:650;font-size:clamp(16px,1.9vw,20px);width:min(260px,52vw);padding:4px 10px;background:var(--paper);color:var(--navy);border:0;border-bottom:3px solid var(--navy);outline:none;border-radius:0}
#nameIn:focus{border-bottom-color:var(--sky);background:var(--skyLL)}
#nameIn::placeholder{color:var(--silverD)}
.btn{font:inherit;font-size:14px;padding:6px 16px;border:0;background:var(--navy);color:#fff;cursor:pointer;border-radius:0}
.btn:hover{background:var(--sky)}
#selMsg{min-height:1.4em}
.card.forge{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:170px;background:#fff;box-shadow:inset 0 0 0 2px var(--silver);border-top-color:var(--sky)}
.card.forge .plus{font-size:44px;line-height:1;color:var(--sky);font-weight:300}
#bdPanel{width:min(760px,97vw);max-height:80vh;padding:24px 18px 12px}
.brow{display:grid;grid-template-columns:2.2em 40px minmax(0,1fr) 4.6em 6.4em 5.6em;align-items:center;gap:8px;padding:3px 6px;border-bottom:1px solid var(--silverL);font-variant-numeric:tabular-nums;font-size:clamp(12px,1.5vw,16px)}
.brow.h{font-size:11px;color:var(--silverD);border-bottom:2px solid var(--navy);font-weight:700;font-stretch:78%;text-transform:uppercase;letter-spacing:.06em}
.brow.me{background:var(--skyL)}
.brow .rk{font-weight:900;font-stretch:72%;font-size:1.15em}
.brow img{width:36px;height:48px;object-fit:contain}
.brow .bn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow>span:nth-child(n+4){text-align:right}
.empty{text-align:center;padding:18px 8px;color:var(--navy2)}
/* patch notes: a card of their own top right on a wide screen, the foot of the title page on a small one */
.notes .nk{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;color:var(--silverD)}
.notes .nk b{color:var(--navy)}
.notes ul{margin:7px 0 6px;padding-left:1.05em;font-size:13px;line-height:1.38;color:var(--navy)}
.notes li{margin:0 0 3px}
.notes li::marker{color:var(--sky)}
.notes .nnav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0}
.notes .nnav .lnk{font-size:13px}
.notes.inl{margin-top:14px;padding-top:12px;border-top:1px solid var(--silverL)}
#notes{position:fixed;top:max(24px,var(--sat));right:max(24px,var(--sar));width:330px;max-height:calc(100vh - 120px);overflow:auto;background:#fff;padding:14px 18px 10px;border-top:6px solid;border-image:var(--band) 1;box-shadow:0 22px 50px -24px rgba(31,45,92,.55)}
#notes:empty,#sheet.off~#notes,#sheet:not(.ttl)~#notes{display:none}
@media (max-width:1099px),(max-height:599px){#notes{display:none}}
@media (min-width:1100px) and (min-height:600px){.notes.inl{display:none}}
.brow .bn.ini{letter-spacing:.18em;font-weight:900;font-stretch:100%}
.bdnav{display:flex;justify-content:space-between;margin-top:8px}
/* arcade initials: four tall flat slots, the live one in sky blue */
.ini{margin:0 0 12px}
.inihd{font-size:12px;color:var(--navy2);margin:0 0 6px}
.inislots{display:flex;gap:10px}
.inislots .slot{display:flex;flex-direction:column;align-items:stretch;width:clamp(52px,7vw,68px)}
.inislots button{font-family:var(--sans);border:0;margin:0;cursor:pointer;color:var(--navy);background:var(--silverL)}
.inislots .ar{font-size:12px;line-height:1;padding:6px 0;background:none;color:var(--silverD)}
.inislots .ar:hover,.inislots .ar:focus-visible{color:var(--navy)}
.inislots .ch{font-size:clamp(38px,min(5.5vw,8vh),56px);line-height:1.15;font-weight:900;font-stretch:100%;border-bottom:4px solid var(--silver)}
.inislots .slot.cur .ch{background:var(--sky);color:#fff;border-bottom-color:var(--yellow)}
.inihint{font-size:12px;color:var(--silverD);margin-top:6px}
.inihint kbd{font-size:.8em;margin:0 1px;background:var(--silverL);color:var(--navy)}
body.touchmode .inislots .ar{min-height:40px;font-size:16px}
/* ---------- lobby ---------- */
#lobPanel{width:min(560px,96vw);padding:26px 22px 14px;text-align:center}
.lobknight{display:flex;align-items:center;justify-content:center;gap:12px;font-size:clamp(15px,2vw,20px);margin-bottom:8px}
.lobknight img{width:62px;height:auto}
.lobtxt{margin:8px 0;font-size:clamp(14px,1.6vw,17px)}
.lobtxt.bad{color:var(--orangeD);font-weight:700}
.bigcode{font-size:clamp(60px,12vw,124px);line-height:1;letter-spacing:.12em;padding-left:.12em;color:var(--sky);font-weight:900;font-stretch:72%}
.lobbtns{margin:12px 0}
#codeIn{text-transform:uppercase;width:5.4em;text-align:center;letter-spacing:.3em}
#page.info{width:min(1000px,96vw)!important;max-width:96vw}
.itw{overflow-x:auto}
.it{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:clamp(11px,1.25vw,14px);line-height:1.2}
.it th{font-weight:700;font-stretch:78%;font-size:.8em;letter-spacing:.05em;text-transform:uppercase;color:var(--silverD);text-align:right;padding:3px 6px;border-bottom:2px solid var(--navy);white-space:nowrap}
.it th small{text-transform:none;letter-spacing:0;opacity:.8}
.it td{padding:4px 6px;text-align:right;border-bottom:1px solid var(--silverL);white-space:nowrap}
.it tbody tr:nth-child(odd) td{background:var(--paper)}
.it td small{color:var(--silverD)}
.it th:first-child,.it td:first-child{text-align:left}
.it th.nt,.it td.nt{text-align:left;white-space:normal;min-width:11em}
.it td.nt{color:var(--navy2);font-size:.95em}
.it td b{font-weight:800}
.it td .pg{width:1.5em;height:1.5em;padding:2px;color:#fff;margin-right:4px;vertical-align:-.45em}
.ig{display:grid;grid-template-columns:1fr 1fr;gap:2px 28px}
.ig .kr{grid-template-columns:6.8em 1fr;align-items:start}
@media (max-width:760px){.ig{grid-template-columns:1fr}.cards{grid-template-columns:repeat(4,1fr)}}
#mute{position:fixed;right:calc(10px + var(--sar));bottom:calc(8px + var(--sab));max-width:calc(100vw - 20px - var(--sar) - var(--sal));color:var(--navy2);font-size:10.5px;text-align:right;line-height:1.4;padding:4px 8px;background:rgba(255,255,255,.85)}
#mute b{font-weight:800;color:var(--navy)}

/* ---------- touch layer: safe areas, no browser gestures, on-screen controls ---------- */
:root{--sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px)}
html,body{overscroll-behavior:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
canvas{touch-action:none}
#sheet,#roster,#lobby,#board{padding:var(--sat) var(--sar) var(--sab) var(--sal)}
#select{padding:var(--sat) var(--sar) var(--sab) var(--sal)}
.tchint{display:none}
body.touchmode .tchint{display:block}
body.touchmode #legend{display:none}
body.touchmode input{font-size:16px}
#tc{position:fixed;inset:0;z-index:8;display:none;pointer-events:none;user-select:none;-webkit-user-select:none;
  --b:clamp(48px,14vmin,76px);--g:4px;--s:clamp(108px,30vmin,172px);--ix:calc(var(--sar) + 14px);--iy:calc(var(--sab) + 14px);--il:calc(var(--sal) + 14px);
  font-family:var(--sans);font-stretch:78%;font-weight:700;text-transform:uppercase}
body.touchmode #tc:not([data-s="off"]){display:block}
#tc *{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#tc [data-for]{display:none}
#tc[data-s="fight"] [data-for~="fight"],#tc[data-s="watch"] [data-for~="watch"],#tc[data-s="pause"] [data-for~="pause"],#tc[data-s="back"] [data-for~="back"]{display:var(--d,flex)}
#tc .tcd{--d:grid}
.tcb{pointer-events:auto;position:absolute;margin:0;padding:0;border:0;color:#fff;background:var(--navy);font:inherit;letter-spacing:.03em;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;opacity:.86;
  font-size:calc(var(--b)*.17);line-height:1;appearance:none;-webkit-appearance:none;transition:transform .05s,filter .05s}
.tcb .pg{width:58%;height:58%;margin-bottom:1px}
.tcb.down{transform:scale(.92);filter:brightness(1.15);opacity:1}
.tcb:focus{outline:none}
.tcd{position:absolute;right:var(--ix);bottom:var(--iy);display:grid;pointer-events:none;gap:var(--g);grid-template:repeat(3,var(--b))/repeat(3,var(--b))}
.tcd .tcb{position:relative;border-radius:50%;width:var(--b);height:var(--b)}
.tcd [data-tc="chop"]{grid-area:1/2}.tcd [data-tc="slash"]{grid-area:2/1}.tcd [data-tc="thrust"]{grid-area:2/3}.tcd [data-tc="upcut"]{grid-area:3/2}
[data-tc="chop"]{background:var(--orange)}[data-tc="slash"]{background:var(--sky)}[data-tc="upcut"]{background:var(--green)}[data-tc="thrust"]{background:var(--violet)}
.tcc{position:absolute;right:calc(var(--ix) + 3*var(--b) + 2*var(--g) + 12px);bottom:var(--iy);display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.tcc .tcb{position:relative}
[data-tc="parry"]{width:calc(var(--b)*1.25);height:calc(var(--b)*1.25);background:var(--navy);box-shadow:inset 0 0 0 4px var(--sky)}
[data-tc="parry"].cd{box-shadow:none;filter:saturate(.4) brightness(1.4)}
[data-tc="dash"]{width:calc(var(--b)*.95);height:calc(var(--b)*.95);background:var(--silverD)}
.tcu{position:absolute;right:var(--ix);bottom:calc(var(--iy) + 3*var(--b) + 2*var(--g) + 4px);display:flex;gap:8px;pointer-events:none}
.tcu .tcb{position:relative;width:calc(var(--b)*.9);height:calc(var(--b)*.9)}
[data-tc="head"]{background:var(--yellow);color:var(--navy)}
[data-tc="wind"]{background:var(--lime);color:var(--navy)}
[data-tc="wind"].used{filter:grayscale(1);opacity:.45}
[data-tc="pause"]{background:#fff;color:var(--navy)}
.tcs{position:absolute;left:var(--il);bottom:var(--iy);width:var(--s);height:var(--s);border-radius:50%;pointer-events:auto;background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 4px rgba(255,255,255,.9);opacity:.92}
.tcs::before{content:'';position:absolute;inset:16%;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(31,45,92,.25)}
.tcs i{position:absolute;left:50%;top:50%;width:42%;height:42%;margin:-21%;border-radius:50%;background:var(--navy);pointer-events:none}
.tcs.down{opacity:1}
.tcn{position:absolute;left:50%;bottom:calc(var(--sab) + 18px);transform:translateX(-50%);width:min(88vw,400px);display:flex;flex-direction:column;gap:10px;align-items:stretch;pointer-events:none}
.tcn .tcb{position:relative;height:clamp(50px,9vmin,64px);font-size:clamp(17px,3.2vmin,22px);background:#fff;color:var(--navy);opacity:1}
.tcn .tcb.pri{background:var(--sky);color:#fff}
[data-tc="back"]{left:calc(var(--sal) + 10px);top:calc(var(--sat) + 10px);min-width:84px;height:46px;padding:0 18px;font-size:17px;background:var(--navy);opacity:.95}
@media (orientation:portrait){
  .tcc{right:var(--ix);bottom:calc(var(--iy) + 3*var(--b) + 2*var(--g) + 8px);flex-direction:row;align-items:flex-end}
  .tcu{bottom:calc(var(--iy) + 3*var(--b) + 2*var(--g) + 8px + var(--b)*1.25 + 10px)}
  #tc{--b:clamp(52px,14vmin,76px)}
}
@media (prefers-reduced-motion:reduce){.tcb{transition:none}}
/* menus on a touch screen: fingers, not pointers */
body.touchmode .btn{min-height:44px}
body.touchmode .seg button,body.touchmode .lnk{min-height:40px}
body.touchmode .tab{padding:10px 16px}
body.touchmode .namebar input{min-height:44px}
body.touchmode .row{padding-top:7px;padding-bottom:7px}
body.touchmode .row .ar{min-width:42px;line-height:32px;font-size:15px}

/* ---------- the signal, over everything: scanlines, grain, the hum bar, the glass. one layer for scene and UI alike ---------- */
#crt{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden;display:none}
body.sig #crt{display:block}
#crt i{position:absolute;inset:0;display:block}
#crt .scan{background:repeating-linear-gradient(180deg,rgba(8,14,40,0) 0 1.5px,rgba(8,14,40,.13) 1.5px 3px)}
#crt .grain{inset:-128px;background-image:var(--grain);opacity:.55;animation:grain .48s steps(6) infinite}
#crt .hum{inset:auto 0 auto 0;top:0;height:34vh;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.045) 50%,rgba(255,255,255,0));animation:hum 7.5s linear infinite}
#crt .rim{border-radius:2.4vmin;box-shadow:0 0 0 30px #0b1022,inset 0 0 9vmin rgba(8,12,30,.5),inset 0 0 2px 1px rgba(8,12,30,.6)}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-61px,37px)}33%{transform:translate(43px,-88px)}50%{transform:translate(-97px,-21px)}67%{transform:translate(71px,64px)}83%{transform:translate(-19px,101px)}100%{transform:translate(0,0)}}
@keyframes hum{0%{transform:translateY(-40vh)}100%{transform:translateY(110vh)}}
/* channel change: a burst of snow that rolls through */
#static{position:fixed;inset:0;z-index:51;pointer-events:none;opacity:0;background-image:var(--grain);background-size:96px 96px;background-color:#20283f}
#static.on{animation:chan .2s steps(5) both}
@keyframes chan{0%{opacity:.95;background-position:0 0;filter:contrast(2.4)}40%{opacity:.8;background-position:-37px 61px}70%{opacity:.45;background-position:53px -29px}100%{opacity:0;background-position:11px 83px}}
/* misconvergence: every panel and every line of type has a red gun a hair left and a blue gun a hair right; white glows */
body.sig .page,body.sig .plate,body.sig #mid,body.sig #legend,body.sig #toast,body.sig #bug,body.sig #lower .ln{box-shadow:-1.5px 0 0 rgba(255,40,96,.30),1.5px 0 0 rgba(0,176,255,.32),0 0 26px rgba(255,255,255,.22)}
body.sig .page{box-shadow:-1.5px 0 0 rgba(255,40,96,.30),1.5px 0 0 rgba(0,176,255,.32),0 0 32px rgba(255,255,255,.25),0 22px 50px -24px rgba(31,45,92,.55)}
body.sig #hud,body.sig .page,body.sig #legend,body.sig #toast,body.sig #selTop,body.sig #rosTop,body.sig #bdTop,body.sig #lobTop,body.sig #bug,body.sig #lower,body.sig #standby{text-shadow:-1px 0 rgba(255,40,96,.33),1px 0 rgba(0,176,255,.36)}
body.sig .bk{box-shadow:-2px 0 0 rgba(255,40,96,.4),2px 0 0 rgba(0,176,255,.42),0 0 30px rgba(255,255,255,.3);text-shadow:-2px 0 rgba(255,40,96,.45),2px 0 rgba(0,176,255,.45)}
body.sig .page,body.sig .plate,body.sig #mid{animation:flick 3.3s steps(1) infinite}
@keyframes flick{0%{opacity:1}31%{opacity:.965}32%{opacity:1}67%{opacity:.975}68%{opacity:1}}
/* the tube warms up: a panel arrives as a bright line and opens */
body.sig #sheet:not(.off) .page,body.sig #roster:not(.off) .page,body.sig #board:not(.off) .page,body.sig #lobby:not(.off) .page,body.sig #select:not(.off) .page{animation:crtOn .46s cubic-bezier(.2,.75,.25,1) both,flick 3.3s steps(1) .46s infinite}
@keyframes crtOn{0%{scale:1.08 .004;filter:brightness(4) saturate(0);opacity:1}30%{scale:1 .004;filter:brightness(3) saturate(0)}62%{scale:1 1.04;filter:brightness(1.35)}100%{scale:1 1;filter:none}}
/* a redrawn page jumps once, like a changed slide on the caption generator */
body.sig .page.redraw,body.sig #sheet:not(.off) .page.redraw{animation:redraw .22s steps(4) both}
@keyframes redraw{0%{translate:-6px 0;filter:brightness(1.6) hue-rotate(40deg)}25%{translate:5px 0}50%{translate:-2px 0;filter:none}100%{translate:0 0}}
/* hovered and focused menu lines: a caption cursor, and the guns pull apart */
body.sig .mi:hover .lbl,body.sig .mi:focus-visible .lbl,body.padmode .mi:focus .lbl{text-shadow:-2px 0 rgba(255,40,96,.55),2px 0 rgba(0,176,255,.6)}
.mi:hover .lbl::after,.mi:focus-visible .lbl::after,body.padmode .mi:focus .lbl::after{content:'';display:inline-block;width:.5em;height:.82em;margin-left:.18em;vertical-align:-.06em;background:currentColor;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
body.sig .card:hover img.th{animation:tune .3s steps(3)}
@keyframes tune{0%{filter:brightness(1.8) contrast(1.4);translate:-4px 0}50%{translate:3px 0}100%{filter:none;translate:0 0}}
/* the HUD plate of a knight who just took a blow */
.plate.jolt,body.sig .plate.jolt{animation:jolt .32s steps(4)}
@keyframes jolt{0%{translate:-7px 2px;border-top-color:var(--orange)}25%{translate:6px -1px}50%{translate:-3px 1px;border-top-color:var(--yellow)}100%{translate:0 0}}
/* toasts come up as a typed caption */
#toast{border-left:8px solid var(--orange)}
#toast.on{animation:type .5s steps(18) both}
@keyframes type{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
.bk{border-bottom:.08em solid transparent;border-image:var(--band) 1}
#callout.show .bk{animation:cin .26s steps(3) both}
@keyframes cin{0%{translate:-14px 0;text-shadow:-8px 0 rgba(255,40,96,.8),8px 0 rgba(0,176,255,.8)}50%{translate:9px 0}100%{translate:0 0}}
/* the station bug: LIVE, the channel and a running timecode */
#bug{position:fixed;left:calc(14px + var(--sal));bottom:calc(12px + var(--sab));z-index:7;display:flex;align-items:center;gap:8px;padding:5px 9px;background:rgba(255,255,255,.92);color:var(--navy);font-size:11.5px;pointer-events:none;opacity:0;transition:opacity .4s;font-variant-numeric:tabular-nums}
body.sig #bug.on{opacity:.92}
#bug .live{display:inline-flex;align-items:center;gap:5px;color:var(--orangeD)}
#bug .live::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--orange);animation:blink 1.4s steps(1) infinite}
#bug b{font-weight:900;font-stretch:72%;font-size:13px;letter-spacing:.01em}
#bug .tc{font-weight:700;min-width:7.6em}
body.touchmode #bug{display:none}
/* the lower third at each round: names, then the event, typed */
#lower{position:fixed;left:calc(5vw + var(--sal));bottom:calc(16vh + var(--sab));z-index:6;pointer-events:none;opacity:0}
#lower .ln{display:block;width:max-content;max-width:88vw;white-space:nowrap}
#lower .l1{background:var(--navy);color:#fff;font-weight:900;font-stretch:72%;font-size:clamp(20px,3vw,38px);padding:.12em .45em;text-transform:uppercase;border-left:.3em solid var(--sky)}
#lower .l1 em{font-style:normal;color:var(--skyL);font-weight:700;padding:0 .3em}
#lower .l2{background:#fff;color:var(--navy);font-weight:700;font-stretch:78%;font-size:clamp(11px,1.3vw,15px);padding:.35em .9em .35em 1.5em;text-transform:uppercase;letter-spacing:.06em}
#lower.on{animation:lowerT 2.9s both}
#lower.on .l1{animation:wipeIn .35s cubic-bezier(.2,.8,.2,1) both}
#lower.on .l2{animation:type .7s steps(24) .3s both}
@keyframes lowerT{0%,92%{opacity:1}100%{opacity:0}}
@keyframes wipeIn{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
/* time out: please stand by */
#standby{position:fixed;inset:0;z-index:7;display:flex;flex-direction:column;background:#0b1022;color:#fff;pointer-events:none}
#standby[hidden]{display:none}
#standby .bars{flex:1;display:flex}
#standby .bars i{flex:1}
#standby .lo{height:12%;display:flex}
#standby .lo i{flex:1}
#standby .sbc{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px}
#standby .disc{width:clamp(150px,26vmin,260px);aspect-ratio:1;border-radius:50%;background:#fff;color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 0 8px var(--navy),0 0 0 11px #fff}
#standby .disc .pg{width:44%;height:44%}
#standby .disc b{font-weight:900;font-stretch:96%;text-transform:lowercase;letter-spacing:-.03em;font-size:clamp(20px,3.6vmin,32px);line-height:1}
#standby .msg{background:var(--navy);padding:.3em .9em;text-align:center;text-wrap:balance;max-width:86vw;font-weight:900;font-stretch:72%;text-transform:uppercase;font-size:clamp(22px,4vmin,40px)}
#standby .keys{background:#fff;color:var(--navy);padding:.4em 1em;font-weight:700;font-stretch:78%;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(11px,1.6vmin,15px)}
body.touchmode #standby .keys{display:none}
#standby .tc2{position:absolute;right:4%;top:5%;background:#0b1022;padding:.2em .5em;font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(12px,2vmin,18px)}
@media (prefers-reduced-motion:reduce){#crt .grain,#crt .hum,body.sig .page,body.sig .plate,body.sig #mid,.plate.jolt,#static.on,.page.redraw,body.sig .card:hover img.th,#callout.show .bk{animation:none!important}#toast.on,#lower.on .l2{animation-duration:.01s}}

/* controller mapper */
.pmgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin-top:8px}
.pmrow{font:inherit;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 10px;background:var(--paper);border:0;border-left:4px solid transparent;color:var(--navy);cursor:pointer;text-align:left;margin:0}
.pmrow:hover,.pmrow:focus-visible,body.padmode .pmrow:focus{background:var(--skyLL);outline:none}
body.padmode .pmrow:focus{box-shadow:inset 0 0 0 3px var(--orange)}
.pmrow .pma{font-weight:700;font-size:14px}
.pmrow .pmb{font-weight:800;font-stretch:78%;text-transform:uppercase;font-size:13px;background:var(--navy);color:#fff;padding:2px 8px;white-space:nowrap}
.pmrow.live{border-left-color:var(--lime);background:#eef7e2}
.pmrow.live .pmb{background:var(--green)}
.pmrow.want{border-left-color:var(--orange);background:#fff3e4}
.pmrow.want .pmb{background:var(--orange);animation:blink 1s steps(1) infinite}
.pmcap{background:var(--orange);color:#fff;padding:7px 10px;margin:6px 0 2px;font-size:13px}
.pmcap b{font-weight:900}
@media (max-width:640px){.pmgrid{grid-template-columns:1fr}}

/* ---- pass 2 ---- */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#callout .bk{position:relative;transition:none}
.pip{width:14px;height:14px;box-shadow:inset 0 0 0 2.5px var(--pc,var(--navy))}
.pip.w{background:var(--pc,var(--navy))}
@keyframes lowerT{0%,90%{opacity:1;clip-path:inset(0 0 0 0)}99%{opacity:1;clip-path:inset(0 100% 0 0)}100%{opacity:0;clip-path:inset(0 100% 0 0)}}
#legend.on.dim{opacity:0;transition:opacity .25s}
body.keys #legend.on.dim,body.playing.keys #legend.on{opacity:.94}
#standby .sbc{pointer-events:auto}
#standby .keys{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;background:none;padding:0;max-width:min(92vw,640px)}
body.touchmode.playing #toast{bottom:auto;top:calc(26% + var(--sat))}
#standby .sbb,#standby .sbc2{font:inherit;cursor:pointer;border:0;border-radius:0;background:#fff;color:var(--navy);padding:.6em 1.1em;min-height:44px;display:inline-flex;align-items:center;gap:.6em;text-transform:uppercase;font-weight:800;letter-spacing:.05em}
#standby .sbb.pri{background:var(--orange);color:#fff}
#standby .sbb kbd,#standby .sbc2 kbd{background:var(--navy);color:#fff;padding:.1em .4em;font-size:.85em}
#standby .sbb.pri kbd{background:#fff;color:var(--navy)}
#standby .sbchips{display:flex;gap:6px;flex-basis:100%;justify-content:center;flex-wrap:wrap}
#standby .sbc2{background:#0b1022;color:#fff;min-height:36px;padding:.4em .8em;font-size:.9em}
#standby .sbc2 kbd{background:#fff;color:#0b1022}
#standby .keys small{flex-basis:100%;display:flex;justify-content:center}
#standby .keys small span{color:#fff;background:#0b1022;padding:.3em .6em;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.8em}
#standby .sbb:focus-visible,#standby .sbc2:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.bst{border-collapse:collapse;margin:4px auto 6px;font-variant-numeric:tabular-nums;min-width:min(100%,420px)}
.bst td,.bst th{padding:4px 12px;text-align:center}
.bst thead td{font-weight:800;text-transform:uppercase;font-stretch:78%;letter-spacing:.04em;font-size:13px;color:var(--navy)}
.bst tbody td{font-weight:900;font-size:22px;color:var(--navy);width:30%}
.bst tbody th{font-weight:700;text-transform:uppercase;font-stretch:78%;letter-spacing:.05em;font-size:12px;color:var(--silverD)}
.bst tbody tr+tr td,.bst tbody tr+tr th{border-top:1px solid #e3e7ea}
.fin{text-align:center;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:13px;color:#fff;background:var(--orange);width:max-content;margin:0 auto 10px;padding:.25em .7em}
.lobbtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.lobbtns .btn.ghost{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
#lobPanel .btn{min-height:44px}
body:not(.sig) #bug{display:none}   /* hidden bug: no blink animation, no layout */

/* ---- phones (pass 3): the armoury fits a phone in both orientations, the knight in view beside or above the panel ---- */
.rows{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.row{min-width:0}.row .val{min-width:0;overflow:hidden;text-overflow:ellipsis}
.btn.ghost{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.btn.ghost:hover{background:var(--skyLL)}
@media (max-width:759px),(max-height:519px){
  #selTop{font-size:clamp(24px,7vw,36px)}
  #selTop small{margin-top:5px;font-size:11px}
  #selPanel{left:0;right:0;transform:none;width:auto;bottom:0;padding:16px calc(10px + var(--sar)) calc(6px + var(--sab)) calc(10px + var(--sal))}
  .namebar{gap:8px;margin-bottom:8px;flex-wrap:nowrap}
  .namebar>.sc:first-child{display:none}
  #nameIn{flex:1;min-width:0;width:auto}
  .rows{gap:2px 8px}
  .row{flex-wrap:wrap;gap:0 4px;padding:1px 4px}
  .row b{flex-basis:100%;width:auto;font-size:10.5px;line-height:1.3}
  .row .ar{min-width:44px;min-height:40px;line-height:40px;text-align:center;font-size:14px}
  .row .val{font-size:13.5px;white-space:normal;line-height:1.1;font-stretch:88%;overflow-wrap:anywhere}
  #selPanel .hint{margin-top:4px;line-height:1.5}
}
@media (max-height:519px) and (orientation:landscape){
  #selTop{left:0;right:auto;width:calc(100vw - min(500px,58vw));text-align:center;top:calc(10px + var(--sat));font-size:clamp(22px,4vw,30px)}
  #selPanel{left:auto;top:0;bottom:0;width:min(500px,58vw);overflow:auto;padding-top:16px;display:flex;flex-direction:column;justify-content:center}
}
/* the back button on a touch screen sits top left: titles start beside it, not under it */
body.touchmode #selTop{text-align:left;padding:0 12px 0 calc(var(--sal) + 108px);min-height:46px;top:calc(10px + var(--sat))}
body.touchmode #roster,body.touchmode #board,body.touchmode #lobby{justify-content:flex-start;padding-top:calc(var(--sat) + 10px)}
body.touchmode #rosTop,body.touchmode #bdTop,body.touchmode #lobTop{align-self:stretch;text-align:left;padding:0 12px 0 calc(var(--sal) + 108px);min-height:46px;margin-bottom:10px;font-size:clamp(24px,7vw,40px)}
body.touchmode #selTop small,body.touchmode #rosTop small,body.touchmode #bdTop small,body.touchmode #lobTop small{margin-top:5px}
/* touch: no key chips, no key-only lines; the credits move to "how to play" (the strip sat over every sheet's foot) */
body.touchmode .mi kbd,body.touchmode .lnk kbd,body.touchmode .seg u,body.touchmode .tile .ic kbd,body.touchmode .aux .quiet.nt{display:none}
body.touchmode .mi:not(.pri):not(.wait){grid-template-columns:minmax(5.6em,max-content) 1fr}
body.touchmode #mute{display:none}
.foot.credits{font-size:11.5px;color:var(--silverD);margin-top:10px}
#rosPanel .hint .lnk{font-size:inherit;min-height:0;padding:0;vertical-align:baseline;color:var(--skyD);border-bottom-color:var(--sky)}
body.touchmode #rosPanel .hint .lnk{min-height:44px}
/* a phone on its side: the title and the result pages in two columns, so every deed is on screen without scrolling */
.tcol{display:contents}
@media (max-height:519px) and (orientation:landscape){
  #sheet.ttl{justify-content:center;padding-left:var(--sal);background:linear-gradient(90deg,rgba(236,245,252,.7),rgba(236,245,252,.25))}
  #sheet.ttl #page,#sheet #page:not(.help){width:min(880px,calc(100vw - var(--sal) - var(--sar) - 16px));padding:16px 20px 8px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"a b" "x b";column-gap:24px;align-content:start;align-items:start}
  #page .tcol{display:block;min-width:0}#page .tcol.a{grid-area:a}#page .tcol.b{grid-area:b}#page>.aux{grid-area:x}
  #sheet.ttl .notes.inl,#sheet.ttl .picrow,#sheet.ttl .sub,#sheet.ttl .kicker{display:none}
  .page h1.ttl{font-size:clamp(48px,14vh,64px);margin-bottom:10px}
  #sheet.ttl .mi{padding-top:4px;padding-bottom:4px;min-height:44px}#sheet.ttl .mi.pri{margin-bottom:6px}
  #sheet.ttl .tcol.b .menu .mi:first-child{border-top:0}
  .seg{margin:2px 0 6px}.seg .sl{min-width:0;flex-basis:100%;margin:0 0 2px}
  .seg button{min-height:40px;padding:2px 8px 2px 6px}
  .aux{margin-top:4px;padding-top:4px;gap:0 16px}
  #page .tcol.a .rule{margin:8px 0}
  #page .sub{margin:4px 0 6px}
  .score{font-size:clamp(34px,11vh,52px)}.score+.vs{margin:2px 0 6px}
  .bst{margin:0 auto 4px}.bst td,.bst th{padding:2px 8px}.bst tbody td{font-size:17px}
  .ini{margin:0 0 6px}.inislots .ch{font-size:36px}
  .cards{grid-template-columns:repeat(6,1fr);gap:6px}
  .card img.th{aspect-ratio:1/.86}
  #rosPanel{padding:16px 14px 6px;max-height:calc(100dvh - var(--sat) - var(--sab) - 70px)}
  #rosPanel .tabs{margin-bottom:6px}#rosPanel .hint em{display:none}
}
/* a bout on a touch screen: the lower third, the toast and the banner stack down the middle, clear of the HUD, the stick and the buttons */
body.touchmode #lower{left:calc(var(--sal) + 10px);bottom:auto;top:calc(var(--sat) + 98px)}
body.touchmode #lower .l1{font-size:clamp(18px,3vw,30px)}
body.touchmode.playing #toast{top:calc(var(--sat) + 152px);white-space:normal;text-wrap:balance;text-align:center;width:max-content;max-width:min(calc(100vw - 24px),440px)}
@media (orientation:portrait){body.touchmode #banner{top:44%}}
@media (orientation:landscape){
  body.touchmode #lower{top:max(calc(var(--sat) + 112px),calc(var(--sat) + 62px + 7.2vw))}
  body.touchmode.playing #toast{top:calc(max(calc(var(--sat) + 112px),calc(var(--sat) + 62px + 7.2vw)) + 60px);max-width:min(56vw,440px)}
  body.touchmode #banner{top:60%;font-size:clamp(34px,7vw,96px)}
}
/* touch: every target at least 44px; a segment row shares one line (the label sits above it), nothing orphans */
body.touchmode .seg{flex-wrap:wrap}
body.touchmode .seg .sl{flex-basis:100%;margin:0 0 3px;min-width:0}
body.touchmode .seg button{flex:1 1 0;min-width:0;min-height:44px;justify-content:center;align-items:center;padding:0 2px;font-size:13px;font-stretch:74%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.touchmode .lnk{min-height:44px;min-width:44px;justify-content:center}
body.touchmode .tab{min-height:44px;display:inline-flex;align-items:center}
body.touchmode .inislots .ar{min-height:44px}
body.touchmode .mi{min-height:44px}
body.touchmode .aux{gap:0 14px}
/* the hall of fame on a narrow screen: tighter fixed columns, so the name column keeps its width and the header reads apart */
@media (max-width:480px){.brow{grid-template-columns:1.7em 30px minmax(0,1fr) 3.3em 4.9em 4.3em;gap:5px;padding:3px 2px;font-size:12.5px}.brow img{width:28px;height:38px}.brow.h{font-size:10px}}
/* the armoury's title on a phone: on a band of its own, so the scoreboard behind it in the scene never runs through the words */
@media (max-width:759px),(max-height:519px){#select #selTop{top:0;padding-top:calc(var(--sat) + 10px);padding-bottom:8px;background:rgba(236,245,252,.9)}}