:root {
  --ink: #0c172a;
  --panel: #152b38;
  --btn: #25485f;
  --line: #93aaba;
  --orange: #ff7849;
  --yellow: #f0d35a;
  --text: #f7fbff;
  --muted: #a9b9c6;
  --card: #1b4558;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Trebuchet MS", "Verdana", "Liberation Sans", sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 480px at 78% 8%, rgba(246, 196, 92, 0.35), transparent 55%),
    radial-gradient(700px 520px at 12% 90%, rgba(120, 196, 214, 0.35), transparent 50%),
    #1a2834;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
#app, .stage { height: 100%; }
.stage { display: flex; flex-direction: column; background: #102838; }

header {
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 28px;
  background: #152b38;
  border-bottom: 1px solid #0c172a;
}
.logo {
  color: var(--yellow);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 28px;
  margin: 0;
}
.screen-title {
  color: var(--orange);
  letter-spacing: 0.16em;
  font-weight: 800;
  font-size: 16px;
}
.resources {
  justify-self: end;
  display: flex;
  gap: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.resources span { color: #fff; }

.main { flex: 1; min-height: 0; display: flex; overflow: auto; }
.layout {
  flex: 1;
  display: grid;
  gap: 14px;
  padding: 14px;
  min-height: 0;
}
.layout.menu, .layout.map, .layout.sandbox { grid-template-columns: 1fr 380px; }
.layout.plan, .layout.run { grid-template-columns: 280px 1fr 280px; }
.layout.results { grid-template-columns: 1fr 400px; }
.inventory .btn.primary { margin-top: auto; }
.phone-only { display: none; }
.layout.solo { grid-template-columns: 1fr; place-items: center; }
.board-wrap { min-height: 0; position: relative; }
canvas { width: 100%; height: 100%; display: block; }

.panel {
  background: var(--panel);
  border: 2px solid var(--orange);
  border-radius: 12px;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.panel.wide { width: min(1080px, 100%); }
.panel h2 {
  margin: 0 0 4px;
  color: var(--orange);
  font-size: 15px;
  letter-spacing: 0.12em;
}
.sub { margin: 0; color: var(--orange); letter-spacing: 0.08em; font-weight: 800; font-size: 14px; }
.goal-compact { display: none; color: #fff; font-weight: 800; letter-spacing: 0.04em; }

.btn, .tool, .chap {
  min-height: 52px;
  border-radius: 8px;
  border: 2px solid var(--line);
  background: var(--btn);
  color: white;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.btn.primary, .tool.on, .chap.on, .btn.on { background: var(--orange); border-color: var(--orange); }
.btn:disabled, .chap:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.block { width: 100%; }
.tools { display: flex; flex-direction: column; gap: 8px; }
.row-btns { display: flex; gap: 8px; }
.row-btns .btn { flex: 1; }

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #d5e4ee;
  letter-spacing: 0.04em;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}
.check i {
  width: 16px;
  height: 16px;
  border: 2px solid #9fb4c2;
  border-radius: 2px;
  flex: none;
  margin-top: 1px;
}
.check.met i { background: var(--orange); border-color: var(--orange); }
.check.met { color: #fff; }
.forecast { color: var(--muted); font-size: 13px; line-height: 1.35; min-height: 2.6em; }
.pips { letter-spacing: 0.2em; color: var(--orange); font-weight: 800; }

.big {
  font-size: 92px;
  line-height: 0.9;
  color: var(--orange);
  font-weight: 800;
  text-align: center;
  margin: 8px 0;
}
.stars { text-align: center; color: var(--orange); font-size: 28px; letter-spacing: 0.35em; }
.stat { display: flex; justify-content: space-between; font-weight: 800; letter-spacing: 0.06em; }
.caused {
  margin: 0;
  padding: 0 0 0 16px;
  color: #d5e4ee;
  font-size: 13px;
  line-height: 1.45;
  overflow: auto;
  max-height: 160px;
}
.playback { display: flex; gap: 6px; }
.playback .btn { min-height: 40px; font-size: 12px; }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.card {
  background: var(--card);
  border: 2px solid #e07040;
  border-radius: 10px;
  min-height: 148px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.card.on { outline: 3px solid var(--yellow); }
.card b { letter-spacing: 0.08em; font-size: 13px; }
.card small { color: var(--muted); letter-spacing: 0.06em; }
.icon { width: 72px; height: 72px; }
.detail { color: #d5e4ee; min-height: 3em; line-height: 1.4; }

.toggle {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  background: #1c3948;
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.sand-row {
  background: transparent;
  border: 0;
  text-align: left;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 8px 0;
}

nav {
  height: 64px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--ink);
  border-top: 1px solid #061018;
}
nav button {
  background: none;
  border: 0;
  color: #9aafbf;
  letter-spacing: 0.14em;
  font-weight: 800;
  font-size: 13px;
  padding: 10px;
}
nav button.on { color: var(--orange); }

@media (max-width: 860px) {
  header { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 14px 8px; min-height: 0; }
  .desk { display: none; }
  .phone-only { display: inline; }
  h2.phone-only, p.phone-only { display: block; }
  .logo { font-size: 22px; }
  .screen-title { letter-spacing: 0.08em; font-size: 13px; }
  .resources { margin-left: auto; }
  .layout, .layout.menu, .layout.map, .layout.sandbox, .layout.plan, .layout.run, .layout.results {
    display: flex;
    flex-direction: column;
    padding: 10px;
  }
  .board-wrap { min-height: 30vh; max-height: 38vh; order: 1; }
  .objectives { order: 0; }
  .inventory, .side { order: 2; }
  .goal-compact { display: block; }
  .checks { display: none; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card { min-height: 96px; padding: 6px; }
  .icon { width: 48px; height: 48px; }
  .detail { min-height: 0; }
  .big { font-size: 72px; }
  nav { height: 56px; }
  nav button { font-size: 10px; letter-spacing: 0.08em; padding: 6px; }
  .tools { display: grid; grid-template-columns: repeat(5, 1fr); }
  .tool { min-height: 44px; font-size: 11px; letter-spacing: 0.04em; padding: 4px; }
  .tool .long { display: none; }
  .tool .short { display: inline; }
}
@media (min-width: 861px) {
  .tool .short { display: none; }
}

/* Campaign controls share the city, with independently scrolling desktop panels. */
button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
button:hover:not(:disabled) { filter: brightness(1.12); }
button:disabled { cursor: default; }
.stage > header, .stage > nav { flex-shrink: 0; }
.panel { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #537283 var(--panel); }
.layout > * { min-width: 0; }
.layout.plan, .layout.run { grid-template-columns: 250px minmax(260px,1fr) 260px; }
.panel h2.mission-heading { color: var(--yellow); font-size: 22px; letter-spacing: 0; }
.mission-heading { margin: 4px 0; font-size: 16px; }
.eyebrow { color: var(--muted); font-size: 11px; font-weight: bold; letter-spacing: .12em; }
.brief, .tool-copy, .inspect-copy, .hint-copy, .help-copy { font-size: 13px; line-height: 1.5; margin: 0; }
.brief { color: #e4edf0; }
.muted, .help-copy { color: var(--muted); }
.checks, .result-checks { display: grid; gap: 10px; }
.check i { font-style: normal; font-size: 12px; line-height: 12px; }
.forecast-box { border-top: 1px solid #416272; padding-top: 12px; margin-top: 4px; }
.forecast-box > b { color: var(--yellow); font-size: 11px; letter-spacing: .12em; }
.forecast-box .forecast { margin: 6px 0 0; min-height: 0; }
.hint-copy { border-left: 2px solid var(--yellow); padding-left: 10px; color: #f0e6be; }
.hint-copy.muted { color: var(--muted); border-color: #416272; }
.btn.small { min-height: 38px; padding: 8px; font-size: 11px; letter-spacing: .04em; flex-shrink: 0; }
.inventory .tools { gap: 6px; }
.inventory .tool { min-height: 40px; font-size: 12px; }
.tool-copy { color: #c7d9e2; }
.action-slots { display: grid; gap: 6px; margin: 4px 0; }
.action-slot { display: flex; gap: 8px; align-items: center; text-align: left; background: #102838; border: 1px dashed #527282; border-radius: 6px; color: #8ca9b8; padding: 8px; min-height: 38px; font-size: 11px; }
.action-slot b { color: var(--yellow); }
.action-slot em { margin-left: auto; font-size: 18px; font-style: normal; }
.action-slot.filled { border-style: solid; color: white; border-color: var(--orange); }
.board-wrap { overflow: hidden; border-radius: 10px; background: #8dcf73; }
.board-tag, .board-legend, .board-label, .live-chain { position: absolute; pointer-events: none; background: rgba(12,23,42,.9); border-radius: 6px; padding: 10px 12px; color: #fff; }
.board-tag { top: 12px; left: 12px; right: 12px; font-size: 11px; letter-spacing: .08em; text-align: center; }
.board-legend { bottom: 12px; left: 12px; right: 12px; font-size: 10px; letter-spacing: .05em; text-align: center; color: #f0d35a; }
.board-label { bottom: 18px; left: 18px; right: 18px; display: grid; gap: 6px; }
.board-label b { color: var(--yellow); font-size: 24px; }
.board-label span { max-width: 560px; font-size: 14px; line-height: 1.5; }
.live-chain { top: 12px; left: 12px; color: var(--yellow); font-size: 22px; font-weight: bold; }
.chapter-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.chapter-tabs .chap { flex: 1 1 45%; min-height: 42px; font-size: 10px; padding: 6px; letter-spacing: .04em; }
.chapter-tabs small { display: block; opacity: .8; margin-top: 3px; }
.mission-list { display: grid; gap: 8px; }
.mission { display: flex; align-items: center; gap: 8px; justify-content: space-between; text-align: left; background: #1b3b4c; border: 1px solid #537283; border-radius: 6px; padding: 12px; min-height: 52px; font-size: 12px; }
.mission.on { border-color: var(--yellow); background: #355061; }
.mission small { color: var(--yellow); letter-spacing: .08em; white-space: nowrap; }
.mission:disabled { opacity: .45; }
.transport { display: grid; gap: 10px; }
.transport .playback .btn { flex: 1; }
.transport label { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.transport input { width: 100%; margin: 0; accent-color: var(--orange); min-height: 28px; }
.event-log { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; min-height: 150px; font-size: 12px; line-height: 1.5; }
.event-log li { border-bottom: 1px solid #315363; padding: 8px 0; }
.event-log li span { color: var(--orange); display: inline-block; width: 30px; font-size: 10px; }
.event-log li:last-child { color: var(--yellow); }
.completion { margin: 0; background: #254d4b; color: var(--yellow); padding: 10px; border-radius: 6px; font-size: 12px; font-weight: bold; }
.save-note { padding: 6px 14px; background: #664526; color: white; font-size: 12px; }
details { margin-top: 4px; }
summary { cursor: pointer; color: var(--muted); font-size: 11px; padding: 5px 0; }
details p { margin-top: 5px !important; }

@media (min-width: 861px) and (max-width: 1100px) {
  .layout.plan, .layout.run { grid-template-columns: 210px minmax(200px,1fr) 220px; gap: 8px; padding: 8px; }
  .logo { font-size: 22px; }
  header { padding: 0 16px; gap: 12px; }
  .screen-title { font-size: 12px; }
  .resources { font-size: 12px; gap: 12px; }
}
@media (max-width: 860px) {
  html, body, #app { min-height: 100%; height: auto; }
  .stage { min-height: 100dvh; height: auto; padding-bottom: 60px; }
  header { flex: none; }
  .main { overflow: visible; min-height: 0; }
  .layout { flex: auto; width: 100%; gap: 10px; }
  .layout .panel { overflow: visible; flex-shrink: 0; }
  .layout .board-wrap { flex: none; height: 38vh; min-height: 280px; max-height: 380px; }
  .layout.plan, .layout.run { display: flex; }
  .objectives .brief { font-size: 12px; }
  .objectives .checks { display: grid; gap: 6px; }
  .objectives .check { font-size: 11px; }
  .objectives .pips { font-size: 12px; }
  .objectives .forecast-box { padding-top: 8px; }
  .panel { padding: 14px; gap: 8px; }
  .layout.plan .board-wrap, .layout.run .board-wrap { order: 0; }
  .layout.plan .objectives, .layout.run .objectives { order: 1; }
  .layout.plan .inventory, .layout.run .inventory { order: 2; }
  .inventory .tools { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .inventory .tool { font-size: 10px; min-height: 44px; }
  .inventory .btn.primary { margin-top: 8px; min-height: 52px; }
  .action-slots { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .action-slot { align-items: flex-start; gap: 5px; font-size: 9px; padding: 6px; }
  .action-slot span { overflow-wrap: anywhere; }
  .action-slot em { display: none; }
  .board-label { bottom: 10px; left: 10px; right: 10px; }
  .board-label b { font-size: 18px; }
  .board-label span { font-size: 12px; }
  .board-tag { font-size: 10px; padding: 8px; }
  .board-legend { font-size: 8px; padding: 8px; }
  .event-log { max-height: 230px; flex: auto; }
  nav { position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; height: 56px; padding-bottom: env(safe-area-inset-bottom); }
  .layout.solo { display: block; }
  .cards { gap: 8px; }
  .resources { font-size: 12px; gap: 12px; }
  .result-checks { display: grid; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
.notes-body { display: grid; gap: 10px; padding-top: 8px; }
.mission-notes > summary { color: var(--yellow); }
@media (min-width: 861px) { .mission-notes > summary { display: none; } }
@media (max-width: 860px) {
  .layout.plan .objectives { order: 0; }
  .layout.plan .board-wrap { order: 1; height: 32vh; min-height: 250px; max-height: 320px; }
  .layout.plan .panel { gap: 6px; padding: 10px; }
  .layout.plan .objectives h2 { font-size: 18px; }
  .layout.plan .objectives .eyebrow { font-size: 10px; }
  .layout.plan .inventory > h2 { display: none; }
  .layout.plan .tool-copy { font-size: 11px; line-height: 1.3; }
  .layout.plan .action-slot { min-height: 30px; }
  .layout.plan .btn.small { min-height: 32px; padding: 6px; }
  .layout.plan .inventory .btn.primary { min-height: 44px; margin-top: 0; }
  .layout.plan .board-tag, .layout.plan .board-legend { left: 6px; right: 6px; padding: 5px; font-size: 8px; }
  .layout.plan .board-tag { top: 6px; }
  .layout.plan .board-legend { bottom: 6px; }
}
/* Timers and free placement use the same planning controls as the campaign. */
select { width:100%; min-height:38px; padding:8px; border:1px solid #6b8999; border-radius:6px; background:#173746; color:var(--text); font:inherit; font-size:12px; }
.field-label { font-size:11px; color:var(--yellow); letter-spacing:.08em; font-weight:bold; }
.timing-row { display:flex; align-items:center; gap:8px; }
.timing-row label { font-size:11px; color:var(--yellow); font-weight:bold; }
.timing-row select { flex:1; min-width:0; }
.timing-row .btn { flex:none; }
.action-slot { padding:0; gap:0; }
.slot-remove { flex:1; min-width:0; display:flex; align-items:center; gap:8px; text-align:left; border:0; background:transparent; padding:9px 8px; font-size:11px; color:inherit; }
.slot-remove span { overflow-wrap:anywhere; }
.slot-delay { border:0; border-left:1px solid #466a7d; border-radius:0 5px 5px 0; background:#244c5d; color:var(--yellow); align-self:stretch; padding:5px 7px; font-size:10px; min-width:35px; }
.sandbox-inventory .tools { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.sandbox-inventory .tool { font-size:10px; padding:4px; }
.sandbox-inventory .action-slots { grid-template-columns:repeat(3,minmax(0,1fr)); }
.sandbox-inventory .slot-remove { font-size:9px; padding:7px 5px; gap:4px; }
.sandbox-inventory .action-slot { flex-wrap:wrap; }
.sandbox-inventory .slot-delay { border-left:0; border-top:1px solid #466a7d; width:100%; padding:4px; border-radius:0 0 5px 5px; }
.freeplay .stat { font-size:11px; line-height:1.5; gap:12px; }
.sandbox-result { font-size:12px; color:var(--yellow); line-height:1.5; }
@media(max-width:860px) {
 .slot-remove { font-size:9px; padding:6px; gap:4px; }
 .action-slot { flex-wrap:wrap; }
 .slot-delay { width:100%; border-left:0; border-top:1px solid #466a7d; padding:4px; min-height:26px; }
 .timing-row select { min-height:32px; padding:5px; }
 .freeplay .objectives { gap:6px; }
 .freeplay .objectives .brief,.freeplay .objectives .help-copy { font-size:11px; }
 .sandbox-inventory .tools { grid-template-columns:repeat(5,minmax(0,1fr)); }
 .freeplay .objectives > select { min-height:36px; }
}
/* The semantic city grid shares the visible canvas cursor and remains available
   to keyboard and assistive technology without painting a second city. */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.board-focus { position:absolute; z-index:3; top:42px; right:10px; background:#142c3c; color:var(--yellow); min-height:32px !important; }
.board-readout { position:absolute; z-index:2; bottom:35px; left:10px; right:10px; margin:0; pointer-events:none; padding:6px 8px; border-radius:5px; background:rgba(12,23,42,.92); color:#cbeaf0; font-size:11px; line-height:1.35; }
@media(max-width:860px) { .board-focus { top:29px; right:6px; padding:5px !important; font-size:9px !important; } .board-readout { bottom:26px; left:6px; right:6px; font-size:9px; } }
/* Seeded puzzle setup and replay identity use the existing panel layout. */
.random-setup { gap:12px; }
.random-setup form { display:flex; flex-direction:column; gap:10px; }
.random-setup input,.random-identity input { width:100%; min-width:0; padding:10px; border:1px solid #7898a8; border-radius:6px; background:#102a38; color:var(--cream,#f3edd4); font:inherit; }
.random-identity { display:flex; flex-direction:column; gap:7px; padding:10px 0; border-bottom:1px solid #466a7d; color:var(--yellow); font-size:11px; overflow-wrap:anywhere; }
.random-identity input { font-size:11px; }
.random-records { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.random-record { display:flex; flex-direction:column; text-align:left; gap:5px; overflow-wrap:anywhere; }
.studio-short { margin:8px 0 0; font-size:10px; line-height:1.45; color:var(--cream,#f3edd4); overflow-wrap:anywhere; }
.studio-about { margin-top:14px; border-top:1px solid #7898a8; padding-top:12px; font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.studio-about summary { cursor:pointer; min-height:44px; display:list-item; padding:12px 0; color:var(--yellow); }
.studio-about a { color:var(--yellow); text-underline-offset:3px; }
.studio-about a:focus-visible,.studio-about summary:focus-visible { outline:2px solid var(--yellow); outline-offset:3px; }
@media(max-width:860px) { .random-records { grid-template-columns:1fr; } .random-identity { font-size:10px; } }
/* The opening gives new players a clear first action; the city stays the hero. */
.text-button { background:none; border:0; padding:8px 2px; min-height:36px; color:var(--yellow); font-size:11px; font-weight:800; letter-spacing:.04em; text-align:left; text-decoration:underline; text-underline-offset:4px; }
button:focus-visible,summary:focus-visible { outline:3px solid #ffe77d; outline-offset:3px; }
.opening { gap:0; padding:0; grid-template-columns:minmax(0,1fr) minmax(340px,400px) !important; }
.opening-art { overflow:hidden; background:#42798a; }
.title-art { position:absolute; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center; }
.title-art[hidden] { display:none; }
.opening-art::after { content:''; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,rgba(9,27,39,.72),transparent 65%,rgba(9,27,39,.35)); pointer-events:none; }
.opening-title { position:absolute; z-index:2; left:7%; top:8%; color:#fff5d6; text-shadow:0 2px 4px rgba(0,0,0,.6); }
.opening-title span { font-weight:800; font-size:13px; letter-spacing:.14em; }
.opening-title h2 { margin:12px 0 0; font-size:clamp(40px,6.6vw,96px); line-height:.92; letter-spacing:-.04em; }
.opening-panel { border:0; border-radius:0; padding:32px 26px 22px; justify-content:center; gap:15px; background:#152d3a; }
.opening-panel h2 { color:#fff1cf; font-size:32px; line-height:1.07; letter-spacing:-.025em; margin:0; }
.opening-copy { font-size:15px; line-height:1.6; color:#d4e4e8; margin:0; }
.opening-copy b { color:#ffdd77; }
.learn-button { min-height:74px; display:flex; flex-direction:column; justify-content:center; gap:8px; font-size:16px; color:#172a38; }
.learn-button small { font-size:10px; letter-spacing:.04em; }
.opening-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.opening-choices .btn { font-size:10px; min-height:44px; letter-spacing:.04em; }
.opening-foot { margin:0; color:var(--muted); font-size:12px; line-height:1.4; }
.guide-panel { border-color:#ffda70; gap:12px; }
.guide-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.guide-top .eyebrow { color:#ffda70; font-size:10px; line-height:1.5; }
.guide-top .text-button { padding:0; min-height:32px; }
.guide-panel h2 { color:#fff2c7; letter-spacing:0; font-size:23px; line-height:1.15; }
.guide-copy { font-size:14px; line-height:1.6; margin:0; color:#e4edf0; }
.guide-feedback { border:1px solid #81959f; padding:7px 10px; margin:0; font-size:12px; line-height:1.5; background:#304650; color:#ffeaa2; }
.guide-options { display:flex; flex-wrap:wrap; column-gap:20px; }
.guide-options .text-button { font-size:10px; }
.guide-save { font-size:10px; line-height:1.4; color:#a9b9c6; margin:0; }
.guided-tool { outline:3px solid #ffe182; outline-offset:2px; }
.guided-inventory .tools { gap:12px; }
.guided-inventory .tool { min-height:58px; }
.guided-inventory .tool-copy { font-size:12px; }
.guided-inventory [data-act="inspect"] { display:none; }
.guided-inventory .slot-delay { display:none; }
.guided .board-tag { font-size:10px; }
.guided .board-legend { display:none; }
.guided .board-readout { bottom:8px; }
.walkthrough-link { align-self:flex-start; padding:2px 0; min-height:32px; font-size:10px; }
@media(max-width:1100px) and (min-width:861px) {
 .layout.guided { grid-template-columns:245px minmax(250px,1fr) 210px; gap:8px; padding:8px; }
 .guide-panel { padding:12px; }
 .guide-copy { font-size:12px; }
}
@media(max-width:860px) {
 .layout.opening { display:flex; padding:0; gap:0; }
 .opening .opening-art { height:26vh; min-height:160px; max-height:230px; }
 .opening-title { top:15%; left:6%; }
 .opening-title span { font-size:10px; }
 .opening-title h2 { font-size:42px; margin-top:8px; }
 .opening-panel { padding:18px; gap:12px; flex:none; }
 .opening-panel h2 { font-size:25px; }
 .opening-panel h2 br { display:none; }
 .opening-panel .eyebrow { display:none; }
 .opening-copy { font-size:13px; line-height:1.5; }
 .learn-button { min-height:64px; }
 .opening .studio-short { margin-top:0; }
 .layout.guided { gap:7px; padding:7px; }
 .layout.guided .guide-panel { order:0; gap:4px; padding:8px 10px; flex:none; }
 .guided .guide-top .text-button { min-height:26px; }
 .layout.guided .guide-panel h2 { font-size:18px; margin:0; }
 .guide-copy { font-size:12px; line-height:1.4; }
 .guide-panel .btn { min-height:40px; font-size:10px; }
 .guide-options { gap:10px; }
 .guide-options .text-button { min-height:30px; font-size:9px; padding:5px 0; }
 .guide-save { font-size:9px; }
 .layout.guided .board-wrap { order:1; height:38vh; min-height:310px; max-height:380px; flex-shrink:0; }
 .layout.guided .inventory { order:2; flex:none; }
 .guided-inventory { padding:10px !important; }
 .guided-inventory .tools { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
 .guided-inventory .tool { font-size:11px; min-height:44px; }
 .guided-inventory .tool-copy { display:none; }
 .guided-inventory .action-slots { gap:5px; }
 .guided-inventory .action-slot { min-height:28px; }
 .guided-inventory .btn.primary { min-height:44px; }
 .guided .board-readout { bottom:5px; font-size:9px; }
 .results .guide-panel { padding:10px; }
}
/* Match each tool to its object in the city, with a visible selection state. */
.inventory .tool { position:relative; display:flex; align-items:center; justify-content:flex-start; gap:8px; min-height:56px; padding:5px 9px 13px; text-align:left; }
.tool-thumb { flex:none; width:36px; height:36px; object-fit:contain; pointer-events:none; }
.tool-name { flex:1; min-width:0; }
.tool-state { position:absolute; right:7px; bottom:3px; font-size:8px; line-height:1; letter-spacing:.04em; color:#ffeaa3; }
.tool.on .tool-state { color:#142b37; }
@media(max-width:860px) {
 .inventory .tool { flex-direction:column; justify-content:center; gap:2px; min-height:56px; padding:4px 2px 12px; text-align:center; letter-spacing:0; }
 .tool-thumb { width:25px; height:25px; }
 .tool-name { flex:none; font-size:9px; }
 .tool-state { font-size:7px; right:0; left:0; bottom:3px; }
 .guided-inventory .tool { flex-direction:row; gap:4px; min-height:56px; padding:4px 4px 12px; }
 .guided-inventory .tool-thumb { width:32px; height:32px; }
 .guided-inventory .tool-name { font-size:10px; }
}