/* ============================================================
   FAK GPU STRESS TEST — STYLE.CSS
   Swiss / International Typographic Style
   Brutalist · Sharp · No rounded corners · No shadows · No gradients
   Palette: #000000 bg · #FFFFFF text · #FF0000 accent
   ============================================================ */

/* ── Reset & Root ─────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --black:       #000000;
    --white:       #FFFFFF;
    --red:         #FF0000;
    --red-dim:     #AA0000;
    --grey-100:    #111111;
    --grey-200:    #1A1A1A;
    --grey-300:    #2A2A2A;
    --grey-400:    #444444;
    --grey-500:    #666666;
    --grey-600:    #888888;
    --grey-700:    #AAAAAA;

    --font:        'Helvetica Neue', 'Helvetica', 'Inter', 'Roboto', Arial, sans-serif;
    --mono:        'Helvetica Neue', 'Helvetica', 'Inter', monospace;

    --border-width: 1px;
    --border:       1px solid var(--grey-300);
    --border-red:   1px solid var(--red);
    --border-white: 1px solid var(--white);
}

html {
    font-size: 14px;
    scroll-behavior: smooth;
}

body {
    background: var(--black);
    color: var(--white);
    font-family: var(--font);
    font-weight: 400;
    line-height: 1.4;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--red);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Top Navigation ───────────────────────────────────────── */
.top-nav {
    width: 100%;
    background: var(--black);
    border-bottom: var(--border-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    height: 52px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--white);
}

.brand-logo img {
    width: 28px;
    height: 28px;
    display: block;
    /* sharp — no border-radius */
}

.brand-name {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white);
}

.brand-accent {
    color: var(--red);
}

.nav-links {
    display: flex;
    gap: 0;
    align-items: center;
}

.nav-links a {
    color: var(--grey-600);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0 18px;
    height: 52px;
    display: flex;
    align-items: center;
    border-left: var(--border);
    transition: color 0.15s, background 0.15s;
}

.nav-links a:hover {
    color: var(--white);
    background: var(--grey-100);
    text-decoration: none;
}

/* ── Hero Header ──────────────────────────────────────────── */
.hero {
    width: 100%;
    max-width: 1260px;
    padding: 48px 32px 32px;
    border-bottom: var(--border);
    margin-bottom: 0;
}

.hero-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 14px;
}

h1 {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.0;
    color: var(--white);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.hero-sub {
    color: var(--grey-500);
}

.subtitle {
    font-size: 13px;
    color: var(--grey-600);
    font-weight: 400;
    line-height: 1.7;
    max-width: 560px;
}

#preset-banner {
    display: none;
    background: transparent;
    border-left: 3px solid var(--red);
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--red);
    margin-top: 18px;
}

#preset-banner strong {
    color: var(--white);
}

/* ── Main Layout ──────────────────────────────────────────── */
.main-container {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 0;
    width: 100%;
    max-width: 1260px;
    border-bottom: var(--border);
}

/* ── Canvas ───────────────────────────────────────────────── */
.canvas-wrap {
    position: relative;
    background: var(--black);
    border-right: var(--border);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

#glcanvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
}

#glcanvas:active {
    cursor: grabbing;
}

/* Brutalist corner marks */
.canvas-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.canvas-corner--tl {
    top: 0;
    left: 0;
    border-top: 2px solid var(--red);
    border-left: 2px solid var(--red);
}

.canvas-corner--tr {
    top: 0;
    right: 0;
    border-top: 2px solid var(--red);
    border-right: 2px solid var(--red);
}

.canvas-corner--bl {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid var(--red);
    border-left: 2px solid var(--red);
}

.canvas-corner--br {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid var(--red);
    border-right: 2px solid var(--red);
}

/* ── Telemetry Panel ──────────────────────────────────────── */
.telemetry-panel {
    display: flex;
    flex-direction: column;
    background: var(--black);
}

.tele-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: var(--border-white);
    background: var(--grey-100);
}

.tele-title {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--white);
}

.tele-indicator {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--red);
    animation: blink 1.2s step-start infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}

.tele-group {
    border-bottom: var(--border);
    padding: 14px 16px;
}

.tele-group-label {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--grey-500);
    margin-bottom: 10px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.stat-row:last-child {
    margin-bottom: 0;
}

.stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey-500);
    flex-shrink: 0;
}

