/* =========================================================
   HASHHOG // BIZARRE CHAIN — manga-action themed section
   Ported from the uploaded design (styles.css) for mtclinton.com.
   Self-contained: loaded only on /hashhog/ pages. The editor-only
   "tweaks" panel from the original has been removed.
   ========================================================= */

:root {
  /* DEFAULT: anime cel-shaded — saturated jewel tones */
  --paper:  #f6e8c5;     /* warm cel cream */
  --paper-2: #f3c6d9;    /* bubblegum */
  --paper-3: #b8e3ff;    /* sky cel */
  --ink:    #1a0a2e;     /* inked violet-black */
  --ink-2:  #2b1450;
  --ink-3:  #3d1f70;
  --accent: #ff2bd0;     /* magenta */
  --accent-2: #00e5ff;   /* electric cyan */
  --accent-3: #ffe14d;   /* acid yellow */
  --accent-4: #7c3aed;   /* royal violet */
  --accent-5: #22c55e;   /* neon lime */
  --muted:  #5a3e7a;
  --rule:   #1a0a2e;
  --border: rgba(26,10,46,.18);
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --radial: radial-gradient(var(--ink) 1px, transparent 1.4px);
}

[data-palette="ink-red"] {
  --paper: #f3eee4; --paper-2: #e8e0d0; --paper-3: #d8cdb7;
  --ink: #0a0908; --ink-2: #1a1716; --ink-3: #2c2623;
  --accent: #c4201c; --accent-2: #00d2ff; --accent-3: #ffd23f;
  --muted: #6a5c49;
}
[data-palette="ink-purple"] { --accent: #6b2dd6; --accent-2: #ffe14d; --accent-3: #00d2ff; }
[data-palette="sepia"] {
  --paper: #efe2c8; --paper-2: #e1cfa9; --paper-3: #caad7b;
  --ink: #2c1d10; --ink-2: #3a2818; --ink-3: #4a3526;
  --accent: #8a2e0b; --accent-2: #3d6b4f; --accent-3: #c79a3a; --muted: #6e5638;
}
[data-palette="neon"] {
  --paper: #050010; --paper-2: #0c0625; --paper-3: #140a35;
  --ink: #ffe5ff; --ink-2: #f0d6ff; --ink-3: #c9a8ff;
  --accent: #ff2bd0; --accent-2: #00ffd1; --accent-3: #ffe14d; --muted: #8868aa;
  --border: rgba(255,229,255,.2);
  --shadow: 6px 6px 0 #ff2bd0; --shadow-sm: 3px 3px 0 #ff2bd0;
}
[data-palette="pure-ink"] { --accent: #0a0908; --accent-2: #0a0908; --accent-3: #0a0908; }
[data-palette="anime-dream"] {
  --paper: #f6e8c5; --paper-2: #f3c6d9; --paper-3: #b8e3ff;
  --ink: #1a0a2e; --ink-2: #2b1450; --ink-3: #3d1f70;
  --accent: #ff2bd0; --accent-2: #00e5ff; --accent-3: #ffe14d; --accent-4: #7c3aed;
  --muted: #5a3e7a;
}
[data-palette="sunset-strike"] {
  --paper: #ffd9b8; --paper-2: #ffb3c1; --paper-3: #c7a0ff;
  --ink: #2d0e4e; --ink-2: #4a1574; --ink-3: #6a2ea3;
  --accent: #ff5a3c; --accent-2: #ffe14d; --accent-3: #00e5ff; --accent-4: #ff2bd0;
  --muted: #6a2a4a;
}
[data-palette="stand-aurora"] {
  --paper: #1b0740; --paper-2: #3a0b6a; --paper-3: #0a1b4a;
  --ink: #ffe14d; --ink-2: #f3c6d9; --ink-3: #b8e3ff;
  --accent: #ff2bd0; --accent-2: #00e5ff; --accent-3: #a2ff3a; --accent-4: #ffa30a;
  --muted: #b8a4e8;
  --border: rgba(255,225,77,.25);
  --shadow: 6px 6px 0 #ff2bd0; --shadow-sm: 3px 3px 0 #ff2bd0;
}

[data-intensity="subtle"] { --shadow: 3px 3px 0 var(--ink); --shadow-sm: 2px 2px 0 var(--ink); }
[data-intensity="balanced"] { --shadow: 4px 4px 0 var(--ink); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.hh {
  font-family: 'Zilla Slab', Georgia, serif;
  font-weight: 600;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  cursor: default;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(circle at 0% 0%, color-mix(in oklab, var(--paper-2) 60%, transparent), transparent 50%),
    radial-gradient(circle at 100% 30%, color-mix(in oklab, var(--paper-3) 60%, transparent), transparent 55%),
    radial-gradient(circle at 20% 100%, color-mix(in oklab, var(--accent-3) 35%, transparent), transparent 60%);
  background-attachment: fixed;
}

.hh a { color: inherit; text-decoration: none; }
.hh button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* -------- GLOBAL GRAIN -------- */
body.hh::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[data-grain="false"] body.hh::before { display: none; }

/* ---------- Typography ---------- */
.hh .display   { font-family: 'Bungee', sans-serif; letter-spacing: .02em; }
.hh .display-shade { font-family: 'Bungee Shade', sans-serif; }
.hh .holler    { font-family: 'Rubik Mono One', sans-serif; letter-spacing: .04em; }
.hh .mono      { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.hh .italic-loud { font-style: italic; font-weight: 900; }
.hh h1, .hh h2, .hh h3, .hh h4 { margin: 0; font-family: 'Bungee', sans-serif; font-weight: 400; letter-spacing: .01em; }

/* ------------- Layout helpers ------------- */
.hh .container { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.hh .section { padding: 96px 0; position: relative; }

/* ------------- PANEL ------------- */
.hh .panel { background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow); position: relative; }
.hh .panel-glow { box-shadow: var(--shadow), 0 0 0 1px var(--ink), 0 0 40px color-mix(in oklab, var(--accent) 40%, transparent); }
.hh .panel-holo {
  background: linear-gradient(120deg,
    color-mix(in oklab, var(--accent) 15%, var(--paper)) 0%,
    color-mix(in oklab, var(--accent-2) 15%, var(--paper)) 35%,
    color-mix(in oklab, var(--accent-3) 20%, var(--paper)) 70%,
    color-mix(in oklab, var(--accent-4,var(--accent)) 15%, var(--paper)) 100%);
}
.hh .panel-sm { box-shadow: var(--shadow-sm); }
.hh .panel-tilt-l { transform: rotate(-1.2deg); }
.hh .panel-tilt-r { transform: rotate(1.2deg); }

/* halftone */
.hh .halftone { background-image: var(--radial); background-size: 8px 8px; }
.hh .halftone-lg { background-size: 14px 14px; }
.hh .halftone-fade { background-image: linear-gradient(180deg, var(--paper), transparent 70%), var(--radial); background-size: 100% 100%, 10px 10px; }
[data-halftone="false"] .halftone, [data-halftone="false"] .halftone-lg, [data-halftone="false"] .halftone-fade { background-image: none !important; }

/* ------------- SPEED LINES ------------- */
.hh .speedlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 3px, var(--ink) 3px 4px, transparent 4px 24px);
  mask: radial-gradient(ellipse at center, transparent 10%, black 60%);
  -webkit-mask: radial-gradient(ellipse at center, transparent 10%, black 60%);
  opacity: 0; transition: opacity .2s;
}
.hh .speedlines-v {
  background: repeating-linear-gradient(0deg, transparent 0 3px, var(--ink) 3px 4px, transparent 4px 18px);
  mask: linear-gradient(90deg, transparent, black 30%, black 70%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, black 30%, black 70%, transparent);
}
.hh .speedlines-radial {
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--ink) 0 .4deg, transparent .4deg 4deg);
  mask: radial-gradient(circle, transparent 20%, black 45%, transparent 80%);
  -webkit-mask: radial-gradient(circle, transparent 20%, black 45%, transparent 80%);
}
.hh .group:hover > .speedlines, .hh .speedlines-always { opacity: 1; }
[data-speedlines="false"] .speedlines { display: none; }

