@font-face {
  font-family: 'Dumbledor';
  src: url(../art/fonts/dumbledor.woff2) format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'MedievalSharp';
  src: url(fonts/medievalsharp-latin.woff2) format('woff2');
  font-display: swap;
}

:root {
  --bg: #2b2d33;
  --panel: #202227;
  --seat: #1c1d22;
  --line: #3b3e46;
  --text: #ebe8e1;
  --muted: #9a9ca3;
  --gold: #fbb53b;
  --good: #3d9be9;
  --evil: #d8363a;
  --radius: 0.75rem;
  --title: 'MedievalSharp', Georgia, 'Times New Roman', serif;
  --info-w: calc(clamp(12.5rem, 24vw, 18rem) + 2.7rem);   /* width of the info column in landscape (the extra is the game notes button beside the header) */
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

#root { height: 100%; }

.boot { margin: 2rem 1rem; text-align: center; color: var(--muted); }
.boot-error { color: var(--evil); }

.title { font-family: var(--title); font-weight: 400; color: var(--gold); margin: 0; }

@property --panel-w { syntax: '<length>'; inherits: true; initial-value: 0px; }   /* animatable width of the landscape info column */

/* ── Layout: info panel + board. Portrait stacks them, landscape puts the panel on the right. ── */
.app {
  height: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.main { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }   /* the first screen: info card and board (and the buttons) */

@media (orientation: landscape) {
  .app { --panel-w: var(--info-w); transition: --panel-w 0.35s ease; }
  .main {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) var(--panel-w);   /* info column on the right */
  }
  .app.panel-hidden { --panel-w: 0px; }   /* the board takes the whole width and the table moves to the middle of the screen */
  .main > .info { grid-column: 2; grid-row: 1; }
  .main > .board { grid-column: 1; grid-row: 1; }
}

.info {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.5rem;
}

@media (orientation: landscape) {
  .info { flex-direction: column; justify-content: flex-start; }
}

.info-card {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-family: var(--title);
  color: var(--gold);
}

@media (orientation: landscape) {
  .info-card { flex: 0 0 auto; }
}

.info-row { display: flex; justify-content: space-between; gap: 1rem; }
.info-label { color: var(--muted); }
.info-value { font-size: 1.25em; }

/* ── Buttons ── */
.btn {
  font: inherit;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--gold);
  color: #1d1a10;
  font-weight: 600;
  touch-action: manipulation;
}
.btn:active { filter: brightness(0.9); }
.btn:disabled { opacity: 0.4; }
.btn-ghost { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.btn-small { min-height: 2rem; padding: 0.25rem 0.6rem; font-size: 0.85rem; }

/* ── Board ── */
.board { min-width: 0; min-height: 0; container-type: size; display: grid; place-items: center; padding: 0.5rem; }

.stage {
  --r: 33cqmin;                                                     /* ring radius, leaves room for names */
  --size: min(17cqmin, calc(var(--r) * 4.4 / var(--n)));            /* seat width, shrinks with player count */
  position: relative;
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
}

.empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  padding: 1rem; text-align: center; color: var(--muted);
}
.empty p { margin: 0; max-width: 24rem; }
.empty .title { font-size: 1.8rem; }

.seat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size);
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--i) / var(--n) * 360deg))
    translateY(calc(var(--r) * -1))
    rotate(calc(var(--i) / var(--n) * -360deg));
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  touch-action: none;                  /* the board never scrolls, so a held finger must not start a pan */
  -webkit-touch-callout: none;
  outline: none;
}
.seat:focus-visible .token { outline: 3px solid var(--gold); }
.seat.dragging { opacity: 0.35; }
.seat.drop .token { outline: 3px solid var(--gold); outline-offset: 2px; }

.drag-ghost {
  position: fixed; z-index: 30; pointer-events: none;
  transform: translate(-50%, calc(var(--ghost) / -2));   /* the finger holds the middle of the token */
  display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(0 8px 10px rgb(0 0 0 / 0.6));
}

.seat-name {
  display: inline-flex; align-items: center; gap: 0.25em;
  margin-top: 0.2rem;
  max-width: 150%;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: var(--panel);
  color: var(--gold);
  font-size: clamp(0.65rem, 2.6cqmin, 1rem);
  white-space: nowrap;
}
.seat-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.seat-name .icon { width: 1.1em; height: 1.1em; flex: none; }

/* ── Tokens: official parchment background (enlarged a little to fill the circle), icon on top, name along the bottom ── */
.token { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--seat); container-type: inline-size; border: 2px solid #000; }
.token > img { position: absolute; -webkit-user-drag: none; pointer-events: none; }
.token-bg { left: -6.5%; top: -6.5%; width: 113%; height: 113%; }
.token-icon { inset: 0; width: 100%; height: 100%; transform: translateY(-10%); }   /* lifted to leave room for the name */
.token-letter { position: absolute; inset: 0; display: grid; place-items: center; transform: translateY(-10%); font: 600 46cqw/1 var(--title); }
.token-name, .reminder-name { position: absolute; inset: 0; width: 100%; height: 100%; font-size: 20px; text-transform: uppercase; pointer-events: none; overflow: visible; }
.token-name text, .reminder-name text { font-family: Dumbledor, serif; fill: #000; stroke: rgb(255 255 255 / 0.5); stroke-width: 2px; paint-order: stroke; }
.reminder-name { text-transform: none; }   /* reminders use plain, readable type, not the role-token font */
.reminder-name text { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 700; fill: #fff; stroke: rgb(0 0 0 / 0.8); stroke-width: 2.5px; }

/* ── Sheet (menus) ── */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 10;
  background: rgb(0 0 0 / 0.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: min(100%, 28rem);
  max-height: 100%;
  overflow: auto;
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--bg);
  border-radius: 1rem 1rem 0 0;
}
/* Portrait only: the bar says the sheet can be dragged down to close (js/swipe.js) */
.sheet-handle { align-self: center; width: 3rem; height: 0.3rem; border-radius: 0.2rem; background: var(--line); }
@media (orientation: landscape) {
  .sheet-handle { display: none; }
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: 1rem; }
}
.note { margin: 0; color: var(--muted); font-size: 0.9rem; }
.note-accent { color: var(--gold); }

