/* Font: m6x11 by Daniel Linssen. */
@font-face {
  font-family: "m6x11";
  src: url("assets/fonts/m6x11.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

:root {
  --ink: #2a1c12;
  --parchment: #f3e2c4;
  --parchment-dark: #e4c896;
  --wood: #5a3a22;
  --moss: #1a2a18;
  --gold: #c4a05a;
  --ui-shadow: rgba(12, 18, 10, 0.55);
  --paper: #efe3c4;
  --paper-hi: #fbf3de;
  --paper-lo: #dcc79c;
  --frame: #5a381c;
  --frame-hi: #8a5a32;
  --frame-lo: #3d2314;
  --edge: #241610;
  --brass: #c4a44a;
  --ink-soft: #5a3a22;
  --ink-faint: #8a5a32;
  --pixel-font: "m6x11", monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b140e;
  color: var(--parchment);
  font-family: var(--pixel-font);
  font-size: 16px;
  line-height: 20px;
  font-weight: normal;
  font-synthesis: none;
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: optimizeSpeed;
}

img, canvas {
  image-rendering: pixelated;
}

button, input, textarea, select, kbd, code, pre, table, th, td, h1, h2, h3, h4, strong, b, em, i, small, label {
  font-family: var(--pixel-font);
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

.play-page .site-nav,
.play-page .site-nav a,
.play-page .brand,
.play-page .site-nav nav {
  font-family: var(--pixel-font);
  font-size: 16px;
  line-height: 20px;
  font-weight: normal;
  letter-spacing: 0;
}

.play-page .nav-play {
  border-width: 2px;
  box-shadow: inset 2px 2px 0 #6aab4e, inset -2px -2px 0 #245428;
}

#frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  background:
    radial-gradient(ellipse at center, #16301c 0%, #0b140e 70%);
}

#stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#playfield {
  position: relative;
  width: max-content;
  height: max-content;
}

#game {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  outline: none;
  box-shadow: 0 0 0 3px #2a1c12, 0 0 0 6px #c4a05a55, 0 18px 50px var(--ui-shadow);
  background: #1a3a28;
}

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

#region-card {
  position: absolute;
  top: 16px;
  left: 18px;
  max-width: 250px;
  padding: 8px 12px 10px;
  transition: opacity .5s steps(4);
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--frame);
  box-shadow:
    inset 0 0 0 2px var(--brass),
    inset 4px 4px 0 0 var(--paper-hi),
    inset -4px -4px 0 0 var(--paper-lo),
    0 0 0 2px var(--edge),
    4px 4px 0 2px #0b140e88;
}

#region-card h1 {
  font-size: 32px;
  line-height: 32px;
  color: var(--frame-lo);
}

#region-card p {
  margin-top: 4px;
  font-size: 16px;
  line-height: 18px;
  color: var(--ink-soft);
}

#region-card.region-away { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #region-card { transition: none; } }

#clock {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 210px;
  max-width: calc(100% - 16px);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px 8px 7px;
  color: #3a2418;
  font-size: 16px;
  line-height: 16px;
  pointer-events: auto;
  z-index: 5;
  background-color: #efe3c4;
  border: 6px solid #5a381c;
  box-shadow:
    inset 0 0 0 2px #c4a05a,
    0 0 0 1px #2a1c12,
    3px 4px 0 #2a1c1288;
}

.info-cap {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--brass);
  border: 1px solid #6a4a18;
  box-shadow: inset 2px 2px 0 #f0d890, inset -2px -2px 0 #8b6a28;
  z-index: 2;
  pointer-events: none;
}
.info-cap-tl { top: -5px; left: -5px; }
.info-cap-tr { top: -5px; right: -5px; }
.info-cap-bl { bottom: -5px; left: -5px; }
.info-cap-br { bottom: -5px; right: -5px; }

.clock-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#clock-text {
  color: #3a2418;
  font-size: 16px;
  line-height: 16px;
  min-width: 0;
}

#clock-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  min-width: 0;
}

#clock-meta span {
  display: block;
  text-align: center;
  font-size: 16px;
  line-height: 16px;
  background: #e8d2a4;
  color: #3a2418;
  border: 2px solid #6a4a28;
  padding: 2px 1px 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px #c4a05a88, 0 1px 0 #3a241866;
}

#clock-rod {
  font-size: 16px;
  line-height: 16px;
  color: #3a2418;
  padding-top: 3px;
  border-top: 2px solid #c4a05a66;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#clock-rank {
  margin-left: auto;
  font-size: 16px;
  color: #6a4a28;
  flex-shrink: 0;
}

#meal-chip {
  font-size: 16px;
  line-height: 16px;
  color: #5a381c;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#needs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.need-row {
  display: grid;
  grid-template-columns: 52px 22px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 2px 2px;
}

