/*
 * Guest homepage (route "home", body.ps-home): "The Lobby".
 * Same world as the player area (DESIGN.md › Player Area, player.css): indigo
 * night ground, Chakra Petch, magenta only to move forward and for prizes,
 * amber only for live state and focus. Every game is a table; the open one
 * takes the tall slot and lists its next starts.
 *
 * Legacy style.css forces `li, p, span { color: #fff !important }`, so text
 * colour is reset to inherit inside .ph and coloured p/span/li set theirs with
 * !important at two-class specificity.
 */

:root {
    --ph-ground: #0f0640;
    --ph-ground-deep: #0a0330;
    --ph-ink: #0e063d;
    --ph-ink-soft: #4a4470;
    --ph-indigo: #4609c3;
    --ph-indigo-bright: #5a1be0;
    --ph-indigo-deep: #1a0b5c;
    --ph-magenta: #c8137a;
    --ph-magenta-hover: #a80f66;
    --ph-magenta-on-dark: #ff5cb4;
    --ph-amber: #ffc53d;
    --ph-surface: #fff;
    --ph-wash: #f6f4fc;
    --ph-line: #e7e3f3;
    --ph-on-dark: #fff;
    --ph-on-dark-soft: #d6cdfb;
    --ph-on-dark-line: rgba(214, 205, 251, .22);
    --ph-radius: 14px;
    --ph-shadow: 0 18px 40px -22px rgba(3, 1, 20, .85);
    --ph-ease: cubic-bezier(.19, 1, .22, 1);
    --ph-font: 'Chakra Petch', system-ui, sans-serif;
    --ph-gutter: clamp(16px, 4vw, 64px);
    /* Page-part colours shared by the guest pages (tints of the tokens above use color-mix). */
    --ph-shade: #030114;
    --ph-scrollbar: #3a2a8a;
    --ph-row-hover: #22106e;
    --ph-felt-bright: #6a2ff0;
    --ph-felt-deep: #2a0f86;
    --ph-foil: #78dcff;
    --ph-led: #8c28ff;
    --ph-field-deep: #13053a;
    --ph-band: #3b03ae;
    --ph-band-deep: #2a0388;
}

/* ── Page, browser surfaces ─────────────────────────────────────────────── */

body.ps-home {
    background: var(--ph-ground);
    color: var(--ph-on-dark);
    font-family: var(--ph-font);
    caret-color: var(--ph-magenta);
    scrollbar-color: var(--ph-scrollbar) var(--ph-ground);
}

body.ps-home ::selection { background: var(--ph-amber); color: var(--ph-ink); }

body.ps-home :focus-visible {
    outline: 3px solid var(--ph-amber);
    outline-offset: 2px;
}

.ph :is(p, li, span) { color: inherit !important; font-size: inherit; line-height: inherit; }

.ph { overflow-x: clip; font-family: var(--ph-font); }

/* Legacy element rules set Roboto on a, b, small…; one face across the page. */
.ph * { font-family: var(--ph-font); }

.ph-wrap {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: var(--ph-gutter);
}

.ph-num { font-variant-numeric: tabular-nums; }

.ph-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Header (frontend/common/home-header.blade.php): the scoreboard rail ─────
 * A full-width rail fixed to the top edge, cut into cells by hairlines like a
 * scoreboard: logo · uppercase links · the live readout (open count and a
 * ticking clock to the next start) · account actions. Over the banner it is
 * clear; once the page scrolls it turns solid and shortens. A magenta bar
 * under the link cells marks the section in view and slides to the hovered
 * one. Under 1200px the links open as a full-screen menu from the toggle.
 */

/* Icons (<i>) keep Font Awesome. */
.ph-nav :not(i), .ph-foot :not(i), .ph-up { font-family: var(--ph-font); }
.ph-nav :is(p, li, span), .ph-foot :is(p, li, span) { color: inherit !important; font-size: inherit; line-height: inherit; }
.ph [id] { scroll-margin-top: 88px; }

.ph-skip {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1100;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--ph-amber);
    color: var(--ph-ink);
    font-weight: 700;
    translate: 0 -160%;
    transition: translate .2s var(--ph-ease);
}
.ph-skip:focus { translate: 0 0; color: var(--ph-ink); }

.ph-nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1030;
    border-bottom: 1px solid var(--ph-on-dark-line);
    background: linear-gradient(180deg, color-mix(in srgb, var(--ph-ground-deep) 60%, transparent), color-mix(in srgb, var(--ph-ground-deep) 0%, transparent));
}
/* The solid ground fades in as a layer (gradients cannot transition). */
.ph-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ph-ground-deep);
    opacity: 0;
    transition: opacity .35s ease;
}
.ph-nav.is-scrolled::before { opacity: 1; }

.ph-nav__bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: stretch;
    height: 76px;
    transition: height .5s var(--ph-ease);
}
.ph-nav.is-scrolled .ph-nav__bar { height: 62px; }

.ph-nav__logo {
    display: flex;
    align-items: center;
    flex: none;
    padding: 0 28px 0 var(--ph-gutter);
}
.ph-nav__logo img {
    display: block;
    height: 46px;
    width: auto;
    max-width: none;
    transition: height .5s var(--ph-ease);
}
.ph-nav.is-scrolled .ph-nav__logo img { height: 36px; }

/* Link cells and the section bar. */
.ph-nav__menu { flex: 1; display: flex; min-width: 0; }
.ph-nav__track { position: relative; display: flex; border-left: 1px solid var(--ph-on-dark-line); }
.ph-nav__links { display: flex; margin: 0; padding: 0; list-style: none; }
.ph-nav__links li { display: flex; margin: 0; border-right: 1px solid var(--ph-on-dark-line); }

.ph-nav__link {
    display: flex;
    align-items: center;
    padding: 0 clamp(16px, 1.5vw, 24px);
    color: var(--ph-on-dark-soft);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease;
}
.ph-nav__link:hover, .ph-nav__link:focus-visible { color: var(--ph-on-dark); background: color-mix(in srgb, var(--ph-on-dark) 4.5%, transparent); }
.ph-nav__link.is-current { color: var(--ph-on-dark); }
.ph-nav__link:focus-visible { outline-offset: -3px; }

.ph-nav .ph-nav__ind {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 3px;
    background: var(--ph-magenta-on-dark);
    transform: translateX(var(--x, 0));
    opacity: 0;
    pointer-events: none;
    transition: transform .45s var(--ph-ease), width .45s var(--ph-ease), opacity .2s ease;
}

.ph-nav__extra { display: none !important; }
@media (min-width: 1200px) and (max-width: 1599px) {
    .ph-nav__roomy { display: none !important; }
    .ph-nav__link { padding-inline: 12px; }
}
@media (min-width: 1200px) and (max-width: 1299px) {
    .ph-nav__link { padding-inline: 7px; }
}

/* The live readout. */
.ph-nav__live {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: none;
    padding: 0 22px;
    border-left: 1px solid var(--ph-on-dark-line);
    border-right: 1px solid var(--ph-on-dark-line);
    margin-left: auto;
    color: var(--ph-on-dark);
    text-decoration: none;
    transition: background-color .2s ease;
}
.ph-nav__live:hover { color: var(--ph-on-dark); background: color-mix(in srgb, var(--ph-on-dark) 4.5%, transparent); }
.ph-nav__live:focus-visible { outline-offset: -3px; }

