/* Components. Everything sits on wooden boards (theme.css); the parts:
   controls, the page frame (top bar, live view, hero strip, tabs), the
   board itself, what goes on boards (carved slots, bars, lists, tables,
   fields), the parchment notes (hover cards, help), then each tab's own
   bits, and the touch layout, sheet, pop-up and toasts. */

/* ---- controls ---- */
label { display: block; font-size: var(--fs-s); color: var(--muted); }
input, select {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; color: var(--ink);
  background: var(--board-d); border: 2px solid var(--rim); border-radius: 2px; box-shadow: var(--carve-sm);
}
input::placeholder { color: var(--muted); opacity: .7; }
select option { background: var(--board-d); color: var(--ink); }
input:focus-visible, select:focus-visible, button:focus-visible, .slot:focus-visible, .hud-slot:focus-visible, .tip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button {
  font-size: var(--fs-m); padding: 7px 14px; cursor: pointer; color: var(--accent-ink);
  background: var(--accent); border: 2px solid var(--rim); border-radius: 3px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.15);
}
button:hover:not(:disabled) { background: var(--accent-hi); }
button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.gold { background: var(--gold-d); color: var(--gold-ink); }
button.gold:hover:not(:disabled) { background: var(--gold-hover); }
button.ghost { background: transparent; color: var(--ink); border-color: var(--muted); box-shadow: none; }
button.ghost:hover:not(:disabled) { background: rgba(255, 220, 160, .08); }
button.danger { background: var(--danger); color: var(--danger-ink); }
button.ok { background: var(--safe); color: var(--safe-ink); }
button.ok:hover:not(:disabled) { background: var(--safe-hi); }
button.small { font-size: var(--fs-s); padding: 3px 9px; }
/* a link that looks like a button (the top bar's Wiki) */
a.button { display: inline-flex; align-items: center; font-family: var(--pixel); text-decoration: none; border: 2px solid var(--rim); border-radius: 3px; }
a.button.ghost { color: var(--ink); border-color: var(--muted); }
a.button.ghost:hover { background: rgba(255, 220, 160, .08); }
a.button.gold { color: var(--gold-ink); background: var(--gold-d); padding: 7px 14px; }
a.button.gold:hover { background: var(--gold-hover); }
a.button.ghost:not(.small) { padding: 7px 14px; }
a.button.small { font-size: var(--fs-s); padding: 3px 9px; }
button.link { background: none; border: 0; box-shadow: none; padding: 0; color: inherit; font: inherit; text-decoration: underline dotted; }
button.link:hover:not(:disabled) { background: none; color: var(--gold); }
button.link[aria-pressed="true"] { color: var(--gold); text-decoration: underline; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row.fields { align-items: flex-end; gap: 12px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1; }
.badge { font: var(--fs-s) var(--pixel); color: var(--gold); }

/* ---- sign in ---- */
.login { max-width: 400px; padding-top: 10vh; text-align: center; }
.login .logo { font-size: var(--fs-xl); color: var(--gold); text-shadow: 3px 3px 0 var(--rim); margin: 0; }
/* The title is the logo (tools/gen_logo.py): the ribbon (80x38 art) at a
   whole 3x on the big titles, the one-line (155x21) at 1x in the game's bar,
   so the pixels stay square. */
.logo { display: flex; align-items: center; justify-content: center; }
.logo-img { display: block; width: 240px; height: 114px; image-rendering: pixelated; }
.topbar .logo-img { width: 155px; height: 21px; }
[data-ui="desktop"] .topbar .logo-img { width: 310px; height: 42px; } /* a whole 2x where there's room */
.tagline { color: var(--muted); margin: 4px 0 22px; }
.login .board { text-align: left; }
.login form { display: flex; flex-direction: column; gap: 8px; }
.auth-note { margin: 0; color: var(--ink); font-size: var(--fs-s); }
.oauth { display: flex; flex-direction: column; gap: 8px; }
.oauth button { width: 100%; }
.oauth-or { text-align: center; margin: 4px 0 0; color: var(--muted); font-size: var(--fs-s); }
/* the landing, for the invited: the dongle playing, the sign-in, how it plays */
.login.landing { max-width: 960px; padding-top: 5vh; }
.login.landing #auth { max-width: 400px; margin: 0 auto; }
.landing-demo { margin: 0 0 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dongle { position: relative; padding: 14px 18px; background: var(--device); border-radius: 10px; box-shadow: inset 0 0 0 2px var(--device-hi), 0 6px 0 var(--rim); }
.demo-gif { display: block; image-rendering: pixelated; background: var(--rim); }
.landing-more { margin-top: 24px; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.landing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
.feature-body { display: flex; gap: 12px; align-items: flex-start; }
.feature-body .hud-slot { flex: none; width: 56px; height: 56px; display: grid; place-items: center; }
.feature-body .hud-slot img { width: 48px; height: 48px; }
.feature-body p { margin: 0; font-size: var(--fs-s); }
.landing-classes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.landing-class { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--fs-s); color: var(--gold); }
.landing-cta { text-align: center; margin: 8px 0 0; }

/* ---- top bar: the name, and carved plaques for gold, the season, the dongle ---- */
.topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
/* Menu: on touch the bar's other options fold into a board under it. */
.topbar .logo { flex: 1; justify-content: flex-start; white-space: nowrap; font-size: var(--fs-l); margin: 0; color: var(--gold); text-shadow: 2px 2px 0 var(--rim); }
.pill, .gold-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 2px; font-size: var(--fs-s);
  color: var(--ink); background: var(--board-d); border: 2px solid var(--rim); box-shadow: var(--carve-sm); }
.gold-pill { color: var(--gold); font-size: var(--fs-m); }
.coin { width: 16px; height: 16px; image-rendering: pixelated; display: inline-block; vertical-align: middle; }

/* ---- the board: a wooden panel like the animation's quest HUD ---- */
.board { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; color: var(--ink);
  background: radial-gradient(circle, var(--gold) 2px, transparent 2.5px) 4px 4px / 8px 8px no-repeat,
    radial-gradient(circle, var(--gold) 2px, transparent 2.5px) calc(100% - 4px) 4px / 8px 8px no-repeat,
    radial-gradient(circle, var(--gold) 2px, transparent 2.5px) 4px calc(100% - 4px) / 8px 8px no-repeat,
    radial-gradient(circle, var(--gold) 2px, transparent 2.5px) calc(100% - 4px) calc(100% - 4px) / 8px 8px no-repeat, var(--board);
  border: 3px solid var(--gold-d); border-radius: 3px;
  box-shadow: 0 0 0 3px var(--rim), 0 5px 0 3px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 220, 160, .15), inset 0 -3px 0 rgba(0, 0, 0, .25); }
.board > p, .board > ul, .board > ol { margin: 0; }
/* its title in gold with the HUD's ink drop shadow; a note after it; actions and help on the right */
.board-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 26px; }
.board-head h2 { color: var(--gold); text-shadow: 2px 2px 0 var(--rim); }
.board-head .note { color: var(--muted); font-size: var(--fs-s); }
.board-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.board-actions label { display: flex; align-items: center; gap: 6px; }
.board-actions select { width: auto; margin: 0; padding: 3px 8px; }
/* a part of a board under a carved seam */
.seam, .kit-pick { border-top: 2px solid var(--board-d); box-shadow: 0 -1px 0 rgba(255, 220, 160, .1); padding-top: 12px; }
.kit-pick { display: flex; flex-direction: column; gap: 10px; }
.sub-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sub-head .help { margin-left: auto; }
.kit-label { display: block; margin-bottom: 6px; font: var(--fs-s) var(--pixel); color: var(--muted); }
.cols { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: stretch; }
.cols > .board, .bag-side, .hero-side { display: flex; flex-direction: column; }
.settings-side, .dongle-side { display: flex; flex-direction: column; gap: 22px; }
.bag-side > .board, .hero-side > .board { flex: 1; } /* side by side, the boards match heights */
@media (min-width: 720px) { .cols { grid-template-columns: 1fr 1fr; } .hero-cols { grid-template-columns: 3fr 2fr; } }

/* ---- the live view: the canvas on a board, carved in ---- */
.window { padding: 8px 12px 12px; gap: 6px; }
.window-bar { display: flex; justify-content: space-between; gap: 8px; padding: 0 8px; font: var(--fs-s) var(--pixel); }
.view-row { display: flex; justify-content: center; gap: 10px; }
.view-row.stacked { flex-direction: column; align-items: center; }
.view-clip { flex: none; max-width: 100%; overflow: hidden; border: 2px solid var(--rim); border-radius: 2px; box-shadow: 0 0 0 1px var(--board-lip); }
#view { width: auto; max-width: none; border: 0; border-radius: 0; box-shadow: none; } /* live.js sizes it; the clip cuts it at the panel */
/* the quest panel beside the scene (hud.js), as the dongle's HUD at the site's size */
.hud-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: var(--board-d); box-shadow: var(--carve); border-radius: 2px; }
.hud-side[hidden] { display: none; }
.view-row.stacked .hud-side { align-self: stretch; }
.hud-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: var(--fs-s) var(--pixel); color: var(--gold); }
.hud-foes { display: flex; align-items: baseline; gap: 8px; } .hud-foes b { font-size: var(--fs-l); color: var(--ink); } .hud-foes b.short { color: var(--down); }
.hud-line { display: flex; align-items: center; gap: 6px; font: var(--fs-s) var(--pixel); }
.hud-line .bar { flex: 1; }
.hud-bar.mid > div { --fill: var(--risky); }
.hud-bar.low > div { --fill: var(--deadly); }
.hud-row { display: flex; flex-wrap: wrap; gap: 4px; }
.hud-side .hud-slot { display: grid; place-items: center; width: 40px; height: 40px; }
.hud-side .hud-slot.empty { opacity: .6; }
#zone-name { color: var(--gold); text-shadow: 1px 1px 0 var(--rim); }
canvas { display: block; width: 100%; height: auto; margin: 0 auto; image-rendering: pixelated; border: 2px solid var(--rim); border-radius: 2px; box-shadow: 0 0 0 1px var(--board-lip); }

/* ---- hero strip: level, XP and stamina, what the hero is doing ---- */
.hero-strip { display: grid; grid-template-columns: auto auto 1fr; gap: 8px 16px; align-items: center; margin-top: 18px; }
.lvl { display: flex; flex-direction: column; align-items: center; }
.lvl-badge { display: grid; place-items: center; width: 48px; height: 48px; font-size: var(--fs-l); color: var(--gold); text-shadow: 2px 2px 0 var(--rim);
  background: linear-gradient(var(--gold), var(--gold)) 2px 2px / 2px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) calc(100% - 2px) 2px / 2px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 2px calc(100% - 2px) / 2px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) calc(100% - 2px) calc(100% - 2px) / 2px 2px no-repeat, var(--board-d);
  border: 3px solid var(--gold-d); border-radius: 2px; box-shadow: 0 0 0 3px var(--rim), var(--carve-sm); } /* a small plaque: the boards' trim and studs */
.xp { display: grid; gap: 6px; grid-column: 1 / -1; grid-row: 2; } /* narrow: the meters get a row of their own */
.meter { display: grid; grid-template-columns: 2em 1fr minmax(6.5em, auto); gap: 8px; align-items: center; }
.meter .muted { font: var(--fs-s) var(--pixel); }
.meter > .muted:last-child { text-align: right; }
.strip-end { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.status .dot { width: 10px; height: 10px; background: var(--accent-hi); box-shadow: 0 0 0 2px var(--rim); display: inline-block; }
.status.resting .dot { background: var(--risky); }
.status.camping .dot { background: var(--muted); }
.status .tip { cursor: default; }
.status-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-m); }
@media (min-width: 640px) { .status .tipcard { left: auto; right: 0; } .hero-strip { grid-template-columns: auto auto 1fr auto; } .xp { grid-column: auto; grid-row: auto; } }

