/*
 * splash.css - the host page's chrome: the launcher card on a dark background, the progress bar, the full-window
 * game canvas (100vw x 100vh), the download overlay's frame. Loaded after the target's theme.css: every colour is
 * one of its --ufront-* tokens or a token set below (derived from them, or the hover grey every game shares), and the
 * value after each is the fallback for a theme without it.
 */

/* ---------- Shared and derived tokens ---------- */

/*
 * Set here, never in a theme.css, so that every target gets them by the same rule.
 *
 * --ufront-hover is one neutral grey for every game: the background of a hovered section header and the border of a
 * hovered list row. The header text stays white on it.
 *
 * The rest is computed from the theme's --ufront-accent. The accent buttons' hover lightens the accent towards the
 * theme's text and their pressed state darkens it towards the page, so the dark text on them keeps its contrast. The
 * launcher sections (Play, saves, Total conversion, Mods, Multiplayer) take the accent's tint over the page
 * background; Storage, Advanced and the option groups inside a section (every PrimeVue Fieldset, src/theme/preset.ts)
 * a darker shade of it. The field surface (inputs, lists, dialogs) is darker again with a faint tint, inside a border
 * that lifts the page towards the text with a little accent. Without color-mix() plain theme colours stand in.
 */
:root {
    --ufront-hover: #71717a;
    --ufront-accent-hover: var(--ufront-accent);
    --ufront-accent-active: var(--ufront-accent);
    --ufront-section-bg: var(--ufront-panel-track);
    --ufront-section-border: var(--ufront-accent);
    --ufront-utility-bg: var(--ufront-panel-track);
    --ufront-utility-border: var(--ufront-text-dim);
    --ufront-surface: var(--ufront-bg);
    --ufront-surface-border: var(--ufront-text-dim);
}

@supports (color: color-mix(in oklab, currentColor, transparent)) {
    :root {
        --ufront-accent-hover: color-mix(in oklab, var(--ufront-accent), var(--ufront-text) 18%);
        --ufront-accent-active: color-mix(in oklab, var(--ufront-accent), var(--ufront-bg) 16%);
        --ufront-section-bg: color-mix(in oklab, var(--ufront-accent) 12%, var(--ufront-bg));
        --ufront-section-border: color-mix(in oklab, var(--ufront-accent) 40%, var(--ufront-bg));
        --ufront-utility-bg: color-mix(in oklab, var(--ufront-accent) 8%, var(--ufront-bg));
        --ufront-utility-border: color-mix(in oklab, var(--ufront-accent) 28%, var(--ufront-bg));
        --ufront-surface: color-mix(in oklab, var(--ufront-accent) 5%, var(--ufront-bg));
        --ufront-surface-border: color-mix(
            in oklab,
            var(--ufront-accent) 15%,
            color-mix(in oklab, var(--ufront-text) 22%, var(--ufront-bg))
        );
    }
}

/* ---------- Base ---------- */

body {
    margin: 0;
    background: var(--ufront-bg, #111);
    overflow: hidden;
    color: var(--ufront-text, #eee);
    font-family: sans-serif;
}

/* ---------- Splash overlay ---------- */

#splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    padding: 24px 12px;
    box-sizing: border-box;
    z-index: 10;
}

#splash h1 {
    margin: 0 0 10px 0;
    font-size: 28px;
    letter-spacing: 1px;
}

/* ---------- Progress bar ---------- */

#progress-bar {
    /* The full width of the card, lined up with every other element in it (`.ufront-status` centres text, not
       blocks). */
    width: 100%;
    height: 4px;
    background: var(--ufront-panel-track, #333);
    margin: 20px 0;
    border-radius: 2px;
    box-sizing: border-box;
}

#progress-fill {
    height: 100%;
    background: var(--ufront-accent, #c00);
    width: 0%;
    transition: width 0.2s;
    border-radius: 2px;
}

/* ---------- Status text ---------- */

#status {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: var(--ufront-text-dim, #999);
}

/* ---------- Start button ---------- */

#start-btn {
    padding: 12px 32px;
    font-size: 18px;
    cursor: pointer;
    background: var(--ufront-accent, #c00);
    color: var(--ufront-accent-contrast, #fff);
    border: none;
    border-radius: 4px;
    transition: background 0.15s;
    /* Visibility is App.vue's (v-show="launchState.ready"), so no display:none here. */
}

#start-btn:hover {
    background: var(--ufront-accent-hover, #e00);
}

#start-btn:active {
    background: var(--ufront-accent-active, #a00);
}

#start-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ---------- Canvas (game) ---------- */

#canvas {
    display: none; /* shown on launch */
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;

    /* The canvas carries tabindex="0" and boot.ts focuses it. No focus ring: it would draw a line around the game and,
       inside the fullscreen element, shrink the visible area below the drawing buffer the engine sized from the
       window, so the browser would rescale the frame. The canvas stays focusable, and the box is exactly the element. */
    outline: none;
    border: 0;
    box-sizing: border-box;
    background: #000; /* any letterboxing is black, never a white flash */
    /* No second `display` here: the rule opens with `display: none` (hidden until launch) and boot.ts sets an inline
       `display: block` when it reveals the canvas; a later declaration would win and show the canvas at boot. */
}

#canvas:focus,
#canvas:focus-visible {
    outline: none;
}

/* ---------- Config form ---------- */

#config-form {
    margin: 20px 0;
    text-align: left;
    max-width: 500px;
    width: 90%;
}

