/* cs.css */
:root{
  --bg0:#18000a;
  --bg1:#2a0013;

  --card: rgba(28, 6, 14, 0.86);
  --card2: rgba(255, 234, 244, 0.10);
  --border: rgba(255,255,255,0.14);

  --ink:#fff7fb;
  --muted: rgba(255, 247, 251, 0.74);

  --pink:#ff4db8;
  --hot:#ff2e6e;
  --rose:#ff7aa9;
  --cherry:#ff1f55;
  --blush:#ffd7e6;

  --good:#ff4db8;
  --bad:#ff5576;

  --radius-lg: 22px;
  --radius-md: 14px;
  --pill: 999px;

  --shadow: 0 18px 46px rgba(0,0,0,0.65);
  --fast: 0.14s ease;
    --heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath fill='%23fff' d='M50 15 C45 3 27 3 22 18 C18 33 33 43 50 58 C67 43 82 33 78 18 C73 3 55 3 50 15 Z'/%3E%3C/svg%3E");

}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
}

/* APP WRAPPER */
.cs_app{
  min-height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 1.5rem 0.75rem 5.2rem;

  background:
    radial-gradient(circle at 18% 18%, rgba(255, 77, 184, 0.18), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(255, 46, 110, 0.16), transparent 60%),
    radial-gradient(circle at 25% 85%, rgba(255, 122, 169, 0.12), transparent 55%),
    radial-gradient(circle at 70% 90%, rgba(255, 31, 85, 0.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  position:relative;
  overflow:hidden;
}

/* HEART CONFETTI PATTERN */
.cs_app::before{
  content:"";
  position:absolute;
  inset:-40%;
  opacity:0.22;
  pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none'%3E%3Cpath d='M35 45c0-8 6-14 14-14 6 0 11 3 13 8 2-5 7-8 13-8 8 0 14 6 14 14 0 16-27 27-27 27S35 61 35 45z' fill='%23ffd7e6' fill-opacity='0.8'/%3E%3Cpath d='M120 120c0-7 5-12 12-12 5 0 9 2 11 7 2-5 6-7 11-7 7 0 12 5 12 12 0 13-23 22-23 22s-23-9-23-22z' fill='%23ff7aa9' fill-opacity='0.7'/%3E%3Ccircle cx='92' cy='44' r='3' fill='%23ffffff' fill-opacity='0.35'/%3E%3Ccircle cx='18' cy='118' r='2' fill='%23ffffff' fill-opacity='0.28'/%3E%3Ccircle cx='154' cy='70' r='2.5' fill='%23ffffff' fill-opacity='0.25'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: confettiDrift 16s linear infinite;
}

@keyframes confettiDrift{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(90px, 55px, 0); }
}

/* FLOATING HEARTS LAYER */
.cs_app::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  opacity:0.18;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none'%3E%3Cpath d='M70 120c0-12 9-21 21-21 9 0 16 5 19 12 3-7 10-12 19-12 12 0 21 9 21 21 0 24-40 40-40 40s-40-16-40-40z' fill='%23ff4db8' fill-opacity='0.45'/%3E%3Cpath d='M160 70c0-9 7-16 16-16 7 0 12 4 14 9 2-5 7-9 14-9 9 0 16 7 16 16 0 18-30 30-30 30s-30-12-30-30z' fill='%23ffd7e6' fill-opacity='0.45'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 360px 360px;
  animation: floatUp 18s linear infinite;
}

@keyframes floatUp{
  0%{ transform: translate3d(0, 40px, 0); }
  100%{ transform: translate3d(0, -80px, 0); }
}

/* SCREENS */
.cs_screen{
  display:none;
  width:100%;
  max-width:1100px;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
}
.cs_screen.active{ display:flex; }

.cs_shell{ width:100%; padding:1.4rem; }

.cs_header{
  text-align:center;
  margin-bottom: 1.55rem;
  position:relative;
}
.cs_header h2{
  margin:0 0 0.25rem;
  font-size: 1.9rem;
  letter-spacing: 0.01em;
}
.cs_header--compact{ margin-bottom: 1.15rem; }

