/* ============================================================================
 *  KAMPUNG BUGS — style.css
 *  Dark tropical UI: deep canopy greens, gold highlights, Singapore red accents.
 * ==========================================================================*/

:root{
  --bg:      #0a1311;
  --bg2:     #0e1a17;
  --panel:   #132320;
  --panel2:  #172b26;
  --raise:   #1d3630;
  --line:    rgba(255,255,255,.085);
  --line2:   rgba(255,255,255,.16);
  --text:    #e8f2ee;
  --dim:     #8ba69d;
  --dimmer:  #64807a;
  --accent:  #f3b64a;
  --accent2: #ffd88a;
  --hot:     #e2574c;
  --good:    #5fd08a;
  --bad:     #ef6a5f;
  --mid:     #f0b429;
  --sea:     #08222c;
  --lock:    #47605a;
  --radius:  14px;
  --radius-s: 9px;
  --shadow:  0 14px 34px rgba(0,0,0,.42);
  --font:    'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* The layout column, in one place. #view is --shell-max wide and pads itself
     by --shell-gutter, so a PANEL is --shell-max minus twice the gutter. The
     sticky bars above it size to that panel width via --shell-w, which is why
     they all end on the same vertical line at any viewport. */
  --shell-max:    1440px;
  --shell-gutter: clamp(14px, 2.6vw, 26px);
  --shell-w:      calc(var(--shell-max) - 2 * var(--shell-gutter));
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(1100px 620px at 12% -12%, rgba(95,208,138,.09), transparent 60%),
    radial-gradient(900px 520px at 92% 0%, rgba(243,182,74,.08), transparent 62%),
    var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3,h4{ margin:0 0 .4em; line-height:1.2; font-weight:700; letter-spacing:-.01em; }
h2{ font-size:1.45rem; } h3{ font-size:1.06rem; } h4{ font-size:1rem; }
p{ margin:0 0 .7em; }
em{ font-style:italic; }
a{ color:var(--accent); }
.dim{ color:var(--dimmer); }
.money{ color:var(--accent2); font-variant-numeric:tabular-nums; }
.warn{ color:var(--bad); }
.ok{ color:var(--good); }
kbd{
  font:600 10px/1 var(--font); background:rgba(255,255,255,.08);
  border:1px solid var(--line); border-radius:4px; padding:2px 4px; color:var(--dim);
}
.hint{ font-weight:400; font-size:.82rem; color:var(--dimmer); }
.mini-h{ font-size:.76rem; text-transform:uppercase; letter-spacing:.11em;
  color:var(--dimmer); margin:1.1rem 0 .5rem; font-weight:600; }

/* ---------------------------------------------------------------- HEADER */
#top{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  width:calc(100% - 2 * var(--shell-gutter));
  max-width:var(--shell-w);
  margin:0 auto;
  padding:11px 0;
  background:linear-gradient(180deg, rgba(10,19,17,.97), rgba(10,19,17,.86));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; flex:0 0 auto; }
.brand-mark{
  display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  background:linear-gradient(150deg, var(--hot), #b8332b);
  color:#fff; box-shadow:0 6px 16px rgba(226,87,76,.35);
}
.brand-text b{ display:block; font-size:1.12rem; font-weight:800; letter-spacing:-.02em; }
.brand-text i{ display:block; font-size:.72rem; color:var(--dim); font-style:normal;
  text-transform:uppercase; letter-spacing:.13em; }

.topstats{ display:flex; gap:clamp(10px,2vw,22px); align-items:center; flex-wrap:wrap; flex:1 1 auto; }
.tstat{ display:flex; flex-direction:column; min-width:64px; }
.tstat.wide{ min-width:210px; flex:1 1 200px; }
.tlabel{ font-size:.66rem; text-transform:uppercase; letter-spacing:.11em; color:var(--dimmer); font-weight:600; }
.tval{ font-size:.98rem; font-weight:700; }
.rankbar{ height:6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:5px; }
.rankbar i{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--accent), var(--accent2)); transition:width .5s ease; }
.help-btn{ flex:0 0 auto; }

/* ------------------------------------------------------------- PLACE BAR */
.placebar{
  position:sticky; top:66px; z-index:35;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  width:calc(100% - 2 * var(--shell-gutter));
  max-width:var(--shell-w);
  margin:0 auto;
  /* The horizontal padding is .panel's, exactly: this bar sits directly on
     top of the location panel, so its dot and its clock line up with that
     panel's own heading and text rather than running out to the bar's
     edges with nothing either side of them. */
  padding:8px clamp(14px,2vw,20px);
  background:rgba(19,35,32,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); font-size:.86rem;
}
.place-dot{ width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,.08); }
.place-name{ font-weight:700; }
.place-region{ color:var(--dim); }
.place-clock,.place-rain{ display:inline-flex; align-items:center; gap:6px; color:var(--dim); margin-left:auto; }
.place-rain{ color:#7fc4e8; margin-left:0; }
.place-clock .ui-svg,.place-rain .ui-svg{ opacity:.9; }

/* ------------------------------------------------------------------- NAV */
#nav{
  position:sticky; top:104px; z-index:30;
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
  /* Sized to the panel, like #top and .placebar — see --shell-w in :root. */
  width:calc(100% - 2 * var(--shell-gutter));
  max-width:var(--shell-w);
  margin:0 auto;
  padding:8px 0;
  background:rgba(10,19,17,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
#nav::-webkit-scrollbar{ display:none; }
.navbtn{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  padding:8px 15px; border-radius:99px; border:1px solid transparent;
  background:transparent; color:var(--dim); font:600 .9rem/1 var(--font);
  cursor:pointer; transition:.16s;
}
.navbtn:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.navbtn.is-on{ color:#12211d; background:linear-gradient(140deg,var(--accent2),var(--accent));
  border-color:transparent; box-shadow:0 4px 14px rgba(243,182,74,.24); }
.navbtn .ui-svg{ flex:0 0 auto; opacity:.85; }
.navbtn:hover .ui-svg{ opacity:1; }
.navbtn.is-on .ui-svg{ opacity:1; }

/* ------------------------------------------------------------------ MAIN */
#view{ padding:var(--shell-gutter); max-width:var(--shell-max); margin:0 auto; }
#foot{ max-width:var(--shell-max); margin:0 auto; padding:8px var(--shell-gutter) 40px;
  color:var(--dimmer); font-size:.76rem; line-height:1.6; }

.panel{
  background:linear-gradient(170deg, var(--panel), var(--bg2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(14px,2vw,20px); margin-bottom:16px; box-shadow:var(--shadow);
}
.panel h3{ display:flex; align-items:center; gap:8px; }
.panel h3 .ui-svg,.panel h2 .ui-svg{ color:var(--accent); flex:0 0 auto; }
.blurb{ color:var(--dim); max-width:78ch; }
.loc-sub{ color:var(--dimmer); font-size:.86rem; margin:0; }

/* --------------------------------------------------------------- BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; border-radius:var(--radius-s);
  border:1px solid var(--line2); background:var(--raise); color:var(--text);
  font:600 .88rem/1 var(--font); cursor:pointer; transition:.16s;
}
.btn:hover:not(:disabled){ background:#26443c; transform:translateY(-1px); }
.btn:disabled{ opacity:.42; cursor:not-allowed; }
.btn.primary{ background:linear-gradient(140deg,var(--accent2),var(--accent));
  color:#1a1305; border-color:transparent; font-weight:700; }
.btn.primary:hover:not(:disabled){ filter:brightness(1.07); }
.btn.ghost{ background:transparent; border-color:var(--line2); color:var(--dim); }
.btn.ghost:hover:not(:disabled){ color:var(--text); }
.btn.danger{ background:linear-gradient(140deg,#e2574c,#b8332b); border-color:transparent; color:#fff; }
.btn.small{ padding:7px 12px; font-size:.82rem; }
.btn.tiny{ padding:5px 10px; font-size:.76rem; border-radius:7px; }
.btn.big{ padding:13px 24px; font-size:1rem; width:100%; margin-top:12px; }
.btn.ghost.is-on{ color:#12211d; background:var(--accent); border-color:transparent; }

/* ------------------------------------------------------------------ CAMP */
/* The shutter, full width, at the top of the screen. .loc-panel and
   .loc-head are gone with the card that used to be here -- .loc-sub is
   not, the supermarket and the profile still use it. */
.shot-hero{ margin-bottom:16px; }
.shot-hero .shutter{ margin-bottom:0; padding:30px 18px; }
.shot-hero .shutter-face b{ font-size:1.3rem; }
.shot-hero .shutter-face i{ font-size:.86rem; }
@media(max-width:520px){
  .shot-hero .shutter{ padding:22px 14px; }
  .shot-hero .shutter-face b{ font-size:1.14rem; }
}

/* align-items:start rather than the default stretch. The shot log caps at
   520px and the setup panel is taller than that, so a stretched right
   column spent the difference on empty panel between the log and the bait
   profile — more of it now the shutter has left that column. Let it end
   where its content ends. */
.camp-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:16px; align-items:start; }
@media(max-width:940px){ .camp-grid{ grid-template-columns:1fr; } }

/* ------------------------------------------------------- SETUP PICTURE */
/* The four components standing in the ground you are on. It is 320x148 and
   sliced rather than letterboxed, so a wide panel crops the sky instead of
   growing black bars. */
.setup-scene{ position:relative; margin-bottom:12px; border-radius:var(--radius-s);
  overflow:hidden; border:1px solid var(--line); background:#0a1311; }
.setup-scene-svg{ display:block; width:100%; height:clamp(128px,17vw,164px); }
.setup-scene-cap{ position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:7px; padding:14px 11px 7px;
  font-size:.76rem; color:var(--text);
  background:linear-gradient(180deg, transparent, rgba(4,10,9,.82)); }
.setup-scene-cap .ui-svg{ color:var(--accent2); flex:0 0 auto; }
.setup-scene-cap b{ font-weight:700; }
.setup-scene-cap i{ font-style:normal; color:var(--dim); font-size:.72rem; }

/* ---------------------------------------------------------- SETUP SLOTS */
/* Four buttons, not four dropdowns. The icon is the affordance: press it
   and the picker opens with the artwork and the numbers. What stays on the
   tile is only what you need to read at a glance -- which one is fitted,
   and how many are left. */
.slots{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
@media(max-width:820px){ .slots{ grid-template-columns:1fr 1fr; } }
.slot{
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  background:rgba(0,0,0,.24); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:10px 8px 9px; cursor:pointer; font-family:var(--font); color:var(--text);
  transition:.16s;
}
.slot:hover{ border-color:var(--accent); background:rgba(243,182,74,.07); transform:translateY(-1px); }
.slot:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.slot-empty{ border-color:rgba(239,106,95,.5); }
.slot-empty:hover{ border-color:var(--bad); background:rgba(239,106,95,.07); }
.slot-label{ display:flex; align-items:center; gap:5px; font-size:.64rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.11em; color:var(--dimmer); }
.slot-label .ui-svg{ color:var(--accent); }
.slot-icon{ display:grid; place-items:center; width:52px; height:52px; border-radius:12px;
  background:rgba(0,0,0,.3); border:1px solid var(--line); transition:.16s; }
.slot:hover .slot-icon{ border-color:rgba(243,182,74,.45); }
.slot-none .slot-icon{ color:var(--dimmer); border-style:dashed; }
.slot-name{ font-size:.82rem; font-weight:600; line-height:1.25; }
.slot-none .slot-name{ color:var(--dimmer); font-weight:500; }
.slot small{ display:block; font-size:.71rem; color:var(--dimmer); }
.slot .typebadge{ font-size:.64rem; padding:2px 7px; }

/* --------------------------------------------------------- GEAR PICKER */
.gpicklist{ display:grid; gap:7px; max-height:min(56vh,440px); overflow-y:auto;
  margin-bottom:12px; padding-right:2px; }
.gpick{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center;
  width:100%; text-align:left; padding:11px 13px; border-radius:var(--radius-s);
  border:1px solid var(--line); background:rgba(0,0,0,.22); color:var(--text);
  font-family:var(--font); cursor:pointer; transition:.16s;
}
.gpick:hover{ border-color:var(--accent); background:rgba(243,182,74,.08); }
.gpick:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.gpick.is-on{ border-color:var(--good); background:rgba(95,208,138,.08); }
.gpick-art{ display:grid; place-items:center; width:50px; height:50px; border-radius:11px;
  background:rgba(0,0,0,.3); border:1px solid var(--line); flex:0 0 auto; color:var(--dimmer); }
.gpick-body{ min-width:0; display:grid; gap:5px; }
.gpick-body b{ font-size:.94rem; }
.gpick-body .qty{ color:var(--dimmer); font-weight:500; font-size:.8rem; }
.gpick-body i{ font-style:normal; font-size:.76rem; color:var(--dimmer); line-height:1.45; }
.gpick-state{ font-size:.66rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--dimmer); white-space:nowrap; }
.gpick.is-on .gpick-state{ color:var(--good); }
.gpick:hover .gpick-state{ color:var(--accent); }
.gpick-foot{ font-size:.78rem; margin:0; }
@media(max-width:520px){
  .gpick{ grid-template-columns:auto minmax(0,1fr); }
  .gpick-state{ grid-column:2; }
}

.setup-stats,.statgrid{ display:grid; gap:2px; }

/* ------------------------------------------------- SETUP BREAKDOWNS */
/* A <details> per figure. The summary is the row that used to be there --
   same three columns, same rhythm -- so the panel reads identically until
   one is opened. */
.statbd{ border-bottom:1px dashed var(--line); }
.statbd > summary{
  display:flex; align-items:baseline; gap:8px; padding:7px 0;
  cursor:pointer; list-style:none; border-radius:6px;
}
.statbd > summary::-webkit-details-marker{ display:none; }
.statbd > summary:hover .bd-name{ color:var(--text); }
.statbd > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.bd-name{ color:var(--dim); font-size:.85rem; flex:1 1 auto; transition:color .14s; }
.statbd > summary > b{ font-variant-numeric:tabular-nums; }
.statbd > summary > i{ font-style:normal; font-size:.74rem; color:var(--dimmer); }
.bd-caret{ display:inline-flex; color:var(--dimmer); flex:0 0 auto;
  transition:transform .16s, color .16s; }
.statbd[open] > summary .bd-caret{ transform:rotate(180deg); color:var(--accent); }
.statbd[open] > summary .bd-name{ color:var(--text); font-weight:600; }

.bdbody{ padding:2px 0 12px 2px; display:grid; gap:1px; }
.bdrow{ display:flex; align-items:baseline; gap:10px; padding:5px 9px;
  border-radius:6px; font-size:.8rem; color:var(--dim);
  background:rgba(0,0,0,.18); }
.bdrow span{ flex:1 1 auto; min-width:0; }
.bdrow b{ font-variant-numeric:tabular-nums; color:var(--text); }
/* The line the ones above add up to. */
.bdrow.is-total{ background:rgba(243,182,74,.09); color:var(--text); font-weight:600; }
.bdrow.is-total b{ color:var(--accent2); }
.bdsub{ margin:10px 0 3px; font-size:.68rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--dimmer); }
.bdnote{ margin:0 0 8px; font-size:.78rem; line-height:1.5; color:var(--dimmer);
  max-width:56ch; }
@media (prefers-reduced-motion:reduce){ .bd-caret{ transition:none; } }
.statgrid{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2px 18px; }
.statrow{ display:flex; align-items:baseline; gap:8px; padding:6px 0; border-bottom:1px dashed var(--line); }
.statrow span{ color:var(--dim); font-size:.85rem; flex:1 1 auto; }
.statrow b{ font-variant-numeric:tabular-nums; }
.statrow i{ font-style:normal; font-size:.74rem; color:var(--dimmer); }

.typebadge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px;
  background:color-mix(in srgb, var(--tc) 18%, transparent); color:var(--tc);
  border:1px solid color-mix(in srgb, var(--tc) 40%, transparent);
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }

.effchart{ display:grid; gap:5px; }
.effrow{ display:grid; grid-template-columns:150px 1fr 42px; align-items:center; gap:9px; font-size:.8rem; }
.effname{ display:flex; align-items:center; gap:6px; color:var(--dim); }
.effname .bug-svg{ color:var(--fc); flex:0 0 auto; }
.effbar{ height:7px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; }
.effbar i{ display:block; height:100%; border-radius:99px; opacity:.85; transition:width .35s ease; }
.effrow b{ text-align:right; font-variant-numeric:tabular-nums; font-size:.78rem; }

/* ------------------------------------------------------------------ GONG */
.hunt-panel{ display:flex; flex-direction:column; }
.gong{
  position:relative; display:block; width:100%; border:0; cursor:pointer;
  padding:26px 18px; border-radius:var(--radius);
  background:radial-gradient(circle at 50% 34%, #2c4d43, #16302a 70%);
  border:1px solid var(--line2); color:var(--text); margin-bottom:14px;
  transition:.2s; overflow:hidden;
}
.gong:hover:not(:disabled){ border-color:var(--accent); transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(243,182,74,.16); }
.gong.is-disabled,.gong:disabled{ opacity:.55; cursor:not-allowed; }
.gong-ring{
  position:absolute; inset:50% auto auto 50%; width:110px; height:110px; margin:-55px 0 0 -55px;
  border-radius:50%; border:2px solid rgba(243,182,74,.4); opacity:0; pointer-events:none;
}
.gong.is-hunting .gong-ring{ animation:ripple 820ms ease-out 2; }
.gong.is-hunting{ animation:shake 220ms ease-in-out 3; }
@keyframes ripple{ 0%{ transform:scale(.5); opacity:.85; } 100%{ transform:scale(2.6); opacity:0; } }
@keyframes shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); }
  75%{ transform:translateX(4px); } }
