@charset "UTF-8";
:root {
  color-scheme: dark;
  --page: #202521; --text: #f3f0e6; --muted: #b3bfb2; --gold: #efbf4e; --line: #ffffff18;
  --card-w: 216px; --card-h: 314px; --table-card-w: 192px; --stock-w: 160px;
  --hand-zone: calc(var(--card-h) + 132px); --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box }
body { margin: 0; background: var(--page); color: var(--text); font: 24px "Segoe UI",Arial,sans-serif; -webkit-font-smoothing: antialiased }
button,a,input,select { -webkit-tap-highlight-color: transparent }
button,input,select { font: inherit }
button { color: inherit; cursor: pointer }
button:disabled { cursor: default }
button svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0 }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline: 3px solid #f5cc6c; outline-offset: 4px }
a { color: inherit; text-decoration: none }
[hidden] { display: none!important }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden }
.sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap }
.app-shell { max-width: 1920px; margin: auto; padding: 0 24px }
.topbar { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 0 }
.brand { display: flex; align-items: center; gap: 12px }
.brand>span { font: 66px Georgia,serif; color: #eee7d6 }
.brand strong { font: 700 56px Georgia,serif }
.brand small { display: none }
.match-score { display: flex; align-items: center; gap: 20px; font-size: 26px; color: #a9b5a7 }
.match-score strong { display: flex; gap: 14px; font-size: 38px; color: #f0ebd9; font-variant-numeric: tabular-nums }
.match-score i { font-style: normal; color: #788574 }
.top-actions { display: flex; gap: 10px }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border: 1px solid #ffffff20; border-radius: 14px; background: #ffffff04; color: #cad1c6; transition: background .15s,transform .15s }
.icon-button:hover { background: #ffffff10 }
.icon-button:active { transform: translateY(2px) }
.main-layout { margin-bottom: 16px }
.game-panel { border-radius: 26px; background: #202b22; box-shadow: 0 12px 40px #0005 }
.table-frame { padding: 12px; background: repeating-linear-gradient(3deg,#4b3528 0px,#4b3528 2px,#50392b 3px,#513a2d 7px,#493226 9px); border-radius: 26px 26px 0 0; box-shadow: inset 0 1px 2px #ac8b5b55,inset 0 -1px 2px #090b0799 }
.felt { position: relative; isolation: isolate; overflow: clip; height: max(860px,calc(100svh - 300px)); border-radius: 18px; background: radial-gradient(ellipse at 50% 45%,#3e7653,#2d6245 65%,#28593e); box-shadow: inset 0 0 25px #112f2270,inset 0 1px 3px #0008 }
.felt-grain { position: absolute; inset: 0; z-index: -1; opacity: .075; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.7' filter='url(%23n)'/%3E%3C/svg%3E") }
.table-line { position: absolute; inset: 18px; border: 1px solid #dcdbb120; border-radius: 16px; pointer-events: none; z-index: -1 }
.table-hud { position: absolute; top: 24px; left: 32px; right: 32px; display: flex; justify-content: space-between; pointer-events: none }
.trump-chip { display: block }
.trump-chip>span { display: block; font-size: 24px; color: #c7d6be; margin-bottom: 4px }
.trump-chip strong { display: flex; align-items: center; gap: 8px; font-size: 28px; color: #f0edda; font-weight: 600 }
.trump-chip .suit { font: 54px Georgia,serif }
.trump-chip .red { color: #ffc2a9 }
.round-chip { display: block; text-align: right; font-size: 24px; line-height: 1.7; color: #ccd5bc }
.round-chip strong { font-weight: 600; color: #f1edd5 }
.round-chip time { display: block; color: #a1be9a; font-variant-numeric: tabular-nums }
.opponent-seat { position: absolute; top: 170px; left: 142px; transform: translateX(-50%); width: 252px; z-index: 2 }
.opponent-info { display: flex; justify-content: center; align-items: center; gap: 16px; position: relative }
.avatar { display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: #1c412d; border: 2px solid #c6d1a04d }
.bot-avatar { width: 92px; height: 92px; font-size: 58px; box-shadow: 0 3px 8px #0002 }
.opponent-info strong { display: block; font-size: 32px; font-weight: 650 }
.opponent-info span:not(.avatar):not(.sr-only) { display: block; margin-top: 7px; font-size: 22px; color: #c1d4b2 }
.bot-hand { height: 146px; position: relative; margin-top: 28px }
.bot-card { position: absolute; left: 50%; width: 88px; height: 128px; border-radius: 7px; transform: translateX(calc(-50% + var(--bx))) translateY(var(--by)) rotate(var(--br)); transform-origin: center 140%; box-shadow: 0 3px 6px #0004; transition: transform .28s var(--ease) }
.card-back { background: #8f2727; border: 4px solid #f5f0df; overflow: hidden }
.card-back:before { content: ""; position: absolute; inset: 5px; border: 1px solid #f4ddbb88; background: repeating-linear-gradient(45deg,transparent 0 7px,#ffd6a522 7px 8px,transparent 8px 15px),repeating-linear-gradient(-45deg,transparent 0 7px,#ffd6a522 7px 8px,transparent 8px 15px) }
.card-back:after { content: "♦"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 52%; height: 38%; display: grid; place-items: center; background: #90282a; border: 1px solid #f1d4aa99; color: #f9e8c4; font: 42px Georgia,serif }
.bot-number { position: absolute; right: 0; bottom: -10px; display: grid; place-items: center; min-width: 48px; height: 48px; border-radius: 50%; background: #203e29; border: 1px solid #c8d4a155; color: #e6e7cc; font-size: 24px; font-weight: 700 }
.deck-area { position: absolute; right: 28px; left: auto; top: 160px; width: 250px; text-align: center; z-index: 3 }
.deck-cards { height: 248px; position: relative }
.deck-back { position: absolute; left: 0; top: 0; width: var(--stock-w); height: calc(var(--stock-w)*1.46); border-radius: 10px; transform: rotate(-5deg); z-index: 2; box-shadow: 2px 3px 0 #c5c3ae,4px 5px 0 #eeead3,6px 9px 14px #0004 }
.deck-back:after { font-size: 60px }
.deck-trump.card { --card-w: 152px; --card-h: 220px; position: absolute; left: 56px; top: 18px; transform: rotate(90deg) }
.deck-trump .pip-field,.deck-trump .court-frame { display: none }
.deck-label { display: block; margin-top: 16px; font-size: 24px; color: #c3d2b5 }
.deck-label strong { font-size: 34px; color: #f1ead2; margin-right: 8px }
.empty-deck { width: var(--stock-w); height: calc(var(--stock-w)*1.46); border: 1px dashed #c5d5a750; border-radius: 10px; display: grid; place-items: center; font: 82px Georgia,serif; color: #cad7b388 }
.discard-area { position: absolute; right: 35px; top: 460px; width: 152px; text-align: center; font-size: 22px; color: #bbcdad }
.discard-pile { height: 220px; margin-bottom: 18px }
.discard-placeholder { height: 220px; border: 1px dashed #c5d5a726; border-radius: 10px; display: grid; place-items: center; color: #b9cea155 }
.discard-placeholder svg { width: 50px; height: 50px; fill: none; stroke: currentColor; stroke-width: 1.5 }
.discard-back { width: 152px; height: 220px; position: relative; border-radius: 10px; transform: rotate(8deg); box-shadow: 2px 3px 0 #d8d3bc,0 4px 9px #0004 }
.play-area { position: absolute; left: 288px; right: 254px; top: 110px; bottom: calc(var(--hand-zone) + 36px); display: flex; align-items: center; justify-content: center; z-index: 4 }
.table-watermark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .15s }
.table-watermark span { font: 190px Georgia,serif; color: #d0d9b91d }
.pairs { display: grid; grid-template-columns: repeat(3,calc(var(--table-card-w) + 56px)); gap: 30px 22px; align-content: center; justify-content: center; position: relative; z-index: 2; width: 100% }
.pairs[data-count="1"] { grid-template-columns: calc(var(--table-card-w) + 56px) }
.pairs[data-count="2"] { grid-template-columns: repeat(2,calc(var(--table-card-w) + 56px)) }
.pair { width: calc(var(--table-card-w) + 56px); height: calc(var(--table-card-w)*1.46 + 48px); position: relative; transition: filter .15s }
.pair .card { --card-w: var(--table-card-w); --card-h: calc(var(--table-card-w)*1.46); position: absolute; left: 0; top: 0; transform: rotate(-5deg) }
.pair .defense-card { left: 48px; top: 48px; transform: rotate(7deg) }
.pair.target { cursor: pointer; filter: drop-shadow(0 0 7px #f9cf6666) }
.pair.target:after { content: "Побить"; position: absolute; left: 0; top: -40px; color: #ffdf8d; background: #244c32; border: 1px solid #e7c37d66; font-size: 22px; border-radius: 7px; padding: 5px 12px }
.pair.drag-target { filter: drop-shadow(0 0 15px #ffda83) }
.attack-drop { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: var(--table-card-w); height: calc(var(--table-card-w)*1.46); border: 2px dashed #edd6a076; border-radius: 10px; background: #eed09b08; color: #edd6a0; z-index: 5; flex-direction: column; align-items: center; justify-content: center; gap: 12px }
.attack-drop.visible { display: flex }
.attack-drop span { font-size: 70px; font-weight: 300 }
.attack-drop small { font-size: 24px }
.attack-drop.with-pairs { left: auto; right: -46px; width: 80px; height: 124px }
.attack-drop.with-pairs small { display: none }
.attack-drop:hover,.attack-drop.drag-target { background: #f7d38b22; border-color: #f8dc9a }
.turn-pill { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); min-height: 58px; padding: 12px 24px; display: flex; align-items: center; gap: 12px; white-space: nowrap; max-width: calc(100% - 30px); font-size: 26px; font-weight: 600; border-radius: 32px; color: #e8edce; background: #214d32; box-shadow: 0 2px 5px #0002; z-index: 5 }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #eed396; flex-shrink: 0 }
.turn-pill.waiting { color: #d0d9b9; font-weight: 500 }
.waiting .live-dot { animation: breathe 1.2s infinite }
.player-zone { position: absolute; bottom: 18px; left: 28px; right: 28px; height: var(--hand-zone); z-index: 6 }
.hand-toolbar { height: 64px; display: flex; align-items: center; justify-content: space-between; color: #dce2c8; font-size: 26px; gap: 14px }
.hand-name { display: flex; align-items: center; gap: 12px; font-weight: 600 }
.hand-name strong { background: #214931; border: 1px solid #a7ba8655; border-radius: 7px; min-width: 44px; padding: 5px 8px; text-align: center; font-size: 24px }
.player-avatar { width: 60px; height: 60px; font-size: 40px; border-width: 1px }
.hand-toolbar>div { display: flex; gap: 28px }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; border: 0; background: none; color: #d1dfbc; font-size: 24px; padding: 0; transition: color .15s }
.text-button svg { width: 34px; height: 34px }
.text-button:hover { color: #ffe2a3 }
.player-hand { height: calc(var(--card-h) + 68px); position: relative; max-width: 1500px; margin: 0 auto; touch-action: none }
.hand-card.card { position: absolute; left: 50%; top: 0; transform: translateX(calc(-50% + var(--x))) translateY(var(--y)) rotate(var(--r)); transform-origin: center 145%; transition: transform .28s var(--ease),filter .2s,box-shadow .2s; border: 0; z-index: var(--z); touch-action: none; user-select: none; -webkit-user-select: none; padding: 0; text-align: left; outline-offset: 2px }
.hand-card.selected { transform: translateX(calc(-50% + var(--x))) translateY(calc(var(--y) - 48px)) rotate(0deg); z-index: 65; box-shadow: 0 0 0 3px #f3c862,0 0 0 7px #f3c86230,0 12px 25px #0005 }
.hand-card.hint-card { box-shadow: 0 0 0 3px #d5c18f,0 0 25px #d5c18f44 }
.hand-card.dragging { opacity: .15 }
.card { width: var(--card-w); height: var(--card-h); background: #fffdf4; border-radius: 12px; color: #202a25; box-shadow: 0 2px 0 #d2cdbd,0 5px 10px #0004; position: relative; flex-shrink: 0; overflow: hidden }
.card.red { color: #bf302b }
.card-corner { position: absolute; left: 8%; top: 5%; font: 700 calc(var(--card-w)*.235) Georgia,"Times New Roman",serif; line-height: 1; display: flex; align-items: center; flex-direction: column; gap: 3px; z-index: 1 }
.card-corner .suit { font-size: calc(var(--card-w)*.22); font-weight: 400 }
.card-corner.bottom { left: auto; top: auto; right: 8%; bottom: 5%; transform: rotate(180deg) }
.card-center { position: absolute; inset: 0; display: grid; place-items: center; font: calc(var(--card-w)*.59) Georgia,serif }
.pip-field { position: absolute; inset: 18% 27%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4,1fr); align-items: center; justify-items: center }
.pip { font: calc(var(--card-w)*.213) Georgia,serif; line-height: 1 }
.pip.inverted { transform: rotate(180deg) }
.pip-field.pips-6 { grid-template-rows: repeat(3,1fr) }
.pip-field.pips-9,.pip-field.pips-10 { inset: 16% 25%; grid-template-rows: repeat(5,1fr) }
.pip-field.pips-9 .pip,.pip-field.pips-10 .pip { font-size: calc(var(--card-w)*.195) }
.court-frame { position: absolute; inset: 20% 27%; border: 1px solid currentColor; opacity: .75; display: grid; place-items: center; background: repeating-linear-gradient(45deg,transparent 0 7px,currentColor 7px 7.3px,transparent 7.3px 15px); border-radius: 4px }
.court-frame:before { content: ""; position: absolute; inset: 5px; background: #fffaf0 }
.court-art { position: relative; width: 76%; height: 85% }
.court-art svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round }
.ace-caption { display: none }
.trump-mark { position: absolute; right: 8%; top: 5%; font-size: 20px; color: #a88131 }
.controls-panel { min-height: 164px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 20px 28px; background: #202b22; border-top: 1px solid #ffffff10; border-radius: 0 0 26px 26px; position: sticky; bottom: 0; z-index: 120 }
.utility-actions { display: flex; gap: 12px }
.utility-button { width: 98px; height: 98px; border: 1px solid #9caa8e33; border-radius: 16px; background: #334135; display: grid; place-items: center; color: #e7dfbb; transition: background .15s,transform .15s }
.utility-button:hover { background: #425440 }
.utility-button:active { transform: translateY(2px) }
.utility-button:disabled { opacity: .35 }
.emoji-button span { font-size: 54px }
.emoji-wrap { position: relative }
.emoji-menu { position: absolute; left: 0; bottom: 116px; z-index: 300; display: grid; grid-template-columns: repeat(4,80px); gap: 8px; padding: 14px; background: #222e24; border: 1px solid #75816477; border-radius: 16px; box-shadow: 0 10px 30px #0005 }
.emoji-menu button { width: 80px; height: 80px; border: 0; border-radius: 10px; background: #ffffff05; font-size: 50px }
.emoji-menu button:hover { background: #d5e4a523; transform: scale(1.08) }
.move-description { min-width: 0 }
.move-description strong { display: block; font-size: 34px; font-weight: 650; margin-bottom: 8px; line-height: 1.15 }
.move-description>span { display: block; font-size: 24px; color: #b6c4a9; line-height: 1.4 }
.move-actions { display: flex; gap: 20px }
.button { height: 120px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; border-radius: 16px; border: 1px solid transparent; padding: 0 32px; font-size: 38px; font-weight: 750; white-space: nowrap; transition: transform .12s,background .15s,box-shadow .15s }
.button:not(:disabled):active { transform: translateY(3px); box-shadow: none }
.primary { min-width: 310px; background: #efbf4e; color: #2e291a; box-shadow: 0 5px 0 #a47421,0 7px 12px #0002; border-color: #ffe29a88 }
.primary:hover:not(:disabled) { background: #ffd56a }
.primary:disabled { background: #5e634b; color: #a4ac8d; border-color: #ffffff09; box-shadow: 0 3px 0 #343c2d }
.secondary { min-width: 260px; background: #4c6743; color: #f3f1d9; border-color: #bfd29933; box-shadow: 0 5px 0 #2d4028,0 7px 12px #0002 }
.secondary:hover:not(:disabled) { background: #608153 }
.secondary.take-action { background: #c5783b; border-color: #efc28466; box-shadow: 0 5px 0 #874d26 }
.secondary.take-action:hover:not(:disabled) { background: #db914c }
.secondary:disabled { background: #33402f; color: #87917b; border-color: #ffffff0b; box-shadow: 0 3px 0 #273026; opacity: .7 }
.reaction-float { opacity: 0; pointer-events: none; position: absolute; z-index: 50; font-size: 92px; transform: translateY(8px) scale(.7); transition: opacity .15s,transform .2s; filter: drop-shadow(0 5px 5px #0003); min-width: 96px; text-align: center }
.reaction-float.visible { opacity: 1; transform: translateY(-6px) scale(1) }
.bot-reaction { right: -30px; top: 0 }
.player-reaction { left: 22px; bottom: calc(var(--hand-zone) + 20px) }
.start-screen { position: absolute; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; flex-direction: column }
.start-cards { position: relative; width: 464px; height: 360px; margin-bottom: 10px }
.welcome-card { position: absolute; left: 50%; top: 44px; width: 194px; height: 284px; border-radius: 12px; background: #fffaf0; box-shadow: 0 3px 0 #cec7b5,0 10px 20px #0004; color: #222c25; transform-origin: center 150% }
.welcome-card:first-child { transform: translateX(-85%) rotate(-22deg) }
.welcome-card:nth-child(2) { transform: translateX(-50%) translateY(-24px); z-index: 2 }
.welcome-card:last-child { transform: translateX(-15%) rotate(22deg) }
.welcome-card.red { color: #bc332c }
.welcome-card b { position: absolute; left: 16px; top: 16px; font: 700 42px Georgia,serif }
.welcome-card i { position: absolute; inset: 0; display: grid; place-items: center; font: 116px Georgia,serif; font-style: normal }
.start-screen h1 { font: 700 88px Georgia,serif; margin: 12px 0 18px; color: #f8f1d8 }
.start-screen p { font-size: 30px; color: #d9e3c5; margin: 0 0 36px }
.start-button { height: 130px; min-width: 420px; font-size: 46px }
.is-lobby .opponent-seat,.is-lobby .deck-area,.is-lobby .discard-area,.is-lobby .player-zone,.is-lobby .turn-pill,.is-lobby .table-hud,.is-lobby .play-area { visibility: hidden }
.is-lobby .utility-button { opacity: .5 }
.is-lobby .controls-panel { display: none }
.is-lobby .felt { height: max(570px,calc(100svh - 144px)) }
.round-banner { position: absolute; z-index: 100; left: 50%; top: 34%; transform: translate(-50%,-50%) scale(.9); padding: 22px 32px; min-width: 200px; text-align: center; background: #23462ef2; border: 1px solid #e8d89977; border-radius: 14px; box-shadow: 0 10px 25px #0004; opacity: 0; pointer-events: none; font-size: 46px; font-weight: 700; color: #ffdf97; transition: opacity .2s,transform .2s }
.round-banner.visible { opacity: 1; transform: translate(-50%,-50%) scale(1) }
.round-banner small { display: block; font-size: 24px; font-weight: 400; color: #d6dfbc; margin-top: 10px }
.toast { position: fixed; left: 50%; bottom: 184px; transform: translate(-50%,10px); max-width: calc(100vw - 24px); width: max-content; text-align: center; padding: 18px 24px; background: #273f2af5; color: #f5edd0; border: 1px solid #c4bf8977; border-radius: 14px; box-shadow: 0 8px 22px #0005; font-size: 24px; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .15s,transform .15s }
.toast.visible { opacity: 1; transform: translate(-50%,0) }
.flight-layer { position: absolute; inset: 0; z-index: 90; pointer-events: none; overflow: clip; border-radius: inherit; contain: paint }
.flying-card { position: absolute!important; pointer-events: none; transform-origin: center; box-shadow: 0 10px 25px #0004 }
.confetti { position: fixed; top: -20px; z-index: 1000; pointer-events: none; width: 7px; height: 12px; animation: confetti 2.8s ease-in forwards }
.modal { border: 1px solid #9eaa8570; background: #27382a; color: #eeeede; border-radius: 20px; padding: 32px; width: 760px; max-width: calc(100vw - 28px); max-height: calc(100svh - 40px); box-shadow: 0 20px 80px #0008; overscroll-behavior: contain; overflow: auto }
.modal[open] { animation: modal-in .23s var(--ease) }
.modal::backdrop { background: #101710c9; backdrop-filter: blur(4px) }
.modal-top { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 18px; font-size: 26px; color: #bcc8ad }
.modal-top .icon-button { width: 58px; height: 58px; border: none }
.modal h2 { font-size: 48px; margin: 20px 0 16px }
.modal-intro { font-size: 24px; line-height: 1.6; color: #a7bba1; margin: 16px 0 30px }
.rules-list { list-style: none; counter-reset: rules; padding: 0; margin: 24px 0 }
.rules-list li { counter-increment: rules; position: relative; padding-left: 54px; margin: 28px 0 }
.rules-list li:before { content: counter(rules,decimal-leading-zero); position: absolute; left: 0; top: 0; font: 30px Georgia,serif; color: #ccb885 }
.rules-list strong { display: block; font-size: 28px; margin-bottom: 10px }
.rules-list span { display: block; font-size: 24px; line-height: 1.6; color: #b4c5aa }
.rule-variant,.settings-note { font-size: 20px; line-height: 1.6; color: #a3b899; padding-top: 16px; margin: 16px 0 24px }
.rule-variant { border-top: 1px solid var(--line) }
.help-controls { display: flex; gap: 18px; border: 1px solid #c4c69a20; background: #bbd49a08; border-radius: 12px; padding: 18px; margin: 24px 0 }
.help-controls svg { width: 44px; height: 44px; flex-shrink: 0; fill: none; stroke: #c5b688; stroke-width: 1.5 }
.help-controls p { font-size: 20px; line-height: 1.6; color: #b2c1a6; margin: 0 }
.full-width { width: 100%; min-width: 0; font-size: 34px; height: 104px }
.setting-field { display: block; margin: 28px 0 }
.setting-field>span { display: flex; justify-content: space-between; font-size: 28px; color: #c9d4ba; margin-bottom: 16px }
.setting-field select { width: 100%; background: #18281d; border: 1px solid #b3c19633; border-radius: 12px; padding: 16px; color: #e7e8d1; font-size: 28px; min-height: 72px }
.setting-field select option { background: #12291e }
.setting-field input[type=range] { width: 100%; accent-color: var(--gold); height: 32px }
.volume-field output { color: #bcae7e }
.toggle-field { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); font-size: 26px }
.toggle-field input { width: 32px; height: 32px; accent-color: #edc464; flex-shrink: 0 }
.sound-preview { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; height: 86px; border: 1px solid #9dab8766; border-radius: 12px; background: #3e5139; color: #f0e5be; font-size: 26px; margin: 0 0 24px }
.sound-preview:hover { background: #536748 }
.compact-modal { width: 680px }
.result-modal { width: 720px; text-align: center }
.result-emblem { font-size: 120px; margin: 0 auto 20px }
.result-modal>p { font-size: 24px; color: #a6b89c; line-height: 1.6 }
.result-details { display: flex; justify-content: center; gap: 64px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px; margin: 30px 0 }
.result-details span { font-size: 20px; color: #a2b096; display: flex; flex-direction: column; gap: 12px }
.result-details strong { font-size: 38px; color: #dfd6b5 }
.result-dismiss { display: flex; justify-content: center; margin: 18px auto 0 }
.hand-modal { width: 1050px }
.expanded-hand { display: grid; grid-template-columns: repeat(auto-fill,164px); gap: 24px; justify-content: center; padding: 16px 0 }
.expanded-hand .card { --card-w: 164px; --card-h: 238px; border: 0; padding: 0; text-align: left }
.no-script { position: fixed; inset: 0; display: grid; place-items: center; background: #253c2a; z-index: 9999 }
.reduce-motion *, .reduce-motion *:before,.reduce-motion *:after { animation-duration: .01ms!important; transition-duration: .01ms!important }
.reduce-motion .hand-card.selected { transform: translateX(calc(-50% + var(--x))) translateY(calc(var(--y) - 42px)) rotate(0deg) }
@keyframes breathe { 50% { opacity: .35 } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }
@keyframes confetti { to { transform: translate(var(--drift),105vh) rotate(var(--spin)); opacity: .1 } }

/* Double the former compact desktop card size without shrinking crowded rounds. */
@media(max-height:900px) and (min-width:701px) { :root { --card-w: 196px; --card-h: 284px } }
@media(min-width:701px) { .crowded-table { height: max(1200px,calc(100svh - 300px)) } }
@media(max-width:1500px) and (min-width:701px) {
  .match-score { display: none }
  .move-description strong { font-size: 32px }
  .felt { height: max(820px,calc(100svh - 388px)) }
  .opponent-seat { left: 130px; width: 228px; top: 162px }
  .bot-avatar { width: 76px; height: 76px; font-size: 48px }
  .bot-card { width: 74px; height: 108px }
  .bot-hand { height: 132px }
  .opponent-info strong { font-size: 30px }
  .play-area { left: 254px; right: 242px }
  .pairs { gap: 30px 8px }
  .pairs { grid-template-columns: repeat(2,248px) }
  .felt:has(.pairs[data-count="3"]),.felt:has(.pairs[data-count="4"]) { height: 1240px }
  .deck-area { right: 24px }
  .discard-area { right: 30px; top: 450px }
  .crowded-table { height: max(1614px,calc(100svh - 388px)) }
}
@media(max-width:1150px) and (min-width:701px) {
  .controls-panel { grid-template-columns: auto 1fr; gap: 16px 24px }
  .move-actions { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1.2fr }
  .toast { bottom: 272px }
  .app-shell { padding: 0 14px }
  .topbar { min-height: 104px }
  .brand strong { font-size: 48px }
  .brand>span { font-size: 56px }
  .icon-button { width: 66px; height: 66px }
  .felt { height: max(930px,calc(100svh - 380px)) }
  .opponent-seat { left: 50%; top: 24px; width: 340px }
  .opponent-info { justify-content: center }
  .bot-hand { height: 116px; margin-top: 18px }
  .deck-area { top: 265px; left: 24px; right: auto }
  .discard-area { top: 270px; right: 28px }
  .play-area { left: 236px; right: 210px; top: 250px }
  .pairs { grid-template-columns: repeat(2,248px) }
  .pairs[data-count="1"] { grid-template-columns: 248px }
  .felt:has(.pairs[data-count="3"]),.felt:has(.pairs[data-count="4"]) { height: 1370px }
  .crowded-table { height: 1720px }
  .turn-pill { top: 205px; font-size: 24px; min-height: 48px }
}
@media(max-width:700px) {
  :root { --card-w: 164px; --card-h: 238px; --table-card-w: 108px; --stock-w: 94px; --hand-zone: 368px }
  body { font-size: 20px }
  .app-shell { padding: 0 8px }
  .topbar { min-height: 100px; gap: 12px; padding: 10px 4px; flex-wrap: wrap }
  .brand { gap: 6px }
  .brand>span { font-size: 54px }
  .brand strong { font-size: 46px }
  .top-actions { gap: 6px }
  .icon-button { width: 68px; height: 72px; border-radius: 12px }
  .icon-button svg { width: 38px; height: 38px }
  .match-score,.desktop-only { display: none!important }
  .main-layout { margin-bottom: 8px }
  .game-panel { border-radius: 18px }
  .table-frame { padding: 8px; border-radius: 18px 18px 0 0 }
  .felt { height: max(914px,calc(100svh - 346px)); border-radius: 12px }
  .table-line { inset: 14px; border-radius: 9px }
  .table-hud { top: 20px; left: 22px; right: 22px }
  .trump-chip>span { font-size: 18px; margin-bottom: 4px }
  .trump-chip strong { font-size: 20px; gap: 6px }
  .trump-chip .suit { font-size: 44px }
  .round-chip { font-size: 20px; line-height: 1.8 }
  .round-chip time { font-size: 18px }
  .opponent-seat { left: 50%; top: 24px; width: 310px }
  .opponent-info { gap: 12px }
  .bot-avatar { width: 70px; height: 70px; font-size: 44px }
  .opponent-info strong { font-size: 28px }
  .opponent-info span:not(.avatar):not(.sr-only) { font-size: 18px; margin-top: 6px }
  .bot-hand { height: 106px; margin-top: 20px }
  .bot-card { width: 64px; height: 92px; border-width: 3px }
  .bot-card:after { font-size: 36px }
  .bot-number { right: 0; bottom: -4px; height: 44px; min-width: 44px; font-size: 20px }
  .deck-area { left: 22px; right: auto; top: 284px; width: 136px }
  .deck-cards { height: 146px }
  .deck-back { border-width: 3px; border-radius: 7px }
  .deck-back:after { font-size: 46px }
  .deck-trump.card { --card-w: 88px; --card-h: 128px; left: 42px; top: 12px; border-radius: 7px }
  .deck-label { font-size: 18px; margin-top: 16px }
  .deck-label strong { font-size: 26px; margin-right: 6px }
  .empty-deck { font-size: 50px }
  .discard-area { right: 22px; top: 228px; width: auto; font-size: 18px }
  .discard-pile { display: none }
  .play-area { left: 196px; right: 26px; top: 312px; bottom: calc(var(--hand-zone) + 44px) }
  .pairs { grid-template-columns: repeat(3,140px); gap: 26px 8px }
  .pairs[data-count="1"] { grid-template-columns: 140px }
  .pairs[data-count="2"] { grid-template-columns: repeat(2,140px) }
  .pair { width: 140px; height: 190px }
  .pair .card { border-radius: 8px }
  .pair .defense-card { left: 26px; top: 32px }
  .pair.target:after { font-size: 18px; padding: 5px 8px; top: -34px }
  .table-watermark span { font-size: 124px }
  .attack-drop { border-radius: 8px }
  .attack-drop small { font-size: 20px }
  .attack-drop span { font-size: 58px }
  .attack-drop.with-pairs { right: -14px; width: 52px; height: 92px }
  .attack-drop.with-pairs span { font-size: 48px }
  .turn-pill { top: 246px; bottom: auto; min-height: 48px; padding: 10px 18px; font-size: 22px; gap: 9px }
  .player-zone { bottom: 16px; left: 14px; right: 14px }
  .hand-toolbar { height: 62px; font-size: 22px; gap: 10px }
  .hand-name { gap: 8px }
  .hand-name strong { font-size: 20px; min-width: 38px; padding: 4px 6px }
  .player-avatar { width: 52px; height: 52px; font-size: 34px }
  .hand-toolbar>div { gap: 22px }
  .text-button { font-size: 20px; gap: 8px; min-height: 62px }
  .text-button svg { width: 28px; height: 28px }
  .player-hand { height: 306px }
  .hand-card { border-radius: 10px }
  .hand-card.selected { transform: translateX(calc(-50% + var(--x))) translateY(calc(var(--y) - 42px)) rotate(0deg) }
  .trump-mark { font-size: 18px }
  .controls-panel { min-height: 236px; grid-template-columns: 156px 1fr; gap: 14px 18px; padding: 16px; border-radius: 0 0 18px 18px }
  .utility-actions { gap: 8px; grid-column: 1; grid-row: 1 }
  .utility-button { width: 74px; height: 78px; border-radius: 12px }
  .utility-button svg { width: 38px; height: 38px }
  .emoji-button span { font-size: 48px }
  .move-description { grid-column: 2; grid-row: 1 }
  .move-description strong { font-size: 28px; margin-bottom: 6px }
  .move-description>span { font-size: 20px; line-height: 1.4 }
  .move-actions { grid-column: 1 / 3; grid-row: 2; display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px }
  .button { width: 100%; min-width: 0; height: 114px; font-size: 36px; padding: 0 18px; gap: 14px; border-radius: 14px }
  .button svg { width: 40px; height: 40px }
  .emoji-menu { bottom: 94px; grid-template-columns: repeat(4,64px); gap: 6px; padding: 10px }
  .emoji-menu button { width: 64px; height: 64px; font-size: 46px }
  .reaction-float { font-size: 86px; min-width: 92px }
  .bot-reaction { right: -14px }
  .player-reaction { left: 14px; bottom: 340px }
  .start-cards { width: 340px; height: 320px }
  .welcome-card { width: 174px; height: 254px }
  .start-screen h1 { font-size: 76px }
  .start-screen p { font-size: 24px; margin-bottom: 30px }
  .start-button { width: 340px; height: 120px; font-size: 42px }
  .round-banner { font-size: 44px; padding: 18px 24px; top: 40% }
  .round-banner small { font-size: 20px }
  .toast { bottom: 256px; font-size: 22px }
  .modal { padding: 24px; border-radius: 14px }
  .modal h2 { font-size: 38px }
  .modal-top { font-size: 22px }
  .full-width { font-size: 32px; height: 100px }
  .rules-list strong { font-size: 26px }
  .rules-list span { font-size: 22px }
  .setting-field>span,.setting-field select { font-size: 26px }
  .toggle-field { font-size: 24px }
  .felt:has(.pairs[data-count="4"]),.felt:has(.pairs[data-count="5"]),.felt:has(.pairs[data-count="6"]) { height: 1144px }
}
@media(max-width:520px) {
  :root { --hand-zone: 390px }
  .topbar { justify-content: center; min-height: 172px; gap: 8px }
  .brand>span { font-size: 46px }
  .brand strong { font-size: 42px }
  .top-actions { width: 100%; justify-content: space-between; gap: 6px }
  .icon-button { width: 68px; height: 68px }
  .table-hud { left: 18px; right: 18px }
  .round-chip { position: absolute; left: 0; top: 88px; text-align: left; font-size: 18px; display: flex; gap: 10px }
  .round-chip time { font-size: 18px }
  .trump-chip strong { font-size: 18px }
  .opponent-seat { left: auto; right: 14px; transform: none; top: 22px; width: 178px }
  .opponent-info { gap: 8px; justify-content: flex-end }
  .bot-avatar { width: 60px; height: 60px; font-size: 40px }
  .opponent-info strong { font-size: 26px }
  .opponent-info span:not(.avatar):not(.sr-only) { font-size: 18px; max-width: 110px }
  .bot-hand { margin-top: 30px }
  .bot-number { right: -2px }
  .deck-area { left: 18px; top: 150px; width: 130px }
  .deck-trump.card { left: 10px }
  .deck-label { margin-top: 8px; font-size: 18px }
  .deck-label strong { font-size: 26px }
  .discard-area { top: 268px; right: 20px; font-size: 18px }
  .turn-pill { top: 326px; font-size: 22px }
  .felt { height: 1010px }
  .play-area { left: 24px; right: 24px; top: 402px; bottom: calc(var(--hand-zone) + 44px) }
  .pairs,.pairs[data-count="2"] { grid-template-columns: repeat(2,140px); gap: 28px 12px }
  .pairs[data-count="1"] { grid-template-columns: 140px }
  .felt:has(.pairs[data-count="3"]),.felt:has(.pairs[data-count="4"]) { height: 1230px }
  .felt:has(.pairs[data-count="5"]),.felt:has(.pairs[data-count="6"]) { height: 1450px }
  .player-zone { left: 8px; right: 8px }
  .hand-toolbar { flex-wrap: wrap; height: 84px; gap: 0 }
  .hand-name { font-size: 20px }
  .hand-toolbar>div { gap: 14px }
  .text-button { font-size: 18px; min-height: 40px; gap: 5px }
  .text-button svg { width: 24px; height: 24px }
  .player-hand { height: 306px }
  .controls-panel { grid-template-columns: 124px 1fr; gap: 12px; padding: 12px; min-height: 222px }
  .utility-button { width: 58px; height: 68px }
  .utility-button svg { width: 34px; height: 34px }
  .emoji-button span { font-size: 44px }
  .move-description strong { font-size: 26px }
  .move-description>span { font-size: 18px }
  .move-actions { gap: 10px; grid-template-columns: 1fr 1fr }
  .button { font-size: 26px; padding: 0 2px; gap: 6px }
  .move-actions .button svg { display: none }
  .attack-drop.with-pairs { right: -16px; width: 40px }
  .start-cards { width: 300px; height: 310px }
  .welcome-card { width: 164px; height: 238px }
  .start-screen h1 { font-size: 68px }
  .start-screen p { font-size: 21px }
  .start-button { width: 280px; font-size: 40px }
  .toast { bottom: 242px; font-size: 20px }
  .modal { padding: 20px }
  .modal h2 { font-size: 34px }
  .full-width { font-size: 28px }
  .expanded-hand { gap: 20px }
  .rules-list li { padding-left: 40px }
  .rules-list strong { font-size: 24px }
  .rules-list span { font-size: 20px }
  .modal .button svg { width: 30px; height: 30px }
  .sound-preview { font-size: 22px; gap: 8px }
}
@media(max-width:380px) {
  :root { --table-card-w: 102px }
  .pairs,.pairs[data-count="2"] { grid-template-columns: repeat(2,130px); gap: 28px 10px }
  .pairs[data-count="1"] { grid-template-columns: 130px }
  .pair { width: 130px; height: 184px }
}
@media(max-height:800px) {
  .is-lobby .start-cards { height: 240px; transform: scale(.72); transform-origin: center bottom }
  .is-lobby .welcome-card { top: -90px }
  .is-lobby .start-screen h1 { font-size: 64px; margin: 6px 0 12px }
  .is-lobby .start-screen p { font-size: 24px; margin-bottom: 18px }
  .is-lobby .start-button { height: 96px; font-size: 38px }
}
@media(max-width:520px) {
  .is-lobby .felt { height: max(480px,calc(100svh - 204px)) }
  .is-lobby .start-cards { height: 238px; transform: scale(.62); transform-origin: center bottom }
  .is-lobby .welcome-card { top: -40px }
  .is-lobby .start-screen h1 { font-size: 56px }
  .is-lobby .start-screen p { font-size: 21px }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration: .01ms!important; transition-duration: .01ms!important; scroll-behavior: auto!important } }

.start-choices { width: min(90%,600px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.start-choices .button { min-width: 0; width: 100%; height: 100px; font-size: 34px }
.opponent-info strong { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.toggle-field strong { display: block; font-size: 26px; font-weight: 600 }
.toggle-field small { display: block; font-size: 20px; line-height: 1.5; color: var(--muted); margin-top: 8px }
.setting-field input:not([type=range]) { width: 100%; min-height: 72px; padding: 16px; font-size: 28px; border: 1px solid #b3c19655; border-radius: 12px; background: #18281d; color: #e7e8d1 }
.join-room { margin-top: 28px; padding-top: 8px; border-top: 1px solid var(--line) }
.room-error { color: #ffcd9f; font-size: 24px; line-height: 1.4; margin: 20px 0 0; min-height: 1em }
.room-error:empty { display: none }
.leave-room { margin-top: 22px }
#room-code-input { font-family: Consolas,monospace; letter-spacing: .18em; text-transform: uppercase }
#room-invite { font-size: 20px; overflow: hidden }
.waiting-screen { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 20px }
.waiting-screen h1 { font-size: 52px; margin: 0 }
.waiting-screen p { font-size: 26px; color: #d7e1c4; max-width: 600px; line-height: 1.4; margin: 0 }
.waiting-emblem { font-size: 92px }
.room-code { font: 700 64px Consolas,monospace; color: #ffdf97; letter-spacing: .14em; margin: 12px 0 }
.waiting-screen .button { height: 96px; min-width: 0; max-width: 100%; font-size: 32px }
.waiting-screen .text-button { margin-top: 12px }
.is-online .setting-field:has(#difficulty-select) { display: none }
.is-online .match-score { display: none }
@media(max-width:700px) {
  .room-modal { width: 640px }
  .waiting-screen h1 { font-size: 42px }
  .waiting-screen p { font-size: 22px }
  .waiting-screen .button { font-size: 28px }
  .room-error { font-size: 20px }
  .toggle-field strong { font-size: 24px }
  .toggle-field small { font-size: 18px }
  .setting-field input:not([type=range]) { font-size: 24px; min-height: 64px }
}
@media(max-width:520px) {
  .top-actions .icon-button { width: 56px; min-width: 0; height: 62px; flex: 1 }
  .top-actions .icon-button svg { width: 32px; height: 32px }
  .start-choices { gap: 10px }
  .start-choices .button { height: 86px; font-size: 26px }
  .waiting-screen { padding: 18px; gap: 14px }
  .waiting-screen h1 { font-size: 34px }
  .waiting-screen p { font-size: 20px }
  .waiting-emblem { font-size: 64px }
  .room-code { font-size: 42px }
  .waiting-screen .button { font-size: 24px; height: 86px; padding: 0 10px }
  .opponent-info strong { max-width: 110px }
}

/* The whole game occupies the visible viewport; only lists and dialogs scroll. */
.hand-card.card { transition:transform .18s var(--ease);contain:layout style;-webkit-touch-callout:none }
.hand-card.dragging { opacity:0;pointer-events:none }
.is-dragging .turn-pill { visibility:hidden }
.play-area.drag-active { outline:1px dashed #c3d1a74d;outline-offset:8px;border-radius:12px }
.play-area.drag-over { outline:2px solid #bde19a;outline-offset:8px }
.drag-hint { position:absolute;left:50%;top:-30px;transform:translateX(-50%);white-space:nowrap;pointer-events:none;font-size:12px;z-index:9;color:#fff1bd;background:#183d2df5;border-radius:20px;padding:5px 10px }
body .hand-card.inspecting,body.reduce-motion .hand-card.inspecting { transform:translateX(calc(-50% + var(--inspect-x))) translateY(calc(var(--y) - 50px)) rotate(0deg) scale(1.06);z-index:80;will-change:transform;outline:2px solid #efbf4e;outline-offset:1px;box-shadow:0 3px 7px #0006;transition:transform .09s ease-out }
.hand-peek { position:absolute;top:0;left:50%;transform:translate(-50%,-110%);z-index:85;pointer-events:none;white-space:nowrap;background:#183d2df5;border:1px solid #b7bd8060;border-radius:20px;padding:5px 12px;font-size:14px;color:#fff1bd }
.expanded-hand .card { content-visibility:auto;contain-intrinsic-size:auto 151px }
.app-suspended *,.app-suspended *:before,.app-suspended *:after { animation-play-state:paused!important }
@media(pointer:coarse) { .felt-grain { display:none }.court-frame { background:none }.card,.flying-card,.bot-card { box-shadow:0 2px 4px #0005 }.pair,.pair.target,.pair.drag-target,.reaction-float { filter:none;transition:none }.pair.target .attack-card,.pair.drag-target .attack-card { outline:2px solid #efbf4e;outline-offset:1px }.modal::backdrop { backdrop-filter:none }.waiting .live-dot { animation:none } }
:root { --card-w:clamp(100px,18dvh,196px); --card-h:calc(var(--card-w)*1.46); --hand-zone:calc(var(--card-h) + 60px); --table-card-w:clamp(60px,12dvh,132px); --stock-w:64px }
html,body { width:100%;height:100%;overflow:hidden;overscroll-behavior:none }
body { font-size:18px }
.app-shell { height:var(--app-height,100dvh);max-height:var(--app-height,100dvh);padding:0 12px 8px;display:flex;flex-direction:column;max-width:1800px;box-sizing:border-box }
.topbar { flex:0 0 64px;min-height:64px;gap:12px;padding:6px 0;flex-wrap:nowrap;justify-content:space-between }
.brand { gap:5px }.brand>span { font-size:34px }.brand strong { font-size:32px }
.top-actions { width:auto;gap:6px }.top-actions .icon-button { width:44px;height:44px;flex:none;font-size:24px;border-radius:9px }.icon-button svg { width:24px;height:24px }
.match-score { display:none }
.main-layout { flex:1;min-height:0;margin:0 }
.game-panel { height:100%;display:flex;flex-direction:column;border-radius:16px }
.table-frame { flex:1;min-height:0;padding:7px;border-radius:16px 16px 0 0 }
body .felt,body .felt:has(.pairs),body.is-lobby .felt { height:100%!important;min-height:0;border-radius:10px;--card-h:calc(var(--card-w)*1.46);--hand-zone:calc(var(--card-h) + 60px) }
.table-line { inset:8px }
.table-hud { top:12px;left:14px;right:14px }
.trump-chip>span { font-size:13px;margin-bottom:0 }.trump-chip strong { font-size:15px;gap:4px }.trump-chip .suit { font-size:28px }
.round-chip { position:static;font-size:13px;line-height:1.6;display:block }.round-chip time { font-size:12px }
.opponent-seat { left:50%;right:auto;top:10px;transform:translateX(-50%);width:240px }
.opponent-info { gap:8px;justify-content:center }.opponent-info strong { font-size:18px;max-width:160px }.opponent-info span:not(.avatar):not(.sr-only) { font-size:12px;margin-top:2px }
.bot-avatar { width:40px;height:40px;font-size:26px }.bot-hand { margin-top:7px;height:50px;width:180px;margin-left:auto;margin-right:auto }.bot-card { width:30px;height:44px;border-width:2px;border-radius:4px }.bot-card:after { font-size:16px }.bot-number { height:24px;min-width:24px;font-size:12px;right:2px;bottom:0 }
.deck-area { top:82px;left:16px;right:auto;width:98px }.deck-cards { height:98px }.deck-trump.card { --card-w:58px;--card-h:84px;left:25px;top:8px }.deck-back { border-width:2px;border-radius:5px }.deck-back:after { font-size:25px }.deck-label { margin-top:7px;font-size:12px }.deck-label strong { font-size:18px;margin-right:4px }.empty-deck { font-size:30px }
.discard-area { right:14px;top:68px;width:auto;font-size:12px }.discard-pile { display:none }
.turn-pill { top:92px;min-height:28px;padding:5px 12px;font-size:14px;gap:7px;max-width:70%;overflow:hidden;text-overflow:ellipsis }
.live-dot { width:6px;height:6px }
.play-area { left:128px;right:92px;top:128px;bottom:calc(var(--hand-zone) + 6px) }
.pairs,.pairs[data-count="2"] { grid-template-columns:repeat(3,calc(var(--table-card-w) + 24px));gap:8px 14px }
.pairs[data-count="1"] { grid-template-columns:calc(var(--table-card-w) + 24px) }.pairs[data-count="2"] { grid-template-columns:repeat(2,calc(var(--table-card-w) + 24px)) }
.pair { width:calc(var(--table-card-w) + 24px);height:calc(var(--table-card-w)*1.46 + 18px) }.pair .defense-card { top:14px;left:20px }.pair .card { border-radius:6px }.pair.target:after { top:-22px;font-size:12px;padding:2px 5px }
.felt:has(.pairs[data-count="4"]),.felt:has(.pairs[data-count="5"]),.felt:has(.pairs[data-count="6"]) { --table-card-w:clamp(40px,7dvh,88px);--card-w:clamp(90px,16dvh,180px) }
.table-watermark span { font-size:100px }.attack-drop { border-radius:7px }.attack-drop span { font-size:40px }.attack-drop small { font-size:14px }.attack-drop.with-pairs { right:-42px;width:36px;height:56px }.attack-drop.with-pairs span { font-size:28px }
.player-zone { height:var(--hand-zone);bottom:6px;left:14px;right:14px }
.hand-toolbar { height:34px;font-size:15px;gap:6px;flex-wrap:nowrap }.hand-name { gap:6px;font-size:15px }.hand-name strong { font-size:13px;min-width:24px;padding:2px 4px }.player-avatar { width:28px;height:28px;font-size:20px }.hand-toolbar>div { gap:18px }.text-button { min-height:34px;font-size:14px;gap:5px }.text-button svg { width:20px;height:20px }
.player-hand { height:calc(var(--card-h) + 26px) }
.hand-card.selected { transform:translateX(calc(-50% + var(--x))) translateY(calc(var(--y) - 28px)) rotate(0deg) }
.reduce-motion .hand-card.selected { transform:translateX(calc(-50% + var(--x))) translateY(calc(var(--y) - 28px)) rotate(0deg) }
.controls-panel { position:relative;bottom:auto;flex:0 0 94px;min-height:94px;padding:10px 14px;grid-template-columns:auto 1fr auto;gap:12px;border-radius:0 0 16px 16px }
.utility-actions { grid-column:auto;grid-row:auto;gap:8px }.utility-button { width:44px;height:48px;border-radius:8px }.utility-button svg { width:24px;height:24px }.emoji-button span { font-size:30px }
.move-description { grid-column:auto;grid-row:auto;min-width:0 }.move-description strong { font-size:19px;line-height:1.2;margin-bottom:3px }.move-description>span { font-size:13px;line-height:1.3;display:block }
.move-actions { grid-column:auto;grid-row:auto;display:flex;gap:10px }.button { height:58px;font-size:22px;min-width:150px;padding:0 18px;gap:8px;border-radius:10px;width:auto }.button svg { width:24px;height:24px }
.emoji-menu { bottom:58px;grid-template-columns:repeat(4,44px);gap:4px;padding:8px }.emoji-menu button { width:44px;height:44px;font-size:32px }
.reaction-float { font-size:46px;min-width:50px }.player-reaction { bottom:calc(var(--hand-zone) - 10px) }.bot-reaction { right:-25px }
.round-banner { font-size:30px;padding:12px 22px }.round-banner small { font-size:15px }.toast { bottom:110px;font-size:15px;padding:12px 16px;max-width:90vw }
.other-seats { position:absolute;left:50%;top:64px;transform:translateX(-50%);display:flex;justify-content:center;gap:5px;z-index:4;max-width:88%;flex-wrap:wrap }
.seat-chip { font-size:12px;padding:4px 7px;border:1px solid #ffffff24;border-radius:20px;background:#193e2dec;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis }.seat-chip.defending { border-color:#e9be64 }.seat-chip.attacking { background:#385533 }
.is-online .bot-hand { visibility:hidden }.is-online .opponent-seat { top:9px }.is-online .turn-pill { top:102px }.is-online .play-area { top:138px }
.is-spectator .player-zone { display:none }.is-spectator .play-area { bottom:18px }.is-spectator .move-actions,.is-spectator #hint-button { display:none }
.modal { width:560px;padding:22px;max-height:calc(100dvh - 24px);max-width:calc(100vw - 24px);border-radius:16px;font-size:17px }.modal h2 { font-size:28px;margin:12px 0 }.modal-top { font-size:18px;margin-bottom:10px }.modal-top .icon-button { width:36px;height:36px }.modal-intro { font-size:16px;line-height:1.5;margin:12px 0 20px }.full-width { width:100%;min-width:0;height:52px;font-size:20px }.setting-field { margin:18px 0 }.setting-field>span { font-size:16px;margin-bottom:7px }.setting-field input:not([type=range]),.setting-field select { min-height:44px;font-size:17px;padding:10px }.toggle-field { padding:15px 0;font-size:17px }.toggle-field strong { font-size:17px }.toggle-field small { font-size:13px }.toggle-field input { width:24px;height:24px }.sound-preview { height:48px;font-size:17px;gap:8px }.settings-note,.rule-variant { font-size:14px }.rules-list strong { font-size:18px }.rules-list span { font-size:15px }.help-controls p { font-size:14px }.room-options { display:grid;grid-template-columns:1fr 1.5fr;gap:14px }.room-error { font-size:15px }.join-room { margin-top:18px }.leave-room { margin-top:14px }.result-emblem { font-size:60px }.result-modal>p { font-size:16px }.result-details { gap:30px;padding:14px;margin:20px 0 }.result-details strong { font-size:24px }.result-details span { font-size:14px }
.waiting-screen { padding:16px;gap:10px }.waiting-screen h1 { font-size:32px }.waiting-screen p { font-size:16px;max-width:440px }.waiting-screen .button { height:50px;font-size:18px;min-width:230px }.room-code { font-size:34px;margin:4px 0 }.waiting-players { display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:500px }.waiting-players span { border-radius:20px;background:#ffffff0b;border:1px solid #ffffff1d;padding:7px 10px;font-size:15px }.waiting-screen .text-button { font-size:16px;margin-top:4px }
.start-screen .start-cards { height:180px;transform:scale(.55);transform-origin:center bottom }.start-screen .welcome-card { top:-100px }.start-screen h1 { font-size:52px;margin:10px 0 }.start-screen p { font-size:19px;margin-bottom:22px }.start-choices { width:min(90%,450px) }.start-choices .button { height:60px;font-size:24px }
.small-button { border:1px solid #ffffff28;border-radius:9px;background:#2c4032;color:#f1f0dc;min-height:42px;padding:8px 13px;font-size:15px;white-space:nowrap }.small-button:hover { background:#3c5341 }.small-button.gold { background:#ebbd53;color:#202c23;border-color:#ebbd53;font-weight:700 }.small-button:disabled { opacity:.5 }
.in-club .game-panel { display:none }.club { height:100%;min-height:0;display:flex;flex-direction:column;background:#253c2c;border:1px solid #71856265;border-radius:16px;padding:22px }.club-heading { display:flex;justify-content:space-between;align-items:center;gap:10px }.club h1 { font:700 32px Georgia,serif;margin:0 }.club-heading p { font-size:14px;color:#b9c9ac;margin:7px 0 18px }.club-name { display:flex;align-items:center;gap:10px;font-size:15px;margin-bottom:20px }.club input,.chat-form input { min-width:0;background:#15291d;color:#f4f0db;border:1px solid #708160;border-radius:8px;padding:10px 12px;font-size:16px;height:44px }.club-name input { width:200px }.club-tabs { display:none }.club-columns { display:grid;grid-template-columns:minmax(320px,1.5fr) minmax(180px,.7fr) minmax(260px,1fr);gap:22px;min-height:0;flex:1 }.club-columns>section { min-height:0;display:flex;flex-direction:column;gap:12px }.club h2 { font-size:20px;margin:0 }.club-section-title { display:flex;gap:10px;justify-content:space-between;align-items:center }.club-section-title>div { display:flex;gap:6px }.club-scroll { overflow:auto;min-height:0;flex:1;overscroll-behavior:contain }.room-row { background:#183320;border:1px solid #6782575e;border-radius:12px;padding:15px;margin-bottom:10px }.room-row>strong { font-size:18px;display:block;overflow-wrap:anywhere }.room-row p { color:#d0dbc1;font-size:14px;line-height:1.5;margin:10px 0 }.room-row-footer { display:flex;align-items:center;gap:10px;justify-content:space-between;font-size:13px;color:#aebfa1 }.person-row { display:grid;grid-template-columns:28px 1fr;gap:3px 8px;padding:12px 0;border-bottom:1px solid #ffffff15;font-size:15px }.person-row small { grid-column:2;color:#aec1a4;font-size:12px }.person-row strong { overflow-wrap:anywhere }
.chat-messages { overflow:auto;min-height:0;flex:1;overscroll-behavior:contain;scrollbar-width:thin;background:#19321f;border:1px solid #6e80584d;border-radius:10px;padding:12px }.chat-message { margin-bottom:14px;overflow-wrap:anywhere }.chat-author { display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#e8cc8e }.chat-author time { font-size:11px;color:#91a187 }.chat-message p { font-size:15px;line-height:1.45;margin:4px 0 0;white-space:pre-wrap;color:#e4ead7 }.chat-form { display:flex;gap:7px;margin:0 }.chat-form input { flex:1 }.chat-form button { min-width:44px }.chat-empty { color:#b3c3a4;font-size:15px;line-height:1.5;padding:10px 0 }.chat-note { font-size:14px;line-height:1.5;color:#b6c7ad }.chat-modal[open] { display:flex;flex-direction:column;gap:12px;height:min(560px,85dvh) }.chat-modal .modal-top { margin:0 }.chat-modal .chat-note { margin:0 }.chat-modal .chat-messages { min-height:100px }.chat-modal #table-chat-error { font-size:14px;color:#ffcd9f;margin:0 }
@media(min-width:701px) and (max-width:1000px) { .club-tabs { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px }.club-tabs button { border:1px solid #ffffff22;border-radius:8px;background:#193321;color:#c7d8bb;min-height:38px;font-size:15px }.club-tabs button.active { color:#f6dfac;background:#445537;border-color:#b39b5a }.club .club-columns { display:block }.club .club-columns>section { height:100%;display:none!important }.club[data-tab="tables"] .club-tables,.club[data-tab="people"] .club-people,.club[data-tab="chat"] .club-chat { display:flex!important } }
@media(max-width:1000px) { .club-columns { grid-template-columns:1.2fr .8fr }.club-people { display:none!important }.club-section-title { flex-wrap:wrap }.controls-panel { grid-template-columns:auto 1fr;flex-basis:122px;min-height:122px;gap:6px 12px }.move-actions { grid-column:1/3;display:grid;grid-template-columns:1fr 1fr;gap:8px }.move-actions .button { width:100%;min-width:0;height:52px }.utility-button { width:34px;height:34px }.emoji-button span { font-size:25px }.move-description strong { font-size:17px }.move-description>span { font-size:12px }.toast { bottom:132px }.play-area { left:100px;right:42px;top:128px }.hand-toolbar>div { gap:10px } }
@media(max-width:700px) {
  .felt-grain { display:none }.court-frame { background:none }
  .card,.flying-card,.bot-card { box-shadow:0 2px 4px #0005 }
  .hand-card.selected,.hand-card.hint-card { box-shadow:0 2px 5px #0005;outline:2px solid #efbf4e }
  .pair,.pair.target,.pair.drag-target,.reaction-float { filter:none;transition:none }
  .pair.target .attack-card,.pair.drag-target .attack-card { outline:2px solid #efbf4e;outline-offset:1px }
  .modal::backdrop { backdrop-filter:none }
  .waiting .live-dot { animation:none }
  :root { --card-w:clamp(84px,18dvh,142px);--table-card-w:clamp(52px,10dvh,86px);--stock-w:40px;--hand-zone:calc(var(--card-h) + 54px) }
  .app-shell { padding:0 4px 4px }.topbar { flex-basis:50px;min-height:50px;gap:4px;padding:3px 2px }.brand strong { font-size:23px }.brand>span { font-size:25px }.top-actions { gap:3px }.top-actions .icon-button { width:36px;height:40px;border-radius:8px;font-size:21px }.top-actions .icon-button svg { width:21px;height:21px }.top-actions #help-button { display:none }
  body .felt,body .felt:has(.pairs),body.is-lobby .felt { --hand-zone:calc(var(--card-h) + 54px) }
  .table-frame { padding:5px }.table-hud { top:8px;left:10px;right:10px }.trump-chip>span { font-size:11px }.trump-chip strong { font-size:12px }.trump-chip .suit { font-size:24px }.round-chip { font-size:11px }.round-chip time { font-size:10px }
  .opponent-seat { width:150px;top:8px }.opponent-info strong { font-size:15px;max-width:94px }.opponent-info span:not(.avatar):not(.sr-only) { font-size:11px;max-width:100px }.bot-avatar { width:32px;height:32px;font-size:23px }.bot-hand { width:140px;height:35px;margin-top:4px }.bot-card { width:23px;height:34px }.bot-number { right:0;bottom:0;height:20px;min-width:20px;font-size:11px }
  .deck-area { top:62px;left:10px;width:65px }.deck-cards { height:60px }.deck-trump.card { --card-w:38px;--card-h:55px;left:16px;top:3px }.deck-back:after { font-size:17px }.deck-label { margin-top:4px;font-size:10px }.deck-label strong { font-size:14px }.discard-area { top:55px;right:10px;font-size:10px }
  .turn-pill,.is-online .turn-pill { top:84px;min-height:24px;padding:4px 8px;font-size:12px;max-width:76% }
  .play-area,.is-online .play-area { left:16px;right:16px;top:116px;bottom:calc(var(--hand-zone) + 6px) }
  .pairs,.pairs[data-count="2"] { grid-template-columns:repeat(3,calc(var(--table-card-w) + 18px));gap:6px 6px }.pairs[data-count="1"] { grid-template-columns:calc(var(--table-card-w) + 18px) }.pairs[data-count="2"] { grid-template-columns:repeat(2,calc(var(--table-card-w) + 18px)) }
  .felt:has(.pairs[data-count="3"]) { --table-card-w:min(10dvh,calc((100vw - 110px)/3)) }
  .felt:has(.pairs[data-count="4"]),.felt:has(.pairs[data-count="5"]),.felt:has(.pairs[data-count="6"]) { --table-card-w:clamp(36px,7dvh,65px);--card-w:clamp(76px,15dvh,120px) }
  .pair { width:calc(var(--table-card-w) + 18px);height:calc(var(--table-card-w)*1.46 + 13px) }.pair .defense-card { left:14px;top:11px }.pair.target:after { top:-18px;font-size:10px }.attack-drop.with-pairs { right:-8px;width:26px;height:40px }.attack-drop.with-pairs span { font-size:24px }
  .player-zone { left:8px;right:8px;bottom:5px }.hand-toolbar { height:30px }.hand-name { font-size:13px;gap:4px }.player-avatar { width:24px;height:24px;font-size:18px }.text-button { font-size:12px;min-height:30px }.text-button svg { width:15px;height:15px }.hand-toolbar>div { gap:9px }.player-hand { height:calc(var(--card-h) + 24px) }.card-corner { gap:1px }
  .controls-panel { padding:6px 8px;gap:5px 8px;border-radius:0 0 12px 12px;flex-basis:115px;min-height:115px }.move-actions .button { height:51px;font-size:20px }.move-actions .button svg { display:none }.move-description strong { font-size:16px }.move-description>span { font-size:11px }.utility-actions { gap:5px }.utility-button { width:34px;height:35px }.utility-button svg { width:21px;height:21px }
  .other-seats { top:47px;max-width:84%;gap:3px;flex-wrap:nowrap;width:100%;overflow:hidden }.seat-chip { font-size:10px;padding:3px 5px;flex-shrink:1;max-width:100px }.is-online .opponent-seat { top:7px }
  .is-spectator .play-area { bottom:25px }.is-spectator .controls-panel { flex-basis:56px;min-height:56px }
  .waiting-screen h1 { font-size:26px }.waiting-screen p { font-size:14px }.waiting-screen .button { min-width:0;width:85%;font-size:17px;height:46px }.waiting-players span { font-size:13px;padding:5px 8px }.waiting-screen { gap:8px;padding:12px }.room-code { font-size:28px }
  .start-screen .start-cards { height:150px;transform:scale(.46) }.start-screen h1 { font-size:42px }.start-screen p { font-size:17px }.start-choices .button { height:54px;font-size:20px }
  .club { padding:14px;border-radius:12px }.club h1 { font-size:26px }.club-heading p { font-size:12px;margin-bottom:12px }.club-name { margin-bottom:14px;font-size:12px;gap:6px }.club-name input { flex:1;width:0;min-width:0 }.club-name .small-button { font-size:12px;padding:8px }.small-button { font-size:13px;min-height:40px;padding:8px 10px }.club-heading .small-button { min-height:36px }
  .club-tabs { display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:15px }.club-tabs button { border:1px solid #ffffff22;background:#193321;color:#c7d8bb;border-radius:8px;min-height:40px;font-size:13px }.club-tabs button.active { color:#f6dfac;background:#445537;border-color:#b39b5a }.club-columns { display:block;position:relative;flex:1;min-height:0 }.club-columns>section { height:100%;gap:10px;display:none!important }.club[data-tab="tables"] .club-tables,.club[data-tab="people"] .club-people,.club[data-tab="chat"] .club-chat { display:flex!important }.club-section-title { flex-wrap:nowrap }.club h2 { font-size:17px }.club-section-title .small-button { font-size:11px;padding:7px }.room-row { padding:12px }.room-row>strong { font-size:16px }.chat-messages { padding:10px }.chat-message p { font-size:14px }.modal { padding:16px }.modal h2 { font-size:25px }.expanded-hand { grid-template-columns:repeat(auto-fill,104px);gap:14px }.expanded-hand .card { --card-w:104px;--card-h:151px }.toast { bottom:124px;font-size:14px }
}
@media(max-height:600px) and (max-width:700px) { :root { --card-w:15dvh;--hand-zone:calc(var(--card-h) + 40px);--table-card-w:9dvh }.player-hand { height:calc(var(--card-h) + 10px) }.play-area,.is-online .play-area { top:104px }.felt:has(.pairs[data-count="4"]),.felt:has(.pairs[data-count="5"]),.felt:has(.pairs[data-count="6"]) { --card-w:12dvh;--table-card-w:5dvh }.start-screen .start-cards { display:none }.controls-panel { flex-basis:100px;min-height:100px }.move-actions .button { height:43px } }
@media(min-height:601px) and (max-height:700px) and (max-width:700px) { .felt:has(.pairs[data-count="4"]),.felt:has(.pairs[data-count="5"]),.felt:has(.pairs[data-count="6"]) { --card-w:14dvh;--table-card-w:6.5dvh } }
@media(max-height:600px) { body .felt,body .felt:has(.pairs),body.is-lobby .felt { --hand-zone:calc(var(--card-h) + 40px) } }
@media(max-height:500px) and (min-width:701px) { :root { --card-w:22dvh;--hand-zone:calc(var(--card-h) + 40px);--table-card-w:16dvh;--stock-w:36px }.topbar { flex-basis:44px;min-height:44px }.brand strong { font-size:25px }.top-actions .icon-button { height:34px;width:36px }.controls-panel { grid-template-columns:auto 1fr auto;flex-basis:64px;min-height:64px }.move-actions { grid-column:auto;display:flex }.move-actions .button { width:auto;height:44px;min-width:130px }.opponent-seat { left:110px;top:6px }.bot-hand { display:none }.other-seats { top:10px;left:50%;max-width:55% }.turn-pill,.is-online .turn-pill { top:46px }.play-area,.is-online .play-area { top:80px;left:220px;right:18px;bottom:8px }.player-zone { left:12px;right:auto;width:200px;bottom:8px }.player-hand { height:calc(var(--card-h) + 8px) }.hand-toolbar>div { display:none }.deck-area { top:65px;left:12px }.deck-cards { height:54px }.deck-trump.card { --card-w:34px;--card-h:49px;left:15px }.deck-label { font-size:10px }.felt:has(.pairs[data-count="4"]),.felt:has(.pairs[data-count="5"]),.felt:has(.pairs[data-count="6"]) { --card-w:22dvh;--table-card-w:9dvh }.club-heading p { margin:2px 0 }.club-name { margin:5px 0 }.club { padding:10px }.chat-modal[open] { height:90dvh } }

/* Touch cards overlap by at most half their width and use two staggered rows.
   Extra-large hands scroll horizontally, preserving a readable exposed corner. */
.hand-gesture-help { display:none }
.touch-hand { --rail-card-w:clamp(82px,12dvh,104px) }
@media(min-width:701px) and (min-height:501px) { .touch-hand { --rail-card-w:clamp(110px,17dvh,164px) } }
body.touch-hand .felt,body.touch-hand .felt:has(.pairs) { --hand-zone:calc(var(--rail-card-w)*1.46 + 80px) }
.touch-hand .player-zone { --card-w:var(--rail-card-w);--card-h:calc(var(--card-w)*1.46);height:var(--hand-zone) }
.touch-hand .player-hand { display:block;height:calc(var(--rail-card-w)*1.46 + 27px);padding:0;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:none;overflow-anchor:none }
.touch-hand .player-hand:after { content:"";position:absolute;left:calc(var(--hand-content-w,100%) - 1px);top:0;width:1px;height:1px;pointer-events:none }
.touch-hand .player-hand::-webkit-scrollbar { display:none }
body.touch-hand .player-hand .hand-card { --card-w:var(--row-card-w,var(--rail-card-w));--card-h:calc(var(--card-w)*1.46);position:absolute;left:var(--hand-x,8px);top:var(--hand-y,13px);width:var(--card-w);height:var(--card-h);transform:none;transform-origin:center;touch-action:pan-x;z-index:var(--z,1);transition:transform .12s ease-out }
body.touch-hand .player-hand .hand-card.selected { transform:translateY(calc(-8px - var(--row-lift,0px)));z-index:250;outline:2px solid #efbf4e;box-shadow:0 2px 4px #0005 }
.touch-hand .hand-gesture-help { display:block;text-align:center;white-space:nowrap;font-size:10px;color:#c2d0b3;padding-top:3px;pointer-events:none }
.is-online #hint-button { display:none!important }

/* Stock and face-up trump are 1.8 times their former dimensions. */
:root { --stock-w:115.2px }
.deck-area { width:176.4px }
.deck-cards { height:176.4px }
.deck-trump.card { --card-w:104.4px;--card-h:151.2px;left:45px;top:14.4px }
.deck-back:after { font-size:45px }
@media(min-width:701px) and (min-height:501px) { .play-area { left:210px } }
@media(max-width:700px) {
  :root { --stock-w:72px }
  .deck-area { top:62px;width:117px }
  .deck-cards { height:108px }
  .deck-trump.card { --card-w:68.4px;--card-h:99px;left:28.8px;top:5.4px }
  .deck-back:after { font-size:30.6px }
  .opponent-seat { left:calc(50% + 42px) }
  .turn-pill,.is-online .turn-pill { left:calc(50% + 42px);max-width:55% }
}
@media(max-width:700px) and (min-height:780px) {
  .play-area,.is-online .play-area { top:192px }
}
@media(max-width:700px) and (max-height:779px) {
  .play-area,.is-online .play-area { left:130px;right:12px }
  .felt:has(.pairs[data-count="3"]),.felt:has(.pairs[data-count="4"]),.felt:has(.pairs[data-count="5"]),.felt:has(.pairs[data-count="6"]) { --table-card-w:min(6dvh,calc((100vw - 218px)/3),calc((100dvh - var(--hand-zone) - 334px)/2.92)) }
}
@media(max-width:700px) and (max-height:600px) {
  .touch-hand { --rail-card-w:70px }
  .felt:has(.pairs[data-count="3"]),.felt:has(.pairs[data-count="4"]),.felt:has(.pairs[data-count="5"]),.felt:has(.pairs[data-count="6"]) { --table-card-w:min(5dvh,calc((100vw - 218px)/3),calc((100dvh - var(--hand-zone) - 307px)/2.92)) }
}
@media(max-height:500px) and (min-width:701px) {
  :root { --stock-w:64.8px }
  .deck-area { top:8px;left:12px;width:117px }
  .deck-cards { height:97.2px }
  .deck-trump.card { --card-w:61.2px;--card-h:88.2px;left:27px;top:3.6px }
  .deck-label { position:absolute;left:132px;top:55px;width:70px;margin:0;white-space:nowrap;font-size:9px }
  .deck-label strong { font-size:14px }
  .table-hud .trump-chip { margin-left:128px }
  .opponent-seat { left:calc(50% + 70px);width:200px }
  .touch-hand .player-zone { height:calc(var(--rail-card-w)*1.46 + 30px) }
  .touch-hand .hand-toolbar { display:none }
  .touch-hand .hand-gesture-help { display:none }
}
@supports (height:1cqh) {
  .play-area { container-type:size;--pair-height-tax:44px;--pair-width-tax:100px }
  .pairs[data-count="4"],.pairs[data-count="5"],.pairs[data-count="6"] { --table-card-w:min(7dvh,calc((100cqh - var(--pair-height-tax))/2.92),calc((100cqw - var(--pair-width-tax))/3)) }
  @media(max-width:700px) { .play-area { --pair-height-tax:32px;--pair-width-tax:66px } }
}

/* The turn label is 1.8 times larger, with a measured gap below opponents. */
.turn-pill,.is-online .turn-pill { --turn-top:124px;top:max(var(--turn-top),var(--turn-content-bottom,0px));width:max-content;min-height:50.4px;padding:9px 21.6px;font-size:25.2px;line-height:1.2;gap:12.6px;max-width:calc(100% - 32px);white-space:normal;text-align:center;overflow-wrap:anywhere;overflow:visible }
.turn-pill .live-dot { width:10.8px;height:10.8px }
.play-area,.is-online .play-area { --field-top:128px;top:max(var(--field-top),var(--turn-bottom,0px)) }
.is-online .play-area { --field-top:138px }
.drag-hint { max-width:calc(100% + 12px);white-space:normal;text-align:center;overflow-wrap:anywhere }
.court-frame { inset:19% 23%;opacity:1;background:none }
.court-art { width:82%;height:78%;transform:translateY(-6%) }
.court-art svg { stroke-width:1.8 }
.court-name { position:absolute;bottom:3%;left:0;right:0;text-align:center;text-transform:uppercase;letter-spacing:.02em;font:700 calc(var(--card-w)*.087) Georgia,serif }
@media(max-width:700px) {
  .turn-pill,.is-online .turn-pill { --turn-top:106px;left:calc(50% + 65px);max-width:calc(100% - 142px);min-height:43.2px;padding:7.2px 14.4px;font-size:21.6px }
  .play-area,.is-online .play-area { --field-top:116px }
}
@media(max-width:360px) { .turn-pill .live-dot { display:none } }
@media(max-width:700px) and (min-height:780px) { .play-area,.is-online .play-area { --field-top:192px } }
@media(max-width:700px) and (max-height:700px) {
  body.touch-hand .felt,body.touch-hand .felt:has(.pairs) { --hand-zone:calc(var(--rail-card-w)*1.46 + 50px) }
  .touch-hand .hand-gesture-help { display:none }
}
@media(max-height:500px) and (min-width:701px) {
  .turn-pill,.is-online .turn-pill { --turn-top:62px }
  .play-area,.is-online .play-area { --field-top:80px }
}
@supports(height:1cqh) {
  .pairs[data-count="1"] { --table-card-w:min(12dvh,calc((100cqh - 18px)/1.46),calc(100cqw - 26px)) }
  .pairs[data-count="2"] { --table-card-w:min(10dvh,calc((100cqh - 18px)/1.46),calc((100cqw - 58px)/2)) }
  .pairs[data-count="3"] { --table-card-w:min(9dvh,calc((100cqh - 18px)/1.46),calc((100cqw - 90px)/3)) }
}
#fullscreen-button { position:relative }
.is-fullscreen.mobile-fullscreen .app-shell { padding-top:env(safe-area-inset-top,0px);padding-bottom:max(4px,env(safe-area-inset-bottom,0px));padding-left:max(4px,env(safe-area-inset-left,0px));padding-right:max(4px,env(safe-area-inset-right,0px)) }
#fullscreen-button.fullscreen-suggested { color:#f0cb71;border-color:#bc985e }
#fullscreen-button.fullscreen-suggested:after { content:"";position:absolute;inset:-2px;border:2px solid #edc777;border-radius:inherit;pointer-events:none;animation:fullscreen-invite 2.4s ease-in-out infinite }
@keyframes fullscreen-invite { 0%,100% { transform:scale(1);opacity:.8 } 55% { transform:scale(1.12);opacity:.15 } }
.reduce-motion #fullscreen-button:after { animation:none }
@media(prefers-reduced-motion:reduce) { #fullscreen-button:after { animation:none!important } }
@media(max-width:360px) { .top-actions .icon-button { width:32px }.brand strong { font-size:22px }.brand>span { font-size:23px } }

/* Emerald & walnut skin. Layout, card sizes and interaction transforms live in
   styles.css/responsive.css; this file deliberately leaves them unchanged. */
:root {
  --page:#090c0a; --text:#f4ecd7; --muted:#bdb398;
  --gold:#e9be68; --line:#bd91413d;
  --panel:linear-gradient(155deg,#20221d,#0c100e 64%,#080c0a);
  --metal:linear-gradient(115deg,#76501e,#e5bd70 25%,#9e7133 58%,#edce8a 82%,#704e25);
  --paper:radial-gradient(ellipse at 35% 25%,#fffaf0 0,#f7eedc 57%,#e8d8b9 100%);
}
body { background:#090c0a; color:var(--text) }
.app-shell { background:linear-gradient(#090c0ae8,#090c0ad4),url('assets/art/walnut.webp') center/512px 512px }
.topbar { background:linear-gradient(180deg,#151710,#080b09);box-shadow:0 1px #b28b454d,0 3px 10px #0008 }
.brand { color:#f0cc7e;text-shadow:0 1px 2px #000 }
.brand>span { color:transparent;text-shadow:none;background:url('assets/art/crown.svg') center/contain no-repeat }
.brand strong { color:#f0d494 }
@media(max-width:700px){.brand strong{font-size:18px;line-height:1.05;max-width:75px;white-space:normal}.brand{flex-shrink:0}.brand>span{font-size:25px}}
.icon-button,.utility-button { color:#e7cd94;border-color:#aa85464d;background:var(--panel);box-shadow:inset 0 1px #e6ce9226,0 2px 3px #0006 }
.icon-button:hover,.utility-button:hover { color:#ffe3a6;background:linear-gradient(#343126,#171b15);border-color:#caa05e99 }
#chat-button { font-size:0 }
#chat-button:before { content:"";display:block;width:23px;height:23px;background:url('assets/art/chat.svg') center/contain no-repeat }
.game-panel { background:#110f0b;box-shadow:0 10px 35px #0009 }
.table-frame { background:linear-gradient(90deg,#0005,transparent 22%,#0003 70%,#0009),url('assets/art/walnut.webp') center/512px 512px;box-shadow:inset 0 1px #ebca7a,inset 0 3px #65451f,inset 0 4px #d5a85588,inset 1px 0 #b98b4580,inset -1px 0 #b98b4580,0 -1px #231a0d }
body .felt { background-color:#06402c;background-image:radial-gradient(ellipse at 50% 36%,#00392210 10%,#001e15a6 100%),url('assets/art/felt.webp');background-size:100% 100%,440px 440px;box-shadow:inset 0 0 0 1px #ac834152,inset 0 0 16px 5px #00150ed9,0 0 0 1px #030a06 }
.felt-grain { display:none }
.table-line { border-color:#c497484d;box-shadow:0 0 0 1px #001b1299 }
.felt:before,.felt:after { content:"";position:absolute;width:145px;height:145px;background:url('assets/art/table-ornament.svg') top left/contain no-repeat;pointer-events:none;z-index:-1;opacity:.62 }
.felt:before { left:3px;top:3px }
.felt:after { right:3px;bottom:3px;transform:rotate(180deg) }
.trump-chip,.round-chip { background:#080d09c2;box-shadow:0 0 0 6px #080d09c2,0 0 0 7px #c69b4d40;border-radius:4px }
.trump-chip>span,.round-chip,.round-chip time { color:#cfc0a0 }
.trump-chip strong,.round-chip strong { color:#f3e5c4 }
.trump-chip .red { color:#f1b5a4 }
.avatar { background:radial-gradient(circle at 40% 25%,#353a27,#0d1510);border-color:#d3a756b3;box-shadow:inset 0 1px #fde4ac40,0 2px 4px #0006 }
.opponent-info strong,.hand-name { color:#f4ecd7;text-shadow:0 1px 2px #00170e }
.opponent-info span:not(.avatar):not(.sr-only) { color:#cfc5a8 }
.bot-number,.hand-name strong { background:linear-gradient(#18271a,#07160e);border-color:#caa056a3;color:#f2d99e;box-shadow:inset 0 1px #f3d68f1f,0 2px 3px #0004 }
.deck-label,.discard-area { color:#cbbd9d;text-shadow:0 1px 3px #00120c }
.deck-label strong { color:#f6e1b5 }
.empty-deck,.discard-placeholder { color:#bd9d5b80;border-color:#b3985e45 }
.turn-pill,.turn-pill.waiting { background:linear-gradient(180deg,#13251bf2,#08180ff2);color:#f3d99c;box-shadow:inset 0 0 0 1px #bc95575e,inset 0 1px #f6dfa128,0 3px 8px #0005;text-shadow:0 1px 2px #0007 }
.live-dot { background:#f0cb7b;box-shadow:0 0 4px #e7b95855 }
.table-watermark span { color:#9eac6342;text-shadow:0 1px #ddc87716 }
.table-watermark:before { content:"";position:absolute;left:50%;top:50%;width:148px;height:148px;transform:translate(-50%,-50%);border:1px solid #c6a35b30;border-radius:50%;box-shadow:0 0 0 8px #b69b4d05,inset 0 0 0 5px #b69b4d05 }
.table-watermark:after { content:"✧";position:absolute;left:50%;top:calc(50% + 75px);transform:translate(-50%,-50%);font:22px Georgia,serif;color:#c6a35b70 }
.card,.welcome-card { background:var(--paper);color:#131b18;box-shadow:inset 0 0 0 1px #fff7de99,inset 0 -1px 2px #a1834c50,0 1px 0 #b7a586,0 3px 6px #0006 }
.card.red,.welcome-card.red { color:#b82320 }
.card-face:before { content:attr(data-face-label);position:absolute;left:8%;top:5%;font:700 calc(var(--card-w)*.23)/1.05 Georgia,serif;white-space:pre }
.card-face-art { position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none;user-select:none }
.card-corner { text-shadow:0 .3px currentColor }
.court-frame { inset:16% 22%;border:1px solid #a08047;border-radius:1px;opacity:1;background:#f5ebd5;box-shadow:0 0 0 1px #f9f0dc }
.court-frame:before { display:none }
.court-art { display:block;width:100%;height:100%;transform:none;background-image:url('assets/art/courts.webp');background-repeat:no-repeat;background-size:300% 100%;background-position:0 50% }
.court-art svg { display:none }
.court-12 .court-art { background-position:50% 50% }
.court-13 .court-art { background-position:100% 50% }
.court-name { bottom:-12%;color:currentColor;font-size:calc(var(--card-w)*.065);letter-spacing:.06em;text-shadow:none }
.trump-mark { color:#a47726;text-shadow:0 1px #ffedb9 }
.card-back { background:#151a16 url('assets/art/card-back.svg') center/100% 100% no-repeat;border-color:#ecdbb9;box-shadow:inset 0 0 0 1px #b99150,0 2px 5px #0009 }
.card-back:before,.card-back:after { display:none }
.deck-back { box-shadow:1px 2px 0 #b7a282,2px 3px 0 #f0e1c5,3px 4px 0 #867453,4px 5px 0 #e6d2ad,5px 7px 0 #6c5c41,0 9px 12px #0007 }
.hand-card.selected,.hand-card.hint-card { outline-color:#f6ce77;box-shadow:0 0 0 2px #f6ce77,0 3px 8px #0007 }
.text-button { color:#e1c998 }
.text-button:hover { color:#ffe4a6 }
.hand-gesture-help { color:#c5ba98 }
.attack-drop { color:#e6c382;border-color:#d2b47499;background:#d7b05a0a }
.attack-drop:hover,.attack-drop.drag-target { background:#e9c06b24;border-color:#ffe0a1 }
.pair.target:after,.drag-hint,.hand-peek { background:#0b1b11f5;color:#ffe4ac;border-color:#bd995e80;box-shadow:0 2px 6px #0006 }
.play-area.drag-active { outline-color:#e7c87b55 }
.play-area.drag-over { outline-color:#e9ce8b }
.controls-panel { background:linear-gradient(#050806df,#090b08b8),url('assets/art/walnut.webp') center/512px 512px;border-top-color:#d3a45388;box-shadow:inset 0 1px #f9dc8d1f,0 -3px 8px #0005 }
.move-description strong { color:#f3e6c9 }
.move-description>span { color:#c9ba99 }
.primary,.small-button.gold { color:#2a1c0b;border-color:#e8c77f;background:linear-gradient(135deg,#f8d990,#efbf62 46%,#c68c35);box-shadow:inset 0 1px #fff3cc,inset 0 -2px #b2802b,0 3px 0 #68471d,0 5px 10px #0006;text-shadow:0 1px #ffe6ac70 }
.primary:hover:not(:disabled),.small-button.gold:hover { background:linear-gradient(135deg,#ffe6ab,#f5cd7c 46%,#dda849) }
.secondary,.small-button,.sound-preview { color:#efdcba;border-color:#a590665e;background:linear-gradient(150deg,#2d2c24,#141914 42%,#0d100e);box-shadow:inset 0 1px #f2deb328,0 3px 0 #060a07,0 5px 9px #0005 }
.secondary:hover:not(:disabled),.small-button:hover,.sound-preview:hover { background:linear-gradient(150deg,#413a2a,#252b20 42%,#171d16);border-color:#d5b36b99 }
.secondary.take-action { color:#ffe6bb;border-color:#d5a35f;background:linear-gradient(145deg,#8b4f24,#563418);box-shadow:inset 0 1px #efc08255,0 3px 0 #281c0f }
.secondary.take-action:hover:not(:disabled) { background:linear-gradient(145deg,#a5642c,#71441e) }
.primary:disabled,.secondary:disabled { color:#a69e88;border-color:#82765445;background:linear-gradient(#292c24,#161e16);box-shadow:inset 0 1px #d8c69612,0 2px 0 #10160f;opacity:.75;text-shadow:none }
.emoji-menu,.modal,.toast,.round-banner { background:linear-gradient(145deg,#24271dfc,#0c1410fc 65%);border-color:#c29c58a3;color:#f0e4ca;box-shadow:inset 0 1px #ffe3a529,0 12px 32px #0009 }
.emoji-menu button { background:#e0bd6710 }
.emoji-menu button:hover { background:#e0bd672a }
.round-banner { color:#f9d78d }
.round-banner small,.modal-intro,.rules-list span,.rule-variant,.settings-note,.help-controls p,.toggle-field small,.result-modal>p { color:#c4b99f }
.modal h2,.modal-top,.rules-list strong,.setting-field>span,.toggle-field strong { color:#f0dfba }
.modal::backdrop { background:#020704ce;backdrop-filter:none }
.setting-field input:not([type=range]),.setting-field select,.club input,.chat-form input { background:#090f0c;color:#f5ead0;border-color:#aa894b66 }
.setting-field select option { background:#121b14 }
.help-controls,.result-details { border-color:#bb965c38;background:#d3b06a05 }
.result-details strong { color:#f1d294 }
.club { background:linear-gradient(135deg,#1e281d,#0c1711);border-color:#ac884c77 }
.club h1,.club h2 { color:#f2ddb3 }
.club-heading p,.room-row p,.room-row-footer,.person-row small,.chat-empty,.chat-note { color:#c1b79d }
.club-tabs button,.room-row,.chat-messages { background:#0d1d14;border-color:#ab8b4d45;color:#ded1b2 }
.club-tabs button.active { color:#ffe2a3;background:linear-gradient(#4b4229,#252a1a);border-color:#c9a259 }
.chat-author { color:#e9c783 }
.chat-author time { color:#a3997c }
.chat-message p { color:#e9dfc9 }
.seat-chip,.waiting-players span { background:#0a1a11e8;border-color:#ae8b4c66;color:#eedebd }
.seat-chip.defending { border-color:#f0cc7e }
.seat-chip.attacking { background:#394329 }
.waiting-screen p { color:#cdbf9d }
.room-code { color:#f3d490 }
#fullscreen-button.fullscreen-suggested { color:#f6d58e;border-color:#c49a50 }
.club-heading>div:first-child { min-width:0 }
.club-heading-actions { display:flex;align-items:center;gap:8px;flex-shrink:0 }
#club-close { width:42px;height:42px;flex-shrink:0 }
#club-close svg { width:23px;height:23px }
.panel-close { display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0 }
.panel-close svg { width:18px;height:18px }
.modal-top { position:sticky;top:-16px;z-index:10;background:#141d15;box-shadow:0 8px 10px #141d15 }
.club-columns { display:flex }
body .club .club-columns .club-tables { display:flex!important;width:100%;height:100% }
.game-mode-label { display:block;font-size:11px;line-height:1.4;color:#d5b879 }
#chat-button { position:relative;overflow:visible }
.chat-unread { position:absolute;right:-4px;top:-5px;min-width:19px;height:19px;padding:0 4px;border:1px solid #ffd98a;border-radius:12px;background:#a82c23;color:#fff5d9;font:700 11px/17px system-ui,sans-serif;text-align:center;box-shadow:0 1px 4px #0008;pointer-events:none }
#chat-button.has-unread { color:#ffe1a1;border-color:#d4a34f;box-shadow:0 0 8px #d7ac4a45 }
.turn-detail { flex-basis:100%;font-size:13px;line-height:1.35;font-weight:400;color:#f6dfb0 }
.turn-pill.connection-alert { flex-wrap:wrap;justify-content:center;gap:6px 10px;border:1px solid #d6a751;border-radius:18px;max-width:min(560px,calc(100% - 32px));font-size:21px }
@media(max-width:700px) { .turn-pill.connection-alert { max-width:calc(100% - 142px);font-size:17px }.turn-detail { font-size:12px } }
.people-modal { width:720px }
.people-columns { display:grid;grid-template-columns:1fr 1fr;gap:18px }
.people-columns h2 { font-size:18px;margin:5px 0 12px }
.people-list { max-height:35dvh;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin }
.people-note { font-size:12px;line-height:1.5;color:#bdb398;margin:12px 0 0 }
.invite-person { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #bd91412b }
.invite-person-info { min-width:0 }
.invite-person-info strong { display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px }
.invite-person-info small { display:block;font-size:11px;color:#c3b797 }
.invite-person-actions { display:flex;gap:4px;flex-shrink:0 }
.invite-person-actions .small-button { font-size:12px;min-height:38px;padding:7px 9px }
.people-modal #people-status { font-size:13px;line-height:1.5;color:#efce8b }
.people-modal .setting-field { margin:14px 0 }
.people-modal .setting-field input { width:100% }
.incoming-invites { position:fixed;top:68px;right:12px;max-width:calc(100vw - 24px);z-index:200 }
.incoming-invite { display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:390px;padding:14px;margin-bottom:8px;background:#132218f5;border:1px solid #bf9658;border-radius:12px;box-shadow:0 4px 20px #0008;font-size:14px }
.incoming-invite>span { flex-basis:100% }
@media(max-width:600px) {
  .people-columns { grid-template-columns:1fr;gap:16px }
  .people-list { max-height:22dvh }
  .people-modal { max-height:calc(100dvh - 24px);overflow:auto }
  .people-modal .modal-top { margin-bottom:14px }
  .invite-person-actions .small-button { font-size:11px;padding:7px 8px }
  .game-mode-label { font-size:9px }
}
@media(max-width:700px),(pointer:coarse) {
  .modal::backdrop { backdrop-filter:none }
  .pair.target,.pair.drag-target { filter:none;outline:1px solid #f1c875;outline-offset:4px }
  .hand-card { contain:layout style }
  .card,.flying-card,.bot-card { box-shadow:inset 0 0 0 1px #fff7de66,0 1px 0 #b4a17e,0 2px 4px #0007 }
  .deck-back { box-shadow:1px 2px 0 #b7a282,2px 3px 0 #eedfc4,3px 4px 0 #877656,0 5px 7px #0008 }
  .felt:before,.felt:after { width:100px;height:100px;opacity:.5 }
  .table-watermark:before { width:126px;height:126px }
  .table-watermark:after { top:calc(50% + 64px) }
  .hand-card.selected,.hand-card.hint-card { outline-color:#f6ce77;box-shadow:0 2px 5px #0007 }
}

.invitation-modal{width:560px;max-width:calc(100vw - 24px)}.share-text{width:100%;resize:vertical;min-height:105px;max-height:28dvh;border:1px solid #aa894b66;border-radius:9px;background:#090f0c;color:#f5ead0;padding:12px;font:14px/1.5 system-ui,sans-serif}.share-actions{display:flex;gap:8px;flex-wrap:wrap}.share-actions>*{min-height:44px;flex:1 1 130px;text-align:center;text-decoration:none}.share-status{font-size:13px;color:#efce8b;min-height:1.5em}.invitation-modal .settings-note{font-size:12px;line-height:1.5;color:#c4b99f}.empty-table-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.empty-table-actions button{min-height:44px}.empty-table-message{font-size:14px;color:#d6c6a4;margin:12px 0}.empty-table-title{font-size:18px;color:#f2dfb8}.invitation-modal textarea:focus-visible{outline:2px solid #edc777;outline-offset:3px}

.language-select{width:52px;min-width:48px;height:42px;padding:0 5px;border:1px solid #ad8a465e;border-radius:9px;background:#111710;color:#efd395;font:700 12px/1.2 'Segoe UI',Arial,sans-serif;cursor:pointer;flex-shrink:0;color-scheme:dark}.language-select:focus-visible{outline:2px solid #f0c975;outline-offset:3px}.language-select option{background:#111710;color:#f5dfb5}.language-field{display:flex;align-items:center;justify-content:space-between;gap:16px}.language-field .language-select{width:140px}.language-status{position:fixed;z-index:500;left:50%;bottom:20px;transform:translateX(-50%);max-width:calc(100vw - 24px);padding:12px 16px;border:1px solid #d3ac61;border-radius:10px;background:#152015;color:#f3d99c;font:14px/1.5 system-ui,sans-serif}.language-status:empty{display:none}
@media(max-width:600px){.header-inner{gap:8px}.header-actions{gap:8px}.site-header .language-select{height:40px;width:47px;min-width:47px}.brand-lockup{font-size:18px;gap:7px}.site-header .brand-lockup>.icon{width:28px;height:28px}}
@media(max-width:359px){.site-header .guest-link{display:none}.site-header .brand-lockup{font-size:16px}.site-header .language-select{width:45px;min-width:45px}}
@media(max-width:700px){.top-actions .language-select{height:38px;width:43px;min-width:43px;font-size:11px}.topbar .brand strong{font-size:20px}.topbar .brand>span{display:none}.top-actions .icon-button{width:32px}}
@media(max-width:650px){.game-header nav{gap:4px}.game-header nav .icon-button{width:32px;height:36px}.game-header .language-select{width:43px;min-width:43px;height:36px;font-size:11px}}
@media(max-width:359px){.top-actions{gap:2px}.top-actions .icon-button{width:28px}.top-actions .icon-button svg{width:19px;height:19px}}