@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700;800;900&display=swap");

:root {
  --ink: #122822;
  --ink-2: #1b3a32;
  --paper: #f4f1e9;
  --paper-2: #eae6dc;
  --green: #87d34f;
  --green-dark: #2e7b4b;
  --lime: #c8f06a;
  --orange: #f0713a;
  --blue: #36a7c8;
  --yellow: #f7d257;
  --red: #df594f;
  --white: #fffdf7;
  --line: rgba(18, 40, 34, 0.16);
  --shadow: 0 22px 60px rgba(17, 37, 31, 0.13);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", "Noto Sans JP", sans-serif;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

.paper-noise {
  position: fixed;
  z-index: 20;
  inset: 0;
  opacity: 0.045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.topbar {
  position: fixed;
  z-index: 15;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 12px clamp(18px, 3vw, 52px);
  border-bottom: 1px solid var(--line);
  background: rgba(244, 241, 233, 0.94);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
}

.brand-mark svg {
  width: 28px;
  fill: none;
  stroke: var(--lime);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.brand b,
.brand small {
  display: block;
  line-height: 1;
}

.brand b {
  font-size: 17px;
  letter-spacing: 0.08em;
}

.brand small {
  margin-top: 5px;
  color: #60736d;
  font-size: 8px;
  letter-spacing: 0.22em;
}

.chapter-progress {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chapter-progress i {
  width: clamp(18px, 3vw, 48px);
  height: 1px;
  background: #bdc5c0;
}

.chapter-dot {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid #aeb9b3;
  border-radius: 50%;
  color: #83908b;
  font-size: 9px;
  font-weight: 800;
}

.chapter-dot.is-active,
.chapter-dot.is-done {
  border-color: var(--ink);
  color: var(--white);
  background: var(--ink);
}

.chapter-dot.is-done::before {
  content: "✓";
  font-size: 12px;
}

.chapter-dot.is-done {
  font-size: 0;
}

.top-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-self: end;
}

.collection-button {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
}

.collection-button::before {
  content: "♥";
  color: var(--orange);
  font-size: 11px;
}

.collection-button b {
  color: var(--green-dark);
  font-size: 9px;
}

.best-score {
  color: #75847e;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.best-score strong {
  margin-left: 5px;
  color: var(--ink);
  font-size: 15px;
}

.icon-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.icon-button svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.icon-button.is-muted {
  opacity: 0.4;
}

.sound-control {
  position: fixed;
  z-index: 20050;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: inline-flex;
  min-width: 96px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  color: #f4ffff;
  background: rgba(15,43,48,.91);
  box-shadow: 0 9px 25px rgba(4,21,24,.28), inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
  cursor: pointer;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.sound-control:hover { transform: translateY(-2px); }
.sound-control:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.sound-control svg { width: 20px; height: 20px; flex: 0 0 auto; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.sound-control-slash { opacity:0; transition:opacity .14s ease; }
.sound-control.is-muted { color:#152e32; background:rgba(255,237,178,.96); border-color:rgba(21,46,50,.32); }
.sound-control.is-muted .sound-control-waves { opacity:.22; }
.sound-control.is-muted .sound-control-slash { opacity:1; }

@media (max-width: 740px) {
  .sound-control {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    min-width: 88px;
    min-height: 44px;
    padding-inline: 11px;
    font-size: 9px;
    box-shadow: 0 7px 20px rgba(4,21,24,.24);
  }
}

main {
  min-height: 100vh;
}

.screen {
  display: none;
  min-height: 100vh;
  padding: 116px clamp(20px, 4vw, 70px) 46px;
  animation: screen-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.screen.is-active {
  display: block;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.title-screen {
  position: relative;
  overflow: hidden;
  padding-top: 92px;
  padding-bottom: 0;
  background: #dfeee5;
}

.title-screen::before {
  position: absolute;
  top: 76px;
  right: -4vw;
  bottom: 0;
  left: 48%;
  content: "";
  background: #c7e1d0;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}

.title-copy {
  position: relative;
  z-index: 2;
  width: 45%;
  max-width: 630px;
  padding-top: clamp(56px, 9vh, 110px);
}

.eyebrow {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 20px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.19em;
}

.eyebrow span {
  display: inline-block;
  width: 32px;
  height: 2px;
  background: currentColor;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 680px;
  margin-bottom: 28px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(46px, 5.3vw, 78px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.055em;
}

h1 em,
.result-top em {
  color: var(--green-dark);
  font-style: normal;
}

.title-lead {
  margin-bottom: 34px;
  color: #476058;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.9;
}

.love-preview {
  display: grid;
  grid-template-columns: auto minmax(70px, 150px) auto;
  gap: 13px;
  align-items: center;
  width: min(100%, 455px);
  margin: -8px 0 23px;
  padding: 10px 12px;
  border: 1px solid rgba(18,40,34,.18);
  background: rgba(255,253,247,.45);
}

.love-preview span,
.love-preview b { display:block; }
.love-preview>div:first-child span { color:#71817b; font-size:7px; font-weight:800; letter-spacing:.12em; }
.love-preview>div:first-child b { margin-top:3px; font-family:"Noto Sans JP"; font-size:10px; }
.love-meter { height:5px; background:rgba(18,40,34,.13); }
.love-meter i { display:block; width:0; height:100%; background:var(--orange); transition:width .6s ease; }
.love-preview>strong { display:flex; gap:5px; align-items:end; color:var(--orange); }
.love-preview>strong span { color:#71817b; font-size:7px; }
.love-preview>strong b { font-size:18px; line-height:1; }

.primary-button,
.secondary-button {
  display: inline-flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 4px;
  color: var(--white);
  background: var(--ink);
  box-shadow: 5px 5px 0 rgba(18, 40, 34, 0.18);
  cursor: pointer;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}

.primary-button:hover,
.secondary-button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 rgba(18, 40, 34, 0.17);
}

.primary-button:active,
.secondary-button:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 rgba(18, 40, 34, 0.2);
}

.primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
  transform: none;
}

.primary-button svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.primary-button.large {
  min-height: 62px;
  padding: 0 30px;
  font-size: 15px;
}

.primary-button.orange { background: var(--orange); }
.primary-button.blue { background: #167f9d; }

.microcopy {
  margin-top: 19px;
  color: #72827d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.hero-visual {
  position: absolute;
  z-index: 1;
  top: 77px;
  right: 0;
  bottom: 94px;
  width: 57%;
  overflow: hidden;
}

.sun-disc {
  position: absolute;
  top: 12%;
  right: 16%;
  width: clamp(100px, 13vw, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--yellow);
}

.cloud {
  position: absolute;
  width: 90px;
  height: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.64);
}

.cloud::before,
.cloud::after {
  position: absolute;
  bottom: 0;
  content: "";
  border-radius: 50%;
  background: inherit;
}

.cloud::before { left: 15px; width: 38px; height: 38px; }
.cloud::after { right: 13px; width: 27px; height: 27px; }
.cloud-a { top: 18%; left: 17%; }
.cloud-b { top: 10%; right: 39%; transform: scale(0.7); }

.city {
  position: absolute;
  right: 0;
  bottom: 24%;
  left: 0;
  display: flex;
  gap: 6px;
  align-items: end;
  height: 130px;
  padding-left: 4%;
}

.city i {
  display: block;
  width: 9%;
  height: 42%;
  background: #8caaa0;
  box-shadow: inset 0 10px rgba(255,255,255,.16);
}

.city i:nth-child(2) { height: 70%; }
.city i:nth-child(3) { height: 52%; }
.city i:nth-child(4) { height: 90%; }
.city i:nth-child(5) { height: 62%; }

.plant {
  position: absolute;
  z-index: 3;
  right: 10%;
  bottom: 22%;
  width: 65%;
  height: 47%;
}

.plant-block {
  position: absolute;
  bottom: 0;
  border: 4px solid var(--ink);
  background: #f7f0d6;
  box-shadow: 11px 11px 0 rgba(17, 47, 38, 0.15);
}

.block-a { left: 4%; width: 43%; height: 49%; }
.block-a span {
  position: absolute;
  bottom: 10%;
  left: 8%;
  font-size: clamp(8px, 1vw, 15px);
  font-weight: 800;
  letter-spacing: .1em;
}

.block-b { left: 39%; width: 32%; height: 63%; background: #d9e4d4; }
.block-c { right: 3%; width: 30%; height: 37%; background: #eed6a4; }
.block-c i { display: inline-block; width: 12%; height: 24%; margin: 14% 2% 0 8%; background: var(--ink); }

.stack {
  position: absolute;
  z-index: 2;
  right: 22%;
  bottom: 58%;
  width: 13%;
  height: 52%;
  border: 4px solid var(--ink);
  background: #e7ebe0;
}

.stack::before,
.stack::after {
  position: absolute;
  left: -3px;
  width: calc(100% + 6px);
  height: 13%;
  content: "";
  background: var(--orange);
}

.stack::before { top: 14%; }
.stack::after { top: 44%; }
.stack i,
.stack b {
  position: absolute;
  top: -42%;
  left: 30%;
  width: 100%;
  height: 33%;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  filter: blur(1px);
  animation: smoke 4s ease-in-out infinite;
}
.stack b { top: -70%; left: 55%; transform: scale(1.4); animation-delay: -2s; }
@keyframes smoke { 50% { transform: translate(18px, -10px) scale(1.25); opacity: .3; } }

.pipe { position: absolute; z-index: 4; border: 7px solid var(--orange); border-bottom: 0; }
.pipe-a { left: 26%; bottom: 47%; width: 24%; height: 17%; }
.pipe-b { left: 58%; bottom: 34%; width: 22%; height: 22%; border-color: #418a71; }

.power-lines {
  position: absolute;
  z-index: 2;
  right: 1%;
  bottom: 24%;
  display: flex;
  gap: 34px;
  align-items: end;
}

.power-lines i {
  display: block;
  width: 4px;
  height: 100px;
  background: var(--ink);
  clip-path: polygon(42% 0,58% 0,64% 33%,100% 34%,100% 38%,65% 38%,80% 100%,20% 100%,35% 38%,0 38%,0 34%,36% 33%);
}
.power-lines i:nth-child(2) { height: 128px; }
.power-lines i:nth-child(3) { height: 90px; }

.road {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 14%;
  left: 0;
  height: 9%;
  border-top: 4px solid var(--ink);
  background: #82988e;
}

.truck {
  position: absolute;
  bottom: 11px;
  left: 18%;
  width: 88px;
  height: 38px;
  border: 3px solid var(--ink);
  background: var(--yellow);
  animation: truck 7s linear infinite;
}
.truck b { position: absolute; left: -24px; bottom: -3px; width: 27px; height: 29px; border: 3px solid var(--ink); background: #f6eee0; }
.truck::before,.truck::after { position:absolute; bottom:-10px; width:13px; height:13px; content:""; border-radius:50%; background:var(--ink); }
.truck::before{ left:4px }.truck::after{ right:7px }
@keyframes truck { from { transform: translateX(-160px); } to { transform: translateX(50vw); } }

.water { position: absolute; right:0; bottom:0; left:0; height:14%; background:#83bdc4; clip-path:polygon(0 18%,9% 5%,18% 20%,28% 4%,39% 18%,52% 5%,64% 19%,76% 7%,89% 18%,100% 3%,100% 100%,0 100%); }

.hero-tag {
  position: absolute;
  z-index: 6;
  min-width: 112px;
  padding: 9px 12px;
  border: 1px solid rgba(18,40,34,.4);
  background: rgba(247, 244, 235, .9);
  box-shadow: 4px 4px 0 rgba(18,40,34,.18);
}
.hero-tag::after { position:absolute; bottom:-24px; left:18px; width:1px; height:24px; content:""; background:var(--ink); }
.hero-tag b,.hero-tag span { display:block; }
.hero-tag b { font-size:9px; }
.hero-tag span { margin-top:3px; color:var(--green-dark); font-size:13px; font-weight:800; }
.tag-waste{ top:34%; left:13%; }.tag-power{ top:22%; right:13%; }.tag-co2{ right:8%; bottom:26%; }

.mode-preview {
  position: absolute;
  z-index: 7;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 52%;
  min-height: 94px;
  margin-left: 0;
  background: var(--ink);
}
.mode-preview div { display:grid; grid-template-columns:auto 1fr; grid-template-rows:1fr 1fr; column-gap:13px; align-content:center; padding:18px clamp(14px,2.2vw,34px); color:var(--white); border-right:1px solid rgba(255,255,255,.14); }
.mode-preview span { grid-row:1/3; align-self:center; color:var(--lime); font-size:11px; font-weight:700; }
.mode-preview b { align-self:end; font-family:"Noto Sans JP"; font-size:14px; }
.mode-preview small { color:#95aaa3; font-size:9px; }

.scene-heading {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 24px;
  align-items: end;
  max-width: 1400px;
  margin: 0 auto 28px;
}

.chapter-label { color:var(--green-dark); font-size:11px; font-weight:800; letter-spacing:.16em; }
.chapter-label span { display:grid; width:48px; height:48px; margin-bottom:7px; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:15px; }
.chapter-label.orange { color:var(--orange); }
.chapter-label.blue { color:#1780a0; }
.scene-heading h2 { margin:0 0 5px; font-family:"Noto Sans JP"; font-size:clamp(26px,3vw,44px); font-weight:900; letter-spacing:-.04em; }
.scene-heading p { margin:0; color:#63726d; font-size:13px; }
.scene-kpi { min-width:120px; padding:12px 16px; border-left:3px solid var(--green-dark); text-align:right; }
.scene-kpi.orange { border-color:var(--orange); }
.scene-kpi.blue { border-color:var(--blue); }
.scene-kpi small { display:block; color:#71807b; font-size:9px; font-weight:700; letter-spacing:.1em; }
.scene-kpi strong { font-size:30px; line-height:1; }.scene-kpi span{ margin-left:4px; color:#82908b; font-size:11px; }

.design-layout { display:grid; grid-template-columns:minmax(180px,230px) minmax(480px,1fr) minmax(190px,250px); gap:20px; max-width:1400px; margin:0 auto; }
.brief-card,.module-tray,.precision-panel,.control-room { padding:24px; border:1px solid var(--line); background:rgba(255,253,247,.72); box-shadow:var(--shadow); }
.card-label { margin-bottom:20px; color:#71817b; font-size:9px; font-weight:800; letter-spacing:.16em; }
.brief-card h3 { margin-bottom:22px; font-family:"Noto Sans JP"; font-size:21px; line-height:1.45; }
.brief-card dl { margin:0 0 22px; }
.brief-card dl div { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); }
.brief-card dt { color:#77837f; font-size:10px; }.brief-card dd{ margin:0; font-size:11px; font-weight:700; }
.rule-list { margin:0 0 20px; }.rule-list p{ display:flex; gap:8px; align-items:center; margin:8px 0; color:#52645e; font-size:10px; }
.rule-icon { display:inline-block; width:16px; height:16px; border:1px solid var(--green-dark); }.rule-icon.left { border-left:5px solid var(--green-dark); }.rule-icon.top{ border-top:5px solid var(--green-dark); }.rule-icon.right{border-right:5px solid var(--green-dark);}
.design-bonus { margin:-7px 0 17px; padding:10px; border:1px dashed var(--green-dark); background:#e6eee0; }
.design-bonus small,.design-bonus b { display:block; }
.design-bonus small { color:var(--green-dark); font-size:6px; font-weight:800; letter-spacing:.1em; }
.design-bonus b { margin-top:4px; font-family:"Noto Sans JP"; font-size:9px; }
.design-bonus p { margin:3px 0 0; color:#66766f; font-size:7px; line-height:1.5; }
.text-button { padding:0; border:0; color:var(--green-dark); background:transparent; cursor:pointer; font-size:10px; font-weight:700; }

.blueprint-panel { position:relative; display:grid; min-height:570px; place-items:center; border:1px solid rgba(46,123,75,.24); overflow:hidden; background-color:#e3eee2; background-image:linear-gradient(rgba(46,123,75,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(46,123,75,.08) 1px,transparent 1px); background-size:24px 24px; box-shadow:inset 0 0 80px rgba(43,102,69,.07); }
.blueprint-grid { display:grid; grid-template-columns:repeat(4,clamp(76px,8vw,112px)); grid-template-rows:repeat(4,clamp(76px,8vw,112px)); border:2px solid var(--green-dark); background:rgba(246,248,238,.36); }
.grid-cell { position:relative; display:grid; padding:7px; place-items:center; border:1px solid rgba(46,123,75,.33); background:transparent; cursor:pointer; }
.grid-cell:hover { background:rgba(255,255,255,.4); }
.grid-cell.edge-left::after,.grid-cell.edge-top::after,.grid-cell.edge-right::after { position:absolute; content:""; background:rgba(46,123,75,.22); }
.grid-cell.edge-left::after { left:0; width:4px; height:100%; }.grid-cell.edge-top::after{ top:0; width:100%; height:4px; }.grid-cell.edge-right::after{ right:0; width:4px; height:100%; }
.placed-module { display:grid; width:100%; height:100%; place-items:center; border:2px solid var(--ink); background:var(--module-color); box-shadow:4px 4px 0 rgba(18,40,34,.18); animation:pop .2s ease-out; }
.placed-module span { font-size:26px; font-weight:900; }.placed-module small { margin-top:-12px; font-family:"Noto Sans JP"; font-size:8px; font-weight:700; }
@keyframes pop{from{transform:scale(.8);opacity:.3}to{transform:scale(1);opacity:1}}
.flow-label { position:absolute; z-index:2; display:flex; flex-direction:column; font-size:9px; }.flow-label b{ color:var(--green-dark); font-size:11px; }.flow-in{left:10px;top:47%;align-items:flex-end}.flow-out{right:10px;top:58%;}
.blueprint-hint { position:absolute; right:0; bottom:0; left:0; margin:0; padding:9px; color:white; background:var(--green-dark); font-size:10px; text-align:center; }
.blueprint-hint.is-error { background:var(--red); }.blueprint-hint.is-success { background:var(--ink); }

.module-tray { display:flex; flex-direction:column; }
#module-list { flex:1; }
.module-button { display:grid; grid-template-columns:37px 1fr auto; gap:10px; align-items:center; width:100%; margin-bottom:8px; padding:8px; border:1px solid var(--line); background:var(--white); cursor:pointer; text-align:left; transition:transform .15s,border-color .15s; }
.module-button:hover { transform:translateX(-3px); border-color:var(--green-dark); }.module-button.is-selected{ border-color:var(--ink); box-shadow:3px 3px 0 var(--green); }.module-button.is-used{ opacity:.35; cursor:not-allowed; }
.module-symbol{ display:grid; width:35px; height:35px; place-items:center; border:1px solid var(--ink); background:var(--module-color); font-size:14px; font-weight:900; }.module-button b{ display:block; font-family:"Noto Sans JP"; font-size:10px; }.module-button small{ color:#7a8882; font-size:8px; }.module-button > span:last-child{ color:#819089; font-size:9px; }
.module-tray .primary-button { width:100%; margin-top:12px; }

.build-screen { background:#f0e9df; }
.is-hidden { display:none!important; }
.model-kit-panel{display:grid;grid-template-columns:minmax(190px,.48fr) minmax(390px,1.15fr) minmax(280px,.62fr);max-width:1400px;min-height:590px;margin:0 auto;border:1px solid #242b27;background:#e6ddce;box-shadow:var(--shadow)}
.model-kit-cover{position:relative;overflow:hidden;padding:29px;color:var(--white);background:#1e3932}.model-kit-cover::before{position:absolute;right:-85px;bottom:-60px;width:230px;height:230px;content:"";border:35px solid rgba(135,211,79,.17);border-radius:50%}.model-series{display:flex;justify-content:space-between;color:#9bb3aa;font-size:8px;font-weight:700;letter-spacing:.12em}.model-series b{display:grid;width:28px;height:28px;place-items:center;border:1px solid var(--green);border-radius:50%;color:var(--green);font-size:9px}.model-title{position:relative;margin-top:72px}.model-title>span{display:inline-block;padding:5px 8px;color:var(--ink);background:var(--yellow);font-size:8px;font-weight:800;letter-spacing:.12em}.model-title h3{margin:12px 0 18px;font-size:clamp(38px,4.2vw,65px);font-weight:800;line-height:.86;letter-spacing:-.06em}.model-title p{color:#b9cac4;font-family:"Noto Sans JP";font-size:11px;line-height:1.7}.model-seal{position:absolute;right:23px;bottom:145px;display:grid;width:75px;height:75px;place-content:center;border:2px solid var(--yellow);border-radius:50%;color:var(--yellow);text-align:center;transform:rotate(8deg)}.model-seal span{font-size:7px}.model-seal b{font-size:13px;line-height:1.1}.model-manual{position:absolute;right:24px;bottom:25px;left:24px;padding-top:14px;border-top:1px solid rgba(255,255,255,.19)}.model-manual b{font-size:8px;letter-spacing:.14em}.model-manual p{margin:7px 0 0;color:#aabdb6;font-size:9px;line-height:1.6}
.model-diorama{position:relative;overflow:hidden;background:#c8ddd1;background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px);background-size:30px 30px}.model-diorama::after{position:absolute;right:0;bottom:0;left:0;height:21%;content:"";background:#8cbab7;clip-path:polygon(0 20%,10% 5%,20% 21%,31% 4%,43% 20%,54% 6%,68% 23%,81% 5%,92% 18%,100% 8%,100% 100%,0 100%)}.model-sky i{position:absolute;top:13%;right:14%;width:95px;height:95px;border-radius:50%;background:var(--yellow)}.model-sky i+ i{top:21%;right:auto;left:10%;width:80px;height:18px;border-radius:20px;background:rgba(255,255,255,.55)}.model-base{position:absolute;z-index:2;right:6%;bottom:17%;left:6%;height:52%;border:4px solid var(--ink);background:#7a9189;box-shadow:12px 12px 0 rgba(18,40,34,.18);transform:perspective(650px) rotateX(5deg) rotateY(-2deg)}.model-base::before{position:absolute;right:4%;bottom:4%;left:4%;height:4px;content:"";background:var(--yellow)}.model-slot{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed rgba(18,40,34,.36);color:rgba(18,40,34,.28);background:rgba(255,255,255,.13);transition:.28s cubic-bezier(.2,.85,.2,1)}.model-slot b{font-size:18px}.model-slot small{font-size:7px;font-weight:700}.model-slot.is-installed{border:3px solid var(--ink);color:var(--ink);box-shadow:5px 5px 0 rgba(18,40,34,.2);animation:snap-in .35s cubic-bezier(.17,.89,.32,1.5)}@keyframes snap-in{from{opacity:.1;transform:translateY(-65px) scale(1.35)}to{opacity:1;transform:translateY(0) scale(1)}}.model-pit{left:5%;bottom:13%;width:19%;height:36%}.model-pit.is-installed{background:var(--yellow)}.model-furnace{left:25%;bottom:13%;width:17%;height:62%}.model-furnace.is-installed{background:#f08a52}.model-boiler{left:43%;bottom:13%;width:17%;height:75%}.model-boiler.is-installed{background:#e9ddbd}.model-turbine{left:61%;bottom:13%;width:19%;height:37%;border-radius:45% 45% 0 0}.model-turbine.is-installed{background:#79c0d1}.model-scrubber{right:3%;bottom:13%;width:15%;height:54%}.model-scrubber.is-installed{background:#b8c8c0}.model-stack{right:5%;bottom:65%;width:8%;height:68%}.model-stack.is-installed{border-color:var(--ink);background:repeating-linear-gradient(0deg,#e8ece4 0,#e8ece4 14px,var(--orange) 14px,var(--orange) 22px)}.model-plaque{position:absolute;z-index:4;bottom:5%;left:8%;padding:7px 11px;border:2px solid var(--ink);background:#ece3d2;box-shadow:3px 3px 0 rgba(18,40,34,.23)}.model-plaque span,.model-plaque b{display:block;font-size:8px}.model-plaque b{color:var(--green-dark);font-size:7px}
.model-runner-panel{display:flex;flex-direction:column;padding:22px;background:#f7f2e8}.runner-topline{display:flex;justify-content:space-between;margin-bottom:14px;font-size:8px;font-weight:800;letter-spacing:.13em}.model-runner{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:11px;padding:18px;border:7px solid #9aa69f;background:#d8ded9}.model-runner::before{position:absolute;top:50%;right:0;left:0;height:7px;content:"";background:#9aa69f}.model-runner::after{position:absolute;top:0;bottom:0;left:50%;width:7px;content:"";background:#9aa69f}.model-runner button{position:relative;z-index:2;min-height:105px;padding:9px;border:2px solid #9aa69f;color:var(--ink);background:#eef0eb;cursor:pointer;transition:.18s}.model-runner button::before,.model-runner button::after{position:absolute;top:48%;width:13px;height:5px;content:"";background:#9aa69f}.model-runner button::before{left:-15px}.model-runner button::after{right:-15px}.model-runner button:hover:not(:disabled){border-color:var(--orange);transform:translateY(-3px)}.model-runner button.is-next{outline:4px solid var(--yellow);outline-offset:2px}.model-runner button.is-wrong{animation:rattle .25s linear}@keyframes rattle{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.model-runner button:disabled{opacity:.18;cursor:default}.runner-part{display:grid;width:52px;height:47px;margin:0 auto 5px;place-items:center;border:3px solid #6e7b75;background:#d7ded9;font-style:normal;font-weight:900}.part-furnace{height:58px;background:#e6b09a}.part-boiler{height:62px;background:#e8dfca}.part-turbine{border-radius:50%;background:#a9d3dc}.part-pit{background:#ead991}.part-scrubber{background:#c5cfca}.part-stack{width:22px;height:64px;background:repeating-linear-gradient(0deg,#d7ded9 0,#d7ded9 12px,#c4937c 12px,#c4937c 18px)}.model-runner button span{position:absolute;top:5px;left:7px;color:var(--orange);font-size:8px;font-weight:800}.model-runner button b{display:block;font-family:"Noto Sans JP";font-size:8px}.model-next-part{margin-top:auto;padding:14px 0 5px}.model-next-part span,.model-next-part b{display:block}.model-next-part span{color:#7b8983;font-size:7px;letter-spacing:.1em}.model-next-part b{margin-top:3px;font-family:"Noto Sans JP";font-size:12px}.model-complete-button{width:100%;margin-top:12px}
.build-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(330px,.7fr); gap:24px; max-width:1400px; margin:0 auto; }
.factory-stage { min-height:590px; border:1px solid #31302d; color:var(--white); background:#202e2b; box-shadow:var(--shadow); }
.factory-window { position:relative; height:500px; overflow:hidden; background-color:#334640; background-image:linear-gradient(rgba(255,255,255,.035) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.035) 2px,transparent 2px); background-size:58px 58px; }
.factory-window::before { position:absolute; top:16%; right:0; left:0; height:8px; content:""; background:#1b2724; box-shadow:0 5px 0 rgba(0,0,0,.12); }
.factory-lights { position:absolute; z-index:3; top:5%; right:6%; display:flex; gap:8px; }.factory-lights i{ width:11px;height:11px;border-radius:50%;background:#73817d; }.factory-lights i:first-child{ background:var(--green); box-shadow:0 0 13px var(--green); }
.crane { position:absolute; z-index:2; top:16%; left:36%; width:28%; height:26%; border-left:6px solid #17201e; border-right:6px solid #17201e; }.crane::before{position:absolute;top:-11px;left:-20%;width:140%;height:12px;content:"";background:var(--orange)}.crane span{position:absolute;top:0;left:50%;width:4px;height:80%;background:#17201e}.crane b{position:absolute;right:34%;bottom:0;width:32%;height:16%;border:5px solid var(--yellow);border-top:0;}
.assembly-machine { position:absolute; right:10%; bottom:12%; left:10%; display:flex; align-items:center; justify-content:center; height:44%; }
.machine-arm { position:relative; width:30%; height:42%; border:5px solid #15211e; background:#879a93; }.machine-arm::after{position:absolute;top:35%;width:55%;height:32%;content:"";border:5px solid #15211e;background:var(--orange)}.arm-left{clip-path:polygon(0 0,70% 0,100% 38%,100% 100%,0 100%)}.arm-left::after{right:-35%}.arm-right{clip-path:polygon(30% 0,100% 0,100% 100%,0 100%,0 38%)}.arm-right::after{left:-35%}
.workpiece { z-index:2; display:grid; width:26%; aspect-ratio:1; place-items:center; border:7px solid #121c19; border-radius:50%; background:#d7ded7; transition:transform .2s; }.workpiece i{width:40%;height:40%;border:5px solid #121c19;border-radius:50%;background:var(--blue)}.workpiece.is-working{animation:work .55s linear infinite}@keyframes work{to{transform:rotate(360deg)}}
.sparks { position:absolute; z-index:5; top:52%; left:50%; }.spark{position:absolute;width:4px;height:22px;background:var(--yellow);transform-origin:50% 0;animation:spark .45s ease-out forwards}@keyframes spark{to{transform:rotate(var(--angle)) translateY(80px);opacity:0}}
.conveyor { position:absolute; right:0; bottom:5%; left:0; display:flex; justify-content:space-around; height:15%; border-top:10px solid #141f1c; border-bottom:10px solid #141f1c; background:#62756e; }.conveyor span{width:10%;height:100%;border-right:7px solid #263632;border-left:7px solid #263632;border-radius:50%;}
.stage-caption { display:flex; gap:23px; align-items:center; min-height:89px; padding:16px 24px; }.stage-caption>span{padding:8px;border:1px solid var(--orange);color:var(--orange);font-size:9px;font-weight:800}.stage-caption small,.stage-caption strong{display:block}.stage-caption small{color:#8fa19b;font-size:8px}.stage-caption strong{margin-top:4px;font-family:"Noto Sans JP";font-size:15px}
.precision-panel { display:flex; flex-direction:column; }
.step-track { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:34px; }.step-dot{height:6px;background:#d7d4cc}.step-dot.is-current{background:var(--orange);box-shadow:0 0 0 2px rgba(240,113,58,.2)}.step-dot.is-done{background:var(--ink)}
.timing-display { padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.quality-readout{display:flex;align-items:end;margin-bottom:25px}.quality-readout small{margin-right:auto;color:#788680;font-size:8px;letter-spacing:.12em}.quality-readout strong{font-size:46px;line-height:.8}.quality-readout span{margin-left:5px;color:#7c8984;font-size:9px}
.timing-bar{position:relative;height:46px;overflow:hidden;border:3px solid var(--ink);background:#d9d4ca}.danger-zone{position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0,transparent 8px,rgba(223,89,79,.15) 8px,rgba(223,89,79,.15) 15px)}.good-zone,.perfect-zone{position:absolute;top:0;bottom:0}.good-zone{background:var(--yellow)}.perfect-zone{background:var(--green)}.timing-needle{position:absolute;z-index:3;top:-5px;bottom:-5px;width:4px;background:var(--ink);box-shadow:0 0 0 2px rgba(255,255,255,.65);transform:translateX(-50%)}
.timing-scale{display:flex;justify-content:space-between;margin-top:7px;color:#818c88;font-size:8px}.timing-scale span:nth-child(2){color:var(--green-dark);font-weight:800;letter-spacing:.12em}
.build-instruction { margin:auto 0 20px; padding:18px; background:#e9e4da; }.build-instruction b{font-family:"Noto Sans JP";font-size:12px}.build-instruction p{margin:7px 0 0;color:#687772;font-size:10px;line-height:1.65}.precision-panel .primary-button{width:100%}

.operate-screen { background:#e6edf0; }
.operation-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(310px,.6fr);gap:20px;max-width:1400px;margin:0 auto}.plant-monitor{border:1px solid #1f3838;background:#152e2c;box-shadow:var(--shadow);color:var(--white)}.monitor-topline{display:flex;justify-content:space-between;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.14);color:#9bb5ad;font-size:9px;letter-spacing:.13em}.monitor-topline b{color:var(--white)}.live-dot{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green)}
.plant-diagram{position:relative;display:grid;grid-template-columns:1fr 45px 1fr 45px 1fr 45px 1fr;align-items:center;min-height:430px;padding:50px 28px;overflow:hidden;background-color:#173532;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:35px 35px}.op-module{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:175px;border:1px solid rgba(255,255,255,.35);background:#21443f;box-shadow:8px 8px 0 rgba(0,0,0,.13)}.op-module small{margin-bottom:15px;color:#9bb1aa;font-family:"Noto Sans JP";font-size:9px}.op-module b{font-size:clamp(25px,2.5vw,40px);line-height:1}.op-module>span{margin-top:5px;color:#8fa8a1;font-size:9px}.waste-module{border-top:5px solid var(--yellow)}.furnace-module{border-top:5px solid var(--orange)}.turbine-module{border-top:5px solid var(--blue)}.city-module{border-top:5px solid var(--green)}
.level-meter{width:60%;height:7px;margin-top:17px;background:#122825}.level-meter i{display:block;width:55%;height:100%;background:var(--yellow);transition:width .3s}.furnace-fire{display:flex;gap:3px;align-items:end;height:27px;margin-top:10px}.furnace-fire i{display:block;width:10px;height:23px;border-radius:80% 20% 55% 45%;background:var(--orange);animation:fire .7s ease-in-out infinite alternate}.furnace-fire i:nth-child(2){height:16px;animation-delay:-.4s}.furnace-fire i:nth-child(3){height:20px;animation-delay:-.2s}@keyframes fire{to{transform:scaleY(.65) rotate(7deg)}}
.turbine-wheel{display:grid;width:34px;height:34px;margin-top:12px;place-items:center;border:3px dashed var(--blue);border-radius:50%;animation:spin 2s linear infinite}.turbine-wheel i{width:9px;height:9px;border-radius:50%;background:var(--blue)}@keyframes spin{to{transform:rotate(360deg)}}.mini-city{display:flex;gap:2px;align-items:end;height:30px;margin-top:8px}.mini-city i{width:9px;height:60%;background:var(--green)}.mini-city i:nth-child(2){height:100%}.mini-city i:nth-child(3){height:75%}
.flow-arrow{position:relative;z-index:2;height:3px;background:rgba(255,255,255,.24)}.flow-arrow::after{position:absolute;right:0;top:-4px;content:"";border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--green)}.flow-arrow i{display:block;width:9px;height:3px;background:var(--green);animation:flow 1.4s linear infinite}@keyframes flow{to{transform:translateX(35px)}}
.process-line{position:absolute;inset:0;width:100%;height:100%;opacity:.1}.process-line path{fill:none;stroke:var(--green);stroke-width:2;stroke-dasharray:5 8}
.status-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.14)}.status-strip div{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;padding:16px 22px;border-right:1px solid rgba(255,255,255,.12)}.status-strip div:last-child{border:0}.status-strip span{grid-column:1/3;color:#8da69e;font-size:8px;letter-spacing:.08em}.status-strip strong{margin-top:4px;font-size:21px}.status-strip small{align-self:end;color:var(--green);font-size:8px;font-weight:800}
.control-room{padding:0;background:rgba(255,253,247,.86)}.control-title{display:flex;align-items:center;padding:13px 17px;color:var(--white);background:var(--ink)}.control-title>div{display:flex;gap:4px;margin-right:10px}.control-title i{width:6px;height:6px;border-radius:50%;background:#778c85}.control-title i:first-child{background:var(--green)}.control-title span{font-size:9px;font-weight:800;letter-spacing:.12em}.control-title b{margin-left:auto;color:var(--yellow);font-size:8px}
.control-group{margin:0 22px;padding:21px 0 12px;border-bottom:1px solid var(--line)}.control-group label{display:flex;align-items:center;margin-bottom:17px}.control-group label span{display:grid;width:24px;height:24px;margin-right:9px;place-items:center;border:1px solid var(--blue);border-radius:50%;color:#167f9d;font-size:8px;font-weight:800}.control-group label b{font-family:"Noto Sans JP";font-size:11px}.control-group output{margin-left:auto;color:#167f9d;font-size:14px;font-weight:800}
input[type="range"]{width:100%;height:5px;appearance:none;border-radius:0;background:#cdd4d1;cursor:pointer}input[type="range"]::-webkit-slider-thumb{width:19px;height:19px;appearance:none;border:3px solid var(--white);border-radius:50%;background:#167f9d;box-shadow:0 0 0 1px #167f9d}input[type="range"]::-moz-range-thumb{width:15px;height:15px;border:3px solid var(--white);border-radius:50%;background:#167f9d;box-shadow:0 0 0 1px #167f9d}.range-labels{display:flex;justify-content:space-between;margin-top:7px;color:#83908b;font-size:7px}
.event-card{display:grid;grid-template-columns:auto 1fr;gap:12px;margin:18px 22px;padding:14px;background:#e7eeee}.event-card.is-warning{background:#f3dfd4}.event-icon{display:grid;width:28px;height:28px;place-items:center;border-radius:50%;color:var(--white);background:#167f9d;font-size:11px;font-weight:800}.event-card.is-warning .event-icon{background:var(--orange)}.event-card small{color:#778a84;font-size:7px;letter-spacing:.13em}.event-card p{margin:5px 0 0;color:#4f625c;font-size:9px;line-height:1.5}.control-room .primary-button{width:calc(100% - 44px);margin:0 22px 20px}

.decision-overlay { position:fixed; z-index:45; inset:0; display:grid; place-items:center; padding:20px; background:rgba(8,24,21,.72); backdrop-filter:blur(7px); }
.decision-overlay[hidden] { display:none; }
.decision-dialog { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(460px,1.3fr); width:min(950px,94vw); max-height:90vh; overflow:auto; border:2px solid var(--ink); background:var(--paper); box-shadow:18px 18px 0 rgba(0,0,0,.24); animation:decision-in .35s cubic-bezier(.17,.89,.32,1.2); }
@keyframes decision-in { from { opacity:0; transform:translateY(20px) scale(.97); } }
.decision-visual { position:relative; display:grid; min-height:430px; place-items:center; overflow:hidden; color:var(--ink); background:#b9d8cd; }
.decision-visual::before { position:absolute; width:190px; height:190px; content:""; border-radius:50%; background:var(--yellow); }
.decision-visual::after { position:absolute; right:0; bottom:0; left:0; height:31%; content:""; background:#6fb4bc; clip-path:polygon(0 14%,14% 2%,29% 18%,43% 0,58% 16%,73% 3%,87% 19%,100% 4%,100% 100%,0 100%); }
.decision-visual>span { position:relative; z-index:2; font-size:52px; font-weight:900; letter-spacing:-.08em; transform:rotate(-7deg); }
.decision-visual i { position:absolute; z-index:3; bottom:20%; width:32px; height:90px; border:3px solid var(--ink); background:#e8e4d7; }
.decision-visual i:nth-of-type(1) { left:15%; height:65px; background:var(--green); }
.decision-visual i:nth-of-type(2) { left:35%; height:105px; background:var(--orange); }
.decision-visual i:nth-of-type(3) { right:16%; height:80px; background:var(--blue); }
.decision-content { padding:36px; }
.decision-content h3 { margin-bottom:12px; font-family:"Noto Sans JP"; font-size:clamp(25px,3vw,38px); font-weight:900; line-height:1.35; letter-spacing:-.035em; }
.decision-content>p:not(.card-label) { margin-bottom:24px; color:#64756f; font-size:11px; line-height:1.8; }
.decision-options { display:grid; gap:10px; }
.decision-choice { display:grid; grid-template-columns:43px 1fr auto; gap:13px; align-items:center; width:100%; padding:13px; border:1px solid var(--line); color:var(--ink); background:var(--white); cursor:pointer; text-align:left; transition:.15s; }
.decision-choice:hover { border-color:var(--ink); box-shadow:5px 5px 0 var(--yellow); transform:translate(-2px,-2px); }
.decision-choice>span:first-child { display:grid; width:40px; height:40px; place-items:center; border-radius:50%; color:var(--white); background:var(--green-dark); font-size:15px; font-weight:900; }
.decision-choice b,.decision-choice small { display:block; }
.decision-choice b { font-family:"Noto Sans JP"; font-size:11px; }
.decision-choice small { margin-top:4px; color:#6d7c77; font-size:8px; }
.decision-choice>i { color:var(--orange); font-size:8px; font-style:normal; font-weight:800; }
.real-wte-note { display:grid; grid-template-columns:auto 1fr; gap:10px; margin-top:20px; padding:12px; border-left:3px solid var(--green-dark); background:#e0ebe2; }
.real-wte-note b { color:var(--green-dark); font-size:8px; letter-spacing:.1em; }
.real-wte-note span { color:#53675f; font-size:8px; line-height:1.6; }

.result-screen{position:relative;overflow:hidden;background:#eef1e7;text-align:center}.result-screen::before{position:absolute;inset:0;content:"";opacity:.26;background-image:radial-gradient(circle at 50% 10%,var(--yellow) 0,transparent 29%),linear-gradient(115deg,transparent 48%,rgba(46,123,75,.12) 49%,rgba(46,123,75,.12) 51%,transparent 52%);pointer-events:none}.result-top,.score-board,.result-actions,.credits{position:relative;z-index:2}.eyebrow.centered{justify-content:center;color:var(--green-dark)}.award-mark{display:grid;width:100px;height:100px;margin:0 auto 18px;place-content:center;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);box-shadow:0 0 0 6px var(--paper),0 0 0 7px var(--ink);transform:rotate(-5deg)}.award-mark span,.award-mark small{font-size:7px;font-weight:800;letter-spacing:.16em}.award-mark b{font-size:33px;line-height:1}.result-top h2{margin:0 0 13px;font-family:"Noto Sans JP";font-size:clamp(32px,4vw,58px);font-weight:900;line-height:1.25;letter-spacing:-.045em}.result-top p{color:#64756f;font-size:12px}.score-board{display:grid;grid-template-columns:.6fr 1.5fr 1fr;gap:28px;align-items:center;max-width:1020px;margin:26px auto;padding:24px 30px;border:1px solid var(--line);background:rgba(255,253,247,.72);box-shadow:var(--shadow);text-align:left}.total-score{padding-right:24px;border-right:1px solid var(--line)}.total-score small{display:block;color:#71817b;font-size:8px;letter-spacing:.12em}.total-score strong{font-size:56px;line-height:1}.total-score span{color:#7c8985;font-size:10px}.score-breakdown>div{display:grid;grid-template-columns:65px 1fr 26px;gap:10px;align-items:center;margin:9px 0}.score-breakdown span{font-size:8px;font-weight:800;letter-spacing:.1em}.score-breakdown div div{height:6px;background:#d9ded8}.score-breakdown i{display:block;width:0;height:100%;background:var(--green-dark);transition:width 1s ease}.score-breakdown b{font-size:11px}.impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.impact-grid div{padding:12px 9px;background:#e5ebe2;text-align:center}.impact-grid small,.impact-grid strong,.impact-grid span{display:block}.impact-grid small{color:#6e7e78;font-size:7px}.impact-grid strong{margin:6px 0 1px;font-size:19px}.impact-grid span{color:var(--green-dark);font-size:7px;font-weight:700}.result-actions{display:flex;gap:14px;justify-content:center}.secondary-button{color:var(--ink);border:1px solid var(--ink);background:transparent;box-shadow:none}.credits{margin:25px 0 0;color:#89968f;font-size:8px;letter-spacing:.18em}.confetti span{position:absolute;z-index:1;top:-10%;width:8px;height:15px;background:var(--confetti);animation:fall var(--fall-time) linear infinite;animation-delay:var(--delay);transform:rotate(var(--rotation))}@keyframes fall{to{top:110%;transform:rotate(580deg)}}

.result-love-panel { position:relative; z-index:2; display:grid; grid-template-columns:1.3fr .8fr .55fr; max-width:1020px; margin:-8px auto 24px; border:1px solid var(--ink); background:#18352f; box-shadow:var(--shadow); color:var(--white); text-align:left; }
.favorite-equipment { display:grid; grid-template-columns:auto 1fr auto; gap:15px; align-items:center; padding:20px 22px; border-right:1px solid rgba(255,255,255,.14); }
.favorite-symbol { display:grid; width:62px; height:62px; place-items:center; border:2px solid var(--ink); border-radius:50%; color:var(--ink); background:var(--yellow); box-shadow:4px 4px 0 rgba(0,0,0,.3); font-size:27px; font-weight:900; }
.favorite-equipment small,.town-legacy>small,.love-result>small { color:#91aaa1; font-size:7px; font-weight:800; letter-spacing:.1em; }
.favorite-equipment h3 { margin:4px 0; font-family:"Noto Sans JP"; font-size:15px; }
.favorite-equipment p { margin:0; color:#b2c4bd; font-size:8px; line-height:1.5; }
.favorite-equipment button { align-self:end; padding:7px 9px; border:1px solid var(--green); color:var(--green); background:transparent; cursor:pointer; font-size:8px; font-weight:800; }
.favorite-equipment button.is-favorite { color:var(--ink); background:var(--green); }
.town-legacy { padding:20px; border-right:1px solid rgba(255,255,255,.14); }
#town-legacy-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.legacy-chip { padding:5px 7px; border:1px solid rgba(255,255,255,.25); color:#d7e2dd; font-size:7px; }
.legacy-chip.is-empty { opacity:.45; }
.love-result { padding:20px; text-align:center; }
.love-result strong { display:block; margin:3px 0; color:var(--orange); font-size:27px; }
.love-result strong b { font-size:inherit; }
.love-result>span { display:block; color:var(--lime); font-family:"Noto Sans JP"; font-size:8px; }
.love-result>div { height:4px; margin:9px 0; background:rgba(255,255,255,.14); }
.love-result>div i { display:block; width:0; height:100%; background:var(--orange); transition:width 1s; }
.love-result p { margin:0; color:#a6bbb3; font-size:7px; line-height:1.4; }

.collection-modal { position:fixed; z-index:60; inset:0; display:grid; place-items:center; padding:20px; }
.collection-modal[hidden] { display:none; }
.collection-backdrop { position:absolute; inset:0; background:rgba(8,23,19,.77); backdrop-filter:blur(9px); }
.collection-book { position:relative; display:flex; flex-direction:column; width:min(1100px,95vw); max-height:92vh; overflow:hidden; border:2px solid var(--ink); background:var(--paper); box-shadow:19px 19px 0 rgba(0,0,0,.28); }
.collection-book>header { display:grid; grid-template-columns:1fr auto auto; gap:25px; align-items:center; padding:20px 25px; border-bottom:1px solid var(--line); background:#dce9de; }
.collection-book>header p { margin:0 0 3px; color:var(--green-dark); font-size:7px; font-weight:800; letter-spacing:.16em; }
.collection-book>header h2 { margin:0; font-family:"Noto Sans JP"; font-size:26px; }
.collection-book>header>div:first-child>span { color:#61736c; font-size:8px; }
.collection-summary { display:flex; gap:15px; }
.collection-summary span { color:#72837c; font-size:7px; letter-spacing:.08em; }
.collection-summary b { display:block; margin-top:3px; color:var(--ink); font-size:14px; }
.collection-close { display:grid; width:38px; height:38px; place-items:center; border:1px solid var(--ink); border-radius:50%; background:transparent; cursor:pointer; font-size:20px; }
.fact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:18px 25px; overflow-y:auto; }
.fact-card { position:relative; min-height:190px; padding:17px; border:1px solid var(--line); overflow:hidden; background:var(--white); }
.fact-card::after { position:absolute; right:-30px; bottom:-34px; width:100px; height:100px; content:""; border:15px solid var(--fact-color,var(--green)); border-radius:50%; opacity:.12; }
.fact-card-number { color:var(--fact-color,var(--green-dark)); font-size:9px; font-weight:800; }
.fact-card-icon { display:grid; width:43px; height:43px; margin:13px 0; place-items:center; border:2px solid var(--ink); border-radius:50%; background:var(--fact-color,var(--green)); font-size:14px; font-weight:900; }
.fact-card h3 { margin:0 0 7px; font-family:"Noto Sans JP"; font-size:12px; }
.fact-card p { position:relative; z-index:1; margin:0; color:#5c6e67; font-size:8px; line-height:1.7; }
.fact-card.is-locked { display:grid; place-content:center; filter:grayscale(1); background:#dddcd5; text-align:center; }
.fact-card.is-locked::before { content:"?"; margin-bottom:8px; color:#a1aaa5; font-size:38px; font-weight:900; }
.fact-card.is-locked>* { display:none; }
.fact-card.is-locked::after { display:none; }
.fact-card.is-locked span { display:block; color:#86918d; font-size:8px; }
.collection-book>footer { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:12px 25px; border-top:1px solid var(--line); background:#ece9e0; }
.collection-book>footer p { margin:0; color:#71817b; font-size:7px; }
.collection-book>footer div { display:flex; gap:14px; }
.collection-book>footer a { color:var(--green-dark); font-size:7px; font-weight:700; }

.toast{position:fixed;z-index:50;bottom:25px;left:50%;padding:12px 18px;border-radius:3px;color:var(--white);background:var(--ink);box-shadow:var(--shadow);font-size:11px;font-weight:700;opacity:0;pointer-events:none;transform:translate(-50%,15px);transition:.25s}.toast.is-visible{opacity:1;transform:translate(-50%,0)}

@media (max-width: 1050px) {
  .result-love-panel { grid-template-columns:1.4fr .6fr; }
  .town-legacy { border-right:0; }
  .love-result { grid-column:1/3; border-top:1px solid rgba(255,255,255,.14); }
  .fact-grid { grid-template-columns:repeat(2,1fr); }
  .model-kit-panel{grid-template-columns:210px 1fr}.model-runner-panel{grid-column:1/3}.model-runner{grid-template-columns:repeat(6,1fr)}.model-runner::before,.model-runner::after{display:none}.model-runner button{min-height:90px}.model-next-part{display:inline-block;margin-right:15px}.model-complete-button{width:auto;float:right}
  .design-layout{grid-template-columns:190px 1fr}.module-tray{grid-column:1/3}.module-tray #module-list{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.module-button{margin:0}.module-tray .primary-button{width:auto;align-self:flex-end}
  .build-layout,.operation-layout{grid-template-columns:1fr}.factory-stage{min-height:450px}.factory-window{height:380px}.precision-panel{min-height:460px}.plant-diagram{min-height:350px}.control-room{display:grid;grid-template-columns:repeat(3,1fr)}.control-title,.event-card,.control-room .primary-button{grid-column:1/4}.control-room .primary-button{justify-self:center;max-width:360px}.control-group{margin:0 14px}.score-board{grid-template-columns:.55fr 1.45fr}.impact-grid{grid-column:1/3}
}

@media (max-width: 740px) {
  .topbar { grid-template-columns:1fr auto; min-height:65px; padding:9px 15px; }
  .top-actions { gap:7px; }
  .collection-button { width:38px; min-height:38px; justify-content:center; padding:0; border-radius:50%; }
  .collection-button span,
  .collection-button b { display:none; }
  .brand-mark { width:36px; height:36px; }
  .brand b { font-size:14px; }
  .chapter-progress { position:absolute; top:65px; right:0; left:0; padding:6px; background:rgba(244,241,233,.88); }
  .best-score { display:none; }
  .screen { padding:112px 14px 30px; }
  .title-screen { min-height:100svh; padding-top:100px; }
  .title-screen::before { display:none; }
  .title-copy { width:100%; padding-top:24px; }
  .title-lead br { display:none; }
  .love-preview { grid-template-columns:1fr 76px auto; margin-bottom:18px; padding:8px; }
  .hero-visual { top:43%; bottom:76px; width:100%; opacity:.9; }
  .plant { right:0; width:88%; height:43%; }
  .hero-tag { display:none; }
  .mode-preview { width:100%; min-height:76px; }
  .mode-preview div { padding:10px; }
  .mode-preview small { display:none; }
  .scene-heading { grid-template-columns:50px 1fr; gap:13px; margin-bottom:18px; }
  .chapter-label span { width:39px; height:39px; }
  .scene-heading>div:nth-child(2) p { font-size:10px; }
  .scene-kpi { grid-column:2; padding:5px 10px; }
  .scene-heading h2 { font-size:26px; }
  .design-layout { display:block; }
  .brief-card { display:none; }
  .blueprint-panel { min-height:430px; }
  .blueprint-grid { grid-template-columns:repeat(4,70px); grid-template-rows:repeat(4,70px); }
  .flow-label { display:none; }
  .module-tray { margin-top:12px; padding:14px; }
  .module-tray #module-list { grid-template-columns:repeat(2,1fr); }
  .module-button { grid-template-columns:30px 1fr; padding:6px; }
  .module-button>span:last-child,
  .module-button small { display:none; }
  .module-symbol { width:29px; height:29px; }
  .model-kit-panel{display:block;min-height:0}.model-kit-cover{min-height:245px;padding:18px}.model-title{margin-top:22px}.model-title h3{font-size:42px}.model-title p{font-size:9px}.model-seal{right:18px;bottom:65px;width:60px;height:60px}.model-manual{right:18px;bottom:12px;left:18px}.model-diorama{height:350px}.model-runner-panel{padding:15px}.model-runner{grid-template-columns:repeat(3,1fr);gap:7px;padding:13px;border-width:5px}.model-runner button{min-height:82px;padding:5px}.runner-part{width:38px;height:38px}.part-stack{width:16px;height:46px}.model-runner button::before,.model-runner button::after{display:none}.model-next-part{display:block}.model-complete-button{width:100%;float:none}
  .factory-stage { min-height:360px; }
  .factory-window { height:290px; }
  .stage-caption { min-height:69px; }
  .precision-panel { min-height:420px; margin-top:12px; padding:18px; }
  .plant-diagram { grid-template-columns:1fr 20px 1fr; grid-template-rows:1fr 26px 1fr; padding:22px 15px; }
  .op-module { min-height:125px; }
  .arrow-2 { display:none; }
  .arrow-3 { grid-column:2; grid-row:3; }
  .turbine-module { grid-column:1; grid-row:3; }
  .city-module { grid-column:3; grid-row:3; }
  .status-strip div { padding:11px; }
  .control-room { display:block; }
  .control-room .primary-button { width:calc(100% - 44px); }
  .decision-overlay { padding:10px; }
  .decision-dialog { display:block; width:100%; max-height:94vh; }
  .decision-visual { min-height:145px; }
  .decision-visual::before { width:105px; height:105px; }
  .decision-visual>span { font-size:34px; }
  .decision-visual i { bottom:7%; height:55px; }
  .decision-visual i:nth-of-type(1) { height:40px; }
  .decision-visual i:nth-of-type(2) { height:65px; }
  .decision-visual i:nth-of-type(3) { height:48px; }
  .decision-content { padding:20px; }
  .decision-content h3 { font-size:23px; }
  .decision-choice { grid-template-columns:38px 1fr; padding:10px; }
  .decision-choice>i { grid-column:2; }
  .score-board { display:block; padding:18px; }
  .total-score { margin-bottom:18px; padding:0 0 15px; border:0; border-bottom:1px solid var(--line); text-align:center; }
  .impact-grid { margin-top:18px; }
  .result-actions { flex-direction:column; align-items:center; }
  .result-actions button { width:90%; max-width:330px; }
  .result-screen { padding-top:112px; }
  .award-mark { width:83px; height:83px; }
  .result-top h2 { font-size:31px; }
  .result-love-panel { display:block; }
  .favorite-equipment { grid-template-columns:auto 1fr; border:0; border-bottom:1px solid rgba(255,255,255,.14); }
  .favorite-equipment button { grid-column:1/3; width:100%; }
  .town-legacy { border-bottom:1px solid rgba(255,255,255,.14); }
  .love-result { border:0; }
  .collection-modal { padding:0; }
  .collection-book { width:100%; max-height:100vh; min-height:100vh; border:0; }
  .collection-book>header { grid-template-columns:1fr auto; gap:10px; padding:15px; }
  .collection-summary { grid-column:1/3; grid-row:2; justify-content:space-between; }
  .collection-close { grid-column:2; grid-row:1; }
  .fact-grid { grid-template-columns:1fr; padding:12px 15px; }
  .fact-card { min-height:170px; }
  .collection-book>footer { display:block; padding:10px 15px; }
  .collection-book>footer div { flex-wrap:wrap; margin-top:7px; }
}

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