/* marks font: written by tools/marks_font.py */
@font-face { font-family:"Oldwoods Marks"; src:url(marks.woff2) format("woff2"); font-display:swap; unicode-range:U+2600,U+2618,U+2640,U+2642,U+2728,U+2744,U+1F33C,U+1F33F,U+1F380,U+1F383,U+1F384,U+1F397,U+1F451,U+1F47B,U+1F54A,U+1F6E1,U+1F90D,U+1F95A,U+1F9C4,U+1F9EA; }
/* end of marks font */
/* Oldwoods — two voices: the tale in a serif, everything you press or read at a glance in a sans. */
:root {
  --ok:#7bc47f; --warn:#e0b04f; --bad:#e05a4f; --bg:#0f1512; --panel:#16201b; --panel-2:#1d2a23; --ink:#e8e4d8; --dim:#9aa59d;
  --accent:#c9a24d; --accent-soft:rgba(201,162,77,.55); --line:#26332c; --error:#e07a5f; --blue:#78a0dc;
  --serif: "Oldwoods Marks", Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --ui: "Oldwoods Marks", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 720px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 var(--serif); min-height:100vh; display:flex; flex-direction:column; }
main { flex:1; width:100%; max-width:var(--measure); margin:0 auto; padding:16px; }

/* ---- shell ---- */
header, footer { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); font-family:var(--ui); }
footer { border:0; border-top:1px solid var(--line); color:var(--dim); font-size:13px; justify-content:center; }
.brand { color:var(--accent); text-decoration:none; font:20px/1 var(--serif); letter-spacing:.12em; text-transform:uppercase; }
.brand:hover, .brand:visited { color:var(--accent); }
.lang a { color:var(--dim); text-decoration:none; margin-left:12px; font-size:13px; letter-spacing:.06em; } .lang a.on { color:var(--accent); } .lang a:hover { color:var(--ink); }

/* ---- links: gold, never browser blue ---- */
a { color:var(--accent); text-decoration:underline; text-decoration-color:var(--accent-soft); text-underline-offset:3px; }
a:visited { color:var(--accent); }
a:hover { color:var(--ink); text-decoration-color:var(--ink); }
a.who { color:var(--ink); text-decoration-color:var(--dim); } a.who:hover { color:var(--accent); }
.hint a { color:var(--ok); }
.mail li a { color:var(--ink); text-decoration:none; }

