@font-face { font-family: "Rajdhani"; src: local("Bahnschrift"), local("DIN Alternate"); font-display: swap; }
@font-face { font-family: "Share Tech Mono"; src: local("Cascadia Mono"), local("Consolas"); font-display: swap; }
@font-face { font-family: "ZCOOL QingKe HuangYou"; src: local("Microsoft YaHei UI"), local("PingFang SC"); font-display: swap; }

:root {
  --ink: #e8fff3;
  --muted: #8aa99f;
  --cyan: #78ffd6;
  --cyan-rgb: 120, 255, 214;
  --lime: #c8ff74;
  --amber: #ffc96b;
  --red: #ff6b65;
  --blue: #7fd4ff;
  --violet: #bd9cff;
  --panel: rgba(5, 16, 16, .78);
  --panel-strong: rgba(3, 11, 12, .94);
  --edge: rgba(155, 255, 223, .24);
  --edge-strong: rgba(155, 255, 223, .58);
  --shadow: 0 20px 70px rgba(0, 0, 0, .5);
  --safe-top: max(18px, env(safe-area-inset-top));
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  font-family: "Rajdhani", "ZCOOL QingKe HuangYou", sans-serif;
  color: var(--ink);
  background: #020706;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #020706; user-select: none; }
button, input, select { font: inherit; }
button { color: inherit; }
kbd { font-family: "Share Tech Mono", monospace; }

#game-canvas { position: fixed; inset: 0; display: block; width: 100%; height: 100%; outline: none; }
#world-grade {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(circle at 50% 42%, transparent 42%, rgba(1, 8, 7, .17) 71%, rgba(0, 0, 0, .62) 116%),
    linear-gradient(180deg, rgba(66, 201, 170, .025), rgba(3, 7, 9, .08));
  mix-blend-mode: screen;
}
#film-grain {
  position: fixed; inset: -40%; z-index: 3; opacity: .09; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E");
  animation: grain .22s steps(2) infinite;
}
@keyframes grain { 0%{transform:translate(0)}25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(1%,1%)}100%{transform:translate(-3%,-1%)} }
#damage-flash { position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: 0; background: radial-gradient(circle, transparent 35%, rgba(255, 36, 47, .76)); transition: opacity .18s; }
#damage-flash.active { opacity: 1; transition-duration: .03s; }

.full-screen { position: fixed; inset: 0; z-index: 50; display: none; }
.full-screen.active { display: grid; }

