:root {
    --term-teal:   #50fff7;
    --term-green:  #00ff41;
    --term-yellow: #f1ff5e;
    --term-red:    #ff3333;
    --term-white:  #ffffff;
    --term-bg:     #050505;
    --font-head:   'Press Start 2P', cursive;
    --font-body:   'Fira Code', monospace;
    --gap-size:    2vh;
    --top-align:   10vh;
}

*::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; box-sizing: border-box; }

html, body { overflow-x: hidden; }

body {
    background-color: var(--term-bg);
    color: var(--term-teal);
    font-family: var(--font-body);
    margin: 0;
    padding: 1.5vh 2vw;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-shadow: 0 0 4px rgba(80, 255, 247, 0.4);
}

/* ── Loading screen ───────────────────────────────────────────── */

#loading-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 60%, black 100%), var(--term-bg);
    z-index: 9999;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    transition: opacity 0.5s ease-out;
}
.loading-content { width: 300px; display: flex; flex-direction: column; align-items: flex-start; }
#loading-text    { font-family: var(--font-body); font-weight: bold; margin-bottom: 5px; font-size: 0.9rem; letter-spacing: 1px; color: var(--term-teal); }
#loading-bar-container { width: 100%; height: 25px; border: 3px solid var(--term-teal); padding: 3px; box-shadow: 0 0 10px rgba(80, 255, 247, 0.2); }
#loading-bar    { height: 100%; background-color: var(--term-teal); width: 0%; transition: width 0.1s linear; }

/* ── Content wrapper fades in after load ─────────────────────── */

.content-wrapper { opacity: 0; transition: opacity 0.8s ease-in; height: 100%; width: 100%; display: flex; flex-direction: column; }
.content-wrapper.active { opacity: 1; }

/* ── CRT scanline overlay on image panels ────────────────────── */

.scanlines {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 5;
    background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

/* ── Typography helpers ───────────────────────────────────────── */

.header-text { font-family: var(--font-head); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.8vh; }
.body-text   { font-size: 0.8rem; line-height: 1.3; opacity: 0.8; }
.text-xs     { font-size: 0.65rem; }
.opacity-50  { opacity: 0.5; }

/* ── Top header bar ───────────────────────────────────────────── */

header { display: flex; justify-content: space-between; margin-bottom: 1vh; opacity: 0.7; flex-shrink: 0; position: relative; z-index: 2000; }

/* ── Primary nav ──────────────────────────────────────────────── */

nav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    border: 2px solid var(--term-teal); margin-bottom: 1.5vh;
    flex-shrink: 0; position: relative; background: var(--term-bg); z-index: 2000;
}
.nav-item {
    padding: 1vh; text-align: center; border-right: 2px solid var(--term-teal);
    font-family: var(--font-head); font-size: 0.8rem; cursor: pointer; transition: background 0.2s;
}
.nav-item:last-child { border-right: none; }
.nav-item:hover { background: rgba(80, 255, 247, 0.15); }

/* ── Main content grid ────────────────────────────────────────── */

.main-stage {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5vw;
    flex: 1; min-height: 0; overflow: hidden;
    transition: filter 0.4s ease;
}
.main-stage.blur { filter: blur(8px) brightness(0.6); pointer-events: none; }
.left-panel  { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.right-panel { display: flex; flex-direction: column; gap: 1.5vh; height: 100%; overflow: hidden; }

/* ── Lain image box ───────────────────────────────────────────── */

.unix-box { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-bottom: 1vh; position: relative; }
.img-wrapper {
    flex: 1; border: 2px solid var(--term-teal); overflow: hidden;
    display: flex; justify-content: center; align-items: center; padding: 2px; position: relative;
}
#lain-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: opacity 0.2s ease; }

/* Teal colour overlay and vignette layered on the image */
.img-wrapper::after  { content: ""; position: absolute; inset: 0; background: var(--term-teal); mix-blend-mode: color; opacity: 1; pointer-events: none; z-index: 2; }
.img-wrapper::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.95) 100%); }

/* ── Easter egg overlays (terminal, conf, matrix) ─────────────── */

