/* Lampwick: printed-ledger look. Paper and ink by day, lamplight by night. */
:root {
  --paper: #efe6d2; --paper-2: #e6dbc3; --card: #f6efe0;
  --ink: #2a2118; --ink-2: #5a4b3a; --muted: #6b5c48; --rule: #cdbf9f; --rule-strong: #8f7e63;
  --rust: #9c3d1f; --verdigris: #2f6b5e; --ochre: #7f5b0e; --indigo: #2d4f8a; --plum: #7b3f6e;
  --good: #2f6b5e; --bad: #9c3d1f;
  --hp: #9c3d1f; --focus: #2d4f8a; --xp: #9a6f14;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --display: 'IM Fell English', 'Source Serif 4', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --pad: 16px; --complete: #2e7d32;
  color-scheme: light;
}
/* dark: follows the device unless the player picked Light or Dark in Settings (data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --complete: #6cc47e;
    --paper: #1b1712; --paper-2: #231e17; --card: #211c15;
    --ink: #e8dcc4; --ink-2: #c4b597; --muted: #948468; --rule: #3d3428; --rule-strong: #6d5f49;
    --rust: #d0663f; --verdigris: #5fa592; --ochre: #d3a648; --indigo: #7f9fd6; --plum: #c58ab7;
    --good: #5fa592; --bad: #d0663f; --hp: #c95a35; --focus: #6c8fcf; --xp: #c99a38;
    color-scheme: dark;
  }
}
:root[data-theme="dark"], :root[data-fx] {
    --complete: #6cc47e;
}
:root[data-theme="dark"] {
    --paper: #1b1712; --paper-2: #231e17; --card: #211c15;
    --ink: #e8dcc4; --ink-2: #c4b597; --muted: #948468; --rule: #3d3428; --rule-strong: #6d5f49;
    --rust: #d0663f; --verdigris: #5fa592; --ochre: #d3a648; --indigo: #7f9fd6; --plum: #c58ab7;
    --good: #5fa592; --bad: #d0663f; --hp: #c95a35; --focus: #6c8fcf; --xp: #c99a38;
    color-scheme: dark;
}
/* coloured themes (1.13.1), picked in Settings; each one is dark */
:root[data-theme="fire"] {
    --paper: #1d0e0b; --paper-2: #29140f; --card: #24110d;
    --ink: #f5e1d6; --ink-2: #dcb9a8; --muted: #b08877; --rule: #4d2a20; --rule-strong: #87503c;
    --rust: #ff7043; --verdigris: #8cc77a; --ochre: #f2b544; --indigo: #f59b6e; --plum: #ef7fa6;
    --good: #8cc77a; --bad: #ff5a3c; --hp: #f0432a; --focus: #ffa53d; --xp: #f5c542;
    color-scheme: dark;
}
:root[data-theme="ocean"] {
    --paper: #0b1a26; --paper-2: #102434; --card: #0e202e;
    --ink: #dcedf5; --ink-2: #a8c8d8; --muted: #7d9eb0; --rule: #1f3b4d; --rule-strong: #3f6b82;
    --rust: #ff8a70; --verdigris: #4fd3b5; --ochre: #e9c45c; --indigo: #6fb4ff; --plum: #c49cf2;
    --good: #4fd3b5; --bad: #ff7a66; --hp: #f2604f; --focus: #4fa8ff; --xp: #e9c45c;
    color-scheme: dark;
}
:root[data-theme="forest"] {
    --paper: #0e1a11; --paper-2: #142419; --card: #122016;
    --ink: #e2eed9; --ink-2: #b7cda9; --muted: #8aa47d; --rule: #243d29; --rule-strong: #4a6e4f;
    --rust: #e88a52; --verdigris: #72d394; --ochre: #d9bd52; --indigo: #8fb8e8; --plum: #d39ac4;
    --good: #72d394; --bad: #ef7356; --hp: #d9573c; --focus: #6fa8dc; --xp: #d9bd52;
    color-scheme: dark;
}
:root[data-theme="snow"] {
    --paper: #0b1420; --paper-2: #111e2f; --card: #0e1929;
    --ink: #eaf3fb; --ink-2: #c3d3e4; --muted: #8fa3ba; --rule: #22344c; --rule-strong: #4a6585;
    --rust: #ff9a8a; --verdigris: #7fe0d0; --ochre: #f4dc8a; --indigo: #9cc9ff; --plum: #d0b4ff;
    --good: #7fe0d0; --bad: #ff8a7a; --hp: #f06b5e; --focus: #8cc8ff; --xp: #f4ecc4;
    color-scheme: dark;
}
:root[data-theme="xmas"] {
    --paper: #0e1c13; --paper-2: #14271a; --card: #112217;
    --ink: #f5ecd9; --ink-2: #dccfb2; --muted: #a89c7f; --rule: #24402c; --rule-strong: #4c7556;
    --rust: #ff6b5a; --verdigris: #7fd49a; --ochre: #f2c14e; --indigo: #8ec5ff; --plum: #f19ad0;
    --good: #7fd49a; --bad: #ff6b5a; --hp: #e8463a; --focus: #6fb0e8; --xp: #f2c14e;
    color-scheme: dark;
}
:root[data-theme="dusk"] {
    --paper: #17121f; --paper-2: #201a2b; --card: #1c1626;
    --ink: #ece2f5; --ink-2: #c9b8dc; --muted: #9c8bb0; --rule: #352b45; --rule-strong: #64537c;
    --rust: #ff8fa3; --verdigris: #6fd6c0; --ochre: #f0c062; --indigo: #9fa8ff; --plum: #d79cf5;
    --good: #6fd6c0; --bad: #ff7b8f; --hp: #ef5d74; --focus: #8f9bff; --xp: #f0c062;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.5 var(--serif); }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: 2.2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.2rem; }
p { margin: 0 0 .8em; }
a { color: var(--rust); }
.boot, .noscript { padding: 40px var(--pad); font-family: var(--display); font-size: 1.3rem; text-align: center; }
.muted { color: var(--muted); }
.mono, .num { font-family: var(--mono); font-size: .86em; }
.small { font-size: .85rem; }
.ico { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: .45em; padding: .45em .9em; border: 1px solid var(--ink); background: transparent;
  cursor: pointer; font-variant: small-caps; letter-spacing: .04em; font-size: .95rem; line-height: 1.2; min-height: 36px; }
@media (hover: hover) { .btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); } }
.btn:focus-visible, .tab:focus-visible, .zone:focus-visible, .act:focus-visible, .row-btn:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .btn.primary:hover:not(:disabled) { background: var(--rust); border-color: var(--rust); } }
.btn.danger { border-color: var(--rust); color: var(--rust); }
@media (hover: hover) { .btn.danger:hover:not(:disabled) { background: var(--rust); color: var(--paper); } }
.btn.small { padding: .25em .6em; min-height: 30px; font-size: .85rem; }
.btn.ghost { border-color: transparent; }
@media (hover: hover) { .btn.ghost:hover:not(:disabled) { border-color: var(--ink); background: transparent; color: var(--ink); } }
.btn.on { background: var(--verdigris); border-color: var(--verdigris); color: var(--paper); }
kbd { font-family: var(--mono); font-size: .72rem; border: 1px solid currentColor; padding: 0 .3em; opacity: .7; }

/* layout */
.shell { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad) 96px; }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 14px 0 10px; border-bottom: 3px double var(--rule-strong); }
.brand { font-family: var(--display); font-size: 1.6rem; display: flex; align-items: center; gap: .3em; color: var(--rust); margin-right: auto; }
.who { display: flex; flex-direction: column; min-width: 180px; }
.who b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
.who .muted { font-style: italic; font-size: .9rem; }
.stat-pills { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-family: var(--mono); font-size: .85rem; }
.stat-pills span { display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; }
.xpline { width: 100%; display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .78rem; color: var(--muted); }
.xpline .bar { flex: 1; }

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule-strong); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tab { text-decoration: none; display: inline-flex; align-items: center; gap: .4em; padding: 10px 14px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font-variant: small-caps; letter-spacing: .05em; color: var(--ink-2); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--rust); }
.tab .short { display: none; }
.tab .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rust); }

.grid-hunt { display: grid; grid-template-columns: 290px 1fr; gap: 24px; align-items: start; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.panel { border: 1px solid var(--rule-strong); background: var(--card); padding: 16px; }
.panel + .panel { margin-top: 16px; }
.panel h2:first-child, .panel h3:first-child { margin-top: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 14px 0; }
.lede { font-style: italic; color: var(--ink-2); }

/* bars: hatched fill inside a hairline box */
.bar { position: relative; height: 12px; border: 1px solid var(--ink-2); background: var(--paper-2); overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(-45deg, var(--c), var(--c) 3px, color-mix(in srgb, var(--c) 70%, transparent) 3px, color-mix(in srgb, var(--c) 70%, transparent) 5px);
  transition: width .25s ease; }
.bar.hp { --c: var(--hp); } .bar.focus { --c: var(--focus); } .bar.xp { --c: var(--xp); height: 6px; } .bar.rift { --c: var(--plum); height: 16px; }
.bar.big { height: 16px; }
.barline { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .78rem; margin: 6px 0 3px; color: var(--ink-2); }

/* zone ledger */
.zones { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.zone { width: 100%; text-align: left; display: grid; grid-template-columns: 2.2em 1fr auto; gap: 0 8px; align-items: center; padding: 9px 6px; border: 0;
  border-bottom: 1px solid var(--rule); background: none; cursor: pointer; }
@media (hover: hover) { .zone:hover:not(:disabled) { background: var(--paper-2); } }
.zone:disabled { cursor: default; color: var(--muted); }
.zone .n { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.zone b { font-weight: 400; font-family: var(--display); font-size: 1.05rem; }
.zone .sub { grid-column: 2 / 4; font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.zone.cur { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--rust); }
.zone .done { color: var(--ink-2); }
.zone .done.full { color: var(--complete); font-weight: 600; }

/* fight */
.fight { display: grid; gap: 14px; }
.foe { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; }
.plate { width: 120px; height: 120px; color: var(--ink); }
.plate-boss { color: var(--rust); }
.plate-ticks line { stroke-width: 1; }
.foe h2 { margin: 0; }
.foe .line { font-style: italic; color: var(--ink-2); margin: 2px 0 6px; font-size: .95rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-family: var(--mono); font-size: .72rem; border: 1px solid var(--rule-strong); padding: 1px 6px; color: var(--ink-2); white-space: nowrap; }
.chip.weak { border-color: var(--verdigris); color: var(--verdigris); }
.chip.resist { border-color: var(--rust); color: var(--rust); }
.chip.status { border-style: dashed; }
.intent { border: 1px solid var(--ink); padding: 8px 12px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.intent b { font-variant: small-caps; letter-spacing: .05em; }
.intent.heavy { border-color: var(--rust); color: var(--rust); border-width: 2px; }
.you { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pips i { width: 10px; height: 10px; border: 1px solid var(--ink); transform: rotate(45deg); }
.pips i.on { background: var(--ink); }
.acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.act { text-align: left; padding: 8px 10px; border: 1px solid var(--ink); background: var(--card); cursor: pointer; min-height: 58px; display: grid; gap: 2px; }
@media (hover: hover) { .act:hover:not(:disabled) { background: var(--ink); color: var(--paper); } }
.act:disabled { opacity: .45; cursor: not-allowed; }
.act .t { display: flex; justify-content: space-between; gap: 6px; font-variant: small-caps; letter-spacing: .04em; }
.act .c { font-family: var(--mono); font-size: .7rem; opacity: .8; }
.act.hint { border-width: 2px; border-color: var(--rust); }
.log { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; border-top: 1px solid var(--rule); font-size: .93rem; }
.log li { padding: 3px 0; border-bottom: 1px dotted var(--rule); }
.log li:first-child { font-weight: 600; }
.log .crit { color: var(--ochre); } .log .bad, .log .lose { color: var(--rust); } .log .good, .log .win { color: var(--verdigris); }
.log .muted, .log .enemy { color: var(--ink-2); } .log .dot { color: var(--plum); } .log .loot { color: var(--indigo); } .log .sys { font-style: italic; }
.huntbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.huntbar .left { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ended { text-align: center; padding: 24px 8px; }

/* items */
.items { list-style: none; margin: 0; padding: 0; }
.item { display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 12px; align-items: start; padding: 10px 4px; border-bottom: 1px solid var(--rule); }
.item .ico { width: 24px; height: 24px; margin-top: 2px; }
.item .name { font-family: var(--display); font-size: 1.08rem; }
.item .meta { font-family: var(--mono); font-size: .8125rem; color: var(--muted); }
.item .lines { font-size: .88rem; color: var(--ink-2); }
.item .acts-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.item.sel { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--rust); }
.delta { font-family: var(--mono); font-size: .75rem; }
.delta.up { color: var(--verdigris); } .delta.down { color: var(--rust); }
/* an inline link that is a tap target: padding widens the hit area, the negative margin keeps the line as it was */
a.tap { padding: 11px 6px; margin: 0 -6px; }
.r-common { color: var(--ink); } .r-fine { color: var(--verdigris); } .r-rare { color: var(--indigo); } .r-storied { color: var(--plum); }
.r-mythic { color: var(--rust); text-decoration: underline double; text-underline-offset: 3px; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.slot { border: 1px solid var(--rule-strong); padding: 10px; min-height: 120px; }
.slot .k { font-variant: small-caps; letter-spacing: .06em; color: var(--muted); font-size: .85rem; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font-size: .92rem; }
.kv dt { color: var(--ink-2); } .kv dd { margin: 0; font-family: var(--mono); font-size: .85rem; text-align: right; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.filters select, .acts-row > .filters { min-width: 0; max-width: 100%; } /* a long item name must not widen the form past the screen */
.matlist { columns: 2; column-gap: 24px; font-size: .9rem; }
.matlist div { display: flex; justify-content: space-between; break-inside: avoid; border-bottom: 1px dotted var(--rule); padding: 2px 0; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th, .tbl td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--rule); }
.tbl th { font-variant: small-caps; letter-spacing: .05em; color: var(--muted); font-weight: 400; }
.tbl td.r, .tbl th.r { text-align: right; font-family: var(--mono); font-size: .82rem; }
.tbl tr.me td { background: var(--paper-2); }

/* skills */
.branches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.branches.wick-list { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); row-gap: 0; }
.node { border: 1px solid var(--rule-strong); padding: 8px 10px; margin-bottom: 8px; display: grid; gap: 4px; }
.node.locked { opacity: .55; }
.node .t { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.node b { font-weight: 600; }
.node p { margin: 0; font-size: .85rem; color: var(--ink-2); }
/* 1.13: the button sits in a right-hand column, so a node is two rows, not three; a locked node shows what it needs there */
.node { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
.node > * { grid-column: 1; }
.node > .btn { grid-column: 2; grid-row: 1 / span 2; min-height: 40px; }
.node.locked > p.mono { grid-column: 2; grid-row: 1 / span 2; font-size: .8125rem; text-align: right; max-width: 9em; }
.node.locked > .btn:disabled { display: none; }
.ranks { display: inline-flex; gap: 2px; }
.ranks i { width: 8px; height: 8px; border: 1px solid var(--ink-2); }
.ranks i.on { background: var(--ink); border-color: var(--ink); }

/* gather */
.track { position: relative; height: 54px; border: 1px solid var(--ink); background: var(--paper-2); margin: 12px 0; overflow: hidden; touch-action: manipulation; }
.track .near { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ochre) 22%, transparent); }
.track .sweet { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(-45deg, var(--verdigris), var(--verdigris) 2px, transparent 2px, transparent 6px); border-left: 2px solid var(--verdigris); border-right: 2px solid var(--verdigris); }
.track .needle { position: absolute; top: -2px; bottom: -2px; width: 3px; background: var(--ink); margin-left: -1px; }
.gres { min-height: 1.6em; font-family: var(--display); font-size: 1.15rem; }

/* toasts and modal */
#toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 70; max-width: min(360px, calc(100vw - 32px)); } /* above #modal (60) */
.toast { background: var(--ink); color: var(--paper); padding: 10px 14px; font-size: .92rem; animation: slide .25s ease; cursor: pointer; }
@media (max-width: 600px) { .toast { padding: 7px 10px; font-size: .82rem; } .toast b { font-size: .95rem; } }
.toast b { font-family: var(--display); font-weight: 400; font-size: 1.05rem; display: block; }
@keyframes slide { from { transform: translateY(8px); opacity: 0; } }
#modal { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 55%, transparent); display: grid; place-items: center; z-index: 60; padding: 16px; }
#modal .box { background: var(--card); border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 3px; padding: 22px; width: min(520px, 100%); max-height: 85vh; overflow-y: auto; }
.box .actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }

/* auth + create */
.gate { max-width: 460px; margin: 8vh auto 0; padding: 0 var(--pad); }
.gate h1 { font-size: 3rem; color: var(--rust); display: flex; align-items: center; gap: .2em; }
.field { display: grid; gap: 4px; margin-bottom: 12px; }
.field label, .field .label { font-variant: small-caps; letter-spacing: .05em; color: var(--ink-2); }
.field input, select { padding: 8px 10px; border: 1px solid var(--ink-2); background: var(--card); min-height: 40px; }
.err { color: var(--rust); min-height: 1.5em; }
.discs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.disc { text-align: left; border: 1px solid var(--ink-2); padding: 12px; background: var(--card); cursor: pointer; display: grid; gap: 6px; }
.disc[aria-pressed="true"] { border: 2px solid var(--rust); }
.disc ul { margin: 0; padding-left: 1.1em; font-size: .85rem; color: var(--ink-2); }
/* side by side the two paths stretch to one height: the fold takes the slack, so both buttons sit on one line */
@media (min-width: 601px) { .path-discs .disc { grid-template-rows: auto auto 1fr auto; } .path-discs .disc > .btn { align-self: end; } }
.create { max-width: 860px; }

@media (max-width: 900px) {
  .grid-hunt, .cols-2 { grid-template-columns: 1fr; }
  .grid-hunt aside { order: 2; }
  .branches { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  :root { --pad: 16px; }
  h1 { font-size: 1.8rem; }
  .shell { padding-bottom: 88px; }
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper); border-top: 3px double var(--rule-strong); border-bottom: 0; margin: 0; z-index: 40; }
  .tab { flex: 1; flex-direction: column; gap: 2px; font-size: .68rem; padding: 7px 2px; border-bottom: 0; border-top: 3px solid transparent; margin: 0; letter-spacing: 0; }
  .tab .long { display: none; } .tab .short { display: inline; }
  .tab[aria-current="page"] { border-top-color: var(--rust); }
  .tab .ico { width: 20px; height: 20px; }
  .foe { grid-template-columns: 80px 1fr; }
  .plate { width: 80px; height: 80px; }
  .you { grid-template-columns: 1fr; }
  .acts { grid-template-columns: 1fr 1fr; }
  .discs { grid-template-columns: 1fr !important; }
  .branches { grid-template-columns: 1fr; }
  .matlist { columns: 1; }
  .item { grid-template-columns: 24px 1fr; }
  .item .acts-row { grid-column: 1 / -1; justify-content: flex-start; }
  #toasts { bottom: 84px; }
}
html.still * { animation: none !important; transition: none !important; }
.zones .act-head { font-variant: small-caps; letter-spacing: .08em; color: var(--rust); font-size: .85rem; padding: 14px 6px 4px; border-bottom: 1px solid var(--rule-strong); }
.zones .act-head:first-child { padding-top: 4px; }
.discs { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.create { max-width: 1000px; }
.tbl th .small { font-weight: 400; }

/* feedback */
.foe, .you { position: relative; }
.float { position: absolute; top: 10px; font-family: var(--mono); font-weight: 500; font-size: 1.05rem; pointer-events: none; animation: rise .9s ease-out forwards; z-index: 5; }
.f-hit { color: var(--ink); } .f-crit { color: var(--ochre); font-size: 1.35rem; } .f-hurt { color: var(--rust); } .f-heal { color: var(--verdigris); }
@keyframes rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-34px); opacity: 0; } }
.shake { animation: shake .35s ease; }
@keyframes shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.chance { font-family: var(--mono); font-size: .78rem; padding: 2px 6px; border: 1px solid currentColor; white-space: nowrap; }
.chance.good { color: var(--verdigris); } .chance.warn { color: var(--ochre); } .chance.bad { color: var(--rust); }
.letter { font-family: var(--display); font-size: 1.12rem; line-height: 1.55; }
details summary { cursor: pointer; padding: 4px 0; }
details .letter { margin: 4px 0 10px 1em; }
.search { width: 100%; padding: 7px 10px; border: 1px solid var(--ink-2); background: var(--card); margin-bottom: 8px; min-height: 38px; }
.slot.rb-fine { border-color: var(--verdigris); } .slot.rb-rare { border-color: var(--indigo); } .slot.rb-storied { border-color: var(--plum); } .slot.rb-mythic { border-color: var(--rust); border-width: 2px; }
.stat-pills .btn.ghost { min-height: 28px; padding: 2px 6px; }
html.still .float { display: none; }
html.still .shake { animation: none; }

/* 1.4 */
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 6px 12px; z-index: 100; }
.skip:focus { left: 8px; }
#view:focus { outline: none; }
.stat-pills .warn { color: var(--rust); border: 1px solid var(--rust); padding: 0 6px; }
.stat-pills .ev { color: var(--verdigris); }
.chip.mod { border-color: var(--plum); color: var(--plum); }
.chip.range { margin-left: 6px; }
.chip.range.far { border-color: var(--indigo); color: var(--indigo); }
.chip.muted { color: var(--muted); border-style: dotted; }
.intent .then { margin-left: auto; border-left: 1px solid var(--rule-strong); padding-left: 10px; }
.act.combo { border-color: var(--plum); box-shadow: inset 0 -3px 0 var(--plum); }
.act.worn { opacity: 0.72; }
.act.worn .c b { color: var(--muted, inherit); font-weight: 600; }
.zone.site { padding-left: 22px; }
.zone.site b { font-size: .95rem; font-style: italic; }
.zone .wx { color: var(--muted); }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 4px 0; border-bottom: 1px dotted var(--rule); }
ul.plain label { display: flex; gap: 8px; align-items: baseline; cursor: pointer; }
textarea { width: 100%; font: inherit; border: 1px solid var(--ink-2); background: var(--card); color: var(--ink); padding: 8px; }
input[type="number"], .field input:not([type="checkbox"]) { border: 1px solid var(--ink-2); background: var(--card); padding: 6px 8px; }
.road-tabs { margin-bottom: 14px; }
.npc .letter { font-style: italic; }
/* drawn map */
.worldmap { width: 100%; height: auto; display: block; border: 1px solid var(--rule-strong); background: var(--card); }
.worldmap .sea { fill: var(--indigo); opacity: .08; }
.worldmap .deep { fill: var(--ink); opacity: .1; }
.worldmap .route { fill: none; stroke: var(--ink-2); stroke-width: .35; stroke-dasharray: 1 .8; }
.worldmap .node circle { fill: var(--paper); stroke: var(--muted); stroke-width: .35; }
.worldmap .node.open { cursor: pointer; }
.worldmap .node.open circle { stroke: var(--ink); }
.worldmap .node.done circle { fill: var(--verdigris); stroke: var(--verdigris); }
.worldmap .node.cur circle { fill: var(--rust); stroke: var(--rust); }
.worldmap .site { fill: var(--plum); }
.worldmap text { font: 2.2px var(--mono); fill: var(--muted); }
/* hours chart: one series, thin bars, recessive baseline */
.chart { width: 100%; height: auto; display: block; }
.chart .mark { fill: var(--xp); }
.chart .hit { fill: transparent; }
.chart .bar-g:hover .mark { fill: var(--rust); }
.chart .base { stroke: var(--rule-strong); stroke-width: 1; }
.chart text { font: 10px var(--mono); fill: var(--muted); }
@media (max-width: 600px) {
  .tab { font-size: .6rem; padding: 6px 0; }
  .tab .ico { width: 18px; height: 18px; }
  .intent .then { margin-left: 0; border-left: 0; padding-left: 0; width: 100%; }
}

/* 1.4.1: rank filter for bulk selling, "More" menu and a calmer phone layout */
.bulk { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bulk select { min-height: 30px; padding: 2px 6px; font-size: .85rem; }
.huntbar > span:last-child { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tab.more { display: none; }
@media (max-width: 600px) {
  /* header: flame, name and numbers in two short rows */
  .top { gap: 4px 10px; padding: 8px 0 6px; }
  .brand { font-size: 1.3rem; margin-right: 0; }
  .brand .long { display: none; }
  .who { min-width: 0; flex: 1; }
  .who b { font-size: 1.05rem; }
  .who .muted { font-size: .8rem; }
  .stat-pills { gap: 4px 12px; font-size: .78rem; width: 100%; }
  .xpline { font-size: .7rem; }
  /* bottom bar: four sections and More */
  .tab { font-size: .7rem; padding: 7px 0; }
  .tab .ico { width: 21px; height: 21px; }
  .tab.extra { display: none; }
  .tab.more { display: inline-flex; position: relative; }
  .tab.more.on { border-top-color: var(--rust); color: var(--ink); }
  .tab .dot { position: absolute; top: 5px; right: calc(50% - 16px); }
  .tab { position: relative; }
  /* panels: less frame, more room */
  .panel { padding: 12px; }
  .panel + .panel { margin-top: 12px; }
  .cols-2, .grid-hunt { gap: 12px; }
  h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; }
  .item { padding: 8px 2px; gap: 2px 10px; }
  .item .name { font-size: 1rem; }
  .item .lines { font-size: .84rem; }
  .huntbar { gap: 6px; }
  .huntbar > span:first-child.muted { flex-basis: 100%; }
  .tbl th, .tbl td { padding: 4px 4px; }
  table.board th:nth-child(3), table.board td:nth-child(3) { display: none; }
  .slot { min-height: 0; padding: 8px; }
}
.cols-2 > *, .grid-hunt > * { min-width: 0; }

/* server & social (1.6) */
label.check { display: flex; gap: 8px; align-items: center; font-variant: normal; letter-spacing: 0; color: var(--ink); cursor: pointer; min-height: 36px; }
label.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); flex: none; }
.gate .or { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; color: var(--muted); font-variant: small-caps; letter-spacing: .08em; }
.gate .or::before, .gate .or::after { content: ''; flex: 1; border-top: 1px solid var(--rule); }
.btn.wide { width: 100%; justify-content: center; min-height: 44px; }
.acct .kinds { border: 0; padding: 0; margin: 8px 0 0; display: grid; gap: 2px; }
.acct .kinds legend { padding: 0; margin-bottom: 4px; font-variant: small-caps; letter-spacing: .05em; }
.qr-wrap { display: flex; justify-content: center; margin: 8px 0 4px; }
svg.qr { width: min(240px, 70vw); height: auto; border: 1px solid var(--rule-strong); }
.invite-link { overflow-wrap: anywhere; text-align: center; color: var(--ink-2); font-size: .72rem; }
[data-form="friend-add"] { flex-wrap: nowrap; margin: 10px 0 0; }
[data-form="friend-add"] .search { flex: 1; width: auto; min-width: 0; margin-bottom: 0; }
.panel.invite { border-color: var(--rust); }
.panel.invite .letter { margin-top: 0; }
.chat-log { list-style: none; margin: 0 0 10px; padding: 6px 2px; max-height: 300px; overflow-y: auto; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  overscroll-behavior: contain; font-size: .95rem; overflow-wrap: anywhere; }
.chat-log li { padding: 3px 0; line-height: 1.4; }
.chat-log li .mono { font-size: .7rem; margin-left: 4px; }
.chat-log li.call { color: var(--rust); }
.chat-say { display: flex; gap: 6px; margin-bottom: 6px; }
.chat-say input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--ink-2); background: var(--card); min-height: 40px; }
.item.friend .acts-row .btn { min-height: 44px; }
@media (max-width: 600px) {
  .chat-log { max-height: 46vh; }
  .chat-say input, .chat-say .btn { min-height: 44px; font-size: 16px; } /* 16px: no zoom on focus in iOS */
  }

/* phone shell (1.6) */
/* safe areas: the notch, rounded corners and the home indicator */
.shell { padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }
.gate { padding-top: env(safe-area-inset-top); }
#toasts { bottom: calc(16px + env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); }
/* toasts: swipe sideways to dismiss, repeats count up */
.toast { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.toast .n { font-family: var(--mono); font-size: max(.85em, .8125rem); opacity: .75; }
.toast .tx { display: block; }
.toast .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.toast .btn { border-color: var(--paper); color: var(--paper); }
.toast.install { cursor: default; }
/* sheets and the More menu */
.box .grab { display: none; }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.more-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 12px 4px;
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); cursor: pointer; font-variant: small-caps; letter-spacing: .04em; font-size: .92rem; }
.more-tile .ico { width: 26px; height: 26px; }
.more-tile[aria-current="page"] { border-color: var(--rust); color: var(--rust); box-shadow: inset 0 -3px 0 var(--rust); }
.more-tile .dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--rust); }
.more-tile:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
/* fight: moves and flasks in one dock, the log folds */
.acts.flasks { margin-top: 8px; }
.logbox { min-width: 0; max-width: 100%; } /* a long last line must not widen the fight column */
.logbox summary { font-variant: small-caps; letter-spacing: .04em; color: var(--ink-2); }
.logbox summary .last { display: inline-block; max-width: calc(100% - 9em); vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant: normal; letter-spacing: 0; }
.logbox[open] summary .last { display: none; }
/* amount boxes with - + Max */
.stepper { display: inline-flex; align-items: stretch; gap: 4px; max-width: 100%; }
.stepper input { width: 7.5em; min-width: 0; text-align: right; }
.stepper .btn { justify-content: center; min-width: 36px; }
.stat-pills .warn .ico { width: 1em; height: 1em; }
.mini { display: none; }

/* touch screens: every tap target at least 44px, no keyboard hints */
@media (pointer: coarse) {
  kbd, .keys-only { display: none !important; }
  .btn, .btn.small { min-height: 44px; }
  .btn.small { padding: .3em .75em; }
  .stat-pills .btn.ghost { min-height: 44px; min-width: 44px; justify-content: center; margin: -8px 0; }
  .tab { min-height: 48px; }
  .zone { min-height: 48px; }
  .act { min-height: 52px; }
  details > summary { padding: 10px 0; }
  select, .search, input[type="number"], textarea, .field input:not([type="checkbox"]) { min-height: 44px; }
  .bulk select { min-height: 44px; }
  ul.plain label, .field label:has(> input[type="checkbox"]) { display: flex; gap: 10px; align-items: center; min-height: 44px; }
  input[type="checkbox"] { width: 22px; height: 22px; flex: none; margin: 0; }
  .stepper .btn { min-width: 44px; }
}
/* iOS zooms into any text box under 16px */
@media (max-width: 600px), (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1rem) !important; }
}

/* phones (and phones on their side): the header slides away while scrolling down, a thin strip keeps the numbers */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .top { position: sticky; top: 0; z-index: 35; background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax);
    padding-top: calc(8px + env(safe-area-inset-top)); transition: transform .2s ease; }
  .hdr-hide .top { transform: translateY(-100%); }
  .mini { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 36; align-items: center; gap: 12px; font-size: .75rem; pointer-events: none;
    padding: calc(5px + env(safe-area-inset-top)) max(var(--pad), env(safe-area-inset-right)) 5px max(var(--pad), env(safe-area-inset-left));
    background: var(--paper); border-bottom: 1px solid var(--rule-strong); transform: translateY(-110%); transition: transform .2s ease; }
  .hdr-hide .mini { transform: none; }
  .mini .m-bar { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
  .mini .bar { flex: 1; height: 8px; min-width: 24px; }
  .mini .ico { width: 14px; height: 14px; }
  .mini .warn { color: var(--rust); }
  .mini .n { font-size: .8125rem; }
}

@media (max-width: 600px) {
  .tabs { padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .shell { padding-bottom: calc(var(--tabbar-h, 60px) + 24px); }
  #toasts { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); max-width: none; bottom: calc(var(--tabbar-h, 60px) + var(--dock-h, 0px) + 8px); }
  /* modals are bottom sheets: a handle, swipe down to close */
  #modal { place-items: end stretch; padding: 0; }
  #modal .box { width: 100%; max-height: 88dvh; border: 0; outline: 0; border-top: 3px double var(--rule-strong); overscroll-behavior: contain;
    padding: 0 max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); animation: sheet-up .22s ease-out; transition: transform .2s ease; }
  #modal .box .grab { display: block; position: sticky; top: 0; z-index: 2; height: 26px; margin: 0 -16px 6px; background: var(--card); cursor: grab; }
  #modal .box .grab::before { content: ''; display: block; width: 44px; height: 5px; margin: 11px auto 0; border-radius: 3px; background: var(--rule-strong); }
  .box .actions .btn { flex: 1 1 auto; justify-content: center; }
  /* one-thumb fight: moves pinned above the tab bar, bars and the enemy on top */
  /* the full-width top line is a border image drawn past the edges: ink only, so the dock never gets wider than the screen */
  .acts-dock { position: sticky; bottom: var(--tabbar-h, 60px); z-index: 20; padding: 8px 0; max-height: 55dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax);
    border-top: 1px solid var(--rule-strong); border-image: linear-gradient(var(--rule-strong), var(--rule-strong)) 1 / 1px 0 0 / 0 100vmax; }
  .panel .acts-dock { background: var(--card); box-shadow: none; clip-path: none; border-image: none; }
  .fight .acts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .fight .acts.flasks { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 6px; }
  .fight .act { padding: 6px 7px; min-height: 52px; }
  .fight .act .t { font-size: .88rem; }
  .fight .act .c { font-size: .64rem; }
  .fight .acts.flasks .act { min-height: 44px; }
  /* costs in the book face, not mono: 'free - every 3' and '20 left' fit on one line, so the dock stays short */
  .fight .act { gap: 0; padding: 5px 6px; }
  .fight .act .t { line-height: 1.15; }
  .fight .acts.flasks .act .t { letter-spacing: 0; overflow-wrap: anywhere; hyphens: auto; font-size: .8125rem; }
  .fight .acts.flasks .act { padding-left: 3px; padding-right: 3px; } /* room for "Tincture" on one line at 360 */
  .fight .acts-dock .act .c { font-family: inherit; line-height: 1.2; opacity: .85; }
  .log { max-height: 150px; }
  /* tables become stacked rows: each cell says which column it is */
  .tbl, .tbl tbody { display: block; width: 100%; }
  .tbl thead { display: none; }
  .tbl tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 6px 2px; border-bottom: 1px solid var(--rule); }
  .tbl th, .tbl td { display: block; padding: 0; border: 0; text-align: left; }
  .tbl th, .tbl td { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
  .tbl tbody th { flex: 1 1 auto; }
  .tbl tbody th:has(> div) { flex-basis: 100%; }
  .tbl td.r, .tbl th.r { text-align: left; }
  .tbl td[data-label]::before { content: attr(data-label) " "; font-family: var(--serif); font-variant: small-caps; letter-spacing: .04em; color: var(--muted); font-size: .85rem; }
  .tbl tr.me { background: var(--paper-2); }
  .tbl tr.me td { background: none; }
  table.board th:nth-child(3), table.board td:nth-child(3) { display: block; }
}
@media (max-width: 359px) { .fight .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-pills { gap: 4px 9px; } }
@keyframes sheet-up { from { transform: translateY(100%); } }