.ph-nav .ph-nav__dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ph-amber);
}
.ph-nav .ph-nav__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ph-amber);
    animation: ph-foot-pulse 2s ease-out infinite;
}

.ph-nav .ph-nav__stat { display: flex; flex-direction: column; gap: 2px; }
.ph-nav .ph-nav__lbl {
    color: var(--ph-on-dark-soft) !important;
    font-size: .62rem !important;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1 !important;
    text-transform: uppercase;
}
.ph-nav .ph-nav__val {
    color: var(--ph-on-dark) !important;
    font-size: 1.05rem !important;
    font-weight: 700;
    line-height: 1.1 !important;
}
.ph-nav .ph-nav__stat--next .ph-nav__val { color: var(--ph-amber) !important; min-width: 7.6ch; }

/* Account actions. */
.ph-nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 0 var(--ph-gutter) 0 18px;
}
.ph-nav__menu + .ph-nav__actions { margin-left: auto; border-left: 1px solid var(--ph-on-dark-line); }

.ph-nav__login {
    padding: 10px 12px;
    color: var(--ph-on-dark);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: .35em;
    transition: text-decoration-color .2s ease;
}
.ph-nav__login:hover { color: var(--ph-on-dark); text-decoration-color: var(--ph-amber); }

.ph-btn--sm { min-height: 42px; padding: 0 20px; font-size: .92rem; }

.ph-nav__install {
    display: none;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--ph-on-dark-line);
    border-radius: 999px;
    color: var(--ph-on-dark-soft);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.ph-nav__install:hover { border-color: var(--ph-on-dark-soft); background: color-mix(in srgb, var(--ph-on-dark) 6%, transparent); color: var(--ph-on-dark); }
.ph-nav__actions .ph-nav__install.is-visible,
.ph-nav .ph-nav__menu-install .nav-install-item.nav-visible { display: inline-flex; }

button.ph-nav__toggle {
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border: 1px solid var(--ph-on-dark-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ph-on-dark) 5%, transparent);
    color: var(--ph-on-dark);
    transition: background-color .2s ease, border-color .2s ease;
}
button.ph-nav__toggle:hover { background: color-mix(in srgb, var(--ph-on-dark) 10%, transparent); border-color: var(--ph-on-dark-soft); }

.ph-nav .ph-nav__burger,
.ph-nav__burger::before,
.ph-nav__burger::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .45s var(--ph-ease), width .45s var(--ph-ease);
}
.ph-nav .ph-nav__burger { position: relative; background: transparent; }
.ph-nav__burger::before, .ph-nav__burger::after { content: ""; position: absolute; left: 0; }
.ph-nav__burger::before { transform: translateY(-4px); }
.ph-nav__burger::after { transform: translateY(4px); width: 12px; }
.ph-nav.is-open .ph-nav__burger::before { transform: rotate(45deg); }
.ph-nav.is-open .ph-nav__burger::after { transform: rotate(-45deg); width: 18px; }

.ph-nav__menu-foot { display: none; }

html.ph-lock, html.ph-lock body { overflow: hidden; }

@media (max-width: 1439px) {
    .ph-nav__actions .ph-nav__install .install-label { display: none; }
}

@media (max-width: 1199px) {
    button.ph-nav__toggle { display: grid; }
    .ph-nav .ph-nav__ind, .ph-nav__login { display: none; }
    .ph-nav__extra { display: flex !important; }
    .ph-nav__live { margin-left: auto; }
    .ph-nav__actions { border-left: 0; padding-left: 14px; }

    /* The menu is a full-screen sheet that grows out of the toggle. */
    .ph-nav__menu {
        position: fixed;
        inset: 0;
        z-index: -1;
        flex-direction: column;
        justify-content: space-between;
        gap: 40px;
        padding: 104px var(--ph-gutter) 32px;
        overflow-y: auto;
        background:
            radial-gradient(640px 480px at 100% 0%, color-mix(in srgb, var(--ph-indigo-bright) 50%, transparent), transparent 70%),
            var(--ph-ground-deep);
        clip-path: circle(0 at calc(100% - var(--ph-gutter) - 22px) 38px);
        visibility: hidden;
        transition: clip-path .7s var(--ph-ease), visibility 0s linear .7s;
    }
    .ph-nav.is-open .ph-nav__menu {
        clip-path: circle(150vmax at calc(100% - var(--ph-gutter) - 22px) 38px);
        visibility: visible;
        transition: clip-path .7s var(--ph-ease), visibility 0s;
    }
    .ph-nav.is-open .ph-nav__actions > .ph-btn { opacity: 0; visibility: hidden; }

    .ph-nav__track { border-left: 0; }
    .ph-nav__links { flex-direction: column; width: 100%; }
    .ph-nav__track { width: 100%; }
    .ph-nav__links li {
        border-right: 0;
        border-bottom: 1px solid var(--ph-on-dark-line);
        opacity: 0;
        translate: 0 28px;
        transition: opacity .3s ease, translate .6s var(--ph-ease);
    }
    .ph-nav.is-open .ph-nav__links li {
        opacity: 1;
        translate: 0 0;
        transition-delay: calc(.14s + var(--i) * .05s);
    }
    .ph-nav__link {
        flex: 1;
        justify-content: space-between;
        padding: 16px 2px;
        color: var(--ph-on-dark);
        font-size: clamp(1.6rem, 1.1rem + 3vw, 2.4rem);
        font-weight: 700;
        letter-spacing: -.01em;
        text-transform: none;
    }
    .ph-nav__link:hover, .ph-nav__link:focus-visible { background: none; }
    .ph-nav__link::after {
        content: "";
        width: .4em;
        height: .4em;
        border-top: 2px solid var(--ph-on-dark-soft);
        border-right: 2px solid var(--ph-on-dark-soft);
        rotate: 45deg;
        translate: -6px 0;
        opacity: .5;
        transition: translate .3s var(--ph-ease), opacity .2s ease;
    }
    .ph-nav__link:hover::after, .ph-nav__link:focus-visible::after { translate: 0 0; opacity: 1; }

    .ph-nav__menu-foot {
        display: flex;
        flex-direction: column;
        gap: 12px;
        opacity: 0;
        transition: opacity .4s ease;
    }
    .ph-nav.is-open .ph-nav__menu-foot { opacity: 1; transition-delay: .45s; }
    .ph-nav__menu-foot .ph-btn { width: 100%; }
    .ph-nav__menu-install { display: flex; flex-wrap: wrap; gap: 10px; }
}

@media (max-width: 767px) {
    /* Phones keep the install button beside Join, icon only (NS-50: it was only in the menu);
       the live count makes room for it. */
    .ph-nav__bar:has(.ph-nav__actions .ph-nav__install.is-visible) .ph-nav__live { display: none; }
    .ph-nav__actions .ph-nav__install.is-visible { width: 42px; padding: 0; justify-content: center; }
    .ph-nav .ph-nav__stat--next { display: none; }
    .ph-nav__live { gap: 10px; padding: 0 14px; border-right: 0; }
}

