/* ==========================================================================
   LED wall — designed at 4352 x 1280, scaled to fit the window (led.js)
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --cyan: #35e0ff;
  --cyan-dim: #1a8ba3;
  --bg: #04121a;
  --panel: rgba(10, 40, 55, 0.75);
  --panel-border: rgba(53, 224, 255, 0.45);
  --red: #ff4d4d;
  --amber: #ffb347;
  --green: #4dff88;
}

html, body {
  width: 100%; height: 100%;
  background: #000;
  overflow: hidden;
  font-family: "Microsoft JhengHei", "Noto Sans TC", Arial, sans-serif;
  color: #dff8ff;
  /* kiosk touch wall: no pinch/double-tap zoom, no text/image selection */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#viewport { width: 100vw; height: 100vh; position: relative; }

#stage {
  width: 4352px; height: 1280px;
  position: absolute; top: 0; left: 0;
  transform-origin: top left;
  background:
    radial-gradient(ellipse at 50% 120%, #0a2e40 0%, var(--bg) 60%),
    var(--bg);
}

/* ---------- shared ---------- */
.hidden { display: none !important; }

.page {
  position: absolute; inset: 0;
  display: none;
  padding: 60px 90px;
}
.page.active { display: block; }

/* Background clips that do not loop cleanly are played as two stacked copies
   that hand over to each other (crossFadeLoop in led.js). The copy on screen is
   .base; the one waiting is parked on top of it, invisible, and fades in when
   its turn comes. Only the incoming copy animates — cross-fading both at once
   would put them at 0.5 opacity together at the midpoint and let the page
   background bleed through, which is the dip to black we are avoiding. */
.xfade {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.xfade.base { z-index: 0; opacity: 1; }
.xfade.over { z-index: 1; opacity: 0; }
.xfade.over.show { opacity: 1; transition: opacity 0.8s linear; }

.grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(53,224,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,224,255,0.05) 1px, transparent 1px);
  background-size: 120px 120px;
}

.page-title {
  font-size: 110px;
  letter-spacing: 18px;
  text-align: center;
  color: var(--cyan);
  text-shadow: 0 0 40px rgba(53,224,255,0.6);
}
.page-title .en-small { display: block; }

.en-small {
  font-size: 34px;
  letter-spacing: 6px;
  color: var(--cyan-dim);
  font-weight: normal;
}

.panel {
  background: var(--panel);
  border: 2px solid var(--panel-border);
  border-radius: 14px;
  padding: 40px;
  box-shadow: 0 0 40px rgba(53,224,255,0.12) inset;
}

/* ---------- nav buttons (home bottom-left, next arrow bottom-right) ------- */
#nav {
  position: absolute;
  left: 90px; right: 90px; bottom: 90px;
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none;
  z-index: 50;
}
.nav-btn {
  padding: 0; border: none; background: none;
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 0 30px rgba(53,224,255,0.55));
  transition: filter 0.2s, transform 0.15s;
}
.nav-btn img { display: block; width: 200px; height: 200px; }
#btn-next img { width: 160px; height: 160px; }
.nav-btn:hover { filter: drop-shadow(0 0 50px rgba(53,224,255,0.9)); }
.nav-btn:active { transform: scale(0.94); }
/* home hidden on the title page -> keep the arrow pinned right */
#btn-home.hidden + #btn-next { margin-left: auto; }
/* the arrow is meaningless where a tap does not advance the page */
#page-title.active ~ #nav #btn-next,
#page-select.active ~ #nav #btn-next { display: none; }

/* ---------- title page (video bg + centred logos, tap to continue) ------- */
#page-title { padding: 0; }
/* .title-bg-vid geometry comes from .xfade */
.title-logos {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 40px;
}
/* The wordmark is near-black navy on a dark clip. Rather than a plate behind
   it, stacked white drop-shadows: those follow the PNG's alpha, so the halo
   traces the mark and every letterform instead of boxing them in. */
