/* Plugins (js/plug.js): the spot a plugin's card sits in, the Play a game sheet, and the small card for someone who doesn't
   have a plugin on yet ("Andrew wants to play Connect Four · Confirm and play") */
.gm{align-self:center;width:min(100%,340px);margin:10px 0 6px;animation:pop .28s cubic-bezier(.3,1.4,.5,1) both}
.gm-opts{display:flex;flex-direction:column;gap:8px}
.gm-opt{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;min-height:66px;border-radius:20px;background:var(--night);text-align:left;width:100%;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .15s,transform .14s cubic-bezier(.3,1.5,.5,1)}
.gm-opt:not(:disabled):hover,.gm-opt[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--me) 55%,transparent)}
button.gm-opt:not(:disabled):active{transform:scale(.975)}
.gm-opt:disabled{opacity:.5;cursor:default}
.gm-opt .lab{flex:1;min-width:0;line-height:1.3;font-size:15.5px;font-weight:600}
.gm-opt .lab b{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-family:var(--display);font-weight:600;font-size:16px}
.gm-opt .lab b .beta{margin-left:0;vertical-align:0}
.gm-opt .lab small{display:block;color:var(--muted);font-size:13px;font-weight:400;margin-top:2px}
.gm-opt .gm-ico{width:50px;height:50px;border-radius:15px}
.gm-opt .gl-tile.em{background:var(--raise)}
.nc-go:has(#gmGo){position:static;margin:16px 0 0;padding:0;background:none}
.gm-opt.soon{cursor:default;opacity:.62;box-shadow:none}
.gm-opt.soon .gl-tile{filter:saturate(.7)}
.sheet .gm-h{margin:20px 4px 9px}
.gm-all{display:flex;justify-content:center;margin:16px 0 4px}
.gm-all button{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:12px;font-weight:700;font-size:14px;color:var(--muted);transition:background .15s,color .15s,transform .14s cubic-bezier(.3,1.5,.5,1)}
.gm-all button:hover{background:var(--night);color:var(--text)}
.gm-all button:active{transform:scale(.95)}
.gm-ico{width:46px;height:46px;flex:none;border-radius:12px;background:color-mix(in srgb,var(--me) 12%,#121214);display:grid;grid-template-columns:repeat(4,1fr);align-content:center;gap:3px;padding:6px}
.gm-ico i{display:block;width:100%;aspect-ratio:1;border-radius:50%;background:rgba(0,0,0,.45)}
.gm-ico.em{display:grid;grid-template-columns:none;place-items:center;font-size:24px}
.pl-stub{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:22px;background:color-mix(in srgb,var(--me) 7%,var(--raise));box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.pl-card{display:flex;align-items:center;gap:12px}
.pl-card .lab{flex:1;min-width:0;line-height:1.35}
.pl-card .lab b{display:block;font-size:14.5px;font-weight:700}
.pl-card .lab small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.pl-ic{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:22px;background:color-mix(in srgb,var(--me) 14%,#121214)}
.pl-card.quiet .pl-ic{opacity:.7}
.pl-go{display:flex;gap:8px}
.pl-go .pill{flex:1;height:40px;font-size:14px;border-radius:13px}
.pl-stub.pass{background:none;box-shadow:none;padding:0;align-items:center}
.pl-line{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px}
.pl-line .pl-ic{width:24px;height:24px;font-size:13px;border-radius:8px}
.pl-row .pl-ic{width:34px;height:34px;font-size:18px;border-radius:10px;margin-right:2px}
/* A game's own settings, on its page in Settings › Games */
.pl-pref{padding-left:16px}
.pl-pref .lab{font-size:14.5px}
.pl-seg{display:flex;flex:none;gap:2px;padding:3px;border-radius:12px;background:var(--night)}
.pl-seg button{height:30px;padding:0 11px;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted);transition:background .15s,color .15s}
.pl-seg button[aria-pressed="true"]{background:var(--me);color:var(--ink)}
@media (max-width:420px){.pl-pref:not([data-sw]){flex-wrap:wrap;padding-left:16px}.pl-pref:not([data-sw]) .lab{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.gm{animation:none}}

/* Beta tag, next to a plugin's name (Trick Trivia) */
.beta{display:inline-block;vertical-align:2px;margin-left:4px;padding:2px 7px;border-radius:999px;font:700 9.5px/1.3 var(--body,inherit);letter-spacing:.06em;text-transform:uppercase;color:#d9ccff;background:rgba(199,182,255,.16);box-shadow:inset 0 0 0 1px rgba(199,182,255,.35)}
/* Call games: the Games button fits with the others on a phone, and the invite at the top of the call screen */
.device.phone .ctrls:has(#cGame){gap:10px}
.device.phone .ctrls:has(#cGame) .ci{width:52px;height:52px}
.cg-inv{position:absolute;left:12px;right:12px;top:58px;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px 14px;border-radius:22px;background:rgba(30,30,33,.82);backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 10px 30px rgba(0,0,0,.35);animation:pop .3s cubic-bezier(.3,1.3,.5,1) both;max-width:520px;margin:0 auto}
.cg-inv .lab{flex:1;min-width:0;line-height:1.35}
.cg-inv .lab b{display:block;font-size:14.5px;font-weight:700}
.cg-inv .lab small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.cg-go{display:flex;gap:8px;width:100%}
.cg-go .pill{flex:1;height:40px}
.call.mini .cg-inv{display:none}

/* Settings › Games: a search box, groups of cards, and each game's own page */
.gl-find{margin:2px 0 4px}
.gl-sec[hidden],.gl-card[hidden]{display:none}
.gl-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:22px 8px 9px;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--muted)}
.gl-h small{font:600 12px/1.2 var(--body,inherit);letter-spacing:0;color:color-mix(in srgb,var(--muted) 75%,transparent)}
.gl-list{display:flex;flex-direction:column;gap:8px}
.gl-card{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:20px;background:var(--raise);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);transition:transform .14s cubic-bezier(.3,1.5,.5,1),box-shadow .15s}
.gl-card:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.gl-card:has(.gl-main:active){transform:scale(.975)}
.gl-card.hit{animation:hit 1.2s ease}
.gl-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:58px;text-align:left}
.gl-main .lab{flex:1;min-width:0;line-height:1.3}
.gl-main .lab b{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-family:var(--display);font-weight:600;font-size:16px}
.gl-main .lab b .beta{margin-left:0;vertical-align:0}
.gl-main .lab small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.gl-card .chev{padding:0 4px}
.gl-card .tg{cursor:pointer}
.gl-card .tg:active::after{width:26px}
.gl-card .tg[aria-checked="true"]:active::after{transform:translateX(16px)}
.gl-tile{width:50px;height:50px;flex:none;border-radius:15px;display:grid;place-items:center;color:var(--gc);background:color-mix(in srgb,var(--gc) 15%,#1d1d1f)}
.gl-tile svg{width:26px;height:26px}
.gl-tile.em{font-size:24px;background:var(--night)}
.gl-tile.big{width:92px;height:92px;border-radius:28px;box-shadow:0 14px 30px -14px color-mix(in srgb,var(--gc) 60%,transparent)}
.gl-tile.big svg{width:46px;height:46px}
.gl-tile.big.em{font-size:44px}
.gl-card.soon .gl-tile{filter:saturate(.7);opacity:.85}
.gl-soon{display:inline-block;padding:2px 7px;border-radius:999px;font:700 9.5px/1.3 var(--body,inherit);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--night);box-shadow:inset 0 0 0 1px var(--line)}
.gd-top{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 12px 20px}
.gd-top h3{margin:16px 0 0;font-family:var(--display);font-weight:600;font-size:25px;line-height:1.15}
.gd-meta{display:flex;align-items:center;gap:7px;margin-top:8px;color:var(--muted);font-size:13px;font-weight:700}
.gd-meta .beta{margin-left:0;vertical-align:0}
.gd-top p{margin:12px 0 0;color:color-mix(in srgb,var(--text) 82%,var(--muted));font-size:15px;line-height:1.5;max-width:340px}
.gd .gl-play{width:100%;height:52px;border-radius:17px;font-family:var(--display);font-weight:600;font-size:16.5px;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;transition:transform .14s cubic-bezier(.3,1.5,.5,1),filter .15s}
.gd .gl-play:hover{filter:brightness(1.06)}
.gd .gl-play:active{transform:scale(.97)}
.gd .srow{transition:background .15s}
.gd button.srow:active{background:color-mix(in srgb,var(--text) 5%,transparent)}
.gl-wait{padding:14px 16px;border-radius:18px;background:var(--raise);color:var(--muted);font-size:14px;line-height:1.45;text-align:center;margin-bottom:4px}
.gl-back{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 12px 0 8px;margin:0 0 4px -4px;border-radius:12px;font-weight:700;font-size:14px;color:var(--muted);transition:background .15s,color .15s}
.gl-back:hover{background:var(--raise);color:var(--text)}
.nc-fr .gav,.nc-fr .gimg{width:40px;height:40px;flex:none}
@media (prefers-reduced-motion:reduce){.gl-card,.gd .gl-play{transition:none}.gl-card:has(.gl-main:active){transform:none}}