/* ---- bars, carved in: XP, stamina, skills ---- */
/* like the HUD's (game.c hud_bar): an ink rim, the dark carved in, the lit part flat with a pixel of light on top and shade below */
.bar { height: 14px; background: var(--board-deep); border: 2px solid var(--rim); border-radius: 0; overflow: hidden; box-shadow: 0 0 0 1px var(--board-lip); }
.bar div { height: 100%; width: 0; --fill: #4fae49; background: var(--fill); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--fill) 60%, #fff), inset 0 -2px 0 color-mix(in srgb, var(--fill) 70%, #000); transition: width .5s; }
.bar.stamina { height: 12px; }
.bar.stamina > div { --fill: #4f8fe8; }
.bar.stamina.low > div { --fill: #e0a02a; }
.bar.skill { flex: 1; display: flex; height: 12px; }
.bar.skill > div { flex: none; --fill: var(--gold-d); }
.bar.skill > div + div { border-left: 2px solid var(--rim); }
.bar.skill > div.new { --fill: var(--gold); }

/* ---- tabs: wooden plaques; the one open is a board's ---- */
.tabs { display: flex; gap: 6px; margin: 20px 0 14px; overflow-x: auto; scrollbar-width: none; padding: 3px; }
.tabs button { flex: 1 1 0; min-width: max-content; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: clamp(var(--fs-m), 2.4vw, var(--fs-l)); padding: 10px 14px; color: var(--muted); background: var(--tab); border: 2px solid var(--rim); border-radius: 3px; box-shadow: inset 0 2px 0 rgba(255,220,160,.08), inset 0 -2px 0 rgba(0,0,0,.3); }
.tabs button:hover:not(:disabled) { background: var(--tab-hover); color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--gold); background: var(--board); border-color: var(--gold-d); box-shadow: 0 0 0 2px var(--rim), inset 0 2px 0 rgba(255,220,160,.15); text-shadow: 1px 1px 0 var(--rim); }
.tab { display: flex; flex-direction: column; gap: 22px; }

/* ---- sub-views on a board ---- */
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.subtabs button { color: var(--muted); background: transparent; border-color: rgba(201, 168, 120, .4); box-shadow: none; }
.subtabs button[aria-pressed="true"] { color: var(--ink); background: var(--board-d); border-color: var(--muted); box-shadow: var(--carve-sm); }
.subtabs.inline { display: inline-flex; }
/* The language switch (i18n.js langSwitch): on the sign-in page, the hero maker and the USB page */
.lang-switch { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.lang-switch button { color: var(--muted); }
.lang-switch button[aria-pressed="true"] { color: var(--gold); border-color: var(--gold-d); }
.login .lang-switch { margin: 0 0 14px; justify-content: center; }

/* ---- slots, carved in ---- */
.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slot { position: relative; width: 56px; height: 56px; display: grid; place-items: center; cursor: pointer; padding: 0;
  color: var(--ink); background: var(--board-d); border: 2px solid transparent; border-radius: 2px; box-shadow: var(--carve); }
.slot:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--board-hover); }
.slot img { width: 48px; height: 48px; image-rendering: pixelated; } /* item art is 16x16: whole multiples only */
.slot b, .hud-slot > b { position: absolute; right: 2px; bottom: 0; font: var(--fs-s) var(--pixel); color: #fff; text-shadow: 1px 1px 0 var(--rim), -1px 0 0 var(--rim), 0 -1px 0 var(--rim); }
.slot.r1 { border-color: var(--uncommon); } .slot.r2 { border-color: var(--rare); }
.slot.r3 { border-color: var(--epic); box-shadow: var(--carve), 0 0 8px var(--epic); }
.slot.empty { border: 2px dashed rgba(201, 168, 120, .3); cursor: pointer; }
.slot.empty span { color: var(--muted); font: var(--fs-m) var(--pixel); }
.slot[aria-pressed="true"] { outline: 2px solid var(--gold); outline-offset: 1px; }
.slot.locked, .slot.cant { opacity: .45; }
.slot.locked { cursor: not-allowed; }
.slotwrap { display: flex; flex-direction: column; align-items: center; gap: 2px; font: var(--fs-s) var(--pixel); color: var(--muted); }
/* a slot that only shows (collection, skills) */
.hud-slot { position: relative; width: 44px; height: 44px; justify-content: center; background: var(--board-d); border-radius: 2px; cursor: default; box-shadow: var(--carve); }
.hud-slot img { width: 32px; height: 32px; image-rendering: pixelated; }
.hud-slot.missing img { filter: grayscale(1) brightness(.35); opacity: .6; }
/* an icon in a small carved square, in tables and lists */
.mini { width: 32px; height: 32px; image-rendering: pixelated; vertical-align: middle; }
.class-weapons { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mini-slot { display: inline-grid; place-items: center; width: 38px; height: 38px; background: var(--board-d); border-radius: 2px; box-shadow: var(--carve-sm); }
.item-cell { display: inline-flex; align-items: center; gap: 8px; }
.kiticons { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; }
/* how much of a piece of gear is left */

/* ---- lists and tables on a board ---- */
ul.list, ol.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 7px 0; border-bottom: 1px solid rgba(0, 0, 0, .35); box-shadow: 0 1px 0 rgba(255, 220, 160, .05); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.list li:last-child { border-bottom: 0; box-shadow: none; }
.list li.died { color: var(--down); }
.list .row { margin: 0; }
ol.steps { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
th { text-align: left; font: var(--fs-s) var(--pixel); color: var(--muted); border-bottom: 2px solid var(--board-d); box-shadow: 0 1px 0 rgba(255, 220, 160, .08); padding: 4px 6px; }
td { padding: 6px; border-bottom: 1px solid rgba(0, 0, 0, .35); vertical-align: middle; }
tr.me td { background: color-mix(in srgb, var(--gold) 14%, transparent); }
td.num, th.num { text-align: right; font-family: var(--pixel); }
.rank-table { font-size: var(--fs-m); } .rank-table td.sorted { color: var(--gold); } .rank-table th .link { font: inherit; } /* the boards are the tab: read at the body's size */
.table-wrap { overflow-x: auto; }
.filters { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---- notes: hover cards and help, on parchment ---- */
.tip { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.tipcard, .help p { color: var(--parch-ink); background: var(--parch); border: 2px solid var(--parch-line); border-radius: 3px; box-shadow: 0 0 0 2px var(--rim), 0 4px 0 2px rgba(0,0,0,.3); }
.tipcard { display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 6; width: max-content; max-width: 230px; flex-direction: column; gap: 2px; padding: 8px 10px; font-size: var(--fs-s); line-height: 1.3; text-align: left; pointer-events: none; }
.tip:hover .tipcard, .tip:focus-within .tipcard { display: flex; }
.tipcard.right { left: auto; right: 0; }
.tipcard.wide { max-width: 340px; }
.tipcard .muted, .help p .muted { color: var(--parch-muted); }
.tipcard .short, .tipcard .down { color: var(--danger); }
.tipcard .up { color: var(--safe); }
.tipcard .r0 { color: var(--common); } .tipcard .r1 { color: var(--uncommon); } .tipcard .r2 { color: var(--rare); } .tipcard .r3 { color: var(--epic); }
.help { position: relative; }
/* the "?": a small carved plaque in the boards' gold trim */
.help summary { list-style: none; cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; font: var(--fs-m) var(--pixel); color: var(--gold); text-shadow: 2px 2px 0 var(--rim);
  background: var(--board-d); border: 2px solid var(--gold-d); border-radius: 2px; box-shadow: 0 0 0 2px var(--rim), var(--carve-sm); }
.help summary:hover { background: var(--board-hover); }
.help summary::-webkit-details-marker { display: none; }
.help[open] summary { background: var(--gold-d); color: var(--gold-ink); }
.help p { position: absolute; right: 0; top: 32px; z-index: 7; width: min(340px, 80vw); margin: 0; padding: 10px 12px; font-size: var(--fs-s); }

/* ---- Quests ---- */
.queue ol.list li > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
/* New quest: the quests on the left, the kit on the right, the gear to pick and the buttons across the bottom */
.board.quest-board { display: grid; grid-template-columns: 1fr; gap: 14px 28px; align-items: start; }
@media (min-width: 720px) { .board.quest-board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.quest-board > .board-head, .quest-board > .qb-foot { grid-column: 1 / -1; }
.qb-pick { display: flex; flex-direction: column; gap: 2px; min-width: 0; container-type: inline-size; } /* a grid item: let it shrink to the board */
/* a zone: its scenery (214x71 scene px) as wide as the column, at the
   smallest whole scale that covers it (2x, 3x, 4x: never stretched), its
   bottom part from the hills to the ground, the rest cut off on the right */
.zone-row { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; width: 100%; height: 76px; padding: 0 10px 8px; box-sizing: border-box;
  background: var(--board-d) no-repeat left 0 bottom -8px / 428px 142px; image-rendering: pixelated; box-shadow: var(--carve); border-radius: 2px; }
@container (min-width: 429px) { .zone-row { height: 108px; padding-bottom: 12px; background-size: 642px 213px; background-position: left 0 bottom -12px; } }
@container (min-width: 643px) { .zone-row { height: 140px; padding-bottom: 16px; background-size: 856px 284px; background-position: left 0 bottom -16px; } }
.zone-name { position: absolute; top: 6px; left: 8px; padding: 1px 6px; font: var(--fs-s) var(--pixel); color: var(--gold); background: var(--board-d); border: 1px solid var(--gold); border-radius: 2px; }
.zone-lock { padding: 2px 6px; font: var(--fs-s) var(--pixel); color: var(--ink); background: var(--board-d); border-radius: 2px; }
.zone-row.next { filter: grayscale(1); opacity: .6; }
.zicon { width: 32px; height: 32px; image-rendering: pixelated; display: block; }
.zicon.locked { opacity: .35; filter: grayscale(1); }
.tiers { display: flex; gap: 6px; }
.tier { position: relative; width: 34px; height: 34px; padding: 0; font: var(--fs-m) var(--pixel); color: var(--ink); background: var(--board-d); border: 2px solid transparent; border-radius: 2px; box-shadow: var(--carve); }
.tier:hover:not([aria-disabled="true"]) { background: var(--board-hover); }
.tier.selected { border-color: var(--gold); box-shadow: var(--carve), 0 0 6px var(--gold); }
.tier.trial { width: auto; padding: 0 10px; } /* an apprentice's trial: a name, not a tier number */
.tier[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.tier .mark { position: absolute; top: -7px; right: -7px; padding: 0 2px; font-size: var(--fs-s); line-height: 1.3; color: var(--board-d); background: var(--gold); border-radius: 2px; }
.skulls { letter-spacing: 1px; }
.brief { display: flex; flex-direction: column; gap: 3px; }
.brief .foe b { font-weight: 600; }
.kitline { display: flex; align-items: center; gap: 4px; }
/* a kit: the worn row and the backpack row, like the HUD's */
.kit-rows { display: flex; flex-direction: column; gap: 10px; }
.kit-line { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-pick h4 .muted { font: var(--fs-s) var(--body); letter-spacing: 0; }

/* ---- Hero: the bag and the skills ---- */
.kit-pick.sell h4 { display: flex; align-items: center; gap: 6px; }
.skills li { gap: 12px; }
.skills li.staged { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.skills .hud-slot { width: 40px; height: 40px; flex: none; }
.skill-icon { width: 32px; height: 32px; image-rendering: pixelated; display: block; } /* 16x16 art at 2x */
.skills .tipcard { left: calc(100% + 8px); top: 0; }

/* ---- Workshop ---- */
.recipe-parts { align-items: center; gap: 8px; }
.craft-grid { display: grid; grid-template-columns: repeat(3, max-content); gap: 6px; }
.craft-grid.small .slot { width: 44px; height: 44px; } .craft-grid.small .slot img { width: 32px; height: 32px; }
.recipe-parts .plus { font: var(--fs-m) var(--pixel); color: var(--muted); }

/* ---- Collection ---- */
.collection-slots { gap: 6px; }

/* ---- touch layout (data-ui="touch", set by ui.js) ----
   Details open in a sheet instead of on hover; tabs sit at the bottom;
   tap targets are bigger. */
:root[data-ui="touch"] .tipcard { display: none !important; }
:root[data-ui="touch"] body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
:root[data-ui="touch"] .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; gap: 4px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--board-d); border-top: 3px solid var(--gold-d); box-shadow: 0 -3px 0 var(--rim); }
.tab-icon { width: 24px; height: 24px; image-rendering: pixelated; } /* 8x8 art at 3x */
:root[data-ui="touch"] .tabs button { min-width: 0; min-height: 44px; padding: 6px 4px; }
:root[data-ui="touch"] .recipe-maker { scroll-margin-bottom: 72px; } /* clear of the tab bar when brought into view */
:root[data-ui="touch"] .tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root[data-ui="touch"] .tab { margin-top: 22px; }
:root[data-ui="touch"] .tier { width: 44px; height: 44px; }
:root[data-ui="touch"] .slot img { width: 48px; height: 48px; }
:root[data-ui="touch"] .zicon { width: 48px; height: 48px; }

/* the sheet: a board from the bottom with what was tapped and its actions */
.sheet-back { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.5); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 70vh; overflow: auto;
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 6px 6px 0 0; }
.sheet-card { display: flex; flex-direction: column; gap: 4px; }
.sheet-card b { font-size: var(--fs-m); }
.sheet-card .hint { display: none; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet-actions button { flex: 1 1 auto; min-height: 44px; }

/* the confirmation pop-up (ui.js confirmPopup): a big board */
.popup-back { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); }
.popup { position: fixed; z-index: 51; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px));
  padding: 40px 32px 32px; text-align: center; align-items: center; }
.popup-q { margin: 0 0 18px; font: var(--fs-l)/1.4 var(--pixel); display: flex; flex-direction: column; align-items: center; gap: 6px; text-shadow: 2px 2px 0 var(--rim); }
.popup-q p { margin: 0; }
.popup-icon { width: 96px; height: 96px; image-rendering: pixelated; padding: 8px; background: var(--board-d); box-shadow: var(--carve); border-radius: 3px; margin-bottom: 8px; box-sizing: content-box; }
.popup-gold { display: inline-flex; align-items: center; gap: 10px; }
.gold-amount { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); }
td .gold-amount { justify-content: flex-end; }
.popup .coin { width: 32px; height: 32px; }
.popup-actions { display: flex; gap: 12px; justify-content: center; }
.popup-actions button { min-width: 150px; min-height: 56px; font-size: var(--fs-m); }

/* toasts: small boards */
.toasts { position: fixed; right: 16px; bottom: 16px; left: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; z-index: 60; }
.toast { pointer-events: auto; max-width: 360px; display: flex; gap: 8px; align-items: center; font-family: var(--pixel); color: var(--ink);
  background: var(--board); border: 2px solid var(--gold-d); border-radius: 3px; padding: 8px 12px; box-shadow: 0 0 0 2px var(--rim), 0 4px 0 2px rgba(0,0,0,.4); animation: toast-in .25s ease-out; }
.toast.bad { border-color: var(--danger); }
.toast.r2 { border-color: var(--rare); } .toast.r3 { border-color: var(--epic); }
.toast .mini { background: var(--board-d); box-shadow: var(--carve-sm); padding: 2px; box-sizing: content-box; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }
:root[data-ui="touch"] .toasts { bottom: calc(76px + env(safe-area-inset-bottom)); align-items: stretch; z-index: 35; }
:root[data-ui="touch"] .toast { max-width: none; }
/* Under the sheet, but over a pop-up: its refusals must be seen. */
:root[data-ui="touch"]:has(.popup) .toasts { z-index: 60; }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } .bar div { transition: none; } }

/* ---- heroes: a class's sprite strip (web/heroes/, ui.js heroPic), played
   with steps: the idle row, or the attack row while .attack ---- */
.hero-pic { display: inline-block; flex: none; image-rendering: pixelated; background-repeat: no-repeat; background-position: 0 0;
  animation: hero-frames .9s steps(var(--n)) infinite; }
.hero-pic.attack { --n: var(--an); --end: var(--aend); background-position-y: var(--arow); animation-duration: .75s; }
@keyframes hero-frames { from { background-position-x: 0; } to { background-position-x: var(--end); } }
@media (prefers-reduced-motion: reduce) { .hero-pic { animation: none; } }
/* a stage carved in the board for a hero to stand on */
.class-stage { position: relative; display: block; width: 112px; height: 68px; overflow: hidden; background: var(--board-d); box-shadow: var(--carve); border-radius: 2px; }
.class-stage.big { width: 260px; height: 124px; max-width: 100%; }
.who-pic { position: relative; display: block; width: 56px; height: 56px; overflow: hidden; background: var(--board-d); box-shadow: var(--carve); border-radius: 2px; }
.traits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-s); }
.traits .up { color: var(--up); } .traits .down { color: var(--down); }
.tipcard .traits .up { color: var(--safe); } .tipcard .traits .down { color: var(--danger); }

/* ---- the hero maker: the first thing a new hero (and every new season) sees ---- */
.maker { max-width: 880px; padding-top: 4vh; display: flex; flex-direction: column; gap: 18px; }
.maker > .logo { font-size: var(--fs-xl); color: var(--gold); text-shadow: 3px 3px 0 var(--rim); margin: 0; text-align: center; }
.maker > .tagline { text-align: center; margin: -10px 0 4px; }
.class-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .class-grid { grid-template-columns: repeat(4, 1fr); } }
.class-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; color: var(--ink);
  background: transparent; border: 2px solid transparent; box-shadow: none; }
.class-card:hover:not(:disabled) { background: rgba(255, 220, 160, .06); }
.class-card.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 40%, transparent); }
.class-card b { color: var(--gold); text-shadow: 1px 1px 0 var(--rim); }
.class-trade { display: flex; flex-direction: column; align-items: center; font-size: var(--fs-s); line-height: 1.25; min-height: 2.5em; }
.class-trade .up { color: var(--up); } .class-trade .down { color: var(--down); }
.class-detail { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.class-words { display: flex; flex-direction: column; gap: 6px; min-width: 200px; flex: 1; }
.class-words h3 { color: var(--gold); font-size: var(--fs-m); text-shadow: 2px 2px 0 var(--rim); }
.class-words p { margin: 0; }
.maker-form { display: flex; flex-direction: column; gap: 10px; }
.maker-form .row.fields { gap: 12px 16px; flex-direction: column; align-items: stretch; }
@media (min-width: 640px) { .maker-form .row.fields { flex-direction: row; align-items: flex-start; } } /* tops lined up: the nickname has its check under it */
.maker-form p { margin: 0; }
button.big { font-size: var(--fs-m); padding: 12px 24px; }

/* the hero in the strip: picture and name */
.who { display: flex; }
.who .tip { flex-direction: column; gap: 4px; cursor: default; }
.who-name { font: var(--fs-s) var(--pixel); color: var(--gold); text-shadow: 1px 1px 0 var(--rim); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Guide ---- */
.guide-cols { align-items: start; }
.guide-cols > .board { height: auto; }
.guide-class { display: flex; gap: 14px; align-items: center; }
.guide-class p { margin: 0 0 6px; }
.guide-classes { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- the tour (tour.js): the page dimmed but for a gold ring, and a note ---- */
.tour-back { position: fixed; inset: 0; z-index: 70; }
.tour-ring { position: fixed; z-index: 71; pointer-events: none; border: 3px solid var(--gold); border-radius: 4px;
  box-shadow: 0 0 0 3px var(--rim), 0 0 0 100vmax rgba(10, 6, 3, .66); transition: left .25s, top .25s, width .25s, height .25s; }
.tour-card { position: fixed; z-index: 72; width: min(340px, calc(100vw - 16px)); display: flex; flex-direction: column; gap: 6px; padding: 12px 14px;
  color: var(--parch-ink); background: var(--parch); border: 2px solid var(--parch-line); border-radius: 3px; box-shadow: 0 0 0 2px var(--rim), 0 4px 0 2px rgba(0,0,0,.3); }
.tour-card.center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.tour-card b { font: var(--fs-m) var(--pixel); }
.tour-card p { margin: 0; font-size: var(--fs-s); }
.tour-count { font: var(--fs-s) var(--pixel); color: var(--parch-muted); }
.tour-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.tour-card button.ghost { color: var(--parch-ink); border-color: var(--parch-line); }
@media (prefers-reduced-motion: reduce) { .tour-ring { transition: none; } }
/* no invite: just the note that the game is being made */
#auth .error:empty { display: none; }
.nick-check { display: block; min-height: 1.3em; margin-top: 4px; font-size: var(--fs-s); color: var(--muted); }
.nick-check.up { color: var(--up); } .nick-check.down { color: var(--down); }
/* a button not ready yet (aria-disabled, so it still shows its card on hover) */
button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
button.gold[aria-disabled="true"]:hover { background: var(--gold-d); }
.begin-tip { align-items: flex-start; }
.begin-tip .tipcard { top: auto; bottom: calc(100% + 8px); } /* the page ends below it: open upward */
.popup-q .popup-small { font-size: var(--fs-s); text-shadow: none; }
.popup-q label { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; text-shadow: none; }
.popup-q .class-stage { margin-bottom: 6px; }
.popup-q .popup-user { margin-top: 8px; } .popup-q .popup-user b { display: block; font-size: var(--fs-xl); color: var(--gold); word-break: break-all; }
.board > p.up { color: var(--up); margin: 0; }
label.check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-m); color: var(--ink); cursor: pointer; }
label.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold-d); }
.pair-form .row.fields { align-items: flex-end; }

