/**
 * Scaredy Cat - Blur Overlay Styles
 * Styling for the horror content blocking UI.
 *
 * Sizing model: the wrapper is a size container and every part of the
 * overlay scales fluidly with the blocked element via container-query
 * units (cqmin = 1% of the container's smaller dimension), clamped to
 * sane minimums/maximums. Discrete @container tiers only change LAYOUT:
 *  - >= 360x220 ............. full card: heading, subtext, both pills,
 *                             confirm flow (gate mirrored in blocker.js)
 *  - default (medium) ....... compact card: emoji + label + Show + "?" pill
 *  - <= 200px wide .......... button label shortens to "Show"
 *  - <= 120px either axis ... card chrome drops away (emoji + pill only)
 *  - <= 130px tall .......... stack rotates horizontal for banners
 *
 * Motion model (DESIGN.md §5): blocking is instant and leak-free — the
 * hidden element, the scrim and the dark wrapper all land on the first
 * frame; only the cream card animates in. Revealing is one coordinated
 * 250ms ease-out (element opacity rises, scrim fades), driven by the
 * .scaredycat-revealing class for exactly that window.
 *
 * Two consumers: the welcome page links this file as a plain stylesheet,
 * and content/blocker.js adopts it inside each card's closed shadow root,
 * where .scaredycat-wrapper is the frame around the card. In the extension
 * the blocked element and the light-DOM wrapper are styled inline by
 * blocker.js (BLOCKED_STYLE and the wrapper setup), mirroring the
 * .scaredycat-blurred and .scaredycat-wrapper rules here.
 */

/* Wrapper container for blocked content */
.scaredycat-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
  /* Sized to the host element's box in px by blocker.js; a flex host must
     not shrink or stretch it away from that box. */
  flex: none;
  /* blocker.js copies the host element's computed border-radius onto the
     wrapper so rounded thumbnails keep their shape; 0 is the fallback. */
  border-radius: 0;
  background: #14141e; /* Solid dark background as fallback */
  container-type: size;
  container-name: scaredycat;

  /* Design tokens (canonical set — see DESIGN.md; names match popup.css) */
  --sc-page: #FDF8F0;
  --sc-card: #FFFCF5;
  --sc-lavender: #F1EBFA;
  --sc-plum: #2E2447;
  --sc-plum-hover: #42365E;
  --sc-body: #54496E;
  --sc-serif-body: #42365E;
  --sc-muted: #8D83A6;
  --sc-chip-bg: #E7F2E7;
  --sc-chip-ink: #3E6E4A;
  --sc-serif: 'Fraunces', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sc-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --sc-display: 'Bricolage Grotesque', var(--sc-sans);
}

/* Blocked element. No transition here: hiding must land on the very first
   frame the class is present, never animate in from visible. No filter
   either: under the 0.97 scrim a dimmed element shows nothing, and a large
   blur filter costs a full repaint of the element for no visible gain. */
.scaredycat-blurred {
  transition: none !important;
  pointer-events: none !important; /* Prevent interaction with blurred content */
  opacity: 0.3 !important;
}

/* Reveal only: added in the same task that removes .scaredycat-blurred, so
   the after-change style carries the transition and opacity eases in
   together with the scrim fade. Removed on transitionend. */
.scaredycat-revealing {
  transition: opacity 250ms ease-out !important;
}

/* Ensure videos can't play while blurred */
video.scaredycat-blurred,
iframe.scaredycat-blurred {
  pointer-events: none !important;
  opacity: 0 !important; /* Completely hide video/iframe content */
}

/* Overlay on top of blurred content. A freshly inserted overlay has no
   before-change style, so the scrim appears at full alpha immediately; the
   transition only ever runs on the way out (.scaredycat-fade-out). */
.scaredycat-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 20, 30, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 250ms ease-out;
  border-radius: inherit;
  user-select: none;
  -webkit-user-select: none;
}

/* Fade out animation for overlay */
.scaredycat-overlay.scaredycat-fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Message container — all dimensions fluid in the container's scale.
   The overlay lives in the host page's DOM, so the card carries explicit
   resets against page CSS bleeding in. */
.scaredycat-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 3.5cqmin, 14px);
  padding: clamp(8px, 6cqmin, 26px) clamp(10px, 7cqmin, 32px);
  background: var(--sc-card);
  border-radius: clamp(8px, 5cqmin, 24px);
  /* Token shadow + dark ambient shadow: the card sits on a near-black backdrop */
  box-shadow: 0 10px 30px rgba(46, 36, 71, 0.18), 0 4px 24px rgba(0, 0, 0, 0.35);
  max-width: 92%;
  max-height: 92%;
  box-sizing: border-box;
  text-align: center;
  font-family: var(--sc-sans);
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  /* Only the card animates in; the scrim behind it is already opaque. */
  animation: scaredycat-card-in 220ms ease-out;
}

/* State swap (blocked -> confirm -> synopsis): a quiet fade-in of the new card */
.scaredycat-message--swap {
  animation: scaredycat-card-swap 150ms ease-out;
}

.scaredycat-message * {
  box-sizing: border-box;
}

