@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
:root{--ink:#241f20;--cream:#fbf5e8;--yellow:#ffb900;--terra:#9b351b;--olive:#969247;--gold:#d98a18}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--cream);font-family:'SF Arabic','IBM Plex Sans Arabic',system-ui,sans-serif;min-height:100vh}button,input{font:inherit}button{cursor:pointer}.grain{pointer-events:none;position:fixed;inset:0;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");z-index:5}.shell{max-width:860px;min-height:100vh;margin:auto;padding:25px 22px 44px;position:relative}.header{display:flex;justify-content:space-between;align-items:center;gap:12px}.logo{width:106px;height:88px;object-fit:contain;filter:drop-shadow(0 7px 15px #0005)}.muted{color:#c5bcb2}.tiny{font-size:12px;letter-spacing:.08em}.hero{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 155px);gap:17px}.eyebrow{color:var(--yellow);font-size:12px;letter-spacing:3px;font-weight:700}.hero h1,.scene h1{font-size:clamp(30px,6vw,57px);line-height:1.3;margin:0;font-weight:800}.hero p{font-size:17px;max-width:560px;line-height:2;color:#e3d9ce;margin:0}.spotlight{height:155px;width:min(500px,95%);position:relative;background:radial-gradient(ellipse at 50% 10%,#ffb90055,transparent 70%);display:grid;place-items:center}.spotlight:before,.spotlight:after{content:'';position:absolute;top:0;width:60px;height:100%;background:linear-gradient(90deg,#681d1e,#39191a);box-shadow:inset 8px 0 20px #0008}.spotlight:before{right:0;border-radius:0 0 80px 0}.spotlight:after{left:0;border-radius:0 0 0 80px}.spotlight .big{font-size:66px;filter:drop-shadow(0 12px 10px #0006)}.btn{border:0;background:var(--yellow);color:var(--ink);padding:15px 28px;border-radius:16px;font-weight:800;font-size:17px;box-shadow:0 8px 25px #ffb90020;transition:transform .2s}.btn:hover{transform:translateY(-2px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.secondary{background:#3b3433;color:var(--cream);box-shadow:none}.btn.ghost{background:transparent;border:1px solid #72645c;color:var(--cream);box-shadow:none}.pills{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.pill{border:1px solid #6a5650;border-radius:30px;padding:8px 13px;color:#e8ded0;font-size:12px}.scene{animation:sceneIn .45s both;max-width:710px;margin:36px auto 0}.scene-top{display:flex;justify-content:space-between;align-items:center;color:var(--yellow);font-size:13px;font-weight:700}.progress{background:#52443b;height:6px;border-radius:12px;margin:16px 0 35px;overflow:hidden}.progress>div{height:100%;background:var(--yellow);border-radius:12px;transition:width .35s}.scene-tag{color:var(--yellow);font-size:13px;font-weight:700;margin-bottom:16px}.scene h1{font-size:clamp(25px,5vw,40px);margin-bottom:10px}.desc{color:#d5c9bb;margin-bottom:25px;line-height:1.8}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.choice{background:#383131;border:1px solid #65534a;border-radius:16px;min-height:70px;padding:16px;color:var(--cream);text-align:right;font-size:16px;display:flex;align-items:center;gap:12px;transition:.18s}.choice:hover{border-color:var(--yellow);background:#4a3b33}.choice.selected{background:var(--yellow);border-color:var(--yellow);color:var(--ink);font-weight:800}.choice .emoji{font-size:23px}.controls{display:flex;justify-content:space-between;gap:12px;margin-top:28px}.field{width:100%;padding:15px;background:#383131;color:white;border:1px solid #76665a;border-radius:14px;outline:none;font-size:17px}.field:focus{border-color:var(--yellow)}.notice{background:#382e2b;border:1px solid #645045;border-radius:14px;padding:16px;color:#e8dcd1;line-height:1.9;font-size:14px}.notice.warn{border-color:#e2a94e}.director{background:#392f2c;border-right:4px solid var(--yellow);padding:15px 19px;border-radius:12px;margin:20px 0;color:#ffdf84}.final{text-align:center;max-width:650px;margin:60px auto}.final .star{font-size:65px}.final h1{font-size:clamp(32px,6vw,54px)}.admin{max-width:960px;margin:35px auto}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.stat{padding:20px;border:1px solid #66534b;border-radius:16px;background:#342c2b}.stat strong{display:block;color:var(--yellow);font-size:29px}.stat span{font-size:13px;color:#d1c5bb}.bars{display:grid;gap:12px;margin-top:15px}.barrow{display:grid;grid-template-columns:145px 1fr 35px;gap:10px;align-items:center;font-size:13px}.track{height:12px;background:#443b37;border-radius:12px;overflow:hidden}.fill{height:100%;background:var(--yellow)}.admin section{border:1px solid #5a4b44;padding:22px;border-radius:18px;margin-top:18px}.admin h2{margin:0 0 15px}.footer{font-size:12px;color:#9c9087;text-align:center;margin:35px 0}.error{color:#ffb3a6;margin-top:10px}.spinner{display:inline-block;width:16px;height:16px;border:2px solid #333;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes sceneIn{from{opacity:0;transform:translateY(15px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:600px){.shell{padding:16px 15px 28px}.options{grid-template-columns:1fr}.choice{min-height:58px;padding:12px}.scene{margin-top:25px}.stats{grid-template-columns:1fr 1fr}.barrow{grid-template-columns:95px 1fr 30px}.hero{min-height:calc(100vh - 120px)}.logo{width:83px;height:66px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* V2: authentic Diwaniyat Al-Muhanakeen comic visual language */
body{background:#fffdf7;color:#241f20;background-image:radial-gradient(#2a252126 1px,transparent 1px);background-size:18px 18px}
.shell{max-width:800px;background:#fffefa;box-shadow:0 0 0 2px #241f20,0 15px 60px #241f2020;min-height:100vh}
.header{border-bottom:3px solid #241f20;padding-bottom:12px}.header-wordmark{font-size:31px;font-weight:900;letter-spacing:-2px;color:#ffb900;-webkit-text-stroke:1.5px #241f20;text-shadow:2px 3px #241f20}.header-wordmark small{font-size:13px}.muted,.tiny{color:#514944}
.comic-hero{text-align:center;display:flex;align-items:center;flex-direction:column;gap:15px;padding:26px 0 12px}.comic-issue{background:#241f20;color:#fff;padding:7px 18px;font-weight:800;transform:rotate(-2deg);border-radius:3px;font-size:14px}.comic-splash{position:relative;width:min(100%,650px);height:310px;background:radial-gradient(circle,#ffdb6e 0,#ffb900 64%,#f4a800 100%);border:4px solid #241f20;box-shadow:8px 8px 0 #241f20;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.comic-splash:before{content:'';position:absolute;inset:0;background:radial-gradient(#241f2040 1.3px,transparent 1.5px);background-size:12px 12px;opacity:.3}.comic-kicker{position:absolute;top:13px;right:12px;font-size:12px;font-weight:900;z-index:1}.comic-cast{width:86%;height:210px;object-fit:contain;object-position:bottom;z-index:1;mix-blend-mode:multiply;filter:contrast(1.13)}.comic-bubble{position:absolute;z-index:2;top:43px;left:9%;width:82%;background:white;border:3px solid #241f20;border-radius:45% 45% 40% 40% / 35% 35% 45% 45%;padding:13px 18px;font-size:clamp(13px,3vw,20px);font-weight:900;transform:rotate(-2deg)}.comic-pop{position:absolute;bottom:13px;left:16px;z-index:3;background:#fff;color:#241f20;border:3px solid #241f20;transform:rotate(-10deg);padding:5px 15px;font-weight:900;font-size:22px;box-shadow:4px 4px 0 #241f20}.comic-hero h1{font-size:clamp(31px,6vw,55px);line-height:1.25;margin:10px 0 0;font-weight:900}.comic-hero h1 em{font-style:normal;color:#e7a500;-webkit-text-stroke:.7px #241f20}.comic-hero p{font-weight:700;margin:0}.comic-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}.comic-facts span{background:#fff;border:2px solid #241f20;border-radius:30px;padding:6px 12px;font-weight:700;font-size:13px}.btn{border:3px solid #241f20;background:#ffb900;color:#241f20;border-radius:9px;box-shadow:4px 4px 0 #241f20}.comic-start{font-size:21px;transform:rotate(-1deg);padding:14px 35px}.btn.ghost{color:#241f20;border:2px solid #241f20}.btn.secondary{color:#fff}.comic-scene{border:3px solid #241f20;box-shadow:7px 7px 0 #241f20;background:#fff;padding:25px;border-radius:3px;max-width:730px}.scene-tag{display:inline-block;background:#ffb900;color:#241f20;padding:7px 14px;border:2px solid #241f20;transform:rotate(-2deg);font-size:15px}.scene-top{color:#241f20}.progress{background:#ece6db;border:2px solid #241f20;height:12px}.progress>div{background:#ffb900}.scene h1{font-weight:900}.desc{color:#52463f}.options{gap:12px}.choice,.comic-choice{background:#fffefa;color:#241f20;border:3px solid #241f20;border-radius:12px;box-shadow:3px 3px 0 #241f20;font-weight:750;min-height:64px;transform:rotate(-.3deg)}.choice:nth-child(even){transform:rotate(.4deg)}.choice:hover{background:#fff0b8;border-color:#241f20}.choice.selected{background:#ffb900;color:#241f20;border-color:#241f20;box-shadow:1px 1px 0 #241f20}.speech-note{display:inline-block;background:#ffb900;border:2px solid #241f20;padding:12px;border-radius:20px;margin-top:18px;font-weight:800}.field{background:#fff;color:#241f20;border:2px solid #241f20}.notice{background:#fff3cf;color:#241f20;border:2px solid #241f20}.final,.admin{color:#241f20}.final .desc{color:#4e4641}.admin section,.stat{background:#fff;border:2px solid #241f20;color:#241f20}.stat span{color:#554b43}.stat strong{color:#9b351b}.track{background:#eee3c8}.footer{color:#655d55}.error{color:#9b351b}
@media(max-width:600px){.comic-splash{height:260px}.comic-cast{height:190px;width:98%}.comic-bubble{top:37px}.comic-scene{padding:16px}.comic-hero{gap:13px}.comic-facts span{font-size:11px}.comic-hero h1{font-size:33px}.shell{box-shadow:none}}

.skip-choice{display:block;margin:15px 0 0 auto;background:transparent;border:0;text-decoration:underline;color:#655d55;font-weight:700;padding:8px}.privacy-short{font-size:12px!important;color:#62564c;max-width:520px;line-height:1.5!important}

/* V3 official logo and cinematic comic artwork */
.header{min-height:66px}.official-logo{width:94px;height:76px;object-fit:contain;border-radius:6px}.v3-hero{padding-top:16px}.hero-art{position:relative;width:100%;max-width:720px;border:4px solid #241f20;box-shadow:7px 7px 0 #241f20;background:#fff7e8}.hero-art>img:first-child{display:block;width:100%;height:auto}.hero-real-logo{position:absolute;top:1.2%;right:1.2%;width:18%;max-width:125px;aspect-ratio:1;object-fit:contain;background:#fbf5e8;border:2px solid #241f20;border-radius:9px;padding:3px}.v3-hero .comic-start{margin-top:0}.selection-counter{display:inline-block;padding:6px 13px;margin-bottom:14px;border:2px solid #241f20;background:#ffb900;font-weight:800;border-radius:9px}.final-comic-art{display:block;width:100%;max-height:210px;object-fit:cover;object-position:top;border:3px solid #241f20;margin-bottom:18px}.comic-choice{transition:background .2s,transform .2s}.comic-choice:focus-visible,.btn:focus-visible{outline:4px solid #9b351b;outline-offset:3px}@media(max-width:600px){.official-logo{width:76px;height:60px}.hero-real-logo{width:20%}.final-comic-art{max-height:135px}}

/* Explicit, unchecked-by-default survey consent */
.consent-box{display:flex;align-items:flex-start;text-align:right;gap:12px;background:#fff5d6;color:#241f20;border:2px solid #241f20;border-radius:12px;padding:14px;max-width:650px;width:100%;line-height:1.8;font-size:14px;font-weight:600}.consent-box input{width:21px;height:21px;accent-color:#241f20;flex:none;margin-top:4px}.consent-box a{color:#74351d;text-decoration:underline}.comic-start:disabled{opacity:.48;box-shadow:none;cursor:not-allowed}