/* Pixlaria's interface kit, loaded last: one crafted look taken from the logo. Every frame is the same
   carved block: a warm ink outline, corners cut at 45 degrees like the world's blocks, a lit upper-left
   edge, a shaded lower-right one and a hard ledge of shadow below. Parchment holds what you read (your
   card, panels, windows, menus, the tooltip); dark evergreen trays hold what you use (chat, the spell
   bar, the food belt). Title bars are evergreen, keys and badges ink with honey letters, and bars and
   buttons are painted in three flat bands like the world. Headings, keys and numbers use Pixlaria
   Blocks (the logo's letters, built by tools/make-font.py) at 8 or 16 px, where every cell lands on a
   whole pixel; reading text uses a rounded face. Pictures come from the pixel icon kit in
   client/js/icons.js, shown at whole-number scales. */
@font-face { font-family: 'Pixlaria Blocks'; src: url('../fonts/pixlaria-blocks.woff2') format('woff2'); font-display: swap; }

body {
  --ink: #2b1d0e; --honey: #f6c531; --honey-hi: #ffe27a; --honey-deep: #d29c1c; --leaf: #3f8a4e; --leaf-hi: #64ae6b; --leaf-deep: #2c6a3c; --paper: #fff6de;
  --brown: #7a5424; --line: #e2c88e;
  --blocks: 'Pixlaria Blocks', 'Trebuchet MS', sans-serif;
  --read: ui-rounded, 'SF Pro Rounded', 'Nunito', 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif;
  --parchment: linear-gradient(#fffaee, #f6e5bc);
  --raised: linear-gradient(#fffaee, #f1dcae);
  --ledge: 0 4px 0 rgba(43, 29, 14, 0.4);
  --bevel: inset 2px 2px 0 rgba(255, 255, 255, 0.8), inset -2px -2px 0 rgba(201, 150, 62, 0.32);
  --evergreen: linear-gradient(#64ae6b 0 3px, #3f8a4e 3px calc(100% - 4px), #2c6a3c calc(100% - 4px));
  --leather: linear-gradient(#c98a52 0 3px, #9a6437 3px calc(100% - 4px), #6e4424 calc(100% - 4px));   /* the satchel icon's ramp */
  --inked: 1px 0 0 #2b1d0e, -1px 0 0 #2b1d0e, 0 1px 0 #2b1d0e, 0 -1px 0 #2b1d0e;
  font-family: var(--read);
  font-weight: 700;
}
button, input { font-family: var(--read); }
button:focus-visible, input:focus-visible { outline: 3px solid var(--honey); outline-offset: 2px; }
.px-icon { display: inline-block; line-height: 0; flex: none; }
.px-icon canvas, canvas.spell-icon, #hud-flags img { display: block; image-rendering: pixelated; }

/* ---- The frame everything wears ---- */
#hud, #journey-card, #panel, .window, #menu {
  background: var(--parchment);
  border: 3px solid var(--ink);
  border-radius: 12px;
  corner-shape: bevel;
  box-shadow: var(--bevel), var(--ledge);
  color: var(--ink);
  text-shadow: none;
}
#chat, #hotbar, #foodbar {
  background: rgba(29, 52, 38, 0.86);
  border: 3px solid var(--ink);
  border-radius: 12px;
  corner-shape: bevel;
  box-shadow: inset 2px 2px 0 rgba(140, 204, 146, 0.22), inset -2px -2px 0 rgba(0, 0, 0, 0.25), var(--ledge);
}
/* Title bars: evergreen in three bands, the title in block letters, a close key at the end. */
.panel-head, .window h3 {
  display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 5px 44px 5px 10px;
  background: var(--evergreen); border-bottom: 3px solid var(--ink); border-radius: 9px 9px 0 0; corner-shape: bevel;
  color: var(--paper); font: 16px/1.2 var(--blocks); letter-spacing: 0.04em; text-shadow: 0 2px 0 var(--ink);
}
.panel-head .px-icon canvas { width: 28px; height: 28px; }
.panel-head .close, .window .close, #journey-card .close {
  position: absolute; top: 8px; right: 9px; width: 28px; height: 28px; min-height: 0; padding: 0 0 1px 1px;
  background: var(--raised); border: 2px solid var(--ink); border-radius: 6px; corner-shape: bevel;
  box-shadow: inset 0 -3px 0 rgba(160, 110, 40, 0.3); color: var(--ink); font: 16px/1 var(--blocks); text-shadow: none; cursor: pointer;
}
.panel-head .close:hover, .window .close:hover, #journey-card .close:hover { background: linear-gradient(#fff0a8, var(--honey)); }
/* Buttons inside the frames: honey keys with a darker lip. */
#settings button, .window button, #friends button, #mm-tools button {
  min-height: 0; padding: 4px 10px; background: linear-gradient(var(--honey-hi), #f0b93a); border: 2px solid var(--ink); border-radius: 6px; corner-shape: bevel;
  box-shadow: inset 0 -3px 0 rgba(150, 90, 10, 0.32); color: var(--ink); font: 800 12px var(--read); cursor: pointer;
}
#settings button:hover, .window button:hover, #friends button:hover, #mm-tools button:hover { background: linear-gradient(#fff0a8, var(--honey)); }
#settings button:active, .window button:active, #friends button:active, #mm-tools button:active { box-shadow: inset 0 2px 0 rgba(150, 90, 10, 0.32); }
/* Keys: a little ink or paper cap with the letter on it. */
kbd { display: inline-block; min-width: 18px; height: 18px; padding: 0 4px; margin: 0 1px; background: #fffdf5; border: 2px solid var(--ink); border-bottom-width: 3px; border-radius: 4px; corner-shape: bevel; font: 800 10px/13px var(--read); color: var(--ink); text-align: center; vertical-align: middle; white-space: nowrap; }
.hslot .key, #dialog .opt .k, #spells .spell kbd {
  min-width: 17px; height: 17px; padding: 0 3px; margin: 0; background: var(--ink); border: 0; border-radius: 4px; corner-shape: bevel;
  color: var(--honey); font: 8px/17px var(--blocks); text-align: center;
}

/* ---- Your card: portrait, name and levels, health, mana and experience ---- */
#hud-left { position: absolute; left: 12px; top: 12px; z-index: 8; width: 280px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
#hud-left > * { pointer-events: auto; }
#hud { position: relative; padding: 10px 12px 11px; }
.hud-top { display: flex; align-items: center; gap: 14px; padding-left: 2px; }
#hud-portrait {
  position: relative; flex: none; width: 58px; height: 58px; border: 3px solid var(--ink); border-radius: 13px; corner-shape: bevel;
  background: linear-gradient(#cfe9ff 0 55%, #9ccff4 55%); --ring: var(--honey); box-shadow: 0 0 0 3px var(--ring), 0 0 0 5px var(--ink), 0 5px 0 5px rgba(43, 29, 14, 0.25);
}
#hud-portrait canvas { display: block; width: 52px; height: 52px; border-radius: 10px; corner-shape: bevel; }
/* The portrait answers what happens to you (ui.js sets the classes): a red flinch when you are hit, a
   honey pop when you level up, a slow honey breath while you are warm by a fire, and the danger red on
   its ring while your health is under a quarter. The flash is a tinted sheet over the face; the ring
   is the first of the frame's shadows, so the reactions restate all three. */
#hud-portrait::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 10px; corner-shape: bevel; background: #ea4f3b; opacity: 0; pointer-events: none; }
#hud-portrait.warm { animation: portrait-warm 2.4s ease-in-out infinite; }
#hud-portrait.low { --ring: #ea4f3b; animation: portrait-low 0.9s ease-in-out infinite; }
#hud-portrait.hit { animation: portrait-hit 260ms steps(1, end); }
#hud-portrait.hit::before { animation: portrait-flash 260ms steps(1, end); }
#hud-portrait.level { animation: portrait-level 600ms ease-out; }
#hud-portrait.level::before { background: var(--honey-hi); animation: portrait-flash 600ms ease-out; }
@keyframes portrait-warm {
  0%, 100% { box-shadow: 0 0 0 3px var(--honey), 0 0 0 5px var(--ink), 0 5px 0 5px rgba(43, 29, 14, 0.25), 0 0 8px 5px rgba(255, 176, 90, 0.35); }
  50% { box-shadow: 0 0 0 3px var(--honey-hi), 0 0 0 5px var(--ink), 0 5px 0 5px rgba(43, 29, 14, 0.25), 0 0 16px 8px rgba(255, 176, 90, 0.75); }
}
@keyframes portrait-low {
  0%, 100% { box-shadow: 0 0 0 3px #ea4f3b, 0 0 0 5px var(--ink), 0 5px 0 5px rgba(43, 29, 14, 0.25), 0 0 0 5px rgba(234, 79, 59, 0); }
  50% { box-shadow: 0 0 0 3px #ff9a86, 0 0 0 5px var(--ink), 0 5px 0 5px rgba(43, 29, 14, 0.25), 0 0 10px 5px rgba(234, 79, 59, 0.5); }
}
/* Whole-pixel steps: the face jumps rather than slides, the way the world's blocks move. */
@keyframes portrait-hit {
  0% { transform: translate(-2px, 0); box-shadow: 0 0 0 3px #ea4f3b, 0 0 0 5px var(--ink), 0 5px 0 5px rgba(43, 29, 14, 0.25); }
  25% { transform: translate(2px, 1px); }
  50% { transform: translate(-2px, 0); }
  75% { transform: translate(1px, -1px); }
  100% { transform: none; box-shadow: 0 0 0 3px var(--ring), 0 0 0 5px var(--ink), 0 5px 0 5px rgba(43, 29, 14, 0.25); }
}
@keyframes portrait-flash { 0% { opacity: 0.55; } 40% { opacity: 0.3; } 100% { opacity: 0; } }
@keyframes portrait-level {
  0% { transform: scale(1); box-shadow: 0 0 0 3px var(--honey-hi), 0 0 0 5px var(--ink), 0 5px 0 5px rgba(43, 29, 14, 0.25), 0 0 0 0 rgba(255, 226, 122, 0); }
  35% { transform: scale(1.14); box-shadow: 0 0 0 3px #fff6de, 0 0 0 5px var(--ink), 0 5px 0 5px rgba(43, 29, 14, 0.25), 0 0 18px 10px rgba(255, 214, 90, 0.85); }
  70% { transform: scale(0.97); }
  100% { transform: scale(1); box-shadow: 0 0 0 3px var(--ring), 0 0 0 5px var(--ink), 0 5px 0 5px rgba(43, 29, 14, 0.25), 0 0 0 0 rgba(255, 226, 122, 0); }
}
/* Less motion: the ring holds its colour and the face only flashes, without the shake or the pop. */
@media (prefers-reduced-motion: reduce) {
  #hud-portrait.warm, #hud-portrait.low, #hud-portrait.hit, #hud-portrait.level { animation: none; }
  #hud-portrait.warm { --ring: var(--honey-hi); box-shadow: 0 0 0 3px var(--ring), 0 0 0 5px var(--ink), 0 5px 0 5px rgba(43, 29, 14, 0.25), 0 0 12px 6px rgba(255, 176, 90, 0.55); }
}
#hud-lvl {
  position: absolute; right: -12px; bottom: -11px; min-width: 24px; height: 22px; padding: 0 3px 0 5px;
  background: linear-gradient(var(--honey-hi) 0 4px, var(--honey) 4px 13px, var(--honey-deep) 13px); border: 2px solid var(--ink); border-radius: 5px; corner-shape: bevel;
  color: var(--ink); font: 16px/19px var(--blocks); text-align: center;
}
.hud-id { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
#hud-name { font: 16px/1 var(--blocks); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 2px 2px 0 rgba(210, 156, 28, 0.38); padding-bottom: 2px; }
#hud-level { display: block; font: 700 11.5px/1.3 var(--read); color: var(--brown); }
#hud-level b { font-weight: 800; color: var(--ink); }
.meter { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.hud-top + .meter { margin-top: 13px; }
.meter .px-icon canvas { width: 14px; height: 14px; }
/* The bars are 22 px tall so their numbers can be the 16 px block digits, read at a glance at the
   bar's right end: the value bright, the maximum in a quieter tone behind its slash. */
.bar { position: relative; flex: 1; height: 22px; background: #5b3f25; border: 2px solid var(--ink); border-radius: 5px; corner-shape: bevel; overflow: hidden; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.28); }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transition: width 0.15s; box-shadow: inset -2px 0 0 rgba(43, 29, 14, 0.25); }
.bar.hp .fill { background: linear-gradient(#ff9a86 0 4px, #ea4f3b 4px 12px, #b9362a 12px); }
.bar.mana .fill { background: linear-gradient(#9fd4ff 0 4px, #3b93e8 4px 12px, #256bbc 12px); }
.bar span { position: absolute; inset: 0; padding-right: 7px; font: 16px/18px var(--blocks); color: #fff; text-align: right; text-shadow: var(--inked); white-space: nowrap; }
.bar span .max { font-style: normal; opacity: 0.7; }
.bar span.tight .max { display: none; }   /* (too narrow for all of it: what you have alone, ui.js fitBar) */
#xp-meter { min-height: 24px; cursor: pointer; }
#xp-meter:focus-visible { outline: 2px solid var(--honey-deep); outline-offset: 2px; border-radius: 4px; }
#xp-meter:hover .bar { border-color: var(--honey-deep); }
.meter.xp .px-icon canvas { width: 14px; height: 14px; }
.bar.xp { box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.28); background: #5b3f25 repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255, 246, 222, 0.14) calc(10% - 1px) 10%); }
.bar.xp .fill { background: linear-gradient(#ffe27a 0 2px, #f6c531 2px 6px, #d29c1c 6px); }
/* The level the bar fills toward sits in an ink chip at its left, like the keys; the percentage is read at the right. */
.bar.xp .lv { position: absolute; left: 3px; top: 3px; height: 12px; padding: 0 4px; background: var(--ink); border-radius: 3px; corner-shape: bevel; color: var(--honey); font: 8px/12px var(--blocks); letter-spacing: 0.04em; white-space: nowrap; }
.hud-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
#hud-flags { display: contents; }
#hud-flags span {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 7px 0 4px; background: #fffaf0; border: 2px solid var(--ink); border-radius: 5px; corner-shape: bevel;
  font: 700 11.5px/1 var(--read); color: var(--ink); white-space: nowrap;
}
#hud-flags img { width: 14px; height: 14px; }
#hud-flags .pz { background: #e3f1cf; color: #2c5a1f; }
#hud-flags .low-ammo { background: #fff2c6; color: #70480b; }
#hud-flags .empty-bow { background: #ffe3dc; color: #9a2a1e; }
#hud-flags .warm { background: #ffe9c7; color: #8a4312; }
#hud-flags .skull, #hud-flags .target { background: #ffe3dc; color: #9a2a1e; }
#hud-flags .light { background: #fff2c6; color: #7a5410; }
#btn-notes {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; min-height: 0; margin-left: auto; padding: 0 9px 0 5px;
  background: var(--raised); border: 2px solid var(--ink); border-radius: 6px; corner-shape: bevel; box-shadow: inset 0 -3px 0 rgba(160, 110, 40, 0.28);
  color: var(--ink); font: 800 12px var(--read); cursor: pointer; white-space: nowrap;
}
#btn-notes .px-icon canvas { width: 14px; height: 14px; }
#btn-notes:hover { background: linear-gradient(#fffdf5, #f7e6bf); }
#btn-notes.on { background: var(--evergreen); color: var(--paper); text-shadow: 0 1px 0 var(--ink); box-shadow: none; }
#journey-card { position: relative; padding: 11px 14px 13px; }
#journey-card .close { top: 7px; right: 8px; }
.journey-eyebrow { display: block; padding-right: 32px; font: 8px/1.4 var(--blocks); letter-spacing: 0.06em; color: #a8620e; }
#journey-card h2 { margin: 7px 0 6px; font: 16px/1.25 var(--blocks); color: var(--leaf-deep); }
#journey-card p { margin: 0; font: 600 13px/1.45 var(--read); color: #4a3a22; }
/* The story in a line at the foot of the Field notes while they tell of something else (journey.js questLine). */
#journey-card .journey-quest { margin-top: 8px; padding: 5px 8px; border: 2px solid var(--ink); border-radius: 6px; corner-shape: bevel; background: #fff3c4; font: 700 12px/1.4 var(--read); color: #4a3a22; }
#journey-card .journey-quest::before { content: 'QUEST · '; font: 800 10px/1 var(--read); letter-spacing: 0.06em; color: #8a4a1e; }
/* A honey "!" by the name of the next townsperson in your story (entities.js setQuestWho). */
.label .name .quest-mark { display: inline-block; margin-left: 4px; padding: 0 5px; border: 2px solid var(--ink); border-radius: 50%; background: #f6c531; color: var(--ink); font: 900 11px/13px var(--read); vertical-align: middle; text-shadow: none; }

.journey-choice { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid #cdbb92; font: 600 12px/1.4 var(--read); color: var(--leaf-deep); }
.journey-choice select { display: block; width: 100%; margin-top: 5px; padding: 6px 4px; font: 600 12px var(--read); color: var(--ink); background: var(--paper); border: 1px solid #9e885d; border-radius: 3px; }
.journey-choice select:focus-visible { outline: 2px solid var(--leaf-deep); outline-offset: 2px; }

@media (max-height: 740px) {
  #journey-card { max-height: max(130px, calc(100dvh - 420px)); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---- The minimap: a carved honey ring, north riding it, and zoom keys ---- */
#compass {
  position: absolute; right: 12px; top: 12px; z-index: 8; width: 186px; height: 186px; padding: 6px; border: 3px solid var(--ink); border-radius: 50%;
  background: linear-gradient(135deg, var(--honey-hi) 0 50%, var(--honey-deep) 50%); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.55), var(--ledge);
}
#minimap { display: block; width: 168px; height: 168px; border-radius: 50%; background: #7fc4ea; cursor: crosshair; }
#compass-ring { position: absolute; inset: 6px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 2px var(--ink); }
#compass-ring > span {
  position: absolute; left: 50%; top: -15px; width: 22px; height: 20px; margin-left: -11px; background: var(--paper); border: 2px solid var(--ink); border-radius: 5px; corner-shape: bevel;
  color: var(--ink); font: 8px/16px var(--blocks); text-align: center; transform: rotate(var(--compass-label-turn, 0deg));
}
#mm-tools { position: absolute; left: -7px; bottom: -3px; display: flex; flex-direction: column; gap: 3px; }
#mm-tools button { width: 26px; height: 24px; padding: 0 0 0 1px; font: 16px/1 var(--blocks); }
/* The first-person view's eye (first-person.js): honey while you look through your own eyes. */
.eye-icon { display: block; width: 18px; height: 18px; margin: auto; }
#mm-eye.on, #touch-eye.on { background: linear-gradient(#fff0a8, var(--honey)); box-shadow: inset 0 2px 0 rgba(150, 90, 10, 0.32); }
/* On a desktop the first-person view has a labelled button beside the minimap's zoom, easy to find: "1st person" with
   its key, like the dock's buttons, and honey while you look through your own eyes. A phone keeps its eye beside Stop
   and a key in its Menu (mobile.css). */
#mm-tools #mm-eye {
  position: absolute; right: calc(100% + 8px); bottom: 0; display: flex; align-items: center; gap: 6px; width: auto; height: 34px; padding: 0 7px 0 6px;
  background: var(--raised); border: 2px solid var(--ink); border-radius: 8px; corner-shape: bevel;
  box-shadow: inset 0 0 0 1px #d0b580, inset 0 2px 0 #fffdf5, inset 0 -3px 0 #dec596, 0 3px 0 rgba(43, 29, 14, .4);
  color: var(--ink); font: 800 13px var(--read); white-space: nowrap;
}
#mm-tools #mm-eye:hover { background: linear-gradient(#fffef7, #f8e6bd); }
#mm-tools #mm-eye.on { background: linear-gradient(#fff0a8, var(--honey)); box-shadow: inset 0 2px 0 rgba(150, 90, 10, 0.32), 0 3px 0 rgba(43, 29, 14, .4); }
#mm-eye .eye-icon { width: 22px; height: 22px; margin: 0; }
#mm-eye kbd { min-width: 15px; height: 17px; padding: 0 2px; border: 0; background: #e9d7b3; font: 8px/17px var(--blocks); color: #7b6038; box-shadow: inset 0 1px 0 #d2b987, 0 1px 0 #fff8e8; }
/* Voice with friends (voice.js): with voice on, a key above the chat to hold while you talk (or hold T), honey while it
   is held. A friend talking has a small speaker before their name. */
#talk-key { display: none; position: absolute; left: 12px; bottom: 200px; z-index: 8; align-items: center; gap: 6px; height: 34px; padding: 0 9px 0 7px; background: var(--raised); border: 2px solid var(--ink); border-radius: 8px; corner-shape: bevel; box-shadow: inset 0 0 0 1px #d0b580, inset 0 2px 0 #fffdf5, inset 0 -3px 0 #dec596, 0 3px 0 rgba(43, 29, 14, .4); color: var(--ink); font: 800 12px var(--read); cursor: pointer; touch-action: none; user-select: none; }
#talk-key svg { width: 15px; height: 18px; }
#talk-key kbd { min-width: 15px; height: 17px; padding: 0 2px; border: 0; background: #e9d7b3; font: 8px/17px var(--blocks); color: #7b6038; }
body.voice-on #talk-key { display: flex; }
#talk-key.on { background: linear-gradient(#fff0a8, var(--honey)); box-shadow: inset 0 2px 0 rgba(150, 90, 10, 0.32), 0 3px 0 rgba(43, 29, 14, .4); }
.label.speaking .name::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M1 4h2l3-3h1v10H6L3 8H1z' fill='%23fff6de'/%3E%3Cpath d='M8 4h1v4H8zM10 2h1v8h-1z' fill='%23f6c531'/%3E%3C/svg%3E") center / contain no-repeat; }
/* At eye level on a computer (input.js): a cross in the middle while the mouse is held, where a click acts; not held, a
   quiet word there that a click takes the mouse. */
#crosshair { display: none; position: fixed; left: 50%; top: 50%; z-index: 7; transform: translate(-50%, -50%); pointer-events: none; }
#crosshair svg { display: block; width: 22px; height: 22px; }
#crosshair .eyes-hint { display: none; padding: 4px 10px; background: rgba(29, 52, 38, 0.72); border-radius: 8px; corner-shape: bevel; color: var(--paper); font: 700 12px var(--read); white-space: nowrap; }
body.eyes-locked #crosshair, body.eyes-free #crosshair { display: block; }
body.eyes-free #crosshair svg { display: none; }
body.eyes-free #crosshair .eyes-hint { display: block; }
/* Until it has been tried in this browser (first-person.js fp-new), the eye wears a honey dot: an invitation, never a blink. */
body.fp-new #mm-eye::after, body.fp-new #touch-eye::after { content: ''; position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; box-sizing: border-box; background: var(--honey); border: 2px solid var(--ink); border-radius: 50%; pointer-events: none; }

/* ---- The dock: labelled keys with their pictures and shortcuts ---- */
#side { position: absolute; right: 12px; top: 212px; z-index: 9; }   /* above the name tags */
#tabs { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#tabs button {
  position: relative; display: flex; align-items: center; gap: 7px; width: 118px; height: 38px; min-height: 0; padding: 0 7px 0 4px;
  background: var(--raised); border: 2px solid var(--ink); border-radius: 8px; corner-shape: bevel;
  box-shadow: inset 0 0 0 1px #d0b580, inset 0 2px 0 #fffdf5, inset 0 -3px 0 #dec596, 0 3px 0 rgba(43, 29, 14, .4);
  color: var(--ink); font: 800 13px var(--read); text-align: left; cursor: pointer;
}
#tabs button .px-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; }
#tabs button .px-icon canvas { width: 28px; height: 28px; }
#tabs .dock-label { flex: 1; }
#tabs kbd { min-width: 15px; height: 17px; padding: 0 2px; border: 0; background: #e9d7b3; font: 8px/17px var(--blocks); color: #7b6038; box-shadow: inset 0 1px 0 #d2b987, 0 1px 0 #fff8e8; }
#tabs button:hover:not(.active) { background: linear-gradient(#fffef7, #f8e6bd); border-color: #8d642d; }
#tabs button.active { background: linear-gradient(#e8f2d8, #cadfac); color: #24482e; box-shadow: inset 0 0 0 2px #62905a, inset 0 3px 0 #f4f9e9, 0 3px 0 rgba(43, 29, 14, .4); }
#tabs button.active kbd { background: #b6d09c; color: #294c30; box-shadow: inset 0 1px 0 #8aaa74; }
#tabs button:active { transform: translateY(1px); }
#tabs button:focus-visible, .hslot:focus-visible { outline: 3px solid #fff5c7; outline-offset: 2px; }

/* ---- The panel: bag, gear, skills, spells, friends, settings ---- */
#panel { position: absolute; right: 128px; top: 0; width: 316px; max-height: calc(100vh - 370px); min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
#panel .tab { min-height: 0; overflow-y: auto; padding: 8px 10px 10px; scrollbar-width: thin; scrollbar-color: #c9a25a transparent; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 0 2px; font: 700 12px var(--read); color: var(--brown); }
.panel-foot .gc { display: inline-flex; align-items: center; gap: 5px; color: #8a5a10; }
.panel-foot img { width: 14px; height: 14px; image-rendering: pixelated; }
.grid { display: grid; grid-template-columns: repeat(6, 44px); gap: 4px; justify-content: center; }
.slot, .eqslot {
  position: relative; width: 44px; height: 44px; background: linear-gradient(#f1ddb0, #e9d09c); border: 2px solid #b58647; border-radius: 6px; corner-shape: bevel;
  box-shadow: inset 0 3px 0 rgba(120, 80, 30, 0.2), inset 0 -2px 0 rgba(255, 255, 255, 0.4); cursor: pointer;
}
.slot:hover, .eqslot:hover { border-color: var(--ink); background: linear-gradient(#fff4d8, #f2dcab); }
/* Empty places in the bag are dark pockets in its leather lining (below); occupied items keep their parchment card, which pops on it. */
#inventory .slot.empty { background: #4a2c16; border-color: #3a2412; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.4); cursor: default; }
#inventory .slot.empty:hover { background: #5e3a1f; border-color: #3a2412; }
.slot.selected { border-color: var(--leaf-deep); background: linear-gradient(#e9f5d8, #d2e8b4); box-shadow: inset 0 0 0 2px #8fb23c; }
.slot canvas, .slot img { position: absolute; left: 2px; top: 2px; width: 36px; height: 36px; image-rendering: pixelated; }
.slot .count, .hslot .cnt, .eqslot .count { position: absolute; right: 2px; bottom: 1px; z-index: 1; font: 8px/1 var(--blocks); color: #fff; text-shadow: var(--inked); }
.slot .count.k { color: var(--honey-hi); }
.slot .count.m { color: #c6e27a; }
/* ---- The bag is a satchel ---- */
/* The one panel made of leather, like the satchel icon and the pouch on your hip. Its title bar is the flap: three flat
   bands of the icon's leather with a stitch along the edge and its honey diamond buckle on a strap beside the close key,
   and it flips down when the bag opens (ui.js panelMotion). Under it a dark lining, stitched round the inside, so every
   item's card pops and an empty place is a dark pocket; the count of places and the coins are two tags on the lining. */
#panel[data-showing="inventory"] { background: #5a3a22; box-shadow: inset 2px 2px 0 rgba(255, 220, 170, 0.16), inset -2px -2px 0 rgba(0, 0, 0, 0.3), var(--ledge); }
#panel[data-showing="inventory"]::before { content: ''; position: absolute; inset: 49px 6px 6px; border: 2px dashed #d9a066; border-radius: 6px; corner-shape: bevel; pointer-events: none; }
#panel[data-showing="inventory"] .tab { position: relative; }   /* the stitching runs under the slots, the tags and the scrollbar */
#panel[data-showing="inventory"] .panel-head {
  background: repeating-linear-gradient(90deg, #d9a066 0 4px, transparent 4px 8px) 10px calc(100% - 7px) / calc(100% - 20px) 2px no-repeat, var(--leather);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);   /* the flap lies on the bag, not in it */
}
.panel-head .buckle { display: none; }
#panel[data-showing="inventory"] .panel-head .buckle {
  display: block; flex: none; width: 18px; height: 38px; margin: -5px 2px -5px auto; image-rendering: pixelated;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 19' shape-rendering='crispEdges'%3E%3Cpath fill='%232b1d0e' d='M2 0h1v1h-1zM7 0h1v1h-1zM2 1h1v1h-1zM7 1h1v1h-1zM2 2h1v1h-1zM7 2h1v1h-1zM2 3h1v1h-1zM7 3h1v1h-1zM2 4h1v1h-1zM7 4h1v1h-1zM2 5h1v1h-1zM4 5h1v1h-1zM7 5h1v1h-1zM2 6h2v1h-2zM5 6h1v1h-1zM7 6h1v1h-1zM2 7h1v1h-1zM6 7h2v1h-2zM1 8h1v1h-1zM7 8h1v1h-1zM0 9h1v1h-1zM8 9h1v1h-1zM1 10h1v1h-1zM7 10h1v1h-1zM2 11h1v1h-1zM6 11h2v1h-2zM2 12h2v1h-2zM5 12h1v1h-1zM7 12h1v1h-1zM2 13h1v1h-1zM4 13h1v1h-1zM7 13h1v1h-1zM2 14h1v1h-1zM7 14h1v1h-1zM2 15h1v1h-1zM7 15h1v1h-1zM2 16h1v1h-1zM7 16h1v1h-1zM2 17h1v1h-1zM7 17h1v1h-1zM2 18h1v1h-1zM7 18h1v1h-1z'/%3E%3Cpath fill='%236e4424' d='M3 0h2v1h-2zM3 1h2v1h-2zM3 2h2v1h-2zM3 3h2v1h-2zM3 4h2v1h-2zM3 5h1v1h-1zM3 13h1v1h-1zM3 14h2v1h-2zM3 15h2v1h-2zM3 16h2v1h-2zM3 17h2v1h-2zM3 18h2v1h-2z'/%3E%3Cpath fill='%234a2c16' d='M5 0h2v1h-2zM5 1h2v1h-2zM5 2h2v1h-2zM5 3h2v1h-2zM5 4h2v1h-2zM5 5h2v1h-2zM6 6h1v1h-1zM6 12h1v1h-1zM5 13h2v1h-2zM5 14h2v1h-2zM5 15h2v1h-2zM5 16h2v1h-2zM5 17h2v1h-2zM5 18h2v1h-2z'/%3E%3Cpath fill='%23ffe27a' d='M4 6h1v1h-1zM3 7h2v1h-2zM2 8h2v1h-2zM1 9h1v1h-1z'/%3E%3Cpath fill='%23f6c531' d='M5 7h1v1h-1zM4 8h3v1h-3zM2 9h5v1h-5zM2 10h3v1h-3zM3 11h1v1h-1z'/%3E%3Cpath fill='%23d29c1c' d='M7 9h1v1h-1zM5 10h2v1h-2zM4 11h2v1h-2zM4 12h1v1h-1z'/%3E%3C/svg%3E") center / 18px 38px no-repeat;
}
/* On the dark lining a pointed-at item gets a honey rim and the chosen one a honey ring, where ink and evergreen would sink. */
#inventory .slot:not(.empty):hover { border-color: var(--honey); }
#inventory .slot.selected { border-color: var(--honey-hi); box-shadow: inset 0 0 0 2px #8fb23c, 0 0 0 2px var(--honey-deep); }
#inventory-foot { margin-top: 10px; padding: 0; }
#inventory-foot span {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px 0 4px; background: #fffaf0; border: 2px solid var(--ink); border-radius: 6px; corner-shape: bevel;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); color: var(--ink); font: 16px/1 var(--blocks); white-space: nowrap;
}
#inventory-foot .gc { color: #8a5a10; }
#inventory-foot img { width: 24px; height: 24px; }
/* Arriving: the panel settles in from a hair above; the bag's flap swings down from behind, hinged along its top. */
#panel.opening { animation: panel-in 140ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes panel-in { from { opacity: 0; transform: translateY(-6px) scaleY(0.96); } }
#panel.flip .panel-head { transform-origin: top; animation: flap 220ms ease-out; }
@keyframes flap { from { transform: perspective(600px) rotateX(-70deg); } }
@media (prefers-reduced-motion: reduce) { #panel.opening, #panel.flip .panel-head { animation-duration: 0.01s; } }
/* Gear laid out as you wear it, each empty place showing a faint picture of what goes there. */
#equipment { display: grid; grid-template-columns: repeat(3, 50px); grid-template-areas: 'ammo head neck' 'weapon body shield' '. legs .' '. boots .'; gap: 6px 12px; justify-content: center; padding: 4px 0 10px; }
.eqslot { width: 50px; height: 50px; }
.eqslot[data-slot="head"] { grid-area: head; } .eqslot[data-slot="ammo"] { grid-area: ammo; } .eqslot[data-slot="weapon"] { grid-area: weapon; }
.eqslot[data-slot="body"] { grid-area: body; } .eqslot[data-slot="shield"] { grid-area: shield; } .eqslot[data-slot="legs"] { grid-area: legs; } .eqslot[data-slot="boots"] { grid-area: boots; }
.eqslot canvas { position: absolute; left: 5px; top: 5px; width: 36px; height: 36px; image-rendering: pixelated; }
.eqslot canvas.ghost { opacity: 0.55; }
/* The Gear window shows you wearing it: your figure beside the slots (ui.js gearFigure); drag it to turn. */
.gear-doll { display: flex; align-items: center; justify-content: center; gap: 8px; }
#gear-figure { flex: none; width: 104px; height: 139px; border: 2px solid var(--ink); border-radius: 8px; corner-shape: bevel; cursor: grab; touch-action: none;
  background: radial-gradient(ellipse 70% 12% at 50% 90%, rgba(120, 170, 70, 0.45), transparent 70%), linear-gradient(#e7f1f0, #f6ecd4); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.6); }
#gear-figure[hidden] { display: none; }
#equipment-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 12px; font: 700 12px var(--read); color: var(--brown); }
#equipment-stats span { display: inline-flex; align-items: center; gap: 4px; }
#equipment-stats b { color: var(--ink); }
#equipment-stats img { width: 14px; height: 14px; image-rendering: pixelated; }
/* Skills: a picture, the name, and under it the progress beside the level in block letters. */
#progression-summary { padding: 10px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fffaf0; }
#progression-summary > strong { font: 15px/1.3 var(--blocks); color: var(--leaf-deep); }
#progression-summary p { margin: 6px 0 0; font: 12px/1.45 var(--read); color: #5a3a10; }
#progression-summary .rating-line { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font: 13px/1.4 var(--read); }
#progression-summary details { margin-top: 8px; font: 12px/1.4 var(--read); }
#progression-summary summary { cursor: pointer; color: var(--leaf-deep); font-weight: 700; }
#skill-guide { padding: 10px; margin-bottom: 12px; background: #fffaf0; border: 2px solid var(--honey-deep); border-radius: 6px; font: 12px/1.45 var(--read); color: #5a3a10; }
#skill-guide label { display: block; font-weight: 800; margin-bottom: 5px; }
#skill-choice { display: block; width: 100%; min-height: 34px; padding: 5px 7px; font: 700 13px var(--read); color: var(--leaf-deep); background: #fff3d8; border: 1px solid var(--line); border-radius: 4px; }
#skill-guide p { margin: 7px 0; }
#skill-goal-title { display: block; color: var(--leaf-deep); font-size: 14px; }
#skill-goal-unlocks { padding-left: 17px; margin: 6px 0; font-weight: 700; }
#skill-goal-unlocks:empty { display: none; }
#skill-goal-xp { font-weight: 700; }
#skill-guide details { padding-top: 6px; margin-top: 6px; border-top: 1px solid var(--line); }
#skill-guide summary { cursor: pointer; font-weight: 700; color: var(--leaf-deep); }
#skill-guide details[hidden] { display: none; }
#skills .skill[aria-pressed="true"] { border-color: var(--leaf-deep); background: #e4f0d6; }
#skills button.skill { cursor: pointer; text-align: left; }
#skills { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
#skills .skill { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 6px; min-height: 38px; padding: 2px 7px 2px 4px; background: #fffaf0; border: 2px solid var(--line); border-radius: 6px; corner-shape: bevel; cursor: help; }
#skills .skill:hover { background: #fff3d8; border-color: var(--ink); }
#skills .skill canvas { grid-row: 1 / 3; width: 28px; height: 28px; }
#skills .nm { min-width: 0; font: 800 11.5px/1.2 var(--read); color: #5a3a10; white-space: nowrap; }
#skills .lv { display: flex; align-items: center; gap: 6px; }
#skills .prog { flex: 1; height: 6px; background: #ead9b2; border-radius: 2px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(120, 80, 30, 0.2); }
#skills .prog b { display: block; height: 100%; background: linear-gradient(#8fcf86 0 2px, #3f8a4e 2px); }
#skills .lvl { min-width: 22px; font: 16px/1 var(--blocks); color: var(--ink); text-align: right; }
#skills .skill.total { grid-column: 1 / -1; grid-template-columns: 1fr auto; grid-template-rows: auto; min-height: 30px; padding: 2px 10px; background: linear-gradient(#fff3c4, #ffe08a); border-color: var(--honey-deep); cursor: default; }
#skills .skill.total .nm { font-size: 13px; }
#skills .skill.total { grid-column: 1 / -1; }   /* the full label stays readable beside the sum */
/* Spells: the key, the picture, the name over its words, and the cost. */
#spells .spell { display: grid; grid-template-columns: 24px 36px 1fr auto; align-items: center; gap: 7px; margin-bottom: 4px; padding: 2px 8px 2px 5px; background: #fffaf0; border: 2px solid var(--line); border-radius: 6px; corner-shape: bevel; cursor: pointer; }
#spells .spell:hover { background: #fff3d8; border-color: var(--ink); }
#spells .spell kbd { justify-self: start; }
#spells .spell .spell-icon { width: 36px; height: 36px; }
#spells .spell .sp-name { font: 800 13px/1.2 var(--read); color: var(--ink); }
#spells .spell .words { display: block; font: 700 11.5px/1.25 var(--read); color: #6b4fc9; }
#spells .spell .cost { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font: 800 11.5px/1.2 var(--read); color: #256bbc; white-space: nowrap; }
#spells .spell .cost img { width: 14px; height: 14px; vertical-align: -3px; margin-right: 3px; image-rendering: pixelated; }
#spells .spell .req { font: 700 11px/1.2 var(--read); color: #8a6a40; }
#spells .spell.locked { background: #f4ecdb; }
#spells .spell.locked .spell-icon { opacity: 0.45; }
#spells .spell.locked .sp-name { color: #8a7a60; }
#spells .spell.locked .req { color: #b0462e; }
/* Settings: pixel toggles and the keys you can press. */
#settings label { display: flex; align-items: center; gap: 9px; margin: 5px 2px; font: 700 13px var(--read); color: var(--ink); cursor: pointer; }
#settings input[type="checkbox"] {
  appearance: none; flex: none; width: 20px; height: 20px; margin: 0; background: #fffaf0; border: 2px solid var(--ink); border-radius: 4px; corner-shape: bevel;
  box-shadow: inset 0 2px 0 rgba(120, 80, 30, 0.2); cursor: pointer;
}
#settings input[type="checkbox"]:checked {
  background: #3f8a4e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff6de' d='M5 0h1v1H5zM4 1h2v1H4zM0 2h1v1H0zM3 2h2v1H3zM0 3h4v1H0zM1 4h2v1H1z'/%3E%3C/svg%3E") center / 12px 10px no-repeat;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25);
}
#settings .quality-row { display: grid; gap: 5px; margin: 2px 2px 8px; }
#settings .q-label { font: 8px/1 var(--blocks); letter-spacing: 0.06em; color: #a8620e; text-transform: uppercase; }
#settings .q-label em { font: 700 11px var(--read); font-style: normal; color: #8a7a60; text-transform: none; letter-spacing: 0; margin-left: 4px; }
#settings .seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--ink); border-radius: 8px; corner-shape: bevel; overflow: hidden; box-shadow: 0 2px 0 rgba(43, 29, 14, 0.3); }
#settings .seg button { min-height: 30px; margin: 0; padding: 0 2px; border: 0; border-radius: 0; box-shadow: none; font: 800 12px var(--read); background: var(--raised); }
#settings .seg button + button { border-left: 2px solid var(--ink); }
#settings .seg button.on { background: var(--evergreen); color: var(--paper); text-shadow: 0 1px 0 var(--ink); }
#settings .help { margin: 10px 0; padding: 8px 9px 9px; background: #fffaf0; border: 2px solid var(--line); border-radius: 6px; corner-shape: bevel; font: 600 12px/1.35 var(--read); color: #6a5030; }
#settings .help summary { cursor: pointer; padding: 4px 0; }
#settings .help[open] summary { margin-bottom: 10px; }
#settings .settings-group + .settings-group { margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--line); }
#settings h4 { margin: 3px 2px 9px; font: 800 12px/1.5 var(--read); color: var(--leaf-deep); text-transform: uppercase; }
#settings .setting-note { margin: 3px 2px 8px; font: 600 12px/1.4 var(--read); color: var(--brown); }
#settings label:has(input:disabled) { color: #8a7a60; cursor: default; }
#settings .help b { display: block; margin-bottom: 7px; font: 8px/1 var(--blocks); letter-spacing: 0.06em; color: #a8620e; }
#settings dl { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 8px; margin: 0; }
#settings dt { white-space: nowrap; }
#settings dd { margin: 0; }
#btn-logout { display: block; width: 100%; padding: 6px 10px; }
/* Friends */
#friends .friend-add { display: flex; gap: 6px; margin-bottom: 8px; }
#friends .friend-add input { flex: 1; min-width: 0; height: 30px; padding: 0 9px; background: #fffaf0; border: 2px solid var(--ink); border-radius: 6px; corner-shape: bevel; box-shadow: inset 0 2px 0 rgba(120, 80, 30, 0.2); font: 600 13px var(--read); color: var(--ink); }
#friends .sub { margin: 0 2px 6px; font: 600 12px/1.4 var(--read); color: var(--brown); }
#friends .friend { display: flex; align-items: center; gap: 8px; padding: 5px 4px 5px 6px; border-radius: 6px; corner-shape: bevel; }
#friends .friend:hover { background: #f6e6bf; }
#friends .friend .dot { flex: none; width: 12px; height: 12px; background: #c9bfae; border: 2px solid var(--ink); border-radius: 3px; corner-shape: bevel; }
#friends .friend.online .dot { background: #8fb23c; box-shadow: inset 1px 1px 0 #bbd862; }
#friends .friend .name { flex: 1; font: 800 13px var(--read); color: var(--ink); }
#friends .friend:not(.online) .name { color: #8a7a60; }
#friends .friend .acts { display: flex; gap: 4px; }
#friends .friend button { padding: 2px 8px; font-size: 11px; }
#friends .friend button.rm { background: var(--raised); }
#friends .friend button[disabled] { opacity: 0.45; cursor: default; }

/* ---- Windows: dialog, make, shop, bank, map ---- */
.window { position: absolute; z-index: 15; padding: 0 12px 12px; }
.window h3 { margin: 0 -12px 10px; }
.window .sub, .window .coins { margin: 2px 0 8px; font: 600 12px/1.4 var(--read); color: var(--brown); }
#dialog { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
#dialog .dialog-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#dialog .dialog-speech { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
#dialog .dialog-speech .text { flex: 1; min-width: 0; margin: 2px 0; }
#dialog .dialog-portrait { flex: 0 0 104px; width: 104px; height: 104px; overflow: hidden; border: 2px solid #b58647; border-radius: 10px; corner-shape: bevel; background: radial-gradient(ellipse at 50% 35%, #fff4d2, #e7ce99); box-shadow: inset 0 2px 4px #80501e22; }
#dialog .dialog-portrait[hidden] { display: none; }
#dialog .dialog-portrait canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 480px) { #dialog .dialog-portrait { flex-basis: 76px; width: 76px; height: 76px; } #dialog .dialog-speech { gap: 10px; } }
#dialog h3 { background: linear-gradient(#ffe27a 0 3px, #f6c531 3px calc(100% - 4px), #d29c1c calc(100% - 4px)); color: var(--ink); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.45); padding-right: 44px; }
#dialog .text { margin: 2px 2px 10px; font: 600 15px/1.5 var(--read); color: var(--ink); }
#dialog .opt { width: 100%; text-align: left; box-shadow: none; display: flex; align-items: center; gap: 9px; margin: 5px 0; padding: 6px 10px 6px 6px; background: #fffaf0; border: 2px solid var(--line); border-radius: 6px; corner-shape: bevel; font: 800 14px var(--read); color: #5a3a10; cursor: pointer; }
#dialog .opt:hover { background: #fff3d8; border-color: var(--ink); }
#dialog .opt .k { display: inline-block; min-width: 22px; height: 22px; line-height: 22px; }
/* Naming your dog (client/js/pets.js): a name, a coat and a collar, tried on by the dog as you pick. */
#dialog .dog-form { display: grid; gap: 8px; margin: 0 2px; }
#dialog .dog-row { display: flex; align-items: center; gap: 10px; }
#dialog .dog-k { width: 54px; font: 800 13px var(--read); color: var(--brown); }
#dialog #dog-name { flex: 1; min-width: 0; height: 32px; padding: 0 10px; background: #fffaf0; border: 2px solid var(--ink); border-radius: 6px; corner-shape: bevel; box-shadow: inset 0 2px 0 rgba(120, 80, 30, 0.2); font: 700 15px var(--read); color: var(--ink); }
#dialog .dog-coats, #dialog .dog-collars { display: flex; flex-wrap: wrap; gap: 6px; }
#dialog .dog-coat { display: flex; align-items: center; gap: 6px; background: #fffaf0; box-shadow: none; }
#dialog .dog-coat i { width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 3px; }
#dialog .dog-collar { width: 26px; height: 26px; padding: 0; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
#dialog .dog-coat.on, #dialog .dog-collar.on { outline: 3px solid var(--honey); outline-offset: 1px; }
#dialog .dog-coat.on { background: linear-gradient(var(--honey-hi), #f0b93a); }
#dialog .dog-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
#dialog .dog-note { font: 600 12px var(--read); color: var(--brown); }
#dialog .dog-note.low { color: #b32f1e; }
#dialog .dog-save { padding: 6px 18px; font-size: 14px; }
#dialog .dog-save:disabled { opacity: 0.5; cursor: default; }
#make, #shop, #bank { width: 396px; max-height: 72%; overflow-y: auto; scrollbar-width: thin; }
#make { left: 50%; top: 50%; transform: translate(-50%, -50%); }
#shop, #bank { left: 24px; top: 50%; transform: translateY(-50%); }
/* More tiers fit in the shop without scrolling its title, price explanation or close button away. */
#shop { display: flex; flex-direction: column; overflow: hidden; }
#shop > h3, #shop > .sub { flex: 0 0 auto; }
#shop > .stock { min-height: 0; overflow-y: auto; padding: 3px 6px 10px; scrollbar-width: thin; overscroll-behavior: contain; }
#make .opt { display: flex; align-items: center; gap: 8px; margin: 3px 0; padding: 6px 8px; border: 2px solid transparent; border-radius: 6px; corner-shape: bevel; font: 700 13px var(--read); color: var(--ink); cursor: pointer; }
#make .opt > span:first-child { flex: 1; }
#make .opt:hover { background: #fff3d8; border-color: var(--line); }
#make .opt .lvl { margin-left: 7px; padding: 1px 5px; background: #fff1c2; border: 1px solid #d9b86a; border-radius: 3px; font: 700 11px var(--read); color: #8a5a10; }
#make .opt .need { font: 600 12px var(--read); color: var(--brown); white-space: nowrap; }
#make .opt.no { color: #a89878; }
#make .opt.no .lvl { opacity: 0.7; }
#make .opt .qty { display: flex; gap: 4px; }
#make .opt .qty button { padding: 2px 7px; font-size: 11px; }
#make .opt .swatch { display: inline-block; width: 16px; height: 16px; margin-right: 7px; vertical-align: -3px; border: 2px solid var(--ink); border-radius: 3px; corner-shape: bevel; }
/* The make window at a station: the title bar stays put (with your level in the skill) and the rows scroll
   under it. A row is the thing's picture (raw food shows how many you carry, like the bag), its name and
   level over a line of facts (what it takes, red when you are short; what it gives; the experience), and
   x1 / x5 / All with how many All makes, or the reason it cannot be made yet. The anvil's pieces sit under
   a heading for each bar that stays in sight while its pieces scroll by. */
#make { display: flex; flex-direction: column; width: 456px; max-width: calc(100vw - 24px); overflow: hidden; }
#make h3 .now { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 2px 8px 2px 5px; background: rgba(20, 50, 28, 0.35); border-radius: 5px; corner-shape: bevel; font: 700 12px/1 var(--read); letter-spacing: 0; text-shadow: 0 1px 0 var(--ink); white-space: nowrap; }
#make h3 .now img { width: 14px; height: 14px; image-rendering: pixelated; }
#make h3 .now b { font: 16px/1 var(--blocks); color: var(--honey-hi); }
#make .rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-right: -8px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #c9a25a transparent; }
#make .warn { margin: 0 0 8px; padding: 7px 10px; background: #fff1c2; border: 2px solid #d9b86a; border-radius: 6px; corner-shape: bevel; font: 700 12.5px/1.4 var(--read); color: #7a4c10; }
#make .grp { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px; margin: 6px 0 3px; padding: 5px 2px 4px; background: #fdf3da; border-bottom: 2px solid var(--line); font: 8px/1 var(--blocks); letter-spacing: 0.06em; text-transform: uppercase; color: #a8620e; }
#make .grp:first-child { margin-top: 0; }
#make .grp img { width: 18px; height: 18px; image-rendering: pixelated; }
#make .grp em { margin-left: auto; font: 700 11.5px var(--read); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--brown); }
#make .opt.rich { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; margin: 2px 0; padding: 4px 8px 4px 4px; }
#make .opt .pic { position: relative; width: 40px; height: 40px; background: linear-gradient(#f1ddb0, #e9d09c); border: 2px solid #b58647; border-radius: 6px; corner-shape: bevel; box-shadow: inset 0 3px 0 rgba(120, 80, 30, 0.2); }
#make .opt .pic img { position: absolute; left: 0; top: 0; width: 36px; height: 36px; image-rendering: pixelated; }
#make .opt .pic .have { position: absolute; right: 1px; bottom: 1px; font: 8px/1 var(--blocks); color: #fff; text-shadow: var(--inked); }
#make .opt .pic .have.k { color: var(--honey-hi); }
#make .opt .what { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#make .opt .nm { font: 800 13.5px/1.15 var(--read); color: var(--ink); }
#make .opt.rich .lvl { vertical-align: 1px; }
#make .opt .info { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 9px; font: 700 11.5px/16px var(--read); color: var(--brown); }
#make .opt .info i { display: inline-flex; align-items: center; gap: 3px; font-style: normal; white-space: nowrap; }
#make .opt .info .takes { display: block; }
#make .opt .info img { width: 14px; height: 14px; image-rendering: pixelated; }
#make .opt .info .short { color: #b0462e; }
#make .opt .info .good { color: #2c6a3c; }
#make .opt .qty button b { margin-left: 1px; font: 700 11px var(--read); color: #7a4c10; }
#make .opt.rich .qty button[data-n="0"] { min-width: 58px; }   /* the x1 and x5 keys line up from row to row */
#make .opt .why { display: inline-flex; align-items: center; gap: 4px; font: 800 11.5px var(--read); color: #b0462e; white-space: nowrap; }
#make .opt .why img { width: 14px; height: 14px; image-rendering: pixelated; }
#make .opt.rich.no { color: #8a7a60; cursor: default; }
#make .opt.rich.no .nm { color: #8a7a60; }
#make .opt.rich.no .pic img { opacity: 0.55; }
#make .opt.rich.no:hover { background: #fbf0d6; border-color: transparent; }
#make .build-controls { flex-shrink: 0; }
#make .build-target { font: 600 12px/1.4 var(--read); color: var(--brown); margin: 0 0 7px; }
#make .build-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
#make .build-filters button { padding: 4px 8px; font: 800 12px var(--read); }
#make .build-filters button[aria-pressed="true"] { background: var(--evergreen); color: var(--paper); }
#make .blueprint[hidden] { display: none; }
@media (min-width: 1200px) { #make[data-kind="build"] { left: auto; right: 128px; transform: translateY(-50%); } }
/* Building recipes keep their purpose and any shortage visible without hovering. */
#make .opt.blueprint { width: 100%; text-align: left; background: #fffaf0; box-shadow: none; border-color: var(--line); padding: 9px; margin: 6px 0; }
#make .blueprint .nm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
#make .blueprint .description { font: 600 12px/1.4 var(--read); color: var(--brown); }
#make .blueprint .need, #make .blueprint .why { white-space: normal; }
#make .blueprint .ready { font: 800 11.5px var(--read); color: #2c6a3c; }
#make .blueprint:focus-visible { outline: 3px solid var(--evergreen); outline-offset: -3px; }
#make .home-guide { margin: 5px 0 10px; padding: 8px; background: #fff1c2; border: 1px solid var(--line); border-radius: 6px; font: 600 12px/1.5 var(--read); }
#make .home-guide summary { cursor: pointer; font-weight: 800; }
#make .home-guide ol { padding-left: 18px; margin: 8px 0 0; }
#make .home-guide li + li { margin-top: 7px; }
#make .opt.nope { animation: make-nope 0.3s ease; }
@keyframes make-nope { 20% { transform: translateX(-4px); } 50% { transform: translateX(3px); } 80% { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) { #make .opt.nope { animation: none; } }
.stock { display: grid; grid-template-columns: repeat(7, 46px); gap: 10px 5px; justify-content: center; padding-bottom: 6px; }
.stock .slot { width: 46px; height: 46px; }
.stock .slot canvas { left: 3px; top: 2px; }
.stock .slot .price { position: absolute; left: -3px; right: -3px; bottom: -8px; z-index: 1; height: 14px; background: var(--honey); border: 2px solid var(--ink); border-radius: 3px; corner-shape: bevel; font: 8px/10px var(--blocks); color: var(--ink); text-align: center; }
.stock > .sub { grid-column: 1 / -1; }
/* The map of the world you have seen */
#worldmap { left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(min(560px, 100vh - 180px) + 30px); max-height: 98%; overflow: auto; scrollbar-width: thin; }
#worldmap .mapwrap { position: relative; width: min(560px, 100vh - 180px); height: min(560px, 100vh - 180px); margin: 8px auto 6px; border: 3px solid var(--ink); border-radius: 8px; corner-shape: bevel; overflow: hidden; }
#worldmap-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
#worldmap-canvas.dragging { cursor: grabbing; }
.maptools { display: flex; align-items: center; gap: 6px; }
.maptools button { height: 28px; min-width: 30px; padding: 0 8px; font: 16px/1 var(--blocks); }
.maptools #wm-me { display: inline-flex; align-items: center; gap: 5px; font: 800 12px var(--read); }
.maptools #wm-me .px-icon canvas { width: 14px; height: 14px; }
.maptools #wm-info { margin-left: auto; font: 600 11px var(--read); color: var(--brown); }
.maplegend { display: flex; flex-wrap: wrap; gap: 4px 9px; margin: 0 2px; font: 700 11px var(--read); color: #5a3a10; }
.maplegend span { display: inline-flex; align-items: center; }
.maplegend .sw { display: inline-block; width: 13px; height: 13px; margin-right: 5px; border: 2px solid var(--ink); border-radius: 3px; corner-shape: bevel; }
.maplegend .friend { background: #49e879; border-radius: 50%; corner-shape: round; } .maplegend .player { background: #fff6de; border-radius: 50%; corner-shape: round; }
.maplegend .land { background: #7fbf4a; } .maplegend .water { background: #4aa0e8; } .maplegend .fog { background: repeating-linear-gradient(135deg, #f3e8cf 0 2px, #d6c6a4 2px 4px); }
.maplegend .build { background: #ff9a3a; } .maplegend .bank { background: var(--honey); } .maplegend .cave { background: #6f747d; box-shadow: inset 0 -4px 0 #15121a; }
.maplegend .fish { background: #8ccaf6; } .maplegend .you { width: 15px; height: 15px; border: 0; border-radius: 0; background: var(--honey); clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%); }
#worldmap .sub { margin: 5px 2px 0; }
#worldmap-labels { position: absolute; inset: 0; pointer-events: none; }
#worldmap-labels span { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font: 800 12px/1.1 var(--read); color: var(--ink); letter-spacing: 0.02em; text-shadow: 0 0 3px #fff9e8, 0 0 2px #fff9e8, 1px 1px 0 #fff9e8, -1px -1px 0 #fff9e8, 1px -1px 0 #fff9e8, -1px 1px 0 #fff9e8; }
#worldmap-labels span.town { padding: 4px 7px 3px; background: var(--paper); border: 2px solid var(--ink); border-radius: 5px; corner-shape: bevel; box-shadow: 0 2px 0 rgba(43, 29, 14, 0.35); font: 8px/1 var(--blocks); letter-spacing: 0.04em; text-shadow: none; }
#worldmap-labels span.cave { font-size: 10px; color: #3a2a48; }
#worldmap-labels span.landmark { transform: translate(-50%, 8px); font-size: 11px; color: #5a3a10; }   /* under its honey diamond */

/* ---- Chat: a dark tray so the coloured lines stay readable over any ground ---- */
#chat { position: absolute; left: 12px; bottom: 12px; z-index: 8; width: 440px; padding: 5px 6px 6px; }
#messages {
  height: 116px; overflow-y: auto; padding: 4px 8px 2px 6px; font: 600 13px/1.45 var(--read); color: var(--paper); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  scrollbar-width: thin; scrollbar-color: rgba(246, 197, 49, 0.55) transparent; -webkit-mask-image: linear-gradient(transparent, #000 14px); mask-image: linear-gradient(transparent, #000 14px);
}
#messages div { word-wrap: break-word; }
#messages .who { color: #ffe9a0; }
.m-game { color: #fff6de; }
.m-info, .m-npc { color: #a8dcff; }
.m-say { color: #fff6de; }
.m-spell { color: #d6c9ff; }
.m-combat { color: #ffa392; }
.m-death, .m-error { color: #ff7b68; }
.m-exp { color: #d8cbb2; font-weight: 600; }
.m-rareloot { color: #ffe498; font-weight: bold; border-left: 3px solid #e2b24e; padding-left: 6px; }
.m-pioneer { color: #ffe498; font-weight: bold; border-left: 3px solid #f2b83a; padding-left: 6px; }   /* a Pioneer numbered (server/pioneers.js) */
.m-rarefind { color: #e2d4ff; font-weight: bold; border-left: 3px solid #a58cff; padding-left: 6px; }   /* someone's legendary find (server/game.js announceFind) */
.rare-loot-label { color: #ffe498; font-weight: bold; }
.m-loot { color: #c9e67e; }
.m-level { color: #ffd54a; }
.m-pm { color: #ffbcd8; }
#chatline { display: flex; align-items: center; gap: 7px; min-height: 30px; margin-top: 4px; padding: 0 8px; background: rgba(6, 18, 11, 0.5); border: 2px solid rgba(0, 0, 0, 0.4); border-radius: 6px; corner-shape: bevel; font: 700 13px var(--read); }
#chatline .px-icon canvas { width: 14px; height: 14px; }
#chatline .prompt { color: #cdbf9f; white-space: nowrap; }
#chat-input { flex: 1; min-width: 0; min-height: 0; background: transparent; border: 0; outline: 0; color: var(--honey-hi); font: 700 13px var(--read); text-shadow: none; caret-color: var(--honey); }
#chat:focus-within #chatline { border-color: var(--honey-deep); background: rgba(6, 18, 11, 0.7); }

/* ---- The spell bar and the food belt ---- */
#bars { position: absolute; right: 12px; bottom: 12px; z-index: 8; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
#bars > * { pointer-events: auto; }   /* (the belts take a click; the room beside a shorter one is the world's) */
#hotbar { display: grid; grid-template-columns: repeat(11, 50px); gap: 6px 5px; padding: 7px; }
#foodbar { display: flex; gap: 5px; padding: 7px; }
#hotbar:empty, #foodbar:empty { display: none; }
#hotbar, #foodbar { background: linear-gradient(#dbc698, #c4aa77); border-width: 2px; border-color: var(--ink); box-shadow: inset 0 0 0 1px #f6e5bd, inset 0 -3px 0 #a68a58, 0 3px 0 rgba(43, 29, 14, .4); }
.hslot {
  position: relative; background: var(--raised); border: 2px solid var(--ink); border-radius: 7px; corner-shape: bevel;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.7), inset 0 -3px 0 rgba(160, 110, 40, 0.32); cursor: pointer;
}
.hslot:hover { background: linear-gradient(#fffdf5, #f7e6bf); border-color: #e4be70; }
.hslot:active { transform: translateY(1px); }
.hslot .key { position: absolute; left: 1px; top: 1px; z-index: 1; min-width: 12px; padding: 1px 2px; border-radius: 3px; font: 8px/10px var(--blocks); background: #604521; color: #fff0c6; box-shadow: 0 1px 0 #392910; }
.hslot .key:empty { display: none; }
#hotbar .hslot { display: flex; flex-direction: column; align-items: center; width: 50px; height: 58px; padding-top: 3px; }
#hotbar .hslot .spell-icon { flex: none; width: 36px; height: 36px; }
#hotbar .hslot { background: var(--raised); border-color: #5e4525; }
#hotbar .hslot .sp { align-self: stretch; text-align: center; margin-top: 1px; font: 800 10px/1.1 var(--read); color: var(--ink); white-space: nowrap; }
#hotbar .hslot:hover { background: linear-gradient(#fffef7, #f8e6bd); border-color: #9c6b24; box-shadow: inset 0 0 0 1px #e4bb69; }
#hotbar .hslot.locked { background: linear-gradient(#ece2cc, #d9cbae); border-color: #9b8864; box-shadow: inset 0 1px 0 #f6edda; }
#hotbar .hslot.locked .spell-icon { opacity: 0.5; }
#hotbar .hslot.locked .sp { color: #78684b; }
#hotbar .hslot.locked::after { content: ''; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; background: var(--px-lock) center / 14px 14px no-repeat; image-rendering: pixelated; }
#foodbar .hslot { display: grid; place-items: center; width: 46px; height: 46px; }
#foodbar .hslot canvas { width: 36px; height: 36px; image-rendering: pixelated; }
#foodbar .hslot .cnt { right: 2px; bottom: 2px; padding: 1px 3px; background: #604521; color: #fff1c9; border-radius: 3px; text-shadow: none; font-size: 11px; }
#foodbar .hslot.empty { background: #bea77c; border-color: #927649; box-shadow: inset 0 2px 0 #a48b60; cursor: default; transform: none; }

/* ---- The right-click menu and the tooltip ---- */
#menu { max-width: calc(100vw - 8px); max-height: calc(100vh - 8px); overflow-y: auto; overscroll-behavior: contain; position: absolute; z-index: 20; min-width: 170px; padding: 5px; border-radius: 10px; font: 700 13px var(--read); }
#menu .title { padding: 3px 8px 5px; border-bottom: 2px solid var(--line); color: var(--leaf-deep); font: 800 12px var(--read); }
#menu .opt { display: block; width: 100%; border: 0; background: transparent; font: inherit; text-align: left; white-space: normal; padding: 5px 9px; border-radius: 5px; corner-shape: bevel; color: var(--ink); cursor: pointer; }
#menu .opt:first-child { font-weight: 800; }
#menu .opt:hover, #menu .opt:focus-visible { background: var(--evergreen); color: var(--paper); text-shadow: 0 1px 0 var(--ink); }
#menu .opt .t { color: #a0580c; }
#menu .opt:hover .t, #menu .opt:focus-visible .t { color: var(--honey-hi); }
#menu .opt:last-child { margin-top: 3px; border-top: 2px dashed var(--line); border-radius: 0 0 5px 5px; }
#menu .opt .cancel { color: #9a8a70; }
#menu .opt:hover .cancel, #menu .opt:focus-visible .cancel { color: var(--paper); }
#hint {
  position: absolute; left: 0; top: 0; z-index: 30; max-width: 290px; padding: 6px 10px 7px; pointer-events: none; white-space: normal;
  background: #fffaee; border: 2px solid var(--ink); border-radius: 7px; corner-shape: bevel; box-shadow: 0 3px 0 rgba(43, 29, 14, 0.38);
  color: var(--ink); font: 700 13px/1.35 var(--read); text-shadow: none;
}
#hint:empty { display: none; }
#hint .a { color: var(--ink); }
#hint .t { color: #1f6b3a; }
#hint .more { color: #8a6a40; font-weight: 600; }
#hint .ex { margin-top: 3px; font-weight: 600; color: #6a5030; line-height: 1.35; }

/* ---- Room to breathe on smaller windows ---- */
@media (max-width: 1320px) {
  #bars { flex-direction: row; align-items: flex-end; }   /* two rows of spells (six and five), the food belt beside them */
  #hotbar { grid-template-columns: repeat(6, 50px); }
}
@media (max-width: 1000px) {
  #chat { width: 300px; }
  #messages { height: 100px; }
}
@media (max-width: 760px) {
  #tabs button { width: 46px; padding: 0; justify-content: center; }
  #tabs .dock-label, #tabs kbd { display: none; }
  #panel { right: 56px; max-width: calc(100vw - 80px); }
  #bars { flex-direction: column; }
  #chat { width: 260px; }
}
@media (max-height: 760px) { #tabs { gap: 5px; } #tabs button { height: 36px; } }
@media (max-height: 650px) { #side { top: 204px; } #tabs { gap: 3px; } #tabs button { height: 32px; } #panel { max-height: calc(100vh - 300px); } }
body.demo #mm-tools, body.demo #bars { display: none !important; }

/* ---- Name tags ---- */
.label { text-shadow: none; transition: opacity 0.25s; }
.label .name { display: inline-block; font: 800 11px/1.3 var(--read); padding: 1px 8px; border-radius: 5px; corner-shape: bevel; background: rgba(35, 26, 14, 0.66); color: #fff6de; }   /* the kit's cut corners, like every tag */
.label .name.monster { color: #ffd76a; }
.label .name.npc { color: #a8e4ff; }
.label .name.pet { color: #ffd9a8; }   /* a player's dog */
.label .name.player, .label .name.me { color: #fff6de; }
.label .hpbar { width: 40px; height: 7px; margin: 2px auto 0; border: 2px solid #1a120a; border-radius: 4px; background: #5a1f1a; overflow: hidden; }
.label .say { font: 700 13px/1.35 var(--read); color: #2b1d0e; background: #fffaf0; border: 2px solid var(--ink); border-radius: 7px; corner-shape: bevel; padding: 3px 9px; margin-bottom: 5px; text-shadow: none; box-shadow: 0 3px 0 rgba(43, 29, 14, 0.3); }
.label .say.spell { background: none; border: 0; box-shadow: none; padding: 0; }

/* ---- Feedback: numbers that pop and arc, a banner for a level up ---- */
.splat { width: auto; height: auto; background: none; border: 0; border-radius: 0; line-height: 0; }
.levelup-banner { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); pointer-events: none; z-index: 12; line-height: 0; filter: drop-shadow(0 4px 0 rgba(43, 29, 14, 0.35)) drop-shadow(0 0 18px rgba(255, 214, 90, 0.8)); animation: banner-in 2.4s ease both; }
.levelup-banner svg.blocktext { height: 46px; display: block; }
@keyframes banner-in {
  0% { opacity: 0; transform: translateX(-50%) translateY(18px) scale(0.4); }
  14% { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1.12); }
  24% { transform: translateX(-50%) translateY(0) scale(1); }
  78% { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) { .levelup-banner { animation-duration: 0.01s; } }

.bag-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#bag-sort { min-height: 36px; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 6px; background: var(--raised); color: var(--ink); cursor: pointer; }
#bag-sort:disabled { opacity: .6; cursor: wait; }
#bag-sort-status { font: 11px/1.3 var(--read); color: #e9cf9c; }   /* on the bag's dark lining */
.sorting-bag #inventory, .sorting-bag #foodbar, .sorting-bag #equipment { pointer-events: none; opacity: .65; }

#skill-goals { margin-bottom: 8px; }
#skill-goals > summary { padding: 10px; min-height: 42px; border: 1px solid var(--line); border-radius: 6px; background: #fffaf0; color: var(--leaf-deep); font: 800 13px var(--read); cursor: pointer; }
#skill-goals[open] > summary { margin-bottom: 6px; }

#connection-dialog { max-width: min(420px, calc(100vw - 48px)); border: 2px solid #bca56b; border-radius: 12px; padding: 24px; background: #172c30; color: #fff3d8; z-index: 100000; }
#connection-dialog::backdrop { background: #08131be0; }
#connection-dialog p { line-height: 1.5; }

.mod-badge { display:inline-block; margin-left:5px; padding:2px 4px; border-radius:3px; background:#285f65; color:#cbfff2; font: bold 9px sans-serif; vertical-align:middle; }
#moderation-dialog { max-width: min(430px, calc(100vw - 48px)); background:#172c30; color:#fff3d8; padding:22px; border:2px solid #bca56b; border-radius:12px; }
#moderation-dialog label { display:grid; gap:6px; margin:12px 0; }
#moderation-dialog input, #moderation-dialog select, #moderation-dialog textarea { width:100%; box-sizing:border-box; min-height:40px; }
#moderation-dialog::backdrop { background:#08131ba8; }
#moderation-dialog .moderation-note { margin:0; font-size:12px; line-height:1.4; opacity:.9; }

#update-notice { position:fixed; top:12px; left:50%; transform:translateX(-50%); max-width:calc(100vw - 32px); box-sizing:border-box; padding:10px 16px; border:2px solid #bca56b; border-radius:10px; background:#172c30ed; color:#fff3d8; text-align:center; z-index:9000; pointer-events:none; font-size:13px; }
@media(max-width:700px) { #update-notice {top:auto;bottom:calc(72px + env(safe-area-inset-bottom));width:max-content;} }

#equipment-detail {width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - 30px);overflow:auto;box-sizing:border-box;background:#fff6de;color:#283e35;border:3px solid #394c40;border-radius:12px;padding:18px;font:14px/1.5 system-ui;}
#equipment-detail::backdrop {background:#12272099;}
#equipment-detail h2 {margin:0 0 14px;font-size:21px;}
#equipment-detail table {width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;}
#equipment-detail th,#equipment-detail td {padding:6px 3px;text-align:left;border-bottom:1px solid #bfc6aa;}
#equipment-detail td {text-align:right;}
#equipment-detail .better {color:#226a39;} #equipment-detail .worse {color:#9a342b;}
#equipment-detail button {min-height:44px;min-width:80px;}

#recover-backpack {min-height:32px;max-width:100%;font:700 12px var(--read);background:#ffe27a;color:var(--ink);border:2px solid var(--ink);cursor:pointer;}
.backpack-marker {position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;min-height:36px;white-space:nowrap;background:#2b1d0eee;color:#ffe27a;border:2px solid #ffe27a;border-radius:6px;padding:5px 8px;font:700 13px var(--read);z-index:4;}
#recovery-detail {box-sizing:border-box;width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;background:var(--parchment);color:var(--ink);border:3px solid var(--ink);border-radius:12px;padding:18px;font:14px/1.5 var(--read);}
#recovery-detail::backdrop {background:#12272088;} #recovery-detail button {min-width:80px;min-height:44px;}

/* A north-up plan selects obscured floor squares without aiming through a wall. */
#make .build-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:10px 0; }
#make .build-tiles button { min-height:64px; padding:8px 5px; background:#e8ebcb; border:2px solid #9baf79; box-shadow:none; }
#make .build-tiles strong, #make .build-tiles span { display:block; }
#make .build-tiles span { font-size:10px; margin-top:4px; overflow-wrap:anywhere; }
#make .build-tiles .unavailable { background:#eadfca; color:#7b654a; border-color:#c4b393; }
#make .build-tiles [aria-pressed="true"] { outline:3px solid #b67c15; outline-offset:-3px; background:#ffe4a0; color:var(--ink); }
#make .build-tile-note { min-height:40px; font-size:12px; }
#make .build-tile-use { min-height:44px; width:100%; }
#make .build-tile-use:disabled { opacity:.5; cursor:default; }
#make .build-nearby { margin:0 0 8px; min-height:32px; }
@media (min-width:1200px) { #make[data-kind="build-target"] { left:auto; right:128px; transform:translateY(-50%); } }

#make .build-tiles.furniture-tiles { grid-template-columns:repeat(5,minmax(0,1fr)); }
#make .furniture-tiles button { min-height:56px; padding:6px 2px; }
#make .furniture-tiles span { font-size:9px; }

#plot-access{box-sizing:border-box;width:min(510px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:0;border:3px solid var(--ink);border-radius:12px;background:var(--parchment);color:var(--ink);font:700 14px/1.55 var(--read)}
#plot-access #plot-size{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#plot-access #plot-size[hidden],#plot-access #plot-size-note[hidden]{display:none}#plot-access #plot-side{min-width:84px;text-align:center;font-size:17px}#plot-access #plot-smaller,#plot-access #plot-larger{width:42px;font-size:20px;line-height:1}#plot-access #plot-resize{margin-left:auto}
#plot-access::backdrop{background:rgb(19 36 28 / 55%)}#plot-access *{box-sizing:border-box}#plot-access header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:var(--evergreen);color:var(--paper)}#plot-access h2{margin:0;font-size:23px}#plot-access .plot-body{padding:16px 20px}#plot-access label{display:block;margin:12px 0 5px}#plot-access input,#plot-access select{width:100%;min-width:0;padding:10px;border:2px solid #92784f;background:#fff9e7;border-radius:6px;font:inherit}#plot-access ul{list-style:none;padding:0}#plot-access li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #cbb58b}#plot-access li span{overflow-wrap:anywhere}#plot-access button{min-height:42px;padding:8px 12px;cursor:pointer;font:inherit}#plot-access form>button{width:100%;background:var(--evergreen);color:var(--paper);border:2px solid var(--ink);border-radius:7px}#plot-access button:disabled{opacity:.6;cursor:wait}#plot-access .plot-warning{font-size:12px;color:#665337}#plot-access-note{min-height:24px;color:#365b39}#plot-close{background:transparent;color:inherit;border:0;font-size:25px!important}#plot-access :focus-visible{outline:3px solid #758a4b;outline-offset:3px}

/* Plot offers: parchment review sheet with an explicit final sale action. */
#plot-market{box-sizing:border-box;width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:0;border:3px solid var(--ink);border-radius:12px;background:var(--parchment);color:var(--ink);font:600 14px/1.55 var(--read)}
#plot-market.property-view{width:min(420px,calc(100vw - 24px))}
#plot-market.property-view::backdrop{background:rgb(19 36 28 / 25%)}
#plot-market .market-wallet[hidden]{display:none}
#plot-market .market-size{font-size:20px;color:var(--evergreen);margin:4px 0}
#plot-market.property-view h3{margin-top:0}
#plot-market.property-view .market-status{margin:6px 0}
#plot-market::backdrop{background:rgb(19 36 28 / 60%)}#plot-market *{box-sizing:border-box}#plot-market header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:var(--evergreen);color:var(--paper);position:sticky;top:0;z-index:1}#plot-market h2{margin:0;font-size:24px}#plot-market h3{margin:18px 0 8px}#plot-market h4{margin:0;font-size:16px}#plot-market .market-body{padding:16px 20px;overflow-wrap:anywhere}#plot-market .market-intro{margin-top:0}#plot-market button{min-height:42px;padding:8px 12px;cursor:pointer;font:inherit;border:2px solid #92784f;border-radius:7px;background:#fff9e7;color:var(--ink);margin:4px 6px 4px 0;max-width:100%}#plot-market .market-wallet{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;background:#e8ddbd;border-radius:8px;padding:8px 12px}#market-balance{flex-basis:100%}#plot-market .market-primary{background:var(--evergreen);color:var(--paper);border-color:var(--ink)}#plot-market .market-rule{padding:10px 12px;background:#eadfc5;border-left:3px solid #92784f;font-size:13px}#plot-market .market-price{font-size:20px;color:var(--evergreen);padding:10px 0}#plot-market .market-offer{padding:14px 0;border-top:1px solid #c6b58a}#plot-market .market-offer p{margin:5px 0}#plot-market .market-status{font-size:12px;color:#635538}#market-note{color:#365b39}#plot-market .market-error{color:#872e25}#plot-market input{display:block;width:100%;min-width:0;padding:10px;border:2px solid #92784f;border-radius:6px;background:#fff9e7;font:inherit}#plot-market details{margin:12px 0}#plot-market summary{cursor:pointer;text-decoration:underline}#plot-market details ul{max-height:220px;overflow:auto}#plot-market button:disabled{opacity:.55;cursor:default}#plot-market #market-close{background:transparent;color:inherit;border:0;font-size:25px;margin:0}#plot-market :focus-visible{outline:3px solid #758a4b;outline-offset:3px}

/* Quiet, persistent offer attention; no blinking or modal interruptions. */
.plot-attention{display:inline-block;min-width:17px;padding:1px 4px;margin-left:4px;border:1px solid #503d17;border-radius:8px;background:#f3cd6b;color:#34260f;font:800 10px/14px var(--read);text-align:center;vertical-align:middle}
.plot-attention[hidden]{display:none!important}
[data-tab="friends"]{position:relative}[data-tab="friends"]>.plot-attention{position:absolute;right:2px;top:0;margin:0;pointer-events:none}
#plot-market .market-unread{display:inline-block;border-radius:5px;padding:2px 7px;background:#efd07e;color:#44320c;font-size:12px;margin-bottom:6px}
.label .name .player-combat{display:inline-block;margin-left:2px;padding:1px 4px;border-radius:3px;corner-shape:bevel;background:#e6d7aa;color:#3a341f;font:800 9px/13px var(--read);vertical-align:middle;text-shadow:none}
/* A Pioneer's badge (server/pioneers.js): a honey star and their number, beside their name. */
.label .name .pioneer-badge{display:inline-block;margin-left:4px;padding:1px 4px;border-radius:3px;corner-shape:bevel;background:linear-gradient(180deg,#ffe98f,#f2b83a);color:#4a2f08;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 0 0 1px #9c6b16;font:800 9px/13px var(--read);vertical-align:middle;text-shadow:none}

#hud-flags .pvp-region{background:#6e302c;color:#fff1dc;border:1px solid #e9876c}#hud-flags .pvp-border{background:#ecd3a2;color:#5e351e}.maplegend .sw.pvp{background:#b9574e;border:1px dashed #f1ac80}

.eqslot[data-slot="neck"]{grid-area:neck}

/* Keep expanded player labels and map tools legible in crowded scenes and narrow windows. */
.label .name .player-combat{display:block;width:max-content;margin:1px auto 0;font-size:9px;line-height:11px;padding:0 4px}
.maptools #wm-pvp{font:800 12px var(--read);white-space:nowrap;flex-shrink:0}
@media(max-width:420px){.maptools{flex-wrap:wrap}.maptools #wm-info{flex-basis:100%;margin:0;text-align:right}}

/* Cave key uses the same stone silhouette and dark doorway as the map marks. */
.maplegend .sw.cave{position:relative;background:#919990;border:0;border-radius:0;clip-path:polygon(0 100%,10% 36%,34% 8%,65% 0,92% 40%,100% 100%)}
.maplegend .sw.cave:after{content:"";position:absolute;inset:36% 28% 0;background:#181d22;clip-path:polygon(0 100%,0 35%,35% 0,72% 0,100% 35%,100% 100%)}

#tabs button[data-tab="inventory"] { position: relative; }
#bag-space-badge { position: absolute; top: -7px; right: -3px; padding: 2px 4px; border: 2px solid var(--ink); border-radius: 5px; background: #fff2c6; color: #70480b; font: 800 10px/1 var(--read); white-space: nowrap; pointer-events: none; }
#bag-space-badge[hidden] { display: none; }

/* Recovery stays readable on a narrow phone and never blocks combat with alerts. */
#hud-flags .low-health {background:#ffe3dc;color:#902c24;height:auto;min-height:22px;white-space:normal;}
#recovery-detail h2 {margin:0 0 12px;font-size:22px;}
#recovery-detail h3 {margin:0;font-size:16px;}
#recovery-detail p {margin:6px 0;}
.death-recap:not(:empty) {margin-bottom:14px;}
.recovery-bag {border-top:1px solid #cbb98e;padding:12px 0;}
.recovery-time {font-weight:700;color:#775014;}
.recovery-loot {display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:4px 12px;padding-left:20px;margin:10px 0;}

#recovery-detail button {background:#f4df9c;color:var(--ink);border:2px solid #806a3f;border-radius:6px;padding:8px 18px;font:700 14px var(--read);cursor:pointer;}

#players-online {display:inline-flex;align-items:center;gap:6px;order:-1;min-height:26px;font:800 11px var(--read);color:#214d32;white-space:nowrap;padding:3px 7px;background:#e3f1cf;border:1px solid #83985a;border-radius:5px;}
#players-online::before {content:"";width:7px;height:7px;flex:0 0 7px;background:#3f8a4e;border:1px solid #214d32;border-radius:50%;}

/* Companion browsing has its own centered layout; ordinary shops still sit beside the bag. */
#shop.pet-shop { left:50%; top:50%; right:auto; bottom:auto; transform:translate(-50%,-50%); width:480px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 32px); }
#shop.pet-shop > .stock { display:grid; grid-template-columns:1fr; gap:8px; padding:4px 10px 10px; }
.pet-card { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px; border:2px solid var(--line); border-radius:8px; background:#fff8e8; }
.pet-portrait { display:grid; place-items:center; width:64px; height:64px; background:#eee1bb; border-radius:8px; }
.pet-portrait canvas, .pet-portrait img { position:static; width:56px; height:56px; image-rendering:pixelated; }
.pet-copy strong { font:800 15px var(--read); color:var(--ink); }
.pet-copy p { margin:4px 0 0; font:12px/1.4 var(--read); color:var(--brown); }
#shop .pet-buy { min-height:44px; padding:8px; font:800 12px var(--read); white-space:nowrap; }
.pet-shop-note { flex:0 0 auto; margin:0 12px 12px; font:12px/1.5 var(--read); color:var(--brown); }
@media(max-width:480px){ .pet-card { grid-template-columns:56px minmax(0,1fr); gap:8px; } .pet-portrait { width:56px; height:56px; grid-row:span 2; } #shop .pet-buy { grid-column:2; justify-self:start; } }

#bank { left:50%; top:50%; transform:translate(-50%,-50%); width:700px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 32px); display:flex; flex-direction:column; overflow:hidden; }
#bank > h3, #bank > .sub { flex:0 0 auto; }
.bank-body { display:flex; flex-direction:column; min-height:0; }
.bank-controls { flex:0 0 auto; }
.bank-quantity { display:flex; align-items:center; gap:10px; margin:8px 0 12px; font:700 13px var(--read); }
.bank-quantity select { min-height:40px; max-width:65%; padding:6px; background:#fff8e8; color:var(--ink); border:2px solid var(--line); border-radius:5px; font:700 13px var(--read); }
.bank-search { display:block; font:700 12px var(--read); }
.bank-search-field { display:flex; gap:6px; margin-top:5px; }
.bank-search input { min-width:0; width:100%; min-height:40px; padding:7px 10px; border:2px solid var(--line); border-radius:5px; background:#fffaf0; color:var(--ink); font:16px var(--read); }
#bank .bank-clear { flex:0 0 auto; padding:5px 10px; font:700 12px var(--read); }
.bank-filters { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
#bank .bank-filters button { min-height:36px; padding:5px 10px; font:800 12px var(--read); }
#bank .bank-filters button[aria-pressed="true"] { background:#3d7047; color:#fff8e8; border-color:#284b30; box-shadow:inset 0 -2px #2a5132; }
#bank :is(input,button,select):focus-visible { outline:3px solid #347044; outline-offset:2px; }
.bank-count { margin:0 0 8px; font:600 11px var(--read); color:var(--brown); }
.bank-collections { min-height:0; overflow:auto; display:grid; grid-template-columns:1fr 1fr; gap:14px; overscroll-behavior:contain; }
.bank-collections section { min-width:0; }
.bank-collections h4 { display:flex; justify-content:space-between; align-items:center; margin:0 0 8px; padding-bottom:6px; border-bottom:2px solid var(--line); font:800 15px var(--read); }
.bank-collections h4 small { font:600 11px var(--read); color:var(--brown); }
#bank .stock { grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:6px; justify-content:stretch; }
#bank .bank-item { display:flex; flex-direction:column; align-items:center; gap:3px; min-height:86px; padding:6px; overflow-wrap:anywhere; font:700 11px/1.25 var(--read); }
.bank-item canvas { position:static; width:32px; height:32px; image-rendering:pixelated; }
.bank-item small { color:var(--brown); font:800 12px var(--read); }
.bank-empty { grid-column:1/-1; font:12px/1.5 var(--read); color:var(--brown); }
@media(max-height:560px){ .bank-body { overflow:auto; overscroll-behavior:contain; } .bank-collections { flex-shrink:0; overflow:visible; } }
@media(max-width:540px){ .bank-collections { grid-template-columns:1fr; } #bank .stock { grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); } }

/* A quiet first-action marker; dismissing Field notes clears both hints. */
.label.first-hunt .name { outline:2px solid #ffe27a; outline-offset:3px; }
.first-action { outline:3px solid #ffe27a!important; outline-offset:2px; }
#first-steps-dismiss { margin:0 0 8px; padding:5px 8px; border:1px solid #9e885d; border-radius:5px; background:#fff6de; color:#365a38; font:700 12px var(--read); cursor:pointer; }
#first-steps-dismiss[hidden], .journey-choice[hidden] { display:none; }
#journey-card.first-steps { border-color:#83985a; }
@media(pointer:coarse) and (max-height:500px){#journey-card.first-steps { position:fixed; left:calc(max(8px, env(safe-area-inset-left)) + 218px); right:calc(max(8px, env(safe-area-inset-right)) + 176px); top:10px; width:auto; max-height:calc(100dvh - 100px); } #journey-card.first-steps h2 { font-size:13px; } #journey-card.first-steps p { font-size:12px; }}

#settings label.audio-level { display: grid; grid-template-columns: 1fr auto; gap: 5px; margin: 8px 0 12px; }
#settings .audio-level input[type="range"] { grid-column: 1 / -1; width: 100%; height: 24px; margin: 0; accent-color: var(--leaf); }
#settings .audio-level output { font-variant-numeric: tabular-nums; }

#compass-ring .s { top: auto; bottom: -15px; }
#compass-ring .e { left: auto; right: -15px; top: 50%; margin-left: 0; margin-top: -10px; }
#compass-ring .w { left: -15px; top: 50%; margin-left: 0; margin-top: -10px; }

/* Choosing a blueprint folds the catalogue away so the actual placement remains visible. */
#make[data-kind="build"][data-preview="true"] { top:auto; bottom:110px; left:50%; right:auto; transform:translateX(-50%); width:min(460px,calc(100% - 24px)); max-height:40vh; }
#make[data-preview="true"] > .rows, #make[data-preview="true"] > .build-controls, #make[data-preview="true"] > .sub, #make[data-preview="true"] > .warn { display:none; }
#make .build-review[hidden] { display:none; }
#make .build-review { overflow:auto; }
#make .build-name { font:800 15px var(--read); color:var(--ink); }
#make .build-cost, #make .build-note { margin:6px 0; font:600 12px/1.4 var(--read); color:var(--brown); }
#make .build-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
#make .build-size { display:flex; align-items:center; gap:6px; margin:6px 0; font:800 12px var(--read); color:var(--brown); }   /* a claim stake's plot, smaller or larger */
#make .build-size[hidden] { display:none; }
#make .build-size button { width:36px; min-height:34px; padding:0; font:800 17px/1 var(--read); }
#make .build-size b { min-width:70px; text-align:center; font-size:14px; color:var(--ink); }
#make .build-actions button { min-height:40px; padding:6px 10px; font:800 12px var(--read); }
#make .build-confirm { flex:1; background:var(--evergreen); color:var(--paper); }
#make .build-confirm:disabled { opacity:.5; cursor:default; }
@media (max-width:600px), (max-height:550px) { #make[data-kind="build"][data-preview="true"] { bottom:calc(8px + env(safe-area-inset-bottom)); max-height:42dvh; } #make .build-actions button { min-height:44px; } }

/* How many? The X… box of the amount menus (client/js/amount.js): a parchment card over the game, the number large. */
#amount-dialog { box-sizing: border-box; width: min(340px, calc(100vw - 32px)); padding: 0; background: var(--parchment); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; corner-shape: bevel; box-shadow: var(--bevel), var(--ledge); font: 14px/1.5 var(--read); text-shadow: none; }
#amount-dialog::backdrop { background: rgb(20 35 28 / 45%); }
#amount-dialog form { margin: 0; padding: 16px 18px 18px; }
#amount-dialog h2 { margin: 0 0 8px; font: 18px/1.4 var(--blocks); color: var(--leaf-deep); }
#amount-dialog .amount-what { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 700; color: var(--brown); }
#amount-dialog .amount-what[hidden], #amount-dialog .amount-what img[hidden] { display: none; }
#amount-dialog .amount-what img { width: 32px; height: 32px; image-rendering: pixelated; }
#amount-dialog input { display: block; box-sizing: border-box; width: 100%; min-height: 48px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); color: var(--ink); font: 700 22px var(--read); font-variant-numeric: tabular-nums; }
#amount-dialog input[hidden] { display: none; }   /* (asking yes or no: askConfirm) */
#amount-dialog #amount-help { min-height: 1.5em; margin: 6px 0 12px; font-size: 12.5px; color: var(--brown); }
#amount-dialog #amount-help.bad { color: #b0462e; font-weight: 700; }
#amount-dialog .amount-buttons { display: flex; justify-content: flex-end; gap: 8px; }
#amount-dialog button { min-width: 96px; min-height: 44px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); color: var(--ink); font: 700 14px var(--read); cursor: pointer; }
#amount-dialog .amount-ok { background: var(--evergreen); color: var(--paper); }
#amount-dialog .amount-ok:disabled { opacity: .55; cursor: default; }
#make .opt .qty button.idle { visibility: hidden; }