/* ============================================================
   Beast Gambit - Codex / Wiki stylesheet.
   Matches the game: Minifantasy pixel UI sprites, Press Start 2P
   + VT323 fonts, the night palette. Pixel art everywhere.
   ============================================================ */

@font-face { font-family:'PS2P'; src:url('../assets/fonts/PressStart2P-Regular.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'VT323'; src:url('../assets/fonts/VT323-Regular.ttf') format('truetype'); font-display:swap; }

:root{
  --pal-orange:#d6812d;
  --pal-gold:#e7b14a;
  --pal-green:#4e9f4c;
  --pal-blue:#5064c2;
  --pal-purple:#af50c2;
  --pal-red:#c25050;
  --pal-brown:#cf9b5d;
  --pal-cream:#faddb4;
  --ink:#1a0f08;
  --night:#0d0a1a;
  --night2:#15112a;
  --night3:#1d1838;
  --line:rgba(231,177,74,0.22);
  --r-c:#9fb0c8; --r-r:#5b8df0; --r-e:#c06ee0; --r-l:#e7b14a; --r-t:#5fbf5c;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--night);
  background-image:
    radial-gradient(1200px 600px at 50% -8%, rgba(80,100,194,0.18), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(175,80,194,0.12), transparent 60%);
  background-attachment:fixed;
  color:var(--pal-cream);
  font-family:'VT323',monospace;
  font-size:22px;
  line-height:1.35;
  min-height:100vh;
}
img{ image-rendering:pixelated; -webkit-user-drag:none; user-select:none; }
a{ color:var(--pal-gold); text-decoration:none; }
a:hover{ color:#ffd97a; text-decoration:underline; }
h1,h2,h3,h4{ font-family:'PS2P',monospace; line-height:1.4; color:#fff7e6; }

::selection{ background:var(--pal-gold); color:var(--ink); }

/* scrollbar */
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--night); }
::-webkit-scrollbar-thumb{ background:#2c2550; border:2px solid var(--night); }
::-webkit-scrollbar-thumb:hover{ background:var(--pal-purple); }

/* ---------------- top bar ---------------- */
#topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:18px;
  padding:8px 18px;
  background:rgba(10,8,22,0.94);
  border-bottom:3px solid var(--pal-gold);
  box-shadow:0 3px 0 rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);
}
.brand{ display:flex; align-items:center; gap:10px; color:#fff7e6; }
.brand:hover{ text-decoration:none; }
.brand-ico{ width:42px; height:42px; }
.brand-text{ font-family:'PS2P',monospace; font-size:11px; line-height:1.25; color:var(--pal-gold); letter-spacing:1px; }
#nav{ display:flex; gap:4px; flex:1; }
#nav a{
  font-family:'PS2P',monospace; font-size:12px; color:var(--pal-cream);
  padding:12px 14px; border:2px solid transparent;
}
#nav a:hover{ color:#fff7e6; text-decoration:none; background:rgba(231,177,74,0.10); }
#nav a.active{ color:var(--ink); background:var(--pal-gold); border-color:#fff7e6; }
.search-wrap{ display:flex; align-items:center; }
#globalsearch{
  font-family:'VT323',monospace; font-size:20px;
  background:var(--night3); color:var(--pal-cream);
  border:2px solid var(--line); padding:8px 12px; width:200px; outline:none;
}
#globalsearch:focus{ border-color:var(--pal-gold); }
#globalsearch::placeholder{ color:#7a719a; }
#navtoggle{ display:none; background:none; border:2px solid var(--pal-gold); color:var(--pal-gold);
  font-size:22px; padding:4px 12px; cursor:pointer; }

