@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink: #eef4ed; --muted: #9ca9a1; --line: rgba(235, 244, 235, .13); --panel: rgba(17, 23, 22, .94); --accent: #d3f36b; --mint: #77d7b4; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #0a0f0e; color: var(--ink); font-family: 'Space Grotesk', sans-serif; }
body { overflow: hidden; }
button { font: inherit; }
.game-shell { display: grid; grid-template-columns: minmax(0, 1fr) 310px; min-height: 100vh; }
.game-screen { position: relative; min-height: 100vh; overflow: hidden; background: #8fcce2; }
#world { display: block; width: 100%; height: 100vh; cursor: crosshair; }
.vignette { pointer-events: none; position: absolute; inset: 0; background: radial-gradient(circle at 50% 43%, transparent 37%, rgba(0,0,0,.28) 100%), linear-gradient(180deg, rgba(4,11,11,.32), transparent 25%, transparent 72%, rgba(4,8,7,.55)); }
.top-hud { position: absolute; inset: 22px 26px auto; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.brand { display: flex; align-items: center; gap: 9px; font: 700 20px 'Barlow Condensed', sans-serif; letter-spacing: .12em; text-shadow: 0 2px 10px #13221d; }
.brand-mark { color: var(--accent); font-size: 25px; transform: rotate(45deg); display: inline-block; }
.brand small { color: var(--accent); font: 600 10px 'Space Grotesk'; letter-spacing: .18em; margin-left: 4px; }
.top-actions { display: flex; gap: 8px; }
.small-button { border: 1px solid rgba(255,255,255,.26); border-radius: 7px; background: rgba(10,18,16,.5); color: white; padding: 9px 13px; cursor: pointer; backdrop-filter: blur(12px); transition: .2s; }
.small-button:hover { border-color: var(--accent); color: var(--accent); }
.status-hud { position: absolute; left: 26px; bottom: 156px; z-index: 2; text-shadow: 0 2px 7px #000; }
.hearts { color: #ff786e; font-size: 19px; letter-spacing: 3px; }
.xp { margin-top: 8px; width: 180px; color: white; font-size: 10px; letter-spacing: .1em; }
.xp div { height: 4px; margin-top: 4px; background: rgba(0,0,0,.4); border-radius: 5px; overflow: hidden; }
.xp i { display: block; width: 38%; height: 100%; background: var(--accent); }
.crosshair { position: absolute; z-index: 3; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); pointer-events: none; }
.crosshair::before, .crosshair::after { content: ''; position: absolute; background: rgba(255,255,255,.9); box-shadow: 0 1px 3px #000; }
.crosshair::before { width: 2px; height: 18px; left: 8px; } .crosshair::after { height: 2px; width: 18px; top: 8px; }
.notice { position: absolute; z-index: 4; left: 50%; top: 21%; transform: translate(-50%, -10px); opacity: 0; pointer-events: none; background: rgba(8,13,12,.72); border: 1px solid rgba(255,255,255,.15); padding: 10px 16px; border-radius: 6px; font-size: 12px; transition: .25s ease; backdrop-filter: blur(10px); }
.notice.show { opacity: 1; transform: translate(-50%, 0); }
.break-progress { position: absolute; z-index: 4; left: 50%; top: calc(50% + 26px); width: 86px; height: 4px; transform: translateX(-50%); opacity: 0; overflow: hidden; border-radius: 5px; background: rgba(0,0,0,.5); transition: opacity .15s; pointer-events: none; }
.break-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); box-shadow: 0 0 8px var(--accent); transition: width .08s linear; }
.break-progress.active { opacity: 1; }
.hotbar { position: absolute; z-index: 3; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; padding: 6px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; background: rgba(8,14,12,.7); backdrop-filter: blur(14px); }
.slot { position: relative; width: 56px; height: 58px; border: 1px solid rgba(255,255,255,.14); border-radius: 5px; background: rgba(255,255,255,.07); color: white; cursor: pointer; transition: .15s; }
.slot:hover, .slot.selected { border-color: var(--accent); background: rgba(211,243,107,.14); transform: translateY(-3px); }
.slot b { display: none; } .slot-number { position: absolute; top: 4px; left: 6px; color: rgba(255,255,255,.7); font-size: 10px; }
.block-icon, .mini-block { display: block; width: 25px; height: 25px; margin: 15px auto 0; border: 2px solid rgba(0,0,0,.2); box-shadow: inset 3px 3px rgba(255,255,255,.16), inset -3px -3px rgba(0,0,0,.18); }
.dirt { background: #795238; } .grass { background: linear-gradient(#6da84b 31%, #795238 32%); } .stone { background: #858f91; } .wood { background: linear-gradient(90deg, #9b693d 44%, #d09a61 45%, #d09a61 55%, #9b693d 56%); } .sand { background: #c9ad6a; } .glass { background: rgba(155,214,229,.65); }
.controls-hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 17px; white-space: nowrap; color: rgba(255,255,255,.72); font-size: 10px; }
kbd { margin-right: 3px; padding: 2px 5px; border: 1px solid rgba(255,255,255,.28); border-radius: 3px; background: rgba(0,0,0,.35); font-size: 10px; }
.side-panel { display: flex; flex-direction: column; min-height: 100vh; background: var(--panel); border-left: 1px solid var(--line); padding: 30px 24px 20px; }
.panel-header { display: flex; justify-content: space-between; align-items: start; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.panel-header small, .section-title, .muted { color: var(--muted); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.panel-header h1 { margin: 7px 0 0; max-width: 210px; font: 600 31px/1 'Barlow Condensed', sans-serif; letter-spacing: -.02em; }
.sun-icon { color: var(--accent); font-size: 25px; }
.panel-section { padding: 24px 0; border-bottom: 1px solid var(--line); }
.section-title { display: flex; justify-content: space-between; margin-bottom: 15px; }
.section-title span:last-child { color: var(--accent); }
.inventory-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.inventory-item { min-height: 64px; position: relative; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; background: rgba(255,255,255,.035); }
.inventory-item:hover, .inventory-item.current { border-color: var(--accent); background: rgba(211,243,107,.1); }
.inventory-item .mini-block { margin: 7px 0 1px; width: 24px; height: 24px; } .inventory-item b { font-size: 11px; } .inventory-item small { position: absolute; right: 5px; bottom: 3px; color: var(--muted); font-size: 9px; }
.recipe-section { display: flex; flex-direction: column; gap: 8px; }
.recipe-section .section-title { margin-bottom: 5px; }
.recipe { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.035); color: var(--ink); padding: 11px; text-align: left; cursor: pointer; }
.recipe:hover { border-color: var(--mint); background: rgba(119,215,180,.08); }
.recipe-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 4px; color: var(--accent); background: rgba(211,243,107,.11); font-size: 19px; }
.recipe span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; flex: 1; } .recipe b { font-size: 12px; } .recipe small { color: var(--muted); font-size: 10px; }
.recipe strong { color: var(--accent); font-size: 18px; }
.panel-footer { display: flex; justify-content: space-between; margin-top: auto; padding-top: 18px; color: var(--muted); font-size: 10px; } .dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--mint); }
.pause-overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(5,9,8,.7); backdrop-filter: blur(8px); text-align: center; } .pause-overlay.hidden { display: none; } .pause-overlay small { color: var(--accent); letter-spacing: .2em; } .pause-overlay h2 { font: 600 44px 'Barlow Condensed'; margin: 12px 0 22px; } .pause-overlay button { border: 0; border-radius: 5px; background: var(--accent); padding: 12px 22px; cursor: pointer; font-weight: 700; }
@media (max-width: 900px) { body { overflow: auto; } .game-shell { grid-template-columns: 1fr; } .game-screen { min-height: 72vh; } #world { height: 72vh; } .side-panel { min-height: auto; border-left: 0; border-top: 1px solid var(--line); } .controls-hint { display: none; } }
@media (max-width: 560px) { .top-hud { inset: 15px; } .top-actions { display: none; } .brand { font-size: 16px; } .hotbar { bottom: 28px; transform: translateX(-50%) scale(.82); transform-origin: bottom center; } .status-hud { left: 15px; bottom: 115px; } .side-panel { padding: 22px 16px; } }