/* companion.css
   Phase 3, Part A: styles for the ten companion-feature components plus the
   crew feed. All colours come from the design tokens (main.css :root, themeable
   via themes.css), tap targets stay large for small hands (--tap), and every
   animation is gated behind a reduced-motion guard so it stops cleanly when the
   player asks for calm. The components reuse the existing .overlay / .overlay-card
   / .panel-title / .panel-note / .btn-amber / .btn-small primitives from main.css. */

/* Shared big tappable swatch/option safety: never smaller than a fingertip. */
.lens-sprite-opt,
.avatarc-swatch,
.postcard-frame-opt,
.crewfeed-react-btn,
.duel-opt {
  min-height: var(--tap, 64px);
}

/* ---------------------------------------------------------------- Troll Lens */
.lens-card { max-width: 520px; }
.lens-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 60vh;
  margin: 10px 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #04141f;
  border: 3px solid var(--gold);
}
.lens-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lens-fallback { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky), var(--navy)); }
.lens-fallback-bg { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0.8; }
.lens-fallback-mtn { bottom: 18%; opacity: 0.6; }
.lens-sprite-layer { position: absolute; inset: 0; pointer-events: none; }
/* The sprite is now drag-positioned: absolute, anchored on its centre. It is the one thing in
   the layer that takes pointer events, so it can be dragged over the live camera. */
.lens-sprite {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40%; max-width: 260px; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5));
  pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.lens-sprite:active { cursor: grabbing; }
.lens-sprite-emoji { width: auto; line-height: 1; }
.lens-sprite-glyph { color: var(--on-dark); font-family: var(--font-head); font-size: 28px; }
.lens-size-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.lens-size-label { font-weight: 700; }
.lens-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.lens-actions .btn-amber { flex: 1 1 auto; }
.lens-share-row { margin-top: 8px; min-height: 0; }
.lens-frame {
  position: absolute; inset: 0;
  border: 8px solid rgba(201,168,76,0.55);
  border-radius: var(--radius);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.6);
  pointer-events: none;
}
.lens-float { animation: lens-bob 3.4s ease-in-out infinite; }
@keyframes lens-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.lens-sprite-label { font-weight: 700; margin-top: 6px; }
.lens-sprite-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.lens-sprite-opt { flex: 1 1 28%; border-radius: 12px; border: 2px solid rgba(201,168,76,0.45); background: var(--panel); color: var(--cream); font-weight: 700; cursor: pointer; }
.lens-sprite-opt.chosen { border-color: var(--gold-bright); box-shadow: 0 0 0 2px var(--gold); }

/* ----------------------------------------------------------- Treasure radar */
.radar-card { max-width: 460px; text-align: center; }
.radar-scope {
  position: relative;
  width: min(80vw, 320px);
  height: min(80vw, 320px);
  margin: 14px auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(45,122,45,0.25), rgba(6,8,15,0.9));
  border: 3px solid var(--forest);
  overflow: hidden;
}
.radar-ring { position: absolute; border: 1px solid rgba(126,224,184,0.4); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.radar-ring.r1 { width: 33%; height: 33%; }
.radar-ring.r2 { width: 66%; height: 66%; }
.radar-ring.r3 { width: 96%; height: 96%; }
.radar-center { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-bright); transform: translate(-50%, -50%); }
.radar-sweep {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  transform-origin: left center;
  background: conic-gradient(from 0deg at left center, rgba(126,224,184,0.5), rgba(126,224,184,0) 40%);
  animation: radar-spin 3s linear infinite;
}
.radar-sweep.still { animation: none; opacity: 0.3; }
@keyframes radar-spin { to { transform: rotate(360deg); } }
.radar-needle {
  position: absolute; top: 50%; left: 50%; width: 3px; height: 44%;
  background: var(--amber); transform-origin: bottom center;
  transform: translate(-50%, -100%); border-radius: 3px;
}
.radar-blip { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--sky); transform: translate(-50%, -50%); transition: left 0.5s ease, top 0.5s ease; box-shadow: 0 0 8px var(--sky); }
.radar-blip.warm { background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.radar-blip.hot { background: var(--rune-red); box-shadow: 0 0 16px var(--rune-red); }
.radar-readout { font-weight: 700; margin-top: 8px; }
.radar-heat { font-family: var(--font-head); font-size: 20px; color: var(--gold-bright); margin: 4px 0 10px; min-height: 24px; }

/* ----------------------------------------------------------- Cheer-o-meter */
.cheermeter-card { max-width: 420px; text-align: center; }
.cheermeter-wrap { display: flex; justify-content: center; margin: 14px 0; }
.cheermeter-bar { position: relative; width: 84px; height: 240px; border-radius: 42px; background: var(--panel); border: 3px solid var(--gold); overflow: hidden; display: flex; align-items: flex-end; }
.cheermeter-fill { width: 100%; height: 0%; background: linear-gradient(180deg, var(--gold-bright), var(--amber) 50%, var(--rune-red)); transition: height 0.12s linear; }
.cheermeter-label { font-weight: 700; min-height: 24px; margin-bottom: 8px; }

/* ----------------------------------------------------------- Explorer steps */
.steps-card { max-width: 420px; text-align: center; }
.steps-display { position: relative; width: 200px; height: 200px; margin: 12px auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.steps-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--amber) calc(var(--steps-frac, 0) * 360deg), rgba(255,255,255,0.12) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px));
  transition: background 0.4s ease;
}
.steps-count { font-family: var(--font-head); font-size: 48px; color: var(--gold-bright); line-height: 1; }
.steps-goal-text { font-size: 14px; opacity: 0.85; }
.steps-bar { width: 100%; height: 14px; border-radius: 7px; background: var(--panel); overflow: hidden; margin: 8px 0 14px; }
.steps-bar-fill { height: 100%; width: 0%; background: var(--forest); transition: width 0.4s ease; }

