:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#f4f7f3; background:#0a0d0b; font-synthesis:none; }
* { box-sizing:border-box; }
html,body,#app { width:100%; height:100%; margin:0; overflow:hidden; }
body { background:#0a0d0b; }
button,input,select { font:inherit; }
button { color:inherit; }
canvas { display:block; width:100%; height:100%; }
.hidden { display:none !important; }
.screen { position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; }
.menu-bg { background:radial-gradient(circle at 50% 25%, rgba(61,95,62,.38), transparent 42%), linear-gradient(#17231c,#0b0f0d 65%); }
.menu-bg::before { content:""; position:absolute; inset:0; opacity:.22; background-image:linear-gradient(45deg,#203027 25%,transparent 25%),linear-gradient(-45deg,#203027 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#203027 75%),linear-gradient(-45deg,transparent 75%,#203027 75%); background-size:32px 32px; background-position:0 0,0 16px,16px -16px,-16px 0; animation:drift 22s linear infinite; }
@keyframes drift { to { background-position:96px 48px,96px 64px,112px 32px,80px 48px; } }
.panel { position:relative; z-index:1; width:min(620px,92vw); background:#121814; border:1px solid #2b392f; box-shadow:0 30px 80px rgba(0,0,0,.5); padding:28px; border-radius:18px; animation:pop .22s ease-out; }
@keyframes pop { from { transform:translateY(12px) scale(.985); opacity:0 } }
.logo { font-weight:950; letter-spacing:-.055em; font-size:clamp(44px,8vw,78px); line-height:.82; text-transform:uppercase; text-shadow:0 5px 0 #233027; }
.logo span { display:block; color:#8bc46a; font-size:.38em; letter-spacing:.28em; margin-left:.1em; margin-top:14px; text-shadow:none; }
.menu-actions { display:grid; gap:10px; margin-top:28px; }
.primary,.secondary,.danger { border:1px solid #394b3e; border-radius:11px; padding:13px 16px; background:#1b251f; cursor:pointer; transition:.15s transform,.15s background,.15s border; font-weight:750; }
.primary:hover,.secondary:hover { transform:translateY(-1px); background:#243128; border-color:#607963; }
.primary { background:#6da652; color:#0b120d; border-color:#85bb68; }
.primary:hover { background:#7fba60; }
.danger { background:#3a2020; border-color:#6a3333; }
.subtle { color:#9ba79f; font-size:13px; }
.form-grid { display:grid; gap:14px; margin-top:20px; }
label { display:grid; gap:7px; font-size:12px; font-weight:800; color:#b6c0b9; text-transform:uppercase; letter-spacing:.08em; }
input,select { width:100%; color:#f4f7f3; background:#0d120f; border:1px solid #2d3b31; border-radius:9px; padding:12px; outline:none; }
input:focus,select:focus { border-color:#79aa62; box-shadow:0 0 0 3px rgba(121,170,98,.12); }
.world-list { display:grid; gap:9px; max-height:360px; overflow:auto; margin:18px 0; }
.world-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; border:1px solid #2a382f; background:#0f1511; border-radius:11px; padding:12px; }
.world-row strong { display:block; }
.world-actions { display:flex; gap:6px; }
.world-actions button { padding:8px 10px; border-radius:8px; border:1px solid #33443a; background:#1a241e; cursor:pointer; }
#hud { position:fixed; inset:0; z-index:8; pointer-events:none; }
#crosshair { position:absolute; left:50%; top:50%; width:18px; height:18px; transform:translate(-50%,-50%); }
#crosshair::before,#crosshair::after { content:""; position:absolute; background:rgba(255,255,255,.9); box-shadow:0 0 2px #000; }
#crosshair::before { width:2px; height:18px; left:8px; }
#crosshair::after { height:2px; width:18px; top:8px; }
.status { position:absolute; left:50%; bottom:92px; transform:translateX(-50%); display:flex; gap:14px; align-items:center; font-weight:800; text-shadow:0 2px 2px #000; }
.hearts,.hunger { display:flex; gap:2px; letter-spacing:1px; }
.hearts { color:#ef5d62; }.hunger { color:#e3b456; }
#hotbar { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:flex; gap:4px; padding:5px; border-radius:9px; background:rgba(8,10,9,.74); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(7px); }
.slot { position:relative; width:56px; height:56px; background:#172019; border:2px solid #334238; display:grid; place-items:center; border-radius:6px; transition:.12s transform,.12s border; }
.slot.selected { transform:translateY(-4px); border-color:#f2f4e9; box-shadow:0 5px 0 rgba(0,0,0,.22); }
.swatch { width:31px; height:31px; border-radius:4px; image-rendering:pixelated; border:1px solid rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }
.count { position:absolute; right:5px; bottom:2px; font-weight:900; font-size:12px; text-shadow:0 1px 2px #000; }
.slot .key { position:absolute; top:1px; left:4px; font-size:9px; color:#a9b0aa; }
#toast { position:absolute; left:50%; top:10%; transform:translateX(-50%); padding:8px 12px; border-radius:8px; background:rgba(8,10,9,.8); opacity:0; transition:.18s opacity,.18s transform; }
#toast.show { opacity:1; transform:translate(-50%,4px); }
#debug { position:absolute; left:12px; top:12px; color:#e9efe9; font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace; text-shadow:0 1px 3px #000; white-space:pre; }
.overlay { position:fixed; inset:0; z-index:15; display:grid; place-items:center; background:rgba(3,5,4,.58); backdrop-filter:blur(6px); }
.inventory { width:min(760px,92vw); background:#161d18; border:1px solid #3b4b40; border-radius:16px; box-shadow:0 30px 90px rgba(0,0,0,.5); padding:20px; }
.inventory-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:7px; margin-top:16px; }
.inv-slot { aspect-ratio:1; min-width:0; background:#0d120f; border:1px solid #35443a; border-radius:8px; display:grid; place-items:center; position:relative; cursor:pointer; }
.inv-slot:hover { border-color:#7fa06f; background:#121a15; }
.pause-card { width:min(420px,90vw); }
.pause-card h2,.inventory h2 { margin:0 0 8px; }
.loading { position:fixed; inset:0; z-index:40; display:grid; place-items:center; background:#0b0f0d; }
.loading-card { width:min(440px,80vw); text-align:center; }
.progress { height:8px; margin-top:16px; overflow:hidden; border-radius:10px; background:#1f2922; }
.progress > div { height:100%; width:0; background:#7eb45f; transition:width .2s; }
.breakbar { position:absolute; top:calc(50% + 23px); left:50%; transform:translateX(-50%); width:74px; height:5px; border-radius:9px; background:rgba(0,0,0,.42); overflow:hidden; opacity:0; }
.breakbar div { height:100%; width:0; background:#e8ece6; }
.breakbar.active { opacity:1; }
@media(max-width:700px){ .slot{width:40px;height:40px}.swatch{width:24px;height:24px}#hotbar{bottom:14px}.panel{padding:20px}.inventory-grid{gap:4px} }

.craft-title { margin:18px 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:#aab4ad; }
.crafting-list { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.craft-recipe { min-width:0; min-height:62px; padding:9px; text-align:left; border:1px solid #35443a; border-radius:8px; background:#101712; color:#eef2ee; cursor:pointer; transition:.14s transform,.14s border-color,.14s background; }
.craft-recipe:hover { transform:translateY(-1px); border-color:#7fa06f; background:#182119; }
.craft-recipe span { display:block; font-size:11px; font-weight:800; }
.craft-recipe small { display:block; margin-top:4px; color:#8f9a92; font-size:9px; }
@media(max-width:700px){.crafting-list{grid-template-columns:repeat(2,1fr)}}