/*
 * NVII Menu UI
 * A small, dependency-free CSS framework inspired by late-90s JRPG menu interfaces.
 * Fan-made; no game assets or fonts are included.
 */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

:root {
    --nvii-bg: #000000;

    /*
     * Colors sampled closely from the inspiration.
     */
    --nvii-window-top-left: #0052af;
    --nvii-window-top-right: #000254;
    --nvii-window-bottom-left: #00017c;
    --nvii-window-bottom-right: #000027;

    --nvii-border: #eeeeee;
    --nvii-border-dim: #777777;

    --nvii-text: #f7f7f7;
    --nvii-muted: #c3c5d2;
    --nvii-cyan: #49f4ff;
    --nvii-yellow: #fff36a;
    --nvii-danger: rgb(255, 123, 123);

    --nvii-shadow: rgba(0, 0, 0, 0.85);

    --nvii-window-radius: 7px;
    --nvii-gap: 0.75rem;

    --nvii-font-family: 'Rajdhani', sans-serif;
    --nvii-font-family-mono: 'Share Tech Mono', monospace;

    --nvii-pointer: '☞';
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--nvii-bg);
    font-size: 24px;
}

body.nvii-ui {
    margin: 0;
    min-height: 100vh;
    background: var(--nvii-bg);
    color: var(--nvii-text);
    font-family: var(--nvii-font-family);
    line-height: 1.1;
    text-shadow: 1px 1px 0 #000000;
}

.nvii-ui a {
    color: inherit;
    text-decoration: none;
}

.nvii-ui button,
.nvii-ui input,
.nvii-ui select,
.nvii-ui textarea {
    font: inherit;
}

/* --------------------------------------------------------------------------
 * Windows / cards
 * ----------------------------------------------------------------------- */

.nvii-window,
.nvii-card {
    position: relative;
    color: var(--nvii-text);

    /*
     * Four-corner gradient.
     *
     * The reference is:
     *
     * TL: medium-bright blue
     * TR: deep blue
     * BL: saturated dark royal blue
     * BR: nearly black navy
     */
    background-color: var(--nvii-window-bottom-right);
    background-image: radial-gradient(
            ellipse at top left,
            var(--nvii-window-top-left) 0%,
            rgba(0, 82, 175, 0.85) 24%,
            rgba(0, 82, 175, 0) 72%
    ),
    radial-gradient(
            ellipse at bottom left,
            var(--nvii-window-bottom-left) 0%,
            rgba(0, 1, 124, 0.75) 28%,
            rgba(0, 1, 124, 0) 72%
    ),
    radial-gradient(
            ellipse at top right,
            var(--nvii-window-top-right) 0%,
            rgba(0, 2, 84, 0.8) 35%,
            rgba(0, 2, 84, 0) 75%
    ),
    linear-gradient(
            135deg,
            #003e9b 0%,
            #00137b 43%,
            #000049 72%,
            var(--nvii-window-bottom-right) 100%
    );

    border: 2px solid var(--nvii-border);
    border-radius: var(--nvii-window-radius);

    box-shadow: 0 0 0 1px #000000,
    0 0 0 2px var(--nvii-border-dim),
    inset 1px 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 8px 1px rgba(0, 0, 0, 0.65),
    3px 3px 0 var(--nvii-shadow);
}

.nvii-card {
    padding: 1rem;
}

.nvii-card-header,
.nvii-card-body,
.nvii-card-footer {
    position: relative;
}

.nvii-card-header {
    margin-bottom: 0.75rem;
}

.nvii-card-footer {
    margin-top: 0.75rem;
}

