/* تلفون اللاعب */
body.phone{display:grid;grid-template-rows:auto auto minmax(0,1fr);height:100dvh;overflow:hidden;padding-bottom:env(safe-area-inset-bottom)}
.ph-bar{display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) 18px 10px}
.ph-bar .logo{font-size:22px}
.me{font-size:13px;font-weight:600;padding:5px 12px;border-radius:99px}
.me.a{background:var(--sea-soft);color:var(--sea)}.me.b{background:var(--henna-soft);color:var(--henna)}
.timebar{height:6px;margin:0 18px;border-radius:6px;background:var(--line);overflow:hidden}
.timebar i{display:block;height:100%;background:var(--saffron);border-radius:6px;transform-origin:right}
.timebar.hot i{background:var(--henna)}
.ph-main{min-height:0;overflow:hidden;position:relative}
.ph-inner{display:flex;flex-direction:column;gap:14px;padding:16px 18px 24px;max-width:520px;width:100%;margin:0 auto}
.ph-inner h1{font-size:26px;line-height:1.35}
.center-msg{flex:1;display:grid;place-content:center;justify-items:center;text-align:center;gap:10px}
.center-msg .big{font-family:var(--display);font-size:34px;color:var(--palm);line-height:1.3}
.team-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.team-pick button{padding:18px 10px;border-radius:18px;border:2px solid var(--line);background:var(--white);font-weight:700;font-size:18px;transition:all .2s var(--ease)}
.team-pick .a.on{border-color:var(--sea);background:var(--sea-soft);color:var(--sea)}
.team-pick .b.on{border-color:var(--henna);background:var(--henna-soft);color:var(--henna)}
.mates{display:flex;flex-wrap:wrap;gap:6px}
.mates span{font-size:14px;padding:4px 12px;border-radius:99px;background:var(--white);border:1px solid var(--line)}
.answers{display:grid;gap:10px}
.ans{display:flex;align-items:center;gap:12px;padding:18px 16px;border-radius:18px;border:2px solid var(--line);background:var(--white);font-size:19px;font-weight:600;text-align:right;min-height:64px;transition:transform .15s var(--ease),border-color .2s,background .2s}
.ans:active{transform:scale(.98)}
.ans i{font-style:normal;flex-shrink:0;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-family:var(--display);background:var(--palm);color:var(--shell);font-size:16px}
.ans.picked{border-color:var(--saffron);background:var(--saffron-soft)}
.ans.right{border-color:var(--ok);background:rgba(30,138,79,.12)}
.ans.wrongpick{border-color:var(--bad);background:rgba(194,65,43,.1)}
.qtext{font-size:22px;font-weight:600;line-height:1.5}
.result{padding:22px;border-radius:22px;text-align:center;display:grid;gap:4px}
.result.good{background:rgba(30,138,79,.12);color:var(--ok)}
.result.bad{background:rgba(194,65,43,.1);color:var(--bad)}
.result.none{background:var(--white);color:var(--muted);border:1px solid var(--line)}
.result b{font-family:var(--display);font-size:30px}
.piece{border-radius:22px;padding:22px 16px;text-align:center;display:grid;gap:12px;color:var(--shell);position:relative;overflow:hidden}
.piece.a{background:var(--sea)}.piece.b{background:var(--henna)}
.piece.locked{opacity:.75}
.piece::after{content:'';position:absolute;inset:auto 0 0 0;height:9px;background:var(--sadu) repeat-x 0 0/12px 9px}
.piece small{font-size:13px;opacity:.9}
.piece b{font-family:var(--display);font-size:36px;line-height:1.25}
.slot-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:8px}
.slot-btns button{aspect-ratio:1;border-radius:14px;background:rgba(255,250,240,.2);border:2px solid rgba(255,250,240,.6);color:var(--shell);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.slot-btns button:active{background:rgba(255,250,240,.4)}
.locked-note{font-weight:700;font-size:18px}
.progress-line{font-size:15px;color:var(--muted);text-align:center}
.join-form{display:grid;gap:14px}
.code-inp{text-align:center;letter-spacing:.3em;font-size:28px!important;font-variant-numeric:tabular-nums;direction:ltr}
.stat{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat div{padding:14px;border-radius:16px;background:var(--white);border:1px solid var(--line);text-align:center}
.stat b{display:block;font-family:var(--display);font-size:28px;font-variant-numeric:tabular-nums}
.stat small{color:var(--muted)}
.verdict{padding:16px;border-radius:18px;background:var(--henna);color:var(--shell);text-align:center;font-family:var(--display);font-size:22px}
.stat b{direction:ltr;unicode-bidi:isolate}
.ph-bar .back-link{text-decoration:none;font-size:22px;color:var(--muted);padding:4px 8px;border-radius:10px}
.ph-bar{gap:10px}.ph-bar .logo{margin-inline-end:auto}
/* ===== الدفعة ٢ ===== */
.avatar-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.avatar-pick button{aspect-ratio:1;border-radius:16px;background:var(--white);border:2px solid var(--line);font-size:28px;transition:transform .2s var(--ease),border-color .2s}
.avatar-pick button.on{border-color:var(--palm);background:rgba(30,90,69,.08);transform:scale(1.06)}
.result small{font-size:13px;opacity:.85;font-weight:500}
.result.good{animation:pop-in .5s cubic-bezier(.34,1.56,.64,1)}
.result.bad{animation:shake .4s}
@keyframes pop-in{from{transform:scale(.85);opacity:0}}

/* التفاعلات */
.react-bar{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:6px;border-radius:99px;background:rgba(255,250,240,.92);border:1px solid var(--line);box-shadow:0 10px 26px -14px rgba(42,33,28,.45);z-index:30;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.react-bar button{width:48px;height:48px;border-radius:50%;font-size:24px;transition:transform .15s}
.react-bar button:active,.react-bar button.pop{animation:react-pop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes react-pop{50%{transform:scale(1.35)}}
.ph-inner{padding-bottom:84px}

/* ملخص نهاية اللعبة */
.sum-head{display:grid;justify-items:center;text-align:center;gap:4px;padding:20px 12px;border-radius:24px;animation:pop-in .6s cubic-bezier(.34,1.56,.64,1)}
.sum-head.won{background:linear-gradient(160deg,rgba(230,165,50,.22),rgba(14,138,140,.12))}
.sum-head.lost,.sum-head.tie{background:var(--white);border:1px solid var(--line)}
.sum-head h1{font-size:28px;color:var(--palm)}
.sum-head p{margin:0}
.sum-av{font-size:46px;line-height:1;animation:bob-av 2.6s ease-in-out infinite}
@keyframes bob-av{50%{transform:translateY(-5px)}}
.sum-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sum-stat{padding:14px 10px;border-radius:16px;background:var(--white);border:1px solid var(--line);text-align:center;animation:rise-up .5s var(--ease) both}
.sum-stat b{display:block;font-family:var(--display);font-size:26px;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.sum-stat small{color:var(--muted);font-size:13px}
@keyframes rise-up{from{opacity:0;transform:translateY(12px)}}
.sum-star{text-align:center;font-weight:600;margin:0}
.sum-note{text-align:center;font-size:13px;margin:0}
a.btn{text-decoration:none;color:inherit}

/* نافذة البقاء أو الخروج */
.sheet-wrap{position:fixed;inset:0;z-index:70;background:rgba(42,33,28,.35);display:grid;align-items:end;animation:fade .25s}
.sheet{display:grid;gap:10px;padding:22px 18px calc(22px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;background:var(--shell);animation:sheet-up .35s cubic-bezier(.22,1,.36,1)}
.sheet b{font-family:var(--display);font-size:22px}
.sheet p{margin:0 0 6px}
.btn.danger{color:var(--bad);border-color:rgba(194,65,43,.35)}
@keyframes sheet-up{from{transform:translateY(100%)}}
.ph-bar{grid-row:1}.timebar{grid-row:2}.ph-main{grid-row:3}
.avatar-pick{grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
.avatar-pick button{font-size:22px;border-radius:12px;border-width:1.5px}
.join-form{gap:12px}
.team-pick button{padding:14px 8px}

.ph-main>.fit-box{display:flex;flex-direction:column;min-height:100%}
.ph-main .ph-inner{flex:1;min-height:0}
/* ===== الدفعة ٤ ===== */
.q-top{display:flex;justify-content:space-between;align-items:center}
.hush{font-size:22px}
.mood{display:inline-block;margin-top:8px;padding:6px 16px;border-radius:99px;font-weight:700}
.mood.silent{background:var(--ink);color:var(--shell)}.mood.talk{background:var(--saffron);color:var(--ink)}
.clues{display:grid;gap:8px}
.clue{display:grid;gap:2px;padding:12px 14px;border-radius:16px;color:var(--shell);animation:pop-in .45s cubic-bezier(.34,1.56,.64,1) both}
.clue.a{background:var(--sea)}.clue.b{background:var(--henna)}
.clue small{opacity:.85;font-size:12px}.clue b{font-size:18px}
.ans.wrongpick{opacity:.35;text-decoration:line-through}
.paused-note{margin:0;padding:10px;border-radius:12px;background:var(--henna-soft);color:var(--bad);text-align:center;font-weight:700}
/* ===== الدفعة ٥ ===== */
.love-form{display:grid;gap:10px}
.love-q{display:grid;gap:6px}.love-q b{font-size:15px}
.love-q .seg{grid-auto-flow:row;grid-template-columns:1fr 1fr}

.acc-note{margin:0;font-size:13px;color:var(--muted);text-align:center}
.acc-note a{color:var(--sea);font-weight:600;text-decoration:none}