:root { --v1067-gold: #e8b84f; --v1067-cream: #fff0c8; --v1067-black: #100d0a; --v1067-felt: #741022; }
.app-shell { position: relative !important; width: 100vw !important; height: 100dvh !important; overflow: hidden !important; background: url("murlan-v1067-club-bg.png") center center / cover no-repeat rgb(18, 3, 3) !important; }
.topbar, .fullscreen-active .topbar { position: fixed !important; inset: 0px 0px auto !important; z-index: 100 !important; display: flex !important; grid-template-columns: none !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; height: clamp(58px, 8.2vh, 84px) !important; min-height: 0px !important; padding: 0px clamp(28px, 3.4vw, 62px) !important; border: 0px !important; background: linear-gradient(rgba(20, 4, 3, 0.84) 0px, rgba(20, 4, 3, 0.46) 58%, transparent 100%) !important; box-shadow: none !important; pointer-events: none !important; transform: none !important; }
.topbar .brand, .fullscreen-active .topbar .brand { position: static !important; display: flex !important; align-items: center !important; gap: clamp(12px, 1.5vw, 24px) !important; width: auto !important; height: auto !important; padding: 0px !important; border: 0px !important; background: none !important; box-shadow: none !important; pointer-events: auto !important; }
.topbar .brand-mark, .fullscreen-active .topbar .brand-mark { width: clamp(38px, 4.2vw, 66px) !important; height: clamp(43px, 4.8vw, 76px) !important; flex: 0 0 auto !important; border: 0px !important; border-radius: 12px !important; background: rgb(22, 8, 7) !important; box-shadow: rgb(156, 110, 44) 0px 0px 0px 1px, rgba(0, 0, 0, 0.733) 0px 8px 22px !important; overflow: hidden !important; }
.topbar .brand-mark img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.topbar .brand > span:last-child { display: block !important; }
.topbar .brand strong { display: block !important; color: rgb(246, 223, 160) !important; font: 800 clamp(20px, 2.3vw, 38px) / 1 "Playfair Display", serif !important; letter-spacing: 0.18em !important; }
.topbar .brand small, .topbar .round-pill { display: none !important; }
.topbar .top-actions, .fullscreen-active .topbar .top-actions { position: static !important; inset: auto !important; z-index: 1 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: clamp(9px, 1.05vw, 17px) !important; margin: 0px !important; transform: none !important; pointer-events: auto !important; }
.topbar .language-switch { height: clamp(38px, 4.7vw, 58px) !important; display: flex !important; align-items: center !important; gap: 2px !important; padding: 4px !important; border: 1px solid rgb(178, 130, 55) !important; border-radius: 999px !important; background: rgba(16, 14, 13, 0.81) !important; box-shadow: rgba(0, 0, 0, 0.533) 0px 7px 18px !important; color: rgb(233, 211, 161) !important; font-size: clamp(10px, 1.2vw, 18px) !important; }
.topbar .language-switch b, .topbar .language-switch i { height: 100% !important; display: grid !important; place-items: center !important; padding: 0px clamp(12px, 1.3vw, 20px) !important; border-radius: 999px !important; font-style: normal !important; }
.topbar .language-switch b.active, .topbar .language-switch i.active { background: linear-gradient(rgb(249, 218, 124), rgb(189, 126, 37)) !important; color: rgb(36, 19, 8) !important; opacity: 1 !important; }
.topbar .icon-btn, .fullscreen-active .topbar .icon-btn { position: relative !important; display: grid !important; place-items: center !important; width: clamp(38px, 4.7vw, 62px) !important; height: clamp(38px, 4.7vw, 62px) !important; min-width: 0px !important; min-height: 0px !important; margin: 0px !important; padding: 0px !important; border: 1px solid rgb(178, 130, 55) !important; border-radius: 50% !important; background: rgba(16, 14, 13, 0.81) !important; box-shadow: rgba(0, 0, 0, 0.533) 0px 7px 18px !important; color: rgb(244, 217, 138) !important; font-size: 0px !important; }
.topbar .icon-btn::before { content: ""; width: 44%; height: 44%; display: block; background: currentcolor; mask: var(--v1067-icon) center/contain no-repeat; }
.game-emoji { --v1067-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='9' cy='10' r='1'/%3E%3Ccircle cx='15' cy='10' r='1'/%3E%3Cpath d='M8 15c1.1 1.2 2.4 1.8 4 1.8s2.9-.6 4-1.8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.game-chat { --v1067-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v12H9l-5 3V5Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.game-menu { --v1067-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 7h14M5 12h14M5 17h14' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
#gameStage, .fullscreen-active #gameStage { position: absolute !important; inset: 0px !important; width: 100% !important; height: 100% !important; overflow: hidden !important; background: linear-gradient(rgba(22, 4, 3, 0.125), rgba(18, 2, 2, 0.533)) !important; transform: none !important; }
#gameStage::before { content: "" !important; position: absolute !important; inset: 0px !important; background: radial-gradient(at 50% 54%, transparent 0px, transparent 48%, rgba(18, 2, 2, 0.44) 82%, rgba(7, 1, 1, 0.75) 100%) !important; filter: none !important; pointer-events: none !important; }
#gameStage .table-wrap, .fullscreen-active #gameStage .table-wrap { position: absolute !important; inset: clamp(62px, 7.1vh, 78px) clamp(34px, 3vw, 58px) clamp(128px, 18.5vh, 190px) !important; width: auto !important; height: auto !important; padding: 0px !important; perspective: none !important; transform: none !important; }
#gameStage .wood-rim, .fullscreen-active #gameStage .wood-rim { position: relative !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0px !important; padding: clamp(14px, 1.45vw, 24px) !important; border: 1px solid rgb(242, 202, 115) !important; border-radius: 50% / 28% !important; background: linear-gradient(104deg, rgb(44, 17, 7) 0px, rgb(117, 64, 29) 8%, rgb(209, 144, 67) 11%, rgb(75, 34, 14) 15%, rgb(33, 16, 6) 45%, rgb(111, 55, 23) 80%, rgb(215, 155, 76) 88%, rgb(53, 21, 8) 93%, rgb(22, 7, 4) 100%) !important; box-shadow: rgba(0, 0, 0, 0.933) 0px 28px 70px, rgb(28, 10, 5) 0px 0px 0px 3px, rgba(255, 232, 173, 0.6) 0px 3px 4px inset, rgb(16, 4, 1) 0px -12px 20px inset !important; transform: none !important; filter: none !important; }
#gameStage .wood-rim::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgb(94, 44, 19); border-radius: inherit; pointer-events: none; }
#gameStage .table-felt, .fullscreen-active #gameStage .table-felt { position: relative !important; width: 100% !important; height: 100% !important; overflow: visible !important; border: 2px solid rgb(59, 20, 15) !important; border-radius: 50% / 28% !important; background: radial-gradient(at 50% 44%, rgb(163, 24, 49) 0px, rgb(129, 17, 38) 42%, rgb(90, 11, 26) 72%, rgb(53, 6, 14) 100%) !important; box-shadow: rgba(32, 0, 6, 0.85) 0px 0px 92px inset, rgba(240, 189, 84, 0.23) 0px 0px 0px 3px inset !important; transform: none !important; }
#gameStage .table-felt::before { content: "" !important; position: absolute !important; inset: 4.5% !important; border: 1px solid rgba(207, 139, 51, 0.243) !important; border-radius: 50% / 29% !important; pointer-events: none !important; }
#gameStage .table-felt::after { display: none !important; }
#gameStage .felt-pattern { position: absolute !important; inset: 0px !important; opacity: 0.035 !important; background-image: repeating-linear-gradient(27deg, transparent 0px, transparent 16px, rgb(255, 255, 255) 17px, rgb(255, 255, 255) 18px) !important; mask-image: radial-gradient(rgb(0, 0, 0) 25%, transparent 92%) !important; }
.table-brand { top: 51% !important; opacity: 0.075 !important; color: rgb(200, 150, 69) !important; }
.table-brand img { display: none !important; }
.table-brand strong { font-size: clamp(22px, 2.7vw, 44px) !important; }
.table-brand small { font-size: clamp(7px, 0.75vw, 12px) !important; }
#gameStage .seats { position: absolute !important; inset: 0px !important; z-index: 30 !important; pointer-events: none !important; }
#gameStage .seat, .fullscreen-active #gameStage .seat { position: absolute !important; z-index: 32 !important; display: flex !important; grid-template-columns: none !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0px !important; min-width: 0px !important; max-width: none !important; min-height: 0px !important; width: auto !important; height: auto !important; padding: 0px !important; border: 0px !important; border-radius: 0px !important; background: none !important; box-shadow: none !important; overflow: visible !important; pointer-events: none !important; }
#gameStage .seat .avatar { position: relative !important; width: clamp(62px, 6.2vw, 104px) !important; height: clamp(62px, 6.2vw, 104px) !important; flex: 0 0 clamp(62px, 6.2vw, 104px) !important; border: 3px solid rgb(215, 168, 72) !important; border-radius: 50% !important; background-color: rgb(33, 16, 13) !important; background-image: url("murlan-v1067-player-portraits.png") !important; background-repeat: no-repeat !important; background-size: 300% 100% !important; box-shadow: rgb(19, 10, 6) 0px 0px 0px 4px, rgba(0, 0, 0, 0.867) 0px 9px 22px !important; overflow: hidden !important; }
.seat[data-seat="0"] .avatar, .seat[data-seat="2"] .avatar { background-position: 0px 50% !important; }
.seat[data-seat="1"] .avatar { background-position: 50% 50% !important; }
.seat[data-seat="3"] .avatar { background-position: 100% 50% !important; }
.seat .avatar i { display: none !important; }
.seat .avatar img { position: absolute !important; inset: 0px !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; }
#gameStage .seat.active .avatar { border-color: rgb(255, 228, 124) !important; box-shadow: rgba(255, 224, 107, 0.27) 0px 0px 0px 5px, rgba(255, 199, 68, 0.72) 0px 0px 30px, rgba(0, 0, 0, 0.867) 0px 9px 22px !important; }
#gameStage .turn-timer { inset: -6px auto auto 50% !important; width: calc(12px + clamp(62px, 6.2vw, 104px)) !important; height: calc(12px + clamp(62px, 6.2vw, 104px)) !important; transform: translateX(-50%) !important; }
#gameStage .seat-meta { position: relative !important; z-index: 2 !important; min-width: clamp(92px, 8.5vw, 145px) !important; display: grid !important; justify-items: center !important; margin: clamp(-6px, -0.35vw, -3px) 0px 0px !important; padding: clamp(5px, 0.55vw, 9px) clamp(12px, 1.3vw, 22px) !important; border: 1px solid rgb(185, 133, 54) !important; border-radius: 999px !important; background: rgba(16, 13, 11, 0.93) !important; box-shadow: rgba(0, 0, 0, 0.733) 0px 7px 18px !important; text-align: center !important; }
.seat-meta strong { max-width: 120px !important; padding: 0px !important; background: none !important; color: rgb(255, 242, 211) !important; font: 800 clamp(12px, 1.2vw, 20px) / 1.05 Manrope !important; }
.seat-meta span { margin: 4px 0px 0px !important; color: rgb(241, 198, 94) !important; font: 900 clamp(9px, 0.9vw, 14px) / 1 Manrope !important; }
#gameStage .seat-top { inset: -7.5% auto auto 50% !important; transform: translateX(-50%) !important; }
#gameStage .seat-left { inset: 48% auto auto -2.9% !important; transform: translateY(-50%) !important; }
#gameStage .seat-right { inset: 48% -2.9% auto auto !important; transform: translateY(-50%) !important; }
#gameStage .seat-bottom { position: absolute !important; inset: auto auto -18.5% -3.2% !important; transform: none !important; }
#gameStage .seat-bottom::after { content: "TI"; position: absolute; right: -3px; top: clamp(42px, 4.4vw, 72px); z-index: 5; width: clamp(25px, 2.5vw, 40px); height: clamp(25px, 2.5vw, 40px); display: grid; place-items: center; border: 2px solid rgb(44, 22, 8); border-radius: 50%; background: rgb(229, 183, 72); color: rgb(37, 20, 7); font: 900 clamp(9px, 0.9vw, 14px) Manrope; box-shadow: rgb(231, 186, 83) 0px 0px 0px 2px; }
#gameStage .opponent-hand { position: absolute !important; z-index: 24 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: max-content !important; height: max-content !important; opacity: 1 !important; visibility: visible !important; transform-origin: center center !important; pointer-events: none !important; }
#gameStage .opponent-hand .card-back { display: block !important; width: clamp(31px, 3vw, 49px) !important; height: clamp(48px, 4.65vw, 76px) !important; flex: 0 0 clamp(31px, 3vw, 49px) !important; margin-left: clamp(-25px, -1.5vw, -15px) !important; border: 1px solid rgb(255, 230, 179) !important; border-radius: 5px !important; background-color: rgb(158, 29, 50) !important; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.07) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.07) 75%), linear-gradient(-45deg, rgba(255, 255, 255, 0.07) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.07) 75%), radial-gradient(circle, rgb(233, 189, 84) 0px, rgb(233, 189, 84) 16%, transparent 17%) !important; background-size: 9px 9px, 9px 9px, 100% 100% !important; box-shadow: rgba(0, 0, 0, 0.733) 0px 5px 10px !important; }
.opponent-hand .card-back:first-child { margin-left: 0px !important; }
#gameStage .opponent-top { left: 50% !important; right: auto !important; top: 12.5% !important; transform: translateX(-50%) !important; }
#gameStage .opponent-left { left: 11.2% !important; right: auto !important; top: 48% !important; transform: translateY(-50%) rotate(90deg) !important; }
#gameStage .opponent-right { left: auto !important; right: 11.2% !important; top: 48% !important; transform: translateY(-50%) rotate(-90deg) !important; }
#gameStage .center-play { position: absolute !important; inset: 29% 36% 31% !important; z-index: 20 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.center-play .pile { min-width: clamp(150px, 14vw, 235px) !important; height: clamp(105px, 10vw, 158px) !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.pile .card { width: clamp(58px, 5vw, 82px) !important; height: clamp(84px, 7.3vw, 119px) !important; flex-basis: clamp(58px, 5vw, 82px) !important; margin-left: clamp(-39px, -2.3vw, -26px) !important; border-radius: 7px !important; box-shadow: rgba(0, 0, 0, 0.667) 0px 8px 17px !important; transform: none !important; }
.pile .card:first-child { margin-left: 0px !important; }
.center-play .combo-label { bottom: -14px !important; color: rgb(243, 205, 112) !important; font-size: clamp(8px, 0.8vw, 12px) !important; }
.empty-pile { border-color: rgba(216, 174, 89, 0.376) !important; color: rgba(224, 189, 109, 0.6) !important; background: rgba(53, 8, 19, 0.333) !important; }
#gameStage .player-dock, #gameStage .player-dock:not(.many-cards), #gameStage .player-dock.many-cards, .fullscreen-active #gameStage .player-dock { position: absolute !important; left: 17.4% !important; right: 23.2% !important; bottom: 1.6% !important; width: auto !important; height: 27.5% !important; padding: 0px !important; border: 0px !important; background: none !important; box-shadow: none !important; z-index: 42 !important; transform: none !important; pointer-events: none !important; }
#gameStage .status-row { position: absolute !important; left: 50% !important; top: -20% !important; z-index: 50 !important; width: auto !important; display: block !important; margin: 0px !important; transform: translateX(-50%) !important; }
.turn-badge-v1067 { height: clamp(38px, 4.5vw, 58px); display: flex; align-items: center; padding: 0px 0px 0px clamp(22px, 2.2vw, 36px); border: 1px solid rgb(212, 163, 67); border-radius: 999px; background: rgba(35, 11, 12, 0.85); box-shadow: rgba(227, 168, 49, 0.157) 0px 0px 24px; color: rgb(242, 209, 126); white-space: nowrap; }
.turn-badge-v1067 span { font-size: clamp(10px, 1.05vw, 16px); font-weight: 900; letter-spacing: 0.1em; }
.turn-badge-v1067 strong { width: clamp(42px, 4.3vw, 62px); height: clamp(42px, 4.3vw, 62px); display: grid; place-items: center; margin-left: clamp(16px, 1.5vw, 24px); border: 3px solid rgb(193, 139, 48); border-radius: 50%; background: rgb(22, 13, 10); color: rgb(255, 224, 139); font-size: clamp(16px, 1.7vw, 26px); box-shadow: rgb(27, 11, 8) 0px 0px 0px 2px; }
.player-copy-v1067 { display: none !important; }
#gameStage .hand-scroll { width: 100% !important; height: 100% !important; overflow: visible !important; pointer-events: none !important; }
#gameStage .hand, #gameStage .hand.many-cards { width: 100% !important; height: 100% !important; min-width: max-content !important; display: flex !important; grid-template-columns: none !important; grid-template-rows: none !important; align-items: flex-end !important; justify-content: center !important; padding: 0px !important; overflow: visible !important; pointer-events: none !important; transform: none !important; }
#gameStage .hand .card, #gameStage .hand.many-cards .card { position: relative !important; width: clamp(68px, 6.2vw, 99px) !important; height: clamp(100px, 9vw, 144px) !important; flex: 0 0 clamp(68px, 6.2vw, 99px) !important; margin-left: var(--hand-overlap,-28px) !important; border: 1px solid rgb(255, 255, 255) !important; border-radius: 8px !important; background: linear-gradient(145deg, rgb(255, 254, 248), rgb(238, 234, 224)) !important; box-shadow: rgba(0, 0, 0, 0.6) 0px 10px 18px, rgb(217, 212, 199) 0px 0px 0px 1px inset !important; transform-origin: 50% 155% !important; pointer-events: auto !important; }
.hand .card:first-child { margin-left: 0px !important; }
.hand .card.selected, .hand .card.selected:hover { margin-right: 0px !important; border-color: rgb(255, 228, 123) !important; box-shadow: rgb(255, 200, 58) 0px 0px 0px 3px, rgba(255, 216, 94, 0.667) 0px 0px 25px, rgba(0, 0, 0, 0.733) 0px 13px 21px !important; z-index: 60 !important; }
.hand .card .corner { top: 6px !important; left: 8px !important; font-size: clamp(16px, 1.55vw, 24px) !important; }
.hand .card .corner small { font-size: clamp(14px, 1.35vw, 21px) !important; }
.hand .card .suit-big { font-size: clamp(32px, 3vw, 48px) !important; }
.hand .card.joker .corner { font-size: clamp(8px, 0.8vw, 12px) !important; }
.hand .card.joker .suit-big { font-size: clamp(28px, 2.7vw, 43px) !important; }
.controls, .fullscreen-active .controls { position: fixed !important; inset: 0px !important; z-index: 45 !important; width: 100% !important; height: 100% !important; margin: 0px !important; background: none !important; pointer-events: none !important; transform: none !important; }
.controls:not(.turn-visible):not(.swap-visible) .btn { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.controls.turn-visible #playBtn, .controls.swap-visible #playBtn, .controls.turn-visible #passBtn { position: fixed !important; left: auto !important; bottom: clamp(36px, 5.5vh, 60px) !important; height: clamp(54px, 7.2vh, 76px) !important; margin: 0px !important; border-radius: 999px !important; pointer-events: auto !important; font-size: clamp(12px, 1.2vw, 18px) !important; letter-spacing: 0.1em !important; }
.controls.turn-visible #playBtn, .controls.swap-visible #playBtn { right: 12.1% !important; width: clamp(126px, 11.3vw, 190px) !important; border: 1px solid rgb(255, 230, 154) !important; background: linear-gradient(rgb(248, 220, 136), rgb(189, 126, 36)) !important; color: rgb(40, 21, 8) !important; box-shadow: rgb(111, 67, 15) 0px 6px 0px, rgba(0, 0, 0, 0.667) 0px 10px 24px !important; }
.controls.turn-visible #passBtn { right: 2.4% !important; width: clamp(104px, 9.2vw, 154px) !important; border: 1px solid rgb(221, 180, 84) !important; background: rgba(16, 15, 14, 0.918) !important; color: rgb(255, 240, 204) !important; box-shadow: rgba(0, 0, 0, 0.667) 0px 8px 20px !important; }
.quick-popover, .game-menu-popover { top: clamp(58px, 8.2vh, 84px) !important; }
.game-menu-popover { right: clamp(20px, 3vw, 54px) !important; }
@media (orientation: landscape) and (max-height: 700px) {
.topbar, .fullscreen-active .topbar { height: 50px !important; padding: 0px max(16px, 2.8vw) !important; }
.topbar .brand-mark { width: 32px !important; height: 36px !important; }
.topbar .brand strong { font-size: 17px !important; }
.topbar .language-switch { height: 35px !important; font-size: 9px !important; }
.topbar .icon-btn, .fullscreen-active .topbar .icon-btn { width: 35px !important; height: 35px !important; }
.topbar .top-actions { gap: 7px !important; }
#gameStage .table-wrap, .fullscreen-active #gameStage .table-wrap { inset: 7.2% 3.1% 18.8% !important; }
#gameStage .wood-rim { padding: 10px !important; }
#gameStage .seat .avatar { width: 52px !important; height: 52px !important; flex-basis: 52px !important; }
.seat-meta strong { font-size: 10px !important; }
.seat-meta span { font-size: 8px !important; }
#gameStage .seat-meta { min-width: 76px !important; padding: 4px 11px !important; }
.seat-bottom::after { top: 35px !important; width: 25px !important; height: 25px !important; font-size: 8px !important; }
#gameStage .opponent-hand .card-back { width: 27px !important; height: 41px !important; flex-basis: 27px !important; margin-left: -14px !important; }
#gameStage .opponent-top { top: 12.5% !important; }
#gameStage .opponent-left { left: 10.8% !important; }
#gameStage .opponent-right { right: 10.8% !important; }
#gameStage .center-play { inset: 28% 36% 29% !important; }
.pile .card { width: 50px !important; height: 72px !important; flex-basis: 50px !important; margin-left: -25px !important; }
#gameStage .player-dock, #gameStage .player-dock:not(.many-cards), #gameStage .player-dock.many-cards { left: 17.5% !important; right: 23.5% !important; bottom: 1.3% !important; height: 28% !important; }
#gameStage .status-row { top: -23% !important; }
.turn-badge-v1067 { height: 34px !important; padding-left: 18px !important; }
.turn-badge-v1067 span { font-size: 9px !important; }
.turn-badge-v1067 strong { width: 38px !important; height: 38px !important; margin-left: 14px !important; font-size: 15px !important; }
#gameStage .hand .card, #gameStage .hand.many-cards .card { width: 64px !important; height: 93px !important; flex-basis: 64px !important; }
.hand .card .corner { font-size: 15px !important; }
.hand .card .corner small { font-size: 13px !important; }
.hand .card .suit-big { font-size: 30px !important; }
.controls.turn-visible #playBtn, .controls.swap-visible #playBtn, .controls.turn-visible #passBtn { bottom: 4.2% !important; height: 46px !important; }
.controls.turn-visible #playBtn, .controls.swap-visible #playBtn { right: 11.8% !important; width: 108px !important; }
.controls.turn-visible #passBtn { right: 2.2% !important; width: 90px !important; }
}
@media (orientation: landscape) and (max-height: 430px) {
.topbar, .fullscreen-active .topbar { height: 44px !important; }
.topbar .brand-mark { width: 27px !important; height: 31px !important; }
.topbar .brand strong { font-size: 14px !important; }
.topbar .language-switch { height: 31px !important; }
.topbar .language-switch b, .topbar .language-switch i { padding: 0px 10px !important; }
.topbar .icon-btn, .fullscreen-active .topbar .icon-btn { width: 31px !important; height: 31px !important; }
#gameStage .table-wrap, .fullscreen-active #gameStage .table-wrap { inset: 7% 2.8% 19% !important; }
#gameStage .wood-rim { padding: 8px !important; }
#gameStage .seat .avatar { width: 44px !important; height: 44px !important; flex-basis: 44px !important; }
#gameStage .seat-meta { min-width: 66px !important; padding: 3px 9px !important; }
.seat-meta strong { font-size: 9px !important; }
.seat-meta span { font-size: 7px !important; }
#gameStage .seat-bottom { bottom: -19% !important; }
.seat-bottom::after { top: 29px !important; width: 21px !important; height: 21px !important; }
#gameStage .opponent-hand .card-back { width: 23px !important; height: 35px !important; flex-basis: 23px !important; margin-left: -12px !important; }
#gameStage .center-play { inset: 27% 36% 28% !important; }
.pile .card { width: 44px !important; height: 64px !important; flex-basis: 44px !important; }
#gameStage .player-dock, #gameStage .player-dock:not(.many-cards), #gameStage .player-dock.many-cards { left: 16.8% !important; right: 22.5% !important; bottom: 0.5% !important; height: 29.5% !important; }
#gameStage .status-row { top: -25% !important; }
.turn-badge-v1067 { height: 29px !important; }
.turn-badge-v1067 strong { width: 33px !important; height: 33px !important; }
#gameStage .hand .card, #gameStage .hand.many-cards .card { width: 57px !important; height: 83px !important; flex-basis: 57px !important; }
.controls.turn-visible #playBtn, .controls.swap-visible #playBtn, .controls.turn-visible #passBtn { bottom: 3.7% !important; height: 39px !important; }
.controls.turn-visible #playBtn, .controls.swap-visible #playBtn { right: 11.5% !important; width: 92px !important; }
.controls.turn-visible #passBtn { right: 2% !important; width: 78px !important; }
}
#gameStage, .fullscreen-active #gameStage { --table-left: 15.2%; --table-right: 15.2%; --table-top: 17.2%; --table-bottom: 15.5%; background: radial-gradient(at 50% 45%, rgba(122, 17, 37, 0.33), transparent 57%), linear-gradient(rgb(59, 7, 16) 0px, rgb(25, 3, 7) 100%) !important; }
#gameStage::before { background: repeating-linear-gradient(45deg, transparent 0px, transparent 29px, rgba(255, 255, 255, 0.02) 30px, rgba(255, 255, 255, 0.02) 31px), radial-gradient(at 50% 48%, transparent 0px, transparent 56%, rgba(12, 0, 2, 0.45) 84%, rgba(7, 0, 1, 0.72) 100%) !important; }
#gameStage .table-wrap, .fullscreen-active #gameStage .table-wrap { inset: var(--table-top) var(--table-right) var(--table-bottom) var(--table-left) !important; }
#gameStage .wood-rim, .fullscreen-active #gameStage .wood-rim { padding: clamp(9px, 1vw, 15px) !important; border-radius: 15% / 24% !important; background: linear-gradient(104deg, rgb(33, 16, 6) 0px, rgb(124, 64, 27) 6%, rgb(227, 173, 88) 10%, rgb(89, 48, 24) 14%, rgb(36, 17, 7) 48%, rgb(113, 56, 23) 82%, rgb(239, 189, 103) 90%, rgb(50, 20, 7) 95%, rgb(23, 7, 4) 100%) !important; box-shadow: rgba(0, 0, 0, 0.933) 0px 22px 58px, rgb(22, 8, 5) 0px 0px 0px 3px, rgba(255, 231, 168, 0.6) 0px 3px 4px inset, rgb(16, 4, 1) 0px -9px 15px inset !important; }
#gameStage .table-felt, .fullscreen-active #gameStage .table-felt { border-radius: 14% / 23% !important; background: radial-gradient(at 50% 44%, rgb(182, 31, 57) 0px, rgb(142, 21, 44) 43%, rgb(103, 16, 32) 74%, rgb(60, 7, 16) 100%) !important; box-shadow: rgba(39, 0, 8, 0.85) 0px 0px 68px inset, rgba(240, 189, 84, 0.24) 0px 0px 0px 2px inset !important; }
#gameStage .felt-pattern { opacity: 0.055 !important; }
#gameStage .table-brand { top: 49% !important; opacity: 0.095 !important; }
#gameStage .seat .avatar { width: clamp(64px, 6vw, 88px) !important; height: clamp(64px, 6vw, 88px) !important; flex-basis: clamp(64px, 6vw, 88px) !important; border-width: 3px !important; }
#gameStage .seat-meta { min-width: clamp(82px, 7.5vw, 108px) !important; padding: 5px 12px !important; border: 1px solid rgb(201, 147, 53) !important; border-radius: 16px !important; background: rgba(17, 10, 8, 0.9) !important; box-shadow: rgba(0, 0, 0, 0.6) 0px 5px 13px !important; }
#gameStage .seat-meta strong { font-size: clamp(10px, 0.92vw, 14px) !important; }
#gameStage .seat-meta span { font-size: clamp(8px, 0.75vw, 11px) !important; }
#gameStage .seat-top { top: -17.5% !important; }
#gameStage .seat-left { left: -14.2% !important; top: 50% !important; }
#gameStage .seat-right { right: -14.2% !important; top: 50% !important; }
#gameStage .seat-bottom { left: -14.2% !important; bottom: -17.5% !important; }
#gameStage .turn-timer { width: calc(12px + clamp(64px, 6vw, 88px)) !important; height: calc(12px + clamp(64px, 6vw, 88px)) !important; }
#gameStage .opponent-hand .card-back { width: clamp(34px, 3vw, 44px) !important; height: clamp(52px, 4.6vw, 68px) !important; flex-basis: clamp(34px, 3vw, 44px) !important; margin-left: clamp(-21px, -1.35vw, -14px) !important; }
#gameStage .opponent-top { top: 3.4% !important; }
#gameStage .opponent-left { left: 2.8% !important; top: 50% !important; }
#gameStage .opponent-right { right: 2.8% !important; top: 50% !important; }
#gameStage .center-play { inset: 29% 35% 28% !important; }
#gameStage .pile { min-width: 180px !important; height: 118px !important; }
#gameStage .pile .card { width: clamp(64px, 5.3vw, 78px) !important; height: clamp(92px, 7.7vw, 114px) !important; flex-basis: clamp(64px, 5.3vw, 78px) !important; margin-left: clamp(-40px, -2.5vw, -28px) !important; }
#gameStage .player-dock, #gameStage .player-dock:not(.many-cards), #gameStage .player-dock.many-cards, .fullscreen-active #gameStage .player-dock { left: 20.5% !important; right: 20.5% !important; bottom: -5.8% !important; height: 38% !important; }
#gameStage .hand, #gameStage .hand.many-cards { align-items: flex-end !important; justify-content: center !important; }
#gameStage .hand .card, #gameStage .hand.many-cards .card { width: clamp(86px, 7.2vw, 106px) !important; height: clamp(126px, 10.6vw, 156px) !important; flex-basis: clamp(86px, 7.2vw, 106px) !important; margin-left: clamp(-37px, -2.15vw, -25px) !important; border-radius: 9px !important; transform-origin: 50% 170% !important; }
#gameStage .hand .card.selected, #gameStage .hand .card.selected:hover {  }
@media (orientation: landscape) and (max-height: 700px) {
#gameStage, .fullscreen-active #gameStage { --table-left: 15.4%; --table-right: 15.4%; --table-top: 17.4%; --table-bottom: 15.2%; }
#gameStage .seat .avatar { width: 62px !important; height: 62px !important; flex-basis: 62px !important; }
#gameStage .seat-top { top: -17% !important; }
#gameStage .seat-left { left: -14.5% !important; }
#gameStage .seat-right { right: -14.5% !important; }
#gameStage .seat-bottom { left: -14.5% !important; bottom: -18% !important; }
#gameStage .turn-timer { width: 72px !important; height: 72px !important; }
#gameStage .opponent-top { top: 3% !important; }
#gameStage .opponent-left { left: 2.4% !important; }
#gameStage .opponent-right { right: 2.4% !important; }
#gameStage .player-dock, #gameStage .player-dock:not(.many-cards), #gameStage .player-dock.many-cards { left: 20.5% !important; right: 20.5% !important; bottom: -6.2% !important; height: 38.5% !important; }
#gameStage .hand .card, #gameStage .hand.many-cards .card { width: 88px !important; height: 129px !important; flex-basis: 88px !important; margin-left: -27px !important; }
#gameStage .pile .card { width: 62px !important; height: 91px !important; flex-basis: 62px !important; }
}
@media (orientation: landscape) and (max-height: 430px) {
#gameStage, .fullscreen-active #gameStage { --table-left: 14.8%; --table-right: 14.8%; --table-top: 16.5%; --table-bottom: 14.5%; }
#gameStage .seat .avatar { width: 46px !important; height: 46px !important; flex-basis: 46px !important; }
#gameStage .seat-top { top: -16.5% !important; }
#gameStage .seat-left { left: -13.2% !important; }
#gameStage .seat-right { right: -13.2% !important; }
#gameStage .seat-bottom { left: -13.2% !important; bottom: -18.5% !important; }
#gameStage .turn-timer { width: 55px !important; height: 55px !important; }
#gameStage .player-dock, #gameStage .player-dock:not(.many-cards), #gameStage .player-dock.many-cards { left: 20% !important; right: 20% !important; bottom: -7% !important; height: 40% !important; }
#gameStage .hand .card, #gameStage .hand.many-cards .card { width: 70px !important; height: 102px !important; flex-basis: 70px !important; margin-left: -22px !important; }
}
.app-shell { background-color: rgb(63, 7, 17) !important; background-image: linear-gradient(transparent 0px, transparent 58%, rgba(75, 8, 20, 0.78) 100%), url("murlan-v1067-club-bg.png") !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; }
.topbar, .fullscreen-active .topbar, body.fullscreen-active .topbar { display: flex !important; grid-template-columns: none !important; align-items: center !important; justify-content: space-between !important; background: transparent !important; border: 0px !important; box-shadow: none !important; overflow: visible !important; pointer-events: auto !important; }
#gameStage, .fullscreen-active #gameStage { background: transparent !important; }
#gameStage::before { background: radial-gradient(at 50% 52%, transparent 0px, transparent 58%, rgba(55, 5, 14, 0.18) 82%, rgba(38, 3, 9, 0.28) 100%) !important; }
#gameStage .player-dock, #gameStage .player-dock:not(.many-cards), #gameStage .player-dock.many-cards { background: transparent !important; border: 0px !important; box-shadow: none !important; }
.topbar .top-actions, .fullscreen-active .topbar .top-actions, body.fullscreen-active .top-actions { position: relative !important; inset: auto !important; z-index: 900 !important; justify-self: auto !important; margin-left: auto !important; overflow: visible !important; transform: none !important; pointer-events: auto !important; }
.topbar .language-switch { position: relative !important; z-index: 902 !important; display: flex !important; pointer-events: auto !important; touch-action: manipulation !important; }
.topbar .icon-btn, .fullscreen-active .topbar .icon-btn, body.fullscreen-active .topbar .icon-btn { position: relative !important; z-index: 902 !important; display: grid !important; pointer-events: auto !important; touch-action: manipulation !important; }
.topbar .icon-btn::before { pointer-events: none !important; }
.quick-popover, .game-menu-popover { position: fixed !important; z-index: 1200 !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; }
.quick-popover:not([hidden]) { display: flex !important; }
.game-menu-popover:not([hidden]) { display: grid !important; }
#gameStage .seat-top { top: -3.6% !important; z-index: 70 !important; }
#gameStage .seat-top .seat-meta { z-index: 72 !important; }
#gameStage.swap-active .center-play { inset: 31% 31% 20% !important; align-items: center !important; }
#gameStage.swap-active .swap-table-pile { width: min(480px, 43vw) !important; height: auto !important; min-height: 0px !important; }
#gameStage.swap-active .swap-selection-stage, #gameStage.swap-active .swap-table-message { width: 100% !important; gap: 8px !important; padding: 14px 18px !important; border-radius: 20px !important; }
#gameStage.swap-active .swap-selection-stage > b, #gameStage.swap-active .swap-table-message > b { font-size: clamp(17px, 1.7vw, 25px) !important; line-height: 1.05 !important; }
#gameStage.swap-active .swap-selection-cards { grid-template-columns: minmax(0px, 1fr) 38px minmax(0px, 1fr) !important; align-items: end !important; gap: 10px !important; }
#gameStage.swap-active .swap-table-card { grid-template-rows: 24px auto !important; place-items: end center !important; gap: 6px !important; }
#gameStage.swap-active .swap-table-card > small { min-height: 24px !important; display: grid !important; place-items: center !important; font-size: clamp(7px, 0.72vw, 11px) !important; line-height: 1.2 !important; }
#gameStage.swap-active .swap-table-card .card, #gameStage.swap-active .swap-card-back { width: clamp(64px, 5.6vw, 86px) !important; height: clamp(93px, 8.2vw, 125px) !important; margin: 0px !important; transform: none !important; }
#gameStage.swap-active .swap-table-arrow { align-self: center !important; font-size: 27px !important; }
#gameStage.swap-active .swap-selection-stage > small, #gameStage.swap-active .swap-table-message > small { font-size: clamp(7px, 0.66vw, 10px) !important; line-height: 1.2 !important; }
#gameStage.swap-active .hand .card, #gameStage.swap-active .hand.many-cards .card { transform-origin: 50% 100% !important; }
#gameStage.swap-active .hand .card.selected, #gameStage.swap-active .hand .card.selected:hover, #gameStage.swap-active .hand.many-cards .card.selected, #gameStage.swap-active .hand.many-cards .card.selected:hover {  }
@media (orientation: landscape) and (max-height: 700px) {
#gameStage .seat-top { top: -3% !important; }
#gameStage.swap-active .center-play { inset: 30% 30% 18% !important; }
#gameStage.swap-active .swap-table-pile { width: min(430px, 43vw) !important; }
#gameStage.swap-active .swap-selection-stage, #gameStage.swap-active .swap-table-message { gap: 5px !important; padding: 9px 13px !important; border-radius: 15px !important; }
#gameStage.swap-active .swap-table-card { grid-template-rows: 18px auto !important; gap: 4px !important; }
#gameStage.swap-active .swap-table-card > small { min-height: 18px !important; font-size: 7px !important; }
#gameStage.swap-active .swap-table-card .card, #gameStage.swap-active .swap-card-back { width: 56px !important; height: 82px !important; }
#gameStage.swap-active .swap-selection-stage > b, #gameStage.swap-active .swap-table-message > b { font-size: 15px !important; }
}
@media (orientation: landscape) and (max-height: 430px) {
#gameStage .seat-top { top: -2.7% !important; }
#gameStage.swap-active .center-play { inset: 29% 29% 17% !important; }
#gameStage.swap-active .swap-table-pile { width: min(390px, 44vw) !important; }
#gameStage.swap-active .swap-selection-stage, #gameStage.swap-active .swap-table-message { padding: 7px 10px !important; }
#gameStage.swap-active .swap-table-card .card, #gameStage.swap-active .swap-card-back { width: 49px !important; height: 71px !important; }
#gameStage.swap-active .swap-selection-cards { grid-template-columns: minmax(0px, 1fr) 28px minmax(0px, 1fr) !important; gap: 6px !important; }
}
#gameStage .seat-top { top: -17.5% !important; }
#gameStage .seat-bottom { left: -12% !important; bottom: -3.5% !important; }
#gameStage .opponent-left { left: -11% !important; }
#gameStage .opponent-right { right: -11% !important; }
@media (orientation: landscape) and (max-height: 700px) {
#gameStage .seat-top { top: -17% !important; }
#gameStage .seat-bottom { left: -12% !important; bottom: -4% !important; }
#gameStage .opponent-left { left: -11% !important; }
#gameStage .opponent-right { right: -11% !important; }
}
@media (orientation: landscape) and (max-height: 430px) {
#gameStage .seat-top { top: -16.5% !important; }
#gameStage .seat-bottom { left: -11% !important; bottom: -4.5% !important; }
#gameStage .opponent-left { left: -9.5% !important; }
#gameStage .opponent-right { right: -9.5% !important; }
}
#gameStage .opponent-hand { width: min(var(--opponent-span,250px),250px) !important; height: clamp(48px, 4.65vw, 76px) !important; display: block !important; }
#gameStage .opponent-hand .card-back { position: absolute !important; left: var(--opponent-offset,0px) !important; top: 0px !important; margin-left: 0px !important; }
#gameStage .hand .card, #gameStage .hand.many-cards .card, body.fullscreen-active #gameStage .hand .card, body.fullscreen-active #gameStage .hand.many-cards .card { margin-left: var(--hand-overlap,-32px) !important; }
#gameStage .hand .card:first-child, #gameStage .hand.many-cards .card:first-child { margin-left: 0px !important; }
#gameStage, .fullscreen-active #gameStage { background: radial-gradient(at 50% 45%, rgba(25, 91, 158, 0.35), transparent 58%), linear-gradient(rgb(7, 27, 53) 0px, rgb(3, 11, 26) 100%) !important; }
#gameStage::before { background: repeating-linear-gradient(45deg, transparent 0px, transparent 29px, rgba(255, 255, 255, 0.02) 30px, rgba(255, 255, 255, 0.02) 31px), radial-gradient(at 50% 48%, transparent 0px, transparent 56%, rgba(0, 8, 24, 0.38) 84%, rgba(0, 3, 12, 0.68) 100%) !important; }
#gameStage .table-felt, .fullscreen-active #gameStage .table-felt { border-color: rgb(7, 27, 53) !important; background: radial-gradient(at 50% 43%, rgb(25, 93, 161) 0px, rgb(16, 68, 119) 42%, rgb(9, 46, 85) 73%, rgb(4, 23, 46) 100%) !important; box-shadow: rgba(0, 5, 20, 0.88) 0px 0px 72px inset, rgba(240, 189, 84, 0.32) 0px 0px 0px 2px inset !important; }
#gameStage .table-felt::before { border-color: rgba(229, 184, 81, 0.28) !important; }
#gameStage .table-brand { color: rgb(214, 180, 95) !important; opacity: 0.11 !important; }
#gameStage .pile.layered-pile { position: relative !important; display: block !important; isolation: isolate !important; overflow: visible !important; pointer-events: none !important; }
#gameStage .pile.layered-pile .pile-play { position: absolute !important; top: 50% !important; left: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; width: max-content !important; min-width: 0px !important; transform: translate3d(-50%, -50%, 0px) !important; transform-origin: center center !important; }
#gameStage .pile.layered-pile .pile-current { z-index: 2 !important; opacity: 1 !important; filter: none !important; }
#gameStage .pile.layered-pile .pile-current .card { box-shadow: rgba(0, 0, 0, 0.733) 0px 12px 24px, rgba(243, 207, 113, 0.25) 0px 0px 15px !important; }
#gameStage .pile.layered-pile .pile-previous { --pile-history-x: -36px; z-index: 1 !important; opacity: 0.58 !important; filter: blur(0.9px) saturate(0.72) brightness(0.7) !important; transform: translate3d(calc(-50% + var(--pile-history-x)),calc(-50% + 9px),0) scale(.94) !important; }
#gameStage .pile.layered-pile .pile-previous.pile-offset-right { --pile-history-x: 36px; }
#gameStage .pile.layered-pile .pile-previous .card { box-shadow: rgba(0, 0, 0, 0.6) 0px 8px 16px !important; }
@media (orientation: landscape) and (max-height: 700px) {
#gameStage .pile.layered-pile .pile-previous { filter: blur(0.72px) saturate(0.74) brightness(0.72) !important; }
}

/* Selection has one transform. Changing only the lift preserves the fan angle,
   horizontal position and hit order on every card, including the edge cards. */
#gameStage #playerHand > .card {
  --selection-lift: 0px;
  transform: translate3d(0, var(--selection-lift), 0) rotate(var(--fan-angle, 0deg)) !important;
  transition: transform 75ms ease-out, box-shadow 75ms, filter 60ms !important;
}
#gameStage #playerHand > .card[aria-pressed='true'] { --selection-lift: -25px; }
#gameStage.swap-active #playerHand > .card[aria-pressed='true'] { --selection-lift: -18px; }
@media (prefers-reduced-motion: reduce) {
  #gameStage #playerHand > .card { transition: none !important; }
}
