* { margin: 0; padding: 0; box-sizing: border-box; text-transform: inherit; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0d0c07;
  font-family: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  text-transform: lowercase;
  color: #e8dfa8;
  /* overflow: hidden alone does not stop iOS rubber-banding the whole page */
  overscroll-behavior: none;
  touch-action: none;
  -webkit-text-size-adjust: 100%;
}

body {
  position: fixed;
  inset: 0;
}

/* Panels that scroll have to opt back in — the blanket touch-action above
   would otherwise leave the help text and the chat log unreadable on a
   phone, which is exactly where they matter most. */
#help,
#overlay,
#chat-messages,
#inventory-list,
#lb-list {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

#screen {
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;   /* excludes mobile browser chrome; ignored where unsupported */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

#hud {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  left: calc(10px + env(safe-area-inset-left));
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: calc(100vw - 70px);   /* never run under the help button */
}

#coords {
  font-size: 13px;
  text-shadow: 1px 1px 0 #000;
  background: rgba(0, 0, 0, 0.35);
  padding: 4px 8px;
  border: 1px solid rgba(232, 223, 168, 0.3);
  width: fit-content;
}

#level-name {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #f2e37a;
  text-shadow: 2px 2px 0 #000;
  background: rgba(0, 0, 0, 0.45);
  padding: 5px 10px;
  border-left: 3px solid #f2e37a;
  width: fit-content;
}

#fragments {
  font-size: 14px;
  letter-spacing: 1px;
  color: #ffe08a;
  text-shadow: 1px 1px 0 #000;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
  border: 1px solid rgba(255, 224, 138, 0.35);
  width: fit-content;
}

#fragments.ready {
  color: #1a1806;
  background: #ffe08a;
  border-color: #fff6cc;
  animation: pulse 1.1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* health */
#health {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.4);
  padding: 5px 10px;
  border: 1px solid rgba(232, 223, 168, 0.3);
  width: fit-content;
}

#health-bar {
  width: 130px;
  height: 10px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(232, 223, 168, 0.35);
}

#health-fill {
  height: 100%;
  width: 100%;
  background: #7ad46b;
  transition: width 0.18s linear, background 0.25s;
}

#health-fill.warn { background: #e0c04a; }
#health-fill.crit {
  background: #e04a4a;
  animation: pulse 0.65s ease-in-out infinite;
}

#health-num {
  font-size: 12px;
  letter-spacing: 1px;
  min-width: 30px;
}

#stamina {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
  border: 1px solid rgba(232, 223, 168, 0.3);
  width: fit-content;
}

#stamina-bar {
  width: 130px;
  height: 6px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(232, 223, 168, 0.3);
}

#stamina-fill {
  height: 100%;
  width: 100%;
  background: #6fb0e0;
  transition: width 0.1s linear, background 0.2s;
}

/* spent: you cannot start another sprint until it recovers */
#stamina-fill.spent { background: #8a5a5a; }

#stamina-label {
  font-size: 10px;
  letter-spacing: 2px;
  opacity: 0.45;
}

#stamina.active #stamina-label { opacity: 0.95; color: #9fd0f0; }

/* help */
#help-btn {
  position: fixed;
  /* clear of the notch and of Safari's own top chrome */
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  z-index: 15;
  width: 44px;
  height: 44px;
  font-family: inherit;
  font-size: 18px;
  font-weight: bold;
  color: #e8dfa8;
  background: rgba(0, 0, 0, 0.5);
  border: 1px dashed rgba(232, 223, 168, 0.4);
  cursor: pointer;
  transition: background 0.15s;
}

/* Hover feedback is for pointers that can actually hover. On a touchscreen
   the state sticks after a tap and the control looks permanently pressed —
   :active is the equivalent there. */
@media (hover: hover) and (pointer: fine) {
  #help-btn:hover {
    background: rgba(232, 223, 168, 0.08);
    color: #e8dfa8;
  }
}

#help-btn:active {
  background: rgba(232, 223, 168, 0.16);
}

