/* Aldermere, the club's Magical Academia TTRPG (/aldermere/).
   ─────────────────────────────────────────────────────────────────────────
   Drawn from the paper character booklet rather than from a template: its
   lavender-white paper with faint vines, the plum header bands with a lace
   edge, the six polyhedral dice in the booklet's own colours, its goal and
   fear tracker gradients and its injury colours. Lora is the booklet's face
   and does the headings and names; Figtree does everything you read and tap;
   a script appears only in the Aldermere wordmark.

   Light is the default (the booklet). Dark is the same book at night, chosen
   with the toggle in the top bar and remembered per browser (data-theme on
   <html>, set before paint by the snippet in each page's head). Its page,
   wells and cards sit clearly apart, so sections read as sections (Devin,
   October 14, 2026: it was too dark to tell them apart).

   Every class is prefixed am- so nothing here meets main.css, which these
   pages do not load. */

:root {
  /* Paper and ink */
  --am-bg: #f5f3fa;
  --am-surface: #ffffff;
  --am-surface-2: #faf8fd;
  --am-sunk: #efebf5;
  --am-ink: #2a1f2d;
  --am-muted: #6a5e70;
  --am-faint: #978c9e;
  --am-line: #e4dcec;
  --am-line-strong: #cbbfd6;
  /* The booklet's plum, and what sits on it */
  --am-plum: #4f0a47;
  --am-plum-hover: #6a1d60;
  --am-on-plum: #ffffff;
  --am-band: #4f0a47;
  --am-on-band: #fbf4fa;
  --am-link: #6a1d60;
  --am-accent: #4f0a47;
  --am-tint: #f3e9f2;
  --am-mauve: #a47f93;
  --am-focus: #8e3b82;
  /* States */
  --am-ok: #2f6b5a;
  --am-ok-tint: #e5f1ec;
  --am-warn: #9a5b12;
  --am-warn-tint: #fbf0e0;
  --am-bad: #a3182d;
  --am-bad-tint: #fbe8ea;
  --am-gold: #b88a2e;
  /* The booklet's dice */
  --am-d4: #3b7f7a;
  --am-d6: #86a9a6;
  --am-d8: #e2bf4f;
  --am-d10: #e6a043;
  --am-d12: #d5652a;
  --am-d20: #c2453d;
  /* Injury dots, from the booklet's bookmark */
  --am-mild: #efbe4f;
  --am-moderate: #e0661f;
  --am-severe: #b8141b;
  --am-paper: #fffcf5;
  --am-shadow: 0 1px 2px rgba(42, 31, 45, .05), 0 6px 20px rgba(42, 31, 45, .06);
  --am-shadow-lg: 0 20px 50px rgba(42, 31, 45, .18);
  --am-vines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23c5cdc8' stroke-width='1.1' stroke-linecap='round' stroke-opacity='.7'%3E%3Cpath d='M30 240c10-30-14-52 4-82s30-40 10-74S38 8 50 0'/%3E%3Cpath d='M164 240c-12-26 10-46-6-74s-26-42-6-70 22-44 8-96'/%3E%3Cpath d='M42 110c14-6 24-2 32 8'/%3E%3Cpath d='M160 128c-14-4-22 2-28 12'/%3E%3C/g%3E%3Cg fill='%23c5cdc8' fill-opacity='.55'%3E%3Cellipse cx='24' cy='196' rx='10' ry='4.2' transform='rotate(-38 24 196)'/%3E%3Cellipse cx='42' cy='170' rx='9' ry='3.8' transform='rotate(32 42 170)'/%3E%3Cellipse cx='30' cy='134' rx='9' ry='3.6' transform='rotate(-42 30 134)'/%3E%3Cellipse cx='72' cy='114' rx='8' ry='3.4' transform='rotate(20 72 114)'/%3E%3Cellipse cx='52' cy='74' rx='9' ry='3.8' transform='rotate(36 52 74)'/%3E%3Cellipse cx='36' cy='42' rx='8' ry='3.4' transform='rotate(-34 36 42)'/%3E%3Cellipse cx='170' cy='206' rx='10' ry='4.2' transform='rotate(40 170 206)'/%3E%3Cellipse cx='150' cy='172' rx='9' ry='3.8' transform='rotate(-30 150 172)'/%3E%3Cellipse cx='130' cy='142' rx='8' ry='3.4' transform='rotate(-20 130 142)'/%3E%3Cellipse cx='164' cy='118' rx='9' ry='3.6' transform='rotate(38 164 118)'/%3E%3Cellipse cx='148' cy='74' rx='9' ry='3.8' transform='rotate(-36 148 74)'/%3E%3Cellipse cx='166' cy='36' rx='8' ry='3.4' transform='rotate(34 166 36)'/%3E%3C/g%3E%3C/svg%3E");
  --am-serif: "Lora", "Iowan Old Style", Georgia, serif;
  --am-sans: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --am-script: "Pinyon Script", "Lora", Georgia, serif;
  --am-max: 1120px;
  --am-r: 12px;
  --am-r-sm: 8px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --am-bg: #120e15;
  --am-surface: #231c28;
  --am-surface-2: #2b2331;
  --am-sunk: #1a151e;
  --am-ink: #f1ebf5;
  --am-muted: #c0b5c8;
  --am-faint: #94899f;
  --am-line: #3c3243;
  --am-line-strong: #5b4e65;
  --am-plum: #8e3b82;
  --am-plum-hover: #a24d96;
  --am-on-plum: #ffffff;
  --am-band: #4a1444;
  --am-on-band: #f8ecf5;
  --am-link: #dcb1d8;
  --am-accent: #dcb1d8;
  --am-tint: #38193a;
  --am-mauve: #9c7a91;
  --am-focus: #dcb1d8;
  --am-ok: #73c3a8;
  --am-ok-tint: #12251f;
  --am-warn: #e3a65a;
  --am-warn-tint: #2a1d0e;
  --am-bad: #f07a86;
  --am-bad-tint: #2c1015;
  --am-gold: #d9b25c;
  --am-paper: #251d28;
  --am-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .35);
  --am-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
  --am-vines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23362d3c' stroke-width='1.1' stroke-linecap='round' stroke-opacity='.8'%3E%3Cpath d='M30 240c10-30-14-52 4-82s30-40 10-74S38 8 50 0'/%3E%3Cpath d='M164 240c-12-26 10-46-6-74s-26-42-6-70 22-44 8-96'/%3E%3Cpath d='M42 110c14-6 24-2 32 8'/%3E%3Cpath d='M160 128c-14-4-22 2-28 12'/%3E%3C/g%3E%3Cg fill='%23362d3c' fill-opacity='.6'%3E%3Cellipse cx='24' cy='196' rx='10' ry='4.2' transform='rotate(-38 24 196)'/%3E%3Cellipse cx='42' cy='170' rx='9' ry='3.8' transform='rotate(32 42 170)'/%3E%3Cellipse cx='30' cy='134' rx='9' ry='3.6' transform='rotate(-42 30 134)'/%3E%3Cellipse cx='72' cy='114' rx='8' ry='3.4' transform='rotate(20 72 114)'/%3E%3Cellipse cx='52' cy='74' rx='9' ry='3.8' transform='rotate(36 52 74)'/%3E%3Cellipse cx='36' cy='42' rx='8' ry='3.4' transform='rotate(-34 36 42)'/%3E%3Cellipse cx='170' cy='206' rx='10' ry='4.2' transform='rotate(40 170 206)'/%3E%3Cellipse cx='150' cy='172' rx='9' ry='3.8' transform='rotate(-30 150 172)'/%3E%3Cellipse cx='130' cy='142' rx='8' ry='3.4' transform='rotate(-20 130 142)'/%3E%3Cellipse cx='164' cy='118' rx='9' ry='3.6' transform='rotate(38 164 118)'/%3E%3Cellipse cx='148' cy='74' rx='9' ry='3.8' transform='rotate(-36 148 74)'/%3E%3Cellipse cx='166' cy='36' rx='8' ry='3.4' transform='rotate(34 166 36)'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.am {
  margin: 0;
  min-height: 100vh;
  background-color: var(--am-bg);
  background-image: var(--am-vines);
  background-size: 240px 240px;
  color: var(--am-ink);
  font-family: var(--am-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.am a { color: var(--am-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.am :focus-visible { outline: 2px solid var(--am-focus); outline-offset: 2px; }
body.am img { max-width: 100%; }
body.am [hidden] { display: none !important; }
body.am h1, body.am h2, body.am h3 { margin: 0; text-wrap: balance; }
body.am p { margin: 0; }
body.am button { font-family: inherit; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.am-container { max-width: var(--am-max); margin: 0 auto; padding-inline: 20px; }
.am-container-narrow { max-width: 760px; margin: 0 auto; padding-inline: 20px; }
.am-main { padding-block: 24px 72px; }
.am-stack { display: flex; flex-direction: column; gap: 12px; }
.am-stack-sm { display: flex; flex-direction: column; gap: 6px; }
.am-stack-lg { display: flex; flex-direction: column; gap: 24px; }
.am-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.am-between { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.am-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.am-cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.am-grow { flex: 1 1 200px; min-width: 0; }
.am-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── Type ───────────────────────────────────────────────────────────────── */
.am-display { font-family: var(--am-script); font-weight: 400; line-height: 1; letter-spacing: 0; }
.am-h1 { font-family: var(--am-serif); font-weight: 600; font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.1; letter-spacing: -.01em; }
.am-h2 { font-family: var(--am-serif); font-weight: 600; font-size: clamp(1.45rem, 3vw, 1.8rem); line-height: 1.2; }
.am-h3 { font-family: var(--am-serif); font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
.am-eyebrow { font-family: var(--am-serif); font-size: .78rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--am-accent); }
.am-lede { font-size: 1.12rem; color: var(--am-muted); max-width: 60ch; }
.am-muted { color: var(--am-muted); }
.am-faint { color: var(--am-faint); }
.am-small { font-size: .875rem; }
.am-label { font-size: .84rem; font-weight: 600; color: var(--am-muted); display: inline-flex; align-items: center; gap: 6px; }
.am-prose { max-width: 66ch; display: flex; flex-direction: column; gap: 12px; }
.am-num-big { font-variant-numeric: tabular-nums; }

/* ── The top bar ────────────────────────────────────────────────────────── */
.am-appbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--am-surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--am-line); }
.am-appbar-inner { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.am-wordmark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--am-accent) !important; }
.am-wordmark-script { font-family: var(--am-script); font-size: 1.95rem; line-height: 1; }
.am-wordmark-sub { font-family: var(--am-serif); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--am-muted); }
.am-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.am-nav-link { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 500; color: var(--am-muted) !important; text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.am-nav-link:hover { background: var(--am-sunk); color: var(--am-ink) !important; }
.am-nav-link[aria-current="page"] { color: var(--am-accent) !important; background: var(--am-tint); }
.am-nav-account { font-weight: 600; }
.am-nav-link { position: relative; white-space: nowrap; }
.am-wordmark-sub { white-space: nowrap; }
/* With five places in the bar the wordmark keeps its name and gives up its subtitle. */
@media (max-width: 1180px) { .am-wordmark-sub { display: none; } }
.am-nav-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--am-d20); color: #fff; font-size: .7rem; font-weight: 800; font-variant-numeric: lining-nums; line-height: 1; }
.am-icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.am-iconbtn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--am-line); background: var(--am-surface); color: var(--am-muted); cursor: pointer; }
.am-iconbtn:hover { color: var(--am-ink); border-color: var(--am-line-strong); }