/* phone on its side: enemy and bars left, moves right, nothing under the tab bar */
@media (orientation: landscape) and (max-height: 500px) {
  .fight { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(6, auto) 1fr; column-gap: 16px; align-items: start; }
  .fight > * { grid-column: 1; }
  .fight > .acts-dock { grid-column: 2; grid-row: 1 / 8; position: sticky; top: calc(var(--top-h, 40px) + 4px); max-height: calc(100dvh - var(--top-h, 40px) - 12px); overflow-x: hidden; overflow-y: auto; }
  .fight .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foe { grid-template-columns: 64px 1fr; gap: 10px; }
  .plate { width: 64px; height: 64px; }
  .foe .line { display: none; }
  .you { grid-template-columns: 1fr; }
  .log { max-height: 120px; }
  #modal .box { max-height: 92dvh; }
}
/* screens (1.6): gestures, bag chips and selection, compare, forge buttons, folding acts, map zoom, chart taps, focus */
html { overscroll-behavior-y: contain; } /* our own pull to refresh instead of the browser reloading the page */
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
#view.enter-left { animation: enter-left .22s ease-out; }
#view.enter-right { animation: enter-right .22s ease-out; }
@keyframes enter-left { from { transform: translateX(28px); opacity: .3; } }
@keyframes enter-right { from { transform: translateX(-28px); opacity: .3; } }
/* pull to refresh: a ring of ink ticks */
#ptr { height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; color: var(--ink-2); transition: height .2s ease; }
#ptr svg { width: 26px; height: 26px; flex: none; }
#ptr span { font-variant: small-caps; letter-spacing: .05em; font-size: .78rem; padding-bottom: 6px; }
#ptr.armed { color: var(--rust); }
#ptr.busy svg { animation: ptr-turn .9s linear infinite; }
@keyframes ptr-turn { to { transform: rotate(360deg); } }
/* bag rows that can be swiped: the colour behind slides in with the row */
.items.swipeable { overflow-x: clip; }
.items.swipeable .item { position: relative; touch-action: pan-y; background: var(--card); }
.item.swiping { z-index: 1; }
.swipe-bg { position: absolute; top: 0; bottom: 0; width: 100vw; display: flex; align-items: center; padding: 0 18px; font-variant: small-caps; letter-spacing: .06em; color: var(--paper); background: var(--muted); pointer-events: none; }
.swipe-bg.left { left: 100%; }
.swipe-bg.right { right: 100%; justify-content: flex-end; }
.swipe-bg.sell { background: var(--verdigris); } .swipe-bg.salvage { background: var(--ochre); } .swipe-bg.lock { background: var(--indigo); }
.swipe-bg.armed { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: none) { [data-uid] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
.lockmark .ico { width: .9em; height: .9em; color: var(--muted); }
.chip.new { border-color: var(--verdigris); color: var(--verdigris); }
/* filter chips that scroll sideways */
.chiprow, .branch-nav { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 0 6px; margin-bottom: 4px; }
.chiprow::-webkit-scrollbar, .branch-nav::-webkit-scrollbar { display: none; }
.chip-btn { flex: none; scroll-snap-align: start; border: 1px solid var(--rule-strong); background: none; padding: 4px 11px; min-height: 34px; font-family: var(--mono); font-size: .78rem; white-space: nowrap; cursor: pointer; }
.chip-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip-btn[aria-pressed="true"] span { color: inherit; text-decoration: none; }
@media (hover: hover) { .chip-btn:hover { border-color: var(--ink); } }
.chip-sep { flex: none; border-left: 1px solid var(--rule-strong); margin: 4px 2px; }
/* select mode */
.pick { display: flex; align-items: center; justify-content: center; min-height: 28px; cursor: pointer; }
.pick input, .selall input { width: 20px; height: 20px; accent-color: var(--rust); }
.selall { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; cursor: pointer; }
.selbar { position: sticky; bottom: var(--tabbar, 0px); z-index: 6; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--card); border-top: 3px double var(--rule-strong); padding: 8px 0; margin-top: 6px; }
.selbar > .mono { margin-right: auto; }
/* phones: one line - the count without the word, Salvage and Lock without the number Sell already shows */
@media (max-width: 600px) { .selbar { gap: 3px; } .selbar .btn.small { padding-left: 5px; padding-right: 5px; } .selbar .selw { display: none; } }
/* compare sheet */
.cmp { overflow-x: auto; }
.cmp-tbl th:first-child { white-space: nowrap; }
.cmp-tbl thead th, .cmp-tbl thead th.r { font-variant: normal; letter-spacing: 0; color: var(--ink); font-family: var(--display); font-size: .95rem; vertical-align: bottom; }
.cmp-tbl td .small { font-family: var(--serif); text-align: right; }
/* forge: big separate buttons, price underneath */
.forge-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.forge-btn { flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; min-height: 58px; }
.forge-btn .lbl { display: inline-flex; align-items: center; gap: .4em; }
.forge-btn .cost { font-family: var(--mono); font-size: .72rem; font-variant: normal; letter-spacing: 0; opacity: .9; }
.forge-btn.primary .cost span.r-mythic { color: inherit; }
ul.reroll li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
ul.reroll .forge-btn { min-height: 44px; padding: .3em .8em; }
/* expedition: folding acts */
.zone-tools { margin-bottom: 8px; }
.zones.acts-list { border-top: 0; }
.act-group { list-style: none; }
.act-group summary.act-head { cursor: pointer; display: list-item; }
.act-group summary .done { color: var(--verdigris); }
.act-group .zones { border-top: 0; }
/* camp map: pinch, drag, wheel */
.worldmap { touch-action: pan-y; }
.worldmap.zoomed { touch-action: none; cursor: grab; }
/* chart: tap a bar */
.chart-wrap { position: relative; padding-top: 26px; -webkit-tap-highlight-color: transparent; }
.chart-tip { position: absolute; top: 0; z-index: 2; background: var(--ink); color: var(--paper); font: .74rem var(--mono); padding: 3px 8px; white-space: nowrap; pointer-events: none; }
.chart .bar-g.on .mark { fill: var(--rust); }
.chart .bar-g { cursor: pointer; }
/* skills: branch buttons only where branches scroll */
.branch-nav { display: none; }
.skill-paths { position: relative; }
/* gather: hint for the big tap area */
.track .pad-hint { display: none; }
.more-row { text-align: center; margin: 12px 0 0; }
.sticky-tools { position: sticky; top: 0; z-index: 6; background: var(--card); padding: 6px 0; margin: 0 0 8px; border-bottom: 1px solid var(--rule); }
.sticky-tools .search { margin: 0; flex: 1 1 100px; min-width: 0; width: auto; }
/* the header is pinned there: stay below it, not under it */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) { .sticky-tools { top: var(--top-h, 38px); } }
/* landscape phones too (1.13): one branch at a time, its nodes two across */
@media (orientation: landscape) and (max-height: 500px) {
  .branch-nav { display: flex; flex-wrap: wrap; overflow: visible; }
  .branches.skill-paths { grid-template-columns: minmax(0, 1fr); }
  .skill-paths > .branch:not(.on) { display: none; }
  .skill-paths > .branch.on { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; align-items: start; }
  .skill-paths > .branch > :not(.node) { grid-column: 1 / -1; }
}
.toast .undo { display: inline-flex; margin-top: 6px; color: var(--paper); border-color: var(--paper); }
@media (max-width: 600px) {
  :root { --tabbar: 58px; }
  .branch-nav { display: flex; }
  /* one branch at a time, picked with the chips (1.10: no more sideways swiping) */
  .branch-nav { flex-wrap: wrap; overflow: visible; }
  .branches.skill-paths { grid-template-columns: minmax(0, 1fr); }
  .skill-paths > .branch:not(.on) { display: none; }
  /* gather: the lane runs down into a big tap area, the band shown all the way */
  .track { height: 168px; }
  .track::after { content: ''; position: absolute; left: 0; right: 0; top: 54px; border-top: 1px dashed var(--rule-strong); pointer-events: none; }
  .track .pad-hint { display: block; position: absolute; left: 0; right: 0; bottom: 10px; width: max-content; margin: 0 auto; padding: 2px 10px; background: var(--card); border: 1px solid var(--rule-strong); text-align: center; font-variant: small-caps; letter-spacing: .06em; color: var(--ink-2); pointer-events: none; }
  .forge-btn { min-height: 64px; font-size: 1rem; }
  .forge-acts { grid-template-columns: 1fr 1fr; }
  ul.reroll .forge-btn { flex: 1 1 100%; }
}
html.still #ptr { transition: none; }
html.still #ptr.busy svg { animation: none; }
select { max-width: 100%; }
.field { grid-template-columns: minmax(0, 1fr); } /* long item names in a picker no longer push the page sideways */
@media (hover: hover) and (pointer: fine) { .swipe-tip { display: none; } }
.chiprow { flex-wrap: wrap; overflow: visible; } /* 1.10: wraps on phones too, nothing scrolls sideways */
/* gameplay (1.6): today, the lamp, pocket runs, away card, reader, lantern search, touch gathering */
.td-list .td-row { grid-template-columns: 24px 1fr auto; align-items: center; }
.td-row .name { font-size: 1rem; }
.td-row .meta { font-size: .74rem; }
.td-row .chance { font-size: .7rem; padding: 0 4px; }
.td-row.ready { box-shadow: inset 3px 0 0 var(--rust); padding-left: 8px; }
.td-row.done { color: var(--muted); }
.td-row a.btn { text-decoration: none; color: inherit; }
@media (min-width: 601px) { .tab { padding-left: 10px; padding-right: 10px; } } /* room for the Today tab */
@media (max-width: 600px) { .td-list .td-row .acts-row { grid-column: auto; justify-content: flex-end; } }

.gp-lamp { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: start; }
.gp-lamp-btn { border: 1px solid var(--ink); background: var(--paper-2); padding: 6px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; color: var(--ink); }
.gp-lamp-btn:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.gp-lamp-btn:disabled { cursor: default; }
.gp-lamp.lit .gp-lamp-btn { border-color: var(--ochre); }
.gp-lamp-svg { display: block; width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gp-lamp-svg .thin { stroke-width: .9; }
.gp-lamp-svg .glow { fill: color-mix(in srgb, var(--ochre) 30%, transparent); stroke: none; }
.gp-lamp-svg .fl-out { fill: var(--ochre); stroke: var(--rust); stroke-width: 1.2; }
.gp-lamp-svg .fl-in { fill: var(--paper); stroke: none; }
.gp-lamp.lit .gp-lamp-svg #gp-flame { animation: gp-flicker 2.4s ease-in-out infinite; transform-origin: 0 0; }
@keyframes gp-flicker { 50% { transform: scale(.94, 1.04); } }
.gp-lamp-bar { margin-top: 6px; }
.gp-lamp-bar i { transition: none; }
@media (max-width: 600px) { .gp-lamp { grid-template-columns: 92px 1fr; gap: 10px; } }

.gp-pocket { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; align-items: center; border: 1px solid var(--ink); background: var(--card); padding: 8px 12px; margin-bottom: 12px; }
.gp-pocket b { font-family: var(--mono); font-size: 1.25rem; font-weight: 500; }
.gp-pocket .bar { grid-column: 1 / -1; }
.gp-pocket .bar i { transition: width .5s linear; }
.gp-pocket.gp-inline { position: relative; grid-template-columns: minmax(0, 1fr) auto; gap: 0 4px; padding: 0 0 3px 10px; margin: 0; min-height: 44px; }
.gp-inline > span { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; overflow: hidden; }
.gp-inline b { font-size: 1rem; }
.gp-inline .muted { font-size: .8125rem; }
.gp-inline .btn { border: 0; padding: 0 10px; min-height: 40px; }
.gp-inline .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border: 0; }

.gp-card .gp-stamp { color: var(--rust); letter-spacing: .08em; text-transform: uppercase; font-size: .8125rem; margin: 0 0 4px; }
.gp-card h2 { margin-bottom: .5em; }
.ledger { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 10px 0; }
.ledger dt { color: var(--ink-2); }
.ledger dd { margin: 0; padding-left: 12px !important; font-family: var(--mono); font-size: .88rem; text-align: right; }
.ledger dd.wrap { text-align: left; font-family: var(--serif); font-size: .9rem; }
.ledger dt, .ledger dd { padding: 3px 0; border-bottom: 1px dotted var(--rule-strong); }
.away-head { width: 100%; height: auto; display: block; margin: -6px 0 6px; fill: none; stroke: var(--ink-2); stroke-width: 1.4; stroke-linecap: round; }
.away-head .thin { stroke-width: .7; stroke: var(--rule-strong); }
.away-head circle { fill: var(--ochre); stroke: var(--rust); }
.away .letter { font-size: 1.08rem; }

/* full-screen letter reader and lantern search */
:root.reading, :root.reading body { overflow: hidden; }
#reader, #lantern { position: fixed; inset: 0; z-index: 70; background: var(--paper); color: var(--ink); display: flex; flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) var(--pad) max(10px, env(safe-area-inset-bottom)); }
#reader.night { --paper: #221a10; --card: #2a2014; --paper-2: #2e2416; --ink: #dcc79f; --ink-2: #c2ad86; --muted: #9a8764; --rule: #4a3b25; --rule-strong: #6e5a3a; --rust: #d08a52; }
.rd-top { display: flex; align-items: center; gap: 10px; max-width: 760px; width: 100%; margin: 0 auto; }
.rd-count { flex: 1; text-align: center; color: var(--muted); }
.rd-size { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); }
.rd-size input { width: 96px; accent-color: var(--rust); }
.rd-bar { height: 3px; background: var(--rule); max-width: 760px; width: 100%; margin: 8px auto 0; }
.rd-bar i { display: block; height: 100%; width: 0; background: var(--rust); transition: width .2s; }
.rd-page { flex: 1; overflow: hidden; max-width: 760px; width: 100%; margin: 0 auto; padding: 20px 0 8px; touch-action: pan-y; }
.rd-text { height: 100%; column-fill: auto; font-family: var(--display); line-height: 1.6; transition: transform .3s ease; }
.rd-text h2 { font-size: 1.6em; margin: 0 0 .6em; break-after: avoid; }
.rd-text p { margin: 0 0 1em; hyphens: auto; }
.rd-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 760px; width: 100%; margin: 0 auto; }
.rd-foot .btn { min-height: 44px; }
.rd-pages { color: var(--muted); }
@media (max-width: 600px) { .rd-text { line-height: 1.75; } .rd-size input { width: 80px; } }