@media (max-width: 575px) {
    .ph-nav__bar { height: 64px; }
    .ph-nav.is-scrolled .ph-nav__bar { height: 56px; }
    .ph-nav__logo { padding-right: 8px; }
    .ph-nav__logo img { height: 30px; }
    .ph-nav.is-scrolled .ph-nav__logo img { height: 28px; }
    .ph-nav__live { gap: 8px; padding: 0 10px; }
    .ph-nav__actions { gap: 6px; padding-left: 10px; }
    .ph-nav__actions .ph-btn--sm { min-height: 40px; padding: 0 14px; font-size: .85rem; }
    button.ph-nav__toggle { width: 40px; height: 40px; }
    .ph-nav__menu { padding-top: 92px; }
}

/* ── Back to top (floating, above the chatbox dock) ──────────────────────── */

button.ph-up {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1020;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ph-ground-deep) 90%, transparent);
    box-shadow: var(--ph-shadow), inset 0 0 0 1px var(--ph-on-dark-line);
    color: var(--ph-on-dark);
    opacity: 0;
    scale: .6;
    visibility: hidden;
    transition: opacity .25s ease, scale .45s var(--ph-ease), visibility 0s linear .45s, background-color .2s ease, color .2s ease;
}
button.ph-up.is-on { opacity: 1; scale: 1; visibility: visible; transition-delay: 0s; }
button.ph-up:hover { background: var(--ph-on-dark); color: var(--ph-ink); }
button.ph-up:hover .ph-up__arrow { animation: ph-up .6s var(--ph-ease); }
.ph-up__ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.ph-up__ring circle {
    fill: none;
    stroke: var(--ph-magenta-on-dark);
    stroke-width: 2;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--p, 0) * 100);
}

/* Signed-in visitors have the chatbox dock in that corner; sit above it. */
body:has(.sbx-tab) button.ph-up { bottom: calc(1.25rem + 64px); }

@media (max-width: 767px) {
    button.ph-up { right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); }
    body:has(.sbx-tab) button.ph-up { bottom: calc(1rem + 68px + env(safe-area-inset-bottom)); }
}

/* ── Footer (frontend/common/home-footer.blade.php) ─────────────────────────
 * Closing time: the site map in three short columns, the live chat pill,
 * and the name of the place in letters that rise in once and lift toward the
 * pointer. A magenta-to-amber light runs along the top seam as it arrives.
 */

.ph-foot {
    position: relative;
    overflow: hidden;
    padding-top: clamp(64px, 7vw, 104px);
    background:
        radial-gradient(900px 420px at 50% 115%, color-mix(in srgb, var(--ph-indigo-bright) 38%, transparent), transparent 70%),
        var(--ph-ground-deep);
    border-top: 1px solid var(--ph-on-dark-line);
    color: var(--ph-on-dark-soft);
}

.ph-foot::before {
    content: "";
    position: absolute;
    inset: -1px 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ph-magenta-on-dark), var(--ph-amber), transparent) no-repeat;
    background-size: 36% 100%;
    background-position: -60% 0;
}
.ph-foot.is-in::before { animation: ph-seam 2.2s var(--ph-ease) .1s both; }

.ph-foot__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
    gap: clamp(40px, 6vw, 112px);
}

.ph-foot__logo { display: inline-flex; }
.ph-foot__logo img { display: block; height: 52px; width: auto; max-width: none; }

.ph-foot .ph-foot__line {
    max-width: 30ch;
    margin: 18px 0 24px;
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
}

.ph-foot__live {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    margin: 0;
    padding: 5px 5px 5px 16px;
    border: 1px solid var(--ph-on-dark-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ph-on-dark) 4%, transparent);
    color: var(--ph-on-dark);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease;
}
.ph-foot__live:hover { color: var(--ph-on-dark); border-color: var(--ph-on-dark-soft); background: color-mix(in srgb, var(--ph-on-dark) 8%, transparent); }

.ph-foot .ph-foot__dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ph-amber);
}
.ph-foot .ph-foot__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ph-amber);
    animation: ph-foot-pulse 2s ease-out infinite;
}

.ph-foot .ph-foot__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--ph-magenta);
    color: var(--ph-on-dark) !important;
    transition: background-color .2s ease;
}
.ph-foot__cta > span { transition: translate .3s var(--ph-ease); }
.ph-foot__live:hover .ph-foot__cta { background: var(--ph-magenta-hover); }
.ph-foot__live:hover .ph-foot__cta > span { translate: 3px 0; }

.ph-foot__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 32px;
}

.ph-foot .ph-foot__title {
    margin: 0 0 14px;
    color: var(--ph-on-dark-soft);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1.4;
    text-transform: uppercase;
}

.ph-foot__col ul { margin: 0; padding: 0; list-style: none; }
.ph-foot__col li { display: block; margin: 0; }

.ph-foot__link {
    display: inline-block;
    padding: 7px 0;
    color: var(--ph-on-dark);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    background: linear-gradient(var(--ph-amber), var(--ph-amber)) no-repeat 0 calc(100% - 4px) / 0 1px;
    transition: background-size .35s var(--ph-ease), translate .3s var(--ph-ease);
}
.ph-foot__link:hover, .ph-foot__link:focus-visible { color: var(--ph-on-dark); background-size: 100% 1px; translate: 3px 0; }

.ph-foot__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    margin-top: clamp(48px, 6vw, 80px);
    padding-block: 26px;
    border-top: 1px solid var(--ph-on-dark-line);
}

.ph-foot__social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ph-foot__social li {
    display: block;
    margin: 0;
    opacity: 0;
    translate: 0 12px;
    transition: opacity .4s ease, translate .6s var(--ph-ease);
    transition-delay: calc(.25s + var(--i) * .05s);
}
.ph-foot.is-in .ph-foot__social li { opacity: 1; translate: 0 0; }

.ph-foot__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ph-on-dark-line);
    border-radius: 50%;
    color: var(--ph-on-dark-soft);
    font-size: 1rem;
    transition: transform .3s var(--ph-ease), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ph-foot__icon:hover, .ph-foot__icon:focus-visible {
    transform: translateY(-3px);
    border-color: var(--ph-on-dark);
    background: var(--ph-on-dark);
    color: var(--ph-ink);
}

.ph-foot .ph-foot__copy {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: .9rem !important;
}

.ph-foot .ph-foot__age {
    padding: 2px 8px;
    border: 1px solid var(--ph-on-dark-soft);
    border-radius: 999px;
    color: var(--ph-on-dark) !important;
    font-size: .72rem !important;
    font-weight: 700;
}

.ph-foot__legal {
    padding-bottom: 28px;
    color: color-mix(in srgb, var(--ph-on-dark-soft) 72%, transparent);
    font-size: .8rem;
    line-height: 1.6;
}
.ph-foot__legal :is(p, span, li) { color: inherit !important; font-size: inherit !important; line-height: inherit !important; }
.ph-foot__legal a { color: var(--ph-on-dark); text-decoration: underline; text-underline-offset: .2em; }