#help {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 3, 0.9);
  overflow-y: auto;
  padding: clamp(10px, 3vw, 24px);
  /* keep the BACK button clear of the home indicator */
  padding-bottom: calc(clamp(10px, 3vw, 24px) + env(safe-area-inset-bottom));
}

#help.hidden { display: none; }

.help-panel {
  max-width: 640px;
  width: 100%;
  border: 1px solid rgba(232, 223, 168, 0.35);
  background: #14130a;
  padding: clamp(14px, 4vw, 30px);
}

.help-panel h2 {
  font-size: 26px;
  letter-spacing: 5px;
  color: #f2e37a;
  margin-bottom: 6px;
}

.help-panel h3 {
  font-size: 14px;
  letter-spacing: 2px;
  color: #f2e37a;
  margin: 20px 0 7px;
  border-bottom: 1px solid rgba(232, 223, 168, 0.2);
  padding-bottom: 4px;
}

.help-panel p { font-size: 13px; line-height: 1.6; opacity: 0.88; }
.help-panel b { color: #ffe08a; }

.help-panel table { width: 100%; border-collapse: collapse; font-size: 13px; }
.help-panel td { padding: 5px 10px 5px 0; vertical-align: top; line-height: 1.5; }
.help-panel td:first-child { white-space: nowrap; width: 1%; opacity: 0.95; }
.help-panel td:last-child { opacity: 0.82; }

.help-panel kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid rgba(232, 223, 168, 0.4);
  background: rgba(0, 0, 0, 0.4);
  font-size: 12px;
}

.c-harm { color: #b3a6d9; }
.c-chase { color: #ff8a5c; }
.c-term { color: #5cf0a8; }
.c-watch { color: #c98fd0; }

#help-close {
  margin-top: 24px;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 3px;
  padding: 10px 26px;
  min-height: 44px;
  background: transparent;
  color: #f2e37a;
  border: 1px dashed rgba(242, 227, 122, 0.55);
  cursor: pointer;
  font-weight: bold;
  transition: background 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  #help-close:hover {
    background: rgba(242, 227, 122, 0.08);
  }
}

#help-close:active {
  background: rgba(242, 227, 122, 0.16);
}

#enter-btn.secondary, .panel button.secondary {
  display: block;
  margin: 12px auto 0;
  background: transparent;
  color: #e8dfa8;
  border: 1px dashed rgba(232, 223, 168, 0.4);
  font-size: 13px;
  letter-spacing: 2px;
  padding: 9px 22px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .panel button.secondary:hover {
    background: rgba(232, 223, 168, 0.08);
  }
}

.panel button.secondary:active {
  background: rgba(232, 223, 168, 0.16);
}

/* blackout */
#blackout {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

#blackout.on { opacity: 1; }

#blackout span {
  font-size: 15px;
  letter-spacing: 4px;
  opacity: 0.7;
}

/* level transition card */
#descend {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 20;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

#descend.hidden { opacity: 0; }

.descend-inner { text-align: center; }

#descend-level {
  font-size: clamp(22px, 7vw, 40px);
  font-weight: bold;
  letter-spacing: clamp(2px, 1.2vw, 7px);
  color: #f2e37a;
  text-shadow: 3px 3px 0 #000;
}

#descend-tag {
  margin-top: 14px;
  font-size: 15px;
  font-style: italic;
  opacity: 0.7;
}

#minimap {
  border: 1px solid rgba(232, 223, 168, 0.3);
  background: rgba(0, 0, 0, 0.5);
  /* The HUD column stretches this 120x120 canvas to whatever its widest
     sibling is, so it is always being scaled. Match the rest of the game and
     let it scale crisply rather than smoothing it. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #030303;
  z-index: 10;
  /* the panel can outgrow a phone in landscape, so let it scroll */
  overflow-y: auto;
}

#overlay.hidden { display: none; }