/* ---------------- pages ---------------- */
#main{ max-width:1240px; margin:0 auto; padding:26px 20px 60px; }
.page.hidden{ display:none; }
.page-title{ font-size:26px; color:var(--pal-gold); text-shadow:0 3px 0 #000; margin-bottom:6px; }
.page-sub{ color:#cdbfe0; font-size:21px; margin-bottom:22px; max-width:860px; }

/* ---------------- hero ---------------- */
.hero{ position:relative; text-align:center; padding:54px 16px 40px; margin-bottom:30px; overflow:hidden;
  border:3px solid var(--line); }
.hero-backdrop{ position:absolute; inset:0;
  background:url('../assets/backdrops/nightmare.png') center/cover; image-rendering:pixelated;
  opacity:0.42; filter:saturate(1.1); }
.hero::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,10,26,0.55), rgba(13,10,26,0.92)); }
.hero>*{ position:relative; z-index:2; }
.hero-mascots{ display:flex; justify-content:center; gap:6px; margin-bottom:14px; }
.hero-mascots .mascot{ width:90px; height:90px; display:block; position:relative; }
.hero-mascots .mascot:nth-child(even){ transform:translateY(10px); }
.hero-title{ font-size:46px; color:var(--pal-gold); letter-spacing:3px;
  text-shadow:0 0 18px rgba(231,177,74,0.5), 4px 4px 0 #000, -1px -1px 0 #5a3d12; }
.hero-tag{ font-size:24px; color:#e9dcc4; margin-top:14px; }
.stat-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:26px; }
.stat-pill{ background:rgba(20,16,40,0.85); border:2px solid var(--line); padding:10px 16px; min-width:104px; }
.stat-pill b{ display:block; font-family:'PS2P',monospace; font-size:20px; color:var(--pal-gold); }
.stat-pill span{ font-size:18px; color:#cdbfe0; text-transform:uppercase; letter-spacing:1px; }

/* ---------------- prose panels ---------------- */
.panel-dark{
  background:linear-gradient(180deg, var(--night2), var(--night));
  border:2px solid var(--line); padding:22px 26px; margin-bottom:22px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.4);
}
.prose h2{ font-size:18px; color:var(--pal-gold); margin-bottom:12px; }
.prose h3{ font-size:14px; color:#ffd97a; margin:18px 0 6px; }
.prose p{ font-size:22px; margin-bottom:12px; color:#e8dcc6; }
.prose b{ color:#fff2d6; }
.prose ul{ margin:6px 0 14px 26px; }
.prose li{ margin-bottom:6px; }
.jump-hint{ font-size:22px; }

.mode-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:16px 0; }
.mode-card{ background:var(--night3); border:2px solid var(--line); padding:14px 16px; }
.mode-card h3{ font-size:13px; color:var(--pal-gold); margin-bottom:8px; }
.mode-card p{ font-size:20px; color:#d9ccb6; }

/* ---------------- section bands ---------------- */
.band{ font-size:18px; color:var(--pal-gold); margin:34px 0 4px; padding-bottom:8px;
  border-bottom:2px solid var(--line); display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.band-tag{ font-family:'VT323',monospace; font-size:18px; color:var(--ink); background:var(--pal-gold);
  padding:2px 10px; }
.band-sub{ color:#bdb0d4; font-size:20px; margin-bottom:14px; }

/* ---------------- filters ---------------- */
#filters{ background:var(--night2); border:2px solid var(--line); padding:14px 16px; margin-bottom:22px; }
.filter-group{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; align-items:center; }
.chip{
  font-family:'VT323',monospace; font-size:19px; cursor:pointer;
  background:var(--night3); color:var(--pal-cream);
  border:2px solid var(--line); padding:5px 12px; display:inline-flex; align-items:center; gap:7px;
  transition:transform .05s;
}
.chip:hover{ border-color:var(--pal-gold); color:#fff; }
.chip:active{ transform:translateY(2px); }
.chip.on{ background:var(--pal-gold); color:var(--ink); border-color:#fff7e6; font-weight:bold; }
.chip img{ width:20px; height:20px; }
.chip .gemico{ width:18px; height:18px; }
.filter-meta{ display:flex; align-items:center; gap:14px; margin-top:4px; }
#result-count{ color:#bdb0d4; font-size:20px; }
.mini-btn{ font-family:'VT323',monospace; font-size:19px; cursor:pointer; background:var(--pal-red);
  color:#fff; border:2px solid #e88; padding:4px 14px; }
.mini-btn:hover{ filter:brightness(1.15); }

/* ---------------- card grid ---------------- */
#cardgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); gap:16px; }
.gcard{
  position:relative; cursor:pointer; background:linear-gradient(180deg,#241d44,#15112a);
  border:2px solid var(--cardline,#3a3168);
  padding:8px 8px 10px; display:flex; flex-direction:column;
  transition:transform .08s, box-shadow .08s, border-color .08s;
}
.gcard:hover{ transform:translateY(-4px); border-color:var(--cardline); box-shadow:0 8px 18px rgba(0,0,0,.55), 0 0 14px -2px var(--cardglow,transparent); }
.gcard.rar-c{ --cardline:#5a6480; --cardglow:rgba(159,176,200,.5); }
.gcard.rar-r{ --cardline:var(--r-r); --cardglow:rgba(91,141,240,.6); }
.gcard.rar-e{ --cardline:var(--r-e); --cardglow:rgba(192,110,224,.6); }
.gcard.rar-l{ --cardline:var(--r-l); --cardglow:rgba(231,177,74,.7); }
.gcard.rar-t{ --cardline:var(--r-t); --cardglow:rgba(95,191,92,.5); }

.gcard .topline{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; height:30px; }
.cost-gem{ position:relative; width:34px; height:34px; display:grid; place-items:center;
  background:url('../assets/ui3/crystal.png') center/contain no-repeat; image-rendering:pixelated; }
.cost-gem span{ font-family:'PS2P',monospace; font-size:13px; color:#fff; text-shadow:0 0 3px #000,1px 1px 0 #000; }
.cost-gem.spell{ background-image:url('../assets/ui3/gem_t.png'); }
.gcard .rar-gem{ width:24px; height:24px; }

.artwin{ position:relative; width:100%; padding-bottom:100%; overflow:hidden; display:block;
  background:#0a0814; border:2px solid rgba(0,0,0,.5); image-rendering:pixelated; }
.artwin img{ position:absolute; image-rendering:pixelated; }
.gcard .cname{ font-family:'PS2P',monospace; font-size:10px; color:#fff7e6; text-align:center;
  margin:8px 2px 6px; line-height:1.4; min-height:28px; display:flex; align-items:center; justify-content:center; }
.gcard .tribe-row{ display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:6px; }
.gcard .tribe-row img{ width:22px; height:22px; }
.gcard .tribe-row span{ font-size:18px; color:#bdb0d4; }
.kw-badges{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin-bottom:6px; min-height:0; }
.kw-badge{ font-size:16px; padding:1px 7px; border:1px solid; text-transform:uppercase; letter-spacing:.5px; }
.kw-charge{ color:#ffd060; border-color:#ffd060; }
.kw-guard{ color:#7fd0ff; border-color:#7fd0ff; }
.kw-flying{ color:#cfe0ff; border-color:#cfe0ff; }
.kw-poison{ color:#8be07a; border-color:#8be07a; }
.kw-pack{ color:#ffae6b; border-color:#ffae6b; }
.gcard .ability{ font-size:18px; color:#d7e6ff; text-align:center; margin-bottom:4px; line-height:1.2; }
.gcard .flavor{ font-size:17px; color:#9b8fb8; font-style:italic; text-align:center; line-height:1.15; margin-top:auto; padding-top:6px; }
.gcard .stats{ display:flex; justify-content:space-between; margin-top:6px; }
.statbox{ display:flex; align-items:center; gap:4px; font-family:'PS2P',monospace; font-size:13px; }
.statbox img{ width:24px; height:24px; }
.stat-atk{ color:#ffd060; } .stat-hp{ color:#ff8b8b; }
.spell-tag{ font-family:'PS2P',monospace; font-size:9px; color:var(--r-t); border:1px solid var(--r-t); padding:3px 8px; }

/* ---------------- tribe / patron / opp cards ---------------- */
#tribes-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.tribe-card{ background:linear-gradient(180deg,var(--night3),var(--night2)); border:2px solid var(--line); padding:16px; }
.tribe-card .th{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.tribe-card .th img{ width:44px; height:44px; }
.tribe-card .th h4{ font-size:15px; color:var(--pal-gold); }
.tribe-card .th .cnt{ font-size:18px; color:#bdb0d4; }
.tribe-card p{ font-size:20px; color:#ddd0bb; }
.tribe-card .sig{ font-size:18px; color:#9b8fb8; margin-top:8px; }
.tribe-card .sig b{ color:var(--pal-cream); }

#patrons-grid,#opps-grid,#run-foes-grid{ display:grid; gap:16px; }
#patrons-grid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
#opps-grid,#run-foes-grid{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }

.entity-card{ display:flex; gap:14px; background:linear-gradient(180deg,var(--night3),var(--night2));
  border:2px solid var(--line); padding:14px; }
.entity-card .portrait{ flex:0 0 84px; width:84px; height:84px; position:relative; overflow:hidden;
  border:2px solid rgba(0,0,0,.5); background:#0a0814; }
.entity-card .body{ flex:1; min-width:0; }
.entity-card h4{ font-size:14px; color:var(--pal-gold); margin-bottom:4px; }
.entity-card .sub{ font-size:18px; color:#ffae6b; margin-bottom:6px; text-transform:uppercase; letter-spacing:1px; }
.entity-card .blurb{ font-size:20px; color:#ddd0bb; }
.entity-card .meta{ font-size:18px; color:#bdb0d4; margin-top:8px; }
.entity-card .meta b{ color:#fff2d6; }
.entity-card.boss{ border-color:var(--pal-red); }
.entity-card.elite{ border-color:var(--pal-purple); }
.power-line{ font-size:20px; color:#d7e6ff; margin-top:6px; }
.power-line b{ color:var(--pal-gold); }

/* ---------------- keywords / lanemods / status ---------------- */
.kw-grid,.lanemods-grid,.status-grid{ display:grid; gap:14px; }
.kw-grid{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.lanemods-grid{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.status-grid{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.def-card{ background:linear-gradient(180deg,var(--night3),var(--night2)); border:2px solid var(--line); padding:14px 16px; }
.def-card .dh{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.def-card .dh .glyph{ font-family:'PS2P',monospace; font-size:18px; color:var(--pal-gold);
  width:40px; height:40px; display:grid; place-items:center; background:var(--night); border:2px solid var(--line); }
.def-card .dh img{ width:30px; height:30px; }
.def-card .dh h4{ font-size:14px; color:#fff7e6; }
.def-card p{ font-size:20px; color:#ddd0bb; }

/* ---------------- economy table ---------------- */
.econ-tables{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.econ-block h3{ font-size:13px; color:var(--pal-gold); margin-bottom:8px; }
table.econ{ width:100%; border-collapse:collapse; font-size:20px; }
table.econ th,table.econ td{ text-align:left; padding:5px 8px; border-bottom:1px solid var(--line); }
table.econ th{ color:#ffae6b; font-weight:normal; }
table.econ td:last-child{ text-align:right; color:var(--pal-gold); }

/* ---------------- strategy ---------------- */
#strategy-body{ display:flex; flex-direction:column; gap:16px; }
.strat-block{ background:linear-gradient(180deg,var(--night2),var(--night)); border-left:4px solid var(--pal-gold);
  border-top:2px solid var(--line); border-right:2px solid var(--line); border-bottom:2px solid var(--line);
  padding:16px 20px; }
.strat-block h3{ font-size:15px; color:var(--pal-gold); margin-bottom:8px; }
.strat-block p{ font-size:21px; color:#e3d6c0; }

/* ---------------- modal ---------------- */
#modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; }
#modal.hidden{ display:none; }
.modal-scrim{ position:absolute; inset:0; background:rgba(5,3,12,0.85); backdrop-filter:blur(3px); }
.modal-box{ position:relative; z-index:2; max-width:520px; width:100%; max-height:90vh; overflow:auto;
  background:linear-gradient(180deg,#241d44,#120e26); border:3px solid var(--pal-gold);
  box-shadow:0 0 40px rgba(231,177,74,0.3); padding:0; }
.mb-head{ display:flex; gap:16px; padding:18px; border-bottom:2px solid var(--line); align-items:center; }
.mb-art{ flex:0 0 130px; width:130px; height:130px; position:relative; overflow:hidden; background:#0a0814;
  border:2px solid rgba(0,0,0,.6); }
.mb-title h3{ font-size:17px; color:var(--pal-gold); margin-bottom:8px; line-height:1.5; }
.mb-badges{ display:flex; flex-wrap:wrap; gap:6px; }
.mb-badges .tag{ font-size:18px; padding:2px 9px; border:1px solid var(--line); color:#cdbfe0; display:inline-flex; gap:5px; align-items:center; }
.mb-badges .tag img{ width:18px; height:18px; }
.mb-body{ padding:18px; }
.mb-stats{ display:flex; gap:18px; justify-content:center; margin-bottom:14px; }
.mb-stat{ text-align:center; }
.mb-stat .v{ font-family:'PS2P',monospace; font-size:22px; }
.mb-stat .l{ font-size:17px; color:#bdb0d4; text-transform:uppercase; }
.mb-section{ margin-bottom:14px; }
.mb-section h4{ font-size:12px; color:#ffae6b; margin-bottom:6px; }
.mb-section p{ font-size:21px; color:#e3d6c0; }
.mb-section .flavor{ font-style:italic; color:#9b8fb8; }
.modal-close{ position:absolute; top:10px; right:12px; z-index:3; background:var(--pal-red); color:#fff;
  border:2px solid #f0a; font-family:'PS2P',monospace; font-size:12px; padding:8px 12px; cursor:pointer; }
.modal-close:hover{ filter:brightness(1.2); }

/* ---------------- footer ---------------- */
#footer{ border-top:2px solid var(--line); padding:24px 20px; text-align:center; color:#8a7fb0; font-size:18px; }
#footer p{ margin-bottom:6px; }
#footer b{ color:#bdb0d4; }

.hidden{ display:none !important; }

/* ---------------- responsive ---------------- */
@media (max-width:860px){
  #nav{ position:absolute; top:100%; left:0; right:0; flex-direction:column; background:rgba(10,8,22,0.98);
    border-bottom:3px solid var(--pal-gold); padding:8px; display:none; }
  #nav.open{ display:flex; }
  #navtoggle{ display:block; }
  .search-wrap{ flex:1; }
  #globalsearch{ width:100%; }
  .hero-title{ font-size:30px; }
  .hero-mascots .mascot{ width:62px; height:62px; }
}
@media (max-width:520px){
  body{ font-size:20px; }
  #cardgrid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .mb-head{ flex-direction:column; align-items:flex-start; }
}