.hh .skew-hover { transition: transform .25s cubic-bezier(.2,.9,.3,1.2), box-shadow .2s; }
.hh .skew-hover:hover { transform: translate(-3px,-3px) rotate(-.6deg) skew(-1deg,-1deg); box-shadow: 10px 10px 0 var(--ink); }
[data-panel-skew="false"] .skew-hover:hover { transform: translate(-2px,-2px); }

/* ------------- BUTTONS ------------- */
.hh .btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Bungee', sans-serif; font-size: 15px; padding: 14px 22px;
  background: linear-gradient(120deg, var(--accent), var(--accent-4, var(--accent)));
  color: var(--paper); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--accent-3);
  transition: transform .15s, box-shadow .15s; letter-spacing: .05em; text-transform: uppercase;
}
.hh .btn:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--accent-2); }
.hh .btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--accent-2); }
.hh .btn-ghost { background: var(--paper); color: var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.hh .btn-ghost:hover { box-shadow: 8px 8px 0 var(--accent); }

/* ------------- ONOMATOPOEIA ------------- */
.hh .onom {
  font-family: 'Rubik Mono One', sans-serif; font-style: italic; letter-spacing: .02em;
  color: var(--paper); -webkit-text-stroke: 2px var(--ink); text-stroke: 2px var(--ink);
  text-shadow: 4px 4px 0 var(--accent), 7px 7px 0 var(--ink);
  line-height: .9; display: inline-block; transform-origin: center;
}
.hh .onom-sm { -webkit-text-stroke: 1px var(--ink); text-shadow: 2px 2px 0 var(--accent), 4px 4px 0 var(--ink); }
.hh .onom-burst { animation: onom-in .5s cubic-bezier(.2,.8,.3,1.2) both; }
@keyframes onom-in {
  0%   { transform: scale(.3) rotate(-18deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(-4deg); opacity: 1; }
  100% { transform: scale(1) rotate(-5deg); opacity: 1; }
}
[data-onomatopoeia="false"] .onom-burst, [data-onomatopoeia="false"] .onom { display: none !important; }

/* typewriter */
.hh .typewriter {
  display: inline-block; overflow: hidden; white-space: nowrap; border-right: 3px solid var(--accent);
  animation: tw 1.4s steps(28) both, tw-cursor 1s step-end infinite;
}
@keyframes tw { from { width: 0; } to { width: 100%; } }
@keyframes tw-cursor { 50% { border-color: transparent; } }
[data-typewriter="false"] .typewriter { animation: none; border: 0; width: auto; white-space: normal; }

/* ---------- Cursor aura ---------- */
.hh .aura {
  position: fixed; width: 380px; height: 380px; border-radius: 50%;
  pointer-events: none; z-index: 9999; mix-blend-mode: multiply;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--accent) 55%, transparent) 0%,
    color-mix(in oklab, var(--accent-2) 30%, transparent) 35%, transparent 70%);
  transform: translate(-50%,-50%) scale(.9);
  transition: transform .12s cubic-bezier(.2,.9,.3,1.2), opacity .2s; opacity: .9;
}
[data-palette="neon"] .aura { mix-blend-mode: screen; }
[data-cursor-aura="false"] .aura { display: none; }

