/* كونكان — own look: deep ocean-blue baize, brass trims */
:root{--gold:#f4c95d}
*{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(ellipse at 50% 30%,#1b5e94 0,#0d3b66 50%,#06213b 100%)}
.page{position:relative;max-width:560px;margin:0 auto;padding:10px 8px calc(8px + env(safe-area-inset-bottom));height:100dvh;display:flex;flex-direction:column;gap:5px;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:5px}
.hero-cards{display:flex;justify-content:center;margin-top:4px}
.ck-lobby .lead{color:#d6e9fb}
.rules{width:min(340px,100%);text-align:right;background:#0004;border-radius:12px;padding:8px 12px;color:#d6e9fb;font-size:14px}
.rules summary{cursor:pointer;font-weight:800}
.opps{display:flex;gap:6px;justify-content:center}
.opp{flex:1;max-width:170px;display:flex;align-items:center;gap:6px;background:#0006;border:2px solid #ffffff22;border-radius:14px;padding:4px 8px}
.opp.turn{border-color:var(--gold);box-shadow:0 0 12px #f4c95d88}
.opp .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#ffffff22;font-size:16px;flex:none}
.opp .tx{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.opp .tx b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opp .tx span{font-size:11px;color:#cfe3f7}
.melds{flex:1;min-height:0;overflow:auto;background:#00000026;border:2px solid #ffffff1a;border-radius:16px;padding:6px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;--cw:30px}
.melds:empty::after{content:"الطاولة فارغة… أول واحد ينزل بـ 51 🧩";margin:auto;color:#cfe3f7;font-size:14px;font-weight:800}
.meld{display:flex;direction:ltr;align-items:center;padding:3px 5px;border-radius:10px;background:#ffffff14;border:2px solid transparent;cursor:pointer}
.meld .ck-card+.ck-card{margin-left:-14px}
.meld .own{font-size:9px;margin-right:4px;color:#cfe3f7;writing-mode:vertical-rl;max-height:42px;overflow:hidden}
.meld.can{border-color:var(--gold);animation:glow 1s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 12px #f4c95d}}
.piles{display:flex;align-items:center;gap:10px;justify-content:center;--cw:48px}
.pile{position:relative;border:0;background:none;padding:0;cursor:pointer;color:#fff;display:flex;flex-direction:column;align-items:center;gap:1px;font:inherit}
.pile small{font-size:11px;color:#cfe3f7;font-weight:800}
.pile.hot .ck-card{box-shadow:0 0 0 3px var(--gold),0 0 16px var(--gold)}
.pile:disabled{cursor:default}
.me-box{display:flex;flex-direction:column;align-items:center;font-size:12px;line-height:1.3;min-width:90px}
.me-box b{font-size:14px;color:var(--gold)}
.staged{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:0;--cw:24px}
.staged .grp{display:flex;direction:ltr;align-items:center;gap:0;background:#f4c95d33;border:2px dashed var(--gold);border-radius:10px;padding:2px 6px;cursor:pointer}
.staged .grp .ck-card+.ck-card{margin-left:-10px}
.staged .grp i{font-style:normal;font-weight:800;color:var(--gold);margin-left:6px;font-size:13px}
.hint{text-align:center;font-size:13px;font-weight:800;color:#d6e9fb;min-height:18px}
.hand{display:flex;justify-content:center;align-items:flex-end;min-height:92px;padding:0 4px;direction:ltr;--cw:min(58px,calc((100vw - 30px) / 6.2))}
.hand .ck-card{margin-left:var(--ov,calc(var(--cw) * -0.55));cursor:pointer}
.hand .ck-card:first-child{margin-left:0}
.hand .ck-card.sel{transform:translateY(-16px);box-shadow:0 0 0 3px var(--gold),0 6px 14px #0008}
.hand .ck-card.must{box-shadow:0 0 0 3px #ff6b6b,0 0 14px #ff6b6b}
.acts{display:grid;grid-template-columns:1fr 1fr 1fr .5fr;gap:6px}
.act{border:0;border-radius:12px;font:inherit;font-size:15px;font-weight:800;cursor:pointer;color:#0d3b66;background:#fff;padding:9px 4px;box-shadow:0 4px 0 #0007}
.act.go{background:linear-gradient(180deg,#ffd76a,#e8a92c);color:#3a2300}
.act.bad{background:linear-gradient(180deg,#ff7a7a,#d64545);color:#fff}
.act.lite{background:#ffffff33;color:#fff}
.act:disabled{opacity:.35}
.banner{position:absolute;left:50%;top:44%;translate:-50% -50%;z-index:9;background:#06213bf2;border:2px solid var(--gold);border-radius:16px;padding:12px 16px;text-align:center;font-weight:800;min-width:72%}
.banner[hidden]{display:none}
.banner h4{margin:0 0 6px;color:var(--gold);font-size:19px}
.banner .ln{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.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:#06213bee;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)}