:root{--felt: #1f5d3f;--felt-dark: #154431;--felt-light: #2a7350;--ink: #f4f1e8;--ink-muted: #b9cbbf;--panel: rgba(0, 0, 0, .28);--card-bg: #fdfcf7;--card-ink: #1d1d1f;--card-red: #c62828;--team-0: #f2c14e;--team-1: #7cc6fe;--accent: #f2c14e;--card-w: clamp(40px, min(14vw, 11vh), 110px);--card-h: calc(var(--card-w) * 1.45);--hand-peek: .4;--hand-card-w: clamp(44px, min(calc((100vw - 24px) / (1 + 12 * var(--hand-peek))), 22vh), 110px);color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at center,var(--felt-light),var(--felt) 55%,var(--felt-dark));color:var(--ink)}button,.button{font:inherit;padding:.45em .9em;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:#ffffff14;color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block}button:hover:not(:disabled){background:#ffffff29}button:disabled{opacity:.5;cursor:default}button.primary,.button.primary{background:var(--accent);border-color:var(--accent);color:#222;font-weight:600}button.big,.button.big{padding:.7em 1.4em;font-size:1.05rem}input[type=text],input:not([type]){font:inherit;padding:.55em .7em;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:#00000040;color:var(--ink);width:100%;margin-top:.35em}code{background:#0000004d;padding:.1em .35em;border-radius:4px;word-break:break-all}.panel{background:var(--panel);border-radius:14px;padding:1.25rem;display:flex;flex-direction:column;gap:1rem}.hint{color:var(--ink-muted);margin:0;font-size:.92rem}.banner{position:fixed;top:0;inset-inline:0;text-align:center;background:#b23b3b;padding:.35rem;z-index:20}.toast{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);background:#2b2b2b;border:1px solid #b23b3b;padding:.6rem 1rem;border-radius:10px;z-index:30;max-width:calc(100vw - 2rem)}.home,.lobby{max-width:560px;margin:0 auto;padding:2rem 16px}.home h1,.lobby h1{font-size:2.6rem;margin:0 0 .25rem;letter-spacing:.04em}.tagline{color:var(--ink-muted);margin-top:0}.home label{display:block}.seat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.seat-card{border-radius:10px;padding:.75rem;background:#0003;border-left:4px solid var(--team-color);display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}.seat-card.mine{outline:2px solid var(--accent)}.seat-label{font-size:.8rem;color:var(--ink-muted)}.seat-name{font-weight:600}.seat-actions{display:flex;flex-wrap:wrap;gap:.4rem}.team-0{--team-color: var(--team-0)}.team-1{--team-color: var(--team-1)}.options{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}.table-page{min-height:100dvh;display:flex;flex-direction:column;max-width:1200px;margin:0 auto;padding:0 8px}.scorebar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 8px;font-size:.9rem}.rise{text-align:right;min-width:0}.progress{height:6px;width:min(220px,50vw);margin-top:4px;margin-left:auto;background:#0000004d;border-radius:3px;overflow:hidden}.progress .fill{height:100%;background:var(--team-color);transition:width .4s}.table{flex:1;display:grid;grid-template-columns:minmax(70px,1fr) minmax(0,2.4fr) minmax(70px,1fr);grid-template-rows:auto 1fr;grid-template-areas:". top ." "left center right";gap:8px;min-height:300px}.badge{background:var(--panel);border-radius:10px;padding:.4rem .6rem;border-top:3px solid var(--team-color);display:flex;flex-direction:column;align-items:center;gap:.3rem;align-self:center;justify-self:center;min-width:0;max-width:100%;transition:box-shadow .2s}.badge.turn{box-shadow:0 0 0 2px var(--accent),0 0 18px #f2c14e73;animation:waiting-pulse 1.6s ease-in-out infinite}@keyframes waiting-pulse{50%{box-shadow:0 0 0 2px var(--accent),0 0 4px #f2c14e33}}@media (prefers-reduced-motion: reduce){.badge.turn{animation:none}}.badge-top{grid-area:top}.badge-left{grid-area:left}.badge-right{grid-area:right}.badge-name{font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;justify-content:center;text-align:center}.dealer{background:#fff;color:#222;border-radius:999px;padding:0 .45em;font-size:.7rem;font-weight:600;line-height:1.5}.role{background:var(--accent);color:#222;border-radius:4px;padding:0 .3em;font-size:.7rem}.backs{display:flex}.backs .card+.card{margin-left:-18px}.badge-left .backs .card+.card,.badge-right .backs .card+.card{margin-left:-22px}.bid-status{font-size:.8rem;color:var(--ink-muted)}.verbal{font-style:italic}.card-count{display:none;font-size:.75rem;font-weight:400;color:var(--ink-muted)}.offline{font-size:.75rem;color:#ff9b9b}.center{grid-area:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-width:0}.contract{text-align:center}.contract-title{font-weight:700;font-size:1.05rem}.tricks-won{font-size:.85rem;color:var(--ink-muted)}.trick{display:grid;grid-template-columns:repeat(3,var(--card-w));grid-template-rows:repeat(3,calc(var(--card-h) * .62));grid-template-areas:". top ." "left . right" ". bottom .";gap:4px;place-items:center;padding-block:calc(var(--card-h) * .2)}.slot-top{grid-area:top}.slot-left{grid-area:left}.slot-right{grid-area:right}.slot-bottom{grid-area:bottom}.slot .card{animation:drop-in .22s ease-out}@keyframes drop-in{0%{transform:scale(.7);opacity:0}}.me{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem 0 1rem}.me .badge{flex-direction:row;padding:.25rem .7rem}.prompt{min-height:2.2em;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;text-align:center;font-size:.95rem}.prompt-buttons{display:inline-flex;gap:.4rem}.hand{--card-w: var(--hand-card-w);display:flex;justify-content:center;padding-top:14px;max-width:100%}.hand .card+.card{margin-left:calc(var(--card-w) * (var(--hand-peek) - 1))}.card{width:var(--card-w);height:calc(var(--card-w) * 1.45);border-radius:calc(var(--card-w) * .1);background:var(--card-bg);color:var(--card-ink);border:1px solid rgba(0,0,0,.25);box-shadow:0 2px 6px #00000059;position:relative;padding:0;flex-shrink:0;transition:transform .15s,opacity .15s}.card:disabled{opacity:1;cursor:default}.card.red{color:var(--card-red)}.card .corner{position:absolute;top:3px;left:4px;font-size:calc(var(--card-w) * .24);font-weight:700;line-height:1;text-align:center}.card .pip{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:calc(var(--card-w) * .5);padding-top:20%;padding-left:20%}.card.playable{cursor:pointer}.card.playable:hover{transform:translateY(-10px);background:#fff}.card.raised{transform:translateY(-12px);box-shadow:0 0 0 2px var(--accent),0 4px 10px #0006}.card.dimmed{filter:brightness(.6)}.card.small{--card-w: 26px;border-radius:3px}.card.small .pip{display:none}.card.small .corner{font-size:10px;top:2px;left:3px}.card.back{background:repeating-linear-gradient(45deg,#8b2e2e,#8b2e2e 4px,#a43a3a 4px,#a43a3a 8px);border:2px solid #f4f1e8}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:grid;place-items:center;padding:16px;z-index:10}.dialog{background:var(--felt-dark);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:1.5rem;max-width:380px;width:100%;text-align:center;display:flex;flex-direction:column;gap:.6rem;align-items:center}.dialog h2,.dialog p{margin:0}.dialog .points{font-weight:600;color:var(--accent)}@media (max-width: 520px){.table{grid-template-columns:minmax(64px,1fr) minmax(0,2fr) minmax(64px,1fr);gap:4px}.backs .card+.card,.badge-left .backs .card+.card,.badge-right .backs .card+.card{margin-left:-22px}.badge-left .backs,.badge-right .backs{display:none}.badge-left .card-count,.badge-right .card-count{display:inline}.scorebar{font-size:.8rem}}@media (orientation: landscape) and (max-height: 520px){:root{--card-w: clamp(36px, 12vh, 60px);--hand-card-w: clamp(44px, min(calc((100vw - 24px) / (1 + 12 * var(--hand-peek))), 18vh), 100px)}.table-page{min-height:100dvh}.scorebar{padding:.15rem 8px;font-size:.8rem}.rise{display:flex;align-items:center;gap:.5rem}.progress{margin-top:0;width:min(160px,25vw)}.table{min-height:0;gap:4px}.badge{flex-direction:row;flex-wrap:wrap;justify-content:center;padding:.15rem .5rem;gap:.15rem .4rem}.card.small{--card-w: 22px}.backs{display:none}.card-count{display:inline}.center{gap:.15rem}.contract-title{font-size:.9rem}.tricks-won{font-size:.75rem}.trick{grid-template-rows:repeat(3,calc(var(--card-h) * .45));padding-block:calc(var(--card-h) * .06)}.me .badge .bid-status{display:none}.me{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.1rem .75rem;padding:.1rem 0 .25rem}.me .hand{flex-basis:100%;padding-top:8px}.prompt{min-height:0;font-size:.85rem}}@media (orientation: landscape) and (max-height: 340px){:root{--hand-card-w: clamp(44px, 16.5vh, 100px)}}.site-header{max-width:820px;margin:0 auto;padding:1rem 16px;display:flex;align-items:center;justify-content:space-between;gap:1rem}.site-header .logo{font-size:1.6rem;font-weight:700;letter-spacing:.04em;color:var(--ink);text-decoration:none}.site-header nav{display:flex;align-items:center;gap:1rem}.site-header nav a:not(.button){color:var(--ink)}.content{max-width:820px;margin:0 auto;padding:0 16px 3rem;line-height:1.6}.content article{background:var(--panel);border-radius:14px;padding:1.5rem clamp(1rem,4vw,2.5rem)}.content h1{font-size:clamp(2rem,6vw,2.6rem);margin:0 0 .5rem}.content h2{margin-top:2.2rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.12)}.content h3{margin-bottom:.25rem}.content a{color:var(--accent)}.content a.button{color:#222}.content li+li{margin-top:.35rem}.lead{font-size:1.1rem}.toc{background:#0003;border-radius:10px;padding:.8rem 1.2rem;margin:1.5rem 0}.toc ol{margin:.4rem 0 0;columns:2 220px}.table-wrap{overflow-x:auto}.content table{border-collapse:collapse;width:100%;font-size:.95rem}.content th,.content td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid rgba(255,255,255,.15);vertical-align:top}.content th{color:var(--ink-muted);font-weight:600}.example,.note{background:#00000038;border-left:4px solid var(--accent);border-radius:6px;padding:.75rem 1rem}.note{margin-top:2rem;color:var(--ink-muted)}.content dt{font-weight:700;margin-top:.8rem}.content dd{margin:.1rem 0 0}.cta{text-align:center;margin-top:2rem}.site-footer{text-align:center;padding:1.5rem 16px 2rem;color:var(--ink-muted)}.site-footer a{color:var(--ink-muted)}.intro{margin-top:2rem;line-height:1.6}.intro h2{font-size:1.25rem;margin:1.5rem 0 .4rem}.intro ul{padding-left:1.2rem}.intro a,.hint a{color:var(--accent)}
