/* ============================================================
   v13 · HERO HOME SCREEN — clean product home (loaded last)
   Rebuilds the dashboard content inside the device.
   Uses fresh hs- classes so the old .dstats/.dcard/.qa cascade
   (v5–v11, heavily !important) does not apply. Frame, colours,
   spacing language and the device chrome are all untouched.
   Feel: Duolingo × Apple Fitness × Notion — calm, one lesson,
   one CTA, one progress bar.
   ============================================================ */

/* App-section · Your Progress — orange values, black labels */
#grow .rx-progress .rx-stat b{ color:var(--coral) !important; }
#grow .rx-progress .rx-stat span{ color:#141414 !important; }

/* XP-stack cards — evenly spread + centered content (Badges card unchanged) */
#grow .rx-xp-stack .rx-xpc:not(.c-charcoal){
  justify-content:space-evenly !important;
  align-items:center !important; text-align:center !important;
}
#grow .rx-xp-stack .rx-xpc:not(.c-charcoal) .rx-xpc__big,
#grow .rx-xp-stack .rx-xpc:not(.c-charcoal) .rx-bar{ margin-top:0 !important; }
/* left-align titles, push icon to the right (space between) */
#grow .rx-xp-stack .rx-xpc:not(.c-charcoal) .rx-xpc__h{ justify-content:space-between !important; text-align:left !important; }

/* Badges card — a bit bigger + realigned (title left, content centered/spread) */
#grow .rx-xp-stack .rx-xpc.c-charcoal{ flex:1.25 1 0 !important; justify-content:space-evenly !important; align-items:center !important; text-align:center !important; }
#grow .rx-xp-stack .rx-xpc.c-charcoal .rx-xpc__h{ justify-content:space-between !important; text-align:left !important; }
#grow .rx-xp-stack .rx-xpc.c-charcoal .rx-xpc__sub{ align-self:center !important; text-align:center !important; margin-top:0 !important; }

/* Lesson Conversation — user bubble black (was grey) */
#grow .rx-convo .rx-bub.me{ background:#141414 !important; }

/* remove ambient drifting sparks in the App section (they overlap the cards) */
#grow.chapter.tint::before, #grow.chapter.tint::after{ display:none !important; }

/* Practice Situations — black icon box, white symbol */
#grow .rx-topics-card .rx-node__ic{ background:#141414 !important; border-color:#141414 !important; }
#grow .rx-topics-card .rx-node.used .rx-node__ic{ background:#141414 !important; }
#grow .rx-topics-card .rx-node__ic .rx-sym{ display:inline-block; line-height:1; filter:brightness(0) invert(1); }

/* ============ Meet Fluent — more space, bigger heading/mascot/floaters ============ */
#meet.chapter.meet{ padding-top:clamp(72px,11vw,150px) !important; }
#meet .rx-final__h{ font-size:clamp(3rem,7.6vw,5.6rem) !important; }
#meet .rx-final__mascot{ width:min(220px,46vw) !important; }
#meet .blob-dot{ transform:scale(1.45); }

