/* ============================================================
   KEVINHORTON.COM // HORTON INDUSTRIES // H.U.O.S.
   Complete terminal stylesheet
============================================================ */

:root {
    --bright: #8cff66;
    --text: #74d957;
    --dim: #4f983e;
    --dark: #050805;
    --deep: #020402;
    --screen: #001000;
    --border: rgba(140, 255, 102, .72);
    --border-dim: rgba(140, 255, 102, .28);
    --border-faint: rgba(140, 255, 102, .14);
    --glow: rgba(69, 255, 50, .45);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
html { background: var(--deep); }
body {
    margin: 0;
    padding: 16px;
    overflow: hidden;
    background: radial-gradient(circle at center, #061006 0%, var(--deep) 72%);
    color: var(--text);
    font-family: "IBM Plex Mono", "Roboto Mono", Consolas, "Courier New", monospace;
    text-shadow: 0 0 5px rgba(69,255,50,.52);
}
button, a { font: inherit; }
button { color: inherit; }
a { color: var(--bright); }

.terminal-frame {
    width: 100%;
    height: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid rgba(140,255,102,.18);
    border-radius: 18px;
    background: linear-gradient(145deg, #0b0d0b, #020302 65%);
    box-shadow: 0 20px 60px rgba(0,0,0,.72), inset 0 0 20px rgba(255,255,255,.015);
}

.terminal {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border-dim);
    border-radius: 11px;
    background:
        radial-gradient(ellipse at center, rgba(0,29,0,.96) 0%, rgba(0,11,0,.985) 58%, rgba(0,3,0,.998) 100%);
    box-shadow:
        inset 0 0 70px rgba(0,0,0,.92),
        inset 0 0 22px rgba(69,255,50,.055),
        0 0 12px rgba(69,255,50,.12);
}

.terminal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 150;
    pointer-events: none;
    opacity: .22;
    background: repeating-linear-gradient(0deg, rgba(140,255,102,.045) 0 1px, transparent 1px 3px);
    mix-blend-mode: screen;
}
.terminal::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 151;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 85px rgba(0,0,0,.78);
}

/* CRT POWER ON */
.power-overlay {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}
.power-line {
    width: 0;
    height: 2px;
    opacity: 0;
    background: #c8ffb3;
    box-shadow: 0 0 10px #8cff66, 0 0 26px rgba(140,255,102,.95);
}
.power-overlay.powering-on .power-line {
    animation: crtLine .42s ease-out forwards;
}
.power-overlay.power-expanding .power-line {
    width: 96%;
    opacity: 1;
    animation: crtExpand .48s cubic-bezier(.18,.8,.22,1) forwards;
}
.power-overlay.power-fade {
    animation: powerFade .18s linear forwards;
}
.power-overlay.power-overlay-hidden { display: none; }
@keyframes crtLine {
    0% { width: 0; opacity: 0; }
    20% { opacity: 1; }
    100% { width: 96%; opacity: 1; }
}
@keyframes crtExpand {
    0% { height: 2px; filter: brightness(2.4); }
    55% { height: 76%; filter: brightness(1.35); }
    100% { height: 100%; filter: brightness(1); }
}
@keyframes powerFade { to { opacity: 0; } }

/* H.U.O.S. SPLASH */
.his-intro {
    position: absolute;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 2.5vw, 28px);
    background: #000900;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
}
.his-intro-active { opacity: 1; visibility: visible; }
.his-intro-hidden { opacity: 0; visibility: hidden; }
.his-intro-exit { animation: introFade .26s linear forwards; }
.his-intro-content { position: relative; z-index: 3; width: min(1200px, 100%); }
.his-intro-art-wrap { opacity: 0; transform: scaleX(.18) scaleY(.03); filter: blur(7px) brightness(2.8); }
.his-intro-art {
    display: block;
    width: min(1120px, 100%);
    max-height: calc(100vh - 70px);
    object-fit: contain;
    margin: 0 auto;
    border-radius: 18px;
    filter: saturate(.85) contrast(1.03);
    box-shadow: 0 0 24px rgba(140,255,102,.18);
}
.his-intro-active .his-intro-art-wrap { animation: introResolve .62s cubic-bezier(.2,.78,.18,1) .08s forwards; }

.huos-mobile-splash {
    display: none;
}

.his-intro-noise {
    position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .13;
    background: repeating-linear-gradient(0deg, rgba(140,255,102,.05) 0 1px, transparent 1px 3px);
    animation: noiseJitter .12s steps(2) infinite;
}
.his-intro-scan {
    position: absolute; z-index: 5; left: 0; right: 0; top: -15%; height: 12%; opacity: 0;
    background: linear-gradient(to bottom, transparent, rgba(140,255,102,.14), transparent);
}
.his-intro-active .his-intro-scan { animation: scanPass 1.3s linear 1.45s forwards; }
.his-glitch-band { position: absolute; z-index: 9; left: 0; width: 100%; opacity: 0; background: rgba(140,255,102,.18); }
.his-glitch-band-a { top: 32%; height: 4px; }
.his-glitch-band-b { top: 68%; height: 7px; }
.his-intro-glitch .his-intro-content { animation: contentGlitch .22s steps(2) both; }
.his-intro-glitch .his-glitch-band-a { animation: bandA .22s steps(3) both; }
.his-intro-glitch .his-glitch-band-b { animation: bandB .22s steps(3) both; }
@keyframes introResolve {
    0% { opacity: 0; transform: scaleX(.18) scaleY(.025); filter: blur(8px) brightness(3.4); }
    35% { opacity: 1; transform: scaleX(1.08) scaleY(.05); filter: blur(3px) brightness(2); }
    64% { transform: scale(1.018,1.06); filter: blur(1px) brightness(1.35); }
    100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
}
@keyframes scanPass { 0% { top:-15%; opacity:0; } 10%{opacity:.6} 90%{opacity:.3} 100%{top:105%;opacity:0} }
@keyframes noiseJitter { 0%{transform:translateY(0)} 50%{transform:translateY(1px)} 100%{transform:translateY(-1px)} }
@keyframes introFade { to { opacity: 0; } }
@keyframes contentGlitch {
    0%{transform:translate(0,0);filter:none} 20%{transform:translate(-9px,1px) skewX(-1deg);filter:brightness(1.7)}
    42%{transform:translate(11px,-1px) skewX(1deg)} 62%{transform:translate(-3px,0);opacity:.56}
    82%{transform:translate(5px,1px);opacity:1} 100%{transform:translate(0,0);filter:none}
}
@keyframes bandA { 0%{opacity:0;transform:translateX(-12%)} 30%{opacity:.9;transform:translateX(8%)} 100%{opacity:0;transform:translateX(0)} }
@keyframes bandB { 0%{opacity:0;transform:translateX(16%)} 35%{opacity:.7;transform:translateX(-10%)} 100%{opacity:0;transform:translateX(0)} }