/* ---- the tale ---- */
h1 { font:normal 24px/1.25 var(--serif); margin:8px 0 14px; color:var(--accent); }
h2 { font:normal 18px/1.3 var(--serif); color:var(--accent); margin:18px 0 8px; }
.story p { margin:0 0 12px; }
.story p.life-line { margin-top:14px; }
.story p.after { margin-top:10px; }
.story p.note { padding:10px 12px; border-radius:4px; border:1px solid var(--line); background:rgba(201,162,77,.08); }
.story p.note.motd { border-color:var(--accent-soft); background:rgba(201,162,77,.12); color:var(--ink); }
.story p.note.alert { border-color:rgba(224,90,79,.6); background:rgba(224,90,79,.12); }
.story p.note.notice { border-color:rgba(224,176,79,.5); background:rgba(224,176,79,.10); color:var(--dim); }
.story p.note.quest, .story p.note.good, p.note.good { border-color:rgba(123,196,127,.5); background:rgba(123,196,127,.10); }
p.note.good { padding:10px 12px; border-radius:4px; border:1px solid rgba(123,196,127,.5); }
.story p.note.poll { border-color:rgba(120,160,220,.5); background:rgba(120,160,220,.10); }
.story p.note.holiday { border-color:rgba(181,138,214,.55); background:rgba(181,138,214,.12); }
.story p.note.poll form { display:inline-block; margin:6px 6px 0 0; }
.story p.note.poll .opt { display:block; color:var(--dim); }
.story p.note.poll .opt.mine { color:var(--ink); }
.says { color:#cfc4a8; font-style:italic; }
.letter { white-space:pre-wrap; }
.dim { color:var(--dim); }
.error { color:var(--error); font-family:var(--ui); font-size:14px; }
.hint { background:none; border:0; border-left:2px solid rgba(123,196,127,.5); padding:4px 12px; margin:14px 0 0; color:var(--dim); font:13px/1.5 var(--ui); }

/* ---- the stats bar ---- */
.stats { display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:10px; margin-bottom:14px; font:13px/1.6 var(--ui); color:var(--dim); }
.stats .name { grid-column:1 / -1; color:var(--ink); font:15px/1.6 var(--serif); margin-bottom:2px; }
.stats small { color:var(--accent); margin-left:2px; font-size:12px; }
.stats .gem { color:#7fd3e6; }
.life-ok { color:var(--ok); } .life-warn { color:var(--warn); } .life-bad { color:var(--bad); font-weight:bold; }

/* ---- what you press ---- */
button, .btn, input, select, textarea { font-family:var(--ui); }
.choices { display:flex; flex-direction:column; gap:8px; margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }
.choices form { margin:0; }
.choices .btn, .choices button, .card button {
  display:block; width:100%; text-align:left; padding:12px 14px; background:#121a16; color:var(--accent);
  border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:3px; text-decoration:none;
  font:500 15px/1.35 var(--ui); letter-spacing:.01em; cursor:pointer; transition:background .12s, border-color .12s, color .12s;
}
.choices .btn::before, .choices button::before { content:"\203A\00a0\00a0"; color:var(--accent-soft); font-weight:700; }
.card button { color:var(--accent); }
.choices .btn:hover, .choices button:hover, .card button:hover { background:var(--panel-2); border-color:var(--accent-soft); border-left-color:var(--accent); color:#e9d39a; }
.choices .btn:hover::before, .choices button:hover::before { color:var(--accent); }
.choices .doors { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 6px; }
.choices .doors .btn, .choices .doors button { border-left:1px solid var(--line); padding:10px 12px; background:var(--panel); color:var(--dim); font-weight:400; font-size:14px; line-height:1.3; width:100%; }
.choices .doors .btn::before, .choices .doors button::before { content:none; }
@media (max-width:899px) { .choices .doors > :last-child:nth-child(odd) { grid-column:1 / -1; } }   /* two columns: a door left alone on its row takes the whole row */
.choices .doors .btn.unread { color:var(--accent); border-left:3px solid var(--accent); font-weight:600; background:rgba(201,162,77,.08); }
.choices .doors .btn.unread::after { content:" \25CF"; color:var(--ok); font-size:11px; vertical-align:middle; }
.choices .btn.ready, .choices button.ready { border-left-color:var(--ok); color:var(--ok); background:rgba(123,196,127,.08); }
.choices .btn.ready::before, .choices button.ready::before { color:var(--ok); }
.stats .st b em.love { font-style:normal; font-size:11px; margin-left:4px; }
.stats .st b em.love.love-f, .stats .st.who.love-f small, .stats .st.who.love-f b em { color:#e8a0c0; }
.stats .st b em.love.love-m, .stats .st.who.love-m small, .stats .st.who.love-m b em { color:#8ec5ec; }
.stats .st.who.love-f { border-color:rgba(232,160,192,.45); background:rgba(232,160,192,.07); }
.stats .st.who.love-m { border-color:rgba(142,197,236,.45); background:rgba(142,197,236,.07); }
.stats .st.who.far b em { color:var(--dim); font-style:italic; }
.stats .st.ready { border-color:rgba(123,196,127,.6); background:rgba(123,196,127,.08); }
a.st.mail { text-decoration:none; } a.st.mail:hover { border-color:var(--accent-soft); } a.st.mail small::before { content:"\2709\00a0"; }
.stats .st.ready b, .stats .st.ready b em { color:var(--ok); }
.mail li form.burn { display:inline; margin-left:8px; } .mail li form.burn button { width:auto; background:none; border:0; padding:0 4px; color:var(--dim); font:15px/1 var(--ui); cursor:pointer; } .mail li form.burn button:hover { color:var(--bad); }
.choices .doors .btn:hover, .choices .doors button:hover { border-color:var(--accent-soft); color:var(--ink); }
.choices .doors form { margin:0; }
.choices .util { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
.choices .util form { display:contents; }
.choices .util .btn, .choices .util button { display:inline; width:auto; padding:0; margin:0; background:none; border:0; border-radius:0; color:var(--dim); font:400 13px/1.6 var(--ui); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; letter-spacing:0; }
.choices .util .btn::before, .choices .util button::before { content:none; }
.choices .util .btn:hover, .choices .util button:hover { color:var(--ink); background:none; text-decoration-color:var(--ink); }
.choices .util .btn.heart { color:var(--accent); text-decoration-color:rgba(201,162,77,.45); font-weight:600; }   /* the realm's gold: pink ribbons speak of illness */
.choices .util .btn.heart::before { content:"\1F397\00a0"; color:var(--accent); }   /* the supporter's ribbon (rules.SUPPORTER_MARK) */
.choices .util .btn.heart:hover { color:#e3c06a; text-decoration-color:#e3c06a; }
.choices button.admin, .choices .btn.admin { border-left-color:var(--bad); background:var(--panel); color:var(--dim); font-size:13px; font-weight:400; border-style:dashed; margin-top:14px; }
.choices button.admin::before, .choices .btn.admin::before { color:var(--bad); }
.inline-link { display:inline-block; width:auto; margin-left:8px; padding:4px 10px; font:400 13px/1.5 var(--ui); background:var(--panel); color:var(--ink); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:3px; text-decoration:none; }
.inline-link:hover { background:var(--panel-2); color:var(--ink); }
.inline-link.danger { border-left-color:var(--bad); }
table.admin .acts button, .inline button, form.reply button, details.report button { padding:4px 8px; font:400 13px/1.5 var(--ui); background:var(--panel); color:var(--ink); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:3px; cursor:pointer; }
table.admin .acts button:hover, .inline button:hover, form.reply button:hover, details.report button:hover { background:var(--panel-2); }
button.swatch { width:auto; padding:8px 12px; } button.swatch.have { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.swatches { margin:0 0 12px; } .swatches form { display:inline-block; margin:0 6px 6px 0; }

/* ---- forms and cards ---- */
.forms { display:grid; gap:16px; align-items:start; }
.choices.support { margin-top:14px; padding-top:0; border:0; }
.heart, .supporters { color:var(--accent); } a.supporters { text-decoration:none; margin-left:12px; font:13px/1.5 var(--ui); }
p.dim.small { color:var(--dim); font:13px/1.5 var(--ui); margin:6px 0 0; }
/* ---- the secrets' ledger ---- */
table.admin.eggs tr.off td { opacity:.5; }
table.admin.eggs td code { font-size:11px; white-space:normal; }
.eggs-add .row { display:flex; flex-wrap:wrap; gap:6px; } .eggs-add .row input { width:auto; min-width:90px; flex:1; }
.eggs-add label { margin-bottom:8px; }
.story p.note.holiday.secret { border-color:rgba(181,138,214,.7); }
/* ---- the visitors' book ---- */
.mezel .cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin:0 0 12px; }
.mezel .card { margin:0 0 12px; }
.mezel .card h2 { font-size:15px; margin:0 0 8px; color:var(--accent); }
.mezel p.big { margin:0 0 6px; font:600 28px/1.2 var(--ui); color:var(--ink); } .mezel p.big small { font:12px/1.4 var(--ui); color:var(--dim); margin-left:6px; }
.mezel p.chips { margin:0; }
.mezel .bars { display:flex; align-items:flex-end; gap:3px; height:110px; padding-top:6px; }
.mezel .bars .bar { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; }
.mezel .bars .bar i { display:block; width:100%; background:var(--accent); border-radius:2px 2px 0 0; min-height:1px; opacity:.85; }
.mezel .bars .bar small { font:9px/1.4 var(--ui); color:var(--dim); margin-top:3px; overflow:hidden; white-space:nowrap; }
.mezel .bars .bar i.h0 { height:1%; } .mezel .bars .bar i.h5 { height:5%; } .mezel .bars .bar i.h10 { height:10%; } .mezel .bars .bar i.h15 { height:15%; } .mezel .bars .bar i.h20 { height:20%; }
.mezel .bars .bar i.h25 { height:25%; } .mezel .bars .bar i.h30 { height:30%; } .mezel .bars .bar i.h35 { height:35%; } .mezel .bars .bar i.h40 { height:40%; } .mezel .bars .bar i.h45 { height:45%; }
.mezel .bars .bar i.h50 { height:50%; } .mezel .bars .bar i.h55 { height:55%; } .mezel .bars .bar i.h60 { height:60%; } .mezel .bars .bar i.h65 { height:65%; } .mezel .bars .bar i.h70 { height:70%; }
.mezel .bars .bar i.h75 { height:75%; } .mezel .bars .bar i.h80 { height:80%; } .mezel .bars .bar i.h85 { height:85%; } .mezel .bars .bar i.h90 { height:90%; } .mezel .bars .bar i.h95 { height:95%; } .mezel .bars .bar i.h100 { height:100%; }
.mezel ul.board li { font-size:14px; display:flex; justify-content:space-between; gap:8px; } .mezel ul.board li small { color:var(--accent); }
.mezel table.admin td code { font-size:12px; }
/* ---- the front page: the tale, its numbers, and the doors ---- */
.landing { display:grid; gap:22px; align-items:start; }
.landing .tale h1 { margin:10px 0 12px; font-size:26px; }
.landing .tale p { margin:0 0 12px; }
.landing .banner { display:block; width:100%; max-height:300px; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
.landing .numbers { list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px; padding:0; margin:16px 0 14px; }
.landing .numbers li { background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:10px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:2px; }
.landing .numbers b { font:600 24px/1.2 var(--ui); color:var(--accent); }
.landing .numbers span { color:var(--dim); font:12px/1.4 var(--ui); text-transform:uppercase; letter-spacing:.06em; }
.landing .doors { gap:12px; }
.landing .doors .card { padding:14px 16px; }
.landing .doors .card h2 { font-size:17px; margin-bottom:8px; }
.landing .doors .card label { margin-bottom:8px; font-size:13px; }
.landing .doors .card input, .landing .doors .card select { padding:8px 10px; font-size:15px; margin-top:3px; }
.landing .doors .card button { padding:10px 14px; }
.landing p.note.shut { margin:0; padding:10px 12px; border-radius:4px; border:1px solid var(--line); background:var(--panel); color:var(--dim); font-size:14px; }
@media (min-width:900px) {
  main.front { max-width:1180px; }
  .landing { grid-template-columns:minmax(0, 1fr) 400px; gap:8px 48px; }
  .landing .banner { grid-column:1 / -1; max-height:340px; margin-bottom:14px; }
  .landing .doors { position:sticky; top:16px; grid-template-columns:1fr; }
}
@media (min-width:640px) { .forms { grid-template-columns:1fr 1fr; } }
.card { background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:14px; }
.card h2 { margin:0 0 10px; font-size:17px; }
.card label { display:block; margin-bottom:10px; color:var(--dim); font:14px/1.5 var(--ui); }
.card input, .card select, .card textarea, details.fold textarea, details.report textarea, form.reply textarea, .settings input[type=number], .settings input:not([type]) {
  display:block; width:100%; margin-top:4px; padding:10px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:3px; font:16px/1.4 var(--ui);
}
.card input:focus, .card select:focus, .card textarea:focus, details textarea:focus { outline:none; border-color:var(--accent-soft); }
.card textarea { min-height:60px; }
.card.user { margin-bottom:14px; }
.card.adorn h2 { margin-bottom:6px; }
.card label.kin, .kin-pick .kin { display:block; padding:10px 12px; margin-bottom:8px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:3px; color:var(--ink); cursor:pointer; font-family:var(--ui); font-size:15px; }
.card label.kin span, .kin-pick .kin span { display:block; color:var(--dim); font-size:14px; margin-top:2px; }
.kin-pick .kin input { margin-right:8px; width:auto; display:inline; }
.kin-pick .abil { font-size:13px; color:var(--dim); margin-top:6px; line-height:1.5; } .kin-pick .abil em, .abil-list em { color:var(--accent); font-style:normal; display:inline-block; width:14px; }
details.fold { margin:0 0 14px; font-family:var(--ui); }
details.fold summary { cursor:pointer; color:var(--accent); font-size:15px; }
details.fold form { margin-top:10px; }
details.fold.card { margin-top:10px; }
details.report { margin:18px auto 6px; width:calc(100% - 32px); max-width:calc(var(--measure) - 32px); padding:6px 12px; border:1px dashed var(--line); color:var(--dim); font:13px/1.5 var(--ui); }
details.report summary { cursor:pointer; }
details.report textarea { margin:8px 0; }
details.report small { display:block; margin-top:6px; }
form.reply textarea { margin:6px 0; padding:6px; }
.settings .setting { display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); color:var(--ink); font-family:var(--ui); font-size:15px; }
.settings .setting .k { font-family:ui-monospace, monospace; font-size:14px; }
.settings .setting .d { grid-column:1 / -1; color:var(--dim); font-size:13px; }
.settings input[type=number], .settings input:not([type]) { width:120px; padding:6px 8px; display:inline-block; margin:0; }

/* ---- lists, boards, tables ---- */
.board { list-style:none; padding:0; margin:12px 0; border-top:1px solid var(--line); }
.board li { padding:7px 0; border-bottom:1px solid var(--line); color:var(--dim); font-size:14px; }
/* ---- chat rooms: the square, a clan's fire, the staff room ---- */
.room { display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:6px; margin:12px 0; overflow:hidden; }
.room .pane { display:flex; flex-direction:column; gap:3px; padding:10px 12px; height:min(58vh, 460px); overflow-y:auto; overscroll-behavior:contain; }
.room.fit .pane { height:auto; flex:1; min-height:0; }
.room .pane .empty { margin:auto; color:var(--dim); font:14px/1.5 var(--ui); text-align:center; }
.room .msg { display:flex; }
.room .msg.mine { justify-content:flex-end; }
.room .msg .b { position:relative; max-width:min(84%, 640px); padding:4px 9px 5px; border-radius:10px 10px 10px 3px; background:var(--panel-2); border:1px solid var(--line); color:var(--ink); font-size:14px; line-height:1.38; overflow-wrap:anywhere; }
.room .msg.mine .b { border-radius:10px 10px 3px 10px; background:rgba(201,162,77,.13); border-color:rgba(201,162,77,.35); }
.room .msg.cont .b { border-radius:10px; }
.room .msg .b.del { padding-right:24px; }
.room .msg.ghost .b { font-style:italic; opacity:.75; }
.room .msg .meta { display:flex; flex-wrap:wrap; align-items:baseline; gap:1px 6px; font:11px/1.35 var(--ui); color:var(--dim); }
.room .msg .meta .who { color:var(--ink); font-weight:600; text-decoration:none; }
.room .msg .meta a.who:hover { color:var(--accent); }
.room .msg .meta time { color:var(--dim); }
.room .msg form.inline { position:absolute; top:1px; right:5px; margin:0; }
.room .msg form.inline button { width:auto; background:none; border:0; padding:0 2px; color:var(--dim); font:15px/1 var(--ui); cursor:pointer; }
.room .msg form.inline button:hover { color:var(--bad); }
.room .say { display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line); }
.room .say input { flex:1; min-width:0; margin:0; padding:10px 14px; border-radius:20px; background:var(--bg); border:1px solid var(--line); color:var(--ink); font:15px/1.3 var(--ui); }
.room .say input:focus { outline:none; border-color:var(--accent-soft); }
.room .say button { width:auto; padding:10px 18px; border-radius:20px; background:#121a16; border:1px solid var(--line); color:var(--accent); font:500 15px/1.3 var(--ui); cursor:pointer; }
.room .say button:hover { background:var(--panel-2); border-color:var(--accent-soft); }
.room .error { margin:0; padding:8px 12px 0; }
.badge { color:var(--dim); font-size:12px; font-family:var(--ui); }
.badge .sex.m { color:#8ec5ec; }          /* light blue for a man, light pink for a woman: the app's husband's and wife's gift colours */
.badge .sex.f { color:#e8a0c0; }
.badge .tester { color:#7fc8a9; }         /* a tester's flask: the bench made this hero, not the wood */
.mail li.unread strong { color:var(--accent); }
.petition.closed { opacity:.65; }
.tabs { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 14px; }
.tabs.mailboxes { margin-top:6px; } .tabs.mailboxes .tab small b { color:var(--ok); }
.burn-all { display:flex; gap:8px; margin:4px 0 0; } .burn-all button { width:auto; padding:6px 12px; font:13px/1.4 var(--ui); } .burn-all button.danger { border-left-color:var(--bad); color:var(--bad); }
ul.board.mail li.dim { color:var(--dim); font-style:italic; }
.tabs .tab { padding:6px 12px; border:1px solid var(--line); border-radius:4px; color:var(--dim); text-decoration:none; font:14px/1.4 var(--ui); }
.tabs .tab.on { color:var(--accent); border-color:var(--accent-soft); background:rgba(201,162,77,.08); } .tabs .tab small { color:var(--accent); margin-left:4px; }
.tabs form.clear { margin-left:auto; } .tabs form.clear button, .petition .acts button.danger { width:auto; padding:6px 12px; font:13px/1.4 var(--ui); border-left-color:var(--bad); color:var(--bad); }
.card.petition { margin:0 0 12px; padding:14px 16px; border-left:3px solid var(--line); }
.card.petition.open { border-left-color:var(--warn); } .card.petition.report { border-left-color:var(--bad); }
.card.petition header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; align-items:baseline; margin-bottom:8px; }
.card.petition header .who small { color:var(--dim); margin-left:6px; } .card.petition .chips .chip { margin-left:4px; }
.card.petition .words { font-size:16px; line-height:1.55; margin:0 0 8px; white-space:pre-wrap; }
.card.petition .where { margin:0 0 8px; color:var(--dim); } .card.petition .where code { font-size:12px; }
.card.petition form.reply { display:flex; gap:8px; align-items:stretch; margin:8px 0; } .card.petition form.reply textarea { flex:1; margin:0; } .card.petition form.reply button { width:auto; padding:8px 14px; }
.card.petition .acts { display:flex; gap:8px; align-items:center; margin-top:6px; } .card.petition .acts button { width:auto; padding:6px 12px; font:13px/1.4 var(--ui); }
.chip.warn { border-color:var(--warn); color:var(--warn); } .chip.alert { border-color:var(--bad); color:var(--bad); }
p.note.alert.desk a { margin-left:6px; }
ol.hof { margin:0 0 12px; padding-left:28px; color:var(--dim); } ol.hof li { padding:3px 0; } ol.hof li:first-child { color:var(--accent); }
table.admin, table.stock { width:100%; border-collapse:collapse; font:14px/1.45 var(--ui); margin:12px 0; }
table.admin th, table.admin td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
table.admin th { color:var(--dim); font-weight:normal; }
table.admin .acts { display:flex; flex-wrap:wrap; gap:4px; }
table.admin .acts form.sail select { font:inherit; font-size:13px; background:var(--panel); color:var(--ink); border:1px solid var(--line); padding:3px 6px; max-width:150px; }
table.users td { vertical-align:top; }
@media (max-width:640px) { table.admin thead { display:none; } table.admin tr { display:block; border-bottom:2px solid var(--line); padding:6px 0; } table.admin td { display:inline-block; border:0; padding:3px 8px; } }
table.stock { margin:8px 0 12px; }
table.stock th { text-align:left; color:var(--accent); font:normal 16px/1.3 var(--serif); padding:8px 6px 4px; }
table.stock td { padding:5px 6px; border-bottom:1px solid var(--line); color:var(--dim); }
table.stock td:first-child { color:var(--ink); font-family:var(--serif); font-size:15px; } table.stock td:last-child { text-align:right; color:var(--accent); }
table.stock tr.have td { color:var(--ok); } table.stock tr.worse td { opacity:.45; }
table.stock td small { color:var(--dim); font-size:12px; }
table.stock tr.locked td { color:var(--dim); font-style:italic; }
.guide h2 { margin-top:22px; } .guide ul { padding-left:20px; } .guide li { margin:4px 0; }

/* ---- fights ---- */
.rounds { list-style:none; padding:0; margin:10px 0 14px; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.rounds li { padding:6px 12px 8px; }
.rounds li:nth-child(odd) { background:var(--panel); }
.rounds li:nth-child(even) { background:#121a16; }
.rounds .rn { display:block; margin-bottom:2px; color:var(--dim); font:12px/1.4 var(--ui); text-transform:uppercase; letter-spacing:.08em; }
.rounds div { font-size:15px; }
.foe-name { color:var(--ink); font-weight:bold; }
.w { color:var(--accent); font-style:italic; }
.dmg-you { color:var(--ok); font-weight:bold; }
.dmg-foe { color:var(--bad); font-weight:bold; }
.block { color:#6fb3e0; font-weight:bold; }
.gold { color:var(--accent); font-weight:bold; }

/* ---- names ---- */
.pname.ember { color:#e0805a; } .pname.moss { color:#7bc47f; } .pname.river { color:#7aa7d8; } .pname.dusk { color:#b58ad6; }
.pname.amber { color:#d9a441; } .pname.rose { color:#e08aa5; } .pname.ash { color:#a9a9a2; } .pname.sea { color:#5fb8aa; }
.pname.frost { color:#bcd8ee; } .pname.blossom { color:#f39bb6; } .pname.sunlit { color:#ffe066; } .pname.rust { color:#e8b23a; }
/* many-coloured names: the seasons' own and the special shelf; the plain colour above is the fallback where gradients fail */
.pname.frost, .pname.blossom, .pname.sunlit, .pname.rust, .pname.dawn, .pname.dragonfire, .pname.twilight, .pname.deepriver {
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pname.frost { background-image:linear-gradient(90deg, #ffffff, #bcd8ee 55%, #8ab8e0); }
.pname.blossom { background-image:linear-gradient(90deg, #f39bb6, #fbe3ec 55%, #9fd49a); }
.pname.sunlit { background-image:linear-gradient(90deg, #fff6c8, #ffe066 50%, #fffdf0); }        /* bright noon, nothing like amber */
.pname.rust { background-image:linear-gradient(90deg, #9cc95a, #e8b23a 50%, #c8402e); }         /* a leaf turning: green, gold, red; nothing like ember or dragonfire */
.pname.dawn { color:#a98cff; background-image:linear-gradient(90deg, #5b8dff, #ff7eb6 55%, #ffd9e8); }   /* night sky to first pink; nothing like amber */
.pname.dragonfire { color:#ff8a1f; background-image:linear-gradient(90deg, #ffe14d, #ff8a1f 45%, #ff3b2f); }
.pname.twilight { color:#8a7bff; background-image:linear-gradient(90deg, #d26bff, #5a5cff 50%, #e6ecff); }
.pname.deepriver { color:#2f9bff; background-image:linear-gradient(90deg, #20e3c2, #2f7bff 55%, #c9f2ff); }
.card.adorn .tiles button.tile.special { border-color:var(--accent-soft); }
/* the supporter's mark: one glyph, warmer with every season of patronage */
.card.adorn .adorn-collection { color:var(--accent); margin:2px 0 4px; }
.card.adorn .owned-texts { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; }
.card.adorn .owned-texts form { margin:0; }
.card.adorn .owned-texts button.owned-text { width:auto; margin:0; padding:5px 10px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); color:var(--ink); font:13px var(--serif); }
.card.adorn .owned-texts button.owned-text::before { content:none; }
/* holiday colours: three twisted cords, the rest blends; each its own pair of hues, worn by a name (.pname) or a feast day's banner (.fest) */
.pname.anul_nou, .fest.anul_nou { --fest-ink:#ffd23f; --fest:linear-gradient(90deg, #ff4fd8, #ffd23f 50%, #3fe0ff); }
.pname.boboteaza, .fest.boboteaza { --fest-ink:#7fe0ff; --fest:linear-gradient(90deg, #7fe0ff, #ffffff 55%, #ffd23f); }
.pname.dragobete, .fest.dragobete { --fest-ink:#ff5fa2; --fest:linear-gradient(90deg, #ff5fa2, #e8243c); }
.pname.martisor, .fest.martisor { --fest-ink:#ff3b3b; --cord-a:#ff3b3b; --cord-b:#ffffff; --fest:repeating-linear-gradient(120deg, #ff3b3b 0 5px, #ffffff 5px 9px); }
.pname.st_patrick, .fest.st_patrick { --fest-ink:#2ecc71; --cord-a:#2ecc71; --cord-b:#ffd23f; --fest:repeating-linear-gradient(120deg, #2ecc71 0 5px, #ffd23f 5px 9px); }
.pname.paste, .fest.paste { --fest-ink:#e8243c; --fest:linear-gradient(90deg, #e8243c, #fff3e0); }
.pname.rusalii, .fest.rusalii { --fest-ink:#5fd068; --fest:linear-gradient(90deg, #5fd068, #f4fff0); }
.pname.sanziene, .fest.sanziene { --fest-ink:#ffd23f; --fest:linear-gradient(90deg, #ffd23f, #4a63ff); }
.pname.halloween, .fest.halloween { --fest-ink:#ff8c1a; --fest:linear-gradient(90deg, #ff8c1a, #9b4dff); }
.pname.sfantul_andrei, .fest.sfantul_andrei { --fest-ink:#b8c0ca; --fest:linear-gradient(90deg, #b8c0ca, #ffb000); }
.pname.craciun, .fest.craciun { --fest-ink:#2fbf5a; --cord-a:#2fbf5a; --cord-b:#ff3b3b; --fest:repeating-linear-gradient(120deg, #2fbf5a 0 5px, #ff3b3b 5px 10px); }
.pname.sling { --fest-ink:#4f8dff; --cord-a:#4f8dff; --cord-b:#9fdcff; --fest:repeating-linear-gradient(120deg, #4f8dff 0 5px, #9fdcff 5px 9px); }   /* Matt's sling: two blues, earned, never sold */
.pname.ribbon { --fest-ink:#ff6fb5; --cord-a:#ff6fb5; --cord-b:#b77cff; --fest:repeating-linear-gradient(120deg, #ff6fb5 0 5px, #b77cff 5px 9px); }   /* Maya's ribbon: earned, never sold */
.pname.anul_nou, .pname.boboteaza, .pname.dragobete, .pname.martisor, .pname.st_patrick, .pname.paste, .pname.rusalii, .pname.sanziene, .pname.halloween, .pname.sfantul_andrei, .pname.craciun, .pname.ribbon, .pname.sling {
  color:var(--fest-ink); background-image:var(--fest); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* a cord colour on a name goes letter by letter, its two colours in turn: every letter stays whole at any size */
span.pname.cord, strong.pname.cord { background-image:none; -webkit-text-fill-color:currentColor; color:var(--cord-a); }
.pname.cord > span { -webkit-text-fill-color:currentColor; }
.pname.cord > span:nth-child(odd) { color:var(--cord-a); }
.pname.cord > span:nth-child(even) { color:var(--cord-b); }
/* the banner: the feast's ribbon across the top, its name in its colours, a breath of its hue behind the words */
.story p.note.holiday:has(> .fest) { padding:0; border:0; background:none; }
.fest { display:block; position:relative; overflow:hidden; padding:18px 14px 12px; border:1px solid color-mix(in srgb, var(--fest-ink) 45%, transparent); border-radius:6px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--fest-ink) 16%, transparent), color-mix(in srgb, var(--fest-ink) 3%, transparent) 70%); color:var(--ink); }
.landing > .fest { grid-column:1 / -1; margin:0 0 6px; }
.landing > .note.beta { grid-column:1 / -1; margin:0 0 6px; padding:10px 12px; border:1px solid rgba(224,176,79,.5); border-radius:6px; background:rgba(224,176,79,.10); color:var(--ink); font:14px/1.5 var(--ui); }
.landing > .note.beta strong { color:var(--warn); }      /* across the whole gate, under the picture */
.fest::before { content:""; position:absolute; left:0; right:0; top:0; height:6px; background-image:var(--fest); }
.fest.soon { background:color-mix(in srgb, var(--fest-ink) 6%, transparent); border-style:dashed; }
.fest.soon::before { height:3px; }
.fest .fest-kicker { display:block; margin-bottom:2px; color:var(--dim); font:12px/1.4 var(--ui); letter-spacing:.08em; text-transform:uppercase; }
.fest .fest-name { display:block; width:max-content; max-width:100%; margin-bottom:4px; font:600 1.35em/1.25 var(--serif); letter-spacing:.02em; }
.fest .fest-more { display:block; margin-top:8px; padding-top:8px; border-top:1px solid color-mix(in srgb, var(--fest-ink) 25%, transparent); color:var(--dim); font-size:.95em; }

.card.adorn .tiles .tile.later { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px; min-height:70px; padding:10px 6px; border:1px dashed var(--line); border-radius:8px; opacity:.4; cursor:default; }
.card.adorn .tiles button.tile.holiday { border-color:var(--accent-soft); }
.heart.friend { color:#6f7a73; }          /* a single gift: dark grey, apart from the silver */
.heart.patron { color:#b5683c; }          /* the medal ladder: copper-bronze, silver at three months, gold at six, a crown at twelve */
.heart.loyal { color:#cfd6dd; }
.heart.devoted { color:#e6b84a; }
.heart.crowned { color:#f5c46b; text-shadow:0 0 6px rgba(245,196,107,.65); }
.gift-group { font-size:1.05em; margin:18px 0 8px; }
.gifts { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; margin-bottom:6px; }
.gift { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px; padding:14px 12px; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:6px;
        background:var(--panel); color:var(--ink); text-decoration:none; transition:background .15s, border-color .15s; }
.gift:hover, .gift:focus { background:var(--panel-2); border-color:var(--accent-soft); border-left-color:var(--accent); }
.gift-name { font-family:var(--serif); font-size:1.1em; color:var(--accent); }
.gift-price { font-family:var(--ui); font-size:.85em; color:var(--dim); }
.gift.patron { border-left-color:#b5683c; }          /* the patron's bronze ribbon, never pink */
.gift.patron .gift-heart { color:#b5683c; }
.story p.note.chapter { border:1px solid var(--accent); border-left-width:4px; padding:12px 14px; line-height:1.55; }
.story p.note.chapter strong { font-size:1.15em; color:var(--accent); }
.swatch.season { border-style:dashed; } .swatch.patron { border-color:#b5683c; } .swatch small { opacity:.7; font-size:.75em; }

/* ---- room to breathe on a desk ---- */
@media (min-width:900px) {
  :root { --measure:900px; }
  body { font-size:17px; }
  main { padding:24px 28px 32px; }
  header, footer { padding-left:max(16px, calc((100% - var(--measure)) / 2 + 28px)); padding-right:max(16px, calc((100% - var(--measure)) / 2 + 28px)); }
  h1 { font-size:28px; }
  .stats { font-size:14px; gap:8px; padding:12px; }
  .stats .name { font-size:16px; }
  .choices .doors { grid-template-columns:1fr 1fr 1fr; }
  .choices .btn, .choices button, .card button { padding:13px 16px; font-size:16px; }
  .rounds div { font-size:16px; }
  details.report { max-width:calc(var(--measure) - 56px); }
}
@media (min-width:1400px) {
  :root { --measure:980px; }
}

/* ---- staff pages ---- */
@media (min-width:900px) { main.wide { max-width:1180px; } body.wide header, body.wide footer { padding-left:max(16px, calc((100% - 1180px) / 2 + 28px)); padding-right:max(16px, calc((100% - 1180px) / 2 + 28px)); } }
.admin-cards { display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; margin:0 0 18px; } .admin-cards > * { min-width:0; }
@media (min-width:900px) { .admin-cards { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } .admin-cards .span2 { grid-column:1 / -1; } }
.card.kv h2 { margin:0 0 8px; font-size:16px; }
.card.kv p { margin:0 0 8px; font:14px/1.6 var(--ui); color:var(--ink); }
.chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.chip { display:inline-block; font:12px/1.4 var(--ui); padding:2px 9px; border:1px solid var(--line); border-radius:12px; color:var(--dim); background:var(--bg); }
.chip.on { color:var(--ok); border-color:rgba(123,196,127,.5); }
.chip.warn { color:var(--warn); border-color:rgba(224,176,79,.5); }
.pages { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:8px; }
.pages .btn { display:block; padding:10px 12px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:3px; text-decoration:none; font:14px/1.3 var(--ui); }
.pages .btn:hover { border-color:var(--accent-soft); color:var(--accent); }
.tools { display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.tools > form.inline { align-self:flex-start; }
.tools details.fold { margin:0; }
.tools .inline button { width:auto; display:inline-block; }
table.admin tr.ghost td { color:var(--dim); }
.board.log li .kind { font:12px/1.4 var(--ui); color:var(--accent); text-transform:uppercase; letter-spacing:.05em; margin:0 4px; }
.settings-nav { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; gap:6px; padding:10px 0 12px; margin:0 0 6px; background:var(--bg); border-bottom:1px solid var(--line); }
.settings-nav a { font:13px/1.4 var(--ui); color:var(--dim); text-decoration:none; padding:6px 11px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.settings-nav a:hover { color:var(--ink); border-color:var(--accent-soft); }
.settings-nav a b { color:var(--accent); font-weight:600; margin-left:2px; }
.settings section.card { margin:0 0 14px; scroll-margin-top:70px; padding:14px 16px; }
.settings section.card h2 { margin:0 0 10px; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; }
.settings section.card h2 small { font:13px/1.4 var(--ui); }
.settings .setting { display:grid; grid-template-columns:1fr; gap:6px 16px; align-items:start; padding:10px 0 10px 10px; border-bottom:1px solid var(--line); border-left:3px solid transparent; }
@media (min-width:640px) { .settings .setting { grid-template-columns:1fr 170px; } }
.settings .setting:last-child { border-bottom:0; }
.settings .setting.changed, .settings .feature.changed { border-left-color:var(--accent); }
.settings .t, .feature .t { color:var(--ink); font:500 15px/1.4 var(--ui); }
.settings .k, .feature .k { font:12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--dim); margin-left:6px; }
.settings .d, .feature .d { display:block; color:var(--dim); font:13px/1.5 var(--ui); margin-top:2px; }
.settings .who, .feature .who { color:var(--accent); }
.badge.changed { color:var(--accent); font-weight:600; }
.settings .val input[type=number], .settings .val textarea { width:100%; margin:0; padding:8px 10px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:3px; font:15px/1.4 var(--ui); }
.settings .val textarea { min-height:44px; }
.settings .val input:focus, .settings .val textarea:focus { outline:none; border-color:var(--accent-soft); }
.settings button.reset { display:inline; width:auto; padding:0 2px; margin:0; background:none; border:0; color:var(--dim); text-decoration:underline; text-underline-offset:3px; font:12px/1.4 var(--ui); cursor:pointer; }
.settings button.reset:hover { color:var(--ink); }
.switch input[type=checkbox] { appearance:none; -webkit-appearance:none; width:46px; height:26px; margin:0; background:var(--line); border-radius:13px; position:relative; cursor:pointer; border:0; outline:none; transition:background .15s; vertical-align:middle; }
.switch input[type=checkbox]::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:10px; background:var(--dim); transition:left .15s, background .15s; }
.switch input[type=checkbox]:checked { background:rgba(123,196,127,.55); }
.switch input[type=checkbox]:checked::after { left:23px; background:#eaf5ea; }
.features-grid { display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:900px) { .features-grid { grid-template-columns:1fr 1fr; } }
.card label.feature, .feature { display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:center; padding:10px 12px 10px 10px; border:1px solid var(--line); border-left:3px solid transparent; border-radius:4px; background:var(--bg); cursor:pointer; margin:0; }
.feature .txt { min-width:0; }
.savebar { position:sticky; bottom:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:12px 0; margin-top:8px; background:var(--bg); border-top:1px solid var(--line); }
.savebar button.save { width:auto; display:inline-block; padding:10px 22px; background:var(--accent); color:var(--bg); border:0; border-radius:3px; font:600 15px/1.3 var(--ui); cursor:pointer; }
.savebar button.save:hover { background:#e0b862; }
.savebar a { font:13px/1.4 var(--ui); margin-left:auto; }

/* ---- the keeper's markup and long text settings ---- */
.c-gold { color:var(--accent); } .c-red { color:var(--bad); } .c-green { color:var(--ok); } .c-blue { color:var(--blue); } .c-dim { color:var(--dim); }
.story p.note strong, p.note strong, p.note em { color:inherit; }
.settings .setting.long { grid-template-columns:1fr; }
.settings .setting.long textarea, .settings .setting.long select { width:100%; margin:0; padding:10px 12px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:3px; font:15px/1.5 var(--ui); box-sizing:border-box; }
.settings .setting.long textarea { min-height:120px; resize:vertical; }
.settings .setting.long textarea:focus, .settings .setting.long select:focus { outline:none; border-color:var(--accent-soft); }
.settings .fmt-help { display:block; color:var(--dim); font:12px/1.6 var(--ui); }
.settings .fmt-help code { font:12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--ink); background:var(--bg); padding:1px 5px; border:1px solid var(--line); border-radius:3px; }
.settings .preview { margin-top:6px; }
.settings .preview p.note.motd { margin:4px 0 0; padding:10px 12px; border-radius:4px; border:1px solid var(--accent-soft); background:rgba(201,162,77,.12); font:16px/1.6 var(--serif); color:var(--ink); }

/* ---- native controls in the theme's colours: scrollbars, grips, spinners, selects ---- */
:root { color-scheme:dark; }
html { scrollbar-color:#34463c var(--bg); scrollbar-width:thin; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:#34463c; border-radius:6px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:var(--accent-soft); }
textarea { scrollbar-color:#34463c var(--panel); }
textarea::-webkit-resizer { background:linear-gradient(135deg, transparent 0 45%, var(--dim) 45% 55%, transparent 55% 70%, var(--dim) 70% 80%, transparent 80%); border-radius:0 0 3px 0; }
input[type=number] { appearance:textfield; -moz-appearance:textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239aa59d' stroke-width='1.6'/></svg>"); background-repeat:no-repeat; background-position:right 10px center; padding-right:30px; }
select option { background:var(--panel); color:var(--ink); }
input[type=checkbox]:not(.switch input) { accent-color:var(--accent); }

/* ---- the players table ---- */
table.admin.players { font:13px/1.45 var(--ui); }
table.admin.players th { font-size:11px; text-transform:uppercase; letter-spacing:.08em; padding:8px; white-space:nowrap; }
table.admin.players td { padding:9px 8px; }
table.admin.players tbody tr:nth-child(even) td { background:rgba(255,255,255,.015); }
table.admin.players td a { font:500 15px/1.3 var(--serif); }
table.admin.players td small { color:var(--dim); }
.dot { display:inline-block; width:8px; height:8px; border-radius:4px; margin-right:6px; vertical-align:middle; background:var(--line); }
.dot.on { background:var(--ok); } .dot.off { background:var(--bad); }
table.admin .acts { display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start; }
table.admin .acts form { margin:0; }
table.admin .acts button.good { border-left-color:var(--ok); }
table.admin .acts details.more { display:inline-block; }
table.admin .acts details.more summary { list-style:none; cursor:pointer; padding:4px 8px; font:13px/1.5 var(--ui); color:var(--dim); border:1px dashed var(--line); border-radius:3px; }
table.admin .acts details.more summary::-webkit-details-marker { display:none; }
table.admin .acts details.more[open] summary { color:var(--ink); border-style:solid; }
table.admin .acts .more-acts { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; padding-top:6px; border-top:1px dashed var(--line); width:100%; }
table.admin .acts details.more[open] { width:100%; }
@media (min-width:900px) { body.wide details.report { max-width:calc(1180px - 56px); } }

/* ---- the formatting bar and the picture of the day ---- */
.settings .fmt-bar { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0; }
.settings .fmt-bar button { display:inline-block; width:auto; padding:4px 10px; margin:0; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:3px; font:13px/1.4 var(--ui); cursor:pointer; }
.settings .fmt-bar button:hover { border-color:var(--accent-soft); }
.settings .fmt-bar button.c-gold { color:var(--accent); } .settings .fmt-bar button.c-red { color:var(--bad); } .settings .fmt-bar button.c-green { color:var(--ok); } .settings .fmt-bar button.c-blue { color:var(--blue); } .settings .fmt-bar button.c-dim { color:var(--dim); }
table.admin.users code, .story code { font:13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--ink); }
p.note.motd img.motd-img, .story p.note.motd img.motd-img { display:block; max-width:100%; height:auto; border-radius:3px; margin:0 0 10px; }
.settings .motd-image .motd-image-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.settings .motd-image form.inline { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.settings .motd-image input[type=file] { font:13px/1.4 var(--ui); color:var(--dim); }
.settings .motd-image input[type=file]::file-selector-button { font:13px/1.4 var(--ui); padding:6px 10px; margin-right:8px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:3px; cursor:pointer; }
.settings .motd-image button { display:inline-block; width:auto; padding:6px 12px; margin:0; }
.settings .motd-image button.danger { border-left-color:var(--bad); }

/* ---- the tale versus your state: facts about you now are quiet, sans, ruled ---- */
.story p.note.state { background:none; border:0; border-left:2px solid var(--line); border-radius:0; padding:2px 12px; margin:0 0 12px; color:var(--dim); font:14px/1.6 var(--ui); }
.story p.note.state .gold, .story p.note.state strong { color:var(--accent); }

/* ---- the message of the day's own page, and centred text ---- */
.c-center { display:block; text-align:center; }
.motd-page .setting.long { border:0; padding:0; }
.motd-page .motd-actions { display:flex; gap:12px; align-items:center; margin-top:10px; }
.motd-page .motd-actions button.save { width:auto; display:inline-block; padding:10px 22px; background:var(--accent); color:var(--bg); border:0; border-radius:3px; font:600 15px/1.3 var(--ui); cursor:pointer; }
.motd-page .motd-actions button.clear { width:auto; display:inline-block; padding:9px 14px; background:none; color:var(--dim); border:1px dashed var(--line); border-radius:3px; font:14px/1.3 var(--ui); cursor:pointer; }
.motd-page .motd-actions button.clear:hover { color:var(--bad); border-color:var(--bad); }
.motd-page .motd-preview p.note.motd { margin:0; padding:12px 14px; border-radius:4px; border:1px solid var(--accent-soft); background:rgba(201,162,77,.12); font:16px/1.6 var(--serif); color:var(--ink); }
.card.motd-image .motd-image-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.card.motd-image form.inline { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.card.motd-image input[type=file] { display:inline-block; width:auto; margin:0; padding:6px 8px; font:13px/1.4 var(--ui); color:var(--dim); background:var(--bg); border:1px solid var(--line); border-radius:3px; }
.card.motd-image input[type=file]::file-selector-button { font:13px/1.4 var(--ui); padding:6px 10px; margin-right:8px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:3px; cursor:pointer; }
.card.motd-image button { display:inline-block; width:auto; padding:8px 14px; margin:0; }
.card.motd-image button.danger { border-left-color:var(--bad); }

/* ---- finding a player ---- */
form.search { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin:0 0 12px; }
form.search input[type=search] { flex:1; min-width:220px; padding:9px 12px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:3px; font:15px/1.4 var(--ui); }
form.search input[type=search]:focus { outline:none; border-color:var(--accent-soft); }
form.search button { display:inline-block; width:auto; padding:9px 16px; background:var(--panel); color:var(--accent); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:3px; font:500 14px/1.3 var(--ui); cursor:pointer; }
form.search a { font:13px/1.4 var(--ui); }
form.search small { margin-left:auto; font:13px/1.4 var(--ui); }

/* ---- numbers in state lines, and speech ---- */
.story p.note.state b.n { color:var(--accent); font-weight:600; }
.story em.says, .story p em.says { color:#cfc4a8; font-style:italic; }

/* ---- the smith's stock and the camp's roster ---- */
table.stock th { padding-top:14px; }
table.stock td .item { color:var(--ink); font:15px/1.4 var(--serif); }
table.stock td small { display:block; color:var(--dim); font:13px/1.45 var(--ui); margin-top:2px; }
table.stock td.price, table.stock td.val, table.stock td.cost { font:600 14px/1.5 var(--ui); white-space:nowrap; vertical-align:top; }
table.stock td.price .gold, table.stock td.cost .gold { color:var(--accent); font-weight:600; }
table.stock .gem { color:#7fd3e6; font-weight:600; }
table.stock .sep { color:var(--dim); font-weight:400; }
table.stock td.val { color:var(--ok); text-align:center; }
table.stock tr.worse td.val { color:var(--dim); font-weight:400; }
table.stock tr.worse td .item { color:var(--dim); }
table.stock tr.have td .item { color:var(--ok); }
table.stock tr.have td .item::before { content:"\2713\00a0"; color:var(--ok); }
table.stock tr.have td.val { color:var(--ok); }
table.stock td.cost .locked { color:var(--warn); font-weight:400; font-style:italic; font-size:13px; }
table.stock.roster tr.have td { color:var(--ink); }
table.stock.roster tr.have td .item::before { content:"\2713\00a0"; color:var(--ok); }
table.stock tr.worse td { opacity:1; }

/* ---- the bank ---- */
.ledger { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:0 0 16px; }
.ledger .fig { background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:10px 12px; }
.ledger .fig small { display:block; color:var(--dim); font:12px/1.4 var(--ui); text-transform:uppercase; letter-spacing:.06em; }
.ledger .fig b { display:block; margin-top:2px; color:var(--accent); font:600 24px/1.2 var(--ui); }
.ledger .fig.dim b { color:var(--ink); font-weight:500; }
.ledger .fig.bad b { color:var(--bad); }
.forms.bank .card .row { display:flex; gap:8px; align-items:stretch; }
.forms.bank .card .row button { flex:1; width:auto; }
.forms.bank .card .row button.quick { flex:0 0 auto; padding:12px 14px; color:var(--dim); border-left-color:var(--line); }
.forms.bank .card .row button.quick:hover { color:var(--accent); }
.forms.bank .card .row.fields label { flex:1; }
.forms.bank .card .hint-line { margin:0 0 10px; color:var(--dim); font:13px/1.5 var(--ui); }
@media (min-width:640px) { .forms.bank .card.span2 { grid-column:1 / -1; } }
@media (max-width:480px) { .ledger { grid-template-columns:1fr 1fr; } .ledger .fig.dim { grid-column:1 / -1; } }

/* ---- the banned words ---- */
ul.board.words { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:0 18px; border:0; }
ul.board.words li { display:flex; gap:8px; align-items:center; }
ul.board.words li code { font:14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--ink); }
ul.board.words li small { color:var(--dim); flex:1; }

/* ---- the player's settings and the guide ---- */
form.prefs .card label { margin-bottom:12px; }
form.prefs .card.kv h2 { margin-bottom:12px; }
form.prefs .card label.feature { margin:0 0 8px; padding:10px 12px; }
form.prefs .card label.feature .t { font:500 15px/1.4 var(--ui); color:var(--ink); }
form.prefs .card label.feature .d { display:block; color:var(--dim); font:13px/1.5 var(--ui); margin-top:2px; }
form.prefs .savebar { margin-top:4px; }
.card.adorn h2 { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; }
.card.adorn h2 small { font:13px/1.4 var(--ui); }
.card.adorn p.lead { margin:10px 0 6px; color:var(--dim); font:14px/1.5 var(--ui); }
.card.adorn form.flourish { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; margin-top:8px; }
.card.adorn form.flourish label { margin:0; }
.card.adorn form.flourish button { width:auto; padding:10px 16px; }
.card.adorn form.flourish.gift { grid-template-columns:1fr 6.5em auto; }
.guide-nav { margin-bottom:14px; }
.guide h2 { scroll-margin-top:70px; margin-top:28px; padding-top:14px; border-top:1px solid var(--line); font-size:20px; }
.guide h2:first-of-type { border-top:0; margin-top:6px; padding-top:0; }
.guide p b.n, .guide li b.n { color:var(--accent); font-weight:600; }
.guide ul { padding-left:20px; } .guide li { margin:6px 0; }
.guide li strong { color:var(--ink); }

/* ---- the keeper's text editor ---- */
.card.string { margin:0 0 12px; }
.card.string h2 { margin:0 0 10px; }
.card.string h2 code { font:14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--accent); background:var(--bg); padding:2px 8px; border:1px solid var(--line); border-radius:3px; }
.string-form { padding:8px 0 10px 10px; border-left:3px solid transparent; border-bottom:1px solid var(--line); }
.string-form:last-of-type { border-bottom:0; }
.string-form.changed { border-left-color:var(--accent); }
.string-form label { margin:0 0 6px; }
.string-form .loc { display:block; color:var(--ink); font:600 13px/1.4 var(--ui); margin-bottom:4px; }
.string-form .loc small { color:var(--dim); font-weight:400; }
.string-form textarea { width:100%; margin:0; padding:8px 10px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:3px; font:15px/1.5 var(--serif); resize:vertical; }
.string-form .d { display:block; color:var(--dim); font:13px/1.5 var(--ui); margin:4px 0 0; }
.string-form .d em { color:var(--dim); }
.string-form .row { display:flex; gap:8px; margin-top:6px; }
.string-form .row button { display:inline-block; width:auto; padding:6px 14px; font:500 14px/1.3 var(--ui); }
.string-form .row button.quick { color:var(--dim); border-left-color:var(--line); }

/* ---- buying at the smith, from the row ---- */
table.stock td.cost form.buy { display:inline; margin:0; }
table.stock td.cost form.buy button { display:inline-block; width:auto; padding:5px 12px; margin:0; background:#121a16; color:var(--accent); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:3px; font:600 13px/1.3 var(--ui); cursor:pointer; white-space:nowrap; }
table.stock td.cost form.buy button:hover { background:var(--panel-2); border-color:var(--accent-soft); }
table.stock td.cost .gold.dim { color:var(--dim); font-weight:400; }
table.stock tr.outgrown td { padding:6px; border-bottom:0; }
table.stock tr.outgrown details summary { cursor:pointer; color:var(--dim); font:13px/1.5 var(--ui); list-style:none; }
table.stock tr.outgrown details summary::-webkit-details-marker { display:none; }
table.stock tr.outgrown details summary::before { content:"\25B8\00a0"; }
table.stock tr.outgrown details[open] summary::before { content:"\25BE\00a0"; }
table.stock tr.outgrown ul { margin:6px 0 0; padding:0 0 0 16px; columns:2; }
table.stock tr.outgrown li { color:var(--dim); font:13px/1.6 var(--ui); }
table.stock tr.outgrown li .val { color:var(--dim); font-weight:400; }

table.stock td.price form.buy { display:inline-block; margin:0 0 0 8px; vertical-align:middle; }
table.stock td.price form.buy button { display:inline-block; width:auto; padding:5px 12px; margin:0; background:#121a16; color:var(--accent); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:3px; font:600 13px/1.3 var(--ui); cursor:pointer; white-space:nowrap; }
table.stock td.price form.buy button:hover { background:var(--panel-2); border-color:var(--accent-soft); }
table.stock td.price { white-space:normal; }

/* ---- one width for the row buttons; buying is green, selling red ---- */
table.stock td.cost form.buy button, table.stock td.price form.buy button { min-width:132px; text-align:center; color:var(--ok); border-left-color:var(--ok); }
table.stock td.cost form.buy button:hover, table.stock td.price form.buy button:hover { border-color:rgba(123,196,127,.6); border-left-color:var(--ok); }
table.stock td.price form.buy.sell button { color:var(--bad); border-left-color:var(--bad); }
table.stock td.price form.buy.sell button:hover { border-color:rgba(224,90,79,.6); border-left-color:var(--bad); }

/* ---- the stats bar: small tiles at every width ---- */
.stats .st { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:0; padding:6px 8px; background:var(--bg); border:1px solid var(--line); border-radius:4px; min-width:0; overflow:hidden; color:var(--dim); }
.stats .st small { font:10px/1.3 var(--ui); text-transform:uppercase; letter-spacing:.06em; color:var(--dim); margin:0; }
.stats .st b { font:600 15px/1.3 var(--ui); color:var(--ink); white-space:normal; overflow-wrap:anywhere; }
.stats .st b em { font-style:normal; color:var(--accent); font-size:11px; margin-left:2px; white-space:normal; }
.stats .st.who b { font-size:13px; line-height:1.25; overflow-wrap:normal; padding-top:2px; }
.stats .st.life-ok b { color:var(--ok); } .stats .st.life-warn b { color:var(--warn); } .stats .st.life-bad b { color:var(--bad); }
.stats .st.gem b { color:#7fd3e6; }
.stats .st.path b em, .stats .st.who b em { display:block; margin-left:0; line-height:1.2; margin-top:1px; }
.stats .fold-toggle, .stats .fold { display:none; }
.stats .more { display:contents; }
.stats .st.line { grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; text-align:left; gap:4px 12px; background:none; border:0; padding:2px 0 0; overflow:visible; }
.stats .st.line .who-tag { margin:0; font:13px/1.5 var(--ui); color:var(--dim); }
@media (max-width:640px) {
  .stats { grid-template-columns:repeat(3, 1fr); }
  .stats .st b { font-size:16px; }
  .stats .fold { display:flex; grid-column:1 / -1; align-items:center; gap:8px; padding:6px 10px; background:var(--bg); border:1px solid var(--line); border-radius:4px; font:12px/1.4 var(--ui); color:var(--dim); cursor:pointer; min-width:0; }
  .stats .fold .sum { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .stats .fold .sum b { color:var(--ink); font-weight:600; }
  .stats .fold .less { display:none; flex:1; }
  .stats .fold .chev { width:7px; height:7px; border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(45deg); margin:-3px 4px 0 0; flex:none; }
  .stats .fold-toggle:not(:checked) ~ .more { display:none; }
  .stats .fold-toggle:checked ~ .fold .sum { display:none; }
  .stats .fold-toggle:checked ~ .fold .less { display:block; }
  .stats .fold-toggle:checked ~ .fold .chev { transform:rotate(-135deg); margin:3px 4px 0 0; }
}

/* ---- the life bar under the life value ---- */
.stats .st.life { align-items:stretch; }
.stats .st.life .lv b, .stats .st.life > small { text-align:center; }
.stats .st.life .lv { display:contents; }
.stats .st.life .bar { display:block; height:4px; margin-top:5px; background:var(--line); border-radius:2px; overflow:hidden; }
.stats .st.life .bar i { display:block; height:100%; border-radius:2px; background:currentColor; transition:width .3s; }
.stats .st.favor b, .stats .st.favor b em { color:#b58ad6; }
.stats .st.soul { color:#b58ad6; } .stats .st.soul .lv b { color:#b58ad6; }
.stats .st.life.life-ok { color:var(--ok); } .stats .st.life.life-warn { color:var(--warn); } .stats .st.life.life-bad { color:var(--bad); }
.stats .st.life > small { color:var(--dim); }
.stats .bar i.w0 { width:0%; }
.stats .bar i.w5 { width:5%; }
.stats .bar i.w10 { width:10%; }
.stats .bar i.w15 { width:15%; }
.stats .bar i.w20 { width:20%; }
.stats .bar i.w25 { width:25%; }
.stats .bar i.w30 { width:30%; }
.stats .bar i.w35 { width:35%; }
.stats .bar i.w40 { width:40%; }
.stats .bar i.w45 { width:45%; }
.stats .bar i.w50 { width:50%; }
.stats .bar i.w55 { width:55%; }
.stats .bar i.w60 { width:60%; }
.stats .bar i.w65 { width:65%; }
.stats .bar i.w70 { width:70%; }
.stats .bar i.w75 { width:75%; }
.stats .bar i.w80 { width:80%; }
.stats .bar i.w85 { width:85%; }
.stats .bar i.w90 { width:90%; }
.stats .bar i.w95 { width:95%; }
.stats .bar i.w100 { width:100%; }

/* ---- one-line forms in cards: a field and its button side by side ---- */
.card form.row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; margin-top:8px; }
.card form.row label { margin:0; }
.card form.row button { width:auto; padding:10px 16px; }
.card.mailbox .swatches { margin-top:10px; }

/* ---- the keeper's view of an account: the birth record ---- */
.born details.raw { display:inline-block; margin-left:6px; }
.born details.raw summary { cursor:pointer; color:var(--dim); display:inline; }
.born details.raw code { display:block; margin-top:4px; white-space:normal; word-break:break-all; color:var(--dim); }

/* ---- the desk's mailbox ---- */
table.mailbox tr.unseen td { color:var(--ink); font-weight:600; }
.card.letter pre.letter-text { white-space:pre-wrap; word-break:break-word; font:15px/1.5 var(--serif); color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:12px 14px; margin:10px 0; }

.card.order form.ban { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:end; margin:10px 0 4px; }
.card.order form.ban label { margin:0; }
.card.order form.ban button { width:auto; padding:10px 16px; }
@media (max-width:640px) { .card.order form.ban { grid-template-columns:1fr; } }

/* ---- the keeper's hand on a hero's numbers ---- */
.card.adjust .numbers { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px 12px; }
.card.adjust .numbers label { margin:0; font-size:12px; }
.card.adjust .numbers input { width:100%; }
.card.adjust .row-reason { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; margin-top:12px; }
.card.adjust .row-reason label { margin:0; }
.card.adjust .row-reason button { width:auto; padding:10px 16px; }
.card.adjust details.fold { margin-top:10px; }

/* ---- a language file from the keeper's hand ---- */
.card.upload form.row3 { display:grid; grid-template-columns:120px 1fr auto; gap:10px; align-items:end; margin-top:8px; }
.card.upload form.row3 label { margin:0; }
.card.upload form.row3 button { width:auto; padding:10px 16px; }
@media (max-width:640px) { .card.upload form.row3 { grid-template-columns:1fr; } }

.card.letter .letter-acts { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.card.letter .letter-acts form.inline button { width:auto; }

/* ---- the tick under a hint ---- */
.hint form.hide { margin:6px 0 0; }
.hint form.hide label { display:inline-flex; align-items:center; gap:6px; margin:0; font:12px/1.4 var(--ui); color:var(--dim); cursor:pointer; }
.hint form.hide input[type=checkbox] { width:14px; height:14px; margin:0; accent-color:var(--accent); }

/* ---- what now: the newcomer's next step ---- */
.now { background:none; border:0; border-left:2px solid var(--accent-soft, rgba(201,162,77,.5)); padding:4px 12px; margin:0 0 14px; color:var(--dim); font:13px/1.5 var(--ui); }
.now strong { color:var(--accent); margin-right:4px; }
.story > p:not(.note) { font-size:17px; line-height:1.7; }
.now a.go { color:var(--accent); font-weight:600; white-space:nowrap; margin-left:6px; }

/* ---- the keeper's woods ---- */
table.woods tr.unsound td { background:rgba(224,90,79,.06); }
table.woods ul.problems { margin:6px 0 0; padding-left:16px; }
table.woods td code { margin-left:6px; color:var(--dim); }

.now form.hide { margin:6px 0 0; }
.now form.hide label { display:inline-flex; align-items:center; gap:6px; margin:0; font:12px/1.4 var(--ui); color:var(--dim); cursor:pointer; }
.now form.hide input[type=checkbox] { width:14px; height:14px; margin:0; accent-color:var(--accent); }

/* ---- the beta notes for testers, and the report line in red ---- */
details.report > summary { color:var(--bad); font-weight:600; }
dialog.splash { background:var(--panel); color:var(--ink); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:6px; padding:22px 24px; max-width:560px; width:calc(100% - 32px); font:15px/1.55 var(--serif); }
dialog.splash::backdrop { background:rgba(0,0,0,.6); }
dialog.splash h2 { margin:0 0 10px; color:var(--accent); font:22px/1.3 var(--serif); }
dialog.splash p { margin:0 0 10px; }
dialog.splash strong { color:var(--accent); }
dialog.splash form { margin-top:14px; text-align:right; }
dialog.splash button.save { width:auto; padding:10px 18px; }

.eggs-add small.help { display:block; color:var(--dim); font-size:13px; line-height:1.4; margin-top:4px; font-weight:normal; letter-spacing:0; text-transform:none; }
.eggs-add .how p { color:var(--dim); font-size:14px; line-height:1.5; } .eggs-add h3 { margin:14px 0 6px; font-size:15px; color:var(--accent); }
.eggs-add [hidden] { display:none !important; }

/* date and time pickers: iOS gives them a fixed intrinsic width that overflows a phone column, and draws them empty and short */
input[type=datetime-local], input[type=date], input[type=time] { -webkit-appearance:none; appearance:none; display:block; width:100%; min-width:0; max-width:100%; min-height:44px; box-sizing:border-box; text-align:left; }
input[type=datetime-local]::-webkit-date-and-time-value, input[type=date]::-webkit-date-and-time-value { text-align:left; }
/* the keeper's schedule: one field per line on a phone, two on a wider screen, the button under them */
form.sched { display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; margin-top:8px; align-items:end; }
form.sched label { margin:0; min-width:0; }
form.sched button { width:auto; justify-self:start; padding:10px 18px; }
@media (min-width:640px) { form.sched { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } form.sched button { grid-column:1 / -1; } }
/* a player's hero actions: buttons wrap in a row; the wood picker and its button stay side by side */
.acts-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.acts-row form.inline { margin:0; }
.acts-row form.sail { display:flex; gap:8px; align-items:center; flex:1 1 220px; }
.acts-row form.sail select { flex:1; min-width:0; width:auto; margin:0; padding-top:5px; padding-bottom:5px; font-size:14px; }
.acts-row form.sail button { flex:0 0 auto; width:auto; }

/* plain yes/no boxes in the keeper's forms (the big card style belongs to choosing a kin) */
label.check { display:flex; align-items:center; gap:10px; margin:6px 0 10px; font:500 15px/1.4 var(--ui); color:var(--ink); cursor:pointer; }
label.check input[type=checkbox] { width:18px; height:18px; margin:0; flex:0 0 auto; }
/* a picker beside the search box matches it */
form.search select { width:auto; margin:0; padding:9px 30px 9px 12px; background-color:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:3px; font:15px/1.4 var(--ui); }
/* a card's first small button sits on the card's edge, not indented */
.card.kv p > .inline-link:first-child { margin-left:0; }
/* file pickers wear the site's buttons */
input[type=file] { color:var(--dim); font:14px/1.4 var(--ui); max-width:100%; }
input[type=file]::file-selector-button { margin-right:10px; padding:7px 12px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:3px; font:14px/1.3 var(--ui); cursor:pointer; }
.acts-row button { width:auto; padding:6px 12px; font:400 14px/1.4 var(--ui); }
.acts-row form.sail { max-width:380px; }

/* the realm's map: a picture that fills the column and opens full size */
img.realm-map { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:4px; }
a.realm-map { display:block; }
figure.realm-map { margin:12px 0 18px; } figure.realm-map figcaption { font:13px/1.4 var(--ui); color:var(--dim); margin-top:6px; }

details.lore-sec { margin:10px 0; } details.lore-sec > summary { font:18px/1.4 var(--serif); color:var(--accent); cursor:pointer; padding:6px 0; }

/* the river's milestones: gold on the inn's board */
.news-major { color:var(--accent); }

/* the players list on a phone: one card per account (account and Open on top, the hero, then when seen and from where) */
table.admin.users .lvl-inline, table.admin.users .seen-label { display:none; }
table.admin.users .addr, .addr code { overflow-wrap:anywhere; }
@media (max-width:640px) {
  table.admin.users tr { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"acct open" "hero hero" "seen seen" "ip ip"; gap:4px 12px; padding:12px 2px; border-bottom:1px solid var(--line); }
  table.admin.users td { display:block; padding:0; border:0; min-width:0; }
  table.admin.users td.acct { grid-area:acct; } table.admin.users td.open { grid-area:open; align-self:start; }
  table.admin.users td.open .inline-link { margin-left:0; }
  table.admin.users td.hero { grid-area:hero; } table.admin.users td.hero br { display:none; } table.admin.users td.hero small::before { content:" · "; }
  table.admin.users td.lvl { display:none; } table.admin.users .lvl-inline { display:inline; }
  table.admin.users td.seen { grid-area:seen; color:var(--dim); } table.admin.users td.seen br { display:none; } table.admin.users .seen-label { display:inline; }
  table.admin.users td.seen .chip { margin-right:6px; }
  table.admin.users td.ip { grid-area:ip; } table.admin.users td.ip br { display:none; } table.admin.users td.ip code { font-size:12px; margin-right:6px; }
  table.admin.users td.ip small { font-size:12px; }
}

/* a player's page: the head at a glance, the hero open, the rest folded under titles you tap */
.profile-head .who-line { font:20px/1.3 var(--serif); margin:0 0 8px; }
.profile-head .chips { margin:0 0 8px; }
.profile-head .addr { margin:0 0 6px; color:var(--dim); }
.profile-head details.born summary { cursor:pointer; color:var(--dim); font:13px/1.4 var(--ui); }
.profile-head details.born p { margin:6px 0 0; font:13px/1.5 var(--ui); color:var(--dim); }
h1 .chip.role { vertical-align:middle; font-size:12px; }
details.card.sec { margin:0 0 14px; }
details.card.sec > summary { cursor:pointer; list-style:none; font:17px/1.3 var(--serif); color:var(--accent); }
details.card.sec > summary::-webkit-details-marker { display:none; }
details.card.sec > summary::after { content:"\25BE"; float:right; color:var(--dim); transition:transform .15s; }
details.card.sec:not([open]) > summary::after { transform:rotate(-90deg); }
details.card.sec[open] > summary { margin-bottom:12px; }
details.card.sec form.user { margin:0; }
.card.kv.profile-head p.who-line { font:20px/1.3 var(--serif); }
.card.kv.profile-head, .card.kv.hero-acts { margin-bottom:14px; }

/* the logs: a day heading, then each event as a sentence with its time, a tag, and the raw data on a tap */
h3.log-day { margin:16px 0 6px; font:15px/1.3 var(--serif); color:var(--accent); }
ul.board.log li { font:14px/1.5 var(--ui); }
.log-t { color:var(--dim); font:12px/1 var(--ui); margin-right:4px; }
.log-tag { display:inline-block; font:11px/1.6 var(--ui); padding:0 7px; border-radius:9px; border:1px solid var(--line); color:var(--dim); margin-right:4px; }
.log-tag.major { color:var(--accent); border-color:var(--accent-soft); }
.log-tag.bad { color:var(--bad); border-color:rgba(224,90,79,.5); }
.log-tag.keeper { color:var(--blue); border-color:rgba(120,160,220,.5); }
ul.board.log details.raw { display:inline; margin-left:6px; }
ul.board.log details.raw summary { display:inline; cursor:pointer; color:var(--dim); font:11px/1 var(--ui); list-style:none; }
ul.board.log details.raw summary::-webkit-details-marker { display:none; }
ul.board.log details.raw[open] code { display:block; margin-top:4px; font-size:11px; color:var(--dim); overflow-wrap:anywhere; }

/* adornments: a preview, then fold-out groups of even tiles; one column of forms on a phone */
.card.adorn .adorn-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; margin:6px 0 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel-2); }
.card.adorn .adorn-preview { display:flex; flex-direction:column; gap:2px; min-width:0; }
.card.adorn .adorn-me { font-family:var(--serif); font-size:1.2em; overflow-wrap:anywhere; }
.card.adorn .adorn-purse { display:flex; flex-direction:column; align-items:center; color:var(--accent); line-height:1.1; font-size:.8em; }
.card.adorn .adorn-purse strong { font-size:1.8em; font-family:var(--serif); }
.card.adorn .adorn-group { margin:8px 0; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.card.adorn .adorn-group > summary { display:flex; align-items:center; gap:10px; padding:13px 14px; cursor:pointer; list-style:none; font-family:var(--serif); font-size:1.05em; color:var(--ink); }
.card.adorn .adorn-group > summary::-webkit-details-marker { display:none; }
.card.adorn .adorn-group > summary::after { content:"›"; color:var(--dim); font-family:var(--ui); font-size:1.2em; transition:transform .15s; }
.card.adorn .adorn-group[open] > summary::after { transform:rotate(90deg); }
.card.adorn .adorn-group[open] > summary { border-bottom:1px solid var(--line); }
.card.adorn .adorn-now { margin-left:auto; max-width:50%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dim); font-family:var(--ui); font-size:.85em; }
.card.adorn .adorn-body { padding:10px 14px 14px; }
.card.adorn .tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(74px, 1fr)); gap:8px; margin-top:6px; }
.card.adorn .tiles.wide { grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); }
.card.adorn .tiles form { margin:0; display:flex; }
.card.adorn .tiles button.tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:100%; min-height:70px; margin:0; padding:10px 6px;
  border:1px solid var(--line); border-radius:8px; background:var(--panel-2); color:var(--ink); text-align:center; cursor:pointer; }
.card.adorn .tiles button.tile::before { content:none; }
.card.adorn .tiles button.tile:hover { border-color:var(--accent-soft); }
.card.adorn .tile-face { font-size:1.45em; line-height:1.15; text-align:center; }
.card.adorn .tiles.wide .tile-face, .card.adorn .tile-face.text { font-size:1em; font-family:var(--serif); }
.card.adorn .tile-tag { display:flex; flex-direction:column; align-items:center; font-family:var(--ui); font-size:.72em; color:var(--dim); }
.card.adorn .tile-tag em { font-style:normal; color:var(--accent); opacity:.85; }
.card.adorn .tiles button.tile.wearing { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.card.adorn .tiles button.tile.wearing .tile-tag { color:var(--accent); }
.card.adorn .tiles button.tile.season { border-style:dashed; }
.card.adorn .tiles button.tile.patron { border-color:#b5683c; }
.card.adorn .adorn-form { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.card.adorn .adorn-form label { display:flex; flex-direction:column; gap:4px; margin:0; font-size:.9em; color:var(--dim); }
.card.adorn .adorn-form label.check { flex-direction:row; align-items:flex-start; gap:8px; color:var(--ink); }
.card.adorn .adorn-form input:not([type=checkbox]), .card.adorn .adorn-form select, .card.adorn .adorn-form textarea { width:100%; box-sizing:border-box; }
.card.adorn .adorn-form button { width:100%; margin:0; }
.card.adorn .adorn-pair { display:grid; grid-template-columns:1fr 6.5em; gap:8px; }
@media (min-width:700px) { .card.adorn .adorn-form button { width:auto; align-self:flex-start; padding-left:22px; padding-right:22px; } }
/* holidays in the Adornments: the switch, the colours kept after their holiday, and the bundles */
.card.adorn .holiday-wear { margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line); }
.card.adorn .holiday-wear .keep { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.card.adorn .holiday-wear .keep label.check { margin:4px 0; font-size:14px; }
.card.adorn .holiday-wear button { width:auto; margin-top:6px; }
.card.adorn form.bundle { margin:12px 0 0; }
.card.adorn button.bundle { display:flex; flex-direction:column; align-items:center; gap:2px; width:100%; margin:0; padding:8px 10px; border:1px dashed var(--line); border-radius:8px; background:none; color:var(--dim); font:400 13px/1.4 var(--ui); text-align:center; }
.card.adorn button.bundle::before { content:none; }
.card.adorn button.bundle .tile-tag { color:var(--accent); font:500 12px var(--ui); }
.card.adorn button.bundle:hover { border-color:var(--accent-soft); color:var(--ink); }
.card.adorn .tiles .tile .tile-face:only-child, .card.adorn .tiles .tile.later .tile-face { font-size:22px; }
.card.adorn .holiday-wear > label.check { align-items:flex-start; font:13px/1.45 var(--ui); color:var(--dim); }
.card.adorn .holiday-wear > label.check input[type=checkbox] { width:16px; height:16px; margin-top:1px; }
/* words waiting for a warden: the reason on its own line, the two answers under it */
.petition form.review { display:flex; flex-direction:column; gap:8px; }
.petition form.review input[name=reason] { width:100%; }
.petition form.review .acts { display:flex; flex-wrap:wrap; gap:8px; }
.petition form.review .acts button { width:auto; margin:0; }
/* the sign-up form's hidden field: people never see it, scripts fill it in */
.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
/* a wood seen for the first time: its picture across the top of the village, its name beneath */
.story p.note.picture { padding:0; border:0; background:none; text-align:center; }
.story p.note.picture .wood-pic, .story p.note.picture .wood-band { display:block; width:100%; height:auto; border-radius:6px; border:1px solid var(--line); }
.keepsake-pic { display:block; width:min(100%, 320px); height:auto; margin:10px auto; border-radius:6px; border:1px solid var(--line); }   /* a keepsake: small, centred */
.story p.note.picture .wood-name { display:block; margin-top:6px; color:var(--accent); font:600 1.15em var(--serif); letter-spacing:.04em; }
/* the keeper seeing the realm as a player: a band that never lets them forget */
.see-as { position:sticky; top:0; z-index:20; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:8px 16px; background:#4a2f12; border-bottom:2px solid var(--warn); color:#ffe4b0; font:14px/1.4 var(--ui); }
.see-as form { margin:0; } .see-as button { width:auto; margin:0; padding:6px 12px; }
.see-as-start { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0; } .see-as-start button { width:auto; margin:0; }
/* the front door: sign in shown, a new hero one tap away */
.landing .doors details.card.join, details.card.join { padding:0; }
details.card.join > summary { list-style:none; cursor:pointer; padding:14px 16px; text-align:center; color:var(--accent); font:600 16px/1.3 var(--ui); border-radius:4px; }
details.card.join > summary::-webkit-details-marker { display:none; }
details.card.join[open] > summary { border-bottom:1px solid var(--line); color:var(--dim); font-weight:400; font-size:14px; }
details.card.join > form { padding:14px 16px; }
.card.leave button.danger { border-left-color:var(--bad); color:var(--bad); }            /* deleting one's own account */
.story.privacy h2 { margin:18px 0 6px; font-size:1.05em; }
footer a { margin-left:8px; color:inherit; }
.story.privacy p.footnote { margin-top:22px; font-size:.85em; font-style:italic; }     /* the page's own small print, in the page's own type */