:root {
  --ink: #f2eee6;
  --dim: #b9b2a6;
  --card: rgba(18, 14, 26, 0.94);
  --edge: rgba(255, 255, 255, 0.12);
  --accent: #e8b04a;
  --portal: #b98cff;
  --l: env(safe-area-inset-left, 0px);
  --r: env(safe-area-inset-right, 0px);
  font-family: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--ink);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none;
}
#view, #view canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#touch { position: fixed; inset: 0; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud button { pointer-events: auto; }
button { font: inherit; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }

#crosshair { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; }
#crosshair::before, #crosshair::after { content: ''; position: absolute; background: rgba(255, 255, 255, 0.85); mix-blend-mode: difference; }
#crosshair::before { left: 8px; top: 0; width: 2px; height: 18px; }
#crosshair::after { top: 8px; left: 0; height: 2px; width: 18px; }
/* The grappling hook's reach: a ring round the crosshair, lit when the hook would catch on what it points at. */
#hookring { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.3); display: none; }
#hookring.on { display: block; }
#hookring.reach { border: 2px solid #ffd27a; box-shadow: 0 0 6px rgba(255, 190, 80, 0.7); }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; opacity: 0; transition: opacity 0.25s; border: 2px solid #fff; transform: rotate(45deg); border-radius: 3px; }
#hitmarker.on { opacity: 1; transition: none; }
#hitmarker.head { border-color: #ff5a3a; }
#crack { display: none; position: absolute; left: 50%; top: 50%; width: 46px; height: 4px; margin: 16px 0 0 -23px; background: rgba(255,255,255,0.15); border-radius: 2px; overflow: hidden; opacity: 0; }
#crack.on { opacity: 1; }
#crack::after { content: ''; position: absolute; inset: 0; width: var(--p, 0%); background: var(--ink); }

#top { position: absolute; top: 8px; left: calc(10px + var(--l)); right: calc(10px + var(--r)); display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
#vitals { width: 170px; }
#health { display: flex; gap: 1px; }
#health i { width: 15px; height: 15px; background-size: 100% 100%; image-rendering: pixelated; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4)); }
#depth { margin-top: 4px; font-size: 12px; color: var(--dim); text-shadow: 0 1px 2px #000; }
/* Minecraft's hotbar: grey bevelled squares, the picture in the middle, the count in the corner with a hard shadow,
   and a white frame round the one in hand. */
#hotbar { display: flex; gap: 0; padding: 2px; background: rgba(20, 20, 20, 0.55); border: 2px solid #1b1b1b; box-shadow: inset 0 0 0 2px #555; }
#hotbar button {
  pointer-events: auto; position: relative; width: 46px; height: 46px; border-radius: 0; padding: 0;
  border: 2px solid; border-color: #373737 #8b8b8b #8b8b8b #373737; background: rgba(139, 139, 139, 0.35);
}
#hotbar button i { position: absolute; inset: 5px; background-size: 100% 100%; image-rendering: pixelated; }
#hotbar button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#hotbar button b {
  position: absolute; right: 2px; bottom: 0; font: 700 15px/1 ui-monospace, Menlo, monospace; color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
}
#hotbar button.on { outline: 3px solid #f0f0f0; outline-offset: -1px; z-index: 1; box-shadow: 0 0 0 1px #000; }
#menuBtn { width: 46px; height: 46px; border-radius: 9px; border: 1px solid var(--edge); background: rgba(0, 0, 0, 0.45); font-size: 20px; }

/* The compass: No Man's Sky's strip along the top. Rooms waiting for an answer are purple diamonds, open portals
   rings, treasure gold; a brute that has heard you, red. ▲/▼: above or below you. */