/* ---- the dongle page (dongle.html): over USB ---- */
.usb-facts li > span:first-child { color: var(--muted); min-width: 5em; }
.usb-facts li > :nth-child(2) { flex: 1; }
.usb-facts .up { color: var(--up); } .usb-facts .down { color: var(--down); }
.usb-code { font: var(--fs-l) var(--pixel); color: var(--gold); letter-spacing: 2px; }
.usb-nets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.maker-help { text-align: center; margin: 0; }
/* ---- the tutorial (apprentice.js): a pulsing ring on what to click, the page dimmed round a note's part, the live view alone during a trial ---- */
.guide-ring { position: fixed; z-index: 71; pointer-events: none; border: 3px solid var(--gold); border-radius: 4px; box-shadow: 0 0 0 3px var(--rim); }
.guide-ring.click { animation: guide-pulse 1s ease-in-out infinite; }
.guide-ring.note, .guide-ring.last, .guide-ring.prize { box-shadow: 0 0 0 3px var(--rim), 0 0 0 100vmax rgba(10, 6, 3, .6); }
.guide-ring.last, .guide-ring.prize { border: 0; }
.guide-ring.focus { box-shadow: 0 0 0 3px var(--rim), 0 0 0 100vmax rgba(5, 3, 2, .9); }
@keyframes guide-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--rim), 0 0 0 0 var(--gold); } 50% { box-shadow: 0 0 0 3px var(--rim), 0 0 18px 8px var(--gold); } }
@media (prefers-reduced-motion: reduce) { .guide-ring.click { animation: none; box-shadow: 0 0 0 3px var(--rim), 0 0 12px 6px var(--gold); } }
.guide-card { z-index: 72; }
.guide-bar { position: fixed; z-index: 76; top: 0; left: 0; right: 0; display: flex; justify-content: center; padding: 8px 16px; background: var(--board-d); box-shadow: 0 2px 0 var(--rim); }
.guide-bar button { width: min(480px, 100%); min-height: 52px; font-size: var(--fs-m); }
.guiding body { padding-top: 68px; }
.guide-focus { overflow: hidden; }
.guide-prizes { display: flex; flex-direction: column; gap: 8px; }
.guide-prizes button { justify-content: center; color: var(--parch-ink); border-color: var(--parch-line); }
.guide-prizes button[aria-pressed="true"] { border-color: var(--gold-d); box-shadow: 0 0 0 3px var(--gold); }
.guiding .tipcard { z-index: 73; }
.guiding .sheet-back { z-index: 74; } .guiding .sheet { z-index: 75; }
.guiding .popup-back { z-index: 77; } .guiding .popup { z-index: 78; }
.guiding .toasts { z-index: 79; }
/* while touring, what the ringed part opens shows over the dimming */
.touring .tipcard { z-index: 73; }
.touring .sheet-back { z-index: 74; } .touring .sheet { z-index: 75; }
:root[data-ui="touch"] .craft-grid.small .slot img { width: 32px; height: 32px; }

