/* AURION LINGUA v2 ? premium design system (GLM seat). Pure CSS, system fonts. */
:root{
  --bg:#05080f; --bg-2:#0a0f1e;
  --panel:rgba(17,25,44,.66); --panel-2:rgba(10,16,30,.55); --panel-3:rgba(20,30,52,.42);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.04); --line-strong:rgba(255,255,255,.14);
  --accent:#2dd4bf; --accent-ink:#04221c;
  --accent-soft:color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-glow:color-mix(in srgb, var(--accent) 55%, transparent);
  --gold:#f5c14d; --red:#fb7185;
  --text:#eef3ff; --text-2:#c9d6f0; --dim:#8fa0c2; --dim-2:#6c7c9e;
  --r-sm:12px; --r:18px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-1:.18s; --dur-2:.32s; --dur-3:.6s;
  --shadow-1:0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px rgba(0,0,0,.35);
  --shadow-2:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px rgba(0,0,0,.55);
  --shadow-call:0 1px 0 rgba(255,255,255,.06) inset, 0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  --aurora-a:#1b3a6d; --aurora-b:#0c3a35; --aurora-c:#2a1450; --aurora-d:#102a4f;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --fs-caption:clamp(11px,3.6vw,13px); --fs-body:clamp(13px,4.2vw,15px);
  --fs-lg:clamp(15px,4.8vw,17px); --fs-xl:clamp(17px,5.4vw,20px);
  --fs-2xl:clamp(20px,6.4vw,24px); --fs-3xl:clamp(24px,7.6vw,30px);
  --fs-bigcap:clamp(26px,9vw,44px); --fs-price:clamp(46px,14vw,64px);
  /* v3 conversation-first additions */
  --gold-soft:color-mix(in srgb, var(--gold) 22%, transparent);
  --gold-glow:color-mix(in srgb, var(--gold) 55%, transparent);
  --red-soft:color-mix(in srgb, var(--red) 22%, transparent);
  --bub-radius:18px;
  --bub-c-bg:rgba(10,16,30,.74);
  --bub-u-bg:color-mix(in srgb, var(--accent) 28%, #0c1526);
  --bub-u-border:color-mix(in srgb, var(--accent) 50%, transparent);
  --bub-text:#ffffff;
  --bub-g-text:rgba(255,255,255,.66);
  /* v4 PLAY additions */
  --read-font:ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
  --sheen:rgba(255,255,255,.42);
  --ice:#7dd3fc; --ice-glow:color-mix(in srgb, var(--ice) 55%, transparent);
  --ice-soft:color-mix(in srgb, var(--ice) 18%, transparent);
  --lock:#f5c14d;
  --play-r:20px;
  /* v5 additions */
  --vault-r:14px; --vault-row-bg:rgba(16,24,44,.62);
  --erase-red:#fb7185; --erase-soft:color-mix(in srgb, var(--erase-red) 16%, transparent);
  --erase-border:color-mix(in srgb, var(--erase-red) 40%, transparent);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  font-size:var(--fs-body);line-height:1.5;min-height:100dvh;letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
::selection{background:var(--accent-glow);color:#fff;}
/* 3. AURORA */
.aurora{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 50% at 82% -8%, var(--aurora-a) 0%, transparent 60%),
    radial-gradient(55% 45% at -10% 108%, var(--aurora-b) 0%, transparent 60%),
    radial-gradient(50% 40% at 50% 50%, var(--aurora-c) 0%, transparent 70%),
    radial-gradient(70% 60% at 10% 0%, var(--aurora-d) 0%, transparent 65%),
    var(--bg);
  filter:saturate(1.05);
  animation:aurora-hue 26s linear infinite, aurora-drift 32s ease-in-out infinite alternate;
}
.aurora::before,.aurora::after{
  content:"";position:absolute;border-radius:50%;
  filter:blur(60px);opacity:.55;mix-blend-mode:screen;will-change:transform;
}
.aurora::before{
  width:70vmax;height:70vmax;left:-20vmax;top:-25vmax;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent), transparent 65%);
  animation:aurora-blob-a 24s ease-in-out infinite alternate;
}
.aurora::after{
  width:60vmax;height:60vmax;right:-18vmax;bottom:-22vmax;
  background:radial-gradient(circle, color-mix(in srgb, var(--gold) 22%, #2a1450 30%, transparent 70%), transparent 70%);
  animation:aurora-blob-b 30s ease-in-out infinite alternate;
}
@keyframes aurora-hue{ to{ filter:saturate(1.15) hue-rotate(40deg); } }
@keyframes aurora-drift{
  0%{background-position:0% 0%,0% 0%,0% 0%,0% 0%,0 0;}
  100%{background-position:4% 3%,-3% -2%,2% -3%,-2% 3%,0 0;}
}
@keyframes aurora-blob-a{ 0%{transform:translate3d(0,0,0) scale(1);} 100%{transform:translate3d(8vmax,6vmax,0) scale(1.15);} }
@keyframes aurora-blob-b{ 0%{transform:translate3d(0,0,0) scale(1.1);} 100%{transform:translate3d(-7vmax,-5vmax,0) scale(1);} }

/* 4. APP COLUMN */
.app{
  position:relative;z-index:1;width:100%;max-width:430px;margin:0 auto;
  min-height:100dvh;display:flex;flex-direction:column;
  padding:calc(12px + var(--safe-t)) 14px calc(84px + var(--safe-b));
  background:linear-gradient(180deg, rgba(10,16,30,.42), rgba(8,12,24,.18) 30%, rgba(6,10,20,.36));
  backdrop-filter:blur(22px) saturate(1.1);
  -webkit-backdrop-filter:blur(22px) saturate(1.1);
  box-shadow:0 0 0 1px var(--line-2), 0 40px 120px rgba(0,0,0,.55);
}
/* 5. TOPBAR */
header{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 12px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:750;}
.brand .q{
  width:34px;height:34px;border-radius:11px;
  background:linear-gradient(135deg, var(--accent), #60a5fa);
  display:grid;place-items:center;color:var(--accent-ink);font-weight:900;font-size:17px;
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent), 0 1px 0 rgba(255,255,255,.4) inset;
}
.brand-t{font-size:15px;letter-spacing:.2px;}
.brand small{
  display:block;font-weight:500;color:var(--dim);
  font-size:10px;letter-spacing:.6px;text-transform:uppercase;margin-top:1px;
}
.meters{display:flex;gap:7px;}
.chip{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--text-2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
  min-height:32px;display:inline-flex;align-items:center;gap:4px;
}
.chip-streak{color:var(--gold);animation:chip-pulse 2.6s ease-in-out infinite;}
@keyframes chip-pulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--gold) 35%, transparent);}
  50%{box-shadow:0 0 0 5px transparent;}
}
.chip-xp{color:var(--accent);}

.xpwrap{
  position:relative;height:6px;background:rgba(255,255,255,.05);
  border-radius:var(--r-pill);overflow:hidden;margin-bottom:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.xpbar{
  height:100%;width:0;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, var(--gold)));
  border-radius:inherit;transition:width .6s var(--ease-out);
  box-shadow:0 0 10px var(--accent-glow);
}
.xpbar::after{
  content:"";position:absolute;top:0;right:0;width:18px;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55));border-radius:inherit;
}
/* 6. VIEWS + TITLES */
.view{display:none;flex:1;flex-direction:column;}
.view.active{display:flex;animation:view-in .42s var(--ease-out) both;}
@keyframes view-in{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
.v-title{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.4px;margin:6px 0 4px;}
.v-sub{margin-bottom:14px;}
p.dim,.dim{color:var(--dim);font-size:var(--fs-caption);line-height:1.55;}

/* 7. CALL STAGE ? hero */
.call{
  position:relative;flex:1;min-height:540px;
  border-radius:var(--r-xl);overflow:hidden;background:#0a1122;
  box-shadow:var(--shadow-call);isolation:isolate;
}
.avatar-mount{position:absolute;inset:0;z-index:1;}
.call-top{
  position:absolute;top:0;left:0;right:0;z-index:6;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:16px 16px 36px;
  background:linear-gradient(180deg, rgba(4,7,14,.78) 0%, rgba(4,7,14,.32) 60%, transparent);
}
.call-id{display:flex;flex-direction:column;gap:3px;}
.call-name{
  font-weight:800;font-size:var(--fs-xl);letter-spacing:-.2px;
  text-shadow:0 1px 10px rgba(0,0,0,.65), 0 0 24px rgba(0,0,0,.4);
}
.call-sub{
  font-size:11px;color:#cfe3ff;opacity:.88;font-weight:600;letter-spacing:.2px;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.conn{
  display:flex;gap:3px;align-items:flex-end;padding:7px 9px 6px;
  border-radius:var(--r-pill);background:rgba(0,0,0,.32);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
.conn i{
  width:4px;border-radius:2px;background:rgba(255,255,255,.18);display:block;
  transition:background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.conn i:nth-child(1){height:7px;}
.conn i:nth-child(2){height:11px;}
.conn i:nth-child(3){height:15px;}
.conn i.on{background:var(--accent);box-shadow:0 0 6px var(--accent-glow);}

.selfview{
  position:absolute;top:70px;right:14px;z-index:6;
  width:74px;height:98px;border-radius:14px;
  border:1.5px solid rgba(255,255,255,.28);
  background:linear-gradient(160deg, #1b2a4d, #0d1526), radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.08), transparent);
  display:grid;place-items:center;font-weight:800;color:#9fb4dd;font-size:16px;letter-spacing:.5px;
  box-shadow:0 10px 26px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.16) inset;overflow:hidden;
}
.selfview::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.06), transparent);pointer-events:none;}
.call-lower{
  position:absolute;left:0;right:0;bottom:0;z-index:6;padding:14px 14px 16px;
  display:flex;flex-direction:column;gap:11px;
  background:linear-gradient(0deg, rgba(4,7,14,.92) 55%, rgba(4,7,14,.4) 80%, transparent);
}
.call-caption{
  position:relative;background:rgba(10,16,30,.62);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(255,255,255,.10);border-radius:18px;
  padding:14px 16px;text-align:center;min-height:70px;
  box-shadow:0 12px 30px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.06) inset;
  animation:cap-rise .4s var(--ease-out) both;
}
@keyframes cap-rise{ from{opacity:0;transform:translateY(10px) scale(.98);} to{opacity:1;transform:translateY(0) scale(1);} }
.cap-main{
  font-weight:800;font-size:var(--fs-xl);line-height:1.32;letter-spacing:-.1px;color:#fff;
}
.cap-sub{color:var(--text-2);font-size:var(--fs-caption);margin-top:5px;opacity:.92;}
.cap-extra .heard{color:var(--gold);font-size:12.5px;margin-top:7px;font-weight:600;}
.cap-extra .ok{color:var(--accent);font-weight:800;margin-top:5px;text-shadow:0 0 12px var(--accent-glow);}
.cap-extra .casi{color:var(--gold);font-weight:800;margin-top:5px;}
.cap-extra .mal{color:var(--red);font-weight:800;margin-top:5px;}

.progress-dots{display:flex;gap:6px;justify-content:center;padding:2px 0;}
.pd{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
  transition:background .3s var(--ease-out), transform .3s var(--ease-spring), box-shadow .3s var(--ease-out);
}
.pd.done{background:var(--accent);box-shadow:0 0 6px color-mix(in srgb, var(--accent) 50%, transparent);}
.pd.now{background:var(--gold);transform:scale(1.35);box-shadow:0 0 10px color-mix(in srgb, var(--gold) 60%, transparent);animation:pd-now 1.2s ease-in-out infinite;}
@keyframes pd-now{ 0%,100%{transform:scale(1.35);} 50%{transform:scale(1.55);} }

