@import url('fonts.css'); /* ═══════════════════════════════════════════════════════════ SMYTAN, palette carried over from the original theme: volcanic black · ember amber · aged bronze · bone --path / --path-hi are rewritten at runtime by the Trial. ═══════════════════════════════════════════════════════════ */ :root{ --ink:#e8dcc4; --ink-dim:#b9ad92; --ink-faint:#7a7058; --bg:#0b0908; --bg-2:#141110; --bg-3:#1a1614; --iron:#1f1c1a; --iron-hi:#4a4541; --steel:#8a8680; --ember:#d97639; --ember-hi:#f4a347; --ember-deep:#8a3c14; --bronze:#8a6a3c; --rust:#a44827; --serif:"Cormorant Garamond",Georgia,serif; --display:"Cinzel",serif; --mono:"JetBrains Mono",ui-monospace,monospace; --path:#6f8fd8; --path-hi:#9fc0f5; --maxw:1180px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--ink); font-family:var(--serif); font-size:18px; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; background-image: radial-gradient(1200px 600px at 50% -10%, rgba(217,118,57,.09), transparent 60%), radial-gradient(800px 400px at 0% 100%, oklch(0.62 0.18 250 / .06), transparent 65%); background-attachment:fixed; } ::selection{background:var(--ember);color:#0b0908} img{max-width:100%;display:block} h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.05em;line-height:1.2;text-wrap:balance} :focus-visible{outline:2px solid var(--path-hi);outline-offset:3px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} html{scroll-behavior:auto} } canvas#embers{position:fixed;inset:0;pointer-events:none;z-index:2} #flash{position:fixed;inset:0;z-index:30;opacity:0;pointer-events:none;mix-blend-mode:screen; background:radial-gradient(circle at 50% 55%,#fff 0%,var(--ember-hi) 20%,var(--ember-deep) 44%,transparent 70%)} #flash.hit{animation:strike .8s ease-out} @keyframes strike{0%{opacity:0;transform:scale(.2)}12%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}} body.shake{animation:shk .4s} @keyframes shk{0%,100%{transform:none}20%{transform:translate(3px,-4px)}40%{transform:translate(-4px,2px)}60%{transform:translate(2px,3px)}80%{transform:translate(-2px,-2px)}} .eyebrow{font-family:var(--display);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--path)} .rule{width:40px;height:1px;background:var(--path);opacity:.5;margin:1.25rem auto} .tiny{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--ink-faint)} .btn{font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase; background:linear-gradient(#252019,#15120f);border:1px solid rgba(232,220,196,.28); color:var(--ink-dim);padding:.85rem 2rem;cursor:pointer;border-radius:2px;transition:all .25s; text-decoration:none;display:inline-block} .btn:hover{border-color:var(--path);color:var(--ink);box-shadow:0 0 24px -6px var(--path)} .btn--hot{background:var(--path);border-color:var(--path);color:#0b0908;font-weight:600} .btn--hot:hover{filter:brightness(1.15)} .btn:disabled{opacity:.2;pointer-events:none} .link{background:none;border:none;color:var(--ink-faint);font-family:var(--display);font-size:9px; letter-spacing:.16em;text-transform:uppercase;cursor:pointer; border-bottom:1px solid rgba(232,220,196,.15);padding-bottom:2px} .link:hover{color:var(--ink)} /* ─────────── HUD ─────────── */ #hud{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:1rem; padding:.8rem 1.5rem;background:linear-gradient(#0b0908f2,#0b090800); opacity:0;transform:translateY(-100%);transition:all .8s ease;pointer-events:none} #hud.on{opacity:1;transform:none;pointer-events:auto} #hud .brand{display:flex;align-items:center;gap:.6rem;margin-right:auto;background:none;border:none; font-family:var(--display);font-size:12px;letter-spacing:.2em;color:var(--ink-dim);cursor:pointer} #hud .brand img{width:24px;height:24px;opacity:.85} #hud .brand:hover{color:var(--path)} #hud .relics{font-family:var(--mono);font-size:10px;color:var(--ink-faint);letter-spacing:.08em} #hud .relics b{color:var(--path);font-weight:400} #hud .mark{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:10px; color:var(--ink-faint);letter-spacing:.08em} #hud .sigil{width:26px;height:26px;border:1px solid var(--path);border-radius:50%;display:grid; place-items:center;font-size:12px;box-shadow:0 0 14px -3px var(--path)} /* ─────────── stages ─────────── */ .stage{display:none;min-height:100vh;position:relative;z-index:3} .stage.live{display:block;animation:fade .9s ease} #threshold.live{display:grid;place-items:center;padding:2rem;text-align:center} @keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .wrap{max-width:680px;margin:0 auto;padding:7rem 1.5rem 5rem} .wrap--wide{max-width:1320px} /* ─────────── 1. threshold ─────────── */ .thr{max-width:560px;position:relative;z-index:4} .thr-word{font-family:var(--display);font-size:clamp(46px,12vw,104px);letter-spacing:.14em; margin-bottom:.4rem;background:linear-gradient(#f2e6ce 30%,#8a6a3c 75%,#3b2a1c); -webkit-background-clip:text;background-clip:text;color:transparent} .thr-sub{font-style:italic;color:var(--ink-faint);font-size:19px;margin-bottom:2.5rem} /* the painted anvil, whole on top, broken beneath; the strike cross-fades */ .anvil{position:relative;width:min(460px,86vw);aspect-ratio:4/3;margin:0 auto 1.5rem;cursor:pointer; overflow:hidden;transition:transform .25s; -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 54%,#000 55%,transparent 82%); mask-image:radial-gradient(ellipse 62% 62% at 50% 54%,#000 55%,transparent 82%)} .anvil:active{transform:translateY(3px) scale(.99)} .anvil img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center 64%;transition:opacity .9s ease} .anvil .broken{opacity:0} .anvil.struck .whole{opacity:0} .anvil.struck .broken{opacity:1} .anvil::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 50% 46%,rgba(244,163,71,.30),transparent 55%); animation:breathe 3.6s ease-in-out infinite} @keyframes breathe{0%,100%{opacity:.45}50%{opacity:.9}} .anvil-hint{font-family:var(--display);font-size:10px;letter-spacing:.24em;text-transform:uppercase; color:var(--ink-faint);animation:pulse 2.6s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}} /* ─────────── 2. trial ─────────── */ .quote{font-style:italic;color:var(--ink-dim);text-align:center;max-width:500px;margin:0 auto .5rem;line-height:1.85} .attrib{font-family:var(--display);font-size:9px;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-faint);text-align:center;margin-bottom:2.5rem} .prog{height:1px;background:rgba(232,220,196,.1);margin-bottom:.5rem;overflow:hidden} .prog i{display:block;height:100%;background:var(--ember);opacity:.7;width:0;transition:width .5s} .prog-l{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)} .trial-q{font-size:22px;color:var(--ink);line-height:1.5;margin:1.5rem 0 .5rem;font-weight:500} .trial-s{font-style:italic;font-size:15px;color:var(--ink-faint);margin-bottom:1.75rem} .answers{display:flex;flex-direction:column;gap:9px} .ans{background:#1a1714;border:1px solid rgba(232,220,196,.2);border-radius:2px;padding:.95rem 1.2rem; text-align:left;cursor:pointer;font-family:var(--serif);font-size:17px;color:var(--ink-dim); line-height:1.5;transition:all .2s} .ans:hover{border-color:rgba(232,220,196,.5);color:var(--ink);background:rgba(232,220,196,.05)} .ans.sel{border-color:var(--ember);color:var(--ink);background:rgba(217,118,57,.12); box-shadow:0 0 20px -8px var(--ember)} .nav-row{display:flex;justify-content:space-between;margin-top:2.25rem} /* ─────────── 3. mark ─────────── */ #mark .wrap{text-align:center} .sigil-big{width:150px;height:150px;margin:1.5rem auto 1.75rem;border:1px solid var(--path); border-radius:50%;display:grid;place-items:center;font-size:60px;position:relative; box-shadow:0 0 70px -12px var(--path), inset 0 0 45px -18px var(--path); animation:seal 1.3s cubic-bezier(.2,1.4,.4,1)} @keyframes seal{0%{transform:scale(2.6) rotate(-20deg);opacity:0;filter:blur(10px)}100%{transform:none;opacity:1;filter:none}} .sigil-big::after{content:"";position:absolute;inset:-9px;border:1px solid var(--path);border-radius:50%;opacity:.25} .path-name{font-family:var(--display);font-size:clamp(22px,4.5vw,32px);color:var(--ink)} .path-master{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--path);margin-top:.6rem} .verdict{background:var(--bg-2);border:1px solid rgba(232,220,196,.09);border-left:2px solid var(--path); padding:1.6rem 1.8rem;font-style:italic;color:var(--ink-dim);line-height:1.9;text-align:left; margin:2rem 0 1.5rem;font-size:17px} .traits{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:2.5rem} .traits span{font-family:var(--display);font-size:9px;letter-spacing:.16em;text-transform:uppercase; color:var(--path);border:1px solid color-mix(in oklab,var(--path),transparent 55%); padding:.32rem .85rem;border-radius:2px;background:color-mix(in oklab,var(--path),transparent 88%)} /* ─────────── 4. the known world ─────────── */ .world-head{text-align:center;margin-bottom:2.5rem} /* the map: an image with bubbles pinned at percentage coordinates */ /* max-width is set from the map's own ratio in JS so the whole map fits the viewport height, the artwork is never cropped and the bubbles stay true. */ .map-frame{position:relative;width:100%;margin-inline:auto; border:1px solid rgba(232,220,196,.12);border-radius:3px; overflow:hidden;background:var(--bg-2);box-shadow:0 40px 90px -40px #000, inset 0 0 120px -40px #000} .map-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .map-frame::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(11,9,8,.65) 100%)} .map-frame.is-placeholder img{opacity:.55} .map-placeholder-note{position:absolute;left:50%;top:1rem;transform:translateX(-50%);z-index:4; font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-faint);background:rgba(11,9,8,.72);border:1px dashed rgba(232,220,196,.2); padding:.35rem .8rem;border-radius:2px} .bubbles{position:absolute;inset:0;z-index:3} .bub{position:absolute;transform:translate(-50%,-50%);background:none;border:none;padding:0; cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.5rem; --bub:var(--path)} .bub--place{--bub:var(--path)} .bub--beast{--bub:var(--rust)} .bub--forge{--bub:var(--bronze)} .bub--warden{--bub:#8c8f96} /* ring = the positioned box the size of the disc, so badges can sit OUTSIDE the disc's overflow:hidden without being clipped */ .bub__ring{position:relative;width:clamp(52px,6.2vw,78px);aspect-ratio:1;display:block} .bub__disc{position:absolute;inset:0;border-radius:50%;overflow:hidden; border:2px solid var(--bub);background:#0d0b09;display:grid;place-items:center; box-shadow:0 0 0 5px rgba(11,9,8,.55), 0 0 26px -6px var(--bub); transition:transform .3s, box-shadow .3s, filter .3s} .bub__disc img{width:100%;height:100%;object-fit:cover;filter:brightness(1.08) saturate(1);transition:filter .3s} .bub:hover .bub__disc{transform:scale(1.12);box-shadow:0 0 0 5px rgba(11,9,8,.55), 0 0 40px -4px var(--bub)} .bub:hover .bub__disc img{filter:brightness(1.3) saturate(1.1)} .bub:focus-visible .bub__disc{transform:scale(1.12)} /* the ping only draws attention to what has not been opened yet */ .bub__ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--bub); pointer-events:none;animation:ping 2.8s ease-out infinite;opacity:0} .bub:not(.is-found) .bub__ring::after{opacity:1} @keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.75);opacity:0}} .bub__glyph{position:absolute;right:-3px;bottom:-3px;z-index:2;width:20px;height:20px;border-radius:50%; background:#0d0b09;border:1px solid var(--bub);color:var(--bub);font-size:10px; display:grid;place-items:center;line-height:1} /* the engraved-line glyph set: inline SVG marks that inherit currentColor */ .gi{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;vertical-align:-0.13em;flex:none} .bub__glyph .gi{width:12px;height:12px;stroke-width:1.9} .card__type .gi,.card__kind .gi{width:1.15em;height:1.15em;margin-right:.15em} /* a node whose disc IS a glyph (e.g. the anvil), instead of a painting */ .bub__glyphbig{display:grid;place-items:center;width:100%;height:100%} .bub__glyphbig .gi{width:54%;height:54%;color:var(--bub);stroke-width:1.5} .bub__q{font-family:var(--display);font-size:22px;color:var(--ink-faint)} .bub--unpainted .bub__disc{border-style:dashed;border-color:rgba(232,220,196,.3); background:repeating-linear-gradient(45deg,#141110 0 8px,#171310 8px 16px);box-shadow:none} .bub--unpainted .bub__glyph{border-color:rgba(232,220,196,.3);color:var(--ink-faint)} /* dark plaque behind the label so it reads on parchment OR dark map alike */ .bub__label{font-family:var(--display);font-size:10px;letter-spacing:.1em;color:var(--ink); white-space:nowrap;opacity:.9;transition:all .3s;margin-top:.35rem; background:rgba(11,9,8,.78);padding:2px 8px;border-radius:3px; border:1px solid rgba(232,220,196,.12)} .bub:hover .bub__label{opacity:1;color:#fff;border-color:var(--bub)} .bub.is-found .bub__disc{border-width:3px} .bub.is-found .bub__label{color:var(--bub)} .map-legend{display:flex;gap:1.25rem;flex-wrap:wrap;align-items:center;margin-top:1.25rem; font-family:var(--mono);font-size:10px;color:var(--ink-faint);letter-spacing:.1em} .leg{display:flex;align-items:center;gap:.45rem} .leg--count{margin-left:auto} .leg--count b{color:var(--path);font-weight:400} .leg__dot{width:18px;height:18px;border-radius:50%;display:grid;place-items:center; font-size:9px;font-style:normal;border:1px solid currentColor} .leg__dot--place{color:var(--path)} .leg__dot--beast{color:var(--rust)} .leg__dot--forge{color:var(--bronze)} .card__type{color:var(--ink-dim)} .card__hero--none{height:120px;display:grid;place-items:center; background:repeating-linear-gradient(45deg,#141110 0 12px,#171310 12px 24px)} .card__hero--none span{font-family:var(--mono);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-faint)} /* ─────────── 5. panel ─────────── */ #panel{position:fixed;inset:0;z-index:25;display:none;background:rgba(6,5,4,.85);backdrop-filter:blur(7px); overflow-y:auto;padding:2rem 1.25rem} /* flex + margin:auto (not grid centering): a card taller than the viewport stays scrollable from its top instead of clipping above the screen */ #panel.on{display:flex;animation:fade .35s} .card{position:relative;margin:auto;max-width:620px;width:100%;background:linear-gradient(#16130f,#0d0b09); border:1px solid rgba(232,220,196,.14);border-top:2px solid var(--path);border-radius:3px; box-shadow:0 40px 90px -20px #000, 0 0 90px -30px var(--path); animation:rise .45s cubic-bezier(.2,.9,.3,1);overflow:hidden} @keyframes rise{from{transform:translateY(26px) scale(.97);opacity:0}to{transform:none;opacity:1}} .card__hero{width:100%;max-height:300px;object-fit:cover;object-position:center 30%; filter:brightness(.85);border-bottom:1px solid rgba(232,220,196,.1)} .card__in{padding:2rem 2.25rem 2.25rem} .card__kind{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--path)} .card h3{font-size:26px;margin:.4rem 0 1rem} .card__body{color:var(--ink-dim);line-height:1.8;margin-bottom:1.25rem} .card__x{position:absolute;top:.85rem;right:1rem;z-index:3;background:rgba(11,9,8,.7);border:none; color:var(--ink-dim);font-size:20px;cursor:pointer;line-height:1;width:32px;height:32px;border-radius:50%} .card__x:hover{color:var(--ink);background:rgba(11,9,8,.95)} .lens{border:1px solid color-mix(in oklab,var(--path),transparent 70%); background:color-mix(in oklab,var(--path),transparent 93%);padding:1.1rem 1.3rem;border-radius:2px;margin-bottom:1.5rem} .lens-h{font-family:var(--display);font-size:9px;letter-spacing:.18em;text-transform:uppercase; color:var(--path);margin-bottom:.5rem} .lens-p{font-style:italic;color:var(--ink-dim);font-size:16px;line-height:1.75} /* the relic strip inside a place */ .relic-row{display:flex;align-items:center;gap:1rem;border-top:1px solid rgba(232,220,196,.09); padding-top:1.25rem;text-align:left;width:100%;background:none;border-left:none;border-right:none; border-bottom:none;cursor:pointer;transition:opacity .2s} .relic-row:hover{opacity:.78} .relic-row img{width:52px;height:52px;object-fit:cover;border-radius:2px;border:1px solid var(--path)} .relic-row .ph{width:52px;height:52px;border:1px dashed rgba(232,220,196,.25);border-radius:2px; display:grid;place-items:center;font-size:16px;color:var(--ink-faint);flex:none} .relic-row__t{flex:1} .relic-row__k{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--path)} .relic-row__n{font-family:var(--display);font-size:15px;color:var(--ink);margin-top:.15rem} .relic-row__go{font-family:var(--mono);font-size:16px;color:var(--path)} /* relic detail */ .relic-line{font-style:italic;color:var(--path);margin-bottom:1rem} .chron{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-top:1.5rem; border-top:1px solid rgba(232,220,196,.09);padding-top:1.5rem} .chron__note{font-family:var(--mono);font-size:10px;color:var(--ink-faint);letter-spacing:.08em;line-height:1.7} .taken{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--path)} /* ─────────── 6. oath ─────────── */ #oath .wrap{text-align:center} .oath-scroll{background:linear-gradient(#161310,#100d0b);border:1px solid rgba(232,220,196,.12); padding:2.5rem 2.25rem;border-radius:2px;text-align:left;box-shadow:inset 0 0 70px -30px var(--ember)} .oath-text{font-style:italic;font-size:19px;line-height:2;color:var(--ink-dim)} .oath-text em{color:var(--ink)} .sign-line{margin-top:2rem;border-top:1px solid rgba(232,220,196,.14);padding-top:1.25rem} .sign-lab{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-faint);margin-bottom:.6rem} .sign-in{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(232,220,196,.2); font-family:var(--display);font-size:26px;color:var(--ink);padding:.35rem 0;outline:none;transition:all .3s} .sign-in:focus{border-color:var(--path)} .sign-in.burned{color:var(--path-hi);text-shadow:0 0 22px var(--path);border-color:var(--path)} .email-row{display:flex;gap:8px;margin-top:1.75rem;flex-wrap:wrap} .email-in{flex:1;min-width:200px;background:#0d0b09;border:1px solid rgba(232,220,196,.18); border-radius:2px;padding:.75rem 1rem;font-family:var(--serif);font-size:16px;color:var(--ink);outline:none} .email-in:focus{border-color:var(--path)} .err{color:var(--rust);font-family:var(--mono);font-size:10px;letter-spacing:.08em;margin-top:.75rem;min-height:1em} /* the sealed state, the painted human-forged seal drops in */ .sealed{display:none;text-align:center;margin-top:2rem} .sealed.on{display:block;animation:fade .6s} .sealed img{width:130px;margin:0 auto 1.25rem;filter:drop-shadow(0 0 30px var(--path)); animation:seal .9s cubic-bezier(.2,1.4,.4,1)} .sealed p{font-style:italic;color:var(--path)} .amulet-gift{display:flex;gap:1rem;align-items:center;text-align:left;margin-top:1.75rem; border:1px solid color-mix(in oklab,var(--path),transparent 65%); background:color-mix(in oklab,var(--path),transparent 92%);padding:1rem 1.25rem;border-radius:2px} .amulet-gift img{width:64px;height:64px;object-fit:cover;border-radius:2px;margin:0; border:1px solid var(--path);filter:none;animation:none} .amulet-gift div{flex:1} @media(max-width:620px){ .wrap{padding:5.5rem 1.25rem 4rem} .card__in{padding:1.6rem} #hud .relics{display:none} .plate{min-height:260px} /* the map is small on a phone, so shrink the bubbles and drop the always-on labels that were overlapping and spilling off the map. The bubble art still reads, a tap opens its card with the name, and only the next stop stays labelled so first-timers still have a thread to follow. */ .bub__ring{width:36px} .bub__glyph{width:15px;height:15px;font-size:8px;right:-2px;bottom:-2px} .bub__label{display:none} .bub.is-next .bub__label{display:block;font-size:9px;padding:1px 6px} .bub__next{top:calc(100% + .7rem);font-size:8px;padding:2px 7px} } /* ═══════════ the journey ═══════════ The Trial hands you a destination; the map records the road you walk. These are the pieces that connect the two. */ /* Master Berton's directive on the Mark screen, the hand-off to the map */ .directive{border:1px solid color-mix(in oklab,var(--path),transparent 65%); background:color-mix(in oklab,var(--path),transparent 92%); padding:1.4rem 1.6rem;border-radius:2px;margin:0 0 2rem;text-align:left} .directive__h{font-family:var(--display);font-size:9px;letter-spacing:.2em;text-transform:uppercase; color:var(--path);margin-bottom:.6rem} .directive__p{font-style:italic;color:var(--ink);line-height:1.85;font-size:17px} .directive__w{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--ink-faint);margin-top:.75rem} /* the trail: percentage-space, so it lands exactly on the bubbles */ .trail{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible} /* the stop number, this is the Pokémon-route bit: your order, not ours */ .bub__no{position:absolute;left:-5px;top:-5px;z-index:2;width:20px;height:20px;border-radius:50%; background:var(--bub);color:#0b0908;font-family:var(--mono);font-size:10px;font-weight:700; display:grid;place-items:center;line-height:1;box-shadow:0 0 12px -2px var(--bub)} /* where your master told you to start */ .bub.is-next .bub__disc{animation:beckon 1.8s ease-in-out infinite} @keyframes beckon{0%,100%{box-shadow:0 0 0 5px rgba(11,9,8,.55),0 0 22px -6px var(--bub)} 50%{box-shadow:0 0 0 5px rgba(11,9,8,.55),0 0 46px 0px var(--bub)}} .bub__next{position:absolute;top:calc(100% + 1.4rem);left:50%;transform:translateX(-50%); font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase; color:#0b0908;background:var(--bub);padding:.2rem .5rem;border-radius:2px;white-space:nowrap} .bub--oath{--bub:var(--bronze)} .leg__dot--oath{color:var(--bronze);font-size:8px} .prog--map{margin-top:.75rem;background:rgba(232,220,196,.08)} .prog--map i{background:var(--path);opacity:.85} /* the payoff, once the road is walked and the Oath is sworn */ .book-call{margin-top:2.5rem;text-align:center;border:1px solid color-mix(in oklab,var(--path),transparent 60%); background:color-mix(in oklab,var(--path),transparent 92%);padding:2rem 1.5rem;border-radius:3px} .book-call__h{font-family:var(--display);font-size:20px;color:var(--ink);margin-bottom:.6rem} .book-call__p{color:var(--ink-dim);max-width:520px;margin:0 auto 1.5rem;line-height:1.8;font-style:italic} .card__hero--scroll{object-fit:contain;object-position:center top;background:#0d0b09;max-height:340px} .oath-seal-sm{width:92px;margin:1.25rem auto 0;filter:drop-shadow(0 0 24px var(--path))} /* ═══════════ the Book, sealed until earned ═══════════ */ .book-call.is-locked{border-color:rgba(232,220,196,.14);background:rgba(232,220,196,.03)} .book-call.is-locked .book-call__h{color:var(--ink-dim)} .book-call.is-locked .book-call__p{color:var(--ink-faint)} .book-lock{filter:grayscale(1) opacity(.7);font-size:.9em;margin-right:.25rem} .book-req{list-style:none;display:flex;flex-direction:column;gap:.55rem;max-width:360px; margin:0 auto 1.5rem;text-align:left;font-family:var(--mono);font-size:11px; letter-spacing:.05em;color:var(--ink-faint)} .book-req li{display:flex;justify-content:space-between;gap:1rem; border-bottom:1px dashed rgba(232,220,196,.1);padding-bottom:.5rem} .book-req li.ok{color:var(--path)} .book-req b{font-weight:400;font-variant-numeric:tabular-nums} .btn--sealed{opacity:.55;background:linear-gradient(#211d18,#171310); border:1px solid rgba(232,220,196,.15);color:var(--ink-faint);cursor:not-allowed;pointer-events:none} .book-call.is-ready{animation:fade .6s ease} /* start-over control in the HUD */ .hud-reset{margin-left:1rem;background:none;border:1px solid rgba(232,220,196,.18);border-radius:2px; color:var(--ink-faint);font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase; padding:.4rem .7rem;cursor:pointer;transition:all .2s;white-space:nowrap} .hud-reset:hover{color:var(--rust);border-color:var(--rust)} @media(max-width:620px){ .hud-reset{padding:.35rem .5rem} .hud-reset span{display:none} } /* path sigils, bronze emblems cropped from the human-forged seal, framed in path colour */ .sigil-big img{width:100%;height:100%;object-fit:cover;border-radius:50%} #hud .sigil{overflow:visible} #hud .sigil img{width:100%;height:100%;object-fit:cover;border-radius:50%} /* ═══════════ staged "coming soon" bubbles ═══════════ */ .bub--locked{opacity:.42;filter:grayscale(.7)} .bub--locked .bub__disc{border-color:rgba(232,220,196,.22);box-shadow:none} .bub--locked .bub__disc img{filter:brightness(.55) grayscale(.5)} .bub--locked::before{display:none} /* no attention ping */ .bub--locked .bub__glyph{border-color:rgba(232,220,196,.3);color:var(--ink-faint);background:#0d0b09;font-size:9px} .bub--locked .bub__label{color:var(--ink-faint)} .bub--locked:hover{opacity:.72} .bub--locked:hover .bub__disc{transform:scale(1.06)} /* ═══════════ side menu: the guild ledger ═══════════ */ #menu-tab{position:fixed;top:50%;left:0;transform:translateY(-50%);z-index:22; display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:center; width:34px;height:52px;padding:0;cursor:pointer; background:linear-gradient(#1a1512,#100d0b);border:1px solid rgba(232,220,196,.18); border-left:none;border-radius:0 4px 4px 0;transition:all .25s} #menu-tab span{width:16px;height:1.5px;background:var(--ink-dim);transition:background .2s} #menu-tab:hover{border-color:var(--ember)} #menu-tab:hover span{background:var(--ember)} body.menu-on #menu-tab{opacity:0;pointer-events:none} #menu-scrim{position:fixed;inset:0;z-index:23;background:rgba(6,5,4,.6);backdrop-filter:blur(3px); opacity:0;transition:opacity .3s} body.menu-on #menu-scrim{opacity:1} #side-menu{position:fixed;top:0;left:0;bottom:0;z-index:24;width:min(340px,86vw); background:linear-gradient(160deg,#16130f,#0c0a08);border-right:1px solid rgba(232,220,196,.14); box-shadow:30px 0 90px -30px #000;overflow-y:auto; transform:translateX(-105%);transition:transform .32s cubic-bezier(.2,.9,.3,1)} body.menu-on #side-menu{transform:none} #menu-close{position:absolute;top:.75rem;right:1rem;background:none;border:none;color:var(--ink-faint); font-size:24px;line-height:1;cursor:pointer} #menu-close:hover{color:var(--ink)} .menu-in{padding:3rem 1.75rem 2rem} .menu-eyebrow{font-family:var(--display);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--ember)} .lang-toggle{display:flex;gap:.3rem;justify-content:flex-end;margin-bottom:.8rem} .lang-btn{font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:.28rem .6rem;border:1px solid var(--line);border-radius:3px;background:none;color:var(--ink-faint);cursor:pointer;transition:all .15s} .lang-btn.is-on{color:var(--ink);border-color:var(--ember);background:rgba(224,138,67,.1)} .lang-btn:not(.is-on):hover{color:var(--ink-dim)} .menu-title{font-family:var(--display);font-size:22px;color:var(--ink);margin-top:.35rem} .menu-rule{width:34px;height:1px;background:var(--ember);opacity:.5;margin:1rem 0 1.5rem} .menu-book{border:1px solid color-mix(in oklab,var(--ember),transparent 68%); background:color-mix(in oklab,var(--ember),transparent 92%);border-radius:3px;padding:1.25rem 1.35rem;margin-bottom:1.75rem} .menu-book__k{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--ember)} .menu-book__h{font-family:var(--display);font-size:19px;color:var(--ink);margin:.3rem 0 .6rem} .menu-book__p{font-size:15px;line-height:1.7;color:var(--ink-dim);margin-bottom:1rem} .menu-book__done{font-style:italic;color:var(--ember);font-size:14px;line-height:1.6} .menu-form{display:flex;flex-direction:column;gap:.6rem} .menu-form input,.menu-form textarea{background:#0d0b09;border:1px solid rgba(232,220,196,.18);border-radius:2px; padding:.7rem .85rem;font-family:var(--serif);font-size:15px;color:var(--ink);outline:none;width:100%} .menu-form textarea{resize:vertical;min-height:5rem;line-height:1.5} .menu-form input:focus,.menu-form textarea:focus{border-color:var(--ember)} .menu-form .btn{margin-top:.2rem;text-align:center} .menu-nav{display:flex;flex-direction:column;gap:.25rem;border-top:1px solid rgba(232,220,196,.1);padding-top:1.25rem} .menu-link{display:block;padding:.7rem .5rem;border-radius:2px;text-decoration:none;transition:background .2s} .menu-link:hover{background:rgba(232,220,196,.05)} .menu-link__l{display:block;font-family:var(--display);font-size:14px;letter-spacing:.06em;color:var(--ink)} .menu-link__n{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--ink-faint);margin-top:.2rem} .menu-foot{margin-top:1.75rem;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--ink-faint)} /* ═══════════ Houses (guilds you choose) ═══════════ */ .houses{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2rem auto;max-width:920px} @media(max-width:860px){.houses{grid-template-columns:repeat(2,1fr);max-width:520px}} .house{background:var(--bg-2);border:1px solid rgba(232,220,196,.14);border-radius:3px;padding:1.6rem 1rem; cursor:pointer;text-align:center;transition:all .25s;display:flex;flex-direction:column;align-items:center;gap:.55rem} .house:hover{border-color:var(--gc);transform:translateY(-3px);box-shadow:0 20px 40px -24px #000,0 0 40px -26px var(--gc)} .house.is-sel{border-color:var(--gc);box-shadow:0 0 0 1px var(--gc),0 0 44px -20px var(--gc); background:color-mix(in oklab,var(--gc),transparent 90%)} .house__crest{width:84px;height:84px;border-radius:50%;overflow:hidden;border:2px solid var(--gc);box-shadow:0 0 18px -6px var(--gc)} .house__crest img{width:100%;height:100%;object-fit:cover} .house__name{font-family:var(--display);font-size:18px;color:var(--ink)} .house__of{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--gc)} .house__motto{font-style:italic;font-size:13px;color:var(--ink-faint);line-height:1.5} .house-hint{text-align:center;color:var(--ink-faint);font-style:italic;margin-top:1rem} .law{border:1px solid color-mix(in oklab,var(--gc),transparent 62%); background:color-mix(in oklab,var(--gc),transparent 92%);border-radius:3px;padding:1.75rem;margin-top:1.5rem} .law__head{display:flex;gap:1.1rem;align-items:center;margin-bottom:1.1rem} .law__crest{width:70px;height:70px;border-radius:50%;overflow:hidden;border:2px solid var(--gc);flex:none} .law__crest img{width:100%;height:100%;object-fit:cover} .law__k{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--gc)} .law__name{font-family:var(--display);font-size:22px;color:var(--ink);margin:.15rem 0} .law__motto{font-style:italic;color:var(--ink-dim)} .law__char{color:var(--ink-dim);line-height:1.8;margin-bottom:1.25rem} .law__eyebrow{font-family:var(--display);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gc);margin-bottom:.6rem} .law__list{list-style:none;counter-reset:law;display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.25rem} .law__list li{counter-increment:law;position:relative;padding-left:2.2rem;line-height:1.65;color:var(--ink)} .law__list li::before{content:counter(law,upper-roman)".";position:absolute;left:0;font-family:var(--display);color:var(--gc);font-size:14px} .law__penalty{border-top:1px dashed color-mix(in oklab,var(--gc),transparent 55%);padding-top:1rem;font-style:italic;color:var(--ink-dim);line-height:1.7} .law__penalty span{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--gc);font-style:normal;margin-bottom:.35rem} .law .btn{margin-top:1.5rem} .house-mark{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:10px;color:var(--ink-faint);letter-spacing:.08em} .house-mark__crest{width:24px;height:24px;border-radius:50%;overflow:hidden;border:1px solid;display:inline-block} .house-mark__crest img{width:100%;height:100%;object-fit:cover} .oath-articles{list-style:none;counter-reset:oa;display:flex;flex-direction:column;gap:.6rem;margin:1rem 0} .oath-articles li{counter-increment:oa;position:relative;padding-left:2.2rem;line-height:1.6;color:var(--ink-dim)} .oath-articles li::before{content:counter(oa,upper-roman)".";position:absolute;left:0;font-family:var(--display);color:var(--path);font-size:13px} @media(max-width:640px){ .houses{grid-template-columns:1fr} .law__head{flex-direction:column;text-align:center} } /* ═══════════ The Deep: dragon fossil dig ═══════════ */ .deep-scene{position:relative;border:1px solid rgba(232,220,196,.14);border-radius:4px; background-size:cover;background-position:center;padding:3rem 2rem;text-align:center; box-shadow:inset 0 0 120px -30px #000, 0 30px 70px -40px #000} .deep-lede{color:var(--ink-dim);max-width:560px;margin:1rem auto 1.75rem;line-height:1.8;font-style:italic} .deep-strike{font-size:13px;padding:1rem 2.5rem} .deep-strike:active{transform:translateY(2px)} .deep-count{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-faint);margin-top:1.25rem} .deep-count b{color:var(--ember);font-weight:400} #deep-reveal{min-height:0} .reveal{display:flex;gap:1.5rem;align-items:center;margin:1.75rem 0;padding:1.5rem;border-radius:4px; border:1px solid color-mix(in oklab,var(--fc),transparent 55%); background:color-mix(in oklab,var(--fc),transparent 90%); box-shadow:0 0 50px -18px var(--fc);animation:reveal-in .5s cubic-bezier(.2,1.3,.4,1)} @keyframes reveal-in{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}} .reveal__img{width:130px;height:130px;flex:none;border-radius:4px;overflow:hidden;border:2px solid var(--fc); box-shadow:0 0 26px -8px var(--fc)} .reveal__img img{width:100%;height:100%;object-fit:cover} .reveal__r{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)} .reveal__r span{color:var(--fc)} .reveal__name{font-family:var(--display);font-size:24px;color:var(--ink);margin:.25rem 0 .6rem} .reveal__lore{color:var(--ink-dim);line-height:1.75;font-style:italic} .reveal__new{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--fc);margin-top:.75rem} .reveal--legendary{box-shadow:0 0 70px -14px var(--fc)} .reliquary-h{font-family:var(--display);font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--ember);margin:2.5rem 0 1rem;text-align:center} .reliquary{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;padding-bottom:1rem} .fossil{position:relative;background:var(--bg-2);border:1px solid rgba(232,220,196,.1);border-radius:4px; padding:.9rem;cursor:pointer;text-align:center;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:.4rem} .fossil:not(.is-hidden){border-color:color-mix(in oklab,var(--fc),transparent 60%)} .fossil:not(.is-hidden):hover{transform:translateY(-3px);box-shadow:0 0 34px -14px var(--fc)} .fossil__img{width:100%;aspect-ratio:1;border-radius:3px;overflow:hidden;background:#0d0b09;display:grid;place-items:center} .fossil__img img{width:100%;height:100%;object-fit:cover} .fossil.is-hidden{opacity:.5} .fossil.is-hidden .fossil__img{border:1px dashed rgba(232,220,196,.16)} .fossil__q{font-family:var(--display);font-size:32px;color:var(--ink-faint)} .fossil__name{font-family:var(--display);font-size:13px;color:var(--ink);line-height:1.3} .fossil.is-hidden .fossil__name{color:var(--ink-faint)} .fossil__r{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--fc)} .fossil__ct{position:absolute;top:.5rem;right:.6rem;font-family:var(--mono);font-size:9px;color:var(--ink-faint)} /* ═══════════ fog of war + hidden fissure ═══════════ */ .fog{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none; transition:opacity .6s ease} .bub--fogged{display:none} /* staged bubbles stay hidden until the fog clears near them */ /* a faint crack in the stone, in a corner, that pulses just enough to be found */ .fissure{position:absolute;transform:translate(-50%,-50%);z-index:4;width:54px;height:54px; border:none;background:none;cursor:pointer;border-radius:50%;padding:0} .fissure::before{content:"";position:absolute;inset:0;border-radius:50%; background:radial-gradient(circle,rgba(244,163,71,.55),rgba(244,163,71,.12) 45%,transparent 70%); animation:fissure-glow 3.4s ease-in-out infinite} .fissure::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:3px; transform:translate(-50%,-50%) rotate(28deg);border-radius:2px; background:linear-gradient(90deg,transparent,rgba(11,9,8,.9),transparent); box-shadow:0 5px 0 -1px rgba(11,9,8,.5),0 -5px 0 -1px rgba(11,9,8,.5)} .fissure:hover::before{background:radial-gradient(circle,rgba(244,163,71,.8),rgba(244,163,71,.2) 45%,transparent 72%)} .fissure.is-found::before{animation:none;background:radial-gradient(circle,rgba(244,163,71,.35),transparent 70%)} @keyframes fissure-glow{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.9;transform:scale(1.08)}} /* ═══════════ arrival ═══════════ */ #arrival.live{display:grid;place-items:center;min-height:100vh;padding:2rem} .arrival{width:100%;max-width:1100px;min-height:78vh;border-radius:4px;overflow:hidden; background-size:cover;background-position:center;display:grid;place-items:center;text-align:center; border:1px solid rgba(232,220,196,.12);box-shadow:0 40px 90px -40px #000} .arrival__in{max-width:620px;padding:2rem} .arrival__title{font-family:var(--display);font-size:clamp(48px,11vw,96px);letter-spacing:.16em; margin:.5rem 0 1.5rem;background:linear-gradient(#f2e6ce 30%,#c08a4a 80%); -webkit-background-clip:text;background-clip:text;color:transparent} .arrival__line{color:var(--ink);font-size:19px;line-height:1.8;margin-bottom:1rem;font-style:italic} .arrival__line--soft{color:var(--ink-dim);font-size:17px;margin-bottom:2rem} /* dim the map until the Trial is done, so a newcomer looks there first */ .bub--await{opacity:.4;filter:saturate(.7)} .bub--await:hover{opacity:.7} /* taming the Bullhog */ .tame-q{font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-faint);margin:1.25rem 0 .75rem} .tame-offers{display:flex;flex-direction:column;gap:9px;margin-bottom:.5rem} /* The Deep, spent and resting */ .deep-locked{margin:.5rem auto 0;max-width:420px;border:1px solid rgba(232,220,196,.16); border-radius:3px;padding:1.1rem 1.4rem;background:rgba(11,9,8,.4)} .deep-locked__t{font-family:var(--display);font-size:15px;color:var(--ink-dim)} .deep-locked__w{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-faint);margin-top:.4rem} .deep-locked__w b{color:var(--ember);font-weight:400} /* menu legal links + copyright */ .menu-link--fine{padding:.45rem .5rem !important;display:inline-block !important;width:auto !important} .menu-link--fine .menu-link__l,.menu-link--fine{font-family:var(--mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-faint)} .menu-link--fine:hover{color:var(--ink);background:none} .menu-foot{line-height:1.8} /* the fossil dig: chip the stone crust off the shard */ .dig-wrap{position:relative;width:min(420px,82vw);aspect-ratio:1;margin:1.5rem auto .25rem; border-radius:4px;overflow:hidden;border:1px solid rgba(232,220,196,.2); box-shadow:0 0 44px -14px var(--ember), inset 0 0 60px -30px #000} .dig-fossil{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .dig-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none} .dig-hint{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-faint);margin-top:1rem} /* ─── menu-link buttons: strip the browser's default button chrome so the