.need-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
}

.need-row em {
  font-size: 16px;
  line-height: 16px;
  color: #3a2418;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.need-pips {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
  width: 100%;
}

.need-row .need-pips span {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 14px;
  border: 1px solid #3a2418;
  background: #5a4c40;
  box-sizing: border-box;
  box-shadow: inset 0 -3px 0 #2a2018;
}

.need-row#need-hunger .need-pips span.on {
  background: #b08850;
  border-color: #3a2418;
  box-shadow: inset 0 3px 0 #f0e0b8, inset 0 -3px 0 #6a4a28;
}

.need-row#need-warmth .need-pips span.on {
  background: #c05048;
  border-color: #3a2418;
  box-shadow: inset 0 3px 0 #f0b0a0, inset 0 -3px 0 #6a2020;
}

.need-row#need-rest .need-pips span.on {
  background: #a07038;
  border-color: #3a2418;
  box-shadow: inset 0 3px 0 #e8d2a4, inset 0 -3px 0 #4a2c10;
}

.need-row.warn {
  background: #f0c8b888;
  outline: 2px solid #c45a5a;
  animation: need-pulse 1.1s steps(1) infinite;
}

.need-row.warn em {
  color: #8b2018;
}

.need-row.warn .need-pips span.on {
  background: #d04c40;
  box-shadow: inset 0 3px 0 #f8c0b0, inset 0 -3px 0 #7a1818;
}

.need-row.crit {
  background: #e8a090cc;
  outline: 3px solid #e23a3a;
  animation: need-pulse 0.45s steps(1) infinite;
}

.need-row.crit em::after {
  content: "";
}

@keyframes need-pulse {
  50% { filter: brightness(1.18); }
}

#clock-icon,
.phase-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
}

#clock.spring #clock-season { background: #3d6a32; color: #f3e2c4; border-color: #5a381c; }
#clock.summer #clock-season { background: #c47828; color: #fff8e8; border-color: #5a381c; }
#clock.autumn #clock-season { background: #a04820; color: #f3e2c4; border-color: #5a381c; }
#clock.winter #clock-season { background: #4a6a8a; color: #e8f0ff; border-color: #5a381c; }
#clock.clear #clock-weather { background: #d8c890; color: #3a2418; border-color: #5a381c; }
#clock.rain #clock-weather { background: #3a5a78; color: #d8e8f8; border-color: #5a381c; }
#clock.mist #clock-weather { background: #7a8a98; color: #f0f4f8; border-color: #5a381c; }
#clock.heat #clock-weather { background: #b45a28; color: #f3e2c4; border-color: #5a381c; }
#clock.frost #clock-weather { background: #6a88b0; color: #f0f6ff; border-color: #5a381c; }
#clock.dawn #clock-phase { background: #e89050; color: #fff8e8; border-color: #5a381c; }
#clock.day #clock-phase { background: #d4a838; color: #3a2418; border-color: #5a381c; }
#clock.golden #clock-phase { background: #e07030; color: #fff8e8; border-color: #5a381c; }
#clock.night #clock-phase { background: #2a4060; color: #f3e2c4; border-color: #5a381c; }

@media (max-width: 1180px) {
  #clock { width: 188px; padding: 6px 7px; gap: 5px; top: 6px; right: 6px; border-width: 5px; }
  #clock-text { font-size: 16px; }
  #clock-meta span { padding: 2px 0; }
  .need-row { grid-template-columns: 46px 20px minmax(0, 1fr); }
  .need-icon { width: 20px; height: 20px; }
  .need-row .need-pips span { height: 12px; }
  .need-row em { font-size: 16px; }
}