.nvii-window-title {
    display: inline-block;
    margin: 0 0 0.55rem;
    color: var(--nvii-muted);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
 * Type
 * ----------------------------------------------------------------------- */

.nvii-h1,
.nvii-h2,
.nvii-h3,
.nvii-h4,
.nvii-h5,
.nvii-h6 {
    margin: 0;
    font-weight: 400;
    line-height: 1.05;
}

.nvii-h1 {
    font-size: clamp(2rem, 4vw, 3.25rem);
}

.nvii-h2 {
    font-size: clamp(1.65rem, 3vw, 2.5rem);
}

.nvii-h3 {
    font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.nvii-h4 {
    font-size: 1.25rem;
}

.nvii-h5 {
    font-size: 1.05rem;
}

.nvii-h6 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.nvii-text-xs {
    font-size: 0.75rem;
}

.nvii-text-sm {
    font-size: 0.875rem;
}

.nvii-text-md {
    font-size: 1rem;
}

.nvii-text-lg {
    font-size: 1.25rem;
}

.nvii-text-xl {
    font-size: 1.5rem;
}

.nvii-text-muted {
    color: var(--nvii-muted);
}

.nvii-text-cyan {
    color: var(--nvii-cyan);
}

.nvii-text-yellow {
    color: var(--nvii-yellow);
}

.nvii-text-danger {
    color: var(--nvii-danger);
}

.nvii-text-white {
    color: var(--nvii-text);
}

.nvii-text-left {
    text-align: left;
}

.nvii-text-center {
    text-align: center;
}

.nvii-text-right {
    text-align: right;
}

.nvii-uppercase {
    text-transform: uppercase;
}

.nvii-nowrap {
    white-space: nowrap;
}

.nvii-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Clickable / hand cursor
 * ----------------------------------------------------------------------- */

.nvii-ui a[href],
.nvii-clickable,
.nvii-menu-item,
[data-nvii-item] {
    position: relative;
}

.nvii-ui a[href]::before,
.nvii-clickable::before,
.nvii-menu-item::before,
[data-nvii-item]::before {
    content: var(--nvii-pointer);
    position: absolute;
    z-index: 10;
    left: -1.45rem;
    top: 50%;
    width: 1.25rem;
    color: #ffffff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    text-shadow: -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000,
    1px 1px 0 #000000;
    transform: translateY(-50%) translateX(-0.2rem);
    transition: opacity 80ms linear, transform 80ms ease-out;
}

.nvii-ui a[href]:hover::before,
.nvii-ui a[href].is-selected::before,
.nvii-ui a[href]:focus-visible::before,
.nvii-clickable:hover::before,
.nvii-menu-item:hover::before,
[data-nvii-item]:hover::before,
.nvii-clickable.is-selected::before,
.nvii-menu-item.is-selected::before,
[data-nvii-item].is-selected::before,
.nvii-clickable:focus-visible::before,
.nvii-menu-item:focus-visible::before,
[data-nvii-item]:focus-visible::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.nvii-ui a[href]:focus-visible,
.nvii-clickable:focus-visible,
.nvii-menu-item:focus-visible,
[data-nvii-item]:focus-visible {
    outline: none;
}

/* --------------------------------------------------------------------------
 * Menu
 * ----------------------------------------------------------------------- */

.nvii-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nvii-menu-item {
    display: block;
    padding: 0;
    cursor: pointer;
    border: 0;
    background: transparent;
    color: var(--nvii-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.05;
    text-align: left;
    margin-bottom: .75%;
}

.nvii-menu-item + .nvii-menu-item {
    margin-top: 0.08rem;
}

.nvii-menu-item[aria-disabled='true'],
.nvii-menu-item:disabled {
    color: #747891;
    cursor: default;
}

.nvii-menu-item[aria-disabled='true']::before,
.nvii-menu-item:disabled::before {
    display: none;
}

/* --------------------------------------------------------------------------
 * Media object
 * ----------------------------------------------------------------------- */

.nvii-media {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}

.nvii-media-image {
    flex: 0 0 auto;
}

.nvii-media-body {
    flex: 1 1 auto;
    min-width: 0;
}

.nvii-avatar {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: .875;
    overflow: hidden;
    border: 2px solid #ffffff;
    box-shadow: 1px 1px 0 #000000;
    color: #10152b;
    font-size: 1.35rem;
    font-weight: 700;
    text-shadow: none;
}

.nvii-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
 * Progress / meters
 * ----------------------------------------------------------------------- */

.nvii-progress {
    position: relative;
    width: 100%;
    height: 0.34rem;
    overflow: hidden;
    background: #08091c;
    border: 1px solid #aeb1c1;
    box-shadow: inset 1px 1px 0 #000000;
}

.nvii-progress-bar {
    width: var(--nvii-progress, 50%);
    height: 100%;
    background: linear-gradient(
            90deg,
            #f7f7f7,
            #8f94a8
    );
}

.nvii-progress-cyan .nvii-progress-bar {
    background: linear-gradient(
            90deg,
            #86fbff,
            #3cbcd3
    );
}

.nvii-progress-yellow .nvii-progress-bar {
    background: linear-gradient(
            90deg,
            #fff9a2,
            #eacb4d
    );
}

.nvii-meter-row {
    display: grid;
    grid-template-columns: auto minmax(4rem, 1fr);
    align-items: center;
    gap: 0.5rem;
}

/* --------------------------------------------------------------------------
 * Badges / stats / separators
 * ----------------------------------------------------------------------- */

.nvii-badge {
    display: inline-block;
    padding: 0.08rem 0.35rem;
    background: #101245;
    border: 1px solid #aeb1c1;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.15);
    font-size: 0.75rem;
}

.nvii-stat {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.nvii-stat-label {
    min-width: 2.2rem;
    color: var(--nvii-cyan);
}

.nvii-stat-value {
    color: var(--nvii-text);
}

.nvii-divider {
    height: 1px;
    margin: 0.75rem 0;
    background: rgba(255, 255, 255, 0.25);
    border: 0;
}

/* --------------------------------------------------------------------------
 * Layout helpers
 * ----------------------------------------------------------------------- */

.nvii-stack {
    display: flex;
    flex-direction: column;
    gap: var(--nvii-gap);
}

.nvii-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nvii-gap);
}

.nvii-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nvii-gap);
}

