:root{--ink:#071323;--soft-ink:#17324d;--paper:#fffaf0;--cyan:#42d7e8;--water:#168ed3;--gold:#f8c35a;--coral:#d9563f;--orange:#f36f45}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;color:var(--ink);background:#dbe6ef}
.game-shell{width:min(1040px,calc(100% - 28px));margin:auto;padding:18px 0 64px}
.hero-stage{position:relative;overflow:hidden;background:var(--paper)}
.hero-stage>img{display:block;width:100%;aspect-ratio:1200/630;object-fit:cover}
.hero-tag{position:absolute;left:16px;bottom:14px;padding:7px 11px;border:2px solid var(--ink);border-radius:7px;background:var(--gold);font-weight:950}
.intro-copy{max-width:820px;margin:auto}.eyebrow,.dek{font-weight:900;letter-spacing:.035em}
.intro h1{margin:.18em 0;font-size:clamp(42px,7.3vw,78px);line-height:1.02;letter-spacing:-.045em}
.dek{font-size:clamp(17px,2.2vw,22px)}
.news-brief,.rule-card,.source-note{margin:18px 0;padding:16px;border-radius:10px;background:#fff}
.news-brief,.rule-card{border-left:6px solid var(--orange);box-shadow:0 2px 0 #07132322}
.rule-card strong{display:block;font-size:1.12rem}.rule-card ol{padding-left:1.4rem;font-weight:800}
.source-note{border:1px solid #a9b8c5;color:#40566a;font-size:.91rem}
button,.share{min-height:54px;padding:10px 18px;border:3px solid var(--ink);border-radius:11px;background:var(--gold);color:var(--ink);font:inherit;font-weight:950;cursor:pointer;box-shadow:0 5px 0 var(--ink);transition:transform .12s,box-shadow .12s}
button:active,.share:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.share{display:inline-flex;align-items:center;justify-content:center;background:#fff;text-decoration:none}
.hud{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:8px}
.hud>div{min-width:0;padding:6px 4px;border:1px solid #a9b8c5;border-radius:7px;background:#fff;text-align:center}
.hud span{display:block;color:#526477;font-size:11px;font-weight:850}.hud b{font-size:19px;white-space:nowrap}
.survey-scene{position:relative;aspect-ratio:1200/760;overflow:hidden;border:4px solid var(--ink);border-radius:22px;background:var(--paper);box-shadow:8px 8px 0 #0713232e;isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.world{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.sensor{position:absolute;z-index:4;top:51%;width:10%;min-width:48px;filter:drop-shadow(5px 6px 0 #07132325);pointer-events:none}
.sensor.left{left:3%}.sensor.right{right:3%}
.sensor-label{position:absolute;z-index:7;top:55.5%;display:grid;place-items:center;width:34px;height:34px;border:3px solid var(--ink);border-radius:50%;background:var(--cyan);font-weight:1000;pointer-events:none}
.sensor-label.left{left:5.8%}.sensor-label.right{right:5.8%}
.city-progress{position:absolute;z-index:3;left:61.5%;top:2%;width:34%;height:23%;pointer-events:none}.city-fill{position:absolute;bottom:0;width:16%;height:0;border-radius:5px 5px 0 0;background:var(--cyan);opacity:.88;transition:height .22s ease-out}.city-fill.on{height:56%}.city-fill[data-step="1"]{left:0}.city-fill[data-step="2"]{left:20%}.city-fill[data-step="3"]{left:40%}.city-fill[data-step="4"]{left:60%}.city-fill[data-step="5"]{left:80%}
.true-wave{position:absolute;z-index:8;top:61.5%;width:13.4%;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 3px 0 #fffaf0);will-change:left}
.true-wave.right{transform:translate(-50%,-50%) scaleX(-1)}.true-wave.crossed{opacity:.58}
.noise-signal{position:absolute;z-index:7;top:47%;width:16%;transform:translate(-50%,-50%);pointer-events:none}.noise-signal img{display:block;width:100%}.noise-signal span{display:block;margin-top:-5px;padding:3px 6px;border-radius:4px;background:var(--coral);color:#fff;text-align:center;font-size:10px;font-weight:950;letter-spacing:.05em}
.pipe-hit{position:absolute;z-index:20;right:3%;bottom:2%;width:27%;min-height:48px;padding:7px 10px;border-width:3px;background:var(--gold);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pipe-hit:hover{background:#ffe08b}.pipe-hit:focus-visible{outline:5px solid #0086ff;outline-offset:3px}.pipe-hit:disabled{cursor:wait;opacity:.7;transform:none;box-shadow:0 3px 0 var(--ink)}
.patch,.survey-mark{position:absolute;z-index:10;transform:translateX(-50%);pointer-events:none}.patch{top:63.5%;width:5.6%;min-width:28px}.survey-mark{top:47%;width:6.8%;min-width:34px;filter:drop-shadow(0 2px 0 #fff)}
.feedback{position:absolute;z-index:15;left:3%;right:32%;bottom:2%;min-height:48px;margin:0;padding:9px 12px 9px 44px;border:0;border-left:7px solid #526477;border-radius:8px;background:#fffffff2;color:var(--ink);font-weight:900;line-height:1.25;box-shadow:0 3px 8px #07132320;pointer-events:none}.feedback:before{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:18px}.feedback.info:before{content:"↔"}.feedback.success{border-left-color:var(--cyan)}.feedback.success:before{content:"✓"}.feedback.warning{border-left-color:var(--coral)}.feedback.warning:before{content:"!"}
.result{display:grid;grid-template-columns:minmax(260px,.95fr) 1.05fr;gap:24px;align-items:center;padding:24px;border:3px solid var(--ink);border-radius:18px;background:#fff}.result-art{position:relative}.result-art>img{display:block;width:100%;border:4px solid var(--ink);border-radius:16px}.result-art:after{content:attr(data-repairs) "/5";position:absolute;right:12px;bottom:12px;padding:5px 10px;border:3px solid var(--ink);border-radius:7px;background:var(--gold);font-weight:950}.result-progress{position:absolute;inset:0}.result-patch{display:none;position:absolute;top:65.5%;width:7%;height:20%;object-fit:fill}.result-patch.p1{left:20.1%}.result-patch.p2{left:33.3%}.result-patch.p3{left:46.5%}.result-patch.p4{left:59.7%}.result-patch.p5{left:72.9%}.result-art[data-repairs="1"] .p1,.result-art[data-repairs="2"] .p1,.result-art[data-repairs="2"] .p2,.result-art[data-repairs="3"] .p1,.result-art[data-repairs="3"] .p2,.result-art[data-repairs="3"] .p3,.result-art[data-repairs="4"] .p1,.result-art[data-repairs="4"] .p2,.result-art[data-repairs="4"] .p3,.result-art[data-repairs="4"] .p4,.result-art[data-repairs="5"] .result-patch{display:block}.score-line strong{font-size:72px}.actions{display:flex;flex-wrap:wrap;gap:10px}.news-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px}.next-target{padding:10px 12px;border-left:6px solid var(--cyan);background:#eafcff;font-weight:850}
.play,.actions{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.play button,.actions button,.actions a{touch-action:manipulation}
@media(min-width:641px){.play{width:min(900px,100%);margin-inline:auto}}
@media(max-width:640px){
  .game-shell{width:min(100% - 14px,1040px)}.hud{gap:4px}.hud>div{padding:4px 2px}.hud span{font-size:9px}.hud b{font-size:15px}
  .survey-scene{border-width:3px;border-radius:16px;box-shadow:4px 5px 0 #0713232e}
  .sensor-label{width:26px;height:26px;border-width:2px;font-size:12px}.sensor-label.left{left:5%}.sensor-label.right{right:5%}
  .true-wave{width:17%}.noise-signal{width:19%}.pipe-hit{right:2%;bottom:1.5%;width:32%;min-height:46px;padding:5px 6px;font-size:12px}
  .feedback{left:2%;right:36%;bottom:1.5%;min-height:46px;padding:7px 7px 7px 35px;font-size:11px}.feedback:before{left:10px}.result{grid-template-columns:1fr;padding:15px}.actions>*{width:100%}.score-line strong{font-size:58px}
}
@media(max-width:640px) and (max-height:820px){
  .play{height:max(440px,calc(var(--hg-visual-viewport-height,100dvh) - var(--hg-game-header-block,72px) - 14px));display:grid;grid-template-rows:auto minmax(0,1fr);gap:6px;overflow:hidden}
  .survey-scene{width:100%;height:100%;aspect-ratio:auto}.world{object-fit:fill}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}.true-wave{filter:none}}