/* P2 — mode-local presentation only. Default gameplay geometry remains unchanged. */
.mode-presentation { position: relative; min-width: 0; max-width: 100%; color: var(--color-text-primary); font-family: var(--font-ui); text-align: left; }
.mode-presentation > summary { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .4rem .6rem; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-surface-1); color: var(--color-text-secondary); font-size: .75rem; letter-spacing: normal; cursor: pointer; list-style: none; }
.mode-presentation > summary::-webkit-details-marker { display: none; }
.mode-presentation > summary::after { content: "+"; margin-left: auto; color: var(--color-accent); font-family: var(--font-game); }
.mode-presentation[open] > summary::after { content: "−"; }
.mode-presentation-current { color: var(--color-accent); font-weight: 650; }
.mode-presentation :is(summary, select):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.mode-presentation-panel { width: min(30rem, 100%); padding: .8rem; border: 1px solid var(--color-border-default); border-top: 0; background: var(--color-surface-1); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.mode-presentation-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 45%); align-items: center; gap: .6rem; margin-block: .35rem; }
.mode-presentation-row label { font-size: .8rem; color: var(--color-text-primary); font-weight: 600; line-height: 1.4; }
.mode-presentation-row select { width: 100%; min-width: 0; min-height: 44px; padding: .4rem .55rem; background: var(--color-bg); color: var(--color-text-primary); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font: inherit; font-size: .85rem; cursor: pointer; }
.mode-presentation-row select:disabled { color: var(--color-text-muted); cursor: default; opacity: .8; }
.mode-presentation :is(.mode-presentation-help, .mode-presentation-note, .mode-presentation-status) { margin: .6rem 0 0; color: var(--color-text-secondary); font-size: .75rem; line-height: 1.55; letter-spacing: normal; text-transform: none; }
.mode-presentation-status:empty { display: none; }
.mode-presentation-preview { margin-top: .75rem; padding: .7rem; background: var(--color-bg); border-left: 2px solid var(--color-accent); }
.mode-preview-caption { display: block; color: var(--color-text-muted); font-size: .6rem; letter-spacing: .06em; }
.mode-preview-hud { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin-block: .7rem; font-family: var(--font-game); font-size: .7rem; }
.mode-preview-hud strong { color: var(--color-accent); font-size: 1.2rem; }
.mode-presentation-preview p { margin: 0; color: var(--color-text-primary); font-family: var(--font-game); font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.mode-presentation-preview[data-size="small"] p { font-size: .9rem; }
.mode-presentation-preview[data-size="large"] p { font-size: 1.15rem; }
.mode-presentation-preview [data-preview-data],
.mode-presentation-preview[data-live="false"] [data-preview-live] { display: none; }
.mode-presentation-preview[data-layout="data"][data-live="true"] [data-preview-data] { display: block; flex-basis: 100%; }
.mode-presentation-preview[data-live="false"] .mode-preview-hud { justify-content: center; }

/* Typing presentation is a floating popover. Opening it never changes the
   topbar, HUD, timer, stage, or passage geometry. */
.speed-test-topbar-secondary > .mode-presentation {
  flex: 0 0 auto;
  width: min(10.5rem, 100%);
  z-index: 30;
  isolation: isolate;
}
.speed-test-topbar-secondary > .mode-presentation[open] {
  flex-basis: auto;
  width: min(10.5rem, 100%);
}
.speed-test-topbar-secondary > .mode-presentation[open] > summary {
  width: 100%;
  border-color: rgb(var(--custom-accent-rgb, 0 255 242) / .42);
}
.speed-test-topbar-secondary > .mode-presentation .mode-presentation-panel {
  position: absolute;
  top: calc(100% + .42rem);
  right: 0;
  z-index: 60;
  width: min(30rem, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
  max-height: min(32rem, calc(100dvh - 8rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 48px rgb(0 0 0 / 44%);
}
.speed-test-screen.typing-active .speed-test-topbar .mode-presentation { visibility: hidden; }

/* Passage width is presentation-only. The viewport still clamps to the actual
   stage width on smaller screens. */
.speed-test-screen[data-speed-passage-width="narrow"] { --speed-test-max-width: 66.25rem; }
.speed-test-screen[data-speed-passage-width="normal"] { --speed-test-max-width: 78rem; }
.speed-test-screen[data-speed-passage-width="wide"] { --speed-test-max-width: 96rem; }

/* Hidden live counters do not affect collection, results, PBs, or record eligibility. */
.speed-test-screen .speed-test-hud > .speed-test-data-metric { display: none; }
.speed-test-screen[data-typing-hud="data"][data-live-stats="true"] .speed-test-hud > .speed-test-data-metric { display: inline-flex; }
.speed-test-screen[data-typing-hud="data"] .speed-test-hud { min-width: 0; flex-wrap: wrap; row-gap: .4rem; }
.speed-test-screen[data-live-stats="false"] .speed-test-hud > span:has(:is(#speed-test-wpm, #speed-test-accuracy, #speed-test-raw, #speed-test-words, #speed-test-errors)) { display: none; }

/* Keep the original fixed HUD row/arena size: hiding telemetry never changes trajectories. */
.campaign-gameplay-screen[data-gameplay-hud="minimal"] .campaign-hud-metric:not(.campaign-hud-score),
.endless-gameplay-screen[data-gameplay-hud="minimal"] .endless-hud-metric { display: none; }
.campaign-gameplay-screen[data-gameplay-hud="minimal"] .campaign-hud-primary,
.endless-gameplay-screen[data-gameplay-hud="minimal"] .endless-hud-primary { grid-template-rows: minmax(44px, auto); }
.campaign-gameplay-screen[data-gameplay-hud="minimal"] .campaign-hud-primary {
  grid-template-columns: auto auto minmax(90px, 1fr) auto;
  grid-template-areas: "back level score core";
}
.endless-gameplay-screen[data-gameplay-hud="minimal"] .endless-hud-primary { grid-template-columns: auto minmax(0, 1fr) auto; }
.endless-gameplay-screen[data-gameplay-hud="minimal"] .endless-hud-primary { grid-template-areas: "back stage core"; }
.campaign-gameplay-screen[data-gameplay-hud="minimal"] .campaign-hud-back,
.endless-gameplay-screen[data-gameplay-hud="minimal"] .endless-hud-back { grid-area: back; }
.campaign-gameplay-screen[data-gameplay-hud="minimal"] .campaign-hud-identity { grid-area: level; }
.campaign-gameplay-screen[data-gameplay-hud="minimal"] .campaign-hud-score {
  grid-area: score;
  display: flex;
  justify-content: center;
}
.endless-gameplay-screen[data-gameplay-hud="minimal"] .endless-hud-identity { grid-area: stage; }
.campaign-gameplay-screen[data-gameplay-hud="minimal"] .campaign-hud-integrity,
.endless-gameplay-screen[data-gameplay-hud="minimal"] .endless-hud-integrity { grid-area: core; }

/* Calm Boss/Rush decoration, not state indicators, phrase feedback, countdowns or phase timing. */
:is(.boss-screen, .arcade-rush-gameplay)[data-action-intensity="focused"] { --bloom-accent-sm: none; --bloom-accent-lg: none; --bloom-special: none; }
html[data-customization-active="true"] .boss-screen[data-action-intensity="focused"] .boss-threat-sigil { filter: none; }
.boss-screen[data-action-intensity="focused"] :is(.boss-threat-sigil, .boss-threat-sigil *),
.arcade-rush-gameplay[data-action-intensity="focused"] .arcade-rush-countdown { animation: none !important; }
.arcade-rush-gameplay[data-action-intensity="focused"] .arcade-rush-core::before { animation: none !important; box-shadow: none; }
.arcade-rush-gameplay[data-action-intensity="focused"] .arcade-rush-core::after { box-shadow: none; }
:is(.boss-screen, .arcade-rush-gameplay)[data-action-intensity="focused"] .burst { display: none; }

.campaign-progress-tools { flex-wrap: wrap; }
.campaign-progress-tools > .mode-presentation[open] { flex-basis: 100%; }
.endless-ready-panel > .mode-presentation { width: min(30rem, 100%); margin: 1rem auto; }
.arcade-rush-ui.arcade-rush-ready .arcade-rush-ready-card { grid-template-areas: "kicker rules" "title rules" "subtitle rules" "route rules" "pb actions" "presentation presentation"; }
.arcade-rush-ready-card > .mode-presentation { grid-area: presentation; width: min(30rem, 100%); margin-top: .75rem; }
:is(.pause-panel, .arcade-rush-overlay-card) > .mode-presentation { margin: .75rem 0 1rem; }
@media (max-width: 900px) {
  .arcade-rush-ui.arcade-rush-ready .arcade-rush-ready-card { grid-template-areas: "kicker" "title" "subtitle" "route" "rules" "pb" "actions" "presentation"; }
}
@media (max-width: 768px) {
  .mode-presentation-row select { font-size: 1rem; }
  .speed-test-screen[data-typing-hud="data"] .speed-test-hud { flex-basis: 100%; justify-content: center; }

  /* Presentation stays in its normal trigger slot while the panel floats over
     the page. No controls are hidden and no grid areas change when it opens. */
  .speed-test-topbar-secondary {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "presentation controls" "hud hud";
  }
  .speed-test-topbar-secondary > .speed-test-controls-wrap { grid-area: controls; min-width: 0; }
  .speed-test-topbar-secondary > .mode-presentation { grid-area: presentation; width: min(9.75rem, 40vw); min-width: 7.75rem; }
  .speed-test-topbar-secondary > .speed-test-hud { grid-area: hud; display: flex; justify-content: center; padding-left: 0; background: transparent; }
  .speed-test-topbar-secondary > .mode-presentation[open] { width: min(9.75rem, 40vw); min-width: 7.75rem; }
  .speed-test-topbar-secondary > .mode-presentation .mode-presentation-panel {
    left: 0;
    right: auto;
    width: min(30rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
    max-height: min(30rem, calc(100dvh - 7rem));
  }
}
@media (max-width: 720px) and (max-height: 520px) {
  /* Campaign's certified short-landscape layout hides the legacy tools row. Keep
     the new presentation control reachable while leaving tutorial chrome hidden. */
  .campaign-progress-screen .campaign-progress-tools { display: flex; margin-top: 4px; }
  .campaign-progress-screen .campaign-progress-tools > .tutorial-help-button { display: none; }
  .campaign-progress-screen .campaign-progress-tools > .mode-presentation { width: min(220px, 100%); z-index: 8; }
  .campaign-progress-screen .campaign-progress-tools > .mode-presentation[open] { flex-basis: auto; }
  .campaign-progress-screen .campaign-progress-tools > .mode-presentation[open] .mode-presentation-panel {
    position: absolute; top: 100%; left: 0; z-index: 9; width: min(300px, calc(100vw - 24px));
    max-height: min(230px, calc(100dvh - 100px)); overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 0 14px 34px rgb(0 0 0 / 42%);
  }
}
@media (max-height: 520px) {
  .speed-test-topbar-secondary > .mode-presentation .mode-presentation-panel { max-height: 45dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .mode-presentation *, .mode-presentation *::before, .mode-presentation *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .mode-presentation :is(summary, select), .mode-presentation-preview { border: 1px solid CanvasText; }
}