/* ── Dev bar (?demo) ── */
.app.is-setup { display: block; }
.app.has-devbar { padding-bottom: calc(env(safe-area-inset-bottom) + 3rem); }
.devbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center;
  padding: 0.4rem calc(0.4rem + env(safe-area-inset-right)) calc(0.4rem + env(safe-area-inset-bottom)) calc(0.4rem + env(safe-area-inset-left));
  background: rgb(0 0 0 / 0.5);
}

/* ── Setup ── */
.setup { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1rem; }
.setup-inner { max-width: 40rem; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; padding-bottom: 2rem; }
.setup .title { font-size: 1.8rem; text-align: center; }
.title.brand { display: flex; align-items: center; justify-content: center; gap: 0.45rem; }
.title.brand .icon { width: 0.9em; height: 0.9em; }

.start-section { display: flex; flex-direction: column; gap: 0.4rem; }
.start-section > .script-team { margin: 0.25rem 0 0; }
.start-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.5rem; }
.start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.start-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  min-height: 5.6rem; padding: 0.5rem 0.3rem; text-align: center; line-height: 1.15;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text);
  font: inherit; font-size: 0.85rem; touch-action: manipulation; cursor: pointer;
}
.start-tile:active { background: var(--line); }
.start-tile.selected { border-color: var(--gold); color: var(--gold); background: rgb(251 181 59 / 0.12); }
.start-tile .icon { width: 1.5rem; height: 1.5rem; color: var(--gold); margin-bottom: 0.15rem; }
.start-tile-label { font-weight: 600; }
.start-tile-sub { color: var(--muted); }
.start-tile.selected .start-tile-sub { color: inherit; }
.start-tile.official { min-height: 6.5rem; padding: 0.4rem; }
.start-tile.official img { display: block; width: 100%; height: 5.7rem; object-fit: contain; pointer-events: none; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.card-title { margin: 0; font-family: var(--title); font-weight: 400; color: var(--gold); font-size: 1.15rem; }
.note-warn { color: #e0b070; }
.note-error { color: var(--evil); }
.note b { font-weight: 600; }

.input {
  font: inherit; font-size: 16px; /* 16px stops iOS zooming into the field */
  width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem;
  background: var(--seat); color: var(--text);
  border: 1px solid var(--line); border-radius: 0.5rem;
  -webkit-user-select: text; user-select: text;
}
.input:focus { outline: 2px solid var(--gold); outline-offset: 0; }
textarea.input { resize: vertical; font-family: ui-monospace, Menlo, monospace; font-size: 14px; }

.stepper { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.stepper-value { width: 5rem; text-align: center; font-size: 1.4rem; font-family: var(--title); color: var(--gold); -moz-appearance: textfield; }
.stepper-value::-webkit-outer-spin-button, .stepper-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn-round { width: 3rem; padding: 0; font-size: 1.6rem; line-height: 1; }

.names { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem; }
.row { display: flex; gap: 0.5rem; }
.grow { flex: 1; }
.btn-link { background: none; color: var(--muted); text-decoration: underline; min-height: 2rem; font-weight: 400; }
.btn-danger { background: var(--evil); color: #fff; }

/* ── Script panel (landscape, in the info column) / script sheet (portrait) ── */
.info { min-height: 0; }
.script-panel { display: none; }
@media (orientation: landscape) {
  .script-panel {
    display: block; flex: 1; min-height: 0; overflow-y: auto;
    padding: 0.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  }
}
.script-filter { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0.2rem; }
.filter-chip { min-height: 2rem; padding: 0.2rem 0.65rem; border: 1px solid var(--line); border-radius: 1rem; background: none; color: var(--muted); font: inherit; font-size: 0.85rem; touch-action: manipulation; }
.filter-chip.selected { border-color: var(--gold); background: rgb(251 181 59 / 0.16); color: var(--gold); }
.script-tabs { display: flex; margin: 0.5rem 0 0.2rem; border-bottom: 1px solid var(--line); }
.script-tab { flex: 1; min-height: 2.3rem; padding: 0 0.2rem; white-space: nowrap; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--muted); font: inherit; font-size: 0.9rem; touch-action: manipulation; }
@media (orientation: landscape) { .script-tab { font-size: 0.8rem; } }
.script-tab.selected { border-bottom-color: var(--gold); color: var(--gold); }
:is(.script-panel, .script-below, .all-roles, .script-preview) .script-role { align-items: center; padding-block: 0; }
:is(.script-panel, .script-below, .all-roles, .script-preview) .script-role-token { flex-basis: 4rem; width: 4rem; }
:is(.script-panel, .script-below, .all-roles, .script-preview) .script-jinx-token { flex-basis: 2.2rem; width: 2.2rem; }
:is(.script-panel, .script-below, .all-roles, .script-preview) .script-jinx-big { flex-basis: 3.2rem; width: 3.2rem; }
/* the script menu shows just the icons, no token disc */
:is(.script-panel, .script-below, .all-roles, .script-preview) .token { border: 0; border-radius: 0; background: none; overflow: visible; }
:is(.script-panel, .script-below, .all-roles, .script-preview) .token-bg { display: none; }
:is(.script-panel, .script-below, .all-roles, .script-preview) .token-icon, :is(.script-panel, .script-below, .all-roles, .script-preview) .token-letter { transform: none; }
.night-text { margin: 0 0 0.3rem 4.85rem; padding: 0.4rem 0.6rem; border-left: 2px solid var(--gold); background: var(--panel); border-radius: 0 0.4rem 0.4rem 0; font-size: 0.9rem; color: var(--text); }
.night-fixed { margin: 0.5rem 0 0.1rem; padding: 0.2rem 0.25rem; border-top: 1px solid var(--line); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.script-name { font-size: 1.25rem; line-height: 1.2; }
.script-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; }
.script-author { color: var(--muted); font-size: 0.9rem; }
.script-team { margin: 0.75rem 0 0.25rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.script-role {
  display: flex; align-items: flex-start; gap: 0.6rem; width: 100%;
  padding: 0.2rem 0.25rem; border: 0; border-radius: 0.5rem; background: none;
  color: var(--text); font: inherit; text-align: left; touch-action: manipulation;
}
.script-role:active { background: var(--line); }
.script-role-token { flex: 0 0 2.4rem; width: 2.4rem; }
.script-role-name { min-width: 0; overflow-wrap: anywhere; }
.script-role-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.script-role-ability { font-size: 0.85rem; line-height: 1.3; color: var(--muted); }
.script-jinxed { flex: none; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; align-self: center; gap: 0.2rem; margin-left: auto; }   /* stuck to the right of the row */
.script-jinx-bar { color: var(--muted); margin-right: 0.1rem; }
.script-jinx-pair { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.25rem; border-bottom: 1px solid var(--line); }
.script-jinx-tokens { flex: none; display: flex; gap: 0.2rem; }
.script-jinx-big { flex: 0 0 2.4rem; width: 2.4rem; }
.script-jinx-rule { min-width: 0; font-size: 0.85rem; line-height: 1.3; color: var(--muted); }
.script-jinx-rule b { display: block; color: var(--text); font-weight: 600; }
.script-jinx-token { flex: 0 0 1.8rem; width: 1.8rem; }

/* ── Role info ── */
.detail-backdrop { z-index: 20; }
.detail-backdrop.over-search { z-index: 40; }   /* a character opened from a script previewed on the search screen */
.detail-head { display: flex; align-items: center; gap: 0.9rem; }
.detail-token { flex: 0 0 5rem; width: 5rem; }
.badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.badge { padding: 0.1rem 0.5rem; border: 1px solid var(--line); border-radius: 1rem; font-size: 0.8rem; color: var(--muted); }
.badge-good { color: var(--good); border-color: var(--good); }
.badge-evil { color: var(--evil); border-color: var(--evil); }
.detail-ability { margin: 0; font-size: 1.05rem; }
.jinx { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; border-left: 3px solid var(--line); font-size: 0.9rem; color: var(--muted); }
.jinx-token { flex: 0 0 2.6rem; width: 2.6rem; }
.jinx-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.jinx b { color: var(--text); font-weight: 600; }
.jinx-active { border-left-color: var(--gold); }
.jinx-active b { color: var(--gold); }
.detail-name { display: flex; align-items: center; gap: 0.5rem; }
.detail-link { flex: none; display: inline-flex; align-items: center; gap: 0.35rem; height: 2rem; padding: 0 0.7rem; border: 1px solid var(--line); border-radius: 1rem; color: var(--gold); font-size: 0.9rem; text-decoration: none; touch-action: manipulation; }
.detail-link .icon { width: 1.1rem; height: 1.1rem; }

/* ── Seat menu ── */
.seat-menu-head { display: flex; align-items: center; justify-content: center; gap: 0.8rem; }
.seat-menu-token { position: relative; flex: none; width: 4.5rem; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 3px #5b5f69; }   /* outline and glow: the .ring-* rules next to .seat-token */
.seat-menu-token.dead > .token { filter: brightness(0.5) saturate(0.7); }   /* like a dead seat on the board */
.seat-menu-link { padding: 0; border: 0; background: none; font: inherit; color: inherit; touch-action: manipulation; }
.seat-menu-notes { padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 0.6rem; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9rem; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }   /* read-only preview, long notes are cut */
.seat-menu-name { display: flex; align-items: center; gap: 0.4rem; }
.seat-menu-edit { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; color: var(--muted); }
.seat-menu-edit:active { background: var(--line); }
.seat-menu-who { min-width: 0; }
.seat-menu-title { text-align: left; font-size: 1.4rem; overflow-wrap: anywhere; }
.seat-menu-role { text-align: left; margin: 0; }
.seat-menu-reminders { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.seat-menu-reminder { width: 4.5rem; position: relative; }
.reminder-remove { position: absolute; top: -0.2rem; right: -0.2rem; width: 1.6rem; height: 1.6rem; padding: 0.25rem; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.reminder-remove .icon { width: 100%; height: 100%; }
.reminder-add { aspect-ratio: 1; padding: 0; border-radius: 50%; border: 2px dashed var(--muted); background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.reminder-add .icon { width: 40%; height: 40%; }
.seat-actions { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
.seat-info-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.seat-info-row .btn { min-width: 0; padding-inline: 0.4rem; }
.btn-action { text-align: center; }
.seat-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.seat-thumbs .btn { display: grid; place-items: center; }
.seat-thumbs .icon { width: 1.6rem; height: 1.6rem; }
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.25rem; font-size: 1.05rem; }
.switch-row input { width: 1.4rem; height: 1.4rem; accent-color: var(--gold); }
.stepper-text { display: inline-grid; place-items: center; min-width: 4rem; font-size: 1.4rem; font-family: var(--title); color: var(--gold); }

/* ── Rotate seats preview ── */
.rotate-stage {
  --r: 37cqmin;
  --size: min(15cqmin, calc(var(--r) * 4.4 / var(--n)));
  position: relative; width: min(100%, 22rem, 55vh); aspect-ratio: 1; margin: 0 auto;
  container-type: size;
}
.rotate-top {   /* marks the top seat */
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  border-left: 0.5rem solid transparent; border-right: 0.5rem solid transparent; border-top: 0.7rem solid var(--gold);
}
.rotate-ring {
  position: absolute; inset: 0;
  transform: rotate(calc(var(--shift) / var(--n) * 360deg));
  transition: transform 0.35s ease;
}
.rotate-seat {
  position: absolute; left: 50%; top: 50%; width: var(--size);
  /* the ring turns by shift; each seat turns back by the same amount so tokens and names stay upright */
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--i) / var(--n) * 360deg))
    translateY(calc(var(--r) * -1))
    rotate(calc((var(--i) + var(--shift)) / var(--n) * -360deg));
  transition: transform 0.35s ease;
  display: flex; flex-direction: column; align-items: center;
}
.rotate-name {
  margin-top: 0.1rem; max-width: 150%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: clamp(0.55rem, 3.6cqmin, 0.8rem); line-height: 1.1; color: var(--gold);
}
.rotate-readout { text-align: center; }
.rotate-slider { width: 100%; height: 2.5rem; accent-color: var(--gold); margin: 0; }
.rotate-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.8rem; margin-top: -0.4rem; }
@media (prefers-reduced-motion: reduce) { .rotate-ring, .rotate-seat { transition: none; } }

/* ── Seat: outline, glow, dead state, reminders, notes ── */
.seat-token { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; container-type: inline-size; box-shadow: 0 0 0 3px #5b5f69; }
.seat-token.ring-good,
.seat-menu-token.ring-good { box-shadow: 0 0 0 3px var(--good); }
.seat-token.ring-evil,
.seat-menu-token.ring-evil { box-shadow: 0 0 0 3px var(--evil); }
.seat-token.ring-good.glow { box-shadow: 0 0 0 3px var(--good), 0 0 10px 4px rgb(61 155 233 / 0.95), 0 0 26px 10px rgb(61 155 233 / 0.65), 0 0 48px 18px rgb(61 155 233 / 0.35); }
.seat-token.ring-evil.glow { box-shadow: 0 0 0 3px var(--evil), 0 0 10px 4px rgb(216 54 58 / 0.95), 0 0 26px 10px rgb(216 54 58 / 0.65), 0 0 48px 18px rgb(216 54 58 / 0.35); }

.seat-menu-token.ring-good.glow { box-shadow: 0 0 0 3px var(--good), 0 0 8px 3px rgb(61 155 233 / 0.95), 0 0 16px 6px rgb(61 155 233 / 0.55); }   /* smaller than on the board: the sheet clips what spills out */
.seat-menu-token.ring-evil.glow { box-shadow: 0 0 0 3px var(--evil), 0 0 8px 3px rgb(216 54 58 / 0.95), 0 0 16px 6px rgb(216 54 58 / 0.55); }
.seat.dead .seat-token > .token { filter: brightness(0.5) saturate(0.7); }
.shroud { position: absolute; left: 50%; top: 0; height: 43.2%; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.8)); }   /* hangs from the top of the token; 80% of the official size */
.vote-marker { position: absolute; left: 50%; top: 0; width: 24%; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.8)); }   /* purple death token on the shroud: the dead vote is spent */

/* reminders: centred on the top, up to three quarters round the seat, partly covering the token */
.fan-item {
  position: absolute; left: 50%; top: 50%; width: 42cqw; z-index: 2;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-54cqw) rotate(calc(var(--a) * -1));
}
.reminder { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.7)); }
.reminder > img { position: absolute; -webkit-user-drag: none; pointer-events: none; }
.reminder .reminder-name { top: -2%; }
.reminder-bg { inset: 0; width: 100%; height: 100%; }
.reminder-icon { left: 50%; top: 6%; width: 74%; transform: translateX(-50%); }
.reminder-mask { top: 16%; width: 66%; }

