@font-face {
  font-family: 'Jacquard 12';
  src: url('../assets/fonts/Jacquard12-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --wizard-display: 'Jacquard 12', Georgia, serif;
  --wizard-copy: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wizard-ink: #f5e9cb;
  --wizard-muted: #c7c0b6;
  --wizard-gold: #d7b879;
  --wizard-line: #b69b704f;
  --wizard-panel: #191d2cf5;
}

/* The world stays touchable; readable panel prose still allows selection and scrolling. */
#app {
  font-family: var(--wizard-display);
  font-synthesis: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  color: var(--wizard-ink);
}
#app button, #app button *, #app summary,
.walk-header, .walk-header *, .action-area, .action-area *,
#joystick, #joystick *, #spell-ui, #spell-ui *,
.catch-card, .catch-card *, #toast, #trail-hint, #target-label {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#app button, #app summary, #app a { touch-action: manipulation; }
#joystick, #joystick *, #spell-ui, #spell-ui * { touch-action: none; }
#app #joystick button, #app #spell-ui button { touch-action: none; }
.fishing-panel, .catch-card {
  touch-action: pan-y pinch-zoom;
  overscroll-behavior: contain;
}
#spell-ui { touch-action: none; }
#app .fishing-panel p, #app .fishing-panel .save-note,
#app .fishing-panel .shop-item small, #app .fishing-panel .fish-row small,
#app dialog p {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* A quiet old-book frame around the existing forest, with the action kept prominent. */
#app { background: #171d2a; }
#app::before { background: linear-gradient(#151827ee, #191d2a75 58%, transparent); }
.walk-header { gap: 8px; }
.wordmark {
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .015em;
  color: #f4deac;
  text-shadow: 0 2px 0 #15131d, 0 0 12px #d6b8765c;
}
.pocket {
  border: 1px solid var(--wizard-line);
  border-radius: 8px;
  background: #181c2de0;
  font: 600 11px/1.2 var(--wizard-copy);
  color: #dcd5c4;
  box-shadow: inset 0 0 0 1px #f5d99c13;
}
.pocket strong { color: #ffedc2; }
.walk-header > button {
  border: 1px solid var(--wizard-line);
  border-radius: 8px;
  background: #191c2de8;
  color: #f1d8ac;
  box-shadow: inset 0 0 0 1px #f5d99c12;
}
.walk-header > button:hover { background: #34304a; }
#toast, #trail-hint, #target-label {
  border: 1px solid var(--wizard-line);
  border-radius: 7px;
  background: #1a2030ed;
  color: #f6e4c0;
  font: 600 11px/1.45 var(--wizard-copy);
}
.action-area small {
  font: 600 11px/1.25 var(--wizard-copy);
  color: #f6e9cf;
}
#action, #spell-hold {
  border: 1px solid #ffe7ac;
  border-radius: 8px;
  background: #e1bd7b;
  color: #292034;
  font: 400 25px/1 var(--wizard-display);
  box-shadow: inset 0 0 0 2px #432d453d, 0 5px 22px #0b0d1cc9;
}
#action:hover, #spell-hold:hover { background: #f0d69b; }
#action:disabled { background: #272b39eb; color: #c9c0b2; border-color: var(--wizard-line); }
#joystick {
  border-color: var(--wizard-line);
  border-radius: 50%;
  background: #191d2bb8;
  box-shadow: inset 0 0 0 3px #c7a87312;
}
#stick-knob { border-color: #dfc58c; background: #bba07866; }
#joystick > span { font: 600 10px/1 var(--wizard-copy); color: #dfd2ba; }
.stick-key { color: #f0d7a6; }

.fishing-panel, .catch-card, #spell-ui, dialog {
  border: 1px solid #ba9a69a3;
  border-radius: 10px;
  background: var(--wizard-panel);
  color: var(--wizard-ink);
  box-shadow: inset 0 0 0 2px #dfc58c12, 0 14px 38px #090d1cc4;
}
.fishing-panel h2, .card-title h2, dialog h2 {
  font: 400 34px/1.03 var(--wizard-display);
  letter-spacing: 0;
  color: #f3d99f;
  text-shadow: 0 1px 0 #0c0d1a;
}
.fishing-panel p, .fish-lore, dialog p {
  font: 400 12px/1.6 var(--wizard-copy);
  color: #d2cbc0;
}
.eyebrow, .spell-eyebrow, .card-discovery {
  font: 400 17px/1 var(--wizard-display);
  letter-spacing: .055em;
  color: #d8bd82;
}
.fishing-panel .eyebrow {
  display: block;
  max-width: calc(100% - 38px);
  line-height: 1.1;
}
.close, .card-close { color: #f2d7a4; }
.shop-item, .fish-row, .legacy-collection, .catch-facts { border-color: var(--wizard-line); }
.shop-item strong, .fish-row strong, .report-place strong,
.bait-option strong, .collection-slot strong, .legacy-fish,
.catch-facts strong { font: 400 21px/1.15 var(--wizard-display); color: #f4e1b8; }
.shop-item small, .fish-row small, .report-place span,
.report-place small, .bait-option small, .collection-slot small,
.legacy-fish small, .fish-lore, .card-water, .card-foot small,
.catch-facts span, .report-legend, .save-note, .setting,
.world-links a, .spell-hint, #spell-state {
  font-family: var(--wizard-copy);
  letter-spacing: 0;
  color: #d1c9bd;
}
.report-place, .bait-option, .collection-slot {
  border-radius: 7px;
  border-color: var(--wizard-line);
  background: #22283a;
  box-shadow: inset 0 0 0 1px #f5d99c0b;
}
.report-place:hover, .bait-option:hover, .collection-slot:hover { background: #353246; }
.report-place.selected { border-color: #e4c787; background: #3a3545; }
.collection-number, .rarity { font: 600 10px/1.25 var(--wizard-copy); }
.collection-slot strong { display: block; }
.menu-buttons button, .shop-item button, .sell, .report-link,
.bait-cancel, .card-continue, #reset, #reset-cancel, #reset-confirm,
#spell-cancel, .legacy-collection summary {
  font: 400 20px/1.1 var(--wizard-display);
}
.sell, .report-link, .card-continue {
  background: #d9bd86;
  color: #282338;
  border-color: #f0d9a8;
}
.sell:hover, .report-link:hover, .card-continue:hover { background: #edce91; }
#spell-ui { border-color: #c9a6d4; background: #211d35f5; }
#spell-hold { min-height: 62px; }
#spell-hold.pressed { background: #ffe6a9; }
#spell-cancel { color: #e0d1cf; }
#spell-ring text { font-family: var(--wizard-display); }
#spell-meter { border-color: #bb9bc46b; }
button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible {
  outline-color: #f6dc9d;
}

@media (max-width: 650px) {
  .wordmark { font-size: 22px; }
  .pocket { font-size: 10px; }
  .fishing-panel h2 { font-size: 32px; }
  #action { font-size: 23px; }
  .action-area small { font-size: 10px; }
  .catch-card .card-title h2 { font-size: 28px; }
}
@media (max-height: 500px) {
  .wordmark { font-size: 20px; }
  .fishing-panel h2 { font-size: 29px; }
  .catch-card .card-title h2 { font-size: 25px; }
  #spell-hold { min-height: 50px; }
}