@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');
:root{color-scheme:dark;--ivory:#f6eacf;--gold:#e6c38a;--muted:#c0b8aa;--bg:#070b13}*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ivory);font-family:Inter,ui-sans-serif,system-ui}
[hidden]{display:none!important}button,a{color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}a{text-decoration:none}
#universe{position:relative;height:100dvh;min-height:360px;width:100vw;background:radial-gradient(ellipse at 49% 45%,#222d41,#090e18 58%,#060911)}
#atlas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.33'/%3E%3C/svg%3E");mix-blend-mode:screen}
.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 160px 30px #0008}
.head{z-index:6;position:absolute;left:0;right:0;top:0;padding:22px clamp(15px,3vw,42px);display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}
.head>*{pointer-events:auto}.brand{display:flex;align-items:flex-start;gap:11px;font:500 24px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.13em;text-shadow:0 2px 9px #000}.brand>span{padding-top:6px}.brand small{display:block;font:9px/1.4 Inter,sans-serif;letter-spacing:.2em;color:#bca486;margin-top:6px}.brand::first-letter{color:var(--gold)}
.topicons{display:flex;align-items:center;gap:8px}.atlas-stat{font-size:12px;letter-spacing:.15em;color:var(--gold);margin-right:10px}
.topicons button,.chamber-toolbar button,.chamber-toolbar a,.compass button,.symbolic,#mapClose{background:#0b1726b8;border:1px solid #e9c48b4f;border-radius:10px;min-width:42px;min-height:42px;display:grid;place-items:center;font-size:21px;backdrop-filter:blur(12px);transition:background .25s,border .25s}
.topicons button:hover,.chamber-toolbar button:hover,.compass button:hover,.symbolic:hover{background:#d6bb8e22;border-color:#d8ba84}
.entry{position:absolute;z-index:4;left:50%;top:49%;transform:translate(-50%,-50%);width:min(280px,70vw);height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 1.2s,transform 1.3s;pointer-events:none}
.entry.fade{opacity:0;transform:translate(-50%,-50%) scale(1.65)}.entry-symbol{font:190px Georgia,serif;color:#d9b987;text-shadow:0 0 23px #dcc09a,0 0 110px #c5d8da93;animation:levitate 5s ease-in-out infinite}
.entry-glow{position:absolute;width:280px;height:280px;top:40px;background:radial-gradient(ellipse,#e3bd8970,#c2ddcf18 38%,transparent 70%);filter:blur(25px);animation:breathe 6s infinite}
.entry-foot{font:11px Inter,sans-serif;letter-spacing:.33em;color:#ebd4b4;text-shadow:0 3px 13px #000;white-space:nowrap}
.entry-touch{position:absolute;inset:0;pointer-events:auto;border:0;background:transparent;cursor:pointer}@keyframes levitate{50%{transform:translateY(-12px) rotate(7deg)}}@keyframes breathe{50%{opacity:.52;transform:scale(1.14)}}
.hint{z-index:5;position:absolute;left:50%;top:18%;transform:translateX(-50%);font:12px 'Cormorant Garamond',serif;letter-spacing:.25em;color:#ead09f;opacity:0;transition:opacity .5s;text-align:center;pointer-events:none;white-space:nowrap;text-shadow:0 0 10px #000}
.hint.show{opacity:1}.compass{position:absolute;z-index:5;bottom:55px;left:clamp(14px,3vw,32px);display:grid;justify-items:center;gap:5px;opacity:0;pointer-events:none;transition:opacity .8s}
.compass.visible{opacity:.75;pointer-events:auto}.compass>div{display:flex;gap:5px}.compass button{width:43px;height:43px;min-height:0;min-width:0;border-radius:12px;font-size:19px}
.bottomline{position:absolute;bottom:0;z-index:5;left:0;right:0;height:39px;padding:10px clamp(15px,3vw,42px);display:flex;justify-content:space-between;align-items:center;gap:8px;color:#bcac91;font:9px Inter,sans-serif;letter-spacing:.18em;border-top:1px solid #d5b4811a;background:#090f18ad}.poctag{color:#89989f}
.map{position:absolute;z-index:15;inset:10% 7%;background:#0c1625f2;border:1px solid #e1c08b54;border-radius:18px;padding:26px;box-shadow:0 30px 100px #000d;backdrop-filter:blur(19px);overflow:auto}
.map-title{font:22px 'Cormorant Garamond',Georgia,serif;letter-spacing:.2em;color:#e6ca96}.map #mapGrid{display:grid;grid-template-columns:repeat(11,minmax(40px,1fr));gap:9px;margin-top:25px}
.map #mapGrid button{border:1px solid #e1bd8d3b;background:#142337;border-radius:12px;min-height:65px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:25px Georgia,serif;transition:.2s}
.map #mapGrid button:hover{border-color:var(--gold);background:#26354a}.map #mapGrid button span{font:9px Inter,sans-serif;letter-spacing:.1em;color:#aaa6a0}
#mapClose{position:absolute;right:20px;top:20px}
.chamber{position:absolute;z-index:8;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1d2b41ed,#090e19f8 67%,#070910ff);backdrop-filter:blur(14px)}
.chamber-sheen{position:absolute;pointer-events:none;inset:5% 20% 22%;background:radial-gradient(ellipse,#b3ba9551,transparent 65%);filter:blur(65px);opacity:.9;transition:.4s}
.chamber-toolbar{position:absolute;top:18px;left:23px;right:23px;display:flex;align-items:center;justify-content:space-between;gap:10px}
#chapterNumber{font:12px Inter,sans-serif;letter-spacing:.24em;color:var(--gold)}
.chamber-core{position:relative;z-index:2;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;width:min(560px,95%);height:58%;gap:14px}
.world-rune{font:clamp(106px,19vw,220px)/1 'Cormorant Garamond',Georgia,serif;min-width:220px;max-width:90vw;text-align:center;color:#e8c893;cursor:pointer;user-select:none;text-shadow:0 0 25px #dec092ad,0 0 100px #d1d6bd88;transition:transform .4s,text-shadow .5s;animation:rune-drift 5s ease-in-out infinite}
.world-rune:hover,.world-rune:focus-visible{transform:scale(1.07);text-shadow:0 0 35px #f6d9ac,0 0 130px #d6c99d}
.world-rune.cracked{color:#8dcac9;text-shadow:0 0 30px #8ecdc9,0 0 110px #8fd9df7a;transform:rotate(-8deg)}
@keyframes rune-drift{50%{translate:0 -13px}}
.world-name{font:26px 'Cormorant Garamond',Georgia,serif;letter-spacing:.1em;color:#f0e1c7;max-width:95vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.world-meaning{font:14px/1.6 'Cormorant Garamond',Georgia,serif;color:#d9c9a9;max-width:420px;padding:9px 16px;border-top:1px solid #ddc49b4a;letter-spacing:.04em}
.secondary-runes{display:flex;align-items:center;justify-content:center;gap:15px;min-height:50px;font:31px Georgia,serif;color:#e5c08a}
.secondary-runes button{width:52px;height:52px;border-radius:50%;border:1px solid #e5c28a77;background:#172636bb;color:#e9d4a6;cursor:pointer;font:31px Georgia,serif;transition:.3s}
.secondary-runes button:hover{background:#dcb78065}
.chamber-bottom{z-index:3;position:absolute;bottom:61px;display:flex;gap:12px}.symbolic{border-radius:50%;width:58px;height:58px;font-size:26px}
.chamber-note{position:absolute;bottom:25px;left:16px;right:16px;text-align:center;color:#b3c5c4;font:11px Inter,sans-serif;letter-spacing:.12em;pointer-events:none}
@media(max-width:750px){.head{padding:17px 13px}.brand{font-size:17px;gap:7px}.brand small{font-size:8px}.topicons button{min-width:38px;min-height:38px;font-size:19px}.atlas-stat{font-size:10px;margin-right:3px}.bottomline{font-size:8px;padding:11px 13px}.bottomline .poctag{display:none}.compass{bottom:57px;left:12px}.compass button{height:40px;width:40px}.entry{top:43%}.map{inset:8% 4%;padding:23px 12px}.map #mapGrid{grid-template-columns:repeat(5,minmax(40px,1fr));gap:7px}.map #mapGrid button{min-height:56px;font-size:21px}.chamber-toolbar{top:13px;left:12px;right:12px}.chamber-core{height:58%}.world-rune{min-width:110px;font-size:clamp(100px,33vw,150px)}.world-name{font-size:23px}.chamber-bottom{bottom:69px}.chamber-note{bottom:23px;font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Closed book, same dark-cover language as the literary site. */
.entry-symbol{position:relative;display:block;width:184px;height:245px;font-size:initial;transform-style:preserve-3d;perspective:900px;animation:physical-book 5s ease-in-out infinite;filter:drop-shadow(26px 32px 19px #000a)}
.book-edge{position:absolute;inset:6px 0 5px 9px;border-radius:4px 12px 11px 4px;border:2px solid #c6ad83;background:repeating-linear-gradient(0deg,#dcc49b 0,#dcc49b 2px,#776f68 2px,#847b6f 3px);transform:translateZ(-11px)}
.book-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;border:2px solid #d6b681;border-radius:4px 10px 8px 4px;background:radial-gradient(ellipse at 65% 28%,#3b4659 0,#182133 55%,#090e1c 94%);outline:1px solid #bca27773;outline-offset:-13px;box-shadow:inset 0 0 45px #060b14,5px 8px 7px #0009;transform:translateZ(9px)}
.book-cover span{font:48px Georgia,serif;color:#e3bf84;text-shadow:0 0 16px #d7bc8db0}
.book-cover strong{font:500 29px/.9 'Cormorant Garamond',Georgia,serif;letter-spacing:.12em;color:#f9ead2;text-align:center;text-shadow:0 4px 9px #000}
.book-cover small{font:9px Inter,sans-serif;letter-spacing:.15em;color:#dbc69d}
@keyframes physical-book{0%,100%{transform:translateY(0) rotateY(-19deg) rotateX(7deg)}50%{transform:translateY(-12px) rotateY(-25deg) rotateX(10deg)}}
@media(prefers-reduced-motion:reduce){.entry-symbol{animation:none}}

@media(max-width:640px){
  #soloPlay{min-height:36px!important;padding:0 6px!important;font-size:10px!important;white-space:nowrap}
  .atlas-stat{display:none}
  .brand small{display:none}
  .topicons{gap:4px}
  .head{gap:7px}
}
@media(max-width:380px){#soloPlay{font-size:9px!important;padding:0 4px!important}
  .brand>span{font-size:14px}.topicons button{min-width:34px;min-height:34px}}

.cosmic-entry{position:absolute;z-index:6;left:50%;bottom:64px;transform:translateX(-50%);
 min-height:45px;display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;
 padding:0 20px;border:1px solid #eed5a39e;border-radius:35px;
 background:linear-gradient(115deg,#213a43ee,#5a4235ea);color:#fce3ba;
 font:700 11px system-ui;letter-spacing:.12em;box-shadow:0 0 35px #b9d5b732;
 text-decoration:none;backdrop-filter:blur(10px);transition:transform .2s,background .2s}
.cosmic-entry:hover{transform:translateX(-50%) scale(1.04);background:#30545d}
.cosmic-entry span{font-size:16px}
@media(max-width:500px){.cosmic-entry{bottom:52px;padding:0 15px;min-height:42px;font-size:10px;letter-spacing:.07em}}

/* Server-authenticated MMO presence (never decorative or simulated readers). */
.atlas-presence{display:inline-flex;align-items:center;justify-content:center;
 min-height:32px;padding:6px 9px;border-radius:9px;
 background:#0a2530e0;border:1px solid #8acbbb7c;
 color:#bbebd4;font:700 10px system-ui;letter-spacing:.07em;white-space:nowrap}
.atlas-presence[data-status=queue]{border-color:#e7c58e;color:#ffe2b4}
.atlas-presence[data-status=offline],
.atlas-presence[data-status=error]{border-color:#cb889980;color:#daa9b6}
.atlas-presence[data-status=live]{box-shadow:0 0 15px #75caa524}
@media(max-width:650px){.atlas-presence{font-size:9px;padding:5px 6px;min-height:30px}}
@media(max-width:390px){.atlas-presence{max-width:99px;white-space:normal;
 line-height:1.1;text-align:center;font-size:8px}}