#febu-ascii {
  display: inline-block;
  text-align: left;
  font-size: 22px;
  line-height: 1.3;
  color: #f2e37a;
  opacity: 0.6;
  margin: 0 0 40px;
  padding: 0;
  white-space: pre;
  letter-spacing: 2px;
}

@media (max-height: 580px) {
  #febu-ascii { font-size: 9px; line-height: 1.15; margin-bottom: 12px; }
}

@media (max-height: 420px) {
  #febu-ascii { display: none; }
}

.panel {
  text-align: center;
  padding: clamp(16px, 5vw, 40px);
  position: relative;
  z-index: 1;
  max-width: 100%;
}

.panel h1 {
  font-size: clamp(18px, 5.5vw, 28px);
  letter-spacing: clamp(2px, 1.6vw, 12px);
  color: #f2e37a;
  opacity: 0.7;
  margin-bottom: 8px;
  font-weight: normal;
}

.panel .tag {
  font-size: 13px;
  opacity: 0.3;
  margin-bottom: 50px;
  font-style: italic;
}

#enter-btn {
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 4px;
  padding: 12px 30px;
  min-height: 44px;
  background: transparent;
  color: #f2e37a;
  border: 1px dashed rgba(242, 227, 122, 0.25);
  cursor: pointer;
  font-weight: normal;
  transition: background 0.15s, border-color 0.15s;
}

#continue-btn {
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 2px;
  padding: 11px 26px;
  min-height: 44px;
  margin-bottom: 12px;
  background: transparent;
  color: #7ad46b;
  border: 1px dashed rgba(122, 212, 107, 0.55);
  cursor: pointer;
  font-weight: bold;
  display: block;
  width: 100%;
  transition: background 0.15s;
}

#continue-btn.hidden { display: none; }

@media (hover: hover) and (pointer: fine) {
  #continue-btn:hover {
    background: rgba(122, 212, 107, 0.08);
  }

  #enter-btn:hover {
    background: rgba(242, 227, 122, 0.08);
  }
}

#continue-btn:active {
  background: rgba(122, 212, 107, 0.18);
}

#enter-btn:active {
  background: rgba(242, 227, 122, 0.18);
}

.panel .hint {
  margin-top: 22px;
  font-size: 12px;
  opacity: 0.5;
}

.panel .hint.warn {
  margin-top: 8px;
  color: #f2b53a;
  opacity: 0.35;
}

#chat {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(3, 3, 3, 0.7);
  padding: 24px;
}

#chat.hidden { display: none; }

.chat-panel {
  max-width: 480px;
  width: 100%;
  border: 1px dashed rgba(92, 240, 168, 0.35);
  background: rgba(10, 18, 14, 0.95);
  padding: 16px 20px;
  margin-bottom: 40px;
}

.chat-header {
  font-size: 13px;
  letter-spacing: 3px;
  color: #5cf0a8;
  opacity: 0.7;
  margin-bottom: 12px;
  border-bottom: 1px dashed rgba(92, 240, 168, 0.2);
  padding-bottom: 8px;
}

#chat-messages {
  /* shrinks with the viewport once a soft keyboard is taking half the screen */
  max-height: min(220px, 32vh);
  overflow-y: auto;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.6;
}

#chat-messages::-webkit-scrollbar { width: 4px; }
#chat-messages::-webkit-scrollbar-track { background: transparent; }
#chat-messages::-webkit-scrollbar-thumb { background: rgba(92, 240, 168, 0.2); }

.chat-msg {
  margin-bottom: 8px;
  padding: 4px 0;
}

.chat-msg.user {
  color: #e8dfa8;
  opacity: 0.8;
}

.chat-msg.user::before {
  content: '> ';
  opacity: 0.4;
}

.chat-msg.keeper {
  color: #5cf0a8;
  opacity: 0.9;
}

#chat-form {
  display: flex;
}

#chat-input {
  width: 100%;
  font-family: inherit;
  /* Must stay >= 16px: below that iOS Safari zooms the page on focus, and
     with a fixed, unscalable viewport there is no way for the player to zoom
     back out — it soft-locks the game behind the keyboard. */
  font-size: 16px;
  min-height: 44px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.5);
  color: #e8dfa8;
  border: 1px dashed rgba(232, 223, 168, 0.3);
  outline: none;
}

#chat-input:focus {
  border-color: rgba(92, 240, 168, 0.5);
}

#chat-input::placeholder {
  color: rgba(232, 223, 168, 0.3);
}

.chat-hint {
  font-size: 11px;
  opacity: 0.3;
  margin-top: 8px;
  text-align: right;
}

/* ---------------------------------------------------------------------------
   Narrow screens.
   Keyed on width rather than on touch, so a narrow desktop window gets the
   same treatment. Everything above uses clamp() where a value only needed to
   shrink; what is left here are the things that need a real decision — what
   to drop, and what to shrink past what clamp() could express.
   --------------------------------------------------------------------------- */
@media (max-width: 520px) {
  /* The HUD column was ~170px of a 375px screen. */
  #health-bar,
  #stamina-bar { width: 84px; }

  #level-name { font-size: 12px; padding: 4px 8px; letter-spacing: 1px; }
  #fragments  { font-size: 11px; padding: 3px 8px; letter-spacing: 0; }
  #health,
  #stamina    { padding: 4px 8px; gap: 6px; }
  #health-num { font-size: 11px; min-width: 24px; }

  /* An x/y/fps debug readout is the least useful thing competing for a phone
     screen, and the most likely to wrap. */
  #coords { display: none; }

  /* Scaled down in CSS only: the canvas keeps its 120x120 backing store, which
     hud.js and the minimap test both depend on. */
  #minimap {
    width: 84px;
    height: 84px;
  }

  #hud { gap: 5px; }

  .chat-panel { margin-bottom: 12px; }
  .help-panel h2 { font-size: 20px; letter-spacing: 3px; }
  .help-panel td { padding: 4px 6px 4px 0; }
  .help-panel td:first-child { white-space: normal; }
}

/* ---------------------------------------------------------------------------
   Touch controls.
   Present in the markup on every device but never shown until touch.js adds
   .touch to the body, so a desktop session cannot be affected by any of this.
   --------------------------------------------------------------------------- */
#topbtns {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  z-index: 15;
  display: flex;
  gap: 8px;
  /* the container must not eat taps meant for the look-drag behind it */
  pointer-events: none;
}

#topbtns > button { pointer-events: auto; }

/* #help-btn positions itself; inside the cluster the flex row places it. */
#help-btn {
  position: static;
}

#mute-btn {
  width: 44px;
  height: 44px;
  font-family: inherit;
  font-size: 17px;
  color: #e8dfa8;
  background: rgba(0, 0, 0, 0.5);
  border: 1px dashed rgba(232, 223, 168, 0.4);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  /* only shown on touch: on desktop M is right there and the row is cleaner */
  display: none;
}

body.touch #mute-btn { display: block; }

/* Without the muscle memory of pressing M, the button has to show its state. */
#mute-btn.muted {
  opacity: 0.45;
  text-decoration: line-through;
}

@media (hover: hover) and (pointer: fine) {
  #mute-btn:hover { background: rgba(232, 223, 168, 0.08); }
}

#mute-btn:active { background: rgba(232, 223, 168, 0.16); }

#touch {
  position: fixed;
  inset: 0;
  /* above the HUD, below every modal — so a panel covers the controls even if
     the visibility toggle ever failed */
  z-index: 16;
  pointer-events: none;
  display: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

body.touch #touch { display: block; }
#touch.hidden { display: none !important; }

#tc-stick {
  position: absolute;
  left: calc(22px + env(safe-area-inset-left));
  bottom: calc(26px + env(safe-area-inset-bottom));
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 1px dashed rgba(232, 223, 168, 0.35);
  background: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  touch-action: none;
}