.cs_tagline{
  margin:0;
  color: var(--muted);
}

/* SKILL SCREEN: ADD A BIG "QUESTION-LIKE" BACKDROP PANEL */
#screen-skill .cs_shell{
  position:relative;
  border-radius: var(--radius-lg);
}
#screen-skill .cs_shell::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 122, 169, 0.22);
  box-shadow: 0 22px 60px rgba(0,0,0,0.78);
  background:
    linear-gradient(180deg, rgba(255, 234, 244, 0.10), rgba(22, 4, 10, 0.86)),
    linear-gradient(145deg, rgba(40, 8, 18, 0.90), rgba(22, 4, 10, 0.86));
  pointer-events:none;
}
#screen-skill .cs_shell > *{
  position:relative;
  z-index:1;
}

/* SKILL SCREEN BANNER ACCENTS */
#screen-skill .cs_header{
  padding-bottom: 0.95rem;
}
#screen-skill .cs_header::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0.25rem;
  transform: translateX(-50%);
  width:min(520px, 92%);
  height: 10px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 122, 169, 0.85) 0 2px, transparent 3px) center/18px 18px repeat-x;
  opacity:0.85;
}
#screen-skill .cs_header::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-0.15rem;
  transform: translateX(-50%);
  width:min(640px, 96%);
  height: 14px;
  background:
    radial-gradient(circle at 7px 7px, rgba(255, 215, 230, 0.42) 0 6px, transparent 7px) 0 0/20px 14px repeat-x;
  opacity:0.65;
}

/* CARDS */
.cs_card{
  position:relative;
  background: linear-gradient(145deg, rgba(40, 8, 18, 0.90), rgba(22, 4, 10, 0.86));
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.8rem;
}
.cs_card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 77, 184, 0.14), transparent 62%),
    radial-gradient(circle at 90% 35%, rgba(255, 46, 110, 0.12), transparent 60%),
    radial-gradient(circle at 30% 90%, rgba(255, 122, 169, 0.12), transparent 60%);
  pointer-events:none;
  opacity:0.95;
}
.cs_card > *{ position:relative; z-index:1; }
.cs_card--center{ margin:0 auto; text-align:center; }

/* START CARD LOOKS LIKE A GREETING CARD */
.start_card{
  max-width: 780px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 0.25rem;
  border-color: rgba(255, 122, 169, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 234, 244, 0.10), rgba(22, 4, 10, 0.88)),
    linear-gradient(145deg, rgba(40, 8, 18, 0.90), rgba(22, 4, 10, 0.86));
}
.start_card::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: calc(var(--radius-lg) - 10px);
  border: 1px dashed rgba(255, 215, 230, 0.38);
  pointer-events:none;
  opacity:0.9;
}
.start_card .cs_title{ position:relative; }
.start_card .cs_title::before,
.start_card .cs_title::after{
  content:"❤";
  position:absolute;
  top:-8px;
  font-size: 14px;
  opacity:0.7;
  color: rgba(255, 215, 230, 0.85);
  text-shadow: 0 10px 18px rgba(0,0,0,0.35);
}
.start_card .cs_title::before{ left:-18px; }
.start_card .cs_title::after{ right:-18px; }

.start_pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0.30rem 0.90rem;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 215, 230, 0.28);
  background: rgba(255, 234, 244, 0.10);
  color: rgba(255, 247, 251, 0.86);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cs_title{ margin: 0.65rem 0 0.2rem; }