.nvii-center {
    display: grid;
    place-items: center;
}

.nvii-w-full {
    width: 100%;
}

.nvii-h-full {
    height: 100%;
}

.nvii-flex {
    display: flex;
}

.nvii-block {
    display: block;
}

.nvii-inline-block {
    display: inline-block;
}

.nvii-hidden {
    display: none !important;
}

.nvii-relative {
    position: relative;
}

.nvii-gap-0 {
    gap: 0;
}

.nvii-gap-1 {
    gap: 0.25rem;
}

.nvii-gap-2 {
    gap: 0.5rem;
}

.nvii-gap-3 {
    gap: 0.75rem;
}

.nvii-gap-4 {
    gap: 1rem;
}

.nvii-gap-6 {
    gap: 1.5rem;
}

.nvii-p-0 {
    padding: 0;
}

.nvii-p-1 {
    padding: 0.25rem;
}

.nvii-p-2 {
    padding: 0.5rem;
}

.nvii-p-3 {
    padding: 0.75rem;
}

.nvii-p-4 {
    padding: 1rem;
}

.nvii-p-6 {
    padding: 1.5rem;
}

.nvii-m-0 {
    margin: 0;
}

.nvii-mt-1 {
    margin-top: 0.25rem;
}

.nvii-mt-2 {
    margin-top: 0.5rem;
}

.nvii-mt-3 {
    margin-top: 0.75rem;
}

.nvii-mt-4 {
    margin-top: 1rem;
}

.nvii-mb-1 {
    margin-bottom: 0.25rem;
}

.nvii-mb-2 {
    margin-bottom: 0.5rem;
}

.nvii-mb-3 {
    margin-bottom: 0.75rem;
}

.nvii-mb-4 {
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
 * 12-column responsive grid
 * ----------------------------------------------------------------------- */

.nvii-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--nvii-gap);
}

.nvii-col-1 {
    grid-column: span 1;
}

.nvii-col-2 {
    grid-column: span 2;
}

.nvii-col-3 {
    grid-column: span 3;
}

.nvii-col-4 {
    grid-column: span 4;
}

.nvii-col-5 {
    grid-column: span 5;
}

