/* Training surfaces share the application scale; pixel scenes retain their art. */
body[data-active-page="roleplay"] .main-content,
.main-content:has(#page-roleplay.active) {
  padding: 24px !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}
#page-roleplay {
  --rp-body: var(--ux-body, 14px);
  --rp-reading: var(--ux-reading, 15px);
  --rp-small: var(--ux-small, 12px);
  --rp-title: var(--ux-title, 18px);
  --rp-inset: var(--ux-inset, 20px);
  --rp-control: var(--ux-control, 40px);
  min-width: 0;
}
#page-roleplay .roleplay-workbench-container { width: 100%; min-width: 0; }
#page-roleplay .roleplay-grid-arena {
  grid-template-columns: minmax(256px, 280px) minmax(0, 1fr) minmax(280px, 304px);
  gap: var(--ux-gap, 20px);
  transition: none;
}
#page-roleplay .roleplay-grid-arena.report-collapsed {
  grid-template-columns: minmax(256px, 280px) minmax(0, 1fr) !important;
}
#page-roleplay .roleplay-col { min-width: 0; }
#page-roleplay :is(.roleplay-panel-card, .roleplay-chat-card, .roleplay-report-card) {
  border-radius: var(--ux-radius, 14px);
  border-color: #dfe5ee;
  box-shadow: 0 3px 12px #0f172a05;
}
#page-roleplay :is(.roleplay-panel-header, .roleplay-col-setup .roleplay-panel-header) {
  min-height: 72px;
  padding: 16px;
  gap: 12px;
  background: #fff;
}
#page-roleplay .panel-title { font-size: var(--rp-title); line-height: 1.45; letter-spacing: 0; }
#page-roleplay .panel-subtitle { font-size: var(--rp-small); line-height: 1.5; color: #5b6b82; }
#page-roleplay .step-num-circle { width: 28px; height: 28px; font-size: var(--rp-small); }
#page-roleplay .roleplay-panel-header .btn-icon-subtle { width: 36px; height: 36px; flex: 0 0 36px; }
#page-roleplay .col-header-actions { gap: 8px; }
#page-roleplay .roleplay-setup-body {
  padding: 16px;
  display: flex;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
#page-roleplay .roleplay-setup-body .form-group { margin: 0 !important; }
#page-roleplay .roleplay-setup-body .form-label {
  margin: 0 0 8px !important;
  font-size: var(--rp-body) !important;
  line-height: 1.5;
  letter-spacing: 0;
}
#page-roleplay .rp-wrapped-select { min-height: 52px; border-radius: 10px; }
#page-roleplay .rp-select-full-label {
  min-height: 50px;
  padding: 10px 32px 10px 12px;
  gap: 4px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  justify-content: center;
}
#page-roleplay .rp-choice-name { font-size: var(--rp-body); line-height: 1.5; }
#page-roleplay .rp-choice-meta { font-size: var(--rp-small); line-height: 1.5; color: #5b6b82; }
#page-roleplay .rp-profile-extra { margin: 0; border-radius: 10px; }
#page-roleplay .rp-profile-extra > summary {
  min-height: 40px;
  padding: 8px 12px;
  font-size: var(--rp-body);
  line-height: 1.5;
  gap: 8px;
}
#page-roleplay .rp-profile-extra > summary::after { font-size: var(--rp-small); line-height: 1.5; }
#page-roleplay .rp-customer-profile-card { padding: 12px; gap: 12px; }
#page-roleplay .rp-cust-profile-top { gap: 8px; flex-wrap: wrap; }
#page-roleplay .rp-cust-name-badge { font-size: var(--rp-reading); line-height: 1.5; }
#page-roleplay :is(.rp-cust-risk-pill, .rp-cust-occ-row) { font-size: var(--rp-small); line-height: 1.5; }
#page-roleplay .rp-cust-occ-row { max-width: 100%; white-space: normal; }
#page-roleplay .rp-cust-meta-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
#page-roleplay .rp-cust-meta-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: baseline;
  padding: 8px;
  gap: 8px;
}
#page-roleplay .rp-cust-meta-item span { font-size: var(--rp-small); line-height: 1.5; }
#page-roleplay .rp-cust-meta-item strong { font-size: var(--rp-small); line-height: 1.5; overflow-wrap: anywhere; }
#page-roleplay .rp-cust-painpoint-box { padding: 10px; font-size: var(--rp-body); line-height: 1.65; }
#page-roleplay .rp-scenario-list { gap: 8px; }
#page-roleplay :is(.rp-scenario-card, .rp-scenario-card.active) { min-height: 44px; padding: 12px; gap: 8px; }
#page-roleplay .rp-scenario-icon { width: 24px; height: 24px; font-size: var(--rp-small); }
#page-roleplay .rp-scenario-name { font-size: var(--rp-body); line-height: 1.5; }
#page-roleplay .rp-scenario-desc { margin-top: 4px; font-size: var(--rp-small); line-height: 1.6; }
#page-roleplay .rp-difficulty-row { padding: 4px; gap: 4px; }
#page-roleplay .rp-diff-btn { min-height: 56px; padding: 8px 4px; gap: 4px; }
#page-roleplay :is(.diff-icon, .diff-name) { font-size: var(--rp-small); line-height: 1.5; }

