/*
 * Fullscreen Obelisk Challenge web app.
 * Layout: non-gameplay top chrome | playfield | non-gameplay bottom chrome.
 * Shell uses the small viewport height so Safari toolbars cannot cover controls.
 */

:root {
  --challenge-app-bg: #1a1208;
  --challenge-app-ink: #f7ebda;
  --challenge-app-muted: #d4b892;
  --challenge-app-line: rgba(255, 232, 190, 0.22);
  --challenge-app-accent: #e07a2f;
  --challenge-app-safe-top: env(safe-area-inset-top, 0px);
  --challenge-app-safe-right: env(safe-area-inset-right, 0px);
  --challenge-app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --challenge-app-safe-left: env(safe-area-inset-left, 0px);
  /* Measured by app.js from visualViewport; defaults keep the shell usable. */
  --challenge-app-vv-top: 0px;
  --challenge-app-vv-bottom: 0px;
  --challenge-app-shell-top: 0px;
  --challenge-app-shell-height: 100svh;
  /*
   * Inner padding inside the non-gameplay bands (device safe-area only).
   * Browser toolbar clearance comes from pinning the shell to visualViewport.
   */
  --challenge-app-chrome-top: 0px;
  --challenge-app-chrome-bottom: 0px;
  --challenge-app-inset-top: calc(var(--challenge-app-chrome-top) + var(--challenge-app-safe-top));
  --challenge-app-inset-bottom: calc(
    var(--challenge-app-chrome-bottom) + var(--challenge-app-safe-bottom)
  );
  --challenge-app-pad-gap: 8px;
  --challenge-app-btn-min: 48px;
  --challenge-app-chrome-bg: #120c06;
}

/* Installed / standalone PWA: only device safe-area is needed. */
@media (display-mode: standalone), (display-mode: fullscreen) {
  :root {
    --challenge-app-chrome-top: 0px;
    --challenge-app-chrome-bottom: 0px;
  }
}

/* Desktop browser windows do not overlay content with phone toolbars. */
@media (min-width: 900px) and (min-height: 600px) and (pointer: fine) {
  :root {
    --challenge-app-chrome-top: 0px;
    --challenge-app-chrome-bottom: 0px;
  }
}

html:has(body.challenge-app-page),
body.challenge-app-page {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

body.challenge-app-page {
  margin: 0;
  /* svh = viewport with browser chrome expanded — keeps shell above toolbars. */
  min-height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  height: 100%;
  height: 100vh;
  height: 100svh;
  max-height: 100%;
  max-height: 100vh;
  max-height: 100svh;
  background: var(--challenge-app-chrome-bg);
  color: var(--challenge-app-ink);
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Column shell: top chrome / playfield / bottom chrome.
   Fixed to the visual viewport so Safari toolbars remain outside the shell. */
body.challenge-app-page .challenge-app-shell {
  box-sizing: border-box;
  position: fixed;
  top: var(--challenge-app-shell-top);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--challenge-app-shell-height);
  max-height: var(--challenge-app-shell-height);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--challenge-app-chrome-bg);
}

body.challenge-app-page .challenge-app-topchrome,
body.challenge-app-page .challenge-app-botchrome {
  box-sizing: border-box;
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
  width: 100%;
  min-width: 0;
  background: var(--challenge-app-chrome-bg);
  pointer-events: auto;
}