.call-controls{display:flex;gap:8px;}
.choices{display:flex;flex-direction:column;gap:8px;}
.choices button{
  background:rgba(16,24,44,.9);border:1px solid var(--line);color:var(--text);
  text-align:left;font-weight:650;
}
.choices button.right{background:#123b33;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 0 18px var(--accent-glow);}
.choices button.wrong{background:#3b1820;border-color:var(--red);box-shadow:0 0 0 1px var(--red);}
/* 8. BUTTONS ? primary/ghost/mic with depth + pressed states */
button{
  font-family:inherit;border:none;cursor:pointer;border-radius:14px;
  font-size:14.5px;font-weight:750;padding:13px 12px;
  min-height:44px;
  transition:transform .08s var(--ease-out), filter .15s var(--ease-out),
             box-shadow .2s var(--ease-out), background .2s var(--ease-out);
}
button:active{transform:scale(.96);filter:brightness(.94);}
button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 0 14px var(--accent-glow);}
.primary{
  flex:1;background:linear-gradient(135deg, var(--accent), #38bdf8);color:var(--accent-ink);
  box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent), 0 1px 0 rgba(255,255,255,.35) inset;
}
.primary:hover{filter:brightness(1.06);box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 55%, transparent), 0 1px 0 rgba(255,255,255,.35) inset;}
.ghost{
  flex:1;background:rgba(18,26,46,.9);color:var(--text);border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.ghost:hover{background:rgba(28,38,62,.95);border-color:var(--line-strong);}
.mic{
  flex:1.35;background:linear-gradient(135deg, var(--gold), #fb923c);color:#241503;
  box-shadow:0 6px 18px color-mix(in srgb, var(--gold) 40%, transparent), 0 1px 0 rgba(255,255,255,.35) inset;
}
.mic:hover{filter:brightness(1.06);}
.btn-skip{flex:.55;}
button:disabled{filter:grayscale(.7) brightness(.55);cursor:default;box-shadow:none;}

/* 9. PICKERS + FOOT */
.pickers{display:flex;gap:8px;margin-top:12px;}
.picker{flex:1;display:flex;flex-direction:column;gap:4px;font-size:10.5px;color:var(--dim);font-weight:650;letter-spacing:.4px;text-transform:uppercase;}
.picker select{
  appearance:none;-webkit-appearance:none;
  background:#10182b;color:var(--text);border:1px solid var(--line);
  border-radius:12px;padding:11px 28px 11px 10px;font-size:12.5px;font-weight:650;width:100%;
  background-image:linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat;
  min-height:44px;cursor:pointer;
}
.picker select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.foot{margin-top:12px;text-align:center;color:var(--dim);font-size:11px;line-height:1.55;}
.foot b{color:var(--accent);font-weight:700;}
/* 10. PEOPLE ? magazine-quality cards */
.people{display:flex;flex-direction:column;gap:14px;}
.person-card{
  position:relative;display:flex;gap:0;background:var(--panel);
  border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  min-height:160px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-1);
  transition:border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.person-card:hover{transform:translateY(-2px);}
.person-card.on{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent),
             0 12px 30px color-mix(in srgb, var(--accent) 25%, transparent),
             var(--shadow-1);
}
.person-photo{
  width:122px;flex:none;background:#0d1526;position:relative;
}
.person-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, transparent 40%, rgba(10,16,30,.85) 100%);
  pointer-events:none;
}
.person-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;}
.person-info{
  flex:1;padding:14px 14px 14px 4px;display:flex;flex-direction:column;gap:4px;
  position:relative;z-index:1;
}
.person-name{font-weight:800;font-size:var(--fs-lg);letter-spacing:-.2px;}
.person-tag{color:var(--text-2);font-size:12.5px;line-height:1.42;}
.person-voice{
  color:var(--accent);font-size:11px;margin-top:auto;font-weight:650;letter-spacing:.2px;
  text-shadow:0 0 10px color-mix(in srgb, var(--accent) 30%, transparent);
}
.person-actions{display:flex;gap:7px;margin-top:8px;}
.person-actions button{font-size:12px;padding:10px 8px;min-height:40px;border-radius:12px;}

/* 11. INTERPRETER */
.interp-stage{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 16px;min-height:200px;display:flex;flex-direction:column;gap:12px;justify-content:center;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-1);
}
.bigcap{
  font-size:var(--fs-bigcap);font-weight:800;line-height:1.18;text-align:center;
  letter-spacing:-.5px;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.4);
  word-break:break-word;
}
.interp-out{
  font-size:clamp(20px, 7vw, 30px);font-weight:800;color:var(--accent);
  text-align:center;line-height:1.3;letter-spacing:-.2px;
  text-shadow:0 0 18px var(--accent-glow), 0 0 36px color-mix(in srgb, var(--accent) 25%, transparent);
  word-break:break-word;
  animation:interp-in .4s var(--ease-out) both;
}
@keyframes interp-in{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }
.interp-row{display:flex;gap:8px;margin-top:12px;}
/* 12. YOU ? stats + memory */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stat{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 14px;text-align:center;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow-1);
  transition:border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.stat:hover{transform:translateY(-2px);border-color:var(--line-strong);}
.stat b{display:block;font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.5px;
  background:linear-gradient(180deg, #fff, var(--text-2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat span{color:var(--dim);font-size:11px;letter-spacing:.4px;text-transform:uppercase;font-weight:600;}
.mem-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;margin-top:14px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow-1);
}
.mem-card h3{font-size:var(--fs-lg);font-weight:800;margin-bottom:6px;letter-spacing:-.2px;}
.version-line{margin-top:14px;text-align:center;font-size:10.5px;letter-spacing:.4px;color:var(--dim-2);}