/* TERMINAL APPLICATION */
.terminal-interface {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: clamp(16px, 2vw, 28px);
    opacity: 1;
}
.interface-hidden { visibility: hidden; opacity: 0; }
.interface-ready { visibility: visible; opacity: 1; animation: interfaceBloom .22s ease-out both; }
@keyframes interfaceBloom { from{opacity:0;filter:brightness(2) blur(1px)} to{opacity:1;filter:none} }
.terminal-header { flex: 0 0 auto; }
.terminal-header-top { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.terminal-identity p, .boot-area p { margin: 0; }
.system-name { color:var(--bright); font-weight:700; letter-spacing:.12em; font-size:clamp(.8rem,1.5vw,1rem); }
.terminal-meta { color:var(--dim); font-size:clamp(.67rem,1.2vw,.82rem); letter-spacing:.035em; }
.terminal-identity .terminal-meta { margin-top: 3px; }
.sound-toggle {
    padding:5px 8px; border:1px solid var(--border-dim); border-radius:4px; background:rgba(0,16,0,.6);
    color:var(--dim); cursor:pointer; font-size:.7rem; letter-spacing:.04em;
}
.sound-toggle:hover, .sound-toggle:focus-visible { color:var(--bright); border-color:var(--border); outline:none; }
.sound-toggle-hidden { visibility:hidden; }
.boot-area { margin-top: clamp(12px,2vh,20px); }
#start-prompt { color:var(--bright); font-size:clamp(.75rem,1.4vw,.92rem); letter-spacing:.04em; }
.boot-line-hidden, .boot-hidden, .welcome-hidden, .boot-menu-hidden, .status-bar-hidden { display:none !important; }
.cursor { display:inline-block; animation:blink .82s steps(1) infinite; }
@keyframes blink { 50%{opacity:0} }
#welcome-block { margin-top:10px; }
#welcome-block h1 { margin:0; font-size:clamp(1.05rem,2.2vw,1.45rem); color:var(--bright); letter-spacing:.09em; }
.user-title { margin-top:3px !important; font-size:clamp(.68rem,1.2vw,.82rem); color:var(--dim); }
.directory-title { margin:12px 0 6px; color:var(--text); font-size:.79rem; letter-spacing:.06em; }
.keyboard-hint { margin:0 0 9px; color:var(--dim); font-size:clamp(.56rem,1vw,.68rem); line-height:1.5; }

.terminal-workspace {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 12px;
    padding: clamp(10px, 1.4vw, 16px);
    overflow: hidden;
    border:1px solid var(--border-dim);
    border-radius:7px;
    background:rgba(0,10,0,.22);
    box-shadow: inset 0 0 26px rgba(69,255,50,.025);
}
.terminal-view { display:none; width:100%; height:100%; min-height:0; }
.terminal-view.active-view { display:block; }
.terminal-section { overflow:auto; padding-right:6px; scrollbar-color:var(--dim) transparent; scrollbar-width:thin; }
#directory-screen { overflow:hidden; }

.terminal-menu {
    display:grid;
    grid-template-columns:1fr;
    gap:5px;
    align-content:start;
    max-width:760px;
}
.terminal-menu a, .project-menu-item, .game-menu-item {
    display:flex; align-items:center; gap:10px; width:100%; min-height:36px; padding:6px 10px;
    border:1px solid transparent; border-radius:4px; background:transparent; color:var(--text); text-decoration:none;
    cursor:pointer; text-align:left; letter-spacing:.035em;
}
.terminal-menu a:hover, .terminal-menu a:focus-visible, .terminal-menu a.keyboard-selected,
.project-menu-item:hover, .project-menu-item:focus-visible, .project-menu-item.keyboard-selected,
.game-menu-item:hover, .game-menu-item:focus-visible, .game-menu-item.keyboard-selected {
    border-color:var(--border-dim); background:rgba(69,255,50,.055); color:var(--bright); outline:none;
    box-shadow:inset 0 0 14px rgba(69,255,50,.035);
}
.terminal-menu a.keyboard-selected::before, .project-menu-item.keyboard-selected::before, .game-menu-item.keyboard-selected::before { content:">"; color:var(--bright); }
.menu-key { color:var(--bright); min-width:30px; }
.menu-status, .project-status { margin:10px 0 0; color:var(--dim); font-size:.67rem; letter-spacing:.04em; }

/* Fast record-access typing effect when opening a main directory category. */
.menu-status.menu-status-loading {
    min-height: 1.45em;
    color: var(--bright);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .075em;
    text-shadow: 0 0 8px rgba(69,255,50,.7);
}
.menu-status.menu-status-loading::after {
    content: "█";
    margin-left: 4px;
    animation: directoryLoadCursor .62s steps(1,end) infinite;
}
.terminal-menu.directory-loading a { opacity: .4; transition: opacity .12s ease; }
.terminal-menu.directory-loading a.keyboard-selected { opacity: 1; }
@keyframes directoryLoadCursor { 50% { opacity: 0; } }

.record-header, .project-record-top, .download-header, .subsystem-banner, .game-titlebar, .game-status-line, .game-footer-buttons {
    display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.record-header { padding-bottom:7px; border-bottom:1px solid var(--border-dim); }
.record-header h2 { margin:0; color:var(--bright); font-size:1.05rem; letter-spacing:.12em; }
.directory-level { margin:0; color:var(--dim); font-size:.62rem; }
.record-metadata { display:flex; flex-wrap:wrap; gap:5px 22px; margin:8px 0 15px; }
.record-metadata p { margin:0; color:var(--dim); font-size:.64rem; }
.terminal-section > p, .terminal-section li { line-height:1.55; font-size:clamp(.73rem,1.2vw,.87rem); }
.terminal-section h3 { margin:18px 0 5px; color:var(--bright); font-size:.88rem; letter-spacing:.06em; }
.terminal-section ul { padding-left:22px; }
.record-label { margin:16px 0 3px !important; color:var(--bright); font-weight:700; font-size:.7rem !important; letter-spacing:.06em; }
.personnel-download { max-width:720px; margin-top:18px; padding:12px; border:1px solid var(--border-dim); border-radius:5px; background:rgba(69,255,50,.025); }
.download-header { margin-bottom:9px; color:var(--bright); font-size:.67rem; letter-spacing:.05em; }
.download-button, .return-button, .game-action-button {
    display:inline-block; margin-top:12px; padding:7px 9px; border:1px solid var(--border-dim); border-radius:4px;
    background:rgba(0,15,0,.45); color:var(--text); text-decoration:none; cursor:pointer; font-size:.7rem; letter-spacing:.035em;
}
.download-button:hover, .download-button:focus-visible, .return-button:hover, .return-button:focus-visible, .game-action-button:hover, .game-action-button:focus-visible {
    color:var(--bright); border-color:var(--border); outline:none; background:rgba(69,255,50,.065);
}
.skill-list { max-width:640px; margin-top:10px; }
.skill-list p { display:flex; justify-content:space-between; gap:18px; margin:6px 0; padding-bottom:5px; border-bottom:1px dotted var(--border-faint); font-size:.76rem; }
.skill-list span { color:var(--bright); }
.contact-list p { font-size:.78rem; }
.contact-list a { text-decoration:none; }
.contact-list a:hover { text-decoration:underline; }

.subsystem-banner { padding:7px 9px; border:1px solid var(--border-dim); border-radius:4px; color:var(--bright); font-size:.64rem; }
.project-menu, .game-menu { display:grid; gap:6px; margin-top:8px; }
.project-menu-item, .game-menu-item { font-size:.73rem; }
.project-record { display:none; }
.project-record.active-project-record { display:block; }
.project-record-top { margin-bottom:10px; color:var(--dim); font-size:.62rem; }
.project-record-top p { margin:0; }
.software-version { margin-left:auto; color:var(--dim); font-size:.62rem; }

.terminal-status-bar {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:18px;
    min-height:28px;
    margin-top:8px;
    padding:5px 8px 0;
    border-top:1px solid var(--border-faint);
    color:var(--dim);
    font-size:.59rem;
    letter-spacing:.035em;
}
.status-item { display:flex; gap:5px; align-items:center; }
.status-label { color:var(--bright); }
.status-help { margin-left:auto; text-align:right; }

/* OCCASIONAL CRT GLITCH */
.terminal.terminal-glitch { animation:terminalGlitch .16s steps(2); }
.terminal.terminal-glitch::before { opacity:.38; transform:translateY(2px); }
@keyframes terminalGlitch { 0%{transform:translate(0)} 25%{transform:translate(-2px,1px)} 50%{transform:translate(3px,-1px)} 75%{transform:translate(-1px,0)} 100%{transform:translate(0)} }

/* GRID SNAKE */
.game-hidden { display:none !important; }
#snake-game.game-visible { display:flex; width:100%; height:100%; min-height:0; }
.game-shell {
    display:flex; flex-direction:column; width:min(980px,100%); height:100%; min-height:0; margin:0 auto;
    padding:10px; border:1px solid var(--border-dim); border-radius:7px; background:rgba(0,10,0,.32);
}
.game-titlebar { flex:0 0 auto; padding-bottom:7px; border-bottom:1px solid var(--border-dim); }
.game-title { color:var(--bright); font-weight:700; letter-spacing:.12em; }
.game-build, .game-system-label { color:var(--dim); font-size:.65rem; }
.game-hud { flex:0 0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:8px 0; }
.hud-module { padding:6px 8px; border:1px solid var(--border-faint); border-radius:4px; background:rgba(69,255,50,.025); }
.hud-label { display:block; color:var(--dim); font-size:.54rem; letter-spacing:.08em; }
.hud-module strong { display:block; margin-top:2px; color:var(--bright); font-size:.9rem; }
.game-stage { position:relative; flex:1 1 0; min-height:210px; overflow:hidden; border:1px solid var(--border); border-radius:5px; background:#001000; box-shadow:inset 0 0 40px rgba(69,255,50,.08); }
.snake-grid { display:grid; grid-template-columns:repeat(24,1fr); grid-template-rows:repeat(14,1fr); width:100%; height:100%; }
.snake-cell { position:relative; min-width:0; min-height:0; border-right:1px solid rgba(140,255,102,.025); border-bottom:1px solid rgba(140,255,102,.025); }
.snake-cell.snake-body::before, .snake-cell.snake-head::before {
    content:""; position:absolute; inset:12%; border:1px solid var(--bright); border-radius:18%; background:rgba(116,217,87,.42); box-shadow:0 0 7px rgba(140,255,102,.7);
}
.snake-cell.snake-head::before { inset:6%; background:var(--bright); box-shadow:0 0 11px rgba(140,255,102,.9); }
.snake-cell.snake-head::after { content:""; position:absolute; width:18%; height:18%; border-radius:50%; background:#001000; top:23%; left:60%; box-shadow:0 0 0 1px rgba(0,16,0,.8); }
.snake-cell.snake-head[data-dir="left"]::after { left:22%; }
.snake-cell.snake-head[data-dir="up"]::after { top:20%; left:42%; }
.snake-cell.snake-head[data-dir="down"]::after { top:62%; left:42%; }
.snake-cell.snake-food::before {
    content:""; position:absolute; width:44%; aspect-ratio:1; left:28%; top:28%; background:var(--bright); transform:rotate(45deg);
    box-shadow:0 0 8px var(--bright),0 0 16px rgba(140,255,102,.7); animation:packetPulse .75s ease-in-out infinite alternate;
}
@keyframes packetPulse { from{transform:rotate(45deg) scale(.78);opacity:.7} to{transform:rotate(45deg) scale(1.08);opacity:1} }
.game-overlay { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(0,7,0,.84); }
.game-overlay.overlay-hidden { display:none; }
.game-overlay-panel { width:min(430px,100%); padding:18px; border:1px solid var(--border); border-radius:6px; background:rgba(0,16,0,.93); text-align:center; box-shadow:0 0 26px rgba(69,255,50,.12); }
.overlay-code { margin:0; color:var(--dim); font-size:.6rem; letter-spacing:.08em; }
.game-overlay-panel h3 { margin:9px 0 5px; color:var(--bright); font-size:1.15rem; letter-spacing:.14em; }
.overlay-message { margin:0; color:var(--text); font-size:.76rem; }
.overlay-detail { color:var(--dim); font-size:.64rem; line-height:1.6; }
.game-status-line { flex:0 0 auto; margin-top:6px; padding:5px 2px; font-size:.61rem; color:var(--dim); }
.game-status-label, .packet-symbol { color:var(--bright); }
.game-controls { flex:0 0 auto; display:flex; flex-wrap:wrap; gap:5px 14px; color:var(--dim); font-size:.57rem; }
.game-footer-buttons { flex:0 0 auto; gap:10px; }
.game-footer-buttons .return-button { margin-top:6px; }
.control-pad { display:none; grid-template-columns:repeat(3,46px); grid-template-rows:repeat(2,38px); gap:4px; justify-content:center; margin-top:8px; }
.pad-button { border:1px solid var(--border-dim); border-radius:4px; background:rgba(0,15,0,.68); color:var(--bright); }
.pad-up { grid-column:2; grid-row:1; }
.pad-left { grid-column:1; grid-row:2; }
.pad-center { grid-column:2; grid-row:2; }
.pad-right { grid-column:3; grid-row:2; }
.pad-down { grid-column:2; grid-row:3; }

/* Full screen game application mode */
.terminal-interface.game-app-mode { padding:10px; }
.terminal-interface.game-app-mode .terminal-header,
.terminal-interface.game-app-mode .terminal-status-bar { display:none; }
.terminal-interface.game-app-mode .terminal-workspace { flex:1 1 auto; width:100%; height:100%; min-height:0; margin:0; padding:0; overflow:hidden; border:none; border-radius:0; background:transparent; box-shadow:none; }
.terminal-interface.game-app-mode #software { display:flex; flex-direction:column; width:100%; height:100%; min-height:0; padding:0; overflow:hidden; }
.terminal-interface.game-app-mode #software > .record-header,
.terminal-interface.game-app-mode #software > .record-metadata,
.terminal-interface.game-app-mode #software > #software-directory { display:none; }
.terminal-interface.game-app-mode #snake-game.game-visible { display:flex; flex:1 1 auto; width:100%; height:100%; min-height:0; }
.terminal-interface.game-app-mode .game-shell { flex:1 1 auto; width:100%; max-width:none; height:100%; min-height:0; margin:0; padding:12px 16px 10px; overflow:hidden; }
.terminal-interface.game-app-mode .game-stage { flex:1 1 0; width:100%; max-width:none; min-width:0; min-height:0; margin:0; }

@media (max-height: 700px) {
    body { padding:8px; }
    .terminal-frame { padding:6px; }
    .terminal-interface { padding:12px; }
    .boot-area { margin-top:8px; }
    .terminal-workspace { margin-top:8px; padding:9px; }
    .terminal-menu a { min-height:32px; padding:5px 8px; }
    .terminal-interface.game-app-mode .game-shell { padding:7px 10px; }
    .terminal-interface.game-app-mode .game-hud { margin:5px 0; }
    .terminal-interface.game-app-mode .hud-module { padding:4px 7px; }
    .terminal-interface.game-app-mode .game-status-line { margin-top:3px; padding:3px 2px; }
}

@media (max-width: 700px) {
    body { padding:6px; }
    .terminal-frame { padding:5px; border-radius:12px; }
    .terminal-interface { padding:12px 10px; }
    .terminal-header-top { gap:8px; }
    .terminal-menu { grid-template-columns:1fr; gap:4px; }
    .terminal-menu a { min-height:34px; }
    .record-header { align-items:flex-start; }
    .record-metadata { gap:4px 12px; }
    .status-help { display:none; }
    .terminal-status-bar { gap:10px; }
    .game-build, .game-system-label { display:none; }
    .game-hud { grid-template-columns:repeat(2,1fr); }
    .control-pad { display:grid; grid-template-rows:repeat(3,38px); }
    .game-footer-buttons { display:none; }
    .game-controls { display:none; }
    .his-intro {
        padding: 8px;
    }

    .his-intro-content {
        width: 100%;
        height: 100%;
        max-width: 480px;
    }

    .his-intro-desktop {
        display: none;
    }

    .huos-mobile-splash {
        position: relative;
        z-index: 3;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;

        width: 100%;
        height: 100%;
        min-height: 0;

        padding: clamp(12px, 3.4vw, 18px);

        border: 1px solid rgba(140,255,102,.5);
        border-radius: 16px;

        background:
            radial-gradient(circle at 50% 28%, rgba(31,110,42,.18), transparent 40%),
            linear-gradient(rgba(0,12,0,.9), rgba(0,4,0,.98));

        box-shadow:
            inset 0 0 34px rgba(0,0,0,.72),
            0 0 18px rgba(69,255,50,.12);

        opacity: 0;
        transform: scaleX(.18) scaleY(.03);
        filter: blur(7px) brightness(2.8);

        overflow: hidden;
    }

    .his-intro-active .huos-mobile-splash {
        animation: introResolve .62s cubic-bezier(.2,.78,.18,1) .08s forwards;
    }

    .huos-mobile-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        margin-bottom: 4px;
        text-align: center;
    }

    .huos-mobile-company {
        min-width: 0;
        text-align: center;
    }

    .huos-mobile-company-name {
        color: var(--bright);
        font-size: clamp(1.05rem, 5.4vw, 1.42rem);
        font-weight: 800;
        line-height: 1;
        letter-spacing: .1em;
        text-indent: .1em;
        white-space: nowrap;
    }

    .huos-mobile-division {
        margin-top: 6px;
        color: var(--dim);
        font-size: clamp(.42rem, 2.15vw, .58rem);
        letter-spacing: .085em;
        line-height: 1.2;
    }

    .huos-mobile-hero-logo-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1 1 auto;
        min-height: 0;
        margin: 7px 0 6px;
    }

    .huos-mobile-hero-logo {
        display: block;
        width: min(76vw, 300px);
        height: auto;
        max-height: min(30vh, 230px);
        object-fit: contain;
        filter:
            drop-shadow(0 0 8px rgba(140,255,102,.68))
            drop-shadow(0 0 20px rgba(69,255,50,.22));
    }

    .huos-mobile-os-card {
        flex: 0 0 auto;
        padding: 7px 8px 6px;
        border: 1px solid rgba(140,255,102,.48);
        border-radius: 9px;
        background: rgba(0,18,0,.58);
        text-align: center;
        margin-top: 2px;
    }

    .huos-mobile-os-name {
        color: var(--bright);
        font-size: clamp(1.25rem, 7vw, 1.75rem);
        font-weight: 800;
        letter-spacing: .16em;
        text-indent: .16em;
        line-height: 1;
    }

    .huos-mobile-os-long {
        margin-top: 4px;
        color: var(--text);
        font-size: clamp(.48rem, 2.45vw, .64rem);
        letter-spacing: .09em;
    }

    .huos-mobile-os-traits {
        margin-top: 5px;
        color: var(--dim);
        font-size: clamp(.42rem, 2.05vw, .54rem);
        letter-spacing: .08em;
    }

    .huos-mobile-checks {
        flex: 0 0 auto;
        margin-top: 7px;
        padding: 6px 8px;
        border-top: 1px solid var(--border-faint);
        border-bottom: 1px solid var(--border-faint);
    }

    .huos-mobile-checks > div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 2px 0;
        color: var(--text);
        font-size: clamp(.48rem, 2.5vw, .62rem);
        letter-spacing: .045em;
    }

    .huos-mobile-checks strong {
        color: var(--bright);
        font-weight: 700;
    }

    .huos-mobile-meta {
        display: flex;
        justify-content: center;
        gap: 18px;
        flex: 0 0 auto;
        margin-top: 5px;
        color: var(--dim);
        font-size: clamp(.42rem, 2.1vw, .54rem);
        letter-spacing: .06em;
    }

    .huos-mobile-motto {
        flex: 0 0 auto;
        margin-top: 7px;
        color: var(--text);
        text-align: center;
        font-size: clamp(.47rem, 2.45vw, .62rem);
        letter-spacing: .14em;
        text-indent: .14em;
    }

    .huos-mobile-start {
        flex: 0 0 auto;
        margin-top: 8px;
        padding: 9px 8px 8px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: rgba(0,22,0,.55);
        color: var(--bright);
        text-align: center;
        box-shadow: 0 0 10px rgba(69,255,50,.08);
    }

    .huos-mobile-start span,
    .huos-mobile-start strong {
        display: block;
    }

    .huos-mobile-start span {
        font-size: clamp(.48rem, 2.5vw, .64rem);
        letter-spacing: .08em;
    }

    .huos-mobile-start strong {
        margin-top: 3px;
        font-size: clamp(.62rem, 3.4vw, .83rem);
        letter-spacing: .09em;
    }

    .huos-mobile-block {
        display: inline-block !important;
        margin-left: 5px;
        animation: blink 1s steps(1) infinite;
    }

}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; animation-delay:0ms !important; }
}


/* ============================================================
   PERSISTENT HORTON INDUSTRIES SYSTEM MARK
   Small top-right system badge. It is absolutely positioned
   inside the CRT so it never participates in page/record layout.
============================================================ */

.persistent-hi-logo[hidden] {
    display: none !important;
}

.persistent-hi-logo {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 46;

    width: 50px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-2px) scale(.94);
    filter:
        drop-shadow(0 0 3px rgba(140, 255, 102, .58))
        drop-shadow(0 0 8px rgba(69, 255, 50, .15));

    transition:
        opacity .22s linear,
        transform .22s ease-out,
        visibility .22s linear;
}

.persistent-hi-logo-active {
    opacity: .58;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.persistent-hi-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Reserve a small amount of header space so the sound control
   never collides with the corner badge. */
.terminal-header-top {
    padding-right: 56px;
}

/* The game fills the screen, so keep the badge subtle there. */
.persistent-hi-logo.game-logo-dim {
    opacity: .28;
}

@media (max-width: 700px) {
    .persistent-hi-logo {
        top: 8px;
        right: 8px;
        width: 42px;
        height: 24px;
    }

    .persistent-hi-logo-active {
        opacity: .46;
    }

    .terminal-header-top {
        padding-right: 46px;
    }
}


@media (max-width: 700px) and (max-height: 690px) {
    .huos-mobile-splash {
        padding: 8px 10px;
    }
    .huos-mobile-brand {
        margin-bottom: 1px;
    }
    .huos-mobile-hero-logo-wrap {
        margin: 2px 0 3px;
    }
    .huos-mobile-hero-logo {
        width: min(66vw, 240px);
        max-height: min(23vh, 165px);
    }
    .huos-mobile-checks {
        margin-top: 5px;
        padding: 4px 7px;
    }
    .huos-mobile-motto,
    .huos-mobile-start {
        margin-top: 5px;
    }
}

@media (max-width: 360px) {
    .huos-mobile-company-name {
        font-size: .92rem;
    }
    .huos-mobile-hero-logo {
        width: min(72vw, 225px);
        max-height: min(24vh, 155px);
    }
    .huos-mobile-meta {
        gap: 10px;
    }
}


/* ============================================================
   PROFESSIONAL PROFILE / RESUME CONTENT
============================================================ */
.resume-download-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 9px;
}

.resume-download-group .download-button {
    margin-top: 0;
}

#experience li,
#skills li,
#profile p {
    line-height: 1.55;
}

#skills h3 {
    margin-top: 16px;
}

#skills .skill-list {
    max-width: 820px;
}

@media (max-width: 700px) {
    .resume-download-group {
        flex-direction: column;
        align-items: flex-start;
    }

    #skills .skill-list p {
        align-items: flex-start;
        line-height: 1.4;
    }

    #skills .skill-list span {
        white-space: nowrap;
    }
}


/* ============================================================
   PROJECT ARCHIVE // COMING SOON
============================================================ */

.project-coming-soon {
    max-width: 820px;
}

.coming-soon-panel {
    margin-top: 14px;
    padding: clamp(14px, 2vw, 20px);
    border: 1px solid var(--border-dim);
    border-radius: 7px;
    background: rgba(0, 18, 0, .34);
    box-shadow: inset 0 0 26px rgba(69,255,50,.025);
}

.coming-soon-panel h3 {
    margin: 8px 0 12px;
    color: var(--bright);
    font-size: clamp(.9rem, 1.8vw, 1.08rem);
    letter-spacing: .09em;
}

.coming-soon-panel > p:not(.terminal-meta):not(.coming-soon-code) {
    max-width: 690px;
    line-height: 1.65;
}

.coming-soon-code {
    margin: 0;
    color: var(--dim);
    font-size: .68rem;
    letter-spacing: .065em;
}

/* ============================================================
   CONTACT // CLICK-TO-REVEAL EMAIL
============================================================ */

.contact-email-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 10px;
    margin: 0 0 5px;
    font-size: .78rem;
}

.contact-label {
    color: var(--text);
}

.email-display {
    color: var(--dim);
}

.email-display a {
    color: var(--bright);
    text-decoration: none;
}

.email-display a:hover {
    text-decoration: underline;
}

.inline-terminal-button {
    padding: 3px 7px;
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    background: rgba(0, 16, 0, .55);
    color: var(--bright);
    cursor: pointer;
    font-size: .66rem;
    letter-spacing: .035em;
}

.inline-terminal-button:hover,
.inline-terminal-button:focus-visible {
    border-color: var(--border);
    outline: none;
    box-shadow: 0 0 8px rgba(69,255,50,.12);
}

.inline-terminal-button:disabled {
    color: var(--dim);
    cursor: default;
    opacity: .72;
}

.email-privacy-note {
    margin: 0 0 14px !important;
    color: var(--dim);
    font-size: .61rem !important;
    letter-spacing: .025em;
}


/* ============================================================
   V14 // SKILLS CAPABILITY MATRIX
============================================================ */

#skills {
    --cap-panel: rgba(0, 18, 0, .46);
}

.skills-system-banner {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
    padding: 7px 9px;
    border-top: 1px solid var(--border-dim);
    border-bottom: 1px solid var(--border-dim);
    color: var(--dim);
    font-size: .62rem;
    letter-spacing: .07em;
}

.skills-system-banner span:first-child {
    color: var(--text);
}

