:root {
  --navy: #183c62;
  --blue: #315d84;
  --pale: #dbe5ec;
  --border: #9eafbd;
  --silver: #c0c0c0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #8198a8;
  color: #202020;
  font: 13px Arial, Helvetica, sans-serif;
  cursor: default;
}

a { color: #0000aa; cursor: pointer; }
a:visited { color: #551a8b; }
button { cursor: pointer; }
button, input { font: 12px Tahoma, Arial, sans-serif; }
.hidden { display: none !important; }

.page {
  width: 820px;
  max-width: 100%;
  margin: 17px auto;
  border: 2px outset #eee;
  background: #fff;
  box-shadow: 3px 4px 0 rgba(0,0,0,.18);
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: #e5e5e5;
  border-bottom: 1px solid #999;
  padding: 6px 10px;
  font: 10px Tahoma, Arial, sans-serif;
  color: #444;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 17px;
  background: #f1f1ed;
  border-bottom: 4px solid var(--navy);
}

.bfl-button {
  width: 108px;
  height: 78px;
  flex-shrink: 0;
  padding: 4px;
  border: 2px outset #eee;
  background: white;
}

.bfl-button:active { border-style: inset; }

.bfl-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-copy { min-width: 0; }

.brand-copy h1 {
  margin: 0;
  color: #143a60;
  font: bold 28px Georgia, "Times New Roman", serif;
}

.brand-copy p {
  margin: 4px 0;
  font-size: 11px;
  color: #555;
}

.navtop {
  padding: 9px 12px;
  background: var(--navy);
  color: white;
  font-size: 12px;
  line-height: 1.8;
}

.navtop a,
.navtop a:visited {
  color: white;
  text-decoration: none;
}

.navtop a:hover { text-decoration: underline; }

.layout {
  display: grid;
  grid-template-columns: 178px minmax(0,1fr);
}

.sidebar {
  padding: 11px 8px;
  background: #d8e0e7;
  border-right: 1px solid #8fa2b1;
}

.side-title {
  margin: 0 0 6px;
  padding: 5px 7px;
  background: var(--blue);
  color: white;
  font-size: 11px;
  font-weight: bold;
}

.side-title.spaced { margin-top: 17px; }

.sidebar > a {
  display: block;
  padding: 5px 6px;
  border-bottom: 1px dotted #9eacb9;
  font-size: 12px;
}

.side-box {
  margin-bottom: 13px;
  padding: 8px;
  border: 1px solid #a6b5c0;
  background: #eef2f4;
  font-size: 11px;
  line-height: 1.5;
}

.side-box p { margin: 6px 0; }

.content {
  min-width: 0;
  padding: 16px 20px 22px;
}

section { margin-bottom: 30px; }

h2 {
  margin: 3px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  color: #173c63;
  font: bold 20px Georgia, "Times New Roman", serif;
}

h3 {
  margin: 17px 0 9px;
  padding: 6px 8px;
  border: 1px solid #a5b6c4;
  background: var(--pale);
  font: bold 13px Georgia, "Times New Roman", serif;
}

p { line-height: 1.55; }

.small {
  font-size: 11px;
  color: #666;
}

.notice {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #b9b077;
  background: #ffffe3;
  font-size: 12px;
}

.old-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.old-table th,
.old-table td {
  padding: 7px;
  border: 1px solid #9dabb7;
  text-align: left;
  vertical-align: top;
}

.old-table th {
  width: 40%;
  background: #d7e1e9;
}

.old-table tr:nth-child(even) td {
  background: #f3f6f8;
}

/* MAIN IMAGE */

.hero {
  padding: 5px;
  border: 3px ridge #bbb;
  background: #080808;
}

.hero img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-caption {
  padding: 7px;
  color: #d5d5d5;
  text-align: center;
  font: 11px "Courier New", monospace;
  letter-spacing: 1px;
}

.demo-date {
  margin: 16px 0 5px;
  color: #183f67;
  text-align: center;
  font: bold 17px Georgia, serif;
}

.steam-panel {
  margin: 13px 0;
  padding: 14px;
  border: 1px solid #a8b8c5;
  background: #e9eef1;
  text-align: center;
}

.steam-button {
  display: inline-block;
  padding: 9px 17px;
  border: 2px outset #fff;
  background: var(--silver);
  color: #000 !important;
  text-decoration: none;
  font-weight: bold;
}

.steam-button:active { border-style: inset; }

/* TRAILER */

.trailer-frame {
  border: 3px ridge #b5b5b5;
  background: #c0c0c0;
  padding: 5px;
}

.trailer-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #080b0d;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8bb18d;
  text-align: center;
  font: 12px "Courier New", monospace;
  padding: 20px;
}

.trailer-screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.trailer-controls {
  padding: 7px;
  background: #c0c0c0;
  border-top: 2px groove #eee;
  font: 11px Tahoma, sans-serif;
}

/* ANNOUNCEMENTS */

.announcement {
  margin-bottom: 12px;
  border: 1px solid #a6b6c4;
  background: #f5f7f9;
}

.announcement-head {
  padding: 7px 9px;
  background: #dbe5ec;
  border-bottom: 1px solid #a6b6c4;
  font-size: 12px;
}

.announcement-date {
  display: block;
  margin-bottom: 4px;
  color: #536574;
  font: 10px "Courier New", monospace;
}

.announcement-body {
  padding: 9px 11px;
  font-size: 12px;
}

.announcement-body p { margin: 0 0 7px; }

/* GALLERY */

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.gallery figure { margin: 0; }

.gallery img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px ridge #ccc;
  cursor: zoom-in;
}