body.challenge-app-page .challenge-app-topchrome {
  padding: max(6px, var(--challenge-app-inset-top)) max(8px, var(--challenge-app-safe-right)) 8px
    max(8px, var(--challenge-app-safe-left));
  border-bottom: 1px solid var(--challenge-app-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.challenge-app-page .challenge-app-botchrome {
  padding: 8px max(8px, var(--challenge-app-safe-right))
    max(8px, var(--challenge-app-inset-bottom)) max(8px, var(--challenge-app-safe-left));
  border-top: 1px solid var(--challenge-app-line);
}

body.challenge-app-page .challenge-app-playfield,
body.challenge-app-page .challenge-app-panel,
body.challenge-app-page .challenge-stage-slot {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.challenge-app-page .challenge-app-playfield {
  flex: 1 1 auto;
  position: relative;
  height: auto;
}

body.challenge-app-page .challenge-app-panel,
body.challenge-app-page .challenge-stage-slot {
  height: 100%;
}

body.challenge-app-page .challenge-app-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.challenge-app-page .challenge-panel,
body.challenge-app-page .challenge-panel *,
body.challenge-app-page .challenge-stage-wrap,
body.challenge-app-page .challenge-canvas,
body.challenge-app-page .challenge-app-topchrome,
body.challenge-app-page .challenge-app-botchrome {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Playfield only — gameplay canvas fills the middle band. */
body.challenge-app-page .challenge-stage-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(224, 122, 47, 0.14), transparent 42%),
    radial-gradient(ellipse at 85% 100%, rgba(80, 120, 160, 0.12), transparent 48%),
    linear-gradient(180deg, #24180c 0%, var(--challenge-app-bg) 55%, #120c06 100%);
}

body.challenge-app-page .challenge-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

body.challenge-app-page .challenge-banner,
body.challenge-app-page .challenge-thrust-subtitle,
body.challenge-app-page .challenge-app-status {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

body.challenge-app-page .challenge-app-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--challenge-app-line);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(58, 38, 18, 0.92) 0%, rgba(32, 20, 10, 0.95) 100%);
}

body.challenge-app-page .challenge-app-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.challenge-app-page .challenge-app-logo {
  flex: 0 0 auto;
  display: block;
  width: 20px;
  height: 20px;
}

body.challenge-app-page .challenge-app-title {
  margin: 0;
  font-family: "Trajan Pro", "Cinzel", "Times New Roman", Times, serif;
  font-size: clamp(0.9rem, 2.2vw, 1.15rem);
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--challenge-app-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.challenge-app-page .challenge-app-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-left: auto;
}

body.challenge-app-page .challenge-app-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 30px;
  padding: 3px 7px;
  border: 1px solid var(--challenge-app-line);
  border-radius: 8px;
  background: rgba(255, 248, 232, 0.08);
  color: var(--challenge-app-muted);
  font-size: 0.74rem;
  font-weight: 650;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  gap: 0.2em;
}

body.challenge-app-page .challenge-app-nav-link .challenge-key-hint {
  margin-left: 0.15em;
  border-color: rgba(255, 232, 190, 0.45);
  opacity: 0.8;
}

body.challenge-app-page button.challenge-app-nav-link {
  appearance: none;
  -webkit-appearance: none;
}

body.challenge-app-page .challenge-app-nav-link:hover,
body.challenge-app-page .challenge-app-nav-link:focus-visible {
  color: var(--challenge-app-ink);
  border-color: rgba(255, 232, 190, 0.42);
  outline: none;
}

body.challenge-app-page .challenge-app-nav-link--accent {
  color: #fff4e4;
  border-color: rgba(224, 122, 47, 0.55);
  background: linear-gradient(180deg, rgba(224, 122, 47, 0.42) 0%, rgba(160, 72, 18, 0.5) 100%);
}

body.challenge-app-page .challenge-hud {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 0;
  transform: none;
}

body.challenge-app-page .challenge-stat {
  min-width: 0;
  padding: 4px 3px;
  text-align: center;
  border: 1px solid var(--challenge-app-line);
  border-radius: 8px;
  background: rgba(20, 12, 6, 0.85);
}

body.challenge-app-page .challenge-stat-label {
  font-size: clamp(0.5rem, 1.2vw, 0.65rem);
  color: var(--challenge-app-muted);
}

body.challenge-app-page .challenge-stat strong {
  font-size: clamp(0.8rem, 2vw, 1.05rem);
  color: var(--challenge-app-ink);
}

body.challenge-app-page .challenge-banner {
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  background: rgba(28, 18, 8, 0.88);
  border-color: rgba(255, 232, 190, 0.35);
  color: var(--challenge-app-ink);
}

body.challenge-app-page .challenge-banner[data-tone="good"] {
  background: rgba(18, 56, 32, 0.9);
  border-color: rgba(120, 220, 150, 0.45);
}

body.challenge-app-page .challenge-banner[data-tone="bad"] {
  background: rgba(72, 20, 16, 0.92);
  border-color: rgba(255, 140, 120, 0.45);
}

body.challenge-app-page .challenge-thrust-subtitle {
  top: calc(28% + 3.2rem);
  color: #fff1d8;
  text-shadow:
    0 1px 2px rgba(10, 6, 2, 0.95),
    0 0 8px rgba(10, 6, 2, 0.75);
}

body.challenge-app-page .challenge-app-status {
  --challenge-status-size: clamp(0.68rem, 1.5vw, 0.84rem);
  --challenge-status-lh: 1.25;
  box-sizing: border-box;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: min(88%, 26rem);
  height: calc(var(--challenge-status-lh) * 2 * var(--challenge-status-size));
  min-height: calc(var(--challenge-status-lh) * 2 * var(--challenge-status-size));
  max-height: calc(var(--challenge-status-lh) * 2 * var(--challenge-status-size));
  margin: 0;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(12, 8, 4, 0.45);
  color: var(--challenge-app-muted);
  text-align: center;
  font-size: var(--challenge-status-size);
  line-height: var(--challenge-status-lh);
  overflow: hidden;
}

/* Bottom chrome: corner thumb pads in a non-gameplay footer band. */
body.challenge-app-page .challenge-controls {
  display: block;
  gap: 0;
  min-width: 0;
}

