:root {
  font-family: 'STSong', 'Songti SC', 'SimSun', serif;
  color: #fff;
  --text-glow: 0 0 2px #ffffffa6, 0 0 8px #ffffff66, 0 0 16px #e3fff333, 0 1px 3px #08251de6;
  text-shadow: var(--text-glow);
  font-synthesis: none;
  font-weight: 400;
  --olive: #465440;
  --ink: #fff;
  --paper: #173d37;
  --muted: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; background: #27382c; }
button { font: inherit; cursor: pointer; text-shadow: inherit; }
button:focus-visible, canvas:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.game-shell { height: 100svh; min-height: 400px; position: relative; overflow: hidden; background: #748b67; }
canvas { width: 100%; height: 100%; display: block; outline: none; }
.topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 24px; padding: 20px 28px; pointer-events: none; }
.status { display: flex; align-items: center; gap: 10px; padding: 6px 1px; font-size: 11px; white-space: nowrap; text-shadow: var(--text-glow); }
.status #region { font-size: 12px; letter-spacing: .5px; }
.status i { width: 2px; height: 2px; border-radius: 50%; background: #f4f1dfb3; }
.quick-actions { margin-left: auto; display: flex; align-items: center; gap: 5px; pointer-events: auto; }
.quick-actions button, .cottage-actions button { color: #fff; border: 1px solid #ffffff29; background: #173d3782; border-radius: 6px; padding: 7px 10px; font-size: 11px; backdrop-filter: blur(8px); }
.quick-actions button:hover, .cottage-actions button:hover { background: #43583ae6; border-color: #e7ead665; }
.quick-actions button[aria-pressed="true"] { background: #53623ebd; border-color: #e7ead665; }
#help { grid-column: 1 / -1; justify-self: center; width: 27px; padding: 6px 0; border-radius: 50%; font-size: 13px; }
kbd { font: inherit; font-size: 10px; }
.quick-actions kbd { opacity: .66; margin-left: 5px; }
.bottom-bar { position: absolute; bottom: 20px; left: 28px; right: 28px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; pointer-events: none; text-shadow: var(--text-glow); }
.walk-hint { display: flex; align-items: center; gap: 4px; transition: opacity 1.5s; }
.walk-hint kbd { padding: 3px 4px; border: 1px solid #f3f0df4a; border-radius: 3px; background: #34473352; }
.walk-hint span { opacity: .5; margin: 0 5px; }
.walk-hint.faded { opacity: 0; }
.mobile-controls { display: none; }
.collect-count { color: #fff; }
.collect-count b { font-weight: 400; color: #fff; margin-left: 4px; font-variant-numeric: tabular-nums; }
.cottage-actions { position: absolute; bottom: 58px; right: 28px; display: flex; gap: 7px; }
.prompt { position: absolute; transform: translate(-50%, -100%); display: flex; gap: 8px; align-items: center; padding: 8px 12px; max-width: min(320px, 80vw); border: 1px solid #ffffff7a; border-radius: 6px; background: #173d37c9; color: #fff; box-shadow: 0 3px 15px #08251d40; font-size: 12px; white-space: nowrap; backdrop-filter: blur(8px); }
.prompt:hover { background: #4c6044; }
.prompt kbd { opacity: .8; border: 1px solid #f3f0df61; padding: 2px 4px; border-radius: 3px; }
.hidden { display: none !important; }
.toast { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); max-width: min(560px, 85vw); padding: 9px 15px; border-radius: 5px; background: #173d37dc; color: #fff; box-shadow: 0 4px 20px #08251d40; font-size: 12px; line-height: 1.7; text-align: center; pointer-events: none; opacity: 0; transition: opacity .35s; }
.toast.show { opacity: 1; }
.panel { position: absolute; right: 28px; top: 84px; bottom: 65px; width: min(438px, calc(100vw - 40px)); padding: 30px; border: 1px solid #ffffff42; border-radius: 22px; background: #173d3799; color: var(--ink); box-shadow: 0 18px 45px #061e2366; backdrop-filter: blur(18px); overflow: hidden; }
.panel::before, .panel::after { content: ''; position: absolute; width: 62px; height: 70px; background: url('/forest-game/assets/panel-leaves.svg') center / contain no-repeat; pointer-events: none; opacity: .2; filter: brightness(0) invert(1); }
.panel::before { top: 9px; left: 7px; transform: scaleX(-1); }
.panel::after { bottom: 13px; right: 15px; opacity: .14; }
#panel-content { position: relative; height: 100%; overflow-y: auto; scrollbar-color: #ffffff66 transparent; scrollbar-width: thin; padding-right: 4px; }
.panel h2 { font-family: 'STZhongsong', 'Songti SC', 'SimSun', serif; font-size: 25px; letter-spacing: 1px; font-weight: 400; margin: 0 35px 12px 0; padding-bottom: 15px; border-bottom: 1px solid #ffffff29; text-shadow: var(--text-glow); }
.panel .subtitle { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 0 0 22px; }
.panel h3 { margin: 22px 0 9px; font-weight: 500; letter-spacing: 1px; color: #fff; font-size: 12px; }
.close { position: absolute; z-index: 2; right: 16px; top: 15px; padding: 0; width: 28px; height: 28px; color: #fff; background: transparent; border: 0; border-radius: 50%; font-size: 23px; }
.close:hover { background: #ffffff1a; }
.entry { padding: 15px 0; border-top: 1px solid #ffffff1f; display: flex; gap: 11px; align-items: center; }
.entry .icon { font-size: 22px; width: 42px; height: 42px; flex-shrink: 0; text-align: center; display: grid; place-items: center; }
.entry .icon.illustrated { background: url('/forest-game/assets/forest-icons.png') no-repeat; background-size: 400% 400%; background-position: calc(var(--icon-col) * 33.333%) calc(var(--icon-row) * 33.333%); }
.entry b { display: block; font-size: 13px; line-height: 1.7; font-weight: 500; }
.entry small { display: block; font-size: 11px; line-height: 1.7; color: var(--muted); }
.entry-count { margin-left: auto; font-size: 12px; white-space: nowrap; color: #fff; }
.entry.unknown { color: #fff; }
.entry.unknown .icon { font-size: 24px; opacity: .5; }
.empty { margin: 28px 0; font-size: 12px; line-height: 1.9; color: var(--muted); }
.memories { border-top: 1px solid #ffffff1f; margin-top: 24px; }
.memories span { display: inline-block; font-size: 10px; color: #fff; margin: 0 10px 10px 0; }
.illustrated-map { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid #ffffff40; }
.illustrated-map img { display: block; width: 100%; height: auto; }
.map-mist { position: absolute; top: 0; height: 100%; background: #173d37cc; backdrop-filter: blur(3px); }
.map-label { position: absolute; transform: translate(-50%, -50%); padding: 4px 6px; border: 1px solid #ffffff33; border-radius: 5px; background: #173d37cc; color: #fff; font-size: 10px; white-space: nowrap; box-shadow: 0 1px 5px #08251d40; }
.map-label.current { background: #35695de6; color: #fff; border-color: #ffffff80; }
.map-marker, .map-key { width: 10px; height: 10px; border: 2px solid #fffced; border-radius: 50%; background: #ba9861; box-shadow: 0 0 0 2px #9a815b70; }
.map-marker { position: absolute; transform: translate(-50%, -50%); }
.map-key { display: inline-block; vertical-align: middle; margin-right: 6px; }
.map-note { font-size: 11px; color: var(--muted); line-height: 1.8; margin-top: 18px; }
.panel-footnote { font-size: 11px; line-height: 1.8; margin: 24px 0 8px; color: var(--muted); }
.panel-actions { display: grid; gap: 10px; margin-top: 28px; }
.panel-actions button { border: 1px solid #ffffff66; border-radius: 22px; padding: 12px 16px; font-size: 13px; color: #fff; background: #527e6a55; }
.panel-actions button:hover { background: #527e6a99; }
.panel-actions .secondary { color: var(--ink); background: #ffffff0d; border-color: #ffffff33; }
.panel-actions .secondary:hover { background: #ffffff1f; }
.panel-actions .text-button { background: transparent; color: #fff; border-color: transparent; font-size: 12px; padding-top: 14px; }
.controls { margin: 20px 0; }
.controls div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #ffffff1f; font-size: 12px; }
.controls dt { flex-shrink: 0; }
.controls kbd { color: #fff; padding: 3px 4px; border: 1px solid #ffffff33; background: #ffffff12; border-radius: 3px; }
.controls dd { margin: 0; color: #fff; }
.achievement { position: absolute; left: 28px; bottom: 66px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 5px; background: #173d37dc; color: #fff; pointer-events: none; animation: arrive .35s ease; }
.achievement span { color: #fff; font-size: 17px; }
.achievement small, .achievement b { display: block; }
.achievement small { color: #fff; font-size: 9px; margin-bottom: 3px; }
.achievement b { font-size: 11px; font-weight: 400; }
.startup-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 85vw; padding: 15px 20px; border-radius: 6px; color: #fff; background: #173d37e6; font-size: 13px; line-height: 1.8; text-align: center; }
.startup-message.error { background: #5a5740f2; }
@keyframes arrive { from { transform: translateY(5px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 760px) {
  .topbar { padding: 15px 16px; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
  .status { gap: 8px; font-size: 10px; }
  .status #region { font-size: 11px; }
  .quick-actions { gap: 4px; }
  .quick-actions button { padding: 6px 8px; font-size: 10px; }
  .quick-actions kbd { display: none; }
  .bottom-bar { left: 16px; right: 16px; bottom: 17px; font-size: 10px; }
  .walk-hint { gap: 3px; }
  .walk-hint kbd { font-size: 9px; }
  .panel { right: 16px; top: 86px; bottom: 58px; padding: 23px; }
  .cottage-actions { bottom: 55px; right: 16px; }
  .achievement { left: 16px; bottom: 56px; }
}
@media (max-width: 500px) {
  .topbar { gap: 7px; }
  .quick-actions { width: 100%; margin-left: 0; }
  .collect-count { font-size: 9px; }
  .panel { top: 99px; }
}
@media (pointer: coarse), (max-width: 760px) {
  .walk-hint { display: none; }
  .mobile-controls { position: absolute; z-index: 3; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; gap: 12px; transform: translateX(-50%); pointer-events: auto; }
  .mobile-controls button { width: 58px; height: 50px; border: 1px solid #ffffff55; border-radius: 18px; color: #fff; background: #173d37b8; box-shadow: 0 8px 20px #061e2366, inset 0 1px 0 #ffffff2e; backdrop-filter: blur(10px); font-size: 25px; line-height: 1; touch-action: none; user-select: none; -webkit-user-select: none; }
  .mobile-controls button:active, .mobile-controls button[aria-pressed="true"] { background: #527e6acc; border-color: #ffffffaa; transform: translateY(1px); }
}
@media (prefers-reduced-motion: reduce) {
  .walk-hint, .toast { transition: none; }
  .achievement { animation: none; }
}

/* Confirmed botanical card treatment, whole-panel flip, and compact function menu. */
.forest-menu-wrap { position: relative; margin-left: auto; pointer-events: auto; }
.menu-toggle { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #ffffff55; border-radius: 50%; color: #fff; background: #173d37a8; backdrop-filter: blur(8px); font-family: Arial, sans-serif; font-size: 22px; line-height: 1; letter-spacing: 2px; padding: 0 0 0 2px; }
.menu-toggle:hover, .menu-toggle[aria-expanded="true"] { background: #43583ae6; }
.quick-actions { position: absolute; top: 46px; right: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 5px; padding: 9px; border: 1px solid #ffffff40; border-radius: 18px; background: #173d37b8; box-shadow: 0 9px 24px #061e2366; backdrop-filter: blur(16px); }
.panel { perspective: 1100px; padding: 0; overflow: visible; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; }
.panel::before, .panel::after { z-index: 3; }
.panel-tilt { position: absolute; inset: 0; transform-style: preserve-3d; border-radius: 22px; }
.panel-turn { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.panel-face { position: absolute; inset: 0; padding: 30px; overflow: hidden; border: 1px solid #ffffff42; border-radius: 22px; color: var(--ink); background: linear-gradient(135deg, #173d37ad, #0b293299); box-shadow: 0 18px 45px #061e2366, inset 0 1px 0 #ffffff24; backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.panel-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--glare-opacity, 0); background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), #ffffff70, transparent 42%); }
.panel-front { transform: rotateY(0deg); }
.panel-back { transform: rotateY(180deg); display: flex; flex-direction: column; }
#panel-content, .panel-records { position: relative; height: 100%; overflow-y: auto; scrollbar-color: #ffffff66 transparent; scrollbar-width: thin; padding-right: 4px; }
.panel-records { padding-bottom: 12px; }
.panel-records article { padding: 13px 0; border-top: 1px solid #ffffff1f; }
.panel-records h3 { margin: 0 0 6px; font-size: 13px; }
.panel-records h3 small { font-size: 11px; font-weight: 400; }
.panel-records p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.panel-records .record-note { margin-top: 4px; color: #fff; }
.panel-flip { position: absolute; z-index: 5; right: 52px; top: 15px; min-height: 28px; padding: 4px 10px; border: 1px solid #ffffff40; border-radius: 18px; color: #fff; background: #173d37ad; font-size: 10px; backdrop-filter: blur(8px); }
.panel-flip:hover { background: #527e6a99; }
.panel[data-flippable="true"] .panel-tilt { cursor: grab; }
.panel[data-flippable="true"] .panel-tilt:active { cursor: grabbing; }
.panel[data-flippable="true"] { touch-action: pan-y; }
.illustrated-map { width: 100%; aspect-ratio: 1672 / 941; min-height: 150px; background: #173d37; }
.illustrated-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-loading, .map-error { position: absolute; z-index: 1; inset: 50% auto auto 50%; transform: translate(-50%, -50%); margin: 0; padding: 8px 12px; border: 1px solid #ffffff33; border-radius: 16px; background: #173d37df; color: #fff; font-size: 11px; white-space: nowrap; }
.map-error { display: flex; align-items: center; gap: 8px; }
.map-retry { border: 1px solid #ffffff40; border-radius: 12px; padding: 4px 9px; color: #fff; background: #527e6a99; }
.illustrated-map .map-mist, .illustrated-map .map-label, .illustrated-map .map-marker { z-index: 2; }
.quick-actions button, .cottage-actions button, .panel-actions button, .map-retry, .menu-toggle { position: relative; }
.quick-actions::before, .panel-face::before, .game-shell button:not(.close):not(.text-button)::before { content: ''; position: absolute; z-index: 4; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none; opacity: var(--spec-opacity, 0); background: radial-gradient(circle at var(--spec-x, 50%) var(--spec-y, 50%), #fff 0 10px, #ffffff80 25px, transparent 50px); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; transition: opacity .18s; }
.game-shell button:not(.close):not(.text-button):focus-visible::before { opacity: 1; background: linear-gradient(135deg, #fff, #ffffff40 55%, #fff); }
@media (prefers-reduced-motion: reduce) {
  .quick-actions::before, .panel-face::before, .game-shell button::before { transition: none; }
}
@media (max-width: 760px) {
  .quick-actions { width: auto; margin-left: 0; }
  .panel-face { padding: 23px; }
  .panel-flip { top: 12px; right: 46px; }
}
@media (max-width: 500px) {
  .quick-actions { width: auto; }
  .forest-menu-wrap { margin-left: auto; }
  .panel { top: 99px; }
}