:root{
  --splat-orange:#FF7B1F; --splat-orange-bright:#FFA147;
  --splat-cyan:#00D2FF; --splat-cyan-bright:#5FE0FF;
  --splat-pink:#F23590; --splat-pink-bright:#FF6BB6;
  --splat-yellow:#FFE600; --splat-lime:#C7F23C; --splat-violet:#9F4FE0;
  --splat-bg-deep:#131730; --splat-bg-panel:#1F2548; --splat-bg-cream:#FFF5E0;
  --splat-foreground:#FFF5E0; --splat-foreground-ink:#1A1410; --splat-foreground-muted:#8B97B8;
  --splat-graffiti-red:#E8344A; --splat-mint:#46E0B5; --splat-muted:#6E7AA0;
  --splat-ease:cubic-bezier(0.36,0,0.4,1.4);
  --splat-ease-overshoot:cubic-bezier(0.5,-0.4,0.3,1.6);
  --splat-fast:100ms; --splat-mid:220ms; --splat-slow:380ms;
  --splat-display:'Bungee','Bowlby One',system-ui,sans-serif;
  --splat-body:'Quicksand','Nunito',system-ui,sans-serif;
  --splat-graffiti:'Bangers','Bungee',system-ui,sans-serif;
  --splat-blob:polygon(20% 0%,35% 8%,50% 0%,68% 6%,82% 0%,92% 14%,100% 28%,96% 45%,100% 60%,92% 78%,82% 92%,65% 100%,48% 94%,30% 100%,15% 92%,4% 78%,0% 60%,6% 45%,0% 28%,8% 14%);
  --splat-blob-2:polygon(15% 4%,30% 0%,45% 8%,60% 0%,78% 6%,92% 0%,100% 18%,94% 35%,100% 52%,90% 70%,100% 85%,82% 96%,65% 90%,48% 100%,32% 92%,18% 100%,5% 88%,0% 72%,8% 55%,0% 38%,4% 22%);
  --splat-blob-3:polygon(28% 0%,52% 6%,78% 0%,96% 18%,100% 42%,92% 64%,100% 82%,76% 100%,52% 92%,28% 100%,8% 84%,0% 60%,4% 38%,0% 16%);
  --splat-tilt:-1.5deg;
  --splat-bloom-orange:0 0 8px var(--splat-orange),0 0 28px rgba(255,123,31,0.6),0 0 64px rgba(255,123,31,0.3);
  --splat-bloom-cyan:0 0 8px var(--splat-cyan),0 0 28px rgba(0,210,255,0.6),0 0 64px rgba(0,210,255,0.3);
  --splat-bloom-pink:0 0 8px var(--splat-pink),0 0 28px rgba(242,53,144,0.6);
  --splat-bloom-yellow:0 0 8px var(--splat-yellow),0 0 28px rgba(255,230,0,0.6);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.splat-theme{
  font-family:var(--splat-body);
  font-weight:700;
  background:var(--splat-bg-deep);
  color:var(--splat-foreground);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  letter-spacing:.01em;
}
body.splat-locked{overflow:hidden}
.splat-theme button{font:inherit}

/* Background */
.splat-bg{position:fixed;inset:0;z-index:-3;background:
  radial-gradient(circle at 12% 18%,rgba(255,123,31,.15),transparent 35%),
  radial-gradient(circle at 88% 22%,rgba(0,210,255,.15),transparent 35%),
  radial-gradient(circle at 30% 82%,rgba(242,53,144,.12),transparent 40%),
  radial-gradient(circle at 80% 78%,rgba(199,242,60,.10),transparent 40%),
  linear-gradient(180deg,#0e1228 0%,#131730 50%,#1a1f3e 100%);
}
.splat-bg::after{content:"";position:absolute;inset:0;background-image:
  repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 2px,transparent 2px 24px),
  repeating-linear-gradient(-45deg,rgba(255,255,255,.015) 0 2px,transparent 2px 28px);
}
.splat-splatters{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.6}
.splat-splatters svg{position:absolute;width:280px;height:280px}
.splat-splatters svg:nth-child(1){top:-40px;left:-60px;color:var(--splat-orange);transform:rotate(15deg)}
.splat-splatters svg:nth-child(2){top:18%;right:-80px;color:var(--splat-cyan);transform:rotate(-25deg);width:340px;height:340px}
.splat-splatters svg:nth-child(3){bottom:25%;left:-70px;color:var(--splat-pink);transform:rotate(40deg);width:220px;height:220px}
.splat-splatters svg:nth-child(4){bottom:-50px;right:10%;color:var(--splat-yellow);transform:rotate(-15deg);width:300px;height:300px;opacity:.5}
.splat-splatters svg:nth-child(5){top:48%;left:38%;color:var(--splat-lime);transform:rotate(60deg);width:180px;height:180px;opacity:.35}

/* App bar */
.splat-appbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:linear-gradient(90deg,var(--splat-orange) 0%,var(--splat-pink) 50%,var(--splat-cyan) 100%);
  border-bottom:4px solid var(--splat-foreground-ink);
  box-shadow:0 6px 0 rgba(0,0,0,.3);
  transform:rotate(-.3deg);
}
.splat-appbar__brand{display:flex;align-items:center;gap:14px}
.splat-appbar__mark{
  width:46px;height:46px;
  background:var(--splat-bg-deep);
  clip-path:var(--splat-blob);
  border:3px solid var(--splat-foreground-ink);
  display:grid;place-items:center;
  color:var(--splat-yellow);
  font-family:var(--splat-display);
  font-size:22px;
}
.splat-appbar__title{
  font-family:var(--splat-display);
  font-size:24px;
  color:var(--splat-foreground);
  text-shadow:3px 3px 0 var(--splat-foreground-ink);
  letter-spacing:.04em;
}
.splat-appbar__nav{display:flex;gap:6px;flex-wrap:wrap}
.splat-appbar__nav a{
  font-family:var(--splat-display);
  color:var(--splat-foreground-ink);
  text-decoration:none;
  font-size:11px;
  padding:6px 10px;
  background:var(--splat-bg-cream);
  border:2.5px solid var(--splat-foreground-ink);
  transform:rotate(var(--tilt,-1deg));
  transition:transform var(--splat-fast) var(--splat-ease),background var(--splat-fast);
  letter-spacing:.05em;
}
.splat-appbar__nav a:nth-child(2n){--tilt:1.5deg;background:var(--splat-yellow)}
.splat-appbar__nav a:nth-child(3n){--tilt:-2deg;background:var(--splat-lime)}
.splat-appbar__nav a:nth-child(5n){--tilt:1deg;background:var(--splat-cyan-bright)}
.splat-appbar__nav a:hover{transform:rotate(0) scale(1.1);background:var(--splat-pink-bright);color:var(--splat-foreground)}

/* Hero */
.splat-hero{position:relative;padding:80px 32px 100px;overflow:hidden}
.splat-hero__splat{
  position:absolute;left:-8%;top:5%;width:55%;height:90%;
  color:var(--splat-orange);opacity:.85;z-index:0;
  filter:drop-shadow(8px 8px 0 var(--splat-foreground-ink));
}
.splat-hero__splat-2{
  position:absolute;right:-5%;bottom:-10%;width:45%;height:80%;
  color:var(--splat-cyan);opacity:.85;z-index:0;
  filter:drop-shadow(-6px 8px 0 var(--splat-foreground-ink));
}
.splat-hero__content{position:relative;z-index:2;max-width:1200px;margin:0 auto}
.splat-hero__eyebrow{
  display:inline-block;
  font-family:var(--splat-graffiti);
  background:var(--splat-yellow);
  color:var(--splat-foreground-ink);
  padding:8px 18px;
  border:3px solid var(--splat-foreground-ink);
  font-size:18px;letter-spacing:.12em;
  transform:rotate(-2deg);
  margin-bottom:24px;
  box-shadow:4px 4px 0 var(--splat-foreground-ink);
}
.splat-hero__title{
  font-family:var(--splat-display);
  font-size:clamp(90px,15.4vw,224px);
  line-height:.92;margin:0 0 24px;
  letter-spacing:-.01em;
  -webkit-text-stroke:2px var(--splat-foreground-ink);
  text-stroke:2px var(--splat-foreground-ink);
  text-shadow:
    -3px 0 0 var(--splat-foreground-ink),
    3px 0 0 var(--splat-foreground-ink),
    0 -3px 0 var(--splat-foreground-ink),
    0 3px 0 var(--splat-foreground-ink),
    6px 6px 0 rgba(255,123,31,0.7),
    12px 12px 0 rgba(0,210,255,0.5);
}
.splat-hero__title .w1{
  color:var(--splat-orange);
  text-shadow:6px 6px 0 var(--splat-foreground-ink),12px 12px 0 rgba(0,0,0,.4);
  display:inline-block;transform:rotate(-2deg);
}
.splat-hero__title .w2{
  color:var(--splat-cyan);
  text-shadow:6px 6px 0 var(--splat-foreground-ink),12px 12px 0 rgba(0,0,0,.4);
  display:inline-block;transform:rotate(2deg);margin-left:.2em;
}
.splat-hero__title .w3{
  display:block;font-family:var(--splat-graffiti);
  font-size:.5em;color:var(--splat-yellow);
  -webkit-text-stroke:2px var(--splat-foreground-ink);
  transform:rotate(-1deg);margin-top:.1em;letter-spacing:.05em;
}
.splat-hero__sub{
  max-width:680px;font-size:18px;line-height:1.5;
  color:var(--splat-foreground);
  background:rgba(19,23,48,.7);
  padding:18px 22px;
  border-left:5px solid var(--splat-pink);
  border-right:5px solid var(--splat-cyan);
  transform:rotate(-.4deg);
}
.splat-hero__kanji{
  position:absolute;font-family:var(--splat-display);
  font-size:180px;color:rgba(255,230,0,.08);
  top:8%;right:8%;z-index:1;transform:rotate(12deg);
  letter-spacing:-.04em;line-height:1;
}
.splat-hero__row{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}

