:root { color-scheme: dark; --bg:#260e19; --surface:#34232c; --line:#6b5156; --text:#fff9ed; --muted:#d2bcc4; --green:#66dfad; --gold:#f5d37c; --red:#f5a1a5; }
@property --turn-angle { syntax:"<angle>"; initial-value:0deg; inherits:false; }
* { box-sizing:border-box; letter-spacing:0; }
[hidden] { display:none !important; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; background:repeating-linear-gradient(35deg,#ffffff02 0 1px,transparent 1px 7px),var(--bg); color:var(--text); min-height:100dvh; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { opacity:.45; cursor:default; }
button:focus-visible,a:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
input,select { width:100%; min-width:0; height:50px; padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:#15221b; color:var(--text); font-size:18px; }
input:focus,select:focus { outline:2px solid var(--green); outline-offset:2px; }
label { display:grid; gap:8px; color:var(--muted); font-size:14px; font-weight:700; }
a { color:inherit; }
.topbar { min-height:72px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:8px 24px; border-bottom:1px solid var(--line); gap:12px; }
.back-link { text-decoration:none; font-size:14px; }
.back-link span { font-size:22px; }
.wordmark { display:flex; align-items:center; gap:8px; font-size:24px; font-weight:800; text-decoration:none; }
.wordmark img { width:52px; height:52px; object-fit:contain; }
#connection { justify-self:end; font-size:12px; color:var(--muted); }
#connection::before { content:""; display:inline-block; width:7px; height:7px; background:var(--green); border-radius:50%; margin-right:7px; }
#connection.offline::before { background:var(--red); }
main { max-width:960px; margin:auto; padding:0 24px 24px; }
.entry-view { max-width:410px; margin:30px auto; }
.entry-deck { width:140px; height:110px; object-fit:contain; display:block; margin:auto; }
h1 { font-size:36px; text-align:center; margin:6px 0 28px; }
h2 { font-size:24px; margin:0; }
.entry-tabs { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); margin-bottom:24px; }
.entry-tabs button { background:none; color:var(--muted); border:0; border-bottom:3px solid transparent; padding:16px 4px; font-weight:700; }
.entry-tabs [aria-selected="true"] { color:var(--green); border-color:var(--green); }
#entry-form,#settings-form { display:grid; gap:20px; }
.primary,.secondary,.danger-button { min-height:52px; border-radius:6px; padding:12px 18px; font-weight:700; font-size:18px; }
.primary { background:var(--green); color:#092c1d; border:2px solid var(--green); }
.secondary { background:var(--surface); color:var(--text); border:1px solid var(--line); }
.danger-button { background:transparent; color:var(--red); border:1px solid var(--red); }
#resume { width:100%; margin-top:16px; }
.room-toolbar { display:grid; grid-template-columns:minmax(0,1fr) repeat(3,44px); align-items:center; column-gap:12px; padding:14px 0; }
.room-code { display:flex; gap:12px; align-items:center; background:none; border:0; color:var(--gold); font-size:18px; font-weight:800; padding:8px 0; }
.room-code svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#room-subtitle { grid-column:1; grid-row:2; color:var(--muted); font-size:13px; }
#copy-code { grid-column:1; grid-row:1; justify-self:start; }
#table-settings { grid-column:2; grid-row:1 / 3; }
#sound-toggle { grid-column:3; grid-row:1 / 3; color:var(--green); }
#sound-toggle[aria-checked="false"] { color:var(--muted); }
#history-button { grid-column:4; grid-row:1 / 3; }
.icon-button { display:flex; justify-content:center; align-items:center; width:44px; height:44px; flex:0 0 44px; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:6px; font-size:26px; }
.icon-button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lobby-title { margin:20px 0 24px; text-align:center; font-size:26px; }
.teams { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.team-heading { font-size:16px; margin:0 0 12px; color:var(--green); }
.team-b .team-heading { color:var(--gold); }
.seat { border:1px solid var(--line); border-left:4px solid var(--green); border-radius:6px; min-height:116px; padding:18px; margin-bottom:14px; display:flex; flex-direction:column; justify-content:center; gap:9px; position:relative; }
.team-b .seat { border-left-color:var(--gold); }
.seat-name { display:flex; align-items:center; gap:8px; font-size:21px; font-weight:700; overflow-wrap:anywhere; padding-right:24px; }
.seat-name>span:last-child { min-width:0; }
.seat-status { font-size:13px; color:var(--muted); }
.seat-status.ready { color:var(--green); }
.kick { position:absolute; right:7px; top:7px; width:30px; height:30px; border:0; background:none; color:var(--muted); font-size:24px; }
.lobby-actions { display:grid; gap:12px; max-width:440px; margin:18px auto; }
.room-footer { display:flex; justify-content:space-between; padding:28px 0 6px; }
.text-button { background:none; border:0; padding:10px 0; color:var(--muted); text-decoration:underline; }
.danger { color:var(--red); }
.match-score { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:16px; }
.score-team { display:grid; grid-template-columns:1fr auto; gap:5px 10px; padding:12px; border:1px solid #3c8066; border-top:3px solid var(--green); border-radius:6px; background:#183f33; min-width:0; }
.score-team.b { border-color:#8e7541; border-top-color:var(--gold); background:#493c21; }
.score-team>span:first-child { font-size:13px; font-weight:800; color:var(--green); }
.score-team.b>span:first-child { color:var(--gold); }
.score-team strong { grid-column:2; grid-row:1 / 3; font-size:32px; align-self:center; }
.score-team .score-names { color:#eee9dd; font-size:12px; overflow-wrap:anywhere; }
.score-team .counts { grid-column:1 / -1; color:var(--muted); font-size:11px; }
.team-collection { grid-column:1 / -1; display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:8px; min-width:0; }
.soor-button { display:grid; gap:2px; justify-items:center; padding:6px 2px; color:var(--gold); border:0; background:none; min-height:52px; font-size:12px; }
.soor-button b { font-size:22px; text-decoration:underline; text-underline-offset:4px; }
.capture-pile { position:relative; display:block; width:100%; height:76px; padding:0; border:0; background:none; color:var(--muted); perspective:500px; }
.capture-pile:disabled { opacity:.55; }
.pile-flipper { position:absolute; inset:3px 4px 21px; transform:rotateY(180deg); transform-style:preserve-3d; transition:transform .45s ease; }
.capture-pile.face-up .pile-flipper { transform:rotateY(0); }
.pile-front,.pile-back { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.pile-front { left:50%; right:auto; width:min(100%,calc(36px + (var(--cards) - 1)*26px)); transform:translateX(-50%); }
.pile-front img { position:absolute; left:calc(var(--index)*(100% - 36px)/var(--slots)); top:0; width:36px; height:50.4px; border-radius:3px; box-shadow:0 2px 4px #0007; }
.pile-back { transform:rotateY(180deg); }
.pile-back img { display:block; width:36px; height:50.4px; margin:auto; border-radius:3px; box-shadow:2px 2px 0 #d5d2c7,4px 4px 0 #8c9296,0 3px 5px #0007; }
.pile-label { position:absolute; bottom:0; left:0; right:0; font-size:10px; }
.dealer-deck { position:absolute; z-index:3; width:60px; display:grid; justify-items:center; gap:7px; pointer-events:none; }
.your-name .dealer-deck,.partner .dealer-deck { left:calc(100% + 6px); top:0; }
.left .dealer-deck,.right .dealer-deck { bottom:calc(100% + 16px); left:50%; transform:translateX(-50%); }
.draw-pile { position:relative; width:30px; height:42px; margin:0; transform:rotate(-6deg); border-radius:3px; box-shadow:2px 2px 0 #c0c3b9,4px 4px 0 #53645c,0 3px 7px #0008; }
.draw-pile img { width:100%; height:100%; display:block; border-radius:3px; }
.draw-pile.empty:not(.dealing) { opacity:.2; box-shadow:none; }
.collection-names { color:var(--gold); overflow-wrap:anywhere; }
.collected-cards { display:flex; flex-wrap:wrap; gap:9px; padding:10px 0; }
.collected-cards img { width:62px; height:86.8px; border-radius:4px; box-shadow:0 2px 4px #0006; }
.soor-event { border-top:1px solid var(--line); padding:14px 0; }
.soor-event h3 { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; font-size:17px; margin:0; }
.soor-event h3 span { color:var(--green); font-size:13px; font-weight:400; }
.soor-event.cancelled h3 span { color:var(--red); }
.soor-event p,.empty-collection { color:var(--muted); }
#game-table { max-width:860px; margin:auto; }
.arena { position:relative; padding-top:100px; isolation:isolate; }
.table-surface { position:relative; margin:0 92px; min-height:370px; padding:90px 24px 32px; border:7px solid #d9b563; border-radius:45% / 22%; background:repeating-linear-gradient(22deg,#ffffff04 0 1px,transparent 1px 3px),repeating-linear-gradient(112deg,#00000006 0 1px,transparent 1px 4px),radial-gradient(ellipse at center,#208455,#115c3c); box-shadow:0 0 0 3px #675333,0 0 0 8px #1b2020,0 16px 30px #0008,inset 0 0 30px #032d24bb; transition:box-shadow .15s; }
.table-surface.drop-ready { box-shadow:0 0 0 3px #675333,0 0 0 8px #1b2020,0 16px 30px #0008,inset 0 0 0 2px #f5d37c77,inset 0 0 30px #032d24bb; }
.table-surface.drop-over { box-shadow:0 0 0 3px #fff2b2,0 0 22px #f5d37c80,inset 0 0 35px #e5ffb630; }
.opponent { position:absolute; z-index:2; width:110px; text-align:center; min-width:0; }
.opponent.partner { top:0; left:50%; transform:translateX(-50%); width:190px; }
.opponent.left { left:0; top:48%; }
.opponent.right { right:0; top:48%; }
.player-plaque { position:relative; background:linear-gradient(#64223b,#381320); border:1px solid #a68751; border-radius:6px; padding:8px 6px; box-shadow:0 3px 8px #0005; }
.player-plaque.is-turn { border-color:#fff0ad; box-shadow:0 0 0 2px #d9b56388,0 0 16px #f5d37c55; }
.player-plaque.is-turn::before { content:""; position:absolute; inset:-4px; border-radius:9px; padding:3px; pointer-events:none; background:conic-gradient(from var(--turn-angle),#f5d37c30 0deg 100deg,#fff9d4 160deg,#f5d37c 205deg,#f5d37c30 260deg); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:turn-outline 2s linear infinite; }
.player-name { display:flex; align-items:center; justify-content:center; gap:5px; min-width:0; }
.presence-dot { flex:0 0 8px; display:inline-block; width:8px; height:8px; border-radius:50%; background:#85898a; border:1px solid #b2b6b7; }
.presence-dot.online { background:#42e493; border-color:#a7ffd1; box-shadow:0 0 5px #42e49377; }
.player-plaque.is-turn .presence-dot.online { animation:turn-presence 1.2s steps(1,end) infinite; }
.opponent-name { font-size:14px; font-weight:700; overflow-wrap:anywhere; }
.opponent-meta { font-size:10px; color:#e4caa8; margin-top:4px; }
.backs { --back-width:40px; position:relative; width:140px; height:90px; margin:4px 0 0 calc(50% - 70px); }
.card-back { position:absolute; left:calc(50% - var(--back-width)/2); top:0; display:block; width:var(--back-width); height:calc(var(--back-width)*1.4); border-radius:3px; background:#fff; box-shadow:0 2px 3px #0008; transform:rotate(var(--fan)); transform-origin:center 140%; }
.opponent.partner .backs { transform:rotate(180deg); }
.opponent.left .backs { transform:rotate(90deg); margin-top:45px; }
.opponent.right .backs { transform:rotate(-90deg); margin-top:45px; }
.table-status { display:grid; justify-items:center; margin:16px 28px 0; min-height:25px; text-align:center; }
#turn-label { color:var(--gold); font-size:21px; font-weight:800; overflow-wrap:anywhere; text-shadow:0 2px 3px #0007; }
#deck-label { color:var(--muted); font-size:10px; font-weight:400; line-height:1.3; text-align:center; overflow-wrap:anywhere; }
.table-cards { display:flex; flex-wrap:wrap; gap:12px; align-content:center; align-items:center; justify-content:center; min-height:174px; max-height:330px; overflow-y:auto; padding:10px 5px; scrollbar-width:thin; scrollbar-color:#dfc070 #17472f; }
.playing-card { position:relative; width:70px; height:98px; border:0; border-radius:5px; background:#fff; padding:0; flex:0 0 auto; box-shadow:0 2px 2px #0005,0 5px 12px #0004; user-select:none; -webkit-user-select:none; transition:transform .15s,box-shadow .15s; }
.playing-card img { display:block; width:100%; height:100%; border-radius:inherit; pointer-events:none; -webkit-user-drag:none; }
.playing-card:disabled { opacity:1; }
.playing-card.selected { outline:3px solid var(--gold); outline-offset:3px; transform:translateY(-5px); }
.last-move { min-height:32px; padding-top:6px; color:#d8e8d6; font-size:11px; line-height:1.5; text-align:center; overflow-wrap:anywhere; }
.hand-area { position:relative; z-index:3; padding:18px 0 max(14px,env(safe-area-inset-bottom)); }
.your-name { width:190px; max-width:100%; margin:0 auto 6px; text-align:center; color:var(--text); min-height:46px; overflow-wrap:anywhere; }
.hand { --hand-width:100px; position:relative; height:calc(var(--hand-width)*1.94 + 22px); }
.hand .playing-card { position:absolute; left:calc(50% - var(--hand-width)/2); top:12px; width:var(--hand-width); height:calc(var(--hand-width)*1.4); margin:0; touch-action:none; cursor:grab; transform:rotate(var(--fan)); transform-origin:50% 140%; }
.hand .playing-card.selected { transform:translateY(-14px) rotate(var(--fan)); z-index:2; }
.hand .playing-card:disabled { cursor:default; }
.hand .playing-card.drag-source { opacity:.25; }
.drag-ghost { position:fixed; left:0; top:0; z-index:50; pointer-events:none; margin:0!important; opacity:1; transform:none; box-shadow:0 12px 20px #0008; transition:none; }
.move-card { position:fixed; left:0; top:0; z-index:15; pointer-events:none; margin:0; transform-origin:center; transition:none; will-change:transform,opacity; }
.card-in-flight { visibility:hidden!important; }
#game-table.is-animating { overflow-anchor:none; pointer-events:none; }
#game-table.is-animating .table-cards { overflow-anchor:none; }
#play-card { display:block; width:min(100%,340px); margin:auto; min-height:48px; background:linear-gradient(#e8c777,#bc9745); border:1px solid #ffe5a1; color:#30220c; box-shadow:0 4px 12px #0005; }
#play-card:disabled { background:#493b36; color:#bca99c; border-color:#6b5a4f; opacity:1; }
#capture-options { display:grid; gap:12px; }
.capture-option { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; background:#173a29; border:2px solid var(--line); border-radius:6px; padding:12px; }
.capture-option[aria-pressed="true"] { border-color:var(--gold); background:#25583f; }
.capture-option img { width:54px; height:76px; border-radius:3px; pointer-events:none; }
#capture-confirm { min-width:0; }
.result { text-align:center; padding:24px 0; }
.winner-names { font-size:48px; color:var(--gold); text-shadow:0 0 25px #ffd26366; overflow-wrap:anywhere; margin:18px 0; animation:shine 2.5s ease-in-out infinite; }
.result-teams { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:24px 0; }
.result-teams section { min-width:0; border-top:3px solid var(--green); padding:16px 0; }
.result-teams section:last-child { border-color:var(--gold); }
.result-teams h3 { font-size:16px; }
.result-teams p { overflow-wrap:anywhere; }
.result-total { font-size:48px; font-weight:700; }
.breakdown { font-size:14px; color:var(--muted); line-height:1.9; }
.round-points { font-size:1.5em; }
.result .primary { width:min(100%,440px); margin-top:12px; }
.result .secondary { display:block; width:min(100%,440px); margin:12px auto; }
.notice { position:fixed; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:20; width:max-content; max-width:calc(100% - 32px); background:#fff5d6; color:#241f12; border-radius:6px; padding:16px 20px; box-shadow:0 8px 30px #0007; font-weight:700; text-align:center; }
dialog { background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:24px; width:min(540px,calc(100% - 24px)); max-height:88dvh; overflow:auto; }
dialog::backdrop { background:#000b; }
.dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; }
#seat-settings { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.history-row { border-top:1px solid var(--line); padding:15px 0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.history-row strong { font-size:22px; text-align:right; }
.history-row small { color:var(--muted); }
.confetti { position:fixed; top:0; width:10px; height:17px; z-index:10; pointer-events:none; visibility:hidden; transform:translateY(-40px); animation:fall 4s linear both; }
@keyframes fall { from { transform:translateY(-40px) rotate(0deg); } to { transform:translateY(calc(100dvh + 70px)) rotate(720deg); } }
@keyframes shine { 50% { color:#fff7cc; text-shadow:0 0 35px #ffd26399; } }
@keyframes turn-outline { to { --turn-angle:360deg; } }
@keyframes turn-presence { 0%,100% { opacity:1; } 50% { opacity:.18; box-shadow:none; } }
@media(min-width:700px) { .table-cards { min-height:210px; } .playing-card { width:76px; height:106.4px; } }
@media(max-width:699px) {
  main { padding:0 12px 16px; } .topbar { padding:7px 12px; gap:6px; min-height:58px; }
  .back-link { font-size:12px; } .wordmark { font-size:20px; gap:2px; } .wordmark img { width:38px; height:42px; } #connection { font-size:10px; }
  .room-toolbar { column-gap:8px; padding:10px 0; } #room-subtitle { font-size:11px; }
  .match-score { gap:14px; margin-bottom:8px; } .score-team { padding:9px 8px; }
  .score-team .score-names { font-size:11px; } .score-team .counts { font-size:10px; } .score-team strong { font-size:28px; }
  .table-surface { margin:0 33px; padding:90px 22px 24px; border-width:5px; min-height:340px; border-radius:43% / 16%; }
  .opponent { width:70px; } .opponent.partner { width:150px; } .opponent.left { left:-3px; top:44%; } .opponent.right { right:-3px; top:44%; }
  .opponent-name { font-size:12px; } .player-plaque { padding:6px 4px; } .opponent-meta { font-size:9px; }
  .your-name { width:150px; } .opponent-name { min-width:0; }
  .backs { --back-width:34px; width:120px; height:76px; margin-left:calc(50% - 60px); }
  .opponent.left .backs,.opponent.right .backs { margin-top:34px; }
  #turn-label { font-size:19px; }
  .table-cards { gap:10px; min-height:178px; max-height:268px; } .playing-card { width:56px; height:78.4px; } .last-move { font-size:10px; }
  .hand-area { padding-top:14px; } .hand { --hand-width:88px; }
  .teams { gap:12px; } .seat { padding:14px 10px; } .seat-name { font-size:18px; } .winner-names { font-size:38px; } .room-footer { padding-top:15px; }
}
@media(max-width:359px) {
  .table-surface { margin:0 25px; padding-left:14px; padding-right:14px; } .opponent { width:58px; }
  .opponent-name { font-size:11px; } .opponent-meta { font-size:9px; } .backs { --back-width:28px; }
  .hand { --hand-width:80px; } .room-code { font-size:16px; gap:6px; } #room-subtitle { font-size:10px; } .score-team .counts { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } .confetti { display:none; } }