/* Camera-free voice coaching. Shared theme tokens; no simulated audio activity. */
#screen-menu .menu-secondary .voice-home-entry { grid-column:1 / -1; display:flex; align-items:center; gap:14px; padding:15px 17px; }
.voice-home-entry .card-body { display:flex; flex:1; flex-direction:column; gap:4px; min-width:0; text-align:left; }
.voice-home-entry .vc-entry-arrow { color:var(--p-accent); font-size:20px; }
.ug-voice-option { margin-top:22px; padding-top:20px; border-top:1px solid var(--p-line); }
.vc-preview-note { padding:12px 14px; border:1px solid var(--p-line); border-radius:10px; background:var(--p-raised); color:var(--p-muted); font-size:12px; line-height:1.7; }
.home-use-guide .vc-preview-note { margin-top:12px; }
[data-voice-preview][hidden], #voice-coach-error[hidden], #voice-coach-panel[hidden] { display:none !important; }
.vc-camera-alternative { width:100%; margin-top:12px; min-height:48px; font-size:12px; line-height:1.6; }
.vc-camera-alternative[hidden] { display:none !important; }

#screen-voice-setup { background:var(--p-bg); color:var(--p-ink); }
#screen-voice-setup > .setup-content { width:100%; max-width:600px; margin-inline:auto; padding:28px max(22px, env(safe-area-inset-left), env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)); background:var(--p-bg); scrollbar-color:var(--p-line) transparent; }
#screen-voice-setup .back-btn { color:var(--p-muted); border:1px solid var(--p-line); background:var(--p-paper); box-shadow:none; }
.vc-setup-heading { position:relative; padding-top:25px; padding-right:110px; }
.vc-setup-portrait { position:absolute; right:-7px; top:21px; width:118px; }
.vc-setup-portrait img { display:block; width:100%; height:auto; }
.vc-eyebrow { display:flex; align-items:center; gap:7px; margin:0 0 12px; color:var(--p-accent); font:700 11px/1.5 var(--p-font); letter-spacing:.025em; }
.vc-eyebrow .ui-icon { width:17px; height:17px; flex-shrink:0; }
.vc-setup-heading h2 { margin:0 0 14px; color:var(--p-ink); font:750 clamp(25px, 5vw, 31px)/1.4 var(--p-font); letter-spacing:-.035em; word-break:keep-all; overflow-wrap:anywhere; }
.vc-intro { margin:0; color:var(--p-muted); font-size:13px; line-height:1.9; }
.vc-steps { list-style:none; padding:0; margin:28px 0 22px; border-top:1px solid var(--p-line); }
.vc-steps li { display:flex; gap:17px; padding:18px 0; border-bottom:1px solid var(--p-line); }
.vc-step-number { padding-top:4px; color:var(--p-accent); font:600 11px/1.5 var(--p-font); letter-spacing:.07em; }
.vc-steps h3 { margin:0 0 6px; color:var(--p-ink); font-size:14px; line-height:1.6; font-weight:750; }
.vc-steps p { margin:0; color:var(--p-muted); font-size:12px; line-height:1.8; }
.vc-scope { padding:14px 17px; border-radius:12px; background:var(--p-raised); color:var(--p-muted); }
.vc-scope p { margin:0; font-size:11px; line-height:1.8; }
.vc-scope p + p { margin-top:8px; }
#screen-voice-setup .vc-start { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:52px; margin:22px 0 0; padding:13px 15px; color:var(--p-paper); background:var(--p-ink); border:1px solid var(--p-ink); box-shadow:none; font:700 13px/1.6 var(--p-font); }
.vc-error { color:var(--p-accent); margin:14px 0 0; font-size:12px; line-height:1.8; }
#screen-voice-setup button:focus-visible, #voice-coach-open:focus-visible { outline:3px solid var(--p-accent); outline-offset:3px; }