/* ── The plum band, with the booklet's lace edge ────────────────────────── */
.am-band { position: relative; background: var(--am-band); color: var(--am-on-band); border-radius: var(--am-r) var(--am-r) 0 0; padding: 12px 20px 10px; margin-bottom: 12px; }
.am-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px; background: radial-gradient(circle at 9px 0, var(--am-band) 6px, transparent 6.5px) repeat-x; background-size: 18px 9px; }
.am-band-title { font-family: var(--am-serif); font-size: 1.05rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ── Surfaces ───────────────────────────────────────────────────────────── */
.am-card { background: var(--am-surface); border: 1px solid var(--am-line); border-radius: var(--am-r); box-shadow: var(--am-shadow); padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.am-card-flush { padding: 0; gap: 0; overflow: hidden; }
.am-card-body { padding: 8px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.am-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.am-card-title { font-family: var(--am-serif); font-size: 1.12rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.am-banner { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--am-r); padding: 14px 16px; background: var(--am-tint); border: 1px solid color-mix(in srgb, var(--am-plum) 25%, transparent); }
.am-banner-warn { background: var(--am-warn-tint); border-color: color-mix(in srgb, var(--am-warn) 35%, transparent); }
.am-banner-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.am-banner-title { font-weight: 600; }
.am-empty { color: var(--am-faint); font-size: .95rem; }
.am-msg { font-size: .92rem; color: var(--am-muted); min-height: 0; }
.am-msg:empty { display: none; }
.am-msg-err { color: var(--am-bad); }
.am-msg-ok { color: var(--am-ok); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.am-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 10px; font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid var(--am-line-strong); background: var(--am-surface); color: var(--am-ink) !important; transition: background .12s, border-color .12s, transform .06s; }
.am-btn:hover { border-color: var(--am-plum); }
.am-btn:active { transform: translateY(1px); }
.am-btn-primary { background: var(--am-plum); border-color: var(--am-plum); color: var(--am-on-plum) !important; }
.am-btn-primary:hover { background: var(--am-plum-hover); border-color: var(--am-plum-hover); }
.am-btn-tonal { background: var(--am-tint); border-color: transparent; color: var(--am-accent) !important; }
.am-btn-tonal:hover { border-color: color-mix(in srgb, var(--am-accent) 40%, transparent); }
.am-btn-ghost { background: transparent; border-color: transparent; color: var(--am-muted) !important; padding-inline: 10px; }
.am-btn-ghost:hover { background: var(--am-sunk); border-color: transparent; color: var(--am-ink) !important; }
.am-btn-sm { min-height: 34px; padding: 0 12px; font-size: .88rem; border-radius: 8px; }
.am-btn:disabled { opacity: .5; cursor: default; transform: none; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.am-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.am-hint { font-size: .85rem; color: var(--am-faint); }
/* Getting to know you, level 1: what everyone sees, said plainly. */
.am-ladder-open { font-size: 1rem; line-height: 1.55; color: var(--am-ink); }
.am-input, .am-textarea, .am-select { width: 100%; font: inherit; font-size: 1rem; color: var(--am-ink); background: var(--am-surface-2); border: 1px solid var(--am-line-strong); border-radius: 10px; padding: 10px 12px; }
.am-textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.am-input:focus, .am-textarea:focus, .am-select:focus { outline: none; border-color: var(--am-plum); box-shadow: 0 0 0 3px color-mix(in srgb, var(--am-plum) 18%, transparent); }
.am-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.am-num { width: 92px; flex: none; }
.am-save-state { font-size: .8rem; color: var(--am-faint); min-height: 1.1em; }

/* ── Chips ──────────────────────────────────────────────────────────────── */
.am-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: var(--am-sunk); color: var(--am-muted); white-space: nowrap; }
.am-chip-active { background: var(--am-ok-tint); color: var(--am-ok); }
.am-chip-review { background: var(--am-warn-tint); color: var(--am-warn); }
.am-chip-draft { background: var(--am-tint); color: var(--am-accent); }
.am-chip-retired { color: var(--am-faint); }
.am-chip-src { background: transparent; border: 1px dashed var(--am-line-strong); color: var(--am-muted); font-weight: 500; }
.am-chip .am-icon { width: 13px; height: 13px; }

/* ── The school's emblem ────────────────────────────────────────────────
   A cream seal with a dark ring, on a round plate of the same cream, scaled
   to fit rather than cropped, so it reads the same on the plum band and in
   dark mode. */
.am-emblem { display: block; flex: none; border-radius: 50%; background: #f4efe9; object-fit: contain; padding: 2%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--am-plum) 25%, transparent); }
.am-emblem-sm { width: 38px; height: 38px; align-self: center; padding: 0; }
.am-emblem-lg { width: 150px; height: 150px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--am-on-band) 18%, transparent), 0 12px 30px rgba(0, 0, 0, .25); }

/* ── Portraits, framed like the booklet's "This belongs to" ─────────────── */
body.am .am-portrait { font-family: var(--am-script); }
.am-portrait { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--am-tint); color: var(--am-accent); display: grid; place-items: center; font-family: var(--am-script); font-size: 2.3rem; line-height: 1; flex: none; border: 1.5px solid var(--am-plum); box-shadow: 0 0 0 3px var(--am-surface), 0 0 0 4.5px color-mix(in srgb, var(--am-plum) 40%, transparent); padding: 0; }
.am-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No portrait yet: the emblem, whole, on the pale plate. */
.am-portrait-emblem { background: #f4efe9; }
.am-portrait-emblem img { object-fit: contain; padding: 6%; }
.am-portrait-lg { width: 96px; height: 96px; border-radius: 18px; font-size: 3.4rem; }
.am-portrait-sm { width: 44px; height: 44px; border-radius: 11px; font-size: 1.6rem; box-shadow: 0 0 0 2px var(--am-surface), 0 0 0 3px color-mix(in srgb, var(--am-plum) 35%, transparent); }
.am-portrait-btn { cursor: pointer; position: relative; }
.am-portrait-edit { position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; border-radius: 50%; background: var(--am-plum); color: var(--am-on-plum); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--am-surface); }
.am-portrait-edit .am-icon { width: 15px; height: 15px; }

/* ── The sheet's opening card ───────────────────────────────────────────── */
.am-hero-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.am-hero-name { font-family: var(--am-serif); font-size: clamp(1.7rem, 4.5vw, 2.4rem); font-weight: 600; line-height: 1.1; }
.am-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.am-ak { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--am-tint); min-width: 112px; }
.am-ak-label { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--am-accent); display: inline-flex; align-items: center; gap: 4px; }
.am-ak-num { font-family: var(--am-serif); font-size: 2.1rem; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--am-ink); }
.am-stepper { display: inline-flex; border: 1px solid var(--am-line-strong); border-radius: 10px; overflow: hidden; background: var(--am-surface); }
.am-stepper-btn { width: 40px; height: 34px; border: 0; background: transparent; color: var(--am-ink); cursor: pointer; display: grid; place-items: center; }
.am-stepper-btn + .am-stepper-btn { border-left: 1px solid var(--am-line); }
.am-stepper-btn:hover { background: var(--am-sunk); }

/* ── Tabs: a segmented row on wide screens, a bottom bar on a phone ─────── */
.am-tabs { display: flex; gap: 4px; padding: 4px; background: var(--am-sunk); border-radius: 12px; overflow-x: auto; }
.am-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--am-muted); font-size: .92rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.am-tab:hover { color: var(--am-ink); }
.am-tab[aria-selected="true"] { background: var(--am-surface); color: var(--am-accent); box-shadow: var(--am-shadow); }
.am-panel { display: flex; flex-direction: column; gap: 16px; }

