/* BATTLIN' BOTS SKIN — "Arena Steel". Active when <html data-skin="bots">.
   Diamond-plate steel, yellow/black hazard stripes, bolts, flying sparks. Art: /skins/bots/ (original, no show logos) */
[data-skin="bots"] {
  --bg: #121418; --bg2: #181b20; --panel: #1c1f25; --panel2: #252930; --line: #343a44; --line2: #4a525e;
  --text: #f2f4f7; --muted: #a7b0bd; --dim: #6f7885;
  --red: #ff3b30; --red2: #ff5a4f; --deep: #5c0f0a; --amber: #ffc400; --bone: #e3e7ec; --green: #34d27b;
  --common: #a7b0bd; --uncommon: #ffc400; --rare: #ff3b30;
  --display: "Russo One", "Arial Black", sans-serif; --body: "Chakra Petch", system-ui, sans-serif; --type: "Chakra Petch", monospace;
  --hazard: repeating-linear-gradient(-45deg, #ffc400 0 12px, #111 12px 24px);
  --steel: linear-gradient(180deg, #2a2e36, #1a1d22);
}
[data-skin="bots"] body { background:
  repeating-linear-gradient(45deg, #ffffff07 0 2px, transparent 2px 14px), repeating-linear-gradient(-45deg, #00000040 0 2px, transparent 2px 14px),
  radial-gradient(90% 60% at 50% 0%, #2a3040 0%, transparent 70%), var(--bg); }
[data-skin="bots"] .grain { opacity: .05; }
[data-skin="bots"] .plate { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--hazard); opacity: .6; }
[data-skin="bots"] .spark { position: absolute; width: 2px; height: 14px; border-radius: 1px; background: linear-gradient(#fff6c0, #ffc400 40%, transparent); rotate: var(--rot);
  animation: spark var(--dur) ease-out var(--delay) infinite; opacity: 0; box-shadow: 0 0 6px #ffb000; }
@keyframes spark { 0% { opacity: 0; transform: translate(0, 0); } 4% { opacity: 1; } 30% { opacity: 0; transform: translate(var(--dx), -90px); } 100% { opacity: 0; } }

[data-skin="bots"] .h, [data-skin="bots"] .tcard .name { font-weight: 400; letter-spacing: .02em; }
[data-skin="bots"] .tcard .name { font-size: 17px; line-height: 1.15; }
[data-skin="bots"] .trow .tcard .name { font-size: 14px; }
[data-skin="bots"] .h { font-size: 22px; }
[data-skin="bots"] .h.sm { font-size: 17px; }
[data-skin="bots"] .kicker { color: var(--amber); }

[data-skin="bots"] .btn { border-radius: 6px; background: var(--steel); border-color: #4a525e; }
[data-skin="bots"] .btn.primary { background: linear-gradient(180deg, #ff5a4f, #d92a20); border-color: #ff8a80; font-family: var(--display); font-weight: 400; letter-spacing: .04em; }
[data-skin="bots"] .btn.amber { background: linear-gradient(180deg, #ffd84a, #ffc400 60%, #d9a200); color: #111; border-color: #111; font-family: var(--display); font-weight: 400; }
[data-skin="bots"] .input, [data-skin="bots"] select.input, [data-skin="bots"] .segb, [data-skin="bots"] .toggle { background: #0e1013; border-color: #3a414b; border-radius: 6px; }
[data-skin="bots"] .segb.on { background: var(--amber); color: #111; border-color: #111; }

/* home: hazard-framed arena sign */
[data-skin="bots"] .marquee { background: var(--steel); border: 0; border-radius: 10px; padding: 26px 18px 134px; overflow: visible; isolation: isolate;
  box-shadow: 0 0 0 8px transparent, 0 18px 50px -14px #000; outline: 8px solid transparent; }
[data-skin="bots"] .marquee::before { display: block; animation: none; filter: none; inset: -8px; border-radius: 14px; z-index: -1; background: var(--hazard); -webkit-mask: none; mask: none; }
[data-skin="bots"] .marquee::after { content: ""; position: absolute; inset: 0; border-radius: 10px; z-index: -1; background:
  radial-gradient(circle at 12px 12px, #8a929e 0 3px, transparent 4px), radial-gradient(circle at calc(100% - 12px) 12px, #8a929e 0 3px, transparent 4px),
  radial-gradient(circle at 12px calc(100% - 12px), #8a929e 0 3px, transparent 4px), radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #8a929e 0 3px, transparent 4px), var(--steel); }
[data-skin="bots"] .logo { font-weight: 400; font-size: clamp(38px, 11.5vw, 54px); color: #f2f4f7; text-shadow: 0 3px 0 #000, 0 0 18px #ffc40044; }
[data-skin="bots"] .logo span { color: var(--amber); }
[data-skin="bots"] .edition { background: #111; color: var(--amber); border: 2px solid var(--amber); border-radius: 4px; font-family: var(--display); letter-spacing: .2em; font-size: 11px; animation: none; }
[data-skin="bots"] .sk-b-saw { right: -34px; top: -38px; width: 104px; animation: sawspin 1.4s linear infinite; filter: drop-shadow(0 4px 6px #000a); }
@keyframes sawspin { to { rotate: 360deg; } }
[data-skin="bots"] .sk-b-bot { left: 50%; bottom: 8px; width: 190px; aspect-ratio: 240 / 150; translate: -50% 0; animation: botshake 3s ease-in-out infinite; }
/* the spinner disc layer turns about its hub (clickables.js) */
[data-skin="bots"] .sk-b-bot .ly1 { transform-origin: 19.17% 58.67%; }
@keyframes botshake { 0%, 90%, 100% { transform: translateX(0); } 92% { transform: translateX(-3px) rotate(-1deg); } 94% { transform: translateX(3px) rotate(1deg); } 96% { transform: translateX(-2px); } }
[data-skin="bots"] .sk-b-nut { left: -18px; top: -16px; width: 46px; transform: rotate(-12deg); }
[data-skin="bots"] .sk-b-lobby { right: 10px; top: 10px; width: 36px; }
[data-skin="bots"] .sk-b-results { right: 8px; top: -20px; width: 60px; animation: sawspin 2s linear infinite; }

/* shell & panels */
[data-skin="bots"] .topbar { background: #121418f2; border-bottom: 0; box-shadow: 0 4px 0 0 transparent; }
[data-skin="bots"] .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: var(--hazard); }
[data-skin="bots"] .mini-logo { font-weight: 400; }
[data-skin="bots"] .mini-logo span { color: var(--amber); }
[data-skin="bots"] .code-chip { background: #111; border: 2px solid var(--amber); color: var(--amber); }
[data-skin="bots"] .phase-pill, [data-skin="bots"] .ms-clock { color: var(--amber); }
[data-skin="bots"] .movie-strip { background: #0e1013; margin-top: 6px; }
[data-skin="bots"] .tabbar { background: #121418f5; border-top: 2px solid #3a414b; }
[data-skin="bots"] .tab.on { background: #252930; box-shadow: inset 0 -3px 0 var(--amber); }
[data-skin="bots"] .panel, [data-skin="bots"] .card-panel, [data-skin="bots"] .chat { background: var(--steel); border: 1px solid #3a414b; border-radius: 8px; }
[data-skin="bots"] .banner { background: linear-gradient(90deg, #3a1210, #1c1f25); border-color: #7a2a24; border-radius: 8px; }
[data-skin="bots"] .banner.amber { background: linear-gradient(90deg, #3a3008, #1c1f25); border-color: #8a6a00; }

/* cards: steel plates with a hazard strip */
[data-skin="bots"] .tcard { border-radius: 8px; background: var(--steel); padding-top: 16px; }
[data-skin="bots"] .tcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--hazard); opacity: .35; }
[data-skin="bots"] .tcard.uncommon::before { opacity: .8; }
[data-skin="bots"] .tcard.rare::before { background: repeating-linear-gradient(-45deg, #ff3b30 0 12px, #111 12px 24px); opacity: .9; }
[data-skin="bots"] .tcard::after { top: 40px; }
[data-skin="bots"] .tcard.hit { background: linear-gradient(180deg, #1d3a2a, #142019); border-color: var(--green); }
[data-skin="bots"] .stamp { color: #111; background: var(--amber); border: 2px solid #111; border-radius: 4px; font-family: var(--display); font-size: 15px; transform: rotate(-8deg); }
[data-skin="bots"] .rsticker { display: block; position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; background: center / contain no-repeat; pointer-events: none; }
[data-skin="bots"] .tcard.rare .rsticker { background-image: var(--art-nut); }
[data-skin="bots"] .tcard:not(.rare) .rsticker, [data-skin="bots"] .tcard.hit .rsticker, [data-skin="bots"] .tcard .call ~ .rsticker, [data-skin="bots"] .tcard .tags ~ .rsticker { display: none; }
[data-skin="bots"] .tcard .call { background: linear-gradient(180deg, #ff5a4f, #d92a20); border-radius: 6px; font-family: var(--display); font-size: 15px; letter-spacing: .06em; }
[data-skin="bots"] .claim { background: #1c1f25f7; border: 2px solid var(--amber); border-radius: 8px; box-shadow: 0 16px 40px -10px #000c, 0 0 0 4px #111; }

/* FX */
[data-skin="bots"] .fx-scrim { background: radial-gradient(circle at 50% 46%, #ffc40040, #121418f0 55%, #000 100%); }
[data-skin="bots"] .fx-scrim::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: var(--hazard); }
[data-skin="bots"] .fx-flash { background: #fff6c0; }
[data-skin="bots"] .fx-stampbig { color: #111; background: var(--amber); border: 6px solid #111; border-radius: 8px; padding: 2px 18px; font-size: clamp(40px, 12vw, 80px); white-space: nowrap;
  box-shadow: 0 0 0 6px var(--amber), 0 0 0 12px #111, 0 20px 50px #000c; transform: rotate(-6deg); text-shadow: none; animation-name: slamBots; }
[data-skin="bots"] .fx-stampbig.long { font-size: clamp(24px, 7vw, 52px); }
@keyframes slamBots { 0% { transform: rotate(-6deg) scale(3); opacity: 0; } 100% { transform: rotate(-6deg) scale(1); opacity: 1; } }
[data-skin="bots"] .particle { width: 3px; height: 26px; border-radius: 2px; box-shadow: 0 0 8px currentColor; }
[data-skin="bots"] .shake-screen { animation: sshakeBig .6s .55s; }
@keyframes sshakeBig { 10%,50%,90% { transform: translate(-12px, 6px) } 30%,70% { transform: translate(12px, -6px) } }
[data-skin="bots"] .fx-title { color: var(--amber); text-shadow: 0 4px 0 #000, 0 0 24px #ffc40088; }
[data-skin="bots"] .leader { background: #e3e7ec; box-shadow: 0 0 0 8px #111, 0 0 0 16px var(--amber), 0 0 80px #000; }
@media (prefers-reduced-motion: reduce) { [data-skin="bots"] .spark, [data-skin="bots"] .sk-b-saw { animation: none; display: none; } }