* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh; /* Phone QA #6 (section 3): dynamic viewport height — avoids mobile
                     browser toolbar show/hide jank; ignored (falls back to 100% above)
                     on browsers without dvh support. Not a chrome-hiding hack, just the
                     standard unit for "fill the actually-visible viewport". */
  overflow: hidden;
  background: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  touch-action: none;
}

#camera {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* HUD V1 docking correction: the ready MetaQube is drawn on this canvas
   (z-index above #bottom-hud's 5) instead of #scene, so it renders in
   front of the HUD's opaque centre-cradle artwork instead of being
   clipped by it. Non-interactive; mostly transparent (only the ready
   qube is ever drawn on it) so it doesn't obscure anything else. */
#qube-front {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

/* Bottom HUD — HUD V1: assets/go/MetaPark_GO_HUD_LIVE_v1.png (2172x724,
   RGBA) is the mandatory runtime skin, rendered at full viewport width
   with its 2172:724 aspect ratio preserved (height:auto); its baked
   icons/labels/chevrons/"Swipe to Tapau"/"Switch"/branding/"/ 180" are
   static and never touched. The artwork's value boxes are genuinely empty
   (no baked sample digits to mask), so each .hud-val is just positioned,
   via percentages measured directly off the new PNG's own pixels (fresh
   pixel-edge scan, not ported from the old asset — see HUD_V1_HANDOVER.md
   / implementation report), inside its box with a transparent background.
   Non-interactive throughout (pointer-events:none; touch stays bound to
   #scene, which sits underneath this HUD in z-order). Hidden behind result
   screens via .hidden, restored on Play Again. */
#bottom-hud {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 5;
  pointer-events: none;
}

#bottom-hud.hidden {
  display: none;
}

#hud-skin {
  position: relative;
  width: 100%;
  line-height: 0;
}

#hud-skin-img {
  display: block;
  width: 100%;
  height: auto;
}

.hud-val {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  white-space: nowrap;
  border-radius: 4px;
}

.hud-val.pulse {
  animation: hud-pulse 380ms ease-out;
}

@keyframes hud-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Box coordinates below are pixel-edge measurements taken directly off
   assets/go/MetaPark_GO_HUD_LIVE_v1.png (2172x724): scanned outward from a
   verified-dark interior point in each empty box to the first bright
   stroke pixel in all 4 directions, then re-drawn back onto the actual PNG
   and visually confirmed to trace each box exactly before committing these
   numbers (see implementation report). Percentages are box-edge / image
   dimension (2172 for x/width, 724 for y/height). No background colour is
   needed — the boxes are genuinely empty in this artwork, unlike the
   superseded asset. */
.hud-val-qube {
  left: 29.88%; top: 33.43%; width: 6.58%; height: 12.71%;
  color: #22d3ee;
  font-size: 2.6vw;
}

.hud-val-caught {
  left: 26.01%; top: 53.45%; width: 4.23%; height: 8.43%;
  color: #ffd23f;
  font-size: 1.7vw;
}

/* Right (gold) panel — Target Mission is two independent boxes (current,
   required) with the "/" baked into the art between them. */
.hud-val-mission-current {
  left: 86.00%; top: 30.80%; width: 4.01%; height: 8.43%;
  color: #ffd23f;
  font-size: 1.8vw;
}

.hud-val-mission-target {
  left: 92.26%; top: 30.80%; width: 3.91%; height: 8.43%;
  color: #ffd23f;
  font-size: 1.8vw;
}

/* Food Types has one box (current count only) — "/ 180" is baked static
   art; food-total is never rendered here (see .hud-total-hidden below). */
.hud-val-foodtypes {
  left: 86.56%; top: 43.09%; width: 3.96%; height: 8.15%;
  color: #ffd23f;
  font-size: 1.5vw;
}

.hud-val-mischief {
  left: 86.96%; top: 57.46%; width: 4.01%; height: 8.15%;
  color: #ffd23f;
  font-size: 1.8vw;
}

/* food-total keeps its existing JS binding (foodTotalEl.textContent) alive
   without ever being visibly rendered — the artwork's own "/ 180" is the
   single visible denominator. */
.hud-total-hidden {
  display: none;
}

#start-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: radial-gradient(circle at 50% 30%, #2b5e2b 0%, #0d1f0d 70%);
  display: flex;
  align-items: center;
  justify-content: center;
}

#start-card {
  text-align: center;
  color: #fff;
  padding: 24px;
  max-width: 340px;
}

#start-dt {
  width: 160px;
  height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4));
  margin-bottom: 8px;
  animation: bob 2.4s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

#start-card h1 {
  font-size: 24px;
  margin: 8px 0 6px;
}

#start-card p {
  font-size: 14px;
  opacity: 0.85;
  line-height: 1.4;
  margin-bottom: 20px;
}

#start-btn {
  background: #ffd23f;
  color: #1a1a1a;
  border: none;
  padding: 14px 34px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

#start-btn:active {
  transform: scale(0.96);
}

#start-note {
  margin-top: 14px;
  font-size: 12px;
  opacity: 0.7;
  min-height: 16px;
}

#start-overlay.hidden {
  display: none;
}

#round-end-overlay {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: radial-gradient(circle at 50% 30%, #2b5e2b 0%, #0d1f0d 70%);
  display: flex;
  align-items: center;
  justify-content: center;
}

#round-end-overlay.hidden {
  display: none;
}

#round-end-card {
  text-align: center;
  color: #fff;
  padding: 24px;
  max-width: 340px;
}

#round-end-card h1 {
  font-size: 26px;
  margin: 0 0 10px;
  letter-spacing: 0.5px;
}

#round-end-card p {
  font-size: 14px;
  opacity: 0.85;
  line-height: 1.4;
  margin-bottom: 22px;
}

#round-end-btn {
  background: #ffd23f;
  color: #1a1a1a;
  border: none;
  padding: 14px 34px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

#round-end-btn:active {
  transform: scale(0.96);
}

#discovery-overlay {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: radial-gradient(circle at 50% 30%, #2b5e2b 0%, #0d1f0d 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

#discovery-overlay.hidden {
  display: none;
}

#discovery-card {
  width: 100%;
  max-width: 360px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 210, 63, 0.55);
  border-radius: 24px;
  box-shadow: 0 0 30px rgba(255, 210, 63, 0.25);
  padding: 22px 20px 26px;
}

#discovery-ribbon {
  display: inline-block;
  background: #2f9e44;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 10px;
}

#discovery-title {
  font-size: 28px;
  font-weight: 800;
  color: #ffd23f;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  margin: 4px 0 2px;
  letter-spacing: 0.5px;
}

#discovery-country {
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 16px;
}

#discovery-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  padding: 14px;
}

#discovery-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 210, 63, 0.35) 0%, rgba(255, 210, 63, 0) 70%);
  z-index: 0;
}

#discovery-hero-img {
  position: relative;
  z-index: 1;
  max-width: 78%;
  max-height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
}

#discovery-history {
  font-size: 13.5px;
  line-height: 1.5;
  opacity: 0.9;
  margin-bottom: 18px;
}

#discovery-collection-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(90, 58, 30, 0.55);
  border: 1px solid rgba(255, 210, 63, 0.4);
  border-radius: 14px;
  padding: 8px 22px;
  margin-bottom: 18px;
}

#discovery-collection-badge span {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.8;
}

#discovery-collection-badge strong {
  font-size: 18px;
  color: #ffd23f;
}

#discovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

#discovery-play-again-btn {
  background: #ffd23f;
  color: #1a1a1a;
  border: none;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

#discovery-play-again-btn:active {
  transform: scale(0.96);
}

#discovery-view-collection-btn {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.55;
  cursor: not-allowed;
}

#login-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: radial-gradient(circle at 50% 30%, #2b5e2b 0%, #0d1f0d 70%);
  display: flex;
  align-items: center;
  justify-content: center;
}

#login-overlay.hidden {
  display: none;
}

#login-card {
  text-align: center;
  color: #fff;
  padding: 24px;
  max-width: 340px;
  width: 100%;
}

#login-dt {
  width: 120px;
  height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4));
  margin-bottom: 8px;
}

#login-card h1 {
  font-size: 22px;
  margin: 8px 0 6px;
}

#login-card p {
  font-size: 14px;
  opacity: 0.85;
  line-height: 1.4;
  margin-bottom: 16px;
}

#login-step-contact,
#login-step-otp {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#login-step-otp.hidden {
  display: none;
}

#contact-input,
#otp-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 999px;
  border: none;
  font-size: 16px;
  text-align: center;
}

#otp-input {
  letter-spacing: 4px;
}

#send-code-btn,
#verify-code-btn {
  background: #ffd23f;
  color: #1a1a1a;
  border: none;
  padding: 14px 34px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

#send-code-btn:active,
#verify-code-btn:active {
  transform: scale(0.96);
}

#send-code-btn:disabled,
#verify-code-btn:disabled {
  opacity: 0.6;
}

.link-btn {
  background: none;
  border: none;
  color: #fff;
  opacity: 0.75;
  font-size: 13px;
  text-decoration: underline;
  padding: 4px;
}

#otp-sent-note {
  font-size: 13px;
  opacity: 0.8;
  margin-bottom: 0;
}

#login-note {
  margin-top: 14px;
  font-size: 12px;
  opacity: 0.85;
  min-height: 16px;
}

/* ==========================================================================
   Food Collection V1 (trial) — additive only, nothing above this point was
   touched. The approved visual masters (assets/go/food-collection-v1/*.png)
   are rendered as full-bleed, unmodified images at their native 950x1655
   aspect ratio, letterboxed (not cropped, not stretched) on viewports with
   a different ratio. Everything below is either an invisible touch zone
   positioned over the art by measured percentage, or a live-value mask
   using the same background-patch-plus-text technique already approved for
   HUD V1. See foodCollection.js for behaviour/state.
   ========================================================================== */
/* Food Detail screens are UNCHANGED (hard-locked this pass) — still
   flex-centred, since that's already approved/passed phone QA there. */
#food-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 16;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Treasure Cove correction pass — top-cropping root cause: with
   align-items:center + inset:0, a real device whose visual viewport is
   shorter than the `inset:0` box computes (iOS Safari's dynamic
   toolbar showing/hiding changes how much of the layout viewport is
   actually visible; `100dvh`, already used elsewhere in this file for
   exactly this class of bug, tracks the CURRENT visible area instead)
   centres the image within a box taller than what's actually on screen —
   pushing its top edge above the visible area, with no scroll affordance
   to reach it, reading as "the top got cropped". Fixed by: (1) `height:
   100dvh` so the container's own box matches the real visible viewport,
   not an oversized computed one; (2) align-items:flex-start so the image's
   TOP edge is always anchored to the container's top edge — never
   vertically centred/cropped; (3) overflow-y:auto so if the image (at
   full device width) is still taller than the visible area, the rest is
   reachable by scrolling instead of silently lost. The full supplied
   composition is preserved byte-for-byte either way — this only changes
   where it's anchored/how it's revealed, never stretches or crops the
   artwork itself. */
#treasure-overlay {
  position: fixed;
  inset: 0;
  height: 100dvh;
  z-index: 16;
  background: #000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
}

#food-detail-overlay.hidden,
#treasure-overlay.hidden {
  display: none;
}

#food-detail-skin {
  position: relative;
  width: 100%;
  line-height: 0;
}

/* flex-shrink:0 guards against the flex column ever compressing the image
   below its natural width inside the new scrollable/top-anchored overlay. */
#treasure-skin {
  position: relative;
  width: 100%;
  line-height: 0;
  flex-shrink: 0;
}

