/* --------------------------------------------------------------------------
   0. Fonts (self-hosted — no third-party request at boot)
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/chakra-petch-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/chakra-petch-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Chakra Petch'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/chakra-petch-latin-ext-500-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chakra Petch'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/chakra-petch-latin-500-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/chakra-petch-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/chakra-petch-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Chakra Petch'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/chakra-petch-latin-ext-600-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chakra Petch'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/chakra-petch-latin-600-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/chakra-petch-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/chakra-petch-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Chakra Petch'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/chakra-petch-latin-ext-700-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chakra Petch'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/chakra-petch-latin-700-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/exo-2-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/exo-2-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/exo-2-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/exo-2-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/exo-2-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/exo-2-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/exo-2-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/exo-2-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/exo-2-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/exo-2-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Exo 2'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/exo-2-latin-700-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Exo 2'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/exo-2-latin-800-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   NEXTBALL — "ARENA" static pages (about.html, updates.html)
   Shared tokens, backdrop, nav and components. Page-specific rules live in
   about.css / updates.css and load after this file.
   ========================================================================== */
:root {
    --bg-0: #04050D; --bg-1: #080B1C; --bg-2: #0E1230; --bg-3: #161C45; --bg-4: #20285E;
    --line: rgba(122, 140, 255, .14); --line-strong: rgba(140, 160, 255, .34);
    --fg-0: #FFFFFF; --fg-1: #D8DDFF; --fg-2: #8E97C9; --fg-3: #5B6497;
    --orange: #FF7A1A; --orange-hi: #FFA24D; --orange-lo: #C24F00; --orange-ink: #1A0900;
    --cyan: #22E5FF; --cyan-hi: #8FF3FF; --cyan-ink: #00212B;
    --magenta: #FF2D95; --lime: #B6FF3B; --lime-ink: #0E2000; --gold: #FFC83D; --gold-hi: #FFE28A; --gold-ink: #2A1A00; --violet: #8B5CFF;
    --red: #FF4655; --blue: #3D8BFF; --ok: #3DFF9B;
    --f-display: 'Chakra Petch', 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --f-body: 'Exo 2', 'Barlow', system-ui, sans-serif;
    --skew: -10deg; --unskew: 10deg; --chamfer: 16px;
    --t-fast: 140ms cubic-bezier(.2, .8, .2, 1); --t: 220ms cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg-0); scroll-behavior: smooth; }
body {
    min-height: 100vh; color: var(--fg-0); font: 500 15.5px/1.6 var(--f-body);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    background: var(--bg-0);
}
::selection { background: var(--orange); color: var(--orange-ink); }
a { color: var(--cyan); }

/* Backdrop */
.ar-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg-0); }
.ar-bg-art { position: absolute; inset: -4%; background: url('art/bg-arena.jpg') center 30% / cover no-repeat; opacity: .8; filter: saturate(1.15); animation: ar-bg-drift 40s ease-in-out infinite alternate; }
@keyframes ar-bg-drift { from { transform: scale(1); } to { transform: scale(1.06) translate3d(-1%, -1%, 0); } }
.ar-bg-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 5, 13, .6) 0%, rgba(4, 5, 13, .84) 30%, rgba(4, 5, 13, .96) 60%, #04050D 100%), radial-gradient(70% 55% at 50% 0%, rgba(255, 122, 26, .16), transparent 70%); }
.ar-bg-grid {
    position: absolute; left: -10%; right: -10%; bottom: -2%; height: 40%; opacity: .35;
    background-image: linear-gradient(rgba(34, 229, 255, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 229, 255, .10) 1px, transparent 1px);
    background-size: 100% 44px, 88px 100%; transform: perspective(700px) rotateX(64deg); transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%); mask-image: linear-gradient(180deg, transparent, #000 60%);
}
.ar-bg .orb { display: none; }

/* Layout */
.ar-page { position: relative; z-index: 1; width: min(100% - 2 * clamp(16px, 3vw, 48px), 1080px); margin: 0 auto; padding: 0 0 80px; }

/* Nav */
.ar-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; margin: 0 calc(-1 * clamp(16px, 3vw, 48px)); padding: 0 clamp(16px, 3vw, 48px); background: linear-gradient(180deg, rgba(4, 5, 13, .88), rgba(4, 5, 13, .6)); border-bottom: 1px solid rgba(140, 160, 255, .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ar-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--orange), transparent 30%, transparent 70%, var(--cyan)); opacity: .7; }
.ar-logo { display: inline-flex; align-items: center; gap: 10px; font: italic 800 26px/1 var(--f-display); letter-spacing: -.01em; color: var(--fg-0); text-decoration: none; text-transform: uppercase; }
.ar-logo span { color: var(--orange); }
.ar-logo svg { width: 30px; height: 30px; color: var(--orange); filter: drop-shadow(0 0 8px rgba(255, 122, 26, .7)); animation: ar-spin-slow 14s linear infinite; }
@keyframes ar-spin-slow { to { transform: rotate(360deg); } }

