:root{--navy:#0f2238;--navy2:#162e4d;--gold:#e9c46a;--gold2:#b8892e;--ink:#f6efdc;--hc:#e9b949;--hg:#ffb84a}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#050b1c;color:var(--ink);font-family:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif}
#bg{position:fixed;inset:0;z-index:0}
#ui{position:fixed;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:70px 16px 16px;overflow:auto}
.hidden{display:none!important}
h1,h2,h3{font-family:"Trajan Pro","Cinzel",Georgia,serif;letter-spacing:.06em;margin:.2em 0;color:var(--gold);text-shadow:0 2px 0 #0008,0 0 18px #e9c46a44}
.panel{position:relative;background:linear-gradient(180deg,#14294aee,#0b1830f2);border:2px solid var(--gold2);border-radius:16px;padding:22px 26px;box-shadow:0 0 0 4px #0b1830,0 0 0 6px #e9c46a55,0 20px 60px #000b,inset 0 0 40px #e9c46a12;max-width:980px;width:100%;animation:rise .45s cubic-bezier(.2,.9,.3,1.2)}
.panel:before,.panel:after{content:"";position:absolute;width:42px;height:42px;border:2px solid var(--gold);pointer-events:none}
.panel:before{top:7px;left:7px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}.panel:after{bottom:7px;right:7px;border-left:0;border-top:0;border-radius:0 0 8px 0}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.btn{font:inherit;font-size:1.08rem;cursor:pointer;color:#1a1206;background:linear-gradient(180deg,#ffe8a0,#e9c46a 45%,#b8892e);border:1px solid #fff3c4;border-radius:12px;padding:12px 20px;margin:6px;box-shadow:0 4px 0 #6b4c14,0 8px 18px #0008;font-weight:700;letter-spacing:.03em;transition:transform .12s,filter .12s}
.btn:hover{filter:brightness(1.1);transform:translateY(-2px)}.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #6b4c14}
.btn.ghost{background:linear-gradient(180deg,#24406b,#13284a);color:var(--ink);border-color:#e9c46a77;box-shadow:0 4px 0 #050b1c,0 8px 18px #0008}
.btn.big{font-size:1.35rem;padding:16px 30px}.btn:disabled{opacity:.5;cursor:default;transform:none}
.center{text-align:center}.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.logo{font-size:clamp(2.4rem,7vw,5rem);line-height:1;background:linear-gradient(180deg,#fff6cf,#e9c46a 50%,#9a6a1a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #0009) drop-shadow(0 0 22px #e9c46a66)}
.tag{opacity:.85;font-style:italic}
.crests{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.crest{width:88px;height:88px;border-radius:14px;background-size:cover;box-shadow:0 0 0 2px #e9c46a66,0 8px 18px #000a;transition:transform .2s}
.crest:hover{transform:translateY(-6px) rotate(-2deg)}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.card{background:linear-gradient(180deg,#1c3760,#10223e);border:1px solid #e9c46a66;border-radius:14px;padding:14px;cursor:pointer;text-align:center;transition:transform .15s,box-shadow .15s;color:var(--ink);font:inherit}
.card:hover,.card:focus{transform:translateY(-4px);box-shadow:0 0 0 2px var(--gold),0 0 26px #e9c46a55;outline:none}
.card.sel{box-shadow:0 0 0 3px var(--gold),0 0 30px #e9c46a88}
.gradebtn{font-size:2.2rem;font-weight:700;color:var(--gold);padding:18px 0}
/* dialogue */
.dlg{display:flex;gap:18px;align-items:flex-end}
.dlg .portrait{flex:none;filter:drop-shadow(0 10px 20px #000a);animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.bubble{flex:1;background:#f6efdc;color:#2a1c0c;border-radius:16px;padding:16px 20px;font-size:1.15rem;line-height:1.45;position:relative;box-shadow:inset 0 0 0 3px #d8b25a,0 10px 30px #0008;min-height:96px}
.bubble:before{content:"";position:absolute;left:-14px;bottom:28px;border:10px solid transparent;border-right:16px solid #f6efdc}
.who{font-weight:700;color:#7a4a12;font-size:.95rem;letter-spacing:.04em}
/* HUD */
#hud{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;gap:14px;align-items:center;padding:8px 14px;background:linear-gradient(180deg,#0b1830f0,#0b183000);font-size:1rem}
#hud .pill{background:#0b1830cc;border:1px solid #e9c46a77;border-radius:20px;padding:4px 12px;white-space:nowrap}
#hud .crestmini{width:38px;height:38px;border-radius:8px;background-size:cover;box-shadow:0 0 0 2px var(--hc)}
#hud .sp{flex:1}
.bar{height:10px;border-radius:6px;background:#0007;overflow:hidden;box-shadow:inset 0 0 0 1px #e9c46a55;min-width:90px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--hc),#fff6cf);transition:width .5s}
/* map */
#map{position:fixed;inset:0;z-index:3}
.hot{position:absolute;transform:translate(-50%,-50%);cursor:pointer;background:none;border:0;color:var(--ink);font:inherit;text-align:center}
.hot .gem{width:58px;height:58px;margin:auto;border-radius:50%;display:grid;place-items:center;font-size:1.7rem;background:radial-gradient(circle at 35% 30%,#fff8,#e9c46a 40%,#7a5514);box-shadow:0 0 0 3px #0b1830,0 0 24px #ffd76a,0 0 60px #ffd76a66;animation:pulse 2.2s infinite}
.hot .lbl{margin-top:6px;background:#0b1830e6;border:1px solid var(--gold2);border-radius:10px;padding:3px 10px;font-size:.95rem;white-space:nowrap;box-shadow:0 4px 12px #0009}
.hot:hover .gem{transform:scale(1.12)}
@keyframes pulse{50%{box-shadow:0 0 0 3px #0b1830,0 0 34px #ffe9a0,0 0 90px #ffd76a99}}
.dock{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;flex-wrap:wrap;justify-content:center;z-index:4}
.companion{position:fixed;left:14px;bottom:10px;z-index:4;pointer-events:none}
.dragon .wingL{transform-origin:86px 90px;animation:flapL 1.2s ease-in-out infinite}.dragon .wingR{transform-origin:114px 90px;animation:flapR 1.2s ease-in-out infinite}
.boss .wingL{transform-origin:170px 160px;animation:flapL 2s ease-in-out infinite}.boss .wingR{transform-origin:230px 160px;animation:flapR 2s ease-in-out infinite}
@keyframes flapL{50%{transform:rotate(14deg) scaleY(.85)}}@keyframes flapR{50%{transform:rotate(-14deg) scaleY(.85)}}
.dragon,.boss{animation:hover 3s ease-in-out infinite}@keyframes hover{50%{transform:translateY(-8px)}}
.boss.hit{animation:hit .5s}@keyframes hit{20%{transform:translateX(-12px);filter:brightness(2)}60%{transform:translateX(10px)}}
/* quiz */
.quiz{display:grid;grid-template-columns:1fr;gap:16px;max-width:1100px;width:100%}
.quiz.withp{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
@media (max-width:820px){.quiz.withp{grid-template-columns:1fr}}
.passage{background:#f3e9cf;color:#2a1c0c;border-radius:10px;padding:18px 22px;max-height:62vh;overflow:auto;box-shadow:inset 0 0 0 3px #c9a24a,inset 0 0 40px #b8892e44,0 12px 30px #000a;line-height:1.6;font-size:1.06rem}
.passage h3{color:#6b3a0a;text-shadow:none;font-size:1.15rem}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.9rem;opacity:.9}
.bench{font-family:monospace;background:#0007;border:1px solid #e9c46a55;padding:2px 8px;border-radius:8px}
.qtext{font-size:1.3rem;line-height:1.4;margin:10px 0 14px}
.vis{font-size:2.2rem;letter-spacing:.15em;line-height:1.3;margin:6px 0 10px;word-break:break-all}
.ch{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;font-size:1.12rem;color:var(--ink);background:linear-gradient(180deg,#1f3c68,#132a4b);border:1px solid #e9c46a55;border-radius:12px;padding:12px 14px;margin:7px 0;cursor:pointer;transition:transform .1s,box-shadow .15s}
.ch:hover{box-shadow:0 0 0 2px #e9c46aaa}.ch .k{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#e9c46a;color:#1a1206;font-weight:700}
.ch.sel{box-shadow:0 0 0 3px var(--gold),0 0 20px #e9c46a66;background:linear-gradient(180deg,#2c5288,#1a3762)}
.ch.right{background:linear-gradient(180deg,#1f6b45,#124a2e);box-shadow:0 0 0 3px #7af0a8}.ch.wrong{background:linear-gradient(180deg,#7a2430,#4a1018);box-shadow:0 0 0 3px #ff8a8a}
.ch.gone{opacity:.25;pointer-events:none;text-decoration:line-through}
.numin{font:inherit;font-size:1.6rem;width:200px;padding:10px 14px;border-radius:12px;border:2px solid var(--gold);background:#0b1830;color:var(--ink);text-align:center}
.ord{list-style:none;padding:0;margin:0}.ord li{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#1f3c68,#132a4b);border:1px solid #e9c46a55;border-radius:12px;padding:10px 12px;margin:7px 0;cursor:grab;font-size:1.12rem}
.ord li.drag{opacity:.5}.ord li .mv{margin-left:auto;display:flex;gap:4px}.ord li .mv button{font:inherit;background:#e9c46a;border:0;border-radius:8px;width:34px;height:30px;cursor:pointer}
.fb{border-radius:12px;padding:12px 16px;margin-top:10px;font-size:1.08rem;line-height:1.4}.fb.ok{background:#124a2ecc;border:1px solid #7af0a8}.fb.no{background:#4a1018cc;border:1px solid #ff8a8a}
.tools{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.steps{display:flex;gap:4px;margin:6px 0 2px}.steps i{flex:1;height:8px;border-radius:4px;background:#ffffff22}.steps i.done{background:var(--gold)}.steps i.cur{background:#fff;box-shadow:0 0 8px #fff}.steps i.boss{background:#ff6a6a55}.steps i.boss.done{background:#ff6a6a}
.bosswrap{text-align:center}.hp{height:14px;border-radius:7px;background:#0008;overflow:hidden;box-shadow:inset 0 0 0 1px #ff9a9a;max-width:320px;margin:4px auto}.hp i{display:block;height:100%;background:linear-gradient(90deg,#ff5a5a,#ffcf6a);transition:width .6s}
table.rep{width:100%;border-collapse:collapse;margin:10px 0;font-size:1rem}.rep th,.rep td{border-bottom:1px solid #e9c46a33;padding:7px 8px;text-align:left}.rep th{color:var(--gold)}
.band{padding:2px 10px;border-radius:10px;font-weight:700;font-size:.9rem}.band.s{background:#1f6b45}.band.d{background:#8a6a12}.band.r{background:#7a2430}
#toast{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:20;pointer-events:none}
#toast div{background:linear-gradient(180deg,#ffe8a0,#e9c46a);color:#1a1206;padding:10px 20px;border-radius:24px;margin:6px;font-weight:700;box-shadow:0 8px 24px #000a;animation:toast 2.6s forwards}
@keyframes toast{0%{opacity:0;transform:translateY(-20px)}10%,80%{opacity:1;transform:none}100%{opacity:0}}
#fx{position:fixed;inset:0;pointer-events:none;z-index:15}
.spark{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(#fff,var(--hg) 50%,transparent 70%);animation:spark 1s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.pinpad{display:grid;grid-template-columns:repeat(3,70px);gap:8px;justify-content:center}.pinpad button{font:inherit;font-size:1.6rem;height:62px;border-radius:12px;border:1px solid #e9c46a77;background:#1c3760;color:var(--ink);cursor:pointer}
.pics{display:grid;grid-template-columns:repeat(3,80px);gap:8px;justify-content:center}.pics button{font-size:2.4rem;height:76px;border-radius:14px;border:1px solid #e9c46a77;background:#1c3760;cursor:pointer}.pics button.sel{box-shadow:0 0 0 3px var(--gold)}
input.tx{font:inherit;font-size:1.2rem;padding:10px 14px;border-radius:10px;border:2px solid var(--gold2);background:#0b1830;color:var(--ink);width:100%;max-width:340px}
label{display:block;margin:10px 0 4px;color:var(--gold)}
.small{font-size:.9rem;opacity:.85}
.wing-head{display:flex;gap:16px;align-items:center;justify-content:center}
.hearts{color:#ff6b7a;letter-spacing:2px}
@media print{body{background:#fff;color:#000;overflow:visible}#bg,#hud,.dock,.companion,.noprint,#map{display:none!important}#ui{position:static;padding:0;display:block}.panel{box-shadow:none;border:1px solid #999;background:#fff;color:#000;max-width:none}.panel:before,.panel:after{display:none}h1,h2,h3{color:#000;text-shadow:none}.rep th{color:#000}.band{color:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.spellbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;padding:8px;border-radius:12px;background:#0b1830aa;border:1px solid var(--hc)}
.spell{font:inherit;font-size:.9rem;display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink);background:linear-gradient(180deg,#2a2050,#14102a);border:1px solid var(--hc);border-radius:10px;padding:6px 10px;box-shadow:0 0 12px color-mix(in srgb,var(--hg) 40%,transparent)}
.spell:hover:not(:disabled){filter:brightness(1.25);transform:translateY(-2px)}.spell:disabled{opacity:.4;cursor:default}.spell .si{font-size:1.2rem}.spell .kb{font-family:monospace;background:#0008;border-radius:4px;padding:0 5px}.spell .chg{color:var(--hg);letter-spacing:1px}
.cast{position:fixed;inset:0;pointer-events:none;z-index:16;display:grid;place-items:center}.cast .ring{position:absolute;width:40px;height:40px;border-radius:50%;border:6px solid var(--cc);box-shadow:0 0 40px var(--cc),inset 0 0 30px var(--cc);animation:castring 1.1s ease-out forwards}
.cast .cl{font-size:2rem;font-weight:700;color:#fff;text-shadow:0 0 20px var(--cc),0 0 40px var(--cc);animation:castl 1.2s ease-out forwards}
@keyframes castring{to{width:900px;height:900px;opacity:0;border-width:1px}}@keyframes castl{0%{transform:scale(.4);opacity:0}25%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:0}}
.companion{transition:filter .6s}.companion.growing{animation:grow .9s ease-out}@keyframes grow{30%{transform:scale(1.25) translateY(-10px);filter:brightness(1.6) drop-shadow(0 0 30px var(--hg))}}
#race{position:fixed;inset:0;z-index:6}.racehud{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:7;background:#0b1830dd;border:1px solid var(--gold2);border-radius:14px;padding:8px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:95vw}
.racequiz{position:fixed!important;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;max-width:620px!important;animation:none!important}
.hot.dark .gem{background:radial-gradient(circle at 35% 30%,#555,#222 60%,#000);box-shadow:0 0 0 3px #0b1830,0 0 12px #6a5aff55;animation:none}
.dark-hall{background:radial-gradient(circle,#0a0814,#000)!important;transition:background 1s}.dark-hall.lit{background:radial-gradient(circle,#5a4214,#14102a 70%)!important}
.growtag{position:fixed;z-index:17;pointer-events:none;font-weight:700;color:#fff;background:linear-gradient(90deg,var(--hc),var(--hg));color:#1a1206;padding:4px 10px;border-radius:12px;box-shadow:0 0 18px var(--hg);animation:growtag 1.6s ease-out forwards}
@keyframes growtag{0%{opacity:0;transform:translateY(10px)}20%{opacity:1}100%{opacity:0;transform:translateY(-50px)}}
#ui{pointer-events:none}#ui>*{pointer-events:auto}
#g3d{position:fixed;inset:0;z-index:1;display:none}
.mini3d{position:fixed;left:10px;bottom:10px;width:230px;height:190px;z-index:4;pointer-events:none;border-radius:16px;background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--hg) 25%,transparent),transparent 70%)}
.mini3d span{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:.8rem;color:var(--gold);text-shadow:0 1px 3px #000}
.mini3d.growing{animation:grow .9s ease-out}
.crest3d{background:radial-gradient(circle,#e9c46a33,transparent 70%)!important;box-shadow:none!important}
.g3dprompt{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);z-index:5;background:linear-gradient(180deg,#14294af2,#0b1830f2);border:2px solid var(--gold);border-radius:16px;padding:10px 22px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;box-shadow:0 0 30px #e9c46a66;animation:rise .3s}
.g3dprompt b{color:var(--gold);font-size:1.2rem}kbd{background:#e9c46a;color:#1a1206;border-radius:5px;padding:0 6px;font-weight:700;font-family:monospace}
.g3dhelp{position:fixed;top:58px;left:50%;transform:translateX(-50%);z-index:4;background:#0b1830cc;border:1px solid var(--gold2);border-radius:12px;padding:6px 14px;font-size:.9rem;white-space:nowrap}
.map3d .dock{max-width:96vw}.map3d .dock .btn{padding:7px 11px;font-size:.85rem;margin:2px}
.joy{position:fixed;right:24px;bottom:110px;width:120px;height:120px;border-radius:50%;background:#0b183088;border:2px solid var(--gold2);z-index:5;touch-action:none}.joy i{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e9c46a 50%,#7a5514)}
.map3d .dock{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;bottom:6px;padding:4px 8px;background:#0b1830aa;border-radius:14px;max-width:98vw}
.map3d .dock .btn{white-space:nowrap;flex:none}

/* v2: 3D ambient backdrop + glassy panels */
body.g3d-amb #bg{display:none}
#g3d{z-index:1}
body.glass .panel{background:linear-gradient(180deg,rgba(18,32,60,.58),rgba(8,16,34,.72));-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);border-color:#e9c46acc;box-shadow:0 0 0 1px #0b183088,0 0 0 4px #e9c46a33,0 24px 70px #000c,inset 0 1px 0 #fff3,inset 0 0 50px #e9c46a10}
body.glass .card,body.glass .ch{background:linear-gradient(180deg,rgba(40,70,120,.55),rgba(16,34,62,.65))}
body.g3d-amb .logo{text-shadow:0 0 30px #e9c46a99,0 4px 0 #000a}
.boss3d{display:inline-block;background:radial-gradient(ellipse at 50% 60%,#ff6a3a33,transparent 70%)}
#g3dov{position:fixed;inset:0;z-index:6;pointer-events:none;display:none}
.boss3d{animation:none!important}
.portrait.photo{position:relative;flex:none;border-radius:50%;padding:6px;background:conic-gradient(from 30deg,#fff3c4,#e9c46a,#8a6420,#e9c46a,#fff3c4,#b8892e,#fff3c4);box-shadow:0 0 0 2px #5a3e10,0 0 26px #e9c46a77,0 10px 24px #000a}
.portrait.photo img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;box-shadow:inset 0 0 0 2px #000}
.portrait.photo i{position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff5,transparent 40%);pointer-events:none}