/* ============ Head-to-Head friend challenge card ============ */
.h2h{
  background:#141414; color:#fff; border-radius:26px; padding:24px;
  display:flex; flex-direction:column; gap:20px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55);
  margin-bottom:22px;
}
.h2h__head{ text-align:center; }
.h2h__title{ font-size:1.3rem; font-weight:900; color:#fff; letter-spacing:-.01em; }
.h2h__arena{ display:grid; grid-template-columns:1fr 160px 1fr; align-items:center; gap:14px; }
/* player cards — orange boxes, pulled inward toward the VS */
.h2h__side{ justify-self:end; width:100%; max-width:176px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  background:var(--coral); color:#fff; border-radius:18px; padding:16px 12px; }
.h2h__side--r{ justify-self:start; }
.h2h__pfp{ width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.22); border:2px solid rgba(255,255,255,.4);
  display:grid; place-items:center; color:#fff; margin-bottom:4px; }
.h2h__pfp svg{ width:33px; height:33px; }
.h2h__name{ font-size:1.5rem; font-weight:900; color:#fff; }
.h2h__meta{ display:flex; flex-direction:column; align-items:stretch; gap:7px; margin-top:11px; width:100%; }
.h2h__chip{ background:rgba(255,255,255,.9); border-radius:10px; padding:8px 10px; font-size:.9rem; font-weight:800; color:#111; text-align:center; white-space:nowrap; }
.h2h__center{ display:flex; flex-direction:column; align-items:center; justify-self:center; text-align:center; gap:9px; }
.h2h__vs{ width:50px; height:50px; border-radius:50%; background:var(--coral); color:#fff;
  display:grid; place-items:center; font-weight:900; font-size:1.05rem; box-shadow:0 8px 18px -6px rgba(221, 87, 28,.6); }
.h2h__friends{ font-size:.68rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.h2h__games{ display:flex; flex-direction:column; gap:10px; }
/* score row — score · centered game name · score */
.h2h__grow{ display:grid; grid-template-columns:1fr 160px 1fr; align-items:center; gap:14px; }
/* central game box */
.h2h__gname{ background:#fff; color:var(--ink); border-radius:14px; padding:13px 12px;
  text-align:center; font-size:1.02rem; font-weight:800; white-space:nowrap;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.4); }
/* circular score badges, centered under each player box */
.h2h__scwrap{ width:100%; max-width:176px; display:flex; justify-content:center; }
.h2h__grow .h2h__scwrap:first-child{ justify-self:end; }
.h2h__grow .h2h__scwrap:last-child{ justify-self:start; }
.h2h__sc{ width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:#fff; color:var(--ink); font-size:1.28rem; font-weight:900;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.45); }
.h2h__sc.win{ background:var(--coral); color:#fff; box-shadow:0 8px 18px -8px rgba(221, 87, 28,.6); }
.h2h__cta{ align-self:center; display:inline-flex; align-items:center; gap:8px;
  background:var(--coral); color:#fff; border:none; border-radius:14px; padding:14px 26px;
  font-weight:900; font-size:1rem; cursor:pointer; box-shadow:0 10px 22px -8px rgba(221, 87, 28,.6);
  transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s cubic-bezier(.22,.61,.36,1), background .28s ease; }
.h2h__cta:hover{ background:var(--coral-deep); transform:translateY(-3px); box-shadow:0 16px 30px -10px rgba(221, 87, 28,.7); }
.h2h__cta:active{ transform:translateY(-1px); }
.h2h__cta span{ transition:transform .28s cubic-bezier(.22,.61,.36,1); }
.h2h__cta:hover span{ transform:translateX(4px); }

/* ---- movement & animation layer (hover lift on every box + gentle VS pulse) ---- */
.h2h__side, .h2h__gname, .h2h__sc, .h2h__chip, .h2h__pfp{
  transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s cubic-bezier(.22,.61,.36,1); }
.h2h__side:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -18px rgba(0,0,0,.55); }
.h2h__side:hover .h2h__pfp{ transform:scale(1.07); }
.h2h__gname:hover{ transform:translateY(-3px); box-shadow:0 14px 28px -14px rgba(0,0,0,.5); }
.h2h__sc:hover{ transform:translateY(-3px) scale(1.06); }
.h2h__vs{ animation:h2hVsPulse 2.6s ease-in-out infinite; }
@keyframes h2hVsPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
@media (prefers-reduced-motion: reduce){
  .h2h__vs{ animation:none; }
  .h2h__side, .h2h__gname, .h2h__sc, .h2h__chip, .h2h__pfp, .h2h__cta{ transition:none; } }

/* ============ Unified AI conversation + speaking-feedback card ============ */
.rx-ai{
  display:flex; flex-direction:column; gap:26px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  backdrop-filter:blur(16px) saturate(1.25);
  border:1px solid rgba(255,255,255,.75) !important;
  border-radius:28px !important;
  box-shadow:0 30px 60px -30px rgba(35,39,31,.35) !important;
  padding:24px !important;
}
.rx-ai__head{ display:flex; align-items:center; justify-content:space-between; }
.rx-ai__head b{ font-size:1.15rem; font-weight:900; color:var(--ink); letter-spacing:-.01em; }
.rx-ai__tag{ font-size:.7rem; font-weight:900; letter-spacing:.1em; color:var(--ink);
  background:rgba(35,39,31,.07); padding:5px 11px; border-radius:999px; }

.rx-ai__convo{ position:relative; display:flex; flex-direction:column; gap:14px; }
.rx-ai__bub{ display:flex; align-items:center; gap:10px; padding:15px 18px; border-radius:16px;
  font-size:1rem; font-weight:700; color:var(--ink); line-height:1.3; }
.rx-ai__bub.en{ background:#fff; border:2px solid #141414; box-shadow:0 8px 20px -14px rgba(35,39,31,.3); }
.rx-ai__bub.fr{ background:var(--coral-tint); color:var(--coral-deep); border:2px solid #141414; box-shadow:0 8px 20px -14px rgba(221, 87, 28,.35); }
.rx-ai__flag{ flex:none; display:inline-flex; }
.rx-ai__flag svg{ width:22px; height:15px; border-radius:3px; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.rx-ai__swap{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%;
  background:var(--coral); color:#fff; border:3px solid #141414;
  display:grid; place-items:center; font-size:1.1rem; font-weight:900;
  box-shadow:0 10px 20px -6px rgba(221, 87, 28,.6); cursor:pointer; z-index:2;
  transition:transform .35s var(--ease-back);
}
.rx-ai__swap:hover{ transform:translate(-50%,-50%) rotate(180deg); }

.rx-ai__tools{ display:flex; gap:12px; justify-content:center; }
.rx-ai__tools button{ width:46px; height:46px; border-radius:14px; background:#141414; color:#fff;
  border:none; display:grid; place-items:center; cursor:pointer; transition:transform .18s; }
.rx-ai__tools button:hover{ transform:translateY(-2px); }
.rx-ai__tools button svg{ width:20px; height:20px; }

.rx-ai__div{ height:1px; background:var(--line); }

.rx-ai__fbtitle{ font-size:1.02rem; font-weight:900; color:var(--ink); }
.rx-ai__fbrow{ display:flex; align-items:center; gap:14px; }
.rx-ai__mic{ width:46px; height:46px; border-radius:50%; background:var(--coral); color:#fff;
  border:none; display:grid; place-items:center; flex:none; cursor:pointer;
  box-shadow:0 10px 20px -6px rgba(221, 87, 28,.55); transition:transform .18s; }
.rx-ai__mic:hover{ transform:scale(1.05); }
.rx-ai__mic svg{ width:20px; height:20px; }
.rx-ai__wave{ flex:1; display:flex; align-items:center; gap:5px; height:36px; min-width:0; }
.rx-ai__wave i{ flex:1; min-width:0; border-radius:999px; background:#E2E0D8; }
.rx-ai__wave i.on{ background:var(--coral); }
.rx-ai__score{ flex:none; display:flex; flex-direction:column; align-items:flex-end; line-height:1; }
.rx-ai__score b{ font-size:1.25rem; font-weight:900; color:var(--coral); }
.rx-ai__score span{ font-size:.68rem; font-weight:800; color:var(--coral); margin-top:3px; letter-spacing:.02em; }

.rx-ai__meter{ height:7px; border-radius:999px; background:#EDEBE4; overflow:hidden; }
.rx-ai__meter i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--coral),var(--coral-deep)); transition:width .8s cubic-bezier(.22,.61,.36,1); }
.rx-ai__help{ font-size:.82rem; font-weight:700; color:var(--muted); }
/* live pronunciation waveform */
@keyframes rxaiwave{ 0%,100%{ transform:scaleY(.5); } 50%{ transform:scaleY(1); } }
.rx-ai__wave i{ transform-origin:center; animation:rxaiwave 1.1s ease-in-out infinite; }
.rx-ai__wave i:nth-child(2n){ animation-duration:.9s; animation-delay:.12s; }
.rx-ai__wave i:nth-child(3n){ animation-duration:1.35s; animation-delay:.26s; }
.rx-ai__wave i:nth-child(4n){ animation-delay:.4s; }
.rx-ai__wave i:nth-child(5n){ animation-duration:1.05s; animation-delay:.18s; }
/* voice feedback inside a black box; capsules white, active orange */
.rx-ai__voice{ background:#141414; border-radius:20px; padding:18px; margin-top:8px; display:flex; flex-direction:column; gap:16px; }
.rx-ai__voice .rx-ai__wave i{ background:#fff; }
.rx-ai__voice .rx-ai__wave i.on{ background:var(--coral); }
.rx-ai__voice .rx-ai__meter{ background:rgba(255,255,255,.22); }

/* let the screen size to its content instead of a hard 560px clip */
/* match #talkview's fixed 560px so pressing Resume doesn't resize the device */
.appwin .dash#dash{
  height:560px !important;
  gap:18px !important;                 /* calmer breathing room between stacked cards */
  justify-content:flex-start !important;
  padding:clamp(18px,1.8vw,24px) !important;
}

/* ---------- 1 · greeting + single progress bar ---------- */
.hs-top{ display:flex; flex-direction:column; gap:13px; }
.hs-toprow{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
/* greeting — plain text (no box); #dash + !important beats v9's .dash #dg-name cap */
#dash .hs-greet{
  display:inline-block;
  font-size:1.62rem !important; font-weight:900 !important; line-height:1.05;
  letter-spacing:-.025em; color:var(--ink) !important; white-space:nowrap;
  padding:0 !important; border:none !important; background:none !important;
  box-shadow:none !important; border-radius:0 !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
#dash .hs-greet .hs-hi{ color:var(--coral) !important; }
/* level — black chip, white text, sits in the greeting row */
.hs-lvl{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  padding:8px 14px; border-radius:14px;
  font-size:.9rem; font-weight:800; color:#fff; white-space:nowrap;
  background:#2c2c2e; border:1px solid #2c2c2e;
  box-shadow:0 8px 22px -14px rgba(0,0,0,.5);
}
.hs-lvl .hs-flag{
  width:19px; height:13px; border-radius:3px; flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
/* beat v9's .dash #dg-level-name{color:#0f0f0f!important} */
#dash .hs-lvl #dg-level-name{ color:#fff !important; }
/* progress graph — black box, white track, orange fill, centered caption */
.hs-progwrap{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  width:100%;
  background:#141414;
  border:none;
  border-radius:14px;
  padding:11px 20px;                    /* ~20% less vertical, roomier sides */
  box-shadow:0 6px 18px -12px rgba(0,0,0,.5);
}
.hs-bar{ width:100%; height:6px; border-radius:999px; background:rgba(255,255,255,.92); overflow:hidden; }
.hs-bar i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--coral),var(--coral-deep));
}
.hs-cap{ font-size:.8rem; font-weight:600; color:rgba(255,255,255,.92); text-align:center; letter-spacing:.005em; }
.hs-cap .cn{ color:#fff; font-weight:700; }

/* ---------- 2 · today's lesson · locked ---------- */
.hs-lesson{
  display:flex; align-items:center; gap:14px;
  margin:0 16px;
  background:#fff; border:1px solid var(--line-soft);
  border-radius:18px; padding:16px;
  box-shadow:0 4px 16px -12px rgba(35,39,31,.22);
}
.hs-ic{
  width:38px; height:38px; border-radius:12px; flex:none;
  display:grid; place-items:center; font-size:18px; line-height:1;
  background:var(--coral); box-shadow:0 3px 8px -3px rgba(221, 87, 28,.42);
}
.hs-ic .ce{ filter:brightness(0) invert(1); display:block; }
.hs-lesson__ttl{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.hs-lesson__ttl b{ font-size:1rem; font-weight:800; color:var(--ink); line-height:1.15; }
.hs-lesson__ttl span{ font-size:.8rem; font-weight:600; color:var(--muted); }

/* grey locked pill — soft neutral surface, quiet type, non-interactive */
.hs-locked{
  flex:none; display:inline-flex; align-items:center; gap:5px;
  padding:7px 11px; border-radius:10px;
  background:rgba(35,39,31,.05); color:var(--muted);
  font-weight:600; font-size:.76rem; letter-spacing:.01em;
  cursor:default; pointer-events:none; user-select:none; white-space:nowrap;
}
.hs-locked .lk{ width:12px; height:12px; flex:none; color:var(--muted-soft); }

/* ---------- 3 · continue chat · main CTA ---------- */
/* like Today's Lesson box, a touch bigger — white, orange border + button */
.hs-cont{
  display:flex; align-items:center; gap:16px;
  background:#fff; border:1.5px solid rgba(221, 87, 28,.55);
  border-radius:18px; padding:18px 20px;
  box-shadow:0 0 0 3px rgba(221, 87, 28,.08), 0 10px 28px -12px rgba(221, 87, 28,.42);
  cursor:pointer; transition:transform .2s var(--ease-back), box-shadow .25s;
}
.hs-cont:hover{ transform:translateY(-2px); box-shadow:0 0 0 3px rgba(221, 87, 28,.12), 0 16px 36px -12px rgba(221, 87, 28,.5); }
.hs-cont .hs-lesson__ttl b{ font-size:1.06rem; }
/* daily-activity progress bar (was the 7/8 count) — longer, finer, more air above */
.hs-actbar{ margin-top:12px; width:100%; height:4px; border-radius:999px; background:#EDEBE4; overflow:hidden; }
.hs-actbar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--coral),var(--coral-deep)); }
.hs-resume{
  flex:none; align-self:center;
  padding:10px 18px; border-radius:13px;
  background:var(--coral); color:#fff;
  font-weight:800; font-size:.88rem; letter-spacing:.01em;
  box-shadow:0 5px 14px -7px rgba(221, 87, 28,.55);
  transition:transform .18s, background .18s;
}
.hs-cont:hover .hs-resume{ background:var(--coral-deep); transform:translateX(2px); }

/* ---------- 4 · quick actions · 2×2 grid ---------- */
.hs-qa.qa{
  display:grid !important; grid-template-columns:1fr 1fr; gap:12px;
  margin:0 16px !important;
}
.hs-qa.qa button{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  background:#fff !important; border:1px solid var(--line-soft) !important;
  border-radius:14px !important; padding:14px 12px !important;
  text-align:center; cursor:pointer; box-shadow:none !important;
  transition:transform .2s var(--ease-back), box-shadow .25s, border-color .2s;
}
.hs-qa.qa button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px -14px rgba(35,39,31,.3) !important;
  border-color:var(--coral-soft) !important;
}
.hs-qa.qa button:active{ transform:translateY(0) scale(.98); }
.hs-qa.qa button .hs-qa__ic{ display:inline-flex; line-height:0; }
.hs-qa.qa button .hs-qa__ic svg{ width:27px; height:27px; display:block; }
.hs-qa.qa button b{
  font-size:.92rem !important; font-weight:800 !important; color:var(--ink) !important;
  letter-spacing:0 !important; white-space:nowrap;
}
/* per-card colour schemes */
/* Daily Games — black box, white text, orange logo */
.hs-qa.qa button[data-qa="games"]{ background:#141414 !important; border-color:#141414 !important; }
.hs-qa.qa button[data-qa="games"] b{ color:#fff !important; }
.hs-qa.qa button[data-qa="games"] .hs-qa__ic{ color:#fff; }
/* Leaderboard — orange box, white text, black logo (slightly desaturated so it
   doesn't overpower the grid; primary orange is reserved for the Resume CTA) */
.hs-qa.qa button[data-qa="rank"]{ background:#E8704F !important; border-color:#E8704F !important; }
.hs-qa.qa button[data-qa="rank"] b{ color:#fff !important; }
.hs-qa.qa button[data-qa="rank"] .hs-qa__ic{ color:#fff; }
/* French Journey & All Lessons — light-orange box, black text, orange/black logos */
.hs-qa.qa button[data-qa="journey"],
.hs-qa.qa button[data-qa="lessons"]{ background:var(--coral-tint) !important; border-color:rgba(221, 87, 28,.28) !important; }
.hs-qa.qa button[data-qa="journey"] b,
.hs-qa.qa button[data-qa="lessons"] b{ color:var(--ink) !important; }
.hs-qa.qa button[data-qa="journey"] .hs-qa__ic{ color:var(--ink); }
.hs-qa.qa button[data-qa="lessons"] .hs-qa__ic{ color:#141414; }

/* ---------- 5 · achievement stat card ---------- */
/* contained rounded card, same language as the tiles above */
.hs-ach{
  margin-top:auto;
  display:grid; grid-template-columns:repeat(2,1fr);
  background:transparent;
  border:none; border-top:1.5px solid rgba(35,39,31,.2);
  border-radius:0;
  padding:16px 10px 6px;
}
.hs-ach > div{
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:10px;
  position:relative;
}
/* one mid divider line */
.hs-ach > div + div::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  height:66%; width:1.5px; background:rgba(35,39,31,.2);
}
/* number in a rounded orange badge, white text */
.hs-ach b{
  display:inline-block; font-size:1.05rem; font-weight:900; color:#fff; line-height:1;
  background:var(--coral); border-radius:10px; padding:7px 13px;
}
/* label font matches French Journey title (weight 800, ink), just smaller */
.hs-ach span{ font-size:.84rem; font-weight:800; color:var(--ink); letter-spacing:0; }

/* keep it tidy if the device is rendered narrow */
@media (max-width:600px){
  .appwin .dash#dash{ gap:14px !important; }
  #dash .hs-greet{ font-size:1.5rem !important; }
}

/* ---------- mobile: hero + device must never exceed the viewport ----------
   The hero grid track floored at its content min-width and pushed the phone
   past the screen edge (dashboard right side clipped). Let the track shrink
   and pin the device to the column width so its fluid rows reflow cleanly. */
@media (max-width:560px){
  .hero2{ grid-template-columns:minmax(0,1fr) !important; }
  .hero2 > .reveal,
  .hero2__stage,
  .hero2__stage .appwin{ min-width:0 !important; max-width:100% !important; }
  .hero2__stage{ width:100%; margin-inline:auto; box-sizing:border-box; }
  .hero2__stage .appwin{ width:100%; box-sizing:border-box; }
  /* greeting row: shrink greeting + chip so both fit the device width (no clip) */
  #dash .hs-greet{ font-size:1.12rem !important; }
  .hs-toprow{ gap:8px !important; }
  .hs-lvl{ padding:6px 10px !important; font-size:.8rem !important; gap:5px !important; }
  .hs-lvl .hs-flag{ width:16px !important; height:11px !important; }
  .hs-qa.qa{ margin:0 !important; }
  /* Head2Head arena: the fixed 160px middle column pushed the friend card
     off-screen. Shrink the centre and let both sides flex within the card. */
  .h2h__arena, .h2h__grow{ grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr) !important; gap:9px !important; }
  .h2h__side, .h2h__scwrap{ max-width:100% !important; }
  .h2h__vs{ width:44px !important; height:44px !important; font-size:.86rem !important; }
}