body.challenge-app-page .challenge-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  pointer-events: none;
}

body.challenge-app-page .challenge-thumb-pad {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--challenge-app-pad-gap);
  width: min(46vw, 11.5rem);
  pointer-events: none;
}

body.challenge-app-page .challenge-thumb-pad--left {
  margin-right: auto;
}

body.challenge-app-page .challenge-thumb-pad--right {
  margin-left: auto;
}

body.challenge-app-page .challenge-thumb-pad .btn {
  pointer-events: auto;
  width: 100%;
  min-width: 0;
  min-height: var(--challenge-app-btn-min);
  padding: 8px 6px;
  margin: 0;
  border-radius: 14px;
  font-size: clamp(0.72rem, 2.4vw, 0.9rem);
  font-weight: 700;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, rgba(70, 46, 22, 0.92) 0%, rgba(34, 22, 10, 0.94) 100%);
  border-color: rgba(255, 232, 190, 0.32);
  color: var(--challenge-app-ink);
}

body.challenge-app-page .challenge-thumb-pad .btn:disabled {
  opacity: 0.42;
}

body.challenge-app-page .challenge-thumb-btn--primary {
  grid-column: 1 / -1;
  min-height: calc(var(--challenge-app-btn-min) + 8px);
  font-size: clamp(0.85rem, 2.8vw, 1.05rem);
}

body.challenge-app-page #challenge-thrust-btn {
  background: linear-gradient(180deg, rgba(224, 122, 47, 0.88) 0%, rgba(150, 68, 18, 0.94) 100%);
  border-color: rgba(255, 190, 120, 0.55);
  color: #fff8ee;
}

body.challenge-app-page #challenge-fire-btn,
body.challenge-app-page #challenge-fire-left-btn {
  background: linear-gradient(180deg, rgba(180, 70, 48, 0.9) 0%, rgba(110, 36, 22, 0.95) 100%);
  border-color: rgba(255, 160, 130, 0.45);
  color: #fff4ee;
}

/* Left pad: Fire (leftmost) | Chute, then full-width Thrust. */
body.challenge-app-page .challenge-thumb-pad--left #challenge-fire-left-btn {
  grid-column: 1;
  grid-row: 1;
}

body.challenge-app-page .challenge-thumb-pad--left #challenge-parachute-btn {
  grid-column: 2;
  grid-row: 1;
}

body.challenge-app-page .challenge-thumb-pad--left #challenge-thrust-btn {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* Right pad: Spin ← | Spin → over full-width Fire. */
body.challenge-app-page .challenge-thumb-pad--right #challenge-spin-left-btn {
  grid-column: 1;
  grid-row: 1;
}

body.challenge-app-page .challenge-thumb-pad--right #challenge-spin-right-btn {
  grid-column: 2;
  grid-row: 1;
}

body.challenge-app-page .challenge-thumb-pad--right #challenge-fire-btn {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* Dense short viewports (landscape phones). */
@media (max-height: 480px) {
  body.challenge-app-page {
    --challenge-app-btn-min: 40px;
    --challenge-app-pad-gap: 6px;
  }

  body.challenge-app-page .challenge-app-topchrome {
    padding-bottom: 4px;
    gap: 4px;
  }

  body.challenge-app-page .challenge-app-bar {
    padding: 4px 6px;
  }

  body.challenge-app-page .challenge-app-nav-link {
    min-height: 26px;
    padding: 2px 6px;
    font-size: 0.68rem;
  }

  body.challenge-app-page .challenge-hud {
    max-width: 28rem;
  }

  body.challenge-app-page .challenge-app-status {
    width: min(70%, 22rem);
  }

  body.challenge-app-page .challenge-thumb-pad {
    width: min(38vw, 10rem);
  }

  body.challenge-app-page .challenge-thumb-pad .btn {
    min-height: var(--challenge-app-btn-min);
    padding: 5px 4px;
    border-radius: 12px;
    font-size: 0.7rem;
  }

  body.challenge-app-page .challenge-thumb-btn--primary {
    min-height: calc(var(--challenge-app-btn-min) + 4px);
  }
}

@media (max-width: 380px) {
  body.challenge-app-page .challenge-thumb-pad {
    width: min(48vw, 10.5rem);
  }

  body.challenge-app-page .challenge-app-title {
    font-size: 0.88rem;
  }

  body.challenge-app-page .challenge-app-nav-link {
    padding: 2px 5px;
    font-size: 0.64rem;
  }
}

/* Certificate inherits shared styles; keep text selectable inside the dialog. */
body.challenge-app-page.challenge-certificate-open {
  overflow: hidden;
}

body.challenge-app-page .challenge-certificate-name,
body.challenge-app-page .challenge-certificate-card {
  -webkit-user-select: text;
  user-select: text;
}