/* Material: the plate every chassis piece wears, the room chrome
   built on it, and the painted 9-slice frame HudFrame.mount fills. */

:root {
    --rq-plate-bg:
        var(--rq-painterly-texture),
        linear-gradient(
            180deg,
            rgba(26, 18, 44, 0.90) 0%,
            rgba(10, 6, 24, 0.96) 100%);
    --rq-plate-edge:
        inset 0 1px 0 rgba(255, 222, 145, 0.18),
        inset 0 0 0 1px rgba(255, 215, 130, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.55);
    --rq-plate-cast: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
    --rq-frame-slice: calc(14px * var(--ui-scale, 1));
}

.rq-plate {
    position: relative;
    box-sizing: border-box;
    padding: 14px 16px;
    background: var(--rq-plate-bg);
    background-blend-mode: multiply, normal;
    background-size: 240px 240px, auto;
    box-shadow: var(--rq-plate-edge);
    clip-path: var(--rq-octogonal-chip);
    -webkit-clip-path: var(--rq-octogonal-chip);
    color: var(--rq-text);
}
.rq-plate--flush { padding: 0; }
.rq-plate__title {
    font-family: var(--rq-font-display);
    font-size: 17px;
    letter-spacing: 0.02em;
    color: var(--rq-gold);
    margin: 0 0 8px;
}

.rq-field {
    display: block;
    margin-bottom: 10px;
    text-align: left;
}
.rq-field .rq-modal__label {
    display: block;
    margin: 0 0 6px;
}
.rq-select,
.rq-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    font-family: var(--rq-font-mono);
    font-size: 13px;
    color: var(--rq-text);
    background: var(--rq-paint-fill-strong);
    border: 1px solid var(--rq-gold-dim);
    border-radius: 4px;
    touch-action: manipulation;
}
.rq-select:focus-visible,
.rq-input:focus-visible {
    outline: none;
    border-color: var(--rq-gold);
}
.rq-input::placeholder { color: var(--rq-text-dim); }

.arcade-root {
    position: fixed;
    inset: 0;
    z-index: var(--z-room, 5000);
    display: none;
    flex-direction: column;
    background-color: var(--rq-bg);
    color: var(--rq-text);
    font-family: var(--rq-font-display);
}
.arcade-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: calc(20px * var(--ui-scale, 1)) calc(26px * var(--ui-scale, 1)) 0;
    text-shadow: 0 1px 3px var(--rq-bg);
}
.arcade-head__keeper {
    width: 64px;
    height: 64px;
    flex: none;
}
.arcade-head__sub {
    font-family: var(--rq-font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rq-text-dim);
}
.arcade-head__title {
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1.1;
    color: var(--rq-gold);
}
.arcade-head__line {
    margin-top: 4px;
    font-style: italic;
    font-size: 15px;
    color: var(--ui-text-narrative);
}
.arcade-card,
.arcade-result {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: auto;
    width: min(92%, 440px);
    text-align: center;
    padding: 24px 22px;
    filter: var(--rq-plate-cast);
}
.arcade-card--wide { width: min(94%, 520px); }
.arcade-card .rq-list { text-align: left; }
.arcade-card__note {
    font-family: var(--rq-font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--rq-text-dim);
    margin-bottom: 10px;
}

.arcade-result__pb {
    font-family: var(--rq-font-mono);
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--rq-gold);
}
.arcade-result__score {
    font-family: var(--rq-font-mono);
    font-size: 48px;
    line-height: 1.1;
    color: var(--row-accent);
    text-shadow: 0 0 18px var(--rq-gold-glow);
}
.arcade-result__stats {
    font-family: var(--rq-font-mono);
    font-size: 13px;
    line-height: 1.9;
    white-space: pre-line;
    color: var(--rq-text);
    margin: 8px 0 14px;
}

.rq-modal.hud2-frame--art,
.rq-plate.hud2-frame--art {
    background: none;
    clip-path: none;
    -webkit-clip-path: none;
    padding: var(--rq-frame-slice);
    border: var(--rq-frame-slice) solid transparent;
    border-image-source: var(--hud2-frame-art);
    border-image-slice: 64 fill;
    border-image-width: 1;
    border-image-repeat: stretch;
    box-shadow: none;
}
.rq-modal.hud2-frame--art .rq-modal__body {
    clip-path: none;
    -webkit-clip-path: none;
}