#tc-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(232, 223, 168, 0.5);
  background: rgba(232, 223, 168, 0.14);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.tc-btn {
  position: absolute;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 2px;
  color: #e8dfa8;
  background: rgba(0, 0, 0, 0.45);
  border: 1px dashed rgba(232, 223, 168, 0.4);
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#tc-sprint {
  right: calc(26px + env(safe-area-inset-right));
  bottom: calc(40px + env(safe-area-inset-bottom));
  width: 68px;
  height: 68px;
}

#tc-sprint:active {
  background: rgba(111, 176, 224, 0.28);
  border-color: rgba(159, 208, 240, 0.8);
}

#tc-talk {
  right: calc(30px + env(safe-area-inset-right));
  bottom: calc(126px + env(safe-area-inset-bottom));
  width: 60px;
  height: 60px;
  color: #5cf0a8;
  border-color: rgba(92, 240, 168, 0.55);
}

#tc-talk.hidden { display: none; }
#tc-talk:active { background: rgba(92, 240, 168, 0.22); }

/* Chat header carries the close button now. */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#chat-close {
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  width: 34px;
  height: 34px;
  color: #5cf0a8;
  background: transparent;
  border: 1px dashed rgba(92, 240, 168, 0.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.touch #chat-close { width: 44px; height: 44px; }

@media (hover: hover) and (pointer: fine) {
  #chat-close:hover { background: rgba(92, 240, 168, 0.12); }
}

#chat-close:active { background: rgba(92, 240, 168, 0.22); }

/* Show whichever half of the controls table applies. */
.touch-only { display: none; }
body.touch .touch-only { display: table-row-group; }
body.touch .kb-only { display: none; }

/* ---------------------------------------------------------------------------
   Loot: HUD readout, inventory panel, open button.
   All optional — the elements start hidden and only JS reveals them once the
   server confirms loot is live.
   --------------------------------------------------------------------------- */
#loot {
  font-size: 14px;
  letter-spacing: 1px;
  color: #ffd479;
  text-shadow: 1px 1px 0 #000;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
  border: 1px solid rgba(255, 179, 71, 0.4);
  width: fit-content;
}

#loot.hidden { display: none; }

#loot-btn {
  width: 44px;
  height: 44px;
  font-family: inherit;
  font-size: 18px;
  color: #ffd479;
  background: rgba(0, 0, 0, 0.5);
  border: 1px dashed rgba(255, 179, 71, 0.45);
  cursor: pointer;
  transition: background 0.15s;
}

#loot-btn.hidden { display: none; }

@media (hover: hover) and (pointer: fine) {
  #loot-btn:hover { background: rgba(255, 179, 71, 0.1); }
}

#loot-btn:active { background: rgba(255, 179, 71, 0.18); }

#inventory {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(3, 3, 3, 0.7);
  padding: 24px;
}

#inventory.hidden { display: none; }

.inv-panel {
  max-width: 480px;
  width: 100%;
  border: 1px dashed rgba(255, 179, 71, 0.4);
  background: rgba(18, 14, 6, 0.96);
  padding: 16px 20px;
  margin-bottom: 40px;
}

.inv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: 3px;
  color: #ffd479;
  opacity: 0.85;
  border-bottom: 1px dashed rgba(255, 179, 71, 0.25);
  padding-bottom: 8px;
  margin-bottom: 10px;
}

#inv-close {
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  width: 34px;
  height: 34px;
  color: #ffd479;
  background: transparent;
  border: 1px dashed rgba(255, 179, 71, 0.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.touch #inv-close { width: 44px; height: 44px; }

@media (hover: hover) and (pointer: fine) {
  #inv-close:hover { background: rgba(255, 179, 71, 0.12); }
}

#inv-close:active { background: rgba(255, 179, 71, 0.22); }

#inv-total {
  font-size: 13px;
  color: #ffe0a8;
  opacity: 0.9;
  margin-bottom: 10px;
}

#inventory-list {
  max-height: min(300px, 42vh);
  overflow-y: auto;
  margin-bottom: 12px;
}

#inventory-list.offline { opacity: 0.4; }

