@font-face {
  font-family: "Press Start 2P";
  src: url("assets/fonts/PressStart2P-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "VT323";
  src: url("assets/fonts/VT323-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

#touchControls {
  display: none;
}

body.touch-enabled .touch-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 32px;
  box-sizing: border-box;
  pointer-events: none;
}

body.touch-enabled .touch-row > * {
  pointer-events: auto;
}

body.touch-enabled .center-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}
/* Joystick visual styles */
body.touch-enabled .joystick-base {
  touch-action: none;
  background: #222;
  border-radius: 50%;
  border: 2px solid #EAF6FF;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--touch-joystick-size);
  height: var(--touch-joystick-size);
  opacity: 0;
  transition: opacity 0.12s ease-out;
}

body.touch-enabled .joystick-base.is-active {
  opacity: 1;
}

body.touch-enabled .joystick-handle {
  touch-action: none;
  background: #888;
  border-radius: 50%;
  border: 2px solid #EAF6FF;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--touch-joystick-handle-size);
  height: var(--touch-joystick-handle-size);
}
/* Battle Church | Version 2025-10-30b 22:45 (America/New_York) */

:root {
  --game-width: 0px;
  --game-height: 0px;
  --dialog-frame-scale: 1;
  --swatch-dark: #0A0F1F;
  --swatch-dark-2: #0A0F1F;
  --swatch-mid: #233152;
  --swatch-light: #EAF6FF;
  --swatch-accent: #FFC86A;
  --swatch-accent-2: #9BD9FF;
  --swatch-border: rgba(234, 246, 255, 0.15);
  --swatch-button-gradient: linear-gradient(135deg, #FFC86A, #FF6B6B);
  --ui-font-family: var(--ui-font-family-pixel);
  --ui-font-family-pixel: "VT323", "Press Start 2P", monospace;
  --ui-text-color: #EAF6FF;
  --ui-text-color-dark: #0A0F1F;
  --ui-h1-size: 56px;
  --ui-h1-weight: 900;
  --ui-h1-line: 1.05;
  --ui-h2-size: 40px;
  --ui-h2-weight: 800;
  --ui-h2-line: 1.2;
  --ui-h3-size: 28px;
  --ui-h3-weight: 700;
  --ui-h3-line: 1.2;
  --ui-body-size: 20px;
  --ui-body-weight: 400;
  --ui-body-line: 1.3;
  --announcement-h1-size: var(--ui-h1-size);
  --announcement-h1-weight: var(--ui-h1-weight);
  --announcement-h1-line: var(--ui-h1-line);
  --announcement-h2-size: var(--ui-h2-size);
  --announcement-h2-weight: var(--ui-h2-weight);
  --announcement-h2-line: var(--ui-h2-line);
  --touch-button-size: 72px;
  --touch-button-fan-x: 36px;
  --touch-button-fan-y: 32px;
  --touch-joystick-size: 96px;
  --touch-joystick-handle-size: 44px;
  --touch-glow-red: rgba(255, 107, 107, 0.65);
  --touch-glow-teal: rgba(95, 227, 192, 0.65);
  --touch-glow-blue: rgba(123, 170, 255, 0.6);
  --arc-size: 220px;
  --arc-thickness: 72px;
  --arc-glow: rgba(255, 200, 106, 0.55);

  /* Hellfire UI tokens — shared by dialogs, save screen, more menu */
  --hf-text: #fdf1d9;
  --hf-label: rgba(242, 210, 146, 0.8);
  --hf-meta: rgba(231, 176, 102, 0.78);
  --hf-accent: rgba(242, 200, 125, 0.9);
  --hf-row-bg: rgba(28, 14, 10, 0.82);
  --hf-row-bg-focused: rgba(82, 44, 20, 0.92);
  --hf-row-bg-selected: rgba(46, 32, 26, 0.88);
  --hf-row-border: rgba(242, 200, 125, 0.22);
  --hf-row-border-focused: rgba(242, 200, 125, 0.95);
  --hf-row-border-selected: rgba(242, 200, 125, 0.55);
  --hf-input-bg: rgba(10, 5, 3, 0.72);
  --hf-input-border: rgba(242, 200, 125, 0.3);
  --hf-input-border-focus: rgba(242, 200, 125, 0.65);
  --hf-btn-primary-top: #c85a10;
  --hf-btn-primary-bottom: #7a2a08;
  --hf-btn-primary-border: rgba(255, 180, 60, 0.7);
  --hf-btn-primary-glow: rgba(220, 100, 20, 0.4);
  --hf-danger: #f07060;
  --hf-danger-border: rgba(200, 60, 40, 0.3);

  /* DOM overlay typography scale (Settings / Save / More / Edit dialogs) */
  --overlay-font-title: 40px;
  --overlay-font-label: 20px;
  --overlay-font-toggle: 20px;
  --overlay-font-value: 20px;
  --overlay-font-button: 20px;
  --overlay-font-input-label: 18px;
  --overlay-font-input: 20px;
  --overlay-font-hint: 16px;
  --overlay-font-action: 16px;
  --overlay-font-more-icon: 22px;
  --overlay-font-more-name: 24px;
  --overlay-font-more-desc: 20px;
}

#appRoot button,
.dialog-overlay__button,
.settings-btn--hellfire,
.save-dialog__btn-primary,
.save-dialog__btn-cancel,
.more-menu__item {
  font-family: var(--ui-font-family-pixel);
  letter-spacing: 0.02em;
}

/* Global reset */
html, body {
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #EAF6FF;
  height: 100%;
  overflow: hidden;
  font-family: var(--ui-font-family);
}

body {
  font-family: inherit;
  animation: blink 1.2s infinite;
}

body.layout-mobile,
body.layout-square,
body.layout-rotate-warning {
  --ui-h1-size: 36px;
  --ui-h2-size: 28px;
  --ui-h3-size: 20px;
  --ui-body-size: 16px;
}

#appRoot {
  position: relative;
  width: var(--viewport-width, 100vw);
  height: var(--viewport-height, 100vh);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

#gameWrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#touchControls {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body.touch-enabled #touchControls {
  pointer-events: auto;
}