.ln-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; max-width: 640px; width: 100%; margin: 0 auto; }
.ln-top h2 { margin: 0; }
#lantern .ln-help { max-width: 640px; width: 100%; margin: 6px auto; }
.ln-stage { flex: 1; min-height: 0; max-width: 640px; width: 100%; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.ln-stage svg { width: 100%; height: 100%; display: block; }
.ln-paper { fill: var(--paper-2); }
.ln-scene path { fill: none; stroke: var(--ink); stroke-width: .7; stroke-linecap: round; }
.ln-scene .thin { stroke-width: .35; }
.ln-glint path { fill: var(--ochre); stroke: var(--paper); stroke-width: .3; }
.ln-glint.tw path { animation: gp-glint 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes gp-glint { 50% { transform: scale(.55) rotate(45deg); opacity: .6; } }
.ln-dark { fill: #120d08; }
.ln-ring { fill: none; stroke: color-mix(in srgb, var(--ochre) 60%, transparent); stroke-width: .4; stroke-dasharray: 1.5 1.5; }
.ln-ring.warm { stroke: var(--ochre); stroke-width: .8; stroke-dasharray: none; }
.ln-foot { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding-top: 10px; }
.ln-foot .btn { min-height: 44px; }

.ln-stage { -webkit-tap-highlight-color: transparent; }
.gp-amb { display: grid; gap: 6px; }
.gp-amb input[type="range"] { width: 160px; vertical-align: middle; accent-color: var(--rust); }
html.still .gp-lamp.lit .gp-lamp-svg #gp-flame, html.still .ln-glint.tw path { animation: none; }
html.still .rd-text { transition: none; }

/* merge (1.6): a checkbox sits on the line of its label everywhere */
.field label:has(> input[type="checkbox"]) { display: flex; gap: 10px; align-items: center; }
.field label:has(> input[type="checkbox"]) input { flex: none; margin: 0; }
/* speed (1.6) */
.stat-pills .syncing { opacity: .7; font-style: italic; }
/* battery saver: nothing moves, nothing floats */
html[data-saver] .float { display: none; }
html[data-saver] *, html[data-saver] *::before, html[data-saver] *::after { animation: none !important; transition: none !important; }
/* fight bars are updated in place now; animating their width every turn would cost a phone a redraw per frame */
.fight .bar i { transition: none; }
/* den (1.7): the Tallow Tent and card frames */
.den-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; }
.den-pick .btn { min-height: 52px; justify-content: flex-start; text-align: left; }
.den-pick .btn > span { display: flex; flex-direction: column; line-height: 1.2; }
.den-pick .ico { width: 1.6em; height: 1.6em; flex: none; }
.den-sheet h2 .ico { width: 1em; height: 1em; vertical-align: -.1em; }
.den-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.den-tabs .btn { justify-content: center; }
.den-stage { display: block; width: 100%; max-width: 320px; margin: 4px auto; }
.den-wheel-wrap .den-stage { max-width: 220px; }
.den-cloth { stroke: var(--rule-strong); stroke-width: 1.5; }
.den-die rect { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
.den-die circle { fill: var(--ink); }
.den-bones.rolling .den-die { transform-box: fill-box; }
.den-cardbody { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.5; }
.den-cardbody.face { fill: var(--card); }
.den-hatch { stroke: var(--rule-strong); stroke-width: 1; fill: none; }
.den-cardline { fill: none; stroke: var(--rust); stroke-width: .8; }
.den-candle { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.2; }
.den-flame { fill: var(--ochre); stroke: var(--rust); stroke-width: 1; }
.den-moth { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-linecap: round; }
.den-card { transition: transform .16s ease-in; transform-box: fill-box; transform-origin: center; }
.den-card.flipping { transform: scaleX(0); }
.den-card.picked .den-cardbody { stroke: var(--rust); stroke-width: 3; }
.den-rotor { transform-box: view-box; transform-origin: 100px 100px; transition: transform 2.5s cubic-bezier(.12, .7, .18, 1); }
.den-pocket { stroke: var(--card); stroke-width: 1.2; }
.den-pocket.ink { fill: var(--ink); }
.den-pocket.rust { fill: var(--rust); }
.den-pocket.lamp { fill: var(--ochre); }
.den-pocket.hit { stroke: var(--verdigris); stroke-width: 4; }
.den-num { fill: var(--paper); font: 13px var(--display); }
.den-rim { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.den-pointer { fill: var(--verdigris); stroke: var(--ink); stroke-width: 1; }
.den-hub { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; }
.den-result { text-align: center; font-family: var(--display); font-size: 1.25rem; min-height: 1.6em; margin: 4px 0; }
.den-result.won { color: var(--good); }
.den-result.lost { color: var(--bad); }
.den-stake { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; }
.den-stake b { font-size: 1.4rem; }
.den-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.den-steps .btn { justify-content: center; min-height: 44px; }
.den-bets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.den-bet { flex-direction: column; justify-content: center; min-height: 72px; padding: 6px 4px; gap: 2px; text-align: center; }
.den-bet b { font-family: var(--display); font-size: 1.15rem; font-weight: 400; }
/* phones: the table fits the sheet without scrolling */
@media (max-width: 600px) { .den-stage { max-width: 190px; margin: 0 auto; } .den-wheel-wrap .den-stage { max-width: 124px; } #modal .box:has(.den-sheet) { max-height: 94dvh; } .den-bet { min-height: 60px; } .den-steps, .den-bets { margin: 6px 0; } }
.frames { list-style: none; padding: 0; margin: 8px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.frame-tile { border: 1px solid var(--rule); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.frame-tile img { width: 100%; height: auto; display: block; }
.frame-tile.locked img { opacity: .55; }
.frame-tile.on { border-color: var(--rust); border-width: 2px; }
.frame-tile .name { font-family: var(--display); }
.frame-tile .ico { width: 1em; height: 1em; vertical-align: -.1em; }
.frame-tile .btn { margin-top: auto; justify-content: center; }
html.still .den-rotor, html.still .den-card { transition: none; }

/* 1.7.1: compact gear cards: the text uses the full width, all buttons in one low row under it */
.item.gear { grid-template-columns: 24px minmax(0, 1fr); gap: 1px 10px; padding: 8px 2px; }
.item.gear .ico { width: 22px; height: 22px; }
.item.gear .name { font-size: 1rem; line-height: 1.25; }
.item.gear .meta { line-height: 1.4; }
.item.gear .lines { font-size: .84rem; line-height: 1.35; }
.item.gear .acts-row { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.item.gear .acts-row .btn.small { min-height: 34px; padding: .1em .6em; font-size: .82rem; }
.item.gear .acts-row .lockbtn { padding: 0; width: 34px; justify-content: center; }
.item.gear .acts-row .lockbtn .ico { width: 16px; height: 16px; margin: 0; }
.item.gear .acts-row .lockbtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.item.gear .acts-row > .mono { align-self: center; margin-right: 4px; }
@media (pointer: coarse) { .item.gear .acts-row .btn.small { min-height: 44px; } .item.gear .acts-row .lockbtn { width: 44px; } }

/* promo code box (Chronicle settings) */
.promo-row { display: flex; gap: 8px; }
.promo-row input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.milestones li { padding: 4px 0; border-bottom: 1px dotted var(--rule); }
.milestones li.done { color: var(--verdigris); }
.milestones li.done .small { color: var(--ink-2); }

/* tablets and small windows: the page tabs stay on one row without scrolling sideways. Short names from 601 px;
   below 1000 px each tab is an icon over its short name, sharing the width equally (like the phone bar). */
@media (min-width: 601px) and (max-width: 1180px) {
  .tabs { flex-wrap: nowrap; overflow-x: visible; }
  .tab { padding: 8px 8px; letter-spacing: .02em; }
  .tab .long { display: none; } .tab .short { display: inline; }
}
/* desktop: the tabs stay on ONE row, never wrap or scroll. layout() in app.js adds .fit (tighter) and then .fit2
   (short names) when the row doesn't fit in this browser's font. */
@media (min-width: 1181px) {
  .tabs { flex-wrap: nowrap; overflow-x: visible; }
  .tab { padding-left: 8px; padding-right: 8px; letter-spacing: .02em; }
}
/* the tabs share out the spare width so the row fills the bar edge to edge (below 1000 px they are equal already) */
@media (min-width: 1000px) { .tab { flex: 1 1 auto; justify-content: center; } }
@media (min-width: 601px) {
  .tabs.fit .tab, .tabs.fit2 .tab { padding-left: 5px; padding-right: 5px; letter-spacing: 0; }
  .tabs.fit2 .tab .long { display: none; } .tabs.fit2 .tab .short { display: inline; }
}
@media (min-width: 601px) and (max-width: 999px) {
  .tab { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; font-size: .7rem; padding: 6px 2px; letter-spacing: 0; justify-content: center; }
  .tab .ico { width: 18px; height: 18px; }
  .tab .dot { position: absolute; margin: 0 0 0 26px; }
  .tab { position: relative; }
}

/* phones: the header is one pinned row of numbers with a thin experience line under it. It never slides away;
   name and calling are in the Chronicle, meals and boosts in its stats, sound under Settings. Phones on their side too (1.10). */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .top .brand, .top .who, .stat-pills .opt, .stat-pills .ev, .stat-pills .btn.ghost, .xpline > span { display: none; }
  .top { padding: calc(6px + env(safe-area-inset-top)) 0 0; gap: 4px; }
  .stat-pills { flex-wrap: nowrap; justify-content: space-between; gap: 6px; font-size: .74rem; overflow: hidden; }
  .stat-pills .ico { width: 13px; height: 13px; }
  .stat-pills span { gap: .2em; }
  .xpline { margin: 0 0 1px; }
  .xpline .bar { height: 4px; }
}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .hdr-hide .top { transform: none; }
  .mini { display: none; }
}

/* chat with friends (1.8) */
.chats { list-style: none; padding: 0; }
.chat-row { border-bottom: 1px solid var(--rule); }
.chat-row .row-btn { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 10px 2px; background: none; border: 0; cursor: pointer; color: inherit; font: inherit; }
.chat-row .row-btn:hover { background: var(--paper-2); }
.chat-row .row-btn > div { min-width: 0; flex: 1; }
.chat-row .lines { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-log { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; }
.dm { max-width: 80%; padding: 6px 10px; border: 1px solid var(--rule-strong); background: var(--card); display: flex; flex-direction: column; gap: 2px; }
.dm .dm-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.dm .mono { font-size: .68rem; margin: 0; }
.dm.mine { align-self: flex-end; background: var(--paper-2); }
.dm.theirs { align-self: flex-start; }
.dm-more { align-self: center; }
.chat-row .row-btn { -webkit-tap-highlight-color: transparent; }
.chat-row .row-btn:focus:not(:focus-visible) { outline: none; }
.dm-meta { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.dm-del { border: 0; background: none; padding: 0; font: .68rem var(--mono); color: var(--muted); cursor: pointer; text-decoration: underline; min-height: 24px; }
.dm-del:hover { color: var(--rust); }
.milestones li.ready { font-weight: 600; }
.milestones li .btn { margin-left: 6px; }
.intent { padding: 4px 10px; gap: 8px; font-size: .9rem; }
.intent .small { font-size: .75rem; }

/* folding sections (1.8.5) */
.fold { margin: 6px 0; border-top: 1px solid var(--rule); }
.fold > summary { cursor: pointer; padding: 8px 0; font-weight: 600; list-style-position: inside; }
.fold > summary b { font-weight: 600; }
.fold-body { padding-bottom: 6px; }
.panel > .fold:first-child { border-top: 0; margin-top: 0; }
.warn-text { color: var(--rust); }

/* phone round (1.10): nothing scrolls sideways, the main button in reach, no text under 13px, 44px taps */
/* clip, not hidden: the pinned header and fight dock stay sticky; page swipes and slide-ins can't widen the page */
.shell, .gate { overflow-x: clip; }
.gate { padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }
#reader, #lantern { padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }
.err:empty { min-height: 0; margin: 0; }
.field label:has(> input[type="checkbox"]) { font-variant: normal; letter-spacing: 0; color: var(--ink); }
[data-act="buy-score"] { min-width: 44px; justify-content: center; }
.act-group summary.act-head, .zones .act-group:first-child summary.act-head { min-height: 44px; padding: 12px 6px 8px; }
.zones .more-locked { padding: 8px 6px 8px 2.9em; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: .8125rem; color: var(--muted); }
.huntbar + .fight, .huntbar + .panel { margin-top: 10px; }
.rd-size input { height: 44px; }
/* commissions: Claim on the line of its job, as on Today */
.item.comm { grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; }
.item.comm .acts-row { grid-column: auto; justify-content: flex-end; }
/* Today: the pocket run is one row, the button on the right */
.panel.pocket-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; }
.pocket-row h2, .pocket-row p { margin: 0; }
/* What's new: older versions fold, Close stays in view */
.whatsnew details { margin-top: 6px; }
.whatsnew details > summary { font-family: var(--display); font-size: 1.1rem; }
#modal .box .actions.stick { position: sticky; bottom: -22px; background: var(--card); padding: 10px 0; border-top: 1px solid var(--rule); z-index: 2; }
/* phones: every sheet keeps its last row of buttons in view */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  #modal .box .actions:last-child { position: sticky; bottom: -22px; background: var(--card); padding: 10px 0; border-top: 1px solid var(--rule); z-index: 2; }
}
@media (max-width: 600px) { #modal .box .actions.stick, #modal .box .actions:last-child { bottom: calc(-16px - env(safe-area-inset-bottom)); } }
@media (pointer: coarse) {
  label.check { min-height: 44px; }
  label.check input { width: 22px; height: 22px; }
}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  /* text floor: 13px for the small print people actually read */
  .mono, .num { font-size: max(.86em, .8125rem); }
  .small .mono { font-size: 1em; }
  .meta, .item .meta, .td-row .meta, .zone .sub, .chip, .chance, .td-row .chance, .barline, .intent .small, .fight .act .c, .stat-pills { font-size: .8125rem; }
  .gate { margin-top: 2vh; }
  .gate h1 { font-size: 2rem; margin-bottom: .2em; }
  /* create: the step's button stays on screen; unchosen kin and callings show their name and numbers only */
  .create > .huntbar { position: sticky; bottom: 0; z-index: 5; background: var(--paper); margin-top: 12px !important; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule-strong); }
  .discs { gap: 8px; margin: 10px 0; }
  .disc { padding: 10px 12px; gap: 4px; }
  .disc[aria-pressed="false"] > :not(b):not(.mono) { display: none; }
  /* a fight: no zone ledger under it (Back to camp shows it again), the three buttons on one row */
  .grid-hunt:has(.fight) > aside { display: none; }
  .huntbar:has([data-act="retreat"]) > .left:last-child { display: flex; flex-wrap: nowrap; width: 100%; }
  .huntbar:has([data-act="retreat"]) > .left:last-child > .btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
  .huntbar [data-act="retreat"] { flex: none !important; }
  .huntbar:has([data-act="retreat"]) > .left:last-child > .gp-inline { flex: 1.3 1 0; min-width: 0; }
  .huntbar [data-act="retreat"] .lbl { display: none; }
}
/* phone on its side, live fight: everything in one screen - title and buttons share a row, the bars sit side by side, moves and flasks five to a row */
@media (orientation: landscape) and (max-height: 500px) {
  .huntbar:has([data-act="retreat"]) { flex-wrap: nowrap; }
  .huntbar:has([data-act="retreat"]) > .left:last-child { width: auto; flex: 0 1 380px; }
  .huntbar + .fight { margin-top: 2px; }
  .fight { row-gap: 6px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .foe h2 { font-size: 1.25rem; }
  .fight > .you { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
  .fight > .foe { order: -2; } .fight > .you { order: -1; } /* your bars above the intent: its first line still shows when its hint wraps */
  .fight .acts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .fight .acts.flasks { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 4px; }
  .fight .act { padding: 3px 6px; min-height: 48px; gap: 0; }
  .fight .act .t { font-size: .88rem; }
  .fight .act .c { font-size: .8125rem; }
  .fight .acts.flasks .act { min-height: 44px; }
  html:has(#view .acts-dock) #toasts { max-width: calc(42.5vw - 20px); } /* tips stay over the narrower enemy column */
}
@media (max-width: 600px) {
  .tab { font-size: .8125rem; letter-spacing: 0; }
  .create:not(.step-1) .lede { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .gate .lede { display: none; }
  /* sign-in fits one screen: name and password side by side, tighter gaps */
  .gate { max-width: 640px; margin-top: 0; }
  .gate h1 { font-size: 1.6rem; margin: 0; }
  #auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; padding-top: 10px; padding-bottom: 10px; }
  #auth > * { grid-column: 1 / -1; }
  #auth > .field:has(#f-name), #auth > .field:has(#f-pw) { grid-column: auto; }
  #auth > h2 { margin: 0 0 4px; }
  #auth .field { margin-bottom: 4px; }
  .gate .or { margin: 8px 0 6px; }
  .tab { font-size: .8125rem; }
  /* toasts sit over the enemy column, not the moves */
  #toasts { left: max(12px, env(safe-area-inset-left)); right: auto; max-width: calc(50vw - 24px); }
}
/* phone round, second pass (1.10) */
@media (hover: none) { kbd { display: none; } } /* key hints mean nothing on a touch screen */
.setbar .cell { display: contents; }
.act.worn .c b { color: inherit; } /* the seen % stays readable on a dark (pressed or suggested) move */
.worldmap .node circle.hit { fill: transparent; stroke: none; }
.acts-row [data-act="flask"] { min-width: 44px; justify-content: center; }
.item.gear.comm { align-items: start; }
.item.gear.comm .acts-row, .item.comm .acts-row:has([data-act="flask"]), .item.comm .acts-row:has([data-act="fold"]) { flex-direction: column; align-items: stretch; margin-top: 0; }
[data-act="compare"] .ico { margin: 0; }
[data-act="compare"] .ico + .lbl { margin-left: .3em; }
@media (pointer: coarse) {
  .pick { min-height: 44px; min-width: 44px; }
  .pick input, .selall input { width: 22px; height: 22px; }
  .selall { min-height: 44px; }
  .doc a.back { min-height: 44px; }
}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .delta, .forge-btn .cost, .gp-card .gp-stamp, .chat-log li .mono, .dm .mono, .dm-del, .chip-btn, .tab .short, .zone .n, .toast .n { font-size: .8125rem; }
  .chip-btn { min-height: 40px; }
  .discs { align-items: start; }
  /* gear: affixes in two lines (tap for the rest), Compare is an icon, so every button fits one row */
  .item.gear .lines:not(.open) { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .item.gear [data-act="compare"] { width: 44px; padding: 0; justify-content: center; }
  .item.gear [data-act="compare"] .lbl { display: none; }
  /* compare: a real table, the item names once on top */
  .cmp-tbl { display: table; width: 100%; }
  .cmp-tbl thead { display: table-header-group; }
  .cmp-tbl tbody { display: table-row-group; }
  .cmp-tbl tr { display: table-row; }
  .cmp-tbl th, .cmp-tbl td { display: table-cell; padding: 4px; border-bottom: 1px solid var(--rule); overflow-wrap: break-word; }
  .cmp-tbl th:first-child { white-space: normal; }
  .cmp-tbl td[data-label]::before { content: none; }
  .cmp-tbl .delta { white-space: nowrap; }
  /* setting out: two buttons a row */
  .huntbar > .setbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; width: 100%; }
  .setbar > .btn, .setbar .cell > .btn { justify-content: center; min-width: 0; white-space: normal; text-align: center; }
  .setbar .cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  /* skills: the level sits in its own column on every row */
  .feats tr { flex-wrap: nowrap; }
  .feats td.mono { flex: 0 0 3.2em; }
  .feats td + td { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 600px) {
  .road-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .road-tabs .btn { justify-content: center; min-width: 0; padding-left: 2px; padding-right: 2px; white-space: normal; text-align: center; }
  /* toasts in a fight drop from under the header, clear of the moves */
  html:has(#view .acts-dock) #toasts { top: calc(var(--top-h, 40px) + 6px); bottom: auto; pointer-events: none; }
  html:has(#view .acts-dock) .toast button, html:has(#view .acts-dock) .toast .row { pointer-events: auto; } /* the tip never blocks Back to camp; its own buttons still work */
}
@media (orientation: landscape) and (max-height: 500px) {
  /* a fight ends at the bottom of the page, so the pinned moves never slide up under the header */
  .shell:has(.fight > .acts-dock) { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}
/* phones, satchel (1.12): worn as three tiles, short gear cards, a compare sheet with the names once on top, fewer frames */
.slot .name { font-family: var(--display); font-size: 1.08rem; }
.slot[data-act] { cursor: pointer; }
.cmp-name { margin: 0 0 6px; } .cmp-name .k { font-variant: small-caps; letter-spacing: .06em; color: var(--muted); }
.cmp-name + .cmp { margin-top: 8px; }
.frames-all > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; }
.chip-sel { flex: none; width: auto; min-height: 34px; padding: 2px 6px; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: .8125rem; }
.bag-tips { margin: 8px 0 0; }
@media (max-width: 600px) {
  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .slot { padding: 6px; }
  .slot .name { font-size: .95rem; line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .slot .small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
  .slot p.muted { margin: 2px 0 0; }
  /* history, kills, the tier warning and the trained-with line are read in the Compare sheet */
  .m-more, .slot .m-more { display: none; }
  .item.gear .acts-row .btn.small { min-height: 40px; }
  .item.gear .acts-row .lockbtn, .item.gear [data-act="compare"] { width: 40px; }
  .item.gear .acts-row { margin-top: 3px; }
  .chip-sel { min-height: 40px; }
  .bag .bulk select { width: auto; min-width: 0; padding: 2px 4px; }
  .bag .bulk { gap: 4px; } .bag .bulk .btn { padding-left: .5em; padding-right: .5em; }
  .chiprow .chip-sep { display: none; }
  .cmp-tbl .cx { display: none; }
  .frames { grid-template-columns: 1fr; gap: 6px; }
  .frame-tile { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 10px; align-items: start; }
  .frame-tile img { grid-row: 1 / span 3; }
  .frame-tile .btn { margin-top: 2px; justify-self: start; }
}
/* road on a phone (1.12) */
.road-tabs .rt-short { display: none; }
.qr-fold > summary, .fold.members > summary { min-height: 40px; box-sizing: border-box; }
/* guild note and chest: the button stays on the line of its field */
[data-form="guild-motd"], [data-form="chest-put"] { flex-wrap: nowrap; }
[data-form="guild-motd"] .search, [data-form="chest-put"] select { flex: 1; width: auto; min-width: 0; margin-bottom: 0; }
.call-hint { display: block; margin-top: 6px; }
#rift-num { white-space: nowrap; margin-left: 8px; }
label.check a { padding-block: 9px; }
.dm-del { min-height: 40px; min-width: 40px; padding: 0 8px; }
@media (max-width: 600px) {
  .road-tabs { gap: 4px; margin-bottom: 10px; }
  .road-tabs .btn, .road-tabs .btn.small { min-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8125rem; display: block; line-height: 40px; padding-top: 0; padding-bottom: 0; }
  .road-tabs .btn svg { display: none; }
  .road-tabs .rt-long { display: none; } .road-tabs .rt-short { display: inline; }
  .item.friend .acts-row { flex-wrap: nowrap; gap: 4px; width: 100%; }
  .item.friend .acts-row .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding-left: 4px; padding-right: 4px; }
  .item.friend .acts-row .btn svg { display: none; }
}
/* phones, grow + social (1.13) */
.letter-rows { display: grid; gap: 4px; }
.letter-row { width: 100%; min-height: 44px; justify-content: space-between; gap: 8px; text-align: left; white-space: normal; }
.deeds-h { font-size: 1rem; margin: 10px 0 2px; }
.best-zone > summary { min-height: 40px; display: flex; align-items: center; gap: 8px; }
@media (max-width: 600px) {
  .deeds .lines { font-size: 13px; }
  .deeds .item { padding: 7px 2px; }
  .path-discs .disc { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
  .path-discs .disc > * { grid-column: 1; }
  .path-discs .disc > .btn { grid-column: 2; grid-row: 1 / span 2; min-height: 40px; }
  .path-discs .disc > .fold { grid-column: 1 / -1; }
  .scores-tbl tr, .marks-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; align-items: center; }
  .scores-tbl th { grid-column: 1; grid-row: 1; }
  .scores-tbl td:nth-child(2) { grid-column: 1 / 3; grid-row: 2; font-size: 13px; }
  .scores-tbl td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .scores-tbl td:nth-child(4) { grid-column: 3; grid-row: 1 / 3; }
  .scores-tbl .btn { min-height: 40px; min-width: 44px; justify-content: center; }
  .marks-tbl tr { grid-template-columns: minmax(0, 1fr) auto; }
  .marks-tbl td:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
  .marks-tbl td:nth-child(2), .marks-tbl td:nth-child(3) { grid-column: 2; text-align: right; }
}
/* landscape phones: the tent table side by side, the stake and bets beside the stage (1.13) */
@media (orientation: landscape) and (max-height: 500px) {
  #modal .box:has(.den-sheet) { max-width: 720px; width: calc(100vw - 24px); }
  .den-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .den-sheet > * { grid-column: 1 / -1; }
  .den-sheet > h2 { margin: 0 0 4px; font-size: 1.3rem; }
  .den-sheet > .den-tabs { margin-bottom: 6px; }
  .den-sheet > .den-tabs + p { grid-column: 1; grid-row: 3 / span 2; margin: 0; }
  .den-sheet > #den-stage { grid-column: 1; grid-row: 5; align-self: center; }
  /* Leave the table sits under the dice, beside the bets, so the bets are not under a pinned bar */
  #modal .box .den-sheet > .actions:last-child { grid-column: 1; grid-row: 6; position: static; border-top: 0; padding: 0; margin: 4px 0; align-self: center; justify-content: center; }
  .den-sheet > .den-result { grid-column: 2; grid-row: 3; margin: 0; min-height: 1.3em; }
  .den-sheet > .den-stake { grid-column: 2; grid-row: 4; }
  .den-sheet > .den-steps { grid-column: 2; grid-row: 5; margin: 4px 0; }
  .den-sheet > .den-bets { grid-column: 2; grid-row: 6; margin: 4px 0; }
  .den-stage { max-width: 150px; max-height: 26dvh; margin: 0 auto; }
  .den-sheet > .den-stake { margin: 0; }
  .den-wheel-wrap .den-stage { max-width: 110px; }
  .den-bet { min-height: 52px; }
  .road-tabs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; }
  .road-tabs .btn, .road-tabs .btn.small { min-width: 0; min-height: 40px; line-height: 40px; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8125rem; display: block; text-align: center; }
  .road-tabs .btn svg, .road-tabs .rt-long { display: none; }
  .road-tabs .rt-short { display: inline; }
}
/* phones: a bet is name + one line of odds; the range sits after the name */
@media (max-width: 600px) {
  .den-bet { min-height: 56px; }
  .den-bet > .small:not(.mono) { display: none; }
  .den-result { min-height: 1.3em; }
}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  /* settings: label and select on one row */
  [data-fold="s-look"] .field:has(> select) { grid-template-columns: minmax(0, 1fr) minmax(0, 55%); align-items: center; column-gap: 8px; margin-bottom: 8px; }
  [data-fold="s-look"] .field:has(> select) > :not(label):not(select) { grid-column: 1 / -1; }
  [data-fold="s-look"] .field:has(> select) > select { width: 100%; min-width: 0; }
}
/* the reader header stays one row on small phones */
.rd-short { display: none; }
@media (max-width: 400px) {
  .rd-top { gap: 6px; }
  .rd-top .btn { white-space: nowrap; }
  .rd-count { white-space: nowrap; }
  .rd-count .rd-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rd-count .rd-short { display: inline; }
  .rd-size input { width: 64px; }
}
/* road mail: the last message gets two lines */
.chats .lines { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.head-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* trades: the Cancel sits beside Counter */
.item .acts-row form.filters { align-items: center; }
form[data-form="trade-new"] .field label { display: flex; align-items: center; gap: 8px; }
form[data-form="trade-new"] .field input { flex: 1; min-width: 0; }
/* character creation: Back / Next always in reach (1.13) */
.create-bar { position: sticky; bottom: 0; z-index: 5; background: var(--paper); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); }

/* ---------- theme worlds (1.14) ----------
   The coloured themes are more than colours: each has its own texture, corners, light and a moving layer behind
   the page (.atmo, filled by atmo.js). data-depth grows with the player: 1 Act I, 2 Act II, 3 Act III, 4 after a
   rekindle, and each step adds a little more. Battery saver and reduced motion keep everything still. */
:root[data-theme="fire"] { --glow: #ff6a2a; --glow-2: #ffc24a; --ga: #ffb347; --gb: #ff6a2a; --on: #2a0d05; --r: 2px; --rb: 1px;
  --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23ff6a2a' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M0 60l30 8 22-14 34 20 18-6 40 24 30-10 66 12'/%3E%3Cpath d='M52 54l-8 40 14 30-6 44'/%3E%3Cpath d='M140 92l10 36-16 28 8 50 30 34'/%3E%3Cpath d='M0 190l40-6 28 16 46-12'/%3E%3Cpath d='M180 20l-6 30 24 22 42-6'/%3E%3C/g%3E%3Cg fill='%23ff8a3d' fill-opacity='.08'%3E%3Ccircle cx='60' cy='126' r='1.5'/%3E%3Ccircle cx='196' cy='180' r='1.2'/%3E%3Ccircle cx='120' cy='30' r='1'/%3E%3C/g%3E%3C/svg%3E"); --sky: radial-gradient(120% 60% at 50% 110%, rgba(255, 80, 20, .16), transparent 70%);
  --glyph: polygon(50% 0, 66% 30%, 90% 42%, 80% 72%, 50% 100%, 20% 72%, 10% 42%, 34% 30%); }
:root[data-theme="ocean"] { --glow: #4fc8ff; --glow-2: #4fd3b5; --ga: #8fe6ff; --gb: #4fa8ff; --on: #04202e; --r: 14px; --rb: 10px;
  --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='48' viewBox='0 0 160 48'%3E%3Cg fill='none' stroke='%236fb4ff' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M0 14q20-10 40 0t40 0 40 0 40 0'/%3E%3Cpath d='M0 38q20-8 40 0t40 0 40 0 40 0' stroke-opacity='.045'/%3E%3C/g%3E%3C/svg%3E"); --sky: radial-gradient(120% 70% at 50% -20%, rgba(90, 190, 255, .16), transparent 70%);
  --glyph: circle(50% at 50% 50%); }
:root[data-theme="forest"] { --glow: #8be07a; --glow-2: #e8d36a; --ga: #b4ee8f; --gb: #5fbf72; --on: #0a1f0f; --r: 16px 3px 16px 3px; --rb: 10px 2px 10px 2px;
  --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%2372d394' stroke-opacity='.06' stroke-width='1.1'%3E%3Cpath d='M40 150c-20-40 10-90 60-100-6 50-26 86-60 100z'/%3E%3Cpath d='M40 150c14-30 30-60 60-100'/%3E%3Cpath d='M60 112l-14-8M72 92l-18-4M84 74l-14-10'/%3E%3Cpath d='M150 60c30 10 44 46 34 80-34-12-46-44-34-80z'/%3E%3Cpath d='M150 60c14 26 26 50 34 80'/%3E%3C/g%3E%3C/svg%3E"); --sky: radial-gradient(110% 60% at 50% -10%, rgba(140, 220, 120, .1), transparent 70%);
  --glyph: polygon(0 100%, 10% 40%, 45% 8%, 100% 0, 92% 55%, 60% 90%); }
:root[data-theme="snow"] { --glow: #bfe3ff; --glow-2: #f4ecc4; --ga: #f4faff; --gb: #b6daf4; --on: #0b1a2b; --r: 14px; --rb: 10px;
  --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg stroke='%23dcefff' stroke-opacity='.07' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M30 22v16M23 26l14 8M23 34l14-8M150 60v12M145 63l10 6M145 69l10-6M90 140v18M82 144l16 9M82 153l16-9M170 170v10M166 172l8 5M166 177l8-5'/%3E%3C/g%3E%3C/svg%3E");
  --sky: radial-gradient(70% 50% at 85% -5%, rgba(190, 220, 255, .16), transparent 70%), linear-gradient(180deg, #08101b, transparent 70%);
  --glyph: polygon(50% 0, 58% 38%, 95% 25%, 64% 50%, 95% 75%, 58% 62%, 50% 100%, 42% 62%, 5% 75%, 36% 50%, 5% 25%, 42% 38%); }
:root[data-theme="xmas"] { --glow: #ff5a4a; --glow-2: #f2c14e; --ga: #e0463a; --gb: #a3211a; --on: #fff6e8; --r: 8px; --rb: 6px;
  --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%23f2c14e' fill-opacity='.09'%3E%3Cpath d='M30 20l2 6 6 2-6 2-2 6-2-6-6-2 6-2zM160 70l1.5 4.5 4.5 1.5-4.5 1.5-1.5 4.5-1.5-4.5-4.5-1.5 4.5-1.5zM90 160l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.08'%3E%3Ccircle cx='120' cy='30' r='1.4'/%3E%3Ccircle cx='60' cy='100' r='1'/%3E%3Ccircle cx='190' cy='140' r='1.6'/%3E%3Ccircle cx='20' cy='190' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  --sky: linear-gradient(180deg, #07131c, transparent 55%), radial-gradient(120% 70% at 50% 110%, rgba(242, 193, 78, .14), transparent 70%);
  --glyph: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 92%, 50% 70%, 21% 92%, 32% 57%, 2% 35%, 39% 35%); }
:root[data-theme="dusk"] { --glow: #b59cff; --glow-2: #6fd6c0; --ga: #e3b8ff; --gb: #9a8cff; --on: #150d24; --r: 6px; --rb: 4px;
  --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='20' cy='30' r='.8' fill-opacity='.35'/%3E%3Ccircle cx='90' cy='12' r='.6' fill-opacity='.3'/%3E%3Ccircle cx='160' cy='50' r='1' fill-opacity='.4'/%3E%3Ccircle cx='60' cy='90' r='.5' fill-opacity='.25'/%3E%3Ccircle cx='200' cy='120' r='.7' fill-opacity='.3'/%3E%3Ccircle cx='120' cy='140' r='.9' fill-opacity='.35'/%3E%3Ccircle cx='30' cy='180' r='.6' fill-opacity='.3'/%3E%3Ccircle cx='180' cy='200' r='.5' fill-opacity='.25'/%3E%3Ccircle cx='100' cy='70' r='.4' fill-opacity='.3'/%3E%3C/g%3E%3C/svg%3E"); --sky: radial-gradient(120% 60% at 50% -10%, rgba(150, 120, 255, .16), transparent 70%);
  --glyph: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
:root[data-fx] { --edge: linear-gradient(90deg, transparent, var(--glow) 20%, var(--glow-2) 50%, var(--glow) 80%, transparent);
  --halo: color-mix(in srgb, var(--glow) 16%, transparent); }

/* the page: texture and light */
:root[data-fx] body { background-color: var(--paper); background-image: var(--sky), var(--tex); background-attachment: fixed; }
:root[data-fx] .panel, :root[data-fx] #modal .box { border-radius: var(--r); border-color: color-mix(in srgb, var(--glow) 30%, var(--rule)); }
:root[data-fx] .panel { position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--glow) 7%, var(--card)), color-mix(in srgb, var(--card) 92%, transparent) 140px);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .7), inset 0 1px 0 color-mix(in srgb, var(--glow) 8%, transparent); }
:root[data-fx] .panel::before { content: ''; position: absolute; left: 14px; right: 14px; top: -1px; height: 2px; background: var(--edge); background-size: 200% 100%;
  opacity: .35; pointer-events: none; border-radius: 2px; }
:root[data-fx][data-depth="3"] .panel::before, :root[data-fx][data-depth="4"] .panel::before { opacity: .55; }
:root[data-fx] .panel > h2::before, :root[data-fx] .section-head h2::before, :root[data-fx] #modal .box > h2::before {
  content: ''; display: inline-block; width: .42em; height: .42em; margin-right: .42em; vertical-align: .14em; background: linear-gradient(135deg, var(--glow-2), var(--glow));
  clip-path: var(--glyph); }
:root[data-fx] h1, :root[data-fx] h2 { text-shadow: 0 0 14px var(--halo); }
:root[data-fx] .lede { color: var(--ink-2); }

/* header and tabs */
:root[data-fx] .top { border-bottom: 2px solid transparent; border-image: var(--edge) 1; }
:root[data-fx] .brand, :root[data-fx] .gate h1 { color: var(--glow); text-shadow: 0 0 12px var(--halo); }
:root[data-fx] .brand .ico, :root[data-fx] .gate h1 .ico { filter: drop-shadow(0 0 3px var(--halo)); animation: fx-flicker 3.4s ease-in-out infinite; }
:root[data-fx][data-depth="4"] .brand .long, :root[data-fx] .gate h1 { background: linear-gradient(90deg, var(--glow), var(--glow-2), var(--glow)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; }
:root[data-fx][data-depth="4"] .brand .long { color: transparent; }
:root[data-fx] .gate h1 { -webkit-text-fill-color: transparent; }
:root[data-fx] .gate h1 .ico { -webkit-text-fill-color: initial; color: var(--glow); }
:root[data-fx] .tab[aria-current="page"] { color: var(--glow); box-shadow: inset 0 -2px 0 var(--glow); }
@media (max-width: 600px) {
  :root[data-fx] .tabs { border-top: 2px solid transparent; border-image: var(--edge) 1; background: color-mix(in srgb, var(--paper) 94%, var(--glow)); }
  :root[data-fx] .tab[aria-current="page"] { box-shadow: inset 0 2px 0 var(--glow); }
}

/* buttons, fields, moves */
:root[data-fx] .btn, :root[data-fx] .act, :root[data-fx] .chip-btn, :root[data-fx] .zone { border-radius: var(--rb); }
:root[data-fx] .btn, :root[data-fx] .act { border-color: color-mix(in srgb, var(--glow) 45%, var(--ink-2)); transition: box-shadow .2s, transform .08s, border-color .2s; }
:root[data-fx] .btn:hover:not(:disabled), :root[data-fx] .act:hover:not(:disabled) { border-color: var(--glow); box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 60%, transparent); }
:root[data-fx] .btn:active:not(:disabled), :root[data-fx] .act:active:not(:disabled) { transform: translateY(1px) scale(.99); }
:root[data-fx] .btn.primary { background: linear-gradient(180deg, var(--ga), var(--gb)); color: var(--on); border-color: transparent; font-weight: 600;
  box-shadow: 0 2px 8px -5px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .25); }
:root[data-fx] .btn.primary:disabled { filter: saturate(.3); opacity: .55; }
:root[data-fx] .act { background: linear-gradient(180deg, color-mix(in srgb, var(--glow) 6%, var(--card)), var(--card)); }
:root[data-fx] .act.hint { box-shadow: 0 0 0 1px var(--glow); }
:root[data-fx] input, :root[data-fx] select, :root[data-fx] textarea, :root[data-fx] .search { border-radius: var(--rb); }
:root[data-fx] input:focus-visible, :root[data-fx] select:focus-visible, :root[data-fx] textarea:focus-visible { outline: 2px solid var(--glow); outline-offset: 1px; }

/* bars: rounded, glowing, a slow sheen running through */
:root[data-fx] .bar { border-radius: 99px; border-color: color-mix(in srgb, var(--glow) 30%, var(--rule)); background: color-mix(in srgb, var(--paper) 70%, #000); }
:root[data-fx] .bar i { border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 65%, #000), var(--c) 75%, color-mix(in srgb, var(--c) 55%, #fff)); }
:root[data-fx] .bar.hp i, :root[data-fx] .bar.xp i, :root[data-fx] .bar.big i, :root[data-fx] .bar.rift i { overflow: hidden; }
:root[data-fx] .bar.hp i::after, :root[data-fx] .bar.xp i::after, :root[data-fx] .bar.big i::after, :root[data-fx] .bar.rift i::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: inherit; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent);
  transform: translateX(-100%); animation: fx-sheen 3.2s linear infinite; will-change: transform; }

/* places, fights, notes */
:root[data-fx] .zone.cur { background: linear-gradient(90deg, color-mix(in srgb, var(--glow) 9%, transparent), transparent 70%); box-shadow: inset 3px 0 0 var(--glow); }
:root[data-fx] .plate-boss { color: var(--glow); filter: drop-shadow(0 0 6px var(--halo)); }
:root[data-fx] .log .crit { color: var(--glow-2); }
:root[data-fx] .toast { border-radius: var(--r); border-left: 3px solid var(--glow); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8); }
:root[data-fx] #modal { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
:root[data-fx] #modal .box { outline-color: color-mix(in srgb, var(--glow) 35%, transparent); box-shadow: 0 0 30px -18px var(--glow); }
:root[data-fx] .slot, :root[data-fx] .node, :root[data-fx] .item.sel { border-radius: var(--rb); }

/* each world's own touch */
:root[data-theme="fire"] .panel { background-image: linear-gradient(0deg, rgba(255, 80, 20, .07), transparent 60px),
  linear-gradient(180deg, color-mix(in srgb, var(--glow) 7%, var(--card)), color-mix(in srgb, var(--card) 92%, transparent) 140px); }
:root[data-theme="fire"] h1, :root[data-theme="fire"] h2 { letter-spacing: .01em; }
:root[data-theme="ocean"] .panel { box-shadow: 0 14px 34px -18px rgba(0, 10, 30, .9), inset 0 1px 0 rgba(170, 230, 255, .18), inset 0 -30px 40px -30px rgba(79, 200, 255, .12); }
:root[data-theme="ocean"] .btn.primary { border-radius: 99px; }
:root[data-theme="forest"] .panel { border-top: 2px solid color-mix(in srgb, var(--glow) 50%, var(--rule)); }
:root[data-theme="forest"] .panel::before { top: -2px; }
:root[data-theme="dusk"] .panel { outline: 1px solid color-mix(in srgb, var(--glow) 14%, transparent); outline-offset: 3px; }
:root[data-theme="dusk"] h1, :root[data-theme="dusk"] h2 { text-shadow: 0 0 14px rgba(181, 156, 255, .2); }

/* the moving layer behind the page */
.atmo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.atmo::before { content: ''; position: absolute; inset: -10%; opacity: calc(.35 + var(--amb, 0) * .65); }
:root[data-depth="2"] .atmo { --amb: .4; } :root[data-depth="3"] .atmo { --amb: .75; } :root[data-depth="4"] .atmo { --amb: 1; }
.atmo i { position: absolute; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.atmo b { position: absolute; display: none; }

/* fire: embers rise from the bottom, a heat glow below */
[data-theme="fire"] .atmo::before { background: radial-gradient(70% 40% at 50% 100%, rgba(255, 90, 30, .14), transparent 70%); }
:root[data-theme="fire"][data-depth="3"] .atmo::before, :root[data-theme="fire"][data-depth="4"] .atmo::before { animation: fx-heat 5s ease-in-out infinite; }
[data-theme="fire"] .atmo i { bottom: -12px; background: radial-gradient(circle, #ffe2a0, #ff7a2a 55%, transparent 72%); box-shadow: 0 0 4px rgba(255, 106, 42, .45);
  animation: fx-rise var(--d) linear var(--w) infinite; }
[data-theme="fire"] .atmo b { display: block; left: 0; right: 0; bottom: 0; height: 30vh; background: linear-gradient(0deg, rgba(255, 70, 20, .06), transparent); animation: fx-heat 4s ease-in-out infinite; }
/* ocean: bubbles wobble upwards, light falls in rays from the surface */
[data-theme="ocean"] .atmo::before { background: repeating-conic-gradient(from 160deg at 50% -30%, rgba(140, 215, 255, .05) 0 3deg, transparent 3deg 11deg);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%); }
:root[data-theme="ocean"]:not([data-depth="1"]) .atmo::before { animation: fx-sway 14s ease-in-out infinite alternate; }
[data-theme="ocean"] .atmo i { bottom: -14px; width: calc(var(--s) * 2); height: calc(var(--s) * 2); border: 1px solid rgba(170, 225, 255, .45);
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .45), transparent 45%); animation: fx-bubble var(--d) linear var(--w) infinite; }
[data-theme="ocean"] .atmo b { display: block; inset: 0; background: radial-gradient(40% 30% at 30% 20%, rgba(79, 211, 181, .07), transparent), radial-gradient(35% 25% at 75% 35%, rgba(79, 168, 255, .07), transparent);
  animation: fx-drift 18s ease-in-out infinite alternate; }
/* forest: fireflies wander and blink, light through leaves */
[data-theme="forest"] .atmo::before { background: radial-gradient(30% 50% at 20% -5%, rgba(232, 211, 106, .12), transparent 70%), radial-gradient(25% 45% at 80% -5%, rgba(139, 224, 122, .1), transparent 70%); }
:root[data-theme="forest"]:not([data-depth="1"]) .atmo::before { animation: fx-sway 16s ease-in-out infinite alternate; }
[data-theme="forest"] .atmo i { top: var(--y); background: radial-gradient(circle, #fbffc0, #c8f06a 50%, transparent 72%); box-shadow: 0 0 5px 1px rgba(200, 240, 106, .35);
  animation: fx-firefly var(--d) ease-in-out var(--w) infinite; }
[data-theme="forest"] .atmo b { display: block; left: 0; right: 0; bottom: 0; height: 40vh; background: linear-gradient(0deg, rgba(20, 50, 25, .45), transparent); }
/* dusk: stars twinkle, a shooting star now and then, an aurora at the top in the late game */
[data-theme="dusk"] .atmo::before { inset: -10% -40% auto; height: 50%; opacity: calc(var(--amb, 0) * .6);
  background: radial-gradient(40% 60% at 25% 30%, rgba(111, 214, 192, .2), transparent 70%), radial-gradient(40% 60% at 50% 20%, rgba(159, 168, 255, .22), transparent 70%),
    radial-gradient(40% 60% at 75% 30%, rgba(215, 156, 245, .2), transparent 70%);
  animation: fx-aurora 20s ease-in-out infinite alternate; will-change: transform; }
[data-theme="dusk"] .atmo i { top: var(--y); width: calc(var(--s) * .7); height: calc(var(--s) * .7); background: #fff; box-shadow: 0 0 3px rgba(200, 190, 255, .5);
  animation: fx-twinkle calc(var(--d) * .4) ease-in-out var(--w) infinite; }
[data-theme="dusk"] .atmo b { display: block; top: 12%; left: -10%; width: 120px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff);
  opacity: 0; transform: rotate(-18deg); animation: fx-shoot 11s ease-in 3s infinite; }
[data-theme="dusk"] .atmo b.b2 { top: 30%; animation-delay: 8s; animation-duration: 15s; }

/* wet panels: a cold sheen on top, rain beading on the glass */
/* the rain: three sheets of streaks, leaning with the wind, each sliding down by its own tile */
/* heavy cloud along the top, a wet sheen along the bottom */
/* drops on the glass: hang a while, then run down and are gone */
/* the lightning shows over the page too: a quick soft flash that never takes a tap */
html[data-saver] body::after, html[data-saver] #view::before { animation: none !important; }
@keyframes fx-snow { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .95; } 30% { transform: translate(22px, 32vh); } 55% { transform: translate(-16px, 60vh); }
  80% { transform: translate(18px, 86vh); opacity: .9; } 100% { transform: translate(0, 108vh); opacity: 0; } }
@keyframes fx-rise { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 8% { opacity: .7; } 60% { opacity: .5; } 100% { transform: translate(40px, -108vh) scale(.4); opacity: 0; } }
@keyframes fx-rise-b { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 8% { opacity: .7; } 60% { opacity: .5; } 100% { transform: translate(-50px, -108vh) scale(.4); opacity: 0; } }
@keyframes fx-rise-c { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 8% { opacity: .7; } 60% { opacity: .5; } 100% { transform: translate(10px, -108vh) scale(.4); opacity: 0; } }
[data-theme="fire"] .atmo i:nth-child(3n+1) { animation-name: fx-rise-b; } [data-theme="fire"] .atmo i:nth-child(3n+2) { animation-name: fx-rise-c; }
@keyframes fx-bubble { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .8; } 25% { transform: translate(14px, -26vh); } 50% { transform: translate(-10px, -52vh); }
  75% { transform: translate(12px, -78vh); opacity: .6; } 100% { transform: translate(0, -108vh); opacity: 0; } }
@keyframes fx-firefly-b { 0%, 100% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .7; } 35% { opacity: .1; } 50% { transform: translate(-60px, 40px); opacity: .75; } 70% { opacity: .2; } 85% { opacity: .85; } }
@keyframes fx-firefly-c { 0%, 100% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .7; } 35% { opacity: .1; } 50% { transform: translate(30px, -50px); opacity: .75; } 70% { opacity: .2; } 85% { opacity: .85; } }
[data-theme="forest"] .atmo i:nth-child(3n+1) { animation-name: fx-firefly-b; } [data-theme="forest"] .atmo i:nth-child(3n+2) { animation-name: fx-firefly-c; }
@keyframes fx-firefly { 0%, 100% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .7; } 35% { opacity: .1; } 50% { transform: translate(55px, 30px); opacity: .75; }
  70% { opacity: .2; } 85% { opacity: .85; } }