/* note marker: a little inward of the seat, on the line towards the middle of the circle */
.note-marker {
  --m: 100cqw;   /* far enough in that the reminders on the seat's sides cannot cover it */
  position: absolute; left: 50%; top: 50%; z-index: 3; width: 32cqw; aspect-ratio: 1; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--gold); color: #1d1a10; box-shadow: 0 1px 4px rgb(0 0 0 / 0.6);
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--i) / var(--n) * 360deg + 180deg))
    translateY(calc(var(--m) * -1))
    rotate(calc(var(--i) / var(--n) * -360deg - 180deg));
}
.note-marker .icon { width: 62%; height: 62%; }

.icon { width: 1.2em; height: 1.2em; }

/* ── Panels ── */
.sheet-tall { height: min(100%, 46rem); overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 0.75rem; }
.panel-title { min-width: 0; }
.panel-title .title { font-size: 1.3rem; line-height: 1.1; }
.panel-title .note { margin: 0; }
.filters { display: flex; flex-direction: column; gap: 0.4rem; }
.picker-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -0.25rem; padding: 0 0.25rem; -webkit-overflow-scrolling: touch; }
.picker-empty { text-align: center; padding: 1.5rem 0; }
.pick-clear { width: 100%; margin: 0.25rem 0; padding: 0.6rem; border: 1px dashed var(--line); border-radius: 0.5rem; background: none; color: var(--muted); font: inherit; }