/* The name of the place, bleeding off the bottom edge. */
.ph-foot__mark {
    display: flex;
    justify-content: center;
    margin: clamp(16px, 3vw, 40px) 0 -.14em;
    padding-top: .06em;
    overflow: hidden;
    font-size: 11.4vw;
    font-weight: 700;
    line-height: .86;
    letter-spacing: -.01em;
    user-select: none;
}
.ph-foot .ph-foot__mark span {
    display: block;
    color: rgba(214, 205, 251, calc(var(--lift, 0) * .9)) !important;
    font-size: inherit !important;
    line-height: inherit !important;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--ph-on-dark-soft) 30%, transparent);
    translate: 0 105%;
    transform: translateY(calc(var(--lift, 0) * -12%));
    transition: translate 1.1s var(--ph-ease), transform .5s var(--ph-ease), color .3s ease;
    transition-delay: calc(var(--i) * .045s), 0s, 0s;
}
.ph-foot.is-in .ph-foot__mark span { translate: 0 0; }

@keyframes ph-seam { to { background-position: 160% 0; } }
@keyframes ph-foot-pulse { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }
@keyframes ph-up { 0% { transform: translateY(0); } 45% { transform: translateY(-24px); } 46% { transform: translateY(24px); } 100% { transform: translateY(0); } }

@media (max-width: 991px) {
    .ph-foot__top { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .ph-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
    .ph-foot__base { flex-direction: column; align-items: flex-start; }
}

/* ── Buttons and links ──────────────────────────────────────────────────── */

.ph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .01em;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, transform .15s var(--ph-ease);
}

.ph-btn:active { transform: scale(.97); }

.ph-btn--primary { background: var(--ph-magenta); color: var(--ph-on-dark); }
.ph-btn--primary:hover { background: var(--ph-magenta-hover); color: var(--ph-on-dark); }

.ph-btn--ghost { border-color: color-mix(in srgb, var(--ph-on-dark-soft) 45%, transparent); color: var(--ph-on-dark); }
.ph-btn--ghost:hover { border-color: var(--ph-on-dark); background: color-mix(in srgb, var(--ph-on-dark) 6%, transparent); color: var(--ph-on-dark); }

.ph-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ph-actions--center { justify-content: center; }

.ph-link {
    display: inline-flex;
    gap: .4em;
    color: var(--ph-on-dark);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--ph-on-dark-soft) 45%, transparent);
    text-underline-offset: .25em;
    transition: text-decoration-color .15s ease;
}

.ph-link:hover { color: var(--ph-on-dark); text-decoration-color: var(--ph-on-dark); }

/* ── Banner ─────────────────────────────────────────────────────────────── */

/* A dark violet field that matches the game-room photo's wall. */
.ph-banner {
    --ph-field: #160539;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    /* Short of the full screen so the ticker and the first tables show below it. */
    min-height: min(calc(100svh - 150px), 820px);
    padding: clamp(120px, 11vw, 150px) 0 48px;
    background:
        radial-gradient(900px 600px at 0% 0%, color-mix(in srgb, var(--ph-indigo-bright) 55%, transparent), transparent 70%),
        linear-gradient(180deg, var(--ph-field) 0%, var(--ph-field-deep) 70%, var(--ph-ground) 100%);
    overflow: hidden;
}

/* Faint scanlines keep the flat field from reading as a plain fill. */
.ph-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--ph-on-dark) 2.5%, transparent) 0 1px, transparent 1px 4px);
    pointer-events: none;
}

.ph-banner__art {
    position: absolute;
    top: 50%;
    right: -7%;
    width: min(64vw, 1100px);
    z-index: 0;
    transform: translateY(calc(-46% + var(--ph-scroll, 0px)));
    perspective: 1400px;
}

.ph-banner__art img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: radial-gradient(closest-side, #000 68%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 68%, transparent 100%);
}

.ph-banner__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: end;
    gap: clamp(32px, 6vw, 96px);
    width: 100%;
}

.ph-banner__copy { display: grid; gap: 22px; justify-items: start; max-width: 600px; }

/* The card sits low, on the desk, clear of the TV. */
.ph-banner__inner > .ph-event { align-self: end; margin-bottom: -28px; }

/* From 768px the header rail shows NEXT; the status line drops its own clock. */
@media (min-width: 768px) { .ph-status__next { display: none; } }

/* Phones keep the banner's two buttons on one row (DESIGN.md), so the ghost one shortens its label. */
.ph-btn__short { display: none; }
@media (max-width: 575px) { :is(.ph-banner, .ph-nav) .ph-btn__long { display: none; } :is(.ph-banner, .ph-nav) .ph-btn__short { display: inline; } }

.ph-title {
    margin: 0;
    color: var(--ph-on-dark);
    font-family: var(--ph-font);
    font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.4rem);
    font-weight: 700;
    line-height: .93;
    letter-spacing: -.02em;
    text-transform: none;
    text-wrap: balance;
    text-shadow: 0 8px 40px color-mix(in srgb, var(--ph-ground) 45%, transparent);
}

/* font-weight: legacy style.css thins every span; the lines keep the h1's 700. */
.ph-title__line { display: block; font-weight: inherit; animation: ph-rise .9s var(--ph-ease) both; }
.ph-title__line:nth-child(2) { animation-delay: .08s; }
.ph-title__line:nth-child(3) { animation-delay: .16s; }

.ph-title em { font-style: normal; color: var(--ph-magenta-on-dark); }

.ph-banner__copy > :not(.ph-title) { animation: ph-fade .8s .25s ease-out both; }

.ph .ph-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0;
    color: var(--ph-amber) !important;
    font-size: .95rem;
    font-weight: 600;
}

.ph-status__sep { opacity: .6; }

.ph-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ph-amber);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ph-amber) 60%, transparent);
    animation: ph-pulse 2s ease-out infinite;
}

.ph .ph-offer__text {
    margin: 0;
    max-width: 46ch;
    color: var(--ph-on-dark-soft) !important;
    font-size: 1.12rem;
    line-height: 1.55;
}

.ph .ph-offer__login { margin: 0; color: var(--ph-on-dark-soft) !important; font-size: .95rem; }
.ph-offer__login a { color: var(--ph-on-dark); font-weight: 700; text-decoration: underline; text-underline-offset: .25em; }

/* Main event: the biggest open pot, its clock counting days. */
.ph-event {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--ph-on-dark-line);
    border-radius: var(--ph-radius);
    background: color-mix(in srgb, var(--ph-ground) 82%, transparent);
    box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--ph-shade) 95%, transparent);
    animation: ph-deal .9s .3s var(--ph-ease) both;
}

.ph-event__title { margin: 0; color: var(--ph-on-dark); font-family: var(--ph-font); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }

.ph .ph-event__clock { display: grid; gap: 2px; margin: 0; }
.ph .ph-event__clock-label { color: var(--ph-on-dark-soft) !important; font-size: .82rem; }
.ph-event__clock time { color: var(--ph-amber); font-size: 2.1rem; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; }

.ph-event__terms { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 12px; margin: 0; padding-top: 14px; border-top: 1px solid var(--ph-on-dark-line); }
.ph-event__terms dt { color: var(--ph-on-dark-soft); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ph-event__terms dd { margin: 2px 0 0; color: var(--ph-on-dark); font-size: 1.05rem; font-weight: 700; }
.ph-event__terms dd.ph-prize { color: var(--ph-magenta-on-dark); }

.ph-event__cta { width: 100%; }

/* ── Banner interaction ─────────────────────────────────────────────────────
 * Everything below moves only transform, opacity and a few custom
 * properties, so the compositor does the work. home.js pauses all of it
 * (.is-idle) while the banner is off screen or the tab is hidden, and none
 * of it runs under prefers-reduced-motion.
 */

/* The copy layer lets the pointer through to the controller behind it. */
.ph-banner__inner { pointer-events: none; }
.ph-banner__inner > * { pointer-events: auto; }

/* Spotlight that follows the pointer across the field. */
.ph-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(520px circle at var(--ph-bx, 70%) var(--ph-by, 40%), color-mix(in srgb, var(--ph-on-dark-soft) 16%, transparent), transparent 60%);
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

.ph-banner.is-pointer::after { opacity: 1; }

/* The controller: one 3D layer the photo and its lights share. */
.ph-pad {
    position: relative;
    transform: rotateX(var(--ph-rx, 0deg)) rotateY(var(--ph-ry, 0deg)) scale(var(--ph-press, 1));
    transition: transform .6s var(--ph-ease);
    animation: ph-float 7s ease-in-out infinite alternate, ph-art-in 1.2s var(--ph-ease) both;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ph-pad.is-pressed { --ph-press: .97; transition-duration: .12s; }

.ph-pad__btn {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 7.5%;
    aspect-ratio: 1;
    border-radius: 50%;
    translate: -50% -50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ph-magenta-on-dark) 95%, transparent) 0 22%, color-mix(in srgb, var(--ph-magenta-on-dark) 45%, transparent) 42%, transparent 70%);
    mix-blend-mode: screen;
    opacity: 0;
    scale: .6;
    transition: opacity .35s ease, scale .35s var(--ph-ease);
}

.ph-pad__btn--dpad,
.ph-pad__btn--lstick,
.ph-pad__btn--rstick {
    width: 12%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ph-on-dark-soft) 80%, transparent) 0 20%, color-mix(in srgb, var(--ph-on-dark-soft) 30%, transparent) 45%, transparent 70%);
}

.ph-pad__btn:hover,
.ph-pad__btn.is-lit,
.ph-pad.is-pressed .ph-pad__btn { opacity: 1; scale: 1; transition-duration: .12s; }

/* A ring that spreads from where the pad was pressed. */
.ph-ripple {
    position: absolute;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid var(--ph-magenta-on-dark);
    border-radius: 50%;
    pointer-events: none;
    animation: ph-ripple .7s var(--ph-ease) forwards;
}

/* Real recent wins float up beside the controller. */
/* On the desk and controller, right of the copy column. */
.ph-pops { position: absolute; inset: 62% 18% 6% 40%; pointer-events: none; }

.ph .ph-pop {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 8px;
    border: 1px solid var(--ph-on-dark-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ph-ground) 85%, transparent);
    box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--ph-shade) 90%, transparent);
    color: var(--ph-on-dark) !important;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    animation: ph-pop 3.6s var(--ph-ease) forwards;
}

.ph .ph-pop__avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ph-indigo);
    color: var(--ph-on-dark) !important;
    font-size: .8rem;
    font-weight: 700;
}

.ph .ph-pop__prize { color: var(--ph-magenta-on-dark) !important; font-weight: 700; }

/* The live line rolls through each game's open count. */
.ph-roll { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.ph-roll__item { grid-area: 1 / 1; }
.ph-roll__item.is-in { animation: ph-roll-in .5s var(--ph-ease) both; }
.ph-roll__item.is-out { animation: ph-roll-out .5s var(--ph-ease) both; }

/* Main event card: a light runs round its edge and it leans toward the pointer. */
@property --ph-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.ph-event {
    transform: perspective(900px) rotateX(var(--ph-cx, 0deg)) rotateY(var(--ph-cy, 0deg));
    transition: transform .5s var(--ph-ease);
    /* Entrance on translate/scale so it never pins transform and blocks the tilt. */
    animation: ph-card-in .9s .3s var(--ph-ease) both;
}

.ph-event::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--ph-angle), transparent 0 62%, var(--ph-magenta-on-dark) 80%, var(--ph-on-dark-soft) 88%, transparent 96%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: ph-spin 5s linear infinite;
    pointer-events: none;
}

.ph-event__clock time { display: inline-block; }
.ph-event__clock time.is-tick { animation: ph-tick .45s var(--ph-ease); }

/* Primary buttons: a sheen crosses on hover; banner buttons lean to the pointer. */
.ph-btn { position: relative; overflow: hidden; translate: var(--ph-tx, 0) var(--ph-ty, 0); transition: background-color .15s ease, border-color .15s ease, transform .15s var(--ph-ease), translate .4s var(--ph-ease); }

.ph-btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--ph-on-dark) 35%, transparent) 50%, transparent 70%);
    translate: -120% 0;
    transition: translate .7s var(--ph-ease);
    pointer-events: none;
}

.ph-btn--primary:hover::after { translate: 120% 0; }

/* Off screen or hidden tab: freeze every banner loop. */
.ph-banner.is-idle *,
.ph-banner.is-idle *::before,
.ph-banner.is-idle *::after { animation-play-state: paused !important; }

@keyframes ph-ripple {
    from { opacity: 1; scale: 1; }
    to { opacity: 0; scale: 9; }
}

@keyframes ph-pop {
    0% { opacity: 0; transform: translateY(16px) scale(.9); }
    14% { opacity: 1; transform: none; }
    78% { opacity: 1; transform: translateY(-34px); }
    100% { opacity: 0; transform: translateY(-52px); }
}

@keyframes ph-roll-in {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: none; }
}

@keyframes ph-roll-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(-100%); }
}

@keyframes ph-card-in {
    from { opacity: 0; translate: 0 26px; scale: .97; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes ph-spin { to { --ph-angle: 360deg; } }

@keyframes ph-tick {
    from { transform: translateY(-3px); opacity: .55; }
    to { transform: none; opacity: 1; }
}


/* ── The game-room scene (replaces the controller cut-out) ───────────────
 * The art box is the photo's own ratio and the banner's full height, pinned
 * right; light points sit in percent of that box, so they stay on the
 * photo's controllers, LED strip and TV at every size.
 */
.ph-banner__art {
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1600 / 1226;
    transform: translateY(var(--ph-scroll, 0px));
    perspective: none;
}

.ph-scene {
    height: 100%;
    transform: translate(var(--ph-sx, 0px), var(--ph-sy, 0px)) scale(calc(1.06 * var(--ph-press, 1)));
    transition: transform 1s var(--ph-ease);
    animation: ph-scene-in 1.4s var(--ph-ease) both;
}

.ph-scene.is-pressed { --ph-press: .99; }

.ph-banner__art .ph-scene img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--ph-shade) 55%, transparent) 40%, #000 58%), linear-gradient(180deg, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--ph-shade) 55%, transparent) 40%, #000 58%), linear-gradient(180deg, #000 72%, transparent 100%);
    mask-composite: intersect;
}

/* The desk's LED strip breathes. */
.ph-scene__led {
    position: absolute;
    left: 12%;
    right: 2%;
    top: 59.5%;
    height: 7%;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--ph-magenta-on-dark) 55%, transparent), color-mix(in srgb, var(--ph-led) 25%, transparent) 60%, transparent);
    filter: blur(8px);
    mix-blend-mode: screen;
    animation: ph-breathe 4s ease-in-out infinite alternate;
    pointer-events: none;
}

