/* =========================================================
   POKEGOHUB — Design System
   Apple-inspired: generous whitespace, glass surfaces, soft
   3D depth, restrained color, big confident type.
   ========================================================= */

:root{
  --bg: #08090c;
  --bg-elev-1: #101216;
  --bg-elev-2: #16181d;
  --surface: rgba(255,255,255,0.055);
  --surface-strong: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);
  --text: #f5f6f8;
  --text-dim: #a7acb6;
  --text-faint: #6d7280;

  --accent-a: #3b82f6;   /* electric blue  */
  --accent-b: #a855f7;   /* violet         */
  --accent-c: #ef4444;   /* pokeball red   */
  --accent-gradient: linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 55%, #ec4899 100%);
  --accent-gradient-soft: linear-gradient(135deg, rgba(59,130,246,.20) 0%, rgba(168,85,247,.20) 55%, rgba(236,72,153,.20) 100%);

  --success: #34d399;
  --warning: #fbbf24;

  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;
  --radius-xl: 36px;

  --shadow-soft: 0 8px 30px rgba(0,0,0,.35);
  --shadow-hard: 0 20px 60px rgba(0,0,0,.55);

  --ease: cubic-bezier(.16,1,.3,1);
  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body.pgh{
  margin:0;
  background:
    radial-gradient(60% 50% at 15% -10%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(50% 40% at 100% 0%, rgba(168,85,247,.14), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

.pgh-container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Typography ---------- */
.pgh h1,.pgh h2,.pgh h3,.pgh h4{
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.08;
  margin:0 0 .5em;
}
.pgh-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-dim);
  background:var(--surface);
  border:1px solid var(--border);
  padding:6px 14px;
  border-radius:100px;
}
.pgh-eyebrow .dot{ width:6px;height:6px;border-radius:50%;background:var(--accent-c); box-shadow:0 0 8px var(--accent-c); }

.pgh-gradient-text{
  background:var(--accent-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- Top Nav ---------- */
.pgh-nav{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  background:rgba(8,9,12,.65);
  border-bottom:1px solid var(--border);
}
.pgh-nav-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.pgh-logo{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:19px; letter-spacing:-.02em;
}
.pgh-logo .orb{
  width:26px;height:26px;border-radius:50%;
  background:conic-gradient(from 180deg, var(--accent-c), var(--accent-b), var(--accent-a), var(--accent-c));
  box-shadow:0 0 18px rgba(168,85,247,.55);
}
.pgh-menu{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.pgh-menu li a{
  display:block; padding:9px 14px; border-radius:100px;
  font-size:14.5px; font-weight:500; color:var(--text-dim);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.pgh-menu li a:hover{ color:var(--text); background:var(--surface); }
.pgh-cta{
  padding:9px 18px !important;
  background:var(--surface-strong) !important;
  border:1px solid var(--border-strong);
  color:var(--text) !important;
  font-weight:600 !important;
}
.pgh-burger{ display:none; }

@media (max-width: 860px){
  .pgh-menu{ display:none; }
  .pgh-burger{ display:flex; }
}

/* ---------- Hero ---------- */
.pgh-hero{
  position:relative;
  padding:96px 0 80px;
  overflow:hidden;
  perspective:1200px;
}
.pgh-hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;
}
@media (max-width:960px){ .pgh-hero-grid{ grid-template-columns:1fr; } }

.pgh-hero h1{ font-size:clamp(34px,5.2vw,64px); }
.pgh-hero p.lead{ font-size:19px; color:var(--text-dim); max-width:52ch; margin:18px 0 30px; }

.pgh-hero-orb{
  position:relative; width:100%; aspect-ratio:1/1; max-width:420px; margin:0 auto;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), transparent 42%),
    conic-gradient(from 200deg, var(--accent-c), var(--accent-b) 40%, var(--accent-a) 70%, var(--accent-c));
  box-shadow: var(--shadow-hard), inset 0 0 80px rgba(0,0,0,.35);
  transform-style:preserve-3d;
  animation: pgh-float 7s ease-in-out infinite;
}
.pgh-hero-orb::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  background:linear-gradient(180deg, transparent 46%, #0b0c10 46%, #0b0c10 54%, transparent 54%);
}
.pgh-hero-orb::before{
  content:"";
  position:absolute; left:50%; top:50%; width:22%; height:22%;
  background:#0b0c10; border:6px solid #f5f6f8; border-radius:50%;
  transform:translate(-50%,-50%); z-index:2;
}
@keyframes pgh-float{
  0%,100%{ transform:translateY(0) rotateX(6deg) rotateY(-8deg); }
  50%{ transform:translateY(-18px) rotateX(-4deg) rotateY(8deg); }
}

/* ---------- Ambient background silhouettes ---------- */
.pgh-bg-decor{
  position:fixed; inset:0; z-index:-1;
  overflow:hidden; pointer-events:none;
}
.pgh-bg-sil{ position:absolute; height:auto; }
.pgh-bg-sil-1{
  top:4%; right:-7%; width:560px; color:var(--accent-b); opacity:.06;
  transform:rotate(-8deg); animation:pgh-drift1 26s ease-in-out infinite;
}
.pgh-bg-sil-2{
  bottom:4%; left:-9%; width:440px; color:var(--accent-a); opacity:.05;
  transform:scaleX(-1) rotate(6deg); animation:pgh-drift2 32s ease-in-out infinite;
}
.pgh-bg-sil-3{
  top:22%; left:50%; width:170px; color:var(--accent-c); opacity:.04;
  animation:pgh-drift3 40s ease-in-out infinite;
}
@keyframes pgh-drift1{ 0%,100%{ transform:rotate(-8deg) translateY(0); } 50%{ transform:rotate(-5deg) translateY(-26px); } }
@keyframes pgh-drift2{ 0%,100%{ transform:scaleX(-1) rotate(6deg) translateY(0); } 50%{ transform:scaleX(-1) rotate(9deg) translateY(22px); } }
@keyframes pgh-drift3{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-18px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce){ .pgh-bg-sil{ animation:none !important; } }
@media (max-width:800px){
  .pgh-bg-sil-1{ width:340px; }
  .pgh-bg-sil-2{ width:280px; }
  .pgh-bg-sil-3{ display:none; }
}

.pgh-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; border-radius:100px;
  font-weight:600; font-size:15px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.pgh-btn-primary{
  background:var(--accent-gradient); color:#fff;
  box-shadow:0 10px 30px rgba(168,85,247,.35);
}
.pgh-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(168,85,247,.5); }
.pgh-btn-ghost{
  background:var(--surface); border-color:var(--border-strong); color:var(--text);
}
.pgh-btn-ghost:hover{ background:var(--surface-strong); transform:translateY(-2px); }
.pgh-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- Section shell ---------- */
.pgh-section{ padding:72px 0; }
.pgh-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:36px; flex-wrap:wrap; }
.pgh-section-head h2{ font-size:clamp(26px,3.4vw,38px); }
.pgh-section-head p{ color:var(--text-dim); margin:8px 0 0; max-width:60ch; }
.pgh-see-all{ font-weight:600; font-size:14.5px; color:var(--accent-a); display:inline-flex; gap:6px; align-items:center; white-space:nowrap; }

