/* ══════════════════════════════════════════════════════════
   Abyssal — UI shell
   Deep-water glassmorphism. Everything sits above a full
   bleed WebGL canvas, so panels are translucent + blurred.
   ══════════════════════════════════════════════════════════ */

:root{
  --ink:        #eaf4ff;
  --ink-dim:    #9fb6cf;
  --ink-faint:  #6c839c;
  --glass:      rgba(9, 24, 40, .58);
  --glass-hi:   rgba(22, 46, 70, .62);
  --edge:       rgba(150, 205, 255, .16);
  --edge-hi:    rgba(150, 205, 255, .34);
  --teal:       #35e0d0;
  --teal-deep:  #0f8f8a;
  --gold:       #f6c445;
  --gold-deep:  #b8860b;
  --danger:     #ff6b6b;

  --r-common:    #9fb6cf;
  --r-uncommon:  #5fd98a;
  --r-rare:      #4aa8ff;
  --r-epic:      #b06bff;
  --r-legendary: #ffb03a;
  --r-mythic:    #ff5ea8;

  --shadow: 0 8px 34px rgba(0,0,0,.45);
  --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* The `hidden` attribute is only honoured by the UA stylesheet's
   [hidden]{display:none}, and *any* author `display` declaration outranks
   it — so `#fatal{display:grid}` and `.modal{display:grid}` below were
   silently cancelling it and leaving those panels permanently on screen.
   Restate it as an author rule so `hidden` actually hides things. */
[hidden]{ display:none !important; }

html,body{
  margin:0; height:100%; overflow:hidden;
  background:#03080f; color:var(--ink);
  font-family:var(--font);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}

#gl{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:crosshair; }
#gl.grabbing{ cursor:grabbing; }

.hidden{ display:none !important; }

/* ── focus ────────────────────────────────────────────── */
/* :focus-visible, not :focus — keyboard navigation gets a ring, mouse/touch
   clicks stay quiet. Covers every focusable element by default rather than
   enumerating each custom button class, since the UA default outline is
   barely legible against this dark, blurred glass UI and squares off
   rounded controls. */
:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ── boot ─────────────────────────────────────────────── */
#boot{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:radial-gradient(ellipse at 50% 40%, #0b2740, #03080f 70%);
  transition:opacity .7s ease, visibility .7s;
}
#boot.gone{ opacity:0; visibility:hidden; }
.boot-inner{ text-align:center; }
.boot-logo{
  font-size:clamp(38px,7vw,72px); font-weight:200; letter-spacing:.42em;
  margin-right:-.42em;
  background:linear-gradient(180deg,#dff6ff,#4fbfd6 60%,#1b7089);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.boot-sub{ margin-top:6px; color:var(--ink-faint); letter-spacing:.28em; font-size:11px; text-transform:uppercase; }
.boot-bar{ margin:30px auto 12px; width:min(280px,60vw); height:2px; background:rgba(255,255,255,.09); overflow:hidden; border-radius:2px; }
.boot-bar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--teal-deep),var(--teal)); transition:width .3s ease; }
.boot-msg{ color:var(--ink-faint); font-size:12px; letter-spacing:.05em; }

#fatal{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background:#05101c; padding:24px; overflow-y:auto;
}
.fatal-inner{ max-width:600px; }
.fatal-inner h1{ font-weight:300; letter-spacing:.04em; margin:0 0 14px; font-size:26px; }
.fatal-inner p{ color:var(--ink-dim); line-height:1.65; margin:0 0 12px; }
#fatal-msg{
  color:#ffb4b4; font-family:ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size:13px; background:rgba(255,107,107,.09);
  border:1px solid rgba(255,107,107,.28); border-radius:9px; padding:10px 12px;
  word-break:break-word;
}
#fatal-diag{
  margin:14px 0 0; padding:12px; max-height:230px; overflow:auto;
  background:rgba(255,255,255,.045); border:1px solid var(--edge);
  border-radius:10px; font-size:11px; line-height:1.55; color:var(--ink-faint);
  font-family:ui-monospace, "Cascadia Code", Consolas, monospace;
  white-space:pre-wrap; user-select:text;
}
.fatal-actions{ display:flex; gap:8px; margin-top:14px; }