/* The conversation is the primary column, with a wrapping action toolbar. */
#page-roleplay .roleplay-chat-header { min-height: 72px; padding: 16px; gap: 12px; background: #fff; }
#page-roleplay .chat-header-persona-meta { min-width: 0; gap: 12px; flex: 1 1 200px; }
#page-roleplay .chat-persona-text-meta { min-width: 0; }
#page-roleplay .chat-persona-name-row { gap: 8px; flex-wrap: wrap; }
#page-roleplay .chat-persona-name { font-size: var(--rp-title); line-height: 1.45; overflow-wrap: anywhere; }
#page-roleplay :is(.rp-engine-mode-tag, .chat-header-status-line, .rp-mood-badge, .rp-round-indicator .round-counter) {
  font-size: var(--rp-small);
  line-height: 1.5;
}
#page-roleplay .chat-header-status-line { flex-wrap: wrap; margin-top: 4px; color: #5b6b82; }
#page-roleplay .chat-header-controls,
#page-roleplay .roleplay-grid-arena:not(.report-collapsed) .chat-header-controls {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #edf0f5;
}
#page-roleplay .chat-header-controls .btn {
  height: auto;
  min-height: 36px;
  padding: 8px 12px;
  font-size: var(--rp-small);
  line-height: 1.5;
  white-space: normal;
  flex: 0 1 auto;
}
#page-roleplay .rp-coach-hint-strip { padding: 12px 16px; gap: 8px; align-items: flex-start; }
#page-roleplay .coach-hint-content { gap: 4px 8px; }
#page-roleplay .rp-coach-hint-strip .coach-hint-label { font-size: var(--rp-small); line-height: 1.5; }
#page-roleplay .rp-coach-hint-strip .coach-hint-text { font-size: var(--rp-body); line-height: 1.65; }
#page-roleplay .roleplay-messages-body {
  padding: var(--rp-inset);
  gap: 20px;
  min-height: 200px;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  background: #f6f8fb;
}
#page-roleplay .rp-msg-wrap { max-width: 92%; gap: 8px; }
#page-roleplay .rp-msg-avatar { width: 32px; height: 32px; flex: 0 0 32px; font-size: var(--rp-small); }
#page-roleplay .rp-msg-content-box { min-width: 0; }
#page-roleplay .rp-msg-content-box > div:first-child { flex-wrap: wrap; row-gap: 4px !important; }
#page-roleplay .btn-msg-tts { min-height: 28px; padding: 4px 8px; font-size: var(--rp-small); line-height: 1.5; }
#page-roleplay .rp-msg-bubble {
  padding: 12px 16px;
  font-size: var(--rp-reading);
  line-height: 1.75;
  word-break: normal;
  overflow-wrap: anywhere;
}
#page-roleplay .rp-msg-bubble p { margin: 0; line-height: inherit; }
#page-roleplay :is(.rp-msg-name, .rp-msg-time, .rp-msg-meta, .rp-msg-sender-name) { font-size: var(--rp-small); line-height: 1.5; }
#page-roleplay .rp-inspiration-bar { padding: 10px 16px; gap: 8px; flex-wrap: wrap; }
#page-roleplay .insp-title { font-size: var(--rp-small); line-height: 1.5; }
#page-roleplay .insp-chips-scroll { min-width: 0; flex-wrap: wrap; gap: 8px; overflow: visible; }
#page-roleplay .rp-insp-chip { min-height: 32px; padding: 6px 10px; font-size: var(--rp-small); line-height: 1.5; }
#page-roleplay .roleplay-input-box { padding: 12px 16px 16px !important; gap: 12px !important; }
#page-roleplay .input-actions-bar { flex-wrap: wrap; gap: 8px; align-items: center; }
#page-roleplay .input-actions-left { gap: 8px; flex-wrap: wrap; }
#page-roleplay .btn-tool-mini { height: auto; min-height: 32px; padding: 6px 10px; font-size: var(--rp-small); line-height: 1.5; }
#page-roleplay .input-shortcut-hint { font-size: var(--rp-small); line-height: 1.5; color: #5b6b82; white-space: normal; }
#page-roleplay .input-textarea-row { align-items: flex-end; gap: 12px; }
#page-roleplay .rp-chat-textarea { min-width: 0; min-height: 76px; max-height: 180px; padding: 12px; font-size: var(--rp-reading); line-height: 1.65; resize: vertical; }
#page-roleplay .rp-send-btn { height: auto; min-height: var(--rp-control); padding: 10px 16px !important; font-size: var(--rp-body) !important; line-height: 1.5; flex-shrink: 0; }

