/* ==================== THE LAVA GAME — MOBILE ====================
   Only applies under body.lf-mobile, which mobile.js sets. Desktop is
   completely untouched by this file.

   Approach: rather than reflow the desktop panel onto a phone, hide the
   desktop chrome entirely and give mobile its own small set of controls. The
   Rim is about looking around, so the world gets the screen and the UI stays
   out of the way.
   ========================================================================= */

body.lf-mobile {
  overscroll-behavior: none;                 /* no pull-to-refresh over the canvas */
  -webkit-tap-highlight-color: transparent;  /* no blue flash when tapping tiles */
}

body.lf-mobile #canvas-container {
  touch-action: none;                        /* we handle all gestures ourselves */
}

/* ---------- hide desktop-only chrome ---------- */
body.lf-mobile #codex-shell,
body.lf-mobile #cg-dim,
body.lf-mobile #cg-launcher,
body.lf-mobile #dev-arena,
body.lf-mobile #game-controls,
body.lf-mobile #players-panel,
body.lf-mobile #settings-panel,
body.lf-mobile #social-chat-hint,
body.lf-mobile #move-reminder,
body.lf-mobile #tombstone-tooltip,
body.lf-mobile #player-tooltip,
body.lf-mobile #movement-hud {
  display: none !important;
}

/* Top bar stays but slims down to the wordmark */
body.lf-mobile #top-bar {
  padding: 10px 14px;
  gap: 10px;
}
body.lf-mobile #stats-container,
body.lf-mobile #token-display { display: none; }
body.lf-mobile #game-title { font-size: 15px; }

/* Population pill and Docs button, tightened up */
/* Centred, and keeping the desktop pill sizing so it doesn't look shrunken */
body.lf-mobile #cg-pop {
  top: 56px; left: 50%; transform: translateX(-50%);
}
/* The bottom bar has a Docs button — the floating pill would be a duplicate */
body.lf-mobile #dx-launch { display: none !important; }

/* Welcome banner is replaced by the mobile sheet */
body.lf-mobile #cg-welcome { display: none !important; }

/* ---------- chat ---------- */
body.lf-mobile #lf-chatlog {
  left: 10px; right: 10px; bottom: 66px; width: auto;
}
body.lf-mobile #lf-chatlog-body { max-height: 132px; }
body.lf-mobile #lf-chatlog-foot { display: none; }

body.lf-mobile #social-chat-container {
  bottom: 66px; width: calc(100% - 20px); left: 10px; transform: none;
}
body.lf-mobile #social-chat-input { font-size: 16px; }  /* <16px makes iOS zoom */

/* ==================== BOTTOM BAR ==================== */

