/* =========================
   Reading Slam Showdown CSS
   ENTIRE FILE (v8)
   ========================= */
#rss_app {
  --bg:#0b1324; --panel:#121b2f; --panel-2:#0f1830;
  --text:#E6EEF7; --muted:#A6B2C8; --prime:#6EE7F2; --violet:#A78BFA;
  --pink:#FF62B8; --sun:#FFC857; --ok:#34D399; --bad:#FB7185;
  --chip:#1b2542; --chip-brd:#2b3a66; --ring:rgba(255,255,255,.08);
  --shadow:0 12px 30px rgba(0,0,0,.35);
  --radius-lg:22px; --radius:16px; --radius-sm:12px;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text); min-height:100dvh; overflow-x:hidden; background:var(--bg);
}
.hidden{display:none!important}

/* Background */
.rss-bg{position:fixed; inset:0; z-index:-1; overflow:hidden}
.rss-bg-radial{position:absolute; inset:-20% -10% -10% -10%; background:
  radial-gradient(1200px 600px at 20% 10%, rgba(167,139,250,.25), transparent 60%),
  radial-gradient(1000px 600px at 80% 20%, rgba(110,231,242,.25), transparent 60%),
  radial-gradient(900px 600px at 50% 80%, rgba(255,98,184,.22), transparent 60%),
  linear-gradient(180deg, #0b1324 0%, #0b1220 100%); filter:saturate(1.1) contrast(1.05)}
.rss-bg-particles::before,.rss-bg-particles::after{content:""; position:absolute; inset:-20% -10%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.10) 0 2px, transparent 3px);
  animation:float 30s linear infinite; opacity:.25}
.rss-bg-particles::after{animation-duration:45s; opacity:.18}
@keyframes float{to{transform:translateY(-6%)}}

/* Card */
.rss-card{
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid #1f2a4a;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(16px, 2vw, 24px);
  display:flex; align-items:center; justify-content:center;
}

.rss-root{width:min(1100px,92%); margin:0 auto 8vh}
.screen{display:grid; place-items:center}
.screen-inner{width:100%; max-width:980px}

.rss_app{
  min-height: 100vh;
}

.rss_app h2{ font-size: 3rem; text-align:center;padding:0px;}
.sec-head p{ font-size: 1.5rem; text-align: center; }