.skills-intro {
    margin: 11px 0 10px;
    color: var(--dim);
    font-size: .66rem;
    letter-spacing: .055em;
}

.capability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.capability-card {
    position: relative;
    min-height: 150px;
    padding: 12px 10px 10px;
    overflow: hidden;
    border: 1px solid var(--border-dim);
    border-radius: 7px;
    background:
        linear-gradient(180deg, rgba(69,255,50,.035), transparent 40%),
        var(--cap-panel);
    box-shadow: inset 0 0 20px rgba(69,255,50,.025);
}

.capability-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    opacity: .28;
    background: var(--bright);
    box-shadow: 0 0 8px var(--glow);
}

.capability-card-primary {
    border-color: var(--border);
    box-shadow:
        inset 0 0 24px rgba(69,255,50,.055),
        0 0 10px rgba(69,255,50,.055);
}

.capability-card-primary::after {
    opacity: .8;
}

.capability-code {
    color: var(--dim);
    font-size: .54rem;
    letter-spacing: .08em;
}

.capability-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 8px 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--bright);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    box-shadow:
        inset 0 0 12px rgba(69,255,50,.08),
        0 0 8px rgba(69,255,50,.08);
}

.capability-card h3 {
    margin: 0 !important;
    color: var(--bright);
    font-size: .79rem;
    letter-spacing: .07em;
}

.capability-card p {
    margin: 6px 0 10px;
    color: var(--dim);
    font-size: .56rem;
    line-height: 1.45;
    letter-spacing: .03em;
}

.capability-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--text);
    font-size: .51rem;
    letter-spacing: .05em;
}

.status-lamp {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--bright);
    box-shadow: 0 0 7px var(--bright);
}

.skills-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.skills-panel {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border-faint);
    border-radius: 6px;
    background: rgba(0, 12, 0, .36);
}

.skills-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border-faint);
}

.skills-panel-header h3 {
    margin: 0 !important;
    color: var(--text);
    font-size: .69rem;
    letter-spacing: .065em;
}

.panel-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 18px;
    border: 1px solid var(--border-dim);
    border-radius: 3px;
    color: var(--bright);
    font-size: .53rem;
}

.skill-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.skill-chip {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 7px;
    border: 1px solid rgba(140,255,102,.18);
    border-radius: 4px;
    background: rgba(69,255,50,.025);
    color: var(--text);
    font-size: .56rem;
    letter-spacing: .035em;
}

.skill-chip::before {
    content: "◆";
    margin-right: 5px;
    color: var(--dim);
    font-size: .42rem;
}

.skill-chip-primary {
    border-color: var(--border);
    color: var(--bright);
    box-shadow: 0 0 7px rgba(69,255,50,.055);
}

.skills-panel-note {
    margin: 7px 0 0;
    color: var(--dim);
    font-size: .49rem;
    letter-spacing: .055em;
}

.tool-matrix {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
    margin-top: 8px;
}

.tool-matrix span {
    position: relative;
    min-width: 0;
    padding: 4px 4px 4px 11px;
    color: var(--text);
    font-size: .54rem;
    line-height: 1.3;
}

.tool-matrix span::before {
    content: ">";
    position: absolute;
    left: 0;
    color: var(--bright);
}

.skills-footer-readout {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin-top: 9px;
    padding: 7px 9px;
    border-left: 2px solid var(--bright);
    background: rgba(69,255,50,.025);
    color: var(--dim);
    font-size: .58rem;
    letter-spacing: .04em;
}

.skills-footer-readout strong {
    color: var(--bright);
    font-weight: 400;
}

/* ============================================================
   V14 // GRID SNAKE: DATA RUNNER
============================================================ */

.software-game-entry {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.software-game-entry strong {
    color: var(--bright);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.software-game-entry small {
    color: var(--dim);
    font-size: .53rem;
    letter-spacing: .04em;
}

.game-shell {
    padding: 8px !important;
    border-color: rgba(140,255,102,.38);
    background:
        radial-gradient(circle at 45% 45%, rgba(28,90,30,.08), transparent 48%),
        rgba(0,8,0,.38);
}

.game-hero {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 6px 8px 8px;
    border-bottom: 1px solid var(--border-dim);
}

.snake-brand-mark {
    position: relative;
    flex: 0 0 74px;
    width: 74px;
    height: 46px;
}

.snake-mark-segment {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid var(--bright);
    border-radius: 5px;
    background: rgba(116,217,87,.22);
    box-shadow: 0 0 7px rgba(140,255,102,.36);
}

.snake-mark-1 { left: 0; top: 2px; }
.snake-mark-2 { left: 16px; top: 17px; }
.snake-mark-3 { left: 33px; top: 17px; }
.snake-mark-4 { left: 48px; top: 2px; }

.snake-mark-head {
    position: absolute;
    right: 0;
    top: 2px;
    color: var(--bright);
    font-size: 1.2rem;
    line-height: 1;
    text-shadow: 0 0 8px rgba(140,255,102,.85);
}

.game-brand-copy {
    min-width: 0;
}

.game-arcade-label {
    color: var(--dim);
    font-size: .52rem;
    letter-spacing: .12em;
}

.game-logo-title {
    margin-top: 1px;
    color: var(--bright);
    font-size: clamp(1.35rem, 3.1vw, 2.15rem);
    font-weight: 800;
    line-height: .95;
    letter-spacing: .11em;
    text-shadow:
        0 0 7px rgba(140,255,102,.65),
        0 0 18px rgba(69,255,50,.18);
}

.game-logo-title span {
    color: var(--text);
    font-weight: 500;
}

.game-logo-subtitle {
    margin-top: 4px;
    color: var(--dim);
    font-size: .56rem;
    letter-spacing: .07em;
}

.game-hero .game-system-label {
    margin-left: auto;
    align-self: flex-start;
    padding-top: 2px;
    white-space: nowrap;
}

.game-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 184px;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 8px;
}

.game-main-layout .game-stage {
    min-height: 0;
    height: 100%;
    border-width: 1px;
    box-shadow:
        inset 0 0 42px rgba(69,255,50,.075),
        0 0 11px rgba(69,255,50,.07);
}

.game-side-panel {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    min-height: 0;
}

.game-side-panel .game-hud {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 0;
}

.game-side-panel .hud-module {
    padding: 6px;
}

.game-side-panel .hud-module strong {
    font-size: .84rem;
}

.game-status-panel {
    display: grid;
    gap: 3px;
    padding: 7px;
    border: 1px solid var(--border-faint);
    border-radius: 5px;
    background: rgba(69,255,50,.02);
}

.game-status-panel > .game-status-label {
    color: var(--dim);
    font-size: .48rem;
    letter-spacing: .08em;
}

.game-status-panel > strong {
    color: var(--bright);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .045em;
}

.game-data-key {
    margin-top: 2px;
    color: var(--dim);
    font-size: .47rem;
}

.game-data-key b {
    color: var(--bright);
    font-weight: 400;
}

.game-controls-panel {
    display: grid;
    gap: 5px;
    padding: 7px;
    border: 1px solid var(--border-faint);
    border-radius: 5px;
    font-size: .52rem;
}

.game-side-panel .game-footer-buttons {
    display: grid;
    gap: 4px;
    margin-top: auto;
}

.game-side-panel .game-footer-buttons .return-button {
    width: 100%;
    margin-top: 0;
    padding: 6px;
    font-size: .55rem;
}

.overlay-snake-mark {
    margin-bottom: 5px;
    color: var(--bright);
    font-size: 1.05rem;
    letter-spacing: -.06em;
    text-shadow: 0 0 8px rgba(140,255,102,.7);
}

.game-overlay-panel {
    width: min(470px, 88%);
    padding: 20px;
}

.game-overlay-panel h3 {
    font-size: clamp(1.05rem, 2.4vw, 1.45rem);
}

.terminal-interface.game-app-mode .game-shell {
    padding: 8px !important;
}

.terminal-interface.game-app-mode .game-stage {
    min-height: 0;
}

/* Board is the visual priority in game mode. */
.terminal-interface.game-app-mode .game-main-layout {
    min-height: 0;
}

@media (max-width: 900px) {
    .capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .game-main-layout {
        grid-template-columns: minmax(0, 1fr) 150px;
    }

    .game-logo-subtitle {
        display: none;
    }
}

@media (max-width: 700px) {
    .skills-system-banner {
        flex-direction: column;
        gap: 3px;
    }

    .capability-grid,
    .skills-panel-grid {
        grid-template-columns: 1fr;
    }

    .capability-card {
        min-height: 0;
    }

    .tool-matrix {
        grid-template-columns: 1fr;
    }

    .game-hero {
        min-height: 54px;
        gap: 7px;
        padding: 4px 4px 6px;
    }

    .snake-brand-mark {
        flex-basis: 58px;
        width: 58px;
        transform: scale(.78);
        transform-origin: left center;
        margin-right: -10px;
    }

    .game-logo-title {
        font-size: 1.12rem;
    }

    .game-arcade-label {
        font-size: .43rem;
    }

    .game-hero .game-system-label {
        display: none;
    }

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

    .game-main-layout .game-stage {
        flex: 1 1 auto;
        min-height: 0;
    }

    .game-side-panel {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        gap: 5px 8px;
    }

    .game-side-panel .game-hud {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }

    .game-status-panel {
        grid-column: 2;
        grid-row: 1;
        min-width: 112px;
    }

    .game-controls-panel {
        display: none;
    }

    .game-side-panel .control-pad {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
    }

    .game-side-panel .game-footer-buttons {
        display: none;
    }
}

@media (max-height: 690px) and (min-width: 701px) {
    .game-hero {
        min-height: 52px;
        padding: 3px 7px 5px;
    }

    .snake-brand-mark {
        transform: scale(.78);
        transform-origin: left center;
        margin-right: -12px;
    }

    .game-logo-title {
        font-size: 1.25rem;
    }

    .game-logo-subtitle {
        display: none;
    }
}


/* ============================================================
   V15 // GLOBAL READABILITY
   Increase the default type scale so 100% browser zoom is the
   intended comfortable reading size.
============================================================ */
html {
    font-size: 18px;
}

@media (max-width: 700px) {
    html {
        font-size: 17px;
    }
}

/* Bring a few intentionally tiny system labels up with the new base scale. */
.directory-level,
.record-metadata p,
.skills-console-header,
.terminal-status-bar,
.keyboard-hint,
.game-arcade-label,
.game-system-label,
.hud-label {
    line-height: 1.35;
}

/* ============================================================
   V15 // SKILLS / PERK-STYLE CAPABILITY CONSOLE
============================================================ */

#skills {
    --skills-panel: rgba(0, 16, 0, .48);
    --skills-panel-strong: rgba(0, 22, 0, .64);
}

.skills-console-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 10px;
    padding: 7px 10px;
    border-top: 1px solid var(--border-dim);
    border-bottom: 1px solid var(--border-dim);
    color: var(--dim);
    font-size: .68rem;
    letter-spacing: .065em;
}

.skills-console-header span:first-child {
    color: var(--bright);
}

.skills-dashboard {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 12px;
    margin-top: 10px;
}

.skills-avatar-panel {
    position: relative;
    min-width: 0;
    padding: 10px;
    overflow: hidden;
    border: 1px solid var(--border-dim);
    border-radius: 7px;
    background:
        radial-gradient(circle at 50% 18%, rgba(69,255,50,.08), transparent 42%),
        var(--skills-panel);
    box-shadow: inset 0 0 24px rgba(69,255,50,.025);
}

.skills-avatar-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(140,255,102,.025) 0 1px, transparent 1px 4px);
}

.skills-avatar-frame {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    margin-bottom: 8px;
    overflow: hidden;
    border-bottom: 1px solid var(--border-faint);
}

.skills-avatar-frame img {
    display: block;
    width: 155px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter:
        saturate(.82)
        contrast(1.04)
        drop-shadow(0 0 6px rgba(140,255,102,.42));
}

.skills-avatar-title {
    position: relative;
    z-index: 1;
    margin: 2px 0 8px;
    color: var(--bright);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .075em;
    text-align: center;
}

.skills-avatar-readout {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px dotted var(--border-faint);
}

.skills-avatar-readout span {
    color: var(--dim);
    font-size: .54rem;
    letter-spacing: .06em;
}

.skills-avatar-readout strong {
    color: var(--text);
    font-size: .65rem;
    font-weight: 400;
    line-height: 1.25;
}


.skills-main-console {
    min-width: 0;
}

.skills-console-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    color: var(--bright);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .075em;
}

.skills-console-section-title::before,
.skills-console-section-title::after {
    content: "";
    height: 1px;
    background: var(--border-dim);
}

.skills-console-section-title::before {
    width: 16px;
    box-shadow: -4px 0 0 var(--border-dim);
}

.skills-console-section-title::after {
    flex: 1;
}

.skills-console-section-title span::before { content: "[ "; color: var(--dim); }
.skills-console-section-title span::after { content: " ]"; color: var(--dim); }

.perk-card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}

.perk-card {
    position: relative;
    min-width: 0;
    min-height: 215px;
    padding: 10px 9px 9px;
    border: 1px solid var(--border-dim);
    border-radius: 7px;
    background:
        linear-gradient(180deg, rgba(69,255,50,.045), transparent 42%),
        var(--skills-panel-strong);
    box-shadow: inset 0 0 20px rgba(69,255,50,.025);
    text-align: center;
}

.perk-card-primary {
    border-color: var(--border);
    box-shadow:
        inset 0 0 24px rgba(69,255,50,.065),
        0 0 10px rgba(69,255,50,.065);
}

.perk-card-primary::before {
    content: "PRIMARY";
    position: absolute;
    top: -1px;
    right: 8px;
    padding: 2px 5px;
    border: 1px solid var(--border);
    border-top: 0;
    background: #001100;
    color: var(--bright);
    font-size: .43rem;
    letter-spacing: .06em;
}

.perk-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 4px auto 7px;
    color: var(--bright);
}

.perk-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(140,255,102,.35));
}

.perk-card h3 {
    min-height: 2.5em;
    margin: 0 !important;
    color: var(--bright);
    font-size: .73rem;
    line-height: 1.25;
    letter-spacing: .055em;
}

.perk-rule {
    width: 72%;
    margin: 5px auto 6px;
    border-top: 1px solid var(--border-faint);
}

.perk-card p {
    margin: 0;
    color: var(--dim);
    font-size: .52rem;
    line-height: 1.48;
    letter-spacing: .025em;
}

.perk-status {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 7px;
    padding-top: 5px;
    border-top: 1px solid var(--border-faint);
    color: var(--text);
    font-size: .47rem;
    letter-spacing: .045em;
}

.skills-standards-title {
    margin-top: 10px;
}

.standards-rack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.standard-tag {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 5px 9px;
    border: 1px solid var(--border-faint);
    border-radius: 4px;
    background: rgba(69,255,50,.025);
    color: var(--text);
    font-size: .6rem;
    letter-spacing: .04em;
}

.standard-tag::before {
    content: "◆";
    margin-right: 6px;
    color: var(--dim);
    font-size: .42rem;
}

.standard-tag-primary {
    border-color: var(--border);
    color: var(--bright);
    box-shadow: 0 0 8px rgba(69,255,50,.055);
}



@media (max-width: 1180px) {
    .skills-dashboard {
        grid-template-columns: 145px minmax(0, 1fr);
    }
    .skills-avatar-frame { height: 165px; }
    .perk-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .perk-card { min-height: 205px; }
}

@media (max-width: 760px) {
    .skills-console-header {
        flex-direction: column;
        gap: 3px;
    }
    .skills-dashboard {
        grid-template-columns: 1fr;
    }
    .skills-avatar-panel {
        display: grid;
        grid-template-columns: 110px minmax(0, 1fr);
        column-gap: 10px;
        align-items: center;
    }
    .skills-avatar-frame {
        grid-row: span 5;
        height: 130px;
        margin: 0;
        border-bottom: 0;
        border-right: 1px solid var(--border-faint);
    }
    .skills-avatar-frame img { width: 105px; }
    .skills-avatar-title { text-align: left; margin-bottom: 2px; }
    .skills-avatar-readout { margin-top: 3px; padding-top: 3px; }
    .perk-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .perk-card {
        min-height: 190px;
    }
    .perk-icon {
        width: 58px;
        height: 58px;
    }
}

@media (max-width: 470px) {
    .perk-card-grid,
    .perk-card {
        min-height: 175px;
    }
    .skills-avatar-panel {
        grid-template-columns: 90px minmax(0,1fr);
    }
    .skills-avatar-frame { height: 110px; }
    .skills-avatar-frame img { width: 88px; }
}


/* ============================================================
   V16 // ACTIVE PERSONNEL RECORD IDENTITY
============================================================ */
.active-record-badge[hidden] {
    display: none !important;
}

.active-record-badge {
    position: absolute;
    top: 11px;
    left: 50%;
    z-index: 47;
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 42%;
    padding: 3px 8px;
    border: 1px solid var(--border-faint);
    border-radius: 4px;
    background: rgba(0, 12, 0, .76);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -2px);
    color: var(--dim);
    font-size: .54rem;
    letter-spacing: .045em;
    white-space: nowrap;
    box-shadow: 0 0 8px rgba(69,255,50,.04);
    transition: opacity .22s linear, transform .22s ease-out, visibility .22s linear;
}

.active-record-badge strong {
    color: var(--bright);
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.active-record-badge-active {
    opacity: .62;
    visibility: visible;
    transform: translate(-50%, 0);
}

.active-subject-line {
    margin: 3px 0 0 !important;
    color: var(--bright);
    font-size: .62rem;
    letter-spacing: .075em;
}

@media (max-width: 820px) {
    .active-record-badge {
        top: 7px;
        max-width: 58%;
        padding: 2px 6px;
    }
    .active-record-label { display: none; }
    .active-record-badge strong { font-size: .5rem; }
}

/* ============================================================
   V16 // NAVIGABLE SKILLS CAPABILITY RECORDS
============================================================ */
.skill-record-button {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: transform .12s ease-out, border-color .12s linear, box-shadow .12s linear, background .12s linear;
}

.skill-record-button:hover,
.skill-record-button:focus-visible,
.skill-record-button.keyboard-selected {
    outline: none;
    transform: translateY(-2px);
    border-color: var(--bright);
    background:
        linear-gradient(180deg, rgba(69,255,50,.09), transparent 45%),
        var(--skills-panel-strong);
    box-shadow:
        inset 0 0 26px rgba(69,255,50,.075),
        0 0 12px rgba(69,255,50,.10);
}

.skill-record-button.keyboard-selected::after {
    content: "> SELECTED";
    position: absolute;
    left: 7px;
    top: 6px;
    color: var(--bright);
    font-size: .42rem;
    letter-spacing: .055em;
}



/* ============================================================
   V17 // EXPANDED RECORD WORKSPACE
   Record screens collapse the large welcome/boot area and use a
   compact one-line terminal header so the record itself gets most
   of the CRT. The main directory/startup layout remains unchanged.
============================================================ */
.terminal-interface.record-mode {
    padding: 9px 13px 7px;
}

.terminal-interface.record-mode .boot-area {
    display: none;
}

.terminal-interface.record-mode .terminal-header {
    flex: 0 0 auto;
}

.terminal-interface.record-mode .terminal-header-top {
    min-height: 27px;
    align-items: center;
    gap: 10px;
    padding-right: 56px;
}

.terminal-interface.record-mode .terminal-identity {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3px 13px;
}

.terminal-interface.record-mode .terminal-identity p {
    margin: 0;
}

.terminal-interface.record-mode .system-name {
    font-size: .72rem;
}

.terminal-interface.record-mode .terminal-identity .terminal-meta {
    margin-top: 0;
    font-size: .55rem;
}

.terminal-interface.record-mode .sound-toggle {
    padding: 3px 6px;
    font-size: .58rem;
}

.terminal-interface.record-mode .terminal-workspace {
    margin-top: 5px;
    padding: clamp(11px, 1.25vw, 16px);
}

.terminal-interface.record-mode .terminal-status-bar {
    min-height: 22px;
    margin-top: 4px;
    padding-top: 3px;
    font-size: .53rem;
}

/* Give record content a little more horizontal room as well. */
.terminal-interface.record-mode .terminal-section {
    padding-right: 8px;
}

@media (max-width: 700px) {
    .terminal-interface.record-mode {
        padding: 7px 7px 5px;
    }

    .terminal-interface.record-mode .terminal-header-top {
        min-height: 24px;
        padding-right: 46px;
    }

    .terminal-interface.record-mode .terminal-identity {
        gap: 2px 8px;
    }

    .terminal-interface.record-mode .system-name {
        font-size: .66rem;
    }

    .terminal-interface.record-mode .terminal-identity .terminal-meta {
        font-size: .49rem;
    }

    .terminal-interface.record-mode .terminal-workspace {
        margin-top: 4px;
        padding: 9px;
    }
}

/* ============================================================
   V18 // SKILLS INTERACTION POLISH
============================================================ */

/* Put the active personnel record identity directly in the Skills
   profile panel, with the profile type as a secondary readout. */
.skills-avatar-title {
    color: var(--bright);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .055em;
}

.skills-avatar-subtitle {
    margin: -2px 0 5px;
    color: var(--dim);
    font-size: .49rem;
    letter-spacing: .075em;
}

/* Make the entire perk card an unambiguous click target. */
.skill-record-button {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.skill-record-button > * {
    pointer-events: none;
}


@media (max-width: 700px) {
    .skills-avatar-title {
        font-size: .66rem;
    }
    .skills-avatar-subtitle {
        font-size: .45rem;
    }
}

/* ============================================================
   V19 // HOBBIES / OFF-DUTY PERSONNEL RECORD
============================================================ */

#hobbies {
    --hobby-panel: rgba(0, 18, 0, .52);
    --hobby-panel-strong: rgba(0, 24, 0, .72);
}

.hobbies-console-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin: 2px 0 10px;
    padding: 7px 10px;
    border: 1px solid var(--border-dim);
    background: rgba(69,255,50,.035);
    color: var(--dim);
    font-size: .57rem;
    letter-spacing: .06em;
}

.hobbies-console-header span:first-child {
    color: var(--bright);
    font-weight: 700;
}

.hobbies-console {
    display: grid;
    grid-template-columns: minmax(330px, .92fr) minmax(420px, 1.18fr);
    gap: 12px;
    min-height: 0;
}

.hobby-selector-panel,
.hobby-detail-panel {
    border: 1px solid var(--border-dim);
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(69,255,50,.025), transparent 22%),
        var(--hobby-panel);
    box-shadow: inset 0 0 22px rgba(69,255,50,.025);
}

.hobby-selector-panel {
    padding: 10px;
}

.hobby-selector-heading,
.hobby-detail-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border-faint);
}

.hobby-selector-heading > span,
.hobby-detail-topline span:first-child {
    color: var(--bright);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .075em;
}

.hobby-selector-heading small,
.hobby-detail-topline span:last-child {
    color: var(--dim);
    font-size: .48rem;
    letter-spacing: .045em;
}

.hobby-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
}

.hobby-card {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    min-height: 82px;
    padding: 9px 8px;
    border: 1px solid var(--border-faint);
    border-radius: 4px;
    background: rgba(0,8,0,.42);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.hobby-card:hover,
.hobby-card:focus-visible,
.hobby-card.keyboard-selected {
    outline: none;
    border-color: var(--border);
    background: rgba(69,255,50,.065);
    color: var(--bright);
    box-shadow: inset 0 0 14px rgba(69,255,50,.045), 0 0 8px rgba(69,255,50,.035);
}

.hobby-card.keyboard-selected::after {
    content: "// SELECTED";
    position: absolute;
    right: 6px;
    bottom: 4px;
    color: var(--dim);
    font-size: .38rem;
    letter-spacing: .04em;
}

.hobby-card-index {
    position: absolute;
    top: 5px;
    right: 6px;
    color: var(--dim);
    font-size: .46rem;
}

.hobby-card-icon {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border-dim);
    border-radius: 50%;
    color: var(--bright);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: -.03em;
    box-shadow: inset 0 0 10px rgba(69,255,50,.035);
}

.hobby-card strong {
    align-self: end;
    padding-right: 18px;
    color: inherit;
    font-size: .62rem;
    line-height: 1.12;
    letter-spacing: .04em;
}

.hobby-card small {
    align-self: start;
    color: var(--dim);
    font-size: .43rem;
    line-height: 1.25;
    letter-spacing: .035em;
}

.hobby-detail-panel {
    position: relative;
    min-height: 330px;
    padding: 12px 14px 38px;
    background:
        linear-gradient(135deg, rgba(69,255,50,.035), transparent 40%),
        var(--hobby-panel-strong);
}

.hobby-detail[hidden] {
    display: none !important;
}

.hobby-detail {
    padding-top: 15px;
}

.hobby-detail-code {
    margin-bottom: 6px;
    color: var(--dim);
    font-size: .52rem;
    letter-spacing: .055em;
}

.hobby-detail h3 {
    margin: 0 0 10px;
    color: var(--bright);
    font-size: 1.15rem;
    letter-spacing: .065em;
}

.hobby-detail > p {
    max-width: 72ch;
    margin: 0 0 18px;
    color: var(--text);
    font-size: .72rem;
    line-height: 1.65;
}

.hobby-detail-readout {
    display: grid;
    grid-template-columns: minmax(130px, .65fr) 1.35fr;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border-faint);
}

.hobby-detail-readout span {
    color: var(--dim);
    font-size: .52rem;
    letter-spacing: .06em;
}

.hobby-detail-readout strong {
    color: var(--text);
    font-size: .6rem;
    letter-spacing: .04em;
}

.hobby-detail-readout.hobby-detail-highlight strong {
    color: var(--bright);
    text-shadow: 0 0 7px rgba(69,255,50,.62);
}

.hobby-detail-footer {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 10px;
    padding-top: 7px;
    border-top: 1px solid var(--border-faint);
    color: var(--dim);
    font-size: .45rem;
    letter-spacing: .045em;
}

/* Seven main-directory entries still fit comfortably at default zoom. */
#directory-screen .terminal-menu {
    gap: 4px;
}

#directory-screen .terminal-menu a {
    min-height: 34px;
    padding-top: 5px;
    padding-bottom: 5px;
}

@media (max-width: 980px) {
    .hobbies-console {
        grid-template-columns: 1fr;
    }
    .hobby-detail-panel {
        min-height: 280px;
    }
}

@media (max-width: 650px) {
    .hobbies-console-header,
    .hobby-selector-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
    .hobby-card-grid {
        grid-template-columns: 1fr;
    }
    .hobby-card {
        min-height: 68px;
    }
    .hobby-detail-readout {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}


/* ============================================================
   V20 // PERSISTENT RECORD NAVIGATION + RETURN TO TOP
============================================================ */
.terminal-workspace { position: relative; }
.record-navigation[hidden], .record-scroll-top[hidden] { display:none !important; }
.terminal-interface.record-mode .terminal-workspace { display:flex; flex-direction:column; min-height:0; }
.terminal-interface.record-mode .terminal-view.active-view { flex:1 1 auto; height:auto; min-height:0; }

.record-navigation {
    flex:0 0 auto;
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:8px;
    margin:-3px -2px 8px;
    padding-bottom:7px;
    border-bottom:1px solid var(--border-dim);
    background:linear-gradient(180deg,rgba(0,18,0,.98),rgba(0,12,0,.94));
    z-index:30;
}
.record-directory-return {
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:39px;
    padding:6px 11px 6px 8px;
    border:1px solid var(--border);
    border-radius:4px;
    background:rgba(69,255,50,.075);
    color:var(--bright);
    font:inherit;
    cursor:pointer;
    text-align:left;
    box-shadow:inset 0 0 16px rgba(69,255,50,.045),0 0 9px rgba(69,255,50,.045);
    transition:background .12s ease,box-shadow .12s ease,transform .12s ease;
}
.record-directory-return:hover,.record-directory-return:focus-visible {
    outline:none;
    background:rgba(69,255,50,.13);
    box-shadow:inset 0 0 18px rgba(69,255,50,.08),0 0 12px rgba(69,255,50,.08);
}
.record-directory-return:active { transform:translateX(-1px); }
.record-return-arrow {
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    border:1px solid var(--border-dim);
    border-radius:3px;
    color:var(--bright);
    font-size:.82rem;
    line-height:1;
}
.record-return-copy { display:grid; grid-template-columns:auto auto; align-items:baseline; gap:7px; }
.record-return-copy strong { font-size:.63rem; letter-spacing:.07em; }
.record-return-copy small { color:var(--dim); font-size:.45rem; letter-spacing:.05em; }
.record-return-copy small::before { content:"["; }
.record-return-copy small::after { content:"]"; }
.record-navigation-context {
    align-self:center;
    min-width:0;
    display:flex;
    align-items:baseline;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:3px 8px;
    color:var(--dim);
    text-align:right;
}
.record-navigation-context span { font-size:.45rem; letter-spacing:.06em; }
.record-navigation-context strong { color:var(--bright); font-size:.61rem; letter-spacing:.075em; }
.record-scroll-top {
    position:absolute;
    right:13px;
    bottom:13px;
    z-index:60;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-width:62px;
    min-height:35px;
    padding:6px 9px;
    border:1px solid var(--border);
    border-radius:4px;
    background:rgba(0,24,0,.94);
    color:var(--bright);
    font:inherit;
    cursor:pointer;
    box-shadow:0 0 12px rgba(69,255,50,.08),inset 0 0 12px rgba(69,255,50,.045);
    opacity:.88;
    transition:opacity .12s ease,background .12s ease,transform .12s ease;
}
.record-scroll-top:hover,.record-scroll-top:focus-visible {
    outline:none;
    opacity:1;
    background:rgba(69,255,50,.12);
    transform:translateY(-1px);
}
.record-scroll-top span { font-size:.83rem; line-height:1; }
.record-scroll-top strong { font-size:.52rem; letter-spacing:.065em; }
.terminal-interface.game-app-mode .record-navigation,
.terminal-interface.game-app-mode .record-scroll-top { display:none !important; }
@media (max-width:700px) {
    .record-navigation { margin:-2px -1px 7px; gap:5px; padding-bottom:6px; }
    .record-directory-return { min-height:38px; padding:5px 8px 5px 6px; gap:6px; }
    .record-return-arrow { width:25px; height:25px; }
    .record-return-copy { display:block; }
    .record-return-copy strong { display:block; font-size:.56rem; line-height:1.15; }
    .record-return-copy small { display:block; margin-top:2px; font-size:.42rem; }
    .record-navigation-context { display:grid; align-content:center; gap:2px; }
    .record-navigation-context span { font-size:.39rem; }
    .record-navigation-context strong { font-size:.53rem; }
    .record-scroll-top { right:10px; bottom:10px; min-width:58px; min-height:38px; padding:7px 8px; }
}
@media (max-width:430px) {
    .record-navigation-context span { display:none; }
    .record-navigation-context strong { max-width:118px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ============================================================
   V24 // H.U.O.S. OPERATING SYSTEM LAYER
   Command prompt, breadcrumbs, progress, help, syslog, status
============================================================ */

/* Compact terminal utility controls */
.terminal-control-cluster {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:5px;
}
.terminal-control-cluster.sound-toggle-hidden { visibility:hidden; }
.terminal-utility-button {
    min-height:28px;
    padding:5px 8px;
    border:1px solid var(--border-dim);
    border-radius:4px;
    background:rgba(0,16,0,.6);
    color:var(--dim);
    font:inherit;
    font-size:.62rem;
    letter-spacing:.045em;
    cursor:pointer;
}
.terminal-utility-button:hover,
.terminal-utility-button:focus-visible {
    outline:none;
    color:var(--bright);
    border-color:var(--border);
    background:rgba(69,255,50,.07);
}

/* Directory selection prompt + optional command interface */
#directory-screen {
    display:none;
    min-height:0;
}
#directory-screen.active-view {
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
#directory-screen .terminal-menu {
    flex:0 0 auto;
}
.directory-selection-prompt {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    margin:8px 0 0;
    padding:5px 8px;
    border-left:2px solid var(--bright);
    background:linear-gradient(90deg,rgba(69,255,50,.055),transparent 68%);
    color:var(--dim);
    font-size:.62rem;
    letter-spacing:.055em;
}
.directory-selection-prompt strong { color:var(--bright); font-size:.67rem; }
.directory-selection-prompt i {
    margin-left:1px;
    color:var(--bright);
    font-style:normal;
    animation:blink .82s steps(1) infinite;
}
#directory-screen .menu-status {
    flex:0 0 auto;
    min-height:1.05em;
    margin:5px 0 0;
}

