/* COMEDY SKIN — "Sunday Funnies". Active when <html data-skin="comedy"> (light tone).
   Newsprint cream, Ben-Day dots, thick ink comic panels, primary colors, POW bursts. Art: /skins/comedy/ */
[data-skin="comedy"] {
  --bg: #fbf3df; --bg2: #f5e9cc; --panel: #ffffff; --panel2: #fff8e6; --line: #111111; --line2: #111111;
  --text: #111111; --muted: #555049; --dim: #8a847a;
  --red: #e3242b; --red2: #ff3b3f; --deep: #8f0f14; --amber: #ffd400; --bone: #2a2723; --green: #1aa260; --blue: #1f6fe5;
  --common: #1f6fe5; --uncommon: #ffb000; --rare: #e3242b;
  --display: "Bangers", Impact, "Arial Black", sans-serif; --body: "Comic Neue", "Comic Sans MS", system-ui, sans-serif; --type: "Comic Neue", "Comic Sans MS", sans-serif;
  --ink: 3px solid #111; --pop: 5px 5px 0 #111;
}
[data-skin="comedy"] body { font-weight: 700; background: radial-gradient(#e3242b1f 1.6px, transparent 2px) 0 0 / 11px 11px, var(--bg); }

[data-skin="comedy"] .h, [data-skin="comedy"] .tcard .name, [data-skin="comedy"] .mini-logo { letter-spacing: .04em; font-weight: 400; }
[data-skin="comedy"] .h { font-size: 28px; }
[data-skin="comedy"] .h.sm { font-size: 22px; }
[data-skin="comedy"] .tcard .name { font-size: 22px; line-height: 1.05; }
[data-skin="comedy"] .trow .tcard .name { font-size: 18px; }
[data-skin="comedy"] .kicker { color: var(--blue); }

[data-skin="comedy"] .btn { border: var(--ink); box-shadow: 3px 3px 0 #111; border-radius: 10px; }
[data-skin="comedy"] .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #111; }
[data-skin="comedy"] .btn.primary { background: var(--red); color: #fff; border: var(--ink); font-family: var(--display); font-size: 20px; letter-spacing: .06em; font-weight: 400; }
[data-skin="comedy"] .btn.amber { background: var(--amber); color: #111; border: var(--ink); font-family: var(--display); font-size: 20px; letter-spacing: .06em; font-weight: 400; }
[data-skin="comedy"] .btn.ghost { box-shadow: none; border-width: 2px; }
[data-skin="comedy"] .input, [data-skin="comedy"] select.input, [data-skin="comedy"] .segb, [data-skin="comedy"] .toggle { border: 2.5px solid #111; }
[data-skin="comedy"] .segb.on { background: var(--amber); color: #111; border-color: #111; box-shadow: 2px 2px 0 #111; }

/* home */
[data-skin="comedy"] .marquee { background: radial-gradient(#1f6fe533 2px, transparent 2.5px) 0 0 / 12px 12px, #fff; border: 4px solid #111; border-radius: 6px; box-shadow: 8px 8px 0 #111; overflow: visible; isolation: isolate; padding: 34px 18px 22px; }
[data-skin="comedy"] .logo { font-size: clamp(46px, 14vw, 66px); font-weight: 400; color: var(--amber); letter-spacing: .03em;
  text-shadow: 3px 3px 0 #111, -2px -2px 0 #111, 2px -2px 0 #111, -2px 2px 0 #111, 7px 7px 0 var(--red); transform: rotate(-3deg); }
[data-skin="comedy"] .logo span { color: #fff; }
[data-skin="comedy"] .edition { background: var(--blue); color: #fff; border: 2px solid #111; border-radius: 4px; font-family: var(--display); letter-spacing: .2em; font-size: 15px; animation: none; transform: rotate(-2deg); }
[data-skin="comedy"] .tagline { color: #111; }
[data-skin="comedy"] .sk-c-pow { right: -30px; top: -42px; width: 120px; transform: rotate(12deg); animation: wobble 2.2s ease-in-out infinite; }
[data-skin="comedy"] .sk-c-bubble { left: -18px; top: -30px; width: 90px; transform: rotate(-8deg); }
[data-skin="comedy"] .sk-c-banana { right: -10px; bottom: -26px; width: 82px; transform: rotate(-6deg); }
[data-skin="comedy"] .sk-c-lobby { right: 10px; top: -18px; width: 64px; transform: rotate(6deg); }
@keyframes wobble { 50% { transform: rotate(4deg) scale(1.05); } }

/* comic panels */
[data-skin="comedy"] .panel, [data-skin="comedy"] .card-panel, [data-skin="comedy"] .chat { border: var(--ink); box-shadow: var(--pop); border-radius: 6px; }
[data-skin="comedy"] .card-panel { position: relative; }
[data-skin="comedy"] .topbar { background: #fff; border-bottom: var(--ink); }
[data-skin="comedy"] .mini-logo { font-family: var(--display); font-size: 22px; }
[data-skin="comedy"] .code-chip { background: var(--amber); color: #111; border: 2px solid #111; font-family: var(--display); }
[data-skin="comedy"] .tabbar { border-top: var(--ink); }
[data-skin="comedy"] .tab.on { background: var(--amber); box-shadow: none; }
[data-skin="comedy"] .banner, [data-skin="comedy"] .banner.amber, [data-skin="comedy"] .banner.green { border: var(--ink); border-left: var(--ink); box-shadow: var(--pop); background: #fff; border-radius: 6px; }
[data-skin="comedy"] .banner .kicker { display: inline-block; background: var(--amber); color: #111; padding: 2px 8px; border: 2px solid #111; }
[data-skin="comedy"] .tcard { border: var(--ink); border-radius: 6px; box-shadow: 4px 4px 0 #111; }
[data-skin="comedy"] .tcard .top { background: var(--rc); color: #fff; margin: -12px -12px 0; padding: 4px 12px; border-bottom: 3px solid #111; height: auto; }
[data-skin="comedy"] .tcard.uncommon .top { color: #111; }
[data-skin="comedy"] .tcard .top .val { color: inherit; }
[data-skin="comedy"] .tcard::after { display: none; }
[data-skin="comedy"] .trow .tcard .top { margin: -10px -10px 0; }
[data-skin="comedy"] .tcard.hit { background: #e9fbef; border-color: #111; }
[data-skin="comedy"] .stamp { color: #111; background: var(--amber); border: 3px solid #111; border-radius: 50% 50% 50% 8px; font-family: var(--display); font-size: 17px; padding: 2px 10px; transform: rotate(-8deg); }
[data-skin="comedy"] .tcard .call { background: var(--red); border: 2.5px solid #111; font-family: var(--display); font-size: 19px; letter-spacing: .08em; box-shadow: 2px 2px 0 #111; }
[data-skin="comedy"] .tcard .call.name { background: var(--amber); color: #111; }
[data-skin="comedy"] .claim { border: var(--ink); box-shadow: var(--pop); border-radius: 18px; }
[data-skin="comedy"] .vbtn { border: 2.5px solid #111; box-shadow: 2px 2px 0 #111; font-family: var(--display); }
[data-skin="comedy"] .vbtn.yes { color: #fff; background: var(--green); } [data-skin="comedy"] .vbtn.no { color: #fff; background: var(--red); }
[data-skin="comedy"] .msg:not(.sys) { background: #fff; border: 2px solid #111; border-radius: 14px 14px 14px 2px; padding: 6px 10px; align-self: flex-start; max-width: 92%; }
[data-skin="comedy"] .sheet, [data-skin="comedy"] .act { border: 2.5px solid #111; }

/* FX */
[data-skin="comedy"] .fx-scrim { background: repeating-conic-gradient(from 0deg at 50% 46%, #11111122 0deg 3deg, transparent 3deg 10deg), radial-gradient(circle at 50% 46%, #fff7c2, #ffd400 45%, #ffb000 100%); }
[data-skin="comedy"] .fx-flash { background: #fff; }
[data-skin="comedy"] .fx-stampbig { color: #fff; background: var(--red); border: 5px solid #111; border-radius: 40% 40% 40% 10px; padding: 6px 22px; font-size: clamp(30px, 9.5vw, 66px); white-space: nowrap;
  text-shadow: 3px 3px 0 #111; box-shadow: 8px 8px 0 #111; transform: rotate(-8deg); animation-name: slamComic; }
[data-skin="comedy"] .fx-stampbig.long { font-size: clamp(24px, 7.5vw, 52px); }
@keyframes slamComic { 0% { transform: rotate(-8deg) scale(.2); opacity: 0; } 70% { transform: rotate(-8deg) scale(1.15); opacity: 1; } 100% { transform: rotate(-8deg) scale(1); } }
[data-skin="comedy"] .particle { width: 34px; height: 34px; background: var(--art-pow) center / contain no-repeat !important; border-radius: 0; }
[data-skin="comedy"] .particle:nth-child(2n) { background-image: var(--art-banana) !important; }
[data-skin="comedy"] .fx-title { color: var(--amber); text-shadow: 3px 3px 0 #111, -2px -2px 0 #111, 2px -2px 0 #111, -2px 2px 0 #111, 7px 7px 0 var(--red); }
[data-skin="comedy"] .fx-pts { background: #fff; border: 3px solid #111; border-radius: 12px; padding: 0 16px; box-shadow: 4px 4px 0 #111; }
[data-skin="comedy"] .fx-owner { background: #fff; border: 2px solid #111; padding: 2px 12px; border-radius: 8px; }
[data-skin="comedy"] .fx-mine { background: var(--blue); border: 2px solid #111; }
[data-skin="comedy"] .leader { box-shadow: 0 0 0 6px #111, 0 0 0 12px var(--amber), 10px 10px 0 12px #111; }