/* Section */
.splat-main{max-width:1320px;margin:0 auto;padding:60px 28px 120px}
.splat-section{margin-bottom:90px;position:relative}
.splat-section__head{margin-bottom:32px;position:relative}
.splat-section__num{
  position:absolute;top:-30px;left:-12px;
  font-family:var(--splat-display);
  font-size:80px;color:var(--splat-bg-panel);
  -webkit-text-stroke:2px var(--splat-pink);
  z-index:0;letter-spacing:-.04em;
}
.splat-section__num::before{
  content:"";position:absolute;left:-30px;top:-10px;
  width:160px;height:160px;
  background:var(--splat-pink);opacity:.15;
  clip-path:var(--splat-blob);z-index:-1;
}
.splat-section__title{
  font-family:var(--splat-display);
  font-size:48px;margin:14px 0 8px;
  color:var(--splat-foreground);
  text-shadow:4px 4px 0 var(--splat-pink),8px 8px 0 var(--splat-foreground-ink);
  position:relative;z-index:1;letter-spacing:.02em;
}
.splat-section__caption{
  max-width:680px;color:var(--splat-foreground-muted);
  font-size:15px;line-height:1.5;
  background:rgba(31,37,72,.5);
  padding:10px 14px;border-left:4px solid var(--splat-cyan);
  transform:rotate(-.3deg);
}

/* Grid */
.splat-grid{display:grid;gap:22px}
.splat-grid--2{grid-template-columns:repeat(2,1fr)}
.splat-grid--3{grid-template-columns:repeat(3,1fr)}
.splat-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.splat-grid--2,.splat-grid--3,.splat-grid--4{grid-template-columns:1fr}}

.splat-demo{
  background:var(--splat-bg-panel);
  border:3px solid var(--splat-foreground-ink);
  padding:22px;position:relative;
  box-shadow:5px 5px 0 var(--splat-foreground-ink),5px 5px 0 4px var(--splat-pink);
  transform:rotate(-.2deg);
}
.splat-demo:nth-child(2n){transform:rotate(.3deg);box-shadow:5px 5px 0 var(--splat-foreground-ink),5px 5px 0 4px var(--splat-cyan)}
.splat-demo:nth-child(3n){transform:rotate(-.1deg);box-shadow:5px 5px 0 var(--splat-foreground-ink),5px 5px 0 4px var(--splat-yellow)}
.splat-demo__label{
  font-family:var(--splat-display);
  font-size:11px;letter-spacing:.15em;
  color:var(--splat-yellow);
  margin-bottom:14px;
  display:inline-block;
  background:var(--splat-foreground-ink);
  padding:4px 10px;
  transform:rotate(-1.5deg);
}
.splat-demo__row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.splat-demo__stack{display:flex;flex-direction:column;gap:12px}

