/* ==================================================================
   Gamezyte — site theme
   Same design system as virtualatari.org so the family reads as one:
   woodgrain front panel, black console plastic, the rainbow stripe,
   Press Start 2P for display type.
   What is different is the subject. Virtual Atari is one machine, so
   its tile is a cartridge. Gamezyte is the shelf the machines sit on,
   so its tile is a console faceplate: a screen window above a plate.
   ================================================================== */

: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;
    --gz-red:     #ea1c29;   /* the family 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;

    --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(--gz-red); text-decoration:none; }
a:hover{ color:#ff4550; text-decoration:underline; }

.skip-link{
    position:absolute; left:-999px; top:0; z-index:99;
    background:var(--gz-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(20px,3.8vw,34px) var(--font-display);
    color:var(--phosphor);
    text-shadow:3px 3px 0 rgba(0,0,0,.55);
    letter-spacing:2px;
}
.brand-tag{
    display:block; margin-top:9px;
    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(--gz-red); color:#fff; }

/* ---- Rainbow stripe --------------------------------------------- */
.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:24px 20px 44px; }
.with-rail{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:26px; align-items:start; }
.rail{ position:sticky; top:14px; display:grid; gap:16px; }

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

.page-title{
    border-left:4px solid var(--gz-red);
    padding:2px 0 2px 14px; margin:0 0 22px;
}
.page-title .eyebrow{
    display:block; font:8px var(--font-display);
    color:var(--dim); letter-spacing:2px; text-transform:uppercase;
    margin:0 0 10px;
}
.page-title h1{ margin:0; font-size:19px; }

.prose{ color:#d8d0c2; max-width:72ch; }
.prose p{ margin:0 0 15px; }
.prose p:last-child{ margin-bottom:0; }
.prose a{ color:var(--amber); }

/* ---- The shelf: one faceplate per destination -------------------- */
.shelf{
    display:grid; gap:18px;
    grid-template-columns:repeat(3, minmax(0,1fr));
    margin:0 0 8px;
}
.machine{
    display:flex; flex-direction:column;
    background:linear-gradient(180deg,#232027,#141216);
    border:1px solid #000; border-radius:6px 6px 4px 4px;
    box-shadow:0 4px 12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);
    overflow:hidden; text-decoration:none; color:inherit;
    transition:transform .13s ease, box-shadow .13s ease;
}
a.machine:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 22px rgba(0,0,0,.75), 0 0 0 2px var(--gz-red);
    text-decoration:none;
}
a.machine:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

/* The screen window: box art behind glass */
.machine-screen{
    position:relative; aspect-ratio:4/3;
    background:#05060a; overflow:hidden;
    border-bottom:1px solid #000;
}
.machine-screen img{
    width:100%; height:100%; object-fit:cover; display:block;
}
.machine-screen::after{           /* scanlines + corner vignette */
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
        repeating-linear-gradient(180deg,
            rgba(0,0,0,.20) 0 1px, transparent 1px 3px),
        radial-gradient(120% 110% at 50% 45%,
            transparent 55%, rgba(0,0,0,.55) 100%);
}
.machine-screen .no-art{
    position:absolute; inset:0; display:flex;
    align-items:center; justify-content:center;
    font:22px var(--font-display); color:rgba(255,255,255,.5);
}

/* The plate below the screen */
.machine-plate{
    display:flex; align-items:flex-start; gap:10px;
    padding:13px 14px 12px;
    background:linear-gradient(180deg,#1a171f,#141118);
    border-top:1px solid rgba(255,255,255,.06);
}
.led{
    flex:none; width:9px; height:9px; margin-top:4px; border-radius:50%;
    background:#4a1418; box-shadow:inset 0 0 3px #000;
    transition:background .13s ease, box-shadow .13s ease;
}
a.machine:hover .led{
    background:var(--gz-red);
    box-shadow:0 0 8px rgba(234,28,41,.9), inset 0 0 2px rgba(255,255,255,.5);
}
.machine-eyebrow{
    display:block; font:7px/1.5 var(--font-display);
    color:var(--amber); letter-spacing:1px; text-transform:uppercase;
    margin:0 0 8px;
}
.machine-name{
    display:block; font:10px/1.6 var(--font-display);
    color:var(--phosphor);
}
.machine-blurb{
    padding:0 14px 15px;
    font-size:14px; line-height:1.55; color:#bdb4a6;
    margin:0;
}
.machine.is-soon{ opacity:.6; }
.machine.is-soon .machine-name::after{
    content:" \2014 soon"; color:var(--dim);
}

/* ---- Sidebar rail ------------------------------------------------- */
.rail-card{
    background:var(--panel); border:1px solid var(--line);
    border-radius:5px; border-top:3px solid var(--amber);
    padding:16px;
}
.friend-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.friend-list a{
    display:block; color:var(--phosphor);
    background:var(--panel-2); border:1px solid var(--line);
    border-radius:4px; padding:11px 12px;
    font:9px/1.5 var(--font-display);
}
.friend-list a:hover{ background:var(--red-deep); color:#fff; text-decoration:none; }
.rail-note{ border-top-color:var(--gz-red); }
.rail-note p{ margin:0; font-size:13px; color:#bdb4a6; }

/* ---- Intro / info blocks ----------------------------------------- */
.intro-copy{
    background:var(--panel); border:1px solid var(--line);
    border-radius:6px; padding:20px 22px; margin:0 0 24px;
}
.intro-copy p{ margin:0 0 14px; color:#d8d0c2; }
.intro-copy p:last-child{ margin-bottom:0; }

.info-cards{
    display:grid; gap:16px; margin:26px 0 0;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.info-card{
    background:var(--panel); border:1px solid var(--line);
    border-radius:5px; border-left:4px solid var(--gz-red);
    padding:16px 18px;
}
.info-card h3{ margin:0 0 10px; color:var(--amber); font-size:9px; }
.info-card p{ margin:0; font-size:14px; color:#cfc6b8; }

/* ---- Buttons ------------------------------------------------------ */
.btn{
    display:inline-block; font:9px/1 var(--font-display);
    color:var(--phosphor); background:var(--panel-2);
    border:1px solid var(--line); border-radius:4px;
    padding:12px 15px 11px; text-transform:uppercase;
}
.btn:hover{ background:#332c40; color:#fff; text-decoration:none; }
.btn-red{ background:var(--gz-red); border-color:var(--red-deep); color:#fff; }
.btn-red:hover{ background:#ff2f3c; color:#fff; }
.btn:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

/* ---- Contact form ------------------------------------------------- */
.contact-card{
    background:var(--panel); border:1px solid var(--line);
    border-radius:6px; border-top:3px solid var(--gz-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(--gz-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;
}

/* ---- Footer ------------------------------------------------------- */
.site-footer{
    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:#0c0a0e;
    margin-top:40px;
}
.footer-inner{
    max-width:var(--maxw); margin:0 auto; padding:22px 20px 30px;
    text-align:center;
}
.footer-copy{ font:8px/1.9 var(--font-display); color:var(--dim); margin:0 0 14px; }
.footer-links{
    display:flex; flex-wrap:wrap; gap:10px 18px;
    align-items:center; justify-content:center; margin:0;
    font-size:14px;
}
.footer-tw img{ display:block; border-radius:3px; }

/* ---- Responsive ---------------------------------------------------- */
@media (max-width:1000px){
    .with-rail{ grid-template-columns:1fr; }
    .rail{ position:static; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
    .shelf{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:620px){
    .masthead-inner{ padding:16px 14px 14px; }
    .sitemenu{ margin-left:0; }
    .page{ padding:16px 12px 32px; }
    .shelf{ grid-template-columns:1fr; }
    .form-row2{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
    *{ transition:none !important; animation:none !important; }
    a.machine:hover{ transform:none; }
}