.nvii-col-6 {
    grid-column: span 6;
}

.nvii-col-7 {
    grid-column: span 7;
}

.nvii-col-8 {
    grid-column: span 8;
}

.nvii-col-9 {
    grid-column: span 9;
}

.nvii-col-10 {
    grid-column: span 10;
}

.nvii-col-11 {
    grid-column: span 11;
}

.nvii-col-12 {
    grid-column: span 12;
}

@media (min-width: 36rem) {
    .nvii-col-sm-1 {
        grid-column: span 1;
    }

    .nvii-col-sm-2 {
        grid-column: span 2;
    }

    .nvii-col-sm-3 {
        grid-column: span 3;
    }

    .nvii-col-sm-4 {
        grid-column: span 4;
    }

    .nvii-col-sm-5 {
        grid-column: span 5;
    }

    .nvii-col-sm-6 {
        grid-column: span 6;
    }

    .nvii-col-sm-7 {
        grid-column: span 7;
    }

    .nvii-col-sm-8 {
        grid-column: span 8;
    }

    .nvii-col-sm-9 {
        grid-column: span 9;
    }

    .nvii-col-sm-10 {
        grid-column: span 10;
    }

    .nvii-col-sm-11 {
        grid-column: span 11;
    }

    .nvii-col-sm-12 {
        grid-column: span 12;
    }
}

@media (min-width: 48rem) {
    .nvii-col-md-1 {
        grid-column: span 1;
    }

    .nvii-col-md-2 {
        grid-column: span 2;
    }

    .nvii-col-md-3 {
        grid-column: span 3;
    }

    .nvii-col-md-4 {
        grid-column: span 4;
    }

    .nvii-col-md-5 {
        grid-column: span 5;
    }

    .nvii-col-md-6 {
        grid-column: span 6;
    }

    .nvii-col-md-7 {
        grid-column: span 7;
    }

    .nvii-col-md-8 {
        grid-column: span 8;
    }

    .nvii-col-md-9 {
        grid-column: span 9;
    }

    .nvii-col-md-10 {
        grid-column: span 10;
    }

    .nvii-col-md-11 {
        grid-column: span 11;
    }

    .nvii-col-md-12 {
        grid-column: span 12;
    }
}

@media (min-width: 64rem) {
    .nvii-col-lg-1 {
        grid-column: span 1;
    }

    .nvii-col-lg-2 {
        grid-column: span 2;
    }

    .nvii-col-lg-3 {
        grid-column: span 3;
    }

    .nvii-col-lg-4 {
        grid-column: span 4;
    }

    .nvii-col-lg-5 {
        grid-column: span 5;
    }

    .nvii-col-lg-6 {
        grid-column: span 6;
    }

    .nvii-col-lg-7 {
        grid-column: span 7;
    }

    .nvii-col-lg-8 {
        grid-column: span 8;
    }

    .nvii-col-lg-9 {
        grid-column: span 9;
    }

    .nvii-col-lg-10 {
        grid-column: span 10;
    }

    .nvii-col-lg-11 {
        grid-column: span 11;
    }

    .nvii-col-lg-12 {
        grid-column: span 12;
    }
}

/* --------------------------------------------------------------------------
 * FFVII-style game layout
 * ----------------------------------------------------------------------- */

.nvii-game-screen {
    position: relative;
    width: min(960px, 96vw);
    aspect-ratio: 4 / 3;
    margin: 0 auto;
    background: #000000;
    overflow: hidden;
}

/*
 * PARTY
 *
 * Reference:
 * x: ~6.3%
 * y: ~10%
 * right edge: ~71.5%
 * bottom edge: ~88%
 */
.nvii-game-party {
    position: absolute;
    z-index: 1;
    left: 6.3%;
    top: 10%;
    width: 70%;
    height: 78%;
    padding: 3.8% 4.3%;
}

/*
 * MENU
 *
 * Notice that this sits directly over the right edge of the party window.
 */
