/* v343 · a considered surface for every step beyond the home.
   Only page chrome changes here. Camera, canvas, session and model positioning stay owned
   by their existing styles. Semantic errors/disabled/hidden states remain untouched. */
:root {
  --cp-border: color-mix(in srgb, var(--p-ink) 30%, transparent);
  --cp-edge: color-mix(in srgb, var(--p-ink) 17%, transparent);
  --cp-shadow: 0 4px 0 var(--cp-edge);
  --cp-mint: #283e32;
  --cp-yellow: #423c26;
  --cp-blue: #293a46;
  --cp-pink: #49382f;
}
:root[data-theme="soft"] {
  --cp-mint: #ddecda;
  --cp-yellow: #f8e9b6;
  --cp-blue: #e4edf7;
  --cp-pink: #f6e0d5;
}
:is(#screen-round-setup, #screen-challenge, #screen-ai-menu, #screen-game-setup,
    #screen-settings, #screen-tips, #screen-gym-timer, #screen-auth, #screen-result) {
  color: var(--p-ink);
  background: var(--p-bg);
}
:is(#screen-round-setup, #screen-challenge, #screen-ai-menu, #screen-game-setup,
    #screen-settings, #screen-voice-setup, #screen-gym-timer) > .setup-content,
#screen-tips > .tips-content {
  width: 100%; max-width: 780px; min-width: 0; margin-inline: auto;
  padding: max(22px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: var(--p-bg); color: var(--p-ink); text-align: left;
}
:is(#screen-round-setup, #screen-challenge, #screen-ai-menu, #screen-game-setup,
    #screen-settings, #screen-voice-setup, #screen-gym-timer, #screen-tips,
    #screen-tutorial, #screen-chat, #screen-three-minute) .back-btn {
  min-width: 44px; min-height: 44px; border: 2px solid var(--cp-border);
  border-radius: 14px; padding: 9px 14px; background: var(--p-paper); color: var(--p-ink);
  box-shadow: 0 3px 0 var(--cp-edge); font: 700 12px/1.5 var(--p-font);
}
:is(#screen-round-setup, #screen-challenge, #screen-ai-menu, #screen-game-setup,
    #screen-settings, #screen-gym-timer, #screen-tips) :is(.setup-title, .tips-title) {
  margin: 28px 0 12px; font-family: var(--p-font); font-size: clamp(27px, 5.7vw, 38px);
  line-height: 1.4; font-weight: 800; letter-spacing: -.045em; color: var(--p-ink);
}
:is(#screen-round-setup, #screen-challenge, #screen-ai-menu, #screen-game-setup,
    #screen-settings, #screen-gym-timer) .setup-subtitle {
  margin: 0 0 27px; max-width: 58ch; color: var(--p-muted); font-size: 14px; line-height: 1.85;
}
:is(#screen-round-setup, #screen-challenge, #screen-ai-menu, #screen-game-setup,
    #screen-settings, #screen-gym-timer, #screen-tips, #screen-voice-setup,
    #screen-three-minute, #screen-journal, #screen-chat, #screen-auth, #screen-result)
  :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--p-accent); outline-offset: 4px;
}
/* Each scrolling page pays for navigation space once, inside its own scroll owner. */
#screen-settings, #screen-journal { padding-bottom: 0; }
#screen-settings > .setup-content { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }
#screen-tutorial { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }
:is(#screen-round-setup, #screen-challenge, #screen-ai-menu, #screen-game-setup,
    #screen-settings, #screen-gym-timer, #screen-auth, #screen-result) :is(.primary-btn, .secondary-btn) {
  min-height: 54px; border: 2px solid var(--p-ink); border-radius: 14px;
  padding: 14px 20px; font: 800 14px/1.65 var(--p-font); box-shadow: var(--pc-shadow);
  background: var(--pc-citrus); color: var(--p-ink);
}
:is(#screen-round-setup, #screen-challenge, #screen-ai-menu, #screen-game-setup,
    #screen-settings, #screen-gym-timer, #screen-auth, #screen-result) .secondary-btn {
  background: var(--p-paper); color: var(--p-ink); border-color: var(--cp-border);
}
/* Presets feel like a small set of cards, with a clear, stable selection. */
:is(#screen-round-setup, #screen-gym-timer) .preset-group { gap: 14px; margin-top: 26px; }
:is(#screen-round-setup, #screen-gym-timer) .preset-btn {
  position: relative; padding: 20px 48px 20px 20px; min-height: 84px;
  border: 2px solid var(--cp-border); border-radius: 18px; background: var(--p-paper);
  box-shadow: var(--cp-shadow); text-align: left;
}
:is(#screen-round-setup, #screen-gym-timer) .preset-btn::after {
  content: ''; position: absolute; right: 18px; top: calc(50% - 10px);
  width: 20px; height: 20px; border: 2px solid var(--cp-border); border-radius: 50%; background: var(--p-bg);
}
:is(#screen-round-setup, #screen-gym-timer) .preset-btn.active {
  background: var(--cp-mint); border-color: var(--p-ink); box-shadow: 0 4px 0 var(--p-ink);
}
:is(#screen-round-setup, #screen-gym-timer) .preset-btn.active::after {
  background: var(--p-ink); border-color: var(--p-ink); box-shadow: inset 0 0 0 4px var(--cp-mint);
}
:is(#screen-round-setup, #screen-gym-timer) .preset-label { font-size: 17px; font-weight: 800; }
:is(#screen-round-setup, #screen-gym-timer) .preset-detail { font-size: 13px; margin-top: 3px; }
:is(#screen-round-setup, #screen-gym-timer) .custom-settings {
  border: 2px solid var(--cp-border); border-radius: 20px; padding: 18px; background: var(--p-paper);
}
:is(#screen-round-setup, #screen-gym-timer) .setting-row { gap: 12px; padding-block: 12px; }
:is(#screen-round-setup, #screen-gym-timer) .setting-row label { color: var(--p-ink); font-size: 13px; line-height: 1.5; }
:is(#screen-round-setup, #screen-gym-timer) .stepper { flex-shrink: 0; gap: 8px; }
:is(#screen-round-setup, #screen-gym-timer) .step-btn {
  width: 44px; height: 44px; border: 2px solid var(--cp-border); border-radius: 12px;
  color: var(--p-ink); background: var(--p-bg); box-shadow: 0 2px 0 var(--cp-edge); font-size: 23px;
}
:is(#screen-round-setup, #screen-gym-timer) .stepper span { font-size: 17px; min-width: 46px; color: var(--p-ink); font-variant-numeric: tabular-nums; }
#screen-gym-timer .gym-toggle-row { margin: 22px 0; min-height: 44px; gap: 14px; color: var(--p-ink); font-size: 14px; }
#screen-gym-timer .gym-sounds { padding: 20px; border: 2px solid var(--cp-border); border-radius: 20px; }
#screen-gym-timer .gym-sound-grid { gap: 10px; }
#screen-gym-timer .gym-sound-grid button { min-height: 50px; border: 2px solid var(--cp-border); border-radius: 12px; box-shadow: 0 3px 0 var(--cp-edge); }
#screen-gym-timer #gym-sound-stop { min-height: 44px; }
#screen-gym-timer .gym-time { font-family: var(--p-font); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.065em; }
#screen-gym-timer .gym-phase-tag { border: 2px solid currentColor; border-radius: 12px; box-shadow: none; }
/* Settings: labels lead, choices stay generous, support copy can breathe. */
#screen-settings #voice-guide-open { margin-block: 0 24px; width: 100%; min-height: 50px; line-height: 1.6; }
#screen-settings .settings-section { padding: 22px; margin-bottom: 20px; border: 2px solid var(--cp-border); border-radius: 22px; background: var(--p-paper); box-shadow: var(--cp-shadow); }
#screen-settings .settings-label { align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 15px; font-size: 16px; font-weight: 800; }
#screen-settings .settings-label > span:first-child { min-width: 0; }
#screen-settings .settings-value { margin-left: auto; padding: 4px 9px; border-radius: 8px; background: var(--cp-yellow); color: var(--p-ink); font-size: 12px; font-weight: 800; }
#screen-settings :is(.settings-style-row, .settings-fx-row, .fx-toggle) { gap: 10px; }
#screen-settings :is(.style-btn, .fx-btn) { min-height: 88px; border: 2px solid var(--cp-border); border-radius: 14px; padding: 14px 10px; background: var(--p-bg); box-shadow: 0 3px 0 var(--cp-edge); }
#screen-settings :is(.style-btn, .fx-btn).active { border-color: var(--p-ink); background: var(--cp-mint); box-shadow: 0 3px 0 var(--p-ink); }
#screen-settings :is(.fx-name, .style-name) { font-size: 14px; font-weight: 800; line-height: 1.5; color: var(--p-ink); }
#screen-settings :is(.style-desc, .fx-desc) { font-size: 12px; line-height: 1.65; margin-top: 6px; }
#screen-settings .settings-hint { margin-top: 14px; font-size: 12px; }
#screen-settings .settings-text { border-width: 2px; border-color: var(--cp-border); border-radius: 13px; padding: 13px; }
#screen-settings .settings-range { min-height: 44px; accent-color: var(--p-accent); }
#screen-settings .settings-preview { border-radius: 14px; }
#screen-settings .plan-chip { background: var(--cp-yellow); color: var(--p-ink); border: 1px solid var(--cp-border); font-weight: 800; }
#screen-settings :is(.plan-desc, .tv-guide-row) { font-size: 13px; line-height: 1.85; color: var(--p-muted); }
#screen-settings .settings-version { padding-block: 14px; font-size: 12px; color: var(--p-muted); }
/* Learning: a workbook with a prominent player and distinct observation cards. */
#screen-tutorial { background: var(--p-bg); color: var(--p-ink); }
#screen-tutorial .tutorial-heading { padding-top: 6px; }
#screen-tutorial .tutorial-title { font-size: clamp(28px, 5.7vw, 38px); font-weight: 800; letter-spacing: -.045em; }
#screen-tutorial :is(.tutorial-intro, .tut-stance-caption) { font-size: 13px; line-height: 1.8; }
#screen-tutorial .tutorial-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; }
#screen-tutorial .tut-stance { border: 2px solid var(--cp-border); border-radius: 14px; padding: 4px; background: var(--p-paper); }
#screen-tutorial .tut-stance-btn { min-height: 44px; border-radius: 10px; font-size: 12px; }
#screen-tutorial .tut-cats { gap: 8px; padding-block: 8px; }
#screen-tutorial .tut-cat { min-height: 48px; border: 2px solid var(--cp-border); border-radius: 14px; background: var(--p-paper); color: var(--p-ink); padding: 10px 16px; box-shadow: 0 3px 0 var(--cp-edge); font-size: 13px; font-weight: 800; }
#screen-tutorial .tut-cat.active { color: var(--p-ink); background: var(--cp-yellow); border-color: var(--p-ink); box-shadow: 0 3px 0 var(--p-ink); }
#screen-tutorial .tutorial-tabs { gap: 8px; padding-block: 8px; }
#screen-tutorial .tut-tab { min-height: 44px; padding: 10px 16px; border: 2px solid var(--cp-border); border-radius: 12px; background: var(--p-paper); font-weight: 700; }
#screen-tutorial .tut-tab.active { background: var(--p-ink); color: var(--p-paper); border-color: var(--p-ink); }
#screen-tutorial .tutorial-player { border: 2px solid var(--cp-border); border-radius: 24px; box-shadow: var(--cp-shadow); background: var(--p-paper); }
#screen-tutorial .tut-lesson-heading { padding: 14px 16px 0; }
#screen-tutorial .tut-lesson-heading h3 { font-size: 25px; font-weight: 800; line-height: 1.5; }
#screen-tutorial .tut-lesson-position { font-size: 12px; font-weight: 700; }
#screen-tutorial .tut-lesson-focus { margin: 8px 16px 12px; font-size: 13px; line-height: 1.75; }
#screen-tutorial .tut-ctrl { min-width: 44px; min-height: 44px; border: 2px solid var(--cp-border); border-radius: 12px; box-shadow: 0 2px 0 var(--cp-edge); font-weight: 800; }
#screen-tutorial .tut-lesson-nav .tut-ctrl { min-width: 44px; width: 44px; border-radius: 12px; }
#screen-tutorial .tut-ctrl.active { background: var(--p-ink); color: var(--p-paper); border-color: var(--p-ink); }
#screen-tutorial .tut-3d-lesson { border: 2px solid var(--p-ink); border-radius: 16px; box-shadow: 0 3px 0 var(--cp-edge); background: var(--cp-mint); color: var(--p-ink); }
#screen-tutorial .tut-3d-title { font-size: 16px; line-height: 1.6; }
#screen-tutorial .tut-3d-desc { font-size: 12px; line-height: 1.75; }
#screen-tutorial .tut-hand-btn { min-height: 44px; border-width: 2px; }
#screen-tutorial .tut-keyframe-buttons { flex-wrap: wrap; gap: 9px; }
#screen-tutorial .tut-keyframe-buttons button { min-height: 52px; border: 2px solid var(--cp-border); border-radius: 12px; font-size: 12px; }
#screen-tutorial .tut-keyframe-buttons button[aria-pressed="true"] { background: var(--cp-yellow); border-color: var(--p-ink); box-shadow: 0 2px 0 var(--p-ink); }
#screen-tutorial .tut-self-practice { border: 2px solid var(--cp-border); border-radius: 22px; background: var(--cp-mint); box-shadow: var(--cp-shadow); }
#screen-tutorial .tut-self-practice h4 { font-size: 19px; font-weight: 800; }
#screen-tutorial #tut-practice-pause { min-height: 52px; border-radius: 13px; font-size: 13px; }
#screen-tutorial :is(.tut-observation, .tut-pro-study) { padding: 20px; border: 2px solid var(--cp-border); border-radius: 20px; background: var(--p-paper); }
#screen-tutorial .tut-observation { background: var(--cp-yellow); }
#screen-tutorial .tutorial-desc :is(p, li) { font-size: 14px; line-height: 1.85; }
#screen-tutorial .tutorial-desc :is(.tut-practice-scope, .tut-pro-study small) { font-size: 12px; line-height: 1.75; }
#screen-tutorial .tut-reference { min-height: 48px; line-height: 1.65; }
/* The journal remains a notebook, including roomy native input controls. */
#screen-journal .journal-shell { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }
#screen-journal .journal-header { padding-block: 8px 22px; }
#screen-journal .journal-header .journal-button { padding-inline: 13px; border: 2px solid var(--cp-border); background: var(--p-paper); box-shadow: 0 3px 0 var(--cp-edge); }
#screen-journal .journal-title { margin-bottom: 25px; }
#screen-journal .journal-title h1 { font-weight: 800; font-size: clamp(30px, 6vw, 38px); }
#screen-journal .journal-title p { font-size: 14px; }
#screen-journal .journal-tabs { gap: 6px; border: 2px solid var(--cp-border); border-radius: 17px; padding: 6px; background: var(--p-paper); box-shadow: 0 3px 0 var(--cp-edge); }
#screen-journal .journal-tabs button { min-height: 48px; font-size: 13px; font-weight: 700; border-radius: 11px; }
#screen-journal :is(.journal-section, .journal-composer, .journal-calendar-review) { margin-top: 22px; border: 2px solid var(--cp-border); border-radius: 22px; box-shadow: var(--cp-shadow); }
#screen-journal .journal-greeting { grid-template-columns: 44px minmax(0, 1fr); gap: 13px; }
#screen-journal .journal-mark { width: 44px; height: 44px; background: var(--cp-yellow); color: var(--p-ink); border: 1px solid var(--cp-border); border-radius: 14px; }
#screen-journal h2 { font-size: 20px; font-weight: 800; }
#screen-journal .journal-button { min-height: 48px; border: 2px solid var(--cp-border); border-radius: 12px; font-size: 13px; }
#screen-journal .journal-primary { border-color: var(--p-ink); box-shadow: 0 3px 0 var(--cp-edge); }
#screen-journal .journal-examples { gap: 9px; }
#screen-journal .journal-examples .journal-button { background: var(--p-bg); font-size: 12px; }
#screen-journal :is(textarea, input:not([type="file"]), select) { border-width: 2px; border-color: var(--cp-border); border-radius: 13px; }
#screen-journal .journal-flow-step li::before { width: 26px; height: 26px; font-weight: 800; }
#screen-journal .journal-calendar { gap: 5px; }
#screen-journal .journal-day { min-height: 48px; border-radius: 11px; font-weight: 700; }
#screen-journal .journal-day.has-record:not([aria-pressed="true"]) { background: var(--cp-mint); }
#screen-journal .journal-day[aria-current="date"] { border: 2px solid var(--p-accent); }
#screen-journal .journal-entry { padding-block: 20px; }
#screen-journal .journal-kind { font-size: 12px; }
#screen-journal .journal-empty { padding: 24px 0; }
#screen-journal .journal-privacy { font-size: 12px; line-height: 1.85; }
/* Text chat: a clear speech bubble and a small deck of useful starting points. */
#screen-chat .chat-shell { max-width: 760px; }
#screen-chat .chat-head { gap: 14px; padding-block: max(18px, env(safe-area-inset-top)) 18px; border-bottom: 2px solid var(--cp-border); }
body:has(> #punchy-dev-preview) #screen-chat .chat-head { padding-top: max(32px, env(safe-area-inset-top)); }
#screen-chat .chat-head h2 { font-size: 21px; font-weight: 800; }
#screen-chat .chat-head p { margin-top: 4px; font-size: 12px; }
#screen-chat .chat-log { gap: 20px; padding: 24px 20px; }
#screen-chat .chat-intro { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
#screen-chat .chat-intro img { width: 48px; height: 48px; border: 2px solid var(--cp-border); border-radius: 16px; background: var(--cp-yellow); }
#screen-chat .chat-bubble { padding: 16px 18px; border-radius: 20px; line-height: 1.8; }
#screen-chat .chat-bubble.coach { border: 2px solid var(--cp-border); border-top-left-radius: 5px; box-shadow: 0 3px 0 var(--cp-edge); }
#screen-chat .chat-bubble.me { border-top-right-radius: 5px; }
#screen-chat .chat-suggest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#screen-chat .chat-suggest button { min-height: 68px; padding: 14px; border: 2px solid var(--cp-border); border-radius: 16px; box-shadow: 0 3px 0 var(--cp-edge); font-size: 13px; font-weight: 700; line-height: 1.7; }
#screen-chat .chat-suggest button:nth-child(2n+1) { background: var(--cp-blue); }
#screen-chat .chat-suggest button:nth-child(2n) { background: var(--cp-mint); }
#screen-chat .chat-notice { padding: 16px; border-radius: 16px; background: var(--p-bg); }
#screen-chat .chat-composer { border-top: 2px solid var(--cp-border); padding: 14px 16px max(14px, env(safe-area-inset-bottom)); gap: 8px 10px; }
#screen-chat .chat-composer textarea { border: 2px solid var(--cp-border); border-radius: 16px; }
#screen-chat .chat-send { width: 48px; height: 48px; border-radius: 14px; border: 2px solid var(--cp-border); box-shadow: 0 3px 0 var(--cp-edge); }
#screen-chat .chat-reset { padding-inline: 10px; border: 2px solid var(--cp-border); border-radius: 12px; line-height: 1.5; }
/* A voice coach introduction with tactile, numbered instruction cards. */
#screen-voice-setup > .setup-content { max-width: 700px; }
#screen-voice-setup .vc-setup-heading {
  display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 16px;
  align-items: center; margin-top: 22px; padding: 0;
}
/* Keep the welcome portrait in its own grid cell, never above translated copy. */
#screen-voice-setup .vc-setup-portrait {
  position: static; grid-column: 2; grid-row: 1; width: 72px; height: 72px;
  padding: 4px; border: 2px solid var(--cp-border); border-radius: 19px;
  background: var(--cp-yellow); box-shadow: 0 3px 0 var(--cp-edge);
}
#screen-voice-setup .vc-eyebrow { grid-column: 1; grid-row: 1; margin: 0; min-width: 0; font-size: 12px; line-height: 1.7; }
#screen-voice-setup .vc-setup-heading h2 { grid-column: 1 / -1; margin: 0; font-size: clamp(27px, 5.5vw, 36px); font-weight: 800; }
#screen-voice-setup .vc-intro { grid-column: 1 / -1; margin: 0; font-size: 14px; }
#screen-voice-setup .vc-steps { display: grid; gap: 14px; border: 0; margin: 28px 0; }
#screen-voice-setup .vc-steps li { gap: 14px; padding: 19px; border: 2px solid var(--cp-border); border-radius: 20px; background: var(--p-paper); box-shadow: var(--cp-shadow); }
#screen-voice-setup .vc-step-number { display: grid; place-items: center; flex: 0 0 34px; height: 34px; padding: 0; border: 1px solid var(--cp-border); border-radius: 11px; background: var(--cp-yellow); color: var(--p-ink); font-size: 12px; font-weight: 800; }
#screen-voice-setup .vc-steps h3 { font-size: 16px; font-weight: 800; }
#screen-voice-setup .vc-steps p { font-size: 13px; }
#screen-voice-setup .vc-scope { border-radius: 18px; padding: 18px; }
#screen-voice-setup .vc-scope p { font-size: 12px; }
#screen-voice-setup .vc-start { min-height: 56px; border: 2px solid var(--p-ink); border-radius: 14px; box-shadow: var(--cp-shadow); font-size: 14px; }
/* Three minutes: an instrument-like clock, with the content still driving the session. */
#screen-three-minute .three-shell { width: min(100%, 800px); padding-bottom: max(50px, env(safe-area-inset-bottom)); }
#screen-three-minute .three-topline .back-btn { border: 2px solid var(--cp-border); border-radius: 14px; }
#screen-three-minute .three-heading { padding-bottom: 24px; border-bottom: 2px solid var(--cp-border); }
#screen-three-minute .three-heading h2 { font-size: clamp(28px, 5.8vw, 38px); font-weight: 800; }
#screen-three-minute .three-heading p { font-size: 13px; }
#screen-three-minute .three-clock { border-radius: 50%; background: var(--cp-yellow); box-shadow: 0 5px 0 var(--cp-edge); }
#screen-three-minute .three-clock svg { stroke-width: 3.2; }
#screen-three-minute .three-digits strong { font-weight: 800; }
#screen-three-minute .three-current h3 { font-weight: 800; }
#screen-three-minute .three-segments { gap: 7px; }
#screen-three-minute .three-segments span { height: 7px; border: 1px solid var(--cp-border); border-radius: 4px; }
#screen-three-minute .three-next { padding: 16px; border: 2px solid var(--cp-border); border-radius: 16px; }
#screen-three-minute .three-button { min-height: 54px; border-width: 2px; border-radius: 14px; box-shadow: var(--cp-shadow); font-size: 14px; }
#screen-three-minute .three-button.secondary { border-color: var(--cp-border); }
#screen-three-minute .three-plan { border: 2px solid var(--cp-border); border-radius: 17px; padding: 0 16px; background: var(--p-paper); }
#screen-three-minute .three-plan summary { min-height: 54px; padding-block: 15px; font-weight: 700; color: var(--p-ink); }
#screen-three-minute .three-plan li { padding-block: 13px; font-size: 13px; }
#screen-three-minute .three-footer { font-size: 12px; }
#screen-three-minute .three-result-mark { width: 72px; height: 72px; border: 2px solid var(--p-ink); background: var(--cp-mint); color: var(--p-ink); box-shadow: 0 4px 0 var(--cp-edge); font-size: 34px; }
#screen-three-minute .three-result-time { border: 2px solid var(--cp-border); border-radius: 22px; background: var(--cp-yellow); max-width: 460px; }
#screen-three-minute .three-result-next { border: 2px solid var(--cp-border); border-radius: 20px; }
/* AI menu, seven themes, safety, and the game setup each keep their own hierarchy. */
#screen-ai-menu .goal-grid { gap: 15px; }
#screen-ai-menu .goal-card { min-width: 0; padding: 22px 18px; border: 2px solid var(--cp-border); border-radius: 20px; background: var(--p-paper); color: var(--p-ink); box-shadow: var(--cp-shadow); text-align: left; }
#screen-ai-menu .goal-card:nth-child(3n+1) .goal-icon { background: var(--cp-yellow); }
#screen-ai-menu .goal-card:nth-child(3n+2) .goal-icon { background: var(--cp-blue); }
#screen-ai-menu .goal-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 0 16px; border: 1px solid var(--cp-border); border-radius: 15px; background: var(--cp-mint); color: var(--p-ink); }
#screen-ai-menu .goal-label { font-size: 17px; line-height: 1.5; font-weight: 800; color: var(--p-ink); }
#screen-ai-menu .goal-desc { margin-top: 7px; color: var(--p-muted); font-size: 12px; line-height: 1.75; }
#screen-ai-menu .goal-card.selected { border-color: var(--p-ink); background: var(--cp-mint); box-shadow: 0 4px 0 var(--p-ink); }
#screen-challenge .ch-days { gap: 12px; margin-block: 26px; }
#screen-challenge .ch-day-item { padding: 17px; gap: 14px; border: 2px solid var(--cp-border); border-radius: 18px; background: var(--p-paper); }
#screen-challenge .ch-day-item.current { border-color: var(--p-ink); background: var(--cp-yellow); box-shadow: var(--cp-shadow); }
#screen-challenge .ch-day-item-num { flex-basis: 32px; height: 32px; border-radius: 10px; border: 2px solid var(--cp-border); background: var(--p-bg); color: var(--p-ink); font-size: 14px; }
#screen-challenge .ch-day-item.current .ch-day-item-num { color: var(--p-paper); background: var(--p-ink); border-color: var(--p-ink); }
#screen-challenge .ch-day-item.done .ch-day-item-num { color: var(--p-ink); background: var(--cp-mint); }
#screen-challenge .ch-day-item-today { display: inline-block; color: var(--p-accent); letter-spacing: .04em; }
#screen-challenge .ch-day-item-name { font-size: 16px; line-height: 1.65; }
#screen-challenge .ch-day-item-desc { color: var(--p-muted); opacity: 1; font-size: 13px; line-height: 1.75; }
#screen-challenge .ch-today { margin-block: 26px; padding: 24px; text-align: left; border: 2px solid var(--cp-border); border-radius: 22px; background: var(--cp-mint); }
#screen-challenge .ch-day-label { color: var(--p-accent); }
#screen-challenge .ch-day-name { font-size: 25px; line-height: 1.5; color: var(--p-ink); }
#screen-challenge .ch-day-desc { color: var(--p-muted); opacity: 1; font-size: 14px; line-height: 1.8; }
#screen-tips .tips-list { gap: 15px; margin-top: 26px; }
#screen-tips .tip-item { padding: 20px; gap: 16px; border: 2px solid var(--cp-border); border-radius: 20px; background: var(--p-paper); box-shadow: var(--cp-shadow); }
#screen-tips .tip-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; background: var(--cp-mint); color: var(--p-ink); border-radius: 13px; }
#screen-tips .tip-heading { color: var(--p-ink); font-size: 17px; font-weight: 800; line-height: 1.6; }
#screen-tips .tip-body p { margin-top: 8px; color: var(--p-muted); font-size: 14px; line-height: 1.85; }
#screen-tips :is(.install-guide, .disclaimer-box) { padding: 22px; margin-top: 24px; border: 2px solid var(--cp-border); border-radius: 20px; background: var(--p-paper); color: var(--p-ink); }
#screen-tips .install-guide { background: var(--cp-yellow); }
#screen-tips :is(.install-heading, .disclaimer-title) { color: var(--p-ink); font-size: 16px; line-height: 1.6; }
#screen-tips :is(.disclaimer-box p, .install-platform p) { font-size: 13px; line-height: 1.85; color: var(--p-muted); }
#screen-game-setup :is(.game-rules, .game-best-display) { border: 2px solid var(--cp-border); border-radius: 20px; padding: 20px; background: var(--p-paper); }
#screen-game-setup .game-rule { gap: 12px; padding-block: 10px; }
#screen-game-setup .game-rule-text { font-size: 13px; line-height: 1.75; color: var(--p-ink); }
#screen-game-setup .game-time-btn { min-height: 92px; border: 2px solid var(--cp-border); border-radius: 16px; background: var(--p-paper); color: var(--p-ink); box-shadow: var(--cp-shadow); }
#screen-game-setup .game-time-btn.active { border-color: var(--p-ink); background: var(--cp-yellow); }
#screen-game-setup .game-time-num { color: var(--p-ink); font-weight: 800; }
#screen-game-setup .game-time-sub { color: var(--p-muted); }
/* Entry, setup and finish: shared materials, with no interference in camera layering. */
#screen-auth .auth-content { padding: 30px; border: 2px solid var(--cp-border); border-radius: 28px; background: var(--p-paper); box-shadow: 0 7px 0 var(--cp-edge); max-width: min(460px, calc(100vw - 32px)); }
#screen-auth .auth-title { color: var(--p-ink); font-family: var(--p-font); font-size: 38px; font-weight: 800; letter-spacing: -.055em; }
#screen-auth .auth-sub { color: var(--p-muted); font-size: 15px; line-height: 1.9; }
#screen-auth :is(.auth-disclaimer, .auth-policy-link) { color: var(--p-muted); font-size: 12px; line-height: 1.85; }
#screen-auth .auth-policy-link a { display: inline-block; min-height: 44px; padding-block: 10px; color: var(--p-accent); }
#screen-auth .auth-input { min-height: 50px; border: 2px solid var(--cp-border); border-radius: 13px; color: var(--p-ink); background: var(--p-bg); font-size: 16px; }
#screen-setup-guide .setup-cam-gate-card { border: 2px solid var(--cp-border); border-radius: 26px; box-shadow: 0 6px 0 var(--cp-edge); padding: 25px; }
#screen-setup-guide .setup-cam-gate-card .setup-guide-title { font-weight: 800; font-size: 23px; }
#screen-setup-guide .setup-comfort-icon { border: 1px solid var(--cp-border); border-radius: 13px; background: var(--cp-yellow); color: var(--p-ink); }
#screen-setup-guide .setup-comfort-list li { padding-block: 13px; }
#screen-result .result-content { max-width: 760px; width: 100%; margin-inline: auto; color: var(--p-ink); background: var(--p-bg); padding: 34px 24px max(70px, env(safe-area-inset-bottom)); }
#screen-result .result-title { font: 800 clamp(27px, 6vw, 38px)/1.5 var(--p-font); letter-spacing: -.04em; color: var(--p-ink); }
#screen-result :is(.result-summary, .result-next, .result-challenge) { border: 2px solid var(--cp-border); border-radius: 22px; background: var(--p-paper); color: var(--p-ink); padding: 22px; box-shadow: var(--cp-shadow); }
#screen-result .result-next { background: var(--cp-mint); }
#screen-result .result-summary { width: 100%; max-width: 600px; }
#screen-result :is(#save-result-journal-btn, .result-btn-row) { width: 100%; max-width: 600px; }
#screen-result :is(.rb-title, .rb-stat-label, .rb-delta-label) { font-size: 12px; line-height: 1.65; }
#screen-result .result-feedback-link { min-height: 44px; line-height: 1.7; color: var(--p-muted); }
#screen-training .ctrl-btn { border-width: 2px; }
#screen-training .ctrl-label { font-weight: 700; letter-spacing: .02em; }
@media (min-width: 800px) {
  :is(#screen-round-setup, #screen-challenge, #screen-ai-menu, #screen-game-setup,
      #screen-settings, #screen-voice-setup, #screen-gym-timer) > .setup-content,
  #screen-tips > .tips-content { padding-top: 32px; padding-inline: 34px; }
  #screen-settings .settings-section { padding: 26px; }
  #screen-journal .journal-shell { padding-top: 25px; }
  #screen-chat .chat-log { padding: 30px; }
  #screen-tips .tip-item { padding: 24px; }
}
/* Keep the lesson, including the feet, above the mobile navigation. Text can still
   grow naturally with zoom; controls retain their 44px minimum touch area. */
@media (max-width: 899px) {
  #screen-tutorial .tutorial-header {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
    gap: 6px 14px; padding-bottom: 8px;
  }
  #screen-tutorial .tutorial-header .back-btn { grid-column: 1; grid-row: 1; }
  #screen-tutorial .tutorial-heading { display: contents; }
  #screen-tutorial .tutorial-eyebrow { display: none; }
  #screen-tutorial .tutorial-title { grid-column: 2; grid-row: 1; font-size: clamp(23px, 5.7vw, 28px); }
  #screen-tutorial .tutorial-intro { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  #screen-tutorial .tut-stance { position: static; grid-column: 1 / -1; grid-row: 3; width: fit-content; margin: 0; }
  #screen-tutorial .tut-stance-caption { grid-column: 1 / -1; grid-row: 4; margin: 0; font-size: 12px; }
  #screen-tutorial .tut-cats { grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.3fr); gap: 5px; }
  #screen-tutorial .tut-cat { padding: 6px 3px; font-size: 12px; line-height: 1.5; }
}
@media (min-width: 900px) and (max-height: 1050px) {
  #screen-tutorial .tutorial-heading { padding-top: 0; }
  #screen-tutorial .tutorial-title { font-size: 28px; }
  #screen-tutorial .tutorial-eyebrow { display: none; }
  #screen-tutorial .tutorial-intro { margin-top: 4px; }
  #screen-tutorial .tut-stance-caption { margin-top: 4px; font-size: 12px; }
  #screen-tutorial .tutorial-stage { height: clamp(260px, 38svh, 400px); }
}
@media (max-width: 390px) {
  :is(#screen-round-setup, #screen-challenge, #screen-ai-menu, #screen-game-setup,
      #screen-settings, #screen-voice-setup, #screen-gym-timer) > .setup-content,
  #screen-tips > .tips-content { padding-inline: 16px; }
  #screen-settings .settings-section { padding: 16px; }
  #screen-settings :is(.settings-fx-row, .settings-style-row, .fx-toggle) { gap: 7px; }
  #screen-settings :is(.fx-btn, .style-btn) { padding-inline: 7px; }
  #screen-settings .settings-style-row { grid-template-columns: 1fr; }
  #screen-settings .style-btn { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 8px; text-align: left; min-height: 70px; padding: 12px; }
  #screen-settings .style-icon { grid-row: 1 / 3; align-self: center; }
  #screen-settings .style-desc { margin: 0; }
  :is(#screen-round-setup, #screen-gym-timer) .setting-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  :is(#screen-round-setup, #screen-gym-timer) .stepper { align-self: flex-end; }
  #screen-chat .chat-head { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding-inline: 12px; }
  #screen-chat .chat-reset { grid-column: 2; justify-self: start; }
  #screen-chat .chat-head h2 { font-size: 18px; }
  #screen-chat .chat-log { padding: 20px 14px; }
  #screen-chat .chat-intro { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; }
  #screen-chat .chat-intro img { width: 36px; height: 36px; border-radius: 11px; }
  #screen-chat .chat-bubble { padding: 13px; font-size: 14px; }
  #screen-chat .chat-suggest { grid-template-columns: 1fr; gap: 10px; }
  #screen-chat .chat-suggest button { min-height: 54px; padding-block: 11px; }
  #screen-voice-setup .vc-setup-heading h2 { font-size: 25px; }
  #screen-voice-setup .vc-steps li { padding: 15px; gap: 11px; }
  #screen-voice-setup .vc-step-number { flex-basis: 28px; height: 28px; }
  #screen-ai-menu .goal-grid { gap: 12px; }
  #screen-ai-menu .goal-card { padding: 16px 12px; }
  #screen-ai-menu .goal-label { font-size: 15px; }

  #screen-tutorial .tut-keyframe-buttons button { flex-direction: column; padding-inline: 5px; font-size: 12px; }
  #screen-tips .tip-item { padding: 17px; gap: 12px; }
  #screen-tips .tip-icon { width: 34px; height: 34px; flex-basis: 34px; }
  #screen-tips .tip-heading { font-size: 15px; }
  #screen-tips .tip-body p { font-size: 13px; }
  #screen-journal .journal-calendar { gap: 2px; }
  #screen-journal .journal-section { padding: 16px; }
  #screen-three-minute .three-actions { flex-direction: column; }
  #screen-three-minute .three-button { width: 100%; font-size: 13px; }
  #screen-auth .auth-content { padding: 24px 20px; }
  #screen-result .result-content { padding-inline: 18px; }
}

/* Press feedback belongs to the control, never its scrolling screen or media stage. */
:is(#screen-round-setup, #screen-gym-timer, #screen-settings, #screen-ai-menu,
    #screen-game-setup, #screen-tutorial, #screen-journal, #screen-chat, #screen-three-minute)
  :is(.preset-btn, .step-btn, .style-btn, .fx-btn, .goal-card, .game-time-btn, .tut-cat,
      .tut-tab, .tut-ctrl, .journal-button, .journal-tabs button, .chat-suggest button,
      .chat-send, .three-button) {
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
:is(#screen-round-setup, #screen-gym-timer, #screen-settings, #screen-ai-menu,
    #screen-game-setup, #screen-tutorial, #screen-journal, #screen-chat, #screen-three-minute)
  :is(.preset-btn, .step-btn, .style-btn, .fx-btn, .goal-card, .game-time-btn, .tut-cat,
      .tut-tab, .tut-ctrl, .journal-button, .journal-tabs button, .chat-suggest button,
      .chat-send, .three-button):not(:disabled):active {
  transform: translateY(3px); box-shadow: 0 1px 0 var(--cp-edge);
}
@media (prefers-reduced-motion: reduce) {
  :is(#screen-round-setup, #screen-gym-timer, #screen-settings, #screen-ai-menu,
      #screen-game-setup, #screen-tutorial, #screen-journal, #screen-chat, #screen-three-minute)
    :is(.preset-btn, .step-btn, .style-btn, .fx-btn, .goal-card, .game-time-btn, .tut-cat,
        .tut-tab, .tut-ctrl, .journal-button, .journal-tabs button, .chat-suggest button,
        .chat-send, .three-button) { transition: none; }
  :is(#screen-round-setup, #screen-gym-timer, #screen-settings, #screen-ai-menu,
      #screen-game-setup, #screen-tutorial, #screen-journal, #screen-chat, #screen-three-minute)
    :is(.preset-btn, .step-btn, .style-btn, .fx-btn, .goal-card, .game-time-btn, .tut-cat,
        .tut-tab, .tut-ctrl, .journal-button, .journal-tabs button, .chat-suggest button,
        .chat-send, .three-button):not(:disabled):active { transform: none; }
}
/* Seven live controls need real touch targets, including stop, on narrow phones.
   The 320px dock uses two rows within the existing 96px space below the HUD. */
@media (max-width: 480px) {
  #screen-training #controls.training-controls { gap: 6px; padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  #screen-training #controls .ctrl-dock { gap: 6px; }
  #screen-training #controls .ctrl-btn { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
}
@media (max-width: 359px) {
  #screen-training:not(.voice-only) #controls.training-controls { flex-direction: column; gap: 4px; bottom: calc(4px + env(safe-area-inset-bottom)); }
  #screen-training:not(.voice-only) #controls .ctrl-dock { gap: 12px; }
}