* { box-sizing: border-box; }
html, body {
margin: 0;
height: 100%;
background: #0b1020;
color: #e8ecf8;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Game pages: full-viewport canvas, no scrolling, no touch gestures stealing swipes. */
.game-body { overflow: hidden; }
#game {
display: block;
width: 100vw;
height: 100vh;
height: 100dvh;
touch-action: none;
}
/* Menu */
.menu { max-width: 640px; margin: 0 auto; padding: 2.5rem 1rem; text-align: center; }
.menu h1 { font-size: 2rem; margin-bottom: 1.5rem; }
.game-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.game-card {
display: block;
padding: 1.25rem;
border-radius: 14px;
background: #1a2140;
color: #e8ecf8;
text-decoration: none;
font-size: 1.25rem;
transition: background 0.15s;
}
.game-card:hover { background: #232c52; }
.game-card small { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: #9aa6d4; }
/* In-game overlays (start screen, game over) + transient banner */
.overlay {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(7, 10, 22, 0.72);
backdrop-filter: blur(4px);
z-index: 10;
}
.panel {
text-align: center;
padding: 1.75rem 1.5rem;
border-radius: 20px;
background: #161c38;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
max-width: 90vw;
}
.panel h1 { margin: 0 0 0.25rem; font-size: 1.7rem; }
.panel .sub { margin: 0 0 1.1rem; color: #9aa6d4; }
.skins { display: flex; gap: 0.6rem; justify-content: center; margin-bottom: 1.1rem; }
.swatch {
width: 44px;
height: 44px;
border-radius: 50%;
border: 3px solid transparent;
cursor: pointer;
padding: 0;
}
.swatch.sel { border-color: #fff; transform: scale(1.12); }
.namefield {
display: block;
width: 100%;
margin: 0.2rem 0 0.6rem;
padding: 0.7rem 1rem;
font-size: 1.2rem;
text-align: center;
border: 2px solid #3a4577;
border-radius: 12px;
background: #0e1330;
color: #e8ecf8;
}
.namefield:focus { outline: none; border-color: #34d399; }
.hint { margin: 0 0 0.8rem; font-size: 0.85rem; color: #fbbf24; }
.calm { display: block; margin-bottom: 1.2rem; color: #cdd5f4; cursor: pointer; user-select: none; }
.calm input { margin-right: 0.4rem; }
.disclaimer { margin: 1rem 0 0; font-size: 0.72rem; line-height: 1.4; color: #7f8bc0; }
/* Win at the dawn — the terminal boots and speaks your name (green phosphor). */
#win.terminal .panel { background: #06120a; border: 1px solid #1f9d1f; box-shadow: 0 0 28px rgba(51, 255, 51, 0.22); }
#win.terminal #wintitle { color: #33ff33; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem; }
#win.terminal #winsub { color: #33ff33; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9rem; letter-spacing: 0.04em; }
/* Dawn arrival: pass-it-on is the PRIMARY CTA (in phosphor) at the emotional peak; continue goes ghost. */
#win.arrival #passwin { background: transparent; color: #33ff33; border: 1px solid #33ff33; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; box-shadow: 0 0 14px rgba(51, 255, 51, 0.25); }
#win.arrival #wincontinue { background: transparent; color: #8fff9f; border: 1px solid #1f9d1f; box-shadow: none; }
/* Sandbox era picker — a row of era-colored dots (all lit = you unlocked every age). */
.erapicker { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); display: none; gap: 8px; padding: 6px 10px; background: rgba(0, 0, 0, 0.4); border-radius: 999px; z-index: 40; opacity: 0.5; transition: opacity 0.25s; }
.erapicker:hover, .erapicker:focus-within, .erapicker:active { opacity: 1; } /* recede in the thumb zone, wake on interaction */
.eradot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); padding: 0; cursor: pointer; transition: transform 0.12s; }
.eradot.sel { border-color: #fff; transform: scale(1.18); box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); }
/* The invite prompt must beat every other overlay — it opens OVER the arrival/win and
game-over panels (same-z overlays stack by DOM order, and #win comes later). */
#invite { z-index: 50; }
/* Ages: the pass-it-on prompt that appears once the whole lineage is revealed. */
.agesshare { position: fixed; left: 50%; top: 8px; transform: translateX(-50%); display: none; z-index: 45; padding: 7px 15px; border-radius: 999px; background: #34d399; color: #06251a; border: none; font-weight: 700; font-size: 0.82rem; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); animation: agespulse 1.6s ease-in-out infinite; }
@keyframes agespulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.05); } }
/* During the journey the prompt recedes (like the era picker) — no pulse, wakes on interaction. */
.agesshare.subtle { animation: none; opacity: 0.4; transition: opacity 0.25s; }
.agesshare.subtle:hover, .agesshare.subtle:focus-visible, .agesshare.subtle:active { opacity: 1; }
/* Language selector (start + pause panels) */
.langsel { display: block; margin: 0.9rem auto 0; padding: 0.35rem 0.7rem; font-size: 0.85rem; border-radius: 10px; border: 1px solid #3a4577; background: #0e1330; color: #cdd5f4; }
.btn {
font-size: 1.15rem;
font-weight: 600;
padding: 0.7rem 2.2rem;
border: none;
border-radius: 12px;
background: #34d399;
color: #06281c;
cursor: pointer;
}
.btn:hover { background: #6ee7b7; }
.btn-ghost { background: transparent; color: #cdd5f4; box-shadow: inset 0 0 0 2px #3a4577; margin-top: 0.6rem; }
.btn-ghost:hover { background: #232c52; color: #fff; }
/* In-game pause button (top-right) */
.pausebtn {
position: fixed;
top: max(0.7rem, env(safe-area-inset-top));
right: 0.7rem;
z-index: 8;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 1.1rem;
cursor: pointer;
}
.pausebtn:hover { background: rgba(0, 0, 0, 0.6); }
.banner {
position: fixed;
top: 14%;
left: 0;
right: 0;
text-align: center;
font-size: 1.5rem;
font-weight: 700;
color: #fff;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
pointer-events: none;
z-index: 9;
}
.hidden { display: none !important; }