/* Buttons */
.splat-btn{
  position:relative;
  font-family:var(--splat-display);
  font-size:14px;letter-spacing:.06em;
  color:var(--splat-foreground-ink);
  background:var(--splat-yellow);
  border:3px solid var(--splat-foreground-ink);
  padding:12px 22px;
  cursor:pointer;
  clip-path:var(--splat-blob);
  transform:rotate(-1.5deg);
  transition:transform var(--splat-mid) var(--splat-ease),filter var(--splat-fast);
  min-width:120px;
}
.splat-btn:hover{transform:rotate(0) scale(1.06);filter:brightness(1.1)}
.splat-btn:active{transform:rotate(2deg) scale(.95)}
.splat-btn--filled{background:var(--splat-orange);color:var(--splat-foreground-ink)}
.splat-btn--filled:hover,.splat-btn--filled:focus-visible{box-shadow:var(--splat-bloom-orange);outline:none}
.splat-btn--primary{background:var(--splat-cyan);color:var(--splat-foreground-ink)}
.splat-btn--primary:hover,.splat-btn--primary:focus-visible{box-shadow:var(--splat-bloom-cyan);outline:none}
.splat-hero__row .splat-btn--filled{box-shadow:var(--splat-bloom-orange)}
.splat-chip.active,.splat-chip--active{background:var(--splat-orange);box-shadow:var(--splat-bloom-pink);outline:none}
.splat-tab.active,.splat-tab--active{box-shadow:var(--splat-bloom-yellow),4px 4px 0 var(--splat-foreground-ink);outline:none}
.splat-btn--accent{background:var(--splat-pink);color:var(--splat-foreground)}
.splat-btn--accent2{background:var(--splat-lime);color:var(--splat-foreground-ink)}
.splat-btn--danger{background:var(--splat-graffiti-red);color:var(--splat-foreground)}
.splat-btn--outlined{background:transparent;color:var(--splat-foreground);border-color:var(--splat-orange);clip-path:none;border-width:3px;border-style:solid}
.splat-btn--ghost{background:transparent;color:var(--splat-cyan);clip-path:none;border:2px dashed var(--splat-cyan)}
.splat-btn--sm{font-size:11px;padding:7px 14px;min-width:auto}
.splat-btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.7)}
.splat-btn::after{
  content:"";position:absolute;left:10%;right:10%;bottom:-1px;
  height:8px;
  background:currentColor;opacity:.7;
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  pointer-events:none;
}
.splat-btn--filled::after{background:#c95400}
.splat-btn--primary::after{background:#0090b8}
.splat-btn--accent::after{background:#9c1a5e}
.splat-btn--accent2::after{background:#7fa824}
.splat-btn--danger::after{background:#8e1a2a}
.splat-iconbtn{
  width:40px;height:40px;
  display:grid;place-items:center;
  background:var(--splat-pink);
  color:var(--splat-foreground);
  border:3px solid var(--splat-foreground-ink);
  cursor:pointer;
  clip-path:polygon(8% 0,92% 4%,100% 90%,4% 100%);
  transform:rotate(-2deg);
  transition:transform var(--splat-fast) var(--splat-ease);
}
.splat-iconbtn:hover{transform:rotate(0) scale(1.1)}
.splat-iconbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* Inputs */
.splat-field{display:flex;flex-direction:column;gap:6px}
.splat-field__label{
  font-family:var(--splat-display);
  font-size:10px;letter-spacing:.15em;
  color:var(--splat-yellow);
}
.splat-field__input,.splat-field__textarea,.splat-select__display{
  width:100%;
  background:var(--splat-bg-cream);
  color:var(--splat-foreground-ink);
  border:3px solid var(--splat-foreground-ink);
  padding:10px 14px;
  font-family:var(--splat-body);font-weight:700;
  font-size:15px;
  outline:none;
  transition:box-shadow var(--splat-mid) var(--splat-ease);
}
.splat-field__input::placeholder,.splat-field__textarea::placeholder{color:#8a7a60;font-weight:700}
.splat-field__input:focus,.splat-field__textarea:focus{
  box-shadow:0 0 0 3px var(--splat-orange),5px 5px 0 var(--splat-pink);
}
.splat-field--error .splat-field__input{
  border-color:var(--splat-graffiti-red);
  box-shadow:0 0 0 3px var(--splat-graffiti-red);
}
.splat-field__error{font-size:12px;color:var(--splat-graffiti-red);font-family:var(--splat-graffiti);letter-spacing:.05em;font-size:14px}
.splat-field__textarea{resize:vertical;min-height:90px}

.splat-select{position:relative}
.splat-select__display{
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;
}
.splat-select__caret{
  width:16px;height:16px;color:var(--splat-pink);
  transition:transform var(--splat-mid) var(--splat-ease);
}
.splat-select.open .splat-select__caret{transform:rotate(180deg)}
.splat-select__menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--splat-bg-cream);
  border:3px solid var(--splat-foreground-ink);
  padding:6px;z-index:30;
  display:none;
  transform:rotate(-.5deg);
  box-shadow:5px 5px 0 var(--splat-pink);
}
.splat-select.open .splat-select__menu{display:block;animation:splat-pop var(--splat-mid) var(--splat-ease-overshoot)}
.splat-select__option{
  padding:8px 12px;cursor:pointer;
  color:var(--splat-foreground-ink);font-weight:700;
  transition:background var(--splat-fast);
}
.splat-select__option:hover{background:var(--splat-cyan)}
@keyframes splat-pop{from{transform:rotate(-.5deg) scale(.6);opacity:0}to{transform:rotate(-.5deg) scale(1);opacity:1}}

/* Checkbox / radio */
.splat-check,.splat-radio{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:700}
.splat-check input,.splat-radio input{position:absolute;opacity:0;pointer-events:none}
.splat-check__box{
  width:24px;height:24px;
  background:var(--splat-bg-cream);
  border:3px solid var(--splat-foreground-ink);
  display:grid;place-items:center;
  clip-path:polygon(8% 0,90% 4%,100% 92%,4% 100%);
  transform:rotate(-2deg);
  transition:transform var(--splat-mid) var(--splat-ease);
}
.splat-check__box svg{width:18px;height:18px;fill:none;stroke:var(--splat-foreground-ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(0);transition:opacity var(--splat-mid),transform var(--splat-mid) var(--splat-ease-overshoot)}
.splat-check input:checked + .splat-check__box{background:var(--splat-orange);transform:rotate(2deg)}
.splat-check input:checked + .splat-check__box svg{opacity:1;transform:scale(1)}
.splat-radio__dot{
  width:24px;height:24px;background:var(--splat-bg-cream);
  border:3px solid var(--splat-foreground-ink);
  border-radius:50%;
  display:grid;place-items:center;
  transition:background var(--splat-mid);
}
.splat-radio__dot::after{
  content:"";width:14px;height:14px;
  background:var(--splat-pink);
  clip-path:var(--splat-blob);
  transform:scale(0);
  transition:transform var(--splat-mid) var(--splat-ease-overshoot);
}
.splat-radio input:checked + .splat-radio__dot::after{transform:scale(1)}

/* Switch */
.splat-switch{position:relative;display:inline-block;width:64px;height:32px;cursor:pointer}
.splat-switch input{position:absolute;opacity:0;pointer-events:none}
.splat-switch__track{
  position:absolute;inset:0;
  background:var(--splat-bg-cream);
  border:3px solid var(--splat-foreground-ink);
  transition:background var(--splat-mid);
  clip-path:polygon(4% 0,96% 6%,100% 92%,2% 100%);
}
.splat-switch__thumb{
  position:absolute;top:3px;left:3px;
  width:22px;height:22px;
  background:var(--splat-pink);
  border:2px solid var(--splat-foreground-ink);
  clip-path:var(--splat-blob);
  transition:left var(--splat-mid) var(--splat-ease-overshoot),background var(--splat-mid);
}
.splat-switch input:checked ~ .splat-switch__track{background:var(--splat-cyan-bright)}
.splat-switch input:checked ~ .splat-switch__thumb{left:36px;background:var(--splat-orange)}

/* Slider */
.splat-slider{display:flex;flex-direction:column;gap:8px}
.splat-slider__row{display:flex;align-items:center;gap:14px}
.splat-slider__bar{
  flex:1;position:relative;height:10px;
  background:var(--splat-bg-cream);
  border:2.5px solid var(--splat-foreground-ink);
}
.splat-slider__bar::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,transparent 0 9px,rgba(0,0,0,.4) 9px 10px);
}
.splat-slider__fill{
  position:absolute;left:0;top:0;bottom:0;
  background:linear-gradient(90deg,var(--splat-orange),var(--splat-pink));
  width:60%;
}
.splat-slider__thumb{
  position:absolute;top:50%;left:60%;
  width:22px;height:22px;
  background:var(--splat-cyan);
  border:3px solid var(--splat-foreground-ink);
  clip-path:var(--splat-blob);
  transform:translate(-50%,-50%) rotate(-3deg);
  cursor:grab;
}
.splat-slider__readout{
  font-family:var(--splat-display);
  background:var(--splat-yellow);
  color:var(--splat-foreground-ink);
  padding:4px 10px;
  border:2.5px solid var(--splat-foreground-ink);
  font-size:14px;min-width:48px;text-align:center;
  transform:rotate(-2deg);
}

/* Rating */
.splat-rating{display:inline-flex;gap:6px}
.splat-rating__star{
  width:30px;height:30px;cursor:pointer;
  background:var(--splat-bg-panel);
  border:2.5px solid var(--splat-foreground-ink);
  clip-path:var(--splat-blob);
  transition:background var(--splat-mid) var(--splat-ease),transform var(--splat-fast);
  transform:rotate(var(--rt,-2deg));
}
.splat-rating__star:nth-child(2){--rt:1.5deg}
.splat-rating__star:nth-child(3){--rt:-1deg}
.splat-rating__star:nth-child(4){--rt:2deg}
.splat-rating__star:nth-child(5){--rt:-1.5deg}
.splat-rating__star.on{background:var(--splat-yellow)}
.splat-rating__star:hover{transform:rotate(0) scale(1.15)}

/* Drawers */
.splat-drawer{
  position:fixed;top:0;bottom:0;width:300px;
  background:var(--splat-bg-panel);
  border-right:4px solid var(--splat-foreground-ink);
  z-index:100;padding:22px;
  transform:translateX(-100%);
  transition:transform var(--splat-slow) var(--splat-ease);
}
.splat-drawer--right{right:0;left:auto;border-right:none;border-left:4px solid var(--splat-foreground-ink);transform:translateX(100%)}
.splat-drawer.open{transform:translateX(0)}
.splat-drawer__title{
  font-family:var(--splat-display);
  font-size:24px;
  color:var(--splat-orange);
  margin-bottom:16px;
  text-shadow:3px 3px 0 var(--splat-foreground-ink);
}
.splat-drawer__list{display:flex;flex-direction:column;gap:8px;list-style:none;padding:0;margin:0}
.splat-drawer__list li{
  padding:10px 14px;
  background:var(--splat-bg-deep);
  border:2.5px solid var(--splat-foreground-ink);
  cursor:pointer;
  transform:rotate(var(--rt,-1deg));
  transition:transform var(--splat-fast),background var(--splat-fast);
}
.splat-drawer__list li:nth-child(2n){--rt:1.5deg}
.splat-drawer__list li:hover{background:var(--splat-pink);transform:rotate(0) scale(1.04)}

/* Tabs */
.splat-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
.splat-tab{
  font-family:var(--splat-display);
  background:var(--splat-bg-cream);
  color:var(--splat-foreground-ink);
  border:3px solid var(--splat-foreground-ink);
  padding:8px 16px;
  font-size:13px;cursor:pointer;
  transform:rotate(var(--rt,-2deg));
  transition:transform var(--splat-fast) var(--splat-ease),background var(--splat-fast);
}
.splat-tab:nth-child(2){--rt:1.5deg}
.splat-tab:nth-child(3){--rt:-1deg}
.splat-tab:nth-child(4){--rt:2deg}
.splat-tab.active{background:var(--splat-orange);color:var(--splat-foreground-ink);transform:rotate(0) scale(1.05);box-shadow:4px 4px 0 var(--splat-foreground-ink)}
.splat-tab:hover{transform:rotate(0)}
.splat-tabpanel{
  display:none;
  background:var(--splat-bg-cream);
  color:var(--splat-foreground-ink);
  border:3px solid var(--splat-foreground-ink);
  padding:16px;
  transform:rotate(-.3deg);
}
.splat-tabpanel.active{display:block;animation:splat-pop var(--splat-mid) var(--splat-ease)}

/* Breadcrumbs */
.splat-breadcrumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--splat-graffiti);font-size:18px;letter-spacing:.04em}
.splat-breadcrumbs a{color:var(--splat-cyan-bright);text-decoration:none}
.splat-breadcrumbs a:hover{color:var(--splat-pink-bright)}
.splat-breadcrumbs__sep{color:var(--splat-yellow);font-family:var(--splat-display);font-size:16px}
.splat-breadcrumbs__current{color:var(--splat-foreground)}

/* Pagination */
.splat-pagination{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.splat-pagination__btn{
  font-family:var(--splat-display);
  width:38px;height:38px;
  background:var(--splat-bg-cream);
  color:var(--splat-foreground-ink);
  border:3px solid var(--splat-foreground-ink);
  cursor:pointer;font-size:14px;
  transform:rotate(var(--rt,-2deg));
  transition:transform var(--splat-fast),background var(--splat-fast);
}
.splat-pagination__btn:nth-child(2n){--rt:1.5deg}
.splat-pagination__btn:nth-child(3n){--rt:-1deg}
.splat-pagination__btn.active{background:var(--splat-pink);color:var(--splat-foreground);transform:rotate(0) scale(1.1)}
.splat-pagination__btn:hover{background:var(--splat-yellow);transform:rotate(0) scale(1.05)}

/* Stepper */
.splat-stepper{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.splat-stepper__step{display:flex;align-items:center;gap:8px}
.splat-stepper__dot{
  width:42px;height:42px;
  background:var(--splat-bg-panel);
  color:var(--splat-foreground);
  border:3px solid var(--splat-foreground-ink);
  display:grid;place-items:center;
  font-family:var(--splat-display);
  clip-path:var(--splat-blob);
  transform:rotate(-2deg);
}
.splat-stepper__step.active .splat-stepper__dot{background:var(--splat-orange);color:var(--splat-foreground-ink)}
.splat-stepper__step.done .splat-stepper__dot{background:var(--splat-lime);color:var(--splat-foreground-ink)}
.splat-stepper__label{font-family:var(--splat-display);font-size:11px;color:var(--splat-foreground-muted)}
.splat-stepper__step.active .splat-stepper__label{color:var(--splat-orange-bright)}
.splat-stepper__bar{
  width:30px;height:4px;background:var(--splat-cyan);
  position:relative;
}
.splat-stepper__bar::after{content:"";position:absolute;left:0;right:0;top:100%;height:6px;background:var(--splat-cyan);opacity:.6}

/* Cards */
.splat-card{
  background:var(--splat-bg-cream);
  color:var(--splat-foreground-ink);
  border:3px solid var(--splat-foreground-ink);
  padding:18px;
  position:relative;
  box-shadow:6px 6px 0 var(--splat-foreground-ink);
  transform:rotate(-.4deg);
}
.splat-card::before{
  content:"";position:absolute;
  left:8%;width:18%;bottom:-14px;height:22px;
  background:linear-gradient(180deg,var(--splat-pink) 0%,var(--splat-pink) 55%,rgba(242,53,144,0) 100%);
  clip-path:polygon(0 0,100% 0,94% 50%,82% 28%,70% 70%,58% 36%,46% 78%,34% 40%,22% 80%,10% 44%,0 60%);
  animation:splat-drip 3.2s ease-in-out infinite;
  animation-delay:-1.3s;
  pointer-events:none;
}
.splat-card::after{
  content:"";position:absolute;
  right:12%;width:22%;bottom:-12px;height:20px;
  background:linear-gradient(180deg,var(--splat-cyan) 0%,var(--splat-cyan) 55%,rgba(0,210,255,0) 100%);
  clip-path:polygon(0 0,100% 0,92% 60%,80% 30%,72% 70%,60% 20%,52% 80%,42% 35%,30% 75%,18% 25%,8% 65%,0 30%);
  animation:splat-drip 2.6s ease-in-out infinite;
  pointer-events:none;
}
.splat-card__title{font-family:var(--splat-display);font-size:18px;margin:0 0 8px;color:var(--splat-foreground-ink);position:relative;z-index:1}
.splat-card__body{font-size:14px;line-height:1.5;color:#3a2f24;position:relative;z-index:1}
.splat-card--ink{
  background:var(--splat-orange);
  clip-path:var(--splat-blob-2);
  padding:28px;
  box-shadow:none;
  transform:rotate(-1deg);
  position:relative;
}
.splat-card--ink::before{
  content:"";position:absolute;
  left:8%;width:22%;bottom:-18px;height:28px;
  background:linear-gradient(180deg,var(--splat-orange) 0%,var(--splat-orange) 60%,rgba(255,123,31,0) 100%);
  clip-path:polygon(0 0,100% 0,92% 70%,76% 30%,64% 80%,52% 36%,40% 78%,28% 40%,16% 76%,4% 50%,0 70%);
  animation:splat-drip 2.4s ease-in-out infinite;
  animation-delay:-.7s;
  pointer-events:none;
}
.splat-card--ink::after{
  content:"";position:absolute;
  left:50%;right:8%;bottom:-12px;height:24px;
  background:var(--splat-orange);
  clip-path:polygon(0 0,100% 0,92% 60%,80% 30%,72% 70%,60% 20%,52% 80%,42% 35%,30% 75%,18% 25%,8% 65%,0 30%);
  animation:splat-drip 3s ease-in-out infinite;
}
@keyframes splat-drip{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.6)}}
.splat-card--ink-cyan{background:var(--splat-cyan);clip-path:var(--splat-blob-2);padding:28px;box-shadow:none;transform:rotate(.8deg);position:relative}
.splat-card--ink-cyan::before{content:"";position:absolute;left:6%;width:24%;bottom:-16px;height:26px;background:linear-gradient(180deg,var(--splat-cyan) 0%,var(--splat-cyan) 60%,rgba(0,210,255,0) 100%);clip-path:polygon(0 0,100% 0,90% 64%,76% 28%,62% 72%,48% 32%,36% 80%,22% 38%,10% 70%,0 50%);animation:splat-drip 2.8s ease-in-out infinite;animation-delay:-.4s;pointer-events:none}
.splat-card--ink-cyan::after{content:"";position:absolute;left:55%;right:8%;bottom:-12px;height:24px;background:var(--splat-cyan);clip-path:polygon(0 0,100% 0,92% 60%,80% 30%,72% 70%,60% 20%,52% 80%,42% 35%,30% 75%,18% 25%,8% 65%,0 30%);animation:splat-drip 3.4s ease-in-out infinite}

/* Chips */
.splat-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--splat-display);
  background:var(--splat-bg-cream);
  color:var(--splat-foreground-ink);
  border:2.5px solid var(--splat-foreground-ink);
  padding:5px 12px;font-size:11px;
  clip-path:polygon(6% 0,96% 4%,100% 92%,2% 100%);
  transform:rotate(var(--rt,-2deg));
  cursor:pointer;
  transition:transform var(--splat-fast),background var(--splat-fast);
}
.splat-chip:hover{transform:rotate(0) scale(1.06)}
.splat-chip.active{background:var(--splat-orange)}
.splat-chip--cyan{background:var(--splat-cyan);--rt:1.5deg}
.splat-chip--pink{background:var(--splat-pink);color:var(--splat-foreground);--rt:-1deg}
.splat-chip--lime{background:var(--splat-lime);--rt:2deg}
.splat-chip--yellow{background:var(--splat-yellow);--rt:-2.5deg}

