/* ACTION SKIN — "Blockbuster Explosion". Active when <html data-skin="action">.
   Black & fire-orange, chrome type, rising embers, riveted metal cards. Art: /skins/action/ */
[data-skin="action"] {
  --bg: #0b0908; --bg2: #120e0c; --panel: #17120f; --panel2: #211a16; --line: #3a2a20; --line2: #5c3f2b;
  --text: #fff4e6; --muted: #c9ae95; --dim: #8a705c;
  --red: #ff4a00; --red2: #ff7a1a; --deep: #6b1400; --amber: #ffc21a; --bone: #ffe2c2; --green: #3ddc97;
  --common: #c9b8a6; --uncommon: #ff9a00; --rare: #ff3b1f;
  --display: "Bebas Neue", "Anton", Impact, sans-serif; --logo: "Black Ops One", "Bebas Neue", Impact, sans-serif;
  --body: "Barlow", system-ui, sans-serif; --type: "Black Ops One", monospace;
  --chrome: linear-gradient(180deg, #ffffff 0%, #d9dde3 38%, #7d838c 50%, #e8ebef 62%, #9aa1aa 100%);
}
[data-skin="action"] body { background: radial-gradient(120% 60% at 50% 110%, #5a1800 0%, #1e0c06 40%, var(--bg) 70%) fixed, var(--bg); }
[data-skin="action"] .grain { opacity: .09; }
[data-skin="action"] .glow { position: absolute; left: 0; right: 0; bottom: -10vh; height: 40vh; background: radial-gradient(60% 100% at 50% 100%, #ff4a0055, transparent 70%); animation: glowpulse 4s ease-in-out infinite; }
@keyframes glowpulse { 50% { opacity: .55; } }
[data-skin="action"] .ember { position: absolute; bottom: -2vh; width: var(--size); height: var(--size); border-radius: 50%; background: #ffb347; box-shadow: 0 0 8px 2px #ff6a00;
  animation: ember var(--dur) linear var(--delay) infinite; opacity: .9; }
@keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(var(--sway), -105vh); opacity: 0; } }

[data-skin="action"] .h, [data-skin="action"] .tcard .name { letter-spacing: .03em; }
[data-skin="action"] .tcard .name { font-size: 22px; }
[data-skin="action"] .trow .tcard .name { font-size: 18px; }
[data-skin="action"] .h { font-size: 28px; }
[data-skin="action"] .h.sm { font-size: 22px; }

[data-skin="action"] .btn.primary { background: linear-gradient(180deg, #ff8a2a, #ff4a00 55%, #c22e00); border-color: #ffae5a; text-transform: uppercase; letter-spacing: .06em; }
[data-skin="action"] .btn.amber { background: linear-gradient(180deg, #ffe07a, #ffc21a 55%, #d79500); color: #1a0f00; }
[data-skin="action"] .segb.on { background: var(--amber); color: #1a0f00; }

/* home */
[data-skin="action"] .marquee { background: linear-gradient(180deg, #1c120d, #0d0907); border: 2px solid #5c3f2b; box-shadow: 0 0 0 6px #0b0908, 0 0 80px -10px #ff4a0088; overflow: visible; isolation: isolate; padding-top: 34px; }
[data-skin="action"] .marquee::before { display: none; }
[data-skin="action"] .logo { font-family: var(--logo); font-size: clamp(42px, 13vw, 60px); background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 3px 0 #3a1a0a) drop-shadow(0 0 16px #ff4a0066); }
[data-skin="action"] .logo span { background: linear-gradient(180deg, #ffe07a, #ff8a00 55%, #ff3b00); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-skin="action"] .edition { color: #1a0f00; background: var(--amber); border: 0; border-radius: 2px; letter-spacing: .3em; animation: none; font-family: var(--display); font-size: 16px; }
[data-skin="action"] .sk-a-boom { left: 50%; top: 50%; width: 330px; max-width: 115%; translate: -50% -50%; z-index: -1; opacity: .5; animation: boompulse 3.5s ease-in-out infinite; }
@keyframes boompulse { 50% { opacity: .7; scale: 1.05; } }
[data-skin="action"] .sk-a-hole1 { right: 14px; top: 12px; width: 44px; }
[data-skin="action"] .sk-a-hole2 { left: 20px; bottom: 16px; width: 32px; transform: rotate(40deg); }
[data-skin="action"] .sk-a-lobby { right: 12px; top: 10px; width: 40px; }

/* shell & panels */
[data-skin="action"] .topbar { background: linear-gradient(180deg, #0b0908f5, #0b0908e0); border-bottom: 2px solid #ff4a0055; }
[data-skin="action"] .mini-logo { font-family: var(--logo); }
[data-skin="action"] .code-chip { background: #2a1408; border: 1px dashed #ff7a1a; }
[data-skin="action"] .panel, [data-skin="action"] .card-panel { background: linear-gradient(180deg, #1c1511, #141009); border-color: #3a2a20; }
[data-skin="action"] .banner { background: linear-gradient(90deg, #4a1400, #17120f); border-color: #8a2a00; }

/* riveted metal cards */
[data-skin="action"] .tcard { background:
    radial-gradient(circle at 8px 8px, #8a8f96 0 2.5px, transparent 3.5px), radial-gradient(circle at calc(100% - 8px) 8px, #8a8f96 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 8px calc(100% - 8px), #8a8f96 0 2.5px, transparent 3.5px), radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #8a8f96 0 2.5px, transparent 3.5px),
    repeating-linear-gradient(115deg, #ffffff05 0 2px, transparent 2px 6px), linear-gradient(165deg, #2c2420, #15110f 70%);
  border-radius: 8px; }
[data-skin="action"] .tcard .top { padding: 0 10px; }
[data-skin="action"] .tcard.hit { background: linear-gradient(165deg, #3a1a08, #1a0f08 70%); border-color: #ff9a00; }
[data-skin="action"] .stamp { color: #ffc21a; border-color: #ffc21a; background: #1a0f00dd; font-family: var(--logo); font-size: 18px; }
[data-skin="action"] .rsticker { display: block; position: absolute; right: 6px; bottom: 6px; width: 30px; height: 30px; background: center / contain no-repeat; pointer-events: none; }
[data-skin="action"] .tcard.rare .rsticker { background-image: var(--art-bullethole); }
[data-skin="action"] .tcard:not(.rare) .rsticker, [data-skin="action"] .tcard.hit .rsticker, [data-skin="action"] .tcard .call ~ .rsticker, [data-skin="action"] .tcard .tags ~ .rsticker { display: none; }
[data-skin="action"] .tcard .call { background: linear-gradient(180deg, #ff8a2a, #ff4a00 55%, #c22e00); font-family: var(--display); font-size: 20px; letter-spacing: .1em; }
[data-skin="action"] .claim { background: #1a120cf7; border-color: #ff7a1a; box-shadow: 0 16px 40px -10px #000c, 0 0 30px -10px #ff4a00aa; }

/* FX */
[data-skin="action"] .fx-scrim { background: radial-gradient(circle at 50% 46%, #ff7a1acc, #6b1400cc 35%, #000f 72%); }
[data-skin="action"] .fx-flash { background: #ffe9b0; }
[data-skin="action"] .fx-stampbig { font-family: var(--logo); color: transparent; background: var(--chrome); -webkit-background-clip: text; background-clip: text; border: 0; padding: 0 10px;
  filter: drop-shadow(0 4px 0 #6b1400) drop-shadow(0 0 30px #ff4a00); transform: rotate(-6deg); animation-name: slamAction; }
@keyframes slamAction { 0% { transform: rotate(-6deg) scale(3.4); opacity: 0; } 100% { transform: rotate(-6deg) scale(1); opacity: 1; } }
[data-skin="action"] .fx-scrim::after { content: ""; position: absolute; left: 50%; top: 46%; width: min(150vw, 900px); aspect-ratio: 1; translate: -50% -50%; background: var(--art-explosion) center / contain no-repeat; opacity: .55; animation: boomIn .6s .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes boomIn { from { scale: .1; opacity: 0; } }
[data-skin="action"] .particle { border-radius: 50%; width: 8px; height: 8px; box-shadow: 0 0 10px 3px currentColor; }
[data-skin="action"] .shake-screen { animation: sshakeBig .6s .55s; }
@keyframes sshakeBig { 10%,50%,90% { transform: translate(-12px, 6px) } 30%,70% { transform: translate(12px, -6px) } }
[data-skin="action"] .fx-title { font-family: var(--logo); color: transparent; background: var(--chrome); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 3px 0 #6b1400) drop-shadow(0 0 24px #ff4a00); }
[data-skin="action"] .leader { box-shadow: 0 0 0 10px #111, 0 0 0 16px #ff4a00, 0 0 80px #ff4a0088; }
@media (prefers-reduced-motion: reduce) { [data-skin="action"] .ember, [data-skin="action"] .glow { display: none; } }