/* =====================================================================
   SULU WOUNDERLAND DESIGN SYSTEM  v0.2  ("Comic Fight HUD")
   Sumber gaya: Nox (mint, ink outline), logo Sulu Cult Brew (magenta brush),
   poster Trial Opening (lettering komik outline, blok magenta, kotak info rounded),
   Ultimate Marvel vs Capcom 3 UI (panel miring, halftone, ink tebal).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Bangers&family=Outfit:wght@400;600;700;900&family=Share+Tech+Mono&display=swap');

:root{
  /* --- primitive --- */
  --sulu-magenta:#EA018A;  --sulu-magenta-deep:#A8005F; --sulu-magenta-soft:#FF5FB8;
  --sulu-ink:#121512;      --sulu-ink-soft:#2A2E2A;
  --sulu-paper:#FFFCE6;    --sulu-paper-dim:#EFE9CF;   --sulu-white:#FFFFFF;
  --sulu-mint:#C7E3CF;     --sulu-mint-deep:#7FB394;
  --sulu-blush:#F7AAAC;
  --lantern-red:#E4322B;   --lantern-blue:#2B3FB0;     --neon-cyan:#7FF7E6;
  /* --- semantic --- */
  --bg:var(--sulu-paper); --fg:var(--sulu-ink); --accent:var(--sulu-magenta); --accent-fg:var(--sulu-white);
  --surface:var(--sulu-white); --line:var(--sulu-ink); --muted:#6B6E63; --hud:var(--neon-cyan);
  --ok:var(--sulu-mint-deep); --warn:#F2B705; --danger:var(--lantern-red);
  /* --- type --- */
  --font-display:'Luckiest Guy','Bangers',Impact,sans-serif;   /* judul komik */
  --font-shout:'Bangers','Luckiest Guy',Impact,sans-serif;     /* aksen miring / onomatope */
  --font-body:'Outfit','Rubik',system-ui,sans-serif;
  --font-mono:'Share Tech Mono',ui-monospace,monospace;
  --fs-1:clamp(44px,12vw,96px); --fs-2:clamp(30px,7vw,56px); --fs-3:24px; --fs-4:18px; --fs-5:15px; --fs-6:12px;
  /* --- shape & ink --- */
  --ink-w:3px; --ink-w-lg:5px; --stroke-w:.06em; --r-sm:8px; --r-md:14px; --r-pill:999px;
  --shadow-ink:5px 5px 0 var(--sulu-ink); --shadow-mag:6px 6px 0 var(--sulu-magenta);
  --skew:-8deg;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
}
.theme-dark, [data-theme="dark"]{ --bg:var(--sulu-ink); --fg:var(--sulu-paper); --surface:var(--sulu-ink-soft); --line:var(--sulu-paper); --muted:#B7B9AA; }
.theme-magenta{ --bg:var(--sulu-magenta); --fg:var(--sulu-white); --surface:rgba(255,255,255,.08); --line:var(--sulu-white); --muted:#FFD7EC; }

/* ---------- Base ---------- */
.sulu, .sulu *{ box-sizing:border-box }
.sulu{ background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:var(--fs-5); line-height:1.4 }

/* ---------- Texture ---------- */
.halftone{ position:relative }
.halftone::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:var(--ht-o,.14);
  background-image:radial-gradient(var(--ht-c,var(--sulu-ink)) 1.1px,transparent 1.3px); background-size:var(--ht-s,9px) var(--ht-s,9px);
  mask-image:var(--ht-mask,linear-gradient(180deg,#000,transparent)); -webkit-mask-image:var(--ht-mask,linear-gradient(180deg,#000,transparent)); }
.paper{ background-color:var(--sulu-paper); background-image:
  repeating-linear-gradient(0deg,rgba(18,21,18,.025) 0 1px,transparent 1px 3px),
  radial-gradient(circle at 20% 10%,rgba(18,21,18,.05),transparent 40%) }
.tape{ position:relative } .tape::after{ content:""; position:absolute; left:50%; top:-10px; width:70px; height:22px; transform:translateX(-50%) rotate(-3deg); background:rgba(255,252,230,.85); border:1px solid rgba(18,21,18,.2) }

/* ---------- Typography ---------- */
.h-shout{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-1); line-height:.86; letter-spacing:.01em; text-transform:uppercase; margin:0;
  color:var(--sulu-white); -webkit-text-stroke:var(--stroke-w) var(--sulu-ink); paint-order:stroke fill;
  text-shadow:.07em .07em 0 var(--sulu-ink); text-wrap:balance }
.h-shout.paper-fill{ color:var(--sulu-paper) }
.h-shout.mag-fill{ color:var(--sulu-magenta) }
.h-shout .w{ display:inline-block; transform:rotate(var(--rot,0deg)) translateY(var(--ty,0)) } /* wobble per kata via JS */
.h-shout.wobble .l{ display:inline-block; transform:rotate(var(--rot,0deg)) translateY(var(--ty,0)) }
.h-tag{ font-family:var(--font-shout); font-size:var(--fs-2); line-height:.95; letter-spacing:.02em; color:var(--sulu-paper); -webkit-text-stroke:.04em var(--sulu-ink); paint-order:stroke fill; text-shadow:.06em .06em 0 var(--sulu-ink); transform:rotate(-4deg); display:inline-block; margin:0 }
.h-sub{ font-family:var(--font-body); font-weight:900; font-size:var(--fs-3); line-height:1.1; margin:0; letter-spacing:-.01em }
.eyebrow{ font-family:var(--font-body); font-weight:700; font-size:var(--fs-6); letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
.mono{ font-family:var(--font-mono); font-size:var(--fs-6); letter-spacing:.14em; text-transform:uppercase }
.lead{ font-weight:700; font-size:var(--fs-4); line-height:1.3 }
.speech{ position:relative; display:inline-block; background:var(--sulu-paper); color:var(--sulu-ink); font-family:var(--font-display); font-size:var(--fs-3); line-height:1; padding:12px 18px 10px; border:var(--ink-w) solid var(--sulu-ink); box-shadow:var(--shadow-mag); transform:rotate(-2deg) }
.speech::after{ content:""; position:absolute; left:28px; bottom:-15px; border:12px solid transparent; border-top-color:var(--sulu-ink); border-bottom:0 }

/* ---------- Ink outline utility ---------- */
.ink{ border:var(--ink-w) solid var(--sulu-ink) } .ink-lg{ border:var(--ink-w-lg) solid var(--sulu-ink) }
.sticker{ background:var(--sulu-paper); color:var(--sulu-ink); border:var(--ink-w) solid var(--sulu-ink); box-shadow:var(--shadow-ink); border-radius:var(--r-sm) }
.sticker.mag{ background:var(--sulu-magenta); color:var(--sulu-white) }
.sticker.mint{ background:var(--sulu-mint) }

/* ---------- Buttons ---------- */
.btn{ appearance:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; font:900 16px/1 var(--font-body); letter-spacing:.02em; text-transform:uppercase;
  padding:16px 24px; border-radius:var(--r-pill); border:var(--ink-w) solid var(--sulu-ink); background:var(--sulu-magenta); color:var(--sulu-white); box-shadow:0 5px 0 var(--sulu-ink); text-decoration:none; transition:transform .08s, box-shadow .08s }
.btn:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--sulu-ink) }
.btn:focus-visible{ outline:3px solid var(--neon-cyan); outline-offset:2px }
.btn.paper{ background:var(--sulu-paper); color:var(--sulu-ink) } .btn.mint{ background:var(--sulu-mint); color:var(--sulu-ink) } .btn.ghost{ background:transparent; color:currentColor; border-color:currentColor; box-shadow:none }
.btn.sm{ font-size:13px; padding:11px 16px } .btn.lg{ font-size:19px; padding:20px 32px }
.btn:disabled{ opacity:.45; cursor:not-allowed }

/* ---------- Info box (dari poster Trial Opening) ---------- */
.infobox{ border:2px solid currentColor; border-radius:var(--r-md); padding:12px 16px }
.infobox .t{ font-weight:900; font-size:var(--fs-3); line-height:1.05 } .infobox .d{ font-weight:600; font-size:var(--fs-5); opacity:.95; margin-top:2px }
.chip{ display:inline-flex; align-items:center; gap:6px; font:700 12px/1 var(--font-body); text-transform:uppercase; letter-spacing:.08em; padding:7px 12px; border-radius:var(--r-pill); border:2px solid var(--sulu-ink); background:var(--sulu-paper); color:var(--sulu-ink) }
.chip.mag{ background:var(--sulu-magenta); color:#fff } .chip.mint{ background:var(--sulu-mint) } .chip.ink{ background:var(--sulu-ink); color:var(--sulu-paper) }

/* ---------- Fight HUD panels (UMvC3-flavoured, dipakai di AR) ---------- */
.hud-panel{ position:relative; background:var(--sulu-paper); color:var(--sulu-ink); border:var(--ink-w) solid var(--sulu-ink); box-shadow:var(--shadow-mag); padding:10px 14px 12px; transform:skewX(var(--skew)); }
.hud-panel > *{ transform:skewX(calc(-1 * var(--skew))) }
.hud-panel.dark{ background:var(--sulu-ink); color:var(--sulu-paper); border-color:var(--sulu-paper); box-shadow:var(--shadow-mag) }
.hud-panel .k{ display:flex; justify-content:space-between; gap:12px; font:700 10px/1 var(--font-body); letter-spacing:.18em; text-transform:uppercase; opacity:.8 } .hud-panel .k b{ color:var(--sulu-magenta); opacity:1 }
.hud-panel .v{ font-family:var(--font-display); font-size:22px; line-height:.95; margin-top:6px; letter-spacing:.01em }
.hud-panel .s{ font-size:12px; font-weight:600; margin-top:4px; line-height:1.3; opacity:.85 }
.meter{ height:12px; border:2px solid var(--sulu-ink); background:var(--sulu-paper); margin-top:8px; transform:skewX(var(--skew)); overflow:hidden; position:relative }
.meter i{ display:block; height:100%; width:var(--w,60%); background:repeating-linear-gradient(90deg,var(--sulu-magenta) 0 10px,var(--sulu-magenta-soft) 10px 12px) }
.meter.mint i{ background:repeating-linear-gradient(90deg,var(--sulu-mint-deep) 0 10px,var(--sulu-mint) 10px 12px) }
.meter.seg i{ background:linear-gradient(90deg,var(--sulu-magenta) 0 calc(100% - 3px),transparent 0); background-size:calc(100% / var(--n,5)) 100% }
.hud-tag{ position:absolute; top:-12px; left:12px; font-family:var(--font-shout); font-size:16px; letter-spacing:.06em; background:var(--sulu-magenta); color:#fff; padding:2px 10px; border:2px solid var(--sulu-ink); transform:rotate(-3deg) }
.ticker{ overflow:hidden; white-space:nowrap; background:var(--sulu-ink); color:var(--sulu-paper); font-family:var(--font-shout); font-size:16px; letter-spacing:.08em; border-top:var(--ink-w) solid var(--sulu-magenta); border-bottom:var(--ink-w) solid var(--sulu-magenta) }
.ticker span{ display:inline-block; padding:6px 0; animation:sulu-tick 18s linear infinite } @keyframes sulu-tick{ from{ transform:translateX(100%) } to{ transform:translateX(-100%) } }
.leader{ position:absolute; height:3px; background:var(--sulu-ink); transform-origin:left } .leader::after{ content:""; position:absolute; right:-6px; top:-5px; width:12px; height:12px; border-radius:50%; background:var(--sulu-magenta); border:2px solid var(--sulu-ink) }
.reticle{ position:relative; aspect-ratio:1 } .reticle i{ position:absolute; width:28%; height:28%; border:var(--ink-w-lg) solid var(--sulu-paper); filter:drop-shadow(2px 2px 0 var(--sulu-ink)) }
.reticle i:nth-child(1){ left:0; top:0; border-right:0; border-bottom:0 } .reticle i:nth-child(2){ right:0; top:0; border-left:0; border-bottom:0 } .reticle i:nth-child(3){ left:0; bottom:0; border-right:0; border-top:0 } .reticle i:nth-child(4){ right:0; bottom:0; border-left:0; border-top:0 }
.reticle.lock i{ border-color:var(--sulu-magenta) }
.stamp{ width:44px; height:44px; border-radius:50%; border:3px dashed var(--muted); display:grid; place-items:center; font-family:var(--font-display); font-size:16px; color:var(--muted) }
.stamp.got{ border:3px solid var(--sulu-magenta); color:var(--sulu-magenta); background:rgba(234,1,138,.12); transform:rotate(-10deg) }
.slash{ position:relative } .slash::before{ content:""; position:absolute; inset:-6px -14px; background:var(--sulu-magenta); transform:skewX(var(--skew)); z-index:-1; border:var(--ink-w) solid var(--sulu-ink) }
.pow{ font-family:var(--font-shout); font-size:var(--fs-2); color:var(--sulu-paper); -webkit-text-stroke:.05em var(--sulu-ink); paint-order:stroke fill; text-shadow:.05em .05em 0 var(--sulu-magenta); transform:rotate(-8deg); display:inline-block }

/* ---------- Layout helpers ---------- */
.block-mag{ background:var(--sulu-magenta); color:#fff } .block-ink{ background:var(--sulu-ink); color:var(--sulu-paper) } .block-mint{ background:var(--sulu-mint); color:var(--sulu-ink) }
.diag-top{ clip-path:polygon(0 12%,100% 0,100% 100%,0 100%) } .diag-bot{ clip-path:polygon(0 0,100% 0,100% 88%,0 100%) }
.stack{ display:flex; flex-direction:column; gap:var(--sp-3) } .row{ display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center }
@media (prefers-reduced-motion:reduce){ .ticker span{ animation:none } }

/* v0.2 ? comic archive */
:root{--ease-pop:cubic-bezier(.2,1.4,.4,1);--t-fast:.18s;--t-mid:.35s;--t-slow:.8s}
.theme-night{--bg:var(--sulu-ink);--fg:var(--sulu-paper);--surface:var(--sulu-ink-soft);--muted:var(--sulu-mint);background:radial-gradient(ellipse at 95% 15%,color-mix(in srgb,var(--sulu-magenta-deep) 45%,transparent),transparent 65%),var(--bg);color:var(--fg)}
.panel-comic{border:4px solid var(--sulu-ink);padding:20px;background:var(--sulu-paper);color:var(--sulu-ink);box-shadow:6px 6px 0 var(--sulu-magenta);transform:rotate(var(--tilt,-1.5deg))}
.bubble{position:relative;background:var(--sulu-paper);color:var(--sulu-ink);border:3px solid var(--sulu-ink);border-radius:18px;padding:16px;box-shadow:var(--shadow-ink)}
.bubble::after{content:'';position:absolute;width:18px;height:18px;background:var(--sulu-paper);border-right:3px solid var(--sulu-ink);border-bottom:3px solid var(--sulu-ink);bottom:-12px;left:26px;transform:rotate(45deg)}
.bubble.right::after{left:auto;right:26px}.bubble.left::after{bottom:auto;top:18px;left:-12px;transform:rotate(135deg)}.bubble.down::after{left:50%}
.caption-box{display:inline-block;background:var(--sulu-paper-dim);color:var(--sulu-ink);border:3px solid var(--sulu-ink);padding:8px 12px;font-weight:900;text-transform:uppercase}
.sfx{display:inline-block;font:48px var(--font-shout);color:var(--sulu-paper);-webkit-text-stroke:2px var(--sulu-ink);paint-order:stroke fill;text-shadow:4px 4px var(--sulu-magenta);transform:rotate(-8deg)}
.do-log{font:14px/1.6 var(--font-mono);color:var(--sulu-mint);background:var(--sulu-ink);padding:12px;border-left:2px solid var(--neon-cyan)}
.do-log::after{content:'?';animation:do-caret 1s steps(2,end) infinite}.do-line{position:absolute;z-index:22;pointer-events:none;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:42px;height:2px;background:var(--neon-cyan);box-shadow:0 0 10px var(--neon-cyan)}
.do-line.recording{animation:do-record var(--t-slow) ease-in-out 2}.stamp-big{display:inline-grid;place-items:center;width:140px;height:140px;border:7px double currentColor;border-radius:50%;color:var(--sulu-magenta);font:28px var(--font-display);transform:rotate(-12deg);animation:stamp-in var(--t-mid) var(--ease-pop);mask-image:repeating-linear-gradient(17deg,var(--sulu-ink) 0 5px,transparent 5px 5.7px)}
.grain{background-image:repeating-linear-gradient(0deg,color-mix(in srgb,var(--sulu-ink) 5%,transparent) 0 1px,transparent 1px 3px)}
.btn{min-height:44px}.sulu button:focus-visible,.sulu a:focus-visible{outline:3px solid var(--neon-cyan);outline-offset:4px}
@keyframes do-caret{50%{opacity:0}}@keyframes do-record{50%{width:80px;opacity:.35}}@keyframes stamp-in{from{transform:scale(1.6) rotate(-24deg);opacity:0;filter:drop-shadow(0 0 18px var(--sulu-magenta))}to{transform:scale(1) rotate(-12deg);opacity:1}}
@media(prefers-reduced-motion:reduce){.sulu *,.sulu *::before,.sulu *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Round icon buttons for page navigation (back / prizes) instead of text links. */
.nav-icon{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;box-sizing:border-box;border-radius:50%;border:3px solid var(--sulu-ink);background:var(--sulu-paper);color:var(--sulu-ink);box-shadow:3px 3px 0 var(--sulu-ink);font:900 22px/1 var(--font-body);text-decoration:none;cursor:pointer;padding:0}
.nav-icon:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--sulu-ink)}
.nav-icon.gift{background:var(--warn);font-size:20px}
.nav-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.nav-row .nav-icon{color:var(--sulu-ink);display:inline-grid;min-height:44px}