.inv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 179, 71, 0.08);
}

.inv-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.inv-tier { flex: 1; letter-spacing: 1px; opacity: 0.9; }
.inv-val { color: #ffe0a8; font-weight: bold; }

.inv-recovery {
  border-top: 1px dashed rgba(255, 179, 71, 0.2);
  padding-top: 10px;
}

.inv-recovery-label {
  font-size: 11px;
  opacity: 0.5;
  margin-bottom: 6px;
}

#inv-code,
#inv-restore {
  width: 100%;
  font-family: inherit;
  /* >= 16px or iOS zooms the page on focus and cannot zoom back out */
  font-size: 16px;
  min-height: 44px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.5);
  color: #e8dfa8;
  border: 1px dashed rgba(255, 179, 71, 0.3);
  outline: none;
  margin-bottom: 8px;
}

#inv-code { opacity: 0.7; }

#inv-restore:focus { border-color: rgba(255, 179, 71, 0.6); }

@media (max-width: 520px) {
  #loot { font-size: 11px; padding: 3px 8px; letter-spacing: 0; }
}

/* --- Wallet field + leaderboard --- */
.inv-wallet {
  border-top: 1px dashed rgba(255, 179, 71, 0.2);
  padding-top: 10px;
  margin-top: 6px;
}

.inv-wallet-label {
  font-size: 11px;
  opacity: 0.6;
  margin-bottom: 6px;
  color: #ffe0a8;
}

#inv-wallet-form { display: flex; gap: 8px; }

#inv-wallet-input {
  flex: 1;
  font-family: inherit;
  font-size: 16px;   /* >=16px: no iOS focus-zoom */
  min-height: 44px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.5);
  color: #e8dfa8;
  border: 1px dashed rgba(255, 179, 71, 0.35);
  outline: none;
}

#inv-wallet-input:focus { border-color: rgba(255, 179, 71, 0.65); }

#inv-wallet-save {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 1px;
  min-height: 44px;
  padding: 0 16px;
  color: #1a1206;
  background: #ffd479;
  border: none;
  cursor: pointer;
}

#inv-wallet-save:active { background: #e0b855; }

#inv-wallet-status {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 6px;
}

#inv-wallet-status.set { color: #7fd8a0; }

#inv-leaderboard-btn {
  display: block;
  width: 100%;
  margin: 12px 0;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 2px;
  min-height: 44px;
  color: #ffd479;
  background: transparent;
  border: 1px dashed rgba(255, 179, 71, 0.4);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  #inv-leaderboard-btn:hover { background: rgba(255, 179, 71, 0.08); }
}

#inv-leaderboard-btn:active { background: rgba(255, 179, 71, 0.16); }

#leaderboard {
  position: fixed;
  inset: 0;
  z-index: 31;   /* above the inventory panel */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 3, 3, 0.8);
  padding: 24px;
}

#leaderboard.hidden { display: none; }

.lb-panel {
  max-width: 420px;
  width: 100%;
  border: 1px dashed rgba(255, 179, 71, 0.45);
  background: rgba(18, 14, 6, 0.98);
  padding: 16px 20px;
}

.lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  letter-spacing: 3px;
  color: #ffd479;
  border-bottom: 1px dashed rgba(255, 179, 71, 0.25);
  padding-bottom: 8px;
  margin-bottom: 10px;
}

#lb-close {
  font-family: inherit;
  font-size: 20px;
  width: 34px;
  height: 34px;
  color: #ffd479;
  background: transparent;
  border: 1px dashed rgba(255, 179, 71, 0.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.touch #lb-close { width: 44px; height: 44px; }

#lb-list {
  max-height: min(360px, 60vh);
  overflow-y: auto;
  font-size: 13px;
}

.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 179, 71, 0.08);
}

.lb-rank { width: 32px; color: #ffd479; font-weight: bold; }
.lb-tag { flex: 1; opacity: 0.85; font-family: ui-monospace, monospace; }
.lb-count { color: #ffe0a8; }