/* ==========================================================
   Ebb and the Riptide Breach | Goodwin University
   Brand colors are set in js/config.js and override these defaults.
   ========================================================== */

:root {
  /* Brand (from the Ebb reference pack) */
  --navy: #002855;
  --wave: #084DAE;
  --blue: #005CB9;            /* goodwin.edu web blue */
  --cta: #B84E08;             /* orange call to action (darkened for contrast) */
  --brand-grad: linear-gradient(90deg, var(--blue) 0 55%, var(--sunrise) 55% 84%, var(--green) 84% 100%);
  --sunrise: #2FA7DF;
  --green: #79B943;
  --silver: #C0C7D1;
  --white: #FFFFFF;

  /* Working colors */
  --text: #16253B;
  --muted: #45566D;           /* 7.3:1 on white */
  --paper: #F2F6FA;
  --chart: #F6F9FC;
  --line: #D3DBE5;
  --ebb-bg: #F9F9FA;          /* matches the background of the Ebb artwork */
  --good-text: #2C5E12;       /* 7.6:1 on white */
  --good-bg: #EEF6E7;
  --bad-text: #9E2A1F;        /* 7.1:1 on white */
  --bad-bg: #FCEEEC;
  --info-bg: #EAF2FB;

  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, "Courier New", monospace;

  --r-s: 4px;
  --r-m: 8px;
  --shadow: 0 1px 0 rgba(0, 40, 85, .06), 0 6px 18px -8px rgba(0, 40, 85, .28);
  --focus: 3px solid var(--wave);
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-display); color: var(--navy); line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
h2 { color: var(--blue); }
h1 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.6rem); font-weight: 900; }
h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 .8em; }
a { color: var(--wave); text-underline-offset: 2px; }
strong { font-weight: 650; color: var(--navy); }
.mono { font-family: var(--font-mono); font-size: .94em; letter-spacing: 0; }
.lead { font-size: 1.12rem; max-width: 62ch; }
.help-text { color: var(--muted); font-size: .94rem; }
.help-text.block { display: block; margin-top: .25rem; }

:focus-visible { outline: var(--focus); outline-offset: 2px; }
h1:focus, h2:focus, h3:focus, legend:focus, .q-count:focus, .hint:focus { outline: none; }
h1:focus-visible, h2:focus-visible, h3:focus-visible { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--navy); color: var(--white); padding: .6rem 1rem; border-radius: var(--r-s);
}
.skip-link:focus { top: 12px; }