#lf-m-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: none;
  background: rgba(22, 14, 15, 0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
body.lf-mobile #lf-m-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; }

/* Equal thirds, identical height. The Play sublabel is absolutely positioned
   so a second line of text can't make that button taller than the others. */
.lf-m-btn {
  position: relative;
  height: 54px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--lf-ash, #c7afa4);
}
.lf-m-btn + .lf-m-btn { border-left: 1px solid rgba(255, 255, 255, 0.07); }
.lf-m-btn:active { background: rgba(255, 122, 34, 0.12); }

.lf-m-btn.is-locked { color: var(--lf-soot, #5c4a46); }
.lf-m-btn.is-locked span { transform: translateY(-6px); }
.lf-m-btn.is-locked::after {
  content: 'desktop';
  position: absolute; left: 0; right: 0; bottom: 9px;
  font-size: 8px; letter-spacing: 1.4px;
  color: rgba(255, 122, 34, 0.5);
}

/* ==================== WELCOME SHEET ==================== */

#lf-m-welcome {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(14, 8, 9, 0.66);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity .24s ease;
}
#lf-m-welcome.gone { opacity: 0; pointer-events: none; }

.lf-m-card {
  width: 100%;
  background: #1a1213;
  border-top: 1px solid rgba(255, 122, 34, 0.28);
  border-radius: 20px 20px 0 0;
  padding: 26px 22px calc(22px + env(safe-area-inset-bottom, 0));
  animation: lfSheetUp .3s cubic-bezier(.2, .8, .3, 1);
}

@keyframes lfSheetUp { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }

.lf-m-title {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-size: 24px; line-height: 1.1; letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--lf-bone, #f6ede6);
  margin-bottom: 12px;
}
.lf-m-title span { color: var(--lf-lava, #ff7a22); }

.lf-m-lede {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 15px; line-height: 1.55;
  color: var(--lf-ash, #c7afa4);
  margin: 0 0 10px;
}

.lf-m-note {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13.5px; line-height: 1.55;
  color: var(--lf-smoke, #8a756d);
  margin: 0 0 20px;
}

/* Three hints on one row, quiet — they are a reminder, not a tutorial */
.lf-m-hints {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 14px 0; margin-bottom: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.lf-m-hints div { display: flex; flex-direction: column; gap: 3px; }
.lf-m-hints b {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--lf-lava, #ff7a22); font-weight: 500;
}
.lf-m-hints span {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px; color: var(--lf-smoke, #8a756d);
}

.lf-m-go {
  display: block; width: 100%; cursor: pointer;
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 16px; border-radius: 12px;
  background: var(--lf-lava, #ff7a22);
  border: none; color: #1a0f08;
}
.lf-m-go:active { filter: brightness(1.1); }

/* ==================== TOAST ==================== */

#lf-m-toast {
  position: fixed; left: 14px; right: 14px; bottom: 72px; z-index: 300;
  background: rgba(26, 17, 19, 0.96);
  border: 1px solid rgba(255, 122, 34, 0.28);
  border-radius: 11px; padding: 13px 16px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13.5px; line-height: 1.5;
  color: var(--lf-ash, #c7afa4);
  opacity: 0; transform: translateY(10px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#lf-m-toast.show { opacity: 1; transform: none; }

/* ==================== DOCS OVERLAY ON MOBILE ==================== */

body.lf-mobile #dx-overlay .dx-wrap {
  grid-template-columns: 1fr;
  gap: 22px; padding: 74px 20px 90px;
}
body.lf-mobile #dx-overlay .dx-side {
  position: static; max-height: none;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
body.lf-mobile #dx-overlay .dx-group { display: none; }
body.lf-mobile #dx-overlay .dx-side a {
  border-left: none; padding: 3px 0; font-size: 12.5px;
}
body.lf-mobile #dx-overlay .dx-doc h1 { font-size: 23px; }
body.lf-mobile #dx-overlay-bar { padding: 13px 18px; }

/* ==================== MODALS ON MOBILE ====================
   Matches are desktop-only, so every game modal is either unreachable or
   unusable on a phone. The How to Play modal was auto-opening on first visit
   and covering the whole screen with no way to scroll or dismiss it — the
   first thing a phone visitor saw was a wall they couldn't get past.
   The mobile welcome sheet replaces all of it; the Guide button covers rules.
   ========================================================================= */

body.lf-mobile #how-to-play-modal,
body.lf-mobile #controls-modal,
body.lf-mobile #terms-modal,
body.lf-mobile #troubleshoot-modal,
body.lf-mobile #welcome-modal,
body.lf-mobile #wallet-select-modal,
body.lf-mobile #free-join-overlay,
body.lf-mobile #coming-soon-overlay,
body.lf-mobile #game-over-modal,
body.lf-mobile #victory-modal,
body.lf-mobile #draw-modal,
body.lf-mobile #stats-modal,
body.lf-mobile #transition-overlay,
body.lf-mobile #day-transition-overlay,
body.lf-mobile #kill-feed,
body.lf-mobile #queue-status {
  display: none !important;
}

/* Safety net: if any modal is ever shown on mobile deliberately, make sure it
   can actually be read and dismissed rather than overflowing off-screen. */
body.lf-mobile .help-modal-content,
body.lf-mobile .modal-content,
body.lf-mobile .victory-modal-content,
body.lf-mobile .stats-modal-content {
  max-height: 82vh !important;
  max-width: calc(100vw - 24px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ==================== CONNECTION CHROME ====================
   The status pill sits centred at the top and overlaps the population pill on
   a phone. Connection state matters when you're queuing for a match — which
   is desktop-only — so on mobile it's pure obstruction. Errors still surface
   through toasts.
   ========================================================================= */

body.lf-mobile #connection-status,
body.lf-mobile #loading-overlay {
  display: none !important;
}