#food-detail-img,
#treasure-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Invisible touch zones — no visible styling of any kind, purely hit
   targets positioned/sized by foodCollection.js from measured coordinates. */
.fc-hitzone {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Treasure Cove Live-Data Master v2 — the art's dashed windows (MC
   balance, collection progress, pagination) are genuinely empty, so no
   masking background is needed there; this just centres live text inside
   whichever window foodCollection.js positions it over (see TC_WINDOWS). */
.fc-tc-val {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 2.6vw;
  pointer-events: none;
}

/* Five-Food pass, item 7: real per-Food gameplay sprite, shown on its
   card only once discovered (foodCollection.js toggles .visible). Solid
   background matches the card's own dark backdrop so the baked padlock/
   silhouette underneath is fully covered regardless of the sprite's own
   aspect ratio (object-fit:contain can letterbox within imageBox if the
   sprite's proportions don't exactly match the box). Hidden by default —
   the master's baked locked-card art shows through untouched until then. */
.fc-tc-food-img {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #070706;
  pointer-events: none;
}

.fc-tc-food-img.visible {
  display: block;
}

/* Food economy correction pass: the per-Food price baked into each V2
   card ("50 MC / Piece", "80 MC / Piece") is the now-cancelled per-Food
   pricing (see report, Package B8) — the universal "1 MC / Piece" rule
   replaces it everywhere. This is the same measured-patch-plus-live-text
   masking technique already approved for HUD V1/Food Detail, applied here
   because the number itself is obsolete, not because the window is empty. */
.fc-tc-mask {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #070706;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  color: #ffd23f;
  font-size: 2.3vw;
  pointer-events: none;
}

/* Phone QA correction pass 2: category-selector label. The baked pill
   shape/border and dropdown chevron stay exactly as supplied — only the
   "All Food" text itself is masked out and replaced with "Malaysia"
   (text/UI change only, per report). Text colour matches the baked
   label's own white, not the gold price-mask colour, since this isn't a
   price field. */
.fc-tc-category-mask {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0806;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  color: #ffffff;
  font-size: 2.1vw;
  pointer-events: none;
}

/* Rename pass: baked Food-card name text ("Ice Kachang") replaced with
   the correct name ("Ais Kacang") — text only, matched to the other four
   cards' own baked name size/weight. Background matches the plain card
   backdrop sampled at the mask's own location (~#070706).
   Size correction: the first attempt (3.2vw/700) measured visibly larger
   and heavier than the baked names — side-by-side pixel comparison against
   "Prawn Mee" in a real render found the baked cap-height is ~9px at
   390px width against this attempt's ~16px, and the baked weight reads
   lighter than 700. Re-tuned to 1.8vw/600 to match. */
.fc-tc-name-mask {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #070706;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  color: #ffffff;
  font-size: 1.8vw;
  pointer-events: none;
}

/* Phone QA correction pass 2: Pieces Owned, reserved beside each card's
   Sell control (conceptually "Sell <N>" — see report Package 3). The art
   has no window here (it's plain card background), so no masking
   background is needed — same technique as .fc-tc-val. Font sized to the
   smaller per-card row (not the larger top-bar fields). */
.fc-tc-qty {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 2vw;
  pointer-events: none;
}

/* Temporary QA-only trigger for this first pass — deliberately plain/
   unstyled-looking so it reads as scaffolding, not a customer-facing
   control. Remove once real checkRoundEnd() wiring replaces it. */
#fc-test-open-btn {
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 17;
  background: #000;
  color: #0f0;
  border: 1px solid #0f0;
  font-size: 11px;
  padding: 4px 8px;
  opacity: 0.7;
}

