/* RETRONET — hand-rolled 1997 stylesheet. No frameworks were harmed. */

html { background: #000; }
body {
  margin: 0;
  color: #000;
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.3;
  cursor: default;
}
canvas.px, .px canvas { image-rendering: pixelated; image-rendering: crisp-edges; vertical-align: middle; }

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

.center { text-align: center; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
.shake { display: inline-block; animation: shake .25s linear infinite alternate; }
@keyframes shake { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.bounce { display: inline-block; animation: bounce .7s ease-in-out infinite alternate; }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.rainbow { animation: rainbow 2s linear infinite; }
@keyframes rainbow {
  0% { color: #ff0000; } 17% { color: #ff8800; } 33% { color: #ffff00; }
  50% { color: #00ff00; } 67% { color: #00ffff; } 83% { color: #ff00ff; } 100% { color: #ff0000; }
}
.spin { display: inline-block; animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotateY(360deg); } }

/* ---- Windows 95 chrome ---- */
.w95 {
  background: #c0c0c0;
  border-top: 2px solid #fff; border-left: 2px solid #fff;
  border-right: 2px solid #404040; border-bottom: 2px solid #404040;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
}
.w95-btn {
  display: inline-block;
  min-width: 80px; padding: 4px 12px;
  font: bold 12px Tahoma, "MS Sans Serif", Arial, sans-serif;
  color: #000; text-decoration: none; text-align: center;
  background: #c0c0c0;
  border-top: 2px solid #fff; border-left: 2px solid #fff;
  border-right: 2px solid #404040; border-bottom: 2px solid #404040;
  box-shadow: inset 1px 1px 0 #dfdfdf;
  cursor: pointer;
}
.w95-btn:hover { background: #d4d4d4; color: #000; }
.w95-btn:active {
  border-top: 2px solid #404040; border-left: 2px solid #404040;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  box-shadow: inset 1px 1px 0 #808080;
}
.w95-btn.big { min-width: 140px; padding: 8px 18px; font-size: 15px; }
.w95-inset {
  background: #fff;
  border-top: 2px solid #808080; border-left: 2px solid #808080;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  box-shadow: inset 1px 1px 0 #000;
}
.titlebar {
  background: #000080;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff; font: bold 12px Tahoma, "MS Sans Serif", Arial, sans-serif;
  padding: 3px 4px; display: flex; align-items: center; gap: 6px;
}
.titlebar .ctl { margin-left: auto; display: flex; gap: 2px; }
.titlebar .ctl span {
  display: inline-block; width: 14px; height: 12px; line-height: 12px; text-align: center;
  background: #c0c0c0; color: #000; font-size: 10px;
  border-top: 1px solid #fff; border-left: 1px solid #fff;
  border-right: 1px solid #404040; border-bottom: 1px solid #404040;
}

.overlay-nav {
  position: fixed; top: 8px; right: 8px; z-index: 9999;
  display: flex; gap: 5px;
}

/* ---- page frame ---- */
.page { width: 800px; max-width: 100%; margin: 0 auto; box-sizing: border-box; }
section { overflow: hidden; }

/* browser window hero */
#hero { padding: 24px 8px; }
.browser { margin: 0 auto; }
.menubar { font: 12px Tahoma, "MS Sans Serif", Arial, sans-serif; padding: 2px 4px; border-bottom: 1px solid #808080; }
.menubar span { margin-right: 12px; }
.menubar span:first-letter { text-decoration: underline; }
.toolbar { display: flex; align-items: center; gap: 6px; padding: 4px; border-bottom: 1px solid #808080; font: 10px Tahoma, Arial, sans-serif; }
.toolbar .tb { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 6px; min-width: 36px; }
.addressbar { display: flex; align-items: center; gap: 6px; padding: 4px; font: 12px Tahoma, Arial, sans-serif; }
.addressbar .w95-inset { flex: 1; padding: 2px 4px; font-family: "Courier New", monospace; white-space: nowrap; overflow: hidden; }
.viewport { background: #fff; padding: 16px 20px; min-height: 380px; }
.statusbar { display: flex; gap: 6px; padding: 2px 4px; font: 11px Tahoma, Arial, sans-serif; }
.statusbar .w95-inset { padding: 1px 4px; background: #c0c0c0; box-shadow: none; }
.statusbar .msg { flex: 1; }
.progress { width: 120px; display: flex; gap: 1px; padding: 2px; }
.progress i { flex: 1; height: 9px; background: #000080; }
.progress i.off { background: transparent; }

.logo-wrap { text-align: center; margin: 8px 0 4px; }
.tagline { font: bold 22px "Times New Roman", serif; letter-spacing: 3px; text-align: center; margin: 4px 0 12px; }
.intro { font-size: 17px; }
.cta { text-align: center; margin: 18px 0 6px; }
.cta .w95-btn { margin: 4px; }

/* black starfield section */
#about { background: #000; color: #fff; padding: 30px 8px 40px; }
#about h2 { font: bold 32px "Times New Roman", serif; color: #ff0; text-align: center; margin: 0 0 14px; text-shadow: 3px 3px 0 #800; }
#about p { font-size: 17px; }
#about .lead { color: #6ffcf5; font-family: Arial, Helvetica, sans-serif; }
hr.rule { border: 0; height: 4px; background: repeating-linear-gradient(90deg, #ff0 0 8px, #f00 8px 16px, #0f0 16px 24px, #0ff 24px 32px); margin: 20px 0; }
.two-col { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.two-col > * { flex: 1 1 300px; }

/* webmaster's homepage */
#home { padding: 24px 8px; color: #000; }
#home .inner { background: #fff; border: 4px ridge #99f; padding: 14px 18px; }
#home h2 { font: bold 30px "Comic Sans MS", "Comic Neue", cursive; color: #00f; text-align: center; margin: 0; }
#home h2 small { font-size: 16px; color: #f0f; display: block; }
.facts { font-family: Arial, sans-serif; font-size: 15px; }
.facts td { padding: 2px 10px 2px 0; vertical-align: top; }
.facts td:first-child { font-weight: bold; color: #008; white-space: nowrap; }
.smileys { border-collapse: collapse; font: 14px "Courier New", monospace; width: 100%; }
.smileys td, .smileys th { border: 1px solid #808080; padding: 2px 6px; }
.smileys th { background: #ff0; text-align: left; }
.smileys tr:nth-child(even) td { background: #ffe; }
.marquee-box { background: #000; color: #0f0; font: bold 14px "Courier New", monospace; padding: 4px 0; border: 2px inset #808080; margin: 12px 0; }
.counter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: Arial, sans-serif; font-size: 14px; margin-top: 10px; }

/* interests / fish */
#fish { padding: 26px 8px; color: #000; }
#fish h2 { font: bold 28px "Times New Roman", serif; letter-spacing: 8px; text-align: center; color: #fff; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; margin: 0 0 12px; }
.fishtable { width: 100%; border-collapse: separate; border-spacing: 3px; background: #fff; border: 3px double #000; }
.fishtable td { background: #e8f8ff; padding: 6px 8px; font-size: 15px; font-family: Arial, sans-serif; vertical-align: middle; }
.fishtable td:first-child { width: 60px; text-align: center; background: #cfe; }
.fishtable td.na { color: #888; }
.factbox { background: #ffc; border: 2px dashed #f00; padding: 10px 14px; margin-top: 14px; font-family: "Comic Sans MS", cursive; }

/* computer lab */
#lab { background: #c0c0c0; padding: 24px 8px; }
#lab h2 { font: bold 24px Tahoma, Arial, sans-serif; margin: 0 0 12px; text-align: center; }
.calc { width: 190px; padding: 6px; font-family: Tahoma, Arial, sans-serif; }
.calc .screen { text-align: right; font: 22px "Courier New", monospace; padding: 4px 6px; margin-bottom: 6px; overflow: hidden; white-space: nowrap; background: #dfe; }
.calc .keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.calc .keys button { min-width: 0; padding: 6px 0; font-size: 13px; }
.calc .keys button.op { color: #00a; }
.calc .keys button.eq { color: #a00; }
.search { flex: 1; }
.search .w95-inset { padding: 2px; display: flex; gap: 4px; }
.search input { flex: 1; border: 0; outline: 0; font: 14px "Courier New", monospace; padding: 2px 4px; }
.terminal { background: #000; color: #40ff40; font: 13px "Courier New", monospace; padding: 8px 10px; border: 3px inset #808080; white-space: pre; overflow-x: auto; margin: 0; }
.terminal .cursor { display: inline-block; width: 8px; height: 13px; background: #40ff40; vertical-align: text-bottom; animation: blink .8s steps(1) infinite; }

/* guestbook */
#guest { background: #201a0a; color: #fec36c; padding: 26px 8px; }
#guest h2 { font: bold 30px Georgia, "Times New Roman", serif; color: #fffd7a; text-align: center; margin: 0 0 6px; }
#guest .sub { text-align: center; font-style: italic; margin: 0 0 14px; }
.gb-form { background: #fff; color: #000; padding: 10px 14px; font-family: Arial, sans-serif; font-size: 14px; border: 4px outset #fec36c; }
.gb-form label { display: block; margin: 6px 0 2px; font-weight: bold; }
.gb-form input, .gb-form textarea, .gb-form select {
  width: 100%; box-sizing: border-box; font: 14px "Courier New", monospace; padding: 3px;
  border-top: 2px solid #808080; border-left: 2px solid #808080; border-right: 2px solid #fff; border-bottom: 2px solid #fff; background: #fff;
}
.gb-form textarea { height: 70px; resize: vertical; }
.gb-entries { margin-top: 16px; }
.gb-entry { background: #131901; border: 1px dotted #fec36c; padding: 8px 12px; margin-bottom: 8px; font-family: "Courier New", monospace; font-size: 13px; }
.gb-entry b { color: #fffd37; }
.gb-entry .when { color: #8c8c8c; float: right; }

/* webring + footer */
#ring { background: #99f; padding: 26px 8px; color: #000; }
#ring h2 { font: bold 26px "Times New Roman", serif; text-align: center; margin: 0 0 10px; color: #000080; }
.ring { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; background: #fff; border: 3px ridge #000080; padding: 12px; font: 13px Arial, sans-serif; }
.ring a { display: inline-flex; align-items: center; gap: 4px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 18px; }
.badges canvas { display: block; }
footer { background: #000; color: #8c8c8c; font: 12px Arial, sans-serif; text-align: center; padding: 22px 8px 30px; }
footer p { margin: 4px 0; }
footer a { color: #8080ff; }

/* cursor trail */
.trail { position: fixed; pointer-events: none; z-index: 99999; font-size: 14px; color: #ff0; text-shadow: 0 0 2px #f00; animation: fade .8s linear forwards; }
@keyframes fade { to { opacity: 0; transform: translateY(14px); } }

@media (max-width: 600px) {
  .overlay-nav .w95-btn { min-width: 50px; font-size: 10px; padding: 3px 5px; }
  .viewport { padding: 10px; }
  .tagline { font-size: 16px; letter-spacing: 2px; }
}

/* ---- $RETRONET token / Solana ---- */
.buy-btn { background: #ffe000 !important; color: #000 !important; }
.buy-btn:hover { background: #fff060 !important; }
.buy-strip { text-align: center; margin: 14px 0 0; }
.buy-strip .w95-btn { margin: 3px; }
#token { background: #000080; color: #fff; padding: 28px 8px; }
#token h2 { font: bold 30px "Times New Roman", serif; text-align: center; margin: 0 0 14px; color: #ff0; text-shadow: 2px 2px 0 #f00; }
.dialog { color: #000; }
.dialog .body { padding: 12px 14px; font: 13px Tahoma, "MS Sans Serif", Arial, sans-serif; }
.ca-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0 12px; }
.ca-row .w95-inset { flex: 1; min-width: 200px; font: 13px "Courier New", monospace; padding: 4px 6px; word-break: break-all; }
.stats { border-collapse: collapse; width: 100%; font: 13px "Courier New", monospace; background: #fff; }
.stats td { border: 1px solid #808080; padding: 3px 8px; }
.stats td:first-child { background: #e0e0e0; font-weight: bold; width: 40%; }
.stats .up { color: #008000; font-weight: bold; }
.stats .down { color: #c00; font-weight: bold; }
.howto { font: 15px "Times New Roman", serif; }
.howto li { margin: 4px 0; }
.ticker { background: #000; color: #ff0; font: bold 13px "Courier New", monospace; padding: 4px 0; border-top: 2px solid #ff0; border-bottom: 2px solid #ff0; }
.dyor { color: #ff8080; font-weight: bold; }

/* ---- winmine.exe ---- */
.mines { display: inline-block; text-align: left; padding: 0 0 6px; }
.mines .menubar { border-bottom: 0; }
.mines-top { display: flex; justify-content: space-between; align-items: center; margin: 6px 6px 6px; padding: 4px; border: 2px inset #808080; }
.led { background: #000; color: #f00; font: bold 20px "Courier New", monospace; padding: 0 3px; border: 1px inset #808080; letter-spacing: 1px; line-height: 24px; }
.mines .face { min-width: 26px; width: 26px; height: 26px; padding: 0; font: bold 11px "Courier New", monospace; line-height: 22px; }
.mines-grid { display: grid; gap: 0; margin: 0 6px; border: 3px inset #808080; width: max-content; }
.cell {
  width: 20px; height: 20px; padding: 0; margin: 0; box-sizing: border-box;
  background: #c0c0c0; color: #000; font: bold 13px Tahoma, Arial, sans-serif; line-height: 16px; cursor: default;
  border-top: 2px solid #fff; border-left: 2px solid #fff; border-right: 2px solid #808080; border-bottom: 2px solid #808080;
}
.cell.open { border: 1px solid #808080; border-width: 0 0 1px 1px; background: #c0c0c0; }
.cell.flag { color: #d00; }
.cell.boom { background: #f00; }
.cell.wrong { color: #d00; }
.cell.n1 { color: #0000ff; } .cell.n2 { color: #008000; } .cell.n3 { color: #ff0000; } .cell.n4 { color: #000080; }
.cell.n5 { color: #800000; } .cell.n6 { color: #008080; } .cell.n7 { color: #000; } .cell.n8 { color: #808080; }

/* ---- sticker dump ---- */
section { position: relative; }
section > .page { position: relative; z-index: 1; }
.sticker { position: absolute; z-index: 0; pointer-events: none; }
.sticker.wiggle { animation: wiggle 1.2s ease-in-out infinite alternate; }
.sticker.bob { animation: bounce 1s ease-in-out infinite alternate; }
.sticker.twirl { animation: spin 4s linear infinite; }
@keyframes wiggle { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.sticker-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 10px 14px; padding: 10px 4px; }
.sticker-row.bar { background: #000; border-top: 3px double #ff0; border-bottom: 3px double #ff0; }
.sticker-row.light { background: #fff; border-top: 3px double #000; border-bottom: 3px double #000; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-top: 12px; }
.gallery .item { background: #f4f4f4; border: 2px inset #c0c0c0; text-align: center; padding: 6px 2px 4px; font: 10px Tahoma, Arial, sans-serif; }
.gallery .item canvas { display: block; margin: 0 auto 4px; }
.gallery .item .nm { color: #00a; text-decoration: underline; }
.gallery h3 { font: bold 16px "Comic Sans MS", cursive; color: #080; margin: 16px 0 0; }

/* ---- rails, parades, wall, banner ---- */
.page[data-rails] { display: flex; gap: 8px; align-items: stretch; }
.page[data-rails] > .page-inner { flex: 1; min-width: 0; }
.rail { width: 44px; flex: 0 0 44px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 10px; padding: 6px 0; }
.parade { background: #000; padding: 6px 0; border-top: 2px solid #f0f; border-bottom: 2px solid #0ff; }
.parade canvas { vertical-align: middle; }
.banner-wrap { text-align: center; margin: 12px 0; }
.banner-wrap canvas { border: 2px outset #c0c0c0; cursor: pointer; }
#wall { background: #fff; padding: 20px 8px; }
#wall h2 { font: bold 26px "Comic Sans MS", cursive; color: #f0f; text-align: center; margin: 0 0 4px; }
#wall p { text-align: center; font: 12px Arial, sans-serif; margin: 0 0 10px; }
.gif-wall { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center; align-items: center; padding: 10px; border: 6px ridge #f0f; background: #fff; }
@media (max-width: 700px) { .rail { display: none; } }

/* ---- sol.exe ---- */
.games { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: flex-start; margin-top: 18px; }
.games > div { text-align: center; }
.sol { display: inline-block; text-align: left; }
.sol .menubar { border-bottom: 0; }
.sol-board { position: relative; background: #008000; padding: 8px; border: 2px inset #808080; margin: 0 4px 4px; width: 372px; }
.sol-row { display: flex; gap: 8px; }
.sol-top { margin-bottom: 10px; }
.sol-top .gap { width: 44px; }
.sol-slot { position: relative; width: 44px; height: 60px; cursor: pointer; }
.sol-tab { min-height: 60px; }
.card {
  position: absolute; left: 0; top: 0; width: 44px; height: 60px; box-sizing: border-box;
  background: #fff; border: 1px solid #000; border-radius: 3px;
  font: bold 11px Arial, sans-serif; line-height: 1; user-select: none;
}
.card.red { color: #d00; } .card.black { color: #000; }
.card .tl { position: absolute; left: 3px; top: 3px; text-align: left; }
.card .br { position: absolute; right: 3px; bottom: 3px; text-align: right; transform: rotate(180deg); }
.card .mid { position: absolute; left: 0; right: 0; top: 18px; text-align: center; font-size: 22px; }
.card.down { background-color: #2040c0; background-repeat: repeat; image-rendering: pixelated; border-color: #000; }
.card.down::after { content: ''; position: absolute; inset: 3px; border: 1px solid #fff; border-radius: 2px; }
.card.empty { background: transparent; border: 1px solid #0a0; border-style: dashed; color: #0c0; text-align: center; line-height: 58px; font-size: 20px; }
.card.sel { outline: 3px solid #ff0; outline-offset: -1px; }
.sol-status { font: 11px Tahoma, Arial, sans-serif; padding: 2px 8px 4px; display: flex; gap: 10px; align-items: center; }
.sol-status button { min-width: 0; padding: 2px 8px; }
.sol-win { position: absolute; left: 0; top: 0; pointer-events: none; }
.games > div:first-child { flex: 0 0 250px; max-width: 250px; }
.games > div:first-child .buy-strip small { display: block; }

/* ---- artsy pass ---- */
.starfield { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
#about { background-image: none !important; }
.painting { display: inline-block; background: #fff; padding: 10px; border: 16px solid transparent; box-shadow: 4px 4px 0 #000; margin: 6px; text-align: center; }
.painting canvas { display: block; image-rendering: pixelated; }
.painting .caption { font: italic 12px Georgia, serif; color: #000; margin-top: 6px; }
.painting.dark { background: #000; }
.painting.dark .caption { color: #fec36c; }
.pxframe { border: 16px solid transparent; }
.pxhead { text-align: center; margin: 0 0 12px; }
.pxhead canvas { image-rendering: pixelated; vertical-align: middle; }
.firebar { display: block; width: 100%; background: #000; }
.ascii { white-space: pre; font: 12px/1.15 "Courier New", Courier, monospace; background: #000; color: #0f0; padding: 12px 16px; border: 3px double #0f0; margin: 12px 0; overflow-x: auto; }
.ascii b { color: #ff0; }
hr.rule { background-size: 64px 4px; animation: rule 1s linear infinite; }
@keyframes rule { to { background-position: 64px 0; } }

/* ---- more art ---- */
.divider { height: 24px; background-repeat: repeat-x; background-position: center; image-rendering: pixelated; }
.divider.tall { height: 48px; background-repeat: repeat; }
#artgallery { background: #2a1a0a; color: #fec36c; padding: 26px 8px; }
#artgallery p.lead { text-align: center; font: italic 14px Georgia, serif; margin: 0 0 12px; }
.art-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.art-item { padding: 8px; }
.art-item canvas { max-width: 100%; }
.art-item .vote { margin-top: 6px; min-width: 60px; }
.photo { display: inline-block; background: #fff; padding: 6px 6px 20px; border: 1px solid #888; box-shadow: 3px 3px 0 #000; transform: rotate(-3deg); margin: 8px; }
.photo canvas { display: block; image-rendering: pixelated; }
.photo .caption { font: 11px "Comic Sans MS", cursive; color: #333; margin-top: 6px; text-align: center; }
.matrix-wrap { border: 3px inset #808080; background: #000; margin-top: 12px; }
.plasma-wrap { border: 2px solid #fff; margin: 10px 0; }

/* ---- round four ---- */
.flyer { position: absolute; left: -80px; z-index: 0; pointer-events: none; animation: fly linear infinite; }
@keyframes fly { from { transform: translate(-80px, 0) rotate(0deg); } to { transform: translate(calc(100vw + 80px), 120px) rotate(360deg); } }
.gate { position: fixed; inset: 0; z-index: 100000; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .6s; overflow: hidden; }
.gate.open { opacity: 0; pointer-events: none; }
.gate-stars { position: absolute; left: 0; top: 0; }
.gate-inner { position: relative; text-align: center; max-width: 900px; padding: 20px; }
.gate-row { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 16px 0; flex-wrap: wrap; }
.gate-text { font: 16px "Times New Roman", serif; }
.gate-text p { margin: 6px 0; }
.gate-title { font: bold 22px "Times New Roman", serif; color: #ff0; letter-spacing: 3px; }
.gate-enter { font: bold 18px "Courier New", monospace; color: #0f0; margin-top: 14px !important; }
.gate-parade { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.gate-small { font: 11px Arial, sans-serif; color: #888; }
body.gated { overflow: hidden; }
.mini { vertical-align: middle; margin: 0 3px; }
.coin-big { text-align: center; margin: 8px 0; }

/* ---- round five ---- */
.village-map { position: relative; display: inline-block; line-height: 0; border: 6px ridge #804000; background: #000; }
.village-map canvas { display: block; image-rendering: pixelated; max-width: 100%; }
.village-labels { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.village-hot { position: absolute; display: block; z-index: 2; border: 2px dashed transparent; }
.village-hot:hover { border-color: #ff0; background: rgba(255,255,0,.15); }
#map { background: #205020; color: #fff; padding: 24px 8px; text-align: center; }
#map p { font: 14px "Comic Sans MS", cursive; color: #ff0; margin: 0 0 12px; }
.comic { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px 0; }
.comic .panel { background: #fff; border: 3px solid #000; padding: 4px; text-align: center; }
.comic .panel canvas { display: block; image-rendering: pixelated; }
.comic .panel .cap { font: bold 12px "Comic Sans MS", cursive; color: #000; margin-top: 4px; max-width: 160px; }
.gb-avatar { float: left; margin: 2px 10px 2px 0; }
.trail { position: fixed; pointer-events: none; z-index: 99999; animation: fade .8s linear forwards; image-rendering: pixelated; }

/* ---- pinball.exe ---- */
.pinball { display: inline-block; text-align: left; }
.pinball .menubar { border-bottom: 0; }
.pb-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 6px; padding: 4px; border: 2px inset #808080; font: bold 11px Tahoma, Arial, sans-serif; }
.pb-top .led { font-size: 16px; }
.pinball canvas.table { display: block; width: 320px; height: 560px; image-rendering: pixelated; margin: 0 6px; border: 3px inset #808080; background: #000; cursor: crosshair; }
.pinball.focus canvas.table { outline: 2px solid #ff0; }
.pb-msg { font: bold 11px "Courier New", monospace; color: #ff0; background: #000; margin: 4px 6px; padding: 3px 6px; min-height: 14px; border: 1px inset #808080; }
.pb-ctl { display: flex; justify-content: space-between; gap: 6px; margin: 4px 6px 6px; }
.pb-ctl .w95-btn { flex: 1; min-width: 0; user-select: none; }
@media (max-width: 400px) { .pinball canvas.table { width: 240px; height: 420px; } }

/* ---- lock.exe ---- */
.lock-art { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 4px 0 8px; }
.lock-headline { font: bold 15px "Times New Roman", serif; margin: 4px 0; }
.lock-clock { display: inline-block; background: #000; color: #f00; font: bold 22px "Courier New", monospace; padding: 4px 10px; border: 2px inset #808080; letter-spacing: 1px; }
.lock-bar { position: relative; height: 18px; background: #fff; margin: 0 10px; overflow: hidden; }
.lock-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #000080; width: 0; min-width: 2px; }
.lock-bar span { position: absolute; left: 0; right: 0; top: 0; line-height: 18px; text-align: center; font: bold 11px Tahoma, Arial, sans-serif; color: #000; }
.cert { font: 11px/1.25 "Courier New", monospace; background: #fff; color: #000; margin: 0; padding: 6px; border: 1px solid #808080; overflow-x: auto; }

.cabar { border-top: 1px solid #808080; }
.cabar .w95-inset { font-family: "Courier New", monospace; word-break: break-all; }
.gate-ca { font: 13px "Courier New", monospace; color: #6ffcf5; margin: 6px 0; }
.gate-ca-val { color: #fff; word-break: break-all; }

/* ---- shared features + mobile ---- */
.vote.voted { background: #ffd0d0; }
html, body { overflow-x: hidden; }
@media (max-width: 480px) {
  .sol { transform: scale(0.86); transform-origin: top center; margin-bottom: -60px; }
  .gate-row > canvas:last-child { display: none; }
  .gate-row > canvas:first-child { width: 72px !important; height: 84px !important; }
  .gate-inner { padding: 10px; }
  .gate-text { font-size: 14px; }
  .gate-title { font-size: 18px; }
  .gate-parade canvas { width: 32px !important; height: auto !important; }
  .toolbar { flex-wrap: wrap; }
  .menubar span { margin-right: 8px; }
  .titlebar { font-size: 11px; }
  .overlay-nav { top: 4px; right: 4px; }
  .cta .w95-btn.big { min-width: 0; width: calc(100% - 8px); }
  .lock-clock { font-size: 16px; }
  .games > div:first-child { flex-basis: 100%; max-width: 100%; }
  .pinball canvas.table { width: 288px; height: 504px; }
}