:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,sans-serif;--bg: #f7f5f1;--surface: #fffdfa;--surface-2: #ffffff;--ink: #15181d;--muted: #676d75;--line: #d8d4cc;--table: #fffdfa;--team: #347d57;--opponent: #a43d4a;--accent: #8d313b;--gold: #b88627;--motion-duration: .32s;--turn-duration: .52s;--card-scale: 1;background:var(--bg);touch-action:manipulation;-webkit-text-size-adjust:100%}:root.dark{color-scheme:dark;--bg: #0d1014;--surface: #171c22;--surface-2: #20262e;--ink: #f3f1ed;--muted: #a8adb8;--line: #3a414c;--table: #171c22;--team: #55bb83;--opponent: #e36977;--accent: #ed7481;--gold: #e6b451}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}html,body,#root{width:100%;height:100%;min-height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--bg)}button,input,select{color:inherit;font:inherit}button{border:0;cursor:pointer}button:disabled{cursor:default;opacity:.45}.multiplayer-maintenance:disabled{opacity:1;border-style:dashed;color:var(--muted)}.app-shell{position:fixed;inset:0;min-height:100dvh;overflow:hidden;color:var(--ink);background:var(--bg)}.primary,.secondary,.text-button,.room-actions button,.status-lane button,.tutorial-panel button,.leave-card button,.coach-card button{min-height:44px;border-radius:14px;font-weight:750;transition:transform var(--motion-duration) cubic-bezier(.2,.8,.2,1),background var(--motion-duration) ease,color var(--motion-duration) ease}button:active{transform:scale(.97)}.primary{color:#fff;background:var(--ink)}:root.dark .primary{color:#0d1116;background:#f3f0eb}.secondary{border:1px solid var(--line);color:var(--ink);background:transparent}.wide{width:100%}.text-button{color:var(--accent);background:transparent}.icon-button{display:grid;width:48px;height:48px;padding:12px;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--ink);background:var(--surface);transition:transform var(--motion-duration) cubic-bezier(.2,.8,.2,1),color var(--motion-duration) ease,box-shadow var(--motion-duration) ease}.icon-button svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.icon-button.active{color:var(--team);box-shadow:0 0 0 4px color-mix(in srgb,var(--team) 18%,transparent);animation:coach-pulse 1.8s ease-in-out infinite}.icon-button.lesson-available{position:relative;color:var(--team)}.icon-button.lesson-available:after{position:absolute;top:5px;right:5px;width:9px;height:9px;border:2px solid var(--surface);border-radius:50%;background:var(--team);content:""}.icon-button.lesson-available[aria-expanded=false]{animation:coach-pulse 1.8s ease-in-out infinite}.menu-slot{display:block;width:48px;height:48px;flex:0 0 48px}.global-menu-button{position:fixed;z-index:302;top:max(14px,calc(env(safe-area-inset-top) + 8px));left:max(18px,calc(env(safe-area-inset-left) + 14px));box-shadow:0 7px 22px color-mix(in srgb,var(--ink) 13%,transparent)}.global-menu-backdrop{position:fixed;z-index:300;inset:0;padding:max(74px,calc(env(safe-area-inset-top) + 62px)) 18px max(18px,env(safe-area-inset-bottom));background:color-mix(in srgb,var(--ink) 40%,transparent);backdrop-filter:blur(7px);animation:menu-backdrop-in var(--motion-duration) ease both}.global-menu-panel{display:grid;width:min(100%,390px);max-height:100%;gap:14px;overflow-y:auto;padding:20px;border:1px solid var(--line);border-radius:24px;color:var(--ink);background:var(--surface);box-shadow:0 24px 70px color-mix(in srgb,#000 34%,transparent);animation:menu-panel-in var(--motion-duration) cubic-bezier(.2,.9,.2,1) both}.global-menu-panel header span{display:grid;gap:2px}.global-menu-panel header small,.rules-live-summary>small{color:var(--opponent);font-size:11px;font-weight:850;letter-spacing:.15em}.global-menu-panel header b{font-size:28px;letter-spacing:-.03em}.global-menu-panel nav,.menu-settings{display:grid}.menu-navigation,.menu-secondary{display:flex;min-height:48px;align-items:center;gap:10px;padding:0 14px;border:1px solid var(--line);border-radius:14px;color:var(--ink);background:var(--surface-2);font-weight:800;text-decoration:none}.menu-navigation svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.menu-settings{overflow:hidden;border:1px solid var(--line);border-radius:16px}.menu-settings h2{margin:0;padding:13px 14px 8px;color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase}.menu-toggle,.menu-slider{min-height:48px;padding:11px 14px;border-top:1px solid var(--line)}.menu-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;font-weight:720}.menu-toggle input{width:22px;height:22px;accent-color:var(--team)}.menu-slider{display:grid;gap:9px}.menu-slider>span{display:flex;justify-content:space-between;font-weight:720}.menu-slider output{color:var(--muted);font-variant-numeric:tabular-nums}.menu-slider input{width:100%;accent-color:var(--team)}.menu-secondary{justify-content:center;background:transparent}@keyframes menu-backdrop-in{0%{opacity:0}}@keyframes menu-panel-in{0%{opacity:0;transform:translateY(-12px) scale(.98)}}@keyframes coach-pulse{50%{transform:scale(1.06)}}.home-screen{display:grid;height:100dvh;padding:max(18px,env(safe-area-inset-top)) 20px max(18px,env(safe-area-inset-bottom));grid-template-rows:auto minmax(0,1fr) auto auto;gap:18px;overflow:hidden;background:radial-gradient(circle at 80% 16%,color-mix(in srgb,var(--team) 12%,transparent),transparent 35%),var(--bg)}.home-tools,.sheet-header,.game-header{display:flex;align-items:center;justify-content:space-between}.brand-tile{display:grid;width:50px;height:50px;place-items:center;border-radius:13px;color:var(--surface);background:linear-gradient(145deg,var(--team),#197f51);font-family:Georgia,serif;font-size:30px;box-shadow:0 9px 25px color-mix(in srgb,var(--team) 25%,transparent)}.eyebrow{margin:0 0 10px;color:var(--opponent);font-size:12px;font-weight:850;letter-spacing:.18em}.hero h1{max-width:680px;margin:0;font-size:clamp(52px,15vw,84px);line-height:.9;letter-spacing:-.075em}.hero>p:last-child{max-width:620px;margin:22px 0 0;color:var(--muted);font-size:clamp(17px,4.8vw,22px);line-height:1.42}.home-actions{display:grid;gap:9px}.home-actions button{min-height:54px;padding:10px 18px;text-align:center}.home-actions .secondary{text-align:left}.home-actions small{display:block;margin-top:3px;color:var(--muted);font-size:12px;font-weight:520}.home-proof{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;letter-spacing:.15em}.sheet-screen{height:100dvh;padding:max(14px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:none;background:var(--bg)}.sheet-header{min-height:54px;margin-bottom:18px}.sheet-header h1{margin:0;font-size:22px}.header-spacer{width:48px}.settings-card,.profile-card,.room-code-card,.lobby-controls,.rules-reference{overflow:hidden;border:1px solid var(--line);border-radius:22px;background:var(--surface)}.toggle-row,.select-row,.speed-row{display:flex;min-height:72px;padding:14px 16px;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}.settings-card>:last-child{border-bottom:0}.toggle-row span,.select-row span{display:grid;gap:4px}.toggle-row small,.select-row small,.speed-row small{color:var(--muted);font-size:12px;line-height:1.25}.toggle-row input{width:48px;height:28px;accent-color:var(--team)}.select-row select{min-width:72px;padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}.speed-row{display:grid}.speed-row span{display:flex;justify-content:space-between}.speed-row input{width:100%;accent-color:var(--team)}.sheet-intro{margin:-4px 2px 16px;color:var(--muted);line-height:1.45}.preset-grid{display:grid;margin-bottom:14px;grid-template-columns:1fr 1fr;gap:9px}.preset-grid button{min-height:92px;padding:13px;border:1px solid var(--line);border-radius:16px;text-align:left;background:var(--surface)}.preset-grid button.active{border-color:var(--team);box-shadow:inset 0 0 0 1px var(--team)}.preset-grid small{display:block;margin-top:6px;color:var(--muted);font-size:11px;line-height:1.25}.rules-reference{margin-top:14px;padding:16px}.rules-reference h2{margin:0 0 12px}.rules-reference p{margin:9px 0;color:var(--muted);line-height:1.4}.rules-live-summary{margin:16px 0;padding:18px;border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));border-radius:22px;background:color-mix(in srgb,var(--accent) 6%,var(--surface))}.rules-live-summary h2{margin:6px 0 12px}.rules-live-summary p{margin:0 0 10px;color:var(--muted);line-height:1.46}.rules-live-summary p:last-child{margin-bottom:0}.profile-card{padding:16px}.profile-card label{display:grid;gap:8px;color:var(--muted);font-size:12px;font-weight:700}.profile-card input,.join-row input{min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:var(--surface-2);-webkit-user-select:text;user-select:text}.profile-card>p{margin:18px 0 10px;color:var(--muted);font-size:12px;font-weight:700}.avatar-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.avatar-picker button{display:grid;aspect-ratio:1;padding:8px;place-items:center;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}.avatar-picker button.active{border-color:var(--team);box-shadow:inset 0 0 0 2px var(--team)}.avatar-picker span{width:100%;height:100%;background:var(--team)}.room-actions{display:grid;margin-top:14px;gap:10px}.room-actions button{padding:0 18px}.join-row{display:grid;grid-template-columns:1fr auto;gap:8px}.join-row input{font-weight:850;letter-spacing:.15em;text-transform:uppercase}.connection-note,.waiting-note{color:var(--muted);text-align:center}.room-code-card{padding:20px;text-align:center}.room-code-card small{color:var(--muted);letter-spacing:.14em}.room-code-card strong{display:block;margin:8px;font-size:44px;letter-spacing:.16em}.room-code-card p{margin:0;color:var(--muted);font-size:13px}.connection-dot{width:12px;height:12px;margin:18px;border-radius:50%;background:var(--muted)}.connection-dot.connected{background:var(--team)}.connection-dot.reconnecting{background:var(--gold)}.connection-dot.offline{background:var(--opponent)}.seat-list{display:grid;margin:14px 0;grid-template-columns:1fr 1fr;gap:9px}.seat-list>div{display:grid;min-height:82px;padding:10px;grid-template-columns:46px 1fr auto;align-items:center;gap:9px;border:1px dashed var(--line);border-radius:16px;color:var(--muted)}.seat-list>div.filled{border-style:solid;color:var(--ink);background:var(--surface)}.seat-list .avatar-art{position:static;width:42px;height:42px}.seat-list span{display:grid}.seat-list small{margin-top:3px;color:var(--muted);font-size:11px}.seat-list em{display:grid;width:24px;height:24px;place-items:center;border-radius:50%;color:#fff;background:var(--muted);font-size:11px;font-style:normal;font-weight:900}.lobby-controls{padding:12px}.lobby-controls .toggle-row{padding:8px 4px 14px;border:0}.lobby-controls button{min-height:52px}.game-screen{display:grid;width:100%;height:100dvh;padding:max(8px,env(safe-area-inset-top)) 12px max(6px,env(safe-area-inset-bottom));grid-template-rows:48px 104px minmax(0,1fr) 66px 150px;gap:7px;overflow:hidden;background:var(--bg)}.game-header{padding:0 2px}.game-header .icon-button{width:44px;height:44px;padding:11px}.game-header h1{margin:0;font-size:18px}.score-panel{display:grid;overflow:hidden;grid-template-columns:1fr 1.2fr 1fr;grid-template-rows:66px 38px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.score-panel>div{display:grid;min-width:0;padding:8px 12px;align-content:center}.score-panel>div+div{border-left:1px solid var(--line)}.score-panel>div:last-of-type{text-align:right}.score-panel small{color:var(--muted);font-size:11px;line-height:1.1;letter-spacing:.05em;overflow-wrap:anywhere}.score-panel strong{color:var(--team);font-size:30px;line-height:1;animation:score-tick var(--turn-duration) cubic-bezier(.2,.9,.2,1)}@keyframes score-tick{0%{opacity:.35;transform:translateY(5px) scale(.82)}55%{transform:translateY(-2px) scale(1.12)}}.score-panel>div:nth-child(3) strong{color:var(--opponent)}.score-center{text-align:center!important}.score-center b{margin-top:4px;font-size:12px}.score-panel .info-row{display:grid;padding:0;grid-column:1 / -1;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:0;text-align:left}.info-row>span{display:grid;min-width:0;padding:5px 12px;grid-template-columns:auto minmax(0,max-content);align-content:center;align-items:baseline;justify-content:center;column-gap:8px}.info-row>span+span{border-left:1px solid var(--line)}.info-row b{min-width:0;font-size:13px;line-height:1.1;overflow-wrap:anywhere;text-align:left}.red-suit{color:var(--opponent)!important}.play-area{position:relative;width:min(100%,calc(100dvh - max(8px,env(safe-area-inset-top)) - max(6px,env(safe-area-inset-bottom)) - 396px));max-width:440px;min-width:0;min-height:0;aspect-ratio:1;align-self:center;justify-self:center;overflow:visible;border:1px solid var(--line);border-radius:26px;background:radial-gradient(circle at center,color-mix(in srgb,var(--team) 8%,transparent),transparent 52%),var(--table)}.avatar{--seat-accessory-gap: 7px;--seat-pile-width: 29px;position:absolute;z-index:5;display:grid;width:74px;grid-template-rows:auto 49px;justify-items:center;transition:transform var(--motion-duration) cubic-bezier(.2,.8,.2,1),opacity var(--motion-duration) ease}.avatar.seat-0{top:3px;left:50%;transform:translate(-50%);transform-origin:50% 0}.avatar.seat-1{top:50%;right:3px;transform:translateY(-50%);transform-origin:100% 50%}.avatar.seat-2{bottom:3px;left:50%;transform:translate(-50%);transform-origin:50% 100%}.avatar.seat-3{top:50%;left:3px;transform:translateY(-50%);transform-origin:0 50%}.avatar.turn{scale:1.05;animation:turn-nudge var(--turn-duration) cubic-bezier(.2,.8,.2,1)}.avatar.seat-0.turn,.avatar.seat-2.turn{transform:translate(-50%)}.avatar.seat-1.turn,.avatar.seat-3.turn{transform:translateY(-50%)}@keyframes turn-nudge{35%{scale:1.08;rotate:-2deg}65%{scale:1.05;rotate:2deg}}.avatar.disconnected{opacity:.48}.avatar-art{display:block;width:44px;height:49px;background:currentColor}.avatar-art.team-0{color:var(--team);background:var(--team)}.avatar-art.team-1{color:var(--opponent);background:var(--opponent)}.avatar-name{width:74px;max-width:74px;order:-1;justify-self:center;color:var(--ink);font-size:13px;font-weight:800;line-height:1.1;overflow-wrap:anywhere;word-break:break-word;text-align:center;white-space:normal}.seat-dot,.dealer-chip,.maker-chip{position:absolute;display:grid;place-items:center;border-radius:50%;font-size:11px;font-weight:900}.seat-dot{top:auto;right:4px;bottom:17px;width:21px;height:21px;border:2px solid var(--surface);color:#fff;background:var(--muted)}.dealer-chip{right:auto;bottom:0;left:1px;width:21px;height:21px;border:2px solid var(--line);color:#171b20;background:#fffdfa;animation:chip-deal var(--turn-duration) cubic-bezier(.16,1,.3,1)}@keyframes chip-deal{0%{opacity:0;transform:translate(-30px,-20px) rotate(-120deg) scale(.55)}}.maker-chip{right:24px;bottom:0;left:auto;width:21px;height:21px;color:#fff;background:var(--gold)}.action-bubble{position:absolute;z-index:8;top:-24px;left:50%;width:max-content;max-width:96px;padding:5px 8px;transform:translate(-50%);border:1px solid var(--line);border-radius:10px 10px 10px 2px;color:var(--ink);background:var(--surface-2);box-shadow:0 3px 9px #0000001f;font-size:13px;font-weight:800;line-height:1.15;overflow-wrap:anywhere;white-space:normal;animation:bubble-in var(--motion-duration) cubic-bezier(.2,.9,.2,1)}@keyframes bubble-in{0%{opacity:0;translate:0 6px;scale:.8}}.avatar.seat-0 .action-bubble{top:58px;left:0;transform:translate(-50%)}.avatar.seat-2 .action-bubble{top:auto;bottom:58px;left:100%;transform:translate(-50%)}.avatar.seat-1 .action-bubble,.avatar.seat-3 .action-bubble{top:auto;right:auto;bottom:calc(100% + 4px);left:50%;width:max-content;max-width:74px;transform:translate(-50%)}.reaction{position:absolute;z-index:12;top:-34px;left:50%;font-size:25px;filter:drop-shadow(0 3px 6px #0003);animation:reaction-pop 1.7s cubic-bezier(.2,.9,.2,1) both}.avatar.seat-0 .reaction{top:56px;left:100%}.avatar.seat-2 .reaction{top:auto;bottom:56px;left:0}.avatar.seat-1 .reaction,.avatar.seat-3 .reaction{top:calc(100% + 2px)}.avatar.seat-1 .reaction,.avatar.seat-3 .reaction{left:0}@keyframes reaction-pop{0%{opacity:0;transform:translate(-50%,10px) scale(.3) rotate(-8deg)}20%{opacity:1;transform:translate(-50%) scale(1.15) rotate(4deg)}75%{opacity:1;transform:translate(-50%,-16px) scale(1)}to{opacity:0;transform:translate(-50%,-34px) scale(.8)}}.up-card{position:absolute;top:50%;left:50%;z-index:2;display:grid;justify-items:center;transform:translate(-50%,-50%);transition:transform var(--turn-duration) cubic-bezier(.16,1,.3,1)}.up-card small{margin-bottom:5px;color:var(--muted);font-size:11px;font-weight:850;letter-spacing:.12em}.trick-cards{position:absolute;inset:clamp(78px,23%,86px)}.round-review{position:absolute;z-index:25;top:50%;left:50%;width:min(72%,250px);padding:16px;transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:20px;text-align:center;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 16px 40px #0002;backdrop-filter:blur(10px);animation:modal-in var(--turn-duration) cubic-bezier(.16,1,.3,1)}.round-review small{color:var(--opponent);font-size:11px;font-weight:900;letter-spacing:.12em}.round-review h2{margin:7px 0 2px;font-size:19px}.round-review p{margin:0;color:var(--muted);font-size:27px;font-weight:800}.trick-cards .playing-card{position:absolute;z-index:calc(10 + var(--card-index));transform:rotate(var(--tilt));animation-duration:var(--turn-duration);animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both}.trick-cards .table-seat-0{top:0;left:calc(50% - 31px);animation-name:throw-north}.trick-cards .table-seat-1{top:calc(50% - 44.5px);right:0;animation-name:throw-east}.trick-cards .table-seat-2{bottom:0;left:calc(50% - 31px);animation-name:throw-south}.trick-cards .table-seat-3{top:calc(50% - 44.5px);left:0;animation-name:throw-west}@keyframes throw-north{0%{opacity:0;transform:translateY(-70px) scale(.62) rotate(-10deg)}}@keyframes throw-east{0%{opacity:0;transform:translate(70px) scale(.62) rotate(10deg)}}@keyframes throw-south{0%{opacity:0;transform:translateY(70px) scale(.62) rotate(8deg)}}@keyframes throw-west{0%{opacity:0;transform:translate(-70px) scale(.62) rotate(-10deg)}}.play-area.collecting .trick-cards .playing-card{animation:gather-card calc(var(--turn-duration) * 1.25) cubic-bezier(.4,0,.2,1) forwards}.play-area.collecting .trick-cards .winning-card{z-index:30}@keyframes gather-card{0%{opacity:1}38%{transform:translateY(-10px) scale(.9) rotate(0)}55%{transform:translateY(-10px) scale(.9) rotate(0)}to{opacity:.1;transform:translateY(-88px) scale(.34) rotate(7deg)}}.play-area.collecting.winner-1 .trick-cards .playing-card{animation-name:gather-east}.play-area.collecting.winner-2 .trick-cards .playing-card{animation-name:gather-south}.play-area.collecting.winner-3 .trick-cards .playing-card{animation-name:gather-west}@keyframes gather-east{0%{opacity:1}45%{transform:translateY(-10px) scale(.9)}to{opacity:.1;transform:translate(76px) scale(.34) rotate(12deg)}}@keyframes gather-south{0%{opacity:1}45%{transform:translateY(-10px) scale(.9)}to{opacity:.1;transform:translateY(88px) scale(.34) rotate(-8deg)}}@keyframes gather-west{0%{opacity:1}45%{transform:translateY(-10px) scale(.9)}to{opacity:.1;transform:translate(-76px) scale(.34) rotate(-12deg)}}.status-lane{display:flex;min-width:0;padding:7px 10px;align-items:center;justify-content:center;gap:9px;overflow:hidden;border:1px solid var(--line);border-radius:17px;color:var(--muted);background:var(--surface);font-size:13px;font-weight:720;text-align:center}.status-lane>span{min-width:0;line-height:1.2;overflow-wrap:anywhere}.status-lane>div{display:flex;gap:6px}.status-lane button{min-height:38px;padding:0 13px;border:1px solid var(--line);color:var(--ink);background:var(--surface-2)}.status-lane .primary{color:#fff;background:var(--ink)}:root.dark .status-lane .primary{color:#11161c;background:#f4f1ec}.status-lane .suit-actions button{min-width:39px;padding:0 8px;font-size:20px}.next-trick{display:grid;width:100%;grid-template-columns:1fr auto;align-items:center;text-align:left}.next-trick span{color:var(--muted);font-size:16px;line-height:1.25;overflow-wrap:anywhere}.summary-actions{display:grid!important;width:100%;grid-template-columns:1fr auto;align-items:center}.hand-area{position:relative;z-index:20;overflow:visible}.hand-area header{display:flex;height:28px;padding:0 4px;align-items:baseline;justify-content:space-between}.hand-area h2{margin:0;font-size:18px}.hand-area header span{color:var(--muted);font-size:14px}.hand-fan{--selected-lift: 14px;--legal-lift: 12px;--legal-selected-lift: 15px;position:relative;display:flex;height:144px;padding:0 2px 7px;align-items:flex-end;justify-content:center;overflow:visible}.hand-fan .playing-card{flex:0 0 74px;height:98px;margin-left:-11px;scale:var(--card-scale);transform-origin:50% 100%;transform:translateY(var(--fan-offset)) rotate(var(--fan-tilt));animation:deal-hand var(--turn-duration) cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--fan-index) * 48ms)}@keyframes deal-hand{0%{opacity:0;transform:translate(150px,-150px) rotate(18deg) scale(.62)}}.hand-fan .playing-card:first-child{margin-left:0}.hand-fan .playing-card.selected{z-index:20;transform:translateY(calc(-1 * var(--selected-lift))) rotate(var(--fan-tilt))}.playing-card{position:relative;width:78px;height:108px;padding:0;overflow:hidden;border:1px solid #cec7bc;border-radius:13px;color:#171b20;background:#fffdfa;box-shadow:0 7px 14px #1112;transition:transform var(--motion-duration) cubic-bezier(.2,.8,.2,1),scale var(--motion-duration) cubic-bezier(.2,.8,.2,1),opacity var(--motion-duration) ease,filter var(--motion-duration) ease;touch-action:none}.playing-card.red{color:#a72f40}.playing-card.compact{width:62px;height:89px;border-radius:10px}.playing-card.illegal{opacity:.48;filter:grayscale(.45)}.playing-card.winning-card{transform:rotate(var(--tilt)) scale(1.1);box-shadow:0 8px 20px color-mix(in srgb,var(--gold) 38%,transparent)}.card-corner{position:absolute;top:6px;left:7px;display:grid;width:36px;min-height:43px;grid-template-rows:auto auto;justify-items:start;gap:3px;font-size:25px;font-weight:850;line-height:.88}.card-corner b{display:block;min-width:2ch;font-variant-numeric:tabular-nums;line-height:.88}.card-corner span{margin-top:0;font-size:14px;font-weight:800;line-height:1}.card-pip{position:absolute;top:68%;left:53%;transform:translate(-50%,-50%);font-size:42px;line-height:1;opacity:.88}.compact .card-corner{top:5px;left:6px;width:33px;min-height:39px;font-size:23px}.compact .card-corner span{margin-top:0;font-size:13px}.compact .card-pip{top:70%;left:54%;font-size:32px}.seat-bug{position:absolute;top:5px;right:5px;display:grid;width:19px;height:19px;place-items:center;border-radius:10px;color:#fff;font-size:11px;font-weight:900}.seat-bug.team-0{background:var(--team)}.seat-bug.team-1{background:var(--opponent)}.drag-ghost{position:fixed;z-index:100;width:78px;height:108px;pointer-events:none;transform:translate(-50%,-75%) rotate(-2deg) scale(1.04);filter:drop-shadow(0 16px 16px #0004)}.drag-ghost .playing-card{box-shadow:none}.network-pill{position:fixed;z-index:30;top:max(8px,env(safe-area-inset-top));right:68px;padding:5px 8px;border-radius:10px;color:#fff;background:var(--team);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.network-pill.reconnecting{background:var(--gold)}.network-pill.offline{background:var(--opponent)}.modal-backdrop{position:fixed;z-index:200;inset:0;display:grid;padding:22px;place-items:center;background:#06080ba8;backdrop-filter:blur(7px)}.coach-card,.leave-card{width:min(100%,420px);padding:20px;border:1px solid var(--line);border-radius:24px;color:var(--ink);background:var(--surface);box-shadow:0 25px 80px #0006;animation:modal-in var(--turn-duration) cubic-bezier(.16,1,.3,1)}@keyframes modal-in{0%{opacity:0;transform:translateY(18px) scale(.94)}}.coach-card header{display:flex;align-items:center;gap:9px}.coach-card header svg{width:28px;height:28px;fill:none;stroke:var(--team);stroke-width:1.8}.coach-card p,.leave-card p{color:var(--muted);line-height:1.45}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.coach-card button,.leave-card button{padding:0 12px;color:var(--ink);background:var(--surface-2)}.leave-card{display:grid;gap:8px}.leave-card h2{margin:0}.leave-card .danger{color:#fff;background:var(--opponent)}.kick-controls{display:grid;margin:7px 0;padding-top:12px;gap:7px;border-top:1px solid var(--line)}.kick-controls>small{color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.12em}.kick-controls button{display:flex;padding:0 14px;align-items:center;justify-content:space-between;color:var(--opponent);text-align:left}.kick-controls button span{color:var(--muted);font-size:11px;font-weight:600}.tutorial-panel{position:fixed;z-index:140;right:0;bottom:0;left:0;min-height:245px;padding:18px 22px max(18px,env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--ink);background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 -16px 50px #0002;backdrop-filter:blur(14px);transform-origin:top right;backface-visibility:hidden;will-change:transform,opacity,border-radius}.tutorial-panel-opening{animation:tutorial-expand-from-coach var(--turn-duration) cubic-bezier(.16,1,.3,1) both}.tutorial-panel-closing{pointer-events:none;animation:tutorial-collapse-to-coach var(--turn-duration) cubic-bezier(.55,0,.84,0) both}@keyframes tutorial-expand-from-coach{0%{border-radius:999px;opacity:.15;transform:translate(-16px,calc(-100dvh + 92px)) scale(.06)}to{border-radius:0;opacity:1;transform:translate(0) scale(1)}}@keyframes tutorial-collapse-to-coach{0%{border-radius:0;opacity:1;transform:translate(0) scale(1)}to{border-radius:999px;opacity:.08;transform:translate(-16px,calc(-100dvh + 92px)) scale(.06)}}.tutorial-progress{height:4px;margin-bottom:14px;overflow:hidden;border-radius:2px;background:var(--surface-2)}.tutorial-progress span{display:block;height:100%;border-radius:inherit;background:var(--opponent);transition:width var(--turn-duration) cubic-bezier(.2,.8,.2,1)}.tutorial-panel>small{color:var(--opponent);font-weight:850;letter-spacing:.08em}.tutorial-panel h2{margin:7px 0;font-size:clamp(27px,7.6vw,32px);line-height:1.1}.tutorial-panel p{max-width:650px;margin:0 0 14px;color:var(--muted);font-size:clamp(17px,4.5vw,19px);line-height:1.55}.tutorial-panel .primary{min-width:132px;padding:0 18px}.tutorial-actions{display:flex;min-width:0;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}.tutorial-actions .primary,.tutorial-actions .secondary{min-height:48px;flex:1 1 150px;padding:0 14px}.tutorial-reset{min-height:44px;flex:0 1 auto;padding:0 10px;color:var(--muted);background:transparent}.tutorial-prompt{display:block;color:var(--opponent);font-size:17px;line-height:1.45}.tutorial-live-controls{display:flex;min-height:44px;align-items:center;gap:8px}.tutorial-live-controls button{min-width:74px;padding:0 14px;border:1px solid var(--line);color:var(--ink);background:var(--surface-2)}.tutorial-live-controls .primary{color:#fff;background:var(--ink)}:root.dark .tutorial-live-controls .primary{color:#11161c;background:#f4f1ec}.tutorial-live-controls .red-suit{color:var(--opponent)}.toast{position:fixed;z-index:400;right:18px;bottom:max(18px,env(safe-area-inset-bottom));left:18px;min-height:48px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--opponent) 50%,var(--line));border-radius:14px;color:var(--ink);background:var(--surface);box-shadow:0 14px 40px #0004;font-size:16px;font-weight:720;line-height:1.35;animation:toast-in var(--motion-duration) cubic-bezier(.2,.9,.2,1)}@keyframes toast-in{0%{opacity:0;transform:translateY(12px)}}@media(min-width:700px){.home-screen,.sheet-screen{padding-right:max(28px,calc((100vw - 680px)/2));padding-left:max(28px,calc((100vw - 680px)/2))}.game-screen{max-width:520px;margin:auto;border-right:1px solid var(--line);border-left:1px solid var(--line)}}@media(max-height:730px){.game-screen{grid-template-rows:44px 94px minmax(0,1fr) 60px 132px;gap:5px}.play-area{width:min(100%,calc(100dvh - max(8px,env(safe-area-inset-top)) - max(6px,env(safe-area-inset-bottom)) - 350px))}.hand-fan .playing-card{flex-basis:72px;height:104px}.hero h1{font-size:48px}.hero>p:last-child{margin-top:12px;font-size:16px}.home-screen{gap:10px}}@media(prefers-reduced-motion:reduce){:root{--motion-duration: 1ms !important;--turn-duration: 1ms !important}*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important}}.global-menu-button{top:max(22px,calc(env(safe-area-inset-top) + 14px));left:max(20px,calc(env(safe-area-inset-left) + 14px));width:44px;height:44px;padding:10px;border-color:var(--line);background:var(--surface)}.menu-slot,.global-menu-slot{width:44px;height:44px;flex-basis:44px}.global-menu-backdrop{padding:max(78px,calc(env(safe-area-inset-top) + 68px)) 20px max(20px,calc(env(safe-area-inset-bottom) + 10px))}.global-menu-panel{border-radius:22px}.menu-navigation,.menu-secondary{border-radius:13px;background:var(--surface)}.home-screen{height:100dvh;min-height:100dvh;padding:max(22px,calc(env(safe-area-inset-top) + 14px)) 20px max(24px,calc(env(safe-area-inset-bottom) + 10px));grid-template-rows:44px minmax(220px,1fr) auto;gap:16px;overflow-y:auto;overscroll-behavior:none;background:var(--bg)}.brand-tile{width:44px;height:44px;border-radius:7px;color:var(--bg);background:var(--ink);font-size:27px;box-shadow:none}.hero{align-self:end}.hero h1{font-size:clamp(45px,13vw,72px);line-height:.94;letter-spacing:-.06em}.hero>p:last-child{margin-top:23px;color:var(--ink);font-size:18px;line-height:1.45}.home-actions{gap:11px}.home-actions button{min-height:58px;border-radius:14px}.home-actions .text-button{min-height:44px}.home-actions small{font-size:14px;line-height:1.35}.home-links{display:grid;grid-template-columns:1fr;gap:10px}.home-links .text-button{min-height:44px;border:1px solid var(--rule);border-radius:12px;color:var(--ink);background:var(--surface);font-weight:700}.sheet-intro,.rules-reference p,.rules-live-summary p{font-size:clamp(17px,4.4vw,19px);line-height:1.55}.preset-grid small,.toggle-row small,.select-row small,.speed-row small{font-size:14px;line-height:1.4}.toggle-row b,.select-row b,.speed-row b{font-size:17px;line-height:1.3}.settings-card,.profile-card,.room-code-card,.lobby-controls,.rules-reference{border-radius:15px}.preset-grid button,.rules-live-summary{border-radius:14px}.rules-live-summary{border-color:var(--line);background:var(--surface)}.game-screen{width:100%;max-width:none;border:0;grid-template-columns:minmax(0,1fr);grid-template-rows:48px 104px minmax(0,1fr) 66px 150px;gap:7px}.game-header h1{color:var(--ink);font-size:18px;font-weight:800}.score-panel{border-radius:12px}.score-panel small{font-size:11px}.score-panel strong{font-variant-numeric:tabular-nums}.score-center b{font-size:14px}.info-row b{font-size:16px}.play-area{width:calc(100% + 24px);max-width:none;max-height:100%;height:auto;min-height:0;margin-inline:-12px;aspect-ratio:1;align-self:center;justify-self:stretch;overflow:hidden;border-right:0;border-left:0;border-radius:0;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--team) 9%,transparent),transparent 58%),var(--table);box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--line) 26%,transparent)}.play-area:after{position:absolute;z-index:0;inset:14%;border:1px dashed color-mix(in srgb,var(--line) 72%,transparent);border-radius:50%;content:"";pointer-events:none}.playing-card{border-radius:10px}.playing-card.compact{border-radius:9px}.status-lane{border-radius:12px;font-size:clamp(16px,4.2vw,18px);line-height:1.25}.status-lane button{min-width:44px;min-height:44px;font-size:16px}.status-lane .suit-actions button{min-width:44px}.round-review{border-radius:16px}.coach-card,.leave-card{border-radius:22px}.tutorial-panel{border-color:var(--line);background:color-mix(in srgb,var(--surface) 96%,transparent)}@media(min-width:700px){.game-screen{max-width:none;margin:0;border:0}}@media(max-height:730px){.game-screen{grid-template-rows:42px 86px minmax(0,1fr) 56px 124px;gap:4px}.score-panel{grid-template-rows:54px 32px}.score-panel>div{padding:5px 9px}.score-panel strong{font-size:24px}.info-row>span{padding:3px 9px}.play-area{width:calc(100% + 24px);height:auto}.status-lane{padding:4px 7px}.status-lane button{min-height:44px}.hand-area header{height:24px}.hand-fan{--selected-lift: 10px;--legal-lift: 9px;--legal-selected-lift: 11px;height:122px;padding:0 2px 6px}.hand-fan .playing-card{height:86px;flex-basis:64px;margin-left:-10px}.tutorial-panel{min-height:0;max-height:48dvh;overflow-y:auto}}@media(max-width:340px)and (max-height:620px){.game-screen{grid-template-rows:40px 76px minmax(0,1fr) 54px 108px}.score-panel{grid-template-rows:48px 28px}.score-panel small{font-size:11px}.score-panel strong{font-size:21px}.score-center b{font-size:11px}.info-row b{font-size:16px}.avatar{scale:.88}.hand-area h2{font-size:16px}.hand-area header span{font-size:12px}.hand-fan{--selected-lift: 8px;--legal-lift: 7px;--legal-selected-lift: 9px;height:106px;padding:0 2px 5px}.hand-fan .playing-card{height:74px;flex-basis:56px;margin-left:-9px}.card-corner{width:33px;min-height:38px;font-size:21px}.card-pip{top:70%;font-size:34px}}.hand-fan .playing-card.legal-choice{z-index:calc(40 + var(--fan-index));opacity:1;filter:none;transform:translateY(calc(var(--fan-offset) - var(--legal-lift))) rotate(var(--fan-tilt));box-shadow:0 10px 20px #14171c38,0 0 0 2px color-mix(in srgb,var(--team) 72%,transparent)}.hand-fan .playing-card.legal-choice.selected{z-index:calc(80 + var(--fan-index));transform:translateY(calc(-1 * var(--legal-selected-lift))) rotate(var(--fan-tilt))}.playing-card{--pip-safe-top: 46px;--pip-safe-right: 4px;--pip-safe-bottom: 5px;--pip-safe-left: 28px;--pip-safe-size: 31px}.playing-card.compact{--pip-safe-top: 48px;--pip-safe-right: 4px;--pip-safe-bottom: 5px;--pip-safe-left: 24px;--pip-safe-size: 29px}.card-pip,.compact .card-pip{top:var(--pip-safe-top);right:var(--pip-safe-right);bottom:var(--pip-safe-bottom);left:var(--pip-safe-left);display:grid;width:auto;height:auto;place-items:center;overflow:hidden;padding:1px;font-size:var(--pip-safe-size);line-height:1;transform:none}@media(max-height:730px){.hand-fan .playing-card{--pip-safe-top: 38px;--pip-safe-right: 4px;--pip-safe-bottom: 4px;--pip-safe-left: 26px;--pip-safe-size: 28px}}@media(max-width:340px)and (max-height:620px){.hand-fan .playing-card{--pip-safe-top: 32px;--pip-safe-right: 3px;--pip-safe-bottom: 3px;--pip-safe-left: 24px;--pip-safe-size: 22px}}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important}.hand-area{display:flex;align-items:flex-end}.hand-area .hand-fan{width:100%;margin-top:auto}body:has(.game-screen) .global-menu-button{top:max(8px,env(safe-area-inset-top));left:max(12px,calc(env(safe-area-inset-left) + 12px))}.won-trick-pile{position:absolute;z-index:6;width:29px;height:37px;pointer-events:none}.won-trick-back{position:absolute;top:calc(var(--pile-layer) * 1px);left:calc(var(--pile-layer) * 2px);display:block;width:23px;height:32px;border:1px solid #e1ddd4;border-radius:4px;background:repeating-linear-gradient(45deg,#7e3039 0 3px,#f3ece5 3px 6px);box-shadow:0 1px 3px #0000001f;transform:rotate(var(--pile-tilt));animation:won-trick-back-in var(--motion-duration) cubic-bezier(.2,.8,.25,1) both}.avatar.seat-0 .won-trick-pile,.avatar.seat-2 .won-trick-pile{top:20px;bottom:auto}.avatar.seat-0 .won-trick-pile{right:calc(100% + var(--seat-accessory-gap));left:auto}.avatar.seat-2 .won-trick-pile{right:auto;left:calc(100% + var(--seat-accessory-gap))}.avatar.seat-1 .won-trick-pile{top:22px;right:76px}.avatar.seat-3 .won-trick-pile{top:22px;left:76px}.avatar.seat-0 .action-bubble,.avatar.seat-2 .action-bubble{top:39px;bottom:auto;translate:0 -50%;transform:none}.avatar.seat-0 .action-bubble{right:calc(100% + var(--seat-accessory-gap));left:auto}.avatar.seat-0.has-pile .action-bubble{right:calc(100% + var(--seat-accessory-gap) + var(--seat-pile-width) + var(--seat-accessory-gap))}.avatar.seat-2 .action-bubble{right:auto;left:calc(100% + var(--seat-accessory-gap))}.avatar.seat-2.has-pile .action-bubble{left:calc(100% + var(--seat-accessory-gap) + var(--seat-pile-width) + var(--seat-accessory-gap))}@keyframes won-trick-back-in{0%{opacity:0;transform:translateY(-6px) scale(.82) rotate(calc(var(--pile-tilt) - 3deg))}}
