:root {
    --vault-bg: #071017;
    --vault-panel: rgba(10, 24, 34, 0.82);
    --vault-panel-strong: rgba(12, 31, 43, 0.95);

    --vault-line: rgba(120, 235, 255, 0.16);
    --vault-line-strong: rgba(120, 235, 255, 0.38);

    --vault-text: #edfaff;
    --vault-muted: #89a6b5;

    --vault-energy: #7df5ff;
    --vault-energy-soft: rgba(125, 245, 255, 0.18);

    --vault-success: #7dffbf;
    --vault-warning: #ffd76a;
    --vault-danger: #ff6b7d;

    --vault-radius: 22px;

    --vault-font-body: 'Spectral', Georgia, 'Times New Roman', serif;
    --vault-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* This sheet originally declared no font and no page background, so it inherited whatever the
   host page had (Times, on a white body). Both are set explicitly here. */
body {
    margin: 0;
    background: var(--vault-bg);
    color: var(--vault-text);
    font-family: var(--vault-font-body);
}

a { text-decoration: none; }
* { box-sizing: border-box; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }

.vault-title,
.stat-value,
.vault-side-panel h2,
.vault-result .result-title,
.vault-brand-mark {
    font-family: var(--vault-font-display);
}

/* Live status line under the board, and the header dot's states. */
.vault-note {
    margin: 14px 0 0;
    min-height: 20px;
    font-size: 13px;
    color: var(--vault-muted);
}

/* .vault-intro and .vault-result both lay their children out in a column, so paired
   actions get their own row here — primary left, secondary right. */
.vault-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
    margin-top: 28px;
}

.vault-actions .vault-primary-button,
.vault-actions .vault-secondary-button {
    margin-top: 0;
    flex: 0 1 auto;
}

.status-dot.ok { background: var(--vault-success); box-shadow: 0 0 10px var(--vault-success); }
.status-dot.warn { background: var(--vault-warning); box-shadow: 0 0 10px var(--vault-warning); }
.status-dot.danger { background: var(--vault-danger); box-shadow: 0 0 10px var(--vault-danger); }


/* =========================================================
   PAGE
   ========================================================= */

.vault-page {
    position: relative;
    min-height: calc(100vh - 70px);
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(0, 191, 255, 0.08),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #071017 0%,
            #050a0f 100%
        );
    color: var(--vault-text);
}

.vault-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.vault-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(102, 229, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(102, 229, 255, 0.035) 1px,
            transparent 1px
        );

    background-size: 46px 46px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.9),
            transparent 90%
        );
}

.vault-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.13;
}

.vault-glow-one {
    top: -160px;
    left: -120px;
    background: #00c8ff;
}

.vault-glow-two {
    right: -180px;
    bottom: -220px;
    background: #00ffb7;
}


/* =========================================================
   SHELL
   ========================================================= */

.vault-shell {
    position: relative;
    z-index: 2;

    width: min(1400px, calc(100% - 40px));
    margin: 0 auto;

    padding:
        26px
        0
        70px;
}


/* =========================================================
   HEADER
   ========================================================= */

.vault-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 56px;
    margin-bottom: 54px;

    border-bottom:
        1px solid
        var(--vault-line);

    font-size: 0.76rem;
    letter-spacing: 0.16em;
}

.vault-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vault-brand-mark {
    font-weight: 900;
    color: var(--vault-energy);
}

.vault-brand-divider {
    color: rgba(255, 255, 255, 0.25);
}

.vault-brand-mode {
    color: var(--vault-muted);
}

.vault-status {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #9fb8c4;
}

.status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--vault-success);

    box-shadow:
        0 0 0 4px rgba(125, 255, 191, 0.08),
        0 0 15px rgba(125, 255, 191, 0.65);
}


/* =========================================================
   COMMON
   ========================================================= */

.hidden {
    display: none !important;
}

.vault-screen {
    animation:
        vaultFadeIn
        0.45s ease;
}

@keyframes vaultFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vault-eyebrow {
    margin-bottom: 14px;

    color: var(--vault-energy);

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.28em;
}


/* =========================================================
   INTRO
   ========================================================= */

.vault-intro {
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 870px;
    margin: 0 auto;

    text-align: center;
}

.vault-title {
    margin: 0;

    font-size:
        clamp(
            3.6rem,
            9vw,
            7.4rem
        );

    font-weight: 950;
    line-height: 0.82;

    letter-spacing: -0.075em;
}

.vault-title span {
    display: block;

    margin-top: 14px;

    color: transparent;

    -webkit-text-stroke:
        1px
        rgba(125, 245, 255, 0.9);

    text-shadow:
        0 0 30px
        rgba(125, 245, 255, 0.12);
}