.gong-face{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; }
.gong-face .ui-svg{ color:var(--accent); }
.gong-face b{ font-size:1.16rem; font-weight:800; letter-spacing:.05em; }
.gong-face i{ font-style:normal; font-size:.8rem; color:var(--dim); }

/* ---------------------------------------------------------------- RESULT */
#resultSlot{ flex:1 1 auto; display:flex; flex-direction:column; min-height:150px; }
.result{ border-radius:var(--radius); border:1px solid var(--line); padding:16px;
  background:rgba(0,0,0,.22); flex:1 1 auto; }
.baitprofile{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.baitprofile.empty{ color:var(--bad); font-size:.82rem; }
.bp-label{ display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.11em;
  color:var(--dimmer); font-weight:700; margin-bottom:7px; }
.lurepill.muted{ color:var(--dimmer); background:rgba(255,255,255,.04); border-color:var(--line); }
.result.idle{ display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:8px; color:var(--dimmer); justify-content:center; }
.idle-art{ color:rgba(243,182,74,.35); }
.result.waiting{ display:flex; flex-direction:column; align-items:center; gap:12px;
  justify-content:center; color:var(--dim); }
.waitdots{ display:flex; gap:7px; }
.waitdots i{ width:9px; height:9px; border-radius:50%; background:var(--accent);
  animation:bounce 1s infinite ease-in-out; }
.waitdots i:nth-child(2){ animation-delay:.15s; } .waitdots i:nth-child(3){ animation-delay:.3s; }
@keyframes bounce{ 0%,80%,100%{ transform:translateY(0); opacity:.4; } 40%{ transform:translateY(-8px); opacity:1; } }

.result.catch,.result.escape{ display:flex; gap:16px; align-items:flex-start;
  border-color:color-mix(in srgb, var(--fc) 42%, transparent);
  background:linear-gradient(140deg, color-mix(in srgb, var(--fc) 13%, transparent), rgba(0,0,0,.25)); }

/* A MISS IS RED. Both ways of not getting the frame -- something broke
   frame, or nothing came at all -- used to be told in the family's own
   colour, which is the colour of a catch: at a glance the log read as a
   run of wins. The bug art keeps its family colour, because that is the
   animal; everything the card says about the OUTCOME goes red. */
.result.escape,.result.empty{
  border-color:rgba(239,106,95,.5);
  background:linear-gradient(140deg, rgba(239,106,95,.13), rgba(0,0,0,.25)); }
.result.escape .res-tag{ background:var(--bad); color:#fff; }
.result.escape .res-body h4{ color:var(--bad); }
.result.escape p,.result.empty p{ color:var(--dim); }
.result.empty h4{ color:var(--bad); }
/* The saturate() that used to carry "this one got away" is gone -- it also
   drained the red, and the border and tag say it more plainly. */
.res-bug{ color:var(--fc); flex:0 0 auto; }
.res-body{ min-width:0; }
.res-tag{ display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; padding:3px 8px; border-radius:5px;
  background:var(--fc); color:#0e1a17; margin-bottom:6px; }
.res-body h4{ font-size:1.2rem; margin-bottom:2px; }
.res-body em{ display:block; color:var(--dimmer); font-size:.82rem; margin-bottom:8px; }
.res-nums{ display:flex; gap:14px; flex-wrap:wrap; font-weight:700; margin-bottom:8px; }
.res-nums span:first-child{ color:var(--accent2); }
.res-loot{ display:flex; flex-wrap:wrap; gap:6px; }
.lootpill{ font-size:.74rem; padding:3px 9px; border-radius:99px;
  background:rgba(255,255,255,.07); border:1px solid var(--line); color:var(--dim); }
.res-promo{ margin-top:10px; font-weight:700; color:var(--accent2); }
.pop{ animation:pop .38s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }

/* ---------------------------------------------------------------- TABLES */
.tablewrap{ overflow-x:auto; border-radius:var(--radius-s); border:1px solid var(--line); }
.dex-table{ width:100%; border-collapse:collapse; font-size:.86rem; min-width:660px; }
.dex-table th{ text-align:left; padding:9px 11px; background:rgba(0,0,0,.3);
  font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--dimmer);
  border-bottom:1px solid var(--line); font-weight:700; white-space:nowrap; }
.dex-table td{ padding:8px 11px; border-bottom:1px solid var(--line); vertical-align:middle; }
.dex-table tr:last-child td{ border-bottom:0; }
.ins-row{ cursor:pointer; transition:background .14s; }
.ins-row:hover{ background:rgba(255,255,255,.045); }
.c-bug{ width:34px; }
.c-name b{ display:block; font-weight:600; }
.c-name em{ display:block; font-size:.74rem; color:var(--dimmer); }
.c-num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bugchip{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px;
  color:var(--fc); background:color-mix(in srgb, var(--fc) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--fc) 32%, transparent); }
.rate{ font-weight:700; padding:2px 7px; border-radius:6px; font-size:.8rem; }
.r-good{ color:var(--good); background:rgba(95,208,138,.13); }
.r-mid{ color:var(--mid); background:rgba(240,180,41,.13); }
.r-bad{ color:var(--bad); background:rgba(239,106,95,.13); }

/* --------------------------------------------------------------- JOURNAL */
.journal{ max-height:330px; overflow-y:auto; display:grid; gap:1px; }
.jentry{ display:grid; grid-template-columns:78px 168px 1fr; gap:10px; align-items:baseline;
  padding:7px 9px; border-radius:7px; font-size:.83rem; border-left:3px solid transparent; }
.jentry:nth-child(odd){ background:rgba(255,255,255,.028); }
.jtime{ color:var(--dimmer); font-size:.72rem; font-variant-numeric:tabular-nums; }
.jplace{ color:var(--dim); font-size:.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.j-catch{ border-left-color:var(--good); }
.j-escape{ border-left-color:var(--bad); }
.j-rank{ border-left-color:var(--accent); }
.j-travel{ border-left-color:#57a7d8; }
.j-shop,.j-craft{ border-left-color:#b189d8; }
.j-empty,.j-warn{ color:var(--dim); }
.j-new{ display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.12em;
  background:var(--accent); color:#1a1305; padding:1px 6px; border-radius:4px; margin-right:5px; }
@media(max-width:700px){ .jentry{ grid-template-columns:1fr; gap:2px; } .jplace{ font-size:.7rem; } }

/* ------------------------------------------------------------------- MAP */
.mapview{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; }
@media(max-width:1080px){ .mapview{ grid-template-columns:1fr; } }
.map-head{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  flex-wrap:wrap; margin-bottom:10px; }
.map-holder{ border-radius:var(--radius-s); overflow:hidden; border:1px solid var(--line);
  background:var(--sea); }
.sg-map{ display:block; width:100%; height:auto; }
.map-foot{ font-size:.76rem; color:var(--dimmer); margin:10px 0 0; }

.map-region{ cursor:pointer; transition:fill-opacity .2s, stroke-opacity .2s; }
.map-region:hover{ fill-opacity:.55 !important; }
.map-region.is-focus{ fill-opacity:.5; }
.map-region-label{ font:800 12px var(--font); letter-spacing:.16em; opacity:.75;
  pointer-events:none; text-transform:uppercase; }
.map-region-label.is-dim{ opacity:.22; }
.map-neighbour{ font:700 10px var(--font); letter-spacing:.2em; fill:rgba(255,255,255,.22); }
.map-sea-label{ font:600 10px var(--font); letter-spacing:.22em; fill:rgba(160,210,230,.35); }
.map-compass-n{ font:800 11px var(--font); fill:rgba(255,255,255,.6); }

.town{ cursor:pointer; }
.town .town-dot{ transition:r .18s, filter .18s; }
.town:hover .town-dot{ r:7.4; filter:drop-shadow(0 0 7px currentColor); }
.town:focus{ outline:none; }
.town:focus .town-dot{ stroke:#fff; stroke-width:2.4; }
.town.is-dim{ opacity:.28; }
.town.is-locked .town-dot{ opacity:.72; }
.town-pulse{ animation:townpulse 2.1s ease-out infinite; transform-origin:center;
  transform-box:fill-box; }
@keyframes townpulse{ 0%{ opacity:.55; transform:scale(.45); } 100%{ opacity:0; transform:scale(1.25); } }

.townindex{ display:grid; gap:14px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.idx-group h4{ font-size:.7rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--rc); margin:0 0 6px; font-weight:700; }
.idx-towns{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:5px; }
.idx-town{ display:grid; grid-template-columns:26px 1fr auto; gap:7px; align-items:center;
  text-align:left; padding:6px 9px; border-radius:7px; font-family:var(--font); font-size:.8rem;
  border:1px solid var(--line); border-left:3px solid var(--rc);
  background:rgba(0,0,0,.2); color:var(--text); cursor:pointer; transition:.14s; }
.idx-town:hover{ background:rgba(255,255,255,.05); border-color:var(--rc); border-left-color:var(--rc); }
.idx-town.is-picked{ background:color-mix(in srgb, var(--rc) 18%, transparent); border-color:var(--rc); }
.idx-town.is-here{ box-shadow:inset 0 0 0 1px var(--accent); }
.idx-town.is-locked{ opacity:.5; }
.idx-tier{ font-size:.66rem; font-weight:800; color:var(--dimmer);
  background:rgba(255,255,255,.06); border-radius:4px; padding:2px 0; text-align:center; }
.idx-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.idx-state{ font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; color:var(--dimmer); }
.idx-town.is-here .idx-state{ color:var(--accent); font-weight:700; }
.idx-town:not(.is-locked):not(.is-here) .idx-state{ color:var(--good); }

.map-side{ display:grid; gap:16px; }
.map-side .area-detail{ position:sticky; top:150px; }
@media(max-width:1080px){ .map-side .area-detail{ position:static; } }
.legend{ display:grid; gap:6px; }
.legend-item{ display:flex; gap:10px; align-items:flex-start; text-align:left; width:100%;
  padding:9px 11px; border-radius:var(--radius-s); border:1px solid var(--line);
  background:rgba(0,0,0,.2); color:var(--text); cursor:pointer; transition:.16s; font-family:var(--font); }
.legend-item:hover{ border-color:var(--rc); background:rgba(255,255,255,.04); }
.legend-item.is-on{ border-color:var(--rc); background:color-mix(in srgb, var(--rc) 14%, transparent); }
.legend-dot{ width:11px; height:11px; border-radius:3px; background:var(--rc); margin-top:5px; flex:0 0 auto; }
.legend-body b{ display:block; font-size:.9rem; }
.legend-body i{ display:block; font-style:normal; font-size:.74rem; color:var(--dimmer); line-height:1.4; }
.legend-body em{ display:block; font-style:normal; font-size:.72rem; color:var(--rc); font-weight:600; margin-top:2px; }

.area-detail{ border-top:3px solid var(--rc, var(--accent)); }
.ad-region{ display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--rc); margin-bottom:4px; }
.ad-meta{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; }
.ad-meta span{ font-size:.72rem; padding:2px 8px; border-radius:99px;
  background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--dim); }
.ad-meta .need{ color:var(--bad); border-color:rgba(239,106,95,.4); }
.ad-meta .ok{ color:var(--good); border-color:rgba(95,208,138,.4); }
.splist{ list-style:none; margin:0; padding:0; display:grid; gap:3px; }
.splist li{ display:grid; grid-template-columns:20px 1fr auto auto; gap:8px; align-items:center;
  padding:5px 7px; border-radius:6px; font-size:.8rem; background:rgba(0,0,0,.18); color:var(--dim); }
.splist li .bug-svg{ color:var(--fc); }
.splist li.got{ color:var(--text); }
.splist li.got .sp-name::after{ content:' ✓'; color:var(--good); font-size:.78rem; }
.sp-pow{ font-variant-numeric:tabular-nums; font-size:.75rem; color:var(--dimmer); }

/* ----------------------------------------------------------------- SHOPS */
.shoptabs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:10px; margin-bottom:4px;
  scrollbar-width:thin; }
.shoptab{ flex:0 0 auto; text-align:left; padding:10px 15px; border-radius:var(--radius-s);
  border:1px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer;
  font-family:var(--font); transition:.16s; }
.shoptab:hover{ border-color:var(--ac); }
.shoptab.is-on{ border-color:var(--ac); background:color-mix(in srgb, var(--ac) 20%, var(--panel));
  box-shadow:0 4px 14px color-mix(in srgb, var(--ac) 24%, transparent); }
.shoptab b{ display:block; font-size:.9rem; }
.shoptab i{ display:block; font-style:normal; font-size:.72rem; color:var(--dim); }
.shop-hero{ border-left:4px solid var(--ac); }
.wallet-line{ margin-top:8px; font-size:.88rem; color:var(--dim); }
.shop-sec{ display:flex; align-items:center; gap:8px; margin:22px 0 10px;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--dim); font-weight:700; }
.shop-sec .ui-svg{ color:var(--accent); }

.cardgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.card{ background:linear-gradient(170deg, var(--panel), var(--bg2)); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; display:flex; flex-direction:column; gap:9px;
  transition:.16s; }
.card:hover{ border-color:var(--line2); transform:translateY(-2px); }
.card header{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.card header h4{ margin:0; font-size:.98rem; }
.card p{ margin:0; font-size:.82rem; color:var(--dim); line-height:1.5; flex:1 1 auto; }
.card .price{ font-size:.84rem; font-weight:700; color:var(--accent2); white-space:nowrap; }
.card.is-owned,.card.is-equipped{ border-color:rgba(95,208,138,.42); }
.card.is-equipped::after{ content:'EQUIPPED'; position:absolute; }
.card.is-equipped{ position:relative; }
.card.is-equipped::after{ top:-8px; right:12px; font-size:.6rem; font-weight:800; letter-spacing:.12em;
  background:var(--good); color:#0b1a12; padding:2px 7px; border-radius:4px; }
.card.ready{ border-color:rgba(243,182,74,.45); }
.card .qty{ color:var(--dim); font-weight:500; }

.kvs{ display:flex; flex-wrap:wrap; gap:5px; }
.kv{ font-size:.72rem; padding:3px 8px; border-radius:6px; background:rgba(255,255,255,.05);
  border:1px solid var(--line); color:var(--dim); }
.kv b{ color:var(--text); }
.kv.ok{ border-color:rgba(95,208,138,.4); color:var(--good); }
.kv.short{ border-color:rgba(239,106,95,.4); color:var(--bad); }
.lures{ display:flex; flex-wrap:wrap; gap:5px; }
.lurepill{ display:inline-flex; align-items:center; gap:4px; font-size:.7rem; padding:3px 8px;
  border-radius:99px; color:var(--fc); background:color-mix(in srgb, var(--fc) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--fc) 30%, transparent); }
.buyrow{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.owned{ font-size:.76rem; color:var(--dimmer); margin-right:auto; }
.locknote{ font-size:.74rem; color:var(--bad); }
.keytag{ font-size:.72rem; color:var(--accent); }
.card.is-key{ border-color:rgba(243,182,74,.45); }

/* ----------------------------------------------------------------- CODEX */
.progressbig{ height:9px; border-radius:99px; background:rgba(255,255,255,.07);
  overflow:hidden; margin:10px 0 14px; }
.progressbig i{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--good),var(--accent)); }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:99px;
  border:1px solid var(--line); background:rgba(0,0,0,.2); color:var(--dim);
  font:600 .78rem var(--font); cursor:pointer; transition:.16s; }
.chip .bug-svg{ color:var(--fc); }
.chip:hover{ color:var(--text); border-color:var(--fc); }
.chip.is-on{ border-color:var(--fc); color:var(--text);
  background:color-mix(in srgb, var(--fc) 18%, transparent); }
.dexgrid{ grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); }
.dexcard{ flex-direction:row; gap:14px; align-items:flex-start; }
.dexcard.got{ cursor:pointer; }
.dexcard.seen{ cursor:pointer; }
.dex-art{ flex:0 0 auto; width:60px; height:60px; display:grid; place-items:center; border-radius:12px;
  color:var(--fc); background:color-mix(in srgb, var(--fc) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--fc) 30%, transparent); }
