
#hokm{font-family:Vazirmatn,Tahoma,sans-serif;color:#f4eee0;padding:8px 0;color-scheme:dark;--hk-gold:#d6b879;--hk-blue:#80bfff;--hk-red:#ffa9a3;--hk-radius:8px;--hk-cols:7}
#hokm *{box-sizing:border-box}#hokm [hidden]{display:none!important}#hokm button,#hokm input{font:inherit}#hokm button{color:inherit}#hokm button:disabled{opacity:.4;cursor:default}#hokm button:focus-visible,#hokm input:focus-visible{outline:3px solid #c9e7ff;outline-offset:3px}
#hokm .hk-app{width:100%;max-width:460px;margin:auto;background:#101e20;border:1px solid #53604d;border-radius:25px;overflow:hidden;position:relative;box-shadow:0 20px 60px #0003}
#hokm .hk-header{padding:19px 20px 12px;display:flex;justify-content:space-between;align-items:center}#hokm .hk-eyebrow{display:block;color:#a8b6ad;font-size:11px;margin-bottom:4px}#hokm .hk-header strong{font-size:23px;font-weight:600}#hokm .hk-demo{font-size:11px;font-weight:400;color:#d6b879;margin-right:7px}#hokm .hk-icon{width:42px;height:42px;border-radius:50%;border:1px solid #3c4a45;background:#1b2a2b;display:grid;place-items:center;font-size:24px}#hokm i svg{width:18px;height:18px}
#hokm .hk-toolbar{display:flex;justify-content:space-between;gap:8px;padding:0 18px 13px}#hokm .hk-toolbar button{border:0;background:none;padding:5px 0;min-height:36px;font-size:12px;display:flex;align-items:center;gap:7px;color:#d5dfd8}#hokm .hk-toolbar button span:first-of-type{color:inherit}#hokm .hk-toolbar button[aria-pressed=true]{color:#e9c98c}
#hokm .hk-score{display:grid;grid-template-columns:1fr 1fr 1fr;text-align:center;margin:0 16px;background:#14282a;border:1px solid #53604a;border-radius:13px;padding:10px 0}#hokm .hk-score>div+div{border-right:1px solid #344944}#hokm .hk-score span{display:block;font-size:11px}#hokm .hk-score strong{display:block;font-size:27px;font-weight:500;line-height:1.4}#hokm .hk-blue{color:var(--hk-blue)}#hokm .hk-red{color:var(--hk-red)}#hokm .hk-trump span{color:#c8c6b6}#hokm .hk-trump strong{color:#ffada8}#hokm .hk-trump small{font-size:14px;color:#f2e9d6;font-weight:400}#hokm .hk-match{display:flex;justify-content:space-between;gap:6px;color:#adb9af;font-size:10px;padding:9px 20px 12px}
#hokm .hk-table{height:355px;margin:0 10px;border:5px solid #71613e;border-radius:100px 100px 80px 80px;background:radial-gradient(ellipse at 50% 40%,#185a44,#0b382f 68%,#082c26);position:relative;box-shadow:inset 0 0 0 2px #bd9e5e,inset 0 0 45px #001e19,0 5px 10px #0004;isolation:isolate}#hokm .hk-table:before{content:'';position:absolute;inset:0;border-radius:inherit;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Cpath d='M0 0h1v1H0zm3 3h1v1H3z' fill='%23ffffff'/%3E%3C/svg%3E")}#hokm .hk-felt-mark{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font-size:150px;color:#b6a464;opacity:.13;pointer-events:none}
#hokm .hk-seat{position:absolute;text-align:center;z-index:3;min-width:70px}#hokm .hk-top{top:12px;left:50%;transform:translateX(-50%)}#hokm .hk-bottom{bottom:10px;left:50%;transform:translateX(-50%)}#hokm .hk-right{right:7px;top:132px}#hokm .hk-left{left:7px;top:132px}#hokm .hk-avatar{width:46px;height:46px;border-radius:50%;margin:0 auto 3px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#516d6a,#243b3d);font-size:21px;box-shadow:0 3px 10px #001c18;border:2px solid}#hokm .hk-blue-ring{border-color:#7bc3ff}#hokm .hk-red-ring{border-color:#ffaaa1}#hokm .hk-seatname{font-size:12px;color:#fff1d3;text-shadow:0 1px 4px #001d17}#hokm .hk-seatname span{display:block;font-size:10px;color:#b9d2c3}#hokm .hk-seat.active .hk-avatar{outline:2px solid #dfc98e;outline-offset:4px}#hokm .hk-seat.active .hk-seatname{color:#ffe3a1}#hokm .hk-backs{margin:4px auto 0;font-size:10px;color:#bbd1c4}#hokm .hk-backs:before{content:'▥ ▥ ▥';letter-spacing:-2px;color:#d0c6a8;margin-left:5px;font-size:14px}
#hokm .hk-center{position:absolute;left:50%;top:48%;width:190px;height:158px;transform:translate(-50%,-50%)}#hokm .hk-center-label{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;color:#b4c6ad;opacity:.55}#hokm .hk-played{position:absolute;z-index:2}#hokm .hk-played-bottom{bottom:-5px;left:65px;--hk-from-x:0px;--hk-from-y:110px;transform:rotate(-5deg)}#hokm .hk-played-top{top:-5px;left:65px;--hk-from-x:0px;--hk-from-y:-100px;transform:rotate(4deg)}#hokm .hk-played-right{right:0;top:39px;--hk-from-x:110px;--hk-from-y:0px;transform:rotate(12deg)}#hokm .hk-played-left{left:0;top:39px;--hk-from-x:-110px;--hk-from-y:0px;transform:rotate(-12deg)}
#hokm .hk-paper{background:linear-gradient(135deg,#fffdf5,#e9e5d9);color:#161f24;border-radius:var(--hk-radius);box-shadow:0 3px 7px #00150d55;border:1px solid #d2cabb;font-family:Georgia,serif;direction:ltr;position:relative}#hokm .hk-paper.red{color:#b52b37}#hokm .hk-played .hk-paper{width:56px;height:78px;padding:4px 6px;animation:hk-deal .36s ease-out}#hokm .hk-rank{display:block;font-size:19px;line-height:1}#hokm .hk-suit{display:block;font-size:22px;line-height:1.2}#hokm .hk-big-suit{position:absolute;right:6px;bottom:5px;font-size:32px;line-height:1}#hokm .hk-owner{display:block;text-align:center;font:9px Vazirmatn,Tahoma,sans-serif;color:#ebead7;padding-top:2px}
#hokm .hk-turnbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 8px;gap:6px;font-size:12px}#hokm .hk-turnbar>div{display:flex;align-items:center;gap:6px}#hokm .hk-turnbar strong{font-weight:500}#hokm .hk-turn-dot{width:6px;height:6px;border-radius:50%;background:#abd49a}#hokm .hk-clock{display:flex;align-items:center;gap:4px;color:#e3cc98;white-space:nowrap}#hokm .hk-clock small{font-size:10px;color:#a8b8ac}#hokm .hk-clock svg{width:14px;height:14px}
#hokm .hk-handzone{padding:0 16px 12px}#hokm .hk-handhead{display:flex;justify-content:space-between;font-size:12px;margin:6px 0 13px}#hokm .hk-handhead small{font-size:10px;color:#aebdaf;margin-right:5px}#hokm .hk-hint{color:#d4bb84;font-size:11px}#hokm .hk-hand{display:grid;direction:ltr;grid-template-columns:repeat(var(--hk-cols),minmax(0,1fr));gap:8px 4px;align-items:start;min-height:172px}#hokm .hk-hand button{width:100%;height:80px;text-align:left;padding:5px 4px;transition:transform .15s,box-shadow .15s;min-width:0}#hokm .hk-hand button .hk-big-suit{font-size:24px;right:4px}#hokm .hk-hand button .hk-rank{font-size:18px}#hokm .hk-hand button .hk-suit{font-size:18px}#hokm .hk-hand button:disabled{opacity:.48}#hokm .hk-hand button.selected{transform:translateY(-6px);box-shadow:0 0 0 2px #eccd87,0 7px 16px #0005}#hokm .hk-commit{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:13px}#hokm .hk-commit>span{font-size:11px;color:#c3cec3}#hokm .hk-primary{background:#dfc28a;color:#172a24;border:1px solid #e6d2a8;border-radius:10px;padding:11px 13px;min-height:44px;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:7px}#hokm .hk-secondary{border:1px solid #55675b;background:#243832;padding:11px 14px;border-radius:10px;font-size:12px;min-height:44px}
#hokm .hk-chat{margin:0 16px;border-top:1px solid #3b4a40}#hokm .hk-chat-toggle{width:100%;background:transparent;border:0;padding:13px 0;display:flex;align-items:center;justify-content:space-between;min-height:48px;font-size:12px}#hokm .hk-chat-toggle>span{display:flex;align-items:center;gap:7px;flex-wrap:wrap}#hokm .hk-chat-toggle small{font-size:10px;color:#aebcb2}#hokm .hk-chat-body{padding-bottom:8px}#hokm .hk-messages{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}#hokm .hk-messages p{margin:0;background:#20332e;border-radius:10px;padding:9px 11px;font-size:12px;overflow-wrap:anywhere}#hokm .hk-messages b{display:block;font-weight:500;font-size:10px;color:#b9d7f1;margin-bottom:3px}#hokm .hk-chat-form{display:flex;gap:8px}#hokm .hk-chat-form input{min-width:0;width:100%;background:#0c1918;border:1px solid #43564a;border-radius:9px;color:#f0efdf;font-size:16px;padding:9px 11px}#hokm .hk-chat-form button{width:44px;flex:none;border:1px solid #61745a;background:#233b31;border-radius:9px;display:grid;place-items:center}#hokm .hk-status{padding:2px 16px 14px;font-size:10px;color:#bbccbc;min-height:29px}#hokm .hk-spectator-note{margin:14px 17px;padding:15px;border:1px solid #4e5c4b;background:#1b2b27;border-radius:12px;font-size:12px;line-height:1.9}
#hokm .hk-panel{position:absolute;z-index:10;top:70px;left:14px;right:14px;background:#182c29;color:#f2eddc;padding:19px;border:1px solid #b2955f;border-radius:17px;box-shadow:0 25px 70px #0009}#hokm .hk-panelhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:16px}#hokm .hk-panel label{display:flex;justify-content:space-between;align-items:center;padding:13px 0;font-size:12px;gap:8px}#hokm .hk-panel input{accent-color:#dac18c;width:20px;height:20px}#hokm .hk-panel p{font-size:12px;color:#bdcec1;line-height:1.9}#hokm .hk-panel .hk-secondary,#hokm .hk-panel .hk-primary{margin-top:15px;width:100%}#hokm .hk-teamlist{display:grid;grid-template-columns:auto 1fr auto;gap:17px 8px;align-items:center;font-size:11px;margin-top:22px}#hokm .hk-teamlist strong{font-weight:500}#hokm .hk-result{text-align:center;top:250px;display:flex;flex-direction:column;align-items:center}#hokm .hk-result>strong{font-size:20px;color:#efd5a0}#hokm .hk-result-star{font-size:48px;color:#e0c182}#hokm .hk-result small{font-size:11px;color:#afc3b6}#hokm .hk-shake{animation:hk-shake .45s}#hokm .hk-no-motion *,#hokm .hk-no-motion{animation:none!important;transition:none!important}
@keyframes hk-deal{from{opacity:.3;translate:var(--hk-from-x) var(--hk-from-y)}to{opacity:1;translate:0 0}}@keyframes hk-shake{20%,60%{translate:-4px 0}40%,80%{translate:4px 0}}
@media(max-width:360px){#hokm .hk-table{height:330px;margin:0 6px}#hokm .hk-left{left:0}#hokm .hk-right{right:0}#hokm .hk-center{width:156px}#hokm .hk-played-top,#hokm .hk-played-bottom{left:51px}#hokm .hk-played .hk-paper{width:50px;height:72px}#hokm .hk-avatar{width:40px;height:40px}#hokm .hk-handzone{padding-left:10px;padding-right:10px}#hokm .hk-hand button{height:76px}#hokm .hk-match{font-size:9px;padding-left:14px;padding-right:14px}#hokm .hk-header{padding-left:15px;padding-right:15px}}
#hokm .hk-top,#hokm .hk-bottom{display:flex;align-items:center;gap:8px}#hokm .hk-top .hk-backs{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;margin:0}#hokm .hk-top .hk-avatar,#hokm .hk-bottom .hk-avatar{margin:0}
#hokm .hk-chat-form button{width:62px;gap:3px;font-size:11px;padding:6px}#hokm .hk-chat{border-top-color:#a08b58}#hokm .hk-chat-toggle{color:#e7cf9a}#hokm .hk-chat-toggle small,#hokm .hk-chat-toggle span,#hokm .hk-messages b{font-size:11px}#hokm .hk-toolbar button[data-action=open-chat]{color:#e8cd8c}#hokm .hk-header strong{overflow-wrap:anywhere}
#hokm .hk-score .hk-trump{display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap}#hokm .hk-score .hk-trump>span{font-size:15px}#hokm .hk-score .hk-trump>strong{font-size:30px}
#hokm .hk-panel select{font:inherit;font-size:12px;max-width:65%;min-height:44px;color:#f6ead1;background:#10211e;border:1px solid #7c714e;border-radius:8px;padding:6px 9px}
#hokm .hk-app[data-skin="نیمه‌شب طلایی"]{background:#111b29;border-color:#756749}#hokm [data-skin="نیمه‌شب طلایی"] .hk-table{background:radial-gradient(ellipse at 50% 35%,#244765,#112a46 64%,#0c1c2b);border:7px solid #292b2f;box-shadow:inset 0 0 0 2px #d6bb81,inset 0 0 0 9px #122638,inset 0 0 55px #061420,0 0 0 1px #987f4c,0 7px 18px #0006}#hokm [data-skin="نیمه‌شب طلایی"] .hk-score{background:#19283a}#hokm [data-skin="نیمه‌شب طلایی"] .hk-avatar{background:radial-gradient(circle at 30% 20%,#617284,#1a283e)}
#hokm .hk-app[data-skin="زرشکی مخملی"]{background:#251a20;border-color:#92775a}#hokm [data-skin="زرشکی مخملی"] .hk-table{background:radial-gradient(ellipse at 50% 35%,#753449,#491b30 65%,#2a1320);border:7px solid #553d37;box-shadow:inset 0 0 0 2px #dbbd8f,inset 0 0 0 8px #4b2430,inset 0 0 60px #270c1b,0 0 0 1px #a58b66,0 7px 18px #0006}#hokm [data-skin="زرشکی مخملی"] .hk-score{background:#38232e}#hokm [data-skin="زرشکی مخملی"] .hk-avatar{background:radial-gradient(circle at 30% 20%,#846778,#392634)}
@media(max-width:360px){#hokm .hk-hand{grid-template-columns:repeat(5,minmax(0,1fr))}#hokm .hk-center{top:50%}}
@media(prefers-reduced-motion:reduce){#hokm *,#hokm *:before{animation:none!important;transition:none!important}}
#hokm .hk-settings{min-height:44px;max-width:105px;border:1px solid #6b705b;border-radius:10px;padding:9px 12px;background:#1b2a2b;font-size:12px}
#hokm .hk-buzz{display:block;width:70px;min-height:44px;margin:3px auto 0;border:1px solid #9c864f;border-radius:9px;background:#1c2d27;color:#f4db9b;font-size:12px;direction:ltr}#hokm .hk-buzz:disabled{opacity:.38}#hokm .hk-buzz:not(:disabled){background:#e5c685;color:#1c2c25;box-shadow:0 0 12px #e3c77b44}
#hokm .hk-top .hk-buzz{position:absolute;top:-4px;left:calc(100% + 8px);width:62px;margin:0}#hokm .hk-right,#hokm .hk-left{top:118px}
#hokm .hk-buzz-message{position:absolute;z-index:8;top:42%;left:15%;right:15%;padding:13px 12px;text-align:center;border:1px solid #e4c888;border-radius:12px;background:#172c27;color:#fff0c8;font-size:13px;line-height:1.9;box-shadow:0 8px 25px #0006;pointer-events:none}
#hokm .hk-buzz-flash .hk-table:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;animation:hk-buzz-light .65s ease-out} @keyframes hk-buzz-light{0%{box-shadow:inset 0 0 55px 18px #f5cf7666}100%{box-shadow:inset 0 0 0 0 #f5cf7600}}
#hokm [data-skin="نیمه‌شب طلایی"] .hk-table{border-radius:45px}#hokm [data-skin="زرشکی مخملی"] .hk-table{border-radius:100px 30px 100px 30px}
#hokm [data-skin="فانتزی آرت‌دکو"] .hk-table{border-radius:50px 22px 50px 22px;background-color:#123e3b;background-image:var(--hk-fantasy-image,radial-gradient(ellipse,#245651,#102d2d));background-size:cover;background-position:center;border:6px double #bc9c64;box-shadow:inset 0 0 0 2px #2a4240,0 4px 15px #0005}#hokm [data-skin="فانتزی آرت‌دکو"] .hk-table:before{opacity:.05}#hokm [data-skin="فانتزی آرت‌دکو"] .hk-felt-mark{display:none}#hokm [data-skin="فانتزی آرت‌دکو"] .hk-seatname{background:#102e2ddd;border-radius:6px;padding:1px 5px}
@media(max-width:360px){#hokm .hk-top .hk-buzz{left:calc(100% + 2px);width:56px}#hokm .hk-buzz-message{left:12%;right:12%;font-size:12px}}
#hokm [data-skin="فانتزی آرت‌دکو"] .hk-table{height:auto;aspect-ratio:4/5}#hokm [data-skin="فانتزی آرت‌دکو"] .hk-left,#hokm [data-skin="فانتزی آرت‌دکو"] .hk-right{top:40%}
