:root {
    color-scheme: dark;
    font-synthesis: none;
    background: var(--am-bg, #020607);
}

* { box-sizing: border-box; }

::selection {
    background: var(--am-accent, #58cba6);
    color: var(--am-on-accent, #03100c);
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--am-bg, #020607);
    color: var(--am-text, #d2dfdb);
    font-family: var(--am-font-ui, "IBM Plex Sans", "Segoe UI", sans-serif);
    font-size: 16px;
}

body { min-width: 320px; }
button, input, select, textarea { font: inherit; }

/* The previous direction assigned Consolas directly in a handful of dense
   data components. Cupertino uses one humanist voice throughout; keep the two
   internal type-comparison pages exempt so their specimens remain useful. */
body :not(.ms, .lab-page, .lab-page *, .cupertino-showcase, .cupertino-showcase *) {
    font-family: var(--am-font-ui) !important;
}

/* Every button gets the same interaction foundation, including bespoke game
   controls that do not opt into the design-system button classes. Keep the
   independent translate/scale properties separate from transform so pressed
   feedback cannot break positioned, rotated, or already-selected controls. */
button {
    transition-property: border-color, background-color, color, box-shadow, opacity, filter, transform, translate, scale !important;
    transition-duration: var(--am-dur-fast, 120ms) !important;
    transition-timing-function: var(--am-ease, ease) !important;
}

button:not(:disabled):not([aria-disabled="true"]):hover {
    filter: brightness(1.12);
}

button:not(:disabled):not([aria-disabled="true"]):active {
    translate: 0 1px;
    scale: .98;
    filter: brightness(.9);
}

.am-icon-btn:not(:disabled):not([aria-disabled="true"]):active {
    scale: .92;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: var(--am-focus-width, 2px) solid var(--am-focus-outline, #77d8bb);
    outline-offset: var(--am-focus-offset, 2px);
}
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.am-skip-link {
    position: fixed;
    z-index: calc(var(--am-z-game-menu, 160) + 1);
    top: var(--am-space-2, 8px);
    left: var(--am-space-2, 8px);
    padding: 10px 14px;
    border: 1px solid var(--am-accent-strong, #77e1bf);
    border-radius: var(--am-radius-sm, 3px);
    background: var(--am-accent, #58cba6);
    color: var(--am-on-accent, #03100c);
    font: 800 var(--am-fs-label, 12px) var(--am-font-mono, monospace);
    text-decoration: none;
    transform: translateY(calc(-100% - 16px));
    transition: transform var(--am-dur-fast, 120ms) var(--am-ease, ease);
}

.am-skip-link:focus { transform: translateY(0); }

input[type="checkbox"] {
    appearance: none;
    width: 38px;
    height: 22px;
    flex: 0 0 38px;
    margin: 0;
    position: relative;
    display: inline-block;
    border: 1px solid #46665c;
    border-radius: var(--am-radius-pill);
    background: #30443e;
    cursor: pointer;
    transition: border-color var(--am-dur-fast) var(--am-ease), background-color var(--am-dur-fast) var(--am-ease);
}

input[type="checkbox"]::after {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    background: var(--am-text-bright);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .38);
    transition: transform var(--am-dur-fast) var(--am-ease);
}

input[type="checkbox"]:checked {
    border-color: #72d8b6;
    background: #58cba6;
    box-shadow: 0 0 9px rgba(88,203,166,.22);
}

input[type="checkbox"]:checked::after { transform: translateX(16px); }
input[type="checkbox"]:disabled { opacity: .38; cursor: not-allowed; }

/* Custom dropdown arrow, drawn as two small gradients.
   The image must NOT be !important. It used to be, while the size/position/
   repeat longhands beside it were not - so any component setting the
   `background` shorthand reset those three to their initial values (auto /
   0% 0% / repeat) while the arrow survived, tiling a 4px wedge across the
   entire control. Without !important a shorthand cleanly removes the whole
   thing instead of leaving half of it behind. */
select {
    border-radius: var(--am-radius-sm);
    background-image: linear-gradient(45deg, transparent 50%, var(--am-text-dim, #83aa9d) 50%),
                      linear-gradient(135deg, var(--am-text-dim, #83aa9d) 50%, transparent 50%);
    background-position: calc(100% - 13px) 50%, calc(100% - 9px) 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    padding-right: 26px;
    appearance: none;
}

input:disabled, select:disabled { opacity: .42; cursor: not-allowed; }

[aria-busy="true"] { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    button:not(:disabled):not([aria-disabled="true"]):active {
        translate: none;
        scale: 1;
    }

    .primary-link:active,
    .secondary-link:active {
        translate: none;
        scale: 1;
    }
}

.primary-link, .secondary-link { display:inline-block; padding:12px 18px; border-radius:var(--am-radius-sm); text-decoration:none; font-size:12px; font-weight:600; letter-spacing:.025em; translate:0 0; scale:1; transition:border-color var(--am-dur-fast) var(--am-ease),background-color var(--am-dur-fast) var(--am-ease),color var(--am-dur-fast) var(--am-ease),box-shadow var(--am-dur-fast) var(--am-ease),filter var(--am-dur-fast) var(--am-ease),translate var(--am-dur-fast) var(--am-ease),scale var(--am-dur-fast) var(--am-ease); }
.primary-link { background:#58cfa7; color:#03100c; border:1px solid transparent; box-shadow:var(--am-shadow-1); }
.secondary-link { color:#a9c3ba; border:1px solid #36564d; background:#0a1713; }
.primary-link:hover { border-color:#77e1bf; background:#68d5b0; color:#03100c; box-shadow:0 .5px 0 rgba(238,248,244,.12),0 7px 18px rgba(0,0,0,.3); translate:0 -1px; }
.secondary-link:hover { border-color:var(--am-border-accent); background:var(--am-surface-3); color:var(--am-text-strong); translate:0 -1px; }
.primary-link:active,.secondary-link:active { translate:0 1px; scale:.98; filter:brightness(.92); }
.account-card,.access-card { width:min(430px,94vw); padding:28px; border:1px solid #315249; border-radius:var(--am-radius-lg); background:rgba(8,20,16,.96); box-shadow:var(--am-shadow-3); backdrop-filter:blur(16px); }
.account-card > small,.access-card > small { color:#65cba9; font-size:11px; font-weight:700; letter-spacing:.22em; }
.account-card h1,.access-card h1 { margin:9px 0 7px; color:#eef8f4; font-size:29px; }
.account-card > p,.access-card > p { margin:0 0 24px; color:#879f97; line-height:1.55; }
.account-card form { display:grid; gap:14px; }
.account-card label { display:grid; gap:6px; color:#8ba49b; font-size:11px; font-weight:700; letter-spacing:.1em; }
.account-card label small { color:var(--am-text-dim); font-size:var(--am-fs-label); font-weight:400; line-height:var(--am-lh); letter-spacing:0; }
.account-card input { width:100%; border:1px solid #2d4b42; background:#101d19; color:#e2eee9; padding:11px 12px; border-radius:var(--am-radius-sm); font-size:14px; }
.account-card input:focus { border-color:var(--am-accent); }
.account-card input:focus-visible { outline:var(--am-focus-width) solid var(--am-focus-outline); outline-offset:var(--am-focus-offset); box-shadow:var(--am-focus-ring); }
.account-card form button { margin-top:5px; border:1px solid transparent; border-radius:var(--am-radius-sm); background:#55cba3; color:#02100b; padding:14px; font-weight:600; font-size:12px; letter-spacing:.025em; box-shadow:var(--am-shadow-1); }
.account-card footer { margin-top:24px; padding-top:20px; border-top:1px solid #223a33; color:#718a81; font-size:13px; }
.account-card footer a { color:#78d8b8; }
.account-error { margin:0 0 18px; padding:11px 13px; border:1px solid #7a4038; background:#26100d; color:#e5a398; font-size:13px; }

.blazor-error-boundary {
    position: fixed;
    z-index: 1000;
    right: 16px;
    bottom: 16px;
    padding: 14px 18px;
    border: 1px solid #b55a50;
    background: #4a1713;
    color: white;
}

.blazor-error-boundary::after { content: "The game encountered an unexpected error."; }

/* Keep MapLibre's positioning contract intact. Custom marker styles must not
   replace this absolute positioning with relative positioning. */
.maplibregl-map { position: relative; overflow: hidden; }
.maplibregl-canvas-container, .maplibregl-canvas { position: absolute; inset: 0; }
.maplibregl-marker { position: absolute !important; top: 0 !important; left: 0 !important; will-change: transform; }

/* Tutorial targets sit outside the scoped guide component, so their high-
   contrast focus treatment belongs in the global interaction layer. */
.tutorial-target-active {
    position: relative;
    outline: 3px solid #ffe078 !important;
    outline-offset: 5px !important;
    box-shadow: 0 0 0 2px rgba(6, 12, 10, .92), 0 0 0 8px rgba(255, 224, 120, .2), 0 0 34px rgba(255, 215, 92, .8) !important;
    filter: brightness(1.22) saturate(1.15);
    animation: tutorial-target-beacon .9s ease-in-out infinite alternate !important;
}

@keyframes tutorial-target-beacon {
    to {
        outline-offset: 8px;
        box-shadow: 0 0 0 2px rgba(6, 12, 10, .92), 0 0 0 12px rgba(255, 224, 120, .3), 0 0 48px rgba(255, 215, 92, .95);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tutorial-target-active { animation: none !important; }
}