.button{justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--touch-target-min);min-width:var(--touch-target-min);padding:var(--space-2) var(--space-5);border-radius:var(--radius-md);font-family:var(--font-family-base);font-size:var(--font-size-base);cursor:pointer;transition:background-color var(--motion-duration-fast) var(--motion-easing), border-color var(--motion-duration-fast) var(--motion-easing), opacity var(--motion-duration-fast) var(--motion-easing);border:1px solid #0000;font-weight:600;display:inline-flex}.button:disabled{cursor:not-allowed;opacity:.5}.button--primary{background-color:var(--color-accent);color:var(--color-on-accent)}.button--primary:not(:disabled):hover{background-color:color-mix(in srgb, var(--color-accent) 85%, white)}.button--secondary{background-color:var(--color-surface-elevated);color:var(--color-text);border-color:var(--color-border)}.button--secondary:not(:disabled):hover{border-color:var(--color-accent)}.button--danger{background-color:var(--color-danger);color:var(--color-on-danger)}.button--danger:not(:disabled):hover{background-color:color-mix(in srgb, var(--color-danger) 85%, white)}.logo{align-items:center;gap:var(--space-2);margin:0;display:inline-flex}.logo span{font-size:var(--font-size-xl);line-height:1}.panel{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-elevated)}.panel--elevated{background-color:var(--color-surface-elevated)}.panel__title{margin:0 0 var(--space-4);font-size:var(--font-size-lg);color:var(--color-text);font-weight:600}.room-screen__actions{gap:var(--space-3);margin-top:var(--space-4);flex-wrap:wrap;display:flex}.room-screen__seats{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.room-screen__seat{justify-content:space-between;gap:var(--space-3);padding:var(--space-2) 0;display:flex}.room-screen__error{color:var(--color-danger);margin-top:var(--space-3)}.room-screen__invite{font-family:monospace;font-size:var(--font-size-lg);background-color:var(--color-surface-elevated);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);-webkit-user-select:all;user-select:all}.room-screen__field{gap:var(--space-2);margin-bottom:var(--space-4);flex-direction:column;display:flex}.room-screen__input{min-height:var(--touch-target-min);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border);background-color:var(--color-surface-elevated);color:var(--color-text);font-size:var(--font-size-base)}.game-layout{grid-template-rows:auto 1fr auto;min-width:320px;min-height:100dvh;display:grid}.game-layout__header{padding:var(--space-4) var(--space-5);padding-top:max(var(--space-4), env(safe-area-inset-top));border-bottom:1px solid var(--color-border);background-color:var(--color-surface)}.game-layout__main{padding:var(--space-5);overflow-y:auto}.game-layout__footer{padding:var(--space-4) var(--space-5);padding-bottom:max(var(--space-4), env(safe-area-inset-bottom));border-top:1px solid var(--color-border);background-color:var(--color-surface)}@media (width>=600px){.game-layout__main{padding:var(--space-6)}}@media (width>=960px){.game-layout__main{width:100%;max-width:960px;margin-inline:auto}}.card{justify-content:center;align-items:center;gap:var(--space-1);width:var(--card-w);height:var(--card-h);min-width:var(--touch-target-min);min-height:var(--touch-target-min);border-radius:var(--radius-sm);border:1px solid var(--color-border);background-color:var(--color-surface-elevated);font-weight:700;font-size:var(--font-size-lg);cursor:default;flex-direction:column;padding:0;display:inline-flex}button.card:not(:disabled){cursor:pointer}button.card:disabled{cursor:not-allowed;opacity:.5}.card--red{color:var(--color-danger)}.card--black{color:var(--color-text)}.card--face-down{background-color:var(--color-accent);background-image:repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-accent) 80%, black), color-mix(in srgb, var(--color-accent) 80%, black) 4px, transparent 4px, transparent 8px)}.card__suit{font-size:var(--font-size-xl);line-height:1}.felt-shell{flex-direction:column;align-items:center;display:flex}.felt{background:radial-gradient(120% 140% at 50% 30%, var(--color-felt-elevated) 0%, var(--color-felt) 62%);border:1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);width:100%;box-shadow:inset 0 0 0 8px var(--color-bg), inset 0 0 40px #00000073, 0 14px 30px #00000059;margin-top:calc(var(--card-h) * .635 + var(--space-2));border-radius:50%/42%;position:relative}.felt--two{aspect-ratio:4/3.1}.felt--four{aspect-ratio:1/1.02}.seat{align-items:center;gap:var(--space-1);text-align:center;flex-direction:column;display:flex;position:absolute}.seat--bottom{bottom:4%;left:50%;transform:translate(-50%)}.seat--top{top:4%;left:50%;transform:translate(-50%)}.seat--left{top:50%;left:3%;transform:translateY(-50%)}.seat--right{top:50%;right:3%;transform:translateY(-50%)}.seat__tag{font-size:var(--font-size-sm);color:var(--color-text);background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);white-space:nowrap;font-weight:700}.seat--you .seat__tag{color:var(--color-on-accent);background:var(--color-accent);border-color:var(--color-accent)}.seat--active .seat__tag{box-shadow:0 0 0 3px var(--color-felt), 0 0 0 5px var(--color-accent)}.seat--winner .seat__tag{box-shadow:0 0 0 3px var(--color-felt), 0 0 0 5px var(--color-success)}.seat__result{margin-left:var(--space-1);color:var(--color-success)}.seat__count{font-size:var(--font-size-sm);color:var(--color-text-muted)}.felt-corner{z-index:3;max-width:38%;position:absolute;top:5%}.felt-corner--left{left:4%}.felt-corner--right{right:4%}.felt-corner--bottom-right{top:auto;bottom:5%;right:4%}.corner-panel{gap:var(--space-1);border:1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text);background:#0b0d129e;flex-direction:column;display:flex}.corner-panel--right{text-align:right;align-items:flex-end}.corner-panel__title{text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);font-size:.7rem;font-weight:700}.corner-panel__row{white-space:nowrap}.opp-hand{justify-content:center;display:flex}.opp-hand__card{margin:0 calc(var(--card-w) * -.2)}.opp-hand__card:first-child{translate:0 6px;rotate:-8deg}.opp-hand__card:nth-child(2){translate:0 -3px}.opp-hand__card:nth-child(3){translate:0 6px;rotate:8deg}.opp-hand__card--leaving{animation:.38s ease-in forwards opp-hand-card-leave}@keyframes opp-hand-card-leave{to{opacity:0;translate:0 40%;scale:.85}}.opp-hand--top{left:50%;top:calc(var(--card-h) * -.635);position:absolute;transform:translate(-50%)}.opp-hand-slot{width:var(--card-h);height:calc(var(--card-w) * 2.2);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.opp-hand-slot--left{left:calc(var(--card-h) * -.647);transform:translateY(-50%)scaleX(-1)}.opp-hand-slot--right{right:calc(var(--card-h) * -.647)}.opp-hand--side{transform:rotate(90deg)}.your-hand{margin-top:calc(var(--card-h) * -.259);z-index:4;justify-content:center;display:flex;position:relative}.your-hand .card{margin:0 calc(var(--card-w) * -.133);box-shadow:0 6px 14px #00000059}.your-hand .card:first-child{transform:rotate(-8deg)translateY(6px)}.your-hand .card:nth-child(2){transform:translateY(-3px)}.your-hand .card:nth-child(3){transform:rotate(8deg)translateY(6px)}.trick-slot{width:var(--card-w);height:var(--card-h);justify-content:center;align-items:center;display:flex;position:absolute}.trick-slot--bottom{bottom:24%;left:50%;transform:translate(-50%)rotate(-4deg)}.trick-slot--top{top:24%;left:50%;transform:translate(-50%)rotate(3deg)}.trick-slot--left{top:50%;left:22%;transform:translateY(-50%)rotate(-8deg)}.trick-slot--right{top:50%;right:22%;transform:translateY(-50%)rotate(6deg)}.trick-slot--bottom .card{animation:.38s ease-out trick-card-in-bottom}.trick-slot--top .card{animation:.38s ease-out trick-card-in-top}.trick-slot--left .card{animation:.38s ease-out trick-card-in-left}.trick-slot--right .card{animation:.38s ease-out trick-card-in-right}@keyframes trick-card-in-bottom{0%{opacity:0;transform:translateY(40%)scale(.85)}}@keyframes trick-card-in-top{0%{opacity:0;transform:translateY(-40%)scale(.85)}}@keyframes trick-card-in-left{0%{opacity:0;transform:translate(-40%)scale(.85)}}@keyframes trick-card-in-right{0%{opacity:0;transform:translate(40%)scale(.85)}}.trick-slot--winner .card{box-shadow:0 0 0 3px var(--color-felt), 0 0 0 5px var(--color-success);animation:.7s trick-winner-pulse}@keyframes trick-winner-pulse{0%{transform:scale(1)}40%{transform:scale(1.12)}to{transform:scale(1)}}.deck{align-items:center;gap:var(--space-2);z-index:2;flex-direction:column;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.deck__cards{width:calc(var(--card-w) * 1.533);height:calc(var(--card-h) * 1.624);position:relative}.deck__trump{position:absolute;top:0;left:0;transform:rotate(3deg)}.deck__back{top:calc(var(--card-h) * .7235);left:calc(var(--card-w) * .2167);transition:opacity var(--motion-duration-base) ease;position:absolute}.deck__back--0{transform:rotate(90deg)translate(0)}.deck__back--1{transform:rotate(90deg)translate(2px,2px)}.deck__back--2{transform:rotate(90deg)translate(4px,4px)}.deck__back--3{transform:rotate(90deg)translate(6px,6px)}.deck__cards[data-layers="0"] .deck__back,.deck__cards[data-layers="1"] .deck__back--1,.deck__cards[data-layers="1"] .deck__back--2,.deck__cards[data-layers="1"] .deck__back--3,.deck__cards[data-layers="2"] .deck__back--2,.deck__cards[data-layers="2"] .deck__back--3,.deck__cards[data-layers="3"] .deck__back--3{opacity:0}.flying-card{z-index:5;transition:left .48s var(--motion-easing), top .48s var(--motion-easing), opacity .48s ease;pointer-events:none;position:absolute;transform:translate(-50%,-50%)}@media (prefers-reduced-motion:reduce){.flying-card{transition:opacity var(--motion-duration-fast) ease}}.deck__label{font-size:var(--font-size-sm);color:var(--color-text-muted);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);font-variant-numeric:tabular-nums;background:#0b0d128c}.game-screen__banner{padding:var(--space-3);border-radius:var(--radius-md);background-color:var(--color-surface-elevated);margin-bottom:var(--space-4)}.game-screen__banner--error{color:var(--color-danger)}.game-screen__actions{gap:var(--space-3);margin-top:var(--space-3);flex-wrap:wrap;display:flex}.history-screen__list{gap:var(--space-3);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.history-screen__entry{padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border)}.history-screen__actions{margin-top:var(--space-4);justify-content:center;display:flex}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-bg:#0b0d12;--color-surface:#151822;--color-surface-elevated:#1e2330;--color-border:#2a2f3d;--color-text:#f2f4f8;--color-text-muted:#a7b0c2;--color-accent:#e2b93b;--color-on-accent:#1a1506;--color-danger:#ff6b6b;--color-on-danger:#2a0a0a;--color-success:#4caf7d;--color-focus-ring:#7dd3fc;--color-felt:#16332a;--color-felt-elevated:#1d4236;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--radius-sm:.375rem;--radius-md:.625rem;--radius-lg:1rem;--radius-full:999px;--font-family-base:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.5rem;--line-height-base:1.4;--touch-target-min:2.75rem;--card-w:clamp(2.75rem, 7.5vw, 3rem);--card-h:clamp(3.9rem, 10.6vw, 4.25rem);--motion-duration-fast:.12s;--motion-duration-base:.2s;--motion-easing:cubic-bezier(.4, 0, .2, 1);--shadow-elevated:0 8px 24px #0006}@media (prefers-reduced-motion:reduce){:root{--motion-duration-fast:0s;--motion-duration-base:0s}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}*,:before,:after{box-sizing:border-box}html,body{min-width:320px}body{background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);-webkit-text-size-adjust:100%;margin:0}:focus{outline:none}:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}