/* Avatar */
.splat-avatar{
  width:48px;height:48px;
  background:var(--splat-orange);
  color:var(--splat-foreground-ink);
  display:grid;place-items:center;
  font-family:var(--splat-display);
  font-size:16px;
  border:3px solid var(--splat-foreground-ink);
  clip-path:var(--splat-blob);
  position:relative;
}
.splat-avatar--sm{width:32px;height:32px;font-size:11px;border-width:2px}
.splat-avatar--lg{width:72px;height:72px;font-size:24px;border-width:4px}
.splat-avatar--cyan{background:var(--splat-cyan)}
.splat-avatar--pink{background:var(--splat-pink);color:var(--splat-foreground)}
.splat-avatar--lime{background:var(--splat-lime)}
.splat-avatar--violet{background:var(--splat-violet);color:var(--splat-foreground)}
.splat-avatar--ring{outline:3px solid var(--splat-yellow);outline-offset:3px}

/* Badge */
.splat-badge-wrap{position:relative;display:inline-block}
.splat-badge{
  position:absolute;top:-8px;right:-8px;
  min-width:22px;height:22px;padding:0 4px;
  background:var(--splat-graffiti-red);
  color:var(--splat-foreground);
  font-family:var(--splat-display);font-size:11px;
  display:grid;place-items:center;
  border:2px solid var(--splat-foreground-ink);
  clip-path:var(--splat-blob);
  transform:rotate(-8deg);
}