.gallery img:hover { border-color: var(--blue); }

.gallery figcaption {
  padding: 5px 1px;
  font-size: 11px;
  color: #555;
}

/* MEDIA PLAYER */

.player {
  margin-bottom: 14px;
  padding: 4px;
  border: 2px outset white;
  background: #c0c0c0;
}

.titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  background: linear-gradient(90deg,#000080,#397baa);
  color: white;
  font-weight: bold;
}

.player-screen {
  margin: 7px 3px;
  padding: 7px;
  border: 2px inset #eee;
  background: #101610;
  color: #9cc99c;
  font: 11px "Courier New", monospace;
  overflow-wrap: anywhere;
}

.win-btn {
  padding: 4px 10px;
  border: 2px outset white;
  background: #c0c0c0;
  color: black;
}

.win-btn:active { border-style: inset; }

.player-controls {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  padding: 3px;
}

.player input[type=range] { width: 80px; }

/* FOOTER */

.footer {
  padding: 13px;
  border-top: 2px solid var(--navy);
  background: #e6eaed;
  color: #555;
  text-align: center;
  font-size: 11px;
  line-height: 1.8;
}

.footer a { font-size: 11px; }

.site-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  border-top: 2px groove white;
  background: #c0c0c0;
  font: 11px Tahoma, sans-serif;
}

.status-clock {
  min-width: 67px;
  padding: 3px 8px;
  border: 2px inset #eee;
  text-align: center;
}

.retro-counter {
  display: inline-block;
  padding: 3px 6px;
  background: #080808;
  color: #82d48b;
  font: 12px "Courier New", monospace;
  letter-spacing: 2px;
}

/* SECRET WINDOWS */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: auto;
  padding: 25px 12px;
  background: #008080;
  font: 12px Tahoma, Arial, sans-serif;
}

.window {
  width: 620px;
  max-width: 100%;
  margin: 30px auto;
  padding: 3px;
  border: 3px outset #eee;
  background: #c0c0c0;
  box-shadow: 3px 3px 0 #333;
}

.win-body { padding: 17px; }

.field {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}

.field label { width: 100px; }

.field input {
  width: 225px;
  max-width: 100%;
  padding: 5px;
  border: 2px inset #eee;
  background: white;
}