/* Record breadcrumb and scroll-position telemetry */
.record-navigation-middle {
    flex:1 1 auto;
    min-width:180px;
    align-self:center;
    display:grid;
    gap:5px;
}
.record-breadcrumbs {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--dim);
    font-size:.47rem;
    letter-spacing:.055em;
    text-align:center;
}
.record-breadcrumbs .crumb-active { color:var(--bright); }

/* Enhanced persistent system status */
.terminal-status-bar {
    align-items:center;
    flex-wrap:nowrap;
    gap:10px;
}
.status-item {
    white-space:nowrap;
}
.status-core { min-width:0; }
.status-online { color:var(--bright); }
.status-fixed { color:var(--text); }
.status-help {
    margin-left:auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Keyboard shortcut modal */
.keyboard-overlay[hidden],
.system-log-panel[hidden],
.system-notice[hidden] { display:none !important; }
.keyboard-overlay {
    position:absolute;
    inset:0;
    z-index:330;
    display:grid;
    place-items:center;
    padding:clamp(12px,3vw,34px);
    background:rgba(0,4,0,.82);
    backdrop-filter:blur(3px);
}
.keyboard-overlay-panel {
    width:min(820px,100%);
    max-height:min(650px,90%);
    overflow:auto;
    padding:16px;
    border:1px solid var(--border);
    border-radius:6px;
    background:linear-gradient(145deg,rgba(0,22,0,.98),rgba(0,8,0,.99));
    box-shadow:0 0 28px rgba(69,255,50,.12),inset 0 0 35px rgba(69,255,50,.035);
}
.overlay-panel-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    padding-bottom:10px;
    border-bottom:1px solid var(--border-dim);
}
.overlay-panel-header span { color:var(--dim); font-size:.52rem; letter-spacing:.07em; }
.overlay-panel-header h2 { margin:3px 0 0; color:var(--bright); font-size:1rem; letter-spacing:.085em; }
.overlay-panel-header button,
.system-log-header button,
.system-log-footer button {
    padding:5px 8px;
    border:1px solid var(--border-dim);
    border-radius:3px;
    background:rgba(69,255,50,.04);
    color:var(--text);
    font:inherit;
    font-size:.52rem;
    cursor:pointer;
}
.overlay-panel-header button:hover,
.overlay-panel-header button:focus-visible,
.system-log-header button:hover,
.system-log-header button:focus-visible,
.system-log-footer button:hover,
.system-log-footer button:focus-visible {
    outline:none;
    color:var(--bright);
    border-color:var(--border);
}
/* Collapsible system log drawer */
.system-log-panel {
    position:absolute;
    z-index:320;
    top:56px;
    right:12px;
    bottom:38px;
    width:min(430px,calc(100% - 24px));
    display:flex;
    flex-direction:column;
    min-height:0;
    border:1px solid var(--border);
    border-radius:5px;
    background:rgba(0,12,0,.985);
    box-shadow:-12px 12px 30px rgba(0,0,0,.5),0 0 18px rgba(69,255,50,.08),inset 0 0 26px rgba(69,255,50,.025);
}
.system-log-header {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px;
    border-bottom:1px solid var(--border-dim);
}
.system-log-header div { display:grid; gap:2px; }
.system-log-header span { color:var(--dim); font-size:.45rem; letter-spacing:.07em; }
.system-log-header strong { color:var(--bright); font-size:.68rem; letter-spacing:.06em; }
.system-log-entries {
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    padding:8px 10px;
    scrollbar-width:thin;
    scrollbar-color:var(--dim) transparent;
}
.system-log-entry {
    display:grid;
    grid-template-columns:70px minmax(0,1fr);
    gap:8px;
    padding:5px 0;
    border-bottom:1px dotted var(--border-faint);
    color:var(--text);
    font-size:.52rem;
    line-height:1.4;
}
.system-log-entry time { color:var(--dim); }
.system-log-entry strong { color:var(--text); font-weight:500; }
.system-log-entry.system-log-system strong { color:var(--bright); }
.system-log-footer {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:7px 10px;
    border-top:1px solid var(--border-dim);
    color:var(--dim);
    font-size:.43rem;
}

/* Low-frequency background system notices */
.system-notice {
    position:absolute;
    z-index:260;
    left:50%;
    top:48px;
    transform:translate(-50%,-8px);
    display:flex;
    align-items:center;
    gap:8px;
    max-width:min(620px,calc(100% - 100px));
    padding:6px 10px;
    border:1px solid var(--border-dim);
    border-radius:3px;
    background:rgba(0,20,0,.96);
    color:var(--text);
    box-shadow:0 0 14px rgba(69,255,50,.07);
    opacity:0;
}
.system-notice.system-notice-visible {
    animation:systemNoticeIn 2.7s ease both;
}
.system-notice span {
    color:var(--bright);
    font-size:.46rem;
    letter-spacing:.08em;
}
.system-notice strong {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.53rem;
    font-weight:500;
    letter-spacing:.045em;
}
@keyframes systemNoticeIn {
    0% { opacity:0; transform:translate(-50%,-8px); }
    10%,82% { opacity:.94; transform:translate(-50%,0); }
    100% { opacity:0; transform:translate(-50%,4px); }
}

/* Additional horizontal CRT fault band layered over the existing subtle glitch. */
.crt-glitch-band {
    position:absolute;
    z-index:245;
    left:0;
    right:0;
    top:45%;
    height:2px;
    pointer-events:none;
    opacity:0;
    background:rgba(140,255,102,.32);
    box-shadow:0 0 7px rgba(140,255,102,.24);
    mix-blend-mode:screen;
}
.crt-glitch-band.crt-glitch-band-active {
    animation:crtFaultBand .18s steps(3) both;
}
@keyframes crtFaultBand {
    0% { opacity:0; transform:translateX(-8%); }
    24% { opacity:.7; transform:translateX(5%); }
    48% { opacity:.18; transform:translateX(-2%); height:5px; }
    72% { opacity:.54; transform:translateX(3%); height:1px; }
    100% { opacity:0; transform:translateX(0); }
}

/* The game already supplies its own HUD; keep OS overlays out of the playfield. */
.terminal-interface.game-app-mode .system-notice,
.terminal-interface.game-app-mode .keyboard-overlay,
.terminal-interface.game-app-mode .system-log-panel { display:none !important; }

@media (max-width:900px) {
    .record-navigation-middle { min-width:120px; }
.terminal-status-bar .status-fixed:nth-of-type(3) { display:none; }
}

@media (max-width:700px) {
    .terminal-control-cluster { gap:3px; }
    .terminal-utility-button { min-height:26px; padding:4px 6px; font-size:.5rem; }
    .sound-toggle { min-height:26px; font-size:.52rem; }
    .directory-selection-prompt { margin-top:6px; padding:4px 6px; font-size:.53rem; }
    .directory-selection-prompt strong { font-size:.57rem; }
.record-navigation-middle { display:none; }
    .keyboard-overlay { padding:8px; }
    .keyboard-overlay-panel { padding:11px; }
    .overlay-panel-header h2 { font-size:.77rem; }
.system-log-panel { top:42px; right:7px; bottom:31px; width:calc(100% - 14px); }
    .system-notice { top:39px; max-width:calc(100% - 30px); }
    .terminal-status-bar { gap:6px; }
    .terminal-status-bar .status-fixed { display:none; }
}

@media (max-height:760px) and (min-width:701px) {
    #directory-screen .terminal-menu a { min-height:30px; padding-top:3px; padding-bottom:3px; }
    #directory-screen .terminal-menu { gap:2px; }
    .directory-selection-prompt { margin-top:5px; }
}

@media (prefers-reduced-motion: reduce) {
    .crt-glitch-band,
    .system-notice,
    .directory-selection-prompt i { animation:none !important; }
}

/* Keep the new directory OS controls offline until the personnel boot completes. */
#terminal-menu.boot-menu-hidden ~ .directory-selection-prompt,
#terminal-menu.boot-menu-hidden ~ .menu-status {
    display:none !important;
}

/* ============================================================
   V26 // UI CLEANUP
   Removed command prompt + record position telemetry.
   Simplified the Skills capability matrix.
============================================================ */

/* Directory no longer reserves space for a command console. */
#directory-screen.active-view {
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
#directory-screen .terminal-menu {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    grid-template-rows:none;
    align-content:start;
}
#directory-screen .directory-selection-prompt,
#directory-screen .menu-status {
    flex:0 0 auto;
}

/* Breadcrumbs stay; percentage/progress telemetry is gone. */
.record-navigation-middle {
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:180px;
}
.record-breadcrumbs {
    width:100%;
}

/* Cleaner capability landing screen. */
#skills .skills-dashboard {
    grid-template-columns:150px minmax(0,1fr);
    gap:12px;
    margin-top:8px;
}
#skills .skills-avatar-panel {
    padding:9px;
}
#skills .skills-avatar-frame {
    height:145px;
    margin-bottom:7px;
}
#skills .skills-avatar-frame img {
    width:125px;
}
#skills .skills-avatar-title {
    margin:3px 0 1px;
    font-size:.74rem;
}
#skills .skills-avatar-subtitle {
    margin:0 0 8px;
    text-align:center;
    color:var(--dim);
    font-size:.53rem;
    letter-spacing:.06em;
}
.skills-profile-summary {
    position:relative;
    z-index:1;
    display:grid;
    gap:6px;
    padding-top:7px;
    border-top:1px dotted var(--border-faint);
}
.skills-profile-summary p {
    display:grid;
    gap:2px;
    margin:0;
}
.skills-profile-summary span {
    color:var(--dim);
    font-size:.48rem;
    letter-spacing:.06em;
}
.skills-profile-summary strong {
    color:var(--text);
    font-size:.59rem;
    font-weight:400;
    line-height:1.3;
}

#skills
#skills .perk-card-grid {
    gap:7px;
}
#skills .perk-card {
    min-height:148px;
    padding:10px 8px 9px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
#skills .perk-icon {
    width:58px;
    height:58px;
    margin:0 auto 8px;
}
#skills .perk-card h3 {
    min-height:0;
    margin:0 !important;
    font-size:.68rem;
}
#skills .perk-card-primary::before {
    font-size:.40rem;
}


@media (max-width:1180px) {
    #skills .skills-dashboard { grid-template-columns:135px minmax(0,1fr); }
    #skills .perk-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px) {
    #skills .skills-dashboard { grid-template-columns:1fr; }
    #skills .skills-avatar-panel {
        display:grid;
        grid-template-columns:100px minmax(0,1fr);
        column-gap:10px;
        align-items:center;
    }
    #skills .skills-avatar-frame {
        grid-row:span 3;
        height:110px;
        margin:0;
        border-bottom:0;
        border-right:1px solid var(--border-faint);
    }
    #skills .skills-avatar-frame img { width:88px; }
    #skills .skills-avatar-title,
    #skills .skills-avatar-subtitle { text-align:left; }
    .skills-profile-summary { padding-top:5px; }
    #skills .perk-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    #skills .perk-card { min-height:132px; }
    .skills-reference-row { grid-template-columns:92px minmax(0,1fr); }
}
@media (max-width:470px) {
    #skills .perk-card-grid { grid-template-columns:1fr; }
    #skills .perk-card { min-height:118px; }
    .skills-reference-row { grid-template-columns:1fr; gap:3px; }
}

/* Restore normal directory-row sizing now that the command console is gone. */
#directory-screen .terminal-menu a {
    height:auto;
    min-height:36px;
    padding:6px 10px;
}
@media (max-height:720px) {
    #directory-screen .terminal-menu { gap:3px; }
    #directory-screen .terminal-menu a { min-height:32px; padding:4px 8px; }
}


/* V28 // SECOND GAME // CODEWORD */
#codeword-game.game-visible{display:flex;width:100%;height:100%;min-height:0;}
.terminal-interface.game-app-mode #codeword-game.game-visible{display:flex;flex:1 1 auto;width:100%;height:100%;min-height:0;}
.codeword-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(290px,.72fr);gap:14px;flex:1 1 auto;min-height:0;}
.codeword-stage{display:flex;align-items:center;justify-content:center;padding:18px;}
.codeword-board{display:grid;grid-template-rows:repeat(6,1fr);gap:10px;width:min(440px,100%);}
.codeword-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.codeword-cell{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px solid var(--border);border-radius:6px;background:rgba(0,18,0,.42);color:var(--bright);font-size:1.55rem;font-weight:700;letter-spacing:.08em;box-shadow:inset 0 0 14px rgba(69,255,50,.02);transition:background .12s linear,border-color .12s linear,color .12s linear,transform .12s ease-out;}
.codeword-cell.filled{border-color:var(--bright);}
.codeword-cell.correct{background:rgba(140,255,102,.22);border-color:var(--bright);box-shadow:0 0 10px rgba(140,255,102,.16), inset 0 0 14px rgba(140,255,102,.10);}
.codeword-cell.present{background:rgba(140,255,102,.11);border-color:rgba(140,255,102,.7);}
.codeword-cell.absent{background:rgba(0,8,0,.78);border-color:rgba(140,255,102,.16);color:var(--dim);}
.codeword-cell.current{transform:translateY(-1px);}
.codeword-brief{margin:10px 0 12px;padding:10px 11px;border:1px solid var(--border-faint);border-radius:5px;background:rgba(0,14,0,.34);color:var(--text);font-size:.63rem;line-height:1.6;}
.codeword-brief p{margin:0 0 8px;}
.codeword-brief p:last-child{margin-bottom:0;}
.codeword-keyboard{display:grid;gap:6px;margin-top:12px;}
.codeword-keyboard-row{display:flex;justify-content:center;gap:6px;}
.codeword-key{min-width:30px;padding:8px 6px;border:1px solid var(--border-dim);border-radius:4px;background:rgba(0,16,0,.7);color:var(--bright);font:inherit;font-size:.66rem;cursor:pointer;transition:border-color .12s linear,background .12s linear,transform .12s ease-out;}
.codeword-key:hover,.codeword-key:focus-visible{border-color:var(--bright);background:rgba(69,255,50,.08);outline:none;transform:translateY(-1px);}
.codeword-key.wide{min-width:64px;}
.codeword-key.key-correct{background:rgba(140,255,102,.2);border-color:var(--bright);}
.codeword-key.key-present{background:rgba(140,255,102,.1);border-color:rgba(140,255,102,.65);}
.codeword-key.key-absent{background:rgba(0,8,0,.78);border-color:rgba(140,255,102,.16);color:var(--dim);}
.codeword-side-panel{display:flex;flex-direction:column;}
@media (max-width:920px){.codeword-layout{grid-template-columns:1fr;}.codeword-stage{min-height:unset;}.codeword-board{width:min(420px,100%);} .codeword-key{min-width:28px;padding:8px 5px;font-size:.62rem;}}
@media (max-width:560px){.codeword-board{gap:7px;}.codeword-row{gap:7px;}.codeword-cell{font-size:1.2rem;}.codeword-keyboard-row{gap:4px;flex-wrap:wrap;}.codeword-key{min-width:32px;padding:7px 4px;} .codeword-key.wide{min-width:58px;}}


/* ============================================================
   V29 // CODEWORD VALIDATION + RESULT CLARITY
============================================================ */
.codeword-emblem {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 22px);
    grid-template-rows: repeat(2, 22px);
    gap: 4px;
    align-content: center;
    justify-content: center;
    width: 86px;
    height: 58px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: rgba(0, 18, 0, .72);
    box-shadow: inset 0 0 18px rgba(140,255,102,.05), 0 0 10px rgba(140,255,102,.05);
}
.codeword-emblem span {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-dim);
    background: rgba(69,255,50,.045);
    color: var(--bright);
    font-size: .58rem;
    font-weight: 700;
    line-height: 1;
}
.codeword-emblem span:nth-child(5) {
    background: var(--bright);
    color: #001000;
    box-shadow: 0 0 8px rgba(140,255,102,.45);
}

