/* =======================================================================
   Trucker's Command Deck  -  skin styles
   - Fills the screen, no scrolling (hero + body distribute the height).
   - Toggle buttons glow with the active ACCENT colour when ON.
   - Window controls live on side rails: left window on the left, right on
     the right, each with UP / DOWN arrows.
   - Colour scheme + day/night use the same schema as the other dashboards
     (data-accent / data-mode on .dashboard.tcd, shared rc.accent / rc.mode).
   ======================================================================= */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #050608;
    color: #e7edf3;
    font-family: "Rajdhani", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
    user-select: none;
}

.dashboard.tcd {
    /* ---- Theme variables (night defaults) ---- */
    --accent: #b6ff1f;
    --accent-dim: #6f8a1c;
    --accent-on-ink: #06140d;   /* text drawn on top of the accent */
    --page1: #11161d;           /* page background gradient stops */
    --page2: #07090c;
    --page3: #050608;
    --panel1: #11151b;          /* group / rail / econ panel gradient */
    --panel2: #0c0f14;
    --btn1: #1a212a;            /* control button gradient */
    --btn2: #121820;
    --line: #1d242c;            /* panel borders */
    --edge: #232b34;            /* button borders / inner lines */
    --ink: #e7edf3;
    --ink-strong: #ffffff;
    --btn-ink: #c7d4e0;
    --ico: #9fb1c4;
    --lbl: #aebccb;
    --muted: #6f8095;
    --ind-bg: #0d1218;
    --ind-ink: #6c7c8d;
    --gauge-track: #1a2027;
    --active-bg: #18222b;       /* lifted background of an ON button */
    --active-ink: #ffffff;
    --input-bg: #0a0e13;

    position: fixed;
    inset: 0;
    background:
        radial-gradient(1200px 700px at 50% -10%, var(--page1) 0%, var(--page2) 60%, var(--page3) 100%);
    transition: background .25s ease;
}

