/* «وش يجمعهم؟» — لوحةُ فلّين: صورٌ فوريّة (بولارويد) مثبّتةٌ بدبابيس، وخيوطٌ حمراء تربطها */
.xg-l4 .xg{background:#8a6238 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 0 1.4cqh #5a3a1c,inset 0 0 6cqh rgba(0,0,0,.45)}
.xg-l4 .xg-title b{color:#fff7e6;font-size:max(28px,7.4cqh);text-shadow:0 .08em 0 #5a3a1c,0 .2em .6em rgba(0,0,0,.5)}
.xg-l4 .xg-title small{color:#ffe7c2}
.xg-l4 .xg-chip{background:#fff7e6;color:#5a3a1c;border:0;transform:rotate(-3deg);box-shadow:0 .8cqh 1.4cqh rgba(0,0,0,.35)}
.xg-l4 .xg-chip b{color:#c0392b}
.xg-l4 .xg-clock{background:conic-gradient(#c0392b calc(var(--p) * 360deg),rgba(255,255,255,.2) 0)}
.xg-l4 .xg-clock::before{background:#fff7e6}
.xg-l4 .xg-clock b{color:#5a3a1c}
.l4-stage{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,22cqw,320px);gap:2cqw}
.l4-board{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:2.4cqw;padding:2cqh 2cqw;min-height:0}
.l4-pic{position:relative;margin:0;padding:1.2cqh 1.2cqh 5cqh;background:#fdfbf5;border-radius:.4cqh;box-shadow:0 1.6cqh 3cqh rgba(0,0,0,.45);aspect-ratio:.82;display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.l4-pic:nth-child(1){transform:rotate(-4deg)}.l4-pic:nth-child(2){transform:rotate(3deg) translateY(2cqh)}.l4-pic:nth-child(3){transform:rotate(-2deg) translateY(-1cqh)}.l4-pic:nth-child(4){transform:rotate(5deg) translateY(1.5cqh)}
.l4-pic::before{content:"";position:absolute;z-index:2;top:-1.4cqh;left:50%;width:3cqh;height:3cqh;margin-left:-1.5cqh;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8a7a,#c0392b 60%,#7a1a10);box-shadow:0 .6cqh .8cqh rgba(0,0,0,.4)}
.l4-pic img{flex:1;min-height:0;width:100%;object-fit:cover;opacity:0;transform:scale(.9);transition:opacity .5s,transform .5s}
.l4-ph{position:absolute;inset:1.2cqh 1.2cqh 5cqh;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#e9e1cf 0 12px,#ddd3bd 12px 24px);transition:opacity .4s}
.l4-ph b{font-size:max(34px,10cqh);color:#b9a986;font-weight:900}
.l4-pic.on img{opacity:1;transform:none}
.l4-pic.on .l4-ph{opacity:0}
.l4-pic.on{animation:l4In .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes l4In{from{transform:scale(.6) rotate(-12deg);opacity:.3}}
.l4-answer{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);padding:2cqh 4cqw;background:#fff7e6;border:.6cqh solid #c0392b;border-radius:1cqh;text-align:center;box-shadow:0 2cqh 5cqh rgba(0,0,0,.55);animation:xgPop .45s}
.l4-answer[hidden]{display:none}
.l4-answer small{display:block;color:#8a6238;font-size:max(14px,2.6cqh)}
.l4-answer b{font-size:max(40px,11cqh);line-height:1.05;color:#c0392b}
.l4-side{display:flex;flex-direction:column;min-height:0;padding:2cqh 1.2cqw;background:#fdfbf5;color:#3a2410;border-radius:.6cqh;box-shadow:0 1.6cqh 3cqh rgba(0,0,0,.4);transform:rotate(1.2deg);overflow:hidden}
.l4-side h3{color:#c0392b;text-align:center}
.l4-side ol li{background:rgba(138,98,56,.12);color:#3a2410}
.l4-side ol li b{color:#1f8a4c}
.l4-side ol li.lead{background:rgba(255,201,74,.35);box-shadow:inset 0 0 0 2px #c9971c}
.l4-side ol li.empty{color:#8a6238}
@media(max-aspect-ratio:1/1){.l4-stage{grid-template-columns:1fr}.l4-side{display:none}.l4-board{grid-template-columns:1fr 1fr}}