/* Cat emoji icon */
.scaredycat-icon {
  font-size: clamp(18px, 20cqmin, 64px);
  line-height: 1;
}

/* Full-card heading + subtext — hidden until the large tier */
.scaredycat-heading {
  display: none;
  margin: 0;
  font-family: var(--sc-display);
  font-size: clamp(15px, 6cqmin, 26px);
  font-weight: 700;
  color: var(--sc-plum);
  line-height: 1.2;
}

.scaredycat-subtext {
  display: none;
  margin: 0;
  font-size: clamp(11px, 4cqmin, 16px);
  font-weight: 400;
  color: var(--sc-body);
  line-height: 1.4;
}

/* Compact label (medium tier and below) */
.scaredycat-text {
  font-size: clamp(11px, 6.5cqmin, 19px);
  font-weight: 600;
  color: var(--sc-plum);
  margin: 0;
  line-height: 1.25;
}

/* Button row */
.scaredycat-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(5px, 3cqmin, 12px);
  max-width: 100%;
}

/* Pill buttons */
.scaredycat-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4px, 3cqmin, 12px) clamp(8px, 6cqmin, 26px);
  font-size: clamp(10px, 5.5cqmin, 16px);
  font-weight: 600;
  font-family: var(--sc-sans);
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  max-width: 100%;
}

.scaredycat-btn--primary {
  background: var(--sc-plum);
  color: var(--sc-card);
  border: none;
}

.scaredycat-btn--primary:hover {
  background: var(--sc-plum-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46, 36, 71, 0.35);
}

.scaredycat-btn--secondary {
  background: transparent;
  color: var(--sc-plum);
  border: 2px solid rgba(46, 36, 71, 0.25);
}

.scaredycat-btn--secondary:hover {
  border-color: var(--sc-plum);
  transform: translateY(-1px);
}

.scaredycat-btn:active {
  transform: translateY(0);
}

.scaredycat-btn:focus-visible {
  outline: 2px solid var(--sc-plum);
  outline-offset: 2px;
}

/* "Just tell me what happens" — full pill only on the large tier */
.scaredycat-spoil-btn {
  display: none;
}

/* "?" synopsis affordance for medium tiles (poster grids) */
.scaredycat-help-btn {
  width: clamp(20px, 9cqmin, 30px);
  height: clamp(20px, 9cqmin, 30px);
  padding: 0;
  border-radius: 50%;
  font-size: clamp(11px, 5cqmin, 15px);
  flex: none;
}

/* Two button labels; the short one swaps in on narrow tiles */
.scaredycat-btn-short {
  display: none;
}

/* ---- Tier: large tiles (players, heroes) — the full landing-page card ---- */
@container scaredycat ((min-width: 360px) and (min-height: 220px)) {
  .scaredycat-heading,
  .scaredycat-subtext {
    display: block;
  }

  .scaredycat-spoil-btn {
    display: inline-flex;
  }

  .scaredycat-text,
  .scaredycat-help-btn {
    display: none;
  }

  .scaredycat-message {
    gap: clamp(8px, 3cqmin, 16px);
    padding: clamp(18px, 6cqmin, 36px) clamp(22px, 7cqmin, 44px);
  }

  .scaredycat-icon {
    font-size: clamp(34px, 12cqmin, 56px);
  }

  .scaredycat-actions {
    margin-top: clamp(2px, 1.5cqmin, 8px);
  }
}

/* ---- Synopsis state: roomier, left-aligned, serif editorial voice ---- */
.scaredycat-overlay[data-state="synopsis"] .scaredycat-message {
  align-items: flex-start;
  text-align: left;
  max-width: min(640px, 94cqw);
  max-height: 92cqh;
  overflow-y: auto;
  gap: clamp(6px, 3cqmin, 14px);
}

.scaredycat-syn-title {
  margin: 0;
  font-family: var(--sc-serif);
  font-weight: 700;
  font-size: clamp(15px, 7cqmin, 28px);
  line-height: 1.15;
  color: var(--sc-plum);
}

.scaredycat-syn-meta {
  font-family: var(--sc-sans);
  font-weight: 400;
  font-size: 0.78em;
  color: var(--sc-muted);
}

.scaredycat-syn-body {
  margin: 0;
  font-family: var(--sc-serif);
  font-size: clamp(12px, 4.5cqmin, 17px);
  line-height: 1.55;
  color: var(--sc-serif-body);
  max-width: 60ch;
}

/* "Spoiled safely" — dashed stamp chip, slightly rotated like a hand stamp */
.scaredycat-badge {
  display: inline-block;
  padding: clamp(3px, 2cqmin, 8px) clamp(8px, 4cqmin, 14px);
  border-radius: 999px;
  background: var(--sc-chip-bg);
  border: 1.5px dashed var(--sc-chip-ink);
  color: var(--sc-chip-ink);
  font-size: clamp(10px, 4cqmin, 14px);
  font-weight: 600;
  white-space: nowrap;
  transform: rotate(-1.5deg);
}

.scaredycat-overlay[data-state="synopsis"] .scaredycat-actions {
  justify-content: flex-start;
}

