:root{--red: #b3261e;--red-d: #7d1712;--gold: #e0a32e;--gold-d: #a87414;--cream: #f4ecdc;--ink: #1c1414;--ink-2: #2a2020;--white: #fffaf0;--line: rgba(244, 236, 220, .2);--dim: rgba(244, 236, 220, .72);--font-ar: "Tajawal", system-ui, sans-serif;--font-title: "Aref Ruqaa", "Tajawal", serif;--font-num: "Lalezar", "Tajawal", sans-serif;--tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 12 L12 0 L24 12Z' fill='%23b3261e'/%3E%3C/svg%3E");--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);color-scheme:dark}html[data-game=shkoba]{--red: #cf1524;--red-d: #8a0c16;--gold: #fffdf7;--gold-d: #c9bfa9;--tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M12 0 L20 6 L12 12 L4 6Z' fill='%23cf1524'/%3E%3C/svg%3E")}html[data-game=briscola]{--red: #116049;--red-d: #083c2d;--gold: #d9ad52;--gold-d: #8f6c26;--tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 12 L6 3 L12 8 L18 3 L24 12Z' fill='%23d9ad52'/%3E%3C/svg%3E")}html[data-game=kobi]{--red: #a11d4b;--red-d: #640f2e;--gold: #f6c9d4;--gold-d: #b98496;--tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 100 50'%3E%3Cpath d='M50 46 C36 33 27 25 27 14 C27 6 33 2 39 2 C44 2 48 5 50 9 C52 5 56 2 61 2 C67 2 73 6 73 14 C73 25 64 33 50 46Z' fill='%23a11d4b'/%3E%3C/svg%3E")}html[data-game=basra]{--red: #1f4fa3;--red-d: #12305f;--gold: #f2c230;--gold-d: #b58a10;--tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M12 0 L14.6 8 L6 3 H18 L9.4 8Z' fill='%23f2c230'/%3E%3C/svg%3E")}html[data-game=sheshbesh]{--red: #6b3f22;--red-d: #3f2412;--gold: #efe0c0;--gold-d: #b9a47c;--tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Ccircle cx='12' cy='7' r='4.5' fill='%23efe0c0'/%3E%3C/svg%3E")}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation}[hidden]{display:none!important}html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--ink);color:var(--cream);font-family:var(--font-ar)}body{user-select:none;-webkit-user-select:none}input{user-select:text;-webkit-user-select:text;font-family:inherit}button{font-family:inherit;cursor:pointer;color:inherit;border:none;background:none}#plate{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}#table{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:1;touch-action:none}#life{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none}#ui{position:fixed;inset:0;z-index:2;pointer-events:none}#ui>*{pointer-events:auto}.ember{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,#ff822880,#ff5a1400);mix-blend-mode:screen;animation:ember 3.1s ease-in-out infinite}@keyframes ember{0%,to{opacity:.55}30%{opacity:1}55%{opacity:.7}80%{opacity:.95}}.steam{position:absolute;width:26px;height:60px;margin-left:-13px;margin-top:-60px;border-radius:50%;background:radial-gradient(closest-side,#fff4e438,#fff4e400);filter:blur(5px);opacity:0;animation:steam 4.4s ease-out infinite}@keyframes steam{0%{opacity:0;transform:translateY(8px) scale(.6,.7)}25%{opacity:1}to{opacity:0;transform:translate(10px,-62px) scale(1.5,1.9)}}@media(prefers-reduced-motion:reduce){.ember,.steam{animation:none}.steam{display:none}}.screen{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:max(16px,var(--safe-t)) 16px max(16px,var(--safe-b));background:#140c0a80}.screen.show{display:flex;animation:screenIn .3s ease-out}@keyframes screenIn{0%{opacity:0}to{opacity:1}}.screen.title{background:linear-gradient(180deg,#140c0ac7,#140c0a40 42%,#140c0ad1);flex-direction:column;justify-content:space-between}.home{align-self:flex-start;color:var(--cream);opacity:.85;font-weight:700;font-size:15px;text-decoration:none;padding:10px 6px}.title-mark{text-align:center;margin-top:2vh}.title-mark h1{font-size:0}.title-mark img{width:auto;height:auto;max-width:min(620px,84vw);max-height:34vh;filter:drop-shadow(0 10px 26px rgba(0,0,0,.6));animation:logo .5s cubic-bezier(.2,.9,.3,1.2) both}@keyframes logo{0%{opacity:0;transform:translateY(14px) scale(.92)}}@media(prefers-reduced-motion:reduce){.title-mark img{animation:none}}.title-mark p{font-size:clamp(16px,2.6vh,22px);color:var(--cream);opacity:.9;margin-top:10px;font-weight:500;text-shadow:0 2px 8px rgba(0,0,0,.8)}.menu{width:min(400px,100%);display:flex;flex-direction:column;gap:10px;margin-bottom:2vh}.menu-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.panel{position:relative;background:var(--ink-2);border-radius:18px;padding:24px 20px 18px;width:min(420px,100%);display:flex;flex-direction:column;gap:12px;border:3px solid var(--ink);box-shadow:0 10px #00000059;max-height:100%}.panel:before{content:"";position:absolute;left:14px;right:14px;top:-12px;height:12px;background:var(--tri) repeat-x;background-size:24px 12px}.panel-wide{width:min(640px,100%)}.panel h2{font-family:var(--font-title);font-size:32px;line-height:1.2;text-align:center}.hint{color:var(--dim);font-size:14px;text-align:center}.notice{color:#ff8b7a;font-weight:700;text-align:center;font-size:14px}.btn{border-radius:14px;padding:12px 18px 10px;display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;font-weight:900;font-size:18px;line-height:1.25;color:var(--white);text-decoration:none;border-bottom:5px solid rgba(0,0,0,.3)}.btn:active{transform:translateY(2px);border-bottom-width:2px}.btn:focus-visible,.link:focus-visible,.icon:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.btn-red{background:var(--red);border-bottom-color:var(--red-d)}.btn-gold{background:var(--gold);color:var(--ink);border-bottom-color:var(--gold-d)}.btn-dark{background:#3a2c2a;border-bottom-color:#1f1615;font-size:16px}.link{color:var(--cream);opacity:.8;font-weight:700;font-size:15px;padding:8px}@media(hover:hover){.btn:hover{filter:brightness(1.08)}}.pick{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;background:var(--ink);border-radius:12px;padding:4px}.pick button,.segment button{min-height:42px;border-radius:9px;font-weight:700;font-size:14px;color:var(--dim);padding:4px 6px}.pick button.on,.segment button.on{background:var(--gold);color:var(--ink)}.field{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;font-size:14px}.field input,.join input{min-height:46px;border-radius:10px;border:2px solid var(--line);background:var(--ink);color:var(--cream);font-size:17px;font-weight:700;text-align:center;width:190px}.join{display:grid;grid-template-columns:1fr 110px;gap:8px}.join input{width:100%}.code{font-family:var(--font-num);font-size:56px;letter-spacing:6px;text-align:center;color:var(--gold);direction:ltr;line-height:1.1}.seat-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px}.seat-list li{background:var(--ink);border-radius:10px;padding:9px;font-size:14px;font-weight:700;text-align:center;color:var(--dim)}.seat-list li.on{color:var(--cream)}.is-quick #shareRoom{display:none}.is-quick #startNow{background:var(--gold);color:var(--ink);border-bottom-color:var(--gold-d);font-size:18px}#online.invited #quick,#online.invited #createRoom,#online.invited .pick{display:none}.rule-list{display:flex;flex-direction:column;gap:10px;overflow-y:auto;min-height:0;padding-inline-end:4px;touch-action:pan-y}.rule{display:flex;flex-direction:column;gap:6px}.rule b{font-size:15px}.rule small{display:block;color:var(--dim);font-size:13px}.segment{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--ink);border-radius:12px;padding:4px}.segment button{min-height:38px;font-size:13px}.howto{display:flex;flex-direction:column;gap:8px;padding-inline-start:22px;font-size:16px;line-height:1.55;overflow-y:auto;min-height:0;touch-action:pan-y}#ui>.hud{position:fixed;top:var(--safe-t);left:0;right:0;height:58px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none}.hud>*{pointer-events:auto}.icon{width:42px;height:42px;border-radius:50%;background:#1c1414b3;font-size:18px;color:var(--cream);flex:none}.tools{display:flex;gap:6px}.scorebar{display:flex;align-items:center;gap:12px;background:#1c1414bd;border-radius:14px;padding:4px 14px;font-weight:700;font-size:13px;min-width:0}.scorebar span{display:flex;align-items:center;gap:6px;white-space:nowrap}.scorebar b{font-family:var(--font-num);font-weight:400;font-size:25px;line-height:1.2;color:var(--gold)}.scorebar i{font-style:normal;font-size:11px;color:var(--dim);white-space:nowrap}.scorebar small{color:var(--gold);font-size:9px;letter-spacing:1px}.scorebar .who{flex-direction:column;align-items:flex-start;gap:0;line-height:1.15}.scorebar .who bdi{display:block;max-width:76px;overflow:hidden;text-overflow:ellipsis}.seats{position:fixed;inset:0;pointer-events:none!important}.seat{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:2px;width:88px;transition:transform .2s}.seat img{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:50% 4%;background:#3a2c2a;border:3px solid var(--ink);transform-origin:top}.seat b{font-size:12px;background:#1c1414bd;border-radius:8px;padding:1px 7px;white-space:nowrap}.seat.mate b{background:var(--gold);color:var(--ink)}.seat.turn img{border-color:var(--gold);box-shadow:0 0 0 3px #e0a32e59}.tally{display:flex;gap:4px;font-size:12px;font-weight:700}.tally:empty{display:none}.tally i,.tally bdi{font-style:normal;background:#1c1414bd;border-radius:7px;padding:0 6px}.tally i{color:var(--gold)}html[data-game=kobi] .fan{display:none}.fan{display:flex;justify-content:center;height:16px;margin-top:1px}.fan i{width:11px;height:16px;border-radius:2px;background:#b01c22;border:1px solid #fff6e6;margin-inline:-2px}.fan i:nth-child(1):not(:last-child){rotate:-8deg}.fan i:nth-child(3){rotate:8deg}.fan.open{height:auto}.fan.open .thumb{width:24px;height:37px;border-radius:3px;margin-inline:-3px;box-shadow:0 1px 2px #00000073}.bubble{position:absolute;top:-12px;inset-inline-start:58px;background:var(--cream);color:var(--ink);font-weight:700;font-size:14px;padding:5px 10px;border-radius:12px;white-space:nowrap;animation:pop .2s ease-out;z-index:2}.seat.at-left .bubble{inset-inline-start:auto;inset-inline-end:58px}@keyframes pop{0%{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}.float{position:absolute;top:60px;color:var(--gold);font-family:var(--font-num);font-size:26px;animation:float 1s ease-out forwards}@keyframes float{to{transform:translateY(-34px);opacity:0}}.status{position:fixed;left:50%;bottom:calc(var(--status-bottom, 200px) + var(--safe-b));transform:translate(-50%);font-weight:700;font-size:14px;background:#1c1414b3;padding:4px 14px;border-radius:12px;pointer-events:none!important;white-space:nowrap}.status:empty{display:none}.status.yours{background:var(--gold);color:var(--ink)}.trump{position:fixed;top:calc(62px + var(--safe-t));inset-inline-start:12px;background:#1c1414bd;padding:4px 12px;border-radius:10px;font-size:13px;font-weight:700}.trump .red{color:#ff7a6e}.actions{position:fixed;inset-inline-end:12px;bottom:calc(var(--status-bottom, 200px) - 8px + var(--safe-b));display:flex;flex-direction:column;gap:8px;width:96px}.action{min-height:44px;font-size:14px;padding:8px}.lines,.signs{position:fixed;top:calc(62px + var(--safe-t));left:12px;display:flex;flex-direction:column;gap:4px;background:#1c1414e6;border-radius:14px;padding:6px}.signs{top:auto;bottom:calc(var(--status-bottom, 200px) + 50px + var(--safe-b));left:auto;inset-inline-end:12px}.lines button,.signs button{padding:8px 14px;font-weight:700;font-size:14px;text-align:start;border-radius:9px}.lines button:active,.signs button:active{background:var(--red)}.toast{position:fixed;left:50%;top:24%;transform:translate(-50%);background:#1c1414db;padding:8px 16px;border-radius:12px;font-weight:700;font-size:15px;white-space:nowrap;pointer-events:none!important}.burst{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none!important}.burst-word{text-align:center;animation:burst 1.45s cubic-bezier(.16,1,.3,1) forwards}.burst-word b{display:block;font-family:var(--font-title);font-weight:700;font-size:clamp(64px,18vmin,170px);line-height:1.1;color:var(--white);text-shadow:0 6px 0 var(--red-d),0 14px 40px rgba(0,0,0,.75)}.burst-word small{font-family:var(--font-num);font-size:32px;color:var(--gold);text-shadow:0 3px 10px rgba(0,0,0,.7)}@keyframes burst{0%{transform:scale(2.1) rotate(-3deg);opacity:0}12%{transform:scale(.96) rotate(.6deg);opacity:1}20%{transform:scale(1)}80%{opacity:1}to{transform:scale(1.04);opacity:0}}.bids{position:fixed;left:50%;bottom:calc(var(--status-bottom, 200px) + 40px + var(--safe-b));transform:translate(-50%);width:min(340px,calc(100vw - 24px));background:#1c1414eb;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;text-align:center;font-weight:700;animation:pop .18s ease-out}.bids.low{bottom:calc(18px + var(--safe-b))}.bids p{font-size:16px}.bids small{display:block;font-size:13px;color:var(--gold)}.bids>div{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}.bids button{min-height:50px;border-radius:10px;background:var(--cream);color:var(--ink);font-family:var(--font-num);font-size:26px;line-height:1}.bids button:active{background:var(--gold)}.bids .lay{min-height:42px;background:var(--red);color:var(--cream);font-family:var(--font-ar);font-size:15px;font-weight:700}.chooser{position:fixed;left:50%;top:30%;transform:translate(-50%);background:#1c1414eb;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;text-align:center;font-weight:700;max-width:calc(100vw - 24px)}.chooser>div{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.chooser button{display:flex;gap:3px;padding:6px;background:var(--ink);border-radius:10px}.thumb{display:inline-block;width:48px;height:74px;border-radius:5px;background-image:var(--thumbs, url(/tables/assets/deck.half.webp));background-size:700% 600%}.thumb52{background-image:var(--thumbs52, url(/tables/assets/deck52.half.webp));background-size:800% 700%}.peek{position:fixed;top:calc(100px + var(--safe-t));left:50%;transform:translate(-50%);background:#1c1414db;border-radius:12px;padding:8px 12px;font-size:13px}.peek div{display:flex;align-items:center;gap:6px}html[data-game=basra] .peek{left:8px;top:calc(62px + var(--safe-t));transform:none;padding:6px 8px}html[data-game=basra] .peek div{flex-wrap:wrap;width:122px;gap:3px 0;direction:ltr}html[data-game=basra] .peek b{width:100%;direction:rtl;text-align:right;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html[data-game=basra] .peek .thumb{width:44px;height:68px;border-radius:4px;box-shadow:-1px 0 2px #00000073}html[data-game=basra] .peek .thumb+.thumb{margin-left:-18px}@media(max-width:460px){#ui>.hud{gap:6px;padding-inline:8px}.hud .icon{width:36px;height:36px;font-size:16px}.scorebar{gap:6px;padding-inline:8px}.scorebar b{font-size:21px}.scorebar i{white-space:normal;width:min-content;text-align:center;line-height:1.1}.scorebar .who bdi{max-width:58px}}@media(max-width:370px){.scorebar .who bdi{max-width:44px}.scorebar small{letter-spacing:0}}@media(max-width:350px){.scorebar i{display:none}}@media(max-height:460px){html[data-game=basra] .peek{padding:3px 6px}html[data-game=basra] .peek div{width:90px}html[data-game=basra] .peek .thumb{width:30px;height:46px}html[data-game=basra] .peek .thumb+.thumb{margin-left:-10px}}.sheet{position:fixed;inset:0;display:grid;place-items:center;background:#140c0a8c;padding:16px;animation:screenIn .3s}.paper{width:min(390px,100%);max-height:100%;overflow-y:auto;background:#f5ecd9;color:#2a1c14;border-radius:4px;padding:22px 20px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 50px #0000008c;transform:rotate(-.8deg);animation:paper .42s cubic-bezier(.2,.9,.25,1.1);background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(60,80,130,.16) 31px 32px)}@keyframes paper{0%{transform:translateY(40px) rotate(4deg);opacity:0}}.paper h2{font-family:var(--font-title);font-size:32px;line-height:1.2;text-align:center}.paper .banner{text-align:center;font-weight:900;color:var(--red);font-size:17px}.paper table{width:100%;border-collapse:collapse;font-size:16px}.paper th,.paper td{padding:5px 6px;text-align:center}.paper tbody th,.paper tfoot th{text-align:start}.paper thead th{border-bottom:2px solid #2a1c14;font-size:14px}.paper tfoot th,.paper tfoot td{border-top:2px solid #2a1c14;font-family:var(--font-num);font-weight:400;font-size:24px}.paper tfoot th{font-family:var(--font-ar);font-weight:900;font-size:16px}.paper em{font-style:normal;color:var(--red);font-weight:900;margin-inline-end:8px;direction:ltr;unicode-bidi:isolate}.paper .link{color:#2a1c14}.paper.pencil{background-color:#fbf8ee;background-image:repeating-linear-gradient(transparent 0 31px,#b9cde6 31px 32px);background-attachment:local}.paper .said{text-align:center;font-weight:700;font-size:15px}.sheet-paper th{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:76px}.sheet-paper td{font-family:var(--font-num);font-size:20px;color:#24303f;padding:2px 4px;line-height:1.35;border-inline-start:1px solid #d98f8f}.sheet-paper td small{font-size:13px;color:#6b7686;margin-inline-end:6px}.sheet-paper td.miss bdi{color:#a11d1d}.confirm{position:fixed;inset:0;display:grid;place-items:center;background:#140c0a99;padding:16px}.loading{position:fixed;inset:0;display:grid;place-items:center;background:#140c0a80}.loading span{width:44px;height:44px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--gold);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.roll{position:fixed;left:50%;bottom:calc(10px + var(--safe-b));transform:translate(-50%);width:min(260px,70vw);pointer-events:auto}.roll:active{transform:translate(-50%) translateY(2px)}.dice-left{position:fixed;left:50%;bottom:calc(14px + var(--safe-b));transform:translate(-50%);display:flex;gap:8px;pointer-events:none!important}.dice-left span{width:40px;height:40px;border-radius:9px;background:var(--cream);color:var(--ink);display:grid;place-items:center;font-family:var(--font-num);font-size:24px;box-shadow:0 3px #0006}html[data-game=sheshbesh] .status{bottom:calc(66px + var(--safe-b))}@media(max-height:460px){.title-mark img{max-height:30vh}.title-mark p{font-size:14px;margin-top:2px}.menu{width:min(620px,100%);display:grid;grid-template-columns:1fr 1fr}.menu-row{grid-column:1 / -1}.btn{min-height:44px;font-size:15px}.seat img{width:42px;height:42px}}
