:root {
  --night: #171b18;
  --night-2: #202621;
  --concrete: #303630;
  --concrete-light: #4c544b;
  --tile: #eee8d7;
  --tile-bright: #fff9e8;
  --grout: #b8ae98;
  --ink: #20251f;
  --moss: #6d9d3d;
  --sprout: #a9cf68;
  --acid: #d5f47c;
  --purple: #7562a9;
  --orange: #e2873d;
  --danger: #bf4d3e;
  --pixel-shadow: 6px 6px 0 #0b0e0c;
  --max: 1312px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(109, 157, 61, .08), transparent 25rem),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,.018) 48px),
    var(--night);
  color: var(--tile);
  font-family: "Courier New", Courier, monospace;
  line-height: 1.45;
  text-rendering: geometricPrecision;
}
html, body { overscroll-behavior-x: none; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body.dialog-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  transform: translateY(-140%);
  background: var(--acid);
  color: var(--ink);
}
.skip-link:focus { transform: none; }

.tile-nav {
  position: relative;
  z-index: 20;
  width: 100%;
  height: 112px;
  padding: 64px 60px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font: 700 12px/1 "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tile-wordmark,
.tile-nav nav a,
.tile-nav nav button { text-decoration: none; }
.tile-home {
  position: absolute;
  top: 39px;
  left: 50%;
  width: 34px;
  height: 62px;
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 8px;
  background: var(--tile);
  box-shadow: 3px 3px 0 #0b0e0c;
}
.tile-home img { width: 100%; height: 100%; object-fit: cover; }
.tile-nav nav { display: flex; align-items: flex-start; gap: 86px; }
.tile-wordmark,
.tile-nav nav a { white-space: nowrap; }
.tile-nav nav a,
.tile-nav nav button {
  border: 0;
  padding: 0 0 6px;
  background: none;
  color: var(--tile);
  cursor: pointer;
}
.tile-nav nav a:hover,
.tile-nav nav button:hover { color: var(--acid); }

.eyebrow {
  margin: 0 0 22px;
  color: var(--sprout);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  background: var(--acid);
  box-shadow: 0 0 0 3px rgba(213,244,124,.13), 0 0 18px rgba(213,244,124,.7);
  animation: status-blink 1.8s steps(2, end) infinite;
}
@keyframes status-blink { 50% { opacity: .35; } }

.tile-hero {
  width: min(var(--max), calc(100% - 120px));
  min-height: 690px;
  margin: 14px auto 80px;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(480px, 1.18fr);
  align-items: center;
  gap: 68px;
}
.hero-copy { position: relative; z-index: 2; padding-bottom: 36px; }
.hero-copy h1,
.section-heading h2,
.mission-copy h2,
.admin-main h1 {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(54px, 6.2vw, 102px);
  font-weight: 900;
  line-height: .89;
  letter-spacing: -.065em;
  text-transform: lowercase;
}
.hero-copy h1 span { color: var(--sprout); }
.section-heading h2 .keep-case { text-transform: none; }
.hero-intro {
  max-width: 570px;
  margin: 30px 0 0;
  color: #c4c5b9;
  font-size: 17px;
  line-height: 1.65;
}
.hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; }

.pixel-button {
  position: relative;
  min-height: 52px;
  border: 2px solid currentColor;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  color: var(--tile);
  background: transparent;
  box-shadow: 5px 5px 0 #0b0e0c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 100ms ease, color 150ms ease, background 150ms ease;
}
.pixel-button:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #0b0e0c; }
.pixel-button:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 #0b0e0c; }
.pixel-button.primary { border-color: var(--acid); background: var(--acid); color: var(--ink); }
.pixel-button.secondary:hover { border-color: var(--sprout); color: var(--sprout); }
.pixel-button:disabled { cursor: wait; opacity: .55; }
.pixel-button:focus-visible,
.report-card:focus-visible,
.tile-social:focus-visible,
.tile-email-pill:focus-visible,
.measure-link:focus-visible,
.missing-tile:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }

.hero-scene {
  position: relative;
  min-height: 585px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/34px 100%,
    linear-gradient(var(--concrete), #1b211d);
  border: 3px solid #0d100e;
  box-shadow: 14px 14px 0 rgba(0,0,0,.42);
  overflow: hidden;
}
.hero-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .2;
  background: repeating-radial-gradient(circle at 10% 10%, #fff 0 1px, transparent 1px 10px);
  mix-blend-mode: soft-light;
}
.station-sign {
  position: absolute;
  z-index: 3;
  top: 34px;
  left: 34px;
  right: 34px;
  min-height: 70px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #090b0a;
  border: 4px solid #777c72;
  color: white;
  box-shadow: 7px 7px 0 rgba(0,0,0,.45);
}
.station-sign span { margin-right: auto; font: 800 22px/1 Arial, sans-serif; letter-spacing: .03em; }
.station-sign i {
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ff6319;
  color: white;
  font: 800 16px/1 Arial, sans-serif;
  font-style: normal;
}
.station-sign i:nth-of-type(n+2) { background: #996633; }
.station-sign i:nth-of-type(3) { background: #ff6319; }
.tunnel { position: absolute; inset: 134px 0 0; }
.tile-wall {
  --wall-tile-width: 104px;
  --wall-tile-height: 80px;
  position: absolute;
  inset: 0 0 132px;
  background:
    linear-gradient(90deg, rgba(91,84,70,.45) 0 2px, transparent 2px) calc(50% - 52px) 0 / var(--wall-tile-width) 100% repeat-x,
    linear-gradient(rgba(91,84,70,.45) 0 2px, transparent 2px) 0 0 / 100% var(--wall-tile-height) repeat-y,
    var(--tile);
  border-bottom: 12px solid #897e69;
  transform: perspective(800px) rotateY(-3deg);
  transform-origin: right;
}
.tile-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,.18), transparent 35%, rgba(0,0,0,.14));
}
.missing-tile {
  position: absolute;
  z-index: 2;
  top: 80px;
  left: 50%;
  width: var(--wall-tile-width);
  height: var(--wall-tile-height);
  padding: 0;
  display: grid;
  place-items: center;
  background: #20251f;
  border: 2px solid #666455;
  box-shadow: inset 0 0 0 7px #35382f, inset 0 8px 14px #070907;
  cursor: pointer;
  appearance: none;
  transition: box-shadow 180ms steps(3,end);
}
.hero-scene:hover .missing-tile { box-shadow: inset 0 0 0 7px #35382f, inset 0 8px 14px #070907, 4px 4px 0 rgba(8,11,9,.5); }
.tile-surprise {
  position: absolute;
  inset: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  object-fit: cover;
  object-position: 50% 32%;
  image-rendering: auto;
}
.missing-tile-cover {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #20251f;
  box-shadow: inset 0 0 0 7px #35382f, inset 0 8px 14px #070907;
  transform-origin: 50% 100%;
  transition: transform 620ms cubic-bezier(.36,.07,.42,1.35), opacity 120ms linear 430ms;
}
.missing-tile.revealed .missing-tile-cover {
  opacity: 0;
  transform: translate(20px, 230px) rotate(24deg);
}
.pixel-sprout { position: absolute; z-index: 3; bottom: -2px; width: 7px; background: var(--moss); transform-origin: bottom; animation: sprout-sway 2.3s steps(3,end) infinite; }
.pixel-sprout::before,
.pixel-sprout::after { content: ""; position: absolute; width: 13px; height: 8px; background: var(--sprout); }
.pixel-sprout::before { top: 6px; right: 3px; }
.pixel-sprout::after { top: 17px; left: 4px; }
.sprout-a { left: 18px; height: 42px; }
.sprout-b { left: 51px; height: 56px; animation-delay: -.7s; }
.sprout-c { right: 18px; height: 34px; animation-delay: -1.2s; }
@keyframes sprout-sway { 50% { transform: rotate(4deg); } }
.track { position: absolute; left: -5%; right: -5%; height: 18px; background: #7e847c; border: 5px solid #080a09; transform: skewX(-17deg); }
.track::after { content: ""; position: absolute; top: 28px; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(90deg, #514a40 0 36px, transparent 36px 60px); }
.track-a { bottom: 82px; }
.track-b { bottom: 22px; }
.quest-chip {
  position: absolute;
  z-index: 4;
  right: 24px;
  bottom: 24px;
  padding: 12px 15px;
  background: var(--purple);
  border: 2px solid #b0a5d2;
  box-shadow: 5px 5px 0 #0b0e0c;
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  animation: quest-idle 3.2s steps(2,end) infinite;
}
@keyframes quest-idle { 50% { transform: translateY(-4px); } }

.marquee {
  border-top: 3px solid var(--moss);
  border-bottom: 3px solid var(--moss);
  padding: 12px 0;
  display: flex;
  overflow: hidden;
  background: var(--moss);
  color: var(--night);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  white-space: nowrap;
}
.marquee div { min-width: max-content; animation: marquee 22s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }

.reports-section,
.report-section,
.admin-main {
  width: min(var(--max), calc(100% - 120px));
  margin: 0 auto;
}
.reports-section { padding: 130px 0 150px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.section-heading h2 { font-size: clamp(46px, 6vw, 88px); }
.feed-counter {
  min-width: 175px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px solid var(--concrete-light);
  background: var(--night-2);
  box-shadow: var(--pixel-shadow);
}
.feed-counter span { color: var(--acid); font: 900 42px/1 Arial, sans-serif; }
.feed-counter small { color: #aaa; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.section-note { max-width: 720px; margin: 28px 0 52px; color: #aaa; font-size: 14px; line-height: 1.65; }
.report-gallery-toolbar { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.gallery-hint { color: #8e948d; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.gallery-toolbar-actions { display: flex; align-items: center; gap: 14px; }
.gallery-view-toggle { display: flex; padding: 3px; border: 2px solid var(--concrete-light); background: var(--night-2); }
.gallery-view-toggle button { border: 0; padding: 7px 10px; background: transparent; color: #8e948d; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.gallery-view-toggle button[aria-pressed="true"] { background: var(--moss); color: white; }
.gallery-view-toggle button:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.gallery-navigation { display: flex; align-items: center; gap: 10px; }
.gallery-arrow {
  width: 40px;
  height: 36px;
  border: 2px solid var(--concrete-light);
  background: var(--night-2);
  color: var(--acid);
  cursor: pointer;
}
.gallery-arrow:hover:not(:disabled),
.gallery-arrow:focus-visible { border-color: var(--acid); background: var(--acid); color: var(--ink); }
.gallery-arrow:disabled { opacity: .3; cursor: default; }
.gallery-position { min-width: 72px; color: var(--sprout); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-align: center; }
.report-grid {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: start;
  gap: 36px;
  padding: 4px 10px 28px 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.report-grid::-webkit-scrollbar { display: none; }
.report-grid[data-view="grid"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 36px;
  overflow: visible;
  padding: 4px 10px 28px 4px;
  scroll-snap-type: none;
}
.report-card {
  flex: 0 0 calc((100% - 36px) / 2);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border: 0;
  padding: 0;
  background: var(--tile);
  color: var(--ink);
  box-shadow: 9px 9px 0 #0a0d0b;
  text-align: left;
  cursor: pointer;
  transition: transform 170ms ease, box-shadow 170ms ease;
}
.report-grid[data-view="grid"] .report-card { width: auto; }
.report-card:hover { transform: translate(-4px,-4px); box-shadow: 13px 13px 0 #0a0d0b; }
.report-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #a59c88; border-bottom: 7px solid var(--ink); }
.report-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms steps(8,end); }
.report-card:hover .report-card-media img { transform: scale(1.035); }
.report-id {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 9px;
  background: var(--night);
  color: var(--acid);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
}
.report-status {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 7px 9px;
  background: var(--moss);
  color: white;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.report-card-copy { padding: 22px 24px 25px; }
.report-card-copy h3 { margin: 0; font: 900 clamp(22px,3vw,34px)/1 Arial,sans-serif; letter-spacing: -.035em; }
.route-row { margin: 13px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.route-bullet { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #ff6319; color: white; font: 800 14px/1 Arial,sans-serif; }
.route-bullet.brown { background: #996633; }
.route-bullet.blue { background: #2850ad; }
.route-bullet.orange { background: #ff6319; }
.route-bullet.green { background: #00933c; }
.route-bullet.red { background: #ee352e; }
.route-bullet.yellow { background: #fccc0a; color: #111; }
.route-bullet.gray { background: #808183; }
.route-bullet.lime { background: #6cbe45; }
.route-bullet.purple { background: #b933ad; }
.direction-caption { margin-left: 4px; color: #645f54; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.report-meta { margin-top: 19px; padding-top: 15px; border-top: 2px dashed var(--grout); display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; color: #5f5a50; font-size: 11px; text-transform: uppercase; }
.report-meta strong { display: block; margin-top: 3px; color: var(--ink); font-size: 13px; }
.skeleton { min-height: 480px; cursor: default; background: linear-gradient(110deg, #d7cfbd 25%, #eee6d4 40%, #d7cfbd 55%); background-size: 220% 100%; animation: skeleton 1.4s linear infinite; }
@keyframes skeleton { to { background-position-x: -220%; } }
.feed-error { padding: 18px; border: 2px solid var(--orange); color: #ffba81; }

.report-section { padding: 0 0 150px; scroll-margin-top: 20px; }
.report-console { border: 3px solid #0a0d0b; background: var(--concrete); box-shadow: 14px 14px 0 #090b09; }
.console-topbar { height: 47px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; background: #0b0e0c; color: var(--sprout); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.progress-track { height: 8px; background: #1b201c; overflow: hidden; }
.progress-track span { display: block; width: 16.667%; height: 100%; background: var(--acid); transition: width 350ms steps(6,end); }
.console-layout { min-height: 700px; display: grid; grid-template-columns: minmax(280px,.75fr) minmax(0,1.25fr); }
.mission-copy { position: relative; padding: 62px 48px; overflow: hidden; border-right: 3px solid #111511; background: var(--night-2); }
.mission-copy h2 { font-size: clamp(45px,5vw,72px); color: var(--tile-bright); }
.mission-copy > p:not(.eyebrow) { max-width: 390px; margin: 28px 0; color: #9ba098; font-size: 13px; line-height: 1.7; }
.mission-character { position: absolute; right: 40px; bottom: 20px; width: 165px; height: 210px; }
.character-head { position: absolute; top: 0; left: 48px; width: 64px; height: 64px; background: var(--sprout); box-shadow: inset -12px -10px 0 var(--moss), 5px 5px 0 #111; }
.character-head::before { content:""; position:absolute; left:12px; top:24px; width:9px; height:9px; background:#111; box-shadow:31px 0 0 #111; }
.character-body { position: absolute; top: 58px; left: 31px; width: 101px; height: 116px; background: var(--purple); clip-path: polygon(12% 0,88% 0,100% 100%,0 100%); box-shadow: inset 0 -18px 0 rgba(0,0,0,.16); }
.character-pot { position: absolute; bottom: 0; left: 20px; width: 125px; height: 62px; background: var(--orange); clip-path: polygon(0 0,100% 0,88% 100%,12% 100%); }

.tile-form { min-width: 0; padding: 60px clamp(30px,5vw,74px) 42px; display: flex; flex-direction: column; }
.form-step { display: none; flex: 1; animation: step-in 260ms steps(4,end); }
.form-step.active { display: block; }
@keyframes step-in { from { opacity: 0; transform: translateX(12px); } }
.step-kicker { margin-bottom: 14px; color: var(--sprout); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.optional-tag { margin-left: 8px; padding: 3px 6px; border: 1px solid #687067; color: #aeb4ab; font-size: 8px; letter-spacing: .1em; }
.optional-label { color: #7f867e; font-size: 9px; }
.form-step h3 { margin: 0; color: var(--tile-bright); font: 900 clamp(34px,4vw,58px)/.95 Arial,sans-serif; letter-spacing: -.045em; }
.form-step > p:not(.field-error):not(.review-note) { max-width: 620px; margin: 20px 0 30px; color: #bdc0b8; font-size: 13px; line-height: 1.65; }
.measure-link {
  color: var(--acid);
  font-weight: 700;
  text-decoration-color: var(--moss);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.measure-link:hover { color: var(--tile-bright); }
.field-label,
.line-picker legend,
.dimension-grid label > span { display: block; margin: 24px 0 9px; color: #d9d9cf; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pixel-input {
  width: 100%;
  min-height: 52px;
  border: 2px solid #727970;
  border-radius: 0;
  padding: 13px 15px;
  background: #1a1f1b;
  color: var(--tile-bright);
  outline: 0;
  font-size: 15px;
  appearance: none;
}
.pixel-input:focus { border-color: var(--acid); box-shadow: 4px 4px 0 rgba(213,244,124,.25); }
.pixel-input::placeholder { color: #777c75; }
select.pixel-input { cursor: pointer; }
textarea.pixel-input { resize: vertical; min-height: 160px; }
.station-combobox { position: relative; }
.station-options {
  position: absolute;
  z-index: 12;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  border: 2px solid var(--acid);
  background: #111612;
  box-shadow: 7px 7px 0 #090b09;
}
.station-options button {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-bottom: 1px solid #343b35;
  padding: 11px 14px;
  background: transparent;
  color: var(--tile-bright);
  text-align: left;
  cursor: pointer;
}
.station-options button:last-child { border-bottom: 0; }
.station-options button:hover,
.station-options button[aria-selected="true"] { background: #2b3c2e; color: var(--acid); }
.station-empty { margin: 0; padding: 14px; color: #929990; font-size: 12px; }
.field-error { min-height: 18px; margin: 7px 0 0; color: #ffa185; font-size: 11px; }
.photo-drop {
  position: relative;
  min-height: 355px;
  margin-top: 28px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px dashed #747b72;
  background:
    linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.018) 75%) 0 0/32px 32px,
    #1c211d;
  cursor: pointer;
}
.photo-drop:hover { border-color: var(--sprout); }
.photo-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.photo-empty b { width: 58px; height: 58px; display: grid; place-items: center; border: 2px solid var(--sprout); color: var(--sprout); font: 400 38px/1 Arial,sans-serif; }
.photo-empty em { color: var(--tile-bright); font-size: 12px; font-style: normal; font-weight: 700; text-transform: uppercase; }
.photo-empty small { color: #858a83; font-size: 10px; }
.photo-drop img { width: 100%; height: 355px; object-fit: cover; }
.line-picker { margin: 0; padding: 0; border: 0; }
.line-picker > div { display: flex; flex-wrap: wrap; gap: 8px; }
.line-option { position: relative; }
.line-option input { position: absolute; opacity: 0; pointer-events: none; }
.line-option span { width: 38px; height: 38px; display: grid; place-items: center; border: 3px solid #242925; border-radius: 50%; background: #808183; color: white; font: 800 16px/1 Arial,sans-serif; cursor: pointer; filter: saturate(.4) brightness(.72); transition: filter 120ms, transform 120ms; }
.line-option span.red { background: #ee352e; }
.line-option span.green { background: #00933c; }
.line-option span.purple { background: #b933ad; }
.line-option span.blue { background: #2850ad; }
.line-option span.orange { background: #ff6319; }
.line-option span.brown { background: #996633; }
.line-option span.lime { background: #6cbe45; }
.line-option span.yellow { background: #fccc0a; color: #111; }
.line-option span.gray { background: #808183; }
.line-option input:checked + span { filter: none; transform: translateY(-2px); box-shadow: 0 4px 0 #090b09; }
.line-option input:focus-visible + span { outline: 3px solid var(--acid); outline-offset: 2px; }
.check-row { margin-top: 20px; display: flex; align-items: center; gap: 11px; color: #c2c5bc; font-size: 12px; cursor: pointer; }
.check-row input { width: 20px; height: 20px; border: 2px solid #81877e; background: #1a1f1b; appearance: none; }
.check-row input:checked { background: var(--acid); box-shadow: inset 0 0 0 4px #1a1f1b; }
.dimension-grid { margin-top: 36px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: end; gap: 13px; }
.dimension-grid > b { padding-bottom: 15px; color: var(--sprout); font-size: 22px; }
.dimension-grid label { position: relative; }
.dimension-grid label > span { margin-top: 0; }
.dimension-grid label i { position: absolute; right: 14px; bottom: 15px; color: #838980; font-size: 11px; font-style: normal; }
.dimension-grid input { padding-right: 38px; }
.character-count { margin-top: 8px; color: #82877f; font-size: 10px; text-align: right; }
.review-card { margin-top: 28px; padding: 22px; display: grid; grid-template-columns: 150px 1fr; gap: 22px; border: 2px solid #697067; background: #1a1f1b; }
.review-card img { width: 150px; height: 150px; object-fit: cover; }
.review-card h4 { margin: 0 0 12px; color: var(--tile-bright); font: 800 25px/1 Arial,sans-serif; }
.review-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 11px; }
.review-card dt { color: #7f867e; text-transform: uppercase; }
.review-card dd { margin: 0; color: #d8d9d0; }
.review-note { margin: 18px 0; color: #b6baaf; font-size: 11px; }
.review-note span { color: var(--sprout); }
.submit-state { min-height: 24px; margin-top: 14px; color: var(--acid); font-size: 12px; }
.form-actions { margin-top: 38px; padding-top: 24px; display: flex; justify-content: flex-end; gap: 13px; border-top: 2px solid #4b524b; }
.form-actions #back-step { margin-right: auto; }

.tile-footer {
  min-height: 290px;
  padding: 68px max(60px, calc((100vw - var(--max)) / 2)) 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  border-top: 1px solid #344138;
  background: #19211b;
  color: #d9ddcf;
  font: 400 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.tile-follow,
.tile-contact { display: flex; align-items: center; gap: 20px; }
.tile-social {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #2b3c2e;
  color: var(--sprout);
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.tile-social:hover { transform: translateY(-2px); background: var(--moss); color: var(--tile-bright); }
.tile-social svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile-social svg .solid { fill: currentColor; stroke: none; }
.tile-social svg .play { fill: #19211b; stroke: none; }
.tile-social:hover svg .play { fill: var(--tile-bright); }
.tile-email-pill {
  min-height: 40px;
  padding: 8px 20px 9px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  background: #2b3c2e;
  color: var(--sprout);
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.tile-email-pill:hover { background: var(--moss); color: var(--tile-bright); }
.tile-copyright { flex: 0 0 100%; margin: 70px 0 0; color: #78847a; font-size: 13px; text-align: center; }

.report-dialog {
  width: min(780px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  border: 3px solid #080a09;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: var(--tile);
  color: var(--ink);
  box-shadow: 14px 14px 0 rgba(0,0,0,.6);
}
.report-dialog::backdrop { background: rgba(7,10,8,.82); backdrop-filter: blur(4px); }
.dialog-close { position: sticky; z-index: 5; top: 14px; float: right; width: 42px; height: 42px; margin: 14px 14px -56px 0; border: 2px solid var(--tile); background: var(--night); color: var(--tile); font: 28px/1 Arial,sans-serif; cursor: pointer; }
.dialog-image { width: 100%; max-height: 520px; object-fit: cover; border-bottom: 8px solid var(--ink); }
.dialog-copy { padding: 30px; }
.dialog-copy h2 { margin: 0; font: 900 clamp(34px,6vw,58px)/.95 Arial,sans-serif; letter-spacing: -.045em; }
.dialog-details { margin: 24px 0; padding: 18px 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; border-top: 2px dashed var(--grout); border-bottom: 2px dashed var(--grout); }
.dialog-details small { display: block; color: #777064; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.dialog-details strong { display: block; margin-top: 4px; font-size: 13px; }
.design-wish { padding: 20px; background: #d8d1be; border-left: 8px solid var(--moss); }
.design-wish small { color: #6f695e; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.design-wish p { margin: 9px 0 0; font-family: Georgia,serif; font-size: 19px; line-height: 1.5; }
.dialog-actions { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.dialog-actions .pixel-button { color: var(--ink); box-shadow: 5px 5px 0 #8e8675; }
.dialog-actions .pixel-button.primary { color: var(--ink); }
.confirm-status { color: #615b50; font-size: 10px; }

.admin-main { min-height: calc(100vh - 112px); padding: 60px 0 130px; }
.admin-login { max-width: 600px; margin: 5vh auto; padding: 54px; border: 3px solid #090b09; background: var(--concrete); box-shadow: 12px 12px 0 #080a09; }
.admin-login h1 { font-size: clamp(48px,7vw,76px); }
.admin-login form { margin-top: 36px; }
.admin-login .pixel-button { margin-top: 18px; }
.local-hint { margin-top: 28px; color: #8e948d; font-size: 10px; }
.local-hint code { color: var(--sprout); }
.admin-dashboard .section-heading h1 { font-size: clamp(48px,7vw,90px); }
.admin-tabs { margin: 48px 0 32px; display: flex; flex-wrap: wrap; gap: 5px; border-bottom: 3px solid #0a0d0b; }
.admin-tabs button { border: 0; padding: 14px 18px; background: #262c27; color: #9fa49d; font-size: 11px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.admin-tabs button.active { background: var(--acid); color: var(--ink); }
.admin-tabs span { display: inline-grid; min-width: 22px; height: 22px; margin-left: 7px; place-items: center; background: rgba(0,0,0,.15); }
.admin-queue { display: grid; gap: 28px; }
.admin-empty { padding: 70px 24px; border: 2px dashed #596159; color: #92978f; text-align: center; }
.admin-card { display: grid; grid-template-columns: 330px 1fr; border: 3px solid #0a0d0b; background: var(--tile); color: var(--ink); box-shadow: 8px 8px 0 #090b09; }
.admin-card-media { background: #a59c88; border-right: 6px solid var(--ink); }
.admin-card-media img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; }
.admin-card-body { min-width: 0; padding: 28px; }
.admin-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.admin-card-head h2 { margin: 0; font: 900 30px/1 Arial,sans-serif; }
.status-pill { padding: 7px 9px; background: var(--orange); color: white; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.status-pill.approved { background: var(--moss); }
.status-pill.rejected { background: var(--danger); }
.admin-form-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.admin-form-grid .wide { grid-column: span 3; }
.admin-form-grid .span-2 { grid-column: span 2; }
.admin-form-grid label span { display: block; margin-bottom: 5px; color: #6f695e; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.admin-form-grid .pixel-input { min-height: 44px; padding: 10px; border-color: #9b927f; background: #fff9e8; color: var(--ink); font-size: 12px; }
.admin-form-grid textarea { min-height: 90px; }
.admin-card-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 11px; }
.admin-card-actions .pixel-button { min-height: 44px; color: var(--ink); box-shadow: 4px 4px 0 #8c8474; }
.admin-card-actions .approve { background: var(--moss); border-color: var(--moss); color: white; }
.admin-card-actions .reject { border-color: var(--danger); color: var(--danger); margin-left: auto; }
.admin-meta { margin-top: 20px; color: #766f61; font-size: 9px; text-transform: uppercase; }

@media (max-width: 980px) {
  .tile-hero,
  .reports-section,
  .report-section,
  .admin-main { width: min(100% - 48px, var(--max)); }
  .tile-nav { height: 96px; padding: 32px 24px 0; }
  .tile-home { top: 24px; width: 30px; height: 55px; }
  .tile-nav nav { gap: 22px; }
  .tile-footer { padding-left: 24px; padding-right: 24px; }
  .tile-hero { min-height: 0; margin-top: 30px; grid-template-columns: 1fr; gap: 44px; }
  .hero-copy { padding: 30px 0 0; }
  .hero-scene { min-height: 520px; }
  .reports-section { padding: 100px 0 110px; }
  .console-layout { grid-template-columns: 1fr; }
  .mission-copy { min-height: 360px; border-right: 0; border-bottom: 3px solid #111511; }
  .admin-card { grid-template-columns: 250px 1fr; }
}

@media (max-width: 680px) {
  .tile-nav { font-size: 10px; }
  input, select, textarea, .pixel-input { font-size: 16px; }
  .hero-copy h1 { font-size: clamp(50px,17vw,78px); }
  .hero-intro { font-size: 14px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-scene { min-height: 420px; }
  .station-sign { top: 18px; left: 18px; right: 18px; min-height: 58px; padding: 10px; }
  .station-sign span { font-size: 15px; }
  .station-sign i { width: 24px; height: 24px; font-size: 12px; }
  .tunnel { top: 100px; }
  .quest-chip { right: 14px; bottom: 14px; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .feed-counter { min-width: 0; }
  .report-grid {
    gap: 36px;
  }
  .report-grid[data-view="grid"] { grid-template-columns: 1fr; gap: 36px; }
  .report-card {
    flex: 0 0 100%;
  }
  .report-gallery-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }
  .gallery-toolbar-actions { display: contents; }
  .gallery-view-toggle { grid-column: 2; grid-row: 1; justify-self: end; }
  .gallery-navigation {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    justify-content: space-between;
    width: min(100%, 240px);
    margin-top: 4px;
    padding-top: 14px;
  }
  .gallery-hint { font-size: 9px; }
  .gallery-position { min-width: 58px; }
  .mission-copy { min-height: 330px; padding: 40px 28px; }
  .mission-copy > p:not(.eyebrow) { max-width: calc(100% - 112px); }
  .mission-character { right: 8px; transform: scale(.75); transform-origin: bottom right; }
  .tile-form { padding: 40px 22px 28px; }
  .photo-drop,
  .photo-drop img { min-height: 290px; height: 290px; }
  .dimension-grid { grid-template-columns: 1fr; align-items: stretch; }
  .dimension-grid > b { padding: 0; text-align: center; }
  .review-card { grid-template-columns: 1fr; }
  .review-card img { width: 100%; height: 220px; }
  .form-actions { flex-wrap: wrap; }
  .form-actions .pixel-button { flex: 1; }
  .tile-footer { min-height: 0; padding: 52px 24px 34px; align-items: flex-start; flex-direction: column; gap: 28px; }
  .tile-follow,
  .tile-contact { width: 100%; flex-wrap: wrap; }
  .tile-copyright { width: 100%; margin-top: 36px; align-self: center; text-align: center; }
  .dialog-details { grid-template-columns: 1fr; }
  .admin-login { padding: 34px 24px; }
  .admin-card { grid-template-columns: 1fr; }
  .admin-card-media { border-right: 0; border-bottom: 6px solid var(--ink); }
  .admin-card-media img { min-height: 0; height: 320px; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-form-grid .wide,
  .admin-form-grid .span-2 { grid-column: span 1; }
  .admin-card-actions .pixel-button { width: 100%; }
  .admin-card-actions .reject { margin-left: 0; }
}

@media (max-width: 560px) {
  .tile-hero,
  .reports-section,
  .report-section,
  .admin-main { width: min(100% - 64px, var(--max)); }
  .tile-nav { padding-left: 32px; padding-right: 32px; }
  .tile-nav nav {
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
  }
  .tile-home { display: block; top: 24px; width: 24px; height: 44px; border-radius: 6px; }
  .tile-footer { padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 380px) {
  .tile-nav { gap: 10px; font-size: 9px; letter-spacing: .04em; }
  .tile-nav nav { gap: 7px; }
  .station-sign { gap: 6px; padding: 8px; }
  .station-sign span { font-size: 13px; letter-spacing: 0; }
  .station-sign i { width: 20px; height: 20px; font-size: 11px; }
}

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