:root {
  --paper: #f7f4df; --ink: #304f42; --muted: #72816c;
  --sage: #8fa77c; --stone: #d6cdb5; --wood: #967554; --sky: #c5d9cb;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; background:var(--sky); color:var(--ink); font-family:"PingFang SC",sans-serif; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
body { touch-action:manipulation; }
button { font:inherit; cursor:pointer; touch-action:manipulation; color:inherit; padding:0; }
svg { display:block; width:24px; height:24px; flex-shrink:0; }
button:focus-visible { outline:3px solid #587a8b; outline-offset:3px; }
button:disabled { opacity:.4; cursor:default; }
.game { position:relative; width:100%; height:100%; overflow:hidden; isolation:isolate; }
#world { position:absolute; inset:0; display:block; width:100%; height:100%; touch-action:none; cursor:pointer; }
.game::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:1; box-shadow:inset 0 0 90px #6b805615; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; opacity:.4; }
.intro { position:absolute; z-index:3; top:max(22px,env(safe-area-inset-top)); left:max(26px,env(safe-area-inset-left)); right:max(26px,env(safe-area-inset-right)); display:flex; align-items:flex-start; justify-content:space-between; gap:15px; pointer-events:none; }
.title-card { padding:13px 20px 14px; border:1px solid #fffaf17a; border-radius:4px 16px 5px 13px; background:#f7f4dfd9; box-shadow:0 4px 0 #78906a24,0 10px 30px #53694812; transform:rotate(-1deg); }
h1,.station-guide strong,h2 { font-family:"Kaiti SC","STKaiti","KaiTi",serif; font-weight:700; }
h1 { font-size:clamp(29px,3.1vw,43px); letter-spacing:.06em; line-height:1.1; }
.title-card p { margin-top:6px; font-size:11px; color:#66785f; }
.world-aside { display:grid; justify-items:end; gap:12px; }
.journal-toggle { pointer-events:auto; display:flex; align-items:center; gap:8px; padding:10px 13px; background:#f7f4dfe8; border:1px solid #71826045; border-radius:5px 10px 5px 8px; box-shadow:0 3px 0 #687a5421; font-size:12px; }
.journal-toggle svg { width:20px; height:20px; }
.journal-count { font-size:10px; color:#7a845e; }
.watching { display:flex; align-items:center; gap:7px; color:#4f6c56; font-size:11px; max-width:300px; text-align:right; padding:4px 7px; background:#edf2d860; border-radius:3px; }
.signal-dot { width:5px; height:5px; flex-shrink:0; border-radius:50%; background:#718d61; }
.intro,.control-deck { transition:opacity .22s,transform .3s ease; }
.game.station-open .intro,.game.journey-open .intro { opacity:0; transform:translateY(-15px); visibility:hidden; }
.game.station-open .control-deck,.game.journey-open .control-deck { opacity:0; pointer-events:none; visibility:hidden; transform:translate(-50%,20px); }
.control-deck { position:absolute; z-index:4; left:50%; bottom:max(15px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:16px; width:min(1070px,calc(100% - 32px)); padding:10px 12px; background:#f1eedbf2; border:1px solid #fdfbeabd; border-radius:5px 15px 7px 13px; box-shadow:0 4px 0 #a2a78c,0 13px 28px #41573724; transform:translateX(-50%); }
.scene-picker { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.scene { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; padding:3px; background:transparent; border-radius:4px; transition:transform .15s; }
.scene-picture { width:100%; height:39px; border-radius:4px 6px 3px 5px; opacity:.8; filter:saturate(.82); }
.scene b { font-size:11px; font-weight:500; color:#77826c; }
.scene.active { background:#fffff375; box-shadow:0 0 0 1px #83947780,0 3px 0 #b3b9a1; transform:translateY(-3px) rotate(-1deg); }
.scene.active .scene-picture { opacity:1; filter:none; }
.scene.active b { color:#3e614b; font-weight:650; }
.scene:hover .scene-picture { opacity:1; }
.train-actions { display:flex; align-items:stretch; gap:7px; padding-left:13px; border-left:1px solid #9ca68950; }
.send-train { display:flex; justify-content:center; align-items:center; gap:9px; padding:0 14px; min-width:140px; color:#f7f4df; background:#52775b; border:1px solid #3d614a; border-radius:6px 10px 5px 8px; box-shadow:inset 0 1px #ffffff30,0 3px 0 #35553e; }
.send-train .train-mark { width:32px; height:24px; }
.send-train b,.send-train small { display:block; }
.send-train b { font-size:14px; font-weight:600; }
.send-train small { margin-top:3px; font-size:9px; color:#e0e7cf; }
.round-action { width:49px; min-height:55px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:0; background:#dce2ca66; border-radius:6px; }
.round-action svg { width:23px; height:23px; }
.round-action small { font-size:9px; color:#71816a; }
.round-action:not(.active):not(.needs-tap) { opacity:.5; }
.round-action.needs-tap { color:#947a49; background:#eae2be66; }
button:not(:disabled):active { transform:translateY(2px); }
.station-ui[hidden],.journey-ui[hidden],.garden-tools[hidden] { display:none; }
.station-ui { position:absolute; z-index:6; top:max(15px,env(safe-area-inset-top)); left:max(18px,env(safe-area-inset-left)); right:max(18px,env(safe-area-inset-right)); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; pointer-events:none; }
.station-guide { max-width:min(500px,60vw); padding:10px 14px; border:1px solid #c0c6a7; border-radius:5px 12px 5px 9px; background:#f6f1dceF; box-shadow:0 4px 0 #7a916a25; transform:rotate(-.5deg); }
.station-guide strong { display:block; font-size:clamp(24px,2.8vw,35px); letter-spacing:.06em; line-height:1.1; }
.station-guide span { display:block; margin-top:4px; font-size:11px; line-height:1.5; color:#5e7356; }
.station-tools { display:flex; align-items:center; gap:9px; pointer-events:auto; }
.passenger-count { padding:8px 10px; background:#f7f4dfc9; border-radius:4px; font-size:11px; white-space:nowrap; }
.depart-station { min-height:45px; padding:0 15px; display:flex; align-items:center; justify-content:center; gap:8px; color:#f7f4df; background:#52775b; border:1px solid #426248; border-radius:5px 10px 5px 8px; box-shadow:0 4px 0 #36553e; font-size:13px; font-weight:600; }
.depart-station svg { width:27px; }
.journey-ui { position:absolute; z-index:6; top:max(20px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:10px 15px; border:1px solid #c0c6a7; border-radius:5px 12px 5px 9px; background:#f7f4dfe8; box-shadow:0 4px 0 #7a916a25; white-space:nowrap; font-size:13px; pointer-events:none; }
.journey-ui strong { font-weight:500; }
.garden-tools { position:absolute; z-index:7; bottom:max(14px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; gap:8px; align-items:center; padding:7px 12px; background:#f5efdbeF; border:1px solid #bec5a8; border-radius:5px 12px 5px 9px; box-shadow:0 4px 0 #8d967457,0 10px 30px #445d4320; }
.garden-label { writing-mode:vertical-rl; font-family:"Kaiti SC",serif; font-size:11px; letter-spacing:2px; padding-right:7px; color:#8c9478; border-right:1px solid #b8b99d55; }
.garden-tools button { min-width:48px; min-height:51px; display:grid; justify-items:center; align-content:center; gap:3px; border:0; background:transparent; padding:3px 8px; border-radius:4px; font-size:10px; box-shadow:none; }
.garden-tools button svg { width:26px; height:26px; }
.garden-tools button[aria-pressed=true] { background:#d9e3c3; box-shadow:inset 0 0 0 1px #8caa74; }
.garden-tools i { width:1px; height:28px; background:#bac2a5; }
#stationJournal { position:fixed; margin:auto; width:min(580px,calc(100vw - 32px)); max-height:calc(100dvh - 42px); overflow:auto; padding:26px; border:1px solid #b4b69a; border-radius:7px 14px 9px 6px; color:var(--ink); background:repeating-linear-gradient(0deg,transparent 0 27px,#9aa7820e 28px),#f5f0db; box-shadow:0 24px 100px #1d3c4050; }
#stationJournal::backdrop { background:#26463954; backdrop-filter:blur(3px); }
.journal-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; }
.journal-heading p { font-size:11px; color:#81876b; margin-bottom:7px; }
h2 { font-size:34px; }
#closeJournal { padding:8px; background:transparent; border:0; border-radius:50%; }
.journal-scenes { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:23px; }
.journal-scene { position:relative; padding:6px 6px 8px; border:1px dashed #b2b699; text-align:center; transform:rotate(-1deg); }
.journal-scene:nth-child(even) { transform:rotate(1deg); }
.journal-scene svg { width:100%; height:54px; margin-bottom:4px; opacity:.35; filter:grayscale(1); }
.journal-scene.visited svg { opacity:1; filter:none; }
.journal-scene span { font-size:11px; color:#8f927c; }
.journal-scene.visited span { color:#42654a; }
.journal-entries { display:grid; gap:9px; }
.journal-entry { display:flex; align-items:center; gap:10px; font-size:12px; line-height:1.7; color:#617256; }
.journal-entry svg { width:23px; height:23px; }
.journal-footnote { margin-top:20px; padding-top:13px; border-top:1px solid #c7c6a6; font-size:10px; line-height:1.7; color:#898e75; }
@media(max-width:760px) and (orientation:portrait) {
  .intro { top:16px; left:16px; right:16px; gap:7px; }
  .title-card { padding:12px 13px; }
  h1 { font-size:29px; }
  .title-card p { font-size:9px; }
  .world-aside { gap:9px; }
  .journal-toggle { font-size:10px; padding:8px 10px; }
  .watching { max-width:150px; font-size:9px; }
  .control-deck { width:calc(100% - 22px); bottom:max(11px,env(safe-area-inset-bottom)); grid-template-columns:1fr; gap:9px; padding:9px; }
  .scene-picker { gap:6px; }
  .scene-picture { height:30px; }
  .scene b { font-size:10px; }
  .train-actions { padding-left:0; border-left:0; gap:8px; }
  .send-train { flex:1; min-height:46px; }
  .round-action { width:49px; min-height:46px; gap:2px; }
  .round-action svg { width:20px; height:20px; }
  .station-ui { top:12px; left:12px; right:12px; gap:7px; }
  .station-guide { max-width:calc(100% - 111px); padding:9px 10px; }
  .station-guide strong { font-size:25px; }
  .station-guide span { font-size:9px; }
  .station-tools { flex-direction:column; align-items:flex-end; gap:5px; }
  .passenger-count { font-size:9px; padding:5px 7px; }
  .depart-station { min-height:39px; padding:0 10px; font-size:12px; }
  .depart-station svg { width:21px; }
  .garden-tools { width:max-content; max-width:calc(100% - 22px); gap:5px; padding:5px 9px; }
  .garden-tools button { min-width:44px; padding:3px 6px; }
  .garden-label { padding-right:5px; font-size:10px; }
  #stationJournal { padding:20px; }
}
@media(max-height:520px) and (orientation:landscape) {
  .intro { top:10px; left:15px; right:15px; }
  .title-card { padding:8px 12px; }
  h1 { font-size:25px; }
  .title-card p { font-size:9px; margin-top:3px; }
  .world-aside { gap:5px; }
  .journal-toggle { padding:6px 9px; font-size:10px; }
  .watching { font-size:9px; }
  .control-deck { bottom:8px; padding:6px 9px; gap:9px; width:calc(100% - 24px); }
  .scene-picker { gap:6px; }
  .scene-picture { height:28px; }
  .scene b { font-size:9px; }
  .train-actions { padding-left:9px; }
  .send-train { min-width:113px; padding:0 10px; }
  .send-train b { font-size:12px; }
  .send-train small { display:none; }
  .send-train .train-mark { width:26px; }
  .round-action { width:43px; min-height:44px; gap:3px; }
  .round-action svg { width:19px; height:19px; }
  .station-ui { top:8px; left:12px; right:12px; }
  .station-guide { padding:6px 10px; }
  .station-guide strong { font-size:23px; }
  .station-guide span { font-size:9px; margin-top:2px; }
  .depart-station { min-height:38px; }
  .passenger-count { font-size:10px; }
  .garden-tools { bottom:7px; padding:4px 10px; gap:8px; }
  .garden-tools button { min-height:39px; display:flex; gap:5px; font-size:10px; }
  .garden-tools button svg { width:23px; height:23px; }
  .garden-label { writing-mode:horizontal-tb; letter-spacing:0; padding-right:8px; }
  .journey-ui { top:10px; padding:7px 12px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }