/* games.3d3d.ca: the 3d3d.ca design system, trimmed. Solid neons only, no gradients, no white cards,
   hairlines for structure, Geist + Geist Mono self-hosted. Ink buttons text on neon (never white). */
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --ink: #0a0a0a; --ground: #fafafa; --n200: #e5e5e5; --n400: #a3a3a3; --n500: #737373; --n600: #525252;
  --teal: #04D9C4; --orange: #FF6A00; --pink: #FF2D92; --green: #18E36B; --accent: var(--teal); }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body { font: 400 17px/1.6 "Geist", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--n200); }
.top img { display: block; height: 34px; width: auto; }
.eyebrow { font: 500 11px/1.4 "Geist Mono", ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--n500); margin: 0 0 10px; }
.eyebrow b { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.impact { font-weight: 900; letter-spacing: -.035em; line-height: .92; margin: 0 0 14px; font-size: clamp(2.4rem, 10vw, 4.5rem); }
h2.impact { font-size: clamp(1.6rem, 5vw, 2.4rem); }
.lede { color: var(--n600); font-size: 19px; max-width: 46ch; margin: 0 0 26px; }
.hero { padding: 44px 0 26px; }
.ghost { font: 500 12px/1 "Geist Mono", monospace; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--ink); padding: 8px 0; background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 2px no-repeat; transition: background-size .25s; }
.ghost:hover, .ghost:focus-visible { background-size: 100% 2px; }
.btn { appearance: none; border: 0; cursor: pointer; text-decoration: none; display: inline-block; font: 500 13px/1 "Geist Mono", monospace; letter-spacing: .12em; text-transform: uppercase; padding: 15px 24px; border-radius: 6px; background: var(--accent); color: var(--ink); }
.btn:hover { filter: brightness(1.08); }
.btn.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--n200); }
.btn.quiet:hover { box-shadow: inset 0 0 0 1px var(--accent); filter: none; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; }
/* game list: hairline-divided rows, a neon spine that grows on hover */
.rows { border-top: 1px solid var(--n200); margin: 0; padding: 0; list-style: none; }
.row { display: grid; grid-template-columns: 52px 1fr auto; gap: 8px 16px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--n200); text-decoration: none; position: relative; }
.row::before { content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .25s; }
.row:hover::before, .row:focus-visible::before { transform: scaleY(1); }
.row .n { font: 500 12px "Geist Mono", monospace; letter-spacing: .14em; color: var(--n400); }
.row .t { font-weight: 800; font-size: clamp(1.3rem, 4vw, 1.9rem); letter-spacing: -.02em; line-height: 1.1; }
.row .d { grid-column: 2; color: var(--n600); margin: 2px 0 0; }
.row .go { grid-column: 3; grid-row: 1; font: 500 12px "Geist Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.empty { border-top: 1px solid var(--n200); border-bottom: 1px solid var(--n200); padding: 34px 0; color: var(--n600); max-width: 54ch; }
/* player */
.player { margin: 8px 0 0; }
.stagewrap { position: relative; width: 100%; background: #000; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--n200); }
.stagewrap iframe { position: absolute; left: 0; top: 0; width: 960px; height: 600px; border: 0; transform-origin: 0 0; background: #000; }
.stagewrap:fullscreen { display: flex; align-items: center; justify-content: center; border-radius: 0; }
.stagewrap:fullscreen iframe { position: static; transform-origin: center; flex: none; }
.panel { margin: 34px 0 0; border-top: 1px solid var(--n200); padding-top: 22px; }
.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 32px; margin: 0 0 4px; padding: 0; list-style: none; }
.legend li { display: flex; gap: 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--n200); }
.legend kbd { flex: none; font: 600 12px "Geist Mono", monospace; letter-spacing: .06em; width: 132px; color: var(--ink); }
.legend kbd span { box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 1px; }
.keys { margin: 18px 0 0; display: none; }
.keys.on { display: block; }
.keys .grp { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.keys button { appearance: none; cursor: pointer; font: 500 14px "Geist Mono", monospace; min-width: 46px; height: 46px; padding: 0 12px; border-radius: 6px; border: 0; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--n200); touch-action: none; user-select: none; -webkit-user-select: none; }
.keys button:active, .keys button.down { background: var(--accent); box-shadow: none; }
.keys .wide { min-width: 96px; }
.credits { margin: 34px 0 0; border-top: 1px solid var(--n200); padding-top: 22px; }
.credits ul { margin: 0; padding: 0; list-style: none; columns: 2 280px; }
.credits li { padding: 6px 0; break-inside: avoid; color: var(--n600); }
.credits li b { color: var(--ink); }
.note { color: var(--n600); max-width: 62ch; margin: 8px 0 0; }
footer { margin: 54px 0 0; border-top: 1px solid var(--n200); padding: 22px 0 36px; color: var(--n500); font-size: 15px; }
footer a { color: var(--ink); }
@media (max-width: 560px) { .row { grid-template-columns: 38px 1fr; } .row .go { grid-column: 2; grid-row: auto; } .row::before { left: -10px; } .btn { width: 100%; text-align: center; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }