/*
 * Party Mode.
 *
 * Only the screens between the quizzes are in here. The quizzes themselves are
 * drawn by runtime.css and nothing below touches them, apart from the two
 * classes the host's reveal adds to a poll's answers.
 *
 * The grammar, on every screen: the ground is one character's own colour, the
 * character is on it in ink and scaled past the frame so the frame crops it,
 * its face is cut back out in the ground colour, and type sits under it on
 * clean ground. Every screen arrives on the same diagonal wipe.
 */

.niblo-party-page {
    background: #16151c;
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

html:has(> .niblo-party-page) { height: 100%; overflow: hidden; }

/*
 * The in-page copy of the opening quiz.
 *
 * The runtime is constructed from an element in the document and renders into
 * it before it takes the screen. On a party nobody ever sees it, but it has to
 * be laid out rather than hidden: buildOverlay reads its computed font to carry
 * the site's own face into the takeover, and display:none measures nothing.
 */
.niblo-party-host {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 430px;
}

/* ---------------------------------------------------------------- the layer */

.niblo-party,
.niblo-party *,
.niblo-party *::before,
.niblo-party *::after { box-sizing: border-box; }

.niblo-party {
    --u: min(100vw, 430px);
    --niblo-party-bg: #FB94A8;
    --niblo-party-ink: #2B2A33;
    --niblo-party-paper: #FFFDFA;

    align-items: center;
    display: none;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 100001;

    /*
     * The face the site set for Niblo's headings, falling back to a sans stack
     * rather than to the body. These screens are a display surface, and a theme
     * whose body is a serif turned the countdown into a book.
     */
    font-family: var(--niblo-heading-family, var(--niblo-party-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
    line-height: 1.5;
}

/*
 * The ground is the layer's, not the column's.
 *
 * Painted on the column alone it covered 430 pixels of a 1900 pixel browser
 * and the quiz showed all the way round it, which is not a screen between two
 * quizzes, it is a card on top of one. The colour and the wipe belong to the
 * whole viewport; only the type is held to a column.
 */
.niblo-party.is-on {
    background: var(--niblo-party-bg);
    display: flex;
    overflow: hidden;
}

.niblo-party.is-wiped {
    animation: niblo-party-wipe .44s cubic-bezier(.4, 0, .2, 1) both;
}

.niblo-party-screen {
    color: var(--niblo-party-ink);
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    height: 100dvh;
    max-width: 430px;
    /*
     * Visible, so the character is cropped by the viewport rather than by the
     * column's own invisible edge - which on a wide screen read as a straight
     * cut through the middle of it.
     */
    overflow: visible;
    padding: calc(var(--u) * .05) calc(var(--u) * .055) calc(var(--u) * .06);
    position: relative;
    width: 100%;
}

@keyframes niblo-party-wipe {
    from { clip-path: polygon(-60% 0, -12% 0, -46% 100%, -94% 100%); }
    to { clip-path: polygon(-60% 0, 148% 0, 114% 100%, -94% 100%); }
}

/*
 * The character: cropped by the frame, never contained by a box.
 *
 * The box below is only where it is allowed to sit - the screen above the type.
 * The drawing is wider than that box on purpose, so the screen's own edges cut
 * it, which is the whole look.
 */
.niblo-party-art {
    display: grid;
    inset: 0 0 34% 0;
    place-items: center;
    pointer-events: none;
    position: absolute;
}

.niblo-party-obj {
    animation: niblo-party-sway 3.4s cubic-bezier(.45, 0, .55, 1) infinite;
    width: 122%;
}

@keyframes niblo-party-sway {
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50% { transform: translateY(-12px) rotate(1.5deg); }
}

/* ------------------------------------------------------------------- pieces */

.niblo-party-head {
    align-items: center;
    display: flex;
    gap: .6rem;
    justify-content: space-between;
    position: relative;
}

/*
 * The name sits on paper.
 *
 * It is at the top of the screen, which is where the character is, so an ink
 * mark would disappear into its body and a coloured one into the ground
 * whenever the character did not reach that corner.
 */
.niblo-party-word {
    background: var(--niblo-party-paper);
    border-radius: 999px;
    color: var(--niblo-party-ink);
    font-size: calc(var(--u) * .048);
    font-weight: 800;
    letter-spacing: -.03em;
    padding: calc(var(--u) * .013) calc(var(--u) * .034);
}

.niblo-party-mid {
    align-content: end;
    display: grid;
    justify-items: start;
    position: relative;
}

.niblo-party-num {
    font-size: calc(var(--u) * .4);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -.08em;
    line-height: .82;
    position: relative;
}

.niblo-party-num.is-beat { animation: niblo-party-beat .42s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes niblo-party-beat {
    from { transform: scale(.82) translateY(.06em); }
    to { transform: none; }
}

.niblo-party-foot { position: relative; }

.niblo-party-bar {
    background: rgba(43, 42, 51, .22);
    border-radius: 99px;
    height: calc(var(--u) * .021);
    margin-bottom: calc(var(--u) * .04);
    overflow: hidden;
    width: 100%;
}

.niblo-party-bar i {
    background: var(--niblo-party-ink);
    border-radius: 99px;
    display: block;
    height: 100%;
    transition: width .3s linear;
}

.niblo-party-kicker {
    font-size: calc(var(--u) * .034);
    font-weight: 800;
    letter-spacing: .16em;
    margin: 0;
    opacity: .72;
    text-transform: uppercase;
}

.niblo-party-title {
    font-size: calc(var(--u) * .085);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.02;
    margin: calc(var(--u) * .018) 0 calc(var(--u) * .022);
    text-wrap: balance;
}

.niblo-party-meta {
    font-size: calc(var(--u) * .04);
    margin: 0;
    opacity: .78;
}

.niblo-party-go {
    background: var(--niblo-party-ink);
    border: 0;
    border-radius: 999px;
    color: var(--niblo-party-paper);
    cursor: pointer;
    font: inherit;
    font-size: calc(var(--u) * .04);
    font-weight: 800;
    letter-spacing: .04em;
    margin-top: calc(var(--u) * .05);
    padding: calc(var(--u) * .035) calc(var(--u) * .08);
    text-transform: uppercase;
}

.niblo-party-go::after {
    content: " ▸";
}

/* ----------------------------------------------------------- the interstitial */

.niblo-party-screen.is-inter { grid-template-rows: 1fr auto; }

.niblo-party-msg {
    font-size: calc(var(--u) * .095);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.02;
    margin: 0 0 calc(var(--u) * .04);
    position: relative;
    text-wrap: balance;
}

/* A word is one unbreakable unit, or a line breaks between two letters. */
.niblo-party-msg i {
    display: inline-block;
    font-style: normal;
    white-space: nowrap;
}

.niblo-party-msg span {
    animation: niblo-party-pop .44s cubic-bezier(.34, 1.56, .64, 1) both;
    animation-delay: calc(var(--i) * 26ms);
    display: inline-block;
}

@keyframes niblo-party-pop {
    from { opacity: 0; transform: translateY(.26em) scale(.7); }
    to { opacity: 1; transform: none; }
}

.niblo-party-next {
    font-size: calc(var(--u) * .038);
    margin: 0;
    opacity: .72;
    position: relative;
}

.niblo-party-next b {
    display: block;
    font-size: calc(var(--u) * .048);
    font-weight: 800;
    letter-spacing: -.02em;
    margin-top: .1em;
    opacity: 1;
}

.niblo-party-dots {
    display: flex;
    gap: calc(var(--u) * .014);
    margin-top: calc(var(--u) * .04);
    position: relative;
}

.niblo-party-dots i {
    animation: niblo-party-pulse 1.2s infinite;
    background: var(--niblo-party-ink);
    border-radius: 99px;
    height: calc(var(--u) * .02);
    opacity: .25;
    width: calc(var(--u) * .02);
}

.niblo-party-dots i:nth-child(2) { animation-delay: .18s; }
.niblo-party-dots i:nth-child(3) { animation-delay: .36s; }

@keyframes niblo-party-pulse {
    50% { opacity: 1; transform: scale(1.35); }
}

/* --------------------------------------------------------------- the break */

.niblo-party-screen.is-ad {
    color: #fff;
    grid-template-rows: auto 1fr auto;
    padding: calc(var(--u) * .05);
}

.niblo-party-adhead {
    font-size: calc(var(--u) * .03);
    font-weight: 800;
    letter-spacing: .14em;
    opacity: .6;
    text-transform: uppercase;
}

.niblo-party-video {
    background: #000;
    border-radius: calc(var(--u) * .045);
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.niblo-party-skip {
    background: rgba(255, 255, 255, .92);
    border: 0;
    border-radius: 999px;
    color: #14131a;
    cursor: pointer;
    font: inherit;
    font-size: calc(var(--u) * .036);
    font-weight: 800;
    justify-self: end;
    margin-top: calc(var(--u) * .035);
    padding: calc(var(--u) * .028) calc(var(--u) * .06);
}

/* ---------------------------------------------------------------- the close */

.niblo-party-screen.is-outro,
.niblo-party-screen.is-empty {
    color: var(--niblo-party-paper);
}

.niblo-party-screen.is-outro .niblo-party-go,
.niblo-party-screen.is-empty .niblo-party-go {
    background: var(--niblo-party-paper);
    color: var(--niblo-party-ink);
}

.niblo-party-screen.is-outro .niblo-party-bar { background: rgba(255, 255, 255, .22); }

/* ------------------------------------------------- a poll, revealed by hand */

.niblo-imm .niblo-qanswer.niblo-party-split {
    overflow: hidden;
    position: relative;
}

.niblo-party-share {
    background: var(--niblo-accent, currentColor);
    bottom: 0;
    left: 0;
    opacity: .34;
    position: absolute;
    top: 0;
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
    width: 0;
    z-index: 0;
}

.niblo-imm .niblo-party-split > *:not(.niblo-party-share) { position: relative; z-index: 1; }

.niblo-party-pct {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    margin-left: auto;
    padding-left: .6em;
}

/*
 * A picture answer is a tile, not a row.
 *
 * The same bar drawn across it reads as a crop rather than a share, and a
 * figure pushed to the end of the flex line lands in the middle of the
 * photograph. So on a grid the share runs along the foot of the tile and the
 * figure is a chip in the corner.
 */
.niblo-imm .niblo-qanswers.is-grid .niblo-party-split .niblo-party-share,
.niblo-imm .niblo-qanswers.is-wide .niblo-party-split .niblo-party-share {
    bottom: 0;
    height: 7px;
    opacity: .95;
    top: auto;
}

.niblo-imm .niblo-qanswers.is-grid .niblo-party-split .niblo-party-pct,
.niblo-imm .niblo-qanswers.is-wide .niblo-party-split .niblo-party-pct {
    background: rgba(0, 0, 0, .62);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    margin: 0;
    padding: 3px 9px;
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 2;
}

/*
 * The way on, at the end of a run.
 *
 * A result slide is the end of a quiz and the end of nothing else. Until this
 * was on it the screen read as finished, and on a phone - which has no space
 * bar - it was finished.
 */
.niblo-imm .niblo-party-onward {
    animation: niblo-party-rise .4s cubic-bezier(.34, 1.56, .64, 1) both;
    background: #FFFDFA;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
    color: #2B2A33;
    cursor: pointer;
    display: block;
    font: inherit;
    margin: 14px auto 0;
    max-width: 100%;
    padding: 9px 22px;
    text-align: center;
}

.niblo-party-onward-kicker {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    opacity: .58;
    text-transform: uppercase;
}

.niblo-party-onward-name {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* On the name, not on the button: a block child of its own put it on a
   third line under the title. */
.niblo-party-onward-name::after {
    content: " →";
}

@keyframes niblo-party-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* A host who has paused wants the screen to say so, quietly. */
.niblo-party-paused .niblo-imm-shell::after {
    background: rgba(0, 0, 0, .35);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 40;
}

@media (prefers-reduced-motion: reduce) {
    .niblo-party.is-wiped,
    .niblo-party-obj,
    .niblo-party-art,
    .niblo-party-msg span,
    .niblo-party-num.is-beat,
    .niblo-party-dots i,
    .niblo-imm .niblo-party-onward {
        animation: none;
    }

    .niblo-party-msg span { opacity: 1; transform: none; }
}