:root{--paper:#fbfaf4;--paper-strong:#fffef9;--ink:#222831;--ink-soft:#4f564f;--muted:#777b72;--line:#d9d5c8;--felt:#0d6f52;--felt-deep:#073f33;--felt-dark:#052f29;--felt-light:#188761;--gold:#d7a23d;--red:#b8323b;--shadow:0 20px 44px #12231e24;color:var(--ink);background:var(--paper);font-synthesis:none;text-rendering:optimizelegibility;font-family:Avenir Next,SF Pro Display,Segoe UI,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}body{background:linear-gradient(180deg, #0d6f5214, #fbfaf400 320px), linear-gradient(90deg, #d7a23d14, #fbfaf400 42%), var(--paper);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{background:var(--felt);color:#fff;cursor:pointer;border:0;border-radius:8px;min-height:44px;padding:.72rem 1rem;font-weight:850;transition:transform .16s,box-shadow .16s,background-color .16s,border-color .16s,opacity .16s}button:hover:not(:disabled){transform:translateY(-1px)}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #d7a23d8c}button:disabled{cursor:not-allowed;opacity:.48}input{border:1px solid var(--line);width:100%;min-height:48px;color:var(--ink);background:#fff;border-radius:8px;padding:.7rem .85rem}.appShell{width:min(1240px,100%);min-height:100vh;padding:max(.85rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));margin:0 auto}.topbar{justify-content:space-between;align-items:center;gap:1rem;padding:.2rem 0 .85rem;display:flex}.topbar h1{letter-spacing:0;margin:0;font-size:clamp(1.7rem,4.4vw,3.15rem);line-height:.96}.eyebrow,.label{color:var(--ink-soft);letter-spacing:0;text-transform:uppercase;margin:0 0 .24rem;font-size:.73rem;font-weight:950;display:block}.topActions,.buttonRow{flex-wrap:wrap;align-items:center;gap:.55rem;display:flex}.connection{border:1px solid var(--line);min-height:38px;color:var(--red);background:#fff;border-radius:999px;align-items:center;padding:0 .85rem;font-size:.82rem;font-weight:950;display:inline-flex;box-shadow:0 8px 20px #12231e0f}.connection.isConnected{color:var(--felt)}.ghostButton,.secondaryButton{border:1px solid var(--line);color:var(--ink);background:#fff}.ghostButton:hover:not(:disabled),.secondaryButton:hover:not(:disabled){border-color:#0d6f526b;box-shadow:0 8px 22px #12231e14}.alert{color:#7b2c25;background:#fff0ed;border:1px solid #e0b1a6;border-radius:8px;justify-content:space-between;align-items:center;gap:.7rem;margin:0 0 1rem;padding:.65rem;font-weight:760;display:flex}.alert button{background:#7b2c25;min-height:36px;padding:0 .7rem}.joinBand{align-items:center;min-height:68vh;display:grid}.joinPanel{border:1px solid var(--line);background:var(--paper-strong);width:min(480px,100%);box-shadow:var(--shadow);border-radius:8px;gap:1rem;margin:0 auto;padding:1rem;display:grid}.joinPanel label{color:var(--ink-soft);gap:.35rem;font-size:.84rem;font-weight:900;display:grid}.gameLayout{grid-template-columns:320px minmax(0,1fr);align-items:start;gap:1rem;display:grid}.scoreRail{gap:.8rem;display:grid;position:sticky;top:1rem}.roomStrip,.scoreTable,.roundPanel{border:1px solid var(--line);background:#fffef9f5;border-radius:8px;box-shadow:0 12px 28px #12231e0f}.roomStrip{justify-content:space-between;align-items:center;gap:.7rem;padding:.8rem;display:flex}.roomStrip strong{letter-spacing:0;font-size:1.55rem}.scoreTable{display:grid;overflow:hidden}.scoreRow,.scoreLegend{grid-template-columns:minmax(0,1fr) 136px;align-items:center;gap:.5rem;padding:.7rem .8rem;display:grid}.scoreRow+.scoreRow,.scoreLegend{border-top:1px solid #ede9de}.playerName{align-items:center;gap:.45rem;min-width:0;display:flex}.playerName strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.playerName small{color:#85887f;font-weight:900}.dot{background:#c7c3b5;border-radius:999px;flex:none;width:.65rem;height:.65rem}.dot.online{background:#2fac66}.scoreStats{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;grid-template-columns:repeat(3,1fr);display:grid}.scoreLegend{color:var(--muted);grid-template-columns:minmax(0,1fr) 136px;font-size:.73rem;font-weight:950}.scoreLegend .scoreStats{width:136px}.roundPanel{grid-template-columns:repeat(2,1fr);gap:.75rem;padding:.82rem;display:grid}.roundPanel strong{font-size:1.1rem}.tableSurface{background:linear-gradient(135deg, #ffffff1f, #fff0 26%), repeating-linear-gradient(45deg, #ffffff06 0 1px, #0000 1px 7px), linear-gradient(160deg, var(--felt-light), var(--felt) 46%, var(--felt-deep));color:#fff;border-radius:8px;min-height:72vh;padding:clamp(.75rem,2vw,1.35rem);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff2e,inset 0 0 0 6px #052f2929,0 26px 54px #0d6f5238}.centerStack,.playStack{align-content:center;gap:clamp(.75rem,2vw,1rem);min-height:calc(72vh - 2.7rem);display:grid}.playStack{align-content:space-between}.opponentSeats{scrollbar-width:thin;align-items:stretch;gap:.55rem;padding-bottom:.12rem;display:flex;overflow-x:auto}.opponentSeat{background:#052f2942;border:1px solid #ffffff2e;border-radius:8px;align-items:center;gap:.5rem;min-width:126px;padding:.45rem .55rem;display:flex;box-shadow:inset 0 0 0 1px #ffffff0a}.opponentSeat.isActive{background:#052f296b;border-color:#d7a23ddb}.cardBackStack{flex:none;width:30px;height:42px;position:relative}.cardBackStack span{background:linear-gradient(135deg, #ffffff47, #fff0), repeating-linear-gradient(45deg, #ffffff47 0 2px, #fff0 2px 5px), var(--red);border:1px solid #ffffffa6;border-radius:5px;position:absolute;inset:0;box-shadow:0 8px 16px #052f292e}.cardBackStack span:first-child{opacity:.76;transform:translate(5px,-3px)rotate(5deg)}.cardBackStack span:last-child{transform:rotate(-2deg)}.opponentDetails{min-width:0;line-height:1.05;display:grid}.opponentDetails strong{color:#fff;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem;font-weight:950;overflow:hidden}.opponentDetails small{color:#ffffffb8;font-variant-numeric:tabular-nums;font-size:.72rem;font-weight:850}.statusBlock,.turnBanner{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#052f2975;border:1px solid #ffffff42;border-radius:8px;padding:.9rem}.statusBlock strong,.turnBanner strong{color:#fff;font-size:clamp(1.55rem,4.6vw,2.75rem);line-height:1.02;display:block}.statusBlock small{color:#ffffffc7;margin-top:.35rem;font-weight:800;display:block}.statusBlock .label,.turnBanner .label{color:#ffffffc2}.seats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;display:grid}.seat{background:#ffffff1f;border:1px solid #ffffff3d;border-radius:8px;gap:.25rem;padding:.8rem;display:grid}.seatHeader{justify-content:space-between;align-items:center;gap:.5rem;min-width:0;display:flex}.seat span{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:900;overflow:hidden}.miniButton{color:#fff;background:#ffffff24;border:1px solid #ffffff5c;min-height:30px;padding:0 .55rem;font-size:.72rem}.seat small,.quietText{color:#ffffffc2;font-weight:800}.hostControls{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:.65rem;display:grid}.hostControls button:not(.secondaryButton){background:var(--gold);color:var(--ink);box-shadow:0 12px 26px #052f2933}.hostControls button:not(.secondaryButton):disabled{color:#ffffffb8;box-shadow:none;background:#fffef933}.bidGrid{grid-template-columns:repeat(auto-fit,minmax(54px,1fr));gap:.55rem;display:grid}.bidButton{min-height:58px;color:var(--ink);background:#fffef9;border:1px solid #fffc;font-size:1.15rem;box-shadow:0 12px 26px #052f2933}.bidButton:hover:not(:disabled){border-color:var(--gold);box-shadow:0 14px 30px #052f2942}.trickZone{flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(.55rem,2vw,1.1rem);min-height:clamp(180px,26vh,250px);display:flex}.playedCard{justify-items:center;gap:.4rem;min-width:clamp(76px,8vw,112px);display:grid}.playedCard small{color:#ffffffdb;text-shadow:0 1px 2px #052f298c;font-weight:950}.hand{grid-template-columns:repeat(auto-fit,minmax(70px,94px));justify-content:center;align-items:end;gap:clamp(.48rem,1.2vw,.75rem);min-height:132px;display:grid}.cardButton{aspect-ratio:5/7;min-height:0;color:var(--ink);box-shadow:none;opacity:1;background:0 0;border:0;border-radius:8px;place-items:center;padding:0;display:grid}.cardButton:disabled{cursor:default;filter:none;opacity:1}.cardButton.isPlayable{transform:translateY(-6px)}.cardButton.isPlayable:hover{transform:translateY(-12px)rotate(-1deg)}.cardButton.isPlayable .cardFace{box-shadow:0 0 0 3px #d7a23dc2,0 18px 32px #052f2957}.cardButton.isMuted{opacity:.48;filter:saturate(.45)contrast(.82)}.cardFace{aspect-ratio:5/7;width:100%;color:var(--ink);background:#fff;border-radius:8px;line-height:1;display:block;overflow:hidden;box-shadow:0 14px 28px #052f293d}.playedCard .cardFace{width:clamp(76px,7.6vw,110px);box-shadow:0 16px 32px #052f2952}.cardSvg{width:100%;height:100%;display:block}.fallbackCardFace{place-items:center;padding:.4rem;display:grid}.fallbackCardFace strong{font-size:1.15rem}.fallbackCardFace span{font-weight:950}.flyingCardLayer{z-index:30;pointer-events:none;position:absolute;inset:0}.flyingCard{filter:drop-shadow(0 22px 26px #052f2952);width:clamp(64px,7vw,92px);animation:.86s cubic-bezier(.18,.82,.2,1) forwards flyCardToTrick;position:absolute;top:0;left:0}.flyingCard .cardFace{width:100%;box-shadow:none}@keyframes flyCardToTrick{0%{opacity:0;transform:translate(calc(var(--from-x) - 50%), calc(var(--from-y) - 50%)) scale(.58) rotate(var(--tilt))}16%{opacity:1}78%{opacity:1;transform:translate(calc(var(--to-x) - 50%), calc(var(--to-y) - 50%)) scale(1.05) rotate(0deg)}to{opacity:0;transform:translate(calc(var(--to-x) - 50%), calc(var(--to-y) - 50%)) scale(.96) rotate(0deg)}}.recentTricks{flex-wrap:wrap;justify-content:center;gap:.55rem;display:flex}.recentTricks div{background:#052f2975;border-radius:999px;gap:.45rem;padding:.45rem .72rem;font-size:.82rem;display:flex;box-shadow:inset 0 0 0 1px #ffffff1f}.resultList,.rankingList{gap:.55rem;margin:0;padding:0;display:grid}.resultRow,.rankingList li{font-variant-numeric:tabular-nums;background:#ffffff24;border-radius:8px;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.8rem;padding:.75rem;display:grid}.resultRow.exact{background:#ffffff3d}.resultRow span,.rankingList span{text-overflow:ellipsis;white-space:nowrap;font-weight:900;overflow:hidden}.resultRow small{color:#ffffffc2;font-weight:900}.rankingList li{grid-template-columns:minmax(0,1fr) auto;list-style:none}.roundAction{color:var(--ink);background:#fffef9;justify-self:stretch;box-shadow:0 14px 30px #052f2938}@media (width<=900px){.gameLayout{grid-template-columns:1fr}.scoreRail{order:2;position:static}.tableSurface{min-height:64vh}.centerStack,.playStack{min-height:calc(64vh - 1.6rem)}}@media (width<=560px){.appShell{padding-inline:.65rem}.topbar{align-items:start;display:grid}.topActions{justify-content:space-between}.buttonRow,.hostControls{grid-template-columns:1fr;display:grid}.joinBand{align-items:start;min-height:auto;padding-top:2.25rem}.roomStrip{display:grid}.scoreRow,.scoreLegend{grid-template-columns:minmax(0,1fr) 126px;padding-inline:.65rem}.scoreLegend .scoreStats{width:126px}.roundPanel{grid-template-columns:repeat(4,minmax(0,1fr))}.roundPanel strong{font-size:.98rem}.turnBanner strong{font-size:clamp(1.45rem,10vw,2.35rem)}.opponentSeats{margin-inline:-.15rem}.opponentSeat{min-width:116px}.trickZone{min-height:168px}.hand{grid-template-columns:repeat(auto-fit,minmax(50px,1fr));min-height:104px}.playedCard{min-width:66px}.playedCard .cardFace{width:clamp(64px,19vw,86px)}.flyingCard{width:clamp(58px,18vw,78px)}}@media (prefers-reduced-motion:reduce){.flyingCard{animation-duration:1ms}}