/* Virtual Apple II — site stylesheet (build 6502.0004)
   Faithful to virtualapple.org v4.5 layout, restyled cleanly for modern
   browsers. Light archive look; dark emulator stage; ActiveGS-style bar. */

:root{
  --bg:#e9e7df; --panel:#ffffff; --ink:#1d1d1f; --muted:#5c5c66;
  --line:#cfccc1; --link:#0b5fa5; --link-h:#c0392b;
  --nav:#2a2f3a; --nav-ink:#e8eaf0; --accent:#7d1416; --accent2:#b8860b;
  --stage:#0a0a10; --bar:#23262e; --bar-ink:#d8dde6; --bar-line:#3a3f4a;
  --ad:#f6f4ec; --ad-line:#d8d4c4;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font:15px/1.5 "Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-h);text-decoration:underline}
img{max-width:100%}

/* ---- top banner + nav ---- */
.site-head{background:#c8102e;color:#fff;border-bottom:3px solid #8a0b20}
.site-head .wrap{max-width:1000px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-size:22px;font-weight:800;letter-spacing:.3px;color:#fff;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand-link{display:inline-flex;align-items:center;text-decoration:none;color:inherit}
.brand-logo{display:inline-block;height:56px;width:auto;max-width:none;vertical-align:middle}
.title-block{margin:0 0 10px}
.title-block .title-h{margin:.1em 0}
.sidebar .cover-row{gap:10px;margin:0 0 10px}
.sidebar .cover-row img{max-height:170px;max-width:100%}
.brand-wordmark{display:inline}
.brand .gs{color:var(--accent2)}
.brand small{display:block;width:100%;font-size:11px;font-weight:500;color:#ffe2e6;letter-spacing:.4px}
.tagline{font-size:12px;color:#ffd6db;margin-left:auto}
.hero.social{margin-top:6px}
.x-link{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#111;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:700}
.x-link:hover{background:#000;color:#fff;border-color:#000}
.x-logo{flex:0 0 auto}
.site-nav{background:var(--nav);border-bottom:1px solid #11131a}
.site-nav .wrap{max-width:1000px;margin:0 auto;padding:0 10px;display:flex;flex-wrap:wrap}
.site-nav a{color:var(--nav-ink);padding:9px 12px;font-size:13px;font-weight:600}
.site-nav a:hover{background:#3a4150;color:#fff;text-decoration:none}

/* ---- alphabet strips ---- */
.alpha{max-width:1000px;margin:12px auto 0;padding:0 16px}
.alpha .row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 0;font-size:13px}
.alpha .lbl{font-weight:800;color:var(--accent);min-width:130px}
.alpha a,.alpha .cur{display:inline-block;min-width:20px;text-align:center;padding:2px 5px;border:1px solid var(--line);background:#fff;border-radius:3px;font-weight:700}
.alpha .cur{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---- ad slots ---- */
/* build 6502.0007: live Google AdSense units (see assets/ads.js) */
.ad-slot{margin:12px auto;max-width:1000px;display:flex;justify-content:center;overflow:hidden}
.ad-slot .ad-box{display:flex;flex-direction:column;align-items:center;max-width:100%}
.ad-box hr{width:300px;max-width:100%;border:none;border-top:1px solid var(--line);margin:10px 0}
.ad-box ins.adsbygoogle{max-width:100%}
.legacy-ad-box{width:100%;max-width:728px;min-height:90px;background:var(--ad);border:1px dashed var(--ad-line);
  border-radius:4px;display:flex;align-items:center;justify-content:center;color:#9b9789;font-size:12px;text-align:center}

/* ---- main two-column layout ---- */
.layout{max-width:1000px;margin:10px auto;padding:0 16px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.sidebar table.meta{margin:0}
.sidebar table.meta th{width:auto;white-space:normal}
.sidebar{background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.sidebar h3{margin:0;padding:8px 12px;background:#33384a;color:#fff;font-size:13px;letter-spacing:.3px}
.prog-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.prog-tabs button{flex:1;min-width:54px;border:0;border-right:1px solid var(--line);background:#eceae2;color:#444;
  padding:7px 4px;font-size:12px;font-weight:700;cursor:pointer}
.prog-tabs button:last-child{border-right:0}
.prog-tabs button.active{background:#fff;color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.prog-pane{padding:10px 12px;font-size:13px}
.prog-pane h4{margin:.2em 0 .4em;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.dl-list a,.doc-list a{display:block;padding:3px 0}
.main{min-width:0}
.content-card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px}

/* ---- emulator stage + control bar ---- */
/* build 6502.0008: overflow:visible so control-bar menus are never clipped;
   the canvas corner rounding moves to .emu-wrap */
.emu-shell{background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:visible;margin-bottom:16px}
.emu-wrap{position:relative;background:var(--stage);display:flex;justify-content:center;border-radius:6px 6px 0 0;overflow:hidden}
/* width is also capped by the viewport HEIGHT so the canvas plus the
   control bar always fit on screen (the bar used to land off-page) */
.emu-wrap canvas{display:block;image-rendering:pixelated;width:min(100%,704px,max(360px,calc((100vh - 300px)*704/462)));height:auto;aspect-ratio:704/462;cursor:default}
/* ---- v0.9.98ag (build 6502.0004): fullscreen — ⌘Return enters / ⌘Esc exits.
   The wrapper is fullscreened; #screen is sized so the canvas ELEMENT box
   equals the drawn content box (no letterboxing inside the element), which
   keeps the engine's rect-based mouse mapping exact in fullscreen.
   704/462 is the framebuffer aspect. ---- */
.emu-wrap.va2-fullscreen{align-items:center;width:100vw;height:100vh}
.emu-wrap.va2-fullscreen canvas{width:min(100vw,calc(100vh * 704 / 462));max-width:none;height:auto}
.emu-overlay{position:absolute;inset:0;background:rgba(6,8,14,.86);display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:#cdd6e6;cursor:pointer;transition:opacity .3s;text-align:center;padding:16px}
.emu-overlay.hidden{opacity:0;pointer-events:none}
.emu-overlay .big{font-size:30px;font-weight:800;color:#7ec8e3;text-shadow:0 0 18px rgba(126,200,227,.4)}
.emu-overlay .play{margin-top:10px;font-size:14px;background:var(--accent);color:#fff;border:0;padding:9px 22px;border-radius:5px;cursor:pointer;font-weight:700}
.emu-overlay .sub{margin-top:8px;font-size:12px;color:#8b94a6}
.rom-needed{margin-top:12px;background:#2a2030;border:1px solid #4a3550;border-radius:6px;padding:12px;max-width:440px;color:#e8c8d0;font-size:12px}
.rom-needed b{color:#ffd2dc}
.rom-needed label{display:inline-block;margin-top:8px;background:#3a4150;color:#dbe2ee;padding:6px 12px;border-radius:4px;cursor:pointer;font-weight:700}
.rom-needed input{display:none}

/* the ActiveGS-style toolbar:  S5x/S6x | Speed | Controls | System | Display | Disk | cam */
.va2-ctrlbar{position:relative;display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  background:linear-gradient(#2b2f39,#23262e);border-top:1px solid var(--bar-line);padding:6px 8px}
.va2-slots{display:flex;gap:10px;align-items:center;padding-right:4px}
.va2-slot{display:inline-flex;align-items:center;gap:4px;font:700 11px/1 "SF Mono",Menlo,Consolas,monospace;color:#9aa4b6}
.va2-slot.loaded{color:#d8dde6}
.va2-slot-label{letter-spacing:.04em}
.va2-led{width:8px;height:8px;border-radius:50%;background:#1c1f27;border:1px solid #333a47;box-shadow:inset 0 0 2px #000}
.va2-slot.loaded .va2-led{background:#2f6b2f;border-color:#3f8a3f}
.va2-led.on{background:#ff3b3b !important;border-color:#ff5a5a !important;box-shadow:0 0 6px rgba(255,90,90,.85)}
.va2-sep{width:1px;height:18px;background:var(--bar-line);margin:0 2px}
.va2-btn-holder{position:relative}
.va2-btn{font:600 12.5px/1 "Helvetica Neue",Arial,sans-serif;color:var(--bar-ink);background:#343a46;
  border:1px solid #434a58;border-radius:4px;padding:6px 11px;cursor:pointer}
.va2-btn:hover{background:#3f4757}
.va2-cam{margin-left:auto;font-size:14px;padding:5px 9px}
.va2-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:2147483000;min-width:210px;max-height:min(60vh,420px);overflow:auto;background:#1f2530;border:1px solid #3a4150;
  border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:60;padding:5px;color:#dbe2ee}
.va2-menu-h{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#7f8aa0;padding:6px 8px 3px}
.va2-item{padding:6px 9px;border-radius:4px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap}
.va2-item:hover{background:#2c3545}
.va2-item.checked::before{content:"\2713";color:#7ec8e3;font-weight:800}
.va2-item:not(.checked)::before{content:"";width:10px}
.va2-disk-row{justify-content:space-between}
.va2-disk-name{overflow:hidden;text-overflow:ellipsis;max-width:230px}
.va2-mini,.va2-modal-foot .va2-btn{font-size:11px;padding:3px 8px}
.va2-help{font-size:12px;line-height:1.6;color:#c2cad8;padding:4px 9px;max-width:280px}
.va2-help b{color:#fff}

/* GS-config modal */
.va2-modal-back{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:200}
.va2-modal{width:420px;max-width:94vw;max-height:88vh;overflow:auto;background:#202632;color:#e6ebf3;border:1px solid #3a4150;border-radius:10px}
.va2-modal-h{padding:12px 16px;font-weight:800;background:#2a3140;border-bottom:1px solid #3a4150}
.va2-modal-body{padding:8px 16px}
.va2-cfg-sec{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#8290a6;margin:12px 0 4px}
.va2-cfg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid #2c3340}
.va2-cfg-lab{font-size:13px}
.va2-modal select{background:#161b24;color:#e6ebf3;border:1px solid #3a4150;border-radius:4px;padding:4px 6px;font-size:13px}
.va2-modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid #3a4150}

/* ---- title metadata ---- */
.title-h{font-size:24px;font-weight:800;margin:0 0 4px}
.title-sub{color:var(--muted);font-size:13px;margin-bottom:12px}
.cover-row{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0}
.cover-row figure{margin:0;text-align:center;font-size:11px;color:var(--muted)}
.cover-row img{max-height:200px;border:1px solid var(--line);border-radius:4px;background:#fff;padding:3px}
table.meta{border-collapse:collapse;width:100%;margin:12px 0;font-size:13px}
table.meta th,table.meta td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:top}
table.meta th{background:#f1efe7;width:160px;font-weight:700;color:#444}
.desc{margin:12px 0;line-height:1.6}
.section-h{font-weight:800;margin:16px 0 6px;color:var(--accent);font-size:15px}

/* ---- catalog list ---- */
.catalog{list-style:none;margin:0;padding:0}
.catalog li{background:var(--panel);border:1px solid var(--line);border-radius:6px;margin-bottom:8px;padding:10px 14px}
.catalog .name{font-size:16px;font-weight:700}
.catalog .badge{font-size:10px;font-weight:800;border-radius:3px;padding:1px 6px;margin-left:8px;vertical-align:middle}
.badge.gs{background:#7d1416;color:#fff}
.badge.ii{background:#2a4d69;color:#fff}
.catalog .blurb{color:var(--muted);font-size:13px;margin-top:3px}
.count{color:var(--muted);font-size:13px;margin:6px 0 14px}

/* ---- home grid ---- */
.hero{max-width:1000px;margin:14px auto;padding:0 16px}
.hero .card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px 20px}
.hero h1{margin:.1em 0;font-size:26px}
.hero p.lede{font-size:16px;color:#333;margin:.3em 0 0}
.hero .feat{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.hero .feat a{display:block;border:1px solid var(--line);border-radius:6px;padding:10px 14px;background:#fbfaf6;font-weight:700}
.note{font-size:12px;color:var(--muted)}

/* ---- footer ---- */
.site-foot{max-width:none;margin:28px 0 0;padding:20px 16px 26px;border-top:3px solid var(--accent);background:#000;color:#cfd3da;font-size:12px;text-align:center}
.site-foot .foot-badge{margin-bottom:12px}
.site-foot .kegs-badge{height:62px;width:auto;display:inline-block}
.site-foot .kegs-badge-text{display:none;color:#fff;font-weight:800;letter-spacing:.5px}
.site-foot .foot-copy{color:#aeb3bd;margin-bottom:6px}
.site-foot .foot-links a{color:#cfd3da;text-decoration:none;margin:0 2px}
.site-foot .foot-links a:hover{color:var(--accent2)}

@media(max-width:760px){
  .layout{grid-template-columns:1fr}
  .alpha .lbl{min-width:0;flex-basis:100%}
}

/* ---- build 6502.0005: index screenshot grid + list-page thumbnails ----- */
.shot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.shot-cell{display:block;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;text-decoration:none;transition:transform .08s ease,border-color .08s ease,box-shadow .08s ease}
.shot-cell:hover{transform:translateY(-2px);border-color:var(--link);box-shadow:0 2px 8px rgba(0,0,0,.12);text-decoration:none}
.shot-img{display:block;width:100%;height:96px;object-fit:cover;background:var(--stage);image-rendering:pixelated}
.shot-name{display:block;padding:6px 8px;font-size:12px;line-height:1.3;color:var(--ink);font-weight:700}
ul.catalog li.with-thumb{display:flex;gap:12px;align-items:flex-start}
.thumb-link{flex:0 0 110px;display:block;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--stage);min-height:72px}
.thumb-link img.thumb{display:block;width:110px;height:72px;object-fit:cover;image-rendering:pixelated}
.thumb-link.noshot{background:#f1efe7;position:relative;min-height:72px}
.thumb-link.noshot::after{content:'][';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--line);font:700 22px/1 ui-monospace,Menlo,monospace}
.li-body{flex:1;min-width:0}
.va2-mini.va2-lock{font-size:13px;line-height:1}
@media (max-width:560px){ul.catalog li.with-thumb{gap:8px}.thumb-link{flex:0 0 84px;min-height:56px}.thumb-link img.thumb{width:84px;height:56px}}