/* Part of Survival Language — see index.html for load order.
All colors live in tokens.css; this and the other files below only use
var(--...) references, never raw hex, so a purchased theme (js/store.js
applyThemeSkin) or dark mode recolors everything without touching CSS. */
/* ---- Avatar gallery modal ---- */
.avatar-modal-backdrop{
position:fixed; inset:0; z-index:200; background:rgba(14,27,34,.5);
display:flex; align-items:center; justify-content:center; padding:20px;
}
.avatar-modal{
background:var(--surface); border-radius:var(--radius-lg); padding:var(--space-6); max-width:420px; width:100%;
max-height:82vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.avatar-modal h3{ font-size:16px; margin:0 0 var(--space-4); }
.avatar-modal-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:var(--space-3); }
.avatar-modal-grid button{
background:none; border:2px solid transparent; border-radius:50%; padding:0; cursor:pointer; line-height:0;
}
.avatar-modal-grid button img{ width:100%; aspect-ratio:1; border-radius:50%; display:block; }
.avatar-modal-grid button:hover, .avatar-modal-grid button:focus-visible{ border-color:var(--accent); }
.avatar-modal-close{ display:block; margin:var(--space-4) auto 0; }
@media (max-width: 420px){ .avatar-modal-grid{ grid-template-columns:repeat(4, 1fr); } }
/* ---- Generic small modal (streak freeze offer, XP badge celebration) ---- */
.modal-backdrop{
position:fixed; inset:0; z-index:210; background:rgba(14,27,34,.55);
display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-card{
background:var(--surface); border-radius:var(--radius-lg); padding:var(--space-8) var(--space-6); max-width:340px; width:100%;
text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.modal-icon{ width:56px; height:56px; margin:0 auto var(--space-4); color:var(--gold); }
.modal-icon svg{ width:100%; height:100%; display:block; }
.letter-card-glyph{ font-size:72px; font-weight:600; line-height:1; margin:0 auto var(--space-3); color:var(--accent); }
.modal-card h3{ font-size:17px; margin:0 0 var(--space-2); }
.modal-card p{ font-size:14px; color:var(--ink-soft); line-height:1.5; margin:0 0 var(--space-6); }
.modal-actions{ display:flex; flex-direction:column; gap:var(--space-3); }
.modal-actions .btn{ width:100%; }
/* ---- Streak celebration (tap the streak stat in the topbar) ----
Bleeds to the modal-card's own edges (negative margin = the card's own
padding) so the gradient reads as a proper hero header, not an inset
box — same "full-bleed hero" idea as the Home hero-card, just inside a
modal. Rounded on the top two corners only, to match modal-card's own
border-radius (var(--radius-lg)) exactly where they meet. */
.streak-hero{
position:relative; overflow:hidden;
margin:calc(var(--space-8) * -1) calc(var(--space-6) * -1) var(--space-6);
padding:var(--space-8) var(--space-6) var(--space-6);
border-radius:var(--radius-lg) var(--radius-lg) 0 0;
background:linear-gradient(160deg, var(--hero-a), var(--hero-b));
}
.streak-flame{
position:relative; width:52px; height:52px; margin:0 auto var(--space-3);
border-radius:50%; display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.16); border:2px solid rgba(255,255,255,.4);
}
.streak-flame svg{ width:28px; height:28px; }
.streak-num{
position:relative; font-family:'Unbounded',sans-serif; font-variant-numeric:tabular-nums;
font-weight:800; font-size:52px; line-height:1; color:#fff;
}
.streak-label{
position:relative; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
color:rgba(255,255,255,.85); margin-top:6px;
}
.streak-week{ position:relative; display:flex; justify-content:space-between; gap:4px; margin-top:var(--space-6); }
.streak-week-day{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; }
.streak-week-dow{ font-size:10px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:rgba(255,255,255,.65); }
.streak-week-mark{
width:25px; height:25px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.32); color:transparent;
}
.streak-week-mark svg{ width:13px; height:13px; }
.streak-week-day.studied .streak-week-mark{ background:#fff; border-color:#fff; color:var(--hero-a); }
.streak-week-day.today .streak-week-mark{ box-shadow:0 0 0 2px rgba(255,255,255,.6); }
/* Theme preview mockup — a small, self-contained "screenshot" built from the app's own
real classes (.day-node, .btn-primary, the hero gradient card), so it stays visually in
sync with the real UI automatically. The candidate theme's colors are set as CSS custom
properties scoped to this one element, so nothing about the live app changes — no global
apply/revert needed. Always rendered in a light chrome (own background/text colors),
like a little device screenshot, so it reads the same regardless of the real app's
current light/dark mode. */
.theme-mockup{
width:220px; margin:0 auto 14px; border-radius:16px; overflow:hidden;
border:1px solid rgba(20,30,35,.1); box-shadow:0 8px 24px rgba(20,30,35,.16); background:#eef4f5;
}
.theme-mockup-hero{ background:linear-gradient(135deg, var(--hero-a), var(--hero-b)); padding:14px 14px 16px; text-align:left; }
.theme-mockup-eyebrow{ font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:6px; }
.theme-mockup-title{ font-family:'Unbounded',sans-serif; font-size:15px; font-weight:800; color:#fff; }
.theme-mockup-bar{ margin-top:10px; height:5px; max-width:120px; border-radius:3px; background:rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.3); overflow:hidden; }
.theme-mockup-bar i{ display:block; height:100%; width:55%; background:#fff; }
.theme-mockup-days{ display:flex; align-items:center; gap:8px; padding:12px 14px 14px; }
.theme-mockup-days .day-node{ width:26px; height:26px; border-radius:8px; font-size:11px; flex:none; }
.theme-mockup-days .day-node.available::after{ display:none; } /* skip the pulse-ring animation at this scale */
.theme-mockup-btn{ margin-left:auto; padding:6px 12px; font-size:11px; border-radius:8px; box-shadow:0 2px 0 0 var(--accent-hover); }
/* ---- Onboarding tour ---- */
.tour-highlight{
position:relative !important; z-index:201 !important; border-radius:var(--radius-md) !important;
box-shadow:0 0 0 4px var(--accent), 0 0 0 9999px rgba(14,27,34,.55) !important;
}
.tour-tip{
position:fixed; z-index:202; background:var(--surface); color:var(--ink); border-radius:var(--radius-md);
padding:var(--space-4); max-width:280px; box-shadow:0 14px 34px rgba(0,0,0,.3); font-size:14px; line-height:1.4;
visibility:hidden; top:0; left:0;
}
.tour-tip .tour-step{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:6px; }
.tour-tip .tour-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:var(--space-4); gap:var(--space-3); }
.tour-tip .tour-skip{ background:none; border:none; color:var(--ink-faint); font-size:13px; font-weight:600; padding:6px; }
.tour-tip .tour-next{
background:var(--accent); color:var(--accent-ink); border:none; font-weight:700; font-size:13.5px;
padding:var(--space-2) var(--space-4); border-radius:var(--radius-sm);
}