/* 13. NAV ? pill tabs with sliding highlight */
nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;
  background:rgba(5,8,15,.82);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
  border-top:1px solid var(--line);
  display:flex;padding:7px 7px calc(9px + var(--safe-b));z-index:40;
  box-shadow:0 -10px 30px rgba(0,0,0,.4);
}
nav button{
  flex:1;background:none;color:var(--dim);font-size:11px;font-weight:650;
  display:flex;flex-direction:column;gap:3px;align-items:center;
  padding:8px 2px;border-radius:14px;min-height:48px;
  position:relative;transition:color .25s var(--ease-out), background .3s var(--ease-out);
}
nav button:hover{color:var(--text-2);}
nav button.active{
  color:var(--accent);
  background:linear-gradient(180deg, var(--accent-soft), transparent);
  box-shadow:0 0 14px color-mix(in srgb, var(--accent) 20%, transparent) inset;
}
nav button.active::before{
  content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);
  width:22px;height:3px;border-radius:var(--r-pill);background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
}
nav button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent-soft);}
.t-ico{font-size:18px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}
/* 14. HONEST-402 PAYWALL ? gorgeous */
.paywall{
  position:fixed;inset:0;background:rgba(3,6,12,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:none;place-items:center;z-index:50;padding:18px;
}
.paywall.open{display:grid;animation:pw-fade .3s var(--ease-out);}
@keyframes pw-fade{ from{opacity:0;} to{opacity:1;} }
.pw-card{
  width:100%;max-width:400px;
  background:linear-gradient(180deg, #15203a, #0c1324);
  border:1px solid var(--line-strong);border-radius:24px;
  padding:28px 22px;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04), 0 1px 0 rgba(255,255,255,.08) inset;
  animation:pw-scale .4s var(--ease-spring) both;
  position:relative;overflow:hidden;
}
.pw-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  pointer-events:none;
}
@keyframes pw-scale{ from{opacity:0;transform:scale(.92) translateY(10px);} to{opacity:1;transform:scale(1) translateY(0);} }
.pw-402{
  display:inline-block;font-family:ui-monospace,"SF Mono",Consolas,monospace;
  font-size:11px;letter-spacing:1.4px;color:var(--gold);
  border:1px solid #4d3d14;background:linear-gradient(180deg, #2a2008, #1a1304);
  border-radius:var(--r-pill);padding:6px 14px;margin-bottom:14px;
  position:relative;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.pw-402::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg, transparent, rgba(245,193,77,.35), transparent);
  animation:pw-shimmer 3.4s ease-in-out infinite;
}
@keyframes pw-shimmer{ 0%{left:-120%;} 55%,100%{left:140%;} }
.pw-card h2{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.4px;margin-bottom:8px;}
.pw-card .dim{font-size:13px;line-height:1.5;margin-bottom:6px;}
.pw-price{
  font-size:var(--fs-price);font-weight:850;margin:14px 0 2px;letter-spacing:-1.5px;
  background:linear-gradient(180deg, #fff, var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;
}
.pw-price small{font-size:18px;color:var(--dim);-webkit-text-fill-color:var(--dim);font-weight:600;}
.pw-founding{
  color:var(--accent);font-size:11px;font-weight:750;margin:8px 0 18px;
  letter-spacing:1.2px;text-transform:uppercase;
  text-shadow:0 0 12px var(--accent-glow);
}
.pw-btn{width:100%;margin-bottom:9px;}
.pw-trust{
  margin-top:12px;font-size:11px;color:var(--dim-2);letter-spacing:.3px;line-height:1.5;
}

/* 15. ACCESSIBILITY ? reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .aurora{filter:saturate(1.05);}
}

/* ===== v3 CONVERSATION-FIRST PREMIUM PASS (GLM seat) ===== */

/* 16. TRANSCRIPT ? iMessage-on-glass over the video call */
.transcript{
  display:flex;flex-direction:column;gap:8px;
  max-height:200px;overflow-y:auto;overflow-x:hidden;
  padding:4px 4px 2px;scroll-behavior:smooth;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 6px), #000 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 6px), #000 100%);
}
.transcript::-webkit-scrollbar{width:4px;}
.transcript::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-pill);}
.transcript::-webkit-scrollbar-track{background:transparent;}
.transcript:has(.bub:nth-child(2)) .bub:first-child{opacity:.62;filter:saturate(.85);}
.transcript:has(.bub:nth-child(3)) .bub:nth-child(2){opacity:.82;}

.bub{
  position:relative;max-width:86%;border-radius:var(--bub-radius);
  padding:10px 14px;line-height:1.4;font-size:15px;font-weight:650;
  color:var(--bub-text);
  text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.32),0 1px 0 rgba(255,255,255,.06) inset;
  animation:bub-in .34s var(--ease-spring) both;
  word-break:break-word;overflow-wrap:anywhere;
}
@keyframes bub-in{
  from{opacity:0;transform:translateY(10px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.bub::before{
  content:"";position:absolute;top:1px;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  border-radius:inherit;pointer-events:none;
}
.bub-c{
  align-self:flex-start;border-bottom-left-radius:7px;
  background:var(--bub-c-bg);
  backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
  border:1px solid rgba(255,255,255,.10);
}
.bub-u{
  align-self:flex-end;border-bottom-right-radius:7px;
  background:var(--bub-u-bg);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--bub-u-border);
  box-shadow:0 6px 18px rgba(0,0,0,.32),0 1px 0 rgba(255,255,255,.10) inset,
             0 0 16px color-mix(in srgb, var(--accent) 22%, transparent);
}
.bub-t{display:block;font-weight:700;letter-spacing:.1px;}
.bub-g{
  display:block;color:var(--bub-g-text);font-size:12px;margin-top:4px;
  font-weight:500;font-style:italic;text-shadow:0 1px 3px rgba(0,0,0,.6);
}
/* 17. TEACH CHIP ? gold coach moment */
.teach-chip{
  align-self:center;position:relative;overflow:hidden;
  background:linear-gradient(180deg, #2f240c, #1c1506);
  border:1px solid #5a4718;color:var(--gold);
  border-radius:var(--r-pill);padding:9px 18px;
  font-size:13.5px;font-weight:780;letter-spacing:.15px;
  cursor:pointer;min-height:42px;
  box-shadow:0 6px 18px rgba(245,193,77,.22),0 1px 0 rgba(255,255,255,.10) inset;
  animation:teach-in .3s var(--ease-out) both;
}
@keyframes teach-in{ from{opacity:0;transform:translateY(-4px) scale(.96);} to{opacity:1;transform:translateY(0) scale(1);} }
.teach-chip::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg, transparent, rgba(245,193,77,.4), transparent);
  animation:teach-shimmer 3.2s ease-in-out infinite;pointer-events:none;
}
@keyframes teach-shimmer{ 0%{left:-130%;} 60%,100%{left:160%;} }
.teach-chip:hover{filter:brightness(1.08);}
.teach-chip:active{transform:scale(.96);}
.teach-chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold),0 0 14px var(--gold-glow);}