/* A light sweep crosses the TV now and then. */
.ph-scene__screen {
    position: absolute;
    left: 33.6%;
    top: 28.6%;
    width: 39.2%;
    height: 30.2%;
    overflow: hidden;
    pointer-events: none;
    /* Lit, but darker than the headline: the TV never becomes the focal point.
       The screen is blurred in the photo files themselves, so no game logo is readable (phones hide this layer). */
    background: color-mix(in srgb, var(--ph-indigo-deep) 42%, transparent);
    mix-blend-mode: multiply;
}

.ph-scene__screen::after {
    content: "";
    position: absolute;
    inset: -20% auto -20% 0;
    width: 30%;
    background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--ph-on-dark) 22%, transparent), transparent);
    translate: -120% 0;
    animation: ph-sweep 6s 1.5s ease-in-out infinite;
}

/* The two controllers' light bars. */
.ph-pad__btn--bar {
    width: 9%;
    aspect-ratio: 3 / 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--ph-magenta-on-dark) 95%, transparent), color-mix(in srgb, var(--ph-magenta) 50%, transparent) 55%, transparent);
    filter: blur(2px);
}

@keyframes ph-scene-in {
    from { opacity: 0; scale: 1.06; }
    to { opacity: 1; scale: 1; }
}

@keyframes ph-breathe {
    from { opacity: .45; }
    to { opacity: 1; }
}

@keyframes ph-sweep {
    0%, 55% { translate: -120% 0; }
    100% { translate: 420% 0; }
}

/* ── Winners ticker ─────────────────────────────────────────────────────── */

.ph-ticker {
    border-block: 1px solid var(--ph-on-dark-line);
    background: var(--ph-ground-deep);
}

.ph-ticker__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ph-ticker__track {
    display: flex;
    width: max-content;
    animation: ph-marquee 70s linear infinite;
}

.ph-ticker:hover .ph-ticker__track,
.ph-ticker:focus-within .ph-ticker__track { animation-play-state: paused; }

.ph-ticker__list { display: flex; margin: 0; padding: 0; list-style: none; }

.ph .ph-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 28px;
    border-right: 1px solid var(--ph-on-dark-line);
    color: var(--ph-on-dark-soft) !important;
    font-size: .95rem;
    white-space: nowrap;
}

.ph-ticker__item b { color: var(--ph-on-dark); font-weight: 700; }
.ph-ticker__item b.ph-prize { color: var(--ph-magenta-on-dark); }
.ph .ph-trophy { display: inline-grid; color: var(--ph-amber) !important; }

/* ── The lobby ──────────────────────────────────────────────────────────── */

.ph-lobby {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(196px, auto);
    gap: 16px;
}

.ph-table {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 22px 24px;
    border: 1px solid var(--ph-on-dark-line);
    border-radius: var(--ph-radius);
    background: var(--ph-indigo-deep);
    overflow: hidden;
    transition: border-color .2s ease, transform .35s var(--ph-ease), background-color .2s ease;
    animation: ph-deal .7s var(--ph-ease) both;
}

.ph-table:nth-child(2) { animation-delay: .06s; }
.ph-table:nth-child(3) { animation-delay: .12s; }
.ph-table:nth-child(4) { animation-delay: .18s; }
.ph-table:nth-child(n+5) { animation-delay: .24s; }

.ph-table:not(.is-open):hover { border-color: color-mix(in srgb, var(--ph-on-dark-soft) 55%, transparent); transform: translateY(-3px); }

.ph-table.is-open {
    grid-column: 1;
    grid-row: 1 / span var(--side-rows, 2);
    border-color: transparent;
    background: linear-gradient(160deg, var(--ph-indigo-bright), var(--ph-indigo-deep) 78%);
    box-shadow: var(--ph-shadow);
}

/* Light that follows the pointer across the open table (home.js sets --mx/--my). */
.ph-table.is-open::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 0%), color-mix(in srgb, var(--ph-on-dark) 13%, transparent), transparent 60%);
    pointer-events: none;
}

.ph-table__name { margin: 0; font-family: var(--ph-font); line-height: 1; }

.ph-table__pick {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ph-on-dark);
    font: 700 clamp(1.4rem, 1rem + 1vw, 1.9rem)/1.05 var(--ph-font);
    letter-spacing: -.01em;
    text-align: left;
    cursor: pointer;
}

/* A closed table is one big button; the open one gives its rows the clicks. */
.ph-table:not(.is-open) .ph-table__pick::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.ph-table:not(.is-open) .ph-table__pick:focus-visible { outline: none; }
.ph-table:not(.is-open):has(.ph-table__pick:focus-visible) { outline: 3px solid var(--ph-amber); outline-offset: 2px; }

.ph-table.is-open .ph-table__pick {
    cursor: default;
    font-size: clamp(2.2rem, 1.2rem + 3vw, 3.6rem);
}

.ph-table__terms {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    margin: auto 0 0;
}

.ph-table.is-open .ph-table__terms { margin-top: 0; }

.ph-table__terms dt {
    color: var(--ph-on-dark-soft);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ph-table__terms dd {
    margin: 2px 0 0;
    color: var(--ph-on-dark);
    font-size: 1.15rem;
    font-weight: 700;
}

.ph-table__next dd { color: var(--ph-amber); }
.ph-table:not(.is-open) .ph-table__entry { display: none; }

.ph-prize { color: var(--ph-magenta-on-dark); }

.ph-board { display: grid; gap: 8px; position: relative; }

.ph-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 13px 16px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ph-ground) 50%, transparent);
    color: var(--ph-on-dark);
    text-decoration: none;
    transition: background-color .15s ease, transform .25s var(--ph-ease);
    animation: ph-fade-up .5s var(--ph-ease) both;
}

.ph-row:nth-child(2) { animation-delay: .05s; }
.ph-row:nth-child(3) { animation-delay: .1s; }
.ph-row:nth-child(4) { animation-delay: .15s; }

.ph-row:hover { background: color-mix(in srgb, var(--ph-ground) 78%, transparent); color: var(--ph-on-dark); transform: translateX(4px); }

.ph-row__name { display: grid; gap: 3px; min-width: 0; }
.ph-row__name b { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-row__name small { color: var(--ph-on-dark-soft); font-size: .82rem; }

.ph-row__side { display: grid; justify-items: end; gap: 3px; }
.ph-row__money { display: inline-flex; align-items: baseline; gap: 6px; font-size: .88rem; white-space: nowrap; }
.ph .ph-row__arrow { color: var(--ph-on-dark-soft) !important; }

.ph-row__clock { color: var(--ph-amber); font-size: 1.05rem; font-weight: 700; }

.ph .ph-table__teaser {
    margin: -8px 0 0;
    color: var(--ph-on-dark-soft) !important;
    font-size: .95rem;
    line-height: 1.35;
}

.ph-table.is-open .ph-table__teaser { display: none; }

.ph .ph-board__empty { margin: 0; color: var(--ph-on-dark-soft) !important; font-size: 1rem; }

.ph-board__all {
    justify-self: start;
    margin-top: 6px;
    color: var(--ph-on-dark);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--ph-on-dark-soft) 45%, transparent);
    text-underline-offset: .25em;
}

.ph-board__all:hover { color: var(--ph-on-dark); text-decoration-color: var(--ph-on-dark); }