/* ── Dice: the booklet's six shapes, in its colours ─────────────────────── */
.am-dice { display: flex; flex-direction: column; }
.am-trait-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 52px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--am-line); }
.am-trait-row:last-child { border-bottom: 0; }
.am-dice-crit .am-trait-row { grid-template-columns: 112px minmax(0, 1fr) 132px; }
.am-trait { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.am-magic { border-top: 1px dashed var(--am-line-strong); margin-top: 4px; padding-top: 12px; }
.am-dierow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.am-die { display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--am-line-strong); }
.am-die svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.am-die-label { font-size: .68rem; font-weight: 600; color: var(--am-faint); font-variant-numeric: lining-nums; }
.am-die-on svg { stroke: color-mix(in srgb, var(--die) 70%, #000); fill: var(--die); }
.am-die-on svg .am-die-inner { stroke: rgba(255, 255, 255, .75); }
.am-die-on .am-die-label { color: var(--am-ink); font-weight: 800; }
.am-die-past { color: color-mix(in srgb, var(--die) 55%, transparent); }
.am-d4 { --die: var(--am-d4); }
.am-d6 { --die: var(--am-d6); }
.am-d8 { --die: var(--am-d8); }
.am-d10 { --die: var(--am-d10); }
.am-d12 { --die: var(--am-d12); }
.am-d20 { --die: var(--am-d20); }
.am-trait-end { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.am-bonus { font-size: .82rem; font-weight: 700; color: var(--am-ok); background: var(--am-ok-tint); border-radius: 999px; padding: 2px 8px; cursor: help; }
.am-crit { font-size: .8rem; font-weight: 700; color: var(--am-on-plum); background: var(--am-plum); border: 0; border-radius: 8px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.am-crit:hover { background: var(--am-plum-hover); }

/* ── Trackers: the booklet's goal and fear gradients ────────────────────── */
.am-track { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)) 34px; gap: 6px; align-items: center; max-width: 620px; }
.am-sq { aspect-ratio: 1; max-height: 30px; border-radius: 4px; position: relative; }
.am-sq-dim { opacity: .28; }
.am-sq-start::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 5px; height: 5px; border-radius: 50%; background: var(--am-muted); transform: translateX(-50%); }
.am-sq-here { box-shadow: 0 0 0 2px var(--am-surface), 0 0 0 4px var(--am-ink); z-index: 1; }
.am-g1 { background: #7a2e3b; } .am-g2 { background: #a87681; } .am-g3 { background: #d3b6c0; } .am-g4 { background: #cdccd2; }
.am-g5 { background: #aabdc2; } .am-g6 { background: #95aeb1; } .am-g7 { background: #7f9e9d; } .am-g8 { background: #668986; }
.am-g9 { background: #4f7772; } .am-g10 { background: #3a6660; } .am-g11 { background: #20524a; } .am-g12 { background: #0b3d33; }
.am-f1 { background: #0f4e5e; } .am-f2 { background: #25606e; } .am-f3 { background: #3a6f7c; } .am-f4 { background: #53818d; }
.am-f5 { background: #6c95a0; } .am-f6 { background: #86a6af; } .am-f7 { background: #8f8f94; } .am-f8 { background: #7b7b80; }
.am-f9 { background: #656569; } .am-f10 { background: #535357; } .am-f11 { background: #3e3e42; } .am-f12 { background: #2a2a2d; }
.am-track-end { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--am-faint); border: 1.5px solid var(--am-line-strong); }
.am-track-end svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.am-track-end-goal { color: var(--am-gold); border-color: var(--am-gold); background: color-mix(in srgb, var(--am-gold) 20%, transparent); }
.am-track-end-fear { color: #fff; border-color: var(--am-bad); background: var(--am-bad); }
.am-track-legend { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--am-faint); margin-top: 6px; max-width: 620px; }

/* ── Injuries: the booklet's three colours ──────────────────────────────── */
.am-inj { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.am-inj-group { display: flex; align-items: center; gap: 8px; }
.am-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--dot); background: transparent; cursor: pointer; padding: 0; opacity: .75; }
.am-dot:hover { opacity: 1; }
.am-dot-on { background: var(--dot); opacity: 1; }
.am-dot-mild { --dot: var(--am-mild); }
.am-dot-moderate { --dot: var(--am-moderate); }
.am-dot-severe { --dot: var(--am-severe); }

/* ── Strengths and choices ──────────────────────────────────────────────── */
.am-strength { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--am-line); }
.am-strength:last-child { border-bottom: 0; padding-bottom: 0; }
.am-strength:first-child { padding-top: 0; }
.am-strength-name { font-family: var(--am-serif); font-weight: 600; font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.am-strength-text { font-size: .92rem; color: var(--am-muted); }
.am-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.am-choice { text-align: left; color: var(--am-ink); background: var(--am-surface); border: 1.5px solid var(--am-line); border-radius: var(--am-r); padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color .12s, background .12s; }
.am-choice:hover { border-color: var(--am-line-strong); }
.am-choice-on { border-color: var(--am-plum); background: var(--am-tint); box-shadow: inset 0 0 0 1px var(--am-plum); }
.am-choice:disabled { opacity: .45; cursor: not-allowed; }
.am-choice-name { font-family: var(--am-serif); font-weight: 600; font-size: 1.05rem; }
.am-choice-sub { font-size: .88rem; color: var(--am-muted); }
/* A broom that would give a strength already chosen. */
.am-choice-note { font-size: .82rem; font-weight: 600; color: var(--am-warn); }
.am-raise { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.am-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }

/* ── The "i" circles ────────────────────────────────────────────────────── */
.am-i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: var(--am-faint); font-family: var(--am-serif); font-style: italic; font-weight: 700; font-size: .72rem; line-height: 1; cursor: pointer; padding: 0; flex: none; }
.am-i:hover { color: var(--am-accent); }
.am-band .am-i { color: color-mix(in srgb, var(--am-on-band) 70%, transparent); }
.am-tip { position: fixed; z-index: 70; max-width: min(340px, calc(100vw - 32px)); background: var(--am-surface); color: var(--am-ink); border: 1px solid var(--am-line-strong); border-radius: var(--am-r); padding: 14px 16px; box-shadow: var(--am-shadow-lg); font-size: .92rem; line-height: 1.5; }
.am-tip-title { font-family: var(--am-serif); font-weight: 600; font-size: 1.02rem; color: var(--am-accent); margin-bottom: 4px; }

/* ── The creator's steps ────────────────────────────────────────────────── */
.am-progress { display: flex; gap: 6px; }
.am-progress-step { flex: 1; height: 5px; border-radius: 3px; background: var(--am-line); }
.am-progress-done { background: color-mix(in srgb, var(--am-plum) 55%, transparent); }
.am-progress-now { background: var(--am-plum); }
.am-step-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; border-top: 1px solid var(--am-line); padding-top: 16px; }
.am-problems { margin: 0; padding-left: 1.2em; color: var(--am-bad); display: flex; flex-direction: column; gap: 4px; }
.am-checklist { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; color: var(--am-muted); }

/* ── Lists and filters ──────────────────────────────────────────────────── */
.am-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.am-list-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--am-line); padding: 10px 0; }
.am-list-row:last-child { border-bottom: 0; }
.am-semesters { display: flex; flex-wrap: wrap; gap: 6px; }
.am-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.am-filter-btn { font-size: .88rem; font-weight: 600; color: var(--am-muted); background: var(--am-surface); border: 1px solid var(--am-line); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.am-filter-btn[aria-pressed="true"] { color: var(--am-on-plum); background: var(--am-plum); border-color: var(--am-plum); }
.am-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 14px; margin: 0; }
.am-kv dt { font-size: .84rem; font-weight: 600; color: var(--am-muted); }
.am-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.am-notes-read { white-space: pre-wrap; background: var(--am-surface-2); border: 1px solid var(--am-line); border-radius: 10px; padding: 12px; font-size: .95rem; }

/* ── Notices: what somebody else just changed ───────────────────────────── */
.am-toasts { position: fixed; z-index: 80; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.am-toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; background: var(--am-ink); color: var(--am-bg); border-radius: 12px; padding: 12px 14px; box-shadow: var(--am-shadow-lg); font-size: .92rem; animation: am-rise .18s ease-out; }
/* With a drawer open, notices sit over the page rather than over the drawer's buttons. */
@media (min-width: 900px) { body:has(.am-drawer) .am-toasts { left: calc((100vw - 580px) / 2); } }
.am-toast-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--am-mauve); margin-top: 7px; flex: none; }
@keyframes am-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.am-live { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--am-ok); }
.am-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }
.am-live-off { color: var(--am-faint); }

/* ── The opener ─────────────────────────────────────────────────────────────
   Aldermere starts like an app: arriving after half an hour with no Aldermere
   page open, the landing page opens on the school's seal between two plum
   doors, which split down the middle to show the page. Moving between
   Aldermere pages never replays it. The landing page's head sets data-intro
   before paint; aldermere-home.js plays it and removes it. Should that script
   never run, the failsafe hides it after twelve seconds. */