.pick-row { display: flex; align-items: stretch; gap: 0.25rem; border-radius: 0.5rem; }
.pick-row.selected { background: rgb(251 181 59 / 0.12); outline: 1px solid var(--gold); }
.pick-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.7rem; padding: 0.3rem 0.35rem; border: 0; background: none; color: var(--text); font: inherit; text-align: left; touch-action: manipulation; }
.pick-main:active { background: var(--line); }
.pick-token { flex: 0 0 2.8rem; width: 2.8rem; }
.pick-token-small { flex-basis: 1.8rem; width: 1.8rem; }
.pick-text { min-width: 0; display: flex; flex-direction: column; }
.pick-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.45rem; font-weight: 600; }   /* the tag shares the name's baseline */
.pick-off { position: relative; top: -0.07rem; font-weight: 400; font-size: 0.75rem; color: var(--gold); white-space: nowrap; }   /* baseline-aligned, nudged up halfway to centred */
.pick-off .icon { width: 1.05em; height: 1.05em; margin-right: 0.25em; vertical-align: -0.22em; }
.pick-ability { color: var(--muted); font-size: 0.82rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick-check { flex: none; width: 1.4rem; height: 1.4rem; color: var(--gold); margin-left: auto; }
.pick-info { flex: 0 0 2.75rem; border: 0; background: none; color: var(--muted); display: grid; place-items: center; }
.pick-info .icon { width: 1.4rem; height: 1.4rem; }

.pick-group { margin: 0.3rem 0 0.6rem; }
.pick-group-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }   /* three to a row */
.chip { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; padding: 0.3rem 0.2rem; border: 2px solid transparent; border-radius: 0.6rem; background: none; color: var(--muted); font: inherit; font-size: 0.72rem; line-height: 1.1; text-align: center; touch-action: manipulation; }
.chip .reminder { width: min(100%, 6rem); }
.chip.selected { border-color: var(--gold); background: rgb(251 181 59 / 0.16); color: var(--text); }
.chip-label { overflow-wrap: anywhere; }
.notes-input { min-height: 8rem; font-family: inherit; font-size: 16px; }