.term-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; font-family: var(--font-body); padding: 10px; z-index: 4; display: none; flex-direction: column; overflow: auto; }
#hack-overlay { color: var(--term-teal); font-size: 0.7rem; justify-content: flex-start; word-break: break-all; line-height: 1.5; }
#matrix-canvas { padding: 0; }

/* ── CONF file browser ────────────────────────────────────────── */

#conf-overlay.classic-conf {
    background-color: rgba(5, 5, 5, 0.95);
    color: var(--term-teal);
    font-family: var(--font-body);
    padding: 0;
    text-shadow: 0 0 4px rgba(80, 255, 247, 0.4);
    backdrop-filter: blur(5px);
}
.conf-header { background: var(--term-teal); color: var(--term-bg); padding: 4px 10px; font-weight: bold; text-shadow: none; font-size: 0.8rem; display: flex; justify-content: space-between; }
.conf-body   { display: grid; grid-template-columns: 1fr 2fr 3fr; flex: 1; min-height: 0; padding: 10px; gap: 10px; }
.conf-col    { display: flex; flex-direction: column; overflow-y: auto; border-right: 1px dashed rgba(80,255,247,0.3); padding-right: 10px; }
.conf-col:last-child { border-right: none; padding-right: 0; }
.conf-col::-webkit-scrollbar       { width: 5px; display: block; }
.conf-col::-webkit-scrollbar-track { background: transparent; }
.conf-col::-webkit-scrollbar-thumb { background-color: var(--term-teal); border-radius: 99px; }
.conf-item { padding: 4px 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.75rem; transition: background 0.1s; }
.conf-item:hover       { background: rgba(80, 255, 247, 0.1); }
.conf-item.active-parent { background: rgba(80, 255, 247, 0.15); color: var(--term-teal); font-weight: bold; }
.conf-item.selected    { background-color: var(--term-teal); color: var(--term-bg); font-weight: bold; text-shadow: none; }
.conf-preview-box      { flex: 1; min-height: 0; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.conf-preview-box img  { max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid var(--term-teal); background: #000; box-sizing: border-box; }
.conf-preview-box .text-preview { padding: 10px; font-size: 0.65rem; color: var(--term-teal); white-space: pre-wrap; width: 100%; height: 100%; overflow-y: auto; text-shadow: none; border: 1px solid var(--term-teal); background: #000; box-sizing: border-box; }
.conf-preview-meta { font-size: 0.65rem; line-height: 1.4; opacity: 0.8; border-top: 1px dashed rgba(80,255,247,0.3); padding-top: 10px; height: 80px; overflow-y: auto; flex-shrink: 0; }
.conf-footer-bar   { background-color: var(--term-teal); color: var(--term-bg); padding: 4px 10px; font-size: 0.7rem; font-weight: bold; text-shadow: none; text-align: center; flex-shrink: 0; }

/* ── Cursor blink ─────────────────────────────────────────────── */

.cursor-blink { display: inline-block; width: 8px; height: 14px; background: var(--term-teal); animation: blink 1s step-end infinite; vertical-align: middle; }
@keyframes blink { 50% { opacity: 0; } }

/* ── Easter egg sub-nav (CONF / TERMINAL / FEED) ─────────────── */

.terminal-nav {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border: 2px solid var(--term-teal); margin-bottom: 1.5vh;
    flex-shrink: 0; z-index: 100; position: relative; background: var(--term-bg);
}
.terminal-nav .nav-item { padding: 1vh; text-align: center; border-right: 2px solid var(--term-teal); font-family: var(--font-head); font-size: 0.8rem; cursor: pointer; transition: all 0.2s; user-select: none; }
.terminal-nav .nav-item:last-child { border-right: none; }
.terminal-nav .nav-item:hover  { background: rgba(80, 255, 247, 0.15); }
.terminal-nav .nav-item.active { background: rgba(80, 255, 247, 0.2); font-weight: bold; }
#boot-trigger.active   { color: var(--term-red);   text-shadow: 0 0 10px var(--term-red); }
#conf-trigger.active   { color: var(--term-green);  text-shadow: 0 0 10px var(--term-green); }
#screen-trigger.active { color: var(--term-white);  text-shadow: 0 0 10px var(--term-white); }

/* ── ASCII branding block ─────────────────────────────────────── */

.branding-text {
    font-family: var(--font-body);
    font-weight: bold;
    font-size: 0.45rem;
    line-height: 1.0;
    text-align: center;
    color: var(--term-teal);
    opacity: 0.8;
    margin: 1vh 0;
    flex-shrink: 0;
    white-space: pre;
    align-self: center;
    overflow-x: hidden;
    width: 100%;
    pointer-events: none;
    transform: translateZ(0);
}

/* ── BIOS-style footer ────────────────────────────────────────── */

.bios-footer {
    display: grid;
    grid-template-columns: 1fr auto 1.5fr;
    align-items: flex-end;
    font-family: var(--font-body);
    flex-shrink: 0;
    margin-top: auto;
    gap: 1vw;
    padding-bottom: 2px;
}
.footer-left  { display: flex; flex-direction: column; gap: 2px; }
.inputs-grid  { display: grid; grid-template-columns: auto auto; gap: 0.2vh 1vw; font-weight: bold; margin-bottom: 2px; transform: translateX(-2vw); }
.footer-right { display: flex; flex-direction: column; text-align: right; gap: 2px; }

/* ── Repos box (homepage strip) ───────────────────────────────── */

.repos-box { border: 2px solid var(--term-teal); padding: 1.5vh; flex-shrink: 0; }
.repo-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 1vh; }
.repo-card { border: 2px solid var(--term-teal); padding: 1vh; position: relative; }
.btn-get   { position: absolute; top: 1vh; right: 1vh; background: none; border: 2px solid var(--term-teal); color: var(--term-teal); font-family: var(--font-head); font-size: 0.55rem; cursor: pointer; padding: 2px 4px; }
.btn-get:hover { background: var(--term-teal); color: black; }

/* ── Bottom split: articles + music player ────────────────────── */

.bottom-split    { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5vw; overflow: hidden; }
.articles-stack  { display: grid; grid-template-rows: 1fr 1fr; gap: 1.5vh; height: 100%; margin: 0; padding: 0; }
.article-card    { border: 2px solid var(--term-teal); padding: 1.5vh; display: flex; flex-direction: column; justify-content: center; cursor: pointer; height: 100%; min-height: 0; overflow: hidden; }
.article-thumb   { width: 100%; height: auto; margin: 1.2vh 0; border: 1px solid var(--term-teal); overflow: hidden; background: #000; position: relative; flex: 1; min-height: 0; }
.article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.9); transition: transform 0.4s ease; }
.article-card:hover .article-thumb img { transform: scale(1.1); }

/* ── Musiee player ────────────────────────────────────────────── */

.musiee-box { border: 2px solid var(--term-teal); padding: 1.5vh; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
.musiee-logo { font-size: 0.5rem; white-space: pre; text-align: center; color: var(--term-teal); line-height: 1.2; margin-bottom: 0.5vh; flex-shrink: 0; text-shadow: 0 0 8px var(--term-teal); }
.musiee-info { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; font-size: 0.7rem; line-height: 1.4; text-align: left; margin-bottom: 0.5vh; }
.musiee-track-details { height: 4.5rem; display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; }
#m-title { white-space: normal; overflow-wrap: break-word; line-height: 1.4; height: 2.8em; display: block; }
.musiee-playlist-box {
    border: 1px dashed rgba(80, 255, 247, 0.4); flex: 1; min-height: 0; overflow-y: auto;
    margin-top: 1vh; padding: 5px; font-family: var(--font-body); font-size: 0.6rem; display: flex; flex-direction: column; gap: 2px;
}
.musiee-playlist-box::-webkit-scrollbar       { width: 5px; display: block; }
.musiee-playlist-box::-webkit-scrollbar-track { background: transparent; }
.musiee-playlist-box::-webkit-scrollbar-thumb { background-color: var(--term-teal); border-radius: 99px; }
.playlist-item { display: flex; gap: 10px; cursor: pointer; padding: 4px 8px; opacity: 0.7; transition: all 0.2s; line-height: 1.2; flex-shrink: 0; }
.playlist-item:hover  { opacity: 1; background: rgba(80, 255, 247, 0.1); }
.playlist-item:focus  { outline: 1px solid var(--term-teal); opacity: 1; }
.playlist-item.active { opacity: 1; background: var(--term-teal); color: var(--term-bg); font-weight: bold; text-shadow: none; }
.musiee-index-indicator { text-align: right; font-size: 0.6rem; opacity: 0.8; margin-top: 4px; flex-shrink: 0; }
.musiee-visualizer-wrapper { margin-top: auto; display: flex; flex-direction: column; justify-content: flex-end; flex-shrink: 0; }
.musiee-visualizer { display: flex; align-items: flex-end; width: 100%; height: 35px; gap: 3px; margin-bottom: 2px; }
.vis-bar { flex: 1; background-color: var(--term-teal); transition: height 0.1s ease; }
.vis-base { display: flex; width: 100%; gap: 3px; margin-bottom: 5px; }
.vis-base span { flex: 1; text-align: center; color: var(--term-teal); font-size: 0.5rem; line-height: 1; }
.musiee-player-footer { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 5px; flex-shrink: 0; }
.musiee-time-vol-row  { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 0.6rem; }
.vol-control { display: flex; align-items: center; gap: 5px; }
#m-volume { -webkit-appearance: none; width: 60px; height: 6px; background: rgba(80, 255, 247, 0.2); outline: none; cursor: pointer; }
#m-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; background: var(--term-teal); }
.musiee-separator { width: 100%; border: none; border-top: 1px dashed var(--term-teal); margin: 8px 0; opacity: 0.5; }
.musiee-controls { font-size: 0.65rem; text-align: center; width: 100%; }

/* ── Modal overlay base ───────────────────────────────────────── */

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 1000; display: none;
    align-items: flex-start; justify-content: center;
    padding-top: var(--top-align); padding-left: 2vw; padding-right: 2vw;
    background: transparent;
    transition: background 0.4s ease;
}
.modal-overlay.active { background: rgba(0,0,0,0.6); }

/* Iframe overlay sits above everything; game iframe gets its own z-stacking layer */
#iframe-overlay {
    z-index: 3000;
    align-items: center;
    padding: 0;
    backdrop-filter: blur(0px);
    transition: backdrop-filter 0.4s ease, background 0.4s ease;
}
#iframe-overlay.active { backdrop-filter: blur(8px); background: rgba(0,0,0,0.7); }

