/* 🎮 ألعاب: hub + game table (طرنيب 41). Dark site look, green felt table. */
.g-page { max-width: 1240px; margin: 0 auto; padding: 22px 16px 40px; }
.g-muted { color: #a0aec0; font-size: 13px; }
.g-muted a { color: #fb923c; }
.g-empty { padding: 26px; text-align: center; color: #cbd5e0; background: rgba(255,255,255,.04); border-radius: 14px; }
.g-empty.big { font-size: 18px; margin-top: 40px; }
.g-empty a { color: #fb923c; }

.g-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-weight: 800; font-size: 15px; padding: 10px 20px; color: #fff; background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 6px 16px rgba(234, 88, 12, .3); transition: transform .15s, filter .2s; text-decoration: none; white-space: nowrap; }
.g-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.g-btn:disabled { opacity: .55; cursor: default; transform: none; }
.g-btn.ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); box-shadow: none; }
.g-btn.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 6px 16px rgba(37, 99, 235, .3); }
.g-btn.red { background: rgba(239, 68, 68, .85); box-shadow: none; }
.g-btn.sm { font-size: 13px; padding: 6px 13px; }
.g-btn.big { font-size: 17px; padding: 12px 30px; }
.g-link { background: none; border: 0; color: #fca5a5; cursor: pointer; font-family: inherit; font-size: 12px; text-decoration: underline; }

.g-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #ea580c; font-weight: 800; font-size: 17px; border: 2px solid rgba(255,255,255,.85); flex-shrink: 0; }
.g-av.bot { background: #334155; color: #fff; border-color: #64748b; font-size: 20px; }
.g-av.lg { width: 58px; height: 58px; font-size: 26px; }
.g-av.g-av-free { background: rgba(255,255,255,.08); border-style: dashed; border-color: rgba(255,255,255,.45); opacity: .8; }
.g-av { line-height: 1; padding: 0; }

/* ---------- Hub ---------- */
.g-hero { text-align: center; padding: 26px 10px 18px; }
.g-hero h1 { font-size: 34px; font-weight: 800; }
.g-hero p { color: #cbd5e0; margin-top: 6px; }
.g-login { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 22px; margin: 10px auto 22px; max-width: 560px;
    background: rgba(249, 115, 22, .1); border: 1px solid rgba(249, 115, 22, .4); border-radius: 16px; }
.g-login b { font-size: 18px; }
.g-login span { color: #cbd5e0; font-size: 14px; }
.g-section { margin-top: 22px; }
.g-section h2 { font-size: 21px; margin-bottom: 12px; }
.g-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.g-room { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: border-color .2s; }
.g-room:hover { border-color: #f97316; }
.g-room.invited { border-color: #22c55e; background: rgba(34, 197, 94, .1); }
.g-room-icon { font-size: 30px; }
.g-room-info { flex: 1; min-width: 0; }
.g-room-info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-room-info small { color: #a0aec0; }
.g-room-go { font-weight: 800; font-size: 13px; color: #fb923c; white-space: nowrap; }
.g-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.g-game { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.g-game-art { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: radial-gradient(ellipse at center, #1f7a4d 0%, #0f5132 60%, #0b3d26 100%); }
.g-game-art.has-img { height: auto; aspect-ratio: 16 / 9; background: #0f5132 center / cover no-repeat; }
.g-game-art span { font-size: 70px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); z-index: 1; }
.g-game-art i { position: absolute; font-style: normal; font-size: 44px; opacity: .18; color: #fff; }
.g-game-art i:nth-of-type(1) { top: 12px; right: 22px; color: #fecaca; opacity: .4; }
.g-game-art i:nth-of-type(2) { bottom: 10px; right: 70px; }
.g-game-art i:nth-of-type(3) { top: 18px; left: 40px; color: #fecaca; }
.g-game-art i:nth-of-type(4) { bottom: 16px; left: 18px; }
.g-game-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.g-game-body h3 { font-size: 22px; }
.g-game-body h3 small { font-size: 13px; color: #a0aec0; font-weight: 600; margin-inline-start: 6px; }
.g-game-body p { color: #cbd5e0; font-size: 14px; line-height: 1.8; }
.g-game-actions { display: flex; gap: 6px; }
.g-game-actions .g-btn { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 13px; gap: 4px; box-shadow: none; } /* the 3 play buttons in one row */
.g-rules-box summary { cursor: pointer; color: #fb923c; font-weight: 700; font-size: 14px; }
.g-rules h3 { font-size: 17px; margin: 10px 0 6px; }
.g-rules ul { padding-inline-start: 18px; display: flex; flex-direction: column; gap: 7px; }
.g-rules li { font-size: 14px; line-height: 1.8; color: #e2e8f0; }

/* ---------- Pop-ups ---------- */
.g-modal { position: fixed; inset: 0; z-index: 200; background: rgba(2, 6, 23, .7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.g-modal[hidden] { display: none; }
.g-modal-card { position: relative; width: 100%; max-width: 520px; max-height: 86vh; overflow: auto; background: #111c2e; border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.g-modal-card h3 { font-size: 19px; margin-bottom: 6px; padding-inline-end: 30px; }
.g-x { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.1); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px; }
.g-search { width: 100%; margin: 12px 0 8px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font-family: inherit; }
.g-friends { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.g-friend { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); cursor: pointer; border: 1px solid transparent; }
.g-friend:has(input:checked) { border-color: #f97316; background: rgba(249, 115, 22, .12); }
.g-friend.in { opacity: .55; cursor: default; }
.g-friend input { width: 18px; height: 18px; accent-color: #f97316; }
.g-friend span { display: flex; flex-direction: column; min-width: 0; }
.g-friend small { color: #a0aec0; }
.g-pick-msg { color: #fca5a5; font-size: 13px; min-height: 18px; margin-top: 8px; }
.g-modal-actions { display: flex; gap: 8px; margin-top: 8px; }
.g-modal-card.wide { max-width: 640px; }
.g-hist-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 14px; }
.g-hist-stats span { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 12px; color: #cbd5e0; }
.g-hist-stats b { font-size: 22px; color: #fff; }
.g-hist-stats .won b { color: #4ade80; } .g-hist-stats .lost b { color: #f87171; }
.g-hist-row { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border-inline-start: 4px solid #4ade80; margin-bottom: 8px; }
.g-hist-row.lost { border-inline-start-color: #f87171; }
.g-hist-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.g-hist-row.won .g-hist-top b { color: #4ade80; } .g-hist-row.lost .g-hist-top b { color: #f87171; }
.g-hist-top small { color: #a0aec0; margin-inline-start: auto; }
.g-hist-teams { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #e2e8f0; margin-top: 4px; }
.gt-requests { position: absolute; top: 12px; right: 12px; z-index: 8; width: min(300px, 80%); background: rgba(15, 23, 42, .96); border: 2px solid #22c55e;
    border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.gt-requests small { color: #a0aec0; font-size: 11px; }
.gt-req { display: flex; align-items: center; gap: 8px; }
.gt-req span { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-req .g-av { width: 32px; height: 32px; font-size: 14px; }
.gt-ask { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 70px); z-index: 7; }
.gt-wait { display: inline-block; padding: 8px 16px; border-radius: 999px; background: rgba(15, 23, 42, .85); font-weight: 700; font-size: 14px; }
.g-public { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); }
.g-public:has(input:checked) { border-color: #22c55e; background: rgba(34, 197, 94, .1); }
.g-public input { width: 18px; height: 18px; margin-top: 3px; accent-color: #22c55e; flex-shrink: 0; }
.g-public span { display: flex; flex-direction: column; gap: 2px; }
.g-public b { font-size: 14px; } .g-public small { color: #a0aec0; font-size: 12px; }
.g-add { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer; vertical-align: middle;
    background: #22c55e; color: #fff; font-size: 11px; line-height: 1; padding: 0; }
.g-add.sent, .g-add.ok { background: rgba(255,255,255,.12); cursor: default; }
.g-open { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 60vh; overflow: auto; }
.g-open-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.g-open-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.g-open-info span { font-size: 13px; color: #e2e8f0; }
.g-open-info small { font-size: 12px; color: #a0aec0; }
.g-tag { font-style: normal; font-size: 10px; padding: 0 7px; border-radius: 999px; background: rgba(96, 165, 250, .2); color: #93c5fd; }
.g-wait-tag { font-size: 12px; font-weight: 700; color: #fde68a; white-space: nowrap; }
.g-wait-tag.bad { color: #fca5a5; }
.gt-seat.team-solo { --tc: #facc15; }
.gt-lseat.team-solo { box-shadow: inset 0 -4px 0 #facc15; }
.gt-tag { display: inline-block; font-style: normal; font-size: 10.5px; font-weight: 800; padding: 0 6px; border-radius: 999px; margin-inline-start: 4px; background: rgba(255,255,255,.14); }
.gt-tag.call { background: #a16207; color: #fff; } .gt-tag.with { background: #1d4ed8; color: #fff; }
.gt-tag.dash { background: #7f1d1d; color: #fff; } .gt-tag.risk { background: #c2410c; color: #fff; }
.gt-suits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.gt-suits button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0; border-radius: 10px; border: 2px solid transparent; cursor: pointer;
    background: #f8fafc; color: #111827; font-family: inherit; font-size: 22px; line-height: 1.1; }
.gt-suits button.red { color: #dc2626; }
.gt-suits button small { font-size: 11px; font-weight: 700; color: #334155; }
.gt-suits button.on { border-color: #facc15; box-shadow: 0 0 0 3px rgba(250, 204, 21, .35); }
.gt-suits button:disabled { opacity: .35; cursor: default; }
.gt-bids button[data-est-bid] { background: #2563eb; }
.gt-bids button[data-est-bid]:hover { background: #1d4ed8; }
.gt-bids button[data-est-bid]:disabled { background: #334155; }
.gt-est-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.gt-bidbox.est { width: min(460px, 94%); }
.gt-mult { color: #fde68a; font-weight: 800; }
.gt-rank { display: flex; flex-direction: column; gap: 5px; }
.gt-rank span { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 14px; }
.gt-rank span.me { background: rgba(250, 204, 21, .14); border: 1px solid rgba(250, 204, 21, .35); }
.gt-rank i { font-style: normal; width: 22px; text-align: center; }
.gt-rank em { font-style: normal; font-weight: 800; margin-inline-start: auto; }
.gt-rank small { color: #facc15; font-size: 11px; }
.gt-floor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, 82%); z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border-radius: 18px;
    background: rgba(2, 6, 23, .18); border: 2px dashed rgba(255,255,255,.22); }
.gt-floor.basra { border-color: #facc15; box-shadow: 0 0 0 6px rgba(250, 204, 21, .25), 0 0 40px rgba(250, 204, 21, .35); }
.gt-floor-label { font-style: normal; font-size: 12px; font-weight: 700; color: #d1fae5; }
.gt-floor-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 90px; align-items: center; }
.gt-floor-cards .pc { --w: 58px; animation: gt-in .28s ease-out; }
.gt-floor-cards .pc.taken { box-shadow: 0 0 0 3px #22c55e, 0 0 18px rgba(34, 197, 94, .7); transform: translateY(-6px); }
.gt-floor-empty { color: #d1fae5; font-weight: 700; opacity: .8; }
.gt-played { position: absolute; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 2px; transform: translateX(-50%); z-index: 3; }
.gt-played.at-bottom { bottom: -84px; } .gt-played.at-top { top: -84px; }
.gt-played small { font-size: 12px; font-weight: 800; background: rgba(2, 6, 23, .75); padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.gt-played .pc { --w: 54px; animation: gt-in .25s ease-out; }
.gt-contracts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; }
.gt-contracts button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 12px; border: 0; cursor: pointer;
    background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; font-family: inherit; }
.gt-contracts button span { font-size: 24px; line-height: 1.1; }
.gt-contracts button b { font-size: 13px; }
.gt-contracts button small { font-size: 9.5px; opacity: .9; line-height: 1.3; }
.gt-contracts button:disabled { background: #334155; color: #94a3b8; cursor: default; }
.gt-dbl-cards { display: flex; justify-content: center; gap: 8px; margin-bottom: 10px; }
.gt-dbl-cards button { background: none; border: 3px solid transparent; border-radius: 10px; padding: 2px; cursor: pointer; }
.gt-dbl-cards button.on { border-color: #facc15; box-shadow: 0 0 0 3px rgba(250, 204, 21, .3); }
.gt-dbl-cards .pc.mini { --w: 46px; }
.gt-floor.trx { width: min(560px, 86%); }
.gt-layout-rows { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.gt-lrow { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 2px 8px; border-radius: 10px; background: rgba(2, 6, 23, .2); }
.gt-lrow > span { font-size: 22px; width: 22px; color: #111827; text-shadow: 0 0 2px #fff; }
.gt-lrow > span.red { color: #dc2626; }
.gt-lrow > div { display: flex; flex-wrap: wrap; gap: 2px; }
.gt-lrow .pc.mini { --w: 30px; }
.gt-lrow em { font-style: normal; font-size: 12px; color: #d1fae5; opacity: .8; }
.gt-trump.bal-shown { gap: 3px; } .gt-trump.bal-shown .pc.mini { --w: 30px; box-shadow: none; }
.gt-trump.bal-shown b { font-size: 10px; }
.gt-bal-shown { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 10px; }
.gt-bal-shown .pc { --w: 56px; }
.gt-bal-shown small { color: #cbd5e0; font-size: 12px; }
.g-hub-actions { display: flex; justify-content: center; margin-top: 12px; }
.g-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 300; background: #0f172a; color: #fff; border: 1px solid #22c55e;
    padding: 10px 18px; border-radius: 12px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: opacity .4s; max-width: 92vw; text-align: center; }
.g-toast.bad { border-color: #ef4444; }
.g-toast.out { opacity: 0; }

/* ---------- Table page ---------- */
.g-room-page { max-width: 1320px; padding-top: 12px; }
.gt-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.gt-bar h1 { font-size: 22px; flex: 1; }
.gt-back { color: #fb923c; font-weight: 700; }
.gt-bar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.gt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 14px; align-items: start; }
.gt-main { min-width: 0; }
.gt-table { position: relative; min-height: 520px; border-radius: 28px; overflow: hidden;
    background: radial-gradient(ellipse at center, #1f8a55 0%, #146c42 45%, #0d4d2f 100%);
    box-shadow: inset 0 0 0 10px #5b3a1e, inset 0 0 0 13px #3f2712, inset 0 0 60px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.4); }
.gt-loading, .gt-center-msg { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; text-align: center; }

/* Seats */
.gt-seat { position: absolute; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 16px; background: rgba(2, 6, 23, .55);
    border: 2px solid transparent; max-width: 46%; z-index: 3; transition: border-color .2s, box-shadow .2s; }
.gt-seat.team-a { --tc: #60a5fa; } .gt-seat.team-b { --tc: #f87171; }
.gt-seat { border-inline-start: 4px solid var(--tc); }
.gt-seat.turn { border-color: #facc15; box-shadow: 0 0 0 4px rgba(250, 204, 21, .25), 0 0 24px rgba(250, 204, 21, .35); }
.gt-seat.bottom { bottom: 16px; left: 50%; transform: translateX(-50%); }
.gt-seat.top { top: 22px; left: 50%; transform: translateX(-50%); }
.gt-seat.right { right: 22px; top: 50%; transform: translateY(-50%); }
.gt-seat.left { left: 22px; top: 50%; transform: translateY(-50%); }
.gt-seat-av { position: relative; }
.gt-clock { position: absolute; bottom: -6px; left: -8px; min-width: 24px; height: 24px; border-radius: 12px; background: #facc15; color: #111; font-weight: 800; font-size: 12px;
    display: flex; align-items: center; justify-content: center; padding: 0 5px; box-shadow: 0 0 0 2px #0f172a; }
.gt-clock.low { background: #ef4444; color: #fff; animation: gt-pulse .6s infinite alternate; }
@keyframes gt-pulse { to { transform: scale(1.15); } }
.gt-seat-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gt-seat-info b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-seat-meta { display: flex; gap: 5px; flex-wrap: wrap; }
.gt-seat-meta i { font-style: normal; font-size: 11px; padding: 0 7px; border-radius: 999px; background: rgba(255,255,255,.12); }
.gt-seat-meta .gt-dealer { background: #a16207; }
.gt-seat-meta .gt-off { background: #7f1d1d; }
.gt-chip { font-size: 12px; color: #e2e8f0; }
.gt-chip b { color: #facc15; }
.gt-chip.made b { color: #4ade80; }
.gt-backs { display: flex; align-items: center; margin-top: 2px; }
.gt-backs i { width: 9px; height: 14px; margin-inline-start: -4px; border-radius: 2px; border: 1px solid #fff;
    background: repeating-linear-gradient(45deg, #b91c1c 0 3px, #7f1d1d 3px 6px); }
.gt-backs i:first-child { margin-inline-start: 0; }
.gt-backs em { font-style: normal; font-size: 11px; margin-inline-start: 6px; color: #cbd5e0; }
.gt-seat .g-btn { margin-top: 4px; }
.gt-bubble { position: absolute; bottom: calc(100% + 6px); right: 10px; background: #fff; color: #111; font-weight: 700; font-size: 13px; padding: 5px 11px; border-radius: 12px;
    white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; animation: gt-pop .25s; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.gt-seat.top .gt-bubble { bottom: auto; top: calc(100% + 6px); }
@keyframes gt-pop { from { transform: scale(.6); opacity: 0; } }

/* Playing cards */
.pc { --w: 62px; position: relative; width: var(--w); height: calc(var(--w) * 1.42); border-radius: 8px; background: #fff; color: #111;
    box-shadow: 0 3px 8px rgba(0,0,0,.35); border: 1px solid #d1d5db; flex-shrink: 0; user-select: none; font-weight: 800; }
.pc.red { color: #dc2626; }
.pc-tl, .pc-br { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; font-size: calc(var(--w) * .27); }
.pc-tl i, .pc-br i { font-style: normal; font-size: calc(var(--w) * .22); }
.pc-tl { top: 5px; right: 5px; }
.pc-br { bottom: 5px; left: 5px; transform: rotate(180deg); }
.pc-mid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--w) * .55); }
.pc.mini { --w: 34px; box-shadow: none; }
.pc.mini .pc-br { display: none; }

/* The trick in the middle */
.gt-trick { position: absolute; left: 50%; top: 50%; width: 230px; height: 220px; transform: translate(-50%, -54%); z-index: 2; }
.gt-trick .pc { position: absolute; left: 50%; top: 50%; animation: gt-in .28s ease-out; }
.gt-trick .pc.at-bottom { transform: translate(-50%, -6%); }
.gt-trick .pc.at-top { transform: translate(-50%, -94%); }
.gt-trick .pc.at-right { transform: translate(14%, -50%) rotate(6deg); }
.gt-trick .pc.at-left { transform: translate(-114%, -50%) rotate(-6deg); }
.gt-trick .pc.win { box-shadow: 0 0 0 3px #facc15, 0 0 22px rgba(250, 204, 21, .7); z-index: 2; }
@keyframes gt-in { from { opacity: 0; margin-top: 30px; } }
/* The middle badge (trump / contract / buy): a rounded square that grows with its text, so names are never cut */
.gt-trump { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 96px; min-height: 96px; max-width: 190px; padding: 8px 12px;
    border-radius: 16px; z-index: -1; text-align: center; box-sizing: border-box;
    background: linear-gradient(160deg, #ffffff 0%, #f1f5f9 70%, #e2e8f0 100%); border: 3px solid #facc15;
    box-shadow: 0 0 0 5px rgba(250, 204, 21, .18), 0 8px 22px rgba(0,0,0,.35);
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; gap: 2px; }
.gt-trump.red span { color: #dc2626; } .gt-trump.black span { color: #111827; }
.gt-trump span { font-size: 42px; }
.gt-trump b { font-size: 15px; font-weight: 800; color: #111827; }
.gt-trump em { font-style: normal; font-size: 11px; font-weight: 700; color: #a16207; line-height: 1.3; overflow-wrap: anywhere; }
.gt-trump b { line-height: 1.3; overflow-wrap: anywhere; }
.gt-trump.lobby { z-index: 0; }
.gt-trump.unknown span { color: #a16207; }
.gt-trump.unknown b { font-size: 11px; }
.gt-trump .gt-shown { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 700;
    color: #fff; background: rgba(2, 6, 23, .65); padding: 1px 9px; border-radius: 999px; }
.gt-bid-trump { margin: -4px 0 10px; font-size: 14px; color: #e2e8f0; }
.gt-bid-trump b, .gt-side-trump b { color: #e2e8f0; }
.gt-bid-trump b.red, .gt-side-trump b.red { color: #f87171; }
.gt-side-trump { font-size: 13px; margin-bottom: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(250, 204, 21, .1); border: 1px solid rgba(250, 204, 21, .3); }
.gt-side-trump small { color: #a0aec0; }
.gt-turnbar { margin: 12px auto 0; width: fit-content; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
    padding: 8px 22px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-weight: 800; font-size: 15px; color: #e2e8f0; }
.gt-turnbar[hidden] { display: none; }
.gt-turnbar small { font-size: 12px; font-weight: 600; color: inherit; opacity: .85; }
.gt-turnbar.mine { background: linear-gradient(135deg, #facc15, #f59e0b); border-color: #fde68a; color: #1f1300; font-size: 17px;
    box-shadow: 0 0 0 4px rgba(250, 204, 21, .2), 0 8px 22px rgba(245, 158, 11, .35); animation: gt-myturn 1.4s ease-in-out infinite; }
@keyframes gt-myturn { 50% { box-shadow: 0 0 0 8px rgba(250, 204, 21, .08), 0 8px 22px rgba(245, 158, 11, .35); } }

/* Bidding */
.gt-bidbox { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; width: min(420px, 92%); background: rgba(15, 23, 42, .95);
    border: 2px solid #facc15; border-radius: 18px; padding: 16px; text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.gt-bidbox h3 { font-size: 18px; margin-bottom: 10px; }
.gt-bids { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-bottom: 10px; }
.gt-bids button { font-family: inherit; font-size: 18px; font-weight: 800; padding: 8px 0; border-radius: 10px; border: 0; cursor: pointer; background: #f97316; color: #fff; }
.gt-bids button:hover { background: #ea580c; }
.gt-bids button:disabled { background: #334155; color: #64748b; cursor: default; }
.gt-bidbox small { color: #cbd5e0; font-size: 12px; line-height: 1.6; display: block; }

/* Round / game result */
/* The result covers the table; when it is taller than the table it scrolls inside it (nothing is cut off) */
.gt-result { position: absolute; inset: 0; z-index: 6; background: rgba(2, 6, 23, .9); display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    gap: 10px; padding: 16px; text-align: center; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.gt-result > * { flex-shrink: 0; }
.gt-result::-webkit-scrollbar { width: 6px; } .gt-result::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 3px; }
.gt-result h2 { font-size: 24px; }
.gt-result.over h2 { font-size: 28px; }
.gt-result table, .gt-hist table { border-collapse: collapse; }
.gt-result table { min-width: min(440px, 100%); background: rgba(255,255,255,.05); border-radius: 12px; overflow: hidden; }
.gt-result th, .gt-result td { padding: 6px 12px; font-size: 14px; }
.gt-result.bas td, .gt-result.bas th { padding: 4px 12px; font-size: 13px; } /* الباصرة: the long points table, compact */
.gt-result th { background: rgba(255,255,255,.08); }
.gt-result tr.team-a td:first-child { border-inline-start: 4px solid #60a5fa; }
.gt-result tr.team-b td:first-child { border-inline-start: 4px solid #f87171; }
.plus { color: #4ade80; } .minus { color: #f87171; }

/* My hand */
.gt-hand { display: flex; justify-content: center; padding: 14px 8px 6px; min-height: 112px; }
.gt-hand .pc { --w: 70px; transition: transform .15s, filter .2s; }
.gt-hand.my-turn .pc.ok { cursor: pointer; }
.gt-hand.my-turn .pc.ok:hover { transform: translateY(-14px); }
.gt-hand.my-turn .pc.no { filter: brightness(.55); }
.gt-hand .pc.going { transform: translateY(-40px); opacity: .5; }
.gt-watch { padding-top: 30px; }

/* Waiting table */
/* Waiting table: a 3 x 3 grid — partner on top, the other team left and right, me at the bottom, the trump in the middle */
.gt-lobby { position: relative; min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 26px 20px; text-align: center; }
.gt-lobby h2 { font-size: 22px; }
.gt-lobby-table { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". top ." "right mid left" ". bottom ."; gap: 12px 16px;
    align-items: center; justify-items: center; width: min(560px, 100%); margin: 4px 0; }
.gt-lseat { width: 150px; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 12px 8px 14px; border-radius: 16px; background: rgba(2, 6, 23, .55); border: 1px solid rgba(255,255,255,.1); }
.gt-lseat.top { grid-area: top; } .gt-lseat.bottom { grid-area: bottom; } .gt-lseat.right { grid-area: right; } .gt-lseat.left { grid-area: left; }
.gt-lseat.team-a { box-shadow: inset 0 -4px 0 #60a5fa; } .gt-lseat.team-b { box-shadow: inset 0 -4px 0 #f87171; }
.gt-lseat .g-av.lg { width: 54px; height: 54px; font-size: 24px; }
.gt-lseat b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-lseat small { font-size: 11px; color: #cbd5e0; }
.gt-lseat em { font-style: normal; font-size: 10px; color: #94a3b8; }
.gt-lseat .g-btn, .gt-lseat .g-link { margin-top: 2px; }
.gt-lobby-table .gt-trump.lobby { grid-area: mid; position: relative; left: auto; top: auto; transform: none; }
.gt-invited { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-size: 13px; color: #cbd5e0; }
.gt-invited b { background: rgba(250, 204, 21, .14); border: 1px solid rgba(250, 204, 21, .4); color: #fde68a; padding: 2px 10px; border-radius: 999px; font-size: 12px; }
.gt-lobby-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }

/* Side: score + chat */
.gt-side { display: flex; flex-direction: column; gap: 12px; }
.gt-box { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 14px; }
.gt-box h3 { font-size: 16px; margin-bottom: 10px; }
.gt-box h3 small { font-size: 11px; color: #a0aec0; font-weight: 600; }
.gt-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gt-team { border-radius: 12px; padding: 8px 10px; background: rgba(255,255,255,.05); display: flex; flex-direction: column; gap: 4px; }
.gt-team.team-a { border-top: 3px solid #60a5fa; } .gt-team.team-b { border-top: 3px solid #f87171; }
.gt-team b { font-size: 14px; } .gt-team b small { font-size: 11px; color: #facc15; }
.gt-team span { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; color: #e2e8f0; }
.gt-team span em { font-style: normal; font-weight: 800; }
.gt-hist { margin-top: 10px; }
.gt-hist summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #fb923c; }
.gt-hist table { width: 100%; margin-top: 6px; font-size: 11px; }
.gt-hist th, .gt-hist td { padding: 4px 3px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: center; }
.gt-last { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.gt-last span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gt-last small { font-size: 10px; color: #a0aec0; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-chat { display: flex; flex-direction: column; }
.gt-msgs { height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding-inline-end: 4px; }
.gt-msg { font-size: 13px; background: rgba(255,255,255,.05); padding: 5px 9px; border-radius: 10px; word-wrap: break-word; }
.gt-msg.mine { background: rgba(249, 115, 22, .15); }
.gt-msg b { color: #fb923c; } .gt-msg small { color: #718096; font-size: 10px; }
.gt-quick { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.gt-quick button { background: rgba(255,255,255,.08); border: 0; color: #fff; border-radius: 999px; padding: 3px 9px; cursor: pointer; font-family: inherit; font-size: 13px; }
#gtChat { display: flex; gap: 6px; }
#gtChat input { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font-family: inherit; }
#gtChat button { border: 0; border-radius: 10px; padding: 0 14px; background: #f97316; color: #fff; font-family: inherit; font-weight: 700; cursor: pointer; }

@media (max-width: 960px) {
    .gt-layout { grid-template-columns: 1fr; }
    .gt-msgs { height: 160px; }
}
@media (max-width: 600px) {
    .g-page { padding: 14px 10px 30px; }
    .g-hero h1 { font-size: 27px; }
    .g-games { grid-template-columns: 1fr; }
    .g-game-actions .g-btn { font-size: 12px; padding: 7px 4px; }
    .g-rooms { grid-template-columns: 1fr; }
    .gt-bar h1 { font-size: 18px; }
    .gt-bar-actions .g-btn { padding: 5px 10px; font-size: 12px; }
    .gt-table { min-height: 470px; border-radius: 20px; }
    .gt-seat { padding: 5px 8px; gap: 5px; max-width: 44%; }
    .gt-seat .g-av { width: 32px; height: 32px; font-size: 14px; }
    .gt-seat-info b { font-size: 12px; }
    .gt-seat.right, .gt-seat.left { flex-direction: column; text-align: center; max-width: 30%; top: 40%; }
    .gt-seat.right { right: 10px; } .gt-seat.left { left: 10px; }
    .gt-seat.top { top: 14px; }
    .gt-seat.bottom { bottom: 10px; }
    .gt-seat-meta { justify-content: center; }
    .gt-backs { justify-content: center; }
    .gt-trick { width: 170px; height: 190px; }
    .gt-trump { min-width: 78px; min-height: 78px; max-width: 150px; padding: 6px 9px; border-radius: 14px; }
    .gt-trump span { font-size: 32px; }
    .gt-trump b { font-size: 13px; }
    .gt-trick .pc, .pc { --w: 50px; }
    .gt-hand .pc { --w: 58px; }
    .gt-turnbar { font-size: 14px; padding: 7px 16px; } .gt-turnbar.mine { font-size: 15px; }
    .gt-bids { grid-template-columns: repeat(4, 1fr); }
    .g-hist-stats { grid-template-columns: repeat(2, 1fr); }
    .gt-floor { width: 92%; padding: 8px; }
    .gt-contracts { grid-template-columns: repeat(3, 1fr); }
    .gt-lrow .pc.mini { --w: 22px; } .gt-lrow { min-height: 38px; }
    .gt-floor-cards .pc { --w: 44px; }
    .gt-played.at-bottom { bottom: -70px; } .gt-played.at-top { top: -70px; }
    .gt-lobby { padding: 20px 8px; }
    .gt-lobby-table { gap: 8px 6px; }
    .gt-lseat { width: 104px; min-height: 132px; padding: 10px 4px 12px; }
    .gt-lseat .g-av.lg { width: 42px; height: 42px; font-size: 19px; }
    .gt-lseat b { font-size: 12px; }
    .gt-lseat .g-btn.sm { padding: 5px 9px; font-size: 12px; }
    .gt-lobby-table .gt-trump.lobby { min-width: 72px; min-height: 72px; }
    .gt-lobby-table .gt-trump.lobby span { font-size: 28px; }
    .gt-lobby-table .gt-trump.lobby b { font-size: 10px; }
}

/* ---------- Inside the Android app (body.g-app): an app screen, no website header; the app's bottom menu is below ---------- */
.g-app { background: #0a1628; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; }
.g-app .g-page { padding: 0 12px 18px; max-width: 720px; }
.g-app .ga-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 10px; margin: 0 -12px 6px; padding: 10px 14px;
    background: rgba(10, 22, 40, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.08); }
.g-app .ga-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.g-app .ga-title b { font-size: 19px; font-weight: 800; }
.g-app .ga-title small { font-size: 12px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-app .ga-icon { display: inline-flex; flex-direction: column; align-items: center; gap: 0; border: 0; background: rgba(255,255,255,.08); color: #fff;
    border-radius: 14px; padding: 5px 12px; font-family: inherit; font-size: 19px; line-height: 1.2; cursor: pointer; }
.g-app .ga-icon span { font-size: 10px; font-weight: 700; color: #cbd5e1; }
.g-app .ga-icon:active, .g-app .g-btn:active, .g-app .g-room:active { transform: scale(.96); }
.g-app .g-btn:hover { transform: none; filter: none; }
.g-app .g-login { margin: 12px 0; }
.g-app .g-section { margin-top: 14px; }
.g-app .g-section h2 { font-size: 16px; margin-bottom: 8px; color: #e2e8f0; }

/* Open rooms: a row that scrolls sideways */
.g-app .g-rooms { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -12px; padding: 2px 12px 6px; scrollbar-width: none; }
.g-app .g-rooms::-webkit-scrollbar { display: none; }
.g-app .g-room { flex: 0 0 82%; max-width: 320px; scroll-snap-align: start; padding: 10px 12px; border-radius: 16px; }
.g-app .g-room-icon { font-size: 26px; }

/* Games: app cards (picture + name + 3 buttons) */
.g-app .g-games { grid-template-columns: 1fr; gap: 12px; }
.g-app .g-game { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; padding: 10px; border-radius: 18px;
    background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); }
.g-app .g-game-body { display: contents; }
.g-app .g-game-art { grid-row: 1 / span 2; height: auto; aspect-ratio: 3 / 4; border-radius: 12px; align-self: start; }
.g-app .g-game-art.has-img { aspect-ratio: 3 / 4; }
.g-app .g-game-art span { font-size: 40px; }
.g-app .g-game-art i { font-size: 22px; }
.g-app .g-game-body h3 { grid-column: 2; font-size: 17px; line-height: 1.4; margin-top: 2px; }
.g-app .g-game-body h3 small { display: inline-block; margin: 2px 0 0; font-size: 11px; padding: 0 8px; border-radius: 999px; background: rgba(255,255,255,.1); color: #cbd5e1; }
.g-app .g-game-body p { grid-column: 2; font-size: 12.5px; line-height: 1.65; color: #a8b5c8; margin-top: 4px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.g-app .g-game-actions { grid-column: 1 / -1; margin-top: 10px; gap: 6px; }
.g-app .g-game-actions .g-btn { padding: 9px 4px; font-size: 12.5px; border-radius: 12px; }
.g-app .g-rules-box { grid-column: 1 / -1; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.07); }
.g-app .g-rules-box summary { font-size: 13px; list-style: none; text-align: center; }
.g-app .g-rules-box summary::-webkit-details-marker { display: none; }
.g-app .g-modal { align-items: flex-end; padding: 0; }
.g-app .g-modal-card { max-width: none; max-height: 88vh; border-radius: 22px 22px 0 0; padding: 18px 16px 22px; }

/* The table screen */
.g-app .g-room-page { padding: 0 8px 14px; max-width: 900px; }
.g-app .gt-bar { position: sticky; top: 0; z-index: 50; flex-wrap: nowrap; gap: 8px; margin: 0 -8px 8px; padding: 8px 10px;
    background: rgba(10, 22, 40, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.08); }
.g-app .gt-back { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px;
    background: rgba(255,255,255,.08); font-size: 0; color: #fff; }
.g-app .gt-back::before { content: "→"; font-size: 20px; font-weight: 800; }
.g-app .gt-bar h1 { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-app .gt-bar-actions { flex-wrap: nowrap; gap: 5px; }
.g-app .gt-bar-actions .g-btn { padding: 6px 9px; font-size: 15px; border-radius: 12px; }
.g-app .gt-bar-actions .g-btn.red { font-size: 12px; padding: 6px 10px; }
.g-app .g-lbl { display: none; }
.g-app .gt-layout { gap: 10px; }
.g-app .gt-table { border-radius: 22px; }
.g-app .gt-box { border-radius: 16px; padding: 12px; }
.g-app .gt-msgs { height: 150px; }
.g-app #gtChat input { font-size: 16px; } /* no zoom when typing */