.error { color: #a00000; font-weight: bold; }

.addressbar {
  margin-bottom: 10px;
  padding: 7px;
  border: 2px inset #eee;
  background: white;
  font: 12px "Courier New", monospace;
  overflow-wrap: anywhere;
}

.files {
  min-height: 170px;
  padding: 7px;
  border: 2px inset #eee;
  background: white;
}

.file-row {
  display: block;
  width: 100%;
  padding: 7px;
  border: 0;
  background: white;
  text-align: left;
}

.file-row:hover,
.file-row:focus {
  background: #000080;
  color: white;
}

.preview {
  min-height: 110px;
  margin-top: 12px;
  padding: 12px;
  border: 2px inset #eee;
  background: white;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.preview audio { width: 100%; }

.win-status {
  margin-top: 12px;
  padding: 5px;
  border: 2px inset #eee;
  font-size: 11px;
}

/* LIGHTBOX */

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(0,0,0,.93);
  cursor: zoom-out;
}

#lightbox img {
  max-width: 95%;
  max-height: 90vh;
  object-fit: contain;
}

@media(max-width:650px) {
  .page { margin: 0; }
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    border-right: 0;
    border-bottom: 1px solid #999;
  }
  .brand-copy h1 { font-size: 21px; }
  .gallery { grid-template-columns: 1fr; }
  .field {
    flex-direction: column;
    align-items: flex-start;
  }
  .topbar span:last-child { display: none; }
}

