/* «كوّن تشكيلتك» — mobile-first, RTL. Palette & fonts copied from the platform (src/style.css). */
:root{
  --bg1:#0b1530; --bg2:#13254f; --card:#16264d; --card2:#1c2f5e; --line:rgba(255,255,255,.09);
  --gold:#f5c542; --gold2:#ffdd7a; --teal:#2ec4b6; --red:#ef476f; --green:#22c55e; --text:#eef2ff; --muted:#a8b3d6;
  --me:#2ec4b6; --bot:#ff8a3d; --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --pitch1:#1f6f45; --pitch2:#1a613c;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{font-family:"Cairo","Noto Sans Arabic","Segoe UI","Tahoma",system-ui,sans-serif;color:var(--text);font-size:16px;line-height:1.45;
  background:radial-gradient(1200px 600px at 85% -10%,#2a3f86 0%,transparent 60%),radial-gradient(900px 500px at -10% 110%,#3b1f5e 0%,transparent 55%),linear-gradient(160deg,var(--bg1),var(--bg2));
  background-attachment:fixed;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;
  background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 22px),repeating-linear-gradient(-45deg,#fff 0 2px,transparent 2px 22px)}
button,input{font-family:inherit;color:inherit}
button{cursor:pointer}
.tb{max-width:560px;margin:0 auto;padding:0 12px 28px;position:relative}
.screen.enter{animation:fade .25s ease}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;display:none}

/* top bar */
.tb-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:8px 0;background:rgba(8,15,36,.82);backdrop-filter:blur(8px);margin:0 -12px 10px;padding-inline:12px;border-bottom:1px solid var(--line)}
.icon-btn{min-width:46px;min-height:46px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.06);font-size:20px;display:inline-flex;align-items:center;justify-content:center}
.tb-score{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}
.tb-side{display:flex;flex-direction:column;align-items:center;min-width:0;max-width:40%}
.tb-side b{font-size:22px;line-height:1}
.tb-side span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tb-side.p0 b{color:var(--me)} .tb-side.p1 b{color:var(--bot)} .tb-side.p2 b{color:#b794f6} .tb-side.p3 b{color:#f78fb3}
.tb-mid{text-align:center;font-size:12px;color:var(--muted)} .tb-mid b{display:block;color:var(--text);font-size:15px}

/* setup */
.hero{text-align:center;padding:18px 6px 6px}
.hero .logo{font-size:52px;line-height:1}
.hero h1{margin:4px 0 0;font-size:34px;font-weight:900;background:linear-gradient(90deg,var(--gold2),var(--gold),#ff9f43);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:4px 0 0;color:var(--muted)}
.card{background:linear-gradient(180deg,rgba(28,47,94,.92),rgba(18,31,64,.92));border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);margin-top:12px}
.card h2{margin:0 0 10px;font-size:17px;display:flex;align-items:center;gap:8px}
.seg{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
.seg.seg2{grid-template-columns:1fr 1fr}
.opt{min-height:52px;padding:8px 6px;border-radius:14px;border:2px solid var(--line);background:rgba(255,255,255,.04);font-size:16px;font-weight:800;line-height:1.25}
.opt small{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.opt.sel{border-color:var(--gold);background:rgba(245,197,66,.13);box-shadow:0 0 0 3px rgba(245,197,66,.12)}
.formation{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px}
.mini-pitch{width:64px;height:78px;border-radius:8px;background:repeating-linear-gradient(0deg,var(--pitch1) 0 13px,var(--pitch2) 13px 26px);border:1px solid rgba(255,255,255,.25);display:flex;flex-direction:column-reverse;justify-content:space-around;padding:3px 0}
.mini-pitch i{display:flex;justify-content:space-around}
.mini-pitch i::before{content:none}
.mini-pitch u{width:8px;height:8px;border-radius:50%;background:#fff;display:block}
.names{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.field{width:100%;min-height:50px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(4,10,28,.6);padding:10px 12px;font-size:17px}
.field:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,197,66,.2)}
.rules{color:#dbe3ff;font-size:14.5px;margin:0;padding-inline-start:20px}
.rules li{margin:4px 0}
.cta{width:100%;min-height:58px;margin-top:14px;border:none;border-radius:18px;font-size:22px;font-weight:900;color:#1a1300;background:linear-gradient(90deg,var(--gold2),var(--gold));box-shadow:0 8px 24px rgba(245,197,66,.35)}
.cta:active{transform:scale(.98)}
.btn{min-height:50px;border:none;border-radius:14px;padding:10px 14px;font-size:17px;font-weight:900}
.btn.primary{background:linear-gradient(90deg,var(--gold2),var(--gold));color:#231800}
.btn.ghost{background:rgba(255,255,255,.08);border:1px solid var(--line)}
.btn.danger{background:rgba(239,71,111,.16);border:1px solid rgba(239,71,111,.5);color:#ffd0db}
.row{display:flex;gap:8px}
.row>.btn{flex:1}

/* draft */
.turn{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;font-weight:900;font-size:17px;border:2px solid transparent}
.turn.p0{background:rgba(46,196,182,.14);border-color:rgba(46,196,182,.6)}
.turn.p1{background:rgba(255,138,61,.14);border-color:rgba(255,138,61,.6)}
.turn.p2{background:rgba(183,148,246,.14);border-color:rgba(183,148,246,.6)}
.turn.p3{background:rgba(247,143,179,.14);border-color:rgba(247,143,179,.6)}
.turn .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timer{font-variant-numeric:tabular-nums;font-size:20px;min-width:54px;text-align:center}
.timer.low{color:var(--red);animation:pulse .8s infinite}
.bar{height:7px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:8px}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--gold));border-radius:9px;transition:width .25s linear}
.cond{margin-top:10px;text-align:center;padding:16px 12px;border-radius:20px;background:linear-gradient(160deg,#fff7e0,#ffe7a3);color:#2a1d00;box-shadow:var(--shadow);animation:pop .25s ease}
.cond .slotname{display:inline-block;font-size:14px;font-weight:900;background:#2a1d00;color:var(--gold2);padding:2px 12px;border-radius:999px}
.cond .text{font-size:25px;font-weight:900;line-height:1.35;margin-top:6px}
.cond .meta{font-size:13px;opacity:.7;margin-top:2px}
.answer{position:relative;margin-top:10px}
.answer .field{min-height:58px;font-size:20px;font-weight:700;padding-inline-end:52px}
.answer .clear{position:absolute;inset-inline-end:6px;top:6px;width:46px;height:46px;border:none;background:transparent;font-size:22px;color:var(--muted)}
.sugg{list-style:none;margin:6px 0 0;padding:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0f1b3c;box-shadow:var(--shadow)}
.sugg li{border-bottom:1px solid var(--line)}
.sugg li:last-child{border-bottom:none}
.sugg button{width:100%;min-height:60px;display:flex;align-items:center;gap:10px;padding:8px 12px;background:transparent;border:none;text-align:start}
.sugg button:active,.sugg button.hl{background:rgba(245,197,66,.14)}
.sugg .av{flex:0 0 42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;background:linear-gradient(135deg,#ff9f43,#f5c542);color:#2a1d00;font-size:18px}
.sugg .nm{flex:1;min-width:0}
.sugg .nm b{display:block;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sugg .nm small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sugg .used{opacity:.45}
.sugg .used .tag{font-size:12px;background:rgba(255,255,255,.12);padding:2px 8px;border-radius:999px}
.hint{color:var(--muted);font-size:13.5px;text-align:center;margin:8px 0 0}
.hint.err{color:#ffd0db;background:rgba(239,71,111,.14);border:1px solid rgba(239,71,111,.45);border-radius:12px;padding:8px 10px;font-size:15px;font-weight:800}
.actions{margin-top:10px}
.botthink{margin-top:10px;text-align:center;padding:18px;border-radius:16px;background:rgba(255,138,61,.08);border:1px dashed rgba(255,138,61,.5);font-weight:800}
.botthink .dots::after{content:"…";animation:pulse 1s infinite;display:inline-block}

/* pitch */
.tabs{display:flex;gap:6px;margin-top:14px}
.tab{flex:1;min-height:46px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.tab.sel{background:rgba(245,197,66,.14);border-color:var(--gold)}
.pitch{margin-top:8px;border-radius:18px;padding:10px 4px;background:repeating-linear-gradient(0deg,var(--pitch1) 0 38px,var(--pitch2) 38px 76px);border:2px solid rgba(255,255,255,.3);position:relative;display:flex;flex-direction:column;gap:8px}
.pitch::before{content:"";position:absolute;left:50%;top:50%;width:84px;height:84px;border:2px solid rgba(255,255,255,.22);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.prow{display:flex;justify-content:space-around;gap:4px;position:relative}
.chipx{flex:1 1 0;max-width:96px;min-width:0;min-height:56px;border-radius:12px;border:1.5px solid rgba(255,255,255,.35);background:rgba(4,12,32,.62);padding:4px 3px;text-align:center;font-size:12px;line-height:1.2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.chipx .s{font-size:11px;color:var(--gold2);font-weight:800}
.chipx .n{font-weight:900;font-size:12.5px;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.chipx.ok{background:rgba(46,196,182,.3);border-color:var(--teal)}
.chipx.p1.ok{background:rgba(255,138,61,.3);border-color:var(--bot)}
.chipx.burn{background:rgba(239,71,111,.25);border-color:var(--red)}
.chipx.burn .n{text-decoration:line-through;opacity:.85}
.chipx.cur{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,197,66,.4);animation:glow 1.4s infinite}

/* toast & overlays */
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(16px);width:min(92vw,520px);padding:12px 14px;border-radius:16px;font-weight:800;font-size:16px;box-shadow:var(--shadow);opacity:0;transition:.25s;z-index:60;pointer-events:none;text-align:center;background:#101c3d;border:1px solid var(--line)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{background:#3a1222;border-color:var(--red)} .toast.good{background:#0f3a33;border-color:var(--teal)}
.overlay{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(3,8,22,.6);backdrop-filter:blur(3px);animation:fade .2s}
.goalpop{text-align:center;padding:22px 26px;border-radius:24px;background:linear-gradient(160deg,#fff7e0,#ffd45c);color:#2a1d00;box-shadow:0 20px 50px rgba(0,0,0,.5);animation:tada .6s ease;max-width:86vw}
.goalpop .big{font-size:44px;font-weight:900;line-height:1.1}
.goalpop .who{font-size:21px;font-weight:900;margin-top:4px}
.goalpop .sc{font-size:17px;margin-top:2px}

/* pre-match & reveal */
.vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;text-align:center}
.vs .nm{font-weight:900;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs .nm.p0{color:var(--me)} .vs .nm.p1{color:var(--bot)}
.sbar{margin:10px 0}
.sbar .lbl{display:flex;justify-content:space-between;font-size:14px;font-weight:800}
.sbar .lbl span{color:var(--muted)}
.sbar .two{display:flex;gap:4px;margin-top:4px;direction:rtl}
.sbar .two i{display:block;height:12px;border-radius:8px}
.sbar .a{background:var(--me)} .sbar .b{background:var(--bot)}
.winp{display:flex;height:46px;border-radius:14px;overflow:hidden;margin-top:6px;font-weight:900;font-size:15px}
.winp div{display:flex;align-items:center;justify-content:center;min-width:0;white-space:nowrap;overflow:hidden}
.winp .a{background:var(--me);color:#032b27} .winp .d{background:#6b7aa8} .winp .b{background:var(--bot);color:#2b1300}
.legend{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-top:4px}
table.rev{width:100%;border-collapse:collapse;font-size:14px}
table.rev th,table.rev td{padding:7px 4px;border-bottom:1px solid var(--line);text-align:center}
table.rev td.nm{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.rev tr.tot td{font-weight:900;font-size:16px;color:var(--gold2)}
.star{color:var(--gold)}

/* match */
.ticker{position:sticky;top:64px;z-index:15;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;padding:10px;border-radius:18px;background:#081029;border:1px solid var(--line);box-shadow:var(--shadow)}
.ticker .t{font-weight:900;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.ticker .t.p0{color:var(--me)} .ticker .t.p1{color:var(--bot)}
.ticker .sc{font-size:34px;font-weight:900;font-variant-numeric:tabular-nums;text-align:center;min-width:96px}
.ticker .min{grid-column:1/-1;text-align:center;font-size:14px;color:var(--gold2);font-weight:800}
.ticker .prog{grid-column:1/-1;height:5px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.ticker .prog i{display:block;height:100%;background:var(--gold);width:0}
.feed{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column-reverse;gap:6px}
.feed li{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:15.5px;animation:slidein .25s ease}
.feed li.goal{background:rgba(245,197,66,.16);border-color:var(--gold);font-weight:900}
.feed li.goal.p0{border-inline-start:5px solid var(--me)} .feed li.goal.p1{border-inline-start:5px solid var(--bot)}
.feed li.big{background:rgba(46,196,182,.12);font-weight:900}

/* result */
.result-hero{text-align:center;padding:16px 8px}
.result-hero .emo{font-size:60px;line-height:1;animation:tada .7s ease}
.result-hero h2{margin:6px 0 0;font-size:28px;font-weight:900;color:var(--gold2)}
.result-hero .score{font-size:40px;font-weight:900;margin-top:4px;font-variant-numeric:tabular-nums}
.result-hero .pens{color:var(--muted);font-weight:800}
.kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.kv:last-child{border-bottom:none}
.kv span{color:var(--muted)}
.scorers{font-size:14.5px;margin:6px 0 0;padding:0;list-style:none}
.scorers li{padding:3px 0}

@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes slidein{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes tada{0%{transform:scale(.3) rotate(-10deg)}50%{transform:scale(1.15) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(245,197,66,.55)}50%{box-shadow:0 0 0 6px rgba(245,197,66,0)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.shake{animation:shake .4s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.era-chip{color:#fff;font-weight:900}
/* 📱 موبايل واحد: «🤖 أوتو» + «✋ رجّعني» كبير */
.tb-badge{display:inline-block;background:rgba(245,197,66,.2);border:1px solid #f5c542;color:#f5c542;border-radius:999px;padding:0 8px;font-size:12px;margin-inline-start:4px}
.tb-backbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:rgba(245,197,66,.14);border:1px solid rgba(245,197,66,.55);border-radius:14px;padding:8px 10px;margin:8px 0;font-weight:800;font-size:14px}
.tb-backbar>span{flex:1 1 100%}
.tb-backbar .tb-back{flex:1 1 auto;min-height:52px;font-size:16px}