/* Friday Night — «ملوّن ومرح» look for سين جيم (loaded after its own styles; only restyles) */
:root{--bg:#fff6e9;--soft:#f6efff;--line:#2b1745;--shadow:none;--game:#7c3aed}
body{background:var(--bg)}
.fn-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 12% 8%,#ffe1f0 0,transparent 32%),radial-gradient(circle at 92% 28%,#e3dcff 0,transparent 32%),radial-gradient(circle at 28% 92%,#d8f7ea 0,transparent 32%)}
.fn-bg span{position:absolute;font-size:30px;opacity:.5;animation:fnbob 7s ease-in-out infinite}
@keyframes fnbob{50%{transform:translateY(-20px) rotate(12deg)}}
body.tv .fn-bg,body.hosttv .fn-bg{opacity:.6}

.brand .logo{background:#fff;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--game);overflow:hidden;padding:2px}
.brand .logo img{width:100%;height:100%;object-fit:contain;display:block}
.gamesbar a{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);background:#fff}
.gamesbar a.on{background:var(--game);color:#fff}
.gamesbar a.site{border:0;box-shadow:none;background:none}
.gamesbar a img.gi{width:20px;height:20px;object-fit:contain;vertical-align:-5px;margin-inline-end:5px;border-radius:5px}

.card,.lead{border:3px solid var(--ink);box-shadow:6px 6px 0 var(--game);border-radius:24px}
.lead{box-shadow:6px 6px 0 var(--gold)}
.tabs{border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.tabs button.active,.tabs button.on{border:2px solid var(--ink)}
.btn{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.btn:active:not(:disabled){transform:translate(3px,3px);box-shadow:none}
.btn.alt{background:#fff;color:var(--ink)}
.ghost{border:2px solid var(--ink)!important;box-shadow:2px 2px 0 var(--ink);color:var(--ink);background:#fff}
.ghost:active{transform:translate(2px,2px);box-shadow:none}
.seg{border:2px solid var(--ink)}
.seg button.on{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}

/* scoreboard */
.score{border:3px solid var(--ink);border-top:7px solid var(--c);box-shadow:4px 4px 0 var(--c)}
.score.turn{transform:translateY(-3px);box-shadow:6px 6px 0 var(--c);animation:fnturn 1.6s ease-in-out infinite}
@keyframes fnturn{50%{transform:translateY(-6px)}}
.score .pt{display:inline-block}

/* board */
.col{border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:22px}
.cell{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.cell:not([disabled]):not(.ro):hover{transform:translate(-2px,-2px) rotate(-2deg);box-shadow:5px 5px 0 var(--ink)}
.cell:not([disabled]):not(.ro):active{transform:translate(3px,3px);box-shadow:none}
.cell[disabled]{box-shadow:none;border-color:#c9bfd6}

/* question card */
.stage .qcard{border:4px solid var(--ink);box-shadow:8px 8px 0 var(--game);animation:fnflip .55s cubic-bezier(.3,1.4,.5,1)}
@keyframes fnflip{from{transform:perspective(900px) rotateY(-90deg) scale(.8);opacity:0}}
.qcard.rq{border:3px solid var(--ink);box-shadow:6px 6px 0 var(--game)}
.reveal{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--game)}
.reveal:active{transform:translate(3px,3px);box-shadow:none}
.answer{border:3px solid var(--ink);box-shadow:4px 4px 0 var(--good);animation:fnpop .45s cubic-bezier(.2,1.6,.4,1)}
.award button{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.award button:active{transform:translate(3px,3px);box-shadow:none}
.lteam{border:2px solid var(--ink);border-inline-start:7px solid var(--c);background:#fff}
.rank div{border:2px solid var(--ink);background:#fff}
.rank div:first-child{background:#ffe08a;box-shadow:4px 4px 0 var(--ink)}
.toast{border:3px solid #fff;box-shadow:0 0 0 3px var(--ink),5px 5px 0 3px var(--gold);font-size:18px;animation:fnpop .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes fnpop{from{transform:scale(.5);opacity:0}}

/* shared moments (fnanim.js) */
.fn-confetti{position:fixed;inset:0;pointer-events:none;z-index:2147483600}
.fn-slam{position:fixed;left:50%;top:38%;z-index:2147483500;transform:translate(-50%,-50%);width:min(92vw,560px);text-align:center;background:var(--slam,var(--pink));color:#fff;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);border-radius:22px;padding:18px;font-family:var(--f-display);font-weight:800;font-size:clamp(22px,6vw,36px);animation:fnslam .55s cubic-bezier(.2,1.8,.4,1) both,fnfade .4s 2.3s forwards;pointer-events:none}
.fn-slam small{display:block;font-family:var(--f-body);font-size:15px;opacity:.9}
@keyframes fnslam{from{transform:translate(-50%,-50%) scale(2.4) rotate(-8deg);opacity:0}}
@keyframes fnfade{to{opacity:0;transform:translate(-50%,-60%) scale(.9)}}
.fn-shake{animation:fnshake .45s}
@keyframes fnshake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.fn-win{position:fixed;inset:0;z-index:2147483400;background:rgba(43,23,69,.55);display:grid;place-items:center;padding:16px}
.fn-win .box{background:#fff;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--gold);border-radius:28px;padding:24px;text-align:center;width:min(380px,100%);animation:fnpop .5s cubic-bezier(.2,1.6,.4,1)}
.fn-win .trophy{font-size:84px;line-height:1;animation:fndrop .8s cubic-bezier(.3,1.6,.5,1) both}
@keyframes fndrop{from{transform:translateY(-140px) rotate(-30deg);opacity:0}}
.fn-win p{margin:6px 0 0;font-weight:800;color:var(--muted)}
.fn-win h2{margin:0;font-family:var(--f-display);font-size:clamp(28px,8vw,40px);color:var(--game)}
.fn-win .rows{display:grid;gap:8px;margin:14px 0}
.fn-win .rows div{display:flex;justify-content:space-between;border:2px solid var(--ink);border-radius:14px;padding:8px 12px;font-weight:800;background:var(--bg)}
.fn-win .rows div:first-child{background:#ffe08a}
.fn-win .rows b{font-family:var(--f-display);font-size:22px}
.fn-win button{background:var(--game);color:#fff;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:14px;padding:12px 22px;font-weight:800;font-size:17px;cursor:pointer}
.fn-bump{animation:fnbump .5s ease}
@keyframes fnbump{40%{transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){.fn-bg span,.score.turn,.stage .qcard,.answer,.toast,.fn-slam,.fn-win .box,.fn-win .trophy{animation:none!important}}
/* the mute button sits above سين جيم's bottom start bar */
.fx-mute{bottom:calc(86px + env(safe-area-inset-bottom,0px))!important}
.fx-mute{width:40px!important;height:40px!important;font-size:17px!important;opacity:.9}
.tmdb-credit{text-align:center;color:var(--muted);font-size:12px;font-weight:700;margin:28px 16px 90px}
.tmdb-credit a{color:inherit}
body.tv .tmdb-credit,body.hosttv .tmdb-credit{display:none}

/* big moments (banners, confetti) never make the page scroll sideways */
html{overflow-x:hidden}@supports (overflow:clip){html{overflow-x:clip}}