:root { color-scheme: dark; --ink:#09100b; --panel:#101912; --line:#27352b; --lime:#9bea3e; --muted:#a9b2aa; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--ink); color:#f4f7f4; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.lobby,.gate { min-height:100vh; display:grid; place-items:center; padding:36px 24px; background:radial-gradient(circle at 50% 45%,#111b13 0%,var(--ink) 54%); }
.gate[hidden] { display:none; }
.intro { width:min(720px,100%); }
.chinese { font-size:clamp(2.8rem,9vw,5.3rem); line-height:1; font-weight:900; letter-spacing:.08em; color:var(--lime); margin:0 0 64px; text-align:center; }
.eyebrow { margin:12px 0 64px; color:#ded4a4; letter-spacing:.33em; font-size:.68rem; font-weight:700; text-align:center; }
.identity { display:flex; align-items:center; gap:24px; }
.portrait { width:138px; height:138px; object-fit:cover; object-position:center 28%; border:4px solid var(--lime); border-radius:50%; background:#101912; }
h1 { margin:0 0 10px; font-size:1.25rem; }
p { color:#d5ddd5; line-height:1.55; }
.primary { margin:40px auto 0; display:block; border:0; border-radius:999px; padding:15px 27px; background:var(--lime); color:#10200b; font-weight:800; font-size:1rem; cursor:pointer; }
.primary:hover { filter:brightness(1.08); transform:translateY(-1px); }
.gate { align-content:center; gap:24px; }
.gate-card { width:min(448px,100%); padding:26px; border:1px solid var(--line); border-radius:23px; text-align:center; background:#0e1610; box-shadow:0 18px 50px #0004; }
.lock { margin:auto; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:var(--lime); background:#21391a; font-size:1.65rem; }
.gate-card h1 { margin-top:12px; }
.gate-card > p { margin:5px 0 22px; color:var(--muted); font-size:.9rem; }
.game { position:relative; height:176px; overflow:hidden; border:1px solid #354139; border-radius:25px; background:#141c16; touch-action:none; }
.ball,.hole { position:absolute; top:50%; width:44px; height:44px; border-radius:50%; transform:translateY(-50%); }
.ball { left:20px; background:var(--lime); cursor:grab; box-shadow:0 4px 12px #0004; }
.ball.dragging { cursor:grabbing; }
.hole { right:28px; background:radial-gradient(circle at 40% 35%,#fff,#c8cdca 48%,#929a94 100%); box-shadow:inset 0 2px 7px #0005; }
.hint { min-height:22px; }
.back { border:0; background:transparent; color:#d6ded6; cursor:pointer; }
@media (max-width:560px) { .eyebrow { margin-bottom:42px; letter-spacing:.2em; } .identity { align-items:flex-start; gap:16px; } .portrait { width:94px; height:94px; } .primary { margin-left:110px; } }