:root {
  --wood: #7a4b2a;
  --wood-d: #4a2a12;
  --paper: #f6e7c4;
  --paper-d: #e3cc9c;
  --ink: #3a2414;
  --muted: #7a5f45;
  --green: #4f9c3a;
  --red: #b8392a;
  --px: "Press Start 2P", monospace;
  --th: "Chakra Petch", system-ui, sans-serif;
  --slot: min(48px, calc((100vw - 28px) / 12));
  --bar: var(--slot);                          /* the tool bar's height in slots: one row, or two on a phone held upright */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ui: 1;                                    /* the size of the on-screen controls, set in the menu (js/game/menus.js uiScale) */
  --mm: 0px;                                  /* room the mini map takes under the clock */
  --day-h: 0px;                               /* …and the right column under it on a small screen (measured: ui.js measureHud) */
  --ord-h: 0px;                               /* the order sheets under the mini map (measured) */
  --mm-w: 0px;                                /* the mini map's width, when it is up (a wide screen: the right column stands beside it) */
  --clock-b: 128px;                           /* bottom edge of the clock panel, measured by the game (screen px) */
  /* the free strip along the top between the clock (left) and the map and friends (right):
     toasts and the "whose farm" chip sit in the middle of it */
  --gap-x: calc((366px + 100vw - 170px) / 2);
  --gap-w: calc(100vw - 366px - 170px - 16px);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1d2b1a;
  color: var(--ink);
  font: 400 16px/1.5 var(--th);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#game {
  cursor: pointer;
  position: fixed;
  left: 0;
  top: 0;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.panel {
  background: var(--paper);
  border: 3px solid var(--wood-d);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--paper-d), 0 3px 0 rgb(0 0 0 / .35);
}

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }

/* ---- HUD ------------------------------------------------------------------ */
.hud-btn {
  position: relative;
  width: 44px;
  height: 44px;
  font-size: 20px;
  line-height: 1;
}
#corner-btns {
  position: fixed;
  left: 10px;
  bottom: calc(10px + var(--safe-b));
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* on phones the joystick owns this corner; sound and full screen are in the menu */
.touch #corner-btns { display: none; }
#hud-left {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.count {
  position: absolute;
  right: -6px;
  top: -6px;
  min-width: 18px;
  padding: 2px 4px;
  border-radius: 9px;
  background: #c0392b;
  color: #fff;
  font: 9px/1.2 var(--px);
}

/* ---- other farmers ------------------------------------------------------- */
#tags { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.tag {
  position: absolute;
  left: 0;
  top: 0;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgb(20 14 8 / .7);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
#hint {
  position: fixed;
  left: 0;
  top: 0;
  max-width: 260px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgb(20 14 8 / .82);
  color: #fff6dc;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}
#profile {
  position: fixed;
  left: 66px;
  top: calc(var(--clock-b) + 8px);
  width: 250px;
  padding: 12px;
  font-size: 14px;
}
#profile p { margin: 6px 0; }
#profile .btn { width: 100%; margin-top: 6px; }
.pf-head { display: flex; gap: 10px; align-items: center; }

/* mini map under the clock; tap it to walk there */
body.has-map { --mm: 112px; }
#minimap {
  position: fixed;
  right: 10px;
  top: max(10px, env(safe-area-inset-top));
  padding: 4px;
  line-height: 0;
  cursor: crosshair;
}
#minimap canvas { display: block; width: 132px; height: 96px; image-rendering: pixelated; }
#btn-map[aria-pressed="false"] { opacity: .6; }

/* friend shortcuts down the right edge, under the mini map, the day and the order sheets (their heights measured in
   the controls' own units, ui.js measureHud: this strip is drawn at the controls' size) */
#friends {
  position: fixed;
  right: 10px;
  top: calc(max(10px, env(safe-area-inset-top)) + var(--mm) + var(--day-h) + var(--ord-h));
  max-height: calc(100vh - 10px - var(--mm) - var(--day-h) - var(--ord-h) - var(--bar) - 80px); max-height: calc(100dvh - 10px - var(--mm) - var(--day-h) - var(--ord-h) - var(--bar) - 80px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 2px;
}
.friend {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  padding: 0;
  overflow: visible;
  display: grid;
  place-items: center;
  background: #fff6dc;
}
/* a photo fills the frame exactly, whatever its shape (the grid would let a tall one run over) */
.friend img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.friend img.pixel, .pf-av img.pixel { image-rendering: pixelated; }
.friend .emoji { font-size: 26px; line-height: 1; }
.friend.current { border-color: #ff5a36; box-shadow: 0 0 0 3px #ff5a36; }
.friend .dot {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #3fc23f;
  border: 2px solid #fff;
}
.friend .lv {
  position: absolute;
  left: -6px;
  top: -6px;
  padding: 1px 4px;
  border-radius: 8px;
  background: #d9534f;
  color: #fff;
  font: 700 10px/1.3 var(--th);
}
.pf-head small { display: block; color: var(--muted); }
.pf-av {
  flex: none;
  width: 48px;
  height: 48px;
  border: 2px solid var(--wood-d);
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #fff6dc;
  font-size: 26px;
}
.pf-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-av.small { width: 36px; height: 36px; font-size: 20px; }
.pf-online { color: var(--muted); font-weight: 600; }
.pf-online.on, .dot-on { color: #2f8a2f; }
.dot-on { font-size: 12px; margin-left: 4px; }
.pf-hearts { color: #d9534f; letter-spacing: 1px; font-size: 16px; }
.pf-stat { font-weight: 600; }

/* the status card, top left: my face on the left (tap it for my profile), then the date, time and
   money, the energy bar, the level, the next pickup, and what is on me as icons */
/* touch screens: folded to the face alone; a tap unfolds it */
body.touch #clock.mini { width: auto !important; min-width: 0 !important; max-width: none !important; padding: 4px; }
body.touch #clock.mini .hud-main { display: none; }
#clock {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 66px;
  width: 236px;
  padding: 6px 8px 7px 6px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
}
#me-badge {
  flex: none; width: 58px; height: 58px; padding: 3px; cursor: pointer;
  background: linear-gradient(#fff6dc, #e8d4a8); border: 3px solid var(--wood-d); border-radius: 12px;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .12), 0 2px 0 rgb(0 0 0 / .25);
}
#me-badge:hover { filter: brightness(1.05); }
#me-badge canvas { display: block; width: 46px; height: 46px; image-rendering: pixelated; }
.hud-main { flex: 1; min-width: 0; }
/* the card: the name with the level chip, then the energy and experience bars, their labels lined up */
.clock-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 1px 0 6px; }
#hud-name { font-weight: 700; font-size: 14px; color: #3a2414; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.hud-bar:last-child { margin-bottom: 1px; }
.hud-label { flex: none; width: 44px; font-size: 11px; font-weight: 700; color: var(--wood); }
/* under the card: what is on me, then the hands' faces */
#below { position: fixed; left: 66px; top: calc(var(--clock-b) / var(--ui) + 6px); display: flex; align-items: flex-start; gap: 6px; z-index: 3; }
#buffs { display: flex; flex-wrap: wrap; gap: 4px; max-width: 140px; }
/* the right column: the day (time and weather, the date, my money, what is coming) and my order sheets, as plain text
   over the scene. On a wide screen it stands beside the mini map; on a small one it follows under it. */
.hud-text { color: #fff8e6; text-shadow: 0 1px 0 #3a2414, 1px 0 0 #3a2414, -1px 0 0 #3a2414, 0 -1px 0 #3a2414, 1px 1px 0 #3a2414, -1px -1px 0 #3a2414, 1px -1px 0 #3a2414, -1px 1px 0 #3a2414, 0 2px 4px rgb(0 0 0 / .45); }
#rightcol { position: fixed; right: 10px; top: calc(max(10px, env(safe-area-inset-top)) + var(--mm)); max-width: calc(100vw - 330px); text-align: right; pointer-events: none; }
#rightcol > * { pointer-events: auto; }
#orders-col { position: fixed; right: 10px; top: calc(max(10px, env(safe-area-inset-top)) + var(--mm) + var(--day-h)); width: 190px; text-align: right; }
/* where I am, when away from home (tap: the place's card); the home button in the left rail goes with it */
#hud-place { display: block; width: 100%; margin: 0 0 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; text-align: right; white-space: nowrap; cursor: pointer; }
#hud-place[hidden] { display: none; }
#clock-time { font: 18px/1.1 var(--px); }
#clock-date { margin-top: 5px; font-size: 12px; font-weight: 700; white-space: nowrap; }
#clock-money { margin-top: 6px; font: 16px/1 var(--px); color: #ffe08a; }
#clock-truck { margin-top: 7px; font-size: 11px; font-weight: 700; line-height: 1.35; white-space: nowrap; }   /* one line, however long: the column grows leftwards */
#clock-truck:empty { display: none; }
#orders-hud { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; font: inherit; font-size: 11px; font-weight: 700; line-height: 1.4; text-align: right; cursor: pointer; }
#orders-hud[hidden] { display: none; }
#orders-hud b { display: block; font-size: 12px; margin-bottom: 1px; }
#orders-hud span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#orders-hud span.req { color: #ffd76a; }
#orders-hud .done { color: #b8f090; }
@media (min-width: 1100px) {                   /* wide: beside the mini map at the top (clear of the toasts in the middle) */
  #rightcol { top: max(10px, env(safe-area-inset-top)); right: calc(10px + var(--mm-w)); }
  body.has-map { --mm-w: 162px; }
  /* under the mini map, or under the day where that reaches lower (a long line beside the map; no map at all) */
  #orders-col { top: calc(max(10px, env(safe-area-inset-top)) + max(var(--mm), var(--day-h))); }
  #friends { top: calc(max(10px, env(safe-area-inset-top)) + max(var(--mm), var(--day-h)) + var(--ord-h)); }
}
#buffs[hidden] { display: none; }
.buff { width: 24px; height: 24px; padding: 0; font-size: 14px; line-height: 1; border: 2px solid var(--wood-d); border-radius: 6px; background: #fff6dc; cursor: help; }
.buff.bad { background: #f8d8d0; border-color: #a0392b; }
#energy {
  position: relative;
  flex: 1;
  height: 12px;
  background: #3a2414;
  border: 2px solid var(--wood-d);
  border-radius: 2px;
  overflow: hidden;
}
#hpbar[hidden] { display: none; }
#hp { position: relative; flex: 1; height: 12px; background: #3a2414; border: 2px solid var(--wood-d); border-radius: 2px; overflow: hidden; }
#hp-fill { position: absolute; inset: 0 auto 0 0; width: 100%; background: #d9343a; transition: width .2s; background-image: repeating-linear-gradient(-45deg, rgb(255 255 255 / .14) 0 4px, transparent 4px 8px); }
#hp-text { position: absolute; inset: 0; font: 8px/12px var(--px); color: #fff; text-align: center; text-shadow: 1px 1px 0 #000; }
#energy-fill { position: absolute; inset: 0 auto 0 0; width: 100%; background: #5cc23f; transition: width .2s;
  background-image: repeating-linear-gradient(-45deg, rgb(255 255 255 / .18) 0 4px, transparent 4px 8px); }
#energy-text { position: absolute; inset: 0; font: 8px/12px var(--px); color: #fff; text-align: center; text-shadow: 1px 1px 0 #000; }

#update {
  position: fixed;
  left: 50%;
  bottom: calc((var(--bar) + 56px) * var(--ui) + var(--safe-b));
  translate: -50% 0;
  z-index: 6;
  padding: 8px 14px;
  font-weight: 700;
  background: #fff6dc;
}
#toast {
  z-index: 5;
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: var(--gap-x);
  translate: -50% -140%;
  max-width: max(200px, min(520px, var(--gap-w)));
  padding: 8px 14px;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transition: translate .2s, opacity .2s;
  pointer-events: none;
}
#toast.show { translate: -50% 0; opacity: 1; }