.cs_title-top{
  display:block;
  font-size: 1.8rem;
  color: rgba(255, 247, 251, 0.80);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cs_title-main{
  display:block;
  font-size: 5.0rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--blush), var(--rose), var(--pink), var(--hot), var(--cherry));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 18px 38px rgba(0,0,0,0.55);
}
.cs_subtitle{
  margin: 0.3rem 0 1rem;
  color: var(--muted);
}
.cs_meta{
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.cover{
  width: 34rem;
  max-width: 100%;
  border-radius: 20px;
  margin: 0.5rem 0 0.75rem;
  border: 1px solid rgba(255,255,255,0.12);
}

/* BUTTONS */
.cs_btn{
  border-radius: var(--pill);
  border:none;
  padding: 0.75rem 1.6rem;
  font-weight: 800;
  cursor:pointer;
  transition: transform var(--fast), box-shadow var(--fast), filter var(--fast), opacity var(--fast);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 0.4rem;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.cs_btn-primary{
  background: linear-gradient(135deg, var(--blush), var(--rose), var(--pink), var(--hot));
  color: #2a0013;
  box-shadow: 0 14px 28px rgba(255, 46, 110, 0.28);
  font-size: 1.5rem;
}
.cs_btn-primary::after{
  content:"";
  position:absolute;
  inset:-40% -20%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.30) 45%, transparent 55%);
  transform: translateX(-40%) rotate(8deg);
  opacity:0.75;
  transition: transform 420ms ease;
  pointer-events:none;
}
.cs_btn-primary:hover::after{
  transform: translateX(40%) rotate(8deg);
}
.cs_btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 18px 34px rgba(255, 46, 110, 0.40); }

.cs_btn-ghost{
  background: rgba(255, 234, 244, 0.06);
  color: rgba(255, 247, 251, 0.86);
  border: 1px solid rgba(255, 215, 230, 0.20);
}
.cs_btn-ghost:hover{ filter: brightness(1.08); transform: translateY(-1px); }

/* TOPLINE */
.header_topline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap: 0.55rem 0.75rem;
  margin-bottom: 0.4rem;
}
.badge_round{
  font-size: 0.9rem;
  padding: 0.28rem 0.82rem;
  border-radius: var(--pill);
  background: rgba(255, 215, 230, 0.12);
  border: 1px solid rgba(255, 122, 169, 0.42);
}
.badge_round::before{
  content:"💌 ";
  opacity:0.9;
}
.badge_meta{
  font-size: 0.85rem;
  color: var(--muted);
}

/* SEARCH */
.skill_search{
  max-width: 460px;
  margin: 0 auto 1.1rem;
}
.skill_search-input{
  width:100%;
  border-radius: var(--pill);
  padding: 0.6rem 1rem;
  background: rgba(255, 234, 244, 0.08);
  border: 1px solid rgba(255, 215, 230, 0.22);
  color: var(--ink);
  outline:none;
}
.skill_search-input:focus{
  border-color: rgba(255, 122, 169, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 122, 169, 0.16);
}

/* highlight */
mark{
  background: rgba(255, 215, 230, 0.22);
  color: var(--ink);
  padding: 0 0.15em;
  border-radius: 6px;
}

/* SKILLS */
.skill_sections{ display:flex; flex-direction:column; gap: 1.8rem; }
.skill_section-head h3{ margin:0 0 0.25rem; font-size: 1.35rem; }
.skill_section-head p{ margin:0 0 0.9rem; color: var(--muted); }

.skill_topic-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem;
}

.skill_card{
  background:
    radial-gradient(circle at 25% 25%, rgba(255, 215, 230, 0.12), transparent 60%),
    radial-gradient(circle at 85% 65%, rgba(255, 46, 110, 0.10), transparent 62%),
    rgba(255, 234, 244, 0.06);
  border-radius: 18px;
  border: 1px solid rgba(255, 215, 230, 0.16);
  box-shadow: var(--shadow);
  padding: 1.05rem 1.15rem;
  display:flex;
  flex-direction:column;
  gap: 0.75rem;
  transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast), filter var(--fast);
  position:relative;
  overflow:hidden;
}
.skill_card::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  transform: translateX(-35%) rotate(10deg);
  opacity:0;
  transition: opacity 220ms ease, transform 520ms ease;
  pointer-events:none;
}
.skill_card:hover::after{
  opacity:0.65;
  transform: translateX(35%) rotate(10deg);
}
.skill_card:hover{
  transform: translateY(-3px);
  border-color: rgba(255, 122, 169, 0.42);
  box-shadow: 0 22px 56px rgba(0,0,0,0.78);
  filter: brightness(1.04);
}