/* ---- the wiki (wiki.html, wiki.js): the same boards, a page per section ---- */
.wiki-back { margin-left: auto; font-size: var(--fs-s); }
.wiki-link { font-size: var(--fs-s); align-self: center; }
.wiki-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 18px; }
.wiki-nav a { padding: 5px 12px; font-size: var(--fs-s); color: var(--muted); text-decoration: none; background: var(--tab); border: 2px solid var(--rim); border-radius: 3px; }
.wiki-nav a:hover { background: var(--tab-hover); color: var(--ink); }
.wiki-nav a[aria-current="page"] { color: var(--gold); background: var(--board); border-color: var(--gold-d); text-shadow: 1px 1px 0 var(--rim); }
.wiki .board p { margin: 0 0 10px; }
.wiki-chips { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.wiki-chip.tip { position: relative; display: inline-flex; flex-direction: row; align-items: center; gap: 6px; text-decoration: none; font-size: var(--fs-s); }
.wiki-chip img { width: 32px; height: 32px; image-rendering: pixelated; }
.wiki-chip .r0 { color: var(--ink); } .wiki-chip .r1 { color: var(--r1); } .wiki-chip .r2 { color: var(--r2); } .wiki-chip .r3 { color: var(--r3); }
.wiki-zone-head { display: flex; gap: 14px; align-items: flex-start; }
.wiki-zone-head .hud-slot { flex: none; width: 56px; height: 56px; display: grid; place-items: center; }
.wiki-zone-head .hud-slot img { width: 48px; height: 48px; }
.wiki-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 10px; font-size: var(--fs-s); }
.wiki-facts dt { color: var(--muted); }
.wiki-facts dd { margin: 0; }
@media (max-width: 560px) { .wiki-facts { grid-template-columns: 1fr; gap: 2px; } .wiki-facts dd { margin-bottom: 6px; } }
.wiki-table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.wiki-table th { text-align: left; color: var(--muted); font-weight: normal; padding: 4px 8px; border-bottom: 2px solid var(--board-deep); }
.wiki-table td { padding: 6px 8px; vertical-align: middle; border-bottom: 1px solid var(--board-d); }
.wiki-table .num { text-align: right; }
.wiki-table b.r0 { color: var(--ink); } .wiki-table b.r1 { color: var(--r1); } .wiki-table b.r2 { color: var(--r2); } .wiki-table b.r3 { color: var(--r3); }
.wiki-recipes, .wiki-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.wiki-recipe h3 { margin: 0 0 10px; }
.wiki-recipe-body { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.wiki-grid .slot { cursor: default; }
.wiki-skills li { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--board-d); text-align: left; }
.wiki-skills .hud-slot { flex: none; width: 40px; height: 40px; display: grid; place-items: center; }
.wiki-skills .skill-icon { width: 32px; height: 32px; }