/* ---------- Cards (3D tilt) ---------- */
.pgh-grid{ display:grid; gap:24px; }
.pgh-grid-3{ grid-template-columns:repeat(3,1fr); }
.pgh-grid-4{ grid-template-columns:repeat(4,1fr); }
.pgh-grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:960px){ .pgh-grid-3,.pgh-grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .pgh-grid-3,.pgh-grid-4,.pgh-grid-2{ grid-template-columns:1fr; } }

.pgh-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  padding:26px;
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
  will-change:transform;
}
.pgh-card:hover{
  border-color:var(--border-strong);
  background:var(--surface-strong);
  box-shadow:var(--shadow-soft);
}
.pgh-card .glow{
  position:absolute; inset:-40%; opacity:0; pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.14), transparent 45%);
  transition:opacity .3s ease;
}
.pgh-card:hover .glow{ opacity:1; }

.pgh-card-media{
  border-radius:var(--radius-m);
  overflow:hidden; margin:-26px -26px 18px;
  aspect-ratio:16/10;
  background:var(--accent-gradient-soft);
}
.pgh-card-media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Auto-generated article cover art ---------- */
.pgh-cover{
  position:relative; width:100%; height:100%;
  display:flex; align-items:flex-end; overflow:hidden;
  color:#fff;
}
.pgh-cover-news{    background:linear-gradient(135deg,#3b82f6 0%,#a855f7 100%); }
.pgh-cover-events{  background:linear-gradient(135deg,#ec4899 0%,#f97316 100%); }
.pgh-cover-raids{   background:linear-gradient(135deg,#ef4444 0%,#7c3aed 100%); }
.pgh-cover-guides{  background:linear-gradient(135deg,#10b981 0%,#0ea5e9 100%); }
.pgh-cover-pvp{     background:linear-gradient(135deg,#f59e0b 0%,#ef4444 100%); }

.pgh-cover-ring{
  position:absolute; border:2px solid rgba(255,255,255,.18); border-radius:50%;
  width:70%; aspect-ratio:1/1; top:-30%; right:-18%;
}
.pgh-cover-ring-2{ width:38%; top:auto; bottom:-20%; right:20%; border-color:rgba(255,255,255,.12); }
.pgh-cover-icon{ position:absolute; top:16px; left:16px; opacity:.92; filter:drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.pgh-cover-tag{
  position:absolute; top:16px; right:16px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 10px; border-radius:100px; background:rgba(0,0,0,.28); backdrop-filter:blur(6px);
}
.pgh-cover-watermark{
  position:relative; z-index:1; display:block; width:100%;
  padding:16px 18px; font-weight:800; letter-spacing:-.02em; line-height:.92;
  text-transform:uppercase; color:rgba(255,255,255,.9); text-shadow:0 6px 24px rgba(0,0,0,.25);
  overflow-wrap:anywhere;
}
.pgh-cover-card{ aspect-ratio:16/10; }
.pgh-cover-card .pgh-cover-watermark{ font-size:clamp(18px,3.4vw,26px); }
.pgh-cover-banner{ aspect-ratio:16/8; }
.pgh-cover-banner .pgh-cover-watermark{ font-size:clamp(30px,6vw,58px); padding:26px 32px; }
.pgh-cover-banner .pgh-cover-icon{ top:26px; left:26px; }
.pgh-cover-banner .pgh-cover-tag{ top:26px; right:26px; font-size:12.5px; padding:6px 14px; }
.pgh-card h3{ font-size:19px; margin-bottom:8px; }
.pgh-card p{ color:var(--text-dim); font-size:14.5px; margin:0; }
.pgh-card .meta{ display:flex; gap:10px; align-items:center; margin-top:16px; font-size:12.5px; color:var(--text-faint); }
.pgh-tag{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 10px; border-radius:100px; background:var(--accent-gradient-soft); color:#e9d5ff;
  margin-bottom:12px;
}

/* ---------- Tool tiles ---------- */
.pgh-tool-tile{
  display:flex; flex-direction:column; gap:14px;
}
.pgh-tool-icon{
  width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-gradient); font-size:24px;
  box-shadow:0 10px 26px rgba(168,85,247,.35);
}

/* ---------- Panels / calculators ---------- */
.pgh-panel{
  background:var(--bg-elev-1);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:36px;
}
@media (max-width:640px){ .pgh-panel{ padding:22px; border-radius:var(--radius-l);} }

.pgh-field{ margin-bottom:18px; }
.pgh-field label{ display:block; font-size:13.5px; font-weight:600; color:var(--text-dim); margin-bottom:8px; }
.pgh-input,.pgh-select{
  width:100%; padding:13px 16px; border-radius:var(--radius-s);
  background:var(--bg-elev-2); border:1px solid var(--border-strong); color:var(--text);
  font-size:15px; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.pgh-input:focus,.pgh-select:focus{ border-color:var(--accent-a); box-shadow:0 0 0 4px rgba(59,130,246,.18); }
.pgh-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:640px){ .pgh-row{ grid-template-columns:1fr; } }

.pgh-result{
  margin-top:20px; padding:22px; border-radius:var(--radius-m);
  background:var(--accent-gradient-soft); border:1px solid var(--border-strong);
}
.pgh-result .big{ font-size:34px; font-weight:800; letter-spacing:-.02em; }
.pgh-bar-track{ height:8px; border-radius:100px; background:var(--bg-elev-2); overflow:hidden; margin-top:8px; }
.pgh-bar-fill{ height:100%; background:var(--accent-gradient); transition:width .5s var(--ease); }

/* ---------- Tables ---------- */
.pgh-table-wrap{ overflow-x:auto; border-radius:var(--radius-m); border:1px solid var(--border); }
table.pgh-table{ width:100%; border-collapse:collapse; min-width:720px; font-size:13.5px; }
table.pgh-table th, table.pgh-table td{ padding:10px 12px; text-align:center; border:1px solid var(--border); }
table.pgh-table thead th{ background:var(--bg-elev-2); position:sticky; top:0; }
table.pgh-table .eff-2{ background:rgba(52,211,153,.35); font-weight:700; }
table.pgh-table .eff-05{ background:rgba(239,68,68,.25); }
table.pgh-table .eff-0{ background:rgba(0,0,0,.4); color:var(--text-faint); }

/* ---------- Article / single ---------- */
.pgh-article-head{ padding:64px 0 30px; }
.pgh-article-head h1{ font-size:clamp(28px,4.5vw,46px); max-width:22ch; }
.pgh-article-meta{ display:flex; gap:14px; align-items:center; color:var(--text-dim); font-size:14px; margin-top:18px; }
.pgh-avatar{ width:34px;height:34px;border-radius:50%; background:var(--accent-gradient); }
.pgh-article-cover{ border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/8; margin:20px 0 40px; background:var(--accent-gradient-soft); }
.pgh-prose{ font-size:17.5px; color:#dfe1e6; max-width:74ch; }
.pgh-prose h2{ font-size:26px; margin-top:1.6em; }
.pgh-prose h3{ font-size:20px; margin-top:1.4em; }
.pgh-prose p{ margin:0 0 1.2em; }
.pgh-prose ul,.pgh-prose ol{ margin:0 0 1.2em; padding-left:1.3em; }
.pgh-prose li{ margin-bottom:.4em; }
.pgh-prose a{ color:var(--accent-a); text-decoration:underline; text-underline-offset:3px; }
.pgh-prose blockquote{ border-left:3px solid var(--accent-b); margin:1.6em 0; padding:.2em 0 .2em 1.2em; color:var(--text-dim); font-style:italic; }
.pgh-author-box{ display:flex; gap:16px; padding:24px; border-radius:var(--radius-l); background:var(--surface); border:1px solid var(--border); margin:48px 0; }

/* ---------- Author / EEAT ---------- */
.pgh-eeat{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.pgh-eeat span{ font-size:12.5px; color:var(--text-faint); background:var(--bg-elev-2); padding:5px 10px; border-radius:100px; border:1px solid var(--border); }

/* ---------- Footer ---------- */
.pgh-footer{ border-top:1px solid var(--border); padding:56px 0 30px; margin-top:60px; background:var(--bg-elev-1); }
.pgh-footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; }
@media (max-width:800px){ .pgh-footer-grid{ grid-template-columns:1fr 1fr; } }
.pgh-footer h4{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin-bottom:14px; }
.pgh-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pgh-footer a{ color:var(--text-dim); font-size:14.5px; }
.pgh-footer a:hover{ color:var(--text); }
.pgh-footer-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:44px; padding-top:24px; border-top:1px solid var(--border); flex-wrap:wrap; gap:12px; color:var(--text-faint); font-size:13px; }

/* ---------- Cookie banner ---------- */
#pgh-cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9999;
  max-width:640px; margin:0 auto;
  background:rgba(16,18,22,.92); backdrop-filter:blur(16px);
  border:1px solid var(--border-strong); border-radius:var(--radius-l);
  padding:22px; box-shadow:var(--shadow-hard);
  display:none;
}
#pgh-cookie-banner.show{ display:block; animation:pgh-rise .5s var(--ease); }
@keyframes pgh-rise{ from{ transform:translateY(30px); opacity:0;} to{ transform:translateY(0); opacity:1; } }
#pgh-cookie-banner p{ margin:0 0 14px; font-size:14px; color:var(--text-dim); }
.pgh-cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.pgh-cookie-actions button{ flex:1; }

/* ---------- Misc ---------- */
.pgh-badge-list{ display:flex; flex-wrap:wrap; gap:10px; }
.pgh-pill{ padding:8px 14px; border-radius:100px; background:var(--surface); border:1px solid var(--border); font-size:13.5px; color:var(--text-dim); }
.pgh-divider{ height:1px; background:var(--border); margin:56px 0; }
.pgh-empty{ text-align:center; padding:80px 20px; color:var(--text-dim); }
.pgh-search-box{ display:flex; gap:10px; max-width:420px; }
.pgh-search-box input{ flex:1; }
.pgh-search-box button{ background:var(--surface-strong); border:1px solid var(--border-strong); border-radius:var(--radius-s); padding:0 18px; color:var(--text); }