:root {
  --ivory: #f7f8f5;
  --paper: #fffefd;
  --ink: #2f3b44;
  --ink-soft: #65727a;
  --sage: #a9b3a5;
  --sage-dark: #5f7064;
  --sage-pale: #e9eee9;
  --blue: #aec4da;
  --blue-pale: #edf3f8;
  --brass: #a18c6e;
  --line: rgba(47, 59, 68, .14);
  --danger: #a33c36;
  --success: #426c4a;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Baskerville, Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow: 0 26px 75px rgba(48, 63, 72, .12);
}
.is-display-slideshow > .display-header { display:none; }
.is-display-slideshow { overflow:hidden; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; color-scheme: light; }
body { min-height: 100vh; margin: 0; background: var(--ivory); color: var(--ink); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #7899b7; outline-offset: 4px; }
.eyebrow { margin: 0 0 12px; color: var(--sage-dark); font-size: .75rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; line-height: 1.04; }
h1 { font-size: clamp(3rem, 7vw, 6.4rem); }
h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); }
a { color: inherit; }

.portal-page { background: linear-gradient(145deg, var(--blue-pale), var(--ivory) 42%, var(--sage-pale)); }
.portal-header { position: sticky; z-index: 10; top: 0; display: flex; min-height: 76px; padding: 12px clamp(18px, 4vw, 54px); border-bottom: 1px solid var(--line); align-items: center; justify-content: space-between; gap: 24px; background: rgba(247,248,245,.91); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.portal-brand { display: flex; align-items: baseline; gap: 14px; text-decoration: none; }
.portal-brand span { font-family: var(--serif); font-size: 1.55rem; letter-spacing: .1em; }
.portal-brand small { color: var(--ink-soft); font-size: .68rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.portal-header nav { display: flex; align-items: center; gap: 18px; }
.portal-header nav a, .portal-header nav button { min-height: 44px; padding: 10px 0; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: .72rem; font-weight: 750; text-decoration: none; }
.personal-thanks { margin: 24px 0; padding: clamp(26px,5vw,48px); border: 1px solid rgba(161,140,110,.28); border-radius: 24px; background: linear-gradient(145deg,#fffefd,#f5f0e7); text-align: center; }
.personal-thanks h2 { margin-bottom: 16px; }
.personal-thanks p:not(.eyebrow) { max-width: 700px; margin-inline: auto; color: var(--ink-soft); }
.personal-thanks > strong { display: block; margin-top: 22px; color: var(--brass); font-family: var(--serif); font-size: 1.2rem; font-weight: 400; }
.portal-header nav a:hover, .portal-header nav button:hover { color: var(--ink); }
.portal-shell { width: min(980px, calc(100% - 36px)); margin: 0 auto; padding-block: clamp(56px, 9vw, 112px); }
.portal-shell--wide { width: min(1180px, calc(100% - 36px)); }
.portal-announcement { display: flex; width: min(880px, calc(100% - 36px)); margin: 24px auto -22px; padding: 13px 18px; border: 1px solid var(--line); border-radius: 999px; align-items: center; gap: 12px; background: rgba(255,254,253,.88); }
.portal-announcement span, .portal-live__dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--sage-dark); box-shadow: 0 0 0 5px rgba(95,112,100,.12); }
.portal-announcement p { margin: 0; font-size: .82rem; font-weight: 700; }

.portal-login { width: min(650px, 100%); margin: 0 auto; padding: clamp(32px, 7vw, 70px); border: 1px solid var(--line); border-radius: 30px; background: rgba(255,254,253,.94); box-shadow: var(--shadow); text-align: center; }
.portal-login h1 { margin-bottom: 22px; font-size: clamp(2.8rem, 8vw, 5rem); }
.portal-login > p:not(.eyebrow) { color: var(--ink-soft); }
.portal-ornament { display: grid; width: 70px; height: 70px; margin: 0 auto 28px; border: 1px solid rgba(161,140,110,.44); border-radius: 50%; color: var(--brass); font-size: 1.6rem; place-items: center; }
.portal-login form, .code-form { display: grid; margin-top: 32px; gap: 10px; text-align: left; }
.portal-login label, .code-form label { font-size: .75rem; font-weight: 800; }
.portal-login input, .code-form input { width: 100%; min-height: 54px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 1rem; text-transform: uppercase; }
.portal-button { display: inline-flex; min-height: 50px; padding: 12px 22px; border: 1px solid var(--ink); border-radius: 999px; align-items: center; justify-content: center; background: var(--ink); color: #fff; cursor: pointer; font-size: .76rem; font-weight: 800; text-decoration: none; }
.portal-button:hover { background: #44515a; }
.portal-button:disabled { cursor: wait; opacity: .55; }
.portal-status { min-height: 24px; margin: 4px 0 0; color: var(--ink-soft); font-size: .78rem; }
.portal-status.is-error { color: var(--danger); }
.portal-status.is-success { color: var(--success); }

/* Invitation QR entry: readable fields and a clear first step on small screens. */
.guest-entry-page .notification-optin,.guest-entry-page .wedding-guest-toolbar,.guest-entry-page .wedding-app-nav{display:none!important}
[data-guest-login]{text-align:left;padding:clamp(24px,5vw,48px)}
[data-guest-login] .portal-ornament{margin-left:0;margin-bottom:16px;width:54px;height:54px}
[data-guest-login] h1{font-size:clamp(2.25rem,6vw,3.5rem);line-height:1.1;margin-bottom:16px}
[data-guest-login] > p:not(.eyebrow){font-size:1.05rem;line-height:1.55}
[data-guest-login] form{margin-top:24px;gap:10px}
[data-guest-login] label{font-size:1rem;font-weight:700}
[data-guest-login] input,[data-guest-login] select{width:100%;min-height:54px;padding:12px 14px;border:1px solid #82939d;border-radius:12px;background:#fff;color:var(--ink);font-size:1.06rem}
[data-guest-login] input{letter-spacing:.04em}
[data-guest-login] .portal-button{width:100%;min-height:54px;margin-top:10px;font-size:1.05rem;line-height:1.35}
[data-guest-login] .guest-code-hint{margin:0 0 8px;color:#435761;font-size:.95rem;line-height:1.5}
[data-guest-login] .guest-field-error{margin:0 0 8px;color:#862e23;font-size:1rem;font-weight:700;line-height:1.45}
[data-guest-login] [aria-invalid="true"]{border:2px solid #a33c36;background:#fffafa}
[data-guest-login] .portal-status{min-height:0;margin-top:6px;font-size:1rem;line-height:1.45}
[data-guest-login] .guest-account-link{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line)}
[data-guest-login] .guest-account-link a{color:#244d65;font-weight:700;text-underline-offset:4px}
@media(max-width:430px){[data-guest-login]{padding:24px 20px}[data-guest-login] h1{font-size:2.25rem}}

.portal-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: clamp(34px, 7vw, 74px); border-radius: 30px; align-items: center; gap: 40px; background: var(--paper); box-shadow: var(--shadow); }
.portal-hero h1 { margin-bottom: 20px; }
.portal-hero p:last-child { max-width: 700px; margin-bottom: 0; color: var(--ink-soft); }
.portal-monogram { display: grid; width: 150px; height: 210px; border: 1px solid rgba(161,140,110,.42); border-radius: 80px; color: var(--brass); font: 400 2.8rem/1 var(--serif); place-items: center; text-align: center; }
.portal-monogram i { margin: -30px 0; font-size: 1.3rem; }
.guest-names { display: flex; margin: 22px 0 36px; flex-wrap: wrap; gap: 9px; }
.guest-names span { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.7); font-size: .75rem; font-weight: 700; }
.portal-live { display: flex; margin-bottom: 22px; padding: 24px 26px; border: 1px solid rgba(95,112,100,.22); border-radius: 20px; align-items: flex-start; gap: 18px; background: var(--sage-pale); }
.portal-live__dot { margin-top: 9px; }
.portal-live small, .portal-live strong { display: block; }
.portal-live small { color: var(--sage-dark); font-size: .69rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.portal-live strong { margin: 3px 0; font: 400 1.65rem/1.2 var(--serif); }
.portal-live p { margin: 0; color: var(--ink-soft); }
.pass-summary { padding: clamp(28px, 5vw, 48px); border: 1px solid var(--line); border-radius: 24px; background: rgba(255,254,253,.86); }
.pass-summary h2 { margin-bottom: 24px; font-size: clamp(2rem, 5vw, 3.5rem); }
.pass-summary > p { color: var(--ink-soft); }
.progress-track { width: 100%; height: 13px; margin-bottom: 12px; border: 0; border-radius: 999px; overflow: hidden; background: #dfe5df; }
.progress-track::-webkit-progress-bar { background: #dfe5df; }
.progress-track::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, var(--sage), var(--blue)); }
.progress-track::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, var(--sage), var(--blue)); }
.portal-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; gap: 14px; }
.portal-action-grid a { display: grid; min-height: 180px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,254,253,.78); text-decoration: none; }
.portal-action-grid a:hover { border-color: rgba(95,112,100,.4); background: #fff; }
.portal-action-grid span { display: grid; width: 42px; height: 42px; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 50%; color: var(--sage-dark); place-items: center; }
.portal-action-grid strong { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; }
.portal-action-grid small { color: var(--ink-soft); }
.portal-text-button { display: block; min-height: 44px; margin: 34px auto 0; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: .72rem; text-decoration: underline; text-underline-offset: 4px; }

.pass-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: clamp(34px, 7vw, 70px); border-radius: 30px; align-items: center; gap: 45px; background: linear-gradient(125deg, var(--sage-pale), var(--paper)); box-shadow: var(--shadow); }
.pass-hero > div:first-child { max-width: 760px; }
.pass-hero p:last-child { margin: 0; color: var(--ink-soft); }
.pass-score { display: grid; width: 190px; min-height: 220px; padding: 28px; border: 1px solid rgba(161,140,110,.4); border-radius: 95px; place-content: center; text-align: center; }
.pass-score strong { font: 400 3.6rem/1 var(--serif); }
.pass-score small { color: var(--ink-soft); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pass-score p { margin: 14px 0 0; color: var(--sage-dark); font-size: .78rem; font-weight: 750; }
.code-form { margin: 28px 0; padding: 22px 25px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,254,253,.78); }
.code-form > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
.challenge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.challenge-card { position: relative; display: flex; min-height: 330px; padding: 28px; border: 1px solid var(--line); border-radius: 22px; flex-direction: column; background: var(--paper); }
.challenge-card.is-complete { border-color: rgba(95,112,100,.42); background: var(--sage-pale); }
.challenge-card__mark { display: grid; width: 50px; height: 50px; margin-bottom: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--sage-dark); font-size: 1.25rem; place-items: center; }
.challenge-card > small { color: var(--ink-soft); font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.challenge-card h2 { margin: 8px 0 15px; font-size: 2rem; }
.challenge-card p { color: var(--ink-soft); font-size: .88rem; }
.challenge-card footer { display: flex; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); align-items: center; justify-content: space-between; gap: 12px; }
.challenge-card footer strong, .challenge-card footer span, .challenge-card footer a { font-size: .72rem; font-weight: 800; }
.challenge-card footer a { color: var(--sage-dark); text-underline-offset: 4px; }

.quiz-page { min-height: 100vh; background: linear-gradient(145deg, var(--blue-pale), var(--paper) 60%, var(--sage-pale)); }
.quiz-shell { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: clamp(44px, 8vw, 90px) 0; }
.quiz-live-label { display: flex; margin-bottom: 34px; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.quiz-live-label span { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(66,108,74,.12); }
.quiz-waiting, .quiz-question { padding: clamp(30px, 7vw, 66px); border: 1px solid var(--line); border-radius: 28px; background: rgba(255,254,253,.92); box-shadow: var(--shadow); }
.quiz-waiting { min-height: 420px; display: grid; align-content: center; text-align: center; }
.quiz-waiting h1, .quiz-question h1 { margin-bottom: 30px; font-size: clamp(2.6rem, 8vw, 5.3rem); }
.quiz-waiting p:last-child { color: var(--ink-soft); }
.quiz-waiting-names { display: grid; margin-top: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,254,253,.86); gap: 11px; }
.quiz-waiting-names > .eyebrow { margin: 0; text-align: center; }
.quiz-waiting-names__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.quiz-waiting-name { display: inline-flex; padding: 6px 10px 6px 6px; border: 1px solid rgba(104,133,150,.22); border-radius: 999px; align-items: center; gap: 7px; background: rgba(255,255,255,.74); animation: quiz-name-pop .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--name-index) * 55ms); }
.quiz-waiting-name strong { font-size: .75rem; }
.quiz-waiting-name__avatar, .quiz-scoreboard__avatar { display: grid; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--blue-pale); color: var(--ink-soft); font-size: .63rem; font-weight: 800; place-items: center; }
.quiz-waiting-name__avatar img, .quiz-scoreboard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.quiz-timer { margin: -6px 0 28px; }
.quiz-timer__meta { display: flex; margin-bottom: 8px; align-items: baseline; justify-content: space-between; gap: 16px; color: var(--ink-soft); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.quiz-timer__meta strong { color: var(--ink); font-variant-numeric: tabular-nums; font-size: 1.05rem; letter-spacing: .04em; }
.quiz-timer__track { height: 8px; border-radius: 999px; background: var(--blue-pale); overflow: hidden; }
.quiz-timer__track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue); transition: width .25s linear, background-color .2s ease; }
.quiz-timer.is-expired .quiz-timer__meta strong { color: var(--danger); }
.quiz-timer.is-expired .quiz-timer__track span, .quiz-timer--complete .quiz-timer__track span { background: var(--sage-dark); }
.quiz-options { display: grid; gap: 12px; }
.quiz-options button { display: grid; grid-template-columns: auto minmax(0,1fr) auto; min-height: 66px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 15px; align-items: center; gap: 14px; background: #fff; cursor: pointer; text-align: left; }
.quiz-options button:not(:disabled):hover { border-color: var(--blue); }
.quiz-options button.is-selected { border-color: #7899b7; background: var(--blue-pale); box-shadow: inset 0 0 0 1px #7899b7; }
.quiz-options button.is-correct { border-color: var(--success); background: #eaf3eb; }
.quiz-options button > span { display: grid; width: 38px; height: 38px; border-radius: 50%; background: var(--blue-pale); font-weight: 800; place-items: center; }
.quiz-options button strong { font-size: .95rem; }
.quiz-options button small { color: var(--ink-soft); }
.quiz-explanation { margin: 26px 0 0; padding: 18px; border-radius: 14px; background: var(--sage-pale); }
.quiz-profile, .quiz-finale { padding: clamp(30px, 7vw, 66px); border: 1px solid var(--line); border-radius: 28px; background: rgba(255,254,253,.94); box-shadow: var(--shadow); }
.quiz-profile h1, .quiz-finale h1 { margin-bottom: 18px; font-size: clamp(2.6rem, 8vw, 5.3rem); }
.quiz-profile__intro, .quiz-profile__hint, .quiz-finale__intro { color: var(--ink-soft); }
.quiz-profile__intro { max-width: 570px; margin-bottom: 30px; }
.quiz-profile__avatar-section { margin-bottom: 24px; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: rgba(247,250,251,.72); }
.quiz-profile__avatar-title { margin: 0 0 11px; color: var(--ink); font-size: .74rem; font-weight: 800; }
.quiz-profile__avatars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(145px, 1.2fr); gap: 10px; }
.quiz-avatar-option, .quiz-profile__photo-button { display: grid; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 13px; align-content: start; justify-items: center; gap: 7px; background: #fff; color: var(--ink); cursor: pointer; text-align: center; }
.quiz-avatar-option:hover, .quiz-profile__photo-button:hover { border-color: #7899b7; }
.quiz-avatar-option.is-selected, .quiz-profile__photo-button.is-selected { border-color: #7899b7; box-shadow: inset 0 0 0 2px #7899b7; background: var(--blue-pale); }
.quiz-avatar-option__image { display: grid; width: 100%; aspect-ratio: 1; border-radius: 9px; overflow: hidden; background: var(--blue-pale); place-items: center; }
.quiz-avatar-option__image img { width: 100%; height: 100%; object-fit: cover; }
.quiz-avatar-option strong, .quiz-profile__photo-button > span:last-child { font-size: .72rem; }
.quiz-profile__photo-button { min-height: 100%; align-content: center; background: linear-gradient(145deg, #f6f3eb, #edf3f4); }
.quiz-profile__photo-icon { display: grid; width: 38px; height: 38px; border: 1px solid rgba(161,140,110,.45); border-radius: 50%; color: #816b4f; font-size: 1.3rem; place-items: center; }
.quiz-profile__photo-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.quiz-profile__photo-preview:not([hidden]) { display: flex; margin-top: 12px; align-items: center; gap: 9px; color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.quiz-profile__photo-preview img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.quiz-profile__form { display: grid; gap: 16px; }
.quiz-profile__label { display: grid; color: var(--ink); font-size: .74rem; font-weight: 800; gap: 8px; }
.quiz-profile__label input { width: 100%; min-height: 54px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 13px; outline: none; background: #fff; }
.quiz-profile__label input:focus { border-color: #7899b7; box-shadow: 0 0 0 3px rgba(120,153,183,.16); }
.quiz-profile__hint { margin: 20px 0 0; font-size: .75rem; }
.portal-button--full { width: 100%; }
.quiz-round-actions { display: flex; margin: -10px 0 20px; }
.quiz-joker { min-height: 42px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--sage-pale); color: var(--sage-dark); cursor: pointer; font-size: .72rem; font-weight: 800; }
.quiz-joker.is-available { border-color: rgba(161,140,110,.48); background: #f5f0e7; color: #816b4f; }
.quiz-joker:disabled { cursor: default; opacity: .62; }
.quiz-bonus-badge { display: inline-flex; width: fit-content; margin: -14px 0 24px; padding: 6px 11px; border: 1px solid rgba(161,140,110,.35); border-radius: 999px; background: #f5f0e7; color: #816b4f; font-size: .67rem; font-weight: 800; letter-spacing: .04em; }
.quiz-scoreboard { display: grid; margin-top: 20px; padding: 22px; border: 1px solid rgba(104,133,150,.24); border-radius: 21px; background: rgba(255,255,255,.72); gap: 16px; }
.quiz-scoreboard--compact { margin: 20px 0 0; }
.quiz-scoreboard__self { display: flex; padding: 18px; border-radius: 15px; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(135deg, var(--blue-pale), var(--sage-pale)); }
.quiz-scoreboard__self h2 { margin: 2px 0 8px; font-size: clamp(2rem, 6vw, 3.2rem); }
.quiz-scoreboard__self .eyebrow { margin-bottom: 4px; }
.quiz-scoreboard__self-meta { margin: 0; color: var(--ink-soft); font-size: .75rem; }
.quiz-scoreboard__joker { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.72); color: var(--ink-soft); font-size: .65rem; font-weight: 800; }
.quiz-scoreboard__joker.is-available { color: #816b4f; }
.quiz-scoreboard__last { margin: 10px 0 0; color: var(--danger); font-size: .76rem; font-weight: 750; }
.quiz-scoreboard__last.is-correct { color: var(--success); }
.quiz-scoreboard__title { margin: 4px 0 0; font-family: var(--serif); font-size: 1.6rem; font-weight: 400; }
.quiz-scoreboard__list { display: grid; gap: 8px; }
.quiz-scoreboard__row { display: grid; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; grid-template-columns: 35px 36px minmax(0,1fr) auto; align-items: center; gap: 10px; background: rgba(255,255,255,.66); }
.quiz-scoreboard__row--top { border-color: rgba(161,140,110,.28); }
.quiz-scoreboard__rank { display: grid; width: 30px; height: 30px; border-radius: 50%; background: var(--blue-pale); color: var(--ink-soft); font-size: .75rem; font-weight: 800; place-items: center; }
.quiz-scoreboard__row--top .quiz-scoreboard__rank { background: #f5f0e7; color: #816b4f; }
.quiz-scoreboard__details strong, .quiz-scoreboard__details small, .quiz-scoreboard__score strong, .quiz-scoreboard__score small { display: block; }
.quiz-scoreboard__details strong { font-size: .82rem; }
.quiz-scoreboard__details small, .quiz-scoreboard__score small { margin-top: 2px; color: var(--ink-soft); font-size: .65rem; }
.quiz-scoreboard__score { text-align: right; }
.quiz-scoreboard__points { font-size: .78rem; }
.quiz-scoreboard__final { margin-top: 28px; }
.quiz-round-winner { display: grid; margin-top: 24px; padding: 19px 21px; border: 1px solid rgba(161,140,110,.36); border-radius: 16px; background: linear-gradient(135deg, #fffaf0, #f5f0e7); gap: 5px; }
.quiz-round-winner .eyebrow { margin: 0; color: #816b4f; }
.quiz-round-winner__name { font-family: var(--serif); font-size: clamp(1.35rem, 4vw, 2rem); font-weight: 400; }
.quiz-round-winner__points { color: #816b4f; font-size: .75rem; font-weight: 800; }

.display-page { min-height: 100vh; overflow: hidden; background: #23313a; color: #fff; }
.display-header { position: relative; z-index: 4; display: flex; min-height: 86px; padding: 18px clamp(28px, 5vw, 78px); border-bottom: 1px solid rgba(255,255,255,.12); align-items: center; justify-content: space-between; }
.display-page .portal-brand small { color: rgba(255,255,255,.56); }
.display-header__actions { display: flex; align-items: center; gap: 18px; }
.display-header__actions > span { display: flex; align-items: center; gap: 9px; font-size: .72rem; font-weight: 750; }
.display-header__actions i { width: 8px; height: 8px; border-radius: 50%; background: #91c49a; box-shadow: 0 0 0 5px rgba(145,196,154,.12); }
.display-header button, .slideshow__controls button { min-height: 42px; padding: 9px 15px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.display-shell { display: grid; grid-template-columns: minmax(0,1fr) 280px; min-height: calc(100vh - 86px); padding: clamp(35px, 5vw, 78px); align-items: center; gap: clamp(40px, 7vw, 100px); }
.display-quiz .eyebrow { color: #c7d7e4; }
.display-quiz > h1 { max-width: 1200px; margin-bottom: 34px; font-size: clamp(3.2rem, 6.2vw, 7.5rem); }
.display-quiz > p.display-quiz__waiting-copy { color: rgba(255,255,255,.65); font-size: clamp(1rem, 1.7vw, 1.4rem); }
.display-quiz-timer { max-width: 960px; margin: -12px 0 30px; }
.display-quiz-timer__meta { display: flex; margin-bottom: 9px; align-items: baseline; justify-content: space-between; gap: 18px; color: rgba(255,255,255,.64); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.display-quiz-timer__meta strong { color: #fff; font-size: clamp(1.15rem, 2vw, 1.7rem); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.display-quiz-timer__track { height: 10px; border-radius: 999px; background: rgba(255,255,255,.13); overflow: hidden; }
.display-quiz-timer__track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue); box-shadow: 0 0 18px rgba(174,196,218,.35); transition: width .25s linear, background-color .2s ease; }
.display-quiz-timer.is-expired .display-quiz-timer__meta strong { color: #f2b2aa; }
.display-quiz-timer.is-expired .display-quiz-timer__track span, .display-quiz-timer--complete .display-quiz-timer__track span { background: #91c49a; box-shadow: none; }
.display-answers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.display-answers article { padding: 16px 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 17px; background: rgba(255,255,255,.05); }
.display-answers article.is-correct { border-color: rgba(145,196,154,.75); background: rgba(145,196,154,.14); }
.display-answers article > div { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 13px; }
.display-answers article span { display: grid; width: 37px; height: 37px; border-radius: 50%; background: rgba(174,196,218,.2); place-items: center; }
.display-answers article b { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; }
.display-answers progress { width: 100%; height: 7px; margin-top: 13px; border: 0; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.1); }
.display-answers progress::-webkit-progress-bar { background: rgba(255,255,255,.1); }
.display-answers progress::-webkit-progress-value { background: var(--blue); }
.display-answers progress::-moz-progress-bar { background: var(--blue); }
.display-explanation { margin: 26px 0 0; padding-left: 18px; border-left: 3px solid var(--sage); color: rgba(255,255,255,.76); }
.display-round-winner { display: grid; max-width: 960px; margin-top: 24px; padding: 17px 20px; border: 1px solid rgba(238,210,151,.48); border-radius: 16px; background: rgba(220,192,144,.12); gap: 4px; }
.display-round-winner .eyebrow { margin: 0; color: rgba(241,216,170,.86); }
.display-round-winner__name { font-family: var(--serif); font-size: clamp(1.35rem, 2.5vw, 2.15rem); font-weight: 400; }
.display-round-winner__points { color: #f1d8aa; font-size: .76rem; font-weight: 800; }
.display-bonus-badge { display: inline-flex; width: fit-content; margin: -15px 0 25px; padding: 7px 12px; border: 1px solid rgba(213,190,151,.54); border-radius: 999px; background: rgba(220,192,144,.16); color: #f1d8aa; font-size: .7rem; font-weight: 800; letter-spacing: .04em; }
.display-quiz__final-copy { margin: -12px 0 28px; color: rgba(255,255,255,.68); font-size: clamp(1rem, 1.7vw, 1.4rem); }
.display-waiting-names { display: grid; max-width: 960px; margin-top: 28px; gap: 13px; }
.display-waiting-names > .eyebrow { margin: 0; color: rgba(255,255,255,.58); }
.display-waiting-names__list { display: flex; max-height: 190px; flex-wrap: wrap; overflow: hidden; gap: 9px; }
.display-waiting-name { display: inline-flex; padding: 7px 13px 7px 7px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; align-items: center; gap: 9px; background: rgba(255,255,255,.07); animation: quiz-name-pop .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--name-index) * 55ms); }
.display-waiting-name strong { font-size: clamp(.78rem, 1.2vw, 1rem); }
.display-waiting-name__avatar, .display-scoreboard__avatar, .display-podium__avatar { display: grid; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: rgba(174,196,218,.2); color: rgba(255,255,255,.72); font-size: .64rem; font-weight: 800; place-items: center; }
.display-waiting-name__avatar img, .display-scoreboard__avatar img, .display-podium__avatar img { width: 100%; height: 100%; object-fit: cover; }
.display-scoreboard { max-width: 960px; margin-top: 30px; }
.display-scoreboard > .eyebrow { margin-bottom: 13px; }
.display-scoreboard__list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.display-scoreboard__row { display: grid; padding: 12px 15px; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; grid-template-columns: 42px 38px minmax(0,1fr) auto; align-items: center; gap: 10px; background: rgba(255,255,255,.06); }
.display-scoreboard__row--top { border-color: rgba(213,190,151,.4); background: rgba(220,192,144,.1); }
.display-scoreboard__rank { font-size: 1.1rem; }
.display-scoreboard__details strong, .display-scoreboard__details small, .display-scoreboard__score strong, .display-scoreboard__score small { display: block; }
.display-scoreboard__details strong { font-size: clamp(.78rem, 1.2vw, 1rem); }
.display-scoreboard__details small, .display-scoreboard__score small { margin-top: 2px; color: rgba(255,255,255,.56); font-size: .64rem; }
.display-scoreboard__score { text-align: right; }
.display-scoreboard__score strong { color: #fff; font-size: .78rem; }
.display-podium { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: end; gap: 14px; }
.display-podium__item { display: grid; min-height: 145px; padding: 20px 15px; border: 1px solid rgba(255,255,255,.15); border-radius: 16px 16px 7px 7px; align-content: center; justify-items: center; gap: 5px; background: rgba(255,255,255,.07); text-align: center; animation: podium-pop .55s ease both; }
.display-podium__item--1 { min-height: 190px; order: 2; border-color: rgba(238,210,151,.66); background: rgba(220,192,144,.16); }
.display-podium__item--2 { order: 1; animation-delay: .08s; }
.display-podium__item--3 { order: 3; animation-delay: .16s; }
.display-podium__medal { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.display-podium__avatar { width: 52px; height: 52px; margin: 2px 0 5px; }
.display-podium__item strong { font-family: var(--serif); font-size: clamp(1rem, 1.8vw, 1.45rem); font-weight: 400; }
.display-podium__item b { font-size: .8rem; }
.display-podium__item small { color: rgba(255,255,255,.58); font-size: .62rem; }
@keyframes podium-pop { from { opacity: 0; transform: translateY(15px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes quiz-name-pop { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
.display-join { padding: 22px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.06); }
.display-join img { display: block; width: 100%; border-radius: 13px; background: #fff; }
.display-join strong, .display-join span { display: block; }
.display-join strong { margin-top: 18px; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.display-join span { margin-top: 5px; color: rgba(255,255,255,.56); font-size: .7rem; overflow-wrap: anywhere; }

@media (min-width: 701px) and (max-height: 800px) {
  .display-header { min-height: 64px; padding-block: 10px; }
  .display-shell { min-height: calc(100vh - 69px); padding-block: 22px; gap: clamp(30px, 5vw, 70px); }
  .display-quiz > h1 { margin-bottom: 22px; font-size: clamp(2.7rem, 5vw, 4rem); }
  .display-quiz-timer { margin-bottom: 22px; }
  .display-answers { gap: 10px; }
  .display-answers article { padding: 11px 14px; }
  .display-answers article span { width: 32px; height: 32px; }
  .display-answers article b { font-size: 1.35rem; }
  .display-answers progress { margin-top: 8px; }
  .display-explanation { margin-top: 15px; font-size: .9rem; }
  .display-join { padding: 16px; }
  .display-join strong { margin-top: 12px; font-size: 1.2rem; }
}

.slideshow { position: relative; width: 100vw; height: 100vh; background: radial-gradient(circle at 50% 20%, #354955, #182229 70%); }
.slideshow__stage, .slideshow__empty { position: absolute; inset: 0; }
.slideshow__stage { display: grid; padding: 2.5vh 2.5vw; place-items: center; }
.slideshow__empty { display: grid; padding: 8vw; align-content: center; justify-items: center; text-align: center; }
.slideshow__empty h1 { max-width: 1050px; font-size: clamp(4rem, 9vw, 9rem); }
.slideshow__empty p:last-child { color: rgba(255,255,255,.62); }
.slideshow__slide { position: relative; display: grid; width: 100%; height: 100%; margin: 0; place-items: center; animation: slide-arrive .8s ease both; }
.slideshow__slide img, .slideshow__slide video { display: block; max-width: 100%; max-height: 95vh; object-fit: contain; box-shadow: 0 35px 90px rgba(0,0,0,.36); }
.slideshow__slide img.is-rotated-90, .slideshow__slide img.is-rotated-270 { max-width: 88vh; max-height: 88vw; transform: rotate(90deg); }
.slideshow__slide img.is-rotated-180 { transform: rotate(180deg); }
.slideshow__slide img.is-rotated-270 { transform: rotate(270deg); }
.slideshow__slide figcaption { position: absolute; top: 26px; left: 26px; padding: 10px 15px; border-radius: 999px; background: rgba(30,41,47,.72); font-size: .72rem; font-weight: 800; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.slideshow__brand { position: absolute; z-index: 3; bottom: 28px; left: 35px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.slideshow__brand span, .slideshow__brand small { display: block; }
.slideshow__brand span { font: 400 1.8rem var(--serif); letter-spacing: .12em; }
.slideshow__brand small { color: rgba(255,255,255,.66); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.slideshow__controls { position: absolute; z-index: 4; right: 28px; bottom: 28px; display: flex; gap: 8px; opacity: .15; transition: opacity .2s ease; }
.slideshow:hover .slideshow__controls, .slideshow__controls:focus-within { opacity: 1; }
@keyframes slide-arrive { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }

.secret-page { background: radial-gradient(circle at 50% 0, #fff, var(--blue-pale) 45%, var(--sage-pale)); }
.secret-hero, .secret-quiz, .secret-finale { margin-bottom: 24px; padding: clamp(32px, 7vw, 72px); border: 1px solid var(--line); border-radius: 30px; background: rgba(255,254,253,.9); box-shadow: var(--shadow); }
.secret-hero { text-align: center; }
.secret-hero h1 { max-width: 850px; margin-inline: auto; }
.secret-hero > p:last-child { max-width: 710px; margin: 0 auto; color: var(--ink-soft); }
.secret-heart { display: grid; width: 90px; height: 90px; margin: 0 auto 28px; border: 1px solid rgba(161,140,110,.42); border-radius: 50%; color: #aa6c68; font-size: 1.8rem; place-items: center; }
.secret-quiz > p:not(.eyebrow) { color: var(--ink-soft); }
.secret-quiz form { display: grid; gap: 20px; }
.secret-quiz fieldset { display: grid; padding: 22px; border: 1px solid var(--line); border-radius: 18px; gap: 8px; }
.secret-quiz legend { padding: 0 8px; font-family: var(--serif); font-size: 1.3rem; }
.secret-quiz label { display: flex; min-height: 44px; padding: 8px 12px; border-radius: 10px; align-items: center; gap: 10px; cursor: pointer; }
.secret-quiz label:hover { background: var(--blue-pale); }
.secret-result { min-height: 50px; padding: 15px; border-radius: 14px; background: var(--sage-pale); }
.secret-finale { text-align: center; }
.secret-finale .portal-button { margin-top: 18px; }
.secret-celebrate .secret-heart { animation: secret-heartbeat .7s ease 3; }
@keyframes secret-heartbeat { 50% { transform: scale(1.16); background: #fff5f3; } }

.portal-dialog { width: min(620px, calc(100% - 30px)); max-height: calc(100dvh - 30px); padding: clamp(30px, 7vw, 60px); border: 1px solid var(--line); border-radius: 28px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 100px rgba(35,44,48,.3); }
.portal-dialog::backdrop { background: rgba(30,39,44,.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.portal-dialog > button { position: absolute; top: 13px; right: 13px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--blue-pale); cursor: pointer; font-size: 1.4rem; }
.portal-dialog h2 { font-size: clamp(2.3rem, 7vw, 4rem); }

@media (max-width: 900px) {
  .portal-action-grid, .challenge-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .display-shell { grid-template-columns: minmax(0,1fr) 210px; gap: 35px; }
  .display-answers { grid-template-columns: 1fr; }
  .display-scoreboard__list { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .portal-header { align-items: flex-start; }
  .portal-brand small { display: none; }
  .portal-header nav { justify-content: flex-end; flex-wrap: wrap; gap: 7px 14px; }
  .portal-header nav a, .portal-header nav button { min-height: 40px; padding-block: 8px; }
  .portal-hero, .pass-hero { grid-template-columns: 1fr; }
  .portal-monogram { display: none; }
  .pass-score { width: 100%; min-height: 150px; border-radius: 24px; }
  .code-form > div { grid-template-columns: 1fr; }
  .portal-action-grid, .challenge-grid { grid-template-columns: 1fr; }
  .portal-action-grid a { min-height: 155px; }
  .quiz-options button { grid-template-columns: auto minmax(0,1fr); }
  .quiz-options button small { grid-column: 2; }
  .quiz-profile__avatars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quiz-profile__photo-button { min-height: 145px; }
  .quiz-scoreboard__self { align-items: flex-start; flex-direction: column; }
  .quiz-scoreboard__score { text-align: left; }
  .display-header { min-height: 70px; }
  .display-shell { grid-template-columns: 1fr; min-height: calc(100vh - 70px); overflow: auto; }
  .display-join { display: none; }
  .display-scoreboard__row { grid-template-columns: 35px 34px minmax(0,1fr); }
  .display-scoreboard__score { grid-column: 3; text-align: left; }
  .slideshow__controls { opacity: .65; }
}

@media (max-width: 430px) {
  body { font-size: 16px; }
  .portal-shell, .portal-shell--wide { width: min(100% - 22px, 1180px); padding-block: 34px 60px; }
  .portal-login, .portal-hero, .pass-hero, .secret-hero, .secret-quiz, .secret-finale { border-radius: 22px; }
  .portal-header { padding-inline: 13px; }
  .portal-header nav a, .portal-header nav button { font-size: .66rem; }
  .display-header__actions > span { display: none; }
  .quiz-scoreboard__row { grid-template-columns: 33px 32px minmax(0,1fr); }
  .quiz-scoreboard__score { grid-column: 3; text-align: left; }
  .quiz-waiting-names { padding-inline: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (min-width: 701px) {
  .has-quiz-results .display-shell { grid-template-columns: minmax(0,1fr) 320px; padding-block: 22px; gap: clamp(24px, 5vw, 70px); }
  .has-quiz-results .display-quiz > h1 { margin-bottom: 20px; font-size: clamp(2.2rem, 3.6vw, 4.5rem); line-height: 1.1; }
  .has-quiz-results .display-quiz-timer { margin: 0 0 18px; }
  .has-quiz-results .display-answers article { padding: 11px 14px; }
  .has-quiz-results .display-explanation { margin-top: 16px; font-size: .85rem; }
  .has-quiz-results .display-round-winner { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 17px; margin-top: 16px; align-items: center; }
  .has-quiz-results .display-round-winner .eyebrow { grid-column: 1 / -1; }
  .has-quiz-results .display-round-winner__name { font-size: clamp(1.3rem, 2vw, 1.9rem); }
  .has-quiz-results .display-scoreboard { margin-top: 18px; }
  .has-quiz-results .display-scoreboard__row { padding: 8px 12px; }
  .has-quiz-results .display-join { display: grid; grid-template-columns: 130px minmax(0,1fr); align-items: center; gap: 14px; padding: 14px; }
  .has-quiz-results .display-join strong { margin-top: 0; font-size: 1rem; }
  .has-quiz-results .display-sidebar .display-scoreboard__list { grid-template-columns: 1fr; }
  .has-quiz-results .display-sidebar .display-scoreboard__row { grid-template-columns: 26px 32px minmax(0,1fr) auto; gap: 7px; }
  .has-quiz-results .display-scoreboard__avatar { width: 32px; height: 32px; }
  .has-quiz-results .display-scoreboard__details strong { font-size: .8rem; overflow-wrap: anywhere; }
  .has-quiz-results .display-scoreboard__score strong { font-size: .7rem; }
}

@media (min-width: 701px) and (max-width: 1050px) {
  .has-quiz-results .display-shell { grid-template-columns: minmax(0,1fr) 270px; padding-inline: 24px; }
  .has-quiz-results .display-join { grid-template-columns: 100px minmax(0,1fr); }
}