:root { --ink: #234a3d; --paper: #f4f1df; --muted: #708376; --line: #284a3d25; --leaf: #d1e79e; --shadow: 0 20px 70px #142f3026; font-family: "Avenir Next", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif; color: var(--ink); }
#storyEvent { width: min(900px, 94vw); max-height: 88dvh; padding: 26px 32px; background: linear-gradient(115deg, #143d36f7, #285445f7); color: #f6f3dc; border: 1px solid #b8cc91; box-shadow: 0 0 0 7px #153d3540, 0 25px 90px #0d292ccc; }
#storyEvent::backdrop { background: linear-gradient(#0b28283b 50%, #0b2828a8); }
#storyEvent { margin: auto auto max(12px, env(safe-area-inset-bottom)); width: min(940px, 96vw); }
body[data-cinematic] .topbar, body[data-cinematic] .play-hud, body[data-cinematic] .boss-hud, body[data-cinematic] .hint-button, body[data-cinematic] .record-notice { visibility: hidden; }
body[data-cinematic="depart"] #map { top: 10px; bottom: 49%; padding: 12px; }
body[data-cinematic="depart"] #map .sheet-head, body[data-cinematic="depart"] .region-tabs, body[data-cinematic="depart"] .map-footer { display: none; }
body[data-cinematic="depart"] .map-region-label { display: none; }
body[data-cinematic="depart"] .map-scroll, body[data-cinematic="depart"] .stage-map { min-height: 0; }
.map-green { position: absolute; z-index: 4; width: 38px; height: 44px; margin: -74px 0 0 -19px; border-radius: 10px; background: #6db76a; border: 2px solid #24523d; box-shadow: 0 6px 12px #173e3540; pointer-events: none; }
.map-green-face { position: absolute; inset: 4px -5px 16px; background: #244d40; border: 4px solid #c4e595; border-radius: 10px; }
.map-green-face::after { content: ""; position: absolute; width: 5px; height: 6px; left: 7px; top: 4px; background: #f0ffca; box-shadow: 14px 0 #f0ffca; border-radius: 2px; }
.map-green i { position: absolute; bottom: -7px; width: 12px; height: 10px; background: #234e3c; border-radius: 4px; left: 1px; }.map-green i:last-child { left: 21px; }
@media (prefers-reduced-motion: no-preference) { .map-green { animation: map-arrive 1.5s ease-out both; }.map-green i { animation: map-step .2s alternate 8; }.map-green i:last-child { animation-delay: .1s; }@keyframes map-arrive { from { transform: translateX(-85px); }to { transform: translateX(0); } }@keyframes map-step { to { transform: translateY(-4px); } } }
@media (max-height: 540px) { #storyEvent { padding: 9px 20px; max-height: 49dvh; }.story-top .small-button { padding: 5px 12px; }#storyEvent h2 { display: none; }#storyEvent .story-dialogue { min-height: 0; gap: 15px; }#storyEvent #storyPortrait { height: 55px; flex-basis: 58px; }#storyEvent #storyPortrait span { transform: scale(.65); }#storyEvent #storyText { font-size: 15px; line-height: 1.5; margin: 5px 0; }#storyEvent footer { padding-top: 5px; margin-top: 5px; }#storyEvent .primary { padding: 7px 16px; } }
@media (max-width: 500px) { #storyEvent { max-height: 49dvh; }body[data-cinematic="depart"] .map-region-label { top: 10px; padding: 6px 12px; }.map-green { margin-top: -75px; } }
#storyEvent .primary { background: #d6e8a7; color: #203f34; box-shadow: 0 4px 0 #718b58; }
.story-top, #storyEvent footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.story-top > span { font-size: 10px; letter-spacing: .2em; color: #c0d5a7; }
#storyEvent h2 { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 26px; padding-bottom: 18px; border-bottom: 1px solid #a9c29055; margin: 12px 0 20px; letter-spacing: .06em; }
.story-dialogue { display: flex; align-items: center; gap: 25px; min-height: 150px; }
.story-copy { flex: 1; min-width: 0; }#storySpeaker { color: #d6eea6; font-size: 13px; letter-spacing: .12em; }
#storyText { font-size: clamp(17px, 2.1vw, 22px); line-height: 1.9; margin: 10px 0 20px; }
#storyPortrait { flex: 0 0 94px; height: 105px; border: 2px solid #8cac87; border-radius: 25px; background: radial-gradient(ellipse, #406e58, #173e35); display: grid; place-items: center; }
#storyPortrait span { width: 65px; height: 53px; background: #a7cc79; border-radius: 16px; border-bottom: 7px solid #6c9159; position: relative; box-shadow: 0 7px 0 #112f2b; }
#storyPortrait span::before { content: ""; position: absolute; inset: 12px 8px; border-radius: 7px; background: #173b36; }
#storyPortrait span::after { content: ""; position: absolute; width: 7px; height: 9px; background: #d6ffb7; left: 20px; top: 18px; box-shadow: 19px 0 #d6ffb7; border-radius: 3px; }
#storyEvent[data-speaker="narrator"] #storyPortrait { display: none; }
#storyEvent footer { border-top: 1px solid #a9c29055; padding-top: 16px; }#storyPage { font-size: 11px; color: #bccfab; }
@media (max-height: 540px) { #storyEvent { padding: 14px 24px; }#storyEvent h2 { font-size: 20px; margin: 6px 0 12px; padding-bottom: 10px; }.story-dialogue { min-height: 100px; }#storyText { font-size: 17px; margin: 6px 0 12px; line-height: 1.7; }#storyEvent footer { padding-top: 10px; }#storyEvent .primary { padding: 10px 20px; } }
@media (max-width: 500px) { #storyEvent { padding: 20px; }.story-dialogue { align-items: flex-start; gap: 14px; }#storyPortrait { flex-basis: 58px; height: 72px; }#storyPortrait span { transform: scale(.7); }#storyEvent h2 { font-size: 22px; }#storyEvent footer { flex-wrap: wrap; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
#roomButton { position: fixed; z-index: 8; bottom: max(110px, calc(env(safe-area-inset-bottom) + 95px)); left: 50%; transform: translateX(-50%); padding: 12px 20px; background: #e6efb7; color: #244a3b; border: 2px solid #72985e; white-space: nowrap; }
.small-button.danger-button { color: #913e32; border-color: #b8756455; background: #f9e8dc; }
#deleteSaveButton { margin-top: 24px; }
#deleteSaveDialog h2 { font-size: 24px; }
#deleteSaveDescription { font-size: 14px; line-height: 1.9; }
#deleteSaveDescription strong { display: block; color: #913e32; margin-top: 10px; }
#deleteSaveError { color: #913e32; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #224e40; }
body { overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button { font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .48; cursor: not-allowed; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid #c59036; outline-offset: 4px; }
button:hover:not(:disabled) { filter: brightness(1.05); }
#gameCanvas { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; }
.topbar { position: fixed; z-index: 10; top: max(20px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); right: max(24px, env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; gap: 20px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.wordmark { font-size: 13px; font-weight: 800; letter-spacing: .16em; }
.wordmark small { font-size: 9px; display: block; letter-spacing: .25em; margin-top: 6px; text-align: center; }
body[data-screen="play"] .wordmark { background: #f4f1dfdf; border-radius: 12px; padding: 10px 16px; }
.wallet { background: var(--paper); border-radius: 40px; padding: 12px 20px; box-shadow: 0 4px 16px #1a463312; font-variant-numeric: tabular-nums; }
.wallet > span { color: #b38a37; margin-right: 8px; }
.small-button, .primary { border: 1px solid var(--line); border-radius: 14px; padding: 13px 20px; font-weight: 700; background: var(--paper); color: var(--ink); }
.primary { background: var(--ink); color: #f3f4d7; box-shadow: 0 5px 0 #17372c; border: 0; padding: 17px 25px; }
.primary:active { transform: translateY(2px); box-shadow: 0 3px 0 #17372c; }
.screen { position: fixed; z-index: 2; }
.title-screen { inset: 0; overflow: auto; padding: 120px 8vw 50px; background: linear-gradient(90deg, #f4f1dfef, #f4f1dfce 33%, #f4f1df00 64%); }
.title-copy { width: min(470px, 48vw); }
.eyebrow { font-size: 10px; letter-spacing: .22em; font-weight: 800; margin: 0 0 20px; color: var(--muted); }
h1 { font-size: clamp(42px, 5.5vw, 84px); letter-spacing: -.06em; line-height: 1.17; margin: 0 0 25px; font-weight: 900; }
h1 span { color: #4c7950; }
.lead { line-height: 1.9; font-size: 18px; }
.title-facts { display: flex; gap: 20px; padding: 22px 0; font-size: 12px; border-top: 1px solid var(--line); margin-top: 26px; }
.start-area { display: grid; gap: 13px; text-align: center; max-width: 370px; }
#startButton { min-height: 60px; width: 100%; font-size: 18px; display: flex; justify-content: space-between; align-items: center; }
#version { font-size: 11px; color: #56715c; }
.title-hint { font-size: 11px; line-height: 1.8; opacity: .75; margin-top: 24px; }
.scene-caption { position: absolute; right: 8vw; bottom: 8vh; display: grid; gap: 9px; text-align: right; color: #f8f5df; text-shadow: 0 2px 6px #244e4044; }
.scene-caption span { font-size: 10px; letter-spacing: .17em; }.scene-caption strong { font-size: 24px; }.scene-caption small { font-size: 11px; }
.sheet { top: 92px; bottom: 30px; left: 5vw; right: 5vw; background: var(--paper); border: 1px solid #fff9; border-radius: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; padding: 30px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-shrink: 0; }
h2 { font-size: 30px; margin: 0; letter-spacing: -.04em; }.sheet-head p:not(.eyebrow) { color: var(--muted); font-size: 12px; margin: 10px 0 0; }.sheet-head .eyebrow { margin-bottom: 8px; }
.region-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 24px 0 16px; flex-shrink: 0; scrollbar-width: thin; }
.region-tabs button { flex-shrink: 0; background: transparent; border: 1px solid var(--line); border-radius: 40px; padding: 9px 15px; font-size: 12px; color: var(--ink); }.region-tabs button.active { background: var(--ink); color: var(--paper); }
.map-scroll { flex: 1; min-height: 200px; overflow: auto; border-radius: 18px; border: 1px solid var(--line); background: #dce6c7; touch-action: pan-x pan-y; scrollbar-color: #6d9273 #d6dec2; scrollbar-width: thin; }
.stage-map { display: flex; height: 100%; min-height: 330px; width: max-content; }
.map-region { position: relative; width: 1120px; flex-shrink: 0; overflow: hidden; background: linear-gradient(160deg, var(--sky), var(--light)); border-right: 2px solid #fff7; }
.map-region::before { content: ""; position: absolute; width: 900px; height: 400px; background: var(--far); border-radius: 50%; opacity: .3; top: 120px; left: 220px; box-shadow: -550px 130px 0 var(--near); }
.map-region-label { position: absolute; left: 30px; top: 25px; display: grid; gap: 7px; color: var(--ink); }.map-region-label b { font-size: 20px; }.map-region-label small { font-size: 10px; letter-spacing: .13em; }
.map-region-label { background: #f4f1dfdc; padding: 12px 16px; border-radius: 12px; }
.stage-node strong, .stage-node small { background: #f4f1dfed; border-radius: 5px; padding: 3px; }
.map-route { position: absolute; width: 100%; height: 100%; pointer-events: none; }
.stage-node { position: absolute; transform: translate(-50%, -50%); width: 130px; text-align: center; border: 0; background: none; color: var(--ink); padding: 0; }
.stage-node .node-circle { display: grid; place-items: center; width: 59px; height: 59px; border-radius: 50%; margin: 0 auto 10px; background: #faf5df; border: 3px solid #fff; box-shadow: 0 5px 0 #42644535; font-size: 20px; font-weight: 900; }
.stage-node strong { display: block; font-size: 12px; margin-bottom: 3px; }.stage-node small { font-size: 10px; }
.stage-node.boss .node-circle { border-radius: 18px; transform: rotate(-7deg); background: #ecd493; color: #6b4c22; }
.stage-node.cleared .node-circle { background: #3c7754; color: #effbd8; }.stage-node:disabled { opacity: .65; }.stage-node:disabled .node-circle { background: #98a899; color: #f4f5de; border-color: #bdc8af; }
.map-footer { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); padding-top: 18px; gap: 12px; }
.shop-scroll { overflow: auto; min-height: 0; margin-top: 24px; background: #e6eadb; border-radius: 18px; border: 1px solid var(--line); padding: 22px; touch-action: pan-y; scrollbar-color: #6d9273 #d6dec2; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }.shop-card { padding: 20px; border-radius: 16px; background: #fffcf0; }.shop-card h4 { font-size: 18px; margin: 10px 0; }.shop-card p { font-size: 12px; line-height: 1.7; color: var(--muted); }.shop-card button { width: 100%; }.upgrade-level { letter-spacing: 5px; color: #67995f; }.shop-number { font-size: 11px; letter-spacing: .18em; color: #87957b; }
.result-screen { inset: 0; display: grid; place-items: center; background: #1c423a55; padding: 80px 20px 20px; overflow: auto; }.result-card { padding: 44px; background: var(--paper); box-shadow: var(--shadow); border-radius: 28px; text-align: center; max-width: 580px; width: 100%; }.result-card h2 { font-size: 38px; }.result-card p { line-height: 1.9; }.result-reward { font-size: 28px; color: #6e8a41; padding: 15px; }.result-actions { display: flex; gap: 16px; justify-content: center; }.ending-medal { font-size: 50px; color: #869944; font-weight: 800; margin: 20px; }
#ending { justify-items: start; padding-left: 7vw; background: linear-gradient(90deg, #254e4055, transparent); }
.ending-card { width: min(510px, 46vw); background: #f4f1dfe8; }
.ending-medal { font-size: clamp(20px, 3vw, 38px); letter-spacing: .08em; }
#menuStatus { color: #416e46; padding: 10px; background: #dce7c1; border-radius: 10px; }
.play-hud { position: fixed; z-index: 1; left: max(24px, env(safe-area-inset-left)); top: 88px; display: grid; gap: 6px; background: #f4f1dfdf; border-radius: 16px; padding: 14px 18px; pointer-events: none; font-size: 12px; }#hearts { color: #b45d50; font-size: 18px; letter-spacing: 3px; }#leafStatus { font-size: 10px; }
.boss-hud { position: fixed; z-index: 1; top: 86px; left: 35%; right: 5%; padding: 12px 18px; background: #f4f1dfe8; border-radius: 14px; }.boss-hud div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }.boss-hud span { font-size: 10px; }progress { width: 100%; height: 10px; accent-color: #b27648; }
.toast { position: fixed; z-index: 15; left: 50%; bottom: 27px; transform: translateX(-50%); background: #244e40ed; color: #fff8df; border-radius: 12px; padding: 12px 20px; max-width: min(90vw, 620px); font-size: 13px; text-align: center; pointer-events: none; }
.rotate-hint { position: fixed; z-index: 16; top: 76px; left: 50%; transform: translateX(-50%); background: #f4f1df; font-size: 11px; border-radius: 30px; padding: 9px 14px; pointer-events: none; white-space: nowrap; }
.touch-controls { position: fixed; z-index: 5; bottom: max(16px, env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); display: flex; justify-content: space-between; pointer-events: none; }
.touch-left, .touch-right { display: flex; gap: 10px; align-items: flex-end; }.touch-controls button { width: clamp(52px, 9vw, 76px); height: clamp(52px, 9vw, 76px); padding: 0; border: 0; border-radius: 50%; background: transparent; pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; box-shadow: 0 3px 15px #1a342e25; }.touch-controls button.held { transform: scale(.91); filter: brightness(1.2); }.touch-controls img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
dialog { border: 1px solid #fff8; border-radius: 24px; background: var(--paper); color: var(--ink); width: min(400px, 92vw); max-height: 85dvh; padding: 26px; overflow: auto; box-shadow: var(--shadow); }dialog::backdrop { background: #173d34aa; }dialog > button { width: 100%; margin: 5px 0; }dialog p, dialog small { font-size: 12px; line-height: 1.7; }.menu-head { display: flex; justify-content: space-between; align-items: center; }.instructions { color: var(--muted); }hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
dialog details { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }dialog summary { cursor: pointer; font-weight: 800; }.menu-link { display: block; color: var(--ink); font-size: 12px; font-weight: 800; margin-top: 10px; }
@media (pointer: fine) and (min-width: 1100px) { .touch-controls { display: none; } }
@media (max-width: 700px) { .wordmark { display: none; }.topbar { left: 16px; right: 16px; top: max(12px, env(safe-area-inset-top)); }.title-screen { padding: 100px 7vw 30px; background: linear-gradient(90deg, #f4f1dff2, #f4f1dfbb 70%, #f4f1df44); }.title-copy { width: min(470px, 100%); }h1 { font-size: 52px; }.scene-caption { display: none; }.sheet { left: 10px; right: 10px; top: 75px; bottom: 12px; padding: 18px; }.sheet-head h2 { font-size: 24px; }.sheet-head .primary, .sheet-head .small-button { padding: 12px; white-space: nowrap; }.sheet-head .eyebrow { font-size: 8px; }.map-footer { font-size: 9px; }.result-card { padding: 26px; }.result-card h2 { font-size: 29px; }.shop-scroll { padding: 12px; }.boss-hud { top: 158px; left: 16px; right: 16px; }.boss-hud span { display: none; }.toast { bottom: 100px; width: 85%; } }
@media (max-height: 540px) and (orientation: landscape) { .topbar { top: max(10px, env(safe-area-inset-top)); }.small-button { padding: 9px 14px; }.wallet { padding: 9px 16px; }.title-screen { padding: 72px 7vw 25px; }.title-copy { width: 46%; }h1 { font-size: 42px; margin-bottom: 12px; }.lead { font-size: 13px; line-height: 1.6; margin: 10px 0; }.eyebrow { font-size: 8px; margin-bottom: 10px; }.title-facts { margin-top: 12px; padding: 12px 0; gap: 12px; font-size: 10px; }.title-hint { display: none; }#startButton { min-height: 46px; padding: 12px 18px; font-size: 15px; }.start-area { gap: 8px; }.sheet { top: 65px; bottom: 10px; padding: 18px; }.sheet-head h2 { font-size: 24px; }.sheet-head p:not(.eyebrow) { display: none; }.region-tabs { padding: 12px 0 10px; }.map-scroll { min-height: 100px; }.stage-map { min-height: 300px; }.map-footer { padding-top: 8px; }.play-hud { top: 62px; font-size: 10px; padding: 9px 13px; }#hearts { font-size: 14px; }.boss-hud { top: 62px; }.boss-hud span { display: none; }.toast { bottom: 98px; padding: 8px 14px; font-size: 11px; }.result-screen { padding-top: 65px; }.result-card { padding: 22px; }.result-card h2 { font-size: 26px; }.result-card p { margin: 8px; font-size: 12px; }.ending-medal { font-size: 28px; margin: 8px; } }
@media (prefers-reduced-motion: no-preference) { .title-copy { animation: arrive .7s ease-out both; }.scene-caption { animation: arrive 1.1s ease-out both; }@keyframes arrive { from { opacity: 0; transform: translateY(15px); }to { opacity: 1; transform: translateY(0); } } }
@media (max-width: 700px) and (orientation: portrait) {
  #ending { padding-left: 20px; justify-items: center; }
  .ending-card { width: 100%; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .sheet { padding: 14px 18px; }
  .sheet-head .eyebrow { display: none; }
  .sheet-head .primary { padding: 12px 18px; }
  .region-tabs { padding: 10px 0; }
  .region-tabs button { padding: 7px 13px; font-size: 11px; }
  .map-scroll { min-height: 0; }
  .stage-map { min-height: 0; }
  .map-region-label { top: 8px; padding: 6px 12px; gap: 3px; }
  .map-region-label b { font-size: 13px; }
  .map-region-label small { font-size: 8px; }
  .stage-node .node-circle { width: 40px; height: 40px; font-size: 15px; margin-bottom: 4px; }
  .stage-node strong { font-size: 10px; }
  .stage-node small { display: none; }
  .ending-card { padding: 18px; width: min(510px, 48vw); }
  .boss-hud { left: 36%; right: 16px; }
  .play-hud { max-width: 33vw; }
}
.boss-hud div { flex-wrap: wrap; }
#bossTip { display: block; font-size: 10px; }
.hint-button { position: fixed; z-index: 11; top: max(20px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); }
body[data-screen="play"] .wordmark { visibility: hidden; }
.tutorial-hint { position: fixed; z-index: 3; top: 100px; right: 24px; max-width: 50vw; padding: 7px 10px; border-radius: 8px; background: #f4f1dfd9; color: var(--ink); font-size: 11px; pointer-events: none; }
.boss-hud { pointer-events: none; }
.boss-hud[data-phase="2"] { background: #f6ddbfed; border: 1px solid #cc8c57; }
.boss-intro { position: fixed; z-index: 4; inset: 30% 0 auto; padding: 25px; background: linear-gradient(90deg, #173a3500, #173a35f5 15%, #173a35f5 85%, #173a3500); border-block: 2px solid #dfc17b; color: #fff1bc; text-align: center; display: grid; gap: 12px; pointer-events: none; }
.boss-intro strong { font-size: clamp(24px, 4vw, 48px); letter-spacing: .06em; }
.boss-intro small { font-size: 10px; letter-spacing: .2em; }.boss-intro span { font-size: 12px; }
@media (max-height: 540px) and (orientation: landscape) { .hint-button { top: max(10px, env(safe-area-inset-top)); }.tutorial-hint { top: 68px; right: 20px; font-size: 10px; }.boss-intro { padding: 18px; gap: 7px; } }
@media (max-width: 700px) and (orientation: portrait) { .hint-button { top: max(12px, env(safe-area-inset-top)); padding: 12px; }.tutorial-hint { top: 145px; max-width: 85vw; } }
/* Chapter scenes and journal remain usable on small landscape screens. */
.tutorial-hint { display: grid; gap: 6px; width: min(370px, 43vw); padding: 12px 15px; background: #183f35ed; color: #f1f4d9; border: 1px solid #b5cf93; border-radius: 14px; box-shadow: 0 5px 16px #12342733; }
.tutorial-hint strong { color: #cee59c; font-size: 11px; }.tutorial-hint span { font-size: 13px; line-height: 1.65; }.tutorial-hint small { font-size: 10px; color: #c3d5ac; border-top: 1px solid #94b98655; padding-top: 5px; }
@media (max-width: 700px) and (orientation: portrait) { .tutorial-hint { top: 190px; right: 16px; width: calc(100vw - 32px); max-width: none; } }
@media (max-height: 540px) and (orientation: landscape) { .tutorial-hint { padding: 8px 12px; gap: 3px; }.tutorial-hint span { font-size: 12px; line-height: 1.5; } }
#endingText { white-space: pre-line; }
#ending[data-scene="mystery"] .ending-card { background: #15392fe8; color: #ecf6dc; }
#ending .ending-card { transition: background 2s, color 2s; max-height: 84dvh; overflow-y: auto; }
#ending .ending-card h2 { font-size: clamp(23px, 4vw, 48px); }
#journeyStatus { font-size: 10px; opacity: .85; }
.journal-button { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.journal-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.journal-button.has-unread { border-color: #51bbaa; box-shadow: 0 0 0 3px #a6f9d94d; }
#journalBadge { border-radius: 20px; padding: 2px 7px; background: #245a4f; color: #edffd9; font-size: 11px; }
.hint-button { left: auto; right: max(24px, env(safe-area-inset-right)); top: 150px; transform: none; font-size: 11px; padding: 8px 12px; }
.archive-label { font-size: 10px; letter-spacing: .16em; color: #72b9ae; font-weight: 800; }
#journal { width: min(1040px, 94vw); height: min(720px, 90dvh); max-height: 90dvh; padding: 0; overflow: hidden; background: #173e36; border: 1px solid #7fa99a; color: #f6f2de; }
#journal[open] { display: flex; flex-direction: column; }
.journal-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px 15px; gap: 12px; }
.journal-head h2 { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 32px; margin-top: 6px; letter-spacing: .08em; }
.journal-head button { flex-shrink: 0; }
.journal-progress { display: flex; justify-content: space-between; gap: 12px; padding: 12px 28px; font-size: 11px; border-block: 1px solid #7fa99a40; color: #cfddbc; }
.journal-layout { display: grid; grid-template-columns: 280px 1fr; flex: 1; min-height: 0; }
#researchNotes { overflow: auto; padding: 18px; touch-action: pan-y; scrollbar-color: #6eaa98 #173e36; }
.archive-entry { display: grid; gap: 7px; text-align: left; color: #e7e8d2; background: transparent; border: 1px solid #82b79c40; border-radius: 8px; padding: 16px; width: 100%; margin-bottom: 10px; }
.archive-entry small { font-size: 10px; color: #a1ccba; }
.archive-entry strong { font-size: 14px; line-height: 1.6; }
.archive-entry[aria-current="true"] { border-color: #e1c97c; background: #39604c; box-shadow: inset 3px 0 #e1c97c; }
.journal-page { overflow-y: auto; margin: 0; padding: clamp(22px, 4vw, 54px); color: #25443a; background: repeating-linear-gradient(0deg, #a1ad8510 0 1px, transparent 1px 30px), #f4f0db; touch-action: pan-y; }
.journal-page .archive-label { color: #648370; }
.journal-page h3 { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: clamp(23px, 3vw, 34px); line-height: 1.6; margin: 22px 0; }
.journal-page p { font-size: 18px; line-height: 2.2; white-space: pre-line; margin-bottom: 40px; }
.journal-page footer { font-size: 10px; line-height: 1.9; color: #718370; border-top: 1px solid #71837040; padding-top: 16px; }
.record-notice { position: fixed; z-index: 14; right: max(24px, env(safe-area-inset-right)); top: 205px; display: grid; gap: 8px; width: min(330px, 88vw); background: #183e35f5; color: #eff7d8; border: 1px solid #bada96; border-left: 5px solid #a9ebc2; padding: 18px; border-radius: 14px; box-shadow: 0 12px 35px #0c30294d; }
.record-notice strong { font-size: 18px; }.record-notice > span:not(.archive-label) { font-size: 13px; }
.record-notice > div { display: flex; gap: 8px; }.record-notice button { padding: 9px 12px; font-size: 12px; }
#journalWelcome { width: min(450px, 92vw); text-align: center; border: 2px solid #85bdaa; }
#journalWelcome h2 { font-size: 25px; margin-top: 15px; }#journalWelcome p { font-size: 14px; }
.journal-location { background: #24574a; color: #f4f2d5; padding: 18px 10px; border-radius: 12px; font-weight: 800; }
@media (max-width: 700px) { .topbar { gap: 6px; }.topbar .small-button { padding: 10px; font-size: 12px; }.wallet { padding: 10px; font-size: 12px; }.wallet > span { margin-right: 2px; }.journal-button { gap: 4px; }.journal-button svg { width: 18px; }.journal-layout { grid-template-columns: 1fr; grid-template-rows: 105px 1fr; }#researchNotes { display: flex; gap: 8px; padding: 10px; overflow-x: auto; touch-action: pan-x; }.archive-entry { width: 180px; flex-shrink: 0; margin: 0; padding: 10px; gap: 2px; }.archive-entry strong { font-size: 12px; }.journal-head { padding: 15px; }.journal-head h2 { font-size: 25px; }.journal-progress { padding: 10px 15px; font-size: 10px; }.journal-page { padding: 23px; }.journal-page p { font-size: 16px; }.hint-button { top: 210px; right: 16px; }.record-notice { top: 260px; right: 16px; } }
@media (max-height: 540px) and (orientation: landscape) { .hint-button { top: 112px; right: 20px; }.record-notice { top: 64px; right: 20px; width: 290px; padding: 12px; gap: 5px; }.record-notice .archive-label { font-size: 8px; }.record-notice strong { font-size: 15px; }.journal-head { padding: 10px 20px; }.journal-head h2 { font-size: 23px; margin-top: 2px; }.journal-progress { padding: 7px 20px; }.journal-layout { grid-template-columns: 220px 1fr; }.journal-page { padding: 20px 28px; }.journal-page h3 { margin: 12px 0; font-size: 24px; }.journal-page p { font-size: 16px; line-height: 1.9; }#journalWelcome { padding: 16px 24px; }#journalWelcome h2 { margin-top: 5px; }#journalWelcome p { margin: 8px 0; }.journal-location { padding: 10px; } }
@media (prefers-reduced-motion: no-preference) { .record-notice { animation: arrive .4s ease-out both; } }