.mode-menu{width:min(800px,100%);margin:auto;padding:12px 20px 40px;text-align:center}.menu-logo{width:150px;height:115px;object-fit:contain}.mode-menu h1{color:#ffd36b;margin:4px}.mode-menu>p{color:#c4d4ce}.mode-options{display:grid;gap:10px}.mode-options>button{padding:0;border:0;background:transparent;cursor:pointer;border-radius:24px}.mode-options img{display:block;width:100%;height:clamp(78px,15vw,140px);object-fit:contain}.mode-options>button:hover{filter:brightness(1.2)}.text-mode{margin:8px 3%;min-height:95px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;color:#ffd45a;background:linear-gradient(110deg,#051c37,#0a335a,#031426)!important;border:3px solid #c79123!important;box-shadow:inset 0 0 0 2px #ffe48b,0 0 14px #000}.text-mode strong{font:bold clamp(18px,4vw,31px) Georgia;text-shadow:2px 2px #533000}.text-mode span{font-size:24px}.text-mode small{width:100%;margin-top:-18px;color:#daeafa}.mode-menu input{width:100%;display:block;min-height:46px;margin:6px 0 14px;border:1px solid #b89646;border-radius:9px;background:#09251f;color:white;padding:10px;font:inherit}.mode-menu label{display:block;text-align:left}.mode-menu button:not([data-mode]),.online-panel button:not(.net-card){padding:10px 16px;min-height:44px;border:1px solid #e0b54e;border-radius:10px;background:#163c32;color:#ffe294;cursor:pointer}#onlineSetup{margin-top:22px;padding:24px;border:1px solid #97732a;border-radius:18px;background:#061f1c}#modeError{color:#ffdb8a;min-height:24px}.online-panel{max-width:1040px;margin:auto;padding:12px 16px 40px}.online-panel h1{font-size:23px;color:#ffe294}.net-players{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.net-seat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 5px;border:1px solid #496151;border-radius:12px;background:#0a2824;overflow-wrap:anywhere}.net-seat img{width:44px;height:44px;border-radius:50%}.net-seat.active{border-color:#ffd65b;box-shadow:0 0 10px #e0b54e66}.net-seat small{color:#b9c8bd}.net-table{display:flex;align-content:center;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-height:240px;padding:22px 12px;background:radial-gradient(ellipse,#176d50,#07362a);border:4px solid #a67b2b;border-radius:26px;box-shadow:inset 0 0 24px #0005}.net-hand{display:flex;justify-content:center;gap:8px;padding:16px 0}.net-card{width:70px;height:100px;flex-shrink:0;background:#fff9ed;color:#102138;border:2px solid #d8c18a;border-radius:10px;font:bold 27px Georgia;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}.net-card.red{color:#bd1523}.net-card:disabled{opacity:1;cursor:default}.net-card.chosen{outline:3px solid #ffce57;transform:translateY(-5px);box-shadow:0 0 15px #ffe483}.net-action{display:flex;justify-content:space-between;align-items:center;margin-top:14px}#onlineStatus{min-height:44px;background:#08261f;border-radius:8px;padding:10px}.online-panel button:disabled{opacity:.5;cursor:default}#onlineLog{line-height:1.7}.empty-table{color:#a4c1b2}@media(max-width:600px){.net-players{grid-template-columns:repeat(2,minmax(0,1fr))}.net-seat{font-size:12px;padding:5px;display:grid;grid-template-columns:30px 1fr}.net-seat img{width:28px;height:28px;grid-row:span 2}.net-seat small{font-size:10px}.net-card{width:clamp(44px,15vw,66px);height:86px;font-size:23px}.net-hand{gap:5px}.net-table{min-height:210px;gap:6px}.game-tools{gap:5px}.game-tools button{padding:8px;font-size:12px}}
.mode-options{gap:20px;margin:24px 0}.mode-options>button:not(.text-mode){aspect-ratio:6/1;overflow:hidden}.mode-options img{width:100%;height:100%;object-fit:cover;object-position:center}.text-mode{margin:0;min-height:78px;gap:8px;padding:10px 6px!important}.text-mode strong{font-size:clamp(16px,3.8vw,30px)}.text-mode small{margin:0}.online-panel .net-card:disabled{opacity:1}
/* Show the player's selected artwork, with its original framing. */
.mode-options>button{aspect-ratio:6/1;overflow:hidden;min-height:0;padding:0;border-radius:18px}.mode-options img{width:100%;height:100%;object-fit:cover;object-position:center}
body:has(.game-tools[hidden]){padding-top:env(safe-area-inset-top)}
.mode-menu{min-height:calc(100dvh - env(safe-area-inset-top));display:flex;flex-direction:column;justify-content:center;padding-top:20px;padding-bottom:28px}
.mode-menu .mode-options{flex:none;width:100%;gap:18px}
.mode-menu:has(#onlineSetup:not([hidden])){justify-content:flex-start}
@media(min-width:800px){.mode-menu .mode-options{gap:22px}}
.mode-menu .menu-logo{align-self:center}
/* A travelling highlight follows each banner's gold perimeter. */
.mode-options>button{position:relative;isolation:isolate;overflow:visible;filter:drop-shadow(0 5px 9px #0005)}
.mode-options>button:hover{filter:brightness(1.12) drop-shadow(0 0 10px #efc55366)}
.mode-options>button:focus-visible{outline:2px solid #fff0ab;outline-offset:7px}
.frame-shine{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.frame-shine rect{fill:none;stroke-linecap:round;stroke-dasharray:7 93;stroke-dashoffset:0;vector-effect:non-scaling-stroke;animation:frameOrbit 4.8s linear infinite;animation-delay:var(--shine-delay,0s)}
.frame-shine .shine-halo{stroke:#ffcf45;stroke-width:5;filter:blur(3px);opacity:.9}
.frame-shine .shine-core{stroke:#fffbd9;stroke-width:1.8;filter:drop-shadow(0 0 3px #fff9a7)}
.mode-options>button:nth-child(2){--shine-delay:-1.2s}.mode-options>button:nth-child(3){--shine-delay:-2.4s}.mode-options>button:nth-child(4){--shine-delay:-3.6s}
@keyframes frameOrbit{to{stroke-dashoffset:-100}}
@media(prefers-reduced-motion:reduce){.frame-shine rect{animation:none!important;stroke-dasharray:none}.frame-shine .shine-halo{opacity:.25}}
#onlineRoom{display:inline-block;letter-spacing:.1em;user-select:all;font-variant-numeric:tabular-nums}.invite-instructions{color:#b9c8bd;font-size:14px}#inviteStatus{color:#ffe294}#inviteStatus:empty{display:none}#localInviteNote{font-size:13px;color:#efcf92}#invitationDialog{width:min(520px,calc(100vw - 32px));max-height:85dvh;overflow:auto;padding:24px;border:1px solid #d7b857;border-radius:18px;background:#102d25;color:#fff;line-height:1.5}#invitationDialog::backdrop{background:#000b}#invitationText{width:100%;resize:vertical;min-height:180px;border:1px solid #b89646;border-radius:10px;background:#061e19;color:#fff;padding:12px;font:inherit}#invitationDialog button{margin:10px 6px 0 0;min-height:44px;padding:10px 16px;border:1px solid #e0b54e;border-radius:10px;background:#163c32;color:#ffe294;cursor:pointer}
.invite-link-label{display:block;margin-top:16px;color:#ffe294;font-weight:700}.invite-link{display:block;width:100%;min-height:46px;padding:10px 12px;margin:8px 0;border:1px solid #b89646;border-radius:10px;background:#061e19;color:#fff;font:inherit;user-select:all}
/* The same felt, panels, avatars and cards as the individual table. */
.online-panel{max-width:1360px;padding:8px}.online-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.online-header h1{margin:8px 0;font-size:20px}.online-invitation{margin:6px 0 10px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.online-invitation summary{cursor:pointer;color:var(--gold)}.invite-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}.online-game-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:8px}.online-scoreboard.scoreboard{grid-column:auto;grid-row:auto;overflow:visible;border-radius:12px;gap:12px}.online-brand{width:125px;align-self:center}.online-score-row{display:grid;gap:8px}.online-score-row .deck-score strong{font-size:30px}.online-scoreboard>p{font-size:13px;line-height:1.5;color:var(--muted)}.online-play-area{min-width:0}#onlineStatus{margin:0 0 8px;min-height:42px;border:1px solid var(--line);background:var(--panel)}
.online-board{display:grid;grid-template-columns:130px minmax(0,1fr) 130px;grid-template-rows:125px minmax(240px,1fr) 155px;gap:10px;padding:12px;border:1px solid var(--line);border-radius:18px;background:radial-gradient(ellipse at center,#17664e,#0d352d 80%);min-height:570px}
.online-board .net-players{display:contents}.online-board .net-seat{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:8px;min-width:0;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.online-board .net-seat.active{border-color:var(--gold);box-shadow:0 0 16px #e0b54e55;background:rgba(100,80,26,.4)}.net-north{grid-column:2;grid-row:1}.net-west{grid-column:1;grid-row:2;align-self:center}.net-east{grid-column:3;grid-row:2;align-self:center}.net-south{grid-column:2;grid-row:3}.net-identity{display:flex;align-items:center;gap:7px;min-width:0}.net-identity>div{flex:1;min-width:0}.online-board .net-identity img{width:36px;height:36px;border:1px solid var(--gold);border-radius:9px;flex-shrink:0}.online-board .net-identity strong{display:block;font-size:13px;overflow-wrap:anywhere}.online-board .net-identity small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.net-count{font-size:12px;color:var(--gold)}.net-west .net-identity,.net-east .net-identity{flex-wrap:wrap;justify-content:center;text-align:center}.net-west .net-identity>div,.net-east .net-identity>div{flex-basis:100%}.net-west .net-count,.net-east .net-count{display:none}
.net-hidden-hand{display:flex;justify-content:center;gap:4px;min-height:0}.online-board .net-back{width:30px;height:43px;flex-shrink:0;border-radius:5px}.net-west .net-hidden-hand,.net-east .net-hidden-hand{flex-direction:column;align-items:center;gap:0;padding-bottom:16px}.net-west .net-back,.net-east .net-back{margin-bottom:-16px}
.online-center.table-zone{grid-column:2;grid-row:2;min-width:0;min-height:0;border-radius:12px;padding:8px;display:flex;flex-direction:column}.online-center .zone-header{font-size:12px;margin-bottom:6px}.online-board .net-table{border:0;border-radius:0;background:none;box-shadow:none;min-height:0;flex:1;padding:6px;gap:6px;align-content:center;overflow:auto}.online-board .net-hand{margin:0;padding:4px 0;gap:5px;justify-content:center}.online-board .net-card{display:grid;place-items:center;flex-shrink:0;width:54px;height:76px;min-height:0;padding:0;font:inherit;border:2px solid #67dff1;background:linear-gradient(145deg,#fff,#f7fbff 58%,#eeeaff);color:#10245c}.online-board .net-card.red{color:var(--red)}.online-board .net-card .rank{top:5px;left:5px;font-size:16px}.online-board .net-card .rank.bottom{inset:auto 5px 5px auto}.online-board .net-card .rank small{font-size:11px}.online-board .net-card .suit-icon{font-size:32px}.online-board .net-card.chosen{outline:2px solid var(--gold);transform:translateY(-4px)}.online-board .net-table .net-card{width:48px;height:68px}.online-play-area .net-action{margin-top:8px;border:1px solid var(--line);padding:10px;border-radius:12px;gap:10px}.net-action>span{font-size:13px}.online-log{margin:12px 0;padding:12px;background:var(--panel);border-radius:12px}.online-duel{grid-template-columns:1fr;grid-template-rows:115px minmax(230px,1fr) 155px}.online-duel .net-north,.online-duel .net-south,.online-duel .online-center{grid-column:1}
@media(max-width:900px){.online-game-layout{grid-template-columns:1fr}.online-scoreboard.scoreboard{padding:6px;gap:0}.online-brand,.online-scoreboard>p{display:none}.online-score-row{grid-template-columns:1fr 1fr 85px;gap:5px}.online-score-row .score-card{padding:6px}.online-score-row .score-card>span{font-size:12px}.online-score-row .score-card small{font-size:10px}.online-score-row .score-markers{min-height:16px}.online-score-row .score-dog{font-size:18px}.online-board{grid-template-columns:90px minmax(0,1fr) 90px;grid-template-rows:100px minmax(220px,1fr) 140px;gap:6px;padding:6px;min-height:480px}.online-board .net-card{width:46px;height:66px}.online-board .net-table .net-card{width:41px;height:58px}}
@media(max-width:500px){.online-panel{padding:5px}.online-board{grid-template-columns:61px minmax(0,1fr) 61px;grid-template-rows:96px minmax(195px,1fr) 132px;min-height:445px;padding:4px;gap:4px;border-radius:12px}.online-board .net-seat{padding:4px;gap:5px}.online-board .net-identity{gap:4px}.online-board .net-identity img{width:26px;height:26px}.online-board .net-identity strong{font-size:11px}.online-board .net-identity small{font-size:9px}.online-board .net-card{width:clamp(34px,9.7vw,46px);height:62px;border-radius:7px}.online-board .net-card .rank{font-size:13px;top:3px;left:3px}.online-board .net-card .rank.bottom{inset:auto 3px 3px auto}.online-board .net-card .rank small{font-size:9px}.online-board .net-card .suit-icon{font-size:24px}.online-board .net-hand{gap:2px}.online-board .net-table .net-card{width:36px;height:51px}.online-board .net-back{width:25px;height:36px}.online-center.table-zone{padding:4px}.online-board .net-table{padding:2px;gap:4px}.online-board .empty-table{font-size:12px}.online-duel{grid-template-columns:1fr}.online-score-row{grid-template-columns:1fr 1fr 62px}.online-header h1{font-size:17px}.online-play-area .net-action>span{font-size:11px}.online-board .net-south{grid-column:1 / -1}.online-board .net-south .net-hand{gap:5px}.online-board .net-south .net-card{width:48px;height:68px}.online-board .net-north{grid-column:2}.online-duel .net-north{grid-column:1}}
.waiting-room{width:min(640px,100%);min-height:calc(100dvh - 95px);margin:auto;padding:28px 22px 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.waiting-logo{width:160px;height:160px;object-fit:contain;filter:drop-shadow(0 8px 22px #0005)}.waiting-room h2{font-size:clamp(24px,5vw,34px);line-height:1.25;color:#ffe294;margin:18px 0 10px}.waiting-room #waitingPlayers{color:var(--muted);margin:0 0 30px}.waiting-room .invite-link-label{font-size:15px;font-weight:400;color:#e8eedc}.waiting-room .invite-link{font-size:14px;text-align:center}.waiting-actions{display:flex;justify-content:center;gap:12px;width:100%;margin-top:12px}.waiting-actions button{flex:1;max-width:240px}.waiting-pulse{display:flex;gap:8px;margin-top:24px}.waiting-pulse span{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:waitingGlow 1.4s ease-in-out infinite}.waiting-pulse span:nth-child(2){animation-delay:.18s}.waiting-pulse span:nth-child(3){animation-delay:.36s}@keyframes waitingGlow{0%,80%,100%{opacity:.35;transform:scale(.85)}40%{opacity:1;transform:scale(1.3);box-shadow:0 0 12px #ffe294}}
@media(prefers-reduced-motion:reduce){.waiting-pulse span{animation:none}}