/* ---------- NAV ---------- */
.hh .nav { position: sticky; top: 0; z-index: 500; background: var(--ink); color: var(--paper); border-bottom: 4px solid var(--accent); }
.hh .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 12px; flex-wrap: wrap; }
.hh .logo { font-family: 'Bungee', sans-serif; font-size: 22px; letter-spacing: .05em; display: inline-flex; align-items: center; gap: 10px; }
.hh .logo .logo-mark {
  display:inline-flex; width: 36px; height: 36px; align-items:center; justify-content:center;
  background: var(--accent); color: var(--paper); border: 2px solid var(--paper);
  transform: rotate(-6deg); font-family: 'Rubik Mono One', sans-serif; font-size: 18px;
}
.hh .nav a.navlink {
  font-family: 'Bungee', sans-serif; font-size: 13px; padding: 8px 14px; margin-left: 6px;
  border: 2px solid transparent; transition: all .15s; text-transform: uppercase; letter-spacing: .06em;
}
.hh .nav a.navlink:hover, .hh .nav a.navlink.active {
  border-color: var(--accent); background: var(--accent); color: var(--paper); transform: rotate(-1deg);
}

/* ---------- HERO ---------- */
.hh .hero { position: relative; overflow: hidden; background: var(--paper); border-bottom: 4px solid var(--ink); }
.hh .hero .title { font-family: 'Bungee', sans-serif; font-size: clamp(56px, 11vw, 180px); line-height: .88; letter-spacing: -.01em; }
.hh .hero .title .stroke { -webkit-text-stroke: 3px var(--ink); -webkit-text-fill-color: transparent; color: transparent; }
.hh .hero .title .crimson { color: var(--accent); text-shadow: 6px 6px 0 var(--ink), 12px 12px 0 var(--accent-3), 18px 18px 0 var(--accent-2); }
.hh .rainbow-text {
  background: linear-gradient(92deg, var(--accent) 0%, var(--accent-4) 20%, var(--accent-2) 40%, var(--accent-5,var(--accent-2)) 60%, var(--accent-3) 80%, var(--accent) 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 2px var(--ink); animation: holo 6s linear infinite;
}
@keyframes holo { to { background-position: 220% 0; } }
.hh .diag-burst {
  position: absolute; inset: -20% -10%;
  background: repeating-conic-gradient(from 10deg at 70% 35%, var(--ink) 0 1deg, transparent 1deg 6deg);
  mask: radial-gradient(circle at 70% 35%, black 0, black 18%, transparent 45%);
  -webkit-mask: radial-gradient(circle at 70% 35%, black 0, black 18%, transparent 45%);
  opacity: .6; pointer-events: none;
}

/* ---------- STAT CHART ---------- */
.hh .stat-hex { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.hh .stat-hex .row { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--ink); padding: 4px 0; }
.hh .stat-hex .grade { font-family: 'Bungee', sans-serif; font-size: 16px; color: var(--accent); }
.hh .stat-hex .grade.A { color: var(--accent); }
.hh .stat-hex .grade.B { color: var(--ink); }
.hh .stat-hex .grade.C { color: var(--muted); }
.hh .stat-hex .grade.D { color: var(--muted); opacity: .7; }

/* ---------- CARD GRID ---------- */
.hh .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px; }
.hh .spirit-card { position: relative; background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow); overflow: hidden; }
.hh .spirit-card .portrait { position: relative; aspect-ratio: 1/1; overflow: hidden; border-bottom: 3px solid var(--ink); background: var(--paper-2); }
.hh .spirit-card .portrait svg { display:block; width:100%; height:100%; }
.hh .spirit-card .codename-strip {
  position: absolute; top: 12px; left: -6px; font-family: 'Bungee', sans-serif; font-size: 11px; letter-spacing: .1em;
  background: var(--ink); color: var(--paper); padding: 4px 12px 4px 16px; transform: rotate(-2deg); z-index: 3;
}
.hh .spirit-card .lang-tag {
  position: absolute; top: 12px; right: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  background: var(--paper); color: var(--ink); padding: 3px 8px; border: 2px solid var(--ink); z-index: 3;
}
.hh .spirit-card .body { padding: 18px 20px 22px; }
.hh .spirit-card .body h3 { font-family: 'Bungee', sans-serif; font-size: 26px; line-height: 1; }
.hh .spirit-card .body .user-tagline { font-size: 14px; color: var(--muted); margin: 6px 0 12px; font-weight: 600; font-style: italic; }

