`public/style.css`

220 lines
/* Debate Ring Viewer — boxing-arena look. Hot rim-light, dim crowd, canvas
   mat with rope shadows. All graphics are CSS / SVG; no raster assets. */
:root{
  --bg:#0a0809;
  --canvas:#c8ad7a;
  --canvas-stripe:#b9985f;
  --rope:#dadcdf;
  --rope-shadow:rgba(0,0,0,.45);
  --post:#a31818;
  --rim:#ffd86b;
  --crowd:#0f0d10;
  --rail:#15171c;
  --ink:#f4ecd9;
  --ink-dim:#9a958a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;height:100%;overflow:hidden}

/* ── side rail ───────────────────────────────────────────────────────── */
#rail{
  position:fixed;left:0;top:0;bottom:0;width:280px;background:var(--rail);
  border-right:1px solid #232733;padding:18px 14px;overflow:auto;z-index:5;
}
#rail h1{margin:0 0 2px;font-size:18px;letter-spacing:.5px}
#rail .sub{color:var(--ink-dim);font-size:12px;margin:0 0 18px}
.rail-section{margin-bottom:18px}
.rail-section h2{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;
  color:var(--ink-dim);margin:0 0 8px}
#runs{list-style:none;padding:0;margin:0;max-height:38vh;overflow:auto}
#runs li{padding:7px 9px;border-radius:6px;cursor:pointer;font-size:12.5px;
  display:flex;justify-content:space-between;gap:8px;color:#d8d3c8;
  border:1px solid transparent}
#runs li:hover{background:#1d2028}
#runs li.active{background:#262a36;border-color:#3a3f4f;color:#fff}
#runs li .r{color:var(--ink-dim);font-size:11px}
#now{font-size:13px;color:#fff;margin-bottom:10px;line-height:1.4}
.ctrls{display:flex;gap:6px;margin-bottom:10px}
.ctrls button{flex:1;background:#23262f;color:var(--ink);border:1px solid #2f3441;
  padding:7px;border-radius:6px;cursor:pointer;font-size:12px}
.ctrls button:hover{background:#2c303b}
.ctrls button:disabled{opacity:.4;cursor:default}
#play{background:#a31818;border-color:#c12525}
#play:hover{background:#c12525}
.speed{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-dim);margin:6px 0}
.speed input[type=range]{flex:1}
#final{white-space:pre-wrap;font-size:11px;color:#bdb6a8;background:#0d0e12;
  padding:8px;border-radius:6px;max-height:30vh;overflow:auto;margin:0}

/* ── stage ───────────────────────────────────────────────────────────── */
#stage{position:fixed;left:280px;right:0;top:0;bottom:0;display:flex;
  align-items:center;justify-content:center}
