:root {
  --ink: #16353b;
  --paper: #f3eedf;
  --deep: #183f52;
  --blue: #4d9db0;
  --water: #67c3cf;
  --sun: #ef9b55;
  --reed: #8a8f55;
  --danger: #9e3f36;
  --safe: #226b5a;
  --line: rgba(22, 53, 59, .25);
  color-scheme: light;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 300px; background: #173746; }
body { margin: 0; color: var(--ink); background: var(--paper); overflow-x: hidden; }
button, input { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.masthead {
  min-height: 86px; padding: 12px clamp(14px, 4vw, 44px); display: flex; align-items: center; gap: 14px;
  color: #f9f1d7; background: var(--deep); border-bottom: 5px solid #d7b26d;
}
.masthead h1 { margin: 0; font-family: Georgia, "Yu Mincho", serif; font-size: clamp(1.45rem, 4vw, 2.15rem); font-weight: 600; letter-spacing: .08em; }
.eyebrow, .chapter { margin: 0 0 4px; font: 700 .72rem/1.3 ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; }
.brand-mark { width: 50px; height: 50px; flex: 0 0 auto; position: relative; border: 2px solid #e9dcb7; border-radius: 50%; }
.brand-mark span { position: absolute; left: 8px; width: 30px; height: 7px; border-top: 2px solid #e9dcb7; border-radius: 50%; transform: rotate(-8deg); }
.brand-mark span:nth-child(1) { top: 12px; }.brand-mark span:nth-child(2) { top: 22px; }.brand-mark span:nth-child(3) { top: 32px; }
.fraction-title { display: inline-grid; grid-template-rows: 1fr 1fr; margin: 0 .1em; vertical-align: middle; font: 700 .48em/.9 ui-monospace, monospace; text-align: center; }
.fraction-title span:first-child { border-bottom: 1px solid currentColor; }
.sound-toggle { margin-left: auto; min-height: 44px; padding: 7px 12px; color: #fff8df; background: transparent; border: 1px solid #ceb878; border-radius: 3px; font-weight: 700; }

main { width: min(1180px, 100%); margin: 0 auto; }
.screen { min-height: calc(100vh - 135px); }
.start-screen { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(340px, 1.15fr); background: #efe8d3; }
.start-copy { align-self: center; padding: clamp(28px, 6vw, 72px); position: relative; z-index: 2; }
.start-copy h2 { max-width: 640px; margin: 8px 0 18px; font-family: Georgia, "Yu Mincho", serif; font-size: clamp(2rem, 5vw, 4.6rem); line-height: 1.12; font-weight: 500; }
.start-copy > p:not(.chapter,.quiet-note) { max-width: 600px; line-height: 1.85; }
.start-points { padding: 0; margin: 24px 0; list-style: none; border-top: 1px solid var(--line); }
.start-points li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.start-points span { color: var(--sun); font-family: ui-monospace, monospace; }
.primary-action { min-height: 52px; padding: 12px 24px; color: #fffdf0; background: var(--deep); border: 2px solid var(--deep); border-radius: 2px; box-shadow: 5px 5px 0 #d0b36f; font-weight: 800; cursor: pointer; }
.primary-action:focus-visible, button:focus-visible, input:focus-visible { outline: 4px solid #f0a14c; outline-offset: 3px; }
.quiet-note { color: #486066; font-size: .9rem; line-height: 1.6; }

.start-art { min-height: 610px; position: relative; overflow: hidden; isolation: isolate; background: #d5caa9; border-left: 1px solid var(--line); }
.start-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(#ddb47d 0 28%, #7f9b91 28% 47%, #416d72 47% 100%); }
.start-art::after { content: ""; position: absolute; inset: 44% -20% -15%; background: repeating-radial-gradient(ellipse at 50% 5%, transparent 0 14px, rgba(244,233,186,.24) 15px 17px); transform: perspective(300px) rotateX(38deg); }
.sun-disc { position: absolute; z-index: 1; top: 80px; right: 14%; width: 125px; height: 125px; background: #f1a35f; border-radius: 50%; box-shadow: 0 0 0 14px rgba(242, 185, 106, .17); }
.bird { position: absolute; z-index: 3; font: 3rem/1 Georgia, serif; color: var(--deep); transform: rotate(-8deg); }.bird-a{top:18%;left:18%}.bird-b{top:25%;left:33%;font-size:2rem}
.river { position: absolute; z-index: 2; bottom: -12%; width: 25%; height: 68%; background: rgba(101,190,196,.78); border: 4px solid rgba(238,232,194,.4); border-radius: 48% 48% 0 0; transform-origin: bottom; }
.river-one{left:8%;transform:rotate(12deg)}.river-two{left:39%;width:19%;}.river-three{right:8%;transform:rotate(-12deg)}
.reed-bank { position:absolute;z-index:4;bottom:0;width:30%;height:36%;background:repeating-linear-gradient(78deg,transparent 0 8px,#737846 9px 12px,transparent 13px 19px); }.reeds-a{left:0}.reeds-b{right:0;transform:scaleX(-1)}
.sluice-silhouette { position: absolute; z-index: 5; left: 20%; right: 20%; top: 41%; height: 52px; display:flex; justify-content:space-around; border-top: 10px solid #173d48; }
.sluice-silhouette i { width: 12px; height: 70px; background:#173d48; box-shadow: 22px 0 #173d48; }

.play-screen { padding: clamp(10px, 2vw, 22px); background: #d9d0b7; }
.hud-strip { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 760px; margin: 0 auto 12px; color: #f8f0d6; background: var(--deep); border: 2px solid #0e303a; }
.hud-strip div { min-width: 0; padding: 9px 13px; border-right: 1px solid rgba(255,255,255,.18); }
.hud-strip div:last-child { border: 0; }.hud-strip small { display:block;color:#c2d9d6;font-size:.72rem }.hud-strip strong { font: 800 1.1rem/1.3 ui-monospace, monospace; }
.danger-banner { max-width: 900px; margin: 0 auto 10px; min-height: 54px; padding: 8px 14px; display:flex;align-items:center;gap:12px;background:#f6f0dd;border:2px solid #738279;box-shadow:3px 3px 0 rgba(35,57,59,.18); }
.danger-banner b,.danger-banner span{display:block}.danger-banner div span{margin-top:2px;font-size:.88rem}.signal-lamp{width:18px;height:18px;flex:0 0 auto;border:3px double var(--deep);background:#72a574;border-radius:50%}
.danger-banner.is-warning{border-color:#b06e35;background:#fff0ce}.danger-banner.is-warning .signal-lamp{background:#e7a849}.danger-banner.is-critical{border-color:#9e3f36;background:#ffe1d4}.danger-banner.is-critical .signal-lamp{background:#bd453a}

.wetland-world { min-height: 395px; position: relative; overflow: hidden; border: 3px solid var(--deep); background: linear-gradient(#b8c7b3 0 33%, #81927a 33% 45%, #678b85 45% 100%); touch-action: pan-y; }
.sky-layer{position:absolute;inset:0 0 58%;background:linear-gradient(#e4d2aa,#c3c5a8)}
.cloud{position:absolute;width:100px;height:18px;background:rgba(255,249,226,.65);border-radius:50%}.cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud::before{width:40px;height:35px;left:18px;bottom:0}.cloud::after{width:50px;height:28px;right:10px;bottom:0}.cloud-one{left:14%;top:25%}.cloud-two{right:11%;top:43%;transform:scale(.7)}
.source-pool{position:absolute;z-index:3;left:4%;top:25%;width:112px;height:112px;border:8px solid #365d58;border-radius:50%;overflow:hidden;background:#d1c497;text-align:center;font-weight:900;box-shadow:0 8px 0 rgba(23,58,61,.22)}.source-pool>span{position:relative;z-index:2;line-height:100px;color:#fff;text-shadow:0 1px 3px #173b42}.source-water{position:absolute;left:0;right:0;bottom:0;height:60%;background:repeating-linear-gradient(0deg,#55adb6 0 14px,#67bcc2 15px 20px);transition:height .45s ease}
.main-channel{position:absolute;z-index:1;left:12%;right:7%;top:43%;height:52px;background:#59adb5;transform:skewX(-12deg);border:4px solid #d9cd9f;box-shadow:0 7px 0 rgba(32,72,74,.28)}
.basin-grid{position:absolute;z-index:4;left:18%;right:3%;bottom:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2vw,22px)}
.basin{min-height:245px;padding:10px 10px 0;position:relative;overflow:hidden;background:#8c8f66;border:4px solid #355f5d;border-radius:48% 48% 16% 16%/27% 27% 11% 11%;cursor:pointer;box-shadow:inset 0 -20px 0 rgba(53,75,50,.25),0 8px 0 rgba(27,63,66,.22);transition:transform .18s ease,border-color .18s ease}
.basin:hover{transform:translateY(-3px)}.basin.is-selected{border-color:#fff0b6;box-shadow:inset 0 -20px 0 rgba(53,75,50,.25),0 0 0 4px var(--deep),0 9px 0 rgba(27,63,66,.25)}.basin.is-selected::after{content:"選択中";position:absolute;right:10px;top:40px;padding:2px 7px;color:#fff;background:var(--deep);font-size:.72rem;font-weight:900}
.basin-name{display:block;font:700 1.15rem Georgia,"Yu Mincho",serif}.basin-target{display:block;margin:2px 0 7px;font-size:.8rem}.water-shell{height:112px;display:block;position:relative;overflow:hidden;background:#c1b77d;border:3px solid #395c58;border-radius:50% 50% 35% 35%;box-shadow:inset 0 5px 12px rgba(40,60,46,.28)}.water-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:repeating-linear-gradient(0deg,#55b8c3 0 16px,#6bc5c9 17px 24px);transition:height .5s cubic-bezier(.2,.8,.2,1)}.water-mark{position:absolute;left:0;right:0;top:35%;border-top:3px dashed #fff0b8}.basin-reading{display:flex;justify-content:space-between;align-items:center;padding:6px 3px 0;font-family:ui-monospace,monospace}.basin-reading small{font-weight:800}.basin-life{position:absolute;z-index:2;left:12%;right:12%;bottom:4px;color:#303f29;font-weight:900;letter-spacing:.18em}.release-wave{position:absolute;z-index:7;width:28px;height:28px;border:5px solid #e9fbef;border-radius:50%;opacity:0;pointer-events:none}.release-wave.is-running{animation:flowBurst .7s ease-out}.world-message{position:absolute;z-index:8;top:8px;left:50%;transform:translateX(-50%);width:min(550px,65%);margin:0;padding:7px 10px;color:#fffde9;background:rgba(22,53,59,.86);text-align:center;font-weight:800;border:1px solid rgba(255,255,255,.5)}

.control-ledger { max-width: 900px; margin: 12px auto 0; padding: 15px; background: #f8f3e3; border: 2px solid var(--ink); box-shadow: 5px 5px 0 rgba(31,73,76,.25); }
.ledger-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--ink)}.ledger-label{display:block;font-size:.72rem;letter-spacing:.12em}.ledger-head strong{font-size:1.1rem}.equation{display:flex;align-items:center;gap:8px;font:800 clamp(1.1rem,4vw,1.7rem)/1 ui-monospace,monospace}.equation span,.equation b{min-width:45px;padding:7px;background:#d8e9df;border:1px solid var(--ink);text-align:center}.equation b{background:#f3cd74}
.lever-row{display:grid;grid-template-columns:190px 1fr;gap:6px 16px;margin-top:12px}.lever-row label{display:flex;flex-direction:column;justify-content:center}.lever-row label span{font-size:.78rem}.lever-row label b{font-size:1rem}.lever-row input{width:100%;height:38px;accent-color:var(--deep);touch-action:pan-y}.ticks{grid-column:2;display:flex;justify-content:space-between;font:700 .78rem ui-monospace,monospace}
.division-note{display:flex;gap:12px;margin:14px 0;padding:9px 12px;background:#e3ddc5;border-left:8px solid var(--blue)}.division-note span{font-weight:900}.division-note b{font-family:ui-monospace,monospace}
.action-row{display:grid;grid-template-columns:1.2fr .85fr .95fr;gap:8px}.action-row button{min-height:48px;padding:9px;border:2px solid var(--deep);border-radius:2px;font-weight:900;cursor:pointer}.action-row button:disabled{opacity:.42;cursor:not-allowed}.release-button{color:#fff;background:var(--deep)}.rescue-button{background:#f2ca70}.advance-button{background:#d5e4d0}.cause-text{margin:10px 0 0;padding-top:8px;border-top:1px dashed #7e887c;font-size:.9rem;line-height:1.6}
.tide-timeline{max-width:900px;margin:14px auto 4px;padding:0;display:grid;grid-template-columns:repeat(6,1fr);list-style:none}.tide-timeline li{position:relative;padding-top:25px;text-align:center;color:#5b6966}.tide-timeline li::before{content:"";position:absolute;top:10px;left:0;right:0;border-top:3px solid #8fa09a}.tide-timeline li:first-child::before{left:50%}.tide-timeline li:last-child::before{right:50%}.tide-timeline span{position:absolute;z-index:2;top:0;left:50%;width:23px;height:23px;transform:translateX(-50%);background:#d9d0b7;border:3px solid #7b8b84;border-radius:50%;font:700 .72rem/17px ui-monospace,monospace}.tide-timeline b{font-size:.72rem}.tide-timeline .is-done span{color:#fff;background:var(--safe);border-color:var(--safe)}.tide-timeline .is-current span{color:#fff;background:var(--danger);border-color:#fff;box-shadow:0 0 0 3px var(--danger)}

.quiz-screen,.result-screen{max-width:820px;margin:0 auto;padding:clamp(26px,7vw,70px) clamp(16px,6vw,60px);background:#f7f1df}.quiz-heading{display:flex;justify-content:space-between;align-items:end;border-bottom:3px double var(--ink)}.quiz-heading h2,.result-screen h2{margin:8px 0;font-family:Georgia,"Yu Mincho",serif;font-size:clamp(2rem,6vw,3.8rem);font-weight:500}.quiz-heading span{font:800 1rem ui-monospace,monospace}.quiz-question{margin:28px 0 18px;font-size:clamp(1.15rem,3vw,1.55rem);font-weight:800;line-height:1.65}.quiz-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}.quiz-choices button{min-width:0;min-height:58px;padding:12px;background:#e7dfc7;border:2px solid var(--ink);text-align:left;font-weight:800;overflow-wrap:anywhere}.quiz-choices button[data-result="correct"]{background:#c9e3c4;border-style:double;border-width:4px}.quiz-choices button[data-result="wrong"]{background:#f0c6b8;text-decoration:line-through}.quiz-feedback{min-height:72px;padding:12px;border-left:8px solid var(--blue);background:#e8e5d7;line-height:1.65;font-weight:700}
.result-screen{text-align:center}.result-sky{height:150px;position:relative;overflow:hidden;margin:-20px -20px 20px;background:linear-gradient(#e6b96e,#8cac9e)}.result-sky span{position:absolute;top:28%;font:3rem Georgia,serif}.result-sky span:nth-child(1){left:22%}.result-sky span:nth-child(2){left:48%;top:16%}.result-sky span:nth-child(3){right:20%;top:35%}.result-sky i{position:absolute;left:0;right:0;bottom:-20px;height:65px;background:repeating-radial-gradient(ellipse at 50% 0,#6bc1c5 0 12px,#4c9da8 13px 21px)}.result-screen>p:not(.chapter){line-height:1.8;text-align:left}.score-stamp{width:230px;height:150px;margin:22px auto;padding:18px 10px;border:5px double var(--deep);border-radius:50%;display:flex;flex-direction:column;justify-content:center;transform:rotate(-2deg)}.score-stamp small,.score-stamp span{font-weight:800}.score-stamp strong{font:900 2.35rem ui-monospace,monospace}.result-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}.ranking-toggle{min-height:52px;padding:12px 22px;background:#e4dcc4;border:2px solid var(--deep);font-weight:900}.ranking-panel{margin:24px auto 0;width:min(100%,620px);padding:14px;color:#16353b;background:#fffaf0;border:3px solid var(--deep);text-align:left;overflow-wrap:anywhere}.ranking-panel button,.ranking-panel [role="tab"]{color:#16353b!important;background:#e5ddc3!important}.ranking-panel .is-active,.ranking-panel [aria-selected="true"]{color:#fff!important;background:#215f65!important}
footer{padding:18px;text-align:center;color:#d7ded8;background:#173746;font-size:.78rem}

@keyframes flowBurst{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(7)}}
@keyframes nearMissPulse{50%{box-shadow:inset 0 0 0 8px rgba(255,214,104,.55)}}
.wetland-world.is-near-miss{animation:nearMissPulse 1.2s ease-in-out 2}.wetland-world.is-release .basin{animation:basinLift .65s ease-out}@keyframes basinLift{45%{transform:translateY(-6px)}100%{transform:none}}

@media (max-width: 760px){
  .masthead{min-height:72px;padding:9px 12px}.brand-mark{width:40px;height:40px}.brand-mark span{left:6px;width:24px}.brand-mark span:nth-child(1){top:9px}.brand-mark span:nth-child(2){top:18px}.brand-mark span:nth-child(3){top:27px}.eyebrow{font-size:.58rem}.sound-toggle{padding:6px 8px;font-size:.78rem}
  .start-screen{display:block}.start-copy{padding:28px 18px}.start-art{min-height:370px;border-left:0;border-top:1px solid var(--line)}
  .play-screen{padding:8px}.hud-strip{grid-template-columns:repeat(2,1fr)}.hud-strip div:nth-child(2){border-right:0}.hud-strip div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.18)}
  .danger-banner{align-items:flex-start}.wetland-world{min-height:660px}.source-pool{left:50%;top:64px;transform:translateX(-50%);width:92px;height:92px}.source-pool>span{line-height:78px}.main-channel{left:45%;right:auto;top:145px;width:10%;height:340px;transform:none}.basin-grid{left:10px;right:10px;bottom:16px;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.basin{min-width:0;min-height:350px;padding:8px 5px;border-width:3px;border-radius:35% 35% 12% 12%/18% 18% 8% 8%}.basin-name{font-size:.95rem}.basin-target{font-size:.7rem}.water-shell{height:185px}.basin-reading{display:block}.basin-reading b,.basin-reading small{display:block}.basin-life{font-size:.72rem}.world-message{top:8px;width:calc(100% - 16px);font-size:.8rem}
  .ledger-head{display:block}.equation{margin-top:10px;justify-content:center}.lever-row{grid-template-columns:1fr}.ticks{grid-column:1}.action-row{grid-template-columns:1fr 1fr}.release-button{grid-column:1/-1}.tide-timeline b{display:none}.quiz-screen,.result-screen{padding:28px 14px}.quiz-choices{grid-template-columns:1fr}.quiz-choices button{width:100%}.result-sky{margin:-12px 0 20px}.ranking-panel{max-width:calc(100vw - 28px);margin-left:auto;margin-right:auto}
}

@media (max-width: 390px){.masthead h1{font-size:1.2rem}.eyebrow{display:none}.sound-toggle{font-size:.7rem}.basin-grid{gap:3px}.basin{padding-left:3px;padding-right:3px}.basin-name{font-size:.85rem}.basin-target{font-size:.64rem}.equation{gap:4px}.equation span,.equation b{min-width:38px;padding:6px 3px}.action-row{grid-template-columns:1fr}}

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