/* ---------- RIBBONS ---------- */
.hh .ribbon {
  font-family: 'Bungee', sans-serif; background: linear-gradient(95deg, var(--accent), var(--accent-4, var(--accent)));
  color: var(--paper); padding: 6px 14px; display: inline-block; transform: rotate(-2deg);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); letter-spacing: .05em; text-transform: uppercase; font-size: 13px;
}
.hh .ribbon-gold { background: var(--accent-3); color: var(--ink); }
.hh .ribbon-cyan { background: var(--accent-2); color: var(--ink); }
.hh .ribbon-violet { background: var(--accent-4, var(--accent)); color: var(--paper); }

/* ---------- DOSSIER ---------- */
.hh .dossier-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; }
@media (max-width: 860px) { .hh .dossier-head { grid-template-columns: 1fr; } }
.hh .stamp {
  width: 160px; height: 160px; border: 4px double var(--accent); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--accent);
  font-family: 'Bungee', sans-serif; transform: rotate(-12deg); position: absolute; top: 24px; right: 24px;
  background: var(--paper); text-align: center; line-height: .95; font-size: 22px;
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 8px color-mix(in oklab, var(--accent) 40%, transparent); opacity: .9;
}

/* ---------- PROGRESS ---------- */
.hh .progress { height: 26px; background: var(--paper-2); border: 3px solid var(--ink); overflow: hidden; position: relative; }
.hh .progress > i {
  display: block; height: 100%;
  background: repeating-linear-gradient(45deg, var(--accent) 0 10px, color-mix(in oklab, var(--accent) 70%, var(--ink)) 10px 20px);
  border-right: 3px solid var(--ink); transition: width .6s cubic-bezier(.2,.8,.3,1);
}
.hh .progress .pct { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: 'Bungee', sans-serif; font-size: 14px; color: var(--paper); mix-blend-mode: difference; }