/* ── Switch + thumbs ── */
input.switch { appearance: none; -webkit-appearance: none; flex: none; width: 3rem; height: 1.7rem; border-radius: 1rem; background: var(--line); position: relative; transition: background 0.15s; margin: 0; }
input.switch::after { content: ''; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #d4d5d9; transition: transform 0.15s; }
input.switch:checked { background: var(--gold); }
input.switch:checked::after { transform: translateX(1.3rem); background: #fff; }
.btn-on-good, .btn-on-evil { background: var(--gold); color: #1d1a10; border-color: var(--gold); }   /* chosen thumb: the app's gold, not the team colour */

/* Landscape, in a game: dialogs centre on the circle (the board), not on the whole screen, because the info column takes the right-hand side. */
@media (orientation: landscape) {
  .app:not(.is-setup) .sheet-backdrop {
    padding-left: env(safe-area-inset-left);
    padding-right: calc(env(safe-area-inset-right) + var(--panel-w));
  }
}

/* ── Text field with a clear button ── */
.field { position: relative; }
.field .input { padding-right: 2.75rem; }
.field-clear {
  position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
  width: 2.2rem; height: 2.2rem; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: var(--muted); touch-action: manipulation;
}
.field-clear:active { background: var(--line); }
.field-clear .icon { width: 1.25rem; height: 1.25rem; }

/* off-script tag under a reminder in the picker */
.chip-off { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; line-height: 1; color: var(--gold); white-space: nowrap; }
.chip-off .icon { width: 0.95rem; height: 0.95rem; }

/* reminders live in their own layer above every seat and name plate */
.fan-layer { position: absolute; inset: 0; pointer-events: none; }
.seat-fan {
  position: absolute; left: 50%; top: 50%; width: var(--size);
  transform: translate(-50%, -50%) rotate(calc(var(--i) / var(--n) * 360deg)) translateY(calc(var(--r) * -1)) rotate(calc(var(--i) / var(--n) * -360deg));
}
.seat-fan-box { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; }

/* ── Hiding the landscape info column ── */
.info-top { display: flex; gap: 0.5rem; align-items: stretch; flex: 1; min-width: 0; }
.info-top .info-card { flex: 1; min-width: 0; }
.panel-toggle, .panel-fab {
  display: none; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 0.6rem;
  background: var(--panel); color: var(--gold); touch-action: manipulation;
}
.panel-toggle .icon, .panel-fab .icon { width: 1.4rem; height: 1.4rem; }
@media (orientation: landscape) {
  .info-top { flex: 0 0 auto; }   /* in the column it must not grow to fill the height */
  .panel-toggle { display: grid; flex: 0 0 2.4rem; }
  .info { overflow: hidden; min-width: 0; transition: opacity 0.25s ease; }
  .app.panel-hidden .info { opacity: 0; pointer-events: none; }
  .app.panel-hidden .panel-fab {
    display: grid; position: fixed; z-index: 4; width: 2.6rem; height: 2.6rem;
    top: calc(0.5rem + env(safe-area-inset-top)); right: calc(0.5rem + env(safe-area-inset-right));
    animation: fab-in 0.3s ease 0.2s both;
  }
}
@keyframes fab-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .app { transition: none !important; }
  .info { transition: none !important; }
  .app.panel-hidden .panel-fab { animation: none; }
}

/* Landscape with the side panel hidden: players and day move to the middle of the table. */
.table-center { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.table-center .info-card { min-width: 9rem; }
@media (orientation: landscape) {
  .app.panel-hidden .table-center { display: flex; align-items: flex-start; gap: 0.5rem; animation: fab-in 0.35s ease 0.25s both; }
}
@media (prefers-reduced-motion: reduce) { .app.panel-hidden .table-center { animation: none; } }

/* clear button in the corner of a multi-line field */
.field-area .input { padding-right: 2.9rem; }
.field-area .field-clear { top: 0.4rem; transform: none; }

/* ── Header card ── */
.info-card { display: flex; flex-direction: column; gap: 0.2rem; }
.hdr-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.hdr-main { font-size: 1.5rem; line-height: 1.1; }
.hdr-extra { font-size: 0.95rem; color: var(--muted); }
.hdr-base { display: inline-flex; gap: 0.5rem; font-size: 1.35rem; }
.hdr-base b { font-weight: 400; }
.c-good { color: var(--good); }
.c-evil { color: var(--evil); }
.c-none { color: var(--muted); }
.hdr-votes { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 1.2rem; }
.hdr-votes .icon { width: 1.3rem; height: 1.3rem; }
.day-row { display: flex; align-items: center; justify-content: space-between; margin-top: 0.15rem; padding-top: 0.3rem; border-top: 1px solid var(--line); }
.day-controls { display: inline-flex; align-items: center; gap: 0.6rem; }
.day-btn {
  width: 2.1rem; height: 2.1rem; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--seat); color: var(--gold); font: inherit; font-size: 1.3rem; line-height: 1; touch-action: manipulation;
}
.day-btn:disabled { opacity: 0.35; }
.day-btn:active:not(:disabled) { background: var(--line); }
.table-center .info-card { pointer-events: auto; }

/* ── Game notes button: a small circle beside the header card (left of it in landscape), under its right end in portrait ── */
.info-wrap { display: contents; }
.info-side { flex: 0 0 2.2rem; align-self: flex-start; display: flex; flex-direction: column; gap: 0.4rem; }
.round-btn {
  position: relative; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--gold); touch-action: manipulation; pointer-events: auto;
}
.round-btn.active { border-color: var(--gold); background: rgb(251 181 59 / 0.16); }
.round-btn .icon { width: 1.2rem; height: 1.2rem; }
.game-notes-btn.has-notes::after { content: ''; position: absolute; top: 0.1rem; right: 0.1rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--gold); }
@media (orientation: portrait) {
  .info-top { position: relative; }
  .info-side { position: absolute; left: 0; right: 0; top: 100%; margin-top: 0.3rem; z-index: 2; flex-direction: row; justify-content: space-between; pointer-events: none; }
  .round-btn { pointer-events: auto; }
  .eye-btn { order: 1; }   /* left, the notes button on the right, the cards button between them */
  .cards-btn { order: 2; }
  .game-notes-btn { order: 3; }
}