/* NOTE (2025-10-30): Landscape-phone layout still WIP.
   - Space button sits correctly in left black letterbox; leave placement alone.
   - Joysticks must stay inside side letterboxes and be vertically centered; currently they sit low and drift inward.
   - Tablet + wider phones already look correct; restrict fixes to this media query so we do not regress them.
   - Touch controls forced visible for testing on desktop—undo once layout finalized. */
body.touch-enabled #touchControls {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-areas: 'space space' 'left right';
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  pointer-events: auto;
}

body.touch-enabled .center-controls {
  grid-area: space;
  display: flex;
  justify-content: flex-start;
  padding-left: 16px;
  pointer-events: auto;
}

body.touch-enabled .center-controls button {
  pointer-events: auto;
  padding: 10px 18px;
  font-size: clamp(0.65rem, 1.8vw, 0.85rem);
}

.arc-label-space {
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

body.touch-enabled .joystick-area.left {
  grid-area: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 16px;
  pointer-events: auto;
  position: relative;
  width: 50%;
  height: 100%;
  touch-action: none;
}

body.touch-enabled .joystick-area.left::before {
  content: "";
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 140px;
  height: 140px;
  border-radius: 18px;
  background: rgba(234, 246, 255, 0.08);
  border: 1px solid rgba(234, 246, 255, 0.18);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

body.touch-enabled .button-area.right {
  grid-area: right;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  position: relative;
  width: var(--arc-size);
  height: var(--arc-size);
  margin-left: auto;
  padding-right: 16px;
  pointer-events: auto;
}

#arcControl {
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: auto;
  touch-action: none;
}

.arc-segment {
  fill: none;
  stroke-width: var(--arc-thickness);
  stroke-linecap: butt;
  opacity: 0.8;
  transition: opacity 0.12s ease-out, filter 0.12s ease-out;
  pointer-events: none;
}

.arc-segment.arc-a {
  stroke: #7FCBFF;
}

.arc-segment.arc-b {
  stroke: #BFE6FF;
}

.arc-segment.arc-c {
  stroke: #FF6B6B;
  stroke-width: 40px;
}

.arc-segment.arc-s {
  stroke: #FFB36A;
  stroke-width: 40px;
}

.arc-segment.is-active {
  opacity: 1;
  filter: drop-shadow(0 0 12px var(--arc-glow));
}

.arc-segment.is-cooldown {
  opacity: 0.25;
  filter: none;
}

.arc-segment.is-cooldown.is-active {
  opacity: 0.35;
  filter: none;
}

.arc-label {
  fill: var(--swatch-dark);
  font-family: var(--ui-font-family);
  font-size: 18px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.arc-label.is-cooldown {
  opacity: 0.4;
}

body.touch-enabled .joystick-base {
  pointer-events: auto;
}

body.layout-square #appRoot,
body.layout-rotate-warning #appRoot {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

body.layout-square.touch-enabled #touchControls,
body.layout-rotate-warning.touch-enabled #touchControls {
  position: relative;
  inset: auto;
  width: 100%;
  height: var(--controls-height, 0px);
  background: #000;
  display: block;
}

body.layout-square.touch-enabled .touch-row,
body.layout-rotate-warning.touch-enabled .touch-row {
  position: relative;
  bottom: auto;
  left: 0;
  right: 0;
  padding: 0 24px;
  height: 100%;
  align-items: center;
}

body.layout-slab.touch-enabled .touch-row {
  padding-left: 0;
  padding-right: 0;
  justify-content: space-between;
}

body.layout-slab.touch-enabled .joystick-area.left {
  width: var(--gutter-width, 0px);
  padding-left: 0;
  justify-content: center;
}

body.layout-slab.touch-enabled .button-area.right {
  width: var(--gutter-width, 0px);
  padding-right: 0;
  margin-left: 0;
  justify-content: center;
}

#rotatePrompt {
  display: none;
  width: 100%;
  height: var(--rotate-row-height, 0px);
  align-items: center;
  justify-content: center;
  background: #000;
  color: #EAF6FF;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.layout-rotate-warning #rotatePrompt {
  display: flex;
}

