/* Shared screen theme. Keep the offline-ui-theme block in wolf-offline.html
   identical to this file so the downloaded simulator stays self-contained. */
:root {
  color-scheme: dark;
  --bg: #111c32;
  --panel: #1b2b45;
  --panel-2: #253b5b;
  --field: #132239;
  --line: #3f587a;
  --line-soft: #2d4261;
  --card: #27415f;
  --card-hover: #2e4d6f;
  --card-edge: #4c6e94;
  --control-edge: #86a7cc;
  --card-shadow: 0 3px 10px #07132626;
  --muted: #b0c5df;
  --text: #f0f5ff;
  --accent: #59e2cc;
  --cyan: #73d4ff;
  --purple: #bea0ff;
  --green: #64e5af;
  --orange: #ffbd77;
  --red: #ff92aa;
  --radius: 14px;
  --motion-press: 90ms;
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-gentle: 320ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

::selection { background: #286d7d; color: #f4faf7; }
:where([hidden]:not([hidden="until-found"])), .simulator-page .hidden { display: none !important; }
:where(button, a, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:where(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); }
:where(input, select, textarea) { min-width: 0; }
:where(input, textarea)::placeholder { color: #96b0ce; opacity: 1; }
:where(select) option { color: var(--text); background: var(--panel); }
:where(button, input, select, textarea) { font-family: inherit; }
:where(button, label, a) { -webkit-tap-highlight-color: transparent; }
.eyebrow { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .16em; line-height: 1.5; }

/* Filled, spaced cards keep each record distinct from its surrounding group. */
.record-panel { --record-inset: 22px; min-width: 0; padding: var(--record-inset); border: 1px solid var(--card-edge); border-radius: var(--radius); background: var(--panel); box-shadow: var(--card-shadow); }
.record-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.record-panel > .record-heading { margin: calc(-1 * var(--record-inset)) calc(-1 * var(--record-inset)) 18px; padding: 18px var(--record-inset); border-bottom: 1px solid var(--card-edge); border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(110deg, #28546e, #2b3d61); }
.record-heading .eyebrow { color: var(--cyan); }
.record-heading h2, .record-heading h3 { margin: 4px 0 0; color: var(--text); font-size: 17px; font-weight: 650; line-height: 1.5; }
.record-heading p, .record-description { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.record-count { align-self: center; padding: 4px 8px; border: 1px solid #42817e; border-radius: 6px; background: #194a53; color: #a1ffeb; font: 600 12px/1.5 ui-monospace, monospace; }
.record-empty { padding: 28px 12px; color: var(--muted); font-size: 13px; text-align: center; line-height: 1.8; }
.record-progress { margin: 8px 0 12px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.record-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.record-actions button { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.record-toolbar { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); }
.record-toolbar > .record-description { margin: 0; }
.review-workspace { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr); gap: 18px; margin-top: 24px; align-items: start; }
.review-history { margin-top: 18px; }
.timeline-panel { min-width: 0; }
.timeline-list { display: grid; align-content: start; gap: 12px; max-height: 440px; padding: 4px 6px 6px 2px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--card-edge) transparent; }
.timeline-row { --event-color: var(--muted); position: relative; min-width: 0; padding: 14px 14px 15px; border: 1px solid var(--card-edge); border-left: 3px solid var(--event-color); border-radius: 10px; background: var(--card); box-shadow: var(--card-shadow); overflow-wrap: anywhere; transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); }
.timeline-row.timeline-current { border-color: #64d8c7; border-left-color: var(--accent); background: #245464; box-shadow: inset 0 0 0 1px #64d8c71a, var(--card-shadow); }
.timeline-row[data-kind="phase"], .timeline-row[data-kind="night"] { --event-color: var(--purple); }
.timeline-row[data-kind="day"] { --event-color: var(--orange); }
.timeline-row[data-kind*="skill"], .timeline-row[data-kind="input"], .timeline-row[data-kind="scarlet-children"] { --event-color: var(--cyan); }
.timeline-row[data-kind*="vote"] { --event-color: var(--accent); }
.timeline-row[data-kind="death"] { --event-color: var(--red); }
.timeline-row[data-kind="system"], .timeline-row[data-kind="speech"], .timeline-row[data-kind="last-words"] { --event-color: var(--cyan); }
.timeline-row[data-kind="good"], .timeline-row[data-kind="result"] { --event-color: var(--green); }
.timeline-row[data-kind="wolf"] { --event-color: var(--red); }
.timeline-row[data-kind="third"] { --event-color: var(--purple); }
.timeline-row[data-kind="police"] { --event-color: var(--orange); }
.timeline-event-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.timeline-event-head strong { color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.6; }
.timeline-event-head time { flex: none; color: var(--muted); font: 11px/1.6 ui-monospace, monospace; }
.timeline-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.event-kind { padding: 2px 7px; border-radius: 5px; background: #101e3380; color: var(--event-color); font-weight: 600; }
.timeline-body { margin-top: 6px; color: #e0ebfa; font-size: 14px; line-height: 1.8; }
.timeline-state { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: #10203980; color: #c4d8ee; font-size: 11px; line-height: 1.7; }
.timeline-state > span { max-width: 100%; overflow-wrap: anywhere; }
.timeline-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 8px; }
.timeline-controls select { flex: 1 1 150px; width: auto; min-width: 0; }
.timeline-controls input { flex: 0 1 110px; width: 110px; min-width: 0; }
.timeline-controls :is(input, select, button) { min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--text); font-size: 13px; line-height: 1.5; transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.timeline-controls button { flex: none; cursor: pointer; }
.timeline-controls button:hover:not(:disabled) { background: var(--panel-2); border-color: #47666b; }
.timeline-controls button:disabled { opacity: .4; cursor: not-allowed; }
.replay-export-groups { display: grid; gap: 7px; }
.replay-export-groups .actions { align-items: center; gap: 5px; margin-top: 0; }
.replay-export-groups .btn { min-height: 32px; padding: 5px 8px; font-size: 11px; }
.checkpoint-panel, .discarded-panel { padding-top: 2px; }
.checkpoint-list { display: grid; align-content: start; gap: 10px; max-height: 340px; margin-top: 12px; padding: 4px 6px 6px 2px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--card-edge) transparent; }
.checkpoint-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 10px; border: 1px solid var(--card-edge); border-radius: 10px; background: var(--card); box-shadow: var(--card-shadow); transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); }
.checkpoint-index { display: grid; place-items: center; min-height: 28px; border: 1px solid #517ca5; border-radius: 7px; background: #18304d; color: #a8e5ff; font: 600 11px/1.5 ui-monospace, monospace; transition: background-color var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease); }
.checkpoint-row > div { min-width: 0; }
.checkpoint-row strong { display: block; color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.checkpoint-row .checkpoint-meta { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.checkpoint-row button { white-space: nowrap; min-width: 48px; min-height: 36px; padding: 7px 10px; }
.discarded-branch { margin-top: 10px; padding: 12px; border: 1px solid #80516b; border-radius: 9px; background: #3e2b45; }
.discarded-branch summary { color: var(--red); font-size: 12px; line-height: 1.7; cursor: pointer; overflow-wrap: anywhere; }
.discarded-events { display: grid; gap: 8px; max-height: 260px; margin-top: 12px; overflow: auto; }
.discarded-events > div { padding: 9px 10px; border: 1px solid #785470; border-left: 3px solid var(--red); border-radius: 7px; background: #2b263d; overflow-wrap: anywhere; }
.discarded-events strong { color: #e5bec4; font-size: 12px; }
.discarded-events span { display: block; color: var(--muted); font-size: 11px; }
.discarded-heading { margin-top: 18px; color: var(--red); font-size: 12px; font-weight: 600; }

/* The rule simulator shares the same surfaces as the room workspace. */
body.simulator-page { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font: 14px/1.6 var(--font-ui); }
body.simulator-page::before { background: radial-gradient(ellipse at 8% 0%, #197a8238, transparent 48%), radial-gradient(ellipse at 96% 12%, #6554c333, transparent 50%); }
.simulator-shell { width: 100%; max-width: 1200px; margin: 0 auto; padding: 32px 24px 52px; }
.sim-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.sim-header h1 { margin: 5px 0 0; color: var(--text); background: none; -webkit-text-fill-color: currentColor; filter: none; animation: none; font-size: clamp(22px, 3vw, 29px); line-height: 1.4; font-weight: 650; letter-spacing: .01em; }
.sim-header p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.sim-mode { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 11px; letter-spacing: .03em; }
.sim-mode::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.simulator-shell #configPanel { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 12px 36px #00000014; backdrop-filter: none; }
.simulator-shell #configPanel::before, .simulator-shell .terminal::before { display: none; }
.sim-section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.sim-section-heading h2 { margin: 0; color: var(--text); font-size: 18px; font-weight: 650; }
.sim-section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.section-index { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid #368882; border-radius: 8px; color: var(--accent); background: #225963; font: 12px/1 ui-monospace, monospace; }
.config-templates { padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line-soft); }
.config-templates > label { font-size: 13px; color: var(--text); }
.simulator-shell #templateSearch { padding: 10px 12px; font-size: 12px; }
.simulator-shell #templateSearchResults { border-color: var(--line); border-radius: 10px; background: var(--field); }
.simulator-shell #tabButtons { gap: 3px; border: 0; }
.simulator-shell .tab-btn { min-height: 36px; padding: 6px 11px; border: 1px solid transparent; border-radius: 7px; color: var(--muted); font-size: 12px; cursor: pointer; transition: background-color var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease); }
.simulator-shell .tab-btn.border-purple-500 { color: #c5fff4; border-color: #409b93; background: #24666a; }
.simulator-shell .tab-btn:hover { color: var(--text); background: var(--panel-2); }
.simulator-shell .role-library { margin-bottom: 24px; border: 1px solid var(--card-edge); border-radius: 10px; background: var(--field); }
.role-library > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border-radius: 9px; background: var(--card); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; transition: background-color var(--motion-fast) var(--motion-ease); }
.role-library[open] > summary { border-bottom: 1px solid var(--card-edge); border-radius: 9px 9px 0 0; }
.role-library > summary::-webkit-details-marker { display: none; }
.role-library > summary::after { content: '⌄'; margin-left: auto; color: var(--cyan); font-size: 18px; line-height: 1; transform: rotate(-90deg); transition: transform var(--motion-gentle) var(--motion-ease); }
.role-library[open] > summary::after { transform: rotate(0); }
.role-library > summary span { color: var(--muted); font-size: 11px; font-weight: 400; }
.role-catalog { max-height: 300px; padding: 12px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--card-edge) transparent; scrollbar-gutter: stable; }
.simulator-shell .collapse-btn { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); }
.simulator-shell .collapse-btn::after { content: '−'; margin-left: auto; color: var(--muted); font-size: 17px; }
.simulator-shell .collapse-btn[aria-expanded="false"]::after { content: '+'; }
.simulator-shell .collapse-btn:hover { transform: none; }
.simulator-shell .collapse-btn span { color: var(--muted); font-size: 11px; font-weight: 400; }
.simulator-shell .collapse-content { gap: 7px; margin-bottom: 10px; transition: none; }
.simulator-shell .collapse-content:not(.open) { display: none; }
.simulator-shell .role-tag { min-height: 36px; padding: 6px 10px; margin: 0; border-radius: 7px; font: 500 13px/1.6 var(--font-ui); letter-spacing: 0; box-shadow: none; transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), filter var(--motion-fast) var(--motion-ease); }
.simulator-shell .role-tag::before, .simulator-shell .action-btn::before { display: none; }
.simulator-shell .role-tag:hover { transform: none; box-shadow: none; filter: brightness(1.18); }
.simulator-shell .role-good { background: #134c45; border: 1px solid #258875; color: #c2fff0; }
.simulator-shell .role-wolf { background: #5a293c; border: 1px solid #ae5168; color: #ffd3df; }
.simulator-shell .role-third { background: #453568; border: 1px solid #8a69b8; color: #e6d4ff; }
.simulator-shell .role-library .text-green-400 { color: var(--green); }
.simulator-shell .role-library .text-red-400 { color: var(--red); }
.simulator-shell .role-library .text-pink-400 { color: var(--purple); }
.simulator-shell .selected-role-panel { padding: 16px; border: 1px solid #356d83; border-radius: 10px; background: #142d43; }
.selected-role-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.selected-role-heading strong { color: var(--text); font-size: 13px; font-weight: 600; }
.selected-role-heading output { margin-left: auto; color: var(--accent); font-size: 12px; font-variant-numeric: tabular-nums; }
.selected-role-heading span { color: var(--muted); font-size: 11px; }
.simulator-shell #selectedRoles { gap: 7px; min-height: 36px; max-height: 190px; padding: 5px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.simulator-shell #selectedRoles:empty::before { content: '选择一个版型，或点击角色添加身份'; align-self: center; color: var(--muted); font-size: 12px; }
.simulator-shell #configPanel > .grid { gap: 12px; }
.simulator-shell #configPanel > .grid > div, .simulator-shell .config-option-panel { min-width: 0; padding: 16px; border: 1px solid var(--card-edge); border-radius: 10px; background: var(--card); transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.simulator-shell #configPanel > .grid > div > label, .simulator-shell .config-option-panel > label { color: var(--text); font-size: 13px; }
.simulator-shell #configPanel label:has(> input[type="checkbox"]) { min-width: 0; min-height: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--field); color: #d9e6f7; cursor: pointer; transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); }
.simulator-shell #configPanel label:has(> input:checked) { border-color: #57b5aa; background: #1f5360; color: #cafff3; }
.simulator-shell #configPanel input[type="checkbox"] { flex-shrink: 0; }
.simulator-shell :is(input[type="text"], input[type="number"], select, textarea) { max-width: 100%; min-width: 0; min-height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--field); color: var(--text); box-shadow: none; transition: border-color .15s ease; }
.simulator-shell :is(input, select, textarea):focus { border-color: var(--accent); outline: 2px solid #79d6bb40; outline-offset: 1px; box-shadow: none; background: var(--field); }
.simulator-shell input[type="checkbox"] { accent-color: var(--accent); }
.simulator-shell .action-btn { display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: 40px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: #2a4565; box-shadow: none; font-size: 13px; font-weight: 500; line-height: 1.5; cursor: pointer; transform: none; animation: none; transition: border-color var(--motion-base) var(--motion-ease), background-color var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease), filter var(--motion-base) var(--motion-ease); }
.simulator-shell .action-btn:is(:hover, :focus-visible):not(:disabled) { transform: none; border-color: #82cbd4; background: #365d7c; box-shadow: 0 5px 16px #08142a45, inset 0 1px 0 #ffffff1a; }
.simulator-shell .action-btn:active { transform: none; }
.simulator-shell .action-btn:disabled { opacity: .45; cursor: not-allowed; }
.simulator-shell .sim-primary, .simulator-shell .sim-start-button { border-color: var(--accent); color: #112b24; background: linear-gradient(110deg, #70edd0, #49d7dc); font-weight: 650; }
.simulator-shell .sim-primary:is(:hover, :focus-visible):not(:disabled), .simulator-shell .sim-start-button:is(:hover, :focus-visible):not(:disabled) { border-color: #b9fff0; background: linear-gradient(110deg, #70edd0, #49d7dc); filter: brightness(1.1); box-shadow: 0 5px 20px #29cbbb38, inset 0 1px 0 #ffffff40; }
.simulator-shell .sim-start-button { min-height: 48px; font-size: 15px; }
.simulator-shell .sim-danger, .simulator-shell .checkpoint-row button { color: #ffd0dc; border-color: #8a526d; background: #4b2c44; }
.simulator-shell .sim-danger:is(:hover, :focus-visible):not(:disabled), .simulator-shell .checkpoint-row button:is(:hover, :focus-visible):not(:disabled) { border-color: #efa4c3; background: #66374f; }
.simulator-shell .sim-quiet { background: transparent; }
.simulator-shell .sim-game-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.simulator-shell .terminal { height: clamp(280px, 43vh, 440px); padding: 22px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #111f32; box-shadow: none; color: #e0eafb; font-size: 13px; line-height: 1.8; scrollbar-color: var(--line) transparent; }
.simulator-shell .terminal::-webkit-scrollbar { width: 7px; }
.simulator-shell .terminal::-webkit-scrollbar-track { border: 0; background: transparent; }
.simulator-shell .terminal::-webkit-scrollbar-thumb { border: 0; background: var(--line); }
.simulator-shell [class^="log-"] { text-shadow: none; }
.simulator-shell .log-night, .simulator-shell .log-skill { color: var(--purple); }
.simulator-shell .log-day, .simulator-shell .log-police { color: var(--orange); }
.simulator-shell .log-good { color: var(--green); }
.simulator-shell .log-wolf, .simulator-shell .log-death { color: var(--red); }
.simulator-shell .log-system, .simulator-shell .log-input { color: var(--cyan); }
.simulator-shell #inputArea { padding: 20px; border: 1px solid #387e80; border-radius: var(--radius); background: #183e46; backdrop-filter: none; box-shadow: none; }
.simulator-shell #inputPrompt { margin-bottom: 12px; color: #bee9db; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.simulator-shell #inputHint { color: var(--muted); font-size: 12px; }
.simulator-shell #playerInput { width: 0; flex: 1 1 0; font-size: 14px; }
.simulator-shell :is(#daySkillArea, #explodeArea, #scorePanel) { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: none; backdrop-filter: none; }
.simulator-shell #daySkillArea { border-color: #4c4366; }
.simulator-shell #explodeArea { border-color: #613a46; }
.simulator-shell #scorePanel { border-color: #655a40; }
.simulator-shell #scoreSummary { overflow-x: auto; }
.simulator-shell #scorePanel table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.simulator-shell #scorePanel :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.simulator-shell #scorePanel th { color: var(--muted); font-weight: 500; background: var(--field); }
.simulator-shell #scoreDetailsList { background: var(--field); }
.simulator-shell .history-game-select { width: 100%; }
.simulator-shell .record-panel .action-btn { min-height: 40px; padding: 7px 10px; }
.simulator-shell .timeline-controls :is(input, select) { padding: 8px 10px; min-height: 40px; font-size: 13px; }
.simulator-shell .warning-toast { border-color: #825d3a; background: #31281e; box-shadow: 0 12px 36px #00000040; }

@media (hover: hover) and (pointer: fine) {
  .timeline-row:not(.timeline-current):hover, .checkpoint-row:hover { background-color: var(--card-hover); border-top-color: #6a95be; border-right-color: #6a95be; border-bottom-color: #6a95be; }
  .role-library > summary:hover, .simulator-shell .collapse-btn:hover { background-color: var(--card-hover); }
  .checkpoint-row:hover .checkpoint-index { background-color: #245779; border-color: var(--cyan); }
}
.checkpoint-row:focus-within .checkpoint-index { background-color: #245779; border-color: var(--cyan); }
.checkpoint-row:focus-within, .simulator-shell #configPanel > .grid > div:focus-within, .simulator-shell .config-option-panel:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px #59e2cc1a; }
:is(.timeline-controls button, .simulator-shell .action-btn):active:not(:disabled) { filter: brightness(1); box-shadow: inset 0 2px 7px #06132666; transition-duration: var(--motion-press); }

@media (max-width: 820px) {
  .review-workspace { grid-template-columns: minmax(0, 1fr); }
  .simulator-shell { padding: 22px 16px 36px; }
  .simulator-shell #configPanel { padding: 20px; }
  .simulator-shell #configPanel .md\:grid-cols-3 { grid-template-columns: minmax(0, 1fr); }
  .sim-header { gap: 12px; margin-bottom: 20px; }
}
@media (max-width: 540px) {
  .record-panel { --record-inset: 16px; }
  .record-heading { margin-bottom: 12px; }
  .timeline-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .timeline-controls select { grid-column: span 2; width: 100%; }
  .timeline-controls input { width: 100%; }
  .timeline-controls button { width: 100%; }
  .timeline-list { max-height: 420px; }
  .timeline-row { padding: 12px 10px; }
  .checkpoint-row { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 7px; padding: 10px 8px; }
  .simulator-shell { padding: 20px 12px 32px; }
  .simulator-shell #configPanel { padding: 16px; }
  .simulator-shell #configPanel > .grid > div, .simulator-shell .config-option-panel { padding: 12px; }
  .role-library > summary { flex-wrap: wrap; gap: 4px 8px; padding-inline: 12px; }
  .role-library > summary span { order: 1; flex-basis: 100%; }
  .sim-header h1 { font-size: 22px; }
  .sim-header p { max-width: 280px; }
  .simulator-shell .role-tag { min-height: 44px; }
  .role-catalog { max-height: 280px; }
  .simulator-shell .terminal { padding: 15px; font-size: 12px; }
  .simulator-shell #inputArea { padding: 16px; }
  .simulator-shell .sim-game-toolbar .action-btn { flex-grow: 1; }
}
@media (max-width: 540px), (pointer: coarse) {
  .simulator-shell :is(.action-btn, .tab-btn, input[type="text"], input[type="number"], select), .timeline-controls :is(input, select, button), .record-actions button, .checkpoint-row button { min-height: 44px; }
  .simulator-shell .timeline-controls :is(input, select), .simulator-shell .record-panel .action-btn { min-height: 44px; }
  .simulator-shell label.flex { min-height: 40px; }
  .simulator-shell #configPanel :is(input[type="text"], input[type="number"], select), .simulator-shell #playerInput { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Shared interactive surfaces, also embedded in the standalone simulator. */
.ui-dialog.dialog-overlay, .ui-dialog.note-overlay {
  position: fixed; inset: 0; margin: 0; width: 100%; height: 100dvh;
  max-width: none; max-height: none; padding: 20px; border: 0;
  display: grid; place-items: center; color: var(--text); background: transparent; backdrop-filter: none;
}
.ui-dialog:not([open]) { display: none !important; }
.ui-dialog::backdrop { background: #061020bf; }
.ui-dialog .dialog-card, .ui-dialog .note-modal { box-sizing: border-box; width: min(480px, 100%); max-height: calc(100dvh - 40px); overflow: auto; overscroll-behavior: contain; padding: 24px; border: 1px solid var(--card-edge); border-radius: var(--radius); background: var(--panel); box-shadow: 0 24px 90px #0006; }
.ui-dialog .note-modal { width: min(860px, 100%); }
.ui-dialog .room-head, .ui-dialog .note-modal-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.ui-dialog input, .ui-dialog select { box-sizing: border-box; min-width: 0; width: 100%; padding: 12px; border: 1px solid var(--card-edge); border-radius: 8px; color: var(--text); background: var(--field); font: inherit; }
.ui-dialog .field { display: grid; gap: 8px; }
.ui-dialog .small { font-size: 12px; line-height: 1.7; }
.ui-dialog .muted { color: var(--muted); }
.ui-dialog .btn, .ui-preferences-button { display: inline-flex; justify-content: center; align-items: center; min-height: 40px; padding: 8px 12px; border: 1px solid var(--card-edge); border-radius: 8px; color: var(--text); background: var(--card); font: inherit; cursor: pointer; }
.toast.ui-notices { position: fixed; z-index: 1000; right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); display: grid; gap: 10px; width: min(440px, calc(100vw - 36px)); max-width: none; padding: 0; border: 0; background: transparent; opacity: 1; transform: none; pointer-events: none; }
.toast.ui-notices:empty { display: none; }
.ui-notice { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--card-edge); border-radius: 12px; background: #233f5c; color: var(--text); box-shadow: 0 8px 32px #04102266; pointer-events: auto; overflow-wrap: anywhere; font: 13px/1.6 var(--font-ui); }
.ui-notice-success { background: #174638; border-color: #56aa86; }
.ui-notice-warning { background: #4c3826; border-color: #c08f54; }
.ui-notice-error { background: #4b293e; border-color: #cb7899; }
.ui-notice-icon { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; background: #ffffff18; font-weight: 700; }
.ui-notice-text { flex: 1; }
.ui-notice-close { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border: 1px solid #ffffff30; border-radius: 8px; background: transparent; color: inherit; font: 22px/1 var(--font-ui); cursor: pointer; }
.ui-notice.is-leaving { animation: ui-notice-out 160ms var(--motion-ease) both; pointer-events: none; }
.ui-feed-jump { display: block; margin: 8px auto 0; min-height: 40px; padding: 8px 16px; border: 1px solid #66b9dc; border-radius: 20px; background: #1f4c64; color: #e5faff; font: 12px/1.5 var(--font-ui); cursor: pointer; }
[aria-busy="true"] { cursor: progress; }
.ui-workspace-tabs { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border: 1px solid var(--card-edge); border-radius: 12px; background: #172c46; }
.ui-workspace-tabs button { position: relative; z-index: 1; flex: 1; min-height: 40px; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); font: 600 13px/1.5 var(--font-ui); cursor: pointer; transition: color var(--motion-fast) var(--motion-ease); }
.ui-workspace-tabs button[aria-selected="true"] { border-color: #64c2c8; background: #235361; color: #d5fff6; box-shadow: inset 0 -2px var(--accent); }
.ui-tab-indicator { position: absolute; z-index: 0; box-sizing: border-box; border: 1px solid #64c2c8; border-radius: 8px; background: #235361; box-shadow: inset 0 -2px var(--accent); transform-origin: top left; pointer-events: none; }
.ui-workspace-tabs.ui-tabs-moving button[aria-selected="true"] { border-color: transparent; background: transparent; box-shadow: none; }
.ui-action-menu { position: relative; }
.ui-action-menu > summary { list-style: none; cursor: pointer; }
.ui-action-menu > summary::-webkit-details-marker { display: none; }
.ui-action-menu > summary::after { content: '⌄'; display: inline-block; margin-left: 6px; color: var(--cyan); transition: transform var(--motion-fast) var(--motion-ease); }
.ui-action-menu[open] > summary::after { transform: rotate(180deg); }
.ui-menu-content { position: absolute; z-index: 125; top: calc(100% + 8px); right: 0; display: grid; gap: 8px; min-width: 200px; max-width: calc(100vw - 32px); padding: 12px; border: 1px solid var(--card-edge); border-radius: 12px; background: #223953; box-shadow: 0 14px 40px #04102380; }
.ui-menu-content > :is(button, a) { width: 100%; }
@keyframes ui-notice-out { to { opacity: 0; } }
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:root[data-motion="reduced"] .mode-label svg, :root[data-motion="reduced"] .mode-arrow, :root[data-motion="reduced"] .note-hex span { transform: none !important; }
@media (max-width: 540px), (pointer: coarse) {
  .ui-dialog .btn, .ui-preferences-button, .ui-workspace-tabs button, .ui-notice-close { min-height: 44px; }
  .ui-notice-close { flex-basis: 44px; }
  .ui-dialog input, .ui-dialog select, .ui-dialog textarea { font-size: 16px; }
  .ui-dialog.dialog-overlay, .ui-dialog.note-overlay { padding: 12px; }
  .ui-dialog .dialog-card, .ui-dialog .note-modal { max-height: calc(100dvh - 24px); padding: 18px; }
}

.preset-favorites { margin: 12px 0; }
.preset-favorites-title { display: block; margin-bottom: 8px; color: var(--orange); font-size: 12px; }
.preset-favorites-hint { color: var(--muted); font-size: 12px; }
.preset-catalog, .preset-favorites-list, .preset-search-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); align-content: start; gap: 8px; }
.preset-catalog { max-height: 186px; overflow: auto; padding: 4px; scrollbar-width: thin; scrollbar-color: var(--card-edge) transparent; scrollbar-gutter: stable; }
.preset-catalog.expanded { max-height: none; }
.preset-favorites-list { max-height: 160px; overflow: auto; }
.preset-choice { display: flex; align-items: stretch; width: 100%; max-width: 240px; min-width: 0; gap: 4px; }
.preset-choice > [data-template-name] { flex: 1; min-width: 0; min-height: 44px; padding: 9px 10px; font-size: 12px; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.preset-choice > [data-template-name][aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
.preset-star { flex: 0 0 40px; border: 1px solid var(--card-edge); border-radius: 8px; background: #263c58; color: #dceaff; font: 22px/1 var(--font-ui); cursor: pointer; }
.preset-star[aria-pressed="true"] { background: #4a402e; color: #ffd78f; border-color: #b18d51; }
.preset-expand { display: block; width: 100%; min-height: 40px; margin-top: 8px; padding: 8px 12px; border: 1px solid var(--card-edge); border-radius: 8px; background: #233e5a; color: var(--cyan); font: 12px/1.5 var(--font-ui); cursor: pointer; }
.preset-summary { display: grid; gap: 5px; margin-top: 14px; padding: 12px 14px; border: 1px solid #4e8e96; border-radius: 10px; background: #204454; }
.preset-summary strong { font-size: 14px; color: #cdfff1; }
.preset-summary span { font-size: 12px; color: #bedce8; }
.preset-summary :is(.preset-summary-roles, .preset-summary-rules) { line-height: 1.7; overflow-wrap: anywhere; }
:root[data-motion="standard"] .mode-card::before { opacity: calc(var(--mode-engaged) * .34); }
:root[data-motion="standard"] :is(.sidebar-group, .note-ai-config, .note-setup, .role-library)[open] > :not(summary) { animation: ui-panel-reveal 220ms var(--motion-ease); }
:root[data-motion="standard"] .ui-action-menu[open] > .ui-menu-content { transform-origin: top right; animation: ui-menu-reveal 180ms var(--motion-ease); }
:root[data-motion="standard"] .ui-dialog::backdrop { animation: ui-backdrop-in 160ms ease-out; }
:root[data-motion="standard"] .transition-scene.is-entering { animation-duration: var(--motion-gentle); }
:root[data-motion="standard"] .btn:active:not(:disabled), :root[data-motion="standard"] .action-btn:active:not(:disabled) { box-shadow: inset 0 0 0 2px #b5fff040, inset 0 3px 10px #06132666; }
:is(.btn, .judge-button)[aria-busy="true"]::after { content: ''; flex: none; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-busy-spin 800ms linear infinite; }
@keyframes ui-panel-reveal { from { opacity: .45; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ui-menu-reveal { from { opacity: .4; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ui-backdrop-in { from { background: transparent; } to { background: #061020bf; } }
@keyframes ui-busy-spin { to { transform: rotate(360deg); } }
@media (max-width: 540px), (pointer: coarse) { .preset-star { flex-basis: 44px; min-height: 44px; } }
@media (max-width: 540px) { .preset-choice { max-width: none; } }

@media (max-width: 540px), (pointer: coarse) {
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) { min-height: 44px; }
  /* WebKit's native menu appearance can ignore the touch target height. */
  :is(.app-shell, .simulator-page, .ui-dialog) select:not([multiple]) {
    -webkit-appearance: none; appearance: none; min-height: 44px; padding-right: 34px;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px; background-repeat: no-repeat;
  }
  .simulator-page :is(.tab-btn, .role-tag, .preset-expand) { min-width: 44px; min-height: 44px; }
}

/* Control outlines remain distinct on all three blue surfaces. */
.simulator-shell :is(input:not([type="checkbox"]):not([type="radio"]), select, .action-btn, .template-btn), .ui-preferences-button, .preset-star, .preset-expand,
.ui-dialog :is(input, select, textarea, .btn) { border-color: var(--control-edge); }