/* ============================================================
   TASK BAR HERO WIKI — design system
   Dark pixel-RPG aesthetic. Midnight indigo + loot-rarity accents.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* ---- surfaces ---- */
  --bg:        #0a0c18;
  --bg-grad:   #0e1124;
  --panel:     #12152a;
  --surface:   #181c38;
  --surface-2: #20264a;
  --border:    #2c3361;
  --border-2:  #3a4279;

  /* ---- text ---- */
  --text:   #eef0ff;
  --muted:  #9aa2d4;
  --faint:  #6670a8;

  /* ---- brand / loot rarity accents ---- */
  --loot:      #57e389;   /* primary action — loot green */
  --loot-deep: #2bb866;
  --gold:      #ffce4a;   /* coins / highlights */
  --rare:      #45c6ff;   /* rare cyan */
  --epic:      #b06bff;   /* legendary purple */
  --danger:    #ff5d72;   /* boss red */
  --common:    #8b93c4;

  /* ---- derived ---- */
  --accent:        var(--loot);
  --accent-ink:    #04140b;        /* text on accent buttons */
  --shadow-hard:   4px 4px 0 #05060f;
  --shadow-hard-sm:3px 3px 0 #05060f;
  --radius:        4px;            /* pixel UIs = sharp corners */
  --radius-lg:     8px;
  --maxw:          1240px;

  --font-pixel: 'Press Start 2P', monospace;
  --font-mono:  'VT323', monospace;
  --font-body:  'Space Grotesk', system-ui, sans-serif;
}

/* ---- soft / modern variant (Tweak) ---- */
[data-style="modern"]{
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-hard: 0 14px 34px -12px rgba(0,0,0,.7);
  --shadow-hard-sm: 0 8px 20px -10px rgba(0,0,0,.6);
}

/* ---- accent swaps (Tweak) ---- */
[data-accent="gold"]{ --accent: var(--gold); --accent-ink:#241a00; }
[data-accent="cyan"]{ --accent: var(--rare); --accent-ink:#021420; }
[data-accent="purple"]{ --accent: var(--epic); --accent-ink:#160427; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
}

/* page-wide background texture */
.bg-texture{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(176,107,255,.16), transparent 60%),
    radial-gradient(1000px 700px at 0% 0%, rgba(69,198,255,.12), transparent 55%),
    linear-gradient(180deg, var(--bg-grad), var(--bg) 60%);
}
.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(120,134,220,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,134,220,.045) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(180deg, #000 0%, transparent 70%);
}
[data-texture="scanlines"] .bg-grid{
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
  background-size:auto;
  mask-image:linear-gradient(180deg,#000,transparent 85%);
}
[data-texture="plain"] .bg-grid{ display:none; }

img{ image-rendering:pixelated; }

a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }

/* ---------- pixel typographic helpers ---------- */
.pixel{ font-family:var(--font-pixel); line-height:1.05; text-transform:uppercase; }
.mono{ font-family:var(--font-mono); }
.eyebrow{
  font-family:var(--font-pixel); font-size:10px; letter-spacing:.08em;
  color:var(--accent); text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:""; width:14px; height:14px; background:var(--accent);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }

h1,h2,h3{ font-family:var(--font-body); font-weight:700; letter-spacing:-.02em; margin:0; }
.section-title{ font-size:clamp(26px,3.4vw,40px); line-height:1.05; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--font-pixel); font-size:11px; text-transform:uppercase; letter-spacing:.02em;
  padding:15px 20px; border:2px solid #05060f; border-radius:var(--radius);
  background:var(--surface-2); color:var(--text); box-shadow:var(--shadow-hard-sm);
  transition:transform .08s ease, box-shadow .08s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 #05060f; }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 #05060f; }
.btn-primary{ background:var(--accent); color:var(--accent-ink); border-color:#05060f; }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-ghost{ background:transparent; box-shadow:none; border-color:var(--border-2); }
.btn-ghost:hover{ background:var(--surface); box-shadow:none; }
[data-style="modern"] .btn{ border-width:0; font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:0; text-transform:none; }

/* ---------- pixel card ---------- */
.card{
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-hard);
  position:relative;
}
[data-style="modern"] .card{ border-color:var(--border); }
.card-pad{ padding:22px; }
.card-hover{ transition:transform .12s ease, box-shadow .12s ease, border-color .15s; }
.card-hover:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 #05060f; border-color:var(--border-2); }
[data-style="modern"] .card-hover:hover{ box-shadow:0 22px 44px -16px rgba(0,0,0,.8); }

/* ---------- rarity tag ---------- */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:16px; line-height:1;
  padding:3px 9px 2px; border-radius:3px; border:1.5px solid currentColor;
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
}
.tag.loot{ color:var(--loot); }
.tag.gold{ color:var(--gold); }
.tag.rare{ color:var(--rare); }
.tag.epic{ color:var(--epic); }
.tag.danger{ color:var(--danger); }
.tag.common{ color:var(--common); }

/* tier pill */
.tier{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  font-family:var(--font-pixel); font-size:14px; border-radius:6px;
  border:2px solid #05060f; box-shadow:var(--shadow-hard-sm); color:#05060f;
}
.tier-S{ background:var(--gold); }
.tier-A{ background:var(--loot); }
.tier-B{ background:var(--rare); }
.tier-C{ background:var(--epic); color:#fff; }

/* ---------- divider dots ---------- */
.dotrow{ display:flex; gap:6px; }
.dotrow i{ width:7px; height:7px; background:var(--border-2); display:block; }
.dotrow i.on{ background:var(--accent); }