:root {
  color-scheme: dark;
  --ink: #f1f2e9;
  --muted: rgba(241, 242, 233, 0.66);
  --soft: rgba(241, 242, 233, 0.12);
  --line: rgba(241, 242, 233, 0.17);
  --panel: rgba(13, 21, 24, 0.74);
  --accent: #e9ba67;
  --accent-strong: #f5cc7a;
  --teal: #84cbc1;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 320px; min-height: 100%; overflow: hidden; }

body {
  background: #101820;
  color: var(--ink);
  font-family: "Noto Sans SC", system-ui, sans-serif;
}

button, kbd { font: inherit; }

#game-shell { position: relative; min-height: 100vh; height: 100vh; overflow: hidden; isolation: isolate; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }

.hud { position: absolute; z-index: 3; }
.hud-top { top: 26px; left: 30px; right: 30px; display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; }
.brand-lockup, .status-cluster { display: flex; align-items: center; }
.brand-lockup { gap: 12px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: #1c201b; background: var(--accent); font-family: "Chakra Petch", sans-serif; font-size: 23px; font-weight: 700; box-shadow: 4px 4px 0 rgba(12, 20, 21, .35); }
.eyebrow { margin: 0 0 3px; color: var(--accent); font: 600 10px/1.2 "Chakra Petch", monospace; letter-spacing: .18em; }
h1, h2, p { margin-top: 0; }
h1 { margin: 0; font-size: 20px; line-height: 1; font-weight: 900; letter-spacing: .04em; }
.status-cluster { gap: 8px; }
.status-chip { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); background: rgba(13, 21, 24, .48); color: var(--muted); font-size: 11px; letter-spacing: .03em; backdrop-filter: blur(12px); }
.status-dot, .pulse-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(132, 203, 193, .12); }
.sun-icon { color: var(--accent); font-size: 16px; line-height: 10px; }