.title-logo-main {
  width: 1050px; height: auto;
  /* the tight pass is repeated: stacking compounds it into a solid outline,
     which is what lifts the dark letterforms off this busy clip */
  filter:
    drop-shadow(0 0 5px  rgba(255, 255, 255, 1))
    drop-shadow(0 0 5px  rgba(255, 255, 255, 1))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 48px rgba(255, 255, 255, 0.45));
}
.title-logo-bot  { width: 330px;  height: auto; filter: drop-shadow(0 0 30px rgba(255,60,60,0.35)); }
.title-hint {
  position: absolute; z-index: 2; bottom: 70px; left: 0; right: 0;
  text-align: center; font-size: 46px; letter-spacing: 8px;
  color: rgba(223,248,255,0.6);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ---------- select page ---------- */
#page-select { padding: 0; }
/* .select-bg-vid geometry comes from .xfade */
/* above both video layers, so the cards and language buttons are never covered */
.select-inner {
  position: absolute; inset: 0; z-index: 2;
  padding: 60px 90px;
}
/* language switcher, top right of the select screen */
#lang-switch {
  position: absolute; right: 90px; top: 60px;
  display: flex; gap: 24px;
  z-index: 3;
}
.lang-btn {
  width: 130px; height: 130px;
  font-family: inherit;
  font-size: 62px; font-weight: 700;
  color: #cdf6ff;
  text-shadow: 0 0 18px rgba(53,224,255,0.9);
  background: url('assets/G1_screen03_langBtn.png') no-repeat center / 100% 100%;
  border: none;
  cursor: pointer;
  transition: transform 0.15s;
}
.lang-btn:hover {
  background-image: url('assets/G1_screen03_langBtn_hover.png');
  transform: scale(1.06);
}
.lang-btn:active { transform: scale(0.95); }

/* Fixed box: the Latin and CJK fallback fonts have different natural line
   heights, so an auto-height heading would push the cards up/down on every
   language switch. Pin the height and keep it to one line. */
.select-heading {
  margin-top: 40px;
  height: 170px;
  line-height: 170px;
  white-space: nowrap;
  font-size: 130px;
  letter-spacing: 16px;
  text-align: center;
  color: #7ff0ff;
  text-shadow: 0 0 50px rgba(53,224,255,0.75);
}
.select-row {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 1160px;
  margin-top: 40px;
}
.game-btn {
  position: relative;
  width: 900px;
  padding: 0; border: none; background: none;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.2s, transform 0.2s;
}
/* webm card art carries its own alpha; 960x960 source, so pin the ratio */
.game-btn .game-art {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1;
}
/* EnviroSense wordmark over the green card's video art, centred on the
   960x960 square the video occupies. Same white outline treatment as the
   title page so it lifts off the busy clip underneath. */
.game-logo {
  position: absolute; left: 50%; top: 18%;
  transform: translate(-50%, -50%);
  width: 55%; height: auto;
  pointer-events: none;
  filter:
    drop-shadow(0 0 5px  rgba(255, 255, 255, 1))
    drop-shadow(0 0 5px  rgba(255, 255, 255, 1))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 48px rgba(255, 255, 255, 0.45));
}
/* Label sits over the lower part of the card art, as in the design. The copy is
   3 lines in English but 2 in TC/SC; anchoring by `bottom` keeps the last line
   on the same baseline in every language. Line-height is explicit so the CJK
   font fallback cannot change the line spacing either. */