/* List */
.splat-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.splat-list__item{
  padding:10px 14px;
  color:var(--splat-foreground);
  background:var(--splat-bg-deep);
  border-left:4px solid transparent;
  cursor:pointer;
  position:relative;
  transition:border-color var(--splat-fast),background var(--splat-fast);
}
.splat-list__item:hover{border-left-color:var(--splat-pink);background:var(--splat-bg-panel)}
.splat-list__item::after{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;height:3px;
  background:linear-gradient(90deg,var(--splat-orange),var(--splat-pink),var(--splat-cyan));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--splat-mid) var(--splat-ease);
}
.splat-list__item:hover::after{transform:scaleX(1)}

/* Table */
.splat-table{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--splat-body);font-weight:700}
.splat-table th{
  font-family:var(--splat-display);font-size:11px;letter-spacing:.1em;
  background:var(--splat-orange);color:var(--splat-foreground-ink);
  padding:10px 12px;text-align:left;
  border:2.5px solid var(--splat-foreground-ink);
}
.splat-table td{
  padding:10px 12px;color:var(--splat-foreground);
  background:var(--splat-bg-deep);
  border:2px solid var(--splat-foreground-ink);
  border-top:none;
}
.splat-table tr:nth-child(2n) td{background:var(--splat-bg-panel)}

/* Divider */
.splat-divider{
  height:14px;width:100%;
  background:linear-gradient(90deg,transparent,var(--splat-pink) 20%,var(--splat-orange) 50%,var(--splat-cyan) 80%,transparent);
  clip-path:polygon(0 30%,8% 60%,18% 20%,28% 70%,38% 30%,48% 80%,58% 20%,68% 65%,78% 25%,88% 70%,98% 30%,100% 50%,90% 100%,80% 50%,70% 100%,60% 50%,50% 100%,40% 50%,30% 100%,20% 50%,10% 100%,0 70%);
  margin:8px 0;
}

/* Alerts */
.splat-alert{
  padding:14px 18px;
  border:3px solid var(--splat-foreground-ink);
  font-weight:700;
  display:flex;gap:12px;align-items:flex-start;
  position:relative;
  clip-path:polygon(2% 0,98% 4%,100% 92%,1% 100%);
  transform:rotate(-.5deg);
  margin-bottom:8px;
}
.splat-alert--info{background:var(--splat-cyan);color:var(--splat-foreground-ink)}
.splat-alert--warn{background:var(--splat-yellow);color:var(--splat-foreground-ink)}
.splat-alert--danger{background:var(--splat-graffiti-red);color:var(--splat-foreground)}
.splat-alert--success{background:var(--splat-lime);color:var(--splat-foreground-ink)}
.splat-alert__icon{font-family:var(--splat-display);font-size:22px}
.splat-alert__title{font-family:var(--splat-display);letter-spacing:.05em;font-size:13px}
.splat-alert__msg{font-size:13px;margin-top:2px}

/* Snackbar */
.splat-snackbar{
  position:fixed;bottom:20px;right:20px;z-index:120;
  padding:14px 22px;
  background:var(--splat-pink);
  color:var(--splat-foreground);
  border:3px solid var(--splat-foreground-ink);
  font-family:var(--splat-display);
  letter-spacing:.05em;
  clip-path:polygon(4% 0,96% 6%,100% 90%,2% 100%);
  transform:translateY(140%) rotate(-3deg);
  transition:transform var(--splat-slow) var(--splat-ease-overshoot);
  box-shadow:5px 5px 0 var(--splat-foreground-ink);
}
.splat-snackbar.open{transform:translateY(0) rotate(-3deg)}

/* Progress */
.splat-progress{
  position:relative;height:18px;
  background:var(--splat-bg-cream);
  border:3px solid var(--splat-foreground-ink);
  overflow:hidden;
}
.splat-progress__fill{
  height:100%;
  background:linear-gradient(90deg,var(--splat-orange),var(--splat-pink));
  transition:width var(--splat-slow) var(--splat-ease);
  position:relative;
}
.splat-progress__fill::after{
  content:"";position:absolute;right:-2px;top:0;bottom:0;width:14px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:splat-shimmer 1.4s linear infinite;
}
@keyframes splat-shimmer{from{transform:translateX(-30px)}to{transform:translateX(30px)}}
.splat-progress--cyan .splat-progress__fill{background:linear-gradient(90deg,var(--splat-cyan),var(--splat-mint))}
.splat-progress--lime .splat-progress__fill{background:linear-gradient(90deg,var(--splat-lime),var(--splat-yellow))}
.splat-progress--indet .splat-progress__fill{
  width:35% !important;
  animation:splat-indet 1.4s var(--splat-ease) infinite;
}
@keyframes splat-indet{0%{margin-left:-35%}100%{margin-left:100%}}
.splat-progress::after{
  content:"";position:absolute;left:5%;right:5%;bottom:-10px;height:14px;
  background:inherit;
  clip-path:polygon(0 0,100% 0,94% 50%,84% 20%,72% 70%,60% 25%,48% 75%,36% 30%,24% 65%,12% 25%,4% 60%,0 35%);
  pointer-events:none;
}
.splat-circular{
  width:56px;height:56px;position:relative;
  display:inline-grid;place-items:center;
}
.splat-circular svg{width:100%;height:100%;transform:rotate(-90deg)}
.splat-circular svg circle{fill:none;stroke-width:6}
.splat-circular__bg{stroke:var(--splat-bg-cream)}
.splat-circular__fg{stroke:var(--splat-pink);stroke-linecap:round;stroke-dasharray:160;stroke-dashoffset:50}
.splat-circular--spin svg{animation:splat-spin 1.2s linear infinite}
.splat-circular--spin .splat-circular__fg{stroke-dasharray:80,160}
@keyframes splat-spin{to{transform:rotate(270deg)}}
.splat-circular__label{position:absolute;font-family:var(--splat-display);font-size:11px;color:var(--splat-foreground)}

/* Skeleton */
.splat-skel{
  background:linear-gradient(90deg,var(--splat-bg-panel) 0%,#2c3464 50%,var(--splat-bg-panel) 100%);
  background-size:200% 100%;
  animation:splat-skel 1.4s linear infinite;
  height:14px;border-radius:2px;
}
@keyframes splat-skel{from{background-position:200% 0}to{background-position:-200% 0}}

/* Tooltip */
.splat-tip{position:relative;display:inline-block;cursor:pointer}
.splat-tip__bubble{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) rotate(-3deg) scale(0);
  background:var(--splat-yellow);
  color:var(--splat-foreground-ink);
  font-family:var(--splat-display);font-size:11px;letter-spacing:.05em;
  padding:6px 12px;
  border:2.5px solid var(--splat-foreground-ink);
  white-space:nowrap;
  transition:transform var(--splat-mid) var(--splat-ease-overshoot);
  pointer-events:none;
}
.splat-tip:hover .splat-tip__bubble{transform:translateX(-50%) rotate(-3deg) scale(1)}

/* Dialog */
.splat-backdrop{
  position:fixed;inset:0;z-index:90;
  background:rgba(19,23,48,.85);
  backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;
  transition:opacity var(--splat-mid);
}
.splat-backdrop.open{opacity:1;pointer-events:auto}
.splat-dialog{
  position:fixed;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(-1deg) scale(.6);
  z-index:110;
  background:var(--splat-bg-cream);
  color:var(--splat-foreground-ink);
  padding:28px;min-width:340px;max-width:520px;
  border:4px solid var(--splat-foreground-ink);
  clip-path:var(--splat-blob-2);
  opacity:0;pointer-events:none;
  transition:transform var(--splat-slow) var(--splat-ease-overshoot),opacity var(--splat-mid);
}
.splat-dialog.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) rotate(-1deg) scale(1)}
.splat-dialog__title{font-family:var(--splat-display);font-size:24px;color:var(--splat-pink);margin:0 0 8px}
.splat-dialog__body{font-size:14px;margin-bottom:18px}
.splat-dialog__row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* Carousel */
.splat-carousel{position:relative;background:var(--splat-bg-panel);border:3px solid var(--splat-foreground-ink);overflow:hidden;height:200px}
.splat-carousel__track{display:flex;height:100%;transition:transform var(--splat-slow) var(--splat-ease)}
.splat-carousel__slide{
  flex:0 0 100%;display:grid;place-items:center;
  font-family:var(--splat-display);font-size:38px;
  color:var(--splat-foreground-ink);
  text-shadow:3px 3px 0 var(--splat-foreground-ink);
}
.splat-carousel__slide:nth-child(1){background:var(--splat-orange)}
.splat-carousel__slide:nth-child(2){background:var(--splat-cyan);color:var(--splat-foreground-ink)}
.splat-carousel__slide:nth-child(3){background:var(--splat-pink);color:var(--splat-foreground)}
.splat-carousel__dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.splat-carousel__dot{
  width:18px;height:18px;cursor:pointer;
  background:var(--splat-bg-cream);
  border:2.5px solid var(--splat-foreground-ink);
  clip-path:var(--splat-blob);
  transform:rotate(var(--rt,-2deg));
}
.splat-carousel__dot:nth-child(2){--rt:2deg}
.splat-carousel__dot:nth-child(3){--rt:-1deg}
.splat-carousel__dot.active{background:var(--splat-yellow)}

