/* One ivory sheet, a dark working surface, and oversized editorial navigation. */
#pvp-open{display:none}
#pvp-panel{--paper:rgb(245,243,235);--ink:#11120f;--muted:#65675e;box-sizing:border-box;color:var(--ink);background:rgba(245,243,235,.75);border:0;border-radius:14px;width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 24px);min-height:min(760px,calc(100dvh - 24px));margin:12px auto;padding:24px 28px;overflow:auto;overscroll-behavior:contain;font:16px/1.5 Arial,sans-serif;box-shadow:none}
#pvp-panel::backdrop{background:transparent;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#pvp-panel *,#pvp-panel *::before,#pvp-panel *::after{box-sizing:border-box}
#pvp-panel [hidden]{display:none!important}
#pvp-panel .pvp-brand{display:flex;align-items:center;gap:16px;min-height:44px;margin-bottom:34px}
#pvp-panel .pvp-logo{font:46px/.9 Offekt,Georgia,serif;letter-spacing:-2px}
#pvp-panel .pvp-signature{font:10px/1.25 Arial,sans-serif;color:var(--muted)}
#pvp-panel #pvp-close{width:auto;min-width:68px;margin:0 0 0 auto;padding:8px 0;border:0;font-size:14px;align-self:center}
#pvp-panel .pvp-header{margin:0}
#pvp-panel .pvp-eyebrow{font:11px/1.5 Arial,sans-serif;letter-spacing:.09em;color:var(--muted);margin:0 0 12px}
#pvp-panel h2{font:64px/.94 Offekt,Georgia,serif;letter-spacing:-2px;font-weight:400;margin:0;max-width:100%}
#pvp-panel h3{font:30px/1.1 Offekt,Georgia,serif;font-weight:400;margin:12px 0}
#pvp-panel p{font-size:16px;line-height:1.5;margin:12px 0;overflow-wrap:anywhere}
#pvp-panel .pvp-intro{margin:18px 0 26px;color:var(--muted);max-width:400px}
#pvp-panel button{display:block;width:100%;min-width:0;min-height:48px;padding:12px 4px;background:transparent;border:0;border-bottom:1px solid #8c908155;border-radius:0;color:inherit;cursor:pointer;margin:0;font:15px/1.4 Arial,sans-serif;text-align:left;white-space:normal;overflow-wrap:anywhere}
#pvp-panel button:hover{background:#92957f18}
#pvp-panel button+button{margin-top:4px}
#pvp-panel button:disabled{opacity:.4;cursor:default}
#pvp-panel button.primary{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--paper);color:var(--ink);border:0;border-radius:4px;padding:13px 16px;min-height:52px}
/* Match the Lua navigation arrow with geometry, never an OS/emoji glyph.
   The empty decorative pseudo-element keeps button names unchanged. */