.game-label {
  position: absolute; left: 0; right: 0; bottom: 100px;
  font-size: 60px; font-weight: 700; line-height: 1.05;
  letter-spacing: 4px; text-align: center;
  color: #fff;
  text-shadow: 0 0 30px rgba(0,0,0,0.85), 0 4px 10px rgba(0,0,0,0.9);
}
/* small caption inside the chatbot card's top tab */
.game-cap {
  position: absolute; left: 0; right: 0; top: 65px;
  font-size: 34px; font-weight: 700; line-height: 1.1;
  letter-spacing: 3px; text-align: center;
  color: #fff;
  text-shadow: 0 0 16px rgba(0,0,0,0.8);
}
.game-btn:hover, .game-btn.selected {
  filter: drop-shadow(0 0 60px rgba(53,224,255,0.55));
  transform: translateY(-10px);
}
.game-btn.pending { opacity: 0.85; cursor: default; }
.game-btn.pending:hover { filter: none; transform: none; }

/* ---------- QR page ---------- */
#page-qr { padding: 0; }
/* .qr-bg geometry comes from .xfade */
.qr-inner {
  position: absolute; inset: 0; z-index: 2;
  padding: 60px 90px;
}
.qr-title {
  margin-top: 10px;
  font-size: 120px; letter-spacing: 16px;
  text-align: center;
  color: #a9f4ff;
  text-shadow: 0 0 45px rgba(53,224,255,0.85), 0 6px 20px rgba(0,0,0,0.8);
}
.qr-sub {
  margin-top: 10px;
  font-size: 88px; letter-spacing: 8px;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 30px rgba(0,0,0,0.9);
}
/* Captions for the two HUD panels drawn into the Step 1 clip. The clip carries
   the same folder artwork the ISDS_folder / x-vision_folder PNGs did, but its
   title areas are blank, so the wording is put back here. The boxes were
   measured off the clip's own panels: it is 3584x1024 and object-fit: cover
   scales it 1.25x and trims 64px from each side, so video x*1.25-64 and y*1.25
   give the stage coordinates below. The panels barely drift over the clip, so a
   fixed overlay stays registered. */
.team-cap {
  position: absolute;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 22px rgba(0,0,0,0.9), 0 0 70px rgba(53,224,255,0.35);
}
.team-cap b    { display: block; font-size: 116px; font-weight: 700; line-height: 1.04; }
.team-cap span { display: block; font-size: 58px;  font-weight: 700; line-height: 1.1; }
.team-cap.left  { left: 230px;  top: 404px; width: 830px; }
.team-cap.right { left: 3310px; top: 404px; width: 840px; }

.qr-center {
  position: absolute; left: 0; right: 0; top: 470px;
  display: flex; align-items: center; justify-content: center;
  gap: 120px;
}
#qr-box {
  width: 480px; height: 480px; flex: none;
  background: #fff; border-radius: 8px; padding: 18px;
  box-shadow: 0 0 90px rgba(255,255,255,0.35);
}
#qr-box img, #qr-box canvas { width: 100%; height: 100%; }
/* The full-colour logo sits straight on a busy photo background and loses its
   edges against it. Its wordmark is near-black navy and the palette is drawn
   for paper, so the plate has to be light — off-white rather than pure white to
   take the glare off at LED brightness. Matches the white QR plate beside it.
   Width = 760px of logo + the horizontal padding, so the mark itself stays the
   size it was designed at. */
.qr-logo {
  width: 876px; height: auto; flex: none;
  padding: 52px 56px;
  border-radius: 30px;
  background: rgba(228,234,238,0.24);
  border: 2px solid rgba(255,255,255,0.45);
  box-shadow: 0 0 70px rgba(255,255,255,0.25);
  /* The plate lands on the map's red markers and cyan lines; blurring and
     desaturating the backdrop stops them printing through as coloured blotches. */
  backdrop-filter: blur(20px) saturate(0.75);
}
/* No frosting available -> lean on opacity instead, or the wordmark competes
   with whatever is behind it. */
@supports not (backdrop-filter: blur(1px)) {
  .qr-logo { background: rgba(232,238,242,0.92); }
}
.qr-block { display: flex; flex-direction: column; align-items: center; }
.qr-scan {
  margin-top: 26px;
  font-size: 50px; font-weight: 700; letter-spacing: 2px;
  color: #fff; text-shadow: 0 0 20px rgba(0,0,0,0.9);
}
.qr-join {
  margin-top: 14px;
  font-size: 46px; letter-spacing: 4px;
  color: #dff8ff; text-shadow: 0 0 20px rgba(0,0,0,0.9);
}
.qr-join .big { font-size: 70px; color: var(--green); padding: 0 14px; }