/* === HUD WAVE A === */
.splat-hotbar{display:flex;gap:10px;padding:10px;background:rgba(19,23,48,.8);border:3px solid var(--splat-foreground-ink);width:fit-content}
.splat-hotbar__slot{
  position:relative;width:64px;height:64px;
  background:var(--splat-bg-panel);
  border:3px solid var(--splat-foreground-ink);
  display:grid;place-items:center;
  clip-path:polygon(8% 0,92% 4%,100% 92%,4% 100%);
  transform:rotate(var(--rt,-2deg));
}
.splat-hotbar__slot:nth-child(2){--rt:1.5deg}
.splat-hotbar__slot:nth-child(3){--rt:-1deg}
.splat-hotbar__slot:nth-child(4){--rt:2deg}
.splat-hotbar__slot:nth-child(5){--rt:-1.5deg}
.splat-hotbar__slot.active{background:var(--splat-orange)}
.splat-hotbar__slot.cyan{background:var(--splat-cyan)}
.splat-hotbar__slot.pink{background:var(--splat-pink)}
.splat-hotbar__slot.lime{background:var(--splat-lime)}
.splat-hotbar__icon{font-size:22px;color:var(--splat-foreground-ink)}
.splat-hotbar__key{
  position:absolute;top:-10px;right:-10px;
  width:24px;height:24px;
  background:var(--splat-yellow);
  border:2.5px solid var(--splat-foreground-ink);
  display:grid;place-items:center;
  font-family:var(--splat-display);font-size:11px;
  color:var(--splat-foreground-ink);
  clip-path:var(--splat-blob);
  transform:rotate(8deg);
}

.splat-radial{position:relative;width:240px;height:240px;margin:0 auto}
.splat-radial svg{width:100%;height:100%;display:block}
.splat-radial__center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;
  background:var(--splat-bg-deep);
  border:3px solid var(--splat-foreground-ink);
  border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--splat-display);font-size:11px;
  color:var(--splat-yellow);text-align:center;
}

.splat-timer{
  font-family:var(--splat-display);font-size:54px;
  color:var(--splat-yellow);
  text-shadow:5px 5px 0 var(--splat-foreground-ink);
  letter-spacing:.04em;
  position:relative;display:inline-block;
  transform:rotate(-1.5deg);
}
.splat-timer::after{
  content:"";position:absolute;left:10%;right:10%;bottom:-12px;height:14px;
  background:var(--splat-yellow);
  clip-path:polygon(0 0,100% 0,92% 60%,80% 30%,72% 70%,60% 25%,52% 80%,42% 35%,30% 75%,18% 25%,8% 65%,0 35%);
  animation:splat-drip 2s ease-in-out infinite;
}
.splat-timer__label{font-family:var(--splat-graffiti);font-size:18px;color:var(--splat-foreground);letter-spacing:.1em;margin-bottom:-4px;display:block}

.splat-vitals{display:flex;flex-direction:column;gap:10px;width:100%}
.splat-vital{position:relative}
.splat-vital__label{font-family:var(--splat-display);font-size:11px;color:var(--splat-foreground);letter-spacing:.1em;margin-bottom:4px;display:flex;justify-content:space-between}
.splat-vital__bar{
  height:18px;background:var(--splat-bg-cream);
  border:3px solid var(--splat-foreground-ink);
  position:relative;overflow:hidden;
}
.splat-vital__fill{height:100%;transition:width var(--splat-slow) var(--splat-ease)}
.splat-vital__fill--hp{background:var(--splat-graffiti-red);width:72%}
.splat-vital__fill--special{background:linear-gradient(90deg,var(--splat-pink),var(--splat-violet));width:55%}
.splat-vital__bar::after{
  content:"";position:absolute;left:8%;right:8%;bottom:-8px;height:10px;
  background:var(--splat-graffiti-red);
  clip-path:polygon(0 0,100% 0,92% 50%,80% 25%,72% 65%,60% 22%,52% 75%,42% 35%,30% 70%,18% 25%,8% 60%,0 30%);
}
.splat-vital--special .splat-vital__bar::after{background:var(--splat-pink)}

