/* Big Two · loaded after ../straits-deal/style.css, which supplies the page chrome, buttons, seats, hand tray, card flights
   and dialogs. This file adds what is Big Two's own: its cards, the table in the middle, and four decks to see it in.
   A deck (skin) is the viewer's own choice: body[data-skin] picks the palette here and the picture folder in skins.js. */
:root{--paper:#f6efdc;--ink:#1b2227;--suit-red:#c8332b;--suit-black:#1b2227;--card-edge:#d9cfb2;--pw:clamp(84px,15vh,132px)}
body[data-skin="yumcha"]{--table-art:url('./skins/yumcha/art/table.webp');--back-art:url('./skins/yumcha/art/back.webp');--hero-art:url('./skins/yumcha/art/hero.webp');
 --bg:#150d0b;--panel:#21140f;--panel-2:#2c1b14;--panel-3:#3c251b;--line:#4d3226;--line-2:#7d5a44;--text:#f8f0e0;--muted:#d9c5ab;--faint:#a58c72;--lime:#f2c94c;--lime-ink:#2a1c02;--cyan:#8fd0b0;--coral:#e8604c;--gold:#f2c94c;
 --paper:#f8f0dc;--suit-red:#c8322a;--suit-black:#1d2a24;--glow:#c8322a}
body[data-skin="neon"]{--table-art:url('./skins/neon/art/table.webp');--back-art:url('./skins/neon/art/back.webp');--hero-art:url('./skins/neon/art/hero.webp');
 --bg:#05050c;--panel:#0c0c1a;--panel-2:#131328;--panel-3:#1d1d3a;--line:#26264a;--line-2:#4a4a8a;--text:#f3f4ff;--muted:#b6b9e6;--faint:#8083b8;--lime:#ff5fb0;--lime-ink:#2a0418;--cyan:#55e0ff;--coral:#ff8a5c;--gold:#ffe45c;
 --paper:#0b0b16;--ink:#f3f4ff;--suit-red:#ff5fa8;--suit-black:#55d8ff;--card-edge:#3a3a78;--glow:#ff5fb0}
body[data-skin="opera"]{--table-art:url('./skins/opera/art/table.webp');--back-art:url('./skins/opera/art/back.webp');--hero-art:url('./skins/opera/art/hero.webp');
 --bg:#140808;--panel:#200d0d;--panel-2:#2c1212;--panel-3:#3d1919;--line:#522222;--line-2:#8a3f3a;--text:#fbf1e2;--muted:#e0c4b4;--faint:#ad8a7c;--lime:#f0c75e;--lime-ink:#2a1c02;--cyan:#f0c75e;--coral:#ff6b5e;--gold:#f0c75e;
 --paper:#fbf1dd;--suit-red:#cf2a20;--suit-black:#1c1614;--glow:#cf2a20}
body[data-skin="marginalia"]{--table-art:url('./skins/marginalia/art/table.webp');--back-art:url('./skins/marginalia/art/back.webp');--hero-art:url('./skins/marginalia/art/hero.webp');
 --bg:#0b0f17;--panel:#131a25;--panel-2:#1a2331;--panel-3:#243044;--line:#313f57;--line-2:#56698a;--text:#f3ecd9;--muted:#c9c2ab;--faint:#958f7c;--lime:#e6b93f;--lime-ink:#241a02;--cyan:#8fb8e0;--coral:#e0604c;--gold:#e6b93f;
 --paper:#f3ead3;--suit-red:#b8302a;--suit-black:#22303f;--glow:#2b62b8}
body.b2-page button:hover:not(:disabled):not(.quiet):not(.ghost):not(.danger):not(.sd-hand-card):not(.sd-hand-pill){background:color-mix(in srgb,var(--lime) 82%,#fff)}
.sd-match{background:radial-gradient(60% 46% at 50% 40%,color-mix(in srgb,var(--glow) 26%,transparent),transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 78%,transparent),color-mix(in srgb,var(--bg) 92%,transparent)),var(--table-art) center/cover,var(--bg)}
.sd-bar{background:color-mix(in srgb,var(--bg) 94%,transparent)}
.sd-entry-card{background:linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 95%,transparent),color-mix(in srgb,var(--panel) 95%,transparent))}
input,select{background:color-mix(in srgb,var(--bg) 80%,#000)}

/* Cards: paper, an index in two corners, and in the middle the suit, or for the court a picture. */
.sd-card.b2-card{--c:var(--suit-black);border:1px solid var(--card-edge);border-radius:calc(var(--w)*.09);background:var(--paper);color:var(--c);font-family:var(--font);text-align:center;display:block}
.b2-card.red{--c:var(--suit-red)}
.b2-card.boss{box-shadow:inset 0 0 0 calc(var(--w)*.025) var(--gold),0 6px 14px #0007}
.b2-corner{position:absolute;top:calc(var(--w)*.045);left:calc(var(--w)*.055);z-index:2;display:grid;justify-items:center;line-height:1;min-width:calc(var(--w)*.2)}
.b2-corner b{font:800 calc(var(--w)*.23)/1 var(--font);letter-spacing:-.06em}
.b2-corner i{font:normal calc(var(--w)*.2)/1.05 var(--font)}
.b2-corner.flip{top:auto;left:auto;right:calc(var(--w)*.055);bottom:calc(var(--w)*.045);transform:rotate(180deg)}
.b2-mid{position:absolute;inset:17% 10%;display:grid;place-items:center}
.b2-pip{font:normal calc(var(--w)*.62)/1 var(--font)}
.b2-art{position:absolute;inset:-4% -6%;width:112%;height:108%;display:block;object-fit:contain}
.b2-mid:has(.b2-art) .b2-pip{visibility:hidden}
/* Neon court pictures are light on black: on the dark neon card only the light shows. */
/* Neon is a four-colour deck: each suit glows in the colour of its court. */
body[data-skin="neon"] .b2-card[data-suit="s"]{--c:#59b6ff}body[data-skin="neon"] .b2-card[data-suit="h"]{--c:#ff5fa8}body[data-skin="neon"] .b2-card[data-suit="c"]{--c:#4dff9a}body[data-skin="neon"] .b2-card[data-suit="d"]{--c:#ffd84d}
body[data-skin="neon"] .b2-art{mix-blend-mode:screen}
body[data-skin="neon"] .b2-card{box-shadow:0 0 0 1px #000,0 0 12px color-mix(in srgb,var(--c) 45%,transparent)}
body[data-skin="neon"] .b2-corner,body[data-skin="neon"] .b2-pip{text-shadow:0 0 calc(var(--w)*.08) var(--c)}

/* Table: a player on each side, the cards to beat in the middle. */
.b2-main{min-height:0;min-width:0;display:flex;flex-direction:column;padding-bottom:calc(var(--hand-peek) + 8px)}
.b2-seats{display:flex;gap:10px;min-width:0}
.b2-seats:empty{display:none}
.b2-top{flex:none;justify-content:center;align-items:stretch;padding:10px clamp(10px,2vw,20px) 0}
.b2-centre{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,auto);align-items:center;gap:8px;padding:0 clamp(8px,1.5vw,18px)}
.b2-centre>.b2-stage{grid-column:2}
.b2-side{flex-direction:column;justify-content:center;width:clamp(160px,17vw,240px)}
.b2-side:empty{display:block;width:0}
.b2-seat.sd-seat{flex:0 1 320px;min-width:0;padding:8px 10px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 88%,transparent),color-mix(in srgb,var(--panel) 82%,transparent));transition:transform .2s var(--ease),border-color .2s,opacity .2s}
.b2-seat.sd-seat.is-turn{box-shadow:0 0 0 1px var(--lime),0 10px 26px #0008;background:linear-gradient(180deg,color-mix(in srgb,var(--seat) 12%,var(--panel)),var(--panel) 70%)}
.b2-seat.is-out{opacity:.62}
.b2-seat .sd-seat-head{margin-bottom:6px}
.b2-seat .sd-stats{gap:10px}
.b2-side .b2-seat.sd-seat{flex:none}
.b2-side .sd-seat-head{flex-wrap:wrap}
.b2-side .sd-seat-head h2{flex:1 1 calc(100% - 50px)}
.b2-side .sd-stats{margin-left:0;flex:1 0 100%;justify-content:flex-start}
.b2-side .sd-counter{justify-items:start}
.sd-tag.call{background:var(--gold);color:#221c02}
.b2-backs{display:flex;height:calc(var(--bw)*1.44);--bw:26px;padding-left:2px}
.b2-backs i{flex:none;width:var(--bw);height:calc(var(--bw)*1.44);margin-left:calc(var(--bw)*-.7);border-radius:3px;border:1px solid var(--card-edge);background:var(--back-art) center/cover,var(--panel-3);box-shadow:-2px 1px 3px #0008}
.b2-backs i:first-child{margin-left:0}
.b2-left{display:flex;flex-wrap:wrap;gap:3px}
.b2-left .sd-card{--w:32px;box-shadow:0 2px 5px #0008}
.b2-left .b2-mid{display:none}
.b2-left .b2-corner{position:static;height:100%;align-content:center;min-width:0;width:100%}
.b2-left .b2-corner.flip{display:none}
.b2-left .b2-corner b{font-size:calc(var(--w)*.42)}.b2-left .b2-corner i{font-size:calc(var(--w)*.36)}
.b2-stage{min-width:0;min-height:0;display:grid;grid-template-rows:auto auto;justify-items:center;align-content:center;gap:14px;padding:10px clamp(4px,1vw,14px) 6px;position:relative}
.b2-table{position:relative;z-index:1;display:grid;justify-items:center;gap:8px;min-height:calc(var(--pw)*1.44 + 44px)}
.b2-pile{display:flex;justify-content:center;align-items:center;min-width:var(--pw);height:calc(var(--pw)*1.44 + 12px);padding:6px 18px;border-radius:16px}
.b2-pile.empty{border:2px dashed color-mix(in srgb,var(--text) 22%,transparent);width:calc(var(--pw)*2.4)}
.b2-pile .sd-card{--w:var(--pw);flex:none;margin-left:calc(var(--pw)*-.42);transform:rotate(var(--tilt,0deg));box-shadow:0 8px 20px #000a}
.b2-pile .sd-card:first-child{margin-left:0}
.b2-caption{padding:3px 12px;border-radius:999px;background:color-mix(in srgb,var(--bg) 78%,transparent);font:650 14px/1.3 var(--font);color:var(--text);min-height:1.3em}
.b2-caption:empty{visibility:hidden}
.b2-house-note{font:500 11px var(--mono);color:var(--faint)}
.b2-now{display:grid;gap:7px;justify-items:center;text-align:center;width:min(100%,560px);padding:10px 16px 12px;border:1px solid var(--line-2);border-radius:14px;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(6px);box-shadow:0 10px 24px #0006}
.b2-now>*{grid-area:auto}
.b2-now .sd-subline{justify-self:center;background:color-mix(in srgb,var(--bg) 70%,transparent)}
.b2-now .sd-timer{width:100%}
.b2-now .sd-buttons,.b2-now .sd-lobby{justify-content:center}
.b2-now .sd-prompt{justify-items:center}
button.b2-play{min-width:210px;min-height:48px;font-size:16px}
.b2-sorts{display:inline-flex}
.b2-sorts button.b2-sort{border-radius:0;margin-left:-1px}
.b2-sorts button.b2-sort:first-child{border-radius:8px 0 0 8px;margin-left:0}
.b2-sorts button.b2-sort:last-child{border-radius:0 8px 8px 0}
.b2-sorts button.b2-sort[aria-pressed="true"]{background:var(--panel-3);border-color:var(--lime);color:var(--lime);position:relative}
/* The table says out loud what just happened. */
.b2-shout{position:absolute;left:50%;top:30%;z-index:20;pointer-events:none;padding:6px 22px;border-radius:16px;border:3px solid var(--paper);background:color-mix(in srgb,var(--bg) 94%,transparent);color:var(--text);font:900 clamp(26px,5vw,52px)/1.1 var(--font);letter-spacing:-.03em;white-space:nowrap;opacity:0;transform:translate(-50%,-50%) rotate(-5deg)}
.b2-shout.go{animation:b2-shout 1.2s var(--ease) both}
@keyframes b2-shout{0%{opacity:0;transform:translate(-50%,-50%) rotate(-5deg) scale(.4)}14%{opacity:1;transform:translate(-50%,-50%) rotate(-5deg) scale(1.12)}24%{transform:translate(-50%,-50%) rotate(-5deg) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-72%) rotate(-5deg) scale(1)}}
.b2-you{flex:none;display:flex;justify-content:center;padding:0 clamp(10px,2vw,20px)}
.b2-you:empty{display:none}
.b2-you .b2-seat.sd-seat{flex:0 1 440px;padding:6px 12px;border-radius:999px;border-top-width:1px}
.b2-you .b2-seat .sd-seat-head{margin:0}
.b2-check{display:flex;align-items:flex-start;gap:9px;font:500 13px/1.35 var(--font);color:var(--text);letter-spacing:0;text-align:left;cursor:pointer}
.b2-check input{flex:none;min-height:0;width:18px;height:18px;margin:1px 0 0;padding:0;accent-color:var(--lime)}
.b2-check span{display:grid;gap:1px}
.b2-check small{color:var(--muted);font-size:11.5px;line-height:1.3}
.b2-house summary{cursor:pointer;font:500 12px var(--mono);letter-spacing:.04em;color:var(--muted);padding:4px 0}
.b2-house-list{display:grid;gap:8px;padding:6px 0 4px}
.b2-house-list.compact{grid-template-columns:repeat(2,auto);gap:4px 14px;padding:0}
.b2-house-list.compact small{display:none}

/* Hand: the borrowed fan, spaced so thirteen cards fit the width. Picked cards stand up; cards that cannot help sit back. */
.b2-page .sd-hand-card{margin-left:calc(-1*(var(--hw) - min(var(--hw)*.6,(100vw - var(--hw) - 120px)/var(--n,13))));transform:translateY(calc(var(--drop,0px) + var(--lift,0px))) rotate(var(--rot,0deg))}
.b2-page .sd-hand-card:first-child{margin-left:0}
.b2-page .sd-hand-card:hover,.b2-page .sd-hand-card:focus-visible{transform:translateY(calc(var(--drop,0px) - 10px)) rotate(var(--rot,0deg));z-index:auto}
.b2-page .sd-hand-card.picked,.b2-page .sd-hand-card.picked:hover{--lift:calc(var(--hw)*-.26);transform:translateY(calc(var(--drop,0px) + var(--lift))) rotate(var(--rot,0deg));z-index:auto}
.b2-page .sd-hand-card.picked .sd-card{box-shadow:0 0 0 3px var(--lime),0 10px 24px #000c}
.b2-page .sd-hand-card.dull .sd-card{filter:brightness(.62) saturate(.7)}
.b2-page .sd-hand-card.opening:not(.picked) .sd-card{box-shadow:0 0 0 3px var(--cyan),0 10px 24px #000c}
.b2-page .sd-ghost-back{border:1px solid var(--card-edge);background:var(--back-art) center/cover,var(--panel-3)}
.b2-page .sd-drag .sd-card{--w:120px}
body.dragging .b2-stage.drop-ok .b2-pile{outline:2px dashed var(--cyan);outline-offset:6px}
body.dragging .b2-stage.drop-hot{background:none}
body.dragging .b2-stage.drop-hot .b2-pile{outline:3px solid var(--lime);outline-offset:6px}
@media (min-width:641px){
 :root{--hand-peek:calc(var(--hw)*1.36 + 50px)}
 .b2-page .sd-hand,body.b2-page.dragging .sd-hand-tray .sd-hand,body.b2-page.dragging .sd-hand-tray:hover .sd-hand{transform:translateY(6%)}
}

/* Entry page */
body.b2-page:not(.in-match){background:linear-gradient(90deg,var(--bg) 0,color-mix(in srgb,var(--bg) 88%,transparent) 30%,color-mix(in srgb,var(--bg) 30%,transparent) 62%,color-mix(in srgb,var(--bg) 62%,transparent) 100%),linear-gradient(0deg,var(--bg) 4%,transparent 45%),var(--hero-art) 70% center/cover fixed,var(--bg)}
.b2-fan{display:flex;margin:6px 0 22px;padding-left:8px}
.b2-fan .sd-card{--w:74px;margin-left:-22px;transform:rotate(var(--r,0deg)) translateY(var(--y,0));transform-origin:50% 120%;box-shadow:0 8px 18px #000a}
.sd-gallery .sd-card.b2-card{--w:96px}
.sd-rules .b2-card strong,.sd-rules .b2-card b{color:inherit}
.sd-rules{background:var(--panel)}
#results .results-dialog h2{color:var(--lime)}
#room-chat-slot:empty{display:none}
#room-chat-slot .room-chat__log{height:150px}

@media (max-height:900px) and (min-width:641px){
 :root{--pw:clamp(70px,13vh,104px)}
 .b2-stage{gap:8px;padding-top:6px}
 .b2-now{padding:8px 14px 9px;gap:5px}
 .b2-now button{min-height:36px;padding:.35rem .8rem}
 button.b2-play{min-height:42px}
 .b2-backs{--bw:22px}
 .b2-seat.sd-seat{padding:6px 10px}
}
@media (max-height:700px) and (min-width:641px){
 :root{--pw:64px;--hand-peek:calc(var(--hw)*.8 + 8px)}
 .b2-page .sd-hand,body.b2-page.dragging .sd-hand-tray .sd-hand,body.b2-page.dragging .sd-hand-tray:hover .sd-hand{transform:translateY(46%)}
 .b2-you,.b2-house-note{display:none}
}
/* Phones: thirteen cards overlap like a held hand so all of them show at once; each one's index stays readable. */
@media (max-width:640px){
 :root{--pw:clamp(54px,17vw,84px);--hw:74px;--hand-peek:128px}
 .b2-main{padding-bottom:calc(var(--hand-peek) + 4px)}
 .b2-top{gap:6px;padding:6px 8px 0}
 .b2-seat.sd-seat{flex:0 1 220px;padding:5px 8px}
 .b2-centre{gap:4px;padding:0 4px}
 .b2-side{width:74px}
 .b2-side .b2-seat.sd-seat{padding:5px 4px}
 .b2-side .sd-seat-head{flex-direction:column;align-items:center;gap:3px;margin:0}
 .b2-side .sd-seat-head h2{flex:none;max-width:100%;font-size:12px}
 .b2-seat .sd-tag:not(.turn):not(.call){display:none}
 .b2-top .sd-seat-head h2{min-width:56px}
 .b2-side .sd-stats{flex:none;justify-content:center}
 .b2-side .sd-counter{justify-items:center}
 .b2-side .b2-backs,.b2-side .b2-left,.b2-side .sd-counter.sets{display:none}
 .b2-page .sd-bar-title{flex:none}
 .b2-page .sd-bar-actions{flex:1 1 auto;min-width:0;justify-content:flex-start}
 .b2-backs{--bw:16px}
 .b2-stage{gap:8px;padding:6px 2px 4px}
 .b2-pile{padding:4px 6px}
 .b2-pile.empty{width:calc(var(--pw)*2)}
 .b2-caption{font-size:12.5px}
 .b2-house-note{display:none}
 .b2-now{padding:8px 10px;gap:5px}
 .b2-now button{min-height:40px;padding:.4rem .7rem;font-size:14px}
 button.b2-play{min-width:150px;min-height:46px}
 .b2-you{display:none}
 .b2-page .sd-hand{gap:0;padding:22px 8px 0;height:var(--hand-peek)}
 .b2-page .sd-hand-card,.b2-page .sd-hand-card:hover,.b2-page .sd-hand-card:focus-visible{margin-left:calc(-1*(var(--hw) - clamp(18px,(100vw - var(--hw) - 22px)/max(1,var(--n,13) - 1) - 2px,var(--hw) + 6px)));transform:none}
 .b2-page .sd-hand-card:first-child{margin-left:auto}
 .b2-page .sd-hand-card.picked,.b2-page .sd-hand-card.picked:hover{transform:translateY(-16px)}
 .b2-page .sd-hand-card .sd-card{box-shadow:-3px 0 8px #0008}
 .b2-page .sd-hand-card.picked .sd-card{box-shadow:0 0 0 3px var(--lime),-3px 0 8px #0008}
 .b2-fan .sd-card{--w:56px}
}
@media (prefers-reduced-motion:reduce){.b2-shout.go{animation:none;opacity:0}}