:root {
  color-scheme: light;
  --ink: #173b38;
  --muted: #5f756f;
  --paper: #fffaf0;
  --cream: #f5eddb;
  --leaf: #2f7d5c;
  --leaf-dark: #1d5a49;
  --gold: #e8b953;
  --line: rgba(23, 59, 56, 0.16);
  --shadow: 0 18px 60px rgba(20, 55, 48, 0.2);
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #163f3b;
  color: var(--ink);
  touch-action: none;
  overscroll-behavior: none;
}

button, input { font: inherit; }

button {
  min-height: 44px;
  padding: 0.72rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 0 rgba(23, 59, 56, 0.13);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

button:hover:not(:disabled) { transform: translateY(-1px); background: #fff; }
button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(23, 59, 56, 0.13); }
button:focus-visible { outline: 3px solid #f4c967; outline-offset: 2px; }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { color: white; background: var(--leaf); border-color: var(--leaf-dark); }
button.primary:hover:not(:disabled) { background: var(--leaf-dark); }
button.quiet { background: transparent; box-shadow: none; }

.screen { position: fixed; inset: 0; }
.hidden { display: none !important; }

.title-screen {
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 105%, #f8ce72 0 8%, transparent 8.3%),
    linear-gradient(180deg, #8ed7ce 0 46%, #cce9b1 46% 54%, #669c62 54% 71%, #3e7754 71% 100%);
}

.title-screen::before,
.title-screen::after {
  content: "";
  position: absolute;
  bottom: -8vh;
  width: 72vw;
  height: 38vh;
  border-radius: 50% 50% 0 0;
  background: #315f49;
}
.title-screen::before { left: -22vw; transform: rotate(8deg); }
.title-screen::after { right: -20vw; transform: rotate(-10deg); background: #477d55; }

.title-cloud {
  position: absolute;
  width: 170px;
  height: 50px;
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  filter: blur(.2px);
  animation: cloud-drift 22s linear infinite;
}
.title-cloud::before, .title-cloud::after { content:""; position:absolute; background:inherit; border-radius:50%; }
.title-cloud::before { width:72px; height:72px; left:28px; bottom:0; }
.title-cloud::after { width:98px; height:98px; right:18px; bottom:0; }
.cloud-a { top: 13%; left: -180px; }
.cloud-b { top: 27%; left: -260px; transform: scale(.7); animation-delay: -12s; }
@keyframes cloud-drift { to { left: calc(100vw + 180px); } }

.title-card {
  position: relative;
  z-index: 2;
  width: min(600px, 94vw);
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 36px 36px 80px 36px;
  background: rgba(255, 250, 240, 0.93);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  text-align: center;
}

.eyebrow {
  margin: 0 0 8px;
  color: #b56e35;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

h1 { margin: 0; line-height: 1; }
h1 span { display: block; font-family: serif; font-size: clamp(2.7rem, 8vw, 5rem); letter-spacing: .08em; }
h1 small { display: block; margin-top: .65rem; color: #8d613e; font-size: clamp(.95rem, 3vw, 1.25rem); letter-spacing: .28em; }
.title-copy { margin: 1.5rem auto; color: var(--muted); line-height: 1.9; }
.title-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.title-actions .quiet { grid-column: 1 / -1; }
.save-summary { min-height: 1.3em; margin: 1rem 0 0; color: var(--muted); font-size: .82rem; }
.original-note { position: absolute; z-index: 3; bottom: max(12px, env(safe-area-inset-bottom)); color: rgba(255,255,255,.8); font-size: .72rem; }

.game-screen { display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: #dfeacb; }
.status-bar {
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 68px;
  padding: 8px 12px;
  color: #effff8;
  background: #173f3a;
  box-shadow: 0 5px 20px rgba(15,50,44,.25);
}
.status-bar span { display: block; color: #add2c1; font-size: .68rem; letter-spacing: .05em; }
.status-bar strong { display: block; margin-top: 2px; font-size: .98rem; }
.scene-block { text-align: center; }
.scene-block strong { color: #ffdc83; font-family: serif; font-size: 1.2rem; }
.icon-button { width: 46px; padding: 0; color: white; background: rgba(255,255,255,.08); box-shadow: none; }

.play-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; min-height: 0; flex: 1; }
.canvas-shell { position: relative; display: grid; place-items: center; min-width: 0; overflow: hidden; background: #a4c77e; }
#game-canvas { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }

.context-prompt {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  max-width: 84%;
  padding: 8px 15px;
  border-radius: 999px;
  color: #fffdf4;
  background: rgba(20, 50, 44, .82);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font-size: .78rem;
  text-align: center;
  pointer-events: none;
}

.toast {
  position: absolute;
  top: 18px;
  left: 50%;
  width: min(620px, 88%);
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 16px;
  color: var(--ink);
  background: rgba(255, 250, 240, .96);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, -12px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  font-weight: 650;
  line-height: 1.55;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.quest-panel { overflow-y: auto; padding: 12px; background: #f8f2e4; border-left: 1px solid var(--line); }
.panel-heading { display:flex; align-items:center; justify-content:space-between; padding: 8px 4px 12px; }
.panel-heading span { font-family: serif; font-weight: 800; }
.panel-heading strong { padding: 4px 9px; border-radius: 99px; color: white; background: var(--leaf); font-size: .78rem; }
.quest-card { margin-bottom: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 3px 0 rgba(23,59,56,.07); }
.quest-card.done { background: #e9f4df; }
.quest-title { display:flex; align-items:center; justify-content:space-between; gap:6px; font-weight:800; font-size:.82rem; }
.quest-dot { width:10px; height:10px; flex:none; border-radius:50%; }
.quest-card p { margin:7px 0 0; color:var(--muted); font-size:.72rem; line-height:1.45; }
.trust-pips { display:flex; gap:3px; }
.trust-pips i { width:16px; height:5px; border-radius:99px; background:#d8ddd6; }
.trust-pips i.on { background:#e6af45; }
.bag-panel { margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); }
.bag-panel > span { font-size:.72rem; font-weight:800; color:var(--muted); }
#bag-list { display:grid; gap:5px; margin-top:7px; font-size:.72rem; }
.bag-row { display:flex; justify-content:space-between; gap:8px; }
.bag-row em { color:var(--muted); font-style:normal; }

.tool-bar {
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(5, minmax(74px, 1fr));
  gap: 7px;
  padding: 8px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: #173f3a;
}
.tool-bar button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; padding:7px; color:#eaf9f1; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); box-shadow:none; }
.tool-bar button.active { color:#173f3a; background:#ffda80; }
kbd { display:grid; place-items:center; width:22px; height:22px; border:1px solid currentColor; border-radius:7px; font:700 .7rem system-ui; opacity:.7; }

.touch-controls { display:none; pointer-events:none; }

dialog {
  width: min(520px, calc(100vw - 32px));
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 26px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(11,35,31,.58); backdrop-filter: blur(4px); }
dialog form { margin:0; }
dialog h2 { margin:0 0 12px; font-family:serif; }
.dialog-box p { white-space:pre-line; line-height:1.8; }
.dialog-box button { width:100%; margin-top:8px; }
.menu-heading { display:flex; align-items:flex-start; justify-content:space-between; }
.menu-heading h2 { margin-top:0; }
.menu-heading > button { width:44px; padding:0; box-shadow:none; }
.menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.menu-grid .quiet { grid-column:1/-1; }
.menu-status { min-height:1.4em; color:var(--muted); font-size:.78rem; }
.guide-dialog ol { display:grid; gap:12px; padding-left:1.4rem; }
.guide-dialog li { padding-left:.3rem; }
.guide-dialog li strong, .guide-dialog li span { display:block; }
.guide-dialog li span, .guide-dialog p { margin-top:3px; color:var(--muted); font-size:.83rem; line-height:1.6; }
.guide-dialog button { width:100%; }

.festival-screen {
  display:grid;
  place-items:center;
  padding:24px;
  overflow:auto;
  background:
    radial-gradient(circle at 50% 110%, #f9ae57 0 10%, transparent 26%),
    linear-gradient(#16294a 0%, #3b4161 55%, #8b5a55 100%);
}
.lanterns { position:absolute; inset:0; background-image:radial-gradient(circle, #ffd783 0 4px, transparent 5px); background-size:90px 70px; opacity:.55; animation:lantern-glow 2.5s ease-in-out infinite alternate; }
@keyframes lantern-glow { to { opacity:.85; filter:brightness(1.15); } }
.festival-card { position:relative; z-index:2; width:min(620px, 94vw); padding:clamp(24px,5vw,48px); border-radius:34px; background:rgba(255,250,240,.96); box-shadow:0 24px 80px rgba(0,0,0,.35); text-align:center; }
.festival-card h2 { margin:.1rem 0 1.2rem; font-family:serif; font-size:clamp(2rem,7vw,3.7rem); }
.festival-seals { display:flex; justify-content:center; gap:12px; margin-bottom:18px; }
.festival-seal { display:grid; place-items:center; width:62px; aspect-ratio:1; border-radius:50%; color:white; background:#87908b; box-shadow:inset 0 0 0 5px rgba(255,255,255,.25); font-size:1.6rem; filter:grayscale(1); opacity:.5; }
.festival-seal.on { filter:none; opacity:1; }
.festival-message { min-height:4em; line-height:1.9; }
.festival-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:20px 0; }
.festival-stats div { padding:12px 6px; border-radius:14px; background:#f2e8d4; }
.festival-stats dt { color:var(--muted); font-size:.68rem; }
.festival-stats dd { margin:5px 0 0; font-weight:800; }

@media (max-width: 800px) {
  .status-bar { grid-template-columns: .85fr 1.2fr .85fr auto; min-height:58px; padding:5px 8px; }
  .status-bar .stat:nth-of-type(4) { display:none; }
  .status-bar span { font-size:.58rem; }
  .status-bar strong { font-size:.82rem; }
  .scene-block strong { font-size:1rem; }
  .play-layout { grid-template-columns:1fr; }
  .quest-panel { position:absolute; z-index:2; top:63px; right:6px; width:170px; max-height:32vh; padding:7px; border:0; border-radius:0 0 0 16px; background:rgba(255,250,240,.92); box-shadow:0 8px 24px rgba(20,50,44,.16); }
  .quest-card { padding:7px; margin-bottom:5px; }
  .quest-card p, .bag-panel { display:none; }
  .panel-heading { padding:3px 2px 6px; }
  .tool-bar { grid-template-columns:repeat(5,1fr); gap:4px; padding:5px; }
  .tool-bar button { min-width:0; min-height:43px; font-size:.66rem; flex-direction:column; gap:2px; }
  .tool-bar kbd { display:none; }
  .touch-controls { position:absolute; z-index:5; inset:58px 0 51px; display:block; pointer-events:none; }
  .dpad { position:absolute; left:max(12px, env(safe-area-inset-left)); bottom:14px; display:grid; grid-template-columns:repeat(3,52px); grid-template-rows:repeat(3,52px); gap:3px; pointer-events:auto; }
  .dpad button { min-height:0; padding:0; color:white; background:rgba(23,63,58,.67); border-color:rgba(255,255,255,.35); box-shadow:none; backdrop-filter:blur(4px); touch-action:none; }
  .dpad button[data-dir="up"] { grid-column:2; grid-row:1; }
  .dpad button[data-dir="left"] { grid-column:1; grid-row:2; }
  .dpad button[data-dir="right"] { grid-column:3; grid-row:2; }
  .dpad button[data-dir="down"] { grid-column:2; grid-row:3; }
  .touch-action { position:absolute; right:max(18px, env(safe-area-inset-right)); bottom:35px; width:86px; height:86px; padding:0; border-radius:50%; color:#173f3a; background:rgba(255,218,128,.9); border:4px solid rgba(255,255,255,.55); box-shadow:0 6px 0 rgba(23,59,56,.3); pointer-events:auto; touch-action:none; font-size:.75rem; font-weight:800; }
  .context-prompt { bottom:12px; font-size:.68rem; }
  .toast { top:8px; font-size:.78rem; }
}

@media (max-width: 480px) {
  .title-screen { padding:12px; }
  .title-card { padding:24px 18px; border-radius:28px 28px 58px 28px; }
  .title-copy { font-size:.84rem; }
  .title-actions { grid-template-columns:1fr; }
  .title-actions .quiet { grid-column:auto; }
  .quest-panel { width:145px; }
  .quest-title { font-size:.69rem; }
  .trust-pips { display:none; }
  .festival-stats { grid-template-columns:1fr; }
  .festival-stats div { display:flex; justify-content:space-between; align-items:center; }
  .menu-grid { grid-template-columns:1fr; }
  .menu-grid .quiet { grid-column:auto; }
}

@media (orientation: landscape) and (max-height: 540px) {
  .status-bar { min-height:48px; }
  .quest-panel { top:52px; max-height:45vh; }
  .tool-bar button { min-height:38px; }
  .touch-controls { inset:48px 0 43px; }
  .dpad { grid-template-columns:repeat(3,44px); grid-template-rows:repeat(3,44px); bottom:4px; }
  .touch-action { width:74px; height:74px; bottom:12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior:auto !important; }
}

#dev-panel {
  position: fixed;
  z-index: 99;
  left: 8px;
  bottom: 8px;
  width: min(340px, calc(100vw - 16px));
  max-height: 82vh;
  overflow: auto;
  padding: 7px;
  border-radius: 12px;
  color: #d8ffe3;
  background: rgba(5, 22, 19, .92);
  font: 11px/1.35 ui-monospace, monospace;
}
#dev-panel summary { cursor: pointer; font-weight: 800; }
#dev-panel:not([open]) { width: auto; }
.dev-actions { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:6px 0; }
.dev-actions button { min-height:30px; padding:4px; border-radius:7px; box-shadow:none; font-size:10px; }
#dev-state { margin:6px 0 0; white-space:pre-wrap; }