.vault-subtitle {
    max-width: 580px;

    margin:
        32px
        auto
        38px;

    color: var(--vault-muted);

    font-size: 1.05rem;
    line-height: 1.75;
}


/* =========================================================
   MISSION CARD
   ========================================================= */

.mission-card {
    width: 100%;

    overflow: hidden;

    border:
        1px solid
        var(--vault-line);

    border-radius:
        var(--vault-radius);

    background:
        linear-gradient(
            145deg,
            rgba(13, 29, 40, 0.93),
            rgba(7, 17, 24, 0.88)
        );

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, 0.28);
}

.mission-card-header {
    display: flex;
    justify-content: space-between;

    padding:
        17px
        21px;

    border-bottom:
        1px solid
        var(--vault-line);

    color: var(--vault-muted);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.mission-id {
    color: var(--vault-energy);
}

.mission-rules {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    text-align: left;
}

.mission-rule {
    display: flex;
    gap: 15px;

    min-height: 170px;

    padding:
        24px
        22px;

    border-right:
        1px solid
        var(--vault-line);
}

.mission-rule:last-child {
    border-right: none;
}

.rule-number {
    color:
        rgba(125, 245, 255, 0.35);

    font-size: 0.74rem;
    font-weight: 800;
}

.mission-rule strong {
    display: block;

    margin-bottom: 9px;

    font-size: 0.95rem;
}

.mission-rule p {
    margin: 0;

    color: var(--vault-muted);

    font-size: 0.86rem;
    line-height: 1.6;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.vault-primary-button,
.vault-secondary-button {
    appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    min-height: 54px;

    padding:
        0
        24px;

    border-radius: 14px;

    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.vault-primary-button {
    margin-top: 28px;

    border:
        1px solid
        rgba(125, 245, 255, 0.65);

    background:
        linear-gradient(
            135deg,
            rgba(125, 245, 255, 0.18),
            rgba(125, 245, 255, 0.06)
        );

    color: var(--vault-text);

    box-shadow:
        inset
        0 0 0 1px
        rgba(255, 255, 255, 0.03),
        0 0 34px
        rgba(125, 245, 255, 0.08);
}

.vault-primary-button:hover {
    transform: translateY(-2px);

    border-color:
        var(--vault-energy);

    box-shadow:
        0 0 35px
        rgba(125, 245, 255, 0.14);
}

.vault-primary-button:active {
    transform: translateY(0);
}

.vault-secondary-button {
    border:
        1px solid
        var(--vault-line);

    background:
        rgba(255, 255, 255, 0.02);

    color: var(--vault-muted);
}

.vault-secondary-button:hover {
    border-color:
        var(--vault-line-strong);

    color:
        var(--vault-text);
}

.vault-primary-button:disabled,
.vault-secondary-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}


/* =========================================================
   GAME TOP BAR
   ========================================================= */

.game-topbar {
    display: grid;

    grid-template-columns:
        1fr
        1fr
        1fr;

    align-items: end;

    margin-bottom: 12px;

    padding:
        0
        4px;
}

.game-stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.game-stat-center {
    text-align: center;
}

.game-stat-right {
    text-align: right;
}

.stat-label {
    color: var(--vault-muted);

    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.stat-value {
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.timer-value {
    font-size: 1.55rem;
}

.status-value {
    color: var(--vault-warning);
}


/* =========================================================
   TIMER
   ========================================================= */

.vault-progress-track {
    width: 100%;
    height: 3px;

    margin-bottom: 34px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.05);
}

.vault-progress-bar {
    width: 100%;
    height: 100%;

    transform-origin: left;

    background:
        linear-gradient(
            90deg,
            var(--vault-energy),
            var(--vault-success)
        );

    box-shadow:
        0 0 14px
        rgba(125, 245, 255, 0.6);

    transition:
        width 0.3s linear,
        background 0.3s ease;
}

.vault-progress-bar.warning {
    background:
        var(--vault-warning);
}

.vault-progress-bar.danger {
    background:
        var(--vault-danger);

    animation:
        timerPulse
        0.75s infinite alternate;
}

@keyframes timerPulse {
    from {
        opacity: 0.7;
    }

    to {
        opacity: 1;
        box-shadow:
            0 0 22px
            rgba(255, 107, 125, 0.7);
    }
}


/* =========================================================
   GAME LAYOUT
   ========================================================= */

.game-layout {
    display: grid;

    grid-template-columns:
        minmax(180px, 230px)
        minmax(400px, 650px)
        minmax(180px, 230px);

    gap: 28px;

    justify-content: center;
    align-items: center;
}

.vault-side-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.panel-block {
    padding: 20px;

    border:
        1px solid
        var(--vault-line);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(13, 29, 40, 0.78),
            rgba(7, 17, 24, 0.55)
        );

    backdrop-filter:
        blur(10px);
}

.panel-label {
    display: block;

    margin-bottom: 14px;

    color: var(--vault-energy);

    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.2em;
}

.panel-block h2 {
    margin:
        0
        0
        9px;

    font-size: 1.12rem;
}

.panel-block p {
    margin: 0;

    color:
        var(--vault-muted);

    font-size: 0.85rem;
    line-height: 1.6;
}


/* =========================================================
   ENERGY CORE
   ========================================================= */

.energy-core {
    position: relative;

    display: grid;
    place-items: center;

    width: 106px;
    height: 106px;

    margin:
        22px
        auto
        14px;
}

.energy-core-ring {
    position: absolute;
    inset: 0;

    border:
        1px solid
        rgba(125, 245, 255, 0.22);

    border-radius: 50%;

    box-shadow:
        inset
        0 0 22px
        rgba(125, 245, 255, 0.05);

    animation:
        coreSpin
        9s linear infinite;
}

.energy-core-ring::before,
.energy-core-ring::after {
    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background:
        var(--vault-energy);

    box-shadow:
        0 0 14px
        var(--vault-energy);
}

.energy-core-ring::before {
    top: 6px;
    left: 48px;
}

.energy-core-ring::after {
    bottom: 6px;
    left: 48px;
}

@keyframes coreSpin {
    to {
        transform: rotate(360deg);
    }
}

.energy-core-inner {
    display: grid;
    place-items: center;

    width: 60px;
    height: 60px;

    border:
        1px solid
        var(--vault-line-strong);

    border-radius: 50%;

    background:
        rgba(125, 245, 255, 0.055);

    box-shadow:
        0 0 28px
        rgba(125, 245, 255, 0.1);
}

.energy-core-inner span {
    color: var(--vault-energy);

    font-size: 1.15rem;
    font-weight: 950;
}

.energy-core.online
.energy-core-inner {
    background:
        rgba(125, 255, 191, 0.11);

    border-color:
        var(--vault-success);

    box-shadow:
        0 0 38px
        rgba(125, 255, 191, 0.24);
}

.energy-state {
    display: block;

    text-align: center;

    color: var(--vault-muted);

    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.18em;
}


/* =========================================================
   BOARD
   ========================================================= */

.vault-board-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.board-frame {
    position: relative;

    width: min(100%, 620px);

    padding: 22px;

    border:
        1px solid
        rgba(125, 245, 255, 0.2);

    border-radius:
        26px;

    background:
        linear-gradient(
            145deg,
            rgba(11, 28, 39, 0.86),
            rgba(5, 14, 20, 0.92)
        );

    box-shadow:
        0 40px 90px
        rgba(0, 0, 0, 0.42),
        inset
        0 0 50px
        rgba(125, 245, 255, 0.025);
}

.board-frame::before {
    content: "";

    position: absolute;
    inset: 9px;

    pointer-events: none;

    border:
        1px solid
        rgba(255, 255, 255, 0.025);

    border-radius:
        19px;
}

.board-corner {
    position: absolute;

    width: 24px;
    height: 24px;

    pointer-events: none;
}

.board-corner-tl {
    top: 11px;
    left: 11px;

    border-top:
        2px solid
        var(--vault-energy);

    border-left:
        2px solid
        var(--vault-energy);
}

.board-corner-tr {
    top: 11px;
    right: 11px;

    border-top:
        2px solid
        var(--vault-energy);

    border-right:
        2px solid
        var(--vault-energy);
}

.board-corner-bl {
    bottom: 11px;
    left: 11px;

    border-bottom:
        2px solid
        var(--vault-energy);

    border-left:
        2px solid
        var(--vault-energy);
}

.board-corner-br {
    right: 11px;
    bottom: 11px;

    border-right:
        2px solid
        var(--vault-energy);

    border-bottom:
        2px solid
        var(--vault-energy);
}

.vault-board {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 8px;

    aspect-ratio: 1 / 1;
}


/* =========================================================
   TILES
   ========================================================= */

.vault-tile {
    position: relative;

    appearance: none;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border:
        1px solid
        rgba(125, 245, 255, 0.1);

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 40, 53, 0.8),
            rgba(7, 20, 28, 0.9)
        );

    cursor: pointer;

    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}

