:root {
  color: #34231d;
  background: #f7e8d0;
  font-family: "Noto Serif SC", "Songti SC", Georgia, serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input { font: inherit; }
button { border: 0; border-radius: 999px; padding: 0.8rem 1.2rem; background: rgba(255,255,255,0.72); color: #55362c; box-shadow: 0 10px 30px rgba(91, 55, 35, 0.12); cursor: pointer; transition: transform .2s ease, background .2s ease; }
button:hover:not(:disabled) { transform: translateY(-2px); background: #fff9f0; }
button:disabled { cursor: not-allowed; opacity: .45; }
input { width: 100%; margin-top: .5rem; border: 1px solid rgba(91,55,35,.2); border-radius: 18px; padding: .85rem 1rem; color: #3b2923; background: rgba(255,255,255,.78); }

.app-shell { position: relative; min-height: 100vh; padding: 2rem; overflow: hidden; background: radial-gradient(circle at 20% 0%, rgba(255, 203, 132, .9), transparent 32rem), linear-gradient(140deg, #f9dfba 0%, #f6ead9 45%, #bed4cf 100%); }
.app-shell::before { content: ""; position: fixed; inset: auto -5vw -18vh -5vw; height: 42vh; background: linear-gradient(180deg, rgba(83, 150, 165, 0), rgba(83, 150, 165, .45)), repeating-linear-gradient(165deg, rgba(255,255,255,.18) 0 2px, transparent 2px 36px); border-radius: 50% 50% 0 0; pointer-events: none; }
.sun-haze { position: fixed; right: 8vw; top: 10vh; width: 22rem; height: 22rem; border-radius: 50%; background: rgba(255, 184, 106, .22); filter: blur(8px); pointer-events: none; }
.top-nav { position: relative; z-index: 2; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.card, .visual-novel { position: relative; z-index: 1; width: min(920px, 100%); margin: 0 auto; border: 1px solid rgba(255,255,255,.55); border-radius: 36px; padding: clamp(1.5rem, 4vw, 3rem); background: rgba(255, 248, 237, .76); box-shadow: 0 24px 80px rgba(78, 48, 32, .16); backdrop-filter: blur(18px); }
.card.wide { width: min(1120px, 100%); }
.hero { min-height: 68vh; display: grid; align-content: center; background-image: linear-gradient(rgba(255,248,237,.62), rgba(255,248,237,.82)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='500'%3E%3Cpath fill='%23d99b65' opacity='.22' d='M0 360 Q220 300 430 360 T900 350 V500 H0z'/%3E%3Ccircle cx='690' cy='140' r='72' fill='%23eea85f' opacity='.35'/%3E%3Cpath stroke='%237aa4a6' stroke-width='4' opacity='.22' fill='none' d='M80 290 C200 250 260 250 380 290 S560 330 700 280 820 250 900 278'/%3E%3C/svg%3E"); background-size: cover; }
.eyebrow { color: #9f6342; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1 { max-width: 8em; margin: .2rem 0 1rem; font-size: clamp(4rem, 13vw, 8.5rem); line-height: .9; color: #59382e; text-shadow: 0 12px 32px rgba(98,62,40,.16); }
h2 { margin: .2rem 0 1rem; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; color: #59382e; }
h3 { color: #6f4535; }
.lead, .hero p:not(.eyebrow) { max-width: 780px; font-size: 1.15rem; line-height: 1.9; }
.button-row, .section-title { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }
.primary { background: #a95e45; color: #fff8ed; }
.danger { background: #7b3838; color: white; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.option-grid, .map-grid, .memory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.option-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option-card { border-radius: 28px; min-height: 11rem; padding: 1.1rem; text-align: left; display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.option-card span { font-weight: 800; }
.option-card small { line-height: 1.6; }
.option-card em { margin-top: auto; color: #9f6342; }
.selected { outline: 3px solid rgba(169, 94, 69, .48); background: #fff8ed; }
.stats { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.stats > div, .map-grid section, .memory-grid article { border: 1px solid rgba(111,69,53,.12); border-radius: 28px; padding: 1rem; background: rgba(255,255,255,.45); }
.stats p { display: flex; justify-content: space-between; gap: 1rem; margin: .45rem 0; }
.action-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.action-list button { border-radius: 24px; text-align: left; display: grid; gap: .45rem; }
.action-list span, .map-grid p, .memory-grid p { color: #75594f; line-height: 1.6; }
.ending-note { padding: 1rem 1.2rem; border-radius: 22px; background: rgba(169,94,69,.12); }
.visual-novel { display: grid; grid-template-columns: .8fr 1.4fr; min-height: 70vh; align-items: end; background: linear-gradient(180deg, rgba(53,81,91,.22), rgba(255,248,237,.82)), radial-gradient(circle at 70% 10%, rgba(255,204,126,.62), transparent 24rem); }
.visual-novel aside { align-self: stretch; display: grid; align-content: center; border-radius: 28px; padding: 1.5rem; color: #fff8ed; background: linear-gradient(160deg, rgba(89,56,46,.62), rgba(53,81,91,.46)); }
.visual-novel aside h2 { color: #fff8ed; }
.dialogue-box { border-radius: 30px; padding: 1.4rem; background: rgba(255, 250, 244, .9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.dialogue-box p { line-height: 1.9; }
.speaker { display: inline-block; margin: 0 0 .5rem; border-radius: 999px; padding: .4rem .9rem; color: white; background: #a95e45; font-weight: 800; }
.choice-list { display: grid; gap: .7rem; margin-top: 1rem; }
.choice-list button { border-radius: 20px; text-align: left; }

@media (max-width: 820px) {
  .app-shell { padding: 1rem; }
  .form-grid, .option-grid, .option-grid.three, .stats, .action-list, .map-grid, .memory-grid, .visual-novel { grid-template-columns: 1fr; }
  h1 { font-size: 4rem; }
}
.toast { position: fixed; z-index: 5; right: 1.5rem; top: 1.5rem; max-width: min(34rem, calc(100vw - 3rem)); border: 1px solid rgba(255,255,255,.65); border-radius: 22px; padding: .9rem 1.1rem; color: #fff8ed; background: rgba(89, 56, 46, .82); box-shadow: 0 16px 48px rgba(78, 48, 32, .22); backdrop-filter: blur(16px); }
.agenda { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin: 1.3rem 0; border: 1px solid rgba(169,94,69,.18); border-radius: 28px; padding: 1rem 1.2rem; background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,223,181,.46)); }
.agenda span { color: #9f6342; font-weight: 800; letter-spacing: .12em; }
.agenda h3, .agenda p { margin: .35rem 0; }
.log-panel { margin-top: 1.2rem; border-radius: 26px; padding: 1rem 1.2rem; background: rgba(255,255,255,.38); }
.log-panel p { margin: .5rem 0; color: #75594f; line-height: 1.6; }

@media (max-width: 820px) {
  .toast { position: relative; inset: auto; margin: 0 auto 1rem; }
  .agenda { align-items: stretch; flex-direction: column; }
}