/* =====================================================================
   S5 SKIN ANALYSER THEME — html[data-theme="s5"]
   Space Gray and clinical blue with Seoulogy burgundy as the accent:
   the instrument's own palette, read as a diagnostic console.
   Also carries the three S5 game engines' styling.
   ===================================================================== */
html[data-theme="s5"] {
  --forest: #12161d;
  --forest-2: #1a212b;
  --moss: #3a4756;
  --sea: #5b8fc7;
  --spume: #8fc0ee;
  --glow: #cfe4f8;

  --gold: #c9a961;
  --gold-lo: #8f7539;
  --gold-hi: #ecdcae;

  --plum: #9db8dd;
  --info: #7fc6ea;
  --ok: #4fc08a;
  --warn: #e0a03c;
  --danger: #e06666;

  --surface: #131a23;
  --surface-2: #1a232f;
  --surface-3: #232e3c;
  --line: rgba(143, 192, 238, 0.14);
  --line-2: rgba(143, 192, 238, 0.28);
  --text: #e6eef7;
  --text-dim: #a8bccf;
  --text-faint: #7b8fa3;
}

html[data-theme="s5"] body::before {
  background:
    radial-gradient(1200px 700px at 10% -12%, rgba(91, 143, 199, 0.18), transparent 60%),
    radial-gradient(900px 600px at 94% 4%, rgba(106, 33, 46, 0.30), transparent 62%),
    radial-gradient(1000px 800px at 50% 110%, rgba(10, 14, 20, 0.92), transparent 60%),
    linear-gradient(175deg, #0a0e14 0%, #101822 48%, #0a0e14 100%);
}

html[data-theme="s5"] .step .n {
  background: linear-gradient(140deg, rgba(91, 143, 199, 0.32), rgba(26, 35, 47, 0.7));
}

/* Spectral captures are dark-field images: a light mat would fight them */
html[data-theme="s5"] .fig img {
  background: #0b1016;
  border-radius: 12px;
}
html[data-theme="s5"] .fig figcaption {
  color: var(--text-dim);
}

/* ===================================================================
   S5 GAME ENGINES — readOut, hotZones, consultBuild
   Scoped to .s5g so they are safe anywhere in the portal.
   =================================================================== */
.s5g {
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: 16px;
}

.s5g-hud {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-dim);
}
.s5g-hud b { color: var(--text); }
.s5g-how { flex: 1 1 200px; text-align: center; color: var(--text-faint); font-size: 12px; }
.s5g-score b { color: var(--gold-hi); }

.s5g-prompt {
  font-size: 15.5px; font-weight: 600; line-height: 1.45;
  color: var(--text); margin: 14px 0 12px;
}