:focus-visible{outline:3px solid #9b4700;outline-offset:3px}body{line-height:1.5}button,a,input{touch-action:manipulation}.skip-link{position:fixed;top:-100px;left:12px;z-index:200;padding:12px;background:#fff}.skip-link:focus{top:8px}.bfl-button{border:0;background:transparent;cursor:default}.gallery a{display:block}.gallery img{aspect-ratio:16/9;object-fit:cover}.hero{position:relative;overflow:hidden}.hero:after{content:'';pointer-events:none;position:absolute;inset:5px;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.09) 3px 4px);opacity:.5}.effects-off .hero:after{display:none}.hero img{animation:screen-warmup 1.4s ease-out}@keyframes screen-warmup{from{filter:brightness(.8)}to{filter:brightness(1)}}.effects-off .hero img{animation:none}.win-btn{min-height:36px}.player-controls input{max-width:100%}.dialog-close{position:absolute;top:10px;right:10px}#lightbox img{max-width:100%;max-height:80vh}.overlay{overscroll-behavior:contain}.window{margin:10px auto}.small{color:#505050}.side-box p{overflow-wrap:anywhere}main:focus{outline:none}button:disabled{cursor:default;opacity:.6}.preview{line-height:1.6}.preview p{white-space:normal}.navtop a[aria-current=page]{text-decoration:underline;font-weight:bold}@media(max-width:650px){.content{padding:16px}.sidebar{display:flex;flex-wrap:wrap;gap:8px}.sidebar>.side-title,.sidebar>.side-box,.sidebar>.player{width:100%;margin:0}.sidebar>a{padding:8px}.brand{gap:10px;padding:12px}.bfl-button{width:70px;height:60px}.brand-copy h1{font-size:25px}.navtop a{display:inline-block;padding:6px}.site-status{gap:8px}.topbar{flex-wrap:wrap}.old-table{overflow-wrap:anywhere}.old-table th{width:42%}.field input{width:100%}.hero-caption{letter-spacing:.3px}.sidebar .spaced{margin-top:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.hero:after{display:none}}

@media(max-width:650px){.content{grid-row:1}.sidebar{grid-row:2;border-top:1px solid #8fa2b1}.navtop{padding:6px 10px}}

/* Desktop shell: 2000-era chrome with restrained motion. */
body{background:#587b85;background-image:linear-gradient(135deg,rgba(255,255,255,.035) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.035) 75%);background-size:4px 4px;padding-bottom:45px}
.page{border:3px outset #dfdfdf;background:#c0c0c0;box-shadow:4px 5px 0 #0005}
.topbar{margin:2px;padding:3px 6px;background:linear-gradient(90deg,#000080,#2873ac);border:0;color:white;font:bold 12px Tahoma,sans-serif;align-items:center}.window-glyphs{background:#c0c0c0;color:#111;border:2px outset #eee;line-height:13px;padding:1px 4px;letter-spacing:2px}
.brand{background:#ece9d8;border-bottom:2px groove white}.navtop{background:#c0c0c0;border-top:1px solid #fff;border-bottom:2px groove #fff;color:#555}.navtop a,.navtop a:visited{color:#111;padding:4px 7px}.navtop a:hover{background:#000080;color:white;text-decoration:none}.navtop a[aria-current=page]{box-shadow:inset 1px 1px #777,inset -1px -1px #fff;background:#ddd;text-decoration:none}
.content{margin:8px;padding:15px;background:#fff;border:2px inset #eee}.sidebar{background:#d4d0c8;border-right:2px groove #eee}.side-title{background:linear-gradient(90deg,#12345f,#527e9c)}.sidebar>a:hover{background:#000080;color:#fff}.side-box{border:2px inset #eee;background:#eae8e1}.brand-copy h1{color:#12345f}.player{box-shadow:2px 2px 0 #777}.player-screen{position:relative}.player-screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 2px,#0002 2px 3px)}
.content h2{font-size:20px}.window,.player,.trailer-frame{box-shadow:3px 3px 0 #0004}.window{transform-origin:50% 30%;animation:open-window .18s ease-out}.window-enter{animation:open-window .18s ease-out}@keyframes open-window{from{transform:translateY(6px) scale(.985);opacity:.45}to{transform:none;opacity:1}}
.win-btn:hover,.steam-button:hover{background:#d8d8d8}.win-btn:active,.steam-button:active{transform:translate(1px,1px)}.hero:before{content:'';position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(transparent,rgba(200,230,220,.055),transparent);height:35%;animation:scan-pass 9s linear infinite}@keyframes scan-pass{from{transform:translateY(-120%)}to{transform:translateY(400%)}}
.site-status{position:fixed;z-index:20;bottom:0;left:0;right:0;min-height:40px;gap:9px;background:#c0c0c0;border-top:2px outset #fff;box-shadow:0 -1px #777}.site-status #pageStatus{flex:1}.task-audio{font-weight:bold;min-width:88px}.status-clock{background:#c0c0c0}.is-loading #pageStatus{background:repeating-linear-gradient(90deg,#000080 0 8px,transparent 8px 11px);background-size:33px 3px;background-repeat:repeat-x;background-position:bottom;padding-bottom:5px;animation:loading-stripes .5s linear infinite}@keyframes loading-stripes{to{background-position:33px bottom}}
.gameplay-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.gameplay-shots figure{margin:0;border:2px ridge #ccc;background:#e5e5e5}.gameplay-shots img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.gameplay-shots figcaption{padding:5px;font:11px Tahoma,sans-serif}
.work-item{display:flex;gap:20px;align-items:center;border-bottom:1px dotted #999;padding:20px 6px}.work-item:last-child{border-bottom:0}.work-item h3{margin:0;padding:0;background:none;border:0;font:bold 22px Georgia,serif}.work-item p{margin:5px 0 10px}.work-icon{display:grid;place-items:center;flex-shrink:0;width:58px;height:70px;background:#183447;color:#e9e4c9;font:bold 30px Georgia,serif;border:3px outset #8090a0;box-shadow:3px 3px #aaa}.book-icon{border-left:8px solid #101b2b}.game-icon{height:58px;background:#6b3657;color:#ffe58f}.comic-icon{background:#e5d9b6;color:#25221f;transform:rotate(-3deg)}
.effects-off .hero:before,.effects-off .player-screen:after{display:none}.effects-off .window,.effects-off .window-enter,.effects-off .is-loading #pageStatus{animation:none}.effects-off .win-btn:active,.effects-off .steam-button:active{transform:none}
@media(max-width:650px){.content{margin:6px;padding:13px}.navtop a{padding:7px 5px}.gameplay-shots{grid-template-columns:1fr}.gameplay-shots img{max-height:200px}.topbar span:last-child{display:inline-block}.work-item{gap:14px}.site-status{font-size:10px}.brand-copy p{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero:before,.player-screen:after{display:none}.win-btn:active,.steam-button:active{transform:none}}