/* ==================================================================
   Virtual Atari — site theme
   Design language: the Atari 2600 console itself.
   Woodgrain front panel, black console plastic, cartridge labels,
   and the rainbow stripe from classic Atari packaging.
   ================================================================== */

:root{
    --tv-black:   #121014;   /* the darkened living room            */
    --panel:      #1c1922;   /* console plastic                     */
    --panel-2:    #262130;   /* raised plastic                      */
    --line:       #3a3244;   /* seams between plastic parts         */
    --wood-hi:    #b07a45;   /* woodgrain highlights                */
    --wood-mid:   #85552e;
    --wood-dark:  #59371b;
    --atari-red:  #ea1c29;   /* the site's historic link red        */
    --red-deep:   #b3121d;
    --phosphor:   #f2ead8;   /* warm CRT white                      */
    --dim:        #a89d90;
    --amber:      #f5b120;

    --font-display:'Press Start 2P', monospace;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
    margin:0;
    background:var(--tv-black);
    color:var(--phosphor);
    font:16px/1.6 var(--font-body);
}
img{ max-width:100%; }
a{ color:var(--atari-red); text-decoration:none; }
a:hover{ color:#ff4550; text-decoration:underline; }

.skip-link{
    position:absolute; left:-999px; top:0; z-index:99;
    background:var(--atari-red); color:#fff; padding:8px 14px;
    font:10px var(--font-display);
}
.skip-link:focus{ left:8px; }

/* ---- Masthead: the woodgrain front panel ------------------------- */
.masthead{
    background:
        repeating-linear-gradient(90deg,
            rgba(0,0,0,.16) 0 2px, transparent 2px 6px,
            rgba(255,255,255,.05) 6px 7px, transparent 7px 19px,
            rgba(0,0,0,.10) 19px 21px, transparent 21px 34px),
        linear-gradient(180deg, var(--wood-hi), var(--wood-mid) 42%, var(--wood-dark));
    border-bottom:4px solid #120b06;
    box-shadow:0 3px 14px rgba(0,0,0,.7);
}
.masthead-inner{
    max-width:var(--maxw); margin:0 auto; padding:22px 20px 18px;
    display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 28px;
}
.brand{ display:block; text-decoration:none; }
.brand:hover{ text-decoration:none; }
.brand-name{
    display:block;
    font:clamp(18px,3.4vw,30px) var(--font-display);
    color:var(--phosphor);
    text-shadow:3px 3px 0 rgba(0,0,0,.55);
    letter-spacing:1px;
}
.brand-tag{
    display:block; margin-top:8px;
    font:9px var(--font-display);
    color:#ffd9a1;
    text-shadow:1px 1px 0 rgba(0,0,0,.6);
}
.sitemenu{ margin-left:auto; display:flex; flex-wrap:wrap; gap:4px 6px; }
.sitemenu a{
    font:8px/1 var(--font-display);
    color:var(--phosphor);
    background:rgba(0,0,0,.34);
    border:1px solid rgba(0,0,0,.55);
    border-top-color:rgba(255,255,255,.18);
    padding:8px 10px 7px;
    text-transform:uppercase;
}
.sitemenu a:hover{ background:var(--red-deep); color:#fff; text-decoration:none; }
.sitemenu a.is-active{ background:var(--atari-red); color:#fff; }

/* ---- Rainbow stripe from the cartridge art ----------------------- */
.fuji-stripe{
    height:7px;
    background:linear-gradient(90deg,
        #e4231f 0 16.6%, #f57e20 0 33.3%, #f5b120 0 50%,
        #0aa14a 0 66.6%, #1b75bb 0 83.3%, #7a3f98 0 100%);
    border-bottom:2px solid #000;
}

/* ---- Page scaffolding -------------------------------------------- */
.page{ max-width:var(--maxw); margin:0 auto; padding:22px 20px 40px; }
.with-rail{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:26px; align-items:start; }
.rail{ position:sticky; top:14px; }

h1,h2,h3{ font-family:var(--font-display); font-weight:400; line-height:1.5; }
h1{ font-size:17px; margin:.2em 0 .8em; }
h2{ font-size:13px; color:var(--amber); margin:2em 0 .8em; }
h3{ font-size:11px; margin:1.4em 0 .6em; }

/* ---- Letter menu (the classic [0-9] A-Z games menus) ------------- */
.letter-menu{
    display:flex; flex-wrap:wrap; align-items:center; gap:5px;
    padding:10px 12px; margin:0 0 18px;
    background:var(--panel); border:1px solid var(--line); border-radius:4px;
}
.letter-menu-label{
    font:8px var(--font-display); color:var(--dim);
    margin-right:6px; text-transform:uppercase;
}
.letter-menu a{
    font:10px/1 var(--font-display);
    color:var(--phosphor); background:var(--panel-2);
    border:1px solid var(--line); border-radius:3px;
    padding:7px 8px 6px; min-width:30px; text-align:center;
}
.letter-menu a:hover{ background:var(--atari-red); color:#fff; text-decoration:none; }
.letter-menu a.is-here{ background:var(--atari-red); color:#fff; }

/* ---- Toolbar: search / random / count ---------------------------- */
.toolbar{
    display:flex; flex-wrap:wrap; align-items:center; gap:12px;
    margin:0 0 18px;
}
.search-box{ position:relative; flex:1 1 260px; }
.search-box input{
    width:100%;
    background:#0c0a0f; color:var(--phosphor);
    border:2px solid var(--line); border-radius:4px;
    padding:12px 14px 11px 40px;
    font:12px var(--font-display);
    outline-offset:2px;
}
.search-box input:focus{ border-color:var(--atari-red); }
.search-box input::placeholder{ color:#5d5566; font-size:10px; }
.search-box::before{
    content:"\25B8"; /* joystick-ish pointer */
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color:var(--atari-red); font-size:16px; pointer-events:none;
}
.btn{
    display:inline-block; cursor:pointer;
    font:9px/1 var(--font-display); text-transform:uppercase;
    color:var(--phosphor); background:var(--panel-2);
    border:1px solid var(--line); border-top-color:#4d4360;
    border-radius:4px; padding:12px 14px 11px;
    box-shadow:0 2px 0 #000;
}
.btn:hover{ background:#332b40; color:#fff; text-decoration:none; }
.btn:active{ transform:translateY(1px); box-shadow:0 1px 0 #000; }
.btn-red{ background:var(--atari-red); border-color:var(--red-deep); border-top-color:#ff6d76; color:#fff; }
.btn-red:hover{ background:#ff2f3c; }
.count-pill{
    font:9px var(--font-display); color:var(--dim);
    margin-left:auto; white-space:nowrap;
}

/* ---- The cartridge crate ----------------------------------------- */
.letter-sec{ margin:0 0 26px; }
.letter-head{
    display:flex; align-items:center; gap:12px;
    margin:0 0 12px; scroll-margin-top:80px;
}
.letter-head h2{ margin:0; color:var(--phosphor); font-size:15px; }
.letter-head::after{
    content:""; flex:1; height:2px;
    background:linear-gradient(90deg, var(--atari-red), transparent 70%);
}
.cart-grid{
    display:grid; gap:14px;
    grid-template-columns:repeat(auto-fill, minmax(158px,1fr));
}

/* One game = one cartridge */
.cart{
    display:block; text-decoration:none;
    background:linear-gradient(180deg,#232027,#141216);
    border:1px solid #000; border-radius:5px 5px 3px 3px;
    box-shadow:0 3px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
    overflow:hidden;
    transition:transform .12s ease, box-shadow .12s ease;
}
.cart:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(0,0,0,.75), 0 0 0 2px var(--atari-red);
    text-decoration:none;
}
.cart:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }
.cart-ridges{
    height:9px;
    background:repeating-linear-gradient(90deg,
        #0a090c 0 5px, #2c2833 5px 7px);
    border-bottom:1px solid #000;
}
.cart-label{
    position:relative; aspect-ratio:4/3;
    background:#000; overflow:hidden;
}
.cart-label img{
    width:100%; height:100%; object-fit:cover; display:block;
    image-rendering:pixelated;
}
/* No screenshot? The label becomes classic cartridge art. */
.cart-label .cart-art{
    position:absolute; inset:0; display:none;
    align-items:center; justify-content:center;
    font:26px var(--font-display); color:rgba(255,255,255,.92);
    text-shadow:2px 2px 0 rgba(0,0,0,.5);
}
.cart.no-shot .cart-label img{ display:none; }
.cart.no-shot .cart-art{ display:flex; }
.cart-c0 .cart-art{ background:linear-gradient(160deg,#e4231f,#7c0d12); }
.cart-c1 .cart-art{ background:linear-gradient(160deg,#f57e20,#8f3f05); }
.cart-c2 .cart-art{ background:linear-gradient(160deg,#f5b120,#8a5c02); }
.cart-c3 .cart-art{ background:linear-gradient(160deg,#0aa14a,#03521f); }
.cart-c4 .cart-art{ background:linear-gradient(160deg,#1b75bb,#0a3a67); }
.cart-c5 .cart-art{ background:linear-gradient(160deg,#7a3f98,#3c1552); }
.cart-name{
    display:block; padding:9px 9px 10px;
    font:8px/1.6 var(--font-display);
    color:var(--phosphor);
    border-top:2px solid var(--atari-red);
    background:#17141a;
    min-height:44px;
}
.cart:hover .cart-name{ color:#fff; }

.no-results{
    display:none; padding:34px 18px; text-align:center;
    font:11px/2 var(--font-display); color:var(--dim);
    border:2px dashed var(--line); border-radius:6px;
}
.is-filtering .no-results.show{ display:block; }

/* ---- Welcome / info cards ---------------------------------------- */
.intro-copy{ max-width:70ch; color:#d9d0c2; }
.info-cards{
    display:grid; gap:14px; margin:18px 0 6px;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.info-card{
    background:var(--panel); border:1px solid var(--line); border-radius:5px;
    border-top:3px solid var(--amber);
    padding:14px 16px;
}
.info-card h3{ margin:0 0 8px; color:var(--amber); }
.info-card p{ margin:0; font-size:14px; color:#cfc6b8; }

/* ---- Player page -------------------------------------------------- */
.now-playing{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px;
    margin:0 0 14px;
}
.now-playing .np-label{
    font:8px var(--font-display); color:var(--atari-red);
    text-transform:uppercase; letter-spacing:1px;
}
.now-playing h1{ margin:0; }

/* Black deck with wood side rails, like the console front */
.emu-deck{
    position:relative;
    background:linear-gradient(180deg,#211d27,#131117 70%);
    border:1px solid #000; border-radius:6px;
    box-shadow:0 6px 22px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
    padding:6px 22px 26px;
    text-align:center;
}
.emu-deck::before,
.emu-deck::after{
    content:""; position:absolute; top:8px; bottom:8px; width:10px;
    background:
        repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 2px, transparent 2px 6px),
        linear-gradient(90deg,var(--wood-hi),var(--wood-dark));
    border-radius:3px;
}
.emu-deck::before{ left:6px; }
.emu-deck::after{ right:6px; }

.transport{
    display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
    margin:18px 0;
}

.controls-card{
    background:var(--panel); border:1px solid var(--line); border-radius:5px;
    margin:18px 0;
}
.controls-card summary{
    cursor:pointer; list-style:none;
    font:10px var(--font-display); color:var(--amber);
    padding:13px 16px;
}
.controls-card summary::-webkit-details-marker{ display:none; }
.controls-card summary::before{ content:"\25B8  "; color:var(--atari-red); }
.controls-card[open] summary::before{ content:"\25BE  "; }
.controls-cols{
    display:grid; gap:6px 26px; padding:2px 18px 16px;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    font:13px/1.9 var(--font-mono); color:#d5ccbe;
}
.controls-cols b{ color:var(--phosphor); }
.controls-cols .k{
    display:inline-block; min-width:20px; text-align:center;
    background:#0c0a0f; border:1px solid var(--line); border-radius:3px;
    padding:0 6px; color:var(--amber);
}

.more-strip h2{ margin-top:1.4em; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip-row a{
    font:12px var(--font-body); color:var(--phosphor);
    background:var(--panel-2); border:1px solid var(--line); border-radius:99px;
    padding:6px 13px;
}
.chip-row a:hover{ background:var(--atari-red); color:#fff; text-decoration:none; }

/* ---- Advertising -------------------------------------------------- */
.ad-box{
    position:relative; margin:20px auto; text-align:center;
    max-width:100%; overflow:hidden;
}
.ad-tag{
    display:block; margin:0 0 4px;
    font:7px var(--font-display); color:#5d5566;
    text-transform:uppercase; letter-spacing:2px;
}
.ad-sidebar{ margin-top:0; }
.ad-banner{ margin:26px auto 8px; }

/* ---- Cartridge-not-found page ------------------------------------ */
.slot-empty{
    text-align:center; padding:40px 18px;
    border:2px dashed var(--line); border-radius:8px;
    margin:0 0 24px;
}
.slot-empty h1{ color:var(--amber); }
.slot-empty p{ color:var(--dim); }

/* ---- Footer -------------------------------------------------------- */
.site-footer{
    margin-top:36px;
    border-top:7px solid transparent;
    border-image:linear-gradient(90deg,
        #e4231f 0 16.6%, #f57e20 0 33.3%, #f5b120 0 50%,
        #0aa14a 0 66.6%, #1b75bb 0 83.3%, #7a3f98 0 100%) 1;
    background:#0d0b10;
}
.footer-inner{
    max-width:var(--maxw); margin:0 auto; padding:22px 20px 30px;
    font-size:13px; color:var(--dim);
}
.footer-credit{ margin:0 0 8px; }
.footer-links{ display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; margin:0 0 8px; }
.footer-tw img{ vertical-align:middle; border-radius:3px; }
.footer-top{ margin:0; font-size:12px; }

/* ---- Responsive ---------------------------------------------------- */
@media (max-width:1100px){
    .with-rail{ grid-template-columns:1fr; }
    .rail{ position:static; }
}
@media (max-width:640px){
    .masthead-inner{ padding:16px 14px 14px; }
    .sitemenu{ margin-left:0; }
    .page{ padding:16px 12px 32px; }
    .cart-grid{ grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); }
    .emu-deck{ padding:4px 14px 18px; }
    .emu-deck::before,.emu-deck::after{ display:none; }
}

@media (prefers-reduced-motion:reduce){
    *{ transition:none !important; animation:none !important; }
}

/* ---- Static pages: Advertising / Credits / Links ------------------- */
.page-intro{ color:#cfc6b8; max-width:70ch; margin:0 0 20px; }

/* FAQ (advertising page) */
.faq{ display:grid; gap:14px; margin:0 0 10px; }
.faq-item{
    background:var(--panel); border:1px solid var(--line); border-radius:5px;
    border-left:4px solid var(--atari-red);
    padding:14px 18px;
}
.faq-item h2{
    font:10px/1.7 var(--font-display); color:var(--amber);
    margin:0 0 10px; text-transform:none; letter-spacing:.5px;
}
.faq-item h2::before{ content:"Q. "; color:var(--atari-red); }
.faq-item p{ margin:0; color:#d8d0c2; }
.faq-item p::before{ content:"A. "; color:var(--atari-red); font-weight:bold; }
.faq-item p + p{ margin-top:8px; }
.faq-item p + p::before{ content:""; }
.faq-cta{
    background:var(--panel); border:1px solid var(--line); border-radius:5px;
    border-left:4px solid var(--amber);
    padding:18px; text-align:center;
}
.faq-cta p{ margin:0 0 14px; color:#d8d0c2; }

/* Credits grid */
.credit-grid{
    display:grid; gap:16px; margin:0 0 10px;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.credit-card{
    display:block; background:var(--panel);
    border:1px solid var(--line); border-radius:6px;
    border-top:3px solid var(--atari-red);
    padding:20px 16px 16px; text-align:center;
    color:inherit; text-decoration:none;
    transition:transform .12s ease, border-color .12s ease;
}
.credit-card:hover{ transform:translateY(-3px); border-color:var(--amber); text-decoration:none; }
.credit-card img{
    width:96px; height:96px; object-fit:contain;
    border-radius:8px; background:#0d0b10; padding:6px;
    box-shadow:0 3px 10px rgba(0,0,0,.5);
}
.credit-card h2{
    font:9px/1.6 var(--font-display); color:var(--amber);
    margin:14px 0 8px;
}
.credit-card p{ margin:0; font-size:13px; color:#bdb4a6; }

/* Links directory */
.link-list{ display:grid; gap:14px; margin:0 0 10px; }
.link-card{
    background:var(--panel); border:1px solid var(--line); border-radius:5px;
    border-left:4px solid var(--amber);
    padding:14px 18px;
}
.link-card h2{ margin:0 0 8px; font-size:17px; }
.link-card h2 a{ color:var(--phosphor); }
.link-card h2 a:hover{ color:var(--amber); }
.link-card h2 a::after{ content:" \2197"; color:var(--atari-red); font-size:13px; }
.link-card p{ margin:0; font-size:14px; color:#cfc6b8; }

/* ---- Menu pages: About / Groups / Contact / Controls / Tome -------- */
.prose{ color:#d8d0c2; max-width:75ch; }
.prose p{ margin:0 0 14px; }
.prose a{ color:var(--amber); }

/* User groups */
.group-list{ display:grid; gap:12px; margin:0 0 10px; }
.group-card{
    background:var(--panel); border:1px solid var(--line); border-radius:5px;
    border-left:4px solid var(--amber);
    padding:12px 16px;
    display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
}
.group-card .acr{
    font:8px/1 var(--font-display); color:var(--tv-black);
    background:var(--amber); padding:5px 7px; border-radius:3px;
}
.group-card h2{ margin:0; font-size:16px; color:var(--phosphor); flex:1 1 auto; }
.group-card .url{ font-size:13px; word-break:break-all; }

/* Contact form */
.contact-card{
    background:var(--panel); border:1px solid var(--line); border-radius:6px;
    border-top:3px solid var(--atari-red);
    padding:22px;
}
.contact-form{ display:grid; gap:16px; }
.form-row2{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
.contact-form label{
    display:block; font:8px var(--font-display); color:var(--amber);
    letter-spacing:1px; text-transform:uppercase; margin:0 0 7px;
}
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea{
    width:100%; box-sizing:border-box;
    background:#0d0b10; color:var(--phosphor);
    border:1px solid var(--line); border-radius:4px;
    padding:10px 12px; font-size:15px; line-height:1.5; font-family:inherit;
}
.contact-form input:focus,
.contact-form textarea:focus{ border-color:var(--amber); outline:none; }
.contact-form textarea{ min-height:170px; resize:vertical; }
.form-actions{ text-align:right; }
.form-msg{
    border-radius:5px; padding:12px 16px; margin:0 0 18px;
    background:var(--panel); border:1px solid var(--line);
}
.form-ok{ border-left:4px solid #0aa14a; color:#cfe8d4; }
.form-err{ border-left:4px solid var(--atari-red); color:#ecd2d2; }
.form-err ul{ margin:6px 0 0 18px; padding:0; }
.hp-field{
    position:absolute !important; left:-9999px !important;
    width:1px; height:1px; overflow:hidden;
}

/* Controls page */
.controls-grid{
    display:grid; gap:14px; margin:0 0 10px;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.controls-block{
    background:var(--panel); border:1px solid var(--line); border-radius:5px;
    border-top:3px solid var(--amber);
    padding:14px 16px;
}
.controls-block h2{
    font:9px/1.6 var(--font-display); color:var(--amber); margin:0 0 12px;
}
.controls-block table{ width:100%; border-collapse:collapse; font-size:14px; }
.controls-block td{
    padding:6px 0; vertical-align:top; color:#d8d0c2;
    border-bottom:1px dashed rgba(255,255,255,.07);
}
.controls-block tr:last-child td{ border-bottom:none; }
.controls-block td:first-child{ white-space:nowrap; padding-right:14px; }
.controls-note{ font-size:13px; color:#9a917f; margin:10px 0 0; }

/* Atari Manual Tome */
.tome-card{
    background:var(--panel); border:1px solid var(--line); border-radius:6px;
    border-top:3px solid var(--atari-red);
    padding:20px; margin:0 0 16px;
    display:grid; gap:18px; grid-template-columns:150px 1fr; align-items:start;
}
.tome-card img{
    width:150px; height:auto; border-radius:4px;
    box-shadow:0 4px 14px rgba(0,0,0,.55); background:#0d0b10;
}
.tome-card h2{ margin:0 0 10px; color:var(--amber); font-size:20px; }
.tome-card p{ margin:0 0 12px; color:#d8d0c2; }
.tome-card p:last-child{ margin-bottom:0; }

/* Letter / email quote (Tome blessing) */
.letter-card{
    background:#0d0b10; border:1px solid var(--line); border-radius:5px;
    border-left:4px solid var(--amber);
    padding:16px 18px;
}
.letter-meta{
    display:grid; gap:3px; font-size:13px; color:#9a917f;
    border-bottom:1px dashed rgba(255,255,255,.1);
    padding:0 0 10px; margin:0 0 12px;
}
.letter-meta b{ color:#bdb4a6; }
.letter-body p{ margin:0 0 12px; color:#d8d0c2; }
.letter-body p:last-child{ margin-bottom:0; }

@media (max-width:640px){
    .form-row2{ grid-template-columns:1fr; }
    .tome-card{ grid-template-columns:1fr; }
    .tome-card img{ margin:0 auto; }
}