.magazine-overlay {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 200, 106, 0.08), transparent 30%),
    radial-gradient(circle at 80% 60%, rgba(155, 217, 255, 0.1), transparent 36%),
    rgba(4, 7, 14, 0.7);
}

.magazine-panel {
  width: min(960px, 94vw);
  padding: 42px;
  background: linear-gradient(145deg, rgba(12, 20, 36, 0.94), rgba(9, 14, 26, 0.92));
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.75);
  color: #EAF6FF;
  font-family: var(--ui-font-family);
}

.magazine-title {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.magazine-body {
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.9);
}

.magazine-subhead {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 6px 0 14px;
}

.mag-section {
  margin: 18px 0;
}

.mag-label {
  font-size: clamp(14px, 1.4vw, 18px);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
}

.mag-names {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  color: #FFC86A;
  word-break: break-word;
}

.mag-copy {
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.01em;
}

.mag-number {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(255, 200, 106, 0.16);
  border: 1px solid rgba(255, 200, 106, 0.4);
  color: #FFC86A;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.mag-highlight {
  color: #EAF6FF;
}

.dialog-overlay {
  position: absolute;
  left: var(--game-left, 0px);
  top: var(--game-top, 0px);
  width: var(--game-width, 100%);
  height: var(--game-height, 100%);
  background: rgba(4, 7, 14, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 130;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.dialog-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.dialog-overlay--summary,
.dialog-overlay--howto {
  align-items: center;
  justify-content: center;
  background-image: url("assets/backgrounds/church-1108.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.dialog-overlay--howto .dialog-overlay__panel {
  width: min(900px, 94%);
}
.dialog-overlay--mission {
  align-items: center;
  justify-content: center;
  padding: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 32%), radial-gradient(circle at 80% 60%, rgba(110,244,255,0.12), transparent 38%), rgba(0, 0, 0, 0.72) !important;
  background-image: none !important;
}
.dialog-overlay--mission.visible {
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 32%), radial-gradient(circle at 80% 60%, rgba(110,244,255,0.12), transparent 38%), rgba(0, 0, 0, 0.72) !important;
  pointer-events: auto;
}
.dialog-overlay--title-page {
  align-items: stretch;
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  background-image: none !important;
}
.dialog-overlay--title-page .dialog-overlay__panel {
  width: min(1200px, 96%);
  max-width: 1200px;
  max-height: 92%;
  overflow: auto;
  padding: 18px clamp(18px, 3vw, 48px) 24px;
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: left;
  margin: 0 auto;
}
.dialog-overlay--title-page .dialog-overlay__body {
  margin-top: 0;
  font-size: var(--ui-body-size);
  line-height: var(--ui-body-line);
  white-space: normal;
}
.dialog-overlay--pause {
  align-items: center;
  justify-content: center;
  background: transparent;
}
.dialog-overlay--pause .dialog-overlay__body {
  text-align: left;
  white-space: normal;
}
.pause-hotkeys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.pause-hotkeys--single {
  grid-template-columns: 1fr;
}
.pause-hotkeys__title {
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 240, 205, 0.95);
  margin: 6px 0 8px;
}
.pause-hotkeys__list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(234, 246, 255, 0.92);
}
.pause-hotkeys__list li {
  margin: 0 0 6px;
}
.pause-hotkeys__note {
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
  color: rgba(180, 210, 255, 0.9);
}

.dialog-overlay--settings .dialog-overlay__panel {
  width: min(640px, 92%);
  background: rgba(16, 8, 6, 0.92);
  border: 1px solid rgba(242, 200, 125, 0.35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
  font-family: var(--ui-font-family);
  text-align: left;
}
.dialog-overlay--settings {
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.74);
}
.dialog-overlay--settings .dialog-overlay__title {
  text-align: left;
  font-size: clamp(26px, 3vw, var(--overlay-font-title));
  color: #f2c87d;
}
.dialog-overlay--settings .dialog-overlay__button {
  background: linear-gradient(180deg, var(--hf-btn-primary-top) 0%, var(--hf-btn-primary-bottom) 100%);
  color: var(--hf-text);
  border: 1px solid var(--hf-btn-primary-border);
}

