/* تركس — own look: royal burgundy felt, gold crown trims */
:root{--felt:#6d1b45;--felt2:#3b0c26;--rail:#2a1408;--gold:#f2c14e}
*{box-sizing:border-box}
html,body{margin:0;height:100%;color:#fff;font-family:"Baloo Bhaijaan 2",system-ui,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body{background:radial-gradient(circle at 50% 0,#5a1a3e 0,#260818 60%,#14040c 100%)}
.page{position:relative;max-width:560px;margin:0 auto;padding:10px 10px calc(10px + env(safe-area-inset-bottom));height:100dvh;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.topline{display:flex;align-items:center;justify-content:space-between;gap:8px}
.topline .brand-line{margin:0;min-width:0}
.icon{flex:none;width:40px;height:40px;border:2px solid #ffffff40;border-radius:12px;background:#0005;color:#fff;font-size:17px;cursor:pointer}
.screen{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto}
.screen[hidden]{display:none}
#table{overflow:hidden;gap:4px}
.hero-cards{display:flex;justify-content:center;margin-top:4px}
.rules{width:min(330px,100%);text-align:right;background:#0004;border-radius:12px;padding:8px 12px;color:#f3dce8;font-size:14px}
.rules summary{cursor:pointer;font-weight:800}
.ck-lobby .lead{color:#f3dce8}
.bar{display:flex;align-items:center;justify-content:space-between;gap:6px;background:#0006;border:1.5px solid #f2c14e55;border-radius:12px;padding:3px 10px;font-size:13px;font-weight:800}
.bar b{color:var(--gold);font-size:17px}
.felt{position:relative;flex:1;min-height:0}
.felt-in{position:absolute;inset:4% 2%;border-radius:36px;background:radial-gradient(ellipse at 50% 45%,#8e2a5f 0,var(--felt) 45%,var(--felt2) 100%);border:10px solid var(--rail);box-shadow:inset 0 0 0 3px #f2c14e55,inset 0 10px 30px #0007,0 10px 26px #000a}
.seat{position:absolute;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:1px;width:96px;z-index:2}
.seat .av{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:21px;background:linear-gradient(145deg,#4a3350,#22142a);border:3px solid #ffffff55}
.seat.turn .av{border-color:var(--gold);box-shadow:0 0 0 3px #f2c14e66,0 0 16px var(--gold)}
.seat .crown{position:absolute;top:-14px;font-size:16px}
.seat .nm{font-size:11.5px;font-weight:800;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#000a;border-radius:8px;padding:0 6px;margin-top:-6px;position:relative}
.seat .sc{font-size:12px;font-weight:800;direction:ltr}
.seat .sc.neg{color:#ff8a8a}.seat .sc.pos{color:#9cf0b8}
.seat .tags{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;font-size:10.5px}
.seat .tags i{font-style:normal;background:#000a;border-radius:6px;padding:0 4px}
.seat .ring{position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p,1)*360deg),transparent 0);-webkit-mask:radial-gradient(circle,transparent 25px,#000 26px);mask:radial-gradient(circle,transparent 25px,#000 26px)}
.seat .cnt{font-size:10.5px;color:#f3dce8}
.trick{position:absolute;left:50%;top:47%;width:0;height:0;--cw:54px}
.trick[hidden]{display:none}
.trick .ck-card{position:absolute;translate:-50% -50%}
.trick .ck-card.in{animation:tIn .25s ease both}
@keyframes tIn{from{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.7)}}
.trick.gone .ck-card{transition:all .5s ease-in;opacity:0;transform:translate(var(--gx),var(--gy)) scale(.4)}
.trex[hidden]{display:none!important}
.trex{position:absolute;left:50%;top:47%;translate:-50% -50%;display:grid;gap:4px;--cw:30px;direction:ltr}
.trex .row{display:flex;align-items:center;gap:3px;background:#0004;border-radius:8px;padding:2px 6px;min-height:46px}
.trex .row .s{width:18px;font-size:18px;text-align:center}
.trex .row .dots{opacity:.6;font-size:12px;padding:0 2px}
.choose{position:absolute;inset:14% 8%;z-index:6;background:#260818f2;border:2px solid var(--gold);border-radius:20px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;padding:12px;text-align:center}
.choose[hidden]{display:none}
.choose h3{margin:0;font-size:20px;color:var(--gold)}
.choose .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.choose .opts button{border:2px solid #ffffff40;border-radius:14px;background:#0006;color:#fff;font:inherit;font-weight:800;font-size:15px;padding:10px 6px;cursor:pointer;line-height:1.25}
.choose .opts button small{display:block;font-size:11px;color:#f3dce8;font-weight:600}
.choose .opts button:active{background:var(--gold);color:#2b1b00}
.banner{position:absolute;left:50%;top:46%;translate:-50% -50%;z-index:7;background:#000d;border:2px solid var(--gold);border-radius:16px;padding:10px 14px;text-align:center;font-weight:800;min-width:66%;animation:tIn .3s ease}
.banner[hidden]{display:none}
.banner h4{margin:0 0 4px;color:var(--gold);font-size:18px}
.banner .ln{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.banner .ln b.neg{color:#ff8a8a}.banner .ln b.pos{color:#9cf0b8}
.hand{display:flex;justify-content:center;align-items:flex-end;min-height:96px;padding:0 4px;direction:ltr;--cw:min(60px,calc((100vw - 40px) / 6.4))}
.hand .ck-card{margin-left:var(--ov,calc(var(--cw) * -0.52));cursor:pointer}
.hand .ck-card:first-child{margin-left:0}
.hand .ck-card.ok{transform:translateY(-12px)}
.hand .ck-card.no{filter:brightness(.6)}
.hand.myturn .ck-card.ok:hover{transform:translateY(-18px)}
.hint{text-align:center;font-size:13px;font-weight:800;color:#f3dce8;min-height:18px}
.pass{position:absolute;left:50%;bottom:120px;translate:-50% 0;width:auto;z-index:8;padding:10px 20px}
.panel{position:absolute;inset:56px 0 0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;text-align:center;background:#14040cee;backdrop-filter:blur(3px);border-radius:22px}
.panel[hidden]{display:none}
.panel h2{margin:0;font-size:30px;color:var(--gold)}
.over-emo{font-size:62px;line-height:1}
.final{display:flex;flex-direction:column;gap:6px;width:min(320px,100%)}
.final .ln{display:flex;justify-content:space-between;background:#0006;border-radius:12px;padding:8px 12px;font-weight:800}
.final .ln.win{border:2px solid var(--gold)}
@media (max-height:700px){.hand{min-height:80px}.seat .av{width:38px;height:38px;font-size:18px}}