:root {
  --bg: #17131c;
  --card: #231c29;
  --card2: #2c2433;
  --line: #4a3d50;
  --ink: #efe5cf;
  --ink2: #b9ab93;
  --gold: #d9ad3c;
  --red: #c4513a;
  --green: #5fa36a;
  --blue: #5b8fd0;
  --serif: 'Noto Serif Thai', Georgia, serif;
  --sans: 'IBM Plex Sans Thai', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { font: clamp(15px, 0.45vw + 9.5px, 20px)/1.6 var(--sans); }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { min-height: 100dvh; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
/* An English page waits for its translation (src/lang-early.js). */
.lang-wait body { visibility: hidden; }

button {
  background: var(--card2); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 12px; cursor: pointer; transition: background .15s, border-color .15s;
}
button:hover:not(:disabled) { border-color: var(--gold); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: #7a2e22; border-color: #b8432f; font-weight: 700; }
button.primary:hover { background: #8f3627; }
input, select { background: #1b1620; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; width: 100%; }

.screen { max-width: 50rem; margin: 0 auto; padding: 0 16px 32px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.pix { image-rendering: pixelated; image-rendering: crisp-edges; width: 100%; display: block; }

/* ---------- start ---------- */
/* The art fills the window above a menu strip; the title sits on the picture. */
.start { min-height: 100dvh; display: flex; flex-direction: column; }
.start-scene { flex: 1 1 auto; min-height: 240px; position: relative; overflow: hidden; background: #0d0a10; border-bottom: 3px solid #3a2a20; }
/* The rider stands left of centre with his halberd reaching the top edge: keep him in view when the picture is cropped. */
.start-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 26% 10%; }
.online { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--ink2); white-space: nowrap; }
.online i { width: 8px; height: 8px; border-radius: 50%; background: #4ccf6a; box-shadow: 0 0 6px #4ccf6a; }
.online b { color: var(--ink); }
.start-scene .online { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 3px 10px; border-radius: 6px; background: rgba(15,11,18,.72); }
/* The corner of the start picture: sound, then settings (language, save files); the account under them. */
.start-scene .mute, .start-scene .gear { position: absolute; top: 10px; z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.1rem; padding: 0; background: rgba(23,19,28,.75); }
.start-scene .gear { right: 10px; }
.start-scene .mute { right: calc(10px + 2.5rem + 6px); }
.start-scene .gear .ic { margin: 0; }
/* Browsers keep a page silent until it is touched: say so until the sound is running. */
/* under the account button: beside the two corner buttons it would run into the players-online badge on a phone */
.sound-hint { position: absolute; top: calc(48px + 2.1rem + 4px); right: 10px; z-index: 1; padding: 3px 10px; border-radius: 6px; background: rgba(15,11,18,.72); color: var(--ink); font-size: .8rem; white-space: nowrap; pointer-events: none; }
/* The title keeps clear of the rider: under him on a narrow screen (over a shade, so it reads against
   the horse), beside him in the open sky on a wide one. */
.start-scene::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(transparent, rgba(30,14,16,.8)); pointer-events: none; }
.start-title { position: absolute; z-index: 1; bottom: 5%; left: 0; right: 0; padding: 0 16px; text-align: center; pointer-events: none; }
.start h1 {
  font: 800 clamp(2.4rem, 11vw, 4.6rem)/1.15 var(--serif); color: #f0c24a; margin: 0; letter-spacing: .02em;
  text-shadow: 0 2px 0 #8a4a16, 0 5px 0 #4a2210, 0 0 28px rgba(0,0,0,.8);
}
html[lang=en] .start h1 { font-size: clamp(1.7rem, 7.4vw, 3.6rem); }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .start-scene::after { display: none; }
  .start-title { bottom: auto; top: 50%; left: 66%; right: 2%; padding: 0; transform: translateY(-50%); }
  .start h1 { font-size: clamp(2.2rem, 4.6vw, 6rem); }
  html[lang=en] .start h1 { font-size: clamp(1.7rem, 3.3vw, 4.4rem); }
}
.start .sub {
  display: inline-block; margin: .4em 0 0; padding: 3px 16px; font-size: clamp(.85rem, 1.4vw, 1.15rem);
  color: #f6e7c4; background: #7a2e22; border: 1px solid #d9ad3c; border-radius: 3px; box-shadow: 0 3px 10px rgba(0,0,0,.45);
}
.start-menu {
  flex: 0 0 auto; width: min(100%, 34rem); margin: 0 auto; padding: 12px 16px 6px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.start-menu > * { min-width: 0; min-height: 2.6rem; }
.start-menu .fine { grid-column: 1 / -1; min-height: 0; margin: 2px 0 0; }
/* The way to the wiki: in gold, so a new player sees it. */
.start-menu .wiki-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--gold); border-radius: 6px; background: #2a2018; font-weight: 700; text-decoration: none; transition: background .15s; }
.start-menu .wiki-btn:hover { background: #3a2c1c; }
.start-menu .wiki-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Three rows of two: the two ways into a life stand taller than what is beside the game. */
.start-menu .big { min-height: 3.2rem; font-size: 1.08rem; font-weight: 700; }
@media (min-width: 601px) {
}
@media (max-width: 600px) {
  .start-menu { padding: 10px 12px 6px; }
}
/* a narrow phone: the longest label still fits one line in half the width */
@media (max-width: 400px) {
  .start-menu > button:not(.big), .start-menu .wiki-btn { padding-inline: 6px; font-size: .88rem; }
  .start-menu .big { padding-inline: 6px; font-size: 1rem; }
}
/* English labels are longer: on a phone, upright or sideways, they are set a little smaller */
@media (max-width: 899px) {
  html[lang=en] .start-menu > button:not(.big), html[lang=en] .start-menu .wiki-btn { padding-inline: 6px; font-size: .82rem; }
  html[lang=en] .start-menu .big { padding-inline: 6px; font-size: .96rem; }
}
.seg { display: flex; gap: 6px; }
.seg label { flex: 1; position: relative; display: flex; }
.seg input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.seg span { flex: 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; cursor: pointer; background: #1b1620; }
.seg input:checked + span { border-color: var(--gold); background: #3a2c1c; color: var(--gold); }
.seg input:focus-visible + span { outline: 2px solid var(--gold); }
details summary { cursor: pointer; color: var(--ink2); }
.fine { text-align: center; color: var(--ink2); font-size: .8rem; }

/* ---------- game ---------- */
/* Layout: a full-width top bar and scene band, then the stats, the panel and a tab bar at the
   bottom. The screen is exactly one window tall; only the stats and the panel scroll. */
.screen.game { max-width: none; padding: 0; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
:where(.screen.game) > * { flex: 0 0 auto; min-width: 0; }
.g-stats { padding: 8px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.who strong { font: 700 1.15rem var(--serif); color: var(--gold); display: block; line-height: 1.3; }
.who span { color: var(--ink2); font-size: .85rem; }
.speed { display: flex; gap: 4px; flex-shrink: 0; }
.speed button { padding: 4px 8px; min-width: 36px; }
.speed button.on { background: #3a2c1c; border-color: var(--gold); color: var(--gold); }

.scene-wrap { position: relative; overflow: hidden; background: #0d0a10; border-bottom: 3px solid #3a2a20; height: max(120px, min(32dvh, 50vw)); }
/* The art is 2:1. A wider band crops it down to 3:1 at most (keeping the ground and the hero),
   and a blurred copy of the live scene fills whatever is left at the sides. */
.scene-wrap > .pix { position: relative; height: 100%; width: auto; max-width: 100%; aspect-ratio: 3 / 1; margin-inline: auto; object-fit: cover; object-position: 50% 100%; box-shadow: 0 0 48px 16px rgba(13,10,16,.55); }
.scene-fill { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); filter: blur(18px) brightness(.6) saturate(.85); }
.scene-cap { position: absolute; left: 8px; top: 8px; z-index: 1; display: grid; max-width: calc(100% - 16px); padding: 3px 10px; border-radius: 6px; background: rgba(15,11,18,.72); border: 1px solid rgba(217,173,60,.35); font-size: .85rem; line-height: 1.4; }
#g-place { font-weight: 700; color: var(--gold); }
#g-doing { color: var(--ink2); }

.vitals { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 5.4rem 1fr 3rem; align-items: center; gap: 8px; font-size: .85rem; }
.track { height: 10px; background: #120e15; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.track > div { height: 100%; background: var(--green); transition: width .4s; }
.track > div.low { background: var(--red); }
.bar em { font-style: normal; text-align: right; color: var(--ink2); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .9rem; }
.lbl { color: var(--ink2); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: .85rem; }
.stat .top { display: flex; justify-content: space-between; }
.stat b { color: var(--gold); }
.stat .mini { height: 3px; background: #120e15; margin-top: 3px; }
.stat .mini > div { height: 100%; background: var(--gold); }

.focus { min-width: 0; }
.focus-head { display: flex; justify-content: space-between; align-items: center; color: var(--ink2); font-size: .85rem; margin-bottom: 6px; gap: 8px; }
.focus2 { display: flex; align-items: center; gap: 6px; }
.focus2 select { width: auto; padding: 4px 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { padding: 5px 10px; font-size: .85rem; border-radius: 16px; }
.chips button.on { background: #3a2c1c; border-color: var(--gold); color: var(--gold); }

.panel { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 12px 16px 16px; order: 1; }
/* bottom tab bar */
.tabs { display: flex; order: 2; background: var(--card); border-top: 1px solid var(--line); }
.tabs button { flex: 1 1 0; min-width: 0; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px; border: 0; border-top: 2px solid transparent; border-radius: 0; background: transparent; color: var(--ink2); font-size: .8rem; line-height: 1.1; white-space: nowrap; }
.tabs button:hover:not(:disabled) { color: var(--ink); border-color: transparent; border-top-color: var(--line); }
.tabs button.active { color: var(--gold); border-top-color: var(--gold); background: #2a2018; }
/* small inline icons (src/icons.js) */
.ic { width: 1.15em; height: 1.15em; margin-right: .3em; vertical-align: -.2em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-red { color: #e0645c; }
.ic-gold { color: var(--gold); }
.ic-green { color: #6fbf7a; }
.ic-orange { color: #e08a4c; }
.ic-blue { color: #6a9fe0; }
.ic-purple { color: #b592dc; }
.ic-pink { color: #e894b6; }
.ti { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.log li { padding: 6px 8px; border-left: 3px solid var(--line); background: #1c1621; border-radius: 0 6px 6px 0; }
.log li.war { border-color: var(--red); }
.log li.news { border-color: var(--blue); }
.log li.mile { border-color: var(--gold); background: #2a2018; }
.log .when { display: block; font-size: .75rem; color: var(--ink2); }
.toolbar { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.toolbar button { padding: 4px 10px; font-size: .85rem; }
.toolbar button.on { border-color: var(--gold); color: var(--gold); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 12px; }
.kv dt { color: var(--ink2); }
.kv dd { margin: 0; }
h3 { font: 700 1rem var(--serif); color: var(--gold); margin: 14px 0 8px; }
.panel h3:first-child { margin-top: 0; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 8px; background: #1c1621; border-radius: 6px; }
.list .sub { color: var(--ink2); font-size: .8rem; }
.list .dead { opacity: .5; }
.pill { display: inline-block; font-size: .75rem; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink2); }
.pill.warn { border-color: var(--red); color: #f3b5b5; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.pbar { height: 8px; background: #120e15; border-radius: 4px; overflow: hidden; min-width: 80px; }
.pbar > div { height: 100%; }
.map { display: block; width: min(100%, 60dvh); height: auto; margin: 0 auto 6px; border: 2px solid #6a5440; border-radius: 8px; }
.map .land { fill: #e4d3a8; }
.map .sea { fill: #7f9fae; stroke: #5d7c8a; stroke-width: 1; }
.map .river { fill: none; stroke: #6f93a8; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.map .mt path { fill: #b59a6a; stroke: #6b5536; stroke-width: 1; stroke-linejoin: round; }
.map .road { stroke: #7a5a3a; stroke-width: 1.5; stroke-dasharray: 4 3; }
.map .road.on { stroke: var(--red); stroke-width: 2.5; stroke-dasharray: 6 3; animation: march 0.8s linear infinite; }
@keyframes march { to { stroke-dashoffset: -9; } }
.map .city circle { stroke: #2a1f17; stroke-width: 1.5; }
.map .city text { font: 700 10px var(--sans); fill: #2a1f17; text-anchor: middle; paint-order: stroke; stroke: #f3e7c6; stroke-width: 3px; stroke-linejoin: round; }
.map .city.go { cursor: pointer; }
.map .city.go circle { stroke: var(--gold); stroke-width: 2.5; }
.map .city.go:hover text, .map .city.go:focus text { fill: #7a2e22; }
.map .city.go:focus { outline: none; }
.map .city.go:focus circle { stroke: #7a2e22; }
.map .city.dest circle { stroke: var(--red); stroke-width: 2.5; }
.map .ring { fill: none; stroke: #7a2e22; stroke-width: 2; animation: pulse 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { from { opacity: 1; transform: scale(.7); } to { opacity: 0; transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .map .ring, .map .road.on { animation: none; } }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 8px; font-size: .85rem; color: var(--ink2); }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.note { color: var(--ink2); font-size: .85rem; }

/* ---------- character creation ---------- */
/* A page of its own between the start screen and the game. The picture shows where and when the
   life begins and stays in sight while the page scrolls; the fate (star, talents, first stats) is
   the life exactly as it will start. On a wide or sideways screen the picture and the fate stand
   on the left and the choices on the right (see the layout rules below). */
.create { min-height: 100dvh; display: flex; flex-direction: column; }
.create-top { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.create-top strong { font: 700 1.15rem var(--serif); color: var(--gold); }
.create-top button { padding: 4px 10px; font-size: .85rem; }
.create .scene-wrap { position: sticky; top: 0; z-index: 3; flex: 0 0 auto; }
.create-fields, .create-fate { display: grid; gap: 14px; align-content: start; padding: 12px 16px 0; width: min(100%, 44rem); margin: 0 auto; }
.create-fate { gap: 8px; padding-bottom: 12px; }
.create h3 { margin: 0 0 6px; font-size: 1rem; color: var(--gold); }
.create-fate h3, .cr-head h3 { margin: 0; }
/* a heading with the button that belongs to it */
.cr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cr-head button { padding: 3px 10px; font-size: .85rem; }
.create-fate .cr-head { margin: 0; }
.cr-name { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-name input { flex: 1 1 10rem; min-width: 0; }
.cr-name button { flex-shrink: 0; font-size: .85rem; }
.cr-name .seg { flex: 1 1 10rem; }
.cr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 6px; }
.cr-card { position: relative; display: flex; }
.cr-card input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.cr-card > span { flex: 1; display: grid; gap: 1px; align-content: start; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #1b1620; cursor: pointer; }
.cr-card b { font-size: .95rem; }
.cr-card small { color: var(--ink2); font-size: .8rem; }
.cr-card .gain { color: var(--ink); }
.cr-card input:checked + span { border-color: var(--gold); background: #3a2c1c; }
.cr-card input:checked + span b { color: var(--gold); }
.cr-card input:focus-visible + span { outline: 2px solid var(--gold); }
/* The three figures stand in a row; the choices run beside them where there is room and wrap
   under one another where there is not (hair and clothes are wide, the colours are narrow). */
.cr-look { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; }
.cr-figs { flex: 0 0 auto; display: flex; gap: 2px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #231c29; }
.cr-figs figure { margin: 0; display: grid; justify-items: center; }
.cr-figs canvas { image-rendering: pixelated; image-rendering: crisp-edges; width: 96px; height: 96px; }
.cr-figs figcaption { color: var(--ink2); font-size: .72rem; }
.cr-picks { flex: 1 1 18rem; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cr-pick { display: grid; gap: 3px; min-width: 0; align-content: start; }
.cr-pick:nth-child(1) { flex: 3 1 15rem; }
.cr-pick:nth-child(2) { flex: 2 1 12rem; }
.cr-pick > span { color: var(--ink2); font-size: .8rem; }
.cr-pick .seg { flex-wrap: wrap; }
.cr-pick .seg span { padding: 5px 8px; font-size: .85rem; text-align: center; }
.cr-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.create-fields .note { margin: 6px 0 0; }
.cr-swatch { position: relative; display: block; }
.cr-swatch input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.cr-swatch span { display: block; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid #120e15; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.cr-swatch input:checked + span { box-shadow: 0 0 0 2px var(--gold); }
.cr-swatch input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.cr-star { margin: 0; }
.cr-star .sub { color: var(--ink2); font-size: .85rem; }
.cr-stats .stat small { display: flex; justify-content: space-between; align-items: center; margin-top: 3px; color: var(--ink2); font-size: .75rem; }
.create-fate .note { margin: 0; }
.create-fate details input { margin-top: 6px; }
.create-go { position: sticky; bottom: 0; z-index: 3; margin-top: auto; display: flex; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--line); }
.create-go .primary { flex: 1; min-height: 2.8rem; }
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  .create { display: grid; height: 100dvh; min-height: 0; overflow: hidden; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .create-top { grid-column: 1 / -1; grid-row: 1; padding: 4px 12px; }
  .create .scene-wrap { grid-column: 1; grid-row: 2; position: relative; height: min(23vw, 50dvh); }
  .create-fate { grid-column: 1; grid-row: 3 / 5; width: auto; margin: 0; overflow-y: auto; scrollbar-width: thin; border-right: 1px solid var(--line); }
  .create-fields { grid-column: 2; grid-row: 2 / 4; width: auto; margin: 0; padding-bottom: 12px; overflow-y: auto; scrollbar-width: thin; }
  .create-go { grid-column: 2; grid-row: 4; position: static; margin: 0; padding: 8px 16px; }
  .create-fields { gap: 10px; }
}
/* A desktop window: every choice fits in one screen (the five origins and the five times of birth
   each in one row; the picture gives way a little when the window is short). */
@media (min-width: 900px) {
  .create .scene-wrap { height: min(23vw, 44dvh); }
  .cr-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cr-card > span { padding: 6px 8px; }
  .cr-card small { font-size: .76rem; line-height: 1.35; }
}
/* ... and a short one (a laptop): smaller figures, and the origins keep their name and what they
   give but drop the line of description. */
@media (min-width: 900px) and (max-height: 800px) {
  .create .scene-wrap { height: min(23vw, 40dvh); }
  .create-fields { gap: 8px; padding: 8px 16px 4px; }
  .create h3, .cr-head { margin-bottom: 3px; }
  .create-fields .note { margin-top: 3px; }
  .cr-pick { gap: 1px; }
  .cr-card > span { padding: 4px 8px; }
  .cr-figs canvas { width: 72px; height: 72px; }
  #cr-origins .cr-card small:not(.gain) { display: none; }
}

/* ---------- legacy ---------- */
.legacy { margin-top: 14px; display: grid; gap: 8px; }
.legacy summary { color: var(--gold); font-weight: 700; }
.achs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.achs li { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #1b1620; opacity: .55; }
.achs li.on { opacity: 1; border-color: var(--gold); background: #2a2018; }
.achs b { display: block; font-size: .9rem; }
.achs small { color: var(--ink2); }
.hall { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.hall .sub { color: var(--ink2); font-size: .8rem; }

/* ---------- cloud save ---------- */
.sync-code { margin: 0; padding: 10px 12px; border: 1px solid var(--gold); border-radius: 8px; background: #2a2018; display: grid; gap: 2px; }
.sync-code span { color: var(--ink2); font-size: .8rem; }
.sync-code b { font: 700 1.35rem/1.3 ui-monospace, Consolas, monospace; letter-spacing: .08em; user-select: all; overflow-wrap: anywhere; }
.cloud-form { display: flex; gap: 6px; }
.cloud-form input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; text-transform: uppercase; }
#cl-msg:empty, #ac-msg:empty { display: none; }
#cl-msg, #ac-msg { color: var(--ink); }

/* ---------- the account ---------- */
.start-scene .acct { position: absolute; top: 48px; right: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; max-width: 12rem; padding: 4px 10px; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(23,19,28,.75); }
/* the way out of the window is as wide as the way in: "play as a guest" is a choice, not a footnote */
#ac-close { flex: 1; padding-block: 8px; }
.acct-tabs { display: flex; gap: 6px; }
.acct-tabs button { flex: 1; }
.acct-tabs button[aria-selected=true] { border-color: var(--gold); background: #3a2c1c; color: var(--gold); }
.acct-form { display: grid; gap: 8px; }
.acct-form label { display: grid; gap: 3px; }
.acct-form label span { color: var(--ink2); font-size: .8rem; }
.acct-form button { justify-self: start; }
.acct-who b { font: 800 1.35rem var(--serif); letter-spacing: 0; }
.linkish { justify-self: start; padding: 0; border: 0; background: none; color: var(--gold); font-size: .85rem; text-decoration: underline; }

.sound { position: fixed; z-index: 25; width: 15rem; display: grid; gap: 10px; padding: 12px 14px; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.sound label { display: grid; gap: 4px; font-size: .85rem; color: var(--ink2); }
.sound label.check { display: flex; align-items: center; gap: 8px; color: var(--ink); }
/* world chat */
.chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.chat li { position: relative; padding: 4px 32px 4px 8px; background: #1c1621; border-radius: 6px; overflow-wrap: anywhere; }
.chat li.empty { padding-right: 8px; color: var(--ink2); }
.chat li.gm { padding-right: 8px; background: #2a2018; border: 1px solid var(--gold); }
.chat .when { margin-right: 6px; color: var(--ink2); font-size: .75rem; }
.chat b { margin-right: 6px; color: var(--gold); }
.chat .flag { position: absolute; top: 2px; right: 2px; padding: 0 6px; border: 0; background: none; color: var(--ink2); opacity: .4; }
.chat .flag:hover, .chat .flag:focus-visible { opacity: 1; color: var(--red); }
.chat-foot { position: sticky; bottom: 0; margin-top: 8px; padding: 8px 0 2px; background: var(--bg); }
.card .chat-foot { background: var(--card); }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; min-width: 0; }
.chat-foot .note { margin: 4px 0 0; font-size: .8rem; }
.tabs button { position: relative; }
.tabs button.has-new::after { content: ""; position: absolute; top: 6px; left: calc(50% + .55rem); width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px var(--red); }
label.check { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
label.check input { width: auto; }
.com-head b { color: var(--ink); }
.live { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #4ccf6a; box-shadow: 0 0 6px #4ccf6a; }
.sound input[type=checkbox] { width: auto; }
.sound input[type=range] { padding: 0; accent-color: var(--gold); }

.toast { position: fixed; left: 50%; top: 4.2rem; transform: translateX(-50%); z-index: 30; background: #2a2018; border: 1px solid var(--gold); border-radius: 10px; padding: 10px 16px; box-shadow: 0 8px 30px rgba(0,0,0,.5); display: grid; gap: 2px; max-width: calc(100% - 32px); animation: toast-in .3s ease-out; }
.toast b { color: var(--gold); }
.toast span { color: var(--ink2); font-size: .85rem; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -12px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; background: rgba(8, 6, 10, .72); display: grid; place-items: center; padding: 16px; z-index: 20; }
.overlay .card { width: min(37rem, 100%); max-height: 92dvh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.5); border-color: #6a5440; }
.overlay h2 { font: 800 1.35rem var(--serif); color: var(--gold); margin: 0 0 8px; }
.choice p, .help p { white-space: pre-line; }
.help .note { margin: 0; }
.help .row-actions + .note { margin-top: 10px; }
a.wiki { color: var(--gold); }
/* An event's window sits under the scene band: the band is its picture, where the event plays
   (--under is the band's bottom edge, set by ui.js). */
#choice { top: var(--under, 0px); place-items: start center; padding: 10px 12px 12px; }
#choice .card { max-height: 100%; }
.say { position: relative; min-height: 6.2rem; margin-top: 4px; padding: 10px 12px 26px; background: #1c1621; border: 1px solid #6a5440; border-radius: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.say b { display: inline-block; margin-bottom: 4px; padding: 0 10px; border-radius: 4px; background: #7a2e22; border: 1px solid #b8432f; color: #f6e7c4; font-size: .85rem; }
.say b:empty { display: none; }
.say p { margin: 0; }
.say.narr p { color: var(--ink2); }
.say .more { position: absolute; right: 12px; bottom: 4px; color: var(--gold); animation: say-more 1s ease-in-out infinite; }
.say.typing .more { visibility: hidden; }
.say .skip { position: absolute; left: 6px; bottom: 2px; padding: 2px 8px; border: 0; background: none; color: var(--ink2); font-size: .78rem; text-decoration: underline; }
@keyframes say-more { 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .say .more { animation: none; } }
.choice { position: relative; }
/* A chapter of a story arc names its arc over the title. */
.arc-tag { display: inline-block; margin: 0 0 6px; padding: 1px 10px; border-radius: 10px; background: #2a2018; border: 1px solid rgba(217,173,60,.55); color: var(--gold); font-size: .78rem; }
.choice .face { float: left; width: 4.6rem; height: 4.6rem; margin: 0 12px 6px 0; background: #231c29; border: 2px solid var(--gold); border-radius: 8px; }
.choice .opts { clear: both; }
.portrait { width: 2.6rem; height: 2.6rem; flex-shrink: 0; background: #231c29; border: 1px solid var(--line); border-radius: 6px; }
.list .who { display: flex; align-items: center; gap: 8px; }
.opts { display: grid; gap: 8px; margin-top: 12px; }
.opts button { text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; }
.opts .hint { font-size: .78rem; color: var(--ink2); display: block; }
.band { font-size: .75rem; padding: 1px 8px; border-radius: 10px; white-space: nowrap; font-weight: 700; }
.b5 { background: #2f5b33; color: #c9f0cd; }
.b4 { background: #3c5a2a; color: #dcefc0; }
.b3 { background: #5a4d22; color: #f3e3a6; }
.b2 { background: #6a3522; color: #f6c8b0; }
.b1 { background: #5a1f22; color: #f3b5b5; }
.result { border-left: 3px solid var(--gold); padding: 6px 10px; background: #1c1621; white-space: pre-line; }
.result.fail { border-color: var(--red); }
.result .sum { display: block; color: var(--ink2); font-size: .85rem; margin-top: 4px; }

.death .dsum { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: .9rem; }
.death .dsum span { padding-left: 1.5em; text-indent: -1.5em; }
/* fame over the years */
.chart { position: relative; touch-action: pan-y; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .grid .base { stroke: var(--ink2); stroke-dasharray: none; opacity: .6; }
.chart .axis text { fill: var(--ink2); font: 9px var(--sans); }
.chart .tick { stroke: var(--ink2); stroke-width: 1.5; }
.chart .line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--gold); stroke: var(--card); stroke-width: 2; }
.chart .val { fill: var(--ink); font: 700 10px var(--sans); }
.chart .cross { stroke: var(--ink2); stroke-width: 1; }
.chart .tip { position: absolute; top: -6px; transform: translate(-50%, -100%); max-width: 90%; padding: 3px 8px; border-radius: 6px; background: #120e15; border: 1px solid var(--line); color: var(--ink); font-size: .8rem; pointer-events: none; }
.chart-table summary { font-size: .85rem; }
.chart-table table { margin-top: 6px; border-collapse: collapse; font-size: .85rem; }
.chart-table th, .chart-table td { padding: 2px 14px 2px 0; text-align: right; }
.chart-table th { color: var(--ink2); font-weight: 400; }
.miles { padding-left: 18px; margin: 0; font-size: .9rem; }
.miles li { margin-bottom: 4px; }
.heirs { display: grid; gap: 6px; margin: 14px 0 8px; }

/* narrow: compact stats so the panel keeps most of the height */
@media (max-width: 899px), (orientation: landscape) and (max-height: 500px) {
  .g-stats { gap: 6px; padding: 6px 12px; }
  .g-stats .vitals { gap: 4px; }
  .g-stats .bar, .g-stats .meta { font-size: .8rem; }
  .g-stats .stats { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .g-stats .stat { padding: 1px 6px; font-size: .8rem; }
  .g-stats .stat .mini { display: none; }
  /* activity chips scroll sideways on one line, with the second-activity picker beside them */
  .g-stats .focus { display: flex; align-items: center; gap: 8px; }
  .g-stats .chips { order: 1; flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .g-stats .chips button { flex-shrink: 0; }
  .g-stats .focus-head { order: 2; margin: 0; }
  .g-stats .focus2 select { max-width: 6.5rem; }
  /* keep money, fame and virtue on one line: the fame title is in the character tab */
  .g-stats .fame-t { display: none; }
  .g-stats .meta { flex-wrap: nowrap; gap: 4px 12px; white-space: nowrap; }
  .g-stats .focus-head > span { display: none; }
}
@media (max-width: 899px) and (max-height: 760px) {
  .scene-wrap { height: max(110px, min(26dvh, 50vw)); }
}
/* phones: name and buttons on one row, the age line below */
@media (max-width: 600px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name speed" "sub online"; gap: 0 8px; padding: 6px 12px; }
  .topbar .online { grid-area: online; justify-self: end; font-size: .75rem; }
  .topbar .who { display: contents; }
  .who strong { grid-area: name; align-self: center; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .who span { grid-area: sub; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .speed { grid-area: speed; gap: 2px; }
  .speed button { min-width: 28px; padding: 3px 5px; font-size: .8rem; }
  .tabs button { font-size: .72rem; }
}
/* very short narrow windows (phone held sideways): the page scrolls instead */
@media (max-width: 899px) and (max-height: 599px) {
  .screen.game { height: auto; min-height: 100dvh; overflow: visible; }
  .panel { flex: none; min-height: 70dvh; overflow: visible; }
  .tabs { position: sticky; bottom: 0; z-index: 4; }
}
/* wide: stats in a left column, the panel and its tab bar on the right */
@media (min-width: 900px) {
  .screen.game { display: grid; grid-template-columns: 21rem minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .topbar, .scene-wrap { grid-column: 1 / -1; }
  .scene-wrap { height: max(180px, min(42dvh, 100dvh - 24rem)); }
  .g-stats { grid-column: 1; grid-row: 3 / 5; min-height: 0; overflow-y: auto; scrollbar-width: thin; align-content: start; gap: 14px; padding: 12px 16px; border-bottom: 0; border-right: 1px solid var(--line); }
  .g-stats .stats { grid-template-columns: repeat(2, 1fr); }
  .panel { grid-column: 2; grid-row: 3; }
  .tabs { grid-column: 2; grid-row: 4; }
}

/* A short wide window (a phone held sideways). Nothing scrolls as a page:
   - the start screen puts the picture on the left and the menu on the right;
   - the game puts the picture on the left with the stats under it, and the panel with its tabs
     on the right;
   - an event's window opens over the right side, beside the picture it plays in (ui.js
     underScene gives --over and --beside). */
@media (orientation: landscape) and (max-height: 500px) {
  .start { flex-direction: row; height: 100dvh; min-height: 0; }
  .start-scene { flex: 1 1 0; min-width: 0; min-height: 0; border-bottom: 0; border-right: 3px solid #3a2a20; }
  .start-scene::after { display: block; }
  .start-title { top: auto; bottom: 5%; left: 0; right: 0; padding: 0 12px; transform: none; }
  .start h1 { font-size: clamp(1.8rem, 6vw, 3.2rem); }
  html[lang=en] .start h1 { font-size: clamp(1.3rem, 4vw, 2.3rem); }
  .start .sub { font-size: .8rem; }
  /* Rows keep the height of what is in them (the menu scrolls if the window is shorter still). */
  .start-menu { flex: 0 0 min(50%, 27rem); width: auto; margin: 0; padding: 8px 12px 6px; grid-auto-rows: max-content; align-content: start; align-content: safe center; overflow-y: auto; scrollbar-width: thin; }
  .start-menu .fine { margin: 0; }
  /* A phone's notch and round corners are at the sides now (the page runs edge to edge:
     viewport-fit=cover). The start picture may run under them; nothing to read or press does. */
  .start-menu { padding-right: calc(12px + env(safe-area-inset-right, 0px)); }
  .start-title { padding-left: calc(12px + env(safe-area-inset-left, 0px)); }
  .start-scene .online { left: calc(12px + env(safe-area-inset-left, 0px)); }
  .screen.game, .create { padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }

  .screen.game { display: grid; height: 100dvh; min-height: 0; overflow: hidden; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .topbar { grid-column: 1 / -1; grid-row: 1; display: flex; padding: 3px 12px; }
  .topbar .who { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
  .who strong { font-size: 1rem; white-space: nowrap; }
  .who span { font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .online { font-size: .75rem; }
  .speed { gap: 3px; }
  .speed button { min-width: 30px; padding: 2px 6px; font-size: .8rem; }
  /* the picture is 2:1: as tall as half the column is wide, while the stats keep some room */
  .scene-wrap { grid-column: 1; grid-row: 2; height: min(23vw, 56dvh); }
  .g-stats { grid-column: 1; grid-row: 3 / 5; min-height: 0; overflow: hidden auto; scrollbar-width: thin; align-content: start; gap: 6px; padding: 6px 12px; border-bottom: 0; border-right: 1px solid var(--line); }
  .g-stats .stats { grid-template-columns: repeat(3, 1fr); }
  .panel { grid-column: 2; grid-row: 2 / 4; flex: none; min-height: 0; overflow: hidden auto; padding: 8px 12px 12px; }
  .tabs { grid-column: 2; grid-row: 4; position: static; }
  .tabs button { min-height: 40px; padding: 3px 2px; font-size: .7rem; }
  .tabs .ti { width: 1.2rem; height: 1.2rem; }
  /* other windows (the end of a life, the help, cloud saves) use the width there is */
  .overlay { padding: 8px calc(12px + env(safe-area-inset-right, 0px)) 8px calc(12px + env(safe-area-inset-left, 0px)); }
  .overlay .card { width: min(46rem, 100%); max-height: 96dvh; }
  /* the account's boxes stand side by side: the window is short, and shorter still under a keyboard */
  .acct-form { grid-template-columns: 1fr 1fr; align-items: end; }
  /* the map fills its column (the panel scrolls), with the larger city labels of a narrow screen */
  .map { width: 100%; }
  .map .city text { font-size: 16px; stroke-width: 4px; }
  .map .city circle:not(.ring) { r: 7px; }
  #choice { top: var(--over, 0px); left: var(--beside, 46%); padding: 6px calc(8px + env(safe-area-inset-right, 0px)) 6px 8px; }
  /* the window is short: its parts sit closer, so three options show without scrolling */
  #choice .card { padding: 10px 12px; }
  #choice h2 { font-size: 1.1rem; margin-bottom: 4px; }
  #choice .arc-tag { margin-bottom: 3px; }
  #choice .opts { gap: 5px; margin-top: 8px; }
  #choice .opts button { padding: 5px 10px; }
  #choice .say { min-height: 5rem; }
}
@media (max-width: 480px) {
  .map .city text { font-size: 16px; stroke-width: 4px; }
  .map .city circle:not(.ring) { r: 7px; }
}