/* ============================================================
   GZOWO LABS — "1998 edition"
   Deliberate GeoCities pastiche: tiled rainbow, bevels, blink,
   marquees, WordArt. Every "GIF" here is CSS or an inline SVG,
   so the whole look ships with zero image requests.
   ============================================================ */

:root{
  --pink:#ff00ff; --cyan:#00ffff; --lime:#00ff00; --yellow:#ffff00;
  --red:#ff0000;  --blue:#0000cc; --purple:#8000ff; --orange:#ff8000;
  --ink:#000080;
  --comic:"Comic Sans MS","Chalkboard SE","Comic Neue",cursive;
  --times:"Times New Roman",Times,serif;
  --courier:"Courier New",Courier,monospace;
  --impact:Impact,"Haettenschweiler","Arial Black",sans-serif;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  padding:8px 6px 30px;
  font-family:var(--times);
  font-size:16px;
  color:#000;
  /* The famous unreadable rainbow tile, plus a starfield on top. */
  background-color:#00007a;
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M12 4l1.4 4.1L17 9.5l-3.6 1.4L12 15l-1.4-4.1L7 9.5l3.6-1.4z' opacity='.9'/%3E%3Cpath d='M46 34l1.1 3.2 2.9 1.1-2.9 1.1L46 43l-1.1-3.6-2.9-1.1 2.9-1.1z' opacity='.7'/%3E%3Ccircle cx='55' cy='12' r='1.4' opacity='.8'/%3E%3Ccircle cx='30' cy='52' r='1.1' opacity='.7'/%3E%3Ccircle cx='6' cy='40' r='1' opacity='.6'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(135deg,
      #ff0000 0 40px,#ff8000 40px 80px,#ffff00 80px 120px,#00ff00 120px 160px,
      #00ffff 160px 200px,#0000ff 200px 240px,#ff00ff 240px 280px,#ff0000 280px 320px);
  /* Tiles scroll with the page. A fixed layer this large blanks the compositor
     on long pages, and a scrolling tile is the more authentic 1998 behaviour. */
  background-attachment:scroll,scroll;
}

img{max-width:100%;height:auto;border:0}