/* Feedback text follows the same readable scale instead of dense tiny labels. */
#page-roleplay :is(.rp-report-in-progress, .rp-report-evaluated) {
  padding: 16px;
  gap: 16px;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
#page-roleplay .rp-report-in-progress h4 { margin: 0; font-size: var(--rp-reading); line-height: 1.6; }
#page-roleplay .rp-report-in-progress > p { margin: 0; font-size: var(--rp-body); line-height: 1.7; color: #5b6b82; }
#page-roleplay .rp-live-dimension-guide { gap: 12px; width: 100%; }
#page-roleplay .live-dim-item { padding: 12px; gap: 8px; }
#page-roleplay .dim-bullet { width: 24px; height: 24px; font-size: var(--rp-small); }
#page-roleplay .dim-text-wrap { min-width: 0; }
#page-roleplay .dim-text-wrap strong { font-size: var(--rp-body); line-height: 1.5; }
#page-roleplay .dim-text-wrap span { font-size: var(--rp-small); line-height: 1.65; color: #5b6b82; }
#page-roleplay .rp-btn-early-score { margin-top: 8px; height: auto; min-height: var(--rp-control); padding: 10px 12px; font-size: var(--rp-body); line-height: 1.5; white-space: normal; }
#page-roleplay .rp-score-summary-header { padding: 16px; gap: 12px; flex-wrap: wrap; }
#page-roleplay .rp-score-circle-dial { width: 64px; height: 64px; flex: 0 0 64px; }
#page-roleplay .rp-score-circle-dial .score-number { font-size: 24px; line-height: 1.15; }
#page-roleplay .rp-score-circle-dial .score-unit { font-size: var(--rp-small); line-height: 1.5; }
#page-roleplay .rp-grade-box { min-width: 0; flex: 1 1 140px; }
#page-roleplay .rp-grade-main { font-size: var(--rp-reading); line-height: 1.5; }
#page-roleplay :is(.rp-grade-source-tag, .rp-grade-meta) { font-size: var(--rp-small); line-height: 1.65; white-space: normal; }
#page-roleplay .rp-radar-container > summary { min-height: 40px; padding: 10px 12px; font-size: var(--rp-body); line-height: 1.5; gap: 8px; }
#page-roleplay .rp-radar-container > summary::after { font-size: var(--rp-small); line-height: 1.5; }
#page-roleplay .rp-dim-bars-grid { padding: 12px; gap: 12px; }
#page-roleplay .rp-dim-bar-header { gap: 8px; font-size: var(--rp-small); line-height: 1.5; }
#page-roleplay .rp-diagnosis-sections { gap: 12px; }
#page-roleplay .diagnosis-card { padding: 12px; }
#page-roleplay .diagnosis-header { margin-bottom: 8px; font-size: var(--rp-body); line-height: 1.5; }
#page-roleplay :is(.diagnosis-list, .golden-script-content, .compliance-verdict-text) { font-size: var(--rp-body); line-height: 1.75; overflow-wrap: anywhere; }
#page-roleplay .diagnosis-list { margin: 0; padding-left: 20px; }
#page-roleplay .diagnosis-list li + li { margin-top: 8px; }
#page-roleplay .rp-report-actions .btn { height: auto; min-height: var(--rp-control); font-size: var(--rp-body); line-height: 1.5; white-space: normal; padding: 10px; }