#image-viewer-overlay       { z-index: 9995; background: transparent; }
#image-viewer-overlay.active { background: rgba(0,0,0,0.85); }

/* ── Game wrapper — scaled by JS to fit viewport ─────────────── */

#game-wrapper {
    width: 1280px; height: 720px;
    border: 4px solid #0055ff;
    box-shadow: 0 0 25px #0055ff, inset 0 0 15px rgba(0, 85, 255, 0.5);
    background: #000;
    transform-origin: center center;
    position: relative; overflow: hidden;
}
.iframe-close-btn {
    position: absolute; top: 15px; right: 15px;
    color: var(--term-teal); font-family: var(--font-head); font-size: 1rem;
    cursor: pointer; z-index: 10000;
    background: rgba(0,0,0,0.8); padding: 5px 10px;
    border: 1px solid var(--term-teal); transition: all 0.2s; pointer-events: auto;
}
.iframe-close-btn:hover { background: var(--term-teal); color: black; box-shadow: 0 0 15px var(--term-teal); }

/* ── Certificate image viewer ─────────────────────────────────── */

.image-viewer-container {
    position: relative; width: 85vw; height: 85vh;
    display: flex; align-items: center; justify-content: center;
    background: var(--term-bg); border: 2px solid var(--term-teal);
    box-shadow: 0 0 20px rgba(80, 255, 247, 0.2); overflow: hidden;
    transform: scale(0.95); opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.modal-overlay.active .image-viewer-container { transform: scale(1); opacity: 1; }
.close-viewer-btn {
    position: absolute; top: 15px; right: 20px;
    color: var(--term-teal); font-family: var(--font-head); font-size: 1rem;
    cursor: pointer; z-index: 100;
    background: rgba(0,0,0,0.5); padding: 5px 10px;
    border: 1px solid var(--term-teal); transition: all 0.2s;
}
.close-viewer-btn:hover { background: var(--term-teal); color: black; }
#viewer-img { max-width: 95%; max-height: 95%; object-fit: contain; transition: transform 0.1s ease-out; cursor: grab; }
#viewer-img:active { cursor: grabbing; transition: none; }

/* ── Shared modal panel style ─────────────────────────────────── */

.expanded-article, .expanded-socials, .articles-list-modal, .repos-modal {
    background: var(--term-bg); border: 2px solid var(--term-teal);
    box-shadow: 0 0 20px rgba(80, 255, 247, 0.2); overflow: hidden;
    transform: scale(0.95); opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.modal-overlay.active .expanded-article,
.modal-overlay.active .expanded-socials,
.modal-overlay.active .articles-list-modal,
.modal-overlay.active .repos-modal { transform: scale(1); opacity: 1; }

/* ── Article expanded view ────────────────────────────────────── */

.expanded-article { width: 90vw; height: 85vh; display: grid; grid-template-columns: 2fr 1fr; gap: 2vw; padding: 2.5vh; }
.article-main {
    display: flex; flex-direction: column; overflow-y: auto;
    height: 100%; width: 100%; padding-right: 20px;
    opacity: 1; transform: scale(1);
    transition: opacity 0.2s ease, transform 0.2s ease;
    scrollbar-width: thin; scrollbar-color: var(--term-teal) transparent;
}
.article-main.switching { opacity: 0; transform: scale(0.98); }
.article-main::-webkit-scrollbar       { width: 14px; display: block; }
.article-main::-webkit-scrollbar-track { background: transparent; }
.article-main::-webkit-scrollbar-thumb { background-color: var(--term-teal); border: 5px solid transparent; background-clip: content-box; border-radius: 99px; }
.article-main-thumb { width: 100%; height: auto; border: 1px solid var(--term-teal); margin-bottom: var(--gap-size); background: #000; flex-shrink: 0; overflow: hidden; position: relative; }
.article-main-thumb img { width: 100%; height: auto; display: block; filter: none; }
.article-title-box { border: none; padding: 0; width: 100%; margin-bottom: var(--gap-size); flex-shrink: 0; }
#exp-title { font-size: 2rem; line-height: 1.4; text-align: left; margin: 0; }
.article-body-text { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.6; color: rgba(80, 255, 247, 0.9); white-space: pre-wrap; padding-bottom: 5vh; width: 100%; }
.article-sidebar { display: flex; flex-direction: column; gap: 2vh; overflow-y: auto; }
.rec-header { border: 1px solid var(--term-teal); padding: 1vh; text-align: center; margin-bottom: var(--gap-size); }
.rec-card { border: 2px solid var(--term-teal); padding: 1vh; cursor: pointer; overflow: hidden; }
.rec-thumb { width: 100%; height: auto; border: 1px solid var(--term-teal); margin-bottom: 1vh; overflow: hidden; background: #000; position: relative; }
.rec-thumb img { width: 100%; height: auto; display: block; transition: transform 0.4s ease; }
.rec-card:hover .rec-thumb img { transform: scale(1.1); }

/* ── Socials expanded view ────────────────────────────────────── */

.expanded-socials { width: 60vw; height: 60vh; display: flex; flex-direction: column; padding: 1.5vh; margin: 0 auto; }
.socials-header { border: 2px solid var(--term-teal); padding: 1vh; text-align: center; font-family: var(--font-head); font-size: 1rem; margin-bottom: 2vh; flex-shrink: 0; }
.socials-content-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2vh; flex: 1; min-height: 0; }
.socials-list   { display: flex; flex-direction: column; gap: 1.5vh; overflow-y: auto; }
.social-capsule { display: flex; border: 2px solid var(--term-teal); height: 6vh; align-items: stretch; }
.social-info    { flex: 1; display: flex; align-items: center; padding-left: 1vw; gap: 1vw; cursor: pointer; border-right: 2px solid var(--term-teal); background: transparent; transition: background 0.2s; }
.social-info:hover  { background: rgba(80, 255, 247, 0.1); }
.social-info.active { background: rgba(80, 255, 247, 0.2); box-shadow: inset 0 0 10px rgba(80, 255, 247, 0.2); }
.social-arrow   { width: 4vw; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.social-arrow:hover { background: var(--term-teal); color: black; box-shadow: 0 0 15px var(--term-teal); }
.socials-preview { display: flex; flex-direction: column; gap: 1.5vh; }
.social-preview-thumb { flex: 1; border: 2px solid var(--term-teal); overflow: hidden; position: relative; background: #000; }
.social-preview-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.social-preview-desc { height: 8vh; border: 2px solid var(--term-teal); padding: 1vh; font-family: var(--font-body); font-size: 0.75rem; opacity: 0.8; flex-shrink: 0; }
.icon-svg { width: 1.2rem; height: 1.2rem; fill: var(--term-teal); }

/* ── Articles list modal ──────────────────────────────────────── */

.articles-list-modal { width: 90vw; height: 85vh; padding: 2.5vh; display: flex; flex-direction: column; }
.articles-list-container { overflow-y: auto; display: flex; flex-direction: column; gap: 2vh; flex: 1; }
.articles-list-container::-webkit-scrollbar       { width: 14px; display: block; }
.articles-list-container::-webkit-scrollbar-track { background: transparent; }
.articles-list-container::-webkit-scrollbar-thumb { background-color: var(--term-teal); border: 5px solid transparent; background-clip: content-box; border-radius: 99px; }
.article-row { display: grid; grid-template-columns: 250px 1fr; gap: 2vw; border: 2px solid var(--term-teal); padding: 1.5vh; cursor: pointer; transition: background 0.2s; }
.article-row:hover { background: rgba(80, 255, 247, 0.1); }
.article-row-thumb { width: 100%; height: 140px; border: 1px solid var(--term-teal); overflow: hidden; background: #000; position: relative; }
.article-row-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.article-row:hover .article-row-thumb img { transform: scale(1.1); }
.article-row-info  { display: flex; flex-direction: column; justify-content: flex-start; }
.article-row-title { font-family: var(--font-head); font-size: 1.2rem; margin-bottom: 1vh; color: var(--term-teal); }
.article-row-desc  { font-family: var(--font-body); font-size: 0.9rem; opacity: 0.8; line-height: 1.4; }

/* ── Repos modal ──────────────────────────────────────────────── */

.repos-modal { width: 90vw; height: 85vh; padding: 2.5vh; display: flex; flex-direction: column; }
.repos-controls { display: flex; gap: 1.5vw; margin-bottom: 2vh; border-bottom: 2px solid var(--term-teal); padding-bottom: 2vh; align-items: center; }
.search-box     { flex: 2; display: flex; align-items: center; border: 2px solid var(--term-teal); padding: 0.5vh 1vh; background: black; height: 40px; }
.search-icon-symbol { color: var(--term-teal); font-family: var(--font-head); font-weight: bold; font-size: 1.2rem; margin-right: 10px; margin-top: -2px; }
#repo-search    { background: transparent; border: none; color: var(--term-teal); font-family: var(--font-head); font-size: 0.8rem; width: 100%; outline: none; height: 100%; }
#repo-search::placeholder { color: rgba(80, 255, 247, 0.5); }
.repo-select    { flex: 1; background: black; color: var(--term-teal); border: 2px solid var(--term-teal); font-family: var(--font-head); font-size: 0.7rem; padding: 0.5vh; outline: none; cursor: pointer; height: 40px; }
.repos-list-container { overflow-y: auto; display: flex; flex-direction: column; gap: 1.5vh; flex: 1; }
.repos-list-container::-webkit-scrollbar       { width: 14px; display: block; }
.repos-list-container::-webkit-scrollbar-track { background: transparent; }
.repos-list-container::-webkit-scrollbar-thumb { background-color: var(--term-teal); border: 5px solid transparent; background-clip: content-box; border-radius: 99px; }
.repo-row-card  { border: 2px solid var(--term-teal); padding: 1.5vh; position: relative; background: rgba(0,0,0,0.3); transition: background 0.2s; }
.repo-row-card:hover { background: rgba(80, 255, 247, 0.05); }
.repo-header    { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1vh; padding-bottom: 0.5vh; }
.repo-name      { font-family: var(--font-head); font-size: 1rem; background: var(--term-teal); color: black; padding: 2px 5px; }
.repo-get-btn   { position: absolute; top: 1.5vh; right: 1.5vh; background: transparent; border: 2px solid var(--term-teal); color: var(--term-teal); font-family: var(--font-head); font-size: 0.55rem; padding: 2px 4px; cursor: pointer; transition: all 0.2s; }
.repo-get-btn:hover { background: var(--term-teal); color: black; box-shadow: 0 0 10px var(--term-teal); }
.repo-desc-row  { font-family: var(--font-body); font-size: 0.85rem; opacity: 0.9; margin-bottom: 1vh; padding-right: 60px; }
.repo-meta      { display: flex; gap: 2vw; font-size: 0.7rem; opacity: 0.6; font-family: var(--font-body); }

/* ── Article inline table + code blocks ───────────────────────── */

.article-table { width: 100%; border-collapse: collapse; margin: 2vh 0; font-family: var(--font-body); font-size: 0.8rem; }
.article-table th, .article-table td { border: 1px solid var(--term-teal); padding: 10px; text-align: left; }
.article-table th { background: rgba(80, 255, 247, 0.1); color: var(--term-teal); font-weight: bold; text-transform: uppercase; }
.code-wrapper   { position: relative; background: #000; border: 1px solid rgba(80, 255, 247, 0.5); padding: 10px; margin: 10px 0; display: flex; justify-content: space-between; align-items: center; border-radius: 2px; }
.code-content   { font-family: var(--font-body); font-size: 0.8rem; white-space: pre-wrap; color: #fff; flex: 1; }
.copy-btn       { background: var(--term-bg); border: 1px solid var(--term-teal); color: var(--term-teal); padding: 4px 8px; cursor: pointer; font-family: var(--font-head); font-size: 0.5rem; transition: all 0.2s; margin-left: 10px; flex-shrink: 0; }
.copy-btn:hover { background: var(--term-teal); color: #000; box-shadow: 0 0 10px var(--term-teal); }

/* ── Mobile hamburger button — hidden on desktop ──────────────── */

.mobile-nav-toggle { display: none; }

/* ── Mobile terminal input row
     Hidden by default everywhere. JS adds .active to reveal it.
     The class-based approach avoids !important fights with inline styles,
     allowing hideMobileTermInput() to work correctly on touch devices.    ── */

#mobile-term-row { display: none; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — ≤ 900px (tablet + mobile)
   ════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 900px) {

    /* Base layout switches to a natural scrolling column */
    body {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
        padding: 2vh 4vw;
    }
    .content-wrapper { height: auto; display: flex; flex-direction: column; }

    /* Header: show only the site title */
    header { justify-content: center; gap: 0.5vw; flex-wrap: wrap; }
    header span:not(:first-child) { display: none; }

    /* Hamburger button replaces the grid nav */
    .mobile-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: transparent;
        border: none;
        color: var(--term-teal);
        font-family: var(--font-head);
        font-size: 0.75rem;
        padding: 1.5vh 3vw;
        cursor: pointer;
        letter-spacing: 1px;
        text-shadow: 0 0 4px rgba(80, 255, 247, 0.4);
        min-height: 44px;
    }
    .mobile-nav-toggle:hover,
    .mobile-nav-toggle:focus { background: rgba(80, 255, 247, 0.1); outline: none; }

    .hamburger-arrow { transition: transform 0.25s ease; font-size: 0.6rem; }
    #main-nav.open .hamburger-arrow { transform: rotate(180deg); }

    /* Nav collapses to a vertical list; items are only visible when #main-nav.open */
    nav#main-nav { display: flex; flex-direction: column; border: 2px solid var(--term-teal); margin-bottom: 1.5vh; background: var(--term-bg); position: relative; z-index: 2000; }
    nav#main-nav .nav-item { display: none; border-right: none; border-top: 1px solid rgba(80, 255, 247, 0.3); text-align: left; padding: 1.5vh 3vw; font-size: 0.75rem; min-height: 44px; align-items: center; }
    nav#main-nav.open .nav-item { display: flex; }

    /* Single-column stage layout */
    .main-stage { display: flex; flex-direction: column; height: auto; overflow: visible; gap: 3vh; }
    .left-panel  { height: auto; flex-shrink: 0; overflow: visible; }

    /* Lain image gets a fixed viewport height so it looks intentional */
    .img-wrapper { height: 45vh; min-height: 300px; }

    /* CONF / TERMINAL / FEED sub-nav wraps naturally */
    .terminal-nav { display: flex; flex-wrap: wrap; }
    .terminal-nav .nav-item { flex: 1; border-right: 2px solid var(--term-teal); min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .terminal-nav .nav-item:last-child { border-right: none; }

    /* Desktop keyboard prompt is hidden on mobile — the mobile input row replaces it */
    #hack-input-line { display: none !important; }

    /* Mobile terminal input: revealed only when JS adds .active */
    #mobile-term-row.active {
        display: flex;
        align-items: center;
        gap: 8px;
        border-top: 1px solid rgba(80, 255, 247, 0.4);
        padding: 8px;
        flex-shrink: 0;
        background: rgba(0,0,0,0.5);
    }
    #mobile-term-input {
        flex: 1;
        background: transparent;
        border: 1px solid var(--term-teal);
        color: var(--term-teal);
        font-family: var(--font-body);
        font-size: 0.8rem;
        padding: 8px 10px;
        outline: none;
        min-height: 38px;
        text-shadow: none;
    }
    #mobile-term-input::placeholder { color: rgba(80, 255, 247, 0.4); font-size: 0.7rem; }
    #mobile-term-submit {
        background: transparent;
        border: 1px solid var(--term-teal);
        color: var(--term-teal);
        font-family: var(--font-head);
        font-size: 0.55rem;
        padding: 8px 12px;
        cursor: pointer;
        min-height: 38px;
        transition: all 0.2s;
        text-shadow: none;
        white-space: nowrap;
    }
    #mobile-term-submit:hover,
    #mobile-term-submit:active { background: var(--term-teal); color: black; }

    /* Right panel */
    .right-panel  { height: auto; overflow: visible; display: flex; flex-direction: column; gap: 3vh; }
    .repo-row     { grid-template-columns: 1fr; }
    .bottom-split { display: flex; flex-direction: column; height: auto; overflow: visible; gap: 3vh; }
    .articles-stack { display: flex; flex-direction: column; height: auto; }
    .article-card   { height: auto; padding: 2.5vh; min-height: 160px; }
    .article-thumb  { min-height: 100px; }
    .musiee-box     { height: auto; }

    /* Hide heavy ASCII art on small screens */
    .branding-text,
    .musiee-logo { display: none; }

    /* BIOS footer stacks vertically */
    .bios-footer { display: flex; flex-direction: column; text-align: center; align-items: center; gap: 2vh; padding-top: 1vh; }
    .footer-right, .footer-left { text-align: center; }
    .inputs-grid { transform: none; justify-content: center; text-align: center; }

    /* Modals go nearly full-screen */
    .modal-overlay { padding-top: 8vh; padding-left: 2vw; padding-right: 2vw; }
    .expanded-article, .expanded-socials, .articles-list-modal, .repos-modal { width: 96vw; height: 88vh; padding: 4vw; }
    .expanded-article { display: flex; flex-direction: column; overflow-y: auto; gap: 3vh; }
    .article-main   { border-right: none; padding-right: 0; overflow-y: visible; height: auto; }
    .article-sidebar { overflow-y: visible; border-top: 1px dashed var(--term-teal); padding-top: 2vh; }
    .socials-content-grid { display: flex; flex-direction: column; overflow-y: auto; gap: 2vh; }
    .social-preview-thumb { height: 25vh; position: relative; }
    .article-row { grid-template-columns: 1fr; text-align: center; }
    .article-row-thumb { height: 160px; }
    .repos-controls { flex-direction: column; align-items: stretch; gap: 2vh; }
    .repo-select, #repo-search { font-size: 0.65rem; }

    /* CONF file browser: stack columns vertically */
    .conf-body { display: flex; flex-direction: column; overflow-y: auto; }
    .conf-col  { border-right: none; border-bottom: 1px dashed rgba(80, 255, 247, 0.3); padding-bottom: 10px; margin-bottom: 10px; height: auto; max-height: 180px; }
    .conf-col:last-child { border-bottom: none; }

    /* Game iframe: maintain 16:9 within viewport bounds */
    #game-wrapper { width: 95vw; height: calc(95vw * 9 / 16); max-height: 90vh; }

    /* Minimum 44px tap targets for touch accessibility */
    .nav-item, .btn-get, .repo-get-btn, .social-arrow, .social-info { min-height: 44px; }
}