:root{--font:"Nunito","Nunito Variable",system-ui,sans-serif;--display:"Cormorant Garamond","Palatino Linotype",Palatino,Georgia,serif;--ink:#f6efe0;--ink-dim:#e8dcc4;--gold:#d7b56a;--gold-hi:#f3e2b0;--brass:#c8a86a;--brass-mid:#8a6528;--brass-lo:#6b4a0e;--brass-ink:#2a1d0a;--panel:#0e141c;--panel-deep:#0a0f15;--panel-lift:#121a24;--good:#8fcf9a;--bad:#e58a7a;--radius:12px;--field:linear-gradient(180deg,#1c2733 0%,#0e141c 46%,#0a0f15 100%);--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.9 0 0 0 0 0.74 0 0 0 1.1 -0.34'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:#0a0f15;color:var(--ink);font:700 16px/1.5 var(--font)}
a{color:var(--gold-hi)}
a:focus-visible,button:focus-visible,.btn:focus-visible,.opt:focus-visible,.lvl:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.ib:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.topbar{position:sticky;top:0;z-index:5;min-height:48px;padding:6px clamp(12px,3vw,24px);display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel-deep);border-bottom:1px solid var(--brass-mid)}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:800}
.mark{width:26px;height:26px;display:grid;place-items:center;color:var(--gold);border-radius:50%;background:radial-gradient(circle at 35% 30%,#2f3c4b,#0a1018 72%);border:1px solid var(--brass);box-shadow:inset 0 1px #f3e2b066,0 0 0 1px var(--brass-ink)}
.hud{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;font-size:14px}
.chip{padding:3px 10px;border:1px solid var(--brass-mid);border-radius:99px;background:var(--panel);color:var(--gold-hi);white-space:nowrap}
.wrap{max-width:860px;margin:0 auto;padding:18px clamp(12px,3vw,24px) 60px}
.panel{position:relative;isolation:isolate;color:var(--ink);background:var(--field);border:1px solid var(--brass);border-top-color:var(--gold-hi);border-bottom-color:var(--brass-lo);border-radius:var(--radius);padding:clamp(16px,3vw,26px);margin:0 0 16px;box-shadow:inset 0 0 0 2px #070b10c7,inset 0 0 0 3px #d7b56a4d,0 0 0 1px var(--brass-mid),0 0 0 2px var(--brass-ink),0 3px 6px #00000059,0 14px 30px #00000066}
.panel:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grain);opacity:.4;pointer-events:none}
.kicker{margin:0 0 8px;color:var(--gold-hi);font:700 14px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;margin:0 0 10px}
h1{font-size:clamp(34px,7vw,52px)}h2{font-size:clamp(26px,5vw,34px)}h3{font-size:22px;color:var(--gold-hi)}
p{margin:0 0 12px}.dim{color:var(--ink-dim)}.small{font-size:14px}
.rule{height:2px;margin:14px 0;background:linear-gradient(90deg,transparent,#d7b56a 15%,#f3e2b0 50%,#d7b56a 85%,transparent)}
.btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:52px;margin:0;padding:10px 18px;font:800 17px/1.2 var(--font);text-align:center;text-decoration:none;cursor:pointer;border-radius:var(--radius);transition:background-color .14s,border-color .14s,transform .1s;-webkit-tap-highlight-color:transparent}
.btn-primary{color:#1a1208;background:linear-gradient(180deg,#ecd28a,#c9a24f 52%,#b08a38);border:1px solid var(--brass-lo);border-top-color:#f6e6b4;box-shadow:inset 0 1px #fff8dc8c,inset 0 -2px #5a3c0a4d,0 1px 0 var(--brass-ink),0 3px 6px #0006;text-shadow:0 1px 0 #fff4cd73}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{color:#f4ead8;background:var(--panel);border:1px solid var(--brass-mid);box-shadow:inset 0 1px #f3e2b01f}
.btn-ghost:hover{border-color:var(--gold-hi);background:#141c27}
.btn:active{transform:translateY(1px) scale(.985)}.btn[disabled]:active{transform:translateY(1px)}.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-sm{min-height:44px;font-size:15px;width:auto}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1 1 140px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tabs{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto}.tabs button{flex:1;min-height:44px;white-space:nowrap}
.tabs .on{color:#1a1208;background:linear-gradient(180deg,#ecd28a,#c9a24f 52%,#b08a38)}
.lvl{display:block;text-align:left;cursor:pointer;color:inherit;font:inherit;width:100%;background:var(--panel-lift);border:1px solid var(--brass-mid);border-radius:var(--radius);padding:14px;transition:border-color .14s,transform .1s}
.lvl:hover:not([disabled]){border-color:var(--gold-hi);transform:translateY(-1px)}.lvl:active{transform:translateY(1px)}.lvl:hover:not([disabled]):active{transform:translateY(1px)}
.lvl[disabled]{opacity:.5;cursor:not-allowed}.lvl .ico{font-size:26px}
.stars{display:inline-flex;gap:2px}.star{width:18px;height:18px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.7l2.95 6.05 6.65.85-4.9 4.6 1.25 6.6L12 17.5l-5.95 3.3 1.25-6.6-4.9-4.6 6.65-.85z' fill='%230b1017' fill-opacity='.55' stroke='%23a8884a' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E")}
.star.on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.7l2.95 6.05 6.65.85-4.9 4.6 1.25 6.6L12 17.5l-5.95 3.3 1.25-6.6-4.9-4.6 6.65-.85z' fill='%23ffd25a' stroke='%236b4a0e' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E")}
.star.on{transform-origin:center;animation:starp .4s cubic-bezier(.34,1.4,.64,1) both}.star.on:nth-child(2){animation-delay:.08s}.star.on:nth-child(3){animation-delay:.16s}
.bar{height:10px;border-radius:99px;background:#070b10;border:1px solid var(--brass-mid);overflow:hidden}.bar>i{display:block;height:100%;background:linear-gradient(90deg,#b08a38,#f3e2b0);transition:width .45s cubic-bezier(.22,.7,.3,1)}
.opt{display:block;width:100%;text-align:left;margin:0 0 8px;min-height:48px;padding:11px 14px;color:var(--ink);font:700 16px/1.35 var(--font);background:var(--panel);border:1px solid var(--brass-mid);border-radius:var(--radius);cursor:pointer;transition:border-color .14s,background .14s,transform .1s}
.opt:hover{border-color:var(--gold-hi)}.opt:active:not([disabled]){transform:translateY(1px)}.opt.sel{border-color:var(--gold-hi);background:#1a2431}
.opt.ok{border-color:var(--good);background:#16281c;animation:optpop .2s ease}.opt.no{border-color:var(--bad);background:#2a1a17;animation:optno .22s ease}
.fb{padding:12px 14px;border-radius:var(--radius);margin:10px 0;border:1px solid var(--brass-mid);background:#0a0f15;animation:pop .25s ease}
.fb.ok{border-color:var(--good)}.fb.no{border-color:var(--bad)}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes rise{from{transform:translateY(6px)}to{transform:none}}
.lesson p,.lesson li{color:var(--ink-dim)}.lesson ul{padding-left:20px;margin:0 0 12px}
.ex{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;background:#070b10;border:1px solid #2b3643;border-radius:8px;padding:10px 12px;margin:0 0 12px;white-space:pre-wrap;color:var(--ink)}
.badge{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--brass-mid);border-radius:var(--radius);background:var(--panel-lift)}.badge.off{opacity:.4;filter:grayscale(1)}
.badge:not(.off) .mk{filter:drop-shadow(0 0 4px #d7b56a)}
.mk-slot{width:40px;height:40px;flex:none;display:grid;place-items:center;font-size:28px;line-height:1}
.mk-slot .mk{width:40px;height:40px;display:block}
.lesson-plate{display:block;width:min(100%,400px);height:auto;border-radius:10px;border:1px solid var(--brass-mid);background:#0a0f15;margin:0 0 12px}
.plate-lit{box-shadow:0 0 0 1px var(--course-warm,#d7b56a),0 0 28px #d7b56a73,0 12px 18px #0007}
.earn{display:flex;align-items:center;gap:10px;margin:8px 0;padding:8px 10px;border:1px solid var(--gold);border-radius:12px;background:#0a0f15;color:var(--gold-hi);box-shadow:0 0 16px #d7b56a55}
.earn .mk{width:40px;height:40px;flex:none;filter:drop-shadow(0 0 6px #f3e2b0)}
.skill-name{display:flex;align-items:center;gap:8px;min-width:0}
.skill-name .lesson-plate{width:56px;height:36px;margin:0;flex:none;object-fit:cover;object-position:center}
.world-cover{margin:0 0 12px;border-radius:10px;overflow:hidden;border:1px solid var(--brass-mid);background:#0a0f15;line-height:0}
.world-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.journey{display:grid;grid-template-columns:minmax(112px,34%) 1fr;gap:0;margin:0 0 12px;text-decoration:none;color:inherit;background:var(--panel-lift);border:1px solid var(--brass-mid);border-radius:var(--radius);overflow:hidden;min-height:112px;box-shadow:inset 0 1px #f3e2b01f}
.journey:hover,.journey:focus-visible{border-color:var(--gold-hi)}
.journey:active{transform:translateY(1px)}
.journey .cover{width:100%;height:132px;object-fit:cover;object-position:center;display:block;background:#0a0f15}
.journey-copy{padding:10px 12px 12px;background-repeat:repeat;background-size:120px 120px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.journey-title{display:block;font:800 17px/1.25 var(--font);color:var(--ink);margin:0 0 4px}
.journey .dim{margin:0}
.journey .prog{display:block;margin-top:6px;color:var(--gold-hi)}
.journey[data-world="python-basics"] .journey-copy{background-image:url("../assets/art/bg/python-basics.svg")}
.journey[data-world="ai-foundations"] .journey-copy{background-image:url("../assets/art/bg/ai-foundations.svg")}
.journey[data-world="ai-safety"] .journey-copy{background-image:url("../assets/art/bg/ai-safety.svg")}
.journey[data-world="ai-evals"] .journey-copy{background-image:url("../assets/art/bg/ai-evals.svg")}
.journey[data-world="portfolio-guide"] .journey-copy{background-image:url("../assets/art/bg/portfolio-guide.svg")}
.journey.separate{background:var(--panel)}
.journey.separate[data-world="portfolio-guide"]{--course:#2f6a4a;--course-warm:#b08a2a;background:linear-gradient(165deg,rgba(47,106,74,.28),rgba(14,20,28,0) 62%),var(--panel);box-shadow:inset 4px 0 0 #b08a2a,inset 0 1px #f3e2b01f;border-color:#2f6a4a}
@media(max-width:560px){.journey{grid-template-columns:1fr}.journey .cover{height:148px;min-height:0}}
.realm{position:relative}.realm:before{content:"";position:absolute;left:16px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--realm,#d7b56a);box-shadow:0 0 0 2px #2a1d0a}
.r-py{--realm:#6d9a4e}.r-fd{--realm:#c47a48}.r-ev{--realm:#3f5f8f}.r-sf{--realm:#8a4a3a}.r-pf{--realm:#8a6530}
input[type=number],select{font:800 16px var(--font);color:var(--ink);background:#070b10;border:1px solid var(--brass-mid);border-radius:8px;padding:9px;width:100%;min-height:44px;transition:border-color .14s,box-shadow .14s}input[type=number]:focus,select:focus{outline:none;border-color:var(--gold-hi);box-shadow:0 0 0 2px #d7b56a40}
input[type=range]{width:100%;accent-color:#d7b56a}
.field label{display:block;font-size:13px;color:var(--gold-hi);margin-bottom:3px;font-family:var(--display);letter-spacing:.1em;text-transform:uppercase}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:7px 6px;border-bottom:1px solid #2b3643;text-align:left}th{color:var(--gold-hi);font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.disc{font-size:13px;color:#cdbf9f;border:1px dashed var(--brass-mid);border-radius:8px;padding:8px 10px;margin:12px 0}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;background:var(--panel-deep);border:1px solid var(--gold);border-radius:99px;padding:10px 18px;color:var(--gold-hi);animation:toastin .28s ease,toastout .35s ease 2.15s forwards;max-width:92vw;text-align:center}
@keyframes starp{from{transform:scale(.3) rotate(-12deg)}to{transform:scale(1) rotate(0deg)}}
@keyframes optpop{from{transform:translateY(3px) scale(.97)}to{transform:none}}
@keyframes optno{30%{transform:translateX(3px)}60%{transform:translateX(-2px)}to{transform:none}}
@keyframes toastin{from{opacity:0;transform:translateX(-50%) translateY(4px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes toastout{to{opacity:0;transform:translateX(-50%)}}
@keyframes panelcheer{50%{filter:drop-shadow(0 0 14px #d7b56ad9)}}
@keyframes stepin{from{opacity:0}to{opacity:1}}
.panel.stepin{animation:stepin .18s ease}
.panel.cheer{animation:panelcheer .6s ease}
.toast.toast-art{display:flex;align-items:center;gap:10px;border-radius:16px;padding:8px 16px 8px 8px;box-shadow:0 0 22px #d7b56a80}
.toast .mk{width:40px;height:40px;flex:none;filter:drop-shadow(0 0 6px #f3e2b0)}
@media(max-width:560px){#ov .panel .row{flex-direction:column}#ov .panel .row>.btn{flex:1 1 auto;width:100%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* home page hero (Phase 3): painted with the game's procedural art, no image files */
.hero-frame{position:relative;margin:0 0 16px;border-radius:var(--radius,12px);overflow:hidden;border:1px solid #8a6528;box-shadow:inset 0 1px 0 #c8a86a55,0 10px 30px rgba(0,0,0,.45);background:#0a0f15}
.hero-frame canvas{display:block;width:100%;height:clamp(150px,24vw,190px)}
.hero-frame #lqgl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;visibility:hidden}
.hero-frame::after{content:"";position:absolute;inset:5px;border:1px solid rgba(215,181,106,.22);border-radius:calc(var(--radius,12px) - 4px);pointer-events:none}
.hero-fx{position:absolute;top:10px;right:10px;z-index:1;font:700 13px/1 Nunito,system-ui,sans-serif;color:#f4ead8;background:rgba(10,15,21,.72);border:1px solid #8a6528;border-radius:999px;padding:10px 14px;min-height:44px;cursor:pointer;transition:border-color .14s,transform .1s}
.hero-fx:hover{border-color:#f3e2b0}.hero-fx:active{transform:translateY(1px)}

/* ---- UI polish pass (ages 7-10): type scale, spacing, big tap targets, strong focus, cards, progress, mobile, celebrations ---- */
:root{--fs-xs:14px;--fs-sm:15px;--fs-md:17px;--fs-lg:20px;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--tap:56px;--ink-dim:#f0e6d0;--focus:#7fd4ff}
body:before{content:"";position:fixed;inset:0;z-index:-2;background:var(--field);pointer-events:none;transform:translateZ(0)}
body{font-size:var(--fs-md)}
.small{font-size:var(--fs-sm)}.disc{font-size:var(--fs-xs);color:#e2d6ba}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--radius)}
.btn{min-height:var(--tap);font-size:18px;border-radius:14px;transition:filter .14s,border-color .14s,transform .12s,box-shadow .14s}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-sm{min-height:48px;font-size:var(--fs-sm)}
.tabs button{min-height:48px}
.opt{min-height:var(--tap);padding:14px 16px;font-size:var(--fs-md);margin-bottom:var(--sp-3);border-width:2px}
.opt:not([disabled]):hover{background:#162130}
.opt.ok{border-color:var(--good);background:#16301f}.opt.ok:after{content:" \2713";color:var(--good)}
.opt.no{border-color:var(--bad);background:#33201b}
.opt[disabled]{cursor:default}
.fb{font-size:var(--fs-md);border-width:2px}
.fb.ok{background:#102217}.fb.no{background:#24130f}
.bar{height:14px}
.lvl{padding:var(--sp-4);min-height:var(--tap);border-width:2px}
.chip{padding:5px 12px;font-size:var(--fs-sm)}
input[type=number],select{min-height:48px}
/* home: course cards */
.quest-list{display:grid;gap:var(--sp-3);margin:0 0 var(--sp-4)}
.qcard{animation:pop .28s ease backwards;display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-4);align-items:center;padding:var(--sp-4);background:var(--panel-lift);border:2px solid var(--brass-mid);border-radius:16px;box-shadow:inset 0 1px #f3e2b01f}
.qcard:nth-child(2){animation-delay:.07s}.qcard:nth-child(3){animation-delay:.14s}.qcard:nth-child(4){animation-delay:.21s}
/* course colour grade: the same cool/warm pair as each world's map palette */
.qcard[data-world="python-basics"]{--course:#2f6ab0;--course-warm:#d0a020;background:linear-gradient(165deg,rgba(47,106,176,.34),rgba(18,26,36,0) 58%),var(--panel-lift);border-color:#3a7ac0;box-shadow:inset 4px 0 0 #d0a020,inset 0 1px #f3e2b01f}
.qcard[data-world="ai-foundations"]{--course:#6a4ab0;--course-warm:#2a8ab0;background:linear-gradient(165deg,rgba(106,74,176,.34),rgba(18,26,36,0) 58%),var(--panel-lift);border-color:#7a5ac0;box-shadow:inset 4px 0 0 #2a8ab0,inset 0 1px #f3e2b01f}
.qcard[data-world="ai-evals"]{--course:#2a8a7a;--course-warm:#c98a2a;background:linear-gradient(165deg,rgba(42,138,122,.32),rgba(18,26,36,0) 58%),var(--panel-lift);border-color:#2a8a7a;box-shadow:inset 4px 0 0 #c98a2a,inset 0 1px #f3e2b01f}
.qcard[data-world="ai-safety"]{--course:#2f8a6a;--course-warm:#c9902a;background:linear-gradient(165deg,rgba(47,138,106,.32),rgba(18,26,36,0) 58%),var(--panel-lift);border-color:#2f8a6a;box-shadow:inset 4px 0 0 #c9902a,inset 0 1px #f3e2b01f}
.qcard.is-next{border-color:var(--gold-hi);box-shadow:inset 4px 0 0 var(--course-warm,#d7b56a),inset 0 1px #f3e2b033,0 0 0 3px #d7b56a33}
.qnum{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font:800 24px/1 var(--font);color:#1a1208;background:radial-gradient(circle at 35% 30%,#fbe7a6,#c9a24f 70%);border:2px solid var(--brass-lo);grid-row:span 2}
.qcard.is-done .qnum{background:radial-gradient(circle at 35% 30%,#c9f0d0,#5fae6e 70%)}
.qcover{grid-column:1/-1;width:100%;height:168px;object-fit:cover;object-position:center 58%;border-radius:12px;border:1px solid var(--brass-mid);background:#0a0f15;display:block}
.qcard[data-world="ai-evals"] .qcover{object-position:center 46%}
.qcard[data-world="ai-safety"] .qcover{object-position:center 40%}
.qcard[data-world="portfolio-guide"] .qcover{object-position:center 62%}
.qcard[data-world] .qbody{background-repeat:repeat;background-size:140px 140px}
.qcard[data-world="python-basics"] .qbody{background-image:url("../assets/art/bg/python-basics.svg")}
.qcard[data-world="ai-foundations"] .qbody{background-image:url("../assets/art/bg/ai-foundations.svg")}
.qcard[data-world="ai-evals"] .qbody{background-image:url("../assets/art/bg/ai-evals.svg")}
.qcard[data-world="ai-safety"] .qbody{background-image:url("../assets/art/bg/ai-safety.svg")}
.qbody h2{font:800 var(--fs-lg)/1.2 var(--font);margin:0 0 var(--sp-1);color:var(--ink)}
.qbody p{margin:0;color:var(--ink-dim);font-size:var(--fs-sm)}
.qmeta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.qmeta .btn{flex:1 1 200px;width:auto}
.qprog{flex:1 1 160px;display:grid;gap:var(--sp-1)}
.qprog .prog{margin:0;font-size:var(--fs-sm);color:var(--gold-hi)}
.tag-next{display:inline-block;margin-left:var(--sp-2);padding:2px 10px;border-radius:99px;background:#7fd4ff;color:#06202c;font:800 13px/1.5 var(--font);vertical-align:middle}
@media(min-width:700px){.qmeta .btn{flex:0 0 220px}}
/* mobile layout */
@media(max-width:520px){.wrap{padding:12px 10px 48px}.panel{padding:16px 14px}h1{font-size:34px}.qcard{padding:var(--sp-3);gap:var(--sp-2) var(--sp-3)}.qcover{height:140px}.qnum{width:44px;height:44px;font-size:20px}.qmeta .btn{flex-basis:100%}.btn{font-size:17px}.hero-fx{top:8px;right:8px}}
/* celebrations (fx2.js LQCelebrate) */
.lq-confetti{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden;contain:strict}
.lq-confetti i{position:absolute;top:-16px;width:10px;height:14px;border-radius:2px;will-change:transform,opacity;animation:lqfall var(--d,1.6s) cubic-bezier(.2,.6,.4,1) forwards}
@keyframes lqfall{0%{transform:translate3d(0,0,0) rotate(0);opacity:1}85%{opacity:1}100%{transform:translate3d(var(--x,0),105vh,0) rotate(var(--r,540deg));opacity:0}}
.lq-cheer{position:fixed;left:50%;top:22%;z-index:51;transform:translate(-50%,0);padding:14px 26px;border-radius:99px;background:linear-gradient(180deg,#ecd28a,#c9a24f);color:#1a1208;border:2px solid var(--brass-lo);font:800 24px/1.2 var(--font);box-shadow:0 8px 30px #0008;pointer-events:none;animation:lqcheer 1.8s ease forwards;text-align:center;max-width:90vw}
@keyframes lqcheer{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}15%{opacity:1;transform:translate(-50%,0) scale(1.08)}25%{transform:translate(-50%,0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-10px)}}
.lq-enter{animation:lqenter .28s ease both}
@keyframes lqenter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lq-pop{animation:lqpop .35s ease}
@keyframes lqpop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
/* guide clip */
.lq-guide{margin:0 0 var(--sp-4)}.lq-guide-v{display:block;width:100%;border-radius:12px;border:2px solid var(--brass-mid);background:#000}
/* reduced motion: still show the cheer message, without movement */
@media(prefers-reduced-motion:reduce){.lq-confetti{display:none}.lq-cheer{opacity:1}.btn-primary:hover{transform:none}}
.lq-search{width:100%;min-height:52px;padding:12px 16px;font:700 17px/1.2 var(--font);color:var(--ink);background:#070b10;border:2px solid var(--brass-mid);border-radius:14px}
.lq-search:focus{border-color:var(--gold-hi)}.lq-search::placeholder{color:#b9ab8c}
.gl-row{padding:10px 0;border-top:1px solid rgba(215,181,106,.18)}
.pg-prog{display:grid;margin-top:8px;max-width:320px}.pg-prog .bar{display:block}

/* r4 game feel: buttons lift and warm on hover, sink on press; home quest cards lift (no motion when reduced) */
.btn-ghost:hover{transform:translateY(-1px);box-shadow:inset 0 1px #f3e2b033,0 0 12px #d7b56a33,0 4px 8px #0007}
.btn-primary:hover{box-shadow:inset 0 1px #fff8dc8c,inset 0 -2px #5a3c0a4d,0 1px 0 var(--brass-ink),0 0 14px #f0c86055,0 6px 10px #0007}
.btn:active,.btn-primary:active,.btn-ghost:active{transform:translateY(2px) scale(.98);filter:brightness(.94);box-shadow:inset 0 2px 5px #0009}
.qcard{transition:transform .14s ease,box-shadow .14s ease}
@media (hover:hover){.qcard:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #d7b56a66,0 0 22px #d7b56a26,0 14px 28px #0009}}
@media (prefers-reduced-motion:reduce){.btn:hover,.btn:active,.qcard:hover{transform:none}}
/* === The Wanderer's Atlas gold storybook wordmark (brand/atlas-logo) ===
   One markup, three looks: .logo-a Gilded Compass (default), .logo-b Storybook Flourish, .logo-c Brass Plate.
   Free assets only: Cormorant Garamond (Google Fonts, already loaded) + inline SVG + CSS. */
.atlas-logo{display:inline-flex;align-items:center;gap:.32em;white-space:nowrap;font:700 clamp(20px,5.4vw,25px)/1.05 var(--display);letter-spacing:.015em;text-transform:none;color:#f0cf74;text-decoration:none;max-width:100%}
.atlas-logo .al-compass{flex:none;width:1.12em;height:1.12em;filter:drop-shadow(0 1px 0 #2a1d0a) drop-shadow(0 0 4px #f0c86040)}
.atlas-logo .al-word{position:relative;padding:0 .04em .06em;background:linear-gradient(180deg,#fff6d2 0%,#f7dc8c 30%,#e2b04a 56%,#b98424 80%,#e9c46a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 1px 0 #3a2708) drop-shadow(0 2px 3px #000a)}
.atlas-logo .al-the{font-size:.78em;font-style:italic;letter-spacing:0}
/* A: Gilded Compass — compass rose + embossed gold wordmark, no frame */
.atlas-logo.logo-a .al-word{filter:drop-shadow(0 -1px 0 #fff3c255) drop-shadow(0 1px 0 #3a2708) drop-shadow(0 2px 3px #000b)}
/* B: Storybook Flourish — no compass, leafy gold swashes either side, a touch larger */
.atlas-logo.logo-b{gap:.22em;font-size:clamp(21px,5.6vw,26px)}
.atlas-logo.logo-b .al-compass{display:none}
.atlas-logo.logo-b::before,.atlas-logo.logo-b::after{content:"";flex:none;width:1.05em;height:.7em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath d='M29 10C22 10 19 4 13 5C8 6 7 11 10.5 12.5C13 13.5 15 11 13.5 9.5' fill='none' stroke='%23e2b04a' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M20 9.3C18 6 15 5.6 13 7C15.5 8.8 17.6 9.6 20 9.3Z' fill='%23f3d27a'/%3E%3Ccircle cx='2.5' cy='10' r='1.6' fill='%23f3d27a'/%3E%3Cpath d='M5 10H9' stroke='%23e2b04a' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 1px 0 #2a1d0a)}
.atlas-logo.logo-b::after{transform:scaleX(-1)}
.atlas-logo.logo-b .al-word{background:linear-gradient(180deg,#fffbe6 0%,#fbe6a6 34%,#eabd55 60%,#c48e2a 84%,#f0cf74 100%);-webkit-background-clip:text;background-clip:text}
/* C: Brass Plate — engraved dark plaque with a double gold rule, compass inside */
.atlas-logo.logo-c{padding:.2em .62em .24em .46em;border-radius:.42em;background:linear-gradient(180deg,#1d2734,#0c1219);border:1px solid #d7b56a;box-shadow:inset 0 0 0 2px #0a0f15,inset 0 0 0 3px #d7b56a66,inset 0 1px 6px #000c,0 1px 0 #f3e2b033,0 2px 6px #0008;font-size:clamp(18px,5vw,23px)}
.atlas-logo.logo-c .al-word{filter:drop-shadow(0 -1px 0 #000) drop-shadow(0 1px 0 #f3e2b040)}
.topbar .atlas-logo{min-height:40px}
.title-logo{margin:0 0 6px;line-height:1}
.title-logo .atlas-logo{font-size:clamp(22px,6vw,28px)}
.title-logo .atlas-logo.logo-c{font-size:clamp(20px,5.4vw,25px)}
@media (max-width:360px){.atlas-logo,.title-logo .atlas-logo{font-size:19px}.atlas-logo.logo-c,.title-logo .atlas-logo.logo-c{font-size:17px}}