/*
Theme Name: Past the Stars
Theme URI: https://pastthestars.com
Author: Commander Jones
Description: A floating game console over an animated sky. Press play, enter the access code, and Past the Stars opens right on the page. Pairs with the Past the Stars plugin, which hosts the game files.
Version: 1.1.0
Requires at least: 5.8
Requires PHP: 7.2
Text Domain: past-the-stars
*/

:root {
  --void: #05061a;
  --deep: #0d0b24;
  --violet: #2a2452;
  --rose: #96468a;
  --gold: #ffd34d;
  --gold-d: #d8aa46;
  --cyan: #5ae6ff;
  --ice: #c8f0ff;
  --crimson: #c23c46;
  --text: #e8e2f4;
  --muted: #9aa6c8;
  --pixel: November, "Courier New", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; background: var(--void); color: var(--text); overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body.playing { overflow: hidden; }
a { color: var(--cyan); }

#bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.page { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 0 20px; }

/* ---------------------------------------------------------------- nav */
.top-nav { width: 100%; max-width: 1180px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img, .brand-word { image-rendering: pixelated; display: block; height: 34px; width: auto; }
.brand img:first-child { height: 32px; border-radius: 6px; }
.game-bar .brand-word { height: 26px; }
.nav-links { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.nav-links a { font-family: var(--pixel); font-size: 12px; letter-spacing: .1em; color: var(--ice); text-decoration: none; padding: 8px 12px;
  border: 1px solid rgba(90, 230, 255, .25); border-radius: 4px; background: rgba(13, 11, 36, .55); backdrop-filter: blur(6px); transition: .15s; }
.nav-links a:hover { border-color: var(--cyan); color: #fff; background: rgba(42, 36, 82, .8); }
.nav-links a.nav-play { color: #1a1206; background: var(--gold); border-color: var(--gold); }
.nav-links a.nav-play:hover { background: #ffe38a; }

/* ---------------------------------------------------------------- hero */
.hero { width: 100%; max-width: 1180px; display: flex; flex-direction: column; align-items: center; padding: 10px 0 40px; }
.hero-copy { text-align: center; }
.title { line-height: 0; }
.title .logo { width: min(520px, 78vw); height: auto; image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .8)) drop-shadow(0 0 22px rgba(120, 60, 255, .45)) drop-shadow(0 0 40px rgba(255, 190, 40, .2)); }
.tagline { margin-top: 10px; color: var(--muted); font-size: clamp(13px, 1.6vw, 17px); letter-spacing: .04em; }

.console-stage { position: relative; width: min(940px, 100%); aspect-ratio: 16 / 9; max-height: 62vh; margin: 6px auto 0; cursor: grab; outline: none;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .85)) drop-shadow(0 0 40px rgba(150, 70, 138, .35)); }
.console-stage:focus-visible { filter: drop-shadow(0 0 0 2px var(--cyan)) drop-shadow(0 30px 40px rgba(0, 0, 0, .85)); }
.console-stage canvas { width: 100% !important; height: 100% !important; display: block; }
.console-fallback { position: absolute; inset: 18% 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--pixel); color: var(--gold); border: 3px solid var(--gold-d); border-radius: 26px; background: var(--deep); }
.console-fallback small { color: var(--ice); font-size: 11px; }
.console-fallback img { width: 60%; image-rendering: pixelated; }

.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }
.btn-play { font-family: var(--pixel); font-size: 20px; letter-spacing: .16em; color: #1a1206; background: var(--gold); border: 0; cursor: pointer;
  padding: 14px 34px; border-radius: 6px; box-shadow: 0 5px 0 #8a5a14, 0 0 30px rgba(255, 211, 77, .35); transition: transform .1s, box-shadow .1s; }
.btn-play:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #8a5a14, 0 0 40px rgba(255, 211, 77, .55); }
.btn-play:active { transform: translateY(3px); box-shadow: 0 2px 0 #8a5a14; }
.btn-play.small { font-size: 14px; padding: 10px 22px; }
.hint { font-family: var(--pixel); font-size: 11px; color: var(--muted); letter-spacing: .1em; }

/* ---------------------------------------------------------------- story */
.story { width: 100%; max-width: 1080px; padding: 40px 0 30px; }
.story h2 { font-family: var(--pixel); font-weight: normal; color: var(--gold); letter-spacing: .14em; font-size: 22px; text-align: center; margin-bottom: 16px; }
.lead { max-width: 760px; margin: 0 auto 28px; text-align: center; color: var(--text); line-height: 1.7; font-size: 16px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.card { background: linear-gradient(180deg, rgba(42, 36, 82, .72), rgba(13, 11, 36, .82)); border: 1px solid rgba(150, 70, 138, .45); border-radius: 10px;
  padding: 18px; backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform .2s, border-color .2s; }
.card:hover { transform: translateY(-3px); border-color: var(--cyan); }
.card .ep { font-family: var(--pixel); font-size: 11px; color: var(--cyan); letter-spacing: .12em; }
.card h3 { font-family: var(--pixel); font-weight: normal; color: var(--gold); font-size: 16px; margin: 8px 0; letter-spacing: .06em; }
.card p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.features { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.features li { font-size: 13px; color: var(--ice); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(90, 230, 255, .25); background: rgba(5, 6, 26, .55); }

/* ---------------------------------------------------------------- footer + background switcher */
.site-footer { width: 100%; max-width: 1180px; margin-top: auto; padding: 30px 0 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bg-dock { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 6px; border-radius: 8px; background: rgba(5, 6, 26, .55); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(6px); }
.mode-btn { font-family: var(--pixel); font-size: 11px; letter-spacing: .1em; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 5px; padding: 7px 12px; cursor: pointer; transition: .15s; }
.mode-btn:hover { color: #fff; border-color: rgba(255, 255, 255, .15); }
.mode-btn.active { color: #1a1206; background: var(--gold); }
.copy { font-size: 12px; color: #5a6488; }

/* ---------------------------------------------------------------- access code prompt */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3, 3, 12, .72); backdrop-filter: blur(6px); }
.modal[hidden], .game-overlay[hidden] { display: none; }
.terminal { position: relative; width: min(460px, 100%); padding: 26px 24px 22px; border-radius: 10px; background: #070818; border: 1px solid rgba(90, 230, 255, .4);
  box-shadow: 0 0 0 1px rgba(255, 211, 77, .12), 0 20px 60px rgba(0, 0, 0, .8), 0 0 40px rgba(90, 230, 255, .12); display: flex; flex-direction: column; gap: 12px; }
.terminal .x { position: absolute; top: 8px; right: 12px; background: none; border: 0; color: var(--muted); font-size: 24px; cursor: pointer; }
.term-head { font-family: var(--pixel); font-size: 11px; color: var(--cyan); letter-spacing: .1em; border-bottom: 1px dashed rgba(90, 230, 255, .3); padding-bottom: 10px; }
.term-label { font-family: var(--pixel); font-size: 13px; color: var(--gold); letter-spacing: .1em; }
.term-input { font-family: var(--pixel); font-size: 18px; letter-spacing: .3em; color: var(--ice); background: #02030c; border: 1px solid rgba(90, 230, 255, .35); border-radius: 6px; padding: 12px 14px; outline: none; }
.term-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(90, 230, 255, .15); }
.term-msg { font-family: var(--pixel); font-size: 12px; min-height: 16px; letter-spacing: .1em; color: var(--muted); }
.term-msg.ok { color: #7affc0; } .term-msg.bad { color: #ff6a7a; }

/* ---------------------------------------------------------------- the game over the page */
.game-overlay { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; flex-direction: column; }
.game-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #070818; border-bottom: 1px solid rgba(90, 230, 255, .25); }
.game-bar .spacer { flex: 1; }
.game-bar button { font-family: var(--pixel); font-size: 11px; letter-spacing: .1em; color: var(--ice); background: #101a3a; border: 1px solid #3a4a7a; border-radius: 4px; padding: 6px 12px; cursor: pointer; }
.game-bar button:hover { background: #1c2a5a; color: #fff; }
/* the game plays inside a flat picture of the console: the frame image sits on top, the game shows through its screen */
.game-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px; min-height: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(150, 70, 138, .35), rgba(5, 6, 26, 0) 65%), var(--void); }
.handheld { position: relative; aspect-ratio: 1800 / 1100; width: min(100%, calc((100vh - 96px) * 1800 / 1100)); filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .8)); }
.handheld-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; z-index: 2; }
.game-box { position: absolute; left: 23.889%; top: 15.455%; width: 52.222%; height: 64.091%; background: #000; z-index: 1; }
.game-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
@media (max-width: 700px), (max-height: 420px) {
  /* small screens: drop the frame and give the game the whole stage */
  .handheld { aspect-ratio: 4 / 3; width: min(100%, calc((100vh - 70px) * 4 / 3)); }
  .handheld-frame { display: none; }
  .game-box { inset: 0; width: 100%; height: 100%; }
}

@media (max-width: 600px) {
  .top-nav { flex-direction: column; }
  .console-stage { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .card, .btn-play { transition: none; } }

/* the full game, behind its access code, sits under the free Lite button */
.btn-full { font-family: var(--pixel); font-size: 12px; letter-spacing: .14em; color: var(--gold); background: transparent; cursor: pointer;
  border: 1px solid rgba(255, 211, 77, .45); padding: 8px 18px; margin-top: 6px; transition: background .15s, border-color .15s; }
.btn-full:hover { background: rgba(255, 211, 77, .1); border-color: var(--gold); }