/* DoggyOnline — UO-inspired chrome: carved stone frames, parchment and
   marble panels, gold serif titles, outlined overhead text. --u is the
   integer UI scale (matches the world's pixel scale). */
:root {
  --u: 2;
  --f: 1.3;   /* text scale (Options → Text size) */
  --gold: #f0cf74;
  --gold-dim: #b8954a;
  --ink: #2a1c0e;
  --text: #ecdfb8;
  --stone: url(assets/art/tex-stone.png);
  --parch: url(assets/art/tex-parchment.png);
  --marble: url(assets/art/tex-marble.png);
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Trebuchet MS", Verdana, Tahoma, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #000; color: var(--text);
  font: 14px/1.35 var(--serif); -webkit-user-select: none; user-select: none; touch-action: none; }
body { cursor: url(assets/art/cursor-paw.png) 1 2, auto; }
button, select, input { font: inherit; color: inherit; cursor: inherit; }
button { border-radius: 2px; } /* (every button has these slightly rounded corners: a rule that wants another shape says so) */
/* tick boxes and radio buttons, drawn in the game's colours: a cream box like a text field; ticked, it fills with a
   button's brown and a gold tick. A radio is round, with a brown dot */
input[type=checkbox], input[type=radio] { appearance: none; -webkit-appearance: none; flex: none; width: 1em; height: 1em; margin: 0;
  display: inline-grid; place-content: center; vertical-align: -0.15em; background: #f3e6c4; border: 1px solid #1a1208;
  box-shadow: inset 0 1px 2px #5a3a1a55; border-radius: 2px; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:checked { background: linear-gradient(#5a4a30, #3a2e1c); box-shadow: inset 0 1px 0 #8a7448; }
input[type=checkbox]:checked::before { content: ""; width: 0.62em; height: 0.62em; background: var(--gold);
  clip-path: polygon(14% 44%, 0 59%, 38% 96%, 100% 22%, 86% 8%, 38% 66%); }
input[type=radio]:checked::before { content: ""; width: 0.46em; height: 0.46em; border-radius: 50%; background: #3a2e1c; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: 0.5; }
.pd-buttons button.war-on, .options-gump .o-logout, .logout-gump button.danger { background: linear-gradient(#8a2018, #4a100c); color: #ffd0c0; border-color: #2a0806; }
body.war #hud { color: #ff9a8a; }
body.targeting, body.targeting canvas { cursor: url(assets/art/cursor-target.png) 16 16, crosshair !important; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------- overhead */
#overlay { position: fixed; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.over { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center;
  gap: 1px; white-space: nowrap; will-change: transform; }
.over .line { font: bold calc(7px * var(--u) * var(--f)) / 1.15 var(--sans); color: #f6e7a0; max-width: 320px; white-space: normal;
  text-align: center; text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000; }
.over.dog .line.name { color: #7fb0ff; }
.over.human .line.name, .over.human .line { color: #f2f2f2; }
.over:not(.dog):not(.human) .line.name { color: #c8c8c8; }
.over.hostile:not(.dog):not(.human) .line.name { color: #ff5a4a; }
.over.npc .line.name, .over.human .line.name { color: #f6e27a; }
.fx-hit { color: #ff5a4a; }
.over .line.ghost { color: #d6ff5c; text-shadow: 0 0 6px rgba(190, 255, 60, 0.7); font-style: italic; letter-spacing: 0.08em; opacity: 0.85; }
.over .line.yell { font-size: calc(9px * var(--u) * var(--f)); letter-spacing: 0.03em; } /* a yell (a line begun with "!"): larger, as it carries further */
.over .line.emote { color: #ffb36b; font-style: italic; }
.over .line.spell { color: #9fd8ff; font-style: italic; letter-spacing: 0.04em; }
.fx { position: absolute; left: 50%; bottom: 0; font: bold calc(8px * var(--u) * var(--f)) var(--sans); pointer-events: none;
  animation: fxrise 1.1s ease-out forwards; opacity: 0; text-shadow: 0 0 4px currentColor; }
.fx-fire { color: #ff8a2a; } .fx-zap { color: #fff27a; } .fx-arrow { color: #8ff0ff; }
.bolt { position: absolute; left: 0; top: 0; pointer-events: none; font: bold calc(12px * var(--u)) var(--sans); text-shadow: 0 0 6px currentColor, 0 0 12px currentColor; }
.bolt-arrow { color: #9ff4ff; }
/* the fireball: a glowing ball, a trail of embers and smoke, a blast where it lands (client.js bolt, spark, burst) */
.fireball, .spark, .fire-blast { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; }
.fireball { width: calc(15px * var(--u)); height: calc(15px * var(--u)); background: radial-gradient(circle at 42% 40%, #fffbe0 0%, #ffd84a 28%, #ff7a1a 58%, rgba(255, 50, 0, 0) 76%);
  box-shadow: 0 0 10px 4px rgba(255, 150, 40, 0.75), 0 0 28px 12px rgba(255, 80, 0, 0.35); }
.spark { width: calc(4px * var(--u)); height: calc(4px * var(--u)); background: #ff9a2a; box-shadow: 0 0 6px 2px rgba(255, 110, 20, 0.7); }
.fireball.big { width: calc(24px * var(--u)); height: calc(24px * var(--u)); }
/* Biscuit Bolt: a dart of pale magic, pointed along its flight, shedding motes */
.arcane-bolt { position: absolute; left: 0; top: 0; pointer-events: none; width: calc(18px * var(--u)); height: calc(5px * var(--u)); border-radius: 50%;
  background: linear-gradient(90deg, rgba(120, 220, 255, 0) 0%, #7fe6ff 45%, #ffffff 85%, #ffffff 100%); box-shadow: 0 0 8px 3px rgba(110, 220, 255, 0.75); }
.spark.mote { background: #bff4ff; width: calc(3px * var(--u)); height: calc(3px * var(--u)); box-shadow: 0 0 5px 2px rgba(110, 220, 255, 0.7); }
.spark.hot { background: #ffe9a0; width: calc(3px * var(--u)); height: calc(3px * var(--u)); }
.spark.smoke { width: calc(9px * var(--u)); height: calc(9px * var(--u)); background: rgba(70, 60, 55, 0.5); box-shadow: none; }
.fire-blast { width: calc(52px * var(--u)); height: calc(52px * var(--u)); margin: calc(-26px * var(--u)) 0 0 calc(-26px * var(--u));
  background: radial-gradient(circle, #fff6c0 0%, #ffb02a 35%, #ff5a0a 55%, rgba(255, 40, 0, 0) 72%); animation: fire-blast 0.4s ease-out forwards; }
.spark.tele { background: #ffffff; width: calc(3px * var(--u)); height: calc(3px * var(--u)); box-shadow: 0 0 6px 2px rgba(150, 200, 255, 0.9); }
@keyframes fire-blast { from { transform: scale(0.25); opacity: 1; } 60% { opacity: 0.9; } to { transform: scale(1.35); opacity: 0; } }
/* lightning: a bolt from the top of the view down to the target (client.js strike) */
.strike { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.strike path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.strike .glow { stroke: #7fb4ff; stroke-width: calc(5px * var(--u)); opacity: 0.55; filter: drop-shadow(0 0 6px #9cc8ff) drop-shadow(0 0 14px #5a8cff); }
.strike .core { stroke: #fdfdff; stroke-width: calc(1.6px * var(--u)); }
.sky-flash { position: absolute; inset: 0; background: #dfe9ff; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.over.pet .line.name { color: #9fe0a0; }
.fx-poison { color: #7be05a; } .dmg.poison { color: #7be05a; }
/* poisoned: the bar turns an acid yellow-green and throbs (UO turned it green; ours is green already) */
.over .hp.poisoned::after, .g-row .hp.poisoned::after { background: #c8e810; animation: venom 0.9s ease-in-out infinite alternate; }
.hbar.poisoned .hb-track i { background: linear-gradient(#d8f020, #7a9a08); animation: venom 0.9s ease-in-out infinite alternate; }
@keyframes venom { from { filter: brightness(0.75); } to { filter: brightness(1.2); } }
.fx-heal { color: #7dff9a; } .fx-bless { color: #ffe27a; } .fx-sparkle { color: #fff3b0; }
.fx-teleport { color: #8fd0ff; } .fx-fizzle { color: #9a9a9a; }
@keyframes fxrise { 0% { opacity: 0; transform: translate(var(--dx), 30px) scale(0.6); } 20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.4), -30px) scale(1.2); } }
.over .hp { display: inline-block; width: 30px; height: 4px; background: #500; vertical-align: middle; margin-left: 3px;
  position: relative; border: 1px solid #000; }
.over .hp::after { content: ""; position: absolute; inset: 0; width: min(100%, var(--hp)); background: #3c3; }
.mark { position: absolute; left: 0; top: 0; font-size: calc(9px * var(--u) * var(--f)); color: #ffe39a; filter: drop-shadow(0 0 3px #fc6);
  animation: pulse 1s ease-in-out infinite alternate; }
.label { position: absolute; left: 0; top: 0; max-width: calc(260px * var(--f)); text-align: center; pointer-events: none;
  font: bold calc(7px * var(--u) * var(--f)) / 1.15 var(--sans); color: #e8e2d0;
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000; }
.label.tip { position: fixed; z-index: 60; white-space: nowrap; }
@keyframes pulse { from { opacity: 0.5; } to { opacity: 1; } }

/* ---------------------------------------------------------------- journal & chat */
/* (Every length here is a whole number of pixels. The list hangs from the bottom of the screen, so each line's place is
   the sum of all the line heights under it: at 20.28px a line, a new line coming or an old one going moved every other
   line by a fraction, and the text snapped up or down a pixel as it was rounded. And a line is on a layer of its own
   from the start, not only while it fades: the browser redraws text a little differently when it moves it to one.) */
#journal { position: fixed; left: 10px; bottom: round(calc(34px + 14px * var(--f)), 1px); z-index: 4; pointer-events: none; display: flex; flex-direction: column;
  gap: 1px; max-width: min(560px, 60vw); }
.jl { font: bold round(calc(6.5px * var(--u) * var(--f)), 1px) / round(up, calc(7.8px * var(--u) * var(--f)), 1px) var(--sans); color: #e8e2d0; transition: opacity 3s; will-change: opacity;
  text-shadow: 1px 1px 0 #000, -1px 0 #000, 0 -1px #000, 1px 0 #000; }
.jl.gain { color: #8fe08f; } .jl.info { color: #9fd0ff; } .jl.speech { color: #f6e7a0; } .jl.emote { color: #ffb36b; }
.jl.fade { opacity: 0; }
#chat { position: fixed; left: 10px; bottom: 10px; z-index: 5; display: none; }
#chat.open { display: block; }
#chat input { width: min(520px, 70vw); padding: 4px 8px; background: #0008; border: 1px solid var(--gold-dim);
  color: #f6e7a0; font: bold calc(15px * var(--f)) var(--sans); outline: none; }
#hud { position: fixed; right: 10px; bottom: 8px; z-index: 4; font: calc(12px * var(--f)) ui-monospace, Menlo, monospace; color: #d8c890;
  text-shadow: 0 1px 1px #000; pointer-events: none; }

/* ---------------------------------------------------------------- gumps */
#gumps { position: fixed; inset: 0; pointer-events: none; z-index: 6; }
.gump { position: absolute; pointer-events: auto; background: var(--stone) 0 0 / calc(64px * var(--u)) repeat, #3a352d;
  image-rendering: pixelated; padding: calc(3px * var(--u)); border-radius: 2px;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #8a7a58, 0 6px 18px #000c; }
.gump { font-size: calc(14px * var(--f)); }
.gump-title { display: flex; align-items: center; justify-content: space-between; padding: 1px 4px 3px;
  font: bold calc(13px * var(--f)) var(--serif); color: var(--gold); text-shadow: 0 1px 0 #000; letter-spacing: 0.04em; }
.gump-title .x { background: none; border: 0; color: var(--gold-dim); font-size: calc(18px * var(--f)); line-height: 1; padding: 0 2px; }
.gump-title .x:hover { color: var(--gold); }
.gump-body { background: var(--parch) 0 0 / calc(64px * var(--u)) repeat, #cdb88c; color: var(--ink);
  box-shadow: inset 0 0 0 1px #00000080, inset 0 0 12px #5a3a1a55; padding: 8px 10px; }

.status-gump .gump-body { background: var(--marble) 0 0 / calc(64px * var(--u)) repeat, #1e2a22; color: var(--text); width: calc(230px * var(--f)); }
.gump-title .shrink { background: none; border: 0; color: var(--gold-dim); font-size: calc(13px * var(--f)); line-height: 1; padding: 0 4px; margin-left: auto; }
.gump-title .shrink:hover { color: var(--gold); }
.gump-title .shrink + .x { margin-left: 0; }
/* the status bar shrunk to a strip: the name and three bars lettered H, M and S, thick enough to read at a glance (UO's small status bar; ui.js renderStatus) */
.status-gump.strip .gump-body { width: calc(150px * var(--f)); padding: 4px 8px 6px; }
.status-gump.strip .gump-title span { display: none; }
.status-gump.strip .st-name { font-size: calc(12px * var(--f)); margin-bottom: 2px; }
.status-gump.strip .bar { display: grid; grid-template-columns: calc(16px * var(--f)) 1fr; gap: 4px; margin: 3px 0; }
.status-gump.strip .bar label { font: bold calc(12px * var(--f)) / 1 var(--serif); color: var(--gold); text-shadow: 0 1px 0 #000; }
.status-gump.strip .bar .track { height: 10px; }
.bar.hp.poisoned .fill { background: linear-gradient(#58d048, #1c7a1c); }
.dash-meter { font-size: calc(12px * var(--f)); margin: 4px 0; }
.spark-row { margin-left: 8px; }
.spark-bars { display: inline-flex; align-items: flex-end; gap: 1px; height: 14px; margin-right: 8px; vertical-align: bottom; }
.spark-bars i { width: 2px; background: #c8a040; display: block; }
.check { display: flex; align-items: center; gap: 6px; font-size: 0.9em; }
.check input:not([type=checkbox]):not([type=radio]) { width: auto; }
.acct-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #0006; }
.acct-form[hidden] { display: none; }
.sk-track { background: none; border: 0; color: #6a2a10; font: italic calc(11px * var(--f)) var(--serif); text-decoration: underline; padding: 0 4px; }
.track-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }
.track-list button { background: #4a2a1a; color: #f0d8a0; border: 1px solid #1a0d05; padding: 2px 6px; text-transform: capitalize; }
.mark.trail { opacity: 0.85; font-size: calc(9px * var(--u)); }
.marks { display: grid; grid-template-columns: repeat(3, max-content); gap: 4px 16px; }
.col .marks label.check { display: flex; align-items: center; gap: 6px; }
.marks .check input { margin: 0; }
.needs { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 5px; align-items: center; font-size: calc(11px * var(--f)); margin-top: 4px; }
.needs .track { height: 5px; background: #200; border: 1px solid #000; }
.needs .fill { height: 100%; }
.needs .fill.food { background: linear-gradient(#d8a050, #8a5a1c); }
.needs .fill.water { background: linear-gradient(#6ac0e8, #1c5a8a); }
.st-name { font: bold calc(15px * var(--f)) var(--serif); color: var(--gold); text-align: center; margin-bottom: 4px; }
.bar { display: grid; grid-template-columns: calc(58px * var(--f)) 1fr calc(54px * var(--f)); align-items: center; gap: 6px; font-size: calc(12px * var(--f)); margin: 2px 0; }
.bar .track { height: 8px; background: #200; border: 1px solid #000; box-shadow: inset 0 0 0 1px #5a4a2a; }
.bar .fill { height: 100%; background: linear-gradient(#e04848, #8a1c1c); }
.bar.stam .fill { background: linear-gradient(#e0c048, #8a6a1c); }
.bar.focus .fill { background: linear-gradient(#5a8ae0, #1c3a8a); }
.bar span { text-align: right; font-variant-numeric: tabular-nums; }
.stats { display: flex; justify-content: space-between; font-size: calc(12px * var(--f)); margin-top: 4px; }
.stats b { color: var(--gold); }

.paperdoll-gump .gump-body { width: calc(230px * var(--f)); text-align: center; }
.pd-name { font: bold calc(17px * var(--f)) var(--serif); }
.pd-title { font-size: calc(12px * var(--f)); font-style: italic; color: #5a3a1a; }
.pd-portrait { width: calc(80px * var(--u)); height: calc(80px * var(--u)); max-width: 160px; max-height: 160px; margin: 6px auto;
  background: center / contain no-repeat; image-rendering: pixelated; }
.pd-doll { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; }
.pd-emotes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 5px; }
.pd-emotes button { font-size: calc(10px * var(--f)); padding: 2px 0; background: #5a4a2a; color: #f0e0b0; border: 1px solid #1a0d05; }
.g-score { font-size: calc(12px * var(--f)); margin: 5px 0; }
.party-gump .gump-body { width: calc(250px * var(--f)); }
.logout-gump .gump-body { width: calc(240px * var(--f)); }
.logout-gump p { margin: 2px 0 8px; }
.party-row { grid-template-columns: 1fr auto auto calc(18px * var(--f)) !important; }
.party-gump button[data-op="kick"] { width: calc(18px * var(--f)); height: calc(16px * var(--f)); padding: 0; margin: 0; line-height: 1; display: grid; place-items: center; }
.pd-moves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 5px; }
.pd-moves .move { position: relative; overflow: hidden; font-size: calc(11px * var(--f)); background: #4a2a1a; color: #f0d8a0; border: 1px solid #1a0d05; padding: 3px 2px; }
.pd-moves .move i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.55); pointer-events: none; transition: width 0.25s linear; }
.pd-moves .move.resting { color: #9a8a6a; }
.pd-slots { display: flex; flex-direction: column; gap: 4px; }
.slot { width: calc(22px * var(--u)); height: calc(22px * var(--u)); max-width: 48px; max-height: 48px; border: 1px solid #5a3a1a;
  background: #00000018; box-shadow: inset 0 0 6px #5a3a1a55; display: grid; place-items: center; font-size: calc(9px * var(--f)); color: #6a5030; }
.slot img { width: 100%; height: 100%; image-rendering: pixelated; }
.slot:hover { background: #fff3; }
.pd-buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-top: 5px; }
.pd-buttons button.wide { grid-column: 1 / -1; }
.pd-buttons button, .panel button.big, .panel button:not(.link):not(.swatch) {
  background: linear-gradient(#5a4a30, #3a2e1c); border: 1px solid #1a1208; box-shadow: inset 0 1px 0 #8a7448;
  color: var(--gold); padding: 3px 4px; font-size: calc(12px * var(--f)); border-radius: 2px; }
.pd-buttons button:hover, .panel button:not(.link):not(.swatch):hover { filter: brightness(1.2); }

.skills-gump .gump-body { width: calc(250px * var(--f)); }
.sk-list { max-height: 60vh; overflow: auto; }
.sk-row { display: grid; grid-template-columns: 16px 1fr auto auto; align-items: center; gap: 6px; padding: 1px 0; font-size: calc(13px * var(--f)); }
.gem { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #000;
  background: radial-gradient(circle at 35% 35%, #bfe0ff, #2a5ab0 60%, #0a1a40); }
.gem:hover { filter: brightness(1.4); }
.skill-name:hover { text-decoration: underline; }
.sk-val { grid-column: 4; font-variant-numeric: tabular-nums; font-weight: bold; }
.sk-sort { font-size: calc(11px * var(--f)); font-style: italic; color: #5a3a1a; border-bottom: 1px solid #5a3a1a66; margin-bottom: 3px; padding-bottom: 2px; }
.sk-sort button { background: none; border: 0; color: #6a2a10; font: italic calc(11px * var(--f)) var(--serif); padding: 0 3px; }
.sk-sort button.on { font-weight: bold; text-decoration: underline; }
.sk-total { border-top: 1px solid #5a3a1a66; margin-top: 4px; padding-top: 3px; font-size: calc(12px * var(--f)); text-align: right; }

.container-gump .gump-body { padding: 0; background: none; box-shadow: none; }
.c-bg { width: calc(240px * var(--u)); height: calc(200px * var(--u)); position: relative;
  background: center / contain no-repeat; image-rendering: pixelated; }
.c-area { position: absolute; }
.item { position: absolute; width: calc(32px * var(--u)); height: calc(32px * var(--u)); }
.item img { width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.item:hover img { filter: brightness(1.25) drop-shadow(0 0 2px #fe8); }
.item .amt { position: absolute; right: 0; bottom: 0; font: bold calc(11px * var(--f)) var(--sans); color: #fff; text-shadow: 1px 1px 0 #000; }
.drag-img { position: fixed; left: 0; top: 0; z-index: 50; width: calc(32px * var(--u)); height: calc(32px * var(--u));
  image-rendering: pixelated; pointer-events: none; }

/* ---------------------------------------------------------------- screens */
#screens { position: fixed; inset: 0; z-index: 20; }
#screens.hidden { display: none; }
.screen { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.screen.active { display: flex; }
.backdrop { position: absolute; inset: 0; background: url(assets/art/backdrop.png) center / cover no-repeat;
  image-rendering: pixelated; opacity: 0.85; } /* (the world pans behind it: main.js titlePan) */
.panel { position: relative; background: var(--stone) 0 0 / 128px repeat, #3a352d; padding: 14px;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #8a7a58, 0 10px 40px #000; max-width: calc(100vw - 32px); }
.panel > * { position: relative; }
.login-panel { width: 400px; display: flex; flex-direction: column; gap: 9px; text-align: center; }
.panel h1 { font: bold 44px var(--serif); color: var(--gold); text-shadow: 0 2px 0 #000, 0 0 18px #c8902a88; letter-spacing: 0.02em; }
.panel h1 span { color: #e8e2d0; }
.panel h1 .logo { display: block; width: min(100%, 352px); height: auto; margin: -6px auto -10px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 #000) drop-shadow(0 0 14px #c8902a66); } /* (the drawn title: tools/gen-doggy-art.mjs `logo`) */
.panel h2 { font: bold 24px var(--serif); color: var(--gold); text-shadow: 0 2px 0 #000; text-align: center; }
.tag { color: #d8c8a0; font-style: italic; margin-bottom: 4px; }
.build-id { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); margin: 0; font: 12px ui-monospace, Menlo, monospace; color: rgba(240, 226, 188, 0.85); text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.fine { font-size: 12px; color: #c8b890; }
.error { min-height: 1.2em; color: #ffb070; font-size: 13px; }
.panel button.big { font-size: 15px; padding: 8px; }
.panel [hidden] { display: none; }
.panel button:disabled, .panel input:disabled { opacity: 0.5; cursor: default; }
.panel button.alt { color: #e8e2d0; }
.panel button.link { background: none; border: 0; color: var(--gold-dim); text-decoration: underline; padding: 2px; }
.panel input, .panel select { background: #f3e6c4; color: var(--ink); border: 1px solid #1a1208; padding: 5px 7px;
  box-shadow: inset 0 1px 3px #0005; }
.panel input[type=checkbox], .panel input[type=radio] { padding: 0; }
.plain-form { display: contents; } /* (a form only for the password manager's sake: its children lay out as the panel's own) */
.login-panel label, .acct label { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; text-align: left; }
.login-panel label.check { display: flex; padding-left: 98px; } /* (the box under the fields, not in the labels' column) */
.login-panel .intro { color: #f0e2bc; font-size: 15px; }
/* logging in by itself: no form to fill, only who is coming in (main.js waitFor) */
.login-panel .wait { display: none; align-items: center; justify-content: center; gap: 10px; color: #f0e2bc; font-size: 15px; padding: 10px 0; }
#login-screen.waiting .wait { display: flex; }
#login-screen.waiting :is(#btn-new, .or, #login-form) { display: none; }
.spinner { width: 18px; height: 18px; border: 3px solid #8a7a5866; border-top-color: var(--gold); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.login-panel .or { display: flex; align-items: center; gap: 10px; color: #c8b890; font-size: 12px; font-style: italic; }
.login-panel .or::before, .login-panel .or::after { content: ''; flex: 1; border-top: 1px solid #8a7a5866; }
/* the newcomer's button: the one lit-up button on the screen */
.panel button.big.primary:not(.link) { background: linear-gradient(#e8b84a, #a8741c); color: #2a1a08; border-color: #3a2408; box-shadow: inset 0 1px 0 #fff2b0, 0 0 14px #c8902a66; font-weight: bold; font-size: 17px; padding: 10px; }

#create-screen { justify-content: flex-start; padding-left: 4vw; }
.create-panel { width: 620px; display: flex; flex-direction: column; gap: 10px; background-color: #3a352de8; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* the dog being made, turning on its round of turf (main.js previewStage): drawn at three screen pixels to a game pixel */
.c-preview { width: 264px; height: 246px; max-width: 100%; align-self: center; image-rendering: pixelated; margin-top: 4px;
  background: radial-gradient(ellipse at 50% 62%, #7a9a5a44, #1a1f1688 72%), #20241c; border: 1px solid #1a1208; box-shadow: inset 0 0 0 1px #5a4a30, inset 0 0 18px #000a; }
.col { display: flex; flex-direction: column; gap: 6px; }
.col label { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; }
.col label.stat { grid-template-columns: 90px 1fr 28px; }
.col label.skill { grid-template-columns: 1fr 34px; }
.col label.dice { grid-template-columns: 70px 1fr auto; }
.col label.dice.cycle { grid-template-columns: 70px auto 1fr auto auto; gap: 4px; } /* Breed: ◀ the list ▶ and the die */
.col label.dice.cycle select { min-width: 0; }
.panel button.die { font-size: calc(16px * var(--f)); line-height: 1; padding: 2px 6px; }
.col b { color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; }
.sec { color: var(--gold); font-weight: bold; margin-top: 4px; border-bottom: 1px solid #8a7a5866; }
.sw-label { font-size: 12px; color: #d8c8a0; margin-top: 2px; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.swatch { width: 22px; height: 22px; border: 1px solid #000; box-shadow: inset 0 0 0 1px #fff3; padding: 0; }
.swatch.on { outline: 2px solid var(--gold); outline-offset: 1px; }
.acct { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row { display: flex; justify-content: space-between; align-items: center; }
.row .big { width: 180px; }
input[type=range] { accent-color: var(--gold-dim); }

@media (max-width: 700px) {
  .cols, .acct { grid-template-columns: 1fr; }
  #create-screen { padding-left: 0; justify-content: center; align-items: flex-start; overflow: auto; }
}

/* ---------------------------------------------------------------- spellbook */
.book-gump .gump-body { padding: 0; background: none; box-shadow: none; }
.book-bg { position: relative; width: calc(360px * var(--u)); height: calc(240px * var(--u)); max-width: 92vw;
  background: url(assets/art/gump-spellbook.png) center / contain no-repeat; image-rendering: pixelated; }
.book-page { position: absolute; overflow: hidden; color: var(--ink); display: flex; flex-direction: column; gap: 1px; }
.book-page .circle { font: bold italic calc(6.5px * var(--u) * var(--f)) var(--serif); color: #6a2a10; border-bottom: 1px solid #6a2a1055; margin-top: 3px; }
.spell { display: flex; align-items: center; gap: 6px; background: none; border: 0; text-align: left; padding: 1px 2px;
  font: calc(6px * var(--u) * var(--f)) var(--serif); color: var(--ink); }
.spell img { width: calc(14px * var(--u)); height: calc(14px * var(--u)); image-rendering: pixelated; flex: none; }
.spell { position: relative; }
/* (a circle of more than ten spells: smaller pictures and no air between the lines, or the last runs off the page. The Fourth has eleven) */
.book-page:has(.spell:nth-of-type(11)) { gap: 0; }
.book-page:has(.spell:nth-of-type(11)) .spell { padding: 0 2px; }
.book-page:has(.spell:nth-of-type(11)) .spell img { width: calc(12px * var(--u)); height: calc(12px * var(--u)); }
.spell.lacking img, .shortcut.lacking img { filter: grayscale(1) brightness(0.42); }
.spell.lacking span { color: #6a5a48; }
.sweep { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: rgba(255, 244, 190, 0.5); pointer-events: none; transform-origin: left; animation: sweep linear forwards; }
@keyframes sweep { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* (the corners that turn the page are big enough to hit: they were a small arrow of eleven pixels) */
.book-turn { position: absolute; bottom: calc(-4px * var(--u)); background: none; border: 0; color: #6a2a10; font-size: calc(15px * var(--u)); line-height: 1; padding: calc(4px * var(--u)) calc(8px * var(--u)); min-width: calc(30px * var(--u)); cursor: pointer; }
.book-turn.prev { left: calc(-6px * var(--u)); text-align: left; } .book-turn.next { right: calc(-6px * var(--u)); text-align: right; }
.book-turn:hover { color: #b04a18; }
.spark.heal { background: #9dffa8; box-shadow: 0 0 6px 2px rgba(80, 230, 110, 0.7); }
.spark.gold { background: #ffe9a0; box-shadow: 0 0 6px 2px rgba(255, 200, 70, 0.75); }
.spark.pale { background: #f4fbff; box-shadow: 0 0 6px 2px rgba(170, 215, 255, 0.8); }
.spell:hover { background: #6a2a1022; }
.spell:hover span { text-decoration: underline; }

/* ---------------------------------------------------------------- trade */
.trade-gump .gump-body { width: max-content; max-width: 96vw; }
.tr-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-side .sec { font-weight: bold; color: #6a2a10; border-bottom: 1px solid #6a2a1055; margin-bottom: 4px; }
.tr-area { position: relative; width: calc(132px * var(--u)); height: calc(76px * var(--u)); background: #00000022;
  box-shadow: inset 0 0 0 1px #5a3a1a, inset 0 0 10px #5a3a1a55; margin-bottom: 4px; }
.tr-area[data-ro] { background: #00000033; }
.tr-side .chk { display: flex; gap: 6px; align-items: center; font-weight: bold; }
.tr-them { font-style: italic; color: #6a5030; }
.tr-them.yes { color: #1f6a1f; font-style: normal; font-weight: bold; }
.trade-gump .fine { max-width: calc(280px * var(--u)); margin-top: 6px; font-size: calc(11px * var(--f)); }

/* ---------------------------------------------------------------- .net and .players */
.net-gump .gump-body { width: calc(300px + 20px); background: #101810; color: #cfe0cf; }
.net-graph { display: block; width: 300px; height: 90px; image-rendering: pixelated; border: 1px solid #000; margin-bottom: 4px; }
.net-rows div { display: grid; grid-template-columns: 78px auto 1fr; gap: 6px; font: 12px ui-monospace, Menlo, monospace; align-items: baseline; }
.net-rows span { color: #8aa08a; } .net-rows i { color: #7a8a7a; font-style: normal; } .net-rows b { white-space: nowrap; }
.players-gump .gump-body { max-width: 96vw; overflow: auto; }
table.pl { border-collapse: collapse; font-size: calc(12px * var(--f)); }
table.pl th { text-align: left; color: #6a2a10; border-bottom: 1px solid #6a2a1055; padding: 1px 8px 1px 0; }
table.pl td { padding: 2px 8px 2px 0; white-space: nowrap; }
table.pl td.good { color: #1f6a1f; } table.pl td.ok { color: #8a6a00; } table.pl td.bad { color: #a02010; font-weight: bold; }
table.pl i { color: #6a5030; }
table.pl button, .pl-refresh { background: linear-gradient(#5a4a30, #3a2e1c); color: var(--gold); border: 1px solid #1a1208; padding: 1px 6px; margin-right: 2px; font-size: calc(11px * var(--f)); }
.gmtag { color: #fff; background: #a01818; border-radius: 2px; padding: 0 4px; font: bold calc(10px * var(--f)) var(--sans); vertical-align: middle; }
.over.gm .line.name { color: #ff6ad0; }

/* ---------------------------------------------------------------- kennel */
.house-gump .gump-body { width: min(calc(340px * var(--f)), 94vw); display: flex; flex-direction: column; gap: 6px; }
.h-row { display: flex; gap: 6px; }
.h-row input { flex: 1; min-width: 0; background: #f3e6c4; color: var(--ink); border: 1px solid #1a1208; padding: 2px 5px; }
.house-gump button { background: linear-gradient(#5a4a30, #3a2e1c); color: var(--gold); border: 1px solid #1a1208; padding: 3px 10px; }
.house-gump .chk, .server-gump .chk { display: flex; gap: 6px; align-items: center; }
.container-gump .c-skin { display: block; margin: 4px auto 2px; background: linear-gradient(#5a4a30, #3a2e1c); color: var(--gold); border: 1px solid #1a1208; padding: 3px 12px; font: inherit; cursor: pointer; }
.server-gump p { margin: 0; }
.server-gump hr { border: 0; border-top: 1px solid #5a4a30; width: 100%; margin: 2px 0; }
.server-gump input[type=text], .server-gump textarea { width: 100%; box-sizing: border-box; background: #f3e6c4; color: var(--ink); border: 1px solid #1a1208; padding: 4px 6px; font: inherit; }
.server-gump .sg-choice { display: flex; flex-direction: column; gap: 3px; max-height: 46vh; overflow-y: auto; } /* (a long list scrolls inside the window: its buttons stay in reach) */
.server-gump.sg-wide .gump-body { width: min(580px, 94vw); }
.server-gump .sg-map { width: 100%; max-height: 74vh; aspect-ratio: 1; object-fit: contain; display: block; border: 1px solid #5a4a30; }
.server-gump .sg-scroll { display: flex; flex-direction: column; gap: 6px; max-height: 62vh; overflow-y: auto; padding-right: 6px; }
.server-gump .sg-head { margin: 6px 0 0; font: inherit; font-weight: bold; color: #5a2a10; border-bottom: 1px solid #5a4a30; padding-bottom: 2px; }
.server-gump .sg-li { padding-left: 14px; position: relative; }
.server-gump .sg-li::before { content: '•'; position: absolute; left: 3px; }
.server-gump code { font: 0.92em ui-monospace, Menlo, Consolas, monospace; background: rgba(60, 40, 10, 0.14); padding: 0 3px; border-radius: 2px; }
.server-gump .sg-code { margin: 0; max-height: 46vh; overflow: auto; background: #1a1208; border: 1px solid #5a4a30; padding: 6px 8px; font: 11px/1.35 ui-monospace, Menlo, Consolas, monospace; color: #d8cfb0; white-space: pre; tab-size: 2; user-select: text; }
.server-gump .sg-item { display: flex; gap: 8px; align-items: center; }
.server-gump .sg-item img { width: 32px; height: 32px; image-rendering: pixelated; }
.server-gump .h-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- pack */
.guild-gump .gump-body { width: min(calc(400px * var(--f)), 94vw); display: flex; flex-direction: column; gap: 6px; }
.g-head b { font-size: calc(16px * var(--f)); } .g-tagbox { color: #1f6a1f; font-weight: bold; } .g-head i { color: #6a5030; float: right; }
.g-roster { max-height: 40vh; overflow-y: auto; border-top: 1px solid #6a2a1055; border-bottom: 1px solid #6a2a1055; padding: 3px 0; }
.g-row { display: grid; grid-template-columns: 10px auto 1fr 34px auto; align-items: center; gap: 6px; padding: 1px 0; font-size: calc(12px * var(--f)); }
.g-row i { color: #8a5a00; font-size: calc(10px * var(--f)); }
.g-dot { width: 8px; height: 8px; border-radius: 50%; background: #3c3; border: 1px solid #000; } .g-row.off .g-dot { background: #777; } .g-row.off { opacity: 0.6; }
.g-where { color: #6a5030; text-align: right; }
.g-row .hp, .jr .hp { display: inline-block; width: 30px; height: 5px; background: #500; position: relative; border: 1px solid #000; }
.g-row .hp::after { content: ""; position: absolute; inset: 0; width: min(100%, var(--hp)); background: #3c3; }
.g-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.g-form input { background: #f3e6c4; color: var(--ink); border: 1px solid #1a1208; padding: 2px 5px; width: calc(120px * var(--f)); }
.g-form .g-tag { width: calc(50px * var(--f)); text-transform: uppercase; }
.guild-gump button, .party-gump button, .logout-gump button { background: linear-gradient(#5a4a30, #3a2e1c); color: var(--gold); border: 1px solid #1a1208; padding: 2px 8px; font-size: calc(12px * var(--f)); margin-left: 2px; }
.guild-gump button.danger { color: #ffb0a0; }
.g-foot { display: flex; justify-content: flex-end; gap: 4px; margin-top: 4px; }
.g-inv { background: #1f6a1f22; border: 1px solid #1f6a1f66; padding: 3px 6px; }
.jl.pack { color: #7fe89a; } .jr.pack { color: #1f6a1f; font-weight: bold; }
.over .line.name .tag { color: #8ff0a0; }

/* ---------------------------------------------------------------- shortcuts */
.shortcut { position: absolute; pointer-events: auto; z-index: 8; display: flex; align-items: center; gap: 4px;
  background: #1a140cdd; border: 1px solid #000; box-shadow: inset 0 0 0 1px #8a7a58, 0 2px 6px #000a; border-radius: 3px; padding: 2px; }
.shortcut img { width: calc(22px * var(--u)); height: calc(22px * var(--u)); image-rendering: pixelated; display: block; }
.shortcut.skill { padding: 3px 7px 3px 5px; font: bold calc(12px * var(--f)) var(--serif); color: var(--gold); }
.shortcut:hover { filter: brightness(1.25); }
.shortcut.ghost { position: fixed; z-index: 70; pointer-events: none; opacity: 0.85; }
body:not(.in-game) .shortcut { display: none; }

/* ---------------------------------------------------------------- shop */
.shop-gump .gump-body { width: min(calc(520px * var(--f)), 92vw); }
.shop-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.bust { width: 64px; height: 64px; background: center / contain no-repeat; image-rendering: pixelated; flex: none;
  border: 1px solid #5a3a1a; background-color: #e8d8b0; }
.shop-name { font: bold calc(16px * var(--f)) var(--serif); }
.shop-gold b { color: #8a5a00; }
.shop-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shop-gump .sec { font-weight: bold; color: #6a2a10; border-bottom: 1px solid #6a2a1055; margin-bottom: 3px; }
.rows { max-height: 40vh; overflow: auto; padding-right: calc(4px * var(--u)); } /* (room between a row's buttons and the scroll bar) */
.srow { display: grid; grid-template-columns: 26px 1fr auto calc(18px * var(--f)) calc(22px * var(--f)) calc(18px * var(--f)); align-items: center; gap: 4px; font-size: calc(12px * var(--f)); padding: 1px 0; }
.srow img { width: 26px; height: 26px; image-rendering: pixelated; }
.srow .pr { color: #8a5a00; font-weight: bold; }
.srow button { width: calc(18px * var(--f)); height: calc(18px * var(--f)); padding: 0; background: #5a4a30; color: var(--gold); border: 1px solid #1a1208; font-size: calc(12px * var(--f)); line-height: 1; }
.srow .q { text-align: center; }
.shop-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 6px; font-size: calc(13px * var(--f)); }
.shop-foot button { background: linear-gradient(#5a4a30, #3a2e1c); color: var(--gold); border: 1px solid #1a1208; padding: 3px 12px; }
.none { font-style: italic; font-size: calc(12px * var(--f)); color: #6a5030; }

/* ---------------------------------------------------------------- options */
.options-gump .gump-body { width: min(calc(330px * var(--f)), 92vw); display: flex; flex-direction: column; gap: 4px; }
.options-gump .sec { font-weight: bold; color: #6a2a10; border-bottom: 1px solid #6a2a1055; margin-top: 4px; }
.options-gump label { display: grid; grid-template-columns: calc(84px * var(--f)) 1fr calc(30px * var(--f)); align-items: center; gap: 8px; }
.options-gump label.chk { display: flex; gap: 6px; align-items: center; }
.options-gump label b { text-align: right; font-variant-numeric: tabular-nums; }
.options-gump select { background: #f3e6c4; color: var(--ink); border: 1px solid #1a1208; padding: 2px 4px; }

.options-gump label.wide { display: block; }
.options-gump label.wide select { width: 100%; }

/* ---------------------------------------------------------------- how many? */
.amount-gump .gump-body { width: calc(200px * var(--f)); display: flex; flex-direction: column; gap: 6px; }
.am-row { display: flex; align-items: center; gap: 6px; }
.am-row img { width: 28px; height: 28px; image-rendering: pixelated; }
.am-row input[type=range] { flex: 1; min-width: 0; }
.am-row input[type=number] { width: calc(48px * var(--f)); background: #f3e6c4; color: var(--ink); border: 1px solid #1a1208; padding: 1px 3px; }
.am-row button { flex: 1; background: linear-gradient(#5a4a30, #3a2e1c); color: var(--gold); border: 1px solid #1a1208; padding: 2px 4px; }

/* ---------------------------------------------------------------- journal */
.journal-gump .gump-body { width: min(calc(420px * var(--f)), 92vw); padding: 4px 6px; }
.jr-list { height: calc(220px * var(--f)); overflow-y: auto; user-select: text; -webkit-user-select: text; }
.jr { font-size: calc(12px * var(--f)); padding: 1px 0; color: var(--ink); }
.jr span { color: #8a7050; margin-right: 6px; font-variant-numeric: tabular-nums; font-size: calc(10px * var(--f)); }
.jr.gain { color: #1f6a1f; } .jr.info { color: #1f4a8a; } .jr.speech { color: #5a3a00; font-weight: bold; } .jr.emote { color: #9a4a10; font-style: italic; }

/* ---------------------------------------------------------------- radar & help */
/* UO's radar is a bare round dish: no title bar, drag it by the rim */
.radar-gump { border-radius: 50%; padding: calc(4px * var(--u)); }
.radar-gump .gump-title { display: none; }
.radar-gump .gump-body { padding: 0; background: #000; border-radius: 50%; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #8a7a58; overflow: hidden; }
.radar { display: block; width: calc(200px * var(--f)); height: calc(200px * var(--f)); image-rendering: pixelated; border-radius: 50%; }

/* ---------------------------------------------------------------- who */
.who-gump .gump-body { width: min(calc(360px * var(--f)), 92vw); }
.who-count { font-weight: bold; color: #6a2a10; border-bottom: 1px solid #6a2a1055; margin-bottom: 4px; }
.who-list { max-height: 50vh; overflow-y: auto; }
.who-row { display: grid; grid-template-columns: calc(22px * var(--f)) auto 1fr auto; align-items: center; gap: 6px; padding: 1px 0; font-size: calc(12px * var(--f)); }
.who-row b { font-size: calc(13px * var(--f)); }
.who-row.me b { color: #6a2a10; }
.who-row i { color: #6a5030; }
.who-dot { width: calc(22px * var(--f)); height: calc(22px * var(--f)); background: center / contain no-repeat; image-rendering: pixelated; }
.who-refresh { margin-top: 6px; background: linear-gradient(#5a4a30, #3a2e1c); color: var(--gold); border: 1px solid #1a1208; padding: 2px 10px; }
/* How to Play: chapters down the left, the chosen one on the right (it scrolls; the window never outgrows the screen) */
.help-gump .gump-body { width: min(calc(560px * var(--f)), 94vw); font-size: calc(13px * var(--f)); display: flex; gap: calc(5px * var(--u)); align-items: flex-start; }
.help-tabs { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.help-tabs button { background: linear-gradient(#5a4a30, #3a2e1c); color: var(--gold); border: 1px solid #1a1208; padding: 4px 9px; text-align: left; white-space: nowrap; font: inherit; }
.help-tabs button.on { background: linear-gradient(#8a6a34, #5a4220); color: #fff3c8; box-shadow: inset 0 0 0 1px #f0cf7455; }
.help-page { flex: 1; min-width: 0; height: min(60vh, calc(420px * var(--f))); overflow-y: auto; padding-right: calc(3px * var(--u)); }
@media (max-width: 560px) { .help-gump .gump-body { flex-direction: column; } .help-tabs { flex-direction: row; flex-wrap: wrap; } .help-page { height: 52vh; width: 100%; } }
.help-gump p { margin: 4px 0; }
.keys { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: calc(12px * var(--f)); }
.keys td { padding: 1px 4px; }
.keys td:nth-child(odd) { font-weight: bold; color: #6a2a10; white-space: nowrap; }
.help-gump .fine, .gump-body .fine { color: #6a5030; }

/* quest log */
.quest-gump .gump-body { width: min(calc(380px * var(--f)), 94vw); display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.q-row { border-bottom: 1px solid rgba(0, 0, 0, 0.35); padding-bottom: 7px; }
.q-row:last-child { border-bottom: 0; }
.q-row.done { opacity: 0.6; }
.q-name { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.q-name b { color: #5a2408; }
.q-name i { font-size: calc(11px * var(--f)); white-space: nowrap; }
.q-row.ready .q-name i { color: #1f6a1a; font-weight: bold; }
.q-blurb, .q-reward { font-size: calc(12px * var(--f)); margin-top: 2px; }
.q-reward { opacity: 0.8; }
.q-bar { position: relative; height: calc(14px * var(--f)); margin-top: 4px; background: rgba(0, 0, 0, 0.45); border: 1px solid #1a1208; }
.q-bar span { display: block; height: 100%; background: linear-gradient(#b89040, #7a5c20); }
.q-bar em { position: absolute; inset: 0; text-align: center; font-style: normal; font-size: calc(10px * var(--f)); line-height: calc(14px * var(--f)); color: #fff; }

/* tinkering */
.craft-gump .gump-body { width: min(calc(420px * var(--f)), 94vw); max-height: 70vh; overflow-y: auto; }
.cr-skill { font-size: calc(12px * var(--f)); text-align: right; opacity: 0.8; }
.cr-row { display: grid; grid-template-columns: calc(34px * var(--f)) 1fr auto auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.3); font-size: calc(13px * var(--f)); }
.cr-row.hard { opacity: 0.5; }
.cr-row b { color: #5a2408; }
.cr-out { width: calc(34px * var(--f)); height: calc(34px * var(--f)); object-fit: contain; image-rendering: pixelated; }
.cr-needs { display: flex; flex-wrap: wrap; gap: 8px; font-size: calc(11px * var(--f)); }
.cr-needs span { display: inline-flex; align-items: center; gap: 2px; }
.cr-needs span.lack { color: #9a1c10; }
.cr-needs img { width: calc(18px * var(--f)); height: calc(18px * var(--f)); object-fit: contain; }
.cr-chance { font-size: calc(11px * var(--f)); min-width: 4em; text-align: right; }
.cr-row button { background: linear-gradient(#5a4a30, #3a2e1c); color: var(--gold); border: 1px solid #1a1208; padding: 3px 10px; font-size: calc(12px * var(--f)); }
.cr-row button:disabled { opacity: 0.4; }

/* part of a stack riding the cursor after "how many?" */
.drag-img.carry { pointer-events: none; }
.drag-img.carry img { width: 100%; height: 100%; image-rendering: pixelated; }
.drag-img.carry .amt { position: absolute; right: 0; bottom: 0; font: bold calc(11px * var(--f)) var(--sans); color: #fff; text-shadow: 1px 1px 0 #000; }
body.carrying, body.carrying * { cursor: grabbing !important; }

/* speech colour swatches (Options) */
.hues { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 4px 0 6px; }
.hue { height: calc(20px * var(--f)); border: 2px solid #1a1208; border-radius: 3px; padding: 0; }
.hue.on { border-color: #fff; box-shadow: 0 0 0 2px #1a1208; }

/* the way in: shard list, dog list, paged dog creation */
.list-panel { width: 460px; display: flex; flex-direction: column; gap: 10px; }
.rows { display: flex; flex-direction: column; gap: 6px; }
.panel button.rowbtn { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; text-align: left; padding: 8px 10px; font-size: 14px; color: #e8e2d0; }
.panel button.rowbtn.dog, .panel button.rowbtn.new { grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; }
.rowbtn i { grid-row: 1 / 3; width: 44px; height: 44px; background: #0006 center / contain no-repeat; border: 1px solid #1a1208; image-rendering: pixelated; }
.rowbtn b { color: var(--gold); font-size: 16px; }
.rowbtn span { font-size: 12px; opacity: 0.85; }
.rowbtn.dog span:last-child, .rowbtn.new span:last-child { grid-column: 2 / 4; }
.panel button.rowbtn.on { outline: 2px solid var(--gold); filter: brightness(1.15); }
.panel button.rowbtn:hover { outline: 2px solid var(--gold); filter: brightness(1.25); cursor: pointer; }
.panel button.rowbtn.new { opacity: 0.75; border-style: dashed; }
.page { display: none; flex-direction: column; gap: 8px; }
.page.active { display: flex; }
.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.starts { display: flex; flex-direction: column; gap: 8px; }
.panel button.kind { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 8px 10px; color: #e8e2d0; }
.kind b { color: var(--gold); font-size: 16px; }
.kind span { font-size: 12px; line-height: 1.3; }
.kind small { font-size: 11px; opacity: 0.7; }
.panel button.kind.on { outline: 2px solid var(--gold); filter: brightness(1.15); }
#c-map { width: 340px; height: 340px; max-width: 100%; border: 1px solid #1a1208; box-shadow: 0 2px 8px #0008; cursor: pointer; justify-self: center; } /* (drawn at 460 and shown smaller: the parchment map's lettering stays sharp) */
.page[data-page="start"] .cols { grid-template-columns: 340px 1fr; align-items: start; }
.panel .error input { width: 120px; }
@media (max-width: 660px) { .list-panel, .create-panel { width: 94vw; } .kinds, .cols { grid-template-columns: 1fr; } #c-map { width: min(340px, 86vw); height: auto; aspect-ratio: 1; } .page[data-page="start"] .cols { grid-template-columns: 1fr; } }

/* .help: the command list */
.commands-gump .gump-body { width: min(calc(560px * var(--f)), 94vw); max-height: 72vh; overflow-y: auto; }
.cmd-row { display: grid; grid-template-columns: minmax(0, 46%) 1fr; gap: 10px; padding: 2px 0; font-size: calc(12px * var(--f)); align-items: baseline; }
.cmd-row code { font: bold calc(12px * var(--f)) ui-monospace, Menlo, monospace; color: #5a2408; overflow-wrap: anywhere; }
.commands-gump .sec { color: #5a2408; font-weight: bold; border-bottom: 1px solid rgba(0, 0, 0, 0.35); margin-top: 8px; padding-bottom: 2px; }

/* combat: numbers that float up from whoever was struck */
.dmg { position: absolute; left: 50%; bottom: 100%; font: bold calc(10px * var(--u) * var(--f)) var(--sans); pointer-events: none; white-space: nowrap;
  text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; animation: dmgrise 1.1s ease-out forwards; }
.dmg.me { color: #ff4a3a; } .dmg.mine { color: #fff27a; } .dmg.other { color: #ffb36b; font-size: calc(8px * var(--u) * var(--f)); }
.dmg.miss { color: #c8c8c8; font-style: italic; font-size: calc(8px * var(--u) * var(--f)); }
@keyframes dmgrise { 0% { opacity: 0; transform: translate(calc(-50% + var(--dx)), 10px) scale(0.7); } 12% { opacity: 1; transform: translate(calc(-50% + var(--dx)), -6px) scale(1.25); }
  30% { transform: translate(calc(-50% + var(--dx)), -14px) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -46px) scale(1); } }
.jl.hurt { color: #ff8a7a; }
.jr.hurt { color: #9a1c10; }

/* weather: a layer over the world, under the windows */
#weather { position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 2.5s; }
#weather.rain, #weather.fog, #weather.storm, #weather.snow { opacity: 1; }
/* rain: separate drops drawn on a canvas (client.js drawRain), over a slight grey wash. (It used to be two
   scrolling striped backgrounds that did not tile: every loop they jumped sideways.) */
#weather.rain { background: linear-gradient(rgba(40, 55, 80, 0.16), rgba(40, 55, 80, 0.22)); }
#rain { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
#weather.rain #rain, #weather.storm #rain, #weather.snow #rain { display: block; }
#weather.storm { background: linear-gradient(rgba(20, 28, 48, 0.3), rgba(20, 28, 48, 0.38)); }
#weather.snow { background: linear-gradient(rgba(225, 235, 250, 0.1), rgba(225, 235, 250, 0.16)); }
.sky-flash.storm { animation: stormflash 0.48s ease-out forwards; }
@keyframes stormflash { 0% { opacity: 0.5; } 12% { opacity: 0.1; } 22% { opacity: 0.42; } 100% { opacity: 0; } }
#weather.fog { background:
  radial-gradient(ellipse 60% 40% at 30% 40%, rgba(225, 230, 235, 0.24), transparent 70%),
  radial-gradient(ellipse 70% 45% at 75% 65%, rgba(225, 230, 235, 0.22), transparent 70%),
  radial-gradient(ellipse 90% 60% at 50% 100%, rgba(225, 230, 235, 0.26), transparent 75%),
  rgba(205, 212, 220, 0.13);
  background-size: 200% 200%, 200% 200%, 200% 200%, auto; animation: fogdrift 46s ease-in-out infinite alternate; }
@keyframes fogdrift { from { background-position: 0% 0%, 100% 50%, 50% 100%, 0 0; } to { background-position: 60% 30%, 20% 70%, 80% 60%, 0 0; } }
body:not(.in-game) #weather { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #weather.fog { animation: none; } #weather #rain { display: none !important; } .sky-flash.storm { display: none; } }

/* a race in progress */
#race { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 4; padding: 5px 14px; pointer-events: none;
  font: bold calc(14px * var(--f)) ui-monospace, Menlo, monospace; color: #fff27a; background: rgba(0, 0, 0, 0.55); border: 1px solid #000; border-radius: 4px; }

/* books: an open book (the spellbook's picture), two pages to a spread */
.tome-page { gap: calc(2px * var(--u)); font: calc(6px * var(--u) * var(--f)) / 1.4 var(--serif); color: #2a1a08; }
.tome-page .bk-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; border-bottom: 1px solid #6a2a1055; padding-bottom: calc(2px * var(--u)); }
.tome-page .bk-head b { font: bold calc(8px * var(--u) * var(--f)) / 1.15 var(--serif); color: #6a2a10; }
.tome-page .bk-head i { font-size: calc(5.5px * var(--u) * var(--f)); opacity: 0.8; }
.bk-title { width: 100%; box-sizing: border-box; font: bold calc(7.5px * var(--u) * var(--f)) var(--serif); text-align: center; background: #fff8e066; border: 1px dashed #6a2a1088; color: #6a2a10; padding: 1px; }
.bk-text { flex: 1; white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; }
textarea.bk-text { resize: none; width: 100%; box-sizing: border-box; background: #fff8e044; border: 1px dashed #6a2a1066; font: inherit; color: inherit; padding: 1px; }
.bk-no { align-self: center; margin-top: auto; font-size: calc(5px * var(--u) * var(--f)); opacity: 0.6; }
.bk-add { margin: auto; background: none; border: 1px dashed #6a2a1088; color: #6a2a10; font: italic calc(6px * var(--u) * var(--f)) var(--serif); padding: calc(3px * var(--u)); }
.bk-turn { position: absolute; bottom: calc(24px * var(--u)); background: none; border: 0; color: #6a2a10; font-size: calc(14px * var(--u)); line-height: 1; padding: calc(4px * var(--u)) calc(8px * var(--u)); min-width: calc(30px * var(--u)); cursor: pointer; }
.bk-turn:hover { color: #c0401a; }
.bk-prev { left: calc(22px * var(--u)); } .bk-next { right: calc(22px * var(--u)); }
.bk-turn[hidden] { display: none; }
.tome-gump .bk-foot { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px; font-size: calc(11px * var(--f)); color: #e8e2d0; }
.tome-gump .bk-foot button { background: linear-gradient(#5a4a30, #3a2e1c); color: var(--gold); border: 1px solid #1a1208; padding: 3px 10px; font-size: calc(12px * var(--f)); }
.bk-list { display: flex; flex-direction: column; gap: calc(2px * var(--u)); }
.bk-list button { display: flex; flex-direction: column; text-align: left; background: none; border: 0; border-bottom: 1px solid #6a2a1033; padding: calc(1.5px * var(--u)) 1px; font: inherit; color: inherit; }
.bk-list button b { color: #6a2a10; font-size: calc(6.5px * var(--u) * var(--f)); }
.bk-list button span { font-style: italic; font-size: calc(5.5px * var(--u) * var(--f)); opacity: 0.8; }
.bk-list button:hover b { text-decoration: underline; }

/* GM dashboard */
.dash-gump .gump-body { width: min(calc(760px * var(--f)), 96vw); max-height: 86vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; font-size: calc(12px * var(--f)); }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(68px * var(--f)), 1fr)); gap: 6px; }
.dash-tiles div { display: flex; flex-direction: column; align-items: center; padding: 5px 2px; background: rgba(0, 0, 0, 0.12); border: 1px solid rgba(0, 0, 0, 0.3); font-size: calc(11px * var(--f)); }
.dash-tiles b { font: bold calc(18px * var(--f)) var(--serif); color: #5a2408; }
.dash-tiles small { font-size: calc(9px * var(--f)); opacity: 0.75; }
.dash-scripts { margin: 4px 0; } .dash-scripts summary { cursor: pointer; } .dash-scripts table { margin: 4px 0; } .dash-scripts .bad { color: #9a1c10; }
.dash-save { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-save span { margin-left: auto; }
.dash-save.warn b:first-of-type { color: #9a5a00; } .dash-save.bad { color: #9a1c10; }
.dash-gump button { background: linear-gradient(#5a4a30, #3a2e1c); color: var(--gold); border: 1px solid #1a1208; padding: 2px 8px; font-size: calc(11px * var(--f)); margin-left: 2px; }
.dash-log { max-height: calc(200px * var(--f)); overflow-y: auto; background: rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.3); padding: 4px 6px; font: calc(11px * var(--f)) ui-monospace, Menlo, monospace; }
.dash-log div { display: grid; grid-template-columns: 5.2em 8em 1fr; gap: 6px; }
.dash-log i { opacity: 0.6; font-style: normal; } .dash-log b { color: #5a2408; }
.dash-log span { overflow-wrap: anywhere; }
.dash-log .ev-error b, .dash-log .ev-save-failed b, .dash-log .ev-kicked b { color: #9a1c10; }

/* health bars dragged off creatures */
.hbar { position: fixed; z-index: 6; pointer-events: auto; width: calc(120px * var(--f)); padding: 3px 6px 5px; cursor: grab; user-select: none;
  background: var(--stone) 0 0 / 96px repeat, #3a352d; border: 1px solid #000; box-shadow: 0 2px 6px #000a; }
.hb-name { display: block; font: bold calc(11px * var(--f)) var(--sans); color: #a8c8ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 0 #000; }
.hbar.foe .hb-name { color: #ff8a7a; }
.hb-track { height: calc(7px * var(--f)); background: #300; border: 1px solid #000; margin-top: 2px; }
.hb-track i { display: block; height: 100%; background: linear-gradient(#5ad05a, #2a8a2a); transition: width 0.2s; }
.hbar.low .hb-track i { background: linear-gradient(#e0a030, #a05a10); }
.hbar.gone { opacity: 0.45; filter: grayscale(1); }
body.targeting .hbar, body.targeting .hbar * { cursor: url(assets/art/cursor-target.png) 16 16, crosshair; }
body.targeting .hbar { outline: 1px solid var(--gold); }

/* ---------------------------------------------------------------- scroll bars
   Every list that scrolls (a shop's wares, the journal, the skills, a long gump) gets a bar of the game's own: a plain
   dark groove and a bronze slider with round ends. Chrome, Edge
   and desktop Safari draw it from the ::-webkit-scrollbar parts. Firefox can only be given two colours (the @supports
   block: set for everyone it would switch the carved bar OFF in Chrome). A phone's bars float over the list and fade
   by themselves; the browser gives a page no say in those. */
/* (the bar is 4 units wide with 2 units of clear space either side: the space is part of the scrollbar itself, a
   transparent border, so no list needs padding of its own to keep its buttons off the bar. Its corners are softened, not pointed) */
::-webkit-scrollbar { width: calc(8px * var(--u)); height: calc(8px * var(--u)); }
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { background-clip: padding-box; border: 0 solid transparent; border-width: 0 calc(2px * var(--u)); border-radius: calc(3.5px * var(--u)) / calc(1.5px * var(--u)); } /* (across, the border's 2 units come off the radius; up and down nothing does: 3.5 / 1.5 leaves an even corner of 1.5 units, softened and not a point) */
::-webkit-scrollbar-track { background-color: #1a1208; }
::-webkit-scrollbar-thumb { background-image: linear-gradient(90deg, #8a6a34, #b8954a 40%, #8a6a34 70%, #5a4220); min-height: calc(14px * var(--u)); }
::-webkit-scrollbar-thumb:hover { background-image: linear-gradient(90deg, #a07c40, #d4b060 40%, #a07c40 70%, #6a4e26); }
::-webkit-scrollbar-thumb:active { background-image: linear-gradient(90deg, #6a5028, #9a7c40 40%, #6a5028 70%, #4a3618); }
::-webkit-scrollbar-track:horizontal, ::-webkit-scrollbar-thumb:horizontal { border-width: calc(2px * var(--u)) 0; border-radius: calc(1.5px * var(--u)) / calc(3.5px * var(--u)); }
::-webkit-scrollbar-thumb:horizontal { background-image: linear-gradient(#8a6a34, #b8954a 40%, #8a6a34 70%, #5a4220); min-width: calc(14px * var(--u)); }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-color: #b8954a #1a1208; scrollbar-width: thin; } }

/* Line breaks chosen with some care, where the browser can (it falls back to the plain kind where it cannot): words
   over a head and centred headings in lines of even length, running text without a word left alone on its last line. */
.over .line, .bk-head, .pd-name, .sg-head, .gump-title span { text-wrap: balance; }
.gump-body p, .bk-text, .sg-li, .jr, .dash-log span { text-wrap: pretty; }
.options-gump .o-full { width: 100%; margin-top: 4px; padding: 5px 8px; background: linear-gradient(#5a4a30, #3a2e1c); color: var(--gold); border: 1px solid #1a1208; box-shadow: inset 0 1px 0 #8a7448; border-radius: 2px; }
.options-gump .o-full:hover, .options-gump .o-logout:hover { filter: brightness(1.2); }
.options-gump .o-logout { width: 100%; padding: 5px 8px; border: 1px solid #2a0806; box-shadow: inset 0 1px 0 #b04030; border-radius: 2px; }