/* ---- feedback (feedback.js): a form in the pop-up ---- */
.popup.feedback-popup { text-align: left; align-items: stretch; padding: 24px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.feedback-popup h2 { color: var(--gold); text-shadow: 2px 2px 0 var(--rim); }
.feedback-popup p { margin: 0; }
.feedback-popup textarea { width: 100%; resize: vertical; font: var(--fs-s)/1.5 var(--pixel); color: var(--ink); background: var(--board-d); border: 2px solid var(--rim); border-radius: 2px; box-shadow: var(--carve); padding: 10px; }
.feedback-actions { display: flex; align-items: center; gap: 10px; font-size: var(--fs-s); }
.wiki-sold { margin: 0 0 8px; font-size: var(--fs-s); color: var(--gold); display: flex; align-items: center; gap: 6px; }
.market-sold tr.dim, tr.dim { opacity: .6; }
.recipe-in { display: inline-flex; align-items: center; gap: 1px; font-size: var(--fs-s); margin-right: 6px; }
.wiki code, .wiki-cmd { font-size: .8em; }
.wiki-cmd { margin: 0 0 10px; padding: 8px 10px; background: var(--board-d); box-shadow: var(--carve-sm); border-radius: 2px; white-space: pre-wrap; word-break: break-all; }
.wiki-steps { margin: 0 0 10px; padding-left: 22px; }
.wiki-steps li { margin: 0 0 8px; }
.wiki-list li { justify-content: flex-start; }
.wiki-wiring { margin: 0 0 10px; }
.wiki-wiring img { display: block; max-width: 100%; height: auto; }
.case3d-canvas { display: block; width: 100%; height: 360px; touch-action: none; cursor: grab; background: var(--board-d); box-shadow: var(--carve-sm); border-radius: 2px; }
.case3d-canvas:active { cursor: grabbing; }
.case3d-parts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 10px 0 6px; }
@media (max-width: 600px) { .case3d-canvas { height: 260px; } }
.wiki-table .mark { text-align: center; color: var(--up); width: 1%; white-space: nowrap; }

/* ---- the quest log (questlog.js) ---- */
.ql-head { display: flex; gap: 12px; align-items: center; }
.ql-map { container-type: inline-size; } /* the zone-row picks its scale by this width */
@container (min-width: 857px) { .ql-map .zone-row { background-size: 1284px 426px; background-position: left 0 bottom -24px; } } /* wider than the chooser gets: 6x */
.ql-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.ql-cols h3 { color: var(--gold); margin: 0 0 8px; }
.ql-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.ql-row .hud-slot { width: 40px; height: 40px; display: grid; place-items: center; }
.ql-row .hud-slot img { width: 32px; height: 32px; image-rendering: pixelated; }
.ql-row .hud-slot.empty { opacity: .5; }
.ql-table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.ql-table th { text-align: left; color: var(--muted); font-weight: normal; padding: 3px 6px; border-bottom: 2px solid var(--board-deep); }
.ql-table td { padding: 4px 6px; border-bottom: 1px solid var(--board-d); }
.ql-table .num { text-align: right; }
.ql-table tr.boss td { color: var(--warn); }
.quest-log .board-actions { display: flex; gap: 6px; }
.quest-log p { margin: 0 0 6px; font-size: var(--fs-s); }
.foe-cell { flex-direction: row; gap: 6px; align-items: center; }
.foe-stage { position: relative; display: block; width: 48px; height: 42px; overflow: hidden; background: var(--board-d); box-shadow: var(--carve); border-radius: 2px; flex: none; }
.foe-boss { font-size: var(--fs-s); color: var(--warn); }

