/* Generated from design/tokens.json by design/build.py. DO NOT EDIT: change tokens.json and rebuild. */
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@400..900&family=Sora:wght@300..800&family=Martian+Mono:wght@400..700&display=swap");
:root{
  --loge-ink:#0B0614;
  --loge-surface:#160E24;
  --loge-raised:#22163A;
  --loge-bubble:#1A1029;
  --loge-line:#34244F;
  --loge-cream:#FFF3EA;
  --loge-cream-dim:#E5D2CC;
  --loge-mauve:#A08BA6;
  --loge-dusk:#7D6A86;
  --loge-volt:#D4FF3A;
  --loge-volt-hi:#E6FF85;
  --loge-live:#FF3355;
  --loge-yellow:#FFD23F;
  --loge-ok:#4ADE80;
  --loge-device:#050505;
  --loge-device-edge:#3A3A3E;
  --loge-riso-night:#14052E;
  --loge-riso-violet:#5B0E91;
  --loge-riso-pink:#E0115F;
  --loge-riso-orange:#FF7A1A;
  --loge-riso-yellow:#FFE66B;
  --bg:var(--loge-ink);
  --surface:var(--loge-surface);
  --surface-2:var(--loge-raised);
  --bubble:var(--loge-bubble);
  --line:var(--loge-line);
  --text:var(--loge-cream);
  --text-2:var(--loge-cream-dim);
  --muted:var(--loge-mauve);
  --placeholder:var(--loge-dusk);
  --accent:var(--loge-volt);
  --accent-hi:var(--loge-volt-hi);
  --accent-2:var(--loge-cream);
  --on-accent:var(--loge-ink);
  --moment:var(--loge-raised);
  --on-moment:var(--loge-cream);
  --live:var(--loge-live);
  --danger:var(--loge-live);
  --ok:var(--loge-ok);
  --warn:var(--loge-yellow);
  --device:var(--loge-device);
  --device-edge:var(--loge-device-edge);
  --font-display:"Unbounded",system-ui,sans-serif;
  --font-ui:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Martian Mono",ui-monospace,Menlo,monospace;
  --font-display-weight:900;
  --font-display-transform:uppercase;
  --font-display-tracking:-0.03em;
  --font-display-line-height:.95;
  --size-label:11px;
  --size-small:13px;
  --size-body:16px;
  --size-lead:clamp(17px,1.6vw,19px);
  --size-h3:22px;
  --size-h2:clamp(32px,4.4vw,48px);
  --size-mega:clamp(44px,7.6vw,120px);
  --size-h1:clamp(46px,7.4vw,88px);
  --size-score:26px;
  --size-stat:32px;
  --size-icon:16px;
  --size-avatar:22px;
  --size-tap:44px;
  --tracking-label:.16em;
  --tracking-wordmark:.3em;
  --tracking-tight:-0.03em;
  --tracking-none:0;
  --space-half:2px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:72px;
  --space-9:96px;
  --space-10:144px;
  --space-section:clamp(96px,16vw,200px);
  --radius-xs:6px;
  --radius-sm:12px;
  --radius-md:24px;
  --radius-lg:32px;
  --radius-bubble:24px;
  --radius-device:52px;
  --radius-pill:999px;
  --line-height-none:1;
  --line-height-tight:.95;
  --line-height-snug:1.2;
  --line-height-body:1.45;
  --line-height-loose:1.6;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-black:900;
  --border-hairline:1px;
  --border-strong:2px;
  --border-sticker:7px;
  --shape-border:1px;
  --shape-surface-alpha:58%;
  --shape-blur:24px;
  --shape-gap:10px;
  --shape-shadow:none;
  --motion-fast:.15s;
  --motion-base:.3s;
  --motion-slow:.5s;
  --motion-ease:cubic-bezier(.2,.8,.2,1);
  --motion-print:1.4s;
  --layout-gutter:16px;
  --layout-phone:360px;
  --layout-content:1120px;
  --layout-readable:640px;
  --layout-card:420px;
  color-scheme:dark;
}

/* Loge components. Source for the component part of design/dist/loge.css (build.py appends it).
   Pages compose these classes; they never restyle them with their own values. Rules: design/LANGUAGE.md.
   Only var(--…) values here: design/lint.py checks this file like any page. */

/* Display type: Unbounded Black, uppercase, tight. Headlines, moment words, sticker titles. */
.l-display{font-family:var(--font-display);font-weight:var(--font-display-weight);text-transform:var(--font-display-transform);letter-spacing:var(--font-display-tracking);line-height:var(--font-display-line-height);color:var(--text);text-shadow:none;margin:0}
.l-h1{font-size:var(--size-h1)}
.l-h2{font-size:var(--size-h2)}
.l-h3{font-size:var(--size-h3)}

/* Small mono label above a block: clock, quarter, eyebrow. */
.l-label{font-family:var(--font-mono);font-size:var(--size-label);font-weight:var(--weight-medium);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}

/* Body text. */
.l-body{font-family:var(--font-ui);font-size:var(--size-body);line-height:var(--line-height-body);color:var(--text-2)}