/* ── Stat Values (all font-variant tabular for alignment) ─── */
.stat-value {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--white);
    text-align: right;
}

.stat-fps {
    font-size: 26px;
    color: var(--white);
    line-height: 1;
}

.stat-low {
    font-size: 18px;
    color: var(--red);
    line-height: 1;
}

.stat-rays {
    font-size: 15px;
    color: var(--grey-700);
}

.stat-small {
    font-size: 12px;
    color: var(--grey-600);
}

.stat-gpu {
    font-size: 10px;
    color: var(--grey-600);
    text-align: right;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Score Group ──────────────────────────────────────────── */
.tele-score {
    border-bottom: none;
    border-top: var(--border-red);
    background: var(--grey-100);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-score-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 4px;
}

.stat-score {
    font-size: 36px;
    font-weight: 900;
    color: var(--red);
    letter-spacing: -0.02em;
    line-height: 1;
    text-align: center;
}

/* Matrix scramble animation class (toggled by JS) */
.scrambling {
    animation: none; /* JS controls letter-by-letter, no CSS needed */
}

/* ── Controls Section ─────────────────────────────────────── */
.controls-section {
    width: 100%;
    max-width: 1260px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: var(--border);
}

.mode-label {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--grey-500);
    padding: 16px 32px 0;
    margin-bottom: 8px;
}

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0 32px 0;
    border-bottom: var(--border);
    width: 100%;
}

/* ── Mode Buttons ─────────────────────────────────────────── */
.btn-mode {
    background: var(--black);
    color: var(--grey-600);
    border: none;
    border-right: var(--border);
    padding: 0 24px;
    height: 64px;
    font-family: var(--font);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    transition: background 0.1s, color 0.1s;
    flex: 1;
    min-width: 120px;
    position: relative;
    outline: none;
}

.btn-mode:first-child {
    border-left: none;
    padding-left: 0;
    padding-left: 32px;
}

.btn-mode:last-child {
    border-right: none;
}

.btn-level {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--grey-500);
    transition: color 0.1s;
}

.btn-name {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: inherit;
    transition: color 0.1s;
}

.btn-mode:hover {
    background: var(--grey-100);
    color: var(--white);
}

.btn-mode:hover .btn-level {
    color: var(--grey-600);
}

.btn-mode.active {
    background: var(--white);
    color: var(--black);
}

.btn-mode.active .btn-level {
    color: var(--grey-400);
}

/* Danger tier */
.btn-mode.btn-danger {
    color: var(--red-dim);
}

.btn-mode.btn-danger .btn-level {
    color: var(--red-dim);
}

.btn-mode.btn-danger:hover {
    background: var(--grey-100);
    color: var(--red);
}

.btn-mode.btn-danger.active {
    background: var(--red);
    color: var(--white);
}

.btn-mode.btn-danger.active .btn-level {
    color: rgba(255,255,255,0.6);
}

/* ARMAGEDDON tier */
.btn-armageddon {
    color: var(--red-dim);
}

.btn-armageddon .btn-level {
    color: var(--red-dim);
}

.btn-armageddon:hover {
    background: #1A0000;
    color: var(--red);
}

.btn-armageddon.active {
    background: var(--red);
    color: var(--black);
    animation: armageddon-pulse 0.8s step-start infinite;
}

.btn-armageddon.active .btn-level {
    color: rgba(0,0,0,0.5);
}

@keyframes armageddon-pulse {
    0%, 100% { background: var(--red); }
    50%       { background: #CC0000; }
}

/* BIG RIP tier */
.btn-bigrip {
    color: #6600AA;
}

.btn-bigrip .btn-level {
    color: #6600AA;
}

.btn-bigrip:hover {
    background: #0D0018;
    color: #BB44FF;
}

.btn-bigrip.active {
    background: #9900FF;
    color: var(--white);
    animation: bigrip-pulse 0.5s step-start infinite;
}

.btn-bigrip.active .btn-level {
    color: rgba(255,255,255,0.5);
}

@keyframes bigrip-pulse {
    0%   { background: #9900FF; }
    33%  { background: #CC00FF; }
    66%  { background: #6600AA; }
    100% { background: #9900FF; }
}

/* ── Controls Row (share button row) ──────────────────────── */
.controls-row {
    display: flex;
    gap: 0;
    align-items: center;
    padding: 16px 32px;
    width: 100%;
    border-bottom: var(--border);
}

.btn-share {
    background: var(--black);
    color: var(--white);
    border: var(--border-white);
    padding: 10px 20px;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.1s, color 0.1s;
    outline: none;
}

.btn-share:hover {
    background: var(--white);
    color: var(--black);
}

.btn-share svg {
    flex-shrink: 0;
}

/* ── Warning Message ──────────────────────────────────────── */
#warning-msg {
    width: 100%;
    padding: 10px 32px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red);
    min-height: 36px;
    display: flex;
    align-items: center;
    border-left: 3px solid transparent;
    transition: border-color 0.2s;
}

#warning-msg:not(:empty) {
    border-left-color: var(--red);
    background: #0D0000;
}

/* ── Share Modal ──────────────────────────────────────────── */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 200;
    align-items: center;
    justify-content: center;
}

.modal-overlay.open {
    display: flex;
}

.modal {
    background: var(--grey-100);
    border: var(--border-white);
    padding: 0;
    width: 90%;
    max-width: 500px;
    /* No rounded corners */
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: var(--border);
    background: var(--black);
}

.modal-header h2 {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--white);
}