a{color:#0000ee}
a:visited{color:#551a8b}
a:hover{color:#ff0000;background:#ffff00}

/* ---------- shared 90s furniture ---------- */

.bevel{border:4px ridge #c0c0c0;background:#fff}

.blink{animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{visibility:hidden}}

.rainbow-text{
  background-image:linear-gradient(90deg,#ff0000,#ff8000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:slide 4s linear infinite;
}
@keyframes slide{to{background-position:-200% 0}}

/* The burning title is a real cooltext.com GIF, so the CSS fire that used to
   imitate one is gone. The image is sized in em against the h1 so it scales
   with the same clamp the text headings use. */
.wordart.is-fire{position:relative;white-space:nowrap;line-height:1}
.fire-gif{
  display:inline-block;vertical-align:middle;
  width:min(88%,660px);height:auto;
  image-rendering:auto;
}

.marquee{overflow:hidden;white-space:nowrap}
.marquee > span{display:inline-block;padding-left:100%;animation:march 18s linear infinite}
@keyframes march{to{transform:translateX(-100%)}}

.hr90{
  height:8px;border:0;margin:10px 0;
  background:repeating-linear-gradient(90deg,#ff0000 0 12px,#ffff00 12px 24px,#00ff00 24px 36px,#00ffff 36px 48px,#ff00ff 48px 60px);
}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:#ffff00;padding:6px;z-index:99}

/* ---------- outer frame ---------- */

.frame{
  max-width:1000px;margin:0 auto;
  border:6px ridge var(--pink);
  background:#ffffcc;
  box-shadow:8px 8px 0 rgba(0,0,0,.6);
}

.topbar{
  background:#000;color:var(--lime);
  font-family:var(--courier);font-weight:bold;font-size:14px;
  padding:4px 0;border-bottom:3px solid var(--lime);
}

/* ---------- banner ---------- */

.banner{
  position:relative;
  padding:14px 10px 10px;
  text-align:center;
  /* Night sky rather than day: the burning GIF has almost no dark values of
     its own, so it needs something dark to burn against. */
  background:
    radial-gradient(circle at 50% 120%,#2a0a5e 0%,#12043a 45%,#05010f 100%);
  border-bottom:5px double #000;
}

.banner .eyebrow{
  margin:0 0 4px;font-family:var(--comic);font-size:14px;font-weight:bold;
  color:#ffff00;text-shadow:1px 1px 0 #000,2px 2px 0 #ff0000;
}

.wordart{
  margin:0;
  font-family:var(--impact);
  font-size:clamp(38px,9vw,86px);
  line-height:.95;
  letter-spacing:2px;
  text-transform:uppercase;
  -webkit-text-stroke:3px #000;
  paint-order:stroke fill;
  text-shadow:4px 4px 0 #000,7px 7px 0 rgba(255,0,255,.85);
  transform:scaleY(1.15);
}

.tagline{
  margin:14px 0 4px;font-family:var(--comic);font-size:clamp(14px,2.6vw,20px);
  font-weight:bold;color:#ffe14d;text-shadow:2px 2px 0 #b30000,0 0 10px rgba(255,120,0,.6);
}
.tagline .sig{color:#0000cc;font-size:.8em}

.spinner{
  display:inline-block;width:44px;height:44px;vertical-align:middle;margin:0 8px;
  border-radius:50%;
  background:conic-gradient(from 0deg,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000,#ffff00,#00ff00);
  box-shadow:inset -6px -6px 10px rgba(0,0,0,.55),0 0 8px #fff;
  animation:spin 3s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- nav strip ---------- */

.navstrip{
  display:flex;flex-wrap:wrap;gap:5px;justify-content:center;
  padding:8px;background:#c0c0c0;border-bottom:4px ridge #808080;
}

.btn90{
  display:inline-block;
  font-family:var(--comic);font-weight:bold;font-size:14px;
  color:#000080;text-decoration:none;
  padding:5px 12px;
  border:3px outset #eee;
  background:linear-gradient(#ffffff,#c8c8c8);
  cursor:pointer;
}
.btn90:hover{background:linear-gradient(#ffff99,#ffcc00);color:#ff0000}
.btn90:active{border-style:inset}

/* ---------- 3 column layout ---------- */

.layout{display:flex;align-items:stretch;gap:0}
.col-left,.col-right{
  flex:0 0 168px;padding:8px 6px;
  background:linear-gradient(180deg,#000080,#4b0082,#000080);
}
.col-right{flex-basis:216px}
.middle{flex:1 1 auto;min-width:0;padding:10px 12px;background:#ffffee}

/* sidebar widgets */

.widget{
  margin:0 0 10px;padding:6px;
  border:3px outset #dcdcdc;background:#fff;
  font-family:var(--comic);font-size:12px;text-align:center;
}
.widget h4{
  margin:-6px -6px 6px;padding:3px;
  font-family:var(--impact);font-size:13px;letter-spacing:1px;text-transform:uppercase;
  color:#fff;background:repeating-linear-gradient(90deg,#ff00ff 0 10px,#0000ff 10px 20px);
  text-shadow:1px 1px 0 #000;
}

.menu{list-style:none;margin:0;padding:0}
.menu li{margin:0 0 5px}
.menu a{
  display:block;padding:4px 6px 4px 20px;
  font-family:var(--comic);font-size:13px;font-weight:bold;
  text-align:left;text-decoration:none;color:#000080;
  border:2px outset #ddd;background:linear-gradient(#fff,#d0d0ff);
  position:relative;
}
.menu a::before{
  content:"";position:absolute;left:5px;top:50%;width:9px;height:9px;margin-top:-4px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,#ff0000 60%,#800000);
  animation:pulse .8s ease-in-out infinite alternate;
}
@keyframes pulse{to{transform:scale(1.5)}}
.menu a:hover{background:linear-gradient(#ffff99,#ffcc00);color:#ff0000}

.counter{
  display:inline-flex;gap:2px;padding:3px;background:#000;border:2px inset #888;
}
.counter span{
  font-family:var(--courier);font-size:18px;font-weight:bold;
  color:#00ff00;background:#111;padding:1px 4px;
}

/* Hazard stripes above and below, the words on flat black — the striped
   version was authentically illegible, which is one step too far. */
.construction{
  font-family:var(--impact);font-size:12px;color:#ffcc00;
  text-transform:uppercase;letter-spacing:1px;text-align:center;
  background:#000;border:2px solid #000;margin-bottom:10px;
}
.construction span{
  display:block;padding:6px 4px;
  border-top:10px solid transparent;border-bottom:10px solid transparent;
  border-image:repeating-linear-gradient(45deg,#ffcc00 0 10px,#000 10px 20px) 10;
}

.award{
  font-family:var(--comic);font-weight:bold;font-size:12px;color:#800000;
  background:radial-gradient(circle at 50% 30%,#fff8c0,#ffcc00 60%,#cc9900);
  border:3px double #800000;border-radius:50%/40%;padding:12px 6px;
}

.webring{font-family:var(--courier);font-size:11px}
.webring a{font-weight:bold}

.stamp{
  font-family:var(--courier);font-size:11px;color:#000;
  border:2px dashed #ff0000;padding:5px;background:#ffffcc;
}

.midi{width:100%;margin-top:4px}

/* ---------- middle column ---------- */

.welcome{
  font-family:var(--comic);font-size:15px;line-height:1.45;
  border:3px double #ff00ff;background:#e6ffff;padding:8px;margin:0 0 10px;
}
.welcome b{color:#ff0000}
.welcome .new{
  font-family:var(--impact);color:#ff0000;background:#ffff00;padding:0 4px;border:1px solid #000;
}

.sect-title{
  margin:14px 0 8px;
  font-family:var(--impact);font-size:26px;letter-spacing:1px;text-transform:uppercase;
  -webkit-text-stroke:2px #000;paint-order:stroke fill;
  text-shadow:3px 3px 0 #000;
}

.feed-note{font-family:var(--comic);font-size:13px;margin:0 0 10px;color:#000080}

/* project rows — one per line, table-flavoured, colours cycled loudly */
.grid{display:block;margin:0;padding:0}

.card{
  display:flex;gap:10px;align-items:flex-start;
  margin:0 0 10px;padding:7px;
  border:4px ridge var(--cyan);
  background:#ffffff;
  text-decoration:none;color:#000;
}
.card:nth-child(4n+1){border-color:var(--cyan);background:#e0ffff}
.card:nth-child(4n+2){border-color:var(--pink);background:#ffe6ff}
.card:nth-child(4n+3){border-color:var(--lime);background:#e6ffe6}
.card:nth-child(4n+4){border-color:var(--yellow);background:#ffffcc}
.card:hover{background:#ffff00;border-style:inset}

.card-shot{flex:0 0 150px;position:relative;display:block}
.card-shot img{display:block;width:150px;height:113px;object-fit:cover;border:3px inset #999}
.no-shot{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  width:150px;height:113px;border:3px inset #999;background:#c0c0c0;
  font-family:var(--courier);font-size:11px;text-align:center;padding:4px;
}
.no-shot span:first-child{font-weight:bold;color:#000080}
.status{
  position:absolute;top:-6px;left:-6px;
  font-family:var(--impact);font-size:11px;letter-spacing:1px;
  color:#000;background:#ffcc00;border:2px solid #000;padding:1px 4px;
  transform:rotate(-8deg);
}

.card-copy{display:block;min-width:0}
.card-copy h3{
  margin:0 0 3px;font-family:var(--comic);font-size:20px;color:#0000cc;
  text-decoration:underline;
}
.card:hover .card-copy h3{color:#ff0000}
.card-copy p{margin:0 0 5px;font-family:var(--times);font-size:14px;line-height:1.35}
.card-meta{
  display:block;font-family:var(--courier);font-size:11px;font-weight:bold;color:#008000;
}
.card-meta span+span::before{content:" ~*~ "}
.click-here{
  display:inline-block;margin-top:4px;
  font-family:var(--comic);font-size:13px;font-weight:bold;color:#ff0000;
}

/* ---------- project subpage ---------- */

.project h1{
  margin:0 0 6px;
  font-family:var(--impact);font-size:clamp(30px,6vw,52px);text-transform:uppercase;
  -webkit-text-stroke:3px #000;paint-order:stroke fill;
  text-shadow:4px 4px 0 #000;
}
.project-lead{font-family:var(--comic);font-size:16px;color:#800080;margin:0 0 10px}
.back{font-family:var(--comic);font-weight:bold;font-size:14px}

.actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.btn-play{
  font-family:var(--impact);font-size:22px;letter-spacing:1px;text-transform:uppercase;
  padding:10px 18px;border:5px outset #00cc00;
  background:linear-gradient(#66ff66,#009900);color:#fff;text-shadow:2px 2px 0 #000;
  text-decoration:none;animation:throb .7s ease-in-out infinite alternate;
}
@keyframes throb{to{transform:scale(1.06)}}
.btn-play[aria-disabled]{background:linear-gradient(#ccc,#888);border-color:#888;animation:none}
.btn{font-family:var(--comic);font-weight:bold;padding:10px 14px;border:4px outset #ccc;
  background:linear-gradient(#fff,#ccc);color:#000080;text-decoration:none}

.project-shot{margin:10px 0;padding:6px;border:5px ridge var(--pink);background:#fff;text-align:center}
.project-shot img{border:3px inset #999;max-width:100%;height:auto}
.project-shot.is-empty{
  font-family:var(--courier);background:#c0c0c0;padding:40px 6px;
}
.project-shot.is-empty span{display:block}

.project-body{display:flex;gap:12px;flex-wrap:wrap}
.project-body > div{flex:1 1 320px;font-family:var(--times);font-size:15px;line-height:1.5}
.project-body p{margin:0 0 10px}
.facts{flex:0 0 220px;border:3px outset #ddd;background:#ffffcc;padding:8px}
.facts dl{margin:0;font-family:var(--courier);font-size:12px}
.facts div{border-bottom:1px dotted #999;padding:3px 0}
.facts dt{font-weight:bold;color:#800000}
.facts dd{margin:0}

/* ---------- footer ---------- */

.footer{
  padding:10px;text-align:center;
  background:linear-gradient(180deg,#000080,#000040);
  color:#ffff00;font-family:var(--comic);font-size:13px;
  border-top:5px double #fff;
}
.footer a{color:#00ffff}
.footer a:hover{color:#ff0000;background:#ffff00}
.footer nav{margin:6px 0}
.footer nav a{margin:0 6px;font-weight:bold}
.footer-mark{margin:0 0 4px;font-family:var(--impact);font-size:18px;letter-spacing:1px}

/* sparkle cursor trail */
.sparkle{position:fixed;width:8px;height:8px;pointer-events:none;z-index:9999;
  background:radial-gradient(circle,#fff 0%,#ffff00 40%,rgba(255,0,255,0) 70%);
  animation:fade .7s linear forwards}
@keyframes fade{to{opacity:0;transform:translateY(14px) scale(.4)}}

/* Blink and marching text are a joke, not a health hazard. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .marquee > span{padding-left:0}
}

/* On a phone the sidebars are decoration, so the games come first and the
   widget columns fall in underneath instead of pushing them off the screen. */
@media (max-width:860px){
  .layout{flex-direction:column}
  .col-left,.col-right{flex:none;width:auto}
  .middle{order:1}
  .col-left{order:2}
  .col-right{order:3}
  .menu{display:grid;grid-template-columns:1fr 1fr;gap:5px}
  .menu li{margin:0}
  .card{flex-direction:column}
  .card-shot,.card-shot img,.no-shot{width:100%;flex:none}
  .card-shot img,.no-shot{height:auto;aspect-ratio:4/3}
}

/* ---------- graffiti wall (Konami code) ---------- */

.wall-canvas{
  position:fixed;inset:0;z-index:9998;
  pointer-events:none;
  touch-action:none;
}
html.wall-on{cursor:crosshair}
html.wall-on .wall-canvas{cursor:crosshair}

.wall-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  padding:8px 12px;text-align:center;
  font-family:var(--comic);font-size:14px;color:#fff;
  background:repeating-linear-gradient(45deg,#000 0 14px,#7a0000 14px 28px);
  border-top:4px ridge var(--yellow);
}
.wall-bar b{color:#ffe14d}
.wall-bar button{
  margin-left:10px;font-family:var(--comic);font-weight:bold;
  padding:3px 12px;border:3px outset #eee;background:linear-gradient(#fff,#c8c8c8);
  color:#000080;cursor:pointer;
}

.wall-flash{
  position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:10000;
  padding:10px 18px;
  font-family:var(--impact);font-size:20px;letter-spacing:1px;
  color:#000;background:var(--yellow);border:4px ridge var(--red);
  box-shadow:5px 5px 0 rgba(0,0,0,.6);
  animation:blink 1s steps(1,end) 2;
}

.wall-hint{
  display:block;margin-top:6px;font-size:11px;
  font-family:var(--comic);color:#800080;cursor:pointer;
}
.wall-hint:hover{color:#ff0000;background:#ffff00}

/* ---------- reviews / guestbook ---------- */

.reviews{text-align:left}
.reviews h4{text-align:center}

.rev-score{
  margin:0 0 6px;text-align:center;font-size:12px;color:#000080;
  border-bottom:2px dotted #999;padding-bottom:5px;
}
.rev-score b{font-size:17px;color:#ff0000}

.rev-stars{display:flex;justify-content:center;gap:2px;margin:0 0 5px}
.rev-stars button{
  font-size:19px;line-height:1;padding:0 1px;
  border:0;background:none;cursor:pointer;
  color:#bbb;text-shadow:1px 1px 0 #777;
}
.rev-stars button.is-lit{color:#ffcc00;text-shadow:1px 1px 0 #a06a00}

.rev-form input,
.rev-form textarea{
  display:block;width:100%;margin:0 0 4px;padding:3px;
  font-family:var(--courier);font-size:11px;
  border:2px inset #bbb;background:#fff;
}
.rev-form textarea{resize:vertical}
.rev-post{width:100%;font-size:13px}

.rev-note{margin:4px 0 0;font-size:11px;color:#008000;text-align:center;min-height:1em}
.rev-note.is-bad{color:#ff0000}

.rev-list{margin-top:8px}
.rev-item{
  margin:0 0 6px;padding:5px;
  border:2px ridge var(--cyan);background:#f0ffff;
}
.rev-item:nth-child(even){border-color:var(--pink);background:#fff0ff}
.rev-stars-out{margin:0;font-size:13px;color:#ffaa00;text-shadow:1px 1px 0 #7a5200;letter-spacing:1px}
.rev-msg{margin:2px 0;font-size:12px;line-height:1.3;word-wrap:break-word;overflow-wrap:anywhere}
.rev-sign{margin:0;font-family:var(--courier);font-size:10px;color:#666}

/* The close button belongs to the phone panel only. */
.rev-close{display:none}

@media (max-width:860px){
  /* On a phone the widget is a screen of its own: the list can run as long as
     it likes without adding a hundred reviews to the page's own scroll. */
  .reviews{
    display:none;
    position:fixed;inset:0;z-index:10001;
    margin:0;border:0;border-top:6px ridge var(--pink);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:#ffffee;
    padding:8px 10px 30px;
  }
  html.rev-screen .reviews{display:block}
  html.rev-screen{overflow:hidden}
  .reviews h4{margin:-8px -10px 8px;padding:8px;font-size:16px}
  .rev-close{
    display:block;width:100%;margin:0 0 8px;font-size:14px;
  }
  .rev-form input,.rev-form textarea{font-size:16px}  /* 16px stops iOS zooming in */
  .rev-stars button{font-size:30px;padding:2px 4px}
  .rev-msg{font-size:14px}
  .rev-score{font-size:14px}
}

.dl-note{display:inline-block;font-family:'Courier New',monospace;font-size:13px;background:#ffff99;border:2px solid #000;padding:2px 6px;margin-left:6px;vertical-align:middle}