/* ── Nominations ── */
.nom-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.1rem; max-width: 60%; padding: 0 0.55rem;
  border: 1px solid var(--line); border-radius: 1rem; background: var(--seat); color: var(--gold); font: inherit; touch-action: manipulation;
}
.nom-btn .icon { width: 1.25rem; height: 1.25rem; flex: none; }
.nom-btn.has-leader { border-color: var(--gold); background: rgb(251 181 59 / 0.14); }
.nom-leader { display: inline-flex; gap: 0.3rem; min-width: 0; font-size: 0.95rem; }
.nom-leader-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nom-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.25rem; border-bottom: 1px solid var(--line); }
.nom-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nom-arrow { color: var(--muted); }
.nom-votes { font-family: var(--title); font-size: 1.2rem; color: var(--muted); min-width: 1.5rem; text-align: right; }
.nom-enough .nom-votes { color: var(--gold); }
.nom-del { position: static; transform: none; flex: none; }

/* nomination pickers */
.pchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: 0.35rem; }
.pchip { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 0; padding: 0.3rem 0.2rem; border: 2px solid transparent; border-radius: 0.6rem; background: none; color: var(--text); font: inherit; font-size: 0.78rem; touch-action: manipulation; }
.pchip-token { width: 2.8rem; }
.pchip-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchip.is-dead { opacity: 0.6; }
.pchip.selected { border-color: var(--gold); background: rgb(251 181 59 / 0.16); }
.vote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: 0.35rem; }
.vote-opt { min-height: 2.6rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--seat); color: var(--text); font: inherit; font-size: 1.1rem; touch-action: manipulation; }
.vote-opt.enough { color: var(--gold); }
.vote-opt.selected { background: var(--gold); border-color: var(--gold); color: #1d1a10; font-weight: 700; }
.nom-add { width: 100%; margin: 0.6rem 0 0.4rem; }
.nom-field { margin-bottom: 0.4rem; }

/* circle for choosing the nominator and the nominee */
.nom-stage { --r: 36cqmin; --size: min(16cqmin, calc(var(--r) * 4.6 / var(--n))); width: min(100%, 26rem, 52vh); margin: 0 auto 0.5rem; }
.nom-stage .rotate-ring, .nom-stage .rotate-seat { transition: none; }
.nom-seat { cursor: pointer; touch-action: manipulation; border-radius: 0.5rem; }
.nom-seat.is-dead { opacity: 0.6; }
.nom-token { position: relative; width: 100%; --nominator: var(--gold); --nominee: var(--evil); --voter: var(--good); }
.nom-ring { position: absolute; inset: calc(-2px - var(--k) * 4px); border: 3px solid; border-radius: 50%; pointer-events: none; }
.nom-ring.nominator { border-color: var(--nominator); }
.nom-ring.nominee { border-color: var(--nominee); }
.nom-ring.voter { border-color: var(--voter); }
.pick-badge.nominator { background: var(--nominator); }
.pick-badge.nominee { background: var(--nominee); }
.pick-badge.voter { background: var(--voter); }
.nom-badges { position: absolute; top: -0.5rem; right: -0.5rem; display: flex; gap: 0.1rem; }
.pick-badge { width: 1.3rem; height: 1.3rem; display: grid; place-items: center; border-radius: 50%; color: #1d1a10; font-size: 0.8rem; font-weight: 700; }
.pick-badge.nominee, .pick-badge.voter { color: #fff; }
.pick-badge .icon { width: 0.9rem; height: 0.9rem; stroke-width: 3; }
.nom-mode {
  position: absolute; left: 50%; top: 50%; width: 18cqmin; height: 18cqmin; transform: translate(-50%, -50%);
  display: grid; place-items: center; border: 2px solid var(--gold); border-radius: 50%; background: rgb(251 181 59 / 0.14); color: var(--gold);
  touch-action: manipulation;
}
.nom-mode.raised { border-color: var(--good); color: var(--good); background: rgb(61 155 233 / 0.14); }
.nom-mode .icon { width: 55%; height: 55%; }
.nom-mode.raised .icon { width: 48%; height: 48%; }   /* the open hand fills its box more than the pointing one */
.voter-list { display: flex; flex-wrap: wrap; gap: 0.3rem; max-height: 4.6rem; overflow-y: auto; align-items: center; }
.voter-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.2rem 0.15rem 0.6rem; border: 1px solid var(--good); border-radius: 1rem; background: rgb(61 155 233 / 0.14); font-size: 0.9rem; }
.voter-chip .icon, .nom-voted .icon { width: 0.9rem; height: 0.9rem; }
.voter-chip.dead { opacity: 0.85; }
.voter-more, .voter-step { display: grid; place-items: center; border: 0; color: var(--good); touch-action: manipulation; }
.voter-more { width: 2.2rem; height: 2rem; border: 1px dashed var(--good); border-radius: 1rem; background: none; }
.voter-step { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: rgb(61 155 233 / 0.2); }
.voter-more .icon, .voter-step .icon { width: 1.1rem; height: 1.1rem; }
.voter-unknown { padding: 0.1rem 0.2rem; gap: 0.5rem; font-weight: 600; }
.voter-del { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; background: none; color: var(--muted); touch-action: manipulation; }
.voter-del .icon { width: 1rem; height: 1rem; }
.nom-voted { display: block; margin-top: 0.1rem; font-size: 0.85rem; color: var(--good); }
.nom-voted .icon { vertical-align: -0.15em; margin-right: 0.1rem; }
.nom-add .icon { width: 1.1rem; height: 1.1rem; vertical-align: -0.2em; margin-right: 0.4rem; }
.nom-sheet { position: relative; }
.exec-note { text-align: center; }
.nom-pop-backdrop { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 1rem; background: rgb(0 0 0 / 0.6); border-radius: inherit; }
.nom-pop { width: 100%; max-width: 22rem; display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.nom-pop .title { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 1.15rem; }
.nom-pop .title .icon { width: 1.4rem; height: 1.4rem; color: var(--gold); }
.nom-pop-list { margin: 0; padding-left: 1.2rem; }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.6rem; }
.slot { position: relative; display: flex; flex-direction: column; gap: 0.1rem; min-height: 3.6rem; padding: 0.4rem 2.4rem 0.4rem 0.7rem; border: 1px dashed var(--line); border-radius: 0.6rem; }
.slot.filled { border: 1px solid var(--gold); background: rgb(251 181 59 / 0.1); }
.slot-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.slot-name { font-size: 1.05rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot.filled .slot-name { color: var(--text); font-weight: 600; }
.slot-clear { top: 50%; right: 0.3rem; }
.nom-sep { color: var(--gold); margin: 0 0.1rem; }
.nom-leader { align-items: baseline; }

/* the player on the block: a large, 40%-opaque skull over the token */
.block-skull {
  position: absolute; left: 50%; top: 50%; width: 62%; height: 62%; transform: translate(-50%, -50%);
  color: #fff; opacity: 0.4; stroke-width: 1.6; pointer-events: none; z-index: 1;
  filter: drop-shadow(0 0 3px rgb(0 0 0 / 0.9)) drop-shadow(0 0 8px rgb(120 0 0 / 0.8));
}

/* the header card scales with its own width so it also fits the narrow column of a small phone in landscape */
.info-card { container-type: inline-size; }
.hdr-row { flex-wrap: wrap; row-gap: 0.2rem; }
.hdr-main { font-size: clamp(1.1rem, 9cqw, 1.5rem); }
.hdr-extra { font-size: clamp(0.75rem, 5.5cqw, 0.95rem); }
.hdr-base { gap: clamp(0.25rem, 3.5cqw, 0.5rem); font-size: clamp(1rem, 8cqw, 1.35rem); }
.hdr-votes { font-size: clamp(1rem, 7.5cqw, 1.2rem); }
.nom-btn { max-width: 100%; min-width: 0; }
.day-btn { width: clamp(1.9rem, 10cqw, 2.1rem); height: clamp(1.9rem, 10cqw, 2.1rem); }

/* ── Nominations sheet layout ──
   Landscape: one scrolling body with the adding part and the history under it.
   Portrait: one view at a time (data-view), so the adding part fits the screen without scrolling; the scroll button
   in the header switches to the history and back. */
.nom-body { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -0.25rem; padding: 0 0.25rem; -webkit-overflow-scrolling: touch; }
.nom-history-view { overflow: visible; margin: 0; padding: 0; }
.nom-toggle { margin-left: auto; flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--line); border-radius: 50%; background: var(--seat); color: var(--gold); touch-action: manipulation; }
.nom-toggle .icon { width: 1.4rem; height: 1.4rem; }
.nom-circle-box { display: contents; }
/* "Back" (history -> adding) exists only in the portrait history view, where it replaces "Done" */
.nom-back { display: none; }
@media (orientation: landscape) { .nom-toggle { display: none; } }
@media (orientation: portrait) {
  .nom-sheet[data-view="history"] .nom-done { display: none; }
  .nom-sheet[data-view="history"] .nom-back { display: block; }
}
@media (orientation: portrait) {
  .nom-body { display: flex; flex-direction: column; overflow: hidden; }
  .nom-sheet[data-view="add"] .nom-history-view { display: none; }
  .nom-sheet[data-view="history"] .nom-add-view { display: none; }
  .nom-add-view { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.4rem; }
  .nom-history-view { flex: 1; min-height: 0; overflow-y: auto; }
  .nom-circle-box { display: block; flex: 1; min-height: 0; container-type: size; }
  .nom-circle-box .nom-stage { width: min(100cqw, 100cqh, 26rem); margin: 0 auto; }
  .nom-add-view .slots { margin-bottom: 0; }
  .nom-add-view .slot { min-height: 3rem; padding-block: 0.25rem; }
  /* the votes grid and the voters list take the same fixed room, so switching modes or adding voters never resizes the circle */
  .nom-add-view .nom-field { margin: 0; height: 8.4rem; }
  .nom-add-view .vote-grid, .nom-add-view .voter-list { height: 6.8rem; max-height: none; overflow-y: auto; align-content: start; }
  .nom-add-view .script-team { margin: 0 0 0.2rem; }
  .nom-add-view .vote-grid { grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr)); gap: 0.3rem; }
  .nom-add-view .vote-opt { min-height: 2.1rem; font-size: 1rem; }
  .nom-add-view .nom-add { margin: 0; }
}