.skill_card-main h4{ margin:0 0 0.2rem; font-size: 1.05rem; }
.skill_card-main p{ margin:0; color: rgba(255,247,251,0.86); font-size: 0.86rem; }

.skill_card-meta{ margin:0; font-size: 0.82rem; color: var(--muted); }

/* SELECTED: MAKE IT OBVIOUS */
.skill_card.selected{
  border-color: rgba(255, 77, 184, 0.70);
  box-shadow:
    0 0 0 2px rgba(255, 77, 184, 0.18),
    0 26px 66px rgba(0,0,0,0.82);
  transform: translateY(-4px) scale(1.01);
  filter: brightness(1.06);
}
.skill_card.selected::before{
  content:"Picked";
  position:absolute;
  right: 12px;
  top: 12px;
  padding: 0.22rem 0.62rem;
  border-radius: 12px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(42, 0, 19, 0.95);
  background: rgba(255, 215, 230, 0.90);
  border: 1px solid rgba(255, 31, 85, 0.35);
  transform: rotate(8deg);
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
  z-index: 3;
}

/* HEART-MORPH VANISH FOR SKILL CARDS */
.skill_card.morph-heart{
  animation: skillVanish 520ms ease forwards;
  pointer-events:none;
}
@keyframes skillVanish{
  0%{ opacity:1; transform: translateY(-4px) scale(1.01); }
  60%{ opacity:1; transform: translateY(-6px) scale(1.06); }
  100%{ opacity:0; transform: translateY(-14px) scale(1.08); }
}

/* a heart-shaped "core" appears while the card disappears */
.skill_card.morph-heart .skill_card-main,
.skill_card.morph-heart .skill_card-meta,
.skill_card.morph-heart .skill_grades{
  opacity:0.0;
  transition: opacity 120ms ease;
}

.skill_card.morph-heart::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  opacity:0;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 215, 230, 0.30), transparent 58%),
    radial-gradient(circle at 70% 55%, rgba(255, 46, 110, 0.20), transparent 60%),
    linear-gradient(135deg, rgba(255, 215, 230, 0.25), rgba(255, 77, 184, 0.18), rgba(255, 46, 110, 0.15));

  /* heart mask so it looks like it "turns into a heart" */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath fill='%23fff' d='M50 15 C45 3 27 3 22 18 C18 33 33 43 50 58 C67 43 82 33 78 18 C73 3 55 3 50 15 Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 170px 160px;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath fill='%23fff' d='M50 15 C45 3 27 3 22 18 C18 33 33 43 50 58 C67 43 82 33 78 18 C73 3 55 3 50 15 Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 170px 160px;

  animation: skillHeartCore 520ms ease forwards;
}
@keyframes skillHeartCore{
  0%{ opacity:0; transform: scale(0.92); }
  35%{ opacity:0.95; transform: scale(1.02); }
  100%{ opacity:0; transform: scale(1.10); }
}

/* CANDY HEART BADGES */
.skill_pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0.20rem 0.65rem;
  border-radius: var(--pill);
  font-size: 0.7rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  background: rgba(255, 215, 230, 0.14);
  border: 1px solid rgba(255, 122, 169, 0.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.skill_pill::before{
  content:"❤ ";
  opacity:0.8;
}
.skill_pill--pink{ border-color: rgba(255, 77, 184, 0.42); }
.skill_pill--purple{ border-color: rgba(255, 46, 110, 0.34); }
.skill_pill--rose{ border-color: rgba(255, 122, 169, 0.42); }

.skill_grades{ display:flex; flex-direction:column; gap: 0.35rem; }
.skill_grades-label{
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,247,251,0.72);
}
.skill_grade-row{ display:flex; flex-wrap:wrap; gap: 0.35rem; }
.skill_grade-btn{
  border-radius: var(--pill);
  border: 1px solid rgba(255, 215, 230, 0.20);
  background: rgba(255, 234, 244, 0.07);
  color: var(--ink);
  font-size: 1.05rem;
  padding: 0.3rem 0.9rem;
  cursor:pointer;
  transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast), filter var(--fast);
  position:relative;
}
.skill_grade-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255, 122, 169, 0.55);
  box-shadow: 0 10px 22px rgba(255, 122, 169, 0.14);
  filter: brightness(1.05);
}
.skill_grade-btn.selected{
  border-color: rgba(255, 77, 184, 0.70);
  background: rgba(255, 77, 184, 0.14);
  box-shadow: 0 0 0 2px rgba(255, 77, 184, 0.18), 0 12px 30px rgba(0,0,0,0.55);
  transform: translateY(-2px);
}
.skill_grade-btn.selected::after{
  content:"❤";
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity:0.85;
}

.skill_card--phonics{ cursor:pointer; }

/* QUESTION */
.question_card{
  max-width: 920px;
  margin: 0 auto;
  border-color: rgba(255, 122, 169, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 234, 244, 0.10), rgba(22, 4, 10, 0.86)),
    linear-gradient(145deg, rgba(40, 8, 18, 0.90), rgba(22, 4, 10, 0.86));
}

.question_passage{
  margin: 0 0 0.9rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: rgba(255, 234, 244, 0.08);
  border: 1px solid rgba(255, 215, 230, 0.20);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink);
  max-height: 240px;
  overflow-y:auto;
}
.question_text{
  font-size: 1.15rem;
  margin: 0 0 0.7rem;
  text-align:center;
  font-weight: 700;
}

.qimg_wrap{
  display:flex;
  justify-content:center;
  margin: 0 0 0.9rem;
}
.qimg{
  width: min(320px, 85%);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255, 215, 230, 0.22);
  box-shadow: 0 14px 30px rgba(0,0,0,0.55);
  background: rgba(255, 234, 244, 0.07);
}
.hidden{ display:none !important; }

.answer_buttons{
  display:flex;
  flex-direction:column;
  gap: 0.6rem;
  align-items:center;
}

.answer_btn{
  width: min(420px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255, 215, 230, 0.20);
  padding: 0.76rem 1rem;
  background: rgba(255, 234, 244, 0.08);
  cursor:pointer;
  text-align:center;
  font-size: 1.22rem;
  color: var(--ink);
  transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast), background var(--fast), filter var(--fast);
  position:relative;
  overflow:hidden;
}
.answer_btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255, 122, 169, 0.55);
  box-shadow: 0 12px 26px rgba(255, 122, 169, 0.14);
  filter: brightness(1.05);
}

.answer_btn.correct{
  background: rgba(255, 77, 184, 0.12);
  border-color: rgba(255, 77, 184, 0.58);
  box-shadow: 0 0 0 2px rgba(255, 77, 184, 0.20), 0 16px 36px rgba(0,0,0,0.55);
}
.answer_btn.correct::after{
  content:"NICE!";
  position:absolute;
  right: 10px;
  top: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  padding: 0.20rem 0.55rem;
  border-radius: 10px;
  transform: rotate(-10deg);
  color: rgba(42, 0, 19, 0.95);
  background: rgba(255, 215, 230, 0.85);
  border: 1px solid rgba(255, 31, 85, 0.35);
}

.answer_btn.wrong{
  background: rgba(255, 85, 118, 0.10);
  border-color: rgba(255, 85, 118, 0.60);
  animation: shake 0.16s linear;
}
.answer_btn.disabled{ opacity: 0.55; pointer-events:none; }

@keyframes shake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-2px); }
  50%{ transform: translateX(2px); }
  75%{ transform: translateX(-1px); }
  100%{ transform: translateX(0); }
}

/* NAV ROW */
.nav_row{
  margin-top: 1.4rem;
  display:flex;
  justify-content:center;
}

/* CHOOSER OVERLAY */
.chooser_overlay{
  position:fixed;
  inset:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
}
.chooser_backdrop{
  position:absolute;
  inset:0;
  background: radial-gradient(circle at top, rgba(24,0,10,0.92), rgba(16,0,8,0.98));
  backdrop-filter: blur(7px);
}
.chooser_modal{
  position:relative;
  z-index:41;
  width: min(520px, calc(100% - 2rem));
  background: rgba(34, 6, 14, 0.92);
  border-radius: 26px;
  border: 1px solid rgba(255,215,230,0.18);
  box-shadow: 0 26px 70px rgba(0,0,0,0.85);
  padding: 1.85rem 1.6rem 1.55rem;
  text-align:center;
}
.chooser_modal h2{ margin:0 0 0.4rem; font-size: 2rem; }