.vault-tile:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(125, 245, 255, 0.38);

    background:
        linear-gradient(
            145deg,
            rgba(19, 48, 62, 0.92),
            rgba(7, 22, 30, 0.96)
        );

    box-shadow:
        0 10px 24px
        rgba(0, 0, 0, 0.22);
}

.vault-tile:active {
    transform:
        scale(0.96);
}

.vault-tile::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        #b8faff;

    box-shadow:
        0 0 10px
        rgba(125, 245, 255, 0.8);
}


/* =========================================================
   CIRCUIT LINES
   ========================================================= */

.circuit-line {
    position: absolute;

    background:
        linear-gradient(
            90deg,
            rgba(125, 245, 255, 0.42),
            var(--vault-energy)
        );

    box-shadow:
        0 0 8px
        rgba(125, 245, 255, 0.35);

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.circuit-up {
    width: 4px;
    height: 50%;

    top: 0;
    left: calc(50% - 2px);
}

.circuit-down {
    width: 4px;
    height: 50%;

    bottom: 0;
    left: calc(50% - 2px);
}

.circuit-left {
    width: 50%;
    height: 4px;

    top: calc(50% - 2px);
    left: 0;
}

.circuit-right {
    width: 50%;
    height: 4px;

    top: calc(50% - 2px);
    right: 0;
}

.vault-tile.powered {
    border-color:
        rgba(125, 255, 191, 0.55);

    background:
        linear-gradient(
            145deg,
            rgba(16, 60, 57, 0.78),
            rgba(7, 26, 30, 0.95)
        );

    box-shadow:
        inset
        0 0 24px
        rgba(125, 255, 191, 0.08),
        0 0 18px
        rgba(125, 255, 191, 0.08);
}

.vault-tile.powered
.circuit-line {
    background:
        var(--vault-success);

    box-shadow:
        0 0 13px
        rgba(125, 255, 191, 0.85);
}

.vault-tile.powered::after {
    background:
        var(--vault-success);

    box-shadow:
        0 0 16px
        rgba(125, 255, 191, 0.95);
}

.vault-tile.source {
    border-color:
        rgba(125, 245, 255, 0.8);

    box-shadow:
        inset
        0 0 25px
        rgba(125, 245, 255, 0.12),
        0 0 22px
        rgba(125, 245, 255, 0.1);
}

.vault-tile.source::before {
    content: "E";

    position: absolute;

    z-index: 4;

    display: grid;
    place-items: center;

    width: 26px;
    height: 26px;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    border:
        1px solid
        rgba(125, 245, 255, 0.5);

    border-radius: 50%;

    background:
        #07131b;

    color:
        var(--vault-energy);

    font-size: 0.66rem;
    font-weight: 950;

    box-shadow:
        0 0 20px
        rgba(125, 245, 255, 0.15);
}

.vault-tile.source::after {
    display: none;
}


/* =========================================================
   BOARD INSTRUCTION
   ========================================================= */

.board-instruction {
    margin-top: 17px;

    color:
        var(--vault-muted);

    font-size: 0.72rem;
    letter-spacing: 0.07em;
}

.mouse-symbol {
    display: inline-block;

    margin-right: 6px;

    color:
        var(--vault-energy);
}


/* =========================================================
   SIDE DATA
   ========================================================= */

.data-row {
    display: flex;
    justify-content: space-between;

    padding:
        10px
        0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.04);

    color:
        var(--vault-muted);

    font-size: 0.72rem;
}