.fish-hint { font-size: 16px; color: var(--ink-faint); }
.pack-bait.is-low { background: #f0d8c4; }
.pack-rods { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.pack-rods button { width: auto; margin: 0; }
.pack-hearts { font-size: 16px; color: #8b3a32; }
.ink-fresh { color: #2a6a38; }
.ink-soft { color: #8b6238; }

#spot-label {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--frame-hi);
  color: var(--paper-hi);
  font-size: 16px;
  line-height: 16px;
  padding: 6px 14px;
  border: 2px solid var(--frame-lo);
  box-shadow:
    inset 0 2px 0 #b07a48,
    inset 0 -2px 0 var(--frame),
    3px 3px 0 #0b140e88;
}

#prompt {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  color: var(--ink);
  padding: 6px 14px;
  font-size: 16px;
  line-height: 20px;
  border: 2px solid var(--frame);
  box-shadow:
    inset 2px 2px 0 var(--paper-hi),
    inset -2px -2px 0 var(--paper-lo),
    0 0 0 2px var(--edge),
    4px 4px 0 2px #0b140e88;
}

#prompt.bite {
  color: var(--ink);
  border-color: #e23a3a;
  animation: pulse 0.45s steps(1) infinite;
}

@keyframes pulse {
  50% {
    background: #fbe0c8;
    box-shadow:
      inset 2px 2px 0 var(--paper-hi),
      inset -2px -2px 0 var(--paper-lo),
      0 0 0 2px #e23a3a,
      4px 4px 0 2px #0b140e88;
  }
}

#hint {
  position: absolute;
  bottom: 18px;
  right: 22px;
  font-size: 16px;
  line-height: 16px;
  color: var(--ink-soft);
  background: #efe3c4dd;
  padding: 4px 8px;
  border: 2px solid var(--frame);
  box-shadow: inset 2px 2px 0 var(--paper-hi), inset -2px -2px 0 var(--paper-lo);
}

@media (pointer: coarse) { #hint { display: none; } }

.hidden {
  display: none !important;
}

#catch-toast {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 6;
}

.toast-inner {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 260px;
  max-width: min(560px, 88vw);
  padding: 12px 16px;
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--frame);
  box-shadow:
    inset 0 0 0 2px var(--brass),
    inset 4px 4px 0 0 var(--paper-hi),
    inset -4px -4px 0 0 var(--paper-lo),
    0 0 0 2px var(--edge),
    6px 6px 0 2px #0b140e88;
}

.toast-kicker {
  font-size: 16px;
  line-height: 16px;
  color: var(--ink-faint);
}
.toast-kicker:empty { display: none; }
#catch-toast .toast-kicker:empty + #toast-name { margin-left: 0; }

#toast-name {
  font-size: 32px;
  line-height: 32px;
  color: var(--frame-lo);
}

#toast-desc {
  font-size: 16px;
  line-height: 18px;
  color: var(--ink-soft);
  margin-top: 2px;
}

#toast-art {
  width: 48px;
  height: 48px;
  background: #1a3a48;
  border: 2px solid #0d3a42;
  box-shadow: inset 2px 2px 0 #3d6a72, inset -2px -2px 0 #102830;
}

#catch-toast.miss .toast-kicker {
  color: #8b3a32;
}

#catch-toast.miss .toast-inner {
  border-color: #8b3a32;
}

#catch-toast.miss #toast-art {
  display: none;
}

#journal {
  position: absolute;
  inset: 0;
  background: #0b140ecc;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.journal-panel {
  width: min(560px, 92vw);
  max-height: 82vh;
  overflow: auto;
  background: var(--paper);
  color: var(--ink);
  border: 6px solid var(--frame);
  box-shadow:
    inset 0 0 0 2px var(--brass),
    inset 4px 4px 0 0 var(--paper-hi),
    inset -4px -4px 0 0 var(--paper-lo),
    0 0 0 2px var(--edge),
    8px 8px 0 2px #0b140e99;
  padding: 16px 20px 14px;
  scrollbar-color: var(--frame-hi) var(--paper-lo);
}

.journal-panel header {
  border-bottom: 2px solid var(--frame-hi);
  box-shadow: 0 2px 0 var(--paper-hi);
  padding-bottom: 10px;
  margin-bottom: 12px;
  text-align: center;
}

.journal-panel h2 {
  font-size: 32px;
  line-height: 32px;
  color: var(--frame-lo);
}

.journal-sub {
  font-size: 16px;
  line-height: 18px;
  color: var(--ink-soft);
  margin-top: 4px;
}

.rarity-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
  font-size: 16px;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  vertical-align: middle;
  box-shadow: inset -2px -2px 0 #0003, inset 2px 2px 0 #fff4;
}
.dot.common { background: #3d8a48; }
.dot.uncommon { background: #3a6ec8; }
.dot.rare { background: #8a48c8; }

#journal-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

#journal-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  background: #f6ecd2;
  border: 2px solid var(--paper-lo);
  box-shadow: inset 2px 2px 0 var(--paper-hi), inset -2px -2px 0 #e8d8b4;
}

#journal-list li.unknown {
  opacity: 0.62;
}

.fish-swatch {
  width: 40px;
  height: 26px;
  flex-shrink: 0;
  border: 2px solid var(--frame);
  background: #1a3a48;
  image-rendering: pixelated;
}

.fish-name {
  font-size: 16px;
  line-height: 16px;
  color: var(--frame-lo);
}

.fish-meta {
  font-size: 16px;
  line-height: 16px;
  color: var(--ink-soft);
}

.journal-panel footer {
  margin-top: 14px;
  font-size: 16px;
  line-height: 18px;
  color: var(--ink-soft);
  text-align: center;
}

#start-screen {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, #2a4a30cc 0%, #0b140ef2 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.start-panel {
  text-align: center;
  max-width: 460px;
  padding: 24px 28px;
  background: var(--paper);
  color: var(--ink);
  border: 6px solid var(--frame);
  box-shadow:
    inset 0 0 0 2px var(--brass),
    inset 4px 4px 0 0 var(--paper-hi),
    inset -4px -4px 0 0 var(--paper-lo),
    0 0 0 2px var(--edge),
    8px 8px 0 2px #0b140e99;
}