.dexcard.unknown .dex-art{ color:var(--lock); background:rgba(255,255,255,.03);
  border-color:var(--line); filter:blur(1.4px); }
.dexcard.unknown h4,.dexcard.unknown em{ color:var(--dimmer); }
.dex-body{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.dex-body em{ font-size:.76rem; color:var(--dimmer); }
.dex-where{ font-size:.74rem !important; }
.dex-count{ font-size:.74rem; color:var(--good); font-weight:600; }
.dexcard.unknown .dex-count,.dexcard.seen .dex-count{ color:var(--dimmer); }

/* --------------------------------------------------------------- RECORDS */
.ladder{ display:grid; gap:3px; }
.rung{ display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center;
  padding:8px 11px; border-radius:8px; background:rgba(0,0,0,.2); border:1px solid transparent; font-size:.87rem; }
.rung-n{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:rgba(255,255,255,.07); font-size:.74rem; font-weight:700; color:var(--dim); }
.rung.is-done{ color:var(--dim); }
.rung.is-done .rung-n{ background:rgba(95,208,138,.2); color:var(--good); }
.rung.is-cur{ border-color:var(--accent); background:rgba(243,182,74,.1); }
.rung.is-cur .rung-n{ background:var(--accent); color:#1a1305; }
.rung-pts{ font-variant-numeric:tabular-nums; color:var(--dimmer); font-size:.8rem; }
.regprogs{ display:grid; gap:12px; }
.regprog{ display:grid; gap:5px; }
.regprog b{ font-size:.88rem; color:var(--rc); }
.regprog span{ font-size:.76rem; color:var(--dimmer); }

/* ---------------------------------------------------------------- TOASTS */
.toasts{ position:fixed; right:16px; bottom:16px; z-index:80; display:grid; gap:8px;
  max-width:min(340px,88vw); }
.toast{ padding:11px 15px; border-radius:var(--radius-s); font-size:.85rem;
  background:var(--panel2); border:1px solid var(--line2); box-shadow:var(--shadow);
  animation:slidein .28s ease; }
.toast.good{ border-left:3px solid var(--good); }
.toast.bad{ border-left:3px solid var(--bad); }
.toast.out{ animation:slideout .42s ease forwards; }
@keyframes slidein{ from{ opacity:0; transform:translateX(24px); } to{ opacity:1; transform:none; } }
@keyframes slideout{ to{ opacity:0; transform:translateX(24px); } }

/* ----------------------------------------------------------------- MODAL */
.modal{ position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(4,10,9,.78); backdrop-filter:blur(4px); overflow-y:auto; }
.modal.is-open{ display:flex; }
.modal-box{ position:relative; width:min(540px,100%); background:linear-gradient(170deg,var(--panel),var(--bg2));
  border:1px solid var(--line2); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
  animation:pop .3s cubic-bezier(.2,.9,.3,1.2); margin:auto; }
.modal-box.wide{ width:min(700px,100%); }
.modal-x{ position:absolute; top:10px; right:12px; width:30px; height:30px; border-radius:8px;
  border:1px solid var(--line); background:transparent; color:var(--dim); font-size:1.2rem;
  cursor:pointer; line-height:1; }
.modal-x:hover{ color:var(--text); background:rgba(255,255,255,.06); }
.modal-title{ font-size:1.5rem; margin-bottom:2px; }
.modal-sub{ color:var(--dim); font-size:.86rem; margin-bottom:14px; }
.introlist{ margin:0 0 14px; padding-left:19px; display:grid; gap:7px; color:var(--dim); font-size:.87rem; }
.introlist b{ color:var(--text); }
.namefield{ display:block; font-size:.8rem; color:var(--dim); margin-top:14px; }
.namefield input{ display:block; width:100%; margin-top:6px; padding:10px 12px; border-radius:8px;
  border:1px solid var(--line2); background:var(--panel2); color:var(--text); font:500 .95rem var(--font); }
.savebox{ width:100%; height:150px; margin-bottom:12px; padding:10px; border-radius:8px;
  border:1px solid var(--line2); background:#08110f; color:var(--dim);
  font:400 .74rem ui-monospace,Menlo,Consolas,monospace; resize:vertical; }
.insmodal{ --fc:var(--accent); }
.ins-art{ color:var(--fc); margin-bottom:8px; }
.wherelist{ list-style:none; margin:0; padding:0; display:grid; gap:3px; max-height:180px; overflow-y:auto; }
.wherelist li{ font-size:.82rem; padding:5px 9px; border-radius:6px; background:rgba(0,0,0,.2); }
.wherelist i{ font-style:normal; color:var(--dimmer); font-size:.74rem; float:right; }

/* -------------------------------------------------------------- SCROLLBAR */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:rgba(0,0,0,.24); }
::-webkit-scrollbar-thumb{ background:#2a4a42; border-radius:99px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#38635a; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; }
}

@media(max-width:760px){
  .placebar{ top:auto; position:static; }
  #nav{ top:0; }
  /* Was position:static, which is why Log out could not be reached on a
     phone. #top, .placebar and #nav each carry a backdrop-filter, and that
     alone makes an element a stacking context -- so the hunter menu's
     z-index:60 only ever competed INSIDE #top. Unsticking the header with
     position:static also made its z-index:40 inert, leaving three sibling
     contexts at z-index auto to paint in document order: the place bar and
     the nav landed on top of the open menu, covering everything below
     "Profile". position:relative keeps it unstuck and makes z-index count
     again. */
  #top{ position:relative; z-index:60; }
  .topstats{ order:3; width:100%; }
  .effrow{ grid-template-columns:120px 1fr 38px; }
}