:root {
      color-scheme: dark;
      --panel: #1b1f24;
      --panel2: #2b3138;
      --line: #7f8b95;
      --accent: #f0b429;
      --green: #42d66b;
      --red: #ff5252;
      --blue: #58a6ff;
      --pixel: "Courier New", ui-monospace, monospace;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      min-height: 100%;
      background:
        radial-gradient(circle at 50% -20%, #28445f 0, #101924 45%, #070b10 100%);
      font-family: var(--pixel);
      overflow-x: hidden;
    }

    body {
      display: grid;
      place-items: center;
      padding: 12px;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
    }

    .app {
      position: relative;
      width: min(1180px, 100%);
      transform-origin: top center;
      border: 4px solid #0a0d10;
      outline: 2px solid #6f7a84;
      background: #050708;
      box-shadow: 0 22px 60px #000a;
      image-rendering: pixelated;
    }

    .trip-banner {
      padding: 10px 14px 8px;
      background: #000;
      border-bottom: 3px solid #111;
    }

    .pk-status-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 6px 10px;
      background: #050608;
      border-bottom: 3px solid #111;
      color: #dfe6ec;
      text-transform: uppercase;
      letter-spacing: .04em;
      font-weight: 700;
    }

    .pk-status-bar span {
      color: #aeb9c3;
      font-size: clamp(10px, 1.2vw, 13px);
    }

    .pk-status-bar strong {
      color: #ffe44d;
      font-size: clamp(14px, 1.8vw, 20px);
      text-shadow: 1px 1px #211300;
    }

    .scenario-status-bar {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: stretch;
      padding: 8px 10px;
      background: #06080a;
      border-bottom: 3px solid #111;
    }

    .top-action-buttons {
      display: grid;
      grid-template-columns: repeat(2, minmax(96px, 120px));
      gap: 8px;
      align-items: stretch;
    }

    .menu-btn {
      display: grid;
      place-items: center;
      min-width: 0;
      min-height: 40px;
      border: 3px solid #080a0b;
      outline: 1px solid #69737d;
      background: linear-gradient(#3d4b57, #182128);
      color: #fff;
      font: 700 14px var(--pixel);
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: inset 0 2px #85939e, 0 3px #020304;
    }

    .help-btn {
      background: linear-gradient(#315f8d, #16324d);
      box-shadow: inset 0 2px #75a8d8, 0 3px #020304;
    }

    .menu-btn:hover,
    .menu-btn:focus-visible {
      filter: brightness(1.12);
    }

    .menu-btn:active { transform: translateY(2px); box-shadow: inset 0 1px #fff6, 0 1px #020304; }

    .scenario-state-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 46px;
      padding: 5px 10px;
      background: #000;
      border: 2px solid #58626b;
      color: #e7edf2;
      font-size: clamp(10px, 1.35vw, 14px);
      line-height: 1.45;
      text-transform: uppercase;
    }

    .main-menu-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: grid;
      place-items: center;
      padding: 5vh 5vw;
      background: rgba(0,0,0,.84);
    }

    .main-menu-overlay[hidden] { display: none; }

    .main-menu-dialog {
      position: relative;
      width: 90vw;
      height: 90vh;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      padding: 16px 16px 34px;
      overflow: auto;
      border: 5px solid #090b0d;
      outline: 3px solid #7d8790;
      background: linear-gradient(#202830, #0c1116);
      box-shadow: 0 18px 60px #000;
      text-align: center;
    }

    .main-menu-header-actions {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 6;
      display: flex;
      align-items: stretch;
      gap: 8px;
    }

    .language-toggle,
    .progression-toggle,
    .manual-toggle {
      position: static;
      min-width: 104px;
      padding: 8px 10px;
      border: 3px solid #080a0b;
      outline: 2px solid #7d8790;
      background: linear-gradient(#f0f4f7, #9ca8b2);
      color: #10151a;
      font: 700 clamp(9px, 1vw, 12px) var(--pixel);
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: inset 0 2px #ffffff, 0 4px #050607;
    }

    .progression-toggle {
      background: linear-gradient(#f0c754, #9a6818);
      color: #151009;
      box-shadow: inset 0 2px #fff0a7, 0 4px #050607;
    }

    .manual-toggle {
      display: grid;
      place-items: center;
      background: linear-gradient(#dce7ef, #8294a3);
      color: #10151a;
      text-decoration: none;
      box-shadow: inset 0 2px #ffffff, 0 4px #050607;
    }

    .language-toggle:active,
    .progression-toggle:active,
    .manual-toggle:active,
    .progression-close-btn:active {
      transform: translateY(2px);
      box-shadow: inset 0 2px #ffffff, 0 2px #050607;
    }

    .progression-panel {
      position: absolute;
      inset: 58px 18px 18px;
      z-index: 5;
      box-sizing: border-box;
      overflow: auto;
      padding: 14px;
      border: 4px solid #080a0b;
      outline: 2px solid #87929b;
      background: rgba(8, 13, 18, .985);
      color: #fff;
      box-shadow: 0 12px 36px rgba(0,0,0,.72), inset 0 0 0 2px #27323a;
      text-align: left;
    }

    .progression-panel[hidden] { display: none !important; }

    .progression-panel-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 6px;
    }

    .progression-panel-kicker {
      color: #f0c754;
      font: 700 clamp(8px, .9vw, 11px) var(--pixel);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .progression-panel h2 {
      margin: 4px 0 0;
      color: #fff;
      font: 700 clamp(14px, 1.55vw, 20px) var(--pixel);
      text-transform: uppercase;
    }

    .progression-close-btn {
      flex: 0 0 auto;
      min-width: 96px;
      padding: 7px 9px;
      border: 3px solid #080a0b;
      outline: 1px solid #7d8790;
      background: linear-gradient(#6f7a84, #303941);
      color: #fff;
      font: 700 clamp(8px, .9vw, 11px) var(--pixel);
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: inset 0 2px #a7b0b7, 0 3px #050607;
    }

    .progression-panel-note {
      margin: 0 0 12px;
      color: #cdd6dd;
      font: 700 clamp(8px, .85vw, 11px) / 1.4 var(--pixel);
    }

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

    .progression-scenario-card {
      display: grid;
      grid-template-columns: minmax(145px, .9fr) minmax(110px, .65fr) minmax(220px, 1.25fr);
      gap: 12px;
      align-items: center;
      min-height: 104px;
      padding: 10px;
      border: 3px solid #080a0b;
      outline: 1px solid #4f5a63;
      background: linear-gradient(135deg, rgba(58,72,84,.34), rgba(11,16,21,.96));
      box-shadow: inset 0 0 0 1px #253039;
    }

    .progression-scenario-name {
      color: #fff;
      font: 700 clamp(9px, .95vw, 12px) / 1.35 var(--pixel);
      text-transform: uppercase;
    }

    .progression-main-badge {
      display: grid;
      justify-items: center;
      gap: 4px;
      text-align: center;
    }

    .progression-main-badge img {
      width: 72px;
      height: 72px;
      object-fit: contain;
      image-rendering: auto;
    }

    .progression-main-badge span,
    .progression-aux-title {
      color: #dce4ea;
      font: 700 clamp(7px, .75vw, 10px) var(--pixel);
      text-transform: uppercase;
    }

    .progression-main-badge.empty {
      color: #79838c;
      font: 700 22px var(--pixel);
    }

    .progression-aux-wrap {
      display: grid;
      gap: 7px;
    }

    .progression-aux-badges {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .progression-aux-badge {
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 4px;
      min-height: 74px;
      padding: 5px;
      border: 2px solid #39444d;
      background: #090e12;
      text-align: center;
    }

    .progression-aux-badge img {
      width: 44px;
      height: 44px;
      object-fit: contain;
    }

    .progression-aux-badge span {
      color: #dce4ea;
      font: 700 clamp(6px, .62vw, 8px) / 1.25 var(--pixel);
      text-transform: uppercase;
    }

    .progression-aux-badge.locked {
      opacity: .36;
      filter: grayscale(1);
    }

    @media (max-width: 1050px) {
      .progression-grid { grid-template-columns: 1fr; }
      .progression-scenario-card {
        grid-template-columns: minmax(135px, .85fr) 105px minmax(210px, 1.15fr);
      }
    }

    .main-menu-dialog h1 {
      flex: 0 0 auto;
      width: 50.4%;
      margin: 0 auto 12px;
      color: #ffe44d;
      font-size: clamp(14px, 2.25vw, 27px);
      text-transform: uppercase;
      letter-spacing: .06em;
      text-shadow: 3px 3px #4b2400;
    }


    .progression-access {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px 14px;
      align-items: center;
      margin-top: 14px;
      padding: 12px;
      border: 2px solid #6c8fbd;
      background: #0b1117;
      text-align: left;
    }

    .progression-access[hidden] {
      display: none !important;
    }

    .progression-access p {
      margin: 0;
      color: #dce5ec;
      font-size: clamp(9px, 1vw, 12px);
      line-height: 1.35;
    }

    .progression-access-link {
      display: grid;
      place-items: center;
      min-height: 38px;
      padding: 7px 11px;
      border: 3px solid #080a0b;
      outline: 1px solid #d49a36;
      background: linear-gradient(#e3a22b, #854d08);
      color: #fff;
      font: 700 clamp(8px, .9vw, 11px) / 1.2 var(--pixel);
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      box-shadow: inset 0 2px #ffd987, 0 3px #020304;
    }

    .progression-access-link:hover,
    .progression-access-link:focus-visible {
      filter: brightness(1.12);
    }

    .progression-access-link:active {
      transform: translateY(2px);
    }

    .main-menu-hero {
      flex: 1.6 1 auto;
      min-height: 0;
      margin: 0 auto 12px;
      width: 40.32%;
      padding: 6px;
      border: 4px solid #090b0d;
      outline: 2px solid #7d8790;
      background: linear-gradient(#1e252c, #0a0f13);
      box-shadow: inset 0 0 0 2px #3d464f;
    }

    .main-menu-hero img {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 0;
      object-fit: cover;
      object-position: center 62%;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      border: 3px solid #d9e0e7;
      box-shadow: 0 0 0 2px #1b2127, 0 8px 22px rgba(0,0,0,.38);
      background: #12243a;
    }

    .main-menu-hero-caption {
      margin-top: 8px;
      color: #dce4ea;
      font: 700 clamp(9px, 1.2vw, 12px) var(--pixel);
      letter-spacing: .05em;
      text-transform: uppercase;
      opacity: .92;
    }

    /* v380: commercial/activation UI must disappear completely once full access is active.
       Explicit !important is required because these components define their own display values. */
    [data-full-access-cta-container][hidden],
    [data-full-access-cta][hidden] {
      display: none !important;
    }

    .access-code-panel {
      flex: 0 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(280px, .9fr);
      grid-template-areas:
        "engagement controls"
        "purchase controls";
      gap: 8px 14px;
      align-items: center;
      width: 82%;
      margin: 0 auto 12px;
      padding: 12px 14px;
      border: 2px solid #6c8fbd;
      background:
        linear-gradient(135deg, rgba(44, 91, 154, .22), transparent 58%),
        #090d11;
      box-shadow: inset 0 0 0 2px #05080b;
      text-align: left;
    }

    .access-code-engagement {
      grid-area: engagement;
      margin: 0;
      color: #ffffff;
      font-size: clamp(11px, 1.3vw, 17px);
      font-weight: 700;
      line-height: 1.35;
      text-transform: uppercase;
    }

    .access-code-row {
      grid-area: controls;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: stretch;
    }

    .access-code-row input {
      min-width: 0;
      min-height: 42px;
      padding: 8px 10px;
      border: 3px inset #59626b;
      background: #050806;
      color: #eef4f7;
      font: 700 clamp(11px, 1.3vw, 14px) var(--pixel);
    }

    .access-code-row input::placeholder {
      color: #7f8a93;
      opacity: 1;
    }

    .access-code-row input,
    .simulation-pseudo-field input {
      user-select: text;
      -webkit-user-select: text;
      touch-action: auto;
      caret-color: currentColor;
      text-transform: none;
    }

    .access-code-btn {
      min-width: 100px;
      border: 3px solid #080a0b;
      outline: 1px solid #69737d;
      background: linear-gradient(#4f7ee8, #173c8f);
      color: #fff;
      font: 700 clamp(10px, 1.15vw, 13px) var(--pixel);
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: inset 0 2px #9ab9ff, 0 3px #020304;
    }

    .access-code-btn:active {
      transform: translateY(2px);
      box-shadow: inset 0 1px #fff6, 0 1px #020304;
    }

    .access-code-message {
      grid-area: controls;
      align-self: end;
      justify-self: stretch;
      z-index: 2;
      min-height: 1.2em;
      margin: 0 112px -1.5em 0;
      color: #aeb9c3;
      font-size: clamp(7px, .8vw, 10px);
      line-height: 1.2;
      pointer-events: none;
      text-transform: uppercase;
    }

    .access-code-message:empty {
      display: none;
    }

    .access-code-message.valid {
      color: #65ed87;
    }

    .access-code-message.invalid {
      color: #ff8a8a;
    }

    .access-code-purchase-link {
      grid-area: purchase;
      display: grid;
      place-items: center;
      min-height: 38px;
      padding: 6px 10px;
      border: 3px solid #080a0b;
      outline: 1px solid #d49a36;
      background: linear-gradient(#e3a22b, #854d08);
      color: #ffffff;
      font-size: clamp(9px, 1vw, 12px);
      font-weight: 700;
      line-height: 1.2;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      box-shadow: inset 0 2px #ffd987, 0 3px #020304;
    }

    .access-code-purchase-link:hover,
    .access-code-purchase-link:focus-visible {
      filter: brightness(1.12);
    }

    .access-code-purchase-link:active {
      transform: translateY(2px);
      box-shadow: inset 0 1px #fff6, 0 1px #020304;
    }

    .scenario-browser {
      flex: 0 0 auto;
      display: grid;
      grid-template-columns: minmax(160px, 0.85fr) minmax(240px, 1.15fr) minmax(220px, 0.95fr);
      align-items: stretch;
      width: min(82%, 980px);
      height: 224px;
      min-height: 224px;
      max-height: 224px;
      margin: 0 auto 12px;
      border: 3px solid #080a0b;
      outline: 2px solid #707b85;
      background: #090d11;
      box-shadow: inset 0 0 0 2px #252d34, 0 5px #050607;
      text-align: left;
      overflow: hidden;
    }

    .scenario-tabs {
      grid-column: 1;
      grid-row: 1;
      display: grid;
      grid-template-columns: 1fr;
      gap: 4px;
      height: 100%;
      min-height: 0;
      padding: 4px 6px 4px 4px;
      background: #111820;
      border-right: 3px solid #080a0b;
      overflow-y: auto;
      overflow-x: hidden;
      align-content: start;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: #7f8a94 #0b1015;
    }

    .scenario-tabs::-webkit-scrollbar {
      width: 10px;
    }

    .scenario-tabs::-webkit-scrollbar-track {
      background: #0b1015;
      border-left: 1px solid #28323a;
    }

    .scenario-tabs::-webkit-scrollbar-thumb {
      background: linear-gradient(#909aa3, #56606a);
      border: 1px solid #111820;
    }

    .scenario-tabs::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(#aab3bb, #65707a);
    }

    .scenario-tab {
      min-height: 54px;
      padding: 10px 8px;
      border: 3px solid #080a0b;
      background: linear-gradient(#4b555e, #242b31);
      color: #c6ced5;
      font: 700 clamp(9px, 1.1vw, 13px) var(--pixel);
      letter-spacing: .05em;
      text-transform: uppercase;
      text-align: center;
      cursor: pointer;
      box-shadow: inset 0 2px #69747e;
    }

    .scenario-tab:hover,
    .scenario-tab:focus-visible {
      filter: brightness(1.12);
    }

    .scenario-tab.is-active {
      position: relative;
      z-index: 1;
      background: linear-gradient(#d9e2e9, #7e8b96);
      color: #10161b;
      box-shadow: inset 0 3px #ffffff;
    }

    .scenario-tab-panel {
      grid-column: 2 / 4;
      grid-row: 1;
      height: 100%;
      min-height: 0;
      padding: 13px 14px 15px;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: #7f8a94 #0b1015;
      background:
        linear-gradient(135deg, rgba(67, 86, 104, .16), transparent 54%),
        #0b1015;
    }

    .scenario-tab-panel::-webkit-scrollbar {
      width: 10px;
    }

    .scenario-tab-panel::-webkit-scrollbar-track {
      background: #0b1015;
      border-left: 1px solid #28323a;
    }

    .scenario-tab-panel::-webkit-scrollbar-thumb {
      background: linear-gradient(#909aa3, #56606a);
      border: 1px solid #111820;
    }

    .scenario-tab-panel[hidden] { display: none; }

    #scenarioPanelBase.is-active,
    #scenarioPanelAdvanced.is-active,
    #scenarioPanelDisruption.is-active {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
      gap: 14px;
      align-items: start;
      align-content: start;
    }

    .scenario-buttons {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      width: 100%;
      margin: 0;
      align-content: start;
    }

    .scenario-theme-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      width: 100%;
    }

    .scenario-theme-grid.single {
      grid-column: 1;
      grid-template-columns: 1fr;
      justify-content: stretch;
      align-content: start;
      width: 100%;
      min-height: 0;
    }

    .scenario-btn {
      position: relative;
      min-height: 58px;
      padding: 8px;
      border: 4px solid #080a0b;
      outline: 2px solid #7d8790;
      background: linear-gradient(#34c95f, #0f6728);
      color: #fff;
      font: 700 clamp(10px, 1.3vw, 15px) var(--pixel);
      line-height: 1.35;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: inset 0 3px #8ff7a8, 0 5px #050607;
    }

    .scenario-btn.secondary { background: linear-gradient(#4f7ee8, #173c8f); box-shadow: inset 0 3px #9ab9ff, 0 5px #050607; }
    .scenario-btn.ato { background: linear-gradient(#e3a22b, #854d08); box-shadow: inset 0 3px #ffd987, 0 5px #050607; }
    .scenario-btn.advanced { background: linear-gradient(#7b68c7, #3a287f); box-shadow: inset 0 3px #b6a7f1, 0 5px #050607; }
    .scenario-btn.disruption { background: linear-gradient(#d55f54, #7a201d); box-shadow: inset 0 3px #f4a199, 0 5px #050607; }
    .scenario-btn:disabled {
      background: linear-gradient(#565d63, #242a2f);
      color: #aeb5bb;
      box-shadow: inset 0 3px #737b82, 0 5px #050607;
      cursor: not-allowed;
      filter: grayscale(.45);
      opacity: .82;
    }
    .scenario-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 1px #fff7, 0 2px #050607; }

    .scenario-coming-soon {
      display: block;
      margin-top: 6px;
      color: #d9e0e6;
      font-size: clamp(7px, .8vw, 10px);
      letter-spacing: .08em;
    }

    .scenario-options {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      width: 100%;
      margin: 0;
      text-align: left;
      color: #fff;
      font-size: clamp(9px, 1.08vw, 13px);
      text-transform: uppercase;
      align-content: start;
    }

    .scenario-options label {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 58px;
      padding: 9px 10px;
      background: #090d11;
      border: 2px solid #58626b;
      cursor: pointer;
    }

    .scenario-options input { width: 18px; height: 18px; accent-color: #31c75b; }

    .scenario-options label.locked {
      color: #858e96;
      cursor: not-allowed;
      filter: grayscale(1);
      opacity: .72;
    }

    .scenario-options input:disabled {
      cursor: not-allowed;
    }

    @media (max-width: 620px) {
      .scenario-status-bar {
        grid-template-columns: 1fr;
      }

      .top-action-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .access-code-panel,
      .scenario-browser {
        width: 92%;
      }

      .scenario-browser {
        grid-template-columns: 1fr;
        grid-template-rows: 160px minmax(0, 1fr);
        height: 420px;
        min-height: 420px;
        max-height: 420px;
      }

      .scenario-tabs {
        grid-column: 1;
        grid-row: 1;
        grid-template-columns: 1fr;
        gap: 4px;
        height: 160px;
        padding: 4px;
        border-right: 0;
        border-bottom: 3px solid #080a0b;
      }

      .scenario-tab-panel {
        grid-column: 1;
        grid-row: 2;
        height: 100%;
      }

      #scenarioPanelBase.is-active,
      #scenarioPanelAdvanced.is-active,
      #scenarioPanelDisruption.is-active,
      .scenario-buttons,
      .scenario-options,
      .scenario-theme-grid,
      .scenario-theme-grid.single {
        grid-template-columns: 1fr;
      }

      .scenario-theme-grid.single {
        min-height: 84px;
      }

      .access-code-row {
        grid-template-columns: 1fr;
      }

      .progression-access {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .access-code-btn {
        grid-column: 1;
        grid-row: 2;
      }
    }


    .simulator-version {
      position: absolute;
      left: 10px;
      bottom: 8px;
      color: #9ea8b1;
      font: 700 clamp(8px, .72vw, 10px) var(--pixel);
      line-height: 1;
      letter-spacing: .04em;
      white-space: nowrap;
      opacity: .86;
      text-shadow: 1px 1px #000;
      pointer-events: none;
    }

    .trip-track {
      position: relative;
      height: 150px;
      background: #000;
      overflow: hidden;
    }

    /* Bande dédiée aux limitations, placée au-dessus des gares. */
    .trip-track::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 28px;
      background: #0a0d11;
      border-bottom: 1px solid #4c555e;
      box-shadow: inset 0 -1px 0 #000;
      z-index: 0;
    }

    .trip-line {
      position: absolute;
      left: 0;
      right: 0;
      top: 58px;
      height: 4px;
      background: #b04cc7;
      box-shadow: 0 0 0 1px rgba(255,255,255,.06);
    }

    .trip-station {
      position: absolute;
      top: 40px;
      width: 22px;
      height: 12px;
      background: #d9d9d9;
      border: 2px solid #171717;
      transform: translateX(-50%);
      box-shadow: inset 0 1px 0 #fff8;
      z-index: 2;
    }

    .trip-speed-limit {
      position: absolute;
      top: 0;
      width: 0;
      height: 58px;
      z-index: 1;
      pointer-events: none;
    }

    .trip-speed-limit-line {
      position: absolute;
      left: -1px;
      top: 27px;
      width: 2px;
      height: 31px;
      background: #fff;
      box-shadow: 0 0 3px #000;
    }

    .trip-speed-limit-value {
      position: absolute;
      left: 0;
      top: 7px;
      transform: translateX(-50%);
      color: #fff;
      font-size: clamp(9px, 1vw, 12px);
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
      text-shadow: 0 1px 3px #000, 1px 0 #000, -1px 0 #000;
    }

    .trip-speed-limit.at-start .trip-speed-limit-value {
      left: 3px;
      transform: none;
    }

    .trip-speed-limit.at-end .trip-speed-limit-value {
      left: auto;
      right: 3px;
      transform: none;
    }

    .trip-neutral-marker {
      position: absolute;
      top: 0;
      width: 0;
      height: 58px;
      z-index: 1;
      pointer-events: none;
    }

    .trip-neutral-marker-line {
      position: absolute;
      left: -1px;
      top: 27px;
      width: 2px;
      height: 31px;
      background: #dfe6ec;
      box-shadow: 0 0 3px #000;
    }

    .trip-neutral-marker-value {
      position: absolute;
      left: 0;
      top: 7px;
      transform: translateX(-50%);
      color: #ffffff;
      font-size: clamp(8px, .95vw, 12px);
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
      text-shadow: 0 1px 3px #000, 1px 0 #000, -1px 0 #000;
    }

    .trip-neutral-marker.at-start .trip-neutral-marker-value {
      left: 3px;
      transform: none;
    }

    .trip-neutral-marker.at-end .trip-neutral-marker-value {
      left: auto;
      right: 3px;
      transform: none;
    }

    .trip-signal-marker {
      position: absolute;
      top: 0;
      width: 0;
      height: 96px;
      z-index: 1;
      pointer-events: none;
    }

    .trip-signal-marker-line {
      position: absolute;
      left: -1px;
      top: 58px;
      width: 2px;
      height: 12px;
      background: #7f8993;
      box-shadow: 0 0 2px #000;
    }

    .trip-signal-marker-value {
      position: absolute;
      left: 0;
      top: 73px;
      transform: translateX(-50%);
      min-width: 16px;
      padding: 1px 3px 0;
      border: 1px solid #bfc7cf;
      background: #000;
      color: #fff;
      font-size: clamp(8px, .9vw, 10px);
      font-weight: 800;
      line-height: 1.1;
      text-align: center;
      white-space: nowrap;
      box-shadow: 0 1px 3px #000;
    }

    .trip-signal-marker.at-start .trip-signal-marker-value {
      left: 3px;
      transform: none;
    }

    .trip-signal-marker.at-end .trip-signal-marker-value {
      left: auto;
      right: 3px;
      transform: none;
    }

    .trip-grade-marker {
      position: absolute;
      top: 0;
      width: 0;
      height: 124px;
      z-index: 1;
      pointer-events: none;
    }

    .trip-grade-marker-line {
      position: absolute;
      left: -1px;
      top: 90px;
      width: 2px;
      height: 10px;
      background: #d6e0ea;
      box-shadow: 0 0 2px #000;
    }

    .trip-grade-marker-value {
      position: absolute;
      left: 0;
      top: 103px;
      transform: translateX(-50%);
      min-width: 18px;
      padding: 0 2px;
      font-size: clamp(8px, .85vw, 10px);
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
      text-shadow: 0 1px 2px #000, 1px 0 #000, -1px 0 #000;
    }

    .trip-grade-marker.descent .trip-grade-marker-line,
    .trip-grade-marker.descent .trip-grade-marker-value {
      color: #86d5ff;
      background-color: transparent;
    }

    .trip-grade-marker.descent .trip-grade-marker-line {
      background: #86d5ff;
    }

    .trip-grade-marker.ascent .trip-grade-marker-line,
    .trip-grade-marker.ascent .trip-grade-marker-value {
      color: #ffd26e;
      background-color: transparent;
    }

    .trip-grade-marker.ascent .trip-grade-marker-line {
      background: #ffd26e;
    }

    .trip-grade-marker.at-start .trip-grade-marker-value {
      left: 3px;
      transform: none;
    }

    .trip-grade-marker.at-end .trip-grade-marker-value {
      left: auto;
      right: 3px;
      transform: none;
    }

    .trip-grade-marker.center .trip-grade-marker-line {
      display: none;
    }

    .trip-grade-marker.center .trip-grade-marker-value {
      top: 101px;
      min-width: 48px;
      padding: 2px 5px;
      border: 1px solid currentColor;
      background: #080b0e;
      font-size: clamp(9px, .95vw, 11px);
      text-align: center;
      box-shadow: 0 1px 3px #000;
    }

    .trip-pk-marker {
      position: absolute;
      top: 0;
      width: 0;
      height: 148px;
      z-index: 1;
      pointer-events: none;
    }

    .trip-pk-marker-line {
      position: absolute;
      left: -1px;
      top: 116px;
      width: 2px;
      height: 11px;
      background: #67717b;
      box-shadow: 0 0 2px #000;
    }

    .trip-pk-marker-value {
      position: absolute;
      left: 0;
      top: 130px;
      transform: translateX(-50%);
      color: #c9d2da;
      font-size: clamp(8px, .85vw, 10px);
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      text-shadow: 0 1px 2px #000, 1px 0 #000, -1px 0 #000;
    }

    .trip-pk-marker.at-start .trip-pk-marker-value {
      left: 3px;
      transform: none;
    }

    .trip-pk-marker.at-end .trip-pk-marker-value {
      left: auto;
      right: 3px;
      transform: none;
    }

    .trip-train {
      position: absolute;
      top: 42px;
      width: 12px;
      height: 12px;
      background: #e53935;
      border: 2px solid #480404;
      transform: translateX(-50%);
      box-shadow: 0 0 0 1px rgba(255,255,255,.08);
      z-index: 20;
    }

    .trip-train-number {
      position: absolute;
      top: 66px;
      color: #d8d8d8;
      font-size: clamp(10px, 1.1vw, 13px);
      font-weight: 700;
      line-height: 1;
      transform: translateX(-50%);
      white-space: nowrap;
      z-index: 22;
    }

    .trip-train--lead {
      background: #ef5350;
      border-color: #5b0c0c;
      z-index: 21;
    }

    .trip-train-number--lead {
      color: #f1b2b2;
      z-index: 23;
    }

    .topbar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px;
      padding: 8px 10px;
      background: #050505;
      border-bottom: 4px solid #111;
      text-transform: uppercase;
      letter-spacing: .04em;
      font-weight: 700;
    }

    .hud-cell {
      min-width: 0;
      text-align: center;
      color: #f6f7f8;
      font-size: clamp(11px, 1.7vw, 18px);
      line-height: 1.05;
    }

    .hud-cell strong {
      display: block;
      margin-top: 4px;
      color: #ffe44d;
      font-size: clamp(16px, 3vw, 32px);
      text-shadow: 2px 2px #411;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .hud-cell.speed strong { color: #ff4a4a; }
    .hud-cell.signal strong { color: var(--green); }
    .hud-cell.station strong {
      font-size: var(--station-hud-font-size, clamp(12px, 2.2vw, 23px));
      overflow: hidden;
      text-overflow: clip;
      white-space: nowrap;
    }

    .score-breakdown {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 3px;
      color: #c8d0d7;
      font-size: clamp(8px, .8vw, 10px);
      letter-spacing: .02em;
      white-space: nowrap;
    }

    .stage-wrap {
      position: relative;
      aspect-ratio: 16 / 9;
      background: #78c8ff;
      overflow: hidden;
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
    }

    .scenario-tutorial-panel {
      position: absolute;
      top: 14px;
      left: 14px;
      z-index: 5;
      display: grid;
      gap: 5px;
      width: min(38%, 360px);
      box-sizing: border-box;
      padding: 10px 12px;
      border: 3px solid #080a0b;
      outline: 2px solid #f0c754;
      background: rgba(8, 13, 18, .94);
      color: #ffffff;
      box-shadow:
        inset 0 0 0 2px #33404a,
        0 6px 18px rgba(0, 0, 0, .55);
      pointer-events: none;
      text-align: left;
    }

    .scenario-tutorial-panel[hidden] {
      display: none !important;
    }

    .scenario-tutorial-kicker {
      color: #f0c754;
      font-size: clamp(8px, .9vw, 11px);
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .scenario-tutorial-panel strong {
      color: #ffffff;
      font-size: clamp(11px, 1.3vw, 16px);
      line-height: 1.2;
      text-transform: uppercase;
    }

    .scenario-tutorial-panel p {
      margin: 0;
      color: #dce4ea;
      font-size: clamp(9px, 1vw, 12px);
      line-height: 1.4;
    }

    .scenario-tutorial-panel.is-hiding {
      opacity: 0;
      transition: opacity .22s ease;
    }

    .scenario-tutorial-panel.is-emergency {
      border-color: #240000;
      outline-color: #ff5a5a;
      background:
        linear-gradient(
          135deg,
          rgba(148, 0, 0, .32),
          transparent 70%
        ),
        rgba(19, 5, 7, .97);
      box-shadow:
        inset 0 0 0 2px #6b1d25,
        0 6px 18px rgba(0, 0, 0, .65);
    }

    .scenario-tutorial-panel.is-emergency
    .scenario-tutorial-kicker {
      color: #ff7777;
    }

    .scenario-tutorial-panel.is-emergency strong {
      color: #fff0f0;
    }

    @media (max-width: 760px) {
      .scenario-tutorial-panel {
        top: 8px;
        left: 8px;
        width: min(52%, 320px);
        padding: 8px 9px;
      }
    }

    .scanlines {
      pointer-events: none;
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 3px,
        rgba(0,0,0,.065) 4px
      );
      mix-blend-mode: multiply;
      opacity: .42;
    }

    .cab {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "instruments manipulators"
        "instruments commands";
      gap: 10px;
      padding: 10px;
      background: linear-gradient(#353b42, #191d22 28%, #0e1114);
      border-top: 5px solid #747d85;
      align-items: stretch;
    }

    .cab > .module:nth-child(1) {
      grid-area: instruments;
      min-height: 360px;
    }

    .cab > .module:nth-child(2) {
      grid-area: manipulators;
    }

    .cab > .module:nth-child(3) {
      grid-area: commands;
    }

    .module {
      position: relative;
      min-height: 220px;
      padding: 10px;
      border: 3px solid #07090a;
      outline: 1px solid #78828b;
      background: linear-gradient(135deg, #30363d, #171b20 55%, #101317);
      box-shadow: inset 0 0 0 2px #454d55, inset 0 0 18px #000a;
    }

    .module-title {
      margin: -2px 0 8px;
      text-align: center;
      color: #dce3e8;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: 14px;
    }

    .gauge-row {
      display: grid;
      grid-template-columns: 1.55fr 0.95fr;
      gap: 14px;
      align-items: center;
      min-height: 290px;
    }

    .gauge {
      position: relative;
      aspect-ratio: 1;
      border: 7px solid #0b0e11;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 55%, #111 0 45%, #20252a 46% 51%, #050607 52%);
      box-shadow: inset 0 0 0 2px #7b858f, 0 2px 0 #000;
      overflow: hidden;
    }

    .gauge::before {
      content: "";
      position: absolute;
    }

    .speed-stack {
      display: grid;
      grid-template-columns: 54px auto;
      gap: 14px;
      align-items: center;
      justify-content: center;
      min-height: 290px;
    }

    .station-stack {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      width: 54px;
      height: clamp(220px, 24vw, 290px);
      gap: 8px;
    }

    .station-progress {
      position: relative;
      flex: 1 1 auto;
      min-height: 0;
      border: 3px solid #090b0d;
      outline: 1px solid #6f7780;
      background: linear-gradient(#1e252b, #0c1013);
      box-shadow: inset 0 0 0 2px #2b3238;
      overflow: hidden;
      border-radius: 8px;
    }

    .station-progress::before {
      content: "";
      position: absolute;
    }

    .station-progress::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 10px;
      bottom: 10px;
      width: 14px;
      transform: translateX(-50%);
      background: #0b0f12;
      box-shadow: inset 0 0 0 1px #394047;
      border-radius: 8px;
    }

    .station-progress-fill {
      position: absolute;
      left: 50%;
      bottom: 10px;
      width: 14px;
      height: calc(100% - 20px);
      --fill-scale: 0;
      transform: translateX(-50%) scaleY(var(--fill-scale));
      transform-origin: 50% 100%;
      background: linear-gradient(#7aff95, #2ec157 55%, #0e6b28 100%);
      box-shadow: 0 0 10px #34d15f88;
      z-index: 1;
      border-radius: 8px;
    }

    .station-progress-value {
      display: grid;
      place-items: center;
      min-height: 32px;
      border: 2px solid #090b0d;
      outline: 1px solid #6f7780;
      background: linear-gradient(#1a1f24, #0b0f12);
      color: #dfe7ec;
      font-size: clamp(10px, 1vw, 13px);
      font-weight: 700;
      letter-spacing: .03em;
      border-radius: 6px;
      text-shadow: 0 0 6px rgba(255,255,255,.08);
    }

    .station-progress-fill {
      transition: transform .12s linear, opacity .12s linear;
    }

    .station-stack.signal-distance-inactive .station-progress-fill {
      opacity: 0;
      box-shadow: none;
    }

    .station-stack.signal-distance-inactive .station-progress-value {
      visibility: hidden;
    }

    .speed-gauge {
      position: relative;
      width: clamp(220px, 24vw, 290px);
      background: rgb(3, 17, 34);
      max-width: 100%;
      justify-self: center;
      align-self: center;
      flex: 0 0 auto;
      isolation: isolate;
    }

    .speed-gauge .gauge-label {
      z-index: 6;
      font-size: clamp(12px, 1.6vw, 18px);
      bottom: 13%;
      color: #ffffff;
    }

    .speed-arc {
      position: absolute;
      inset: 5%;
      z-index: 4;
      border-radius: 50%;
      --arc-deg: 0deg;
      --future-limit-deg: 0deg;
      background: conic-gradient(
        /* Lorsqu’un seul segment est affiché de 0 à la Vmax, il reste
           toujours gris foncé. */
        from 255deg,
        #30363c 0deg var(--arc-deg),
        transparent var(--arc-deg) 360deg
      );
      /* Segments widened by 10% toward the outside, inner edge unchanged. */
      /* V98: diamètre extérieur du segment principal augmenté exactement de 1 %, bord intérieur inchangé. */
      /* Outer diameter increased by 0.5% from the 25 px radial-width version;
         the inner radius remains unchanged. */
      /* V104: support enlarged from inset 7% to 5%. The absolute inner radius
         is preserved while the actual outer diameter is increased visibly. */
      -webkit-mask: radial-gradient(circle, transparent 0 62.0667%, #000 63.0667% 91.3664%, transparent 92.3664% 100%);
      mask: radial-gradient(circle, transparent 0 62.0667%, #000 63.0667% 91.3664%, transparent 92.3664% 100%);
      opacity: .98;
    }

    .overspeed-arc {
      position: absolute;
      inset: 5%;
      z-index: 4;
      border-radius: 50%;
      pointer-events: none;
      --overspeed-start-deg: 0deg;
      --overspeed-end-deg: 0deg;
      --overspeed-color: #f28c28;
      background: conic-gradient(
        from 255deg,
        transparent 0deg var(--overspeed-start-deg),
        var(--overspeed-color) var(--overspeed-start-deg) var(--overspeed-end-deg),
        transparent var(--overspeed-end-deg) 360deg
      );
      /* Même bord intérieur que la jauge normale, mais une épaisseur radiale
         doublée et développée uniquement vers l'extérieur. */
      /* V98: diamètre extérieur du segment de survitesse augmenté exactement de 1 %, bord intérieur inchangé. */
      -webkit-mask: radial-gradient(circle, transparent 0 62.0667%, #000 63.0667% 97.4667%, transparent 98.4667% 100%);
      mask: radial-gradient(circle, transparent 0 62.0667%, #000 63.0667% 97.4667%, transparent 98.4667% 100%);
      opacity: 0;
      transition: opacity .08s linear;
    }

    .overspeed-arc.active {
      opacity: .98;
    }

    .overspeed-arc.orange {
      --overspeed-color: #f28c28;
    }

    .overspeed-arc.red {
      --overspeed-color: #e32626;
      filter: drop-shadow(0 0 4px rgba(227, 38, 38, .75));
    }

    /* Scénario C : l'ancien segment orange Vmax -> Vmax+5 est une plage
       permanente en gris clair, indépendamment de la vitesse réelle. */
    .overspeed-arc.scenario-c-permanent-grey {
      --overspeed-color: #a5adb5;
      opacity: .98;
      filter: none;
    }

    .speed-arc.reduction-ahead {
      background: conic-gradient(
        from 255deg,
        #30363c 0deg var(--future-limit-deg),
        #30363c var(--future-limit-deg) var(--arc-deg),
        transparent var(--arc-deg) 360deg
      );
    }

    /* À l'approche d'une baisse de Vmax, seul le segment compris entre la
       future Vmax et la Vmax actuelle change de couleur. */
    .speed-arc.reduction-ahead.reduction-warning {
      background: conic-gradient(
        from 255deg,
        #30363c 0deg var(--future-limit-deg),
        #a5adb5 var(--future-limit-deg) var(--arc-deg),
        transparent var(--arc-deg) 360deg
      );
    }

    .speed-arc.reduction-ahead.reduction-urgent {
      background: conic-gradient(
        from 255deg,
        #30363c 0deg var(--future-limit-deg),
        #f0b429 var(--future-limit-deg) var(--arc-deg),
        transparent var(--arc-deg) 360deg
      );
    }

    /* Scénario C : le segment normalement jaune conserve la géométrie
       d'indication mais est affiché en gris clair. */
    .speed-arc.scenario-c-grey-guidance.reduction-ahead.reduction-urgent {
      background: conic-gradient(
        from 255deg,
        #30363c 0deg var(--future-limit-deg),
        #a5adb5 var(--future-limit-deg) var(--arc-deg),
        transparent var(--arc-deg) 360deg
      );
    }

    .speed-arc.increase-ahead {
      background: conic-gradient(
        from 255deg,
        #30363c 0deg var(--arc-deg),
        transparent var(--arc-deg) 360deg
      );
    }


    /* Approche d'un signal carré : un seul segment, entièrement jaune,
       de 0 à la Vmax progressive calculée. */
    .speed-arc.pn-responsibility-only {
      /* Même origine que les graduations et que la jauge standard : 0 km/h
         commence à 255°, puis la plage grise s'arrête exactement à 30 km/h. */
      background: conic-gradient(
        from 255deg,
        #30363c 0deg var(--arc-deg),
        transparent var(--arc-deg) 360deg
      );
    }

    .speed-arc.signal-approach {
      background: conic-gradient(
        from 255deg,
        #f0b429 0deg var(--arc-deg),
        transparent var(--arc-deg) 360deg
      );
    }

    /* Scénario C uniquement : la courbe d'arrêt devant un signal rouge
       conserve la même géométrie et la même logique FS, mais son segment
       est présenté en gris clair au lieu du jaune. */
    .speed-arc.scenario-c-grey-guidance.signal-approach {
      background: conic-gradient(
        from 255deg,
        #a5adb5 0deg var(--arc-deg),
        transparent var(--arc-deg) 360deg
      );
    }

    .dial-scale {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      color: #ffffff;
      font-size: clamp(8px, 0.95vw, 12px);
      font-weight: 700;
      text-shadow: 1px 1px #000;
    }

    .dial-scale .speed-tick {
      position: absolute;
      width: 2px;
      height: 12px;
      background: #ffffff;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 2px #000;
    }

    .dial-scale .speed-tick.major {
      width: 3px;
      height: 18px;
      background: #ffffff;
    }

    .dial-scale .speed-label {
      position: absolute;
      transform: translate(-50%, -50%);
      white-space: nowrap;
    }

    .effort-gauge {
      border-radius: 16px;
      aspect-ratio: auto;
      min-height: 290px;
      background: linear-gradient(180deg, #151a1f 0%, #0d1114 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 18px 14px 42px;
      overflow: visible;
    }

    .effort-gauge::before {
      content: "";
    }

    .effort-track {
      position: relative;
      width: 76px;
      height: 220px;
      border: 4px solid #090b0d;
      outline: 1px solid #6f7780;
      background: linear-gradient(180deg, #1f252b, #0b0f12);
      box-shadow: inset 0 0 0 2px #2b3238;
      overflow: hidden;
    }

    .effort-track::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 8px;
      bottom: 8px;
      width: 22px;
      transform: translateX(-50%);
      background: #0b0f12;
      box-shadow: inset 0 0 0 1px #394047;
    }

    .effort-zero {
      position: absolute;
      left: 8px;
      right: 8px;
      top: 50%;
      height: 3px;
      transform: translateY(-50%);
      background: #d9e0e6;
      box-shadow: 0 0 5px rgba(255,255,255,.22);
      z-index: 3;
    }

    .effort-fill-up,
    .effort-fill-down {
      position: absolute;
      left: 50%;
      width: 22px;
      transform: translateX(-50%);
      z-index: 2;
    }

    .effort-fill-up {
      bottom: 50%;
      height: 0%;
      background: linear-gradient(180deg, #8ef5a2 0%, #28c85e 45%, #0c6f30 100%);
      box-shadow: 0 0 10px rgba(52, 209, 95, .45);
    }

    .effort-fill-down {
      top: 50%;
      height: 0%;
      background: linear-gradient(180deg, #7e95ff 0%, #466cff 35%, #213cc9 100%);
      box-shadow: 0 0 10px rgba(83, 115, 255, .35);
    }

    .effort-scale {
      position: absolute;
      inset: 10px 6px 32px;
      pointer-events: none;
      color: #dfe5ea;
      font-size: clamp(10px, 1.05vw, 13px);
      font-weight: 700;
      letter-spacing: .03em;
      text-shadow: 0 0 6px rgba(0,0,0,.55);
      z-index: 5;
    }

    .effort-scale span {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    .effort-scale .p100 {
      top: 0;
    }

    .effort-scale .p0 {
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .effort-scale .n100 {
      bottom: 18px;
    }

    .effort-gauge .gauge-label {
      bottom: 8px;
      width: 100%;
      text-align: center;
      font-size: clamp(12px, 1.2vw, 16px);
      letter-spacing: .05em;
    }

    .needle {
      position: absolute;
      z-index: 5;
      left: 50%;
      top: 50%;
      width: 42%;
      height: 5px;
      transform-origin: 0 50%;
      transform: rotate(-135deg);
      background: #ff3d3d;
      box-shadow: 0 0 5px #f33;
    }

    .needle::after {
      content: "";
      position: absolute;
      left: -8px;
      top: -6px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #9aa1a8;
      border: 3px solid #222;
    }

    .gauge-label {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 15%;
      text-align: center;
      color: #fff;
      font-weight: 700;
      font-size: clamp(10px, 1.4vw, 16px);
    }

    .instrument-bottom {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 12px;
    }

    .digital {
      display: grid;
      place-items: center;
      min-height: 72px;
      border: 3px inset #59626b;
      background: #050806;
      color: #56f079;
      font-size: clamp(24px, 4.4vw, 50px);
      text-shadow: 0 0 10px #26f35a;
    }

    .status-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 12px;
    }

    .status-row-secondary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 12px;
      margin-top: 12px;
    }

    .status-display.franch-square .status-display-value {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-width: 0;
      color: #ffe05a;
      font-size: clamp(11px, 1.25vw, 17px);
      letter-spacing: .03em;
      white-space: nowrap;
    }

    .authorization-status-icon {
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      object-fit: contain;
      image-rendering: pixelated;
    }

    .status-display.franch-square.inactive .status-display-value {
      color: transparent;
      text-shadow: none;
    }

    .status-display.franch-square.inactive .authorization-status-icon {
      opacity: 0;
    }

    .status-display {
      display: grid;
      grid-template-rows: auto 1fr;
      min-height: 68px;
      padding: 8px 10px;
      border: 3px inset #59626b;
      background: #050806;
      box-shadow: inset 0 0 14px rgba(0,0,0,.65);
      text-align: center;
      text-transform: uppercase;
    }

    .status-display-label {
      color: #aab7c2;
      font-size: clamp(9px, .9vw, 12px);
      font-weight: 700;
      letter-spacing: .09em;
    }

    .status-display-value {
      align-self: center;
      color: #e8eef3;
      font-size: clamp(16px, 1.8vw, 22px);
      font-weight: 700;
      letter-spacing: .06em;
      line-height: 1.1;
      text-shadow: 0 0 8px rgba(255,255,255,.14);
    }


    .mode-status-value {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 0;
    }

    .mode-status-icon {
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      image-rendering: pixelated;
      object-fit: contain;
    }

    .mode-status-value span {
      min-width: 0;
      max-width: 100%;
      font-size: clamp(10px, 1.05vw, 14px);
      line-height: 1.05;
      letter-spacing: .02em;
      white-space: normal;
      overflow-wrap: anywhere;
      text-align: center;
    }

    .level-status-value {
      gap: 6px;
    }

    .level-status-icon {
      width: 28px;
      height: 28px;
      flex-basis: 28px;
    }

    .level-status-value span {
      font-size: clamp(9px, .95vw, 13px);
      line-height: 1;
      letter-spacing: .015em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .status-display.panto .status-display-value {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 30px;
      font-size: clamp(9px, 1vw, 13px);
      line-height: 1.05;
      overflow: hidden;
    }

    .panto-status-icon {
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      object-fit: contain;
      image-rendering: pixelated;
    }

    .panto-status-text {
      min-width: 0;
      max-width: 100%;
      white-space: normal;
      text-align: center;
      overflow-wrap: anywhere;
    }

    .status-chip {
      padding: 3px 8px;
      border: 2px solid #6a747d;
      background: #12181d;
      color: #7e8a94;
      border-radius: 4px;
    }

    .status-chip.active {
      color: #56f079;
      border-color: #56f079;
      box-shadow: 0 0 8px rgba(86,240,121,.22), inset 0 0 6px rgba(86,240,121,.1);
    }

    .eco-advice {
      display: grid;
      grid-template-rows: auto 1fr;
      place-items: center;
      min-height: 72px;
      padding: 7px 12px 9px;
      border: 3px inset #59626b;
      background: #050806;
      text-align: center;
      text-transform: uppercase;
      box-shadow: inset 0 0 14px rgba(0,0,0,.65);
    }

    .eco-advice-label {
      color: #aab7c2;
      font-size: clamp(9px, .9vw, 12px);
      font-weight: 700;
      letter-spacing: .09em;
    }

    .eco-advice strong {
      align-self: center;
      color: #56f079;
      font-size: clamp(18px, 2.35vw, 30px);
      letter-spacing: .08em;
      line-height: 1;
      text-shadow: 0 0 9px currentColor;
    }

    .eco-advice.coast strong {
      color: #ffd45e;
    }

    .eco-advice.maintain strong {
      color: #72c7ff;
    }

    .eco-advice.braking strong {
      color: #ff6b6b;
    }

    .eco-advice.suppressed .eco-advice-label,
    .eco-advice.suppressed strong {
      visibility: hidden;
    }

    .driving-event-panel {
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 5px;
      min-height: 118px;
      padding: 7px 10px 9px;
      border: 3px inset #59626b;
      background: #050806;
      box-shadow: inset 0 0 14px rgba(0,0,0,.65);
    }

    .driving-event-label {
      color: #aab7c2;
      font-size: clamp(9px, .9vw, 12px);
      font-weight: 700;
      letter-spacing: .09em;
      text-align: center;
      text-transform: uppercase;
    }

    .driving-event-log {
      width: 100%;
      min-height: 88px;
      box-sizing: border-box;
      resize: none;
      overflow-y: auto;
      padding: 6px 8px;
      border: 1px solid #39434b;
      background: #020403;
      color: #d7e0e6;
      font: 700 clamp(9px, .88vw, 11px)/1.35 var(--pixel);
      white-space: pre-wrap;
      scrollbar-color: #56616a #070a0c;
    }

    .driving-event-log:focus {
      outline: 1px solid #7f8b95;
    }

    .operator-zones {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 12px;
      min-height: 300px;
    }

    .operator-zone {
      min-width: 0;
      padding: 10px;
      border: 2px solid #090b0d;
      outline: 1px solid #59636c;
      background: linear-gradient(145deg, #272d33, #12161a 72%);
      box-shadow: inset 0 0 0 1px #3e474f;
    }

    .operator-zone-title {
      margin: 0 0 10px;
      text-align: center;
      color: #dce3e8;
      font-size: clamp(10px, 1.1vw, 13px);
      text-transform: uppercase;
      letter-spacing: .07em;
    }

    .combined-controller {
      display: grid;
      grid-template-columns: 76px 1fr;
      gap: 10px;
      min-height: 238px;
    }

    .lever-track {
      position: relative;
      min-height: 220px;
      border: 4px solid #080a0c;
      background: linear-gradient(90deg, #08090a, #1d2227 35%, #08090a 70%, #262b30);
      box-shadow: inset 0 0 0 2px #4e565e;
      cursor: ns-resize;
      touch-action: none;
    }

    .lever-track::after {
      content: "";
      position: absolute;
      left: 7px;
      right: 7px;
      top: 50%;
      height: 3px;
      transform: translateY(-50%);
      background: #e4e8eb;
      box-shadow: 0 0 5px #fff5;
      z-index: 1;
    }

    .lever-track.ato-locked {
      cursor: not-allowed;
      filter: saturate(.72) brightness(.88);
      box-shadow: inset 0 0 0 2px #d79a2d, 0 0 8px #d79a2d66;
    }

    .lever-track.ato-locked::before {
      content: "ATO";
      position: absolute;
      left: 50%;
      top: 6px;
      transform: translateX(-50%);
      padding: 2px 5px;
      border: 1px solid #ffd36e;
      background: #111;
      color: #ffd36e;
      font-size: 10px;
      font-weight: 800;
      line-height: 1;
      z-index: 4;
      pointer-events: none;
    }

    .lever-slot {
      position: absolute;
      top: 14px;
      bottom: 14px;
      left: 50%;
      width: 14px;
      transform: translateX(-50%);
      border-radius: 8px;
      background: #040505;
      box-shadow: inset 2px 0 #000, inset -2px 0 #343a3f;
    }

    .lever-handle {
      position: absolute;
      left: 50%;
      width: 58px;
      height: 27px;
      transform: translate(-50%, 50%);
      border: 3px solid #050606;
      border-radius: 5px;
      background: linear-gradient(#aeb5bc 0 12%, #3b4248 18% 65%, #101215 70%, #5a626a 100%);
      box-shadow: 0 5px 0 #050607, inset 0 2px #eef2f5;
      transition: bottom .11s steps(2, end);
      z-index: 2;
    }

    .ticks {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-width: 0;
      padding: 2px 0 3px;
      color: #dbe1e6;
      font-size: clamp(9px, 1.1vw, 13px);
      font-weight: 700;
      line-height: 1;
    }

    .ticks span {
      display: flex;
      align-items: center;
      min-height: 18px;
    }

    .ticks span::before {
      content: "";
      width: 9px;
      height: 2px;
      margin-right: 5px;
      background: #99a2aa;
    }

    .ticks .active { color: var(--accent); text-shadow: 0 0 7px #e9a522; }
    .ticks .traction { color: #72e68d; }
    .ticks .braking { color: #7fa0ff; }
    .ticks .danger { color: #ff5959; }
    .ticks .neutral { color: #ffffff; }

    .service-actions {
      display: grid;
      grid-template-columns: 1fr;
      align-content: center;
      gap: 16px;
      min-height: 238px;
    }

    .service-btn {
      min-height: 72px;
      border: 4px solid #080a0b;
      outline: 2px solid #555e66;
      background: linear-gradient(#2878d1, #0d3d7a);
      color: #fff;
      font: 700 clamp(11px, 1.3vw, 15px) var(--pixel);
      text-transform: uppercase;
      box-shadow: inset 0 3px #70b8ff, 0 4px #050607;
      cursor: pointer;
    }

    .service-btn.radio {
      background: linear-gradient(#ffc72e, #9c6500);
      color: #171100;
      box-shadow: inset 0 3px #fff18b, 0 4px #050607;
    }

    .service-btn.active,
    .service-btn:active {
      transform: translateY(3px);
      box-shadow: inset 0 1px #fff7, 0 1px #050607;
      filter: brightness(1.2);
    }

    .cab-window {
      position: fixed;
      z-index: 950;
      left: 50%;
      top: 18%;
      width: min(460px, 92vw);
      transform: translateX(-50%);
      padding: 18px;
      border: 5px solid #080a0c;
      outline: 2px solid #d7dee4;
      background: linear-gradient(145deg, #2c333a, #11161b 72%);
      box-shadow: 0 20px 70px #000, inset 0 0 0 2px #606b74;
    }

    .cab-window[hidden] { display: none; }

    .cab-window h3 {
      margin: 0 0 14px;
      color: #ffe44d;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: .07em;
    }

    .speed-diagnostic-window {
      width: min(540px, 92vw);
      top: 14%;
    }

    .speed-diagnostic-summary-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .speed-diagnostic-field-wide {
      margin-top: 10px;
    }

    .speed-diagnostic-field {
      display: grid;
      gap: 5px;
    }

    .speed-diagnostic-label {
      color: #b9c4cd;
      font-size: clamp(9px, 1vw, 12px);
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .speed-diagnostic-value {
      width: 100%;
      min-height: 42px;
      box-sizing: border-box;
      resize: none;
      overflow: hidden;
      padding: 9px 10px;
      border: 2px inset #59626b;
      background: #050806;
      color: #d7e0e6;
      font: 800 clamp(12px, 1.35vw, 16px)/1.25 var(--pixel);
      text-align: center;
      text-transform: uppercase;
    }

    .speed-diagnostic-value.neutral {
      color: #d7e0e6;
      border-color: #59626b;
    }

    .speed-diagnostic-value.indication {
      color: #f0b429;
      border-color: #f0b429;
      box-shadow: inset 0 0 10px rgba(240, 180, 41, .15);
    }

    .speed-diagnostic-value.warning {
      color: #f28c28;
      border-color: #f28c28;
      box-shadow: inset 0 0 10px rgba(242, 140, 40, .18);
    }

    .speed-diagnostic-value.intervention {
      color: #e32626;
      border-color: #e32626;
      box-shadow: inset 0 0 10px rgba(227, 38, 38, .2);
    }

    .speed-diagnostic-constraint {
      min-height: 50px;
      white-space: normal;
    }

    .speed-braking-reference {
      margin-top: 12px;
      padding: 10px;
      border: 1px solid #59626b;
      background: rgba(0, 0, 0, .28);
    }

    .speed-braking-reference-heading {
      color: #ffe44d;
      font-size: clamp(10px, 1.1vw, 13px);
      font-weight: 900;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .speed-braking-reference-subtitle {
      margin-top: 3px;
      color: #9eabb5;
      font-size: clamp(8px, .85vw, 10px);
      text-align: center;
      text-transform: uppercase;
    }

    .speed-braking-reference-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 9px;
    }

    .speed-braking-reference-item {
      display: grid;
      gap: 4px;
      padding: 8px 5px;
      border: 1px inset #59626b;
      background: #050806;
      text-align: center;
    }

    .speed-braking-reference-item strong {
      color: #d7e0e6;
      font-size: clamp(10px, 1vw, 12px);
    }

    .speed-braking-reference-item span {
      color: #f0b429;
      font: 900 clamp(12px, 1.35vw, 16px)/1.15 var(--pixel);
    }

    @media (max-width: 520px) {
      .speed-diagnostic-summary-grid {
        grid-template-columns: 1fr 1fr;
      }

      .speed-braking-reference-grid {
        grid-template-columns: 1fr;
      }
    }

    .speed-diagnostic-note {
      margin: 2px 0 0;
      color: #9eabb5;
      font-size: clamp(8px, .9vw, 11px);
      line-height: 1.35;
      text-align: center;
    }

    .schedule-table {
      width: 100%;
      border-collapse: collapse;
      color: #e7edf1;
      font-size: clamp(11px, 1.5vw, 15px);
    }

    .schedule-table th,
    .schedule-table td {
      padding: 9px 8px;
      border: 1px solid #5a6570;
      text-align: left;
    }

    .schedule-table th {
      background: #101418;
      color: #8fe0ff;
    }

    .schedule-table td:not(:first-child),
    .schedule-table th:not(:first-child) {
      text-align: center;
      white-space: nowrap;
    }

    .schedule-note {
      margin: 12px 0 0;
      color: #bfc8d0;
      font-size: clamp(9px, 1.1vw, 12px);
      line-height: 1.4;
      text-align: center;
    }

    .radio-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .dispatch-btn {
      min-height: 64px;
      padding: 9px 12px;
      border: 3px solid #07090a;
      background: linear-gradient(#34c95f, #0f6728);
      color: #fff;
      font: 700 clamp(11px, 1.35vw, 14px) var(--pixel);
      line-height: 1.35;
      text-transform: uppercase;
      cursor: pointer;
    }

    .radio-message {
      min-height: 112px;
      max-height: 260px;
      overflow-y: auto;
      margin-top: 14px;
      padding: 12px;
      border: 2px inset #59626b;
      background: #050806;
      color: #56f079;
      text-align: left;
      line-height: 1.45;
      white-space: pre-wrap;
    }

    .button-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 12px;
    }

    .cab-btn {
      min-height: 54px;
      border: 4px solid #080a0b;
      outline: 2px solid #555e66;
      background: linear-gradient(#2878d1, #0d3d7a);
      color: white;
      font: 700 clamp(10px, 1.35vw, 15px) var(--pixel);
      text-transform: uppercase;
      box-shadow: inset 0 3px #70b8ff, 0 4px #050607;
      cursor: pointer;
    }

    .cab-btn.yellow { background: linear-gradient(#ffc72e, #9c6500); color: #fff; box-shadow: inset 0 3px #fff18b, 0 4px #050607; }
    .cab-btn.red { background: linear-gradient(#e54b4b, #861919); color: #fff; box-shadow: inset 0 3px #ff9c9c, 0 4px #050607; }
    .cab-btn.green { background: linear-gradient(#34c95f, #0f6728); box-shadow: inset 0 3px #8ff7a8, 0 4px #050607; }
    .cab-btn:active, .cab-btn.active { transform: translateY(3px); box-shadow: inset 0 1px #fff7, 0 1px #050607; filter: brightness(1.25); }
    .cab-btn:disabled {
      transform: none;
      background: linear-gradient(#666d73, #34393e);
      color: #c4c9cd;
      box-shadow: inset 0 3px #8c9399, 0 4px #050607;
      filter: grayscale(.35) brightness(.75);
      cursor: not-allowed;
      opacity: .82;
    }

    .mum-service-switch {
      grid-column: span 2;
      min-height: 68px;
      display: grid;
      grid-template-columns: 1fr 54px 1fr;
      align-items: center;
      gap: 6px;
      padding: 6px 8px;
      background: linear-gradient(#59636d, #262c31);
      box-shadow: inset 0 3px #8b949d, 0 4px #050607;
      cursor: pointer;
    }

    .mum-service-switch[hidden] { display: none; }

    .mum-service-switch:active {
      transform: none;
      box-shadow: inset 0 3px #8b949d, 0 4px #050607;
      filter: none;
    }

    .mum-switch-label {
      font: 800 clamp(7px, .9vw, 11px) var(--pixel);
      line-height: 1.15;
      text-align: center;
      color: #d8dde1;
    }

    .mum-service-switch:not(.is-off) .mum-switch-label-on,
    .mum-service-switch.is-off .mum-switch-label-off {
      color: #ffffff;
      text-shadow: 0 0 5px rgba(255,255,255,.45);
    }

    .mum-rotary-knob {
      position: relative;
      width: 46px;
      height: 46px;
      margin: auto;
      border-radius: 50%;
      border: 4px solid #111518;
      outline: 2px solid #818990;
      background: radial-gradient(circle at 35% 30%, #90979d 0 16%, #525a60 38%, #252a2e 72%);
      box-shadow: inset 0 0 0 3px #394046, 0 2px 2px #050607;
    }

    .mum-rotary-pointer {
      position: absolute;
      left: 50%;
      top: 5px;
      width: 5px;
      height: 18px;
      margin-left: -2.5px;
      border-radius: 2px;
      background: #f4f6f7;
      box-shadow: 0 0 2px #000;
      transform-origin: 50% 18px;
      transform: rotate(-42deg);
      transition: transform .12s linear;
    }

    .mum-service-switch.is-off .mum-rotary-pointer {
      transform: rotate(42deg);
    }

    .lamps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-top: 12px;
      align-items: start;
    }

    .lamp-unit {
      display: grid;
      gap: 6px;
      justify-items: center;
    }

    .lamp {
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      aspect-ratio: 1.18;
      border: 4px solid #060708;
      outline: 1px solid #59626a;
      background: #181c20;
      color: #bbb;
      font-size: clamp(8px, 1vw, 12px);
      overflow: hidden;
    }

    .lamp::before {
      content: "";
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #101418;
      border: 4px solid #30363c;
      box-shadow: inset 0 0 9px #000;
    }

    .lamp.signal.on::before {
      background: #ffd33d;
      box-shadow: 0 0 15px #ffbf00, inset 0 0 8px #fff;
    }

    .lamp.sos::before {
      display: none;
    }

    .lamp.sos .fu-content {
      display: none;
      width: 100%;
      height: 100%;
      grid-template-columns: minmax(24px, 42%) 1fr;
      align-items: center;
      justify-items: center;
      gap: 4px;
      padding: 5px;
    }

    .lamp.sos.on .fu-content {
      display: grid;
    }

    .fu-icon {
      display: block;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      image-rendering: pixelated;
    }

    .fu-origin {
      color: #fff;
      font: 800 clamp(12px, 1.6vw, 20px) var(--pixel);
      letter-spacing: .05em;
      text-align: center;
      text-shadow: 0 0 5px #000;
      white-space: nowrap;
    }

    .lamp-legend {
      color: #eef2f5;
      font: 700 clamp(8px, .95vw, 12px) var(--pixel);
      text-transform: uppercase;
      letter-spacing: .04em;
      text-align: center;
    }

    .lamp-doors {
      padding: 6px;
      background: linear-gradient(180deg, #ebeff3, #c8d0d8);
    }

    .lamp-doors::before {
      display: none;
    }

    .door-status-content {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: minmax(24px, 46%) 1fr;
      align-items: center;
      justify-items: center;
      gap: 5px;
      padding: 4px;
      box-sizing: border-box;
    }

    .door-status-icon {
      display: block;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
    }

    .door-status-text {
      min-width: 0;
      color: #111;
      font: 800 clamp(8px, 1vw, 13px) var(--pixel);
      line-height: 1.05;
      text-align: center;
      text-transform: uppercase;
      overflow-wrap: anywhere;
    }

    .panto-command-button {
      display: grid;
      grid-template-columns: minmax(24px, 42%) 1fr;
      align-items: center;
      justify-items: center;
      gap: 5px;
      padding: 5px 7px;
    }

    .panto-button-icon {
      display: block;
      width: 100%;
      max-width: 42px;
      max-height: 42px;
      object-fit: contain;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      background: #e9edf0;
      border: 2px inset #6c747b;
      box-sizing: border-box;
    }

    .panto-button-text {
      min-width: 0;
      color: inherit;
      font: 800 clamp(8px, 1vw, 13px) var(--pixel);
      line-height: 1.05;
      text-align: center;
      text-transform: uppercase;
      overflow-wrap: anywhere;
    }

    .panto-command-button:disabled {
      grid-template-columns: 1fr;
    }

    .panto-command-button:disabled .panto-button-icon {
      display: none;
    }


    .help {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 12px 10px;
      background: #080b0e;
      border-top: 1px solid #48515a;
      color: #bfc8d0;
      font-size: clamp(9px, 1.2vw, 13px);
    }

    .help kbd {
      padding: 1px 6px;
      border: 1px solid #7b858d;
      background: #23282d;
      color: white;
      font-family: inherit;
    }

    .simulation-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: grid;
      place-items: center;
      box-sizing: border-box;
      padding: 8px;
      overflow: hidden;
      background: rgba(3, 6, 9, .82);
      backdrop-filter: blur(4px);
    }

    .simulation-overlay[hidden] {
      display: none;
    }

    .simulation-dialog {
      box-sizing: border-box;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 8px;
      width: min(1560px, calc(100vw - 16px));
      height: calc(100dvh - 16px);
      max-height: calc(100dvh - 16px);
      min-height: 0;
      padding: 10px 12px 12px;
      overflow: hidden;
      border: 5px solid #080a0c;
      outline: 2px solid #d7dee4;
      background: linear-gradient(145deg, #2c333a, #11161b 70%);
      box-shadow: 0 20px 70px #000, inset 0 0 0 2px #606b74;
      text-align: center;
    }

    .simulation-landscape-header {
      display: grid;
      grid-template-columns: minmax(260px, auto) minmax(0, 1fr);
      gap: 18px;
      align-items: center;
      min-width: 0;
      padding: 0 4px 7px;
      border-bottom: 2px solid #59636c;
      text-align: left;
    }

    .simulation-dialog h2 {
      margin: 0;
      color: #ffe44d;
      font-size: clamp(22px, 2.6vw, 38px);
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: .07em;
      text-shadow: 3px 3px #4b2400;
      white-space: nowrap;
    }

    .simulation-dialog p {
      margin: 0;
      color: #dbe3e9;
      font-size: clamp(10px, 1.15vw, 15px);
      line-height: 1.3;
      text-align: right;
      overflow-wrap: anywhere;
    }

    .simulation-landscape-grid {
      display: grid;
      grid-template-columns: minmax(250px, .82fr) minmax(360px, 1.16fr) minmax(300px, 1fr);
      gap: 10px;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }

    .simulation-landscape-column {
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }

    .simulation-landscape-column--left {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 8px;
    }

    .simulation-landscape-column--center {
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 8px;
    }

    .simulation-landscape-column--right {
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 8px;
    }

    .simulation-end-configuration {
      display: grid;
      gap: 5px;
      min-height: 0;
      margin: 0;
      text-align: left;
    }

    .simulation-end-configuration-row {
      display: grid;
      grid-template-columns: minmax(92px, .9fr) minmax(0, 1.2fr);
      gap: 7px;
      align-items: center;
      min-height: 0;
      padding: 5px 7px;
      border: 2px solid #68737c;
      background: #0b1014;
      box-shadow: inset 0 0 0 2px #050708;
    }

    .simulation-end-configuration-row span {
      color: #aeb9c3;
      font-size: clamp(8px, .82vw, 11px);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .simulation-end-configuration-row strong {
      min-width: 0;
      color: #ffffff;
      font-size: clamp(9px, .95vw, 12px);
      line-height: 1.15;
      text-align: right;
      text-transform: uppercase;
      overflow-wrap: anywhere;
    }

    .simulation-end-configuration-row strong.enabled {
      color: #56f079;
    }

    .simulation-end-configuration-row strong.disabled {
      color: #ff8a8a;
    }

    .simulation-global-badge {
      display: grid;
      grid-template-columns: minmax(82px, 42%) minmax(0, 1fr);
      gap: 9px;
      align-items: center;
      min-height: 0;
      margin: 0;
      padding: 8px;
      overflow: hidden;
      border: 2px solid #76818a;
      background: linear-gradient(145deg, #171d22, #0d1216 72%);
      box-shadow: inset 0 0 0 2px #080a0c;
    }


    .simulation-global-badge[hidden] {
      display: none !important;
    }

    .simulation-global-badge-visual-wrap {
      display: grid;
      place-items: center;
      min-width: 0;
      min-height: 0;
      height: 100%;
    }

    .simulation-global-badge-visual {
      display: block;
      width: min(100%, 132px);
      max-height: 100%;
      aspect-ratio: 1;
      object-fit: contain;
      filter: drop-shadow(0 6px 8px rgba(0,0,0,.35));
    }

    .simulation-global-badge-text {
      display: grid;
      gap: 5px;
      min-width: 0;
      text-align: left;
    }

    .simulation-global-badge-text span,
    .simulation-global-badge-text small {
      display: block;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .simulation-global-badge-text span {
      color: #aeb9c3;
      font-size: clamp(8px, .8vw, 11px);
      font-weight: 700;
    }

    .simulation-global-badge-text strong {
      color: #ffe44d;
      font-size: clamp(19px, 2.4vw, 32px);
      line-height: 1;
      text-transform: uppercase;
      text-shadow: 2px 2px #3e2500;
      overflow-wrap: anywhere;
    }

    .simulation-global-badge-text small {
      color: #c9d2d9;
      font-size: clamp(8px, .75vw, 10px);
      line-height: 1.25;
    }

    .simulation-category-rewards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
      gap: 7px;
      min-height: 0;
      margin: 0;
      overflow: hidden;
    }

    .simulation-category-rewards[hidden],
    .simulation-category-slot[hidden] {
      display: none !important;
    }

    .simulation-category-slot {
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 5px;
      min-width: 0;
      min-height: 0;
      padding: 6px;
      overflow: hidden;
      border: 2px solid #68737c;
      background: #10161a;
      box-shadow: inset 0 0 0 2px #050708;
    }

    .simulation-category-slot-media {
      display: grid;
      place-items: center;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      border: 2px dashed #39434b;
      background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
    }

    .simulation-category-slot-image {
      display: block;
      width: 100%;
      height: 100%;
      max-height: 100%;
      object-fit: cover;
      border: 2px solid #8b969f;
      box-shadow: 0 4px 8px rgba(0,0,0,.28);
    }

    .simulation-category-slot-label {
      color: #c9d2d9;
      font-size: clamp(8px, .75vw, 10px);
      font-weight: 700;
      line-height: 1.15;
      text-transform: uppercase;
      letter-spacing: .04em;
      text-align: center;
    }


    .simulation-score-recap {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 7px;
      min-height: 0;
      margin: 0;
    }

    .simulation-score-item {
      min-width: 0;
      min-height: 0;
      padding: 7px 5px 6px;
      border: 2px solid #76818a;
      background: #161c21;
      box-shadow: inset 0 0 0 2px #080a0c;
      color: #eef4f7;
    }

    .simulation-score-item span,
    .simulation-score-item small {
      display: block;
    }

    .simulation-score-item span {
      min-height: 2.2em;
      margin-bottom: 4px;
      color: #c9d2d9;
      font-size: clamp(7px, .72vw, 10px);
      line-height: 1.1;
      text-transform: uppercase;
      letter-spacing: .03em;
    }

    .simulation-score-item strong {
      display: block;
      color: #ffffff;
      font-size: clamp(19px, 2.4vw, 32px);
      line-height: 1;
      font-variant-numeric: tabular-nums;
      overflow-wrap: anywhere;
    }

    .simulation-score-item small {
      margin-top: 4px;
      color: #8f9ca5;
      font-size: clamp(7px, .68vw, 9px);
      letter-spacing: .05em;
    }

    .simulation-score-final {
      grid-column: auto;
      padding-block: 7px;
      border-color: #e5c82f;
      background: #20251b;
    }

    .simulation-score-final strong {
      color: #ffe44d;
      font-size: clamp(21px, 2.7vw, 36px);
      text-shadow: 2px 2px #4b2400;
    }

    .simulation-local-scores {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: 5px;
      min-height: 0;
      height: 100%;
      margin: 0;
      overflow: hidden;
      text-align: left;
    }

    .simulation-local-scores-label {
      color: #c9d2d9;
      font-size: clamp(9px, .85vw, 11px);
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .simulation-local-scores-text {
      box-sizing: border-box;
      width: 100%;
      min-height: 0;
      height: 100%;
      resize: none;
      padding: 8px;
      overflow: hidden;
      border: 3px inset #59626b;
      background: #050806;
      color: #dff5e5;
      font: 700 clamp(8px, .78vw, 11px) / 1.45 var(--pixel);
      letter-spacing: 0;
      white-space: pre-wrap;
    }

    .simulation-local-scores-note {
      color: #8f9ca5;
      font-size: clamp(7px, .68vw, 9px);
      line-height: 1.25;
      text-transform: uppercase;
    }

    .simulation-local-scores-note.saved {
      color: #65ed87;
    }

    .simulation-local-scores-note.not-saved {
      color: #d7bd73;
    }

    .simulation-diploma-controls {
      display: grid;
      gap: 7px;
      min-height: 0;
      margin: 0;
    }

    .simulation-pseudo-field {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      min-width: 0;
      text-align: left;
    }

    .simulation-pseudo-field span {
      color: #c9d2d9;
      font-size: clamp(9px, .8vw, 11px);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .simulation-pseudo-field input {
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      min-height: 38px;
      padding: 7px 9px;
      border: 3px inset #59626b;
      background: #050806;
      color: #eef4f7;
      font: 700 clamp(11px, 1vw, 14px) var(--pixel);
      letter-spacing: .01em;
      text-transform: none;
    }

    .simulation-pseudo-field input::placeholder {
      color: #8f9ca5;
      opacity: 1;
    }

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

    .diploma-btn,
    .restart-btn,
    .menu-return-btn {
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      min-height: 46px;
      padding: 5px 7px;
      border: 4px solid #080a0b;
      outline: 1px solid #7d8790;
      color: #fff;
      font: 700 clamp(9px, .85vw, 12px) / 1.2 var(--pixel);
      text-transform: uppercase;
      box-shadow: inset 0 3px #8ff7a8, 0 3px #050607;
      cursor: pointer;
    }

    .diploma-btn {
      background: linear-gradient(#4f7ee8, #173c8f);
      box-shadow: inset 0 3px #9ab9ff, 0 3px #050607;
    }

    .diploma-btn:disabled {
      cursor: progress;
      filter: grayscale(.1) brightness(.82);
      opacity: .92;
    }

    .diploma-btn:active,
    .restart-btn:active,
    .menu-return-btn:active {
      transform: translateY(2px);
      box-shadow: inset 0 1px #fff7, 0 1px #050607;
    }

    .restart-btn {
      min-width: 0;
      background: linear-gradient(#34c95f, #0f6728);
    }

    .menu-return-btn {
      min-width: 0;
      background: linear-gradient(#6f7a84, #303941);
      box-shadow: inset 0 3px #a7b0b7, 0 3px #050607;
    }

    @media (max-width: 1040px) {
      .simulation-landscape-grid {
        grid-template-columns: minmax(210px, .78fr) minmax(310px, 1.18fr) minmax(260px, 1fr);
        gap: 7px;
      }

      .simulation-dialog {
        padding: 8px 9px 9px;
      }

      .simulation-landscape-header {
        gap: 10px;
      }
    }

    @media (max-height: 650px) {
      .simulation-dialog {
        gap: 6px;
        padding: 7px 8px 8px;
      }

      .simulation-landscape-header {
        padding-bottom: 5px;
      }

      .simulation-dialog h2 {
        font-size: clamp(18px, 2.25vw, 29px);
      }

      .simulation-end-configuration {
        gap: 3px;
      }

      .simulation-end-configuration-row {
        padding: 3px 5px;
      }

      .simulation-global-badge,
      .simulation-category-slot {
        padding: 5px;
      }

      .simulation-score-item {
        padding: 5px 4px 4px;
      }

      .simulation-score-item span {
        min-height: 1.1em;
        margin-bottom: 2px;
      }

      .simulation-score-item small {
        margin-top: 2px;
      }

      .simulation-pseudo-field input {
        min-height: 32px;
        padding-block: 4px;
      }

      .diploma-btn,
      .restart-btn,
      .menu-return-btn {
        min-height: 38px;
      }
    }

    @media (max-width: 820px) {
      .simulation-landscape-header {
        grid-template-columns: 1fr;
        gap: 3px;
      }

      .simulation-dialog p {
        text-align: left;
      }

      .simulation-landscape-grid {
        grid-template-columns: minmax(180px, .8fr) minmax(270px, 1.2fr) minmax(220px, 1fr);
      }
    }

    @media (max-width: 760px) {
      body { padding: 4px; }
      .main-menu-dialog { width: 92vw; height: 92vh; padding: 12px 12px 30px; }
      .main-menu-dialog h1,
      .main-menu-hero,
      .scenario-browser { width: 100%; }
      .main-menu-hero { min-height: 360px; }
      .scenario-options { grid-template-columns: 1fr; }
      .app { outline: none; border-width: 2px; }
      .trip-banner { padding: 8px 8px 6px; }
      .scenario-status-bar { grid-template-columns: 100px 1fr; padding: 6px; }
      .scenario-buttons,
      .scenario-options,
      .scenario-theme-grid,
      .scenario-theme-grid.single { grid-template-columns: 1fr; width: 100%; }
      .trip-track { height: 144px; }
      .trip-track::before { height: 26px; }
      .trip-line { top: 54px; }
      .trip-station { width: 18px; height: 10px; top: 38px; }
      .trip-train { width: 11px; height: 11px; top: 40px; }
      .trip-train-number { top: 62px; font-size: 10px; }
      .trip-speed-limit { top: 0; height: 54px; }
      .trip-speed-limit-line { top: 25px; height: 29px; }
      .trip-speed-limit-value { top: 7px; font-size: 9px; }
      .trip-signal-marker { height: 92px; }
      .trip-signal-marker-line { top: 54px; height: 12px; }
      .trip-signal-marker-value { top: 69px; font-size: 8px; }
      .trip-grade-marker { height: 116px; }
      .trip-grade-marker-line { top: 82px; height: 10px; }
      .trip-grade-marker-value { top: 94px; font-size: 8px; }
      .trip-grade-marker.center .trip-grade-marker-value {
        top: 92px;
        min-width: 42px;
        padding: 2px 4px;
        font-size: 8px;
      }
      .trip-pk-marker { height: 142px; }
      .trip-pk-marker-line { top: 108px; height: 10px; }
      .trip-pk-marker-value { top: 120px; font-size: 8px; }
      .pk-status-bar { padding: 5px 8px; gap: 8px; }
      .pk-status-bar span { font-size: 9px; }
      .pk-status-bar strong { font-size: 13px; }
      .topbar { grid-template-columns: repeat(2, 1fr); }
      .topbar .station { grid-column: span 1; }
      .cab {
        grid-template-columns: 1fr;
        grid-template-areas:
          "instruments"
          "manipulators"
          "commands";
      }
      .module { min-height: 190px; }
      .gauge-row { grid-template-columns: 1fr; min-height: auto; }
      .instrument-bottom { grid-template-columns: 1fr; }
      .status-row,
      .status-row-secondary { grid-template-columns: 1fr; }
      .speed-stack {
        grid-template-columns: 44px auto;
        min-height: 220px;
        justify-content: center;
      }
      .speed-gauge { width: min(72vw, 260px); }
      .station-stack { width: 44px; height: min(72vw, 260px); }
      .operator-zones { grid-template-columns: 1fr; }
      .combined-controller { min-height: 220px; }
      .service-actions { min-height: auto; grid-template-columns: 1fr 1fr; }
      .cab-window { top: 10%; }
      .help { flex-direction: column; }
    }


/* ------------------------------------------------------------------
   Fenêtre de fin v273 — paysage en deux parties
   Gauche : badge, scores, récompenses
   Droite : classement local, pseudo, actions
   ------------------------------------------------------------------ */
.simulation-landscape-grid--two-columns {
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
  gap: 12px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.simulation-landscape-grid--two-columns .simulation-landscape-column--left {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.simulation-landscape-grid--two-columns .simulation-landscape-column--right {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding-left: 12px;
  border-left: 2px solid #59636c;
}

.simulation-landscape-grid--two-columns .simulation-global-badge {
  grid-template-columns: minmax(96px, 160px) minmax(0, 1fr);
  min-height: 118px;
  padding: 9px 12px;
}

.simulation-landscape-grid--two-columns .simulation-global-badge-visual {
  width: min(100%, 138px);
}

.simulation-landscape-grid--two-columns .simulation-score-recap {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.simulation-landscape-grid--two-columns .simulation-score-item {
  padding: 8px 6px 7px;
}

.simulation-landscape-grid--two-columns .simulation-category-rewards {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  min-height: 0;
  height: 100%;
  gap: 8px;
}

.simulation-landscape-grid--two-columns .simulation-category-slot {
  min-height: 0;
  padding: 7px;
}

.simulation-landscape-grid--two-columns .simulation-category-slot-image {
  object-fit: contain;
}

.simulation-landscape-grid--two-columns .simulation-local-scores {
  min-height: 0;
  height: 100%;
}

.simulation-landscape-grid--two-columns .simulation-local-scores-text {
  min-height: 0;
  height: 100%;
  padding: 10px;
  font-size: clamp(9px, .9vw, 12px);
  line-height: 1.55;
}

.simulation-landscape-grid--two-columns .simulation-diploma-controls {
  gap: 9px;
}

.simulation-end-configuration[hidden] {
  display: none !important;
}

@media (max-width: 1100px) {
  .simulation-landscape-grid--two-columns {
    grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr);
    gap: 8px;
  }

  .simulation-landscape-grid--two-columns .simulation-landscape-column--right {
    padding-left: 8px;
  }
}

@media (max-height: 650px) {
  .simulation-landscape-grid--two-columns .simulation-landscape-column--left,
  .simulation-landscape-grid--two-columns .simulation-landscape-column--right {
    gap: 6px;
  }

  .simulation-landscape-grid--two-columns .simulation-global-badge {
    min-height: 86px;
    padding: 5px 8px;
  }

  .simulation-landscape-grid--two-columns .simulation-global-badge-visual {
    width: min(100%, 96px);
  }

  .simulation-landscape-grid--two-columns .simulation-score-item {
    padding: 4px 4px 3px;
  }

  .simulation-landscape-grid--two-columns .simulation-category-slot {
    padding: 4px;
  }

  .simulation-landscape-grid--two-columns .simulation-local-scores-text {
    padding: 6px;
    line-height: 1.35;
  }
}

@media (max-width: 820px) {
  .simulation-landscape-grid--two-columns {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .95fr);
  }
}


/* ------------------------------------------------------------------
   Fenêtre de fin v274 — ordre demandé dans la colonne gauche
   Scénario, badge, récompenses, scores
   ------------------------------------------------------------------ */
.simulation-landscape-grid--two-columns {
  grid-template-columns: minmax(0, 1.2fr) minmax(350px, .8fr);
}

.simulation-landscape-grid--two-columns .simulation-landscape-column--left {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
}

.simulation-scenario-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  border: 2px solid #68737c;
  background: #0b1014;
  box-shadow: inset 0 0 0 2px #050708;
  text-align: left;
}

.simulation-scenario-summary span {
  color: #aeb9c3;
  font-size: clamp(8px, .82vw, 11px);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.simulation-scenario-summary strong {
  min-width: 0;
  color: #ffe44d;
  font-size: clamp(11px, 1.15vw, 16px);
  line-height: 1.2;
  text-align: right;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.simulation-landscape-grid--two-columns .simulation-global-badge {
  min-height: 102px;
}

.simulation-landscape-grid--two-columns .simulation-category-rewards {
  min-height: 0;
  height: 100%;
}

.simulation-landscape-grid--two-columns .simulation-score-recap {
  align-self: end;
}

@media (max-height: 650px) {
  .simulation-scenario-summary {
    padding: 5px 7px;
  }

  .simulation-landscape-grid--two-columns .simulation-global-badge {
    min-height: 76px;
  }
}


/* ------------------------------------------------------------------
   Engagement vers l'accès complet — v280
   ------------------------------------------------------------------ */
.simulation-landscape-grid--two-columns .simulation-landscape-column--right {
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.simulation-scenario-upsell {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px 9px;
  border: 2px solid #c48a2d;
  background:
    linear-gradient(135deg, rgba(227, 162, 43, .18), transparent 62%),
    #15120b;
  box-shadow: inset 0 0 0 2px #080704;
  text-align: left;
}

.simulation-scenario-upsell[hidden] {
  display: none !important;
}

.simulation-upsell-kicker {
  color: #ffd987;
  font-size: clamp(7px, .72vw, 9px);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.simulation-scenario-upsell strong {
  color: #ffffff;
  font-size: clamp(10px, 1vw, 13px);
  line-height: 1.15;
  text-transform: uppercase;
}

.simulation-scenario-upsell p {
  margin: 0;
  color: #d8d0bf;
  font-size: clamp(7px, .72vw, 9px);
  line-height: 1.3;
}

.simulation-upsell-link {
  display: grid;
  place-items: center;
  min-height: 34px;
  margin-top: 2px;
  padding: 5px 8px;
  border: 3px solid #080a0b;
  outline: 1px solid #d49a36;
  background: linear-gradient(#e3a22b, #854d08);
  color: #ffffff;
  font: 700 clamp(8px, .8vw, 10px) / 1.2 var(--pixel);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: inset 0 2px #ffd987, 0 3px #020304;
}

.simulation-upsell-link:hover,
.simulation-upsell-link:focus-visible {
  filter: brightness(1.12);
}

.simulation-upsell-link:active {
  transform: translateY(2px);
}

@media (max-height: 650px) {
  .simulation-scenario-upsell {
    gap: 2px;
    padding: 5px 7px;
  }

  .simulation-scenario-upsell p {
    line-height: 1.2;
  }

  .simulation-upsell-link {
    min-height: 28px;
    margin-top: 0;
    padding-block: 3px;
  }
}

@media (max-width: 620px) {
  .access-code-benefits {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 900px) {
  .access-code-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "engagement"
      "controls"
      "purchase";
    width: 86%;
  }

  .access-code-message {
    grid-area: auto;
    margin: -4px 0 0;
    pointer-events: auto;
  }
}

@media (max-height: 650px) {
  .main-menu-dialog {
    padding-top: 10px;
    padding-bottom: 22px;
  }

  .access-code-panel {
    padding-block: 8px;
  }

  .access-code-engagement {
    font-size: clamp(9px, 1.1vw, 13px);
  }
}


/* ==================================================================
   Version limitée et arrêt du scénario B — v287
   ================================================================== */
.scenario-btn .scenario-access-note {
  display: block;
  margin-top: 5px;
  color: #ffd987;
  font-size: clamp(7px, .75vw, 9px);
  line-height: 1.15;
  text-transform: uppercase;
}

.limited-version-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 18px;
  background: rgba(3, 6, 9, .88);
  backdrop-filter: blur(5px);
}

.limited-version-overlay[hidden] {
  display: none !important;
}

.limited-version-dialog {
  display: grid;
  gap: 13px;
  width: min(650px, calc(100vw - 36px));
  box-sizing: border-box;
  padding: 24px;
  border: 5px solid #080a0c;
  outline: 3px solid #d49a36;
  background:
    linear-gradient(135deg, rgba(227, 162, 43, .18), transparent 65%),
    linear-gradient(#202830, #0c1116);
  box-shadow: 0 20px 70px #000, inset 0 0 0 2px #606b74;
  text-align: center;
}

.limited-version-kicker {
  color: #ffd987;
  font-size: clamp(9px, 1vw, 12px);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.limited-version-dialog h2 {
  margin: 0;
  color: #ffe44d;
  font-size: clamp(27px, 4vw, 44px);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 3px 3px #4b2400;
}

.limited-version-dialog p {
  margin: 0;
  color: #e5ebef;
  font-size: clamp(11px, 1.35vw, 15px);
  line-height: 1.5;
}

.limited-version-dialog .limited-version-value {
  padding: 10px 12px;
  border: 2px solid #5b6872;
  background: #0b1014;
  color: #c9d8e6;
}

.limited-version-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 10px;
}

.limited-version-access-link,
.limited-version-menu-btn {
  display: grid;
  place-items: center;
  min-height: 48px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 3px solid #080a0b;
  color: #ffffff;
  font: 700 clamp(9px, 1vw, 12px) var(--pixel);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.limited-version-access-link {
  outline: 1px solid #d49a36;
  background: linear-gradient(#e3a22b, #854d08);
  box-shadow: inset 0 2px #ffd987, 0 3px #020304;
}

.limited-version-menu-btn {
  outline: 1px solid #69737d;
  background: linear-gradient(#3d4b57, #182128);
  box-shadow: inset 0 2px #85939e, 0 3px #020304;
}

.limited-version-access-link:hover,
.limited-version-access-link:focus-visible,
.limited-version-menu-btn:hover,
.limited-version-menu-btn:focus-visible {
  filter: brightness(1.12);
}

@media (max-width: 560px) {
  .limited-version-dialog {
    padding: 18px 14px;
  }

  .limited-version-actions {
    grid-template-columns: 1fr;
  }
}