#boot-screen {
  place-items: center; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 65% 25%, rgba(62, 232, 179, .09), transparent 23%),
    linear-gradient(95deg, rgba(1, 9, 8, .88) 0%, rgba(1, 9, 8, .66) 46%, rgba(1, 9, 8, .12) 100%);
}
#boot-screen::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .33;
  background-image: linear-gradient(rgba(133, 255, 218, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(133, 255, 218, .05) 1px, transparent 1px);
  background-size: 72px 72px; mask-image: linear-gradient(90deg, #000, transparent 78%); transform: perspective(600px) rotateX(8deg) scale(1.1);
}
.boot-orbit { position: absolute; border: 1px solid rgba(var(--cyan-rgb), .17); border-radius: 50%; pointer-events: none; }
.boot-orbit::before { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); top: 50%; left: -3px; }
.orbit-one { width: min(72vw, 840px); aspect-ratio: 1; right: -22vw; top: -48%; animation: orbit 24s linear infinite; }
.orbit-two { width: min(45vw, 520px); aspect-ratio: 1; right: -8vw; top: -15%; animation: orbit 16s linear infinite reverse; }
@keyframes orbit { to { transform: rotate(360deg); } }
.boot-content { position: relative; width: min(900px, calc(100vw - 64px)); transform: translateX(-7vw); }
.eyebrow, .section-kicker { color: var(--cyan); font: 500 12px/1 "Share Tech Mono", monospace; letter-spacing: .29em; text-transform: uppercase; }
.signal-dot { display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.72); } }
.boot-content h1 { margin: 22px 0 0; line-height: .76; letter-spacing: -.055em; transform: skewX(-5deg); }
.boot-content h1 span { display: block; font-size: clamp(68px, 10.8vw, 152px); font-weight: 400; color: #e6fff3; text-shadow: 0 0 60px rgba(var(--cyan-rgb), .14); }
.boot-content h1 strong { display: block; margin-left: clamp(22px, 8vw, 110px); font-size: clamp(78px, 12.3vw, 178px); font-weight: 700; color: transparent; -webkit-text-stroke: 2px var(--cyan); filter: drop-shadow(0 0 14px rgba(var(--cyan-rgb), .24)); }
.title-rule { display: flex; align-items: center; gap: 16px; width: min(590px, 75vw); margin: 28px 0 20px 7vw; }
.title-rule span { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--edge-strong)); }
.title-rule span:last-child { background: linear-gradient(90deg, var(--edge-strong), transparent); }
.title-rule i { color: var(--muted); font: normal 10px "Share Tech Mono", monospace; letter-spacing: .2em; white-space: nowrap; }
.hero-copy { margin: 0 0 25px 7vw; color: rgba(224, 255, 242, .75); font-size: clamp(16px, 1.45vw, 21px); font-weight: 500; letter-spacing: .09em; line-height: 1.65; }
.feature-strip { display: flex; gap: 1px; width: min(560px, 76vw); margin-left: 7vw; border: 1px solid var(--edge); background: var(--edge); }
.feature-strip div { display: flex; align-items: baseline; gap: 9px; flex: 1; padding: 10px 15px; background: rgba(2, 12, 11, .76); }
.feature-strip b { color: var(--cyan); font: 700 23px "Share Tech Mono", monospace; }
.feature-strip span { color: var(--muted); font-size: 12px; letter-spacing: .1em; }
.boot-actions { display: flex; gap: 12px; margin: 28px 0 0 7vw; }
button { border: 0; cursor: pointer; }
.primary-button, .secondary-button, .danger-button { position: relative; min-width: 220px; padding: 14px 48px 13px 20px; text-align: left; overflow: hidden; transition: .2s ease; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%); }
.primary-button { background: var(--cyan); color: #03110d; box-shadow: 0 0 35px rgba(var(--cyan-rgb), .14); }
.primary-button::after, .secondary-button::after, .danger-button::after { content: "›"; position: absolute; right: 18px; top: 50%; transform: translateY(-55%); font-size: 30px; }
.primary-button:hover { background: #a9ffe5; transform: translateY(-2px); box-shadow: 0 8px 35px rgba(var(--cyan-rgb), .25); }
.secondary-button, .danger-button { border: 1px solid var(--edge); background: rgba(6, 19, 18, .7); color: var(--ink); }
.secondary-button:hover { border-color: var(--edge-strong); background: rgba(var(--cyan-rgb), .08); }
.danger-button:hover { border-color: rgba(255, 107, 101, .6); background: rgba(255, 107, 101, .08); }
.primary-button span, .secondary-button span, .danger-button span { display: block; font-size: 16px; font-weight: 700; letter-spacing: .12em; }
.primary-button small, .secondary-button small, .danger-button small { display: block; margin-top: 2px; font: 9px "Share Tech Mono", monospace; letter-spacing: .22em; opacity: .55; }
button:disabled { opacity: .34; cursor: not-allowed; filter: grayscale(1); }
.boot-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 18px 0 0 7vw; color: rgba(180, 212, 202, .65); font-size: 11px; letter-spacing: .08em; }
.boot-meta i { width: 2px; height: 2px; border-radius: 50%; background: var(--cyan); }
.boot-footer { position: absolute; left: 28px; right: 28px; bottom: 20px; display: flex; justify-content: space-between; color: rgba(161, 203, 190, .48); font: 9px "Share Tech Mono", monospace; letter-spacing: .18em; }

#loading-screen { place-items: center; align-content: center; gap: 20px; background: rgba(1, 7, 7, .92); }
.loader-glyph { position: relative; width: 84px; height: 84px; }
.loader-glyph span { position: absolute; inset: 0; border: 1px solid var(--cyan); transform: rotate(45deg); animation: loader 1.7s ease-in-out infinite; }
.loader-glyph span:nth-child(2) { inset: 13px; animation-delay: -.3s; }
.loader-glyph span:nth-child(3) { inset: 27px; background: rgba(var(--cyan-rgb), .3); animation-delay: -.6s; }
@keyframes loader { 50% { transform: rotate(225deg) scale(.82); opacity: .32; } }
#loading-screen p { margin: 8px 0 0; font-size: 18px; font-weight: 600; letter-spacing: .16em; }
.loading-track { width: min(360px, 70vw); height: 2px; background: rgba(255,255,255,.12); }
.loading-track i { display: block; width: 0; height: 100%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); transition: width .25s; }
#loading-screen small { color: var(--muted); font: 9px "Share Tech Mono", monospace; letter-spacing: .26em; }

