/* Luka UX additions — 10 Sep 2026 (quiz navigation, hints, first-flow pulse, player icons, games row). Fold into luka.css at the next design pass. */
/* ---------- quiz navigation (10 Sep 2026): sticky Back/Continue, multi/single hints, swipe ---------- */
.quiz .cta{position:sticky;bottom:0;z-index:5;margin:auto -22px 0;padding:18px 22px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 78%,transparent)}
.ctarow{display:flex;gap:10px;align-items:stretch}
.ctarow .btn{flex:1}
.ctarow .btn.ghost.qback{flex:0 0 auto;width:auto;padding:14px 18px;white-space:nowrap}
.qhint{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2);border-radius:999px;padding:6px 12px;margin:-10px 0 14px}
.qhint.multi{color:var(--green);background:var(--green-tint)}
.qhint.multi:before{content:'☑';font-size:13px}
.qhint:not(.multi):before{content:'◉';font-size:11px}
.opt{position:relative}
.opt.on:after{content:'✓';position:absolute;right:12px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.brandline[role=button]{cursor:pointer}
.brandline[role=button]:active{opacity:.75}

/* first flow ready: draw the eye to Start practice */
.genBtn.pulse{animation:ctaPulse 1.6s ease-in-out 8}
@keyframes ctaPulse{0%,100%{box-shadow:0 8px 20px rgba(0,0,0,.18)}50%{box-shadow:0 0 0 10px rgba(255,255,255,.28),0 8px 20px rgba(0,0,0,.18);transform:scale(1.03)}}

/* player: SVG play/pause, optically centred */
.pbtns button.main svg{width:30px;height:30px;display:block}
.pbtns button.main svg path{transform:translateX(1px)}

/* games entry on Today */
.gamesrow{display:flex;align-items:center;gap:14px;margin:12px 20px 4px;padding:14px 16px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);text-decoration:none;color:inherit}
.gamesrow .gic{width:46px;height:46px;border-radius:14px;background:var(--terra-soft);display:flex;align-items:center;justify-content:center;font-size:22px;flex:none}
.gamesrow b{display:block;font-size:14px;color:var(--ink)}
.gamesrow small{display:block;font-size:12px;color:var(--ink-3);line-height:1.35;margin-top:2px}
.gamesrow .go{margin-left:auto;color:var(--green);font-weight:800;font-size:18px;flex:none}
@media (prefers-reduced-motion:reduce){ .genBtn.pulse{animation:none} }

/* ---------- 10 Sep 2026 (h): random flow tile, strip scroll affordance, gremlin intro, batch themes ---------- */
/* Surprise me — Pro random flow, full-width tile under the quick sessions */
.quick.wide{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:14px 16px}
.quick.wide .qic{width:46px;height:46px;border-radius:14px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:24px;flex:none}
.quick.wide b{margin-top:0;font-size:14px}
.quick.wide small{display:block}
.quick.wide .badge{margin-left:auto;flex:none}

/* stitched sequence: it scrolls sideways — fade the trailing edge so that is obvious, and show a thin
   scrollbar wherever there is a mouse (touch keeps the clean edge). app.js adds mouse drag-to-scroll. */
.clipstrip{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 44px),transparent);cursor:grab}
.clipstrip.dragging{cursor:grabbing;user-select:none}
@media (hover:hover) and (pointer:fine){
  .clipstrip{scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-bottom:10px}
  .clipstrip::-webkit-scrollbar{display:block;height:6px}
  .clipstrip::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
}
.stripNote .swipe{color:var(--green);font-weight:800}

