:root{
  --bg:#050a0c;--bg2:#0d1419;--bg3:rgba(10,18,24,.97);
  --b:rgba(0,210,105,.22);--b2:rgba(0,210,105,.07);
  --ac:#00d870;--ac2:#00a050;--ac3:#005c28;--ab:rgba(0,210,105,.08);
  --tx:#c5ffd8;--tx2:rgba(197,255,216,.52);--tx3:rgba(197,255,216,.27);
  --rd:#ff2855;--yl:#ffca00;--bl:#5085ff;
  --gw:0 0 14px rgba(0,210,105,.18);--gw2:0 0 26px rgba(0,210,105,.36);
  --r:6px;--tr:.18s ease;
  --card-w:88px;--card-h:112px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--tx);direction:rtl;min-height:100vh;overflow-x:hidden;transition:background .5s,color .4s}
button,input,select,textarea{font-family:'Cairo',sans-serif}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--ac3);border-radius:3px}
#rain{position:fixed;inset:0;z-index:0;opacity:.08;pointer-events:none;transition:opacity .8s}
.scanlines{position:fixed;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0,rgba(0,0,0,.04) 1px,transparent 1px,transparent 3px);transition:opacity .5s}
#toast{position:fixed;top:10px;left:50%;transform:translateX(-50%);background:var(--bg3);border:1px solid var(--ac);color:var(--ac);padding:7px 16px;font-size:.82rem;z-index:3000;border-radius:var(--r);display:none;max-width:90vw;text-align:center;pointer-events:none;white-space:nowrap;box-shadow:var(--gw2)}
#toast.err{border-color:var(--rd);color:var(--rd)}
#app{position:relative;z-index:1;min-height:100vh}

.screen{display:none;min-height:100vh;padding:24px 16px 40px}
.screen.on{display:flex;flex-direction:column;align-items:center;gap:10px}
.screen:not(.on){display:none}

.panel{background:var(--bg3);border:1px solid var(--b);border-radius:var(--r);padding:16px 14px;transition:background .4s,border-color .4s}
.phd{font-size:.68rem;letter-spacing:2px;color:var(--tx3);padding:5px 11px 4px;border-bottom:1px solid var(--b2);display:flex;align-items:center;gap:5px;flex-shrink:0;position:relative;margin:-16px -14px 10px;border-radius:var(--r) var(--r) 0 0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 22px;border:1px solid var(--ac);background:transparent;color:var(--ac);font-size:1rem;font-weight:700;cursor:pointer;transition:var(--tr);border-radius:var(--r);white-space:nowrap;line-height:1.2}
.btn:hover,.btn:focus-visible{background:var(--ac);color:var(--bg);box-shadow:var(--gw2);outline:none}
.btn:disabled{opacity:.3;cursor:not-allowed;pointer-events:none}
.btn-red{border-color:var(--rd);color:var(--rd)}.btn-red:hover{background:var(--rd);color:#fff}
.btn-yel{border-color:var(--yl);color:var(--yl)}.btn-yel:hover{background:var(--yl);color:#000}
.btn-ghost{border-color:var(--b);color:var(--tx3)}.btn-ghost:hover{background:var(--ab);color:var(--ac);box-shadow:none}
.btn-sm{padding:6px 13px;font-size:.88rem}.btn-full{width:100%}

.inp{width:100%;background:var(--bg2);border:1px solid var(--b);color:var(--tx);padding:11px 14px;font-size:1rem;outline:none;border-radius:var(--r);direction:rtl;transition:var(--tr)}
.inp::placeholder{color:var(--tx3)}.inp:focus{border-color:var(--ac);box-shadow:var(--gw)}

.blink{animation:blink 1.1s step-end infinite}@keyframes blink{50%{opacity:0}}
.glow{text-shadow:0 0 14px var(--ac),0 0 28px var(--ac)}
.glow-r{text-shadow:0 0 14px var(--rd),0 0 26px var(--rd)}

.sep{height:1px;background:linear-gradient(90deg,transparent,var(--b),transparent);margin:5px 0}

.brand{text-align:center;margin:18px 0 24px}
.brand-cards{display:flex;justify-content:center;gap:-6px;margin-bottom:14px}
.mini-card{width:46px;height:64px;background:var(--bg2);border-radius:var(--r);display:flex;align-items:center;justify-content:center;box-shadow:var(--gw);border:1px solid var(--b);margin:0 -8px;padding:8px}
.mini-card img{width:100%;height:100%;object-fit:contain}
.mini-card:nth-child(1){transform:rotate(-14deg) translateY(6px)}
.mini-card:nth-child(2){transform:rotate(-5deg)}
.mini-card:nth-child(3){transform:rotate(5deg)}
.mini-card:nth-child(4){transform:rotate(14deg) translateY(6px)}
.title{font-size:clamp(2.2rem,8.5vw,4.4rem);font-weight:900;color:var(--tx);letter-spacing:4px;line-height:1;text-align:center}
.title .title-pre{font-size:.5em;vertical-align:middle}
.title .logo-nf{color:var(--ac);animation:flicker 7s infinite;text-shadow:0 0 14px var(--ac),0 0 28px var(--ac)}
.title .logo-nf em{color:var(--rd);font-style:normal}
@keyframes flicker{0%,93%,100%{opacity:1}94%,98%{opacity:.2}96%{opacity:.88}}
.subtitle{font-size:clamp(.7rem,2.2vw,.86rem);color:var(--tx2);letter-spacing:3px;text-align:center}
.subtitle .sub-ver{color:var(--ac);font-weight:800}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>span{font-size:14px;color:var(--tx2);font-weight:500}
.field input,.field select{font-family:'Cairo',sans-serif;font-size:16px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--b);background:var(--bg2);color:var(--tx);outline:none;transition:var(--tr);width:100%}
.field input::placeholder{color:var(--tx3)}
.field input:focus,.field select:focus{border-color:var(--ac);box-shadow:var(--gw)}

.divider{display:flex;align-items:center;gap:12px;margin:18px 0 14px;font-size:.7rem;color:var(--tx3);position:relative}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--b),transparent)}