.splat-objectives{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.splat-objectives li{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  background:rgba(19,23,48,.7);
  border:2.5px solid var(--splat-foreground-ink);
  font-family:var(--splat-graffiti);
  letter-spacing:.06em;font-size:18px;
  transform:rotate(var(--rt,-1deg));
}
.splat-objectives li:nth-child(2){--rt:1deg}
.splat-objectives li:nth-child(3){--rt:-1.5deg}
.splat-objectives__check{
  width:22px;height:22px;
  background:var(--splat-bg-deep);
  border:2px solid var(--splat-foreground-ink);
  clip-path:var(--splat-blob);
  display:grid;place-items:center;flex-shrink:0;
}
.splat-objectives li.done .splat-objectives__check{background:var(--splat-lime)}
.splat-objectives li.done{text-decoration:line-through;color:var(--splat-foreground-muted)}

/* === HUD WAVE B === */
.splat-damage{
  font-family:var(--splat-display);font-size:48px;
  color:var(--splat-yellow);
  -webkit-text-stroke:3px var(--splat-foreground-ink);
  text-shadow:0 0 16px var(--splat-orange),5px 5px 0 var(--splat-foreground-ink);
  display:inline-block;
  transform:rotate(-6deg);
  animation:splat-dmg 900ms var(--splat-ease) infinite alternate;
  position:relative;
}
.splat-damage::after{
  content:"";position:absolute;left:0;right:0;bottom:-12px;height:14px;
  background:var(--splat-yellow);
  clip-path:polygon(0 0,100% 0,92% 60%,80% 30%,72% 70%,60% 25%,52% 80%,42% 35%,30% 75%,18% 25%,8% 65%,0 35%);
  opacity:.8;
}
@keyframes splat-dmg{from{transform:rotate(-6deg) translateY(0)}to{transform:rotate(-6deg) translateY(-8px)}}
.splat-damage--crit{color:var(--splat-pink-bright);font-size:64px}

.splat-toast{
  display:flex;align-items:center;gap:12px;
  background:var(--splat-bg-cream);
  border:3px solid var(--splat-foreground-ink);
  padding:10px 16px;
  transform:rotate(-2deg);
  width:fit-content;
  box-shadow:5px 5px 0 var(--splat-pink);
  position:relative;
}
.splat-toast::before{
  content:"GET!";
  position:absolute;top:-14px;left:14px;
  font-family:var(--splat-display);
  background:var(--splat-yellow);
  color:var(--splat-foreground-ink);
  padding:3px 10px;
  border:2.5px solid var(--splat-foreground-ink);
  font-size:11px;
  transform:rotate(-6deg);
}
.splat-toast__icon{
  width:42px;height:42px;
  background:var(--splat-orange);
  border:2.5px solid var(--splat-foreground-ink);
  clip-path:var(--splat-blob);
  display:grid;place-items:center;
  font-family:var(--splat-display);
  color:var(--splat-foreground-ink);
}
.splat-toast__title{font-family:var(--splat-display);font-size:14px;color:var(--splat-foreground-ink)}
.splat-toast__sub{font-size:11px;color:#5a4a35;font-family:var(--splat-graffiti);letter-spacing:.05em}

.splat-levelup{
  position:relative;
  background:linear-gradient(90deg,var(--splat-pink),var(--splat-orange) 50%,var(--splat-yellow));
  border:4px solid var(--splat-foreground-ink);
  padding:24px 32px;
  text-align:center;
  transform:rotate(-1deg);
  box-shadow:8px 8px 0 var(--splat-foreground-ink);
  overflow:hidden;
}
.splat-levelup__kanji{
  position:absolute;right:14px;top:8px;
  font-family:var(--splat-display);
  font-size:64px;
  color:rgba(0,0,0,.18);
  letter-spacing:-.03em;line-height:1;
  transform:rotate(8deg);
}
.splat-levelup__title{
  font-family:var(--splat-display);
  font-size:34px;
  color:var(--splat-foreground);
  text-shadow:4px 4px 0 var(--splat-foreground-ink);
  letter-spacing:.04em;
  margin:0;
}
.splat-levelup__sub{font-family:var(--splat-graffiti);color:var(--splat-foreground);font-size:18px;letter-spacing:.1em}
.splat-levelup__particles{position:absolute;inset:0;pointer-events:none}
.splat-levelup__particles span{
  position:absolute;width:18px;height:18px;
  background:var(--splat-cyan);
  clip-path:var(--splat-blob);
}
.splat-levelup__particles span:nth-child(1){left:8%;top:20%;background:var(--splat-cyan);transform:rotate(20deg)}
.splat-levelup__particles span:nth-child(2){left:18%;top:70%;background:var(--splat-lime);transform:rotate(-15deg)}
.splat-levelup__particles span:nth-child(3){right:14%;top:30%;background:var(--splat-yellow);transform:rotate(40deg)}
.splat-levelup__particles span:nth-child(4){right:24%;bottom:16%;background:var(--splat-violet);transform:rotate(-30deg)}

.splat-combo{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.splat-combo__burst{
  font-family:var(--splat-display);
  background:var(--splat-pink);
  color:var(--splat-foreground);
  padding:10px 22px;
  border:3px solid var(--splat-foreground-ink);
  font-size:18px;letter-spacing:.06em;
  transform:rotate(-3deg);
  box-shadow:4px 4px 0 var(--splat-foreground-ink);
  clip-path:polygon(4% 0,96% 6%,100% 90%,2% 100%);
}
.splat-combo__burst--mega{background:var(--splat-orange);transform:rotate(2deg);font-size:22px}
.splat-combo__burst--splat{background:var(--splat-yellow);color:var(--splat-foreground-ink);transform:rotate(-1deg);font-size:26px}

.splat-qte{position:relative;width:120px;height:120px;display:grid;place-items:center}
.splat-qte svg{position:absolute;inset:0;width:100%;height:100%}
.splat-qte__ring{fill:none;stroke:var(--splat-bg-cream);stroke-width:6}
.splat-qte__progress{fill:none;stroke:var(--splat-orange);stroke-width:8;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:80;transform:rotate(-90deg);transform-origin:center}
.splat-qte__btn{
  width:48px;height:48px;
  background:var(--splat-pink);
  color:var(--splat-foreground);
  border:3px solid var(--splat-foreground-ink);
  display:grid;place-items:center;
  font-family:var(--splat-display);font-size:22px;
  clip-path:var(--splat-blob);
  animation:splat-pulse 1s var(--splat-ease) infinite alternate;
}
@keyframes splat-pulse{from{transform:scale(1)}to{transform:scale(1.15)}}

/* === HUD WAVE C === */
.splat-minimap{
  position:relative;width:240px;height:240px;
  background:var(--splat-bg-cream);
  border:4px solid var(--splat-foreground-ink);
  overflow:hidden;
  box-shadow:6px 6px 0 var(--splat-foreground-ink);
  transform:rotate(-1deg);
}
.splat-minimap__bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(45deg,rgba(0,0,0,.06) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(0,0,0,.06) 25%,transparent 25%);
  background-size:20px 20px;
}
.splat-minimap__zone{position:absolute;clip-path:var(--splat-blob)}
.splat-minimap__zone--orange{background:var(--splat-orange);width:130px;height:120px;top:18%;left:8%;opacity:.85}
.splat-minimap__zone--cyan{background:var(--splat-cyan);width:110px;height:130px;bottom:10%;right:8%;opacity:.85}
.splat-minimap__zone--orange-2{background:var(--splat-orange);width:60px;height:55px;top:62%;left:34%;opacity:.85}
.splat-minimap__pin{position:absolute;width:14px;height:14px;background:var(--splat-yellow);border:2px solid var(--splat-foreground-ink);clip-path:var(--splat-blob);top:48%;left:48%}
.splat-minimap__hud{
  position:absolute;top:6px;left:6px;right:6px;
  display:flex;justify-content:space-between;
  font-family:var(--splat-display);font-size:13px;
}
.splat-minimap__pct{
  background:var(--splat-foreground-ink);
  padding:4px 8px;
  border:2px solid var(--splat-foreground-ink);
}
.splat-minimap__pct--orange{color:var(--splat-orange);background:var(--splat-bg-deep)}
.splat-minimap__pct--cyan{color:var(--splat-cyan);background:var(--splat-bg-deep)}

.splat-compass{
  position:relative;width:140px;height:48px;
  background:rgba(19,23,48,.85);
  border:3px solid var(--splat-foreground-ink);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.splat-compass__strip{
  display:flex;gap:24px;
  font-family:var(--splat-graffiti);font-size:20px;
  color:var(--splat-foreground);letter-spacing:.1em;
}
.splat-compass__strip span:nth-child(2){color:var(--splat-pink)}
.splat-compass::before{
  content:"";position:absolute;left:50%;top:0;width:3px;height:14px;
  background:var(--splat-yellow);transform:translateX(-50%);
}

.splat-waypoint{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--splat-display);font-size:11px;
  background:var(--splat-yellow);
  color:var(--splat-foreground-ink);
  padding:5px 12px;
  border:2.5px solid var(--splat-foreground-ink);
  clip-path:polygon(8% 0,100% 0,90% 100%,0 100%);
  transform:rotate(-2deg);
}
.splat-waypoint__pin{
  width:14px;height:14px;background:var(--splat-pink);
  clip-path:var(--splat-blob);border:1.5px solid var(--splat-foreground-ink);
}

.splat-areaname{
  position:relative;
  font-family:var(--splat-display);
  background:var(--splat-orange);
  color:var(--splat-foreground-ink);
  padding:18px 32px;
  border:4px solid var(--splat-foreground-ink);
  font-size:28px;letter-spacing:.06em;
  transform:rotate(-1.5deg);
  box-shadow:6px 6px 0 var(--splat-foreground-ink);
  display:inline-block;
  clip-path:polygon(2% 0,98% 4%,100% 92%,1% 100%);
}
.splat-areaname__sub{font-family:var(--splat-graffiti);font-size:14px;letter-spacing:.1em;display:block;color:var(--splat-foreground)}

/* === HUD WAVE D === */
.splat-inv{display:grid;grid-template-columns:repeat(5,64px);gap:8px}
.splat-slot{
  width:64px;height:64px;
  background:var(--splat-bg-panel);
  border:3px solid var(--splat-foreground-ink);
  display:grid;place-items:center;
  clip-path:polygon(8% 0,92% 4%,100% 92%,4% 100%);
  transform:rotate(var(--rt,-2deg));
  font-family:var(--splat-display);font-size:18px;
  position:relative;
}
.splat-slot:nth-child(2n){--rt:1.5deg}
.splat-slot:nth-child(3n){--rt:-1deg}
.splat-slot:nth-child(5n){--rt:2deg}
.splat-slot--common{color:#bbb}
.splat-slot--uncommon{background:var(--splat-mint);color:var(--splat-foreground-ink)}
.splat-slot--rare{background:var(--splat-cyan);color:var(--splat-foreground-ink)}
.splat-slot--epic{background:var(--splat-pink);color:var(--splat-foreground)}
.splat-slot--legendary{background:linear-gradient(135deg,var(--splat-orange),var(--splat-yellow),var(--splat-pink));color:var(--splat-foreground-ink)}
.splat-slot--mythic{background:linear-gradient(135deg,var(--splat-cyan),var(--splat-pink),var(--splat-yellow),var(--splat-lime));background-size:300% 300%;animation:splat-rainbow 3s linear infinite;color:var(--splat-foreground-ink)}
@keyframes splat-rainbow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.splat-paperdoll{
  display:grid;grid-template-columns:1fr 110px 1fr;gap:14px;align-items:center;
}
.splat-paperdoll__col{display:flex;flex-direction:column;gap:8px}
.splat-paperdoll__silhouette{
  position:relative;height:200px;
  background:var(--splat-bg-deep);
  border:3px solid var(--splat-foreground-ink);
  clip-path:var(--splat-blob);
  display:grid;place-items:center;
}
.splat-paperdoll__squid{
  font-family:var(--splat-display);font-size:48px;
  color:var(--splat-orange);
  text-shadow:3px 3px 0 var(--splat-foreground-ink);
}

.splat-skilltree{
  position:relative;width:100%;height:280px;
  background:rgba(19,23,48,.6);
  border:3px solid var(--splat-foreground-ink);
  overflow:hidden;
}
.splat-skilltree svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.splat-skilltree__node{
  position:absolute;
  width:48px;height:48px;
  background:var(--splat-bg-panel);
  color:var(--splat-foreground);
  border:3px solid var(--splat-foreground-ink);
  display:grid;place-items:center;
  font-family:var(--splat-display);font-size:14px;
  clip-path:var(--splat-blob);
  transform:translate(-50%,-50%) rotate(-2deg);
  cursor:pointer;
  z-index:2;
}
.splat-skilltree__node.unlocked{background:var(--splat-orange);color:var(--splat-foreground-ink)}
.splat-skilltree__node.locked{filter:grayscale(.7);opacity:.6}

/* === HUD WAVE E === */
.splat-dialog-box{
  position:relative;
  background:var(--splat-bg-cream);
  color:var(--splat-foreground-ink);
  padding:18px 24px;
  border:4px solid var(--splat-foreground-ink);
  display:flex;gap:18px;
  clip-path:polygon(2% 0,98% 4%,100% 88%,1% 100%);
  box-shadow:6px 6px 0 var(--splat-pink);
  transform:rotate(-.5deg);
}
.splat-dialog-box__avatar{
  width:80px;height:80px;flex-shrink:0;
  background:var(--splat-cyan);
  border:3px solid var(--splat-foreground-ink);
  display:grid;place-items:center;
  clip-path:var(--splat-blob);
  font-family:var(--splat-display);font-size:24px;
  color:var(--splat-foreground-ink);
}
.splat-dialog-box__name{font-family:var(--splat-display);font-size:16px;color:var(--splat-pink);letter-spacing:.05em;margin-bottom:4px}
.splat-dialog-box__caption{font-family:var(--splat-graffiti);font-size:20px;letter-spacing:.06em;color:var(--splat-foreground-ink);line-height:1.1}
.splat-dialog-box__text{font-size:14px;line-height:1.5;margin-top:6px}

.splat-subtitle{
  background:rgba(19,23,48,.85);
  color:var(--splat-foreground);
  padding:10px 18px;
  border-top:3px solid var(--splat-orange);
  border-bottom:3px solid var(--splat-cyan);
  font-family:var(--splat-graffiti);
  font-size:18px;letter-spacing:.04em;
  text-align:center;
  transform:rotate(-.3deg);
}

.splat-choicewheel{
  position:relative;width:240px;height:240px;margin:0 auto;
}
.splat-choicewheel svg{width:100%;height:100%;display:block}
.splat-choicewheel__label{
  position:absolute;font-family:var(--splat-display);font-size:11px;
  color:var(--splat-foreground-ink);
  padding:3px 8px;
  background:var(--splat-foreground);
  border:2px solid var(--splat-foreground-ink);
}
.splat-choicewheel__label--n{top:6%;left:50%;transform:translateX(-50%) rotate(-3deg)}
.splat-choicewheel__label--e{right:4%;top:50%;transform:translateY(-50%) rotate(2deg)}
.splat-choicewheel__label--s{bottom:6%;left:50%;transform:translateX(-50%) rotate(-2deg)}
.splat-choicewheel__label--w{left:4%;top:50%;transform:translateY(-50%) rotate(3deg)}

/* Hero buttons quick */
.splat-hero__row .splat-btn{font-size:16px;padding:14px 26px}

/* Section dual content */
.splat-stack{display:flex;flex-direction:column;gap:14px}
.splat-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* Color swatch row */
.splat-swatch{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--splat-display);font-size:10px;color:var(--splat-foreground-muted);letter-spacing:.06em}
.splat-swatch__chip{width:48px;height:48px;border:3px solid var(--splat-foreground-ink);clip-path:var(--splat-blob);transform:rotate(-2deg)}

/* Floating ink-splat + kanji ambient graffiti layer */
.splat-graffiti{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.42;overflow:hidden}
.splat-graffiti__splat,.splat-graffiti__kanji{
  position:absolute;
  width:var(--splat-graf-size,56px);height:var(--splat-graf-size,56px);
  transform:translate(-50%,-50%) rotate(var(--splat-graf-tilt,0deg));
  animation:splat-graf-pulse 6.5s ease-in-out infinite;
  animation-delay:var(--splat-graf-delay,0s);
  will-change:transform,opacity;
}
.splat-graffiti__splat{
  clip-path:var(--splat-blob-3);
  filter:drop-shadow(2px 2px 0 var(--splat-foreground-ink));
}
.splat-graffiti__splat--orange{background:var(--splat-orange)}
.splat-graffiti__splat--cyan{background:var(--splat-cyan)}
.splat-graffiti__splat--pink{background:var(--splat-pink)}
.splat-graffiti__splat--yellow{background:var(--splat-yellow)}
.splat-graffiti__splat--lime{background:var(--splat-lime)}
.splat-graffiti__splat--violet{background:var(--splat-violet)}
.splat-graffiti__kanji{
  font-family:var(--splat-graffiti);
  font-size:calc(var(--splat-graf-size,56px) * .58);
  display:grid;place-items:center;
  letter-spacing:.04em;
  -webkit-text-stroke:2px var(--splat-foreground-ink);
  text-stroke:2px var(--splat-foreground-ink);
  text-shadow:2px 2px 0 var(--splat-foreground-ink);
  white-space:nowrap;
}
.splat-graffiti__kanji--orange{color:var(--splat-orange)}
.splat-graffiti__kanji--cyan{color:var(--splat-cyan)}
.splat-graffiti__kanji--pink{color:var(--splat-pink)}
.splat-graffiti__kanji--yellow{color:var(--splat-yellow)}
.splat-graffiti__kanji--lime{color:var(--splat-lime)}
.splat-graffiti__kanji--violet{color:var(--splat-violet)}
@keyframes splat-graf-pulse{
  0%,100%{transform:translate(-50%,-50%) rotate(var(--splat-graf-tilt,0deg)) scale(1);opacity:.78}
  50%{transform:translate(-50%,-50%) rotate(calc(var(--splat-graf-tilt,0deg) + 3deg)) scale(1.12);opacity:1}
}
.splat-theme > *{position:relative;z-index:1}
.splat-graffiti{z-index:0}

/* Ink-storm celebrate splats */
.splat-celebrate-splat{
  position:fixed;
  width:var(--splat-cel-size,40px);height:var(--splat-cel-size,40px);
  pointer-events:none;
  z-index:9999;
  clip-path:var(--splat-blob-3);
  transform:translate(-50%,-50%) scale(0) rotate(0);
  animation:splat-cel-fly 700ms cubic-bezier(0.5,-0.4,0.3,1.6) forwards,splat-cel-fade 800ms ease-out forwards;
  filter:drop-shadow(2px 2px 0 var(--splat-foreground-ink));
}
.splat-celebrate-splat--orange{background:var(--splat-orange)}
.splat-celebrate-splat--cyan{background:var(--splat-cyan)}
.splat-celebrate-splat--pink{background:var(--splat-pink)}
.splat-celebrate-splat--yellow{background:var(--splat-yellow)}
.splat-celebrate-splat--lime{background:var(--splat-lime)}
.splat-celebrate-splat--violet{background:var(--splat-violet)}
@keyframes splat-cel-fly{
  0%{transform:translate(-50%,-50%) translate(0,0) scale(0) rotate(0);}
  60%{transform:translate(-50%,-50%) translate(calc(var(--splat-cel-dx,0) * 1.08),calc(var(--splat-cel-dy,0) * 1.08)) scale(1.25) rotate(calc(var(--splat-cel-rot,0deg) * 1.1));}
  72%{transform:translate(-50%,-50%) translate(var(--splat-cel-dx,0),var(--splat-cel-dy,0)) scale(1.15) rotate(var(--splat-cel-rot,0deg));}
  100%{transform:translate(-50%,-50%) translate(var(--splat-cel-dx,0),var(--splat-cel-dy,0)) scale(1.15) rotate(var(--splat-cel-rot,0deg));}
}
@keyframes splat-cel-fade{
  0%{opacity:0}
  10%{opacity:1}
  62.5%{opacity:1}
  100%{opacity:0;filter:drop-shadow(2px 2px 0 var(--splat-foreground-ink)) blur(2px)}
}