/* The islands' screens. Every colour, the font, the corners and the shadows come from theme.css, which the farm uses too (one look for
   both halves, 2026-10-18); these short names are kept so the rules below read as before. */
:root {
  --panel: var(--wm-panel);
  --panel2: var(--wm-well);
  --edge: var(--wm-edge);
  --ink: var(--wm-ink);
  --dim: var(--wm-dim);
  --accent: var(--wm-gold);
  --no: var(--wm-faint);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; background: #aed7ee; color: var(--ink);
  font: 14px/1.35 var(--wm-font);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#hud { position: fixed; inset: 0; pointer-events: none; }
/* THE OPENING (opening.js): black bars, one line of words for each shot, Skip the whole time; the rest of the screen waits behind it */
#hud.cine > :not(.opening) { visibility: hidden; }
.opening { position: fixed; inset: 0; pointer-events: auto; z-index: 50; }
.op-bar { position: absolute; left: 0; right: 0; height: 11vh; background: #000; }
.op-bar.top { top: 0; }
.op-bar.bottom { bottom: 0; }
.op-black { position: absolute; inset: 0; background: #000; opacity: 1; pointer-events: none; }
.op-line { position: absolute; left: 50%; bottom: calc(11vh + 22px); transform: translateX(-50%); width: min(88vw, 560px); text-align: center;
  color: #f4ecd8; font-size: clamp(17px, 4.6vw, 24px); line-height: 1.35; font-style: italic; text-shadow: 0 2px 8px #000c, 0 0 2px #000; opacity: 0; pointer-events: none; }
.op-skip { position: absolute; top: calc(11vh - 44px); right: 16px; padding: 6px 16px; border-radius: var(--wm-pill); border: 1px solid #fff5; background: #0007;
  color: #f4ecd8; font-size: 14px; cursor: pointer; }
button { font: inherit; color: inherit; touch-action: manipulation; }
svg { display: block; }
.dim { color: var(--dim); }

/* ---- words on the screen ---- */
.hover {
  position: absolute; left: 12px; top: 10px; font-weight: 700; font-size: 15px; color: #fff;
  text-shadow: 0 1px 3px #000, 0 0 2px #000; min-height: 20px;
}
.log {
  position: absolute; left: 12px; bottom: 12px; width: min(440px, calc(100vw - 290px));
  display: flex; flex-direction: column; gap: 3px; font-size: 13px;
}
.log .line {
  background: var(--wm-glass-strong); border: 1px solid var(--wm-edge); padding: 3px 10px; border-radius: var(--wm-r-sm); width: fit-content; max-width: 100%;
  box-shadow: var(--wm-shadow-sm); animation: fade 14s linear forwards;
}
@keyframes fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.pill {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: var(--wm-glass-strong);
  padding: 7px 15px; border-radius: var(--wm-pill); font-weight: 700; border: 1px solid var(--wm-edge); white-space: nowrap; box-shadow: var(--wm-shadow-sm);
}
.pill[hidden] { display: none; }
/* the test speed while it is above 1x (the admin page sets it): in the spot of what you are doing (.pill, in every layout), while you
   are doing nothing; while you are, that line starts with it */
.pill.speed-tag { pointer-events: none; color: var(--wm-gold); border-color: var(--wm-gold-edge); font-size: 12px; }
.toasts { position: absolute; left: 50%; top: 17%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  display: flex; gap: 12px; align-items: center; background: var(--wm-glass-strong); border: 1px solid var(--wm-gold-edge);
  border-radius: var(--wm-r-lg); padding: 10px 18px 10px 10px; box-shadow: var(--wm-shadow); animation: pop 3.6s ease forwards;
}
.toast-ico { width: 40px; height: 40px; padding: 7px; flex: none; border-radius: 50%; background: var(--wm-gold-soft); color: var(--accent); }
.toast b { font-size: 17px; }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 8% { transform: scale(1.06); opacity: 1; } 14%, 86% { transform: scale(1); opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.drops { position: fixed; inset: 0; pointer-events: none; }
.drop {
  position: fixed; transform: translate(-50%, -50%); font-weight: 800; font-size: 18px; color: #fff3b8;
  text-shadow: 0 1px 3px #000, 0 0 3px #000; white-space: nowrap; animation: rise 1.5s ease-out forwards;
}
.drop-ico { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: 3px; color: var(--accent); }
@keyframes rise { 0% { opacity: 0; margin-top: 10px; } 12% { opacity: 1; } 100% { opacity: 0; margin-top: -64px; } }

/* ---- the dock: tabs and the panel ---- */
.dock { position: absolute; right: 12px; bottom: 12px; width: 252px; max-height: calc(100dvh - 24px); display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
.dock > .tabs, .dock > .minibar { flex: none; } /* whatever is above them (the panel) gives way, so nothing ever runs off the top of the page */
.panel { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--wm-r); padding: 8px; box-shadow: var(--wm-shadow); }
.dock.collapsed .panel { display: none; }
.tabs { display: flex; gap: 6px; justify-content: flex-end; }
.tab {
  width: 48px; height: var(--wm-hit); padding: 8px; border-radius: var(--wm-r-md); background: var(--wm-glass-strong); border: 1px solid var(--edge);
  color: var(--dim); cursor: pointer; box-shadow: var(--wm-shadow-sm), var(--wm-btn-lift); transition: transform 0.08s, background 0.15s, color 0.15s;
}
.tab:active { transform: scale(0.95); }
.tab.on { background: var(--wm-card); color: var(--accent); border-color: var(--accent); box-shadow: var(--wm-shadow-sm), inset 0 0 0 1px var(--wm-gold-edge); }
.grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 4px; } /* --cols is set by the screen so every row is full */
.slot {
  position: relative; aspect-ratio: 1; padding: 4px; background: var(--panel2); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--wm-r-sm);
  cursor: pointer;
}
.slot:hover { background: var(--wm-well-hi); }
.slot.sel { outline: 2px solid var(--accent); }
.slot .count {
  position: absolute; left: 3px; top: 1px; font-size: 11px; font-weight: 800; color: var(--wm-gold); text-shadow: 0 1px 1px #000, 0 0 2px #000;
}
.foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; min-height: 30px; }
.foot-name { font-weight: 700; }
.btn {
  background: var(--wm-btn); border: 1px solid var(--edge); border-radius: var(--wm-r-md); padding: 7px 14px; cursor: pointer; font-weight: 700;
  box-shadow: var(--wm-btn-lift); transition: transform 0.08s, background 0.15s, opacity 0.15s;
}
.btn:hover { background: var(--wm-btn-hi); }
.btn:active:not(:disabled) { transform: scale(0.96); }
.btn.small { padding: 5px 12px; }
.link { background: none; border: 0; color: var(--dim); text-decoration: underline; cursor: pointer; padding: 6px 2px; font-size: 12px; }

.skills { display: flex; flex-direction: column; }
.skill { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 7px 2px; border-bottom: 1px solid var(--wm-line); }
.skill-ico { width: 30px; height: 30px; color: var(--accent); }
.skill-name { font-weight: 700; }
.skill-lvl { font-size: 24px; font-weight: 800; color: var(--accent); min-width: 2ch; text-align: right; }
.skill-xp { font-size: 11px; color: var(--dim); }
.bar { height: 6px; background: var(--wm-track); border-radius: var(--wm-pill); overflow: hidden; margin: 3px 0; }
.bar i { display: block; height: 100%; border-radius: var(--wm-pill); background: var(--wm-progress); }
.bar.two { position: relative; }
.bar.two i { position: absolute; left: 0; top: 0; }
.bar i.soon { background: rgba(127, 207, 90, 0.32); }
.goal-carry { font-size: 12px; color: var(--dim); margin-top: 2px; }
.goal-carry.ok { color: var(--wm-good); }

/* ---- the screens: furnace, anvil, bank ---- */
.modal-host { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 12px; }
.modal {
  pointer-events: auto; width: min(480px, 100%); max-height: min(640px, 100%); overflow: auto;
  background: var(--wm-card); border: 1px solid var(--edge); border-radius: var(--wm-r-lg); padding: 14px; box-shadow: var(--wm-shadow-lg);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.modal-title { font-size: 19px; font-weight: 800; color: var(--ink); }
.x {
  width: var(--wm-hit); height: var(--wm-hit); padding: 11px; border-radius: var(--wm-r-md); background: var(--wm-btn); border: 1px solid var(--edge); color: var(--ink); cursor: pointer;
  box-shadow: var(--wm-btn-lift); transition: transform 0.08s, background 0.15s;
}
.x:hover { background: var(--wm-btn-hi); }
.x:active { transform: scale(0.95); }
.qty { display: flex; gap: 3px; margin-bottom: 10px; padding: 3px; width: fit-content; max-width: 100%; background: var(--wm-sunk); border-radius: var(--wm-r-md); }
.qbtn { min-width: 48px; padding: 8px 12px; background: none; border: 0; border-radius: 9px; cursor: pointer; font-weight: 700; color: var(--dim); }
.qbtn.on { background: var(--wm-btn-hi); color: var(--ink); box-shadow: inset 0 0 0 1px var(--wm-gold-edge); }
.bank-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.group { font-weight: 800; color: var(--wm-faint); margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.rows { display: flex; flex-direction: column; gap: 6px; }
.row {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; text-align: left; width: 100%;
  background: var(--panel2); border: 1px solid transparent; border-radius: var(--wm-r-md); padding: 6px 10px 6px 6px; cursor: pointer; min-height: 52px;
  transition: transform 0.08s, background 0.15s;
}
.row:hover { background: var(--wm-well-hi); }
button.row:active { transform: scale(0.98); }
.row.no { opacity: 0.55; }
.row-ico { width: 40px; height: 40px; }
.row-main { display: flex; flex-direction: column; }
.row-name { font-weight: 700; }
.row-sub { font-size: 12px; color: var(--dim); }
.row-lvl { font-weight: 800; color: var(--accent); }
.empty { grid-column: 1 / -1; color: var(--dim); padding: 10px 4px; }
.bank-grid { grid-template-columns: repeat(6, 1fr); }
.modal .grid { grid-template-columns: repeat(var(--cols, 7), 1fr); }
.modal .bank-grid { grid-template-columns: repeat(6, 1fr); }

/* ---- building: the Build tab and the bar that shows while placing or editing ---- */
.btn.wide { width: 100%; padding: 10px 14px; margin-bottom: 2px; }
.cost .have { color: var(--ink); }
.cost .lack, .bar-info .bad { color: var(--wm-bad-ink); }
.buildbar {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(600px, calc(100vw - 24px)); display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--wm-r-lg); padding: 10px 12px;
  box-shadow: var(--wm-shadow); pointer-events: auto;
}
.buildbar[hidden] { display: none; }
.bar-info { display: flex; flex-direction: column; min-width: 130px; flex: 1 1 140px; }
.bar-info b { font-size: 16px; }
.bar-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.buildbar .btn { min-height: var(--wm-hit); padding: 8px 16px; }
.btn.go { background: var(--wm-leaf-dark); border-color: transparent; }
.btn.go:hover { background: #48a042; }
.btn.off { opacity: 0.5; }
.building .dock { display: none; }

/* ---- missions, locked buildings, the dot on the Missions tab ---- */
.tab { position: relative; }
.tab.alert::after {
  content: ''; position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--wm-gold); border: 2px solid var(--wm-card);
}
.missions { display: flex; flex-direction: column; gap: 8px; }
.mission { background: var(--panel2); border: 1px solid transparent; border-radius: var(--wm-r-md); padding: 9px 10px; }
.mission.ready { outline: 2px solid var(--accent); }
.mission-title { font-weight: 800; margin-bottom: 4px; }
.goal { margin: 5px 0; }
.goal-line { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.goal-n { color: var(--dim); font-variant-numeric: tabular-nums; }
.goal.done .goal-n { color: var(--wm-good); }
.mission-reward { font-size: 12px; color: var(--dim); margin-top: 6px; }
/* asks from people (his pick 2a, 2026-10-14): an offer with their words and two buttons, the never-empty line, the Show me arrow */
.offer-why { font-size: 13px; line-height: 1.45; font-style: italic; color: var(--ink); margin: 4px 0 6px; }
.offer-btns { display: flex; gap: 8px; margin-top: 8px; }
.offer-btns .btn { flex: 1; }
.link-btn { display: block; margin: 6px auto 0; background: none; border: 0; color: var(--dim); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.says.soft { border-left-color: var(--wm-edge-hi); color: var(--dim); }
.nudge { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 10px; border-radius: var(--wm-r-md); background: var(--panel2); border: 1px dashed var(--wm-edge-hi); }
.nudge span { font-size: 13px; }
.pointer { position: fixed; left: 0; top: 0; width: 32px; height: 32px; color: var(--wm-gold); pointer-events: none; z-index: 30; filter: drop-shadow(0 2px 3px #0009); transition: transform 0.12s linear; }
.pointer[hidden] { display: none; }
.skill-step { font-size: 11px; color: var(--dim); opacity: 0.8; margin-top: 1px; }
.chapter-line { margin: -2px 0 6px; font-style: italic; }
/* tracking and the pot (his picks 3a to 3c, 2026-10-14) */
.recipe-head { display: flex; align-items: center; gap: 8px; }
.recipe-head .mission-title { flex: 1; min-width: 0; }
.recipe .row-ico { width: 28px; height: 28px; flex: none; }
.goal-line.have .goal-n { color: var(--wm-good); }
.pin-btn { display: inline-flex; align-items: center; gap: 4px; flex: none; background: var(--wm-btn); border: 1px solid var(--wm-edge); color: var(--ink); border-radius: var(--wm-pill); padding: 3px 10px 3px 7px; font: inherit; font-size: 12px; cursor: pointer; }
.pin-btn.on { background: var(--wm-gold-soft); border-color: var(--wm-gold-edge); color: var(--wm-gold); }
.pin-ico { width: 14px; height: 14px; display: inline-block; flex: none; }
.pin-ico svg { width: 100%; height: 100%; }
.seg.small { margin-top: 8px; }
.seg.small .segbtn { font-size: 12px; padding: 5px 8px; }
.tile-wrap { position: relative; display: flex; }
.tile-wrap > .tile { flex: 1; }
.tile-pin { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; padding: 4px; border-radius: var(--wm-pill); border: 1px solid var(--wm-edge); background: var(--wm-glass-strong); color: var(--dim); cursor: pointer; }
.tile-pin.on { color: var(--wm-gold); border-color: var(--wm-gold-edge); }
.trackbox { position: absolute; right: 10px; top: 28%; width: min(190px, 46vw); background: var(--wm-glass-strong); border: 1px solid var(--wm-edge); border-radius: var(--wm-r-md); padding: 8px 10px; box-shadow: var(--wm-shadow-sm); font-size: 12px; pointer-events: auto; }
.trackbox[hidden], #hud.has-modal .trackbox { display: none; }
.trackbox.ready { border-color: rgba(127, 207, 90, 0.6); }
.track-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.track-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; background: none; border: 0; color: var(--wm-gold); font: inherit; font-weight: 800; font-size: 13px; text-align: left; padding: 0; cursor: pointer; }
.track-hide { flex: none; width: 22px; height: 22px; border-radius: var(--wm-pill); border: 1px solid var(--wm-edge); background: none; color: var(--dim); font: inherit; line-height: 1; cursor: pointer; }
.track-line { display: flex; justify-content: space-between; gap: 8px; color: var(--ink); }
.track-line.have span:last-child { color: var(--wm-good); }
.track-say { margin-top: 4px; color: var(--wm-good); }
.trackbox.folded { width: auto; padding: 0; background: none; border: 0; box-shadow: none; }
.track-fold { position: relative; width: 40px; height: 40px; border-radius: var(--wm-pill); border: 1px solid var(--wm-gold-edge); background: var(--wm-glass-strong); color: var(--wm-gold); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--wm-shadow-sm); }
.track-fold .pin-ico { width: 18px; height: 18px; }
.track-dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: var(--wm-pill); background: var(--wm-leaf); }
.warm-tag { position: absolute; right: 10px; top: calc(28% - 34px); display: flex; align-items: center; gap: 5px; background: var(--wm-glass-strong); border: 1px solid rgba(246, 194, 122, 0.45); color: var(--wm-warm); border-radius: var(--wm-pill); padding: 3px 10px 3px 7px; font-size: 12px; font-weight: 700; pointer-events: none; box-shadow: var(--wm-shadow-sm); }
.warm-tag[hidden] { display: none; }
.rest-tag { top: calc(28% - 4px); border-color: #9cc6f266; color: #b9dcff; }
.warm-tag svg { width: 14px; height: 14px; }
.mission .btn.wide { margin-top: 8px; }
/* a row of choices wraps onto a second line when it does not fit across (Settings on a computer: his report 2026-10-12, Account was cut off).
   One look (2026-10-18): the strip of tabs of the farm's shop, a sunk track with the chosen one lifted out of it */
.seg { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; padding: 3px; background: var(--wm-sunk); border-radius: var(--wm-r-md); }
.segbtn {
  position: relative; flex: 1 1 auto; padding: 8px 6px; background: none; border: 0; border-radius: 9px;
  font-weight: 700; cursor: pointer; color: var(--dim); white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.segbtn:hover { color: var(--ink); }
.segbtn.on { background: var(--wm-btn-hi); color: var(--ink); box-shadow: inset 0 0 0 1px var(--wm-gold-edge); }
.segbtn.alert::after {
  content: ''; position: absolute; top: 4px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--wm-gold);
}
.hint { font-size: 12px; color: var(--dim); padding: 0 2px 2px; }
.missions .group:first-child { margin-top: 2px; }
.row.locked { opacity: 0.55; }
.row-sub.lack { color: var(--wm-bad-ink); }
.row-fx { font-size: 11px; color: var(--dim); margin-top: 1px; line-height: 1.3; }

/* ---- the pickup ping: a brief row of squares for how full the backpack is ---- */
/* On a computer it sits beside the dock, at the bottom, so a tall Missions or Skills panel can never cover it. */
.ping {
  position: absolute; right: calc(100% + 10px); bottom: 2px; display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  background: var(--wm-glass-strong); border: 1px solid var(--wm-edge); border-radius: var(--wm-r-md); box-shadow: var(--wm-shadow-sm); opacity: 0; transform: translateX(6px);
  transition: opacity 0.22s ease, transform 0.22s ease; pointer-events: none;
}
.ping.show { opacity: 1; transform: none; }
.pingdots { display: grid; grid-template-columns: repeat(14, 8px); gap: 3px; }
.pingdots i { width: 8px; height: 8px; border-radius: 2px; background: var(--wm-track); }
.pingdots i.on { background: var(--wm-gold); }
.pingdots i.new { background: #fff6c8; animation: pingnew 0.7s ease-out; }
@keyframes pingnew { 0% { transform: scale(1.8); } 100% { transform: scale(1); } }
.ping.tight .pingdots i.on { background: #f08a4a; }
.ping.full .pingdots i.on { background: #e5604a; }
.pingnum { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.ping.full .pingnum { color: var(--wm-bad-ink); }
/* the work meter: what goes in, what comes out, and how many are done out of how many (a smelt, a smith, a cook) */
.ping.work { gap: 8px; }
.pingflow { display: flex; align-items: center; gap: 4px; }
.pingico { position: relative; display: block; flex: none; width: 24px; height: 24px; }
.pingx { position: absolute; right: -4px; bottom: -5px; font-size: 10px; line-height: 1; color: var(--ink); text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.pingarrow { display: block; flex: none; width: 14px; height: 14px; color: var(--dim); }
.pingbar { position: relative; display: flex; flex: none; width: 74px; height: 9px; border-radius: 3px; overflow: hidden; background: var(--wm-track); }
.pingbar i { display: block; height: 100%; transition: width 0.25s ease; }
.pingbar i.ok { background: var(--wm-gold); }
.pingbar i.lost { background: #e5604a; }
.pingbar.notched::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--n) - 2px), var(--wm-card) calc(100% / var(--n) - 2px), var(--wm-card) calc(100% / var(--n)));
}
.pingbar.bump i.ok { animation: pingbump 0.6s ease-out; }
@keyframes pingbump { 0% { filter: brightness(1.9); } 100% { filter: none; } }
.ping.finished .pingbar i.ok { background: var(--wm-leaf); }
.ping.finished .pingnum, .ping.stopped .pingnum { color: var(--wm-good); }
.ping.stopped .pingnum { color: var(--dim); }
/* On a phone the dock is the whole bottom edge and the panels are at most 62% of the height, so it stays just above them. */
@media (max-width: 720px) {
  .ping { right: auto; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 6px); }
  .ping.show { transform: translate(-50%, 0); }
}

/* ---- your world (sync) ---- */
.world { margin-top: 10px; }
.world-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
/* a Build tile's few words on what the thing is for (his report, 2026-10-15) */
/* a building's stages on its card (his pick B1 A) */
.stage-list { margin: 6px 0; }
.stage-row { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 3px 2px; color: var(--dim); }
.stage-row.done { color: inherit; opacity: 0.75; }
.stage-row.now { color: inherit; font-weight: 800; }
.stage-mark { min-width: 36px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }
.tile-does { font-size: 10.5px; line-height: 1.2; color: var(--dim); font-style: italic; }
/* the test jumps (Settings > Test, the owner only): a chapter, then a short list of its steps */
.jump-ch { font-weight: 800; margin: 10px 0 4px; font-size: 13px; }
.jump-list { display: flex; flex-direction: column; gap: 3px; }
.jump { text-align: left; background: var(--wm-well); border: 1px solid var(--wm-line); border-radius: var(--wm-r-sm); padding: 7px 10px; cursor: pointer; font-size: 13px; }
.jump:hover { background: var(--wm-well-hi); }
.watch {
  position: absolute; top: 56px; left: 50%; transform: translateX(-50%); pointer-events: auto; cursor: pointer;
  background: var(--wm-glass-strong); border: 1px solid var(--wm-gold-edge); border-radius: var(--wm-pill); padding: 8px 15px; font-weight: 700; font-size: 13px;
  box-shadow: var(--wm-shadow-sm);
}
.watch[hidden] { display: none; }
/* a question that has to be answered: which game to keep */
.ask-host { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 12px; background: var(--wm-scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); pointer-events: auto; }
.ask-host[hidden] { display: none; }
.modal.ask { display: flex; flex-direction: column; gap: 10px; }
.ask-text { font-size: 14px; color: var(--ink); padding: 0; }
.notice-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40dvh; overflow-y: auto; }
.choice {
  display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%; padding: 12px;
  background: var(--panel2); border: 1px solid var(--wm-edge); border-radius: var(--wm-r-md); cursor: pointer; transition: transform 0.08s, background 0.15s;
}
.choice:hover { background: var(--wm-well-hi); outline: 2px solid var(--accent); }
.choice:active { transform: scale(0.98); }
.choice-title { font-weight: 800; color: var(--accent); }
.choice-text { font-size: 13px; color: var(--dim); }
.btn:disabled { cursor: default; opacity: 0.45; }
/* what someone says when you talk to them */
.says { font-size: 14px; line-height: 1.55; padding: 2px 4px 10px 12px; border-left: 3px solid var(--accent); margin: 2px 0 6px; }
/* the ferry: a quick dip to dark while the camera crosses the water */
.fade { position: absolute; inset: 0; z-index: 15; background: #0b1a22; opacity: 0; pointer-events: none; }
.fade.go { animation: ferry 1.1s ease-in-out; }
@keyframes ferry { 0% { opacity: 0; } 30% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }
.modal.gate { width: min(380px, 100%); }
.modal.gate .btn.wide { margin-bottom: 0; min-height: var(--wm-hit); }
.btn.quiet { background: transparent; font-weight: 600; }
.btn.quiet:hover { background: var(--wm-well-hi); }
.field {
  width: 100%; padding: 11px 12px; background: var(--wm-sunk); color: var(--ink); border: 1px solid var(--wm-edge); border-radius: var(--wm-r-md); font: inherit; font-size: 16px;
}
.field::placeholder { color: var(--wm-faint); }
.field:focus { outline: 2px solid var(--accent); }
.gate-msg { color: var(--wm-bad-ink); font-size: 13px; }
.hint.fine { font-size: 11px; opacity: 0.8; }
@media (max-width: 720px) {
  .watch { top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 24px); }
}

/* ---- short windows (laptops with a small window, phones on their side): backpack in 7 columns ---- */
.panel { flex: 0 1 auto; min-height: 0; max-height: calc(100dvh - 70px); overflow: auto; }
@media (max-width: 720px) { .panel { max-height: min(62dvh, calc(100dvh - 90px)); } }
@media (max-height: 640px) {
  .dock { width: 340px; }
}

/* ---- phones ---- */
@media (max-width: 720px) {
  .hover { display: none; }
  .log {
    bottom: auto; top: max(10px, env(safe-area-inset-top)); left: 10px; width: 64vw; font-size: 12px;
  }
  /* under the view button, which has the top right corner (2026-10-18: the pill lay beneath it) */
  .pill { top: calc(max(10px, env(safe-area-inset-top)) + var(--wm-round) + 8px); left: auto; right: 10px; transform: none; max-width: 32vw; white-space: normal; text-align: center; font-size: 12px; padding: 6px 10px; border-radius: var(--wm-r-md); }
  .toasts { top: 24%; }
  .dock { left: 0; right: 0; bottom: 0; width: auto; padding: 0 8px calc(8px + env(safe-area-inset-bottom)); }
  .tabs { justify-content: center; }
  .tab { width: 64px; }
  .has-modal .dock { display: none; }
  .modal { max-height: calc(100dvh - 24px); }
}
@media (max-width: 720px) and (orientation: landscape) {
  .dock { left: auto; right: 8px; width: min(340px, 50vw); padding: 0; }
  .log { width: 40vw; }
}

/* ---- the Looks tab: parts, colors, presets */
.looks .slotrow { display: grid; grid-template-columns: 54px 1fr; gap: 6px; align-items: start; margin-top: 8px; }
.looks .slotrow > b { font-size: 12px; color: var(--dim); font-weight: 700; padding-top: 7px; }
.looks .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.looks .chip { background: var(--panel2); border: 1px solid var(--wm-edge); color: inherit; border-radius: var(--wm-pill); padding: 5px 11px; font: inherit; font-size: 12px; cursor: pointer; min-height: 30px; }
.looks .chip.on { background: var(--wm-gold-soft); border-color: var(--accent); color: #fff3c4; }
.looks .swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.looks .swatches label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); }
.looks .swatches input { width: 30px; height: 26px; padding: 0; border: 1px solid var(--wm-edge); border-radius: 6px; background: none; cursor: pointer; }
.looks .btnrow { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* the villager's outfit (ui.js renderOutfit): wider names (Shoulders, Hide vest), round colour swatches, and "any colour" last */
.looks.outfit .slotrow { grid-template-columns: 72px 1fr; }
.looks .swatch { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.4); padding: 0; cursor: pointer; box-shadow: inset 0 0 0 2px #fff3; }
.looks .swatch.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.looks .chips input[type=color] { width: 32px; height: 28px; padding: 0; border: 1px solid var(--wm-edge); border-radius: 6px; background: none; cursor: pointer; }
@media (max-width: 720px) { .tab { width: 58px; } }
@media (max-width: 720px) { .dock.on-looks .panel { max-height: 44dvh; } }

/* ---- the small backpack that stays on the screen, moving things by dragging, and the open backpack's size and glass ---- */
.minibar { position: relative; display: none; }
.dock.mini .minibar { display: block; }
.minigrid { display: grid; grid-template-columns: repeat(var(--cols, 14), 1fr); gap: 2px; padding: 4px; background: var(--wm-glass-strong); border: 1px solid var(--wm-edge); border-radius: var(--wm-r-md); box-shadow: var(--wm-shadow-sm); }
.mslot { position: relative; aspect-ratio: 1; padding: 1px; background: var(--wm-well); border: 0; border-radius: 4px; cursor: pointer; touch-action: none; }
.mslot.vacant { background: rgba(255, 255, 255, 0.04); cursor: default; }
.mslot.sel { outline: 2px solid var(--accent); z-index: 1; }
.mslot.new { animation: minipop 0.9s ease-out; }
@keyframes minipop { 0% { background: #fff0b0; transform: scale(1.6); z-index: 2; } 100% { transform: none; } }
.minigrid.tight { border-color: #f08a4a99; }
.minigrid.full { border-color: #e5604acc; }
.minigrid.shake { animation: minishake 0.5s; }
@keyframes minishake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.minitip { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--wm-card); border: 1px solid var(--accent); border-radius: var(--wm-r-md); font-weight: 700; box-shadow: var(--wm-shadow-sm); }
.minitip span { flex: 1; }
.dock .slot[data-slot] { touch-action: none; }
.slot.drag-from, .mslot.drag-from { opacity: 0.35; }
.slot.drop-to, .mslot.drop-to { outline: 2px solid var(--wm-leaf); background: rgba(127, 207, 90, 0.2); }
.dragghost { position: fixed; left: 0; top: 0; width: 44px; height: 44px; pointer-events: none; z-index: 30; filter: drop-shadow(0 4px 6px #000a); }
/* the open backpack: small slots take less of the screen, and see-through lets the character show */
.dock.pack-small.on-pack .grid { grid-template-columns: repeat(var(--cols, 7), minmax(0, 38px)); justify-content: center; gap: 3px; }
.dock.pack-small.on-pack .slot { padding: 2px; border-radius: 6px; }
/* on a phone the smaller one is two rows of small slots right across, like the strip above the tabs (his ask, 2026-10-17) */
.dock.pack-small.on-pack .grid.rows2 { grid-template-columns: repeat(var(--cols, 14), minmax(0, 1fr)); gap: 2px; }
.dock.pack-small.on-pack .grid.rows2 .slot { padding: 1px; border-radius: 4px; }
.dock.pack-small.on-pack .grid.rows2 .slot .count { left: 1px; top: 0; font-size: 9px; }
.dock.pack-small.on-pack .foot { margin-top: 6px; min-height: 26px; }
.dock.pack-glass.on-pack .panel { background: var(--wm-panel-see); }
.dock.pack-glass.on-pack .slot { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.1); }
@media (max-width: 720px) { .has-mini .watch { bottom: calc(150px + env(safe-area-inset-bottom)); } }

/* ---- the tool belt above the backpack ---- */
.belt { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--wm-line); }
.belt .slot { width: 44px; flex: none; border-color: rgba(255, 212, 71, 0.4); background: var(--wm-well); }
.belt .slot.vacant svg { opacity: 0.28; }
.belt-label { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--wm-faint); text-transform: uppercase; letter-spacing: 0.06em; padding-right: 2px; }
.dock.pack-small.on-pack .belt .slot { width: 36px; padding: 2px; border-radius: 6px; }
.foot-btns { display: flex; gap: 6px; }
.foot .small { font-size: 12px; }
.row-sub.have, .bar-info .have { color: var(--wm-good); }
/* the "new version ready" chip; it sits under the "playing on another device" one when both show (above it on a phone, where
   the chips sit at the bottom of the screen) */
.update { border-color: rgba(127, 207, 90, 0.7); }
.watch:not([hidden]) ~ .update { top: 98px; }
@media (max-width: 720px) {
  .watch:not([hidden]) ~ .update { top: auto; bottom: calc(114px + env(safe-area-inset-bottom)); }
  .has-mini .watch:not([hidden]) ~ .update { bottom: calc(192px + env(safe-area-inset-bottom)); }
}
/* the work meter while the backpack is open: inside the dock, right above the backpack, so it never covers the character (his
   call, 2026-10-12); with the backpack closed it keeps its place beside the dock (computer) or above it (phone) */
.dock.on-pack .ping { position: static; transform: none; display: none; margin: 0 0 6px; justify-content: center; }
.dock.on-pack .ping.show { display: flex; transform: none; }
/* the big backpack on a phone, a little more compact (his ask: "just slightly") */
@media (max-width: 720px) {
  .dock.pack-big.on-pack .grid { grid-template-columns: repeat(var(--cols, 7), minmax(0, 44px)); justify-content: center; gap: 3px; }
  .dock.pack-big.on-pack .slot { padding: 3px; }
}

/* ---- spots you can read: the calm card (hold a resource, or right-click it) and the guides in the Skills tab ---- */
.infocard {
  position: absolute; left: 50%; top: 56px; transform: translateX(-50%); display: flex; gap: 10px; align-items: flex-start;
  width: max-content; max-width: min(360px, calc(100vw - 24px)); padding: 10px 14px 10px 10px; background: var(--panel);
  border: 1px solid var(--edge); border-radius: var(--wm-r); box-shadow: var(--wm-shadow); font-size: 13px; pointer-events: none;
}
.infocard[hidden] { display: none; }
.infocard b { font-size: 15px; display: block; margin-bottom: 2px; }
.info-ico { flex: none; width: 30px; height: 30px; color: var(--accent); }
.soft { color: var(--wm-warm); }
.skill-btn { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--wm-line); text-align: left; cursor: pointer; color: inherit; font: inherit; }
.skill-btn:hover { background: var(--wm-well); }
.skill-guide { color: var(--accent); }
.guide-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.guide-head b { font-size: 15px; }
.guide-row { background: var(--panel2); border: 1px solid transparent; border-radius: var(--wm-r-md); padding: 8px 10px; }
.guide-row.unknown { opacity: 0.7; }
.mission.someday { background: rgba(255, 255, 255, 0.04); }
.mission.someday .mission-title { margin-bottom: 0; }
.guide-top { display: flex; justify-content: space-between; gap: 8px; }
@media (max-width: 720px) { .infocard { top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* ---- no scroll bars on the panels and screens: they scroll with a finger, the mouse wheel, or by dragging them with the mouse
   (his ask, 2026-10-12; ui.js "scrolling by dragging") ---- */
.panel, .modal { scrollbar-width: none; }
.panel::-webkit-scrollbar, .modal::-webkit-scrollbar { display: none; }
.panel.dragging, .modal.dragging { cursor: grabbing; }

/* ---- a phone on its side (his report, 2026-10-12: "the interface is pretty buggy in landscape mode on mobile"). Turned sideways a
   phone is wider than 720px, so it used to get the computer's layout on a screen only 360 to 430 tall. Short and wide now: the dock
   stands on the right and every panel fits the height, the messages sit top left and what you are doing bottom left, toasts and chips
   stay over the open part of the screen, and a screen like the bank hides the dock (as on a phone held upright) and lays the chest
   and the backpack side by side. ui.js SIDEWAYS is the same rule. ---- */
@media (orientation: landscape) and (max-height: 500px) {
  .hover { display: none; }
  .dock { right: max(8px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom)); width: min(340px, 46vw); max-height: calc(100dvh - 12px); }
  .panel { max-height: calc(100dvh - 64px); padding: 6px; }
  .tab { width: 52px; height: 40px; }
  .log {
    bottom: auto; top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left));
    width: min(380px, calc(100vw - min(340px, 46vw) - 32px)); font-size: 12px;
  }
  .pill {
    top: auto; bottom: max(8px, env(safe-area-inset-bottom)); left: max(8px, env(safe-area-inset-left)); right: auto; transform: none;
    max-width: calc(100vw - min(340px, 46vw) - 32px); white-space: normal; font-size: 12px; padding: 5px 10px; border-radius: var(--wm-r-md);
  }
  .toasts { top: 20%; left: calc((100vw - min(340px, 46vw)) / 2); }
  .toast { padding: 7px 14px 7px 8px; }
  .toast b { font-size: 15px; }
  .watch { top: max(8px, env(safe-area-inset-top)); bottom: auto; left: calc((100vw - min(340px, 46vw)) / 2); }
  .infocard { top: max(8px, env(safe-area-inset-top)); bottom: auto; left: calc((100vw - min(340px, 46vw)) / 2); }
  .watch:not([hidden]) ~ .update, .has-mini .watch:not([hidden]) ~ .update { top: 50px; bottom: auto; }
  .has-mini .watch { bottom: auto; }
  .has-modal .dock { display: none; }
  .modal-host, .ask-host { padding: 8px; }
  .modal { width: min(720px, 100%); max-height: calc(100dvh - 16px); padding: 10px; }
  .modal.gate, .modal.ask { width: min(460px, 100%); }
  .modal-head { margin-bottom: 6px; }
  .bankcols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .bankcols .group { margin-top: 4px; }
  .dock.pack-big.on-pack .grid { grid-template-columns: repeat(var(--cols, 7), minmax(0, 40px)); justify-content: center; gap: 3px; }
  .dock.pack-big.on-pack .slot { padding: 3px; }
  .dock.on-looks .panel { max-height: calc(100dvh - 64px); }
  .buildbar { bottom: max(6px, env(safe-area-inset-bottom)); padding: 6px 10px; }
  .buildbar .btn { min-height: 40px; padding: 6px 14px; }
}

/* how full a backpack or a box is: a bar that fills, the number small beside it (his ask, 2026-10-13) */
.fill { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.fill-track { flex: 1; height: 8px; border-radius: var(--wm-pill); background: var(--wm-track); overflow: hidden; }
.fill-track i { display: block; height: 100%; border-radius: var(--wm-pill); background: linear-gradient(#ffe27a, var(--wm-gold) 55%, var(--wm-gold-deep)); transition: width 0.35s ease; }
.fill.tight .fill-track i { background: linear-gradient(#f8b07c, #f08a4a 55%, #c4672d); }
.fill.full .fill-track i { background: linear-gradient(#f39584, #e5604a 55%, #b3412d); }
.fill-num { font-size: 12px; font-weight: 800; color: var(--dim); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.fill.full .fill-num { color: var(--wm-bad-ink); }
.bankcols .fill { margin: -2px 0 8px; }

/* the Build tab, made to hold a lot (his pick C, 2026-10-13): round tabs that scroll sideways, material chips, a grid of tiles */
.btabs { display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px 6px; margin-top: 6px; scrollbar-width: none; }
.btabs::-webkit-scrollbar { display: none; }
.btab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 70px; padding: 6px 2px; border-radius: var(--wm-r);
  background: transparent; border: 1px solid transparent; color: var(--dim); cursor: pointer; position: relative; font: inherit; }
.btab-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--wm-well); display: grid; place-items: center; border: 2px solid transparent; }
.btab-ico svg { width: 34px; height: 34px; }
.btab-name { font-size: 11px; line-height: 1.15; text-align: center; font-weight: 700; }
.btab.on { color: var(--accent); }
.btab.on .btab-ico { border-color: var(--accent); background: var(--wm-gold-soft); }
.btab.alert::after { content: ''; position: absolute; top: 6px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--wm-bad); }
.mchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.mchip { display: flex; align-items: center; gap: 5px; padding: 4px 10px 4px 5px; border-radius: var(--wm-pill); border: 1px solid var(--wm-edge);
  background: var(--wm-well); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.mchip.on { border-color: var(--accent); background: var(--wm-gold-soft); color: var(--accent); }
.mchip-ico, .mchip-ico svg { width: 20px; height: 20px; display: block; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px 7px; border-radius: var(--wm-r-md);
  background: var(--wm-well); border: 1px solid var(--wm-line); color: inherit; font: inherit; cursor: pointer; text-align: center; min-width: 0; transition: transform 0.08s, background 0.15s; }
.tile:hover { background: var(--wm-well-hi); }
.tile:active { transform: scale(0.97); }
.tile-ico, .tile-ico svg { width: 46px; height: 46px; display: block; }
.tile-name { font-weight: 700; font-size: 13px; line-height: 1.2; }
.tile-sub { font-size: 11px; color: var(--dim); line-height: 1.25; }
.tile-sub.lack { color: var(--wm-bad-ink); }
.tile-sub.have { color: var(--wm-good); }
.tile.no { opacity: 0.6; }
.tile.locked { opacity: 0.55; }
.tile-badge { position: absolute; top: 5px; right: 5px; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: var(--wm-pill); background: var(--wm-sunk); color: var(--dim); }
.tile-badge.new { background: var(--accent); color: var(--wm-gold-ink); }


/* Wayfarer Merge step 2: the farm in this page (src/farmhost.js) and the one view button (his pick 6A) */
.farm-frame { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 30; background: #3f8fb0; }
.farm-frame[hidden] { display: none; }
/* another device is playing: the farm underneath is held still; a tap anywhere takes over (farmhost.js) */
.farm-watch { position: fixed; inset: 0; z-index: 35; border: 0; background: transparent; cursor: pointer; padding: 0; margin: 0; display: flex; align-items: flex-start; justify-content: center; font: inherit; color: inherit; }
.farm-watch[hidden] { display: none; }
.farm-watch > span {
  margin-top: 56px; background: var(--wm-glass-strong); border: 1px solid var(--wm-gold-edge); border-radius: var(--wm-pill); padding: 8px 15px;
  font-weight: 700; font-size: 13px; box-shadow: var(--wm-shadow-sm);
}
body.on-farm #c, body.on-farm #hud { visibility: hidden; }
/* sailing between the islands and the farm: the farm's own sailing card (sky, sand, sea, the boat bobbing over it), so the crossing
   looks the same both ways and inside the farm (2026-10-18) */
.farm-fade { position: fixed; inset: 0; z-index: 40; background: var(--wm-sail-sky); opacity: 0; pointer-events: none; transition: opacity .4s ease; overflow: hidden;
  display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 14px; color: var(--wm-ink); font-weight: 800; font-size: 20px; text-shadow: 0 2px 8px rgba(0, 20, 30, 0.4); }
.farm-fade.on { opacity: 1; pointer-events: auto; }
.farm-fade > span { position: relative; padding: 0 16px; text-align: center; }
.farm-fade__sea { position: absolute; left: -10%; right: -10%; top: 56%; height: 44%; background: var(--wm-sail-waves); animation: wm-waves 1.6s linear infinite; }
.farm-fade__boat { position: relative; width: 84px; height: 84px; animation: wm-bob 1.1s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(0, 20, 30, .35)); }
.farm-fade__boat svg { width: 100%; height: 100%; }
.viewmode-btn {
  position: absolute; right: calc(12px + env(safe-area-inset-right, 0px)); top: calc(12px + env(safe-area-inset-top, 0px)); /* the top right corner: clear of the backpack panel (Wayfarer Merge) */ width: var(--wm-round); height: var(--wm-round); padding: 10px;
  border-radius: 50%; border: 1px solid var(--wm-edge); background: var(--wm-glass); box-shadow: var(--wm-shadow); pointer-events: auto; cursor: pointer;
  transition: transform 0.08s;
}
.viewmode-btn svg { width: 100%; height: 100%; display: block; }
.viewmode-btn:hover { outline: 2px solid var(--accent); }
.viewmode-btn:active { transform: scale(0.95); }
#hud.cine .viewmode-btn { visibility: hidden; }
/* a phone on its side: the view button stands at the top right of the open part of the screen, beside the dock (2026-10-18: it covered
   the top of the panel there) */
@media (orientation: landscape) and (max-height: 500px) {
  .viewmode-btn { top: max(8px, env(safe-area-inset-top)); right: calc(max(8px, env(safe-area-inset-right)) + min(340px, 46vw) + 10px); }
}