.am-intro { display: none; }
html[data-intro] body { overflow: hidden; }
html[data-intro] .am-intro { display: block; position: fixed; inset: 0; z-index: 100; cursor: pointer; }
body.am .am-intro { animation: am-intro-failsafe 0s linear 12s forwards !important; }
@keyframes am-intro-failsafe { to { visibility: hidden; pointer-events: none; } }
.am-intro-door { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; transition: transform 1.5s cubic-bezier(.76, 0, .22, 1); }
.am-intro-door::before { content: ""; position: absolute; inset: 0; background-image: var(--am-vines); background-size: 240px 240px; opacity: .1; }
.am-intro-door-l { left: 0; background: radial-gradient(ellipse 75vw 85vh at 100% 50%, #6d165f 0%, #4f0a47 48%, #26041f 100%); box-shadow: inset -1px 0 0 rgba(217, 178, 92, .45); }
.am-intro-door-r { right: 0; background: radial-gradient(ellipse 75vw 85vh at 0% 50%, #6d165f 0%, #4f0a47 48%, #26041f 100%); box-shadow: inset 1px 0 0 rgba(217, 178, 92, .45); }
:root[data-theme="dark"] .am-intro-door-l { background: radial-gradient(ellipse 75vw 85vh at 100% 50%, #34102f 0%, #170715 50%, #060406 100%); }
:root[data-theme="dark"] .am-intro-door-r { background: radial-gradient(ellipse 75vw 85vh at 0% 50%, #34102f 0%, #170715 50%, #060406 100%); }
.am-intro-stage { position: absolute; top: 0; bottom: 0; width: 100vw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; color: #f4e5f1; }
.am-intro > .am-intro-stage { left: 0; z-index: 2; }
.am-intro-door-l .am-intro-stage { left: 0; }
.am-intro-door-r .am-intro-stage { right: 0; }
.am-intro-emblem { display: block; width: clamp(150px, 32vmin, 250px); height: auto; aspect-ratio: 1; border-radius: 50%; background: #f4efe9; padding: 1.5%; object-fit: contain; margin-bottom: 18px; box-shadow: 0 0 0 1px rgba(217, 178, 92, .7), 0 0 0 12px rgba(244, 229, 241, .05), 0 0 80px 12px rgba(217, 178, 92, .2); }
.am-intro-welcome { font-family: var(--am-serif); font-style: italic; font-size: clamp(1.05rem, 2.6vw, 1.35rem); letter-spacing: .04em; opacity: .9; }
.am-intro-name { font-family: var(--am-script); font-size: clamp(3.8rem, 13vw, 7.2rem); line-height: .95; color: #fff; padding-inline: .2em; }
.am-intro-college { font-family: var(--am-serif); font-size: clamp(.78rem, 2vw, .98rem); letter-spacing: .32em; text-transform: uppercase; padding-left: .32em; }
.am-intro-rule { display: block; width: 160px; height: 1px; margin: 14px 0 8px; background: linear-gradient(90deg, transparent, #d9b25c, transparent); }
.am-intro-credit { font-size: clamp(.8rem, 2vw, .92rem); letter-spacing: .05em; line-height: 1.7; color: rgba(244, 229, 241, .78); }
.am-intro-credit strong { color: #fff; font-weight: 600; }
.am-intro-play .am-intro-emblem { animation: am-seal-in 1.56s cubic-bezier(.2, .8, .2, 1) both; }
.am-intro-play .am-intro-welcome { animation: am-fade-up .91s ease-out .98s both; }
.am-intro-play .am-intro-name { animation: am-ink 1.56s ease-out 1.37s both; }
.am-intro-play .am-intro-college { animation: am-fade-up .91s ease-out 2.41s both; }
.am-intro-play .am-intro-rule { animation: am-draw 1.04s ease-out 2.86s both; }
.am-intro-play .am-intro-credit { animation: am-fade-up 1.04s ease-out 3.19s both; }
@keyframes am-seal-in { from { opacity: 0; transform: scale(.82) rotate(-10deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes am-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes am-ink { from { opacity: 0; filter: blur(8px); letter-spacing: .06em; } to { opacity: 1; filter: none; letter-spacing: 0; } }
@keyframes am-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.am-intro-seam { position: absolute; z-index: 3; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; opacity: 0; transform: scaleY(0); background: linear-gradient(transparent, #f3d58a 25%, #fff 50%, #f3d58a 75%, transparent); box-shadow: 0 0 22px 5px rgba(243, 213, 138, .5); }
.am-intro-seam-on .am-intro-seam { animation: am-seam .59s ease-out forwards; }
@keyframes am-seam { to { opacity: 1; transform: scaleY(1); } }
.am-intro-open .am-intro-seam { animation: none; opacity: 0; transition: opacity .46s; }
.am-intro-open .am-intro-door-l { transform: translateX(-101%); }
.am-intro-open .am-intro-door-r { transform: translateX(101%); }
.am-intro-skip { position: absolute; z-index: 4; right: 18px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); background: transparent; border: 1px solid rgba(244, 229, 241, .35); color: rgba(244, 229, 241, .85); border-radius: 999px; padding: 7px 16px; font-family: var(--am-sans); font-size: .8rem; font-weight: 600; letter-spacing: .08em; cursor: pointer; }
.am-intro-skip:hover { border-color: rgba(244, 229, 241, .7); color: #fff; }
.am-intro-open .am-intro-skip { opacity: 0; }

/* ── The landing page ─────────────────────────────────────────────────────── */
.am-hero { position: relative; background: var(--am-band); color: var(--am-on-band); padding-block: 56px 64px; margin-bottom: 28px; }
.am-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: radial-gradient(circle at 12px 0, var(--am-band) 8px, transparent 8.5px) repeat-x; background-size: 24px 12px; }
.am-hero::before { content: ""; position: absolute; inset: 0; background-image: var(--am-vines); background-size: 240px 240px; opacity: .07; pointer-events: none; }
.am-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.am-hero-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.am-hero .am-eyebrow { color: color-mix(in srgb, var(--am-on-band) 75%, transparent); }
.am-hero-sub { font-family: var(--am-serif); font-style: italic; font-size: clamp(1.1rem, 2.4vw, 1.35rem); color: color-mix(in srgb, var(--am-on-band) 88%, transparent); }
.am-hero .am-lede { color: color-mix(in srgb, var(--am-on-band) 82%, transparent); }
.am-hero .am-btn { border-color: color-mix(in srgb, var(--am-on-band) 45%, transparent); background: transparent; color: var(--am-on-band) !important; }
.am-hero .am-btn:hover { background: color-mix(in srgb, var(--am-on-band) 12%, transparent); }
.am-hero .am-btn-primary { background: var(--am-on-band); border-color: var(--am-on-band); color: var(--am-band) !important; }
.am-hero .am-btn-primary:hover { background: #fff; }
.am-hero .am-btn-tonal { background: color-mix(in srgb, var(--am-on-band) 12%, transparent); border-color: transparent; }
.am-hero-note { font-size: .95rem; color: color-mix(in srgb, var(--am-on-band) 82%, transparent); display: inline-flex; align-items: center; gap: 8px; }
.am-hero-note a { color: var(--am-on-band) !important; font-weight: 600; }
.am-hero-small { font-size: .9rem; color: color-mix(in srgb, var(--am-on-band) 72%, transparent); }
.am-hero-small a { color: var(--am-on-band) !important; }
.am-hero-welcome { padding-block: 64px 80px; overflow: hidden; }
.am-welcome { display: flex; flex-direction: column; line-height: 1; }
.am-welcome-script { font-family: var(--am-script); font-weight: 400; font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 1.1; color: color-mix(in srgb, var(--am-on-band) 82%, transparent); }
.am-welcome-name { font-family: var(--am-serif); font-weight: 600; font-size: clamp(2.7rem, 7.5vw, 4.8rem); line-height: 1.02; letter-spacing: -.01em; overflow-wrap: anywhere; }
.am-hero-seal { justify-self: center; position: relative; display: grid; place-items: center; }
.am-hero-seal::before { content: ""; position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--am-gold) 30%, transparent), transparent); }
.am-seal { position: relative; display: block; width: clamp(210px, 26vw, 300px); height: auto; aspect-ratio: 1; border-radius: 50%; background: #f4efe9; padding: 1.5%; object-fit: contain; box-shadow: 0 0 0 1px rgba(217, 178, 92, .6), 0 26px 60px rgba(0, 0, 0, .35); animation: am-float 8s ease-in-out infinite; }
@keyframes am-float { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-9px) rotate(1.2deg); } }
/* After the opener: the welcome rises into place. */
.am-arrived .am-hero-copy > * { animation: am-fade-up .8s cubic-bezier(.2, .8, .2, 1) both; }
.am-arrived .am-hero-copy > :nth-child(2) { animation-delay: .08s; }
.am-arrived .am-hero-copy > :nth-child(3) { animation-delay: .16s; }
.am-arrived .am-hero-copy > :nth-child(4) { animation-delay: .24s; }
.am-arrived .am-hero-copy > :nth-child(n+5) { animation-delay: .32s; }
.am-section { padding-block: 44px 8px; display: flex; flex-direction: column; gap: 20px; }
.am-section-head { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.am-kicker { font-family: var(--am-serif); font-style: italic; font-size: 1.08rem; color: var(--am-muted); max-width: 62ch; }
.am-table-label { display: inline-block; font-family: var(--am-sans); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--am-accent); margin-right: 6px; }

/* Your student file: the bridge for players bringing their booklets over. */
.am-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.am-file-name { font-family: var(--am-serif); font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.am-file-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* The admissions letter, with what each paragraph means at the table in its margin. */
.am-letter { position: relative; background: var(--am-paper); border: 1px solid var(--am-line); border-radius: 6px; box-shadow: var(--am-shadow), 0 1px 0 var(--am-line), 0 4px 0 -1px var(--am-paper), 0 4px 0 0 var(--am-line); padding: clamp(26px, 5vw, 52px); display: flex; flex-direction: column; gap: 18px; }
.am-letter-seal { position: absolute; top: -26px; right: clamp(18px, 5vw, 48px); width: 92px; height: 92px; border-radius: 50%; background: #f4efe9; padding: 2%; object-fit: contain; transform: rotate(8deg); box-shadow: 0 0 0 4px #7a1530, 0 0 0 5px rgba(122, 21, 48, .5), 0 10px 22px rgba(0, 0, 0, .25); }
.am-letter-head { font-family: var(--am-serif); font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--am-accent); padding-right: 110px; }
.am-letter-row { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 32px; align-items: start; }
.am-letter-text { font-family: var(--am-serif); font-size: 1.1rem; line-height: 1.75; color: var(--am-ink); max-width: 60ch; }
.am-margin { font-size: .88rem; line-height: 1.55; color: var(--am-muted); border-left: 2px solid var(--am-mauve); padding: 2px 0 2px 14px; }
.am-margin-q { display: block; font-family: var(--am-serif); font-style: italic; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--am-accent); margin-bottom: 4px; }
.am-letter-sign { font-family: var(--am-serif); font-size: 1.1rem; display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.am-letter-sig { font-family: var(--am-script); font-size: 2.3rem; line-height: 1.1; color: var(--am-accent); }

/* How a year at Aldermere works, as a path. */
.am-path { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 16px; }
.am-path::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(var(--am-plum), var(--am-mauve), var(--am-gold)); opacity: .55; }
.am-path-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.am-path-mark { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--am-band); color: var(--am-on-band); font-family: var(--am-serif); font-weight: 600; font-variant-numeric: lining-nums; box-shadow: 0 0 0 5px var(--am-bg); }
.am-path-body { background: var(--am-surface); border: 1px solid var(--am-line); border-radius: var(--am-r); box-shadow: var(--am-shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.am-path-title { font-family: var(--am-serif); font-size: 1.2rem; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.am-path-world { font-family: var(--am-serif); font-style: italic; color: var(--am-ink); }
.am-path-table { font-size: .93rem; color: var(--am-muted); }

/* What you carry: cards that turn over to show the rule behind them. */
.am-carry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.am-carry { perspective: 1100px; background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; border-radius: var(--am-r); }
.am-carry-inner { display: grid; height: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.3, .7, .2, 1); }
.am-carry[aria-pressed="true"] .am-carry-inner { transform: rotateY(180deg); }
.am-carry-face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: var(--am-r); border: 1px solid var(--am-line); background: var(--am-surface); box-shadow: var(--am-shadow); padding: 18px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.am-carry:hover .am-carry-front { border-color: var(--am-plum); }
.am-carry-back { transform: rotateY(180deg); background: var(--am-band); color: var(--am-on-band); border-color: transparent; }
.am-carry-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--am-tint); color: var(--am-accent); }
.am-carry-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.am-carry-name { font-family: var(--am-serif); font-size: 1.12rem; font-weight: 600; }
.am-carry-line { font-family: var(--am-serif); font-style: italic; color: var(--am-muted); }
.am-carry-rule { font-size: .95rem; line-height: 1.55; }
.am-carry-turn { margin-top: auto; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--am-accent); }
.am-carry-back .am-carry-turn { color: color-mix(in srgb, var(--am-on-band) 70%, transparent); }

/* Try the dice. */
.am-roller { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.am-roll-side { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.am-roll-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.am-roll-die { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px 6px; min-width: 58px; border-radius: 12px; border: 1.5px solid var(--am-line); background: var(--am-surface); color: var(--am-ink); cursor: pointer; font-family: var(--am-sans); font-size: .8rem; font-weight: 700; }
.am-roll-die:hover { border-color: var(--am-line-strong); }
.am-roll-die[aria-pressed="true"] { border-color: var(--am-plum); background: var(--am-tint); box-shadow: inset 0 0 0 1px var(--am-plum); }
.am-roll-die .am-die svg { width: 32px; height: 32px; }
.am-roll-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 240px; border-radius: var(--am-r); background: var(--am-sunk); border: 1px solid var(--am-line); padding: 22px; text-align: center; }
.am-roll-total { font-family: var(--am-serif); font-size: clamp(3.6rem, 9vw, 4.8rem); font-weight: 600; line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--am-ink); }
.am-roll-chain { font-size: 1rem; font-weight: 600; color: var(--am-muted); font-variant-numeric: lining-nums tabular-nums; min-height: 1.5em; }
.am-roll-note { font-size: .92rem; color: var(--am-muted); max-width: 38ch; min-height: 3em; }
.am-roll-spin .am-roll-total { animation: am-tumble .5s ease-out; }
.am-roll-boom .am-roll-total { color: var(--am-d12); animation: am-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes am-tumble { 0% { transform: rotate(-14deg) scale(.86); opacity: .4; } 60% { transform: rotate(6deg) scale(1.04); } 100% { transform: none; opacity: 1; } }
@keyframes am-pop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }

/* The grounds, each a door into the Library. */
.am-grounds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.am-ground { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 240px; padding: 22px; border-radius: var(--am-r); background: var(--am-band); color: var(--am-on-band) !important; text-decoration: none; box-shadow: var(--am-shadow); transition: transform .15s; }
.am-ground:hover { transform: translateY(-3px); }
.am-ground-art { position: absolute; right: -14px; bottom: -14px; width: 160px; height: 160px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: .16; }
.am-ground-kicker { font-family: var(--am-serif); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--am-on-band) 70%, transparent); }
.am-ground-title { font-family: var(--am-serif); font-size: 1.45rem; font-weight: 600; line-height: 1.2; }
.am-ground-text { color: color-mix(in srgb, var(--am-on-band) 84%, transparent); max-width: 34ch; }
.am-ground-go { margin-top: auto; font-size: .9rem; font-weight: 700; }
.am-touch { columns: 2 240px; column-gap: 28px; margin: 0; padding: 0; list-style: none; }
.am-touch li { break-inside: avoid; border-bottom: 1px solid var(--am-line); padding: 7px 0; }
.am-depts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.am-dept { background: var(--am-surface); border: 1px solid var(--am-line); border-left: 3px solid var(--am-mauve); border-radius: var(--am-r-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.am-dept-name { font-family: var(--am-serif); font-weight: 600; }

/* The library is open. */
.am-library { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: clamp(26px, 5vw, 46px); border-radius: 18px; background: var(--am-band); color: var(--am-on-band); }
.am-library::before { content: ""; position: absolute; inset: 0; background-image: var(--am-vines); background-size: 240px 240px; opacity: .08; pointer-events: none; }
.am-library > * { position: relative; }
.am-library-title { font-family: var(--am-script); font-weight: 400; font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: 1.05; }
.am-library-text { color: color-mix(in srgb, var(--am-on-band) 84%, transparent); max-width: 58ch; margin-top: 8px; }
.am-library .am-btn-primary { background: var(--am-on-band); border-color: var(--am-on-band); color: var(--am-band) !important; }
.am-library .am-btn-primary:hover { background: #fff; }

/* Sections fade up as they come into view (only once the script has run). */
.am-reveal-on .am-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.am-reveal-on .am-reveal.am-in { opacity: 1; transform: none; }

.am-foot { border-top: 1px solid var(--am-line); margin-top: 56px; padding-block: 24px 40px; color: var(--am-faint); font-size: .9rem; background: color-mix(in srgb, var(--am-surface) 70%, transparent); }
.am-foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.am-foot-links a { color: var(--am-muted); }
.am-foot-rights { font-size: .84rem; line-height: 1.6; max-width: 72ch; }

/* ── A player's characters ──────────────────────────────────────────────── */
.am-chars { display: flex; flex-direction: column; gap: 14px; }
.am-char { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.am-char-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.am-char-retired { background: var(--am-surface-2); }
.am-record { grid-column: 1 / -1; border-top: 1px solid var(--am-line); padding-top: 16px; display: flex; flex-direction: column; gap: 18px; }
.am-record-title { font-family: var(--am-serif); font-weight: 600; font-size: 1.02rem; color: var(--am-accent); }

/* ── The Library ────────────────────────────────────────────────────────── */
.am-hero-slim { padding-block: 40px 52px; }
.am-hero-title { font-family: var(--am-serif); font-weight: 600; font-size: clamp(2.2rem, 6vw, 3.2rem); line-height: 1.08; }
.am-search { position: relative; width: 100%; max-width: 540px; }
.am-search .am-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--am-faint); pointer-events: none; }
.am-search .am-input { padding-left: 42px; background: var(--am-surface); min-height: 48px; }
.am-shelves { position: sticky; top: 60px; z-index: 20; background: color-mix(in srgb, var(--am-bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--am-line); }
.am-shelves-inner { display: flex; gap: 6px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.am-shelves-inner::-webkit-scrollbar { display: none; }
.am-shelf-link { white-space: nowrap; font-size: .86rem; font-weight: 600; color: var(--am-muted) !important; text-decoration: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--am-line); background: var(--am-surface); }
.am-shelf-link:hover { border-color: var(--am-plum); color: var(--am-accent) !important; }
.am-shelf { scroll-margin-top: 124px; padding-block: 34px 4px; display: flex; flex-direction: column; gap: 16px; }
.am-entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.am-entry { text-align: left; font: inherit; color: var(--am-ink); background: var(--am-surface); border: 1px solid var(--am-line); border-radius: var(--am-r); padding: 16px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; box-shadow: var(--am-shadow); transition: border-color .12s, transform .12s; min-width: 0; }
.am-entry:hover { border-color: var(--am-plum); transform: translateY(-1px); }
.am-entry-title { font-family: var(--am-serif); font-size: 1.1rem; font-weight: 600; line-height: 1.25; }
.am-entry-sub { font-size: .8rem; font-weight: 600; color: var(--am-accent); }
.am-entry-sum { font-size: .92rem; color: var(--am-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.am-entry-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.am-entry-foot .am-chip { white-space: normal; }
.am-entry-locked { cursor: default; border-style: dashed; box-shadow: none; background: repeating-linear-gradient(135deg, var(--am-surface-2) 0 10px, var(--am-surface) 10px 20px); }
.am-entry-locked:hover { transform: none; border-color: var(--am-line-strong); }
.am-entry-q { font-family: var(--am-script); font-size: 2.4rem; line-height: 1; color: var(--am-faint); }
.am-entry-hint { font-family: var(--am-serif); font-style: italic; font-size: .92rem; color: var(--am-muted); }
.am-chip-gm { background: var(--am-bad-tint); color: var(--am-bad); }
.am-chip-found { background: var(--am-ok-tint); color: var(--am-ok); }
.am-names { display: flex; flex-wrap: wrap; gap: 8px; }
.am-name { font-family: var(--am-serif); font-size: 1rem; padding: 6px 12px; border-radius: 8px; background: var(--am-surface); border: 1px solid var(--am-line); }
.am-name-mine { border-color: var(--am-plum); background: var(--am-tint); color: var(--am-accent); }
.am-rules { display: flex; flex-direction: column; gap: 8px; }
.am-rule { background: var(--am-surface); border: 1px solid var(--am-line); border-radius: var(--am-r-sm); }
.am-rule > summary { cursor: pointer; padding: 12px 14px; font-family: var(--am-serif); font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.am-rule > summary::-webkit-details-marker { display: none; }
.am-rule > summary::after { content: "+"; font-family: var(--am-sans); font-weight: 600; color: var(--am-faint); }
.am-rule[open] > summary::after { content: "\2212"; }
.am-rule-body { padding: 0 14px 14px; color: var(--am-muted); font-size: .95rem; display: flex; flex-direction: column; gap: 8px; }
.am-read { display: flex; flex-direction: column; gap: 12px; line-height: 1.65; }
.am-read ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.am-read-h { font-family: var(--am-serif); font-size: 1.08rem; font-weight: 600; color: var(--am-accent); margin-top: 6px; }
.am-read-title { font-family: var(--am-serif); font-size: clamp(1.6rem, 4vw, 2.05rem); font-weight: 600; line-height: 1.15; }
.am-gm-box { border: 1px dashed color-mix(in srgb, var(--am-bad) 60%, transparent); border-radius: var(--am-r-sm); padding: 12px 14px; background: var(--am-bad-tint); display: flex; flex-direction: column; gap: 6px; }
/* How well two people know each other: five steps, filled to the level they
   share, hatched beyond it up to your own side. */
.am-rel { display: inline-flex; flex-direction: column; gap: 5px; }
.am-rel-segs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; width: 170px; }
.am-rel-seg { height: 9px; border-radius: 5px; background: var(--am-line); }
.am-rel-on { background: var(--am-plum); }
.am-rel-own { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--am-plum) 55%, transparent) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--am-plum) 45%, transparent); }
.am-rel-need { background: var(--am-line-strong); }
.am-rel-label { font-size: .8rem; font-weight: 600; color: var(--am-accent); }
.am-rel-sm .am-rel-segs { width: 110px; }
.am-rel-sm .am-rel-seg { height: 6px; }
.am-rel-sm .am-rel-label { font-size: .74rem; }
.am-rel-xs .am-rel-segs { width: 54px; gap: 2px; }
.am-rel-xs .am-rel-seg { height: 5px; border-radius: 3px; }
.am-relbox { background: var(--am-tint); border-radius: var(--am-r); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
/* A person, a level at a time. */
.am-layers { display: flex; flex-direction: column; gap: 14px; }
.am-layer { border-left: 3px solid var(--am-plum); padding: 2px 0 2px 14px; display: flex; flex-direction: column; gap: 8px; }
.am-layer-locked { border-left-color: var(--am-line-strong); }
.am-layer-head { display: flex; align-items: center; gap: 10px; font-family: var(--am-serif); font-weight: 600; color: var(--am-accent); }
.am-layer-locked .am-layer-head { color: var(--am-faint); }
.am-layer-q { font-family: var(--am-serif); font-style: italic; font-size: .9rem; color: var(--am-muted); }
.am-layer-edit { border-left-color: var(--am-mauve); }
/* A Game Master's pencils, on every card and list. */
.am-gm-view .am-entry-wrap > .am-entry { padding-right: 46px; }
.am-entry-wrap { position: relative; display: flex; min-width: 0; }
.am-entry-wrap > .am-entry { flex: 1; }
.am-entry-wrap > .am-edit-sm { position: absolute; top: 10px; right: 10px; }
.am-edit-sm { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; border: 1px solid var(--am-line); background: var(--am-surface); color: var(--am-muted); cursor: pointer; padding: 0; }
.am-edit-sm:hover { color: var(--am-accent); border-color: var(--am-plum); }
.am-edit-sm .am-icon { width: 15px; height: 15px; }
.am-shelf-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; justify-content: space-between; }
.am-touch li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.am-dept { position: relative; }
.am-dept > .am-edit-sm { position: absolute; top: 8px; right: 8px; }
.am-list-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--am-line); padding: 8px 0; }
.am-list-item:last-child { border-bottom: 0; }
.am-list-item .am-strength { border-bottom: 0; padding: 0; }
.am-list-row .am-strength { border-bottom: 0; padding: 0; flex: 1; min-width: 0; }
.am-list-row .am-strength-name { font-size: 1rem; }
.am-seat-strengths { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.am-seat-strength { display: flex; flex-direction: column; gap: 1px; font-size: .86rem; line-height: 1.4; }
.am-seat-strength strong { font-family: var(--am-serif); font-weight: 600; font-size: .94rem; }
.am-seat-strength span { color: var(--am-muted); }
.am-name-known { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; font: inherit; font-family: var(--am-serif); color: var(--am-ink); text-align: left; cursor: pointer; }
.am-name-known:hover { border-color: var(--am-plum); }
a.am-name { text-decoration: none; }
/* The drawer is narrow at any window size: who they are on one row, the GM's two numbers and Remove beneath. */
.am-gm-rel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px 10px; align-items: end; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--am-bad) 25%, transparent); }
.am-gm-rel > .am-stack-sm { grid-column: 1 / -1; }
.am-gm-rel-pc { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.am-gm-rel-pc > .am-stack-sm { grid-column: auto; }
.am-select-sm { width: auto; max-width: 100%; padding: 6px 8px; font-size: .86rem; }
@media (max-width: 640px) {
  .am-gm-rel { grid-template-columns: 1fr 1fr; }
  .am-gm-rel > .am-stack-sm { grid-column: 1 / -1; }
}
.am-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 12px; max-height: 260px; overflow-y: auto; padding: 4px 0; }
.am-check { display: flex; gap: 8px; align-items: center; font-size: .94rem; }
.am-check input { accent-color: var(--am-plum); width: 16px; height: 16px; flex: none; }

/* ── The GM page ────────────────────────────────────────────────────────── */
.am-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.am-gm-card { gap: 12px; }
.am-gm-head { display: flex; gap: 12px; align-items: center; }
.am-gm-who { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; flex: 1; }
.am-gm-name { font-family: var(--am-serif); font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
.am-gm-dice { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.am-gm-die { display: flex; flex-direction: column; align-items: center; gap: 3px; border-radius: 8px; padding: 6px 2px; background: var(--am-surface-2); border: 1px solid var(--am-line); }
.am-gm-die-label { font-size: .64rem; font-weight: 600; color: var(--am-faint); }
.am-gm-die-val { font-family: var(--am-serif); font-size: 1.02rem; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; color: var(--am-ink); }
.am-gm-up { width: 100%; max-width: 34px; height: 24px; border: 0; border-radius: 6px; background: var(--am-tint); color: var(--am-accent); font-weight: 800; cursor: pointer; }
.am-gm-up:hover { background: var(--am-plum); color: var(--am-on-plum); }
.am-switch { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--am-ink); cursor: pointer; padding: 0; font-weight: 600; }
.am-switch-track { width: 46px; height: 26px; border-radius: 13px; background: var(--am-line-strong); position: relative; transition: background .15s; flex: none; }
.am-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.am-switch[aria-checked="true"] .am-switch-track { background: var(--am-plum); }
.am-switch[aria-checked="true"] .am-switch-track::after { transform: translateX(20px); }
.am-drawer { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(580px, 100vw); background: var(--am-bg); border-left: 1px solid var(--am-line); box-shadow: var(--am-shadow-lg); overflow-y: auto; padding: calc(env(safe-area-inset-top, 0px) + 18px) 18px 40px; display: flex; flex-direction: column; gap: 16px; }
/* A scrolling column: its children keep their height rather than shrink to fit. */
.am-drawer > * { flex-shrink: 0; }
.am-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(20, 12, 22, .45); }
.am-step-ctl { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.am-step-btn { width: 34px; height: 32px; border-radius: 8px; border: 1px solid var(--am-line-strong); background: var(--am-surface); color: var(--am-ink); cursor: pointer; font-size: 1rem; }
.am-step-btn:hover { border-color: var(--am-plum); }
.am-log { display: flex; flex-direction: column; font-size: .88rem; }
.am-log-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; border-bottom: 1px solid var(--am-line); padding: 6px 0; color: var(--am-muted); }

/* ── At the table ───────────────────────────────────────────────────────── */
.am-back { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; text-decoration: none; }
.am-back .am-icon { width: 15px; height: 15px; }
.am-row-tight { gap: 4px; flex-wrap: nowrap; }
/* A choice of two or three, like the booklet's tabs. */
.am-seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--am-line-strong); border-radius: 10px; overflow: hidden; background: var(--am-surface); align-self: flex-start; }
.am-seg-btn { border: 0; border-right: 1px solid var(--am-line); background: none; color: var(--am-muted); font-size: .88rem; font-weight: 600; padding: 8px 14px; cursor: pointer; }
.am-seg-btn:last-child { border-right: 0; }
.am-seg-btn[aria-pressed="true"] { background: var(--am-plum); color: var(--am-on-plum); }
.am-seats { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); align-items: start; }
.am-seat { gap: 14px; }
.am-seat-empty { background: var(--am-surface-2); box-shadow: none; border-style: dashed; }
.am-gm-pm { display: flex; flex-direction: column; gap: 3px; width: 100%; align-items: center; }
.am-gm-pm .am-gm-up { height: 22px; }
.am-gm-dn { background: var(--am-sunk); color: var(--am-muted); }
.am-gm-up:disabled { opacity: .35; cursor: default; background: var(--am-sunk); color: var(--am-faint); }
.am-step-val { min-width: 3.2em; text-align: center; font-family: var(--am-serif); font-weight: 600; }
.am-held { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* A row whose buttons drop beneath the words when there is no room beside them. */
.am-wrapitem { flex-wrap: wrap; }
.am-wrapitem > .am-row { margin-left: auto; }
.am-wrapitem .am-btn { white-space: nowrap; }
.am-seat > .am-btn { align-self: flex-start; }
.am-catalog-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.am-npc-form { border-top: 1px solid var(--am-line); padding-top: 12px; }
/* Choosing people: a letter's recipients, who met someone tonight. */
.am-picks-wrap { display: flex; flex-direction: column; gap: 8px; }
.am-picks { border: 1px solid var(--am-line); border-radius: 10px; background: var(--am-surface-2); }
.am-picks-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; font-weight: 600; font-size: .9rem; cursor: pointer; list-style: none; }
.am-picks-head::-webkit-details-marker { display: none; }
.am-picks-head::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--am-muted); border-bottom: 2px solid var(--am-muted); transform: rotate(-45deg); margin-right: 4px; transition: transform .15s; flex: none; }
.am-picks[open] > .am-picks-head::before { transform: rotate(45deg); }
.am-picks-head > span { flex: 1; }
.am-picks-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 10px; padding: 4px 12px 10px; max-height: 260px; overflow-y: auto; }
.am-pick { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: .92rem; cursor: pointer; line-height: 1.3; }
.am-pick input { accent-color: var(--am-plum); width: 17px; height: 17px; margin: 1px 0 0; flex: none; }
.am-pick .am-faint { display: block; font-size: .78rem; }
/* The composer looks like what it sends: paper for a letter, plain for a note. */
.am-letter-input { font-family: var(--am-serif); font-size: 1.02rem; line-height: 1.7; background: var(--am-paper); }
.am-composing-note .am-letter-input { font-family: var(--am-sans); font-size: .95rem; line-height: 1.55; background: var(--am-surface-2); }
.am-sent { display: flex; flex-direction: column; }
.am-sent-row { border-bottom: 1px solid var(--am-line); padding: 8px 0; }
.am-sent-row:last-child { border-bottom: 0; }
.am-sent-row > summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; cursor: pointer; list-style: none; }
.am-sent-row > summary::-webkit-details-marker { display: none; }
.am-sent-row[open] > summary { margin-bottom: 8px; }
.am-sent-from { font-family: var(--am-serif); font-weight: 600; }
.am-sent-tos { display: flex; flex-wrap: wrap; gap: 4px; }
.am-sent-to { display: inline-flex; align-items: center; gap: 3px; font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 2px 9px; background: var(--am-sunk); color: var(--am-muted); }
.am-sent-read { background: var(--am-ok-tint); color: var(--am-ok); }
.am-sent-to .am-icon { width: 12px; height: 12px; }
.am-item-form { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 6px 0; }
.am-item-new { margin-top: 12px; }
.am-item-new > summary { list-style: none; display: inline-flex; }
.am-item-new > summary::-webkit-details-marker { display: none; }
.am-item-new[open] > summary { margin-bottom: 10px; }
.am-list-item .am-icon { width: 14px; height: 14px; vertical-align: -2px; }
.am-list-item > .am-item-form { padding: 4px 0; }

/* ── A player's things ──────────────────────────────────────────────────── */
.am-banner-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--am-surface); color: var(--am-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--am-plum) 25%, transparent); }
.am-banner-icon .am-icon { width: 18px; height: 18px; }
.am-banner-call { background: var(--am-band); color: var(--am-on-band); border-color: var(--am-band); }
.am-banner-call .am-muted { color: color-mix(in srgb, var(--am-on-band) 80%, transparent); }
.am-banner-call .am-banner-title { font-family: var(--am-serif); font-size: 1.1rem; }
.am-banner-call .am-banner-icon { background: color-mix(in srgb, var(--am-on-band) 12%, transparent); color: var(--am-on-band); box-shadow: none; }
.am-banner-call .am-btn { align-self: flex-start; margin-top: 6px; background: var(--am-on-band); color: var(--am-band) !important; border-color: var(--am-on-band); }
.am-banner-call .am-btn:hover { background: #fff; }
.am-items { display: flex; flex-direction: column; }
.am-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--am-line); }
.am-item:last-child { border-bottom: 0; }
.am-item-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--am-tint); color: var(--am-accent); }
.am-item-mark .am-icon { width: 19px; height: 19px; }
.am-item-effect { font-size: .92rem; background: var(--am-ok-tint); border-radius: 8px; padding: 8px 10px; }
.am-item-effect .am-label { color: var(--am-ok); margin-right: 4px; }
.am-item-hidden { display: inline-flex; align-items: center; gap: 6px; font-family: var(--am-serif); font-style: italic; font-size: .92rem; color: var(--am-faint); }
.am-item-hidden .am-icon { width: 14px; height: 14px; }