@keyframes fx-twinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: .8; transform: scale(1.1); } }
@keyframes fx-shoot { 0%, 88% { opacity: 0; transform: translate(0, 0) rotate(-18deg); } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(80vw, 26vh) rotate(-18deg); } }
@keyframes fx-aurora { from { transform: translateX(-8%) skewY(-2deg); } to { transform: translateX(8%) skewY(2deg) translateY(2%); } }
@keyframes fx-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes fx-drift { from { transform: translate(-3%, 0); } to { transform: translate(3%, 2%); } }
@keyframes fx-heat { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes fx-edge { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@keyframes fx-sheen { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes fx-breathe { 0%, 100% { filter: drop-shadow(0 0 6px var(--halo)); } 50% { filter: drop-shadow(0 0 14px var(--glow)); } }
@keyframes fx-flicker { 0%, 100% { opacity: 1; transform: scale(1); } 40% { opacity: .85; transform: scale(.96) rotate(-2deg); } 55% { opacity: 1; transform: scale(1.04) rotate(1deg); } 70% { opacity: .9; } }

/* nothing moves with battery saver or reduced motion: the particles stand still where they are */
html[data-saver] .atmo i { opacity: .5; top: var(--y); bottom: auto; }
html[data-saver] .atmo b { display: none; }
html.still .atmo *, html.still .atmo::before, :root.still[data-fx] .panel::before, :root.still[data-fx] .brand .ico, :root.still[data-fx] .gate h1, :root.still[data-fx] .gate h1 .ico, :root.still[data-fx] .brand .long, :root.still[data-fx] .bar i::after, :root.still[data-fx] .plate-boss, :root.still[data-fx] .act.hint { animation: none !important; }
html.still .atmo i { opacity: .5; top: var(--y); bottom: auto; }
html.still .atmo b { display: none !important; }

/* the theme picker (Settings and the sign-in page) */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.field .label { display: block; margin-bottom: 4px; }
.theme-sw { display: grid; gap: 4px; padding: 5px; border: 1px solid var(--rule-strong); background: var(--card); color: var(--ink); cursor: pointer; font-size: .85rem; text-align: left; border-radius: var(--rb, 0); min-height: 44px; }
.theme-sw .sw { display: block; height: 26px; border-radius: inherit; background: linear-gradient(135deg, var(--a) 0 55%, var(--b) 55% 78%, var(--c) 78%); border: 1px solid rgba(127, 127, 127, .35); }
.theme-sw[aria-pressed="true"] { border-color: var(--glow, var(--ink)); box-shadow: 0 0 0 1px var(--glow, var(--ink)); font-weight: 600; }
.gate .themes { margin-top: 14px; }

/* ---------- the map (1.16): Mags Tolley's sheet on the camp table ---------- */
.tm-table { --tm-lamp: var(--glow, #ffb347); padding: 10px; border-radius: 6px; background: radial-gradient(120% 90% at 50% 40%, #3a2a1c, #1c140d 75%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .65); margin-top: 6px; }
.worldmap.tablemap { border: 0; background: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); overflow: visible; }
.tablemap text { font-family: var(--display); fill: #3b2a1a; }
.tablemap .tm-paper { stroke: #8a6e45; stroke-width: .25; }
.tablemap .tm-coast { fill: none; stroke: #3b2a1a; stroke-width: .38; stroke-linecap: round; opacity: .75; }
.tablemap .tm-coast.thin { stroke-width: .16; opacity: .45; }
.tablemap .tm-wave { fill: none; stroke: #3b4f5c; stroke-width: .2; opacity: .55; stroke-linecap: round; }
.tablemap .tm-act { font-size: 2.5px; font-style: italic; opacity: .75; }
.tablemap .tm-rose circle { fill: none; stroke: #3b2a1a; stroke-width: .15; opacity: .6; }
.tablemap .tm-rose path { fill: #6b2a14; opacity: .75; }
.tablemap .tm-rose text { font-size: 1.8px; text-anchor: middle; }
.tablemap .tm-mark { font-size: 1.6px; font-style: italic; opacity: .6; }
.tablemap .tm-route { fill: none; stroke-linecap: round; }
.tablemap .tm-route.walked { stroke: #3b2a1a; stroke-width: .42; stroke-dasharray: .2 1.1; opacity: .85; }
.tablemap .tm-route.pencil { stroke: #7a6a55; stroke-width: .22; stroke-dasharray: .9 .7; opacity: .6; }
.tablemap .tm-step { fill: #3b2a1a; opacity: .5; }
.tablemap .tm-place .tm-hit { fill: transparent; }
.tablemap .tm-ring { fill: #efe3c6; stroke: #3b2a1a; stroke-width: .28; opacity: .9; }
.tablemap .tm-glyph path { fill: none; stroke: #2e2013; stroke-width: .55; stroke-linecap: round; stroke-linejoin: round; }
.tablemap .tm-place.next .tm-ring { fill: none; stroke: #7a6a55; stroke-dasharray: .6 .5; opacity: .7; }
.tablemap .tm-place.next .tm-glyph { opacity: .25; }
.tablemap .tm-q { font-size: 3.6px; fill: #6b5a44; }
.tablemap .tm-place.open { cursor: pointer; }
.tablemap .tm-place.open:hover .tm-ring, .tablemap .tm-place.open:focus-visible .tm-ring { fill: #fff4d8; stroke: #6b2a14; stroke-width: .45; }
.tablemap .tm-place:focus { outline: none; }
.tablemap .tm-place.done .tm-ring { fill: #e6d8b4; }
.tablemap .tm-seal circle { fill: #9c2a1a; stroke: #6b1a10; stroke-width: .2; }
.tablemap .tm-seal.full circle { fill: #2f7a3e; stroke: #174a22; }
.tablemap .tm-seal path { fill: none; stroke: #f3d9b0; stroke-width: .32; stroke-linecap: round; }
.tablemap .tm-flag { fill: #9c3d1f; stroke: #3b2a1a; stroke-width: .2; opacity: .8; }
.tablemap .tm-flag.ready { fill: #c4361a; animation: tm-wave 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: left bottom; }
.tablemap .tm-unknown { font-size: 2.1px; font-style: italic; opacity: .45; }
.tablemap .tm-name { font-size: 1.7px; display: none; paint-order: stroke; stroke: #efe3c6; stroke-width: .5; }
.tablemap.zoomed .tm-name { display: block; }
.tablemap .tm-spur { fill: none; stroke: #5b2f55; stroke-width: .22; stroke-dasharray: .5 .5; opacity: .7; }
.tablemap .tm-site { cursor: pointer; }
.tablemap .tm-site .tm-hit { fill: transparent; }
.tablemap .tm-site path { stroke: #7b3f6e; stroke-width: .55; stroke-linecap: round; }
.tablemap .tm-pawn { pointer-events: none; }
.tablemap .tm-light { animation: tm-lamp 2.8s steps(6) infinite; transform-box: fill-box; transform-origin: center; }
.tablemap .tm-base { fill: #1c140d; opacity: .35; }
.tablemap .tm-body { fill: #2a1d12; stroke: #c99a38; stroke-width: .18; }
.tablemap .tm-cap { fill: #1c140d; stroke: #c99a38; stroke-width: .15; }
.tablemap .tm-ring2 { stroke: #c99a38; stroke-width: .25; }
.tablemap .tm-flame { fill: var(--tm-lamp); animation: tm-flick 1.3s steps(4) infinite; }
.tablemap .tm-pawn.walking .tm-fig { animation: tm-bob .22s ease-in-out infinite alternate; }
@keyframes tm-lamp { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes tm-flick { 0%, 100% { opacity: 1; } 40% { opacity: .7; } 60% { opacity: .95; } }
@keyframes tm-bob { from { transform: translate(0, -3.4px) rotate(-4deg); } to { transform: translate(0, -3.4px) rotate(4deg); } }
@keyframes tm-wave { 0%, 100% { transform: skewY(0); } 50% { transform: skewY(-8deg); } }
html.still .tablemap * { animation: none !important; }
.tm-card .tm-card-act { margin: 0 0 2px; color: var(--muted); }
.tm-card h2 { margin-bottom: 6px; }

/* ---------- the map, full screen (1.16): the sheet on the camp table ---------- */
#atlas { position: fixed; inset: 0; z-index: 70; overflow: hidden; color: #f3e6c8; --tilt: 26deg; --lamp: var(--glow, #ffb347);
  touch-action: none; user-select: none; -webkit-user-select: none; }
.at-room { position: absolute; inset: 0; background:
  radial-gradient(90% 60% at 50% 100%, color-mix(in srgb, var(--lamp) 12%, transparent), transparent 60%),
  radial-gradient(140% 90% at 50% 30%, #3c2a1b 0%, #24180f 55%, #0f0a06 100%),
  repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 46px, rgba(255, 220, 170, .03) 46px 48px, transparent 48px 120px); }
.at-room::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 70% at 50% 45%, transparent 40%, rgba(0, 0, 0, .7)); }
.at-view { position: absolute; inset: 0; perspective: 1000px; perspective-origin: 50% 0%; }
.at-tilt { position: absolute; inset: 0; transform: rotateX(var(--tilt)); transform-origin: 50% 60%; transform-style: preserve-3d; }
.at-plane { position: absolute; top: 0; left: 50%; transform-style: preserve-3d; translate: -50% 0; transform-origin: 50% 0; }
.at-sheet { display: block; position: absolute; left: 0; overflow: hidden; }
/* nothing inside the tilted sheet may animate or have opacity of its own: the browser then draws it at a lower resolution (blurred).
   Transparency goes into fill-opacity / stroke-opacity instead. */
.at-under { fill: #000; fill-opacity: .45; }
#atlas.intro .at-view { animation: at-in .6s ease-out; }
.at-sheet text { font-family: var(--display); fill: #3b2a1a; }
.at-paper { fill: url(#at-burn); stroke: #8a6e45; stroke-width: .3; }
.at-sea { fill: #4f7186; fill-opacity: .16; }
.at-deep { fill: #2b1d10; fill-opacity: .2; }
.at-hatch { fill: url(#at-hatchp); }
.at-coast { fill: none; stroke: #3b2a1a; stroke-width: .5; stroke-linecap: round; stroke-opacity: .7; }
.at-wave { fill: none; stroke: #33505f; stroke-width: .3; stroke-opacity: .55; stroke-linecap: round; }
.at-act { font-size: 6px; letter-spacing: .04em; fill-opacity: .85; stroke-opacity: .85; }
.at-act-sub { font-size: 3.2px; font-style: italic; letter-spacing: 0; }
.at-note { font-size: 2.8px; font-style: italic; fill-opacity: .5; stroke-opacity: .5; }
.at-mark { font-size: 2.4px; font-style: italic; fill-opacity: .55; stroke-opacity: .55; }
.at-rose circle { fill: none; stroke: #3b2a1a; stroke-width: .2; stroke-opacity: .6; }
.at-rose path { fill: #7a2f18; fill-opacity: .8; }
.at-rose text { font-size: 2.6px; }
.at-route { fill: none; stroke-linecap: round; }
.at-route.walked { stroke: #3b2a1a; stroke-width: .35; stroke-dasharray: .1 1.5; stroke-opacity: .55; }
.at-route.pencil { stroke: #7a6a55; stroke-width: .3; stroke-dasharray: 1.4 1; stroke-opacity: .55; }
.at-print { fill: #3b2a1a; fill-opacity: .45; }
.at-place.open { cursor: pointer; }
.at-shadow { fill: #3b2a1a; fill-opacity: .18; }
.at-disc { fill: #efe3c6; }
.at-ring { fill: none; stroke: #3b2a1a; stroke-width: .5; }
.at-place.next .at-disc { fill: none; }
.at-place.next .at-ring { stroke: #7a6a55; stroke-dasharray: 1.2 .9; stroke-opacity: .7; }
.at-q { font-size: 7px; fill: #7a6a55 !important; }
.at-place.open:hover .at-ring, .at-place.open:focus-visible .at-ring { stroke: #7a2f18; stroke-width: .9; }
.at-place:focus { outline: none; }
.at-place.full .at-ring { stroke: #2f6b3a; stroke-width: .8; }
.at-name { font-size: 3px; paint-order: stroke; stroke: #ecdfc3; stroke-width: .8; }
.at-name.small { font-size: 2.4px; }
.at-place.next .at-name { font-style: italic; fill-opacity: .55; stroke-opacity: .55; }
.at-seal circle { fill: #9c2a1a; stroke: #5e160c; stroke-width: .3; }
.at-seal .rim { fill: none; stroke: #c9584a; stroke-width: .2; stroke-dasharray: .5 .4; }
.at-seal path { fill: none; stroke: #f6dcc0; stroke-width: .55; stroke-linecap: round; stroke-linejoin: round; }
.at-seal.full circle { fill: #2f7a3e; stroke: #174a22; }
.at-seal.full .rim { stroke: #7cc48a; }
.at-flag path { fill: none; stroke: #3b2a1a; stroke-width: .35; }
.at-flag .cloth { fill: #9c3d1f; stroke: #3b2a1a; stroke-width: .25; }
.at-flag.ready .cloth { fill: #e0401a; stroke: #6b1a0c; }
.at-spur { fill: none; stroke: #5b2f55; stroke-width: .3; stroke-dasharray: .7 .7; stroke-opacity: .7; }
.at-site { cursor: pointer; }
.at-site .at-hit { fill: transparent; }
.at-site .x { stroke: #7b3f6e; stroke-width: .8; stroke-linecap: round; }
/* the drawings */
.art .k { fill: none; stroke: #2b1d10; stroke-width: .6; stroke-linecap: round; stroke-linejoin: round; }
.art .t { fill: none; stroke: #2b1d10; stroke-width: .32; stroke-linecap: round; stroke-opacity: .8; }
.art .w { fill: #6f93a6; fill-opacity: .45; } .art .s { fill: #5a4630; fill-opacity: .22; } .art .f { fill: #f4ead2; }
.art .r { fill: #a8321c; } .art .g { fill: #6f8f4e; fill-opacity: .75; } .art .y { fill: #e8b04a; } .art .d { fill: #2b1d10; fill-opacity: .85; }
/* the pawn: its light lies on the paper, the figure stands on the screen above it */
.at-spot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; pointer-events: none; visibility: hidden; }
.at-pawn { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 3; transform-origin: 0 0; }
.at-glow { position: absolute; left: -60px; top: -34px; width: 120px; height: 68px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--lamp) 55%, transparent), transparent); animation: at-glow 2.6s ease-in-out infinite; }
.at-fig { position: absolute; left: -24px; bottom: -4px; width: 48px; height: 67px; transform-origin: 50% 100%; overflow: visible; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .5)); }
.at-fig .b { fill: #000; opacity: .3; } .at-fig .body { fill: #2a1d12; stroke: #c99a38; stroke-width: .7; }
.at-fig .cap { fill: #1c140d; stroke: #c99a38; stroke-width: .6; } .at-fig .ring { fill: none; stroke: #c99a38; stroke-width: .8; }
.at-fig .pane { fill: color-mix(in srgb, var(--lamp) 30%, #2a1d12); } .at-fig .fl { fill: var(--lamp); animation: at-flame 1.3s steps(5) infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.at-pawn.walking .at-fig { animation: at-bob .3s ease-in-out infinite alternate; }
/* the bar and the card */
.at-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(10, 6, 3, .85), transparent); }
.at-title { font-family: var(--display); font-size: 1.5rem; color: #f3e6c8; text-shadow: 0 0 12px rgba(0, 0, 0, .8); }
.at-hint { flex: 1; font-size: .85rem; color: #cbb894; }
.at-bar .btn { color: #f3e6c8; border-color: #cbb894; background: rgba(20, 12, 6, .6); }
.at-card { position: absolute; z-index: 5; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); translate: -50% 0; width: min(560px, calc(100% - 24px));
  display: grid; grid-template-columns: 132px 1fr; gap: 14px; padding: 16px; color: #2b1d10; border-radius: 10px;
  background: linear-gradient(160deg, #f4ead2, #e3d3ad); border: 1px solid #8a6e45; box-shadow: 0 0 0 4px #f4ead2, 0 0 0 5px #8a6e45, 0 24px 50px rgba(0, 0, 0, .7);
  animation: at-card .35s cubic-bezier(.2, .9, .3, 1.2); max-height: 72vh; overflow-y: auto; }
.at-card.full { box-shadow: 0 0 0 4px #f4ead2, 0 0 0 5px #2f7a3e, 0 24px 50px rgba(0, 0, 0, .7); }
.at-card h2 { font-size: 1.5rem; margin: 0 0 4px; color: #2b1d10; text-shadow: none; }
.at-card-art svg { width: 132px; height: 132px; border-radius: 50%; background: #efe3c6; border: 2px solid #3b2a1a; display: block; }
.at-card-act { margin: 0; font: .78rem var(--mono); color: #6b5a44; }
.at-card-blurb { font-style: italic; margin: 0 0 8px; }
.at-goals { list-style: none; margin: 0 0 8px; padding: 0; font-size: .92rem; }
.at-goals li { display: flex; gap: 8px; align-items: baseline; color: #5a4a36; }
.at-goals li.ok { color: #2b1d10; }
.at-goals .tick { width: 1em; text-align: center; font-weight: 700; color: #9c2a1a; }
.at-goals li.ok .tick { color: #2f7a3e; }
.at-done { margin: 0 0 8px; font-size: .9rem; color: #2f7a3e; font-style: italic; }
.at-card-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.at-card .btn { color: #2b1d10; border-color: #2b1d10; background: transparent; }
.at-card .btn.primary { background: #2b1d10; color: #f4ead2; }
.at-x { position: absolute; right: 8px; top: 4px; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: #6b5a44; cursor: pointer; padding: 4px 8px; }
@media (max-width: 600px) {
  .at-hint { display: none; }
  .at-card { grid-template-columns: 1fr; gap: 6px; padding: 14px; }
  .at-card-art svg { width: 88px; height: 88px; margin: 0 auto; }
  .at-card h2 { font-size: 1.3rem; }
  .at-card-acts .btn { flex: 1; }
}
@keyframes at-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes at-card { from { translate: -50% 110%; } to { translate: -50% 0; } }
@keyframes at-flame { 0%, 100% { transform: scale(1) rotate(-2deg); opacity: 1; } 35% { transform: scale(.92, 1.08) rotate(2deg); } 65% { transform: scale(1.04, .95) rotate(-1deg); opacity: .9; } }
@keyframes at-glow { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes at-bob { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes at-flag { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.75) skewY(-6deg); } }
html.still #atlas *, html.still #atlas.intro .at-view { animation: none !important; }
html[data-saver] #atlas * { animation: none !important; }
/* the camp's map panel: a picture of the sheet that opens it */
.map-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; text-align: left; }
.map-open .tm-table { transition: transform .2s; }
.map-open:hover .tm-table { transform: translateY(-2px); }
.map-open .map-cta { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; white-space: nowrap; pointer-events: none; }
.map-open .worldmap { pointer-events: none; }

/* ---------- character select (1.18) ---------- */
.gate.chars { max-width: 620px; }
.char-list { list-style: none; margin: 18px 0 12px; padding: 0; display: grid; gap: 10px; }
.char-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.char-card { width: 100%; display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; min-height: 84px; text-align: left; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--c1, var(--ink)) 70%, transparent); border-radius: var(--r, 4px); color: #f6ecd6; position: relative; overflow: hidden;
  background: linear-gradient(100deg, color-mix(in srgb, var(--c1, #2a2118) 92%, #000) 0%, color-mix(in srgb, var(--c1, #2a2118) 55%, #000) 55%, color-mix(in srgb, var(--c2, #9a6f14) 70%, #000) 100%);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .7); transition: transform .12s, box-shadow .2s; }
.char-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 9px); }
.char-card:hover, .char-card:focus-visible { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--c2, var(--rust)), 0 10px 24px -10px rgba(0, 0, 0, .8); }
.char-card.playing { box-shadow: 0 0 0 2px #f6ecd6, 0 10px 24px -10px rgba(0, 0, 0, .8); }
.char-emblem { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .35); }
.char-emblem .ico { width: 28px; height: 28px; color: var(--c2, #ffc24a); }
.char-who { display: grid; gap: 2px; min-width: 0; }
.char-who b { font-family: var(--display); font-size: 1.3rem; font-weight: 400; line-height: 1.1; }
.char-sub { color: rgba(246, 236, 214, .8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-lvl { display: grid; justify-items: end; }
.char-lvl .mono { font-size: 2rem; line-height: 1; color: #fff3d2; }
.char-rk { font-size: .8rem; color: var(--c2, #ffc24a); }
.char-flag { position: absolute; right: 10px; top: 6px; font: .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff3d2; opacity: .85; }
.char-card.empty { grid-template-columns: 54px 1fr; color: var(--ink); background: var(--card); border: 1px dashed var(--rule-strong); }
.char-card.empty::after { display: none; }
.char-card.empty b { font-family: var(--display); font-size: 1.2rem; font-weight: 400; display: block; }
.char-card.empty .small { color: var(--muted); }
.char-plus { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; border: 1px dashed var(--rule-strong); font-size: 1.8rem; color: var(--muted); }
.char-retire { align-self: center; }
.who-btn { display: grid; gap: 0; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.who-btn:hover b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .char-card { grid-template-columns: 44px 1fr auto; gap: 10px; padding: 10px 12px; }
  .char-emblem, .char-plus { width: 44px; height: 44px; }
  .char-who b { font-size: 1.1rem; }
  .char-lvl .mono { font-size: 1.6rem; }
  .char-row { grid-template-columns: 1fr; }
  .char-retire { justify-self: end; margin-top: -4px; }
}

/* admin (1.18): benched characters sit under their account */
.tbl tr.benched td { background: color-mix(in srgb, var(--paper-2) 70%, transparent); border-top: 1px dashed var(--rule); }
.tbl .who-cls { text-transform: capitalize; }


/* admin (1.19.1): the live balance table */
.tbl.stats .ok { color: var(--good); font-weight: 600; } .tbl.stats .warn { color: var(--ochre); font-weight: 600; } .tbl.stats .bad { color: var(--bad); font-weight: 600; }

/* ---------- Midwinter (1.19.2) ---------- */
.panel.mw { border-color: color-mix(in srgb, #5aa9e6 55%, var(--rule-strong)); background-image: linear-gradient(180deg, color-mix(in srgb, #5aa9e6 10%, var(--card)), var(--card) 70%); }
.mw-pips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.mw-pips i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, #5aa9e6 70%, var(--ink)); }
.mw-pips i.on { background: radial-gradient(circle at 40% 35%, #fff, #8fc8f0 45%, #3d8fd1); border-color: #3d8fd1; }
/* enemies frosted while Midwinter lasts */
html[data-midwinter] .plate { filter: drop-shadow(0 0 6px rgba(160, 210, 255, .5)) saturate(.7) brightness(1.08); }
html[data-midwinter] .foe h2::before { content: '❄ '; color: #8fc8f0; }

/* 1.19.3: while the map or the reader covers the screen, the page behind is not drawn at all (it kept animating) */
html.reading #app, html.reading .atmo { visibility: hidden; }
html.reading .atmo *, html.reading body::after, html.reading #view::before { animation: none !important; }

/* the advent calendar (1.19.4): four doors a row on phones, six on a computer; nothing scrolls sideways */
.doors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0 10px; }
@media (max-width: 600px) { .doors { grid-template-columns: repeat(4, 1fr); } }
.door { aspect-ratio: 1; min-height: 44px; display: grid; place-items: center; border-radius: 6px; cursor: default; font: 1.15rem var(--display); color: var(--ink);
  border: 1px solid var(--rule-strong); background: linear-gradient(160deg, var(--card), var(--paper-2)); position: relative; }
.door.big { background: linear-gradient(160deg, color-mix(in srgb, #c49a2c 25%, var(--card)), var(--paper-2)); }
.door.shut { opacity: .55; }
.door.ready { cursor: pointer; border-color: #3d8fd1; box-shadow: 0 0 0 2px color-mix(in srgb, #3d8fd1 45%, transparent); animation: door-wait 2.4s ease-in-out infinite; }
.door.ready:hover, .door.ready:focus-visible { transform: translateY(-1px); }
.door.open { background: color-mix(in srgb, #3d8fd1 12%, var(--card)); border-style: dashed; color: #3d8fd1; }
.door.open .ico { width: 22px; height: 22px; }
.door-n { font-variant-numeric: lining-nums; }
@keyframes door-wait { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, #3d8fd1 45%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, #3d8fd1 25%, transparent); } }
html.still .door.ready { animation: none; }
html[data-saver] .door.ready { animation: none; }
.stair-rules li { margin: 4px 0; }

/* ---------- Christmas and Snow (1.21): winter scenes, snow on the panels, lights, bells ---------- */

/* the scene layers (festive.js builds them into .atmo) */
.atmo .sc { position: absolute; pointer-events: none; }
.atmo .fl { position: absolute; left: var(--x); top: -4%; width: var(--s); height: var(--s); border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.atmo .fl.far { background: rgba(235, 244, 255, .7); animation: fx-snow var(--d) linear var(--w) infinite; }
.atmo .fl.big { border-radius: 0; animation: fx-flake var(--d) linear var(--w) infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 40 40'%3E%3Cg stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' fill='none'%3E%3Cg id='a'%3E%3Cpath d='M0 0V-17M0-11l-5-4M0-11l5-4M0-5l-3-3M0-5l3-3'/%3E%3C/g%3E%3Cuse href='%23a' transform='rotate(60)'/%3E%3Cuse href='%23a' transform='rotate(120)'/%3E%3Cuse href='%23a' transform='rotate(180)'/%3E%3Cuse href='%23a' transform='rotate(240)'/%3E%3Cuse href='%23a' transform='rotate(300)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.atmo .moon { bottom: 21vh; left: 11vw; width: 72px; height: 72px; opacity: .6; border-radius: 50%;
  background: radial-gradient(circle at 66% 62%, rgba(150, 140, 110, .22) 0 9%, transparent 10%), radial-gradient(circle at 34% 58%, rgba(150, 140, 110, .18) 0 7%, transparent 8%),
    radial-gradient(circle at 52% 30%, rgba(150, 140, 110, .16) 0 5%, transparent 6%), radial-gradient(circle at 38% 34%, #fffdf2, #f3ead0 58%, #d9cba0);
  box-shadow: 0 0 40px 10px rgba(255, 248, 220, .14), 0 0 130px 60px rgba(255, 248, 220, .05); }
.atmo .stars { inset: 0 0 40% 0; opacity: .85; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='20' cy='30' r='1' fill-opacity='.7'/%3E%3Ccircle cx='96' cy='14' r='.7' fill-opacity='.5'/%3E%3Ccircle cx='170' cy='52' r='1.2' fill-opacity='.8'/%3E%3Ccircle cx='60' cy='96' r='.6' fill-opacity='.4'/%3E%3Ccircle cx='224' cy='120' r='.9' fill-opacity='.6'/%3E%3Ccircle cx='130' cy='150' r='1.1' fill-opacity='.7'/%3E%3Ccircle cx='36' cy='190' r='.7' fill-opacity='.5'/%3E%3Ccircle cx='200' cy='220' r='.6' fill-opacity='.4'/%3E%3Ccircle cx='110' cy='76' r='.5' fill-opacity='.5'/%3E%3Ccircle cx='250' cy='20' r='.8' fill-opacity='.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 260px 260px; }
.atmo .woods { left: 0; bottom: 0; width: 100%; height: 30vh; min-height: 150px; }
.atmo .shoot { top: 9%; left: -10%; width: 130px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff6d0); opacity: 0;
  animation: fx-shoot 14s ease-in 5s infinite; }

@media (max-width: 600px) { .atmo .moon { width: 46px; height: 46px; bottom: 19vh; opacity: .45; } }
/* Christmas: the tree, the village, the sleigh */
.atmo .tree { right: 3vw; bottom: 2.5vh; width: min(27vh, 230px); aspect-ratio: 1; }
.atmo .tree svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 18px rgba(242, 193, 78, .12)); }
.atmo .tb { position: absolute; width: 4.2%; aspect-ratio: 1; margin: -2.1% 0 0 -2.1%; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 6px 2px color-mix(in srgb, var(--c) 60%, transparent); animation: fx-tb 2.8s steps(1) var(--w) infinite; }
.atmo .tree.lit .tb { animation-duration: 1.4s; }
.atmo .tree .star { position: absolute; left: 50%; top: 0; width: 15%; aspect-ratio: 1; margin: -6% 0 0 -7.5%; background: radial-gradient(circle, #fff7d6, #f2c14e 60%);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 92%, 50% 70%, 21% 92%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 0 6px #f2c14e);
  animation: fx-starpulse 3s ease-in-out infinite; }
.atmo .village { left: 2vw; bottom: 3vh; width: min(58vh, 440px); height: min(14vh, 110px); }
.atmo .village svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.atmo .win { position: absolute; width: 3%; height: 11%; background: #ffd27a; box-shadow: 0 0 8px 2px rgba(255, 190, 90, .45); }
.atmo .win.fl2 { animation: fx-window 6s ease-in-out var(--w) infinite; }
.atmo .smoke { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: rgba(210, 220, 230, .25); opacity: 0; animation: fx-smoke 7s ease-out infinite; }
.atmo .smoke.s2 { animation-delay: 3.5s; }
.atmo .sleigh { bottom: 23vh; left: 0; width: 120px; height: 40px; opacity: 0; filter: drop-shadow(0 0 3px rgba(255, 230, 170, .55)); animation: fx-sleigh 40s linear 6s infinite; }
.atmo .sleigh svg { width: 100%; height: 100%; }

/* Snow: frost in the corners, gusts, a pale aurora after a rekindle */
.atmo .frost { width: 42vmin; height: 42vmin; opacity: .9;
  background: radial-gradient(circle at 0 0, rgba(215, 235, 255, .2), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg stroke='%23e6f3ff' stroke-opacity='.35' stroke-width='1' fill='none' stroke-linecap='round'%3E%3Cpath d='M0 0l70 46M22 14l-2 14M38 25l5-13M52 34l-5 13M0 0l34 80M9 21l11-4M16 38l-11 3M24 56l10-6M0 0l92 12M28 4l3-10M50 7l-2 11M70 9l5-9'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 140px 140px no-repeat;
  -webkit-mask-image: radial-gradient(circle at 0 0, #000 35%, transparent 72%); mask-image: radial-gradient(circle at 0 0, #000 35%, transparent 72%); }
.atmo .frost.tl { left: 0; top: 0; } .atmo .frost.tr { right: 0; top: 0; transform: scaleX(-1); }
.atmo .frost.bl { left: 0; bottom: 0; transform: scaleY(-1); } .atmo .frost.br { right: 0; bottom: 0; transform: scale(-1, -1); }
.atmo .gust { inset: 0 -60%; opacity: 0; animation: fx-gust 17s ease-in-out 3s infinite; will-change: transform, opacity;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120' viewBox='0 0 180 120'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='10' cy='20' r='1.4' fill-opacity='.8'/%3E%3Ccircle cx='70' cy='8' r='1' fill-opacity='.6'/%3E%3Ccircle cx='130' cy='40' r='1.8' fill-opacity='.8'/%3E%3Ccircle cx='40' cy='70' r='1.2' fill-opacity='.7'/%3E%3Ccircle cx='100' cy='96' r='1.6' fill-opacity='.8'/%3E%3Ccircle cx='160' cy='84' r='1' fill-opacity='.5'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-opacity='.25' stroke-linecap='round'%3E%3Cpath d='M20 50h22M110 20h16M60 108h26M140 64h20'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 180px 120px; }
.atmo .gust.g2 { animation-duration: 23s; animation-delay: 12s; background-size: 240px 160px; }
.atmo .aurora { inset: -5% -30% auto; height: 42%; opacity: .45; will-change: transform;
  background: radial-gradient(40% 60% at 30% 30%, rgba(127, 224, 208, .22), transparent 70%), radial-gradient(40% 60% at 65% 25%, rgba(156, 201, 255, .24), transparent 70%);
  animation: fx-aurora 22s ease-in-out infinite alternate; }

/* the two worlds: sky light and ground glow behind the scene */
[data-theme="snow"] .atmo::before { background: radial-gradient(45% 40% at 14% 76%, rgba(200, 225, 255, .14), transparent 70%); }
[data-theme="snow"] .atmo i { top: -4%; width: calc(var(--s) * 1.25); height: calc(var(--s) * 1.25); background: radial-gradient(circle, #fff 45%, rgba(220, 236, 255, .6) 65%, transparent 72%);
  animation: fx-snow calc(var(--d) * 1.1) linear var(--w) infinite; }
[data-theme="snow"] .atmo b { display: block; left: 0; right: 0; bottom: 0; height: 32vh; background: linear-gradient(0deg, rgba(200, 225, 255, .08), transparent); }
[data-theme="snow"] .atmo .moon { background: radial-gradient(circle at 66% 62%, rgba(120, 140, 170, .2) 0 9%, transparent 10%), radial-gradient(circle at 34% 58%, rgba(120, 140, 170, .16) 0 7%, transparent 8%),
  radial-gradient(circle at 38% 34%, #ffffff, #e4eef8 58%, #bccbdc); box-shadow: 0 0 46px 14px rgba(210, 230, 255, .14), 0 0 160px 70px rgba(210, 230, 255, .05); }
[data-theme="xmas"] .atmo::before { background: radial-gradient(60% 40% at 50% 0%, rgba(255, 90, 74, .07), transparent 70%); }
[data-theme="xmas"] .atmo i { top: -4%; width: var(--s); height: var(--s); background: radial-gradient(circle, #fff 45%, transparent 72%);
  animation: fx-snow calc(var(--d) * 1.3) linear var(--w) infinite; }
[data-theme="xmas"] .atmo b { display: block; left: 0; right: 0; bottom: 0; height: 30vh; background: radial-gradient(80% 100% at 50% 100%, rgba(242, 193, 78, .1), transparent 70%); }

/* snow lies on top of every panel */
:root[data-theme="snow"] .panel::before, :root[data-theme="xmas"] .panel::before { display: none; }
:root[data-theme="snow"] .panel::after, :root[data-theme="xmas"] .panel::after { content: ''; position: absolute; left: 8px; right: 8px; top: -7px; height: 12px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='12' viewBox='0 0 200 12'%3E%3Cpath d='M0 12V9c8 0 10-6 22-6s14 5 24 5 8-3 16-3 6 4 14 4h20c10 0 12-7 26-7s16 6 26 6 10-2 16-2 8 3 16 3h20V12z' fill='%23f2f7fc'/%3E%3Cpath d='M0 12v-1.5h200V12z' fill='%23c9d9ea'/%3E%3Cpath d='M4 8c6-1 10-4 18-4M100 8c8-1 12-5 22-5' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 200px 12px repeat-x;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
:root[data-theme="snow"] .panel { border-color: rgba(190, 225, 255, .24);
  background: linear-gradient(180deg, rgba(190, 225, 255, .08), transparent 140px), var(--card);
  box-shadow: 0 14px 32px -16px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 14px 26px -22px rgba(200, 230, 255, .5); }
:root[data-theme="xmas"] .panel { border-top: 2px solid color-mix(in srgb, #ff5a4a 60%, var(--rule)); }

/* Christmas: the pine bough under the header and tabs, with its string of lights (festive.js) */
.bough { position: relative; height: 32px; margin: -14px 0 2px; pointer-events: none; overflow-x: clip; }
.bough svg { position: absolute; left: 0; top: 0; }
.bough i { position: absolute; width: 7px; height: 10px; margin: 0 0 0 -3.5px; border-radius: 45% 45% 50% 50% / 40% 40% 60% 60%; transform-origin: 50% 0; transform: rotate(var(--tilt));
  background: color-mix(in srgb, var(--c) 30%, #000); }
.bough i::before { content: ''; position: absolute; left: 1.5px; top: -2px; width: 4px; height: 3px; border-radius: 1px; background: #55645a; }
.bough i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 40% 35%, #fff 0 14%, var(--c) 48%);
  box-shadow: 0 0 6px 2px color-mix(in srgb, var(--c) 70%, transparent), 0 0 16px 5px color-mix(in srgb, var(--c) 28%, transparent);
  animation: fx-bulb 3.2s steps(1) calc(var(--k) * -0.8s) infinite; }
:root[data-depth="3"] .bough i::after { animation-duration: 1.8s; animation-delay: calc(var(--k) * -0.45s); }
:root[data-depth="4"] .bough i::after { animation: fx-bulb-dance 2.4s steps(1) calc(var(--k) * -0.6s) infinite; }
/* Snow: icicles hang under the header and tabs */
:root[data-theme="snow"] #view::before { content: ''; display: block; height: 18px; margin: -14px 0 4px; pointer-events: none; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='18' viewBox='0 0 120 18'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23bfe3ff' stop-opacity='.15'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0h120v2.5H0z' fill='%23eaf4ff'/%3E%3Cpath d='M5 2l2.5 9 2.5-9zM16 2l2 5 2-5zM26 2l3 14 3-14zM40 2l2 6 2-6zM50 2l2.5 10 2.5-10zM63 2l2 4 2-4zM72 2l3 16 3-16zM86 2l2 7 2-7zM96 2l2.5 11 2.5-11zM109 2l2 5 2-5z' fill='url(%23g)'/%3E%3C/svg%3E") 0 0 / 120px 18px repeat-x; }

/* Christmas: a little red cap on the lamp in the header */
:root[data-theme="xmas"] .brand { position: relative; }
:root[data-theme="xmas"] .brand::before { content: ''; position: absolute; left: -7px; top: -11px; width: 24px; height: 18px; transform: rotate(-16deg); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cpath d='M3 15C5 7 11 2 18 3c3 .5 5 3 6 6-3-2-6-2-7 0l-1 6z' fill='%23d8322a'/%3E%3Cpath d='M9 7c3-3 6-4 9-4' stroke='%23ff7a6a' stroke-width='1' fill='none'/%3E%3Crect x='1' y='14' width='17' height='5' rx='2.5' fill='%23fff6e8'/%3E%3Ccircle cx='23.5' cy='10' r='2.6' fill='%23fff6e8'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Christmas: headings with a gold star, red and gold buttons, a candy-cane experience bar */
:root[data-theme="xmas"] .panel > h2::before, :root[data-theme="xmas"] .section-head h2::before, :root[data-theme="xmas"] #modal .box > h2::before { background: linear-gradient(135deg, #fff1b8, #f2c14e); }
:root[data-theme="xmas"] h1, :root[data-theme="xmas"] h2 { text-shadow: 0 0 14px rgba(242, 193, 78, .14); }
:root[data-theme="xmas"] .btn.primary { color: #fff6e8; box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .6), inset 0 1px 0 rgba(255, 255, 255, .25), 0 3px 10px -6px #ff5a4a; }
:root[data-theme="xmas"] .btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #ee5547, #b52a20); box-shadow: inset 0 0 0 1px #f2c14e, 0 0 12px -4px #ff5a4a; }
:root[data-theme="xmas"] .btn:hover:not(:disabled):not(.primary), :root[data-theme="xmas"] .act:hover:not(:disabled) { border-color: #f2c14e; box-shadow: 0 0 0 1px rgba(242, 193, 78, .5); }
:root[data-theme="xmas"] .act { border-top-color: color-mix(in srgb, #f2c14e 50%, var(--rule)); }
:root[data-theme="xmas"] .bar.xp i { background: repeating-linear-gradient(-45deg, #fff4e2 0 5px, #e2382c 5px 10px); }
:root[data-theme="xmas"] .bar.focus i { background: linear-gradient(90deg, #2f8a52, #7fd49a 70%, #c9f0d3); }
:root[data-theme="xmas"] .tab[aria-current="page"] { color: #f2c14e; box-shadow: inset 0 -2px 0 #f2c14e;
  background: radial-gradient(70% 90% at 50% 100%, rgba(255, 90, 74, .16), transparent 75%); }
:root[data-theme="xmas"] .toast { border-left-color: #f2c14e; background-image: linear-gradient(90deg, rgba(200, 52, 42, .16), transparent 60%); }
:root[data-theme="xmas"] #modal .box { box-shadow: inset 0 3px 0 #c8342a, inset 0 5px 0 #f2c14e, 0 0 30px -18px var(--glow); }
:root[data-theme="xmas"] .zone.cur { box-shadow: inset 3px 0 0 #f2c14e; }
@media (max-width: 600px) { :root[data-theme="xmas"] .tab[aria-current="page"] { box-shadow: inset 0 2px 0 #f2c14e; background: radial-gradient(70% 90% at 50% 0%, rgba(255, 90, 74, .16), transparent 75%); } }

/* Snow: frosted buttons, a moonlit experience bar, icy tabs */
:root[data-theme="snow"] .btn.primary { border: 1px solid rgba(255, 255, 255, .7); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
:root[data-theme="snow"] .bar.xp i { background: linear-gradient(90deg, #8fbfe6, #dff1ff 60%, #f4ecc4); }
:root[data-theme="snow"] .tab[aria-current="page"] { background: radial-gradient(70% 90% at 50% 100%, rgba(191, 227, 255, .14), transparent 75%); }
:root[data-theme="snow"] #modal .box { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 36px -16px rgba(191, 227, 255, .6); }
:root[data-theme="snow"] h1, :root[data-theme="snow"] h2 { text-shadow: 0 0 16px rgba(191, 227, 255, .22); }

/* sparkles where you tap, and the shower for a level or a boss */
.sparks { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.sparks i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--c);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 92%, 50% 70%, 21% 92%, 32% 57%, 2% 35%, 39% 35%); }
:root[data-theme="snow"] .sparks i { clip-path: polygon(50% 0, 58% 38%, 95% 25%, 64% 50%, 95% 75%, 58% 62%, 50% 100%, 42% 62%, 5% 75%, 36% 50%, 5% 25%, 42% 38%); }
.sparks b { position: absolute; top: -24px; width: 8px; height: 8px; background: var(--c); }
.sparks b.star { width: 13px; height: 13px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 92%, 50% 70%, 21% 92%, 32% 57%, 2% 35%, 39% 35%); }
.sparks b.rib { width: 5px; height: 14px; border-radius: 2px; }
.sparks b.flake { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(255, 255, 255, .6); }

/* the Christmas switches only show with the Christmas theme */
:root:not([data-theme="xmas"]) .xmas-only { display: none; }
.xmas-only .label { margin: 0; }

/* nothing moves with battery saver or reduced motion; lights stay lit, sleigh and gusts stay away */
html[data-saver] .atmo .sc, html[data-saver] .atmo .sc *, html[data-saver] .atmo .fl, html[data-saver] .bough i::after { animation: none !important; }
html[data-saver] .atmo .fl { opacity: .55; top: var(--y); }
html[data-saver] .atmo .sleigh, html[data-saver] .atmo .shoot, html[data-saver] .atmo .gust, html[data-saver] .atmo .smoke, html[data-saver] .sparks { display: none; }
html.still .atmo .sc, html.still .atmo .sc *, html.still .atmo .fl, html.still .bough i::after { animation: none !important; }
html.still .atmo .fl { opacity: .55; top: var(--y); }
html.still .atmo .sleigh, html.still .atmo .shoot, html.still .atmo .gust, html.still .atmo .smoke, html.still .sparks { display: none; }

@keyframes fx-flake { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: .85; } 50% { transform: translate(36px, 54vh) rotate(180deg); }
  90% { opacity: .75; } 100% { transform: translate(0, 108vh) rotate(360deg); opacity: 0; } }
@keyframes fx-flake-l { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: .85; } 50% { transform: translate(-36px, 54vh) rotate(-180deg); }
  90% { opacity: .75; } 100% { transform: translate(0, 108vh) rotate(-360deg); opacity: 0; } }
.atmo .fl.big.l { animation-name: fx-flake-l; }
@keyframes fx-tb { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
@keyframes fx-bulb { 0%, 74% { opacity: 1; } 75%, 100% { opacity: .08; } }
@keyframes fx-bulb-dance { 0%, 24% { opacity: 1; } 25%, 49% { opacity: .08; } 50%, 62% { opacity: 1; } 63%, 74% { opacity: .08; } 75%, 100% { opacity: 1; } }
@keyframes fx-starpulse { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.12) rotate(6deg); } }
@keyframes fx-window { 0%, 100% { opacity: 1; } 40% { opacity: .55; } 45% { opacity: .9; } 70% { opacity: .7; } }
@keyframes fx-smoke { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(18px, -60px) scale(2.4); opacity: 0; } }
@keyframes fx-sleigh { 0% { transform: translate(-20vw, 7vh) rotate(-4deg); opacity: 0; } 1% { opacity: 1; } 28% { transform: translate(110vw, -2vh) rotate(-8deg); opacity: 1; } 29%, 100% { opacity: 0; transform: translate(110vw, -2vh); } }
@keyframes fx-gust { 0%, 62% { transform: translateX(-25%); opacity: 0; } 72% { opacity: .75; } 88% { opacity: .55; } 100% { transform: translateX(30%); opacity: 0; } }