/* In-game HUD, chat and debug overlay. */
#hud { position: fixed; inset: 0; overflow: hidden; }
#hud.nohud > :not(.underwater):not(.fire-overlay):not(.damage-flash) { display: none; }
.crosshair { position: absolute; left: 50%; top: 50%; width: calc(var(--s) * 9); height: calc(var(--s) * 9); transform: translate(-50%, -50%); mix-blend-mode: difference; }
.crosshair::before, .crosshair::after { content: ''; position: absolute; background: #fff; }
.crosshair::before { left: 50%; top: 0; width: var(--s); height: 100%; transform: translateX(-50%); }
.crosshair::after { top: 50%; left: 0; height: var(--s); width: 100%; transform: translateY(-50%); }

.bottom { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: calc(var(--s) * 182); display: flex; flex-direction: column; align-items: stretch; }
.item-name { text-align: center; min-height: calc(var(--s) * 12); margin-bottom: calc(var(--s) * 4); text-shadow: var(--s) var(--s) 0 var(--text-shadow); transition: opacity 0.2s; }
.stats { display: flex; flex-direction: column-reverse; gap: calc(var(--s) * 1); margin-bottom: calc(var(--s) * 2); }
.stat-row { display: flex; justify-content: space-between; }
.hearts, .food, .air { display: flex; height: calc(var(--s) * 9); }
.food, .air { flex-direction: row-reverse; }
.icon9 { width: calc(var(--s) * 8); height: calc(var(--s) * 9); background-size: calc(var(--s) * 9) calc(var(--s) * 9); background-repeat: no-repeat; image-rendering: pixelated; }
.icon9:first-child { width: calc(var(--s) * 9); }
.icon9.blink { filter: brightness(1.8); }

.hotbar {
  position: relative; display: flex; height: calc(var(--s) * 22); padding: calc(var(--s) * 1);
  background: rgba(20, 20, 20, 0.55); border: var(--s) solid #0c0c0c; box-shadow: inset 0 0 0 var(--s) #6e6e6e;
}
.hslot { position: relative; width: calc(var(--s) * 20); height: calc(var(--s) * 20); display: flex; align-items: center; justify-content: center; }
.hslot + .hslot { box-shadow: inset var(--s) 0 0 rgba(110, 110, 110, 0.5); }
.hslot { pointer-events: auto; cursor: pointer; }
.screen-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 50; transition: opacity 3s ease-in; }
.selector { position: absolute; left: calc(var(--s) * -2); top: calc(var(--s) * -2); width: calc(var(--s) * 24); height: calc(var(--s) * 24); border: calc(var(--s) * 2) solid #fff; outline: var(--s) solid #000; box-shadow: inset 0 0 0 var(--s) #000; pointer-events: none; transition: transform 0.05s; }

/* shared slot contents (hotbar + inventory) */
.icon { width: calc(var(--s) * 16); height: calc(var(--s) * 16); pointer-events: none; }
.icon.flat { image-rendering: pixelated; }
.count { position: absolute; right: 0; bottom: calc(var(--s) * -1); font-size: calc(var(--s) * 8); text-shadow: var(--s) var(--s) 0 var(--text-shadow); pointer-events: none; line-height: 1; }
.hslot .count { right: calc(var(--s) * 1); bottom: 0; }
.dura { position: absolute; left: calc(var(--s) * 2); right: calc(var(--s) * 2); bottom: calc(var(--s) * 2); height: calc(var(--s) * 2); background: #000; }
.dura > div { height: 50%; }

.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.35)); }
.damage-flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(200, 0, 0, 0.55)); }
.damage-flash.on { animation: dmg 0.5s ease-out; }
@keyframes dmg { from { opacity: 1; } to { opacity: 0; } }
.underwater { position: absolute; inset: 0; background: rgba(30, 60, 160, 0.18); opacity: 0; transition: opacity 0.2s; }
.underwater.on { opacity: 1; }
.fire-overlay { position: absolute; inset: 0; opacity: 0; background: linear-gradient(transparent 55%, rgba(255, 120, 0, 0.45) 85%, rgba(255, 210, 60, 0.7)); }
.fire-overlay.on { opacity: 1; animation: flicker 0.15s steps(2) infinite; }
@keyframes flicker { to { filter: brightness(1.2) hue-rotate(-8deg); } }

