/* ─────────────────────────────────────────────
   Link Raid Backup Request — game-menu skin
   Warm charcoal field, bracket-cornered metal tiles,
   thin ruled section headers, gold accents.
   ───────────────────────────────────────────── */

:root {
  --bg-0: #26231f;
  --bg-1: #3a3632;
  --bg-2: #55504b;
  --tile-hi: #66625d;
  --tile-mid: #4d4944;
  --tile-lo: #3f3b37;
  --edge: #b4aea4;
  --edge-dim: #7d776e;
  --line: #8d877e;
  --text: #ece7df;
  --text-dim: #b9b2a7;
  --text-faint: #8b857b;
  --gold: #e0b567;
  --gold-dim: #a8884d;
  --ok: #9ccf9a;
  --warn: #e8b35f;
  --bad: #e58a7a;
  --font: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Noto Sans Mono", monospace;
  --dock-h: 132px;
  /* ornate panel corners, the same artwork as the dialog's */
  --k-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%238f7d56' stroke-width='1.2'%3E%3Cpath d='M3 61V22C3 11 11 3 22 3H61'/%3E%3Cpath d='M11 61V30C11 21 18 14 27 14H48' opacity='.55'/%3E%3Ccircle cx='61' cy='3' r='2.2' fill='%238f7d56' stroke='none'/%3E%3Ccircle cx='3' cy='61' r='2.2' fill='%238f7d56' stroke='none'/%3E%3C/svg%3E");
  --k-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%238f7d56' stroke-width='1.2'%3E%3Cpath d='M61 61V22C61 11 53 3 42 3H3'/%3E%3Cpath d='M53 61V30C53 21 46 14 37 14H16' opacity='.55'/%3E%3Ccircle cx='3' cy='3' r='2.2' fill='%238f7d56' stroke='none'/%3E%3Ccircle cx='61' cy='61' r='2.2' fill='%238f7d56' stroke='none'/%3E%3C/svg%3E");
  --k-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%238f7d56' stroke-width='1.2'%3E%3Cpath d='M3 3V42C3 53 11 61 22 61H61'/%3E%3Cpath d='M11 3V34C11 43 18 50 27 50H48' opacity='.55'/%3E%3Ccircle cx='61' cy='61' r='2.2' fill='%238f7d56' stroke='none'/%3E%3Ccircle cx='3' cy='3' r='2.2' fill='%238f7d56' stroke='none'/%3E%3C/svg%3E");
  --k-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%238f7d56' stroke-width='1.2'%3E%3Cpath d='M61 3V42C61 53 53 61 42 61H3'/%3E%3Cpath d='M53 3V34C53 43 46 50 37 50H16' opacity='.55'/%3E%3Ccircle cx='3' cy='3' r='2.2' fill='%238f7d56' stroke='none'/%3E%3Ccircle cx='61' cy='61' r='2.2' fill='%238f7d56' stroke='none'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg-0);
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom));
}

/* ── Disclaimer footer ────────────────────── */
.legal {
  max-width: 1240px; margin: 12px auto 0; padding: 14px 20px 18px;
  background: linear-gradient(rgba(217, 179, 107, .18), rgba(217, 179, 107, .18)) top / calc(100% - 40px) 1px no-repeat;
  text-align: center; font-size: 11.5px; line-height: 1.55; color: var(--text-faint);
}
.legal p { margin: 0 0 4px; }
.legal b { color: var(--text-dim, var(--text)); font-weight: 600; }
.legal-built { margin-top: 8px !important; }
.legal-build { margin-top: 10px !important; font-size: 11px; letter-spacing: .02em; color: var(--text-faint); opacity: .9; }
.legal-build:empty { display: none; }
.build-status { color: var(--text-faint); }
.build-status.is-current { color: var(--ok, #8fc98a); }
.build-status.is-offline { color: var(--warn); }
.build-status.is-update {
  font: inherit; color: #2b2113; background: var(--gold); border: 0; border-radius: 999px;
  padding: 1px 10px; font-weight: 600; cursor: pointer;
}
.build-status.is-update:hover, .build-status.is-update:focus-visible { filter: brightness(1.1); outline: 2px solid rgba(217, 179, 107, .5); outline-offset: 2px; }
.build-again { font: inherit; color: var(--gold); background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px dotted rgba(217, 179, 107, .5); }
.build-again:hover, .build-again:focus-visible { border-bottom-style: solid; outline: none; }

/* shown above the header when a newer deploy exists */
.update-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; font-size: 13px; color: var(--text);
  background: linear-gradient(180deg, rgba(64, 52, 30, .96), rgba(43, 35, 22, .96));
  border-bottom: 1px solid rgba(217, 179, 107, .55);
}
.update-bar[hidden] { display: none; }
.update-bar button {
  font: inherit; font-weight: 600; color: #2b2113; background: var(--gold);
  border: 0; border-radius: 999px; padding: 3px 14px; cursor: pointer;
}
.update-bar button:hover, .update-bar button:focus-visible { filter: brightness(1.1); }
.legal a { color: var(--gold); text-decoration: none; border-bottom: 1px dotted rgba(217, 179, 107, .5); }
.legal a:hover, .legal a:focus-visible { border-bottom-style: solid; outline: none; }
.legal-built a:last-child { display: block; width: fit-content; margin: 6px auto 0; font-weight: 600; }

/* ── Backdrop ─────────────────────────────── */
.bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 70% 30%, rgba(255, 244, 225, .10), transparent 70%),
    radial-gradient(40% 40% at 15% 80%, rgba(224, 181, 103, .06), transparent 70%),
    radial-gradient(120% 90% at 50% 40%, var(--bg-2) 0%, var(--bg-1) 45%, var(--bg-0) 100%);
}
.bg::before, .bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-repeat: no-repeat;
}
/* drifting dust specks */
.bg::before {
  background-image:
    radial-gradient(circle, rgba(255,235,200,.55) 0 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255,235,200,.35) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,235,200,.45) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255,235,200,.30) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,235,200,.40) 0 1.5px, transparent 2.5px);
  background-size: 24px 24px, 18px 18px, 28px 28px, 18px 18px, 22px 22px;
  background-position: 8% 14%, 31% 62%, 52% 9%, 74% 78%, 93% 40%;
  animation: drift 14s ease-in-out infinite alternate;
}
/* vignette */
.bg::after {
  background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0,0,0,.45) 100%);
}
@keyframes drift { to { transform: translateY(-14px); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .bg::before { animation: none; } }

/* ── Icons ────────────────────────────────── */
.ico {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico.big { width: 40px; height: 40px; stroke-width: 1.3; }

/* ── Top bar ──────────────────────────────── */
.topbar {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  max-width: 1240px; margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top)) 20px 0;
}
.topbar-left { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }

.player {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 6px;
  background: linear-gradient(90deg, rgba(20,18,16,.55), rgba(20,18,16,.25) 80%, transparent);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px 18px 18px 999px;
}
.avatar {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  color: var(--text); border: 1.5px solid var(--edge);
  background: radial-gradient(circle at 35% 30%, #6c6761, #2f2c28);
}
.avatar .ico { width: 34px; height: 34px; color: #efe3c6; fill: none; stroke: none; }
.player-name { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 26px; letter-spacing: .5px; line-height: 1; }
.spark { color: var(--text-dim); font-size: 14px; }
.player-sub { display: flex; flex-direction: column; line-height: 1.05; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }
.player-sub b { font-size: 15px; color: var(--text); font-weight: 600; letter-spacing: .04em; }
@keyframes pulse { 50% { opacity: .35; } }

.topbar-right { display: flex; gap: 12px; flex: none; }
.round-btn {
  position: relative; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--gold);
  background: radial-gradient(circle at 50% 30%, #5a554f, #34312d);
  border: 1.5px solid var(--gold-dim);
  box-shadow: 0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .12s, border-color .12s;
}
.round-btn .ico { width: 22px; height: 22px; }
.round-btn:hover { border-color: var(--gold); transform: translateY(-1px); }
.round-btn:active { transform: translateY(1px); }
.badge { /* count bubble on the dock's History button */
  position: absolute; z-index: 2; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--gold); color: #2b2418; font: 600 11px/18px var(--font); text-align: center; font-style: normal;
}

/* ── Stage layout ─────────────────────────── */
.stage {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 36px;
  max-width: 1240px; margin: 0 auto; padding: 26px 20px 0;
}
.side { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
/* The upload column only belongs to the Generate screen; the others use the full width. */
body:not([data-view="generate"]) .side { display: none; }
body:not([data-view="generate"]) .stage { grid-template-columns: minmax(0, 860px); justify-content: center; }
.content { min-width: 0; max-width: 860px; }

/* ── Banner cards (left column) ───────────── */
.banner { position: relative; padding-top: 12px; }
.banner::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.banner-tag {
  position: absolute; left: 6px; top: 12px; z-index: 2; transform: translateY(-50%);
  padding: 2px 10px; font-size: 12px; font-weight: 500; letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,.35); box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.tag-purple { background: #7a4f86; }
.banner-body {
  margin-top: 8px; min-height: 120px;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(160deg, rgba(0,0,0,.35), rgba(0,0,0,.18));
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  display: grid; place-items: center; overflow: hidden;
}
/* Panel preview (main area): the cropped panel is portrait, so bound it by height and centre it */
.preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 250px); gap: 18px; align-items: center; }
.preview:has(#cropTools[hidden]) { grid-template-columns: minmax(0, 1fr); } /* nothing to show beside an empty preview */
.preview-stage {
  display: grid; place-items: center; min-height: 120px; padding: 10px;
  background: linear-gradient(160deg, rgba(0,0,0,.4), rgba(0,0,0,.2));
  border: 1px solid rgba(255,255,255,.14);
}
#panelCanvas { display: block; max-width: 100%; max-height: 340px; width: auto; height: auto; }
.preview-empty { display: grid; justify-items: center; gap: 6px; padding: 22px 12px; text-align: center; color: var(--text-faint); font-size: 13px; }
.preview-empty .ico { width: 34px; height: 34px; stroke-width: 1.2; }
.crop-tools { display: grid; gap: 8px; }
.banner-body.tip { place-items: start; padding: 12px 14px; min-height: 0; font-size: 13px; color: var(--text-dim); }
.banner-body.tip p { margin: 0 0 8px; }
.banner-body.tip p:last-child { margin: 0; }
.crop-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); }
.crop-label output { color: var(--gold); font-variant-numeric: tabular-nums; }
.mini-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; cursor: pointer; border-radius: 999px;
  font: 500 12px var(--font); color: var(--text);
  background: linear-gradient(#4a4642, #34312d); border: 1px solid rgba(214,203,180,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.mini-btn .ico { width: 14px; height: 14px; }
.mini-btn:hover { border-color: var(--gold-dim); color: var(--gold); }

kbd, code {
  font-family: var(--mono); font-size: .9em; padding: 1px 6px; border-radius: 4px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1);
}

input[type="range"] { width: 100%; accent-color: var(--gold); }

/* ── Section headers ──────────────────────── */
.sect-title {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
}
.sect-title:not(:first-child) { margin-top: 30px; }
.sect-title h2 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: .02em; color: var(--text); }
.sect-title .diamond {
  width: 8px; height: 8px; border: 1px solid var(--line); transform: rotate(45deg); flex: none;
}
.sect-title .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), rgba(141,135,126,.35)); }
.sect-title .end-ornament { color: var(--line); width: 22px; height: 22px; stroke-width: 1.3; }

/* ── Tiles: dark framed panels with ornate corners, after the game's dialogs ──────────────── */
.tile {
  --c: rgba(143,125,86,.32);                       /* the thin inner frame */
  position: relative; padding: 20px 24px;
  background: linear-gradient(180deg, #34312c, #24211e);
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.tile::after {
  content: ""; position: absolute; inset: 7px; border: 1px solid var(--c); border-radius: 6px; pointer-events: none;
  transition: border-color .15s;
}
.tile::before {
  content: ""; position: absolute; inset: 4px; pointer-events: none;
  background:
    var(--k-tl) top left / 40px 40px no-repeat,
    var(--k-tr) top right / 40px 40px no-repeat,
    var(--k-bl) bottom left / 40px 40px no-repeat,
    var(--k-br) bottom right / 40px 40px no-repeat;
}
.tile:focus-within, .tile.is-drag { --c: rgba(224,181,103,.6); }
.tile.warn { --c: rgba(232,179,95,.7); }

/* Dropzone: keeps the original flat button-like tile (square, bracket corners), not the dialog-style panel */
.tile.dropzone {
  --c: var(--edge); border-radius: 0; border: 1px solid rgba(0,0,0,.4);
  background: linear-gradient(180deg, var(--tile-hi) 0%, var(--tile-mid) 55%, var(--tile-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.04), 0 3px 10px rgba(0,0,0,.35);
}
.tile.dropzone::after { display: none; }
.tile.dropzone::before {
  inset: -4px;
  background:
    linear-gradient(var(--c), var(--c)) top left / 10px 1px,
    linear-gradient(var(--c), var(--c)) top left / 1px 10px,
    linear-gradient(var(--c), var(--c)) top right / 10px 1px,
    linear-gradient(var(--c), var(--c)) top right / 1px 10px,
    linear-gradient(var(--c), var(--c)) bottom left / 10px 1px,
    linear-gradient(var(--c), var(--c)) bottom left / 1px 10px,
    linear-gradient(var(--c), var(--c)) bottom right / 10px 1px,
    linear-gradient(var(--c), var(--c)) bottom right / 1px 10px;
  background-repeat: no-repeat;
}
.tile.dropzone:focus-within, .tile.dropzone.is-drag { --c: var(--gold); }
.dropzone {
  display: grid; justify-items: center; gap: 6px; text-align: center; padding: 26px 16px; cursor: pointer;
  transition: filter .12s;
}
.dropzone:hover { filter: brightness(1.08); }
.dropzone .ico { color: var(--text-dim); }
.dz-title { font-size: 17px; font-weight: 500; }
.dz-sub { font-size: 12.5px; color: var(--text-dim); }
.dropzone.has-image .ico.big { width: 28px; height: 28px; }
.dropzone.has-image { padding: 14px 16px; }

/* Field grid */
/* As many columns as fit with each card at least 350px wide (the Run Type tiles need that much); fewer, wider cards otherwise.
   Sizing by the space the grid really has, not by the window, keeps cards from being squeezed beside the upload column. */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr)); gap: 16px; }