/* ---------- TABLE ---------- */
.hh .table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: 'JetBrains Mono', monospace; }
.hh .table th, .hh .table td { padding: 10px 12px; border-bottom: 2px solid var(--ink); border-right: 2px solid var(--ink); text-align: left; font-size: 13px; }
.hh .table th { background: var(--ink); color: var(--paper); font-family: 'Bungee', sans-serif; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.hh .table tr td:first-child { border-left: 2px solid var(--ink); }
.hh .table tr:first-child th { border-top: 2px solid var(--ink); }
.hh .tick { color: var(--accent); font-weight: 900; }
.hh .cross { color: var(--muted); opacity: .6; }

/* ---------- MINI UI ---------- */
.hh .kbd { font-family: 'JetBrains Mono', monospace; font-size: 11px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); padding: 1px 6px; border-radius: 3px; box-shadow: 2px 2px 0 var(--ink); }
.hh .rule-thick { height: 6px; background: var(--ink); border: none; }
.hh .rule-dotted { border: none; border-top: 3px dashed var(--ink); }

/* ---------- Reveal ---------- */
.hh .reveal { opacity: 0; transform: translateY(14px); transition: all .6s cubic-bezier(.2,.8,.3,1); }
.hh .reveal.in { opacity: 1; transform: none; }

/* ---------- Sticker ---------- */
.hh .sticker {
  display: inline-block; background: var(--accent-3); color: var(--ink); padding: 4px 10px;
  font-family: 'Bungee', sans-serif; font-size: 11px; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-4deg);
}

/* Responsive */
@media (max-width: 720px) { .hh .section { padding: 56px 0; } .hh .hero .title { font-size: clamp(40px, 13vw, 72px); } }

/* Footer */
.hh footer.foot { background: var(--ink); color: var(--paper); padding: 60px 0 40px; border-top: 6px solid var(--accent); position: relative; overflow: hidden; }
.hh footer.foot .container { position: relative; z-index: 2; }
.hh footer.foot a:hover { color: var(--accent-3); }
.hh footer .mini { font-family: 'JetBrains Mono', monospace; font-size: 12px; opacity: .7; }

/* back-to-blog crumb */
.hh .hh-back { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--paper); opacity: .8; }
.hh .hh-back:hover { opacity: 1; color: var(--accent-3); }

/* 404 */
.hh .big-404 { font-family: 'Bungee Shade', sans-serif; font-size: clamp(140px, 32vw, 420px); line-height: .85; color: var(--accent); text-shadow: 10px 10px 0 var(--ink); }

/* radar wrapper */
.hh .radar { position: relative; }
.hh .radar svg { display: block; width: 100%; height: auto; }

/* grade helper for stat rows where S maps to A color */
.hh .stat-hex .grade.S { color: var(--accent); }