:root{--bg:#070b16;--card:#111832;--line:#26335e;--yellow:#facc15;--green:#4ade80;--text:#eef2ff;--muted:#9aa8c7;--red:#f87171}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Arial,sans-serif;background:radial-gradient(900px 500px at 80% -10%,#1e2a5a 0%,transparent 60%),var(--bg);color:var(--text);line-height:1.5}
a{color:var(--yellow)}header{position:sticky;top:0;background:rgba(7,11,22,.95);border-bottom:1px solid var(--line);z-index:10}
.nav{max-width:1140px;margin:0 auto;padding:14px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.logo{font-weight:900;font-size:20px}.logo span{color:var(--yellow)}
.nav a{text-decoration:none;color:var(--text);font-weight:700}.nav a:hover,.nav a.active{color:var(--yellow)}
.wrap{max-width:1140px;margin:0 auto;padding:28px 20px 56px}
.eyebrow{letter-spacing:.16em;font-size:12px;font-weight:800;color:var(--yellow)}
h1{font-size:clamp(34px,6vw,60px);line-height:1.02;margin:12px 0}h1 span,.grad{background:linear-gradient(90deg,var(--yellow),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{margin-top:36px}h3{margin:8px 0}
.sub{color:var(--muted);font-size:17px;max-width:720px;line-height:1.65}
.btn{border:0;border-radius:999px;padding:12px 20px;font-weight:800;cursor:pointer;font-size:15px;text-decoration:none;display:inline-block}
.btn.primary{background:var(--yellow);color:#111}.btn.ghost{background:transparent;color:#fff;border:1px solid var(--line)}.btn.small{padding:8px 14px;font-size:13px}
.banner{background:#1e293b;border:1px solid var(--line);border-radius:16px;padding:16px;margin:20px 0}
.banner.warn{border-color:#7c5a10;background:#2a2110}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.card img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.card .body{padding:16px}
.chip{display:inline-block;background:#1e293b;border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700;margin:0 6px 6px 0}
.chip.green{color:var(--green)} .chip.red{color:var(--red)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:20px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}.stat b{font-size:24px;display:block}.stat span{color:var(--muted);font-size:13px}
input,select,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:#0b1226;color:#fff;margin:8px 0;font-size:15px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
.stage{position:relative;height:340px;overflow:hidden;border-radius:24px;border:1px solid var(--line);background:linear-gradient(#0b1b3f,#123a6b 55%,#0f2a1d)}
.bird{position:absolute;left:18%;top:120px;width:140px;filter:drop-shadow(0 16px 18px rgba(0,0,0,.5));animation:bob 1.7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-38px) rotate(9deg)}}
.score{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:52px;font-weight:900;text-shadow:0 4px 0 rgba(0,0,0,.45)}
.pipes{position:absolute;top:0;bottom:46px;width:70px;animation:scroll 6s linear infinite}.pipes .top,.pipes .bottom{position:absolute;left:0;right:0;background:linear-gradient(90deg,#15803d,#4ade80 55%,#15803d);border:3px solid #052e16}.pipes .top{top:-10px;height:115px;border-radius:0 0 10px 10px}.pipes .bottom{bottom:-10px;height:125px;border-radius:10px 10px 0 0}.pipes.b{animation-delay:-3s}
@keyframes scroll{from{right:-90px}to{right:108%}}
.ground{position:absolute;left:0;right:0;bottom:0;height:46px;background:repeating-linear-gradient(90deg,#14532d 0 34px,#166534 34px 68px);border-top:4px solid #22c55e}
.note{color:var(--muted);font-size:13px;line-height:1.65}
canvas#game{width:100%;max-width:720px;height:420px;background:linear-gradient(#0b1b3f,#123a6b 60%,#0f2a1d);border:1px solid var(--line);border-radius:20px;display:block;touch-action:manipulation}
footer{border-top:1px solid var(--line);padding:24px 20px;color:var(--muted);text-align:center}
@media(max-width:640px){.nav{gap:10px}.stat b{font-size:20px}table{font-size:14px}}