/* ── Save-form dialog (New Save / Edit Save) ──────────────────────────────── */
.dialog-overlay--save-form {
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.78);
}
.dialog-overlay--save-form .dialog-overlay__panel {
  width: min(520px, 92%);
  background: linear-gradient(170deg, rgba(18, 9, 6, 0.97) 0%, rgba(10, 5, 3, 0.97) 100%);
  border: 2px solid rgba(255, 218, 162, 0.34);
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 0 32px rgba(180, 80, 20, 0.08);
  font-family: var(--ui-font-family);
  text-align: left;
  padding: 18px 20px 16px;
}
.dialog-overlay--save-form .dialog-overlay__title {
  display: none;
}
.dialog-overlay--save-form .dialog-overlay__body {
  margin-top: 0;
}
.dialog-overlay--save-form .dialog-overlay__button {
  display: none;
}
/* Form layout — compact grid, no per-field labels */
.save-form {
  display: grid;
  gap: 10px;
}
/* Name + City side-by-side, wraps when too narrow */
.save-form__pair {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.save-form__pair .save-form__input {
  flex: 1 1 120px;
  width: auto;
  min-width: 0;
}
/* Denomination: label above, select below */
.save-form__inline {
  display: grid;
  gap: 5px;
}
.save-form__inline-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242, 210, 146, 0.68);
}
.save-form__input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 7px;
  border: 1.5px solid rgba(242, 200, 125, 0.3);
  background: rgba(10, 5, 3, 0.72);
  color: #fdf1d9;
  font-family: var(--ui-font-family);
  font-size: clamp(16px, 2.2vw, 19px);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.save-form__inline .save-form__input {
  width: 100%;
}
.save-form__input:focus {
  border-color: rgba(242, 200, 125, 0.75);
  box-shadow: 0 0 0 3px rgba(242, 200, 125, 0.1);
}
.save-form__input::placeholder {
  color: rgba(253, 241, 217, 0.28);
}
.save-form__input option {
  background: #1a0a05;
  color: #fdf1d9;
}
.save-form__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
}
.save-form__btn {
  padding: 10px 14px;
  border-radius: 9px;
  font-family: var(--ui-font-family);
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.1s ease;
}
.save-form__btn--cancel {
  border: 1.5px solid rgba(242, 200, 125, 0.25);
  background: rgba(28, 14, 10, 0.82);
  color: rgba(253, 241, 217, 0.7);
}
.save-form__btn--cancel:hover {
  filter: brightness(1.3);
}
.save-form__btn--primary {
  border: 1.5px solid rgba(255, 180, 60, 0.7);
  background: linear-gradient(160deg, #c85a10 0%, #7a2a08 100%);
  color: #fdf1d9;
  box-shadow: 0 0 10px rgba(220, 100, 20, 0.35);
}
.save-form__btn--primary:hover {
  filter: brightness(1.2);
}
.save-form__btn--primary:active {
  transform: translateY(1px);
  filter: brightness(0.9);
}
@media (max-width: 420px) {
  .dialog-overlay--save-form .dialog-overlay__panel {
    border-width: 1px;
    border-radius: 10px;
    padding: 14px 14px 12px;
  }
}
.dialog-overlay--panel-default .dialog-overlay__panel {
  width: min(var(--hellfire-default-panel-width-max), var(--hellfire-default-panel-width-ratio));
  background: linear-gradient(180deg, rgba(12, 18, 30, 0.95) 0%, rgba(7, 10, 18, 0.95) 100%);
  border: 2px solid rgba(255, 218, 162, 0.34);
  border-radius: 18px;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.62);
}
.dialog-overlay--panel-default .dialog-overlay__title {
  width: 100%;
  text-align: var(--hellfire-default-title-align);
  text-transform: var(--hellfire-default-title-transform);
  color: var(--hellfire-default-title-color);
  font-size: clamp(26px, 3vw, var(--hellfire-default-title-size));
}
.dialog-overlay--panel-default .dialog-overlay__title::after {
  content: "";
  display: block;
  width: calc(100% - (var(--hellfire-default-divider-inset-x) * 2));
  margin: var(--hellfire-default-divider-margin-top) auto 0;
  border-top: 1px solid rgba(255, 214, 148, 0.22);
}
.dialog-overlay--panel-default .dialog-overlay__body {
  margin-top: 8px;
}
.dialog-overlay__footer-hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(94%, 1120px);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.01em;
  color: rgba(231, 176, 102, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 1;
  animation: controlsHintPulse 4.8s ease-in-out infinite;
}
@keyframes controlsHintPulse {
  0%, 74%, 100% {
    opacity: 0.78;
  }
  84% {
    opacity: 1;
  }
}
.settings-panel {
  display: grid;
  gap: 16px;
  width: 100%;
}
.settings-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--hf-row-bg);
  border: 1px solid var(--hf-row-border);
  transition: filter 0.12s ease, border-color 0.12s ease;
}
.settings-row--slider {
  grid-template-columns: auto 1fr;
  align-items: flex-start;
}
.settings-row:hover {
  filter: brightness(1.08);
  border-color: var(--hf-row-border-focused);
}
.settings-row__icon {
  font-size: var(--overlay-font-more-icon);
  width: 28px;
  text-align: center;
  line-height: 1;
  flex-shrink: 0;
}
.settings-row__text {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.settings-row__control {
  justify-self: end;
}
.settings-row__label {
  font-size: var(--overlay-font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hf-text);
  font-weight: 700;
}
.settings-row__desc {
  font-size: var(--overlay-font-more-desc);
  letter-spacing: 0.02em;
  color: var(--hf-meta);
  font-weight: 400;
}
.settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--overlay-font-toggle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(253, 241, 217, 0.92);
}
.settings-toggle input {
  width: 18px;
  height: 18px;
  accent-color: #f2c87d;
}
.settings-slider {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.settings-slider input[type="range"] {
  width: 100%;
  accent-color: #d36a2f;
}
.settings-slider__value {
  min-width: 56px;
  text-align: right;
  font-size: var(--overlay-font-value);
  color: rgba(253, 241, 217, 0.88);
}

.settings-btn--hellfire {
  padding: 8px 20px;
  border-radius: 10px;
  border: 1.5px solid var(--hf-btn-primary-border);
  background: linear-gradient(160deg, var(--hf-btn-primary-top) 0%, var(--hf-btn-primary-bottom) 100%);
  color: var(--hf-text);
  font-family: var(--ui-font-family);
  font-size: var(--overlay-font-button);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.1s ease;
  box-shadow: 0 0 10px var(--hf-btn-primary-glow);
}
.settings-btn--hellfire:hover {
  filter: brightness(1.2);
}
.settings-btn--hellfire:active {
  transform: translateY(1px);
  filter: brightness(0.9);
}

.save-picker {
  gap: 14px;
}

.save-picker__scrollbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.save-picker__scroll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--hf-row-border);
  background: var(--hf-row-bg);
  color: var(--hf-text);
  font-family: var(--ui-font-family);
  cursor: pointer;
}