/* Buttons */
.ar-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 4px;
    font: italic 700 15px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; cursor: pointer; white-space: nowrap;
    background: linear-gradient(180deg, var(--bg-4), var(--bg-3)); color: var(--fg-0); border: 1px solid var(--line-strong);
    box-shadow: 0 3px 0 rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .10); transform: skewX(var(--skew));
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.ar-btn > * { transform: skewX(var(--unskew)); display: inline-block; }
.ar-btn:hover { background: linear-gradient(180deg, #2A3475, var(--bg-4)); border-color: var(--cyan); transform: skewX(var(--skew)) translateY(-1px); box-shadow: 0 4px 0 rgba(0, 0, 0, .55), 0 0 18px rgba(34, 229, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .14); }
.ar-btn--primary { background: linear-gradient(180deg, var(--orange-hi) 0%, var(--orange) 55%, var(--orange-lo) 100%); color: var(--orange-ink); border-color: var(--orange-hi); box-shadow: 0 3px 0 #7A2E00, 0 0 22px rgba(255, 122, 26, .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
.ar-btn--primary:hover { background: linear-gradient(180deg, #FFB86B 0%, var(--orange-hi) 50%, var(--orange) 100%); border-color: #FFD9B0; box-shadow: 0 4px 0 #7A2E00, 0 0 30px rgba(255, 122, 26, .55), inset 0 1px 0 rgba(255, 255, 255, .4); }
.ar-btn--lg { height: 58px; padding: 0 34px; font-size: 21px; }

/* Panels */
.ar-panel {
    position: relative; isolation: isolate; padding: 26px 28px; margin: 22px 0;
    background: linear-gradient(180deg, rgba(22, 28, 69, .86), rgba(10, 13, 32, .96));
    clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
    animation: ar-rise 420ms cubic-bezier(.2, .8, .2, 1) both;
}
.ar-panel::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(160deg, rgba(140, 160, 255, .5), rgba(140, 160, 255, .08) 40%, rgba(255, 122, 26, .3));
    clip-path: polygon(evenodd, var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer),
                       var(--chamfer) 0, calc(var(--chamfer) + .4px) 1px, 1px calc(var(--chamfer) + .4px), 1px calc(100% - 1px), calc(100% - var(--chamfer) - .4px) calc(100% - 1px), calc(100% - 1px) calc(100% - var(--chamfer) - .4px), calc(100% - 1px) 1px, calc(var(--chamfer) + .4px) 1px);
}
@keyframes ar-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Section heading plate */
.ar-h {
    display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 22px 0 14px; margin: 0 0 16px;
    background: linear-gradient(90deg, rgba(255, 122, 26, .22), rgba(4, 5, 13, .6)); border: 1px solid rgba(255, 122, 26, .5); border-left: 4px solid var(--orange); border-radius: 2px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.ar-h h2 { font: italic 800 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: 0; color: var(--fg-0); }
.ar-h .ar-h-icon { font-size: 16px; line-height: 1; }
.ar-kicker { font: 800 11px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }

/* Text */
.ar-prose p { color: var(--fg-1); margin-bottom: 12px; max-width: 78ch; }
.ar-prose p:last-child { margin-bottom: 0; }
.ar-prose strong { color: var(--fg-0); }
.highlight { color: var(--orange); font-weight: 700; }
.highlight-blue { color: var(--cyan); font-weight: 700; }
.highlight-green { color: var(--ok); font-weight: 700; }
.highlight-red { color: var(--red); font-weight: 700; }

/* Tags */
.ar-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 2px; font: italic 800 11px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; background: var(--orange); color: var(--orange-ink); transform: skewX(var(--skew)); box-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.ar-tag > * { transform: skewX(var(--unskew)); }

/* Keycaps */
.key { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 9px; background: linear-gradient(180deg, var(--bg-4), var(--bg-3)); border: 1px solid var(--line-strong); border-bottom-width: 3px; border-radius: 3px; font: italic 800 13px var(--f-display); color: var(--fg-0); }
.key.wide { min-width: 64px; }

/* Footer */
.ar-footer { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--fg-2); font-size: 13px; text-align: center; }
.ar-footer a { color: var(--orange); font-weight: 700; text-decoration: none; }
.ar-footer .version { display: inline-block; padding: 3px 8px; background: rgba(14, 18, 48, .8); border: 1px solid rgba(34, 229, 255, .45); color: var(--cyan); font: 800 10px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 700px) { .ar-nav { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; } .ar-panel { padding: 18px 16px; } }