/* =====================================================================
   TOKENS — Leylines palette (violet-tinted darks from the logo kit;
   light theme is derived from it). --ley-* are the raw palette values.
   ===================================================================== */
:root{
  --ley-bg:#0E0A1F; --ley-surface:#140C33; --ley-raised:#1E1450; --ley-border:#3A2C6E;
  --ley-text:#F1ECFF; --ley-text-muted:#B9AEDD; --ley-text-subtle:#8E82B8;
  --ley-violet-700:#6A2BAE; --ley-violet-500:#8B6CFF; --ley-violet-300:#B894FF; --ley-violet-100:#EDE6FF;
  --ley-pink-700:#C2469A; --ley-pink-500:#FF5FA8; --ley-pink-300:#FF86C4;
  /* Player colours: you are blue, the opponent is red (shades tuned to sit with the violet darks) */
  --ley-blue-700:#2F5FD0; --ley-blue-300:#8CB4FF; --ley-red-700:#C8344F; --ley-red-300:#FF8A9A;
  --ley-success:#5EE6B0; --ley-warning:#FFC45C; --ley-danger:#FF5470;

  --bg0:#08061a; --bg1:var(--ley-bg); --bar:var(--bg1); --surf:var(--ley-surface); --surf2:var(--ley-raised); --seg-on:#2a1d66;
  --line:rgba(184,148,255,.13); --line2:rgba(184,148,255,.26);
  --text:var(--ley-text); --muted:var(--ley-text-muted);
  --accent:var(--ley-violet-500); --accent-hi:var(--ley-violet-300); --on-accent:var(--ley-surface); --accent-ink:var(--ley-violet-300); --accent-glow:rgba(139,108,255,.4);
  --cta:var(--ley-pink-500); --cta-hi:var(--ley-pink-300); --on-cta:#1e0b2a; --cta-glow:rgba(255,95,168,.4);
  --blue1:var(--ley-blue-700); --blue2:#142a6e; --red1:var(--ley-red-700); --red2:#5c1224; --grey1:#5d6273; --grey2:#2b2e39; --grey-ink:#b9bfd0; --blue-ink:var(--ley-blue-300); --red-ink:var(--ley-red-300);
  /* the other colours a player can pick for themselves (Settings → Your colour), and Crossroads seats */
  --gold1:#c98a1e; --gold2:#5a3208; --gold-ink:#e9b44c; --green1:#1f9e70; --green2:#0b4a35; --green-ink:#3fd49c;
  --purple1:#8a52e8; --purple2:#2e1470; --purple-ink:#b48cff; --teal1:#1aa3b8; --teal2:#07414c; --teal-ink:#4fd3e6;
  --glow-a:rgba(106,43,174,.32); --glow-b:rgba(194,70,154,.12);
  --board:#110a29;
  --hot:var(--ley-violet-100); --hot-glow:rgba(237,230,255,.35);
  --danger:var(--ley-danger); --warn:var(--ley-warning); --crit:var(--ley-danger);
  --sh:4,2,14; --shk:1; --tint:255,255,255; --well:rgba(0,0,0,.28); --dim:.62; --grain:.07;
  --title-grad:linear-gradient(180deg,#fff 10%,var(--ley-violet-100) 45%,var(--ley-violet-300));
  --cell:110px; --hc:68px;
  --display:'Saira',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.22,1,.36,1);
  --z-ghost:60; --z-banner:80; --z-how:85; --z-modal:90; --z-away:92; --z-fade:93; --z-toast:95; --z-grain:100;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg0:#e9e4f7; --bg1:#f6f3ff; --surf:#ffffff; --surf2:#f0ebff; --seg-on:#ffffff;
  --line:rgba(40,20,90,.12); --line2:rgba(40,20,90,.22);
  --text:#1a1238; --muted:#54497a;
  --accent:var(--ley-violet-700); --accent-hi:var(--ley-violet-500); --on-accent:#fff; --accent-ink:var(--ley-violet-700); --accent-glow:rgba(106,43,174,.3);
  --cta:var(--ley-pink-700); --cta-hi:#dc5aad; --on-cta:#fff; --cta-glow:rgba(194,70,154,.35);
  --blue1:#3a6bdb; --blue2:#1e3f99; --red1:#d24560; --red2:#8e1f36; --grey1:#8c92a3; --grey2:#565c6c; --blue-ink:#2553c0; --red-ink:#b3304a;
  --grey-ink:#4a5062; --gold-ink:#9a6a0a; --green-ink:#13865c; --purple-ink:#6a2bae; --teal-ink:#0e7d8f;
  --glow-a:rgba(139,108,255,.16); --glow-b:rgba(255,95,168,.12);
  --board:#e4ddf7;
  --hot:var(--ley-violet-700); --hot-glow:rgba(106,43,174,.3);
  --danger:#c8324f; --warn:#a8660a; --crit:#c8324f;
  --sh:40,20,90; --shk:.3; --tint:0,0,0; --well:rgba(0,0,0,.05); --dim:.35; --grain:.05;
  --title-grad:linear-gradient(180deg,var(--text) 25%,var(--accent-ink));
  color-scheme:light;
  color-scheme:only light; /* picked on purpose: a browser's own dark mode mustn't darken it */
}
/* --cell is used for the board square size; the colour lives in --cell-bg */
:root{--cell-bg:#0b0720} :root[data-theme="light"]{--cell-bg:#d6cdf0}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
/* text stays the size the layouts were made for: an iPhone turned sideways, or an Android browser's text size setting,
   would otherwise enlarge it and push the fitted screens (match, Collection) off the edge. Pinch zoom still works */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* measures the phone's notch and home bar (layout() reads its padding) */
#safe{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;visibility:hidden;pointer-events:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
/* iPhone home-screen app (layout() sets these classes; measured on an iPhone 16 Pro Max with iOS 27).
   .ios-bar   the status bar is opaque (index.html): the page starts below the clock and reaches the bottom of the
              screen. iOS paints the strip behind the clock in the page's colour and blurs about 28px of the page under
              it, so screens start below the blur, and the top of the page fades from the strip's colour (--bar: the top
              of the page, or the Night Market's sky; settings.js gives it to the browser too) so the strip reads as
              part of the screen, not a separate bar.
   An app added to the home screen before the status bar went opaque keeps the old setting and runs under the clock:
   .ios-app   the page runs under the clock and battery (iOS picks a light or dark clock by itself). iOS blurs about
              90px from the top, deeper than the clock's strip, so screens start below the blur.
   .ios-short the page stops 62px short of the bottom of the screen and iOS fills that strip with the page's background
              colour (--bg0, so it follows the theme), which no page can draw over (even a 100lvh box stops at it). A short
              fade over everything, dialogs too, blends whatever is at the bottom into that colour, so the strip reads
              as part of the screen, not a hard edge. No room is needed for the home bar, which sits inside the strip. */
.ios-bar{background-color:var(--bar)}
.ios-bar .screen{padding-top:30px}
.ios-bar body::before{content:"";position:fixed;left:0;right:0;top:0;height:32px;pointer-events:none;z-index:var(--z-fade);
  background:linear-gradient(var(--bar),transparent)}
.ios-app .screen{padding-top:calc(env(safe-area-inset-top) + 30px)}
.ios-short .screen{padding-bottom:28px}
.ios-short body::before{content:"";position:fixed;left:0;right:0;bottom:0;height:32px;pointer-events:none;z-index:var(--z-fade);
  background:linear-gradient(transparent,var(--bg0))}
.ios-short body::after{-webkit-mask-image:linear-gradient(to top,transparent,#000 110px);mask-image:linear-gradient(to top,transparent,#000 110px)}
body{
  color:var(--text);font:400 15px/1.5 var(--body);touch-action:manipulation;-webkit-touch-callout:none;
  background:
    radial-gradient(120% 70% at 0% 0%,var(--glow-a),transparent 60%),
    radial-gradient(110% 70% at 100% 100%,var(--glow-b),transparent 60%),
    linear-gradient(var(--bg1),var(--bg0));
  background-color:var(--bg0);
  overscroll-behavior:none;user-select:none;-webkit-user-select:none;
}
body::after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-grain);pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button{font:inherit;color:inherit}
p{text-wrap:pretty}
.hidden{display:none!important}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
h2[tabindex="-1"]:focus,.mbox:focus{outline:none}
.sc,.bigscore,.codebox,.stat b,.meta,.timer span{font-variant-numeric:tabular-nums}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- screens ---------- */
/* Big monitors: every screen is laid out at a ~1440x900 design size and zoomed up to fill the window.
   --ui is set by layout(); anything sized in vw/vh inside a zoomed box divides by it to stay viewport-true. */
:root{--ui:1}
.screen,#modal,#how,#away,#toast{zoom:var(--ui)}
.screen{position:fixed;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;align-items:center;overflow-y:auto;
  padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.screen.on{display:flex}
.screen.on .wrap>*,.screen.on .topbar,#scr-menu.on .menu>*{animation:rise .4s var(--ease) both}
.screen.on .wrap>*:nth-child(2),#scr-menu.on .menu>*:nth-child(2){animation-delay:.04s}
.screen.on .wrap>*:nth-child(3),#scr-menu.on .menu>*:nth-child(3){animation-delay:.08s}
.screen.on .wrap>*:nth-child(n+4){animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.wrap{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:stretch;gap:16px}
.topbar{display:flex;align-items:center;gap:12px;width:100%;max-width:560px;margin:6px 0 12px}
.topbar h2{margin:0;font:800 24px/1.1 var(--display);letter-spacing:-.01em;flex:1;text-wrap:balance}
h3,.lbl{margin:0 0 8px;font:600 12.5px var(--body);color:var(--muted);letter-spacing:.02em}
.note{margin:8px 2px 0;color:var(--muted);font-size:13px;line-height:1.5}
.note b{color:var(--text);font-weight:600}

/* ---------- buttons ---------- */
.iconbtn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:rgba(var(--tint),.04);color:var(--text);
  cursor:pointer;display:grid;place-items:center;flex:none;padding:0;transition:background .18s,border-color .18s,transform .2s var(--spring)}
.iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.iconbtn:hover{background:rgba(var(--tint),.08);border-color:var(--line2)}
.iconbtn:active{transform:scale(.94)}
.btn{appearance:none;border:1px solid var(--line);background:var(--surf2);color:var(--text);padding:10px 18px;border-radius:14px;
  font:600 15px var(--body);cursor:pointer;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 2px 6px rgba(var(--sh),calc(.35*var(--shk)));transition:transform .2s var(--spring),filter .18s,border-color .18s,background .18s}
.btn:hover{border-color:var(--line2);filter:brightness(1.06);transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.98);transition-duration:.06s}
.btn:disabled{opacity:.42;cursor:default;filter:none;transform:none}
/* a popup's main button counting down before it works (helpers.js readWait) */
.btn.waiting{opacity:.42;cursor:default;filter:none;transform:none;font-variant-numeric:tabular-nums}
.btn.primary{background:linear-gradient(180deg,var(--cta-hi),var(--cta));color:var(--on-cta);border-color:transparent;
  font:700 16px var(--display);letter-spacing:.02em;box-shadow:0 8px 24px -8px var(--cta-glow),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.danger{background:none;border-color:color-mix(in srgb,var(--danger) 55%,transparent);color:var(--danger);box-shadow:none}
.btn.danger:hover{background:color-mix(in srgb,var(--danger) 10%,transparent)}
.btn.small{min-height:40px;padding:6px 14px;font-size:14px;border-radius:12px}
.btn.text{background:none;border-color:transparent;box-shadow:none;color:var(--muted);font-weight:500}
.btn.text:hover{color:var(--text)}
@media (pointer:coarse){.btn.small,.seg button{min-height:44px}}

/* segmented control */
.seg{display:flex;gap:2px;padding:4px;border-radius:14px;background:var(--well);border:1px solid var(--line)}
.seg button{flex:1 1 0;border:0;background:none;border-radius:10px;padding:6px 10px;cursor:pointer;font-weight:500;min-height:38px;color:var(--muted);transition:background .18s,color .18s,transform .15s}
.seg button:hover:not(.on){color:var(--text)}
.seg button:active{transform:scale(.97)}
.seg button.on{background:var(--seg-on);color:var(--text);font-weight:600;box-shadow:0 2px 8px rgba(var(--sh),calc(.45*var(--shk))),inset 0 0 0 1px var(--line2)}

/* switch row (rules + settings) */
.rules,.setlist{border-radius:16px;background:var(--surf);border:1px solid var(--line);overflow:hidden}
.rule,.setrow{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;border-top:1px solid var(--line);background:none;text-align:left;color:var(--text)}
.rule{cursor:pointer;transition:background .15s}
.rule:hover{background:rgba(var(--tint),.03)}
.rule:first-child,.setrow:first-child{border-top:0}
.rule .rt,.setrow .rt{flex:1;min-width:0}
.rule b,.setrow b{display:block;font:600 14.5px var(--body)}
.rule small,.setrow small{display:block;color:var(--muted);font-size:12.5px;line-height:1.35}
.rule.dim .rt{opacity:.5}
.switch{width:42px;height:26px;border-radius:13px;background:rgba(var(--tint),.16);position:relative;flex:none;transition:background .2s}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s var(--spring)}
[aria-checked="true"] .switch{background:var(--accent)}
[aria-checked="true"] .switch::after{transform:translateX(16px)}
.setrow .seg{flex:0 0 auto}
.setrow .seg button{min-height:34px;padding:4px 10px;font-size:13px}
/* Settings → Your colour: a little card in each colour (save.js MY_COLS; the colours are duo.css .dc-*) */
.colpick{display:flex;gap:7px;flex:0 0 auto}
.colpick button{position:relative;width:30px;height:36px;border-radius:7px;border:0;cursor:pointer;color:#fff;font:800 15px var(--display);
  background:linear-gradient(160deg,var(--dc1),var(--dc2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);transition:transform .15s,box-shadow .2s}
.colpick button:hover:not(.on){transform:translateY(-2px)}
.colpick button.on{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 0 0 2px var(--surf),0 0 0 4px var(--dc1)}
.colpick button.on::after{content:"✓";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;text-shadow:0 1px 2px rgba(0,0,0,.5)}
@media (max-width:420px){.setcol{flex-wrap:wrap}.setcol .colpick{width:100%;justify-content:flex-start}}
button.setrow{cursor:pointer}
button.setrow:hover{background:rgba(var(--tint),.03)}
/* the jukebox (settings.js): a song for each place, and the songs to listen to */
.jbsel{position:relative;flex:0 0 auto;display:inline-flex}
.jbsel select{appearance:none;-webkit-appearance:none;width:11.5em;max-width:44vw;padding:7px 30px 7px 12px;border-radius:12px;border:1px solid var(--line);
  background:var(--well);color:var(--text);font:500 13.5px var(--body);cursor:pointer;min-height:38px;text-overflow:ellipsis}
.jbsel::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;border:solid var(--muted);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.jbsel select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.jbsel select:disabled{cursor:default}
.jbsel option{background:var(--surf);color:var(--text)}
.jbrow.off{opacity:.45}
.jbh{margin:16px 2px 8px;font:700 12.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left}
@media (pointer:coarse){.jbsel select{min-height:44px}}
/* the jukebox's player: the song's name over a bar with the time gone and left, its buttons, and the songs to pick from */
.jbplayer{padding:14px 16px 8px;border-radius:16px;background:var(--surf);border:1px solid var(--line);text-align:left}
.jbtitle b{display:block;font:700 17px var(--display);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jbtitle small{display:block;color:var(--muted);font-size:12.5px;line-height:1.35;margin-top:1px}
.jbseek{display:block;width:100%;margin:8px 0 0}
.jbtimes{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;margin-top:-2px}
.jbctl{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.jbctl button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--text);cursor:pointer;
  transition:background .18s,color .18s,transform .15s}
.jbctl button:hover{background:rgba(var(--tint),.07)}
.jbctl button:active{transform:scale(.92)}
.jbctl svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jbctl svg .f{fill:currentColor}
.jbctl .jbplay{width:58px;height:58px;background:linear-gradient(160deg,var(--accent-hi),var(--accent));color:var(--on-accent);
  box-shadow:0 6px 16px -6px var(--accent-glow)}
.jbctl .jbplay:hover{background:linear-gradient(160deg,var(--accent-hi),var(--accent));filter:brightness(1.08)}
.jbctl .jbplay svg{width:26px;height:26px}
.jbctl .jbtog{color:var(--muted);position:relative}
.jbctl .jbtog[aria-pressed="true"]{color:var(--accent-ink)}
.jbctl .jbtog[aria-pressed="true"]::after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.jblist{list-style:none;margin:10px 0 0;padding:0;border-radius:16px;background:var(--surf);border:1px solid var(--line);overflow:hidden;text-align:left}
.jblist button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 14px;border:0;border-top:1px solid var(--line);background:none;
  color:var(--text);font:500 14px var(--body);text-align:left;cursor:pointer}
.jblist li:first-child button{border-top:0}
.jblist button:hover{background:rgba(var(--tint),.04)}
.jblist .n{flex:none;width:18px;display:grid;place-items:center;color:var(--muted);font-variant-numeric:tabular-nums}
.jblist .n i{font-style:normal;font-size:13px}
.jblist .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jblist .d{flex:none;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.jblist button.on{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.jblist button.on .t{color:var(--accent-ink);font-weight:700}
/* the song playing: three bars bouncing in place of its number */
.jblist .eq{display:none;height:12px;align-items:flex-end;gap:2px}
.jblist button.live .n i{display:none}
.jblist button.live .eq{display:flex}
.jblist .eq b{width:3px;height:100%;border-radius:1px;background:var(--accent-ink);transform-origin:bottom;animation:jbEq .9s ease-in-out infinite}
.jblist .eq b:nth-child(2){animation-delay:-.3s}
.jblist .eq b:nth-child(3){animation-delay:-.6s}
@keyframes jbEq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.jblist .eq b{animation:none;transform:scaleY(.7)}}