/* --------------------------------------------------------- Avatar customizer */
.avatarc-card { max-width: 440px; text-align: center; }
.avatarc-preview { width: 150px; height: 150px; margin: 8px auto; display: flex; align-items: center; justify-content: center; }
.avatarc-preview svg, .avatar-custom-svg svg { display: block; }
.avatarc-section-label { font-weight: 700; text-align: left; margin: 10px 0 4px; }
.avatarc-row { display: flex; flex-wrap: wrap; gap: 8px; }
.avatarc-swatch { flex: 0 0 auto; min-width: 52px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.4); cursor: pointer; color: var(--cream); font-weight: 700; padding: 6px 10px; background: var(--panel); }
.avatarc-swatch.chosen { border-color: var(--gold-bright); box-shadow: 0 0 0 2px var(--gold); }

/* ----------------------------------------------------------------- Postcard */
.postcard-frames { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.postcard-frame-opt { flex: 1 1 40%; border-radius: 12px; border: 3px solid var(--gold); background: var(--panel); color: var(--cream); font-weight: 700; cursor: pointer; }
.postcard-frame-opt.chosen { box-shadow: 0 0 0 2px var(--gold-bright); }

/* ------------------------------------------------------------ Rune of the day */
.rotd-card { display: flex; align-items: center; gap: 12px; padding: 14px; margin: 12px 0; border-radius: var(--radius); background: var(--panel); border: 2px solid var(--gold); }
.rotd-portrait { width: 64px; height: 64px; flex: 0 0 auto; }
.rotd-text { text-align: left; font-style: italic; }

/* ---------------------------------------------------------------- Quick duel */
.duel-card { max-width: 560px; text-align: center; }
.duel-arena { display: flex; flex-direction: column; gap: 8px; }
.duel-half { padding: 10px; border-radius: var(--radius); background: var(--panel); border: 2px solid var(--sky); }
.duel-half.flip { transform: rotate(180deg); }
.duel-player-name { font-family: var(--font-head); color: var(--gold-bright); }
.duel-q { font-weight: 700; margin: 8px 0; }
.duel-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.duel-opt { border-radius: 12px; border: 2px solid var(--gold); background: var(--amber); color: #3a2300; font-weight: 700; cursor: pointer; }
.duel-divider { font-family: var(--font-head); font-size: 22px; color: var(--gold); }
.duel-winner { font-family: var(--font-head); font-size: 22px; color: var(--gold-bright); margin: 14px 0; }

/* --------------------------------------------------------------- Time capsule */
.capsule-input { width: 100%; resize: vertical; }
.capsule-sealed { display: flex; align-items: center; gap: 12px; padding: 14px; margin: 12px 0; border-radius: var(--radius); background: var(--panel); border: 2px dashed var(--gold); }
.capsule-seal { width: 56px; height: 56px; }
.capsule-peek { font-style: italic; }
.capsule-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.capsule-entry { padding: 12px; border-radius: var(--radius); background: var(--panel); border: 2px solid var(--gold); text-align: left; }
.capsule-who { font-family: var(--font-head); color: var(--gold-bright); }
.capsule-wish { font-style: italic; }

/* ----------------------------------------------------------------- Crew feed */
.crewfeed-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.crewfeed-react-btn {
  flex: 1 1 22%; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-radius: 14px; border: 2px solid rgba(201,168,76,0.45); background: var(--panel);
  color: var(--cream); cursor: pointer; padding: 8px;
}
.crewfeed-react-img { width: 40px; height: 40px; }
.crewfeed-react-glyph { font-weight: 700; }
.crewfeed-react-label { font-size: 12px; }
.crewfeed-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.crewfeed-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--panel); }
.crewfeed-item img { width: 32px; height: 32px; flex: 0 0 auto; }
.crewfeed-item-name { font-weight: 700; color: var(--gold-bright); }

/* ----------------------------------------------- Reduced-motion: stop motion */
@media (prefers-reduced-motion: reduce) {
  .radar-sweep, .lens-float { animation: none; }
}
body.reduce-motion .radar-sweep,
body.reduce-motion .lens-float { animation: none; }
body.reduce-motion .radar-blip,
body.reduce-motion .steps-ring,
body.reduce-motion .steps-bar-fill,
body.reduce-motion .cheermeter-fill { transition: none; }