.info-card { top: 106px; left: 30px; width: 242px; padding: 17px 18px 16px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(13, 21, 24, .8), rgba(13, 21, 24, .58)); box-shadow: 10px 10px 0 rgba(8, 13, 16, .12); backdrop-filter: blur(14px); }
.info-card h2 { margin: 0 0 8px; font-size: 18px; font-weight: 900; letter-spacing: -.02em; }
.muted { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.world-features { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; }
.world-features span { padding: 4px 7px; border: 1px solid rgba(132,203,193,.26); color: var(--teal); background: rgba(132,203,193,.08); font: 10px ""Chakra Petch"", monospace; letter-spacing: .08em; }
.info-divider { height: 1px; margin: 14px 0 11px; background: var(--line); }
.stat-line { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; line-height: 1.9; }
.stat-line strong { color: var(--ink); font: 500 12px "Chakra Petch", monospace; letter-spacing: .04em; }

.crosshair { position: absolute; z-index: 4; top: 50%; left: 50%; width: 21px; height: 21px; transform: translate(-50%, -50%); pointer-events: none; }
.crosshair span { position: absolute; display: block; background: rgba(255,255,255,.86); box-shadow: 0 1px 2px rgba(0,0,0,.45); }
.crosshair span:first-child { width: 2px; height: 21px; top: 0; left: 9px; }
.crosshair span:last-child { width: 21px; height: 2px; top: 9px; left: 0; }
.target-label { position: absolute; z-index: 4; top: calc(50% + 18px); left: 50%; transform: translateX(-50%); padding: 4px 8px; color: rgba(255,255,255,.78); background: rgba(10, 17, 20, .45); font: 10px "Chakra Petch", monospace; letter-spacing: .1em; text-transform: uppercase; opacity: .9; pointer-events: none; }
.toast { position: absolute; z-index: 5; top: 90px; left: 50%; transform: translateX(-50%) translateY(-8px); padding: 9px 15px; border: 1px solid rgba(233,186,103,.45); background: rgba(24, 25, 21, .82); color: var(--accent-strong); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.controls-card { left: 30px; bottom: 29px; padding: 13px 14px; border-left: 2px solid var(--accent); background: rgba(13, 21, 24, .62); backdrop-filter: blur(12px); }
.control-row { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; line-height: 1.8; }
.control-row + .control-row { margin-top: 3px; }
.control-row span { margin: 0 5px 0 2px; }
kbd { min-width: 20px; padding: 2px 5px; border: 1px solid rgba(241,242,233,.22); border-bottom-color: rgba(241,242,233,.4); background: rgba(255,255,255,.07); color: var(--ink); font: 10px "Chakra Petch", monospace; text-align: center; }

.hotbar { bottom: 28px; left: 50%; display: flex; gap: 7px; padding: 8px; transform: translateX(-50%); border: 1px solid var(--line); background: rgba(13, 21, 24, .66); backdrop-filter: blur(15px); }
.hotbar-item { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(241,242,233,.18); background: rgba(255,255,255,.06); cursor: pointer; transition: border-color .16s, transform .16s, background .16s; }
.hotbar-item:hover { transform: translateY(-3px); border-color: var(--accent); }
.hotbar-item.active { border-color: var(--accent); background: rgba(233,186,103,.14); box-shadow: inset 0 -3px 0 var(--accent); }
.hotbar-item .slot-number { position: absolute; top: 3px; left: 5px; color: rgba(255,255,255,.58); font: 10px "Chakra Petch", monospace; }
.hotbar-item .block-icon { width: 23px; height: 23px; border: 1px solid rgba(0,0,0,.3); box-shadow: 4px 5px 0 rgba(0,0,0,.15); image-rendering: pixelated; }
.hotbar-item .slot-name { position: absolute; bottom: -19px; left: 50%; transform: translateX(-50%); width: 70px; color: rgba(255,255,255,.62); font-size: 9px; text-align: center; opacity: 0; transition: opacity .16s; }
.hotbar-item:hover .slot-name, .hotbar-item.active .slot-name { opacity: 1; }
.block-icon.grass { background: linear-gradient(#7bbf56 0 33%, #a66d43 33% 100%); }
.block-icon.dirt { background: #9a633f; }
.block-icon.stone { background: #777b78; }
.block-icon.sand { background: #d4b36f; }
.block-icon.wood { background: linear-gradient(90deg, #8a5d3f 0 25%, #b47c50 25% 38%, #8a5d3f 38% 64%, #c18a57 64% 78%, #8a5d3f 78%); }
.block-icon.brick { background: repeating-linear-gradient(135deg, #9d5149 0 8px, #b96557 8px 11px); }
.block-icon.water { background: linear-gradient(145deg, #56b8dc, #2b739f); }
.block-icon.glow { background: radial-gradient(circle at 35% 30%, #fff1a5, #f0a23f 42%, #a84a2c 100%); box-shadow: 0 0 9px rgba(240,162,63,.65); }
.block-icon.flower { background: radial-gradient(circle at 50% 34%, #ffd578 0 18%, transparent 19%), linear-gradient(90deg, transparent 42%, #47834e 43% 57%, transparent 58%), #c96587; }

.start-screen { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; background: linear-gradient(90deg, rgba(7, 13, 16, .72), rgba(7, 13, 16, .3)); transition: opacity .35s, visibility .35s; }
.start-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.start-panel { width: min(450px, calc(100vw - 40px)); padding: 34px 36px 30px; border: 1px solid rgba(241,242,233,.25); background: rgba(12, 19, 22, .77); box-shadow: 16px 16px 0 rgba(5, 9, 11, .25); backdrop-filter: blur(18px); }
.start-kicker { display: flex; align-items: center; gap: 9px; color: var(--teal); font: 600 11px "Chakra Petch", monospace; letter-spacing: .15em; }
.start-panel h2 { margin: 20px 0 11px; font-size: clamp(27px, 4vw, 39px); font-weight: 900; line-height: 1.1; letter-spacing: -.05em; }
.start-panel > p:not(.start-note) { margin-bottom: 24px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.primary-button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 16px; border: 0; background: var(--accent); color: #20231c; font-size: 13px; font-weight: 900; cursor: pointer; transition: background .16s, transform .16s; }
.primary-button:hover { background: var(--accent-strong); transform: translateY(-2px); }
.primary-button span { font-size: 20px; line-height: 10px; }
.start-note { margin: 13px 0 0; color: rgba(241,242,233,.4); font-size: 10px; text-align: center; }

@media (max-width: 680px) {
  .hud-top { top: 16px; left: 16px; right: 16px; }
  .info-card { top: 78px; left: 16px; width: 215px; padding: 13px; }
  .status-chip:first-child { display: none; }
  .controls-card { left: 16px; bottom: 18px; }
  .hotbar { bottom: 16px; left: auto; right: 13px; transform: none; gap: 4px; padding: 5px; }
  .hotbar-item { width: 39px; height: 39px; }
  .hotbar-item .block-icon { width: 19px; height: 19px; }
  .hotbar-item .slot-name { display: none; }
  .start-panel { padding: 28px 24px 24px; }
}