#hud { position: fixed; inset: 0; z-index: 10; display: none; pointer-events: none; }
#hud.active { display: block; }
.glass-panel { border: 1px solid var(--edge); background: linear-gradient(135deg, rgba(5, 19, 17, .84), rgba(4, 12, 14, .55)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.015), 0 12px 45px rgba(0,0,0,.18); backdrop-filter: blur(9px); }
.hud-top { position: absolute; top: var(--safe-top); left: 20px; right: 20px; display: grid; grid-template-columns: minmax(240px, 1fr) minmax(360px, 620px) minmax(190px, 1fr); align-items: start; gap: 18px; }
.planet-readout { display: flex; align-items: center; gap: 12px; justify-self: start; min-width: 300px; padding: 8px 12px 8px 8px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.planet-orb { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #efffe9 0 4%, #67d8a6 10%, #175b4d 43%, #071b18 72%); box-shadow: inset -8px -6px 12px rgba(0,0,0,.7), 0 0 18px rgba(var(--cyan-rgb), .24); }
.planet-readout span, .time-readout span { display: block; color: var(--muted); font: 9px "Share Tech Mono", monospace; letter-spacing: .15em; }
.planet-readout strong { display: block; margin-top: 3px; font-size: 14px; letter-spacing: .08em; }
.planet-readout em { align-self: stretch; display: grid; place-items: center; margin-left: 10px; padding-left: 13px; border-left: 1px solid var(--edge); color: var(--lime); font-size: 11px; font-style: normal; white-space: nowrap; }
.compass { position: relative; display: flex; align-items: center; justify-content: space-around; min-width: 360px; height: 34px; padding: 0 18px; border-top: 0; background: linear-gradient(90deg, transparent, rgba(4, 17, 16, .82) 18%, rgba(4,17,16,.82) 82%, transparent); }
.compass span { color: rgba(185, 219, 208, .48); font: 9px "Share Tech Mono", monospace; }
.compass strong { color: var(--cyan); font: 11px "Share Tech Mono", monospace; letter-spacing: .12em; }
.compass::before { content: ""; position: absolute; top: 0; left: 50%; height: 6px; border-left: 1px solid var(--cyan); }
#compass-marker { position: absolute; left: 50%; bottom: -5px; width: 5px; height: 5px; border: solid var(--amber); border-width: 1px 1px 0 0; transform: rotate(-45deg); }
.time-readout { justify-self: end; min-width: 160px; padding: 8px 38px 6px 12px; text-align: right; position: relative; }
.time-readout strong { display: block; color: var(--amber); font: 18px "Share Tech Mono", monospace; letter-spacing: .08em; }
.sun-icon { position: absolute; right: 11px; top: 16px; width: 11px; height: 11px; border: 1px solid var(--amber); border-radius: 50%; box-shadow: 0 0 10px var(--amber); }

.mission-card { position: absolute; top: 92px; left: 20px; width: 300px; padding: 15px 17px 14px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.panel-label { display: flex; justify-content: space-between; color: var(--cyan); font: 9px "Share Tech Mono", monospace; letter-spacing: .12em; }
.panel-label b { color: var(--muted); }
.mission-card h2 { margin: 10px 0 5px; font-size: 20px; letter-spacing: .08em; }
.mission-card p { min-height: 34px; margin: 0; color: rgba(209, 235, 226, .62); font-size: 12px; line-height: 1.42; }
.mission-progress { height: 2px; margin: 12px 0 9px; background: rgba(255,255,255,.1); }
.mission-progress i { display: block; width: 0; height: 100%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); transition: width .35s; }
.mission-target { display: flex; align-items: baseline; gap: 6px; color: var(--muted); }
.mission-target span { color: var(--cyan); }
.mission-target b { color: var(--ink); font: 18px "Share Tech Mono", monospace; }
.mission-target i { font-style: normal; opacity: .45; }
.mission-target strong { color: var(--cyan); font: 12px "Share Tech Mono", monospace; }
.mission-target em { margin-left: auto; font-size: 11px; font-style: normal; letter-spacing: .08em; }

.survival-panel { position: absolute; top: 92px; right: 20px; width: 216px; padding: 12px; }
.status-line { display: grid; grid-template-columns: 38px 1fr 28px; align-items: center; gap: 7px; margin-bottom: 7px; }
.status-line span { color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.status-line > div { height: 4px; background: rgba(255,255,255,.09); overflow: hidden; }
.status-line i { display: block; width: 100%; height: 100%; transition: width .25s; }
.status-line b { font: 9px "Share Tech Mono", monospace; text-align: right; }
.health i { background: var(--red); box-shadow: 0 0 9px var(--red); }
.shield i { background: var(--blue); box-shadow: 0 0 9px var(--blue); }
.oxygen i { background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.hazard i { background: var(--amber); box-shadow: 0 0 9px var(--amber); }
#radar { display: block; width: 128px; height: 128px; margin: 8px auto 2px; border: 1px solid rgba(var(--cyan-rgb), .12); border-radius: 50%; opacity: .86; }
.radar-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font: 8px "Share Tech Mono", monospace; letter-spacing: .1em; }
.radar-label b { margin-left: auto; color: var(--cyan); }
.pulse-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }

#crosshair { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); transition: .15s; }
#crosshair i { position: absolute; background: rgba(232,255,243,.84); box-shadow: 0 0 3px #000; }
#crosshair i:nth-child(1), #crosshair i:nth-child(2) { width: 7px; height: 1px; top: 16px; }
#crosshair i:nth-child(1) { left: 2px; } #crosshair i:nth-child(2) { right: 2px; }
#crosshair i:nth-child(3), #crosshair i:nth-child(4) { width: 1px; height: 7px; left: 16px; }
#crosshair i:nth-child(3) { top: 2px; } #crosshair i:nth-child(4) { bottom: 2px; }
#crosshair span { position: absolute; left: 15px; top: 15px; width: 3px; height: 3px; border: 1px solid var(--cyan); border-radius: 50%; }
#crosshair.hostile i { background: var(--red); transform: scaleX(1.5); }
#target-label { position: absolute; top: calc(50% + 26px); left: 50%; transform: translateX(-50%); color: rgba(232,255,243,.85); font: 9px "Share Tech Mono", monospace; letter-spacing: .1em; text-shadow: 0 1px 4px #000; }
#interaction-prompt { position: absolute; left: 50%; top: calc(50% + 53px); display: none; align-items: center; gap: 8px; transform: translateX(-50%); color: var(--ink); font-size: 12px; letter-spacing: .1em; }
#interaction-prompt.active { display: flex; }
#interaction-prompt kbd { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--cyan); background: rgba(2,12,11,.82); color: var(--cyan); box-shadow: 0 0 13px rgba(var(--cyan-rgb), .18); }

#scan-overlay { position: absolute; inset: 0; display: none; border: 1px solid rgba(var(--cyan-rgb), .25); background: linear-gradient(180deg, rgba(var(--cyan-rgb), .035), transparent 45%); }
#scan-overlay.active { display: block; }
#scan-overlay::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 16px var(--cyan); animation: scanline 2s linear infinite; }
@keyframes scanline { from { top: 8%; } to { top: 91%; } }
.scan-reticle { position: absolute; width: 240px; height: 240px; top: 50%; left: 50%; border: 1px solid rgba(var(--cyan-rgb), .18); border-radius: 50%; transform: translate(-50%,-50%); }
.scan-reticle::before, .scan-reticle::after { content: ""; position: absolute; inset: 27px; border: 1px dashed rgba(var(--cyan-rgb), .25); border-radius: 50%; animation: orbit 9s linear infinite; }
.scan-reticle::after { inset: 64px; animation-direction: reverse; }
.scan-copy { position: absolute; left: 50%; top: calc(50% + 136px); transform: translateX(-50%); text-align: center; }
.scan-copy span { display: block; color: var(--cyan); font: 9px "Share Tech Mono", monospace; letter-spacing: .25em; }
.scan-copy strong { display: block; margin-top: 5px; font-size: 13px; letter-spacing: .12em; }
#scan-markers { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.scan-marker { position:absolute; min-width:78px; padding:4px 7px 4px 16px; border-left:1px solid var(--cyan); background:linear-gradient(90deg,rgba(4,20,18,.82),rgba(4,20,18,.1)); transform:translate(10px,-50%); color:var(--cyan); }
.scan-marker i { position:absolute; left:-5px; top:50%; width:9px; height:9px; border:1px solid currentColor; transform:translateY(-50%) rotate(45deg); box-shadow:0 0 8px currentColor; }
.scan-marker b { display:block; font-size:9px; letter-spacing:.09em; }.scan-marker span { display:block; color:var(--muted); font:7px "Share Tech Mono",monospace; }
.scan-marker.hostile { color:var(--red); border-color:var(--red); }

#tool-readout { position: absolute; left: 20px; bottom: 81px; width: 150px; padding: 8px 10px; }
#tool-readout span { color: var(--muted); font-size: 10px; letter-spacing: .09em; }
#tool-readout strong { float: right; color: var(--cyan); font: 10px "Share Tech Mono", monospace; }
#tool-readout > div { height: 2px; margin-top: 6px; background: rgba(255,255,255,.1); }
#tool-readout i { display: block; width: 100%; height: 100%; background: var(--cyan); transition: width .12s; }

#hotbar { position: absolute; left: 50%; bottom: var(--safe-bottom); display: flex; gap: 4px; transform: translateX(-50%); pointer-events: auto; }
.hotbar-slot { position: relative; width: 94px; height: 64px; padding: 7px; border: 1px solid var(--edge); background: rgba(3, 13, 13, .79); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); backdrop-filter: blur(7px); transition: .15s; }
.hotbar-slot:hover { border-color: rgba(var(--cyan-rgb), .56); background: rgba(var(--cyan-rgb), .08); }
.hotbar-slot.selected { height: 72px; margin-top: -8px; border-color: var(--cyan); box-shadow: inset 0 -2px var(--cyan), 0 0 20px rgba(var(--cyan-rgb), .12); background: rgba(6, 31, 26, .88); }
.hotbar-slot kbd { position: absolute; top: 5px; left: 6px; color: var(--muted); font-size: 8px; }
.hotbar-slot em { position: absolute; left: 5px; bottom: 5px; max-width: 68px; overflow: hidden; color: rgba(220,244,236,.58); font-size: 8px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.hotbar-slot b { position: absolute; right: 6px; bottom: 5px; color: var(--ink); font: 9px "Share Tech Mono", monospace; }
.slot-icon { display: grid; place-items: center; width: 27px; height: 27px; margin: 4px auto 0; color: var(--cyan); font: 22px "Share Tech Mono", monospace; text-shadow: 0 0 8px currentColor; }
.dirt-icon, .stone-icon { border: 1px solid rgba(255,255,255,.2); background: linear-gradient(135deg,#56764a,#263c30); box-shadow: inset -5px -4px 0 rgba(0,0,0,.2); }
.stone-icon { background: linear-gradient(135deg,#8b948b,#444f4f); }
.crystal-icon { color: #b2a8ff; }
.blaster-icon { color: var(--amber); }

.control-ribbon { position: absolute; right: 20px; bottom: 20px; display: flex; gap: 13px; padding: 6px 9px; color: var(--muted); font-size: 9px; }
.control-ribbon kbd { color: var(--cyan); }
#toast-stack { position: absolute; left: 50%; top: 22%; width: min(360px, 70vw); transform: translateX(-50%); }
.toast { margin-bottom: 7px; padding: 9px 15px; border-left: 2px solid var(--cyan); background: linear-gradient(90deg, rgba(4,18,16,.9), rgba(4,18,16,.22)); color: var(--ink); font-size: 12px; letter-spacing: .08em; animation: toast-in .3s ease, toast-out .4s 2.8s ease forwards; }
.toast b { color: var(--cyan); }
.toast.warning { border-color: var(--amber); } .toast.warning b { color: var(--amber); }
.toast.danger { border-color: var(--red); } .toast.danger b { color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }
#autosave { position: absolute; right: 22px; bottom: 55px; color: var(--muted); font: 8px "Share Tech Mono", monospace; letter-spacing: .1em; opacity: 0; transition: .2s; }
#autosave.active { opacity: 1; }
#autosave span { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border: 1px solid var(--cyan); transform: rotate(45deg); animation: orbit 1s linear infinite; }
#dialogue { position: absolute; left: 50%; bottom: 115px; display: none; grid-template-columns: 42px 1fr; gap: 12px; width: min(620px, calc(100vw - 40px)); padding: 10px 14px; transform: translateX(-50%); }
#dialogue.active { display: grid; animation: toast-in .25s; }
.portrait { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--cyan); transform: rotate(45deg); }
.portrait span { color: var(--cyan); font: 11px "Share Tech Mono", monospace; transform: rotate(-45deg); }
#dialogue b { color: var(--cyan); font-size: 10px; letter-spacing: .12em; }
#dialogue p { margin: 4px 0 0; color: rgba(231,255,247,.8); font-size: 13px; line-height: 1.4; letter-spacing: .05em; }

.overlay-panel { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: 28px; pointer-events: auto; background: rgba(1, 7, 7, .66); backdrop-filter: blur(7px); }
.overlay-panel.active { display: grid; }
.panel-shell { width: min(620px, calc(100vw - 32px)); border: 1px solid var(--edge-strong); background: linear-gradient(145deg, rgba(4,17,16,.98), rgba(2,9,10,.97)); box-shadow: var(--shadow), inset 0 0 90px rgba(var(--cyan-rgb), .025); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.wide-panel { width: min(920px, calc(100vw - 32px)); }
.panel-shell > header { display: flex; align-items: center; gap: 20px; min-height: 73px; padding: 14px 20px; border-bottom: 1px solid var(--edge); background: rgba(var(--cyan-rgb), .025); }
.panel-shell header > div:first-child { flex: 1; }
.panel-shell header span { color: var(--cyan); font: 9px "Share Tech Mono", monospace; letter-spacing: .2em; }
.panel-shell h2 { margin: 2px 0 0; font-size: 26px; letter-spacing: .08em; }
.close-button { width: 36px; height: 36px; border: 1px solid var(--edge); background: transparent; color: var(--muted); font-size: 25px; line-height: 1; }
.close-button:hover { border-color: var(--cyan); color: var(--cyan); }
.panel-body { padding: 22px; }
.panel-shell > footer { display: flex; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--edge); color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.panel-shell > footer kbd { color: var(--cyan); }

.craft-layout { display: grid; grid-template-columns: 270px 1fr; gap: 24px; min-height: 370px; }
.craft-layout aside { padding-right: 22px; border-right: 1px solid var(--edge); }
.resource-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 13px; }
.resource-chip { position: relative; min-height: 68px; padding: 10px; border: 1px solid var(--edge); background: rgba(255,255,255,.018); }
.resource-chip i { display: block; width: 12px; height: 12px; margin-bottom: 7px; border-radius: 2px; background: var(--resource-color); box-shadow: 0 0 10px var(--resource-color); }
.resource-chip span { display: block; color: var(--muted); font-size: 10px; }
.resource-chip b { position: absolute; right: 9px; bottom: 7px; font: 17px "Share Tech Mono", monospace; }
.capacity-meter { margin-top: 20px; }
.capacity-meter span { color: var(--muted); font-size: 10px; }.capacity-meter b { float: right; font: 9px "Share Tech Mono", monospace; }
.capacity-meter div { height: 3px; margin-top: 7px; background: rgba(255,255,255,.08); }.capacity-meter i { display: block; width: 0; height: 100%; background: var(--cyan); }
.recipe-list { display: grid; gap: 7px; margin-top: 13px; }
.recipe { display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 11px; width: 100%; padding: 10px; border: 1px solid var(--edge); background: rgba(255,255,255,.018); text-align: left; }
.recipe:hover:not(:disabled) { border-color: var(--cyan); background: rgba(var(--cyan-rgb), .055); }
.recipe-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(var(--cyan-rgb),.3); color: var(--cyan); font-size: 23px; }
.recipe strong { display: block; font-size: 13px; letter-spacing: .08em; }.recipe small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.recipe-cost { display: flex; gap: 5px; }.recipe-cost span { padding: 3px 5px; border: 1px solid var(--edge); color: var(--muted); font: 8px "Share Tech Mono", monospace; }
.recipe-cost span.missing { border-color: rgba(255,107,101,.4); color: var(--red); }

.journal-tabs { display: flex; gap: 1px; padding: 0 20px; border-bottom: 1px solid var(--edge); background: rgba(0,0,0,.15); }
.journal-tabs button { padding: 11px 18px; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 11px; letter-spacing: .1em; }
.journal-tabs button.active { border-color: var(--cyan); color: var(--cyan); background: rgba(var(--cyan-rgb), .04); }
.journal-content { min-height: 380px; max-height: 55vh; overflow-y: auto; }
.discovery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.discovery-card { min-height: 245px; padding: 13px; border: 1px solid var(--edge); background: rgba(255,255,255,.018); }
.discovery-card.locked { filter: grayscale(1); opacity: .43; }
.discovery-planet { height: 112px; margin-bottom: 12px; border: 1px solid var(--edge); background: var(--planet-gradient); position: relative; overflow: hidden; }
.discovery-planet::before { content:""; position:absolute; width:80px; height:80px; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--orb-gradient); box-shadow:inset -18px -12px 22px rgba(0,0,0,.6), 0 0 30px var(--glow); }
.discovery-card h3 { margin: 0 0 4px; font-size: 17px; }.discovery-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.discovery-meta { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--edge); color: var(--cyan); font: 8px "Share Tech Mono", monospace; }
.milestone-list, .controls-list { display: grid; gap: 8px; }
.milestone, .control-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--edge); background: rgba(255,255,255,.015); }
.milestone > i { width: 8px; height: 8px; border: 1px solid var(--muted); transform: rotate(45deg); }.milestone.done > i { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.milestone span, .control-row span { color: var(--muted); font-size: 10px; }.milestone b { margin-left: auto; color: var(--cyan); font: 9px "Share Tech Mono", monospace; }
.control-row kbd { min-width: 70px; padding: 5px 8px; border: 1px solid var(--edge); color: var(--cyan); text-align: center; }

.starmap-panel { overflow: hidden; background: rgba(1,5,8,.91); }
.starmap-backdrop { position:absolute; inset:0; overflow:hidden; opacity:.58; }
.starmap-backdrop::before { content:""; position:absolute; inset:-30%; background-image:radial-gradient(#fff 0 1px,transparent 1.5px); background-size:57px 57px; transform:rotate(7deg); }
.starmap-backdrop i { position:absolute; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 18px 4px var(--cyan); }
.starmap-backdrop i:nth-child(1){left:14%;top:28%}.starmap-backdrop i:nth-child(2){left:76%;top:18%;background:var(--amber);box-shadow:0 0 18px 4px var(--amber)}.starmap-backdrop i:nth-child(3){left:83%;top:72%;background:var(--violet);box-shadow:0 0 18px 4px var(--violet)}.starmap-backdrop i:nth-child(4){left:29%;top:78%}.starmap-backdrop i:nth-child(5){left:55%;top:49%;background:#fff;box-shadow:0 0 20px 5px #fff}
.starmap-shell { position:relative; z-index:2; width:min(1040px,calc(100vw - 32px)); }
.warp-fuel { color:var(--muted); font-size:10px; letter-spacing:.1em; }.warp-fuel b { color:var(--amber); font:16px "Share Tech Mono",monospace; }
.starmap-instruction { margin: 0; padding: 12px 20px; border-bottom:1px solid var(--edge); color:var(--muted); font-size:11px; }
.planet-list { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:20px; }
.planet-card { position:relative; min-height:360px; padding:18px; border:1px solid var(--edge); background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(0,0,0,.16)); text-align:left; overflow:hidden; }
.planet-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 30%,var(--planet-glow),transparent 42%); opacity:.28; }
.planet-card:hover:not(:disabled), .planet-card.current { border-color:var(--planet-accent); box-shadow:inset 0 -3px var(--planet-accent),0 0 35px rgba(0,0,0,.3); }
.planet-card > * { position:relative; z-index:1; }
.planet-sphere { width:134px; height:134px; margin:5px auto 22px; border-radius:50%; background:var(--planet-surface); box-shadow:inset -27px -18px 28px rgba(0,0,0,.72),0 0 42px var(--planet-glow); transition:transform .4s; }
.planet-card:hover .planet-sphere { transform:translateY(-5px) rotate(5deg) scale(1.04); }
.planet-card small { color:var(--planet-accent); font:8px "Share Tech Mono",monospace; letter-spacing:.17em; }
.planet-card h3 { margin:5px 0 6px; font-size:22px; letter-spacing:.06em; }.planet-card p { min-height:44px; margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
.planet-data { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:14px; }.planet-data span { padding:5px 6px; border:1px solid var(--edge); color:var(--muted); font:8px "Share Tech Mono",monospace; }
.planet-state { display:block; margin-top:13px; color:var(--planet-accent); font:9px "Share Tech Mono",monospace; letter-spacing:.12em; }

.pause-shell { width:min(460px,calc(100vw - 32px)); }.pause-actions { display:grid; gap:7px; padding:20px; }.pause-actions button { width:100%; min-width:0; }
.settings-area { display:none; padding:0 20px 20px; }.settings-area.active { display:grid; gap:13px; }
.settings-area label { display:grid; grid-template-columns:130px 1fr 42px; align-items:center; gap:10px; color:var(--muted); font-size:11px; }.settings-area input[type=range] { accent-color:var(--cyan); }.settings-area b { color:var(--cyan); font:9px "Share Tech Mono",monospace; text-align:right; }.settings-area select { padding:7px; border:1px solid var(--edge); background:#071311; color:var(--ink); }
.toggle-row input { display:none; }.toggle-row i { width:34px; height:17px; border:1px solid var(--edge); position:relative; }.toggle-row i::before { content:""; position:absolute; width:11px; height:11px; left:2px; top:2px; background:var(--muted); transition:.2s; }.toggle-row input:checked + i::before { left:19px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }

.victory-panel { background:radial-gradient(circle at 50% 40%,rgba(var(--cyan-rgb),.2),rgba(1,6,7,.92) 55%); overflow:hidden; }
.victory-rays { position:absolute; width:900px; height:900px; background:repeating-conic-gradient(from 0deg,rgba(var(--cyan-rgb),.025) 0 4deg,transparent 4deg 13deg); animation:orbit 60s linear infinite; }
.victory-shell { position:relative; text-align:center; padding:40px; border-color:var(--cyan); }
.victory-kicker { color:var(--cyan); font:10px "Share Tech Mono",monospace; letter-spacing:.3em; }.victory-glyph { margin:20px 0 10px; color:var(--cyan); font-size:70px; text-shadow:0 0 35px var(--cyan); animation:pulse 2s infinite; }
.victory-shell h2 { font-size:36px; }.victory-shell p { color:var(--muted); line-height:1.65; }
.victory-stats { display:flex; justify-content:center; gap:1px; margin:25px 0; background:var(--edge); }.victory-stats div { flex:1; padding:12px; background:#06110f; }.victory-stats b { display:block; color:var(--cyan); font:20px "Share Tech Mono",monospace; }.victory-stats span { color:var(--muted); font-size:9px; }
.victory-shell button { margin:auto; }

#touch-controls { display:none; }
noscript { position:fixed; z-index:100; inset:0; display:grid; place-items:center; background:#020706; color:white; }

@media (max-width: 900px) {
  .boot-content { transform:none; }
  .hud-top { grid-template-columns:1fr auto; }.compass { display:none; }.time-readout { min-width:130px; }
  .mission-card { top:85px; }.survival-panel { top:85px; }
  .control-ribbon { display:none; }
  .craft-layout { grid-template-columns:1fr; max-height:64vh; overflow:auto; }.craft-layout aside { padding:0 0 18px; border:0; border-bottom:1px solid var(--edge); }
  .resource-grid { grid-template-columns:repeat(4,1fr); }
  .planet-list { grid-template-columns:1fr; max-height:66vh; overflow-y:auto; }.planet-card { min-height:190px; padding-left:185px; }.planet-sphere { position:absolute; left:26px; top:22px; width:125px; height:125px; }.planet-data { max-width:420px; }
}

@media (max-width: 620px) {
  .boot-content { width:calc(100vw - 34px); }
  .boot-content h1 span { font-size:18vw; }.boot-content h1 strong { margin-left:3vw; font-size:21vw; -webkit-text-stroke-width:1px; }
  .title-rule,.hero-copy,.feature-strip,.boot-actions,.boot-meta { margin-left:0; }
  .hero-copy { font-size:14px; }.feature-strip { width:100%; }.feature-strip div { padding:8px; }.feature-strip span { font-size:9px; }
  .boot-actions { flex-direction:column; }.boot-actions button { width:100%; }.boot-meta { display:none; }.boot-footer span:nth-child(2) { display:none; }
  .hud-top { left:8px; right:8px; top:8px; }.planet-readout { min-width:0; width:100%; }.planet-readout em { display:none; }.time-readout { display:none; }
  .mission-card { top:72px; left:8px; width:230px; padding:10px; }.mission-card p { min-height:0; }.mission-progress,.mission-target { display:none; }
  .survival-panel { top:72px; right:8px; width:112px; padding:7px; }.status-line { grid-template-columns:31px 1fr; margin-bottom:5px; }.status-line b,#radar,.radar-label { display:none; }
  #tool-readout { display:none; }
  #hotbar { bottom:10px; gap:2px; }.hotbar-slot { width:52px; height:52px; }.hotbar-slot.selected { height:59px; }.hotbar-slot em { display:none; }.slot-icon { width:24px; height:24px; }.hotbar-slot b { font-size:8px; }
  #dialogue { bottom:78px; }.overlay-panel { padding:8px; }.panel-shell h2 { font-size:21px; }.panel-shell > header { min-height:60px; padding:10px 13px; }.panel-body { padding:13px; }
  .resource-grid { grid-template-columns:repeat(2,1fr); }.recipe { grid-template-columns:38px 1fr; }.recipe-cost { grid-column:2; }.journal-content { min-height:320px; }.discovery-grid { grid-template-columns:1fr; }
  .planet-list { padding:10px; }.planet-card { min-height:205px; padding:14px 12px 12px 130px; }.planet-sphere { left:15px; top:28px; width:96px; height:96px; }.planet-data { grid-template-columns:1fr; }
}

@media (hover:none) and (pointer:coarse) {
  #touch-controls { position:fixed; inset:0; z-index:25; display:block; pointer-events:none; }
  #touch-stick { position:absolute; left:28px; bottom:98px; width:96px; height:96px; border:1px solid rgba(var(--cyan-rgb),.28); border-radius:50%; background:rgba(4,18,16,.24); pointer-events:auto; }
  #touch-stick i { position:absolute; width:38px; height:38px; left:29px; top:29px; border:1px solid var(--cyan); border-radius:50%; background:rgba(var(--cyan-rgb),.13); }
  #touch-look { position:absolute; right:0; top:20%; bottom:85px; width:58%; pointer-events:auto; }
  #touch-controls button { position:absolute; width:48px; height:48px; border:1px solid var(--edge-strong); border-radius:50%; background:rgba(4,18,16,.55); color:var(--cyan); pointer-events:auto; }
  #touch-controls button[data-touch-action=jump]{right:24px;bottom:155px}#touch-controls button[data-touch-action=mine]{right:78px;bottom:105px}#touch-controls button[data-touch-action=place]{right:22px;bottom:92px}#touch-controls button[data-touch-action=interact]{right:130px;bottom:125px}#touch-controls button[data-touch-action=scan]{right:135px;bottom:183px}
  .control-ribbon { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  #film-grain { display:none; }
}