/* Posture trainer layout. Site chrome is style.css + _nav.html.
   Only game HUD / camera / sliders live here. Do not restyle .sidemenu. */
    :root {
      --bg: #140c10;
      --bg-2: #1d1216;
      --panel: #1d1216;
      --bg-3: #2a181e;
      --line: #3a242c;
      --text: #f7efe8;
      --ink: #f7efe8;
      --muted: #b9a39a;
      --amber: #c9a227;
      --gold: #c9a227;
      --wine: #8b2e4a;
      --live: #ff6b3d;
      --ok: #9dbe6a;
      --danger: #e24a3b;
      --danger-press: #b5362b;
    }
    body[data-page="trainer"] .main { min-width: 0; }
    body[data-page="trainer"] .wrap {
      max-width: 880px;
      margin: 0 auto;
      padding: 8px 20px 28px;
    }
    .wrap > header {
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 16px; padding: 8px 0 12px;
    }
    label.field .field-note {
      margin: 4px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--muted);
      text-transform: none; letter-spacing: 0; font-weight: 400;
    }
    .arm-block {
      margin-top: 8px; padding-top: 18px;
      border-top: 1px solid var(--line);
    }
    .arm-under {
      margin: 10px 0 0;
      padding-top: 0;
      border-top: 0;
    }
    .sec-label {
      margin: 8px 0 0;
      font-size: 12px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--amber);
    }
    .cal-count { color: #c9a227; }
    .brand { display: flex; flex-direction: column; gap: 4px; }
    .eyebrow {
      font-family: "Play", sans-serif;
      font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--amber); font-weight: 700;
    }
    h1 { margin: 0; font-size: clamp(22px, 4vw, 34px); letter-spacing: -0.03em; font-weight: 650; }
    .status-pill {
      font-family: "Play", sans-serif; font-size: 12px;
      padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px;
      color: var(--muted); white-space: nowrap;
    }
    .status-pill.on { color: var(--ok); border-color: #3d4a2c; }
    .status-pill.live { color: var(--live); border-color: #5a2a1c; }
    .stage {
      background: var(--bg-2); border: 1px solid var(--line);
      border-radius: 16px; overflow: hidden; position: relative;
    }
    .viewport { position: relative; background: #000; aspect-ratio: 4 / 3; }
    .stage:fullscreen, .stage:-webkit-full-screen { width: 100vw; height: 100vh; border-radius: 0; background: #000; }
    .stage:fullscreen .viewport, .stage:-webkit-full-screen .viewport { aspect-ratio: auto; height: 100vh; }
    .stage:fullscreen .hud-line, .stage:-webkit-full-screen .hud-line { font-size: 26px; }
    .stage:fullscreen .out-chip, .stage:-webkit-full-screen .out-chip { min-width: 120px; padding: 8px 14px; }
    .stage:fullscreen .out-chip em, .stage:-webkit-full-screen .out-chip em { font-size: 16px; }
    .stage:fullscreen .out-chip strong, .stage:-webkit-full-screen .out-chip strong { font-size: 52px; }
    .stage:fullscreen .live-hud .check, .stage:-webkit-full-screen .live-hud .check { font-size: 22px; padding: 10px 14px; }
    .stage:fullscreen .live-hud .check b, .stage:-webkit-full-screen .live-hud .check b { font-size: 24px; }
    .stage:fullscreen .hud-label, .stage:-webkit-full-screen .hud-label { font-size: 20px; }
    .stage:fullscreen .live-hud .meter, .stage:-webkit-full-screen .live-hud .meter { height: 16px; }
    .stage:fullscreen .session-clock .clock-label, .stage:-webkit-full-screen .session-clock .clock-label { font-size: 20px; }
    .stage:fullscreen .session-clock .clock-face, .stage:-webkit-full-screen .session-clock .clock-face { font-size: clamp(84px, 16vw, 160px); }
    .stage:fullscreen .session-clock .clock-state, .stage:-webkit-full-screen .session-clock .clock-state { font-size: 22px; }
    .stage:fullscreen .adjust-banner, .stage:-webkit-full-screen .adjust-banner { font-size: 36px; padding: 22px 18px; }
    video, canvas.overlay {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover;
    }
    .viewport.mirror video,
    .viewport.mirror canvas.overlay {
      transform: scaleX(-1);
    }
    .cam-mirror { margin: 10px 0 0; }
    .ble-err {
      margin: 6px 0 0;
      padding: 8px 10px;
      border-radius: 10px;
      background: #3a1810;
      border: 1px solid var(--danger);
      color: #ffd0c8;
      font-size: 13px;
      line-height: 1.35;
    }
    canvas.overlay { pointer-events: none; }
    .live-hud {
      position: absolute; inset: 0; pointer-events: none;
      display: flex; flex-direction: column; justify-content: space-between;
      padding: 8px 10px 8px;
      background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 68%, rgba(0,0,0,0.62) 100%);
    }
    .live-top, .live-bottom { display: flex; flex-direction: column; gap: 6px; }
    .live-top { align-items: stretch; }
    .feed-bar {
      display: flex; align-items: flex-start; justify-content: flex-end;
      gap: 8px; pointer-events: none;
    }
    .feed-bar #btnFull {
      pointer-events: auto;
      flex: 0 0 auto;
      padding: 6px 10px;
      font-size: 12px;
    }
    .hud-line {
      display: flex; justify-content: space-between; gap: 8px;
      font-size: 13px; font-weight: 700; color: #fff;
      text-shadow: 0 1px 8px #000;
    }
    .hud-strip {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
    }
    .out-chip {
      min-width: 64px; text-align: center;
      background: rgba(11,12,10,0.72); border: 1px solid rgba(255,255,255,0.22);
      border-radius: 10px; padding: 4px 8px;
    }
    .out-chip em {
      display: block; font-style: normal; font-size: 10px; letter-spacing: 0.08em;
      text-transform: uppercase; color: #f0e6dc;
    }
    .out-chip strong { font-size: 26px; color: #fff; line-height: 1.05; }
    .live-hud .meter { height: 8px; border-color: rgba(255,255,255,0.28); background: rgba(0,0,0,0.5); }
    .live-hud .checks { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .live-hud .check {
      flex: 1 1 auto; background: rgba(11,12,10,0.7); border-color: rgba(255,255,255,0.22);
      padding: 5px 8px; font-size: 12px; color: #fff; font-weight: 700;
    }
    .live-hud .check b { font-size: 13px; color: #fff; }
    .hud-label { letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; color: #fff; font-weight: 700; }
    .countdown {
      position: absolute; inset: 0; display: none;
      align-items: center; justify-content: center;
      background: rgba(11,12,10,0.55);
      font-size: clamp(64px, 18vw, 140px);
      font-weight: 700; letter-spacing: -0.06em;
    }
    .countdown.show { display: flex; }
    .adjust-banner {
      display: none; position: absolute; left: 12px; right: 12px; top: 18%;
      z-index: 8; text-align: center; padding: 14px 12px; border-radius: 12px;
      background: #3a1810; border: 1px solid #c9a227; color: #fff3c4;
      font-size: 20px; font-weight: 700; letter-spacing: 0.02em;
    }
    .adjust-banner.show { display: block; }
    .session-clock {
      position: absolute; top: 12px; left: 12px; right: 12px;
      display: none; text-align: center; pointer-events: none;
      text-shadow: 0 2px 16px #000;
    }
    .session-clock.show { display: block; }
    .session-clock .clock-label {
      font-family: "Play", sans-serif; font-size: 11px; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase; color: #d7b07a;
    }
    .session-clock .clock-face {
      font-family: "Play", sans-serif;
      font-size: clamp(42px, 12vw, 84px);
      font-weight: 600; letter-spacing: -0.04em; line-height: 1.05;
    }
    .session-clock.adding .clock-face { color: var(--amber); }
    .session-clock.slow .clock-face { color: #f0c36e; }
    .session-clock.frozen .clock-face { color: #8ec5ff; }
    .session-clock .clock-state {
      font-family: "Play", sans-serif; font-size: 12px;
      letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
    }
    .presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .presets button { padding: 9px 6px; font-size: 13px; }
    .presets button.active {
      background: #2a2618; border-color: #5a4a22; color: var(--amber);
    }
    .presets button.cruel.active {
      background: #2a1614; border-color: #6a2a22; color: var(--live);
    }
    .panel {
      margin-top: 16px;
      background: var(--bg-2); border: 1px solid var(--line);
      border-radius: 16px; padding: 16px;
      display: flex; flex-direction: column; gap: 14px;
    }
    .row { display: flex; gap: 8px; flex-wrap: wrap; }
    .wrap button, .wrap select {
      font-family: inherit; font-size: 14px; font-weight: 560;
      border-radius: 10px; border: 1px solid var(--line);
      background: var(--bg-3); color: var(--text);
      padding: 11px 14px; cursor: pointer;
    }
    .wrap button:hover { border-color: #4a5040; }
    .wrap button.primary { background: #2a2618; border-color: #5a4a22; color: var(--amber); }
    .wrap button.arm { background: #1f2a16; border-color: #4a6230; color: var(--ok); flex: 1; }
    .wrap button.demo { background: #1a2430; border-color: #3a4a5a; color: #9ec0dd; }
.wrap button.practice { background: #d7c4f2; border-color: #b39ad9; color: #2a1840; }
    .switch-row { display: flex; flex-direction: column; gap: 8px; }
    .opt-block {
      border: 1px solid var(--line, #3a2a2e);
      border-radius: 14px;
      padding: 10px 12px 8px;
      margin: 0 0 10px;
      background: #1a1014;
    }
    .opt-block .switch { margin: 0; width: 100%; }
    .opt-block .hint { margin: 6px 0 4px; }
    .opt-block .field { margin-top: 8px; }
    .switch {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      background: var(--bg-3); border: 1px solid var(--line);
      border-radius: 10px; padding: 10px 12px; font-size: 14px; color: var(--text);
    }
    .switch input { width: 42px; height: 22px; accent-color: var(--amber); }
    .time-up {
      display: none; position: absolute; inset: 0;
      align-items: center; justify-content: center; text-align: center;
      background: rgba(11,12,10,0.72); padding: 24px;
      font-size: clamp(22px, 5vw, 36px); font-weight: 650; letter-spacing: -0.03em;
    }
    .time-up.show { display: flex; }
    .shock-banner {
      display: none;
      align-self: center;
      min-width: min(92%, 420px);
      text-align: center;
      background: rgba(226, 74, 59, 0.88);
      border: 1px solid #ffb0a6;
      border-radius: 12px;
      padding: 10px 14px 12px;
      color: #fff;
      box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    }
    .shock-banner.show { display: block; }
    .shock-banner .kicker {
      letter-spacing: 0.16em; text-transform: uppercase;
      font-size: 12px; font-weight: 700;
    }
    .shock-banner .nums {
      display: flex; justify-content: center; gap: 24px; margin-top: 4px;
    }
    .shock-banner .nums strong {
      display: block; font-size: clamp(28px, 7vw, 40px); line-height: 1;
    }
    .shock-banner .nums span {
      letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; opacity: 0.9;
    }
    .wrap button:disabled { opacity: 0.45; cursor: not-allowed; }
    /* Unpaid lock. Trainer CSS used to keep sliders clickable. */
    body.preview-lock .wrap input,
    body.preview-lock .wrap select,
    body.preview-lock .wrap button,
    body.preview-lock .wrap .switch,
    body.preview-lock .wrap label.field,
    body.preview-lock .stage button {
      pointer-events: none !important;
      opacity: 0.42;
      filter: grayscale(0.25);
    }
    body.preview-lock .preview-banner {
      pointer-events: auto !important;
      opacity: 1;
      filter: none;
    }
    /* Free/Demo: every setting stays live. Only Cruel is greyed. Timer cap is JS. */
    body.trainer-free .presets button[data-preset="cruel"] {
      pointer-events: none !important;
      opacity: 0.42;
      filter: grayscale(0.25);
    }
    #timerFreeNote {
      color: var(--gold);
      background: #2a1810;
      border: 1px solid #6a4a28;
      padding: 8px 10px;
      border-radius: 8px;
      margin: 6px 0 10px;
    }
    label.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
    label.field span.k {
      font-family: "Play", sans-serif; font-size: 11px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      display: flex; justify-content: space-between; color: var(--muted);
    }
    label.field b { color: var(--text); font-weight: 600; }
    input[type="range"] { width: 100%; accent-color: var(--amber); }
    .meter {
      height: 10px; background: #22251c; border-radius: 99px; overflow: hidden;
      border: 1px solid var(--line);
    }
    .meter > i {
      display: block; height: 100%; width: 0%;
      background: linear-gradient(90deg, #6b8f3a, var(--amber), var(--live));
    }
    .readout { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat {
      background: var(--bg-3); border: 1px solid var(--line);
      border-radius: 10px; padding: 10px 12px;
    }
    .stat em {
      display: block; font-style: normal;
      font-family: "Play", sans-serif; font-size: 10px; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
    }
    .stat strong { font-size: 22px; font-variant-numeric: tabular-nums; }
    .hint { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
    .warn {
      font-size: 12.5px; line-height: 1.4; color: #d7b07a;
      background: #1c1810; border: 1px solid #3a301c;
      border-radius: 10px; padding: 10px 12px;
    }
    .checks { display: flex; flex-direction: column; gap: 6px; }
    .check {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 13px; background: var(--bg-3); border: 1px solid var(--line);
      border-radius: 10px; padding: 8px 10px;
    }
    .check b { font-family: "Play", sans-serif; font-size: 11px; color: var(--muted); }
    .check.ok { border-color: #3d4a2c; }
    .check.ok b { color: var(--ok); }
    .check.bad { border-color: #5a2a1c; }
    .check.bad b { color: var(--live); }
    .stop {
      margin-top: 16px; width: 100%; background: var(--danger); border: 0; color: #fff;
      font-size: 18px; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; padding: 16px 18px 14px; border-radius: 14px;
      display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1.15;
    }
    .stop small { font-size: 12px; font-weight: 400; letter-spacing: 0.04em; text-transform: none; opacity: 0.9; }
    .stop:hover { background: var(--danger-press); }
    .stop.locked { background: #3a2a28; color: #8a7a76; cursor: not-allowed; }
    .stop-dock:empty { display: none; }
    .stop-dock { margin-top: 10px; position: sticky; top: 8px; z-index: 40; }
    .cruel-warn {
      display: none; font-size: 13px; line-height: 1.45; color: #f0b4aa;
      background: #2a1210; border: 1px solid #6a2a22;
      border-radius: 10px; padding: 10px 12px;
    }
    .cruel-warn.show { display: block; }
    .log {
      font-family: "Play", sans-serif; font-size: 12px;
      color: var(--muted); max-height: 88px; overflow: auto;
      background: #10120e; border-radius: 8px; padding: 8px; white-space: pre-wrap;
    }
    .custom-editor {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px;
      background: var(--bg-3);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .custom-editor[hidden] { display: none; }
    .figure-presets button { flex: 1; font-size: 12px; padding: 8px 6px; }
    .figure-stage {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) 58px;
      grid-template-areas: "head head head" "left canvas right";
      gap: 6px;
      align-items: stretch;
    }
    .figure-head { grid-area: head; display: flex; justify-content: center; }
    .figure-col { display: flex; flex-direction: column; justify-content: space-around; gap: 4px; }
    .figure-col.left { grid-area: left; }
    .figure-col.right { grid-area: right; }
    .jbtn {
      font: 700 10px Play, sans-serif;
      padding: 5px 3px;
      border-radius: 8px;
      border: 1px solid var(--j, #c9a227);
      color: var(--ink);
      background: transparent;
      opacity: 0.38;
      cursor: pointer;
    }
    .jbtn.on {
      opacity: 1;
      background: color-mix(in srgb, var(--j, #c9a227) 28%, #140c10);
    }
    #poseCanvas {
      grid-area: canvas;
      width: 100%;
      max-width: 280px;
      height: auto;
      aspect-ratio: 280 / 360;
      background: #100c0e;
      border: 1px solid var(--line);
      border-radius: 10px;
      touch-action: none;
      justify-self: center;
    }
    .custom-editor.is-blind #poseCanvas { visibility: hidden; }
    @media (max-width: 640px) {
      header { align-items: flex-start; flex-direction: column; }
      .live-hud .checks { flex-direction: row; flex-wrap: wrap; }
      .hud-strip { grid-template-columns: 1fr auto; }
    }
    #headCanvas {
      width: 100%; max-width: 280px; height: auto;
      display: block; margin: 8px 0; border-radius: 12px;
      background: #100c0e;
    }