.span4 { grid-column: 1 / -1; }

.field { display: grid; gap: 8px; align-content: start; }
/* Card titles: sized to sit comfortably between the 17px section headings and the inputs below them; gold and centred like a dialog title */
.field > label, .field > .lbl, .field-head > label {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 16px; font-weight: 600; color: #ecd7a6; letter-spacing: .03em; line-height: 1.2;
}
.field > label .ico, .field > .lbl .ico, .field-head > label .ico { width: 20px; height: 20px; color: var(--gold); }
.field-head { position: relative; display: flex; justify-content: center; align-items: center; min-height: 28px; }
.head-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

/* Run type: bracket-framed choice tiles with a diamond, like the game's Backup Requests options */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.seg-opt { position: relative; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-opt span {
  --k: rgba(214,203,180,.55);
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px 8px 14px; border-radius: 4px;
  user-select: none; white-space: nowrap; font: 500 15.5px/1.15 var(--font); color: var(--text); transition: background .12s, color .12s;
}
.seg-opt span::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--k), var(--k)) 12px 0 / calc(100% - 24px) 1px,
    linear-gradient(var(--k), var(--k)) 12px 100% / calc(100% - 24px) 1px,
    linear-gradient(var(--k), var(--k)) 0 8px / 1px calc(100% - 16px),
    linear-gradient(var(--k), var(--k)) 100% 8px / 1px calc(100% - 16px),
    linear-gradient(var(--k), var(--k)) 0 0 / 7px 1px,
    linear-gradient(var(--k), var(--k)) 100% 100% / 7px 1px;
  background-repeat: no-repeat;
}
.seg-opt span::after {
  content: ""; order: -1; flex: none; width: 9px; height: 9px; margin: 0 5px 0 3px; transform: rotate(45deg);
  border: 1px solid var(--gold-dim); transition: background .12s, border-color .12s;
}
.seg-opt:hover span { --k: rgba(224,181,103,.8); }
.seg-opt input:checked + span { --k: var(--gold-dim); color: var(--gold); background: linear-gradient(90deg, rgba(224,181,103,.13), rgba(224,181,103,.02)); }
.seg-opt input:checked + span::after { border-color: var(--gold); background: var(--gold); box-shadow: inset 0 0 0 2px #2b2823; }
.seg-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }

/* inputs are flat slots, like the game's text fields */
.field input[type="text"] {
  width: 100%; min-width: 0; padding: 6px 12px; text-align: center;
  font: 500 19px/1.25 var(--mono); letter-spacing: .03em; color: var(--text);
  background: linear-gradient(90deg, rgba(255,255,255,.085), rgba(255,255,255,.035)); border: 1px solid transparent; border-radius: 5px;
  outline: none; transition: border-color .12s, background .12s, box-shadow .12s;
}
.field input::placeholder { color: rgba(236,231,223,.22); }
.field input:focus { border-color: rgba(224,181,103,.7); background: rgba(255,255,255,.1); box-shadow: 0 0 0 3px rgba(224,181,103,.12); }
.field input.autofilled { color: #f3dca8; }
.field input[type="text"].left { text-align: left; }
.slot { position: relative; }
.field .slot input[type="text"] { padding-right: 68px; text-align: left; font: 500 18px/1.25 var(--font); letter-spacing: 0; }
.field .slot.mono input[type="text"] { font: 500 19px/1.25 var(--mono); letter-spacing: .08em; }   /* fixed-width glyphs: O/0 and l/I stay apart */
.slot-count.bad { color: var(--warn); }
.slot-count { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--text-dim); font-variant-numeric: tabular-nums; pointer-events: none; }

/* level steppers: round buttons either side of the value, like the game's skip-count controls */
.stepper { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.step-btn {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer; color: #efe7d6; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #3b3733, #1f1c19); border: 1px solid rgba(214,203,180,.45);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.4); transition: color .12s, border-color .12s, transform .08s;
}
.step-btn .ico { width: 18px; height: 18px; stroke-width: 1.8; }
.step-btn:hover:not(:disabled) { color: var(--gold); border-color: var(--gold); }
.step-btn:active:not(:disabled) { transform: translateY(1px); }
.step-btn:disabled { opacity: .3; cursor: not-allowed; }
.step-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hint { font-size: 11.5px; color: var(--text-faint); text-align: center; min-height: 1.3em; }
.hint.bad { color: var(--warn); }

.hp-row { display: flex; align-items: center; gap: 8px; }
.hp-row input { font-size: 16px !important; padding-left: 4px !important; padding-right: 4px !important; letter-spacing: 0 !important; }   /* seven-digit HP has to fit a half-width slot */
.hp-row > input { flex: 1 1 0; }
.slash, .eq { color: var(--text-faint); font-size: 20px; }
.pct { display: flex; align-items: center; gap: 4px; flex: 0 0 96px; }
.pct input { text-align: center !important; min-width: 0; }
.pct b { font-size: 18px; font-weight: 500; color: var(--gold); }

.anchor-row { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 11.5px;
  color: var(--gold); text-decoration: underline; text-underline-offset: 2px;
}
.link-btn:hover { color: #f6d9a0; }

/* ── Output tile ──────────────────────────── */
.output { display: grid; gap: 14px; --c: rgba(168,136,77,.5); }
.code {
  margin: 0; padding: 14px 16px; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
  font: 500 16px/1.5 var(--mono); color: #f5ecd9;
  background: rgba(15,13,11,.55); border: 1px solid rgba(255,255,255,.08);
}
.code.small { font-size: 14px; }
/* the Config preview, drawn the way Discord shows a message: timestamp tags as pills, `inline code` as code */
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.preview-modes { display: inline-flex; gap: 6px; }
.code.is-rendered { font: 400 16px/1.5 var(--font); }
.dc-code { padding: 1px 5px; font: 14px/1.4 var(--mono); background: rgba(0,0,0,.4); border-radius: 3px; }
.dc-time { padding: 0 3px; background: rgba(255,255,255,.12); border-radius: 3px; }
.code:focus-visible { outline: 1px solid var(--gold); }
.out-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); }
.countdown { font-variant-numeric: tabular-nums; }
.countdown.expired { color: var(--bad); }

.warnings { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; color: var(--warn); }
.warnings li::before { content: "◇ "; }

