:root{font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,sans-serif;color:#343941;background:#f7f5f1;font-synthesis:none;text-rendering:optimizeLegibility;--bg: #f7f5f1;--surface: #fffdfa;--surface-2: #f2f0eb;--surface-3: #e9e5dd;--ink: #15181d;--charcoal: #343941;--muted: #676d75;--line: #d8d4cc;--line-strong: #aaa59b;--team: #347d57;--team-soft: #e4f0e9;--opponent: #a43d4a;--opponent-soft: #f5e6e8;--oxblood: #8d313b;--spade: #8d313b;--spade-deep: #15181d;--gold: #b88627;--card-red: #9a303c;--black-suit: #171a1f;--card-scale: 1;--shadow: 0 14px 38px rgb(34 39 44 / 12%);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);color-scheme:light}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.room-departure-backdrop{position:fixed;z-index:100;inset:0;display:grid;align-items:end;padding:20px;padding-bottom:max(20px,calc(var(--safe-bottom) + 12px));background:#03080d9e;backdrop-filter:blur(8px);animation:room-backdrop-in .18s ease-out both}.room-departure-dialog{display:grid;width:min(100%,480px);max-height:min(82dvh,680px);justify-self:center;gap:10px;overflow:auto;padding:20px;border:1px solid var(--line);border-radius:20px;color:var(--ink);background:var(--surface);box-shadow:0 24px 70px #00000057;animation:room-dialog-in .3s cubic-bezier(.2,.9,.2,1) both}.room-departure-dialog h2,.room-departure-dialog p{margin:0}.room-departure-dialog h2{font-size:26px}.room-departure-dialog>p{margin-bottom:5px;color:var(--muted);line-height:1.45}.room-departure-dialog>small{color:var(--muted);text-align:center}.room-departure-dialog .danger{border-color:var(--opponent);color:var(--opponent);background:var(--opponent-soft);font-weight:800}.room-departure-dialog .quiet{background:transparent}.room-departure-dialog button:disabled{opacity:.48}@keyframes room-backdrop-in{0%{opacity:0}}@keyframes room-dialog-in{0%{opacity:0;transform:translateY(24px) scale(.98)}}:root[data-theme=dark]{--bg: #0d1014;--surface: #171c22;--surface-2: #20262e;--surface-3: #2a313a;--ink: #f3f1ed;--charcoal: #e4e5e9;--muted: #a8adb8;--line: #3a414c;--line-strong: #626a75;--team: #55bb83;--team-soft: #173e31;--opponent: #e36977;--opponent-soft: #4b252d;--oxblood: #ed7481;--spade: #ed7481;--spade-deep: #f3f1ed;--gold: #e6b451;--card-red: #b43645;--black-suit: #15181d;--shadow: 0 18px 46px rgb(0 0 0 / 34%);color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none}html,body,#root{width:100%;height:100%;min-height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--bg)}body{position:fixed;inset:0;color:var(--ink)}button,input,select{font:inherit}button{color:inherit}input,select{user-select:text;-webkit-touch-callout:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--spade) 60%,transparent);outline-offset:2px}button:disabled{cursor:default;opacity:.46}.multiplayer-maintenance:disabled{opacity:1;border-style:dashed;color:var(--muted)}.app-shell{width:100%;height:100dvh;overflow:hidden;background:var(--bg);color:var(--ink)}.eyebrow{display:block;color:var(--opponent);font-size:.72rem;font-weight:850;letter-spacing:.18em;line-height:1.2;text-transform:uppercase}.icon-button{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);cursor:pointer;transition:transform var(--motion-fast, .18s) cubic-bezier(.2,.8,.2,1),border-color var(--motion-fast, .18s),background var(--motion-fast, .18s)}.icon-button:active{transform:scale(.9)}.icon-button.active{border-color:var(--team);background:color-mix(in srgb,var(--team) 15%,var(--surface));animation:coachPulse 1.8s ease-in-out infinite}.icon-button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-button.active svg{color:var(--team)}@keyframes coachPulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--team) 12%,transparent)}}.portfolio-menu-button{position:fixed;z-index:1302;top:max(20px,calc(var(--safe-top) + 12px));left:max(20px,calc(env(safe-area-inset-left) + 14px));box-shadow:0 7px 22px color-mix(in srgb,var(--ink) 13%,transparent)}.portfolio-menu-button.in-game{top:max(7px,calc(var(--safe-top) + 6px));left:12px;box-shadow:none}.portfolio-menu-backdrop{position:fixed;z-index:1300;inset:0;padding:max(78px,calc(var(--safe-top) + 68px)) max(18px,calc(env(safe-area-inset-right) + 18px)) max(18px,calc(var(--safe-bottom) + 12px)) max(18px,calc(env(safe-area-inset-left) + 18px));background:color-mix(in srgb,var(--ink) 40%,transparent);backdrop-filter:blur(7px);animation:portfolioMenuBackdropIn var(--motion-fast, .18s) ease both}.portfolio-menu-panel{width:min(100%,390px);max-height:100%;display:grid;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:portfolioMenuPanelIn var(--motion, .32s) cubic-bezier(.2,.9,.2,1) both}.portfolio-menu-panel header span{display:grid;gap:2px}.portfolio-menu-panel header small,.rules-live-summary small{color:var(--opponent);font-size:.6875rem;font-weight:850;letter-spacing:.15em}.portfolio-menu-panel header b{font-size:1.75rem;letter-spacing:-.03em}.portfolio-menu-panel nav,.menu-settings{display:grid}.menu-navigation{min-height:48px;display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid var(--line);border-radius:14px;color:var(--ink);background:var(--surface);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:.6875rem;letter-spacing:.12em;text-transform:uppercase}.menu-settings .toggle-row,.menu-settings .speed-row{min-height:48px;padding:11px 14px;border-top:1px solid var(--line);border-bottom:0}.menu-settings .toggle-row input{width:22px;height:22px}.menu-settings .speed-row{align-items:center}.menu-settings .speed-row input{width:46%}@keyframes portfolioMenuBackdropIn{0%{opacity:0}}@keyframes portfolioMenuPanelIn{0%{opacity:0;transform:translateY(-12px) scale(.98)}}.home-screen{height:100%;min-height:100%;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(11px,1.8vh,20px);padding:max(20px,calc(var(--safe-top) + 12px)) max(20px,calc(env(safe-area-inset-right) + 20px)) max(22px,calc(var(--safe-bottom) + 10px)) max(20px,calc(env(safe-area-inset-left) + 20px));background:var(--bg)}.home-top{display:flex;align-items:center;justify-content:space-between}.brand-tile{width:44px;height:44px;display:grid;place-items:center;border-radius:7px;color:var(--bg);background:var(--ink);font-family:Georgia,serif;font-size:1.65rem}.hero{align-self:end;max-width:580px}.hero h1{margin:10px 0 18px;max-width:9ch;color:var(--ink);font-size:clamp(2.82rem,12vw,4.5rem);font-weight:900;letter-spacing:-.06em;line-height:.94}.hero p{max-width:33rem;margin:0;color:var(--charcoal);font-size:clamp(1rem,4vw,1.15rem);line-height:1.45}.home-actions{display:grid;gap:10px}.home-actions button,.room-actions button,.lobby-controls button,.review-next{min-height:58px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;font-weight:780;transition:transform .16s ease,background .16s ease,border-color .16s ease}.home-actions button:active,.room-actions button:active,.lobby-controls button:active,.review-next:active{transform:scale(.98)}button.primary{display:flex;align-items:center;justify-content:center;gap:10px;border-color:var(--ink);color:var(--bg);background:var(--ink)}button.primary span{opacity:.65;font-size:.75rem;letter-spacing:.06em}.split-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.online-button{color:var(--ink);border-color:color-mix(in srgb,var(--team) 45%,var(--line))!important;background:color-mix(in srgb,var(--team) 6%,transparent)!important}.maintenance-note{margin:-2px 4px 2px;color:var(--muted);font-size:1rem;font-weight:650;line-height:1.35}.lesson-card{width:100%;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;text-align:left}.lesson-card span{display:grid;gap:4px}.lesson-card small{color:var(--muted);font-size:.78rem;font-weight:550}.lesson-card>b{color:var(--oxblood, var(--spade));font-size:1.4rem}.home-links{display:grid;grid-template-columns:1fr;gap:10px}.home-links .text-button{min-height:44px;border:1px solid var(--line);border-radius:12px;color:var(--charcoal);background:var(--surface);font-weight:700}@media(max-height:720px){.home-screen{gap:9px;padding-top:calc(var(--safe-top) + 10px)}.hero h1{margin:8px 0 10px;font-size:clamp(2.8rem,10vh,4.5rem)}.hero p{font-size:.95rem}.home-actions button{min-height:46px}}.menu-screen,.review-screen{height:100%;overflow:hidden;display:flex;flex-direction:column;padding:max(20px,calc(var(--safe-top) + 12px)) max(20px,calc(env(safe-area-inset-right) + 20px)) max(22px,calc(var(--safe-bottom) + 10px)) max(20px,calc(env(safe-area-inset-left) + 20px));background:var(--bg)}.screen-header,.game-header{min-height:48px;display:grid;grid-template-columns:46px 1fr 46px;align-items:center;gap:10px}.screen-header>div,.game-header>div{min-width:0;display:grid;justify-items:center;gap:2px;text-align:center}.screen-header>div span,.game-header>div span{color:var(--muted);font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.screen-header>div strong,.game-header>div strong{max-width:100%;font-size:1.05rem;line-height:1.1;overflow-wrap:anywhere}.header-spacer{width:46px}.menu-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px 2px 6px}.profile-editor{display:grid;gap:14px;padding:18px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}.profile-editor label{display:grid;gap:7px}.profile-editor label>span,.profile-label{color:var(--muted);font-size:.72rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.profile-editor input,.join-row input{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:var(--surface);font-weight:700}.avatar-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.avatar-picker button{aspect-ratio:1;display:grid;place-items:center;padding:6px;border:1px solid var(--line);border-radius:11px;background:var(--surface)}.avatar-picker button.selected{border-color:var(--team);background:var(--team-soft);box-shadow:0 0 0 2px color-mix(in srgb,var(--team) 22%,transparent)}.avatar-picker span,.lobby-avatar{width:100%;height:100%}.avatar-picker span,.lobby-avatar.team{background:var(--team)}.lobby-avatar.opponent{background:var(--opponent)}.room-actions{display:grid;gap:12px;margin-top:16px}.join-row{display:grid;grid-template-columns:minmax(0,1fr) 94px;gap:9px}.join-row input{text-align:center;letter-spacing:.16em;text-transform:uppercase}.inline-error{margin:0;padding:12px 14px;border-radius:12px;color:var(--opponent);background:var(--opponent-soft);font-size:1rem;line-height:1.4}.privacy-note{margin:4px 0 0;color:var(--muted);font-size:.72rem;text-align:center}.connection-dot{width:12px;height:12px;justify-self:center;border-radius:50%;background:var(--muted)}.connection-dot.connected{background:var(--team)}.connection-dot.reconnecting{background:var(--gold);animation:blink 1s infinite}.connection-dot.offline{background:var(--opponent)}@keyframes blink{50%{opacity:.35}}.lobby-screen{gap:14px}.lobby-card{padding:18px;border:1px solid var(--line);border-radius:15px;background:var(--surface);text-align:center}.lobby-card h2{margin:7px 0 14px;font-size:1.7rem}.lobby-seats{display:grid;grid-template-columns:1fr 1fr;gap:9px}.lobby-seats>div{min-height:98px;display:grid;grid-template-columns:46px 1fr;grid-template-rows:1fr 1fr;align-items:end;padding:10px;border:1px dashed var(--line);border-radius:14px;text-align:left}.lobby-seats>div.occupied{border-style:solid}.lobby-avatar{grid-row:1 / 3;align-self:center;width:40px;height:58px}.lobby-seats b{align-self:end;font-size:.85rem}.lobby-seats small{align-self:start;color:var(--muted);font-size:.7rem;line-height:1.3;overflow-wrap:anywhere}.lobby-card>p{margin:14px 0 0;color:var(--muted);font-size:.78rem}.lobby-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px}.waiting-message{margin:auto 0;color:var(--muted);text-align:center}.game-screen{width:100%;height:100dvh;overflow:hidden;display:grid;grid-template-rows:46px 98px minmax(0,1fr) 110px 160px;gap:5px;padding:max(7px,calc(var(--safe-top) + 6px)) 0 max(4px,var(--safe-bottom));background:var(--bg)}.game-header,.scoreboard,.status-rail,.hand-section{margin-inline:12px}.game-header{min-height:46px}.scoreboard{overflow:hidden;display:grid;grid-template-columns:1fr 1.15fr 1fr;grid-template-rows:1fr 44px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.score-cell,.score-center{min-width:0;display:grid;align-content:center;padding:4px 8px}.score-cell span,.score-center span,.contract-row span{color:var(--muted);font-size:clamp(.6875rem,2.4vw,.72rem);letter-spacing:.04em;line-height:1.15;overflow-wrap:anywhere}.score-cell strong{color:var(--team);font-size:clamp(1.55rem,7vw,2.1rem);line-height:1}.score-cell.theirs{justify-items:end;border-left:1px solid var(--line);text-align:right}.score-cell.theirs strong{color:var(--opponent)}.score-cell small,.score-center small{color:var(--muted);font-size:.6875rem}.score-center{justify-items:center;border-left:1px solid var(--line);text-align:center}.score-center strong{font-size:clamp(.72rem,3vw,.88rem)}.score-center small{margin-top:3px;color:var(--spade-deep);font-weight:750}.contract-row{grid-column:1 / 4;display:grid;grid-template-columns:1fr 1.3fr 1fr;border-top:1px solid var(--line)}.contract-row>div{min-width:0;display:grid;align-content:center;padding:4px 8px}.contract-row>div+div{border-left:1px solid var(--line)}.contract-row strong{font-size:.78rem;line-height:1.15;overflow-wrap:anywhere}.play-area{position:relative;width:100vw;max-height:100%;aspect-ratio:1;align-self:center;justify-self:stretch;min-height:0;overflow:hidden;border-block:1px solid var(--line);border-inline:0;border-radius:0;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--team) 12%,transparent),transparent 50%),var(--surface);box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--line) 34%,transparent)}.play-area:after{position:absolute;inset:14%;border:1px dashed color-mix(in srgb,var(--line) 72%,transparent);border-radius:50%;content:"";pointer-events:none}.player{position:absolute;z-index:5;width:74px;display:grid;grid-template-rows:auto 49px;justify-items:center;row-gap:2px;transition:transform var(--motion) cubic-bezier(.2,.8,.2,1),opacity var(--motion-fast)}.player-0{top:5px;left:50%;transform-origin:50% 0;transform:translate(-50%)}.player-1{right:6px;top:50%;transform-origin:100% 50%;transform:translateY(-50%)}.player-2{bottom:3px;left:50%;transform-origin:50% 100%;transform:translate(-50%)}.player-3{left:6px;top:50%;transform-origin:0 50%;transform:translateY(-50%)}.player-0.is-turn,.player-2.is-turn{transform:translate(-50%) scale(1.05)}.player-1.is-turn,.player-3.is-turn{transform:translateY(-50%) scale(1.05)}.player.is-turn .avatar-shape{filter:drop-shadow(0 0 8px currentColor);animation:avatarTurn .65s cubic-bezier(.2,.9,.3,1)}.won-pile{--arrival-x: 0;--arrival-y: 0;position:absolute;z-index:2;width:27px;height:38px;pointer-events:none}.won-pile-0{top:82px;left:calc(50% + 62px);--arrival-y: 11px;transform:translate(-50%)}.won-pile-1{top:calc(50% + 62px);right:82px;--arrival-x: -11px;transform:translateY(-50%)}.won-pile-2{bottom:82px;left:calc(50% - 62px);--arrival-y: -11px;transform:translate(-50%)}.won-pile-3{top:calc(50% - 62px);left:82px;--arrival-x: 11px;transform:translateY(-50%)}.won-pile-layer,.won-pile-arrival{position:absolute;inset:0;overflow:hidden;border:1px solid #ded9d0;border-radius:4px;background:repeating-linear-gradient(45deg,#7e3039 0 3px,#f3ece5 3px 6px);box-shadow:0 1px 2px #00000021}.won-pile-layer{opacity:0;transition:opacity var(--motion-fast) ease}.won-pile .layer-0{transform:translate(-1px,1px) rotate(calc(var(--pile-base-tilt) - 2deg))}.won-pile .layer-1{transform:translate(1px,-1px) rotate(calc(var(--pile-base-tilt) + 2deg))}.won-pile.depth-2 .layer-0,.won-pile.depth-3 .layer-0,.won-pile.depth-3 .layer-1{opacity:1}.won-pile-arrival{transform:rotate(var(--pile-arrival-tilt));animation:wonPileArrive var(--motion) cubic-bezier(.2,.8,.2,1) both}@keyframes wonPileArrive{0%{opacity:.2;transform:translate(var(--arrival-x),var(--arrival-y)) rotate(calc(var(--pile-arrival-tilt) + 5deg)) scale(.9)}to{opacity:1;transform:translate(0) rotate(var(--pile-arrival-tilt)) scale(1)}}@keyframes avatarTurn{40%{transform:scale(1.13) rotate(-4deg)}70%{transform:scale(.98) rotate(3deg)}}.avatar-shape{display:block;width:44px;height:49px;background:currentColor;-webkit-mask-image:var(--avatar-image);-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-image:var(--avatar-image);mask-position:center;mask-repeat:no-repeat;mask-size:contain;transition:transform var(--motion)}.player.team{color:var(--team)}.player.opponent{color:var(--opponent)}.player.disconnected{opacity:.45}.seat-avatar{position:relative;display:block;width:44px;height:49px}.seat-letter{position:absolute;bottom:17px;right:-7px;width:21px;height:21px;display:grid;place-items:center;border:2px solid var(--surface);border-radius:50%;color:#fff;font-size:.6875rem;font-weight:900}.player.team .seat-letter{background:var(--team)}.player.opponent .seat-letter{background:var(--opponent)}.player-name{width:74px;min-height:15px;color:var(--ink);font-size:.8125rem;font-weight:850;line-height:1.1;overflow-wrap:anywhere;text-align:center}.seat-meta-rail{position:absolute;bottom:0;left:-7px;width:21px;min-height:21px}.dealer-chip{position:absolute;inset:0;width:20px;height:20px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;color:#1d2025;background:#fffdf8;font-size:.6875rem;font-weight:900;box-shadow:0 2px 4px #0000002e;animation:dealerArrive var(--motion-slow) cubic-bezier(.2,.9,.2,1)}@keyframes dealerArrive{0%{opacity:0;transform:translate(-18px,-8px) rotate(-90deg) scale(.5)}}.action-bubble{position:absolute;z-index:8;max-width:96px;width:max-content;min-width:44px;padding:5px 8px;border:1px solid var(--line);border-radius:10px 10px 10px 2px;color:var(--ink);background:var(--surface);box-shadow:0 3px 9px #0000001a;font-size:13px;font-weight:850;line-height:1.2;overflow-wrap:anywhere;text-align:center;animation:bubbleIn var(--motion) cubic-bezier(.2,.9,.2,1)}.player-0 .action-bubble{top:calc(100% + 4px);right:calc(50% + 24px)}.player-1 .action-bubble{top:calc(50% - 46px);right:calc(100% + 4px);transform:translateY(-50%)}.player-2 .action-bubble{bottom:calc(100% + 4px);left:calc(50% + 24px)}.player-3 .action-bubble{top:calc(50% + 46px);left:calc(100% + 4px);transform:translateY(-50%)}.seat-accessory-rail{--seat-accessory-clearance: 22px;position:absolute;z-index:8;top:50%;display:flex;align-items:center;gap:7px;pointer-events:none}.seat-accessory-rail-0{right:calc(100% + var(--seat-accessory-clearance));transform:translateY(-50%)}.seat-accessory-rail-2{left:calc(100% + var(--seat-accessory-clearance));transform:translateY(-50%)}.seat-accessory-rail .action-bubble,.seat-accessory-rail .won-pile{position:relative;inset:auto;display:block;flex:0 0 auto;transform:none}.seat-accessory-rail .won-pile{width:27px;height:38px}@keyframes bubbleIn{0%{opacity:0;scale:.6}}.reaction{position:absolute;z-index:12;font-size:1.5rem;filter:drop-shadow(0 3px 3px rgb(0 0 0 / 20%));animation:reactionFloat 1.65s cubic-bezier(.2,.8,.2,1) both}.player-0 .reaction{top:calc(100% + 36px);right:calc(100% + 4px)}.player-1 .reaction{right:calc(100% + 36px);top:calc(50% + 46px)}.player-2 .reaction{left:calc(100% + 4px);bottom:calc(100% + 36px)}.player-3 .reaction{left:calc(100% + 36px);bottom:calc(50% + 46px)}@keyframes reactionFloat{0%{opacity:0;transform:translateY(12px) scale(.4) rotate(-8deg)}20%{opacity:1;transform:translateY(0) scale(1.15) rotate(4deg)}80%{opacity:1}to{opacity:0;transform:translateY(-20px) scale(.85)}}.trick-layout{position:absolute;z-index:3;inset:0;pointer-events:none}.playing-card{position:relative;width:68px;height:102px;display:block;overflow:hidden;padding:0;border:1px solid #cec9be;border-radius:11px;color:var(--black-suit);background:#fffdfa;box-shadow:0 4px 9px #00000024;transform-origin:50% 100%}.card-hit-region{position:absolute;z-index:5;inset:0;width:100%;padding:0;border:0;appearance:none;color:inherit;background:transparent;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}.card-hit-region:disabled{cursor:default}.playing-card.red{color:var(--card-red)}.playing-card.illegal{filter:grayscale(.35);opacity:.42}.playing-card.selected{z-index:30!important;border-color:var(--spade);box-shadow:0 0 0 3px color-mix(in srgb,var(--spade) 35%,transparent),0 11px 20px #14191e3b}.card-corner{position:absolute;left:9px;top:7px;z-index:2;width:32px;min-height:43px;display:grid;grid-template-rows:auto auto;justify-items:start;align-content:start;row-gap:4px;line-height:1}.card-corner b{font-size:1.25rem;letter-spacing:-.05em;line-height:1}.card-corner span{font-size:.9rem;line-height:1}.card-suit{position:absolute;inset:auto 4px 5px 34%;display:grid;width:auto;height:45%;place-items:center;font-size:2.6rem;line-height:1;transform:none}.playing-card.compact{position:absolute;width:54px;height:78px;border-radius:9px;box-shadow:0 4px 9px #00000038}.compact .card-corner{left:6px;top:5px;width:24px;min-height:32px;row-gap:3px}.compact .card-corner b{font-size:.94rem}.compact .card-corner span{font-size:.6875rem}.compact .card-suit{inset:auto 3px 4px 34%;height:42%;font-size:1.55rem}.card-seat{position:absolute;top:4px;right:4px;width:18px;height:18px;display:grid;place-items:center;border-radius:8px;color:#fff;font-size:.6875rem;font-weight:900}.card-seat.team{background:var(--team)}.card-seat.opponent{background:var(--opponent)}.trick-layout .from-seat-0{left:calc(50% - 27px);top:25%;transform:rotate(-3deg);animation:throwNorth var(--motion-slow) cubic-bezier(.18,.85,.2,1.05) both}.trick-layout .from-seat-1{right:24%;top:calc(50% - 39px);transform:rotate(4deg);animation:throwEast var(--motion-slow) cubic-bezier(.18,.85,.2,1.05) both}.trick-layout .from-seat-2{left:calc(50% - 27px);bottom:23%;transform:rotate(2deg);animation:throwSouth var(--motion-slow) cubic-bezier(.18,.85,.2,1.05) both}.trick-layout .from-seat-3{left:24%;top:calc(50% - 39px);transform:rotate(-5deg);animation:throwWest var(--motion-slow) cubic-bezier(.18,.85,.2,1.05) both}@keyframes throwNorth{0%{opacity:0;transform:translateY(-90px) scale(.65) rotate(-12deg)}}@keyframes throwEast{0%{opacity:0;transform:translate(100px) scale(.65) rotate(14deg)}}@keyframes throwSouth{0%{opacity:0;transform:translateY(100px) scale(.65) rotate(10deg)}}@keyframes throwWest{0%{opacity:0;transform:translate(-100px) scale(.65) rotate(-15deg)}}.trick-layout .winning{z-index:8;border-color:var(--gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 55%,transparent),0 9px 18px #0000003d;scale:1.08;translate:0 -4px;transition:scale var(--motion),translate var(--motion),box-shadow var(--motion)}.trick-layout.collecting .playing-card{z-index:calc(4 - var(--play-index))}.trick-layout.collect-to-0 .playing-card{animation:collectNorth var(--motion-slow) cubic-bezier(.55,0,.3,1) both}.trick-layout.collect-to-1 .playing-card{animation:collectEast var(--motion-slow) cubic-bezier(.55,0,.3,1) both}.trick-layout.collect-to-2 .playing-card{animation:collectSouth var(--motion-slow) cubic-bezier(.55,0,.3,1) both}.trick-layout.collect-to-3 .playing-card{animation:collectWest var(--motion-slow) cubic-bezier(.55,0,.3,1) both}@keyframes collectNorth{32%{left:calc(50% - 27px);top:calc(50% - 39px);right:auto;bottom:auto;transform:rotate(calc((var(--play-index) - 2) * 2deg)) scale(.95)}45%{left:calc(50% - 27px);top:calc(50% - 39px);right:auto;bottom:auto}to{left:calc(50% - 20px);top:-78px;right:auto;bottom:auto;opacity:.25;transform:scale(.5)}}@keyframes collectEast{32%{left:calc(50% - 27px);top:calc(50% - 39px);right:auto;bottom:auto;transform:rotate(calc((var(--play-index) - 2) * 2deg)) scale(.95)}45%{left:calc(50% - 27px);top:calc(50% - 39px);right:auto;bottom:auto}to{left:calc(100% + 55px);top:calc(50% - 20px);right:auto;bottom:auto;opacity:.25;transform:scale(.5)}}@keyframes collectSouth{32%{left:calc(50% - 27px);top:calc(50% - 39px);right:auto;bottom:auto;transform:rotate(calc((var(--play-index) - 2) * 2deg)) scale(.95)}45%{left:calc(50% - 27px);top:calc(50% - 39px);right:auto;bottom:auto}to{left:calc(50% - 20px);top:calc(100% + 45px);right:auto;bottom:auto;opacity:.25;transform:scale(.5)}}@keyframes collectWest{32%{left:calc(50% - 27px);top:calc(50% - 39px);right:auto;bottom:auto;transform:rotate(calc((var(--play-index) - 2) * 2deg)) scale(.95)}45%{left:calc(50% - 27px);top:calc(50% - 39px);right:auto;bottom:auto}to{left:-85px;top:calc(50% - 20px);right:auto;bottom:auto;opacity:.25;transform:scale(.5)}}.status-rail{min-height:110px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:13px;background:var(--surface)}.status-rail.with-coach{grid-template-rows:58px minmax(0,1fr)}.status-primary{width:100%;height:100%;min-height:0;display:grid;place-items:center}.status-primary>p{margin:0;padding-inline:10px;color:var(--muted);font-size:clamp(1rem,4.2vw,1.08rem);font-weight:760;line-height:1.25;text-align:center}.coach-inline{grid-row:1;width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 108px;align-items:center;gap:8px;padding:3px 8px 3px 12px}.coach-inline p{min-width:0;margin:0;color:var(--muted);font-size:1rem;line-height:1.25;overflow-wrap:anywhere}.coach-inline p b{display:inline;margin-right:6px;color:var(--team);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase}.coach-inline-actions{display:grid;grid-template-columns:44px 60px;gap:4px}.coach-inline button{min-width:44px;min-height:44px;padding:0 2px;border:1px solid var(--line);border-radius:10px;color:var(--muted);background:var(--surface-2);font-size:1rem;line-height:1.05;font-weight:800}.bid-controls{width:100%;height:100%;display:grid;grid-template-columns:auto 44px 32px 44px minmax(82px,auto);align-items:center;justify-content:center;gap:5px;padding:5px}.bid-controls button{min-width:44px;height:44px;padding:0 11px;border:1.5px solid var(--line);border-radius:11px;color:var(--ink);background:var(--surface-2);font-weight:850}.bid-controls>strong{text-align:center;font-size:1.2rem}.bid-controls .nil-button{color:var(--opponent);border-color:color-mix(in srgb,var(--opponent) 45%,var(--line));background:var(--opponent-soft)}.bid-controls .confirm-bid{color:var(--bg);border-color:var(--ink);background:var(--ink)}.next-trick,.play-selected{min-height:44px;padding:0 28px;border:0;border-radius:12px;color:var(--bg);background:var(--ink);font-weight:850}.hand-section{min-height:0;display:grid;grid-template-rows:1fr;overflow:hidden}.hand-section>header{display:flex;align-items:center;justify-content:space-between;padding:0 4px}.hand-section>header strong{font-size:1.05rem}.hand-section>header span{color:var(--muted);font-size:.92rem}.card-fan{position:relative;container-type:inline-size;min-height:0;width:100%;height:100%;perspective:600px;--fan-inset: 25px;--fan-bottom: 16px;--hand-card-width: min(calc(68px * var(--card-scale)), 74.67px);--hand-card-height: min(calc(102px * var(--card-scale)), 112px)}.card-fan .playing-card{position:absolute;left:calc(var(--fan-inset) + var(--i) * (100% - 2 * var(--fan-inset) - var(--hand-card-width)) / max(1,calc(var(--count) - 1)));width:var(--hand-card-width);height:var(--hand-card-height);bottom:var(--fan-bottom);z-index:calc(var(--i) + 1);transform:translateY(calc((var(--i) - var(--mid)) * (var(--i) - var(--mid)) * .12px)) rotate(calc((var(--i) - var(--mid)) * 1.25deg));transition:bottom var(--motion) cubic-bezier(.2,.8,.2,1),transform var(--motion) cubic-bezier(.2,.8,.2,1),opacity var(--motion-fast),box-shadow var(--motion-fast);animation:dealCard var(--motion-slow) cubic-bezier(.18,.82,.25,1.08) both;animation-delay:calc(var(--i) * 22ms);pointer-events:none}.card-fan .card-hit-region{right:auto;width:max(1px,calc((100cqw - 2 * var(--fan-inset) - var(--hand-card-width)) / max(1,calc(var(--count) - 1))));pointer-events:auto}.card-fan .playing-card:last-child .card-hit-region{width:100%}.card-fan .playing-card.selected .card-hit-region{width:100%;min-width:44px;min-height:44px}.card-fan .playing-card:has(.card-hit-region:focus-visible){z-index:calc(120 + var(--i))!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--spade) 48%,transparent),0 11px 20px #14191e3b}.card-fan .card-suit{inset:auto 3px 4px 34%;height:36%;font-size:1.625rem}.card-fan .playing-card.selected{bottom:calc(var(--fan-bottom) + 5px);transform:rotate(0) scale(1.03)}@keyframes dealCard{0%{opacity:0;transform:translate(90px,130px) rotate(18deg) scale(.7)}}.drag-ghost{position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,-78%);filter:drop-shadow(0 16px 18px rgb(0 0 0 / 28%))}.drag-ghost .playing-card{border-radius:12px;animation:ghostLift var(--motion-fast) cubic-bezier(.2,.9,.2,1)}@keyframes ghostLift{0%{opacity:.4;transform:scale(.75)}}.tutorial-card{position:fixed;z-index:200;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(var(--safe-bottom) + 12px);padding:17px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 24px 60px #00000042;backdrop-filter:blur(18px);animation:coachIn var(--motion) cubic-bezier(.2,.9,.2,1)}@keyframes coachIn{0%{opacity:0;transform:translateY(30px) scale(.96)}}.tutorial-card{padding:15px 17px 17px;transform-origin:top right}.tutorial-lesson-modal.is-opening{animation:tutorialLessonOpen var(--motion) cubic-bezier(.2,.85,.25,1) both}.tutorial-lesson-modal.is-minimizing{pointer-events:none;animation:tutorialLessonMinimize var(--motion-fast) cubic-bezier(.4,0,.7,.2) both}@keyframes tutorialLessonOpen{0%{opacity:0;transform:translateY(calc(-100dvh + 104px)) scale(.08)}}@keyframes tutorialLessonMinimize{to{opacity:0;transform:translateY(calc(-100dvh + 104px)) scale(.08)}}.tutorial-progress{display:grid;grid-template-columns:48px 1fr 32px;align-items:center;gap:8px;margin-bottom:14px}.tutorial-progress>button{min-width:44px;min-height:44px;padding:0;border:0;color:var(--muted);background:transparent;font-size:1rem;text-align:left}.tutorial-progress>span{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.tutorial-progress i{height:4px;border-radius:2px;background:var(--surface-3)}.tutorial-progress i.done{background:var(--opponent)}.tutorial-progress b{color:var(--muted);font-size:.78rem;text-align:right}.tutorial-card h2{margin:7px 0 8px;font-size:clamp(1.35rem,6vw,1.8rem);letter-spacing:-.035em}.tutorial-card p{margin:0;color:var(--muted);font-size:clamp(1.0625rem,4.5vw,1.18rem);line-height:1.55}.tutorial-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px}.tutorial-actions button{width:100%;min-height:48px;border:0;border-radius:12px;color:var(--bg);background:var(--opponent);font-size:1rem;font-weight:850}.tutorial-actions .lesson-next{color:var(--ink);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}.toast{position:fixed;z-index:500;left:50%;bottom:calc(var(--safe-bottom) + 18px);width:min(90%,460px);padding:12px 15px;border:1px solid color-mix(in srgb,var(--opponent) 40%,var(--line));border-radius:14px;color:var(--opponent);background:var(--surface);box-shadow:var(--shadow);font-size:.78rem;transform:translate(-50%);animation:toastIn .25s ease-out}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,15px)}}.review-screen{gap:15px}.review-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}.review-score>div{display:grid;gap:4px}.review-score>div:last-child{justify-items:end;text-align:right}.review-score span{color:var(--muted);font-size:.75rem}.review-score strong{color:var(--team);font-size:2.4rem}.review-score>div:last-child strong{color:var(--opponent)}.review-score>b{color:var(--line-strong)}.breakdown{min-height:0;overflow-y:auto;display:grid;gap:12px}.breakdown article{overflow:hidden;border:1px solid var(--line);border-radius:15px;background:var(--surface)}.breakdown article.ours{border-color:color-mix(in srgb,var(--team) 42%,var(--line))}.breakdown article header,.breakdown article>div{display:flex;justify-content:space-between;gap:10px;padding:11px 14px}.breakdown article header{background:var(--surface-2)}.breakdown article>div+div{border-top:1px solid var(--line)}.breakdown article span{color:var(--muted);font-size:.82rem}.positive{color:var(--team)}.negative{color:var(--opponent)}.review-next{width:100%;margin-top:auto}.sheet-backdrop{position:fixed;z-index:1000;inset:0;display:grid;align-items:end;padding-top:var(--safe-top);background:#05090d7a;backdrop-filter:blur(8px);animation:fadeIn .18s ease-out}@keyframes fadeIn{0%{opacity:0}}.sheet{width:min(100%,680px);max-height:calc(100dvh - var(--safe-top) - 16px);justify-self:center;overflow:hidden;padding:20px max(20px,env(safe-area-inset-right)) calc(20px + var(--safe-bottom)) max(20px,env(safe-area-inset-left));border:1px solid var(--line);border-bottom:0;border-radius:26px 26px 0 0;background:var(--surface);box-shadow:0 -20px 60px #00000038;animation:sheetIn .32s cubic-bezier(.2,.85,.2,1)}@keyframes sheetIn{0%{transform:translateY(100%)}}.sheet>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;padding-left:52px}.sheet h2{margin:5px 0 0;font-size:1.8rem;letter-spacing:-.045em}.sheet-scroll{max-height:calc(100dvh - var(--safe-top) - 115px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:10px}.sheet-intro{margin:0 0 15px;color:var(--muted);font-size:1.0625rem;line-height:1.58}.rules-live-summary{display:grid;gap:6px;margin:0 0 15px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;color:var(--ink);background:var(--surface-2);font-size:1rem;line-height:1.55}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.preset-grid button{min-height:76px;display:grid;align-content:center;gap:4px;padding:11px;border:1px solid var(--line);border-radius:14px;color:var(--ink);background:var(--surface-2);text-align:left}.preset-grid button.selected{border-color:var(--spade);background:color-mix(in srgb,var(--spade) 12%,var(--surface))}.preset-grid span{color:var(--muted);font-size:.86rem;line-height:1.35}.sheet h3{margin:22px 0 8px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}.setting-row,.toggle-row,.speed-row{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}.setting-row{flex-wrap:wrap;align-items:flex-start}.setting-row>span,.toggle-row>span,.speed-row>span{display:grid;gap:3px}.setting-row small,.toggle-row small,.speed-row small{color:var(--muted);font-size:.86rem;line-height:1.4}.setting-row select{width:100%;max-width:none;min-height:44px;padding:0 28px 0 9px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:var(--surface-2);font-size:1rem;font-weight:700}.toggle-row input{width:46px;height:27px;accent-color:var(--spade)}.speed-row{align-items:flex-end}.speed-row input{width:48%;accent-color:var(--spade)}.rules-primer{padding:14px;border-radius:16px;background:var(--surface-2)}.rules-primer h3{margin:0 0 8px}.rules-primer ol{margin:0;padding-left:1.25rem;color:var(--muted);font-size:1.0625rem;line-height:1.62}@media(min-width:650px){.game-screen{width:min(100%,620px);margin:0 auto}.play-area{width:100%}}@media(max-height:740px){.game-screen{grid-template-rows:46px 98px minmax(0,1fr) 110px 108px;gap:3px;padding-top:max(4px,calc(var(--safe-top) + 2px));padding-bottom:max(2px,var(--safe-bottom))}.game-header,.screen-header{min-height:46px}.game-header .icon-button{width:46px;height:46px}.hand-section{grid-template-rows:1fr}.playing-card{width:60px;height:90px}.card-fan .playing-card{--hand-card-width: min(calc(60px * var(--card-scale)), 50px);--hand-card-height: min(calc(86px * var(--card-scale)), 66px);left:calc(var(--fan-inset) + var(--i) * (100% - 2 * var(--fan-inset) - var(--hand-card-width)) / max(1,calc(var(--count) - 1)));transform:translateY(calc((var(--i) - var(--mid)) * (var(--i) - var(--mid)) * .08px)) rotate(calc((var(--i) - var(--mid)) * 1.25deg))}.card-fan{--fan-inset: 19px;--fan-bottom: 12px}.card-fan .card-corner{top:4px;left:6px;width:22px;min-height:29px;row-gap:2px}.card-fan .card-corner b{font-size:1rem}.card-fan .card-corner span{font-size:.75rem}.card-fan .card-suit{right:3px;bottom:3px;left:36%;height:36%;font-size:1.35rem}.tutorial-card{padding:12px 14px}.tutorial-card p{font-size:1rem}}@media(max-width:340px)and (max-height:600px){.game-screen{grid-template-rows:46px 64px minmax(0,1fr) 76px 92px;gap:2px;padding-block:0}.game-header,.scoreboard,.status-rail,.hand-section{margin-inline:8px}.card-fan{--fan-inset: 18px;--fan-bottom: 10px}.card-fan .playing-card{--hand-card-width: min(calc(52px * var(--card-scale)), 41.33px);--hand-card-height: min(calc(72px * var(--card-scale)), 54px);transform:translateY(calc((var(--i) - var(--mid)) * (var(--i) - var(--mid)) * .06px)) rotate(calc((var(--i) - var(--mid)) * 1.25deg))}.card-fan .card-corner{top:3px;left:4px;width:19px;min-height:27px}.card-fan .card-corner b{font-size:.9375rem}.card-fan .card-corner span{font-size:.6875rem}.card-fan .card-suit{right:2px;bottom:3px;left:36%;height:34%;font-size:1.1875rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}.card-fan .playing-card.legal-choice{z-index:calc(40 + var(--i));opacity:1;filter:none;bottom:calc(var(--fan-bottom) + 12px);transform:rotate(calc((var(--i) - var(--mid)) * 1.25deg));box-shadow:0 10px 20px #14191e3d,0 0 0 2px color-mix(in srgb,var(--spade) 62%,transparent)}.card-fan .playing-card.legal-choice.selected{z-index:calc(80 + var(--i))!important;bottom:calc(var(--fan-bottom) + 17px);transform:rotate(0) scale(1.03)}