/* Solid bright = exact match; stripes = present elsewhere; dark = absent. */
.codeword-cell.correct {
    border: 2px solid var(--bright);
    background: var(--bright);
    color: #001000;
    text-shadow: none;
    box-shadow: 0 0 13px rgba(140,255,102,.42), inset 0 0 0 1px rgba(0,20,0,.22);
}
.codeword-cell.present {
    border: 2px solid var(--bright);
    background: repeating-linear-gradient(135deg, rgba(140,255,102,.28) 0 7px, rgba(0,20,0,.88) 7px 14px);
    color: var(--bright);
    text-shadow: 0 0 6px rgba(140,255,102,.5);
    box-shadow: inset 0 0 12px rgba(140,255,102,.05);
}
.codeword-cell.absent {
    border: 1px solid rgba(140,255,102,.16);
    background: rgba(0,7,0,.88);
    color: rgba(140,255,102,.38);
    text-shadow: none;
}
.codeword-key.key-correct {
    border: 2px solid var(--bright);
    background: var(--bright);
    color: #001000;
    font-weight: 700;
}
.codeword-key.key-present {
    border: 2px solid var(--bright);
    background: repeating-linear-gradient(135deg, rgba(140,255,102,.24) 0 5px, rgba(0,20,0,.88) 5px 10px);
    color: var(--bright);
}
.codeword-key.key-absent {
    border-color: rgba(140,255,102,.13);
    background: rgba(0,7,0,.88);
    color: rgba(140,255,102,.34);
}
.codeword-legend {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}
.codeword-legend > span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--dim);
    font-size: .56rem;
    letter-spacing: .035em;
}
.legend-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 3px;
    font-style: normal;
    font-weight: 700;
}
.legend-correct {
    border: 2px solid var(--bright);
    background: var(--bright);
    color: #001000;
}
.legend-present {
    border: 2px solid var(--bright);
    background: repeating-linear-gradient(135deg, rgba(140,255,102,.28) 0 5px, rgba(0,20,0,.88) 5px 10px);
    color: var(--bright);
}
.legend-absent {
    border: 1px solid rgba(140,255,102,.16);
    background: rgba(0,7,0,.88);
    color: rgba(140,255,102,.38);
}
.codeword-invalid-row { animation: codewordInvalid .34s steps(2); }
.codeword-invalid-row .codeword-cell {
    border-color: var(--bright);
    box-shadow: 0 0 11px rgba(140,255,102,.28);
}
@keyframes codewordInvalid {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.codeword-win-overlay[hidden] { display: none !important; }
.codeword-win-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0,7,0,.91);
    backdrop-filter: blur(1px);
}
.codeword-win-panel {
    width: min(455px, 100%);
    padding: 22px 20px;
    border: 2px solid var(--bright);
    border-radius: 7px;
    background: rgba(0,18,0,.96);
    text-align: center;
    box-shadow: 0 0 32px rgba(140,255,102,.16), inset 0 0 25px rgba(140,255,102,.045);
}
.codeword-win-kicker {
    color: var(--dim);
    font-size: .56rem;
    letter-spacing: .08em;
}
.codeword-win-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 14px auto 10px;
    border: 2px solid var(--bright);
    border-radius: 50%;
    background: var(--bright);
    color: #001000;
    font-size: 1.45rem;
    font-weight: 700;
    box-shadow: 0 0 18px rgba(140,255,102,.35);
}
.codeword-win-panel h3 {
    margin: 0 0 12px;
    color: var(--bright);
    font-size: 1.05rem;
    letter-spacing: .1em;
}
.codeword-win-panel p {
    margin: 5px 0;
    color: var(--text);
    font-size: .68rem;
}
.codeword-win-panel p strong { color: var(--bright); }
.codeword-win-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 17px;
}
.codeword-win-actions .game-action-button,
.codeword-win-actions .return-button { margin: 0; }

@media (max-width: 560px) {
    .codeword-emblem { grid-template-columns: repeat(3, 18px); grid-template-rows: repeat(2, 18px); width: 72px; height: 50px; }
    .codeword-emblem span { font-size: .5rem; }
}


/* ============================================================
   V30 // INLINE SKILLS + CONTACT SCALE + GAME TABS
============================================================ */

/* SKILLS: selectable capability cards with details staying in place. */
#skills
#skills .skill-record-button.keyboard-selected {
    transform: translateY(-2px);
    border-color: var(--bright);
    background:
        linear-gradient(180deg, rgba(69,255,50,.10), transparent 48%),
        var(--skills-panel-strong);
    box-shadow:
        inset 0 0 26px rgba(69,255,50,.075),
        0 0 12px rgba(69,255,50,.10);
}
#skills .skill-record-button.keyboard-selected::after {
    content: "ACTIVE";
    left: 8px;
    top: 6px;
    color: var(--bright);
    font-size: .40rem;
    letter-spacing: .07em;
}
.skills-inline-detail {
    margin-top: 10px;
    border: 1px solid var(--border-dim);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(69,255,50,.028), transparent 32%),
        rgba(0,14,0,.40);
    box-shadow: inset 0 0 24px rgba(69,255,50,.025);
}
.skill-inline-record[hidden] {
    display: none !important;
}
.skill-inline-record {
    padding: 11px 12px 12px;
}
.skill-inline-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border-faint);
}
.skill-inline-heading span {
    color: var(--dim);
    font-size: .50rem;
    letter-spacing: .075em;
}
.skill-inline-heading strong {
    color: var(--bright);
    font-size: .68rem;
    letter-spacing: .065em;
    text-align: right;
}
.skill-inline-summary {
    margin: 9px 0 10px;
    color: var(--text);
    font-size: .64rem;
    line-height: 1.55;
}
.skill-inline-columns {
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(230px,.8fr);
    gap: 10px;
}
.skill-inline-columns section {
    min-width: 0;
    padding: 8px 9px;
    border-left: 2px solid var(--border-faint);
    background: rgba(69,255,50,.018);
}
.skill-inline-columns h4 {
    margin: 0 0 6px;
    color: var(--bright);
    font-size: .55rem;
    letter-spacing: .06em;
}
.skill-inline-columns h4:not(:first-child) {
    margin-top: 10px;
}
.skill-inline-columns p,
.skill-inline-columns li {
    color: var(--text);
    font-size: .56rem;
    line-height: 1.48;
}
.skill-inline-columns p {
    margin: 0;
}
.skill-inline-columns ul {
    margin: 0;
    padding-left: 17px;
}
.skill-inline-columns li + li {
    margin-top: 2px;
}
@media (max-width: 820px) {
    .skill-inline-columns { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .skill-inline-heading { flex-direction: column; gap: 3px; }
    .skill-inline-heading strong { text-align: left; }
}

/* CONTACT: use the available space instead of leaving a tiny text block. */
.contact-console {
    width: min(900px, 100%);
    margin: clamp(22px, 5vh, 46px) auto 0;
    padding: clamp(14px, 2.2vw, 22px);
    border: 1px solid var(--border-dim);
    border-radius: 7px;
    background:
        radial-gradient(circle at 50% 0%, rgba(69,255,50,.055), transparent 42%),
        rgba(0,14,0,.42);
    box-shadow: inset 0 0 30px rgba(69,255,50,.025);
}
.contact-console-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-dim);
}
.contact-console-heading span {
    color: var(--dim);
    font-size: .60rem;
    letter-spacing: .07em;
}
.contact-console-heading strong {
    color: var(--bright);
    font-size: .78rem;
    letter-spacing: .07em;
}
.contact-channel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    margin-top: 14px;
}
.contact-channel {
    min-height: 170px;
    padding: 14px;
    border: 1px solid var(--border-faint);
    border-radius: 6px;
    background: rgba(0,18,0,.42);
    box-shadow: inset 0 0 18px rgba(69,255,50,.018);
}
.contact-channel-id {
    color: var(--dim);
    font-size: .55rem;
    letter-spacing: .07em;
}
#contact .contact-channel h3 {
    margin: 12px 0 10px;
    font-size: 1.05rem;
    letter-spacing: .10em;
}
.contact-channel-copy,
#contact .email-privacy-note {
    color: var(--dim);
    font-size: .68rem;
    line-height: 1.55;
}
#contact .contact-email-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 10px;
    margin: 0;
}
#contact .email-display {
    min-height: 1.35em;
    color: var(--bright);
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: .035em;
    overflow-wrap: anywhere;
}
#contact .inline-terminal-button,
.contact-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    background: rgba(0,16,0,.58);
    color: var(--bright);
    font: inherit;
    font-size: .70rem;
    letter-spacing: .045em;
    text-decoration: none;
    cursor: pointer;
}
#contact .inline-terminal-button:hover,
#contact .inline-terminal-button:focus-visible,
.contact-link-button:hover,
.contact-link-button:focus-visible {
    outline: none;
    border-color: var(--bright);
    background: rgba(69,255,50,.07);
    box-shadow: inset 0 0 12px rgba(69,255,50,.04);
}
.contact-console-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 9px;
    border-top: 1px dotted var(--border-faint);
    color: var(--dim);
    font-size: .55rem;
    letter-spacing: .06em;
}
.contact-console-footer strong {
    color: var(--bright);
    font-weight: 400;
}
@media (max-width: 680px) {
    .contact-console { margin-top: 14px; }
    .contact-console-heading { flex-direction: column; gap: 3px; }
    .contact-channel-grid { grid-template-columns: 1fr; }
    .contact-channel { min-height: 0; }
}

#software-directory > .project-status {
    margin-top: 8px;
    font-size: .55rem;
}
@media (max-width: 760px) {
    .game-tab-grid { grid-template-columns: 1fr; }
    #software .game-tab { min-height: 102px; }
}
@media (max-width: 520px) {
    #software .game-tab { grid-template-columns: 58px minmax(0,1fr); }
    .game-tab-icon { width: 54px; height: 54px; }
    #software .game-tab .software-version { display: none; }
    .game-library-record-heading { flex-direction: column; gap: 3px; }
}


/* ============================================================
   V31 // SKILLS + GAMES SIMPLIFICATION
============================================================ */
/* Four core capability cards, no separate S1000D card. */
#skills .perk-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
#skills .skill-inline-record {
    padding: 15px 16px 17px;
}
#skills .skill-inline-heading span {
    font-size: .57rem;
}
#skills .skill-inline-heading strong {
    font-size: .80rem;
}
#skills .skill-inline-summary {
    margin: 12px 0 13px;
    font-size: .80rem;
    line-height: 1.62;
}
#skills .skill-inline-columns {
    gap: 13px;
}
#skills .skill-inline-columns section {
    padding: 11px 12px;
}
#skills .skill-inline-columns h4 {
    margin-bottom: 8px;
    font-size: .66rem;
}
#skills .skill-inline-columns h4:not(:first-child) {
    margin-top: 14px;
}
#skills .skill-inline-columns p,
#skills .skill-inline-columns li {
    font-size: .70rem;
    line-height: 1.58;
}
#skills .skill-inline-columns li + li {
    margin-top: 4px;
}

/* Game cards are now the launch controls; there is no software-record panel. */
#software-directory {
    padding-top: 8px;
}
#software .game-tab {
    cursor: pointer;
    min-height: 138px;
}
#software .game-tab.keyboard-selected::after {
    content: "LAUNCH";
}
#software .game-tab:hover,
#software .game-tab:focus-visible {
    transform: translateY(-2px);
}

@media (max-width: 1180px) {
    #skills .perk-card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
    #software .game-tab { min-height: 112px; }
}
@media (max-width: 470px) {
    #skills .perk-card-grid { grid-template-columns: 1fr; }
    #skills .skill-inline-record { padding: 12px; }
    #skills .skill-inline-summary { font-size: .76rem; }
    #skills .skill-inline-columns p,
    #skills .skill-inline-columns li { font-size: .68rem; }
}


/* V32 // HELP IS THE SINGLE NAVIGATION REFERENCE */
.terminal-status-bar .status-help{display:none!important;}
.record-return-copy small{display:none!important;}


/* ============================================================
   V33 // MOBILE USABILITY PASS
   More breathing room for records, automatic detail navigation,
   and a fully touch-operable / scrollable CODEWORD layout.
============================================================ */
@media (max-width: 760px) {
    /* Use more of the physical phone display while keeping the CRT frame. */
    body { padding: 3px; }
    .terminal-frame { padding: 3px; border-radius: 11px; }
    .terminal { border-radius: 8px; }
    .terminal-interface { padding: 9px 8px; }
    .terminal-workspace { margin-top: 8px; padding: 10px 9px; }
    .terminal-section { padding-right: 2px; }

    /* Mobile records get a little more visual separation instead of being packed together. */
    .record-navigation { margin: -1px 0 10px; padding-bottom: 8px; }
    .record-header { display: block; padding-bottom: 9px; }
    .record-header h2 { font-size: .96rem; line-height: 1.3; letter-spacing: .075em; }
    .directory-level { margin-top: 4px; font-size: .56rem; }
    .record-metadata { margin: 8px 0 13px; gap: 4px 10px; }
    .record-metadata p { font-size: .58rem; }
    .terminal-section > p,
    .terminal-section li { line-height: 1.65; }

    /* Reduce decorative chrome in record navigation on small screens. */
    .record-navigation-middle { min-width: 0; flex: 1 1 auto; }
    .record-breadcrumbs { font-size: .47rem; line-height: 1.35; }
    .record-navigation-context { min-width: 0; }

    /* SKILLS: compact selectable cards, roomy explanation area. */
    #skills .skills-dashboard { display: block; margin-top: 7px; }
    #skills .skills-avatar-panel {
        display: grid;
        grid-template-columns: 72px minmax(0,1fr);
        column-gap: 12px;
        row-gap: 2px;
        padding: 9px 10px;
        margin-bottom: 12px;
    }
    #skills .skills-avatar-frame {
        grid-row: 1 / span 4;
        width: 72px;
        height: 86px;
        margin: 0;
        border-right: 1px solid var(--border-faint);
        border-bottom: 0;
    }
    #skills .skills-avatar-frame img { width: 68px; }
    #skills .skills-avatar-title { margin: 3px 0 0; font-size: .72rem; text-align: left; }
    #skills .skills-avatar-subtitle { margin: 0; font-size: .52rem; text-align: left; }
    #skills .skills-profile-summary { gap: 4px; padding-top: 5px; }
    #skills .skills-profile-summary span { font-size: .45rem; }
    #skills .skills-profile-summary strong { font-size: .57rem; }
    #skills .skills-console-section-title { margin-bottom: 7px; }
    #skills .perk-card-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 8px;
    }
    #skills .perk-card {
        min-height: 112px;
        padding: 9px 7px;
    }
    #skills .perk-icon { width: 49px; height: 49px; margin-bottom: 7px; }
    #skills .perk-card h3 { font-size: .61rem; line-height: 1.25; }
    #skills .skill-inline-record {
        margin-top: 13px;
        padding: 15px 14px 17px;
        border-radius: 6px;
    }
    #skills .skill-inline-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        padding-bottom: 9px;
    }
    #skills .skill-inline-heading span { font-size: .54rem; }
    #skills .skill-inline-heading strong { font-size: .86rem; }
    #skills .skill-inline-summary { font-size: .78rem; line-height: 1.7; }
    #skills .skill-inline-columns { grid-template-columns: 1fr; gap: 10px; }
    #skills .skill-inline-columns section { padding: 12px; }
    #skills .skill-inline-columns h4 { font-size: .68rem; }
    #skills .skill-inline-columns p,
    #skills .skill-inline-columns li { font-size: .72rem; line-height: 1.68; }

    /* HOBBIES & INTERESTS: selector first, then a clearly separate detail record. */
    .hobbies-console-header { margin-bottom: 12px; padding: 8px 9px; }
    .hobbies-console { display: block; }
    .hobby-selector-panel { padding: 10px; margin-bottom: 13px; }
    .hobby-card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
    .hobby-card {
        grid-template-columns: 38px minmax(0,1fr);
        min-height: 78px;
        padding: 9px 7px;
        column-gap: 7px;
    }
    .hobby-card-icon { width: 36px; height: 36px; font-size: .55rem; }
    .hobby-card strong { padding-right: 10px; font-size: .59rem; line-height: 1.22; }
    .hobby-card small { font-size: .42rem; line-height: 1.3; }
    .hobby-card.keyboard-selected::after { display: none; }
    .hobby-detail-panel {
        min-height: 0;
        padding: 13px 13px 34px;
    }
    .hobby-detail { padding-top: 13px; }
    .hobby-detail h3 { font-size: 1rem; }
    .hobby-detail > p { font-size: .76rem; line-height: 1.72; margin-bottom: 16px; }
    .hobby-detail-readout { padding: 9px 0; }
    .hobby-detail-readout span { font-size: .54rem; }
    .hobby-detail-readout strong { font-size: .64rem; line-height: 1.45; }

    /* CODEWORD: the game itself becomes the scroll container on phones. */
    #codeword-game.game-visible {
        display: block;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--dim) transparent;
    }
    #codeword-game .codeword-shell {
        display: flex;
        width: 100%;
        height: auto !important;
        min-height: 100%;
        padding: 8px !important;
        overflow: visible !important;
    }
    #codeword-game .game-hero {
        flex: 0 0 auto;
        min-height: 46px;
        padding: 3px 2px 7px;
        gap: 7px;
    }
    #codeword-game .codeword-emblem {
        grid-template-columns: repeat(3, 15px);
        grid-template-rows: repeat(2, 15px);
        width: 62px;
        height: 43px;
        gap: 3px;
        padding: 4px;
    }
    #codeword-game .codeword-emblem span { font-size: .43rem; }
    #codeword-game .game-logo-title { font-size: .93rem; letter-spacing: .06em; }
    #codeword-game .game-arcade-label { font-size: .40rem; }
    #codeword-game .codeword-layout {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        gap: 9px;
        min-height: 0;
    }
    #codeword-game .codeword-stage {
        flex: 0 0 auto;
        min-height: 0;
        padding: 9px 5px;
    }
    #codeword-game .codeword-board {
        width: min(300px, 88vw);
        gap: 5px;
        margin: 0 auto;
    }
    #codeword-game .codeword-row { gap: 5px; }
    #codeword-game .codeword-cell {
        font-size: 1.15rem;
        border-radius: 4px;
    }
    #codeword-game .codeword-side-panel {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    #codeword-game .game-status-panel {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        width: 100%;
        min-width: 0;
        padding: 8px 9px;
    }
    #codeword-game .game-status-panel .game-status-label { grid-column: 1; grid-row: 1; }
    #codeword-game .game-status-panel > strong { grid-column: 1; grid-row: 2; font-size: .68rem; }
    #codeword-game .game-data-key { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
    #codeword-game .codeword-keyboard {
        order: 2;
        width: 100%;
        margin: 0;
        padding: 9px 5px max(9px, env(safe-area-inset-bottom));
        border: 1px solid var(--border-faint);
        border-radius: 6px;
        background: rgba(0,12,0,.92);
    }
    #codeword-game .codeword-keyboard-row {
        flex-wrap: nowrap !important;
        width: 100%;
        gap: 3px;
    }
    #codeword-game .codeword-key {
        flex: 1 1 0;
        min-width: 0 !important;
        height: 42px;
        padding: 5px 2px;
        font-size: .63rem;
        touch-action: manipulation;
    }
    #codeword-game .codeword-key.wide { flex: 1.55 1 0; min-width: 0 !important; }
    #codeword-game .codeword-brief {
        order: 3;
        margin: 0;
        padding: 9px;
        font-size: .60rem;
    }
    #codeword-game .codeword-legend {
        grid-template-columns: 1fr;
        gap: 5px;
    }
    #codeword-game .codeword-legend > span { font-size: .52rem; }
    #codeword-game .legend-tile { width: 23px; height: 23px; }
    #codeword-game .game-footer-buttons {
        order: 4;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        margin-top: 0;
    }
    #codeword-game .game-footer-buttons .return-button {
        display: block;
        min-height: 42px;
        padding: 8px 6px;
        font-size: .57rem;
    }
    #codeword-game .codeword-win-overlay {
        position: fixed;
        inset: 8px;
        padding: 10px;
        border-radius: 8px;
    }
    #codeword-game .codeword-win-panel { padding: 18px 13px; }

    /* Game library cards themselves get some breathing room too. */
    .game-tab-grid { gap: 10px; }
    #software .game-tab { min-height: 116px; padding: 11px; }
}

