/* =========================================================
   Unscramble The Sentence — Vibrant Glass UI (scoped)
   All styles live under .fts_app only.
   ========================================================= */

.fts_app{
  --panel:#ffffff; --text:#0f172a; --muted:#475569;
  --primary:#22d3ee; --primary-2:#0ea5e9; --ok:#16a34a; --bad:#ef4444;

  --chipBlue:linear-gradient(180deg,#60a5fa,#3b82f6);
  --chipTeal:linear-gradient(180deg,#34d399,#10b981);
  --chipOrange:linear-gradient(180deg,#fb923c,#f97316);
  --chipPink:linear-gradient(180deg,#f472b6,#ec4899);
  --chipText:#fff; --chipBorder:rgba(255,255,255,.82); --chipGlow:rgba(2,8,23,.12);

  --radius:20px; --shadow:0 15px 50px rgba(2,8,23,.10);

  min-height:100vh !important;
  padding:40px 16px !important;
  background:
    radial-gradient(900px 700px at -10% 10%, #eaf5ff 0%, transparent 60%),
    radial-gradient(900px 700px at 110% 0%, #ffe7eb 0%, transparent 60%) !important;
  display:flex; flex-direction:column; justify-content:center;

  color:var(--text) !important;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial,Noto Sans,sans-serif !important;
  overscroll-behavior-y: contain;
}

.fts_app *{ box-sizing:border-box; }
.fts_app .hidden{ display:none !important }
.fts_app #app{ width:min(1200px,95vw) !important; margin:0 auto }

/* Screens */
.fts_app .screen{ display:none }
.fts_app .screen.active{ display:block }

/* Card */
.fts_app .card{
  background:var(--panel) !important; border:1px solid rgba(10,20,60,.08) !important;
  border-radius:var(--radius) !important; box-shadow:var(--shadow) !important; padding:22px !important;
}
.fts_app .card.max{ min-height:62vh }

/* ---------- START ---------- */
.fts_app .hero{ position:relative; overflow:hidden; padding:36px 28px }
.fts_app .hero-preview{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(600px 240px at 15% 20%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(800px 280px at 85% 30%, rgba(16,185,129,.18), transparent 62%);
  filter:blur(20px) saturate(1.05);
}
.fts_app .tagline{
  position:relative; z-index:1; margin:0 0 10px; text-align:center;
  font-weight:800; letter-spacing:.2px; font-size:4rem !important;
  background:linear-gradient(90deg,#6366f1,#22d3ee,#22c55e);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* cover image on start */
.fts_app img.cover_img{
  width:35rem !important;
  height:auto !important;
  max-width:none !important;  /* defeats global img { max-width:100% } */
  display:block;
  margin:12px auto 4px;
  object-fit:contain;
}

.fts_app .sub{ position:relative; z-index:1; color:var(--muted); text-align:center }
.fts_app .actions{ position:relative; z-index:1; display:flex; gap:10px; justify-content:center; margin-top:14px }

.fts_app .btn{
  border:1px solid rgba(10,20,60,.08); border-radius:14px; padding:.9rem 1.2rem;
  font-weight:800; cursor:pointer; background:rgba(255,255,255,.65); color:var(--text);
  backdrop-filter:blur(10px);
  transition:transform .1s ease,box-shadow .2s ease,filter .2s ease;
}
.fts_app .btn:hover{ box-shadow:0 12px 28px rgba(2,8,23,.12) }
.fts_app .btn:active{ transform:scale(.98) }
.fts_app .btn-primary{ border:none; color:#fff; background:linear-gradient(180deg,var(--primary),var(--primary-2)); box-shadow:0 10px 30px rgba(56,189,248,.35) }
.fts_app .btn-lg{ font-size:1.05rem; padding:1rem 1.35rem }
.fts_app .btn-ghost{ background:rgba(255,255,255,.85) }
.fts_app .chip-info{ border:none; color:#0f172a; font-weight:800; padding:.7rem 1rem; border-radius:999px; background:linear-gradient(180deg,#ffe08a,#ffb86b) }

.fts_app .how-popover{ margin-top:16px; max-width:680px; background:rgba(255,255,255,.92); border:1px solid rgba(10,20,60,.08); border-radius:14px; padding:12px; box-shadow:var(--shadow) }
.fts_app .how-row{ display:flex; gap:10px; align-items:center; justify-content:center; padding:6px 0 }

#playBtn{ font-size:2rem; width:30%; margin-top:15px; }
#playBtn:hover{ background-color:#218fa2 !important; }

/* Grade */
#grade-screen h2{ color:#333 !important; text-align:center; font-size:2rem; }
.grade-title{ font-size:3rem; font-weight:500; }

.fts_app .grade-row{ display:flex; gap:14px; margin-top:10px; flex-wrap:wrap; justify-content:center }
.fts_app .grade-card{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:18px; border-radius:16px; border:1px solid rgba(10,20,60,.08);
  background:rgba(255,255,255,.75); backdrop-filter:blur(10px);
  cursor:pointer; transition:transform .08s ease, box-shadow .2s ease;
  color:#0f172a; font-size:2rem;
}
.fts_app .grade-card:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(2,8,23,.12) }

/* Shared header */
.fts_app .scramble-header{ display:flex; justify-content:space-between; align-items:center; gap:12px }
.fts_app .pill{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg, rgba(34,211,238,.16), rgba(14,165,233,.10));
  border:1px solid rgba(14,165,233,.28);
  color:#0c4a6e; border-radius:999px; padding:.42rem .8rem; font-weight:800;
}
.fts_app .prompt{ font-weight:800; margin:10px 0 8px; text-align:center; color:#111827 }
.fts_app .tip{ margin:8px auto 12px; max-width:720px; text-align:center; background:rgba(255,255,255,.85); border:1px solid rgba(10,20,60,.08); border-radius:14px; padding:10px 12px; box-shadow:var(--shadow) }

/* Hammer */
.fts_app .hammer-stage{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; height:min(56vh,520px);
  background:#0b1120; border-radius:16px; overflow:hidden; border:1px solid rgba(15,23,42,.28);
  cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><text y="20" font-size="20">🔨</text></svg>') 0 20, crosshair;
}
/* show entire GIF */
.fts_app #hammerGif{ position:relative; width:100%; height:100%; object-fit:contain; display:block }
.fts_app #shardLayer{ position:absolute; z-index:2; pointer-events:none; left:0; top:0; width:0; height:0 }
.fts_app #crackCanvas{ position:absolute; left:0; top:0; z-index:3; pointer-events:auto }

.fts_app .crack-meter{ margin-top:10px }
.fts_app .crack-meter-row{ display:flex; gap:6px; justify-content:center }
.fts_app .crack-meter-row .shard{
  width:18px; height:18px; border-radius:5px; border:1px solid rgba(14,165,233,.25);
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
}
.fts_app .crack-meter-row .shard.filled{
  background:linear-gradient(180deg,#06b6d4,#22c55e); box-shadow:0 6px 16px rgba(34,197,94,.35); transform:scale(1.06);
}

/* Chips row */
.fts_app .chips-row{
  position:relative; /* anchor for absolute-drag math */
  display:flex; flex-wrap:wrap; gap:14px;
  width:100%;
  justify-content:center !important;        /* keep centered on desktop */
  align-content:flex-start;
  padding:8px; min-height:70px; margin:28px 0 12px;
  touch-action:none;                         /* smoother touch drag */
  margin-inline:auto;
}
/* in case any JS adds .drag-active, keep it centered */
.fts_app .chips-row.drag-active{ justify-content:center !important; }

.check-wrap{ display:flex; align-items:center; justify-content:center; }

.fts_app .chip{
  position:relative; user-select:none; -webkit-user-select:none; touch-action:none;
  border-radius:16px; padding:.95rem 1.15rem; color:var(--chipText);
  font-weight:900; letter-spacing:.2px; font-size:4rem;
  cursor:grab; background:var(--chipBlue);
  border:2px solid var(--chipBorder);
  box-shadow:0 12px 28px var(--chipGlow), inset 0 -2px 0 rgba(255,255,255,.35);
  transition:box-shadow .12s ease, outline-color .15s ease, border-color .12s ease;
  will-change:transform,left,top;
}
.fts_app .chip:nth-child(4n+2){ background:var(--chipTeal) }
.fts_app .chip:nth-child(4n+3){ background:var(--chipOrange) }
.fts_app .chip:nth-child(4n+4){ background:var(--chipPink) }
.fts_app .chip.dragging{ cursor:grabbing; z-index:10; box-shadow:0 22px 40px rgba(2,8,23,.26), 0 0 0 6px rgba(14,165,233,.20) }
.fts_app .chip.selected{ outline:4px solid rgba(14,165,233,.6) }

.fts_app .placeholder{ background:transparent; border:2px dashed rgba(2,8,23,.25); border-radius:16px; min-width:80px; height:54px }

/* High-contrast correctness */
.fts_app .chip.ok-outline{
  border-color:#16a34a !important;
  box-shadow:0 0 0 5px rgba(34,197,94,.32), 0 12px 28px rgba(2,8,23,.18), inset 0 -2px 0 rgba(255,255,255,.4) !important;
}
.fts_app .chip.bad-outline{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 5px rgba(239,68,68,.28), 0 12px 28px rgba(2,8,23,.18), inset 0 -2px 0 rgba(255,255,255,.4) !important;
}

/* Reveal */
.fts_app .reveal-card{
  margin:14px auto 10px; width:min(900px,96%) !important; /* ensure full GIF visibility */
  background:rgba(255,255,255,.9); border:1px solid rgba(10,20,60,.08);
  border-radius:16px; padding:10px 12px; box-shadow:var(--shadow);
}
.fts_app .reveal-stage{ position:relative; width:100%; aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:#000; border:1px solid rgba(15,23,42,.2) }
.fts_app #revealGif{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain }
.fts_app .mask{ position:absolute; top:0; bottom:0; background:#000; transition:transform .45s ease, opacity .45s ease }
.fts_app .mask.left{ left:0; width:34% } .fts_app .mask.mid{ left:33%; width:34% } .fts_app .mask.right{ right:0; width:34% }
.fts_app .mask.revealed{ transform:translateY(-100%); opacity:0 }
.fts_app .reveal-glow{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(550px 220px at 50% 55%, rgba(34,197,94,.18), transparent 60%); opacity:0; transition:opacity .4s }
.fts_app .reveal-glow.on{ opacity:1 }

/* Celebration — show whole GIF */
.fts_app .celebrate{text-align:center; margin-top:10px}
.fts_app .cele-title{ margin:0 0 8px; font-size:clamp(1.6rem,3vw,2.4rem) }

/* Stage to keep full repaired GIF visible */
#celebrateGif{
  width: 40rem !important;
  margin: auto;
}
/* Gallery */
.fts_app .gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:8px 0 20px }
.fts_app .gallery img{ width:100%; height:160px; object-fit:cover; border-radius:12px; border:1px solid rgba(10,20,60,.08) }


/* Ensure the chips row stays centered even while dragging */
.fts_app .chips-row{ justify-content:center !important; }
.fts_app .chips-row.drag-active{ justify-content:center !important; }

/* Make sure touch scrolling doesn’t fight drag o

n mobile */
.fts_app .chips-row{ touch-action: none; }

.fts_app .chips-row {
  display: flex;
  flex-wrap: nowrap;           /* ✅ force one line */
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  margin: 28px 0 12px;
}

.fts_app .chip {
  flex: 1 1 auto;  
  display: flex;               /* let text auto-center */
  align-items: center;
  justify-content: center;
  padding: .6rem 1rem;

  /* ✅ shrink text dynamically */
  font-size: clamp(0.8rem, 2vw, 2rem); 
  line-height: 1.2;
  word-break: keep-all;        /* never break words mid-way */
  white-space: nowrap;         /* force each word to stay in one line */
  text-overflow: ellipsis;     /* if needed, show … instead of overflow */
  overflow: hidden;
}




/* Defensive: if a placeholder ever leaks (it shouldn’t now), hide it on very small widths */
@media (max-width: 360px){
  .fts_app .placeholder{ min-width:48px; height:34px; }
}

/* ===============================
   RESPONSIVE MEDIA QUERIES (scoped)
   =============================== */

/* ——— Big desktops / 2K+ ——— */
@media (min-width: 1400px){
  .fts_app .tagline{ font-size: 4.5rem !important; }
  .fts_app img.cover_img{ width: 42rem !important; }
  .fts_app .chip{ font-size: 4.2rem; }
  .fts_app .reveal-card,
  .fts_app .celebrate-gif{ width: min(1000px, 96%) !important; }
}

/* ——— Laptops / large tablets landscape ——— */
@media (max-width: 1200px){
  .fts_app img.cover_img{ width: 32rem !important; }
  .fts_app .chip{ font-size: 3.6rem; }
}

/* ——— iPad / 1024 grid ——— */
@media (max-width: 1024px){
  .fts_app #app{ width: min(1000px, 95vw) !important; }
  .fts_app .hero{ padding: 32px 22px; }
  .fts_app img.cover_img{ width: 30rem !important; }
  .fts_app .chips-row{ gap: 12px; }
  .fts_app .hammer-stage{ height: min(50vh, 480px); }
  .fts_app .reveal-card,
  .fts_app .celebrate-gif{ width: 96% !important; }
  #playBtn{ width: 40%; }
}

/* ——— Tablet portrait / narrow laptop ——— */
@media (max-width: 900px){
  .fts_app .tagline{ font-size: 3.2rem !important; }
  .fts_app img.cover_img{ width: 28rem !important; }
  .fts_app .chip{ font-size: 3rem; }
  .fts_app .reveal-stage{ aspect-ratio: 16/10; }
  #celebrateGif{ width: 34rem !important; }
}

/* ——— 768 break (common tablet) ——— */
@media (max-width: 768px){
  .fts_app{ padding: 28px 12px !important; }
  .fts_app .card{ padding: 18px !important; }
  .fts_app .chip{ font-size: clamp(1.1rem, 4.6vw, 2.2rem); padding: .85rem 1rem; }
  .fts_app .placeholder{ min-width: 68px; height: 46px; }
  .fts_app .pill{ font-size: .95rem; }
  .fts_app .tip{ max-width: 640px; }
  .fts_app .hammer-stage{ height: min(46vh, 440px); }
  .fts_app .reveal-card{ width: 96% !important; }
  .fts_app .gallery{ grid-template-columns: 1fr 1fr; }
  #playBtn{ width: 60%; }
  .fts_app img.cover_img{ width: 26rem !important; }
}

/* ——— Large phones / small tablets ——— */
@media (max-width: 640px){
  .fts_app .tagline{ font-size: 2.6rem !important; }
  .fts_app img.cover_img{ width: 22rem !important; }
  .fts_app .chips-row{ gap: 12px; margin: 22px 0 10px; }
  .fts_app .chip{ font-size: clamp(1rem, 5vw, 1.8rem); padding: .8rem .95rem; }
  .fts_app .reveal-stage{ aspect-ratio: 16/11; } /* a touch taller so full GIF fits */
  .fts_app .check-wrap .btn{ width: 100%; max-width: 320px; }
  #celebrateGif{ width: 100% !important; }
}

/* ——— Phones ——— */
@media (max-width: 480px){
  .fts_app .hero{ padding: 22px 16px; }
  .fts_app img.cover_img{ width: 19rem !important; }
  .fts_app .chip{ font-size: clamp(1rem, 5.4vw, 1.6rem); padding: .72rem .9rem; }
  .fts_app .placeholder{ min-width: 56px; height: 40px; }
  .fts_app .tip{ font-size: .95rem; padding: 8px 10px; }
  .fts_app .gallery img{ height: 120px; }
}

/* ——— Tiny phones / legacy Android ——— */
@media (max-width: 360px){
  .fts_app .tagline{ font-size: 2.2rem !important; }
  .fts_app img.cover_img{ width: 16rem !important; }
  .fts_app .chip{ font-size: .98rem; padding: .6rem .72rem; }
  .fts_app .placeholder{ min-width: 50px; height: 36px; }
  .fts_app .pill{ padding: .35rem .65rem; }
}

/* ——— Short landscape (phones/tablets on their side) ——— */
@media (max-height: 480px) and (orientation: landscape){
  .fts_app{ padding: 12px !important; }
  .fts_app .hero{ padding: 18px 14px; }
  .fts_app .chip{ font-size: 1rem; padding: .6rem .75rem; }
  .fts_app .chips-row{ margin: 16px 0 8px; }
  .fts_app .hammer-stage{ height: 44vh; }
  .fts_app .reveal-stage{ aspect-ratio: 16/9; }
  .fts_app .tip{ display:none; } /* free vertical space */
}

/* ——— Touch-first tweaks ——— */
@media (pointer: coarse){
  .fts_app .btn,
  .fts_app .grade-card,
  .fts_app .chip{ touch-action: manipulation; }
  .fts_app .chip{ padding: .9rem 1.05rem; }
  .fts_app .chips-row{ gap: 12px; }
}

/* ——— Reduced Motion ——— */
@media (prefers-reduced-motion: reduce){
  .fts_app *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}