/* ---- hotbar --------------------------------------------------------------- */
#bottom {
  position: fixed;
  left: 50%;
  bottom: calc(10px + var(--safe-b));
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* the two rows' tabs, sitting on the bar's left corner */
#hotbar-rows { display: flex; gap: 4px; align-self: flex-start; margin: 0 0 -4px 2px; }
.row-tab { padding: 3px 9px 5px; border: 2px solid var(--wood-d); border-bottom: 0; border-radius: 6px 6px 0 0; background: #a8865a; color: #3a2414; font: inherit; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; opacity: .8; }
.row-tab[aria-pressed="true"] { background: var(--paper); opacity: 1; }
#item-label {
  max-width: calc(100vw - 24px);
  padding: 3px 10px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#hotbar {
  display: grid;
  grid-template-columns: repeat(12, var(--slot));
  padding: 3px;
  gap: 2px;
  background: var(--wood-d);
  border-radius: 4px;
  box-shadow: 0 3px 0 rgb(0 0 0 / .35);
}
.slot {
  position: relative;
  width: var(--slot);
  height: var(--slot);
  padding: 0;
  background: var(--paper);
  border: 2px solid var(--paper-d);
  border-radius: 3px;
}
.slot, .bag-slot, .stall-zone li { touch-action: none; }
.drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 1000;
  filter: drop-shadow(0 3px 0 rgb(0 0 0 / .35));
}
.dragging { opacity: .4; }
.drop-over { outline: 3px dashed #ff5a36; outline-offset: -3px; }
.stall-zone { margin-top: 6px; padding: 2px 6px 6px; border: 2px dashed var(--paper-d); border-radius: 6px; }
.stall-zone.drop-over { background: #fff6dc; }
.stall-zone li { cursor: grab; }
.bag-slot .key { position: absolute; left: 3px; top: 2px; font: 7px/1 var(--px); color: var(--muted); }
.slot img { width: 76%; height: 76%; image-rendering: pixelated; display: block; margin: auto; pointer-events: none; }
.slot.sel { border-color: #ff5a36; background: #fff6dc; box-shadow: inset 0 0 0 2px #ff5a36; }
.slot .qty {
  position: absolute;
  right: 2px;
  bottom: 2px;
  font: 8px/1 var(--px);
  color: #fff;
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000;
}
.slot .key {
  position: absolute;
  left: 2px;
  top: 2px;
  font: 8px/1 var(--px);
  color: var(--ink);
  opacity: .7;
}
.slot.sel .key { color: #c0391b; opacity: 1; }
.slot .meter { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; background: #3a2414; }
.slot .meter i { display: block; height: 100%; background: #4fa3e8; }
.touch .slot .key { display: none; }

/* ---- touch controls ------------------------------------------------------- */
#touch { position: fixed; inset: 0; pointer-events: none; }
#stick, #btn-a, #btn-b, #btn-horn { pointer-events: auto; position: absolute; touch-action: none; }
#stick {
  left: 18px;
  bottom: calc(var(--bar) + 70px + var(--safe-b));
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: rgb(0 0 0 / .22);
  border: 3px solid rgb(255 255 255 / .35);
}
#knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgb(255 255 255 / .75);
  border: 3px solid var(--wood-d);
}
#btn-a, #btn-b {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid var(--wood-d);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  box-shadow: 0 3px 0 rgb(0 0 0 / .35);
}
#btn-a { right: 18px; bottom: calc(var(--bar) + 90px + var(--safe-b)); background: var(--green); }
#btn-b { right: 96px; bottom: calc(var(--bar) + 62px + var(--safe-b)); background: #c9862a; width: 56px; height: 56px; font-size: 15px; }
#btn-horn { right: 30px; bottom: calc(var(--bar) + 170px + var(--safe-b)); width: 48px; height: 48px; border-radius: 50%; border: 2px solid #5b361c; background: #f2cf3a; font-size: 22px; }
#btn-horn[hidden] { display: none; }

/* ---- dialog --------------------------------------------------------------- */
#modal {
  width: min(520px, calc((100vw - 24px) / var(--ui)));
  max-height: calc((100vh - 24px) / var(--ui)); max-height: calc((100dvh - 24px) / var(--ui));
  overflow: auto;
  padding: 18px 20px 16px;
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--wood-d);
  border-radius: 6px;
  box-shadow: inset 0 0 0 3px var(--paper-d), 0 6px 0 rgb(0 0 0 / .4);
  user-select: text;
  -webkit-user-select: text;
}
#modal::backdrop { background: rgb(10 14 8 / .55); }
#modal-title { margin: 0 0 10px; font-size: 22px; line-height: 1.3; }
#modal-title.logo {
  font: 30px/1.2 var(--px);
  text-align: center;
  color: var(--green);
  text-shadow: 3px 3px 0 var(--wood-d);
  margin: 10px 0 14px;
}
#modal-body p { margin: 0 0 10px; }
/* the speaker's face beside what they say (js/npcfaces.js): drawn looking left, turned to look in at the words */
.talk-face { float: left; width: 128px; height: 128px; margin: 0 14px 6px 0; image-rendering: pixelated; border: 3px solid var(--wood-d); border-radius: 8px; background: var(--paper-d); transform: scaleX(-1); }
#modal-body.has-face::after { content: ''; display: block; clear: both; }
.shop-hi:has(.talk-face) { display: flex; align-items: center; gap: 10px; }
.shop-hi .talk-face { float: none; flex: none; width: 64px; height: 64px; margin: 0; }
@media (max-width: 480px) { #modal-body > .talk-face { width: 96px; height: 96px; margin-right: 10px; } }
#modal-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.tagline { text-align: center; }
.tagline b { font-size: 20px; color: var(--wood); }
.center { text-align: center; }

/* ---- sign-in --------------------------------------------------------------- */
.login label { display: block; margin: 8px 0; font-weight: 600; }
.field {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  font: inherit;
  color: var(--ink);
  background: #fffaf0;
  border: 2px solid var(--wood);
  border-radius: 4px;
}
.field:focus-visible { outline: 3px solid #ffd23f; outline-offset: 1px; }
.login-actions { display: flex; gap: 8px; justify-content: center; }
.login .warn:empty { display: none; }

/* ---- backpack / stall ------------------------------------------------------ */
.bag-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 58px)); justify-content: center; gap: 4px; }
.bag-slot {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  background: #fff6dc;
  border: 2px solid var(--paper-d);
  border-radius: 4px;
}
.bag-slot.hot { border-color: var(--wood); }
.bag-slot .want { position: absolute; top: 1px; right: 3px; font: 700 11px/1 var(--px); color: #1fa79a; pointer-events: none; }   /* paid over the going price this season */
.bag-slot.picked { border-color: #ff5a36; box-shadow: inset 0 0 0 2px #ff5a36; }
.bag-slot.chosen { border-color: #2e8b4a; box-shadow: inset 0 0 0 2px #2e8b4a; position: relative; }   /* picked with Ctrl/⌘ (js/game/trade.js): one of several */
.bag-slot.chosen::after { content: '✓'; position: absolute; top: -4px; left: -4px; width: 16px; height: 16px; border-radius: 50%; background: #2e8b4a; color: #fff; font: 700 11px/16px sans-serif; text-align: center; }
.bag-slot.dim img { opacity: .35; }
.bag-slot img { width: 70%; height: 70%; image-rendering: pixelated; display: block; margin: auto; }
.bag-slot .qty {
  position: absolute;
  right: 3px;
  bottom: 3px;
  font: 8px/1 var(--px);
  color: #fff;
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000;
}
.bag-put { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 4px; min-height: 34px; font-weight: 600; }
.bag-put span { flex: 1 1 100%; }
.bag-total { font-weight: 700; text-align: right; }
.order { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--paper-d); }
.order img { width: 36px; height: 36px; image-rendering: pixelated; flex: none; }
.order span, .order small { display: block; }
.order small { color: var(--muted); }
.order > div { flex: 1; min-width: 0; }
.order > .btn { flex: none; align-self: center; }
.order.req { background: #fff3c8; border-radius: 8px; padding: 8px; }
.req-pic { float: left; width: 36px; height: 36px; margin: 0 10px 6px 0; image-rendering: pixelated; }
ul.farms li { grid-template-columns: 36px 1fr auto auto; }
/* a message row (loading, empty, error) is plain text, not the avatar grid */
ul.shop > li.muted, ul.shop > li.warn { display: block; }
ul.farms .info b { display: block; }
.muted { color: var(--muted); font-size: 14px; }
.warn { color: var(--red); font-weight: 600; }
.news { color: var(--green); font-weight: 700; }

.btn {
  padding: 8px 16px;
  background: var(--wood);
  color: #fff5dd;
  border: 2px solid var(--wood-d);
  border-radius: 4px;
  font-weight: 700;
  box-shadow: 0 3px 0 var(--wood-d);
}
.btn:active { translate: 0 2px; box-shadow: 0 1px 0 var(--wood-d); }
.btn.primary { background: var(--green); }
.btn.danger { background: var(--red); }
.btn.small { padding: 4px 10px; font-size: 14px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.help { margin: 0 0 12px; padding-left: 22px; }
.help li { margin-bottom: 4px; }

table.sold { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
table.sold td { padding: 3px 0; border-bottom: 1px dashed var(--paper-d); }
table.sold td:last-child { text-align: right; font-family: var(--px); font-size: 11px; }
table.sold tfoot td { font-weight: 700; border-bottom: 0; padding-top: 6px; }

.tabs {
  display: flex;
  flex-wrap: wrap;                 /* every tab stays visible; no hidden sideways scroll */
  gap: 4px;
  margin: 8px 0 6px;
  padding-bottom: 4px;
  border-bottom: 3px solid var(--wood);
}
.tab {
  flex: none;
  padding: 6px 11px;
  background: var(--paper-d);
  border: 2px solid var(--wood);
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}
.tab[aria-selected="true"] { background: var(--wood); color: #fff5dd; }
ul.shop.gift li { grid-template-columns: 36px 1fr; }
ul.shop.mill li { grid-template-columns: 36px 1fr auto; }
.mill-btns { display: flex; gap: 6px; }
@media (max-width: 560px) { .mill-btns { grid-column: 1 / -1; justify-content: flex-end; } }
#music {
  position: fixed;
  left: 66px;
  top: calc(var(--clock-b) + 8px);
  width: 220px;
  padding: 4px;
  z-index: 3;
}
#music iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 3px; }
.music-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; padding: 0 2px 4px; }
.music-head button { border: 0; background: none; font-size: 14px; padding: 0 4px; }
/* ---- the character creator: a stage on the left, the choices in tabs on the right ---- */
.cr { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.cr-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 10px; background: linear-gradient(#a8d88a, #86c064); border: 3px solid var(--wood-d); border-radius: 10px; box-shadow: inset 0 -14px 0 rgb(0 0 0 / .08); }
.cr-herobox { display: flex; align-items: center; gap: 6px; }
.cr-hero { display: block; width: 96px; height: 144px; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgb(0 0 0 / .18)); }
.cr-turn { padding: 4px 8px; font-size: 14px; }
.cr-facebox { padding: 4px; background: #fdf6e3; border: 3px solid var(--wood-d); border-radius: 50%; box-shadow: 0 2px 0 rgb(0 0 0 / .15); }
.cr-face { display: block; width: 72px; height: 54px; image-rendering: pixelated; border-radius: 50%; background: #86c064; }
.cr-dice { width: 100%; }
.cr-panel { min-width: 0; }
.cr-tabs { margin-top: 0; }
.cr-page { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.cr-row { display: flex; flex-direction: column; gap: 5px; }
.cr-label { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--wood); text-transform: uppercase; }
.cr-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.swatch { width: 32px; height: 32px; padding: 0; border: 2px solid var(--wood-d); border-radius: 8px; cursor: pointer; }
.swatch.disc { border-radius: 50%; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18); }
.swatch.text { width: auto; height: auto; min-height: 32px; padding: 4px 12px; background: var(--paper-d); font-weight: 700; font-size: 14px; border-radius: 999px; }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 3px #fff5dd, 0 0 0 5px #ff5a36; }
.swatch.disc[aria-checked="true"] { box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18), 0 0 0 3px #fff5dd, 0 0 0 5px #ff5a36; }
.swatch.text[aria-checked="true"] { background: var(--wood); color: #fff5dd; }
@media (max-width: 600px) { .cr { grid-template-columns: 1fr; } .cr-stage { flex-direction: row; flex-wrap: wrap; justify-content: center; } .cr-dice { width: auto; } }
.shop-scroll { overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.shop-money b { font-family: var(--px); font-size: 12px; color: #7a4b00; }
ul.shop { list-style: none; margin: 0 0 6px; padding: 0; }
.shop-h { margin: 12px 0 2px; font-size: 16px; color: var(--wood); border-bottom: 2px solid var(--paper-d); }
ul.shop li {
  display: grid;
  grid-template-columns: 36px 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--paper-d);
}
ul.shop img { width: 36px; height: 36px; image-rendering: pixelated; }
ul.shop .info { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
ul.shop small { color: var(--muted); }
ul.shop .price { font: 11px/1 var(--px); color: #7a4b00; }

@media (max-width: 560px) {
  #clock { left: 56px; width: auto; max-width: calc(100vw - 56px - 150px); min-width: 180px; }
  #me-badge { width: 46px; height: 46px; border-radius: 10px; }
  #me-badge canvas { width: 34px; height: 34px; }
  #profile { top: calc(var(--clock-b) + 8px); left: 58px; right: 60px; width: auto; padding: 8px; font-size: 13px; }
  #profile p { margin: 3px 0; }
  #profile .muted, #profile .pf-hearts, #profile .pf-farm { display: none; }
  #profile .pf-av { width: 36px; height: 36px; font-size: 20px; }
  #profile .btn { padding: 4px 10px; }
  #friends { right: 8px; gap: 6px; max-height: calc(100vh - 10px - var(--mm) - var(--day-h) - var(--ord-h) - var(--bar) - 190px); max-height: calc(100dvh - 10px - var(--mm) - var(--day-h) - var(--ord-h) - var(--bar) - 190px); }
  #rightcol, #orders-col { right: 8px; }
  #orders-col { width: 160px; }
  #clock-time { font-size: 14px; }
  #clock-money { font-size: 13px; }
  #clock-truck, #orders-hud { font-size: 10px; }
  #minimap { right: 8px; top: max(10px, env(safe-area-inset-top)); }
  #minimap canvas { width: 88px; height: 64px; }
  body.has-map { --mm: 80px; }
  .friend { width: 40px; height: 40px; }
  .friend .emoji { font-size: 20px; }
  .hud-btn { width: 38px; height: 38px; font-size: 17px; }
  #music { left: 56px; width: 150px; }
  .tab { padding: 6px 9px; font-size: 14px; }
  #clock-date { font-size: 11px; }
  #hud-name { font-size: 13px; }
  #toast { left: 50%; max-width: calc(100vw - 24px); top: calc(var(--clock-b) + 8px); z-index: 5; }
  ul.shop li { grid-template-columns: 32px 1fr auto auto; }
  ul.shop .price { grid-column: 2; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  #toast, #energy-fill { transition: none; }
}

/* ---- menu / settings --------------------------------------------------------- */
.menu-head { display: flex; gap: 14px; align-items: center; padding: 10px 12px; background: var(--paper-d); border-radius: 4px; }
.menu-head canvas { flex: none; image-rendering: pixelated; }
.menu-head div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-head b { font-size: 18px; overflow-wrap: anywhere; }
.menu-head small { font-size: 13px; }
.menu-tabs { margin-top: 0; }
.menu-tabs .tab { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; }
@media (max-width: 520px) {                                        /* a phone: each tab's icon over its word, clear of the close button */
  .menu-tabs { margin-top: 12px; }
  .menu-tabs .tab { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; line-height: 1.2; padding-top: 4px; padding-bottom: 4px; }
}
/* a tab's page: a fixed height, so switching tabs doesn't make the window jump; long pages scroll */
.menu-page { display: flex; flex-direction: column; gap: 6px; min-height: min(360px, calc(55dvh / var(--ui))); max-height: calc(60dvh / var(--ui)); overflow-y: auto; overscroll-behavior: contain; padding: 4px 2px; }
/* a row: its icon, what it is (a word on it beneath), and a › or a switch at the end */
.menu-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; font: inherit; color: inherit; background: #fff6dc; border: 2px solid var(--paper-d); border-radius: 6px; cursor: pointer; }
.menu-row:hover, .menu-row:focus-visible { border-color: var(--wood); }
.menu-ic { flex: none; width: 28px; text-align: center; font-size: 22px; }
.menu-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.menu-txt b { font-size: 16px; }
.menu-txt small { color: var(--muted); font-size: 13px; }
.menu-go { flex: none; font-size: 24px; font-weight: 700; color: var(--wood); }
.menu-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.menu-toggle i { flex: none; position: relative; width: 48px; height: 26px; border-radius: 13px; background: #c9b489; border: 2px solid var(--wood-d); transition: background .15s; }
.menu-toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff5dd; border: 2px solid var(--wood-d); transition: translate .15s; }
.menu-toggle input:checked + i { background: var(--green); }
.menu-toggle input:checked + i::after { translate: 22px 0; }
.menu-toggle input:focus-visible + i { outline: 3px solid var(--wood); outline-offset: 2px; }
.menu-size { flex-wrap: wrap; cursor: default; }
.menu-seg { display: flex; gap: 4px; margin-left: auto; }
.menu-seg button { padding: 6px 10px; font: inherit; font-weight: 700; font-size: 14px; background: var(--paper-d); color: var(--ink); border: 2px solid var(--wood); border-radius: 6px; cursor: pointer; }
.menu-seg button[aria-checked="true"] { background: var(--wood); color: #fff5dd; }
/* a narrow screen: a setting's choices under its words, not squeezed beside them */
@media (max-width: 520px) { .menu-size .menu-txt { flex: 1 1 calc(100% - 40px); } .menu-size .menu-seg { margin-left: 40px; } }
/* the music's loudness: the words on their line, the slider under them */
.menu-vol { flex-wrap: wrap; row-gap: 4px; cursor: default; }
.menu-vol .menu-txt { flex: 1 1 calc(100% - 40px); }
.menu-vol input { flex: 1; min-width: 0; margin: 0 0 0 40px; accent-color: var(--wood); height: 28px; cursor: pointer; }
.menu-vol output { flex: none; width: 44px; text-align: right; font-weight: 700; color: var(--wood); }
.menu-status { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0 0 4px; padding: 10px 12px; background: var(--paper-d); border-radius: 6px; }
.menu-install { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 10px; background: var(--paper-d); border-radius: 4px; }
.menu-install b:first-child { display: block; }
.menu-install small { display: block; font-size: 13px; color: var(--muted); }
.menu-install > :first-child { flex: 1; }
.visit-head { margin: 4px 0 6px; font-size: 14px; color: var(--muted); }
.visit-head ~ .visit-head { margin-top: 14px; }
.friend.npc { background: #e9f4d6; }
.friend.done { opacity: .55; }
.friends-sep { flex: none; width: 36px; margin: 2px auto; border: 0; border-top: 3px dotted rgb(255 245 221 / .7); }

/* someone needs help / I passed out */
#alert, #downed {
  position: fixed;
  left: 50%;
  translate: -50% 0;
  z-index: 6;
  max-width: min(520px, calc(100vw - 24px));
  padding: 8px 12px;
  font-weight: 600;
}
#alert { top: calc(max(10px, env(safe-area-inset-top)) + 52px); display: flex; align-items: center; gap: 8px; }
#alert span { flex: 1; }
#alert[hidden] { display: none; }
#downed { bottom: calc((var(--bar) + 70px) * var(--ui) + var(--safe-b)); text-align: center; background: #3a2a4a; color: #fff6dc; }
#dismount { position: fixed; left: 50%; translate: -50% 0; bottom: calc((var(--bar) + 70px) * var(--ui) + var(--safe-b)); z-index: 6; padding: 6px 14px; font-weight: 700; }
#dismount[hidden] { display: none; }
/* playing dead (js/game/beasts.js): big and plain to hit while a bear closes in */
#playdead { position: fixed; left: 50%; translate: -50% 0; bottom: calc((var(--bar) + 120px) * var(--ui) + var(--safe-b)); z-index: 6;
  padding: 12px 26px; font-size: 20px; font-weight: 800; background: #7a2e1f; color: #fff4e0; border-color: #3a140c; animation: playdead-pulse 0.9s ease-in-out infinite alternate; }
#playdead small { font-size: 13px; opacity: 0.8; }
#playdead[hidden] { display: none; }
#pillion-off { position: fixed; left: 50%; translate: -50% 0; bottom: calc((var(--bar) + 120px) * var(--ui) + var(--safe-b)); z-index: 6; padding: 10px 22px; font-size: 16px; font-weight: 800; }
#pillion-off[hidden] { display: none; }
@keyframes playdead-pulse { to { scale: 1.06; } }
@media (prefers-reduced-motion: reduce) { #playdead { animation: none; } }
#editbar {
  position: fixed;
  left: 50%;
  translate: -50% 0;
  top: calc(max(10px, env(safe-area-inset-top)) + 8px);
  z-index: 6;
  max-width: min(560px, calc(100vw - 140px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-weight: 600;
}
#editbar[hidden] { display: none; }
#level { font: 10px/1 var(--px); color: #7a4b00; }
.hud-chip { flex: none; padding: 3px 8px; font: 10px/1 var(--px); border-radius: 10px; background: #3a2414; color: #ffe08a; white-space: nowrap; }
#xp { flex: 1; height: 8px; background: #3a2414; border: 2px solid var(--wood-d); border-radius: 2px; overflow: hidden; }   /* the same frame as the energy bar, so the two end flush */
#xp-fill { height: 100%; width: 0; background: #f2b92f; transition: width .2s; }

/* the stall screen: my bag on the left, the stall on the right */
#modal.wide { width: min(820px, calc((100vw - 24px) / var(--ui))); }
.stall-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.stall-bag { min-width: 0; padding: 2px; border-radius: 6px; }
.stall-bag.drop-over { background: #fff6dc; }
.stall-side { min-width: 0; }
.stall-side .stall-zone { margin-top: 0; }
@media (max-width: 560px) { .stall-cols { grid-template-columns: 1fr; } }
.stall-cols .bag-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); justify-content: stretch; }
.bag-slot.empty { pointer-events: none; }
.stall-side .stall-zone { padding: 2px 6px 6px; }

/* the welcome screen */
.title { display: flex; flex-direction: column; gap: 12px; }
.title-tag { margin: -6px 0 2px !important; text-align: center; color: var(--muted); font-size: 15px; }
.title-card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--paper-d);
  border: 2px solid var(--wood);
  border-radius: 6px;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .08);
}
.title-card canvas { flex: none; image-rendering: pixelated; background: #cfe6b0; border: 2px solid var(--wood-d); border-radius: 4px; }
.title-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.title-info b { font-size: 19px; overflow-wrap: anywhere; }
.title-info span { font-size: 15px; }
.title-info small { color: var(--muted); font-size: 12px; }
.title-play { width: 100%; padding: 12px 16px; font-size: 20px; }
/* the title's panel (menus.js): one column, everything the same width — the way in, the other ways under a rule, the
   quiet links at the foot */
.title-panel { gap: 12px; padding: 14px 16px 10px; background: #efe2c4; border: 2px solid var(--paper-d); border-radius: 8px; min-width: 0; }
.title-panel .title-card { background: #f8efd8; border: 1px solid var(--paper-d); box-shadow: none; }
.title-second { width: 100%; padding: 9px 16px; font-size: 16px; background: #fffaf0; color: var(--wood); }
/* sign in / sign up: two tabs over the same fields */
.login-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: var(--paper-d); border-radius: 8px; }
.login-tabs button { padding: 8px 6px; font: inherit; font-size: 15px; font-weight: 700; color: var(--wood); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.login-tabs button[aria-selected="true"] { color: var(--ink); background: #fffaf0; box-shadow: 0 1px 0 rgb(0 0 0 / .18); }
.login-tabs button:focus-visible { outline: 3px solid #ffd23f; outline-offset: 1px; }
.login-note { margin: -4px 0 0 !important; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.45; }
.login-fields label { display: block; margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.login-fields label:last-of-type { margin-bottom: 0; }
.login-fields .warn { margin: 8px 0 0 !important; }
.login-fields .warn:empty { display: none; }
.title-panel .title-play { padding: 11px 16px; font-size: 19px; }
/* the other ways in (js/game/account.js): Google's own button, Discord, the lnwza.com account, all one width */
.login-ways { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.login-or { display: flex; align-items: center; gap: 10px; margin: 0 !important; color: var(--muted); font-size: 13px; }
.login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: rgb(58 36 20 / .2); }
.login-google { display: flex; justify-content: center; min-height: 40px; }
.btn.way { width: 100%; min-height: 40px; padding: 6px 12px; font-size: 15px; box-shadow: 0 2px 0 rgb(0 0 0 / .25); }
.way-discord { background: #5865f2; color: #fff; border-color: #3c45a5; }
.btn.way-lnwza { background: #fffaf0; color: var(--ink); border-color: var(--wood); }
/* the quiet links at the foot, a rule above them */
.title-foot { display: flex; flex-wrap: wrap; justify-content: center; margin-top: auto; padding-top: 8px; border-top: 1px dashed rgb(58 36 20 / .25); }
.title-foot button { padding: 4px 12px; font: inherit; font-size: 14px; font-weight: 700; color: var(--wood); background: none; border: 0; cursor: pointer; }
.title-foot button + button { border-left: 1px solid rgb(58 36 20 / .25); }
.title-foot button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.login-lnwza label, .account label { display: block; margin: 6px 0 0; font-size: 14px; }
.login-lnwza .warn:empty, .account .warn:empty { display: none; }
.account form { margin: 10px 0; }
.account .field { max-width: 260px; }
.acc-ways { list-style: none; margin: 6px 0; padding: 0; }
/* the picture: the current one, the photo and farmer buttons, the faces on offer */
.acc-pic { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.acc-pic .acc-face { width: 64px; height: 64px; font-size: 40px; flex: none; }
.acc-pic-btns small { display: block; margin-bottom: 4px; }
.acc-faces { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.acc-face-pick { width: 40px; height: 40px; padding: 0; font-size: 22px; line-height: 1; }
.acc-face-pick.picked { box-shadow: 0 0 0 3px #ff5a36; }
.phone-ico .contact-face { display: inline-grid; place-items: center; width: 36px; height: 36px; font-size: 22px; vertical-align: middle; }
.acc-ways li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed rgb(0 0 0 / .15); }

.title-info small b { font-size: inherit; }

/* chat */
#chat {
  position: fixed; z-index: 4;
  left: 64px; bottom: calc((var(--bar) + 70px) * var(--ui) + var(--safe-b));
  width: min(360px, calc(100vw - 80px)); height: min(320px, 50vh); height: min(320px, 50dvh);
  display: flex; flex-direction: column; gap: 6px; padding: 8px;
}
#chat[hidden] { display: none; }
.chat-head { display: flex; gap: 6px; align-items: center; }
.chat-head .tab { position: relative; flex: 1; }
.chat-head .tab[aria-selected="true"] { background: var(--wood); color: #fff5dd; }
.chat-head .count { position: absolute; right: -4px; top: -6px; }
.chat-list { flex: 1; overflow-y: auto; margin: 0; padding: 4px 6px; list-style: none; background: #fff6dc; border: 2px solid var(--paper-d); border-radius: 4px; font-size: 14px; user-select: text; -webkit-user-select: text; overscroll-behavior: contain; }
.chat-list li { padding: 4px 0; border-bottom: 1px dashed var(--paper-d); overflow-wrap: anywhere; }
.chat-list li.mine b { color: var(--green); }
.chat-list small { color: var(--muted); font-size: 11px; }
.chat-form { display: flex; gap: 6px; }
.chat-form[hidden], .chat-sub[hidden] { display: none; }
.chat-head .tab { padding-left: 4px; padding-right: 4px; font-size: 13px; }
/* the bar over a room: back, whose room it is, its buttons */
.chat-sub { display: flex; gap: 6px; align-items: center; min-height: 30px; }
.chat-sub b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the list of rooms (and the group's members): a face, a name and the newest message, a dot while unread */
.chat-list.threads li { padding: 2px 0; }
.chat-thread, .chat-pick, .chat-member { display: flex; gap: 8px; align-items: center; width: 100%; padding: 4px; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.chat-member { cursor: default; }
.chat-thread:hover, .chat-thread:focus-visible { background: rgb(74 42 18 / .08); border-radius: 4px; }
.chat-face { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--paper-d); font-size: 18px; }
.chat-face img { width: 100%; height: 100%; object-fit: cover; }
.chat-face img.pixel { image-rendering: pixelated; }
.chat-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-who > small:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-on { color: var(--green); font-size: 11px; }
.chat-thread .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #e0402a; }
.chat-pick input { width: 20px; height: 20px; flex: none; }
.chat-newgroup { display: flex; flex-direction: column; gap: 4px; }
.chat-newgroup .field { margin: 0; }
.chat-list li.chat-older { text-align: center; border-bottom: 0; }
.chat-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 !important; }
.chat-form .field { margin: 0; padding: 6px 8px; }
/* a message over the head of whoever said it */
.tag .say { position: absolute; left: 50%; bottom: calc(100% + 4px); translate: -50% 0; max-width: 180px; width: max-content; padding: 4px 8px; border-radius: 8px; background: #fff6dc; color: var(--ink); border: 2px solid var(--wood-d); font-size: 12px; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.tag .say:empty { display: none; }
.tag.silent { background: none; }
.tag.silent > span { display: none; }
@media (max-width: 560px) {
  #chat { left: 50px; right: 8px; width: auto; top: calc(var(--clock-b) + 8px); bottom: auto; height: 42vh; height: 42dvh; }
}

/* visiting: a small chip at the top saying whose farm this is; ⓘ opens the full card */
#profile.folded { display: none; }             /* folded: the place line in the right column and the 🏠 in the left rail say where I am */
#profile.folded > div { display: flex; align-items: center; gap: 6px; }
#profile.folded > div > :not(.pf-head):not(.pf-home):not(.pf-add) { display: none; }
#profile.folded .pf-head { min-width: 0; }
#profile.folded .pf-head small { display: none; }
#profile.folded .pf-head b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; display: block; }
#profile.folded .pf-av { width: 28px; height: 28px; font-size: 16px; }
#profile.folded .btn { width: auto; margin: 0; padding: 4px 8px; white-space: nowrap; }
#profile .pf-toggle { width: auto; margin: 0 0 0 auto; padding: 2px 8px; flex: none; }
@media (max-width: 560px) {
}

/* the farm sign: drawing on it */
/* the sign editor, laid out like Paint */
.paint { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top top" "box desk" "colors colors" "status status";
  background: #ece8df; border: 2px solid var(--wood-d); border-radius: 6px; overflow: hidden; font-size: 13px; color: #2a1c10; }
.paint button { font: inherit; color: inherit; cursor: pointer; }
.paint button:disabled { opacity: .35; cursor: default; }
.paint-top { grid-area: top; display: flex; gap: 4px; padding: 4px 6px; background: linear-gradient(#fbf9f4, #e6e1d6); border-bottom: 1px solid #c9c1b0; }
.paint-q { min-width: 32px; height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: 4px; background: none; font-size: 16px !important; }
.paint-q:not(:disabled):hover { background: #fff; border-color: #c9c1b0; }
.paint-box { grid-area: box; display: flex; flex-direction: column; gap: 8px; padding: 6px; background: #f4f1ea; border-right: 1px solid #c9c1b0; }
.paint-tools { display: grid; grid-template-columns: repeat(2, 34px); gap: 3px; }
.paint-tool { width: 34px; height: 34px; padding: 0; border: 1px solid #c9c1b0; border-radius: 4px; background: #fff; font-size: 17px !important; line-height: 1; }
.paint-tool:hover { border-color: #8a7a60; }
.paint-tool.on, .paint-size.on { background: #cfe3f7; border-color: #3a78c0; box-shadow: inset 0 0 0 1px #3a78c0; }
.paint-sizes { display: flex; flex-direction: column; gap: 2px; padding: 3px; border: 1px solid #c9c1b0; border-radius: 4px; background: #fff; }
.paint-size { height: 22px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: none; display: grid; place-items: center; }
.paint-size i { display: block; border-radius: 50%; background: #1a1a1a; }
.paint-flow { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; }
.paint-flow input { width: 70px; accent-color: #3a78c0; }
.paint-desk { grid-area: desk; display: grid; place-items: center; padding: 14px; background: #9aa0aa; min-width: 0; }
.paint-desk canvas { display: block; width: 100%; max-width: 640px; aspect-ratio: 2; background: #e8c890; box-shadow: 2px 3px 0 rgba(0,0,0,.35); touch-action: none; cursor: crosshair; }
.paint-colors { grid-area: colors; display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: #f4f1ea; border-top: 1px solid #c9c1b0; }
.paint-well { flex: none; width: 40px; height: 40px; padding: 3px; border: 1px solid #8a7a60; background: #fff; }
.paint-well span { display: block; width: 100%; height: 100%; border: 1px solid #5a5a5a; }
.paint-palette { display: grid; grid-template-columns: repeat(14, 20px); grid-auto-rows: 20px; gap: 3px; }
.paint-palette button { width: 20px; height: 20px; padding: 0; border: 1px solid #6a6a6a; border-radius: 2px; }
.paint-palette button.on { outline: 2px solid #3a78c0; outline-offset: 1px; }
.paint-edit { position: relative; display: flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid #c9c1b0; border-radius: 4px; background: #fff; cursor: pointer; white-space: nowrap; }
.paint-edit input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.paint-status { grid-area: status; display: flex; gap: 16px; padding: 3px 8px; background: #e3ded2; border-top: 1px solid #c9c1b0; font-size: 12px; color: #5a4a36; }
.paint-status span:empty { display: none; }
@media (max-width: 620px) {
  .paint { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "box" "desk" "colors" "status"; }
  .paint-box { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: none; border-bottom: 1px solid #c9c1b0; }
  .paint-tools { display: flex; flex-wrap: wrap; }
  .paint-tool { width: 30px; height: 30px; font-size: 15px !important; }
  .paint-sizes { flex-direction: row; }
  .paint-size { width: 26px; }
  .paint-desk { padding: 8px; }
  .paint-colors { flex-wrap: wrap; }
  .paint-palette { grid-template-columns: repeat(9, 20px); }
}
.sign-view { display: block; width: min(100%, 480px); aspect-ratio: 2; margin: 0 auto; border: 6px solid #8a5a2b; outline: 2px solid #5b361c; border-radius: 3px; }
/* chat: drag by the top bar; see-through while not in use */
.chat-head { cursor: move; touch-action: none; }
#chat { transition: background-color .3s, box-shadow .3s, opacity .3s; }
#chat.idle { background: rgb(246 231 196 / .35); box-shadow: none; border-color: rgb(74 42 18 / .35); }
#chat.idle .chat-list { background: rgb(255 246 220 / .25); border-color: transparent; text-shadow: 0 1px 0 #fff6dc, 0 0 3px #fff6dc; }
#chat.idle .chat-form, #chat.idle .chat-head .tab:not([aria-selected="true"]) { opacity: .45; }
#chat.ping { box-shadow: 0 0 0 3px #f2cf3a; }
/* resting: touches go through to the game (joystick, tiles); the top bar still wakes or moves it */
#chat.idle { pointer-events: none; }
#chat.idle .chat-head { pointer-events: auto; }

/* the fish book */
.dex-sum { margin: 0 0 8px !important; }
.dex .tabs { margin-bottom: 8px; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; max-height: calc(50vh / var(--ui)); max-height: calc(50dvh / var(--ui)); overflow-y: auto; padding: 2px; overscroll-behavior: contain; }
.dex-slot { position: relative; aspect-ratio: 1; padding: 0; background: #fff6dc; border: 2px solid var(--paper-d); border-radius: 4px; }
.dex-slot img { width: 70%; height: 70%; image-rendering: pixelated; display: block; margin: auto; }
.dex-slot span { position: absolute; left: 3px; top: 1px; font: 7px/1 var(--px); color: var(--muted); }
.dex-slot.unknown img { filter: brightness(0) opacity(.28); }
.dex-slot.now { border-color: var(--green); }
.dex-info { min-height: 44px; margin: 8px 0 0 !important; }
.dex-info small { color: var(--muted); }
/* the book shows three rows at a time (about 33 fish), the rest scrolls */
.dex-grid { grid-template-columns: repeat(auto-fill, 52px); grid-auto-rows: 52px; justify-content: center; max-height: calc(3 * 52px + 2 * 4px + 4px); }
.dex-slot { width: 52px; height: 52px; }
.dex .tabs .tab { padding: 4px 8px; font-size: 13px; }

/* the bag: bigger slots, and the bag part scrolls once it has grown */
.bag .bag-grid { grid-template-columns: repeat(6, minmax(0, 68px)); gap: 6px; }
.bag-pack { max-height: calc(4.5 * 74px); overflow-y: auto; padding: 2px; overscroll-behavior: contain; }
.bag-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.bag-tabs .tab { padding: 4px 8px; font-size: 13px; }
.bag-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.bag-foot .muted { margin-right: auto; font-size: 13px; }
.stall-cols .bag-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dex-slot.empty { background: #f4e8cc; border-style: dashed; }

/* ---- the phone: just the handset, no paper dialog around it ---------------------------------- */
#modal[data-kind="phone"] { width: auto; padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
#modal[data-kind="phone"] #modal-title, #modal[data-kind="phone"] #modal-actions { display: none; }
.phone { margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; font-family: var(--th); }
.phone-status { display: flex; justify-content: space-between; font-size: 11px; padding: 2px 8px; }
.phone-app { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.phone-title { font-weight: 700; padding: 6px 10px 4px; }
.phone-note { margin: 0 0 6px; font-size: 12px; color: #5a6470; line-height: 1.4; }   /* a line under an app's title (วินวิน) */
.phone-list { list-style: none; margin: 0; padding: 0 6px 6px; }
.phone-list li { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid rgb(0 0 0 / .12); }
.phone-list li > div { flex: 1; min-width: 0; }
.phone-list b { display: block; font-size: 14px; line-height: 1.2; }
.phone-list small { display: block; font-size: 11px; opacity: .75; line-height: 1.3; }
.phone-list button { flex: none; min-width: 34px; height: 30px; border-radius: 15px; border: 0; font-size: 15px; cursor: pointer; }
.phone-list button:disabled { opacity: .4; cursor: not-allowed; }
.phone-ico { font-size: 20px; width: 26px; text-align: center; }
.phone-ico:has(.phone-house) { width: 52px; }
.phone-house { display: block; width: 52px; height: 43px; image-rendering: pixelated; }
.loan-house { display: block; width: min(288px, 100%); aspect-ratio: 96 / 80; margin: 0 auto 8px; image-rendering: pixelated; background: #cfe6a8; border-radius: 6px; }

/* the old keypad phone: grey plastic, green LCD, number keys */
.phone.basic { width: 240px; padding: 18px 16px 16px; background: linear-gradient(#3a3f47, #23272d); border-radius: 30px 30px 40px 40px; box-shadow: inset 0 2px 0 #5a606a, 0 8px 0 rgb(0 0 0 / .4); }
.phone.basic .phone-ear { width: 50px; height: 5px; margin: 0 auto 10px; background: #15181c; border-radius: 3px; }
.phone.basic .phone-screen { height: 260px; display: flex; flex-direction: column; background: #b8cfa0; color: #1f2e14; border: 4px solid #15181c; border-radius: 6px; box-shadow: inset 0 0 12px rgb(0 0 0 / .25); }
.phone.basic .phone-list li { border-color: rgb(31 46 20 / .25); }
.phone.basic .phone-list button { background: #1f2e14; color: #b8cfa0; }
.phone.basic .phone-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.phone.basic .phone-foot button { height: 30px; border: 0; border-radius: 12px; background: #4a5059; color: #e8ecf0; font: 700 14px/1 var(--px); box-shadow: 0 2px 0 #15181c; cursor: pointer; }
.phone.basic .phone-foot .green { background: #3fa84a; grid-column: 1; }
.phone.basic .phone-foot .red { background: #c0392b; grid-column: 3; }
.phone.basic .phone-foot .key { cursor: default; }

/* the smartphone: black glass, app icons, a home bar */
.phone.smart { width: 280px; padding: 12px 10px 10px; background: #111418; border-radius: 34px; box-shadow: inset 0 0 0 2px #3a3f47, 0 8px 0 rgb(0 0 0 / .4); }
.phone.smart .phone-ear { width: 80px; height: 16px; margin: 0 auto 6px; background: #000; border-radius: 10px; }
.phone.smart .phone-screen { height: 440px; display: flex; flex-direction: column; background: linear-gradient(160deg, #cfe8ff, #f4e7c6 60%, #bde0b0); color: #1a2030; border-radius: 22px; overflow: hidden; }
.phone.smart .phone-list li { background: rgb(255 255 255 / .55); border-radius: 12px; margin-top: 6px; border: 0; }
.phone.smart .phone-list button { background: #3fa84a; color: #fff; }
.phone-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; padding: 22px 12px; }
.phone-apps button { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; }
.phone-apps span { width: 58px; height: 58px; display: grid; place-items: center; font-size: 30px; background: #fff; border-radius: 16px; box-shadow: 0 3px 8px rgb(0 0 0 / .18); }
.phone-apps small { font-size: 12px; font-weight: 600; color: #1a2030; }
.phone.smart .phone-foot { display: flex; justify-content: space-around; align-items: center; padding-top: 8px; }
.phone.smart .phone-foot button { width: 44px; height: 28px; background: none; border: 0; color: #cfd6e0; font-size: 16px; cursor: pointer; }
.phone.smart .phone-foot .phone-homebtn { font-size: 22px; }
.jome-bar { margin: 8px; padding: 6px 10px; background: #fff; border-radius: 16px; font-size: 12px; color: #3a4a5a; box-shadow: 0 1px 3px rgb(0 0 0 / .15); }
.jome-page { text-align: center; padding: 30px 12px; }
.jome-logo { font: 700 38px/1 var(--th); margin-bottom: 12px; }
.phone-soon { margin-top: 20px; padding: 10px; background: rgb(255 255 255 / .6); border-radius: 12px; font-weight: 700; }

/* the bag, like the fish book; it floats above the game so the toolbar below stays reachable */
#modal[data-kind="bag"] { width: min(640px, calc((100vw - 24px) / var(--ui))); }
/* a friend's sign: just the picture, as big as the screen allows, with a close button under it */
#modal[data-kind="sign"] { width: auto; max-width: none; padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
#modal[data-kind="sign"] #modal-title { display: none; }
#modal[data-kind="sign"] .sign-view { width: min(calc(92vw / var(--ui)), 960px); max-height: calc(70vh / var(--ui)); border-width: 10px; image-rendering: pixelated; box-shadow: 0 12px 40px rgba(0, 0, 0, .6); }
#modal[data-kind="sign"] #modal-actions { justify-content: center; margin-top: 14px; }
dialog#modal[open]:not(:modal) {
  position: fixed; left: 50%; top: max(10px, env(safe-area-inset-top)); translate: -50% 0; margin: 0; z-index: 8;
  max-height: calc((100vh - var(--bar) - 40px - var(--safe-b)) / var(--ui)); max-height: calc((100dvh - var(--bar) - 40px - var(--safe-b)) / var(--ui));
}
.bag .bag-pack { grid-template-columns: repeat(auto-fill, 52px); grid-auto-rows: 52px; justify-content: center; gap: 4px; max-height: calc(5 * 52px + 4 * 4px + 4px); }
.bag .bag-pack .bag-slot { width: 52px; height: 52px; }
.bag-slot.empty { background: #f4e8cc; border-style: dashed; }
.bag-slot.empty.locked { opacity: .35; }   /* the stall's slots the next tiers open */
.bag-info { min-height: 40px; margin: 8px 0 0 !important; font-size: 14px; }

/* windows the player can drag by the title (the bag, the stall) or the top of the phone */
#modal.movable:modal { translate: var(--mx, 0px) var(--my, 0px); }
dialog#modal[open].movable:not(:modal) { translate: calc(-50% + var(--mx, 0px)) var(--my, 0px); }
#modal.movable #modal-title, #modal.movable [data-grip] { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
#modal.movable #modal-title::after { content: ' ⠿'; font-size: .7em; opacity: .35; }
.stall-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
/* the chest window: the two sides mirror each other; the close button sits up by the title */
.chest-zone { padding-left: 14px; border-left: 2px dashed var(--paper-d); }
.chest-zone.drop-over { background: #fff6dc; }
.chest-zone .shop-h { margin-top: 12px; }
.chest-zone .bag-put { justify-content: flex-start; }
#modal[data-kind="chest"], #modal[data-kind="shop"], #modal[data-kind="bag"], #modal[data-kind="menu"] { position: relative; }
#modal[data-kind="chest"] #modal-title, #modal[data-kind="shop"] #modal-title, #modal[data-kind="bag"] #modal-title, #modal[data-kind="menu"] #modal-title { padding-right: 90px; }
#modal[data-kind="menu"] { width: min(600px, calc((100vw - 24px) / var(--ui))); }
.stall-head .shop-h { margin: 0; }

/* my profile (tap my face in the status card) */
.my-profile .pf-head { align-items: flex-start; }
.my-face { width: 48px; height: 72px; image-rendering: pixelated; flex: none; background: #f4e8cc; border: 3px solid var(--wood-d); border-radius: 10px; padding: 2px; }
.my-farm { margin: 4px 0 0 !important; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.my-farm .btn { padding: 2px 6px; }
.my-buffs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.my-buffs li { padding: 4px 8px; border-radius: 6px; background: #fff6dc; border: 1px solid var(--paper-d); font-size: 14px; }
.my-buffs li.bad { background: #f8d8d0; border-color: #d9a097; }
.my-visitors { max-height: 260px; overflow: auto; }

/* ---- my profile: portrait, name and farm, level and energy, money, visitors and stats on the side,
   what is on me, and the three best fish in tanks ------------------------------------------------ */
#modal[data-kind="profile"] { width: min(900px, calc((100vw - 24px) / var(--ui))); }
#modal[data-kind="profile"] #modal-title {
  width: max-content; margin: -4px auto 12px; padding: 6px 28px; font: 22px/1.2 var(--px); letter-spacing: 2px;
  color: #fff6dc; background: linear-gradient(#8a5a2b, #6b4220); border: 3px solid var(--wood-d); border-radius: 8px;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .2), 0 3px 0 rgb(0 0 0 / .3); text-shadow: 2px 2px 0 #3a2414;
}
.prof { display: grid; grid-template-columns: 150px minmax(0, 1fr) 250px; gap: 10px; align-items: start; }
.prof h4 { margin: 0; padding: 4px 8px; font: 12px/1.2 var(--px); color: #fff6dc; background: #7a4b22; border-radius: 5px 5px 0 0; text-align: center; letter-spacing: 1px; }
.prof h4 small { display: block; font: 600 11px/1.3 var(--th); letter-spacing: 0; opacity: .9; }
.prof-box { border: 2px solid var(--wood-d); border-radius: 7px; background: #fff6dc; overflow: hidden; }
.prof-box > p { margin: 0; padding: 8px 10px; font-weight: 700; font-size: 16px; }
.prof-portrait { grid-row: span 1; padding: 6px; border: 3px solid var(--wood-d); border-radius: 10px; background: radial-gradient(#fff4c8, #e8c890); box-shadow: inset 0 0 0 3px #f4d9b0; }
.prof-portrait canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.prof-main { display: grid; gap: 8px; }
.prof-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 2px solid var(--wood-d); border-radius: 7px; background: #fff6dc; }
.prof-names { justify-content: space-between; flex-wrap: wrap; font-size: 14px; }
.prof-names .btn { padding: 1px 5px; }
.prof-tag { flex: none; width: 72px; font: 12px/1.1 var(--px); color: #7a4b22; text-align: center; }
.prof-tag small { display: block; font: 600 11px/1.3 var(--th); letter-spacing: 0; }
.prof .shield { flex: none; display: grid; place-items: center; width: 28px; height: 30px; font: 11px/1 var(--px); color: #fff6dc;
  background: #5a6470; border: 2px solid #2a3038; clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.prof .bolt { flex: none; font-size: 18px; }
.prof .meter { flex: 1; height: 14px; border: 2px solid #3a2414; border-radius: 4px; background: #3a2414; overflow: hidden; }
.prof .meter i { display: block; height: 100%; background-image: repeating-linear-gradient(-45deg, rgb(255 255 255 / .2) 0 5px, transparent 5px 10px); }
.prof .meter.lv i { background-color: #e8762a; }
.prof .meter.en i { background-color: #3f9ae0; }
.prof-num { flex: none; min-width: 58px; text-align: right; font-weight: 700; color: var(--wood); }
.prof-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prof-side { grid-column: 3; grid-row: 1 / span 2; display: grid; gap: 8px; }
.prof-visitors { list-style: none; margin: 0; padding: 4px; max-height: 190px; overflow: auto; }
.prof-visitor { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 5px; color: inherit; font: inherit; }
.prof-visitor:hover { background: #f4e2b8; }
.prof-visitor small { display: block; color: var(--muted); font-size: 12px; }
.prof dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin: 0; padding: 8px 10px; font-size: 14px; }
.prof dt { font-weight: 600; }
.prof dd { margin: 0; font-weight: 700; text-align: right; }
.prof-buffs { grid-column: 1 / span 2; border: 2px solid var(--wood-d); border-radius: 7px; background: #fff6dc; overflow: hidden; }
.prof-buffs h4 { width: max-content; border-radius: 0 0 6px 0; }
.prof-buffs > div { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; }
.prof-buff { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; max-width: 260px; }
.prof-buff i { font-style: normal; display: grid; place-items: center; width: 32px; height: 32px; flex: none; font-size: 18px; border: 2px solid var(--wood-d); border-radius: 7px; background: #d8ecc0; }
.prof-buff.bad i { background: #f8d8d0; }
.prof-catches { grid-column: 1 / -1; border: 2px solid var(--wood-d); border-radius: 8px; background: #6b4220; overflow: hidden; }
.prof-catches h4 { background: none; font-size: 14px; }
.tanks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 10px 12px; }
.tank { border: 3px solid #3a2414; border-radius: 6px; background: #4a2e16; overflow: hidden; box-shadow: 0 4px 0 #2a1a0c; }
.tank-name { padding: 4px 6px; text-align: center; font-weight: 700; color: #fff6dc; background: #3a2414; font-size: 14px; }
.tank-water { display: flex; align-items: center; gap: 8px; min-height: 86px; padding: 8px; background: linear-gradient(#9ad0e8, #4f86c0); color: #0e2438; }
.tank-water img { width: 64px; height: 64px; image-rendering: pixelated; flex: none; filter: drop-shadow(0 2px 0 rgb(0 0 0 / .25)); }
.tank-water p { margin: 0; font-size: 12px; line-height: 1.45; background: rgb(255 255 255 / .55); padding: 4px 6px; border-radius: 5px; }
.tank.empty .tank-water { justify-content: center; opacity: .75; }
.tank .legend { color: #b8860b; } .tank .rare { color: #1f5fa0; } .tank .uncommon { color: #2f7d3a; } .tank .common { color: #555; }
@media (max-width: 760px) {
  .prof { grid-template-columns: 100px minmax(0, 1fr); }
  .prof-side { grid-column: 1 / -1; grid-row: auto; grid-template-columns: 1fr 1fr; }
  .prof-buffs { grid-column: 1 / -1; }
  .tank-water { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .prof { grid-template-columns: 1fr; }
  .prof-portrait { width: 110px; justify-self: center; }
  .prof-side { grid-template-columns: 1fr; }
  .prof-pair { grid-template-columns: 1fr; }
  .tanks { grid-template-columns: 1fr; }
  .tank-water { flex-direction: row; text-align: left; }
}

/* the race scene: full screen over the game, the steering pad at the bottom */
#race { position: fixed; inset: 0; z-index: 30; background: #2a3a24; touch-action: none; user-select: none; -webkit-user-select: none; }
#race canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.race-pad { position: absolute; left: 0; right: 0; bottom: calc(14px + var(--safe-b)); display: flex; justify-content: space-between; gap: 10px; padding: 0 14px; pointer-events: none; }
.race-pad button { pointer-events: auto; min-width: 76px; height: 64px; font: 700 22px/1 var(--th); color: #fff6dc; background: rgb(58 36 20 / .75); border: 3px solid #fff6dc; border-radius: 14px; }
.race-pad button[data-k="jump"] { font-size: 16px; flex: 0 1 130px; }
.race-pad button:active { background: rgb(92 220 90 / .8); }
.friend .lv.player { background: #3a2414; color: #ffe08a; border: 1px solid #ffe08a; }   /* a friend's farmer level */
.prof-actions { display: grid; gap: 6px; padding: 8px; }
.prof-actions .btn { width: 100%; }
.prof-row .pf-hearts { flex: 1; margin: 0; }
.phone-list li.phone-btnrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 0; }
.phone-list li.phone-btnrow button { min-width: 0; padding: 0 6px; font-size: 12px; font-weight: 700; background: #3fa84a; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-list li.phone-btnrow button:last-child { grid-column: 1 / -1; }
/* อั๋นยานยนต์: dressing the bike */
ul.shop li.moto-hero { grid-template-columns: 120px 1fr; }
ul.shop li.moto-hero canvas { width: 120px; height: 72px; image-rendering: pixelated; background: radial-gradient(#fff6dc, #e8d4a8); border: 2px solid var(--wood-d); border-radius: 8px; }
ul.shop li.moto-part { display: block; padding: 8px 4px 2px; border-bottom: 0; color: var(--wood); }
ul.shop li.moto-pick { display: flex; gap: 6px; }
ul.shop li.moto-pick button { flex: 1; }
.moto-sw { width: 28px; height: 28px; border: 2px solid var(--wood-d); border-radius: 6px; flex: none; }

/* ---- the kitchen: pick a dish, see what it takes, cook it ------------------------------------- */
.cook { background: var(--paper); border: 3px solid var(--wood-d); border-radius: 6px; padding: 12px; color: var(--ink); }
.cook-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; align-items: start; }
.cook-frame { padding: 6px; background: linear-gradient(#8a5a2b, #6b4220); border: 3px solid var(--wood-d); border-radius: 6px; box-shadow: inset 0 0 0 2px #a8733a, 0 2px 0 rgba(0,0,0,.25); }
.cook-scene { display: block; width: 100%; aspect-ratio: 5 / 3; image-rendering: pixelated; border-radius: 2px; }
.cook.cooking .cook-scene { filter: brightness(1.2) saturate(1.1); }
.cook-card { display: flex; flex-direction: column; gap: 8px; }
.cook-name { display: flex; align-items: center; gap: 8px; }
.cook-name img { width: 34px; height: 34px; image-rendering: pixelated; }
.cook-name b { font-size: 17px; }
.cook-gives { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; }
.ctag { padding: 2px 8px; background: var(--paper-d); border-radius: 10px; }
.ctag.cbuff { background: #dcf0cc; }
.cook-needs { display: flex; flex-direction: column; gap: 4px; }
.cook-need { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: #fff6dc; border: 2px solid var(--paper-d); border-radius: 5px; font-size: 13px; }
.cook-need.ok { border-color: var(--green); }
.cook-need.short { border-color: var(--red); background: #fdeeea; }
.cook-need img { width: 24px; height: 24px; image-rendering: pixelated; }
.cook-need .nn { flex: 1; min-width: 0; }
.cook-need .nq { font: 9px/1 var(--px); }
.cook-need.short .nq { color: var(--red); }
.cook-pick { max-width: 45%; font: inherit; font-size: 12px; padding: 2px 4px; border: 2px solid var(--paper-d); border-radius: 4px; background: var(--paper); color: var(--ink); }
.cook-go { align-self: flex-start; }
.cook-miss { margin: 0; font-size: 12px; color: var(--muted); }
.bag-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; margin: 6px 0 2px; }
.cook-label { margin: 12px 0 4px; font-size: 13px; color: var(--muted); }
.cook-menu { margin-top: 6px; max-height: 260px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 5px; padding: 6px; background: var(--paper-d); border: 2px solid var(--wood-d); border-radius: 5px; }
.cook-item { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border: 2px solid transparent; border-radius: 5px; background: #fff6dc; text-align: left; cursor: pointer; font: inherit; color: var(--ink); opacity: .6; }
.cook-item.can { opacity: 1; }
.cook-item.on { border-color: var(--wood); box-shadow: inset 0 0 0 2px #fff; }
.cook-item.can.on { border-color: var(--green); }
.cook-item:hover { border-color: var(--wood); }
.cook-item img { width: 30px; height: 30px; image-rendering: pixelated; }
.cook-item .ci { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cook-item .ci small { font-size: 11px; color: var(--muted); }
.cook-item .cv { font-size: 12px; white-space: nowrap; color: var(--muted); }
@media (max-width: 680px) {
  .cook { padding: 8px; }
  .cook-top { grid-template-columns: minmax(0, 1fr); }
  .cook-menu { max-height: 220px; grid-template-columns: minmax(0, 1fr); }
}

/* ---- the season's prices (the market board, the เกษตรกร app) and ต้อยผักสด ------------------------ */
.season-table .shop li.dim { opacity: .55; }
.season-table .price { color: var(--green); font-weight: 700; white-space: nowrap; }
.phone-app .season-table .shop-hi { font-size: 12px; }
.phone-app .season-table .shop { max-height: 300px; }
.toy .bag-put b { color: var(--green); }
.phone-app .ctag { font-size: 10px; padding: 0 5px; vertical-align: middle; }
.toy .stall-side .shop { max-height: calc(4.5 * 74px); overflow-y: auto; overscroll-behavior: contain; }
.qty-picks { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 10px; }
/* the idle screen: this tab stopped saving; a tap reloads it */
#idle { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; background: rgb(10 14 8 / .72); color: #fdf6e3; font: inherit; border: 0; cursor: pointer; text-align: center; }
#idle b { font-size: 28px; }
#idle span { font-size: 15px; max-width: 420px; line-height: 1.5; }
/* the wardrobe: my farmer and the eight slots on the left, what is in the bag on the right */
.wardrobe { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: start; }
.wd-left canvas { display: block; margin: 0 auto 8px; image-rendering: pixelated; }
.wd-left { min-width: 0; }
.wd-slots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.wd-slot { display: flex; min-width: 0; align-items: center; gap: 6px; padding: 4px 6px; font: inherit; font-size: 12px; text-align: left; color: var(--ink); background: #fff6dc; border: 2px dashed var(--paper-d); border-radius: 6px; cursor: pointer; }
.wd-slot.on { border-style: solid; border-color: var(--wood); background: #fdf6e3; }
.wd-slot img { width: 24px; height: 24px; image-rendering: pixelated; flex: none; }
.wd-slot i { width: 24px; height: 24px; flex: none; border-radius: 4px; background: rgb(0 0 0 / .06); }
.wd-slot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-stats { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--wood); }
.wd-right { min-width: 0; }
@media (max-width: 560px) { .wardrobe { grid-template-columns: 1fr; } }
/* on a phone a shop's list scrolls inside the dialog, so the tabs and the buttons stay in reach */
@media (max-width: 560px) { .shop-scroll { max-height: calc(52vh / var(--ui)); max-height: calc(52dvh / var(--ui)); } }
/* the bag: my farmer and what is worn down the left, the slots to the right */
.bag-cols { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; }
.bag-me canvas { display: block; margin: 4px auto 8px; image-rendering: pixelated; }
.bag-me .wd-slots { grid-template-columns: 1fr; }
.bag-me .wd-slot { font-size: 11px; padding: 3px 5px; }
.bag-me .wd-slot img, .bag-me .wd-slot i { width: 20px; height: 20px; }
.bag-main { min-width: 0; }
@media (max-width: 560px) { .bag-cols { grid-template-columns: 1fr; } .bag-me .wd-slots { grid-template-columns: 1fr 1fr; } }
/* the hands' faces under the status card */
#hands { display: flex; gap: 4px; }
#hands[hidden] { display: none; }
.hand-chip { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 40px; padding: 3px 2px; font: inherit; font-size: 9px; line-height: 1.1; color: var(--ink); cursor: pointer; }
.hand-chip img { width: 24px; height: 24px; border-radius: 3px; }
.hand-chip span { max-width: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { #below { left: 58px; } }

/* the little menu beside a friend or a market NPC (ui.popMenu) */
#popmenu { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 4px; min-width: 150px; padding: 8px; background: #f7ecd2; border: 3px solid #8a5a2b; outline: 2px solid #5b361c; border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
#popmenu b { font-size: 14px; color: #3a2414; padding: 0 4px 4px; border-bottom: 2px dashed #c9a56a; margin-bottom: 2px; }
#popmenu .btn { text-align: left; justify-content: flex-start; width: 100%; }

.man-hints { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }

.creator-facebox { margin-top: 10px; padding-top: 8px; border-top: 2px dashed var(--paper-d); }
.creator-facebox .shop-h { display: block; margin: 0 0 6px; }
.creator-face { display: block; width: 128px; height: 80px; margin: 0 auto 6px; image-rendering: pixelated; background: #86c064; border: 3px solid var(--wood-d); border-radius: 6px; }

/* the save spinner (ui.saving) and the patron's incoming call (main.js ringCall) */
#saving { position: fixed; right: 12px; bottom: calc((var(--bar) + 70px) * var(--ui) + var(--safe-b)); z-index: 55; display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(43, 29, 20, .85); color: #fff5dd; border-radius: 14px; font-size: 12px; pointer-events: none; }
#saving i { width: 12px; height: 12px; border: 2px solid #fff5dd; border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
#call { position: fixed; left: 50%; top: 72px; translate: -50% 0; z-index: 70; display: flex; gap: 8px; align-items: center; padding: 8px 12px; animation: ring .4s ease-in-out infinite alternate; }
@keyframes ring { from { rotate: -1.5deg; } to { rotate: 1.5deg; } }

/* ---- behind the title: the fade between scenes; the loading screen after start (js/game/title.js) ---- */
#tour-fade { position: fixed; inset: 0; background: #0d0905; opacity: 0; pointer-events: none; transition: opacity .8s ease; z-index: 5; }
#tour-fade.on { opacity: 1; }
#splash {
  position: fixed; inset: 0; z-index: 900; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 35%, #f4c24a 0%, #e8862a 40%, #7a3a18 100%);
  transition: opacity .45s ease;
}
#splash::after {                                              /* a line of rice fields along the bottom */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22vh;
  background: repeating-linear-gradient(90deg, #3f8a30 0 18px, #4f9c3a 18px 36px); box-shadow: 0 -6px 0 #2f6a24;
}
#splash.off { opacity: 0; pointer-events: none; }
.splash-box { position: relative; z-index: 1; text-align: center; color: #fff6dc; width: min(420px, 86vw); }
.splash-logo { margin: 0; font: clamp(36px, 9vw, 60px)/1.2 var(--px); letter-spacing: 4px; color: #fff6dc; text-shadow: 0 4px 0 #7a3a18, 0 8px 0 rgb(0 0 0 / .25); }
.splash-sub { margin: 2px 0 14px; font-size: 18px; text-shadow: 0 2px 0 #7a3a18; }
#splash canvas { width: 64px; height: 96px; image-rendering: pixelated; }
.splash-bar { height: 16px; margin: 10px auto 8px; border: 3px solid #5b361c; border-radius: 10px; background: #fff6dc; overflow: hidden; }
.splash-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4f9c3a, #8ae07a); transition: width .5s ease; }
.splash-step { margin: 0; font-weight: 700; text-shadow: 0 2px 0 #7a3a18; }
.splash-tip { margin: 10px 0 0; font-size: 14px; opacity: .92; text-shadow: 0 1px 0 #7a3a18; }

/* ---- the farm sign's gallery and painting full screen (js/game/sign.js) ---- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.gallery-pic { position: relative; aspect-ratio: 2; padding: 0; border: 3px solid var(--paper-d); border-radius: 6px; background: #e8c890; overflow: hidden; cursor: pointer; }
.gallery-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-pic.on { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.gallery-pic.empty { border-style: dashed; background: none; cursor: default; }
.gallery-pic span { position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 8px; background: var(--green); color: #fff; font-size: 12px; }
.gallery-acts { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
#modal.paint-full { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
#modal.paint-full .paint-desk canvas { max-width: none; width: min(100%, calc((100dvh - 330px) * 2)); }
#modal.paint-full #modal-actions { position: sticky; bottom: -16px; margin: 8px -20px -16px; padding: 8px 20px; background: var(--paper); border-top: 2px solid var(--paper-d); }

/* The on-screen controls at the chosen size: each group scales toward the edge it hangs from, its own offsets with it.
   What hangs off them without being scaled itself (the chat, notices over the tool bar) follows through --ui. */
#hud-left, #clock, #below, #rightcol, #orders-col, #minimap, #friends, #corner-btns, #bottom, #touch { zoom: var(--ui); }
/* the windows and the little tap menus too, buttons, text and all; their sizes in vw/vh are divided by --ui so a window
   still fits the screen (a zoomed box multiplies those too); the full-screen painter keeps the screen's own size */
#modal, #popmenu { zoom: var(--ui); }
#modal.paint-full { zoom: 1; }

/* a window's close (or back) button up by its title (ui.modal: an action with top: true); its other buttons stay below */
#modal.has-top { position: relative; }
#modal-top { position: absolute; top: 14px; right: 16px; display: flex; gap: 6px; }
#modal-top:empty { display: none; }

/* A phone held upright: the tool bar in two rows of six, each slot near twice as big to tap; what sits over the
   tool bar (the stick, the buttons, the chat) sits over both rows (--bar). The camera sees wider too (js/engine/view.js). */
@media (orientation: portrait) and (max-width: 600px) {
  :root { --slot: min(52px, calc((100vw - 40px) / 6)); --bar: calc(var(--slot) * 2 + 2px); }
  #hotbar { grid-template-columns: repeat(6, var(--slot)); }
}
/* the temple fair (js/game/fair.js): a ride going round, and the shooting gallery, drawn big and crisp */
.fair-ride-wrap, .fair-gallery-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fair-ride { width: 288px; height: 330px; max-width: 100%; image-rendering: pixelated; }
.fair-gallery { width: min(480px, 100%); aspect-ratio: 160 / 96; image-rendering: pixelated; touch-action: none; cursor: crosshair; border-radius: 6px; }

/* ---- the story events (js/game/story.js, vn.js): the goal in the corner, the visual-novel talk, the little games ---- */
#story-hud, #guide-hud { display: block; width: 100%; padding: 0; margin: 0 0 8px; border: 0; background: none; font: inherit; font-size: 11px; font-weight: 700; line-height: 1.4; text-align: right; cursor: pointer; }
#story-hud[hidden], #guide-hud[hidden] { display: none; }
#story-hud b, #guide-hud b { display: block; font-size: 12px; margin-bottom: 1px; color: #ffe8a0; }
#modal[data-kind="vn"] { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden;
  background: none; border: 0; box-shadow: none; border-radius: 0; zoom: 1; user-select: none; -webkit-user-select: none; }
#modal[data-kind="vn"]::backdrop { background: rgb(10 14 8 / .25); }
#modal[data-kind="vn"] #modal-title, #modal[data-kind="vn"] #modal-actions, #modal[data-kind="vn"] #modal-top { display: none; }
#modal[data-kind="vn"] #modal-body { height: 100%; }
.vn { position: relative; width: 100%; height: 100%; cursor: pointer; --face: min(46vh, 330px); }
.vn-bg { position: absolute; inset: 0; background: center / cover no-repeat; }
.vn-bg canvas { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.vn:not(.has-bg) .vn-bg { background: linear-gradient(to top, rgb(0 0 0 / .45), transparent 55%); }
.vn-face { position: absolute; bottom: 150px; height: var(--face); width: calc(var(--face) * 72 / 84); image-rendering: pixelated; transition: filter .2s, transform .2s; filter: drop-shadow(0 4px 0 rgb(0 0 0 / .25)); }
.vn-face.left { left: max(12px, 6vw); }
.vn-face.right { right: max(12px, 6vw); }
.vn-face.dim { filter: brightness(.72) saturate(.75); }
/* a drawn face (js/faces.js): a cut-out bust, taller than the pixel one, standing on the box */
.vn-face.photo { width: auto; height: calc(var(--face) * 1.3); bottom: 118px; image-rendering: auto; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .4)); }
.vn-face.photo.dim { filter: brightness(.62) saturate(.7) drop-shadow(0 6px 8px rgb(0 0 0 / .4)); }
.vn-face[hidden] { display: none; }
.vn-box { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); translate: -50% 0; width: min(900px, calc(100vw - 24px)); min-height: 124px; box-sizing: border-box;
  padding: 22px 26px 18px; background: rgb(252 246 228 / .97); color: #3a2a1a; border: 4px solid #7a4a2a; border-radius: 10px; box-shadow: 0 4px 0 #4a2a1a; outline: none; }
.vn-text { margin: 0; font-size: 21px; line-height: 1.55; min-height: 2.9em; white-space: pre-wrap; }
.vn-text.narrator { font-style: italic; color: #5a4a3a; }
.vn-more { position: absolute; right: 16px; bottom: 8px; font-size: 14px; color: #a0784a; animation: vn-bob 1s infinite; }
.vn-more[hidden] { display: none; }
@keyframes vn-bob { 50% { translate: 0 3px; } }
.vn-ask { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vn-ask[hidden] { display: none; }
.vn-name { position: absolute; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 112px); left: max(24px, calc(50vw - 430px)); background: #c0503a; color: #fff; font-size: 19px; font-weight: 700;
  padding: 3px 20px; border-radius: 8px; border: 3px solid #7a2a1a; }
.vn-name.right { left: auto; right: max(24px, calc(50vw - 430px)); }
.vn-name[hidden] { display: none; }
.vn-chip { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; background: rgb(252 246 228 / .92); border: 2px solid #7a4a2a; border-radius: 6px; padding: 2px 12px; font-size: 15px; color: #5a3a1a; }
.vn-chip[hidden] { display: none; }
/* the prologue's (js/game/prologue.js): a phone's screen over the picture, a letter typed onto paper, a way to skip it all */
.vn-skip { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 3; padding: 6px 14px; font: inherit; font-size: 15px; font-weight: 700;
  color: #fff8e6; background: rgb(0 0 0 / .45); border: 1px solid rgb(255 255 255 / .35); border-radius: 18px; cursor: pointer; }
.vn-skip:hover { background: rgb(0 0 0 / .65); }
.vn-skip[hidden] { display: none; }
.vn-phone { position: absolute; right: max(16px, 8vw); top: 14%; width: 190px; padding: 26px 16px 22px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: linear-gradient(#1d2430, #0e1218); border: 6px solid #2a2a30; border-radius: 26px; box-shadow: 0 10px 30px rgb(0 0 0 / .55); color: #e8eef6; text-align: center; animation: vn-in .3s; }
.vn-phone[hidden] { display: none; }
.vn-phone-ico { font-size: 40px; line-height: 1; }
.vn-phone b { font-size: 20px; line-height: 1.3; }
.vn-phone small { font-size: 14px; color: #9aa8bc; }
.vn-phone.ring .vn-phone-ico { animation: vn-ring .5s infinite; }
.vn-phone.missed b { color: #ff7a6a; }
@keyframes vn-ring { 0%, 100% { rotate: -12deg; } 50% { rotate: 12deg; } }
.vn-letter { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(620px, calc(100vw - 32px)); max-height: calc(100% - 90px); overflow: auto; box-sizing: border-box;
  padding: 26px 30px 22px; color: #26304a; font: 21px/36px "Itim", var(--th); border-radius: 4px; box-shadow: 0 12px 40px rgb(0 0 0 / .5); rotate: -1deg;
  background: #fbf6e8 repeating-linear-gradient(transparent 0 35px, #c9d4e6 35px 36px); background-attachment: local; }
.vn-letter[hidden] { display: none; }
.vn-letter p { margin: 0 0 12px !important; white-space: pre-wrap; }
.vn.reading .vn-box, .vn.reading .vn-name, .vn.reading .vn-face { display: none; }
.vn.reading .vn-bg { filter: brightness(.55) blur(2px); }
/* a game's status window (the prologue's: what the goddess gave), and the white of a crash */
.vn-status { position: absolute; left: 50%; top: 12%; translate: -50% 0; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; min-width: min(420px, calc(100vw - 32px));
  padding: 18px 24px; box-sizing: border-box; color: #e8f4ff; font-size: 19px; background: linear-gradient(rgb(20 40 90 / .92), rgb(10 20 50 / .92));
  border: 2px solid #8fc8ff; border-radius: 8px; box-shadow: 0 0 0 2px rgb(10 20 50 / .8), 0 0 28px rgb(120 190 255 / .55); animation: vn-in .3s; }
.vn-status[hidden] { display: none; }
.vn-status b { grid-column: 1 / -1; text-align: center; letter-spacing: .3em; color: #9fe0ff; border-bottom: 1px solid rgb(143 200 255 / .45); padding-bottom: 6px; }
.vn-status span { color: #9fc4e8; }
.vn-status i { font-style: normal; font-weight: 700; }
.vn-flash { position: absolute; inset: 0; z-index: 4; background: #fff; pointer-events: none; animation: vn-flash .9s ease-out forwards; }
.vn-flash[hidden] { display: none; }
@keyframes vn-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.vn-card { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #3a5a3a; animation: vn-in .5s; padding: 16px; box-sizing: border-box; }
.vn-page { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; width: min(640px, 100%); height: min(560px, 100%); box-sizing: border-box;
  background: #f6efdc; color: #2a3a2a; border-radius: 4px; box-shadow: 0 10px 30px rgb(0 0 0 / .45), inset 0 0 0 10px #f6efdc, inset 0 0 0 12px #c8b890, inset 0 0 0 15px #f6efdc, inset 0 0 0 16px #c8b890; padding: 24px; }
.vn-card img { image-rendering: pixelated; max-width: 70%; max-height: 32%; object-fit: contain; }
.vn-card img[hidden] { display: none; }
.vn-card[hidden] { display: none; }
.vn-card small { font-size: 26px; color: #6a5a3a; }
.vn-card b { font-size: clamp(40px, 9vw, 72px); color: #2f5a3a; letter-spacing: .08em; }
.vn-card i { font-style: normal; font-size: clamp(20px, 4vw, 30px); color: #3a3a3a; word-spacing: .35em; }
.vn-card .vn-tap { margin-top: 24px; font-size: 14px; color: #9a8a6a; }
@keyframes vn-in { from { opacity: 0; } }
@media (max-width: 640px), (max-height: 520px) {
  .vn { --face: min(34vh, 240px); }
  .vn-face { bottom: 138px; }
  .vn-text { font-size: 17px; }
  .vn-box { min-height: 110px; padding: 18px 16px 14px; }
  .vn-name { font-size: 16px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 98px); }
}
.mini-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mini-cv { width: min(480px, 100%); aspect-ratio: 160 / 96; image-rendering: pixelated; touch-action: none; cursor: pointer; border-radius: 6px; border: 3px solid #7a4a2a; }

/* ---- the title as a launcher (js/news.js panel): the news column beside the way in ------------------------------ */
#modal[data-kind="title"] { width: min(920px, calc((100vw - 24px) / var(--ui))); }
.launcher { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }   /* the two columns one height */
.launcher > .title-tag { grid-column: 1 / -1; margin: -8px 0 -4px !important; }
.launcher > .title { order: 2; }
.title-news { order: 1; background: #efe2c4; border: 2px solid var(--paper-d); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.tn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tn-head b { font-size: 16px; } .tn-head a { font-size: 13px; color: var(--wood); }
.tn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tn-post a { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px; border-radius: 6px; color: inherit; text-decoration: none; background: #f8efd8; border: 1px solid transparent; }
.tn-post a:hover, .tn-post a:focus-visible { border-color: var(--wood); background: #fff6dc; }
.tn-post img, .tn-ico { width: 88px; aspect-ratio: 16 / 9; object-fit: cover; image-rendering: pixelated; border-radius: 4px; background: #cfe6b0; display: grid; place-items: center; font-size: 26px; }
.tn-post.first a { grid-template-columns: 1fr; }
.tn-post.first img, .tn-post.first .tn-ico { width: 100%; max-height: 170px; }
.tn-post b { display: block; font-size: 15px; line-height: 1.35; }
.tn-post p { margin: 3px 0 0 !important; font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tn-all { display: block; text-align: center; margin-top: 8px; }
.title-news { display: flex; flex-direction: column; }
.title-news .tn-all { margin-top: auto; }                     /* (at the foot of the column, however few the posts) */
.title-news .tn-list { margin-bottom: 8px; }
.tn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 2px; }
.tn-meta small { color: var(--muted); font-size: 12px; }
.tn-kind { color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 8px; }
.tn-new { background: #e8b830; color: #3a2414; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 8px; }
.tn-more { font-size: 12px; color: var(--wood); font-weight: 700; }
@media (max-width: 720px) {
  .launcher { grid-template-columns: 1fr; }
  .launcher > .title { order: 1; }
  .title-news { order: 2; }
}
/* a picture in its gilt frame (house.js viewPicture, the dungeon's chest) */
.pic-frame { display: block; width: max-content; max-width: 100%; margin: 0 auto; padding: 10px; box-sizing: border-box;
  background: #c8a040; border: 2px solid #f0d878; border-radius: 3px; box-shadow: inset 0 0 0 2px #8a6a20, 0 4px 12px rgba(0, 0, 0, .35); }
.pic-frame img { display: block; max-width: 100%; max-height: 55vh; border: 2px solid #5a4410; }