/* =========================================================
   FamGames Learn — pricing card, /learn dashboard, kid mode
   and the learning games. Every class is prefixed ln-.
   Gold (--gold) is Learn's accent so it reads as an "extra",
   never as a competing main plan. Loaded after polish.css.
========================================================= */

/* --- pricing card: small, vertical, secondary --- */
.ln-plan-row{ display:grid; justify-items:center; margin-top:26px; }
.ln-plan-or{
  display:flex; align-items:center; gap:14px; width:min(100%,560px);
  margin:0 0 16px; color:var(--muted2); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.ln-plan-or::before, .ln-plan-or::after{ content:""; flex:1; height:1px; background:var(--line); }

.plan.plan-learn{
  position:relative;
  width:min(100%,380px);
  min-height:0;                     /* override .plan 540px */
  padding:22px;
  border-radius:24px;
  border-color:rgba(var(--fg-gold),.18);
  background:
    radial-gradient(circle at 0 0, rgba(var(--fg-gold),.08), transparent 45%),
    linear-gradient(145deg, rgba(14,38,29,.92), rgba(8,23,17,.92));
  display:flex; flex-direction:column; gap:0;
}
.plan.plan-learn.is-active{ border-color:rgba(var(--fg-gold),.45); box-shadow:0 0 50px -22px rgba(var(--fg-gold),.7); }
.ln-plan-top{ display:flex; align-items:center; gap:14px; }
.ln-plan-icon{ width:44px; height:44px; border-radius:14px; font-size:20px; margin:0; flex:none;
  background:rgba(var(--fg-gold),.08); color:var(--gold); border-color:rgba(var(--fg-gold),.2); }
.ln-plan-icon::before{ width:84px !important; height:84px !important; }
.plan-learn .plan-kicker{ color:#b9a46a; }
.plan-learn h3{ font-size:22px; margin:4px 0 0; letter-spacing:-.04em; }
.ln-badge{ margin-left:auto; background:rgba(var(--fg-gold),.14); color:var(--gold); }
.ln-plan-price{ font-size:32px; margin:16px 0 12px; }
.ln-plan-list{ list-style:none; padding:0; margin:0 0 18px; display:grid; gap:8px; color:#adb9b3; font-size:12px; line-height:1.45; }
.ln-plan-list li{ position:relative; padding-left:16px; }
.ln-plan-list li::before{ content:""; position:absolute; left:2px; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--gold); opacity:.8; }
.ln-plan-list b{ color:var(--text); font-weight:600; }
.ln-plan-cta{ min-height:46px; }
.ln-plan-cta:not(:disabled):hover{ border-color:rgba(var(--fg-gold),.45); }
.ln-plan-manage{ display:block; margin:10px auto 0; }
.ln-plan-fine{ margin:10px 0 0; text-align:center; font-size:11px; color:var(--muted2); }
.ln-plan-warn{ color:#f1dcb0; }
.store .ln-plan-row{ margin:26px 0 0; }
.plan-learn.fg-arrive{ animation:fg-arrive 1.6s var(--fg-spring) both; }

/* --- /learn page --- */
/* the reused pl-* classes (.pl-card, .pl-icon, .pl-modal-card, .pl-choice…) read these vars,
   which are only defined on .pl — define them for Learn too. Render Learn modals INSIDE #learnApp. */
.ln, .ln-earned{
  --accent:#79dba8;
  --glass:rgba(12,35,25,.72);
  --glass2:rgba(16,43,32,.86);
  --edge:rgba(232,244,238,.12);
}
html.fg-learn ins.adsbygoogle, html.fg-learn .google-auto-placed, html.fg-learn .fg-ad-slot{ display:none !important; }
.ln{ padding:28px 0 70px; }
.ln-dot{ background:var(--gold); box-shadow:0 0 12px rgba(var(--fg-gold),.7); }
.ln-head{ max-width:640px; margin:10px 0 28px; }
.ln-head .headline{ margin:12px 0 10px; }
.ln-head p{ color:var(--muted); line-height:1.6; margin:0; }
.ln-how{ list-style:none; margin:0 0 8px; padding:0; display:grid; gap:10px; grid-template-columns:repeat(3,1fr); }
.ln-how li{ display:flex; gap:12px; align-items:flex-start; padding:16px; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.02); }
.ln-how li > b{ flex:none; width:30px; height:30px; border-radius:10px; display:grid; place-items:center; font-size:13px; color:var(--gold); background:rgba(var(--fg-gold),.1); }
.ln-how strong{ display:block; font-size:14px; margin-bottom:2px; }
.ln-how span{ color:var(--muted); font-size:13px; line-height:1.45; }

.ln-dash-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:10px 0 22px; }
.ln-dash-head .headline{ margin:10px 0 0; }
.ln-dash-actions{ display:flex; align-items:center; gap:14px; }

.ln-kids{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-bottom:22px; }
/* kid cards are scoped to the list: .ln.ln-kid is also the kid-mode root */
.ln-kids .ln-kid{
  display:flex; align-items:center; gap:14px; padding:14px 16px; min-height:84px;
  border-radius:20px; border:1px solid var(--line); color:var(--text); text-align:left;
  background:linear-gradient(150deg, rgba(17,49,37,.7), rgba(7,22,16,.7));
}
.ln-kid-main{ display:flex; flex-direction:column; min-width:0; flex:1; }
.ln-kid-main b{ font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ln-kid-main small{ color:var(--muted); font-size:12px; }
.ln-kid-tools{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.ln-kid-tools .text-button{ padding:4px 0; min-height:28px; }
.ln-danger{ color:#ffb0b3 !important; }
.ln-kids .ln-kid-add{ border-style:dashed; background:transparent; cursor:pointer; }
.ln-kids .ln-kid-add:hover{ border-color:rgba(var(--fg-glow2),.4); }
.ln-seg{ max-width:520px; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:1fr; }

.ln-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.ln-stat{ padding:16px 18px; border-radius:20px; border:1px solid var(--line); background:rgba(255,255,255,.025); display:flex; flex-direction:column; gap:4px; }
.ln-stat span{ font-size:10px; letter-spacing:.14em; font-weight:700; color:#7f988c; text-transform:uppercase; }
.ln-stat b{ font-size:34px; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.ln-stat b small{ font-size:16px; color:var(--muted); margin-left:2px; }
.ln-stat em{ font-style:normal; font-size:12px; color:var(--muted); }
.ln-stat-gold{ border-color:rgba(var(--fg-gold),.25); }
.ln-stat-gold b{ color:var(--gold); }
.ln-subjects{ grid-column:span 2; }
.ln-activity{ grid-column:span 2; }
.ln-bar-row{ display:grid; grid-template-columns:120px 1fr 52px; align-items:center; gap:10px; margin-top:12px; font-size:13px; }
.ln-bar-row small{ text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
.ln-bar{ height:10px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; }
.ln-bar i{ display:block; height:100%; width:var(--w); border-radius:inherit; background:linear-gradient(90deg, var(--green), var(--green2)); transition:width .8s var(--fg-spring); }
#lnActivity{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:4px; max-height:340px; overflow:auto; }
.ln-ev{ display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.025); font-size:13px; }
.ln-ev time{ color:var(--muted2); font-size:11px; white-space:nowrap; }
.ln-ev-ico{ width:24px; height:24px; border-radius:8px; display:grid; place-items:center; font-size:12px; background:rgba(255,255,255,.05); }
.ln-ev-answer_ok .ln-ev-ico{ color:var(--green2); }
.ln-ev-answer_bad .ln-ev-ico{ color:#ffb0b3; }
.ln-ev-pass_earned .ln-ev-ico, .ln-ev-pass_used .ln-ev-ico{ color:var(--gold); background:rgba(var(--fg-gold),.1); }
.ln-empty{ color:var(--muted); font-size:13px; padding:10px 0; }
.ln-modal-title{ margin:6px 0 14px; font-size:26px; letter-spacing:-.04em; }
.ln-form{ display:grid; gap:12px; }
.ln-form input{ width:100%; }

@media (max-width:980px){
  .ln-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  .ln-how{ grid-template-columns:1fr; }
  .ln-dash-actions{ width:100%; flex-direction:column-reverse; align-items:stretch; }
  .ln-dash-actions .btn{ width:100%; }
  .ln-subjects, .ln-activity{ grid-column:1 / -1; }
  .ln-stat b{ font-size:28px; }
  .ln-bar-row{ grid-template-columns:96px 1fr 44px; }
  .ln-kid-tools{ flex-direction:row; flex-wrap:wrap; gap:12px; width:100%; justify-content:flex-start; }
  .ln-kids .ln-kid{ flex-wrap:wrap; }
}

/* --- kid mode (full-screen, like the play area) --- */
html.fg-kid .site-nav,
html.fg-kid #fg3d,
html.fg-kid .fg-play-pill,
html.fg-kid .fg-progress,
html.fg-kid .floating-play{ display:none !important; }
.ln.ln-kid{ padding:0 0 calc(30px + env(safe-area-inset-bottom)); min-height:100dvh; display:flex; flex-direction:column; }
.ln-top{ margin:0; }
.ln-kid-body{ width:min(calc(100% - 28px), 760px); margin:0 auto; padding-top:18px; flex:1; }
.ln-center{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding-top:4vh; }
.ln-kid-h{ margin:6px 0 4px; font-size:clamp(26px,6vw,40px); letter-spacing:-.04em; line-height:1.05; }
.ln-exit{
  min-height:36px; padding:0 12px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.03); color:var(--muted); font-size:11px; font-weight:600;
}
.ln-pass-chip{ display:inline-flex; gap:5px; align-items:center; min-height:34px; padding:0 10px; border-radius:11px;
  border:1px solid rgba(var(--fg-gold),.3); background:rgba(var(--fg-gold),.08); color:var(--gold); font-size:12px; font-weight:700; }
.ln-pass-chip[hidden]{ display:none; }

/* picker */
.ln-pick{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:10px; }
.ln-pick-kid{
  width:150px; padding:20px 12px 16px; border-radius:24px; border:1px solid var(--edge, var(--line));
  background:linear-gradient(150deg, rgba(17,49,37,.85), rgba(7,22,16,.85)); color:var(--text);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.ln-pick-kid b{ font-size:18px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ln-pick-kid small{ color:var(--gold); font-weight:700; }
.ln-pick-kid:hover{ border-color:rgba(var(--fg-glow2),.45); transform:translateY(-3px); }

/* pin */
.ln-pin-dots{ display:flex; gap:14px; margin:4px 0; }
.ln-pin-dots i{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line2); transition:background .2s, transform .25s var(--fg-spring); }
.ln-pin-dots i.on{ background:var(--green2); border-color:var(--green2); transform:scale(1.15); box-shadow:0 0 14px rgba(var(--fg-glow2),.6); }
.ln-pin-msg{ min-height:20px; margin:0; color:#ffb0b3; font-size:14px; }
.ln-pinpad{ display:grid; grid-template-columns:repeat(3,76px); gap:12px; }
.ln-pinpad button{
  height:76px; border-radius:22px; border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--text); font-size:28px; font-weight:600; font-variant-numeric:tabular-nums;
}
.ln-pinpad button:active{ background:rgba(var(--fg-glow),.18); transform:scale(.96); }
.ln-pinpad .ln-pin-ghost{ background:transparent; border-color:transparent; font-size:15px; color:var(--muted); }

/* home */
.ln-hello{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.ln-hello h2{ margin:2px 0 0; font-size:30px; letter-spacing:-.04em; }
.ln-progress{ display:flex; align-items:center; gap:22px; }
.ln-ring{ --p:0; position:relative; width:136px; height:136px; flex:none; display:grid; place-items:center; }
.ln-ring svg{ position:absolute; inset:0; transform:rotate(-90deg); }
.ln-ring circle{ fill:none; stroke-width:10; }
.ln-ring .r-bg{ stroke:rgba(255,255,255,.07); }
.ln-ring .r-fg{
  stroke:var(--green2); stroke-linecap:round;
  stroke-dasharray:326.73; stroke-dashoffset:calc(326.73 * (1 - var(--p)));
  transition:stroke-dashoffset .9s var(--fg-spring);
  filter:drop-shadow(0 0 8px rgba(var(--fg-glow2),.55));
}
.ln-ring > div{ text-align:center; line-height:1; }
.ln-ring b{ display:block; font-size:38px; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.ln-ring small{ color:var(--muted); font-size:13px; }
.ln-progress-copy{ flex:1; min-width:0; }
.ln-progress-copy h3{ margin:0 0 4px; font-size:20px; }
.ln-progress-copy p{ margin:0 0 12px; }
.ln-passes{ display:flex; align-items:center; gap:10px; margin-bottom:14px; color:var(--muted); font-size:14px; }
.ln-pass-big{ font-size:26px; font-weight:700; color:var(--gold); text-shadow:0 0 20px rgba(var(--fg-gold),.45); }
.ln-section-h{ margin:26px 0 12px; font-size:18px; letter-spacing:-.02em; }
.ln-games{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.ln-game{
  --accent:#79dba8;
  min-height:150px; padding:18px; border-radius:22px; text-align:left; color:var(--text);
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background:radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
             linear-gradient(150deg, rgba(17,49,37,.85), rgba(7,22,16,.85));
  display:flex; flex-direction:column; gap:6px;
}
.ln-game:hover{ border-color:color-mix(in srgb, var(--accent) 50%, transparent); box-shadow:0 0 50px -22px var(--accent); }
.ln-game-sym{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:24px; font-weight:700;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); margin-bottom:auto; }
.ln-game b{ font-size:18px; letter-spacing:-.02em; margin-top:10px; }
.ln-game small{ color:var(--muted); font-size:13px; }

/* chooser */
.ln-chooser .pl-modal-card{ width:min(1000px,100%); }
.ln-chooser-grid{ margin-top:14px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.ln-chooser-grid .lib-card{ opacity:1; transform:none; }   /* skip the lib-rv scroll reveal */
.ln-exit-card{ width:min(440px,100%); }

@media (max-width:560px){
  .ln-progress{ flex-direction:column; text-align:center; }
  .ln-passes{ justify-content:center; }
  .ln-pinpad{ grid-template-columns:repeat(3,72px); }
  .ln-pinpad button{ height:72px; }
  .ln-games{ gap:10px; }
  .ln-game{ min-height:132px; padding:14px; }
}

/* --- quiz --- */
.ln-quiz{ --accent:#79dba8; }
.ln-quiz-bar{ align-items:center; }
.ln-quiz-meter{ flex:1; min-width:0; }
.ln-quiz-meter-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.ln-streak{ font-size:14px; font-weight:700; color:#ffd9a0; font-variant-numeric:tabular-nums; }
.ln-streak.hot{ animation:ln-hot .6s var(--fg-spring); }
@keyframes ln-hot{ 40%{ transform:scale(1.35); text-shadow:0 0 18px #ff9f5a; } }
.ln-bar-lg{ height:14px; }
.ln-bar-lg i{ background:linear-gradient(90deg, var(--green), var(--gold)); }
.ln-bar.ln-pop i{ animation:ln-barpop .5s var(--fg-spring); }
@keyframes ln-barpop{ 50%{ filter:brightness(1.4); box-shadow:0 0 16px rgba(var(--fg-glow2),.7); } }
.ln-bar-cap{ display:block; margin-top:5px; color:var(--muted); font-size:12px; }
.ln-bar-cap b{ color:var(--text); }

.ln-qcard{ padding:24px 20px; text-align:center; }
.ln-qsubject{ display:inline-block; font-size:10px; letter-spacing:.16em; font-weight:700; text-transform:uppercase;
  color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius:999px; padding:4px 10px; }
.ln-q{ margin:14px 0 6px; font-size:clamp(28px,7vw,46px); letter-spacing:-.04em; line-height:1.1; overflow-wrap:anywhere; }
.ln-choices{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:20px; }
.ln-choice{
  position:relative; min-height:72px; padding:12px 14px 12px 44px; border-radius:18px;
  border:1px solid var(--edge, var(--line)); background:var(--glass, rgba(12,35,25,.72)); color:var(--text);
  font-size:clamp(17px,4.4vw,21px); font-weight:600; text-align:left; line-height:1.2;
  transition:transform .2s var(--fg-spring), border-color .2s, background .2s, box-shadow .2s;
}
.ln-key{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:8px;
  display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--muted); background:rgba(255,255,255,.05); }
.ln-choice:not(:disabled):hover{ border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
.ln-choice:disabled{ cursor:default; transform:none; }
.ln-choice.right{ border-color:var(--green2); background:rgba(var(--fg-glow),.18); box-shadow:0 0 34px -8px var(--green); }
.ln-choice.right .ln-key{ background:var(--green2); color:#04130c; }
.ln-choice.wrong{ border-color:var(--red); background:rgba(255,107,113,.12); }
.ln-choice.wrong .ln-key{ background:var(--red); color:#1a0506; }
.ln-choice.reveal{ border-color:rgba(var(--fg-glow2),.6); border-style:dashed; }
.ln-choice:disabled:not(.right):not(.wrong):not(.reveal){ opacity:.45; }
.ln-num{ display:flex; gap:10px; margin:20px auto 0; max-width:360px; }
.ln-num[hidden]{ display:none; }
.ln-num input{
  flex:1; min-width:0; min-height:64px; text-align:center; font-size:32px; font-weight:700; letter-spacing:.04em;
  border-radius:18px; border:1px solid var(--line2); background:rgba(0,0,0,.25); color:var(--text);
}
.ln-num input:focus{ outline:none; border-color:var(--green2); box-shadow:0 0 0 3px rgba(var(--fg-glow2),.2); }
.ln-num.right input{ border-color:var(--green2); background:rgba(var(--fg-glow),.14); }
.ln-num.wrong input{ border-color:var(--red); background:rgba(255,107,113,.1); }
.ln-feedback{ min-height:28px; margin:16px 0 0; font-size:18px; font-weight:700; }
.ln-feedback.good{ color:#c8f5dc; }
.ln-feedback.bad{ color:#ffb0b3; }

/* pass earned */
.ln-earned{ position:fixed; inset:0; z-index:79; display:grid; place-items:center; padding:20px;
  background:rgba(2,8,5,.65); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.ln-earned[hidden]{ display:none; }
.ln-earned-card{
  width:min(420px,100%); text-align:center; padding:30px 22px 24px; border-radius:28px;
  border:1px solid rgba(var(--fg-gold),.4);
  background:radial-gradient(circle at 50% 0, rgba(var(--fg-gold),.18), transparent 55%), linear-gradient(160deg, #0f2a1f, #07170f);
  box-shadow:0 40px 100px rgba(0,0,0,.5), 0 0 90px -30px rgba(var(--fg-gold),.8);
  animation:pl-sheet .6s var(--fg-spring);
}
.ln-earned-star{ font-size:84px; line-height:1; color:var(--gold); text-shadow:0 0 50px rgba(var(--fg-gold),.8);
  animation:ln-star 1s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes ln-star{ from{ transform:scale(.2) rotate(-120deg); opacity:0; } }
.ln-earned-card h2{ margin:8px 0 6px; font-size:clamp(28px,7vw,38px); letter-spacing:-.04em; }
.ln-earned-card p{ color:#b7c7bf; margin:0; }
.ln-earned-card b{ color:var(--gold); }

@media (max-width:420px){
  .ln-choices{ grid-template-columns:1fr; }   /* long words / facts stay readable */
  .ln-choice{ min-height:64px; }
}

/* --- focus + reduced motion --- */
.ln-kid button:focus-visible, .ln button:focus-visible, .ln a:focus-visible,
.plan-learn .btn:focus-visible, .ln-game:focus-visible, .ln-choice:focus-visible, .ln-pick-kid:focus-visible{
  outline:2px solid var(--green2); outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  .ln *, .ln-earned *, .plan-learn{ animation:none !important; transition:none !important; }
  .ln .pl-screen{ opacity:1; transform:none; }
}

/* --- additions used by public/js/learn.js --- */
html.fg-kid .footer,
html.fg-kid .consent-banner{ display:none !important; }
.pl.kid .pl-people, .pl.kid .pl-side{ display:none !important; }  /* kid mode: no chat / players panel */
.ln-lapsed{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.ln-ended{ margin:0 0 14px; }
.ln-next{ margin:14px 0 0 !important; color:var(--muted); font-size:12px !important; }
.ln-form-note{ margin:0; }
.ln-levels{ margin:14px 0; }
.ln-tiles{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:10px 0 4px; }
.ln-tiles span{
  width:44px; height:48px; display:grid; place-items:center; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); background:rgba(255,255,255,.04);
  font-size:22px; font-weight:700; color:var(--text);
}
.ln-num input:not([inputmode]){ font-size:26px; letter-spacing:.08em; text-transform:lowercase; }
.ln-game:disabled{ opacity:.5; cursor:default; }
@media (max-width:420px){
  .ln-tiles span{ width:38px; height:42px; font-size:19px; }
}