.gx-hokm {
    --hk-gold: #e4b84f;
    --hk-gold-soft: #ffe193;
    --hk-green: #31d17c;
    --hk-red: #ef5361;
    --hk-blue: #58a6ff;
    --hk-panel: #111925;
    --hk-line: rgba(155, 177, 204, .2);
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 14px 12px 28px;
    color: #eef3f8;
    font-family: inherit;
}

.gx-hokm *, .gx-hokm *::before, .gx-hokm *::after { box-sizing: border-box; }
.gx-hokm button, .gx-hokm input { font: inherit; }

.hk-header {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    border: 1px solid #303b4a;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(120deg, #101722 0%, #1a2431 52%, #101722 100%);
    box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.hk-brand { text-align: center; }
.hk-brand small { color: var(--hk-gold); font: 800 8px Arial, sans-serif; letter-spacing: 2.6px; }
.hk-brand h1 { margin: 3px 0 0; color: #fff; font-size: 22px; font-weight: 900; }
.hk-brand h1 em { margin-right: 9px; color: #95a6ba; font: 800 15px Georgia, serif; font-style: normal; letter-spacing: .6px; }

.hk-back, .hk-online {
    min-width: 94px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #344254;
    border-radius: 10px;
    background: #0b121b;
    color: #aebacc;
    font-size: 10px;
}
.hk-back { cursor: pointer; transition: .2s ease; }
.hk-back:hover { color: #fff; border-color: #5e7188; transform: translateX(2px); }
.hk-online i, .hk-live-dot::before {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 50%;
    background: #3ee591;
    box-shadow: 0 0 10px #3ee591;
    animation: hkPulse 2s ease-in-out infinite;
}

.hk-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 304px;
    gap: 11px;
    direction: ltr;
}

.hk-arena {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid #303a46;
    border-top: 0;
    border-radius: 0 0 20px 20px;
    background: #07110d url('/img/games/hokm/table-goldenx.png') center / cover no-repeat;
    box-shadow: 0 28px 70px rgba(0,0,0,.55);
    direction: rtl;
}
.hk-arena::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 50% 48%, transparent 31%, rgba(0,5,7,.18) 58%, rgba(0,3,6,.68) 100%),
        linear-gradient(115deg, rgba(228,184,79,.025), transparent 35%, rgba(228,184,79,.03)),
        radial-gradient(circle at 50% 55%, rgba(255,232,170,.08), transparent 28%);
    pointer-events: none;
}
.hk-arena::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(255,230,158,.055) 48%, transparent 63%);
    transform: translateX(-110%);
    animation: hkLightSweep 11s ease-in-out infinite;
}