/* ---- option buttons, shared ---- */
.s5g-opts { display: grid; gap: 8px; }
.s5g-opt {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  padding: 12px 14px; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid var(--line); border-radius: 11px;
  color: var(--text); font: inherit; font-size: 14px; line-height: 1.45;
  transition: border-color .15s, background .15s, transform .12s;
}
.s5g-opt:hover:not(:disabled) {
  border-color: var(--line-2);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  transform: translateX(2px);
}
.s5g-opt:disabled { cursor: default; }
.s5g-opt .dot {
  flex: 0 0 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: color-mix(in srgb, var(--sea) 30%, transparent);
  color: var(--text); margin-top: 1px;
}
.s5g-opt.right {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.s5g-opt.right .dot { background: var(--ok); color: #05130d; }
.s5g-opt.wrong {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 13%, transparent);
}
.s5g-opt.wrong .dot { background: var(--danger); color: #1a0505; }
.s5g-opt.dim { opacity: .42; }

.s5g-next { margin-top: 12px; }

/* ---- readOut ---- */
.s5g-read {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px; align-items: start;
}
.s5g-shot { margin: 0; }
.s5g-shot img {
  width: 100%; display: block; border-radius: 12px;
  background: #0b1016; border: 1px solid var(--line);
}
.s5g-shot figcaption {
  margin-top: 7px; font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 700;
}
/* device UI captures are portrait; shrink the element to the image so it
   does not sit in a wide black letterbox */
.s5g-shot.wide { text-align: center; }
.s5g-shot.wide img { width: auto; max-width: 100%; max-height: 320px; margin: 0 auto; }

.s5g-panel {
  background: color-mix(in srgb, var(--sea) 8%, transparent);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px;
}
.s5g-panel-h {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 800; color: var(--spume); margin-bottom: 10px;
}
.s5g-metric {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.s5g-metric:first-of-type { border-top: 0; }
.s5g-metric .k { font-size: 13px; color: var(--text-dim); }
.s5g-metric .v {
  font-size: 15px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.s5g-metric .g {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--text-dim);
}
.s5g-metric.gI  .g { background: color-mix(in srgb, var(--ok) 26%, transparent); color: #d9ffee; }
.s5g-metric.gII .g { background: color-mix(in srgb, var(--info) 26%, transparent); color: #ddf1ff; }
.s5g-metric.gIII .g { background: color-mix(in srgb, var(--warn) 30%, transparent); color: #ffeccd; }
.s5g-metric.gIV .g { background: color-mix(in srgb, var(--danger) 30%, transparent); color: #ffe2e2; }
.s5g-metric.gV  .g { background: color-mix(in srgb, var(--danger) 52%, transparent); color: #fff; }

/* ---- hotZones ---- */
.s5g-zonewrap {
  /* reserve the box before the capture arrives, so the percentage-positioned
     hotspots never sit on a collapsed container */
  position: relative; display: block; max-width: 420px; margin: 0 auto;
  min-height: 120px;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  background: #0b1016;
}
.s5g-zonewrap img { width: 100%; display: block; }
.s5g-zone {
  position: absolute; padding: 0; height: 0; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--spume) 62%, transparent);
  background: color-mix(in srgb, var(--sea) 16%, transparent);
  cursor: pointer; transition: background .15s, border-color .15s, transform .12s;
}
.s5g-zone:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sea) 34%, transparent);
  border-color: var(--spume); transform: scale(1.04);
}
.s5g-zone .zl {
  /* the reflex chart carries its own printed labels, so the hotspot label
     needs its own ground to stay readable on top of them */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 10.5px; font-weight: 700; color: #fff; white-space: nowrap;
  pointer-events: none; padding: 2px 7px; border-radius: 999px;
  background: rgba(8, 14, 22, .82); border: 1px solid rgba(255, 255, 255, .16);
}
.s5g-zone.right {
  border-style: solid; border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 32%, transparent);
}
.s5g-zone.wrong {
  border-style: solid; border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 30%, transparent);
}

/* ---- consultBuild ---- */
.s5g-cbwrap {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px;
  align-items: start;
}
.s5g-cbcard {
  background: color-mix(in srgb, var(--gold) 6%, transparent);
  border: 1px solid var(--line); border-radius: 13px; padding: 12px;
}
.s5g-cbclient {
  display: flex; gap: 11px; align-items: center;
  padding-bottom: 11px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.s5g-cbclient img {
  width: 54px; height: 54px; border-radius: 10px; object-fit: cover;
  background: #0b1016; flex: 0 0 auto;
}
.s5g-cbclient b { display: block; font-size: 14px; color: var(--text); }
.s5g-cbclient span { display: block; font-size: 11.5px; color: var(--text-faint); line-height: 1.35; }
.s5g-cbnotes { list-style: none; margin: 0; padding: 0; counter-reset: cbn; }
.s5g-cbnotes li {
  counter-increment: cbn; position: relative; padding: 9px 0 9px 26px;
  border-top: 1px solid var(--line); font-size: 12.5px;
}
.s5g-cbnotes li:first-child { border-top: 0; }
.s5g-cbnotes li::before {
  content: counter(cbn); position: absolute; left: 0; top: 10px;
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; font-weight: 800;
  background: color-mix(in srgb, var(--ok) 34%, transparent); color: var(--text);
}
.s5g-cbnotes li.no::before {
  background: color-mix(in srgb, var(--danger) 34%, transparent);
}
.s5g-cbnotes li b { display: block; color: var(--text); font-size: 12px; }
.s5g-cbnotes li span { color: var(--text-dim); line-height: 1.4; }

/* ---- responsive ---- */
@media (max-width: 760px) {
  .s5g-read { grid-template-columns: 1fr; }
  .s5g-cbwrap { grid-template-columns: 1fr; }
  .s5g-cbcard { order: -1; }
}
@media (max-width: 520px) {
  .s5g { padding: 12px; }
  .s5g-hud { font-size: 11.5px; }
  .s5g-how { flex-basis: 100%; order: 3; }
  .s5g-zone .zl { font-size: 9.5px; }
  .s5g-metric { grid-template-columns: 1fr auto; }
  .s5g-metric .g { grid-column: 2; }
}

/* ===================================================================
   S5 INTERACTIVE 3D DEVICE LAB (s5-3d.js)
   =================================================================== */
.s53d { display: block; }
.s53d-stage {
  position: relative; height: 420px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(130% 110% at 50% -8%, #2b3340 0%, #171d27 46%, #0c1016 100%);
  border: 1px solid var(--line);
  cursor: grab;
}
.s53d-stage:active { cursor: grabbing; }
.s53d-stage canvas { display: block; }
.s53d-svg { width: 100%; height: 100%; display: block; }
.s53d-hint {
  position: absolute; left: 12px; bottom: 10px; z-index: 2; pointer-events: none;
  font-size: 11px; letter-spacing: .04em; color: var(--text-faint);
  background: rgba(8, 12, 18, .6); padding: 3px 9px; border-radius: 999px;
}
.s53d-badge {
  position: absolute; right: 12px; top: 10px; z-index: 2; pointer-events: none;
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  color: var(--text-dim); background: rgba(8, 12, 18, .62);
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
}
.s53d-badge i {
  width: 7px; height: 7px; border-radius: 50%; background: #55606f;
  transition: background .2s, box-shadow .2s;
}
.s53d-badge.on i { background: var(--ok); box-shadow: 0 0 9px var(--ok); }
.s53d-badge.on { color: var(--text); }

@keyframes s53dFlash { 0% { filter: brightness(1); } 35% { filter: brightness(2.4); } 100% { filter: brightness(1); } }
.s53d-flash { animation: s53dFlash .38s ease-out; }

.s53d-ctrls { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.s53d-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.s53d-grp { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.s53d-modes .chip { font-size: 11.5px; }

.s53d .chip {
  cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 13px; border-radius: 999px; color: var(--text-dim);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--line); transition: all .15s;
}
.s53d .chip:hover { border-color: var(--line-2); color: var(--text); }
.s53d .chip.sel {
  background: color-mix(in srgb, var(--spume) 22%, transparent);
  border-color: var(--spume); color: var(--text);
}
.s53d .s53d-pwr.sel { background: color-mix(in srgb, var(--ok) 26%, transparent); border-color: var(--ok); }
.s53d .s53d-cap {
  background: color-mix(in srgb, var(--gold) 20%, transparent);
  border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--gold-hi);
}
.s53d .s53d-chin { cursor: default; background: transparent; border-style: dashed; }

.s53d-cap-txt {
  margin-top: 12px; padding: 13px 15px; border-radius: 12px; font-size: 14px; line-height: 1.55;
  color: var(--text-dim); background: color-mix(in srgb, var(--sea) 8%, transparent);
  border: 1px solid var(--line); min-height: 64px;
}
.s53d-cap-txt b { color: var(--text); }
.s53d-tag {
  display: inline-block; margin-top: 4px; font-size: 11.5px; color: var(--text-faint);
  font-style: italic;
}

@media (max-width: 620px) {
  .s53d-stage { height: 300px; }
  .s53d .chip { font-size: 11.5px; padding: 6px 10px; }
  .s53d-modes .chip { font-size: 10.5px; padding: 5px 9px; }
}

/* ===================================================================
   S5 CLINIC SIMULATOR embed (s5-sim.js)
   =================================================================== */
/* simulator embeds now use the shared .simembed rules in styles.css */

/* the clinic simulator frame picks up the S5 accent */
[data-theme="s5"] .simembed { --sim-accent: var(--spume); }