:root{
  --ink:#1c2b4a; --paper:#f7f5ef; --gold:#c79a3e; --green:#2f7d4f; --line:#e2ddcf;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Jost",-apple-system,"Segoe UI",sans-serif;
  --leg:#c79a3e; --epic:#7d5bbe; --rare:#2f7d4f; --common:#6b7a94;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; overflow:hidden; font-family:var(--sans); background:#0d1524; }
#map{ position:absolute; inset:0; filter:saturate(1.03) contrast(1.02); }

/* ---- treasure-map skin (fixed layers over the map, under the HUD) ---- */
.skin{ position:fixed; inset:0; pointer-events:none; }
.skin-tint{ z-index:2; background:radial-gradient(ellipse 120% 120% at 50% 45%, rgba(150,112,52,.05) 0%, rgba(120,86,40,.10) 55%, rgba(92,64,26,.30) 100%); mix-blend-mode:multiply; }
/* picture overlay retired: the vector map is parchment itself now. keep a whisper of grain only */
.skin-frame{ z-index:3; background-image:url(mapart-parchment.jpg?v=1); background-position:center; background-size:cover; mix-blend-mode:soft-light; opacity:.12; }
.skin-tint{ z-index:2; background:radial-gradient(ellipse 120% 120% at 50% 45%, rgba(150,112,52,.02) 0%, rgba(120,86,40,.04) 60%, rgba(92,64,26,.14) 100%); mix-blend-mode:multiply; }
.skin-vignette{ z-index:4; background:radial-gradient(ellipse 100% 100% at 50% 48%, transparent 52%, rgba(38,25,9,.28) 78%, rgba(26,16,5,.62) 100%); }
.skin-border{ z-index:5; inset:9px; border:double 5px rgba(120,90,45,.55); border-radius:6px; box-shadow:inset 0 0 0 2px rgba(247,245,239,.12); }
.skin-compass{ z-index:6; width:96px; height:96px; left:14px; bottom:calc(env(safe-area-inset-bottom) + 60px); top:auto; right:auto; inset:auto; position:fixed; background-image:url(compass.png?v=1); background-position:center; background-size:contain; background-repeat:no-repeat; opacity:.82; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.maplibregl-ctrl-attrib{ font-size:9px; opacity:.5; }
.searchpin{ width:20px; height:20px; border-radius:50%; background:var(--gold); border:3px solid #fff; box-shadow:0 2px 9px rgba(0,0,0,.45); cursor:pointer; position:relative; }
.searchpin::after{ content:""; position:absolute; inset:-9px; border-radius:50%; border:2px solid var(--gold); animation:spulse 1.6s ease-out infinite; }
@keyframes spulse{ 0%{ transform:scale(.5); opacity:.85; } 100%{ transform:scale(1.7); opacity:0; } }
#balloon{ width:46px; height:46px; pointer-events:none; filter:drop-shadow(0 8px 8px rgba(0,0,0,.35)); transform:translateY(-8px); }
#balloon.bob{ animation:bob 3s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(-8px);} 50%{ transform:translateY(-16px);} }

/* top bar */
.topbar{ position:absolute; top:0; left:0; right:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 12px) 14px 12px; background:linear-gradient(#0d1524d8,transparent); pointer-events:none; }
.brand{ font-family:var(--serif); font-weight:600; font-size:18px; letter-spacing:.14em; color:#fff; text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.brand span{ color:var(--gold); }
.tright{ display:flex; align-items:center; gap:8px; pointer-events:auto; }
.pill{ background:rgba(255,255,255,.94); border:0; border-radius:100px; padding:8px 13px; font-family:var(--sans); font-weight:600; font-size:12.5px; color:var(--ink); display:flex; align-items:center; gap:6px; cursor:pointer; box-shadow:0 3px 12px rgba(0,0,0,.25); }
.pill .ic{ font-size:14px; line-height:1; }
.pill .cnt{ background:var(--gold); color:#fff; border-radius:100px; padding:1px 7px; font-size:11px; }
.pill.fuel .cnt{ background:var(--ink); }
.pill.fuel.low .cnt{ background:#c0603e; }
.fuelnote{ position:absolute; top:calc(env(safe-area-inset-top) + 50px); right:14px; z-index:9; font-family:var(--sans); font-size:10.5px; color:#dfe4ee; background:rgba(28,43,74,.6); padding:3px 9px; border-radius:100px; pointer-events:none; opacity:0; transition:opacity .3s; }
.fuelnote.on{ opacity:1; }

/* ---- destination search ---- */
#searchWrap{ position:absolute; top:calc(env(safe-area-inset-top) + 52px); left:50%; transform:translateX(-50%); z-index:11; width:min(340px, 82vw); pointer-events:auto; }
.searchbar{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.96); border-radius:100px; padding:9px 14px; box-shadow:0 3px 14px rgba(28,43,74,.28); }
.searchbar .mg{ font-size:14px; opacity:.6; }
#searchInput{ flex:1; border:0; outline:0; background:transparent; font-family:var(--sans); font-size:13.5px; color:var(--ink); }
#searchInput::placeholder{ color:#a49c88; }
#searchClear{ display:none; width:20px; height:20px; border:0; border-radius:50%; background:#e7e1d3; color:#8a8577; font-size:13px; cursor:pointer; align-items:center; justify-content:center; }
#searchResults{ margin-top:7px; background:var(--paper); border-radius:14px; box-shadow:0 8px 26px rgba(28,43,74,.28); overflow:hidden; max-height:0; opacity:0; transition:opacity .18s; pointer-events:none; }
#searchResults.on{ max-height:340px; opacity:1; pointer-events:auto; overflow-y:auto; }
.sr-item{ display:flex; align-items:center; gap:10px; padding:10px 13px; cursor:pointer; border-bottom:1px solid var(--line); }
.sr-item:last-child{ border-bottom:0; }
.sr-item:active,.sr-item:hover{ background:#efeadf; }
.sr-item .sr-ic{ font-size:15px; }
.sr-item .sr-tx{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.sr-item .sr-tx b{ font-family:var(--sans); font-weight:600; font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-item .sr-tx i{ font-style:normal; font-size:11px; color:#8a8577; }
.sr-place{ background:#f2ede1; }

.quest{ position:absolute; bottom:calc(env(safe-area-inset-bottom) + 56px); left:14px; z-index:9; pointer-events:none;
  background:rgba(28,43,74,.9); color:#fff; border-radius:100px; padding:6px 14px; font-family:var(--sans); font-size:11.5px; letter-spacing:.02em; box-shadow:0 3px 12px rgba(0,0,0,.3); white-space:nowrap; }
.quest b{ color:var(--gold); }
.scannote{ position:absolute; bottom:calc(env(safe-area-inset-bottom) + 56px); left:50%; transform:translateX(-50%); z-index:9; pointer-events:none;
  background:rgba(28,43,74,.85); color:#f4ecd4; font-family:var(--sans); font-size:11px; letter-spacing:.04em; padding:6px 14px; border-radius:100px; opacity:0; transition:opacity .3s; white-space:nowrap; }
.scannote.on{ opacity:1; }

.toast{ position:absolute; top:46%; left:50%; transform:translate(-50%,-50%) scale(.8); z-index:70; pointer-events:none;
  background:rgba(28,43,74,.96); color:#fff; border-radius:16px; padding:15px 22px; text-align:center; opacity:0; transition:all .4s; max-width:82%; }
.toast.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.toast .big{ font-family:var(--serif); font-size:22px; font-weight:600; } .toast .big b{ color:var(--gold); }
.toast .sm{ font-family:var(--sans); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:#c7cede; margin-top:4px; }

.hint{ position:absolute; bottom:calc(env(safe-area-inset-bottom) + 18px); left:0; right:0; text-align:center; z-index:5; pointer-events:none; }
.hint span{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-size:10.5px; color:#fff; background:rgba(28,43,74,.6); padding:8px 15px; border-radius:100px; }

/* bottom sheet */
.sheet{ position:absolute; left:0; right:0; bottom:0; z-index:40; background:var(--paper); border-radius:22px 22px 0 0; box-shadow:0 -14px 44px rgba(0,0,0,.35); transform:translateY(103%); transition:transform .42s cubic-bezier(.4,0,.2,1); padding-bottom:env(safe-area-inset-bottom); }
.sheet.on{ transform:none; }
.sheet .grab{ width:44px; height:5px; background:var(--line); border-radius:100px; margin:10px auto 2px; }
.sheet .inner{ max-width:600px; margin:0 auto; padding:6px 16px 22px; }
.sheet .close{ position:absolute; top:12px; right:16px; z-index:3; width:32px; height:32px; border-radius:50%; border:0; background:#efeadf; font-size:18px; color:#8a8577; cursor:pointer; }

/* flip reveal card */
.flipwrap{ perspective:1400px; margin-top:4px; }
.flip{ position:relative; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.4,0,.2,1); min-height:200px; }
.flip.flipped{ transform:rotateY(180deg); }
.face{ backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:16px; overflow:hidden; }
.face.back{ position:absolute; inset:0; transform:rotateY(0deg); background:linear-gradient(160deg,#26324e,#141d31); border:1px solid rgba(199,154,62,.4);
  display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 8px 26px rgba(0,0,0,.3); }
.face.back .crest{ font-family:var(--serif); font-size:64px; color:rgba(199,154,62,.85); animation:pulse 1.1s ease-in-out infinite; }
.face.back .fb-sub{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.18em; font-size:10.5px; color:#9fb0cf; margin-top:6px; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.85;} 50%{ transform:scale(1.12); opacity:1;} }
.face.front{ transform:rotateY(180deg); position:relative; background:#fff; border:2px solid var(--common); box-shadow:0 10px 30px rgba(28,43,74,.16); }
.face.front.t-common{ border-color:var(--common); box-shadow:0 8px 26px rgba(107,122,148,.28); }
.face.front.t-rare{ border-color:var(--rare); box-shadow:0 10px 30px rgba(47,125,79,.32); }
.face.front.t-epic{ border-color:var(--epic); box-shadow:0 12px 34px rgba(125,91,190,.38); }
.face.front.t-legendary{ border-color:var(--leg); box-shadow:0 0 0 1px var(--leg),0 14px 40px rgba(199,154,62,.5); }
.ph{ position:relative; aspect-ratio:16/10; background:#e9e5da; }
.ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.ph.locked{ background:linear-gradient(160deg,#2b374f,#1a2338); display:flex; align-items:center; justify-content:center; }
.ph.locked .q{ font-family:var(--serif); font-size:56px; color:rgba(255,255,255,.28); }
.ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 42%, rgba(18,22,34,.78)); }
.ph.locked::after{ display:none; }
.rtag{ position:absolute; top:11px; left:11px; z-index:2; color:#fff; font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:5px 11px; border-radius:100px; }
.rtag.t-common{ background:var(--common);} .rtag.t-rare{ background:var(--rare);} .rtag.t-epic{ background:var(--epic);} .rtag.t-legendary{ background:var(--leg);}
.filmtag{ position:absolute; top:11px; right:11px; z-index:2; background:rgba(255,255,255,.94); color:var(--ink); font-family:var(--sans); font-size:9.5px; font-weight:700; letter-spacing:.05em; padding:5px 10px; border-radius:100px; }
.cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14px 15px; color:#fff; }
.cap h3{ font-family:var(--serif); font-size:23px; font-weight:600; margin:0; line-height:1.04; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.cap .loc{ font-family:var(--sans); font-size:12px; opacity:.92; margin:4px 0 0; }
.lockmsg{ padding:13px 16px 2px; text-align:center; }
.lockmsg p{ font-size:13px; color:#6b6659; line-height:1.5; margin:0 0 3px; }
.nodirect{ font-family:var(--sans); font-size:12px; color:#8a8577; text-align:center; padding:8px 6px 0; font-style:italic; }
.ftag{ position:absolute; top:11px; right:11px; z-index:2; color:#fff; font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:100px; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.ftag.f-vip{ background:linear-gradient(135deg,#caa04a,#9a7a2e); }
.ftag.f-exclusive{ background:linear-gradient(135deg,#7d5bbe,#59409a); }
.ftag.f-gem{ background:linear-gradient(135deg,#2f9d7d,#227a60); }
.promo{ background:#f0f8f2; border:1px solid #cfe8d8; border-radius:10px; padding:9px 12px; margin:10px 2px 0; font-family:var(--sans); font-size:12.5px; color:var(--green); font-weight:600; text-align:center; }
.wikibox{ background:#fbf9f3; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:12px 2px 2px; }
.wikih{ font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:#8a8577; margin-bottom:6px; }
.wikibox p{ font-family:var(--sans); font-size:13px; color:#5b564a; line-height:1.5; margin:0; }
.wikifoot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.wikimore{ font-family:var(--sans); font-size:12px; font-weight:600; color:var(--gold); text-decoration:none; }
.wikisrc{ font-family:var(--sans); font-size:10px; color:#a49c88; }

.chips{ display:flex; flex-wrap:wrap; gap:7px; margin:12px 2px 2px; }
.chip{ display:flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line); border-radius:11px; padding:8px 11px; font-family:var(--sans); font-size:11.5px; color:var(--ink); flex:1 1 auto; }
.chip .ci{ font-size:15px; }
.chip .cbar{ flex:1; height:5px; background:#eae6da; border-radius:100px; overflow:hidden; min-width:44px; }
.chip .cbar i{ display:block; height:100%; background:var(--gold); border-radius:100px; }
.chip.done{ border-color:var(--green); background:#f0f8f2; }
.chip .cn{ font-weight:600; } .chip .cf{ color:#8a8577; font-variant-numeric:tabular-nums; }

.act{ display:flex; gap:9px; padding:13px 2px 2px; }
.btn{ flex:1; text-align:center; font-family:var(--sans); font-weight:600; font-size:12.5px; padding:13px 8px; border-radius:11px; border:0; cursor:pointer; text-decoration:none; display:flex; align-items:center; justify-content:center; }
.btn-gold{ background:var(--gold); color:#fff;} .btn-ghost{ background:#fff; border:1.5px solid var(--line); color:var(--ink);} .btn-green{ background:var(--green); color:#fff;}

/* album drawer */
.drawer{ position:absolute; left:0; right:0; bottom:0; top:0; z-index:50; background:var(--paper); transform:translateY(101%); transition:transform .42s cubic-bezier(.4,0,.2,1); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.drawer.on{ transform:none; }
.drawer .dhead{ position:sticky; top:0; background:linear-gradient(#f7f5ef,#f7f5efe0); padding:calc(env(safe-area-inset-top) + 16px) 18px 12px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); z-index:2; }
.drawer .dhead h2{ font-family:var(--serif); font-size:24px; font-weight:600; color:var(--ink); margin:0; }
.drawer .dhead .sub{ font-family:var(--sans); font-size:11px; letter-spacing:.06em; color:#8a8577; text-transform:uppercase; margin-top:2px; }
.drawer .dclose{ width:34px; height:34px; border-radius:50%; border:0; background:#efeadf; font-size:18px; color:#8a8577; cursor:pointer; }
.drawer .dbody{ max-width:640px; margin:0 auto; padding:16px 16px calc(env(safe-area-inset-bottom) + 30px); }
.album{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:15px 15px 13px; margin-bottom:14px; box-shadow:0 5px 18px rgba(28,43,74,.06); }
.album.complete{ border-color:var(--gold); box-shadow:0 6px 22px rgba(199,154,62,.22); }
.album .ah{ display:flex; align-items:center; gap:11px; }
.album .aic{ font-size:26px; }
.album .an{ font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); line-height:1; }
.album .as{ font-family:var(--sans); font-size:11.5px; color:#8a8577; margin-top:3px; }
.album .apr{ margin-left:auto; text-align:right; font-family:var(--sans); font-weight:600; font-size:13px; color:var(--gold); font-variant-numeric:tabular-nums; }
.slots{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-top:12px; }
.slot{ aspect-ratio:1; border-radius:9px; background:#f0ece1; border:1px dashed #d8d2c2; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:15px; color:#c4bda9; overflow:hidden; position:relative; }
.slot.filled{ background:var(--ink); border:1px solid var(--ink); color:#fff; font-family:var(--sans); font-size:8.5px; font-weight:600; text-align:center; line-height:1.05; padding:3px; }
.slot.filled.leg{ background:linear-gradient(150deg,#caa04a,#a9812f); }
.album .reward{ margin-top:12px; background:#f0f8f2; border:1px solid #cfe8d8; border-radius:10px; padding:9px 12px; font-family:var(--sans); font-size:12px; color:var(--green); display:flex; align-items:center; gap:8px; }
.album .reward b{ color:var(--ink); }

/* ---- social: welcome banner, passport, crew ---- */
.welcome{ position:absolute; top:calc(env(safe-area-inset-top) + 98px); left:50%; transform:translateX(-50%); z-index:12; max-width:min(360px,86vw);
  background:rgba(199,154,62,.97); color:#fff; border-radius:12px; padding:10px 15px; font-family:var(--sans); font-size:12.5px; line-height:1.35;
  box-shadow:0 6px 20px rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:opacity .3s; text-align:center; }
.welcome.on{ opacity:1; }
.passport{ text-align:center; padding:12px 4px 4px; }
.passport .pi{ font-size:42px; }
.passport h3{ font-family:var(--serif); font-size:25px; color:var(--ink); margin:6px 0 4px; }
.passport p{ font-family:var(--sans); font-size:13px; color:#6b6659; margin:0 auto 14px; max-width:340px; line-height:1.5; }
.passport input{ display:block; width:100%; max-width:340px; margin:0 auto 10px; padding:13px 14px; border:1.5px solid var(--line); border-radius:11px;
  font-family:var(--sans); font-size:14px; color:var(--ink); background:#fff; outline:none; }
.passport input:focus{ border-color:var(--gold); }
.passport .btn{ max-width:340px; margin:4px auto 0; }
.crewh{ font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#8a8577; margin:20px 2px 9px; }
.crewrow{ display:flex; justify-content:space-between; align-items:center; background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:11px 13px; margin-bottom:7px; font-family:var(--sans); font-size:13.5px; color:var(--ink); }
.crewrow .cc{ color:var(--gold); font-weight:600; font-variant-numeric:tabular-nums; }
.crewrow.meRow{ border-color:var(--gold); background:#fdf7ea; }
.crewnote{ font-family:var(--sans); font-size:13px; color:#8a8577; text-align:center; padding:14px; }
.invlink{ background:#efeadf; border-radius:9px; padding:10px 12px; font-family:var(--sans); font-size:11.5px; color:#6b6659; word-break:break-all; margin-bottom:12px; }
.sharerow{ display:flex; gap:7px; margin-bottom:12px; flex-wrap:wrap; justify-content:center; }
.sharerow .sbtn{ flex:1 1 auto; min-width:66px; text-decoration:none; text-align:center; font-family:var(--sans); font-weight:600; font-size:11.5px; padding:9px 6px; border-radius:9px; background:#fff; border:1.5px solid var(--line); color:var(--ink); cursor:pointer; }
.sharerow .sbtn:active{ background:#efeadf; }
.linkbtn{ margin-top:8px; background:none; border:0; color:#8a8577; font-family:var(--sans); font-size:12.5px; cursor:pointer; }

/* celebration */
.cele{ position:absolute; inset:0; z-index:80; background:rgba(13,21,36,.82); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .4s; }
.cele.on{ opacity:1; pointer-events:auto; }
.cele .card{ background:var(--paper); border-radius:20px; padding:26px 22px; max-width:320px; text-align:center; transform:scale(.85); transition:transform .45s cubic-bezier(.2,1.3,.5,1); box-shadow:0 20px 60px rgba(0,0,0,.5); }
.cele.on .card{ transform:scale(1); }
.cele .em{ font-size:52px; } .cele h2{ font-family:var(--serif); font-size:26px; color:var(--ink); margin:8px 0 2px; }
.cele p{ font-family:var(--sans); font-size:13px; color:#6b6659; margin:0 0 12px; line-height:1.5; }
.cele .code{ font-family:var(--sans); font-weight:700; letter-spacing:.12em; background:var(--ink); color:#fff; border-radius:10px; padding:11px; font-size:15px; }
.cele .go{ margin-top:14px; background:var(--gold); color:#fff; border:0; border-radius:11px; padding:13px; width:100%; font-family:var(--sans); font-weight:600; font-size:13px; cursor:pointer; }

/* ---- fuel superpowers panel + lucky spin ---- */
.powcard{ max-width:340px; }
.powhead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.powfuel{ font-family:var(--sans); font-weight:700; font-size:14px; color:var(--ink); }
.powx{ width:30px; height:30px; border:0; border-radius:50%; background:#efeadf; font-size:17px; color:#8a8577; cursor:pointer; }
.powrow{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px; margin-bottom:9px; cursor:pointer; text-align:left; }
.powrow:active{ background:#f6f2e8; }
.powic{ font-size:26px; }
.powtx{ flex:1; display:flex; flex-direction:column; line-height:1.25; }
.powtx b{ font-family:var(--sans); font-weight:600; font-size:14px; color:var(--ink); }
.powtx i{ font-style:normal; font-size:11.5px; color:#8a8577; }
.powcost{ font-family:var(--sans); font-weight:700; font-size:12.5px; color:var(--gold); white-space:nowrap; }
.powfoot{ font-family:var(--sans); font-size:11.5px; color:#8a8577; text-align:center; margin-top:6px; }
.spincard{ text-align:center; }
.spinwheel{ font-size:62px; display:inline-block; animation:spin360 .6s linear infinite; }
@keyframes spin360{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
.spinmsg{ font-family:var(--serif); font-size:23px; color:var(--ink); margin-top:14px; } .spinmsg b{ color:var(--gold); }

.loading{ position:absolute; inset:0; z-index:90; background:#0d1524; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#fff; transition:opacity .5s; }
.loading.off{ opacity:0; pointer-events:none; }
.loading .t{ font-family:var(--serif); font-size:30px; letter-spacing:.1em; }
.loading .s{ font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-top:10px; }