.hk-ambient { position: absolute; width: 220px; height: 220px; border-radius: 50%; filter: blur(80px); opacity: .11; pointer-events: none; animation: hkAmbient 7s ease-in-out infinite alternate; }
.hk-ambient-one { left: 4%; top: 18%; background: #f0b64b; }
.hk-ambient-two { right: 5%; bottom: 14%; background: #1eaa73; animation-delay: -3s; }

.hk-scoreboard {
    position: absolute;
    z-index: 10;
    top: 18px;
    left: 50%;
    width: 300px;
    height: 52px;
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    overflow: hidden;
    border: 1px solid rgba(237,193,91,.42);
    border-radius: 14px;
    background: rgba(5,10,12,.88);
    box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    transform: translateX(-50%);
}
.hk-scoreboard::after {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,214,107,.16), transparent);
    opacity: .55;
    mix-blend-mode: screen;
}
.hk-trick-stacks {
    position: absolute;
    z-index: 9;
    top: 74px;
    left: 50%;
    width: 560px;
    display: flex;
    justify-content: space-between;
    transform: translateX(-50%);
    pointer-events: none;
}
.hk-trick-stack {
    display: flex;
    align-items: center;
    min-height: 54px;
    min-width: 110px;
    padding: 0 8px;
}
.hk-trick-stack.pulse .hk-card-back-mini { animation: hkStackPulse .75s ease both; }
.hk-trick-stack .hk-card-back-mini { transform-origin: 50% 100%; animation: hkStackPop .55s cubic-bezier(.18,.8,.24,1.15) both; }
.hk-trick-stack .hk-card-count { position: static; margin-right: 8px; }
.hk-trick-stack-us { justify-content: flex-start; }
.hk-trick-stack-them { justify-content: flex-end; }
.hk-team, .hk-round { display: flex; align-items: center; justify-content: center; text-align: center; }
.hk-team { gap: 6px; }
.hk-team span { color: #8693a2; font-size: 8px; }
.hk-team strong { color: #fff; font: 900 20px Arial, sans-serif; }
.hk-team-us strong { color: #75dfff; }
.hk-team-them strong { color: #ff9aa4; }
.hk-round { flex-direction: column; border-inline: 1px solid rgba(255,255,255,.08); }
.hk-round small { color: #778493; font-size: 7px; }
.hk-round b { position: absolute; color: rgba(228,184,79,.11); font: 900 38px Georgia, serif; }
.hk-round span { position: relative; color: var(--hk-gold-soft); font-size: 8px; font-weight: 800; }

.hk-seat {
    position: absolute;
    z-index: 12;
    min-width: 175px;
    height: 58px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(7,12,15,.94), rgba(14,20,24,.9));
    box-shadow: 0 14px 30px rgba(0,0,0,.63), inset 0 1px rgba(255,255,255,.055);
    backdrop-filter: blur(10px);
    transition: border-color .25s, box-shadow .25s, transform .25s;
}
.hk-seat.is-active { border-color: rgba(242,197,89,.78); box-shadow: 0 0 0 1px rgba(242,197,89,.18), 0 0 28px rgba(231,178,55,.26), 0 15px 34px rgba(0,0,0,.65); transform: translateY(-1px); }
.hk-seat.is-me { border-color: rgba(69,208,147,.52); }
.hk-seat.is-team { background: linear-gradient(145deg, rgba(6,24,24,.95), rgba(10,18,22,.92)); box-shadow: inset 0 0 0 1px rgba(73,211,167,.08); }
.hk-seat-top { top: 81px; left: 50%; transform: translateX(-50%); }
.hk-seat-right { top: 47%; right: 18px; transform: translateY(-50%); }
.hk-seat-bottom { bottom: 128px; left: 50%; transform: translateX(-50%); }
.hk-seat-left { top: 47%; left: 18px; transform: translateY(-50%); }
.hk-seat-top.is-active, .hk-seat-bottom.is-active { transform: translateX(-50%) scale(1.025); }
.hk-seat-left.is-active, .hk-seat-right.is-active { transform: translateY(-50%) scale(1.025); }

.hk-avatar {
    position: relative;
    width: 43px;
    height: 43px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid #b48b36;
    border-radius: 13px;
    background: radial-gradient(circle at 35% 28%, #5c4824, #1c1710 72%);
    color: #f2cb6b;
    font-size: 12px;
    font-weight: 900;
}
.hk-avatar i { position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px; border: 1px solid #07100b; border-radius: 50%; background: #42db8b; }
.hk-player { min-width: 75px; }
.hk-player b, .hk-player span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-player b { max-width: 100px; color: #f5f7fa; font-size: 10px; }
.hk-player span { margin-top: 4px; color: #8592a1; font-size: 8px; }
.hk-turn-ring { position: absolute; inset: -5px; pointer-events: none; border: 1px solid transparent; border-radius: 19px; }
.hk-seat.is-active .hk-turn-ring { border-color: rgba(244,199,91,.62); animation: hkTurn 1.45s ease-in-out infinite; }

.hk-opponent-hand { height: 43px; min-width: 45px; display: flex; align-items: center; direction: ltr; padding-left: 11px; }
.hk-card-back-mini { width: 27px; height: 39px; margin-left: -17px; border: 1px solid #f1d697; border-radius: 4px; background-color: #172c42; background-image: linear-gradient(45deg,#cda845 25%,transparent 25%,transparent 75%,#cda845 75%),linear-gradient(45deg,#cda845 25%,transparent 25%,transparent 75%,#cda845 75%); background-position: 0 0,3px 3px; background-size: 6px 6px; box-shadow: 0 4px 8px #0008; transform: rotate(var(--r,0deg)); }
.hk-opponent-hand .hk-card-back-mini { animation: hkBackDeal .34s cubic-bezier(.18,.8,.24,1.05) both; transform-origin: 50% 100%; }
.hk-card-count { position: absolute; left: 8px; bottom: 3px; min-width: 16px; padding: 1px 4px; border-radius: 8px; background: #101822; color: #d9e2eb; font: 800 7px Arial; text-align: center; }

.hk-table-center { position: absolute; z-index: 8; top: 49%; left: 50%; width: min(500px, 58%); height: 270px; transform: translate(-50%, -50%); }
.hk-phase { position: absolute; top: 0; left: 50%; padding: 5px 12px; border: 1px solid rgba(224,181,80,.37); border-radius: 15px; background: rgba(3,15,10,.68); color: #f4cc6c; font-size: 8px; font-weight: 900; letter-spacing: .4px; transform: translateX(-50%); }
.hk-status { position: absolute; bottom: 0; left: 50%; min-width: 260px; padding: 7px 16px; border-radius: 10px; background: rgba(3,16,11,.74); color: #b8c6c3; font-size: 9px; text-align: center; transform: translateX(-50%); }
.hk-trick { position: absolute; inset: 42px 70px 35px; }
.hk-trick-slot { position: absolute; animation: hkCardLand 1.02s cubic-bezier(.18,.8,.24,1.08) both; }
.hk-trick-slot.v0 { bottom: 0; left: 50%; transform: translateX(-50%) rotate(-2deg); --from-x: 0; --from-y: 150px; }
.hk-trick-slot.v1 { top: 50%; right: 16px; transform: translateY(-50%) rotate(5deg); --from-x: 160px; --from-y: 0; }
.hk-trick-slot.v2 { top: 0; left: 50%; transform: translateX(-50%) rotate(2deg); --from-x: 0; --from-y: -150px; }
.hk-trick-slot.v3 { top: 50%; left: 16px; transform: translateY(-50%) rotate(-5deg); --from-x: -160px; --from-y: 0; }
.hk-trick-collect {
    position: absolute !important;
    z-index: 65 !important;
    pointer-events: none;
    animation: hkTrickCollect .98s cubic-bezier(.18,.78,.24,1) forwards !important;
    filter: drop-shadow(0 14px 22px rgba(0,0,0,.22));
}

.hk-card {
    position: relative;
    width: 62px;
    height: 88px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid #d7dce0;
    border-radius: 8px;
    background: linear-gradient(145deg, #fff 0%, #f7f5ee 65%, #e5e0d4 100%);
    color: #101820;
    box-shadow: 0 10px 16px rgba(0,0,0,.52), inset 0 0 0 2px rgba(255,255,255,.8);
    direction: ltr;
    user-select: none;
}
.hk-initial-hidden { opacity: 0; }
.hk-hand .hk-card { transform: translateY(var(--lift, 0)) rotate(var(--fan, 0deg)); transform-origin: 50% 110%; transition: transform .25s ease, filter .25s ease, opacity .25s; }
.hk-hand .hk-card.dealing { pointer-events: none; animation: hkInitialDeal .9s cubic-bezier(.18,.82,.22,1.12) both; }
.hk-card.red { color: #b5212c; }
.hk-card .rank { position: absolute; top: 5px; left: 6px; font: 900 15px Georgia, serif; line-height: 1; }
.hk-card .corner-suit { position: absolute; top: 20px; left: 7px; font: 15px Georgia, serif; line-height: 1; }
.hk-card .big-suit { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 12px; font: 34px Georgia, serif; text-shadow: 0 1px #fff; }
.hk-card::after { content: "GX"; position: absolute; right: 5px; bottom: 4px; color: #b59a62; font: 700 5px Arial; letter-spacing: .5px; }

.hk-hand-wrap { position: absolute; z-index: 50; right: 40px; bottom: 14px; left: 40px; height: 112px; }
.hk-hand-label { position: absolute; right: 0; bottom: 0; display: flex; gap: 6px; color: #d7e0e8; font-size: 8px; }
.hk-hand-label small { color: #7f8d9b; }
.hk-hand { height: 108px; display: flex; align-items: flex-end; justify-content: center; direction: ltr; padding-left: 23px; }
.hk-hand .hk-card { width: 64px; height: 92px; margin-left: -25px; }
.hk-hand .hk-card.playable { cursor: pointer; }
.hk-hand .hk-card.playable:hover { z-index: 20; filter: brightness(1.08); transform: translateY(-23px) rotate(0deg) scale(1.07); }
.hk-hand .hk-card.locked { opacity: .57; filter: saturate(.55) brightness(.76); }
.hk-hand .hk-card.illegal { opacity: .32; filter: grayscale(.7) brightness(.66); cursor: not-allowed; }

.hk-trump-overlay {
    position: absolute;
    z-index: 40;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: radial-gradient(circle at center, rgba(5,22,16,.18), rgba(1,5,7,.58));
    backdrop-filter: blur(2px);
    animation: hkOverlayIn .3s ease both;
}
.hk-trump-overlay[hidden] { display: none; }
.hk-trump-dialog {
    position: relative;
    width: min(430px, 92%);
    padding: 25px 24px 22px;
    overflow: hidden;
    border: 1px solid rgba(234,190,85,.56);
    border-radius: 21px;
    background: linear-gradient(145deg, rgba(10,17,19,.97), rgba(5,10,13,.98));
    box-shadow: 0 30px 90px #000d, inset 0 1px rgba(255,255,255,.07), 0 0 45px rgba(213,159,39,.13);
    text-align: center;
}
.hk-trump-dialog::before { content: ""; position: absolute; top: -85px; left: 50%; width: 250px; height: 150px; border-radius: 50%; background: rgba(228,184,79,.16); filter: blur(48px); transform: translateX(-50%); }
.hk-trump-dialog > small { position: relative; color: var(--hk-gold); font: 800 7px Arial,sans-serif; letter-spacing: 2.4px; }
.hk-crown { position: relative; width: 48px; height: 48px; display: grid; place-items: center; margin: 9px auto 7px; border: 1px solid rgba(229,185,79,.42); border-radius: 15px; background: linear-gradient(145deg,#32270f,#151209); color: #ffd976; font: 27px Georgia,serif; box-shadow: 0 10px 25px rgba(0,0,0,.4); }
.hk-trump-dialog h2 { position: relative; margin: 0; color: #fff7de; font-size: 16px; font-weight: 900; }
.hk-trump-dialog p { position: relative; margin: 7px 0 16px; color: #8997a5; font-size: 9px; line-height: 1.7; }
.hk-table-suits { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; direction: ltr; }
.hk-table-suits button { height: 76px; border: 1px solid #3a4755; border-radius: 12px; background: linear-gradient(155deg,#1b252e,#0d141a); color: #e8edf1; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.035); transition: .2s ease; }
.hk-table-suits button b, .hk-table-suits button span { display: block; }
.hk-table-suits button b { font: 34px Georgia,serif; }
.hk-table-suits button span { margin-top: 4px; color: #9aa7b4; font-size: 8px; }
.hk-table-suits button.red { color: #ef5262; }
.hk-table-suits button:not(:disabled):hover { border-color: var(--hk-gold); background: linear-gradient(155deg,#3a2f15,#17130c); box-shadow: 0 10px 23px rgba(0,0,0,.38),0 0 18px rgba(226,180,72,.11); transform: translateY(-5px); }
.hk-table-suits button:disabled { opacity: .35; cursor: not-allowed; }
.hk-hakem-wait { display: none; position: relative; min-height: 50px; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: rgba(255,255,255,.025); color: #a8b4bf; font-size: 9px; }
.hk-hakem-wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--hk-gold); box-shadow: 0 0 11px var(--hk-gold); animation: hkPulse 1.2s infinite; }
.hk-trump-overlay.is-waiting .hk-table-suits { display: none; }
.hk-trump-overlay.is-waiting .hk-hakem-wait { display: flex; }

.hk-side { display: flex; flex-direction: column; gap: 9px; padding-top: 11px; direction: rtl; }
.hk-panel { overflow: hidden; padding: 13px; border: 1px solid #2d3948; border-radius: 14px; background: linear-gradient(145deg, #18212c, #101720); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.hk-panel header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hk-panel header small { display: block; color: #758396; font-size: 7px; }
.hk-panel header h2 { margin: 2px 0 0; color: #f1f5f9; font-size: 11px; font-weight: 900; }
.hk-panel header > span { color: #8794a4; font-size: 7px; }
.hk-panel header > button { width: 27px; height: 27px; border: 1px solid #354253; border-radius: 8px; background: #0d141d; color: #b8c3cf; cursor: pointer; }
.hk-live-dot { display: inline-flex; align-items: center; gap: 5px; color: #61dc9a !important; font: 800 7px Arial !important; }
.hk-live-dot::before { content: ""; width: 6px; height: 6px; }

.hk-action { min-width: 0; min-height: 47px; padding: 8px 10px; border: 1px solid #354253; border-radius: 10px; background: #202a36; color: #f2f5f8; text-align: right; cursor: pointer; transition: .18s ease; }
.hk-action:hover { border-color: #586a80; transform: translateY(-1px); }
.hk-action b, .hk-action small { display: block; }
.hk-action b { font-size: 9px; }
.hk-action small { margin-top: 4px; color: #7f8c9c; font-size: 7px; }
.hk-action-main { width: 100%; display: flex; align-items: center; gap: 10px; border-color: rgba(52,211,124,.4); background: linear-gradient(145deg, #27c873, #13894b); box-shadow: 0 9px 22px rgba(31,186,103,.18); }
.hk-action-main small { color: rgba(255,255,255,.7); }
.hk-action-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.22); border-radius: 9px; background: rgba(0,0,0,.14); color: #fff0bf; font: 22px Georgia, serif; }
.hk-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
.hk-join { height: 36px; display: flex; gap: 5px; margin-top: 7px; }
.hk-join input { min-width: 0; flex: 1; border: 1px solid #344153; border-radius: 9px; outline: 0; background: #09111a; color: #fff; padding: 0 10px; text-align: center; text-transform: uppercase; font: 800 10px Arial; letter-spacing: 1px; }
.hk-join button { width: 53px; border: 0; border-radius: 9px; background: #39485b; color: #fff; font-size: 8px; font-weight: 900; cursor: pointer; }
.hk-invite { margin-top: 7px; padding: 7px; border: 1px dashed rgba(228,184,79,.48); border-radius: 8px; color: #8693a3; font-size: 8px; text-align: center; }
.hk-invite button { margin-right: 4px; border: 0; background: none; color: #f5cc6c; font: 900 13px Arial; letter-spacing: 2px; cursor: pointer; }

.hk-room-stat { display: flex; align-items: center; justify-content: space-between; min-height: 27px; border-bottom: 1px solid rgba(255,255,255,.055); color: #8390a0; font-size: 8px; }
.hk-room-stat:last-child { border-bottom: 0; }
.hk-room-stat b { color: #dfe6ed; font-size: 8px; }
.hk-rooms { max-height: 124px; overflow: auto; scrollbar-width: thin; }
.hk-room { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 5px; padding: 7px 8px; border: 1px solid #303b4a; border-radius: 8px; background: #0c131c; }
.hk-room div { min-width: 0; }
.hk-room b, .hk-room small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-room b { color: #dfe5ec; font-size: 8px; }
.hk-room small { margin-top: 3px; color: #718092; font-size: 7px; }
.hk-room button { flex: 0 0 auto; padding: 5px 8px; border: 0; border-radius: 6px; background: var(--hk-gold); color: #1a150b; font-size: 7px; font-weight: 900; cursor: pointer; }
.hk-empty { display: block; padding: 10px 0; color: #6f7c8c; font-size: 8px; text-align: center; }
.hk-log { max-height: 100px; overflow: auto; }
.hk-log-item { display: flex; gap: 7px; padding: 6px 2px; border-bottom: 1px solid rgba(255,255,255,.05); color: #9ba8b6; font-size: 8px; line-height: 1.5; }
.hk-log-item i { width: 5px; height: 5px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: var(--hk-gold); }

.hk-toast { position: fixed; z-index: 9999; right: 50%; bottom: 28px; max-width: min(390px, calc(100vw - 30px)); padding: 11px 18px; opacity: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: rgba(8,14,20,.96); box-shadow: 0 18px 45px #000b; color: #e7edf3; font-size: 10px; text-align: center; transform: translate(50%, 18px); transition: .25s ease; }
.hk-toast.show { opacity: 1; transform: translate(50%, 0); }
.hk-toast.error { border-color: rgba(239,83,97,.45); color: #ffb7be; }
.hk-toast.success { border-color: rgba(49,209,124,.42); color: #a9f2cc; }
.hk-card-flight { position: absolute !important; z-index: 50 !important; pointer-events: none; animation: hkFlight .95s cubic-bezier(.18,.74,.3,1) forwards !important; }
.hk-deal-flight { z-index: 55 !important; filter: drop-shadow(0 10px 18px rgba(0,0,0,.3)); }
.hk-loading { pointer-events: none; }

@keyframes hkPulse { 50% { opacity: .48; box-shadow: 0 0 3px currentColor; } }
@keyframes hkAmbient { to { transform: translate(28px,-20px) scale(1.15); opacity: .18; } }
@keyframes hkLightSweep { 0%,62% { transform: translateX(-110%); } 79%,100% { transform: translateX(115%); } }
@keyframes hkTurn { 50% { inset: -9px; opacity: .18; } }
@keyframes hkInitialDeal {
    0% { opacity: 0; transform: translate(var(--deal-from-x, 0px), var(--deal-from-y, -225px)) rotate(var(--deal-from-r, 0deg)) scale(.52); }
    74% { opacity: 1; }
    100% { opacity: 1; transform: translateY(var(--lift, 0)) rotate(var(--fan, 0deg)); }
}
@keyframes hkBackDeal { from { opacity: 0; transform: translateY(10px) rotate(var(--r, 0deg)) scale(.72); } to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)) scale(1); } }
@keyframes hkCardLand { from { opacity: 0; transform: translate(var(--from-x, 0), var(--from-y, 0)) scale(.68); } }
@keyframes hkFlight { to { left: var(--to-x); top: var(--to-y); transform: rotate(var(--to-r)) scale(.94); } }
@keyframes hkTrickCollect {
    0% { opacity: 1; }
    64% { opacity: .98; }
    100% { opacity: 0; left: var(--to-x, 0px); top: var(--to-y, 0px); transform: rotate(var(--to-r, 0deg)) scale(.22); }
}
@keyframes hkStackPop { from { opacity: 0; transform: translateY(10px) scale(.72) rotate(var(--r,0deg)); } to { opacity: 1; transform: translateY(0) scale(1) rotate(var(--r,0deg)); } }
@keyframes hkStackPulse { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-2px) scale(1.08); filter: brightness(1.14); } 100% { transform: translateY(0) scale(1); } }
@keyframes hkOverlayIn { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .gx-hokm *, .gx-hokm *::before, .gx-hokm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

@media (max-width: 1500px) {
    .hk-layout { grid-template-columns: 1fr; }
    .hk-side { display: grid; grid-template-columns: 1fr 1fr; }
    .hk-entry { grid-row: span 2; }
    .hk-log-panel { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .gx-hokm { padding: 5px 4px 18px; }
    .hk-header { min-height: 58px; padding: 7px 9px; }
    .hk-online { display: none; }
    .hk-back { min-width: auto; width: 38px; padding: 0; font-size: 0; }
    .hk-back span { font-size: 15px; }
    .hk-brand h1 { font-size: 17px; }
    .hk-brand h1 em { font-size: 11px; }
    .hk-arena { min-height: 620px; background-position: center; }
    .hk-scoreboard { top: 10px; width: min(260px, 90%); height: 46px; }
    .hk-seat { min-width: 100px; max-width: 120px; height: 46px; padding: 4px 6px; }
    .hk-avatar { width: 32px; height: 32px; border-radius: 8px; }
    .hk-player { min-width: 50px; }
    .hk-player b { max-width: 60px; font-size: 8px; }
    .hk-opponent-hand { display: none; }
    .hk-seat-top { top: 66px; }
    .hk-seat-right { right: 4px; top: 42%; }
    .hk-seat-left { left: 4px; top: 42%; }
    .hk-seat-bottom { bottom: 126px; }
    .hk-table-center { top: 44%; width: 88%; height: 230px; }
    .hk-trick-stacks { top: 70px; width: calc(100% - 20px); }
    .hk-trick { inset: 38px 50px 34px; }
    .hk-card { width: 44px; height: 64px; border-radius: 6px; }
    .hk-card .rank { font-size: 11px; }
    .hk-card .corner-suit { top: 15px; font-size: 11px; }
    .hk-card .big-suit { font-size: 24px; }
    .hk-hand-wrap { right: 4px; bottom: 8px; left: 4px; }
    .hk-hand .hk-card { width: clamp(38px, 8vw, 48px); height: clamp(54px, 12vw, 68px); margin-left: clamp(-30px, -5.5vw, -20px); }
    .hk-hand { padding-left: 20px; justify-content: center; }
    .hk-hand-label { display: none; }
    .hk-trump-dialog { padding: 20px 14px 17px; width: min(440px, 94%); }
    .hk-table-suits { gap: 5px; }
    .hk-table-suits button { height: 58px; }
    .hk-table-suits button b { font-size: 24px; }
    .hk-side { grid-template-columns: 1fr; }
    .hk-entry { grid-row: auto; }
    .hk-log-panel { grid-column: auto; }
}