.start-panel .kicker {
  font-size: 16px;
  color: var(--ink-faint);
}

.start-panel h1 {
  font-size: 32px;
  line-height: 32px;
  margin: 8px 0 12px;
  color: var(--frame-lo);
}

.start-panel .blurb {
  font-size: 16px;
  line-height: 20px;
  color: var(--ink-soft);
}

.controls {
  list-style: none;
  text-align: left;
  margin: 18px auto;
  display: inline-block;
  font-size: 16px;
}

.controls li {
  margin: 6px 0;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 6px;
  background: #f6ecd2;
  border: 2px solid var(--frame-hi);
  box-shadow: inset -2px -2px 0 var(--paper-lo);
  font-size: 16px;
  line-height: 16px;
  text-align: center;
}

#btn-start {
  cursor: pointer;
  border: 2px solid var(--edge);
  background: #3d7a48;
  color: var(--paper-hi);
  font-size: 16px;
  line-height: 16px;
  padding: 10px 22px;
  box-shadow: inset 2px 2px 0 #6aab4e, inset -2px -2px 0 #245428, 0 0 0 2px var(--frame);
}

#btn-start:hover {
  background: #4d9158;
}

#btn-start:active {
  box-shadow: inset 2px 2px 0 #245428, inset -2px -2px 0 #6aab4e, 0 0 0 2px var(--frame);
}

#btn-fullscreen { display: none; }
.web-fs #pause-menu #pause-fullscreen,
.web-fs #btn-fullscreen { display: block; min-height: 44px; }
.web-fs #btn-fullscreen { margin: 8px auto 0; min-width: 138px; white-space: nowrap; }

.start-panel .weather-line {
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.recap {
  list-style: none;
  text-align: left;
  margin: 12px auto;
  max-width: 340px;
  font-size: 16px;
  color: var(--ink-soft);
}

.recap li {
  margin: 6px 0;
  padding-left: 10px;
  border-left: 2px solid var(--brass);
}

.overlay-panel {
  position: absolute;
  inset: 0;
  background: #0b140ecc;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 40;
}

.admin-panel {
  width: min(760px, 96vw);
  max-height: 88vh;
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}

.admin-tabs button {
  width: auto;
  margin: 0;
  padding: 4px 10px;
  font-size: 16px;
}

.admin-tabs button.is-on {
  background: #d4e8c8;
  box-shadow: inset 2px 2px 0 #9cc890, inset -2px -2px 0 #eef6e8;
}

.admin-docs {
  font-size: 16px;
  line-height: 20px;
  color: #3a2418;
}

.admin-docs h3 {
  margin: 16px 0 6px;
  color: var(--frame-lo);
}

.admin-docs p, .admin-docs li {
  margin: 0 0 8px;
}

.admin-docs ol, .admin-docs ul {
  padding-left: 1.2em;
  margin: 0 0 10px;
}

.admin-docs code {
  font-size: 16px;
  background: #f6ecd2;
  border: 1px solid var(--paper-lo);
  padding: 0 4px;
}

.admin-check {
  list-style: none;
  padding: 0;
}

.admin-check li {
  padding: 8px 10px;
  margin: 6px 0;
  border: 2px solid var(--frame-hi);
  background: #f6ecd2;
  box-shadow: inset 2px 2px 0 var(--paper-hi), inset -2px -2px 0 var(--paper-lo);
}

.admin-check li.is-pass {
  background: #d4e8c8;
}

.admin-check li.is-fail {
  background: #f0d8c4;
}

.admin-panel h3 {
  font-size: 16px;
  color: var(--ink-faint);
  margin: 0 0 6px;
}

.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

.admin-cmd-row {
  display: flex;
  gap: 8px;
  margin: 8px 0 6px;
}

#admin-cmd {
  flex: 1;
  padding: 6px 10px;
  border: 2px solid var(--frame);
  background: #fbf3de;
  box-shadow: inset 2px 2px 0 var(--paper-lo);
  font-size: 16px;
  color: var(--ink);
}

.admin-log, .admin-bait, #admin-status {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 4px 0 8px;
}

#admin-fish {
  width: 100%;
  margin: 6px 0;
  padding: 4px;
  border: 2px solid var(--frame);
  background: #fbf3de;
  font-size: 16px;
}