.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 20px;
  font: 500 15px var(--font); color: var(--text); cursor: pointer; letter-spacing: .02em;
  background: linear-gradient(180deg, #67625d, #46423d); border: 1px solid rgba(0,0,0,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 6px rgba(0,0,0,.35);
  transition: filter .12s, transform .08s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .mini-btn:focus-visible, .round-btn:focus-visible, .dock-btn:focus-visible, .link-btn:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.btn.primary { flex: 1 1 220px; color: #2b2418; background: linear-gradient(180deg, #f0cd8a, #cf9f4f); border-color: #8c6a2e; font-weight: 600; }
.btn.done { background: linear-gradient(180deg, #a9d8a6, #6faa6d); border-color: #46774a; color: #1d2d1e; }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
/* the request's actions are pill buttons with sparkles, like the dialogs' Cancel / OK */
.output .btn {
  position: relative; min-height: 46px; padding: 8px 40px; border-radius: 999px; color: #2a2418; font: 600 17px var(--font);
  background: linear-gradient(180deg, #dedad1, #aaa69c); border: 1px solid rgba(255,255,255,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 10px rgba(0,0,0,.45);
}
.output .btn::before, .output .btn::after { content: "✦"; position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: .65; }
.output .btn::before { left: 16px; }
.output .btn::after { right: 16px; }
.output .actions .btn { flex: 1 1 0; }                 /* Copy and Save share the row equally */
.output .btn.primary { background: linear-gradient(180deg, #f0cd8a, #cf9f4f); }
.output .btn.done { background: linear-gradient(180deg, #a9d8a6, #6faa6d); color: #1d2d1e; }

/* ── Verification table ───────────────────── */
.verify { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 14px; }
.verify th, .verify td { text-align: left; padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.verify th { font-size: 12px; font-weight: 500; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; }
.verify td:first-child { color: var(--text-dim); width: 34%; }
.verify td:last-child { font-family: var(--mono); }
.verify .muted-val { color: var(--text-faint); font-family: var(--font); }

/* ── History ──────────────────────────────── */
.muted { color: var(--text-dim); }
/* ── History: a log table after the game's Usage Log ──────────────────────── */
.log-panel { background: rgba(20,18,16,.32); border-radius: 6px; padding: 4px 0 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.log-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.log-table th {
  padding: 14px 10px 12px; font-size: 14px; font-weight: 500; color: var(--text-dim); text-align: center;
  border-bottom: 1px solid rgba(214,203,180,.22);
}
.log-table td { padding: 12px 10px; vertical-align: middle; font-size: 14.5px; }
.log-table .c-sel { width: 3.4em; text-align: center; }
.log-table .c-sel input, .bulk-all input { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--gold); vertical-align: middle; }
.log-table .c-saved { width: 11.5em; text-align: center; font-variant-numeric: tabular-nums; }
.log-table .c-line { text-align: left; font: 500 14px/1.45 var(--mono); word-break: break-word; }
.log-table th.c-line { font-family: var(--font); font-size: 14px; text-align: center; }
.log-table th.c-exp { color: var(--text-dim); }
.log-table .c-exp { width: 9.5em; text-align: center; font-variant-numeric: tabular-nums; color: var(--gold); }
.log-table .c-exp.none { color: var(--text-faint); }
.log-table .c-act { width: 11em; text-align: right; white-space: nowrap; }
.log-table .c-act .mini-btn { margin-left: 6px; }
.log-table tbody tr:nth-child(odd) { background: rgba(255,255,255,.045); }
/* short divider between columns, like the log's column rules */
.log-table td + td, .log-table th + th {
  background-image: linear-gradient(rgba(214,203,180,.3), rgba(214,203,180,.3));
  background-repeat: no-repeat; background-position: left center; background-size: 1px 62%;
}
.log-table tbody tr.selected { background: rgba(224,181,103,.13); }
.log-table tr.expired td { opacity: .5; }
.log-table tr.expired td.c-sel { opacity: 1; }
.log-table tr.expired td.c-act { opacity: 1; }
.log-table tr.expired .c-exp { color: var(--text-faint); }
/* the bar over the table: select-all, how many are picked, and what to do with them */
.bulk-bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 16px; border-bottom: 1px solid rgba(214,203,180,.22); }
.bulk-all { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--text); user-select: none; }
.bulk-count { flex: 1; font-size: 13px; color: var(--text-dim); }
.bulk-actions { display: inline-flex; gap: 6px; }
.bulk-all span, .bulk-count { white-space: nowrap; }
/* page controls under the table */
/* laid out like the difficulty stepper; the side padding keeps the buttons within 420px */
.pager {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center;
  margin-top: 10px; padding: 16px max(14px, calc((100% - 420px) / 2)) 16px;
  border-top: 1px solid rgba(224,181,103,.55); border-bottom: 1px solid rgba(214,203,180,.14); background: rgba(0,0,0,.22);   /* a gold rule and a darker band set it apart from the records */
}
.pager-info { display: grid; gap: 1px; text-align: center; font-variant-numeric: tabular-nums; }
.pager-info b { font-size: 14px; font-weight: 500; color: var(--text); }
.pager-info small { font-size: 12px; color: var(--text-faint); }
.log-note { margin: 14px 18px 0; font-size: 13px; color: var(--text-dim); }

/* ── Guide ────────────────────────────────── */
.prose { font-size: 14.5px; color: var(--text-dim); }
.prose b { color: var(--text); font-weight: 500; }
.prose ol, .prose ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.prose p { margin: 12px 0 0; }

/* ── Bottom dock ──────────────────────────── */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center; align-items: flex-end; gap: clamp(20px, 6vw, 80px);
  height: var(--dock-h); padding: 0 16px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(18,16,14,.92) 0%, rgba(18,16,14,.55) 55%, transparent 100%);
  pointer-events: none;
}
.dock-btn {
  pointer-events: auto; display: grid; justify-items: center; gap: 0; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--text); font: inherit; position: relative;
}
.emblem {
  position: relative; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #716c66, #35322e 70%);
  border: 1.5px solid var(--edge-dim); color: var(--text-dim);
  box-shadow: 0 4px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .15s, border-color .15s, color .15s;
}
.emblem::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px dashed rgba(180,174,164,.45);
}
.emblem .ico { width: 30px; height: 30px; stroke-width: 1.3; }
.ribbon {
  position: relative; z-index: 1; margin-top: -10px; padding: 3px 22px; min-width: 104px; text-align: center;
  font-size: 15px; font-weight: 500; letter-spacing: .03em; color: var(--text);
  background: linear-gradient(180deg, rgba(40,37,34,.95), rgba(26,24,22,.95));
  border: 1px solid rgba(255,255,255,.12);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}
.dock-btn:hover .emblem { transform: translateY(-3px); border-color: var(--gold-dim); color: var(--gold); }
.dock-btn.is-active .emblem {
  width: 84px; height: 84px; border-color: var(--gold); color: var(--gold);
  box-shadow: 0 0 22px rgba(224,181,103,.28), 0 4px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
}
.dock-btn.is-active .emblem::before { border-color: rgba(224,181,103,.6); }
.dock-btn.is-active .emblem .ico { width: 36px; height: 36px; }
.dock-btn.is-active .ribbon { color: var(--gold); border-color: rgba(224,181,103,.4); }

/* ── Toasts ───────────────────────────────── */
/* Action feedback ("Copied") and the upload / scan status above the dock; the Console keeps the full record. */
.toasts {
  position: fixed; left: 50%; bottom: calc(var(--dock-h) + 14px); z-index: 20; transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 8px;
  width: min(92vw, 560px); pointer-events: none;
}
.toast {
  max-width: 100%; padding: 9px 18px; font-size: 14px; color: var(--text); text-align: center;
  background: rgba(20,18,16,.94); border: 1px solid var(--gold-dim); border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s;
}
.toast[data-level="ok"] { border-color: var(--ok, #8fc98a); }
.toast[data-level="warn"] { border-color: var(--warn); }
.toast[data-level="error"] { border-color: #e07a6a; }
.toast:empty { display: none; }
.toast.show { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

[hidden] { display: none !important; }

/* ── Configuration screen ─────────────────── */
.mono { font-family: var(--mono); }
.cfg { display: grid; gap: 18px; }
.cfg-block { display: grid; gap: 8px; align-content: start; min-width: 0; }
.cfg-label { font-size: 13px; font-weight: 500; letter-spacing: .03em; color: var(--text-dim); }
.cfg-label small { margin-left: 8px; font-weight: 400; font-size: 11.5px; letter-spacing: 0; color: var(--text-faint); }
.hint.left { text-align: left; }

.cfg-input {
  width: 100%; min-width: 0; padding: 8px 10px; font: 500 15px/1.3 var(--font); color: var(--text);
  background: rgba(0,0,0,.22); border: 0; border-bottom: 1px solid var(--edge-dim); border-radius: 0; outline: none;
  transition: border-color .12s, background .12s;
}
.cfg-input.mono { font-family: var(--mono); }
.cfg-input:focus { border-bottom-color: var(--gold); background: rgba(0,0,0,.32); }
.cfg-input::placeholder { color: rgba(236,231,223,.25); }

.presets, .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 3px 10px; cursor: pointer; font: 500 12.5px var(--mono); color: var(--gold);
  background: rgba(0,0,0,.3); border: 1px solid rgba(224,181,103,.35); border-radius: 999px; transition: background .12s;
}
.chip:hover { background: rgba(224,181,103,.14); }
.chip:focus-visible, .cfg-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Block composer for the message format: blocks with text typed between them; the gold bar shows where a dragged block lands. */
.composer {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; min-height: 48px; padding: 8px 10px; cursor: text;
  background: rgba(0,0,0,.22); border-bottom: 1px solid var(--edge-dim); transition: border-color .12s, background .12s;
}
.composer:focus-within { border-bottom-color: var(--gold); background: rgba(0,0,0,.32); }
.composer.is-dropping { outline: 1px dashed var(--gold-dim); outline-offset: 2px; }
.composer.is-full { animation: composer-full .4s; }
@keyframes composer-full { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .composer.is-full { animation: none; } }

.composer-text {
  flex: none; min-width: 12px; padding: 4px 1px; text-align: center; font: 500 14px/1.3 var(--mono); color: var(--text);
  background: none; border: 0; border-bottom: 1px dotted transparent; border-radius: 0; outline: none;
}
.composer-text:hover { border-bottom-color: var(--edge-dim); }
/* a gap with nothing typed in it is not drawn; it opens (2 characters wide) while it has the cursor */
.composer-text.is-empty:not(:focus) { width: 0; min-width: 0; padding-left: 0; padding-right: 0; border-bottom-width: 0; }
.composer-text.is-empty:focus { width: 2ch; }
.composer-text:focus { border-bottom-color: var(--gold); }

.block {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; cursor: grab; touch-action: none; user-select: none;
  margin: 0 3px; font: 500 12.5px var(--mono); color: var(--gold); background: rgba(224,181,103,.12);
  border: 1px solid rgba(224,181,103,.5); border-radius: 999px;
}
.block:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.block.is-lifted { opacity: .35; }
.block-x { padding: 0 5px; font: 15px/1 var(--font); color: var(--text-faint); background: none; border: 0; border-radius: 999px; cursor: pointer; }
.block-x:hover { color: var(--gold); }
.block.is-divider, .chip.is-divider { color: var(--text); background: rgba(255,255,255,.05); border-color: var(--edge-dim); }

.block-help { margin-top: 2px; }
.block-help summary { cursor: pointer; font-size: 12.5px; font-weight: 500; letter-spacing: .03em; color: var(--text-dim); }
.block-help summary small { margin-left: 8px; font-size: 11.5px; font-weight: 400; letter-spacing: 0; color: var(--text-faint); }
.block-help summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.block-list { margin: 6px 0 0; padding: 0; }
.block-row {
  display: grid; grid-template-columns: 13em minmax(0, 1fr) minmax(0, 15em); gap: 4px 14px; align-items: baseline;
  padding: 7px 2px; border-top: 1px dotted rgba(214,203,180,.2);
}
.block-row dt { font: 500 12.5px var(--mono); color: var(--gold); }
.block-row dd { margin: 0; }
.bh-what { font-size: 12.5px; line-height: 1.4; color: var(--text-dim); }
.bh-example { justify-self: start; max-width: 100%; padding: 2px 8px; font: 12.5px/1.4 var(--mono); color: var(--text); background: rgba(0,0,0,.28); border-radius: 3px; word-break: break-all; white-space: pre-wrap; }
@media (max-width: 720px) { .block-row { grid-template-columns: minmax(0, 1fr); } }

.chip.is-grab { cursor: grab; touch-action: none; user-select: none; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 60; margin: 0; pointer-events: none; opacity: .92; box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.opt-control .composer { flex: 1; min-width: 0; }   /* the file name pattern, inside an options row */
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; }
.composer-caret {
  position: absolute; width: 2px; margin-left: -1px; pointer-events: none; border-radius: 1px;
  background: var(--gold); box-shadow: 0 0 6px rgba(224,181,103,.8);
}
.mini-btn:disabled { opacity: .35; cursor: not-allowed; }
.mini-btn:disabled:hover { border-color: rgba(214,203,180,.35); color: var(--text); }

.sep-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sep-row .cfg-input { flex: 0 1 120px; text-align: center; }
#cfgLocalOpts { display: grid; gap: 18px; }

/* ── Timer picker (floating popover with sliding wheels) ─── */
.mini-btn[aria-expanded="true"], .mini-btn[aria-pressed="true"] { color: var(--gold); border-color: var(--gold-dim); }

.tp-backdrop { position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.55); }
.tp-popover {
  --tp-item: 40px;
  position: fixed; z-index: 40; width: min(var(--wp-width, 320px), calc(100vw - 24px)); padding: 14px 16px 12px;
  background: linear-gradient(180deg, #4f4b46, #37332f); border: 1px solid var(--gold-dim);
  box-shadow: 0 18px 44px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.1);
  animation: tp-in .14s ease-out;
}
@keyframes tp-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

.tp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 13px; color: var(--text-dim); letter-spacing: .03em; }
.tp-head output { font: 600 22px/1 var(--mono); color: var(--gold); letter-spacing: .04em; }
.tp-head output.tp-chip { font: 600 15px/1 var(--font); letter-spacing: 0; color: var(--t-ink); }

.tp-grid { position: relative; display: grid; column-gap: 6px; align-items: center; }
.tp-label { text-align: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding-bottom: 6px; }
.tp-colon { font: 600 24px/1 var(--mono); color: var(--text-faint); user-select: none; }

/* each wheel: five visible rows, the middle one is the selection */
.tp-list {
  height: calc(var(--tp-item) * 5); padding: calc(var(--tp-item) * 2) 0;
  overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none;
  touch-action: pan-y; cursor: grab; outline: none;
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
          mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
}
.tp-list::-webkit-scrollbar { display: none; }
.tp-list.dragging { scroll-snap-type: none; cursor: grabbing; }   /* snapping fights a drag; re-applied on release */
.tp-list:focus-visible { box-shadow: inset 0 0 0 1px var(--gold); }
.tp-item {
  height: var(--tp-item); display: grid; place-items: center; scroll-snap-align: center; scroll-snap-stop: always;
  font: 500 22px/1 var(--mono); color: var(--text-faint); user-select: none; -webkit-user-select: none; cursor: pointer;
  transition: color .1s, font-size .1s;
}
.tp-item.is-sel { color: var(--text); font-size: 26px; font-weight: 600; }
.tp-item:hover:not(.is-sel) { color: var(--text-dim); }

/* the highlight band sits over the middle row of every wheel */
.tp-grid > .tp-band {
  grid-row: 2; grid-column: 1 / -1; align-self: center; height: var(--tp-item); pointer-events: none;
  border-top: 1px solid rgba(224,181,103,.55); border-bottom: 1px solid rgba(224,181,103,.55);
  background: rgba(224,181,103,.08);
}
/* explicit level buttons, coloured like the game's level badges (colours sampled from its screenshots) */
.tier-1 { --t-top: #4c4b47; --t-bot: #67645f; --t-ink: #fffaee; }   /* 1–4   grey   */
.tier-2 { --t-top: #506043; --t-bot: #6b7e5c; --t-ink: #fffaec; }   /* 5–8   green  */
.tier-3 { --t-top: #6a3f39; --t-bot: #8d5650; --t-ink: #fff8ed; }   /* 9–12  red    */
.tier-4 { --t-top: #554663; --t-bot: #726083; --t-ink: #fff9ee; }   /* 13–16 purple */
.tier-5 { --t-top: #b9b8bd; --t-bot: #d1d1d5; --t-ink: #1b1b1b; }   /* 17–20 silver (dark ink) */
.tp-choices { display: grid; gap: 6px; }
.tp-choice, .tp-chip {
  color: var(--t-ink); background: linear-gradient(180deg, var(--t-top), var(--t-bot));
  border: 1px solid rgba(0,0,0,.4); border-radius: 3px; font: 600 14px/1 var(--font);
}
.tp-choice {
  min-height: 44px; padding: 0; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: filter .1s, transform .08s;
}
.tp-choice:hover { filter: brightness(1.15); }
.tp-choice:active { transform: translateY(1px); filter: brightness(.95); }
.tp-choice:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tp-choice.is-sel { outline: 2px solid var(--gold); outline-offset: 1px; box-shadow: 0 0 14px rgba(224,181,103,.55), inset 0 1px 0 rgba(255,255,255,.2); }
.tp-chip { display: inline-block; padding: 3px 10px; }   /* the header's current-level chip */
.tp-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }

/* phones: a bottom sheet, which thumbs reach and which never runs off the screen */
.tp-popover.sheet {
  left: 0; right: 0; top: auto; bottom: 0; width: auto; padding-bottom: calc(14px + env(safe-area-inset-bottom));
  border-width: 1px 0 0; border-radius: 16px 16px 0 0; animation: tp-sheet .2s ease-out;
}
@keyframes tp-sheet { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .tp-popover, .tp-popover.sheet { animation: none; } }

/* ── Console (activity log) ───────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.log-dot { display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--text-faint); vertical-align: middle; }
.log-dot.busy { background: var(--gold); animation: pulse 1.1s ease-in-out infinite; }
.log-dot.ok { background: var(--ok); }
.log-dot.warn { background: var(--warn); }
.log-dot.error { background: var(--bad); }
.console {
  height: 190px; overflow-y: auto; padding: 10px 12px; scrollbar-width: thin;
  font: 12.5px/1.55 var(--mono); color: var(--text-dim);
  background: rgba(10,9,8,.72); border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.45);
}
.console:focus-visible { outline: 1px solid var(--gold); }
.console:empty::before { content: "No activity yet — load a screenshot and the steps will appear here."; color: var(--text-faint); }
.log-line { display: grid; grid-template-columns: auto 3.4em 1fr; gap: 10px; align-items: baseline; }
.log-line time { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.log-tag { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.log-text { min-width: 0; overflow-wrap: anywhere; }
.log-line.lvl-info .log-tag { color: var(--text-faint); }
.log-line.lvl-busy { color: var(--gold); }
.log-line.lvl-busy .log-tag { color: var(--gold); }
.log-line.lvl-busy.is-live .log-tag::after { content: "…"; animation: pulse 1.1s ease-in-out infinite; }
.log-line.lvl-ok { color: var(--ok); }
.log-line.lvl-warn { color: var(--warn); }
.log-line.lvl-error { color: var(--bad); }
@media (prefers-reduced-motion: reduce) { .log-dot.busy, .log-line.lvl-busy.is-live .log-tag::after { animation: none; } }

/* ── Option rows (Config), after the game's Options screen ───────────────── */
.opt-list { display: grid; gap: 12px; }
.opt-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 42%); min-height: 64px;
  background: rgba(14,12,10,.38); border: 1px solid rgba(214,203,180,.38); border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 2px 8px rgba(0,0,0,.25);
}
label.opt-row { cursor: pointer; }
.opt-row:focus-within { border-color: var(--gold-dim); }
.opt-label { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 18px; font-size: 17px; font-weight: 500; color: var(--text); }
.opt-label small { font-size: 12px; font-weight: 400; line-height: 1.3; color: var(--text-faint); }
.opt-label small code { font-size: 11px; }
.opt-control { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 8px 14px 8px 28px; }
/* the thin divider with a small chevron notch between the label and its control */
.opt-control::before {
  content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 11px; opacity: .75;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 60' preserveAspectRatio='none'%3E%3Cpath d='M1 0V24L7 30L1 36V60' fill='none' stroke='%23d6cbb4' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 11px 100% no-repeat;
}
.opt-note { margin: -6px 6px 2px; font-size: 12.5px; line-height: 1.4; color: var(--text-faint); }
.opt-note:empty { display: none; }
.opt-note code { font-family: var(--mono); color: var(--text); word-break: break-all; }
.opt-chips { margin: 6px 6px 8px; }
.opt-chips .cfg-label { margin-bottom: 6px; }
.opt-list .warnings { margin: 4px 6px 2px; }

.opt-input {
  width: 100%; min-width: 0; padding: 6px 4px; text-align: center; font: 500 17px/1.3 var(--font); color: var(--text);
  background: transparent; border: 0; border-bottom: 1px solid transparent; border-radius: 0; outline: none;
  transition: border-color .12s, background .12s;
}
.opt-input.mono { font-family: var(--mono); }
/* a long value (the file name pattern) gets more of the row, and the whole row on a narrow screen */
.opt-row.wide { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); }
.opt-row.wide .opt-input { font-size: 14px; }
@media (max-width: 720px) {
  .opt-row.wide { grid-template-columns: minmax(0, 1fr); }
  .opt-row.wide .opt-control { padding: 0 12px 10px; }
  .opt-row.wide .opt-control::before { display: none; }
  .opt-row.wide .opt-input { text-align: left; border-bottom-color: var(--edge-dim); }
}
.opt-input::placeholder { color: rgba(236,231,223,.25); }
.opt-input:hover { border-bottom-color: var(--edge-dim); }
.opt-input:focus { border-bottom-color: var(--gold); background: rgba(0,0,0,.25); }

/* value in the middle, diamond selector on the right; activating it opens the choice dialog */
.opt-choice {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 2px;
  color: var(--text); background: none; border: 0; cursor: pointer; font: 500 17px/1.2 var(--font);
}
.opt-value { text-align: center; padding-left: 26px; }             /* balances the diamond so the text sits centred */
.opt-choice:hover .opt-value { color: var(--gold); }
.opt-choice:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.opt-diamond { position: relative; display: block; width: 26px; height: 26px; }
.opt-diamond::before {
  content: ""; position: absolute; inset: 5px; transform: rotate(45deg);
  border: 1px solid var(--gold); background: rgba(224,181,103,.12);
}
.opt-diamond::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--gold); }

/* On / Off */
.opt-switch { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; }
.opt-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt-state { min-width: 2.2em; text-align: right; font-size: 17px; }
.opt-state.on { display: none; color: var(--gold); }
.opt-switch input:checked ~ .opt-state.on { display: inline; }
.opt-switch input:checked ~ .opt-state.off { display: none; }
.opt-track {
  position: relative; width: 48px; height: 26px; border: 1px solid rgba(214,203,180,.5); border-radius: 999px;
  background: rgba(0,0,0,.4); transition: background .15s, border-color .15s;
}
.opt-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(180deg, #d9d4ca, #a39e94); transition: transform .15s, background .15s;
}
.opt-switch input:checked ~ .opt-track { background: linear-gradient(180deg, #f0cd8a, #cf9f4f); border-color: #8c6a2e; }
.opt-switch input:checked ~ .opt-track::after { transform: translateX(22px); background: linear-gradient(180deg, #4d3f24, #2b2418); }
.opt-switch input:focus-visible ~ .opt-track { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Game-style dialog (RaidDialog) ──────────────────────────────────────── */
.gd-overlay {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: rgba(8,7,6,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: gd-fade .16s ease-out;
}
@keyframes gd-fade { from { opacity: 0; } }
.gd {
  position: relative; display: flex; flex-direction: column; width: min(680px, 100%); min-height: min(360px, calc(100vh - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 34px 48px 30px;
  text-align: center; color: var(--text); background: linear-gradient(180deg, #34312c, #24211e);
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.7);
  animation: gd-pop .18s ease-out;
}
@keyframes gd-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.gd::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(143,125,86,.28); border-radius: 6px; pointer-events: none; }
.gd-corner { position: absolute; width: 56px; height: 56px; color: var(--gold-dim); pointer-events: none; }
.gd-corner svg { display: block; width: 100%; height: 100%; }
.gd-tl { top: 6px; left: 6px; }
.gd-tr { top: 6px; right: 6px; transform: scaleX(-1); }
.gd-bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.gd-br { bottom: 6px; right: 6px; transform: scale(-1, -1); }
.gd-close {
  position: absolute; top: 14px; right: 16px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  color: var(--text-dim); background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.gd-close svg { width: 18px; height: 18px; }
.gd-close:hover { color: var(--text); background: rgba(255,255,255,.08); }
.gd-title { margin: 0 0 26px; font: 600 15px/1.2 var(--font); letter-spacing: .04em; color: var(--gold); }
.gd-message { margin: 0 0 24px; font-size: 19px; font-weight: 600; line-height: 1.7; white-space: pre-line; }
.gd-body { margin: auto 0; }
.gd-message[hidden], .gd-note[hidden], .gd-choices[hidden] { display: none; }
.gd-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 18px 22px; margin: 0 0 18px; text-align: left; }
/* open bracket frame like the game's option tiles: thin rules with a hook at the top-left and bottom-right */
.gd-choice {
  --c: rgba(214,203,180,.55);
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; cursor: pointer;
  color: var(--text); font: inherit; background: none; border: 0; border-radius: 4px; transition: background .12s;
}
.gd-choice::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) 12px 0 / calc(100% - 24px) 1px,
    linear-gradient(var(--c), var(--c)) 12px 100% / calc(100% - 24px) 1px,
    linear-gradient(var(--c), var(--c)) 0 8px / 1px calc(100% - 16px),
    linear-gradient(var(--c), var(--c)) 100% 8px / 1px calc(100% - 16px),
    linear-gradient(var(--c), var(--c)) 0 0 / 7px 1px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 7px 1px;
  background-repeat: no-repeat;
}
.gd-choice:hover { --c: rgba(224,181,103,.8); }
.gd-choice[aria-checked="true"] { --c: var(--gold-dim); background: linear-gradient(90deg, rgba(224,181,103,.12), rgba(224,181,103,.02)); }
.gd-choice[aria-checked="true"] .gd-choice-text b { color: var(--gold); }
.gd-choice:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.gd-diamond { position: relative; flex: none; width: 22px; height: 22px; }
.gd-diamond::before { content: ""; position: absolute; inset: 4px; transform: rotate(45deg); border: 1px solid var(--gold-dim); }
.gd-diamond::after {
  content: ""; position: absolute; inset: 7px; transform: rotate(45deg); background: var(--gold);
  box-shadow: 0 0 8px rgba(224,181,103,.7); opacity: 0; transition: opacity .12s;
}
.gd-choice[aria-checked="true"] .gd-diamond::before { border-color: var(--gold); }
.gd-choice[aria-checked="true"] .gd-diamond::after { opacity: 1; }
.gd-choice-text b { display: block; font-size: 16px; font-weight: 600; }
.gd-choice-text small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--text-dim); }
.gd-note { margin: 0 0 20px; font-size: 13.5px; color: var(--text-dim); }
.gd-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 26px; margin-top: 18px; }
.gd-btn {
  position: relative; min-width: 150px; height: 46px; padding: 0 36px; cursor: pointer; border-radius: 999px;
  font: 600 19px/1 var(--font); letter-spacing: .02em; color: #2a2418; border: 1px solid rgba(255,255,255,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 10px rgba(0,0,0,.45); transition: filter .12s, transform .08s;
}
.gd-btn::before, .gd-btn::after { content: "✦"; position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: .65; }
.gd-btn::before { left: 16px; }
.gd-btn::after { right: 16px; }
.gd-btn:hover { filter: brightness(1.07); }
.gd-btn:active { transform: translateY(1px); }
.gd-btn:focus-visible, .gd-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.gd-cancel { background: linear-gradient(180deg, #dedad1, #aaa69c); }
.gd-ok { background: linear-gradient(180deg, #f0cd8a, #cf9f4f); }
.gd.is-danger .gd-ok { color: #2a1410; background: linear-gradient(180deg, #ecaa9d, #c4695c); }
@media (prefers-reduced-motion: reduce) { .gd-overlay, .gd { animation: none; } }

/* ── Guide: topic list + article, after the game's Help screen ────────────── */
.help { display: grid; grid-template-columns: minmax(200px, 30%) minmax(0, 1fr); gap: 0; background: #34312d; border-radius: 4px; box-shadow: 0 6px 22px rgba(0,0,0,.35); }
.help-nav { display: grid; align-content: start; gap: 22px; padding: 18px 26px 22px 20px; }
.help-tab {
  position: relative; display: flex; align-items: center; min-height: 58px; padding: 6px 26px; text-align: left; cursor: pointer;
  font: 500 16.5px/1.25 var(--font); color: var(--text); background: linear-gradient(180deg, #2b2825, #24211e);
  border: 1px solid rgba(214,203,180,.35); border-radius: 9px;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.22), inset 0 0 0 4px rgba(214,203,180,.16);
  transition: border-color .12s, box-shadow .12s, background .12s;
}
/* sparkles sitting on the frame at both ends */
.help-tab::before, .help-tab::after {
  content: "✦"; position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; line-height: 1; color: rgba(214,203,180,.7);
}
.help-tab::before { left: 4px; }
.help-tab::after { right: 4px; }
.help-tab:hover { border-color: rgba(224,181,103,.65); }
.help-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.help-tab[aria-selected="true"] {
  border-color: #f3e3ae; background: linear-gradient(180deg, #3a3326, #2d271d);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.2), inset 0 0 0 4px rgba(224,181,103,.25), 0 0 0 1px rgba(255,236,170,.55), 0 0 16px rgba(255,214,120,.4);
}
.help-tab[aria-selected="true"]::after { content: "❯"; right: -20px; font-size: 20px; color: #f3e3ae; text-shadow: 0 0 8px rgba(255,214,120,.6); }

.help-pane { min-width: 0; padding: 22px 34px 30px 14px; }
.help-article { font-size: 15.5px; line-height: 1.7; color: var(--text); }
.help-article[hidden] { display: none; }
.help-article:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 6px; border-radius: 2px; }
.help-title { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.3; color: var(--text); }
/* dotted rule with a diamond in the middle */
.help-rule {
  position: relative; height: 9px; margin: 12px 0 20px;
  background: radial-gradient(circle, rgba(214,203,180,.5) 1.2px, transparent 1.7px) 0 50% / 11px 9px repeat-x;
}
.help-rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%) rotate(45deg);
  background: #d9cfb8; box-shadow: 0 0 0 7px #34312d;
}
.help-article.prose b { color: var(--text); }
.help-article.prose { color: var(--text-dim); }
.help-article p:first-of-type { margin-top: 0; }
.help-article ol, .help-article ul { gap: 12px; }
.help-article .code { margin-top: 0; }

/* ── Responsive ───────────────────────────── */
@media (max-width: 960px) {
  .stage { grid-template-columns: 1fr; gap: 22px; }
  .side { flex-direction: column; }
  .banner-body.tip { display: none; }
  .banner:nth-child(2) { display: none; }
  #panelCanvas { max-height: 300px; }
  .preview { grid-template-columns: minmax(0, 1fr); } /* controls drop below the preview on narrow screens */
}
@media (max-width: 640px) {
  .log-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .log-table, .log-table tbody { display: block; }
  .log-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; }
  .log-table td { display: block; padding: 0; width: auto; background-image: none !important; }
  .log-table .c-saved, .log-table .c-exp, .log-table .c-act { width: auto; }
  .log-table .c-saved { grid-area: 1 / 1; text-align: left; font-size: 13px; color: var(--text-dim); }
  .log-table .c-exp { grid-area: 1 / 2; text-align: right; font-size: 13px; }
  .log-table .c-exp:not(.none)::before { content: "Expires "; color: var(--text-faint); }
  .log-table tr.expired .c-exp::before { content: ""; }
  .log-table .c-line { grid-area: 2 / 1 / 3 / -1; margin: 6px 0 8px; }
  .bulk-bar { flex-wrap: wrap; gap: 8px 14px; }                 /* select-all and the count on one line, the buttons below if they do not fit */
  .bulk-actions { margin-left: auto; }
  .log-table .c-sel { grid-area: 3 / 1; width: auto; text-align: left; align-self: center; }
  .log-table .c-act { grid-area: 3 / 2; text-align: right; }
  .log-table .c-act .mini-btn:first-child { margin-left: 0; }
  .log-note { margin: 12px 14px 0; }
  .help { grid-template-columns: 1fr; }
  .help-nav { grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px 14px 6px; }
  .help-tab { min-height: 50px; padding: 6px 16px; font-size: 15px; }
  .help-tab[aria-selected="true"]::after { content: "✦"; right: 4px; font-size: 12px; color: rgba(214,203,180,.7); text-shadow: none; }
  .help-pane { padding: 14px 16px 22px; }
  .help-title { font-size: 21px; }
  .opt-row { grid-template-columns: minmax(0, 1fr) minmax(150px, 54%); }
  .opt-label { padding: 10px 12px; font-size: 16px; }
  .opt-control { padding-left: 22px; padding-right: 8px; }
  .opt-choice { font-size: 16px; gap: 6px; }
  .opt-value { padding-left: 0; }
  .gd { padding: 28px 22px 24px; }
  .gd-message { font-size: 16px; }
  .gd-btn { min-width: 120px; padding: 0 30px; }
  :root { --dock-h: 116px; }
  body { font-size: 14.5px; }
  .topbar { padding-left: 14px; padding-right: 14px; }
  .stage { padding-left: 14px; padding-right: 14px; }
  .player-sub, .spark { display: none; }
  .round-btn { width: 40px; height: 40px; }
  .topbar-right { gap: 8px; }
  .grid { gap: 18px; }
  .field { gap: 11px; }                                   /* phones: more air between title, box and hint than the tiles' framing leaves by default */
  .field input[type="text"] { font-size: 19px; padding-top: 9px; padding-bottom: 9px; }
  .field .slot input[type="text"] { padding-right: 68px; }
  .hp-row input { padding-top: 9px !important; padding-bottom: 9px !important; }
  .tile { padding: 24px 20px; }
  .seg { gap: 6px; grid-auto-columns: minmax(0, 1fr); }
  .seg-opt span { padding: 8px 6px 8px 8px; gap: 6px; font-size: 14px; }
  .seg-opt span::after { margin: 0; }
  .stepper { gap: 6px; }
  .step-btn { width: 38px; height: 38px; }
  .hp-row { flex-wrap: wrap; }
  .hp-row > input { flex: 1 1 40%; }
  .eq { display: none; }
  .pct { flex: 1 1 100%; justify-content: center; }
  .pct input { text-align: center !important; max-width: 90px; }
  .emblem { width: 56px; height: 56px; }
  .dock-btn.is-active .emblem { width: 68px; height: 68px; }
  .dock-btn.is-active .emblem .ico { width: 30px; height: 30px; }
  .ribbon { min-width: 64px; padding: 2px 10px; font-size: 12.5px; }
  .dock { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .player-name { font-size: 22px; }
}