:root { --ink:#202124; --paper:#f5f0e8; --hot:#ff5b45; --yellow:#f4c84e; --blue:#78c9c3; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { background:var(--paper); color:var(--ink); font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x:hidden; }
.site-page { min-height:100vh; display:flex; flex-direction:column; }
.site-page .home { flex:1; width:100%; }
a { color:inherit; }
.site-header { max-width:1120px; margin:0 auto; padding:28px 28px 18px; display:flex; align-items:center; }
.wordmark { text-decoration:none; font-weight:700; font-size:1.25rem; letter-spacing:-.05em; }
.wordmark span { display:inline-block; background:var(--hot); padding:2px 7px 4px; transform:rotate(-2deg); }
.header-note { display:none; }
.home { max-width:1120px; margin:0 auto; padding:28px 28px 54px; }
.intro { max-width:650px; margin-bottom:58px; }
.eyebrow { font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; text-transform:uppercase; font-size:.72rem; letter-spacing:.12em; margin:0 0 18px; }
h1 { font-size:clamp(3.8rem, 9vw, 8rem); line-height:.85; letter-spacing:-.09em; margin:0 0 24px; max-width:850px; }
.intro p { font-size:clamp(1.05rem, 2vw, 1.3rem); line-height:1.45; max-width:440px; margin:0; }
.games { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; min-width:0; width:100%; }
.game-card { min-height:390px; min-width:0; width:100%; display:flex; flex-direction:column; justify-content:space-between; padding:24px; border:2px solid var(--ink); border-radius:22px; text-decoration:none; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease; }
.game-card:hover { transform:translateY(-5px) rotate(-.35deg); box-shadow:7px 8px 0 var(--ink); }
.card-shot { aspect-ratio:16 / 9; background:var(--blue); border-radius:13px; position:relative; overflow:hidden; }
.card-preview { display:block; width:100%; height:100%; object-fit:cover; }
.card-shot.captain .card-preview { object-position:center center; }
.card-shot.grandma .card-preview { object-position:center center; }
.card-info { padding-top:22px; display:flex; justify-content:space-between; gap:20px; align-items:end; min-width:0; }
.card-info > div { min-width:0; }
.card-info h2 { font-size:1.55rem; letter-spacing:-.05em; margin:0 0 6px; }
.card-info p { margin:0; font-size:.92rem; line-height:1.35; max-width:230px; }
.play { flex:none; background:var(--ink); color:var(--paper); border-radius:999px; padding:12px 16px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.72rem; letter-spacing:.06em; }
.site-footer { max-width:1120px; margin:0 auto; padding:0 28px 30px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.68rem; opacity:.55; }
.site-page .site-footer { width:100%; text-align:center; }
.site-footer a { text-underline-offset:3px; }
.legal-main { max-width:820px; margin:0 auto; padding:30px 28px 64px; }
.legal-content { max-width:680px; }
.legal-content h1 { font-size:clamp(2.8rem, 7vw, 5.5rem); line-height:.9; letter-spacing:-.08em; margin:0 0 18px; }
.legal-meta { font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.72rem; letter-spacing:.04em; margin:0 0 42px; }
.legal-content h2 { font-size:1.25rem; letter-spacing:-.03em; margin:34px 0 8px; }
.legal-content p, .legal-content li { font-size:1rem; line-height:1.6; }
.legal-content p { margin:0 0 16px; }
.legal-content ul { margin:0 0 16px; padding-left:1.25rem; }
.legal-contact { margin-top:42px; padding-top:18px; border-top:2px solid var(--ink); }
.game-shell { min-height:100vh; display:flex; flex-direction:column; }
.game-header { position:relative; z-index:10; }
.game-main { flex:1; width:100%; display:flex; justify-content:center; align-items:center; padding:10px 20px 30px; }
.game-title { max-width:1120px; margin:0 auto; padding:18px 28px 4px; }
.game-title h1 { font-size:clamp(2.6rem, 6vw, 5rem); max-width:none; margin:0; }
.game-title p { margin:8px 0 0; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.back { text-decoration:none; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.7rem; text-transform:uppercase; }
@media (max-width:700px) { .site-header { padding:20px 18px 10px; } .home { padding:24px 18px 40px; max-width:100vw; } .games { grid-template-columns:1fr; } .game-card { min-height:350px; width:100%; } .card-info h2 { font-size:1.35rem; } .play { padding:11px 13px; } .site-footer { padding:0 18px 24px; } .game-title { padding:16px 18px 2px; } .game-main { padding:8px 8px 24px; } }