@media (max-width: 430px) {
    #skills .perk-card-grid,
    .hobby-card-grid { grid-template-columns: 1fr 1fr; }
    #skills .perk-card { min-height: 105px; }
    .hobby-card { min-height: 74px; }
    .hobby-card-index { font-size: .40rem; }
    #codeword-game .codeword-board { width: min(276px, 88vw); }
    #codeword-game .codeword-key { height: 40px; font-size: .58rem; }
}

@media (max-width: 350px) {
    #skills .perk-card-grid,
    .hobby-card-grid { grid-template-columns: 1fr; }
    #codeword-game .codeword-board { width: min(250px, 86vw); }
    #codeword-game .codeword-key { height: 38px; font-size: .54rem; }
}

/* ============================================================
   V34 // MOBILE NATIVE CODEWORD INPUT + REVISED HI BRAND MARK
============================================================ */

/* The generated orbital mark is taller than the previous logo, so give it
   enough room to read without letting it participate in page layout. */
.persistent-hi-logo {
    width: 58px;
    height: 40px;
    top: 5px;
    right: 10px;
}
.terminal-header-top { padding-right: 66px; }

/* Invisible text field overlays the puzzle stage on touch devices. It lets
   iOS/Android provide the native keyboard while the grid stays on screen. */
.codeword-native-input {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    outline: 0;
    opacity: 0;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    font-size: 16px;
    pointer-events: none;
}

@media (max-width: 760px) {
    .persistent-hi-logo {
        width: 48px;
        height: 34px;
        top: 5px;
        right: 6px;
    }
    .terminal-header-top { padding-right: 54px; }
    .huos-mobile-hero-logo {
        width: min(80vw, 315px);
        max-height: min(32vh, 245px);
    }

    /* Native phone keyboard replaces the web keyboard completely. */
    #codeword-game .codeword-native-input {
        pointer-events: auto;
        touch-action: manipulation;
    }
    #codeword-game .codeword-keyboard,
    #codeword-game .codeword-brief,
    #codeword-game .game-controls-panel {
        display: none !important;
    }

    /* Keep CODEWORD inside the visible mobile viewport rather than turning
       the whole game into a tall scroll page. */
    #codeword-game.game-visible {
        display: flex;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    #codeword-game .codeword-shell {
        display: flex;
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
        padding: 5px 6px max(5px, env(safe-area-inset-bottom)) !important;
        overflow: hidden !important;
    }
    #codeword-game .game-hero {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 1px 1px 5px;
        gap: 6px;
    }
    #codeword-game .codeword-emblem {
        grid-template-columns: repeat(3, 13px);
        grid-template-rows: repeat(2, 13px);
        width: 55px;
        height: 38px;
        gap: 2px;
        padding: 3px;
    }
    #codeword-game .codeword-emblem span { font-size: .38rem; }
    #codeword-game .game-logo-title { font-size: .82rem; line-height: 1.05; letter-spacing: .045em; }
    #codeword-game .game-logo-subtitle { display: none; }
    #codeword-game .game-arcade-label { font-size: .36rem; }
    #codeword-game .game-system-label { display: none; }

    /* Let the side-panel children participate directly in the mobile flex
       stack so status can sit above the grid without changing desktop HTML. */
    #codeword-game .codeword-layout {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 4px;
        min-height: 0;
        overflow: hidden;
    }
    #codeword-game .codeword-side-panel { display: contents; }
    #codeword-game .game-status-panel {
        order: 1;
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 5px 7px;
    }
    #codeword-game .game-status-panel .game-status-label {
        grid-column: 1;
        grid-row: 1;
        font-size: .42rem;
    }
    #codeword-game .game-status-panel > strong {
        grid-column: 1;
        grid-row: 2;
        font-size: .58rem;
        line-height: 1.2;
    }
    #codeword-game .game-data-key {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        margin: 0;
        font-size: .47rem;
    }

    #codeword-game .codeword-stage {
        order: 2;
        flex: 1 1 auto;
        min-height: 0;
        padding: 3px;
        overflow: hidden;
    }
    #codeword-game .codeword-board {
        /* visualViewport is written into --codeword-vh by JavaScript. As
           the device keyboard opens, the puzzle scales down with it. */
        width: clamp(170px, calc((var(--codeword-vh, 520px) - 105px) * .72), 280px);
        max-width: 86vw;
        gap: 4px;
        margin: 0 auto;
    }
    #codeword-game .codeword-row { gap: 4px; }
    #codeword-game .codeword-cell {
        font-size: clamp(.82rem, 4vw, 1.08rem);
        border-radius: 4px;
    }

    #codeword-game .game-footer-buttons {
        order: 3;
        flex: 0 0 auto;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        margin: 0;
    }
    #codeword-game .game-footer-buttons .return-button {
        display: block;
        min-height: 32px;
        margin: 0;
        padding: 5px 4px;
        font-size: .48rem;
    }

    /* Once the device keyboard is active, remove nonessential controls so
       the grid gets every available vertical pixel. */
    #codeword-game.codeword-native-active .game-footer-buttons { display: none !important; }
    #codeword-game.codeword-native-active .game-hero { min-height: 34px; padding-bottom: 2px; }
    #codeword-game.codeword-native-active .codeword-emblem { width: 48px; height: 32px; }
    #codeword-game.codeword-native-active .game-logo-title { font-size: .72rem; }
    #codeword-game.codeword-native-active .game-arcade-label { display: none; }

    #codeword-game .codeword-win-overlay {
        position: absolute;
        inset: 0;
        padding: 8px;
    }
}


/* ============================================================
   V35 // PROFESSIONAL RECORD POLISH
============================================================ */
.record-revision-line {
    margin: 4px 0 8px;
    color: var(--dim);
    font-size: .54rem;
    letter-spacing: .055em;
}

/* PROFILE // PERSONNEL DOSSIER */
.profile-dossier {
    display: grid;
    gap: 12px;
    margin-top: 10px;
}
.profile-dossier-heading,
.experience-progression-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--border-dim);
    border-radius: 5px;
    background: rgba(69,255,50,.035);
    color: var(--dim);
    font-size: .6rem;
    letter-spacing: .065em;
}
.profile-dossier-heading strong,
.experience-progression-heading strong { color: var(--bright); }
.profile-readout-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
}
.profile-readout {
    min-height: 74px;
    padding: 10px 11px;
    border: 1px solid var(--border-faint);
    border-radius: 5px;
    background: rgba(0,16,0,.38);
    box-shadow: inset 0 0 18px rgba(69,255,50,.025);
}
.profile-readout span {
    display: block;
    margin-bottom: 7px;
    color: var(--dim);
    font-size: .55rem;
    letter-spacing: .07em;
}
.profile-readout strong {
    color: var(--bright);
    font-size: .73rem;
    line-height: 1.4;
    letter-spacing: .035em;
}
.profile-summary-panel,
.profile-education-panel,
.profile-resume-panel {
    padding: 13px 14px;
    border: 1px solid var(--border-dim);
    border-radius: 6px;
    background: linear-gradient(180deg,rgba(69,255,50,.025),transparent 55%),rgba(0,13,0,.46);
}
.profile-panel-label {
    margin-bottom: 9px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-faint);
    color: var(--bright);
    font-size: .61rem;
    letter-spacing: .075em;
}
.profile-summary-panel p,
.profile-education-panel p {
    margin: 0 0 9px;
    color: var(--text);
    font-size: .72rem;
    line-height: 1.65;
}
.profile-summary-panel p:last-child,
.profile-education-panel p:last-child { margin-bottom: 0; }
.profile-education-panel h3 { margin: 0 0 9px; color: var(--bright); font-size: .82rem; }
.profile-lower-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 10px; }
.profile-resume-panel { margin: 0; }

/* EXPERIENCE // CAREER TIMELINE */
.experience-console { display: grid; gap: 12px; margin-top: 10px; }
.experience-progression-rail {
    display: grid;
    grid-template-columns: minmax(0,1fr) 150px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-dim);
    border-radius: 6px;
    background: rgba(0,15,0,.38);
}
.experience-milestone {
    position: relative;
    min-height: 92px;
    padding: 11px 12px;
    border: 1px solid var(--border-faint);
    border-radius: 5px;
    background: rgba(69,255,50,.025);
}
.experience-milestone::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 16px;
    width: 8px;
    height: 8px;
    border: 1px solid var(--bright);
    border-radius: 50%;
    background: #001000;
    box-shadow: 0 0 8px rgba(140,255,102,.45);
}
.experience-milestone-current { border-color: var(--border); box-shadow: inset 0 0 20px rgba(69,255,50,.04); }
.experience-year { display: block; color: var(--dim); font-size: .57rem; letter-spacing: .07em; }
.experience-milestone strong { display: block; margin: 7px 0 5px; color: var(--bright); font-size: .77rem; }
.experience-milestone small { color: var(--text); font-size: .58rem; }
.experience-rail-line { position: relative; height: 1px; background: var(--border-dim); text-align: center; }
.experience-rail-line::before,
.experience-rail-line::after { content:""; position:absolute; top:-3px; width:7px; height:7px; border-top:1px solid var(--bright); border-right:1px solid var(--bright); transform:rotate(45deg); }
.experience-rail-line::before { left: 45%; }
.experience-rail-line::after { right: 2px; }
.experience-rail-line span { position: relative; top: -13px; padding: 2px 7px; background: #001000; color: var(--dim); font-size: .49rem; letter-spacing: .06em; }
.experience-role-card {
    border: 1px solid var(--border-dim);
    border-radius: 6px;
    background: linear-gradient(180deg,rgba(69,255,50,.025),transparent 25%),rgba(0,13,0,.44);
    overflow: hidden;
}
.experience-role-current { border-color: var(--border); }
.experience-role-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-faint);
    background: rgba(69,255,50,.025);
}
.experience-role-header span { color: var(--dim); font-size: .54rem; letter-spacing: .07em; }
.experience-role-header h3 { margin: 5px 0 3px; color: var(--bright); font-size: .94rem; letter-spacing: .055em; }
.experience-role-header p { margin: 0; color: var(--text); font-size: .61rem; }
.experience-role-status {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--bright);
    font-size: .55rem;
    letter-spacing: .06em;
}
.experience-role-body { padding: 11px 16px 13px; }
.experience-role-body ul { margin: 0; padding-left: 19px; }
.experience-role-body li { color: var(--text); font-size: .68rem; line-height: 1.58; }
.experience-role-body li + li { margin-top: 6px; }

/* CONTACT // ACTION CHANNELS */
.contact-intro { max-width: 900px; margin: 11px 0 0; color: var(--text); font-size: .7rem; line-height: 1.55; }
.contact-channel-grid-v35 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.contact-channel-grid-v35 .contact-channel { min-height: 238px; display: flex; flex-direction: column; }
.contact-channel-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 12px 0 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--bright);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .04em;
    box-shadow: inset 0 0 16px rgba(69,255,50,.045);
}
.contact-channel-grid-v35 .contact-channel h3 { font-size: .9rem; }
.contact-channel-grid-v35 .contact-channel-copy,
.contact-channel-grid-v35 .email-privacy-note { font-size: .65rem; line-height: 1.5; }
.contact-channel-grid-v35 .contact-link-button,
.contact-channel-grid-v35 .contact-primary-action { margin-top: auto; }

/* HELP // OPERATOR QUICK REFERENCE */
.help-operator-panel { width: min(900px,96vw); }
.help-section-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.help-section {
    padding: 10px;
    border: 1px solid var(--border-faint);
    border-radius: 5px;
    background: rgba(0,16,0,.44);
}
.help-section-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; padding-bottom: 6px; border-bottom: 1px solid var(--border-faint); }
.help-section-heading span { display:flex;align-items:center;justify-content:center;width:25px;height:25px;border:1px solid var(--border);border-radius:3px;color:var(--dim);font-size:.5rem; }
.help-section-heading strong { color: var(--bright); font-size: .68rem; letter-spacing: .07em; }
.help-command { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 9px; align-items: start; padding: 5px 0; }
.help-command kbd { color: var(--bright); font: inherit; font-size: .58rem; font-weight: 700; letter-spacing: .025em; }
.help-command span { color: var(--text); font-size: .59rem; line-height: 1.45; }
.help-panel-footer { display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border-faint);color:var(--dim);font-size:.52rem;letter-spacing:.05em; }
.help-panel-footer strong { color: var(--bright); font-weight: 500; }

@media (max-width: 820px) {
    .profile-readout-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .profile-lower-grid { grid-template-columns: 1fr; }
    .experience-progression-rail { grid-template-columns: 1fr; }
    .experience-rail-line { height: 42px; width: 1px; justify-self: center; }
    .experience-rail-line::before,.experience-rail-line::after { left:-3px; right:auto; transform:rotate(135deg); }
    .experience-rail-line::before { top: 9px; }
    .experience-rail-line::after { top: 29px; }
    .experience-rail-line span { display:none; }
    .contact-channel-grid-v35 { grid-template-columns: 1fr; }
    .contact-channel-grid-v35 .contact-channel { min-height: 0; }
    .help-section-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .record-revision-line { font-size: .48rem; }
    .profile-dossier-heading,.experience-progression-heading { align-items:flex-start; flex-direction:column; gap:3px; }
    .profile-readout-grid { grid-template-columns: 1fr; gap: 6px; }
    .profile-readout { min-height: 0; padding: 9px 10px; }
    .profile-readout span { margin-bottom: 4px; }
    .profile-summary-panel p,.profile-education-panel p { font-size: .68rem; }
    .experience-role-header { flex-direction: column; }
    .experience-role-body { padding: 10px 12px 12px; }
    .experience-role-body li { font-size: .65rem; }
    .contact-channel-symbol { width:48px;height:48px;margin-top:9px; }
    .help-command { grid-template-columns: 82px minmax(0,1fr); gap: 7px; }
    .help-command kbd,.help-command span { font-size: .54rem; }
    .help-panel-footer { flex-direction:column;gap:3px; }
}


/* ============================================================
   V36 // PROFILE + CONTACT CLEANUP
============================================================ */
/* Profile card headings are intentionally stronger than the body copy. */
.profile-panel-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
}
.profile-readout span {
    font-size: .64rem;
    font-weight: 700;
}
.profile-resume-panel .download-header {
    font-size: .76rem;
    font-weight: 700;
}

/* Restore the simpler two-channel contact layout and keep the résumé as a compact document action. */
.contact-resume-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-faint);
    border-radius: 6px;
    background: rgba(0,18,0,.34);
}
.contact-resume-strip > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.contact-resume-strip span {
    color: var(--dim);
    font-size: .55rem;
    letter-spacing: .07em;
}
.contact-resume-strip strong {
    color: var(--bright);
    font-size: .72rem;
    letter-spacing: .035em;
    overflow-wrap: anywhere;
}
@media (max-width: 680px) {
    .contact-resume-strip {
        align-items: stretch;
        flex-direction: column;
    }
    .contact-resume-strip .contact-link-button { width: 100%; }
}
@media (max-width: 520px) {
    .profile-panel-label { font-size: .72rem; }
    .profile-readout span { font-size: .61rem; }
}


/* ============================================================
   V37 // HORTON INDUSTRIES RADIO NETWORK
============================================================ */
#radio {
    --radio-panel: rgba(0, 17, 0, .58);
    --radio-panel-strong: rgba(0, 23, 0, .78);
}

.radio-console {
    width: min(980px, 100%);
    margin: 4px auto 0;
    border: 1px solid var(--border-dim);
    border-radius: 7px;
    background:
        linear-gradient(180deg, rgba(69,255,50,.035), transparent 28%),
        var(--radio-panel);
    box-shadow: inset 0 0 30px rgba(69,255,50,.035);
    overflow: hidden;
}

.radio-console-topline,
.radio-footer-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-faint);
    color: var(--dim);
    font-size: .61rem;
    letter-spacing: .075em;
}

.radio-console-topline > span {
    color: var(--bright);
    font-weight: 700;
}

.radio-on-air {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--bright);
    font-size: .6rem;
    letter-spacing: .1em;
}

.radio-on-air i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bright);
    box-shadow: 0 0 9px rgba(140,255,102,.8);
    animation: radioOnAirPulse 1.35s ease-in-out infinite alternate;
}

@keyframes radioOnAirPulse {
    from { opacity: .42; box-shadow: 0 0 4px rgba(140,255,102,.45); }
    to { opacity: 1; box-shadow: 0 0 12px rgba(140,255,102,.95); }
}

.radio-frequency-panel {
    padding: 15px 18px 13px;
    border-bottom: 1px solid var(--border-faint);
    background: rgba(0, 10, 0, .46);
}

.radio-band-labels {
    display: flex;
    justify-content: space-between;
    color: var(--dim);
    font-size: .56rem;
}

.radio-frequency-track {
    position: relative;
    height: 34px;
    margin: 4px 3px 2px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border-faint);
    background:
        repeating-linear-gradient(90deg, rgba(140,255,102,.18) 0 1px, transparent 1px 4.9%),
        linear-gradient(180deg, rgba(69,255,50,.04), transparent);
}

.radio-frequency-needle {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 88.5%;
    width: 2px;
    background: var(--bright);
    box-shadow: 0 0 7px rgba(140,255,102,.75);
}

.radio-frequency-readout {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 12px;
    color: var(--dim);
    font-size: .58rem;
    letter-spacing: .08em;
}

.radio-frequency-readout strong {
    color: var(--bright);
    font-size: 1.05rem;
    letter-spacing: .12em;
    text-shadow: 0 0 8px rgba(140,255,102,.3);
}

.radio-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr);
    gap: 12px;
    padding: 12px;
}

.radio-now-playing,
.radio-player-panel {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border-faint);
    border-radius: 6px;
    background: var(--radio-panel-strong);
}

.radio-section-label {
    margin-bottom: 11px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border-faint);
    color: var(--dim);
    font-size: .58rem;
    letter-spacing: .075em;
}

.radio-now-playing {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
}

.radio-now-playing .radio-section-label {
    grid-column: 1 / -1;
}

.radio-record-icon {
    display: grid;
    place-items: center;
    width: 108px;
    height: 108px;
    border: 1px solid var(--border-dim);
    border-radius: 6px;
    background: rgba(0, 9, 0, .72);
}

.radio-record-icon > div {
    position: relative;
    width: 76px;
    height: 76px;
    border: 2px solid var(--bright);
    border-radius: 50%;
    opacity: .9;
    box-shadow: 0 0 10px rgba(140,255,102,.14), inset 0 0 12px rgba(140,255,102,.08);
}

.radio-record-icon > div::before,
.radio-record-icon > div::after {
    content: "";
    position: absolute;
    border: 1px solid var(--border);
    border-radius: 50%;
}

.radio-record-icon > div::before { inset: 12px; }
.radio-record-icon > div::after { inset: 24px; }
.radio-record-icon span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bright);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(140,255,102,.8);
}

.radio-channel {
    margin: 0 0 7px;
    color: var(--dim);
    font-size: .57rem;
    letter-spacing: .055em;
}

.radio-track-copy h3 {
    margin: 0 0 5px !important;
    color: var(--bright);
    font-size: 1rem !important;
    line-height: 1.28;
    letter-spacing: .065em;
}

.radio-artist {
    margin: 0 0 14px;
    color: var(--text);
    font-size: .72rem;
    letter-spacing: .075em;
}

.radio-signal-row {
    display: grid;
    grid-template-columns: auto minmax(80px, 1fr) auto;
    align-items: end;
    gap: 8px;
    color: var(--dim);
    font-size: .54rem;
}

.radio-signal-row strong { color: var(--bright); }
.radio-signal-bars {
    display: flex;
    align-items: end;
    gap: 3px;
    height: 17px;
}
.radio-signal-bars i {
    flex: 1 1 auto;
    max-width: 10px;
    min-width: 5px;
    border: 1px solid var(--bright);
    background: rgba(140,255,102,.14);
}
.radio-signal-bars i:nth-child(1) { height: 28%; }
.radio-signal-bars i:nth-child(2) { height: 44%; }
.radio-signal-bars i:nth-child(3) { height: 62%; }
.radio-signal-bars i:nth-child(4) { height: 79%; }
.radio-signal-bars i:nth-child(5) { height: 100%; background: rgba(140,255,102,.32); box-shadow: 0 0 5px rgba(140,255,102,.24); }


.radio-footer-strip {
    border-top: 1px solid var(--border-faint);
    border-bottom: 0;
    flex-wrap: wrap;
}

@media (max-width: 820px) {
    .radio-layout { grid-template-columns: 1fr; }
    .radio-player-panel { min-width: 0; }
}

@media (max-width: 560px) {
    .radio-console-topline { align-items: flex-start; }
    .radio-frequency-panel { padding: 12px 10px 10px; }
    .radio-layout { padding: 8px; gap: 8px; }
    .radio-now-playing,
    .radio-player-panel { padding: 11px; }
    .radio-now-playing {
        grid-template-columns: 82px minmax(0, 1fr);
        column-gap: 10px;
    }
    .radio-record-icon { width: 80px; height: 80px; }
    .radio-record-icon > div { width: 57px; height: 57px; }
    .radio-track-copy h3 { font-size: .78rem !important; }
    .radio-artist { font-size: .65rem; }
    .radio-frequency-readout strong { font-size: .9rem; }
    .radio-footer-strip { display: grid; gap: 4px; }
}


/* ============================================================
   V38 // MULTIBAND H.I. RADIO RECEIVER
============================================================ */
.radio-station-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-faint);
    background: rgba(0, 12, 0, .38);
}
.radio-station-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 10px;
    align-items: center;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid var(--border-faint);
    border-radius: 5px;
    background: rgba(0, 16, 0, .55);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s linear, background .12s linear, box-shadow .12s linear, transform .12s ease-out;
}
.radio-station-card > span {
    grid-row: 1 / 3;
    color: var(--bright);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .06em;
}
.radio-station-card strong {
    overflow: hidden;
    color: var(--bright);
    font-size: .63rem;
    letter-spacing: .055em;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.radio-station-card small {
    overflow: hidden;
    color: var(--dim);
    font-size: .49rem;
    letter-spacing: .04em;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.radio-station-card:hover,
.radio-station-card:focus-visible,
.radio-station-card.active-radio-station {
    outline: none;
    border-color: var(--bright);
    background: rgba(69,255,50,.075);
    box-shadow: inset 0 0 18px rgba(69,255,50,.04), 0 0 9px rgba(69,255,50,.06);
}
.radio-station-card.active-radio-station { transform: translateY(-1px); }
.radio-frequency-needle { transition: left .42s cubic-bezier(.2,.8,.25,1); }
.radio-layout-v38 { align-items: stretch; }
.radio-layout-v38 .radio-now-playing { grid-template-rows: auto 1fr auto; }
.radio-tuner-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-faint);
}
.radio-tuner-controls .return-button { margin: 0; min-height: 34px; }
.radio-tuner-controls .return-button:disabled { opacity: .32; cursor: default; }
.radio-video-shell {
    width: 100%;
    min-height: 248px;
    overflow: hidden;
    border: 1px solid var(--border-dim);
    border-radius: 7px;
    background: #000;
    box-shadow: inset 0 0 24px rgba(69,255,50,.04);
}
.radio-video-shell[hidden] { display: none !important; }
#radio-youtube-player,
#radio-youtube-player iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 248px;
    border: 0;
}
#radio-on-air { min-width: 72px; justify-content: flex-end; }
@media (max-width: 820px) {
    .radio-station-strip { grid-template-columns: 1fr; }
    .radio-station-card strong, .radio-station-card small { white-space: normal; }
    .radio-video-shell, #radio-youtube-player, #radio-youtube-player iframe { min-height: 230px; }
}
@media (max-width: 560px) {
    .radio-station-strip { padding: 8px; gap: 6px; }
    .radio-station-card { padding: 8px 9px; }
    .radio-station-card > span { font-size: .78rem; }
    .radio-tuner-controls { grid-template-columns: 1fr 1.25fr 1fr; gap: 5px; }
    .radio-tuner-controls .return-button { padding-left: 5px; padding-right: 5px; font-size: .52rem; }
    .radio-video-shell, #radio-youtube-player, #radio-youtube-player iframe { min-height: 210px; }
}


/* ============================================================
   V40 // INTERFACE POLISH + MAINTENANCE
   Unified record acquisition, radio, favicon + maintenance
   carrier animation, and browser-brand refinements.
============================================================ */

/* Every major record resolves with the same brief CRT acquisition motion. */
.terminal-view.huos-view-acquire {
    animation:huosViewAcquire .28s cubic-bezier(.16,.72,.28,1) both;
}
@keyframes huosViewAcquire {
    0% { opacity:.12; transform:translateY(4px) scaleY(.985); filter:brightness(1.45) blur(.8px); }
    35% { opacity:.9; transform:translateY(0) scaleY(1.003); filter:brightness(1.18) blur(0); }
    100% { opacity:1; transform:none; filter:none; }
}

/* Radio: make the receiver feel alive without covering or intercepting the
   YouTube player controls. */
.radio-console { position:relative; }
.radio-record-icon > div { transition:filter .18s linear, opacity .18s linear; }
.radio-console.radio-playing .radio-record-icon > div {
    animation:huosRecordSpin 7.5s linear infinite;
    filter:drop-shadow(0 0 6px rgba(140,255,102,.28));
}
@keyframes huosRecordSpin { to { transform:rotate(360deg); } }

.radio-console.radio-playing .radio-on-air i {
    animation:radioOnAirPulse .9s ease-in-out infinite alternate;
}
@keyframes radioOnAirPulse {
    from { opacity:.48; box-shadow:0 0 3px rgba(140,255,102,.25); }
    to { opacity:1; box-shadow:0 0 11px rgba(140,255,102,.72); }
}

.radio-console.radio-tuning .radio-frequency-track {
    box-shadow:inset 0 0 16px rgba(140,255,102,.14),0 0 10px rgba(140,255,102,.08);
}
.radio-console.radio-tuning .radio-frequency-readout strong {
    animation:radioFrequencyLock .36s steps(2,end) 1;
}
@keyframes radioFrequencyLock { 50% { opacity:.28; text-shadow:none; } }

.radio-carrier-row {
    display:grid;
    grid-template-columns:auto minmax(100px,1fr) auto;
    align-items:center;
    gap:9px;
    margin-top:9px;
    color:var(--dim);
    font-size:.52rem;
    letter-spacing:.06em;
}
.radio-carrier-row > strong { color:var(--bright); font-weight:500; }
.radio-carrier-meter {
    display:flex;
    align-items:flex-end;
    gap:3px;
    height:20px;
    padding:2px 4px;
    border:1px solid var(--border-faint);
    background:rgba(0,8,0,.55);
}
.radio-carrier-meter i {
    flex:1 1 0;
    min-width:3px;
    height:18%;
    background:rgba(140,255,102,.26);
    box-shadow:0 0 3px rgba(140,255,102,.08);
    transition:height .16s linear,opacity .16s linear;
}
.radio-console.radio-playing .radio-carrier-meter i { animation:radioCarrierBounce .82s ease-in-out infinite alternate; }
.radio-console.radio-playing .radio-carrier-meter i:nth-child(2){animation-duration:.47s;animation-delay:-.18s}
.radio-console.radio-playing .radio-carrier-meter i:nth-child(3){animation-duration:.64s;animation-delay:-.32s}
.radio-console.radio-playing .radio-carrier-meter i:nth-child(4){animation-duration:.39s;animation-delay:-.11s}
.radio-console.radio-playing .radio-carrier-meter i:nth-child(5){animation-duration:.72s;animation-delay:-.44s}
.radio-console.radio-playing .radio-carrier-meter i:nth-child(6){animation-duration:.51s;animation-delay:-.23s}
.radio-console.radio-playing .radio-carrier-meter i:nth-child(7){animation-duration:.68s;animation-delay:-.37s}
.radio-console.radio-playing .radio-carrier-meter i:nth-child(8){animation-duration:.43s;animation-delay:-.08s}
@keyframes radioCarrierBounce { from{height:18%;opacity:.42} to{height:96%;opacity:1} }

.radio-video-shell { position:relative; isolation:isolate; }
.radio-video-shell::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    opacity:.18;
    background:linear-gradient(180deg,transparent 0%,rgba(140,255,102,.10) 49%,rgba(183,255,156,.18) 50%,rgba(140,255,102,.05) 51%,transparent 100%);
    background-size:100% 220px;
    animation:radioMonitorSweep 6s linear infinite;
    mix-blend-mode:screen;
}
@keyframes radioMonitorSweep { from{background-position:0 -220px} to{background-position:0 440px} }

.radio-console.radio-playing .radio-signal-bars i { animation:radioSignalLive 1.1s ease-in-out infinite alternate; }
.radio-console.radio-playing .radio-signal-bars i:nth-child(2){animation-delay:-.2s}.radio-console.radio-playing .radio-signal-bars i:nth-child(3){animation-delay:-.42s}.radio-console.radio-playing .radio-signal-bars i:nth-child(4){animation-delay:-.13s}.radio-console.radio-playing .radio-signal-bars i:nth-child(5){animation-delay:-.55s}
@keyframes radioSignalLive { from{opacity:.42;filter:brightness(.8)} to{opacity:1;filter:brightness(1.35)} }

@media (prefers-reduced-motion:reduce) {
    .terminal-view.huos-view-acquire,
    .radio-record-icon > div,
    .radio-on-air i,
    .radio-carrier-meter i,
    .radio-video-shell::after,
    .radio-signal-bars i { animation:none !important; }
}

@media (max-width:700px) {
    .radio-carrier-row { grid-template-columns:68px minmax(0,1fr) auto; }
    .radio-carrier-meter { height:18px; }
}