/* Kupo's Bad Advice — light, fun, modern theme */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f7f9fc;
  --bg-soft:#eaf1fb;
  --card:#ffffff;
  --card-border:#dde6f0;
  --ink:#22303f;
  --muted:#5b6b7c;
  --accent:#ff8a3d;      /* orange */
  --accent-2:#ffc84a;    /* amber */
  --fun-1:#2a63d5;       /* blue (WCAG AA on white/bg-soft, and as white-on-blue) */
  --fun-2:#007467;       /* teal (darkened for AA white-on-teal contrast) */
  --fun-3:#0ea5e9;       /* sky blue */
  --shadow:0 10px 30px rgba(30,58,95,0.10);
  --shadow-sm:0 4px 12px rgba(30,58,95,0.08);
  --radius:16px;
}

*{box-sizing:border-box}
.body-fx{margin:0}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:8px;top:-48px;z-index:100;
  background:var(--fun-1);color:#fff;padding:10px 18px;border-radius:10px;
  text-decoration:none;font-weight:700;transition:top .15s ease;
}
.skip-link:focus{top:8px}

:focus-visible{outline:3px solid var(--fun-1);outline-offset:2px;border-radius:4px}
a:focus-visible,button:focus-visible{outline-offset:3px}
body{
  margin:0;
  font-family:'Nunito',Inter,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 8% 0%, rgba(47,111,237,0.10), transparent 40%),
    radial-gradient(circle at 95% 10%, rgba(255,138,61,0.10), transparent 35%),
    var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Baloo 2',Nunito,sans-serif;letter-spacing:0.2px}

a{color:var(--fun-1)}

/* ---------- header / nav ---------- */
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--card-border);
  position:sticky;top:0;z-index:50;
}
.brand{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(90deg,var(--fun-1),var(--fun-3) 60%,var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;text-decoration:none;font-size:1.3rem;font-family:'Baloo 2',sans-serif;
}
.main-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.main-nav a{
  color:var(--ink);margin-left:2px;text-decoration:none;font-weight:700;font-size:0.92rem;
  padding:8px 14px;border-radius:999px;transition:background .15s ease, color .15s ease, transform .15s ease;
}
.main-nav a:hover{background:var(--bg-soft);color:var(--fun-1);transform:translateY(-1px)}
.main-nav a.active{background:linear-gradient(90deg,var(--fun-1),var(--fun-3));color:#fff}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;padding:0;border:1px solid var(--card-border);border-radius:10px;
  background:#fff;cursor:pointer;
}
.nav-toggle span{display:block;width:20px;height:2px;margin:0 auto;background:var(--ink);border-radius:2px}

/* ---------- hero ---------- */
.hero{
  padding:56px 16px 8px;
  background:linear-gradient(180deg, var(--bg-soft), transparent);
  text-align:center;
}
.hero-inner{max-width:980px;margin:0 auto}
.hero-banner{
  width:100%;max-width:600px;height:auto;display:block;margin:0 auto 20px;
  border-radius:20px;border:4px solid #fff;box-shadow:var(--shadow);
}
.hero-avatar{
  max-height:220px;width:auto;display:block;margin:0 auto 14px;
  border-radius:20px;border:4px solid #fff;box-shadow:var(--shadow);background:var(--bg-soft);
}
.hero h1{font-size:2rem;margin:0 0 10px}
.lead{color:var(--muted);font-size:1.08rem;max-width:640px;margin:0 auto}

.btn{
  display:inline-block;margin-top:16px;padding:12px 22px;
  background:linear-gradient(90deg,var(--fun-1),var(--fun-2));
  color:#fff;border-radius:999px;text-decoration:none;font-weight:800;
  box-shadow:0 8px 20px rgba(47,111,237,0.25);
  border:none;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(47,111,237,0.32)}
.btn.ghost{
  background:#fff;border:2px solid var(--card-border);color:var(--ink);
  box-shadow:none;margin-left:8px;
}
.btn.ghost:hover{border-color:var(--fun-1);color:var(--fun-1)}
.btn.small{padding:8px 16px;font-size:0.85rem;margin-top:0}

.container{max-width:1080px;margin:32px auto;padding:0 16px}
.intro{text-align:center;margin-top:0}

/* ---------- section chip row (category quicklinks) ---------- */
.chip-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:22px 0}
.chip{
  display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
  background:#fff;border:1px solid var(--card-border);box-shadow:var(--shadow-sm);
  text-decoration:none;color:var(--ink);font-weight:700;transition:transform .15s ease, box-shadow .15s ease;
}
.chip .emoji{font-size:1.2rem}
.chip:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* ---------- gear hub ---------- */
.gear-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin:26px 0;
}
.gear-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:32px 22px;border-radius:22px;text-decoration:none;color:var(--ink);
  background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gear-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow);border-color:var(--fun-1)}
.gear-card .gear-icon{
  width:78px;height:78px;display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;border-radius:50%;
  background:linear-gradient(160deg,var(--bg-soft),#fff);
  box-shadow:inset 0 0 0 1px var(--card-border);
}
.gear-card h2{margin:4px 0 0;font-size:1.25rem;font-family:'Baloo 2',sans-serif}
.gear-card p{margin:0;color:var(--muted);font-size:0.92rem}
.gear-card .gear-count{
  font-size:0.75rem;font-weight:700;color:var(--fun-1);background:var(--bg-soft);
  padding:3px 12px;border-radius:999px;
}
.gear-card.weapons .gear-icon{background:linear-gradient(160deg,#ffe3d6,#fff)}
.gear-card.armor .gear-icon{background:linear-gradient(160deg,#dcf3ff,#fff)}
.gear-card.equipment .gear-icon{background:linear-gradient(160deg,#fff3c9,#fff)}
.gear-card.trinkets .gear-icon{background:linear-gradient(160deg,#ede3ff,#fff)}

/* ---------- data tables (fallback / simple lists) ---------- */
/* Wrapper handles horizontal scroll on narrow screens; the <table> itself
   keeps its normal table layout so columns spread to fill the width instead
   of shrinking to content (which is what display:block on a table causes). */
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-top:12px}
.data-table{width:100%;min-width:480px;border-collapse:collapse;background:#fff}
.data-table th{background:var(--bg-soft);color:var(--ink);text-transform:uppercase;font-size:0.75rem;letter-spacing:0.06em}
.data-table th,.data-table td{padding:12px 14px;border-bottom:1px solid var(--card-border);text-align:left}
.data-table tbody tr:hover{background:#faf9ff}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--bg-soft);color:var(--fun-1);font-size:0.8rem;font-weight:700}

/* ---------- item grid + cards (weapons/armor/equipment) ---------- */
.page-head{max-width:1080px;margin:32px auto 0;padding:0 16px}
.page-head h1{margin-bottom:4px;font-size:1.7rem}
.page-head p{color:var(--muted);margin-top:4px}
.container>h1{font-size:1.7rem;margin-top:0}

.toolbar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin:18px 0;
}
.toolbar input[type="search"],.toolbar select{
  padding:10px 14px;border-radius:12px;border:1px solid var(--card-border);
  background:#fff;font-family:inherit;font-size:0.92rem;color:var(--ink);
}
.toolbar input[type="search"]{flex:1;min-width:180px}

/* ---------- tiered tab filters (skills/spells: class -> tier -> form/type) ---------- */
.filter-tabs{margin:4px 0 18px}
.filter-tab-row{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0}
.filter-tab-row+.filter-tab-row{margin-left:18px;padding-top:2px;border-left:2px solid var(--card-border);padding-left:14px}
.filter-tab{
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;
  background:#fff;border:1px solid var(--card-border);color:var(--ink);font-weight:700;font-size:0.88rem;
  cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;font-family:inherit;
}
.filter-tab:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:var(--fun-1)}
.filter-tab.active{background:linear-gradient(90deg,var(--fun-1),var(--fun-3));border-color:transparent;color:#fff;box-shadow:var(--shadow-sm)}
.filter-tab-row+.filter-tab-row .filter-tab{padding:6px 14px;font-size:0.82rem}
.result-count{color:var(--muted);font-size:0.85rem;margin:4px 0 18px}

.item-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;
}
.item-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:16px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:8px;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.item-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--fun-1)}
.item-card .item-thumb{
  width:100%;height:96px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--bg-soft),#fff);border-radius:12px;
}
.item-card .item-thumb img{max-width:64px;max-height:64px;image-rendering:pixelated}
.item-card h2{margin:0;font-size:1.02rem;font-family:'Baloo 2',sans-serif}
.item-card .item-meta{display:flex;flex-wrap:wrap;gap:6px}
.item-card .stat-pill{
  font-size:0.72rem;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--bg-soft);color:var(--fun-1);
}
.item-card .stat-pill.class-warrior{background:#ffe3d6;color:#b44017}
.item-card .stat-pill.class-rogue{background:#e2e8f5;color:#3b5578}
.item-card .stat-pill.class-wizard{background:#dcf3ff;color:#0d74a1}
.item-card .stat-pill.class-priest{background:#fff3c9;color:#8b6800}
.item-card .stat-pill.class-monk{background:#dbf7e8;color:#117d5a}
.item-card .stat-pill.class-any{background:#eef1f6;color:#5b6b7c}

/* ---------- detail page ---------- */
.detail-hero{
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;
  background:#fff;border:1px solid var(--card-border);border-radius:20px;
  padding:24px;box-shadow:var(--shadow-sm);margin-bottom:20px;
}
.detail-hero .item-thumb{width:120px;height:120px;flex:none;background:linear-gradient(160deg,var(--bg-soft),#fff);border-radius:16px;display:flex;align-items:center;justify-content:center}
.detail-hero .item-thumb img{max-width:88px;max-height:88px;image-rendering:pixelated}

/* ---------- video embed card (Entertainment page) ---------- */
/* Plain block layout, not flex — a full-width responsive video doesn't need
   flex's row/stretch behavior and it was leaving the video wider than its
   containing card on desktop. */
.detail-hero.video-card{display:block;text-align:left}
.video-embed{width:100%;margin-top:16px;box-sizing:border-box}
.video-embed-frame{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px;box-shadow:var(--shadow-sm)}
.video-embed-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.stat-table{width:100%;border-collapse:collapse;background:#fff}
.stat-table td,.stat-table th{padding:10px 14px;border-bottom:1px solid var(--card-border)}
.stat-table th{font-weight:700;color:var(--muted);width:160px;text-align:left;font-family:inherit}

.source-note{
  margin-top:26px;padding:14px 18px;border-radius:12px;background:var(--bg-soft);
  color:var(--muted);font-size:0.85rem;
}

/* ---------- footer ---------- */
.site-footer{padding:28px 16px 40px;text-align:center;color:var(--muted);font-size:0.9rem}
.site-footer .fine-print{max-width:680px;margin:8px auto 0;font-size:0.78rem}

@media(max-width:700px){
  .site-header{flex-wrap:wrap}
  .nav-toggle{display:flex}
  .main-nav{
    display:none;flex-direction:column;align-items:stretch;gap:2px;
    width:100%;order:3;margin-top:12px;
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:12px 14px;font-size:0.95rem;margin-left:0;border-radius:12px}
  .hero-inner{padding:0 8px}
  .hero h1{font-size:1.5rem}
  .brand{font-size:1.1rem}
  .detail-hero{flex-direction:column;text-align:center}
  .stat-table th{width:auto}
  .item-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}

  /* stack .data-table rows into labeled mini-cards instead of scrolling sideways */
  .table-scroll{overflow-x:visible;box-shadow:none;border-radius:0}
  .data-table{min-width:0}
  .data-table thead{display:none}
  .data-table,.data-table tbody,.data-table tr,.data-table td{display:block;width:100%}
  .data-table tr{margin-bottom:12px;background:#fff;border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
  .data-table td{border-bottom:1px solid var(--card-border)}
  .data-table tr td:last-child{border-bottom:0}
  .data-table td[data-label]::before{content:attr(data-label);display:block;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);margin-bottom:4px}
}

/* fun accent decorations */
.sparkle{width:10px;height:10px;border-radius:50%;background:linear-gradient(90deg,var(--fun-1),var(--fun-2));box-shadow:0 0 12px rgba(47,111,237,0.4),0 0 24px rgba(0,179,159,0.15)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important}
}