/* ---------- chat ---------- */
#chat { position: fixed; left: calc(var(--s) * 2 + env(safe-area-inset-left)); top: calc(var(--s) * 2 + env(safe-area-inset-top)); width: min(calc(var(--s) * 170), 60vw); pointer-events: none; }
#chat .chat-log { max-height: 35vh; }
.chat-log { max-height: 40vh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
#chat.open .chat-log { overflow-y: auto; pointer-events: auto; }
.chat-line { padding: 0 calc(var(--s) * 2); background: rgba(0, 0, 0, 0.45); text-shadow: var(--s) var(--s) 0 var(--text-shadow); white-space: pre-wrap; word-break: break-word; line-height: calc(var(--s) * 9); }
.chat-time { display: none; margin-right: calc(var(--s) * 3); color: #8a8a8a; font-size: 0.85em; }
.chat-name { margin-right: calc(var(--s) * 3); font-weight: 600; }
.chat-name::after { content: ':'; }
.chat-head { display: none; align-items: center; padding: calc(var(--s) * 1) calc(var(--s) * 2); color: #fff; text-shadow: var(--s) var(--s) 0 var(--text-shadow); }
.chat-count { color: #9a9a9a; font-size: 0.85em; }
/* open: a readable panel with the full scrollable history */
#chat.open { background: rgba(10, 10, 14, 0.82); border: var(--s) solid rgba(255, 255, 255, 0.18); padding: calc(var(--s) * 2); }
#chat.open .chat-head { display: flex; }
#chat.open .chat-line { background: none; padding: calc(var(--s) * 0.5) calc(var(--s) * 2); }
#chat.open .chat-line:nth-child(odd) { background: rgba(255, 255, 255, 0.04); }
#chat.open .chat-time { display: inline; }
#chat.open .chat-log { justify-content: flex-start; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#chat.open .chat-log:empty::before { content: 'No messages yet. Say hi!'; color: #888; padding: calc(var(--s) * 2); }
.chat-bar { display: none; gap: calc(var(--s) * 2); margin-top: calc(var(--s) * 2); pointer-events: auto; }
#chat.open .chat-bar { display: flex; }
.chat-input { flex: 1; min-width: 0; height: calc(var(--s) * 12); padding: 0 calc(var(--s) * 2); font: inherit; color: #fff; background: rgba(0, 0, 0, 0.6); border: none; outline: none;
  -webkit-user-select: text; user-select: text; touch-action: manipulation; }
.chat-input::placeholder { color: #888; }
.chat-btn { font: inherit; padding: 0 calc(var(--s) * 5); color: #fff; background: rgba(60, 60, 60, 0.85); border: var(--s) solid #000; cursor: pointer; touch-action: manipulation; }
.chat-btn:hover { background: #7e8bd0; }
html:not(.touch) .chat-btn.close { display: none; }
html.touch #chat.open { width: min(calc(100vw - 24px), 640px); }
html.touch .chat-line { line-height: 1.45; font-size: 14px; }
html.debug-open #chat { top: 50vh; } /* keep clear of the F3 overlay */
html.touch .chat-input { height: 40px; font-size: 16px; } /* 16px stops iOS zooming into the field */
html.touch .chat-btn { min-width: 44px; height: 40px; font-size: 15px; }
.chat-head .chat-btn { margin-left: auto; }
.chat-count { margin-left: calc(var(--s) * 4); }
html:not(.touch) .chat-head .chat-btn { padding: 0 calc(var(--s) * 3); height: calc(var(--s) * 11); }
html.touch #chat.open .chat-log { max-height: calc(100vh - 150px); } /* keyboard hidden: tall history view */
/* keyboard up: full-width strip above it, header hidden, log flexes, text box sits on the keyboard */
html.touch #chat.open.kb { display: flex; flex-direction: column; width: auto; left: calc(env(safe-area-inset-left) + 6px); right: calc(env(safe-area-inset-right) + 6px); padding: 4px; }
#chat.kb .chat-head { display: none; }
#chat.kb .chat-log { flex: 1; min-height: 0; max-height: none !important; }
#chat.kb .chat-bar { margin-top: 4px; }
#chat.kb .chat-line { font-size: 13px; line-height: 1.3; }
#chat.kb .chat-time { display: none; }

/* ---------- debug ---------- */
#debug { position: fixed; inset: 0; display: flex; justify-content: space-between; padding: calc(var(--s) * 1); font-size: calc(var(--s) * 7); line-height: calc(var(--s) * 9); white-space: pre; pointer-events: none; }
#debug > div { align-self: flex-start; }
.dbg-left, .dbg-right { background: rgba(80, 80, 80, 0.45); padding: calc(var(--s) * 1) calc(var(--s) * 2); text-shadow: var(--s) var(--s) 0 var(--text-shadow); }
.dbg-right { text-align: right; max-width: 45vw; white-space: pre-wrap; }

/* Cybertruck speedometer (src/mods/cybertruck.js) */
.speedo { position: absolute; right: calc(var(--s) * 8); bottom: calc(var(--s) * 8); min-width: calc(var(--s) * 48); padding: calc(var(--s) * 3) calc(var(--s) * 5); background: rgba(12, 14, 16, 0.6); border: var(--s) solid rgba(200, 205, 212, 0.5); text-align: right; line-height: 1.1; text-shadow: var(--s) var(--s) 0 var(--text-shadow); pointer-events: none; }
.speedo.hidden { display: none; }
.speedo b { font-size: calc(var(--s) * 16); font-weight: normal; }
.speedo span { font-size: calc(var(--s) * 7); margin-left: calc(var(--s) * 2); opacity: 0.8; }
.speedo i { display: block; font-style: normal; font-size: calc(var(--s) * 7); color: #9fb7d9; }