/* ---------- info1 page (city risk dashboard over the step-2 map video) --- */
#page-info1 { padding: 0; }
.info1-vid {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.info1-inner {
  position: absolute; inset: 0; z-index: 1;
}
.info1-title {
  position: absolute; left: 0; right: 0; top: 24px;
  text-align: center;
  font-size: 90px; letter-spacing: 12px;
  color: #a9f4ff;
  text-shadow: 0 0 45px rgba(53,224,255,0.8), 0 6px 20px rgba(0,0,0,0.85);
}

/* shared HUD panel shell */
.hud { position: absolute; }
.hud-h {
  font-size: 42px; font-weight: 700; letter-spacing: 2px;
  color: #fff; text-shadow: 0 0 24px rgba(0,0,0,0.9);
  margin-bottom: 10px;
}
.hud-sub {
  font-size: 32px; font-weight: 700; letter-spacing: 3px;
  color: var(--cyan); text-shadow: 0 0 20px rgba(0,0,0,0.9);
  margin-bottom: 8px;
}
.hud-sub.red { color: #ff5a3c; }

/* --- top left: risk assessment tiles --- */
.hud-tiles { left: 460px; top: 96px; width: 810px; }
.tile {
  display: flex; align-items: stretch; gap: 12px;
  background: rgba(6, 28, 44, 0.72);
  border: 2px solid rgba(53,224,255,0.35);
  border-radius: 8px;
  padding: 7px;
  margin-bottom: 8px;
}
.tile-shot {
  width: 132px; height: 78px; flex: none;
  object-fit: cover; border-radius: 4px;
}
.tile-mid { flex: 1; min-width: 0; line-height: 1.15; }
.tile-zh { font-size: 19px; color: #cfefff; }
.tile-en { font-size: 21px; font-weight: 700; color: var(--amber); }
.tile-cap { font-size: 15px; color: #9fd8e8; }
.lvl { display: flex; gap: 8px; margin-top: 3px; }
.lvl span {
  flex: 1; font-size: 15px; color: #9fd8e8;
  text-align: center;
}
.lvl i { display: block; height: 9px; border-radius: 2px; margin-bottom: 2px; background: #2a5566; }
.lvl em { font-style: normal; }
.lvl span:nth-child(1) i { background: #3f8f5f; }
.lvl span:nth-child(2) i { background: var(--amber); }
.lvl-high span:nth-child(3) i { background: var(--red); height: 22px; margin-top: -13px; }
.lvl-med  span:nth-child(2) i { height: 22px; margin-top: -13px; }
.tile-model {
  width: 230px; flex: none;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; color: #06222e; font-weight: 700;
  background: #e8f6fb;
  border: 2px solid rgba(53,224,255,0.6);
  border-radius: 6px;
}
.tile-model .dot {
  position: absolute; top: 8px; right: 8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 14px var(--green);
}

/* --- bottom left: breakdown chart + repair alerts --- */
.hud-alerts { left: 460px; top: 820px; width: 1180px; }
.alerts-cols { display: flex; gap: 40px; }
.breakdown { width: 490px; flex: none; }
.chart-cap { font-size: 22px; color: #cfefff; text-align: center; }
.bars { margin-top: 6px; }
.bar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.bar-lab { width: 130px; flex: none; font-size: 22px; text-align: right; color: #eaf9ff; }
.bar { height: 20px; border-radius: 2px; }
.bar.orange { background: #f4653a; }
.bar.green  { background: #9ff0b6; }
.axis {
  display: flex; justify-content: space-between;
  margin: 4px 0 0 144px;
  font-size: 20px; color: #cfefff;
  border-top: 2px solid rgba(255,255,255,0.5); padding-top: 4px;
}
.axis-cap { margin-left: 144px; margin-top: 2px; }

.repair { flex: 1; min-width: 0; }
.alert-table {
  width: 100%; border-collapse: collapse;
  background: #e2431f;
  font-size: 22px; color: #fff;
}
.alert-table th, .alert-table td {
  padding: 5px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  text-align: left;
}
.alert-table th { font-size: 20px; letter-spacing: 1px; }
.alert-table tbody tr:last-child td { border-bottom: none; }
.sq {
  display: inline-block; width: 18px; height: 18px;
  margin-right: 8px; vertical-align: -2px; border-radius: 2px;
}
.sq.red { background: #ff2d2d; }
.sq.amber { background: #ffc02e; }

/* --- right: AI model integration status --- */
.hud-models { right: 430px; top: 96px; width: 790px; }
.model-row {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  background: rgba(6, 28, 44, 0.72);
  border: 2px solid rgba(53,224,255,0.35);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.model-meta { position: relative; width: 330px; flex: none; }
.model-chip {
  display: inline-block;
  font-size: 22px; font-weight: 700; color: #06220f;
  background: #4fbf72; border-radius: 4px;
  padding: 3px 10px;
  max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: top;
}
.model-pct {
  position: absolute; left: 300px; top: 4px;
  font-size: 22px; color: var(--green);
}
.meter { height: 12px; margin-top: 8px; background: rgba(255,255,255,0.12); border-radius: 2px; }
.meter i { display: block; height: 100%; border-radius: 2px; background: #4fbf72; }
.meter.blue i { background: #35a8e0; }
.spark { flex: 1; height: 66px; min-width: 0; margin-bottom: 20px; }
.spark polyline { fill: none; stroke: #9ff0b6; stroke-width: 3; }
.spark-legend {
  position: absolute; left: 372px; bottom: 10px;
  font-size: 18px; color: #9fd8e8;
}

/* ---------- info2 page (step-3 clip under the cover plates + issues) ----- */
#page-info2 { padding: 0; }
.info2-vid {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* Both overlays ease in with the clip rather than popping. Keyed off .active so
   the animation is re-applied every time the page comes up — no JS timers.
   The plates go first and quickly: the clip opens on ~1s of black, so they are
   solid well before its captions are bright enough to read through them. The
   issues panel then lands a beat later, once the scene has established. */
@keyframes info2FadeIn { from { opacity: 0; } to { opacity: 1; } }

#page-info2.active .info2-shots { animation: info2FadeIn 0.6s ease both; }
#page-info2.active .issues-box  { animation: info2FadeIn 0.9s ease 1.5s both; }
/* These blank out the three captioned thumbnails baked into the step-3 clip
   ("Main Structure" / "Structural Cracks" / "Inclination Angle") — caption text
   included, which is the whole point of them. The clip slowly zooms in, so each
   panel is the union of where its group sits across the entire clip, not where
   it sits on any one frame; that is why they are this large and why they
   overlap. Stage coordinates (4352x1280).

   The panel is what does the covering, so its fill is opaque. The photo inside
   keeps its own 848x1264 proportions and is centred, which leaves the panel
   showing down both sides — that margin is the design, not a gap. */
.info2-shots {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}
.info2-shots .shot {
  position: absolute;
  padding: 18px;
  overflow: hidden;
  /* fully opaque on purpose: the captions underneath are near-white and ghost
     straight through even a 4% transparent fill */
  background: linear-gradient(180deg, #0b2331 0%, #05141d 100%);
  border: 2px solid rgba(53, 224, 255, 0.45);
  border-radius: 12px;
  box-shadow:
    0 0 40px rgba(53, 224, 255, 0.14) inset,
    0 0 60px rgba(0, 0, 0, 0.55);
}
.info2-shots .shot img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}
/* corner brackets, matching the issues panel's framing */
.info2-shots .shot::before {
  content: ''; position: absolute; inset: 12px; pointer-events: none;
  background-image:
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan));
  background-repeat: no-repeat;
  background-size: 4px 54px, 54px 4px, 4px 54px, 54px 4px,
                   4px 54px, 54px 4px, 4px 54px, 54px 4px;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
  opacity: 0.75;
}
/* slow scan sweep — the plates are wider than the portrait photo inside them,
   so this gives the surrounding margin something to do */
.info2-shots .shot::after {
  content: ''; position: absolute; left: 0; right: 0; height: 24%;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent, rgba(53, 224, 255, 0.18) 50%, transparent);
  animation: shotScan 4.2s linear infinite;
}
.shot-2::after { animation-delay: 1.4s; }
.shot-3::after { animation-delay: 2.8s; }
@keyframes shotScan { from { top: -24%; } to { top: 100%; } }

/* Enlarged per the client markup ("too much nothing space"). Grown in height,
   not width: the photo is portrait and fitted by height, so a taller plate makes
   it bigger while a wider one only adds empty plate beside it. Width is held to
   just over each caption's drift range, which is the constraint that stops these
   shrinking any further. Photos end up ~35% taller than before. */
.shot-1 { left: 400px; top: 60px;  width: 680px; height: 580px; }
.shot-2 { left: 730px; top: 360px; width: 660px; height: 510px; }
.shot-3 { left: 990px; top: 660px; width: 680px; height: 570px; }

.issues-box {
  position: absolute; z-index: 2;
  left: 3300px; top: 80px; width: 960px;
  padding: 40px 44px;
  background: rgba(4, 18, 26, 0.55);
  /* corner brackets, as in the design — no full border */
  background-image:
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan));
  background-repeat: no-repeat;
  background-size: 5px 120px, 120px 5px, 5px 120px, 120px 5px,
                   5px 120px, 120px 5px, 5px 120px, 120px 5px;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
}
.issues-box h3 {
  font-size: 86px; font-weight: 700; color: #fff;
  text-shadow: 0 0 26px rgba(0,0,0,0.9);
  margin-bottom: 26px;
}
.issues-box p {
  font-size: 52px; line-height: 1.24; color: #fff;
  text-shadow: 0 0 22px rgba(0,0,0,0.95);
  margin-bottom: 26px;
}
.issues-box p:last-child { margin-bottom: 0; }
.issues-box b { color: var(--amber); }

.footer-brand {
  position: absolute; left: 90px; bottom: 70px;
  font-size: 40px; color: var(--cyan-dim); letter-spacing: 4px;
}

/* ---------- result page (step-4 clip, then the soft loop) ---------------- */
#page-result { padding: 0; }
.result-vid {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.result-inner { position: absolute; inset: 0; z-index: 1; }
.result-title {
  position: absolute; left: 0; right: 0; top: 28px;
  text-align: center;
  font-size: 105px; letter-spacing: 20px;
  color: rgba(206, 232, 240, 0.72);
  text-shadow: 0 0 40px rgba(0,0,0,0.55);
}

/* team panels top-left / top-right */
.team-panel { position: absolute; }
.team-panel img { display: block; width: 100%; height: auto; }
.team-panel.left  { left: 90px;  top: 90px;  width: 710px; }
.team-panel.right { right: 66px; top: 175px; width: 710px; }

/* gold seal + banner over the top-left corner of the ISDS panel */
.ribbon {
  position: absolute; left: -20px; top: -50px;
  display: flex; align-items: center;
}
.ribbon .seal {
  /* the banner is pulled 18px under the seal to read as one piece; without
     this the banner, being later in the DOM, would paint over that edge */
  position: relative; z-index: 1;
  width: 130px; height: 130px; flex: none;
  border-radius: 50%;
  background: #2f7d3a;
  border: 10px solid #d9a326;
  box-shadow: 0 0 30px rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 74px; color: #ffe9a8;
}
.ribbon-text {
  margin-left: -18px;
  padding: 14px 30px 14px 40px;
  background: #2f7d3a;
  border: 4px solid #d9a326;
  font-size: 38px; font-weight: 700; line-height: 1.08;
  letter-spacing: 2px; color: #fff;
  text-shadow: 0 0 14px rgba(0,0,0,0.8);
}
/* gold "all clear" seal under the X-Vision panel */
.all-clear {
  position: absolute; right: 20px; bottom: -110px;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: #2f7d3a;
  border: 12px solid #d9a326;
  box-shadow: 0 0 36px rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; font-weight: 700; line-height: 1.05;
  text-align: center; color: #fff;
}

/* centre result card */
.result-card {
  /* centred off the stage midline rather than a hand-placed left offset — the
     old 1210px put its centre at 2205px, 29px right of the 2176px midline */
  position: absolute; left: 50%; transform: translateX(-50%); top: 390px;
  width: 1990px;
  text-align: center;
  padding: 60px 40px;
  background: rgba(46, 84, 52, 0.42);
  border-radius: 30px;
  box-shadow: 0 0 140px rgba(0,0,0,0.35);
}
.id-en {
  font-size: 150px; font-weight: 700; line-height: 1.1;
  letter-spacing: 6px;
  color: #9fd6a2;
  text-shadow: 0 0 40px rgba(0,0,0,0.75);
}
.id-sub {
  margin-top: 26px;
  font-size: 78px; font-weight: 700;
  color: #fff;
  text-shadow: 0 0 26px rgba(0,0,0,0.85);
}

/* ---------- present page (architecture + benefits over the step-5 plate) -- */
#page-present { padding: 0; }
.present-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.present-inner { position: absolute; inset: 0; z-index: 1; }
/* the AFTER-TYPHOON CITY heading was dropped here at the client's request, and
   the panel took over the space it used to occupy */
.present-panel {
  position: absolute; left: 377px; top: 92px;
  width: 3600px; height: 1146px;
  display: flex;
  background: rgba(18, 26, 30, 0.62);
  border-radius: 8px;
  padding: 30px 40px;
}

/* --- left half: system architecture --- */
/* The logo, heading and diagram were sized before the deck's bullet copy and
   compute-unit list had to fit in the same column, hence the tighter figures. */
.arch { width: 1720px; flex: none; position: relative; text-align: center; }
/* same outline treatment as the title page, kept at the enlarged size */
.arch-logo {
  width: 380px; height: auto; margin-top: 10px;
  filter:
    drop-shadow(0 0 4px  rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.75))
    drop-shadow(0 0 26px rgba(255, 255, 255, 0.45));
}
.arch-h {
  margin-top: 18px;
  font-size: 70px; font-weight: 700; letter-spacing: 3px;
  color: #7fe6ff;
  text-shadow: 0 0 26px rgba(0,0,0,0.8);
}
.arch-points {
  list-style: none;
  width: 1400px; margin: 22px auto 0;
  text-align: left;
  font-size: 36px; line-height: 1.28;
  color: #dff8ff;
  text-shadow: 0 0 16px rgba(0,0,0,0.85);
}
.arch-points li { position: relative; padding-left: 34px; margin-bottom: 6px; }
.arch-points li::before {
  content: ''; position: absolute; left: 2px; top: 0.5em;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--cyan);
}
/* Container is sized to the diagram (780x563, scaled 0.5693 from the source
   PNG's 1370x988) plus room to its right for the CDU labels, then centred in
   .arch via margin:auto — NOT stretched to .arch's width the way the old
   single-row flowchart was, because this artwork's icons sit at three
   different heights and need independently placed labels, not one shared
   percent-of-width axis. Height is explicit so the absolutely-positioned
   labels (which contribute no layout height themselves) don't collapse it. */
.arch-flow { position: relative; width: 1120px; height: 563px; margin: 26px auto 0; }
.arch-diagram-img { position: absolute; left: 0; top: 0; width: 780px; height: auto; display: block; }
.arch-lab {
  position: absolute;
  font-size: 32px; font-weight: 700; color: #fff;
  text-shadow: 0 0 18px rgba(0,0,0,0.9);
  white-space: nowrap;
}
/* File Store / Database: pinned to the right of their icon, vertically centred on it */
.arch-lab-side { transform: translateY(-50%); text-align: left; }
/* the three compute units: longer text (esp. TC/SC), so these wrap instead of
   forcing a single line, and get a bit more breathing room in the column */
.arch-lab-cdu {
  width: 520px; white-space: normal; line-height: 1.22;
  font-size: 28px; color: #9fe9ff;
  transform: translateY(-50%); text-align: left;
}

/* --- right half: benefits --- */
.benefits { flex: 1; min-width: 0; position: relative; }
.benefits-h {
  text-align: center;
  font-size: 82px; font-weight: 700; letter-spacing: 3px;
  color: #7fe6ff;
  text-shadow: 0 0 26px rgba(0,0,0,0.8);
  margin: 30px 0 0;
}
.benefit-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 92px 130px;
  margin-top: 36px;
}

/* Tech-panel card from the Step05 design: corners chamfered top-left and
   bottom-right, a thin gold edge following that silhouette, and a dark
   translucent interior that warms up towards the left and right edges.
   The card itself is left unclipped so the icon can hang over its top edge —
   clip-path would cut the icon off, since it clips descendants too. The two
   layers below carry the whole card visual instead. */
.benefit {
  --chamfer: 26px;
  position: relative;
  padding: 44px 34px 26px;
}
.benefit::before, .benefit::after {
  content: ''; position: absolute; z-index: 0;
  clip-path: polygon(
    var(--chamfer) 0, 100% 0,
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
    0 100%, 0 var(--chamfer));
}
/* the gold edge — a 2px sliver of this layer shows around ::after */
.benefit::before {
  inset: 0;
  background: linear-gradient(90deg,
    rgba(130, 100, 48, 0.26) 0%,
    rgba(112, 86, 42, 0.20) 10%,
    rgba(84, 66, 32, 0.16) 50%,
    rgba(122, 94, 46, 0.24) 90%,
    rgba(130, 100, 48, 0.16) 100%);
}
/* The interior. Sampled off the Step05 mock, its cards run about luma 20 in the
   middle and only 55-75 at the ends: the amber reads as hue, not brightness, so
   these stay dark. A bright gold turns the panel into a slab and swamps the
   cyan type. */
.benefit::after {
  inset: 2px;
  background: linear-gradient(90deg,
    rgba(88, 62, 22, 0.86) 0%,
    rgba(40, 29, 13, 0.87) 4%,
    rgba(11, 10, 8, 0.88) 11%,
    rgba(11, 10, 8, 0.88) 80%,
    rgba(56, 41, 19, 0.84) 88%,
    rgba(106, 77, 30, 0.80) 96%,
    rgba(104, 74, 28, 0.82) 100%);
}
/* centred over its own card and overlapping the top edge by about a quarter */
.benefit .bi {
  position: absolute; z-index: 2;
  top: -76px; left: 50%; transform: translateX(-50%);
  width: 104px; height: 104px;
  fill: none; stroke: #4fd8ef; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 14px rgba(79,216,239,0.6));
}
.b-h {
  position: relative; z-index: 1;
  text-align: center;
  font-size: 36px; font-weight: 700; color: #7fe6ff;
  text-shadow: 0 0 16px rgba(0,0,0,0.85);
  margin-bottom: 8px;
}
.b-p {
  position: relative; z-index: 1;
  font-size: 28px; line-height: 1.25; color: #e6f2f6;
  text-shadow: 0 0 14px rgba(0,0,0,0.85);
}

/* last page: a tap does not advance, so no arrow */
#page-present.active ~ #nav #btn-next { display: none; }