:root {
  color-scheme:dark;
  --bg:#101a18;
  --panel:#1c3028;
  --panel-light:#294535;
  --green:#306148;
  --green-light:#a4e6bc;
  --gold:#ffdf8a;
  --cream:#fff8ea;
  --muted:#d4e0d2;
  --line:#789b85;
  --red:#9e1930;
  --table-card-width:clamp(68px,21vw,88px);
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  font-synthesis:none;
}
* { box-sizing:border-box; }
body {
  margin:0;
  color:var(--cream);
  background:radial-gradient(ellipse at 50% 0,#253f30 0,transparent 55%),var(--bg);
  min-height:100dvh;
  line-height:1.5;
}
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button { color:inherit; cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid #fffdf5;
  outline-offset:4px;
}
a { color:inherit; text-decoration:none; }
.hidden { display:none!important; }
.app-shell { max-width:1100px; margin:0 auto; padding:0 24px; }
.site-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:24px 0; }
.brand { display:flex; align-items:center; gap:10px; font-family:Georgia,serif; font-size:32px; line-height:1; }
.brand-mark { font-size:38px; color:var(--gold); }
.brand-detail { display:block; font:14px ui-sans-serif,system-ui,sans-serif; letter-spacing:1px; margin-top:7px; color:var(--muted); }
.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
.icon-button { display:grid; place-items:center; width:44px; height:44px; flex:none; border:1px solid var(--line); background:var(--panel); border-radius:50%; font-size:24px; }
.effects-toggle { min-height:44px; padding:8px 11px; border:2px solid var(--gold); background:var(--panel); border-radius:10px; font-size:14px; font-weight:700; }
.effects-toggle[aria-pressed=true] { background:var(--gold); color:#172b25; border-color:var(--gold); }
.connection { font-size:14px; color:var(--muted); display:flex; align-items:center; gap:7px; }
.connection:before { content:""; width:9px; height:9px; flex:none; background:var(--green-light); border-radius:50%; }
.connection.connecting:before { background:var(--gold); animation:pulse 1.5s infinite; }
.connection.offline:before { background:#ffc0a6; }
.eyebrow { font-size:14px; color:var(--gold); font-weight:750; letter-spacing:1.2px; }
.home-view { display:grid; grid-template-columns:1fr 410px; align-items:center; gap:45px; padding:40px 0 25px; }
.hero { position:relative; min-height:380px; }
.hero h1 { font-family:Georgia,serif; font-size:clamp(38px,4.6vw,60px); font-weight:400; line-height:1.12; letter-spacing:-1px; margin:16px 0 22px; }
.hero>p { max-width:370px; color:var(--muted); font-size:17px; line-height:1.7; }
.hero-cards { height:160px; position:relative; width:230px; margin:35px 0 0 45px; }
.hero-card { position:absolute; top:0; left:70px; width:93px; height:138px; border-radius:10px; color:#172b25; background:#fffdf5; box-shadow:0 10px 25px #0005; }
.hero-card span { position:absolute; top:10px; left:10px; font-family:Georgia,serif; font-size:24px; line-height:1; }
.hero-card b { position:absolute; inset:40px 0 0; display:grid; place-items:center; font-family:Georgia,serif; font-size:57px; font-weight:400; }
.hc-one { transform:rotate(-22deg) translate(-48px,-5px); color:var(--red); }
.hc-two { transform:translate(0,-13px); z-index:1; }
.hc-three { transform:rotate(22deg) translate(48px,-4px); color:var(--red); }
.entry-panel { background:linear-gradient(160deg,#294535,var(--panel)); border:1px solid var(--line); border-radius:20px; box-shadow:0 25px 70px #0002; overflow:hidden; align-self:start; margin-top:20px; }
.entry-tabs { display:flex; border-bottom:1px solid var(--line); }
.entry-tab { flex:1; min-height:56px; border:0; border-bottom:3px solid transparent; background:transparent; padding:16px 7px; font-size:16px; font-weight:700; color:var(--muted); }
.entry-tab.active { color:var(--cream); border-color:var(--gold); background:#13261d; }
.entry-form { padding:25px; display:flex; flex-direction:column; gap:12px; }
label,legend { font-size:16px; font-weight:650; }
label small { font-size:14px; font-weight:400; color:var(--muted); }
input:not([type=radio]),select { width:100%; border:1px solid var(--line); border-radius:9px; background:#14251d; color:var(--cream); padding:13px; min-height:48px; }
input::placeholder { color:#c0cfbf; opacity:1; }
.code-input { text-transform:uppercase; letter-spacing:2px; }
.mode-field { border:0; margin:9px 0 12px; padding:0; min-width:0; }
.mode-field legend { margin-bottom:10px; }
.mode-options { display:flex; gap:10px; }
.mode-option { flex:1; min-width:0; }
.mode-option input { position:absolute; width:1px; height:1px; opacity:0; }
.mode-option>span { display:flex; flex-direction:column; gap:5px; padding:14px 10px; border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:background .15s,border-color .15s; }
.mode-option input:checked+span { background:#13261d; border:2px solid var(--gold); padding:13px 9px; }
.mode-option input:focus-visible+span { outline:3px solid #fffdf5; outline-offset:3px; }
.mode-option b { font-size:24px; font-weight:700; }
.mode-option small { font-size:14px; color:var(--muted); font-weight:400; }
.button { border:1px solid transparent; border-radius:10px; min-height:48px; padding:12px 16px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:16px; font-weight:700; transition:transform .15s; }
.button:hover { transform:translateY(-1px); }
.primary { background:var(--gold); color:#172b25; }
.primary:hover { background:#ffe7a6; }
.secondary { background:var(--panel); border:1px solid var(--line); color:var(--cream); }
.secondary:hover { background:#294535; }
.button[aria-disabled=true],.button:disabled { background:#2a3d33; border:1px solid var(--line); color:var(--muted); cursor:default; transform:none; }
.compact { min-height:44px; padding:9px 12px; font-size:14px; }
.form-note { font-size:14px; line-height:1.6; color:var(--muted); margin:4px 0 0; text-align:center; }
.home-foot { grid-column:1/-1; display:flex; justify-content:center; flex-wrap:wrap; gap:16px 25px; padding-top:24px; font-size:14px; color:var(--muted); }
.inline-error { background:#40261d; border:1px solid #ffc0a6; border-radius:8px; color:#ffe4ca; padding:12px; font-size:16px; line-height:1.5; margin:0 24px 24px; }
.site-footer { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:14px; padding:30px 0 25px; }
.text-button { min-height:44px; border:0; background:none; color:var(--muted); font-size:14px; padding:10px 6px; text-decoration:underline; text-underline-offset:4px; }
.room-view { max-width:1000px; margin:0 auto; }
.room-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:7px 0 20px; }
.room-code-line { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:5px; }
.room-code-line h1 { font-size:24px; letter-spacing:2px; margin:0; }
.soft-badge { font-size:14px; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:3px 7px; color:var(--muted); }
.room-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px; color:var(--muted); font-size:14px; padding:14px 0; }
.voice-panel { margin:0 0 18px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.voice-heading,.voice-title { display:flex; align-items:center; }
.voice-heading { justify-content:space-between; flex-wrap:wrap; gap:8px 12px; margin-bottom:12px; }
.voice-title { flex-shrink:0; gap:8px; }
.voice-title h2 { margin:0; font-size:18px; font-weight:700; }
.voice-title-icon { color:var(--gold); font-size:24px; line-height:1; }
.voice-summary { min-width:0; color:var(--muted); font-size:14px; line-height:1.5; }
.voice-summary.active { color:var(--green-light); }
.voice-summary.problem { color:#ffc0a6; }
.voice-controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.voice-controls .button { min-height:48px; padding:10px 13px; }
.voice-controls .voice-exit { color:var(--muted); }
.voice-description { color:var(--muted); font-size:14px; line-height:1.6; margin:10px 0 0; }
.voice-participants { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0; margin:15px 0 0; gap:12px; list-style:none; }
.voice-person { display:flex; align-items:center; gap:8px; min-width:0; }
.voice-person-dot { width:10px; height:10px; flex:none; border-radius:50%; border:1px solid var(--line); background:transparent; }
.voice-connected .voice-person-dot,.voice-present .voice-person-dot { border-color:var(--green-light); background:var(--green-light); }
.voice-connecting .voice-person-dot { border-color:var(--gold); background:var(--gold); animation:pulse 1.5s infinite; }
.voice-muted .voice-person-dot { border-color:var(--gold); background:transparent; }
.voice-failed .voice-person-dot,.voice-blocked .voice-person-dot { border-color:#ffc0a6; background:#ffc0a6; }
.voice-person-text { display:flex; flex-direction:column; min-width:0; line-height:1.5; }
.voice-person b { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:16px; font-weight:650; }
.voice-person small { color:var(--muted); font-size:14px; }
.voice-connected small { color:var(--green-light); }
.voice-failed small,.voice-blocked small { color:#ffc0a6; }
.voice-notice { color:var(--gold); font-size:14px; line-height:1.6; margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line); }
.voice-notice.error { color:#ffc0a6; }
.voice-media { display:none; }
.lobby-panel { border:1px solid var(--line); background:var(--panel); border-radius:20px; padding:25px; text-align:center; }
.lobby-panel h2 { font-family:Georgia,serif; font-size:30px; font-weight:400; margin:0 0 10px; }
.lobby-panel .intro { color:var(--muted); font-size:16px; line-height:1.6; margin:0 auto 22px; max-width:420px; }
.lobby-table { position:relative; height:360px; max-width:440px; margin:0 auto 22px; border-radius:40%; background:radial-gradient(ellipse,#244b37,#1b392d); border:8px solid #536f50; box-shadow:inset 0 0 0 2px #bda25f,inset 0 0 40px #1023164d,0 12px 20px #0002; }
.table-mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:Georgia,serif; font-size:26px; color:var(--muted); text-align:center; }
.table-mark small { display:none; }
.lobby-seat { position:absolute; width:122px; max-width:35%; transform:translate(-50%,-50%); display:flex; align-items:center; flex-direction:column; gap:5px; }
.lobby-seat .seat-button { width:56px; height:56px; border:2px dashed var(--line); border-radius:50%; background:#13261d; color:var(--cream); font-size:26px; }
.lobby-seat .seat-button.occupied { border:2px solid var(--gold); background:#284939; color:var(--gold); }
.lobby-seat .seat-button.mine { background:var(--gold); color:#172b25; box-shadow:0 0 0 4px #ffdf8a33; }
.lobby-seat .seat-name { font-size:16px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.lobby-seat .seat-subtitle { font-size:14px; line-height:1.3; color:var(--muted); }
.lobby-seat .seat-subtitle.disconnected { color:#ffc0a6; }
.seat-pos-0 { left:50%; top:84%; }
.seat-pos-1 { left:17%; top:49%; }
.seat-pos-2 { left:50%; top:14%; }
.seat-pos-3 { left:83%; top:49%; }
.lobby-table.two .seat-pos-1 { left:50%; top:14%; }
.lobby-actions { display:flex; flex-direction:column; gap:12px; align-items:center; }
.lobby-actions .button { width:min(100%,370px); }
.lobby-status { margin:0; font-size:16px; color:var(--muted); line-height:1.5; }
.team-guide { display:flex; flex-wrap:wrap; gap:12px 20px; justify-content:center; padding-top:18px; font-size:14px; color:var(--muted); }
.team-dot { display:inline-block; width:10px; height:10px; background:var(--gold); border-radius:50%; margin-right:6px; }
.team-dot.team-b { background:#b9ddf5; }
.scoreboard { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); background:var(--panel); border:1px solid var(--line); border-radius:13px; overflow:hidden; margin-bottom:16px; }
.team-score { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; min-width:0; }
.team-score:nth-child(3) { flex-direction:row-reverse; text-align:right; }
.team-score-name { min-width:0; font-size:16px; line-height:1.5; overflow:hidden; }
.team-score-name b { font-size:16px; display:block; color:var(--gold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.team-score:nth-child(3) b { color:#b9ddf5; }
.team-role { display:block; }
.team-score-points { font-size:32px; font-weight:750; line-height:1; }
.team-score-points small { display:block; font-size:14px; color:var(--muted); font-weight:500; margin-top:5px; }
.score-middle { display:flex; flex-direction:column; justify-content:center; align-items:center; border-left:1px solid var(--line); border-right:1px solid var(--line); padding:10px 14px; gap:5px; }
.score-middle b,.score-middle small { font-size:14px; color:var(--muted); }
.score-middle span { font-size:24px; font-weight:700; letter-spacing:2px; }
.table-hud { display:flex; align-items:stretch; flex-wrap:wrap; gap:10px; margin:0 0 14px; }
.hud-item { display:flex; flex:1 1 auto; align-items:center; gap:9px; border:1px solid var(--line); border-radius:9px; padding:9px 12px; background:var(--panel); min-height:58px; min-width:0; }
.hud-item .suit { font-size:34px; color:var(--gold); }
.hud-item small { display:block; font-size:14px; color:var(--muted); margin-bottom:2px; }
.hud-item b { display:block; font-size:16px; }
.hud-item.red .suit { color:#ffc0a6; }
.hud-open { position:relative; }
.hud-open .card { width:50px; height:72px; border-radius:5px; pointer-events:none; }
.hud-open .card-corner { top:5px; left:5px; font-size:18px; flex-direction:row; gap:3px; }
.hud-open .card-corner .mini-suit { font-size:16px; margin:0; }
.hud-open .card-symbol { font-size:25px; top:65%; }
.hud-open .card-corner.bottom { display:none; }
.trump-source { margin:-3px 0 14px; color:var(--muted); font-size:14px; line-height:1.6; text-align:center; }
/* A tall center leaves four large cards clear of the opposing seats, even at 320px. */
.table-board { position:relative; height:calc(var(--table-card-width) * 2.92 + 320px); border:8px solid #536f50; box-shadow:inset 0 0 0 2px #bda25f,inset 0 0 65px #102b2460,0 18px 28px #0002; background:radial-gradient(ellipse at center,#244b37,#1b392d 75%); border-radius:38%; margin:0; isolation:isolate; }
.table-board:before { content:""; pointer-events:none; position:absolute; inset:8px; border:1px dashed #d4e0d24d; border-radius:38%; }
.table-board .watermark { position:absolute; top:48%; left:50%; transform:translate(-50%,-50%); color:#fff8ea10; font-family:Georgia,serif; font-size:100px; z-index:-1; }
.player-seat { z-index:3; position:absolute; width:112px; max-width:25%; transform:translate(-50%,-50%); text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; }
.player-avatar { height:44px; width:44px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:20px; font-weight:750; background:#13261d; color:var(--cream); border:2px solid var(--line); position:relative; box-shadow:0 3px 8px #0002; }
.player-seat.team-b .player-avatar { border-color:#b9ddf5; }
.player-seat.active .player-avatar,.player-seat.winner .player-avatar { border:3px solid var(--gold); box-shadow:0 0 0 4px #ffdf8a33; }
.player-seat.winner .player-status { color:var(--gold); font-weight:750; }
.player-seat.mine .player-avatar { background:var(--gold); color:#172b25; }
.player-seat.active:after { content:""; position:absolute; right:calc(50% - 24px); top:31px; width:10px; height:10px; border:2px solid #1b392d; background:var(--gold); border-radius:50%; }
.player-seat .player-name { font-size:16px; font-weight:650; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.35; }
.player-status { font-size:14px; line-height:1.3; color:var(--muted); max-width:100%; overflow-wrap:anywhere; }
.player-status.offline { color:#ffc0a6; }
.hidden-cards { display:flex; height:24px; flex:none; align-items:center; padding-left:4px; }
.card-back { width:15px; height:22px; background:repeating-linear-gradient(45deg,#d4e0d2 0 1px,#47634e 1px 3px); border:1px solid #fff8ea; border-radius:3px; margin-left:-4px; transform:rotate(-4deg); }
.hidden-cards span { font-size:14px; margin-left:5px; color:var(--muted); }
.player-seat.seat-pos-0 { top:calc(100% - 40px); }
.player-seat.seat-pos-1 { left:10%; top:50%; max-width:18%; }
.player-seat.seat-pos-2 { top:40px; }
.player-seat.seat-pos-3 { left:90%; top:50%; max-width:18%; }
.table-board.two { height:calc(var(--table-card-width) * 1.46 + 290px); }
.table-board.two .player-seat.seat-pos-1 { left:50%; top:40px; }
.table-board.two .player-seat.seat-pos-0 { top:calc(100% - 40px); }
/* Compact top/bottom seats preserve reading space without a needlessly tall table. */
.player-seat.seat-pos-0,.player-seat.seat-pos-2,.table-board.two .player-seat.seat-pos-1 { display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:8px; row-gap:1px; width:190px; max-width:72%; text-align:left; }
.player-seat.seat-pos-0 .player-avatar,.player-seat.seat-pos-2 .player-avatar,.table-board.two .player-seat.seat-pos-1 .player-avatar { grid-column:1; grid-row:1 / 4; }
.player-seat.seat-pos-0 .player-name,.player-seat.seat-pos-0 .player-status,.player-seat.seat-pos-0 .hidden-cards,.player-seat.seat-pos-2 .player-name,.player-seat.seat-pos-2 .player-status,.player-seat.seat-pos-2 .hidden-cards,.table-board.two .player-seat.seat-pos-1 .player-name,.table-board.two .player-seat.seat-pos-1 .player-status,.table-board.two .player-seat.seat-pos-1 .hidden-cards { grid-column:2; justify-self:start; }
.player-seat.seat-pos-0.active:after,.player-seat.seat-pos-2.active:after,.table-board.two .player-seat.seat-pos-1.active:after { left:34px; right:auto; top:44px; }
.trick-area { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:calc(var(--table-card-width) * 2 + 12px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); justify-items:center; align-items:start; gap:40px 12px; }
.trick-area:not(.collection-area) { z-index:2; }
.trick-area.two { display:flex; justify-content:center; gap:18px; width:calc(var(--table-card-width) * 2 + 18px); }
.trick-play { text-align:center; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; }
.trick-play small { font-size:14px; display:block; max-width:var(--table-card-width); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4; color:var(--cream); }
.trick-area .card { width:var(--table-card-width); height:calc(var(--table-card-width) * 1.46); }
.trick-area .trick-play.winner .card { box-shadow:0 0 0 3px var(--gold),0 6px 14px #0004; }
.trick-area .trick-play.winner small { color:var(--gold); font-weight:750; }
.empty-trick { position:absolute; top:48%; left:50%; transform:translate(-50%,-50%); width:55%; text-align:center; }
.empty-trick strong { font-family:Georgia,serif; font-size:25px; font-weight:400; line-height:1.25; }
.empty-trick p { font-size:16px; color:var(--muted); line-height:1.5; margin:10px 0 0; overflow-wrap:anywhere; }
.game-status { display:flex; align-items:center; justify-content:center; gap:9px; font-size:16px; min-height:52px; margin:16px 0 0; border:1px solid var(--line); border-radius:10px; background:var(--panel); text-align:center; line-height:1.5; padding:12px; }
.game-status.your-turn,.game-status.resolving { background:#263e2e; border:2px solid var(--gold); color:var(--gold); font-weight:700; }
.game-status .status-dot { height:9px; width:9px; border-radius:50%; background:var(--gold); flex:none; }
.connection-banner { margin:0 0 14px; background:#402d1d; border:1px solid var(--gold); color:#ffe4b5; border-radius:10px; padding:12px; font-size:16px; line-height:1.5; }
.hand-panel { padding:18px 0 10px; }
.hand-heading { display:flex; justify-content:space-between; flex-wrap:wrap; gap:5px 12px; align-items:center; padding:0 0 32px; color:var(--muted); font-size:14px; }
.hand-heading strong { color:var(--cream); font-size:18px; }
.own-hand { display:flex; justify-content:center; gap:12px; min-height:145px; align-items:flex-start; }
.card { position:relative; flex:none; display:block; width:94px; height:136px; background:#fffdf5; color:#172b25; border:1px solid #172b25; border-radius:8px; box-shadow:0 5px 9px #0003; text-align:left; padding:0; font-family:Georgia,"Times New Roman",serif; }
.card.red { color:var(--red); }
.card-corner { position:absolute; top:7px; left:7px; display:flex; flex-direction:column; align-items:center; font-size:25px; line-height:1; font-weight:700; }
.card-corner .mini-suit { font-size:.85em; margin-top:3px; }
.card-corner.bottom { top:auto; left:auto; right:7px; bottom:7px; transform:rotate(180deg); }
.card-symbol { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:38px; line-height:1; font-weight:400; }
.card-trump { position:absolute; left:50%; top:-25px; transform:translateX(-50%); font:700 14px/1.2 ui-sans-serif,system-ui; background:#ffdf8a; color:#172b25; border:1px solid #172b25; border-radius:4px; padding:2px 4px; }
.card-rank-name { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font:14px ui-sans-serif,system-ui; text-transform:uppercase; color:inherit; }
.own-hand .card { transition:transform .16s,box-shadow .16s; }
.own-hand .card:hover { transform:translateY(-5px); box-shadow:0 9px 16px #0004; }
.own-hand .card[aria-disabled=true] { background:#eee8d6; opacity:1; border:2px dashed #5c5343; }
.own-hand .card[aria-disabled=true]:after { content:""; position:absolute; right:5px; top:5px; width:8px; height:8px; border:2px solid #5c5343; border-radius:50%; background:#fffdf5; }
.own-hand .card[aria-disabled=true]:hover { transform:translateY(-2px); }
.own-hand .card[aria-disabled=false] { box-shadow:0 0 0 3px var(--gold),0 7px 12px #0003; }
/* Inline rank + suit keep large indices away from the center symbol on small table cards. */
.trick-area .card-corner,.last-trick .card-corner { font-size:24px; top:5px; left:5px; flex-direction:row; align-items:center; gap:3px; line-height:1.05; }
.trick-area .card-corner .mini-suit,.last-trick .card-corner .mini-suit { font-size:21px; margin:0; }
.trick-area .card-corner.bottom,.last-trick .card-corner.bottom { right:5px; bottom:5px; top:auto; left:auto; }
.trick-area .card-symbol,.last-trick .card-symbol { font-size:34px; }
.preparation-panel,.result-panel { background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:22px; margin:16px 0 0; text-align:center; }
.preparation-panel h2,.result-panel h2 { font:30px Georgia,serif; margin:0 0 12px; line-height:1.2; }
.result-panel h2 { margin-top:14px; margin-bottom:28px; }
.preparation-panel p,.result-panel p { font-size:16px; color:var(--muted); line-height:1.6; margin:0; }
.choice-actions { display:flex; gap:12px; justify-content:center; margin-top:18px; }
.choice-actions .button { flex:1; max-width:250px; font-size:16px; }
.choice-actions .suit { font-size:24px; }
.exchange-panel { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--panel); border:1px solid var(--gold); border-radius:10px; padding:14px; margin:7px 0 14px; }
.exchange-panel p { margin:0; font-size:14px; line-height:1.5; color:var(--muted); }
.exchange-panel strong { display:block; font-size:16px; color:var(--cream); }
.exchange-panel .button { flex:none; }
.last-trick { border:1px solid var(--line); border-radius:10px; background:var(--panel); margin-top:14px; overflow:hidden; }
.last-trick summary { cursor:pointer; min-height:48px; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:16px; list-style:none; line-height:1.5; }
.last-trick summary:after { content:"⌄"; font-size:24px; color:var(--muted); flex:none; }
.last-trick[open] summary:after { content:"⌃"; }
.last-trick-plays { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 12px; padding:0 14px 16px; }
.last-trick .card { width:70px; height:102px; }
.last-trick .trick-play.winner .card { box-shadow:0 0 0 3px var(--gold),0 4px 10px #0003; }
.result-panel .result-kicker { color:var(--gold); font-size:14px; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }
.result-awards { display:grid; grid-template-columns:1fr 1fr; text-align:left; gap:12px; margin:19px 0; }
.award-team { background:#13261d; padding:15px; border:1px solid var(--line); border-radius:9px; min-width:0; }
.award-team h3 { font-size:18px; margin:0 0 12px; color:var(--gold); overflow-wrap:anywhere; }
.award-team:nth-child(2) h3 { color:#b9ddf5; }
.award-row { display:flex; justify-content:space-between; gap:8px; font-size:16px; line-height:1.5; padding:5px 0; color:var(--muted); }
.award-row b { color:var(--cream); flex:none; }
.award-row.total { border-top:1px solid var(--line); margin-top:8px; padding-top:10px; font-weight:700; color:var(--cream); }
.result-panel>.button { width:100%; margin-top:17px; }
.result-note { font-size:14px!important; text-align:left; border-left:3px solid var(--gold); padding-left:12px; margin-top:16px!important; color:var(--muted)!important; }
.result-pending { background:#402d1d; border:1px solid var(--gold); border-radius:9px; padding:14px; text-align:left; color:#ffe4b5; margin:16px 0 0; font-size:16px; line-height:1.6; }
.vote-status { font-size:14px; color:var(--muted); margin-top:11px; }
.modal { width:min(calc(100% - 28px),600px); max-height:88dvh; overflow:auto; padding:24px; border:1px solid var(--line); border-radius:17px; background:var(--panel); color:var(--cream); box-shadow:0 25px 100px #0009; }
.modal::backdrop { background:#08120de0; backdrop-filter:blur(5px); }
.modal-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.modal h2 { font:32px Georgia,serif; letter-spacing:-.5px; margin:14px 0 22px; line-height:1.2; }
.modal p { font-size:16px; line-height:1.7; color:var(--muted); }
.modal label { display:block; margin-bottom:8px; }
.modal .button { margin-top:15px; width:100%; }
.rules-content p { margin:0 0 18px; }
.rules-content b { color:var(--cream); }
.rule-note { border:1px solid var(--gold); background:#13261d; border-radius:10px; padding:15px; }
.rule-note>b { font-size:16px; color:var(--gold); }
.rule-note p { font-size:16px; margin:10px 0 0; }
.toast { position:fixed; bottom:max(25px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); max-width:min(550px,calc(100% - 28px)); width:max-content; background:#fff1ce; color:#172b25; padding:14px 18px; border:1px solid #172b25; border-radius:12px; box-shadow:0 8px 32px #0006; z-index:20; font-size:16px; line-height:1.5; text-align:center; }
.toast.error { background:#ffe4ca; color:#5d3324; }
.provisional-details { text-align:left; border:1px solid var(--line); border-radius:8px; margin-top:14px; font-size:16px; line-height:1.6; background:#13261d; }
.provisional-details summary { cursor:pointer; min-height:48px; padding:12px; color:var(--gold); font-weight:650; }
.provisional-details ul { margin:0; padding:0 16px 14px 30px; color:var(--muted); }
.provisional-details li { margin:0 0 10px; }
.provisional-details li:last-child { margin-bottom:0; }
/* New public events retain their original animation deadline across rerenders.
   Entry space is reserved above each card; colors remain fully opaque. */
.effect-card-play { animation:card-arrive .7s ease-in-out both; }
.effect-trick-win { animation:trick-highlight .8s ease-in-out; border-radius:10px; }
.effect-your-turn { animation:turn-highlight .7s ease-in-out; }
.effect-result { animation:result-arrive .8s ease-in-out both; border-color:var(--gold); outline:2px solid var(--gold); outline-offset:2px; }
.effect-result h2 { animation:result-title .8s ease-in-out both; animation-delay:inherit; }
/* Only the previous public trick is cloned. This layer cannot intercept a
   gesture or cover a new trick; collection begins after the server's pause. */
.collection-area { z-index:1; pointer-events:none; }
/* Flying ivory cards must never become a pale background behind public
   player labels or the captions of a newly played trick. */
.table-board.collecting .player-name,
.table-board.collecting .player-status,
.table-board.collecting .hidden-cards,
.table-board.collecting .trick-area:not(.collection-area) .trick-play small { background:#1b392d; box-shadow:0 0 0 2px #1b392d; }
.effect-trick-collect { animation:trick-collect .65s ease-in-out both; }
.collection-notice { margin:10px 0 0; padding:10px 12px; border:1px solid var(--gold); border-radius:10px; background:var(--panel); color:var(--gold); font-size:14px; font-weight:700; line-height:1.5; }
@keyframes pulse { 50% { opacity:.55; } }
@keyframes card-arrive { from { transform:translateY(-28px); } to { transform:translateY(0); } }
@keyframes trick-highlight { 0%,100% { box-shadow:0 0 0 0 var(--gold); } 45%,70% { box-shadow:0 0 0 4px var(--gold); } }
@keyframes turn-highlight { 0%,100% { box-shadow:0 0 0 0 var(--gold); } 50% { box-shadow:0 0 0 5px var(--gold); } }
@keyframes result-arrive { from { transform:scale(.98); } to { transform:scale(1); } }
@keyframes result-title { from { transform:translateY(20px); } to { transform:translateY(0); } }
@keyframes trick-collect { from { transform:translate(-50%,-50%) translate(0,0) scale(1); } to { transform:translate(-50%,-50%) translate(var(--collect-x,0px),var(--collect-y,-28px)) scale(.35); } }
@media(min-width:1100px) {
  .game-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
  .game-layout>.main-table { min-width:0; }
  .game-side { display:flex; flex-direction:column; }
  .game-side .hand-panel { padding-top:3px; }
  .game-side .own-hand { gap:10px; flex-wrap:wrap; min-height:0; }
  .game-side .hand-heading { padding-bottom:32px; }
  .game-side .preparation-panel,.game-side .result-panel { margin-top:0; }
  .game-side .result-awards { grid-template-columns:1fr; }
  .game-side .choice-actions { flex-direction:column; }
  .game-side .choice-actions .button { max-width:none; width:100%; }
  .game-side .exchange-panel { flex-direction:column; text-align:center; }
  .game-side .exchange-panel .button { width:100%; }
}
@media(max-width:899px) {
  .home-view { display:flex; flex-direction:column; gap:0; padding:20px 0 0; }
  .hero { min-height:0; text-align:center; width:100%; }
  .hero h1 { font-size:44px; margin:15px 0; }
  .hero>p { max-width:380px; margin:0 auto; }
  .hero-cards { height:150px; margin:30px auto 0; transform:scale(.9); transform-origin:top center; }
  .entry-panel { width:100%; max-width:460px; margin-top:0; }
  .home-foot { max-width:460px; }
}
@media(max-width:699px) {
  .app-shell { padding:0 12px; }
  .site-header { padding:20px 0; }
  .brand { font-size:29px; }
  .brand-mark { font-size:34px; }
  .voice-panel { padding:14px; }
  .voice-controls .button { width:auto; }
  .voice-participants { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px; }
  .entry-form { padding:22px 18px; }
  .home-foot { gap:10px 20px; }
  .room-heading { margin:2px 0 17px; }
  .room-code-line h1 { font-size:22px; }
  .lobby-panel { padding:22px 12px; }
  .lobby-table { max-width:360px; height:360px; border-width:6px; }
  .scoreboard .team-score,.scoreboard .team-score:nth-child(3) { flex-direction:column; text-align:center; align-items:center; justify-content:center; gap:9px; padding:12px 8px; }
  .team-score-name { width:100%; font-size:14px; }
  .team-score-name b { font-size:16px; margin-top:3px; }
  .team-score-points { font-size:30px; }
  .team-score-points small { font-size:14px; }
  .score-middle { min-width:82px; padding:9px; }
  .score-middle span { font-size:22px; letter-spacing:1px; }
  .table-board { border-width:6px; }
  .player-seat.seat-pos-1,.player-seat.seat-pos-3 { width:18%; }
  .own-hand { gap:10px; }
  .own-hand .card { width:clamp(84px,23vw,94px); height:calc(clamp(84px,23vw,94px) * 1.45); }
  .own-hand .card-corner { font-size:24px; flex-direction:row; gap:3px; }
  .own-hand .card-corner .mini-suit { font-size:21px; margin:0; }
  .own-hand .card-symbol { font-size:38px; }
  .result-panel,.preparation-panel { padding:20px 16px; }
  .result-awards { grid-template-columns:1fr; }
  .exchange-panel { align-items:stretch; flex-direction:column; }
  .exchange-panel .button { align-self:flex-end; }
  .choice-actions { flex-direction:column; }
  .choice-actions .button { max-width:none; }
}
@media(max-width:499px) {
  .header-actions { width:100%; justify-content:space-between; gap:8px; }
  .header-actions .connection { margin-right:auto; }
  .header-actions .effects-toggle { margin-left:auto; }
  .player-seat.seat-pos-1,.player-seat.seat-pos-3 { max-width:18%; }
  .last-trick-plays { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:359px) {
  .hero h1 { font-size:38px; }
  .lobby-panel { padding:20px 8px; }
  .lobby-table { height:360px; }
  .lobby-seat { width:108px; }
  .lobby-seat .seat-name { font-size:14px; }
  .lobby-seat .seat-subtitle { font-size:14px; }
  .table-hud { gap:8px; }
  .hud-item { padding:8px; gap:7px; }
  .score-middle { min-width:72px; padding:8px 5px; }
  .score-middle b,.score-middle small { font-size:14px; }
  .score-middle span { font-size:20px; }
  .team-score-name b { font-size:14px; }
  .team-role { font-size:14px; }
  .scoreboard .team-score,.scoreboard .team-score:nth-child(3) { padding:12px 5px; }
  .own-hand { gap:8px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}