.hint{margin-top:14px;font-size:14px;color:var(--tx2);text-align:center;min-height:18px}
.join-loading{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:8px 12px;background:var(--bg3);border-radius:var(--r);border:1px solid var(--ac);color:var(--tx);font-size:14px;font-weight:700}
.spinner{width:18px;height:18px;border:2px solid var(--b2);border-top-color:var(--ac);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.footer-note{margin-top:22px;color:var(--tx3);font-size:13px}

.lobby-actions{display:flex;gap:8px;width:100%;max-width:420px}
.rbanner{text-align:center;padding:16px 12px 11px}
.rlbl{font-size:.66rem;letter-spacing:3px;color:var(--tx3);margin-bottom:5px}
.rcode{font-size:clamp(1.7rem,7vw,3rem);font-weight:900;color:var(--ac);animation:flicker 9s infinite;word-break:break-all}
.rhint{font-size:.69rem;color:var(--tx3);margin-top:6px}

.seats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:6px;padding:8px}
.sc{padding:9px 7px;text-align:center;position:relative;border-radius:var(--r);border:1px solid var(--b2)}
.sc .sn{position:absolute;top:3px;right:5px;font-size:.55rem;color:var(--tx3)}
.sc .sv{font-size:.83rem;font-weight:700;margin-top:3px;color:var(--tx)}
.sc .sh{font-size:.61rem;color:var(--tx3);margin-top:1px}
.sc.is-host{border-color:var(--yl)!important}
.sc.is-me{border-color:var(--ac)!important;box-shadow:var(--gw)}
.sc.is-spectator{opacity:.55;border-color:var(--tx3)!important}
.sc.is-spectator .sv{font-size:.72rem}
.promote-btn{margin-top:5px;padding:2px 8px!important;font-size:.6rem!important;min-width:0!important}
.kick-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--rd);color:#fff;font-size:10px;font-weight:700;cursor:pointer;margin-right:4px;vertical-align:middle;line-height:1;transition:transform .15s,box-shadow .15s;flex-shrink:0}
.kick-btn:hover{transform:scale(1.25);box-shadow:0 0 10px var(--rd)}

.game-header{width:100%;max-width:1000px;display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:10px}
.game-room{font-size:15px;color:var(--tx2)}
.game-room strong{color:var(--ac);letter-spacing:2px}
.turn-banner{flex:1;text-align:center;font-size:20px;font-weight:800;padding:8px 14px;border-radius:var(--r);background:var(--bg3);border:1px solid var(--b)}
.turn-banner.my-turn{background:var(--ab);border-color:var(--ac);color:var(--ac);box-shadow:var(--gw)}