/* 18. HERO MIC ? .btn-talk drives the whole app */
.call-controls{display:flex;gap:10px;align-items:center;}
.btn-talk{
  flex:2.2;font-size:16px;font-weight:800;letter-spacing:.2px;
  border-radius:var(--r-pill);padding:16px 18px;min-height:54px;
  background:linear-gradient(135deg, var(--accent), #38bdf8);
  color:var(--accent-ink);
  box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 45%, transparent),
             0 1px 0 rgba(255,255,255,.4) inset,
             0 0 22px color-mix(in srgb, var(--accent) 25%, transparent);
  position:relative;overflow:hidden;
}
.btn-talk::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.22), transparent 40%);
  pointer-events:none;
}
.btn-talk:hover{filter:brightness(1.07);box-shadow:0 10px 30px color-mix(in srgb, var(--accent) 60%, transparent),0 1px 0 rgba(255,255,255,.4) inset,0 0 30px color-mix(in srgb, var(--accent) 35%, transparent);}
.btn-talk:active{transform:scale(.95);filter:brightness(.94);}
.btn-talk:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent),0 0 22px var(--accent-glow);}
.btn-talk:disabled{
  filter:none;cursor:default;opacity:1;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, #0c1526), color-mix(in srgb, var(--accent) 40%, #0c1526));
  color:#fff;
  animation:talk-breathe 1.9s ease-in-out infinite;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent),0 1px 0 rgba(255,255,255,.18) inset;
}
@keyframes talk-breathe{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent),0 1px 0 rgba(255,255,255,.18) inset;transform:scale(1);}
  50%{box-shadow:0 0 0 10px transparent,0 1px 0 rgba(255,255,255,.18) inset;transform:scale(1.03);}
}
/* 19. ROUND SIDE BUTTONS ? quiet but discoverable */
.btn-round{
  flex:.5;min-width:50px;min-height:54px;padding:0;
  border-radius:50%;font-size:18px;line-height:1;
  background:rgba(18,26,46,.82);color:var(--text-2);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 12px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.06) inset;
  display:grid;place-items:center;
}
.btn-round:hover{color:var(--text);border-color:var(--line-strong);background:rgba(28,38,62,.9);transform:translateY(-1px);}
.btn-round:active{transform:scale(.92);}
.btn-round:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent),0 0 14px var(--accent-glow);}

/* 20. TYPE ROW ? fallback input */
.type-row{display:flex;gap:8px;animation:bub-in .3s var(--ease-out) both;}
.type-row[hidden]{display:none;}
.type-row input{
  flex:1;background:rgba(10,16,30,.78);color:var(--text);
  border:1px solid var(--line);border-radius:14px;
  padding:13px 14px;font-size:14px;font-family:inherit;min-height:44px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.type-row input::placeholder{color:var(--dim-2);}
.type-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.type-row button{flex:.4;min-height:44px;}

/* 21. PLAN CHIP ? compact live meter */
.chip-plan{
  color:var(--gold);position:relative;padding-left:22px;
  text-transform:uppercase;font-size:10.5px;letter-spacing:.6px;font-weight:750;
}
.chip-plan::before{
  content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 8px var(--gold-glow);
  animation:chip-pulse 2.6s ease-in-out infinite;
}
.chip-plan.chip-paid{color:var(--accent);}
.chip-plan.chip-paid::before{background:var(--accent);box-shadow:0 0 8px var(--accent-glow);}
/* 22. PAYWALL PLANS ? pricing-page quality */
.pw-plans{display:flex;flex-direction:column;gap:10px;margin:14px 0 12px;}
.plan{
  position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  text-align:left;background:linear-gradient(180deg, rgba(20,30,52,.92), rgba(14,22,40,.92));
  border:1px solid var(--line);color:var(--text);
  border-radius:16px;padding:14px 16px;min-height:44px;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.05) inset;
  transition:transform .18s var(--ease-out),border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),background .2s var(--ease-out);
  overflow:hidden;
}
.plan::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%);
}
.plan:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:0 10px 26px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.07) inset;}
.plan:active{transform:translateY(0) scale(.99);filter:brightness(.96);}
.plan:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent),0 10px 26px rgba(0,0,0,.4);}
.plan b{font-size:16px;font-weight:800;letter-spacing:-.2px;}
.plan-price{
  margin-left:auto;font-weight:850;font-size:20px;letter-spacing:-.5px;
  background:linear-gradient(180deg, #fff, var(--text-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.plan-price i{font-style:normal;font-size:11px;color:var(--dim);-webkit-text-fill-color:var(--dim);font-weight:600;margin-left:1px;}
.plan-desc{flex-basis:100%;color:var(--text-2);font-size:12px;line-height:1.45;margin-top:2px;}

.plan[data-plan="founding"]{
  border-color:color-mix(in srgb, var(--gold) 60%, transparent);
  background:linear-gradient(180deg, rgba(40,30,8,.85), rgba(20,15,4,.92));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent),
             0 10px 26px rgba(245,193,77,.18),0 1px 0 rgba(255,255,255,.08) inset;
}
.plan[data-plan="founding"]::before{
  content:"FIRST 50";position:absolute;top:0;right:0;
  font-family:ui-monospace,"SF Mono",Consolas,monospace;
  font-size:9px;font-weight:800;letter-spacing:1.2px;color:#1a1304;
  background:linear-gradient(135deg, var(--gold), #fbbf24);
  padding:3px 9px 3px 11px;border-radius:0 16px 0 10px;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.plan[data-plan="founding"] b{color:var(--gold);}
.plan[data-plan="founding"] .plan-price{background:linear-gradient(180deg, #fff, var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;}
.plan[data-plan="founding"]:hover{box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent),0 14px 32px rgba(245,193,77,.28),0 1px 0 rgba(255,255,255,.1) inset;}
/* 23. FOUNDER CODE ? elegant single row */
.pw-code{display:flex;gap:8px;margin:8px 0;}
.pw-code input{
  flex:1;background:rgba(10,16,30,.78);color:var(--text);
  border:1px solid var(--line);border-radius:14px;
  padding:13px 14px;font-size:13px;
  font-family:ui-monospace,"SF Mono",Consolas,monospace;
  letter-spacing:1.5px;text-transform:uppercase;min-height:44px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.pw-code input::placeholder{color:var(--dim-2);letter-spacing:.5px;text-transform:none;font-family:inherit;}
.pw-code input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);}
.pw-code button{flex:.42;min-height:44px;}

/* 24. PAYWALL MESSAGE ? state color */
.pw-msg{
  min-height:18px;color:var(--accent);font-size:12.5px;font-weight:700;
  margin-bottom:6px;letter-spacing:.2px;
  text-shadow:0 0 10px var(--accent-glow);
  animation:bub-in .25s var(--ease-out) both;
}
.pw-msg.err{color:var(--red);text-shadow:0 0 10px color-mix(in srgb, var(--red) 45%, transparent);}
.pw-msg:empty{animation:none;}

/* 25. REDUCED-MOTION OVERRIDES for v3 surfaces */
@media (prefers-reduced-motion: reduce){
  .btn-talk:disabled{animation:none;}
  .teach-chip::after{animation:none;}
  .bub{animation:none;}
  .transcript{scroll-behavior:auto;}
}

/* ===== v4 PLAY TAB ? premium pass (GLM seat) ===== */

/* 26. QUEST CARD ? living progress + glowing chest */
.lq-card{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--play-r); padding:16px;
  display:flex; flex-direction:column; gap:11px; margin-bottom:16px;
  backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:var(--shadow-1);
}
.lq-head{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:800;letter-spacing:-.2px;}
.lq-head b{font-weight:800;}
.lq-frz{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:700;letter-spacing:.3px;
  color:var(--ice); background:var(--ice-soft);
  border:1px solid color-mix(in srgb, var(--ice) 35%, transparent);
  border-radius:var(--r-pill); padding:5px 11px; min-height:26px;
  box-shadow:0 0 10px color-mix(in srgb, var(--ice) 18%, transparent), 0 1px 0 rgba(255,255,255,.06) inset;
}
.lq-row{
  display:grid; grid-template-columns:1fr auto; gap:4px 10px;
  font-size:13px; align-items:center;
  padding:2px 0; transition:opacity .25s var(--ease-out);
}
.lq-row .lq-label{font-weight:650;color:var(--text-2);transition:color .25s var(--ease-out);}
.lq-row.lq-done .lq-label{color:var(--accent);font-weight:700;}
.lq-row.lq-done{opacity:.92;}
.lq-row.lq-done .lq-label::first-line{color:var(--accent);}
.lq-count{color:var(--dim);font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;justify-self:end;}
.lq-row.lq-done .lq-count{color:var(--accent);}
.lq-bar{
  grid-column:1/-1; position:relative; height:6px;
  background:rgba(255,255,255,.06); border-radius:var(--r-pill); overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.lq-bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--gold)));
  border-radius:inherit; transition:width .5s var(--ease-out);
  box-shadow:0 0 8px var(--accent-glow); position:relative; overflow:hidden;
}
.lq-bar i::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 30%, var(--sheen) 50%, transparent 70%);
  background-size:200% 100%; animation:lq-sheen 2.4s linear infinite;
}
@keyframes lq-sheen{ from{background-position:200% 0;} to{background-position:-200% 0;} }
.lq-row.lq-done .lq-bar i{background:linear-gradient(90deg, var(--accent), var(--gold));box-shadow:0 0 10px var(--accent-glow);}

