#games-toggle{top:22px;left:22px;right:auto;bottom:auto;z-index:5;width:44px;height:44px;opacity:1;background:var(--glass);color:var(--glass-ink);border:1px solid var(--glass-line);backdrop-filter:blur(20px);box-shadow:var(--glass-shadow)}
#games-panel,#chess-table{background:var(--glass);color:var(--glass-ink);border:1px solid var(--glass-line);backdrop-filter:blur(24px) saturate(110%);-webkit-backdrop-filter:blur(24px) saturate(110%);box-shadow:var(--glass-shadow);font:14px/1.5 'Alegreya Sans',system-ui,sans-serif}
#games-panel{position:fixed;inset:12px auto 12px 12px;width:min(370px,calc(100% - 24px));max-width:none;max-height:none;height:calc(100svh - 24px);margin:0;padding:24px;border-radius:22px;overflow:auto}#games-panel::backdrop{background:#0b1b2010;backdrop-filter:blur(2px)}
#games-panel header,#chess-table header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}#games-panel h1{font:400 27px Georgia;margin:0}#games-panel h2{font:400 19px Georgia;margin:0 0 5px}.games-intro{font-size:12px;opacity:.7;margin:8px 0 24px}
#games-panel button,#chess-table button{position:static;width:auto;height:auto;border:1px solid var(--glass-line);border-radius:18px;background:var(--field-bg);color:var(--glass-ink);opacity:1;backdrop-filter:none;box-shadow:none;font:12px 'Alegreya Sans',system-ui,sans-serif;padding:9px 12px;cursor:pointer}#games-panel button:hover,#chess-table button:hover{background:#99b48340}#games-panel .game-icon,#chess-table .game-icon{width:28px;height:28px;padding:0;display:grid;place-items:center;font-size:23px;background:transparent}
.game-catalog{display:flex;flex-direction:column;gap:12px}.game-card{padding:16px 12px;display:grid;grid-template-columns:40px 1fr;gap:10px;border:1px solid var(--glass-line);border-radius:16px;background:var(--field-bg)}.game-art{font:35px 'Alegreya Sans',system-ui,sans-serif;align-self:start;text-align:center}.game-card h2{font-size:19px!important}.game-card p{margin:0;font-size:12px;opacity:.7}.game-card button{grid-column:2;justify-self:start}.game-actions{grid-column:2;display:flex;flex-wrap:wrap;gap:8px}.soon{grid-column:2;justify-self:start;font-size:10px;letter-spacing:.03em;background:#93a17c25;border:1px solid var(--glass-line);border-radius:12px;padding:3px 10px}.upcoming{opacity:.65}
.online-invite{margin-top:26px;padding-top:22px;border-top:1px solid var(--glass-line)}.online-invite>p{font-size:12px;opacity:.75}#invite-online{background:#465d48!important;color:#fff!important;width:100%!important}#invite-online:disabled{opacity:.5}#invite-links{margin-top:14px;display:flex;flex-direction:column;gap:10px}#invite-links a{color:inherit;text-underline-offset:3px}#invite-links label{font-size:11px}#friend-link{display:block;width:100%;margin-top:5px;padding:9px;border:1px solid var(--glass-line);border-radius:8px;background:var(--field-bg);color:inherit;font:11px 'Alegreya Sans',system-ui,sans-serif}.games-credit{font-size:10px;opacity:.65;margin-top:26px}.games-credit a{color:inherit}#invite-status:empty{display:none}
#chess-table{position:fixed;z-index:4;left:18px;top:50%;transform:translateY(-50%);width:clamp(250px,25vw,330px);padding:14px;border-radius:18px}#chess-table h2{font:400 22px Georgia;margin:0}#chess-table header span{font-size:10px;opacity:.65}#chess-status{font-size:12px;min-height:18px;margin:12px 0 10px}#chess-board{display:grid;grid-template-columns:repeat(8,1fr);border-radius:6px;overflow:hidden;border:1px solid #6f806a70;aspect-ratio:1;background:#eee8d0}
#chess-board .square{position:relative;inset:auto;margin:0;padding:0;min-width:0;width:100%;height:100%;aspect-ratio:1;border:0;border-radius:0;display:grid;place-items:center;cursor:pointer;line-height:1;background:#e5ddc4;color:#23352b;font-family:'DejaVu Sans','Noto Sans Symbols 2',serif;font-size:clamp(21px,2.8vw,34px)}#chess-board .dark-square{background:#7f9477}#chess-board .square.selected{box-shadow:inset 0 0 0 3px #e8bc5e;background:#b9bc7e}#chess-board .square.last-move{background:#b3b779}#chess-board .square.legal:after{content:"";position:absolute;width:20%;height:20%;border-radius:50%;background:#304d3e55}#chess-board .square.capture:after{width:85%;height:85%;border:3px solid #304d3e65;background:none}#chess-board .white-piece{color:#fff8df;text-shadow:0 1px 1px #283b2b,1px 0 #283b2b,-1px 0 #283b2b,0 -1px #283b2b}#chess-board .black-piece{color:#23362c;text-shadow:0 1px #d8e0c08c}#chess-board .square:focus-visible{outline:3px solid #f7c15d;outline-offset:-3px;z-index:1}.coordinate{position:absolute;left:2px;bottom:1px;font:8px 'Alegreya Sans',system-ui,sans-serif;opacity:.7;color:#263c30;text-shadow:none}
.chess-controls{display:flex;justify-content:space-between;gap:6px;margin-top:12px}.chess-controls button{padding:7px 10px!important}#chess-table button:disabled{opacity:.4;cursor:default}#move-list{font:10px/1.5 'Alegreya Sans',system-ui,sans-serif;max-height:34px;overflow:auto;opacity:.7;margin:10px 0}.board-hint{font-size:10px;opacity:.65;margin:9px 0 0}#chess-invite{width:100%!important;font-size:11px!important}#promotion{border:1px solid var(--glass-line);border-radius:10px;padding:10px;margin:10px 0;font-size:11px}#promotion-choices{display:flex;gap:5px;margin:8px 0}#promotion-choices button{flex:1;font-size:22px;padding:5px}#restart-confirm{font-size:11px;margin-top:10px;display:flex;gap:6px;align-items:center}#restart-confirm button{padding:6px!important}
.your-peep{touch-action:none;cursor:grab!important}.your-peep.dragging{transform:translate(calc(-50% + var(--drag-x,0px)),var(--drag-y,0px));z-index:8;cursor:grabbing!important;opacity:.85!important}.seat-target{position:absolute;left:var(--seat-left);bottom:20%;width:5%;height:7%;transform:translateX(-50%);display:grid;place-items:center;border:1px dashed #c6d2b4;background:#d9e2bd80;border-radius:50%;font:10px 'Alegreya Sans',system-ui,sans-serif;color:#263b2b;opacity:0;transition:opacity .15s;pointer-events:none}.seat-dragging .seat-target{opacity:1}.seat-target.occupied{border-color:#cc9c7b;background:#926e5c80;color:#fff}.seat-dragging .seated-person:not(.dragging){opacity:.7!important}#seat-message{position:fixed;z-index:6;left:50%;bottom:112px;transform:translateX(-50%);max-width:90vw;padding:7px 12px;border-radius:14px;background:var(--glass);color:var(--glass-ink);border:1px solid var(--glass-line);backdrop-filter:blur(14px);font:12px 'Alegreya Sans',system-ui,sans-serif}#seat-message:empty{display:none}#seat-options{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}#profile-panel #seat-options button{height:32px;width:100%;border-radius:10px;padding:0}#seat-options button[aria-pressed="true"]{outline:2px solid var(--accent)}#seat-options button:disabled{opacity:.3;cursor:default}.muted{font-size:10px;opacity:.65}
@media(max-width:900px){#chess-table{left:12px;top:auto;bottom:12px;transform:none;width:min(310px,calc(100vw - 24px));max-height:calc(100svh - 88px);overflow:auto}#chess-board .square{font-size:30px}}

.tambay-invites{margin-top:26px;padding-top:20px;border-top:1px solid var(--glass-line)}.tambay-invites p{font-size:12px;opacity:.75}.tambay-invites label{font-size:11px}.tambay-invites select{display:block;width:100%;margin:8px 0 12px;border:1px solid var(--glass-line);border-radius:10px;background:var(--field-bg);color:var(--glass-ink);padding:10px;font:12px 'Alegreya Sans',system-ui,sans-serif}.tambay-invites option{color:#26382a;background:#eff0e6}#games-panel #invite-tambay{width:100%;background:#465d48;color:#fff}#games-panel #invite-tambay:disabled{opacity:.4;cursor:default}.room-invite{margin-top:12px;padding:12px;border:1px solid var(--glass-line);border-radius:12px;background:var(--field-bg)}.room-invite p{margin:0 0 9px}.room-invite button{margin-right:6px;font-size:11px!important;padding:7px 10px!important}

#games-toggle.has-invite:after{content:"";position:absolute;top:1px;right:1px;width:8px;height:8px;border:2px solid #f3f0e3;border-radius:50%;background:#b47a4f}

/* Seats someone else has: red, crossed out and not clickable (the name shows on hover). */
#profile-panel #seat-options button.taken{opacity:1;background:#f6dcd6;color:#9b2c22;border:1px solid #d9928a;text-decoration:line-through;cursor:not-allowed}
:root[data-time="night"] #profile-panel #seat-options button.taken{background:#5b2c2a;color:#ffd7cf;border-color:#a65a52}
#seat-picker legend .muted{font:400 12px/1.4 'Alegreya Sans',system-ui,sans-serif;opacity:.7}

/* Scrapbook card for a random tambay: a Sign in link in place of Open. */
#games-panel .game-card .sign-in-link{align-self:center;padding:8px 14px;border-radius:18px;border:1px solid var(--glass-line);background:var(--field-bg);color:var(--glass-ink);font:600 14px 'Alegreya Sans',system-ui,sans-serif;text-decoration:none;white-space:nowrap}#games-panel .game-card .sign-in-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Account-only links stay separate from seated chess eligibility. */
html:not([data-account="guest"]) .guest-only{display:none}
.games-karaoke{margin-top:26px;padding-top:20px;border-top:1px solid var(--glass-line)}
.games-karaoke p{font-size:12px;opacity:.72}
.games-karaoke label{display:block;font-size:11px}
.games-karaoke input{box-sizing:border-box;width:100%;margin:7px 0 10px;padding:10px 11px;border:1px solid var(--glass-line);border-radius:10px;background:var(--field-bg);color:var(--glass-ink);font:12px 'Alegreya Sans',system-ui,sans-serif}
.games-karaoke-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.games-karaoke-actions a,.games-karaoke-actions button,.games-karaoke-admin{font-size:11px!important}
.games-karaoke-search-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 14px}.games-karaoke-search-row>span{font-size:10px;opacity:.62}.games-karaoke-search{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 12px;border:1px solid var(--glass-line);border-radius:999px;background:var(--field-bg);color:var(--glass-ink);font:600 12px 'Alegreya Sans',system-ui,sans-serif;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}.games-karaoke-search:hover,.games-karaoke-search:focus-visible{background:#aebf9638;border-color:var(--accent);transform:translateY(-1px)}
.games-karaoke-admin{margin-top:8px}
#games-karaoke-status{min-height:1.2em;margin:8px 0 0}
#music-panel .karaoke-card{display:none}

/* Games as a 2x2 grid of cards; Open shows that game's own view in the panel (games-layout.mjs). */
.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#games-panel .game-tile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:150px;padding:14px 12px 12px;border-radius:16px;background:var(--field-bg);text-align:left;font:inherit;line-height:1.25}
#games-panel .game-tile:hover{border-color:#465d48}#games-panel .game-tile:focus-visible{outline:2px solid #465d48;outline-offset:2px}
.game-tile-art{font:30px 'Alegreya Sans',system-ui,sans-serif;margin-bottom:6px}.game-tile-name{font:400 19px Georgia,serif}.game-tile-line{font-size:12px;opacity:.7}
.game-tile-open{margin-top:auto;padding:5px 12px;border:1px solid var(--glass-line);border-radius:14px;font-size:12px;font-weight:700}
.game-tile.has-invite .game-tile-open{background:#465d48;color:#f5f2e9;border-color:#465d48}.game-tile.has-invite .game-tile-open::before{content:"Invitation · "}
.game-view-head{display:flex;align-items:center;gap:10px;margin:0 0 14px}.game-view-head h2{margin:0}
#games-panel .game-back{padding:6px 12px;font-size:12px}
/* Inside a game's view the card is its introduction: no frame, and the view heading names the game. */
.game-view .game-card{border:0;background:none;padding:0 0 4px}.game-view .game-card h2{display:none}
.game-view .tambay-invites,.game-view .games-karaoke{margin-top:18px}.game-view[data-game="karaoke"] .games-karaoke{margin-top:0;padding-top:0;border-top:0}.game-view[data-game="karaoke"] .karaoke-heading{display:none}
/* Pickleball view: Practice is the main choice; inviting uses the form just below it. */
.game-view[data-game="pickle"] .game-actions>button:first-child{display:none}
#games-panel .game-view .game-practice{background:#465d48;color:#f5f2e9;border-color:#465d48;font-weight:700;padding:9px 22px}