/* CrappyBrowserGames.com — site chrome. Est. 2026. Best viewed at 800x600. */
:root{
  --bg:#000033; --bg2:#330033; --panel:#000; --card:#111144;
  --green:#00FF00; --cyan:#00FFFF; --magenta:#FF00FF; --yellow:#FFFF00; --red:#FF0000; --grey:#CCCCCC; --dim:#888;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;padding:0;color:var(--green);
  font-family:"Comic Sans MS","Comic Sans",cursive;
  background-color:var(--bg);
  background-image:repeating-linear-gradient(45deg,var(--bg2) 0,var(--bg2) 10px,var(--bg) 10px,var(--bg) 20px);
  cursor:crosshair;line-height:1.45;
}
a{color:var(--cyan)}
a:hover{color:var(--magenta);text-decoration:underline wavy var(--yellow)}
.wrapper{max-width:980px;margin:16px auto;background:var(--panel);border:8px double var(--magenta);padding:12px}
.masthead{display:block;text-align:center;color:var(--yellow);text-shadow:2px 2px var(--red);font-size:clamp(26px,5vw,42px);font-weight:bold;letter-spacing:-1px;margin:8px 0;text-decoration:none}
.masthead:hover{color:var(--magenta);text-decoration:none}
h1.pagetitle{color:var(--yellow);font-size:26px;margin:0 0 6px;text-align:left}
h2{color:var(--cyan);font-size:22px;border-bottom:2px dashed var(--magenta);padding-bottom:4px;margin:26px 0 10px}
h3{color:var(--yellow);font-size:17px;margin:14px 0 4px}
p,li{color:var(--grey);font-size:15px}
strong{color:#fff}
.center{text-align:center}
.blink{animation:blinker 1s step-start infinite;color:var(--red);font-weight:bold}
@keyframes blinker{50%{opacity:0}}
hr.rainbow{height:6px;border:none;margin:12px 0;background:repeating-linear-gradient(90deg,red,orange,yellow,green,blue,violet,red);background-size:200% 100%;animation:slide 3s linear infinite}
@keyframes slide{from{background-position:0 0}to{background-position:200% 0}}
marquee{background:var(--yellow);color:var(--magenta);font-weight:bold;padding:4px 0;border:2px solid var(--cyan);font-size:16px}
@media (prefers-reduced-motion:reduce){.blink,hr.rainbow{animation:none}marquee{overflow:hidden}}

/* nav */
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;background:var(--card);border:3px ridge var(--cyan);padding:6px;margin:8px 0;font-size:14px;font-weight:bold}
.nav a{text-decoration:none}
.nav a[aria-current]{color:var(--yellow)}
.crumbs{font-size:12px;color:var(--dim);margin:4px 0 8px}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px}
.crumbs li+li::before{content:"»";margin-right:4px;color:var(--magenta)}

/* badges */
.badge-row{text-align:center;margin:10px 0}
.badge-row span{display:inline-block;background:var(--magenta);color:var(--yellow);border:2px outset var(--cyan);padding:3px 8px;margin:2px;font-size:11px;font-weight:bold}

/* game grid */
.game-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.game-grid li{background:var(--card);border:3px ridge var(--cyan);padding:0;display:flex;flex-direction:column}
.game-grid a.thumb{display:block;text-decoration:none}
.game-grid img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;border-bottom:2px solid var(--magenta)}
.game-grid .body{padding:8px 10px 10px}
.game-grid .title{font-size:18px;font-weight:bold;color:var(--cyan);text-decoration:none;display:block}
.game-grid .title:hover{color:var(--magenta)}
.game-grid .desc{color:var(--grey);font-size:13px;font-style:italic;margin:4px 0 6px}
.game-grid .meta{font-size:11px;color:var(--dim)}
.game-grid .meta a{color:var(--yellow);text-decoration:none}
.tag-new{background:var(--red);color:#fff;font-size:10px;padding:1px 5px;border:1px solid var(--yellow);margin-left:4px;vertical-align:middle;animation:blinker 1s step-start infinite}

/* game page */
.play-area{background:#000;border:4px ridge var(--magenta);padding:6px;margin:8px 0}
.play-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--cyan);padding:2px 4px 6px}
.play-bar button,.btn{background:var(--card);color:var(--yellow);border:3px outset var(--cyan);font-family:inherit;font-weight:bold;font-size:13px;padding:4px 10px;cursor:pointer}
.play-bar button:hover,.btn:hover{background:var(--magenta);color:#fff}
.embed{width:100%;height:min(78vh,760px);border:0;display:block;background:#000}
.embed.tall{height:min(85vh,820px)}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;list-style:none;padding:0;margin:10px 0}
.specs li{background:var(--card);border:2px inset var(--cyan);padding:6px 8px;font-size:12px;color:var(--grey)}
.specs b{color:var(--yellow);display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px}
.steps li{margin:6px 0}
.faq details{background:var(--card);border:2px ridge var(--cyan);margin:6px 0;padding:6px 10px}
.faq summary{color:var(--yellow);font-weight:bold;cursor:pointer;font-size:15px}
.faq p{margin:6px 0 2px}
.tags a{display:inline-block;background:var(--card);border:2px outset var(--magenta);color:var(--cyan);font-size:12px;padding:2px 8px;margin:2px;text-decoration:none}

/* two-column with sidebar ad on wide screens */
.layout{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:1100px){.wrapper.wide{max-width:1300px}.layout{grid-template-columns:1fr 300px}.side{position:sticky;top:8px;align-self:start}}

/* ad slots — reserved heights to avoid layout shift */
.ad{display:flex;align-items:center;justify-content:center;background:#050518;border:2px dashed #444;margin:10px auto;color:#555;font-size:11px;font-family:"Courier New",monospace;overflow:hidden}
.ad::before{content:"advertisement";position:absolute;font-size:9px;color:#444;margin-top:-1px}
.ad{position:relative}
.ad-leaderboard{width:100%;max-width:728px;min-height:90px}
.ad-rect{width:300px;max-width:100%;min-height:250px}
.ad-sky{width:300px;max-width:100%;min-height:600px}
.ad-fluid{width:100%;min-height:120px}
@media (max-width:760px){.ad-leaderboard{min-height:100px}}

/* misc geocities */
.counter{background:#000;color:var(--green);font-family:"Courier New",monospace;border:2px inset var(--green);padding:4px 10px;letter-spacing:4px}
.stars{color:var(--yellow);font-size:20px}
.guestbook{text-align:center;margin:15px 0}
.guestbook a{color:var(--yellow);font-size:15px}
.footer{text-align:center;font-size:11px;color:var(--dim);margin-top:20px}
.footer a{color:var(--cyan)}
.footer nav{margin:6px 0}
.footer nav a{margin:0 5px}
.construction{display:block;margin:6px auto;width:88px;height:31px;background:repeating-linear-gradient(45deg,#000 0,#000 8px,var(--yellow) 8px,var(--yellow) 16px);color:#000;font-size:9px;font-weight:bold;line-height:31px;text-align:center;border:1px solid #fff}
.construction span{background:var(--yellow);padding:1px 3px}
.prose p{max-width:75ch}
table.simple{border-collapse:collapse;width:100%;font-size:13px}
table.simple td,table.simple th{border:1px solid var(--magenta);padding:4px 8px;color:var(--grey);text-align:left}
table.simple th{color:var(--yellow)}