:root{--transition-speed: 50ms ease-in-out;--col-orange: #ff6224;--col-blue: #3366cc;--col-lblue: #5a94cf;--col-yellow: #ccb27f;--col-sand: var(--col-yellow);--col-background: rgb(4, 44, 83);--col-background-accent: #0b2b88;--col-accent: var(--col-blue);--col-border: #3366cc80;--bg-main: radial-gradient(#323e7ac7, transparent), linear-gradient(var(--col-background), var(--col-background-accent), var(--col-background));--text-primary: #f1f1f1;--text-secondary: #717171;--col-text-muted: #85B7EB;--col-text-bright: #E6F1FB;--col-text-link: #B5D4F4;--col-text-dim: #6699BB;--font-display: "Playfair Display", Georgia, serif;--font-body: "DM Sans", system-ui, sans-serif;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--z-overlay: 100;--z-tooltip: 99999}html,body{padding:0;margin:0;overflow:hidden;font-family:var(--font-body);color:var(--text-primary)}body{position:relative}h1,h2,h3,h4,h5,p{margin:0;font-weight:400;font-family:var(--font-display)}h1{-webkit-user-select:none;user-select:none}.app{position:relative;width:100vw;height:100dvh;display:flex;flex-direction:column}#main{position:relative;flex:1;width:100vw;z-index:0}.tag-indicator{display:inline-block;padding:4px 14px;background:#378add33;border:1px solid rgba(55,138,221,.4);border-radius:var(--radius-lg);color:var(--col-text-link);font-size:12px;letter-spacing:1px;text-transform:uppercase;margin:1rem 8rem 1rem 1rem;width:fit-content;white-space:nowrap}button.btn-primary,button.btn-secondary{padding:6px 16px;border-radius:var(--radius-md);border:1px solid var(--col-accent);background:transparent;color:var(--col-text-link);font-family:var(--font-body);font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between;gap:1rem;transition:all .2s}button.btn-primary:hover,button.btn-secondary:hover{background:#378add26}button.btn-primary{background:var(--col-accent);border-color:var(--col-accent);color:#fff}button.btn-primary.disabled,button.btn-secondary.disabled{cursor:not-allowed;background-color:transparent;border-color:#bbd1ff54;color:#bbd1ff54}.logo{font-family:var(--font-display);color:var(--text-primary);font-size:18px;letter-spacing:.5px}.logo span,.logo em{color:var(--col-yellow);font-style:italic}#nav{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:linear-gradient(#0f3051,#0f2951,#0d1f45);border-bottom:1px solid var(--col-border);position:sticky;top:0;z-index:var(--z-overlay);box-shadow:0 2px 8px 4px #0000002c;min-height:1.5rem;max-height:1.5rem}#nav .logo{position:absolute;opacity:.5;transition:.5s opacity}#nav .logo:hover{opacity:1}#nav .nav-btn{border-color:#6699bd90;color:var(--text-primary);opacity:.5;transition:.1s opacity}#nav .nav-btn:hover{opacity:1}@media screen and (max-width:700px){#nav:has(.nav-btn *) .logo{display:none}}.nav-btns{display:flex;gap:8px;margin-left:auto}.nav-separator{width:1px;align-self:stretch;background:var(--col-border);opacity:.4;margin:2px 4px}.nav-overflow{position:relative}.nav-overflow-panel{position:absolute;top:calc(100% + 10px);right:0;min-width:180px;padding:6px;z-index:var(--z-overlay);display:flex;flex-direction:column;gap:2px;margin-right:-1rem}.nav-overflow-section{display:flex;flex-direction:column;gap:2px}.nav-overflow-heading{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--col-text-muted);padding:4px 8px 2px}.nav-overflow-btn{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:none;background:transparent;color:var(--text-primary);cursor:pointer;border-radius:var(--radius-sm);font-size:14px;text-align:left;transition:var(--transition-speed) background}.nav-overflow-btn i{width:16px;text-align:center;color:var(--col-accent);font-size:14px}.nav-overflow-btn:hover{background:#ffffff12}.nav-overflow-divider{height:1px;background:var(--col-border);opacity:.4;margin:4px 0}.overlay-effect{z-index:var(--z-tooltip);position:absolute;pointer-events:none;width:100%;height:100%}.overlay-effect.--vignette{--col1: #00000042;--col2: #00000026;background-image:linear-gradient(0deg,var(--col1),transparent 10%,transparent 90%,var(--col1)),linear-gradient(90deg,var(--col1),transparent 10%,transparent 90%,var(--col1)),radial-gradient(transparent 60%,var(--col2) 90%,var(--col1))}.world-view{position:absolute;height:100%;width:100%;overflow:hidden;cursor:grab;padding:20px;margin:-20px;background-color:var(--col-blue);transition:filter 1s}.world-view:active{cursor:grabbing}.world-map-canvas{display:block;height:100%;width:auto}.map-container{position:relative;display:inline-block;transform-origin:0 0;-webkit-user-select:none;user-select:none}.location-marker{position:absolute;left:var(--marker-x);top:var(--marker-y);transform:translate(calc(-50% - 4px),-4px);cursor:pointer;text-align:center;padding:8px}.location-marker:hover .location-dot{background-color:var(--col-blue);scale:1.3;box-shadow:0 0 4px #000,0 0 32px 16px #ffffffe0}.location-marker:hover .location-label{font-weight:800;font-size:20px;text-shadow:0 1px 3px rgb(0,0,0)}.location-dot{width:12px;height:12px;border-radius:50%;background-color:var(--col-orange);border:2px solid white;margin:0 auto;box-shadow:0 0 4px #000,0 0 32px 16px #ffffff36;transition:var(--transition-speed) all}.location-label{z-index:1;position:relative;color:#fff;font-size:16px;white-space:nowrap;text-shadow:0 1px 1px rgb(0,0,0);pointer-events:none;transition:var(--transition-speed) all}.poi-marker{position:absolute;left:var(--marker-x);top:var(--marker-y);transform:translate(-50%,-50%);cursor:pointer;width:36px;height:36px;display:none;align-items:center;justify-content:center}.poi-marker.--selected .poi-ring{border-color:var(--col-orange);box-shadow:0 0 0 3px #ff622459}.poi-marker:hover .poi-ring{scale:1.2;border-color:#fff;box-shadow:0 0 0 4px #ffffff40}.world-view:not(.--blocked) .poi-marker{display:flex}.poi-ring{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:#ffffff14;box-shadow:0 0 6px 2px #00000080;transition:var(--transition-speed) all}.poi-tooltip{position:fixed;left:calc(var(--tip-x) + 14px);top:calc(var(--tip-y) - 8px);z-index:var(--z-tooltip);pointer-events:none;background:var(--bg-main);border:1px solid var(--col-border);border-radius:var(--radius-md);padding:8px 12px;min-width:160px;box-shadow:0 4px 16px #00000080;animation:card-in .12s ease both}.poi-tooltip-label{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:6px;white-space:nowrap}.poi-tooltip-stat{display:flex;justify-content:space-between;gap:12px;font-size:11px;margin-top:2px}.poi-tooltip-stat-label{color:var(--text-secondary);white-space:nowrap}.poi-tooltip-stat-value{color:var(--text-primary);white-space:nowrap}.poi-stats{display:flex;flex-direction:column;gap:6px;margin:1rem;padding:12px;border:1px solid var(--col-border);border-radius:var(--radius-md);background:#ffffff0a}.poi-stat-row{display:flex;justify-content:space-between;gap:16px;font-size:13px}.poi-stat-label{color:var(--text-secondary)}.poi-stat-value{color:var(--text-primary);font-weight:500}.view-switcher-btns{display:flex;flex-direction:column;gap:4px;padding:0 12px 12px}.view-btn{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;color:var(--col-text-muted);font-family:var(--font-body);font-size:13px;cursor:pointer;text-align:left;transition:var(--transition-speed) all}.view-btn i{width:14px;text-align:center;opacity:.7}.view-btn:hover{background:#378add1f;color:var(--text-primary)}.view-btn:hover i{opacity:1}.view-btn.--active{background:#378add2e;border-color:var(--col-border);color:var(--text-primary)}.view-btn.--active i{opacity:1;color:var(--col-lblue)}#main:has(#card-center .overlay-card) .world-view{filter:blur(5px) brightness(.8);pointer-events:none}@keyframes card-in{0%{transform:scale(.92)}to{transform:scale(1)}}#card-grid{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:var(--z-overlay)}.card-cell{position:absolute;left:var(--cell-left);top:var(--cell-top);width:var(--cell-w);height:var(--cell-h);padding:12px;box-sizing:border-box;display:flex;align-items:var(--cell-align-v, flex-start);justify-content:var(--cell-align-h, flex-start);pointer-events:none;overflow:hidden}.card-cell>*{pointer-events:auto;max-width:100%;max-height:100%;min-height:0;min-width:0}#card-center{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:var(--z-overlay);width:500px;height:fit-content;left:50%;top:50%;translate:-50% -50%;max-width:calc(100vw - 1rem);max-height:calc(100dvh - 4.5rem)}#card-center>*{pointer-events:auto}.overlay-card{padding:.5rem;border-radius:var(--radius-lg);border:1px solid var(--col-border);background:var(--bg-main);opacity:.9;box-shadow:0 1px 6px 2px #0004;color:var(--text-primary);transition:var(--transition-speed) all;animation:card-in .22s cubic-bezier(.22,1,.36,1) both}.overlay-card:hover,.overlay-card.active{opacity:1}.overlay-card h2{margin:4px 60px 4px 12px;font-size:20px;font-weight:400}.overlay-card-toolbar{position:absolute;display:flex;margin:1rem;right:8px;gap:4px;z-index:1}.overlay-card-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm);color:var(--col-accent);transition:var(--transition-speed) color,var(--transition-speed) background}.overlay-card-toolbar-btn:hover{color:var(--col-orange);background:#ffffff14}.overlay-card-toolbar-btn i{font-size:16px}.overlay-card .card-body{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.overlay-card.main .card-body .scrollbody{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--col-border) transparent}.overlay-card.main .card-body .scrollbody::-webkit-scrollbar{width:5px}.overlay-card.main .card-body .scrollbody::-webkit-scrollbar-track{background:transparent}.overlay-card.main .card-body .scrollbody::-webkit-scrollbar-thumb{background:var(--col-border);border-radius:99px}.overlay-card.main{width:fit-content;max-width:-webkit-fill-available;max-height:-webkit-fill-available;height:min-content;min-height:0;display:flex;flex-direction:column}.overlay-card.main h2{font-size:min(30px,5vw);position:relative}.overlay-card.main h2.logo{font-size:min(40px,6vw);margin-bottom:2rem}.overlay-card.main h2.logo:after{content:"";position:absolute;bottom:-12px;left:0;width:40px;height:2px;background-color:var(--col-yellow)}.overlay-card.main p{margin:1rem 2rem 1rem 1rem;width:auto;max-width:min(500px,calc(100% - 3rem));color:var(--col-text-muted)}.overlay-card.main button.btn-primary,.overlay-card.main button.btn-secondary{margin:1rem;padding:10px 20px;font-size:16px}.class-reveal-card{background:#ffffff0f;border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:2rem;margin:1rem;margin-bottom:28px;position:relative;overflow:hidden}.class-reveal-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:20px 20px 0 0}.class-reveal-card.class-minor:before{background:#1d9e75}.class-reveal-card.class-semi:before{background:#185fa5}.class-reveal-card.class-major:before{background:#d85a30}.class-reveal-icon{font-size:48px;margin-bottom:16px;display:block}.class-reveal-label{font-size:11px;color:var(--col-text-muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}.class-reveal-name{font-family:var(--font-display);font-size:28px;color:var(--col-text-bright);margin-bottom:4px}.class-reveal-subtitle{font-size:14px;font-style:italic;margin-bottom:16px}.class-minor .class-reveal-subtitle{color:#5dcaa5}.class-semi .class-reveal-subtitle{color:var(--col-text-muted)}.class-major .class-reveal-subtitle{color:#ef9f27}.class-reveal-desc{font-size:15px;color:var(--col-text-muted);line-height:1.7;font-weight:300}.class-weight-badge{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:500;background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:var(--col-text-bright)}.class-weight-badge .weight-val{font-family:monospace;font-size:14px;color:var(--col-sand)}.location-grid{display:flex;gap:12px;flex-direction:column;margin:1rem}.location-card{background:#ffffff0f;border:1.5px solid rgba(255,255,255,.12);border-radius:14px;padding:18px;cursor:pointer;transition:all .2s ease}.location-card:hover{background:#ffffff1a;border-color:#378add80;transform:translateY(-2px)}.location-card.selected{border-color:#378add;background:#378add26}.location-card-icon{font-size:24px;margin-bottom:8px;display:block}.location-card-name{font-family:var(--font-display);font-size:15px;color:var(--col-text-bright);margin-bottom:2px}.location-card-region{font-size:11px;color:var(--col-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.location-card-desc{font-size:12px;color:var(--col-text-dim);line-height:1.5}.location-card.selected .location-card-name{color:var(--col-text-link)}.location-card.selected .location-card-region,.location-card.selected .location-card-desc{color:var(--col-text-muted)}.voyage-progress{height:3px;background:#ffffff14;border-radius:99px;margin:.5rem 1rem 0;overflow:hidden}.voyage-progress-fill{height:100%;width:var(--progress, 0%);background:var(--col-lblue);border-radius:99px;transition:width .3s ease}.voyage-story{color:var(--col-text-muted);font-style:italic;border-left:2px solid var(--col-border);padding-left:.75rem;margin-left:1rem!important;margin-right:1.5rem!important}.voyage-question{color:var(--text-primary)!important;font-weight:500}.voyage-choices{display:flex;flex-direction:column;gap:6px;margin:0 1rem .5rem}.voyage-choice{display:flex;align-items:baseline;gap:12px;padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--col-border);background:#ffffff08;color:var(--col-text-muted);font-family:var(--font-body);font-size:14px;cursor:pointer;text-align:left;transition:var(--transition-speed) all}.voyage-choice:hover{background:#378add1a;color:var(--text-primary);border-color:#378add66}.voyage-choice.--selected{background:#378add2e;border-color:var(--col-accent);color:var(--text-primary)}.voyage-choice-key{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--col-lblue);min-width:16px;flex-shrink:0}.voyage-choice-text{line-height:1.4}
