/* المدسوس — shared comic-book theme (matches the comic intro: ink outlines, hard shadows, halftone) */
:root {
  --paper: #f6efe2;
  --paper-2: #efe4d0;
  --ink: #1b1714;
  --ink-soft: #5b5149;
  --line: #b9ad9b;
  --red: #d6303a; --green: #2fae4a; --blue: #1f8ad8; --mustard: #e0a91b;
  --orange: #ef7a1a; --purple: #7b4fa8; --pink: #e2559b; --teal: #159a96;
  --cat: var(--red);
  --display: 'Lalezar', 'Readex Pro', system-ui, sans-serif;
  --body: 'Readex Pro', 'Tajawal', system-ui, sans-serif;
  --shadow: 6px 7px 0 rgba(27, 23, 20, .9);
  --halftone: radial-gradient(rgba(27, 23, 20, .09) 22%, transparent 24%);
  --comic-yellow: #f6d77d;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--body);
  color: var(--ink);
  background-color: var(--paper);
  /* halftone dots */
  background-image: var(--halftone);
  background-size: 18px 18px;
  direction: rtl;
  -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; }
.hidden { display: none !important; }

/* chunky paper button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 56px; padding: .55em 1.3em;
  font-family: var(--display); font-size: 1.35rem; letter-spacing: .01em;
  color: #fff; background: var(--ink);
  border: 4px solid var(--ink); border-radius: 10px;
  box-shadow: var(--shadow); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s;
}
.btn:active { transform: translate(5px, 6px) rotate(-1deg); box-shadow: 1px 1px 0 var(--ink); }
.btn[disabled] { filter: grayscale(1) opacity(.45); pointer-events: none; }
.btn.cat { background: var(--cat); -webkit-text-stroke: .16em var(--ink); paint-order: stroke fill; } /* ink outline: white fails contrast on mustard, orange and green */
.btn.light { background: #fff; color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink-soft); box-shadow: none; border-color: transparent; font-family: var(--body); font-size: 1rem; min-height: 44px; }

/* comic label */
.tag {
  display: inline-block; padding: .2em .8em .35em;
  background: #fff; color: var(--ink);
  font-family: var(--display); line-height: 1.1;
  border: 4px solid var(--ink); border-radius: 8px;
  box-shadow: 4px 5px 0 var(--ink);
}

/* portrait in a black ring */
.ring {
  border-radius: 50%; background: #fff; border: 6px solid var(--ink);
  overflow: hidden; display: grid; place-items: end center;
  box-shadow: var(--shadow);
}
.ring svg { width: 100%; height: 100%; display: block; }
svg.av, svg.faker { filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .18)); }

@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes drop { 0% { transform: translateY(-120%); opacity: 0; } 60% { transform: translateY(8%); opacity: 1; } 80% { transform: translateY(-3%); } 100% { transform: translateY(0); } }
@keyframes slideR { 0% { transform: translateX(110%); } 75% { transform: translateX(-3%); } 100% { transform: translateX(0); } }
@keyframes wobble { 0%, 100% { transform: rotate(var(--r, -2deg)); } 50% { transform: rotate(calc(var(--r, -2deg) * -1)); } }
@keyframes shake { 0%, 100% { transform: translate(0, 0) rotate(0); } 20% { transform: translate(-6px, 3px) rotate(-2deg); } 40% { transform: translate(5px, -4px) rotate(2deg); } 60% { transform: translate(-4px, 2px) rotate(-1deg); } 80% { transform: translate(4px, 4px) rotate(1deg); } }
@keyframes slam { 0% { transform: scale(1.8); opacity: 0; } 55% { transform: scale(.94); opacity: 1; } 100% { transform: scale(1); } }
@keyframes rise { 0% { transform: translateY(40px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes dart { 0%, 40% { transform: translateX(0); } 50%, 80% { transform: translateX(-5px); } 90%, 100% { transform: translateX(4px); } }
.faker .pupil { animation: dart 2.4s infinite; transform-box: fill-box; }

/* generated art */
img.art { display: block; user-select: none; -webkit-user-drag: none; }
.ring img.art { width: 100%; height: 100%; object-fit: contain; object-position: center; filter: none; }
img.faker.art, img.av-full.art { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
img.faker.peek.art { animation: dart 2.4s infinite; }
/* six-person cast: poses, scenes, icons, hidden-faker silhouette */
img.pose.art, img.scene.art { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }