:root { --ink: #eef7f2; --muted: #9eb4aa; --gold: #e1b85f; --gold2: #ffe0a0; --green: #0b4935; --deep: #04110d; --panel: #091c16; --danger: #a84343; --card-w: 72px; --card-h: 102px; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0px; touch-action: manipulation; }
body { font-family: Manrope, system-ui, sans-serif; background: radial-gradient(circle at 50% 5%, rgb(21, 56, 45) 0px, rgb(7, 22, 17) 42%, rgb(2, 8, 6) 100%); color: var(--ink); overflow: hidden; }
.app-shell { height: 100%; display: flex; flex-direction: column; touch-action: manipulation; isolation: isolate; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0px 28px; background: linear-gradient(rgba(3, 13, 10, 0.98), rgba(4, 17, 13, 0.9)); border-bottom: 1px solid rgba(225, 184, 95, 0.17); z-index: 20; }
.brand { display: flex; align-items: center; gap: 11px; background: none; color: inherit; border: 0px; text-align: left; cursor: pointer; }
.brand-mark { width: 38px; height: 44px; display: grid; place-items: center; color: rgb(7, 21, 15); font-family: "Playfair Display", serif; font-size: 23px; font-weight: 800; background: linear-gradient(140deg,var(--gold2),#a97727); clip-path: polygon(50% 0px, 100% 34%, 82% 100%, 18% 100%, 0px 34%); }
.brand strong { font-family: "Playfair Display", serif; display: block; font-size: 20px; letter-spacing: 0.12em; }
.brand small { font-size: 8px; letter-spacing: 0.22em; color: rgb(147, 169, 159); display: block; margin-top: 1px; }
.round-pill { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid rgba(225, 184, 95, 0.22); border-radius: 999px; background: rgb(7, 27, 20); }
.round-pill span { font-size: 10px; color: var(--muted); letter-spacing: 0.18em; }
.round-pill strong { font-family: "Playfair Display", serif; color: var(--gold2); }
.top-actions { display: flex; gap: 8px; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); background: rgb(11, 32, 25); color: rgb(220, 233, 227); font-weight: 800; font-size: 17px; cursor: pointer; transition: 0.2s; touch-action: manipulation; }
.icon-btn:hover { border-color: var(--gold); color: var(--gold2); transform: translateY(-1px); }
.game-stage { flex: 1 1 0%; min-height: 0px; display: flex; flex-direction: column; }
.table-wrap { flex: 1 1 0%; min-height: 0px; padding: 18px 6vw 0px; }
.wood-rim { width: min(1120px, 100%); height: 100%; max-height: 590px; margin: auto; padding: 18px; border-radius: 50% / 22%; background: linear-gradient(100deg, rgb(75, 43, 23), rgb(161, 108, 56) 18%, rgb(64, 35, 19) 46%, rgb(141, 90, 44) 75%, rgb(53, 28, 16)); box-shadow: rgba(0, 0, 0, 0.8) 0px 30px 70px, rgba(225, 184, 115, 0.533) 0px 2px 2px inset, rgb(16, 7, 4) 0px -7px 12px inset; }
.table-felt { height: 100%; position: relative; overflow: hidden; border-radius: 50% / 22%; background: radial-gradient(rgb(18, 101, 71), rgb(11, 62, 45) 68%, rgb(7, 43, 32) 100%); border: 3px solid rgb(26, 16, 10); box-shadow: rgb(0, 27, 18) 0px 0px 45px inset, rgba(225, 184, 95, 0.13) 0px 0px 0px 4px inset; }
.felt-pattern { position: absolute; inset: 0px; opacity: 0.09; background-image: repeating-linear-gradient(45deg, transparent 0px, transparent 22px, rgb(255, 255, 255) 23px, rgb(255, 255, 255) 24px), repeating-linear-gradient(-45deg, transparent 0px, transparent 22px, rgb(255, 255, 255) 23px, rgb(255, 255, 255) 24px); mask-image: radial-gradient(rgb(0, 0, 0), transparent 75%); }
.table-brand { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; opacity: 0.12; color: rgb(232, 217, 164); pointer-events: none; }
.table-brand span { font-size: 50px; }
.table-brand strong { font-family: "Playfair Display", serif; letter-spacing: 0.25em; font-size: 24px; }
.table-brand small { font-size: 8px; letter-spacing: 0.34em; }
.center-play { position: absolute; inset: 29% 27% 23%; display: flex; align-items: center; justify-content: center; }
.turn-note { position: absolute; top: -9px; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: rgb(217, 234, 223); background: rgb(8, 42, 31); border: 1px solid rgba(255, 255, 255, 0.13); padding: 6px 11px; border-radius: 999px; }
.pile { position: relative; min-width: 240px; height: 122px; display: flex; justify-content: center; align-items: center; }
.empty-pile { width: 160px; height: 92px; border: 1px dashed rgba(255, 255, 255, 0.23); border-radius: 13px; display: grid; place-content: center; text-align: center; color: rgba(201, 221, 211, 0.667); }
.empty-pile span { font-size: 24px; }
.empty-pile p { margin: 2px 0px 0px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; }
.pile .card { position: relative; margin-left: -35px; }
.pile .card:first-child { margin-left: 0px; }
.combo-label { position: absolute; bottom: -14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgb(255, 227, 162); }
.seats { position: absolute; inset: 0px; }
.seat { position: absolute; display: flex; align-items: center; gap: 9px; background: rgba(3, 18, 13, 0.86); border: 1px solid rgba(255, 255, 255, 0.13); padding: 7px 11px 7px 7px; border-radius: 50px; min-width: 145px; box-shadow: rgba(0, 0, 0, 0.467) 0px 9px 24px; transition: 0.25s; }
.seat.active { border-color: var(--gold); box-shadow: rgba(225, 184, 95, 0.1) 0px 0px 0px 3px, rgba(0, 0, 0, 0.467) 0px 9px 24px; }
.seat.finished { opacity: 0.52; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, rgb(217, 177, 95), rgb(108, 69, 30)); font-weight: 800; color: rgb(11, 23, 18); border: 2px solid rgb(243, 210, 140); }
.seat-meta strong { display: block; font-size: 13px; }
.seat-meta span { font-size: 10px; color: rgb(177, 197, 187); }
.seat-top { top: 6%; left: 50%; transform: translateX(-50%); }
.seat-left { left: 4%; top: 47%; transform: translateY(-50%); }
.seat-right { right: 4%; top: 47%; transform: translateY(-50%); }
.seat-bottom { bottom: 4%; left: 50%; transform: translateX(-50%); }
.mini-cards { display: flex; margin-left: auto; }
.mini-cards i { width: 8px; height: 16px; border-radius: 2px; background: rgb(208, 167, 80); border: 1px solid rgb(243, 219, 156); margin-left: -4px; display: block; }
.thinking::after { content: "•••"; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); letter-spacing: 3px; color: var(--gold); animation: 1s ease 0s infinite normal none running blink; }
@keyframes blink { 
  50% { opacity: 0.25; }
}
.player-dock { height: 226px; background: linear-gradient(rgba(4, 15, 11, 0.92), rgb(3, 11, 8)); border-top: 1px solid rgba(225, 184, 95, 0.18); padding: 10px 24px 12px; position: relative; z-index: 10; }
.status-row { max-width: 1050px; margin: 0px auto 3px; display: flex; justify-content: space-between; align-items: center; }
.status-row > div:first-child { display: grid; grid-template-columns: 10px auto; column-gap: 8px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(69, 212, 145); box-shadow: rgb(69, 212, 145) 0px 0px 12px; align-self: center; }
.status-row strong { font-size: 13px; }
.status-row small { grid-column: 2; font-size: 10px; color: var(--muted); }
.cards-count { display: flex; align-items: baseline; gap: 8px; }
.cards-count span { font-size: 9px; letter-spacing: 0.14em; color: var(--muted); }
.cards-count strong { font-family: "Playfair Display", serif; color: var(--gold2); font-size: 18px; }
.hand-scroll { height: 124px; overflow: auto hidden; scrollbar-width: thin; scrollbar-color: rgb(140, 105, 44) transparent; }
.hand { height: 120px; display: flex; justify-content: center; align-items: flex-end; padding-top: 20px; min-width: max-content; }
.card { width: var(--card-w); height: var(--card-h); flex: 0 0 auto; border-radius: 9px; background: linear-gradient(145deg, rgb(255, 255, 255), rgb(231, 232, 227)); border: 1px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.467) 0px 5px 10px, rgb(215, 217, 211) 0px 0px 0px 2px inset; color: rgb(16, 20, 16); position: relative; margin-left: -20px; cursor: pointer; transition: transform 0.18s, filter 0.18s; user-select: none; }
.card:first-child { margin-left: 0px; }
.card:hover { transform: translateY(-8px); }
.card.selected { transform: translateY(-18px); box-shadow: 0 0 0 2px var(--gold),0 12px 18px #0009; }
.card .corner { position: absolute; top: 5px; left: 7px; font-weight: 800; font-size: 16px; line-height: 0.9; text-align: center; }
.card .corner small { display: block; font-size: 14px; }
.card .suit-big { position: absolute; inset: 0px; display: grid; place-items: center; font-size: 33px; }
.card.red { color: rgb(181, 43, 54); }
.card.joker { background: linear-gradient(145deg, rgb(22, 27, 25), rgb(48, 58, 54)); color: rgb(246, 207, 115); border-color: rgb(200, 154, 63); }
.card.joker.red { background: linear-gradient(145deg, rgb(65, 24, 29), rgb(130, 44, 54)); color: rgb(255, 225, 160); }
.card.joker .corner { font-size: 9px; letter-spacing: 0.05em; }
.card.joker .suit-big { font-size: 30px; }
.card-back { width: 28px; height: 40px; border-radius: 5px; background: repeating-linear-gradient(45deg, rgb(201, 154, 66) 0px, rgb(201, 154, 66) 3px, rgb(16, 43, 33) 3px, rgb(16, 43, 33) 6px); border: 2px solid rgb(230, 193, 109); box-shadow: rgba(0, 0, 0, 0.533) 0px 3px 6px; margin-left: -16px; }
.controls { max-width: 1050px; margin: 2px auto 0px; display: flex; justify-content: center; gap: 10px; }
.btn { height: 39px; border: 0px; border-radius: 9px; padding: 0px 24px; font: 700 12px Manrope; letter-spacing: 0.06em; cursor: pointer; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.ghost { position: absolute; left: 24px; background: rgb(16, 39, 31); color: rgb(200, 216, 209); border: 1px solid rgb(39, 70, 58); }
.btn.pass { background: rgb(27, 42, 37); color: rgb(210, 221, 216); border: 1px solid rgb(53, 73, 65); }
.btn.play { background: linear-gradient(135deg, rgb(241, 209, 131), rgb(183, 123, 34)); color: rgb(9, 19, 15); box-shadow: rgba(210, 160, 63, 0.2) 0px 7px 20px; min-width: 130px; }
.btn.play span { display: inline-grid; place-items: center; min-width: 19px; height: 19px; border-radius: 50%; background: rgb(20, 33, 24); color: rgb(242, 210, 129); margin-left: 8px; }
.btn.play.valid { filter: brightness(1.12); box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 2px, rgba(210, 160, 63, 0.333) 0px 7px 22px; }
.modal-backdrop { position: fixed; inset: 0px; background: rgba(0, 7, 5, 0.82); backdrop-filter: blur(12px); z-index: 100; display: none; place-items: center; padding: 18px; }
.modal-backdrop.open { display: grid; }
.modal { width: min(600px, 100%); max-height: 94vh; overflow: auto; background: linear-gradient(145deg, rgb(13, 43, 33), rgb(7, 23, 17)); border: 1px solid rgba(225, 184, 95, 0.28); border-radius: 24px; padding: 28px; box-shadow: rgba(0, 0, 0, 0.933) 0px 35px 100px, rgba(255, 255, 255, 0.07) 0px 1px inset; text-align: center; position: relative; }
.modal-brand { width: 56px; height: 56px; margin: 0px auto 12px; display: grid; place-items: center; border: 1px solid var(--gold); transform: rotate(45deg); color: var(--gold2); }
.modal-brand span { font-size: 25px; transform: rotate(-45deg); }
.eyebrow { font-size: 10px; letter-spacing: 0.25em; color: var(--gold); font-weight: 800; margin: 8px 0px; }
.modal h1, .modal h2 { font-family: "Playfair Display", serif; margin: 0px; color: rgb(255, 255, 255); }
.modal h1 { font-size: 54px; letter-spacing: 0.05em; }
.modal h2 { font-size: 34px; }
.intro { color: var(--muted); margin: 6px 0px 22px; }
.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.mode-tab { min-height: 76px; text-align: left; display: grid; grid-template-columns: 42px auto; border: 1px solid rgb(41, 66, 57); border-radius: 12px; background: rgb(10, 29, 23); color: rgb(219, 232, 226); padding: 12px; cursor: pointer; }
.mode-tab > span { grid-row: 1 / 3; font-size: 24px; align-self: center; color: var(--gold); }
.mode-tab b { font-size: 13px; }
.mode-tab small { color: rgb(129, 153, 142); }
.mode-tab.active { border-color: var(--gold); background: rgb(16, 42, 33); box-shadow: rgba(213, 167, 70, 0.063) 0px 0px 24px inset; }
.field-label { display: block; text-align: left; color: rgb(166, 187, 177); font-size: 10px; letter-spacing: 0.16em; margin: 0px 0px 8px; }
.player-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.player-options button { height: 72px; border-radius: 11px; border: 1px solid rgb(41, 66, 57); background: rgb(11, 30, 24); color: rgb(220, 232, 226); cursor: pointer; display: flex; flex-direction: column; justify-content: center; }
.player-options strong { font-family: "Playfair Display", serif; font-size: 22px; }
.player-options span { font-size: 9px; color: rgb(145, 168, 157); }
.player-options button.active { border-color: var(--gold); background: linear-gradient(145deg, rgb(25, 58, 46), rgb(12, 37, 28)); color: var(--gold2); }
.start-btn { width: 100%; height: 50px; margin-top: 18px; border: 0px; border-radius: 11px; background: linear-gradient(135deg, rgb(242, 212, 141), rgb(183, 120, 29)); color: rgb(9, 21, 15); font-weight: 800; letter-spacing: 0.08em; cursor: pointer; }
.start-btn:hover { filter: brightness(1.08); }
.start-btn.secondary { background: rgb(22, 53, 41); color: rgb(243, 212, 134); border: 1px solid rgb(184, 136, 56); }
.setup-foot { font-size: 9px; color: rgb(111, 135, 124); letter-spacing: 0.13em; margin: 14px 0px 0px; }
.coming-soon { padding: 18px; border: 1px dashed rgb(58, 85, 74); border-radius: 14px; }
.coming-soon > span { font-size: 32px; color: var(--gold); }
.coming-soon h2 { font-family: Manrope; font-size: 18px; margin: 8px; }
.coming-soon p { font-size: 12px; color: var(--muted); margin: 0px; }
.close-btn { position: absolute; top: 15px; right: 15px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.094); background: rgb(16, 39, 31); color: white; font-size: 22px; cursor: pointer; }
.rules-card { width: min(760px, 100%); text-align: left; }
.rules-card > .eyebrow, .rules-card > h2 { text-align: center; }
.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.rules-grid article { border: 1px solid rgb(41, 66, 57); background: rgb(9, 29, 22); border-radius: 12px; padding: 13px; position: relative; }
.rules-grid article > b { position: absolute; right: 12px; top: 10px; color: rgb(212, 171, 82); font-family: "Playfair Display", serif; }
.rules-grid h3 { font-size: 13px; margin: 0px 0px 5px; }
.rules-grid p { font-size: 11px; color: rgb(159, 179, 170); margin: 0px; line-height: 1.55; }
.rules-note { font-size: 10px; color: rgb(147, 169, 159); line-height: 1.5; padding: 10px; border-left: 2px solid var(--gold); }
.result-card { width: min(450px, 100%); }
.trophy { font-size: 52px; color: var(--gold); }
.result-card > p:not(.eyebrow) { color: var(--muted); }
.standings { margin: 18px 0px; display: grid; gap: 7px; }
.standing { display: flex; align-items: center; justify-content: space-between; background: rgb(10, 32, 24); padding: 10px 13px; border-radius: 9px; font-size: 12px; }
.standing b { color: var(--gold2); }
.text-btn { margin-top: 13px; border: 0px; background: none; color: rgb(168, 187, 178); text-decoration: underline; cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: 244px; transform: translate(-50%, 15px); background: rgb(8, 28, 21); border: 1px solid rgba(214, 168, 73, 0.4); color: rgb(255, 255, 255); padding: 10px 16px; border-radius: 9px; z-index: 200; font-size: 12px; opacity: 0; pointer-events: none; transition: 0.25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0px); }
@media (max-width: 760px) {
  :root { --card-w: 57px; --card-h: 82px; }
  .topbar { height: 58px; padding: 0px 12px; }
  .brand-mark { width: 31px; height: 36px; font-size: 18px; }
  .brand strong { font-size: 15px; }
  .brand small { display: none; }
  .round-pill { padding: 6px 9px; }
  .top-actions { gap: 4px; }
  .icon-btn { width: 33px; height: 33px; }
  .table-wrap { padding: 9px 5px 0px; }
  .wood-rim { padding: 9px; border-radius: 38% / 18%; }
  .table-felt { border-radius: 38% / 18%; }
  .seat { min-width: auto; padding: 4px 7px 4px 4px; }
  .avatar { width: 32px; height: 32px; font-size: 12px; }
  .seat-meta strong { font-size: 10px; }
  .seat-meta span { font-size: 8px; }
  .seat-left { left: 1%; top: 36%; }
  .seat-right { right: 1%; top: 36%; }
  .seat-top { top: 3%; }
  .seat-bottom { bottom: 2%; }
  .mini-cards { display: none; }
  .center-play { inset: 26% 12% 17%; }
  .pile { min-width: 150px; height: 90px; }
  .pile .card { margin-left: -28px; }
  .player-dock { height: 200px; padding: 7px 8px; }
  .hand-scroll { height: 105px; }
  .hand { height: 101px; }
  .card { margin-left: -17px; }
  .card .corner { font-size: 13px; }
  .card .corner small { font-size: 11px; }
  .card .suit-big { font-size: 25px; }
  .btn { height: 37px; padding: 0px 17px; }
  .btn.ghost { left: 8px; padding: 0px 11px; }
  .toast { bottom: 216px; }
  .modal { padding: 23px 16px; }
  .modal h1 { font-size: 45px; }
  .rules-grid { grid-template-columns: 1fr; }
  .rules-card { max-height: 92vh; }
}
@media (max-height: 700px) {
  .topbar { height: 56px; }
  .player-dock { height: 190px; }
  .table-wrap { padding-top: 8px; }
  .hand-scroll { height: 99px; }
  .hand { height: 96px; }
  .status-row { margin-bottom: 0px; }
  :root { --card-w: 58px; --card-h: 84px; }
}
.room-form { text-align: left; }
.room-input { width: 100%; height: 49px; padding: 0px 14px; border: 1px solid rgb(49, 80, 68); border-radius: 11px; background: rgb(7, 27, 20); color: rgb(242, 247, 244); font: 700 14px Manrope; outline: none; }
.room-input:focus { border-color: var(--gold); box-shadow: rgba(225, 184, 95, 0.1) 0px 0px 0px 3px; }
.room-code-input { text-align: center; text-transform: uppercase; letter-spacing: 0.34em; font: 700 21px monospace; }
.room-lobby { padding: 17px; border: 1px solid rgb(49, 80, 68); border-radius: 15px; background: rgb(8, 29, 22); }
.room-code { border: 0px; background: none; color: var(--gold2); font: 800 34px monospace; letter-spacing: 0.28em; cursor: pointer; }
.room-status { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0px 0px 13px; color: rgb(169, 190, 180); font-size: 11px; }
.lobby-players { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.lobby-player { display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid rgb(41, 66, 57); border-radius: 9px; background: rgb(14, 42, 32); font-size: 11px; text-align: left; }
.lobby-player i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: rgb(211, 170, 85); color: rgb(7, 19, 15); font-style: normal; font-weight: 800; }
.lobby-player b { margin-left: auto; color: rgb(143, 167, 156); font-size: 8px; }
.lobby-player.ready { border-color: rgb(61, 143, 107); background: rgb(16, 53, 39); }
.lobby-player.ready b { color: rgb(104, 215, 160); }
.lobby-player.offline { opacity: 0.55; }
.lobby-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.host-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; text-align: left; }
.host-options label { min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgb(41, 66, 57); border-radius: 9px; background: rgb(9, 29, 22); color: rgb(169, 190, 180); font-size: 9px; }
.host-options label:last-child { justify-content: space-between; }
.host-options select { height: 27px; border: 1px solid rgb(58, 85, 74); border-radius: 6px; background: rgb(7, 23, 17); color: rgb(242, 212, 134); }
.connection-pill { position: fixed; right: 14px; bottom: 244px; z-index: 50; padding: 7px 10px; border: 1px solid rgb(169, 74, 67); border-radius: 8px; background: rgb(53, 26, 24); color: rgb(255, 214, 209); font-size: 10px; }
.connection-pill[hidden] { display: none; }
.fullscreen-btn { display: none; }
.rotate-hint { position: fixed; inset: 0px; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: rgba(1, 9, 6, 0.94); color: rgb(255, 255, 255); text-align: center; }
.rotate-hint[hidden] { display: none; }
.rotate-hint span { font-size: 54px; color: var(--gold); }
.rotate-hint strong { font: 800 25px "Playfair Display", serif; }
.rotate-hint small { color: var(--muted); }
@media (max-width: 900px) and (pointer: coarse) {
  .fullscreen-btn { display: inline-grid; place-items: center; }
}
.username-gate { z-index: 450; }
.username-card { width: min(390px, 100%); text-align: center; }
.username-card .room-code-input { letter-spacing: 0.08em; font: 700 17px Manrope; }
.username-card .start-btn { margin-top: 10px; }
.auth-gate-message { min-height: 14px; color: rgb(255, 157, 147); font-size: 9px; }
.swap-card { width: min(590px, 100%); }
.swap-explain { color: rgb(157, 178, 168); font-size: 10px; }
.swap-board { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; gap: 8px; margin: 15px 0px; }
.swap-board > div { display: grid; place-items: center; gap: 7px; }
.swap-board small { color: rgb(145, 167, 157); font-size: 8px; }
.swap-board strong { color: rgb(237, 204, 120); font-size: 10px; }
.swap-arrows { color: rgb(213, 171, 82); font-size: 30px; }
.swap-slot { width: 76px; height: 105px; display: grid; place-items: center; border: 1px dashed rgba(213, 173, 90, 0.533); border-radius: 10px; background: rgb(6, 23, 16); }
.swap-slot .card { margin: 0px; pointer-events: none; }
.swap-choices { min-height: 76px; display: flex; align-items: flex-end; justify-content: center; padding: 8px; overflow-x: auto; }
.swap-choices .card { width: 48px; height: 68px; margin-left: -12px; }
.swap-choices .card:first-child { margin-left: 0px; }
.swap-countdown { width: max-content; margin: 9px auto 0px; padding: 8px 14px; border: 1px solid rgba(216, 178, 90, 0.4); border-radius: 999px; background: rgb(16, 42, 32); color: rgb(200, 216, 208); font-size: 10px; }
.no-swap { margin-top: 14px; padding: 15px; border: 1px solid rgb(226, 182, 93); border-radius: 12px; background: rgb(49, 38, 15); }
.swap-choices[hidden], #confirmSwapBtn[hidden], .swap-countdown[hidden], .no-swap[hidden] { display: none !important; }
.replay-card { width: min(520px, 100%); text-align: left; }
.replay-list { max-height: 55vh; display: grid; gap: 5px; margin-top: 12px; overflow: auto; }
.replay-item { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; padding: 9px; border-left: 2px solid rgb(213, 173, 84); background: rgb(11, 37, 28); font-size: 10px; }
.replay-item time { color: rgb(119, 145, 135); }
.replay-item b { color: rgb(240, 207, 125); }
.replay-item small { color: rgb(153, 175, 164); }
.install-card { width: min(620px, -24px + 100vw); text-align: center; }
.install-icon { width: 88px; height: 88px; margin: 0px auto 14px; }
.install-icon img { width: 100%; height: 100%; display: block; border-radius: 22px; box-shadow: rgba(0, 0, 0, 0.6) 0px 16px 32px; }
.install-lead { max-width: 470px; margin: 10px auto 20px; color: rgb(169, 189, 179); font-size: 12px; line-height: 1.6; }
.install-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.install-steps article { min-height: 112px; padding: 16px; border: 1px solid rgb(54, 84, 72); border-radius: 14px; background: rgb(8, 35, 26); }
.install-steps b, .install-steps span { display: block; }
.install-steps b { margin-bottom: 8px; color: rgb(240, 201, 109); font-size: 10px; }
.install-steps span { color: rgb(169, 189, 179); font-size: 11px; line-height: 1.55; }
:root { --deck-black: #0d0606; --deck-ink: #fff3d9; --deck-muted: #bca77b; --deck-wine: #741727; --deck-wine-dark: #2b090e; --deck-wine-soft: #42151b; --deck-gold: #e8bd5f; --deck-gold-hi: #ffe18d; --deck-green: #125b3f; --deck-blue: #25218c; --deck-line: rgba(232,189,95,.36); }
html, body { background: var(--deck-black); color: var(--deck-ink); }
body { background: radial-gradient(circle at 48% -18%, rgb(56, 16, 23) 0px, rgb(23, 7, 8) 34%, rgb(9, 4, 4) 76%, rgb(3, 2, 2) 100%); }
.app-shell { background: transparent; }
.topbar { height: 62px; flex: 0 0 62px; padding: 0px clamp(20px, 4vw, 72px); border: 0px; background: rgb(16, 11, 8); box-shadow: none; }
.brand { gap: 12px; }
.brand-mark { width: 34px; height: 38px; }
.brand strong { font-size: 19px; color: rgb(247, 220, 156); letter-spacing: 0.18em; }
.brand small { display: none; }
.round-pill { left: 21%; min-width: auto; padding: 7px 13px; border-color: rgb(93, 74, 51); background: rgb(25, 19, 15); box-shadow: none; }
.round-pill span { color: rgb(200, 183, 143); }
.round-pill strong { color: rgb(239, 199, 101); font-size: 17px; }
.top-actions { align-items: center; }
.language-switch { height: 34px; display: flex; align-items: center; gap: 5px; padding: 3px; border: 1px solid rgb(74, 64, 56); border-radius: 999px; background: rgb(26, 21, 18); color: rgb(214, 200, 167); font-size: 10px; font-style: normal; }
.language-switch b { padding: 6px 12px; border-radius: 999px; background: linear-gradient(rgb(255, 225, 141), rgb(212, 154, 52)); color: rgb(41, 22, 10); }
.language-switch i { padding: 0px 9px; font-style: normal; }
.icon-btn { width: 36px; height: 36px; border-color: rgb(77, 69, 62); background: rgb(27, 23, 20); color: rgb(241, 220, 169); box-shadow: none; }
.icon-btn:hover { border-color: var(--deck-gold); background: rgb(42, 29, 24); color: rgb(255, 240, 189); }
.leave-game { background: rgb(55, 21, 19); border-color: rgb(125, 58, 54) !important; }
.game-stage { background: rgb(16, 11, 8); overflow: hidden; }
.table-wrap { padding: 0px clamp(42px, 7vw, 126px) 7px; }
.wood-rim { width: 100%; height: 100%; max-height: none; padding: 17px; border: 0px; border-radius: 25% / 18%; background: linear-gradient(90deg, rgb(75, 30, 16), rgb(178, 124, 65) 7%, rgb(224, 174, 98) 10%, rgb(106, 53, 24) 15%, rgb(42, 18, 9) 48%, rgb(124, 66, 30) 82%, rgb(219, 158, 80) 89%, rgb(60, 24, 12)); box-shadow: rgba(0, 0, 0, 0.867) 0px 24px 55px, rgba(255, 216, 152, 0.6) 0px 2px inset, rgb(28, 9, 5) 0px -8px 12px inset, rgb(23, 18, 15) 0px 0px 0px 3px; }
.table-felt { border: 2px solid rgb(50, 33, 24); border-radius: 25% / 18%; background: radial-gradient(at 50% 43%, rgb(25, 118, 78) 0px, rgb(13, 90, 61) 48%, rgb(7, 58, 40) 78%, rgb(4, 30, 23) 100%); box-shadow: rgba(0, 22, 15, 0.733) 0px 0px 72px inset, rgba(239, 209, 123, 0.133) 0px 0px 0px 3px inset; }
.table-felt::before { inset: 4%; border-color: rgba(240, 209, 123, 0.12); }
.table-felt::after { display: none; }
.felt-pattern { opacity: 0.06; background-image: repeating-linear-gradient(25deg, transparent 0px, transparent 7px, rgb(255, 255, 255) 8px, rgb(255, 255, 255) 9px); background-size: auto; mask-image: radial-gradient(rgb(0, 0, 0) 20%, transparent 92%); }
body[data-theme="royal"] .table-felt { background: radial-gradient(at 50% 43%, rgb(159, 42, 62) 0px, rgb(119, 25, 41) 48%, rgb(74, 14, 25) 80%, rgb(38, 7, 12) 100%); }
body[data-theme="midnight"] .table-felt { background: radial-gradient(at 50% 43%, rgb(40, 91, 116) 0px, rgb(24, 70, 95) 48%, rgb(12, 45, 67) 80%, rgb(6, 24, 33) 100%); }
body[data-theme="royal"] .wood-rim { background: linear-gradient(90deg, rgb(52, 20, 11), rgb(116, 64, 33) 7%, rgb(200, 147, 69) 11%, rgb(84, 32, 15) 16%, rgb(38, 11, 8) 48%, rgb(110, 50, 23) 84%, rgb(210, 161, 79) 89%, rgb(44, 13, 8)); }
body[data-theme="midnight"] .wood-rim { background: linear-gradient(90deg, rgb(78, 43, 14), rgb(213, 155, 69) 9%, rgb(240, 198, 108) 12%, rgb(112, 65, 22) 17%, rgb(43, 25, 8) 50%, rgb(191, 125, 46) 86%, rgb(240, 196, 106) 90%, rgb(64, 33, 9)); }
.table-brand { opacity: 0.07; color: rgb(244, 217, 142); }
.table-brand span { font-size: 46px; }
.table-brand strong { font-size: 19px; }
.center-play { inset: 25% 28%; }
.pile { height: 138px; }
.pile .card { box-shadow: rgba(0, 0, 0, 0.533) 0px 13px 22px, rgb(217, 216, 206) 0px 0px 0px 2px inset; }
.empty-pile { border: 0px; color: rgba(233, 202, 127, 0.2); }
.empty-pile p { display: none; }
.combo-label { display: none; }
.seat { min-width: 0px; padding: 0px; border: 0px; gap: 0px; overflow: visible; display: grid; justify-items: center; background: transparent !important; box-shadow: none !important; }
.seat.active { border: 0px; box-shadow: none; }
.seat.active .avatar { border-color: rgb(75, 229, 150); box-shadow: rgb(22, 63, 44) 0px 0px 0px 5px, rgba(68, 220, 138, 0.6) 0px 0px 18px; }
.seat .avatar { width: 66px; height: 66px; border: 4px solid rgb(149, 115, 50); background: radial-gradient(circle at 40% 30%, rgb(112, 90, 61), rgb(37, 25, 15) 72%); box-shadow: rgb(22, 17, 13) 0px 0px 0px 3px, rgba(0, 0, 0, 0.6) 0px 7px 15px; }
.seat .avatar::before { background: rgb(223, 182, 84); }
.seat .avatar::after { background: rgb(212, 169, 77); }
.seat-meta { display: grid; justify-items: center; margin-top: 4px; }
.seat-meta strong { max-width: 110px; padding: 2px 10px; border-radius: 999px; background: rgb(26, 18, 14); color: rgb(255, 240, 208); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-meta span { margin-top: 2px; color: var(--deck-gold) !important; font-size: 10px !important; font-weight: 800 !important; }
.seat-top { top: 1%; left: 50%; }
.seat-left { left: 1%; top: 50%; }
.seat-right { right: 1%; top: 50%; }
.seat-bottom { left: 1%; bottom: 2%; transform: none; }
.turn-timer { transform: translateX(-50%); border-radius: 50%; background: conic-gradient(#57e99d var(--turn-progress),#40332a 0); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), rgb(0, 0, 0) calc(100% - 4px)); position: absolute !important; inset: -5px auto auto 50% !important; width: 76px !important; height: 76px !important; }
.opponent-hand .card-back, .card-back { border: 1px solid rgb(255, 224, 167); background-color: rgb(158, 36, 51); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.094) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.094) 75%), linear-gradient(-45deg, rgba(255, 255, 255, 0.094) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.094) 75%), radial-gradient(circle, rgb(239, 201, 100) 0px, rgb(239, 201, 100) 17%, transparent 18%); background-size: 8px 8px, 8px 8px, 100% 100%; box-shadow: rgba(0, 0, 0, 0.533) 0px 5px 9px; }
.opponent-hand .card-back { width: 34px; height: 50px; margin-left: -17px; }
.opponent-top { top: 11%; }
.opponent-left { left: 10%; top: 49%; }
.opponent-right { right: 10%; top: 49%; }
.player-dock { position: absolute; left: 16%; right: 16%; bottom: -9px; height: 31%; padding: 0px; z-index: 18; border: 0px; background: transparent; pointer-events: none; }
.status-row { display: none; }
.hand-scroll { height: 100%; overflow: visible; pointer-events: none; }
.hand { height: 100%; padding: 10px 0px 0px; align-items: flex-end; pointer-events: none; }
.hand .card { width: 78px; height: 112px; flex-basis: 78px; margin-left: -25px; border-radius: 8px; pointer-events: auto; transform-origin: 50% 145%; box-shadow: rgba(0, 0, 0, 0.6) 0px 7px 13px, rgb(219, 216, 203) 0px 0px 0px 2px inset; }
.hand .card:first-child { margin-left: 0px; }
.hand .card:hover { }
.hand .card.selected, .hand .card.selected:hover { box-shadow: rgb(255, 231, 137) 0px 0px 0px 3px, rgba(255, 212, 92, 0.467) 0px 0px 22px, rgba(0, 0, 0, 0.733) 0px 14px 24px, rgb(219, 216, 203) 0px 0px 0px 2px inset; }
.hand .card .corner { font-size: 17px; }
.hand .card .corner small { font-size: 14px; }
.hand .card .suit-big { font-size: 35px; }
.controls { position: fixed; inset: 0px; z-index: 17; max-width: none; margin: 0px; pointer-events: none; }
.controls .btn { position: absolute; bottom: 18px; width: 112px; height: 62px; border-radius: 999px; pointer-events: auto; font-family: Manrope; font-size: 14px; letter-spacing: 0.13em; }
.controls .pass { right: clamp(20px, 5vw, 78px); border: 1px solid rgb(215, 185, 111); background: rgb(17, 24, 32); color: rgb(255, 241, 201); }
.controls .play { left: clamp(20px, 5vw, 78px); border: 0px; background: linear-gradient(rgb(245, 215, 127), rgb(198, 141, 43)); color: rgb(40, 21, 8); box-shadow: rgb(126, 79, 20) 0px 7px 0px, rgba(0, 0, 0, 0.533) 0px 10px 24px; }
.controls .play span { background: rgb(58, 33, 11); color: rgb(255, 225, 140); }
.reaction-bar { right: auto; left: 4%; bottom: 28%; }
.splash-screen { position: fixed; inset: 0px; z-index: 10000; display: grid; place-items: center; background: radial-gradient(circle at 50% 43%, rgb(91, 20, 32), rgb(38, 9, 14) 45%, rgb(13, 3, 4) 100%); transition: opacity 0.42s, visibility 0.42s; }
.splash-screen.done { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-card { display: grid; justify-items: center; gap: 10px; }
.splash-card img { width: 92px; height: 92px; filter: drop-shadow(rgba(0, 0, 0, 0.667) 0px 20px 30px); }
.splash-card strong { font: 800 34px "Playfair Display", serif; letter-spacing: 0.24em; color: rgb(245, 210, 125); }
.splash-card small { color: rgb(209, 184, 127); font-size: 8px; letter-spacing: 0.22em; }
.splash-card i { width: 110px; height: 3px; margin-top: 12px; border-radius: 99px; background: linear-gradient(90deg, rgb(233, 189, 95) 58%, rgb(91, 52, 39) 58%); animation: 0.7s ease 0s 1 normal both running splashLoad; }
@keyframes splashLoad { 
  0% { transform: scaleX(0.05); }
  100% { transform: scaleX(1); }
}
.home-hero { min-height: 0px; padding: 46px 28px 24px; border-right: 1px solid rgb(94, 45, 38); background: linear-gradient(160deg, rgb(38, 16, 14), rgb(22, 8, 7) 62%, rgb(13, 5, 5)); flex-direction: column; overflow: hidden; position: relative !important; inset: auto !important; width: auto !important; display: flex !important; align-items: stretch !important; text-align: left !important; }
.home-hero::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(circle at 0px 0px, rgba(125, 37, 46, 0.2), transparent 46%); pointer-events: none; }
.home-nav { position: relative; display: grid; gap: 7px; }
.home-nav button { min-height: 58px; display: grid; grid-template-columns: 28px minmax(0px, 1fr); align-items: center; padding: 0px 18px; border: 0px; border-radius: 13px; background: transparent; color: rgb(217, 201, 164); text-align: left; font: 700 14px Manrope; cursor: pointer; }
.home-nav button > span { color: rgb(232, 189, 95); }
.home-nav button small { grid-column: 2; display: block; color: rgb(69, 220, 142); font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-nav button.active, .home-nav button:hover, .home-nav button.attention { background: rgb(71, 41, 30); color: rgb(255, 240, 201); }
.home-nav button.attention { box-shadow: rgb(233, 189, 91) 3px 0px inset; }
.home-hero .install-app-btn { position: relative; width: 100%; min-height: 54px; margin: 18px 0px 0px; border-color: rgb(107, 79, 49); background: rgb(35, 21, 16); color: rgb(240, 213, 151); }
.home-panel { min-width: 0px; padding: clamp(26px, 4vw, 58px); overflow: auto; background: radial-gradient(circle at 85% 0px, rgba(105, 23, 39, 0.25), transparent 40%), linear-gradient(145deg, rgb(37, 12, 16), rgb(22, 8, 8) 64%); }
.home-panel-head { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; margin-bottom: 20px; }
.home-panel-head .eyebrow { width: 100%; margin: 0px; }
.home-panel h1 { font-size: 42px; letter-spacing: 0px; }
.home-panel-head .intro { margin: 0px; color: rgb(193, 173, 132); }
.classic-hero { min-height: 190px; display: grid; grid-template-columns: minmax(0px, 1fr) 260px; align-items: center; padding: 27px 36px; border: 2px solid rgb(225, 184, 95); border-radius: 33px; background: radial-gradient(circle at 76% 48%, rgba(172, 49, 68, 0.3), transparent 37%), linear-gradient(120deg, rgb(101, 22, 36), rgb(133, 29, 49)); box-shadow: rgba(255, 255, 255, 0.133) 0px 1px inset; }
.classic-hero .eyebrow { margin: 0px 0px 7px; color: rgb(248, 207, 111); }
.classic-hero h2 { font-size: 36px; color: rgb(255, 245, 221); }
.classic-hero p:not(.eyebrow) { margin: 8px 0px 0px; color: rgb(240, 216, 192); font-size: 12px; }
.hero-playing-cards { position: relative; height: 140px; }
.hero-playing-cards i { position: absolute; left: 50%; top: 50%; width: 78px; height: 110px; padding: 8px; border: 1px solid rgb(183, 174, 155); border-radius: 9px; background: rgb(255, 250, 240); color: rgb(21, 18, 14); font: 800 24px "Playfair Display", serif; box-shadow: rgba(0, 0, 0, 0.467) 0px 10px 18px; transform-origin: 50% 100%; }
.hero-playing-cards i:nth-child(1) { transform: translate(-85%, -50%) rotate(-16deg); }
.hero-playing-cards i:nth-child(2) { transform: translate(-50%, -56%) rotate(-2deg); }
.hero-playing-cards i:nth-child(3) { color: rgb(195, 24, 45); transform: translate(-15%, -50%) rotate(14deg); }
.hero-playing-cards small { display: block; font-size: 24px; }
.home-panel .mode-tabs { grid-template-columns: 1fr 1fr; gap: 17px; margin: 20px 0px; }
.home-panel .mode-tab { min-height: 86px; grid-template-columns: 50px 1fr; padding: 15px 18px; border-color: rgb(112, 64, 41); border-radius: 20px; background: rgb(40, 21, 16); }
.home-panel .mode-tab > span { color: rgb(230, 186, 91); }
.home-panel .mode-tab b { font-family: "Playfair Display", serif; font-size: 19px; }
.home-panel .mode-tab small { font-size: 9px; color: rgb(184, 164, 125); }
.home-panel .mode-tab.active { border-color: rgb(232, 189, 95); background: linear-gradient(145deg, rgb(119, 32, 50), rgb(75, 16, 26)); box-shadow: rgba(255, 255, 255, 0.067) 0px 1px inset; }
.home-panel .field-label { color: rgb(199, 173, 117); }
.home-panel .player-options button, .home-panel .computer-ai-setting, .home-panel .room-input, .home-panel .host-options label { border-color: rgb(94, 63, 45); background: rgb(36, 20, 16); color: rgb(248, 237, 213); }
.home-panel .player-options button.active { border-color: rgb(231, 186, 90); background: rgb(91, 23, 34); }
.home-panel .start-btn { background: linear-gradient(rgb(247, 218, 131), rgb(200, 141, 45)); color: rgb(43, 22, 8); box-shadow: rgb(124, 76, 18) 0px 5px 0px; }
.home-panel .start-btn.secondary { border-color: rgb(181, 138, 61); background: rgb(35, 22, 17); color: rgb(232, 194, 105); box-shadow: none; }
.home-panel .quick-match-btn { border-color: rgb(158, 137, 80); background: linear-gradient(135deg, rgb(46, 39, 143), rgb(68, 56, 212)); }
.home-panel .room-code-input { letter-spacing: 0.35em; }
.home-panel .setup-foot { color: rgb(152, 126, 81); text-align: center; }
.connection-pill { position: fixed; left: 50%; top: 74px; z-index: 300; display: flex; align-items: center; gap: 7px; transform: translateX(-50%); padding: 7px 12px; border: 1px solid rgb(214, 175, 91); border-radius: 999px; background: rgb(43, 17, 18); color: rgb(244, 214, 154); font-size: 9px; font-weight: 800; }
.connection-pill[hidden] { display: none; }
.connection-pill span { width: 7px; height: 7px; border-radius: 50%; background: rgb(240, 198, 93); box-shadow: rgb(240, 198, 93) 0px 0px 10px; animation: 1s ease 0s infinite normal none running blink; }
.modal-backdrop .eyebrow { color: rgb(232, 189, 95); }
.modal-backdrop .intro, .modal-backdrop p { color: rgb(188, 174, 145); }
.close-btn { border-color: rgb(111, 84, 57); background: rgb(36, 23, 19); color: rgb(245, 217, 152); }
.club-card { width: min(1040px, -34px + 100vw); padding: 34px 42px; text-align: left; }
.club-card .theme-picker { border-color: rgb(104, 70, 48); background: rgb(28, 15, 12); }
.club-card .theme-picker select { background: rgb(42, 20, 19); border-color: rgb(139, 99, 59); }
.club-card .leader-row { background: rgb(48, 19, 23); }
.club-card .leader-row:first-child { border: 1px solid rgb(232, 189, 95); background: rgb(91, 27, 38); }
.settings-card { width: min(1040px, -34px + 100vw); padding: 38px 46px !important; text-align: left !important; }
.settings-title { display: flex; align-items: center; gap: 17px; }
.settings-title > button { width: 50px; height: 50px; border: 1px solid rgb(101, 80, 68); border-radius: 50%; background: rgb(36, 26, 22); color: rgb(247, 216, 140); font-size: 31px; }
.settings-title h2 { font-size: 36px; }
.settings-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 30px 0px 20px; }
.setting-tile { height: 175px; display: grid; grid-template-columns: 60px 1fr; grid-template-rows: 1fr 1fr; align-items: start; padding: 23px; border: 1px solid rgb(86, 66, 58); border-radius: 24px; background: rgb(37, 26, 22); color: rgb(142, 128, 102); text-align: left; }
.setting-tile > span { width: 54px; height: 54px; grid-row: 1; display: grid; place-items: center; border-radius: 50%; background: rgb(59, 47, 41); font-size: 24px; }
.setting-tile > b { grid-column: 1 / -1; align-self: end; font-size: 18px; }
.setting-tile > small { grid-area: 1 / 2; justify-self: end; color: rgb(143, 128, 102); font-weight: 800; letter-spacing: 0.13em; }
.setting-tile.active { border-color: rgb(229, 185, 87); background: linear-gradient(145deg, rgb(143, 32, 51), rgb(102, 23, 38)); color: rgb(255, 240, 208); }
.setting-tile.active > span { background: rgb(240, 200, 102); color: rgb(51, 23, 7); }
.setting-tile.active > small { color: rgb(255, 225, 132); }
.settings-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.settings-groups label { min-height: 100px; padding: 18px 22px; border: 1px solid rgb(85, 66, 58); border-radius: 20px; background: rgb(32, 21, 18); }
.settings-groups label > span { display: block; margin-bottom: 12px; color: rgb(183, 164, 122); font-size: 10px; font-weight: 800; letter-spacing: 0.17em; }
.segmented { height: 39px; display: grid; grid-template-columns: 1fr 1fr; border-radius: 999px; background: rgb(20, 13, 11); overflow: hidden; text-align: center; }
.segmented b, .segmented i { display: grid; place-items: center; font-style: normal; }
.segmented b { border-radius: 999px; background: linear-gradient(rgb(245, 214, 125), rgb(199, 142, 46)); color: rgb(42, 21, 7); }
.settings-groups select { width: 100%; height: 39px; padding: 0px 14px; border: 0px; border-radius: 999px; background: rgb(20, 13, 11); color: rgb(245, 217, 149); }
.settings-logout { width: 100%; height: 62px; margin-top: 18px; border: 1px solid rgb(135, 64, 59); border-radius: 17px; background: rgb(36, 16, 15); color: rgb(255, 127, 117); font-weight: 800; }
.result-card { width: min(820px, -34px + 100vw); text-align: left; padding: 33px 36px !important; }
.result-card .trophy { display: none; }
.result-card > .eyebrow { margin: 0px; }
.result-card h2 { font-size: 36px; }
.result-card > p:not(.eyebrow) { margin: 5px 0px 17px; }
.result-card .standings { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
.result-card .standing { min-height: 66px; grid-template-columns: 28px 44px minmax(90px, 1fr) minmax(120px, 2.1fr) 86px; gap: 10px; border: 1px solid rgb(86, 53, 42); border-radius: 16px; display: grid !important; align-items: center !important; padding: 9px 15px !important; background: rgb(45, 19, 20) !important; text-align: left !important; }
.result-card .standing.leader { border-color: rgb(224, 182, 89); background: linear-gradient(90deg, rgb(75, 33, 26), rgb(59, 23, 24)) !important; }
.standing-rank { color: rgb(240, 202, 112); font-weight: 900; text-align: center !important; }
.standing-avatar { width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid rgb(214, 174, 86); border-radius: 50%; background: linear-gradient(rgb(230, 191, 99), rgb(138, 83, 25)); color: rgb(37, 19, 7); font-weight: 900; }
.standing-player { overflow: hidden; color: rgb(255, 243, 218); font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; position: static !important; text-align: left !important; }
.standing-progress { height: 9px; border-radius: 999px; background: rgb(93, 52, 49); overflow: hidden; }
.standing-progress i { display: block; width: var(--score-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgb(167, 137, 77), rgb(255, 226, 142)); }
.standing-score { align-items: center; position: static !important; display: grid !important; grid-template-columns: 32px 1fr !important; gap: 7px !important; justify-content: end !important; text-align: right !important; }
.standing-score .round-gain { color: rgb(245, 212, 125); font-weight: 900; width: auto !important; }
.standing-score b { font-size: 19px !important; color: rgb(255, 240, 193) !important; text-align: right !important; }
.result-card .start-btn { width: 145px; float: right; }
.result-card .text-btn { clear: both; display: block; margin-left: auto; margin-right: 0px; }
.target-update { border-color: rgb(216, 173, 78); background: rgb(68, 40, 21); color: rgb(255, 224, 154); }
.swap-selection-stage { border-color: rgb(221, 186, 102); background: linear-gradient(160deg, rgba(116, 26, 43, 0.86), rgba(49, 13, 19, 0.93)); }
.swap-selection-stage > b { color: rgb(255, 240, 192); }
.swap-table-message { border-color: rgb(220, 182, 96); background: rgba(47, 17, 21, 0.93); }
.swap-card-back { background-color: rgb(157, 38, 52); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.106) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.106) 75%), radial-gradient(circle, rgb(239, 201, 99) 0px, rgb(239, 201, 99) 18%, transparent 19%); }
@media (max-width: 900px) {
  .round-pill { left: 24%; }
  .top-actions #replayBtn, .top-actions #rulesBtn, .top-actions #restartBtn { display: none; }
  .language-switch { display: none; }
  .home-hero { padding: 20px 14px 12px; }
  .home-nav button { min-height: 43px; padding: 0px 10px; font-size: 11px; }
  .home-hero .install-app-btn { min-height: 42px; margin-top: 8px; }
  .home-panel { padding: 16px 20px; }
  .home-panel-head { margin-bottom: 8px; }
  .home-panel h1 { font-size: 27px; }
  .home-panel-head .intro { font-size: 9px; }
  .classic-hero { min-height: 110px; grid-template-columns: 1fr 160px; padding: 14px 20px; border-radius: 20px; }
  .classic-hero h2 { font-size: 23px; }
  .classic-hero p:not(.eyebrow) { font-size: 8px; }
  .hero-playing-cards { height: 86px; }
  .hero-playing-cards i { width: 51px; height: 73px; font-size: 16px; }
  .hero-playing-cards small { font-size: 16px; }
  .home-panel .mode-tabs { gap: 8px; margin: 8px 0px; }
  .home-panel .mode-tab { min-height: 55px; padding: 8px; border-radius: 13px; }
  .home-panel .mode-tab b { font-size: 13px; }
  .home-panel .player-options button { height: 52px; }
  .home-panel .start-btn { height: 39px; margin-top: 8px; }
  .setup-foot { display: none; }
  .table-wrap { padding: 0px 52px 4px; }
  .wood-rim { padding: 10px; }
  .seat .avatar { width: 48px; height: 48px; }
  .turn-timer { width: 56px !important; height: 56px !important; }
  .seat-meta strong { font-size: 9px; }
  .seat-meta span { font-size: 8px !important; }
  .seat-left { left: -5%; }
  .seat-right { right: -5%; }
  .seat-bottom { left: -5%; }
  .opponent-hand .card-back { width: 25px; height: 37px; margin-left: -14px; }
  .player-dock { left: 18%; right: 18%; height: 34%; }
  .hand .card { width: 58px; height: 84px; flex-basis: 58px; margin-left: -20px; }
  .hand .card .corner { font-size: 13px; }
  .hand .card .corner small { font-size: 11px; }
  .hand .card .suit-big { font-size: 26px; }
  .controls .btn { width: 84px; height: 48px; bottom: 10px; font-size: 11px; }
  .controls .play { left: max(8px,env(safe-area-inset-left)); }
  .controls .pass { right: max(8px,env(safe-area-inset-right)); }
  .center-play { inset: 24% 22%; }
  .pile { height: 95px; }
  .settings-card { max-height: calc(100dvh - 12px); padding: 15px 20px !important; }
  .settings-title > button { width: 35px; height: 35px; }
  .settings-title h2 { font-size: 24px; }
  .settings-tiles { margin: 10px 0px; gap: 8px; }
  .setting-tile { height: 94px; padding: 10px; border-radius: 14px; }
  .setting-tile > span { width: 35px; height: 35px; font-size: 16px; }
  .setting-tile > b { font-size: 11px; }
  .setting-tile > small { font-size: 7px; }
  .settings-groups label { min-height: 65px; padding: 10px; }
  .settings-groups label > span { margin-bottom: 6px; font-size: 7px; }
  .settings-logout { height: 40px; margin-top: 8px; }
  .club-card { max-height: calc(100dvh - 10px); padding: 14px 20px; }
  .club-card .leaderboard { max-height: 120px; }
  .result-card { max-height: calc(100dvh - 10px); padding: 15px 20px !important; }
  .result-card h2 { font-size: 25px; }
  .result-card > p:not(.eyebrow) { margin: 3px 0px 7px; font-size: 9px; }
  .result-card .standings { gap: 5px !important; }
  .result-card .standing { min-height: 43px; grid-template-columns: 20px 30px minmax(70px, 1fr) minmax(80px, 1.7fr) 65px; border-radius: 10px; padding: 5px 8px !important; }
  .standing-avatar { width: 28px; height: 28px; }
  .standing-player { font-size: 9px; }
  .standing-score b { font-size: 13px !important; }
  .result-card .start-btn { height: 36px; margin-top: 6px; }
}
@media (max-width: 620px) {
  .home-hero { padding: 12px 8px; }
  .home-nav button { grid-template-columns: 20px 1fr; min-height: 36px; font-size: 9px; }
  .home-hero .install-app-btn small { display: none; }
  .home-panel { padding: 10px 12px; }
  .home-panel-head .intro { display: none; }
  .classic-hero { grid-template-columns: 1fr 95px; padding: 9px 12px; }
  .classic-hero h2 { font-size: 17px; }
  .classic-hero p:not(.eyebrow) { display: none; }
  .hero-playing-cards i { width: 42px; height: 60px; }
  .home-panel .mode-tab > span { font-size: 17px; }
  .home-panel .mode-tab { grid-template-columns: 31px 1fr; min-height: 47px; }
  .home-panel .mode-tab b { font-size: 11px; }
  .home-panel .mode-tab small { font-size: 6px; }
  .home-panel .field-label { font-size: 7px; margin-bottom: 3px; }
  .home-panel .player-options { gap: 4px; }
  .home-panel .player-options button { height: 42px; }
  .home-panel .player-options span { display: none; }
  .computer-ai-setting { margin-top: 4px !important; }
  .home-panel .room-divider { margin: 5px 0px; }
  .home-panel .room-input { height: 34px; }
  .home-panel .quick-match-btn { min-height: 40px; margin-top: 5px; }
  .home-panel .network-note { display: none; }
}
@media (orientation: landscape) and (max-height: 700px) and (pointer: coarse) {
  body.fullscreen-active .game-stage { background: rgb(16, 11, 8); }
  body.fullscreen-active .table-wrap { position: absolute; inset: 8% 8% 7%; padding: 0px; perspective: none; }
  body.fullscreen-active .game-stage .wood-rim { padding: 10px; border: 0px; border-radius: 25% / 18%; transform: none; filter: none; background: linear-gradient(90deg, rgb(75, 30, 16), rgb(178, 124, 65) 7%, rgb(224, 174, 98) 10%, rgb(106, 53, 24) 15%, rgb(42, 18, 9) 48%, rgb(124, 66, 30) 82%, rgb(219, 158, 80) 89%, rgb(60, 24, 12)); box-shadow: rgba(0, 0, 0, 0.867) 0px 20px 45px, rgba(255, 216, 152, 0.6) 0px 2px inset, rgb(28, 9, 5) 0px -7px 11px inset, rgb(23, 18, 15) 0px 0px 0px 3px; }
  body.fullscreen-active .game-stage .table-felt { border: 2px solid rgb(50, 33, 24); border-radius: 25% / 18%; background: radial-gradient(at 50% 43%, rgb(25, 118, 78) 0px, rgb(13, 90, 61) 48%, rgb(7, 58, 40) 78%, rgb(4, 30, 23) 100%); box-shadow: rgba(0, 22, 15, 0.733) 0px 0px 58px inset, rgba(239, 209, 123, 0.133) 0px 0px 0px 3px inset; }
  body.fullscreen-active[data-theme="royal"] .game-stage .table-felt { background: radial-gradient(at 50% 43%, rgb(159, 42, 62) 0px, rgb(119, 25, 41) 48%, rgb(74, 14, 25) 80%, rgb(38, 7, 12) 100%); }
  body.fullscreen-active[data-theme="midnight"] .game-stage .table-felt { background: radial-gradient(at 50% 43%, rgb(40, 91, 116) 0px, rgb(24, 70, 95) 48%, rgb(12, 45, 67) 80%, rgb(6, 24, 33) 100%); }
  body.fullscreen-active .seat-top { top: 1%; left: 50%; bottom: auto; }
  body.fullscreen-active .seat-left { left: 1%; right: auto; top: 50%; }
  body.fullscreen-active .seat-right { right: 1%; left: auto; top: 50%; }
  body.fullscreen-active .seat-bottom { left: 1%; right: auto; bottom: 2%; transform: none; pointer-events: none; display: grid !important; }
  body.fullscreen-active .seat .avatar, body.fullscreen-active .seat-bottom .avatar { width: 48px; height: 48px; flex-basis: 48px; border-width: 3px; }
  body.fullscreen-active .turn-timer, body.fullscreen-active .seat-bottom .turn-timer { top: -4px !important; left: 50% !important; width: 56px !important; height: 56px !important; }
  body.fullscreen-active .seat-bottom .seat-meta { min-width: 0px; }
  body.fullscreen-active .seat-bottom .seat-meta strong { max-width: 85px; font-size: 9px; }
  body.fullscreen-active .seat-bottom .seat-meta span { position: static; font-size: 8px !important; }
  body.fullscreen-active .player-dock, body.fullscreen-active .player-dock.many-cards { left: 18%; right: 18%; bottom: -7px; height: 34%; padding: 0px; background: transparent; }
  body.fullscreen-active .status-row { display: none; }
  body.fullscreen-active .hand-scroll { height: 100%; overflow: visible; filter: none; }
  body.fullscreen-active .hand { height: 100%; width: 100%; padding: 9px 0px 0px; }
  body.fullscreen-active .hand .card { width: 58px; height: 84px; flex-basis: 58px; margin-left: var(--hand-overlap,-20px); border-radius: 8px; }
  body.fullscreen-active .hand .card:first-child { margin-left: 0px; }
  body.fullscreen-active .hand:not(.many-cards) .card.selected, body.fullscreen-active .hand:not(.many-cards) .card.selected:hover { box-shadow: rgb(255, 231, 137) 0px 0px 0px 2px, rgba(255, 212, 92, 0.467) 0px 0px 18px, rgba(0, 0, 0, 0.733) 0px 12px 18px; }
  body.fullscreen-active .controls { position: fixed; inset: 0px; max-width: none; margin: 0px; background: none; pointer-events: none; }
  body.fullscreen-active #playBtn { left: max(8px,env(safe-area-inset-left)); right: auto; width: 84px; height: 48px; bottom: 10px; font-size: 10px; pointer-events: auto; }
  body.fullscreen-active #passBtn { right: max(8px,env(safe-area-inset-right)); left: auto; width: 84px; height: 48px; bottom: 10px; font-size: 11px; pointer-events: auto; }
  body.fullscreen-active .center-play { inset: 24% 22%; }
}
:root { --deck-ink: #100405; --deck-panel: #25090d; --deck-panel-2: #3b1017; --deck-bordo: #7a1c2d; --deck-gold: #edc663; --deck-cream: #fff1ce; --deck-muted: #b9a071; --deck-violet: #4038c7; --deck-green: #126341; --deck-blue: #174e69; }
html, body { background: var(--deck-ink); }
body { background: radial-gradient(circle at 50% 28%, rgb(53, 16, 23) 0px, rgb(19, 5, 6) 48%, rgb(8, 2, 3) 100%); color: var(--deck-cream); }
button { letter-spacing: 0.045em; }
.splash-screen { overflow: hidden; background: rgb(16, 4, 5); transition: opacity 0.5s, visibility 0.5s; }
.splash-stage { position: absolute; inset: 0px; display: grid; place-items: center; opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgb(92, 21, 33), rgb(38, 8, 13) 49%, rgb(16, 4, 5)); animation-duration: 3.65s; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.splash-brand-stage { align-content: center; gap: 10px; animation-name: splashBrandPhase; }
.splash-brand-stage > img { width: 90px; height: 90px; filter: drop-shadow(rgba(0, 0, 0, 0.667) 0px 18px 25px); }
.splash-brand-stage > strong { font: 800 clamp(30px, 4vw, 52px) "Playfair Display", serif; letter-spacing: 0.24em; color: rgb(245, 210, 125); }
.splash-brand-stage > small { font-size: 9px; letter-spacing: 0.35em; color: rgb(207, 175, 104); }
.splash-brand-stage > p { max-width: 470px; margin: 2px 0px; color: rgb(168, 144, 100); font-size: 10px; text-align: center; }
.splash-progress { width: min(410px, 52vw); height: 7px; margin-top: 25px; border-radius: 999px; background: rgba(255, 255, 255, 0.043); overflow: hidden; }
.splash-progress b { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgb(182, 122, 35), rgb(255, 225, 139)); transform-origin: left center; animation: 1.16s ease-out 0s 1 normal both running splashProgress; }
.splash-fan-stage { grid-template-columns: 1fr 1fr; background: linear-gradient(90deg, rgb(123, 25, 43) 0px, rgb(123, 25, 43) 50%, rgb(35, 8, 12) 50%); animation-name: splashFanPhase; }
.splash-fan-stage::after { content: ""; position: absolute; left: 50%; top: 0px; bottom: 0px; width: 1px; background: rgb(230, 188, 94); }
.splash-card-fan { position: relative; width: 330px; height: 280px; }
.splash-card-fan i { position: absolute; left: 50%; top: 50%; width: 115px; height: 165px; padding: 12px; border: 1px solid rgb(216, 208, 189); border-radius: 12px; background: rgb(255, 253, 245); color: rgb(22, 18, 12); box-shadow: rgba(0, 0, 0, 0.533) 0px 16px 22px; transform-origin: 50% 110%; animation: 0.72s cubic-bezier(0.2, 0.9, 0.25, 1) 0.95s 1 normal both running fanOpen; }
.splash-card-fan i b { font: 800 29px "Playfair Display", serif; }
.splash-card-fan i span { display: block; font-size: 34px; }
.splash-card-fan i:nth-child(1) { --fan: -28deg; }
.splash-card-fan i:nth-child(2) { --fan: -10deg; color: rgb(181, 30, 49); }
.splash-card-fan i:nth-child(3) { --fan: 9deg; color: rgb(181, 30, 49); }
.splash-card-fan i:nth-child(4) { --fan: 28deg; color: rgb(181, 30, 49); }
.splash-card-fan .joker span { font-size: 12px; letter-spacing: 0.17em; }
.splash-copy { justify-self: start; display: grid; grid-template-columns: 56px 1fr; align-items: center; max-width: 520px; padding-left: 70px; }
.splash-copy .mini-crest { width: 48px; height: 54px; grid-row: 1 / 3; display: grid; place-items: center; clip-path: polygon(50% 0px, 100% 36%, 82% 100%, 18% 100%, 0px 36%); background: linear-gradient(rgb(245, 215, 126), rgb(169, 108, 29)); color: rgb(54, 18, 7); font: 800 24px "Playfair Display", serif; }
.splash-copy > small { color: rgb(216, 178, 92); letter-spacing: 0.25em; }
.splash-copy > strong { font: 800 clamp(50px, 7vw, 82px) "Playfair Display", serif; }
.splash-copy > p, .splash-copy > em { grid-column: 1 / -1; }
.splash-copy > p { font: italic 600 18px / 1.4 "Playfair Display", serif; color: rgb(215, 195, 155); }
.splash-copy > em { margin-top: 24px; color: rgb(207, 173, 98); font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: 0.15em; }
.splash-copy > em b { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: rgb(243, 207, 115); animation: 0.8s ease 0s infinite alternate none running loadingDot; }
.splash-copy > em b:nth-child(2) { animation-delay: 0.18s; }
.splash-copy > em b:nth-child(3) { animation-delay: 0.36s; }
.splash-deal-stage { align-content: start; padding-top: 5vh; background: rgb(17, 11, 7); animation-name: splashDealPhase; }
.deal-wordmark { display: flex; align-items: center; gap: 12px; color: rgb(235, 198, 109); }
.deal-wordmark span { width: 34px; height: 39px; display: grid; place-items: center; clip-path: polygon(50% 0px, 100% 34%, 82% 100%, 18% 100%, 0px 34%); background: rgb(227, 181, 79); color: rgb(58, 26, 8); font: 800 18px "Playfair Display", serif; }
.deal-wordmark strong { font: 800 23px "Playfair Display", serif; letter-spacing: 0.2em; }
.deal-table { position: relative; width: min(900px, 72vw); height: min(440px, 55vh); margin-top: 25px; border: 18px solid rgb(95, 44, 24); border-radius: 70px; background: radial-gradient(circle, rgb(146, 35, 58), rgb(104, 19, 35) 72%); box-shadow: rgb(230, 189, 92) 0px 0px 0px 3px, rgba(36, 3, 11, 0.8) 0px 0px 55px inset, rgba(0, 0, 0, 0.733) 0px 25px 40px; }
.deal-deck, .deal-table > b { position: absolute; left: 50%; top: 50%; width: 52px; height: 74px; border: 2px solid rgb(245, 230, 196); border-radius: 7px; background: repeating-linear-gradient(45deg, rgb(155, 38, 55) 0px, rgb(155, 38, 55) 3px, rgb(216, 106, 114) 3px, rgb(216, 106, 114) 4px); box-shadow: rgba(0, 0, 0, 0.467) 0px 8px 12px; }
.deal-deck { transform: translate(-50%, -50%); z-index: 5; }
.deal-table > b { animation: 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) 2.45s 1 normal both running dealFly; }
.deal-table > b:nth-of-type(1) { --dx: 0px; --dy: -150px; --rot: 6deg; }
.deal-table > b:nth-of-type(2) { --dx: 310px; --dy: 0px; --rot: 95deg; }
.deal-table > b:nth-of-type(3) { --dx: 0px; --dy: 150px; --rot: 185deg; }
.deal-table > b:nth-of-type(4) { --dx: -310px; --dy: 0px; --rot: 275deg; }
.splash-deal-stage > small { margin-top: 23px; color: rgb(224, 193, 122); font-size: 10px; font-weight: 800; letter-spacing: 0.25em; }
@keyframes splashBrandPhase { 
  0%, 2% { opacity: 0; transform: scale(0.97); }
  5%, 26% { opacity: 1; transform: none; }
  30%, 100% { opacity: 0; transform: scale(1.02); }
}
@keyframes splashFanPhase { 
  0%, 27% { opacity: 0; transform: translateY(12px); }
  32%, 59% { opacity: 1; transform: none; }
  64%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes splashDealPhase { 
  0%, 60% { opacity: 0; }
  66%, 98% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes splashProgress { 
  0% { transform: scaleX(0.02); }
  100% { transform: scaleX(1); }
}
@keyframes fanOpen { 
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%,-50%) rotate(var(--fan)); }
}
@keyframes dealFly { 
  0% { transform: translate(-50%, -50%) scale(0.85); }
  100% { transform: translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(.65); }
}
@keyframes loadingDot { 
  100% { opacity: 0.3; transform: translateY(-3px); }
}
.home-hero { background: linear-gradient(rgb(42, 13, 16), rgb(22, 6, 7)) !important; }
.home-hero::after { display: none !important; }
.home-nav button { color: rgb(216, 196, 153) !important; }
.home-nav button.active, .home-nav button:hover { background: rgb(74, 45, 32) !important; color: rgb(255, 240, 201) !important; }
.home-nav button > span { color: rgb(239, 198, 95) !important; }
.home-panel { background: radial-gradient(circle at 90% 0px, rgba(125, 26, 42, 0.27), transparent 38%), rgb(25, 7, 8) !important; }
.home-panel-head .eyebrow, .classic-hero .eyebrow { color: rgb(239, 197, 97) !important; }
.home-panel h1 { color: rgb(255, 240, 208) !important; }
.classic-hero { border-color: rgb(230, 189, 93) !important; border-radius: 30px !important; background: linear-gradient(112deg, rgb(114, 22, 40), rgb(148, 31, 53)) !important; box-shadow: rgba(255, 255, 255, 0.133) 0px 1px inset, rgba(0, 0, 0, 0.467) 0px 18px 30px !important; }
.classic-hero h2 { font-size: clamp(28px, 3vw, 48px) !important; color: rgb(255, 242, 216) !important; }
.hero-playing-cards i { background: rgb(255, 253, 244) !important; }
.mode-tabs { grid-template-columns: 1fr 1fr !important; }
.mode-tab { border-color: rgb(94, 56, 39) !important; background: rgb(39, 18, 18) !important; }
.mode-tab.active { border-color: rgb(233, 195, 95) !important; background: rgb(74, 40, 31) !important; }
.mode-felt { box-shadow: rgba(0, 0, 0, 0.533) 0px 0px 12px inset; width: 52px !important; height: 30px !important; border: 4px solid rgb(142, 81, 38) !important; border-radius: 999px !important; }
.mode-felt.salon { background: radial-gradient(circle, rgb(155, 36, 56), rgb(101, 16, 31)) !important; }
.mode-felt.private { background: radial-gradient(circle, rgb(37, 133, 96), rgb(8, 67, 46)) !important; }
.home-panel .start-btn { background: linear-gradient(rgb(255, 227, 141), rgb(198, 139, 43)) !important; color: rgb(42, 19, 8) !important; box-shadow: rgb(114, 66, 15) 0px 5px 0px !important; }
.home-panel .start-btn.secondary { border-color: rgb(155, 119, 57) !important; background: rgb(40, 19, 14) !important; color: rgb(239, 201, 106) !important; box-shadow: none !important; }
.quick-match-btn { border: 1px solid rgb(135, 115, 255) !important; background: linear-gradient(135deg, rgb(93, 85, 233), rgb(51, 42, 165)) !important; box-shadow: rgb(32, 25, 121) 0px 7px 0px !important; }
@keyframes radarPulse { 
  0% { transform: scale(0.55); opacity: 0.9; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes shuffleCards { 
  0%, 100% { transform: translateX(-18px) rotate(-6deg); }
  50% { transform: translateX(18px) rotate(6deg); }
}
.app-shell { background: rgb(16, 11, 7); }
.topbar { height: 9%; min-height: 54px; border: 0px; background: rgb(16, 11, 7); }
.brand-mark { filter: drop-shadow(rgba(0, 0, 0, 0.533) 0px 5px 7px); }
.brand strong { font-family: "Playfair Display", serif; letter-spacing: 0.16em; color: rgb(239, 209, 123); }
.round-pill { border-color: rgb(128, 98, 48); background: rgb(29, 18, 13); }
.game-stage { background: rgb(16, 11, 7); }
.table-wrap { inset: 7% 6% 4%; padding: 0px; }
.wood-rim { padding: 17px; border: 0px; border-radius: 31% / 24%; background: linear-gradient(90deg, rgb(60, 24, 13), rgb(155, 91, 45) 7%, rgb(214, 161, 90) 10%, rgb(90, 43, 20) 16%, rgb(42, 16, 9) 50%, rgb(107, 53, 25) 82%, rgb(210, 154, 79) 89%, rgb(54, 21, 11)); box-shadow: rgba(0, 0, 0, 0.933) 0px 25px 55px, rgba(255, 230, 160, 0.584) 0px 2px inset, rgb(22, 7, 4) 0px -9px 16px inset; }
.table-felt { border: 2px solid rgb(39, 22, 15); border-radius: 31% / 24%; background: radial-gradient(at 50% 42%, rgb(33, 131, 92) 0px, rgb(14, 99, 68) 45%, rgb(7, 66, 47) 76%, rgb(3, 39, 30) 100%); box-shadow: rgba(0, 23, 15, 0.733) 0px 0px 72px inset, rgba(238, 208, 122, 0.12) 0px 0px 0px 2px inset; }
.felt-pattern { opacity: 0.13; }
.table-brand { opacity: 0.08; }
.seat .avatar { border-color: rgb(183, 143, 70); background: linear-gradient(rgb(59, 44, 32), rgb(23, 17, 14)); box-shadow: rgba(0, 0, 0, 0.733) 0px 8px 18px; }
.seat.active .avatar { border-color: rgb(93, 255, 167) !important; box-shadow: rgba(26, 255, 121, 0.333) 0px 0px 0px 4px, rgba(51, 255, 144, 0.533) 0px 0px 24px !important; }
.seat-meta strong { font-family: "Playfair Display", serif; }
.seat-meta span { font-weight: 900 !important; color: rgb(242, 206, 102) !important; }
.opponent-hand .card-back { border-color: rgb(255, 245, 208); background-color: rgb(161, 40, 59); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.094) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.094) 75%), radial-gradient(circle, rgb(238, 200, 98) 0px, rgb(238, 200, 98) 16%, transparent 17%); box-shadow: rgba(0, 0, 0, 0.467) 0px 6px 10px; }
.player-dock { left: 22%; right: 22%; bottom: -4%; height: 35%; background: transparent; }
.status-row { display: none; }
.hand-scroll { overflow: visible; }
.hand { align-items: flex-start; padding-top: 12px; }
.hand .card { background: rgb(255, 253, 245); box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 22px; will-change: transform; }
.hand .card.selected { box-shadow: rgb(242, 205, 98) 0px 0px 0px 3px, rgba(244, 207, 108, 0.6) 0px 0px 25px, rgba(0, 0, 0, 0.8) 0px 15px 24px; }
.center-play { inset: 25% 32% 31%; }
.pile .card { box-shadow: rgba(0, 0, 0, 0.6) 0px 10px 18px; }
.controls { position: fixed; inset: 0px; pointer-events: none; }
.controls .btn { position: fixed; pointer-events: auto; border: 1px solid rgb(239, 206, 120); border-radius: 16px; font-weight: 900; }
.controls .play { right: 5%; bottom: 11%; left: auto; width: 130px; height: 62px; background: linear-gradient(rgb(244, 217, 138), rgb(183, 124, 37)); color: rgb(41, 21, 9); }
.controls .pass { right: 5%; bottom: 3%; left: auto; width: 130px; height: 48px; background: rgb(33, 16, 13); color: rgb(228, 194, 109); }
.controls .play.valid { box-shadow: rgba(239, 200, 95, 0.533) 0px 0px 24px; }
.reaction-bar { right: 7%; top: 10%; }
body[data-theme="royal"] .wood-rim { padding: 15px; border-radius: 45px; background: linear-gradient(115deg, rgb(58, 20, 13), rgb(142, 77, 43) 12%, rgb(225, 188, 100) 14%, rgb(75, 30, 19) 18%, rgb(43, 13, 13) 80%, rgb(211, 173, 87) 86%, rgb(84, 33, 19)); }
body[data-theme="royal"] .table-felt { border-radius: 33px; background: radial-gradient(at 50% 40%, rgb(150, 40, 59), rgb(114, 24, 39) 55%, rgb(72, 12, 23) 100%); box-shadow: rgba(37, 3, 11, 0.733) 0px 0px 80px inset, rgba(229, 186, 90, 0.4) 0px 0px 0px 2px inset; }
body[data-theme="royal"] .controls .play { left: 4%; right: auto; bottom: 4%; width: 120px; height: 54px; }
body[data-theme="royal"] .controls .pass { right: 4%; bottom: 4%; width: 120px; height: 54px; }
body[data-theme="midnight"] .wood-rim { background: linear-gradient(90deg, rgb(107, 57, 24), rgb(227, 166, 78) 8%, rgb(255, 218, 119) 10%, rgb(118, 64, 27) 16%, rgb(58, 31, 13) 50%, rgb(138, 77, 32) 84%, rgb(240, 189, 95) 90%, rgb(86, 48, 21)); }
body[data-theme="midnight"] .table-felt { background: radial-gradient(at 50% 40%, rgb(35, 99, 125), rgb(23, 77, 102) 52%, rgb(13, 49, 69) 100%); }
body[data-theme="midnight"] .controls .play { left: 50%; right: auto; bottom: 27%; width: 240px; height: 46px; border-radius: 999px; transform: translateX(-50%); opacity: 0; pointer-events: none; }
body[data-theme="midnight"] .controls .play.valid { opacity: 1; pointer-events: auto; }
body[data-theme="midnight"] .controls .pass { right: 4%; bottom: 4%; width: 74px; height: 74px; border-radius: 50%; }
.settings-card { border: 4px solid rgb(40, 42, 43) !important; border-radius: 58px !important; background: rgb(19, 8, 7) !important; box-shadow: rgb(2, 2, 2) 0px 0px 0px 7px, rgba(0, 0, 0, 0.933) 0px 30px 80px !important; }
.settings-title h2 { font-family: "Playfair Display", serif; }
.settings-tiles { grid-template-columns: repeat(4, 1fr); }
.setting-tile { border-color: rgb(76, 56, 48); background: rgb(40, 28, 23); }
.setting-tile.active { border-color: rgb(232, 189, 94); background: linear-gradient(145deg, rgb(152, 40, 59), rgb(109, 24, 40)); }
.settings-groups { grid-template-columns: 0.7fr 1.3fr; }
.theme-previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 9px; }
.theme-previews button { height: 34px; border: 2px solid transparent; border-radius: 999px; color: rgb(255, 244, 210); font-size: 7px; font-weight: 900; }
.theme-previews .salon { background: rgb(22, 97, 63); }
.theme-previews .club { background: rgb(118, 28, 45); }
.theme-previews .harbor { background: rgb(23, 79, 105); }
.theme-previews button.active { border-color: rgb(242, 206, 103); box-shadow: rgba(242, 206, 103, 0.4) 0px 0px 14px; }
#resultModal { background: rgba(11, 3, 3, 0.85); backdrop-filter: blur(16px); }
.result-card { width: min(900px, -30px + 100vw) !important; max-height: calc(100dvh - 24px) !important; padding: 32px 38px !important; border: 1px solid rgb(143, 103, 50) !important; border-radius: 28px !important; background: linear-gradient(145deg, rgb(53, 19, 20), rgb(29, 9, 10)) !important; box-shadow: rgba(0, 0, 0, 0.933) 0px 30px 90px !important; }
.result-card h2 { font-family: "Playfair Display", serif; font-size: 38px !important; }
.result-card .standings { gap: 10px !important; }
.result-card .standing { animation: standingIn .35s calc(.12s + var(--row-delay)) both; grid-template-columns: 28px 44px minmax(95px, 1fr) minmax(160px, 2fr) 85px !important; }
.standing-progress i { animation: scoreGrow .8s calc(.28s + var(--row-delay)) cubic-bezier(.2,.8,.2,1) both; transform-origin: left center; }
.result-rewards { display: grid; grid-template-columns: 42px 70px minmax(200px, 1fr); align-items: center; gap: 10px; margin: 15px 0px; padding: 13px 17px; border: 1px solid rgb(139, 94, 46); border-radius: 16px; background: rgb(35, 11, 12); }
.result-rewards[hidden] { display: none; }
.reward-coin { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgb(255, 229, 155), rgb(186, 121, 32)); color: transparent; box-shadow: rgba(242, 196, 91, 0.333) 0px 0px 18px; }
.result-rewards > b { font-size: 22px; color: rgb(246, 211, 116); }
.result-rewards > div { display: grid; grid-template-columns: 1fr auto; gap: 4px; }
.result-rewards strong { font-size: 10px; }
.result-rewards small { font-size: 8px; color: rgb(187, 166, 123); }
.result-rewards i { grid-column: 1 / -1; height: 7px; border-radius: 99px; background: rgb(77, 48, 48); overflow: hidden; }
.result-rewards em { display: block; width: 84%; height: 100%; background: linear-gradient(90deg, rgb(189, 133, 40), rgb(255, 230, 155)); }
.result-card.match-winner { width: min(1100px, -30px + 100vw) !important; background: radial-gradient(circle at 35% 22%, rgba(138, 73, 60, 0.333), transparent 32%), linear-gradient(110deg, rgb(38, 8, 9) 0px, rgb(38, 8, 9) 63%, rgb(104, 24, 39) 63%) !important; }
.result-card.match-winner .trophy { display: grid; width: 90px; height: 90px; place-items: center; margin: 0px auto 6px; border-radius: 50%; background: linear-gradient(rgb(248, 220, 141), rgb(188, 122, 34)); color: rgb(53, 21, 8); box-shadow: rgba(240, 190, 96, 0.467) 0px 0px 45px; }
.result-card.match-winner h2 { text-align: center; }
.result-card.match-winner > p { text-align: center; }
.result-card.match-winner .standings { max-width: 640px; }
.result-card.match-winner .result-rewards { max-width: 640px; }
.result-card.match-winner .start-btn { float: right; }
@keyframes standingIn { 
  0% { opacity: 0; transform: translateX(-15px); }
  100% { opacity: 1; transform: none; }
}
@keyframes scoreGrow { 
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@media (max-width: 900px), (max-height: 650px) {
  .splash-fan-stage { grid-template-columns: 44% 56%; }
  .splash-card-fan { transform: scale(0.7); }
  .splash-copy { padding-left: 20px; }
  .splash-copy > strong { font-size: 42px; }
  .deal-table { width: 68vw; height: 52vh; }
  .deal-table > b:nth-of-type(2) { --dx: 220px; }
  .deal-table > b:nth-of-type(4) { --dx: -220px; }
  .classic-hero { min-height: 105px !important; }
  .home-panel-head { margin-bottom: 5px !important; }
  .home-panel .mode-tabs { margin: 7px 0px !important; }
  .home-panel .mode-tab { min-height: 50px !important; }
  .settings-card { width: 100vw !important; height: 100dvh !important; max-height: none !important; border: 0px !important; border-radius: 0px !important; box-shadow: none !important; }
  .settings-card { padding: 14px 20px !important; }
  .settings-tiles { margin: 10px 0px; }
  .setting-tile { height: 88px; }
  .settings-groups { gap: 8px; }
  .theme-previews button { height: 26px; }
  .result-card { max-height: calc(100dvh - 8px) !important; padding: 14px 20px !important; }
  .result-card h2 { font-size: 25px !important; }
  .result-card .standing { min-height: 42px !important; grid-template-columns: 20px 30px minmax(70px, 1fr) minmax(90px, 1.6fr) 58px !important; }
  .result-rewards { margin: 7px 0px; padding: 7px; }
  .table-wrap { inset: 8% 7% 2%; }
  .wood-rim { padding: 10px; }
  .player-dock { left: 19%; right: 19%; bottom: -6%; height: 36%; }
  .hand .card { width: 58px; height: 84px; flex-basis: 58px; }
  .controls .play { right: 2%; bottom: 11%; width: 84px; height: 45px; }
  .controls .pass { right: 2%; bottom: 3%; width: 84px; height: 40px; }
  body[data-theme="royal"] .controls .play { left: 2%; bottom: 3%; width: 84px; height: 44px; }
  body[data-theme="royal"] .controls .pass { right: 2%; bottom: 3%; width: 84px; height: 44px; }
  body[data-theme="midnight"] .controls .play { bottom: 25%; width: 170px; height: 36px; }
  body[data-theme="midnight"] .controls .pass { right: 2%; bottom: 3%; width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .splash-stage { display: none; }
  .splash-deal-stage { display: grid; opacity: 1; }
}
.splash-screen { background: rgb(16, 4, 5) !important; padding: max(9px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)) !important; }
.splash-screen::before { content: ""; position: absolute; inset: max(9px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); border: 4px solid rgb(39, 43, 45); border-radius: clamp(32px, 6vw, 72px); background: radial-gradient(circle at 50% 45%, rgb(85, 19, 29) 0px, rgb(39, 7, 12) 58%, rgb(18, 3, 5) 100%); box-shadow: rgb(2, 3, 3) 0px 0px 0px 7px, rgba(0, 0, 0, 0.6) 0px 0px 90px inset; overflow: hidden; }
.splash-screen::after { content: ""; position: absolute; inset: max(20px,calc(env(safe-area-inset-top) + 11px)) max(21px,calc(env(safe-area-inset-right) + 11px)) max(20px,calc(env(safe-area-inset-bottom) + 11px)) max(21px,calc(env(safe-area-inset-left) + 11px)); z-index: 1; border-radius: clamp(24px, 5vw, 58px); pointer-events: none; background: repeating-linear-gradient(55deg, transparent 0px, transparent 3px, rgb(255, 255, 255) 4px, rgb(255, 255, 255) 5px); opacity: 0.022; }
.splash-screen .splash-brand-stage { z-index: 2; gap: 0px; animation: auto ease 0s 1 normal none running none !important; }
.splash-screen:not(.dealing) .splash-brand-stage { opacity: 1 !important; transform: none !important; }
.splash-crest { width: clamp(62px, 8vw, 104px); height: clamp(70px, 9vw, 116px); display: grid; place-items: center; margin-bottom: clamp(16px, 2.2vh, 26px); clip-path: polygon(50% 0px, 100% 28%, 84% 100%, 16% 100%, 0px 28%); background: linear-gradient(145deg, rgb(244, 216, 132), rgb(182, 121, 36)); color: rgb(77, 34, 12); font: 800 clamp(38px, 5vw, 65px) / 1 "Playfair Display", serif; filter: drop-shadow(rgba(0, 0, 0, 0.533) 0px 14px 18px); }
.splash-screen .splash-brand-stage > strong { font: 800 clamp(46px, 7vw, 84px) / 0.9 "Playfair Display", serif; letter-spacing: 0.18em; color: rgb(245, 218, 145); text-indent: 0.18em; text-shadow: rgba(0, 0, 0, 0.533) 0px 8px 24px; }
.splash-screen .splash-brand-stage > small { margin-top: 14px; color: rgb(217, 168, 70); font-size: clamp(8px, 1.15vw, 14px); font-weight: 800; letter-spacing: 0.58em; text-indent: 0.58em; }
.splash-screen .splash-progress { width: min(370px, 42vw); height: 6px; margin-top: clamp(34px, 5vh, 58px); border-radius: 99px; background: rgba(255, 255, 255, 0.067); overflow: hidden; box-shadow: rgba(0, 0, 0, 0.533) 0px 1px 2px inset; }
.splash-screen .splash-progress b { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgb(168, 109, 32), rgb(246, 220, 136), rgb(200, 139, 44)); transform-origin: left center; animation: 2.15s cubic-bezier(0.18, 0.72, 0.2, 1) 0s 1 normal both running splashLoadV105; box-shadow: rgba(231, 189, 95, 0.6) 0px 0px 15px; }
.splash-screen #splashTip { width: min(580px, 68vw); margin: 14px 0px 0px; color: rgb(184, 157, 101); font-size: clamp(9px, 1.1vw, 13px); line-height: 1.35; text-align: center; }
.splash-screen:not(.dealing) .splash-deal-stage { display: none !important; }
.splash-screen.dealing::before { background: radial-gradient(circle, rgb(100, 21, 35), rgb(35, 7, 12) 70%); }
@keyframes splashLoadV105 { 
  0% { transform: scaleX(0); }
  14% { transform: scaleX(0.08); }
  55% { transform: scaleX(0.62); }
  82% { transform: scaleX(0.86); }
  100% { transform: scaleX(1); }
}
.mode-table-preview { position: relative; width: min(80%, 250px); height: clamp(72px, 13vh, 130px); place-self: center; border: 8px solid rgb(117, 66, 31); border-radius: 999px; background: radial-gradient(rgb(141, 32, 51), rgb(94, 17, 30)); box-shadow: rgb(215, 169, 75) 0px 0px 0px 3px, rgba(0, 0, 0, 0.6) 0px 0px 22px inset, rgba(0, 0, 0, 0.467) 0px 15px 25px; }
.mode-table-preview::before, .mode-table-preview::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24%; height: 55%; border: 2px solid rgb(239, 228, 198); border-radius: 6px; background: rgb(248, 244, 232); transform: translate(-58%, -50%) rotate(-8deg); }
.mode-table-preview::after { transform: translate(-30%, -47%) rotate(8deg); }
.mode-table-preview > span { position: absolute; z-index: 2; left: 51%; top: 47%; transform: translate(-50%, -50%); color: rgb(151, 30, 44); font-size: 25px; }
.mode-table-preview.private { display: grid; place-items: center; background: radial-gradient(rgb(44, 134, 93), rgb(12, 74, 50)); }
.mode-table-preview.private::before, .mode-table-preview.private::after { display: none; }
.mode-table-preview.private > b { color: rgb(216, 236, 226); font-size: clamp(11px, 1.4vw, 18px); letter-spacing: 0.42em; text-indent: 0.42em; }
.mode-table-preview.tournament { background: radial-gradient(rgb(80, 73, 212), rgb(39, 33, 124)); border-color: rgb(223, 184, 81); }
.home-mode-cta { height: clamp(42px, 7vh, 60px); margin-top: 12px; border: 0px; border-radius: 14px; background: linear-gradient(rgb(248, 221, 141), rgb(198, 137, 41)); color: rgb(41, 20, 8); font-weight: 900; letter-spacing: 0.14em; cursor: pointer; box-shadow: rgb(117, 69, 15) 0px 5px 0px; transition: transform 0.13s, filter 0.13s; }
.home-mode-cta:active { transform: translateY(3px); box-shadow: rgb(117, 69, 15) 0px 2px 0px; }
.home-mode-cta.classic { display: flex; align-items: center; justify-content: center; gap: 14px; }
.home-mode-cta.classic span { font-size: 19px; }
.home-mode-cta.tournament { background: linear-gradient(rgb(129, 120, 255), rgb(70, 59, 204)); color: rgb(255, 255, 255); box-shadow: rgb(37, 29, 127) 0px 5px 0px; }
.private-actions { align-self: end; }
.private-actions .room-form { display: grid; grid-template-columns: minmax(0px, 0.78fr) 1fr 1fr; gap: 8px; }
.private-actions .room-code-input { height: clamp(42px, 7vh, 60px); padding: 0px 9px; border: 1px solid rgb(149, 113, 53); border-radius: 14px; background: rgb(8, 26, 19); color: rgb(246, 217, 134); font-size: 10px; letter-spacing: 0.14em; text-align: center; }
.private-actions .home-mode-cta { min-width: 0px; margin: 0px; }
.private-actions .code { border: 1px solid rgb(149, 113, 53); background: rgb(7, 26, 19); color: rgb(242, 210, 113); box-shadow: none; }
.sr-only-input { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0px, 0px, 0px, 0px) !important; white-space: nowrap !important; border: 0px !important; }
.home-compat-controls { display: none !important; }
.home-private-lobby { position: absolute; z-index: 8; inset: 80px 8% 6%; display: grid; place-items: center; pointer-events: none; }
.home-private-lobby:has(.room-lobby:not([hidden])) { pointer-events: auto; background: rgba(18, 4, 6, 0.933); border-radius: 28px; }
.home-private-lobby .room-lobby { width: min(620px, 90%); max-height: 100%; overflow: auto; padding: 24px; border: 1px solid rgb(210, 170, 82); border-radius: 24px; background: rgb(10, 33, 24); }
@media (orientation: landscape) and (max-height: 650px) {
  .mode-table-preview { height: min(21vh, 104px); border-width: 6px; }
  .home-mode-cta, .private-actions .room-code-input { height: 39px; border-radius: 10px; font-size: 8px; }
  .home-mode-cta { margin-top: 7px; box-shadow: rgb(117, 69, 15) 0px 3px 0px; }
  .private-actions .room-form { gap: 5px; }
}
@media (orientation: landscape) and (max-height: 430px) {
  .mode-table-preview { height: 58px; border-width: 5px; }
  .home-mode-cta, .private-actions .room-code-input { height: 32px; border-radius: 8px; }
}
.topbar { pointer-events: none; position: absolute !important; inset: 0px 0px auto !important; z-index: 120 !important; height: clamp(50px, 8vh, 76px) !important; min-height: 0px !important; padding: 0px clamp(20px, 3.4vw, 64px) !important; background: linear-gradient(rgba(25, 5, 3, 0.85), transparent) !important; border: 0px !important; }
.topbar .brand, .topbar .top-actions { pointer-events: auto; }
.topbar .brand-mark { overflow: hidden; clip-path: none !important; border-radius: 10px !important; background: rgb(22, 10, 8) !important; box-shadow: rgb(169, 121, 49) 0px 0px 0px 1px, rgba(0, 0, 0, 0.733) 0px 4px 14px !important; }
.topbar .brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.topbar .brand strong { color: rgb(246, 221, 154); font-size: clamp(17px, 2vw, 28px) !important; letter-spacing: 0.17em !important; }
.topbar .brand small, .topbar .round-pill { display: none !important; }
.topbar .top-actions { right: clamp(20px, 3.4vw, 64px) !important; }
.topbar .language-switch, .topbar .icon-btn { border: 1px solid rgb(185, 139, 66) !important; background: rgba(22, 13, 12, 0.8) !important; color: rgb(247, 223, 154) !important; box-shadow: rgba(0, 0, 0, 0.533) 0px 5px 16px !important; }
#gameStage { position: absolute !important; inset: 0px !important; background: radial-gradient(at 50% 42%, transparent 0px, transparent 48%, rgba(32, 8, 6, 0.533) 76%, rgb(11, 2, 2) 100%), linear-gradient(90deg, rgb(22, 5, 4), rgb(58, 13, 12) 50%, rgb(22, 5, 4)) !important; }
#gameStage::before { content: ""; position: absolute; inset: 0px; pointer-events: none; background: radial-gradient(circle at 8% 50%, rgba(213, 152, 53, 0.125), transparent 24%), radial-gradient(circle at 92% 50%, rgba(213, 152, 53, 0.125), transparent 24%); filter: blur(10px); }
#gameStage .table-wrap { inset: clamp(55px, 8vh, 78px) clamp(25px, 3.2vw, 58px) clamp(17px, 2.7vh, 35px) !important; }
#gameStage .wood-rim { padding: clamp(11px, 1.25vw, 19px) !important; border: 2px solid rgb(210, 161, 80) !important; border-radius: 29% / 25% !important; background: linear-gradient(90deg, rgb(42, 16, 7), rgb(110, 53, 24) 13%, rgb(50, 19, 7) 27%, rgb(126, 68, 31) 47%, rgb(48, 18, 7) 64%, rgb(114, 64, 31) 84%, rgb(38, 14, 6)), repeating-linear-gradient(7deg, rgb(60, 29, 13) 0px, rgb(60, 29, 13) 3px, rgb(35, 16, 6) 4px, rgb(35, 16, 6) 8px) !important; box-shadow: rgba(0, 0, 0, 0.933) 0px 18px 55px, rgba(255, 210, 123, 0.6) 0px 3px 3px inset, rgb(18, 5, 2) 0px -7px 12px inset !important; }
#gameStage .table-felt { border: 2px solid rgb(209, 160, 71) !important; border-radius: 29% / 25% !important; background: radial-gradient(at 50% 44%, rgb(141, 19, 40) 0px, rgb(100, 16, 31) 51%, rgb(59, 9, 18) 82%, rgb(34, 6, 11) 100%) !important; box-shadow: rgb(25, 0, 6) 0px 0px 58px inset, rgba(142, 93, 40, 0.44) 0px 0px 0px 3px inset !important; }
#gameStage .felt-pattern { opacity: 0.035 !important; }
#gameStage .table-brand { opacity: 0.1 !important; color: rgb(231, 188, 104) !important; }
#gameStage .seat-top { top: -1.7% !important; }
#gameStage .seat-left { left: -1.4% !important; }
#gameStage .seat-right { right: -1.4% !important; }
#gameStage .seat-bottom { left: 1.2% !important; bottom: 1.3% !important; }
#gameStage .player-dock, #gameStage .player-dock.many-cards { left: 14% !important; right: 14% !important; bottom: -58px !important; height: 46% !important; }
#gameStage .hand .card, #gameStage .hand.many-cards .card { width: clamp(82px, 8.6vw, 116px) !important; height: clamp(120px, 12.5vw, 169px) !important; flex-basis: clamp(82px, 8.6vw, 116px) !important; }
#gameStage .center-play { inset: 27% 30% 28% !important; }
.controls .play { right: 13.5% !important; bottom: 3.3% !important; }
.controls .pass { right: 3.2% !important; bottom: 3.3% !important; }
.controls .btn { width: clamp(104px, 10.5vw, 160px) !important; height: clamp(48px, 6.2vh, 66px) !important; border-radius: 999px !important; }
.swap-table-pile { width: min(570px, 48vw) !important; max-width: none !important; height: auto !important; overflow: visible !important; }
.swap-selection-stage, .swap-table-message { width: 100%; display: grid; justify-items: center; gap: 12px; padding: clamp(15px, 2vw, 25px); border: 1.5px solid rgb(213, 166, 78); border-radius: 24px; background: linear-gradient(155deg, rgba(104, 20, 39, 0.95), rgba(39, 7, 13, 0.93)); box-shadow: rgba(0, 0, 0, 0.8) 0px 18px 45px, rgba(189, 75, 58, 0.14) 0px 0px 28px inset; color: rgb(248, 223, 155); text-align: center; }
.swap-selection-stage > b, .swap-table-message > b { font: 800 clamp(18px, 2.2vw, 31px) "Playfair Display", serif; letter-spacing: 0.04em; }
.swap-selection-stage > small, .swap-table-message > small { color: rgb(231, 203, 137); font-size: clamp(8px, 0.8vw, 12px); }
.swap-selection-cards { width: 100%; display: grid; grid-template-columns: minmax(100px, 1fr) 44px minmax(100px, 1fr); align-items: end; gap: 12px; }
.swap-table-card { min-width: 0px; display: grid; justify-items: center; gap: 8px; }
.swap-table-card > small { width: 100%; min-height: 24px; display: grid; place-items: center; color: rgb(244, 207, 112); font-weight: 800; white-space: normal; }
.swap-table-card .card, .swap-card-back { width: clamp(72px, 6.7vw, 96px) !important; height: clamp(105px, 9.8vw, 140px) !important; margin: 0px !important; transform: none !important; }
.swap-card-back { display: block; border: 2px solid rgb(225, 186, 99); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 22px; }
.swap-table-arrow { align-self: center; color: rgb(242, 202, 104); font-size: 32px; line-height: 1; }
.champion-actions { width: 100% !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: clamp(10px, 1.4vw, 18px) !important; justify-content: stretch !important; align-items: stretch !important; }
.champion-actions button { width: 100% !important; height: clamp(44px, 6.5vh, 58px) !important; margin: 0px !important; padding: 0px 14px !important; display: grid !important; place-items: center !important; border-radius: 16px !important; font-weight: 900 !important; line-height: 1 !important; text-decoration: none !important; }
@media (orientation: landscape) and (max-height: 650px) {
  .topbar { height: 48px !important; padding-inline: max(14px, 3vw) !important; }
  .topbar .brand-mark { width: 32px !important; height: 32px !important; }
  .topbar .brand strong { font-size: 15px !important; }
  .topbar .top-actions { right: max(14px, 3vw) !important; }
  .topbar .language-switch, .topbar .icon-btn { height: 33px !important; min-height: 33px !important; }
  .topbar .icon-btn { width: 33px !important; min-width: 33px !important; }
  #gameStage .table-wrap { inset: 45px max(12px, 3.5vw) 7px !important; }
  #gameStage .wood-rim { padding: 9px !important; }
  #gameStage .player-dock, #gameStage .player-dock.many-cards { left: 13.5% !important; right: 13.5% !important; bottom: -49px !important; height: 47% !important; }
  #gameStage .hand .card, #gameStage .hand.many-cards .card { width: clamp(70px, 7.6vw, 94px) !important; height: clamp(102px, 11vw, 138px) !important; flex-basis: clamp(70px, 7.6vw, 94px) !important; }
  #gameStage .center-play { inset: 25% 29% 27% !important; }
  .controls .play { right: 12.5% !important; bottom: 2.5% !important; }
  .controls .pass { right: 2.5% !important; bottom: 2.5% !important; }
  .controls .btn { width: 92px !important; height: 42px !important; }
  .swap-table-pile { width: min(470px, 48vw) !important; }
  .swap-selection-stage, .swap-table-message { gap: 7px; padding: 10px 14px; border-radius: 17px; }
  .swap-selection-cards { grid-template-columns: minmax(82px, 1fr) 34px minmax(82px, 1fr); gap: 7px; }
  .swap-table-card .card, .swap-card-back { width: 68px !important; height: 99px !important; }
  .swap-table-arrow { font-size: 24px; }
  .swap-table-card > small { min-height: 16px; font-size: 7px; }
}
@media (orientation: landscape) and (max-height: 430px) {
  #gameStage .table-wrap { inset: 40px max(9px, 2.8vw) 4px !important; }
  #gameStage .wood-rim { padding: 7px !important; }
  #gameStage .seat .avatar, #gameStage .seat-bottom .avatar { width: 40px !important; height: 40px !important; flex-basis: 40px !important; }
  #gameStage .player-dock, #gameStage .player-dock.many-cards { left: 13% !important; right: 13% !important; bottom: -46px !important; height: 48% !important; }
  #gameStage .hand .card, #gameStage .hand.many-cards .card { width: 68px !important; height: 99px !important; flex-basis: 68px !important; }
  #gameStage .center-play { inset: 23% 28% 25% !important; }
  .controls .play { right: 12% !important; }
  .controls .pass { right: 2% !important; }
  .controls .btn { width: 80px !important; height: 36px !important; }
  .swap-table-pile { width: min(420px, 47vw) !important; }
  .swap-selection-stage, .swap-table-message { padding: 7px 11px; }
  .swap-selection-stage > b, .swap-table-message > b { font-size: 15px; }
  .swap-table-card .card, .swap-card-back { width: 56px !important; height: 82px !important; }
  .swap-selection-stage > small { font-size: 6px; }
  .champion-actions button { height: 36px !important; }
}
:root { --v1061-gold: #e9c36a; --v1061-cream: #fff0cf; --v1061-ink: #110b08; --v1061-felt: #164e67; --v1061-burgundy: #3b1015; }
.splash-logo-v1061 { width: clamp(92px, 15vw, 168px); aspect-ratio: 1 / 1; object-fit: cover; border-radius: 24%; filter: drop-shadow(rgba(0, 0, 0, 0.733) 0px 16px 30px); }
.deal-wordmark img { width: 54px; height: 54px; object-fit: cover; border-radius: 14px; }
.brand-mark { overflow: hidden; background: rgb(19, 9, 9) !important; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.table-brand img { width: 76px; height: 76px; object-fit: cover; border-radius: 20px; filter: saturate(0.8); }
.app-shell { background: rgb(13, 9, 7) !important; }
.topbar, body.fullscreen-active .topbar { height: 64px !important; min-height: 64px !important; display: grid !important; grid-template-columns: auto auto 1fr !important; align-items: center !important; gap: 14px !important; padding: 0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left)) !important; background: linear-gradient(rgb(21, 16, 12), rgb(13, 9, 7)) !important; border-bottom: 1px solid rgb(110, 75, 37) !important; z-index: 140 !important; }
.brand { height: 46px; }
.brand-mark { width: 38px !important; height: 38px !important; border-radius: 10px !important; }
.brand strong { font-size: 17px !important; color: rgb(242, 208, 123) !important; }
.brand small { display: none !important; }
.round-pill { height: 38px !important; display: flex !important; align-items: center !important; gap: 8px !important; padding: 0px 14px !important; border: 1px solid rgb(124, 92, 46) !important; border-radius: 999px !important; background: rgb(33, 22, 16) !important; }
.round-pill span { font-size: 8px !important; }
.round-pill strong { font-size: 19px !important; }
.top-actions { justify-self: end !important; }
.top-actions .icon-btn { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; border-color: rgb(101, 80, 58) !important; background: rgb(33, 26, 21) !important; }
.top-actions #replayBtn, .top-actions #fullscreenBtn, .top-actions #restartBtn { display: none !important; }
.game-stage, body.fullscreen-active .game-stage { position: absolute !important; inset: 64px 0px 0px !important; overflow: hidden !important; background: radial-gradient(at 50% 45%, rgb(40, 23, 15), rgb(13, 9, 7) 72%) !important; }
.table-wrap, body.fullscreen-active .table-wrap { position: absolute !important; inset: 10px clamp(16px, 6vw, 92px) 14px !important; width: auto !important; height: auto !important; padding: 0px !important; }
.wood-rim, body.fullscreen-active .wood-rim { width: 100% !important; height: 100% !important; max-height: none !important; margin: 0px !important; padding: clamp(10px, 1.5vw, 18px) !important; border: 1px solid rgba(254, 214, 129, 0.49) !important; border-radius: 50% / 23% !important; background: linear-gradient(105deg, rgb(59, 31, 18) 0px, rgb(212, 154, 84) 7%, rgb(101, 64, 31) 12%, rgb(240, 193, 116) 17%, rgb(91, 53, 28) 23%, rgb(43, 22, 14) 50%, rgb(155, 98, 47) 77%, rgb(229, 174, 97) 86%, rgb(66, 36, 23) 100%) !important; box-shadow: rgb(0, 0, 0) 0px 22px 58px, rgb(255, 230, 164) 0px 2px inset, rgb(28, 9, 4) 0px -8px 16px inset !important; }
.table-felt, body.fullscreen-active .game-stage .table-felt { width: 100% !important; height: 100% !important; border: 2px solid rgb(54, 36, 22) !important; border-radius: 50% / 23% !important; background: radial-gradient(at 50% 42%, rgb(33, 109, 135) 0px, rgb(23, 79, 104) 46%, rgb(16, 57, 79) 76%, rgb(9, 37, 54) 100%) !important; box-shadow: rgba(229, 196, 119, 0.145) 0px 0px 0px 2px inset, rgba(2, 12, 22, 0.8) 0px 0px 90px inset !important; }
.table-felt::before { inset: 7% !important; border-color: rgba(233, 202, 109, 0.18) !important; border-radius: 50% / 25% !important; }
.table-felt::after { display: none !important; }
.felt-pattern { opacity: 0.055 !important; }
.table-brand { top: 49% !important; width: auto !important; height: auto !important; opacity: 0.07 !important; }
.table-brand span { display: none; }
.table-brand strong { font-size: 18px !important; }
.seat, body.fullscreen-active .seat { min-width: 0px !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; padding: 0px !important; border: 0px !important; border-radius: 0px !important; background: transparent !important; box-shadow: none !important; transform: none !important; z-index: 23 !important; }
.seat .avatar, body.fullscreen-active .seat .avatar { position: relative !important; width: 58px !important; height: 58px !important; flex: 0 0 58px !important; display: grid !important; place-items: center !important; overflow: hidden !important; border: 3px solid rgb(155, 123, 64) !important; border-radius: 50% !important; background: linear-gradient(145deg, rgb(73, 58, 41), rgb(21, 16, 13)) !important; box-shadow: rgba(0, 0, 0, 0.733) 0px 8px 18px !important; }
.seat .avatar img { width: 100%; height: 100%; object-fit: cover; }
.seat .avatar i, .standing-avatar i, .champion-avatar i, .champion-podium i { width: 58%; height: 65%; display: block; background: linear-gradient(rgb(231, 197, 111), rgb(180, 124, 44)); clip-path: polygon(35% 0px, 65% 0px, 77% 27%, 71% 49%, 94% 65%, 100% 100%, 0px 100%, 6% 65%, 29% 49%, 23% 27%); opacity: 0.96; }
.seat.active .avatar, body.fullscreen-active .seat.active .avatar { border-color: rgb(244, 210, 100) !important; box-shadow: rgba(255, 226, 123, 0.19) 0px 0px 0px 4px, rgba(242, 197, 91, 0.5) 0px 0px 22px !important; }
.seat-meta, body.fullscreen-active .seat-meta { min-width: 72px !important; display: grid !important; justify-items: center !important; margin: 0px !important; text-align: center !important; }
.seat-meta strong, body.fullscreen-active .seat-meta strong { max-width: 100px !important; padding: 1px 8px !important; border-radius: 999px !important; background: rgba(21, 17, 14, 0.92) !important; color: rgb(255, 244, 219) !important; font: 800 10px Manrope !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.seat-meta span, body.fullscreen-active .seat-meta span { position: static !important; margin: 1px 0px 0px !important; color: rgb(245, 211, 110) !important; font: 900 9px Manrope !important; }
.seat-top, body.fullscreen-active .seat-top { inset: -5px auto auto 50% !important; transform: translateX(-50%) !important; }
.seat-left, body.fullscreen-active .seat-left { inset: 50% auto auto -13px !important; transform: translateY(-50%) !important; }
.seat-right, body.fullscreen-active .seat-right { inset: 50% -13px auto auto !important; transform: translateY(-50%) !important; }
.seat-bottom, body.fullscreen-active .seat-bottom { inset: auto auto -5px 50% !important; transform: translateX(-50%) !important; z-index: 11 !important; }
.seat-bottom .seat-meta, body.fullscreen-active .seat-bottom .seat-meta { justify-items: center !important; text-align: center !important; }
.seat-bottom .turn-timer, body.fullscreen-active .seat-bottom .turn-timer, .seat:not(.seat-bottom) .turn-timer, body.fullscreen-active .seat:not(.seat-bottom) .turn-timer { inset: -4px auto auto 50% !important; width: 66px !important; height: 66px !important; transform: translateX(-50%) !important; }
.avatar + .seat-meta { position: relative; z-index: 2; }
.opponent-hand { z-index: 12 !important; }
.opponent-top { top: 56px !important; left: 50% !important; transform: translateX(-50%) !important; }
.opponent-left { left: 56px !important; top: 50% !important; transform: translateY(-50%) rotate(90deg) !important; }
.opponent-right { right: 56px !important; top: 50% !important; transform: translateY(-50%) rotate(-90deg) !important; }
.opponent-hand .card-back { width: 31px !important; height: 46px !important; margin-left: -17px !important; border: 2px solid rgb(245, 230, 187) !important; border-radius: 5px !important; background-color: rgb(156, 33, 52) !important; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.11) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.11) 75%), radial-gradient(circle, rgb(237, 197, 95) 0px, rgb(237, 197, 95) 15%, transparent 16%) !important; box-shadow: rgba(0, 0, 0, 0.6) 0px 5px 9px !important; }
.opponent-top .card-back { transform: rotate(calc((var(--i,0) - 6)*1deg)); }
.center-play { inset: 26% 28% 28% !important; z-index: 9 !important; }
.pile { min-width: 220px !important; height: 126px !important; }
.pile .card { width: 68px !important; height: 98px !important; flex-basis: 68px !important; margin-left: -32px !important; border-radius: 8px !important; }
.pile .card:first-child { margin-left: 0px !important; }
.combo-label { display: none !important; }
.empty-pile { border: 0px !important; background: transparent !important; }
.empty-pile span { font-size: 34px !important; color: rgba(241, 208, 116, 0.23) !important; }
.player-dock, body.fullscreen-active .player-dock { position: absolute !important; left: 18% !important; right: 18% !important; bottom: -10px !important; width: auto !important; height: 38% !important; min-height: 0px !important; padding: 0px !important; border: 0px !important; background: transparent !important; z-index: 16 !important; pointer-events: none !important; }
.hand-scroll { width: 100% !important; height: 100% !important; overflow: visible !important; }
.hand, body.fullscreen-active .hand { width: 100% !important; height: 100% !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; padding: 18px 0px 0px !important; pointer-events: auto !important; }
.hand .card, body.fullscreen-active .hand .card { width: clamp(62px, 7vw, 92px) !important; height: clamp(90px, 10.2vw, 134px) !important; flex-basis: clamp(62px, 7vw, 92px) !important; margin-left: var(--hand-overlap,-30px) !important; border-radius: 9px !important; transform-origin: 50% 150% !important; box-shadow: rgba(0, 0, 0, 0.8) 0px 12px 22px !important; }
.hand .card:first-child { margin-left: 0px !important; }
.hand .card.selected { box-shadow: rgb(245, 207, 98) 0px 0px 0px 3px, rgba(243, 204, 100, 0.533) 0px 0px 24px, rgba(0, 0, 0, 0.867) 0px 16px 24px !important; }
.hand .card .corner { font-size: 17px !important; }
.hand .card .corner small { font-size: 15px !important; }
.hand .card .suit-big { font-size: 34px !important; }
.controls, body.fullscreen-active .controls { position: fixed !important; inset: 0px !important; z-index: 130 !important; pointer-events: none !important; }
.controls .btn { display: block !important; position: fixed !important; bottom: max(16px,env(safe-area-inset-bottom)) !important; width: 112px !important; height: 60px !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(14px) scale(0.96) !important; transition: opacity 0.16s, transform 0.16s, visibility 0.16s !important; border-radius: 22px !important; }
.controls.turn-visible #passBtn { left: max(22px,env(safe-area-inset-left)) !important; right: auto !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; background: rgb(23, 15, 14) !important; color: rgb(255, 224, 160) !important; border: 1px solid rgb(223, 186, 92) !important; }
.controls.turn-visible #playBtn, .controls.swap-visible #playBtn { right: max(22px,env(safe-area-inset-right)) !important; left: auto !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; background: linear-gradient(rgb(247, 220, 137), rgb(189, 128, 37)) !important; color: rgb(40, 20, 8) !important; border: 1px solid rgb(255, 231, 163) !important; box-shadow: rgb(117, 70, 18) 0px 7px 0px, rgba(0, 0, 0, 0.6) 0px 12px 24px !important; }
.controls.turn-visible #passBtn:disabled { opacity: 0.35 !important; pointer-events: none !important; }
.controls.swap-visible #passBtn { display: none !important; }
.deal-overlay { position: absolute; inset: 0px; z-index: 80; display: none; place-items: center; pointer-events: auto; background: radial-gradient(circle, rgba(6, 19, 27, 0.6), transparent 52%); }
.deal-overlay.active { display: grid; }
.deal-source { width: 58px; height: 82px; border: 2px solid rgb(244, 223, 171); border-radius: 7px; background-color: rgb(143, 29, 49); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.106) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.106) 75%), radial-gradient(circle, rgb(234, 193, 90) 0px, rgb(234, 193, 90) 15%, transparent 16%); box-shadow: rgba(0, 0, 0, 0.733) 0px 12px 25px; }
.deal-overlay > span { position: absolute; top: 64%; padding: 7px 13px; border-radius: 999px; background: rgba(20, 13, 12, 0.8); color: rgb(245, 211, 123); font-size: 8px; font-weight: 900; letter-spacing: 0.17em; }
.flying-deal-card { position: absolute; left: 50%; top: 50%; width: 30px; height: 43px; margin: -22px 0px 0px -15px; border: 1px solid rgb(255, 234, 184); border-radius: 4px; background: rgb(157, 34, 54); box-shadow: rgba(0, 0, 0, 0.667) 0px 6px 12px; opacity: 0; animation: dealV1061 .48s var(--deal-delay) cubic-bezier(.2,.75,.2,1) forwards; }
.flying-deal-card.to-top { --deal-x: 0px; --deal-y: -34vh; --deal-r: 4deg; }
.flying-deal-card.to-right { --deal-x: 39vw; --deal-y: 0px; --deal-r: 92deg; }
.flying-deal-card.to-bottom { --deal-x: 0px; --deal-y: 34vh; --deal-r: -4deg; }
.flying-deal-card.to-left { --deal-x: -39vw; --deal-y: 0px; --deal-r: -92deg; }
@keyframes dealV1061 { 
  0% { opacity: 0; transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(0.75); }
  18% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--deal-x),var(--deal-y),0) rotate(var(--deal-r)) scale(.92); }
}
#resultModal { padding: max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)) !important; background: rgba(9, 4, 4, 0.91) !important; backdrop-filter: blur(16px) !important; }
.result-card { width: min(620px, -28px + 100vw) !important; max-height: calc(100dvh - 22px) !important; padding: 22px 26px !important; border: 1px solid rgb(155, 114, 57) !important; border-radius: 26px !important; background: linear-gradient(145deg, rgb(53, 22, 25), rgb(27, 11, 12)) !important; box-shadow: rgb(0, 0, 0) 0px 24px 80px, rgba(110, 37, 35, 0.25) 0px 0px 40px !important; color: rgb(255, 240, 215) !important; }
.round-result-view { display: grid; gap: 10px; }
.round-result-view[hidden], .champion-result-view[hidden] { display: none !important; }
.round-result-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.round-result-head h2 { margin: 0px !important; font: 800 26px "Playfair Display", serif !important; }
.round-result-head > b { color: rgb(203, 177, 122); font-size: 9px; letter-spacing: 0.2em; }
.result-summary { margin: 0px !important; color: rgb(187, 169, 140) !important; font-size: 9px !important; }
.result-card .standings { display: grid !important; gap: 8px !important; margin: 0px !important; }
.result-card .standing { min-height: 54px !important; display: grid !important; grid-template-columns: 22px 36px minmax(80px, 1fr) minmax(110px, 2fr) 64px !important; align-items: center !important; gap: 9px !important; padding: 7px 12px !important; border: 0px !important; border-radius: 15px !important; background: rgb(68, 34, 34) !important; }
.result-card .standing.leader { background: rgb(85, 48, 30) !important; }
.standing-rank { font-weight: 900; color: rgb(247, 214, 118) !important; }
.standing-avatar { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: rgb(42, 33, 24); }
.standing-avatar img { width: 100%; height: 100%; object-fit: cover; }
.standing-avatar i { width: 55% !important; height: 62% !important; }
.standing-player { font-weight: 800; }
.standing-progress { height: 7px; border-radius: 999px; background: rgb(46, 33, 33); overflow: hidden; }
.standing-progress i { display: block; width: var(--score-progress); height: 100%; background: linear-gradient(90deg, rgb(167, 139, 76), rgb(255, 226, 144)); }
.standing-score { justify-content: flex-end; }
.standing-score b { min-width: 22px; text-align: right; color: rgb(255, 244, 214); }
.round-result-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 4px; }
.round-result-actions p { margin: 0px; color: rgb(199, 176, 125); font-size: 9px; }
.round-result-actions .start-btn { width: 106px; height: 46px; margin: 0px !important; }
.champion-result-view { display: grid; justify-items: center; text-align: center; }
.champion-avatar { position: relative; width: 116px; height: 116px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(rgb(242, 209, 124), rgb(185, 124, 40)); box-shadow: rgba(213, 147, 79, 0.467) 0px 0px 45px; }
.champion-avatar > span { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; border-radius: 50%; }
.champion-avatar img { width: 100%; height: 100%; object-fit: cover; }
.champion-avatar i { width: 50% !important; height: 58% !important; background: rgb(50, 26, 15) !important; }
.champion-avatar > b { position: absolute; right: 3px; bottom: 3px; width: 34px; height: 34px; display: grid; place-items: center; border: 3px solid rgb(50, 20, 12); border-radius: 50%; background: rgb(247, 218, 131); color: rgb(50, 20, 12); }
.champion-result-view h2 { margin: 9px 0px 0px !important; font: 800 35px "Playfair Display", serif !important; }
.champion-result-view > strong { color: rgb(232, 189, 94); }
.champion-podium { display: flex; justify-content: center; gap: 9px; margin: 14px 0px; }
.champion-podium > div { display: flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgb(74, 35, 35); }
.champion-podium span { width: 28px; height: 28px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: rgb(40, 26, 21); }
.champion-podium img { width: 100%; height: 100%; object-fit: cover; }
.champion-podium i { width: 55% !important; height: 62% !important; }
.champion-podium b { color: rgb(240, 209, 116); }
.champion-podium small { color: rgb(198, 173, 131); }
.champion-result-view .result-rewards { width: 100%; margin: 6px 0px 0px; }
.champion-actions { width: 100%; display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; }
.champion-actions button { width: 150px; height: 48px; margin: 0px !important; border-radius: 14px !important; }
.champion-actions .text-btn { border: 1px solid rgb(168, 123, 54); background: rgb(32, 16, 17); color: rgb(242, 207, 119); }
.champion-actions .start-btn { background: linear-gradient(rgb(247, 220, 137), rgb(189, 128, 37)); }
@media (orientation: landscape) and (max-height: 650px) {
  .topbar, body.fullscreen-active .topbar { height: 52px !important; min-height: 52px !important; padding-inline: max(12px,env(safe-area-inset-left)) !important; }
  .game-stage, body.fullscreen-active .game-stage { inset: 52px 0px 0px !important; }
  .brand-mark { width: 32px !important; height: 32px !important; }
  .brand strong { font-size: 14px !important; }
  .round-pill { height: 34px !important; }
  .top-actions .icon-btn { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; }
  .table-wrap, body.fullscreen-active .table-wrap { inset: 5px max(10px, 4vw) 7px !important; }
  .wood-rim, body.fullscreen-active .wood-rim { padding: 10px !important; }
  .seat .avatar, body.fullscreen-active .seat .avatar { width: 48px !important; height: 48px !important; flex-basis: 48px !important; }
  .seat-meta strong, body.fullscreen-active .seat-meta strong { font-size: 8px !important; }
  .seat-meta span, body.fullscreen-active .seat-meta span { font-size: 8px !important; }
  .seat-top, body.fullscreen-active .seat-top { top: -4px !important; }
  .seat-left, body.fullscreen-active .seat-left { left: -9px !important; }
  .seat-right, body.fullscreen-active .seat-right { right: -9px !important; }
  .seat-bottom, body.fullscreen-active .seat-bottom { bottom: -4px !important; }
  .seat-bottom .turn-timer, body.fullscreen-active .seat-bottom .turn-timer, .seat:not(.seat-bottom) .turn-timer, body.fullscreen-active .seat:not(.seat-bottom) .turn-timer { width: 56px !important; height: 56px !important; }
  .opponent-top { top: 46px !important; }
  .opponent-left { left: 43px !important; }
  .opponent-right { right: 43px !important; }
  .opponent-hand .card-back { width: 27px !important; height: 39px !important; margin-left: -15px !important; }
  .player-dock, body.fullscreen-active .player-dock { left: 20% !important; right: 20% !important; height: 39% !important; }
  .hand, body.fullscreen-active .hand { padding-top: 11px !important; }
  .hand .card, body.fullscreen-active .hand .card { width: clamp(54px, 6vw, 68px) !important; height: clamp(78px, 8.7vw, 99px) !important; flex-basis: clamp(54px, 6vw, 68px) !important; }
  .hand .card .corner { font-size: 13px !important; }
  .hand .card .corner small { font-size: 11px !important; }
  .hand .card .suit-big { font-size: 26px !important; }
  .center-play { inset: 23% 25% 27% !important; }
  .pile .card { width: 58px !important; height: 84px !important; flex-basis: 58px !important; }
  .controls .btn { bottom: max(8px,env(safe-area-inset-bottom)) !important; width: 92px !important; height: 48px !important; border-radius: 16px !important; font-size: 10px !important; }
  .controls.turn-visible #passBtn { left: max(12px,env(safe-area-inset-left)) !important; }
  .controls.turn-visible #playBtn, .controls.swap-visible #playBtn { right: max(12px,env(safe-area-inset-right)) !important; }
  .result-card { width: min(620px, -24px + 100vw) !important; padding: 16px 22px !important; }
  .round-result-head h2 { font-size: 22px !important; }
  .result-card .standings { gap: 6px !important; }
  .result-card .standing { min-height: 45px !important; grid-template-columns: 20px 31px minmax(72px, 1fr) minmax(95px, 2fr) 58px !important; padding: 5px 10px !important; }
  .standing-avatar { width: 30px; height: 30px; }
  .round-result-actions .start-btn { height: 40px; }
  .champion-avatar { width: 82px; height: 82px; }
  .champion-avatar > b { width: 27px; height: 27px; }
  .champion-result-view h2 { font-size: 28px !important; }
  .champion-podium { margin: 8px 0px; }
  .champion-result-view .result-rewards { padding: 8px 12px; }
  .champion-actions { margin-top: 8px; }
  .champion-actions button { height: 40px; }
}
@media (orientation: landscape) and (max-height: 430px) {
  .topbar, body.fullscreen-active .topbar { height: 44px !important; min-height: 44px !important; }
  .game-stage, body.fullscreen-active .game-stage { inset: 44px 0px 0px !important; }
  .brand-mark { width: 28px !important; height: 28px !important; }
  .round-pill { height: 30px !important; }
  .round-pill strong { font-size: 15px !important; }
  .top-actions .icon-btn { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; }
  .table-wrap, body.fullscreen-active .table-wrap { inset: 3px max(8px, 3.5vw) 4px !important; }
  .seat .avatar, body.fullscreen-active .seat .avatar { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
  .seat-bottom .turn-timer, body.fullscreen-active .seat-bottom .turn-timer, .seat:not(.seat-bottom) .turn-timer, body.fullscreen-active .seat:not(.seat-bottom) .turn-timer { width: 49px !important; height: 49px !important; }
  .opponent-top { top: 39px !important; }
  .opponent-left { left: 37px !important; }
  .opponent-right { right: 37px !important; }
  .opponent-hand .card-back { width: 23px !important; height: 34px !important; margin-left: -13px !important; }
  .player-dock, body.fullscreen-active .player-dock { left: 21% !important; right: 21% !important; height: 40% !important; }
  .hand .card, body.fullscreen-active .hand .card { width: 54px !important; height: 78px !important; flex-basis: 54px !important; }
  .controls .btn { width: 82px !important; height: 42px !important; }
  .center-play { inset: 22% 25% 26% !important; }
  .pile .card { width: 53px !important; height: 76px !important; flex-basis: 53px !important; }
  .result-card { padding: 11px 17px !important; border-radius: 20px !important; }
  .round-result-head h2 { font-size: 19px !important; }
  .result-card .standing { min-height: 38px !important; grid-template-columns: 17px 27px minmax(65px, 1fr) minmax(85px, 2fr) 54px !important; padding: 3px 8px !important; font-size: 9px !important; }
  .standing-avatar { width: 26px; height: 26px; }
  .round-result-actions p { font-size: 7px; }
  .round-result-actions .start-btn { width: 92px; height: 34px; }
  .champion-avatar { width: 64px; height: 64px; }
  .champion-avatar > b { width: 23px; height: 23px; font-size: 10px; }
  .champion-result-view h2 { margin-top: 5px !important; font-size: 22px !important; }
  .champion-podium { margin: 5px 0px; }
  .champion-podium > div { padding: 3px 8px; font-size: 8px; }
  .champion-podium span { width: 23px; height: 23px; }
  .champion-result-view .result-rewards { margin-top: 3px; padding: 5px 9px; }
  .champion-actions { margin-top: 5px; }
  .champion-actions button { height: 34px; }
}
@keyframes spinTournament { 
  100% { transform: rotate(360deg); }
}
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .network-note { display: none; }
}
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; }
button:not(:disabled) { cursor: pointer; }
button:active:not(:disabled) { transform: scale(0.97); filter: brightness(1.06); }
[data-ui-icon] { font-size: 0px !important; }
[data-ui-icon]::before { content: ""; width: 20px; height: 20px; display: block; margin: auto; background: currentcolor; mask: var(--ui-icon) center/contain no-repeat; }
[data-ui-icon="profile"] { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3.25' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M5 20c.6-4.1 3-6.2 7-6.2s6.4 2.1 7 6.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-ui-icon="friends"] { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='17' cy='9' r='2.4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3.5 20c.4-4 2.3-6 5.8-6s5.5 2 5.9 6M14.4 14.7c3.6-.7 5.6 1.1 6.1 4.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-ui-icon="history"] { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.2 7H2.8V4.6M4 6.3A9 9 0 1 1 3 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-ui-icon="fullscreen"] { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4H4v4M16 4h4v4M20 16v4h-4M8 20H4v-4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-ui-icon="help"] { --ui-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%3Cpath d='M9.6 9a2.6 2.6 0 1 1 3.3 2.5c-.9.3-.9 1-.9 1.8M12 17h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-ui-icon="sound"] { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 10v4h4l5 4V6L9 10H5Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M17 9c1.5 1.8 1.5 4.2 0 6M19.5 6.5c3 3.2 3 7.8 0 11' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-ui-icon="sound-off"] { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 10v4h4l5 4V6L9 10H5Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m17 10 4 4m0-4-4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-ui-icon="restart"], [data-ui-icon="rotate"] { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7V3m0 4h-4M19 7a8 8 0 1 0 1 8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-ui-icon="leave"] { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 5H5v14h5M13 8l4 4-4 4m4-4H9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-ui-icon="home"] { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 11 9-7 9 7M5.5 10v10h13V10M9.5 20v-6h5v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-ui-icon="settings"] { --ui-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='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 3v2m0 14v2M3 12h2m14 0h2M5.6 5.6 7 7m10 10 1.4 1.4M18.4 5.6 17 7M7 17l-1.4 1.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-ui-icon="download"] { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m-4-4 4 4 4-4M4 20h16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-ui-icon="vibration"] { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8' y='4' width='8' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M5 8c-1.3 2.5-1.3 5.5 0 8M19 8c1.3 2.5 1.3 5.5 0 8M2.5 10c-.6 1.4-.6 2.6 0 4M21.5 10c.6 1.4.6 2.6 0 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-ui-icon="bell"] { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 17h12l-1.5-2.2V10a4.5 4.5 0 0 0-9 0v4.8L6 17Zm4 3h4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-ui-icon="close"] { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-ui-icon="back"] { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15 5-7 7 7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-ui-icon="tournament"] { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4h8v3c0 4-1.3 6-4 7-2.7-1-4-3-4-7V4Zm0 2H4c0 3 1.3 5 4.3 5M16 6h4c0 3-1.3 5-4.3 5M12 14v4m-4 2h8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-btn[data-ui-icon]::before { width: 18px; height: 18px; }
.home-nav [data-ui-icon]::before, .install-app-btn [data-ui-icon]::before { width: 17px; height: 17px; }
.setting-tile [data-ui-icon]::before { width: 24px; height: 24px; }
.settings-logout [data-ui-icon] { display: inline-grid; vertical-align: middle; margin-right: 8px; }
.settings-logout [data-ui-icon]::before { width: 18px; height: 18px; }
.rotate-hint [data-ui-icon]::before { width: 42px; height: 42px; }
@media (pointer: coarse) {
  .icon-btn, .home-nav button, .mode-tab, .player-options button, .btn, .start-btn, .quick-match-btn, .close-btn { min-width: 42px; min-height: 42px; }
  .hand .card { touch-action: none; }
  .modal-backdrop { backdrop-filter: none; }
}
.confirm-leave { z-index: 800; }
.rotate-hint { z-index: 11000; }
.splash-screen:not(.dealing) .splash-brand-stage { animation: 2.2s ease-in-out 0s 1 normal both running splashBrandIntro; }
.splash-screen:not(.dealing) .splash-fan-stage { animation: 2.2s ease-in-out 0s 1 normal both running splashFanIntro; }
.splash-screen:not(.dealing) .splash-deal-stage { animation: auto ease 0s 1 normal none running none !important; opacity: 0 !important; }
.splash-screen.dealing .splash-stage { animation: auto ease 0s 1 normal none running none; opacity: 0; }
.splash-screen.dealing .splash-deal-stage { opacity: 1; animation: 1.05s ease 0s 1 normal both running dealOnly; }
.splash-screen.dealing .deal-table > b { animation: 0.72s cubic-bezier(0.2, 0.8, 0.3, 1) 0.12s 1 normal both running dealFlyV102; }
@keyframes splashBrandIntro { 
  0% { opacity: 0; transform: scale(0.97); }
  5%, 43% { opacity: 1; transform: none; }
  49%, 100% { opacity: 0; transform: scale(1.02); }
}
@keyframes splashFanIntro { 
  0%, 44% { opacity: 0; transform: translateY(12px); }
  52%, 96% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
@keyframes dealOnly { 
  0% { opacity: 0; transform: scale(0.985); }
  12%, 86% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scale(1.01); }
}
@keyframes dealFlyV102 { 
  0% { transform: translate(-50%, -50%) scale(0.9); }
  100% { transform: translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(.65); }
}
.player-dock.many-cards { left: 14%; right: 14%; bottom: 1.5%; height: 43%; }
.hand.many-cards { width: 100%; max-width: 100%; height: 100%; grid-template-columns: repeat(14,var(--many-step,42px)); grid-template-rows: repeat(2, 58px); place-content: end center; align-items: end; padding: 8px var(--hand-side,70px) 2px; overflow: visible; display: grid !important; }
.hand.many-cards .card { grid-row: auto; margin-left: 0px !important; }
.hand.many-cards .card:nth-child(n+15) { z-index: calc(var(--card-order,14) + 40); }
.hand.many-cards .card.selected, .hand.many-cards .card.selected:hover { box-shadow: rgb(255, 231, 137) 0px 0px 0px 3px, rgba(255, 212, 92, 0.467) 0px 0px 22px, rgba(0, 0, 0, 0.733) 0px 14px 24px, rgb(219, 216, 203) 0px 0px 0px 2px inset; }
@media (orientation: landscape) and (max-height: 700px) {
  .player-dock.many-cards, body.fullscreen-active .player-dock.many-cards { left: 13%; right: 13%; bottom: 1.5%; height: 45%; }
  .hand.many-cards, body.fullscreen-active .hand.many-cards { grid-template-columns: repeat(14,var(--many-step,30px)); grid-template-rows: repeat(2, 41px); padding: 5px var(--hand-side,62px) 5px; }
  .hand.many-cards .card.selected, .hand.many-cards .card.selected:hover { }
}
.seat-bottom, body.fullscreen-active .seat-bottom { pointer-events: none; position: fixed !important; display: flex !important; align-items: center !important; gap: 8px !important; left: 50% !important; right: auto !important; bottom: max(8px,env(safe-area-inset-bottom)) !important; z-index: 25 !important; transform: translateX(-50%) !important; }
.seat-bottom .seat-meta, body.fullscreen-active .seat-bottom .seat-meta { min-width: 74px !important; margin: 0px !important; justify-items: start !important; text-align: left !important; }
.seat-bottom .seat-meta strong, body.fullscreen-active .seat-bottom .seat-meta strong { max-width: 92px !important; }
.seat-bottom .seat-meta span, body.fullscreen-active .seat-bottom .seat-meta span { position: static !important; margin-top: 2px !important; }
.controls .btn { transform: translateY(8px); transition: opacity 0.16s, transform 0.16s, filter 0.1s; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.controls.turn-visible .btn { transform: none; transition-delay: 0s; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
.controls.swap-visible #playBtn { transform: none; transition-delay: 0s; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
.controls.swap-visible #passBtn { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.controls.turn-visible #passBtn { left: max(24px,env(safe-area-inset-left)) !important; right: auto !important; bottom: max(20px,env(safe-area-inset-bottom)) !important; width: 120px !important; height: 60px !important; margin: 0px !important; }
.controls.turn-visible #playBtn, .controls.swap-visible #playBtn { left: auto !important; right: max(24px,env(safe-area-inset-right)) !important; bottom: max(20px,env(safe-area-inset-bottom)) !important; width: 126px !important; height: 60px !important; }
@media (orientation: landscape) and (max-height: 700px) {
  .seat-bottom, body.fullscreen-active .seat-bottom { bottom: max(4px,env(safe-area-inset-bottom)) !important; z-index: 25 !important; }
  .seat-bottom .avatar, body.fullscreen-active .seat-bottom .avatar { width: 48px !important; height: 48px !important; flex-basis: 48px !important; border-width: 3px !important; }
  .seat-bottom .seat-meta, body.fullscreen-active .seat-bottom .seat-meta { min-width: 58px !important; }
  .seat-bottom .seat-meta strong, body.fullscreen-active .seat-bottom .seat-meta strong { max-width: 72px !important; font-size: 9px !important; }
  .seat-bottom .seat-meta span, body.fullscreen-active .seat-bottom .seat-meta span { font-size: 8px !important; }
  .player-dock:not(.many-cards), body.fullscreen-active .player-dock:not(.many-cards) { bottom: 6% !important; }
  .player-dock.many-cards, body.fullscreen-active .player-dock.many-cards { bottom: 18% !important; height: 45% !important; }
  .controls.turn-visible #passBtn { left: max(10px,env(safe-area-inset-left)) !important; bottom: max(10px,env(safe-area-inset-bottom)) !important; width: 88px !important; height: 50px !important; }
  .controls.turn-visible #playBtn, .controls.swap-visible #playBtn { right: max(10px,env(safe-area-inset-right)) !important; bottom: max(10px,env(safe-area-inset-bottom)) !important; width: 94px !important; height: 50px !important; }
}
@media (orientation: landscape) and (min-height: 701px) {
  .player-dock.many-cards, body.fullscreen-active .player-dock.many-cards { bottom: 12% !important; height: 43% !important; }
}
html, body, .app-shell { width: 100%; height: 100dvh; overflow: hidden; }
.app-shell { min-width: 0px; min-height: 0px; }
.topbar { position: relative !important; z-index: 100 !important; width: 100% !important; height: clamp(52px, 7vh, 68px) !important; min-height: 52px !important; flex: 0 0 clamp(52px, 7vh, 68px) !important; padding: 0px clamp(16px, 3vw, 54px) !important; transform: none !important; }
.brand { min-width: 145px; }
.round-pill { white-space: nowrap; position: absolute !important; left: 19% !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; }
.top-actions { position: absolute !important; right: clamp(16px, 3vw, 54px) !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.game-stage { position: relative !important; flex: 1 1 auto !important; min-width: 0px !important; min-height: 0px !important; overflow: hidden !important; transform: none !important; }
.table-wrap, body.fullscreen-active .table-wrap { position: absolute !important; inset: 8px clamp(34px, 4vw, 78px) 58px !important; padding: 0px !important; perspective: none !important; transform: none !important; }
.wood-rim, body.fullscreen-active .game-stage .wood-rim { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0px !important; padding: clamp(10px, 1.2vw, 17px) !important; transform: none !important; filter: none !important; }
.table-felt, body.fullscreen-active .game-stage .table-felt { width: 100% !important; height: 100% !important; transform: none !important; }
.seat-top, body.fullscreen-active .seat-top { inset: 1.5% auto auto 50% !important; transform: translateX(-50%) !important; }
.seat-left, body.fullscreen-active .seat-left { inset: 50% auto auto 1.2% !important; transform: translateY(-50%) !important; }
.seat-right, body.fullscreen-active .seat-right { inset: 50% 1.2% auto auto !important; transform: translateY(-50%) !important; }
.opponent-top { left: 50% !important; right: auto !important; top: 13% !important; transform: translateX(-50%) !important; }
.opponent-left { left: 8.5% !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; }
.opponent-right { left: auto !important; right: 8.5% !important; top: 50% !important; transform: translateY(-50%) !important; }
.center-play { inset: 24% 22% 31% !important; }
.player-dock, .player-dock:not(.many-cards), .player-dock.many-cards, body.fullscreen-active .player-dock, body.fullscreen-active .player-dock:not(.many-cards), body.fullscreen-active .player-dock.many-cards { position: absolute !important; left: 14% !important; right: 14% !important; bottom: clamp(76px, 11vh, 100px) !important; width: auto !important; height: clamp(150px, 25vh, 225px) !important; padding: 0px !important; z-index: 30 !important; background: transparent !important; box-shadow: none !important; transform: none !important; pointer-events: none !important; }
.player-dock.many-cards, body.fullscreen-active .player-dock.many-cards { height: clamp(185px, 31vh, 280px) !important; }
.hand-scroll, .hand, body.fullscreen-active .hand-scroll, body.fullscreen-active .hand { width: 100% !important; height: 100% !important; overflow: visible !important; }
.hand, body.fullscreen-active .hand { display: flex !important; align-items: flex-end !important; justify-content: center !important; padding: 0 var(--hand-side,70px) !important; transform: none !important; }
.hand.many-cards, body.fullscreen-active .hand.many-cards { display: grid !important; grid-template-columns: repeat(14,var(--many-step,42px)) !important; grid-template-rows: repeat(2, 58px) !important; place-content: end center !important; align-items: end !important; padding: 0 var(--hand-side,70px) !important; }
.seat-bottom, body.fullscreen-active .seat-bottom { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(8px,env(safe-area-inset-bottom)) !important; width: auto !important; min-width: 140px !important; height: 66px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; z-index: 120 !important; transform: translateX(-50%) !important; }
.seat-bottom .avatar, body.fullscreen-active .seat-bottom .avatar { width: 58px !important; height: 58px !important; flex: 0 0 58px !important; border-width: 4px !important; }
.seat-bottom .turn-timer, body.fullscreen-active .seat-bottom .turn-timer { left: 29px !important; top: 0px !important; width: 66px !important; height: 66px !important; }
.seat-bottom .seat-meta, body.fullscreen-active .seat-bottom .seat-meta { min-width: 72px !important; margin: 0px !important; justify-items: start !important; text-align: left !important; }
.seat-bottom .seat-meta strong, body.fullscreen-active .seat-bottom .seat-meta strong { max-width: 100px !important; font-size: 11px !important; }
.seat-bottom .seat-meta span, body.fullscreen-active .seat-bottom .seat-meta span { position: static !important; margin-top: 3px !important; font-size: 9px !important; }
.controls, body.fullscreen-active .controls { position: fixed !important; inset: 0px !important; z-index: 121 !important; width: 100% !important; height: 100% !important; margin: 0px !important; background: none !important; pointer-events: none !important; transform: none !important; }
.controls.turn-visible #passBtn { position: fixed !important; left: max(24px,env(safe-area-inset-left)) !important; right: auto !important; bottom: max(12px,env(safe-area-inset-bottom)) !important; width: 120px !important; height: 58px !important; margin: 0px !important; border-radius: 18px !important; }
.controls.turn-visible #playBtn, .controls.swap-visible #playBtn { position: fixed !important; left: auto !important; right: max(24px,env(safe-area-inset-right)) !important; bottom: max(12px,env(safe-area-inset-bottom)) !important; width: 126px !important; height: 58px !important; margin: 0px !important; border-radius: 18px !important; }
@media (orientation: landscape) and (max-height: 700px) {
  .topbar { height: 46px !important; min-height: 46px !important; flex-basis: 46px !important; padding: 0 max(10px,env(safe-area-inset-left)) !important; }
  .brand { min-width: 108px; }
  .brand strong { font-size: 14px !important; }
  .brand-mark { width: 30px !important; height: 34px !important; }
  .round-pill { left: 17% !important; height: 36px !important; padding: 5px 11px !important; font-size: 7px !important; }
  .top-actions { right: max(10px,env(safe-area-inset-right)) !important; gap: 5px !important; }
  .icon-btn { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; }
  .language-switch { height: 36px !important; }
  .table-wrap, body.fullscreen-active .table-wrap { inset: 4px clamp(24px, 6vw, 64px) 54px !important; }
  .wood-rim, body.fullscreen-active .game-stage .wood-rim { padding: 9px !important; border-radius: 24% / 17% !important; }
  .table-felt, body.fullscreen-active .game-stage .table-felt { border-radius: 24% / 17% !important; }
  .seat .avatar { width: 48px !important; height: 48px !important; flex-basis: 48px !important; border-width: 3px !important; }
  .turn-timer { width: 56px !important; height: 56px !important; }
  .seat-meta strong { font-size: 9px !important; }
  .seat-meta span { font-size: 8px !important; }
  .seat-left, body.fullscreen-active .seat-left { left: 0.8% !important; }
  .seat-right, body.fullscreen-active .seat-right { right: 0.8% !important; }
  .opponent-top { top: 12% !important; }
  .opponent-left { left: 8% !important; }
  .opponent-right { right: 8% !important; }
  .opponent-hand .card-back { width: 25px !important; height: 37px !important; margin-left: -14px !important; }
  .center-play { inset: 24% 23% 34% !important; }
  .pile { height: 94px !important; }
  .player-dock, .player-dock:not(.many-cards), .player-dock.many-cards, body.fullscreen-active .player-dock, body.fullscreen-active .player-dock:not(.many-cards), body.fullscreen-active .player-dock.many-cards { left: 13% !important; right: 13% !important; bottom: 68px !important; height: 138px !important; }
  .player-dock.many-cards, body.fullscreen-active .player-dock.many-cards { height: 166px !important; }
  .hand .card { width: 58px !important; height: 84px !important; flex-basis: 58px !important; margin-left: -20px !important; }
  .hand .card:first-child { margin-left: 0px !important; }
  .hand.many-cards, body.fullscreen-active .hand.many-cards { grid-template-columns: repeat(14,var(--many-step,30px)) !important; grid-template-rows: repeat(2, 41px) !important; padding: 0 var(--hand-side,62px) !important; }
  .hand.many-cards .card { margin-left: 0px !important; }
  .seat-bottom, body.fullscreen-active .seat-bottom { bottom: max(4px,env(safe-area-inset-bottom)) !important; min-width: 112px !important; height: 48px !important; gap: 7px !important; }
  .seat-bottom .avatar, body.fullscreen-active .seat-bottom .avatar { width: 44px !important; height: 44px !important; flex-basis: 44px !important; border-width: 3px !important; }
  .seat-bottom .turn-timer, body.fullscreen-active .seat-bottom .turn-timer { left: 22px !important; top: -3px !important; width: 50px !important; height: 50px !important; }
  .seat-bottom .seat-meta, body.fullscreen-active .seat-bottom .seat-meta { min-width: 54px !important; }
  .seat-bottom .seat-meta strong, body.fullscreen-active .seat-bottom .seat-meta strong { max-width: 68px !important; font-size: 8px !important; }
  .seat-bottom .seat-meta span, body.fullscreen-active .seat-bottom .seat-meta span { font-size: 7px !important; }
  .controls.turn-visible #passBtn { left: max(10px,env(safe-area-inset-left)) !important; bottom: max(5px,env(safe-area-inset-bottom)) !important; width: 88px !important; height: 46px !important; border-radius: 14px !important; font-size: 11px !important; }
  .controls.turn-visible #playBtn, .controls.swap-visible #playBtn { right: max(10px,env(safe-area-inset-right)) !important; bottom: max(5px,env(safe-area-inset-bottom)) !important; width: 94px !important; height: 46px !important; border-radius: 14px !important; font-size: 10px !important; }
}
@media (orientation: landscape) and (max-height: 390px) {
  .topbar { height: 42px !important; min-height: 42px !important; flex-basis: 42px !important; }
  .top-actions { gap: 3px !important; }
  .icon-btn { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; }
  .table-wrap, body.fullscreen-active .table-wrap { inset: 3px clamp(20px, 5vw, 48px) 50px !important; }
  .player-dock, .player-dock:not(.many-cards), .player-dock.many-cards, body.fullscreen-active .player-dock, body.fullscreen-active .player-dock:not(.many-cards), body.fullscreen-active .player-dock.many-cards { bottom: 60px !important; height: 128px !important; }
  .player-dock.many-cards, body.fullscreen-active .player-dock.many-cards { height: 150px !important; }
  .hand .card { width: 53px !important; height: 77px !important; flex-basis: 53px !important; }
  .hand.many-cards, body.fullscreen-active .hand.many-cards { grid-template-rows: repeat(2, 37px) !important; }
}
@media (orientation: landscape) and (max-width: 720px) {
  .brand { min-width: 42px !important; }
  .brand strong, .brand small { display: none !important; }
  .round-pill { left: 64px !important; }
}
.hand:not(.many-cards) .card, body.fullscreen-active .hand:not(.many-cards) .card { margin-left: var(--hand-overlap,-25px) !important; }
.hand:not(.many-cards) .card:first-child, body.fullscreen-active .hand:not(.many-cards) .card:first-child { margin-left: 0px !important; }
.topbar, body.fullscreen-active .topbar { position: relative !important; inset: auto !important; display: grid !important; grid-template-columns: auto auto minmax(0px, 1fr) !important; align-items: center !important; column-gap: clamp(10px, 2vw, 28px) !important; width: 100% !important; height: clamp(52px, 7vh, 68px) !important; min-height: 52px !important; flex: 0 0 clamp(52px, 7vh, 68px) !important; padding: 0px clamp(16px, 3vw, 54px) !important; overflow: visible !important; border-bottom: 1px solid rgba(110, 82, 45, 0.333) !important; background: rgb(16, 11, 7) !important; box-shadow: none !important; pointer-events: auto !important; transform: none !important; }
.brand, body.fullscreen-active .brand { position: static !important; inset: auto !important; display: flex !important; align-items: center !important; gap: 10px !important; width: auto !important; min-width: 0px !important; height: auto !important; padding: 0px !important; border: 0px !important; border-radius: 0px !important; background: transparent !important; box-shadow: none !important; pointer-events: auto !important; }
.brand > span:last-child, body.fullscreen-active .brand > span:last-child { display: block !important; }
.brand-mark, body.fullscreen-active .brand-mark { width: 34px !important; height: 38px !important; flex: 0 0 34px !important; border: 0px !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important; clip-path: none !important; }
.brand-mark img, body.fullscreen-active .brand-mark img { width: 100% !important; height: 100% !important; display: block !important; border-radius: 9px !important; }
.brand strong, body.fullscreen-active .brand strong { font-size: 18px !important; line-height: 1 !important; letter-spacing: 0.16em !important; }
.round-pill, body.fullscreen-active .round-pill { position: static !important; inset: auto !important; justify-self: start !important; min-width: 104px !important; height: 38px !important; padding: 5px 13px !important; transform: none !important; border: 1px solid rgb(139, 105, 53) !important; border-radius: 999px !important; background: rgb(23, 17, 12) !important; box-shadow: none !important; backdrop-filter: none !important; pointer-events: auto !important; }
.top-actions, body.fullscreen-active .top-actions { position: static !important; inset: auto !important; z-index: auto !important; justify-self: end !important; display: flex !important; align-items: center !important; gap: 7px !important; transform: none !important; pointer-events: auto !important; }
.top-actions .icon-btn, body.fullscreen-active .top-actions .icon-btn { place-items: center; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; margin: 0px !important; border-width: 1px !important; background: rgb(27, 21, 17) !important; box-shadow: none !important; backdrop-filter: none !important; }
.leave-game, body.fullscreen-active .leave-game { border-color: rgb(139, 65, 57) !important; background: rgb(53, 21, 18) !important; }
.seat, body.fullscreen-active .seat { min-width: 0px !important; max-width: 92px !important; min-height: 0px !important; display: grid !important; grid-template-columns: 1fr !important; justify-items: center !important; gap: 3px !important; padding: 0px !important; border: 0px !important; border-radius: 0px !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; text-align: center !important; overflow: visible !important; }
.seat .avatar, body.fullscreen-active .seat .avatar { width: 58px !important; height: 58px !important; flex: 0 0 58px !important; border: 4px solid rgb(161, 123, 57) !important; font-size: 0px !important; box-shadow: rgb(22, 17, 13) 0px 0px 0px 3px, rgba(0, 0, 0, 0.6) 0px 7px 15px !important; }
.seat.active .avatar, body.fullscreen-active .seat.active .avatar { border-color: rgb(87, 233, 157) !important; box-shadow: rgb(23, 70, 48) 0px 0px 0px 3px, rgba(66, 223, 140, 0.533) 0px 0px 18px !important; }
.seat-meta, body.fullscreen-active .seat-meta { order: 0 !important; position: static !important; display: grid !important; justify-items: center !important; min-width: 0px !important; width: auto !important; margin: 0px !important; text-align: center !important; text-shadow: none !important; }
.seat-meta strong, body.fullscreen-active .seat-meta strong { display: block !important; max-width: 82px !important; padding: 2px 9px !important; overflow: hidden !important; border-radius: 999px !important; background: rgb(26, 18, 14) !important; color: rgb(255, 240, 208) !important; font: 800 10px "Playfair Display", serif !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.seat-meta span, body.fullscreen-active .seat-meta span { position: static !important; inset: auto !important; margin-top: 1px !important; color: rgb(242, 206, 102) !important; font-size: 8px !important; font-weight: 900 !important; }
.seat:not(.seat-bottom) .turn-timer, body.fullscreen-active .seat:not(.seat-bottom) .turn-timer { inset: -4px auto auto 50% !important; width: 66px !important; height: 66px !important; transform: translateX(-50%) !important; }
.seat-bottom, body.fullscreen-active .seat-bottom { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: max(8px,env(safe-area-inset-bottom)) !important; width: auto !important; min-width: 136px !important; max-width: none !important; height: 58px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 4px 11px 4px 4px !important; border: 1px solid rgba(139, 105, 53, 0.667) !important; border-radius: 999px !important; background: rgba(16, 11, 7, 0.91) !important; box-shadow: rgba(0, 0, 0, 0.6) 0px 8px 22px !important; z-index: 130 !important; transform: translateX(-50%) !important; }
.seat-bottom .avatar, body.fullscreen-active .seat-bottom .avatar { width: 48px !important; height: 48px !important; flex: 0 0 48px !important; border-width: 3px !important; }
.seat-bottom .seat-meta, body.fullscreen-active .seat-bottom .seat-meta { min-width: 62px !important; justify-items: start !important; text-align: left !important; }
.seat-bottom .seat-meta strong, body.fullscreen-active .seat-bottom .seat-meta strong { max-width: 72px !important; font-size: 9px !important; }
.seat-bottom .seat-meta span, body.fullscreen-active .seat-bottom .seat-meta span { font-size: 8px !important; }
.seat-bottom .turn-timer, body.fullscreen-active .seat-bottom .turn-timer { inset: -1px auto auto 28px !important; width: 56px !important; height: 56px !important; transform: translateX(-50%) !important; }
@media (orientation: landscape) and (max-height: 700px) {
  .topbar, body.fullscreen-active .topbar { height: 46px !important; min-height: 46px !important; flex-basis: 46px !important; grid-template-columns: auto auto minmax(0px, 1fr) !important; column-gap: 9px !important; padding: 0 max(10px,env(safe-area-inset-left)) !important; }
  .brand, body.fullscreen-active .brand { gap: 7px !important; }
  .brand-mark, body.fullscreen-active .brand-mark { width: 28px !important; height: 32px !important; flex-basis: 28px !important; }
  .brand strong, body.fullscreen-active .brand strong { font-size: 13px !important; }
  .round-pill, body.fullscreen-active .round-pill { min-width: 88px !important; height: 34px !important; padding: 4px 10px !important; }
  .round-pill span { font-size: 6px !important; }
  .round-pill strong { font-size: 14px !important; }
  .language-switch { display: none !important; }
  .top-actions, body.fullscreen-active .top-actions { gap: 5px !important; }
  .top-actions > * { display: none !important; }
  .top-actions #fullscreenBtn, .top-actions #soundBtn, .top-actions #leaveGameBtn, body.fullscreen-active .top-actions #fullscreenBtn, body.fullscreen-active .top-actions #soundBtn, body.fullscreen-active .top-actions #leaveGameBtn { display: inline-grid !important; }
  .top-actions .icon-btn, body.fullscreen-active .top-actions .icon-btn { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; }
  body.installed-app .top-actions #fullscreenBtn { display: none !important; }
  .seat, body.fullscreen-active .seat { max-width: 74px !important; gap: 2px !important; }
  .seat .avatar, body.fullscreen-active .seat .avatar { width: 46px !important; height: 46px !important; flex-basis: 46px !important; border-width: 3px !important; }
  .seat-meta strong, body.fullscreen-active .seat-meta strong { max-width: 68px !important; padding: 1px 7px !important; font-size: 8px !important; }
  .seat-meta span, body.fullscreen-active .seat-meta span { font-size: 7px !important; }
  .seat:not(.seat-bottom) .turn-timer, body.fullscreen-active .seat:not(.seat-bottom) .turn-timer { inset: -3px auto auto 50% !important; width: 52px !important; height: 52px !important; }
  .seat-bottom, body.fullscreen-active .seat-bottom { bottom: max(6px,env(safe-area-inset-bottom)) !important; min-width: 116px !important; height: 48px !important; gap: 6px !important; padding: 3px 9px 3px 3px !important; }
  .seat-bottom .avatar, body.fullscreen-active .seat-bottom .avatar { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
  .seat-bottom .seat-meta, body.fullscreen-active .seat-bottom .seat-meta { min-width: 54px !important; }
  .seat-bottom .seat-meta strong, body.fullscreen-active .seat-bottom .seat-meta strong { max-width: 62px !important; font-size: 8px !important; }
  .seat-bottom .seat-meta span, body.fullscreen-active .seat-bottom .seat-meta span { font-size: 7px !important; }
  .seat-bottom .turn-timer, body.fullscreen-active .seat-bottom .turn-timer { inset: -1px auto auto 24px !important; width: 48px !important; height: 48px !important; }
  .hand .card, body.fullscreen-active .hand .card { width: 54px !important; height: 78px !important; flex-basis: 54px !important; }
  .hand.many-cards, body.fullscreen-active .hand.many-cards { grid-template-rows: repeat(2, 38px) !important; }
  .pile .card, body.fullscreen-active .pile .card { width: 56px !important; height: 80px !important; flex-basis: 56px !important; }
  .pile .card .corner { font-size: 13px !important; }
  .pile .card .corner small { font-size: 11px !important; }
  .pile .card .suit-big { font-size: 26px !important; }
  .controls.turn-visible #passBtn { bottom: max(7px,env(safe-area-inset-bottom)) !important; }
  .controls.turn-visible #playBtn, .controls.swap-visible #playBtn { bottom: max(7px,env(safe-area-inset-bottom)) !important; }
}
@media (orientation: landscape) and (max-width: 720px) {
  .brand > span:last-child, body.fullscreen-active .brand > span:last-child { display: none !important; }
  .topbar, body.fullscreen-active .topbar { grid-template-columns: 32px 88px minmax(0px, 1fr) !important; column-gap: 6px !important; }
  .top-actions, body.fullscreen-active .top-actions { gap: 4px !important; }
  .top-actions .icon-btn, body.fullscreen-active .top-actions .icon-btn { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; }
}
@media (orientation: landscape) and (max-height: 700px) {
  .table-wrap, body.fullscreen-active .table-wrap { top: 4px !important; right: max(6px,env(safe-area-inset-right)) !important; bottom: 54px !important; left: max(6px,env(safe-area-inset-left)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .splash-screen:not(.dealing) .splash-brand-stage { display: grid !important; opacity: 1 !important; }
  .splash-screen:not(.dealing) .splash-deal-stage { display: none !important; }
}
#settingsModal { padding: max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)) !important; background: rgb(16, 4, 5) !important; backdrop-filter: none !important; }
#settingsModal .settings-v1052 { color: rgb(255, 240, 212); width: 100% !important; height: 100% !important; max-height: none !important; padding: clamp(25px, 4vw, 50px) clamp(34px, 7vw, 94px) !important; overflow: hidden !important; border: 4px solid rgb(40, 44, 46) !important; border-radius: clamp(34px, 6vw, 72px) !important; background: radial-gradient(circle at 50% 0px, rgb(69, 21, 26), rgb(37, 9, 12) 52%, rgb(18, 4, 6) 100%) !important; box-shadow: rgb(2, 3, 3) 0px 0px 0px 7px, rgba(0, 0, 0, 0.867) 0px 28px 80px, rgba(0, 0, 0, 0.467) 0px 0px 75px inset !important; text-align: left !important; }
#settingsModal .settings-v1052::before { content: ""; position: absolute; inset: 0px; pointer-events: none; background: repeating-linear-gradient(55deg, transparent 0px, transparent 4px, rgb(255, 255, 255) 5px, rgb(255, 255, 255) 6px); opacity: 0.014; }
.screen-title { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; }
.screen-title h2 { margin: 0px !important; color: rgb(255, 243, 216) !important; font: 800 clamp(27px, 3.1vw, 42px) "Playfair Display", serif !important; }
.screen-back { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgb(103, 69, 62); border-radius: 50%; background: rgb(43, 25, 25); color: rgb(245, 210, 124); cursor: pointer; }
.screen-back::before { width: 20px !important; height: 20px !important; }
.settings-v1052 { display: grid !important; grid-template-rows: auto minmax(0px, 1fr) auto !important; }
.settings-v1052 .screen-title { margin-bottom: 14px; }
.settings-v1052-grid { position: relative; z-index: 1; min-height: 0px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 14px 20px; }
.settings-column h3, .language-settings h3 { margin: 0px 0px 8px 4px; color: rgb(194, 166, 110); font-size: 9px; letter-spacing: 0.25em; }
.settings-list { overflow: hidden; border: 1px solid rgb(101, 65, 48); border-radius: 20px; background: rgb(50, 23, 25); }
.settings-row { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 20px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(85, 48, 43); border-image: none; background: transparent; color: rgb(255, 240, 216); text-align: left; cursor: pointer; }
.settings-row:last-child { border-bottom: 0px; }
.settings-row > span { display: flex; flex-direction: column; }
.settings-row b { font-size: 12px; }
.settings-row span small { margin-top: 2px; color: rgb(185, 164, 116); font-size: 8px; }
.switch { width: 48px; height: 28px; flex: 0 0 48px; padding: 3px; border-radius: 999px; background: rgb(101, 75, 77); transition: 0.2s; }
.switch em { display: block; width: 22px; height: 22px; border-radius: 50%; background: rgb(248, 241, 223); transition: 0.2s; }
.settings-row.active .switch { background: rgb(69, 212, 137); }
.settings-row.active .switch em { transform: translateX(20px); }
.mini-segment { height: 39px; display: flex; padding: 3px; border-radius: 999px; background: rgb(33, 16, 18); }
.mini-segment button { min-width: 66px; padding: 0px 13px; border: 0px; border-radius: 999px; background: transparent; color: rgb(189, 166, 118); font-size: 9px; font-weight: 800; }
.mini-segment button.active { background: linear-gradient(rgb(245, 215, 127), rgb(199, 139, 43)); color: rgb(43, 22, 8); }
.language-settings { grid-column: 1; width: 100%; }
.language-segment { height: 54px; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border: 1px solid rgb(101, 65, 48); border-radius: 16px; background: rgb(50, 23, 25); }
.language-segment button { border: 0px; border-radius: 12px; background: transparent; color: rgb(207, 184, 135); font-size: 11px; font-weight: 800; }
.language-segment button.active { background: linear-gradient(rgb(248, 221, 141), rgb(204, 145, 47)); color: rgb(43, 22, 8); }
.settings-footer { position: relative; z-index: 1; display: flex; justify-content: flex-end; gap: 12px; margin-top: 13px; }
.settings-footer button { width: min(240px, 23vw); height: 50px; border: 1px solid rgb(94, 64, 58); border-radius: 15px; background: rgb(41, 23, 25); color: rgb(221, 196, 141); font-size: 10px; font-weight: 800; margin: 0px !important; }
.settings-footer .settings-logout { border-color: rgb(161, 75, 67); background: rgb(37, 13, 14); color: rgb(255, 129, 120); }
@media (orientation: landscape) and (max-height: 650px) {
  #settingsModal { padding: 8px !important; }
  #settingsModal .settings-v1052 { padding: 18px max(28px, 7vw) !important; border-width: 3px !important; border-radius: clamp(28px, 5vw, 58px) !important; }
  .screen-title { gap: 12px; }
  .screen-title h2 { font-size: 28px !important; }
  .screen-back { width: 42px; height: 42px; }
  .settings-v1052 .screen-title { margin-bottom: 9px; }
  .settings-v1052-grid { gap: 10px 16px; }
  .settings-column h3, .language-settings h3 { margin-bottom: 5px; font-size: 7px; }
  .settings-list { border-radius: 15px; }
  .settings-row { min-height: 51px; padding: 6px 15px; }
  .settings-row b { font-size: 10px; }
  .settings-row span small { font-size: 7px; }
  .switch { width: 42px; height: 24px; flex-basis: 42px; }
  .switch em { width: 18px; height: 18px; }
  .settings-row.active .switch em { transform: translateX(18px); }
  .mini-segment { height: 34px; }
  .mini-segment button { min-width: 55px; font-size: 8px; }
  .language-segment { height: 43px; border-radius: 13px; }
  .settings-footer { margin-top: 9px; }
  .settings-footer button { height: 42px; }
}
@media (orientation: landscape) and (max-height: 430px) {
  #settingsModal .settings-v1052 { padding: 11px 22px !important; }
  .screen-title h2 { font-size: 22px !important; }
  .screen-back { width: 34px; height: 34px; }
  .settings-v1052 .screen-title { margin-bottom: 6px; }
  .settings-v1052-grid { gap: 7px 12px; }
  .settings-row { min-height: 43px; padding: 4px 11px; }
  .settings-row b { font-size: 9px; }
  .switch { transform: scale(0.82); }
  .language-segment { height: 35px; }
  .settings-footer { margin-top: 6px; }
  .settings-footer button { height: 34px; }
}
#gameStage { position: absolute !important; inset: 64px 0px 0px !important; width: auto !important; height: auto !important; flex: 0 0 auto !important; background: radial-gradient(at 50% 45%, rgb(40, 23, 15), rgb(13, 9, 7) 72%) !important; }
#gameStage .table-wrap { inset: 10px clamp(16px, 6vw, 92px) 14px !important; }
#gameStage .wood-rim { padding: clamp(10px, 1.5vw, 18px) !important; border-radius: 50% / 23% !important; }
#gameStage .table-felt { border-radius: 50% / 23% !important; background: radial-gradient(at 50% 42%, rgb(33, 109, 135), rgb(23, 79, 104) 46%, rgb(16, 57, 79) 76%, rgb(9, 37, 54)) !important; }
#gameStage .seat-top { top: -5px !important; }
#gameStage .seat-left { left: -13px !important; }
#gameStage .seat-right { right: -13px !important; }
#gameStage .seat-bottom { position: absolute !important; left: 50% !important; bottom: -5px !important; min-width: 0px !important; width: auto !important; height: auto !important; display: flex !important; flex-direction: column !important; gap: 2px !important; padding: 0px !important; border: 0px !important; border-radius: 0px !important; background: transparent !important; box-shadow: none !important; z-index: 11 !important; transform: translateX(-50%) !important; }
#gameStage .seat-bottom .avatar { width: 58px !important; height: 58px !important; flex-basis: 58px !important; }
#gameStage .seat-bottom .seat-meta { min-width: 72px !important; justify-items: center !important; text-align: center !important; }
#gameStage .seat-bottom .turn-timer { inset: -4px auto auto 50% !important; width: 66px !important; height: 66px !important; transform: translateX(-50%) !important; }
#gameStage .opponent-top { top: 56px !important; }
#gameStage .opponent-left { left: 56px !important; transform: translateY(-50%) rotate(90deg) !important; }
#gameStage .opponent-right { right: 56px !important; transform: translateY(-50%) rotate(-90deg) !important; }
#gameStage .center-play { inset: 26% 28% 28% !important; }
#gameStage .player-dock, #gameStage .player-dock.many-cards { left: 18% !important; right: 18% !important; bottom: -10px !important; height: 38% !important; z-index: 16 !important; }
#gameStage .hand, #gameStage .hand.many-cards { width: 100% !important; height: 100% !important; display: flex !important; grid-template-columns: none !important; grid-template-rows: none !important; align-items: flex-start !important; justify-content: center !important; padding: 18px 0px 0px !important; }
#gameStage .hand .card, #gameStage .hand.many-cards .card { width: clamp(62px, 7vw, 92px) !important; height: clamp(90px, 10.2vw, 134px) !important; flex-basis: clamp(62px, 7vw, 92px) !important; margin-left: var(--hand-overlap,-30px) !important; }
#gameStage .hand .card:first-child { margin-left: 0px !important; }
.controls:not(.turn-visible):not(.swap-visible) .btn { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.opponent-hand .card-back:nth-child(1) { transform: translateY(9px) rotate(-12deg); }
.opponent-hand .card-back:nth-child(2) { transform: translateY(7px) rotate(-10deg); }
.opponent-hand .card-back:nth-child(3) { transform: translateY(5px) rotate(-8deg); }
.opponent-hand .card-back:nth-child(4) { transform: translateY(3px) rotate(-6deg); }
.opponent-hand .card-back:nth-child(5) { transform: translateY(2px) rotate(-4deg); }
.opponent-hand .card-back:nth-child(6) { transform: translateY(1px) rotate(-2deg); }
.opponent-hand .card-back:nth-child(7) { transform: rotate(-1deg); }
.opponent-hand .card-back:nth-child(8) { transform: rotate(1deg); }
.opponent-hand .card-back:nth-child(9) { transform: translateY(1px) rotate(2deg); }
.opponent-hand .card-back:nth-child(10) { transform: translateY(2px) rotate(4deg); }
.opponent-hand .card-back:nth-child(11) { transform: translateY(3px) rotate(6deg); }
.opponent-hand .card-back:nth-child(12) { transform: translateY(5px) rotate(8deg); }
.opponent-hand .card-back:nth-child(13) { transform: translateY(7px) rotate(10deg); }
.opponent-hand .card-back:nth-child(n+14) { transform: translateY(9px) rotate(12deg); }
@media (orientation: landscape) and (max-height: 650px) {
  #gameStage { inset: 52px 0px 0px !important; }
  #gameStage .table-wrap { inset: 5px max(10px, 4vw) 7px !important; }
  #gameStage .seat-top { top: -4px !important; }
  #gameStage .seat-left { left: -9px !important; }
  #gameStage .seat-right { right: -9px !important; }
  #gameStage .seat-bottom { bottom: -4px !important; }
  #gameStage .seat-bottom .avatar { width: 48px !important; height: 48px !important; flex-basis: 48px !important; }
  #gameStage .seat-bottom .turn-timer { width: 56px !important; height: 56px !important; }
  #gameStage .opponent-top { top: 46px !important; }
  #gameStage .opponent-left { left: 43px !important; }
  #gameStage .opponent-right { right: 43px !important; }
  #gameStage .player-dock, #gameStage .player-dock.many-cards { left: 20% !important; right: 20% !important; bottom: -10px !important; height: 39% !important; }
  #gameStage .hand, #gameStage .hand.many-cards { padding-top: 11px !important; }
  #gameStage .hand .card, #gameStage .hand.many-cards .card { width: clamp(54px, 6vw, 68px) !important; height: clamp(78px, 8.7vw, 99px) !important; flex-basis: clamp(54px, 6vw, 68px) !important; }
  #gameStage .center-play { inset: 23% 25% 27% !important; }
}
@media (orientation: landscape) and (max-height: 430px) {
  #gameStage { inset: 44px 0px 0px !important; }
  #gameStage .table-wrap { inset: 3px max(8px, 3.5vw) 4px !important; }
  #gameStage .seat .avatar, #gameStage .seat-bottom .avatar { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
  #gameStage .seat-bottom .turn-timer { width: 49px !important; height: 49px !important; }
  #gameStage .opponent-top { top: 39px !important; }
  #gameStage .opponent-left { left: 37px !important; }
  #gameStage .opponent-right { right: 37px !important; }
  #gameStage .player-dock, #gameStage .player-dock.many-cards { left: 21% !important; right: 21% !important; height: 40% !important; }
  #gameStage .hand .card, #gameStage .hand.many-cards .card { width: 54px !important; height: 78px !important; flex-basis: 54px !important; }
  #gameStage .center-play { inset: 22% 25% 26% !important; }
}
#gameStage .reaction-bar, #gameStage .reaction-stage { display: none !important; }
#gameStage .player-dock, #gameStage .player-dock.many-cards { left: 15% !important; right: 15% !important; }
#gameStage .hand .card, #gameStage .hand.many-cards .card { position: relative !important; width: clamp(68px, 7.4vw, 96px) !important; height: clamp(100px, 10.8vw, 140px) !important; flex-basis: clamp(68px, 7.4vw, 96px) !important; margin-left: var(--hand-overlap,-34px) !important; transform-origin: 50% 155% !important; }
#gameStage .hand .card:hover { z-index: 90 !important; }
#gameStage .hand .card.selected, #gameStage .hand .card.selected:hover, #gameStage .hand.many-cards .card.selected, #gameStage .hand.many-cards .card.selected:hover { z-index: 120 !important; margin-right: 0px !important; box-shadow: rgb(247, 212, 102) 0px 0px 0px 3px, rgba(244, 207, 109, 0.62) 0px 0px 28px, rgba(0, 0, 0, 0.933) 0px 18px 30px !important; }
@media (orientation: landscape) and (max-height: 650px) {
  #gameStage .player-dock, #gameStage .player-dock.many-cards { left: 16% !important; right: 16% !important; }
  #gameStage .hand .card, #gameStage .hand.many-cards .card { width: clamp(60px, 6.7vw, 82px) !important; height: clamp(88px, 9.6vw, 118px) !important; flex-basis: clamp(60px, 6.7vw, 82px) !important; }
  #gameStage .hand .card.selected, #gameStage .hand .card.selected:hover, #gameStage .hand.many-cards .card.selected, #gameStage .hand.many-cards .card.selected:hover { }
}
@media (orientation: landscape) and (max-height: 430px) {
  #gameStage .player-dock, #gameStage .player-dock.many-cards { left: 15% !important; right: 15% !important; }
  #gameStage .hand .card, #gameStage .hand.many-cards .card { width: 58px !important; height: 84px !important; flex-basis: 58px !important; }
  #gameStage .hand .card.selected, #gameStage .hand .card.selected:hover, #gameStage .hand.many-cards .card.selected, #gameStage .hand.many-cards .card.selected:hover { }
}
#gameStage .player-dock, #gameStage .player-dock.many-cards { bottom: -34px !important; }
#gameStage .hand .card, #gameStage .hand.many-cards .card { width: clamp(74px, 7.9vw, 104px) !important; height: clamp(108px, 11.6vw, 152px) !important; flex-basis: clamp(74px, 7.9vw, 104px) !important; z-index: var(--card-order,0) !important; }
#gameStage .hand .card:hover { z-index: var(--card-order,0) !important; }
#gameStage .hand .card.selected, #gameStage .hand .card.selected:hover, #gameStage .hand.many-cards .card.selected, #gameStage .hand.many-cards .card.selected:hover { z-index: var(--card-order,0) !important; margin-right: 0px !important; box-shadow: rgb(247, 212, 102) 0px 0px 0px 3px, rgba(244, 207, 109, 0.5) 0px 0px 23px, rgba(0, 0, 0, 0.867) 0px 16px 26px !important; }
@media (orientation: landscape) and (max-height: 650px) {
  #gameStage .player-dock, #gameStage .player-dock.many-cards { bottom: -30px !important; }
  #gameStage .hand .card, #gameStage .hand.many-cards .card { width: clamp(64px, 7.15vw, 88px) !important; height: clamp(93px, 10.25vw, 126px) !important; flex-basis: clamp(64px, 7.15vw, 88px) !important; }
  #gameStage .hand .card.selected, #gameStage .hand .card.selected:hover, #gameStage .hand.many-cards .card.selected, #gameStage .hand.many-cards .card.selected:hover { }
}
@media (orientation: landscape) and (max-height: 430px) {
  #gameStage .player-dock, #gameStage .player-dock.many-cards { bottom: -28px !important; }
  #gameStage .hand .card, #gameStage .hand.many-cards .card { width: 62px !important; height: 90px !important; flex-basis: 62px !important; }
  #gameStage .hand .card.selected, #gameStage .hand .card.selected:hover, #gameStage .hand.many-cards .card.selected, #gameStage .hand.many-cards .card.selected:hover { }
}
[hidden] { display: none !important; }
.match-friends-shortcut { height: 42px; padding: 0px 18px; border: 1px solid rgb(181, 138, 61); border-radius: 999px; background: rgb(50, 19, 21); color: rgb(240, 204, 112); font-weight: 900; letter-spacing: 0.1em; }
.match-friends-shortcut::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; background: var(--ui-icon) center/contain no-repeat; vertical-align: middle; filter: invert(88%) sepia(50%) saturate(500%); }
.room-code-line { display: flex; align-items: center; gap: 8px; }
.room-code-line .room-code { flex: 1 1 0%; }
.room-code-line > button:last-child { height: 38px; border: 1px solid rgb(161, 125, 59); border-radius: 10px; background: rgb(39, 18, 20); color: rgb(232, 197, 108); }
.top-actions { position: relative; }
.language-switch { cursor: pointer; }
.language-switch b, .language-switch i { opacity: 0.55; }
.language-switch b.active, .language-switch i.active { opacity: 1; }
.quick-popover, .game-menu-popover { position: fixed; z-index: 700; top: 64px; right: 84px; padding: 8px; border: 1px solid rgb(133, 102, 56); border-radius: 16px; background: rgb(23, 12, 12); box-shadow: rgba(0, 0, 0, 0.8) 0px 16px 35px; }
.quick-popover { display: flex; gap: 6px; }
.quick-popover button { width: 42px; height: 42px; border: 0px; border-radius: 12px; background: rgb(52, 32, 26); font-size: 20px; }
.quick-chat-picker { right: 44px; }
.quick-chat-picker button { width: auto; min-width: 68px; color: rgb(240, 207, 119); font-size: 11px; font-weight: 900; }
.game-menu-popover { right: 18px; width: 190px; display: grid; gap: 5px; }
.game-menu-popover button { height: 39px; padding: 0px 12px; border: 0px; border-radius: 10px; background: rgb(43, 23, 21); color: rgb(234, 210, 160); text-align: left; font-weight: 800; }
.game-menu-popover button::before { content: ""; display: inline-block; width: 17px; height: 17px; margin-right: 9px; background: var(--ui-icon) center/contain no-repeat; vertical-align: middle; filter: invert(89%) sepia(25%) saturate(700%); }
.game-menu-popover .danger { color: rgb(255, 146, 135); }
.game-emoji, .game-chat, .game-menu { color: rgb(239, 212, 127) !important; font-size: 18px !important; }
#gameStage { inset: 72px 0px 0px !important; background: rgb(16, 11, 7) !important; }
#gameStage .table-wrap { inset: 6px 5.6% 8px !important; }
#gameStage .wood-rim { padding: 15px !important; border-radius: 30% / 24% !important; }
#gameStage .table-felt { border-radius: 30% / 24% !important; background: radial-gradient(at 50% 44%, rgb(35, 96, 124), rgb(18, 63, 87) 58%, rgb(8, 40, 58) 100%) !important; }
#gameStage .seat-bottom { left: 1.8% !important; bottom: 1.5% !important; transform: none !important; }
#gameStage .seat-bottom .avatar { width: 58px !important; height: 58px !important; flex-basis: 58px !important; }
#gameStage .seat-bottom .seat-meta { justify-items: start !important; text-align: left !important; }
#gameStage .seat-bottom .turn-timer { left: 50% !important; }
#gameStage .player-dock, #gameStage .player-dock.many-cards { left: 19% !important; right: 19% !important; bottom: -42px !important; height: 41% !important; }
#gameStage .center-play { inset: 28% 31% 29% !important; }
.controls .pass { right: 5% !important; bottom: 5% !important; }
.controls .play { right: 5% !important; bottom: 15% !important; }
@media (orientation: landscape) and (max-height: 650px) {
  .topbar { height: 54px !important; padding: 0px max(18px, 5vw) !important; }
  .brand strong { font-size: 16px; }
  .brand small { display: none; }
  .brand-mark { width: 29px; height: 34px; }
  .round-pill { display: none; }
  .top-actions { gap: 7px; }
  .icon-btn { width: 37px; height: 37px; }
  .language-switch { height: 37px; }
  #gameStage { inset: 54px 0px 0px !important; }
  #gameStage .table-wrap { inset: 3px 5.8% 5px !important; }
  #gameStage .wood-rim { padding: 10px !important; }
  #gameStage .seat-top { top: -7px !important; }
  #gameStage .seat-left { left: -10px !important; }
  #gameStage .seat-right { right: -10px !important; }
  #gameStage .seat-bottom { left: -1px !important; bottom: -3px !important; }
  #gameStage .seat-bottom .avatar { width: 48px !important; height: 48px !important; flex-basis: 48px !important; }
  #gameStage .seat-bottom .turn-timer { width: 56px !important; height: 56px !important; }
  #gameStage .opponent-top { top: 46px !important; }
  #gameStage .opponent-left { left: 43px !important; }
  #gameStage .opponent-right { right: 43px !important; }
  #gameStage .player-dock, #gameStage .player-dock.many-cards { left: 18% !important; right: 18% !important; bottom: -32px !important; height: 42% !important; }
  #gameStage .hand, #gameStage .hand.many-cards { padding-top: 8px !important; }
  #gameStage .center-play { inset: 25% 29% 27% !important; }
  .controls .btn { width: 96px !important; height: 44px !important; }
  .controls .play { bottom: 15% !important; }
  .controls .pass { bottom: 4% !important; }
  .match-friends-shortcut { height: 34px; }
}
@media (orientation: landscape) and (max-height: 430px) {
  .topbar { height: 46px !important; }
  .top-actions .icon-btn { width: 33px; height: 33px; }
  .language-switch { height: 33px; }
  .brand-mark { width: 25px; height: 29px; }
  #gameStage { inset: 46px 0px 0px !important; }
  #gameStage .table-wrap { inset: 2px 5.5% 3px !important; }
  #gameStage .wood-rim { padding: 8px !important; }
  #gameStage .seat .avatar, #gameStage .seat-bottom .avatar { width: 40px !important; height: 40px !important; flex-basis: 40px !important; }
  #gameStage .opponent-top { top: 37px !important; }
  #gameStage .opponent-left { left: 35px !important; }
  #gameStage .opponent-right { right: 35px !important; }
  #gameStage .player-dock, #gameStage .player-dock.many-cards { left: 17% !important; right: 17% !important; bottom: -29px !important; height: 43% !important; }
  #gameStage .hand .card, #gameStage .hand.many-cards .card { width: 58px !important; height: 84px !important; flex-basis: 58px !important; }
  #gameStage .center-play { inset: 24% 29% 25% !important; }
  .controls .btn { width: 82px !important; height: 36px !important; }
  .quick-popover, .game-menu-popover { top: 48px; }
}
#gameStage .card.joker:not(.red), #swapModal .card.joker:not(.red) { background: linear-gradient(145deg, rgb(17, 23, 20), rgb(40, 51, 46)) !important; color: rgb(245, 207, 112) !important; border-color: rgb(200, 153, 61) !important; }
#gameStage .card.joker.red, #swapModal .card.joker.red { background: linear-gradient(145deg, rgb(61, 21, 26), rgb(125, 41, 51)) !important; color: rgb(255, 224, 160) !important; border-color: rgb(209, 155, 71) !important; }
.topbar { position: absolute !important; inset: 0px 0px auto !important; height: clamp(50px, 8vh, 76px) !important; min-height: 0px !important; background: linear-gradient(rgba(25, 5, 3, 0.85), transparent) !important; border: 0px !important; pointer-events: none !important; }
.topbar .brand, .topbar .top-actions { pointer-events: auto !important; }
.topbar .round-pill { display: none !important; }
.topbar .brand strong { color: rgb(246, 221, 154) !important; }
.topbar .brand small { display: none !important; }
.topbar .language-switch, .topbar .icon-btn { border-color: rgb(185, 139, 66) !important; background: rgba(22, 13, 12, 0.8) !important; color: rgb(247, 223, 154) !important; }
#gameStage { position: absolute !important; inset: 0px !important; background: radial-gradient(at 50% 42%, transparent 0px, transparent 48%, rgba(32, 8, 6, 0.533) 76%, rgb(11, 2, 2) 100%), linear-gradient(90deg, rgb(22, 5, 4), rgb(58, 13, 12) 50%, rgb(22, 5, 4)) !important; }
#gameStage .table-wrap { inset: clamp(55px, 8vh, 78px) clamp(25px, 3.2vw, 58px) clamp(17px, 2.7vh, 35px) !important; }
#gameStage .wood-rim { padding: clamp(11px, 1.25vw, 19px) !important; border: 2px solid rgb(210, 161, 80) !important; border-radius: 29% / 25% !important; background: linear-gradient(90deg, rgb(42, 16, 7), rgb(110, 53, 24) 13%, rgb(50, 19, 7) 27%, rgb(126, 68, 31) 47%, rgb(48, 18, 7) 64%, rgb(114, 64, 31) 84%, rgb(38, 14, 6)) !important; box-shadow: rgba(0, 0, 0, 0.933) 0px 18px 55px, rgba(255, 210, 123, 0.6) 0px 3px 3px inset, rgb(18, 5, 2) 0px -7px 12px inset !important; }
#gameStage .table-felt { border: 2px solid rgb(209, 160, 71) !important; border-radius: 29% / 25% !important; background: radial-gradient(at 50% 44%, rgb(141, 19, 40) 0px, rgb(100, 16, 31) 51%, rgb(59, 9, 18) 82%, rgb(34, 6, 11) 100%) !important; box-shadow: rgb(25, 0, 6) 0px 0px 58px inset, rgba(142, 93, 40, 0.44) 0px 0px 0px 3px inset !important; }
#gameStage .seat-top { top: -1.7% !important; }
#gameStage .seat-left { left: -1.4% !important; }
#gameStage .seat-right { right: -1.4% !important; }
#gameStage .seat-bottom { left: 1.2% !important; bottom: 1.3% !important; transform: none !important; }
#gameStage .player-dock, #gameStage .player-dock.many-cards { left: 14% !important; right: 14% !important; bottom: -58px !important; height: 46% !important; }
#gameStage .hand .card, #gameStage .hand.many-cards .card { width: clamp(82px, 8.6vw, 116px) !important; height: clamp(120px, 12.5vw, 169px) !important; flex-basis: clamp(82px, 8.6vw, 116px) !important; }
#gameStage .center-play { inset: 27% 30% 28% !important; }
.controls.turn-visible #playBtn, .controls.swap-visible #playBtn { left: auto !important; right: 13.5% !important; bottom: 3.3% !important; }
.controls.turn-visible #passBtn { left: auto !important; right: 3.2% !important; bottom: 3.3% !important; }
.controls .btn { width: clamp(104px, 10.5vw, 160px) !important; height: clamp(48px, 6.2vh, 66px) !important; border-radius: 999px !important; }
.champion-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: clamp(10px, 1.4vw, 18px) !important; justify-content: stretch !important; }
.champion-actions button { width: 100% !important; height: clamp(44px, 6.5vh, 58px) !important; margin: 0px !important; display: grid !important; place-items: center !important; }
@media (orientation: landscape) and (max-height: 650px) {
  .topbar { height: 48px !important; }
  .game-stage, body.fullscreen-active .game-stage { inset: 0px !important; }
  #gameStage .table-wrap { inset: 45px max(12px, 3.5vw) 7px !important; }
  #gameStage .wood-rim { padding: 9px !important; }
  #gameStage .player-dock, #gameStage .player-dock.many-cards { left: 13.5% !important; right: 13.5% !important; bottom: -49px !important; height: 47% !important; }
  #gameStage .hand .card, #gameStage .hand.many-cards .card { width: clamp(70px, 7.6vw, 94px) !important; height: clamp(102px, 11vw, 138px) !important; flex-basis: clamp(70px, 7.6vw, 94px) !important; }
  #gameStage .center-play { inset: 25% 29% 27% !important; }
  .controls.turn-visible #playBtn, .controls.swap-visible #playBtn { right: 12.5% !important; bottom: 2.5% !important; }
  .controls.turn-visible #passBtn { right: 2.5% !important; bottom: 2.5% !important; }
  .controls .btn { width: 92px !important; height: 42px !important; }
  .champion-actions button { height: 40px !important; }
}
@media (orientation: landscape) and (max-height: 430px) {
  #gameStage .table-wrap { inset: 40px max(9px, 2.8vw) 4px !important; }
  #gameStage .wood-rim { padding: 7px !important; }
  #gameStage .player-dock, #gameStage .player-dock.many-cards { left: 13% !important; right: 13% !important; bottom: -46px !important; height: 48% !important; }
  #gameStage .hand .card, #gameStage .hand.many-cards .card { width: 68px !important; height: 99px !important; flex-basis: 68px !important; }
  #gameStage .center-play { inset: 23% 28% 25% !important; }
  .controls.turn-visible #playBtn, .controls.swap-visible #playBtn { right: 12% !important; }
  .controls.turn-visible #passBtn { right: 2% !important; }
  .controls .btn { width: 80px !important; height: 36px !important; }
  .champion-actions button { height: 36px !important; }
}
@media not all {
  #gameStage { background: radial-gradient(circle at 50% 35%, rgb(13, 73, 53), rgb(3, 20, 14) 72%) !important; }
  #gameStage .table-wrap { inset: clamp(68px, 8.5vh, 92px) clamp(44px, 6vw, 92px) clamp(48px, 8vh, 78px) !important; padding: 0px !important; }
  #gameStage .wood-rim { padding: 16px !important; border: 1px solid rgba(240, 206, 120, 0.43) !important; border-radius: 90px !important; background: linear-gradient(115deg, rgb(38, 20, 7) 0px, rgb(157, 105, 44) 8%, rgb(240, 198, 109) 11%, rgb(101, 64, 24) 15%, rgb(33, 16, 6) 45%, rgb(166, 111, 44) 78%, rgb(231, 189, 101) 82%, rgb(77, 45, 17) 88%, rgb(26, 11, 4) 100%) !important; box-shadow: rgba(0, 0, 0, 0.867) 0px 32px 80px, rgba(241, 201, 106, 0.333) 0px 0px 0px 1px, rgba(255, 228, 163, 0.667) 0px 3px 3px inset, rgb(18, 7, 3) 0px -12px 18px inset !important; }
  #gameStage .table-felt { overflow: hidden !important; border: 4px solid rgb(22, 12, 6) !important; border-radius: 74px !important; background: radial-gradient(at 50% 45%, rgb(20, 117, 82) 0px, rgb(11, 80, 57) 42%, rgb(6, 51, 35) 78%, rgb(3, 26, 18) 100%) !important; box-shadow: rgb(0, 21, 13) 0px 0px 90px inset, rgba(220, 180, 95, 0.133) 0px 0px 0px 4px inset, rgba(225, 185, 97, 0.267) 0px 0px 0px 1px !important; }
  #gameStage .felt-pattern { opacity: 0.09 !important; }
  #gameStage .center-play { inset: 23% 22% 20% !important; }
  #gameStage .pile { min-width: 310px !important; height: 150px !important; }
  #gameStage .pile .card { width: 78px !important; height: 110px !important; flex-basis: 78px !important; margin-left: -42px !important; transform: none !important; }
  #gameStage .pile .card:first-child { margin-left: 0px !important; }
  #gameStage .player-dock, #gameStage .player-dock.many-cards { left: 10.5% !important; right: 10.5% !important; bottom: -2px !important; height: 35% !important; padding: 0px !important; background: transparent !important; box-shadow: none !important; }
  #gameStage .hand, #gameStage .hand.many-cards { height: 100% !important; min-width: max-content !important; justify-content: center !important; align-items: flex-end !important; padding: 15px 145px 0px !important; }
  #gameStage .hand .card, #gameStage .hand.many-cards .card { width: 82px !important; height: 118px !important; flex-basis: 82px !important; margin-left: -25px !important; border-radius: 10px !important; transform-origin: 50% 150% !important; }
  #gameStage .hand .card:first-child { margin-left: 0px !important; }
  #gameStage .hand .card.selected, #gameStage .hand .card.selected:hover, #gameStage .hand.many-cards .card.selected, #gameStage .hand.many-cards .card.selected:hover { margin-right: 7px !important; }
  #gameStage .hand .card .corner { top: 6px !important; left: 8px !important; font-size: 19px !important; }
  #gameStage .hand .card .corner small { font-size: 16px !important; }
  #gameStage .hand .card .suit-big { font-size: 39px !important; }
  .controls.turn-visible #passBtn { left: max(13px,env(safe-area-inset-left)) !important; right: auto !important; bottom: max(14px,env(safe-area-inset-bottom)) !important; width: 102px !important; height: 64px !important; }
  .controls.turn-visible #playBtn, .controls.swap-visible #playBtn { right: max(13px,env(safe-area-inset-right)) !important; left: auto !important; bottom: max(14px,env(safe-area-inset-bottom)) !important; width: 108px !important; height: 64px !important; }
  @media (orientation: landscape) and (max-height: 700px) {
  #gameStage .table-wrap { inset: 8.5% 13% 13% !important; }
  #gameStage .wood-rim { padding: 11px !important; border-radius: 48px !important; background: linear-gradient(125deg, rgb(23, 23, 23), rgb(105, 105, 105) 7%, rgb(22, 22, 22) 12%, rgb(208, 163, 93) 15%, rgb(43, 23, 10) 18%, rgb(26, 27, 26) 48%, rgb(154, 107, 53) 84%, rgb(34, 34, 34) 88%, rgb(8, 8, 8)) !important; box-shadow: rgba(0, 0, 0, 0.867) 0px 18px 42px, rgb(18, 18, 18) 0px 0px 0px 3px, rgba(255, 255, 255, 0.467) 0px 2px 2px inset !important; }
  #gameStage .table-felt { overflow: visible !important; border: 3px solid rgb(20, 11, 6) !important; border-radius: 38px !important; background: radial-gradient(at 50% 38%, rgb(22, 128, 91), rgb(10, 81, 57) 58%, rgb(5, 45, 32) 100%) !important; box-shadow: rgb(0, 21, 14) 0px 0px 65px inset, rgba(88, 182, 138, 0.098) 0px 0px 0px 3px inset, rgba(215, 168, 87, 0.4) 0px 0px 0px 2px !important; }
  #gameStage .center-play { inset: 18% 16% 20% !important; }
  #gameStage .pile { min-width: 240px !important; height: 120px !important; }
  #gameStage .pile .card { width: 68px !important; height: 96px !important; flex-basis: 68px !important; margin-left: -31px !important; }
  #gameStage .player-dock, #gameStage .player-dock.many-cards { left: 10.5% !important; right: 10.5% !important; bottom: -2px !important; height: 35% !important; }
  #gameStage .hand, #gameStage .hand.many-cards { padding: 15px 145px 0px !important; }
  #gameStage .hand .card, #gameStage .hand.many-cards .card { width: 82px !important; height: 118px !important; flex-basis: 82px !important; margin-left: -25px !important; }
}
  @media (orientation: landscape) and (max-height: 430px) {
  #gameStage .table-wrap { inset: 8.5% 13% 13% !important; }
  #gameStage .wood-rim { padding: 9px !important; border-radius: 42px !important; }
  #gameStage .table-felt { border-radius: 34px !important; }
  #gameStage .center-play { inset: 18% 16% 20% !important; }
  #gameStage .pile { height: 105px !important; }
  #gameStage .pile .card { width: 60px !important; height: 86px !important; flex-basis: 60px !important; margin-left: -27px !important; }
  #gameStage .player-dock, #gameStage .player-dock.many-cards { left: 10.5% !important; right: 10.5% !important; bottom: -2px !important; height: 35% !important; }
  #gameStage .hand, #gameStage .hand.many-cards { padding: 12px 120px 0px !important; }
  #gameStage .hand .card, #gameStage .hand.many-cards .card { width: 72px !important; height: 104px !important; flex-basis: 72px !important; margin-left: -22px !important; }
  .controls.turn-visible #passBtn { width: 88px !important; height: 48px !important; }
  .controls.turn-visible #playBtn, .controls.swap-visible #playBtn { width: 94px !important; height: 48px !important; }
}
}
.topbar { position: absolute !important; inset: 0px 0px auto !important; z-index: 40 !important; height: clamp(52px, 8vh, 78px) !important; padding: 0px clamp(18px, 3.2vw, 58px) !important; background: linear-gradient(rgba(19, 5, 4, 0.91) 0px, rgba(19, 5, 4, 0.66) 48%, transparent 100%) !important; border: 0px !important; pointer-events: none !important; }
.topbar .brand, .topbar .top-actions { pointer-events: auto !important; }
.topbar .round-pill { display: none !important; }
.topbar .brand-mark { width: clamp(31px, 3.6vw, 58px) !important; height: clamp(36px, 4.2vw, 66px) !important; }
.topbar .brand strong { color: rgb(246, 223, 160) !important; font-size: clamp(16px, 2vw, 32px) !important; }
.topbar .brand small { display: none !important; }
.topbar .top-actions { margin-left: auto !important; gap: clamp(7px, 1vw, 16px) !important; }
.topbar .language-switch, .topbar .icon-btn { border-color: rgb(201, 156, 77) !important; background: rgba(18, 13, 12, 0.91) !important; color: rgb(247, 223, 160) !important; }
.topbar .icon-btn { display: grid !important; width: clamp(36px, 4vw, 62px) !important; height: clamp(36px, 4vw, 62px) !important; }
#gameStage { position: absolute !important; inset: 0px !important; width: auto !important; height: auto !important; background: radial-gradient(at 50% 36%, rgb(91, 22, 21) 0px, rgb(36, 8, 7) 53%, rgb(9, 3, 3) 100%) !important; }
#gameStage::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(circle at 9% 32%, rgba(185, 124, 50, 0.22), transparent 16%), radial-gradient(circle at 91% 32%, rgba(185, 124, 50, 0.22), transparent 16%), linear-gradient(90deg, rgba(7, 3, 3, 0.667), rgba(33, 7, 7, 0.133) 25%, rgba(33, 7, 7, 0.133) 75%, rgba(7, 3, 3, 0.667)); pointer-events: none; }
#gameStage .table-wrap { position: absolute !important; inset: clamp(58px, 7.2vh, 82px) clamp(24px, 3.1vw, 56px) clamp(115px, 15.5vh, 165px) !important; padding: 0px !important; }
#gameStage .wood-rim { width: 100% !important; height: 100% !important; max-height: none !important; padding: clamp(12px, 1.45vw, 22px) !important; border: 2px solid rgb(239, 197, 104) !important; border-radius: 50% / 27% !important; background: linear-gradient(103deg, rgb(42, 16, 8) 0px, rgb(111, 55, 27) 8%, rgb(210, 148, 73) 11%, rgb(74, 33, 16) 15%, rgb(36, 16, 7) 48%, rgb(116, 57, 27) 81%, rgb(214, 155, 77) 87%, rgb(53, 21, 10) 92%, rgb(22, 7, 4) 100%) !important; box-shadow: rgba(0, 0, 0, 0.933) 0px 25px 68px, rgb(28, 11, 6) 0px 0px 0px 3px, rgba(255, 227, 160, 0.54) 0px 3px 3px inset, rgb(16, 4, 2) 0px -10px 18px inset !important; }
#gameStage .table-felt { height: 100% !important; overflow: visible !important; border: 2px solid rgb(43, 16, 13) !important; border-radius: 50% / 27% !important; background: radial-gradient(at 50% 42%, rgb(153, 24, 46) 0px, rgb(119, 16, 36) 43%, rgb(80, 10, 24) 73%, rgb(49, 6, 14) 100%) !important; box-shadow: rgba(33, 1, 8, 0.8) 0px 0px 82px inset, rgba(239, 189, 85, 0.22) 0px 0px 0px 3px inset !important; }
#gameStage .felt-pattern { opacity: 0.05 !important; }
.table-brand { opacity: 0.07 !important; color: rgb(217, 169, 91) !important; }
#gameStage .seat { z-index: 24 !important; min-width: 0px !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; padding: 0px !important; border: 0px !important; background: transparent !important; box-shadow: none !important; transform: none !important; }
#gameStage .seat .avatar { width: clamp(48px, 5.2vw, 82px) !important; height: clamp(48px, 5.2vw, 82px) !important; flex: 0 0 clamp(48px, 5.2vw, 82px) !important; border: 3px solid rgb(186, 139, 61) !important; background: linear-gradient(145deg, rgb(73, 58, 41), rgb(21, 16, 13)) !important; box-shadow: rgb(22, 11, 7) 0px 0px 0px 3px, rgba(0, 0, 0, 0.8) 0px 8px 18px !important; }
#gameStage .seat.active .avatar { border-color: rgb(247, 212, 108) !important; box-shadow: rgba(255, 226, 123, 0.208) 0px 0px 0px 4px, rgba(242, 197, 91, 0.565) 0px 0px 24px !important; }
#gameStage .seat-meta { min-width: clamp(70px, 7vw, 112px) !important; display: grid !important; justify-items: center !important; margin: 0px !important; text-align: center !important; }
.seat-meta strong { max-width: 110px !important; padding: 2px 10px !important; border-radius: 999px !important; background: rgba(18, 13, 12, 0.92) !important; color: rgb(255, 242, 215) !important; font: 800 clamp(9px, 1vw, 15px) Manrope !important; }
.seat-meta span { margin: 1px 0px 0px !important; color: rgb(245, 211, 110) !important; font: 900 clamp(8px, 0.82vw, 12px) Manrope !important; }
#gameStage .seat-top { top: -5.5% !important; left: 50% !important; transform: translateX(-50%) !important; }
#gameStage .seat-left { left: -1.7% !important; top: 47% !important; transform: translateY(-50%) !important; }
#gameStage .seat-right { right: -1.7% !important; top: 47% !important; transform: translateY(-50%) !important; }
#gameStage .seat-bottom { left: -1.7% !important; bottom: -7% !important; transform: none !important; }
#gameStage .turn-timer { width: calc(10px + clamp(48px, 5.2vw, 82px)) !important; height: calc(10px + clamp(48px, 5.2vw, 82px)) !important; }
#gameStage .opponent-hand { z-index: 18 !important; }
#gameStage .opponent-hand .card-back { width: clamp(25px, 2.6vw, 42px) !important; height: clamp(38px, 4vw, 64px) !important; margin-left: clamp(-22px, -1.25vw, -13px) !important; border-color: rgb(255, 232, 182) !important; background-color: rgb(158, 36, 51) !important; }
#gameStage .opponent-top { top: 12% !important; left: 50% !important; }
#gameStage .opponent-left { left: 10.5% !important; top: 49% !important; transform: translateY(-50%) rotate(90deg) !important; }
#gameStage .opponent-right { right: 10.5% !important; top: 49% !important; transform: translateY(-50%) rotate(-90deg) !important; }
#gameStage .center-play { inset: 27% 32% 28% !important; z-index: 12 !important; }
#gameStage .pile { min-width: 190px !important; height: 118px !important; }
#gameStage .pile .card { width: clamp(54px, 4.8vw, 76px) !important; height: clamp(78px, 6.9vw, 110px) !important; flex-basis: clamp(54px, 4.8vw, 76px) !important; margin-left: -34px !important; transform: none !important; }
#gameStage .pile .card:first-child { margin-left: 0px !important; }
#gameStage .player-dock, #gameStage .player-dock.many-cards { position: absolute !important; left: 16.5% !important; right: 22.5% !important; bottom: -8.2% !important; height: 39% !important; padding: 0px !important; border: 0px !important; background: transparent !important; box-shadow: none !important; z-index: 26 !important; }
#gameStage .hand-scroll { height: 100% !important; overflow: visible !important; }
#gameStage .hand, #gameStage .hand.many-cards { width: 100% !important; height: 100% !important; min-width: max-content !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; padding: 0px !important; pointer-events: none !important; }
#gameStage .hand .card, #gameStage .hand.many-cards .card { width: clamp(62px, 5.4vw, 86px) !important; height: clamp(90px, 7.8vw, 124px) !important; flex-basis: clamp(62px, 5.4vw, 86px) !important; margin-left: clamp(-27px, -1.65vw, -18px) !important; border-radius: 9px !important; pointer-events: auto !important; transform-origin: 50% 150% !important; }
.hand .card:first-child { margin-left: 0px !important; }
.hand .card.selected, .hand .card.selected:hover { margin-right: 0px !important; z-index: 50 !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 { left: auto !important; right: 12.2% !important; bottom: 4.1% !important; width: clamp(104px, 10vw, 158px) !important; height: clamp(46px, 6.4vh, 66px) !important; }
.controls.turn-visible #passBtn { left: auto !important; right: 2.4% !important; bottom: 4.1% !important; width: clamp(90px, 8.7vw, 138px) !important; height: clamp(46px, 6.4vh, 66px) !important; }
.controls .btn { border-radius: 999px !important; }
@media (orientation: landscape) and (max-height: 700px) {
  .topbar { height: 46px !important; padding: 0px max(12px, 2.4vw) !important; }
  .topbar .brand-mark { width: 31px !important; height: 36px !important; }
  .topbar .brand strong { font-size: 16px !important; }
  .topbar .icon-btn { width: 34px !important; height: 34px !important; }
  .topbar .language-switch { height: 34px !important; }
  #gameStage .table-wrap { inset: 8.2% 3.4% 17.5% !important; }
  #gameStage .wood-rim { padding: 10px !important; }
  #gameStage .seat .avatar { width: 48px !important; height: 48px !important; flex-basis: 48px !important; }
  #gameStage .seat-top { top: -6% !important; }
  #gameStage .seat-left { left: -1.8% !important; }
  #gameStage .seat-right { right: -1.8% !important; }
  #gameStage .seat-bottom { left: -1.8% !important; bottom: -8% !important; }
  #gameStage .turn-timer { width: 57px !important; height: 57px !important; }
  #gameStage .opponent-top { top: 11% !important; }
  #gameStage .opponent-left { left: 10% !important; }
  #gameStage .opponent-right { right: 10% !important; }
  #gameStage .opponent-hand .card-back { width: 27px !important; height: 40px !important; margin-left: -14px !important; }
  #gameStage .center-play { inset: 25% 31% 27% !important; }
  #gameStage .pile { height: 92px !important; }
  #gameStage .pile .card { width: 50px !important; height: 72px !important; flex-basis: 50px !important; margin-left: -25px !important; }
  #gameStage .player-dock, #gameStage .player-dock.many-cards { left: 17.5% !important; right: 23% !important; bottom: -9% !important; height: 40% !important; }
  #gameStage .hand .card, #gameStage .hand.many-cards .card { width: 62px !important; height: 90px !important; flex-basis: 62px !important; margin-left: -20px !important; }
  #gameStage .hand .card .corner { font-size: 14px !important; }
  #gameStage .hand .card .corner small { font-size: 12px !important; }
  #gameStage .hand .card .suit-big { font-size: 28px !important; }
  .controls.turn-visible #playBtn, .controls.swap-visible #playBtn { right: 11.6% !important; bottom: 2.8% !important; width: 94px !important; height: 44px !important; }
  .controls.turn-visible #passBtn { right: 2.2% !important; bottom: 2.8% !important; width: 84px !important; height: 44px !important; }
}
@media (orientation: landscape) and (max-height: 430px) {
  #gameStage .table-wrap { inset: 8% 3% 17% !important; }
  #gameStage .wood-rim { padding: 8px !important; }
  #gameStage .seat .avatar { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
  #gameStage .turn-timer { width: 50px !important; height: 50px !important; }
  #gameStage .opponent-hand .card-back { width: 23px !important; height: 35px !important; margin-left: -12px !important; }
  #gameStage .center-play { inset: 23% 30% 26% !important; }
  #gameStage .pile .card { width: 45px !important; height: 65px !important; flex-basis: 45px !important; }
  #gameStage .player-dock, #gameStage .player-dock.many-cards { left: 17% !important; right: 22.5% !important; bottom: -9.5% !important; height: 41% !important; }
  #gameStage .hand .card, #gameStage .hand.many-cards .card { width: 57px !important; height: 83px !important; flex-basis: 57px !important; margin-left: -19px !important; }
  .controls.turn-visible #playBtn, .controls.swap-visible #playBtn { right: 11.5% !important; width: 82px !important; height: 37px !important; }
  .controls.turn-visible #passBtn { right: 2% !important; width: 74px !important; height: 37px !important; }
}