/* Screen-sized game app. Only Krimi's reading area is a scrolling surface. */
body .table-view[data-game="rommee"] #drawPile { margin-top:18px; }
body #drawPile .draw-countdown { position:absolute; top:-18px; bottom:auto; left:0; width:100%; font-size:.65rem; line-height:16px; white-space:nowrap; color:var(--accent-2); font-weight:700; }
body #drawPile.is-waiting-to-draw:disabled { opacity:1; }
body #drawPile.is-waiting-to-draw > :is(.pile-card-img,.pile-count) { opacity:.45; }
body .hand-cards .card { translate:var(--hand-drag-shift,0px) 0; }
body .hand-cards.has-insertion-preview .is-pointer-dragging { opacity:0; }
body .hand-insertion-gap { position:absolute; z-index:101; pointer-events:none; box-sizing:border-box; border:2px solid var(--accent-2); border-radius:7px; background:#e3c99325; box-shadow:0 0 9px #e3c99350; }
body .hand-insertion-gap::before { content:''; position:absolute; top:-7px; left:50%; translate:-50% 0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--accent-2); }
body .table-view.has-standings[data-game] { grid-template-rows:minmax(0,1fr) auto; }
body .table-view.has-standings[data-game] > :is(.players-row,.waiting-room,.playmat,.hand-panel,.message-line) { display:none; }
body .table-view.has-standings[data-game] > .table-status { grid-row:2; justify-content:center; }
body .table-view.has-standings[data-game] .table-heading { display:none; }
body .table-view.has-standings[data-game] .table-actions { justify-content:center; }
body .table-scores { grid-row:1; width:min(720px,100%); height:100%; max-height:440px; min-height:0; min-width:0; align-self:center; justify-self:center; display:flex; flex-direction:column; gap:8px; padding:8px; }
body .score-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:3px 12px; }
body .score-heading h2 { margin:0; font:1.3rem Georgia,serif; }
body .score-heading span { color:var(--muted); font-size:.75rem; }
body .score-table { width:100%; height:100%; min-height:0; table-layout:fixed; border-collapse:collapse; font-variant-numeric:tabular-nums; background:var(--surface); }
body .score-table .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
body .score-table th, body .score-table td { text-align:right; padding:3px 8px; border-bottom:1px solid var(--line); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body .score-table th:nth-child(2), body .score-table tbody th { text-align:left; }
body .score-table thead { color:var(--muted); font-size:.75rem; }
body .score-table .score-rank { width:50px; }
body .score-table .score-number { width:90px; }
body .score-table .score-rounds { width:65px; }
body .score-leader { background:#d0ae7222; color:var(--accent-2); }
body .score-self th { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; }
@media (max-width:480px), (max-height:420px) {
  body .table-scores { padding:2px; gap:4px; }
  body .score-heading h2 { font-size:1.05rem; }
  body .score-heading span { font-size:.65rem; }
  body .score-table { font-size:.76rem; }
  body .score-table th, body .score-table td { padding:1px 4px; }
  body .score-table thead { font-size:.63rem; }
  body .score-table .score-rank { width:32px; }
  body .score-table .score-number { width:53px; }
  body .score-table .score-rounds { width:49px; }
}
:root { color-scheme: dark; --bg:#211817; --surface:#351c23; --surface-2:#48252e; --surface-3:#59323b; --text:#f4eadb; --muted:#cbbba8; --accent:#d0ae72; --accent-2:#e3c993; --line:#bfa16b40; --line-strong:#bfa16b99; --felt:#541f2b; --shadow:0 8px 24px #10070b33; }
html, body { width:100%; height:100%; min-height:0; overflow:hidden; overscroll-behavior:none; }
body { background:var(--bg); color:var(--text); font:15px/1.35 system-ui,sans-serif; }
body .app-shell { width:100%; height:100dvh; min-height:0; padding:max(5px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); display:grid; grid-template-rows:40px minmax(0,1fr); gap:4px; overflow:hidden; background:radial-gradient(ellipse at 50% 30%,#64293766,transparent 85%),#32191f; }
body .topbar, body[data-view="table"] .topbar { display:flex; height:40px; min-height:0; align-items:center; gap:10px; margin:0; padding:0; border:0; background:none; backdrop-filter:none; }
body #appTitle { font:500 1.2rem Georgia,serif; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
body .topbar button { min-height:36px; padding:4px 10px; }
body .topbar .turn-badge { display:flex; align-items:center; gap:8px; min-width:0; min-height:0; padding:0; border:0; background:none; line-height:1.2; }
body #turnLabel { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
body #turnTimer { flex-shrink:0; white-space:nowrap; font-size:.72rem; color:var(--muted); }
body #turnTimer:empty, body .connection-status:empty { display:none; }
body .topbar button { flex-shrink:0; }
body .connection-status { min-width:0; }
body #soundButton { margin-left:auto; white-space:nowrap; }
.connection-status { font-size:.76rem; color:var(--accent); margin-left:auto; }
body main { height:100%; min-width:0; min-height:0; overflow:hidden; }
body button, body .portal-login { min-height:40px; border-radius:7px; border:1px solid var(--line-strong); padding:8px 14px; background:linear-gradient(#dfc38d,#bf9b60); color:#281915; font:600 .88rem/1.2 system-ui,sans-serif; box-shadow:none; text-overflow:ellipsis; touch-action:manipulation; }
body button:hover:not(:disabled) { filter:brightness(1.12); background-color:var(--surface-3); }
body .ghost-button, body .menu-choice { color:var(--text); background:#341c2377; }
body button:disabled { opacity:.42; }
body button:focus-visible, body a:focus-visible, body input:focus-visible, body select:focus-visible, body [tabindex]:focus-visible { outline:3px solid #f1dba5; outline-offset:2px; }
body input, body select { min-height:40px; background:var(--surface-2); color:var(--text); border:1px solid var(--line-strong); border-radius:6px; padding:8px; font:inherit; max-width:100%; }
body .is-hidden, body .control-hidden { display:none !important; }
body .eyebrow { color:var(--muted); letter-spacing:.08em; }
body .danger { color:#ffd0c6; }
body .login-view { height:100%; display:grid; place-items:center; }
body .login-panel { width:min(380px,100%); background:var(--surface); border:1px solid var(--line-strong); border-radius:12px; padding:24px; }
body .login-panel h2 { font:1.8rem Georgia,serif; margin:0 0 20px; }
body .portal-login { display:block; text-align:center; text-decoration:none; }
body .guest-login { margin:18px 0 0; }
body .guest-login summary { cursor:pointer; padding:8px 0; }
body #loginForm label { display:block; margin:8px 0; }
body .home-view { height:100%; min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:8px; padding:8px; }
body .game-library { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:10px; min-height:0; min-width:0; width:min(1200px,100%); justify-self:center; overflow:auto; align-content:stretch; }
body .game-library:has(.game-group) { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:minmax(220px,auto); grid-auto-flow:row; }
body .game-library-grouped { display:flex !important; flex-direction:column; align-items:stretch; gap:16px; overflow:auto; align-content:initial; }
body .game-library-grouped > .game-group { display:block; flex:0 0 auto; min-height:0; }
body .game-group { min-width:0; min-height:0; display:block; gap:6px; }
body .game-group > h2 { margin:0; color:var(--accent); font:500 clamp(.85rem,1.4vw,1.05rem) Georgia,serif; }
body .game-group-tiles { min-width:0; min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:150px; align-content:start; gap:8px; margin-top:6px; }
body .game-library-grouped .game-group-tiles { grid-template-columns:repeat(3,minmax(0,1fr)) !important; grid-auto-rows:150px !important; }
body .home-view .game-library-grouped .game-group-tiles { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
body .game-group-solo .game-group-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
body .game-group-fast .game-group-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
body .game-group-casino .game-group-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
body .game-group-social .game-group-tiles { grid-template-columns:minmax(0,1fr); }
body .game-library-grouped .game-tile { position:relative !important; inset:auto !important; grid-area:auto !important; width:auto !important; height:auto !important; min-height:150px; margin:0 !important; }
body .game-tile { display:flex; flex-direction:column; align-items:center; align-content:center; justify-content:center; gap:6px; min-width:0; min-height:0; padding:clamp(8px,2vw,22px); color:var(--text); background:radial-gradient(ellipse at 50% 25%,#72434b55,transparent 80%),var(--surface); border:1px solid var(--line-strong); }
body .game-tile strong { font:500 clamp(1rem,2vw,1.5rem) Georgia,serif; }
body .game-tile small { color:var(--muted); font-weight:400; }
body .game-art { display:grid; place-items:center; width:clamp(34px,8dvh,80px); height:clamp(34px,10dvh,95px); border-radius:6px; border:1px solid #bfa16b88; background:#f4eadb; color:#49202b; font:clamp(30px,6dvh,55px) Georgia,serif; }
body .game-krimi .game-art { color:var(--accent); background:transparent; border:0; }
body .tile-action { color:var(--accent); font-size:.82rem; margin-top:4px; }
body .home-actions { display:flex; justify-content:center; gap:8px; }
body #lobbyView { height:100%; min-height:0; display:grid; grid-template-rows:auto auto auto minmax(0,1fr) auto; gap:10px; padding:8px; }
body .section-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0; }
body .section-head h2 { font:1.3rem Georgia,serif; margin:0; }
body .lobby-actions { display:flex; gap:8px; flex-wrap:wrap; }
body .round-list-head { display:flex; justify-content:space-between; align-items:center; font-size:.9rem; }
body .round-list-head button { min-height:32px; font-size:.78rem; padding:4px 8px; }
body .tables-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:8px; min-height:0; }
body .table-card { display:flex; flex-direction:column; gap:7px; min-height:0; padding:12px; align-items:stretch; text-align:left; white-space:normal; background:var(--surface); color:var(--text); }
body .table-card h3 { margin:0; font:1.05rem Georgia,serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body .table-card .status-line { margin-top:auto; color:var(--muted); font-size:.78rem; }
body .table-card-action { color:var(--accent); font-size:.78rem; }
body .status-pill { background:#d0ae721c; color:var(--accent); border:1px solid var(--line); font-size:.7rem; align-self:flex-start; }
body .lobby-pager { min-height:0; margin:0; }
body .empty-state { grid-column:1/-1; align-self:center; padding:16px; color:var(--muted); }
body .table-view, body .table-view[data-game] { display:grid; height:100%; min-height:0; grid-template-rows:auto auto minmax(0,1fr) auto; gap:4px; overflow:hidden; }
body .table-status { grid-row:1; display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:space-between; min-height:0; margin:0; }
body .round-xp-notice { flex:1 1 180px; min-width:0; padding:5px 9px; border:1px solid #e879bd99; border-radius:8px; color:#ffd2ec; background:linear-gradient(110deg,#a53d793d,#e879bd13); font-size:.78rem; font-weight:800; text-align:center; }
body .round-xp-notice[hidden] { display:none; }
body .table-view[data-status="running"] .table-status:not(:has(.table-actions > :not(.control-hidden))) { display:none; }
body .table-heading { display:flex; gap:8px; font-size:.8rem; color:var(--muted); }
body .table-view[data-status="running"] .table-heading { display:none; }
body .table-view[data-status="finished"] .table-heading { display:none; }
body .table-view[data-status="running"]:is([data-game="spider"],[data-game="klondike"]) > :is(.table-status,.players-row) { display:none; }
body .table-actions, body .table-view[data-game] .table-actions { width:auto; max-width:none; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
body .table-actions button { min-height:36px; padding:6px 10px; }
body .turn-badge { min-height:24px; padding:3px 8px; font-size:.78rem; color:var(--accent); border-color:var(--line); background:#d0ae7212; }
body .players-row, body .table-view[data-game] .players-row { grid-row:2; display:grid; grid-template-columns:repeat(var(--seat-count,4),minmax(0,1fr)); gap:5px; }
@media (max-width:600px) {
  body .table-view[data-game] .players-row.six-seat-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
body .player-seat, body .table-view[data-game] .player-seat { min-height:28px; padding:4px 7px; background:#24151b77; border-color:var(--line); }
body .player-seat strong { font-size:.78rem; font-weight:500; }
body .player-seat .player-name { display:inline-flex; align-items:center; gap:5px; }
body .player-meta { color:var(--muted); font-size:.68rem; }
body .table-view[data-game="doppelkopf"] .player-meta { white-space:normal; }
body .table-view[data-game="doppelkopf"] .player-seat strong { display:grid; gap:1px; }
body .player-seat.is-active { border:1px solid var(--line); background:#24151b77; box-shadow:none; }
body .player-seat.is-active .player-name { font-weight:700; }
body .player-seat.is-active .player-meta { display:inline-flex; align-items:center; padding:3px 8px; border:1px solid #a2f3ff; border-radius:999px; background:linear-gradient(135deg,#087e9e,#36c8e8); color:#071b20; font-weight:800; text-shadow:0 1px #d5fbff66; box-shadow:0 0 10px #38d5ff,0 0 22px #19bce599,inset 0 0 7px #d5fbff66; }
body .player-seat .player-name.frame-tone-pink { padding:2px 6px; border:1px solid #ff86ca; border-radius:99px; background:linear-gradient(120deg,#ab3b8066,#da67a433); box-shadow:0 0 9px #f85eb34d; }
body .player-seat .player-name.frame-tone-gold { padding:2px 6px; border:1px solid #d2a95399; border-radius:99px; background:#bd90351a; }
body .player-seat .player-name.frame-tone-violet { padding:2px 6px; border:1px solid #ad88eb99; border-radius:99px; background:#7d5bb522; }
body .player-seat .player-name.frame-tone-mint { padding:2px 6px; border:1px solid #74ccb299; border-radius:99px; background:#4ca9901d; }
body .player-seat .player-name.frame-tone-neutral { padding:2px 6px; border:1px solid var(--line); border-radius:99px; }
body .player-seat .player-name.text-tone-pink { color:#ff91cf; }
body .player-seat .player-name.text-tone-gold { color:#f3cb78; }
body .player-seat .player-name.text-tone-violet { color:#c6a3ff; }
body .player-seat .player-name.text-tone-mint { color:#91e4ce; }
body .player-seat .player-name.text-tone-neutral { color:var(--text); }
body .table-view[data-status="waiting"] .player-seat { min-height:44px; }
body .table-view[data-game="krimi"][data-status="waiting"] .players-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
body .table-view[data-game="krimi"][data-status="waiting"] .player-seat { min-height:46px; }
body .table-view[data-game="krimi"][data-status="waiting"] .player-seat strong { display:grid; gap:3px; }
body .table-view[data-game="krimi"][data-status="waiting"] .player-name,
body .table-view[data-game="krimi"][data-status="waiting"] .player-meta { white-space:normal; overflow:visible; }
body .table-view[data-game="krimi"][data-status="waiting"] .player-meta { font-size:.64rem; }
body .table-view > .playmat, body .table-view[data-game] > .playmat { grid-row:3; width:100%; height:100%; min-height:0; overflow:hidden; padding:6px; border:1px solid var(--line-strong); border-radius:9px; background:radial-gradient(ellipse at 50% 40%,#662a3855,transparent 90%),var(--felt); box-shadow:inset 0 0 70px #190b1122; }
body .melds-area, body .table-view[data-game] .melds-area { min-height:0; height:100%; max-height:100%; overflow:hidden; }
body .table-view[data-game="rommee"] .playmat, body .table-view[data-game="canasta"] .playmat { display:grid; grid-template-columns:92px minmax(0,1fr); grid-template-rows:minmax(0,1fr); gap:8px; }
body .pile-zone { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; margin:0; min-height:0; }
body .pile { --table-pile-w:clamp(40px,9dvh,64px); width:84px; min-height:0; height:calc(var(--table-pile-w)*1.395 + 30px); background:transparent; border:0; font-size:.75rem; padding:0; color:var(--text); }
body .pile span:last-child { bottom:0; width:100%; white-space:normal; font-size:.7rem; line-height:1.1; }
body .pile-card-img { position:absolute; top:0; left:50%; transform:translateX(-50%); max-height:calc(100% - 26px); object-fit:contain; }
body .waiting-room { grid-row:3; align-self:center; justify-self:center; text-align:center; width:min(500px,100%); padding:12px; }
body .waiting-room h3 { font:1.6rem Georgia,serif; margin:0 0 10px; }
body .waiting-room p { color:var(--muted); margin:0 0 16px; }
body .waiting-room button { margin:3px; }
body .hand-panel { grid-row:4; min-height:0; padding:4px 6px; border:0; background:transparent; box-shadow:none; }
body .hand-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-areas:"selection actions hint"; align-items:center; gap:4px 10px; margin:0; min-height:34px; }
body #selectedCount { grid-area:selection; color:var(--muted); font-size:.76rem; white-space:nowrap; }
body #handHint { grid-area:hint; min-width:0; font-size:.83rem; text-align:right; }
body .toolbar-actions { grid-area:actions; display:flex; justify-content:center; gap:4px; flex-wrap:nowrap; width:auto; }
body .toolbar-actions button { min-height:34px; padding:4px 10px; font-size:.82rem; white-space:normal; }
body .table-view[data-status="finished"] .toolbar-actions { display:none; }
body .hand-cards { display:block; position:relative; height:var(--hand-height,110px); min-height:0; padding:0; overflow:visible; }
body .hand-cards .card { position:absolute; left:var(--hand-left); top:var(--hand-top); --card-w:var(--hand-card-width,64px); margin:0 !important; }
body .card { position:relative; min-height:0; min-width:0; }
body .hand-cards .card:hover, body .hand-cards .card:focus-visible { z-index:100; }
body .card.is-selected { transform:translateY(-7px); filter:drop-shadow(0 0 2px var(--accent)); }
body .hand-cards .card, body .klondike-waste, body .klondike-card.is-face-up, body .spider-card.is-face-up { touch-action:none; user-select:none; -webkit-user-select:none; }
body .card.is-pointer-dragging, body .klondike-card.is-pointer-dragging, body .spider-card.is-pointer-dragging { opacity:.28; }
body .card-drag-ghost { position:fixed!important; inset:auto!important; left:0!important; top:0!important; right:auto!important; bottom:auto!important; z-index:10000!important; display:block!important; pointer-events:none!important; opacity:.92; box-shadow:0 16px 28px #12070a70!important; transition:none!important; }
body .is-card-drop-target { outline:2px dashed #e6c987!important; outline-offset:3px; }
body .melds-area.meld-grid { display:block; position:relative; }
body .table-view .melds-area.meld-grid > .meld-row { position:absolute; left:var(--meld-left,0px); top:var(--meld-top,0px); width:var(--meld-width); }
body .meld-row { min-height:0; min-width:0; display:flex; flex:0 0 var(--meld-width,auto); height:var(--meld-height,auto); align-items:center; gap:0; padding:5px; overflow:visible; background:#210e181b; border:1px solid #bfa16b40; }
body .meld-row .card { --card-w:var(--meld-card-width,42px); flex:0 0 var(--card-w); }
body .meld-row .card + .card { margin-left:var(--meld-overlap,-25px); }
body .meld-label { position:absolute; bottom:1px; left:5px; max-width:calc(100% - 10px); font-size:.65rem; }
body .table-view[data-game="canasta"] .meld-row { position:relative; padding-bottom:19px; flex-direction:row; flex-wrap:nowrap; align-items:center; }
body .message-line { display:none; }
body .spider-panel, body .klondike-panel { --solo-pile-height:clamp(40px,10dvh,80px); display:grid; height:100%; min-height:0; grid-template-rows:auto auto minmax(0,1fr); gap:5px; }
body .spider-head, body .klondike-head { gap:6px; }
body .spider-head .eyebrow, body .klondike-head .eyebrow { display:none; }
body .spider-head strong, body .klondike-head strong { font-size:.83rem; }
body .spider-head button, body .klondike-head button { min-height:34px; padding:5px 8px; font-size:.78rem; }
body .spider-stats { font-size:.72rem; }
body .spider-piles { grid-template-columns:minmax(0,1fr) minmax(0,8fr); }
body .klondike-piles { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,4fr); }
body .klondike-foundations { grid-template-columns:repeat(4,minmax(0,1fr)); }
body .spider-stock, body .spider-foundation, body .klondike-stock, body .klondike-waste, body .klondike-foundation { height:var(--solo-pile-height); min-height:0; padding:2px; background:#22121d33; color:var(--text); }
body .spider-piles img, body .klondike-piles img { display:block; width:auto; height:calc(var(--solo-pile-height) - 6px); max-width:100%; max-height:100%; margin:auto; object-fit:contain; }
body .spider-foundation .empty-foundation-symbol { position:static; color:var(--accent); opacity:.45; font:1.35rem Georgia,serif; }
body .klondike-foundation > span { font:1.35rem Georgia,serif; }
body .spider-tableau { grid-template-columns:repeat(10,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); }
body .klondike-tableau { grid-template-columns:repeat(7,minmax(0,1fr)); }
body .spider-tableau, body .klondike-tableau { min-height:0; height:100%; gap:4px; }
body .spider-column, body .klondike-column { height:100%; min-height:0; padding:2px; overflow:visible; background:#25131d22; }
body .spider-card, body .klondike-card { width:var(--stack-card-width,40px); top:var(--card-top,calc(4px + var(--i)*var(--stack-step,16px))); }
body .spider-card .card-img, body .klondike-card .card-img { width:100%; height:auto; }
body .board-panel { min-height:0; height:100%; }
body .board-head .eyebrow { display:none; }

body .doko-panel { gap:4px; }
body .doko-table { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:3px; padding:3px; background:#30172144; }
body .doko-seat { min-height:0; padding:2px; display:grid; grid-template-rows:18px minmax(0,1fr); align-content:stretch; gap:2px; }
body .doko-seat strong { font-size:.72rem; }
body .doko-played-card { position:relative; height:100%; min-height:0; width:100%; }
body .doko-played-card .card-img { position:absolute; inset:0; height:100%; max-height:90px; width:100%; max-width:100%; margin:auto; object-fit:contain; }
body .doko-head, body .doko-tricks, body .doko-last { padding:4px 6px; background:#23141944; }
body .doko-tricks, body .doko-last { font-size:.68rem; }
body .doko-tricks span { font-size:.68rem; font-weight:500; }
body .doko-panel:not(.is-finished) .doko-tricks { display:none; }
body .doko-last { display:flex; align-items:center; justify-content:space-between; gap:4px; }
body .doko-head .eyebrow { display:none; }
body .thirtyone-panel { height:100%; grid-template-rows:auto minmax(0,1fr) auto auto; gap:4px; }
body .thirtyone-head strong { font-size:.9rem; }
body .thirtyone-center { min-height:0; padding:4px; align-items:center; background:#24141944; }
body .thirtyone-center .card { --card-w:clamp(30px,14dvh,82px); }
body .thirtyone-status, body .thirtyone-scores > div { padding:4px 8px; background:#24141944; font-size:.78rem; }
body .thirtyone-panel:not(.is-finished) .thirtyone-scores { display:none; }
body .thirtyone-head .eyebrow { display:none; }
body .thirtyone-head { align-items:center; gap:6px; }
body .thirtyone-head span { white-space:normal; font-size:.75rem; }
body .salon-dialog { box-sizing:border-box; width:min(550px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:20px; border:1px solid var(--accent); border-radius:10px; background:radial-gradient(ellipse at 40% 0,#562e36aa,transparent),#31191f; color:var(--text); overflow:hidden; box-shadow:0 25px 100px #13090be6; }
body .salon-dialog::backdrop { background:#0e080ab8; }
body .dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
body .dialog-head h2 { margin:0; font:1.6rem Georgia,serif; }
body .dialog-close { border:0; padding:5px; min-height:36px; background:transparent; font-size:.8rem; }
body .dialog-body { margin:0 0 18px; min-height:0; }
body .dialog-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:12px; border-top:1px solid var(--line); }
body .dialog-actions > :last-child { margin-left:auto; }
body .dialog-actions button { min-width:110px; }
body #knockDialog { width:min(460px,calc(100vw - 24px)); }
body #knockDialog .dialog-body p { overflow-wrap:anywhere; }
body #knockDialog .dialog-close { flex-shrink:0; }
body #knockDialog .dialog-actions button { flex:1; min-width:0; min-height:44px; padding:8px; white-space:normal; overflow:visible; text-overflow:clip; }
body #knockError:empty { display:none; }
body #knockDialog .knock-preview { display:flex; align-items:center; gap:16px; }
body #knockDialog #knockCard { --card-w:64px; position:relative; flex:0 0 64px; width:64px; min-width:64px; height:90px; padding:0; margin:0; pointer-events:none; }
body #knockDialog #knockCard[hidden] { display:none; }
body #knockDialog .knock-preview p { margin:0; }
@media (max-height:450px) {
  body #knockDialog { padding:12px; }
  body #knockDialog .dialog-head, body #knockDialog .dialog-body { margin-bottom:8px; }
  body #knockDialog #knockCard { --card-w:46px; flex-basis:46px; width:46px; min-width:46px; height:65px; }
  body #knockDialog .dialog-body > p { margin:6px 0; }
  body #knockDialog .dialog-actions { padding-top:8px; }
}
body .toolbar-actions:has(#releaseKnockButton:not(.control-hidden)) > :not(#releaseKnockButton) { display:none; }
body .menu-choices { display:grid; gap:8px; }
body .menu-choice { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:46px; text-align:left; padding:10px 14px; }
body .settings-body { display:grid; gap:22px; }
body .setting-toggle { display:flex; align-items:center; justify-content:space-between; }
body input[type="checkbox"] { width:24px; height:24px; min-height:24px; accent-color:var(--accent); }
body fieldset { margin:0; padding:0; border:0; }
body legend { margin-bottom:10px; }
body .card-style-choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
body .card-style-choices button { display:grid; justify-items:center; gap:10px; }
body .card-style-choices [aria-pressed="true"] { outline:2px solid var(--accent); background:#bfa16b22; }
body .card-sample { display:grid; place-items:center; height:62px; width:80px; background:#f4eadb; color:#411d29; border-radius:4px; font:25px Georgia,serif; }
body .card-sample.large { font-size:36px; }
body .rules-panel { background:none; border:0; padding:0; margin-bottom:12px; }
body #rulesSummary { font-size:.8rem; color:var(--muted); font-weight:400; }
body #rulesDialogHint { color:var(--muted); font-size:.8rem; margin:8px 0 12px; }
body .rules-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
body .rule-field, body .rule-static { display:grid; gap:6px; min-width:0; white-space:normal; width:auto; }
body .rule-field span, body .rule-static span, body .rule-static strong { white-space:normal; overflow:visible; }
body .rule-toggle { display:flex; align-items:center; gap:8px; white-space:normal; min-height:44px; }
body .rule-toggle span { font-size:.85rem; }
body #rulesDialogError, body #inviteError { color:#ffd0c6; font-size:.8rem; }
body #inviteLink { display:block; width:100%; margin-top:8px; }
body .player-stats-panel { margin:12px 0; grid-template-columns:repeat(2,minmax(0,1fr)); }
body .progression-card { grid-column:1 / -1; }
body .player-stats-title { display:none; }
body .stat-cell-wide { grid-column:auto; }
body #profilePopover { position:static; background:none; border:0; padding:0; }
body #profileDialog .dialog-close { flex-shrink:0; }
body #profileDialog[open] { display:flex; flex-direction:column; }
body #profileDialog > form#profileForm { display:flex; flex:1 1 auto; flex-direction:column; min-height:0; overflow:hidden; }
body #profileDialog > .dialog-head { flex:0 0 auto; }
body #profileDialog .dialog-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
body #profileDialog .dialog-actions { flex:0 0 auto; }
body #profileDialog .dialog-body { display:grid; gap:10px; margin-bottom:12px; }
body #profileNameEditor { display:grid; gap:4px; }
body #profileError { margin:0; font-size:.8rem; line-height:1.3; color:#ffd0c6; }
body #profileError:empty { display:none; }
body #profilePopover { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
body #profileLoginType { margin:0; }
body #profilePopover #logoutButton { grid-column:2; grid-row:1; }
body #profilePopover .player-stats-panel { grid-column:1 / -1; grid-row:2; margin:0; }
@media (max-height:500px) and (min-width:481px) {
  body #profileDialog .dialog-head { margin-bottom:6px; }
  body #profileNameEditor { grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; }
  body #profileDialog .dialog-body { gap:6px; margin-bottom:6px; }
  body #profilePopover { gap:6px; }
  body #profileDialog .dialog-actions { padding-top:8px; }
}
body .toast { bottom:12px; max-width:calc(100vw - 24px); background:#201215; border:1px solid var(--accent); color:var(--text); }
body .card-large-face { position:absolute; inset:0; display:none; border:1px solid #b29e84; border-radius:7px; background:#f4eadb; color:#201715; }
body .card-large-face.red { color:#a32235; }
body .card-large-face .corner { position:absolute; top:2px; left:3px; font:bold calc(var(--card-w,50px)*.27)/1 Georgia,serif; }
body .card-large-face .center { display:grid; place-items:center; height:100%; font:calc(var(--card-w,50px)*.52) Georgia,serif; }
body[data-card-style="large"] .card > .card-large-face { display:block; }
body .pile > .discard-card-face { position:absolute; top:0; left:50%; transform:translateX(-50%); width:auto; aspect-ratio:1 / 1.395; height:min(calc(var(--table-pile-w)*1.395),calc(100% - 26px)); --card-w:var(--table-pile-w); pointer-events:none; }
body .discard-card-face > .pile-card-img { inset:0; transform:none; width:100%; height:100%; max-height:none; }
body[data-card-style="large"] .discard-card-face > .card-large-face { display:block; }
body .pile .card-large-face { text-shadow:none; }
body .pile .card-large-face .corner { bottom:auto; width:auto; white-space:normal; }
body .pile .card-large-face .center { inset:0; width:100%; font:calc(var(--card-w)*.52) Georgia,serif; }
body .card-large-face.joker-face > .joker-index { position:absolute; top:3px; left:2px; bottom:auto; width:auto; writing-mode:vertical-rl; text-orientation:upright; font:bold calc(var(--card-w,50px)*.16)/1 Georgia,serif; letter-spacing:0; }
body .card-large-face.joker-face > .joker-symbol { position:absolute; inset:18% 0 auto 20%; width:80%; text-align:center; font:calc(var(--card-w,50px)*.48)/1.2 Georgia,serif; color:#a32235; }
body .card-large-face.joker-face > .joker-label { position:absolute; inset:auto 0 8% 20%; width:80%; text-align:center; white-space:nowrap; font:bold calc(var(--card-w,50px)*.16)/1 Georgia,serif; }
body .card .joker-assignment { position:absolute; z-index:2; left:2px; bottom:2px; max-width:62%; padding:1px 3px; border-radius:3px; background:#32191feF; color:var(--accent-2); font:bold clamp(7px,1.5vw,10px)/1.1 system-ui,sans-serif; pointer-events:none; }
body .table-view[data-game="krimi"] > .playmat { overflow:hidden; }
body .krimi-reader { width:100%; height:100%; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:8px; }
body .krimi-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
body .krimi-tabs button { padding:6px; min-height:38px; font-size:.85rem; }
body .krimi-tabs [aria-pressed="true"] { background:var(--accent); color:#281915; }
body .krimi-reading { overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; min-height:0; padding:clamp(12px,3vw,28px); scrollbar-color:var(--accent) transparent; scrollbar-width:thin; border:1px solid var(--line); border-radius:8px; background:#2c171ed9; }
body .krimi-reading > * { max-width:100%; }
body .krimi-reading article, body .krimi-reading > section { max-width:76ch; margin:0 auto; }
body .krimi-reading h3, body .krimi-reading h4 { font:1.5rem Georgia,serif; margin:10px 0; }
body .krimi-reading p, body .krimi-reading .clue-box span { font-size:1rem; line-height:1.6; }
body .krimi-reading .krimi-briefing { display:block; background:none; padding:0; border:0; }
body .krimi-reading .krimi-facts { margin-top:22px; }
body .krimi-reading .krimi-roster { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
body .krimi-reading .krimi-roster-role { white-space:normal; min-height:0; color:var(--text); background:var(--surface); }
body .krimi-reading .krimi-roster-role.is-selected { border-color:var(--accent); background:var(--surface-3); }
body .krimi-ready-bar { display:flex; justify-content:space-between; align-items:center; gap:8px; }
body .krimi-ready-count { color:var(--muted); font-size:.82rem; }
@media (max-width:700px) {
  body .home-view:has(.game-library-grouped) { grid-template-rows:minmax(0,1fr) auto; }
  body .game-library-grouped { display:flex !important; flex-direction:column; gap:14px; overflow:auto; padding:2px; }
  body .game-library-grouped .game-group { display:block; flex:0 0 auto; }
  body .game-library-grouped .game-group > h2 { font-size:1rem; }
  body .game-library-grouped .game-group-tiles { grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-auto-rows:118px !important; gap:6px; }
  body .home-view .game-library-grouped .game-group-tiles { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  body .game-library-grouped .game-group-social .game-group-tiles { grid-template-columns:minmax(0,1fr) !important; }
  body .game-library-grouped .game-tile { position:relative !important; inset:auto !important; grid-area:auto !important; width:auto !important; height:auto !important; min-height:118px; display:grid; grid-template-columns:40px minmax(0,1fr); grid-template-rows:auto auto auto; align-content:center; gap:3px 8px; padding:8px; text-align:left; justify-items:start; margin:0 !important; }
  body .game-library-grouped .game-art { grid-row:1/4; width:36px; height:46px; font-size:30px; }
  body .game-library-grouped .game-tile strong { font-size:.95rem; }
  body .game-library-grouped .game-tile small { display:block; font-size:.66rem; }
  body .game-library-grouped .game-tile .tile-action { display:block; font-size:.68rem; }
  body .game-library-grouped .game-tile small { display:block; }
  body .topbar, body[data-view="table"] .topbar { gap:6px; }
  body .topbar:has(#turnBadge:not(.control-hidden)) #appTitle { display:none; }
  body .topbar .turn-badge { flex-direction:column; align-items:flex-start; gap:1px; flex:1; }
  body #turnLabel { max-width:100%; }
  body .game-library { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:6px; }
  body .game-library:has(.game-group) { grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-auto-rows:auto; }
  body .home-view .game-library-grouped { grid-template-columns:minmax(0,1fr) !important; grid-template-rows:none !important; grid-auto-rows:auto !important; }
  body .game-group { gap:4px; }
  body .game-group > h2 { font-size:.8rem; }
  body .game-group-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(118px,auto); gap:6px; }
  body .game-library-grouped .game-group-tiles { grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-auto-rows:minmax(118px,auto) !important; }
  body .game-group-solo .game-group-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body .game-group-social .game-group-tiles { grid-template-columns:minmax(0,1fr); }
  body .game-tile { display:grid; grid-template-columns:42px minmax(0,1fr); grid-template-rows:auto auto auto; align-content:center; gap:4px 9px; padding:9px; text-align:left; justify-items:start; }
  body .game-art { grid-row:1/4; width:40px; height:52px; font-size:34px; }
  body .game-tile strong { font-size:1rem; }
  body .game-tile small { font-size:.62rem; }
  body .tile-action { font-size:.72rem; margin:0; }
  body .tables-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); }
  body .table-card { gap:3px; padding:8px; }
  body .table-card h3 { font-size:.9rem; }
  body .table-card .status-line { margin:0; }
  body .table-card .status-pill { display:none; }
  body .table-view[data-game="rommee"] .playmat, body .table-view[data-game="canasta"] .playmat { grid-template-columns:64px minmax(0,1fr); gap:4px; }
  body .pile { width:60px; }
  body .player-seat { padding:3px; }
  body .player-meta { font-size:.6rem; }
  body .table-view[data-status="running"] .player-seat strong { display:grid; gap:1px; }
  
  body .hand-toolbar { grid-template-columns:auto minmax(0,1fr); grid-template-areas:"selection hint" "actions actions"; }
  body #handHint { text-align:right; font-size:.74rem; }
  body .toolbar-actions { width:100%; }
  body .toolbar-actions button { flex:1; min-height:40px; padding:4px 6px; font-size:.78rem; }
  body .spider-head, body .klondike-head { grid-template-columns:minmax(0,1fr) auto auto; }
  body .spider-stats { display:none; }
  body .spider-tableau { grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:7px 5px; }
  body .doko-tricks { font-size:.62rem; }
  body .krimi-tabs button { font-size:.78rem; }
  body .salon-dialog { padding:16px; }
}
@media (max-height:500px) {
  body .app-shell { grid-template-rows:34px minmax(0,1fr); padding-top:2px; padding-bottom:2px; gap:2px; }
  body .topbar, body[data-view="table"] .topbar { height:34px; }
  body .topbar button { min-height:32px; }
  body .table-status button { min-height:30px; padding:4px 8px; font-size:.75rem; }
  body .players-row .player-seat { min-height:24px; padding:2px 5px; }
  body .game-library { gap:4px; }
  body .game-group-tiles { gap:3px; }
  body .game-tile { display:grid; grid-template-columns:34px minmax(0,1fr); grid-template-rows:auto auto; gap:2px 6px; padding:6px; text-align:left; }
  body .game-art { grid-row:1/3; width:32px; height:38px; font-size:28px; }
  body .game-tile strong { font-size:clamp(.72rem,1.8vw,.95rem); white-space:normal; }
  body .game-tile small { display:none; }
  body .tile-action { font-size:.72rem; margin:0; }
  body .home-view { padding:2px; gap:4px; }
  body .home-actions button { min-height:32px; padding:4px 9px; }
  body .tables-grid { grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
  body #lobbyView { gap:5px; padding:2px; }
  body .table-card { gap:2px; padding:5px; }
  body .table-card .status-pill { display:none; }
  body .hand-toolbar { min-height:30px; }
  body .toolbar-actions button { min-height:28px; padding:3px 8px; }
  body .spider-tableau { grid-template-columns:repeat(10,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); }
  body .spider-panel, body .klondike-panel { --solo-pile-height:54px; }
  body .spider-piles, body .klondike-piles { max-height:54px; }
  body .doko-last { font-size:.65rem; }
  body .salon-dialog { padding:12px; }
  body .dialog-head { margin-bottom:8px; }
  body .dialog-head h2 { font-size:1.2rem; }
  body .dialog-body { margin-bottom:8px; }
  body .dialog-actions { padding-top:8px; }
  body .menu-choices { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  body .menu-choice { min-height:40px; padding:6px 10px; }
  body .rules-controls { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px 12px; }
  body .rules-controls:has(> :nth-child(4)) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body #rulesDialogHint { margin:4px 0; }
  body .settings-body { grid-template-columns:minmax(0,1fr); align-items:center; gap:8px; }
  body .card-sample { height:40px; }
  body .player-stats-panel { grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
  body .stat-cell { min-height:0; padding:6px; }
  body .waiting-room h3 { font-size:1.2rem; }
  body .waiting-room p { margin-bottom:8px; }
  body .krimi-reading { padding:12px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }
@media (max-width:380px) and (min-height:501px) {
  body .game-tile { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; padding:6px; text-align:center; }
  body .game-tile strong { font-size:.92rem; }
  body .game-art { width:27px; height:32px; font-size:25px; }
  body .game-tile .tile-action { display:none; }
}
@media (max-height:650px) {
  body .doko-table { grid-template-areas:"bottom left top right"; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); }
  body .doko-table::before { display:none; }
  body .doko-tricks { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
  body .doko-tricks span { white-space:normal; font-size:.62rem; }
  body .doko-last { font-size:.6rem; }
  body .doko-mini-card { width:18px; height:26px; object-fit:contain; }
}

body[data-card-style="large"] .spider-card > .card-large-face,
body[data-card-style="large"] .klondike-card > .card-large-face { display:block; --card-w:var(--stack-card-width); }
body .spider-card .card-large-face .corner,
body .klondike-card .card-large-face .corner { display:none; }
body .solitaire-index { position:absolute; top:calc(var(--stack-card-width)*.025); left:calc(var(--stack-card-width)*.05); right:5%; height:calc(var(--stack-card-width)*.3); background:#f4eadb; color:#201715; font:bold calc(var(--stack-card-width)*.27)/1 Georgia,serif; text-align:left; white-space:nowrap; pointer-events:none; }
body .solitaire-index.red { color:#a32235; }
/* Klondike uses the same card scale and seven-column alignment in both rows. */
body .klondike-panel { --klondike-card-width:40px; --stack-card-width:var(--klondike-card-width); --klondike-pile-height:62px; grid-template-rows:auto var(--klondike-pile-height) minmax(0,1fr); }
body .klondike-piles { grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; height:var(--klondike-pile-height); max-height:none; }
body .klondike-foundations { grid-column:4/8; gap:4px; }
body .klondike-stock, body .klondike-waste, body .klondike-foundation { justify-self:center; width:calc(var(--klondike-card-width) + 6px); height:var(--klondike-pile-height); min-width:0; padding:2px; }
body .klondike-pile-card { position:relative; display:block; width:var(--klondike-card-width); height:calc(var(--klondike-card-width)*1.4); }
body .klondike-piles .card-img { width:100%; height:100%; max-width:none; max-height:none; margin:0; }
body .klondike-piles button:disabled { opacity:1; }
body .klondike-piles button:disabled > strong { opacity:.45; }
body .klondike-piles button > strong { font:calc(var(--klondike-card-width)*.52) Georgia,serif; }
body .klondike-piles .klondike-count { top:auto; bottom:3px; right:3px; min-width:18px; min-height:18px; padding:1px 3px; font-size:clamp(9px,calc(var(--klondike-card-width)*.19),12px); pointer-events:none; }
body[data-card-style="large"] .klondike-pile-card > .card-large-face { display:block; --card-w:var(--klondike-card-width); }
body .klondike-pile-card .card-large-face .corner { display:none; }
body .klondike-waste.is-selected img, body .klondike-card.is-selected .card-img { transform:none; }
body .klondike-waste.is-selected .klondike-pile-card,
body .klondike-card.is-selected { outline:2px solid var(--accent); outline-offset:1px; }
body .klondike-waste.is-selected img, body .klondike-card.is-selected .card-img { outline:none; }
body .table-view.is-loading > :not(.table-status) { visibility:hidden; }
@media (max-height:500px) and (min-width:481px) {
  body .settings-body { grid-template-columns:minmax(175px,.9fr) minmax(0,1fr); gap:10px 18px; }
  body .settings-body > .setting-toggle { grid-column:1; }
  body .settings-body > fieldset { grid-column:2; grid-row:1 / span 2; }
  body .table-view[data-game="krimi"][data-status="waiting"] .players-row { grid-template-columns:repeat(6,minmax(0,1fr)); }
  body .doko-table { grid-template-areas:"bottom left top right"; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); }
  body .doko-table::before { display:none; }
  
  
  
  
  body .table-view[data-hand="true"] { grid-template-columns:minmax(0,1fr) minmax(210px,32%); grid-template-rows:auto auto minmax(0,1fr); }
  body .table-view[data-hand="true"] .table-status,
  body .table-view[data-hand="true"] .players-row,
  body .table-view[data-hand="true"] .playmat { grid-column:1; }
  body .table-view[data-hand="true"] .hand-panel { grid-column:2; grid-row:1/-1; display:flex; flex-direction:column; justify-content:center; border-left:1px solid var(--line); padding-left:8px; }
  body .table-view[data-hand="true"] .hand-cards { order:0; flex-shrink:0; }
  body .table-view[data-hand="true"] .hand-toolbar { order:1; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"selection hint" "actions actions"; gap:4px; }
body .table-view[data-hand="true"] #handHint { font-size:.7rem; text-align:right; }
  body .table-view[data-hand="true"] .toolbar-actions { width:100%; }
  body .table-view[data-hand="true"] .toolbar-actions button { min-width:0; min-height:40px; flex:1; font-size:.72rem; padding:4px; }
}

body .meld-group-shell { position:absolute; left:var(--meld-left,0px); top:var(--meld-top,0px); width:var(--meld-width); height:var(--meld-height); }
body .meld-group-shell > .meld-row { position:absolute; inset:0; width:100%; height:100%; max-width:none; }
body .meld-group-shell .meld-label { max-width:calc(100% - 58px); }
body .meld-preview-button { position:absolute; z-index:4; right:2px; bottom:1px; min-width:0; width:auto; min-height:24px; padding:2px 5px; border-radius:5px; font-size:.62rem; line-height:1; white-space:nowrap; box-shadow:0 1px 4px #120a0acc; }
body .table-view[data-game="canasta"] .meld-group-shell > .meld-row { position:absolute; inset:0; width:100%; height:100%; max-width:none; padding-bottom:44px; }
body .meld-preview-dialog[open] { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; gap:8px; width:min(550px,calc(100vw - 24px)); height:min(600px,calc(100dvh - 24px)); max-height:calc(100dvh - 24px); padding:24px; }
body .meld-preview-dialog .dialog-head, body .meld-preview-dialog .dialog-body, body .meld-preview-dialog .dialog-actions { min-width:0; width:100%; box-sizing:border-box; }
body .meld-preview-dialog .dialog-head { min-height:36px; margin:0; }
body .meld-preview-dialog .dialog-head h2 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.25rem; }
body .meld-preview-dialog .dialog-body { display:grid; grid-template-rows:auto minmax(0,1fr); gap:6px; min-height:0; margin:0; overflow:hidden; }
body .meld-preview-dialog #meldPreviewSummary { margin:0; color:var(--muted); font-size:.8rem; line-height:1.2; }
body .meld-preview-cards { display:grid; grid-template-columns:repeat(var(--preview-columns,3),var(--preview-card-width,64px)); gap:var(--preview-gap,6px); justify-content:center; align-content:center; min-height:0; overflow:hidden; }
body .meld-preview-cards .card { width:var(--preview-card-width,64px); height:calc(var(--preview-card-width,64px) * 1.395); min-height:0; flex:none; padding:0; pointer-events:none; }
body .meld-preview-cards .card-img { width:100%; height:100%; object-fit:fill; border-radius:6px; }
body .meld-preview-dialog .dialog-actions { min-height:42px; margin:0; padding-top:6px; }
body .meld-preview-dialog .dialog-actions button { min-width:0; min-height:36px; }
@media (max-width:400px) { body .table-view[data-game="canasta"] .meld-label { display:block; } }
@media (max-height:450px) {
  body .meld-preview-dialog[open] { padding:8px 12px; gap:5px; }
  body .meld-preview-dialog .dialog-head { min-height:30px; }
  body .meld-preview-dialog .dialog-head h2 { font-size:1.1rem; }
  body .meld-preview-dialog .dialog-body { gap:4px; }
  body .meld-preview-dialog .dialog-actions { min-height:34px; padding-top:4px; }
  body .meld-preview-dialog .dialog-actions button { min-height:30px; }
}
@media (max-width:400px) { body .meld-preview-dialog[open] { width:calc(100vw - 12px); padding:10px; } }

/* Ownership is readable without relying on color alone. */
body .meld-group-shell.is-own-meld > .meld-row { border:2px solid #6fdbb6; background:#123d3559; }
body .meld-group-shell.is-other-meld > .meld-row { border-color:#92a6c3; background:#25324940; }
body .meld-group-shell .meld-owner { position:absolute; bottom:25px; left:6px; right:6px; color:#c1ccdf; font-size:11px; line-height:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
body .meld-group-shell.is-own-meld .meld-owner { color:#a6ffe0; }
body .meld-group-shell.is-attach-target > .meld-row { box-shadow:inset 0 0 0 2px #f9df76; border-color:#f9df76; }

body .meld-group-shell .meld-preview-button { max-width:calc(100% - 4px); overflow:hidden; }

body .meld-group-shell.is-compact-meld .meld-label { max-width:calc(100% - 30px); }

  body .game-library { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
  body .game-library:has(.game-group) { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:auto; }
  body .game-library-grouped { display:flex !important; flex-direction:column; align-items:stretch; }
  body .game-group-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
body .game-group-solo .game-group-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
body .game-tile small { max-width:100%; white-space:normal; line-height:1.2; }
@media (max-width:480px) {

  body .game-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:5px; gap:4px; text-align:center; }

  body .game-tile strong { font-size:clamp(.76rem,3.3vw,1rem); }

  body .game-tile small { font-size:.61rem; }

  body .game-tile .tile-action { display:none; }

  body .game-art { width:34px; height:40px; font-size:30px; }

}