/* Home — unified mobile + desktop */

:root{ 
  --topbar-h: 67px; 
  --footbar-h: 76px; 
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --line:#232323; 
  --accent:#FFD34D; /* OU ORANGE #f49021 — yellow #FFD34D)  Teal #48d1cc */
  --radius-lg:20px; 
  }

/* Full-bleed shell on this route */
body.home .wrap{ padding:0; }
body.home .app{ min-height:100svh; border:0; border-radius:0; box-shadow:none; }
body.home main{ padding:0; }
body.home .page{
  max-width:1200px;               /* wider on desktop */
  margin:0 auto;
  padding:12px 10px calc(var(--footbar-h) + var(--safe-bottom) + 12px);
  min-height:calc(100svh - var(--topbar-h) - var(--safe-bottom));
  display:grid; gap:14px;
}

/* ---------- Story bars ---------- */
.home-storybars{
  position:relative;display:flex;gap:6px;padding:6px 6px 8px;
  /*-webkit-tap-highlight-color: rgba(244,144,33,.35); */
  user-select:none;
}
.home-storybars span{
  flex:1; min-width:22px;         /* easier to hit */
  height:6px; background:#ffffff55;
  border-radius:999px; overflow:hidden; cursor:pointer;
}
.home-storybars span::after{
  content:""; display:block; height:100%; width:0;
  background:var(--accent); transition:width .25s;
}
.home-storybars span.is-active::after{ width:100%; }
.home-storybars span.is-viewed{ background:#ffffff99; }

/* ---------- Deck (media) ---------- */
.home-deck{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:#000; box-shadow:0 20px 44px rgba(0,0,0,.35);
  -webkit-touch-callout: none;
}
.home-card{
  position:absolute; inset:0; border-radius:var(--radius-lg);
  touch-action:none; will-change:transform;
}
.home-img{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }

/* Sizing: mobile vs desktop */
@media (max-width: 899px){
  .home-deck{ height:64vh; min-height:420px; }
}

/* === Desktop layout: wide deck, narrower aside (optional hooks) === */
@media (min-width: 900px){
  .home-layout{
    display:grid;
    grid-template-columns: minmax(320px, 420px) minmax(600px, 1fr);
    gap:18px; align-items:start;
  }
  .home-deck-col .home-deck{
    height: min(88vh, 1100px);
    aspect-ratio: 9 / 16;
    margin: 0 auto;
  }
  .home-card{ inset:0; }
  .home-aside{ max-width:420px; }
}

/* ---------- Overlays ---------- */
.home-overlay-top{
  position:absolute; left:0; right:0; top:0; padding:14px;
  background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 48%, rgba(0,0,0,0) 100%);
  color:#fff; z-index:2; pointer-events:none;
}
.home-brand{ margin:0; font-size:1.25rem; line-height:1.25; font-weight:800; letter-spacing:.01em; }
.home-subline{ margin:.4rem 0 0; font-size:.95rem; line-height:1.35; opacity:.95; }

.home-overlay-bottom{
  position:absolute; left:0; right:0; bottom:0; padding:14px 14px 16px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.75) 100%);
  color:#fff; z-index:2; pointer-events:none;
}
.home-title{ margin:0 0 2px 0; font-size:1.05rem; }
.home-desc { margin:0; opacity:.9; font-size:.92rem; }

/* Center prompts (pre/post) */
.home-banner, .home-prompt{
  position:absolute; left:50%; top:45%; transform:translate(-50%,-50%);
  background:rgba(0,0,0,.6); color:#fff; padding:10px 14px; border:1px solid #444;
  border-radius:12px; font-weight:800; letter-spacing:.02em; display:none; z-index:4;
  pointer-events:none;
}
.home-banner.show, .home-prompt.show{ display:block; }

/* Better wrapping + optional plain (no bubble) style */
.home-banner,
.home-prompt{
  max-width: min(92vw, 640px);
  text-align: center;
}

/* Plain variant: white text, no bubble, subtle glow for readability */
.home-banner.is-plain,
.home-prompt.is-plain{
  background: transparent;
  border: 0;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(0,0,0,.9);
  border-radius: 0;
  padding: 0 12px;
}