#admin-god.is-on {
  background: #d4e8c8;
}

.pack-panel #pack-body button,
.admin-panel button,
#shop-body button,
#board-body button,
#bench-body button,
#tank-body button,
#cooler-body button,
#rank-up-body button,
.dialog-actions button,
#mill-end-btn,
#paste-save-btn,
#pause-menu button {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 6px 10px;
  border: 2px solid var(--frame);
  background: #f6ecd2;
  color: var(--ink);
  font-size: 16px;
  line-height: 18px;
  cursor: pointer;
  text-align: left;
  box-shadow: inset 2px 2px 0 var(--paper-hi), inset -2px -2px 0 var(--paper-lo);
}

.pack-panel #pack-body button:hover,
.admin-panel button:hover,
#shop-body button:hover,
#board-body button:hover,
#bench-body button:hover,
#tank-body button:hover,
#cooler-body button:hover,
#rank-up-body button:hover,
.dialog-actions button:hover,
#mill-end-btn:hover,
#paste-save-btn:hover,
#pause-menu button:hover,
.journal-panel > button[data-close]:hover,
.journal-panel > #shop-gift:hover {
  background: #fff6e0;
}

.pack-panel #pack-body button:active,
.admin-panel button:active,
#shop-body button:active,
#board-body button:active,
#bench-body button:active,
#tank-body button:active,
#cooler-body button:active,
#rank-up-body button:active,
.dialog-actions button:active,
#mill-end-btn:active,
#paste-save-btn:active,
#pause-menu button:active,
.journal-panel > button[data-close]:active,
.journal-panel > #shop-gift:active {
  box-shadow: inset 2px 2px 0 var(--paper-lo), inset -2px -2px 0 var(--paper-hi);
}

button:focus-visible,
input[type=checkbox]:focus-visible,
.pad-focus {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

html:not(.pad-input) .pad-focus {
  outline: none;
}

.journal-panel > button[data-close],
.journal-panel > #shop-gift {
  display: block;
  margin: 12px auto 0;
  min-width: 120px;
  padding: 6px 14px;
  border: 2px solid var(--frame);
  background: #f6ecd2;
  color: var(--ink);
  font-size: 16px;
  line-height: 18px;
  cursor: pointer;
  text-align: center;
  box-shadow: inset 2px 2px 0 var(--paper-hi), inset -2px -2px 0 var(--paper-lo);
}

#menu-pad { display: none; }
#menu-pad.is-touch { display: flex; flex-direction: column; gap: 4px; position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 50; pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#menu-pad button { width: 72px; height: 36px; border: 2px solid #2a1c12; background: #1c2418ee; color: #f3e2c4; font-size: 16px; cursor: pointer; box-shadow: inset 2px 2px 0 #34402c, inset -2px -2px 0 #10160e; }
#menu-pad button:active { background: #3d7a48; }
#move-pad.menu-hide, #move-pad.is-touch.menu-hide, #menu-pad.menu-hide, #menu-pad.is-touch.menu-hide { display: none; }
.journal-panel > button.touch-close { display: none; }
#start-screen, #journal { z-index: 40; }

#mill-end-btn,
#paste-save-btn,
#pause-menu button {
  display: block;
  width: auto;
  margin: 10px auto 0;
}

.vale-desktop .site-nav { display: none; }

.touch-only { display: none; }
@media (pointer: coarse) { .desk-only { display: none; } .touch-only { display: inline; } }
.pad-text { display: none; }
html.pad-input .key-text { display: none; }
html.pad-input .pad-text { display: inline; }
@media (pointer: coarse) { html.pad-input .key-text { display: inline; } html.pad-input .pad-text { display: none; } }
html.pad-input .pack-bait kbd { display: none; }
@media (pointer: coarse) { html.pad-input .pack-bait kbd { display: inline-block; } }
.nb-links { display: none; }
.desktop-only { display: none; }
.vale-desktop .desktop-only { display: block; }
#pause-menu button.desktop-only { display: none; }
.vale-desktop #pause-menu button.desktop-only { display: block; }

#pause-menu #pause-reset-yes { background: none; border-color: transparent; box-shadow: none; color: #8b6238; }
#pause-menu button { min-width: 168px; text-align: center; }
#pause-menu label { display: block; }
#pause-menu label, #pause-reset-confirm p, #pause-credits p { font-size: 16px; line-height: 20px; text-align: center; }
#pause-menu label input { vertical-align: middle; margin-right: 4px; accent-color: var(--frame-hi); }
#pause-reset-confirm { margin: 12px 0 4px; padding: 8px 0; border-top: 2px dotted #8b6238; border-bottom: 2px dotted #8b6238; }
#pause-credits { margin-top: 12px; padding-top: 8px; border-top: 2px solid var(--paper-lo); }

