/*
Theme Name: RC Tavern
Description: Retro Community: night-sky doors, private character pages and the Three Moons Tavern.
Version: 0.1.0
Text Domain: rc-tavern
*/
:root {
  --night: #0b0a12;        /* page ground: deep blue-black night */
  --dusk: #15122a;         /* panel fill */
  --dusk-2: #1d1934;       /* raised panel / table stripe */
  --ink: #ece4d2;          /* body text: warm moonlit parchment */
  --ink-dim: #b9b0a0;      /* secondary text */
  --gold: #d6b26a;         /* antique gold: frames, rules, headings */
  --gold-deep: #8a6a2e;    /* shaded gold for double borders */
  --ember: #c8462f;        /* Lunitari red: primary actions, HP */
  --mana: #5e7be6;         /* mana bar */
  --parch: #e9dcbc;        /* parchment form */
  --parch-ink: #2b2014;    /* text on parchment */
  --f-mark: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --f-head: "Cinzel", Georgia, "Times New Roman", serif;
  --f-body: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--ink); font-family: var(--f-body); font-size: 19px; line-height: 1.6; }
a { color: var(--gold); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-head); font-weight: 600; text-wrap: balance; letter-spacing: .04em; margin: 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.eyebrow { font-family: var(--f-head); font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.mono { font-family: var(--f-mono); font-size: .82em; }
.note { font-size: 15px; color: var(--ink-dim); }

/* ---------- top bar ---------- */
.bar { position: relative; z-index: 10; background: color-mix(in srgb, var(--night) 82%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 12px; }
.mark { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.mark img { flex: none; filter: drop-shadow(0 0 6px #d6b26a55); }
.mark b { font-family: var(--f-mark); font-size: 21px; letter-spacing: .02em; color: var(--gold); font-weight: 700; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-family: var(--f-head); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.nav a { color: var(--ink-dim); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }

/* ---------- views ---------- */
.view[hidden] { display: none !important; }

/* ---------- hero (art placeholder: painted night scene) ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  background: linear-gradient(180deg, #0b0a12d9 0%, #0b0a1240 26%, #0b0a1200 46%, #0b0a1233 70%, #0b0a12 100%), url("art/hero-bg.jpg") center 38% / cover no-repeat, #0e1530; }
.hero .wrap { position: relative; padding-block: 56px 18vw; display: grid; gap: 14px; justify-items: center; text-align: center; }
.hero .emblem { width: clamp(72px, 9vw, 112px); height: auto; filter: drop-shadow(0 0 18px #d6b26a66) drop-shadow(0 6px 12px #000c); }
.hero h1 { font-family: var(--f-mark); font-size: clamp(34px, 6vw, 64px); color: var(--gold); line-height: 1.08; letter-spacing: .02em; text-shadow: 0 2px 24px #0009; }
.hero p { max-width: 38rem; margin: 0; font-size: 21px; color: var(--ink); text-shadow: 0 1px 10px #000c; }
.divider { width: min(420px, 80%); height: auto; filter: drop-shadow(0 2px 6px #000a); }
.rule { display: flex; align-items: center; gap: 12px; color: var(--gold); width: min(420px, 80%); }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.rule::after { background: linear-gradient(90deg, var(--gold), transparent); }
.art-tag { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 10px; font-family: var(--f-mono); font-size: 11px; color: #ffffff66; letter-spacing: .08em; }

/* ---------- doors ---------- */
.doors { position: relative; margin-top: -16vw; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 2vw, 26px); padding-block: 8px 56px; }
.door { --glow: #6ad17a; display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 10px; justify-items: center; text-decoration: none; color: var(--ink); }
.door .art { display: block; width: 100%; max-width: 200px; height: auto; aspect-ratio: 2 / 5; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--glow) 55%, transparent)) drop-shadow(0 12px 18px #000c); transition: transform .35s ease, filter .35s ease; }
.door:hover .art, .door:focus-visible .art { transform: translateY(-8px) scale(1.02); filter: drop-shadow(0 0 30px var(--glow)) drop-shadow(0 16px 22px #000c); }
.door:focus-visible { outline: none; }
.door:focus-visible .name { outline: 2px solid var(--gold); outline-offset: 3px; }
.door .name { display: inline-block; text-wrap: balance; font-family: var(--f-head); font-size: 16px; letter-spacing: .06em; text-align: center; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 3px; background: #0b0a12d9; }
.door .sub { font-size: 14px; color: var(--ink); text-align: center; margin-top: -6px; text-shadow: 0 1px 6px #000; }
.door.locked .art { filter: saturate(.75) brightness(.9) drop-shadow(0 12px 18px #000c); }
.door.locked .name { color: var(--ink-dim); }
.locked-tag { font-family: var(--f-head); font-size: 11px; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; }

/* ---------- sections ---------- */
.band { padding-block: 64px; border-top: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); }
.band h2 { font-size: clamp(24px, 3.4vw, 34px); color: var(--gold); margin-bottom: 26px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.step { min-width: 0; }
.step .num { font-family: var(--f-mark); font-size: 40px; color: var(--gold); line-height: 1; }
.step h3 { font-size: 19px; margin: 8px 0 6px; color: var(--ink); }
.step p { margin: 0; color: var(--ink-dim); }

/* ---------- framed panel (art placeholder: gold filigree frame) ---------- */
.frame { position: relative; background: linear-gradient(#15122acc, #15122acc) padding-box, url("art/panel-dark.webp") center / 384px repeat padding-box, var(--dusk) padding-box; border: clamp(26px, 3vw, 34px) solid transparent; border-image: url("art/panel-border.webp") 118 / clamp(26px, 3vw, 34px) round; box-shadow: 0 10px 30px #0008; padding: 8px 10px; min-width: 0; }
.frame::before, .frame::after { display: none; content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--gold); transform: rotate(45deg); background: var(--night); }
.frame::before { top: -8px; left: calc(50% - 7px); }
.frame::after { bottom: -8px; left: calc(50% - 7px); }
.frame h2, .frame h3 { color: var(--gold); font-size: 19px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.frame h2 .mono, .frame h3 .mono { color: var(--ink-dim); letter-spacing: 0; font-weight: 400; }

/* ---------- character sheet ---------- */
#sheet { position: relative; }
#sheet .banner { position: absolute; inset: 0 0 auto 0; height: clamp(260px, 34vw, 480px); background: linear-gradient(180deg, #0b0a1200 40%, var(--night)), linear-gradient(90deg, #0b0a12cc 0%, #0b0a1255 45%, #0b0a1200 70%), url("art/sheet-banner.jpg") center 60% / cover no-repeat; }
.sheet { position: relative; padding-block: 40px 64px; display: grid; gap: 26px; }
.head { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 34px; align-items: start; }
.portrait { position: relative; aspect-ratio: 3 / 4; width: 100%; max-width: 100%; filter: drop-shadow(0 14px 24px #000a); }
.portrait::after { content: ""; position: absolute; inset: 0; background: url("art/portrait-frame.webp") center / 100% 100% no-repeat; pointer-events: none; }
.portrait .img { object-fit: cover; object-position: 50% 18%; position: absolute; left: 21%; top: 17%; width: 58%; height: 73%; max-width: none; border-radius: 999px 999px 2px 2px / 48% 48% 2px 2px; background: radial-gradient(ellipse at 50% 32%, #6e5a3a 0 16%, transparent 17%), radial-gradient(ellipse at 50% 85%, #3c4a2c 0 38%, transparent 39%), linear-gradient(180deg, #2a3b2a, #141b16); color: #ffffff88; font-family: var(--f-mono); font-size: 12px; }
.ident h1 { font-family: var(--f-mark); font-size: clamp(36px, 5vw, 58px); color: var(--gold); line-height: 1.05; }
.ident .line { font-family: var(--f-head); letter-spacing: .08em; color: var(--ink); margin: 6px 0 12px; font-size: 16px; }
.ident blockquote { margin: 0 0 18px; font-style: italic; font-size: 22px; color: var(--ink); border: 0; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--gold-deep); border-radius: 4px; overflow: hidden; }
.facts div { padding: 10px 14px; background: var(--dusk); border-right: 1px solid #ffffff10; border-bottom: 1px solid #ffffff10; min-width: 0; }
.facts dt { font-family: var(--f-head); font-size: 11px; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; }
.facts dd { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--gold-deep); }
.tabs button { font-family: var(--f-head); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); background: none; border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; padding: 10px 16px; cursor: pointer; min-height: 44px; }
.tabs button[aria-selected="true"] { color: var(--gold); border-color: var(--gold-deep); background: var(--dusk); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.stat { text-align: center; padding: 10px 4px; border: 1px solid var(--gold-deep); border-radius: 4px; background: var(--dusk-2); }
.stat span { display: block; font-family: var(--f-head); font-size: 12px; letter-spacing: .2em; color: var(--gold); }
.stat small { display: block; font-family: var(--f-mono); font-size: 12px; color: var(--ink-dim); }
.stat b { font-family: var(--f-head); font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.meter { display: grid; gap: 4px; margin-top: 14px; }
.meter .top { display: flex; justify-content: space-between; font-size: 16px; }
.meter .top .mono { font-variant-numeric: tabular-nums; }
.meter .track { height: 10px; border-radius: 6px; background: #ffffff12; overflow: hidden; border: 1px solid #00000080; }
.meter .fill { height: 100%; border-radius: 6px; }
table { width: 100%; border-collapse: collapse; font-size: 17px; }
th { text-align: left; font-family: var(--f-head); font-size: 11px; letter-spacing: .2em; color: var(--gold); font-weight: 600; padding: 4px 0; }
td { padding: 6px 0; border-top: 1px solid #ffffff12; }
td.n { text-align: right; font-family: var(--f-mono); font-size: 15px; font-variant-numeric: tabular-nums; }
th.n { text-align: right; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--gold-deep); display: grid; gap: 16px; }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: -27px; top: 9px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--gold); }
.timeline .when { font-family: var(--f-mono); font-size: 13px; color: var(--gold); }
.scroll { max-height: 380px; overflow: auto; margin-inline: -4px; padding-inline: 4px; }
.scroll thead th { position: sticky; top: 0; background: var(--dusk); }
table.eq td.n { text-align: left; font-family: inherit; font-size: 16px; }
table.eq td:first-child { color: var(--ink-dim); font-size: 15px; white-space: nowrap; padding-right: 14px; }
.flag { font-family: var(--f-mono); font-size: 11px; color: var(--gold); border: 1px solid var(--gold-deep); border-radius: 3px; padding: 0 5px; margin-left: 6px; white-space: nowrap; }
.facts.small { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.facts.small dd { font-size: 16px; }
.desc p { margin: 0 0 12px; max-width: 70ch; }
textarea.notes { width: 100%; min-height: 140px; background: #07060c; color: var(--ink); border: 1px solid var(--gold-deep); border-radius: 4px; padding: 10px 12px; font: inherit; font-size: 17px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--gold); text-decoration: underline; cursor: pointer; font: inherit; }
.tavern-pub { box-shadow: 0 0 40px -14px #e2a64a99, 0 10px 30px #0008; }
/* ---------- tavern (wiki) ---------- */
.tavern { background: radial-gradient(ellipse at 50% -10%, #f2a24a33, transparent 60%), radial-gradient(ellipse at 10% 90%, #c8462f22, transparent 50%), linear-gradient(180deg, #2a1a10, #170e09 60%, #0f0a07); min-height: 70vh; }
.tav { padding-block: 44px 72px; display: grid; gap: 30px; }
.tav-sign { text-align: center; display: grid; justify-items: center; gap: 6px; }
.tav-sign h1, .tale h1 { font-family: var(--f-mark); color: #f1c983; font-size: clamp(32px, 5vw, 56px); line-height: 1.08; text-shadow: 0 2px 18px #e2a64a55; text-wrap: balance; }
.tav-sign p { margin: 0; color: #e8d6b8; max-width: 36rem; }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 26px; padding: clamp(18px, 3vw, 34px); border-radius: 6px; background: repeating-linear-gradient(90deg, #5a3a20 0 6px, #4f321b 6px 13px, #61401f 13px 21px), #4f321b; box-shadow: inset 0 0 0 10px #3a2413, inset 0 0 40px #000a, 0 18px 40px #000a; }
.note-card { position: relative; display: grid; gap: 8px; padding: 14px 14px 16px; color: var(--parch-ink); text-decoration: none; background: url("art/parchment.webp") center / cover, var(--parch); border-radius: 2px; box-shadow: 0 10px 18px #000b; transform: rotate(var(--tilt, -1deg)); transition: transform .25s ease; }
.note-card:hover, .note-card:focus-visible { transform: rotate(0) translateY(-4px); }
.note-card::before { content: ""; position: absolute; top: -7px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3d18a, #8a5a1c); box-shadow: 0 2px 4px #000a; }
.note-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; height: auto; border: 1px solid #6b5228; }
.note-card .ph { aspect-ratio: 4 / 5; display: grid; place-items: end center; background: radial-gradient(ellipse at 50% 30%, #2a2650, #0d0b18); border: 1px solid #6b5228; overflow: hidden; }
.note-card .ph img { width: 80%; aspect-ratio: auto; border: 0; object-fit: contain; }
.note-card b { font-family: var(--f-mark); font-size: 22px; color: #3b2a12; }
.note-card > span { font-size: 15px; line-height: 1.45; color: #4a3720; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tav-shelf { color: #e8d6b8; border-top: 1px solid #f1c98333; padding-top: 22px; }
.tav-shelf h2 { color: #f1c983; font-size: 20px; }
.tav-shelf ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 10px 0 0; }
.tav-shelf li { padding: 8px 14px; border: 1px solid #f1c98355; border-radius: 3px; background: #00000040; }
.back { color: #f1c983; }
.tale { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 34px; align-items: start; padding: clamp(18px, 3vw, 36px); background: url("art/parchment.webp") center / cover, var(--parch); color: var(--parch-ink); border-radius: 3px; box-shadow: 0 0 0 8px #3a2413, 0 24px 50px #000c; }
.tale-pics img { width: 100%; height: auto; border: 2px solid #6b5228; box-shadow: 0 8px 18px #0007; }
.tale h1 { color: #3b2a12; text-shadow: none; margin: 4px 0 14px; }
.tale h2 { color: #5b3d17; font-size: 20px; margin: 22px 0 8px; }
.tale .eyebrow { color: #7a5622; }
.tale .note, .tale .timeline .when { color: #6a5434; }
.tale-body { min-width: 0; }
@media (max-width: 760px) { .tale { grid-template-columns: minmax(0, 1fr); } .tale-pics { max-width: 260px; } }
.paste-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.paste-steps label { display: block; margin-bottom: 8px; }
.paste-steps b { color: var(--gold); font-weight: 600; }
kbd { font-family: var(--f-mono); font-size: .85em; padding: 1px 6px; border: 1px solid var(--gold-deep); border-radius: 3px; background: #07060c; color: var(--ink); }
.found { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 16px; }
.found li::before { content: "✓ "; color: #6fcf86; }
.found li.err::before { content: "! "; color: var(--ember); }
.found li.miss::before { content: "– "; color: var(--ink-dim); }
.paste textarea { width: 100%; min-height: 110px; background: #07060c; color: var(--ink); border: 1px solid var(--gold-deep); border-radius: 4px; padding: 10px 12px; font-family: var(--f-mono); font-size: 13px; line-height: 1.5; resize: vertical; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 22px; font-family: var(--f-head); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; border-radius: 3px; border: 1px solid var(--gold); cursor: pointer; text-decoration: none; }
.btn-fire { background: linear-gradient(180deg, #d4553b, #9e2f1f); color: #fff6e6; box-shadow: inset 0 1px 0 #ffffff33, 0 0 0 1px #000; }
.btn-ghost { background: transparent; color: var(--gold); }
.status { font-size: 15px; color: var(--ink-dim); min-height: 1.4em; }

/* ---------- create page (art placeholder: scholar's study) ---------- */
.study { background: linear-gradient(180deg, #0b0a1299, #0b0a1255 30%, #0b0a1288 80%, #0b0a12), radial-gradient(ellipse at 50% 45%, #0b0a12cc 0 30%, transparent 60%), linear-gradient(90deg, transparent 60%, #0b0a12aa 75%, #0b0a1288), url("art/create-bg.jpg") center / cover no-repeat, #12101c; border-bottom: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); }
.create { padding-block: 48px 64px; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 300px); gap: 30px; align-items: start; }
.step-col { display: grid; gap: 22px; align-content: start; min-width: 0; }
.nuit-note { margin: 0; display: grid; gap: 8px; justify-items: center; text-align: center; font-size: 15px; color: var(--ink-dim); }
.nuit-note img { width: min(190px, 100%); height: auto; filter: drop-shadow(0 10px 16px #000c); }
.nuit-note b { color: var(--gold); font-family: var(--f-head); letter-spacing: .06em; }
.empty-frame { margin: 22px 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 15px; color: var(--ink-dim); }
.empty-frame .portrait .img { background: radial-gradient(ellipse at 50% 30%, #2a2650, #0d0b18); overflow: hidden; }
.empty-frame .portrait .img img { position: absolute; right: 0; bottom: 0; width: 92%; height: auto; max-width: none; }
.door .art { grid-row: 1; grid-column: 1; }
.door .nap { grid-row: 1; grid-column: 1; align-self: end; position: relative; z-index: 1; width: 66%; max-width: 140px; height: auto; margin-bottom: -10px; pointer-events: none; filter: drop-shadow(0 8px 12px #000c); }
.lost { padding-block: 64px 80px; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 40px; align-items: center; }
.lost img { width: 100%; height: auto; filter: drop-shadow(0 16px 26px #000c); }
.lost h1 { font-family: var(--f-mark); color: var(--gold); font-size: clamp(28px, 4.5vw, 48px); line-height: 1.1; text-wrap: balance; margin: 6px 0 14px; }
.lost-text { min-width: 0; max-width: 34rem; }
.lost-text p { color: var(--ink-dim); }
@media (max-width: 700px) { .lost { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .lost img { width: min(240px, 70%); } }
.stepper { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stepper li { font-family: var(--f-head); font-size: 15px; letter-spacing: .08em; padding: 12px 14px; border: 1px solid var(--gold-deep); border-radius: 3px; color: var(--ink-dim); background: var(--dusk); }
.stepper li[aria-current="step"] { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 18px -6px var(--gold); }
.parchment { background: radial-gradient(ellipse at 50% 40%, #f4e9cc66, transparent 70%), url("art/parchment.webp") center / cover no-repeat, var(--parch); color: var(--parch-ink); border-radius: 4px; padding: 30px clamp(18px, 3vw, 38px); box-shadow: 0 0 0 1px #6b5228, 0 0 0 7px #1a1426, 0 0 0 8px var(--gold-deep), 0 20px 50px #000c; min-width: 0; }
.parchment h1 { font-family: var(--f-mark); color: #3b2a12; font-size: clamp(28px, 4vw, 40px); text-align: center; }
.parchment .tag { text-align: center; font-style: italic; margin: 4px 0 22px; color: #5b4527; }
.field { display: grid; gap: 4px; margin-bottom: 16px; }
.field label { font-family: var(--f-head); font-size: 14px; letter-spacing: .08em; color: #3b2a12; }
.field input { min-height: 46px; padding: 8px 12px; border: 1px solid #8a6a3a; border-radius: 3px; background: #fffaf0; color: #20160b; font-family: var(--f-body); font-size: 19px; }
.field .hint { font-size: 15px; color: #5b4527; }
.turnstile { border: 1px dashed #8a6a3a; border-radius: 3px; padding: 12px; text-align: center; font-family: var(--f-mono); font-size: 13px; color: #5b4527; margin-bottom: 18px; }
.parchment .btn { width: 100%; }
.privacy h2 { font-size: 20px; color: var(--gold); margin-bottom: 10px; }
.privacy ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--ink-dim); }
.privacy b { color: var(--ink); font-weight: 600; }
.code { margin-top: 18px; }
.code .val { font-family: var(--f-mono); font-size: 18px; letter-spacing: .14em; color: var(--gold); background: #07060c; border: 1px solid var(--gold-deep); border-radius: 3px; padding: 12px; text-align: center; }

footer { border-top: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); }
footer .wrap { padding-block: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 15px; color: var(--ink-dim); }

@media (max-width: 960px) {
  .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .create { grid-template-columns: minmax(0, 1fr); }
  .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .head, .grid2, .steps { grid-template-columns: minmax(0, 1fr); }
  .head .portrait { max-width: 260px; justify-self: center; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ======================================================================
   Live-site additions (forms, switches, notes, DSL colours)
   ====================================================================== */
.page-wrap { padding-block: 40px 64px; display: grid; gap: 24px; }
.page-wrap > h1 { font-family: var(--f-mark); color: var(--gold); font-size: clamp(30px, 4.5vw, 48px); }
.msg { padding: 12px 16px; border-radius: 4px; border: 1px solid var(--gold-deep); background: var(--dusk); }
.msg.err { border-color: var(--ember); }
.msg.ok { border-color: #4f9a62; }
.field { display: grid; gap: 6px; }
.field label { font-family: var(--f-head); letter-spacing: .06em; font-size: 15px; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input:not([type]) { width: 100%; padding: 11px 12px; font: inherit; font-size: 18px; border-radius: 4px; border: 1px solid #6b5228; background: #fffaf0; color: #2b2014; }
.parchment .field label { color: #3b2a12; }
.parchment .help { font-size: 14px; color: #5b4527; }
.recovery { font-family: var(--f-mono); font-size: clamp(20px, 4vw, 28px); letter-spacing: .12em; color: var(--gold); background: #07060c; border: 1px solid var(--gold); border-radius: 4px; padding: 14px; text-align: center; user-select: all; overflow-wrap: anywhere; }

/* public / private switches */
.vis { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-head); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); cursor: pointer; user-select: none; }
.vis input { appearance: none; width: 38px; height: 20px; border-radius: 12px; background: #2a2540; border: 1px solid var(--gold-deep); position: relative; cursor: pointer; margin: 0; }
.vis input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-dim); transition: left .2s; }
.vis input:checked { background: #6b4f1c; }
.vis input:checked::after { left: 20px; background: var(--gold); }
.vis input:checked + span { color: var(--gold); }
.vis.locked span::before { content: "🔒 "; }
.confirm { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--ember); border-radius: 4px; background: #2a0f0b; display: grid; gap: 10px; }
.confirm[hidden] { display: none; }
.frame h2 .vis { margin-left: auto; }
.box-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 12px; }
.box-head h2 { margin: 0 !important; }

/* entries (notes + timeline) */
.entries { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.entry { border: 1px solid var(--gold-deep); border-radius: 4px; padding: 12px 14px; background: var(--dusk-2); display: grid; gap: 8px; }
.entry .top { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.entry .when { font-family: var(--f-mono); font-size: 13px; color: var(--gold); }
.entry .title { font-weight: 600; font-size: 19px; }
.entry .body { min-width: 0; overflow-wrap: anywhere; }
.entry .body p { margin: 0 0 10px; }
.entry .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.entry.auto { border-style: dashed; }
.entry.unread { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--ember); }
#letters-sent-box > summary { cursor: pointer; list-style-position: inside; }
#letter-body { width: 100%; }
.editor { display: grid; gap: 10px; border: 1px solid var(--gold); border-radius: 4px; padding: 14px; background: #100d1f; }
.editor input[type=text] { padding: 10px 12px; font: inherit; border-radius: 4px; border: 1px solid var(--gold-deep); background: #07060c; color: var(--ink); }
.editor textarea { min-height: 160px; width: 100%; padding: 10px 12px; font-family: var(--f-mono); font-size: 14px; line-height: 1.5; border-radius: 4px; border: 1px solid var(--gold-deep); background: #07060c; color: var(--ink); }
.editor .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.editor .preview { border-top: 1px dashed var(--gold-deep); padding-top: 10px; }
.btn-small { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.linkbtn.danger { color: #e08a7a; }
.pics { display: flex; flex-wrap: wrap; gap: 12px; }
.pics figure { margin: 0; width: 120px; display: grid; gap: 6px; font-size: 13px; }
.pics img { width: 120px; height: 160px; object-fit: cover; border: 1px solid var(--gold-deep); border-radius: 3px; }

/* DSL colour codes. Exact game colours, nudged only where they would vanish
   on the night panels (dark blues, dark red) or on parchment (bright yellow, white, cyan). */
.dsl-r { color: #b8322a; } .dsl-R { color: #ff5a4a; }
.dsl-y { color: #b3a23a; } .dsl-Y { color: #ffe066; }
.dsl-g { color: #2fb84a; } .dsl-G { color: #6cff7a; }
.dsl-b { color: #5c7cf0; } .dsl-B { color: #7f9bff; }
.dsl-c { color: #2fa8a8; } .dsl-C { color: #6ff3f3; }
.dsl-m { color: #b048b0; } .dsl-M { color: #ff6cff; }
.dsl-w { color: #c8c8c8; } .dsl-W { color: #ffffff; }
.dsl-D { color: #9a9a9a; } .dsl-o { color: #e0632a; }
.dsl-p { color: #e6559c; } .dsl-n { color: #b0703a; }
.dsl-u { color: #8a86d8; }
:is(.tale, .parch) .dsl-y, :is(.tale, .parch) .dsl-Y { color: #8a6d00; } :is(.tale, .parch) .dsl-W, :is(.tale, .parch) .dsl-w { color: #3b2a12; }
:is(.tale, .parch) .dsl-C, :is(.tale, .parch) .dsl-c { color: #0f6e72; } :is(.tale, .parch) .dsl-G { color: #1d7a2c; } :is(.tale, .parch) .dsl-g { color: #2a7a3a; }
:is(.tale, .parch) .dsl-M { color: #a0249e; } :is(.tale, .parch) .dsl-B, :is(.tale, .parch) .dsl-b { color: #2a3fae; } :is(.tale, .parch) .dsl-D { color: #5d5a55; }
:is(.tale, .parch) .dsl-R { color: #b3241a; } :is(.tale, .parch) .dsl-u { color: #3d3a8a; } :is(.tale, .parch) .dsl-n { color: #7a4a1c; }
.tale-note { margin-bottom: 18px; }
.tale-note h3 { font-family: var(--f-head); font-size: 18px; color: #3b2a12; margin: 0 0 4px; }
.tale ul { padding-left: 20px; }
.tale .timeline li > div:last-child p { margin: 4px 0 0; }
.vis-wrap { margin-left: auto; }
.publish { margin-top: 18px; padding: 8px 12px; }
.publish .box-head { margin-bottom: 6px; }
.publish .note { margin: 0 0 6px; }

/* ---------- Tavern tale page (v2) ---------- */
.tale-page { gap: 26px; }
.crumbs { margin: 0; }
.tale-hero { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(18px, 3vw, 34px);
  border-radius: 6px; background: radial-gradient(ellipse at 20% 0%, #f2a24a2a, transparent 60%), repeating-linear-gradient(90deg, #3e2614 0 9px, #3a2312 9px 17px, #43291a 17px 26px), #3a2312;
  box-shadow: inset 0 0 0 1px #f1c98333, inset 0 0 60px #000a, 0 18px 40px #000a; }
.tale-portrait { display: grid; gap: 12px; justify-items: center; }
.tale-portrait .portrait { width: min(100%, 290px); }
.tale-portrait .portrait img.img { object-fit: cover; object-position: 50% 18%; }
.nuit-frame { background: radial-gradient(ellipse at 50% 30%, #2a2650, #0d0b18); overflow: hidden; }
.nuit-frame img { position: absolute; right: 0; bottom: 0; width: 92%; height: auto; max-width: none; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.thumbs button { padding: 0; border: 2px solid #6b5228; border-radius: 3px; background: none; cursor: pointer; width: 52px; height: 68px; overflow: hidden; opacity: .75; }
.thumbs button[aria-current="true"], .thumbs button:hover { opacity: 1; border-color: #f1c983; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.tale-id { min-width: 0; display: grid; gap: 8px; justify-items: start; }
.tale-id .eyebrow { color: #e2b56a; }
.tale-id h1 { font-family: var(--f-mark); color: #f1c983; font-size: clamp(40px, 7vw, 78px); line-height: 1; text-shadow: 0 2px 22px #e2a64a55; }
.tale-id .who { margin: 0; font-family: var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: #e8d6b8; font-size: 16px; }
.tale-id .divider { width: min(340px, 90%); margin: 4px 0; }
.looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 0; width: 100%; }
.looks div { padding: 8px 12px; border: 1px solid #f1c98333; border-radius: 4px; background: #00000038; }
.looks dt { font-family: var(--f-head); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #e2b56a; }
.looks dd { margin: 0; color: #f3e7cf; font-size: 18px; }
.tale-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 26px; align-items: start; }
.tale-main, .tale-side { display: grid; gap: 22px; min-width: 0; }
.parch { background: url("art/parchment.webp") center / cover, var(--parch); color: var(--parch-ink); border-radius: 3px; padding: clamp(18px, 3vw, 34px); box-shadow: 0 0 0 6px #3a2413, 0 16px 34px #000b; }
.parch h2 { font-family: var(--f-head); color: #5b3d17; font-size: 22px; margin: 0 0 12px; }
.parch p { margin: 0 0 14px; max-width: 68ch; }
.parch .when { font-family: var(--f-mono); font-size: 13px; color: #7a5622; margin: -6px 0 12px; }
.dropcap > p:first-of-type::first-letter { float: left; font-family: var(--f-mark); font-size: 3.4em; line-height: .9; padding: 4px 8px 0 0; color: #7a2a14; }
.tale-time .timeline { border-left-color: #a07a3e; padding-left: 18px; gap: 14px; }
.tale-time .timeline li::before { background: #7a2a14; box-shadow: 0 0 0 3px #e9dcbc; }
.tale-time .timeline .when { color: #7a5622; }
.tale-time .timeline b { display: block; font-size: 18px; }
.tale-time .body p { margin: 4px 0 0; font-size: 16px; }
.wood { padding: 16px 18px; border-radius: 4px; color: #f3e7cf; background: linear-gradient(180deg, #2a1a10, #1d120b); border: 1px solid #f1c98340; box-shadow: 0 12px 26px #000a; }
.wood h2 { font-family: var(--f-head); color: #f1c983; font-size: 18px; margin: 0 0 10px; display: inline; }
.wood summary { cursor: pointer; list-style: none; }
.wood summary::after { content: " ▾"; color: #e2b56a; }
.wood details[open] summary::after { content: " ▴"; }
.wood .who { margin: 8px 0; color: #e8d6b8; }
.stats.mini { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.stats.mini .stat { padding: 6px 2px; background: #00000040; border-color: #f1c98340; }
.stats.mini .stat b { font-size: 22px; }
.eq-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 16px; }
.eq-list li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; border-bottom: 1px solid #f1c9831f; padding-bottom: 5px; }
.eq-list span { color: #c9a66a; font-size: 14px; }
@media (max-width: 880px) { .tale-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .tale-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .tale-id { justify-items: center; } .tale-portrait .portrait { width: min(80%, 260px); } }
.tale-portrait { width: 100%; }
.tale-time .timeline { margin-left: 6px; }
@media (max-width: 640px) { .tale-portrait .portrait { width: min(78vw, 280px); } .looks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* friends & foes */
.badge { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--ember); color: #fff6e6; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0; line-height: 20px; text-align: center; }
.link-notice { border-color: var(--ember); box-shadow: 0 0 24px -10px var(--ember); }
.sel { padding: 10px 12px; font: inherit; border-radius: 4px; border: 1px solid var(--gold-deep); background: #07060c; color: var(--ink); }
.kind { display: inline-block; font-family: var(--f-head); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; border: 1px solid currentColor; }
.kind-friend { color: #6fcf86; } .kind-enemy { color: #ff6a55; } .kind-rival { color: #e8b04a; } .kind-family { color: #9fb6ff; } .kind-ally { color: #c9a6ff; }
.parch .kind-friend { color: #1f6b33; } .parch .kind-enemy { color: #8f1d12; } .parch .kind-rival { color: #7a5200; } .parch .kind-family { color: #26407a; } .parch .kind-ally { color: #5b2b8a; }
.tale-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tale-links a { color: #5b2b0c; }
.crumbs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.kinds { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.kind-pick { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-head); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.kind + .kind { margin-left: 4px; }
/* pictures with captions and tags */
.pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.pics .pic-card { margin: 0; width: auto; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border: 1px solid var(--gold-deep); border-radius: 4px; background: var(--dusk-2); }
.pic-card img { width: 96px; height: 128px; object-fit: cover; border: 1px solid var(--gold-deep); border-radius: 3px; }
.pic-body { display: grid; gap: 8px; min-width: 0; font-size: 15px; }
.pic-body p { margin: 0; }
.pic-body input[type=text] { padding: 8px 10px; font: inherit; border-radius: 4px; border: 1px solid var(--gold-deep); background: #07060c; color: var(--ink); width: 100%; }
.pic-body .row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.tags { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.tag-pick { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.fullname { margin: 2px 0 10px; display: grid; gap: 6px; justify-items: start; }
.fn-shown { font-family: var(--f-head); font-size: 20px; letter-spacing: .04em; color: var(--ink); }
.editor input[type=password] { padding: 10px 12px; font: inherit; border-radius: 4px; border: 1px solid var(--gold-deep); background: #07060c; color: var(--ink); }
/* Tavern art */
.tavern-room { background: linear-gradient(180deg, #170e09cc 0%, #170e0966 30%, #170e09dd 70%, #0f0a07 100%), url("art/tavern-bg.jpg") center top / cover no-repeat, #170e09; }
.sign-art { width: min(440px, 80%); height: auto; filter: drop-shadow(0 12px 20px #000c); margin-bottom: -4px; }
.board-wrap { padding: clamp(28px, 4.5vw, 64px) clamp(26px, 5vw, 72px); background: url("art/notice-board.webp") center / 100% 100% no-repeat; filter: drop-shadow(0 18px 30px #000c); }
.board-wrap .board { background: none; box-shadow: none; padding: 0; min-height: 260px; }
.tav-shelf { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 26px; align-items: end; border-top: 0; }
.bar-nuit { width: 100%; height: auto; filter: drop-shadow(0 12px 18px #000c); }
.shelf { position: relative; display: block; margin-top: 12px; border-radius: 4px; overflow: hidden; box-shadow: 0 12px 26px #000a; }
.shelf img { display: block; width: 100%; height: auto; transition: filter .3s; }
.shelf span { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 8px 16px; font-family: var(--f-head); letter-spacing: .1em; text-transform: uppercase; font-size: 14px; color: #f1c983; background: #120b06d9; border: 1px solid #f1c98366; border-radius: 3px; white-space: nowrap; }
.shelf:hover img { filter: brightness(1.15); }
.note-card b { line-height: 1.15; }
.note-card b .dsl { font-family: inherit; }
.note-card :is(.dsl-y,.dsl-Y) { color: #8a6d00; } .note-card :is(.dsl-W,.dsl-w) { color: #3b2a12; } .note-card :is(.dsl-C,.dsl-c) { color: #0f6e72; } .note-card .dsl-G { color: #1d7a2c; }
.tale-id h1 { font-size: clamp(34px, 6vw, 64px); line-height: 1.05; }
.ingame { margin: 0; color: #e8d6b8; font-size: 16px; }
.pic-caption { margin: 0; max-width: 290px; text-align: center; color: #e8d6b8; font-size: 15px; font-style: italic; }
.pic-caption .by { font-style: normal; color: #c9a66a; }
@media (max-width: 640px) { .tav-shelf { grid-template-columns: minmax(0, 1fr); justify-items: center; } .bar-nuit { width: 160px; } .board-wrap { padding: 22px 18px; background-size: cover; } }
/* landing-page welcome story, over the three-moons valley (Nuit sits on the rock at the left) */
.welcome { position: relative; border-block: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  background: linear-gradient(90deg, #0b0a1200 0%, #0b0a1210 40%, #0b0a12cc 62%, #0b0a12f2 100%), url("art/valley-moons.jpg") left center / cover no-repeat, #0b0a12; }
.welcome-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); padding-block: clamp(48px, 7vw, 96px); }
.welcome-text { grid-column: 2; display: grid; gap: 4px; }
.welcome-text h2 { font-family: var(--f-mark); color: var(--gold); font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; margin: 4px 0 10px; }
.welcome-text p { margin: 0 0 10px; font-size: 20px; text-shadow: 0 1px 8px #000; }
.welcome-text .sign-off { font-family: var(--f-head); letter-spacing: .08em; color: var(--gold); font-size: 20px; }
.kofi { margin-left: 10px; }
@media (max-width: 820px) {
  .welcome { background: linear-gradient(180deg, #0b0a1200 0%, #0b0a1200 34%, #0b0a12e6 52%, #0b0a12 100%), url("art/valley-moons.jpg") left top / auto 46% no-repeat, #0b0a12; }
  .welcome-inner { grid-template-columns: minmax(0, 1fr); padding-top: 52vw; }
  .welcome-text { grid-column: 1; }
}
.note-card b span { display: inline; font-size: inherit; }
.board-wrap .board { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (max-width: 640px) { .board-wrap .board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .note-card { padding: 8px 8px 10px; } .note-card b { font-size: 17px; } .note-card > span { font-size: 13px; } }
@media (max-width: 820px) {
  .welcome { background: linear-gradient(180deg, #0b0a1200 0, #0b0a1200 40vw, #0b0a12 56vw), url("art/valley-moons.jpg") center top / 100% auto no-repeat, #0b0a12; }
  .welcome-inner { padding-top: 54vw; }
}
/* brand: the Tavern name, with a small credit link to DSL underneath */
.brand { display: grid; gap: 0; }
.fanof { display: inline-flex; align-items: center; gap: 6px; margin-left: 56px; font-size: 13px; color: var(--ink-dim); text-decoration: none; letter-spacing: .03em; }
.fanof img { height: 18px; width: auto; opacity: .9; }
.fanof:hover { color: var(--gold); }
/* small Ko-fi button in the bottom-right corner (only when a Ko-fi address is set) */
.kofi-corner { position: fixed; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 22px; background: #120b06e6; border: 1px solid #f1c98366; color: #f1c983; text-decoration: none; font-family: var(--f-head); font-size: 13px; letter-spacing: .06em; box-shadow: 0 6px 18px #000a; }
.kofi-corner .kofi-text { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s ease; }
.kofi-corner:hover .kofi-text, .kofi-corner:focus-visible .kofi-text { max-width: 220px; }
@media (max-width: 560px) { .fanof { margin-left: 0; } }
/* the Algoron web ring: an old-school ring bar above the footer */
.webring { border-top: 1px solid #f1c98340; background: repeating-linear-gradient(90deg, #1a1009 0 10px, #170e08 10px 20px); }
.ring-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 22px; padding-block: 14px; font-size: 15px; }
.ring-name { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: #f1c983; font-size: 13px; }
.ring-steps, .ring-sites { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.ring-steps a { font-family: var(--f-head); letter-spacing: .06em; color: #f1c983; text-decoration: none; padding: 4px 10px; border: 1px solid #f1c98355; border-radius: 3px; background: #00000040; }
.ring-steps a:hover { background: #f1c98322; }
.ring-sites a { color: #d9c49c; font-size: 14px; }
.ring-sites a + a::before { content: "✦"; color: #8a6a2e; margin-right: 14px; text-decoration: none; display: inline-block; }
/* message of the day on a Tavern page */
.motd { position: relative; padding: 14px 18px 12px; border-radius: 3px; color: var(--parch-ink); background: #f3e3b8; box-shadow: 0 0 0 1px #c9a45e, 0 10px 22px #0008; transform: rotate(-.4deg); font-size: 18px; }
.motd p { margin: 0 0 6px; }
.motd p:last-child { margin-bottom: 0; }
.motd-pin { position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3d18a, #8a5a1c); box-shadow: 0 2px 4px #000a; }
.motd :is(.dsl-y, .dsl-Y) { color: #8a6d00; } .motd :is(.dsl-W, .dsl-w) { color: #3b2a12; } .motd :is(.dsl-C, .dsl-c) { color: #0f6e72; } .motd .dsl-G { color: #1d7a2c; }
.motd-edit { display: grid; gap: 8px; margin: 6px 0 10px; padding-top: 8px; border-top: 1px dashed var(--gold-deep); }
.motd-edit textarea { width: 100%; padding: 8px 10px; font: inherit; font-size: 16px; border-radius: 4px; border: 1px solid var(--gold-deep); background: #07060c; color: var(--ink); resize: vertical; }
.motd-edit .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.parchment .msg { background: #fbf2dc; color: var(--parch-ink); border-color: #b08a4a; }
.parchment .msg a { color: #7a2a14; }
.parchment .msg.err { background: #f8e1d6; border-color: #b3412b; }

/* comments on Tavern pages */
.tale-comments .comment-form { display: grid; gap: 8px; margin: 0 0 18px; }
.tale-comments textarea { width: 100%; padding: 10px 12px; font: inherit; border-radius: 4px; border: 1px solid #b89a63; background: #fffaf0; color: #2b1d10; }
.tale-comments .comment-form .btn { justify-self: start; }
.comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.comments li { border-top: 1px dashed #b89a63; padding-top: 12px; display: grid; gap: 6px; }
.comments .top { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.comments .when { font-size: 14px; opacity: .75; margin: 0; }
.comments .comment-remove { margin-left: auto; }
.comments .body { overflow-wrap: anywhere; min-width: 0; }
.comments .body p { margin: 0 0 8px; }
.tale-comments .note, .tale-comments label { color: #5b4527; }
.tale-comments a { color: #7a2a14; }
.tale-comments .linkbtn.danger { color: #8f1d12; }
.tale-comments .msg { background: #fbf2dc; color: var(--parch-ink); border-color: #b08a4a; margin: 0 0 12px; }
.tale-comments .msg.err { background: #f8e1d6; border-color: #b3412b; }

/* tags: clan / kingdom banners (dsl-mud.org minis), god portrait, free-choice tags */
.tags-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 12px 0; }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border: 1px solid var(--gold-deep); border-radius: 4px; background: #0006; font-size: 15px; line-height: 1.2; }
.tag:not(.tag-flag):not(.tag-god) { padding: 4px 10px; }
.tag .flag { width: 60px; height: 25px; object-fit: cover; border-radius: 2px; display: block; }
.tag .god { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; border: 1px solid var(--gold-deep); }
.tag-loner { font-variant: small-caps; letter-spacing: .06em; }
.tags-row.small { margin: 2px 0 4px; gap: 5px; }
.tags-row.small .tag { padding: 1px; border-color: #8a6a3a; background: none; }
.tags-row.small .flag { width: 40px; height: 17px; }
.tags-row.small .god { width: 19px; height: 19px; }
.tags-row.small .tag-loner { padding: 1px 6px; font-size: 12px; color: var(--parch-ink); }
.tags-editor { display: grid; gap: 12px; margin-top: 10px; }
.tags-editor .tag-field { display: grid; gap: 4px; max-width: 320px; }
.tags-editor select, .tags-editor input[type=text] { padding: 8px 10px; font: inherit; border-radius: 4px; border: 1px solid var(--gold-deep); background: #07060c; color: var(--ink); }

/* allegiance picker (Description tab) */
.allegiance .pill-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.allegiance .pill-row .eyebrow { width: 100%; margin-bottom: 2px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font: inherit; font-size: 14px; color: var(--ink); background: #0005; border: 1px solid #5a4630; border-radius: 999px; cursor: pointer; }
.pill img { width: 30px; height: 13px; object-fit: cover; border-radius: 2px; }
.pill:hover { border-color: var(--gold-deep); }
.pill.on { border-color: var(--gold); background: #3a2a12; color: #fff3d6; box-shadow: 0 0 0 1px var(--gold) inset; }

/* who's online */
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #4fd36b; box-shadow: 0 0 6px #4fd36baa; vertical-align: middle; position: relative; top: -1px; }
.whos-online { border-top: 1px solid #ffffff14; font-size: 13px; }
.whos-online .wrap { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding-block: 10px; }
.whos-online .eyebrow { font-size: 11px; margin-right: 4px; }
.whos-online a { color: var(--ink); text-decoration: none; opacity: .85; }
.whos-online a:hover { opacity: 1; text-decoration: underline; }
.whos-online .quiet { opacity: .55; font-style: italic; }
.online-now { margin-left: 10px; text-transform: none; letter-spacing: 0; font-size: 13px; color: #9fe0ad; }
.note-card b .dot { top: -3px; }
.tag-rank { font-style: italic; }

/* ---------- Tavern page colours: the four moons (body.moon-<key> on a Tavern page; Moonlit = the normal look, no class) ----------
   Each theme sets the same few colours; the rules below apply them to the page's dark surfaces. Parchment and art stay. */
body.moon-lunitari { --t-glow: #ff5a3c2e; --t-bg1: #2c0f0c; --t-bg2: #170706; --t-bg3: #0d0404; --t-hi: #ffb09a; --t-hi2: #f08a6e; --t-text: #f1dcd2; --t-text2: #fbe9e1;
  --t-line: #f08a6e40; --t-wood1: #34120e; --t-wood2: #1e0907; --t-stripe1: #3a1410; --t-stripe2: #34110d; --t-stripe3: #41170f; --t-ring: #3d120c; }
body.moon-solinari { --t-glow: #b8d4ff2e; --t-bg1: #1f2a3a; --t-bg2: #121a26; --t-bg3: #0b1018; --t-hi: #e8f0fc; --t-hi2: #b9cdea; --t-text: #d9e3f1; --t-text2: #f0f5fc;
  --t-line: #c9daf040; --t-wood1: #263346; --t-wood2: #161f2c; --t-stripe1: #26324a; --t-stripe2: #222d43; --t-stripe3: #2b3851; --t-ring: #263247; }
body.moon-nuitari { --t-glow: #9b6bff26; --t-bg1: #170f24; --t-bg2: #0b0712; --t-bg3: #050308; --t-hi: #d7bfff; --t-hi2: #b394f0; --t-text: #e0d6f0; --t-text2: #f1ebfa;
  --t-line: #b58cff40; --t-wood1: #1d1430; --t-wood2: #0e0918; --t-stripe1: #1c1330; --t-stripe2: #18102a; --t-stripe3: #211736; --t-ring: #22173a; }
body.moon-greenwood { --t-glow: #b8e08a24; --t-bg1: #15261a; --t-bg2: #0c160f; --t-bg3: #070d09; --t-hi: #e6f3c9; --t-hi2: #b9d98a; --t-text: #dbe8cf; --t-text2: #eef6e4;
  --t-line: #b9d98a40; --t-wood1: #1a2e1f; --t-wood2: #0f1b12; --t-stripe1: #1c3121; --t-stripe2: #182b1d; --t-stripe3: #203826; --t-ring: #1e3322; }
body.moon-stonehall { --t-glow: #ff9a4a24; --t-bg1: #2a2a2d; --t-bg2: #19191b; --t-bg3: #0e0e0f; --t-hi: #f2c697; --t-hi2: #d69a5c; --t-text: #ddd8d0; --t-text2: #f1ede6;
  --t-line: #d69a5c40; --t-wood1: #303034; --t-wood2: #1b1b1d; --t-stripe1: #333337; --t-stripe2: #2e2e31; --t-stripe3: #39393c; --t-ring: #2c2c2f; }
body.moon-chaos { --t-glow: #5a000048; --t-bg1: #080404; --t-bg2: #030101; --t-bg3: #000; --t-hi: #dccdbb; --t-hi2: #8fc23a; --t-text: #b0a39a; --t-text2: #d3c8bd;
  --t-line: #6e1a1a70; --t-wood1: #0c0505; --t-wood2: #040101; --t-stripe1: #0a0404; --t-stripe2: #070303; --t-stripe3: #0d0505; --t-ring: #110404; }
/* Chaos: a mutation cult. Near-black, a slow blood haze, bile-green corruption from below, bone lettering, tarnished art. */
body.moon-chaos .tavern { background: radial-gradient(ellipse at 50% -15%, #6a000055, transparent 55%), radial-gradient(ellipse at 0% 100%, #4f7a1426, transparent 45%), radial-gradient(ellipse at 100% 70%, #3a000040, transparent 50%), radial-gradient(ellipse at 50% 50%, transparent 40%, #000c 100%), linear-gradient(180deg, #080404, #020101 60%, #000) !important; }
body.moon-chaos .tale-hero { position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px #5a0f0f88, inset 0 0 90px #000, 0 0 40px -10px #6a0000aa, 0 18px 40px #000; }
body.moon-chaos .tale-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 30% 110%, #7fb02a33, transparent 55%), radial-gradient(ellipse at 85% -10%, #8b000044, transparent 50%); animation: chaos-pulse 7s ease-in-out infinite alternate; }
@keyframes chaos-pulse { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.moon-chaos .tale-hero::after { animation: none; opacity: .7; } }
body.moon-chaos .tale-id h1 { text-shadow: 0 0 14px #8b0000, 0 0 34px #4a0000, 0 2px 0 #000 !important; }
body.moon-chaos .tale-id .divider { filter: grayscale(.85) sepia(.4) hue-rotate(-25deg) brightness(.7) contrast(1.2); }
body.moon-chaos .parch { filter: brightness(.82) saturate(.75) sepia(.15); box-shadow: 0 0 0 6px #110404, 0 0 0 7px #4a0d0d, 0 16px 40px #000; }
body.moon-chaos .looks div { background: #0008; }
body.moon-chaos .wood { box-shadow: inset 0 0 30px #000, 0 0 24px -12px #5a0000; }
body.moon-themed .tavern { background: radial-gradient(ellipse at 50% -10%, var(--t-glow), transparent 60%), linear-gradient(180deg, var(--t-bg1), var(--t-bg2) 60%, var(--t-bg3)); }
body.moon-themed .tale-hero { background: radial-gradient(ellipse at 20% 0%, var(--t-glow), transparent 60%), repeating-linear-gradient(90deg, var(--t-stripe1) 0 9px, var(--t-stripe2) 9px 17px, var(--t-stripe3) 17px 26px), var(--t-stripe2); box-shadow: inset 0 0 0 1px var(--t-line), inset 0 0 60px #000a, 0 18px 40px #000a; }
body.moon-themed :is(.tale-id h1, .wood h2, .ring-name, .ring-steps a) { color: var(--t-hi); }
body.moon-themed .tale-id h1 { text-shadow: 0 2px 22px var(--t-glow); }
body.moon-themed :is(.tale-id .eyebrow, .looks dt, .wood summary::after, .eq-list span, .pic-caption .by) { color: var(--t-hi2); }
body.moon-themed :is(.tale-id .who, .ingame, .pic-caption, .wood .who, .ring-sites a, .crumbs a) { color: var(--t-text); }
body.moon-themed :is(.looks dd, .wood) { color: var(--t-text2); }
body.moon-themed :is(.looks div, .stats.mini .stat, .ring-steps a, .tag) { border-color: var(--t-line); }
body.moon-themed .wood { background: linear-gradient(180deg, var(--t-wood1), var(--t-wood2)); border-color: var(--t-line); }
body.moon-themed .parch { box-shadow: 0 0 0 6px var(--t-ring), 0 16px 34px #000b; }
body.moon-themed :is(.thumbs button[aria-current="true"], .thumbs button:hover) { border-color: var(--t-hi); }
body.moon-themed .webring { background: repeating-linear-gradient(90deg, var(--t-bg2) 0 10px, var(--t-bg3) 10px 20px); border-top-color: var(--t-line); }
body.moon-themed :is(footer, .whos-online) { background: var(--t-bg3); }

/* the picker on the Account tab */
.theme-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.theme-pick { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 10px; font: inherit; color: var(--ink); background: #0004; border: 1px solid #5a4630; border-radius: 6px; cursor: pointer; }
.theme-pick .swatch { width: 100%; height: 44px; border-radius: 4px; border: 1px solid #ffffff22; }
.theme-pick.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.theme-pick .note { font-size: 13px; }
.theme-moonlit .swatch { background: linear-gradient(90deg, #3e2614, #170e09 55%, #f1c983 56%, #f1c983 70%, #c8462f 71%); }
.theme-lunitari .swatch { background: linear-gradient(90deg, #3a1410, #170706 55%, #ffb09a 56%, #ffb09a 70%, #f08a6e 71%); }
.theme-solinari .swatch { background: linear-gradient(90deg, #26324a, #121a26 55%, #e8f0fc 56%, #e8f0fc 70%, #b9cdea 71%); }
.theme-nuitari .swatch { background: linear-gradient(90deg, #1c1330, #0b0712 55%, #d7bfff 56%, #d7bfff 70%, #b394f0 71%); }
.theme-greenwood .swatch { background: linear-gradient(90deg, #1c3121, #0c160f 55%, #e6f3c9 56%, #e6f3c9 70%, #b9d98a 71%); }
.theme-stonehall .swatch { background: linear-gradient(90deg, #39393c, #19191b 55%, #f2c697 56%, #f2c697 70%, #d69a5c 71%); }
.theme-chaos .swatch { background: radial-gradient(ellipse at 20% 120%, #7fb02a55, transparent 55%), radial-gradient(ellipse at 30% -20%, #8b000088, transparent 60%), linear-gradient(90deg, #0a0404, #000 55%, #dccdbb 56%, #dccdbb 70%, #8fc23a 71%); }

/* Tavern board: count of travellers, and the always-handy "pin your own tale" note */
.board-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 18px; margin-bottom: -10px; }
.board-bar .note { color: #e8d6b8; font-size: 15px; }
.pin-own { position: relative; padding: 8px 16px 8px 30px; font-family: var(--f-head); font-size: 14px; letter-spacing: .06em; color: #3b2a12; text-decoration: none; background: url("art/parchment.webp") center / cover, var(--parch); border-radius: 2px; transform: rotate(1.2deg); box-shadow: 0 6px 14px #000a; }
.pin-own::before { content: ""; position: absolute; left: 10px; top: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3d18a, #8a5a1c); box-shadow: 0 2px 3px #000a; }
.pin-own:hover, .pin-own:focus-visible { transform: rotate(0) translateY(-2px); }
/* message of the day: the remaining colour codes, darkened for the light note */
.motd :is(.dsl-R, .dsl-r) { color: #9a1c12; } .motd :is(.dsl-M, .dsl-m) { color: #8a1f88; } .motd :is(.dsl-B, .dsl-b) { color: #2a3fae; } .motd .dsl-g { color: #2a7a3a; } .motd .dsl-D { color: #5d5a55; }
body.moon-chaos .motd { filter: brightness(.84) saturate(.7) sepia(.2); box-shadow: 0 0 0 1px #4a0d0d, 0 10px 26px #000; }

/* ---------- events ---------- */
.ev-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 26px; align-items: start; }
.ev-list, .ev-side { display: grid; gap: 22px; min-width: 0; }
.ev-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; scroll-margin-top: 20px; transition: box-shadow .3s; }
.ev-card.flash { box-shadow: 0 0 0 6px #3a2413, 0 0 0 9px var(--gold), 0 16px 34px #000b; }
.ev-date time { display: grid; justify-items: center; padding: 6px 0; border: 2px solid #7a5622; border-radius: 4px; background: #fffaf0aa; color: #5b3d17; font-family: var(--f-head); }
.ev-date b { font-size: 28px; line-height: 1; }
.ev-date span { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.ev-body { min-width: 0; }
.ev-body h2 { margin: 0 0 4px; }
.ev-meta { color: #5b4527; font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 10px; }
.ev-meta time { font-weight: 600; color: #3b2a12; }
.ev-who { font-size: 15px; color: #4a3720; margin: 8px 0; }
.ev-card a { color: #7a2a14; }
.ev-card .body { overflow-wrap: anywhere; }
.ev-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ev-act { margin: 0; }
.ev-cancel { margin-left: 8px; color: #8f1d12; }
.ev-past summary { cursor: pointer; color: #e8d6b8; font-family: var(--f-head); letter-spacing: .06em; margin-bottom: 12px; }
.ev-past .ev-card { opacity: .8; margin-bottom: 16px; }
.ev-form { display: grid; gap: 10px; }
.ev-form label { display: grid; gap: 4px; color: #3b2a12; font-size: 15px; }
.ev-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ev-form :is(input, textarea) { width: 100%; padding: 8px 10px; font: inherit; border-radius: 4px; border: 1px solid #b89a63; background: #fffaf0; color: #2b1d10; }
.ev-form .btn { justify-self: start; }
.ev-new .note, .ev-form .note { color: #5b4527; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cal-head b { font-family: var(--f-head); color: #f1c983; letter-spacing: .06em; }
.cal-head button { background: none; border: 1px solid #f1c98355; color: #f1c983; border-radius: 3px; width: 30px; height: 28px; cursor: pointer; font-size: 18px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-grid .dow { font-size: 12px; color: #c9a66a; }
.cal-grid .day { padding: 6px 0; border-radius: 4px; font-size: 14px; color: #e8d6b8; background: none; border: 1px solid transparent; font: inherit; }
.cal-grid .today { border-color: #f1c98366; }
.cal-grid .has { background: #c8462f; color: #fff6e6; cursor: pointer; font-weight: 600; }
.cal-grid .has:hover { background: #e0563c; }
.cal-grid .has.dsl { background: #3c5a9e; }
.cal-grid .has.dsl:hover { background: #4d6fc0; }
.ev-badge { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 8px; border-radius: 3px; background: #3c5a9e; color: #f4ecdc !important; font-family: var(--f-body); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.ev-dsl .ev-date time { border-color: #3c5a9e; }
.coming-up { padding: 16px 20px; border-radius: 4px; background: #00000059; border: 1px solid #f1c98333; color: #e8d6b8; }
.coming-up h2 { font-family: var(--f-head); color: #f1c983; font-size: 18px; margin: 0 0 8px; }
.coming-up ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.coming-up a { color: #e8d6b8; text-decoration: none; }
.coming-up a:hover b { text-decoration: underline; }
.coming-up time { color: #e2b56a; font-family: var(--f-mono); font-size: 13px; margin-right: 6px; }
.coming-up .note { color: #c9a66a; }
.events-page .msg { max-width: 760px; margin: 0 auto; }
@media (max-width: 860px) { .ev-layout { grid-template-columns: minmax(0, 1fr); } .ev-side { order: -1; } }
.parch a:not(.btn) { color: #7a2a14; }

/* ---------- page music ---------- */
.tune-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tune-pick { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid #5a4630; border-radius: 6px; background: #0004; }
.tune-pick.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.tune-choose { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 0; font: inherit; color: var(--ink); background: none; border: 0; cursor: pointer; }
.tune-choose .note { font-size: 13px; }
.tune-listen { justify-self: start; font-size: 13px; }
.own-music { margin-top: 14px; }
.own-music summary { cursor: pointer; color: var(--gold); }
.own-music .editor { margin-top: 10px; display: grid; gap: 8px; }
.music-player { position: fixed; left: max(14px, env(safe-area-inset-left, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; gap: 10px;
  max-width: min(360px, calc(100vw - 100px)); padding: 6px 12px 6px 6px; border-radius: 30px; background: #0b0a12e6; border: 1px solid var(--gold-deep); box-shadow: 0 8px 24px #000a; color: var(--ink); }
.music-player button { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold); background: radial-gradient(circle at 35% 30%, #3a2a12, #120d06); color: #f1c983; font-size: 20px; cursor: pointer; }
.music-player.on button { animation: music-spin 3s linear infinite; }
@keyframes music-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .music-player.on button { animation: none; } }
.music-player .meta { display: grid; min-width: 0; line-height: 1.2; }
.music-player .meta b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-player .meta small { font-size: 11px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-player .meta a { color: inherit; }
.music-player input[type=range] { width: 70px; accent-color: #d6b26a; }
@media (max-width: 520px) { .music-player input[type=range] { display: none; } }
.bar-right { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ambience { padding: 6px 12px; font: inherit; font-size: 14px; color: #e8d6b8; background: #0006; border: 1px solid #f1c98340; border-radius: 20px; cursor: pointer; }
.ambience[aria-pressed="true"] { border-color: #f1c983aa; color: #f1c983; }

/* achievements */
.ach-icon { font-size: 22px; }
.ach-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.ach-row .ach { font-size: 20px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #0006; border: 1px solid #f1c98355; cursor: help; }