.save-picker__scroll-btn:hover,
.save-picker__scroll-btn:focus-visible {
  border-color: var(--hf-row-border-focused);
  filter: brightness(1.08);
  outline: none;
}

.save-picker__list {
  display: grid;
  gap: 10px;
  max-height: min(56vh, 520px);
  overflow-y: auto;
  padding-right: 2px;
  scroll-behavior: smooth;
  scrollbar-gutter: stable both-edges;
}

.save-picker__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--hf-row-border);
  background: var(--hf-row-bg);
  color: var(--hf-text);
  font-family: var(--ui-font-family);
  cursor: pointer;
  transition: filter 0.12s ease, border-color 0.12s ease;
}

.save-picker__item:hover,
.save-picker__item:focus-visible {
  filter: brightness(1.08);
  border-color: var(--hf-row-border-focused);
  outline: none;
}

.save-picker__item--selected {
  border-color: rgba(255, 200, 100, 0.72);
  box-shadow: inset 3px 0 0 rgba(255, 200, 100, 0.9);
}

.save-picker__item--demo {
  border-style: dashed;
}

.save-picker__item-icon {
  font-size: var(--overlay-font-more-icon);
  line-height: 1;
}

.save-picker__item-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.save-picker__item-title {
  font-size: var(--overlay-font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hf-text);
  font-weight: 700;
}

.save-picker__item-meta {
  font-size: var(--overlay-font-more-desc);
  letter-spacing: 0.02em;
  color: var(--hf-meta);
  font-weight: 400;
}

.save-picker__badge {
  font-size: var(--overlay-font-status-chip);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242, 200, 125, 0.95);
  border: 1px solid rgba(242, 200, 125, 0.52);
  border-radius: 999px;
  padding: 4px 8px 3px;
  background: rgba(242, 200, 125, 0.12);
}

.save-picker__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.dev-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dev-action-grid__button {
  width: 100%;
  min-height: 64px;
  margin-top: 0;
  padding: 12px 14px;
  text-align: center;
  line-height: 1.25;
}

.settings-panel--dev-shortcuts {
  gap: 12px;
}

/* Save dialog field cards */
.save-dialog__field {
  display: grid;
  gap: 6px;
  padding: 10px 14px 12px;
  border-radius: 12px;
  background: var(--hf-row-bg);
  border: 1px solid var(--hf-row-border);
}

.save-dialog__label {
  font-size: var(--overlay-font-input-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hf-label);
}

.save-dialog__input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--hf-input-border);
  background: var(--hf-input-bg);
  color: var(--hf-text);
  font-family: var(--ui-font-family);
  font-size: var(--overlay-font-input);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}

.save-dialog__input:focus {
  border-color: var(--hf-input-border-focus);
  box-shadow: 0 0 0 2px rgba(242, 200, 125, 0.12);
}

.save-dialog__input option {
  background: #1a0a05;
  color: var(--hf-text);
}


.save-dialog__hint {
  font-size: var(--overlay-font-hint);
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  margin-top: 10px;
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}

.save-dialog__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.save-dialog__btn-cancel {
  padding: 9px 20px;
  border-radius: 10px;
  border: 1px solid var(--hf-row-border);
  background: var(--hf-row-bg);
  color: rgba(253, 241, 217, 0.7);
  font-family: var(--ui-font-family);
  font-size: var(--overlay-font-action);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.12s ease;
}

.save-dialog__btn-cancel:hover {
  filter: brightness(1.25);
}

.save-dialog__btn-primary {
  padding: 9px 20px;
  border-radius: 10px;
  border: 1.5px solid var(--hf-btn-primary-border);
  background: linear-gradient(160deg, var(--hf-btn-primary-top) 0%, var(--hf-btn-primary-bottom) 100%);
  color: var(--hf-text);
  font-family: var(--ui-font-family);
  font-size: var(--overlay-font-action);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 10px var(--hf-btn-primary-glow);
  transition: filter 0.12s ease, transform 0.1s ease;
}

.save-dialog__btn-primary:hover {
  filter: brightness(1.2);
}

.save-dialog__btn-primary:active {
  transform: translateY(1px);
  filter: brightness(0.9);
}