/* ── generic panel ────────────────────────────────────── */
.panel{
  position:fixed; z-index:20;
  background:var(--glass);
  backdrop-filter:blur(10px) saturate(135%);
  -webkit-backdrop-filter:blur(10px) saturate(135%);
  border:1px solid var(--edge);
  border-radius:14px;
  box-shadow:var(--shadow);
}

button{ font-family:inherit; color:inherit; cursor:pointer; border:none; background:none; }

.btn{
  border-radius:10px; padding:9px 16px; font-size:13px; font-weight:600;
  border:1px solid var(--edge-hi);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  transition:transform .1s ease, filter .15s ease, background .15s;
}
.btn:hover{ filter:brightness(1.25); }
.btn:active{ transform:translateY(1px) scale(.985); }
.btn.sm{ padding:6px 11px; font-size:12px; }
.btn.primary{ background:linear-gradient(180deg,#2ec6bd,#12817d); border-color:#38e3d6; color:#012526; }
.btn.gold{ background:linear-gradient(180deg,#f9d264,#c9930f); border-color:#ffdb7a; color:#3a2500; }
.btn.ghost{ background:rgba(255,255,255,.05); }
.btn.danger{ color:var(--danger); border-color:rgba(255,107,107,.4); }
.btn:disabled{ opacity:.4; cursor:not-allowed; filter:grayscale(.6); }

.x{
  position:absolute; top:10px; right:10px; width:28px; height:28px; line-height:1;
  border-radius:8px; font-size:20px; color:var(--ink-dim);
  display:grid; place-items:center;
}
.x:hover{ background:rgba(255,255,255,.09); color:var(--ink); }

/* ── wallet ───────────────────────────────────────────── */
.wallet{
  top:14px; left:14px; padding:9px 14px;
  display:flex; align-items:center; gap:14px;
}
.cur{ display:flex; align-items:center; gap:7px; font-variant-numeric:tabular-nums; font-weight:650; font-size:15px; }
.cur .ico{ width:19px; height:19px; }
.cur.coins{ color:#ffe08a; }
.cur.pearls{ color:#dbe9ff; }
.cur.bump{ animation:bump .42s cubic-bezier(.2,1.7,.4,1); }
@keyframes bump{ 0%{transform:scale(1)} 35%{transform:scale(1.22)} 100%{transform:scale(1)} }
.sep{ width:1px; height:20px; background:var(--edge); }
.wallet .stat{ color:var(--ink-dim); font-size:13px; font-variant-numeric:tabular-nums; }
.wallet .stat small{ opacity:.6; }

/* ── vitals ───────────────────────────────────────────── */
.vitals{ top:14px; right:14px; padding:11px 13px 8px; width:186px; }
.vrow{ display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.vrow label{ width:50px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.bar{ flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.09); overflow:hidden; }
.bar i{ display:block; height:100%; width:50%; border-radius:3px; background:linear-gradient(90deg,var(--teal-deep),var(--teal)); transition:width .4s ease, background .4s; }
.bar i.warn{ background:linear-gradient(90deg,#c98a2a,#f6c445); }
.bar i.bad { background:linear-gradient(90deg,#a33,#ff6b6b); }
.vfoot{ text-align:right; font-size:11px; color:var(--gold); font-variant-numeric:tabular-nums; padding-top:2px; }

/* ── objective card ───────────────────────────────────── */
/* Bottom-centre, directly above the dock it is telling you to press. */
.quest{
  left:50%; transform:translateX(-50%); bottom:104px;
  width:min(450px, calc(100vw - 28px));
  padding:11px 14px; display:flex; align-items:center; gap:13px;
  border-color:rgba(246,196,69,.30);
  background:linear-gradient(180deg, rgba(44,33,9,.72), rgba(9,24,40,.74));
}
.quest.hidden{ display:none !important; }

.quest-ring{ position:relative; width:44px; height:44px; flex:0 0 auto; }
.quest-ring svg{ width:44px; height:44px; transform:rotate(-90deg); }
.qr-bg{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:3.5; }
.qr-fg{
  fill:none; stroke:var(--gold); stroke-width:3.5; stroke-linecap:round;
  stroke-dasharray:113.1; stroke-dashoffset:113.1; transition:stroke-dashoffset .45s ease;
}
.quest-step{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:14px; font-weight:750; color:var(--gold); font-variant-numeric:tabular-nums;
}

.quest-body{ flex:1; min-width:0; }
.quest-eyebrow{
  font-size:8.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:800; display:flex; gap:6px;
}
.quest-eyebrow span{ color:var(--ink-faint); font-weight:600; letter-spacing:.1em; }
.quest h4{ margin:2px 0 1px; font-size:14px; font-weight:650; line-height:1.2; }
.quest p{ margin:0; font-size:11.5px; color:var(--ink-dim); line-height:1.4; }
.quest-meta{
  flex:0 0 auto; font-size:10.5px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums; text-align:right; max-width:80px; line-height:1.35;
}
.quest.done{ border-color:rgba(53,224,208,.45); }
.quest.done .qr-fg{ stroke:var(--teal); }
.quest.done .quest-step{ color:var(--teal); }

/* ── FTUE pointer ─────────────────────────────────────── */
#ftue-pointer{ position:fixed; z-index:45; pointer-events:none; transform:translate(-50%,-50%); }
.fp-ring{
  position:absolute; left:50%; top:50%; width:62px; height:62px;
  margin:-31px 0 0 -31px; border-radius:50%;
  border:2px solid var(--gold);
  animation:fpPulse 1.5s ease-out infinite;
}
.fp-arrow{
  position:absolute; left:50%; top:26px; transform:translateX(-50%);
  color:var(--gold); font-size:16px; text-shadow:0 2px 8px rgba(0,0,0,.85);
  animation:fpBob 1.1s ease-in-out infinite;
}
@keyframes fpPulse{
  0%{ transform:scale(.6); opacity:.95 }
  70%{ transform:scale(1.18); opacity:0 }
  100%{ opacity:0 }
}
@keyframes fpBob{ 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,5px) } }

/* ── hold-to-grab ring ────────────────────────────────── */
#holdring{ position:fixed; z-index:46; pointer-events:none; width:48px; height:48px; transform:translate(-50%,-50%); }
#holdring svg{ width:48px; height:48px; transform:rotate(-90deg); }
.hr-bg{ fill:rgba(4,14,24,.55); stroke:rgba(255,255,255,.18); stroke-width:3; }
.hr-fg{
  fill:none; stroke:var(--teal); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:125.6; stroke-dashoffset:125.6;
}
.hr-icon{ position:absolute; inset:0; display:grid; place-items:center;
  font-size:17px; color:var(--teal); text-shadow:0 1px 4px #000; }
#holdring.armed .hr-fg{ stroke:var(--gold); }
#holdring.armed .hr-icon{ color:var(--gold); }

@media (max-width:640px){
  .quest{ bottom:92px; padding:9px 11px; gap:9px; }
  .quest-meta{ display:none; }
}

/* ── toasts ───────────────────────────────────────────── */
#toasts{
  position:fixed; z-index:40; left:50%; top:70px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px; pointer-events:none;
}
.toast{
  background:var(--glass-hi); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--edge); border-radius:999px;
  padding:7px 17px; font-size:12.5px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:9px; white-space:nowrap;
  animation:toastIn .32s cubic-bezier(.2,1.4,.4,1);
}
.toast.out{ animation:toastOut .34s ease forwards; }
.toast b{ font-weight:700; }
.toast .tico{ font-size:15px; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(-14px) scale(.94) } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(-10px) scale(.96) } }

/* ── floating score pops ──────────────────────────────── */
#pops{ position:fixed; inset:0; z-index:35; pointer-events:none; overflow:hidden; }
.pop{
  position:absolute; transform:translate(-50%,-50%);
  font-weight:800; font-size:15px; color:var(--gold);
  text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 18px rgba(246,196,69,.5);
  animation:popUp 1.15s cubic-bezier(.15,.85,.35,1) forwards;
  white-space:nowrap;
}
.pop.xp{ color:var(--teal); text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 18px rgba(53,224,208,.45); }
@keyframes popUp{
  0%{ opacity:0; transform:translate(-50%,-40%) scale(.6) }
  18%{ opacity:1; transform:translate(-50%,-58%) scale(1.1) }
  100%{ opacity:0; transform:translate(-50%,-155%) scale(1) }
}

/* ── creature card ────────────────────────────────────── */
.inspector{
  left:14px; top:70px; width:288px; padding:13px 14px 12px;
  max-height:calc(100vh - 190px); overflow-y:auto;
}
.inspector::-webkit-scrollbar{ width:6px; }
.inspector::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:3px; }

.insp-head{ display:flex; gap:11px; align-items:center; }
.insp-portrait{
  width:64px; height:46px; flex:0 0 auto; object-fit:contain;
  border-radius:9px; background:radial-gradient(circle at 50% 60%, rgba(255,255,255,.09), rgba(0,0,0,.25));
  border:1px solid rgba(255,255,255,.08);
}
.insp-id{ min-width:0; }
.insp-head h3{ margin:4px 0 1px; font-size:17px; font-weight:650; line-height:1.15; }
.insp-species{ color:var(--ink-faint); font-size:11px; font-style:italic; }
.insp-rar{
  display:inline-block; font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:800; padding:2px 7px; border-radius:5px; background:rgba(255,255,255,.08);
}

.insp-temper{
  margin:11px 0 0; padding:8px 10px; border-radius:10px;
  background:linear-gradient(180deg, rgba(53,224,208,.11), rgba(53,224,208,.03));
  border:1px solid rgba(53,224,208,.22);
}
.insp-temper .tname{ display:block; font-weight:700; font-size:13px; color:var(--teal); }
.insp-temper .tdesc{ display:block; font-size:11.5px; color:var(--ink-dim); margin-top:2px; line-height:1.45; }

.insp-now{
  margin:9px 0 10px; font-size:12px; color:var(--ink);
  padding:6px 10px; border-radius:8px; background:rgba(255,255,255,.05);
}
.insp-now b{ color:var(--teal); font-weight:650; }

.insp-tabs{ display:flex; gap:3px; margin-bottom:10px; }
.itab{
  flex:1; padding:5px 4px; border-radius:8px; font-size:11px; color:var(--ink-faint);
  transition:.14s; border:1px solid transparent;
}
.itab:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
.itab.active{ background:rgba(53,224,208,.14); color:var(--teal); font-weight:650; }

.insp-pane{ margin-bottom:11px; }

/* trait rows */
.trait{ margin-bottom:9px; }
.trait-top{ display:flex; justify-content:space-between; font-size:11px; margin-bottom:3px; }
.trait-top .tl{ color:var(--ink-dim); }
.trait-top .tv{ color:var(--ink); font-weight:650; }
.trait-track{
  height:6px; border-radius:3px; background:rgba(255,255,255,.08);
  position:relative; overflow:hidden;
}
.trait-track i{
  position:absolute; inset:0 auto 0 0; border-radius:3px;
  background:linear-gradient(90deg, var(--teal-deep), var(--teal));
}
.trait-track i.hot{ background:linear-gradient(90deg,#c9701a,#f6a545); }
.trait-track i.cool{ background:linear-gradient(90deg,#2a5f8a,#5aa8d8); }
.trait-note{ font-size:10.5px; color:var(--ink-faint); margin-top:2px; font-style:italic; }

.insp-facts{ font-size:11.5px; color:var(--ink-dim); line-height:1.8; }
.insp-facts .k{ color:var(--ink-faint); }
.insp-facts .row{ display:flex; justify-content:space-between; gap:8px; }
.insp-facts .row b{ color:var(--ink); font-weight:600; }

.moments{ font-size:11.5px; color:var(--ink-dim); }
.moment{ display:flex; gap:8px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.moment:last-child{ border-bottom:none; }
.moment .mi{ flex:0 0 auto; font-size:14px; line-height:1.3; }
.moment .mt{ line-height:1.45; }
.moment .mw{ display:block; color:var(--ink-faint); font-size:10px; margin-top:1px; }
.moments .empty{ color:var(--ink-faint); font-style:italic; padding:6px 0; }

.insp-actions{ display:flex; gap:6px; }
.insp-actions .btn{ flex:1; padding:6px 4px; }

/* ── dock ─────────────────────────────────────────────── */
.dock{
  position:fixed; z-index:25; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:7px; padding:8px 10px;
  background:var(--glass); backdrop-filter:blur(10px) saturate(135%);
  -webkit-backdrop-filter:blur(10px) saturate(135%);
  border:1px solid var(--edge); border-radius:18px; box-shadow:var(--shadow);
  max-width:calc(100vw - 24px); overflow-x:auto; scrollbar-width:none;
}
.dock::-webkit-scrollbar{ display:none; }
.dock-group{ display:flex; gap:6px; }
.dock-sep{ width:1px; align-self:stretch; background:var(--edge); margin:2px 3px; }

.dockbtn{
  width:60px; padding:7px 4px 6px; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--ink-dim); font-size:10px; letter-spacing:.03em;
  border:1px solid transparent; transition:.15s; position:relative; flex:0 0 auto;
}
.dockbtn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.dockbtn:hover{ background:rgba(255,255,255,.07); color:var(--ink); }
.dockbtn.active{ background:rgba(53,224,208,.14); border-color:rgba(53,224,208,.45); color:var(--teal); }
.dockbtn.locked{ opacity:.38; }
.dockbtn .count{
  position:absolute; top:2px; right:5px; font-size:9.5px; font-weight:800;
  background:rgba(0,0,0,.55); border-radius:6px; padding:1px 4px; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.dockbtn .glyph{ font-size:21px; line-height:22px; }

.hint{
  position:fixed; z-index:20; bottom:88px; left:50%; transform:translateX(-50%);
  font-size:11px; color:var(--ink-faint); letter-spacing:.05em;
  text-shadow:0 1px 6px #000; pointer-events:none; transition:opacity .6s; text-align:center;
}
.hint.fade{ opacity:0; }

/* ── centred UI yields to the drawer ──────────────────
   The shop slides in from the right and would otherwise sit on top of the
   dock and the objective card — exactly the two things you need to read
   while shopping. Everything horizontally centred shifts left by half the
   drawer's width so it stays centred in the space that's left. */
:root{ --drawer-shift: 0px; }

.dock, .quest, #toasts{
  transition:transform .34s cubic-bezier(.3,.9,.3,1);
}
body.shop-open .dock,
body.shop-open .quest,
body.shop-open #toasts{
  transform:translateX(calc(-50% - var(--drawer-shift)));
}

/* ── drawer (shop) ────────────────────────────────────── */
.drawer{
  position:fixed; z-index:60; top:0; right:0; height:100%; width:min(430px,100vw);
  background:rgba(6,18,31,.9); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-left:1px solid var(--edge);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .34s cubic-bezier(.3,.9,.3,1);
  box-shadow:-20px 0 60px rgba(0,0,0,.5);
}
.drawer.open{ transform:none; }
.drawer-head{ padding:16px 18px 10px; border-bottom:1px solid var(--edge); position:relative; }
.drawer-head h2{ margin:0; font-size:19px; font-weight:600; letter-spacing:.02em; }
.drawer-wallet{ margin-top:3px; font-size:12.5px; color:var(--gold); font-variant-numeric:tabular-nums; }
.drawer-wallet span:last-child{ color:#dbe9ff; }

.tabs{ display:flex; gap:3px; padding:9px 12px; border-bottom:1px solid var(--edge); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  padding:6px 13px; border-radius:9px; font-size:12.5px; color:var(--ink-faint);
  white-space:nowrap; transition:.14s;
}
.tab:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
.tab.active{ background:rgba(53,224,208,.15); color:var(--teal); font-weight:650; }

.drawer-body{ flex:1; overflow-y:auto; padding:12px; }
.drawer-body::-webkit-scrollbar{ width:8px; }
.drawer-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.13); border-radius:4px; }

.shop-note{ font-size:11.5px; color:var(--ink-faint); padding:2px 4px 10px; line-height:1.6; }
.shop-group{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin:14px 4px 8px; }

.card{
  display:flex; gap:12px; align-items:center; padding:11px;
  border:1px solid var(--edge); border-radius:13px; margin-bottom:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition:.16s; position:relative; overflow:hidden;
}
.card:hover{ border-color:var(--edge-hi); background:rgba(255,255,255,.06); }
.card.owned::after{
  content:"OWNED"; position:absolute; top:9px; right:11px;
  font-size:8.5px; letter-spacing:.14em; color:var(--teal); font-weight:800;
}
.card .thumb{
  width:60px; height:52px; flex:0 0 auto; border-radius:10px;
  background:radial-gradient(circle at 50% 60%, rgba(255,255,255,.08), rgba(0,0,0,.25));
  display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.07);
}
.card .thumb svg{ width:100%; height:100%; }
.card .thumb .glyph{ font-size:27px; }
.card .body{ flex:1; min-width:0; }
.card .title{ display:flex; align-items:baseline; gap:7px; }
.card .title h4{ margin:0; font-size:14px; font-weight:650; }
.card .rar{ font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; }
.card .desc{ font-size:11.5px; color:var(--ink-dim); line-height:1.5; margin-top:3px; }
.card .tags{ display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
.card .tag{
  font-size:9.5px; padding:2px 6px; border-radius:5px;
  background:rgba(255,255,255,.07); color:var(--ink-faint); letter-spacing:.04em;
}
.card .buy{ flex:0 0 auto; display:flex; flex-direction:column; gap:5px; align-items:stretch; }
.price{
  display:flex; align-items:center; justify-content:center; gap:4px;
  font-weight:750; font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.price.coins{ color:var(--gold); }
.price.pearls{ color:#dbe9ff; }

/* locked rank teaser — shows the ladder without making it browsable */
.rank-locked{
  display:flex; align-items:center; gap:10px; margin:14px 4px 8px;
  padding:9px 11px; border-radius:11px;
  border:1px dashed var(--edge); background:rgba(255,255,255,.02);
}
.rl-lock{ font-size:14px; opacity:.55; }
.rl-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.rl-body b{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.rl-body em{ font-style:normal; font-size:11px; color:var(--ink-faint); }

/* the one thing the current objective wants you to buy */
.card.focus{
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(246,196,69,.14), rgba(255,255,255,.02));
  box-shadow:0 0 0 1px rgba(246,196,69,.25), 0 6px 22px rgba(246,196,69,.14);
}
.card.dimmed{ opacity:.34; }
.card.dimmed:hover{ border-color:var(--edge); background:rgba(255,255,255,.02); }
.focus-flag{
  position:absolute; top:9px; right:11px;
  font-size:8.5px; letter-spacing:.14em; font-weight:800; color:var(--gold);
}

/* rarity colour hooks */
.r-common{ color:var(--r-common) } .r-uncommon{ color:var(--r-uncommon) }
.r-rare{ color:var(--r-rare) }     .r-epic{ color:var(--r-epic) }
.r-legendary{ color:var(--r-legendary) } .r-mythic{ color:var(--r-mythic) }
.bg-common{ background:rgba(159,182,207,.16) } .bg-uncommon{ background:rgba(95,217,138,.16) }
.bg-rare{ background:rgba(74,168,255,.16) }    .bg-epic{ background:rgba(176,107,255,.18) }
.bg-legendary{ background:rgba(255,176,58,.18) } .bg-mythic{ background:rgba(255,94,168,.18) }

/* ── modal ────────────────────────────────────────────── */
.modal{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center;
  background:rgba(2,7,13,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:20px; animation:fadeIn .2s ease;
}
@keyframes fadeIn{ from{opacity:0} }
.modal-card{
  position:relative; width:min(440px,100%); max-height:86vh; overflow-y:auto;
  background:rgba(9,24,40,.96); border:1px solid var(--edge); border-radius:18px;
  padding:22px; box-shadow:var(--shadow);
  animation:cardIn .3s cubic-bezier(.2,1.3,.4,1);
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(16px) scale(.97) } }
.modal-card h2{ margin:0 0 14px; font-size:20px; font-weight:600; }
.modal-card hr{ border:none; border-top:1px solid var(--edge); margin:14px 0; }
.setrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; font-size:13px; }
.setrow label{ color:var(--ink-dim); }
/* In-page dropdown. A native <select> popup is an OS-level window; on
   Windows it drops the page out of Chromium's fast presentation path and
   every hover repaint then re-blurs the backdrop-filter panels underneath.
   Rendering the list ourselves keeps it all on the compositor's happy path
   — and makes it styleable, which the native popup never was. */
.picker{ position:relative; min-width:130px; }
.picker-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:rgba(255,255,255,.07); border:1px solid var(--edge); color:var(--ink);
  border-radius:8px; padding:5px 9px; font-size:12.5px;
}
.picker-btn:hover{ background:rgba(255,255,255,.12); }
.picker-btn i{ font-style:normal; color:var(--ink-faint); font-size:10px; }
.picker-list{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:5;
  background:#0d1f30; border:1px solid var(--edge-hi); border-radius:9px;
  overflow:hidden; box-shadow:0 10px 28px rgba(0,0,0,.55);
}
.picker-list button{
  display:block; width:100%; text-align:left; padding:7px 10px;
  font-size:12.5px; color:var(--ink);
}
.picker-list button:hover{ background:rgba(53,224,208,.16); color:var(--teal); }
.picker-list button.sel{ color:var(--teal); font-weight:650; }

.setrow select, .setrow input[type=text]{
  background:rgba(255,255,255,.07); border:1px solid var(--edge); color:var(--ink);
  border-radius:8px; padding:5px 9px; font-family:inherit; font-size:12.5px; outline:none; min-width:130px;
  /* The popup list is drawn by the OS and does NOT inherit these colours —
     it defaults to a white sheet, which made white option text invisible. */
  color-scheme: dark;
}
.setrow select option{ background:#0d1f30; color:var(--ink); }
.setrow select:focus-visible, .setrow input[type=text]:focus-visible{
  outline: 2px solid var(--teal); outline-offset: 1px;
}
.setrow .val{
  min-width:52px; text-align:right; color:var(--teal);
  font-variant-numeric:tabular-nums; font-size:12px;
}
.setrow .withval{ display:flex; align-items:center; gap:8px; }
.setrow input[type=range]{ width:150px; accent-color:var(--teal); }
.setrow input[type=checkbox]{ width:17px; height:17px; accent-color:var(--teal); cursor:pointer; }
.modal-actions{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.modal-actions .btn{ flex:1; min-width:120px; }
.fineprint{ font-size:10.5px; color:var(--ink-faint); line-height:1.6; margin:14px 0 0; }

/* ── crate ────────────────────────────────────────────── */
.crate-desc{ font-size:12.5px; color:var(--ink-dim); line-height:1.6; margin:0 0 12px; }
.crate-odds{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px; }
.odd{ font-size:10px; padding:3px 8px; border-radius:6px; background:rgba(255,255,255,.06); letter-spacing:.05em; }
.crate-stage{
  min-height:150px; border-radius:14px; border:1px dashed var(--edge);
  display:grid; place-items:center; text-align:center; padding:16px;
  background:radial-gradient(ellipse at 50% 60%, rgba(53,224,208,.07), transparent 70%);
}
.crate-stage .reveal{ animation:reveal .7s cubic-bezier(.2,1.5,.4,1); }
@keyframes reveal{ 0%{opacity:0; transform:scale(.4) rotate(-16deg)} 60%{transform:scale(1.14) rotate(4deg)} 100%{opacity:1; transform:none} }
.crate-stage .rname{ font-size:22px; font-weight:700; margin:8px 0 2px; }
.crate-stage .rrar{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; font-weight:800; }
.crate-stage .rsvg{ width:120px; height:80px; }
.crate-stage .idle{ color:var(--ink-faint); font-size:12.5px; }

#fps{
  position:fixed; z-index:90; bottom:6px; left:8px; font-size:11px;
  color:var(--teal); font-variant-numeric:tabular-nums;
  text-shadow:0 1px 4px #000; pointer-events:none;
}

/* ── mobile ───────────────────────────────────────────── */
@media (max-width:640px){
  .vitals{ width:150px; padding:9px 10px 6px; }
  .vrow label{ width:40px; font-size:10px; }
  .inspector{ top:auto; bottom:96px; left:8px; width:calc(100vw - 16px); max-width:290px; }
  .dockbtn{ width:54px; font-size:9px; }
  .hint{ display:none; }
  .wallet{ padding:7px 11px; gap:10px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Journal — a book. Sections on the spine, one page at a time.

   The collection views exist to make *absence* legible: an unowned species
   is drawn as a silhouette with its rarity and blurb intact, never as an
   empty slot, so the size of what is left is visible at a glance.
   ══════════════════════════════════════════════════════════════════════ */

#journal .book {
  display: flex; width: min(1020px, 94vw); height: min(680px, 88vh);
  border-radius: 16px; overflow: hidden; position: relative;
  background: linear-gradient(160deg, #16212f, #0e1620);
  border: 1px solid rgba(150, 190, 230, .16);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}
#journal .x { position: absolute; top: 10px; right: 12px; z-index: 3; }

.book-spine {
  width: 176px; flex: 0 0 176px; display: flex; flex-direction: column;
  padding: 18px 12px 12px; gap: 4px;
  background: linear-gradient(180deg, rgba(28, 44, 62, .95), rgba(16, 26, 38, .95));
  border-right: 1px solid rgba(150, 190, 230, .14);
}
.book-title {
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: #7f9dc0; margin: 0 0 12px 6px;
}
.book-tabs { display: flex; flex-direction: column; gap: 2px; }
.btab {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: #b9cde3; font: inherit; font-size: 14px;
  text-align: left; transition: background .13s, color .13s;
}
.btab i { font-style: normal; font-size: 15px; opacity: .85; }
.btab:hover { background: rgba(120, 170, 220, .10); }
.btab.active { background: rgba(90, 150, 220, .20); color: #eaf3ff; }
.book-foot {
  margin-top: auto; padding: 10px 8px 4px; font-size: 12px; line-height: 1.5;
  color: #6f8aa8; border-top: 1px solid rgba(150, 190, 230, .12);
}

.book-page { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.book-head { padding: 20px 24px 12px; border-bottom: 1px solid rgba(150, 190, 230, .12); }
.book-head h2 { margin: 0; font-size: 21px; letter-spacing: .01em; }
.book-head p { margin: 4px 0 0; font-size: 13px; color: #86a0bd; }
.book-body { flex: 1; overflow-y: auto; padding: 16px 24px 24px; }

/* ── shared entry grid ── */
.jgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; }
.jgroup {
  grid-column: 1 / -1; margin: 14px 0 2px; font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #7f9dc0;
}
.jgroup:first-child { margin-top: 0; }

.jcard {
  display: flex; gap: 10px; align-items: center; padding: 9px 10px;
  border-radius: 11px; background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(150, 190, 230, .11);
}
.jcard.locked { opacity: .58; }
.jcard .jthumb {
  width: 56px; height: 40px; flex: 0 0 56px; border-radius: 7px;
  background: rgba(0, 0, 0, .22); display: grid; place-items: center; overflow: hidden;
}
.jcard .jthumb img { width: 100%; height: 100%; object-fit: contain; }
/* An undiscovered species shows its outline, not a blank tile. */
.jcard.locked .jthumb img { filter: brightness(0) saturate(0) opacity(.42); }
.jcard .jmeta { min-width: 0; flex: 1; }
.jcard .jname {
  font-size: 14px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.jcard .jsub {
  font-size: 11.5px; color: #86a0bd; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jcard .jtag { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.jcard .jcount {
  font-size: 12px; color: #9fc7ee; background: rgba(90, 150, 220, .16);
  border-radius: 20px; padding: 2px 8px; flex: 0 0 auto;
}

/* ── residents ── */
.jres { cursor: pointer; transition: background .13s, border-color .13s; }
.jres:hover { background: rgba(120, 170, 220, .11); border-color: rgba(150, 190, 230, .24); }

/* ── goals ── */
.goal { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .035);
        border: 1px solid rgba(150, 190, 230, .11); margin-bottom: 9px; }
.goal-top { display: flex; align-items: baseline; gap: 10px; }
.goal-name { font-size: 14.5px; font-weight: 600; flex: 1; }
.goal-tier { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #7f9dc0; }
.goal-desc { font-size: 12.5px; color: #86a0bd; margin: 3px 0 8px; }
.goal-bar { height: 6px; border-radius: 4px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.goal-bar i { display: block; height: 100%; border-radius: 4px;
              background: linear-gradient(90deg, #3d8fe0, #63c8ff); transition: width .4s; }
.goal-foot { display: flex; justify-content: space-between; margin-top: 6px;
             font-size: 11.5px; color: #7f9dc0; }
.goal.done .goal-bar i { background: linear-gradient(90deg, #35b57a, #6fe0a8); }
.goal.mystery .goal-name { color: #6f8aa8; letter-spacing: .18em; }

.jempty { color: #7f9dc0; font-size: 13.5px; padding: 26px 4px; text-align: center; }