/* ── The Wrap Up ────────────────────────────────────────────────────────── */
.am-wrap-people { display: flex; flex-direction: column; gap: 12px; }
.am-wrap-person { gap: 14px; }
.am-wrap-who { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.am-wrap-name { font-family: var(--am-serif); font-size: 1.22rem; font-weight: 600; line-height: 1.2; text-decoration: none; }
body.am a.am-wrap-name { color: var(--am-ink); }
.am-wrap-who .am-chip { align-self: center; }
/* Five steps of knowing someone; the ones already behind you stay filled. */
.am-fam { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; max-width: 360px; }
.am-fam-btn { height: 40px; border-radius: 9px; border: 1px solid var(--am-line-strong); background: var(--am-surface); color: var(--am-muted); font-family: var(--am-serif); font-weight: 600; font-size: 1.02rem; font-variant-numeric: lining-nums; cursor: pointer; transition: background .12s, color .12s; }
.am-fam-btn:hover:not(:disabled) { border-color: var(--am-plum); color: var(--am-accent); }
.am-fam-on { background: var(--am-plum); border-color: var(--am-plum); color: var(--am-on-plum); }
.am-fam-on:hover:not(:disabled) { color: var(--am-on-plum); }
.am-fam-btn[aria-pressed="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--am-plum) 25%, transparent); }
.am-fam-past { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--am-plum) 70%, transparent) 0 4px, var(--am-plum) 4px 8px); cursor: default; }
.am-fam-btn:disabled:not(.am-fam-past) { opacity: .6; cursor: default; }
.am-fam-n { pointer-events: none; }

