/* Pickleball notice: the compact card in the former Tagpuan notice's place and size, leaving the bench in view. */
#pickle-notice{position:fixed;z-index:11;top:calc(env(safe-area-inset-top,0px) + 18px);left:18px;width:260px;display:grid;grid-template-columns:72px minmax(0,1fr);align-items:start;gap:10px;padding:10px;overflow:hidden;border:1px solid var(--paper-line);border-radius:18px;background:var(--paper-grain),var(--paper);color:var(--paper-ink);box-shadow:var(--paper-shadow);font:14px/1.4 'Alegreya Sans',system-ui,sans-serif}
#pickle-notice[hidden],.at-store #pickle-notice,.controls-hidden #pickle-notice{display:none}
#pickle-notice>img{display:block;width:72px;height:auto;aspect-ratio:1;object-fit:cover;border-radius:9px}
#pickle-notice>div{padding:0 22px 0 0;display:flex;flex-direction:column;gap:6px}
#pickle-notice h2{margin:0;font:400 20px/1.15 Maragsa,Georgia,serif}
#pickle-notice p{margin:0 0 2px;font-size:14px;line-height:1.3}
#pickle-notice button{position:static;inset:auto;transform:none;opacity:1;height:auto;margin:0;font:600 13px 'Alegreya Sans',system-ui,sans-serif;cursor:pointer}
#pickle-notice .pickle-notice-close{position:absolute;right:4px;top:4px;width:28px;height:28px;min-height:28px;border:1px solid #e8ddbb70;border-radius:50%;background:#172e3e;color:#f5f2e9;font-size:20px;line-height:1}
#pickle-notice .pickle-notice-practice,#pickle-notice .pickle-notice-invite{min-height:32px;width:100%;padding:5px 8px;border-radius:24px}
#pickle-notice .pickle-notice-practice{border:1px solid #465d48;background:#465d48;color:#fff}
#pickle-notice .pickle-notice-invite{border:1px solid var(--paper-line);background:transparent;color:var(--paper-ink)}
#pickle-notice .pickle-notice-howto{align-self:flex-start;width:auto;min-width:0;white-space:nowrap;text-align:left;padding:2px 0;border:0;background:none;color:var(--paper-ink);font-weight:600;font-size:12px;text-decoration:underline;text-underline-offset:3px}
#pickle-notice button:focus-visible{outline:2px solid var(--paper-ink);outline-offset:2px}
@media(max-width:600px){#pickle-notice{left:10px;top:calc(env(safe-area-inset-top,0px) + 10px);width:min(200px,calc(100vw - 142px));grid-template-columns:46px minmax(0,1fr);padding:8px;gap:7px;border-radius:14px}#pickle-notice>img{width:46px}#pickle-notice>div{padding-right:0}#pickle-notice h2{font-size:17px;padding-right:18px}#pickle-notice .pickle-notice-close{width:24px;height:24px;min-height:24px;font-size:17px}#pickle-notice p{font-size:13px}#pickle-notice .pickle-notice-practice,#pickle-notice .pickle-notice-invite{min-height:30px;font-size:12px}}

/* How to start a game: a short paper dialog. */
#pickle-howto{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;padding:22px 22px 18px;border:1px solid var(--paper-line);border-radius:20px;background:var(--paper-grain),var(--paper);color:var(--paper-ink);box-shadow:var(--paper-shadow);font:15px/1.45 'Alegreya Sans',system-ui,sans-serif}
#pickle-howto::backdrop{background:#172e3e66}
#pickle-howto h2{margin:0 0 10px;padding-right:32px;font:400 24px/1.15 Maragsa,Georgia,serif}
#pickle-howto h3{margin:0 0 6px;font-size:15px}
#pickle-howto ol{margin:0 0 14px;padding-left:20px}#pickle-howto li{margin-bottom:8px}
#pickle-howto .pickle-howto-install{margin:0 0 14px;padding-top:12px;border-top:1px solid var(--paper-line)}#pickle-howto .pickle-howto-install p{margin:0 0 6px}
#pickle-howto [hidden]{display:none}
#pickle-howto button{position:static;inset:auto;transform:none;opacity:1;width:auto;height:auto;margin:0;font:700 14px 'Alegreya Sans',system-ui,sans-serif;cursor:pointer}
#pickle-howto .pickle-howto-close{position:absolute;inset:12px 12px auto auto;width:32px;height:32px;min-height:32px;border:1px solid var(--paper-line);border-radius:50%;background:transparent;color:var(--paper-ink);font-size:20px;line-height:1}
#pickle-howto .pickle-howto-done,#pickle-howto .pickle-howto-install-now{min-height:42px;padding:8px 22px;border:1px solid #465d48;border-radius:24px;background:#465d48;color:#fff}
#pickle-howto .pickle-howto-install-now{margin-top:4px;background:transparent;color:var(--paper-ink);border-color:var(--paper-line)}
#pickle-howto button:focus-visible{outline:2px solid var(--paper-ink);outline-offset:2px}