/* portal.css -- the Flash-portal look (build.py writes this) */
:root {
  --bg: #03051f;
  --panel: #101042;
  --bevel-out: #3535a3;
  --bevel-in: #070736;
  --ink: #e8e8f4;
  --link: #7db9ff;
  --gold: #ffd23d;
  --live: #00e05a;
  --down: #ff5e5e;
  --soon: #bdbdbd;
  --wip: #ffb23d;
  --shelf: #2a2a52;
  --ring: #8a6bd1;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  font-family: "Courier New", Courier, monospace; font-size: 13px;
  line-height: 1.15; }
a { color: var(--link); text-decoration: underline; }
a:visited { color: #b57dff; }
img { image-rendering: pixelated; }
code { background: #000; padding: 0 3px; border: 1px solid #333;
  font-family: inherit; }
.wrap { max-width: 900px; margin: 0 auto; padding: 12px 8px 0 8px; }

/* ---- masthead ---------------------------------------------------------- */
header { text-align: center; margin: 8px 0 14px 0; }
.masthead {
  margin: 0; font-size: 26px; letter-spacing: 2px; color: var(--gold);
  text-shadow: 2px 2px 0 #8a2be2, 3px 3px 0 #000; }
.strap { color: #9de3ff; margin: 4px 0 6px 0; }
.counter { margin: 4px 0; }
.counter-label { color: var(--soon); }
.counter-digits { display: inline-block; }
.digit {
  display: inline-block; width: 14px; height: 20px; line-height: 20px;
  background: #000; color: #39ff14; border: 1px solid #444;
  border-right-color: #222; border-bottom-color: #111; text-align: center;
  font-weight: bold; margin-right: 1px; }

/* ---- beveled panels ---------------------------------------------------- */
.panel {
  background: repeating-linear-gradient(0deg, #101042, #101042 3px,
              #0d0d38 3px, #0d0d38 6px);
  border: 4px solid;
  border-color: var(--bevel-out) var(--bevel-in) var(--bevel-in)
                var(--bevel-out);
  margin: 0 0 14px 0; padding: 8px;
}
.panel-title {
  font-size: 15px; color: #fff; background: #29296e; border: 2px solid;
  border-color: #5555cc #15152f #15152f #5555cc; padding: 2px 8px;
  display: inline-block; margin: 0 0 8px 0; letter-spacing: 1px; }

/* ---- game grid tiles --------------------------------------------------- */
.gamegrid { table-layout: fixed; width: 100%; }
.tile-table { width: 100%; border-collapse: collapse; text-align: center; }
.tilecell { padding: 0 4px; }
.tile {
  border: 4px solid;
  border-color: var(--bevel-out) var(--bevel-in) var(--bevel-in)
                var(--bevel-out);
  background: #000; padding: 3px; position: relative; }
.tile-title { color: #fff; font-weight: bold; font-size: 13px;
  text-decoration: none; display: inline-block; padding: 2px 0; }
.tile-title:hover { color: var(--gold); }
.tile-title.off { color: #ff9c9c; }
.tile-top { position: relative; }
.new-star {
  position: absolute; top: -10px; right: -12px; z-index: 2;
  display: inline-block; width: 46px; height: 46px; line-height: 46px;
  text-align: center; color: #6b0000; font-weight: bold; font-size: 11px;
  transform: rotate(12deg);
  background: radial-gradient(circle at 30% 30%, #fff56b 0 18%,
              #ffd23d 60%, #ff9c1a 100%);
  clip-path: polygon(50.0% 0.0%, 56.7% 24.9%, 75.0% 6.7%, 68.4% 31.6%,
    93.3% 25.0%, 75.1% 43.3%, 100.0% 50.0%, 75.1% 56.7%, 93.3% 75.0%,
    68.4% 68.4%, 75.0% 93.3%, 56.7% 75.1%, 50.0% 100.0%, 43.3% 75.1%,
    25.0% 93.3%, 31.6% 68.4%, 6.7% 75.0%, 24.9% 56.7%, 0.0% 50.0%,
    24.9% 43.3%, 6.7% 25.0%, 31.6% 31.6%, 25.0% 6.7%, 43.3% 24.9%);
}
.badge { font-size: 10px; font-weight: bold; padding: 1px 5px;
  border: 1px solid #000; letter-spacing: 1px; }
.badge-live { background: var(--live); color: #04240f; }
.badge-down { background: var(--down); color: #2b0000; }
.badge-wip { background: var(--wip); color: #3a2500; }
.badge-soon { background: var(--soon); color: #222; }
.thumb { width: 120px; height: 90px; display: block; margin: 4px auto;
  border: 2px solid #333; }
.thumb.grey { filter: grayscale(0.9); opacity: 0.75; }
.blurb { color: #cfd6ff; font-size: 12px; margin: 2px 4px; }
.codes { color: #9effc9; font-size: 10px; margin: 2px 4px; }
.play { display: inline-block; margin: 4px auto 2px auto; padding: 2px 14px;
  font-weight: bold; color: #04240f; background: var(--live); border: 3px solid;
  border-color: #7dff9e #004d24 #004d24 #7dff9e; text-decoration: none; }
.play:hover { filter: brightness(1.1); }
.play.off { background: #722; color: #ffb8b8;
  border-color: #a55 #400 #400 #a55; }

/* ---- coming soon shelf -------------------------------------------------- */
.shelf {
  border: 3px dashed #7a63c4; background: var(--shelf); padding: 10px 12px;
  display: flex; flex-wrap: wrap; gap: 12px; }
.shelf-item { width: 200px; text-align: center; }
.shelf-item.wip { border-left: 6px solid var(--wip); }
.shelf-item.soon { border-left: 6px solid #808080; }
.shelf-item .grey { opacity: 0.7; }
.shelf-name {
  font-weight: bold; color: #fff; border-bottom: 1px dashed
  #7a63c4; padding: 4px 0; margin-bottom: 4px;
  display: flex; flex-direction: column; gap: 4px; align-items: center; }
.shelf-empty { color: #a0a0c8; font-style: italic; }

/* ---- history table ------------------------------------------------------ */
table.gametable { width: 100%; border-collapse: collapse; margin-top: 4px; }
.gametable th, .gametable td { border: 1px solid #3a3a7a; padding: 3px 6px;
  text-align: left; }
.gametable th { background: #29296e; color: var(--gold); }
.history-when { color: var(--soon); font-family: inherit; }
.hisrow-live .badge { background: #0a2; }
.hisrow-down .badge { background: var(--down); color: #2b0000; }
.hisrow-wip .badge { background: #a70; }
.hisrow-soon .badge { background: #555; }

/* ---- footer / webring ---------------------------------------------------- */
footer { text-align: center; padding: 14px 0 20px 0; color: var(--soon);
  border-top: 1px solid #3535a3; }
.webring a { color: #9b8aff; }
.ring-label { color: #b7a6ff; }
.ring-sep { color: #6d5ba8; padding: 0 4px; }
.mantra { color: #8fb0ff; }
.builtwith { color: #6d6da8; font-size: 11px; }
.hits-note { color: #6d6da8; font-size: 11px; }

/* ---- starfield (static, no JS) ----------------------------------------- */
body { background-image:
  radial-gradient(1px 1px at 25% 15%, #ffffffaa 50%, transparent 51%),
  radial-gradient(1px 1px at 75% 35%, #ffffffaa 50%, transparent 51%),
  radial-gradient(1px 1px at 45% 65%, #ffffffaa 50%, transparent 51%),
  radial-gradient(1px 1px at 85% 85%, #ffffffaa 50%, transparent 51%),
  radial-gradient(2px 2px at 15% 80%, #ccd6ff99 50%, transparent 51%),
  radial-gradient(2px 2px at 65% 10%, #ccd6ff99 50%, transparent 51%);
  background-size: 220px 220px, 175px 175px, 300px 300px, 400px 400px,
                   500px 500px, 350px 350px;
  background-color: var(--bg); }