.data-row:last-child {
    border-bottom: none;
}

.data-row strong {
    color:
        var(--vault-text);
}

.fragment-display {
    display: flex;
    justify-content: space-between;
    gap: 8px;

    margin-top: 20px;
}

.fragment {
    flex: 1;

    display: grid;
    place-items: center;

    min-height: 46px;

    border:
        1px solid
        var(--vault-line);

    border-radius: 10px;

    color:
        rgba(255, 255, 255, 0.16);

    background:
        rgba(255, 255, 255, 0.015);

    transition:
        all 0.25s ease;
}

.fragment.active {
    color:
        var(--vault-energy);

    border-color:
        rgba(125, 245, 255, 0.55);

    background:
        rgba(125, 245, 255, 0.08);

    box-shadow:
        0 0 20px
        rgba(125, 245, 255, 0.1);
}


/* =========================================================
   GAME ACTIONS
   ========================================================= */

.game-actions {
    display: flex;
    justify-content: center;
    gap: 13px;

    margin-top: 33px;
}

.game-actions
.vault-primary-button {
    margin-top: 0;
}

.breach-button {
    min-width: 210px;
}


/* =========================================================
   RESULT
   ========================================================= */

.vault-result {
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 760px;

    margin:
        60px
        auto
        0;

    text-align: center;
}

