[hidden]{display:none!important}
:root{--red:#ef3340;--blue:#2563eb;--green:#16a36a;--yellow:#f5ba20;--ink:#142034;--paper:#fffdf5;--line:#dbe2ea;--shadow:0 20px 55px #07142f28}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 15%,#304c89 0,transparent 22%),radial-gradient(circle at 85% 70%,#762069 0,transparent 28%),linear-gradient(145deg,#0d1730,#17284d 55%,#201336);font:18px/1.6 "Segoe UI",Tahoma,Arial;color:#fff;overflow-x:hidden}button,select{font:inherit}.game-shell{width:min(1200px,calc(100% - 24px));margin:auto;padding:14px 0 35px}header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:6px 0 18px}.home{color:#fff;text-decoration:none;font-weight:800}.brand{font-size:1.8rem;font-weight:1000;letter-spacing:-5px}.brand span{color:var(--red)}.brand b{color:var(--yellow)}.brand em{color:var(--green);font-style:normal}.header-actions{display:flex;gap:8px}.header-actions button,#newGameBtn{border:1px solid #ffffff38;background:#ffffff12;color:#fff;border-radius:12px;padding:8px 13px;cursor:pointer}.start-screen{min-height:78vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px}.start-card{max-width:540px}.eyebrow{color:#f9c84c;font-weight:900}.start-card h1{font-size:clamp(5rem,15vw,10rem);line-height:.8;margin:20px 0;text-shadow:0 8px 0 #0003}.start-card h1 span{color:var(--yellow)}.start-card>p:not(.eyebrow){font-size:1.15em;color:#dce5ff}.start-card label{display:block;font-weight:800;margin:22px 0}.start-card select{display:block;margin-top:7px;width:230px;padding:11px;border:0;border-radius:12px}.main-btn{border:0;border-radius:15px;padding:13px 25px;background:linear-gradient(135deg,var(--yellow),#ff8b2b);color:#201505;font-weight:1000;cursor:pointer;box-shadow:0 10px 25px #0004}.stats{display:flex;gap:20px;margin-top:26px}.stats div{padding:10px 18px;border:1px solid #ffffff2c;border-radius:15px;background:#ffffff0d}.stats b,.stats span{display:block}.stats b{font-size:1.5rem}.stats span{color:#bdc9e4;font-size:.85rem}.fan{height:450px;position:relative}.demo{position:absolute;left:50%;top:50%;width:185px;height:275px;border:9px solid #fff;border-radius:25px;display:grid;place-items:center;font:1000 5rem Arial;box-shadow:var(--shadow);font-style:normal}.demo:nth-child(1){transform:translate(-95%,-48%) rotate(-20deg)}.demo:nth-child(2){transform:translate(-62%,-53%) rotate(-7deg)}.demo:nth-child(3){transform:translate(-28%,-52%) rotate(8deg)}.demo:nth-child(4){transform:translate(5%,-45%) rotate(22deg)}.red{background:var(--red)}.blue{background:var(--blue)}.green{background:var(--green)}.yellow{background:var(--yellow);color:#352b00}.game-board{min-height:86vh}.top-line{display:flex;align-items:center;justify-content:space-between;gap:12px}.player-label{display:flex;align-items:center;gap:10px}.avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:1.5rem}.player-label small,.player-label b{display:block}.player-label small{color:#bfcbea}.turn-status{padding:8px 18px;border-radius:99px;background:var(--yellow);color:#2c2100;font-weight:1000}.turn-status.bot{background:#ffffff15;color:#fff}.bot-hand{height:120px;display:flex;justify-content:center;align-items:center;margin:5px 0 10px}.card-back{width:72px;height:104px;border:5px solid #fff;border-radius:12px;background:repeating-linear-gradient(45deg,#182a55 0 8px,#273e7d 8px 16px);margin-left:-38px;box-shadow:0 5px 10px #0004}.table{position:relative;min-height:330px;border:1px solid #ffffff1f;border-radius:45% / 25%;background:radial-gradient(ellipse,#265b4b,#123329 70%);box-shadow:inset 0 0 60px #0007,0 15px 40px #0003;display:flex;justify-content:center;align-items:center;gap:32px}.pile{width:118px;height:170px;border:7px solid #fff;border-radius:19px;background:repeating-linear-gradient(45deg,#17264e 0 10px,#263f81 10px 20px);color:#fff;box-shadow:8px 8px 0 #0b142a;cursor:pointer}.pile span{font-size:1.45rem;font-weight:1000}.pile small{display:block}.discard{width:118px;height:170px}.active-color{position:absolute;right:6%;display:flex;align-items:center;gap:8px}.active-color span{width:26px;height:26px;border-radius:50%;background:var(--red);border:3px solid #fff}.active-color small{display:block}.message{position:absolute;bottom:20px;background:#071d18aa;border-radius:99px;padding:6px 18px}.player-zone{margin-top:15px}.player-tools{display:flex;justify-content:space-between;align-items:center}.lawn-btn{border:0;border-radius:50%;width:88px;height:88px;background:linear-gradient(135deg,var(--yellow),#ff782b);font-weight:1000;color:#332000;cursor:pointer;box-shadow:0 8px 0 #a84b10}.lawn-btn:disabled{filter:grayscale(1);opacity:.4;cursor:not-allowed}.lawn-btn.ready{animation:pulse .7s infinite alternate}.player-hand{min-height:190px;display:flex;justify-content:center;align-items:end;padding-top:15px}.game-card{position:relative;flex:0 0 104px;height:154px;border:7px solid #fff;border-radius:18px;color:#fff;margin-left:-24px;box-shadow:0 9px 18px #0005;cursor:pointer;transition:.2s;overflow:hidden}.game-card:hover,.game-card.playable:focus{transform:translateY(-22px) rotate(0)!important;z-index:20}.game-card.unplayable{filter:brightness(.65)}.game-card .corner{position:absolute;top:2px;right:7px;font:900 1.15rem Arial}.game-card .center{position:absolute;inset:27px 15px;display:grid;place-items:center;background:#fff;color:inherit;border-radius:50%;transform:rotate(-20deg);font:1000 2.7rem Arial}.game-card .center b{transform:rotate(20deg)}.game-card.wild{background:conic-gradient(var(--red),var(--yellow),var(--green),var(--blue),var(--red))}.game-card.wild .center{color:#111}.overlay{position:fixed;inset:0;background:#071126cc;display:grid;place-items:center;padding:18px;z-index:100}.dialog{position:relative;width:min(520px,100%);background:var(--paper);color:var(--ink);border-radius:25px;padding:28px;text-align:center;box-shadow:var(--shadow)}.dialog h2{font-size:2rem;margin-top:0}.color-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.color-choices button{height:100px;border:6px solid #fff;border-radius:18px;box-shadow:0 4px 15px #0003;cursor:pointer}.color-choices [data-color=red]{background:var(--red)}.color-choices [data-color=blue]{background:var(--blue)}.color-choices [data-color=green]{background:var(--green)}.color-choices [data-color=yellow]{background:var(--yellow)}.close{position:absolute;left:15px;top:10px;border:0;background:transparent;font-size:2rem;cursor:pointer}.rules{text-align:right}.rules li{margin:9px}.end #endIcon{font-size:4rem}@keyframes pulse{to{transform:scale(1.08);box-shadow:0 10px 0 #a84b10,0 0 25px var(--yellow)}}@media(max-width:760px){body{font-size:16px}.start-screen{grid-template-columns:1fr}.fan{display:none}.game-shell{width:min(100% - 12px,1200px)}.table{min-height:270px;border-radius:35px;gap:18px}.pile,.discard{width:92px;height:136px}.game-card{flex-basis:85px;height:128px;margin-left:-30px;border-width:5px}.game-card .center{font-size:2.1rem}.player-hand{justify-content:flex-start;overflow-x:auto;padding-right:25px;padding-bottom:12px}.active-color{right:12px;top:15px}.message{bottom:10px;max-width:90%;text-align:center}.lawn-btn{width:74px;height:74px}.bot-hand{height:95px}.card-back{width:58px;height:84px;margin-left:-34px}.brand{font-size:1.4rem}}

.game-card.red .center{color:var(--red)}.game-card.blue .center{color:var(--blue)}.game-card.green .center{color:var(--green)}.game-card.yellow .center{color:#c88c00}.game-card .corner.bottom{top:auto;right:auto;bottom:2px;left:7px;transform:rotate(180deg)}.game-card.playable{outline:3px solid #fff0;box-shadow:0 9px 18px #0005,0 0 0 2px #ffffff55}.game-card.playable:hover{box-shadow:0 15px 25px #0007,0 0 22px #fff8}.discard .game-card{margin:0;cursor:default;filter:none!important}.discard .game-card:hover{transform:rotate(-2deg)!important}.pile:hover{transform:translateY(-5px)}.pile:after{content:"اسحب";display:block;margin-top:5px;font-size:.75rem;color:#dbe6ff}.table:before{content:"طابق اللون أو الرقم";position:absolute;top:18px;color:#ffffffa8;font-weight:800;letter-spacing:.03em}
.field-card{display:grid;justify-items:center;gap:5px}.field-card>strong{font-size:.8rem;background:#ffffff18;padding:3px 10px;border-radius:99px}.field-card .discard{width:132px;height:190px}.field-card .game-card{width:132px;height:190px;flex-basis:132px}.player-zone{position:relative;z-index:5}.player-hand:empty:after{content:"يتم توزيع البطاقات…";padding:25px;color:#fff}.game-board:not([hidden]){display:block!important}
@media(max-width:760px){.game-board{min-height:calc(100vh - 70px)}.top-line{height:50px}.bot-label .avatar{width:36px;height:36px}.bot-hand{height:62px;margin:0;overflow:hidden}.card-back{width:44px;height:62px;margin-left:-28px;border-width:3px}.table{min-height:230px;margin-top:2px}.field-card .discard{width:96px;height:142px}.field-card .game-card{width:96px;height:142px;flex-basis:96px}.pile{width:96px;height:142px}.player-zone{margin-top:5px}.player-tools{height:58px}.player-tools .avatar{width:38px;height:38px}.lawn-btn{width:58px;height:58px;font-size:.85rem;box-shadow:0 5px 0 #a84b10}.player-hand{height:148px;min-height:148px;padding:10px 8px 6px;overflow-x:auto;overflow-y:hidden;align-items:center;justify-content:flex-start;background:#ffffff0b;border-radius:18px}.game-card{flex-basis:78px;width:78px;height:118px;margin-left:-20px}.game-card:first-child{margin-right:8px}.game-card:hover,.game-card.playable:focus{transform:translateY(-8px)!important}.game-card .center{inset:23px 10px;font-size:1.8rem}.message{font-size:.82rem;bottom:5px}.active-color small{display:none}.table:before{top:7px;font-size:.75rem}}
.discard .game-card.dealt{animation:dealToField .55s cubic-bezier(.2,.9,.25,1.25)}@keyframes dealToField{0%{opacity:0;transform:translateY(90px) rotate(18deg) scale(.65)}70%{opacity:1;transform:translateY(-8px) rotate(-4deg) scale(1.06)}100%{transform:translateY(0) rotate(-2deg) scale(1)}}.message{z-index:8;border:1px solid #ffffff25;box-shadow:0 5px 15px #0004}