/* The full-screen call is a separate dark surface, never a generic modal card. */
#rpVideoCallModal { font-size: var(--ux-body, 14px); }
#rpVideoCallModal .rp-video-call-viewport { width: 100%; height: 100dvh; max-height: 100dvh; min-height: 0; }
#rpVideoCallModal .rp-video-top-bar { height: auto; min-height: 64px; flex-shrink: 0; padding: 12px 20px; gap: 12px; flex-wrap: wrap; }
#rpVideoCallModal :is(.rp-video-top-left, .rp-video-top-center, .rp-video-top-right) { min-width: 0; }
#rpVideoCallModal .rp-video-top-left { flex-wrap: wrap; gap: 8px; }
#rpVideoCallModal :is(.rp-video-brand-pill, .rp-video-timer-chip, .rp-video-client-pill, .rp-video-mood-pill, .rp-video-network-quality .net-text) { font-size: var(--ux-small, 12px); line-height: 1.5; }
#rpVideoCallModal .rp-video-client-pill { flex-wrap: wrap; justify-content: center; gap: 8px; }
#rpVideoCallModal .rp-video-client-pill .client-name { font-size: var(--ux-body, 14px); line-height: 1.5; }
#rpVideoCallModal .btn-video-top-close { width: 40px; height: 40px; flex: 0 0 40px; }
#rpVideoCallModal .rp-video-main-stage { min-height: 0; }
#rpVideoCallModal .rp-persona-screen-name { font-size: clamp(20px, 2vw, 28px); line-height: 1.45; }
#rpVideoCallModal .rp-persona-screen-scenario { font-size: var(--ux-body, 14px); line-height: 1.65; white-space: normal; overflow-wrap: anywhere; }
#rpVideoCallModal .rp-video-controls-dock {
  height: auto;
  min-height: 88px;
  flex-shrink: 0;
  gap: 12px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  flex-wrap: wrap;
}
#rpVideoCallModal :is(.btn-dock-control, .btn-dock-speak-primary, .btn-dock-hangup) { min-height: 60px; padding: 8px 12px; gap: 6px; flex-shrink: 0; }
#rpVideoCallModal :is(.dock-label, .speak-primary-label, .hangup-label) { font-size: var(--ux-small, 12px); line-height: 1.5; }
#rpVideoCallModal .rp-live-subtitles-bar { width: min(920px, calc(100% - 40px)); padding: 12px 16px; max-height: 160px; overflow-y: auto; align-items: flex-start; }
#rpVideoCallModal .subtitles-speaker-tag { font-size: var(--ux-small, 12px); line-height: 1.5; white-space: normal; }
#rpVideoCallModal .subtitles-speaker-badge { font-size: var(--ux-small, 12px); line-height: 1.5; white-space: normal; }
#rpVideoCallModal .subtitles-text { font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
#rpVideoCallModal .rp-video-text-drawer { width: min(860px, calc(100% - 40px)); padding: 12px; }
#rpVideoCallModal .video-text-input-wrap { align-items: flex-end; gap: 8px; }
#rpVideoCallModal .video-text-input-wrap :is(input, textarea) { font-size: 16px; line-height: 1.6; min-height: 44px; min-width: 0; }
#rpVideoCallModal .video-text-input-wrap .btn { min-height: 44px; font-size: var(--ux-body, 14px); }
#rpVideoCallModal :is(.prompter-hud-title, .tip-tag) { font-size: var(--ux-small, 12px); line-height: 1.5; }
#rpVideoCallModal :is(.tip-text, .prompter-gold-box) { font-size: var(--ux-body, 14px); line-height: 1.7; }
#rpDeviceGuideModal :is(.rp-guide-title) { font-size: var(--ux-heading, 24px); line-height: 1.45; }
#rpDeviceGuideModal :is(.rp-guide-subtitle, .rp-guide-perm-desc) { font-size: var(--ux-body, 14px); line-height: 1.7; }
#rpDeviceGuideModal .rp-guide-perm-name { font-size: var(--ux-reading, 15px); line-height: 1.5; }
#rpDeviceGuideModal :is(.rp-guide-badge, .rp-perm-tag, .rp-guide-perm-tag-step, .rp-guide-cust-tag, .rp-guide-sc-text) { font-size: var(--ux-small, 12px); line-height: 1.6; }
#rpDeviceGuideModal .rp-guide-perm-row { gap: 12px; padding: 16px; align-items: flex-start; }
#rpDeviceGuideModal .rp-guide-perm-meta { min-width: 0; }
#rpDeviceGuideModal .rp-guide-perm-action { flex-shrink: 0; }
#rpDeviceGuideModal .rp-device-guide-footer { gap: 12px; flex-wrap: wrap; }
#rpDeviceGuideModal .rp-device-guide-footer button { min-height: 40px; font-size: var(--ux-body, 14px); line-height: 1.5; }