.ph-empty {
    margin-top: 48px;
    padding: 32px;
    border: 1px dashed var(--ph-on-dark-line);
    border-radius: var(--ph-radius);
    color: var(--ph-on-dark-soft);
}

.ph .ph-empty__lead { color: var(--ph-on-dark) !important; font-size: 1.4rem; font-weight: 700; }

/* Opening a table: the browser morphs every table to its new slot. */
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.19, 1, .22, 1); }

/* ── Sections ───────────────────────────────────────────────────────────── */

.ph-section { padding-block: clamp(72px, 9vw, 128px); }

.ph-h2 {
    margin: 0;
    color: var(--ph-on-dark);
    font-family: var(--ph-font);
    font-size: clamp(2rem, 1.3rem + 2.2vw, 3.2rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.015em;
    text-transform: none;
    text-wrap: balance;
}

.ph-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 12px 32px;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.ph-head p,
.ph-how__intro p,
.ph-close p {
    margin: 0;
    max-width: 52ch;
    color: var(--ph-on-dark-soft) !important;
    font-size: 1.05rem;
    line-height: 1.55;
}

.ph-head--stack { display: grid; justify-content: start; align-content: start; }

/* How: the money's route as a ledger on white. */
.ph-how { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ph-indigo-deep) 55%, transparent) 40%, transparent); }

.ph-how__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: start;
}

.ph-how__intro { display: grid; gap: 20px; justify-items: start; position: sticky; top: 120px; }

.ph-ledger {
    margin: 0;
    padding: 6px 28px;
    list-style: none;
    border-radius: var(--ph-radius);
    background: var(--ph-surface);
    color: var(--ph-ink);
    box-shadow: var(--ph-shadow);
    counter-reset: ph-step;
}

.ph-ledger__row {
    display: grid;
    grid-template-columns: 2.4rem 9.5rem minmax(0, 1fr);
    grid-template-areas: "n step text" ". . fig";
    column-gap: 16px;
    align-items: baseline;
    padding: 22px 0;
    border-top: 1px solid var(--ph-line);
    counter-increment: ph-step;
}

.ph-ledger__row:first-child { border-top: 0; }

.ph-ledger__row::before {
    content: counter(ph-step);
    grid-area: n;
    color: var(--ph-indigo);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ph .ph-ledger__step { grid-area: step; color: var(--ph-ink) !important; font-size: 1.15rem; font-weight: 700; }
.ph .ph-ledger__row p { grid-area: text; margin: 0; color: var(--ph-ink-soft) !important; font-size: 1rem; line-height: 1.5; }

.ph .ph-ledger__fig {
    grid-area: fig;
    justify-self: start;
    margin-top: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ph-wash);
    color: var(--ph-indigo) !important;
    font-size: .9rem;
    font-weight: 700;
}

.ph .ph-ledger__fig.ph-prize { color: var(--ph-magenta) !important; }

/* Leaders: one hairline board, not three cards. */
.ph-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--ph-on-dark-line);
    border-radius: var(--ph-radius);
    overflow: hidden;
}

.ph-leader + .ph-leader { border-left: 1px solid var(--ph-on-dark-line); }

.ph-leader__link {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 26px 24px;
    color: var(--ph-on-dark);
    text-decoration: none;
    transition: background-color .2s ease;
}

.ph-leader__link:hover { background: color-mix(in srgb, var(--ph-indigo-bright) 22%, transparent); color: var(--ph-on-dark); }

.ph .ph-leader__rank { color: color-mix(in srgb, var(--ph-on-dark-soft) 45%, transparent) !important; font-size: 2.6rem; font-weight: 700; line-height: 1; }
.ph-leader:first-child .ph-leader__rank { color: var(--ph-on-dark) !important; }

.ph .ph-leader__name { display: grid; gap: 2px; min-width: 0; font-size: 1.2rem; font-weight: 700; overflow-wrap: anywhere; }
.ph-leader__name small { color: var(--ph-on-dark-soft); font-size: .9rem; font-weight: 500; }

.ph .ph-leader__go {
    color: var(--ph-on-dark) !important;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .2s ease, transform .3s var(--ph-ease);
}

.ph-leader__link:hover .ph-leader__go,
.ph-leader__link:focus-visible .ph-leader__go { opacity: 1; transform: none; }

.ph .ph-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ph-indigo);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ph-indigo-bright) 55%, transparent);
    color: var(--ph-on-dark) !important;
    font-size: 1.5rem;
    font-weight: 700;
    overflow: hidden;
    flex: none;
}

.ph-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.ph .ph-avatar--sm { width: 40px; height: 40px; font-size: 1rem; box-shadow: none; }

/* Features: admin copy as a quiet two-column list. */
.ph-features__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    gap: clamp(32px, 6vw, 88px);
}

.ph-features__list { margin: 0; padding: 0; list-style: none; }

.ph-feature {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 22px 0;
    border-top: 1px solid var(--ph-on-dark-line);
}

.ph-feature:first-child { border-top: 0; padding-top: 0; }
.ph-feature img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.ph-feature h3 { margin: 0 0 6px; color: var(--ph-on-dark); font-family: var(--ph-font); font-size: 1.2rem; font-weight: 700; }
.ph .ph-feature p { margin: 0; color: var(--ph-on-dark-soft) !important; font-size: 1rem; line-height: 1.55; }

/* Reviews: a scroll-snapped row of white quotes. */
.ph-quotes {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 4px max(var(--ph-gutter), calc((100vw - 1240px) / 2 + var(--ph-gutter))) 20px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(var(--ph-gutter), calc((100vw - 1240px) / 2 + var(--ph-gutter)));
    scrollbar-width: thin;
    scrollbar-color: var(--ph-scrollbar) transparent;
}

.ph-quotes:focus-visible { outline-offset: -3px; }

.ph .ph-quote {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    flex: 0 0 min(340px, 82vw);
    padding: 24px;
    border-radius: var(--ph-radius);
    background: var(--ph-surface);
    color: var(--ph-ink) !important;
    scroll-snap-align: start;
}

/* The template's style.css paints every blockquote: dark box, 50px !important padding,
   a white bar and 20px italic !important text, which left dark text on a dark box (BUG-072). */
.ph-quote blockquote { margin: 0; padding: 0 !important; background: none; text-align: left; overflow: visible; }
.ph-quote blockquote::after { content: none; }
.ph .ph-quote blockquote p { margin: 0; color: var(--ph-ink) !important; font-size: 1.05rem !important; font-style: normal; font-weight: 500; line-height: 1.55; }
.ph .ph-quote__by { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--ph-ink-soft) !important; font-size: .95rem; font-weight: 700; }

/* Close. */
.ph-close { position: relative; isolation: isolate; text-align: center; }

.ph-close::before {
    content: "";
    position: absolute;
    inset: 10% 0 0;
    z-index: -1;
    background: radial-gradient(640px 320px at 50% 60%, color-mix(in srgb, var(--ph-indigo-bright) 32%, transparent), transparent 70%);
    pointer-events: none;
}

.ph-close__inner { display: grid; justify-items: center; gap: 22px; }
.ph-close p { margin-inline: auto; }

