html.portal-pending { background: #000; }
html.portal-pending body, html.portal-revealed body { opacity: 1; animation: none; }
html.portal-pending body > :not(#portal-gate):not(script):not(style):not(link) { visibility: hidden; }
html.portal-pending.portal-revealed #bg-gallery,
html.portal-pending.portal-revealed #bg-overlay { visibility: visible; }
#portal-gate[hidden], #portal-tools[hidden], #portal-admin [hidden] { display: none !important; }
#portal-gate {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  padding: 1.5rem; overflow: auto; background: #000; color: #f3efe6; color-scheme: dark;
  transition: background-color 1.4s ease;
}
#portal-gate.is-visible { background: transparent; }
.portal-card {
  width: min(100%, 280px); padding: 1.5rem 0; text-align: center;
  visibility: hidden; pointer-events: none;
  opacity: 0; transition: opacity 1.4s ease .2s;
  text-shadow: 0 1px 18px #07080a, 0 1px 4px #07080a99;
}
.portal-card.is-visible { visibility: visible; pointer-events: auto; opacity: 1; }
.portal-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.portal-roles { display: flex; justify-content: center; gap: 3.4rem; margin-bottom: 2.8rem; }
#portal-gate .portal-roles button { position: relative; border: 0; padding: .7rem .25rem; background: transparent; color: #f3efe6c2; font: 300 1.3rem/1.5 Fraunces, Georgia, serif; letter-spacing: .02em; text-shadow: inherit; transition: color .3s ease; }
.portal-roles button::after { content: ''; position: absolute; height: 1px; bottom: .1rem; left: 35%; right: 35%; background: currentColor; opacity: 0; transition: opacity .3s ease; }
#portal-gate .portal-roles button[aria-pressed="true"], #portal-gate .portal-roles button:hover { color: #f3efe6; }
.portal-roles button[aria-pressed="true"]::after { opacity: .8; }
#portal-gate button, #portal-tools button, #portal-admin button, #portal-admin input {
  font: 400 .76rem/1.5 'DM Mono', ui-monospace, monospace; cursor: pointer;
}
#portal-password { width: 100%; height: 3.5rem; padding: .7rem .5rem; border: 0; border-bottom: 1px solid #f3efe694; border-radius: 0; background: transparent; color: #f3efe6; font: 1.2rem/1.5 'DM Mono', monospace; letter-spacing: .3em; text-align: center; text-shadow: inherit; caret-color: #f3efe6; outline: none; transition: border-color .3s ease; }
#portal-password:focus { border-bottom-color: #f3efe6; }
#portal-password:focus-visible { border-bottom-color: #f3efe6; }
#portal-password[aria-invalid="true"] { border-bottom-color: #e0b6a2; }
#portal-password:-webkit-autofill { -webkit-text-fill-color: #f3efe6; caret-color: #f3efe6; transition: background-color 86400s; }
#portal-gate .portal-guest { border: 0; padding: .8rem 1.3rem; margin-top: 1.7rem; background: transparent; color: #f3efe6d9; letter-spacing: .16em; text-shadow: inherit; transition: color .3s ease; }
#portal-gate .portal-guest:hover { color: #f3efe6; }
#portal-error { min-height: 3.2em; margin-top: 1rem; font: .7rem/1.6 'DM Mono', monospace; color: #f3efe6; }
#portal-gate[aria-busy="true"] #portal-password { border-bottom-color: #f3efe680; }
#portal-gate button:disabled { opacity: .5; cursor: wait; }
#portal-gate button:focus-visible, #portal-tools button:focus-visible, #portal-admin button:focus-visible { outline: 1px solid #cbab63; outline-offset: 4px; }
#portal-tools { position: fixed; z-index: 7; top: 1.2rem; right: 1.2rem; display: flex; align-items: center; gap: .35rem; }
#portal-tools button { border: 1px solid #f3efe624; border-radius: 999px; padding: .55rem .8rem; background: #07080a88; color: #f3efe6ab; backdrop-filter: blur(12px); }
#portal-tools [data-admin-note][hidden] { display: none !important; }
#portal-admin {
  width: min(500px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto;
  margin: auto; padding: 1.8rem; border: 1px solid #f3efe633; border-radius: 16px;
  color: #f3efe6; background: #0b0d10; color-scheme: dark; font: .78rem/1.7 'DM Mono', monospace;
}
#portal-admin::backdrop { background: #000b; backdrop-filter: blur(8px); }
#portal-admin h2 { font: 300 1.7rem Fraunces, Georgia, serif; margin-bottom: 1.2rem; }
#portal-admin button { border: 1px solid #f3efe62e; padding: .5rem .75rem; border-radius: 6px; background: #f3efe60a; color: #f3efe6; }
.portal-admin-close { float: right; }
.portal-admin-section { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid #f3efe61c; }
#portal-admin input { width: 100%; border: 1px solid #f3efe62e; border-radius: 5px; padding: .6rem; margin: .5rem 0; background: #000; color: #f3efe6; cursor: text; }
#portal-clique-secret { display: block; margin-top: .8rem; letter-spacing: .04em; }
#portal-invite-url { word-break: break-all; }
#portal-invites-list { list-style: none; padding: 0; margin-top: 1rem; }
#portal-invites-list li { display: flex; justify-content: space-between; gap: .8rem; padding: .8rem 0; border-top: 1px solid #f3efe614; }
#portal-invites-list small { display: block; opacity: .55; }
#portal-admin-status { min-height: 1.7em; color: #e0b6a2; margin-top: 1rem; }
body.immersive #portal-tools { visibility: hidden; }
.medal[hidden] { display: none !important; }
@media(max-width: 680px) { #portal-tools { top: 5rem; right: 1rem; } .portal-card { width: min(100%, 250px); } }
@media(max-height: 420px) { .portal-roles { margin-bottom: 1.1rem; } #portal-gate .portal-guest { margin-top: .4rem; } }
@media(prefers-reduced-motion: reduce) { #portal-gate, .portal-card, #portal-password, #portal-gate button, .portal-roles button::after { transition: none !important; } }