.lq-chest{
  margin-top:5px; text-align:center; font-weight:800; letter-spacing:.2px;
  border-radius:14px; padding:13px; min-height:44px;
  transition:transform .15s var(--ease-out), box-shadow .25s var(--ease-out), filter .2s var(--ease-out);
}
.lq-chest.lq-locked,.lq-chest.lq-claimed{
  background:rgba(16,24,44,.7); border:1px dashed var(--line-strong);
  color:var(--dim); font-size:13px; font-weight:650;
}
.lq-chest.lq-claimed{color:var(--gold);border-color:color-mix(in srgb, var(--gold) 35%, transparent);}
.lq-chest.lq-ready{
  background:linear-gradient(135deg, color-mix(in srgb, var(--gold) 85%, #2a2008), color-mix(in srgb, var(--gold) 55%, #1a1304));
  color:#1a1304; border:1px solid var(--gold);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent),
             0 10px 28px rgba(245,193,77,.4),
             0 0 24px var(--gold-glow), 0 1px 0 rgba(255,255,255,.4) inset;
  animation:chest-beg 1.8s ease-in-out infinite;
}
@keyframes chest-beg{
  0%,100%{transform:scale(1); box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent), 0 10px 28px rgba(245,193,77,.4), 0 0 18px var(--gold-glow), 0 1px 0 rgba(255,255,255,.4) inset;}
  50%     {transform:scale(1.035); box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent), 0 14px 34px rgba(245,193,77,.55), 0 0 30px var(--gold-glow), 0 1px 0 rgba(255,255,255,.5) inset;}
}
.lq-chest.lq-ready:hover{filter:brightness(1.06);}
.lq-chest.lq-ready:active{transform:scale(.96);}
.lq-chest.lq-ready:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--gold), 0 0 24px var(--gold-glow);}

/* 7-day history dots (subtle) */
.lq-history{display:flex;gap:5px;justify-content:center;margin-top:2px;}
.lq-history i{
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.14);
  transition:background .2s var(--ease-out), transform .2s var(--ease-out);
}
.lq-history i.on{background:var(--accent);box-shadow:0 0 5px var(--accent-glow);}
.lq-history i.today{transform:scale(1.4);box-shadow:0 0 0 1px var(--line-strong);}
/* 27. STORY SHELF ? horizontal snap-scroll book covers */
.shelf{
  display:flex; gap:12px; overflow-x:auto; overflow-y:hidden;
  padding:4px 2px 10px; margin:0 -2px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
.shelf::-webkit-scrollbar{height:4px;}
.shelf::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-pill);}
.shelf::-webkit-scrollbar-track{background:transparent;}

