.compass-banner{width:100%;display:flex;align-items:center;gap:12px;padding:18px;text-align:left;border:1px solid #9ceccb6b;border-radius:20px;background:radial-gradient(ellipse at 95% 0%,#704228,transparent 65%),linear-gradient(120deg,#093d3c,#161934);color:#fff;margin:0 0 18px;overflow:hidden}.compass-banner>span:nth-child(2){flex:1;min-width:0}.compass-banner strong{display:block;font-size:19px;margin:5px 0}.compass-banner small{display:block;color:#c1ddd8;font-size:11px}.compass-banner .portrait{width:62px;height:82px;flex-shrink:0;border:1px solid #f9d386;border-radius:12px}.compass-seal{font-size:38px;color:#e3c580}.compass-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:36px 20px 24px;border:1px solid #d9b37066;border-radius:26px;background:radial-gradient(ellipse at 10% 30%,#115d55,transparent 62%),radial-gradient(ellipse at 85% 45%,#552a71,transparent 60%),#070f22;box-shadow:inset 0 0 70px #0007}.compass-hero>.eyebrow{position:relative;color:#ffda94;font-size:10px;letter-spacing:.16em}.compass-hero h1{position:relative;color:#fff5cf;font:800 clamp(30px,7vw,52px)/1.02 Georgia,serif;margin:16px 0;text-shadow:0 4px 20px #000}.compass-hero p{position:relative;color:#c8dcd8;line-height:1.6;font-size:13px}.compass-eclipse{position:absolute;z-index:-1;left:50%;top:24px;transform:translateX(-50%);width:210px;height:210px;border-radius:50%;background:#0b1325;box-shadow:0 0 0 1px #ffdb91,8px -8px 38px #ffcb7770,inset 0 0 30px #995ba055;animation:eclipse-breathe 5s ease-in-out infinite}.compass-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:460px;margin:26px auto 20px}.compass-duo button{position:relative;background:#091725;border:1px solid #ccb67888;border-radius:18px;padding:0;overflow:hidden;color:#ffe7b0;box-shadow:0 8px 20px #0006}.compass-duo .portrait{display:block;width:100%;height:auto;aspect-ratio:3/4;border-radius:0}.compass-duo button>span:last-child{position:relative;display:block;padding:12px 4px;font-size:14px;font-weight:800;background:linear-gradient(#162537,#071120)}.compass-duo small{display:block;font-size:8px;margin-top:6px;letter-spacing:.07em;color:#abc5ce}.compass-total{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.compass-total span{font-size:12px;color:#ffe0a0;border:1px solid #ddc58e44;border-radius:20px;padding:8px 10px;background:#0d192a}.compass-clock{display:block;margin:18px 0;color:#baded4;font-size:11px;letter-spacing:.06em}.compass-hero .play-button,.compass-brief .play-button{width:100%;background:linear-gradient(135deg,#edca77,#c67d36);color:#211506;box-shadow:0 4px 0 #754b26,0 4px 24px #ffc55725}.compass-map{margin-top:28px}.compass-map ol{list-style:none;margin:0;padding:0}.compass-map li{position:relative;display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:15px;border:1px solid #33566c;border-radius:18px;background:linear-gradient(110deg,#102939,#131c30);min-height:86px}.compass-map li.current{border-color:#eac880;box-shadow:inset 3px 0 #efcb7c,0 0 20px #fed57014}.compass-map li.sealed{opacity:.65}.compass-map li.done{border-color:#63c6a960}.compass-map li>div{flex:1;min-width:0}.compass-map small{font-size:9px;color:#a9c6d2;letter-spacing:.1em}.compass-map strong{display:block;color:#f8eac7;font-size:14px;margin:5px 0}.compass-map .small{font-size:10px;color:#bcd2dc}.compass-node{display:grid;place-items:center;flex:0 0 36px;height:36px;border:1px solid #dbc17d;border-radius:50%;color:#f5d687;font-size:20px;background:#092832}.done .compass-node{background:#255d51;color:#abffd9}.compass-map .portrait{width:42px;height:56px;border-radius:9px}.compass-map-gem{font-size:28px;color:#cbbb88}.compass-brief{margin-top:26px;padding:23px;border-radius:22px;background:linear-gradient(135deg,#162d3e,#152337);border:1px solid #547182}.compass-brief h2{color:#ffe7b2;font-family:Georgia,serif;margin:9px 0}.compass-brief p{color:#bbced6;font-size:13px;line-height:1.6}.compass-objective{display:grid;gap:9px;padding:15px;border-left:3px solid #76ddc0;background:#061c2b;margin:20px 0}.compass-objective b{font-size:13px;color:#dcf8ee}.compass-objective span{font-size:12px;line-height:1.5;color:#bfd1da}.compass-relics{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0 20px}.compass-relics button{min-height:100px;text-align:left;padding:12px;border:1px solid #547083;border-radius:12px;background:#0b1d2c;color:#d9e7ec}.compass-relics b{font-size:12px;display:block;margin-bottom:8px}.compass-relics span{font-size:11px;line-height:1.4;display:block}.compass-relics .chosen{border-color:#efcb7c;background:#3c3a2c;color:#ffedba;box-shadow:inset 0 0 0 1px #efcb7c}.compass-finale{text-align:center;border:1px solid #e2c275;padding:28px;border-radius:20px;background:radial-gradient(ellipse,#31513d,#132334);margin:24px 0}.compass-finale>span{font-size:70px;color:#ffdf8e}.compass-battle-goal{position:absolute;top:5px;left:50%;transform:translateX(-50%);width:76%;padding:7px 9px;border:1px solid #9cd7cf70;border-radius:9px;background:#0a1726e8;color:#fff0c7;font-size:10px;text-align:center;pointer-events:none}.compass-battle-goal small{display:block;margin-top:4px;color:#b6dace;font-size:9px}.compass-result .portrait{width:130px;height:174px;margin:16px auto}.compass-result h1{color:#ffe5a2}.compass-result .compass-reward-title{color:#b3f3dc;text-align:center}.compass-portrait.extra-portrait{box-shadow:0 0 13px #f6b83b88}.compass-map li.current .compass-node{animation:compass-glow 3s ease-in-out infinite}@keyframes eclipse-breathe{50%{box-shadow:0 0 0 1px #ffecc0,12px -6px 52px #ffcc77aa,inset 0 0 36px #9859a070}}@keyframes compass-glow{50%{box-shadow:0 0 20px #f4cf7266}}.economy-mode .compass-eclipse,.economy-mode .compass-node{animation:none}.motion-paused .compass-eclipse,.motion-paused .compass-node{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.compass-eclipse,.compass-node{animation:none!important}}@media(max-width:360px){.compass-hero{padding:28px 12px 20px}.compass-duo{gap:9px}.compass-duo small{font-size:7px}.compass-seal{display:none}.compass-banner{padding:14px;gap:8px}.compass-banner strong{font-size:16px}.compass-map li{gap:9px;padding:12px}.compass-brief{padding:16px}.compass-map strong{font-size:12px}}