#screen-training.voice-only { background:var(--p-bg); color:var(--p-ink); }
#screen-training.voice-only :is(#camera, #capture-canvas, #fx-canvas, #ambient-bg, .gradient-top, .gradient-bottom, #ambient-btn, #switch-camera-btn, #aha-quest, #mini-char-wrap, #punch-fx, #rhythm-canvas, #game-score-panel, #game-score-flash, #distance-warning, #combo-flash, #fight-strip, #coach-corner) { display:none !important; }
.voice-coach-panel { position:absolute; z-index:4; inset:calc(108px + env(safe-area-inset-top, 0px)) 20px calc(200px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; text-align:center; pointer-events:none; }
.voice-coach-panel .vc-eyebrow { justify-content:center; margin:0; }
.vc-training-portrait { flex:0 1 auto; width:clamp(100px, 24vh, 220px); max-height:45%; min-height:0; aspect-ratio:1; }
.vc-training-portrait img { display:block; width:100%; height:100%; object-fit:contain; }
.vc-training-copy { max-width:440px; }
.vc-training-copy h2 { color:var(--p-ink); font:750 clamp(20px, 4.7vw, 27px)/1.5 var(--p-font); letter-spacing:-.025em; margin:0 0 9px; }
.vc-training-copy p { color:var(--p-ink); font-size:13px; line-height:1.8; margin:0; }
.vc-training-copy small { display:block; margin-top:8px; color:var(--p-muted); font-size:11px; line-height:1.7; }
#screen-training.voice-only #round-display { top:calc(15px + env(safe-area-inset-top, 0px)); color:var(--p-ink); background:var(--p-paper); border:1px solid var(--p-line); box-shadow:none; text-shadow:none; }
#screen-training.voice-only #round-display::before, #screen-training.voice-only #round-display::after { display:none; }
#screen-training.voice-only #round-label { color:var(--p-accent); }
#screen-training.voice-only #status { top:calc(72px + env(safe-area-inset-top, 0px)); background:var(--p-raised); color:var(--p-muted); border:1px solid var(--p-line); text-shadow:none; font-size:11px; }
#screen-training.voice-only #transcription { left:50%; right:auto; transform:translateX(-50%); width:calc(100% - 40px); max-width:600px; bottom:calc(112px + env(safe-area-inset-bottom, 0px)); max-height:6em; overflow-y:auto; border:1px solid var(--p-line); background:var(--p-paper); color:var(--p-ink); text-shadow:none; box-shadow:none; font-size:14px; line-height:1.7; }
#screen-training.voice-only #controls { max-width:420px; margin-inline:auto; justify-content:space-between; bottom:calc(28px + env(safe-area-inset-bottom, 0px)); }
#screen-training.voice-only .ctrl-btn:not(.stop-btn) { color:var(--p-ink); border:1px solid var(--p-line); background:var(--p-paper); box-shadow:none; }
#screen-training.voice-only .ctrl-btn.is-off { color:var(--p-muted); }

@media (max-width:380px) {
  #screen-voice-setup > .setup-content { padding-inline:18px; }
  .vc-setup-heading { padding-right:82px; }
  .vc-setup-portrait { width:90px; top:25px; }
  .vc-setup-heading h2 { font-size:24px; }
  .vc-training-copy h2 { font-size:19px; }
}
@media (max-height:650px) {
  .voice-coach-panel { gap:6px; top:100px; bottom:190px; }
  .vc-training-portrait { width:100px; max-height:32%; }
  .vc-training-copy h2 { font-size:19px; margin-bottom:5px; }
  .vc-training-copy small { margin-top:4px; }
}
@media (max-height:450px) and (min-width:600px) {
  .voice-coach-panel { top:98px; bottom:105px; flex-direction:row; gap:18px; }
  .voice-coach-panel .vc-eyebrow { display:none; }
  .vc-training-portrait { width:110px; max-height:100%; }
  .vc-training-copy { max-width:360px; text-align:left; }
  .vc-training-copy h2 { font-size:19px; }
  .vc-training-copy small { display:none; }
  #screen-training.voice-only #transcription { bottom:90px; max-height:3.4em; }
  #screen-training.voice-only #controls { bottom:18px; }
}

/* The optional one-line display also fits without a camera, including landscape.
   Include padding and both borders so the glyphs are not clipped. */
#screen-training.voice-only[data-captions="line"] #transcription {
  max-height:calc(1.5em + 14px); padding-top:6px; padding-bottom:6px;
  font-size:14px; line-height:1.5; scrollbar-width:none;
}