/* STALOW Battle Arena v2 — scoped styles
   Wrap any container with class .stlw-arena-v2 to apply this theme.
   Set data-arena attribute on .stlw-arena-v2 to switch discipline color. */

.stlw-arena-v2{
  --anaglyph-red:#E63946;
  --anaglyph-blue:#2D7FFF;
  --ink:#f5f3ee;
  --ink-d:rgba(245,243,238,0.55);
  --ink-dd:rgba(245,243,238,0.28);
  --bg-0:#0a0a0c;
  --bg-1:#13141a;
  --bg-2:#1b1d22;
  --line:rgba(255,255,255,0.08);
  --line-2:rgba(255,255,255,0.16);
  --cat:#1FE0E0;
  --cat-deep:#003e44;
  --fam:#1FE0E0;
  --opp:#E63946;
  --opp-deep:#5a0d15;
  --hp-good:#5BE38A;
  --hp-warn:#FFB23C;
  --hp-bad:#E63946;

  position:relative;
  display:block;
  width:100%;
  background:var(--bg-0);
  color:var(--ink);
  font-family:'Montserrat',sans-serif;
  padding:8px;
  box-sizing:border-box;
  overflow-x:hidden;
  transition:background .6s ease;
}
.stlw-arena-v2[data-arena="freestyle"]{--cat:#FF5A3C;--cat-deep:#4a1305;--fam:#FF5A3C}
.stlw-arena-v2[data-arena="graffiti"]{--cat:#B026FF;--cat-deep:#2c0049;--fam:#B026FF}
.stlw-arena-v2[data-arena="dj"]{--cat:#FF3B7F;--cat-deep:#4a0020;--fam:#FF3B7F}
.stlw-arena-v2[data-arena="bmx"]{--cat:#C8202B;--cat-deep:#4a0408;--fam:#FF4FA3}
.stlw-arena-v2[data-arena="sing"]{--cat:#47c8ff;--cat-deep:#003a52;--fam:#47c8ff}
.stlw-arena-v2[data-arena="dance"]{--cat:#B026FF;--cat-deep:#2c0049;--fam:#B026FF}
.stlw-arena-v2[data-arena="producer"]{--cat:#4cff91;--cat-deep:#003a18;--fam:#4cff91}
.stlw-arena-v2[data-arena="rap"]{--cat:#47c8ff;--cat-deep:#003a52;--fam:#47c8ff}
.stlw-arena-v2[data-arena="breaking"]{--cat:#FF3B7F;--cat-deep:#4a0020;--fam:#FF3B7F}

.stlw-arena-v2 *{box-sizing:border-box}

.stlw-arena-v2 .bg-mark{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-weight:900;font-size:30vw;letter-spacing:-0.05em;
  color:color-mix(in oklab, var(--cat) 5%, rgba(255,255,255,0.018));
  z-index:0;user-select:none;pointer-events:none;white-space:nowrap;
}

/* anaglyph text */
.stlw-arena-v2 .ana{position:relative;display:inline-block}
.stlw-arena-v2 .ana::before,.stlw-arena-v2 .ana::after{
  content:attr(data-text);position:absolute;top:0;left:0;width:100%;
  pointer-events:none;
}
.stlw-arena-v2 .ana::before{color:var(--anaglyph-red);mix-blend-mode:screen;animation:stlwAnaR 3.2s ease-in-out infinite}
.stlw-arena-v2 .ana::after{color:var(--anaglyph-blue);mix-blend-mode:screen;animation:stlwAnaB 3.2s ease-in-out infinite}
@keyframes stlwAnaR{0%,100%{transform:translate(0,0);opacity:.7}50%{transform:translate(-1.6px,0);opacity:.95}}
@keyframes stlwAnaB{0%,100%{transform:translate(0,0);opacity:.55}50%{transform:translate(1.6px,0);opacity:.85}}

/* SHELL */
.stlw-arena-v2 .shell{
  position:relative;z-index:5;
  width:min(1280px,100%);
  margin:0 auto;
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--cat-deep) 25%, var(--bg-1)) 0%,
    var(--bg-1) 60%,
    #0a0b0d 100%);
  border-radius:14px;
  border:1px solid color-mix(in oklab, var(--cat) 22%, var(--line));
  box-shadow:
    0 30px 60px -25px rgba(0,0,0,0.9),
    inset 0 1px 0 rgba(255,255,255,0.06);
  padding:10px;overflow:hidden;
  transition:box-shadow .6s ease, border-color .6s ease;
}
.stlw-arena-v2 .shell::before{
  content:"";position:absolute;inset:0;border-radius:18px;padding:1.4px;
  background:conic-gradient(from 0deg,
    transparent 0deg, var(--cat) 40deg, transparent 100deg,
    transparent 200deg, var(--opp) 240deg, transparent 320deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:stlwSpin 14s linear infinite;
  pointer-events:none;opacity:.55;
}
@keyframes stlwSpin{to{transform:rotate(360deg)}}

/* TOPBAR */
.stlw-arena-v2 .topbar{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:10px;padding:6px 6px 8px;
  border-bottom:1px dashed rgba(255,255,255,0.08);
  margin-bottom:8px;
}
.stlw-arena-v2 .tb-side{display:flex;gap:8px;align-items:center}
.stlw-arena-v2 .icon-btn{
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:10px;
  background:rgba(0,0,0,0.45);
  border:1px solid var(--line-2);
  color:var(--ink);cursor:pointer;
  transition:all .2s;
}
.stlw-arena-v2 .icon-btn:hover{border-color:var(--cat);color:var(--cat)}
.stlw-arena-v2 .icon-btn svg{width:17px;height:17px}
.stlw-arena-v2 .title-block{text-align:center}
.stlw-arena-v2 .title-block .fam{
  font-weight:900;font-size:9px;letter-spacing:0.32em;
  color:var(--fam);
}
.stlw-arena-v2 .title-block .name{
  font-weight:900;font-size:20px;letter-spacing:0.22em;
  text-transform:uppercase;
  margin-top:2px;
}
.stlw-arena-v2 .title-block .sub{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:0.22em;
  color:var(--ink-d);text-transform:uppercase;
  margin-top:4px;
}
.stlw-arena-v2 .title-block .sub b{color:var(--ink);font-weight:700}

.stlw-arena-v2 .turn-pill{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;
  background:rgba(0,0,0,0.55);
  border:1px solid var(--line-2);
  color:var(--ink-d);
  display:inline-flex;align-items:center;gap:8px;
}
.stlw-arena-v2 .turn-pill .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--cat);box-shadow:0 0 8px var(--cat);
  animation:stlwPulseDot 1.6s ease-in-out infinite;
}
@keyframes stlwPulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.7)}}

/* ARENA */
.stlw-arena-v2 .arena{
  position:relative;height:380px;
  border-radius:12px;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--cat) 18%, transparent), transparent 60%),
    linear-gradient(180deg, #0e1014 0%, #14171d 55%, #0a0c10 100%);
  border:1px solid var(--line-2);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 -40px 80px rgba(0,0,0,0.45);
}
.stlw-arena-v2 .arena .horizon{
  position:absolute;left:0;right:0;top:46%;height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--cat) 70%, transparent), transparent);
  box-shadow:0 0 18px color-mix(in oklab, var(--cat) 60%, transparent);
}
.stlw-arena-v2 .arena .floor{
  position:absolute;left:-10%;right:-10%;bottom:0;height:54%;
  background:
    repeating-linear-gradient(0deg,
      transparent 0 38px,
      color-mix(in oklab, var(--cat) 15%, transparent) 38px 39px),
    repeating-linear-gradient(90deg,
      transparent 0 70px,
      color-mix(in oklab, var(--cat) 12%, transparent) 70px 71px);
  transform:perspective(500px) rotateX(58deg);
  transform-origin:top center;
  mask-image:linear-gradient(180deg, transparent, #000 35%, #000);
  opacity:.6;
}
.stlw-arena-v2 .arena .scan{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;z-index:3;
}
.stlw-arena-v2 .arena .vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,0.7) 100%);
  z-index:4;
}
.stlw-arena-v2 .arena .scan-band{
  position:absolute;left:-10%;right:-10%;height:60px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,0.08), transparent);
  filter:blur(2px);
  animation:stlwScanMove 5.5s linear infinite;
  z-index:3;pointer-events:none;
}
@keyframes stlwScanMove{0%{top:-10%}100%{top:110%}}

.stlw-arena-v2 .ring{
  position:absolute;border-radius:50%;
  pointer-events:none;
  background:radial-gradient(ellipse, color-mix(in oklab, var(--c, var(--cat)) 30%, transparent) 0%, transparent 65%);
  border:1px solid color-mix(in oklab, var(--c, var(--cat)) 40%, transparent);
  box-shadow:0 0 24px color-mix(in oklab, var(--c, var(--cat)) 30%, transparent);
  animation:stlwRingPulse 2.4s ease-in-out infinite;
}
@keyframes stlwRingPulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
.stlw-arena-v2 .ring.you{ --c:var(--cat); width:300px;height:74px;left:6%;bottom:8%; }
.stlw-arena-v2 .ring.foe{ --c:var(--opp); width:240px;height:60px;right:8%;bottom:34%; }

/* fighter slab — large hero portrait */
.stlw-arena-v2 .fighter{
  position:absolute;width:170px;height:240px;
  border-radius:14px 14px 6px 6px;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--c, var(--cat)) 22%, #1a1d24) 0%,
      color-mix(in oklab, var(--c, var(--cat)) 8%, #0e1014) 100%);
  border:1px solid color-mix(in oklab, var(--c, var(--cat)) 35%, var(--line-2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 22px 40px -12px rgba(0,0,0,0.75),
    0 0 36px -6px color-mix(in oklab, var(--c, var(--cat)) 50%, transparent);
  z-index:5;
  display:flex;flex-direction:column;align-items:center;
  padding:14px 10px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.22em;
  color:var(--ink-d);text-transform:uppercase;
  overflow:hidden;
}
.stlw-arena-v2 .fighter::before, .stlw-arena-v2 .fighter::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;mix-blend-mode:screen;
}
.stlw-arena-v2 .fighter::before{
  background:linear-gradient(180deg, color-mix(in oklab, var(--anaglyph-red) 55%, transparent), transparent 60%);
  transform:translate(-3px,0);
  animation:stlwFigR 3.2s ease-in-out infinite;
}
.stlw-arena-v2 .fighter::after{
  background:linear-gradient(180deg, color-mix(in oklab, var(--anaglyph-blue) 55%, transparent), transparent 60%);
  transform:translate(3px,0);
  animation:stlwFigB 3.2s ease-in-out infinite;
}
@keyframes stlwFigR{0%,100%{transform:translate(-2px,0);opacity:.55}50%{transform:translate(-4px,0);opacity:.8}}
@keyframes stlwFigB{0%,100%{transform:translate(2px,0);opacity:.5}50%{transform:translate(4px,0);opacity:.75}}
.stlw-arena-v2 .fighter .head{
  width:70px;height:70px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--c, var(--cat)) 30%, #2a2d33), #15171c);
  border:2px solid color-mix(in oklab, var(--c, var(--cat)) 40%, var(--line-2));
  margin-top:6px;
  position:relative;
  z-index:2;
  display:flex;align-items:center;justify-content:center;
  font-size:36px;
  overflow:hidden;
  box-shadow:0 6px 16px -6px rgba(0,0,0,0.6);
}
.stlw-arena-v2 .fighter .head img{ width:100%;height:100%;object-fit:cover;display:block;image-rendering:pixelated; }
.stlw-arena-v2 .fighter .torso{
  width:120px;height:108px;
  margin-top:10px;border-radius:8px;
  background:
    repeating-linear-gradient(45deg,
      color-mix(in oklab, var(--c, var(--cat)) 15%, transparent) 0 8px,
      transparent 8px 16px),
    color-mix(in oklab, var(--c, var(--cat)) 25%, #1a1d24);
  border:1px solid color-mix(in oklab, var(--c, var(--cat)) 25%, var(--line-2));
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  font-size:54px;
  overflow:hidden;
}
.stlw-arena-v2 .fighter .torso img{ width:100%;height:100%;object-fit:contain;display:block;image-rendering:pixelated; }
.stlw-arena-v2 .fighter .tag{
  margin-top:auto;color:var(--c, var(--cat));font-weight:700;
  position:relative;z-index:2;
  font-size:11px;letter-spacing:0.3em;
}
.stlw-arena-v2 .fighter.you{ --c:var(--cat); left:6%; bottom:6%; }
.stlw-arena-v2 .fighter.foe{ --c:var(--opp); right:6%; top:6%; transform:scale(.92); }

/* Field cards stack — small cards lined up next to each fighter */
.stlw-arena-v2 .field-row{
  position:absolute; z-index:6;
  display:flex; gap:6px; align-items:flex-end;
  pointer-events:none;
}
.stlw-arena-v2 .field-row.you{ left:calc(6% + 180px); bottom:8%; }
.stlw-arena-v2 .field-row.foe{ right:calc(6% + 175px); top:8%; flex-direction:row-reverse; }
.stlw-arena-v2 .field-card{
  width:64px; height:90px;
  border-radius:6px; overflow:hidden;
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--c, var(--cat)) 35%, #14161a),
    #0a0b0d);
  border:1.5px solid color-mix(in oklab, var(--c, var(--cat)) 50%, var(--line-2));
  box-shadow:0 10px 18px -8px rgba(0,0,0,0.7), 0 0 12px -4px color-mix(in oklab, var(--c, var(--cat)) 50%, transparent);
  display:flex; flex-direction:column; padding:4px;
  font-family:'Montserrat',sans-serif; color:var(--ink);
  position:relative;
  pointer-events:auto;
}
.stlw-arena-v2 .field-card.dead{ opacity:.35; filter:grayscale(0.7); }
.stlw-arena-v2 .field-card .fc-icon{
  flex:1; display:flex; align-items:center; justify-content:center;
  font-size:30px;
  background:linear-gradient(180deg, color-mix(in oklab, var(--c, var(--cat)) 28%, #1a1d22), #0d0e10);
  border-radius:4px; margin-bottom:3px;
}
.stlw-arena-v2 .field-card .fc-name{
  font-size:7px; font-weight:800; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:0.05em; text-transform:lowercase;
  margin-bottom:2px;
}
.stlw-arena-v2 .field-card .fc-hp{
  height:4px; background:rgba(0,0,0,0.4); border-radius:2px; overflow:hidden;
  margin-bottom:3px;
}
.stlw-arena-v2 .field-card .fc-hp > i{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--hp-good), var(--c, var(--cat)));
}
.stlw-arena-v2 .field-card .fc-hp > i.warn{ background:linear-gradient(90deg, var(--hp-warn), var(--anaglyph-red)); }
.stlw-arena-v2 .field-card .fc-stats{
  display:flex; justify-content:space-between;
  font-size:7px; font-weight:900; font-family:'JetBrains Mono',monospace;
}
.stlw-arena-v2 .field-card .fc-stats .a{ color:#ff8a8a; }
.stlw-arena-v2 .field-card .fc-stats .d{ color:#8ac6ff; }
.stlw-arena-v2 .field-card[data-cat="skate"]    {--c:#1FE0E0}
.stlw-arena-v2 .field-card[data-cat="freestyle"]{--c:#FF5A3C}
.stlw-arena-v2 .field-card[data-cat="dj"]       {--c:#FF3B7F}
.stlw-arena-v2 .field-card[data-cat="bmx"]      {--c:#C8202B}
.stlw-arena-v2 .field-card[data-cat="graffiti"] {--c:#B026FF}
.stlw-arena-v2 .field-card[data-cat="sing"]     {--c:#47c8ff}
.stlw-arena-v2 .field-card[data-cat="rap"]      {--c:#47c8ff}
.stlw-arena-v2 .field-card[data-cat="dance"]    {--c:#B026FF}
.stlw-arena-v2 .field-card[data-cat="producer"] {--c:#4cff91}
.stlw-arena-v2 .field-card[data-cat="breaking"] {--c:#FF3B7F}
.stlw-arena-v2 .field-card[data-cat="scenario"] {--c:#FFD700}
.stlw-arena-v2 .field-row.empty{
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em;
  color:rgba(255,255,255,0.25); text-transform:uppercase;
  padding:8px 12px; border:1px dashed rgba(255,255,255,0.1); border-radius:6px;
}

@media(max-width:880px){
  .stlw-arena-v2 .fighter{ width:140px; height:220px; padding:10px 8px; }
  .stlw-arena-v2 .fighter .head{ width:60px; height:60px; }
  .stlw-arena-v2 .fighter .torso{ width:100px; height:96px; font-size:48px; }
  .stlw-arena-v2 .field-row.you{ left:calc(4% + 150px); }
  .stlw-arena-v2 .field-row.foe{ right:calc(4% + 145px); }
  .stlw-arena-v2 .field-card{ width:50px; height:70px; }
  .stlw-arena-v2 .field-card .fc-icon{ font-size:22px; }
}
@media(max-width:600px){
  .stlw-arena-v2 .arena{ height:auto; min-height:520px; }
  .stlw-arena-v2 .fighter{ width:120px; height:180px; }
  .stlw-arena-v2 .fighter.you{ left:4%; bottom:4%; }
  .stlw-arena-v2 .fighter.foe{ right:4%; top:4%; transform:scale(.85); }
  .stlw-arena-v2 .field-row.you{ left:calc(4% + 130px); bottom:4%; flex-wrap:wrap; max-width:55%; }
  .stlw-arena-v2 .field-row.foe{ right:calc(4% + 130px); top:4%; flex-wrap:wrap; max-width:55%; }
  .stlw-arena-v2 .field-card{ width:44px; height:62px; padding:3px; }
  .stlw-arena-v2 .field-card .fc-icon{ font-size:18px; margin-bottom:2px; }
  .stlw-arena-v2 .field-card .fc-name{ font-size:6px; }
  .stlw-arena-v2 .field-card .fc-stats{ font-size:6px; }
}

/* HP CARDS */
.stlw-arena-v2 .hp{
  position:absolute;width:240px;
  background:linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.65));
  border:1px solid var(--line-2);
  border-radius:10px;
  padding:10px 12px;
  z-index:6;backdrop-filter:blur(6px);
  font-family:'JetBrains Mono',monospace;
  box-shadow:0 14px 30px -12px rgba(0,0,0,0.8);
}
.stlw-arena-v2 .hp.foe{ left:14px; top:14px; }
.stlw-arena-v2 .hp.you{ right:14px; bottom:14px; }
.stlw-arena-v2 .hp .row1{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stlw-arena-v2 .hp .name{
  font-family:'Montserrat',sans-serif;font-weight:900;
  font-size:13px;letter-spacing:0.10em;text-transform:uppercase;
  color:var(--ink);
}
.stlw-arena-v2 .hp .lvl{
  font-size:9px;letter-spacing:0.22em;
  color:var(--c, var(--cat));font-weight:700;
}
.stlw-arena-v2 .hp.foe{--c:var(--opp)}
.stlw-arena-v2 .hp.you{--c:var(--cat)}
.stlw-arena-v2 .hp .hearts{display:flex;gap:3px;margin-top:6px}
.stlw-arena-v2 .hp .hearts svg{width:11px;height:11px;color:var(--anaglyph-red);filter:drop-shadow(0 0 3px rgba(230,57,70,0.5))}
.stlw-arena-v2 .hp .hearts svg.off{color:rgba(255,255,255,0.18);filter:none}
.stlw-arena-v2 .hp .bar{
  height:8px;border-radius:3px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(0,0,0,0.4);
  overflow:hidden;position:relative;
  margin-top:8px;
}
.stlw-arena-v2 .hp .bar > i{
  display:block;height:100%;
  background:linear-gradient(90deg, var(--hp-good), color-mix(in oklab, var(--hp-good) 60%, var(--c, var(--cat))));
  box-shadow:0 0 10px color-mix(in oklab, var(--hp-good) 50%, transparent);
}
.stlw-arena-v2 .hp .bar > i.warn{background:linear-gradient(90deg, var(--hp-warn), var(--anaglyph-red))}
.stlw-arena-v2 .hp .nums{
  display:flex;justify-content:space-between;
  margin-top:5px;font-size:9px;letter-spacing:0.18em;color:var(--ink-d);
}
.stlw-arena-v2 .hp .nums b{color:var(--ink);font-weight:700}

/* DIALOG / TURN */
.stlw-arena-v2 .dialog{
  margin-top:10px;
  display:grid;grid-template-columns:1fr auto;align-items:stretch;
  background:rgba(0,0,0,0.45);
  border:1px solid var(--line-2);border-radius:10px;
  overflow:hidden;
}
.stlw-arena-v2 .dialog .msg{
  padding:8px 12px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:0.04em;
  display:flex;align-items:center;gap:8px;
  color:var(--ink);
  min-height:36px;
}
.stlw-arena-v2 .dialog .msg .caret{color:var(--cat);font-weight:700}
.stlw-arena-v2 .dialog .msg em{font-style:normal;color:var(--cat);font-weight:700}
.stlw-arena-v2 .dialog .turn{
  padding:0 18px;display:flex;align-items:center;gap:10px;
  background:rgba(0,0,0,0.4);
  border-left:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.24em;
  text-transform:uppercase;color:var(--ink-d);
  white-space:nowrap;
}
.stlw-arena-v2 .dialog .turn b{color:var(--cat);font-weight:700}

/* MAIN ROW: hand + side panel */
.stlw-arena-v2 .row{
  margin-top:10px;display:grid;
  grid-template-columns:minmax(0, 1fr) 240px;gap:10px;
}
@media(max-width:880px){.stlw-arena-v2 .row{grid-template-columns:1fr}}

.stlw-arena-v2 .hand-wrap{
  background:rgba(0,0,0,0.30);
  border:1px solid var(--line);
  border-radius:12px;padding:10px;
  position:relative;overflow:hidden;
}
.stlw-arena-v2 .hand-wrap .hwh{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;flex-wrap:wrap;gap:6px;
}
.stlw-arena-v2 .hand-wrap .hwh .lbl{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:0.28em;
  text-transform:uppercase;color:var(--ink-d);
}
.stlw-arena-v2 .hand-wrap .hwh .lbl b{color:var(--ink);font-weight:700}
.stlw-arena-v2 .hand-wrap .hwh .energy{
  display:flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-d);
}
.stlw-arena-v2 .energy-pip{
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, var(--cat));
  box-shadow:0 0 8px var(--cat);
}
.stlw-arena-v2 .energy-pip.empty{background:rgba(255,255,255,0.08);box-shadow:none}

.stlw-arena-v2 .hand{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
  gap:10px;
}
@media(max-width:600px){.stlw-arena-v2 .hand{grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));gap:8px}}
.stlw-arena-v2 .mini-card{
  position:relative;aspect-ratio: 5/7;
  min-width:0;
  border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--c, var(--cat-deep)) 50%, #14161a) 0%,
    #0a0b0d 100%);
  box-shadow:
    0 18px 30px -16px rgba(0,0,0,0.8),
    0 0 0 1px color-mix(in oklab, var(--c, var(--cat)) 30%, rgba(255,255,255,0.04)),
    inset 0 1px 0 rgba(255,255,255,0.06);
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}
.stlw-arena-v2 .mini-card.unplayable{ opacity:.5; cursor:not-allowed; }
.stlw-arena-v2 .mini-card:not(.unplayable):hover{
  transform:translateY(-6px) rotate(-0.5deg);
  box-shadow:
    0 24px 36px -10px color-mix(in oklab, var(--c, var(--cat)) 50%, rgba(0,0,0,0.6)),
    0 0 0 1px var(--c, var(--cat)),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.stlw-arena-v2 .mini-card.selected{
  transform:translateY(-12px);
  box-shadow:
    0 28px 36px -10px color-mix(in oklab, var(--c, var(--cat)) 60%, rgba(0,0,0,0.6)),
    0 0 0 1.5px var(--c, var(--cat)),
    0 0 24px color-mix(in oklab, var(--c, var(--cat)) 50%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.stlw-arena-v2 .mini-card .mc-bg{
  position:absolute;inset:6px;border-radius:6px;overflow:hidden;
  background:#000;
}
.stlw-arena-v2 .mini-card .mc-bg::before, .stlw-arena-v2 .mini-card .mc-bg::after{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(45deg,
      color-mix(in oklab, var(--c, var(--cat)) 18%, transparent) 0 6px,
      transparent 6px 12px),
    color-mix(in oklab, var(--c, var(--cat)) 16%, #1a1c20);
  mix-blend-mode:normal;
}
.stlw-arena-v2 .mini-card .mc-bg::after{
  background:
    radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--anaglyph-red) 30%, transparent), transparent 50%),
    radial-gradient(circle at 70% 70%, color-mix(in oklab, var(--anaglyph-blue) 30%, transparent), transparent 50%);
  mix-blend-mode:screen;opacity:.55;
}
.stlw-arena-v2 .mini-card .mc-content{
  position:absolute;inset:0;padding:10px;z-index:2;
  display:flex;flex-direction:column;
}
.stlw-arena-v2 .mini-card .mc-cat{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink);background:rgba(0,0,0,0.7);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:999px;padding:3px 8px;
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:5px;
  max-width:calc(100% - 36px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-left:30px;
}
.stlw-arena-v2 .mini-card .mc-cat .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--c, var(--cat));box-shadow:0 0 5px var(--c, var(--cat));
  flex-shrink:0;
}
.stlw-arena-v2 .mini-card .mc-stars{
  position:absolute;top:10px;right:10px;display:flex;gap:1px;z-index:3;
}
.stlw-arena-v2 .mini-card .mc-stars svg{width:10px;height:10px;color:var(--c, var(--cat))}
.stlw-arena-v2 .mini-card .mc-stars svg.off{color:rgba(255,255,255,0.22)}
.stlw-arena-v2 .mini-card .mc-frame{
  flex:1;margin-top:10px;
  border-radius:6px;overflow:hidden;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--c, var(--cat)) 30%, #1a1d22), #0d0e10);
  position:relative;
  border:1px solid rgba(255,255,255,0.06);
  min-height:60px;
}
.stlw-arena-v2 .mini-card .mc-frame::before, .stlw-arena-v2 .mini-card .mc-frame::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 35%, currentColor 0 22%, transparent 23%),
    linear-gradient(180deg, transparent 50%, currentColor 50% 80%, transparent 81%);
  mix-blend-mode:screen;
}
.stlw-arena-v2 .mini-card .mc-frame::before{color:var(--anaglyph-red);transform:translate(-2px,0);opacity:.65;animation:stlwFigR 3.2s ease-in-out infinite}
.stlw-arena-v2 .mini-card .mc-frame::after{color:var(--anaglyph-blue);transform:translate(2px,0);opacity:.6;animation:stlwFigB 3.2s ease-in-out infinite}
.stlw-arena-v2 .mini-card .mc-frame .silh{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:42px;
  color:var(--ink);
  z-index:2;
}
.stlw-arena-v2 .mini-card .mc-title{
  margin-top:8px;
  font-family:'Montserrat',sans-serif;font-weight:900;
  font-size:13px;letter-spacing:-0.005em;text-transform:lowercase;
  text-align:center;color:var(--ink);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:0 4px;
}
.stlw-arena-v2 .mini-card .mc-stats{
  margin-top:8px;
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--c, var(--cat)) 90%, #000),
    color-mix(in oklab, var(--c, var(--cat)) 70%, #000));
  border-radius:6px;
  padding:6px 5px;
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  font-family:'Montserrat',sans-serif;font-weight:900;font-size:13px;
  color:var(--ink);text-shadow:0 1px 0 rgba(0,0,0,0.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.3);
}
.stlw-arena-v2 .mini-card .mc-stats .stat{display:flex;align-items:center;justify-content:center;gap:4px}
.stlw-arena-v2 .mini-card .mc-stats svg{width:12px;height:12px}
.stlw-arena-v2 .mini-card .mc-cost{
  position:absolute;top:10px;left:10px;z-index:3;
  width:28px;height:28px;border-radius:50%;
  background:var(--bg-0);
  border:2px solid var(--c, var(--cat));
  display:grid;place-items:center;
  font-family:'Montserrat',sans-serif;font-weight:900;font-size:14px;
  color:var(--c, var(--cat));
  box-shadow:0 0 12px color-mix(in oklab, var(--c, var(--cat)) 60%, transparent);
}
.stlw-arena-v2 .mini-card .mc-swap{
  position:absolute;top:-6px;right:-6px;z-index:4;
  width:24px;height:24px;border-radius:50%;
  background:#d0a020;border:1.5px solid #181818;
  color:#181818;font-size:12px;font-weight:900;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.5);
}

.stlw-arena-v2 .mini-card[data-cat="skate"]    {--c:#1FE0E0}
.stlw-arena-v2 .mini-card[data-cat="freestyle"]{--c:#FF5A3C}
.stlw-arena-v2 .mini-card[data-cat="dj"]       {--c:#FF3B7F}
.stlw-arena-v2 .mini-card[data-cat="bmx"]      {--c:#C8202B}
.stlw-arena-v2 .mini-card[data-cat="graffiti"] {--c:#B026FF}
.stlw-arena-v2 .mini-card[data-cat="sing"]     {--c:#47c8ff}
.stlw-arena-v2 .mini-card[data-cat="rap"]      {--c:#47c8ff}
.stlw-arena-v2 .mini-card[data-cat="dance"]    {--c:#B026FF}
.stlw-arena-v2 .mini-card[data-cat="producer"] {--c:#4cff91}
.stlw-arena-v2 .mini-card[data-cat="breaking"] {--c:#FF3B7F}
.stlw-arena-v2 .mini-card[data-cat="scenario"] {--c:#FFD700}

/* SIDE PANEL */
.stlw-arena-v2 .side{
  display:flex;flex-direction:column;gap:8px;
}
.stlw-arena-v2 .panel{
  background:rgba(0,0,0,0.35);
  border:1px solid var(--line);
  border-radius:10px;padding:8px 10px;
}
.stlw-arena-v2 .panel h4{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-d);font-weight:700;
  margin:0 0 6px;
  display:flex;justify-content:space-between;align-items:center;
}
.stlw-arena-v2 .panel h4 b{color:var(--cat);font-weight:700}
.stlw-arena-v2 .deck-pile{
  display:flex;align-items:center;gap:14px;
}
.stlw-arena-v2 .deck-pile{ gap:10px; }
.stlw-arena-v2 .deck-pile .stack{
  position:relative;width:42px;height:58px;flex-shrink:0;
}
.stlw-arena-v2 .deck-pile .stack .c{
  position:absolute;inset:0;border-radius:6px;
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--cat-deep) 60%, #14161a),
    #0a0b0d);
  border:1px solid color-mix(in oklab, var(--cat) 35%, var(--line-2));
  box-shadow:0 8px 16px -8px rgba(0,0,0,0.7);
}
.stlw-arena-v2 .deck-pile .stack .c::after{
  content:"";position:absolute;inset:4px;border-radius:4px;
  background:
    repeating-linear-gradient(45deg,
      color-mix(in oklab, var(--cat) 25%, transparent) 0 4px,
      transparent 4px 8px);
  opacity:.5;
}
.stlw-arena-v2 .deck-pile .stack .c:nth-child(1){transform:translate(-3px,2px) rotate(-3deg)}
.stlw-arena-v2 .deck-pile .stack .c:nth-child(2){transform:translate(0,0) rotate(0deg)}
.stlw-arena-v2 .deck-pile .stack .c:nth-child(3){transform:translate(3px,-2px) rotate(2deg)}
.stlw-arena-v2 .deck-pile .meta{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.12em;color:var(--ink);
}
.stlw-arena-v2 .deck-pile .meta div{color:var(--ink-d);font-size:9px;letter-spacing:0.22em;text-transform:uppercase}
.stlw-arena-v2 .deck-pile .meta b{color:var(--ink);font-weight:700;font-size:18px;display:block;font-family:'Montserrat',sans-serif}

.stlw-arena-v2 .log{
  max-height:110px;overflow-y:auto;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:0.02em;
  display:flex;flex-direction:column;gap:6px;
}
.stlw-arena-v2 .log .line{
  color:var(--ink-d);display:flex;gap:8px;align-items:flex-start;
}
.stlw-arena-v2 .log .line .t{color:var(--ink-dd);min-width:36px;flex-shrink:0;font-size:9px}
.stlw-arena-v2 .log .line.you b{color:var(--cat);font-weight:700}
.stlw-arena-v2 .log .line.foe b{color:var(--opp);font-weight:700}
.stlw-arena-v2 .log .line.sys{color:var(--ink-dd);font-style:italic}

/* ACTION BAR */
.stlw-arena-v2 .action-bar{
  margin-top:8px;display:flex;gap:8px;align-items:center;justify-content:space-between;
  padding:8px 10px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.25));
  border:1px solid var(--line);border-radius:10px;
  flex-wrap:wrap;
}
.stlw-arena-v2 .action-bar .left{display:flex;gap:8px;flex-wrap:wrap}
.stlw-arena-v2 .btn{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;letter-spacing:0.22em;
  text-transform:uppercase;
  padding:7px 11px;border-radius:7px;
  background:rgba(0,0,0,0.5);
  border:1px solid var(--line-2);
  color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:all .2s;
}
.stlw-arena-v2 .btn:hover{border-color:var(--cat);color:var(--cat)}
.stlw-arena-v2 .btn:disabled{opacity:.4;cursor:not-allowed}
.stlw-arena-v2 .btn:disabled:hover{border-color:var(--line-2);color:var(--ink)}
.stlw-arena-v2 .btn svg{width:12px;height:12px}
.stlw-arena-v2 .btn-primary{
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--cat) 90%, #000),
    color-mix(in oklab, var(--cat) 65%, #000));
  border-color:var(--cat);color:#0a0a0c;
  box-shadow:
    0 8px 20px -6px color-mix(in oklab, var(--cat) 70%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  font-size:11px;letter-spacing:0.22em;padding:9px 18px;
  position:relative;overflow:hidden;
}
.stlw-arena-v2 .btn-primary:hover{transform:translateY(-1px);filter:brightness(1.08);color:#0a0a0c}

/* foot */
.stlw-arena-v2 .foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:6px;padding:0 4px;
  font-family:'JetBrains Mono',monospace;font-size:8px;
  letter-spacing:0.2em;color:var(--ink-dd);text-transform:uppercase;
  flex-wrap:wrap;gap:6px;
}
.stlw-arena-v2 .foot .brand{
  font-family:'Montserrat',sans-serif;font-weight:900;letter-spacing:0.32em;
  color:rgba(255,255,255,0.55);font-size:10px;
}

/* arena picker (only used in standalone demo page) */
body.stlw-battle-page{margin:0;background:#0a0a0c;min-height:100vh;color:#f5f3ee;font-family:'Montserrat',sans-serif}
.arena-picker{
  position:fixed;top:14px;left:14px;
  z-index:50;display:flex;gap:6px;
  background:rgba(0,0,0,0.65);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:12px;padding:6px;
  backdrop-filter:blur(8px);
}
.arena-picker button{
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;
  padding:6px 10px;border-radius:8px;
  background:transparent;border:1px solid transparent;
  color:rgba(255,255,255,0.55);cursor:pointer;
  display:flex;align-items:center;gap:5px;
  transition:all .2s;
}
.arena-picker button .sw{width:7px;height:7px;border-radius:50%;background:var(--sw);box-shadow:0 0 6px var(--sw)}
.arena-picker button:hover{color:#fff;border-color:rgba(255,255,255,0.15)}
.arena-picker button.active{color:#000;background:var(--sw);border-color:var(--sw)}
.arena-picker button.active .sw{background:#000;box-shadow:none}

.bg-mark{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  font-weight:900;font-size:30vw;letter-spacing:-0.05em;
  color:rgba(255,255,255,0.018);
  z-index:0;user-select:none;pointer-events:none;white-space:nowrap;
}