/* Make prompt/banner adopt the yellow pill look when .home-tip is present */
.home-banner.home-tip,
.home-prompt.home-tip {
  background: var(--accent);
  color: #111;
  border: 1px solid var(--accent);
  font-weight: 700;
  text-shadow: none;
  border-radius: 999px;      /* stronger pill */
  padding: 6px 10px;         /* same feel as media.js tip */
}



.home-bid-sub{
  font-size: .72rem;
  line-height: 1;
  opacity: .85;
  margin-top: -2px;
}

/* ---------- Bottom actions (mobile only) ---------- */
.home-bottomnav{
  position:fixed; left:0; right:0; bottom:0;
  height:calc(var(--footbar-h) + var(--safe-bottom));
  padding:8px 10px calc(8px + var(--safe-bottom));
  display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:6px; align-items:center;
  background:var(--card, #141414); border-top:1px solid var(--line);
  z-index:980;
}
.home-bicon{
  background:transparent; border:1px solid var(--line);
  border-radius:14px; padding:10px 8px; color:#ddd; display:grid; justify-items:center; gap:6px;
  font-size:.8rem;
}
.home-bicon:hover{ color:#fff; border-color:#3a3a3a; }
.home-bicon svg{ display:block; }
.home-bicon-primary{ background:var(--accent); color:#111; border-color:transparent; box-shadow:0 8px 22px rgba(244,144,33,.25); }
.home-bid-label{ font-weight:800; }

/* Keep primary (yellow) button text dark even on hover/focus/active */
.home-bicon-primary,
.home-bicon-primary:hover,
.home-bicon-primary:focus,
.home-bicon-primary:active {
  color: #111 !important;
  border-color: transparent !important;
  background: var(--accent) !important; /* already set, reinforces state */
  box-shadow: 0 8px 22px rgba(244,144,33,.25);
}

/* Optional: keep the svg matching the text color (already uses currentColor) */
#hfWouldBid svg { fill: currentColor; }

/* Optional: nudge the sublabel appearance */
.home-bid-sub{
  font-size:.72rem; line-height:1; opacity:.85; margin-top:-2px;
}



/*
@media (min-width: 900px){
  .home-bottomnav{ display: none !important; }
}
*/

/* Desktop side panel content (optional) */
.home-aside{
  display:none; background:var(--card, #141414);
  border:1px solid var(--line); border-radius:12px; padding:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
@media (min-width: 900px){ .home-aside{ display:block; } }

.home-aside h2{ margin:.25rem 0 .5rem; font-size:1.2rem; }
.home-aside p{ color:#e1e1e1; line-height:1.55; }
.home-list{ margin:.5rem 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.home-list li{ position:relative; padding-left:22px; }
.home-list li::before{ content:"›"; position:absolute; left:0; top:0; color:var(--accent); font-weight:900; }

/* Tap highlights in Yellow orange 
.home-card, .home-storybars { -webkit-tap-highlight-color: rgba(255,211,77,.35); }*/

.home-card { -webkit-tap-highlight-color: transparent; }
/*.home-storybars { -webkit-tap-highlight-color: rgba(255,211,77,.35); } */
.home-storybars { -webkit-tap-highlight-color: transparent; } 

/* These should never intercept clicks */
.home-banner, .home-prompt, .home-overlay-top, .home-overlay-bottom { pointer-events: none; }

/* Toast above the fixed bar */
#ouToast{ bottom:calc(var(--footbar-h) + var(--safe-area-inset-bottom, 0px) + 14px) !important; }

/* ---- Desktop compact strip (full-width, small footprint) ---- */
:root{ --strip-h: 72px; }

.home-strip{ display:none; } /* hidden on mobile */
@media (min-width: 900px){
  .home-strip{
    display:block; height: var(--strip-h);
    border:1px solid var(--line); border-radius: 12px;
    background: var(--card, #141414); box-shadow: 0 8px 24px rgba(0,0,0,.25);
    padding: 10px 12px;
  }
  .home-strip-inner{
    display:flex; gap:10px; align-items:center; height:100%; overflow:auto;
  }
  .home-chip{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px; border:1px solid var(--line); border-radius:999px;
    color:#e6e6e6; background:#1b1b1b; white-space:nowrap;
  }
  .home-chip .g{ opacity:.9; }
  .home-chip-cta .link{ color:#fff; text-decoration:none; }
  .home-chip-cta .link:hover{ color: var(--accent); }
}

/* ---- Large deck below the strip (desktop) ---- */
.home-deck-wide{ margin-top: 12px; }

@media (min-width: 900px){
  .home-deck-wide .home-deck{
    /* Tall + wide, not "phone-like" */
    height: clamp(560px, calc(100svh - var(--topbar-h) - var(--strip-h) - 32px), 1000px);
    width: 100%;
    border-radius: var(--radius-lg); overflow: hidden; background:#000;
    box-shadow: 0 20px 44px rgba(0,0,0,.35);
  }
  .home-deck-wide .home-img{
    width:100%; height:100%; object-fit: contain; background:#000; /* show full mask */
  }
}

/* Ensure edge tap zones are always above the video */
.home-edge{
  position:absolute; top:0; bottom:0; width:22%;
  z-index:60; pointer-events:auto;
  -webkit-tap-highlight-color: rgba(244,144,33,.35);
  touch-action: manipulation;        /* removes 300ms delay on some browsers */
}
.home-edge.left{ left:0; }
.home-edge.right{ right:0; }
.home-edge:active{ background: rgba(255,211,77,.14); }

/* ---- Video containment – letterbox by HEIGHT (great for Shorts) ---- */
.home-deck.video-mode{ position:relative; }
.home-deck.video-mode .yt-wrap{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#000; z-index:1;            /* under overlays & edges */
}
.home-deck.video-mode .yt-inner{
  height:100%; width:auto;
  aspect-ratio: var(--yt-ar, 9 / 16);
  max-width:100%;
}
.home-deck.video-mode .yt-inner iframe{
  display:block; width:100%; height:100%; border:0; background:#000;
}

/* Prevent unexpected scroll jumps when the iframe UI changes size */
.home-deck, .home-deck .yt-wrap, .home-deck .yt-inner{ overflow-anchor:none; }
.home-deck, .yt-wrap { overscroll-behavior: contain; }

/* Orange tip bubble (for side-navigation hint on video slides) */
.home-tip{
  background: var(--accent);
  color:#111;
  border:1px solid var(--accent);
  font-weight:700;
}


/* Show a rotate overlay and disable interactions when in landscape on small screens */
@media (orientation: landscape) and (max-width: 900px) {
  body.home .rotate-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.78);
    color: #fff;
    text-align: center;
    padding: 24px;
  }
  body.home .rotate-overlay .pill {
    background: var(--accent);
    color: #111;
    border: 1px solid var(--accent);
    border-radius: 999px;
    font-weight: 800;
    padding: 10px 14px;
    display: inline-block;
  }
  /* Optional: dim deck interactions while in landscape */
  body.home .home-deck,
  body.home .home-bottomnav { pointer-events: none; filter: grayscale(.4) blur(1px); }
}


/* Kill image long-press menu & drag handles where possible */
.home-img {
  -webkit-touch-callout: none;   /* iOS Safari */
  -webkit-user-drag: none;       /* Safari/WebKit */
  user-select: none;             /* General */
  -webkit-user-select: none;
  pointer-events: auto;          /* we still let it receive pointer events */
}


/* Super Like hold progress for the Like button */
.home-bottomnav #hfLike {
  position: relative;
  overflow: visible; /* ensure ring can render clean edges */
}

.hold-ring{
  position:absolute;
  inset:-2px;               /* a hair outside the button bounds */
  border-radius:12px;       /* match button radius */
  pointer-events:none;
  opacity:0;
  transition: opacity .12s linear;
  /* ring look */
  background: transparent;  /* updated live via JS conic-gradient */
  -webkit-mask:
    radial-gradient(transparent calc(100% - 3px), #000 0); /* donut cutout */
          mask:
    radial-gradient(transparent calc(100% - 3px), #000 0);
}


/* details */

.home .home-card .home-final-slide{
  position: absolute; inset: 0;
  background: #0b0b0b; color: #f4f4f4;
  border-radius: 12px;
  overflow: auto;

  /* hidden by default (no display:none to avoid layout thrash) */
  opacity: 0; visibility: hidden; pointer-events: none;
  z-index: 30;
  transition: opacity .18s ease, visibility .18s ease;
}

/* When last slide is active, reveal & take interaction */
.home #pathCard.show-final .home-final-slide{
  opacity: 1; visibility: visible; pointer-events: auto;
}


/* While final is up, hide text overlays only (media may stay underneath) */
.home #pathCard.show-final .home-overlay-top,
.home #pathCard.show-final .home-overlay-bottom{
  display: none !important;
}

/* Prevent media layers from eating taps while final is shown */
.home #pathCard.show-final .yt-wrap,
.home #pathCard.show-final iframe,
.home #pathCard.show-final .home-img{
  pointer-events: none !important;
}

/* 5) Final slide inner layout (keeps your previous proportions) */
.home .hf-final-inner{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
  padding: 14px;
}
.home .hf-final-hero{
  min-height: 220px;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  display: flex; align-items: center; justify-content: center;
}
.home .hf-final-hero img{ max-width: 100%; height: auto; display: block; }
.home .hf-h{ font-weight: 700; margin: 0 0 2px; }
.home .hf-sub{ color: #bbb; margin: 0 0 10px; font-size: .95rem; }
.home .hf-section{ margin-top: 14px; }
.home .hf-grid{ display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .95rem; }
.home .hf-grid dt{ color: #c8c8c8; }
.home .hf-grid dd{ margin: 0; }
.home .hf-finder{ display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; }
.home .hf-finder .hf-avatar{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #222; }
.home .hf-actions{ display: flex; gap: 8px; margin-top: 10px; }
.home .btn-yellow{ background:#FFD34D; border:0; color:#111; border-radius:999px; padding:8px 14px; font-weight:700; cursor:pointer; }
.home .btn-ghost{ background:transparent; border:1px solid #444; color:#ddd; border-radius:999px; padding:8px 12px; cursor:pointer; }

@media (max-width: 900px){
  .home .hf-final-inner{ grid-template-columns: 1fr; }
}

/* ===== Details slide: full-bleed dimmed background ===== */

/* Use a ::before layer as the background image */
.home .home-card .home-final-slide{
  position: absolute; inset: 0;
  background: #0b0b0b; color: #f4f4f4;
  border-radius: 12px; overflow: auto;
  opacity: 0; visibility: hidden; pointer-events: none;
  z-index: 30;
  transition: opacity .18s ease, visibility .18s ease;
}

/* Background layer fed via CSS var --hf-bg */
.home .home-card .home-final-slide::before{
  content: "";
  position: absolute; inset: 0;
  background: center / cover no-repeat var(--hf-bg, none);
  filter: brightness(.35);           /* dim for readability */
  z-index: 0;                        /* under the content */
}

/* Show the final slide when JS adds .show-final */
.home #pathCard.show-final .home-final-slide{
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* Keep overlays hidden while final is up */
.home #pathCard.show-final .home-overlay-top,
.home #pathCard.show-final .home-overlay-bottom{
  display: none !important;
}

/* Prevent underlying media from eating taps */
.home #pathCard.show-final .yt-wrap,
.home #pathCard.show-final iframe,
.home #pathCard.show-final .home-img{
  pointer-events: none !important;
}

/* Content on top of the background */
.home .hf-final-inner{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
  padding: 14px;
}

/* Hide the in-panel hero image block; we’re using bg instead */
.home .hf-final-hero{ display: none; }

.home .hf-h{ font-weight: 700; margin: 0 0 2px; }
.home .hf-sub{ color: #bbb; margin: 0 0 10px; font-size: .95rem; }
.home .hf-section{ margin-top: 14px; }
.home .hf-grid{ display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .95rem; }
.home .hf-grid dt{ color: #c8c8c8; }
.home .hf-grid dd{ margin: 0; }
.home .hf-finder{ display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; }
.home .hf-finder .hf-avatar{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #222; }
.home .hf-actions{ display: flex; gap: 8px; margin-top: 10px; }
.home .btn-yellow{ background:#FFD34D; border:0; color:#111; border-radius:999px; padding:8px 14px; font-weight:700; cursor:pointer; }
.home .btn-ghost{ background:transparent; border:1px solid #444; color:#ddd; border-radius:999px; padding:8px 12px; cursor:pointer; }

@media (max-width: 900px){
  .home .hf-final-inner{ grid-template-columns: 1fr; }
  .home .hf-finder { grid-template-columns: 92px 1fr; }
  .home .hf-finder .hf-avatar { width: 92px; height: 92px; }
}

#hfStory, #hfAcquired { white-space: pre-wrap; }


/* Finder avatar size bump */
.home .hf-finder {
  grid-template-columns: 72px 1fr; /* was 48px 1fr */
}
	
.home .hf-finder .hf-avatar {
  width: 72px;           /* was 48px */
  height: 72px;          /* was 48px */
  border-radius: 50%;
  object-fit: cover;
  background: #222;
  border: 1px solid #2a2a2a; /* adds a subtle ring so it pops on dark bg */
}


/*--------------------10-19-25 Refresh fix------------------------------------*/

/* Prevent pull-to-refresh on Android/Chromium (safe, no layout changes) */
@supports (overscroll-behavior-y: none){
  html, body{
    overscroll-behavior-y: none;
  }
}

/* Optional: allow horizontal panning + pinch, hint to browsers */
body{
  touch-action: pan-x pinch-zoom;
}


/*-------------- button spacing desktop -----------------/*

/* home — unclip bottom buttons by a few px */
body.home .home-bottomnav{
  box-sizing: border-box;
  height: auto;  /* let the content define final height */
  min-height: calc(var(--footbar-h) + var(--safe-bottom)); /* same visual target */
  padding: 3px 3px calc(6px + var(--safe-bottom));      /* +2px breathing room */
  align-items: center;                                      /* keep buttons centered */
}


/* Desktop: when final/details slide is shown, put it ABOVE the tap edges
   and disable the RIGHT edge so the scrollbar area is safe. */
@media (min-width: 900px){
  /* Raise the final/details slide above .home-edge (which is z-index:60) */
  #pathCard.show-final .home-final-slide{
    z-index: 180 !important;       /* above the edges */
    pointer-events: auto;          /* take the events */
    touch-action: pan-y;           /* vertical scroll intent */
  }

  /* Right edge won't eat scrollbar clicks while final is up */
  #pathCard.show-final .home-edge.right{
    pointer-events: none !important;
  }
}


/* Desktop: when the Details panel (#hfFinal) is visible, disable the right edge
   and ensure the details panel sits above the edges so its scrollbar is usable. */
@media (min-width: 900px){

  /* If your JS toggles aria-hidden="false" when open, this will match */
  body.home:has(#hfFinal[aria-hidden="false"]) .home-edge.right{
    pointer-events: none !important;
  }

  /* Also support the older "show-final" toggle if you use it */
  body.home:has(#pathCard.show-final) .home-edge.right{
    pointer-events: none !important;
  }

  /* Put the final/details slide above the edges (edges were z-index:60) */
  #hfFinal[aria-hidden="false"],
  #pathCard.show-final .home-final-slide{
    z-index: 80 !important;
    pointer-events: auto;
    touch-action: pan-y;      /* vertical scrolling intent */
  }

  /* (Optional) give the details pane a tiny right inset so the scrollbar
     isn’t exactly under the old tap zone edge on some browsers */
  #hfFinal[aria-hidden="false"]{
    padding-right: 14px;      /* adjust if you like */
    box-sizing: border-box;
  }
}


/* Final/details open: allow vertical scroll + pinch, discourage horizontal swipe */
#hfFinal[aria-hidden="false"]{
  touch-action: pan-y pinch-zoom;
}


/* Details open on desktop: keep right scrollbar free but let right-edge taps work. */
@media (min-width: 900px){
  /* Reserve a 16px gutter on the far right solely for the scrollbar. */
  body.home:has(#hfFinal[aria-hidden="false"]) .home-edge.right{
    right: 16px;                           /* shift the hit zone left */
    width: calc(22% - 16px);               /* same tap area, minus gutter */
    z-index: 100;                           /* above the details layer */
  }

  /* Keep the details panel scrollable and under the edges except in the gutter. */
  #hfFinal[aria-hidden="false"]{
    z-index: 80;                            /* below the edge taps */
    pointer-events: auto;
    touch-action: pan-y;                    /* vertical scroll only */
  }
}