.nvii-game-menu {
    position: absolute;
    z-index: 4;
    left: 71.5%;
    top: 5.5%;
    width: 22%;
    height: 57.8%;
    padding: 3.5% 3.2% 2.5% 4%;
}

/*
 * TIME / GIL
 *
 * The reference has an intentional vertical gap between this and the
 * menu above it.
 */
.nvii-game-info {
    position: absolute;
    z-index: 3;
    left: 71%;
    bottom: 15.5%;
    width: 22.5%;
    padding: 1%;
}

/*
 * LOCATION
 *
 * This touches/overlaps the bottom of the Time/Gil window and overlaps
 * the bottom-right portion of the party window.
 */
.nvii-game-location {
    position: absolute;
    z-index: 5;
    left: 50.9%;
    top: 85%;
    width: 42.5%;
    height: 7%;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    padding: .25% 2%;
}

/* --------------------------------------------------------------------------
 * Party layout
 * ----------------------------------------------------------------------- */

.nvii-party-list {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    height: 100%;
}

.nvii-party-row {
    display: grid;
    grid-template-columns: 17.5% 1fr;
    gap: 10%;
    align-items: flex-start;
    min-width: 0;
}

.nvii-party-content {
    min-width: 0;
}

.nvii-party-name {
    margin-bottom: 0.12rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

.nvii-party-details {
    display: grid;
    grid-template-columns: 46% 43%;
    gap: 5%;
    align-items: start;
}

.nvii-party-stats {
    display: grid;
    grid-template-columns: 1rem 1fr;
    align-items: center;
    column-gap: 0.25rem;
    row-gap: 0.02rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

.nvii-party-stats .label {
    color: var(--nvii-cyan);
    font-family: var(--nvii-font-family-mono);
    font-size: 1rem;
    font-weight: 500;
}

.nvii-party-stats .stat {
    white-space: nowrap;
}

.nvii-party-meta {
    display: grid;
    grid-template-columns: 1fr;
    align-self: center;
    font-size: 0.54rem;
    line-height: 1;
}

.nvii-party-meta .nvii-progress {
    margin: 0.06rem 0 0.1rem;
}

/* --------------------------------------------------------------------------
 * Time / Gil
 * ----------------------------------------------------------------------- */

.nvii-kv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

.nvii-kv + .nvii-kv {
    margin-top: 0.15rem;
}

.nvii-clock .value,
.nvii-gil .value {
    font-family: var(--nvii-font-family-mono);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: -1px;
}

/* --------------------------------------------------------------------------
 * Mobile
 * ----------------------------------------------------------------------- */

@media (max-width: 42rem) {
    .nvii-game-screen {
        display: flex;
        flex-direction: column;
        width: min(100%, 30rem);
        aspect-ratio: auto;
        min-height: 0;
        padding: 0.75rem;
        overflow: visible;
    }

    .nvii-game-party,
    .nvii-game-menu,
    .nvii-game-info,
    .nvii-game-location {
        position: static;
        z-index: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0 0 0.75rem;
        padding: 1rem;
    }

    .nvii-game-location {
        margin-bottom: 0;
    }

    .nvii-game-menu {
        padding-left: 2.4rem;
    }

    .nvii-menu-item {
        font-size: 1rem;
        line-height: 1.25;
    }

    .nvii-party-list {
        display: grid;
        gap: 1.25rem;
        height: auto;
    }

    .nvii-party-row {
        grid-template-columns: 4rem 1fr;
        gap: 1rem;
    }

    .nvii-party-name {
        font-size: 1rem;
    }

    .nvii-party-details {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .nvii-party-stats {
        font-size: 0.85rem;
    }

    .nvii-party-stats .label {
        font-size: 0.7rem;
    }

    .nvii-party-meta {
        font-size: 0.75rem;
    }

    .nvii-game-info,
    .nvii-game-location {
        font-size: 1rem;
    }

    .nvii-kv {
        font-size: 1rem;
    }

    .nvii-clock .value,
    .nvii-gil .value {
        font-size: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nvii-clickable::before,
    .nvii-menu-item::before,
    [data-nvii-item]::before {
        transition: none;
    }
}