/* ===========================================================================
   klv.css — Klviablo shell + portrait touch controls
   ---------------------------------------------------------------------------
   §8.5: shared-shell/CSS changes are blast-radius changes. EVERY selector here
   is prefixed `klv-` or scoped under an id this page owns (#klv-game, #klv-wrap,
   #klv-topbar). Nothing is a bare element or utility selector, because one
   unscoped `.bg{position:fixed;inset:0}` in a shared component once nearly threw
   a nebula over the whole exchange page.
   ======================================================================== */

/* ONYX-MOBILE-PORTRAIT-SHIM v1 (carried forward, unchanged in effect) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

html, body {
  height: 100%;
  overflow: hidden;
  position: fixed;
  width: 100%;
  margin: 0;
  /* The old build pulled a 1376x768 scene-bg.png here just to sit behind an
     opaque canvas. It is now a gradient: same look, one less request, and it
     cannot pop in late on a cold cache. The source PNG is kept in _art-src/. */
  background:
    radial-gradient(120% 80% at 50% 0%, #1a1226 0%, #0a0812 60%, #06040c 100%);
  color: #e2e8f0;
  font-family: system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

#klv-wrap { position: relative; width: 100%; height: 100%; }

/* The Phaser canvas host. Sits under the shared header and the touch pads. */
#klv-game { position: absolute; inset: 0; z-index: 1; }
#klv-game canvas { display: block; image-rendering: pixelated; }

/* ── topbar ─────────────────────────────────────────────────────────────── */
#klv-topbar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 40px; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  padding-top: env(safe-area-inset-top);
  background: linear-gradient(rgba(10, 8, 18, 0.92), rgba(10, 8, 18, 0));
  pointer-events: none;
}
#klv-topbar > * { pointer-events: auto; }
#klv-topbar .klv-title {
  font-weight: 800; letter-spacing: 2px; font-size: 13px; color: #c9a84c;
}
#klv-topbar .klv-spacer { flex: 1; }
#klv-topbar .klv-hub {
  color: #94a3b8; text-decoration: none; font-size: 11px; font-weight: 700;
  border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 6px; padding: 3px 8px;
}

/* ONYX-EARN-TRUTH: the wallet owns the number inside [data-onyx-earned].
   This is presentation only — the page never writes the value. */
#klv-topbar .onyx-earned {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; color: #c9a84c;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 6px; padding: 3px 9px;
  pointer-events: none; white-space: nowrap;
}
#klv-topbar .onyx-earned .lbl { color: #94a3b8; letter-spacing: 1px; font-weight: 600; }
@media (max-width: 420px) {
  #klv-topbar .onyx-earned { font-size: 9px; padding: 2px 6px; }
  #klv-topbar .klv-title { font-size: 11px; letter-spacing: 1px; }
}

/* ── portrait touch controls ────────────────────────────────────────────── */
/* Hidden by default and shown only when klv-touch.js decides the device
   qualifies. Display is driven by a body class so there is exactly ONE source
   of truth for "are we in touch mode" — the old build had a desktop HUD and a
   mobile HUD that could both mount at once. */
.klv-touch { display: none; }
body.klv-touch-on .klv-touch { display: block; }

.klv-touch .klv-stick,
.klv-touch .klv-atk {
  position: fixed;
  z-index: 30;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.klv-touch .klv-stick {
  left: calc(18px + env(safe-area-inset-left));
  bottom: calc(22px + env(safe-area-inset-bottom));
  width: 104px; height: 104px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.10) 0%, rgba(10,8,18,0.42) 70%);
  border: 1px solid rgba(201, 168, 76, 0.28);
  display: flex; align-items: center; justify-content: center;
}
.klv-touch .klv-knob {
  width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #6b5c8f, #2a2440);
  border: 1px solid rgba(201, 168, 76, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  transition: transform 60ms linear;
}

.klv-touch .klv-atk {
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(30px + env(safe-area-inset-bottom));
  width: 76px; height: 76px; border-radius: 50%;
  /* 76px: comfortably over the 44px minimum tap target, and larger than the
     old build's 64px because this one is held down, not just tapped. */
  font: 800 13px/1 monospace; letter-spacing: 1px;
  color: #2a1a06; cursor: pointer;
  background: radial-gradient(circle at 40% 32%, #ffe08a, #c9a84c 62%, #8a6f24);
  border: 2px solid rgba(255, 236, 170, 0.8);
  box-shadow: 0 4px 16px rgba(201, 168, 76, 0.35);
  transition: transform 70ms ease, box-shadow 70ms ease;
}
.klv-touch .klv-atk.is-down {
  transform: scale(0.92);
  box-shadow: 0 1px 6px rgba(201, 168, 76, 0.5);
}

/* Landscape phones: keep the pads reachable rather than stretched to the
   corners of a very wide, very short viewport. */
@media (orientation: landscape) and (max-height: 480px) {
  .klv-touch .klv-stick { width: 88px; height: 88px; bottom: 14px; }
  .klv-touch .klv-knob { width: 40px; height: 40px; }
  .klv-touch .klv-atk { width: 64px; height: 64px; bottom: 18px; }
}