.story-card{
  position:relative; flex:0 0 138px;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  background:linear-gradient(180deg, rgba(20,30,52,.92), rgba(12,18,34,.92));
  border:1px solid var(--line); border-radius:18px;
  padding:14px 12px 12px; color:var(--text); text-align:left;
  scroll-snap-align:start; min-height:184px; overflow:hidden;
  box-shadow:var(--shadow-1);
  transition:transform .2s var(--ease-spring), box-shadow .25s var(--ease-out), border-color .2s var(--ease-out);
}
.story-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 70% at 50% 8%, rgba(255,255,255,.07), transparent 55%);
}
.story-card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 14px 30px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.08) inset;}
.story-card:active{transform:translateY(-1px) scale(.99);}
.story-card:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 14px 30px rgba(0,0,0,.45);}

.story-emoji{
  font-size:42px; line-height:1; margin:2px 0 4px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
  background:radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  border-radius:12px; padding:6px 10px;
}
.story-name{
  font-weight:800; font-size:14px; line-height:1.25; letter-spacing:-.2px;
  font-family:var(--read-font);
}
.story-meta{font-size:10.5px;color:var(--dim);font-weight:600;letter-spacing:.3px;text-transform:uppercase;margin-top:auto;}

/* locked = elegant gold padlock */
.story-card.locked{opacity:.78;}
.story-card.locked::after{
  content:"\1F512"; position:absolute; top:10px; right:10px;
  font-size:14px; filter:drop-shadow(0 0 6px var(--gold-glow));
  opacity:.92;
}
.story-card.locked .story-emoji{filter:grayscale(.5) brightness(.7) drop-shadow(0 4px 10px rgba(0,0,0,.45));}
.story-card.locked .story-name{color:var(--dim);}
/* 28. ARCADE ? playful lift + gradient borders */
.arcade{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;}
.game-card{
  position:relative; display:flex; flex-direction:column; gap:6px; align-items:center;
  justify-content:center; text-align:center;
  background:linear-gradient(180deg, rgba(20,30,52,.92), rgba(12,18,34,.92));
  border:1px solid var(--line); border-radius:18px;
  padding:16px 8px 14px; color:var(--text);
  min-height:108px; overflow:hidden;
  box-shadow:var(--shadow-1);
  transition:transform .2s var(--ease-spring), box-shadow .25s var(--ease-out), border-color .2s var(--ease-out);
}
.game-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 45%, transparent), transparent 45%, color-mix(in srgb, var(--gold) 35%, transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.6;
}
.game-card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 14px 30px rgba(0,0,0,.45);}
.game-card:hover .game-icon{transform:scale(1.15) rotate(-3deg);}
.game-card:active{transform:translateY(-1px) scale(.98);}
.game-card:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 14px 30px rgba(0,0,0,.45);}

.game-icon{
  font-size:30px; line-height:1;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));
  transition:transform .25s var(--ease-spring);
}
.game-name{font-weight:800;font-size:12.5px;letter-spacing:-.1px;}
.game-tag{font-size:10px;color:var(--dim);line-height:1.35;letter-spacing:.2px;}

.game-card.locked{opacity:.72;}
.game-card.locked::after{
  content:"\1F512"; position:absolute; top:8px; right:8px; font-size:13px;
  filter:drop-shadow(0 0 6px var(--gold-glow)); opacity:.92;
}
.game-card.locked .game-icon{filter:grayscale(.5) brightness(.7);}
.game-card.locked .game-name{color:var(--dim);}
/* 29. PLAY STAGE ? overlay entrance + glass top bar */
.playstage{
  position:fixed; inset:0; z-index:60;
  background:linear-gradient(180deg, rgba(4,8,16,.97), rgba(6,10,20,.95));
  backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1);
  display:flex; flex-direction:column;
  padding:calc(14px + var(--safe-t)) 14px calc(14px + var(--safe-b));
  max-width:430px; margin:0 auto;
  box-shadow:0 0 0 1px var(--line-2);
  animation:ps-in .34s var(--ease-out) both;
}
@keyframes ps-in{ from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
.playstage[hidden]{display:none;}
.ps-top{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-bottom:14px; padding-bottom:12px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(10,16,30,.5), transparent);
}
.ps-title{font-weight:800;font-size:var(--fs-xl);letter-spacing:-.3px;}
.ps-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:2px 2px 8px;scroll-behavior:smooth;}
.ps-body::-webkit-scrollbar{width:4px;}
.ps-body::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-pill);}