/* ---- Tier: narrow tiles — shorten the button label ---- */
@container scaredycat (max-width: 200px) {
  .scaredycat-btn-full {
    display: none;
  }

  .scaredycat-btn-short {
    display: inline;
  }
}

/* ---- Tier: tiny tiles — drop the card, keep emoji + pill ---- */
@container scaredycat ((max-width: 120px) or (max-height: 120px)) {
  .scaredycat-message {
    background: none;
    box-shadow: none;
    padding: 4px;
    gap: clamp(3px, 4cqmin, 8px);
  }

  .scaredycat-text,
  .scaredycat-help-btn {
    display: none;
  }

  .scaredycat-icon {
    font-size: clamp(16px, 26cqmin, 40px);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
  }

  .scaredycat-btn--secondary {
    background: var(--sc-card);
    border-color: transparent;
  }

  .scaredycat-btn-full {
    display: none;
  }

  .scaredycat-btn-short {
    display: inline;
  }
}

/* ---- Tier: short-and-wide tiles (banners, strips) — go horizontal ---- */
@container scaredycat ((max-height: 130px) and (min-width: 200px)) {
  .scaredycat-message {
    flex-direction: row;
    gap: clamp(6px, 4cqh, 14px);
    padding: clamp(4px, 6cqh, 12px) clamp(10px, 5cqw, 24px);
  }

  .scaredycat-icon {
    font-size: clamp(16px, 40cqh, 36px);
  }

  .scaredycat-text {
    font-size: clamp(11px, 22cqh, 15px);
    white-space: nowrap;
  }

  .scaredycat-btn {
    font-size: clamp(10px, 20cqh, 14px);
    padding: clamp(3px, 8cqh, 8px) clamp(8px, 4cqw, 16px);
  }

  .scaredycat-help-btn {
    width: clamp(18px, 30cqh, 26px);
    height: clamp(18px, 30cqh, 26px);
    padding: 0;
  }
}

/* "Hide again" pill on revealed content — plum glass over the image, scales
   with the tile. Hidden until the tile is hovered OR focused: keyboard users
   tab onto it and see it, and pointer users get it on hover. */
.scaredycat-hide-again-btn {
  position: absolute;
  bottom: clamp(4px, 2.5cqmin, 10px);
  right: clamp(4px, 2.5cqmin, 10px);
  padding: clamp(3px, 2cqmin, 7px) clamp(8px, 4cqmin, 14px);
  font-size: clamp(9px, 4cqmin, 13px);
  font-weight: 600;
  font-family: var(--sc-sans);
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: var(--sc-card);
  background: rgba(46, 36, 71, 0.85);
  border: 1px solid rgba(255, 252, 245, 0.18);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
  z-index: 9998;
}

.scaredycat-wrapper:hover .scaredycat-hide-again-btn,
.scaredycat-wrapper:focus-within .scaredycat-hide-again-btn,
.scaredycat-hide-again-btn:focus-visible {
  opacity: 1;
}

.scaredycat-hide-again-btn:hover {
  background: var(--sc-plum-hover);
}

/* Cream ring: the pill sits over arbitrary host imagery, not a cream card */
.scaredycat-hide-again-btn:focus-visible {
  outline: 2px solid var(--sc-card);
  outline-offset: 2px;
}

/* No hover on touch devices: keep the pill discoverable at rest */
@media (hover: none) {
  .scaredycat-hide-again-btn {
    opacity: 0.85;
  }
}

/* Card entrance — the scrim is already opaque, so this can never leak */
@keyframes scaredycat-card-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaredycat-card-swap {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* The card stays cream in dark mode by design — the dark overlay backdrop
   provides the contrast, and the cream card is the brand. */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .scaredycat-overlay {
    background: rgba(0, 0, 0, 0.8);
  }

  .scaredycat-message {
    border: 2px solid #000;
  }

  .scaredycat-btn--primary {
    border: 2px solid #fff;
  }

  .scaredycat-btn--secondary {
    border: 2px solid var(--sc-plum);
  }
}

/* Reduced motion support — every surface goes instant, no exceptions */
@media (prefers-reduced-motion: reduce) {
  .scaredycat-revealing {
    transition: none !important;
  }

  .scaredycat-overlay,
  .scaredycat-overlay.scaredycat-fade-out {
    transition: none;
  }

  .scaredycat-message,
  .scaredycat-message--swap {
    animation: none;
  }

  .scaredycat-btn,
  .scaredycat-hide-again-btn {
    transition: none;
  }
}

/* Ensure wrapper doesn't break layouts */
.scaredycat-wrapper {
  vertical-align: top;
}

/* Handle inline images */
img.scaredycat-blurred {
  display: block;
  width: 100%;
  height: auto;
}

/* Handle video elements */
video.scaredycat-blurred {
  display: block;
  width: 100%;
}

/* Handle iframe elements */
iframe.scaredycat-blurred {
  display: block;
  width: 100%;
  pointer-events: none !important;
}

/* Ensure iframes are fully covered */
.scaredycat-wrapper iframe {
  position: relative;
}

/* Z-index management to stay on top of most content */
.scaredycat-wrapper {
  isolation: isolate;
}