/* ============================================================================
   template-test.css — "Corrupted Desktop" news theme
   Scoped entirely under .tmpl-corrupted-desktop so it never touches the other
   news pages. Layers on top of 7.css (win7.css v0.17.0) — never replaces it.
   Zoned blend: Win9x CRT (Desktop Explorer) for utility chrome,
   neon vaporwave (Broken Reality) for the hero + YouTube wall.
   See docs/superpowers/specs/2026-07-27-template-test-corrupted-desktop-design.md
   ========================================================================== */

/* ---------- 1. Design tokens ---------------------------------------------- */
.tmpl-corrupted-desktop{
    /* CRT zone (Desktop Explorer) */
    --crt-teal:#008080; --crt-face:#c0c0c0; --crt-face-2:#d4d0c8;
    --crt-shadow:#808080; --crt-dark:#404040; --crt-light:#dfdfdf; --crt-hilite:#fff;
    --crt-navy-1:#000080; --crt-navy-2:#1084d0;
    --crt-green:#00ff66; --crt-amber:#ffb000; --crt-error:#aa0000;

    --bevel-out:
        inset -1px -1px 0 var(--crt-dark),  inset  1px  1px 0 var(--crt-hilite),
        inset -2px -2px 0 var(--crt-shadow),inset  2px  2px 0 var(--crt-light);
    --bevel-in:
        inset  1px  1px 0 var(--crt-dark),  inset -1px -1px 0 var(--crt-hilite),
        inset  2px  2px 0 var(--crt-shadow),inset -2px -2px 0 var(--crt-light);

    /* Vaporwave zone (Broken Reality) */
    --vw-void-1:#1a0b3d; --vw-void-2:#2d1b69;
    --vw-pink:#ff71ce; --vw-cyan:#01cdfe; --vw-purple:#b967ff;
    --vw-lime:#05ffa1; --vw-pastel:#fffb96; --vw-chrome:#e8e0ff;

    --vw-sunset:linear-gradient(180deg,#ff71ce 0%,#b967ff 50%,#01cdfe 100%);
    --vw-titlebar:linear-gradient(180deg,#ff9ede 0%,#ff71ce 45%,#c94fb0 100%);
    --vw-rainbow:linear-gradient(90deg,#ff71ce,#fffb96,#05ffa1,#01cdfe,#b967ff);
    --vw-glass:linear-gradient(135deg,rgba(1,205,254,.22),rgba(185,103,255,.22));

    --vw-glow-cyan:0 0 8px rgba(1,205,254,.85),0 0 20px rgba(1,205,254,.45);
    --vw-glow-pink:0 0 8px rgba(255,113,206,.85),0 0 20px rgba(255,113,206,.45);
    --vw-glow-lime:0 0 6px rgba(5,255,161,.85),0 0 16px rgba(5,255,161,.4);

    /* spacing */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
}

/* ---------- 2. Global scaffold + overlays --------------------------------- */
/* NOTE (stacking guard): the wrapper must NOT create a stacking context, or the
   scanline/flicker overlays would trap above the sticky site header. Keep it to
   position:relative (no z-index) + overflow-x — do NOT add transform/filter/
   opacity<1/will-change here. */
.tmpl-corrupted-desktop {
    position: relative;
    color: #fff;
    padding-top: var(--sp-5);
    /* overflow-x:hidden; */
    font-family: Tahoma,"Segoe UI",sans-serif;
}
/* Per-panel CRT scanlines + flicker.
   The "monitor lines" render on each panel (not the whole page / container),
   so every window reads as its own CRT screen. One ::after per panel carries
   the scanline gradient plus a subtle intensity flicker. Video cards already
   use ::before (holographic sheen), so scanlines live on ::after. */
.tmpl-corrupted-desktop .tt-hero,
.tmpl-corrupted-desktop .tt-taskbar,
.tmpl-corrupted-desktop .tt-explorer,
.tmpl-corrupted-desktop .tt-twitter,
.tmpl-corrupted-desktop .tt-subreddit,
.tmpl-corrupted-desktop .video-feed-container .window{
    position:relative;
}
.tmpl-corrupted-desktop .tt-hero::after,
.tmpl-corrupted-desktop .tt-taskbar::after,
.tmpl-corrupted-desktop .tt-explorer::after,
.tmpl-corrupted-desktop .tt-twitter::after,
.tmpl-corrupted-desktop .tt-subreddit::after,
.tmpl-corrupted-desktop .video-feed-container .window::after{
    content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
    mix-blend-mode:multiply;
    animation:tt-crt-flicker .18s steps(2) infinite;
}

/* ---------- 3. Hero (vaporwave) ------------------------------------------- */
.tmpl-corrupted-desktop .tt-hero{
    height:clamp(240px,34vw,360px);
    margin-bottom:var(--sp-5);
    border:2px solid var(--vw-cyan) !important;
    box-shadow:var(--vw-glow-cyan) !important;
    overflow:hidden; position:relative;
}
.tmpl-corrupted-desktop .tt-hero > .title-bar{
    height:28px; background:var(--vw-titlebar) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.tmpl-corrupted-desktop .tt-hero > .title-bar .title-bar-text{
    font-family:"Space Grotesk",sans-serif; font-weight:700; color:#3a003a;
    text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.tmpl-corrupted-desktop .tt-hero__body{
    position:relative; height:100%; padding:0;
    background:var(--vw-sunset) !important; background-size:100% 220% !important;
    animation:tt-sunset-pan 12s ease-in-out infinite alternate;
    display:flex; align-items:center; justify-content:center;
    border:none !important;
}
.tmpl-corrupted-desktop .tt-hero__grid{
    position:absolute; left:-25%; right:-25%; bottom:0; height:46%; z-index:0;
    background-image:
        linear-gradient(var(--vw-cyan) 1px, transparent 1px),
        linear-gradient(90deg, var(--vw-cyan) 1px, transparent 1px);
    background-size:44px 44px;
    transform:perspective(320px) rotateX(72deg); transform-origin:bottom center;
    opacity:.55; animation:tt-grid-scroll 8s linear infinite;
}
.tmpl-corrupted-desktop .tt-hero__title{
    position:relative; z-index:1; margin:0; text-align:center;
    font-family:"Chakra Petch",sans-serif; font-weight:700;
    font-size:clamp(2rem,6vw,4rem); letter-spacing:2px; color:#fff;
    text-shadow:var(--vw-glow-pink), 0 0 2px #fff;
    animation:tt-neon-pulse 2.4s ease-in-out infinite;
}

/* ---------- 4. Ticker (CRT taskbar) --------------------------------------- */
.tt-taskbar {
    overflow-x: hidden;
}

.tmpl-corrupted-desktop .tt-taskbar{
    display:flex; height:64px; margin-bottom:var(--sp-5);
    background:var(--crt-face); box-shadow:var(--bevel-out); padding:3px;
}
.tmpl-corrupted-desktop .tt-taskbar .ticker_logo{
    background:var(--crt-face) !important; box-shadow:var(--bevel-in);
    height:100%; display:flex; align-items:center; justify-content:center;
}
.tmpl-corrupted-desktop .tt-taskbar .ticker-wrap{
    background:#000 !important; box-shadow:var(--bevel-in); height:100%;
}

.tmpl-corrupted-desktop .tt-taskbar .ticker_item{
    color:var(--crt-green) !important; text-shadow:var(--vw-glow-lime);
    font-family:"VT323",monospace; font-size:1.6rem;
}

/* ---------- 5. Latest feed — CRT explorer (#news-feed) -------------------- */
.tmpl-corrupted-desktop .tt-explorer{
    background:var(--crt-face) !important; box-shadow:var(--bevel-out) !important;
    border:none !important; margin-bottom:var(--sp-5);
}
.tmpl-corrupted-desktop .tt-explorer > .title-bar{
    height:24px;
    background:linear-gradient(90deg,var(--crt-navy-1),var(--crt-navy-2)) !important;
}
.tmpl-corrupted-desktop .tt-explorer > .title-bar .title-bar-text{
    font-family:"VT323",monospace; font-size:18px; color:#fff;
}
/* Kill 7.css's Aero white glow on the CRT title text for the Latest + /vg/
   panels (the subreddit panel keeps it, since its title bar mimics Twitter). */
.tmpl-corrupted-desktop .tt-explorer:not(.tt-subreddit) > .title-bar .title-bar-text{
    text-shadow:none;
}
.tmpl-corrupted-desktop .tt-explorer .window-body{
    background:var(--crt-face-2) !important; box-shadow:var(--bevel-in);
    max-height:468px; height:100%; overflow-y:auto; padding:var(--sp-2); color:#000;
}
.tmpl-corrupted-desktop .tt-explorer .news-feed-container{
    padding:var(--sp-2); margin-bottom:var(--sp-2);
    background:var(--crt-face); box-shadow:var(--bevel-out); color:#000;
}
.tmpl-corrupted-desktop .tt-explorer .news-feed-container:hover{ box-shadow:var(--bevel-in); }
.tmpl-corrupted-desktop .tt-explorer .news-feed-container.is-viral{
    box-shadow:var(--bevel-out),0 0 0 2px var(--crt-amber);
}
.tmpl-corrupted-desktop .tt-explorer .news-source{ color:black; font-weight:100; font-family:"VT323",monospace; font-size:14px; }
.tmpl-corrupted-desktop .tt-explorer .news-text{ color:#000; font-size:14px; font-weight:700; line-height:1.25; }
.tmpl-corrupted-desktop .tt-explorer .news-timestamp{ color:#0a7a2f; font-family:"VT323",monospace; font-size:14px; }
.tmpl-corrupted-desktop .tt-explorer .news-indexscore{ color:var(--crt-navy-1); font-family:"VT323",monospace; font-size:14px; }
.tmpl-corrupted-desktop .tt-explorer .divider{ height:2px; box-shadow:var(--bevel-in); margin:var(--sp-2) 0; border:none; }
.tmpl-corrupted-desktop .tt-explorer .instruction-primary{ color:var(--crt-navy-1); font-family:"VT323",monospace; }

/* ---------- 5b. Latest panel height-matches the YouTube wall -------------- */
/* At >=992px (side-by-side) the Latest window is sized to the YouTube wall's
   pixel height by the sync script at the bottom of the view (equal-height via
   flex-stretch proved unreliable in this grid stack). The window is a flex
   column that clips to that height; the news list scrolls inside. Below 992px
   (stacked) the script clears the height and it reverts to its max-height. */
.tmpl-corrupted-desktop .tt-row-main{ margin-bottom:var(--sp-5); }
@media (min-width:992px){
    .tmpl-corrupted-desktop .tt-fill{
        display:flex; flex-direction:column; overflow:hidden;
        margin-bottom:0 !important;
        /* height is set inline (px) by the sync script to equal the wall */
    }
    .tmpl-corrupted-desktop .tt-fill > .window-body{
        flex:1 1 auto; min-height:0; max-height:none !important;
    }
}

/* ---------- 6. YouTube video wall (#youtube-video-feed) ------------------- */
.tmpl-corrupted-desktop #youtube-video-feed{
    display:grid; gap:var(--sp-5); grid-template-columns:repeat(2,1fr);
}
@media (min-width:1400px){
    .tmpl-corrupted-desktop #youtube-video-feed{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:991.98px){
    .tmpl-corrupted-desktop #youtube-video-feed{ grid-template-columns:1fr; }
}
.tmpl-corrupted-desktop .video-feed-container{ margin:0 !important; display:block; color:#fff; }

/* card window — override 7.css Aero composite (background) + JS inline styles */
.tmpl-corrupted-desktop .video-feed-container .window{
    margin-bottom:0 !important;
    background:var(--vw-void-2) !important;   /* replaces Aero composite + inline #805ba5 */
    border:1px solid var(--vw-cyan) !important;
    box-shadow:var(--vw-glow-cyan);
    transition:transform .18s ease, box-shadow .18s ease;
    overflow:hidden; position:relative;
}
.tmpl-corrupted-desktop .video-feed-container .title-bar{
    height:26px; background:var(--vw-titlebar) !important;
}
.tmpl-corrupted-desktop .video-feed-container .title-bar-text{
    font-family:"Space Grotesk",sans-serif; font-weight:700; color:#3a003a;
}
.tmpl-corrupted-desktop .video-feed-container .window-body{
    background:var(--vw-glass) !important; position:relative; padding:0 0 var(--sp-2);
}
.tmpl-corrupted-desktop .video-feed-container .window-body img{
    width:100% !important; min-height:0 !important;
    object-fit:cover; display:block;
}
.tmpl-corrupted-desktop .video-game-title{
    font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:18px; line-height:1.2;
    color:#fff; text-shadow:var(--vw-glow-pink);
    margin:.5rem 0 .25rem; padding:0 .4rem;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; min-height:44px;
}
.tmpl-corrupted-desktop .video-feed-container .status-bar{ background:var(--vw-void-1); }
.tmpl-corrupted-desktop .video-feed-container .status-bar-field{
    color:var(--vw-lime); font-family:"VT323",monospace; font-size:14px;
    text-shadow:var(--vw-glow-lime); border-color:rgba(1,205,254,.35);
}
/* hover: lift + bloom + holographic sheen + glitch */
.tmpl-corrupted-desktop .video-feed-container:hover .window{
    transform:translateY(-6px) scale(1.02); z-index:5;
    box-shadow:var(--vw-glow-cyan),var(--vw-glow-pink);
}
.tmpl-corrupted-desktop .video-feed-container .window::before{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
    transform:translateX(-120%); transition:transform .6s ease;
}
.tmpl-corrupted-desktop .video-feed-container:hover .window::before{ transform:translateX(120%); }
.tmpl-corrupted-desktop .video-feed-container:hover .video-game-title{ animation:tt-glitch .3s steps(2) 2; }

/* ---------- 7. Buttons / scrollbars / dividers ---------------------------- */
.tmpl-corrupted-desktop .tt-explorer button{
    background:var(--crt-face); box-shadow:var(--bevel-out); border:none; color:#000;
}
.tmpl-corrupted-desktop .tt-explorer button:active{ box-shadow:var(--bevel-in); }
.tmpl-corrupted-desktop .video-feed-container .title-bar-controls button:hover{ box-shadow:var(--vw-glow-cyan); }
.tmpl-corrupted-desktop .tt-explorer .window-body::-webkit-scrollbar{ width:16px; }
.tmpl-corrupted-desktop .tt-explorer .window-body::-webkit-scrollbar-track{ background:var(--crt-face); box-shadow:var(--bevel-in); }
.tmpl-corrupted-desktop .tt-explorer .window-body::-webkit-scrollbar-thumb{ background:var(--crt-face); box-shadow:var(--bevel-out); }

/* ---------- 8. Keyframes --------------------------------------------------- */
@keyframes tt-sunset-pan{ from{background-position:50% 0} to{background-position:50% 100%} }
@keyframes tt-grid-scroll{ from{background-position:0 0,0 0} to{background-position:0 44px,0 44px} }
@keyframes tt-crt-flicker{ 0%{opacity:.5} 100%{opacity:1} }
@keyframes tt-neon-pulse{ 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.35)} }
@keyframes tt-glitch{
    0%{transform:translate(0);text-shadow:var(--vw-glow-pink)}
    50%{transform:translate(-2px,1px);text-shadow:2px 0 var(--vw-cyan),-2px 0 var(--vw-pink)}
    100%{transform:translate(0)}
}

/* ---------- 9b. /vg/ board feed — CRT (#active-community-feed) ------------ */
.tmpl-corrupted-desktop .tt-scroll{ height:462px; overflow-y:auto; overflow-x:hidden; }
.tmpl-corrupted-desktop .tt-chan .window-body{ background:var(--crt-face-2) !important; box-shadow:var(--bevel-in); color:#000; }
.tmpl-corrupted-desktop .tt-chan .search-container-right{ background:var(--crt-face-2); padding-top:var(--sp-1); }
.tmpl-corrupted-desktop .tt-chan .sm-searchbar{ box-shadow:var(--bevel-in); background:#fff; border:none; }
.tmpl-corrupted-desktop .tt-chan .view-count-container{ color:#000; box-shadow:var(--bevel-out); margin-bottom:var(--sp-1); }
.tmpl-corrupted-desktop .tt-chan .view-count-container:hover{ box-shadow:var(--bevel-in); }
.tmpl-corrupted-desktop .tt-chan .large-progress-number{ color:var(--crt-navy-1); font-family:"VT323",monospace; }
.tmpl-corrupted-desktop .tt-chan .view-count-game-title{ color:#000; font-weight:700; }
.tmpl-corrupted-desktop .tt-chan .progressbar-text{ background:var(--crt-navy-2); color:#fff; font-family:"VT323",monospace; }
.tmpl-corrupted-desktop .tt-chan .divider{ box-shadow:var(--bevel-in); height:2px; border:none; margin:var(--sp-1) 0; }
.tmpl-corrupted-desktop .tt-chan .instruction-primary{ color:var(--crt-navy-1); font-family:"VT323",monospace; }
/* Discord banner footer (CRT tray) */
.tmpl-corrupted-desktop .tt-chan-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-1);
    background: var(--crt-face);
    box-shadow: var(--bevel-out);
}
.tmpl-corrupted-desktop .tt-chan-footer { max-width:100%; height:auto; display:block; padding:8px; }

.tt-chan-footer-img {
    height: 44px;
}
/* ---------- 9c. Twitter feed — vaporwave glass (#twitter-feed) ------------ */
.tmpl-corrupted-desktop .tt-twitter {
    border: 1px solid var(--vw-cyan) !important;
    box-shadow: var(--vw-glow-cyan) !important;
}
.tmpl-corrupted-desktop .tt-twitter > .title-bar{ height:26px; background:var(--vw-titlebar) !important; }
.tmpl-corrupted-desktop .tt-twitter > .title-bar .title-bar-text{ font-family:"Space Grotesk",sans-serif; font-weight:700; color:#3a003a; }
.tmpl-corrupted-desktop .tt-twitter .window-body{ background:var(--vw-void-2) !important; }
.tmpl-corrupted-desktop .tt-twitter .twitter-card{
    background:rgba(1,205,254,.06); border:1px solid rgba(1,205,254,.25); color:var(--vw-chrome);
}
.tmpl-corrupted-desktop .tt-twitter .twitter-card:hover{ box-shadow:var(--vw-glow-cyan); }
.tmpl-corrupted-desktop .tt-twitter .twitter-card-name{ color:#fff; }
.tmpl-corrupted-desktop .tt-twitter .twitter-card-handle,
.tmpl-corrupted-desktop .tt-twitter .twitter-card-time{ color:var(--vw-cyan); }
.tmpl-corrupted-desktop .tt-twitter .twitter-card-content{ color:var(--vw-chrome); }
.tmpl-corrupted-desktop .tt-twitter .instruction-primary{ color:var(--vw-cyan); }

/* ---------- 9c-2. Subreddit feed — CRT body, Twitter-style title bar ------
   The panel carries the .tt-explorer class, so its body inherits the readable
   CRT scheme (silver face, dark text) identically to the Latest feed. Only the
   title bar is overridden to match the Twitter panel (vaporwave pink glass). */
.tmpl-corrupted-desktop .tt-subreddit > .title-bar{
    height:26px; background:var(--vw-titlebar) !important;
}
.tmpl-corrupted-desktop .tt-subreddit > .title-bar .title-bar-text{
    font-family:"Space Grotesk",sans-serif; font-weight:700; color:#3a003a;
}
/* setupDynamicTabs() removes and regenerates the tab panels on every load, so
   inline HTML styles on #leaks-news-feed are wiped. Style the panels here so
   they apply to whatever articles the script creates. */
.tmpl-corrupted-desktop .tt-subreddit [role="tabpanel"]{
    padding:0; margin-bottom:0; background-color:#cac6be;
}

/* ---------- 9d. Modals above the scanline/flicker overlays ---------------- */
/* The z-40/41 overlays live inside the wrapper; keep dialogs above them. */
.tmpl-corrupted-desktop .window[role="dialog"]{ z-index:60; }
.tmpl-corrupted-desktop .tt-notepad .window-body{ background:#fff; color:#000; }
.tmpl-corrupted-desktop .tt-notepad .thread-reply{ border-bottom:1px dashed var(--crt-shadow); padding:var(--sp-1) 0; }

/* ---------- 9. Accessibility: reduced motion ------------------------------ */
@media (prefers-reduced-motion: reduce){
    .tmpl-corrupted-desktop *,
    .tmpl-corrupted-desktop *::before,
    .tmpl-corrupted-desktop *::after{
        animation:none !important; transition:none !important;
    }
    .tmpl-corrupted-desktop .tt-hero__body{ background-position:50% 50% !important; }
}