/* Title */
.rss-title{margin:0; font-weight:800; font-size:5.3rem; text-align:center;
  background:linear-gradient(90deg,var(--text),#fff8);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.rss-title b{background:linear-gradient(90deg,var(--sun),var(--pink),var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent}

/* HUD chips */
.rss-chip{background:var(--chip); border:1px solid var(--chip-brd); padding:8px 14px; border-radius:999px;
  color:var(--text); font-weight:800; font-size:14px; letter-spacing:.2px}
.chip-rail{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:6px 0 14px}
.rss-chip.score-chip{background:rgba(30,70,120,.25); border-color:#2a4f8c}
.score-num{color:#8ee8ff} .score-num.cpu{color:#ffd38a}
.score-pulse{animation:chipPulse .65s ease-out 1}
.chip-rail.prominent{transform:scale(1.06); filter:drop-shadow(0 8px 26px rgba(110,231,242,.35))}
@keyframes chipPulse{0%{transform:scale(1)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

/* Buttons */
.rss-btn{--bg:linear-gradient(90deg,var(--violet),var(--prime)); border:0; color:var(--text);
  background:var(--ring); border-radius:999px; padding:14px 20px; font-weight:700; letter-spacing:.2px;
  cursor:pointer; transition:transform .12s, box-shadow .12s, background .3s; box-shadow:0 10px 24px rgba(0,0,0,.25)}
.rss-btn.primary{background:var(--bg); color:#0b1220}
.rss-btn.huge{padding:16px 28px; font-size:18px}
.rss-btn.prominent{box-shadow:0 16px 40px rgba(110,231,242,.35)}
.rss-btn:disabled{opacity:.6; pointer-events:none}
.rss-btn:hover{transform:translateY(-2px)}
.rss-btn:focus-visible{outline:3px solid var(--prime); outline-offset:3px}

/* Start cover + modes */
.start-stack{display:grid; place-items:center; gap:18px}
.cover-frame{display:grid; place-items:center}
.cover-img{ margin:auto; width:33rem; border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.35); border:1px solid #23345e;}
.mode-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; width:min(900px,92%)}
.mode-tile{position:relative; padding:24px; border-radius:18px; overflow:hidden; cursor:pointer; text-align:center;
  background:linear-gradient(180deg,#141f3b,#0f1831); border:1px solid #203056}
.mode-tile.bright{background:linear-gradient(135deg,#6e8efb 0%,#a777e3 35%,#6ee7f2 100%); color:#0b1220; border:none; box-shadow:0 12px 26px rgba(110,231,242,.25)}
.mode-tile h3{margin:0 0 6px; font-size:2rem; color:#fff; text-shadow:0 1px 0 #0002}
.mode-tile:hover{transform:translateY(-3px)}

/* Packs */
.packs-sub{margin:-10px 0 8px; color:var(--muted)}
.packs-wrap{width:100%; display:grid; place-items:center}
.pack-grid{width:min(900px,92%); display:grid; grid-template-columns:repeat(3, minmax(220px,1fr)); gap:14px; justify-content:center}
.pack-grid.one-select .pack-chip{position:relative; padding:18px 16px; border-radius:16px; border:1px solid #2b3a66; background:#0f1831; color:#dfe8ff;
  font-weight:800; letter-spacing:.2px; cursor:pointer; transition:transform .12s, box-shadow .2s, background .2s; text-align:left}
.pack-grid.one-select .pack-chip .radio{
  position:absolute; right:12px; top:12px; width:18px; height:18px; border-radius:50%; border:2px solid #3d558d; box-shadow:inset 0 0 0 4px #0f1831; transition:box-shadow .2s
}
.pack-grid.one-select .pack-chip.on{background:linear-gradient(135deg,#7dd3fc,#a78bfa); color:#0b1220; border-color:transparent; box-shadow:0 8px 24px rgba(110,231,242,.25)}
.pack-grid.one-select .pack-chip.on .radio{box-shadow:inset 0 0 0 5px #0b1220}

/* Avatar */
.avatar-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:22px}
.avatar-stage{background:#0c152b; border:1px solid #1f2a4a; border-radius:18px; min-height:460px; display:grid; place-items:center; position:relative; overflow:hidden}
.ring-ropes::before,.ring-ropes::after{content:""; position:absolute; left:8%; right:8%; height:6px; border-radius:6px; background:#1d2a4a}
.ring-ropes::before{top:26%}.ring-ropes::after{top:40%}
.avatar-svg{width:min(520px,90%); height:auto}
.avatar-controls{display:grid; gap:14px; align-content:start}
.grid2{display:grid; gap:10px; grid-template-columns:1fr 1fr}
.color-item{background:#0f1831; border:1px solid #23345e; padding:10px 12px; border-radius:12px; display:flex; align-items:center; justify-content:space-between}
.color-item label{font-weight:800}
.color-item input[type="color"]{appearance:none; width:44px; height:32px; border-radius:10px; border:0; background:transparent; cursor:pointer}
.field{display:grid; gap:6px; margin-top:8px}
.field label{font-weight:800; font-size:16px}
.field small{color:var(--muted)}
input[type="text"]{border-radius:12px; background:#0f1831; border:1px solid #23345e; color:var(--text); padding:14px; font-size:22px; font-weight:700; letter-spacing:.3px; width:100%}
.dice{margin-left:8px}

/* VS */
.vs-wrap{display:grid; gap:16px}
.vs-grid{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px}
.vs-side{display:grid; justify-items:center; gap:10px}
.vs-name{background:#0f1831; border:1px solid #23345e; border-radius:999px; padding:8px 14px; font-weight:800; font-size:1.35rem}
.vs-mid{font-size:10rem; font-weight:800; background:linear-gradient(90deg,var(--sun),var(--pink),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Question */
.prompt{text-align:center; font-size:18px; color:var(--muted); margin-bottom:10px}
.q-image{display:grid; place-items:center; width:min(420px,90%); height:min(420px,56vh); margin:0 auto 14px;
  border-radius:18px; background:#0c152b; border:1px solid #1f2a4a; box-shadow:var(--shadow)}
.q-image img{max-width:82%; height:auto}
.answers{display:grid; gap:12px; grid-template-columns:repeat(2, minmax(220px,1fr)); width:min(820px,100%); margin:0 auto}
/* Answers – stronger hover + keyboard focus ring */
.answer{
  border-radius:16px; background:#0f1831; border:1px solid #23345e; color:#dfe8ff;
  padding:16px 18px; font-size:22px; font-weight:800; cursor:pointer; text-align:center;
  transition:transform .1s, box-shadow .2s, border-color .2s;
}
.answer:hover,
.answer:focus-visible{
  transform:translateY(-2px) scale(1.01);
  box-shadow:
    inset 0 0 0 3px #7dd3fc,      /* bold border without layout shift */
    0 12px 24px rgba(0,0,0,.25),
    0 0 24px #7dd3fc55;           /* outer glow */
  border-color:#7dd3fc;
  outline:none;
}
.answer.correct{box-shadow:inset 0 0 0 2px var(--ok), 0 0 24px rgba(52,211,153,.25)}
.answer.wrong{box-shadow:inset 0 0 0 2px var(--bad), 0 0 24px rgba(251,113,133,.25)}

/* Result banner */
.result-banner-top{margin:12px auto 20px; width:max-content; padding:10px 16px; border-radius:999px; font-weight:800; letter-spacing:.2px; box-shadow:0 8px 24px rgba(0,0,0,.25); font-size:2.2rem}
.result-banner-top.ok{background:linear-gradient(90deg,#37e4a3,#6cf0d1); color:#0a2f26}
.result-banner-top.bad{background:linear-gradient(90deg,#ff7b7b,#ffb2a6); color:#3a0d0d}

.main_result{display:flex}

/* Attack layout */
.attack-row{display:flex; flex-direction:column; align-items:flex-start; gap:22px; flex-wrap:nowrap}
.attack-media{flex:0 1 560px; display:grid; place-items:center; min-width:360px}
.gif-frame{width:min(560px,90vw); aspect-ratio:16/9; background:#0c152b; border:1px solid #1f2a4a; border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.gif-frame .big-gif{width:100%; height:100%; object-fit:cover; display:block}
.attack-ring{flex:1 1 0; min-width:320px; display:grid; gap:10px; align-content:start}
.attack-ring .ring{position:relative; min-height:380px; display:grid; place-items:center; overflow:hidden; background:#0c152b; border:1px solid #1f2a4a; border-radius:18px; padding:18px}
.mat{position:absolute; bottom:26px; left:10%; right:10%; height:22px; border-radius:12px; background:linear-gradient(180deg,#0b1223,#0a0f1d); border:1px solid #1b2542; box-shadow:inset 0 10px 20px rgba(0,0,0,.35)}
.w-wrap{position:absolute; bottom:82px}
.w-user{left:18%}
.w-cpu{right:18%; transform:scaleX(-1)}
.move-tag{position:absolute; top:12px; left:50%; transform:translateX(-50%); padding:7px 12px; border-radius:999px; font-weight:900; background:linear-gradient(90deg,var(--sun),var(--pink)); color:#0b1220; box-shadow:var(--shadow)}

.name-tag{position:absolute; bottom:-28px; left:50%; transform:translateX(-50%); background:#0f1831; border:1px solid #23345e; padding:6px 10px; border-radius:999px; font-weight:900; color:#cfe6ff; font-size:12px}
.wrestler-wrap{position:relative}
.wrestler svg{width:240px!important; height:auto; filter:drop-shadow(0 6px 20px rgba(0,0,0,.45))}

/* GOLD aura (attacker only) */
.wrestler-wrap.aura-on::before{
  content:""; position:absolute; inset:-20px; z-index:-1;
  background:
    radial-gradient(60% 60% at 50% 55%, rgba(255,214,94,.65), transparent 60%),
    radial-gradient(72% 72% at 50% 50%, rgba(255,232,139,.55), transparent 65%),
    radial-gradient(84% 84% at 50% 45%, rgba(255,200,70,.45), transparent 70%);
  filter:blur(10px) saturate(1.25) contrast(1.1);
  animation:auraPulse 1.1s ease-in-out infinite;
}
@keyframes auraPulse{0%,100%{transform:scale(1); opacity:.95}50%{transform:scale(1.08); opacity:1}}

/* Hurt + smaller victim */
.wrestler-wrap.hurt{filter:saturate(.85) hue-rotate(-10deg) drop-shadow(0 0 16px rgba(255,60,60,.35)); transform:scale(.84)}
.hurt .wrestler svg{filter:drop-shadow(0 6px 20px rgba(140,0,0,.45))}

/* Idle */
.idle #shadow{animation:breather 2.2s ease-in-out infinite}
.idle #torso,.idle #head{animation:breathe 2.2s ease-in-out infinite; transform-origin:50% 100%}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes breather{0%,100%{opacity:.25}50%{opacity:.35}}

/* --- Arm animation (attacker SVG) --- */
#attackerSvg svg.pose-punch #armL,
#attackerSvg svg.pose-punch #armR{ transform-origin:50% 10%; animation:armPunch .45s ease-in-out infinite alternate }
@keyframes armPunch{
  from{ transform:rotate(0) translateY(0) }
  to{ transform:rotate(-22deg) translateY(-4px) }
}
#attackerSvg svg.pose-lift #armL,
#attackerSvg svg.pose-lift #armR{ transform-origin:50% 10%; animation:armLift .55s ease-in-out infinite alternate }
@keyframes armLift{
  from{ transform:rotate(-8deg) translateY(-2px) }
  to{ transform:rotate(16deg) translateY(-10px) }
}
#attackerSvg svg.pose-hook #armL,
#attackerSvg svg.pose-hook #armR{ transform-origin:50% 10%; animation:armHook .5s ease-in-out infinite alternate }
@keyframes armHook{
  from{ transform:rotate(12deg) }
  to{ transform:rotate(-18deg) }
}

/* We animate the WRAPPER so tags follow the motion */
.approach-right{animation:approachR .28s ease-out 1}
.approach-left{animation:approachL .28s ease-out 1}
@keyframes approachR{from{transform:translateX(-160px)}to{transform:translateX(0)}}
@keyframes approachL{from{transform:translateX(160px)}to{transform:translateX(0)}}

/* Victim states (more literal) */
.fall-back{ animation:fallBack .5s ease-out forwards; transform-origin:50% 100% }
@keyframes fallBack{
  0%{ transform: translateY(-8px) rotate(0) }
  40%{ transform: translateY(-18px) rotate(-16deg) }
  100%{ transform: translateY(38px) rotate(-90deg) }
}
.slam-downed{ animation:slamDown .55s ease-out forwards; transform-origin:50% 50% }
@keyframes slamDown{
  0%{ transform: translateY(-60px) rotate(-12deg) }
  50%{ transform: translateY(-10px) rotate(-4deg) }
  100%{ transform: translateY(40px) rotate(92deg) }
}
.tossed{ animation:tossed .6s ease-out forwards }
@keyframes tossed{
  0%{ transform: translateY(-10px) rotate(0) }
  50%{ transform: translate(30px,-40px) rotate(-30deg) }
  100%{ transform: translate(50px,30px) rotate(-110deg) }
}
.spiked{ animation:spiked .5s ease-out forwards; transform-origin:50% 10% }
@keyframes spiked{
  0%{ transform: translateY(-12px) rotate(0) }
  60%{ transform: translateY(12px) rotate(40deg) }
  100%{ transform: translateY(36px) rotate(120deg) }
}
.arched{ animation:arched .7s ease-out forwards; transform-origin:50% 50% }
@keyframes arched{
  0%{ transform: translateY(-12px) }
  40%{ transform: translateY(-32px) rotate(-30deg) }
  100%{ transform: translateY(34px) rotate(-140deg) }
}

.actions {
  margin: auto;
}

/* Attacker moves (sensible) */
.move-clothesline{ animation:clothesline .7s cubic-bezier(.2,.8,.2,1) 1; transform-origin:50% 50% }
@keyframes clothesline{
  0%{ transform: translateX(0) }
  40%{ transform: translateX(70px) }
  60%{ transform: translateX(88px) rotate(-4deg) }
  100%{ transform: translateX(88px) }
}
.move-dropkick{ animation:dropkick .9s ease-out 1; transform-origin:50% 80% }
@keyframes dropkick{
  0%{ transform: translateX(0) translateY(0) }
  35%{ transform: translateX(40px) translateY(-42px) rotate(-12deg) }
  55%{ transform: translateX(90px) translateY(-16px) rotate(-6deg) }
  85%{ transform: translateX(72px) translateY(4px) rotate(4deg) }
  100%{ transform: translateX(72px) translateY(0) }
}
.move-bodyslam{ animation:slam 1s ease-out 1; transform-origin:50% 50% }
@keyframes slam{
  0%{ transform: translateX(0) }
  25%{ transform: translateX(24px) translateY(-16px) scale(1.02) }
  60%{ transform: translateX(56px) translateY(-46px) rotate(-6deg) }
  85%{ transform: translateX(66px) translateY(8px) }
  100%{ transform: translateX(66px) }
}
.move-hiptoss{ animation:hiptoss .8s ease-out 1; transform-origin:50% 50% }
@keyframes hiptoss{
  0%{ transform: translateX(0) }
  35%{ transform: translateX(36px) rotate(-12deg) }
  70%{ transform: translateX(62px) rotate(16deg) }
  100%{ transform: translateX(62px) }
}
.move-ddt{ animation:ddt .85s ease-out 1; transform-origin:50% 50% }
@keyframes ddt{
  0%{ transform: translateX(0) }
  35%{ transform: translateX(36px) translateY(-8px) rotate(-6deg) }
  70%{ transform: translateX(70px) translateY(12px) rotate(8deg) }
  100%{ transform: translateX(70px) }
}
.move-suplex{ animation:suplex 1s ease-out 1; transform-origin:50% 50% }
@keyframes suplex{
  0%{ transform: translateX(0) }
  35%{ transform: translateX(30px) translateY(-20px) rotate(-16deg)}
  75%{ transform: translateX(64px) translateY(-12px) rotate(22deg)}
  100%{ transform: translateX(64px) }
}

/* Impact flash + shake */
.impact::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 60%, rgba(255,255,255,.9), transparent 40%); opacity:0; animation:flash .14s ease-out 1}
@keyframes flash{0%{opacity:.65}100%{opacity:0}}
.shake{animation:shake .18s linear 1}
@keyframes shake{0%{transform:translate(1px,0)}25%{transform:translate(-2px,2px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,1px)}100%{transform:translate(0,0)}}

/* ---------- Game Over ---------- */
.over-wrap{ position:relative; gap:10px }
.over-media img{ max-width:540px; border-radius:16px; border:1px solid #23345e; box-shadow:0 12px 28px rgba(0,0,0,.35) }
#winnerBadge.winner-badge{
  margin:10px auto 6px; display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px;
  background: rgba(255,255,255,0.04); border:1px solid #334871;
  box-shadow: 0 12px 32px rgba(110,231,242,.12), inset 0 0 0 1px rgba(255,255,255,.03);
}
#winnerBadge #overTitle{ margin:0; margin-right:6px; color:#ffbf00 }
.winner-badge .crown{ font-size:4rem; margin-right: 6px }
.winner-badge #winnerName{
  font-weight:900; font-size:4rem;
  background: linear-gradient(90deg, #ffe08a, #ff9bd4, #9fd6ff, #ffe08a);
  background-size: 300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 2.6s linear infinite, pop 1.2s ease-in-out infinite;
  text-shadow: 0 6px 22px rgba(255, 204, 112, .35);
}
@keyframes shine{ 0%{background-position:0% 50%} 100%{background-position:100% 50%} }
@keyframes pop{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.scoreline{ margin:4px auto 14px; font-weight:800; letter-spacing:.3px; opacity:.9 }

/* Soft confetti */
.confetti{
  position:absolute; inset:0; pointer-events:none; background:
    radial-gradient(3px 3px at 10% 12%, #ffd36e 50%, transparent 52%),
    radial-gradient(3px 3px at 24% 30%, #a78bfa 50%, transparent 52%),
    radial-gradient(3px 3px at 40% 18%, #6ee7f2 50%, transparent 52%),
    radial-gradient(3px 3px at 70% 24%, #ff62b8 50%, transparent 52%),
    radial-gradient(3px 3px at 86% 36%, #9ae6b4 50%, transparent 52%),
    radial-gradient(3px 3px at 18% 72%, #ffd36e 50%, transparent 52%),
    radial-gradient(3px 3px at 76% 78%, #6ee7f2 50%, transparent 52%);
  opacity:.28; animation:confettiFloat 12s linear infinite;
}
@keyframes confettiFloat { 0%{ transform: translateY(0) } 100%{ transform: translateY(-8%) } }

/* ==== OBVIOUS CPU SCANNING (Compete only) ==== */
.cpu-think{margin:8px auto 4px; display:grid; gap:6px; place-items:center}
.cpu-meter{width:min(420px,86vw); height:12px; border-radius:999px; background:#0f1831; border:1px solid #23345e; overflow:hidden}
.cpu-meter .bar{display:block; height:100%; width:0%; background:linear-gradient(90deg,#7dd3fc,#a78bfa); transition:width linear}
.cpu-hint{font-size:0.95rem; color:var(--text); font-weight:800; letter-spacing:.4px}

/* animated dots after the hint text (we update the text via JS; this adds a little wobble glow) */
.cpu-hint{ text-shadow:0 0 16px #7dd3fc55 }

/* Container effects while scanning */
.compete-scan .answers{ position:relative; }

/* Sweeping scan line across answers */
.compete-scan .answers::before{
  content:""; position:absolute; left:-10%; right:-10%; top:0;
  height:2px; background:linear-gradient(90deg,transparent,#7dd3fc,transparent);
  box-shadow:0 0 12px #7dd3fc88, 0 0 24px #a78bfa66;
  animation:scanLine 1.25s linear infinite;
}
@keyframes scanLine{
  0%{ top:0%; opacity:.9 } 100%{ top:100%; opacity:.3 }
}

/* Spotlight per-option when the scanner "lands" */
.answer.scan-focus{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 0 0 2px #e5a9e0a8, 0 0 28px #7dd3fc66, inset 0 0 24px #a78bfa33;
}


/* =========================
   RESPONSIVE (<=1200px)
   ========================= */
@media (max-width:1200px){
  .rss-title{font-size:4.6rem}
  .vs-mid{font-size:8rem}
}
@media (max-width:992px){
  .rss-title{font-size:4rem}
  .pack-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}
  .avatar-grid{grid-template-columns:1fr}
  .answers{grid-template-columns:1fr}
  .attack-row{gap:16px}
}
@media (max-width:768px){
  .rss-root{width:94%}
  .mode-row{grid-template-columns:1fr; width:100%}
  .cover-img{width:85%}
  .vs-mid{font-size:6rem}
  .result-banner-top{font-size:1.8rem}
  .gif-frame{width:100%}
  .wrestler svg{width:210px!important}
}
@media (max-width:600px){
  .rss-title{font-size:3rem}
  .vs-name{font-size:1rem}
  .pack-grid{grid-template-columns:1fr}
  .pack-grid.one-select .pack-chip{padding:16px}
  .name-tag{font-size:11px}
  .answers{gap:10px}
}
@media (max-width:420px){
  .rss-title{font-size:2.4rem}
  .result-banner-top{font-size:1.5rem}
  .vs-mid{font-size:4rem}
  .w-user{left:12%} .w-cpu{right:12%}
}