/* ---- Accent colour (night shades) ---- */
.dashboard.tcd[data-accent="lime"]   { --accent: #b6ff1f; --accent-dim: #6f8a1c; }
.dashboard.tcd[data-accent="amber"]  { --accent: #ffc24a; --accent-dim: #8a6320; }
.dashboard.tcd[data-accent="red"]    { --accent: #ff5a4d; --accent-dim: #8a2a23; }
.dashboard.tcd[data-accent="blue"]   { --accent: #46b6ff; --accent-dim: #1f5f8a; }
.dashboard.tcd[data-accent="green"]  { --accent: #39e07a; --accent-dim: #1c7a40; }
.dashboard.tcd[data-accent="ice"]    { --accent: #dfe9f2; --accent-dim: #5d6b7b; }
.dashboard.tcd[data-accent="violet"] { --accent: #b07cff; --accent-dim: #5a3f8a; }

/* ---- Day mode: light palette (accent re-shaded below) ---- */
.dashboard.tcd[data-mode="day"] {
    --accent-on-ink: #ffffff;
    --page1: #eef2f6; --page2: #d9e1ea; --page3: #e8edf3;
    --panel1: #ffffff; --panel2: #eef2f7;
    --btn1: #ffffff; --btn2: #eef2f7;
    --line: #d3dbe5; --edge: #cdd6e1;
    --ink: #0b121c; --ink-strong: #0b121c;
    --btn-ink: #2a3a4d; --ico: #41566b; --lbl: #41566b; --muted: #5a6677;
    --ind-bg: #e3e9f0; --ind-ink: #5a6677;
    --gauge-track: #c3ccd9;
    --active-bg: #e6efe8;
    --active-ink: #0b121c;
    --input-bg: #ffffff;
}
.dashboard.tcd[data-mode="day"][data-accent="lime"]   { --accent: #3a7d12; --accent-dim: #9bbf6f; }
.dashboard.tcd[data-mode="day"][data-accent="amber"]  { --accent: #b07415; --accent-dim: #d8b06a; }
.dashboard.tcd[data-mode="day"][data-accent="red"]    { --accent: #c62828; --accent-dim: #e08a86; }
.dashboard.tcd[data-mode="day"][data-accent="blue"]   { --accent: #1565c0; --accent-dim: #7fa7d8; }
.dashboard.tcd[data-mode="day"][data-accent="green"]  { --accent: #1b8a45; --accent-dim: #82c79e; }
.dashboard.tcd[data-mode="day"][data-accent="ice"]    { --accent: #41566b; --accent-dim: #9aa7b6; }
.dashboard.tcd[data-mode="day"][data-accent="violet"] { --accent: #6a3fb0; --accent-dim: #a98fd0; }

/* ---- Connection overlay (hidden when it has no message) ---- */
.statusMessage {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    letter-spacing: .12em;
    font-weight: 600;
    color: #9fb4c7;
    background: rgba(5, 6, 8, .92);
    text-align: center;
    padding: 0 24px;
}
.statusMessage:empty { display: none; }

/* ---- Shell: fills the viewport, never scrolls ---- */
.tcd-shell {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(6px, 1.3vh, 14px);
    gap: clamp(6px, 1.2vh, 14px);
    overflow: hidden;
}

.tcd-main {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.tcd-page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.tcd-page[hidden] { display: none !important; }

.tcd-page-deck {
    display: flex;
    flex-direction: column;
}
.tcd-page-deck .tcd-body {
    flex: 1 1 0;
    min-height: 0;
}

/* ---- Footer: fills the width ---- */
.tcd-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    gap: clamp(8px, 1.4vw, 14px);
}

.tcd-footer .tcd-econ {
    flex: 1;
    min-width: 0;
}

/* =======================  HERO / GAUGE  ======================= */
.tcd-hero {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(8px, 2vw, 28px);
    padding: 0 clamp(8px, 2vw, 24px);
}

.hero-side { display: flex; }
/* Left: GEAR + RETARDER inline, big */
.hero-left {
    flex-direction: row;
    align-items: flex-end;
    gap: clamp(14px, 3.2vw, 44px);
}
/* Right: REST + AT inline (hugging the gauge), with cargo ETA below */
.hero-right {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4px, 1.4vh, 14px);
}
.rest-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: clamp(14px, 3.2vw, 44px);
}

.mini-stat { display: flex; flex-direction: column; line-height: 1.02; }
.mini-label {
    font-size: clamp(.5rem, 1.2vh, .62rem);
    letter-spacing: .18em;
    color: var(--muted);
    font-weight: 700;
}
.mini-value {
    font-size: clamp(1.8rem, 7vh, 4rem);
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
/* Secondary cargo ETA line sits under the rest/at row */
.eta-stat .mini-value {
    font-size: clamp(1.1rem, 3.6vh, 2.1rem);
    color: var(--btn-ink);
}
.rest-value.low { color: #ffcf5a; }
.rest-value.critical { color: #ff5d5d; }

.gauge { --frac: 0; display: flex; justify-content: center; }
.gauge-ring {
    position: relative;
    width: clamp(96px, 19vh, 200px);
    height: clamp(96px, 19vh, 200px);
    border-radius: 50%;
    background: conic-gradient(var(--accent) calc(var(--frac) * 1%), var(--gauge-track) 0);
    box-shadow: 0 0 0 1px var(--edge) inset, 0 0 40px var(--accent-dim);
}
.gauge-center {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, var(--panel1) 0%, var(--panel2) 75%);
    box-shadow: 0 0 0 1px var(--edge) inset;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.speed {
    font-size: clamp(1.9rem, 7vh, 4rem);
    font-weight: 800;
    line-height: .9;
    color: var(--ink-strong);
    font-variant-numeric: tabular-nums;
}
.speed-unit {
    font-size: clamp(.5rem, 1.2vh, .7rem);
    letter-spacing: .25em;
    color: var(--lbl);
    margin-top: 3px;
}
.cruise-chip {
    margin-top: clamp(4px, 1vh, 10px);
    font-size: clamp(.5rem, 1.1vh, .62rem);
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid var(--edge);
    transition: all .2s ease;
}
.cruise-chip .cc-dot { width: 6px; height: 6px; border-radius: 50%; background: #3a434e; }
.cruise-chip.active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--active-bg);
}
.cruise-chip.active .cc-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* =======================  BODY: rails + grid  ======================= */
.tcd-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    gap: clamp(6px, 1vw, 14px);
}

/* side window rails */
.win-rail {
    flex: 0 0 clamp(62px, 8.5vw, 112px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 1vh, 10px);
    background: linear-gradient(180deg, var(--panel1) 0%, var(--panel2) 100%);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: clamp(5px, 1vh, 10px) clamp(5px, .7vw, 9px);
}
.win-rail h4 {
    flex: 0 0 auto;
    margin: 0;
    text-align: center;
    font-size: clamp(.5rem, 1.2vh, .62rem);
    letter-spacing: .12em;
    font-weight: 800;
    color: var(--muted);
}
.win-rail .win-btn { flex: 1 1 0; }
.win-rail .win-btn .ico { font-size: clamp(1.1rem, 3.4vh, 1.9rem); }

/* control grid */
.tcd-grid {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: clamp(6px, 1.1vh, 14px);
    overflow: hidden;
}
.group-wide { grid-column: span 2; }

.group {
    --accent-cat: #738699;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--panel1) 0%, var(--panel2) 100%);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: clamp(5px, 1vh, 10px) clamp(6px, .9vw, 12px);
    overflow: hidden;
}
.group.accent-amber  { --accent-cat: #ff9f1c; }
.group.accent-blue   { --accent-cat: #3aa0ff; }
.group.accent-red    { --accent-cat: #ff4d4d; }
.group.accent-green  { --accent-cat: #1bd47a; }
.group.accent-cyan   { --accent-cat: #29c4c4; }
.group.accent-violet { --accent-cat: #9b6cff; }

.group h3 {
    flex: 0 0 auto;
    margin: 0 2px clamp(4px, .9vh, 9px);
    font-size: clamp(.52rem, 1.25vh, .66rem);
    letter-spacing: .2em;
    font-weight: 800;
    color: var(--accent-cat);
}

.btn-row {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: clamp(4px, .8vh, 8px);
    overflow: hidden;
}
/* Suspension: 2 columns (UP/DN pairs), RESET spans the full width */
.btn-row.susp-row,
.btn-row.lights-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.susp-row .susp-reset { grid-column: 1 / -1; }

/* Suspension arrow colours: front / rear / trailer */
.susp-row .susp-front .ico { color: #3aa0ff; }
.susp-row .susp-rear .ico { color: #ff9f1c; }
.susp-row .susp-trailer .ico { color: #9b6cff; }
.dashboard.tcd[data-mode="day"] .susp-row .susp-front .ico { color: #1565c0; }
.dashboard.tcd[data-mode="day"] .susp-row .susp-rear .ico { color: #b07415; }
.dashboard.tcd[data-mode="day"] .susp-row .susp-trailer .ico { color: #6a3fb0; }

/* Park brake spans the full width of the LIGHTS block */
.btn-row .park-full { grid-column: 1 / -1; }

/* Cameras: 3 compact columns */
.btn-row.cam-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* System (wide block): 2×2 grid */
.btn-row.sys-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* Radio: 3 + 3 over two rows */
.btn-row.radio-rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* Bigger icons/labels in wide system buttons */
.btn-row.sys-row .ico { font-size: clamp(1.5rem, 6vh, 3.2rem); }
.btn-row.sys-row .lbl { font-size: clamp(.5rem, 1.6vh, .78rem); }

/* Cabin & View: 3 + 3 + 1 (big horn) */
.btn-row.cabin-rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
}
.btn-row.cabin-rows .horn-main { grid-column: 1 / -1; }
.btn-row.cabin-rows .horn-main .ico {
    flex: 1 1 100%;
    font-size: clamp(2rem, 8vh, 4rem);
}

/* Braking system: 3×2 (cycle + / − per row) */
.btn-row.brake-rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* Truck & trailer: engine full width, then 2×2 */
.btn-row.axle-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
}
.btn-row.axle-rows .engine-main { grid-column: 1 / -1; }
.btn-row.axle-rows .engine-main .ico {
    font-size: clamp(1.6rem, 6.5vh, 3.4rem);
}
.btn-row.axle-rows .engine-main .lbl {
    font-size: clamp(.58rem, 1.8vh, .85rem);
    letter-spacing: .12em;
}

/* Dense rows: smaller buttons so many fit inside a narrow block */
.btn-row.dense { gap: clamp(3px, .6vh, 6px); }
.btn-row.dense .control-btn { gap: 1px; padding: 2px 1px; border-radius: 9px; }
.btn-row.dense .ico { font-size: clamp(.85rem, 2.8vh, 1.35rem); }
.btn-row.dense .lbl { font-size: clamp(.42rem, 1.15vh, .55rem); letter-spacing: 0; }

/* ---------- Buttons ---------- */
.control-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    gap: clamp(1px, .3vh, 3px);
    min-height: 0;
    min-width: 0;
    padding: clamp(2px, .5vh, 5px) clamp(2px, .4vw, 4px);
    border: 1px solid var(--edge);
    border-radius: 11px;
    background: linear-gradient(180deg, var(--btn1) 0%, var(--btn2) 100%);
    color: var(--btn-ink);
    font: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: transform .06s ease, box-shadow .15s ease,
                border-color .15s ease, background .15s ease, color .15s ease;
}
.control-btn .ico {
    flex: 1 1 58%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    width: 100%;
    font-size: clamp(1rem, 4.5vh, 2.8rem);
    line-height: 1;
    color: var(--ico);
    transition: color .15s ease;
}
.control-btn .lbl {
    flex: 1 1 34%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    width: 100%;
    font-size: clamp(.48rem, 1.5vh, .72rem);
    letter-spacing: .04em;
    font-weight: 700;
    text-align: center;
    color: var(--lbl);
    line-height: 1.05;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.control-btn .ind {
    flex: 0 1 22%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    width: 100%;
    font-size: clamp(.44rem, 1.2vh, .55rem);
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--ind-ink);
    padding: 0 5px;
    border-radius: 7px;
    background: var(--ind-bg);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.control-btn.cycle-btn .ico { flex: 1 1 46%; }
.control-btn.cycle-btn .lbl { flex: 1 1 28%; }

.control-btn:active { transform: scale(.95); }

/* momentary press pulse (accent) */
.control-btn.flash {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset, 0 0 16px -2px var(--accent);
}

/* ON state: accent glow for every toggle */
.control-btn.active {
    border-color: var(--accent);
    background: var(--active-bg);
    box-shadow: 0 0 0 1px var(--accent) inset, 0 0 22px -6px var(--accent);
    color: var(--active-ink);
}
.control-btn.active .ico,
.control-btn.active .lbl { color: var(--active-ink); }
.control-btn.active .ind { color: var(--accent-on-ink); background: var(--accent); }

/* subtle non-active accents on a couple of icons */
.engine-btn .ico { color: #ff6b6b; }
.engine-btn.active .ico { color: var(--active-ink); }
.control-btn[data-command="hazards"] .ico { color: #ff6b6b; }

/* =======================  FUEL ECONOMY STRIP  ======================= */
.tcd-econ {
    width: 75%;
    margin: 0 auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.4vw, 18px);
    padding: clamp(5px, 1vh, 10px) clamp(8px, 1.2vw, 14px);
    background: linear-gradient(180deg, var(--panel1) 0%, var(--panel2) 100%);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.econ-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--edge);
    background: var(--ind-bg);
    color: var(--lbl);
    font-weight: 800;
    letter-spacing: .08em;
    font-size: clamp(.55rem, 1.5vh, .78rem);
    padding: 8px 13px;
    border-radius: 9px;
    cursor: pointer;
}
.econ-toggle .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3a4654;
    flex: 0 0 auto;
}
.econ-toggle.running {
    color: var(--active-ink);
    border-color: var(--accent);
    background: var(--active-bg);
    box-shadow: 0 0 0 1px var(--accent) inset, 0 0 18px -6px var(--accent);
}
.econ-toggle.running .dot { background: #ff5a4d; box-shadow: 0 0 10px #ff5a4d; }

/* PAUSE / RESUME + unit switch buttons */
.econ-pause,
.econ-unit {
    flex: 0 0 auto;
    border: 1px solid var(--edge);
    background: var(--ind-bg);
    color: var(--lbl);
    font-weight: 800;
    letter-spacing: .08em;
    font-size: clamp(.55rem, 1.4vh, .78rem);
    padding: clamp(5px, 1vh, 9px) clamp(8px, 1.2vw, 13px);
    border-radius: 8px;
    cursor: pointer;
}
.econ-pause[hidden] { display: none; }
.econ-pause.paused {
    color: var(--active-ink);
    border-color: var(--accent);
    background: var(--active-bg);
    box-shadow: 0 0 0 1px var(--accent) inset, 0 0 18px -6px var(--accent);
}
.econ-pause:active,
.econ-unit:active { transform: scale(.96); }
.econ-stats { cursor: pointer; }
.econ-stats {
    display: flex;
    gap: clamp(8px, 1.6vw, 22px);
    color: var(--muted);
    font-weight: 600;
    font-size: clamp(.6rem, 1.5vh, .85rem);
    white-space: nowrap;
    overflow: hidden;
}
.econ-stats b { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Theme buttons (accent cycle + day/night) in the footer */
.tcd-theme { display: flex; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--edge);
    background: var(--ind-bg);
    color: var(--ink);
    font-weight: 800;
    letter-spacing: .06em;
    font-size: clamp(.55rem, 1.4vh, .75rem);
    padding: 8px 12px;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: transform .06s ease, border-color .15s ease;
}
.theme-btn:hover { border-color: var(--accent); }
.theme-btn:active { transform: scale(.96); }
.theme-btn .sw {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    flex: 0 0 auto;
}

.econ-history {
    flex: 0 0 auto;
    color: var(--btn-ink);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .1em;
    font-size: clamp(.55rem, 1.4vh, .75rem);
    border: 1px solid var(--edge);
    border-radius: 8px;
    padding: 7px 11px;
}
.econ-history:active { background: var(--ind-bg); }

/* AUTO BLINK shows its ON state in cyan to set it apart from game toggles */
.control-btn.local-toggle[data-command="autoBlink"] .ico { color: #29c4c4; }
.control-btn.local-toggle.active[data-command="autoBlink"] .ico,
.control-btn.local-toggle.active[data-command="autoBlink"] .lbl { color: var(--active-ink); }

@media (max-width: 560px) {
    .tcd-econ .econ-stats { display: none; }
}

/* =======================  SKIN SETTINGS  ======================= */
.tcd-cog {
    position: fixed;
    left: max(10px, env(safe-area-inset-left));
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 45;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--btn-ink);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background: rgba(12, 16, 22, .8);
    cursor: pointer;
}
.tcd-cog:active { transform: scale(.92); }

.tcd-settings { display: none; }
.tcd-settings.open { display: block; }
.settings-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, .55);
}
.settings-card {
    position: fixed;
    z-index: 61;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, 90vw);
    background: var(--panel2);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
    padding: 16px 18px 14px;
    color: var(--ink);
}
.settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    font-weight: 800;
    letter-spacing: .14em;
    font-size: .9rem;
    color: var(--ink-strong);
}
.settings-close {
    border: 0;
    background: transparent;
    color: var(--lbl);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0;
}
.settings-row label {
    font-size: .82rem;
    color: var(--btn-ink);
    font-weight: 600;
}
.seg { display: flex; gap: 6px; }
.unit-opt {
    border: 1px solid var(--edge);
    background: var(--btn2);
    color: var(--btn-ink);
    font-weight: 700;
    font-size: .82rem;
    padding: 8px 14px;
    border-radius: 9px;
    cursor: pointer;
}
.unit-opt.sel {
    border-color: var(--accent);
    color: var(--active-ink);
    background: var(--active-bg);
    box-shadow: 0 0 0 1px var(--accent) inset;
}
#gearbox-select {
    flex: 1;
    max-width: 60%;
    border: 1px solid var(--edge);
    background: var(--input-bg);
    color: var(--ink-strong);
    padding: 9px 10px;
    border-radius: 9px;
    font-size: .85rem;
}
.settings-note {
    margin: 10px 0 0;
    font-size: .72rem;
    color: var(--muted);
}

/* Narrow / portrait fallback: 2 columns (still no scroll) */
@media (max-aspect-ratio: 1/1) {
    .tcd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .group-wide { grid-column: span 2; }
    .win-rail { flex-basis: clamp(54px, 14vw, 96px); }
    .tcd-hero { gap: 10px; }
}

/* =======================  PC MOUSE PAGE  ======================= */
.tcd-page-pcmouse {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(6px, 1.2vh, 12px);
    gap: clamp(6px, 1.2vh, 12px);
}

.pcm-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vw, 16px);
}
.pcm-header .nav-btn {
    flex: 0 0 auto;
    min-width: clamp(64px, 14vw, 100px);
    padding: 8px 10px;
}
.pcm-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: clamp(.85rem, 2.2vh, 1.1rem);
    letter-spacing: .18em;
    font-weight: 800;
    color: var(--accent-cat);
    text-align: center;
}

.pcm-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.2vh, 12px);
}

.pcm-warn {
    flex: 0 0 auto;
    margin: 0;
    padding: clamp(4px, 1vh, 8px) clamp(8px, 1.5vw, 12px);
    border-radius: 8px;
    border: 1px solid #ff9f1c;
    background: rgba(255, 159, 28, 0.12);
    color: #ff9f1c;
    font-size: clamp(.55rem, 1.35vh, .72rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: .04em;
}
.pcm-warn[hidden] { display: none !important; }

.pcm-touchpad {
    flex: 1 1 0;
    min-height: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--edge);
    border-radius: 16px;
    background: linear-gradient(145deg, var(--btn2) 0%, var(--btn1) 100%);
    touch-action: none;
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
}
.pcm-touchpad:active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset;
}
.pcm-pad-hint {
    font-size: clamp(.7rem, 2vh, .95rem);
    letter-spacing: .22em;
    font-weight: 800;
    color: var(--muted);
    pointer-events: none;
}

.pcm-mouse-btns {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(4px, .8vh, 8px);
}
.pcm-mouse-btns .pcm-btn .ico { font-size: clamp(.85rem, 2.8vh, 1.3rem); }

.pcm-keys {
    flex: 0 0 auto;
    padding: clamp(6px, 1vh, 10px);
    border-radius: 12px;
    border: 1px solid var(--edge);
    background: var(--panel);
}
.pcm-keys h3 {
    margin: 0 2px clamp(4px, .7vh, 8px);
    font-size: clamp(.5rem, 1.2vh, .62rem);
    letter-spacing: .2em;
    font-weight: 800;
    color: var(--accent-cat);
}
.pcm-key-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: clamp(36px, 7vh, 56px);
}
.pcm-key-row .pcm-key {
    min-height: clamp(36px, 7vh, 56px);
    padding: clamp(4px, 1vh, 8px) clamp(2px, .5vw, 4px);
}
.pcm-key-row .pcm-key .lbl {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(.52rem, 1.55vh, .78rem);
    letter-spacing: .06em;
    font-weight: 800;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

@media (max-aspect-ratio: 1/1) {
    .pcm-mouse-btns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pcm-mouse-btns .js-pcm-scroll:nth-child(4) { grid-column: 2; }
    .pcm-key-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pcm-key-row button:nth-child(4) { grid-column: 1; }
    .pcm-key-row button:nth-child(5) { grid-column: 2 / 4; }
}

/* =======================  NAV / GPS PAGE  ======================= */
.tcd-page-nav {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(6px, 1.2vh, 12px);
    gap: clamp(6px, 1.2vh, 10px);
}

.nav-header .nav-trip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: clamp(.62rem, 1.4vh, .78rem);
    letter-spacing: .08em;
    color: var(--muted);
}

.nav-header .nav-trip b { color: var(--accent-cat); }

.nav-map-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav-map-canvas {
    flex: 1 1 auto;
    min-height: 180px;
    border-radius: 10px;
    border: 1px solid var(--line);
    overflow: hidden;
    background: #0d1117;
}

.nav-map-hint {
    margin: 0;
    font-size: clamp(.58rem, 1.2vh, .72rem);
    color: var(--muted);
}

.nav-map-hint code { color: var(--accent-cat); }

.nav-controls {
    flex: 0 0 auto;
    justify-content: center;
    gap: 8px;
}