:root{font-family:Arial,Helvetica,sans-serif;color:#20332b;background:#f5f3ec;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}[hidden]{display:none!important}.welcome{min-height:100vh;max-width:1180px;margin:auto;padding:64px 40px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;color:#55725e}h1{font-size:clamp(54px,7vw,92px);line-height:1.02;letter-spacing:-5px;margin:28px 0}h1 span{color:#c59031}h2{font-size:30px;letter-spacing:-1px;margin:16px 0}p{line-height:1.6;color:#627268}.intro>p{font-size:19px;max-width:360px}.steps{display:flex;flex-direction:column;gap:18px;border-left:2px solid #d1b673;padding-left:18px;margin-top:40px;font-size:14px}.form-card{background:#fff;padding:36px;border-radius:24px;box-shadow:0 16px 60px #233e2610;border:1px solid #e6e8df}.form-card>p{font-size:14px;margin-bottom:28px}label{display:flex;flex-direction:column;gap:9px;font-size:14px;font-weight:600;margin-bottom:20px}.names{display:grid;grid-template-columns:1fr 1fr;gap:16px}input{min-width:0;width:100%;padding:14px;border:1px solid #cdd5cd;border-radius:9px;background:#fdfefb;color:#20332b}input:focus{outline:3px solid #b5ceb7;outline-offset:2px}button{border:0;background:#254b38;color:white;padding:16px 22px;border-radius:10px;cursor:pointer;font-weight:700;min-height:48px}button:hover{background:#35664c}button:focus-visible{outline:3px solid #c59031;outline-offset:3px}button:disabled{opacity:.6;cursor:wait}form button{width:100%;display:flex;justify-content:space-between}.privacy{font-size:12px;line-height:1.6}.error{color:#a42e30;font-size:14px}.error:empty{display:none}#game-shell{position:fixed;inset:0;background:#17291e}iframe{width:100%;height:100%;border:0;display:block}dialog{color:#20332b;border:0;border-radius:24px;padding:32px;width:min(580px,calc(100% - 28px));max-height:90dvh;overflow:auto;box-shadow:0 28px 100px #0004}dialog::backdrop{background:#14291dd9;backdrop-filter:blur(5px)}.personal{padding:16px;background:#edf3eb;border-radius:12px;color:#254b38;font-weight:700}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px;text-align:left}caption{text-align:left;padding:12px 0;color:#627268;font-size:12px}th,td{padding:12px 8px;border-bottom:1px solid #e5e9e2}th:last-child,td:last-child{text-align:right}tr.you{background:#edf3eb;font-weight:700}#end-actions{display:flex;gap:12px;margin-top:24px}#end-actions button{flex:1}.secondary{background:#eef1e9;color:#254b38}.secondary:hover{background:#dce5d7}@media(max-width:760px){.welcome{grid-template-columns:1fr;gap:30px;padding:32px 20px}.intro h1{font-size:56px;letter-spacing:-3px;margin:16px 0}.intro h1 br{display:none}.intro>p{font-size:16px;max-width:none}.steps{display:none}.form-card{padding:24px}.names{grid-template-columns:1fr;gap:0}dialog{padding:24px}#end-actions{flex-direction:column}}
/* Supplied artwork is used intact; controls and live values are HTML. */
:root{color:#703581;background:#582578}body{min-height:100svh;display:grid;place-items:center}.art-screen{position:relative;width:min(100vw,177.7778svh);aspect-ratio:16/9;background-size:100% 100%;background-repeat:no-repeat;container-type:inline-size}.registration-art{background-image:url('../design/inscription.png')}.score-art{background-image:url('../design/score.png')}.mobile-title{display:none}.sr-only,.field>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.field{position:absolute;left:44.43%;width:25.15%;height:5.3%;margin:0;display:block}.field-name{top:47.66%}.field-first{top:55.9%}.field-phone{top:64.1%}.field-email{top:72.3%}.field input{height:100%;padding:0 1.05cqw;background:#fff;border:1px solid #703581;border-radius:.82cqw;font-size:1.05cqw;font-weight:400;color:#703581}.field input::placeholder{color:#b8aaa5}.field input:focus{outline:3px solid #ffc000;outline-offset:1px}.art-button,form .art-button{position:absolute;padding:0;min-height:0;background:transparent;border:0;border-radius:2cqw;display:block;color:transparent;box-shadow:none}.art-button span{opacity:0}.art-button:hover{background:#ffffff16}.art-button:disabled{background:#f9efe6aa;opacity:1;cursor:wait}.art-button:focus-visible{outline:3px solid white;outline-offset:3px;box-shadow:0 0 0 6px #743683}.art-button.sound{left:2.55%;top:4.5%;width:5%;height:9.3%;border-radius:50%}.sound[aria-pressed=false]::after{content:'';position:absolute;height:4%;width:75%;background:#fff;transform:rotate(-45deg);left:12%;top:47%;box-shadow:0 0 0 1px #703581}.art-button.close{left:92.45%;top:4.5%;width:5.1%;height:9.3%;border-radius:50%}.art-button.begin{left:41.6%;top:81.3%;width:16.9%;height:7.4%}.art-error{position:absolute;left:29%;width:42%;top:90%;font-size:clamp(10px,1cqw,18px);line-height:1.2;text-align:center;background:#f9efe6;color:#912541;margin:0;padding:.25em;border-radius:4px}.art-error:empty{display:none}.score-value{position:absolute;left:44.1%;top:55.7%;width:12.5%;height:13%;display:flex;align-items:center;justify-content:center;background:#f9efe6;font-family:Georgia,serif;font-size:8.1cqw;font-style:italic;font-weight:700;line-height:1;color:#703581;-webkit-text-stroke:.26cqw white;paint-order:stroke fill}.score-value.long{font-size:5.2cqw}.time-value{position:absolute;left:41.8%;top:68.5%;width:17%;height:5.1%;display:flex;align-items:center;justify-content:center;background:#f9efe6;color:#703581;font-size:2cqw;font-weight:700;white-space:nowrap}.art-button.score-replay{left:31.3%;top:81.3%;width:16.9%;height:7.4%}.art-button.score-finish{left:50%;top:81.3%;width:17%;height:7.4%}dialog{border:4px solid #ffbb00;color:#703581;background:#f9efe6}dialog button{background:#703581}dialog button:hover{background:#582578}.eyebrow{color:#703581}.personal,tr.you{background:#f2e2f6;color:#703581}.secondary{color:white}
@media(orientation:portrait){body{background:#ffda5c}.art-screen{width:100%;min-height:100svh;aspect-ratio:auto;background-image:none;padding:30px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}.mobile-title{display:block;font-size:32px;letter-spacing:-1px;text-align:center;color:#703581;margin:22px 0}.art-screen form{width:100%;max-width:450px;background:#f9efe6;border:3px solid #ffb700;border-radius:22px;padding:24px}.field{position:static;width:auto;height:auto;margin-bottom:18px}.field>span{position:static;width:auto;height:auto;clip:auto;overflow:visible;display:block;margin:0 0 8px;font-size:17px}.field input{height:48px;font-size:16px;padding:12px;border-radius:10px}.art-button.begin,.art-button.score-replay,.art-button.score-finish{position:static;width:100%;height:auto;min-height:52px;background:#703581;border:3px solid #ffb700;border-radius:22px;color:#fff;font-size:22px}.art-button span{opacity:1}.art-button.sound,.art-button.close{display:none}.art-error{position:static;font-size:14px;width:100%;margin-top:12px}.score-value{position:static;width:100%;height:auto;min-height:130px;font-size:100px;background:transparent;-webkit-text-stroke:3px white}.score-value.long{font-size:78px}.time-value{position:static;width:100%;height:auto;font-size:26px;background:transparent}.score-art{max-width:500px;margin:auto}}
/* Daily’n leaderboard artwork, with real results and a scrollable top ten. */
dialog.leaderboard-art{position:fixed;inset:0;margin:auto;padding:0;width:min(100vw,177.7778svh);height:auto;max-width:none;max-height:none;aspect-ratio:16/9;border:0;border-radius:0;background:#f9efe6 url('../design/leaderboard.png') center/100% 100% no-repeat;container-type:inline-size;overflow:hidden;color:#703581;box-shadow:none}.leaderboard-art::backdrop{background:#582578}.leaderboard-art .score-value{top:22.4%;height:12.2%}.leaderboard-art .time-value{top:35.2%;height:4.8%}.leader-position{position:absolute;top:51.15%;left:30%;width:40%;margin:0;text-align:center;font-size:.8cqw;line-height:1.35;background:#f9efe6;color:#703581}.leader-list{position:absolute;left:30%;top:53.5%;width:40%;height:29.5%;background:#f9efe6;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#703581 #f9efe6;padding:0 .1cqw}.leader-list table{border:0;width:100%;font-size:1.55cqw;color:#703581}.leader-list tbody{display:block}.leader-list tr{display:grid;grid-template-columns:9% 18% 1fr 22%;align-items:center;min-height:5.47cqw;border-radius:1.35cqw;background:transparent}.leader-list tr:nth-child(odd){background:white}.leader-list tr.you{box-shadow:inset 0 0 0 2px #ffb700;color:#703581}.leader-list td{display:block;padding:.45cqw .7cqw;border:0;font-weight:700;text-align:left;min-width:0;overflow-wrap:anywhere}.leader-list td:nth-child(3){font-size:1.45cqw}.leader-list td:last-child{text-align:right;white-space:nowrap}.initial-avatar{width:3.6cqw;height:3.6cqw;display:flex;align-items:center;justify-content:center;border:.2cqw solid #ffb700;border-radius:50%;background:#703581;color:white;box-shadow:0 .16cqw #251329;font-size:1.15cqw}.leader-list .error{font-size:1.15cqw;padding:1cqw}.leader-list #retry{font-size:1.1cqw;margin:1cqw;min-height:0;padding:.8cqw}.leaderboard-art #end-actions{display:contents}.art-button.leader-replay{left:31.3%;top:84.3%;width:16.9%;height:7.4%}.art-button.leader-finish{left:50%;top:84.3%;width:17%;height:7.4%}
@media(orientation:portrait){dialog.leaderboard-art{width:calc(100vw - 24px);max-height:94svh;aspect-ratio:auto;padding:24px 18px;background:#f9efe6;border:3px solid #ffb700;border-radius:24px;overflow:auto}.leaderboard-art #rank-title{position:static;width:auto;height:auto;clip:auto;white-space:normal;margin:0 0 12px;font-size:24px}.leaderboard-art .score-value{height:auto;min-height:95px}.leaderboard-art .time-value{height:auto;font-size:24px}.leader-position{position:static;width:100%;font-size:14px;margin:14px 0}.leader-list{position:static;width:100%;height:260px;padding:0}.leader-list table{font-size:16px}.leader-list tr{min-height:76px;grid-template-columns:9% 16% 1fr 24%;border-radius:14px}.leader-list td{padding:6px 4px}.leader-list td:nth-child(3){font-size:14px}.initial-avatar{width:34px;height:34px;border:2px solid #ffb700;font-size:12px}.leader-list .error,.leader-list #retry{font-size:14px}.leaderboard-art #end-actions{display:flex;flex-direction:column;gap:12px;margin-top:16px}.art-button.leader-replay,.art-button.leader-finish{position:static;width:100%;height:auto;min-height:48px;background:#703581;color:white;border:3px solid #ffb700;border-radius:24px;font-size:20px}}
/* One participation per Tunisian calendar day. */
.leaderboard-art .art-button.leader-replay:disabled{background:#703581;border:.25cqw solid #ffb700;border-radius:2.2cqw;color:#fff;font-size:2.1cqw;opacity:1;cursor:default;box-shadow:.3cqw .4cqw .3cqw #0005}.leaderboard-art .leader-replay span{opacity:1}.daily-note{position:absolute;left:29%;width:42%;top:89%;margin:0;text-align:center;font-size:.8cqw;color:#703581;line-height:1.2}.registration-art .art-error{top:91%;font-size:.8cqw}
@media(orientation:portrait){.daily-note{position:static;width:auto;font-size:12px;margin:12px 0}.registration-art .art-error{font-size:14px}.leaderboard-art .art-button.leader-replay:disabled{font-size:20px;border:3px solid #ffb700;border-radius:24px}}
/* Fill the available landscape viewport, including windows wider than 16:9.
   Artwork and percentage-positioned controls share the same full-size box. */
@media (orientation:landscape){
 html,body{width:100%;height:100%;min-height:0;overflow:hidden}
 .registration-art,dialog.leaderboard-art{
  width:100vw;height:100vh;height:100dvh;
  min-width:0;min-height:0;max-width:none;max-height:none;
  aspect-ratio:auto;margin:0;background-size:100% 100%;
 }
 .registration-art{align-self:stretch;justify-self:stretch}
 dialog.leaderboard-art{inset:0}
 .field input{font-size:min(1.05cqw,2.8dvh)}
 .leaderboard-art .score-value{font-size:min(8.1cqw,14.4dvh)}
 .leaderboard-art .score-value.long{font-size:min(5.2cqw,10dvh)}
 .leaderboard-art .time-value{font-size:min(2cqw,3.6dvh)}
 .leader-list tr{min-height:9.72dvh}
 .leader-list table{font-size:min(1.55cqw,2.76dvh)}
 .leader-list td:nth-child(3){font-size:min(1.45cqw,2.58dvh)}
 .initial-avatar{width:min(3.6cqw,6.4dvh);height:min(3.6cqw,6.4dvh);font-size:min(1.15cqw,2.05dvh)}
}
/* Supplied 1080 × 1920 mobile artwork. Live fields, values and buttons
   use the same percentage coordinate system as the artwork. */
@media (orientation:portrait){
 html,body{width:100%;height:100%;min-height:100%;overflow:hidden;background:#ffda5c}
 .registration-art{
  display:block;width:100vw;height:100vh;height:100dvh;min-height:0;max-width:none;
  padding:0;aspect-ratio:auto;background:url('../design/inscription-mobile.png') center/100% 100% no-repeat;
  container-type:inline-size;
 }
 .registration-art .mobile-title{display:none}
 .registration-art form{position:absolute;inset:0;width:100%;max-width:none;padding:0;margin:0;background:transparent;border:0;border-radius:0}
 .registration-art .field{position:absolute;left:19.9%;width:60.2%;height:4%;margin:0}
 .registration-art .field-name{top:45.25%}
 .registration-art .field-first{top:55.55%}
 .registration-art .field-phone{top:65.55%}
 .registration-art .field-email{top:75.8%}
 .registration-art .field>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .registration-art .field input{width:100%;height:100%;padding:0 2.2vw;border:1px solid #703581;border-radius:1.45vw;background:#fff;font-size:clamp(14px,3.7vw,24px);color:#703581}
 .registration-art .art-button.sound{display:block;left:5.9%;top:3.35%;width:8.7%;height:5.1%;border-radius:50%}
 .registration-art .art-button.close{display:block;left:85.4%;top:3.35%;width:8.7%;height:5.1%;border-radius:50%}
 .registration-art .art-button.begin{position:absolute;display:block;left:32.7%;top:82.4%;width:34.7%;height:4.8%;min-height:0;background:transparent;border:0;border-radius:5vw;color:transparent}
 .registration-art .art-button.begin span{opacity:0}
 .registration-art .daily-note{position:absolute;left:17%;top:88.3%;width:66%;margin:0;font-size:clamp(9px,2.25vw,14px);line-height:1.25;color:#703581;text-align:center}
 .registration-art .art-error{position:absolute;left:15%;top:90.5%;width:70%;margin:0;padding:.45em .7em;border-radius:6px;background:#f9efe6e8;font-size:clamp(11px,2.8vw,16px);line-height:1.25;color:#9b2438;text-align:center}
 dialog.leaderboard-art{
  inset:0;display:block;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;
  margin:0;padding:0;aspect-ratio:auto;border:0;border-radius:0;overflow:hidden;
  background:#f9efe6 url('../design/leaderboard-mobile.png') center/100% 100% no-repeat;
  container-type:inline-size;
 }
 dialog.leaderboard-art:not([open]){display:none}
 .leaderboard-art #rank-title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .leaderboard-art .art-button.sound{display:block;left:5.9%;top:3.35%;width:8.7%;height:5.1%;border-radius:50%}
 .leaderboard-art .art-button.close{display:block;left:85.4%;top:3.35%;width:8.7%;height:5.1%;border-radius:50%}
 .leaderboard-art .score-value{position:absolute;left:35.5%;top:38.25%;width:29%;height:7.8%;min-height:0;background:#f9efe6;font-size:clamp(70px,22vw,138px);-webkit-text-stroke:3px white}
 .leaderboard-art .score-value.long{font-size:clamp(54px,17vw,110px)}
 .leaderboard-art .time-value{position:absolute;left:32%;top:46.4%;width:36%;height:3.5%;background:#f9efe6;font-size:clamp(20px,5.5vw,35px)}
 .leaderboard-art .leader-position{position:absolute;left:20%;top:53.9%;width:60%;height:1.8%;margin:0;background:#f9efe6;font-size:clamp(9px,2.2vw,14px);line-height:1.15;text-align:center}
 .leaderboard-art .leader-list{position:absolute;left:14.55%;top:56.35%;width:70.9%;height:27.6%;padding:0 .4%;background:#f9efe6;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#703581 #eadde0}
 .leaderboard-art .leader-list table{width:100%;font-size:clamp(14px,3.7vw,24px)}
 .leaderboard-art .leader-list tbody{display:block}
 .leaderboard-art .leader-list tr{display:grid;grid-template-columns:9% 20% 1fr 23%;align-items:center;min-height:5.45vh;min-height:5.45dvh;border-radius:2.3vw}
 .leaderboard-art .leader-list td{padding:.5vw 1vw;font-weight:700}
 .leaderboard-art .leader-list td:nth-child(3){font-size:clamp(13px,3.4vw,22px)}
 .leaderboard-art .initial-avatar{width:8vw;height:8vw;max-width:52px;max-height:52px;border:2px solid #ffb700;font-size:clamp(10px,2.8vw,18px);box-shadow:0 2px #251329}
 .leaderboard-art .leader-list .error{font-size:clamp(11px,2.7vw,16px);padding:1em}
 .leaderboard-art .leader-list #retry{font-size:clamp(13px,3vw,18px);margin:1em;padding:.7em 1em}
 .leaderboard-art #end-actions{display:contents}
 .leaderboard-art .art-button.leader-replay,.leaderboard-art .art-button.leader-finish{position:absolute;display:block;top:85.8%;height:4.8%;min-height:0;border-radius:5vw;font-size:clamp(19px,5.5vw,35px)}
 .leaderboard-art .art-button.leader-replay{left:16.65%;width:30.2%;background:#703581;border:3px solid #ffb700;color:#fff;box-shadow:3px 5px 4px #0005}
 .leaderboard-art .art-button.leader-finish{left:50.1%;width:29.8%;background:#f9efe6;border:3px solid #ffb700;color:#703581;box-shadow:3px 5px 4px #0005}
 .leaderboard-art .art-button.leader-replay span,.leaderboard-art .art-button.leader-finish span{opacity:1}
}
/* Facebook / Messenger / Instagram hand-off screen. The artwork contains the
   visible button; the HTML button below supplies the accessible hit target. */
.handoff-art{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;background:#ffda5c url('../design/open-browser-mobile.png') center/100% 100% no-repeat;z-index:50}
.handoff-button{position:absolute;left:18%;top:59.5%;width:64%;height:6.8%;min-height:48px;margin:0;padding:0;border:0;border-radius:5vw;background:transparent;color:transparent;box-shadow:none}
.handoff-button span{opacity:0}
.handoff-button:hover{background:#ffffff12}
.handoff-button:focus-visible{outline:3px solid white;outline-offset:3px;box-shadow:0 0 0 6px #703581}
.handoff-help{position:absolute;left:10%;top:67.5%;width:80%;margin:0;padding:14px 16px;border:3px solid #ffb700;border-radius:18px;background:#f9efe6f2;color:#703581;font-size:clamp(14px,4vw,21px);font-weight:700;line-height:1.35;text-align:center;box-shadow:0 5px 10px #0004}
.handoff-loading{position:fixed;inset:0;z-index:55;display:grid;place-items:center;background:#ffda5c;color:#703581;font-size:clamp(18px,5vw,30px);font-weight:700;text-align:center}
@media (orientation:landscape){
 .handoff-button{border-radius:4vh}
 .handoff-help{font-size:clamp(13px,2.5vh,19px)}
}