/* More menu action cards */
.more-menu {
  display: grid;
  gap: 12px;
  font-size: var(--overlay-font-more-name);
}

.more-menu__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--hf-row-bg);
  border: 1px solid var(--hf-row-border);
  color: var(--hf-text);
  font-family: var(--ui-font-family);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-size: var(--overlay-font-more-name);
  line-height: 1.3;
  transition: filter 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}

.more-menu__item:hover {
  filter: brightness(1.12);
  border-color: var(--hf-row-border-focused);
}

.more-menu__item:active {
  filter: brightness(0.95);
  transform: translateY(1px);
}

.more-menu__item--danger {
  border-color: rgba(200, 80, 55, 0.45);
  background: rgba(34, 14, 12, 0.84);
}

.more-menu__item--danger:hover {
  border-color: rgba(220, 90, 65, 0.72);
}

.more-menu__item--close {
  border-color: rgba(242, 200, 125, 0.22);
  background: rgba(22, 11, 8, 0.78);
}

.more-menu__icon {
  font-size: var(--overlay-font-more-icon);
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  line-height: 1;
}

.more-menu__text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.more-menu__name {
  font-size: var(--overlay-font-more-name);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hf-text);
}

.more-menu__desc {
  font-size: var(--overlay-font-more-desc);
  letter-spacing: 0.02em;
  color: var(--hf-meta);
  text-transform: none;
  font-weight: 400;
}

.more-menu__item--danger .more-menu__icon,
.more-menu__item--danger .more-menu__name {
  color: var(--hf-danger);
}

.dev-shortcuts-hint {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(231, 176, 102, 0.78);
}

.dev-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.dev-shortcut-card {
  min-height: 86px;
  padding: 12px 10px;
  border-radius: 14px;
  background: var(--hf-row-bg);
  border: 1px solid var(--hf-row-border);
  display: grid;
  align-content: start;
  gap: 6px;
}

.dev-shortcut-card__key {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffc86a;
}

.dev-shortcut-card__label {
  font-size: 12px;
  line-height: 1.25;
  color: rgba(234, 246, 255, 0.92);
}

.dev-shortcut-card__note {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(155, 217, 255, 0.76);
}

