:root { --night: #102638; --deep: #0b1b29; --ink: #e8f1e8; --muted: #7e9e9c; --line: rgba(232,241,232,.15); --coral: #ef9277; --glow: #eff99f; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--night); color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; }.game-page { max-width: 1480px; min-height: 100vh; margin: auto; padding: 0 5vw; overflow: hidden; }.project-nav { height: 84px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.back-link { color: var(--muted); }.back-link:hover { color: var(--ink); }.project-id { display: flex; gap: 15px; }.project-id span { color: var(--muted); }.project-id strong { color: var(--coral); font-weight: 400; }.nav-status { color: var(--muted); }.nav-status i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 12px var(--glow); }
.game-main { display: grid; grid-template-columns: minmax(290px, .65fr) minmax(570px, 1.35fr); align-items: center; gap: 6vw; min-height: calc(100vh - 84px); padding: 66px 0 80px; }.eyebrow, .scoreboard span, .controls-copy p, .play-topline, .frame-coord, .game-status, .game-caption, .project-footer { font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.eyebrow { margin: 0 0 25px; color: var(--glow); }.tiny-star { margin-right: 8px; color: var(--glow); }.game-intro h1 { margin: 0 0 28px; font-size: clamp(63px, 8.5vw, 119px); line-height: .78; letter-spacing: -.1em; font-weight: 600; }.game-intro h1 em { font-family: 'Fraunces', Georgia, serif; font-weight: 500; color: var(--coral); letter-spacing: -.1em; }.lede { max-width: 345px; color: var(--muted); font-size: 16px; line-height: 1.55; }.scoreboard { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; max-width: 360px; margin-top: 50px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.scoreboard > div { position: relative; min-height: 60px; }.scoreboard > div:first-child { grid-row: span 2; padding-right: 18px; border-right: 1px solid var(--line); }.scoreboard span { display: block; margin-bottom: 10px; color: var(--muted); font-size: 8px; }.scoreboard strong { font: 44px/.8 'Fraunces', Georgia, serif; letter-spacing: -.08em; color: var(--glow); }.scoreboard small { margin-left: 4px; color: var(--muted); font: 10px 'DM Mono', monospace; }.scoreboard > div:not(:first-child) strong { font-size: 25px; color: var(--ink); }.controls-copy { margin-top: 29px; color: var(--muted); }.controls-copy p { margin: 0 0 10px; }.controls-copy > div { display: flex; align-items: center; gap: 5px; }.controls-copy kbd { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--line); color: var(--ink); font: 10px 'DM Mono', monospace; }.controls-copy > div span { margin-left: 8px; font-size: 11px; text-transform: none; letter-spacing: 0; }.controls-copy .touch-copy { margin-top: 12px; font-size: 10px; text-transform: none; letter-spacing: 0; }.launch-button { display: flex; justify-content: space-between; width: min(100%, 360px); margin-top: 34px; padding: 16px 17px; border: 1px solid var(--coral); background: var(--coral); color: var(--deep); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; transition: transform .2s, box-shadow .2s; }.launch-button:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 rgba(239,249,159,.55); }.launch-button span { transition: transform .2s; }.launch-button:hover span { transform: translate(3px,-3px); }.game-status { min-height: 15px; margin: 15px 0 0; color: var(--muted); font-size: 9px; }
.play-column { min-width: 0; }.play-topline { display: flex; justify-content: space-between; color: var(--muted); padding-bottom: 15px; border-bottom: 1px solid var(--line); }.play-topline span:last-child { color: var(--glow); }.game-frame { position: relative; width: 100%; aspect-ratio: 1.47 / 1; min-height: 400px; margin-top: 17px; overflow: hidden; border: 1px solid rgba(232,241,232,.2); outline: none; background: #0e2c3b; box-shadow: 0 25px 60px rgba(0,0,0,.28); }.game-frame:focus-visible { box-shadow: 0 0 0 2px var(--coral), 0 25px 60px rgba(0,0,0,.28); }.game-frame:before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(239,249,159,.04) 1px, transparent 1px), linear-gradient(rgba(239,249,159,.04) 1px, transparent 1px); background-size: 50px 50px; mix-blend-mode: screen; }.game-frame canvas { display: block; width: 100%; height: 100%; }.frame-coord { position: absolute; z-index: 2; color: rgba(232,241,232,.52); font-size: 9px; pointer-events: none; }.frame-top { top: 12px; left: 13px; }.frame-bottom { right: 13px; bottom: 12px; }.game-overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 20px; background: rgba(7,24,35,.45); transition: opacity .3s; }.game-overlay.is-hidden { opacity: 0; pointer-events: none; }.overlay-card { width: min(100%, 330px); padding: 28px; border: 1px solid rgba(239,249,159,.35); background: rgba(11,27,41,.9); text-align: center; }.overlay-kicker { color: var(--glow); font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }.overlay-card h2 { margin: 16px 0 9px; font: 36px/.9 'Fraunces', Georgia, serif; letter-spacing: -.06em; }.overlay-card p { margin: 0 auto 22px; max-width: 230px; color: var(--muted); font-size: 12px; line-height: 1.45; }.overlay-card button { padding: 13px 16px; border: 1px solid var(--glow); background: transparent; color: var(--glow); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.overlay-card button:hover { color: var(--deep); background: var(--glow); }.touch-controls { display: none; }.game-caption { display: flex; gap: 11px; margin: 24px 0 0; color: var(--muted); line-height: 1.6; text-transform: none; letter-spacing: 0; }.game-caption span { display: block; flex: 0 0 36px; height: 1px; margin-top: 7px; background: var(--coral); }
.project-footer { display: flex; justify-content: space-between; padding: 25px 0; color: var(--muted); border-top: 1px solid var(--line); }.project-footer a { color: var(--ink); }.project-footer a:hover { color: var(--coral); }
@media (max-width: 930px) { .game-main { grid-template-columns: 1fr; gap: 60px; }.game-intro { max-width: 550px; }.play-column { width: 100%; }.game-frame { min-height: 0; } }
@media (max-width: 570px) { .game-page { padding: 0 19px; }.project-nav { height: 69px; }.project-id span, .nav-status { display: none; }.game-main { padding-top: 55px; }.game-intro h1 { font-size: 79px; }.scoreboard { margin-top: 37px; }.game-frame { aspect-ratio: .93 / 1; }.touch-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }.touch-controls > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }.touch-controls > button { margin-left: calc(50% - 47px); }.touch-controls button { width: 40px; height: 36px; padding: 0; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 16px; }.touch-controls button:active { background: var(--coral); color: var(--deep); }.project-footer { flex-wrap: wrap; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { transition-duration: .01ms !important; } }
.sound-toggle { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: min(100%, 360px); margin-top: 9px; padding: 10px 13px; border: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.sound-toggle:hover, .sound-toggle.is-on { border-color: var(--glow); color: var(--glow); }
.sound-light { width: 6px; height: 6px; border-radius: 50%; background: #4b6870; }
.sound-toggle.is-on .sound-light { background: var(--glow); box-shadow: 0 0 11px var(--glow); }