.result-symbol {
    display: grid;
    place-items: center;

    width: 94px;
    height: 94px;

    margin-bottom: 30px;

    border:
        1px solid
        rgba(125, 255, 191, 0.4);

    border-radius: 50%;

    background:
        rgba(125, 255, 191, 0.06);

    color:
        var(--vault-success);

    font-size: 2.2rem;

    box-shadow:
        0 0 60px
        rgba(125, 255, 191, 0.1);
}

.result-title {
    margin:
        0
        0
        15px;

    font-size:
        clamp(
            2rem,
            5vw,
            4rem
        );

    font-weight: 950;

    letter-spacing:
        -0.04em;
}

.result-message {
    max-width: 480px;

    margin:
        0
        auto
        34px;

    color:
        var(--vault-muted);
}

.result-stats {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    width: 100%;

    overflow: hidden;

    border:
        1px solid
        var(--vault-line);

    border-radius:
        var(--vault-radius);

    background:
        var(--vault-panel);
}

.result-stat {
    display: flex;
    flex-direction: column;
    gap: 9px;

    padding:
        24px
        16px;

    border-right:
        1px solid
        var(--vault-line);
}

.result-stat:last-child {
    border-right: none;
}

.result-stat span {
    color:
        var(--vault-muted);

    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.result-stat strong {
    font-size: 1.55rem;
}


/* =========================================================
   TOAST
   ========================================================= */

.vault-toast {
    position: fixed;

    z-index: 1000;

    left: 50%;
    bottom: 28px;

    transform:
        translateX(-50%);

    min-width: 250px;
    max-width: calc(100% - 40px);

    padding:
        13px
        18px;

    border:
        1px solid
        var(--vault-line-strong);

    border-radius: 12px;

    background:
        rgba(8, 20, 28, 0.95);

    color:
        var(--vault-text);

    text-align: center;

    font-size: 0.8rem;

    backdrop-filter:
        blur(16px);

    box-shadow:
        0 14px 40px
        rgba(0, 0, 0, 0.34);

    animation:
        vaultToastIn
        0.2s ease;
}

@keyframes vaultToastIn {
    from {
        opacity: 0;
        transform:
            translate(-50%, 10px);
    }

    to {
        opacity: 1;
        transform:
            translate(-50%, 0);
    }
}


/* =========================================================
   FAILURE STATE
   ========================================================= */

.vault-result.failed
.result-symbol {
    border-color:
        rgba(255, 107, 125, 0.4);

    background:
        rgba(255, 107, 125, 0.06);

    color:
        var(--vault-danger);

    box-shadow:
        0 0 60px
        rgba(255, 107, 125, 0.1);
}

.vault-game.shake
.board-frame {
    animation:
        vaultShake
        0.38s ease;
}

@keyframes vaultShake {
    0%,
    100% {
        transform:
            translateX(0);
    }

    25% {
        transform:
            translateX(-7px);
    }

    50% {
        transform:
            translateX(7px);
    }

    75% {
        transform:
            translateX(-4px);
    }
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .game-layout {
        grid-template-columns:
            1fr;

        max-width: 680px;

        margin:
            0
            auto;
    }

    .vault-side-panel {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        order: 2;
    }

    .vault-board-area {
        order: 1;
    }
}


@media (max-width: 760px) {

    .vault-shell {
        width:
            min(
                100% - 22px,
                1400px
            );
    }

    .vault-header {
        margin-bottom: 34px;
    }

    .vault-brand-mode {
        display: none;
    }

    .mission-rules {
        grid-template-columns:
            1fr;
    }

    .mission-rule {
        min-height: auto;

        border-right: none;

        border-bottom:
            1px solid
            var(--vault-line);
    }

    .mission-rule:last-child {
        border-bottom: none;
    }

    .game-topbar {
        grid-template-columns:
            1fr
            1fr;

        row-gap: 17px;
    }

    .game-stat-center {
        display: none;
    }

    .vault-side-panel {
        grid-template-columns:
            1fr;
    }

    .board-frame {
        padding: 13px;

        border-radius: 18px;
    }

    .vault-board {
        gap: 5px;
    }

    .vault-tile {
        border-radius: 9px;
    }

    .game-actions {
        flex-direction: column;
    }

    .game-actions button {
        width: 100%;
    }

    .result-stats {
        grid-template-columns:
            1fr;
    }

    .result-stat {
        border-right: none;

        border-bottom:
            1px solid
            var(--vault-line);
    }

    .result-stat:last-child {
        border-bottom: none;
    }
}