/* ── Letters ────────────────────────────────────────────────────────────── */
.am-posts { display: flex; flex-direction: column; gap: 18px; }
/* Sealed: an envelope, its flap drawn in two strokes, the school's seal on it. */
.am-envelope { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px 22px 22px 20px; background: var(--am-paper); border: 1px solid var(--am-line-strong); border-radius: 6px; box-shadow: var(--am-shadow); overflow: hidden; }
.am-envelope::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 34px; background: color-mix(in srgb, var(--am-mauve) 14%, transparent); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; }
.am-envelope > * { position: relative; }
.am-envelope-seal { width: 62px; height: 62px; border-radius: 50%; background: #f4efe9; padding: 3%; object-fit: contain; transform: rotate(-8deg); box-shadow: 0 0 0 3px #7a1530, 0 0 0 4px rgba(122, 21, 48, .45), 0 6px 14px rgba(0, 0, 0, .2); }
.am-envelope-from { font-family: var(--am-serif); font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.am-envelope-note { grid-template-columns: minmax(0, 1fr) auto; background: var(--am-surface-2); border: 1px dashed var(--am-line-strong); box-shadow: none; }
.am-envelope-note::before { display: none; }
.am-envelope-note .am-envelope-from { font-family: var(--am-sans); font-size: 1rem; }
/* Opened: the letter itself. */
.am-post { position: relative; background: var(--am-paper); border: 1px solid var(--am-line); border-radius: 6px; box-shadow: var(--am-shadow), 0 4px 0 -1px var(--am-paper), 0 4px 0 0 var(--am-line); padding: clamp(22px, 5vw, 40px); display: flex; flex-direction: column; gap: 14px; }
.am-post::after { content: ""; position: absolute; left: clamp(22px, 5vw, 40px); right: clamp(22px, 5vw, 40px); top: 0; height: 3px; background: linear-gradient(90deg, var(--am-plum), var(--am-mauve), var(--am-gold)); opacity: .6; }
.am-post-from { font-family: var(--am-serif); font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.am-post-body { font-family: var(--am-serif); font-size: 1.08rem; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 62ch; }
.am-post-note { background: var(--am-surface-2); box-shadow: none; border-left: 3px solid var(--am-line-strong); border-radius: 4px var(--am-r) var(--am-r) 4px; }
.am-post-note::after { display: none; }
.am-post-note .am-post-body { font-family: var(--am-sans); font-size: .98rem; line-height: 1.6; }
.am-post-sig { font-size: .9rem; font-weight: 600; color: var(--am-muted); }
.am-post-sig::before { content: "From "; font-weight: 400; }
.am-post-fresh { animation: am-unfold .6s cubic-bezier(.2, .8, .2, 1) both; transform-origin: top center; }
@keyframes am-unfold { from { opacity: 0; transform: perspective(900px) rotateX(-14deg) translateY(-6px); } to { opacity: 1; transform: none; } }
.am-post-carried { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--am-line-strong); padding-top: 14px; }
.am-post-gift { display: flex; align-items: flex-start; gap: 10px; font-size: .94rem; }
.am-post-gift .am-icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--am-gold); }
.am-post-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding-block: 36px; }

/* ── Your notes, your sessions ──────────────────────────────────────────── */
.am-yours { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--am-line); padding-top: 14px; }
.am-yours .am-label { display: inline-flex; align-items: center; gap: 6px; }
.am-yours .am-icon { width: 15px; height: 15px; }
.am-yours-note { background: var(--am-tint); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.am-yours-note p { font-family: var(--am-serif); font-style: italic; white-space: pre-wrap; }
.am-sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.am-session { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--am-line); }
.am-session:last-child { border-bottom: 0; }
.am-session-date { font-family: var(--am-serif); font-size: .9rem; font-weight: 600; color: var(--am-accent); line-height: 1.3; }
.am-card-title .am-icon { width: 18px; height: 18px; color: var(--am-accent); }