/* Meet-your-gremlin sheet (first landing on Today, and on avatar tap) */
#avatar[role=button]{cursor:pointer}
#avatar[role=button]:active{transform:scale(.94)}
.gremArt{width:132px;height:132px;border-radius:50%;margin:2px auto 14px;display:flex;align-items:center;justify-content:center;background:var(--green-soft);box-shadow:var(--shadow-1)}
.gremArt svg{width:110px;height:110px}
.gremArt.calm{background:linear-gradient(140deg,#fff3d6,var(--gold));box-shadow:0 0 0 6px rgba(232,196,124,.25)}
.gremsheet h3{text-align:center}
.gremsheet .sub{text-align:center;max-width:320px;margin-left:auto;margin-right:auto}
.gremsheet .sub b{color:var(--terra-2)}
.gremrow{display:flex;justify-content:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.gremrow span{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;background:var(--surface-2);color:var(--ink-2);border-radius:999px;padding:6px 11px}

/* library: batch header shows the theme, batch number underneath */
.batchhead{display:flex;flex-direction:column;gap:2px;padding-top:16px}
.batchhead b{font-family:var(--font-display);font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600}
.batchhead span{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--green-3);font-weight:800}

/* library poses are tappable: card is a button; pose sheet with a hero band */
.libcard{text-align:left;width:100%;padding:0;display:block;cursor:pointer;transition:.15s}
.libcard:active{transform:scale(.97)}
.posehero{height:120px;border-radius:18px;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:14px;color:#fff}
.posehero .poseic{font-size:56px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.3))}
.posehero .ph{position:absolute;top:10px;left:12px;background:rgba(255,255,255,.85);color:var(--green);font-size:9.5px;padding:3px 8px;border-radius:99px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.posehero .dur{position:absolute;bottom:10px;right:12px;background:rgba(0,0,0,.4);font-size:10.5px;padding:3px 9px;border-radius:99px}
.posesheet .btn{margin-top:10px}

/* ---------- 10 Sep 2026 (i): stick-figure pictograms (js/picto.js) in the player, strip, library, pose sheet, class timeline ---------- */
.picto{display:block;overflow:visible}
.thumb .picto.th,.libcard .th .picto.th{width:64px;height:54px;background:rgba(246,243,238,.94);border-radius:10px;padding:2px 3px}
.thumb .emo,.libcard .th .emo{display:inline-block}
.cliplayer{justify-content:flex-start;padding-top:calc(150px + env(safe-area-inset-top))}
.cliplayer h2{font-size:26px;margin-top:14px}
.pictocard{width:min(62vw,240px);background:#f6f3ee;border-radius:26px;padding:12px 14px 6px;box-shadow:0 16px 36px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;animation:none}
.pictocard .picto.big{width:100%;height:auto;aspect-ratio:130/104}
.pictocard .breath{font-size:10.5px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;letter-spacing:2px;text-transform:uppercase;color:var(--terra-2);font-weight:800;height:16px;line-height:16px;margin-top:2px;transition:opacity .3s}
.pictocard .breath:empty{opacity:0}
.posehero .picto.hero{height:100px;width:auto;background:#f6f3ee;border-radius:16px;padding:4px 10px}
.tl .tlpic{float:right;width:66px;height:56px;background:var(--bg);border-radius:10px;margin:0 0 6px 10px;display:block}
.tl .tlpic .picto{width:100%;height:100%}
@media (prefers-reduced-motion:reduce){ .pictocard .picto *{animation:none!important} }

/* ---------- 11 Sep 2026 (n): gremlin sheet — chips carry the facts, pick-your-gremlin row; Ask Luka FAB = Little Luka ---------- */
.gremsheet .sub{margin-bottom:12px}
.gremrow span.hot{background:var(--terra-soft);color:var(--terra-2)}
.gremrow span.gold{background:linear-gradient(120deg,#fff3d6,var(--gold));color:#7a5a12}
.grempick{margin:2px 0 6px;text-align:center}
.grempick small{display:block;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-3);font-weight:800;margin-bottom:8px}
.grempick .row{display:flex;justify-content:center;gap:8px}
.grempick button{width:52px;height:52px;border-radius:50%;background:var(--surface-2);border:2px solid transparent;display:flex;align-items:center;justify-content:center;transition:.15s;position:relative}
.grempick button svg{width:40px;height:40px}
.grempick button.on{border-color:var(--green);background:var(--green-tint)}
.grempick button:active{transform:scale(.92)}
.grempick .badge{position:absolute;top:-7px;right:-9px;font-size:8px;padding:2px 6px}
/* floating Ask Luka: the avatar is the button (the old text version never fitted the circle) */
.fab.ext{overflow:visible;padding:0}
.fab .fabtxt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* screen readers only */
.fab .fabic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16)}
.fab .fabic svg{width:40px;height:40px;display:block}
.fab .badge{top:-8px;right:-4px}

/* ---------- 12 Sep 2026 (o): the gremlin takes shape during the onboarding steps (#qgrem, js/ui-hooks.js) ---------- */
.qgrem{display:flex;align-items:center;gap:12px;margin:-12px 0 18px;padding:10px 12px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);text-align:left;animation:up .25s ease}
.qgrem .art{flex:none;width:54px;height:54px;border-radius:50%;background:var(--terra-soft);display:flex;align-items:center;justify-content:center}
.qgrem .art svg{width:44px;height:44px;display:block}
.qgrem.calm .art{background:linear-gradient(120deg,#fff3d6,var(--gold))}
.qgrem .row{flex:none;display:flex;align-items:center}
.qgrem .row svg{width:34px;height:34px;margin-right:-9px;opacity:.85;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
.qgrem .row svg:last-child{margin-right:0}
.qgrem .txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.qgrem .txt small{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-3);font-weight:800}
.qgrem .txt b{font-size:15px;color:var(--ink);line-height:1.2}
.qgrem .txt span{font-size:12px;color:var(--ink-2);line-height:1.4}
@media (prefers-reduced-motion:reduce){ .qgrem{animation:none} }

/* ---------- 12 Sep 2026 (o): paywall on a laptop — the sheet scrolls instead of clipping at the top, trust lines wrap
   properly (the icon span's 18 px width was hitting the text span too), and the top art is the same logo as the button ---------- */
.sheet{max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.trust div > span:first-child{flex:none;width:18px;text-align:center}
.trust div > span:not(:first-child){flex:1;width:auto;text-align:left}
.payart{width:58px;height:58px;border-radius:50%;background:linear-gradient(120deg,var(--terra),var(--terra-2));display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 12px;color:#fff;overflow:hidden}
.payart img{width:100%;height:100%;object-fit:cover;display:block}
.payart svg{width:48px;height:48px;display:block}

/* ---------- 12 Sep 2026 (p): regenerate sheet + LGW balance pass (js/ui-hooks.js) ---------- */
.regensheet .btn{margin-top:8px}
.rgcount{display:inline-block;margin-left:8px;background:rgba(255,255,255,.18);border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800;letter-spacing:.3px}
.regensheet .btn.ghost .rgcount{background:var(--surface-2);color:var(--ink-3)}
.rgdial{margin-top:16px;padding:14px;border-radius:18px;background:var(--bg);border:1px solid var(--line)}
.rgdial small{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-3);font-weight:800;margin-bottom:10px}
.rgchips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.rgchip{background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:8px 13px;font-size:12px;color:var(--ink-2);font-weight:700;transition:.15s}
.rgchip.on{border-color:var(--green);color:var(--green);background:var(--green-tint)}
.rgdial .field{padding:13px 16px;font-size:14px}
.rgnote{font-size:11.5px;line-height:1.5;color:var(--ink-3);margin-top:14px;text-align:center}
.regenrow{margin:6px 20px 12px}
.regenrow button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);color:var(--ink)}
.regenrow .ric{width:40px;height:40px;border-radius:12px;background:var(--terra-soft);display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.regenrow b{display:block;font-size:13.5px}
.regenrow small{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.35;margin-top:2px}
.regenrow .badge{margin-left:auto;flex:none}

/* ---------- 12 Sep 2026 (q): the gremlin on the player ring (calms across the practice) + done-screen line ---------- */
.ringwrap{overflow:visible}
.ringgrem{position:absolute;right:-16px;bottom:-6px;width:34px;height:34px;border-radius:50%;background:rgba(11,21,18,.7);border:2px solid rgba(255,255,255,.55);overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.35);transition:box-shadow .6s,border-color .6s}
.ringgrem span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ringgrem span svg{width:28px;height:28px;display:block}
.ringgrem .g2{opacity:0;transition:opacity 1s linear}
.ringgrem.gold{border-color:var(--gold);box-shadow:0 0 0 5px rgba(232,196,124,.35),0 4px 14px rgba(232,196,124,.45)}
.donegrem{display:flex;align-items:center;gap:12px;margin-top:18px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.12);text-align:left;max-width:300px}
.donegrem .art{flex:none;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.donegrem .art svg{width:40px;height:40px;display:block}
.donegrem.gold .art{background:linear-gradient(120deg,#fff3d6,var(--gold))}
.donegrem b{display:block;font-size:14px}
.donegrem small{display:block;font-size:12px;opacity:.88;line-height:1.4;margin-top:1px}
@media (prefers-reduced-motion:reduce){ .ringgrem .g2{transition:none} }

/* ---------- 12 Sep 2026 (r): gremlin sheet copy (Choose your gremlin), Ask Luka AI look ---------- */
.grempick em{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin:-4px 0 10px}
.gremsheet .sub b{color:var(--ink);font-weight:800}
.genBtn.aichat.ai{position:relative;border:1.5px solid transparent;background:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)) padding-box,linear-gradient(110deg,rgba(255,255,255,.35) 0%,var(--gold) 30%,#fff 50%,var(--terra) 70%,rgba(255,255,255,.35) 100%) border-box;background-size:auto,300% 100%;animation:aiSheen 5s linear infinite}
.genBtn.aichat .ai-spark{display:inline-block;color:var(--gold);font-size:18px;line-height:1;margin-right:4px;text-shadow:0 0 8px rgba(232,196,124,.9),0 0 18px rgba(255,255,255,.5);animation:aiTwinkle 2.4s ease-in-out infinite}
@keyframes aiSheen{to{background-position:0 0,-300% 0}}
@keyframes aiTwinkle{0%,100%{transform:scale(1) rotate(0);opacity:.9}50%{transform:scale(1.25) rotate(20deg);opacity:1}}
@media (prefers-reduced-motion:reduce){ .genBtn.aichat.ai{animation:none} .genBtn.aichat .ai-spark{animation:none} }

/* ---------- 12 Sep 2026 (r): goal card at the end of the stitched sequence — your gremlin on a lotus, gold halo ---------- */
.clip.goal{cursor:pointer;border-color:rgba(232,196,124,.7)}
.clip.goal .thumb{background:radial-gradient(circle at 50% 62%,#fff3d6 0,var(--gold) 46%,#c9962f 100%);overflow:hidden}
.clip.goal .halo{position:absolute;left:50%;top:54%;width:54px;height:54px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.9) 0,rgba(255,255,255,0) 70%);animation:haloPulse 3s ease-in-out infinite}
.clip.goal .lotus{position:absolute;left:50%;bottom:2px;width:78px;transform:translateX(-50%)}
.clip.goal .thumb svg.lav{position:relative;width:46px;height:46px;margin-top:-10px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
.clip.goal .thumb .ph{background:rgba(255,255,255,.85);color:#7a5a12}
.clip.goal .nm{color:#7a5a12}
.clip.goal .nm i{color:#a27a2a}
.clip.goal.gold{box-shadow:0 0 0 3px rgba(232,196,124,.35)}
@keyframes haloPulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}}
@media (prefers-reduced-motion:reduce){ .clip.goal .halo{animation:none} }

/* ---------- (s) quiz keyboard (12 Sep 2026, js/ui-mobile.js): while a quiz field has focus the sticky footer flows with the content so the soft keyboard cannot hide the input ---------- */
body.kb-open .quiz .cta{position:static;margin-top:18px;background:none}