#config-form label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--ufront-text-muted, #aaa);
}

#config-form input[type='text'] {
    background: var(--ufront-surface, #222);
    color: var(--ufront-text, #eee);
    border: 1px solid var(--ufront-surface-border, #555);
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 3px;
    outline: none;
    box-sizing: border-box;
}

#config-form input[type='text']:focus {
    border-color: var(--ufront-accent, #c00);
}

/* ---------- Travel options ---------- */

#travel-options {
    width: 100%;
    margin-bottom: 12px;
}

/* ---------- Form action buttons ---------- */

.form-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* ---------- Copy feedback ---------- */

.copy-feedback {
    color: var(--ufront-success, #0c0);
    font-size: 13px;
    margin-left: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}

.copy-feedback.visible {
    opacity: 1;
}

/* ---------- Download overlay ---------- */

#download-overlay {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: var(--ufront-text, #eee);
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 0 0 4px 4px;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

#download-overlay.visible {
    opacity: 1;
}

/* ---------- Storage section ---------- */

#storage-section {
    margin-top: 16px;
    text-align: left;
    max-width: 500px;
    width: 90%;
}

#storage-section details {
    margin-top: 12px;
}

#storage-section summary {
    cursor: pointer;
    color: var(--ufront-text-muted, #aaa);
    font-size: 13px;
}

#storage-section label {
    display: block;
    margin: 8px 0 4px 0;
    font-size: 13px;
    color: var(--ufront-text-muted, #aaa);
}

#storage-section input[type='text'] {
    background: var(--ufront-surface, #222);
    color: var(--ufront-text, #eee);
    border: 1px solid var(--ufront-surface-border, #555);
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 3px;
    outline: none;
    box-sizing: border-box;
    width: 100%;
}

#storage-section input[type='text']:focus {
    border-color: var(--ufront-accent, #c00);
}

/* ---------- Engine options ---------- */

#engine-options {
    width: 100%;
    margin-bottom: 12px;
}

/* ---------- Status error ---------- */

#status.error {
    color: var(--ufront-error, #e04141);
}

/* The retry under a failed file-list load, spaced like the status line above it. */
#file-list-retry {
    margin: 0 0 16px 0;
}

/* ---------- Mod upload controls ---------- */

#mod-file-input {
    margin: 8px 0;
    font-size: 13px;
    color: var(--ufront-text-muted, #aaa);
}

#mod-upload-mode {
    width: 100%;
    margin-bottom: 8px;
    background: var(--ufront-surface, #222);
    color: var(--ufront-text, #eee);
    border: 1px solid var(--ufront-surface-border, #555);
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 3px;
    outline: none;
    box-sizing: border-box;
}

#mod-upload-mode:focus {
    border-color: var(--ufront-accent, #c00);
}

#mod-upload-status {
    display: block;
    margin: 4px 0;
    font-size: 13px;
    color: var(--ufront-success, #0c0);
}

#storage-sizes {
    margin: 8px 0;
    font-size: 12px;
    color: var(--ufront-text-dim, #888);
}

/* ---------- Network section ---------- */

#network-section {
    margin-top: 16px;
    text-align: left;
    max-width: 500px;
    width: 90%;
}

#network-section details {
    margin-top: 12px;
}

#network-section summary {
    cursor: pointer;
    color: var(--ufront-text-muted, #aaa);
    font-size: 13px;
}

#network-section label {
    display: block;
    margin: 8px 0 4px 0;
    font-size: 13px;
    color: var(--ufront-text-muted, #aaa);
}

#network-section input[type='text'] {
    background: var(--ufront-surface, #222);
    color: var(--ufront-text, #eee);
    border: 1px solid var(--ufront-surface-border, #555);
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 3px;
    outline: none;
    box-sizing: border-box;
    width: 100%;
}

#network-section input[type='text']:focus {
    border-color: var(--ufront-accent, #c00);
}

#network-section input[type='checkbox'] {
    margin-right: 6px;
    accent-color: var(--ufront-accent, #c00);
}

/* ---------- Network actions (Listen + Copy Join) ---------- */

.net-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* ---------- Single-column launcher card ---------- */

.ufront-card {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ufront-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ufront-status {
    text-align: center;
}

.ufront-section {
    text-align: left;
    background: var(--ufront-section-bg, #1a1a1a);
    border: 1px solid var(--ufront-section-border, #333);
    border-radius: 8px;
    padding: 14px 16px;
    box-sizing: border-box;
}

.ufront-section-title {
    margin: 0 0 10px 0;
    font-size: 15px;
    color: var(--ufront-text, #eee);
}

.ufront-start {
    display: block;
    width: 100%;
    position: sticky;
    bottom: 0;
}

/* The debug-binary link: small, dim, no button chrome, under the Start button rather than beside it. A diagnostic
   escape hatch, not a second call to action. */
.ufront-debug-line {
    margin: 6px 0 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
}
.ufront-debug-line a {
    color: var(--ufront-text-dim, #8a94a6);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ufront-debug-line a:hover {
    color: var(--ufront-text, #e8edf4);
}
.ufront-debug-active {
    display: block;
    color: var(--ufront-accent, #c00);
    font-size: 11px;
    margin-top: 2px;
}

/* The in-card sections take the card's width (the #config-form, #storage-section and #network-section rules above
   give them max-width:500px / width:90%). */
.ufront-card #config-form,
.ufront-card #storage-section,
.ufront-card #network-section {
    max-width: none;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}