/* ALFa Curtis Alfrey meme — replicates rankings-bot CurtisAlfreyMeme.tsx look.
   Phones (<768px): in normal flow (footer) so it never overlaps content.
   iPad + desktop (>=768px): fixed bottom-left collapsible overlay that slides
   off the left edge (~300ms, mirroring the Pro Billiards sidebar) with a
   left-edge reopen handle. */

.alfa-curtis-meme {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 300px;
  margin: 1.5rem auto 1rem;
  pointer-events: none;
}

.alfa-curtis-meme__slider {
  position: relative;
}

.alfa-curtis-meme__card {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid rgba(71, 85, 105, 0.6); /* slate-600/60 */
  background: #000;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Collapse control + reopen handle: only used on the >=768px overlay. */
.alfa-curtis-meme__collapse,
.alfa-curtis-meme__handle {
  display: none;
}

.alfa-curtis-meme__video {
  display: block;
  width: 100%;
  height: auto;
}

/* Speech-label captions */
.alfa-curtis-meme__cap {
  position: absolute;
  margin: 0;
  font-size: 6px;
  line-height: 1.1;
  font-weight: 700;
  text-align: center;
  color: #000;
  padding: 1px 4px;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.alfa-curtis-meme__cap--tl {
  left: 2%;
  top: 2%;
  width: 40%;
  background: rgba(254, 202, 202, 0.95); /* red-200 */
  border: 1px solid #f87171; /* red-400 */
  transform: rotate(-1deg);
}

.alfa-curtis-meme__cap--tr {
  right: 2%;
  top: 2%;
  width: 52%;
  background: rgba(253, 224, 71, 0.95); /* yellow-300 */
  border: 1px solid #eab308; /* yellow-500 */
  transform: rotate(1deg);
}

.alfa-curtis-meme__cap--bl {
  left: 2%;
  bottom: 2%;
  width: 52%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #94a3b8; /* slate-400 */
}

@media (min-width: 640px) {
  .alfa-curtis-meme__cap {
    font-size: 7px;
  }
}

/* iPad + desktop: fixed bottom-left collapsible overlay (matches variant="fixed") */
@media (min-width: 768px) {
  .alfa-curtis-meme__cap {
    font-size: 8px;
  }
  .alfa-curtis-meme {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 35;
    width: min(calc(100vw - 2rem), 380px);
    max-width: none;
    margin: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
  }
  .alfa-curtis-meme__slider {
    transition: transform 0.3s ease-in-out;
    transform: translateX(0);
  }
  .alfa-curtis-meme--collapsed .alfa-curtis-meme__slider {
    transform: translateX(calc(-100% - 1.5rem));
  }
  .alfa-curtis-meme__collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    z-index: 1;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border-radius: 9999px;
    border: 1px solid rgba(100, 116, 139, 0.7); /* slate-500/70 */
    background: rgba(15, 23, 42, 0.8); /* slate-900/80 */
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .alfa-curtis-meme__collapse:hover {
    background: rgba(30, 41, 59, 0.9); /* slate-800 */
  }
  .alfa-curtis-meme__handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    position: fixed;
    left: 0;
    bottom: 2rem;
    z-index: 36;
    padding: 0.5rem 0.375rem;
    border: 1px solid rgba(100, 116, 139, 0.7); /* slate-500/70 */
    border-left: 0;
    border-radius: 0 0.5rem 0.5rem 0;
    background: rgba(15, 23, 42, 0.85); /* slate-900/85 */
    color: #fff;
    cursor: pointer;
    pointer-events: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }
  .alfa-curtis-meme__handle:hover {
    background: rgba(30, 41, 59, 0.9); /* slate-800 */
  }
  .alfa-curtis-meme--collapsed .alfa-curtis-meme__handle {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
  .alfa-curtis-meme__handle-arrow {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
  }
  .alfa-curtis-meme__handle-film {
    font-size: 10px;
    line-height: 1;
  }
}

@media (min-width: 1280px) {
  .alfa-curtis-meme {
    width: 420px;
  }
}