/* عدّة الورق — shared look for every card game: felt table, cards, seats, lobby */
:root{--felt:#0f7a4a;--felt2:#095a36;--rail:#3a2414;--gold:#f2c14e;--ink:#1c1c1c;--card-w:58px}
.ck-card{position:relative;display:inline-block;width:var(--cw,var(--card-w));aspect-ratio:5/7;border-radius:calc(var(--cw,var(--card-w))*.11);background:#fff;box-shadow:0 2px 0 #0003,0 4px 10px #0004;user-select:none;-webkit-user-select:none;flex:none;transition:transform .25s,box-shadow .25s,opacity .3s}
.ck-card svg{display:block;width:100%;height:100%}
.ck-card.back{background:none}
.ck-card.hl{box-shadow:0 0 0 3px var(--gold),0 0 18px var(--gold)}
.ck-card.dim{filter:brightness(.55) saturate(.6)}
.ck-card.deal{animation:ckDeal .45s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes ckDeal{from{transform:translate(var(--dx,0),var(--dy,-120px)) rotate(-25deg) scale(.6);opacity:0}}
.ck-card.flip{animation:ckFlip .4s ease both}
@keyframes ckFlip{0%{transform:rotateY(90deg)}100%{transform:none}}
/* lobby */
.ck-lobby{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;padding:14px;width:100%}
.ck-lobby h1{margin:0;font-size:40px;line-height:1.1;color:var(--gold);text-shadow:0 3px 0 #000a}
.ck-lobby .lead{margin:0;color:#d8f3e4;font-size:15px;max-width:340px}
.ck-field{display:flex;flex-direction:column;gap:4px;width:min(330px,100%);text-align:right}
.ck-field label{font-size:13px;color:#bfe6cf;font-weight:800}
.ck-input{width:100%;border:2px solid #ffffff40;border-radius:12px;background:#0006;color:#fff;font:inherit;font-size:17px;padding:9px 12px}
.ck-seg{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.ck-seg button{flex:1;min-width:46px;border:2px solid #ffffff40;border-radius:12px;background:#0005;color:#fff;font:inherit;font-weight:800;font-size:16px;padding:8px 6px;cursor:pointer}
.ck-seg button.on{background:var(--gold);color:#2b1b00;border-color:var(--gold)}
.ck-btn{width:min(330px,100%);border:0;border-radius:16px;padding:13px;font:inherit;font-size:19px;font-weight:800;cursor:pointer;background:linear-gradient(180deg,#ffd76a,#e8a92c);color:#3a2300;box-shadow:0 5px 0 #8a5a10,0 8px 18px #0006}
.ck-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #8a5a10}
.ck-btn.alt{background:linear-gradient(180deg,#ffffff,#d9e4ea);color:#123;box-shadow:0 5px 0 #6b7c88,0 8px 18px #0006}
.ck-btn.ghost{background:#0005;color:#fff;box-shadow:none;border:2px solid #ffffff40;font-size:16px}
.ck-wait{display:flex;flex-direction:column;gap:6px;width:min(330px,100%)}
.ck-wait .p{display:flex;align-items:center;gap:8px;background:#0005;border-radius:12px;padding:8px 10px;color:#fff;font-weight:800}
.ck-wait .p i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#2b1b00;font-style:normal}
.ck-wait .p.empty{opacity:.45}
.ck-code{font-size:30px;letter-spacing:6px;color:var(--gold);font-weight:800;direction:ltr}
.ck-toast{position:fixed;left:50%;top:18%;translate:-50% 0;z-index:60;padding:8px 18px;border-radius:999px;background:#000c;color:#fff;font-weight:800;font-size:17px;pointer-events:none;animation:ckToast 1.8s ease forwards;white-space:nowrap}
@keyframes ckToast{0%{opacity:0;scale:.7}12%{opacity:1;scale:1.05}80%{opacity:1;scale:1}100%{opacity:0}}

/* real cards (owner 2026-10-28) */
.ck-card{background:#fff;overflow:hidden;box-shadow:0 1px 0 #0002,0 3px 8px #0005,0 0 0 .5px #0003}
.ck-card .ck-img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;-webkit-user-drag:none}
.ck-card.back{overflow:visible}