.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header / footer ---------- */
.site-header { background: var(--white); position: relative; z-index: 5; }
.brand-bar { display: flex; align-items: center; gap: 1rem; padding: .55rem var(--gutter); max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--navy); border-radius: var(--r-s); }
.brand img { height: 58px; width: auto; }
.brand-text { display: grid; padding-left: .9rem; border-left: 2px solid var(--line); line-height: 1.25; }
.brand-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--navy); }
.brand-sub { font-size: .86rem; font-weight: 700; color: var(--blue); }
.tool-band { background: var(--blue); }
.toolbar { display: flex; align-items: center; justify-content: flex-end; gap: .15rem; flex-wrap: wrap; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.tool-btn {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 46px;
  background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  color: var(--white); font: inherit; font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: .4rem .8rem .25rem; cursor: pointer;
}
.tool-btn:hover { background: rgba(255, 255, 255, .1); border-bottom-color: var(--green); }
.tool-band :focus-visible, .site-footer :focus-visible, .hero-band :focus-visible { outline-color: var(--white); }
.timer {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0 auto 0 0;
  font-weight: 800; font-variant-numeric: tabular-nums; color: var(--white); font-size: .95rem; letter-spacing: .04em;
}
.timer[hidden] { display: none; }
.brand-stripe { height: 5px; background: linear-gradient(90deg, var(--navy) 0 55%, var(--sunrise) 55% 84%, var(--green) 84% 100%); }

main { flex: 1; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: clamp(20px, 4vw, 44px) var(--gutter) 56px; }
main:focus { outline: none; }
main.screen-title { max-width: none; padding: 0 0 56px; }
.site-footer { background: var(--blue); color: var(--white); font-size: .92rem; }
.site-footer p { margin: 0; }
.footer-inner { display: flex; justify-content: space-between; gap: 1.2rem 3rem; flex-wrap: wrap; max-width: var(--wrap); margin: 0 auto; padding: 1.6rem var(--gutter) 1.1rem; }
.footer-title { font-weight: 800; font-size: 1.02rem; margin-bottom: .2rem !important; }
.footer-help { text-align: right; }
.site-footer a { color: var(--white); font-weight: 700; text-decoration-thickness: 1px; }
.footer-note { text-align: center; font-size: .82rem; color: rgba(255, 255, 255, .88); padding: .75rem var(--gutter) 1.25rem; border-top: 1px solid rgba(255, 255, 255, .22); max-width: var(--wrap); margin: 0 auto !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: .6rem 1.15rem;
  font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-align: left;
  border-radius: var(--r-s); border: 2px solid var(--blue); cursor: pointer;
  background: var(--white); color: var(--navy);
  transition: background-color .15s, color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { cursor: not-allowed; opacity: .55; transform: none; }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-cta { background: var(--cta); border-color: var(--cta); color: var(--white); text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
.btn-cta:hover:not([disabled]) { background: #973F05; border-color: #973F05; }
.btn-primary:hover:not([disabled]) { background: var(--navy); border-color: var(--navy); }
.btn-ghost { background: var(--white); color: var(--blue); }
.btn-ghost:hover:not([disabled]) { background: var(--info-bg); }
.btn-danger { background: var(--bad-text); border-color: var(--bad-text); color: var(--white); }
.btn-danger:hover { background: #7E1F16; }
.btn-small { min-height: 40px; padding: .4rem .8rem; font-size: .93rem; }
.btn-large { min-height: 54px; padding: .8rem 1.5rem; font-size: 1.08rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.25rem; }
.actions-center { justify-content: center; }

/* ---------- Feedback & tags ---------- */
.fb { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem 1rem; border-radius: var(--r-s); border-left: 5px solid; margin: .75rem 0 0; }
.fb .icon { margin-top: .2em; }
.fb-good { background: var(--good-bg); border-color: var(--green); color: var(--good-text); }
.fb-bad  { background: var(--bad-bg); border-color: var(--bad-text); color: var(--bad-text); }
.fb-info { background: var(--info-bg); border-color: var(--wave); color: var(--navy); }
.fb strong { color: inherit; }
.fb p { margin: 0; }
.inline-feedback:empty, .stage-feedback:empty { display: none; }

.tag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; font-weight: 650; line-height: 1.2; padding: .2rem .5rem; border-radius: 999px;
  border: 1.5px solid currentColor; white-space: nowrap;
}
.tag .icon { width: .95em; height: .95em; stroke-width: 2.6; }
.tag-good { color: var(--good-text); background: var(--good-bg); }
.tag-bad  { color: var(--bad-text); background: var(--bad-bg); }
.tag-flag { color: var(--navy); background: #FFF4CC; border-color: #8A6D00; }
.tag-info { color: var(--wave); background: var(--info-bg); }
.tag-none { color: var(--muted); border-style: dashed; }

/* ---------- Ebb frames ---------- */
.porthole {
  --size: 150px;
  width: var(--size); height: var(--size); flex: none;
  border-radius: 50%;
  background: var(--ebb-bg);
  border: 7px solid var(--silver);
  box-shadow: 0 0 0 3px var(--navy), inset 0 0 0 3px var(--navy), var(--shadow);
  overflow: hidden;
  position: relative;
}
.porthole img { width: 100%; height: 108%; object-fit: cover; object-position: 50% 12%; }
.porthole-large { --size: clamp(150px, 22vw, 230px); }
.figure-frame {
  margin: 0; background: var(--ebb-bg); border-radius: var(--r-m);
  border: 3px solid var(--navy); box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 6px var(--silver);
  padding: 10px; display: flex; align-items: flex-end; justify-content: center;
}
.figure-frame img { max-height: 100%; width: auto; }
.frame-hero { width: 100%; max-width: 520px; aspect-ratio: 460 / 326; }
.frame-hero img { width: 100%; height: 100%; object-fit: contain; }
.frame-room { width: 150px; height: 200px; }
.frame-wide { width: 230px; }
.frame-contact { width: 100%; height: 220px; margin-bottom: 1rem; }

.bubble {
  position: relative; background: var(--white); border: 2px solid var(--navy); border-radius: var(--r-m);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow);
}
.bubble-large { padding: clamp(1.25rem, 3vw, 2rem); max-width: 640px; }
.guide-name { font-family: var(--font-display); color: var(--wave); font-weight: 600; margin-bottom: .2rem; }
.step-count, .q-count, .room-kicker { color: var(--muted); font-size: .95rem; font-weight: 600; margin-bottom: .4rem; }

/* ---------- Title: full-bleed hero band + overlapping card (after goodwin.edu) ---------- */
.hero-band {
  position: relative; color: var(--white);
 padding: clamp(40px, 6vw, 84px) var(--gutter) clamp(120px, 12vw, 160px);
  background:
    linear-gradient(100deg, rgba(0, 40, 85, .97) 0%, rgba(0, 40, 85, .9) 45%, rgba(0, 92, 185, .74) 100%),
    url("../assets/img/scenes/room3-library-lab.svg") center 40% / cover no-repeat,
    var(--navy);
}
.hero-inner { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero-kicker { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; color: #BFE4F6; margin: 0; }
.hero-title { color: var(--white); font-size: clamp(2.6rem, 1.4rem + 4.8vw, 4.8rem); font-weight: 900; line-height: .98; letter-spacing: -.02em; max-width: 11ch; margin: .25em 0 .35em; }
.hero-tag { font-size: 1.25rem; max-width: 36ch; color: rgba(255, 255, 255, .92); margin: 0; }
.hero-art .frame-hero { margin-left: auto; border-color: var(--white); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .65), inset 0 0 0 4px var(--white), inset 0 0 0 6px var(--silver); }
.hero-card {
  position: relative; z-index: 2; max-width: 1040px; width: calc(100% - 2 * var(--gutter)); margin: calc(-1 * clamp(90px, 9vw, 120px)) auto 0;
  background: var(--white); border-radius: var(--r-s); box-shadow: 0 18px 40px -20px rgba(0, 24, 51, .45);
  padding: clamp(24px, 4vw, 44px); text-align: center;
}
.hero-card-logo { width: 104px; height: auto; margin: 0 auto 1rem; }
.hero-card-title { color: var(--blue); font-weight: 900; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); max-width: 30ch; margin: 0 auto .9rem; }
.brand-rule { height: 4px; background: var(--brand-grad); margin: 0 auto 2rem; max-width: 860px; }
.hero-steps { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); }
.step-icon { width: 84px; height: 84px; border-radius: 50%; background: var(--blue); color: var(--white); display: inline-grid; place-items: center; box-shadow: 0 0 0 6px var(--info-bg); }
.step-icon .icon { width: 40px; height: 40px; stroke-width: 1.8; }
.hero-step h3 { color: var(--blue); text-transform: uppercase; letter-spacing: .03em; font-size: 1.02rem; font-weight: 800; margin: 1rem 0 .3rem; }
.hero-step p { color: var(--muted); font-size: .96rem; max-width: 28ch; margin: 0 auto; }
.hero-meta { display: inline-flex; align-items: center; gap: .5rem; color: var(--navy); font-weight: 700; margin: 0; }
.center { text-align: center; }
.help-text.center { margin: .9rem 0 0; }

/* Section heading flanked by green rules (as on goodwin.edu) */
.flank-title { display: flex; align-items: center; gap: 1.1rem; color: var(--blue); text-transform: uppercase; font-weight: 900; letter-spacing: .01em; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem); }
.flank-title::before, .flank-title::after { content: ""; flex: 1; min-width: 24px; height: 3px; background: var(--green); }
.flank-title.flank-left::before { display: none; }

/* ---------- Briefing ---------- */
.briefing, .cert-form-screen { display: flex; gap: clamp(20px, 4vw, 48px); align-items: center; justify-content: center; min-height: 55vh; }

/* ---------- Map ---------- */
.map-head { margin-bottom: 1.5rem; }
.map-head .lead { margin: 0 auto 1.25rem; }
.stat-strip { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { display: grid; gap: .1rem; text-align: center; background: var(--white); border-top: 4px solid var(--blue); border-radius: var(--r-s); padding: .75rem 1rem .85rem; box-shadow: var(--shadow); }
.stat-num { font-weight: 900; font-size: clamp(2rem, 1.5rem + 1.4vw, 2.7rem); color: var(--blue); line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-of { font-size: .5em; font-weight: 800; }
.stat-label { font-weight: 700; color: var(--navy); font-size: .95rem; }
.map-progress { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; color: var(--navy); background: var(--white); border: 2px solid var(--silver); border-radius: 999px; padding: .35rem .9rem; margin: 0; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
.chart { position: relative; background: var(--white); border: 3px solid var(--navy); border-radius: var(--r-m); padding: 6px; box-shadow: var(--shadow); }
.chart-inner { position: relative; overflow: hidden; border-radius: 6px; }
.chart-svg { display: block; width: 100%; height: auto; border-radius: 6px; }
.chart-svg text { font-family: var(--font-display); }
.compass-n { font-size: 18px; font-weight: 700; fill: var(--navy); }
.cartouche-title { font-family: Georgia, "Times New Roman", serif !important; font-style: italic; font-size: 24px; font-weight: 700; fill: var(--navy); }
.cartouche-sub { font-size: 11.5px; fill: var(--muted); letter-spacing: .02em; }
.port-ring { fill: var(--white); stroke: var(--silver); stroke-width: 4; }
.port-num { font-size: 24px; font-weight: 700; text-anchor: middle; fill: var(--muted); }
.port-label { font-size: 20px; font-weight: 600; text-anchor: middle; fill: var(--navy); paint-order: stroke; stroke: #F4F7F0; stroke-width: 6px; stroke-linejoin: round; }
.port-chest .port-label { text-anchor: end; }
.port.is-current .port-ring { stroke: var(--navy); fill: #FFF6D6; }
.port.is-current .port-num { fill: var(--navy); }
.port.is-done .port-ring { fill: var(--navy); stroke: var(--green); }
.port.is-done .port-num { fill: var(--white); }
.flag-raider { fill: #1B2433; }
.flag-goodwin { fill: var(--green); }
.port.is-done .flag-raider, .port:not(.is-done) .flag-goodwin { display: none; }
.port-flag { transform-box: fill-box; transform-origin: left center; animation: flag-wave 2.4s ease-in-out infinite; }
@keyframes flag-wave { 0%, 100% { transform: skewY(0deg); } 50% { transform: skewY(-4deg); } }
.x-mark { stroke: #9E2A1F; stroke-width: 4; stroke-linecap: round; fill: none; }
.chest-glow { opacity: 0; transition: opacity .6s; }
.port-chest.is-current .chest-glow { animation: chest-pulse 2s ease-in-out infinite; }
.port-chest.is-done .chest-glow { opacity: .6; }
@keyframes chest-pulse { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
.ship-body { animation: ship-bob 3s ease-in-out infinite; }
@keyframes ship-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
.fog { opacity: .93; transition: opacity 1.6s ease, transform 1.6s ease; }
.fog.clear { opacity: 0; transform: translateX(40px); }

/* Clickable ports over the chart */
.map-port {
  position: absolute; width: 7.2%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 3px solid transparent; background: transparent; cursor: pointer; padding: 0;
}
.map-port:hover, .map-port:focus-visible { border-color: var(--wave); background: rgba(47, 167, 223, .18); box-shadow: 0 0 0 3px var(--white); outline: none; }
.map-port.is-locked { cursor: not-allowed; }
.map-port.nudge { animation: shake .4s ease; }
.map-tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); z-index: 3;
  display: grid; gap: .1rem; min-width: 170px; text-align: left; white-space: nowrap;
  background: var(--navy); color: var(--white); border-radius: var(--r-s); padding: .45rem .7rem; font-size: .85rem; line-height: 1.3;
  box-shadow: 0 6px 18px -6px rgba(0, 24, 51, .6); opacity: 0; pointer-events: none; transition: opacity .15s;
}
.map-port.tip-left .map-tip { left: auto; right: 0; transform: none; }
.map-port.tip-below .map-tip { bottom: auto; top: calc(100% + 10px); }
.map-tip strong { color: var(--white); font-size: .92rem; }
.map-port:hover .map-tip, .map-port:focus-visible .map-tip { opacity: 1; }
.chart.is-sailing .map-port { pointer-events: none; }
.chart.is-sailing .map-tip { opacity: 0 !important; }

.port-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.port-card {
  display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; align-items: start;
  background: var(--white); border: 2px solid var(--line); border-radius: var(--r-s); padding: .85rem 1rem;
}
.port-card .btn { grid-column: 2; justify-self: start; margin-top: .35rem; }
.port-card h2 { font-size: 1.12rem; margin: 0 0 .1rem; }
.port-topic { color: var(--muted); font-size: .93rem; margin: 0 0 .3rem; }
.port-status { margin: 0; font-size: .93rem; }
.port-badge {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  border: 3px solid var(--silver); color: var(--muted); background: var(--white);
}
.port-card.is-current { border-color: var(--navy); box-shadow: var(--shadow); }
.port-card.is-current .port-badge { border-color: var(--navy); color: var(--navy); background: #FFF6D6; }
.port-card.is-done .port-badge { background: var(--navy); border-color: var(--green); color: var(--white); }
.port-card.is-locked { background: transparent; border-style: dashed; }
.status { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.status-good { color: var(--good-text); }
.status-current { color: var(--wave); }
.status-locked { color: var(--muted); }

/* ---------- Room ---------- */
.room-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 28px; align-items: end;
  position: relative; padding-bottom: 1.4rem; margin-bottom: 1.6rem;
}
.room-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--brand-grad); border-radius: 2px; }
.room-head .lead { margin-bottom: 1rem; }
.room-head-text h1 { margin-bottom: .3rem; }
.room-back { position: absolute; top: 0; right: 0; }
.room-head .figure-frame { margin-top: 3rem; }
.stepper { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding: 0; margin: 0; }
.step { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-weight: 600; font-size: .95rem; }
.step-dot {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 2.5px solid var(--silver); background: var(--white); font-family: var(--font-display); font-size: .95rem;
}
.step.is-current { color: var(--navy); }
.step.is-current .step-dot { border-color: var(--navy); background: #FFF6D6; color: var(--navy); }
.step.is-done .step-dot { background: var(--navy); border-color: var(--green); color: var(--white); }
.step.is-done .step-dot .icon { width: 16px; height: 16px; stroke-width: 3; }

.room-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.guide { position: sticky; top: 16px; display: grid; gap: 14px; justify-items: center; }
.guide .bubble { width: 100%; }
.guide .bubble::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 20px; height: 20px; margin-left: -10px;
  background: var(--white); border-left: 2px solid var(--navy); border-top: 2px solid var(--navy); transform: rotate(45deg);
}
.room-grid-wide { grid-template-columns: 1fr; gap: 20px; }
.room-grid-wide .guide { position: static; grid-template-columns: auto minmax(0, 1fr); align-items: start; justify-items: stretch; gap: 20px; }
.room-grid-wide .guide .porthole { --size: 120px; }
.room-grid-wide .guide .bubble::before { top: 40px; left: -12px; margin-left: 0; transform: rotate(-45deg); }
.room-grid-wide .bubble > p, .room-grid-wide .hints { max-width: 75ch; }
.room-grid-wide .btn-hint { width: auto; gap: 1rem; }
.puzzle-title { font-size: 1.3rem; }
.puzzle-area {
  background: var(--white); border: 2px solid var(--line); border-radius: var(--r-m); padding: clamp(16px, 3vw, 28px);
  min-width: 0;
}

/* Hints */
.hints { margin-top: 1rem; border-top: 1px dashed var(--silver); padding-top: .9rem; }
.hint-list { list-style: none; padding: 0; margin: 0 0 .75rem; display: grid; gap: .5rem; }
.hint { background: #FFF8E1; border-left: 4px solid #B08900; padding: .55rem .75rem; border-radius: 4px; font-size: .95rem; }
.hint-label { font-weight: 700; color: var(--navy); }
.btn-hint { width: 100%; justify-content: space-between; border-color: var(--wave); color: var(--wave); background: var(--white); }
.btn-hint:hover:not([disabled]) { background: var(--info-bg); }
.hint-count { font-size: .85rem; font-weight: 600; color: var(--muted); margin-left: auto; }

/* ---------- Explorable scene ---------- */
.room-head-scene { grid-template-columns: minmax(0, 1fr); }
.room-head-scene .lead { margin-bottom: .6rem; }
.scene-progress { margin: 0; }
.scene-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.scene-grid .guide { position: sticky; top: 16px; }
.scene-area { min-width: 0; }
.scene-area .scene-tools { justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.scene-area .scene-tools .help-text { margin: 0; }
.scene-explore { border-width: 3px; box-shadow: var(--shadow); }
.scene-explore .scene-spot { border-radius: 12px; }
.scene-explore .scene-spot:hover, .scene-explore .scene-spot:focus-visible { background: rgba(255, 255, 255, .22); border-color: var(--white); box-shadow: 0 0 0 3px var(--navy); }
.scene-explore .scene-spot.is-selected { border: 3px solid var(--white); box-shadow: 0 0 0 3px var(--wave), 0 0 18px 4px rgba(47, 167, 223, .55); background: rgba(47, 167, 223, .14); }
.scene-explore .scene-spot .tag { position: absolute; top: -10px; right: -10px; margin: 0; }
.spot-name {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 2;
  background: var(--navy); color: var(--white); font-size: .82rem; font-weight: 650; line-height: 1.2;
  padding: .25rem .55rem; border-radius: 999px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .15s;
}
.scene-spot:hover .spot-name, .scene-spot:focus-visible .spot-name, .scene-spot.is-selected .spot-name { opacity: 1; }
.spot-list-btn.is-selected { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy); background: #FFF6D6; }
.spot-list-btn.is-checked:not(.is-selected) { background: var(--chart); }
.keep-looking { margin: .9rem 0 0; }
.why-small { margin-top: .9rem; }
.why-small h3 { font-size: 1rem; }
.why-small p { font-size: .95rem; }
.bubble-lock .lock-body { margin-top: 2.2rem; padding: 12px 14px; }
.bubble-lock .dials { gap: 7px; }
.bubble-lock .dial-window { width: 44px; height: 54px; font-size: 1.7rem; }
.bubble-lock .dial-btn { width: 44px; }
.bubble-lock .lock-shackle { width: 84px; margin-left: -42px; top: -32px; height: 48px; border-width: 10px; }
.bubble-lock .stage-title { font-size: 1.02rem; margin-top: .5rem; }
.icon-flip { transform: scaleX(-1); }

/* ---------- Solved panel ---------- */
.solved h2 { display: flex; align-items: center; gap: .5rem; color: var(--good-text); }
.solved h2 .icon { width: 1.3em; height: 1.3em; stroke-width: 3; }
.reward {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.1rem; margin: 1rem 0 1.25rem;
  background: var(--chart); border: 2px solid var(--sunrise); border-radius: var(--r-m);
}
.reward p { margin-bottom: .4rem; }
.reward-title { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--navy); }
.reward-piece {
  width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: var(--navy); color: var(--white); transform: rotate(-4deg);
  animation: piece-in .7s cubic-bezier(.2, .9, .3, 1.3) both;
}
.reward-piece .icon { width: 30px; height: 30px; }
.reward-digit { display: inline-flex; align-items: center; gap: .75rem; margin-top: .3rem; font-weight: 600; }
.reward-digit strong {
  font-family: var(--font-display); font-size: 2rem; line-height: 1; min-width: 2.2rem; text-align: center;
  padding: .2rem .5rem; background: var(--white); border: 3px solid var(--navy); border-radius: var(--r-s);
}
@keyframes piece-in { from { opacity: 0; transform: scale(.4) rotate(-30deg); } to { opacity: 1; transform: scale(1) rotate(-4deg); } }
.why { border-left: 5px solid var(--green); padding: .25rem 0 .25rem 1rem; }
.why h3 { margin-bottom: .35rem; }
.why p { max-width: 68ch; margin: 0; }

/* ---------- Lock ---------- */
.stage-title { display: flex; align-items: center; gap: .5rem; }
.lock-prompt { max-width: 60ch; }
.lock-body {
  position: relative; display: inline-block; margin-top: 2.6rem;
  background: var(--navy); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow);
}
.lock-shackle {
  position: absolute; left: 50%; top: -40px; width: 110px; height: 60px; margin-left: -55px;
  border: 12px solid var(--silver); border-bottom: 0; border-radius: 60px 60px 0 0; z-index: -1;
  transition: transform .5s ease;
}
.lock-body.is-open .lock-shackle { transform: translateY(-16px); }
.dials { display: flex; gap: 12px; }
.dial { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dial-btn {
  width: 48px; height: 34px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .12); color: var(--white);
  display: grid; place-items: center; cursor: pointer;
}
.dial-btn:hover { background: rgba(255, 255, 255, .25); }
.dial-btn .icon { width: 22px; height: 22px; stroke-width: 3; }
.dial-window {
  width: 56px; height: 64px; display: grid; place-items: center; border-radius: 8px;
  background: var(--white); color: var(--navy); font-family: var(--font-display); font-size: 2.2rem; font-weight: 700;
  box-shadow: inset 0 3px 0 rgba(0, 40, 85, .15); cursor: text; user-select: none;
}
.dial-window:focus-visible { outline: 4px solid var(--sunrise); outline-offset: 3px; }
.lock-body.is-open { background: var(--good-text); }
.shake { animation: shake .4s ease; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }

/* ---------- Quiz ---------- */
.q { border: 0; padding: 0; margin: 1rem 0 0; min-width: 0; }
.q-prompt { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--navy); padding: 0; margin-bottom: .75rem; }
.options { display: grid; gap: .6rem; }
.option {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "input label" ". note"; gap: .1rem .75rem; align-items: start;
  border: 2px solid var(--line); border-radius: var(--r-s); padding: .75rem .9rem; background: var(--white);
  cursor: pointer; transition: border-color .15s;
}
.option:hover { border-color: var(--wave); }
.option:has(input:checked) { border-color: var(--navy); background: var(--info-bg); }
.option input { grid-area: input; width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--navy); cursor: pointer; }
.option label { grid-area: label; cursor: pointer; }
.option-note { grid-area: note; }
.option-note:empty { display: none; }
.option-note .tag { margin-top: .35rem; }
.option.is-right { border-color: var(--green); background: var(--good-bg); }
.option.is-wrong { border-color: var(--bad-text); background: var(--bad-bg); }

/* ---------- Mocks (simulated screens) ---------- */
.mock { margin: .5rem 0 1rem; max-width: 520px; }
.mock-caption { font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; }
.mock-call { background: #0F1B2D; color: #F4F7FB; border-radius: 22px; padding: 1rem 1.1rem 1.1rem; }
.mock-call .mock-caption { color: #B9C6D6; }
.call-head { display: flex; gap: .8rem; align-items: center; margin-bottom: .8rem; }
.call-avatar { width: 46px; height: 46px; border-radius: 50%; background: #2B7A3D; display: grid; place-items: center; }
.call-avatar .icon { width: 22px; height: 22px; }
.call-name { font-weight: 700; font-size: 1.1rem; margin: 0; }
.call-number { margin: 0; color: #B9C6D6; font-variant-numeric: tabular-nums; }
.call-line { background: rgba(255, 255, 255, .08); border-radius: 12px; padding: .6rem .8rem; margin: 0 0 .5rem; }
.call-line:last-child { margin: 0; }
.call-line strong { color: inherit; }

.mock-phone { background: #0F1B2D; border-radius: 28px; padding: 14px; max-width: 380px; border: 3px solid #2A3A52; }
.mock-phone .mock-caption { color: #B9C6D6; text-align: center; }
.sms-from { color: #DDE6F0; font-size: .92rem; text-align: center; margin-bottom: .6rem; }
.sms-from strong { color: #FFFFFF; }
.sms-bubble { background: #E9EDF2; color: #13202F; border-radius: 16px 16px 16px 4px; padding: .7rem .9rem; margin: 0; }
.push-clock { color: #FFFFFF; font-family: var(--font-display); font-size: 3rem; font-weight: 300; text-align: center; margin: 0 0 .5rem; line-height: 1; }
.push-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.push-item { background: rgba(255, 255, 255, .92); color: #13202F; border-radius: 12px; padding: .5rem .7rem; }
.push-item p { margin: 0; }
.push-app { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 700; color: #3D4C60; }
.push-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.push-title { font-weight: 700; }
.push-text { font-size: .88rem; color: #3D4C60; }
.push-actions { display: flex; gap: .5rem; margin-top: .3rem !important; }
.push-actions span { flex: 1; text-align: center; font-size: .82rem; font-weight: 700; background: #E4E9EF; border-radius: 6px; padding: .15rem; }

.mock-browser { border: 2px solid #9AA8B8; border-radius: 10px; overflow: hidden; background: var(--white); }
.mock-browser .mock-caption { background: #E4E9EF; margin: 0; padding: .35rem .75rem 0; }
.browser-bar { display: flex; align-items: center; gap: .75rem; background: #E4E9EF; padding: .45rem .75rem .55rem; }
.browser-dots { display: flex; gap: 5px; }
.browser-dots i { width: 10px; height: 10px; border-radius: 50%; background: #A7B3C1; }
.browser-url { flex: 1; min-width: 0; margin: 0; background: var(--white); border-radius: 999px; padding: .3rem .8rem; display: flex; align-items: center; gap: .4rem; overflow-wrap: anywhere; font-size: .9rem; }
.url-lock { display: inline-flex; color: #3D4C60; }
.url-insecure { font-size: .78rem; font-weight: 700; color: var(--bad-text); border: 1.5px solid currentColor; border-radius: 4px; padding: 0 .3rem; white-space: nowrap; }
.browser-body { padding: 1.25rem; min-height: 150px; display: grid; place-items: center; }
.browser-alert { background: #7A1010; }
.browser-download, .browser-extension { background: #EEF1F4; }
.fake-popup { background: var(--white); border-radius: 8px; padding: 1rem 1.1rem; max-width: 380px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.browser-alert .fake-popup { border: 4px solid #D81B1B; }
.fake-popup-title { font-weight: 800; font-size: 1.15rem; color: #13202F; margin-bottom: .35rem; }
.browser-alert .fake-popup-title { color: #B00000; }
.fake-popup-text { font-size: .95rem; color: #13202F; }
.fake-popup-buttons { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; }
.fake-btn { display: inline-block; padding: .35rem .8rem; border-radius: 5px; background: #D9DFE6; color: #13202F; font-weight: 700; font-size: .9rem; }
.fake-btn-primary { background: var(--wave); color: var(--white); }
.fake-login { display: block; max-width: 300px; margin: 0 auto; }
.fake-login-title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--wave); margin-bottom: 0; }
.fake-login-sub { color: var(--muted); }
.fake-field { border: 1.5px solid #9AA8B8; border-radius: 4px; padding: .35rem .6rem; color: #6A7789; font-size: .9rem; }

/* ---------- URL game ---------- */
.url-frame { background: #E4E9EF; border-radius: 10px; padding: .75rem; margin: .5rem 0; }
.url-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 3px; margin: 0; background: var(--white); border-radius: 8px; padding: .5rem; font-size: clamp(.95rem, .85rem + .6vw, 1.2rem); }
.url-seg {
  font: inherit; color: var(--navy); background: var(--white); border: 2px dashed var(--silver); border-radius: 6px;
  padding: .45rem .4rem; cursor: pointer; overflow-wrap: anywhere; min-height: 44px;
}
.url-seg:hover:not([disabled]) { border-color: var(--wave); background: var(--info-bg); }
.url-scheme { color: var(--muted); border: 2px solid transparent; padding: .45rem .1rem; display: inline-flex; align-items: center; }
.url-seg.is-right { border: 2px solid var(--green); background: var(--good-bg); color: var(--good-text); font-weight: 700; }
.url-seg.is-wrong { border: 2px solid var(--bad-text); background: var(--bad-bg); color: var(--bad-text); text-decoration: line-through; }
.url-seg[disabled] { cursor: default; }

/* ---------- Sort ---------- */
.sorter { display: grid; gap: 14px; }
.sort-pool { background: var(--chart); border: 2px dashed var(--silver); border-radius: var(--r-m); padding: .9rem; }
.bins { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.bin { background: var(--white); border: 2px solid var(--navy); border-radius: var(--r-m); padding: .9rem; min-height: 150px; }
.bin.is-over, .sort-pool.is-over { background: var(--info-bg); border-color: var(--wave); border-style: solid; }
.bin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap; }
.bin-head h3 { margin: 0; font-size: 1.05rem; }
.bin-desc { margin: .1rem 0 0; font-size: .85rem; color: var(--muted); }
.count { color: var(--muted); font-weight: 400; }
.card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sort-pool .card-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sort-card {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left;
  font: inherit; font-size: .96rem; color: var(--text); background: var(--white);
  border: 2px solid var(--line); border-radius: var(--r-s); padding: .6rem .75rem; cursor: grab;
  box-shadow: 0 2px 0 var(--line);
}
.sort-card:hover:not([disabled]) { border-color: var(--wave); }
.sort-card.is-selected { border-color: var(--navy); background: #FFF6D6; box-shadow: 0 0 0 3px var(--navy); }
.sort-card.is-dragging { opacity: .5; }
.sort-card.is-right { border-color: var(--green); background: var(--good-bg); cursor: default; opacity: 1; }
.sort-card.is-wrong { border-color: var(--bad-text); background: var(--bad-bg); }
.card-label { font-size: .8rem; font-weight: 700; color: var(--muted); }
.card-text { color: var(--navy); font-weight: 600; overflow-wrap: anywhere; }
.card-feedback { font-size: .88rem; color: var(--bad-text); margin: .35rem .2rem 0; }
.empty { color: var(--muted); font-size: .9rem; font-style: italic; margin: 0; }

/* ---------- Hotspots ---------- */
.email-scene { border: 2px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: var(--white); max-width: 720px; }
.email-scene-head { background: var(--chart); border-bottom: 2px solid var(--line); padding: .6rem; display: grid; gap: 4px; }
.email-scene-body { padding: .6rem; display: grid; gap: 4px; justify-items: start; }
.spot {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; width: 100%; text-align: left;
  font: inherit; color: var(--text); background: transparent; border: 2px dashed transparent; border-radius: 6px;
  padding: .45rem .55rem; cursor: pointer;
}
.spot:hover { border-color: var(--silver); background: #FAFCFE; }
.spot-subject { font-weight: 700; color: var(--navy); font-size: 1.05rem; }
.spot-meta { color: var(--muted); font-size: .92rem; }
.spot-button, .spot-attachment { width: auto; }
.spot-attachment { border: 2px solid var(--line); background: var(--chart); }
.spot-signature { color: var(--muted); font-style: italic; }
.email-logo { width: 32px; height: 32px; }
.spot.is-found { border: 2px solid #8A6D00; background: #FFF8E1; }
.spot.is-cleared { border: 2px solid var(--silver); background: var(--chart); }
.found-panel { margin-top: 1rem; }
.found-count { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--navy); margin-bottom: .4rem; }
.found-list { margin: 0; padding-left: 1.4rem; display: grid; gap: .3rem; font-size: .95rem; }

.scene-tools { display: flex; justify-content: flex-end; margin-bottom: .6rem; }
.scene { position: relative; border: 2px solid var(--navy); border-radius: var(--r-m); overflow: hidden; background: var(--chart); }
.scene-img { width: 100%; height: auto; }
.scene-spot {
  position: absolute; background: transparent; border: 3px dashed transparent; border-radius: 10px; cursor: pointer; padding: 0;
  display: flex; align-items: flex-start; justify-content: flex-end;
}
.scene-spot:hover { border-color: var(--wave); background: rgba(47, 167, 223, .12); }
.scene-spot:focus-visible { outline: 4px solid var(--wave); outline-offset: 0; background: rgba(47, 167, 223, .12); }
.scene-spot.is-found { border: 3px solid #8A6D00; background: rgba(255, 213, 79, .22); }
.scene-spot.is-cleared { border: 3px solid var(--silver); background: rgba(255, 255, 255, .25); }
.scene-spot .tag { margin: -12px -12px 0 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.spot-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.spot-list-btn {
  width: 100%; min-height: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem;
  font: inherit; font-weight: 600; color: var(--navy); background: var(--white); border: 2px solid var(--line); border-radius: var(--r-s);
  padding: .55rem .75rem; cursor: pointer; text-align: left;
}
.spot-list-btn:hover { border-color: var(--wave); }
.spot-list-btn.is-found { border-color: #8A6D00; background: #FFF8E1; }
.spot-list-btn.is-cleared { background: var(--chart); }

/* ---------- Inbox ---------- */
.inbox { display: grid; grid-template-columns: minmax(230px, 330px) minmax(0, 1fr); border: 2px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.inbox-list { list-style: none; margin: 0; padding: 0; background: var(--chart); border-right: 2px solid var(--line); max-height: 640px; overflow-y: auto; }
.inbox-list li + li { border-top: 1px solid var(--line); }
.mail-row {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: .1rem .5rem; text-align: left;
  font: inherit; color: var(--text); background: transparent; border: 0; border-left: 5px solid transparent; padding: .65rem .8rem; cursor: pointer;
}
.mail-row:hover { background: var(--white); }
.mail-row.is-open { background: var(--white); border-left-color: var(--navy); }
.mail-from { font-weight: 700; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-time { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.mail-subject { grid-column: 1 / -1; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mail-status { grid-column: 1 / -1; margin-top: .2rem; }
.mail-pane { padding: 1rem 1.25rem 1.25rem; background: var(--white); min-width: 0; }
.pane-subject { font-size: 1.25rem; }
.mail-meta { font-size: .95rem; border-bottom: 1px solid var(--line); padding-bottom: .6rem; margin-bottom: .8rem; }
.mail-meta p { margin: 0 0 .2rem; }
.meta-label { color: var(--muted); display: inline-block; min-width: 5.5em; }
.from-btn {
  display: inline-flex; align-items: center; gap: .3rem; font: inherit; font-weight: 700; color: var(--wave);
  background: var(--info-bg); border: 1.5px solid var(--wave); border-radius: 999px; padding: .1rem .6rem; cursor: pointer; min-height: 32px;
}
.addr-reveal strong { overflow-wrap: anywhere; }
.mail-body p { max-width: 62ch; }
.mail-link-wrap { margin: .4rem 0 .8rem; }
.fake-link {
  display: inline-flex; align-items: center; gap: .4rem; font: inherit; color: var(--wave); text-decoration: underline; text-underline-offset: 3px;
  background: none; border: 0; padding: .3rem 0; cursor: pointer; text-align: left; overflow-wrap: anywhere;
}
.link-reveal { background: #FFF8E1; border-left: 4px solid #B08900; padding: .5rem .75rem; border-radius: 4px; margin: .3rem 0 0; font-size: .93rem; }
.link-reveal strong { overflow-wrap: anywhere; }
.attachment { display: inline-flex; align-items: center; gap: .4rem; border: 2px solid var(--line); background: var(--chart); border-radius: 6px; padding: .35rem .7rem; font-weight: 600; font-size: .93rem; }
.decide { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.btn-decide.is-on.btn-phish { background: #FFF4CC; border-color: #8A6D00; color: var(--navy); box-shadow: 0 0 0 2px #8A6D00; }
.btn-decide.is-on.btn-safe { background: var(--info-bg); border-color: var(--wave); color: var(--navy); box-shadow: 0 0 0 2px var(--wave); }
.next-mail { margin: .8rem 0 0; }
.inbox-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.inbox-progress { margin: 0; font-weight: 600; color: var(--muted); }

/* ---------- Debrief ---------- */
.debrief { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.habits { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: .75rem; }
.habits li { display: flex; gap: .7rem; align-items: flex-start; }
.habits .icon { color: var(--good-text); margin-top: .25em; stroke-width: 3; }
.closing { font-family: var(--font-display); font-size: 1.2rem; color: var(--navy); border-left: 5px solid var(--green); padding-left: 1rem; }
.contact-card { background: var(--white); border: 3px solid var(--navy); border-radius: var(--r-m); padding: 1.25rem; box-shadow: var(--shadow); }
.contact-card h2 { font-size: 1.25rem; }
.contact-list { margin: 0 0 1rem; display: grid; gap: .6rem; }
.contact-line dt { font-size: .85rem; font-weight: 700; color: var(--muted); }
.contact-line dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.feedback-card {
  display: flex; gap: 1.25rem; align-items: center; max-width: 760px; margin: 2rem auto 0;
  background: var(--white); border-top: 4px solid var(--blue); border-radius: var(--r-s); padding: 1.1rem 1.4rem; box-shadow: var(--shadow);
}
.feedback-card .porthole { --size: 88px; border-width: 5px; }
.feedback-card h2 { margin-bottom: .25rem; }
.feedback-card p { margin: 0; color: var(--muted); }
.feedback-card .actions { margin-top: .75rem; }
dialog.dialog-wide { width: min(820px, calc(100vw - 32px)); }
.feedback-note { background: var(--info-bg); border-left: 4px solid var(--blue); padding: .6rem .8rem; border-radius: 4px; font-size: .95rem; }
.feedback-frame iframe { display: block; width: 100%; height: min(68vh, 720px); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--white); }
@media (max-width: 520px) { .feedback-card { flex-direction: column; text-align: center; } .feedback-card .actions { justify-content: center; } }
.contact-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }

/* ---------- Certificate (screen view) ---------- */
.cert-toolbar { margin-bottom: 1.5rem; }
.cert-toolbar p { max-width: 70ch; }
.certificate {
  background: var(--white); aspect-ratio: 11 / 8.5; width: 100%; max-width: 1000px; margin: 0 auto;
  padding: 1.6%; box-shadow: var(--shadow); border-radius: var(--r-s); container-type: inline-size;
}
.cert-inner { height: 100%; display: flex; flex-direction: column; border: 0.25cqw solid var(--line); }
.cert-band { background: var(--blue); padding: 1.9cqw 4cqw 1.7cqw; text-align: center; }
.cert-heading { margin: 0; color: var(--white); font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .14em; font-size: 3.1cqw; line-height: 1; }
.cert-stripe { height: 0.7cqw; background: linear-gradient(90deg, var(--navy) 0 55%, var(--sunrise) 55% 84%, var(--green) 84% 100%); }
.cert-body { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.6cqw 5cqw 1.4cqw; position: relative; }
.cert-top { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: -5cqw; }
.cert-logo { width: 10.5cqw; }
.cert-seal { width: 8.5cqw; }
.cert-pre { font-size: 1.7cqw; color: var(--muted); margin: 0 0 .5cqw; }
.cert-name {
  font-family: var(--font-display); font-size: 5.2cqw; font-weight: 900; color: var(--navy); line-height: 1.08; letter-spacing: -.01em;
  padding: 0 3cqw .5cqw; margin: 0 0 1.1cqw; max-width: 82%; overflow-wrap: anywhere;
  border-bottom: 0.3cqw solid var(--green);
}
.cert-title { display: flex; align-items: center; gap: 1.6cqw; width: 78%; margin: .4cqw 0 .5cqw; color: var(--blue); font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; font-size: 2.7cqw; line-height: 1.1; }
.cert-title::before, .cert-title::after { content: ""; flex: 1; height: 0.3cqw; background: var(--green); }
.cert-sub { font-size: 1.55cqw; color: var(--muted); margin: 0 0 1.8cqw; }
.cert-meta { display: flex; gap: 2cqw; justify-content: center; margin: 0; }
.cert-meta > div { border-top: 0.45cqw solid var(--blue); background: var(--paper); padding: .9cqw 2.2cqw 1cqw; min-width: 22cqw; }
.cert-meta dt { color: var(--muted); font-weight: 700; font-size: 1.15cqw; text-transform: uppercase; letter-spacing: .06em; }
.cert-meta dd { margin: .2cqw 0 0; font-weight: 800; color: var(--navy); font-size: 1.6cqw; }
.cert-bottom { margin-top: auto; width: 100%; display: flex; justify-content: center; align-items: flex-end; position: relative; min-height: 6cqw; }
.cert-sign { border-top: 0.18cqw solid var(--navy); padding-top: .6cqw; min-width: 30cqw; }
.cert-sign p { margin: 0; }
.cert-sign-name { font-family: var(--font-display); font-weight: 800; color: var(--navy); font-size: 1.7cqw; }
.cert-sign-line, .cert-sign-org { font-size: 1.3cqw; color: var(--muted); }
.cert-ebb { position: absolute; right: 0; bottom: 0; width: 11cqw; height: 11cqw; object-fit: cover; object-position: 50% 8%; border-radius: 50%; background: var(--ebb-bg); border: 0.55cqw solid var(--silver); box-shadow: 0 0 0 0.25cqw var(--navy); }
.cert-foot { display: flex; justify-content: space-between; background: var(--blue); color: var(--white); font-weight: 800; font-size: 1.2cqw; letter-spacing: .06em; text-transform: uppercase; padding: 1cqw 4cqw; }

.name-form { margin-top: 1rem; }
.name-form label { display: block; font-weight: 700; color: var(--navy); margin-bottom: .2rem; }
.name-form input {
  width: 100%; max-width: 420px; font: inherit; font-size: 1.1rem; padding: .65rem .8rem; min-height: 48px;
  border: 2px solid var(--navy); border-radius: var(--r-s); color: var(--text);
}
.name-form input[aria-invalid="true"] { border-color: var(--bad-text); }
.field-error { color: var(--bad-text); font-weight: 600; margin: .4rem 0 0; }
.field-error:empty { display: none; }

/* ---------- Dialogs ---------- */
dialog {
  border: 3px solid var(--navy); border-radius: var(--r-m); padding: 1.25rem 1.4rem 1.4rem; width: min(520px, calc(100vw - 32px));
  color: var(--text); background: var(--white); box-shadow: 0 20px 50px -12px rgba(0, 40, 85, .45);
}
dialog::backdrop { background: rgba(0, 24, 51, .55); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.dialog-head h2 { margin: 0; }
.setting { display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.setting input { width: 24px; height: 24px; margin: 0; accent-color: var(--navy); }
.setting label { font-weight: 700; color: var(--navy); }
.setting .help-text { grid-column: 2; margin: 0; }
.log-digits { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; gap: 10px; }
.log-digits li { display: grid; justify-items: center; gap: .2rem; }
.log-digit {
  width: 52px; height: 60px; display: grid; place-items: center; border-radius: 8px;
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--muted);
  border: 3px dashed var(--silver); background: var(--chart);
}
.log-digits li.has .log-digit { color: var(--navy); border: 3px solid var(--navy); background: var(--white); }
.log-room { font-size: .8rem; color: var(--muted); font-weight: 600; }
.log-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
#log-body .map-progress { margin-bottom: 1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .map-layout { grid-template-columns: 1fr; }
  .room-grid, .scene-grid { grid-template-columns: 1fr; }
  .scene-grid .guide { position: static; }
  .guide { position: static; grid-template-columns: auto 1fr; align-items: start; justify-items: stretch; }
  .guide .porthole { --size: 96px; border-width: 5px; }
  .guide .bubble::before { top: 24px; left: -12px; margin-left: 0; transform: rotate(-45deg); }
  .debrief { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero-band { padding-top: 28px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .hero-art .frame-hero { margin: 0 auto; max-width: 360px; }
  .hero-title { max-width: none; }
  .hero-steps { gap: 24px; }
  .briefing, .cert-form-screen { flex-direction: column; min-height: 0; }
  .room-head { grid-template-columns: 1fr; }
  .room-head .figure-frame { display: none; }
  .room-back { position: static; justify-self: start; order: -1; margin-bottom: .5rem; }
  .inbox { grid-template-columns: 1fr; }
  .inbox-list { border-right: 0; border-bottom: 2px solid var(--line); max-height: 320px; }
  .brand-sub { display: none; }
  .brand img { height: 48px; }
  .footer-help { text-align: left; }
}
@media (max-width: 520px) {
  .guide, .room-grid-wide .guide { gap: 12px; }
  .guide .porthole, .room-grid-wide .guide .porthole { --size: 68px; border-width: 4px; box-shadow: 0 0 0 2px var(--navy), inset 0 0 0 2px var(--navy); }
  .guide .bubble { padding: .9rem 1rem; }
  .guide .bubble::before, .room-grid-wide .guide .bubble::before { top: 22px; }
  .tool-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tool-btn { padding: .35rem .6rem; }
  .brand-text { display: none; }
  .hero-steps, .stat-strip { grid-template-columns: 1fr; }
  .flank-title { gap: .7rem; }
  .dials { gap: 8px; }
  .dial-window { width: 48px; height: 58px; font-size: 1.9rem; }
  .dial-btn { width: 44px; }
  .lock-body { padding: 14px; }
  .certificate { aspect-ratio: auto; }
  .cert-body { padding: 4cqw 5cqw; }
  .cert-top { margin-bottom: 1cqw; }
}

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

/* ---------- Windows High Contrast ---------- */
@media (forced-colors: active) {
  .btn, .sort-card, .option, .url-seg, .spot, .scene-spot, .mail-row { border: 2px solid ButtonText; }
  .scene-spot { border-style: dashed; }
  .tag { border: 1px solid CanvasText; }
}