/* 30. STORY READER ? a BOOK */
.story-read{
  display:flex; flex-direction:column; gap:18px;
  padding:8px 4px 16px; max-width:34em;
  font-family:var(--read-font);
}
.story-para{
  font-size:clamp(22px,6.4vw,26px); font-weight:600; line-height:1.68;
  letter-spacing:.1px; color:var(--text);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  hyphens:auto; -webkit-hyphens:auto;
}
.story-word{
  cursor:pointer; border-radius:6px; padding:0 3px; margin:0 -1px;
  border-bottom:1px solid transparent;
  transition:background .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out);
}
.story-word:hover{background:rgba(255,255,255,.08);border-bottom-color:var(--accent);}
.story-word:active{background:var(--accent-soft);}
.story-word.kept{
  background:var(--accent-soft); color:var(--text);
  border-bottom:2px solid var(--accent);
  box-shadow:0 0 10px color-mix(in srgb, var(--accent) 25%, transparent);
  animation:kept-pop .4s var(--ease-spring) both;
}
@keyframes kept-pop{
  0%{transform:scale(1);}
  45%{transform:scale(1.18);background:var(--accent-glow);}
  100%{transform:scale(1);}
}
.story-gloss{
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:14px; line-height:1.55; color:var(--text-2);
  font-style:italic; padding:10px 14px;
  background:rgba(10,16,30,.5); border:1px solid var(--line);
  border-radius:12px; border-left:3px solid var(--accent);
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.story-nav{
  display:flex; gap:10px; margin-top:8px; padding-top:14px;
  border-top:1px solid var(--line); position:sticky; bottom:0;
  background:linear-gradient(0deg, rgba(6,10,20,.92), transparent);
  padding-bottom:4px;
}
.story-nav button{flex:1;min-height:44px;}
.story-hint{
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:11.5px; color:var(--dim); text-align:center;
  letter-spacing:.2px; margin-top:2px;
}

/* 31. REDUCED-MOTION OVERRIDES for v4 surfaces */
@media (prefers-reduced-motion: reduce){
  .lq-bar i::after{animation:none;}
  .lq-chest.lq-ready{animation:none;}
  .playstage{animation:none;}
  .story-word.kept{animation:none;}
  .game-card:hover .game-icon{transform:none;}
  .story-card,.game-card{transition:none;}
}

/* ===== v5 CLOSING PIXEL PASS (GLM seat) ===== */
/* 32. VAULT BROWSER ? the moat's face */
#vaultCard h3{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.2px;}
#vaultCard h3 #vaultCount{color:var(--accent);font-variant-numeric:tabular-nums;}
.vault-search{
  width:100%; background:rgba(10,16,30,.7); color:var(--text);
  border:1px solid var(--line); border-radius:var(--vault-r);
  padding:12px 14px; font-size:13px; font-family:inherit; min-height:44px;
  margin:10px 0 12px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.vault-search::placeholder{color:var(--dim-2);}
.vault-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}

.vault-list{
  display:flex; flex-direction:column; gap:7px;
  max-height:280px; overflow-y:auto; overflow-x:hidden;
  padding:2px 4px 4px 2px;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 10px), #000 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 10px), #000 100%);
}
.vault-list::-webkit-scrollbar{width:4px;}
.vault-list::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-pill);}
.vault-list::-webkit-scrollbar-track{background:transparent;}

.vault-row{
  display:grid; grid-template-columns:1fr auto; gap:3px 10px;
  align-items:center; text-align:start;
  background:var(--vault-row-bg); border:1px solid var(--line);
  border-radius:var(--vault-r); padding:10px 14px; color:var(--text);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  transition:transform .18s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.vault-row:hover{transform:translateY(-1px);border-color:var(--line-strong);box-shadow:0 6px 16px rgba(0,0,0,.3);}
.vault-row:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent);}
.vault-t{font-weight:700;font-size:14px;letter-spacing:.1px;}
.vault-g{grid-column:1;font-size:12px;color:var(--text-2);font-style:italic;}
.vault-n{
  grid-row:1/3; align-self:center;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--dim); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:3px 9px; min-width:34px;
}
.vault-row:hover .vault-n{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 35%, transparent);}
/* tap-to-hear affordance */
.vault-row::after{
  content:"\1F50A"; font-size:13px; opacity:0; margin-inline-start:auto;
  transition:opacity .2s var(--ease-out); pointer-events:none;
}
.vault-row:hover::after{opacity:.7;}
.vault-row:hover .vault-n{margin-inline-end:6px}

/* empty state */
.vault-list:empty::before{
  content:"No words yet ? say something to your companion.";
  display:block; padding:18px 8px; text-align:center;
  color:var(--dim-2); font-size:12.5px; font-style:italic; line-height:1.5;
}
/* 33. PRIVACY CARD ? safety, not danger */
#privacyCard h3{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.2px;}
#privacyCard .person-actions{gap:8px;}
#privacyCard .person-actions button{
  flex:1; font-size:12.5px; padding:11px 8px; min-height:44px; border-radius:12px;
  font-weight:650; letter-spacing:.1px;
}
#btnExport,#btnImport{color:var(--text-2);}
#btnErase{
  color:var(--erase-red);
  background:var(--erase-soft);
  border:1px solid var(--erase-border);
}
#btnErase:hover{background:color-mix(in srgb, var(--erase-red) 22%, transparent);border-color:color-mix(in srgb, var(--erase-red) 55%, transparent);color:#fff;}
#btnErase:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--erase-red);}
/* 34. SCENES + VISION */
.story-scene{
  width:100%; max-height:230px; object-fit:cover; object-position:center 25%;
  border-radius:var(--r-lg); border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(0,0,0,.4), 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent) inset,
             0 1px 0 rgba(255,255,255,.08) inset;
  margin-bottom:4px;
}
.story-read .story-scene{
  -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 70%, transparent 100%);
}
.bub-img{
  display:block; max-width:170px; border-radius:14px;
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow:0 6px 18px rgba(0,0,0,.4), 0 0 14px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* 35. SCROLLABLE TRANSCRIPT (K17) ? cap is now 60 */
.transcript{
  max-height:38vh; min-height:120px;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
/* newest bubble always anchored just above the controls: keep gap tight, pad bottom */
.transcript .bub:last-child{margin-bottom:2px;}
/* 36. RTL SWEEP (K20) ? dir=auto-safe bidi + [dir=rtl] overrides */
/* punctuation + mixed fragments render correctly in user/target text */
.bub-t, .bigcap, .interp-out, .story-para, .story-gloss, .teach-chip{
  unicode-bidi:plaintext;
}
/* Arabic gets a touch more breathing room on the biggest reading surfaces */
:lang(ar) .bigcap{font-size:calc(var(--fs-bigcap) + 1px);}
:lang(ar) .story-para{font-size:calc(clamp(22px,6.4vw,26px) + 1px);}

[dir=rtl] .transcript .bub-c{align-self:flex-end;border-bottom-left-radius:var(--bub-radius);border-bottom-right-radius:7px;}
[dir=rtl] .transcript .bub-u{align-self:flex-start;border-bottom-right-radius:var(--bub-radius);border-bottom-left-radius:7px;}
[dir=rtl] .call-top{flex-direction:row-reverse;}
[dir=rtl] .interp-stage{text-align:right;}
[dir=rtl] .story-read{text-align:right;}
[dir=rtl] .picker{text-align:right;}
[dir=rtl] .picker span{unicode-bidi:plaintext;}

/* 37. REDUCED-MOTION OVERRIDES for v5 surfaces */
@media (prefers-reduced-motion: reduce){
  .vault-row{transition:none;}
  .vault-row::after{transition:none;}
  .transcript{scroll-behavior:auto;}
}