/* Game framing is quiet and compact so the corridor remains the first scene. */
#page-game .pixel-map-card { padding: var(--ux-inset, 20px); margin-bottom: 20px; border-radius: var(--ux-radius, 14px); }
#page-game .pixel-map-header { gap: 12px; margin-bottom: 16px; }
#page-game .pixel-map-title { font-size: var(--ux-title, 18px); line-height: 1.5; }
#page-game .pixel-coord-chip { font-size: var(--ux-small, 12px); line-height: 1.65; padding: 8px 12px; white-space: normal; max-width: 100%; }
#page-game .game-restart-btn { min-height: 40px; padding: 8px 12px; font-size: var(--ux-body, 14px); line-height: 1.5; }
#page-game .pixel-map-controls-row { margin-top: 16px; padding-top: 16px; gap: 16px; }
#page-game .pixel-hud-left { min-width: 0; gap: 12px; }
#page-game .pixel-keyboard-hint { font-size: var(--ux-small, 12px); line-height: 1.65; }
#page-game .pixel-zone-shortcut-bar { gap: 8px; }
#page-game .pixel-zone-shortcut-bar .zone-shortcut-pill { min-height: 40px; padding: 8px 12px; font-size: var(--ux-small, 12px); line-height: 1.5; }
#page-game .pixel-controller-panel { gap: 16px; }
#page-game .game-scene-banner { padding: 16px; gap: 12px; flex-wrap: wrap; }
#page-game .scene-location-pill { font-size: var(--ux-body, 14px); line-height: 1.5; white-space: normal; }
#page-game .scene-turn-tag { font-size: var(--ux-small, 12px); line-height: 1.5; }
#page-game .game-scene-back-btn { min-height: 40px; padding: 8px 12px; font-size: var(--ux-body, 14px); line-height: 1.5; }
#page-game .game-story-content { padding: var(--ux-inset, 20px); }
#page-game .game-scenario-title-box { margin-bottom: 16px; }
#page-game .scenario-heading { font-size: var(--ux-title, 18px); line-height: 1.5; }
#page-game .scenario-chapter-label { font-size: var(--ux-small, 12px); line-height: 1.5; }
#page-game .pixel-room-dialogue { gap: 24px; margin-bottom: 24px; padding: 20px; }
#page-game #gameNpcName { font-size: var(--ux-reading, 15px); line-height: 1.5; }
#page-game #gameNpcRole { font-size: var(--ux-small, 12px); line-height: 1.65; }
#page-game .pixel-room-dialogue .npc-dialogue-bubble { padding: 16px; font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
#page-game .pixel-room-step { font-size: var(--ux-small, 12px); line-height: 1.5; }
#page-game .game-choices-title { margin-bottom: 12px; font-size: var(--ux-reading, 15px); line-height: 1.5; }
#page-game :is(.game-choices-grid, .followup-choices-grid) { gap: 12px; }
#page-game :is(.game-choice-btn, .followup-choice-btn) { min-height: 56px; padding: 16px; gap: 12px; }
#page-game .choice-desc-text { font-size: var(--ux-reading, 15px); line-height: 1.75; overflow-wrap: anywhere; }
#page-game .choice-key-badge { font-size: var(--ux-small, 12px); line-height: 1.5; }
#page-game .pixel-room-clues > summary { min-height: 40px; font-size: var(--ux-body, 14px); line-height: 1.6; }
#page-game .scenario-context-text { padding: 16px; font-size: var(--ux-body, 14px); line-height: 1.75; }
#page-game .game-feedback-container { margin-top: 16px; padding: 20px; }
#page-game .feedback-title { font-size: var(--ux-title, 18px); line-height: 1.5; }
#page-game .feedback-narrative { font-size: var(--ux-reading, 15px); line-height: 1.75; }
#page-game .feedback-next-btn { min-height: 44px; padding: 12px 16px; font-size: var(--ux-body, 14px); line-height: 1.5; }

