.stage{max-width:680px;margin:24px auto;padding:16px}.turnbar{--tb-st-lines:2;--tb-msg-lines:2;--tb-rt:0px;--tb-st-rt:0px}.turnbar:lang(ja){--tb-st-lines:1;--tb-rt:11px;--tb-st-rt:11px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field{display:flex;flex-direction:column;gap:6px}.field input,.field select{width:100%;min-height:44px;font-size:16px;border:2px solid var(--line-strong);border-radius:6px;padding:8px;background:var(--surface);color:var(--ink)}
.field select{appearance:none;padding-right:32px;background-image:linear-gradient(45deg,transparent 50%,var(--ink-sub) 50%),linear-gradient(135deg,var(--ink-sub) 50%,transparent 50%);background-position:calc(100% - 17px) 19px,calc(100% - 11px) 19px;background-size:6px 6px;background-repeat:no-repeat}
#table{background:#175c46 url('assets/felt.webp') center/256px;border-radius:6px;padding:12px;color:#fff8ea;margin-top:8px}#table[hidden]{display:none}#table .meta{color:inherit}
.phases{display:flex;gap:4px;list-style:none;padding:0;margin:0 0 8px;font-size:12px}.phases li{flex:1;padding:5px 2px;border-bottom:2px solid #fff4;white-space:nowrap;text-align:center}.phases li.current{border-bottom:3px solid #ffe09a;font-weight:700;color:#ffe09a}
.scoreboard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0}.score{min-width:0;border-bottom:1px solid #fff4;padding:4px 0}.score strong{font-size:18px}.score span,.score small{display:block;font-size:13px;line-height:1.5}
.table-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;padding:4px 0 8px}.table-meta strong{font-weight:600}.seats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 8px}.seat{border:1px solid #fff5;border-radius:6px;padding:6px;min-width:0;font-size:14px}.seat.current{outline:2px solid #ffe09a;outline-offset:-2px;background:#123e3680}.seat strong,.seat small{display:block}.seat small{font-size:12px}.seat-info{display:flex;gap:4px;align-items:center;white-space:nowrap;font-size:13px}.seat-info svg{width:17px;height:24px}.auction{font-size:13px;line-height:1.65;min-height:38px;padding:4px 0 8px}
.trick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,86px);gap:4px;align-items:center;justify-items:center;margin:8px 0;text-align:center;border:1px solid #fff4;border-radius:6px}.place{display:flex;flex-direction:column;align-items:center;position:relative;min-width:0;width:100%;max-width:142px;color:inherit;background:transparent;border:0;padding:0;font:inherit}.place-0{grid-area:3/2}.place-1{grid-area:2/3}.place-2{grid-area:1/2}.place-3{grid-area:2/1}.place span{font-size:13px;line-height:20px}.place svg{width:48px;height:66px}.card-space{width:48px;height:60px;border:1px dashed #fff6;border-radius:6px;font-size:13px;display:flex;align-items:center;justify-content:center}.place em{position:absolute;bottom:-5px;left:50%;transform:translate(-50%,100%);font-size:12px;font-style:normal;white-space:nowrap;background:#164e3e;padding:0 4px}.place:disabled{opacity:1;cursor:default}.place.legal-target .card-space{outline:3px solid #ffe09a;color:#ffe09a;border-style:solid}.place.winning svg{outline:2px solid #ffe09a;border-radius:6px}.trick-center{grid-area:2/2;font-size:14px;align-self:center}.trick-center small{display:block;font-size:13px}.meta{font-size:14px;color:var(--ink-sub);margin:8px 0}#trick-winner{font-size:13px;margin:6px 0 12px;text-align:center}
#hand-title{font-weight:700;margin:8px 0 4px}.hand{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:8px 0}.playing-card{position:relative;border:2px solid transparent;border-radius:6px;padding:0 0 4px;background:transparent;min-width:44px;min-height:70px;cursor:pointer}.playing-card svg{display:block;width:100%;max-height:110px;filter:drop-shadow(0 1px 1px #0003)}.playing-card:disabled{opacity:1;cursor:default}.hand.constrained .playing-card:disabled{opacity:.5}.playing-card.selected{border-color:#ffe09a;background:#ffe09a;color:#20332c}.playing-card.legal{border-color:#bbdfce}.playing-card.selected.legal{border-color:#ffe09a}.playing-card small{display:block;font-size:12px;line-height:16px;text-align:center}.playing-card:focus-visible,.place:focus-visible{outline:3px solid #ffe09a;outline-offset:2px}
.actions,.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.actions .btn{flex:1;min-width:100px}.actions:empty{display:none}.toolbar .btn{flex:1;min-width:90px}.btn{min-height:44px}#main-actions:has(>button:not([hidden])){margin-bottom:8px}.bid-row{display:grid;grid-template-columns:auto 72px 1fr 1fr;gap:8px;align-items:center}.bid-row input{width:100%;min-height:44px;font-size:16px;background:var(--surface);color:var(--ink);border:2px solid var(--line-strong);padding:6px;border-radius:6px}.bid-row label{font-size:14px}.selection{font-size:14px;line-height:1.5;min-height:24px}.gate{padding:12px;border:2px solid #ffe09a;border-radius:6px;margin:8px 0}.gate p{margin:0 0 8px}.result{margin:12px 0;padding:12px;border:1px solid #fff6;border-radius:6px}.result h2{font-size:24px;margin:0 0 10px}.result p{margin:6px 0;font-size:15px}.auto-label{display:flex;align-items:center;gap:8px;margin-top:12px;min-height:44px}.auto-label input{width:22px;height:22px}.melds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-size:14px;margin-top:8px}.melds h3{grid-column:1/-1;font-size:15px;margin:0}.melds details{border:1px solid #fff5;border-radius:6px;min-width:0;padding:0 8px}.melds summary{min-height:44px;display:flex;align-items:center;cursor:pointer;gap:6px}.melds summary:before{content:'+'}.melds details[open] summary:before{content:'−'}.melds details[open]{grid-column:1/-1}.meld-row{padding:6px 0;border-top:1px solid #fff4}.meld-cards{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.meld-card svg{display:block;width:44px;height:62px}.card-flight{position:fixed;pointer-events:none;z-index:1000}.card-flight svg{width:100%;height:100%}
.article{max-width:800px;margin:auto}.ad-gap{height:150px}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse}td,th{padding:8px;border-bottom:1px solid var(--line);text-align:left}.howto{margin:24px 0}.howto img{display:block;width:100%;height:auto}.howto figcaption{font-size:16px;line-height:1.7;padding:8px 0}
@media(max-width:420px){.stage{padding:8px}#table{padding:8px}.seats{gap:8px}.seat{padding:5px 3px;font-size:13px}.seat small{font-size:11px}.phases{font-size:10px}.hand{gap:8px;grid-template-columns:repeat(6,minmax(44px,1fr))}.playing-card{min-height:64px}.playing-card small{font-size:10px}.trick{grid-template-rows:repeat(3,82px)}.score span,.score small{font-size:12px}.toolbar{display:grid;grid-template-columns:1fr 1fr}.toolbar .btn{min-width:0}.actions .btn{min-width:90px}.bid-row{gap:8px;grid-template-columns:62px 1fr 1fr}.bid-row label{grid-column:1/-1}.form-grid{gap:8px}.field{font-size:14px}.selection{font-size:13px}}
#table .btn.sub{background:#fff8ea;color:#23473a;border-color:#c7d6cc}.place.legal-target .card-space{width:76px;height:60px}.playing-card small{font-weight:600}
#trump-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#trump-actions .btn{min-width:0;font-size:16px}#trump-actions[hidden]{display:none}
@media(max-width:420px){.seat strong{font-size:12px;white-space:nowrap}.place span{font-size:12px}}
@media(max-width:375px){.hand{grid-template-columns:repeat(5,minmax(44px,1fr))}}
@media(prefers-reduced-motion:reduce){.card-flight{display:none}}