:root { --bg: #0d1220; --fg: #eef2ff; --muted: #a7b0c8; --accent: #ffb547; --card: rgba(255,255,255,.06); }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.landing .hero { position: relative; min-height: 78vh; display: grid; place-items: center; overflow: hidden; }
#hero-preview { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-text { position: relative; text-align: center; padding: 2rem 1rem; background: radial-gradient(closest-side, rgba(13,18,32,.75), rgba(13,18,32,0)); max-width: 46rem; }
.badge { display: inline-block; font-size: .8rem; letter-spacing: .04em; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .2rem .8rem; }
h1 { font-size: clamp(2.6rem, 9vw, 5.5rem); margin: .3rem 0; letter-spacing: -.02em; text-shadow: 0 4px 24px rgba(0,0,0,.6); }
.tagline { font-size: clamp(1.05rem, 3vw, 1.35rem); color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.cta { display: inline-block; margin-top: 1rem; padding: .9rem 2.4rem; border-radius: 14px; background: var(--accent); color: #1b1300; font-weight: 800; font-size: 1.2rem; text-decoration: none; box-shadow: 0 10px 30px rgba(255,181,71,.35); }
.cta:hover { transform: translateY(-2px); }
main { max-width: 68rem; margin: 0 auto; padding: 2rem 1rem; }
.muted { color: var(--muted); }
#gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
#gallery figure { margin: 0; background: var(--card); border-radius: 14px; overflow: hidden; }
#gallery img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
#gallery figcaption { padding: .5rem .8rem; color: var(--muted); font-size: .9rem; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; }
#features li { margin: .35rem 0; }
#controls dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; }
#controls dt { font-weight: 700; }
#controls dd { margin: 0; color: var(--muted); }
footer { text-align: center; color: var(--muted); padding: 2rem 1rem; font-size: .9rem; }
/* game */
body.game { overflow: hidden; touch-action: none; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#crosshair { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; font: 700 22px monospace; text-shadow: 0 0 3px #000; pointer-events: none; }
#hotbar { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; background: rgba(0,0,0,.4); border-radius: 10px; }
#hotbar .slot { width: 42px; height: 42px; border-radius: 6px; border: 2px solid rgba(255,255,255,.3); position: relative; cursor: pointer; }
#hotbar .slot[aria-selected="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
#hotbar .slot span { position: absolute; left: 3px; top: 0; font-size: 11px; color: #fff; text-shadow: 0 0 2px #000; }
#newworld { position: fixed; top: 10px; right: 10px; background: rgba(0,0,0,.45); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; padding: .3rem .7rem; }
.fixture-tag { position: fixed; top: 10px; left: 10px; font-size: 12px; background: rgba(0,0,0,.45); padding: .2rem .6rem; border-radius: 999px; }
#start { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(5,8,18,.6); text-align: center; padding: 1rem; cursor: pointer; }
#touch { display: none; }
body.touch #touch { display: block; }
#touch .pad { position: fixed; left: 20px; bottom: 90px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.35); }
#touch button { position: fixed; right: 20px; width: 74px; height: 54px; border-radius: 12px; background: rgba(255,255,255,.18); color: #fff; border: 2px solid rgba(255,255,255,.35); font-weight: 700; }
#touch [data-touch="jump"] { bottom: 90px; }
#touch [data-touch="break"] { bottom: 154px; }
#touch [data-touch="place"] { bottom: 218px; }