/* ── Orientation ────────────────────────────────────────────────────────── */
/* The GM's runner: the night on the left, the room on the right. */
.am-orun { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
.am-orun > * { min-width: 0; }
.am-osteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; position: relative; }
.am-ostep { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--am-line); }
.am-ostep:last-child { border-bottom: 0; }
.am-ostep-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--am-serif); font-weight: 600; font-variant-numeric: lining-nums; background: var(--am-band); color: var(--am-on-band); }
.am-ostep-wait .am-ostep-num { background: var(--am-surface); color: var(--am-muted); box-shadow: inset 0 0 0 1.5px var(--am-line-strong); }
.am-ostep-own .am-ostep-num { background: var(--am-tint); color: var(--am-accent); outline: 1.5px dashed var(--am-mauve); outline-offset: -2px; }
.am-ostep-on .am-ostep-num { background: var(--am-ok); color: #fff; }
.am-ostep-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.am-ostep-title { font-family: var(--am-serif); font-size: 1.04rem; font-weight: 600; line-height: 1.3; }
.am-ostep-body > .am-between { flex-wrap: wrap; gap: 6px 10px; }
.am-ogrid-wrap { overflow-x: auto; margin-inline: -4px; padding-inline: 4px; }
.am-ogrid { border-collapse: collapse; width: 100%; font-size: .9rem; }
.am-ogrid th, .am-ogrid td { padding: 8px 6px; border-bottom: 1px solid var(--am-line); text-align: center; vertical-align: middle; }
.am-ogrid thead th { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--am-muted); line-height: 1.2; vertical-align: bottom; }
.am-ogrid th[scope="row"], .am-ogrid thead th:first-child { text-align: left; }
.am-ogrid tbody tr:last-child > * { border-bottom: 0; }
.am-ogrid-who { display: flex; flex-direction: column; gap: 1px; min-width: 120px; font-weight: 400; }
.am-ogrid-who strong { font-family: var(--am-serif); font-weight: 600; }
.am-ocell { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--am-sunk); color: var(--am-faint); }
.am-ocell .am-icon { width: 14px; height: 14px; }
.am-ocell-done { background: var(--am-plum); color: var(--am-on-plum); }
.am-ocell-wait { background: transparent; box-shadow: inset 0 0 0 1px var(--am-line); }
/* Rule cards to send, each a little card itself. */
.am-rulecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }
.am-rulecard { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--am-line); border-left: 3px solid var(--am-plum); background: var(--am-surface); color: var(--am-ink); cursor: pointer; font: inherit; }
.am-rulecard:hover:not(:disabled) { border-color: var(--am-plum); background: var(--am-tint); }
.am-rulecard:disabled { opacity: .55; cursor: default; }
.am-rulecard-title { font-family: var(--am-serif); font-weight: 600; line-height: 1.25; }
.am-rulecard-state { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 600; color: var(--am-muted); }
.am-rulecard-state .am-icon { width: 13px; height: 13px; }
.am-rulecard-sent { background: var(--am-ok-tint); border-left-color: var(--am-ok); }
.am-rulecard-sent .am-rulecard-state { color: var(--am-ok); }
/* The group's addition, as it is written. */
.am-world-part { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px dashed var(--am-line); }
.am-world-part:last-of-type { border-bottom: 0; }
.am-world-pen { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: var(--am-accent); background: var(--am-tint); border-radius: 999px; padding: 2px 10px; }
.am-world-pen .am-icon { width: 13px; height: 13px; }
.am-world-title { font-family: var(--am-serif); font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.am-world-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--am-line); padding-top: 12px; }
.am-world-held { background: var(--am-sunk); color: var(--am-muted); cursor: not-allowed; }
.am-session-acts { justify-content: flex-end; }
/* A rule card, in front of the room. */
.am-card-scrim { z-index: 60; }
.am-rulecard-pop { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--am-paper); border-radius: var(--am-r); box-shadow: var(--am-shadow-lg); animation: am-card-in .35s cubic-bezier(.2, .8, .2, 1) both; }
.am-rulecard-pop .am-band { border-radius: var(--am-r) var(--am-r) 0 0; }
.am-rulecard-pop-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.am-rulecard-pop-body p { font-family: var(--am-serif); font-size: 1.05rem; line-height: 1.7; }
.am-rulecard-pop-body .am-btn { align-self: flex-start; }
@keyframes am-card-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%); } }
/* The players' side: a welcome, the steps by name, a way to the night's page. */
.am-owelcome { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; }
.am-owelcome .am-emblem-lg { width: 120px; height: 120px; }
.am-onav { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.am-onav-step { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--am-line); background: var(--am-surface); color: var(--am-muted); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.am-onav-step:disabled { opacity: .5; cursor: default; }
.am-onav-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--am-sunk); font-family: var(--am-serif); font-variant-numeric: lining-nums; }
.am-onav-mark .am-icon { width: 13px; height: 13px; }
.am-onav-done .am-onav-mark { background: var(--am-ok); color: #fff; }
.am-onav-name { line-height: 1.2; }
.am-onav-locked { border-style: dashed; color: var(--am-faint); }
.am-onav-here { border-color: var(--am-plum); background: var(--am-tint); color: var(--am-accent); }
.am-onav-here .am-onav-mark { background: var(--am-plum); color: var(--am-on-plum); }
.am-owait { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 18px 0 8px; }
.am-owait-seal { width: 84px; height: 84px; opacity: .9; animation: am-float 8s ease-in-out infinite; }
.am-ostrip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--am-r); background: var(--am-band); color: var(--am-on-band) !important; text-decoration: none; margin-bottom: 4px; }
.am-ostrip-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--am-on-band) 14%, transparent); flex: none; }
.am-ostrip-text { display: flex; flex-direction: column; gap: 2px; }
.am-ostrip-text strong { font-family: var(--am-serif); font-size: 1.05rem; }
.am-ostrip-text .am-small { color: color-mix(in srgb, var(--am-on-band) 82%, transparent); }
.am-otonight { list-style: none; margin: 0; padding: 0; }
.am-otonight .am-chip .am-icon { width: 12px; height: 12px; }
.am-ocards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.am-ocard { background: var(--am-paper); border: 1px solid var(--am-line); border-top: 3px solid var(--am-plum); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--am-shadow); }
.am-ocard p { font-size: .94rem; line-height: 1.6; }