.ph-close__title {
    margin: 0;
    color: var(--ph-on-dark);
    font-family: var(--ph-font);
    font-size: clamp(2.6rem, 1.4rem + 4.4vw, 4.8rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.02em;
}

/* App band: a panel on the photo's own field. */
.ph-app__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    padding: clamp(28px, 5vw, 64px);
    border-radius: 24px;
    background: radial-gradient(600px 400px at 85% 50%, var(--ph-band), var(--ph-band-deep) 70%);
    overflow: hidden;
}

.ph-app__copy { display: grid; gap: 20px; justify-items: start; }
.ph .ph-app__copy > p { margin: 0; max-width: 46ch; color: var(--ph-on-dark-soft) !important; font-size: 1.05rem; line-height: 1.55; }
.ph .ph-app__copy > .ph-app__note { font-size: .85rem; }

.ph-app__art { margin: -8% -10% -12% 0; }
.ph-app__art img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: radial-gradient(closest-side, #000 66%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 66%, transparent 100%);
    transition: transform .8s var(--ph-ease);
}

.ph-app__inner:hover .ph-app__art img { transform: rotate(-4deg) scale(1.03); }

/* Legacy styles paint <button> light grey; buttons here keep the link-button look. */
button.ph-btn { cursor: pointer; font-family: var(--ph-font); background-color: transparent; color: var(--ph-on-dark); }
button.ph-btn--primary { background-color: var(--ph-magenta); color: var(--ph-on-dark); }
button.ph-btn--primary:hover { background-color: var(--ph-magenta-hover); }
button.ph-btn--ghost:hover { background-color: color-mix(in srgb, var(--ph-on-dark) 6%, transparent); }

/* FAQ: native exclusive accordion. */
.ph-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    gap: clamp(32px, 6vw, 88px);
}

.ph-faq__item { border-top: 1px solid var(--ph-on-dark-line); }
.ph-faq__item:last-child { border-bottom: 1px solid var(--ph-on-dark-line); }

.ph-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    color: var(--ph-on-dark);
    font-size: 1.2rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.ph-faq__item summary::-webkit-details-marker { display: none; }

.ph .ph-faq__icon {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    border: 1px solid var(--ph-on-dark-line);
    border-radius: 50%;
    transition: transform .35s var(--ph-ease), background-color .2s ease;
}

.ph-faq__icon::before,
.ph-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    margin: -1px 0 0 -6px;
    border-radius: 2px;
    background: var(--ph-on-dark);
}

.ph-faq__icon::after { transform: rotate(90deg); }
.ph-faq__item[open] .ph-faq__icon { transform: rotate(45deg); background: var(--ph-magenta); border-color: transparent; }

.ph .ph-faq__item p {
    margin: 0;
    padding: 0 52px 24px 0;
    max-width: 62ch;
    color: var(--ph-on-dark-soft) !important;
    font-size: 1.02rem;
    line-height: 1.6;
    animation: ph-fade-up .4s var(--ph-ease) both;
}

/* ── Scroll reveals (progressive: browsers without view timelines show all) ─ */

@supports (animation-timeline: view()) {
    .ph-ledger__row,
    .ph-leader,
    .ph-app__inner,
    .ph-feature,
    .ph-close__inner {
        animation: ph-fade-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
    }
}

/* ── Keyframes ──────────────────────────────────────────────────────────── */

@keyframes ph-rise {
    from { opacity: 0; transform: translateY(.35em); filter: blur(6px); }
    to { opacity: 1; transform: none; filter: none; }
}

@keyframes ph-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes ph-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes ph-deal {
    from { opacity: 0; transform: translateY(26px) scale(.97); }
    to { opacity: 1; transform: none; }
}

@keyframes ph-float {
    from { translate: 0 -10px; }
    to { translate: 0 12px; }
}

@keyframes ph-art-in {
    from { opacity: 0; scale: .92; }
    to { opacity: 1; scale: 1; }
}

@keyframes ph-marquee {
    to { transform: translateX(-50%); }
}

@keyframes ph-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ph-amber) 60%, transparent); }
    70%, 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ph-amber) 0%, transparent); }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .ph-banner { display: block; min-height: 0; padding-top: 92px; }
    .ph-banner__art { position: relative; top: auto; right: auto; bottom: auto; width: 112%; height: auto; margin: 0 -6% -10%; transform: translateY(var(--ph-scroll, 0px)); }
    .ph-banner__art .ph-scene img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 70%, transparent 100%); }
    .ph-banner__inner,
    .ph-how__grid,
    .ph-features__grid,
    .ph-faq__grid,
    .ph-app__inner { grid-template-columns: minmax(0, 1fr); }
    .ph-banner__inner { gap: 32px; }
    .ph-banner__copy { max-width: none; }
    .ph-app__art { margin: 0 -10% -16%; order: -1; }

    .ph-how__intro { position: static; }

    .ph-lobby { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }

    .ph-table { min-height: 150px; }

    .ph-table.is-open { grid-column: 1 / -1; grid-row: auto; order: -1; }

    .ph-podium { grid-template-columns: minmax(0, 1fr); }
    .ph-leader + .ph-leader { border-left: 0; border-top: 1px solid var(--ph-on-dark-line); }
}

@media (max-width: 575px) {
    .ph-banner { padding-top: 84px; }
    /* A 16:9 crop on the TV and desk keeps the main event in the first screen. */
    .ph-banner__art { aspect-ratio: 16 / 9; overflow: hidden; }
    .ph-banner__art .ph-scene, .ph-banner__art .ph-scene img { height: 100%; }
    .ph-banner__art .ph-scene img { object-fit: cover; object-position: 55% 45%; }
    .ph-title { font-size: 2.5rem; }
    .ph-banner__copy { gap: 16px; }
    .ph .ph-offer__text { font-size: 1rem; }
    .ph-faq__item summary { font-size: 1.05rem; }
    .ph .ph-faq__item p { padding-right: 0; }

    /* A pair shares the row when both labels fit, else wraps: a label is never cut. */
    .ph-actions { gap: 8px; }
    .ph-actions .ph-btn { flex: 1 1 auto; padding: 0 14px; font-size: .92rem; white-space: nowrap; }
    .ph-actions .ph-btn--primary { flex-grow: 1.6; }

    .ph-lobby { gap: 10px; }
    .ph-table { padding: 18px; gap: 14px; min-height: 0; }
    .ph-table:not(.is-open) .ph-table__prize { display: none; }

    .ph-row__name b { white-space: normal; }
    .ph-table:not(.is-open) .ph-table__teaser { display: none; }

    .ph-ledger { padding: 4px 20px; }
    .ph-ledger__row { grid-template-columns: 1.8rem minmax(0, 1fr); grid-template-areas: "n step" ". text" ". fig"; row-gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .ph *,
    .ph *::before,
    .ph *::after,
    .ph-nav *,
    .ph-up,
    .ph-nav *::before,
    .ph-nav *::after,
    .ph-skip,
    .ph-foot *,
    .ph-foot *::before,
    .ph-foot *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    .ph-ticker__viewport { overflow-x: auto; }
    .ph-pops, .ph-scene__led, .ph-scene__screen { display: none; }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

@media (max-width: 359px) {
    /* 320px phones: a smaller logo keeps install, Join and the menu button on screen. */
    .ph-nav__logo { padding-right: 4px; }
    .ph-nav__logo img, .ph-nav.is-scrolled .ph-nav__logo img { height: 24px; }
}