@media (min-width: 769px) and (max-width: 1180px) {
  #page-roleplay .roleplay-grid-arena { grid-template-columns: 232px minmax(0, 1fr) 260px; gap: 16px; }
  #page-roleplay .roleplay-grid-arena.report-collapsed { grid-template-columns: 232px minmax(0, 1fr) !important; }
  #page-roleplay .roleplay-grid-arena:not(.report-collapsed),
  #page-roleplay .roleplay-grid-arena.report-open { grid-template-columns: minmax(0, 1fr) 280px !important; }
  #page-roleplay .roleplay-grid-arena:not(.report-collapsed) .roleplay-col-setup { display: none !important; }
  #page-roleplay .roleplay-grid-arena:not(.report-collapsed) .roleplay-col-report { display: flex !important; }
  #page-roleplay :is(.roleplay-panel-header, .roleplay-col-setup .roleplay-panel-header, .roleplay-chat-header) { padding: 12px; }
  #page-roleplay .roleplay-setup-body { padding: 12px; }
  #page-roleplay .chat-header-controls .btn { padding: 8px; }
}
@media (min-width: 769px) and (max-width: 960px) {
  #page-roleplay .roleplay-grid-arena { grid-template-columns: 232px minmax(0, 1fr); }
  #page-roleplay .roleplay-grid-arena.report-open,
  #page-roleplay .roleplay-grid-arena.report-collapsed.report-open { grid-template-columns: minmax(0, 1fr) 280px !important; }
}
@media (max-width: 768px) {
  body[data-active-page="roleplay"] .main-content,
  .main-content:has(#page-roleplay.active) {
    padding: calc(var(--header-height, 56px) + var(--safe-area-top, 0px) + 12px) 12px calc(var(--bottom-nav-height, 64px) + var(--safe-area-bottom, 0px) + 24px) !important;
    height: auto !important;
    max-height: none !important;
    min-height: 100dvh !important;
    flex: 0 0 auto !important;
    overflow-y: visible !important;
  }
  #page-roleplay, #page-roleplay.active { height: auto !important; max-height: none !important; min-height: 0 !important; flex: 0 0 auto !important; overflow: visible !important; }
  #page-roleplay .roleplay-workbench-container { height: auto !important; max-height: none !important; flex: 0 0 auto !important; overflow: visible !important; }
  #page-roleplay .roleplay-grid-arena { height: auto !important; max-height: none !important; flex: 0 0 auto !important; overflow: visible !important; gap: 12px !important; }
  #page-roleplay .roleplay-col, #page-roleplay .roleplay-col.mob-active { height: auto !important; max-height: none !important; min-width: 0; flex: 0 0 auto !important; overflow: visible !important; }
  #page-roleplay :is(.roleplay-panel-card, .roleplay-report-card) { height: auto !important; max-height: none; flex: 0 0 auto !important; overflow: visible; }
  #page-roleplay :is(.roleplay-setup-body, .rp-report-in-progress, .rp-report-evaluated) { overflow-y: visible; scrollbar-gutter: auto; }
  #page-roleplay .roleplay-mobile-tabs { margin-bottom: 12px !important; padding: 4px !important; gap: 4px !important; }
  #page-roleplay .rp-mob-tab-btn { min-height: 44px; padding: 8px 4px !important; font-size: 14px !important; line-height: 1.5; gap: 6px !important; }
  #page-roleplay .rp-mob-tab-btn .tab-step-num { width: 22px !important; height: 22px !important; font-size: 12px !important; }
  #page-roleplay :is(.roleplay-panel-header, .roleplay-col-setup .roleplay-panel-header) { min-height: 72px; padding: 16px; }
  #page-roleplay .roleplay-panel-header .btn-icon-subtle { width: 44px; height: 44px; flex-basis: 44px; }
  #page-roleplay .roleplay-setup-body { padding: 16px; gap: 20px; }
  #page-roleplay :is(.rp-choice-name, .form-input, .rp-chat-textarea) { font-size: 16px; }
  #page-roleplay .rp-wrapped-select { min-height: 56px; }
  #page-roleplay .rp-select-full-label { min-height: 54px; }
  #page-roleplay .rp-profile-extra > summary { min-height: 44px; }
  #page-roleplay .rp-cust-meta-row { grid-template-columns: minmax(0, 1fr); }
  #page-roleplay .roleplay-chat-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    overflow: hidden;
  }
  #page-roleplay .roleplay-chat-header { padding: 16px !important; gap: 12px !important; }
  #page-roleplay .chat-header-center-info { order: 0 !important; width: auto !important; }
  #page-roleplay .chat-header-persona-meta { flex-basis: 220px; }
  #page-roleplay .chat-header-controls { width: 100%; gap: 8px; }
  #page-roleplay .chat-header-controls .btn { min-height: 44px; flex: 1 1 auto; padding: 10px 12px; }
  #page-roleplay .rp-coach-hint-strip { padding: 12px 16px !important; max-height: none !important; overflow-y: visible !important; line-height: 1.65 !important; }
  #page-roleplay .roleplay-messages-body {
    flex: none !important;
    height: clamp(300px, 46dvh, 520px);
    min-height: 300px !important;
    padding: 16px 12px !important;
    overflow-y: auto !important;
  }
  #page-roleplay .rp-msg-wrap { max-width: 100% !important; }
  #page-roleplay .rp-msg-bubble { padding: 12px !important; font-size: 16px !important; line-height: 1.75 !important; }
  #page-roleplay .rp-inspiration-bar { padding: 12px; }
  #page-roleplay .rp-insp-chip { min-height: 44px; padding: 10px 12px; }
  #page-roleplay .roleplay-input-box { padding: 12px !important; }
  #page-roleplay .btn-tool-mini { min-height: 44px; padding: 10px 12px; }
  #page-roleplay .input-shortcut-hint { font-size: 12px; }
  #page-roleplay .input-textarea-row { gap: 8px; }
  #page-roleplay .rp-chat-textarea { min-height: 88px; font-size: 16px; }
  #page-roleplay .rp-send-btn { min-height: 44px; padding: 10px 12px !important; }
  #page-roleplay :is(.rp-btn-early-score, .rp-report-actions .btn, .rp-radar-container > summary) { min-height: 44px; }
  #rpVideoCallModal .rp-video-call-viewport { height: 100dvh !important; max-height: 100dvh !important; }
  #rpVideoCallModal .rp-video-top-bar { padding: 8px 12px; gap: 8px; }
  #rpVideoCallModal .rp-video-top-left { flex: 1 1 200px; }
  #rpVideoCallModal .rp-video-top-center { order: 3; flex: 1 1 100%; }
  #rpVideoCallModal .rp-video-brand-pill { background: none; border: 0; padding: 0; }
  #rpVideoCallModal .btn-video-top-close { width: 44px; height: 44px; flex-basis: 44px; }
  #rpVideoCallModal .rp-video-controls-dock { height: auto !important; min-height: 148px; gap: 8px !important; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #rpVideoCallModal :is(.btn-dock-control, .btn-dock-speak-primary, .btn-dock-hangup) { min-width: 0 !important; min-height: 60px; width: 100%; padding: 6px 4px !important; }
  #rpVideoCallModal .rp-live-subtitles-bar { width: calc(100% - 24px); padding: 12px; bottom: 12px; gap: 8px; flex-wrap: wrap; max-height: min(30dvh, 180px); }
  #rpVideoCallModal .rp-video-text-drawer { width: calc(100% - 24px); bottom: 12px; }
  #rpVideoCallModal .rp-persona-screen-scenario { font-size: 12px; }
  #rpVideoCallModal .rp-persona-status-box { max-width: calc(100% - 24px); }
  #rpDeviceGuideModal .rp-guide-perm-row { flex-wrap: wrap; gap: 12px; }
  #rpDeviceGuideModal .rp-guide-perm-meta { flex: 1 1 180px; }
  #rpDeviceGuideModal .rp-guide-perm-action { flex: 1 1 100%; }
  #rpDeviceGuideModal .rp-device-guide-footer button { min-height: 44px; }
  #page-game .pixel-map-card { padding: 12px; }
  #page-game .pixel-map-header { gap: 12px; margin-bottom: 12px; }
  #page-game .pixel-map-title { font-size: 18px; }
  #page-game .pixel-map-controls-row { gap: 16px; margin-top: 16px; padding-top: 16px; }
  #page-game .pixel-zone-shortcut-bar .zone-shortcut-pill { min-height: 44px; }
  #page-game :is(.game-restart-btn, .game-scene-back-btn) { min-height: 44px; }
  #page-game .pixel-dpad-wrap { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); }
  #page-game .dpad-btn { width: 44px; height: 44px; }
  #page-game .pixel-action-btn { min-width: 72px; min-height: 88px; }
  #page-game .game-story-content { padding: 12px; }
  #page-game .pixel-room-dialogue { grid-template-columns: minmax(0, 1fr) 100px; align-items: start; gap: 12px; padding: 12px; margin-bottom: 20px; }
  #page-game .pixel-room-conversation { min-width: 0; }
  #page-game .pixel-room-dialogue .npc-dialogue-bubble { padding: 12px; font-size: 15px; line-height: 1.75; }
  #page-game .pixel-room-speaker { gap: 4px; margin-bottom: 8px; }
  #page-game :is(.game-choice-btn, .followup-choice-btn) { min-height: 56px; padding: 12px; gap: 8px; }
  #page-game .pixel-room-clues > summary { min-height: 44px; }
  #page-game .game-feedback-container { padding: 16px; }
}
@media (max-width: 390px) {
  #page-game .pixel-room-dialogue { grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; padding: 8px; }
  #page-game .pixel-room-dialogue .npc-dialogue-bubble { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #rpVideoCallModal :is(.btn-dock-speak-primary, .btn-dock-control) { animation: none !important; transition: none; }
  #page-roleplay :is(.roleplay-grid-arena, .rp-scenario-card, .rp-diff-btn) { transition: none; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  body[data-active-page="roleplay"] .main-content,
  .main-content:has(#page-roleplay.active) {
    padding: 20px !important;
  }
}