/* J.P. Presents - Liquid Glass header, wings, menu, chat block. Built from jp-liquid-glass-header.html by build-dist.py */
/* v8 (Duane, 16 Oct 00:55 - "Adjust the glass with a frost and a slight blur"): desktops blur the page behind the glass a little (5 px;
   v7 had set 0). Every backdrop blur in the site's stylesheets reads var(--jp-bblur, <its own radius>); desktops set the variable to 5px,
   phones leave it unset (initial), so each rule's own (stronger) radius applies there. Phone = the site's html[data-device="phone"], a
   window up to 760 px wide, or a touch screen up to 500 px tall (a phone on its side). The pieces drawn as clear glass - THE WORD and its
   HAUS twin, the rolodex rails and their caps - keep their own .6 px everywhere (--jp-bblur: initial on them). The logo's own lens
   (--jp-blur) is the artwork, not a panel, and is unchanged. */
:root { --jp-bblur: 5px; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) { :root { --jp-bblur: initial; } }
html[data-device="phone"] { --jp-bblur: initial; }
.jp-chat-tab, .jp-roll-wheel, .jp-roll-btn { --jp-bblur: initial; }
/* Layout: full-bleed fixed header (search | glass logo | 3 nav sections), shrinks 350&rarr;200 on scroll; page styles only change tokens. */
:root {
  --bg: #0b0708;            /* near-black with a red bias (BlaQ & Red) */
  --bg-2: #15090c;
  --fg: #f3e9ea;
  --fg-dim: #a68f93;
  --accent: #e5202d;        /* JP red */
  --accent-2: #ff6b5e;
  --line: rgba(255,255,255,.10);
  --surface: rgba(255,255,255,.06);
  --hero-a: #e5202d; --hero-b: #2a0f14; --hero-c: #ffb347; --hero-d: #131316;

  /* glass contract &mdash; every logo variation / page style only overrides these */
  --jp-tint: #ffd2d6;        /* glass colour (page style tints it) */
  --jp-tint-amount: 26%;
  --jp-blur: 14px;
  --jp-refraction: 44;       /* px at 1024 reference size, + = outward (Apple look) */
  --jp-rim-a: #fff3f0;       /* key rim */
  --jp-rim-b: #ff8a7a;       /* counter rim */
  --jp-rim-a-strength: 1;
  --jp-rim-b-strength: .6;
  --jp-spill: .55;           /* light spill onto the page */
  --jp-streaks: .4;          /* light streaks from the lit edges, along the light direction */
  --jp-body: .38;            /* tinted glass body across the strokes (0 = pure refraction) */
  --jp-halo: .35;            /* soft tinted halo just outside the strokes (adds weight to thin marks) */

  --h-max: 241px; --h-min: 166px; --h-pad: 8px;   /* logo 225px -> 150px when scrolled, with an 8px cushion (logo = header height - 2 * pad) */
  --font-display: "Chakra Petch", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --font-body: "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg:#f6f1f1; --bg-2:#ebe2e3; --fg:#1a1113; --fg-dim:#6b5a5d; --line:rgba(0,0,0,.10); --surface:rgba(0,0,0,.05); color-scheme: light; }
}
:root[data-theme="light"] { --bg:#f6f1f1; --bg-2:#ebe2e3; --fg:#1a1113; --fg-dim:#6b5a5d; --line:rgba(0,0,0,.10); --surface:rgba(0,0,0,.05); color-scheme: light; }

/* ---- page styles: each assigns a tint to the glass + a palette to the page ---- */
:root[data-style="blaq-gold"]  { --accent:#d4a017; --accent-2:#ffb347; --hero-a:#d4a017; --hero-b:#1a1208; --hero-c:#ffb347; --hero-d:#0b0708; --jp-tint:#ffe9b8; --jp-rim-b:#ffcf6b; }
:root[data-style="blue-red"]   { --accent:#2457e6; --accent-2:#e5202d; --hero-a:#2457e6; --hero-b:#0b1230; --hero-c:#e5202d; --hero-d:#0a0a12; --jp-tint:#cfe0ff; --jp-rim-b:#ff6b5e; }
:root[data-style="red-blue"]   { --accent:#e5202d; --accent-2:#2457e6; --hero-a:#e5202d; --hero-b:#2a0f14; --hero-c:#2457e6; --hero-d:#0a0a12; --jp-tint:#ffd2d6; --jp-rim-b:#6b9bff; }
:root[data-style="lakers-home"]{ --accent:#fdb927; --accent-2:#552583; --hero-a:#fdb927; --hero-b:#2b1a3d; --hero-c:#552583; --hero-d:#120a19; --jp-tint:#fff0c2; --jp-rim-b:#c9a2ff; }
:root[data-style="lakers-road"]{ --accent:#552583; --accent-2:#fdb927; --hero-a:#552583; --hero-b:#1a0f28; --hero-c:#fdb927; --hero-d:#0d0812; --jp-tint:#e3d2ff; --jp-rim-b:#ffd36b; }
:root[data-style="all-blaq"]   { --accent:#d9d9d9; --accent-2:#777; --hero-a:#3a3a3f; --hero-b:#0a0a0b; --hero-c:#8a8a94; --hero-d:#050506; --jp-tint:#e8e8ee; --jp-rim-b:#b9b9c6; }
:root[data-style="white-solid"]{ --accent:#ffffff; --accent-2:#e5202d; --hero-a:#ffffff; --hero-b:#c9c9d2; --hero-c:#e5202d; --hero-d:#6a6a74; --jp-tint:#ffffff; --jp-tint-amount:28%; --jp-rim-b:#ffb3ab; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.55; padding-top: calc(var(--h-max) + env(safe-area-inset-top, 0px)); padding-left: var(--jp-chat-w); transition: padding-left .45s cubic-bezier(.2,.9,.3,1); }
/* ---- chat block on the left of the desktop: when it is open, the site frame (header, wings, menu) is everything to its right ---- */
:root { --jp-chat-w: 0px; --jp-chat-size: 380px; }
html:not([data-device="phone"]) { &[data-chat="open"] { --jp-chat-w: var(--jp-chat-size); } }
.jp-chat { position: fixed; top: 0; bottom: 0; left: 0; width: var(--jp-chat-size); max-width: 100vw; z-index: 70; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; color: #f3e9ea; background: color-mix(in srgb, var(--hero-d) 82%, #000); border-right: 1px solid rgba(255,255,255,.14); box-shadow: 8px 0 30px rgba(0,0,0,.35); transform: translateX(-100%); transition: transform .45s cubic-bezier(.2,.9,.3,1); -webkit-backdrop-filter: blur(var(--jp-bblur, 18px)); backdrop-filter: blur(var(--jp-bblur, 18px)); }
html[data-chat="open"] .jp-chat { transform: none; }
.jp-chat__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px; font: 600 13px var(--font-display); letter-spacing: .18em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.12); }
.jp-chat__head b { color: var(--accent); }
.jp-chat__close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.35); color: #fff; cursor: pointer; font-size: 16px; display: grid; place-items: center; }
.jp-chat__close:hover { background: var(--accent); border-color: var(--accent); }
.jp-chat__who { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 600 11px var(--font-body); letter-spacing: .02em; text-transform: none; color: rgba(243,233,234,.8); }
.jp-chat__who img, .jp-chat__who i { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; background: var(--accent); font: 700 9px var(--font-display); font-style: normal; color: #fff; }
.jp-chat__rooms { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; max-height: 132px; overflow-y: auto; scrollbar-width: none; border-bottom: 1px solid rgba(255,255,255,.1); }
.jp-chat__group { flex-basis: 100%; font: 600 9px var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: rgba(243,233,234,.45); margin: 4px 2px 0; }
.jp-chat__group:first-child { margin-top: 0; }
.jp-chat__room[data-phase="upcoming"] { opacity: .6; } .jp-chat__room[data-phase="closing"] { border-color: #ff2a2a; } .jp-chat__room[data-phase="closed"] { display: none; }
.jp-chat__room em { font-style: normal; margin-left: 6px; font-weight: 700; color: #ffd27a; }
.jp-chat__room[data-locked="1"] { opacity: .45; }
.jp-chat__teamsbtn { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.35); color: #fff; font: 700 10px var(--font-display); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.jp-chat__teamsbtn:hover { background: var(--accent); border-color: var(--accent); }
.jp-chat__teamsbtn[hidden] { display: none; }
.jp-chat__count { padding: 10px 16px; font: 600 11px var(--font-display); letter-spacing: .16em; text-transform: uppercase; text-align: center; color: #ffd27a; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(255,210,122,.06); }
.jp-chat__count[hidden] { display: none; } .jp-chat__count[data-phase="closing"] { color: #ff6a6a; background: rgba(255,42,42,.08); }
.jp-chat__count b { font-variant-numeric: tabular-nums; }
.jp-chat__teams { position: absolute; inset: 0; z-index: 2; background: color-mix(in srgb, var(--hero-d) 92%, #000); padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-rows: auto 1fr auto; gap: 12px; overflow: hidden; }
.jp-chat__teams[hidden] { display: none; }
.jp-chat__teamlist { overflow: auto; display: grid; gap: 8px; align-content: start; }
.jp-chat__teamlist h4 { margin: 8px 0 2px; font: 600 10px var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: rgba(243,233,234,.5); }
.jp-chat__team { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); cursor: pointer; font: 600 13px var(--font-body); color: #fff; }
.jp-chat__team i { width: 14px; height: 14px; border-radius: 50%; background: var(--c, #999); flex: 0 0 auto; box-shadow: 0 0 8px var(--c, #999); }
.jp-chat__team input { margin-left: auto; width: 18px; height: 18px; accent-color: var(--accent); }
.jp-chat__bracket { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.jp-chat__team--tbd { opacity: .45; cursor: default; border-style: dashed; }
.jp-chat__team--tbd small { margin-left: auto; font: 500 9px var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.jp-chat__teamact { display: flex; gap: 8px; }
.jp-chat__btn { flex: 1; height: 42px; border-radius: 999px; border: 0; background: var(--accent); color: #fff; font: 700 12px var(--font-display); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.jp-chat__btn--ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); }
.jp-chat { position: fixed; }
.jp-chat__rooms:empty { display: none; }
.jp-chat__room { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: rgba(243,233,234,.8); font: 600 10px var(--font-display); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.jp-chat__room[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.jp-chat__room b { margin-left: 6px; font-weight: 700; color: #fff; opacity: .9; }
.jp-chat__log { overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.jp-chat__msg img.jp-chat__av { width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px; margin-right: 6px; }
.jp-chat__msg--sys { align-self: center; background: none; font: 500 10px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: rgba(243,233,234,.5); padding: 4px 0; }
.jp-chat__signin { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 16px calc(14px + env(safe-area-inset-bottom, 0px)); height: 44px; border-radius: 999px; background: #5865F2; color: #fff; text-decoration: none; font: 700 12px var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.jp-chat__signin svg { width: 20px; height: 20px; }
.jp-chat__signin:hover { filter: brightness(1.1); }
.jp-chat__signin[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.jp-chat__gate { padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; }
.jp-chat__gate[hidden] { display: none; }
.jp-chat__rules { margin: 0; font: 400 12px/1.45 var(--font-body); color: rgba(243,233,234,.78); }
.jp-chat__rules b { color: #fff; font-weight: 700; }
.jp-chat__agree { display: flex; align-items: flex-start; gap: 10px; font: 500 12px/1.4 var(--font-body); color: #fff; cursor: pointer; }
.jp-chat__agree input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.jp-chat__gate .jp-chat__signin { margin: 0; }
.jp-chat__src { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 999px; font: 600 9px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.14); vertical-align: 1px; }
.jp-chat__src--twitch { background: #9146FF; } .jp-chat__src--youtube { background: #e62117; } .jp-chat__src--kick { background: #53FC18; color: #000; } .jp-chat__src--discord { background: #5865F2; }
.jp-chat__room i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff2a2a; margin-left: 7px; box-shadow: 0 0 6px #ff2a2a; animation: jp-live 1.2s ease-in-out infinite; }
@keyframes jp-live { 50% { opacity: .35; } }
.jp-chat[data-locked="true"] .jp-chat__form { display: none; }
.jp-chat__msg { max-width: 85%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: rgba(255,255,255,.08); font-size: 14px; line-height: 1.4; }
.jp-chat__msg--me { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: color-mix(in srgb, var(--accent) 55%, #000); }
.jp-chat__msg small { display: block; font: 500 10px var(--font-display); letter-spacing: .14em; text-transform: uppercase; opacity: .55; margin-bottom: 4px; }
.jp-chat__form { display: flex; gap: 8px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255,255,255,.12); }
.jp-chat__form input { flex: 1; min-width: 0; height: 42px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.4); color: #fff; padding: 0 16px; font: 500 14px var(--font-body); }
.jp-chat__form button { height: 42px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--accent); color: #fff; font: 700 12px var(--font-display); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
/* "THE WORD" tab: clear liquid glass on the left edge with a bevelled, refracting rim; red glowing type that beats on hover;
   hover = a black cloud that slowly fills the glass; drags up/down on desktop */
.jp-chat-tab { position: fixed; left: 0; top: var(--jp-tab-y, 50%); z-index: 69; transform: translate(0, -50%); writing-mode: vertical-rl; padding: 20px 7px; border-radius: 0 16px 16px 0; border: 0; overflow: hidden; isolation: isolate;
  background: transparent; color: var(--accent); font: 700 12px var(--font-display); letter-spacing: .28em; text-transform: uppercase; cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation;
  -webkit-backdrop-filter: blur(var(--jp-bblur, .6px)) saturate(1.2) brightness(1.02); backdrop-filter: blur(var(--jp-bblur, .6px)) saturate(1.2) brightness(1.02);   /* clear: the page reads straight through */
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
  transform-origin: 0 50%; transition: transform .45s cubic-bezier(.2,.9,.3,1); }
/* words: white with a black stroke at rest; on hover they turn red and light up */
.jp-chat-tab__txt { display: inline-block; color: #fff; -webkit-text-stroke: 1.2px #000; paint-order: stroke fill; text-shadow: 0 1px 2px rgba(0,0,0,.6); transform-origin: 50% 50%; transition: color .35s, text-shadow .45s; }
@media (hover: hover) { .jp-chat-tab:hover .jp-chat-tab__txt { color: var(--accent); text-shadow: 0 0 5px color-mix(in srgb, var(--accent) 85%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 30px color-mix(in srgb, var(--accent) 25%, transparent); } }
/* bevel: a 1.5 px rim that refracts (sharper, brighter, slightly shifted backdrop) with a light-from-top-left highlight and a shadowed far edge */
.jp-chat-tab::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  -webkit-backdrop-filter: brightness(1.6) contrast(1.2) saturate(1.5); backdrop-filter: brightness(1.6) contrast(1.2) saturate(1.5);
  background: linear-gradient(160deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.28) 28%, rgba(255,255,255,.1) 50%, rgba(0,0,0,.3) 72%, rgba(255,255,255,.45) 100%); }
/* hover: a blackish cloud grows from the middle and slowly fills the glass; the words keep glowing on top of it and start to beat */
.jp-chat-tab::after { content: ""; position: absolute; z-index: -2; inset: -30%; pointer-events: none; opacity: 0; scale: .25; filter: blur(9px);
  background: radial-gradient(closest-side at 50% 42%, rgba(0,0,0,.92), rgba(0,0,0,.72) 45%, rgba(0,0,0,.3) 70%, transparent 100%), radial-gradient(closest-side at 40% 70%, rgba(0,0,0,.8), transparent 80%);
  transition: opacity 1.4s ease-out, scale 2.2s cubic-bezier(.15,.6,.2,1); }
@media (hover: hover) { .jp-chat-tab:hover::after { opacity: 1; scale: 1.35; } }
/* smoke: a 101-frame sprite (assets/jp-smoke.webp, 30 fps, smoke rolls in from the right) scrubbed on a canvas inside the tab —
   plays forward while the mouse / finger is on the tab, reverses from wherever it is the instant they leave. Replaces the CSS cloud once loaded. */
.jp-chat-tab__smoke { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; display: block; }
.jp-chat-tab[data-smoke="ready"]::after { display: none; }
@media (hover: hover) { .jp-chat-tab:hover .jp-chat-tab__txt { animation: jp-tab-beat .86s cubic-bezier(.4, 0, .3, 1) infinite; } }
@keyframes jp-tab-beat {                                                   /* the logo's lub-dub (0.86 s): words swell 4% then 2.5% and flare */
  0% { scale: 1; filter: brightness(1); } 11% { scale: 1.04; filter: brightness(1.45); } 24% { scale: 1; filter: brightness(1); }
  34% { scale: 1.025; filter: brightness(1.25); } 50% { scale: 1; filter: brightness(1); } 100% { scale: 1; filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .jp-chat-tab:hover .jp-chat-tab__txt { animation: none; } }
/* open: the tab flips to the inside of the chat frame (flush with its right edge, rounded towards the chat) and reads CLOSE */
html[data-menu="open"]:not([data-chat="open"]) .jp-chat-tab { transform: translate(-110%, -50%); box-shadow: none; }   /* menu open: the tab tucks off the edge of the screen */
html[data-chat="open"] .jp-chat-tab { z-index: 71; transform: translate(calc(var(--jp-chat-size) - 100%), -50%); border-radius: 16px 0 0 16px; }
html[data-chat="open"] .jp-chat-tab .jp-chat-tab__txt { rotate: 180deg; }                  /* mirrored with the tab: the letters' tops face the rounded edge, as they do when closed */
/* touch screens: the tab is clipped with clip-path as well as overflow (iOS paints blurred, blended and animated children past a rounded overflow clip);
   its drop shadow goes with it, which only matters on desktops, where overflow is enough */
html[data-touch="1"] .jp-chat-tab { clip-path: inset(0 round 0 16px 16px 0); }
html[data-touch="1"][data-chat="open"] .jp-chat-tab { clip-path: inset(0 round 16px 0 0 16px); }
html[data-chat="open"] .jp-chat { padding-right: 32px; }                     /* keep the chat's content clear of the tab */
/* phones: the tab sits on the bottom edge, horizontal; the chat is full screen and the tab stays on the bottom edge (reading CLOSE) above the input */
html[data-device="phone"] {
  .jp-chat { width: 100vw; }
  .jp-chat-tab { top: auto; left: 50%; bottom: 0; transform: translate(-50%, 0); writing-mode: horizontal-tb; padding: 9px 22px calc(9px + env(safe-area-inset-bottom, 0px)); border-radius: 16px 16px 0 0; transform-origin: 50% 100%; }
  &[data-menu="open"]:not([data-chat="open"]) .jp-chat-tab { transform: translate(-50%, 110%); }
  &[data-chat="open"] .jp-chat-tab { transform: translate(-50%, 0); border-radius: 16px 16px 0 0; }
  .jp-chat-tab, &[data-chat="open"] .jp-chat-tab { clip-path: inset(0 round 16px 16px 0 0); }
  &[data-chat="open"] .jp-chat-tab .jp-chat-tab__txt { rotate: 0deg; }
  &[data-chat="open"] .jp-chat { padding-right: 0; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ============ HEADER ============ */
.jp-header {
  position: fixed; top: 0; left: var(--jp-chat-w); right: 0; z-index: 50;
  height: calc(var(--h-max) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--hero-d) 70%, transparent), color-mix(in srgb, var(--hero-d) 30%, transparent) 70%, transparent);
  transition: height .55s cubic-bezier(.2,.9,.3,1), left .45s cubic-bezier(.2,.9,.3,1);
}
@supports (animation-timeline: scroll()) { .jp-header { animation: jp-shrink auto linear both; animation-timeline: scroll(block root); animation-range: 0px 100px; } }   /* scroll-linked shrink where supported; elsewhere the JS sets the height (a 0 s fallback animation pinned Safari's header) */
/* menu open: the wings retract and the header settles to its compact (scrolled) size, so the menu moves up under the logo */
html[data-menu="open"] .jp-header { animation: none; height: calc(var(--h-min) + env(safe-area-inset-top, 0px)); }
@keyframes jp-shrink { to { height: calc(var(--h-min) + env(safe-area-inset-top, 0px)); } }
@media (prefers-reduced-motion: reduce) { .jp-header { animation: none; } }
/* wings: one horizontal line whose bottom edge sits on the logo's bottom edge; they shoot out from the logo */
.jp-wing { display: grid; height: 100%; align-items: start; padding-top: env(safe-area-inset-top, 0px); min-width: 0; transition: opacity .3s; will-change: transform, clip-path; }
/* the inner ends reach under the logo and are cut by a circle around it, so logo + wings read as one ring-shaped unit */
.jp-header { --logo-size: 225px; --ring-edge: 0.43; --ring-gap: 6px; --ring-reach: 0.5; }   /* ring-edge: the drawn circle's radius as a fraction of the box (artwork fills 86%); ring-gap: clear space outside that curve */   /* reach 0.5: the two wings meet behind the logo, no space between them */
/* mask: the ring cut around the logo. The leading edge is a per-frame clip-path polygon: straight across the top, curtain-swept at the bottom (two springs) */
.jp-wing--left  { padding-right: 0; margin-right: calc(var(--logo-size) * -1 * var(--ring-reach)); transform-origin: 100% 50%; opacity: 0; pointer-events: none;
  -webkit-mask: radial-gradient(circle at calc(100% + var(--logo-size) * (0.5 - var(--ring-reach))) calc(var(--h-pad) + env(safe-area-inset-top, 0px) + var(--logo-size) / 2), transparent calc(var(--logo-size) * var(--ring-edge) + var(--ring-gap)), #000 calc(var(--logo-size) * var(--ring-edge) + var(--ring-gap) + 1px));
  mask: radial-gradient(circle at calc(100% + var(--logo-size) * (0.5 - var(--ring-reach))) calc(var(--h-pad) + env(safe-area-inset-top, 0px) + var(--logo-size) / 2), transparent calc(var(--logo-size) * var(--ring-edge) + var(--ring-gap)), #000 calc(var(--logo-size) * var(--ring-edge) + var(--ring-gap) + 1px)); }
.jp-wing--right { grid-template-columns: repeat(3, 1fr); padding-left: 0; margin-left: calc(var(--logo-size) * -1 * var(--ring-reach)); transform-origin: 0% 50%; opacity: 0; pointer-events: none;
  -webkit-mask: radial-gradient(circle at calc(0% - var(--logo-size) * (0.5 - var(--ring-reach))) calc(var(--h-pad) + env(safe-area-inset-top, 0px) + var(--logo-size) / 2), transparent calc(var(--logo-size) * var(--ring-edge) + var(--ring-gap)), #000 calc(var(--logo-size) * var(--ring-edge) + var(--ring-gap) + 1px));
  mask: radial-gradient(circle at calc(0% - var(--logo-size) * (0.5 - var(--ring-reach))) calc(var(--h-pad) + env(safe-area-inset-top, 0px) + var(--logo-size) / 2), transparent calc(var(--logo-size) * var(--ring-edge) + var(--ring-gap)), #000 calc(var(--logo-size) * var(--ring-edge) + var(--ring-gap) + 1px)); }
.jp-wing { visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.jp-header[data-wings="open"] .jp-wing { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; pointer-events: auto; }
/* liquid wobble while moving: turbulence displacement on the glass pieces, scaled by velocity (removed at rest so text stays crisp) */
.jp-wing[data-moving="1"] .jp-search, .jp-wing[data-moving="1"] .jp-nav-item { filter: url(#jp-liquid); }
@media (prefers-reduced-motion: reduce) { .jp-wing { transition: opacity .2s; } }
/* first-session intro: the hint line appears below the logo, a glass streak rolls across the letters once, it fades, then the logo moves up */
.jp-hint { position: absolute; left: 50%; bottom: 0; height: 28px; line-height: 28px; transform: translateX(-50%); font: 600 11px/28px var(--font-display); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; pointer-events: none; display: none;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, rgba(243,233,234,.45) 0 38%, #fff 46%, var(--jp-rim-a) 50%, #fff 54%, rgba(243,233,234,.45) 62% 100%); background-size: 260% 100%; background-position: 120% 0; }
.jp-header[data-intro="on"] { --h-max: 269px; }
.jp-header[data-intro="on"] .jp-hint { display: block; animation: jp-hint-streak 2.4s cubic-bezier(.3,.6,.3,1) .5s 1 both, jp-hint-out .55s ease 3.3s 1 forwards; }
/* v10 (Duane, 16 Oct 21:43: the logo must be the same size every time the site launches): during the intro the hint's 28 px room is
   taken at the slot's BOTTOM and the logo is moved down by a transform, so the logo (= header height - the slot's paddings) is 225 px
   from the first paint, through the intro and after it: the header's height and the padding change at the same instant (no
   transition on either), only the transform eases. Before, the padding eased while the height snapped and the logo dipped to 197 px. */
.jp-header[data-intro="on"] .jp-logo-slot { padding-bottom: calc(var(--h-pad) + 28px); transform: translateY(28px); }
.jp-logo-slot { transition: transform .55s cubic-bezier(.2,.9,.3,1); }
@keyframes jp-hint-streak { from { background-position: 120% 0; opacity: 0; } 12% { opacity: 1; } to { background-position: -20% 0; opacity: 1; } }
@keyframes jp-hint-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .jp-header[data-intro="on"] .jp-hint { animation: jp-hint-out .4s ease 2.6s 1 forwards; background-image: none; color: var(--fg-dim); } .jp-logo-slot { transition: none; } }

/* glass edge: two bevels (a bright lip + a softer second step at the top, a dark lip + soft step at the bottom) */
.jp-search, .jp-nav-item, .jp-menu__tile {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 3px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.42), inset 0 -3px 0 rgba(255,255,255,.07), inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(0,0,0,.18); }

/* left wing: the search box runs from the screen edge to the logo (the wordmark lives in the menu grid, not here) */
.jp-wing__row { display: grid; grid-template-columns: 1fr; align-items: stretch; min-width: 0; }
.jp-search { border-left: 0; }

/* search: flush to the left screen edge */
.jp-search { display: flex; align-items: center; gap: 10px; height: 52px; width: 100%; margin: 0; border: 1px solid var(--line); border-left: 0; background: rgba(0,0,0,.42); color: #fff; padding: 0 14px 0 max(16px, env(safe-area-inset-left, 0px)); backdrop-filter: blur(var(--jp-bblur, 10px)) brightness(.5) contrast(1.05); -webkit-backdrop-filter: blur(var(--jp-bblur, 10px)) brightness(.5) contrast(1.05); }
.jp-search input { flex: 1; min-width: 0; background: none; border: 0; color: #fff; font: 500 16px var(--font-body); }
.jp-search input::placeholder { color: rgba(255,255,255,.62); }
.jp-search:focus-within { background: #000; color: #fff; border-color: #000; }
.jp-search:focus-within input { color: #fff; caret-color: #fff; outline: none; }
.jp-search:focus-within input::placeholder { color: #9a9a9a; }
.jp-search:focus-within svg, .jp-search:focus-within kbd { color: #d0d0d0; border-color: #3a3a3a; }
.jp-search svg { flex: none; width: 20px; height: 20px; color: var(--fg-dim); }
.jp-search kbd { font: 600 11px var(--font-display); letter-spacing: .08em; color: var(--fg-dim); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }

/* the three right sections share the wing evenly; last one is flush to the right edge */
.jp-nav-item { height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line); border-right-width: 0; background: rgba(0,0,0,.42); color: #fff; text-decoration: none; cursor: pointer; font: 600 15px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(var(--jp-bblur, 10px)) brightness(.5) contrast(1.05); -webkit-backdrop-filter: blur(var(--jp-bblur, 10px)) brightness(.5) contrast(1.05); transition: background .2s, color .2s; }
.jp-nav-item:last-child { border-right-width: 1px; border-right: 0; padding-right: env(safe-area-inset-right, 0px); }
.jp-nav-item:hover { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.jp-nav-item--qonqer { color: #fff; font-weight: 700; letter-spacing: .14em; font-size: 17px; }
.jp-nav-item--qonqer:hover { background: var(--accent); color: #fff; }
.jp-burger { width: 22px; height: 14px; display: grid; gap: 4px; }
.jp-burger i { display: block; height: 2px; background: currentColor; border-radius: 2px; }
.jp-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font: 700 12px var(--font-display); letter-spacing: .05em; overflow: hidden; }
.jp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jp-nav-item[data-state="in"] .jp-signin-label, .jp-nav-item:not([data-state="in"]) .jp-profile { display: none; }
.jp-profile { display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: .04em; font-family: var(--font-body); font-weight: 700; }

.jp-logo-slot { z-index: 2; pointer-events: none; }
jp-liquid-logo { pointer-events: none; }
jp-liquid-logo .lg-hit { pointer-events: auto; }
.jp-wing { z-index: 1; position: relative; }

/* logo slot: the logo is a square that fills the header height minus padding */
.jp-logo-slot { position: relative; height: 100%; padding: var(--h-pad) 0; display: grid; place-items: center; }
jp-liquid-logo { display: block; height: 100%; aspect-ratio: 1; position: relative; will-change: transform; transform-style: flat; -webkit-user-select: none; user-select: none; touch-action: manipulation; }

/* ============ LIQUID GLASS LOGO (component) ============ */
/* the light glow is a separate layer BEHIND the logo (inserted by the component as a sibling), so the glass refracts it and it never spins with the logo */
.jp-glow { position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; mix-blend-mode: screen; opacity: var(--jp-spill); filter: blur(26px); background: radial-gradient(circle at var(--lx, 30%) var(--ly, 25%), color-mix(in srgb, var(--jp-rim-a) 70%, var(--accent)) 0%, color-mix(in srgb, var(--jp-rim-b) 40%, transparent) 22%, transparent 44%); transition: opacity .3s; }
jp-liquid-logo { z-index: 1; }
/* glass body: the backdrop effect lives on .lg-glass, but the silhouette is cut by its PARENT (.lg-glass-wrap) — a mask on the same
   element as a backdrop-filter is ignored by WebKit (and some GPU paths), which showed up as a blurred square/disc around the mark.
   The wrap carries the matte mask + a circular clip + overflow clipping, so only the strokes can ever show. */
jp-liquid-logo .lg-glass-wrap { position: absolute; inset: 0; pointer-events: none; overflow: hidden; clip-path: circle(47.5% at 50% 50%); isolation: isolate;
  -webkit-mask: var(--jp-matte-url) center / contain no-repeat; mask: var(--jp-matte-url) center / contain no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; }
jp-liquid-logo .lg-glass { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--jp-matte-url) center / contain no-repeat; mask: var(--jp-matte-url) center / contain no-repeat;
  background: color-mix(in srgb, var(--jp-tint) var(--jp-tint-amount), transparent);
  -webkit-backdrop-filter: blur(var(--jp-blur)) saturate(1.35) brightness(1.08); backdrop-filter: blur(var(--jp-blur)) saturate(1.35) brightness(1.08); }
jp-liquid-logo[data-refract="on"] .lg-glass { backdrop-filter: blur(var(--jp-blur)) saturate(1.35) brightness(1.08) url(#jp-refract-filter); }
jp-liquid-logo .lg-rim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
jp-liquid-logo .lg-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
jp-liquid-logo .lg-hit { position: absolute; inset: 0; cursor: pointer; border-radius: 50%; outline: none; -webkit-tap-highlight-color: transparent; }
jp-liquid-logo .lg-hit:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 4px; }   /* keyboard focus only, and round */

/* ============ FULL-SCREEN MENU (same glass structure: blurred, tinted, rimmed rows) ============ */
.jp-menu { position: fixed; inset: 0; left: var(--jp-chat-w); z-index: 40; display: grid; grid-template-rows: 1fr; padding-top: calc(var(--h-menu) + env(safe-area-inset-top, 0px)); color: #f3e9ea; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; overflow: hidden; isolation: isolate; }   /* desktop: the grid is sized to the screen, nothing scrolls; it starts right under the compact header */
html[data-device="phone"] { .jp-menu { grid-template-rows: 1fr auto; overflow: hidden; } }
/* frost: 90% opaque glass over the page, heavily blurred */
.jp-menu__frost { position: fixed; inset: 0; left: var(--jp-chat-w); z-index: -2; background: color-mix(in srgb, var(--hero-d) 90%, transparent); -webkit-backdrop-filter: blur(var(--jp-bblur, 26px)) saturate(1.25); backdrop-filter: blur(var(--jp-bblur, 26px)) saturate(1.25); opacity: 0; transition: opacity .5s ease; }
.jp-menu[data-frost="true"] .jp-menu__frost { opacity: 1; }
/* desktop menu background, bottom to top: dark houndstooth -> a faint light that follows the mouse -> the red floral (white keyed out, so
   the light shines through its gaps) -> edges faded to black. In by the time the menu is up (0.5 s). */
.jp-menu__bg { position: fixed; inset: 0; left: var(--jp-chat-w); z-index: -2; pointer-events: none; display: none; overflow: hidden; background: #000; opacity: 0; transition: opacity .5s ease; --mx: 50%; --my: 42%; }
.jp-menu__bg > i { position: absolute; inset: 0; display: block; }
.jp-menu__bg .hound  { background: url("../images/jp-houndstooth.jpg") center top / 1100px auto repeat; filter: brightness(.62); }
.jp-menu__bg .light  { mix-blend-mode: screen; opacity: var(--li, 1); will-change: opacity; overflow: hidden; }   /* v12: the light is the spot below, carried by a transform (jp-liquid-glass.js) - v11 re-painted this whole layer's gradient every frame while the menu was open */
.jp-menu__bg .light::after { content: ""; position: absolute; left: -264px; top: -264px; width: 528px; height: 528px; will-change: transform; transform: var(--mt, translate(50vw, 42vh));
  background: radial-gradient(circle 231px at 50% 50%, rgba(255,226,204,.42) 0%, rgba(255,150,120,.16) 38%, transparent 72%); }   /* --lr / --li: radius and strength, pulsed with the logo's heartbeat while the mouse is still */
.jp-menu__bg .floral { background: url("../images/jp-floral-red.webp") center top / 1100px auto repeat; filter: brightness(.74); }
.jp-menu__bg .edge   { background: radial-gradient(ellipse 70% 68% at 50% 50%, transparent 52%, rgba(0,0,0,.72) 88%, #000 100%); box-shadow: inset 0 0 140px 30px #000; }
.jp-menu[data-frost="true"] .jp-menu__bg { opacity: 1; }
/* colour flood: the page's logo colours light up from the centre and fill the box */
.jp-menu__flood { position: fixed; left: calc(var(--jp-chat-w) + (100vw - var(--jp-chat-w)) / 2); top: 50%; z-index: -1; width: 160vmax; aspect-ratio: 1; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(0.02); opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 85%, #fff) 0%, var(--accent) 14%, color-mix(in srgb, var(--accent-2) 80%, var(--hero-b)) 34%, color-mix(in srgb, var(--hero-c) 60%, transparent) 52%, transparent 68%);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.jp-menu[data-frost="true"] .jp-menu__flood { transform: translate(-50%, -50%) scale(1); opacity: .78; }   /* 25% brighter than the original .62 */
.jp-menu::before { content: ""; position: fixed; inset: 0; left: var(--jp-chat-w); pointer-events: none; z-index: -1; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px calc(100% / 6)); }
@media (prefers-reduced-motion: reduce) { .jp-menu__flood { transition: opacity .3s; transform: translate(-50%, -50%) scale(1); } }
.jp-menu[data-open="true"] { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }
/* box grid: an even number of columns per screen size (4 on wide desktops, 2 on laptops), one stacked column on phones */
/* desktop (Urwerk template): a 200px top bar, then rows of boxes that fill the rest of the screen edge to edge */
.jp-menu__grid { position: relative; z-index: 1; display: grid; grid-template-rows: var(--top-h, 200px) minmax(0, 1fr); gap: var(--mgap); height: 100%; min-height: 0; box-sizing: border-box; padding: var(--mgap) var(--mgap) calc(var(--mgap) + env(safe-area-inset-bottom, 0px)); --mgap: 10px; }   /* top row: the height of the Just Win wordmark (+ padding), never more than 200 px; the boxes below share the rest exactly */
.jp-menu__top { display: grid; grid-template-columns: 1.7fr 3.2fr 1fr 1fr 1fr; gap: var(--mgap); min-height: 0; }
.jp-menu__top .jp-menu__tile:not(.jp-menu__tile--image):not(.jp-menu__tile--search) { font-size: clamp(9px, min(9.5cqw, 11cqh), 18px); letter-spacing: .08em; padding-left: clamp(6px, 4cqw, 20px); padding-right: clamp(6px, 4cqw, 20px); }   /* short top-row boxes keep their labels inside when the frame narrows (chat open, small windows) */
.jp-menu__top .jp-menu__tile span { gap: .5em; }
.jp-menu__top[data-short="true"] .jp-menu__tile small { display: none; }                         /* short top row: labels only */
.jp-menu__top[data-short="true"] .jp-search--menu { height: clamp(30px, 56cqh, 42px); }
.jp-menu__top[data-short="true"] .jp-menu__tile--image { padding: 6px 10px; }   /* search is the longest box; QONQER!, Sign-In and Menu Close share one width */
.jp-menu__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mgap); grid-template-columns: repeat(var(--cols, 4), 1fr); grid-auto-rows: minmax(0, 1fr); align-content: stretch; min-height: 0; }
.jp-menu__card { min-height: 0; min-width: 0; display: grid; }
/* ---- mobile: a rolodex. The list is a native vertical scroller (momentum + snap); each card is tilted around the X axis by its
   distance from the centre line, like cards on a rolodex wheel. Hold a card for 1 s: double haptic, two fast inverse flashes, then it opens. */
html[data-device="phone"] {
  .jp-menu__grid { display: block; padding: var(--roll-pad-top, var(--roll-pad, 40vh)) 14px var(--roll-pad, 40vh); height: 100%; min-height: 0; box-sizing: border-box; background: none; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y proximity; overflow-anchor: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  .jp-menu__grid::-webkit-scrollbar { display: none; }
  .jp-menu__top, .jp-menu__rows { display: contents; }
  .jp-menu__card { display: block; scroll-snap-align: center; padding: 5px 0; position: relative; will-change: transform, opacity; }   /* perspective is applied per card (flat), so hit-testing stays exact */
  .jp-menu__card.has-expanded { transform: none !important; will-change: auto; z-index: 300 !important; }   /* no transform, so the full-page card is fixed to the viewport, not the card */
  .jp-menu__card.is-active .jp-menu__tile { border-color: rgba(255,255,255,.42); background: color-mix(in srgb, var(--accent) 22%, color-mix(in srgb, var(--jp-tint) 10%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.35); }
  .jp-menu__tile--image { min-height: 96px; }
  .jp-menu__roll-line { position: absolute; left: 10px; right: 10px; top: 50%; height: 0; pointer-events: none; z-index: 2; }
  .jp-menu__roll-line::before, .jp-menu__roll-line::after { content: ""; position: absolute; top: -1px; width: 14px; height: 2px; background: rgba(255,255,255,.55); }
  .jp-menu__roll-line::before { left: -4px; } .jp-menu__roll-line::after { right: -4px; }
  /* v10 (Duane, 17 Oct): the hint sits right under the media panel, inside the first card, so it rolls up with the card; black letters with a 2 px gold stroke
     (paint-order keeps the black fill on top of the stroke, so the letters stay readable) */
  .jp-menu__hint { position: relative; z-index: 1; margin-top: calc(var(--menu-media-h) * .15 + 6px); text-align: center; padding: 0 14px; font: 700 12px/1.3 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #000; -webkit-text-stroke: 2px var(--gold, #d4a017); paint-order: stroke fill; }
  /* hold feedback: two fast inverse flashes */
  .jp-menu__tile.is-holding { outline: 2px solid rgba(255,255,255,.35); outline-offset: -2px; }
  .jp-menu__tile.is-flash { animation: jp-inverse-flash .36s steps(1, end) 1; }
  @keyframes jp-inverse-flash { 0%, 50% { filter: invert(1) hue-rotate(180deg); } 25%, 75% { filter: none; } 100% { filter: none; } }
  /* an expanded multi-selection tile becomes the full page, Back in the centre */
  .jp-menu__tile[data-expanded="true"] { position: fixed; left: 10px; right: 10px; top: calc(var(--h-min) + env(safe-area-inset-top, 0px) + 10px); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 6; min-height: 0; height: auto; transform: none; background: color-mix(in srgb, var(--hero-d) 78%, color-mix(in srgb, var(--accent) 30%, transparent)); -webkit-backdrop-filter: blur(var(--jp-bblur, 22px)) saturate(1.2); backdrop-filter: blur(var(--jp-bblur, 22px)) saturate(1.2); }
  .jp-menu__tile[data-expanded="true"] .jp-sub { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; padding: 18px; gap: 14px; }
  .jp-menu__tile[data-expanded="true"] .jp-sub__group { gap: 10px; }
  .jp-menu__tile[data-expanded="true"] .jp-sub__opt { font-size: 15px; padding: 12px 22px; }
  .jp-menu__tile[data-expanded="true"] .jp-sub__back { font-size: 13px; padding: 14px 26px; }
}
html:not([data-device="phone"]) { .jp-menu__roll-line, .jp-menu__hint, .jp-roll-wheel, .jp-roll-btn { display: none !important; } }   /* phones only: the rolodex furniture never exists on tablets or desktops, whatever the window width */
/* phone rolodex scroll wheels: 7 x 400 px liquid-glass rails on both edges with a round tick per card; drag a rail to flip fast (haptic per card), tap a tick to go there */
.jp-roll-wheel { position: fixed; top: 50%; width: 7px; height: min(400px, 72vh); transform: translateY(-50%); z-index: 60;   /* above the header (50) and the menu (40), under the chat (70) */ border-radius: 4px; touch-action: none; cursor: pointer;
  background: transparent; -webkit-backdrop-filter: blur(var(--jp-bblur, .6px)) saturate(1.2) brightness(1.02); backdrop-filter: blur(var(--jp-bblur, .6px)) saturate(1.2) brightness(1.02); box-shadow: 0 6px 18px rgba(0,0,0,.3);
  display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; opacity: 0; pointer-events: none; transition: opacity .3s; }
.jp-roll-wheel--l { left: 6px; } .jp-roll-wheel--r { right: 6px; }
html[data-menu="open"] .jp-roll-wheel { opacity: 1; pointer-events: auto; }
html[data-sub-open="true"] .jp-roll-wheel { opacity: 0; pointer-events: none; }   /* v13b: was html:has(.jp-menu__tile[data-expanded="true"]) - a :has() on <html> re-styled the whole page at every DOM change */
.jp-roll-wheel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;                     /* the same 1 px bevel as the tab */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  background: linear-gradient(170deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.28) 28%, rgba(255,255,255,.1) 50%, rgba(0,0,0,.3) 72%, rgba(255,255,255,.45) 100%); }
.jp-roll-wheel::after { content: ""; position: absolute; inset: -6px -16px; }                                                                        /* finger-sized hit zone around the 7 px rail */
.jp-roll-wheel i { position: relative; z-index: 1; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 .5px rgba(0,0,0,.5); transition: background .2s, box-shadow .2s, transform .2s; }
/* the wheels' end caps: an up arrow above each rail (straight back to the top) and an X below each (closes the menu) — same glass */
.jp-roll-btn { --wh: min(400px, 72vh); position: fixed; z-index: 60; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; font: 700 14px/1 var(--font-display); -webkit-text-stroke: .8px #000; paint-order: stroke fill; text-shadow: 0 1px 2px rgba(0,0,0,.6); cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; opacity: 0; pointer-events: none; transition: opacity .3s, color .25s, text-shadow .3s;
  -webkit-backdrop-filter: blur(var(--jp-bblur, .6px)) saturate(1.2) brightness(1.02); backdrop-filter: blur(var(--jp-bblur, .6px)) saturate(1.2) brightness(1.02); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.jp-roll-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  background: linear-gradient(160deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.28) 28%, rgba(255,255,255,.1) 50%, rgba(0,0,0,.3) 72%, rgba(255,255,255,.45) 100%); }
.jp-roll-btn--l { left: calc(6px + 3.5px - 14px); } .jp-roll-btn--r { right: calc(6px + 3.5px - 14px); }                                             /* centred on the rail */
.jp-roll-btn--up { top: calc(50% - var(--wh) / 2 - 14px - 24px); } .jp-roll-btn--x { top: calc(50% + var(--wh) / 2 + 24px - 14px); }
.jp-roll-btn:hover, .jp-roll-btn:active, .jp-roll-btn.is-hot { color: var(--accent); text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 85%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 0 6px 18px rgba(0,0,0,.3), 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); }   /* mouse over, finger on: red glow + lit rim */
.jp-roll-btn:hover::before, .jp-roll-btn:active::before, .jp-roll-btn.is-hot::before { background: linear-gradient(160deg, rgba(255,255,255,.9) 0%, color-mix(in srgb, var(--accent) 60%, #fff) 35%, rgba(255,255,255,.15) 55%, rgba(0,0,0,.3) 75%, color-mix(in srgb, var(--accent) 70%, #fff) 100%); }
html[data-menu="open"] .jp-roll-btn { opacity: 1; pointer-events: auto; }
html[data-sub-open="true"] .jp-roll-btn { opacity: 0; pointer-events: none; }
.jp-roll-wheel i.is-on { background: var(--accent); transform: scale(1.5); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 85%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 50%, transparent); }
.jp-menu__tile { position: relative; display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center; text-align: center; min-height: 0; height: 100%; box-sizing: border-box; overflow: hidden; padding: clamp(10px, 7cqw, 18px) clamp(10px, 8cqw, 20px) clamp(8px, 6cqw, 16px); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; color: inherit; text-decoration: none; background: color-mix(in srgb, var(--jp-tint) 7%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; isolation: isolate; font: 600 clamp(9px, min(7cqw, 12cqh), 22px)/1.12 var(--font-display); letter-spacing: .12em; text-transform: uppercase; container-type: inline-size; overflow-wrap: break-word; transform: translateY(14px) scale(.985); opacity: 0; transition: transform .4s cubic-bezier(.2,.9,.3,1) var(--in-d, calc(var(--i) * 14ms)), opacity .3s var(--in-d, calc(var(--i) * 14ms)), background .25s, color .2s, text-shadow .2s, box-shadow .25s; }   /* whole grid is up within ~0.5 s; v8: clear glass (no blur of its own) until the frost comes, and each tile's moment to come up is picked at random on every opening (--in-d, jp-liquid-glass.js) */
html[data-device="phone"] { .jp-menu__tile { min-height: 72px; height: auto; grid-template-columns: 1fr auto; grid-template-rows: auto; align-items: center; justify-items: start; text-align: left; padding: 16px 18px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
.jp-menu[data-frost="true"] .jp-menu__tile { transform: none; opacity: 1; }
.jp-menu__tile span { display: block; max-width: 100%; text-wrap: balance; transform-origin: center; transition: transform .25s cubic-bezier(.2,.9,.3,1); }
.jp-menu__tile:hover > span, .jp-menu__tile:focus-visible > span { transform: scale(1.02); }   /* the label grows 2% on mouse-over */
.jp-menu__tile:hover > small, .jp-menu__tile:focus-visible > small { transform: scale(1.02); }
.jp-menu__tile small { transform-origin: center; transition: transform .25s cubic-bezier(.2,.9,.3,1); display: inline-block; }
.jp-menu__tile i { font-style: normal; font-size: .9em; display: inline-block; margin-left: .5em; transform: translate(0, 1px); transition: transform .25s; opacity: .7; }   /* the arrow stays on the label's last line */
.jp-menu__tile .jp-heart { display: inline-block; margin-right: .3em; }
.jp-menu__tile small { font: 500 clamp(8px, min(3.4cqw, 6cqh), 12px) var(--font-display); letter-spacing: .18em; color: rgba(243,233,234,.55); margin-top: clamp(4px, 4cqh, 10px); text-wrap: balance; }
html:not([data-device="phone"]) { .jp-menu__tile { container-type: size; } }   /* desktop boxes have a definite size, so type can key off height as well as width */
html[data-device="phone"] { .jp-menu__tile small { margin: 0; } }
.jp-menu__tile:hover, .jp-menu__tile:focus-visible { background: color-mix(in srgb, var(--accent) 24%, color-mix(in srgb, var(--jp-tint) 10%, transparent)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--jp-rim-a) 55%, transparent), inset 0 3px 0 rgba(255,255,255,.09), inset 0 -1px 0 color-mix(in srgb, var(--jp-rim-b) 35%, transparent), inset 0 -3px 0 rgba(255,255,255,.07); }
.jp-menu__tile:hover i { transform: translate(4px, -3px); opacity: 1; }
.jp-menu__tile--accent { color: color-mix(in srgb, var(--accent) 62%, #fff); letter-spacing: .14em; }
html:not([data-device="phone"]) { .jp-menu__bg { display: block; } .jp-menu__frost { display: none; } .jp-menu[data-frost="true"] .jp-menu__flood { opacity: .16; } }   /* desktop: floral instead of the frost (lighter flood); v8: the tiles are clear glass until their own frost fades in (below) */
/* v8 (Duane, 16 Oct 00:55 - "Menu window: glass pane buttons fade to a frost in 2 seconds; font black with a white glow."): the tiles
   come up as clear glass; over 2 s (eased) a frost fades in on every pane - a milky layer that blurs what is behind it (14 px), with a soft
   inner highlight (a lit top edge, a fine rim, a glow just inside) - and the labels and their small subtitles turn black with a white glow
   as the frost arrives: the switch is timed to the moment the frost is about half in (.7-1.3 s), so the words read on either side of it.
   Hover and keyboard focus stay legible on the frost: a brighter frost, an accent rim and glow, the label 2% larger (as before); focus
   also gets the gold outline. The Just Win wordmark tile stays clear (it sits straight on the menu background). Reduced / calm motion:
   the frost is in within .4 s. --frost-t: the length of the fade (2 s). */
.jp-menu__tile::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.53) 46%, rgba(255,255,255,.59) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.35) brightness(1.06); backdrop-filter: blur(14px) saturate(1.35) brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.42), inset 0 0 26px rgba(255,255,255,.42), inset 0 -10px 22px rgba(0,0,0,.05);
  opacity: 0; transition: opacity .22s ease, background .25s, box-shadow .25s; }
.jp-menu[data-frost="true"] .jp-menu__tile::before { opacity: 1; transition: opacity var(--frost-t, 2s) cubic-bezier(.45, 0, .25, 1), background .25s, box-shadow .25s; }
.jp-menu__tile--image::before, .jp-menu__tile--image::after { display: none; }
.jp-menu[data-frost="true"] .jp-menu__tile:not(.jp-menu__tile--image) { color: #120d0e; text-shadow: 0 0 7px rgba(255,255,255,.95), 0 0 2px rgba(255,255,255,.9);
  transition: transform .4s cubic-bezier(.2,.9,.3,1) var(--in-d, calc(var(--i) * 14ms)), opacity .3s var(--in-d, calc(var(--i) * 14ms)), background .25s, color .55s ease .75s, text-shadow .8s ease .55s, box-shadow .25s; }
.jp-menu__tile small { transition: transform .25s cubic-bezier(.2,.9,.3,1), color .2s; }
.jp-menu[data-frost="true"] .jp-menu__tile small { color: rgba(18,13,14,.84); transition: transform .25s cubic-bezier(.2,.9,.3,1), color .55s ease .75s; }
.jp-menu[data-frost="true"] .jp-menu__tile.jp-menu__tile--accent:not(.jp-menu__tile--image) { color: color-mix(in srgb, var(--accent) 42%, #000); }                 /* QONQER! keeps its colour, deep enough to read on the frost */
.jp-menu[data-frost="true"] .jp-menu__tile--search small { color: rgba(18,13,14,.84); }
.jp-menu[data-frost="true"] .jp-menu__tile .jp-search--menu { text-shadow: none; }                                           /* the search field keeps its own dark glass and white type */
.jp-menu[data-frost="true"] .jp-menu__tile:not(.jp-menu__tile--image):hover, .jp-menu[data-frost="true"] .jp-menu__tile:not(.jp-menu__tile--image):focus-visible { background: transparent; }
.jp-menu[data-frost="true"] .jp-menu__tile:not(.jp-menu__tile--image):hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 42%, transparent), 0 10px 26px rgba(0,0,0,.35); }
.jp-menu[data-frost="true"] .jp-menu__tile:not(.jp-menu__tile--image):hover::before, .jp-menu[data-frost="true"] .jp-menu__tile:not(.jp-menu__tile--image):focus-visible::before {
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.72) 50%, rgba(255,255,255,.78));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, #fff), inset 0 0 24px rgba(255,255,255,.55); }
.jp-menu__tile:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 14px; }
.jp-menu[data-frost="true"] .jp-menu__tile:not(.jp-menu__tile--image):focus-visible { outline: 2px solid #120d0e; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 0 22px color-mix(in srgb, var(--accent) 42%, transparent); }   /* focus: a dark ring with a white halo, readable on the frost and on the dark menu */
html[data-device="phone"] .jp-menu[data-frost="true"] .jp-menu__card.is-active .jp-menu__tile::before { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 2px color-mix(in srgb, var(--accent) 70%, #fff), inset 0 0 26px rgba(255,255,255,.5); }   /* the rolodex's centre card: an accent rim on its frost */
/* v8 (Duane, 16 Oct 01:51 - "Randomize all the background animations in the menu"): inside every frosted pane a soft light drifts
   through the frost - a sheen, a bloom, twin bands or a wash (--sh-img), at its own angle, pace, phase, easing and direction, all picked
   at random for each tile every time the menu opens (jp-liquid-glass.js), so no two panes move in step. Subtle: it only shows with the
   frost, at a third of its strength. Off with reduced / calm motion. */
.jp-menu__tile::after { content: ""; position: absolute; inset: -50%; z-index: -1; pointer-events: none; opacity: 0;
  background: var(--sh-img, linear-gradient(115deg, transparent 41%, rgba(255,255,255,.55) 50%, transparent 59%)); rotate: var(--sh-rot, 0deg);
  animation: jp-tile-sheen var(--sh-t, 9s) var(--sh-e, ease-in-out) var(--sh-d, 0s) infinite var(--sh-r, alternate); transition: opacity .22s; }
.jp-menu[data-frost="true"] .jp-menu__tile::after { opacity: var(--sh-a, .34); transition: opacity var(--frost-t, 2s) cubic-bezier(.45, 0, .25, 1); }
.jp-menu:not([data-open="true"]) .jp-menu__tile::after { animation-play-state: paused; }
@keyframes jp-tile-sheen { from { translate: var(--sh-x0, -24%) var(--sh-y0, 0%); } to { translate: var(--sh-x1, 24%) var(--sh-y1, 0%); } }
@media (prefers-reduced-motion: reduce) {
  .jp-menu[data-frost="true"] .jp-menu__tile::before, .jp-menu[data-frost="true"] .jp-menu__tile::after { transition-duration: .4s; }
  .jp-menu[data-frost="true"] .jp-menu__tile:not(.jp-menu__tile--image), .jp-menu[data-frost="true"] .jp-menu__tile small { transition-delay: 0s; }
  .jp-menu__tile::after { animation: none; } }
html[data-motion="reduce"] .jp-menu__tile::after { animation: none !important; }
/* top-row boxes */
.jp-wordmark { font: 400 clamp(22px, 2.6vw, 40px)/1 "Anton", "Impact", "Arial Narrow", sans-serif; font-style: italic; letter-spacing: .01em; text-transform: uppercase; color: #fff; text-wrap: balance; }
.jp-wordmark em { font-style: italic; color: var(--accent); margin-left: -.08em; }
.jp-menu__tile--image { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; padding: 12px 14px; }   /* the wordmark sits straight on the menu background, no box */
.jp-menu__tile--image img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; display: block; }   /* the wordmark scales to whatever size the box is */
.jp-menu__tile--image:hover { background: transparent; border-color: transparent; }
.jp-menu__tile--image:hover img { filter: brightness(1.12); }
.jp-menu__tile--search { align-content: center; justify-items: stretch; gap: 10px; }
.jp-search--menu { border-left: 1px solid var(--line); border-radius: 999px; height: 48px; padding-left: 16px; padding-right: 14px; }
.jp-menu__tile--heart span { gap: 10px; }
.jp-heart { color: var(--accent); font-size: 1.15em; animation: jp-heart 1.1s ease-in-out infinite; transform-origin: center; }
@keyframes jp-heart { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.18); } 24% { transform: scale(1); } 36% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .jp-heart { animation: none; } }
.jp-menu__tile--signin { cursor: pointer; }
.jp-menu__tile .jp-menu__signin-out { white-space: nowrap; text-wrap: nowrap; }
.jp-menu__tile--signin[data-state="in"] .jp-menu__signin-out, .jp-menu__tile--signin:not([data-state="in"]) .jp-menu__signin-in { display: none; }
.jp-menu__tile .jp-menu__signin-in { display: grid; grid-template-columns: 1fr; justify-items: center; align-items: center; gap: 6px; max-width: 100%; text-transform: none; letter-spacing: .04em; font-family: var(--font-body); font-weight: 700; font-size: .95em; }   /* avatar + sign-out power side by side, name underneath */
.jp-menu__tile .jp-menu__id { display: inline-flex; align-items: center; gap: 8px; }
.jp-menu__tile .jp-power { display: inline-grid; width: 2em; height: 2em; }
.jp-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.jp-menu__tile .jp-menu__profile-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-menu__signin-in .jp-avatar { width: 2.2em; height: 2.2em; font-size: .75em; }
.jp-power { display: inline-grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); color: #fff; background: rgba(0,0,0,.35); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.jp-power svg { width: 55%; height: 55%; }
.jp-power:hover, .jp-power:focus-visible { background: var(--accent); border-color: var(--accent); }
.jp-menu__tile--close { font-family: var(--font-display); cursor: pointer; }
.jp-menu__tile--close b { font-weight: 600; }
button.jp-menu__tile { width: 100%; color: inherit; }
html[data-device="phone"] { button.jp-menu__tile { text-align: left; } }
/* a tile with several selections: click expands it in its own box; the sub-options fill the box with a Back button in the centre */
.jp-menu__tile[data-sub] { cursor: pointer; }
.jp-menu__tile[data-sub] > span::after { content: "+"; font-weight: 400; opacity: .6; margin-left: 2px; }
.jp-menu__tile[data-sub] { container-type: size; }
.jp-menu__tile .jp-sub { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; padding: 6px 8px; gap: 6px; overflow: hidden; opacity: 0; visibility: hidden; transform: scale(.96); transition: opacity .3s, transform .35s cubic-bezier(.2,.9,.3,1), visibility 0s linear .3s; }
.jp-menu__tile[data-expanded="true"] > span, .jp-menu__tile[data-expanded="true"] > small { opacity: 0; transition: opacity .2s; }
.jp-menu__tile[data-expanded="true"] .jp-sub { opacity: 1; visibility: visible; transform: none; transition: opacity .3s .1s, transform .35s .1s cubic-bezier(.2,.9,.3,1), visibility 0s; }
.jp-menu__tile[data-expanded="true"] { background: color-mix(in srgb, var(--accent) 18%, color-mix(in srgb, var(--jp-tint) 10%, transparent)); }
.jp-sub__group { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(2px, 1.5cqh, 6px); min-height: 0; min-width: 0; }
.jp-sub__opt { font: 600 clamp(9px, 9.5cqh, 14px)/1.15 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #fff; text-decoration: none; padding: .3em .8em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.22); white-space: nowrap; transition: background .2s, border-color .2s; }
.jp-sub__opt:hover, .jp-sub__opt:focus-visible { background: var(--accent); border-color: var(--accent); }
.jp-sub__back { display: inline-flex; align-items: center; gap: 8px; font: 700 clamp(10px, 11cqh, 14px)/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: .8em 1.3em; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35); transition: background .2s, transform .2s; }
.jp-sub__back:hover { background: rgba(0,0,0,.72); transform: translateY(-1px); }
.jp-sub__back b { font-size: 1.2em; line-height: 0; }
.jp-menu__foot { position: relative; z-index: 1; padding: 22px 24px 32px; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 11px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: rgba(243,233,234,.55); }
.jp-menu__foot { display: none; }   /* the grid gets the whole screen */
html[data-device="phone"] { .jp-menu__foot { display: none; } .jp-menu:has(.jp-menu__tile[data-expanded="true"]) .jp-menu__hint, .jp-menu:has(.jp-menu__tile[data-expanded="true"]) .jp-menu__roll-line { visibility: hidden; } }
html[data-menu="open"] { overflow: hidden; }
.jp-nav-item[aria-expanded="true"] .jp-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.jp-nav-item[aria-expanded="true"] .jp-burger i:nth-child(2) { opacity: 0; }
.jp-nav-item[aria-expanded="true"] .jp-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.jp-burger i { transition: transform .3s, opacity .2s; }
@media (prefers-reduced-motion: reduce) { .jp-menu__row { transition-delay: 0s; transform: none; } }

/* toast: the one-line status pill the site's say() uses (menu open, signed in, chat notices) */
.toast { position: fixed; left: calc(var(--jp-chat-w) + (100vw - var(--jp-chat-w)) / 2); bottom: 24px; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 999px; font: 600 13px var(--font-display); letter-spacing: .08em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 60; }
.toast.show { opacity: 1; }
/* ============ PAGE ============ */

/* ---- mid widths (small laptops, split panes): tighter nav, slightly smaller logo ---- */
@media (max-width: 1100px) {
 html:not([data-device="phone"]) {
  :root { --h-max: 226px; --h-min: 154px; }
  .jp-nav-item { font-size: 12px; letter-spacing: .06em; gap: 6px; }
  .jp-nav-item--qonqer { font-size: 14px; letter-spacing: .08em; }
  .jp-nav-item .jp-menu-label { display: none; }
  .jp-profile span:last-child { display: none; }
  .jp-search kbd { display: none; }
}
}
/* ---- narrow screens: header stacks, logo smaller ---- */
:root { --h-menu: var(--h-min); }                                                   /* header height while the menu is open */
.jp-menu__media-box { display: none; }   /* phones only (rules in the narrow-screen block) */
html[data-device="phone"] {
  & { --h-max: 132px; --h-min: 104px; --h-pad: 8px; --h-menu: 104px; --menu-media-h: clamp(150px, 46vw, 240px); }   /* phone logo: 116 px at the top, 88 px once scrolled or with the menu open (a third up from the old squeezed size) */
  .jp-header:not([data-wings="open"]) { grid-template-rows: 1fr 0 0; row-gap: 0; padding-bottom: 0; }   /* the wing rows only take room while the wings are out (the header grows by --wings-h then) */
  .jp-header:not([data-wings="open"]) .jp-wing { height: 0; overflow: hidden; }
  .jp-header[data-wings="open"] { --h-max: calc(132px + 104px); --h-min: calc(104px + 104px); }   /* wings out: the header grows by the two wing rows (search + nav) */
  &[data-menu="open"] .jp-header { height: calc(var(--h-menu) + env(safe-area-inset-top, 0px)); grid-template-rows: 1fr 0 0; row-gap: 0; padding-bottom: 0; }   /* logo row only while the menu is open */
  &[data-menu="open"] .jp-menu { padding-top: env(safe-area-inset-top, 0px); }   /* the rolodex runs from the top of the screen (under the logo header), so the media panel can reach the return arrows */
  &[data-menu="open"] .jp-header .jp-wing { height: 0; overflow: hidden; visibility: hidden; }
  /* media slot: a background panel behind the Just Win card. The card floats near the panel's bottom with 15% of the panel showing beneath it; both roll together */
  .jp-menu__card--logo { --logo-tile-h: 100px; padding-top: calc(var(--menu-media-h) * .85 - var(--logo-tile-h) + 5px); padding-bottom: 6px; scroll-snap-align: start; }   /* v10: the hint under the media panel fills what was the bottom padding */   /* the menu rests with this card at the top: panel top on the return arrows, 15% of it under the card */
  .jp-menu__card--logo .jp-menu__tile { height: var(--logo-tile-h); min-height: 0; position: relative; z-index: 1; }
  .jp-menu__media-box { position: absolute; left: 0; right: 0; top: 5px; height: var(--menu-media-h); z-index: 0; border-radius: 16px; overflow: hidden; display: grid; place-items: start center; padding-top: 14px; box-sizing: border-box; background: rgba(255,255,255,.04);
    -webkit-backdrop-filter: blur(var(--jp-bblur, 6px)) saturate(1.2); backdrop-filter: blur(var(--jp-bblur, 6px)) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 8px 24px rgba(0,0,0,.3); }
  .jp-menu__media-box:not(:has(img, video)) { outline: 1px dashed rgba(255,255,255,.35); outline-offset: -8px; }
  .jp-menu__media-box > span { font: 600 10px var(--font-display); letter-spacing: .24em; text-transform: uppercase; color: rgba(243,233,234,.55); }
  .jp-menu__media-box img, .jp-menu__media-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .jp-menu__media-box:has(img, video) > span { display: none; }
  .jp-header { grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; row-gap: 8px; padding-bottom: 10px; }
  .jp-logo-slot { grid-row: 1; min-height: 0; }
  .jp-wing--left { grid-row: 2; height: auto; padding: 0 24px 0 0; margin: 0; -webkit-mask: none; mask: none; }
  .jp-wing--right { grid-row: 3; height: auto; padding: 0; margin: 0; -webkit-mask: none; mask: none; }
  .jp-search { padding-right: 14px; } .jp-nav-item:first-child { padding-left: 0; }
  .jp-search { height: 44px; }
  .jp-nav-item { height: 44px; font-size: 12px; letter-spacing: .08em; }
  .jp-nav-item:first-child { border-radius: 0; border-left: 0; }
  .jp-nav-item .jp-menu-label { display: none; }
  .jp-hint { display: none !important; }
  .hero-copy { padding-top: 72px; }
}