#pvp-panel button.primary::after{content:'';display:block;flex:0 0 20px;width:20px;height:20px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 16 16 4M4 4h12v12' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 16 16 4M4 4h12v12' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat}
#pvp-panel input{display:block;padding:13px 0;border:0;border-bottom:1px solid #85877d;border-radius:0;width:100%;min-width:0;font:17px/1.4 Arial,sans-serif;margin:8px 0 22px;background:transparent;color:inherit}
#pvp-panel input::placeholder{color:#a4a69d}
#pvp-panel :is(input,button,summary,a):focus-visible{outline:2px solid #969d78;outline-offset:4px}
#pvp-panel label{display:block;font-size:14px;margin-top:18px}
#pvp-status{color:var(--muted);font-size:14px!important;padding:4px 0}
#pvp-status:empty{display:none}
#pvp-panel :is(#pvp-create-options,#pvp-share,#pvp-account-options,#invite-preview){background:#242520;color:var(--paper);border:0;border-radius:6px;padding:20px;margin:0 0 18px}
#pvp-panel #pvp-create-description{font-size:14px;color:#b8bbb0;margin:0 0 22px}
#pvp-panel .pvp-step{display:block;font:10px/1.5 Arial,sans-serif;letter-spacing:.1em;color:#b8bbb0;margin:0 0 12px}
#pvp-link{font-size:14px!important}
#pvp-qr{width:180px;max-width:100%;margin:12px auto}
#pvp-qr svg{display:block;width:100%;height:auto}
#pvp-panel details{border-top:1px solid #8c908155;margin-top:16px;padding-top:4px}
#pvp-panel summary{cursor:pointer;min-height:48px;padding:12px 0;font-size:14px}
#pvp-panel .board-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin:0;padding:10px 0;border-bottom:1px solid #8c908155}
#pvp-panel .board-row button{border:0}
#pvp-panel .board-row button+button{margin:0;width:auto;font-size:13px;color:var(--muted)}
#pvp-panel .board-row>button:first-child{font:26px/1.15 Offekt,Georgia,serif}
#pvp-panel .pvp-actions{display:flex;gap:24px;margin-top:12px}
#pvp-panel .pvp-actions button+button{margin:0}
#pvp-panel #fullscreen{position:static;inset:auto;display:block;font-size:14px}
#pvp-panel #pvp-retry{margin:12px 0}
#pvp-panel .pvp-nav{display:flex;flex-direction:column;gap:0;margin:32px 0 0;padding:0 0 10px}
#pvp-panel .pvp-nav button{font:46px/1.05 Offekt,Georgia,serif;letter-spacing:-1px;border:0;padding:1px 0;min-height:50px;margin:0;position:relative}
#pvp-panel .pvp-nav button[aria-pressed="true"]{color:var(--ink)}
#pvp-panel .pvp-nav sup{display:inline-grid;place-items:center;vertical-align:top;margin:7px 0 0 6px;width:14px;height:14px;background:var(--ink);color:var(--paper);border-radius:50%;font:10px/1 Arial,sans-serif;letter-spacing:0}
#pvp-panel[data-section="boards"] :is(#pvp-create-options,#pvp-account-options,#pvp-more),
#pvp-panel[data-section="new"] :is(#pvp-active,#pvp-share,#pvp-library,#pvp-account-options,#pvp-more),
#pvp-panel[data-section="share"] :is(#pvp-create-options,#pvp-library,#pvp-account-options,#pvp-more),
#pvp-panel[data-section="account"] :is(#pvp-create-options,#pvp-active,#pvp-share,#pvp-library){display:none}
#pvp-panel[data-view="join"] .pvp-nav{display:none}
#pvp-panel #pvp-library{border:0;padding:0;margin:0}
#pvp-panel :is(#pvp-create-options,#pvp-library,#pvp-account-options)>summary{display:none}
#pvp-panel .danger{color:#b85443}
#pvp-panel #pvp-match-title{padding:12px 0}
#pvp-panel:not([data-section="share"]) #pvp-restore-invite{display:none}
#pvp-panel #pvp-restore-invite{background:var(--ink);color:var(--paper)}
#pvp-panel[data-view="join"] #pvp-create-options{margin-bottom:0;border-radius:6px 6px 0 0;padding-bottom:1px}
#pvp-panel[data-view="join"] #invite-preview{border-radius:0 0 6px 6px;padding-top:0}
@media(max-width:600px){#pvp-panel{padding:22px 24px}#pvp-panel h2{font-size:56px}#pvp-panel .pvp-brand{margin-bottom:30px}#pvp-panel .pvp-nav button{font-size:42px;min-height:46px}}
@media(max-width:360px){#pvp-panel{padding:20px}#pvp-panel h2{font-size:48px}#pvp-panel .pvp-nav button{font-size:37px}#pvp-panel :is(#pvp-create-options,#pvp-share,#pvp-account-options,#invite-preview){padding:16px}#pvp-panel .board-row{grid-template-columns:1fr}}
@media(max-height:480px){#pvp-panel{min-height:0}#pvp-panel .pvp-brand{margin-bottom:20px}}

/* Keep the top layer alive while the menu and its backdrop ease out. */
#pvp-panel{opacity:0;transform:translateY(12px);transition:opacity .24s ease,transform .24s ease,display .24s allow-discrete,overlay .24s allow-discrete}
#pvp-panel[open]{opacity:1;transform:translateY(0)}
#pvp-panel::backdrop{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:backdrop-filter .24s ease,-webkit-backdrop-filter .24s ease,display .24s allow-discrete,overlay .24s allow-discrete}
#pvp-panel[open]::backdrop{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@starting-style{
  #pvp-panel[open]{opacity:0;transform:translateY(12px)}
  #pvp-panel[open]::backdrop{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){#pvp-panel,#pvp-panel::backdrop{transition:none}}

/* Soft capsule feedback matches the rounded masthead. */
#pvp-panel button{border-radius:999px;transition:background-color .14s ease}
#pvp-panel button:not(:disabled):hover{background-color:rgba(146,149,127,.12);border-radius:999px}
#pvp-panel button:not(:disabled):active{background-color:rgba(146,149,127,.26);border-radius:999px}
#pvp-panel button:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:999px}
@media(prefers-reduced-motion:reduce){#pvp-panel button{transition:none}}

/* Keep the same inset in resting, hover, pressed, and focus states. */
#pvp-panel button{padding:12px 22px;border-bottom:0;line-height:1.4}
#pvp-panel button.primary{padding:13px 24px;border-radius:999px}
#pvp-panel #pvp-close{padding:8px 16px;min-width:80px;text-align:center}
#pvp-panel .pvp-nav{gap:8px}
#pvp-panel .pvp-nav button{padding:12px 24px;min-height:64px;font-size:clamp(28px,7vw,42px);line-height:1.15}
#pvp-panel .pvp-nav sup{vertical-align:middle;margin:0 0 0 8px}
#pvp-panel .board-row button{padding:12px 20px}
#pvp-panel .pvp-actions{gap:12px}
#pvp-panel .pvp-actions button{text-align:center}

/* Text follows the section edge; the capsule extends into its gutter. */
#pvp-panel .pvp-nav button{margin-left:-16px;width:calc(100% + 16px);padding-left:16px;padding-right:24px}
#pvp-panel .board-row>button:first-child{margin-left:-16px;width:calc(100% + 16px);padding-left:16px}
#pvp-panel .pvp-actions button{text-align:left}