#compass { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); width: min(440px, 48vw); height: 34px; overflow: hidden;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.42) 18%, rgba(0,0,0,0.42) 82%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
#ticks { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.tick { position: absolute; top: 2px; width: 1px; height: 5px; background: rgba(255,255,255,0.45); }
.tick.mid { height: 8px; background: rgba(255,255,255,0.7); }
.tick.big { height: 9px; width: 2px; background: #fff; }
.tick[data-n]::after { content: attr(data-n); position: absolute; top: 9px; left: 50%; transform: translateX(-50%); font: 700 10px/1 ui-monospace, Menlo, monospace; color: rgba(255,255,255,0.75); }
.tick.big[data-n]::after { font-size: 12px; color: #fff; }
#needle { position: absolute; left: 50%; top: 0; width: 2px; height: 34px; margin-left: -1px; background: linear-gradient(#ffd24a, transparent); opacity: 0.8; }
#marks { position: absolute; inset: 0; }
.mk { position: absolute; left: 0; top: 4px; width: 0; display: flex; flex-direction: column; align-items: center; will-change: transform; }
.mk i { display: block; width: 11px; height: 11px; flex: none; transform: rotate(45deg); background: #b98cff; box-shadow: 0 0 6px #b98cff; border: 1px solid #fff; }
.mk span { margin-top: 2px; font: 700 10px/1 ui-monospace, Menlo, monospace; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.mk.portal i { transform: none; border-radius: 50%; background: transparent; border: 2px solid #b98cff; }
.mk.home i { transform: none; border-radius: 50%; background: transparent; border: 2px solid #fff; box-shadow: 0 0 6px #b98cff; }
.mk.treasure i { background: #ffd24a; box-shadow: 0 0 6px #ffb020; }
.mk.cache i { background: #60ecd6; box-shadow: 0 0 6px #60ecd6; }
.mk.sky i { transform: none; width: 12px; height: 12px; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 9px 2px #ffd860; border: none; }
.mk.base i { transform: none; width: 0; height: 0; background: none; box-shadow: none; border: 6px solid transparent; border-bottom: 9px solid #fff; border-top: 0; filter: drop-shadow(0 0 3px #000); }
.mk.vault i { background: #ffc94a; box-shadow: 0 0 6px #ffb020; width: 9px; height: 9px; }
.mk.lair i { transform: none; width: 12px; height: 12px; background: #ff4a2a; box-shadow: 0 0 6px #ff2a10; border: none; clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); }
.mk.brute i { transform: none; width: 12px; height: 12px; border-radius: 50%; background: #ff3a2a; box-shadow: 0 0 8px #ff3a2a; animation: pulse 0.8s infinite alternate; }
.mk[hidden] { display: none; }
.mk.edge i { opacity: 0.75; }
.mk.edge.left span::before { content: '◀ '; }
.mk.edge.right span::after { content: ' ▶'; }
@keyframes pulse { from { opacity: 0.5; } to { opacity: 1; } }

#ammo { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); text-align: center; font-size: 14px; background: rgba(0,0,0,0.45); padding: 5px 12px; border-radius: 8px; white-space: nowrap; text-shadow: 0 1px 2px #000; }
#ammo[hidden] { display: none; }
#ammo small { display: block; font-size: 11px; color: var(--dim); }
#hotbar button u { position: absolute; left: 4px; right: 4px; bottom: 2px; height: 3px; text-decoration: none; }
#discover { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); width: min(460px, 80vw); text-align: center; padding: 12px 16px; border-radius: 12px; background: rgba(10, 8, 18, 0.82); border: 1px solid var(--edge); opacity: 0; pointer-events: none; }
#discover.on { animation: discover 5s forwards; }
#discover .tier { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
#discover h3 { margin: 4px 0; font-size: 22px; }
#discover p { margin: 4px 0; font-size: 14px; line-height: 1.35; }
@keyframes discover { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.96); } 6% { opacity: 1; transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
#burn { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s; pointer-events: none;
  background: linear-gradient(0deg, rgba(255, 110, 20, 0.75), rgba(255, 60, 10, 0.35) 22%, transparent 48%); }
#burn.on { opacity: 1; animation: flicker 0.25s infinite alternate; }
@keyframes flicker { from { filter: brightness(0.85); } to { filter: brightness(1.2); } }
/* The list scrolls on its own once it is long (round 5), so the heading and Done stay on screen. */
#card .ammo-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: min(52vh, 440px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-right: 4px; }
#card .ammo-row { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--edge); background: rgba(255,255,255,0.05); border-radius: 10px; padding: 8px 10px; }
#card .fire-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0 10px; }
#card .fire-mode .seg { display: inline-flex; border: 1px solid var(--edge); border-radius: 10px; overflow: hidden; }
#card .fire-mode .seg button { border: 0; border-radius: 0; background: rgba(255,255,255,0.05); padding: 8px 14px; min-height: 40px; }
#card .fire-mode .seg button.on { background: rgba(255,255,255,0.2); color: #fff; font-weight: 600; }
#card .ammo-row.on { border-color: #fff; background: rgba(255,255,255,0.12); }
#card .ammo-row > i { flex: none; width: 14px; height: 14px; border-radius: 3px; box-shadow: 0 0 6px currentColor; }
#card .ammo-row > span { flex: 1; }
#card .ammo-row em { font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
#card .ammo-row strong { font: 700 15px ui-monospace, Menlo, monospace; }

#warn { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; width: min(520px, 70vw); }
.bar { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; color: #1a1408; font-size: 14px; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.bar span { flex: 1; }
.bar button { border: 0; background: rgba(0,0,0,0.18); color: inherit; border-radius: 7px; width: 30px; height: 30px; font-size: 16px; }
.bar.yellow { background: #f2d65a; }
.bar.orange { background: #f29a45; }
.bar.red { background: #e8573f; color: #fff; }

#toasts { position: absolute; left: calc(14px + var(--l)); bottom: 120px; display: flex; flex-direction: column; gap: 6px; max-width: 46vw; }
.toast { background: rgba(0, 0, 0, 0.6); padding: 6px 10px; border-radius: 8px; font-size: 13px; animation: fade 3.6s forwards; }
@keyframes fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
#prompt { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); font-size: 14px; background: rgba(0,0,0,0.55); padding: 5px 12px; border-radius: 8px; opacity: 0; transition: opacity 0.15s; white-space: nowrap; }
#prompt.on { opacity: 1; }

#stick { position: absolute; width: 112px; height: 112px; margin: -56px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); display: none; }
#stick.on { display: block; }
#knob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px; border-radius: 50%; background: rgba(255,255,255,0.3); }
#buttons { position: absolute; right: calc(18px + var(--r)); bottom: 18px; display: grid; grid-template-columns: auto auto; grid-template-areas: '. pulse' 'use aim' 'fire jump'; gap: 12px; align-items: end; justify-items: end; }
#buttons button { border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.38); font-weight: 700; }
#btnJump { grid-area: jump; width: 76px; height: 76px; font-size: 24px; }
#btnFire { grid-area: fire; width: 86px; height: 86px; font-size: 16px; background: rgba(160, 40, 30, 0.45) !important; }
#btnAim { grid-area: aim; width: 58px; height: 58px; font-size: 13px; }
#btnUse { grid-area: use; width: 66px; height: 66px; font-size: 14px; background: rgba(185, 140, 255, 0.4) !important; border-color: var(--portal) !important; }
body:not(.touch) #buttons, body:not(.touch) #stick, body:not(.touch) #touch { display: none; }

#flash { position: absolute; inset: 0; background: #fff3d0; opacity: 0; }
#hurt { position: absolute; inset: 0; box-shadow: inset 0 0 120px 40px rgba(200, 20, 10, 0.7); opacity: 0; transition: opacity 0.4s; }
/* The scope paints over the view, never over the thumbs' buttons (on the phone they went black under it: Fire and Aim
   could not be seen while aiming). */
#buttons, #stick, #top { z-index: 1; }
#scope { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 50%, transparent 0 32vh, #000 32.4vh); }
#scope::before { content: ''; position: absolute; left: 50%; top: 18vh; bottom: 18vh; width: 1px; background: #000; }
#scope::after { content: ''; position: absolute; top: 50%; left: calc(50% - 32vh); width: 64vh; height: 1px; background: #000; }

#panel { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 12px calc(12px + var(--r)) 12px calc(12px + var(--l)); touch-action: auto; }
#panel[hidden] { display: none; }
#card { background: var(--card); border: 1px solid var(--edge); border-radius: 16px; width: min(640px, 100%); max-height: 100%; overflow: auto; padding: 18px 20px; -webkit-overflow-scrolling: touch; touch-action: pan-y; -webkit-user-select: text; user-select: text; }
#card h2 { margin: 0 0 4px; font-size: 21px; }
#card .kind { display: inline-block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--portal); margin-bottom: 6px; }
#card p { margin: 8px 0; line-height: 1.45; color: var(--ink); }
#card p.dim, .small { color: var(--dim); font-size: 13px; }
#card .ask { border-left: 3px solid var(--portal); padding-left: 10px; font-weight: 600; }
#card textarea { width: 100%; min-height: 96px; border-radius: 10px; border: 1px solid var(--edge); background: rgba(255,255,255,0.06); color: var(--ink); font: inherit; font-size: 16px; padding: 10px; resize: vertical; }
#card .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
#card .row button, .start-card button { border: 1px solid var(--edge); background: rgba(255,255,255,0.08); border-radius: 10px; padding: 10px 14px; min-height: 44px; }
#card .row button.go, .start-card button { background: var(--portal); color: #160d24; border: 0; font-weight: 700; }
#card .row button:disabled { opacity: 0.4; }
#card .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
#card .trophy { border: 1px solid var(--edge); border-radius: 10px; padding: 10px; background: rgba(255,255,255,0.04); }
#card .trophy b { color: var(--accent); }
#card .trophy small { display: block; color: var(--dim); margin-top: 4px; }
#card .recipe { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--edge); }
#card .menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
#card .menu button { border: 1px solid var(--edge); background: rgba(255,255,255,0.07); border-radius: 12px; padding: 14px; min-height: 52px; font-weight: 600; }
#card ul { padding-left: 18px; margin: 8px 0; }
#card li { margin: 5px 0; }

#start { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, #2a1f3c, #000 70%); padding: 16px; }
#start[hidden] { display: none; }
.start-card { text-align: center; max-width: 560px; }
.start-card h1 { font-size: 46px; margin: 0 0 6px; letter-spacing: 0.04em; }
.start-card p { color: var(--dim); line-height: 1.45; }
.start-card button { font-size: 18px; padding: 14px 26px; }
.start-card button:disabled { opacity: 0.5; }

#rotate { position: fixed; inset: 0; background: #000; display: none; align-items: center; justify-content: center; text-align: center; font-size: 20px; padding: 30px; z-index: 10; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }

/* A phone on its side: about 390 px tall, and less with the keyboard up. Everything in a panel has to fit. */
@media (max-height: 520px) {
  #card { padding: 12px 16px; border-radius: 12px; }
  #card h2 { font-size: 17px; }
  #card p { font-size: 14px; line-height: 1.35; margin: 5px 0; }
  #card p.dim { font-size: 12px; }
  #card textarea { min-height: 58px; font-size: 16px; padding: 8px; }
  #card .row { margin-top: 8px; }
  #card .menu { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  #card .menu button { padding: 8px; min-height: 42px; font-size: 14px; }
  #card ul { margin: 4px 0; }
  #card li { margin: 2px 0; font-size: 14px; }
  #hotbar button { width: 42px; height: 42px; }
  #hotbar button b { font-size: 13px; }
  #menuBtn { width: 42px; height: 42px; }
  #compass { top: 54px; height: 30px; }
  #warn { top: 90px; }
  #ammo { bottom: 10px; font-size: 13px; }
  #card .ammo-row { padding: 5px 8px; }
  #card .ammo-row .small { font-size: 11px; }
}

/* The pulse (round 7): a round button above Jump on the phone, a small dial on the desktop. --p is how far it has
   recharged (0–1), --c how far the hold has charged it; .ready when it can go. */
#btnPulse { grid-area: pulse; width: 58px; height: 58px; font-size: 12px; position: relative; overflow: hidden;
  background: conic-gradient(rgba(134, 172, 223, 0.55) calc(var(--p, 1) * 360deg), rgba(0, 0, 0, 0.38) 0) !important; }
#btnPulse.ready { border-color: #86acdf !important; box-shadow: 0 0 calc(4px + var(--c, 0) * 22px) rgba(134, 172, 223, calc(0.3 + var(--c, 0) * 0.7)); }
#btnPulse span { position: relative; }
#pulseDial { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font: 700 11px/1 ui-monospace, Menlo, monospace; color: #fff; text-shadow: 0 1px 2px #000;
  border: 2px solid rgba(255, 255, 255, 0.3); pointer-events: none;
  background: conic-gradient(rgba(134, 172, 223, 0.55) calc(var(--p, 1) * 360deg), rgba(0, 0, 0, 0.35) 0); }
#pulseDial.ready { border-color: #86acdf; box-shadow: 0 0 calc(4px + var(--c, 0) * 22px) rgba(134, 172, 223, calc(0.3 + var(--c, 0) * 0.7)); }
body.touch #pulseDial { display: none; }
/* The ring going out across the view. */
#pulseRing { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 3px solid rgba(160, 196, 240, 0.9); box-shadow: 0 0 24px rgba(134, 172, 223, 0.8), inset 0 0 24px rgba(134, 172, 223, 0.5);
  pointer-events: none; opacity: 0; }
#pulseRing.go { animation: pulse-ring 1.1s ease-out; }
@keyframes pulse-ring { from { transform: scale(0.2); opacity: 0.9; } to { transform: scale(40); opacity: 0; } }
.mk.pin i { transform: none; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: #fff; border: 2px solid #86acdf; box-shadow: 0 0 6px #86acdf; }

/* DIG-007: what they carved, the record, where these come from */
#card p.carved { white-space: pre-line; line-height: 1.55; }
#card .rec-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: min(52vh, 440px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-right: 4px; }
#card .rec-row { text-align: left; border: 1px solid var(--edge); background: rgba(255,255,255,0.05); border-radius: 10px; padding: 8px 10px; }
#card .sources { max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-right: 4px; }
#card .sources h2, #card .sources h3, #card .sources h4 { margin: 12px 0 6px; }
#card .sources li { margin: 4px 0; }