/* Notifications share the existing header/toolbar height with the game. */
.player-invites-announcements{display:contents}
#player-invites-announcement{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
#player-invites-inbox{display:inline-grid;position:relative;place-items:center;flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:8px;border:1px solid #d6b36b66;border-radius:8px;background:#263c2e;color:var(--gold,#d6b36b)}
#player-invites-inbox:focus-visible{outline:3px solid var(--gold,#d6b36b);outline-offset:2px}
.player-invites-badge{position:absolute;right:0;top:0;min-width:16px;padding:0 3px;border-radius:9px;background:#eed5a2;color:#20291f;font:700 10px/16px system-ui;text-align:center}
.player-invites-badge[hidden],.player-invites-dialog [hidden],.player-invites-directory [hidden]{display:none!important}
html body.in-game #app .toolbar-buttons>button#player-invites-inbox:not(#match-control):not(#table-more){display:inline-grid!important;visibility:visible!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:8px!important}
.player-invites-dialog{width:min(560px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:0;border:1px solid #d6b36b66;border-radius:12px;background:#20291f;color:var(--ivory,#f5eedb);overflow:hidden;box-shadow:0 18px 70px #0009}
.player-invites-dialog[open]{display:flex;flex-direction:column}
.player-invites-dialog::backdrop{background:#0b180fd9}
.player-invites-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px;border-bottom:1px solid #d6b36b33;flex:0 0 auto}
.player-invites-dialog-header h2{font:normal 25px/1.2 Georgia,serif;margin:0}
.player-invites-dialog-body{padding:16px;overflow:auto;min-height:0;overscroll-behavior:contain}
.player-invites-dialog button,.player-invites-directory button,.player-invites-directory input{min-height:44px;min-width:44px}
.player-invites-dialog button[aria-disabled="true"],.player-invites-directory button[aria-disabled="true"]{opacity:.5;cursor:default}
.player-invites-dialog-actions{display:flex;align-items:stretch;flex-wrap:wrap;gap:8px;margin-top:16px}
.player-invites-dialog-actions button{flex:1 1 150px}
.player-invites-dialog-actions>.primary{margin:0;width:auto}
.player-invites-list{list-style:none;padding:0;margin:10px 0 18px;display:flex;flex-direction:column;gap:8px}
.player-invite-row{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #d6b36b33;border-radius:8px}
.player-invite-row>div{flex:1;min-width:0}.player-invite-row strong,.player-invite-row span,.player-invite-row small{display:block;overflow-wrap:anywhere}.player-invite-row span,.player-invite-row small{font-size:12px;color:var(--muted,#bac3b2);margin-top:3px}
.player-invite-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 12px;font-size:14px;line-height:1.45}.player-invite-facts dt{color:var(--muted,#bac3b2)}.player-invite-facts dd{margin:0;overflow-wrap:anywhere}
.player-invites-directory .online-dialog-content{gap:10px}.online-search-label{display:flex;flex-direction:column;gap:5px;font-size:13px}.online-search-label input{width:100%;font-size:16px}.online-dialog-help{font-size:12px;line-height:1.4;margin:0;color:var(--muted,#bac3b2)}
.player-invites-directory .online-player-list{grid-template-columns:minmax(0,1fr);flex:1 1 auto;max-height:none;overflow:auto}.player-invites-directory .online-dialog-content{flex:1 1 auto;overflow:auto}.online-player-info{display:flex;flex-direction:column;min-width:0;flex:1}.online-player-availability{font-size:11px;color:var(--muted,#bac3b2)}.online-player-invite{flex:0 0 auto;padding:6px 9px;font-size:12px}.online-random-player{font-size:13px;white-space:normal}
@media(max-width:400px){.masthead:has(>#player-invites-inbox){gap:5px}.masthead:has(>#player-invites-inbox) .profile-chip{max-width:82px}.player-invites-dialog-header,.player-invites-dialog-body{padding:12px}.player-invite-facts{grid-template-columns:minmax(0,1fr);gap:3px}.player-invite-facts dd{margin-bottom:8px}.online-player-initial{display:none}}

#invite-alert[hidden]{display:none!important}
#invite-alert{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;padding:4px 8px;border:1px solid #f5dc9e;border-radius:9px;background:#e4c27c;color:#202b22;box-shadow:0 2px 12px #0004;font-size:13px;line-height:14px}
#invite-alert-message{flex:1;min-width:0;margin:0;text-align:left}
#invite-alert-message>*{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#invite-alert-from,#invite-alert-game{font-size:13px;line-height:14px}
#invite-alert-verb{font-size:10px;line-height:12px}
.invite-alert-actions{display:flex;align-items:stretch;flex:0 0 auto;gap:6px}
#invite-alert .invite-alert-actions>button{min-width:64px;min-height:44px;height:44px;max-width:90px;margin:0;padding:4px 7px;border:1px solid #24372a70;background:#fff4d533;color:#202b22;font-size:12px;line-height:14px;white-space:normal}
#invite-alert .invite-alert-actions>#invite-alert-view{background:#173f31;border-color:#173f31;color:#fff8df;font-weight:700}
#invite-alert button:focus-visible{outline:3px solid #142e21;outline-offset:1px}
.masthead:has(>#invite-alert:not([hidden])){position:relative}
.masthead:has(>#invite-alert:not([hidden]))>:not(#invite-alert){visibility:hidden;pointer-events:none}
.masthead>#invite-alert{position:absolute;z-index:2;left:12px;right:12px;top:50%;transform:translateY(-50%);max-width:640px;margin-inline:auto}
/* The short layout already hides the masthead. Replace only the table title;
   Placar/Mesa and every card/action retain their position and hit area. */
html body.in-game #app .table-toolbar:has(>#invite-alert:not([hidden])){display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
html body.in-game #app .table-toolbar:has(>#invite-alert:not([hidden]))>div:first-child{grid-column:1;grid-row:1;visibility:hidden;pointer-events:none}
html body.in-game #app .table-toolbar:has(>#invite-alert:not([hidden]))>.toolbar-buttons{grid-column:2;grid-row:1}
html body.in-game #app .table-toolbar:has(>#invite-alert:not([hidden]))>.toolbar-buttons>button#player-invites-inbox:not(#match-control):not(#table-more){display:none!important}
html body.in-game #app .table-toolbar>#invite-alert{grid-column:1;grid-row:1;width:100%;height:44px;padding:0 3px;gap:3px;border:0;box-shadow:inset 0 0 0 1px #f5dc9e}
html body.in-game #app .table-toolbar #invite-alert-verb{display:none}
html body.in-game #app .table-toolbar #invite-alert-from{font-size:11px;line-height:14px}
html body.in-game #app .table-toolbar #invite-alert-game{font-size:10px;line-height:13px}
html body.in-game #app .table-toolbar #invite-alert .invite-alert-actions{gap:2px}
html body.in-game #app .table-toolbar #invite-alert .invite-alert-actions>button{min-width:52px;max-width:60px;padding:2px 3px;font-size:10px;line-height:12px}
#player-invites-sound{display:block;width:100%;margin-top:10px;text-align:left;font-size:13px}
#player-invites-sound[aria-checked="true"]{border-color:var(--gold,#d6b36b);color:var(--gold,#d6b36b)}