/* ── Portrait: the first screen is the info card, the board and the Game menu button at the very bottom; the whole
   script follows below it, reached by scrolling the page. ── */
.script-below { display: none; }
@media (orientation: portrait) {
  .app:not(.is-setup) {
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-inline: calc(env(safe-area-inset-left) + 0.5rem) calc(env(safe-area-inset-right) + 0.5rem);
  }
  .main { grid-template-rows: auto minmax(0, 1fr) auto; }   /* as high as the screen, so the button sits at its bottom at scroll 0 */
  .main > .info { display: contents; }
  .main .info-top { grid-row: 1; padding-top: 0.5rem; }
  .main > .board { grid-row: 2; padding-inline: 0; }
  .main .info > .btn { grid-row: 3; margin-bottom: 0.5rem; }
  .script-below {
    display: block; margin: 0.5rem 0 1rem; padding: 0.5rem;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  }
}

/* ── Cards ── */
.cards-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.4rem; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cards-menu { justify-content: center; gap: 0.6rem; }
.cards-menu .btn { min-height: 3rem; }
.cards-body > .picker-list { flex: 1; margin: 0; padding: 0; }   /* the picker's side margins would push the body wider than the sheet */
.card-history-row { display: flex; flex-direction: column; gap: 0.15rem; width: 100%; padding: 0.5rem 0.6rem; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit; text-align: left; touch-action: manipulation; }
.card-history-row:active { background: var(--line); }
.search-screen { position: fixed; inset: 0; z-index: 30; background: var(--bg); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); display: flex; justify-content: center; }
.search-screen-inner { width: min(100%, 40rem); height: 100%; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.script-hits { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); }
.script-hits > .note { padding: 0.4rem 0.6rem; }
.search-screen.script-preview { z-index: 35; }
.script-preview-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.search-row { display: flex; gap: 0.5rem; }
.search-row .field { flex: 1; min-width: 0; }
.search-row select.input { flex: none; width: auto; max-width: 9rem; }
.script-hits.script-history { flex: none; overflow: visible; }
.script-hits.script-history > .card-history-row:last-child, .script-hits > .card-history-row:last-child { border-bottom: 0; }
.script-hit-name { color: var(--gold); overflow-wrap: anywhere; }
.card-history-day { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.card-history-text { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* the full-screen card: covers everything else */
.card-show {
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; gap: 0.75rem;
  padding: calc(0.75rem + env(safe-area-inset-top)) calc(0.75rem + env(safe-area-inset-right)) calc(0.75rem + env(safe-area-inset-bottom)) calc(0.75rem + env(safe-area-inset-left));
  background: var(--bg);
}
.card-show-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; }
.card-show-body > :first-child { margin-top: auto; }
.card-show-body > :last-child { margin-bottom: auto; }
.card-text { margin: 0.5rem 0; max-width: 100%; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--title); font-size: clamp(1.8rem, 9vmin, 5rem); line-height: 1.25; }
.card-items { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1rem 0.75rem; }
.card-item { width: clamp(5.5rem, calc(84vmin / var(--cols)), 16rem); display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.card-token { width: 100%; }
.card-name { max-width: 100%; text-align: center; overflow-wrap: anywhere; font-family: var(--title); font-size: clamp(1.1rem, 4.6vmin, 2rem); line-height: 1.15; color: var(--gold); }
.card-reminders { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; }
.card-reminder { width: clamp(2.6rem, calc(26vmin / var(--cols)), 5rem); }
.card-show-finish { flex: none; width: 100%; }

/* ── QR code of the board ── */
.qr-area { flex: 1; min-height: 0; display: grid; place-items: center; }
.qr-box { width: min(100%, 26rem, 55vh); aspect-ratio: 1; border-radius: 0.5rem; overflow: hidden; background: var(--bg); }
.qr-box svg { display: block; width: 100%; height: 100%; }
.scan-area { flex: 1; min-height: 0; display: grid; place-items: center; }
.scan-box { width: min(100%, 26rem, 55vh); aspect-ratio: 1; border-radius: 0.5rem; overflow: hidden; background: #000; border: 1px solid var(--line); }
.scan-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.scan-status { text-align: center; }
.scan-photo { display: grid; place-items: center; cursor: pointer; }
.qr-ask { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; }
.qr-ask .note { text-align: center; }
.detail-nav { display: flex; justify-content: space-between; gap: 0.5rem; }
.detail-back { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; }
.detail-forward { margin-left: auto; }
.jinx[role=button] { cursor: pointer; }
/* the character menu is a pager: one track (js/swipe.js moves it) holding the current sheet and, hidden beside it, the previous and next ones */
.detail-backdrop { overflow: hidden; }
.pager { position: relative; width: min(100%, 28rem); max-height: 100%; display: flex; flex-direction: column; }
.pager > .sheet { width: 100%; }
.sheet-peek { position: absolute; bottom: 0; max-height: 100dvh; visibility: hidden; pointer-events: none; }
.sheet-prev { left: -100%; }
.sheet-next { left: 100%; }
@media (orientation: landscape) { .sheet-peek { display: none; } }
/* the swipe code owns sideways drags: stop the browser panning, overscrolling or navigating on a fast flick */
.detail-backdrop .sheet { touch-action: pan-y; overscroll-behavior: contain; }

/* "All roles" menu: the list scrolls under the search and the chips; the button after the script tab opens it */
.script-all { display: block; width: 100%; margin-top: 0.75rem; }
.all-roles .picker-list { padding-bottom: 0.5rem; }
/* jinx sheet: the two tokens side by side where a character sheet has its one token; jinx pairs in the lists are tappable */
.detail-tokens { flex: none; display: flex; gap: 0.3rem; }
.detail-tokens .detail-token { flex-basis: 4.4rem; width: 4.4rem; }
.jinx-names { display: flex; flex-direction: column; line-height: 1.15; }
.script-jinx-pair[role=button] { cursor: pointer; touch-action: manipulation; }
.script-jinx-pair[role=button]:active { background: var(--line); }
.script-jinx-list { display: flex; align-items: center; gap: 0.2rem; }
.all-roles .script-jinx-list { flex-wrap: wrap; justify-content: flex-end; max-width: 7.6rem; row-gap: 0.2rem; }   /* up to 14 jinxes: three tokens a line */
.all-roles .script-jinxed { align-self: stretch; }
.all-roles .script-jinx-bar { align-self: center; }
.all-roles .script-jinx-bar-long { align-self: stretch; width: 1px; margin: 0.2rem 0.3rem 0.2rem 0; background: var(--muted); }   /* more than one row of tokens: the bar runs along all of them */