/* Key number inside text (the one fact worth noticing): volt. */
.l-num{color:var(--accent);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}

/* Primary action: volt pill. One per screen. */
.l-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--size-tap);padding:0 var(--space-5);border:0;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font-family:var(--font-ui);font-size:var(--size-small);font-weight:var(--weight-semibold);cursor:pointer;text-decoration:none;white-space:nowrap;transition:filter var(--motion-fast) var(--motion-ease)}
.l-btn:hover{filter:brightness(1.06)}
.l-btn-quiet{background:var(--surface-2);color:var(--text)}

/* Card: glass surface, hairline border, large radius, no shadow. */
.l-card{background:color-mix(in srgb,var(--surface) var(--shape-surface-alpha),transparent);border:var(--border-hairline) solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shape-shadow);-webkit-backdrop-filter:blur(var(--shape-blur));backdrop-filter:blur(var(--shape-blur))}

/* Chat: Loge answers on the left with its mark, the user's own message on the right. */
.l-feed{display:flex;flex-direction:column;gap:var(--shape-gap)}
.l-bubble{align-self:flex-start;max-width:90%;background:var(--bubble);border:var(--border-hairline) solid var(--line);border-radius:var(--radius-bubble);border-top-left-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-family:var(--font-ui);font-size:var(--size-small);line-height:var(--line-height-body);color:var(--text)}
.l-bubble-me{align-self:flex-end;max-width:80%;background:var(--surface-2);border:var(--border-hairline) solid var(--line);border-radius:var(--radius-bubble);border-bottom-right-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-family:var(--font-ui);font-size:var(--size-small);font-weight:var(--weight-medium);line-height:var(--line-height-body);color:var(--text)}

/* Inside a chat bubble: who wrote it and at which moment of the game ("Sam · Q2 0:20"), and the message it answers. */
.l-who{display:block;font-family:var(--font-mono);font-size:var(--size-label);color:var(--muted);margin-bottom:var(--space-1)}
.l-who-loge{color:var(--accent-hi)}
.l-reply{display:block;font-family:var(--font-mono);font-size:var(--size-label);color:var(--muted);margin-bottom:var(--space-1)}

/* Team chip: the only place besides prints where a team colour appears. Set --team from teamInk(). */
.l-chip{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-mono);font-size:var(--size-label);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-2)}
.l-chip::before{content:"";width:var(--space-2);height:var(--space-2);border-radius:var(--radius-pill);background:var(--team,var(--muted))}
.l-team-tag{display:inline-grid;place-items:center;min-width:var(--size-tap);height:var(--size-avatar);padding:0 var(--space-1);border-radius:var(--radius-sm);background:var(--team,var(--surface-2));color:var(--on-team,var(--text));font-family:var(--font-mono);font-size:var(--size-label);font-weight:var(--weight-bold)}

/* Score: mono, tabular. */
.l-score{font-family:var(--font-display);font-weight:var(--font-display-weight);font-size:var(--size-score);font-variant-numeric:tabular-nums;color:var(--text)}
.l-live{color:var(--live);font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:var(--tracking-label);text-transform:uppercase}

/* Text input: same height and radius as the button next to it. */
.l-input{min-height:var(--size-tap);padding:0 var(--space-4);border:var(--border-hairline) solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--text);font-family:var(--font-ui);font-size:var(--size-body)}
.l-input::placeholder{color:var(--placeholder)}

/* Print canvas from design/print.mjs: fills its box, never stretched. */
.l-print{display:block;width:100%;height:100%}

/* Rail: a horizontal, swipeable row of cards that bleeds to the screen edges and snaps card by card.
   Put it inside a page's content column; the next card always peeks so people know to swipe. */
.l-rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(86%,var(--layout-card));gap:var(--space-3);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-inline:calc(50% - 50vw);padding-inline:max(var(--layout-gutter),calc(50vw - var(--layout-content) / 2 + var(--layout-gutter)));scroll-padding-inline:max(var(--layout-gutter),calc(50vw - var(--layout-content) / 2 + var(--layout-gutter)));padding-block:var(--space-1)}
.l-rail::-webkit-scrollbar{display:none}
.l-rail > *{scroll-snap-align:start;min-width:0}

/* Score bug: the game at a glance, as in the app's game screen. Away left, home right, clock in the middle.
   An optional second row (.l-bug-bar) holds the player for a recording: play and the game's timeline. */
.l-bug{display:grid;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:color-mix(in srgb,var(--surface) var(--shape-surface-alpha),transparent);border:var(--border-hairline) solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shape-shadow)}
.l-bug-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-3)}
.l-bug-side{display:flex;align-items:center;gap:var(--space-2)}
.l-bug-side:last-child{justify-content:flex-end}
.l-bug-mid{display:grid;justify-items:center;gap:var(--space-half);font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-2);white-space:nowrap}
.l-bug-bar{display:flex;align-items:center;gap:var(--space-3);padding-top:var(--space-2);border-top:var(--border-hairline) solid var(--line)}