/* styles/base.css — shared across hub, era & chapter pages Themes via [data-theme] on : dusk (default) · navy · parchment */ *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth} :root{ --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(.16,1,.3,1); --r:1.2rem; } /* FORTRESS AT DUSK (default) */ :root,[data-theme="dusk"]{ --bg:#1A1430; --bg2:#0C0A1C; --bgGlow:rgba(230,126,34,.18); --stone:#27214a; --stone-lt:#352d5e; --stone-line:rgba(245,200,120,.16); --gold:#E0A82A; --gold-lt:#F5CC5A; --gold-dk:#A87810; --accent:#E67E22; --accent2:#F5A04A; --halo:rgba(230,126,34,.55); --paper:#FBF1DA; --paper2:#F4E6C6; --ink:#2C2620; --ink-dim:#6C5A3A; --fg:#F4E7CF; --fg-dim:#C3B189; --fg-faint:rgba(244,231,207,.4); --topbar:rgba(14,10,28,.82); --line:rgba(245,160,74,.2); } /* CITY NAVY */ [data-theme="navy"]{ --bg:#0A2540; --bg2:#060D1A; --bgGlow:rgba(212,160,23,.16); --stone:#0E2845; --stone-lt:#143258; --stone-line:rgba(212,160,23,.18); --gold:#D4A017; --gold-lt:#F5CC5A; --gold-dk:#A07810; --accent:#E67E22; --accent2:#F5A04A; --halo:rgba(230,126,34,.5); --paper:#FEF5DC; --paper2:#F4E6C6; --ink:#15233a; --ink-dim:#5a6a82; --fg:#FEF5DC; --fg-dim:rgba(254,245,220,.62); --fg-faint:rgba(254,245,220,.36); --topbar:rgba(6,13,26,.9); --line:rgba(212,160,23,.22); } /* WARM MANUSCRIPT (light) */ [data-theme="parchment"]{ --bg:#EFE0BC; --bg2:#E2CF9E; --bgGlow:rgba(194,105,26,.12); --stone:#E3D0A2; --stone-lt:#EFE0BC; --stone-line:rgba(120,90,40,.2); --gold:#B8860B; --gold-lt:#D4A017; --gold-dk:#8A6508; --accent:#C2691A; --accent2:#E67E22; --halo:rgba(194,105,26,.4); --paper:#FFFDF4; --paper2:#FBF0D8; --ink:#3A2E1A; --ink-dim:#8A7448; --fg:#3A2E1A; --fg-dim:#7A6644; --fg-faint:rgba(58,46,26,.42); --topbar:rgba(247,238,214,.86); --line:rgba(184,134,11,.3); } body{font-family:'Tajawal','Nunito',system-ui,sans-serif; background:radial-gradient(120% 80% at 80% -10%,var(--bgGlow),transparent 55%),linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%); background-attachment:fixed;color:var(--fg);line-height:1.5;min-height:100vh;overflow-x:hidden;transition:background .5s ease,color .3s ease} [dir="ltr"] body{font-family:'Nunito','Tajawal',sans-serif} button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit} a{color:inherit;text-decoration:none} h1,h2,h3,h4,b,strong{font-family:'Tajawal','Fredoka',sans-serif;font-weight:800} [dir="ltr"] h1,[dir="ltr"] h2,[dir="ltr"] h3{font-family:'Fredoka','Tajawal',sans-serif} .ar{font-family:'Amiri','Tajawal',serif} .en-only{display:none}[dir="ltr"] .en-only{display:revert} [dir="ltr"] .ar-only{display:none} /* starfield (dusk/navy only) */ .stars{position:fixed;inset:0;z-index:0;pointer-events:none} [data-theme="parchment"] .stars{display:none} .stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;animation:twinkle var(--d,3s) ease-in-out infinite var(--dl,0s);opacity:.5} @keyframes twinkle{0%,100%{opacity:.15;transform:scale(1)}50%{opacity:.9;transform:scale(1.7)}} /* topbar */ .topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.7rem; padding:.6rem clamp(.8rem,3vw,1.4rem);background:var(--topbar); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)} .tb-back{display:flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;color:var(--fg-dim); padding:.35rem .7rem;border-radius:2rem;border:1px solid var(--line);transition:.2s;white-space:nowrap} .tb-back:hover{color:var(--fg);border-color:var(--accent);background:rgba(230,126,34,.1)} .brand{display:flex;align-items:center;gap:.55rem;min-width:0} .brand-badge{width:40px;height:40px;border-radius:.7rem;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--accent2),var(--gold-dk));box-shadow:0 4px 14px var(--halo);flex-shrink:0} .brand-badge svg{width:24px;height:24px} .brand h1{font-size:clamp(.95rem,2.4vw,1.15rem);color:var(--fg);line-height:1.05} .brand p{font-size:.68rem;color:var(--gold-lt);font-family:'Amiri',serif} .tb-right{margin-inline-start:auto;display:flex;align-items:center;gap:.55rem} .xp-wrap{min-width:88px} .xp-top{display:flex;justify-content:space-between;align-items:baseline} .xp-top .lvl{font-size:.62rem;font-weight:800;color:var(--gold-lt)} .xp-top .xp{font-size:.56rem;font-weight:700;color:var(--fg-dim)} .xp-track{height:7px;border-radius:4px;background:rgba(245,160,74,.18);overflow:hidden;margin-top:2px} .xp-fill{height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--gold-lt),var(--accent2),var(--gold-lt)); background-size:200% 100%;transition:width 1s var(--ease-out);animation:shimmer 2.6s linear infinite} @keyframes shimmer{to{background-position:-200% 0}} .lang{display:flex;border:1px solid var(--line);border-radius:2rem;overflow:hidden} .lang button{font-size:.7rem;font-weight:800;padding:.26rem .6rem;color:var(--fg-dim);transition:.2s} .lang button.on{background:var(--gold);color:#1a1208} /* guide companion (shared) */ .guide{position:fixed;bottom:1rem;inset-inline-start:1rem;z-index:35;display:flex;align-items:flex-end;gap:.5rem;max-width:min(82vw,360px)} .guide-avatar{width:52px;height:52px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--accent2),var(--gold-dk)); border:2px solid var(--paper);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.4);animation:floaty 4s ease-in-out infinite} .guide-avatar svg{width:34px;height:34px} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .guide-bubble{background:var(--paper);color:var(--ink);border-radius:1rem 1rem 1rem .2rem;padding:.5rem .8rem; box-shadow:0 8px 22px rgba(0,0,0,.3);border:1px solid var(--accent2);position:relative;animation:bubbleIn .4s var(--ease-spring) both} [dir="ltr"] .guide-bubble{border-radius:1rem 1rem .2rem 1rem} @keyframes bubbleIn{from{opacity:0;transform:scale(.9) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}} .guide-bubble b{display:block;font-size:.62rem;color:var(--accent);font-family:'Fredoka',sans-serif} .guide-bubble p{font-size:.78rem;line-height:1.45;font-family:'Amiri',serif} [dir="ltr"] .guide-bubble p{font-family:'Nunito',sans-serif;font-size:.74rem} .guide-x{position:absolute;top:-7px;inset-inline-end:-7px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--paper); font-size:.7rem;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.3)} .guide.tuck .guide-bubble{display:none} /* xp burst + toast */ .xp-burst{position:fixed;left:50%;top:30%;transform:translateX(-50%);z-index:60;pointer-events:none;font-family:'Fredoka',sans-serif; font-weight:800;font-size:2rem;color:var(--gold-lt);text-shadow:0 3px 0 var(--gold-dk),0 6px 14px rgba(0,0,0,.4);opacity:0} .xp-burst.go{animation:xppop 1.4s var(--ease-out) forwards} @keyframes xppop{0%{opacity:0;transform:translateX(-50%) scale(.5) translateY(10px)}20%{opacity:1;transform:translateX(-50%) scale(1.15) translateY(-6px)}70%{opacity:1;transform:translateX(-50%) scale(1) translateY(-30px)}100%{opacity:0;transform:translateX(-50%) scale(.9) translateY(-70px)}} .toast{position:fixed;left:50%;bottom:5.5rem;transform:translateX(-50%) translateY(20px);z-index:70;background:var(--paper);color:var(--ink); font-weight:700;font-size:.8rem;padding:.55rem 1rem;border-radius:2rem;box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;transition:.3s;max-width:84vw;text-align:center;border:1px solid var(--accent2)} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .stars i{display:none!important} }