/* Treasure Cove correction pass: "Back to Game" — a new, real,
   customer-facing control (not QA scaffolding), since the supplied V2
   master has no in-app back control at all. Pinned to the viewport itself
   (not positioned over the artwork) so it stays reachable regardless of
   scroll position now that Treasure Cove can scroll (see #treasure-overlay
   above).

   Standardization pass, item 4: moved from top-left to bottom-right —
   real-device QA found top-left interfered with the artwork regardless of
   size. At the reference 390x844 rendering the composition's own bottom
   edge lands at y=772-783 (measured directly off a real screenshot: the
   884x1779 master scales to ~785px tall at 390px width) inside a 100dvh
   container — leaving a guaranteed ~60px pure-black strip below the
   entire composition (below Passport/pagination/mascots/foliage, all of
   which end above y=783) with no artwork, control, or mascot in it at
   all. Anchored there (bottom:10px), so it can never cover anything
   functional or drawn. Restyled as a secondary/ghost pill (outline, not
   the solid gold CTA fill used for Play Again/Sell) so it reads as
   subordinate to the artwork rather than a primary action, per item 4's
   "visually secondary" requirement — still clearly a tappable button. */
#fc-tc-back-btn {
  position: fixed;
  right: 8px;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 18;
  background: rgba(0, 0, 0, 0.55);
  color: #ffd23f;
  border: 1px solid #ffd23f;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

#fc-tc-back-btn.hidden {
  display: none;
}

#fc-tc-back-btn:active {
  transform: scale(0.96);
}

/* Five-Food Gameplay Test Build — TEST MODE ONLY (see index.html comment
   and app.js TEST_MODE_ENABLED). z-index:14 is deliberately BELOW every
   overlay in this file (lowest overlay is #round-end-overlay/#discovery-
   overlay at 15) so this panel is only ever visible during live gameplay
   — any active overlay's own opaque background fully covers it. Sits
   above the HUD (#bottom-hud, z-index 5) so it stays reachable. */
#test-mode-panel {
  position: fixed;
  left: 0;
  right: 0;
  top: max(6px, env(safe-area-inset-top));
  z-index: 14;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 6px;
  pointer-events: none; /* only the buttons themselves are tappable */
}

#test-mode-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #ff5a5a;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #ff5a5a;
  border-radius: 4px;
  padding: 3px 5px;
  pointer-events: none;
}

.test-mode-btn {
  pointer-events: auto;
  font-size: 10px;
  font-weight: 700;
  color: #cfcfcf;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  padding: 3px 6px;
}

.test-mode-btn:active {
  transform: scale(0.95);
}

.test-mode-btn.active {
  color: #1a1a1a;
  background: #ffd23f;
  border-color: #ffd23f;
}

/* DEV 1 RESET Part B: browse between already-discovered Foods' Discovery
   pages. Fixed/viewport-anchored (same technique as #fc-tc-back-btn above)
   so these never collide with the pixel-measured ZONES hitzones inside
   #food-detail-skin — they are not part of that artwork's own layout. */
.fc-fd-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 19;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.78);
  color: #ffd23f;
  border: 2px solid #ffd23f;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fc-fd-nav.hidden {
  display: none;
}

.fc-fd-nav:active {
  transform: translateY(-50%) scale(0.92);
}

/* Inset from the raw viewport edge (rather than flush at left:8px/right:8px)
   so the button sits clear of Android's edge back-gesture capture zone and
   doesn't fall half-under the Food Detail artwork's own edge — real-device
   visibility correction, see DEV 1 PHYSICAL QA FOLLOW-UP Part C. */
.fc-fd-nav-prev {
  left: max(14px, env(safe-area-inset-left));
}

.fc-fd-nav-next {
  right: max(14px, env(safe-area-inset-right));
}

/* DEV 1 RESET Part C's scrim/ring selection-state workaround (#fc-roti-dim,
   #fc-select-ring) was removed in the DEV 1 PHYSICAL QA FOLLOW-UP pass —
   Treasure Cove is an accepted visual mock-up (Zen confirmed), so patching
   its baked Roti treatment with a software overlay was the wrong fix. See
   the Treasure Cove component audit / reconstruction plan in the
   implementation report for the real, planned replacement. */