#pause-reset-confirm p,
#pause-credits p {
  color: var(--ink);
}

#paste-save-text {
  width: 100%;
  color: var(--ink);
  background: #fbf3de;
  border: 2px solid var(--frame);
  box-shadow: inset 2px 2px 0 var(--paper-lo);
  font-size: 16px;
  line-height: 16px;
  padding: 4px 6px;
}

#bench-body p {
  margin: 10px 0 4px;
  font-size: 16px;
  color: #8b6238;
}

#cooler-body p {
  margin: 10px 0 4px;
  font-size: 16px;
  color: #5a6470;
}

#cooler-body .ink-fresh {
  color: #3d4a42;
}

#cooler-body .ink-soft {
  color: #5c6570;
}

#bench-body button span {
  display: block;
  font-size: 16px;
  margin-top: 3px;
  color: var(--ink-soft);
}

#bench-body button[disabled] {
  opacity: 0.55;
  cursor: default;
}

.pack-bait.is-on { background: #d4e8c8; }
.pack-coins { margin: 8px 0; color: var(--frame-lo); }
.pack-mute { display: flex; gap: 8px; align-items: center; margin: 10px 0; font-size: 16px; }
.shop-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#journal-list li.favorite { outline: 2px solid var(--brass); }
.journal-cook { margin-top: 8px; font-size: 16px; color: var(--ink-soft); }
#mill-end-scene { display: block; width: 192px; height: 96px; margin: 6px auto; image-rendering: pixelated; border: 2px solid var(--frame); }
.journal-mill { display: flex; flex-wrap: wrap; margin: 0 0 10px; gap: 2px 8px; font-size: 16px; }
.journal-mill.hidden { display: none; }
.journal-mill > p { flex: 1 0 100%; margin: 4px 0 0; }
.journal-mill > p:first-child { font-size: 16px; margin: 0; color: var(--frame-lo); }
.journal-mill .mill-rare { flex: 1 0 100%; width: auto; display: flex; align-items: center; gap: 8px; text-align: left; padding: 2px 0; border-bottom: 2px dotted var(--brass); }
.journal-mill .mill-rare canvas { flex: none; }
.journal-mill .mill-rare > div:nth-of-type(1) { min-width: 84px; font-size: 16px; color: var(--frame-lo); }
.journal-mill .mill-rare .ink-soft { font-size: 16px; }

.parchment-panel {
  background: #f3e6c8;
}
.stamp-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.stamp-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 2px solid #e0c992;
  font-size: 16px;
}
.stamp-list li:last-child { border-bottom: 0; }
.stamp-seal {
  width: 18px;
  height: 18px;
  border: 2px solid #c4a05a;
  background: #efe0b8;
  flex: 0 0 18px;
}
.stamp-seal.is-ink {
  background: #7a2e28;
  border-color: #5a1c18;
  box-shadow: inset 0 0 0 3px #c45a48;
}
.stamp-locked .stamp-title {
  color: #a08058;
}
.stamp-open .stamp-title {
  flex: 1;
  color: #3a2412;
}
.stamp-day {
  color: #6a4a28;
  font-size: 16px;
}
.perk-picks button { display: block; width: 100%; }
.perk-picks button span { display: block; font-size: 16px; margin-top: 4px; }

#dialog {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  z-index: 45;
}

.dialog-card {
  min-width: 300px;
  max-width: 400px;
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--frame);
  padding: 10px 14px 12px;
  box-shadow:
    inset 0 0 0 2px var(--brass),
    inset 4px 4px 0 0 var(--paper-hi),
    inset -4px -4px 0 0 var(--paper-lo),
    0 0 0 2px var(--edge),
    6px 6px 0 2px #0b140e88;
}

#dialog-name {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 10px;
  font-size: 16px;
  line-height: 16px;
  color: var(--paper-hi);
  background: var(--frame-hi);
  border: 2px solid var(--frame-lo);
  box-shadow: inset 0 2px 0 #b07a48, inset 0 -2px 0 var(--frame);
}

#dialog-line {
  font-size: 16px;
  line-height: 20px;
  color: var(--ink);
}

.dialog-actions {
  margin-top: 6px;
}

#spot-label {
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#spot-label.hot {
  border-color: var(--brass);
  box-shadow:
    inset 0 2px 0 #b07a48,
    inset 0 -2px 0 var(--frame),
    0 0 0 2px var(--brass),
    3px 3px 0 2px #0b140e88;
}

#move-pad {
  display: none;
}

#move-pad.is-touch {
  display: grid;
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 50;
  pointer-events: auto;
  grid-template-columns: 44px 44px 44px;
  grid-template-rows: 44px 44px 36px;
  gap: 4px;
}

