@charset "utf-8";
/* Superheroes: a comic page — halftone dots, bold black lines, POW! and a hero flying by. */
:root[data-theme="superhero"] {
  --bg: #ffd93d; --panel: #ffffff; --ink: #111111; --muted: #444444; --line: #111111;
  --accent: #e3262f; --accent-ink: #ffffff; --mover: #e6f3ff; --die: #ffffff; --die-edge: #111111;
  --pip: #1d4ed8; --held: #e3262f; --field: #ffffff; --good: #15803d; --bad: #e3262f;
  --title: #e3262f; --title-font: "Bangers", Impact, sans-serif; --name-font: "Bangers", Impact, sans-serif;
  --radius: 4px; --mark: "⚡";
  --pattern: radial-gradient(circle, rgba(227, 38, 47, .25) 2.5px, transparent 3px), radial-gradient(circle at 50% 0, #fff3a8, #ffd93d 70%);
  --pattern-size: 14px 14px, 100% 100%;
}
[data-theme="superhero"] h1 { font-size: 54px; font-weight: 400; letter-spacing: 2px; -webkit-text-stroke: 2px #111; text-shadow: 4px 4px 0 #111; transform: rotate(-2deg); }
[data-theme="superhero"] .card { border: 3px solid #111; box-shadow: 6px 6px 0 #111; }
[data-theme="superhero"] .tray-head .name { font-size: 22px; font-weight: 400; letter-spacing: 1px; }
[data-theme="superhero"] .tray-head .total { font-size: 30px; font-weight: 400; color: #e3262f; }
[data-theme="superhero"] .sheet thead th, [data-theme="superhero"] .sheet tr.total th, [data-theme="superhero"] .sheet tr.total td { font-weight: 400; letter-spacing: 1px; font-size: 17px; }
[data-theme="superhero"] .die:not(.blank) { border-width: 3px; box-shadow: 3px 3px 0 #111; }
[data-theme="superhero"] .die.held { box-shadow: 0 0 0 3px var(--held), 3px 3px 0 #111; }
[data-theme="superhero"] .die.fresh { animation: comic-land .4s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes comic-land { 0% { transform: translateX(-40px) skewX(-20deg); opacity: .2; } 100% { transform: none; } }
[data-theme="superhero"] button { border: 2px solid #111; box-shadow: 3px 3px 0 #111; font-weight: 700; }
[data-theme="superhero"] .ambient .a1 { display: block; top: 16%; left: -80px; font-size: 44px; animation: hero-fly 16s linear infinite 3s; }
[data-theme="superhero"] .ambient .a1::before { content: "🦸"; display: inline-block; transform: rotate(60deg); }
@keyframes hero-fly { 0% { transform: translate(0, 40px); } 25%, 100% { transform: translate(calc(100vw + 160px), -60px); } }
[data-theme="superhero"] .ambient .a2 { display: block; bottom: 8%; right: 4%; font: 400 46px/1 "Bangers", Impact, sans-serif; color: #e3262f; -webkit-text-stroke: 2px #111; animation: pow 5s ease-in-out infinite; }
[data-theme="superhero"] .ambient .a2::before { content: "POW!"; }
@keyframes pow { 0%, 70%, 100% { transform: scale(0) rotate(-20deg); } 78% { transform: scale(1.2) rotate(-8deg); } 90% { transform: scale(1) rotate(-8deg); } }
[data-theme="superhero"] .ambient .a3 { display: block; top: 40%; left: 3%; font: 400 34px/1 "Bangers", Impact, sans-serif; color: #1d4ed8; -webkit-text-stroke: 1.5px #111; animation: pow 7s ease-in-out infinite 2.5s; }
[data-theme="superhero"] .ambient .a3::before { content: "ZAP!"; }