.chooser_sides{
  display:flex;
  gap: 0.9rem;
  margin: 1rem 0;
}
.chooser_side{
  flex:1;
  border-radius: 18px;
  padding: 0.95rem 0.6rem;
  background: rgba(255, 234, 244, 0.07);
  border: 1px solid rgba(255,215,230,0.18);
  transition: transform var(--fast), border-color var(--fast), box-shadow var(--fast), filter var(--fast);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.chooser_label{ font-size: 1.1rem; font-weight: 800; }
.chooser_side.active{
  border-color: rgba(255, 122, 169, 0.65);
  box-shadow: 0 16px 40px rgba(255, 122, 169, 0.16);
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.chooser_side.active::before{
  content:"❤";
  position:absolute;
  left: 12px;
  top: 10px;
  font-size: 16px;
  opacity:0.85;
  animation: bounceHeart 420ms ease-in-out infinite;
}
@keyframes bounceHeart{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-4px) scale(1.05); }
}
.chooser_result{ min-height: 1.3rem; color: var(--muted); margin: 0 0 1rem; }

/* GIF GRID */
.gif_grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.15rem;
  margin-top: 0.9rem;
}

.gif_card{
  position:relative;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 215, 230, 0.12), transparent 62%),
    radial-gradient(circle at 90% 65%, rgba(255, 46, 110, 0.10), transparent 62%),
    rgba(255, 234, 244, 0.06);
  border-radius: 20px;
  border: 1px solid rgba(255,215,230,0.16);
  box-shadow: var(--shadow);
  padding: 1.05rem 1rem;
  cursor:pointer;
  transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast), filter var(--fast);
  overflow:hidden;
}
.gif_card::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  transform: translateX(-35%) rotate(10deg);
  opacity:0;
  transition: opacity 220ms ease, transform 520ms ease;
  pointer-events:none;
}
.gif_card:hover::after{
  opacity:0.7;
  transform: translateX(35%) rotate(10deg);
}
.gif_card:hover{
  transform: translateY(-3px);
  border-color: rgba(255, 122, 169, 0.55);
  box-shadow: 0 22px 56px rgba(0,0,0,0.78);
  filter: brightness(1.05);
}

/* HEART OUTLINE GLOW ON HOVER */
.gif_card:hover .gif_thumb{
  box-shadow: 0 0 0 2px rgba(255, 122, 169, 0.22), 0 16px 34px rgba(0,0,0,0.55);
}

/* MORPH HEART ANIMATION */
/* MORPH HEART ANIMATION (selected card only) */
.gif_card.morph-heart{
  /* turn the whole card into a heart shape momentarily */
  -webkit-mask-image: var(--heart-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 120% 120%;

  mask-image: var(--heart-mask);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 120% 120%;

  animation: morphHeart 520ms ease forwards;
  transform-origin: center;
}

@keyframes morphHeart{
  0%{
    opacity:1;
    transform: translateY(0) scale(1);
    -webkit-mask-size: 120% 120%;
    mask-size: 120% 120%;
  }
  55%{
    opacity:1;
    transform: translateY(-6px) scale(1.06);
    -webkit-mask-size: 135% 135%;
    mask-size: 135% 135%;
  }
  100%{
    opacity:0;
    transform: translateY(-16px) scale(1.10);
    -webkit-mask-size: 135% 135%;
    mask-size: 135% 135%;
  }
}



.gif_card.disabled{ pointer-events:none; opacity:0.6; }
.gif_card.scan{
  box-shadow: 0 0 0 2px rgba(255, 122, 169, 0.30), 0 18px 48px rgba(255, 122, 169, 0.14);
  filter: brightness(1.07);
}
.gif_card.chosen-player{
  border-color: rgba(255, 77, 184, 0.65);
  box-shadow: 0 0 0 2px rgba(255, 77, 184, 0.22), 0 22px 56px rgba(0,0,0,0.78);
  transform: translateY(-4px) scale(1.01);
}
.gif_card.chosen-computer{
  border-color: rgba(255, 85, 118, 0.65);
  box-shadow: 0 0 0 2px rgba(255, 85, 118, 0.20), 0 22px 56px rgba(0,0,0,0.78);
  transform: translateY(-4px) scale(1.01);
}

.gif_thumb{
  width:100%;
  border-radius: 16px;
  border: 1px solid rgba(255,215,230,0.14);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: rgba(255, 234, 244, 0.06);
}
.gif_name{
  margin-top: 0.65rem;
  font-size: 1.02rem;
  font-weight: 800;
}
.gif_hint{
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

/* INVENTORY FOOTER */
.inventory_footer{
  position:fixed;
  left:0; right:0; bottom:0;
  padding: 0.55rem 0.85rem;
  background: linear-gradient(180deg, rgba(255, 234, 244, 0.05), rgba(24, 0, 10, 0.88));
  border-top: 1px solid rgba(255,215,230,0.16);
  backdrop-filter: blur(10px);
  display:flex;
  justify-content:center;
  gap: 1.2rem;
  z-index:30;
}
.inventory_section{ display:flex; align-items:center; gap: 0.55rem; }
.inventory_section h4{ margin:0; color: rgba(255,247,251,0.86); font-size: 1rem; }
.inventory_strip{ display:flex; flex-wrap:wrap; gap: 0.35rem; }
.inventory_strip img{
  width: 56px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,215,230,0.18);
  object-fit: cover;
  background: rgba(255, 234, 244, 0.06);
  box-shadow: 0 10px 22px rgba(0,0,0,0.45);
}
.inventory_divider{
  width: 1px;
  background: rgba(255,215,230,0.22);
  margin: 0 0.1rem;
  position:relative;
}
.inventory_divider::after{
  content:"❤";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  opacity:0.6;
  color: rgba(255, 215, 230, 0.85);
}

/* JUDGES */
.judges_layout{ display:flex; justify-content:center; }
.judges_inventories{
  width: 100%;
  max-width: 960px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
}
.judges_column{
  background: rgba(255, 234, 244, 0.06);
  border: 1px solid rgba(255,215,230,0.14);
  border-radius: 18px;
  padding: 0.95rem;
  position:relative;
  overflow:hidden;
}
.judges_column h3{ margin:0 0 0.6rem; }
.judges_list{ display:flex; flex-wrap:wrap; gap: 0.4rem; }
.judges_list img{
  width: 62px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,215,230,0.14);
  object-fit: cover;
}

.judges_resultText{
  text-align:center;
  margin: 1.1rem 0 0;
  font-size: 1.05rem;
  min-height: 1.4rem;
}

/* HEART SPOTLIGHT STYLE SCAN */
.judges_column.scan{
  box-shadow: 0 0 0 2px rgba(255, 122, 169, 0.24), 0 18px 46px rgba(255, 122, 169, 0.14);
}
.judges_column.scan::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 215, 230, 0.22) 0%, transparent 42%),
    radial-gradient(circle at 52% 48%, rgba(255, 122, 169, 0.16) 0%, transparent 48%);
  animation: judgeGlow 520ms ease-in-out infinite;
  pointer-events:none;
}
@keyframes judgeGlow{
  0%,100%{ opacity:0.85; transform: translateY(0); }
  50%{ opacity:1; transform: translateY(-6px); }
}

/* WINNER POPUP */
.winner_overlay{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
}
.winner_backdrop{
  position:absolute;
  inset:0;
  background: radial-gradient(circle at top, rgba(24,0,10,0.92), rgba(16,0,8,0.98));
  backdrop-filter: blur(7px);
}
.winner_modal{
  position:relative;
  z-index:51;
  width: min(640px, calc(100% - 2rem));
  background: rgba(34, 6, 14, 0.92);
  border-radius: 26px;
  border: 1px solid rgba(255,215,230,0.18);
  box-shadow: 0 26px 70px rgba(0,0,0,0.85);
  padding: 1.9rem 1.6rem 1.6rem;
  text-align:center;
}
.winner_text{ margin: 0.3rem 0 1.0rem; color: var(--muted); }
.winner_lineup{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.45rem; margin: 0 0 1rem; }
.winner_lineup img{
  width: 70px;
  height: 50px;
  border-radius: 14px;
  border: 1px solid rgba(255,215,230,0.14);
  object-fit: cover;
}

/* HEART POP EFFECT */
.heart_pop{
  position:absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) scale(0.8);
  pointer-events:none;
  font-size: 22px;
  opacity: 0;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.4));
  animation: heartPop 700ms ease-out forwards;
}
@keyframes heartPop{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(0.75); }
  30%{ opacity:1; transform: translate(-50%,-50%) scale(1.15); }
  100%{ opacity:0; transform: translate(-50%,-85%) scale(0.95); }
}

/* MOUSE HEART TRAIL */
.trail_heart{
  position:fixed;
  left: 0;
  top: 0;
  transform: translate3d(var(--x), var(--y), 0) scale(var(--s));
  pointer-events:none;
  z-index: 60;
  opacity: 0;
  filter: blur(0.2px) drop-shadow(0 10px 18px rgba(0,0,0,0.35));
  animation: trailFloat 820ms ease-out forwards;
  will-change: transform, opacity;
}
@keyframes trailFloat{
  0%{ opacity: 0; transform: translate3d(var(--x), var(--y), 0) scale(var(--s)); }
  15%{ opacity: 0.9; }
  100%{ opacity: 0; transform: translate3d(calc(var(--x) + var(--dx)), calc(var(--y) - var(--dy)), 0) scale(calc(var(--s) + 0.12)); }
}

/* RESPONSIVE */
@media (max-width: 768px){
  .cs_title-main{ font-size: 3.2rem; }
  .cs_title-top{ font-size: 1.35rem; }
  .cs_shell{ padding: 1rem; }
  .inventory_footer{ flex-direction:column; align-items:flex-start; gap: 0.65rem; }
  .inventory_divider{ display:none; }
}


/* Bigger cards + bigger GIFs */
.gif_grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.gif_card{
  padding: 14px;
}

/* Show MORE of the gif (less cropping) */
.gif_thumb{
  width: 100%;
  height: 260px;          /* increase this to 280-320 if you want even bigger */
  object-fit: contain;    /* key change: show full gif instead of cropping */
  border-radius: 16px;
  background: rgba(255,255,255,0.10);
}

/* =========================================
   WINNER OVERLAY: prevent cut-off + allow scroll
   ========================================= */

/* Let overlay use the full screen and allow scrolling */
.winner_overlay{
  align-items: flex-start;      /* start at top instead of dead-center */
  padding: 16px 12px;           /* breathing room */
  overflow-y: auto;             /* scroll the overlay if needed */
}

/* Make the modal never exceed the viewport height */
.winner_modal{
  width: min(980px, calc(100% - 24px)); /* a bit wider so it feels intentional */
  max-height: calc(100vh - 24px);       /* keeps modal inside the screen */
  overflow-y: auto;                      /* scroll inside modal */
  -webkit-overflow-scrolling: touch;
}

/* Keep your header + lineup from pushing too hard */
.winner_lineup{
  max-height: 120px;   /* optional: keeps lineup from taking over */
  overflow-y: auto;    /* optional: lineup scrolls if it grows */
  padding-bottom: 6px;
}

/* =========================================
   Make Donate + Feedback vertical (stacked)
   ========================================= */

.winner_modal .abz_support-inner{
  display: flex;
  flex-direction: column;  /* stack vertically */
  gap: 18px;
  align-items: stretch;
}

/* Ensure both cards fill width cleanly */
.winner_modal .abz_card{
  width: 100%;
}

/* Optional: tighten padding so it fits nicer inside modal */
.winner_modal .abz_support{
  margin-top: 14px;
}

/* Optional: if Donate button area looks cramped */
.winner_modal .abz_paypal-wrap{
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

@media (min-height: 760px){
  .winner_overlay{ align-items: center; }
}