#move-pad button {
  width: 44px;
  height: 44px;
  border: 2px solid #2a1c12;
  background: #1c2418ee;
  color: #f3e2c4;
  font-size: 16px;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: inset 2px 2px 0 #34402c, inset -2px -2px 0 #10160e;
}

#btn-fish {
  grid-column: 1 / 4;
  width: auto !important;
  height: 32px !important;
  font-size: 16px;
}

#move-pad button.is-held,
#move-pad button:active {
  background: #3d7a48;
}

#move-pad [data-move="up"] { grid-column: 2; grid-row: 1; }
#move-pad [data-move="left"] { grid-column: 1; grid-row: 2; }
#move-pad [data-move="down"] { grid-column: 2; grid-row: 2; }
#move-pad [data-move="right"] { grid-column: 3; grid-row: 2; }

#move-pad #btn-packup { display: none; grid-column: 1; grid-row: 1; width: 44px; height: 44px; font-size: 16px; line-height: 16px; white-space: normal; padding: 0; background: var(--parchment); color: var(--ink); border: 2px solid #8b6238; }
#move-pad #btn-packup.is-on { display: block; }
#move-pad #btn-packup.is-held, #move-pad #btn-packup:active { background: var(--parchment-dark); }

#game, #move-pad, #move-pad button { touch-action: none; }
#move-pad { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

@media (min-width: 721px) and (min-height: 481px) {
  #catch-toast { top: auto; bottom: clamp(12px, 7vh, 76px); }
  #catch-toast .toast-inner {
    min-width: 0;
    max-width: clamp(288px, 30vw, 440px);
    gap: clamp(6px, 0.9vh, 10px);
    padding: clamp(4px, 0.55vh, 6px) clamp(8px, 1.1vw, 12px) clamp(4px, 0.55vh, 6px) clamp(4px, 0.55vh, 6px);
    border-width: 2px;
    box-shadow:
      inset 0 0 0 2px var(--brass),
      inset 4px 4px 0 0 var(--paper-hi),
      inset -4px -4px 0 0 var(--paper-lo),
      0 0 0 2px var(--edge),
      4px 4px 0 2px #0b140e88;
  }
  #catch-toast.note .toast-inner { max-width: clamp(420px, 36vw, 440px); }
  #catch-toast .toast-kicker, #catch-toast #toast-name { display: inline; }
  #catch-toast #toast-name { font-size: 16px; line-height: 16px; margin-left: 6px; }
  #catch-toast #toast-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  #catch-toast #toast-art { width: 40px; height: 40px; overflow: hidden; flex: none; }
  #catch-toast #toast-art canvas { display: block; margin: -4px; }
  #catch-toast.note #toast-art { display: none; }
  #dialog { bottom: clamp(12px, 7vh, 76px); }
  .dialog-card {
    min-width: 0;
    max-width: clamp(288px, 28vw, 360px);
    padding: clamp(6px, 0.75vh, 8px) clamp(8px, 1.1vw, 12px) clamp(8px, 0.95vh, 10px);
  }
}