@media (max-width: 900px) {
  .am-hero-inner { grid-template-columns: 1fr; gap: 20px; }
  .am-hero-seal { order: -1; justify-self: start; }
  .am-hero-seal::before { inset: -14%; }
  .am-seal { width: 116px; animation: none; }
  .am-grounds { grid-template-columns: 1fr; }
  .am-ground { min-height: 0; }
  .am-roller { grid-template-columns: 1fr; }
  .am-letter-row { grid-template-columns: 1fr; gap: 10px; }
  .am-orun { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .am-wordmark-sub { display: none; }
  .am-nav-text { display: none; }
  /* The account link is a name; on a phone the club's own menu has it. */
  .am-nav-account { display: none; }
  /* The wordmark is the way home on a phone; the room goes to the other links. */
  .am-nav-home { display: none; }
  .am-nav-badge { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; font-size: .64rem; }
  .am-wordmark-script { font-size: 1.7rem; }
  .am-nav-link { padding: 8px 7px; }
  .am-appbar-inner { gap: 8px; }
  .am-nav { gap: 2px; }
  /* The sheet's sections become a bottom bar, like any phone app. */
  .am-has-tabbar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); }
  .am-tabs-bar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; border-radius: 0; padding: 6px 6px calc(env(safe-area-inset-bottom, 0px) + 6px); background: var(--am-surface); border-top: 1px solid var(--am-line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .06); overflow: visible; }
  .am-tabs-bar .am-tab { flex-direction: column; gap: 2px; min-height: 52px; padding: 0 4px; font-size: .7rem; }
  .am-tabs-bar .am-tab[aria-selected="true"] { background: var(--am-tint); box-shadow: none; }
  .am-tabs-bar .am-icon { width: 21px; height: 21px; }
  .am-toasts { bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); }
}
@media (max-width: 640px) {
  .am-file { grid-template-columns: auto minmax(0, 1fr); }
  .am-file-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .am-library { grid-template-columns: 1fr; }
  .am-letter-head { padding-right: 84px; }
  .am-letter-seal { width: 72px; height: 72px; top: -20px; }
  .am-char { grid-template-columns: 1fr; }
  .am-hero-card { grid-template-columns: auto minmax(0, 1fr); }
  .am-hero-card .am-ak { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; min-width: 0; }
  .am-trait-row { grid-template-columns: 76px minmax(0, 1fr) 40px; gap: 8px; }
  .am-dice-crit .am-trait-row { grid-template-columns: 76px minmax(0, 1fr); }
  .am-dice-crit .am-trait-end { grid-column: 1 / -1; justify-content: flex-end; }
  .am-die svg { width: 24px; height: 24px; }
  .am-kv { grid-template-columns: 1fr; gap: 2px 0; }
  .am-kv dd { margin-bottom: 8px; }
  .am-gm-dice { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .am-log-row { grid-template-columns: 1fr; }
  .am-seats { grid-template-columns: 1fr; }
  .am-envelope { grid-template-columns: auto minmax(0, 1fr); }
  .am-envelope > .am-btn { grid-column: 1 / -1; justify-self: start; }
  .am-envelope-note { grid-template-columns: minmax(0, 1fr) auto; }
  .am-envelope-note > .am-btn { grid-column: auto; }
  .am-envelope-seal { width: 50px; height: 50px; }
  .am-session { grid-template-columns: 78px minmax(0, 1fr); }
  .am-session > .am-btn { grid-column: 2; justify-self: start; }
  .am-seg-btn { padding: 8px 11px; }
  .am-owelcome { grid-template-columns: 1fr; gap: 14px; }
  .am-owelcome .am-emblem-lg { width: 84px; height: 84px; }
}
/* A GM with a character has five things in the bar; on the narrowest
   phones the wordmark gives up a little room for them. */
@media (max-width: 400px) {
  .am-appbar-inner { padding-inline: 12px; }
  .am-wordmark { gap: 6px; }
  .am-wordmark .am-emblem-sm { width: 32px; height: 32px; }
  .am-wordmark-script { font-size: 1.45rem; }
  .am-iconbtn { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  body.am * { transition: none !important; animation: none !important; }
}

/* ── The dice roller (aldermere.js) ─────────────────────────────────────── */
.am-roll-mark { display: block; overflow: visible; }
.am-roll-mark-face { stroke-width: 1.4; stroke-linejoin: round; }
.am-roll-mark-lines { fill: none; stroke-width: 1.1; stroke-linejoin: round; }
.am-roll-fab { position: fixed; z-index: 42; right: 24px; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px 8px 10px; border: 0; border-radius: 999px; background: var(--am-plum); color: var(--am-on-plum); box-shadow: 0 10px 26px rgba(42, 31, 45, .3); cursor: pointer; font-family: var(--am-sans); }
.am-roll-fab:hover { background: var(--am-plum-hover); }
.am-roll-fab:focus-visible, .am-tab-roll:focus-visible { outline: 3px solid var(--am-focus); outline-offset: 3px; }
.am-roll-fab .am-roll-mark { width: 36px; height: 36px; }
.am-roll-fab .am-roll-mark-face { fill: color-mix(in srgb, var(--am-on-plum) 16%, transparent); stroke: var(--am-on-plum); }
.am-roll-fab .am-roll-mark-lines { stroke: var(--am-on-plum); stroke-opacity: .6; }
.am-roll-fab .am-roll-mark-text { font-size: 1rem; font-weight: 800; letter-spacing: .02em; }
.am-rolling .am-roll-fab { visibility: hidden; }
.am-tab-roll { display: none; }

.am-roll-scrim { z-index: 54; }
.am-roll-panel { position: fixed; z-index: 55; right: 24px; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; background: var(--am-paper); color: var(--am-ink); border: 1px solid var(--am-line); border-top: 4px solid var(--am-plum); border-radius: var(--am-r); box-shadow: var(--am-shadow-lg); padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; animation: am-rise .22s ease-out both; }
.am-roll-panel .am-msg:empty { display: none; }
.am-rp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.am-rp-body { display: flex; flex-direction: column; gap: 14px; }
.am-rp-traits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.am-rp-trait { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px 8px; border-radius: 12px; border: 1.5px solid var(--am-line); background: var(--am-surface); color: var(--am-ink); cursor: pointer; font-family: var(--am-sans); }
.am-rp-trait:hover { border-color: var(--am-line-strong); }
.am-rp-trait[aria-pressed="true"] { border-color: var(--am-plum); background: var(--am-tint); box-shadow: inset 0 0 0 1px var(--am-plum); }
.am-rp-trait .am-die svg { width: 28px; height: 28px; }
.am-rp-trait-name { font-weight: 700; font-size: .92rem; }
.am-rp-trait-die { font-size: .8rem; color: var(--am-muted); font-variant-numeric: lining-nums tabular-nums; }
.am-rp-opts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.am-rp-go { width: 100%; justify-content: center; min-height: 50px; font-size: 1rem; }
.am-rp-go-sum { font-weight: 500; opacity: .85; margin-left: 4px; font-variant-numeric: lining-nums tabular-nums; }
.am-rp-result { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 18px 14px; border-radius: var(--am-r); background: var(--am-sunk); border: 1px solid var(--am-line); }
.am-rp-pass { background: var(--am-ok-tint); border-color: color-mix(in srgb, var(--am-ok) 40%, var(--am-line)); }
.am-rp-fail { background: var(--am-bad-tint); border-color: color-mix(in srgb, var(--am-bad) 32%, var(--am-line)); }
.am-rp-total { font-family: var(--am-serif); font-size: 3.6rem; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
/* The tray: each throw as its die. They tumble and land, then the total shows. */
.am-tray { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 4px 8px; margin: 4px 0 2px; }
.am-tok-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 64px; }
.am-tok { position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
.am-tok svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.am-tok svg path { fill: var(--die); stroke: color-mix(in srgb, var(--die) 62%, #1a1020); stroke-width: 1.1; stroke-linejoin: round; }
.am-tok svg .am-die-inner { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: .9; }
.am-tok-n { position: relative; font-family: var(--am-serif); font-size: 1.5rem; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); font-variant-numeric: lining-nums tabular-nums; }
.am-tok.am-d6 .am-tok-n, .am-tok.am-d8 .am-tok-n, .am-tok.am-d10 .am-tok-n { color: #2a1f2d; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.am-tok.am-d4 .am-tok-n { margin-top: 20px; font-size: 1.3rem; }
.am-tok.am-d10 .am-tok-n { margin-top: 4px; }
.am-tok.am-d12 .am-tok-n { margin-top: 2px; }
.am-tok-max::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--am-gold), 0 0 22px color-mix(in srgb, var(--am-gold) 55%, transparent); }
.am-tok-keymax::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px dashed var(--am-gold); }
.am-tok-key { position: absolute; z-index: 1; right: -12px; top: -8px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px 2px 5px; border-radius: 999px; background: var(--am-gold); color: #2a1f2d; font-size: .74rem; font-weight: 800; box-shadow: 0 0 0 2px var(--am-paper); }
.am-tok-key .am-icon { width: 12px; height: 12px; }
.am-tok-label { font-size: .72rem; font-weight: 600; color: var(--am-muted); white-space: nowrap; }
.am-tray-plus { align-self: flex-start; margin-top: 20px; color: var(--am-faint); font-size: 1.2rem; font-weight: 700; }
.am-tray-add { display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 14px; min-width: 44px; }
.am-tray-add strong { font-family: var(--am-serif); font-size: 1.5rem; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
.am-rp-keys { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--am-r); border: 1px solid var(--am-line); background: var(--am-surface); }
.am-rp-keys .am-label { display: inline-flex; align-items: center; gap: 6px; }
.am-rp-keys .am-label .am-icon { width: 15px; height: 15px; }
.am-rp-rolling .am-rp-total, .am-rp-rolling .am-rp-verdict, .am-rp-rolling .am-rp-after { visibility: hidden; }
.am-rp-in { animation: am-rp-in .28s cubic-bezier(.2, .8, .2, 1) both; }
.am-rp-reveal .am-rp-total { animation: am-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
.am-rp-reveal .am-rp-verdict { animation: am-rise .3s ease-out both; }
.am-tok-spin svg { animation: am-tok-spin .32s linear infinite; }
.am-tok-spin .am-tok-n { opacity: .75; }
.am-tok-spin::before { display: none; }
.am-tok-land { animation: am-pop .42s cubic-bezier(.2, 1.6, .4, 1); }
.am-tok-bump .am-tok-key { animation: am-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
.am-tok-bump.am-tok-keymax::before { animation: am-rise .35s ease-out; }
@keyframes am-tok-spin { from { transform: rotate(0deg) scale(.92); } to { transform: rotate(360deg) scale(.92); } }
@keyframes am-rp-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.am-rp-verdict { font-size: .95rem; line-height: 1.45; }
.am-rp-max { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--am-r); border: 1px solid var(--am-line); border-left: 3px solid var(--am-d12); background: var(--am-surface); }
.am-rp-max > .am-die svg { width: 30px; height: 30px; }
.am-rp-ask { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .92rem; }

/* A roll's throws, here and in the GM's log. Round faces are the Magic die;
   a gold ring is a maximum. */
.am-chain { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.am-face { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; background: var(--die); color: #fff; font-weight: 800; font-size: .95rem; font-variant-numeric: lining-nums tabular-nums; }
.am-face.am-d6, .am-face.am-d8, .am-face.am-d10 { color: #2a1f2d; }
.am-face-magic { border-radius: 50%; }
.am-face-max { box-shadow: 0 0 0 2px var(--am-paper), 0 0 0 4px var(--am-gold); }
.am-face-add { font-weight: 700; color: var(--am-muted); padding: 0 2px; font-variant-numeric: lining-nums tabular-nums; }
.am-face-key { color: var(--am-gold); }
.am-face { position: relative; }
.am-face-k { position: absolute; top: -8px; right: -9px; padding: 0 4px; border-radius: 999px; background: var(--am-gold); color: #2a1f2d; font-size: .62rem; font-weight: 800; line-height: 1.5; box-shadow: 0 0 0 2px var(--am-paper); }
.am-chain-plus { color: var(--am-faint); font-weight: 600; }

@media (max-width: 720px) {
  .am-roll-fab { right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); padding: 7px 18px 7px 9px; }
  body.am-has-roller:not(.am-has-tabbar) { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); }
  .am-has-roller:not(.am-has-tabbar) .am-toasts { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
  /* On the sheet the roller is the middle of the bar, a d20 standing above it. */
  .am-has-roller.am-has-tabbar .am-roll-fab { display: none; }
  .am-has-roller .am-tabs-bar { display: grid; grid-template-columns: 3fr 3fr 62px 2fr 2fr 2fr; gap: 2px; }
  .am-has-roller .am-tabs-bar .am-tab { min-width: 0; white-space: normal; line-height: 1.15; text-align: center; padding: 0 2px; }
  .am-has-roller .am-tabs-bar .am-tab:nth-child(3) { grid-column: 4; }
  .am-has-roller .am-tab-roll { display: flex; position: fixed; z-index: 41; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); transform: translateX(-50%); flex-direction: column; align-items: center; gap: 1px; width: 66px; padding: 0; border: 0; background: none; color: var(--am-ink); cursor: pointer; font-family: var(--am-sans); font-size: .7rem; font-weight: 700; }
  .am-tab-roll .am-roll-mark { width: 54px; height: 54px; filter: drop-shadow(0 4px 8px rgba(42, 31, 45, .3)); }
  .am-tab-roll .am-roll-mark-face { fill: var(--am-plum); stroke: var(--am-plum); }
  .am-tab-roll .am-roll-mark-lines { stroke: var(--am-on-plum); stroke-opacity: .55; }
  .am-roll-panel { left: 0; right: 0; bottom: 0; width: auto; max-height: 92vh; border-radius: 18px 18px 0 0; border-left: 0; border-right: 0; border-bottom: 0; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }
}
@media (max-width: 380px) {
  .am-rp-traits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── The GM's log of rolls: the console's card and the pop-out ──────────── */
.am-rolls-box { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; margin-top: 4px; }
.am-rolls-full { max-height: none; overflow: visible; }
.am-rolls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.am-roll-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--am-line); }
.am-roll-row:last-child { border-bottom: 0; }
.am-roll-new { animation: am-roll-new 2.4s ease-out; }
@keyframes am-roll-new { from { background: var(--am-tint); } to { background: transparent; } }
.am-roll-time { font-size: .78rem; color: var(--am-faint); font-variant-numeric: lining-nums tabular-nums; }
.am-roll-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.am-roll-who strong { font-family: var(--am-serif); font-weight: 600; }
.am-roll-sum { display: inline-flex; align-items: center; gap: 8px; justify-self: end; }
.am-roll-sum .am-face { min-width: 26px; height: 26px; font-size: .85rem; }
.am-roll-eq { color: var(--am-faint); font-weight: 600; }
.am-roll-num { font-family: var(--am-serif); font-size: 1.6rem; font-weight: 600; line-height: 1; min-width: 2ch; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.am-roll-foot { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.am-roll-dc { font-size: .8rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.am-roll-pass { background: var(--am-ok-tint); color: var(--am-ok); }
.am-roll-fail { background: var(--am-bad-tint); color: var(--am-bad); }
.am-chip-boom { background: color-mix(in srgb, var(--am-d12) 16%, transparent); color: var(--am-d12); }
.am-chip .am-icon { width: 12px; height: 12px; }
.am-popout .am-main { padding-top: 18px; }
/* Where everyone is: a name opens the student's sheet. */
.am-ogrid-name { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; padding: 2px 0; border: 0; background: none; color: var(--am-link); cursor: pointer; text-align: left; font: inherit; }
.am-ogrid-name strong { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--am-link) 35%, transparent); text-underline-offset: 3px; }
.am-ogrid-name:hover strong { text-decoration-color: currentColor; }
.am-linkbtn { border: 0; background: none; padding: 0; color: var(--am-link); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
  .am-roll-row { grid-template-columns: minmax(0, 1fr) auto; }
  .am-roll-time { grid-column: 1 / -1; }
  .am-roll-foot { grid-column: 1 / -1; }
}