@media (max-width: 880px) {
  .dev-shortcuts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dev-shortcuts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.layout-mobile .pause-hotkeys__title,
body.layout-square .pause-hotkeys__title,
body.layout-rotate-warning .pause-hotkeys__title {
  font-size: 13px;
}

body.layout-mobile .pause-hotkeys__list,
body.layout-square .pause-hotkeys__list,
body.layout-rotate-warning .pause-hotkeys__list {
  font-size: 11px;
}

.dialog-overlay--gameover {
  align-items: center;
  justify-content: flex-start;
  padding-left: 40px;
  background: rgba(0, 0, 0, 0.7);
  background-image: url("assets/backgrounds/game-over.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.dialog-overlay--title {
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 40px;
  background-image: url("assets/backgrounds/title.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.dialog-overlay--district-intro {
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  background-image: url("assets/backgrounds/game-over.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.dialog-overlay--district-intro .dialog-overlay__panel {
  width: min(980px, 92%);
  background: rgba(8, 16, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  font-family: var(--ui-font-family);
  text-align: center;
}
.dialog-overlay--district-intro .dialog-overlay__body {
  margin-top: 0;
}
.district-intro-text {
  font-size: clamp(26px, 4.4vw, 46px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ui-text-color);
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  white-space: pre-line;
}
.dialog-overlay--district-intro .district-intro-text {
  font-size: clamp(22px, 3.6vw, 38px);
  margin-top: -8px;
  margin-bottom: 20px;
}

.dialog-overlay--summary .dialog-overlay__panel {
  width: min(900px, 94%);
  margin-top: 32px;
  background: rgba(8, 16, 28, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.dialog-overlay__panel {
  width: min(calc(900px * var(--dialog-frame-scale, 1)), 94%);
  max-height: 92%;
  padding: clamp(16px, calc(32px * var(--dialog-frame-scale, 1)), 32px);
  background: var(--swatch-mid);
  border-radius: 20px;
  border: 1px solid var(--swatch-border);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.65);
  color: var(--ui-text-color);
  font-family: var(--ui-font-family);
  text-align: center;
  box-sizing: border-box;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dialog-overlay--mission .dialog-overlay__panel {
  width: 100%;
  max-width: none;
  max-height: 100%;
  padding: clamp(32px, 4vw, 72px);
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--ui-text-color);
  font-family: var(--ui-font-family);
  text-align: left;
}
.dialog-overlay--title .dialog-overlay__panel,
.dialog-overlay--pause .dialog-overlay__panel {
  font-family: var(--ui-font-family);
}

.dialog-overlay--title .dialog-overlay__panel {
  width: 95%;
  max-width: none;
  background: transparent;
  border: none;
  box-shadow: none;
}

.dialog-overlay__title {
  font-size: calc(var(--ui-h1-size) * var(--dialog-frame-scale, 1));
  line-height: var(--ui-h1-line);
  margin: 0;
  color: var(--ui-text-color);
  font-weight: var(--ui-h1-weight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.dialog-overlay--title-page .dialog-overlay__title {
  margin-top: 0;
}
.dialog-overlay--mission .dialog-overlay__title {
  font-size: var(--ui-h1-size);
  line-height: var(--ui-h1-line);
  color: var(--ui-text-color);
  font-weight: var(--ui-h1-weight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dialog-overlay__body {
  font-size: calc(var(--ui-body-size) * var(--dialog-frame-scale, 1));
  line-height: var(--ui-body-line);
  color: var(--ui-text-color);
  margin-top: 12px;
  margin-bottom: 16px;
  white-space: pre-line;
  column-count: 1;
  column-gap: 0;
  width: 100%;
}
.dialog-overlay--mission .dialog-overlay__body {
  font-size: var(--ui-body-size);
  line-height: var(--ui-body-line);
  color: var(--ui-text-color);
  margin-top: 22px;
  max-width: none;
  letter-spacing: 0.01em;
  text-transform: none;
  width: 100%;
}


.mission-brief-text {
  margin: 12px 0 10px;
  font-size: var(--ui-h2-size);
  line-height: var(--ui-h2-line);
  font-weight: var(--ui-h2-weight);
  color: var(--ui-text-color);
  white-space: pre-line;
  column-count: 1;
  column-gap: 0;
  width: 100%;
}

.dialog-overlay--mission .mission-brief-text {
  line-height: 1.1;
  margin: 8px 0 6px;
}

body.layout-mobile .mission-brief-text,
body.layout-square .mission-brief-text,
body.layout-rotate-warning .mission-brief-text {
  font-size: 14px;
  line-height: 1.1;
  margin: 6px 0 4px;
}

body.layout-mobile .dialog-overlay--mission .dialog-overlay__body,
body.layout-square .dialog-overlay--mission .dialog-overlay__body,
body.layout-rotate-warning .dialog-overlay--mission .dialog-overlay__body {
  font-size: 14px;
  line-height: 1.25;
  margin-top: 10px;
}

body.layout-mobile .dialog-overlay--mission .dialog-overlay__title,
body.layout-square .dialog-overlay--mission .dialog-overlay__title,
body.layout-rotate-warning .dialog-overlay--mission .dialog-overlay__title {
  font-size: 26px;
  line-height: 1.1;
}
.mission-brief-problem {
  color: #ffd978;
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.formation-picker {
  width: 100%;
}

.formation-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: none;
  background: var(--swatch-accent-2);
  color: var(--ui-text-color-dark);
  text-align: center;
  box-shadow: 0 10px 20px rgba(110, 244, 255, 0.2);
  font-family: var(--ui-font-family);
  white-space: normal;
}

.formation-option__label,
.formation-option__desc,
.formation-option__stat {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.05;
  white-space: normal;
}

.formation-option__label {
  font-weight: var(--ui-h3-weight);
  font-size: var(--ui-h3-size);
  letter-spacing: 0.02em;
}

.formation-option__desc {
  font-weight: var(--ui-body-weight);
  font-size: var(--ui-body-size);
  margin-top: 2px;
}

.formation-option__stat {
  font-weight: var(--ui-body-weight);
  font-size: var(--ui-body-size);
  margin-top: 2px;
  color: rgba(20, 32, 54, 0.75);
}

@media (max-width: 720px) {
  .dialog-overlay--mission .formation-option__label {
    font-size: clamp(14px, 4.2vw, 18px);
  }
  .dialog-overlay--mission .formation-option__desc,
  .dialog-overlay--mission .formation-option__stat {
    font-size: clamp(10px, 3.2vw, 14px);
  }
  .dialog-overlay--mission .formation-option {
    padding: 8px 10px;
  }
}

body.layout-mobile .formation-picker,
body.layout-square .formation-picker,
body.layout-rotate-warning .formation-picker {
  gap: 8px;
}


.formation-prompt {
  font-size: var(--ui-h2-size);
  font-weight: var(--ui-h2-weight);
  line-height: var(--ui-h2-line);
  color: var(--ui-text-color);
}

.mission-brief-stack {
  width: 96%;
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.mission-brief-title {
  font-size: var(--announcement-h1-size);
  line-height: var(--announcement-h1-line);
  font-weight: var(--announcement-h1-weight);
  color: var(--ui-text-color);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mission-brief-subtitle {
  font-size: var(--announcement-h2-size);
  line-height: var(--announcement-h2-line);
  font-weight: var(--announcement-h2-weight);
  color: var(--ui-text-color);
}

.mission-brief-prompt {
  font-size: clamp(20px, 3.6vw, var(--announcement-h2-size));
  line-height: var(--announcement-h2-line);
  font-weight: var(--announcement-h2-weight);
  color: var(--ui-text-color);
}


.dialog-overlay__button {
  font-size: calc(var(--overlay-font-button) * var(--dialog-frame-scale, 1));
  margin-top: 28px;
  padding: 12px 24px;
  border-radius: 14px;
  border: none;
  background: var(--swatch-accent-2);
  color: var(--ui-text-color-dark);
  font-weight: var(--ui-body-weight);
  cursor: pointer;
  transition: transform 0.12s ease;
  flex-shrink: 0;
}

body.layout-mobile .dialog-overlay--mission .dialog-overlay__button,
body.layout-square .dialog-overlay--mission .dialog-overlay__button,
body.layout-rotate-warning .dialog-overlay--mission .dialog-overlay__button {
  margin-top: 12px;
}

.dialog-overlay__button:active {
  transform: translateY(2px);
}

.dialog-overlay__button:focus-visible {
  outline: 3px solid rgba(255, 244, 161, 0.95);
  outline-offset: 3px;
}

/* Mobile/small viewport overrides for DOM overlays (Save/Load/Settings/More). */
body.layout-mobile,
body.layout-square,
body.layout-rotate-warning {
  --overlay-font-title: 28px;
  --overlay-font-label: 16px;
  --overlay-font-toggle: 16px;
  --overlay-font-value: 16px;
  --overlay-font-button: 16px;
  --overlay-font-input-label: 14px;
  --overlay-font-input: 16px;
  --overlay-font-hint: 13px;
  --overlay-font-action: 14px;
  --overlay-font-more-icon: 18px;
  --overlay-font-more-name: 18px;
  --overlay-font-more-desc: 14px;
}

body.layout-mobile .dialog-overlay__panel,
body.layout-square .dialog-overlay__panel,
body.layout-rotate-warning .dialog-overlay__panel,
body.layout-mobile .dialog-overlay--settings .dialog-overlay__panel,
body.layout-square .dialog-overlay--settings .dialog-overlay__panel,
body.layout-rotate-warning .dialog-overlay--settings .dialog-overlay__panel,
body.layout-mobile .dialog-overlay--panel-default .dialog-overlay__panel,
body.layout-square .dialog-overlay--panel-default .dialog-overlay__panel,
body.layout-rotate-warning .dialog-overlay--panel-default .dialog-overlay__panel {
  width: min(96vw, 720px);
  max-height: calc(100% - 20px);
  padding: 16px;
  overflow: auto;
}

body.layout-mobile .dialog-overlay--title-page .dialog-overlay__panel,
body.layout-square .dialog-overlay--title-page .dialog-overlay__panel,
body.layout-rotate-warning .dialog-overlay--title-page .dialog-overlay__panel {
  width: min(98vw, 920px);
  max-height: calc(100% - 20px);
  padding: 12px 12px 16px;
}

body.layout-mobile .save-picker__list,
body.layout-square .save-picker__list,
body.layout-rotate-warning .save-picker__list {
  max-height: min(54dvh, 420px);
}

body.layout-mobile .save-picker__item,
body.layout-square .save-picker__item,
body.layout-rotate-warning .save-picker__item {
  grid-template-columns: auto 1fr;
}

body.layout-mobile .save-picker__actions,
body.layout-square .save-picker__actions,
body.layout-rotate-warning .save-picker__actions,
body.layout-mobile .save-dialog__actions,
body.layout-square .save-dialog__actions,
body.layout-rotate-warning .save-dialog__actions {
  justify-content: stretch;
}

body.layout-mobile .save-picker__actions .settings-btn--hellfire,
body.layout-square .save-picker__actions .settings-btn--hellfire,
body.layout-rotate-warning .save-picker__actions .settings-btn--hellfire,
body.layout-mobile .save-dialog__actions .save-dialog__btn-cancel,
body.layout-mobile .save-dialog__actions .save-dialog__btn-primary,
body.layout-square .save-dialog__actions .save-dialog__btn-cancel,
body.layout-square .save-dialog__actions .save-dialog__btn-primary,
body.layout-rotate-warning .save-dialog__actions .save-dialog__btn-cancel,
body.layout-rotate-warning .save-dialog__actions .save-dialog__btn-primary {
  flex: 1 1 0;
  min-height: 42px;
}

.settings-toggle input:focus-visible,
.settings-slider input[type="range"]:focus-visible {
  outline: 3px solid rgba(255, 244, 161, 0.95);
  outline-offset: 3px;
}

.title-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
  align-items: center;
}
.title-menu__button {
  width: min(200px, 42vw);
  padding: 10px 18px;
  border-radius: 14px;
  border: none;
  background: var(--swatch-accent-2);
  color: var(--ui-text-color-dark);
  font-size: var(--ui-body-size);
  font-weight: var(--ui-body-weight);
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(155, 217, 255, 0.25);
}
.title-menu__button:active {
  transform: translateY(2px);
}

.dev-playtest-quick-actions {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1400;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 162px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(250, 193, 112, 0.42);
  background: linear-gradient(180deg, rgba(27, 18, 12, 0.94) 0%, rgba(18, 12, 8, 0.94) 100%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.dev-playtest-quick-actions__label {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(253, 217, 158, 0.9);
}

.dev-playtest-quick-actions__button {
  border: 1px solid rgba(255, 196, 98, 0.4);
  background: rgba(255, 154, 58, 0.16);
  color: #f6e4c8;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.dev-playtest-quick-actions__button:hover {
  background: rgba(255, 172, 78, 0.24);
}

.dev-playtest-quick-actions__button:active {
  transform: translateY(1px);
}