@media (max-width: 720px), (max-height: 480px) {
  .play-page .site-nav { display: none; }
  #clock { width: 168px; top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); }
  #clock-rod { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .need-row { grid-template-columns: 46px 16px minmax(0, 1fr); column-gap: 2px; }
  .need-icon { width: 16px; height: 16px; }
  .need-pips { gap: 2px; }
  .need-row .need-pips span { min-height: 10px; min-width: 6px; }
  #prompt { bottom: calc(120px + env(safe-area-inset-bottom)); }
  .nb-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
  .nb-links:empty { display: none; }
  #move-pad.is-touch { left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); }
  .overlay-panel { position: fixed; }
  .journal-panel { width: min(560px, 92vw); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow: auto; box-sizing: border-box; }
  #start-screen { position: fixed; }
  .start-panel { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow: auto; box-sizing: border-box; padding: 12px 16px; }
  #btn-start { position: sticky; bottom: 0; }
  .web-fs #btn-start { bottom: 52px; }
  .web-fs #btn-fullscreen { position: sticky; bottom: 4px; z-index: 1; }
  @media (pointer: coarse) {
    #move-pad.is-touch { grid-template-rows: 44px 44px 44px; }
    #btn-fish { height: 44px !important; }
    #pause-menu button, .journal-panel button { min-height: 44px; }
    #menu-pad button { height: 44px; }
    .journal-panel > button.touch-close { display: block; position: sticky; top: 0; z-index: 2; margin: 0 0 -44px auto; min-width: 0; }
    .journal-panel > button.touch-close + header { padding-right: 88px; }
    .journal-panel > button.touch-close ~ button[data-close]:not(.touch-close) { display: none; }
    #clock:not(.expanded) { position: fixed; top: calc(8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); width: 128px; height: 36px; padding: 2px 1px; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; gap: 3px; overflow: hidden; }
    #clock:not(.expanded) .info-cap,
    #clock:not(.expanded) #meal-chip,
    #clock:not(.expanded) #clock-icon,
    #clock:not(.expanded) #clock-rank,
    #clock:not(.expanded) #clock-meta,
    #clock:not(.expanded) #clock-rod,
    #clock:not(.expanded) .need-row em,
    #clock:not(.expanded) .need-pips { display: none; }
    #clock:not(.expanded) #clock-text { flex: none; font-size: 16px; line-height: 16px; white-space: nowrap; }
    #clock:not(.expanded) #needs { display: flex; flex-direction: row; gap: 3px; width: auto; }
    #clock:not(.expanded) .need-row { display: block; width: 16px; height: 16px; padding: 0; gap: 0; min-height: 0; background: none; outline: none; animation: none; flex: none; }
    #clock:not(.expanded) .need-icon { width: 16px; height: 16px; outline: 2px solid var(--ink); display: block; }
    #clock:not(.expanded) .need-row.warn .need-icon { background: var(--brass); outline: 2px solid var(--brass); }
    #clock:not(.expanded) .need-row.crit .need-icon { background: #e23a3a; outline: 2px solid #e23a3a; }
    #clock:not(.expanded) .need-row.warn,
    #clock:not(.expanded) .need-row.crit { width: 18px; height: 18px; padding: 1px; margin: -1px 0; box-sizing: border-box; outline: 1px solid var(--ink); }
    #clock:not(.expanded) .need-row.warn { background: var(--brass); }
    #clock:not(.expanded) .need-row.crit { background: #e23a3a; }
    #clock:not(.expanded) .need-row.warn .need-icon,
    #clock:not(.expanded) .need-row.crit .need-icon { outline: none; }
    #clock.expanded { position: fixed; top: calc(8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); width: 168px; height: auto; display: flex; flex-direction: column; align-items: stretch; }
    #catch-toast { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); max-width: min(60vw, calc(100vw - 528px)); height: 28px; }
    #catch-toast .toast-inner { min-width: 0; padding: 4px 10px; height: 28px; box-sizing: border-box; display: flex; align-items: center; }
    #catch-toast #toast-art { display: none; }
    #catch-toast .toast-inner > div:not(#toast-art) { display: flex; gap: 6px; white-space: nowrap; overflow: hidden; min-width: 0; }
    #catch-toast .toast-kicker, #catch-toast #toast-name, #catch-toast #toast-desc { font-size: 16px; line-height: 16px; margin: 0; }
    #catch-toast #toast-desc { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    #catch-toast .toast-kicker, #catch-toast #toast-name { flex: none; }
    #catch-toast #toast-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    #catch-toast.note { height: auto; width: max-content; max-width: min(480px, 92vw); }
    #catch-toast.note .toast-inner { height: auto; max-height: 60px; padding: 2px 10px; }
    #catch-toast.note .toast-inner > div:not(#toast-art) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; white-space: normal; overflow: hidden; max-height: 48px; font-size: 16px; line-height: 16px; }
    #catch-toast.note .toast-kicker, #catch-toast.note #toast-name, #catch-toast.note #toast-desc { display: inline; overflow: visible; text-overflow: clip; }
    #catch-toast.note #toast-name, #catch-toast.note #toast-desc { margin-left: 6px; }
    #shop .journal-panel > #shop-gift { position: sticky; bottom: 0; z-index: 2; background: var(--parchment); }
    .nb-links a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; }
    #region-card { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); max-width: 240px; padding: 4px 8px; }
    #region-card h1 { font-size: 16px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #region-card p { display: none; }
    #prompt { position: fixed; font-size: 16px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50vw; left: 50%; transform: translateX(-50%); bottom: calc(120px + env(safe-area-inset-bottom)); }
    @media (orientation: portrait) and (max-width: 720px) {
      #catch-toast { top: calc(52px + env(safe-area-inset-top)); max-width: calc(100vw - 16px); }
      #prompt { bottom: calc(160px + env(safe-area-inset-bottom)); }
      #shop.overlay-panel { align-items: flex-start; padding-top: calc(8px + env(safe-area-inset-top)); box-sizing: border-box; }
    }
    @media (orientation: landscape) {
      #prompt { bottom: calc(8px + env(safe-area-inset-bottom)); height: 28px; padding: 4px 14px; box-sizing: border-box; font-size: 16px; line-height: 16px; max-width: min(50vw, calc(100vw - 2 * var(--gutter, 200px))); }
    }
  }
}