.opponents{width:100%;max-width:1000px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:8px 0 18px}
.opponent{background:var(--bg3);border:1px solid var(--b2);border-radius:var(--r);padding:10px 12px;min-width:120px;text-align:center;transition:var(--tr);position:relative}
.opponent.active{border-color:var(--ac);box-shadow:var(--gw);transform:translateY(-3px)}
.opponent .op-name{font-weight:700;font-size:15px;margin-bottom:6px;color:var(--tx)}
.opponent .op-cards{display:flex;justify-content:center;overflow-x:auto;max-width:200px;padding:4px 0}
@media(max-width:600px){.opponent .op-cards{max-width:140px}}
@media(max-width:400px){.opponent .op-cards{max-width:100px}}
.opponent .op-cards .mini-back{width:18px;height:26px;border-radius:4px;margin:0 -5px;background:repeating-linear-gradient(45deg,#1a4a2a 0 6px,#0e331e 6px 12px);border:1px solid var(--b)}
.opp-toggle{position:absolute;top:-8px;left:-8px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;cursor:pointer;border:2px solid var(--bg3);z-index:5;transition:transform .15s;line-height:1;padding:0}
.opp-toggle:hover{transform:scale(1.25)}
.opp-toggle.demote{background:var(--rd);color:#fff}
.opp-toggle.promote{background:var(--ac);color:var(--bg)}
.opponent .op-count{font-size:13px;color:var(--tx3);margin-top:6px;font-weight:700}
.opponent.targetable{cursor:pointer;border-color:var(--rd);box-shadow:0 0 10px rgba(255,40,85,.4)}
@media(hover:hover){.opponent.targetable .op-cards .mini-back{cursor:pointer;transition:var(--tr)}.opponent.targetable .op-cards .mini-back:hover{transform:translateY(-10px) scale(1.15);box-shadow:0 0 12px var(--rd);z-index:3;position:relative}}
.opponent.targetable:active{transform:scale(0.96);box-shadow:0 0 24px var(--rd)}

.eliminate-bar{display:none;width:100%;max-width:1000px;align-items:center;justify-content:center;gap:14px;background:rgba(255,40,85,.12);border:1px solid var(--rd);border-radius:var(--r);padding:10px 16px;margin-bottom:12px;font-weight:700;color:var(--rd)}
.eliminate-bar.show{display:flex}
.eliminate-bar .btn{margin-top:0}

.table-center{display:flex;align-items:flex-start;gap:40px;margin:10px 0 24px;min-height:160px}
.pile-wrap{display:flex;flex-direction:column;align-items:center;gap:26px}
.pile-label{font-size:13px;color:var(--tx3)}
.deck-pile{position:relative;cursor:pointer;transition:transform .15s}
.deck-pile.drawable .card{box-shadow:0 0 14px var(--ac)}
.deck-pile.drawable:hover{transform:scale(1.08)}
.deck-pile:not(.drawable){cursor:default;opacity:.6}
.deck-pile:not(.drawable):hover{transform:none}
.deck-pile .deck-count{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);background:var(--ac);color:var(--bg);font-weight:800;font-size:13px;padding:3px 10px;border-radius:20px}
.discard-pile{width:var(--card-w);height:var(--card-h);display:flex;align-items:center;justify-content:center}
.discard-pile .empty-pile{width:100%;height:100%;border:2px dashed var(--b);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--tx3);font-size:14px}
.discard-pile .card.new-card{animation:dealIn .35s ease}

.card{width:var(--card-w);height:var(--card-h);border-radius:var(--r);position:relative;user-select:none;box-shadow:var(--gw)}
.card.up{background:var(--bg2);color:var(--tx);border:1px solid var(--b);display:flex;flex-direction:column;align-items:center;padding:6px 4px 5px;overflow:hidden}
.card.up .card-img-wrap{width:100%;display:flex;justify-content:center;align-items:center;flex-shrink:0}
.card.up .card-img{width:32px;height:auto;margin-bottom:2px}
.card.up .card-cname{font-size:.7rem;font-weight:800;color:var(--ac);line-height:1.2;text-align:center;margin-bottom:8px;flex-shrink:0}
.card.up .card-cdesc-wrap{width:100%;border:1px solid var(--b2);border-radius:4px;padding:2px 3px;margin-top:1px;flex-shrink:0;cursor:pointer}
.card.up .card-cdesc-wrap:hover{border-color:var(--ac)}
.card.up .card-cdesc{font-size:.48rem;color:var(--tx2);line-height:1.3;text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}

.card.down{background:var(--bg2);border:1px solid var(--b);padding:4px}
.card-back{width:100%;height:100%;border-radius:5px;background:repeating-linear-gradient(45deg,#0a2e1e 0 6px,#0d3d28 6px 12px);position:relative;overflow:hidden;border:1px solid var(--b)}
.card-back::after{content:"";position:absolute;inset:0;background:url('https://nofakya18.com/images/nofakya18.svg') center/44px 44px no-repeat;opacity:.35}

.my-area{width:100%;max-width:1000px;margin-top:auto}
.my-name{text-align:center;font-weight:800;color:var(--ac);font-size:18px;margin-bottom:4px}
.hand-hint{text-align:center;font-size:14px;color:var(--tx2);min-height:18px;margin-bottom:6px}
.my-hand{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:var(--card-h);padding:10px;background:var(--bg3);border-radius:var(--r);border:1px solid var(--b2)}
.my-hand .card{transition:var(--tr)}
@media(hover:hover){.my-hand .card:hover{transform:translateY(-8px)}}
.my-hand .card.new-card{animation:dealIn .4s ease}
.my-hand.can-discard .card{cursor:pointer;box-shadow:0 0 0 2px var(--ac),var(--gw)}
@media(hover:hover){.my-hand.can-discard .card:hover{box-shadow:0 0 0 3px var(--ac),var(--gw2);transform:translateY(-12px)}.my-hand.can-discard .card::after{content:"ارمِها";position:absolute;top:-22px;left:50%;transform:translateX(-50%);background:var(--ac);color:var(--bg);font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;opacity:0;transition:var(--tr);white-space:nowrap}.my-hand.can-discard .card:hover::after{opacity:1}}
.my-hand.can-discard .card:active{transform:translateY(-10px) scale(0.97)}

.actions{display:flex;gap:12px;justify-content:center;margin-top:16px}
.actions .btn{width:auto;min-width:180px}

.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:300;align-items:center;justify-content:center;padding:12px}
.overlay.on{display:flex}
.modal{background:var(--bg3);border:1px solid var(--b);box-shadow:var(--gw2);border-radius:var(--r);padding:18px 15px;max-width:480px;width:100%;display:flex;flex-direction:column;gap:10px;animation:su .2s ease;max-height:90vh;overflow-y:auto}
@keyframes su{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.modal h2{font-size:1.04rem;color:var(--ac);letter-spacing:2px;text-align:center}
.modal .msub{font-size:.75rem;color:var(--tx2);line-height:1.65;text-align:center}

.sbox{text-align:center;padding:12px;background:var(--ab);border:1px dashed var(--b);border-radius:var(--r);color:var(--tx2);font-size:.8rem;line-height:1.7}
.results-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.results-list li{background:var(--bg2);border:1px solid var(--b2);border-radius:var(--r);padding:12px 16px;display:flex;justify-content:space-between;font-size:16px}
.results-list li.winner{background:var(--ab);border-color:var(--ac);color:var(--ac);font-weight:800}
.ten-preview{display:flex;justify-content:center;margin-bottom:14px}
.ten-preview .card{transform:rotate(-4deg)}

.ptag{font-size:clamp(.8rem,2.6vw,.98rem);font-weight:700}

@keyframes dealIn{from{transform:translateY(-40px) scale(.7);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.card-preview-wrap{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:20px}
.card-preview-wrap .card{width:clamp(180px,40vw,320px);height:auto;aspect-ratio:88/112;padding:clamp(16px,3.5vw,28px) clamp(10px,2.5vw,22px);animation:zoomIn .25s ease;position:relative;overflow:visible}
.card-preview-wrap .card .card-img-wrap{width:100%}
.card-preview-wrap .card .card-img{width:clamp(50px,12vw,100px)}
.card-preview-wrap .card .card-cname{font-size:clamp(1.2rem,4vw,2.2rem);width:100%;margin-bottom:24px}
.card-preview-wrap .card .card-cdesc-wrap{border-width:2px;width:100%}
.card-preview-wrap .card .card-cdesc{font-size:clamp(.9rem,2.6vw,1.4rem);-webkit-line-clamp:unset;max-height:none;width:100%}
.card-preview-close{position:absolute;top:4px;right:4px;width:30px;height:30px;border-radius:50%;background:var(--rd);border:2px solid var(--bg);color:#fff;font-size:16px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,.5);transition:transform .15s}
.card-preview-close:hover{transform:scale(1.2)}
@keyframes zoomIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

@media(max-width:768px){
  ...
  .opponent .op-cards .mini-back{width:15px;height:22px;margin:0 -5px}
  .actions .btn{min-width:110px;font-size:14px}
}
@media(max-width:600px){
  :root{--card-w:72px;--card-h:94px}
  .title{font-size:38px}
  .subtitle{font-size:14px}
  .card.up{padding:4px 3px 3px}
  .card.up .card-img{width:26px}
  .card.up .card-cname{font-size:.6rem;margin-bottom:4px}
  .card.up .card-cdesc-wrap{padding:1px;margin-top:0}
  .card.up .card-cdesc{font-size:.48rem}
  .table-center{gap:16px;margin:6px 0 14px;min-height:120px}
  .pile-wrap{gap:18px}
  .pile-label{font-size:11px}
  .deck-pile .deck-count{font-size:11px;padding:2px 8px}
  .my-hand{gap:5px;padding:8px}
  .my-hand .card{margin:0 -2px}
  .hand-hint{font-size:13px}
  .actions .btn{min-width:100px;font-size:13px;padding:11px 12px}
  .actions{gap:8px}
  .rcode{font-size:clamp(1.4rem,6vw,2.2rem);letter-spacing:6px}
  .screen{padding:16px 10px 30px}
  .modal{padding:22px 16px;margin:0 8px}
  .modal h2{font-size:22px}
  .opponent{min-width:80px}
  .eliminate-bar{font-size:14px;padding:8px 12px;gap:8px}
  .panel{padding:16px}
  .brand .title{font-size:40px}
  .brand{margin:10px 0 16px}
  .mini-card{width:36px;height:50px;padding:6px}
  .brand-cards{margin-bottom:10px}
  .my-hand .card.new-card{animation:none}
  /* تكبير البطاقة عند الضغط عليها */
  .card-preview-wrap .card{width:clamp(260px,70vw,400px);padding:clamp(22px,5vw,36px) clamp(14px,4vw,28px)}
  .card-preview-wrap .card .card-img{width:clamp(80px,18vw,140px)}
  .card-preview-wrap .card .card-cname{font-size:clamp(1.8rem,6vw,3rem);margin-bottom:18px}
  .card-preview-wrap .card .card-cdesc{font-size:clamp(1.2rem,4vw,2rem)}
}
@media(max-width:400px){
  :root{--card-w:62px;--card-h:80px}
  .title{font-size:clamp(1.8rem,7vw,2.8rem)}
  .turn-banner{font-size:14px;padding:6px 8px}
  .game-room{font-size:11px}
  .card.up{padding:3px 2px 2px}
  .card.up .card-img{width:22px}
  .card.up .card-cname{font-size:.52rem;margin-bottom:2px}
  .card.up .card-cdesc-wrap{padding:0 1px;margin-top:0}
  .card.up .card-cdesc{font-size:.48rem}
  .opponent{min-width:60px;padding:6px 4px}
  .opponent .op-name{font-size:11px}
  .opponent .op-cards .mini-back{width:13px;height:18px;margin:0 -4px}
  .opponent .op-count{font-size:11px}
  .actions .btn{min-width:80px;font-size:12px;padding:9px 10px}
  .my-hand{gap:4px;padding:6px}
  .my-hand .card{margin:0 -4px}
  .table-center{gap:10px;min-height:100px}
  .rcode{font-size:clamp(1.2rem,5vw,1.8rem);letter-spacing:4px}
  .panel{padding:14px}
  .eliminate-bar{font-size:12px;padding:6px 10px}
  .eliminate-bar .btn{font-size:12px;padding:5px 10px}
  .modal{padding:18px 14px;margin:0 6px}
  .modal h2{font-size:18px}
  /* تكبير البطاقة عند الضغط عليها */
  .card-preview-wrap .card{width:clamp(220px,85vw,340px);padding:clamp(18px,4vw,28px) clamp(12px,3.5vw,22px)}
  .card-preview-wrap .card .card-img{width:clamp(60px,22vw,120px)}
  .card-preview-wrap .card .card-cname{font-size:clamp(1.4rem,7vw,2.6rem);margin-bottom:14px}
  .card-preview-wrap .card .card-cdesc{font-size:clamp(1rem,4.5vw,1.7rem)}
}