/* ============ البطاقة 4:5 ============ */
.sc {
  position: relative; aspect-ratio: 4 / 5; width: 100%; container-type: inline-size;
  overflow: hidden; border-radius: 14px; color: var(--fg); isolation: isolate;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; user-select: none;
}
.sc-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; }
.sc-in > * { position: absolute; inset-inline: 8cqw; text-align: center; }
.sc-kick { top: 12.4cqw; font: 600 2.8cqw/1.3 var(--ui); color: var(--sub); }
.sc-head { top: 16.4cqw; font: 700 9cqw/1.25 var(--disp); color: var(--hd); }
.sc-to { top: 31.6cqw; font: 700 3.7cqw/1.4 var(--serif); color: var(--ac); }
.sc-to::before { content: ''; position: absolute; top: -2.6cqw; inset-inline-start: calc(50% - 6.5cqw);
  width: 13cqw; height: .3cqw; background: var(--ac); opacity: .8; }
.sc-body { top: 39.4cqw; bottom: 27.4cqw; inset-inline: 12cqw; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sc-body p { margin: 0; font: 700 5cqw/1.62 var(--serif); color: var(--fg); white-space: pre-line; overflow-wrap: anywhere; }
.sc-body.hand p { font-family: var(--disp); }
.sc-body.s1 p { font-size: 7cqw; } .sc-body.s2 p { font-size: 5.7cqw; } .sc-body.s3 p { font-size: 4.7cqw; }
.sc-body.s4 p { font-size: 3.95cqw; } .sc-body.s5 p { font-size: 3.4cqw; } .sc-body.s6 p { font-size: 2.95cqw; }
.sc-sig { top: 99.6cqw; display: flex; flex-direction: column; align-items: center; gap: .6cqw; }
.sc-sig b { font: 700 3.7cqw/1.3 var(--serif); }
.sc-sig span { font: 500 2.8cqw/1.4 var(--ui); color: var(--sub); }
.sc-foot { top: 113.2cqw; font: 600 2.5cqw/1.3 var(--ui); color: var(--sub); }
.sc-board .sc-in, .sc-royal .sc-in, .sc-grad .sc-in, .sc-night .sc-in { text-shadow: 0 .3cqw 1.3cqw rgba(0,0,0,.28); }
.sc-board .sc-body p { letter-spacing: .02em; }

/* ============ الشريحة 16:9 ============ */
.ss {
  position: relative; aspect-ratio: 16 / 9; width: 100%; container-type: inline-size;
  overflow: hidden; color: var(--fg); isolation: isolate; background: #022730;
}
.ss-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1;
  animation: ssKen 11s ease-out both; transform-origin: 50% 40%; }
.ss-in > * { position: absolute; inset-inline: 10cqw; text-align: center; }
.ss-top { top: 3.6cqw; inset-inline: 15cqw; display: flex; justify-content: space-between;
  font: 600 1.25cqw/1.3 var(--ui); color: var(--sub); animation: ssFade .8s .2s both; }
.ss-head { top: 6.6cqw; font: 700 5cqw/1.25 var(--disp); color: var(--hd); animation: ssDrop .9s .35s cubic-bezier(.2,.8,.2,1) both; }
.ss-to { top: 14.2cqw; font: 700 2cqw/1.4 var(--serif); color: var(--ac); animation: ssFade .8s .75s both; }
.ss-q { top: 18.4cqw; bottom: 11.6cqw; inset-inline: 13cqw; display: flex; align-items: center; justify-content: center; }
.ss-q p { margin: 0; font: 700 3cqw/1.7 var(--serif); white-space: pre-line; }
.ss-q.hand p { font-family: var(--disp); }
.ss-q.s1 p { font-size: 4.5cqw; } .ss-q.s2 p { font-size: 3.7cqw; } .ss-q.s3 p { font-size: 3.05cqw; }
.ss-q.s4 p { font-size: 2.6cqw; } .ss-q.s5 p { font-size: 2.25cqw; } .ss-q.s6 p { font-size: 1.95cqw; }
.ss-q .w { display: inline-block; animation: ssWord .7s cubic-bezier(.2,.8,.2,1) both; }
.ss-sig { bottom: 4.6cqw; display: flex; flex-direction: column; align-items: center; gap: .2cqw; animation: ssFade .9s both; }
.ss-sig b { font: 700 2cqw/1.3 var(--serif); }
.ss-sig span { font: 500 1.4cqw/1.4 var(--ui); color: var(--sub); }
.ss-num { bottom: 2.4cqw; inset-inline: auto 3.4cqw; font: 600 1.05cqw/1 var(--ui); color: var(--sub); direction: rtl; }
.ss-board .ss-in, .ss-royal .ss-in, .ss-grad .ss-in, .ss-night .ss-in { text-shadow: 0 .2cqw .9cqw rgba(0,0,0,.3); }
.ss.still * { animation: none !important; }

@keyframes ssKen { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes ssFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ssDrop { from { opacity: 0; transform: translateY(-1.4cqw); } to { opacity: 1; transform: none; } }
@keyframes ssWord { from { opacity: 0; transform: translateY(.45em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }