@font-face{font-family:"BBH Bogle";font-weight:400;font-display:swap;src:url(../vendor/fonts/bbh-bogle-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(../vendor/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(../vendor/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --bg:#050506;--ink:#f3efe7;--mute:#8a867e;--red:#e5322d;--green:#2a800e;--line:#ffffff1f;--card:#0b0b0dcc;
  --display:"BBH Bogle","Iowan Old Style",Georgia,serif;   /* headline, scores, card titles, in-game shout-outs */
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --padh:clamp(104px,15vh,150px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--sans);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(60% 55% at 0% 78%,#e5322d38,transparent 65%),radial-gradient(ellipse at 50% 62%,transparent 45%,#000000b8 100%)}
.view{position:fixed;inset:0;pointer-events:none}
.view[hidden],.modal[hidden],#pad[hidden],#err[hidden]{display:none}
.view button,.view a,.view input,.view label,.view .card,.view .boxes,.acts{pointer-events:auto}
button{font:inherit;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- shared bits ---------- */
.lbl{margin:0;font:500 10px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--red)}
.mini{margin:6px 0 0;font:400 10.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.btn{font:500 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;padding:14px 26px;border:1px solid var(--line);background:#0000;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s}
.btn:hover{border-color:#ffffff66;background:#ffffff0d}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red:hover{background:#f0453f;border-color:#f0453f}
.btn.wide{width:100%}
.btn:disabled{opacity:.5;cursor:default}

/* ---------- landing ---------- */
.topbar{position:absolute;top:clamp(14px,3vh,26px);right:clamp(16px,3vw,40px);display:flex;gap:10px;align-items:center;font:400 11px var(--mono);letter-spacing:.16em;text-transform:uppercase}
#acct{display:flex;gap:12px;align-items:center;color:var(--mute)}
#acct b{color:var(--ink);font-weight:500}
#acct button{background:none;border:0;padding:4px;color:var(--mute);text-decoration:underline;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit}
.hero{position:absolute;top:0;left:0;right:0;text-align:center;padding-top:clamp(12px,2.6vh,26px)}
.frame{position:relative;display:inline-grid;place-items:center;width:56px;height:56px;color:var(--ink)}
.frame svg{position:absolute;inset:0;width:100%;height:100%}
.frame img{display:block}
.eyebrow{margin:clamp(12px,2.6vh,26px) 0 0;font:500 clamp(11px,1.3vw,14px) var(--mono);letter-spacing:.5em;text-transform:uppercase;color:var(--red);padding-left:.5em}
h1{margin:clamp(2px,1vh,10px) 0 clamp(6px,1.4vh,14px);font:400 clamp(44px,min(8vw,11.5vh),112px)/1 var(--display);letter-spacing:-.012em;color:var(--ink);text-shadow:0 8px 40px #000}
.sub{margin:0;font:400 clamp(11px,1.5vw,17px) var(--mono);letter-spacing:.3em;text-transform:uppercase;color:#d8d3c9;padding-left:.3em}
.sub b{font-weight:500;color:var(--red)}
.chip{display:inline-flex;align-items:center;gap:clamp(12px,2vw,26px);margin-top:clamp(10px,2.2vh,22px);padding:8px 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:400 clamp(10px,1.1vw,12.5px) var(--mono);letter-spacing:.3em;text-transform:uppercase;color:#cfcac0}
.chip i{font-style:normal;color:var(--red);font-size:18px;line-height:1}
.cta{display:flex;gap:12px;justify-content:center;margin-top:clamp(12px,2.6vh,26px)}
.col-l,.col-r{position:absolute;top:clamp(92px,17vh,160px)}
.col-l{left:clamp(16px,2.6vw,36px);width:230px}
.col-r{right:clamp(16px,3vw,44px);width:210px}
.col-l hr{border:0;border-top:1px solid var(--line);width:100px;margin:20px 0 16px}
.big{margin:8px 0 12px;font:400 clamp(34px,4.4vw,54px)/1 var(--display);color:var(--red)}
.big small{font:400 13px var(--mono);color:var(--mute);letter-spacing:.1em}
.boxes{display:flex;gap:6px}
.boxes button{font:400 10.5px var(--mono);letter-spacing:.1em;width:34px;height:26px;background:#0000;border:1px solid var(--line);color:var(--mute);cursor:pointer}
.boxes button.on{background:var(--red);border-color:var(--red);color:#fff}
.boxes button:hover{border-color:#ffffff66}
.val{margin:8px 0 0;font:500 clamp(15px,1.4vw,19px) var(--sans);color:var(--ink)}
.anat{margin:8px 0 0;display:flex;flex-direction:column;gap:2px}
.anat span{font:400 clamp(20px,2vw,26px) var(--display);color:var(--red)}
.anat b{font:400 clamp(22px,2.4vw,32px) var(--display);letter-spacing:.01em}
#sheet{margin:14px 0 0;padding:0;list-style:none;font:400 14px/2 var(--mono);color:#cfcac0}
#sheet li{display:flex;justify-content:space-between;gap:10px;animation:rowin .35s ease-out}
#sheet li span{color:var(--mute);font-size:11px}
@keyframes rowin{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.note{position:absolute;right:clamp(16px,3vw,44px);bottom:clamp(14px,3vh,30px);margin:0;font:400 10px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--red);display:flex;gap:10px;align-items:center}
.note .cross{font-size:20px;color:var(--mute)}
.deco{position:absolute;color:var(--red);opacity:.28;pointer-events:none}
.d1{right:clamp(0px,1vw,20px);top:34%;width:clamp(150px,17vw,260px)}

/* ---------- auth ---------- */
#auth{display:grid;place-items:center;overflow:auto;padding:16px}
.card{position:relative;width:min(430px,94vw);padding:30px 28px 22px;background:var(--card);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 90px #000c}
.card.small{width:min(360px,92vw);text-align:center}
.card h2{margin:6px 0 4px;font:400 30px/1.1 var(--display)}
.card .lead{margin:0 0 16px;font:400 13px/1.55 var(--sans);color:#b9b4aa}
.cardlogo{display:block;margin:0 0 6px}
.back{position:absolute;top:14px;right:14px;background:none;border:0;padding:6px;color:var(--mute);font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.back:hover{color:var(--ink)}
.tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);margin-bottom:16px}
.tabs button{padding:10px;background:#0000;border:0;color:var(--mute);font:500 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.tabs button.on{background:#ffffff14;color:var(--ink)}
form{display:block}
label{display:block;margin-bottom:12px;font:500 10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
input{display:block;width:100%;margin-top:6px;padding:12px 12px;background:#00000080;border:1px solid var(--line);color:var(--ink);font:400 15px var(--sans);letter-spacing:0;text-transform:none;-webkit-user-select:text;user-select:text}
input::placeholder{color:#6b675f}
input:focus{border-color:var(--red)}
input.bad{border-color:var(--red)}
.swap{margin:14px 0 0;text-align:center;font:400 13px var(--sans);color:#b9b4aa}
.swap a{color:var(--ink);text-decoration:underline;cursor:pointer}
.msg{min-height:20px;margin:12px 0 4px;font:400 13px/1.5 var(--sans);color:#f0a19e;text-align:center}
.msg.ok{color:#9fd88a}
.guest{display:block;margin:2px auto 0;background:none;border:0;padding:8px;color:var(--mute);font:400 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:underline;cursor:pointer}
.guest:hover{color:var(--ink)}
#wUserForm{margin-top:4px}
.wlist{display:grid;gap:8px;margin:0 0 12px}
.wbtn{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;background:#ffffff0d;border:1px solid var(--line);color:var(--ink);font:500 14px var(--sans);cursor:pointer;text-align:left}
.wbtn:hover{border-color:#ffffff66;background:#ffffff14}
.wbtn img{border-radius:6px;display:block}
.none{margin:0 0 8px;font:400 13px/1.8 var(--sans);color:#b9b4aa;text-align:center}
.none a{color:var(--ink);text-decoration:underline}
.addr{margin:0 0 10px;font:400 11px var(--mono);letter-spacing:.14em;color:var(--mute);text-transform:uppercase}

/* ---------- 1v1 online lobby ---------- */
#online{display:grid;place-items:center;overflow:auto;padding:16px}
#online .card h2{margin-bottom:10px}
.joinrow{display:flex;gap:8px;margin:12px 0 20px}
.joinrow input{margin-top:0;flex:1;font:500 15px var(--mono);letter-spacing:.24em;text-transform:uppercase}
.joinrow .btn{padding:12px 18px;white-space:nowrap}
.btn:disabled{opacity:.4;cursor:not-allowed}
.chalhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.linkbtn{background:none;border:0;padding:2px;color:var(--mute);font:400 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:underline;cursor:pointer}
.linkbtn:hover{color:var(--ink)}
.chal{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px;max-height:min(38vh,260px);overflow:auto}
.chal li{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#ffffff0d;border:1px solid var(--line)}
.chal li b{font:500 14px var(--sans);color:var(--ink)}
.chal li span{flex:1;font:400 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.chal li.empty{display:block;background:#0000;border-style:dashed;text-align:center;font:400 12px var(--sans);color:var(--mute)}
.hostform{margin:4px 0 14px}
.hostform label i{font-style:normal;color:#5f5b54;letter-spacing:.12em}
.hostform label{margin-bottom:10px}
.hostform input{font-size:14px}
.hostform .btn{margin-top:4px}
.chal li .when{flex:0 0 auto;color:var(--red)}
.chal li.mine{border-color:#ffffff33;background:#ffffff14}
.chal li .acts2{display:flex;gap:6px;flex:0 0 auto}
.mtitle{margin:-8px 0 12px;text-align:center;font:400 19px var(--display);color:var(--ink)}
.waitacts{display:flex;gap:8px}
.waitacts .btn{flex:1;padding:12px 10px}
.code{margin:8px 0 14px;font:400 clamp(34px,9vw,46px)/1 var(--display);letter-spacing:.16em;color:var(--red);text-align:center}
.share{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 16px}
.share .pill{text-decoration:none;display:inline-block}
.waiting{text-align:center}
.waiting::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px;border-radius:50%;background:var(--red);animation:blip 1.1s infinite}
@keyframes blip{0%,100%{opacity:.25}50%{opacity:1}}
.link{margin:8px 0 0;font:400 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--red);white-space:nowrap}

/* ---------- explorer ---------- */
#explore{display:grid;place-items:center;overflow:auto;padding:16px}
#explore .tabs{grid-template-columns:repeat(3,1fr)}   /* .tabs is two-up for the sign-in screen */
.card.wide{width:min(560px,94vw)}
.chal.tall{max-height:min(52vh,420px)}
.chal li .sc{flex:0 0 auto;font:400 19px var(--display);letter-spacing:.06em;color:var(--ink)}
.chal li .sc u{text-decoration:none;color:var(--mute)}
.chal li .who{flex:1;min-width:0}
.chal li .who b{display:block;font:400 15px var(--display);letter-spacing:.02em;color:var(--ink)}
.chal li .who span{display:block;margin-top:2px;font:400 10px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chal li.livenow{border-color:#e5322d55}
.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);
  margin-right:6px;vertical-align:middle;animation:blip 1.1s infinite}
#expNote{text-align:center}

/* ---------- host or join ---------- */
.picks{display:grid;gap:10px;margin:0 0 20px}
.pick{display:block;width:100%;text-align:left;padding:16px 16px;background:#ffffff0d;
  border:1px solid var(--line);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.pick:hover{border-color:var(--red);background:#e5322d14}
.pick b{display:block;font:400 21px var(--display);letter-spacing:.02em}
.pick span{display:block;margin-top:4px;font:400 12.5px/1.5 var(--sans);color:#b9b4aa}
.paneback{background:none;border:0;padding:0 0 12px;color:var(--mute);cursor:pointer;
  font:400 10px var(--mono);letter-spacing:.18em;text-transform:uppercase}
.paneback:hover{color:var(--ink)}

/* ---------- sound settings ---------- */
#setM{position:fixed}
.setcard{text-align:left}
.setcard h2{margin-bottom:18px;text-align:center}
.nowplaying{display:flex;align-items:center;gap:8px;margin:0 0 4px;padding-top:14px;border-top:1px solid var(--line);font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
#setDiagOut{max-height:220px;overflow:auto;margin:6px 0 0;padding:9px 10px;background:#00000066;border:1px solid var(--line);font:400 10.5px/1.5 var(--mono);color:#b9b4aa;white-space:pre-wrap;-webkit-user-select:text;user-select:text}
.nowplaying b{flex:1;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.switch{display:flex;align-items:center;gap:12px;margin:0 0 20px;cursor:pointer;
  font:500 10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{flex:0 0 auto;width:44px;height:24px;border:1px solid var(--line);background:#00000080;
  display:block;position:relative;transition:background .15s,border-color .15s}
.switch .track i{position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--mute);
  transition:transform .15s,background .15s}
.switch input:checked + .track{background:#e5322d33;border-color:var(--red)}
.switch input:checked + .track i{transform:translateX(20px);background:var(--red)}
.switch input:focus-visible + .track{outline:2px solid var(--red);outline-offset:2px}
.switch b{font-weight:500;color:var(--ink);letter-spacing:.18em}
.slider{display:block;margin-bottom:18px;font:500 10px var(--mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute)}
.slider em{float:right;font-style:normal;color:var(--ink)}
.slider input[type=range]{display:block;width:100%;margin-top:10px;height:22px;background:#0000;
  -webkit-appearance:none;appearance:none;cursor:pointer;padding:0;border:0}
.slider input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line)}
.slider input[type=range]::-moz-range-track{height:2px;background:var(--line)}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:14px;height:14px;margin-top:-6px;background:var(--red);border:0;border-radius:0}
.slider input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--red);border:0;border-radius:0}
.topbar{align-items:center}
#gearLanding{width:34px;height:34px}
#gearLanding svg,#gearArena svg{width:15px;height:15px}

/* ---------- the two faces ---------- */
#cams{position:absolute;left:clamp(12px,2.6vw,32px);top:clamp(10px,2.4vh,24px);
  display:flex;flex-direction:column;gap:8px;pointer-events:none;z-index:6}
.cam{position:relative;width:clamp(96px,13vw,150px);aspect-ratio:4/3;background:#000;
  border:1px solid var(--line);overflow:hidden}
.cam video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.cam.me video{transform:scaleX(-1)}          /* a preview of yourself should behave like a mirror */
.cam b{position:absolute;left:0;bottom:0;padding:3px 6px;background:#000000b3;
  font:500 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:500;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cam.talking{border-color:var(--red)}
.camnote{margin:0;max-width:clamp(96px,13vw,150px);font:400 9px/1.5 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.round.on{background:var(--red);border-color:var(--red);color:#fff}
.round:disabled{opacity:.38;cursor:not-allowed}
@media (max-width:560px){
  #cams{left:8px;top:auto;bottom:calc(var(--padh) + 66px);flex-direction:row;align-items:flex-end}
  body:not(.padon) #cams{bottom:64px}
  .cam{width:84px}
  .camnote{display:none}
}

/* ---------- kick-off countdown ---------- */
#count{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:8}
#count span{font:400 clamp(90px,26vw,220px)/1 var(--display);color:var(--ink);
  text-shadow:0 0 60px #000,0 0 120px #e5322d66;animation:countIn .55s ease-out}
#count.go span{color:var(--red)}
@keyframes countIn{from{opacity:0;transform:scale(.55)}60%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){#count span{animation:none}}

/* ---------- the problem banner ---------- */
#problem{position:fixed;left:50%;transform:translateX(-50%);bottom:clamp(12px,3vh,26px);z-index:20;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:min(680px,94vw);
  padding:12px 14px;background:#1a0b0b;border:1px solid #e5322d66;box-shadow:0 20px 60px #000b;
  pointer-events:auto;-webkit-user-select:text;user-select:text}
#problem .ptext{flex:1 1 220px;font:400 13px/1.5 var(--sans);color:var(--ink)}
#problem .ptext b{font-weight:600}
#problem .ptext span{color:#c9beb8}
#problem button{flex:0 0 auto;background:#0000;border:1px solid var(--line);color:var(--ink);
  font:400 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;cursor:pointer}
#problem button:hover{border-color:#ffffff66}
#problem #problemClose{font-size:15px;line-height:1;padding:5px 9px;letter-spacing:0}
#problem pre{flex:1 1 100%;margin:2px 0 0;padding:9px 10px;background:#00000066;border:1px solid var(--line);
  font:400 11px/1.5 var(--mono);color:#b9b4aa;white-space:pre-wrap;word-break:break-word;max-height:140px;overflow:auto}
@media (max-width:560px){#problem{bottom:auto;top:10px}}

/* ---------- datepicker (flatpickr, restyled for the dark arena look) ---------- */
.flatpickr-wrapper{display:block;width:100%}
.flatpickr-calendar{
  width:100%!important;max-width:100%;margin-top:8px;border-radius:0;box-shadow:none;
  background:#101014;border:1px solid var(--line);color:var(--ink);
  font-family:var(--sans);-webkit-user-select:none;user-select:none}
/* Let the calendar push the form down instead of floating over it: the card already scrolls, and an
   overlay would hang off the bottom of a short screen. */
.flatpickr-calendar.static{position:relative;top:0}
.flatpickr-calendar.static.open{z-index:2}
.flatpickr-calendar.inline{top:0}
.flatpickr-calendar.arrowTop::before,.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,.flatpickr-calendar.arrowBottom::after{display:none}
.flatpickr-months{padding:6px 0 2px}
.flatpickr-months .flatpickr-month{background:#0000;color:var(--ink);height:38px}
.flatpickr-current-month{font:500 14px var(--sans);padding:6px 0 0}
.flatpickr-current-month .cur-month{font-weight:500}
.flatpickr-current-month input.cur-year{font:500 14px var(--sans);color:var(--ink);padding:0 0 0 4px}
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown{border-color:#0000}
.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{padding:8px 10px;fill:var(--mute)}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:var(--red)}
.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{fill:var(--mute)}
span.flatpickr-weekday{color:var(--red);font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;background:#0000}
.flatpickr-weekdays{background:#0000;height:26px}
.flatpickr-days,.dayContainer{width:100%;min-width:0;max-width:none}
.dayContainer{padding:0;justify-content:space-around}
.flatpickr-day{
  color:#cfcac0;border:1px solid #0000;border-radius:0;font:400 13px var(--sans);
  max-width:none;height:34px;line-height:34px}
.flatpickr-day:hover{background:#ffffff14;border-color:#ffffff33;color:var(--ink)}
.flatpickr-day.today{border-color:var(--red);color:var(--ink)}
.flatpickr-day.selected,.flatpickr-day.selected:hover{
  background:var(--red);border-color:var(--red);color:#fff;font-weight:500}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:#4a4741;background:#0000;border-color:#0000}
.flatpickr-time{border-top:1px solid var(--line);height:44px;line-height:44px}
.flatpickr-time input,.flatpickr-time .flatpickr-am-pm{
  color:var(--ink);font:500 15px var(--mono);background:#0000;height:44px;line-height:44px}
.flatpickr-time input:hover,.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time .flatpickr-am-pm:focus{background:#ffffff14}
.flatpickr-time .flatpickr-time-separator{color:var(--mute)}
.flatpickr-time .numInputWrapper span.arrowUp::after{border-bottom-color:var(--mute)}
.flatpickr-time .numInputWrapper span.arrowDown::after{border-top-color:var(--mute)}
.numInputWrapper:hover{background:#0000}
.whenrow{display:flex;gap:10px;align-items:flex-start;margin:6px 0 12px}
.whenrow input{margin-top:0}
.whenrow .flatpickr-wrapper{flex:1 1 auto;min-width:0}
.whenrow .linkbtn{flex:0 0 auto;white-space:nowrap;padding-top:15px}

/* ---------- arena ---------- */
.score{position:absolute;top:clamp(10px,2.4vh,24px);left:50%;transform:translateX(-50%);text-align:center}
.box{display:flex;align-items:flex-end;gap:16px;padding:8px 26px 6px;background:var(--card);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.col{display:flex;flex-direction:column;align-items:center;min-width:46px}
.col em{font:400 9px var(--mono);font-style:normal;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.col.you em::after{content:" \25CF";color:var(--red)}
.col strong{font:400 30px/1.1 var(--display);font-variant-numeric:tabular-nums}
.col.you strong{color:var(--red)}
.col strong.bump{animation:bump .5s ease-out}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.5)}100%{transform:scale(1)}}
.sl{font:400 22px var(--display);color:var(--mute);padding-bottom:3px}
#msg{margin:9px 0 0;font:400 10px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.tools{position:absolute;top:clamp(10px,2.4vh,24px);right:clamp(12px,2.6vw,32px);display:flex;gap:8px}
.round{width:40px;height:40px;padding:0;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);border-radius:50%;cursor:pointer;backdrop-filter:blur(8px)}
.round:hover{border-color:#ffffff66}
.round svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#btnSnd.off .wave{display:none}
.foot{position:absolute;left:clamp(16px,3vw,34px);bottom:clamp(14px,3vw,28px);font:400 10px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.acts{position:absolute;right:clamp(16px,3vw,34px);bottom:clamp(14px,3vw,28px);display:flex;gap:8px}
.pill{white-space:nowrap;font:400 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:9px 13px;background:var(--card);border:1px solid var(--line);color:var(--ink);cursor:pointer;backdrop-filter:blur(8px)}
.pill:hover{border-color:#ffffff66}
#pad{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(14px,3vw,28px);width:min(340px,86vw);height:var(--padh);background-color:var(--card);border:1px solid var(--line);border-radius:18px;background-image:linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line));background-size:1px 100%,100% 1px;background-position:center;background-repeat:no-repeat}
#pad span{position:absolute;left:14px;bottom:8px;font:400 9px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
#dot{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--red);transform:translate(-50%,-50%);box-shadow:0 0 0 7px #e5322d40}
#flash{position:absolute;inset:0;opacity:0;pointer-events:none}
#flash.win{animation:flash .6s ease-out;background:radial-gradient(ellipse at center,transparent 45%,#f3efe733 100%)}
#flash.lose{animation:flash .6s ease-out;background:radial-gradient(ellipse at center,transparent 35%,#e5322d66 100%)}
@keyframes flash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.modal{position:absolute;inset:0;display:grid;place-items:center;background:#000000a0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:auto}
.stack{display:grid;gap:10px;margin-top:18px}
.keys{margin:16px 0 0;font:400 10px/1.7 var(--mono);letter-spacing:.1em;color:var(--mute)}
.overscore{margin:4px 0 0;font:400 46px/1 var(--display);color:var(--red)}

/* ---------- pops ---------- */
#pops{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.pop{position:absolute;white-space:nowrap;font:400 32px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-shadow:0 0 3px #000,0 2px 14px #000;transform:translate(-50%,-50%);animation:pop .95s cubic-bezier(.2,.8,.2,1) forwards}
.pop.red{color:#ff5a52}
.pop.dim{color:#d4cfc5;font-size:20px}
.pop.big{font-size:clamp(40px,9vw,88px);animation-duration:1.5s}
.pop.big small{display:block;margin-top:4px;text-align:center;font:500 clamp(10px,1.4vw,14px) var(--mono);letter-spacing:.34em;color:var(--mute);text-shadow:none}
.pop.big.red{text-shadow:0 0 40px #e5322d99}
.pop.big.win{text-shadow:0 0 40px #f3efe755}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}14%{transform:translate(-50%,-50%) scale(1.3);opacity:1}30%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{transform:translate(-50%,-140%) scale(1);opacity:0}}
#toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);padding:10px 16px;background:#000000d0;border:1px solid var(--line);font:400 12px var(--mono);letter-spacing:.06em;opacity:0;transition:.3s;pointer-events:none;max-width:92vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
#err{position:fixed;inset:0;place-items:center;text-align:center;padding:24px;background:var(--bg);font:400 14px var(--mono);z-index:9}
#err:not([hidden]){display:grid}

/* ---------- small screens ---------- */
@media (max-width:980px){.col-l,.col-r,.d1,.note{display:none}}
@media (max-width:1000px){
  .foot{left:50%;right:auto;transform:translateX(-50%);text-align:center;white-space:nowrap;bottom:64px}
  .acts{left:50%;right:auto;transform:translateX(-50%);bottom:18px;max-width:96vw;flex-wrap:wrap;justify-content:center}
  body.padon .acts{bottom:calc(var(--padh) + 30px)}
  body.padon .foot{bottom:calc(var(--padh) + 76px)}
}
/* Narrow screens: five round buttons in one row ran straight over the centred scoreboard, which is
   why the camera button was impossible to find. Wrap them into a two-wide block beside it instead. */
@media (max-width:760px){
  .tools{display:grid;grid-template-columns:repeat(2,auto);gap:6px;justify-content:end}
}
@media (max-width:560px){.sub{letter-spacing:.2em}.cta .btn{padding:13px 18px}.chip{letter-spacing:.2em}.box{padding:8px 16px 6px;gap:10px}.round{width:34px;height:34px}.tools{gap:6px;right:8px}.pill{font-size:9.5px;padding:9px 9px;letter-spacing:.06em}.acts{flex-wrap:nowrap;gap:6px}.foot{font-size:9px}}
@media (prefers-reduced-motion:reduce){.pop{animation:none;opacity:1}#sheet li{animation:none}.col strong.bump{animation:none}}

/* Unfinished matches and stakes still in escrow, on the landing page. Absent entirely when there is
   nothing in it, so it costs an ordinary player no room at all. */
#purse{margin-top:18px;display:flex;flex-direction:column;gap:8px;max-width:520px}
#purse .lbl{margin:0 0 2px}
.purserow{display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:10px 12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03)}
.purserow>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.purserow b{font-size:13px;letter-spacing:.04em}
.purserow .mini{opacity:.62;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.purserow .btn{flex:0 0 auto;padding:7px 12px;font-size:11px}
@media (max-width:760px){
  .purserow{flex-direction:column;align-items:stretch;gap:8px}
  .purserow .btn{width:100%}
}

/* The profile page: balance, deposit address, and where winnings are sent. */
/* Centred and scrollable like the sign-in card, which is the pattern every full-page card follows. */
#profile{display:grid;place-items:center;overflow:auto;padding:16px}
.card.wide{width:min(520px,94vw)}
/* Never upper-case an address. Base58 is case-sensitive, and .addr inherits text-transform from the
   card's styling — so the address on screen was not the address. Anyone reading it off the page and
   typing it would have sent money somewhere that does not exist, or worse, somewhere that does. */
#profile .addr.mono{text-transform:none;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);padding:10px 12px;margin:6px 0 10px}
#profile hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:18px 0}
#profile .big{font-size:34px;margin:2px 0 4px}
#profile .big small{font-size:14px;opacity:.6;margin-left:6px}
#profWithdraw{margin-top:14px}
#profMsg.bad{color:#ff8f8f}
/* The account name on the landing page is a way into all of this, so it has to look pressable. */
.topbar .me{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;
  border-bottom:1px solid rgba(255,255,255,.28)}
.topbar .me:hover{border-bottom-color:currentColor}

/* Balances, one line per token the wallet holds. */
.bals{display:flex;flex-wrap:wrap;gap:16px;margin:4px 0 2px}
.bals div{display:flex;flex-direction:column}
.bals b{font:400 26px/1.1 var(--display)}
.bals span{font:400 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.bals .zero b{opacity:.35}
/* A native select keeps the operating system's own colours — white on white against this page. The
   appearance has to be taken off before any of the page's own styling applies, and the arrow drawn
   back by hand because removing the appearance removes that too. */
select{
  width:100%;padding:12px 30px 12px 12px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-color:#0000;color:var(--ink);
  border:1px solid var(--line);
  font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;
  /* The arrow, as two strokes, so it needs no image and inherits nothing from the platform. */
  background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,#0000 50%);
  background-position:calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
select:hover{border-color:#ffffff66}
select:focus-visible{outline:1px solid var(--red);outline-offset:-1px}
/* The open list is drawn by the operating system, which ignores most of the above. These two are the
   properties it does respect, and without them the list is unreadable on a dark page. */
select option{background:#14120f;color:#e9e4da}

/* Stake amount and token, side by side. Aligned at the bottom rather than the top: the stake's hint
   wraps to two lines and the token's does not, which left the two fields at different heights. */
.stakerow{display:flex;gap:10px;align-items:flex-end}
.stakerow label{flex:1;margin-bottom:12px}
.stakerow .cur{flex:0 0 104px}
/* The two fields are different elements with different base styling — the input carries a top margin
   and renders a pixel taller from its larger font. Pinned to one height and one margin so their edges
   line up, rather than nearly doing. */
.stakerow input,.stakerow select{margin:6px 0 0;height:44px}

/* Show/hide password. The button sits inside the field rather than beside it, so the field keeps its
   full width and the control cannot be mistaken for part of the form's own flow. */
.pwrap{position:relative;display:block}
.pwrap input{width:100%;padding-right:46px}
.peek{position:absolute;top:50%;right:6px;transform:translateY(-50%);display:grid;place-items:center;
  width:34px;height:34px;padding:0;background:none;border:0;color:var(--mute);cursor:pointer}
.peek:hover{color:var(--ink)}
.peek:focus-visible{outline:1px solid var(--line);outline-offset:-1px}
.peek svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
/* The slash is only drawn when the password is showing, so the icon says what pressing it will do. */
.peek .slash{opacity:0;transition:opacity .12s}
.peek[aria-pressed="true"] .slash{opacity:1}

/* Wallet choices on the profile page: stacked and full width, like the ones on the sign-in card. In a
   flex row they were shrinking into something that read as a link rather than a button. */
#profWallets{display:grid;gap:8px;margin:8px 0 4px}