/* messages: the top bar's button and its board */
.mail { position: relative; padding-left: 8px; padding-right: 8px; }
.mail-icon { display: block; width: 16px; height: 16px; image-rendering: pixelated; }
.msg-collect { align-self: center; }
.msg-renew { align-self: flex-start; }
.unread { position: absolute; top: -8px; right: -8px; min-width: 18px; padding: 1px 4px; font: var(--fs-s) var(--pixel); line-height: 1.3; color: var(--board-d); background: var(--gold); border-radius: 2px; }
.messages-popup { width: min(560px, calc(100vw - 32px)); }
.messages-popup h3 { color: var(--gold); margin: 8px 0 0; }
.msg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.msg { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; background: var(--board-d); box-shadow: var(--carve); border-radius: 2px; font-size: var(--fs-s); }
.msg.new { border-left: 3px solid var(--gold); cursor: pointer; } /* a click reads it */
.msg.step.next { border-left: 3px solid var(--gold); }
.msg.step.later { opacity: .5; }
.msg.step.done { opacity: .75; }
.prizes { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.prizes .row { flex-wrap: wrap; }
.msg.done { opacity: .6; }
.msg-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.msg-when { white-space: nowrap; }
.msg-tier { min-width: 56px; color: var(--gold); }
.msg-reward { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--up); }
.msg-item { display: inline-flex; align-items: center; gap: 2px; }
.queue .repeat[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }

/* the supporter's heart by a name (ui.js badge) */
.badge { width: 16px; height: 16px; image-rendering: pixelated; vertical-align: -3px; margin-left: 4px; }

/* Support: the packs, skins and checkout (support.js) */
.support-popup { width: min(760px, calc(100vw - 32px)); }
.support-popup.sup-narrow { width: min(480px, calc(100vw - 32px)); }
/* the Pix amount: the window fits it, so Back and Close stay by it */
.support-popup:has(.sup-donate) { width: fit-content; min-width: min(360px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
.sup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.support-popup h3 { color: var(--gold); margin: 10px 0 0; }
.sup-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.sup-pack { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--board-d); box-shadow: var(--carve); border-radius: 2px; font-size: var(--fs-s); }
.sup-pack.mine { outline: 2px solid var(--gold); }
.sup-pack ul { margin: 0; padding-left: 16px; color: var(--muted); flex: 1; }
.sup-price { color: var(--gold); }
.sup-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.sup-skin { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; background: var(--board-d); box-shadow: var(--carve); border-radius: 2px; font-size: var(--fs-s); }
.sup-skin.mine { outline: 2px solid var(--gold); }
.sup-skin .class-stage { position: relative; width: 112px; height: 72px; }
.sup-form { display: flex; flex-direction: column; gap: 10px; }
.sup-form .row { display: flex; gap: 10px; flex-wrap: wrap; }
.sup-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-s); color: var(--muted); }
.sup-form .row .sup-field { flex: 1 1 180px; min-width: 0; }
.sup-form .row .sup-field:has(.sup-uf) { flex: 0 0 5em; }
.sup-form input { font: var(--fs-m) var(--pixel); height: 44px; box-sizing: border-box; color: var(--ink); background: var(--board-d); border: 2px solid var(--rim); padding: 0 10px; letter-spacing: .04em; }
.sup-checkout input { font: var(--fs-s) var(--pixel); color: var(--ink); background: var(--board-d); border: 2px solid var(--rim); padding: 6px 8px; }
.sup-checkout { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sup-checkout .row { width: 100%; }
.sup-checkout .row input { flex: 1; min-width: 0; }
.sup-qr { width: 220px; height: 220px; background: #fff; padding: 8px; border-radius: 2px; }
.sup-pane { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sup-donate { display: flex; flex-direction: column; gap: 8px; }
.sup-donate .row { flex-wrap: wrap; align-items: center; }
.sup-donate input { width: 8em; font: var(--fs-s) var(--pixel); color: var(--ink); background: var(--board-d); border: 2px solid var(--rim); padding: 6px 8px; }
.sup-way { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sup-ways { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
.sup-way-btn { flex: 1 1 160px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px; }
.sup-way-btn img { image-rendering: pixelated; }
.sup-kofi-email { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.sup-kofi-email input { flex: 1; min-width: 0; }
.sup-paid { margin: 0; padding-left: 16px; font-size: var(--fs-s); color: var(--muted); }
.sup-banner { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: var(--fs-s); }

/* the legal pages (/termos, /privacidade) */
.legal { max-width: 820px; }
.legal-text { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-s); line-height: 1.6; }
.legal-text h3 { color: var(--gold); margin: 10px 0 0; }
.legal-text p, .legal-text ul { margin: 0; }
.legal-links { text-align: center; margin: 4px 0 0; }
.legal-lang { font-size: var(--fs-s); margin-left: 12px; }
.terms-check { margin-top: 6px; }
.sup-via { margin: 0; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.pay-logo { height: 28px; width: auto; flex: none; }
.pay-mask { background: var(--ink); mask: no-repeat center / contain; -webkit-mask: no-repeat center / contain; }
.pay-pagarme { height: 20px; width: 74px; mask-image: url(/brand/pay/pagarme.svg); -webkit-mask-image: url(/brand/pay/pagarme.svg); }
.sup-via b { color: var(--gold); }
.sup-summary { background: var(--board-d); box-shadow: var(--carve); padding: 8px 10px; }
.sup-summary p, .sup-summary ul { margin: 0; }
.sup-summary ul { padding-left: 18px; margin-top: 4px; }
.sup-form .mp-field { font: var(--fs-m) var(--pixel); height: 44px; box-sizing: border-box; background: var(--board-d); border: 2px solid var(--rim); border-radius: 2px; box-shadow: var(--carve-sm); padding: 0 8px; color: var(--ink); }
/* Mercado Pago's Secure Fields: its iframe is see-through only when its
   color-scheme is its page's (light), not ours (dark). */
.sup-form .mp-field iframe { display: block; width: 100%; height: 100% !important; color-scheme: light !important; }