.arena-frame{
  position:relative;width:96%;height:96%;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(255,217,140,.16), transparent 55%),
    radial-gradient(ellipse at 50% 30%,  rgba(255,217,140,.08), transparent 60%),
    linear-gradient(180deg, #07060a 0%, #14080d 70%, #0a0608 100%);
  border-radius:14px;overflow:hidden;
  box-shadow:inset 0 0 140px rgba(0,0,0,.7);
}
.audience{position:absolute;inset:0;
  background:
    radial-gradient(circle at 12% 78%, #2a2228 6px, transparent 7px) 0 0/22px 22px,
    radial-gradient(circle at 50% 84%, #1d171a 5px, transparent 6px) 11px 11px/22px 22px,
    radial-gradient(circle at 88% 76%, #2a2228 6px, transparent 7px) 0 0/22px 22px;
  opacity:.55;
  -webkit-mask:linear-gradient(180deg,transparent 0%,transparent 35%,#000 55%,#000 100%);
          mask:linear-gradient(180deg,transparent 0%,transparent 35%,#000 55%,#000 100%);
}

/* ring: octagonal pseudo via clip-path */
.ring{
  position:absolute;left:50%;top:48%;
  width:min(92%, 1020px);aspect-ratio: 1.42 / 1;
  transform:translate(-50%,-50%) perspective(1200px) rotateX(28deg);
  transform-style:preserve-3d;
}
.ring-mat{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(45deg,
      var(--canvas) 0 26px,
      var(--canvas-stripe) 26px 52px);
  border-radius:6px;
  box-shadow: inset 0 0 80px rgba(0,0,0,.35),
              inset 0 0 0 6px #6a4f24,
              0 22px 60px rgba(0,0,0,.7);
  outline:2px solid #3b2911;
}
.ring-mat::before,.ring-mat::after{
  content:"";position:absolute;left:50%;top:50%;
  width:86%;aspect-ratio:1;border-radius:50%;border:2px dashed #6a4f24;
  transform:translate(-50%,-50%);opacity:.55;
}
.ring-mat::after{width:46%;border-style:solid;border-width:3px;border-color:#a31818;opacity:.85}

.ring-rope{position:absolute;left:-2%;right:-2%;height:5px;background:var(--rope);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 5px 4px var(--rope-shadow);
  transform-origin:center;border-radius:3px}
.rope-top{top:-3%}
.rope-mid{top:6%}
.rope-bot{top:15%}

.ring-post{position:absolute;width:14px;height:90px;background:var(--post);
  border-radius:6px;box-shadow:inset -3px 0 0 rgba(0,0,0,.35),0 0 18px rgba(255,80,80,.25)}
.post-tl{left:-8px;top:-6%}
.post-tr{right:-8px;top:-6%}
.post-bl{left:-8px;top:84%}
.post-br{right:-8px;top:84%}

.ring-light{position:absolute;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,#ffe79a 0%,#ffb955 35%,transparent 65%);
  filter:blur(2px);opacity:.85;pointer-events:none;mix-blend-mode:screen}
.light-l{left:-60px;top:-60px}
.light-r{right:-60px;top:-60px}

/* ── fighters ────────────────────────────────────────────────────────── */
#fighters{position:absolute;inset:0;transform-style:preserve-3d}
.fighter{
  position:absolute;
  width:148px;
  transform: translate(-50%,-78%) rotateX(-28deg);   /* counter-tilt vs ring */
  transition:left .9s ease, top .9s ease, transform .9s ease;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.55));
  --skin:#e9b489;--skin-d:#a87854;--hair:#3a2118;
  --shorts:#a31818;--shorts-d:#5a0c0c;--glove:#a31818;
}
.fighter .body{display:block;width:100%;height:auto}
.fighter .nameplate{
  position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:4px 9px;background:rgba(0,0,0,.65);border-radius:4px;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:#fff;border:1px solid rgba(255,255,255,.12);white-space:nowrap;
}
.fighter .nameplate .rec{font-size:9px;color:#ffd86b;letter-spacing:.5px}

/* fighter visual variants — color + accents */
.fighter[data-id="claude"]   {--shorts:#cc785c;--shorts-d:#7a4233;--glove:#cc785c;--hair:#3a2118;--skin:#f1c69b}
.fighter[data-id="codex"]    {--shorts:#10a37f;--shorts-d:#0a6e56;--glove:#10a37f;--hair:#1a1a1a;--skin:#dab18a}
.fighter[data-id="deepseek"] {--shorts:#1f6feb;--shorts-d:#0f3f8f;--glove:#1f6feb;--hair:#0d0d0d;--skin:#e6c8a8}
.fighter[data-id="gptoss"]   {--shorts:#e64a3a;--shorts-d:#7a1d12;--glove:#e64a3a;--hair:#241612;--skin:#f5cfa8}
.fighter[data-id="kimi"]     {--shorts:#0fb5b5;--shorts-d:#075a5a;--glove:#0fb5b5;--hair:#181010;--skin:#e9b896}
.fighter[data-id="mistral"]  {--shorts:#ff7a1f;--shorts-d:#8a3c08;--glove:#ff7a1f;--hair:#1d1208;--skin:#eebd91}
.fighter[data-id="phi4"]     {--shorts:#7a3eb1;--shorts-d:#3c1c5a;--glove:#7a3eb1;--hair:#0d0a14;--skin:#dcb18a}
.fighter[data-id="qwen"]     {--shorts:#ffb20a;--shorts-d:#7a5108;--glove:#1a1a1a;--hair:#1a1208;--skin:#e6b58c}

/* throwing-stance animations — the front arm jabs out, head bobs */
.fighter .arm-front{transition:transform .14s cubic-bezier(.6,1.7,.4,.9)}
.fighter .arm-back {transition:transform .18s ease}
.fighter .head     {transition:transform .18s ease}
.fighter.idle .arm-front{transform:none}
.fighter.idle .head{transform:translateY(0)}

.fighter.jab .arm-front   {transform:translate(34px,-8px) scale(1.18) rotate(-12deg)}
.fighter.cross .arm-back  {transform:translate(48px,-6px) scale(1.22) rotate(-22deg)}
.fighter.hook  .arm-front {transform:translate(20px,-22px) rotate(-58deg) scale(1.15)}
.fighter.uppercut .arm-front{transform:translate(8px,-44px) rotate(-92deg) scale(1.18)}
.fighter.dodge .head{transform:translate(-10px,4px) rotate(-9deg)}
.fighter.stagger .head{transform:translate(8px,-6px) rotate(11deg)}
.fighter.stagger{filter:drop-shadow(0 18px 18px rgba(0,0,0,.55)) hue-rotate(-12deg)}
.fighter.ko{transform:translate(-50%,-78%) rotateX(-28deg) rotateZ(74deg) translateY(40px);opacity:.85}
.fighter.active .sweat{opacity:1;animation:drip 1.6s linear infinite}
@keyframes drip{0%{transform:translateY(0);opacity:1}100%{transform:translateY(60px);opacity:0}}

/* speech bubbles -------------------------------------------------------- */
#bubbles{position:absolute;inset:0;pointer-events:none;transform:translateZ(40px)}
.bubble{
  position:absolute;max-width:240px;padding:9px 12px;background:#fffbe9;
  color:#16110a;border-radius:14px;font-size:13px;line-height:1.35;
  box-shadow:0 6px 16px rgba(0,0,0,.45),0 0 0 2px #1a0e08;
  transform:translate(-50%,-100%);opacity:0;transition:opacity .25s, transform .25s;
}
.bubble.show{opacity:1;transform:translate(-50%,-110%)}
.bubble::after{content:"";position:absolute;left:50%;bottom:-8px;
  border:8px solid transparent;border-top-color:#fffbe9;
  filter:drop-shadow(0 1px 0 #1a0e08);transform:translateX(-50%)}
.bubble .who{display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--shorts,#a31818);font-weight:700;margin-bottom:3px}

/* impact + camera shake */
.impact{position:absolute;width:120px;height:120px;pointer-events:none;
  transform:translate(-50%,-50%) scale(.4);opacity:0;
  background:radial-gradient(circle,#fff 0%,#ffd86b 25%,#e64a3a 50%,transparent 70%);
  mix-blend-mode:screen;animation:pop .42s ease-out forwards;z-index:10}
.impact::after{content:"POW";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);
  font-family:'Bebas Neue','Impact',sans-serif;font-size:36px;font-weight:900;color:#1a0e08;
  -webkit-text-stroke:2px #fff;text-shadow:0 4px 0 #1a0e08;letter-spacing:1px}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(.4) rotate(-8deg);opacity:0}
  20%{opacity:1}60%{transform:translate(-50%,-50%) scale(1.6) rotate(8deg)}
  100%{transform:translate(-50%,-50%) scale(2) rotate(-4deg);opacity:0}}

.shake{animation:shake .3s}
@keyframes shake{
  0%,100%{transform:translate(-50%,-50%) perspective(1200px) rotateX(28deg)}
  25%{transform:translate(calc(-50% - 12px),-49%) perspective(1200px) rotateX(28deg)}
  50%{transform:translate(calc(-50% + 14px),-50%) perspective(1200px) rotateX(28deg)}
  75%{transform:translate(calc(-50% - 6px),-49%) perspective(1200px) rotateX(28deg)}
}

/* HUD */
.hud{position:absolute;left:50%;top:14px;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;
  background:rgba(0,0,0,.65);border:1px solid #2a2a2a;padding:6px 14px;border-radius:6px;
  font-family:'Bebas Neue','Arial Narrow',sans-serif;letter-spacing:2px;font-size:18px;
  color:#ffd86b;text-shadow:0 0 12px rgba(255,176,40,.6);z-index:20}
.hud-bell{font-size:22px;animation:bellring 4s linear infinite;opacity:.5}
@keyframes bellring{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-18deg)}96%{transform:rotate(14deg)}}

/* responsive */
@media (max-width:760px){
  #rail{width:100%;height:42vh;border-right:none;border-bottom:1px solid #232733;position:relative}
  #stage{position:relative;left:0;height:58vh;}
  .ring{transform:translate(-50%,-50%) perspective(1200px) rotateX(20deg)}
  .fighter{width:90px}
  .nameplate{font-size:9px}
}