/* Layout: et alkymistværksted om natten. Lager og ture til venstre, kedlen i midten, grimoire og kunder til højre. */
:root {
  color-scheme: dark;
  --bg: #0e1618;
  --panel: #152023;
  --panel-2: #1b2a2d;
  --line: #2a3c3f;
  --fg: #e9e1cd;
  --muted: #97a8a2;
  --brass: #d8aa4f;
  --brass-dim: #8a6c32;
  --ink: #17110a;
  --ild: #ff7a3d;
  --vand: #4fa6ff;
  --jord: #c09553;
  --luft: #c4b4ff;
  --uro: #ff5aa8;
  --good: #82d49e;
  --bad: #ff7272;
  --ouch: #ffb0a8;
  --bg-top: #182a2d;
  /* For the share card (../share/share.js). */
  --surface: var(--panel); --text: var(--fg); --border: var(--line); --accent: var(--brass); --accent-text: var(--ink);
  --f-display: "IM Fell English SC", "Iowan Old Style", Georgia, serif;
  --f-book: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --f-body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
/* By day: the same workshop with the shutters open, warm paper and dark ink, brass and the essences a shade deeper so
   they read on light. The cauldron, the scrolls and the parchment pages look the same either way. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #ece3cd; --bg-top: #faf5e8; --panel: #f8f2e3; --panel-2: #efe5cf; --line: #d3c4a2;
    --fg: #2b2218; --muted: #6d604c; --brass: #b8862b; --brass-dim: #c4a062; --ink: #1e150a;
    --ild: #c8501a; --vand: #1f6fc4; --jord: #8a5f28; --luft: #6650c8; --uro: #c42f7a;
    --good: #2f8a55; --bad: #c43c3c; --ouch: #b0302a;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
/* No zooming on a phone: no double-tap zoom, and text fields big enough that the phone does not zoom into them. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input, select, textarea { font-size: max(16px, 1em); }
body {
  background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--bg-top) 0%, var(--bg) 70%) fixed, var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.45;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: max(20px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-bottom, 0px));
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.wrap { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

/* Header: the name, the day's chips (day and moon, gold, health) and the buttons, on one row when there is room. */
header.top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand right" "status status"; align-items: center; gap: 12px 16px; }
header.top .brand { grid-area: brand; min-width: 0; overflow: hidden; }
header.top .right { grid-area: right; }
header.top .status { grid-area: status; }
@media (min-width: 1000px) { header.top { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand status right"; } header.top .status { justify-content: flex-end; } }
.right { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.right .share-btn, .icon-btn { width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 10px; }
.right .share-btn:hover { color: var(--brass); }
.icon-btn { display: flex; padding: 4px; border: none; background: none; color: var(--muted); cursor: pointer; }
.icon-btn:hover { color: var(--brass); }
.icon-btn svg { width: 22px; height: 22px; }
.home { display: inline-flex; color: var(--muted); margin-right: 10px; vertical-align: -2px; }
.home:hover { color: var(--brass); }
.home svg { width: 22px; height: 22px; }
.wip { cursor: pointer; font-family: var(--f-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass); background: none; border: 1px solid var(--brass-dim); border-radius: 999px; padding: 3px 10px; }
.wip:hover { background: color-mix(in srgb, var(--brass) 12%, transparent); }
.brand h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.25rem, 4.6vw, 2.2rem); line-height: 1; margin: 0; color: var(--brass); letter-spacing: 0.01em; white-space: nowrap; display: flex; align-items: center; }
@media (max-width: 400px) { .home { margin-right: 6px; } .home svg { width: 19px; height: 19px; } }
.right .btn { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.right .btn svg { width: 16px; height: 16px; }
@media (max-width: 520px) { .right .btn .label { display: none; } .right .btn { padding: 0; width: 40px; height: 40px; justify-content: center; } .right { gap: 0; } .right .icon-btn svg { width: 20px; height: 20px; } }
@media (max-width: 420px) { .brand h1 { font-size: 1.05rem; } .right .share-btn, .right .icon-btn, .right .btn { width: 36px; height: 36px; } .right .btn { margin-left: 0; } }

/* Starting over: asked in a box of its own, with what would be lost. */
.confirm { width: min(calc(100vw - 32px), 420px); margin: auto; padding: 20px; border: 1px solid var(--brass-dim); border-radius: 8px; background: var(--panel); color: var(--fg); }
.confirm::backdrop { background: rgba(0, 0, 0, 0.6); }
.confirm h2 { margin-bottom: 8px; }
.confirm p { margin: 0 0 8px; }
.confirm .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.confirm .row .btn { flex: 1 1 150px; padding: 9px 12px; }
/* Handwork: a scene, a track the hand swings along, and a mark for each stroke. */
.work-scene { display: flex; justify-content: center; margin: 4px 0 10px; }
.work-scene svg { width: min(100%, 260px); height: auto; }
.work-scene .work-tool { transition: transform 0.12s ease-in; transform-box: fill-box; }
.work-scene.strike .work-tool { transform: translate(0, 10px); }
.work-scene.strike.kniv .work-tool { transform: translate(-6px, 14px) rotate(-8deg); }
.work-track { position: relative; height: 34px; border-radius: 17px; background: var(--bg, #0e1618); border: 1px solid var(--brass-dim); overflow: hidden; touch-action: manipulation; cursor: pointer; }
.work-track .work-near, .work-track .work-zone { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); }
.work-track .work-near { background: color-mix(in srgb, #e0b04f 22%, transparent); }
.work-track .work-zone { background: color-mix(in srgb, #82d49e 38%, transparent); border-left: 1px solid #82d49e; border-right: 1px solid #82d49e; }
.work-track .work-mark { position: absolute; top: 3px; bottom: 3px; width: 6px; margin-left: -3px; border-radius: 3px; background: var(--fg); box-shadow: 0 0 6px rgba(255, 240, 200, 0.6); left: 50%; }
.work-pips { display: flex; justify-content: center; gap: 8px; margin: 10px 0 2px; }
.work-pips span { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--brass-dim); }
.work-pips .s2 { background: #82d49e; border-color: #82d49e; }
.work-pips .s1 { background: #e0b04f; border-color: #e0b04f; }
.work-pips .s0 { background: #d0604a; border-color: #d0604a; }
.work-out { min-height: 1.5em; text-align: center; margin: 6px 0 0 !important; }
.market .rare-seed { background: color-mix(in srgb, var(--brass) 8%, transparent); }
/* Dusk: the background darkens over the last hours of the day, slowly, as the hourglass turns, and the stars come
   out. These layers lie behind everything on the page (z-index -1), so the panels, the cauldron and the text keep their
   light: only the bare background between them goes dark. */
#dusk { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, rgba(20,16,40,0.55), rgba(8,6,20,0.9)); opacity: 0; transition: opacity 4s ease; }
/* Staying up: five real minutes of the night closing in over the whole screen, to black; under a full moon not quite.
   Only the sundial glows above it, to go to bed by. */
#stayup { position: fixed; inset: 0; z-index: 2920; pointer-events: none; background: #000; opacity: 0; transition: opacity 6s ease-in; }
#stayup.on { opacity: 1; }
#stayup.moon.on { opacity: 0.94; background: #01030a; }
#stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 4s ease; }
#stars i { position: absolute; border-radius: 50%; background: #fff6e0; box-shadow: 0 0 4px 1px rgba(255, 240, 200, 0.5); animation: twinkle var(--tw, 4s) ease-in-out var(--td, 0s) infinite alternate; }
/* Staying up, the stars shine over the dark that covers the screen (but under the sundial). */
#stars.over { z-index: 2930; }
/* The full moon outshines them: fewer and fainter. */
#stars.over.moon { filter: opacity(0.35); }
@keyframes twinkle { from { opacity: var(--lo, 0.35); } to { opacity: 1; } }
/* By day the ink on the bare background is dark; once the dusk has deepened, it turns light to read against the night. */
@media (prefers-color-scheme: light) {
  .top .icon-btn, .top .home, .top .share-btn, .news { transition: color 1.5s ease; }
  body.dusky .top .icon-btn, body.dusky .top .home, body.dusky .top .share-btn, body.dusky .news { color: #e9e1cd; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
}
@media (prefers-reduced-motion: reduce) { #dusk, #stars { transition: none; } #stars i { animation: none; } }
#stayup-sun { position: fixed; z-index: 2950; display: block; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, rgba(255,200,110,0.4), rgba(255,170,80,0) 70%); color: #f4d9a0;
  box-shadow: 0 0 18px 4px rgba(255,180,90,0.3); }
#stayup-sun svg { width: 100%; height: 100%; display: block; }
#night-veil { position: fixed; inset: 0; z-index: 3000; background: #000; opacity: 0; pointer-events: none; overflow: hidden; transition: opacity 0.9s ease; }
#night-veil.dark { opacity: 1; pointer-events: auto; }
#night-veil .lantern { position: absolute; left: -40vmax; top: 30%; width: 46vmax; height: 46vmax; margin-top: -23vmax; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 214, 150, 0.30), rgba(255, 190, 110, 0.10) 38%, transparent 68%); filter: blur(18px); }
#night-veil.stole .lantern { animation: lantern-pass 3s ease-in-out forwards; }
#night-veil.chased .lantern { animation: lantern-flee 2.4s ease-in-out forwards; }
#night-veil .woof { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--f-display); font-size: clamp(1.6rem, 7vw, 3.4rem); color: #c9b48a; opacity: 0; letter-spacing: 0.1em; }
#night-veil.chased .woof { animation: woof 2.4s ease-out forwards; }
@keyframes lantern-pass { 0% { left: -40vmax; top: 62%; opacity: 0; } 15% { opacity: 1; } 45% { left: 30vw; top: 52%; } 60% { left: 34vw; top: 50%; opacity: 0.9; } 85% { opacity: 0.8; } 100% { left: 110vw; top: 44%; opacity: 0; } }
@keyframes lantern-flee { 0% { left: -40vmax; top: 60%; opacity: 0; } 18% { opacity: 1; } 40% { left: 18vw; top: 55%; } 48% { left: 16vw; top: 52%; opacity: 1; } 52% { left: 20vw; top: 58%; } 75% { left: -45vmax; top: 64%; opacity: 0.6; } 100% { left: -50vmax; opacity: 0; } }
@keyframes woof { 0%, 40% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } 46% { opacity: 0.85; transform: translate(-52%, -50%) scale(1.04); } 52% { transform: translate(-48%, -50%) scale(1); } 58% { opacity: 0.8; transform: translate(-51%, -50%) scale(1.06); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
.flask-lab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; flex-basis: 100%; margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: var(--bg); }
.apo-sale { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; margin: 0 0 10px; border: 1px dashed var(--brass-dim); border-radius: 10px; }
.apo-sale .art { width: 40px; height: 40px; flex: none; }
.book-page .measured .chips { margin: 2px 0 6px; }
.fly-item { position: fixed; z-index: 2500; width: 56px; height: 56px; pointer-events: none; opacity: 0; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45)); }
.fly-item .art { width: 100%; height: 100%; }
/* Coins flying into the purse, or falling out of it, and the sum by it. */
.coin-fly { position: fixed; z-index: 2600; width: 22px; height: 22px; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4)); }
.coin-fly svg { width: 100%; height: 100%; display: block; }
.coin-fly.out { filter: grayscale(0.5) drop-shadow(0 2px 3px rgba(0,0,0,0.4)); }
.gold-delta { position: fixed; z-index: 2601; pointer-events: none; font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.gold-delta.up { color: #e8c060; }
.gold-delta.down { color: var(--bad); }
/* The purse's little window. */
.m-gain { color: var(--good); font-weight: 700; } .m-loss { color: var(--bad); font-weight: 700; }
/* The purse's statistics: a row for each heading, a bar for the last seven days, and the sums. */
.money-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin: 6px 0; }
.money-table th, .money-table td { padding: 3px 4px; text-align: right; white-space: nowrap; }
.money-table th:first-child { text-align: left; font-weight: 400; white-space: normal; }
.money-table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.money-table .m-head th { padding-top: 10px; font-family: var(--f-display); font-weight: 700; font-size: 0.95rem; }
.m-in td { color: #3a7a3a; } .m-out td { color: #a8402e; }
.money-table td.m-bar { width: 30%; padding-right: 8px; }
.m-bar i { display: block; height: 7px; border-radius: 4px; min-width: 2px; }
.m-bar i.in { background: #5aa05a; } .m-bar i.out { background: #c0604a; }
.money-table tfoot th, .money-table tfoot td { border-top: 1px solid currentColor; padding-top: 6px; font-weight: 700; }
/* A picture file in place of a drawing fills the drawing's box without stretching. */
img.art { object-fit: contain; }
.toast { position: fixed; z-index: 2600; left: 50%; top: 14px; transform: translate(-50%, -16px); opacity: 0; width: min(calc(100vw - 32px), 420px); padding: 10px 14px; border-radius: 12px; border: 1px solid var(--brass); background: var(--panel); color: var(--fg); box-shadow: 0 10px 30px rgba(0,0,0,0.35); display: grid; gap: 2px; font-size: 0.9rem; cursor: pointer; transition: opacity 0.3s, transform 0.3s; }
.toast.in { opacity: 1; transform: translate(-50%, 0); }
.toast-copy span { font-family: var(--f-mono); font-size: 0.8rem; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.toast-hint { color: var(--muted); }
.toast b { color: var(--brass); font-family: var(--f-display); font-weight: 400; font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
.ing-row .ing-art { cursor: pointer; }
.place-today { display: block; font-size: 0.85rem; font-style: italic; color: var(--brass); margin-top: 2px; }
.slot-actions .work-word { font-weight: 400; opacity: 0.8; }
.heat-gauge { position: relative; height: 40px; border-radius: 8px; overflow: hidden; border: 1px solid var(--brass-dim);
  background: linear-gradient(90deg, #2a3a4a, #6a4a2a 45%, #c8602a 75%, #f0c050); }
.heat-gauge .work-zone { position: absolute; top: 0; bottom: 0; background: rgba(130, 212, 158, 0.35); border-left: 2px solid #82d49e; border-right: 2px solid #82d49e; }
.heat-gauge .heat-zone { display: flex; align-items: flex-end; justify-content: center; transition: background 0.15s; }
.heat-gauge .heat-zone span { font-size: 0.7rem; color: #e9e1cd; text-shadow: 0 1px 2px #000; padding-bottom: 1px; }
.heat-gauge .heat-zone.lit { background: rgba(130, 212, 158, 0.6); }
.heat-by-hand { margin: 0; align-self: center; }
.hand-areas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.hand-areas li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.hand-areas .hand-name { font-family: var(--f-display); font-size: 1.05rem; }
.hand-areas .note { grid-column: 2; margin: 0; }
@media (max-width: 520px) { .hand-areas li { grid-template-columns: 1fr; } .hand-areas .note { grid-column: 1; } }
.heat-gauge .flame { position: absolute; top: 2px; width: 26px; height: 34px; margin-left: -13px; filter: drop-shadow(0 0 4px rgba(255, 200, 80, 0.8)); }
.tend-time { height: 4px; border-radius: 2px; background: var(--brass-dim); margin: 10px 0 4px; overflow: hidden; }
.tend-time i { display: block; height: 100%; background: var(--brass); width: 0; }
.tend-pot { display: flex; justify-content: center; }
.tend-pot svg { width: min(100%, 230px); height: auto; touch-action: none; cursor: grab; border-radius: 50%; }
.tend-pot svg:focus-visible { outline: 3px solid var(--brass); }
.tend-count { text-align: center; margin: 4px 0 0; }
.weed-bed { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 14px 10px; border-radius: 8px; background: #5a4028; border: 2px solid #3a2616; margin: 12px 0; }
.weed-bed .weed { width: 64px; height: 72px; padding: 0; border-radius: 8px; border: 1px solid transparent; background: rgba(0,0,0,0.15); touch-action: none; user-select: none; -webkit-user-select: none; }
.weed-bed .weed:focus-visible { outline: 3px solid var(--brass); }
.weed-bed .weed.held { border-color: var(--brass); background: rgba(216,170,79,0.18); }
.weed-bed .weed:disabled { opacity: 1; cursor: default; }
.weed-bed .weed svg { width: 100%; height: 100%; }
.pull-track { cursor: default; }
.pull-track .work-zone { left: auto; transform: none; }
.pull-track .pull-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(233, 225, 205, 0.55); border-right: 3px solid var(--fg); }
body.dragging [data-drop="kedel"] { outline: 1px dashed var(--brass-dim); outline-offset: 2px; border-radius: 12px; }
[data-drop="kedel"].drop-over { outline: 2px solid var(--brass) !important; background: rgba(216,170,79,0.10); }
.trip-map { border-radius: 6px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 10px; }
.map-svg { display: block; width: 100%; height: auto; }
.map-spark { animation: spark 0.9s ease-out both; }
@keyframes spark { 0% { r: 2; opacity: 1; } 60% { r: 7; opacity: 0.9; } 100% { r: 3; opacity: 0.55; } }
.trip-finds { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; }
.trip-finds li { width: 44px; height: 44px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; animation: pop 0.35s ease-out both; }
.trip-finds svg { width: 30px; height: 30px; }
@keyframes pop { 0% { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: none; } }
.trip-skip { font-size: 0.9rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trip-items { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.trip-items li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.trip-name { font-family: var(--f-display); font-size: 1.08rem; }
.trip-n { font-variant-numeric: tabular-nums; }
.trip-items .note { margin-left: auto; }
dialog.parchment { background: none; border: none; padding: 0; margin: auto; max-width: none; max-height: none; overflow: visible; color: #3a2a16; cursor: pointer; filter: drop-shadow(0 18px 28px rgba(0,0,0,0.6)); }
dialog.parchment::backdrop { background: rgba(4,7,8,0.78); }
dialog.parchment[open] { animation: sheet-in 0.5s ease-out both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-30px) rotate(-6deg) scale(0.95); } }
.sheet { --tilt: -2deg; width: min(calc(100vw - 48px), 460px); min-height: 300px; box-sizing: border-box; padding: 46px 44px 52px; transform: rotate(var(--tilt));
  background:
    radial-gradient(circle at 78% 72%, transparent 0 17px, rgba(110,70,25,0.22) 19px, rgba(110,70,25,0.08) 23px, transparent 26px),
    radial-gradient(ellipse at 22% 18%, rgba(255,248,225,0.7), transparent 55%),
    radial-gradient(ellipse at 85% 95%, rgba(90,55,20,0.35), transparent 50%),
    radial-gradient(ellipse at 5% 80%, rgba(90,55,20,0.25), transparent 40%),
    linear-gradient(165deg, #eadbb2, #dcc28c 55%, #c8a865);
  display: grid; align-content: center; gap: 18px; text-align: center; }
.sheet p { margin: 0; }
.sheet-about { font-family: 'IM Fell English SC', var(--f-display); font-size: 1.05rem; color: #6b4a1e; letter-spacing: 0.02em; }
.sheet-line { font-family: 'IM Fell English', var(--f-book); font-style: italic; font-size: 1.65rem; line-height: 1.3; color: #33240f; }
.sheet-line::before { content: '»'; } .sheet-line::after { content: '«'; }
.sheet-from { margin: 0 auto 22px; max-width: 460px; text-align: center; color: #e9e1cd; font-family: var(--f-book); font-style: italic; font-size: 1.05rem; }
.sheet-hint { margin: 22px 0 0; text-align: center; color: rgba(233,225,205,0.65); font-size: 0.85rem; font-family: var(--f-body); }
@media (prefers-reduced-motion: reduce) { dialog.parchment[open] { animation: none; } }
dialog.scroll { background: none; border: none; padding: 0; margin: auto; max-width: none; max-height: none; overflow: visible; width: min(calc(100vw - 56px), 500px); color: #33240f; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.65)); }
dialog.scroll::backdrop { background: rgba(4,7,8,0.72); }
dialog.scroll.with-figure::backdrop { background: transparent; }
dialog.figure-stage { background: none; border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; overflow: hidden; transition: opacity 0.45s; }
dialog.figure-stage::backdrop { background: rgba(4,7,8,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity 0.45s; }
dialog.figure-stage[open] { animation: stage-in 0.5s ease-out both; }
dialog.figure-stage.leaving, dialog.figure-stage.leaving::backdrop { opacity: 0; }
@keyframes stage-in { from { opacity: 0; } }
.figure-stand { position: absolute; bottom: 0; right: calc(50% + 240px); height: min(76vh, 540px, calc((50vw - 250px) * 1.3)); aspect-ratio: 200 / 260; filter: drop-shadow(0 18px 36px rgba(0,0,0,0.6)); animation: figure-in 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.figure-stand svg { width: 100%; height: 100%; display: block; }
@keyframes figure-in { from { opacity: 0; transform: translateY(60px); } }
/* Without room beside the scroll, the figure stands behind it, in the middle. */
/* Without room beside the scroll, the figure stands below it, and the scroll goes to the top. */
@media (max-width: 1100px) { .figure-stand { right: auto; left: 50%; translate: -50% 0; height: min(50vh, 440px); } dialog.scroll.with-figure { margin-top: max(24px, env(safe-area-inset-top, 0px)); } }
.figure-stand[data-mood] svg { animation: mood-in 0.35s ease-out; }
.figure-stand[data-mood="rasende"] svg { animation: mood-in 0.35s ease-out, rage 0.12s linear 0.35s 6; }
@keyframes mood-in { from { opacity: 0.4; } }
@keyframes rage { 25% { transform: translateX(-3px) rotate(-0.6deg); } 75% { transform: translateX(3px) rotate(0.6deg); } }
@media (prefers-reduced-motion: reduce) { dialog.figure-stage[open], .figure-stand, .figure-stand svg { animation: none !important; } }
.id-figure { width: 96px; height: 96px; margin: 0 auto 10px; border-radius: 50%; overflow: hidden; border: 2px solid var(--brass-dim); background: var(--panel-2); }
.id-figure svg { width: 100%; height: 100%; display: block; }
.id-figure.dead { border-color: var(--muted); }
.btn-face { display: inline-block; width: 22px; height: 22px; margin: -4px 6px -6px -4px; border-radius: 50%; overflow: hidden; vertical-align: middle; background: var(--panel); }
.btn-face svg { width: 100%; height: 100%; display: block; }
dialog.scroll[open] { animation: scroll-fly 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.1) both; }
@keyframes scroll-fly { from { opacity: 0; transform: translateY(-70vh) rotate(-10deg) scale(0.7); } }
.scroll-rod { height: 22px; margin: 0 -14px; border-radius: 11px; position: relative; z-index: 1;
  background: linear-gradient(180deg, #8a5a2b 0%, #c08a4a 30%, #6b4120 70%, #4a2c14 100%); box-shadow: 0 3px 6px rgba(0,0,0,0.5); }
.scroll-rod::before, .scroll-rod::after { content: ''; position: absolute; top: -4px; width: 14px; height: 30px; border-radius: 6px; background: linear-gradient(180deg, #d8aa4f, #8a6a2a); }
.scroll-rod::before { left: -10px; } .scroll-rod::after { right: -10px; }
/* The paper scrolls on its own on a small screen, and the page behind it stays put. */
.scroll-paper { overflow: hidden; margin: -6px 0; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  background: radial-gradient(ellipse at 20% 10%, rgba(255,248,225,0.6), transparent 55%), radial-gradient(ellipse at 90% 90%, rgba(110,70,25,0.25), transparent 50%),
    linear-gradient(90deg, #cdb07a 0%, #ecdcb4 8%, #efe2bf 50%, #ecdcb4 92%, #cdb07a 100%); }
dialog.scroll[open] .scroll-paper { animation: scroll-unroll 0.7s ease-out 0.35s both; }
@keyframes scroll-unroll { from { max-height: 0; } to { max-height: calc(100dvh - 140px); } }
.scroll-text { padding: 26px 30px 22px; display: grid; gap: 10px; }
.scroll-text h2 { margin: 0; font-family: var(--f-display); color: #5a3a12; font-size: 1.45rem; text-align: center; }
dialog.scroll .scroll-body { font-family: var(--f-book); font-size: 1.12rem; line-height: 1.45; }
dialog.scroll .scroll-body p { margin: 0 0 8px; }
dialog.scroll .scroll-body .end-stats dt { color: #6b5a44; } dialog.scroll .scroll-body .row { display: flex; }
dialog.scroll .scroll-body blockquote { margin: 6px 0 12px; padding: 4px 14px; border-left: 3px solid #8a6a2a; font-style: italic; font-family: 'IM Fell English', var(--f-book); font-size: 1.15rem; color: #3a2a12; }
dialog.scroll .scroll-body .note { color: #6b5a44; font-family: var(--f-body); font-size: 0.92rem; }
.scroll-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.scroll-btns .scroll-ok { margin-top: 0; }
dialog.welcome { width: min(calc(100vw - 56px), 560px); }
.scroll-ok { justify-self: center; margin-top: 6px; padding: 7px 26px; border: 1px solid #8a6a2a; border-radius: 4px; background: rgba(138,106,42,0.15); color: #4a2c14; font-family: var(--f-display); font-size: 1.05rem; cursor: pointer; }
.scroll-ok:hover { background: rgba(138,106,42,0.3); }
@media (prefers-reduced-motion: reduce) { dialog.scroll[open], dialog.scroll[open] .scroll-paper { animation: none; } }
.found-page { margin: 0 0 10px; padding: 10px 14px; background: #ece2c8; color: #2b2218; border-radius: 3px 8px 8px 3px; box-shadow: inset 6px 0 10px -8px rgba(0,0,0,0.5); font-family: var(--f-book); }
.found-page b { font-family: var(--f-display); color: #5a3a12; font-size: 1.1rem; font-weight: 400; }
.found-page p { margin: 4px 0 0; }
.found-page .riddle-line { font-size: 1.1rem; }
.trip-notes { margin: 0 0 10px; padding-left: 1.1em; display: grid; gap: 6px; }
.status { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; min-width: 0; }
.stat { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 0.92rem; white-space: nowrap; }
.stat b { color: var(--fg); font-weight: 700; }
button.stat { font: inherit; cursor: pointer; text-align: left; }
button.stat:hover { border-color: var(--brass-dim); }
.stat > svg:not(.clock) { width: 18px; height: 18px; flex: none; }
.stat .two-line { display: grid; line-height: 1.15; }
.stat .two-line small { font-size: 0.75rem; }
.stat.gold { color: var(--brass); } .stat.gold b { color: var(--brass); font-family: var(--f-mono); font-weight: 500; }
.stat.hp { color: var(--bad); } .stat.hp b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.stat.hp b:not(.hp-low) { color: var(--fg); }
@media (max-width: 380px) { .stat.hp > svg { display: none; } .stat.hp b { font-size: 0.85rem; } }
.tip .tip-bar { display: block; height: 8px; margin: 6px 0 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.tip .tip-bar i { display: block; height: 100%; background: var(--good); border-radius: 4px; }
.tip .tip-bar i.mid { background: var(--brass); } .tip .tip-bar i.low { background: var(--bad); }
.stat.flag { color: var(--fg); font-weight: 500; }
.stat.warn { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); }
@media (max-width: 640px) {
  /* Day, weather, gold and health on one row; what today brings on a row under them. */
  .status { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.6fr) minmax(0, 0.85fr) minmax(0, 1.45fr); gap: 6px; }
  .stat { justify-content: center; height: 40px; padding: 0 4px; gap: 5px; min-width: 0; }
  .stat .two-line small { display: none; }
  .stat.flag { order: 1; grid-column: 1 / -1; white-space: normal; height: auto; min-height: 36px; padding: 6px 10px; }
}
@media (max-width: 360px) {
  .stat { font-size: 0.85rem; gap: 3px; }
  .stat > svg:not(.clock), .stat.day svg { width: 15px; height: 15px; }
}
.clock { width: 30px; height: 30px; flex: none; margin: -4px 0; }
.clock .face { fill: var(--panel-2); stroke: var(--line); stroke-width: 1; }
.clock .ticks path { stroke: var(--muted); stroke-width: 1; stroke-linecap: round; }
.clock .hand { stroke: var(--fg); stroke-linecap: round; }
.clock .hand.hour { stroke-width: 2.2; } .clock .hand.min { stroke-width: 1.2; opacity: 0.7; }
.clock.night .face { fill: #0b1012; } .clock.night .hand { stroke: var(--muted); }
.stat svg { display: block; }

dialog.help-dialog { width: min(calc(100vw - 32px), 760px); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; }
/* While a box is open over the game, the page behind it does not scroll. */
html:has(dialog[open]) { overflow: hidden; }
.help-dialog h2 { margin: 0 0 8px; }
/* Settings (the cog at the top): parts under each other, and the code to move a game with, big enough to read across
   a table. */
dialog.settings-dialog { width: min(calc(100vw - 32px), 460px); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; }
.settings-dialog .set-part { padding: 12px 0; border-top: 1px solid var(--line); }
.settings-dialog .set-part:first-of-type { border-top: none; padding-top: 0; }
.settings-dialog h3 { margin: 0 0 6px; }
.settings-dialog .set-part .row { margin-top: 10px; }
.set-check { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.set-check input { width: 20px; height: 20px; accent-color: var(--brass); margin: 0; }
.set-range { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.set-range input { flex: 1; accent-color: var(--brass); }
.set-range.off { opacity: 0.45; }
.house-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.cloud-code { margin-top: 12px; padding: 12px; border: 1px dashed var(--brass-dim); border-radius: 8px; background: var(--panel-2); text-align: center; }
.cloud-code .note { margin: 0; }
.confirm .cloud-big { display: block; margin: 6px auto; padding: 4px 6px 4px calc(6px + 0.08em); font-family: var(--f-mono); font-size: clamp(1.15rem, 6vw, 1.6rem); font-weight: 600; letter-spacing: 0.08em; white-space: nowrap; color: var(--brass); background: none; border: 1px solid transparent; border-radius: 8px; cursor: copy; }
.confirm .cloud-big:hover { border-color: var(--brass-dim); }
.cloud-code .cloud-copied { min-height: 1.4em; color: var(--good); }
.cloud-fetch { display: flex; gap: 8px; }
.cloud-fetch input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 8px; padding: 8px 12px; font-family: var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.cloud-fetch .btn { padding: 8px 18px; }
#cloud-got { margin-top: 12px; }
/* Tilbagemelding: the kind as three choices in a row, and the name and message fields as the page's other inputs. */
.fb-kinds { border: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.fb-kinds legend { padding: 0; margin-bottom: 4px; }
.fb-kinds label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.fb-field { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 10px; background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 8px; padding: 8px 12px; font: inherit; }
textarea.fb-field { resize: vertical; min-height: 7em; }
.share-menu { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.share-menu .btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 14px; }
.share-menu .btn small { font-weight: 400; opacity: 0.8; }
#link-form { margin-bottom: 12px; }
.join-form { display: flex; flex-wrap: wrap; gap: 8px; }
.join-form input { flex: 1 1 100%; min-width: 0; background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 8px; padding: 8px 12px; }
#join-code { font-family: var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; }
#join-got { margin-top: 12px; }
.games { list-style: none; margin: 0; padding: 0; }
.games li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.games li:first-child { border-top: 0; }
.games .game-what { flex: 1; min-width: 0; }
.games .game-what small { display: block; color: var(--muted, inherit); opacity: 0.8; }
.cloud-msg.bad { color: var(--bad); font-weight: 700; }
.confirm .cloud-msg:empty { display: none; }
.confirm .cloud-msg { color: var(--brass); margin: 0 0 8px; }
.help-dialog ul { margin: 0 0 12px; padding-left: 1.2em; display: grid; gap: 6px; color: var(--fg); }

/* The pages: a menu that stays at the top, and one page at a time under it. */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 11; background: var(--bg); }
.views { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; display: flex; align-items: stretch; gap: 2px; padding: 0 2px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
/* The clock rides in the menu, so it is always in sight. */
.nav-clock { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 4px 6px 4px 12px; background: none; border: 0; cursor: pointer; color: var(--fg); }
.nav-clock .clock { margin: 0; width: 32px; height: 32px; }
.clock-text { display: grid; line-height: 1.15; text-align: left; }
.clock-text b { font-family: var(--f-book); font-style: italic; font-weight: 500; font-size: 0.95rem; white-space: nowrap; }
.sun-clock { color: var(--muted); }
.installed .brand .home, .installed .apps-link { display: none; }
@media (max-width: 640px) { .nav-clock .sun-clock { width: 26px; height: 26px; } }
.clock-text small { font-size: 0.75rem; color: var(--muted); }
.view-btn { position: relative; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 12px 14px 11px; font-family: var(--f-display); font-size: 1.1rem; color: var(--muted); cursor: pointer; display: inline-flex; justify-content: center; align-items: center; gap: 7px; white-space: nowrap; min-width: 0; }
.view-btn:hover { color: var(--fg); }
.view-btn[aria-current="page"] { color: var(--brass); border-bottom-color: var(--brass); }
.view-btn .badge { font-family: var(--f-body); font-weight: 700; font-size: 0.72rem; min-width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; background: var(--brass); color: var(--ink); border-radius: 10px; padding: 0 5px; }
.view-icon, .view-more { display: none; }
.more-menu { display: grid; gap: 6px; min-width: 160px; }
.more-menu .btn { text-align: left; padding: 10px 14px; font-family: var(--f-display); font-size: 1.05rem; }
@media (max-width: 900px) and (min-width: 641px) { .view-btn { padding-inline: 9px; font-size: 1rem; } .clock-text { display: none; } }
/* On a phone the menu is a bar at the bottom, in reach of the thumb: four pages, Mere for the rest, and the clock. */
@media (max-width: 640px) {
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .views { position: fixed; top: auto; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 4px 4px max(8px, env(safe-area-inset-bottom, 0px)); background: var(--panel); border-bottom: 0; border-top: 1px solid var(--line); }
  .view-btn { flex-direction: column; gap: 3px; padding: 6px 0; min-height: 54px; border-bottom: 0; margin: 0; font-family: var(--f-body); font-size: 0.72rem; }
  .view-btn[aria-current="page"] { font-weight: 700; }
  .view-btn.in-more { display: none; }
  .view-more { display: inline-flex; }
  .view-icon { display: block; width: 22px; height: 22px; }
  .view-btn .badge { position: absolute; top: 3px; left: calc(50% + 4px); }
  .nav-clock { justify-content: center; margin: 0; padding: 0; }
  .clock-text { display: none; }
}
.news { margin: 0; display: flex; align-items: baseline; gap: 12px; padding: 2px 4px; color: color-mix(in srgb, var(--fg) 85%, var(--muted)); font-size: 0.97rem; }
.news::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brass); transform: translateY(-1px); }
.news:empty { display: none; }
.view { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.two { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .two { grid-template-columns: minmax(0, 1fr) 400px; }
  .two.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* At the cauldron the store comes first, to take from, and the cauldron beside it. */
  #view-kedel .two { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); }
  #view-kedel #lager { order: -1; }
}
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--brass); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px 22px; min-width: 0; }
@media (max-width: 520px) { .panel { padding: 16px 16px 18px; } }
h2 { font-family: var(--f-display); font-weight: 400; color: var(--brass); font-size: 1.5rem; margin: 0 0 12px; letter-spacing: 0.02em; }
/* A heading with a small link to the book beside it. */
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin: 0 0 12px; }
.panel-head h2 { margin: 0; }
.panel-link { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.panel-link:hover { color: var(--brass); }
h3 { font-family: var(--f-display); font-weight: 400; color: var(--fg); font-size: 1.15rem; margin: 18px 0 8px; letter-spacing: 0.03em; }
.note { color: var(--muted); font-size: 0.9rem; margin: 6px 0 0; }

/* Buttons */
.btn { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 13px; cursor: pointer; line-height: 1.2; transition: border-color .15s, background .15s; }
.btn:hover:not(:disabled) { border-color: var(--brass-dim); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn[aria-pressed="true"] { background: var(--brass-dim); border-color: var(--brass); color: var(--fg); }
.btn-primary { background: var(--brass); color: var(--ink); border-color: var(--brass); font-weight: 700; }
.btn-primary:hover:not(:disabled) { background: #e6bb62; }
.btn-small { padding: 6px 10px; min-height: 34px; font-size: 0.88rem; }
.btn-ghost { background: transparent; }
.btn-danger { border-color: #6b3434; }

/* Places */
.world-head .dry-note { order: 3; flex-basis: 100%; margin: 0; color: var(--brass); font-style: italic; }
.world-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; margin-bottom: 12px; }
.world-head h2 { margin: 0; }
.hours { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hours .note { margin: 0; }
.hour-marks { display: inline-flex; gap: 3px; }
.hour-marks i { width: 12px; height: 9px; border-radius: 2px; background: var(--panel-2); border: 1px solid var(--line); }
.hour-marks i.on { background: var(--brass); border-color: var(--brass); }
.hour-marks i.half { background: linear-gradient(90deg, var(--brass) 50%, var(--panel-2) 50%); border-color: var(--brass-dim); }
.hour-marks i:nth-child(4n):not(:last-child) { margin-right: 4px; }
.places { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-auto-rows: 1fr; }
.place { text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row; align-content: start; column-gap: 12px; row-gap: 4px; padding: 18px 0 16px; min-height: 84px; overflow: hidden; border-radius: 14px; background: var(--panel-2); }
.place > :not(.place-side) { margin-left: 16px; grid-column: 1; justify-self: start; }
/* A little map of the place to the right, with the day's note under it, so every card keeps its size. */
.place-side { grid-column: 2; grid-row: 1 / span 3; align-self: start; width: 120px; margin-right: 14px; display: grid; gap: 4px; }
.place-map { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.place-side .place-today { font-size: 0.75rem; line-height: 1.25; margin: 0; }
.place-go { align-self: flex-start; margin-top: 10px; padding: 7px 14px; border: 1px solid var(--brass); border-radius: 8px; color: var(--brass); font-weight: 700; font-size: 0.9rem; }
.place:hover:not(:disabled) .place-go { background: color-mix(in srgb, var(--brass) 12%, transparent); }
.place:disabled .place-go { border-color: var(--line); color: var(--muted); }
.place:disabled .place-map { filter: grayscale(0.6); }
.place-name { font-family: var(--f-display); font-size: 1.35rem; }
.place-desc { font-size: 0.92rem; color: var(--muted); }
.place.moon { border-color: #8ea0c9; }
.place.moon .place-desc { color: #c9d6f5; }
.day-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.well-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

.market { list-style: none; margin: 0; padding: 0; display: grid; }
.market li { display: flex; align-items: center; gap: 10px; justify-content: space-between; font-size: 0.95rem; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.market li:last-child { border-bottom: 0; }
.tool-info { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted var(--brass-dim); text-underline-offset: 4px; }
.market li.dear .tool-info { color: var(--muted); }
.market li.dear > span:first-child, .market li.dear .price { color: var(--muted); }
.market li.owned { color: var(--good); }
.tool-shop { display: grid; gap: 4px 28px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tool-shop .tool-group { margin-top: 8px; }
.market .price { color: var(--brass); font-variant-numeric: tabular-nums; margin-left: auto; }

.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 0.95rem; }
.log li { color: var(--muted); display: flex; gap: 12px; align-items: baseline; }
.log li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--line); transform: translateY(-1px); }
.log li:first-child { color: var(--fg); }
.log li:first-child::before { background: var(--brass); }

/* Essence chips */
.ess-start { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ess-intro { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 4px; }
.ess-intro li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.ess-intro i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); display: inline-block; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.8rem; color: var(--muted); margin-bottom: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); display: inline-block; }
.chips { display: inline-flex; gap: 3px; }
.chip { --c: var(--muted); display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 5px; font-family: var(--f-mono); font-size: 0.8rem; border-radius: 5px; border: 1px solid var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); font-variant-numeric: tabular-nums; }
.chip.range { border-style: dashed; letter-spacing: -0.03em; }
/* A number never breaks over two lines, also when the screen is narrow and it is a range like 0–3. */
.chip { white-space: nowrap; flex: none; }
.chip.unknown { border-style: dashed; color: var(--muted); background: transparent; border-color: var(--line); }
button.chip { cursor: pointer; line-height: 1; }
button.chip:hover { background: color-mix(in srgb, var(--c) 28%, transparent); }
.tip-btn { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.tip-btn:hover { color: var(--fg); }
/* What a tap on an essence or on Aflæsning explains, under what was tapped. */
.tip { position: absolute; z-index: 2960; max-width: min(300px, calc(100vw - 32px)); padding: 9px 12px; background: var(--panel-2); border: 1px solid var(--brass-dim); border-radius: 5px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); font-size: 0.9rem; line-height: 1.4; color: var(--fg); }
.tip b { color: var(--brass); font-weight: 700; }
.c-ild { --c: var(--ild); } .c-vand { --c: var(--vand); } .c-jord { --c: var(--jord); } .c-luft { --c: var(--luft); } .c-uro { --c: var(--uro); }

/* Inventory */
.inv { list-style: none; margin: 0; padding: 0; display: grid; }
.inv > li { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); padding: 10px 0; }
.inv > li:first-child { border-top: 0; }
.ing-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "art name add" "art chips add"; align-items: center; gap: 5px 12px; }
/* The drawings sit on a small round dish, so they read on the slate and on the paper alike. */
.ing-art, .tool-art { grid-area: art; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--fg) 10%, var(--panel-2)), var(--panel-2) 70%); border: 1px solid var(--line); }
.ing-art svg { width: 38px; height: 38px; }
.ing-art svg[viewBox="0 0 24 32"] { width: 22px; height: 30px; }
.with-art { display: inline-flex; align-items: center; gap: 8px; }
.with-art svg { width: 28px; height: 28px; flex: none; }
h3.with-art { display: flex; } h3.with-art svg { width: 36px; height: 36px; }
.job .with-art svg { width: 100%; height: 100%; }
.job { align-items: center; min-height: 48px; }
.avatar.job-face { width: 36px; height: 36px; border-width: 1.5px; }
/* The town and the market, painted over their panels. */
/* The house: the drawing of it all, and the room you are in. */
.house-map svg, .room-pic svg { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.house-map { max-width: 520px; margin: 0 auto 12px; }
.room-pic { max-width: 640px; margin: 0 auto 8px; }
.h-label { font-family: var(--f-display); fill: #3a2814; pointer-events: none; }
.hroom { cursor: pointer; }
.hroom:hover > :first-child, .hroom:focus-visible > :first-child { filter: brightness(1.08); }
.hroom.here > :first-child { stroke: var(--brass); stroke-width: 2.6; }
.thing { fill: transparent; cursor: pointer; }
.thing:hover { fill: rgba(255, 240, 200, 0.12); }
.room-title small { font-size: 0.8rem; color: var(--muted); font-family: var(--f-body, inherit); margin-left: 6px; }
.room-note { font-style: italic; margin: 4px 0 8px; }
.room-things { margin: 4px 0 6px; }
.shelf-name.link { text-align: left; }
.v-tips { font-size: 0.85rem; color: var(--muted); }
.v-tips span { color: var(--fg); font-style: italic; }
.tips { margin: 0 0 10px; padding-left: 1.1em; font-style: italic; }
.tips small { font-style: normal; color: var(--muted); margin-left: 4px; }
.scene { display: block; width: 100%; height: clamp(120px, 26vw, 300px); margin: 0 0 16px; border-radius: 10px; border: 1px solid var(--line); }
.result h3.with-art svg, .page-title.with-art svg, .special .with-art > svg { width: 44px; height: 44px; }
.shelf-name.with-art svg { width: 34px; height: 34px; }
.slot-art { display: block; margin-bottom: 2px; }
.slot-art svg { width: 34px; height: 34px; display: block; }
.slot-art svg[viewBox="0 0 24 32"] { width: 24px; height: 32px; }
.tool-head { display: flex; align-items: center; gap: 12px; }
.tool-art { width: 56px; height: 56px; flex: none; }
.tool-art svg { width: 46px; height: 46px; }
.ing-row .chips { grid-area: chips; }
.ing-row .add { grid-area: add; }
.add-btns { display: flex; gap: 6px; }
.ing-name { grid-area: name; justify-self: start; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.ing-name span { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.ing-name:hover span { text-decoration-color: var(--brass-dim); }
.ing-name { font-size: 1.02rem; font-weight: 500; }
.ing-n { font-family: var(--f-body); font-size: 1.45rem; font-weight: 700; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; margin-left: 4px; white-space: nowrap; }
.ing-name.empty .ing-n { color: var(--muted); }
.ing-name small { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 400; font-size: 0.82rem; }
.ing-row .add .btn { min-height: 38px; padding-inline: 12px; border-color: var(--brass-dim); color: var(--brass); background: transparent; font-weight: 700; }
.ing-row .add .btn:hover:not(:disabled) { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 12%, transparent); }
.ing-name.empty { color: var(--muted); }
.ing-detail { margin-top: 10px; padding: 12px 14px; background: var(--panel-2); border-radius: 10px; display: grid; gap: 10px; }
.flavor { font-family: var(--f-book); font-style: italic; margin: 0; color: var(--fg); }
.tests { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px; }
.tests { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* A test as a card: the instrument with the ingredient in it, the properties it measures and how finely, and a bar
   for how able you are. */
.test-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px; text-align: left; font: inherit; color: var(--fg); background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.test-card:hover:not(:disabled) { border-color: var(--brass); }
.test-card:disabled { opacity: 0.55; cursor: default; }
.test-pic { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--fg) 10%, var(--panel)), var(--panel) 70%); border: 1px solid var(--line); }
.test-pic > .art { width: 42px; height: 42px; }
.test-pic.missing > .art { opacity: 0.3; filter: grayscale(1); }
.test-pic.missing { border-style: dashed; }
.test-ing { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); }
.test-ing .art { width: 20px; height: 20px; }
.test-body { display: grid; gap: 3px; min-width: 0; }
.test-name { font-family: var(--f-display); font-size: 1rem; line-height: 1.1; }
.test-tool { font-size: 0.72rem; color: var(--muted); }
.test-esss { display: flex; flex-wrap: wrap; gap: 3px 8px; }
.test-ess { display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; }
.tm-c { width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
.tm-dots { display: inline-flex; gap: 2px; }
.tm-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.tm-dots i.on { background: var(--c); }
.tm-ok { color: var(--good, #4a9a5a); font-size: 0.8rem; }
.tm-no { color: var(--bad, #c0504a); font-size: 0.8rem; }
.test-able { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 2px; }
.test-able i { display: block; height: 100%; background: var(--brass); }
.test-risk { font-size: 0.72rem; color: var(--ouch); }
.test-card.risky { border-color: color-mix(in srgb, var(--bad) 60%, var(--line)); }

/* Cauldron */
.stage { display: grid; justify-items: center; }
canvas#cauldron { width: 100%; max-width: 380px; aspect-ratio: 6 / 5; height: auto; display: block; }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
@media (max-width: 520px) { .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.slot { border: 1.5px dashed var(--line); border-radius: 12px; padding: 10px; min-height: 80px; display: flex; flex-direction: column; gap: 6px; justify-content: space-between; min-width: 0; }
.slot.filled { border-style: solid; border-color: var(--brass-dim); background: color-mix(in srgb, var(--brass) 8%, var(--panel-2)); }
.slot-name { font-size: 0.98rem; font-weight: 500; overflow-wrap: anywhere; }
.slot-empty { color: var(--muted); font-size: 0.85rem; margin: auto; text-align: center; }
.slot { position: relative; }
.slot-no { position: absolute; top: 6px; right: 8px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; background: var(--brass); color: var(--ink); }
.slot.slot-open { cursor: pointer; background: none; font: inherit; color: inherit; width: 100%; }
.slot.slot-open:hover { border-color: var(--brass-dim); background: color-mix(in srgb, var(--brass) 6%, transparent); }
#lager { scroll-margin-top: 12px; }
@media (min-width: 641px) { #lager { scroll-margin-top: 70px; } }
#lager.flash { animation: flash 1.2s ease-out; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px var(--brass); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { #lager.flash { animation: none; outline: 3px solid var(--brass); } }
.slot.locked { opacity: 0.5; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.slot-actions { display: flex; gap: 4px; }
.controls { display: grid; gap: 14px; margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ctrl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ctrl-label { color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
/* Heat and stirring: one control each, with the choice filled in brass. */
.seg-join { display: flex; flex-wrap: nowrap; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.seg-join .btn { flex: 1; min-height: 42px; border: 0; border-radius: 9px; background: transparent; font-size: 0.95rem; white-space: nowrap; }
.seg-join .btn:hover:not(:disabled) { background: var(--panel-2); }
.seg-join .btn[aria-pressed="true"], .seg-join .btn[aria-pressed="true"]:hover { background: var(--brass); color: var(--ink); font-weight: 700; }
.fail-note { margin: 10px 0 0; }
.again-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; }
.fail-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border: 1px dashed var(--brass); border-radius: 10px; background: color-mix(in srgb, var(--brass) 10%, transparent); }
.fail-cta .btn { flex: none; }
.brew-row { display: flex; gap: 10px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.brew-row .btn-primary { min-height: 52px; padding: 10px 30px; font-size: 1.3rem; font-family: var(--f-display); font-weight: 400; letter-spacing: 0.04em; border-radius: 12px; }
.brew-go, .brew-hand { display: inline-flex; align-items: center; gap: 8px; }
.brew-go .brew-icon { width: 28px; height: 28px; flex: none; }
.brew-hand { min-height: 52px; padding: 8px 16px; border-radius: 12px; }
.brew-hand .brew-icon { width: 22px; height: 22px; flex: none; }
.brew-row .btn-primary small { font-family: var(--f-body); font-size: 0.8rem; opacity: 0.75; }

/* Result */
.result { border-left: 3px solid var(--brass-dim); padding: 4px 0 4px 14px; display: grid; gap: 6px; }
.result.good { border-left-color: var(--good); }
.result.bad { border-left-color: var(--bad); }
.result h3 { margin: 0; font-size: 1.35rem; }
.result.good h3 { color: var(--good); }
.result.bad h3 { color: var(--bad); }
.result p { margin: 0; }
.brewing { display: grid; gap: 12px; }
.brew-bar { height: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.brew-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brass-dim), var(--brass)); animation: brew-fill linear forwards; }
@keyframes brew-fill { to { width: 100%; } }
.brew-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 5.5em; font-family: var(--f-book); font-size: 1.1rem; }
.brew-lines li { animation: line-in 0.5s ease-out both; }
@keyframes line-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.brew-bar.full i { width: 100%; animation: none; }
.pot-out { margin: 0; }
.brewing.done .btn { justify-self: start; }
.brewing .link { justify-self: start; font-size: 0.9rem; }
.reaction { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; background: var(--panel-2); border-radius: 5px; }
.r-term { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.r-name { font-family: var(--f-display); font-size: 1.02rem; }
.r-name small { font-family: var(--f-body); font-size: 0.75rem; color: var(--muted); }
.r-proc { font-size: 0.85rem; color: var(--muted); max-width: 15em; }
.r-op { font-size: 1.3rem; color: var(--brass); line-height: 1; }
.r-out .r-name { color: var(--brass); }
.hints { margin: 0; padding-left: 1.1em; display: grid; gap: 2px; }
.reading { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); }
/* The old healer's lessons: a strip of his parchment, the same by day and by night. */
.lesson { border: 0; background: #ecdcb8; color: #2b2218; display: grid; gap: 8px; box-shadow: inset 0 0 0 1px rgba(110,70,25,0.18); }
.lesson-head { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.lesson-head h2 { margin: 0; color: #6b4a1a; font-size: 1.15rem; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 18px; }
.steps li { position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-size: 0.95rem; color: #5d4c32; border: 1.5px solid #8a744e; }
.steps li + li::before { content: ""; position: absolute; right: calc(100% + 3px); top: 50%; width: 13px; height: 2px; background: #b9a57e; }
.steps li.done { background: #b9a57e; border-color: #b9a57e; color: #2b2218; }
.steps li.now { background: #6b4a1a; border-color: #6b4a1a; color: #f6ead0; }
.lesson h3 { margin: 4px 0 0; color: #2b2218; font-size: 1.3rem; }
.lesson p { margin: 0; max-width: 75ch; }
.lesson .task { font-family: var(--f-book); font-style: italic; font-size: 1.15rem; color: #3a2a16; }
.lesson .note { color: #6b5a44; }
.lesson .link { color: #6b4a1a; }
.lesson .btn { background: rgba(255,255,255,0.4); border-color: #b9a57e; color: #2b2218; }
.lesson .learned { padding: 10px 12px; border-radius: 8px; background: rgba(47,138,85,0.12); }
.lesson .learned b { color: #2f6b45; }
.lesson > .link, .lesson > .btn { justify-self: start; }
.new { font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--ink); background: var(--good); border-radius: 8px; padding: 0 6px; margin-left: 2px; }
.quality { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.quality b { font-family: var(--f-display); font-size: 1.1rem; }
.q-ringe { color: var(--bad); } .q-jævn { color: var(--muted); } .q-god { color: var(--fg); } .q-fin { color: var(--good); } .q-mesterlig { color: var(--brass); }
.shelf { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.shelf li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.shelf-name { font-family: var(--f-display); font-size: 1.02rem; }
.shelf .btn { margin-left: auto; }
.shelf-row { align-items: center; }
/* On Hjemme the potions stand in a wooden cabinet: a plank for each, the flasks on it and a brass plate with its name. */
.shelf.cabinet { gap: 0; margin: 6px 0 12px; padding: 12px 12px 4px; background: linear-gradient(90deg, #2a180c, #3a2414 20%, #3a2414 80%, #2a180c); border: 8px solid #6a4220; border-radius: 8px; box-shadow: inset 0 0 24px rgba(0,0,0,0.7), 0 4px 10px rgba(0,0,0,0.3); }
.shelf.cabinet li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bottles bottles" "name act" "lab lab"; align-items: center; gap: 0 10px; padding: 0; border-top: 0; margin-bottom: 10px; }
.cabinet .bottles { grid-area: bottles; align-items: flex-end; gap: 2px; min-height: 52px; padding: 4px 6px 9px; background: linear-gradient(to top, #4a2c12 0 3px, #9a6a36 3px 8px, #b8844a 8px 9px, transparent 9px); }
.cabinet .bottle { color: #e9d9b0; }
.cabinet .bottle svg { width: 30px; height: 40px; filter: drop-shadow(0 2px 1px rgba(0,0,0,0.6)); }
.cabinet .bottle.picked { background: rgba(201,162,90,0.25); }
.cabinet .shelf-name { grid-area: name; justify-self: start; max-width: calc(100% - 6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 4px 0 2px 6px; padding: 1px 8px; font-size: 0.86rem; color: #2a1a0c; background: linear-gradient(#e8c870, #b8903a); border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.shelf.cabinet .btn { grid-area: act; margin: 4px 0 2px; }
/* The brass plate, and beside it a small way to the potion's page in the book. */
.cabinet .shelf-label { grid-area: name; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cabinet .shelf-label .shelf-name { min-width: 0; }
.shelf-book { flex: none; display: inline-flex; padding: 3px; border: 0; background: none; color: #e8c870; cursor: pointer; }
.shelf-book svg { width: 18px; height: 18px; }
.shelf-book:hover { color: #fff1c8; }
.cabinet .flask-lab { grid-area: lab; margin: 2px 0 4px; padding: 6px 8px; border-radius: 6px; background: rgba(0,0,0,0.25); color: #e9d9b0; }
.cabinet .flask-lab .note { color: #cdbb94; }
.lab-tests { margin: 6px 0 4px; }
/* The drops left in the flask, as drops. */
.lab-drops { display: inline-flex; align-items: center; gap: 8px; }
.drops { display: inline-flex; gap: 4px; }
.drops i { width: 9px; height: 9px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); border: 1px solid #6aa5de; }
.drops i.on { background: #6aa5de; }
.test-ing svg.art { width: 20px; height: 20px; }

.bottles { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 200px; }
.bottle { display: inline-grid; justify-items: center; gap: 1px; padding: 3px 3px 1px; background: none; border: 1px solid transparent; border-radius: 5px; color: var(--muted); font: inherit; font-size: 0.7rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.bottle svg { width: 27px; height: 36px; display: block; }
.bottle:hover { border-color: var(--line); }
.bottle.picked { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 12%, transparent); color: var(--fg); }
.bottle.plain { cursor: default; padding-bottom: 3px; }
.try-btns { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.shelf .try-btns .btn { margin-left: 0; }
.finale { padding: 14px 16px; border: 1px solid var(--good); border-radius: 5px; background: color-mix(in srgb, var(--good) 9%, transparent); display: grid; gap: 8px; margin-bottom: 12px; }
.finale h3 { margin: 0; color: var(--good); font-size: 1.5rem; }
.finale p { margin: 0; }
.finale dl { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-variant-numeric: tabular-nums; }
.finale dl div { display: flex; gap: 6px; align-items: baseline; }
.finale dt { color: var(--muted); font-size: 0.88rem; }
.finale dd { margin: 0; font-weight: 700; }
.order .demand { justify-self: start; font-size: 0.85rem; padding: 3px 10px; border-radius: 10px; background: color-mix(in srgb, var(--brass) 12%, transparent); color: var(--fg); }
.order .demand-haster { background: color-mix(in srgb, var(--bad) 16%, transparent); }
.order .demand-fattig, .order .demand-taalmodig { background: color-mix(in srgb, var(--muted) 16%, transparent); }
.garden-weather { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: var(--panel-2); }
.weather-word { display: flex; align-items: center; gap: 10px; }
.weather-word svg, .stat.weather svg { width: 22px; height: 22px; flex: none; color: var(--vand); }
.beds { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .beds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .beds { grid-template-columns: 1fr; } }
.bed { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.bed-art { display: block; width: 100%; height: auto; }
.bed-body { padding: 10px 12px 12px; display: grid; gap: 6px; }
.bed-title { margin: 0; font-size: 1.05rem; }
.bed-body .note { margin: 0; }
.bed-buy { border-style: dashed; }
.bed-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.seed-btn { display: inline-flex; align-items: center; gap: 6px; }
.seed-btn svg { width: 22px; height: 22px; }
.seed-btn small { color: var(--muted); }
.garden-stores h3 { margin-top: 0; }
.hybrid-name { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
.hybrid-name input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 8px; padding: 6px 10px; font: inherit; }
.garden-stores .market li { flex-wrap: wrap; }
.pedlar { margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--brass-dim); border-radius: 12px; background: color-mix(in srgb, var(--brass) 7%, transparent); }
.pedlar h3 { margin-top: 0; align-items: center; gap: 12px; }
h3.with-art { align-items: center; gap: 12px; }
h3.with-art .avatar { width: 52px; height: 52px; }
h3.with-art .avatar svg { width: 100%; height: 100%; }
.pedlar .avatar, .pedlar h3.with-art .avatar svg { width: 64px; height: 64px; }
.market .price { white-space: nowrap; }
@media (max-width: 520px) { .pedlar .market li { flex-wrap: wrap; } .pedlar .market li > .with-art { flex: 1 1 100%; flex-wrap: wrap; } .pedlar .market li .price { margin-left: 36px; } }
@media (max-width: 640px) { .stat.weather .weather-label { display: none; } }
.order .sure { justify-self: start; font-size: 0.85rem; color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); border-radius: 999px; padding: 2px 10px; }
.discovery { margin-top: 8px; padding: 12px; border: 1px solid var(--brass); border-radius: 5px; background: color-mix(in srgb, var(--brass) 10%, transparent); display: grid; gap: 8px; }
.discovery label { font-family: var(--f-display); color: var(--brass); font-size: 1.1rem; }
.discovery .row { display: flex; gap: 8px; flex-wrap: wrap; }
.discovery input { flex: 1 1 180px; min-width: 0; background: var(--bg); border: 1px solid var(--line); color: var(--fg); border-radius: 4px; padding: 7px 10px; font: inherit; }


.orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.order .drop-zone { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 4px; border: 1.5px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 0.9rem; text-align: center; padding: 6px 10px; }
.order .drop-zone .dz-over { display: none; }
body.dragging .order .drop-zone { border-color: var(--brass-dim); color: var(--fg); }
.order.drop-over .drop-zone { border-style: solid; border-color: var(--brass); background: color-mix(in srgb, var(--brass) 14%, transparent); color: var(--fg); }
.order.drop-over .drop-zone .dz-idle { display: none; } .order.drop-over .drop-zone .dz-over { display: inline; }
.order { background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 8px; align-content: start; }
.order .refuse { justify-self: end; font-size: 0.85rem; color: var(--muted); }
.order .refuse-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.9rem; }
.order-head { display: flex; align-items: flex-start; gap: 12px; }
.avatar svg { width: 100%; height: 100%; display: block; }
.avatar.small { width: 40px; height: 40px; }
.avatar { overflow: hidden; flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 14%, var(--panel)); color: var(--fg); font-family: var(--f-display); font-size: 1.2rem; }
.order-who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.order .who { font-family: var(--f-display); font-size: 1.2rem; line-height: 1.2; }
.order .text { font-family: var(--f-book); font-style: italic; font-size: 1.05rem; line-height: 1.35; }
.order .need { font-size: 0.9rem; color: var(--muted); }
.order .wants { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--panel); }
.order .wants small { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.order .reward { flex: none; display: grid; justify-items: end; line-height: 1.1; color: var(--brass); font-variant-numeric: tabular-nums; }
.order .reward b { font-family: var(--f-mono); font-weight: 500; font-size: 1.05rem; }
.order .reward small { font-size: 0.75rem; color: var(--muted); }
.stocklist { display: flex; flex-wrap: wrap; gap: 6px; }
.town { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.town > div { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 14px 16px 16px; background: var(--panel-2); border-radius: 12px; }
.town > div > * { margin: 0; }
.town .market { align-self: stretch; }
.jobs { display: grid; gap: 6px; align-self: stretch; }
.job { display: flex; justify-content: space-between; gap: 10px; }
.job-terms { color: var(--muted); font-variant-numeric: tabular-nums; }
.job-terms b { color: var(--brass); font-weight: 500; }
.special { display: grid; gap: 6px; justify-items: start; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--brass); border-radius: 6px; background: rgba(216,170,79,0.07); }
.special p { margin: 0; }
.special.church-ask { border-color: #8a9a7a; background: rgba(138,154,122,0.08); }
.special.call { border-color: var(--bad); background: rgba(255,114,114,0.06); }
.special .row { display: flex; gap: 6px; }
.house-search { flex-wrap: wrap; margin-bottom: 10px; }
.apprentice { display: grid; gap: 6px; justify-items: start; }
.apprentice p { margin: 0; }
.soot { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.trial { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--bad); border-radius: 5px; color: var(--fg); background: rgba(255,114,114,0.08); }
.end-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 6px 16px; margin: 10px 0; }
.end-stats dt { font-size: 0.8rem; color: var(--muted); } .end-stats dd { margin: 0; font-weight: 700; }
/* The little shelf under Kunder, at the foot of the screen (above the menu on a phone). */
.mini-shelf { position: sticky; bottom: 8px; z-index: 5; display: grid; gap: 4px; margin: 12px 0; padding: 8px 10px; background: var(--panel); border: 1px solid var(--brass-dim); border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.mini-bottles { display: flex; flex-wrap: wrap; gap: 6px; }
.bottle.mini { position: relative; flex: none; padding: 2px; }
.bottle.mini svg { width: 30px; height: 40px; }
.bottle.mini b { position: absolute; right: -2px; bottom: -2px; min-width: 18px; padding: 0 4px; border-radius: 9px; background: var(--brass); color: #1a140c; font-size: 0.72rem; line-height: 18px; text-align: center; }
.mini-hint { font-size: 0.78rem; color: var(--muted); }
@media (max-width: 640px) { .mini-shelf { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } }
.drag, .bottle.drag { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.drag-ghost { position: fixed; z-index: 1000; width: 0; height: 0; pointer-events: none; }
.drag-bottle { position: absolute; left: -17px; top: -22px; width: 34px; height: 44px; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.6)); transform: rotate(-12deg); }
.drag-bottle svg, .drag-bottle .art { width: 100%; height: 100%; } .drag-bottle span, .drag-bottle b, .drag-bottle small { display: none; }
/* The name floats above the pointer: just over the bottle for a mouse, well above a finger. */
.drag-name { position: absolute; left: 0; bottom: 30px; transform: translateX(-50%); white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: var(--panel); color: var(--fg); border: 1px solid var(--brass); font-family: var(--f-display); font-size: 0.9rem; box-shadow: 0 4px 10px rgba(0,0,0,0.4); }
.drag-ghost.touch .drag-name { bottom: 64px; font-size: 1rem; }
.drag-name:empty { display: none; }
body.dragging, body.dragging * { cursor: grabbing !important; }
body.dragging .order { outline: 1px dashed var(--brass-dim); outline-offset: 2px; }
.order.drop-over { outline: 2px solid var(--brass) !important; background: rgba(216,170,79,0.12); }
.flask-head { margin: 16px 0 4px; }
.flask-name { cursor: default; }
.slot.flask { border-color: var(--brass-dim); }
.order .angry { color: var(--bad); font-size: 0.86rem; }
.give-btns { align-items: center; }
.order-btns { display: inline-flex; gap: 6px; }
.give-btns .note { margin: 0 2px 0 0; }
.rep-bar i { background: var(--brass); }
/* Your name in town, over the customers: in words, with its bar. */
.rep-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 0 12px; }
.rep-head .rep-bar { max-width: 240px; }
.pill { border: 1px solid var(--line); border-radius: 12px; padding: 2px 10px; font-size: 0.88rem; }

.notes { list-style: none; margin: 0 0 6px; padding: 10px 12px; background: var(--panel-2); border-radius: 5px; display: grid; gap: 5px; font-family: var(--f-book); font-size: 0.98rem; }
/* The book: a leather cover with the contents tooled in gold on the left, and the page on the right. */
.book { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: stretch; border-radius: 12px; background: linear-gradient(135deg, #4a2a18, #2e1a0e); padding: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.book-index { display: flex; flex-direction: column; gap: 14px; padding: 12px 12px 12px 6px; position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; }
.book-group { display: grid; gap: 2px; }
.book-group-label { font-family: var(--f-display); font-size: 0.8rem; letter-spacing: 0.08em; color: #c9a25a; padding: 0 8px 4px; border-bottom: 1px solid rgba(201,162,90,0.3); margin-bottom: 4px; }
.book-group-label small { font-family: var(--f-body); letter-spacing: 0; color: #a88a5a; float: right; }
.book-tab { display: flex; align-items: center; gap: 8px; text-align: left; background: transparent; border: 0; border-radius: 6px; padding: 4px 8px; color: #e8d6b0; font-family: var(--f-book); font-size: 1rem; cursor: pointer; min-height: 36px; }
.book-tab:hover { background: rgba(255,230,180,0.08); }
.book-tab .art { width: 26px; height: 26px; flex: none; }
.book-tab > span:not(.book-glyph) { flex: 1; min-width: 0; }
.book-glyph { width: 26px; flex: none; text-align: center; color: #c9a25a; font-size: 1.05rem; }
.book-n { font-family: var(--f-mono); font-size: 0.75rem; color: #c9a25a; }
.book-tab[aria-current="true"] { background: #ece2c8; color: #3a2410; box-shadow: 4px 0 0 #ece2c8; border-radius: 6px 0 0 6px; margin-right: -12px; padding-right: 20px; }
.book-tab[aria-current="true"] .book-glyph, .book-tab[aria-current="true"] .book-n { color: #7a5a2a; }
.book-page { position: relative; padding-bottom: 34px !important; }
.page-no { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-family: var(--f-book); font-style: italic; color: #8a7454; font-size: 0.9rem; }
@media (max-width: 720px) {
  .book { grid-template-columns: 1fr; padding: 8px 6px; width: calc(100vw - 16px); margin-left: calc(50% - 50vw + 8px); border-radius: 8px; box-shadow: none; }
  .book-index { position: static; flex-direction: row; gap: 10px; overflow-x: auto; max-height: none; padding: 4px 4px 10px; scroll-snap-type: x proximity; }
  .book-group { display: flex; align-items: center; gap: 4px; flex: none; }
  .book-group-label { display: none; }
  .book-group + .book-group { border-left: 1px solid rgba(201,162,90,0.35); padding-left: 10px; }
  .book-tab { flex-direction: column; gap: 2px; min-width: 76px; max-width: 96px; padding: 6px 4px; font-size: 0.8rem; text-align: center; line-height: 1.15; scroll-snap-align: start; }
  .book-tab > span:not(.book-glyph) { flex: none; }
  .book-tab[aria-current="true"] { margin: 0; padding-right: 4px; border-radius: 6px; box-shadow: none; }
}
.book-page { background: #ece2c8; color: #2b2218; border-radius: 4px 10px 10px 4px; padding: 18px 22px 22px; box-shadow: inset 8px 0 14px -10px rgba(0,0,0,0.45); min-height: 260px; font-family: var(--f-book); display: grid; gap: 8px; align-content: start; }
.book-page .page-title { font-family: var(--f-display); font-size: 1.6rem; margin: 0; color: #5a3a12; }
.book-page .page-sub { margin: 0; font-style: italic; }
.book-page .note, .book-page .empty-state { color: #6b5a44; }
.book-page .notes { background: transparent; padding: 0; color: #2b2218; }
.book-page .riddle li { color: #2b2218; }
.v-nums { grid-column: 1 / -1; }
.v-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.v-miss { flex-basis: 100%; color: #8a4a2a; }
.v-stock { grid-column: 1 / -1; font-size: 0.82rem; color: #5a4a34; display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; }
.v-stock .ok { color: #3c6a34; }
.v-stock .low { color: #a0402a; }
.v-stock b { margin-left: auto; font-weight: 600; }
.app-skill { display: grid; gap: 4px; width: 100%; max-width: 360px; }
.app-skill small b, .app-skill span small { font-weight: 400; color: var(--muted, #8a7a62); }
.app-cands { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 8px; }
.app-cand { display: grid; gap: 6px; justify-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.app-cand .app-story { margin: 0; }
.app-trait { margin: 0; font-size: 0.9rem; padding-left: 18px; position: relative; }
.app-trait::before { position: absolute; left: 0; font-weight: 700; }
.app-trait.good::before { content: '+'; color: #3c6a34; }
.app-trait.bad::before { content: '−'; color: #a0402a; }
.app-trait.fav::before { content: '♥'; color: #b05a7a; }
.app-story { font-style: italic; margin: 0 0 12px; color: var(--muted, #8a7a62); }
.app-who { margin: 0 0 4px; }
.app-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.app-head h3 { margin: 0; }
.app-face { width: 72px; height: 72px; flex: none; }
.app-face .portrait { width: 72px; height: 72px; }
.app-rank { margin: 2px 0 6px; font-family: var(--f-display); color: var(--brass, #c9a25a); }
.app-ranks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px; }
.app-ranks li { font-size: 0.68rem; padding: 2px 6px; border-radius: 10px; border: 1px solid var(--line); opacity: 0.55; }
.app-ranks li.got { opacity: 1; border-color: var(--brass-dim); }
.app-ranks li.now { background: var(--brass-dim); color: #fff; }
.app-mood i { background: linear-gradient(90deg, #8a4a6a, #c9a25a); }
.party-choices { display: grid; gap: 6px; margin-top: 10px; }
.app-up { display: grid; justify-items: center; gap: 4px; margin: 6px 0; }
.app-up .portrait { width: 84px; height: 84px; }
.app-up b { font-family: var(--f-display); color: #5a3a12; }
.app-hp i { background: linear-gradient(90deg, #a0402a, #5f8a3c); }
.app-drinks { align-items: center; flex-wrap: wrap; }
.app-day { display: grid; gap: 4px; margin: 6px 0; justify-items: start; }
.app-day p { margin: 0; }
.app-log { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.app-log small { color: var(--muted, #8a7a62); margin-right: 4px; }
#glass-dialog { background: transparent; border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; display: grid; place-items: center; overflow: hidden; pointer-events: auto; }
#glass-dialog:not([open]) { display: none; }
#glass-dialog[open] { grid-template-rows: auto auto; align-content: center; gap: 18px; }
.glass-map { width: min(calc(100vw - 32px), 460px); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.45); border: 2px solid #5a3a1c; }
.glass-map svg { display: block; width: 100%; height: auto; }
#glass-dialog::backdrop { background: rgba(30,20,10,0.18); }
#glass-dialog:focus { outline: none; }
.glass-float { will-change: transform; }
.glass { width: 72px; height: 96px; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35)); will-change: transform; }
.app-bar i { animation: none !important; transition: width 0.4s; }
.app-left { font-size: 1.05rem; }
.bed-choices { display: grid; gap: 8px; margin-top: 12px; }
.known-grid-wrap { display: grid; gap: 6px; margin: 4px 0 12px; }
.known-grid { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 4px; }
.kg-head { font-size: 0.75rem; color: var(--muted, #8a7a62); text-align: center; align-self: end; }
.kg-row { text-align: right; align-self: center; padding-right: 4px; }
.kg-cell { display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 58px; padding: 4px; border-radius: 6px; border: 1px solid var(--line); font: inherit; font-size: 0.78rem; text-align: center; line-height: 1.15; color: inherit; background: transparent; min-width: 0; }
.kg-cell b { font-weight: 600; overflow-wrap: anywhere; }
.kg-cell small { font-size: 0.7rem; opacity: 0.8; }
.kg-cell .art { width: 24px; height: 24px; }
.kg-pot { cursor: pointer; background: var(--panel); border-color: var(--brass-dim); }
.kg-pot:hover:not(:disabled) { border-color: var(--brass, #c9a25a); }
.kg-fail { color: #a0503a; border-style: dashed; }
.kg-none { color: var(--muted, #8a7a62); opacity: 0.6; border-style: dotted; }
.my-note-form { display: grid; gap: 6px; justify-items: start; padding: 10px 0 14px; border-bottom: 1px solid rgba(90,58,18,0.25); }
.my-note-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: #2b2218; background: #f6efdc; border: 1px solid rgba(90,58,18,0.35); border-radius: 6px; padding: 8px 10px; resize: vertical; }
.my-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.my-notes > li { padding: 10px 0; border-bottom: 1px dashed rgba(90,58,18,0.3); display: grid; gap: 6px; }
.my-notes > li > p { margin: 0; white-space: pre-wrap; }
.my-note-head { display: flex; justify-content: space-between; align-items: baseline; color: #6b5a44; }
.my-note-recipe .v-meta { align-self: flex-start; }
.my-note-hints li { padding: 0; border: 0; margin: 0 0 2px; }
.my-note-group { margin: 14px 0 0; }
.my-note-group small { font-family: var(--f-body); color: var(--muted); }
.note-fold { display: inline-flex; align-items: baseline; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-align: left; }
.note-fold .fold-mark { display: inline-block; width: 0.9em; font-family: var(--f-body); }
.my-note-hints { margin: 0; padding-left: 18px; list-style: disc; display: block; font-size: 0.9rem; color: #5a4a34; }
.my-note-recipe { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-family: var(--f-body); }
.book-page .tool-group { color: #7a5a2a; margin: 10px 0 4px; }
.essences { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.essence { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; padding: 10px 12px; background: rgba(255,255,255,0.35); border: 1px solid #c9b48a; border-left: 4px solid var(--c); border-radius: 6px; }
.essence .ess-mark { width: 14px; height: 14px; border-radius: 50%; background: var(--c); margin-top: 4px; box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }
.essence b { font-family: var(--f-display); font-size: 1.15rem; color: #5a3a12; }
.essence p { margin: 3px 0 0; }
.essence .ess-how { font-family: var(--f-body); font-size: 0.9rem; color: #3b3024; }
.essence .ess-how span { color: #7a5a2a; font-weight: 700; }
.essence.tool-card { --c: #b9a57e; }
.essence.tool-card.owned { --c: var(--brass); }
.essence .tag { font-size: 0.7rem; vertical-align: middle; }
.essence.bad-brew { --c: #8a9a7a; }
.essence.bad-brew.harmful { --c: #b0413e; }
.loose { border-top: 1px dashed #b9a57e; padding-top: 8px; }
.riddle-line { margin: 4px 0 0; font-style: italic; }
/* The ingredients page: icons to pick, and the potions each one makes, best first. */
.ing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; margin: 6px 0 14px; }
.ing-pick { display: grid; place-items: center; aspect-ratio: 1; padding: 4px; border-radius: 50%; border: 1px solid rgba(90,60,30,0.25); background: rgba(255,255,255,0.35); cursor: pointer; }
.ing-pick .art { width: 36px; height: 36px; }
.ing-pick[aria-pressed="true"] { background: #2b3a3c; border-color: #c9a25a; box-shadow: 0 0 0 2px #c9a25a; }
.ing-best { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ib-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(90,60,30,0.25); background: rgba(255,255,255,0.35); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.ib-top { background: rgba(201,162,90,0.25); border-color: #c9a25a; }
.ib-pot { display: grid; justify-items: center; flex: none; width: 48px; }
.ib-pot .art { width: 40px; height: 40px; }
.ib-top .ib-pot .art { width: 52px; height: 52px; }
.ib-pot small { font-size: 0.7rem; color: #7a5a2a; }
.ib-ings { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.ib-ing { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: #2b3a3c; }
.ib-ing .art { width: 28px; height: 28px; }
.ib-sel { box-shadow: 0 0 0 2px #c9a25a; }
.ib-crushed { outline: 1px dashed #e9e1cd; outline-offset: -3px; }
.ib-proc { flex: none; display: flex; align-items: center; gap: 4px; }
.variants { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.variant { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ings proc" "ings meta"; gap: 6px 14px; padding: 10px 12px; background: rgba(255,255,255,0.35); border: 1px solid #c9b48a; border-radius: 6px; font-family: var(--f-body); }
.v-ings { grid-area: ings; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.v-ing { display: grid; justify-items: center; gap: 1px; background: #2b3a3c; border-radius: 6px; padding: 4px 6px 3px; }
.v-ing svg { width: 30px; height: 30px; }
.v-ing small { color: #e9e1cd; font-size: 0.68rem; white-space: nowrap; }
.v-plus { color: #7a5a2a; font-weight: 700; }
.v-proc { grid-area: proc; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.v-heat { display: inline-flex; }
/* The cauldron's heat and stirring buttons: flames and arrows instead of words. */
.ctrl-icon .ctrl-icons { display: inline-flex; align-items: center; justify-content: center; gap: 0; line-height: 0; }
.ctrl-icon .ctrl-icons svg { width: 26px; height: 26px; margin: 0 -3px; }
.ctrl-icon .ctrl-icons svg.ctrl-stir { width: 30px; height: 30px; margin: 0; }
.ctrl-icon .ctrl-icons svg.ctrl-dist { width: 34px; height: 34px; margin: -4px 0; }
.q-picks { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.q-pick { border-color: var(--qc); }
.ctrl-icon .ctrl-extra { margin-left: 6px; font-size: 0.8rem; opacity: 0.8; }
.ctrl-icon[aria-pressed="true"] .ctrl-icons svg { filter: drop-shadow(0 0 1px rgba(255,255,255,0.7)); }
.v-heat svg { width: 16px; height: 16px; }
.v-stir { width: 22px; height: 22px; }
.v-dist { width: 26px; height: 26px; margin: -2px 0; }
.v-none { font-size: 0.75rem; color: #6b5a44; }
.v-meta { grid-area: meta; font-size: 0.8rem; color: #6b5a44; align-self: center; }
@media (max-width: 520px) { .variant { grid-template-columns: 1fr; grid-template-areas: "ings" "proc" "meta"; } }
.potions { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px 32px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.potion { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 4px; }
.potion-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.potion-name { font-family: var(--f-display); font-size: 1.12rem; }
.potion.found .potion-name { color: var(--good); }
.potion .effect { font-size: 0.9rem; color: var(--muted); }
/* Regnebrættet: a brew worked out on paper in the book. */
.slate { display: grid; gap: 10px; }
.sl-ings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: sl; }
.sl-ings li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border: 1px solid #c9b48a; border-radius: 6px; background: rgba(255,255,255,0.35); }
.sl-ings li:not(.empty-state)::before { counter-increment: sl; content: counter(sl) "."; font-family: var(--f-book); color: #8a7454; }
.sl-ings li .art { width: 28px; height: 28px; flex: none; }
.sl-ing-name { flex: 1; min-width: 6em; }
.sl-pick { display: flex; flex-wrap: wrap; gap: 4px; }
/* The ingredients at a glance on Regnebrættet: a row each, its five properties in their columns. */
.sl-table { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, minmax(30px, auto)); gap: 3px 4px; align-items: center; margin: 4px 0 10px; }
.sl-trow, .sl-trow .chips { display: contents; }
.sl-th { color: var(--c); font-size: 0.7rem; font-weight: 700; text-align: center; white-space: nowrap; background: none; border: 1px solid transparent; border-radius: 5px; padding: 2px 1px; font-family: inherit; cursor: pointer; }
.sl-th:hover, .sl-th.on { border-color: var(--c, var(--line)); }
.sl-th-name { text-align: left; color: inherit; white-space: normal; line-height: 1.15; min-width: 0; }
.sl-arrow { margin-left: 1px; font-family: system-ui, sans-serif; }
.sl-thead small { font-size: 0.7rem; }
.sl-tadd { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 6px 2px 2px; border: 1px dashed #c9b48a; border-radius: 6px; background: transparent; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.sl-tadd:hover:not(:disabled) { background: rgba(255,255,255,0.4); }
.sl-tadd:disabled { cursor: default; border-style: solid; border-color: transparent; }
.sl-tadd .art { width: 24px; height: 24px; flex: none; }
.sl-tadd span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.sl-tadd small { color: var(--muted); font-variant-numeric: tabular-nums; }
.sl-table .chip { justify-self: stretch; }
.sl-add { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; width: 64px; padding: 4px 2px; border: 1px dashed #c9b48a; border-radius: 6px; background: transparent; cursor: pointer; font: inherit; color: inherit; }
.sl-add:hover { background: rgba(255,255,255,0.4); }
.sl-add .art { width: 30px; height: 30px; }
.sl-pick-head { margin: 4px 0 -4px; }
.sl-add small { font-size: 0.68rem; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
.sl-out { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sl-cell { display: grid; justify-items: center; gap: 3px; text-align: center; font-size: 0.8rem; }
.sl-cell small { font-size: 0.7rem; line-height: 1.15; color: #6d604c; }
.sl-cell .sl-ok { color: #2f8a55; } .sl-cell .sl-off { color: #b0302a; }
.sl-pk { margin: 6px 0 0; }
.sl-pk-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, minmax(30px, auto)); gap: 3px 4px; align-items: center; margin-top: 3px; }
.sl-pk-head .sl-th { cursor: default; }
.sl-pk-label { font-size: 0.85rem; }
.sl-pk-label small.note { font-size: 0.78rem; line-height: 1.2; display: inline-block; margin: 0; }
.sl-pk-row .chip { justify-self: stretch; }
.sl-kin { margin: 6px 0 0; }
.sl-kin ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.sl-kin li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-left: 3px solid #c9b48a; background: rgba(216,170,79,0.08); border-radius: 0 6px 6px 0; }
.sl-kin .v-proc { display: inline-flex; gap: 2px; flex: none; }
.sl-kin .sl-kin-what { flex: 1; min-width: 0; font-size: 0.9rem; }
.sl-known { margin: 0; padding: 6px 10px; border-left: 3px solid #b8862b; background: rgba(216,170,79,0.15); border-radius: 0 6px 6px 0; }
.sl-warn { margin: 0; color: #b0302a; font-weight: 700; }
.sl-pots { display: flex; flex-wrap: wrap; gap: 4px; }
/* Målestokken: what experience shows of a potion. */
.seal { margin: 0 0 8px; padding: 6px 10px; border: 1px solid #b8862b; border-radius: 6px; background: rgba(216,170,79,0.18); color: #7a5a2a; font-family: var(--f-book); font-style: italic; }
.measure { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.ms-row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 9.5em; align-items: center; gap: 8px; font-size: 0.85rem; }
.ms-bar { position: relative; height: 10px; border-radius: 5px; background: rgba(0,0,0,0.08); }
.ms-seen { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: color-mix(in srgb, var(--c) 45%, transparent); }
.ms-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -2px; border-radius: 50%; background: var(--c); border: 2px solid #fff8e8; box-shadow: 0 0 0 1px rgba(0,0,0,0.35); }
.ms-word { color: #6d604c; } .ms-word.hit { color: #2f8a55; font-weight: 700; }
@media (max-width: 520px) { .ms-row { grid-template-columns: 5.5em minmax(0, 1fr); } .ms-word { grid-column: 2; } .sl-out { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.riddle { margin: 0; padding-left: 0; list-style: none; font-family: var(--f-book); font-style: italic; display: grid; gap: 2px; }
.riddle .missing { color: var(--muted); font-style: normal; font-family: var(--f-body); font-size: 0.85rem; }
.recipe { font-size: 0.85rem; color: var(--fg); background: var(--panel-2); border-radius: 4px; padding: 6px 8px; }
.tag { font-size: 0.78rem; color: var(--good); border: 1px solid currentColor; border-radius: 10px; padding: 0 7px; }

.j-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.j-stats div { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; text-align: center; }
.j-stats b { font-family: var(--f-mono); font-size: 1.3rem; font-weight: 500; color: var(--brass); }
.j-stats small { color: var(--muted); font-size: 0.8rem; }
.j-filter { max-width: 420px; margin-bottom: 8px; }
.j-day-title { font-family: var(--f-display); font-weight: 400; font-size: 1.05rem; color: var(--brass); margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.j-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.j-entry { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: start; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--good); border-radius: 10px; padding: 10px 12px; }
.j-entry.bad { border-left-color: var(--bad); }
.j-art .art { width: 48px; height: 48px; }
.j-body { display: grid; gap: 6px; min-width: 0; }
.j-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.j-name { font-family: var(--f-display); font-weight: 400; font-size: 1.05rem; }
.j-q { font-size: 0.75rem; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; }
.j-ings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.j-ing { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8rem; color: var(--fg); background: var(--bg); border-radius: 999px; padding: 1px 8px 1px 2px; }
.j-ing .art { width: 20px; height: 20px; }
.j-proc { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.j-proc .v-none { color: var(--muted); }
.j-meta { margin: 0; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 520px) { .j-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .j-list { grid-template-columns: 1fr; } }
.workshop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.workshop h3, .tool-market h3 { font-family: var(--f-display); font-weight: 400; color: var(--brass); margin: 6px 0 8px; }
.workshop-shelf { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 6px; margin-bottom: 12px; border-radius: 10px; background: linear-gradient(transparent 70%, #5a3a1e 70%, #4a2e16 78%, transparent 78%), var(--panel-2); }
.ws-item .art { width: 40px; height: 40px; }
.tool-market { margin-top: 22px; }
.tool-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; }
.tool-tabs .btn { white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tool-tabs .btn small { font-family: var(--f-mono); opacity: 0.75; }
.tool-tabs .btn[aria-pressed="true"] { background: var(--brass); color: var(--ink); border-color: var(--brass); }

.meters { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.me-health { display: grid; gap: 6px; align-content: start; max-width: 520px; padding: 16px 18px; background: var(--panel-2); border-radius: 14px; }
.meters .me-health { max-width: none; }
.me-health .skill-name { font-size: 1.25rem; }
.me-health .note { margin: 4px 0 0; }
.meter-val { color: var(--muted); font-size: 0.9rem; }
.meter-val b { font-family: var(--f-mono); font-weight: 500; font-size: 2.1rem; line-height: 1.1; color: var(--fg); margin-right: 4px; }
.health-bar, .rep-bar { height: 10px; border-radius: 5px; background: var(--bg); }
.bar.health-bar i { background: var(--good); }
.bar.health-bar i.mid { background: var(--brass); }
.bar.health-bar i.low { background: var(--bad); }
.sharp-bar { width: 100%; margin: 0; }
.hp-low { color: var(--bad); }
.injuries { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-width: 520px; font-size: 0.9rem; }
.injuries li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 4px 0; }
.injuries b { color: var(--bad); font-variant-numeric: tabular-nums; }
.ouch { color: var(--ouch); }
.exact { color: var(--brass); margin: 0; font-family: var(--f-book); font-style: italic; }
.tests .btn.risky { border-color: color-mix(in srgb, var(--bad) 60%, var(--line)); }
.tests .btn.risky small { color: var(--ouch); }
.strong-note { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--good); background: color-mix(in srgb, var(--good) 8%, transparent); }
.tool-group { font-family: var(--f-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 12px 0 6px; }
.tools { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tool { background: var(--panel-2); border: 1px solid transparent; border-radius: 5px; padding: 12px 14px; display: grid; gap: 6px; align-content: start; font-size: 0.92rem; }
.tool.owned { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.tool-name { font-family: var(--f-display); font-size: 1.15rem; }
.tool.owned .tool-name { color: var(--good); }
.tool-how { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; }
.reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; width: 100%; color: var(--muted); }
.reqs .ok { color: var(--good); }
.skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.skill { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-content: start; padding: 14px 16px; background: var(--panel-2); border-radius: 12px; }
.skill > :not(.skill-badge) { grid-column: 2; }
.skill-badge { grid-row: 1 / span 4; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--brass); display: grid; place-items: center; font-family: var(--f-mono); font-size: 1.2rem; color: var(--brass); }
.skill .skill-next b { color: var(--good); font-weight: 500; }
.skill .skill-lvl { display: none; }
.skill-head { display: flex; justify-content: space-between; align-items: baseline; }
.skill-name { font-family: var(--f-display); font-size: 1.08rem; }
.skill-lvl { font-family: var(--f-mono); font-size: 0.85rem; color: var(--brass); }
.bar { height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; margin: 5px 0; }
.bar i { display: block; height: 100%; background: var(--brass); }
.skill p { margin: 0; font-size: 0.88rem; color: var(--muted); }
.empty-state { color: var(--muted); font-style: italic; font-family: var(--f-book); }
footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); padding-top: 16px; }
footer a { color: inherit; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
/* The suggestion to install the game: a note at the foot of the screen (above the menu on a phone). */
.install-note { position: fixed; z-index: 2700; left: 50%; bottom: 16px; width: min(460px, calc(100vw - 24px)); display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 12px 14px; background: var(--panel); color: var(--fg); border: 1px solid var(--brass); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); opacity: 0; transform: translate(-50%, 20px); transition: opacity 0.35s, transform 0.35s; }
.install-note.in { opacity: 1; transform: translate(-50%, 0); }
.install-icon { width: 48px; height: 48px; border-radius: 11px; }
.install-text { display: grid; gap: 2px; font-size: 0.88rem; line-height: 1.35; }
.install-text b { font-family: var(--f-display); font-size: 1.02rem; }
.ios-share { width: 17px; height: 17px; vertical-align: -3px; color: #2f7ae0; }
.install-btns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 640px) { .install-note { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
.help-install { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px 12px; align-items: center; margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--brass); border-radius: 12px; background: color-mix(in srgb, var(--brass) 10%, transparent); }
.help-install[hidden] { display: none; }