.modal-close-x {
    background: none;
    border: none;
    color: var(--grey-500);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    font-family: var(--font);
    transition: color 0.1s;
}

.modal-close-x:hover {
    color: var(--white);
}

.modal-desc {
    font-size: 11px;
    color: var(--grey-600);
    letter-spacing: 0.06em;
    padding: 16px 24px 12px;
    text-transform: uppercase;
    font-weight: 700;
}

.modal-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0 24px 16px;
}

.preset-chip {
    padding: 8px 14px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    border: var(--border);
    background: var(--black);
    color: var(--grey-500);
    margin: 4px 4px 0 0;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    user-select: none;
}

.preset-chip:hover {
    border-color: var(--white);
    color: var(--white);
    background: var(--grey-200);
}

.preset-chip.selected {
    border-color: var(--red);
    color: var(--red);
    background: #1A0000;
}

.link-box {
    display: flex;
    gap: 0;
    margin: 0 24px 16px;
    border: var(--border-white);
}

.link-input {
    flex: 1;
    background: var(--black);
    border: none;
    color: var(--grey-700);
    padding: 10px 14px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.04em;
    outline: none;
}

.btn-copy {
    background: var(--white);
    color: var(--black);
    border: none;
    padding: 10px 20px;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.1s, color 0.1s;
}

.btn-copy:hover {
    background: var(--red);
    color: var(--white);
}

.btn-modal-close {
    display: block;
    width: calc(100% - 48px);
    margin: 0 24px 24px;
    background: transparent;
    border: var(--border);
    color: var(--grey-500);
    padding: 10px;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.1s, color 0.1s, background 0.1s;
}

.btn-modal-close:hover {
    border-color: var(--white);
    color: var(--white);
    background: var(--grey-200);
}

/* ── Footer ───────────────────────────────────────────────── */
footer {
    margin-top: auto;
    padding: 20px 32px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey-500);
    border-top: var(--border);
    width: 100%;
    max-width: 1260px;
}

footer a {
    color: var(--grey-500);
    text-decoration: none;
}

footer a:hover {
    color: var(--white);
    text-decoration: none;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
    .main-container {
        grid-template-columns: 1fr;
    }

    .canvas-wrap {
        border-right: none;
        border-bottom: var(--border);
        aspect-ratio: 16 / 9;
    }

    .telemetry-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: none;
    }

    .tele-header {
        grid-column: 1 / -1;
    }

    .tele-score {
        grid-column: 1 / -1;
    }

    .stat-fps {
        font-size: 20px;
    }

    .stat-score {
        font-size: 28px;
    }
}

@media (max-width: 640px) {
    .top-nav {
        padding: 0 16px;
    }

    .hero {
        padding: 28px 16px 24px;
    }

    h1 {
        font-size: 28px;
    }

    .controls {
        padding: 0 0 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        border-bottom: none;
    }

    .btn-mode {
        min-width: 100px;
        padding: 0 16px;
        flex: 0 0 auto;
    }

    .btn-mode:first-child {
        padding-left: 16px;
    }

    .mode-label,
    .controls-row,
    #warning-msg {
        padding-left: 16px;
        padding-right: 16px;
    }

    .telemetry-panel {
        display: flex;
        flex-direction: column;
    }

    footer {
        padding: 16px;
    }

    .modal {
        width: 95%;
    }
}