/* ============================================================
   Bopster Party 3.0 — full game-show redesign
   Bold Kahoot-style energy: chunky controls, vivid phases,
   draining timer, streaks, podium ceremony.
   ============================================================ */
:root {
    color-scheme: dark;
    --party-bg: #0a0518;
    --party-panel: rgba(26, 18, 52, .82);
    --party-surface: rgba(255, 255, 255, .05);
    --party-surface-hover: rgba(255, 255, 255, .09);
    --party-border: rgba(255, 255, 255, .12);
    --party-border-strong: rgba(255, 255, 255, .22);
    --party-text: #f8f7ff;
    --party-muted: rgba(233, 228, 252, .68);
    --party-subtle: rgba(233, 228, 252, .45);
    --party-accent: #4de8ff;
    --party-accent-soft: rgba(77, 232, 255, .13);
    --party-violet: #9b5cff;
    --party-pink: #ff4fa3;
    --party-green: #55e6a5;
    --party-yellow: #ffd166;
    --party-red: #ff5d7e;
    --party-orange: #ff9a3d;
    --party-game-gradient: linear-gradient(135deg, #9b5cff 0%, #4de8ff 100%);
    --party-hot-gradient: linear-gradient(135deg, #ff4fa3 0%, #9b5cff 100%);
    --party-radius: 22px;
    --party-radius-small: 14px;
    --party-shadow: 0 24px 60px rgba(3, 0, 12, .5);
    --party-font-display: "Baloo 2", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --party-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.party-page {
    margin: 0;
    min-height: 100vh;
    color: var(--party-text);
    font-family: var(--party-font-body);
    background:
        radial-gradient(circle at 10% -5%, rgba(155, 92, 255, .30), transparent 34rem),
        radial-gradient(circle at 95% 8%, rgba(77, 232, 255, .22), transparent 36rem),
        radial-gradient(circle at 50% 105%, rgba(255, 79, 163, .18), transparent 40rem),
        linear-gradient(160deg, #0a0518 0%, #160d33 52%, #0b071f 100%);
    overflow-x: hidden;
    transition: background 1s ease;
}
/* faint grid */
body.party-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 72%);
}
/* floating music notes */
body.party-page::after {
    content: "♪   ♫   ✦   ♪";
    position: fixed;
    inset: 14% auto auto 4%;
    z-index: -1;
    white-space: pre;
    letter-spacing: 2.4rem;
    color: rgba(155, 92, 255, .17);
    font-size: clamp(2.8rem, 8vw, 7rem);
    animation: partyNotesFloat 9s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes partyNotesFloat { to { transform: translate3d(30px, -32px, 0) rotate(5deg); color: rgba(77, 232, 255, .15); } }

/* phase-tinted ambience while a game runs */
body[data-party-phase="countdown"] { background: radial-gradient(circle at 50% 0%, rgba(255, 209, 102, .16), transparent 36rem), radial-gradient(circle at 10% -5%, rgba(155,92,255,.30), transparent 34rem), radial-gradient(circle at 95% 8%, rgba(77,232,255,.22), transparent 36rem), linear-gradient(160deg, #0a0518, #1a0e38 55%, #0b071f); }
body[data-party-phase="year_guessing"], body[data-party-phase="bonus_guessing"] { background: radial-gradient(circle at 50% -8%, rgba(77, 232, 255, .20), transparent 36rem), radial-gradient(circle at 8% 100%, rgba(155, 92, 255, .24), transparent 36rem), radial-gradient(circle at 96% 90%, rgba(255, 79, 163, .16), transparent 34rem), linear-gradient(160deg, #0c0620, #150c34 55%, #0a0620); }
body[data-party-phase="reveal"] { background: radial-gradient(circle at 50% -6%, rgba(255, 209, 102, .22), transparent 38rem), radial-gradient(circle at 10% 100%, rgba(85, 230, 165, .14), transparent 34rem), linear-gradient(160deg, #0d0722, #190f3a 55%, #0b0722); }

button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; }
.party-hidden { display: none !important; }

.party-shell {
    width: min(1160px, calc(100% - 28px));
    margin: 0 auto;
    padding: 24px 0 60px;
    position: relative;
    z-index: 1;
}
.party-ambient { display: none; }
.party-glass {
    background: linear-gradient(150deg, rgba(34, 24, 66, .88), rgba(15, 10, 34, .86));
    border: 1px solid var(--party-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), var(--party-shadow);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.party-surface {
    background: var(--party-surface);
    border: 1px solid rgba(255,255,255,.08);
}

/* ============ Buttons — chunky arcade feel ============ */
.party-primary, .party-secondary, .party-danger {
    min-height: 50px;
    border-radius: 14px;
    padding: 0 20px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 800;
    font-size: .97rem;
    letter-spacing: .01em;
    transition: transform .12s ease, box-shadow .12s ease, background .16s ease, border-color .16s ease, filter .16s ease;
}
.party-primary {
    color: #fff;
    background: var(--party-game-gradient);
    box-shadow: 0 5px 0 rgba(23, 8, 54, .85), 0 16px 34px rgba(124, 92, 255, .28);
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.party-primary:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 7px 0 rgba(23, 8, 54, .85), 0 22px 42px rgba(124, 92, 255, .36); }
.party-primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 rgba(23, 8, 54, .85), 0 8px 18px rgba(124, 92, 255, .25); }
.party-secondary {
    color: var(--party-text);
    background: rgba(255,255,255,.07);
    border-color: var(--party-border);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
}
.party-secondary:hover:not(:disabled) { background: rgba(255,255,255,.11); border-color: var(--party-border-strong); transform: translateY(-1px); }
.party-secondary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.party-danger {
    color: #ffdce5;
    background: rgba(255, 93, 126, .13);
    border-color: rgba(255, 93, 126, .32);
    box-shadow: 0 4px 0 rgba(60, 4, 20, .5);
}
.party-danger:hover:not(:disabled) { background: rgba(255, 93, 126, .2); }
.party-danger:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(60,4,20,.5); }
.party-wide { width: 100%; }
.party-icon-button {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    border: 1px solid var(--party-border);
    background: rgba(255,255,255,.06);
    color: var(--party-muted);
    display: inline-grid;
    place-items: center;
    padding: 0;
    transition: .15s ease;
}
.party-icon-button:hover { color: #fff; background: rgba(255,255,255,.11); transform: translateY(-1px); }
.party-icon-button svg, .party-primary svg, .party-secondary svg, .party-danger svg { width: 18px; height: 18px; }

/* ============ Home ============ */
.party-home {
    max-width: 840px;
    margin: 34px auto 0;
    border-radius: 28px;
    padding: clamp(26px, 5vw, 46px);
    position: relative;
    overflow: hidden;
}
.party-home::before {
    content: "🎵";
    position: absolute;
    right: -14px;
    top: -30px;
    font-size: 9rem;
    opacity: .07;
    transform: rotate(14deg);
    pointer-events: none;
}
.party-home-main { display: flex; align-items: flex-start; gap: 20px; position: relative; }
.party-home-icon {
    width: 62px;
    height: 62px;
    border-radius: 19px;
    display: grid;
    place-items: center;
    flex: none;
    color: #fff;
    background: var(--party-game-gradient);
    box-shadow: 0 12px 30px rgba(124, 92, 255, .4), inset 0 1px 0 rgba(255,255,255,.3);
    animation: partyIconBob 3.4s ease-in-out infinite;
}
@keyframes partyIconBob { 50% { transform: translateY(-6px) rotate(-4deg); } }
.party-home-icon svg { width: 30px; height: 30px; }
.party-home-copy h1 {
    margin: 0;
    font-family: var(--party-font-display);
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    line-height: 1.02;
    letter-spacing: -.02em;
    font-weight: 800;
    background: linear-gradient(100deg, #fff 20%, #c9b8ff 55%, #8fe9ff 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.party-home-copy p {
    margin: 12px 0 0;
    max-width: 640px;
    color: var(--party-muted);
    font-size: 1.02rem;
    line-height: 1.6;
}
.party-home-actions { display: grid; gap: 12px; margin-top: 30px; position: relative; }
.party-home-action {
    width: 100%;
    min-height: 84px;
    border-radius: 18px;
    padding: 15px 18px;
    border: 1px solid var(--party-border);
    color: var(--party-text);
    background: rgba(255,255,255,.045);
    box-shadow: 0 5px 0 rgba(0,0,0,.28);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    text-align: left;
    transition: .16s ease;
}
.party-home-action:hover { background: var(--party-surface-hover); border-color: var(--party-border-strong); transform: translateY(-2px); }
.party-home-action:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }
.party-home-action.is-primary {
    background: linear-gradient(120deg, rgba(155, 92, 255, .24), rgba(77, 232, 255, .16));
    border-color: rgba(155, 92, 255, .4);
}
.party-home-action-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--party-game-gradient);
    box-shadow: 0 6px 16px rgba(124, 92, 255, .35);
}
.party-home-action-icon svg { width: 22px; height: 22px; }
.party-home-action strong { display: block; font-size: 1.08rem; font-weight: 800; }
.party-home-action small { display: block; margin-top: 4px; color: var(--party-muted); font-size: .85rem; line-height: 1.35; }
.party-home-action > svg { width: 19px; color: var(--party-subtle); }
.party-home-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.party-home-notes span { display: inline-flex; align-items: center; gap: 8px; color: var(--party-muted); font-size: .83rem; font-weight: 600; }
.party-home-notes svg { width: 16px; height: 16px; color: var(--party-accent); }

/* ============ Panels & form controls ============ */
.party-panel { border-radius: 24px; padding: clamp(22px, 4vw, 34px); }
.party-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.party-panel-head h2 { margin: 0; font-family: var(--party-font-display); font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -.01em; line-height: 1.05; }
.party-panel-head p { margin: 8px 0 0; color: var(--party-muted); font-size: .96rem; line-height: 1.5; }
.party-join-card { max-width: 700px; margin: 32px auto; }
.party-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.party-field { display: block; color: var(--party-text); font-size: .95rem; font-weight: 700; }
.party-field small { display: block; margin-top: 5px; color: var(--party-muted); line-height: 1.45; font-size: .84rem; font-weight: 450; }
.party-field-wide { width: 100%; }
.party-input {
    width: 100%;
    min-height: 52px;
    margin-top: 8px;
    border: 2px solid var(--party-border);
    border-radius: 14px;
    padding: 0 15px;
    color: #fff;
    background: rgba(6, 3, 18, .55);
    outline: none;
    font-size: 1.02rem;
    font-weight: 600;
    transition: .15s ease;
    appearance: none;
}
.party-input:focus { border-color: var(--party-accent); box-shadow: 0 0 0 4px rgba(77, 232, 255, .14); }
.party-input::placeholder { color: rgba(233,228,252,.35); font-weight: 400; }
input[type="search"]::-webkit-search-cancel-button { filter: invert(1); opacity: .55; }

/* ============ Setup wizard ============ */
.party-setup { max-width: 1040px; margin: 0 auto; border-radius: 26px; overflow: hidden; }
.party-setup-header { padding: 24px 26px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.party-setup-header .party-panel-head { margin-bottom: 18px !important; }
.party-setup-progress { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.party-step-pill {
    min-height: 46px;
    border: 1px solid transparent;
    border-radius: 13px;
    padding: 0 10px;
    color: var(--party-subtle);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .83rem;
    font-weight: 800;
    transition: .15s ease;
}
.party-step-pill svg { width: 16px; height: 16px; }
.party-step-pill.is-active { color: #fff; background: var(--party-game-gradient); box-shadow: 0 6px 18px rgba(124, 92, 255, .3); }
.party-step-pill.is-complete { color: #8ff0c6; background: rgba(85, 230, 165, .08); }
.party-step-panel { display: none; padding: clamp(24px, 4vw, 38px); min-height: 500px; }
.party-step-panel.is-active { display: block; animation: partyFadeIn .22s ease both; }
@keyframes partyFadeIn { from { opacity: 0; transform: translateY(6px); } }
.party-step-heading { max-width: 720px; margin: 0 0 24px; }
.party-step-heading .party-eyebrow { display: none; }
.party-step-heading h2 { margin: 0; font-family: var(--party-font-display); font-size: clamp(1.7rem, 3.4vw, 2.3rem); letter-spacing: -.01em; }
.party-step-heading p { margin: 9px 0 0; color: var(--party-muted); font-size: .96rem; line-height: 1.55; }
.party-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: #bfeeff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.party-eyebrow svg { width: 14px; height: 14px; }
.party-settings-stack { display: grid; gap: 16px; }
.party-control-group, .party-modal-section {
    border-radius: 18px;
    padding: 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}
.party-control-group.is-plain { padding: 0; border: 0; background: transparent; }
.party-control-copy strong { display: block; font-size: 1.02rem; font-weight: 800; }
.party-control-copy span { display: block; margin-top: 5px; color: var(--party-muted); font-size: .86rem; line-height: 1.45; }
.party-value-options { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.party-value-options button {
    min-height: 50px;
    border: 2px solid var(--party-border);
    border-radius: 13px;
    color: var(--party-muted);
    background: rgba(255,255,255,.04);
    font-family: var(--party-font-display);
    font-weight: 800;
    font-size: 1.05rem;
    transition: .14s ease;
}
.party-value-options button:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateY(-1px); }
.party-value-options button.is-selected { color: #fff; background: var(--party-game-gradient); border-color: transparent; box-shadow: 0 5px 0 rgba(23,8,54,.8), 0 12px 24px rgba(124,92,255,.28); }
.party-stepper-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.party-stepper { border-radius: 14px; padding: 13px; background: rgba(5, 2, 16, .45); border: 1px solid rgba(255,255,255,.08); }
.party-stepper > span { display: block; color: var(--party-muted); font-size: .82rem; font-weight: 700; margin-bottom: 10px; }
.party-stepper > div { display: grid; grid-template-columns: 40px minmax(0,1fr) 40px; gap: 8px; align-items: center; }
.party-stepper button {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 1px solid var(--party-border);
    background: rgba(255,255,255,.07);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
    transition: .13s ease;
}
.party-stepper button:hover { background: rgba(255,255,255,.13); }
.party-stepper button:active { transform: scale(.92); }
.party-stepper output { text-align: center; font-family: var(--party-font-display); font-size: 1.25rem; font-weight: 800; }

.party-setting-card { border-radius: 18px; padding: 18px; margin-top: 16px; }
.party-setting-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.party-setting-head strong { display: block; font-size: 1.02rem; font-weight: 800; }
.party-setting-head span { display: block; color: var(--party-muted); font-size: .86rem; margin-top: 5px; line-height: 1.45; }
.party-switch { position: relative; display: inline-flex; flex: none; }
.party-switch input { position: absolute; opacity: 0; }
.party-switch-track { width: 52px; height: 30px; border-radius: 999px; background: rgba(255,255,255,.16); padding: 3px; transition: .18s ease; }
.party-switch-track::after { content: ""; display: block; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: .2s cubic-bezier(.2,.8,.3,1.3); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.party-switch input:checked + .party-switch-track { background: var(--party-game-gradient); }
.party-switch input:checked + .party-switch-track::after { transform: translateX(22px); }
.party-segmented { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.party-radio-card { position: relative; cursor: pointer; }
.party-radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.party-radio-card > span {
    display: block;
    min-height: 96px;
    border-radius: 15px;
    border: 2px solid var(--party-border);
    padding: 15px;
    background: rgba(255,255,255,.035);
    transition: .15s ease;
}
.party-radio-card:hover > span { border-color: var(--party-border-strong); }
.party-radio-card input:checked + span { border-color: var(--party-accent); background: rgba(77, 232, 255, .1); box-shadow: 0 0 0 3px rgba(77, 232, 255, .12); }
.party-radio-card b { display: block; font-size: .97rem; }
.party-radio-card small { display: block; margin-top: 6px; color: var(--party-muted); font-size: .8rem; line-height: 1.4; }
.party-radio-card.is-locked { opacity: .5; cursor: not-allowed; }
.party-bopstarr-brand { display: flex !important; align-items: center; gap: 8px; min-height: 23px; }
.party-bopstarr-brand img:first-child { width: 24px; height: 24px; object-fit: contain; }
.party-bopstarr-brand img:last-child { height: 17px; max-width: 110px; object-fit: contain; }
.party-time-control { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin-top: 16px; }
.party-range { width: 100%; height: 8px; border-radius: 999px; background: rgba(255,255,255,.15); appearance: none; outline: none; }
.party-range::-webkit-slider-thumb { appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 6px solid var(--party-violet); box-shadow: 0 3px 12px rgba(0,0,0,.4); cursor: grab; }
.party-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 6px solid var(--party-violet); cursor: grab; }
.party-output { min-width: 62px; text-align: center; padding: 9px 10px; border-radius: 11px; background: rgba(255,255,255,.07); font-family: var(--party-font-display); font-weight: 800; font-size: 1.05rem; }

/* ============ Music selector ============ */
.party-source-card {
    width: 100%;
    min-height: 76px;
    border-radius: 16px;
    border: 2px solid var(--party-border);
    padding: 12px 14px;
    color: #fff;
    text-align: left;
    background: rgba(255,255,255,.04);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: .15s ease;
}
.party-source-card:hover { background: rgba(255,255,255,.08); transform: translateY(-1px); }
.party-source-card.is-selected { border-color: var(--party-accent); background: rgba(77, 232, 255, .09); }
.party-source-icon { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; flex: none; color: #fff; background: var(--party-game-gradient); }
.party-source-card strong { display: block; font-size: .98rem; }
.party-source-card span { display: block; color: var(--party-muted); margin-top: 3px; line-height: 1.35; font-size: .8rem; }
.party-playlist-toolbar { margin: 14px 0 10px; }
.party-search-box {
    min-height: 52px;
    border-radius: 14px;
    padding: 0 14px;
    border: 2px solid var(--party-border);
    background: rgba(6, 3, 18, .5);
    display: flex;
    align-items: center;
    gap: 10px;
}
.party-search-box:focus-within { border-color: var(--party-accent); box-shadow: 0 0 0 4px rgba(77, 232, 255, .12); }
.party-search-box svg { width: 18px; color: var(--party-subtle); }
.party-search-box input { width: 100%; height: 48px; border: 0; outline: 0; color: #fff; background: transparent; font-size: 1rem; }
.party-search-box input::placeholder { color: rgba(233,228,252,.36); }
.party-playlist-grid { display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 470px; overflow: auto; padding: 2px 4px 2px 0; }
.party-playlist-grid::-webkit-scrollbar, .party-history-list::-webkit-scrollbar, .party-custom-select-menu::-webkit-scrollbar { width: 7px; }
.party-playlist-grid::-webkit-scrollbar-thumb, .party-history-list::-webkit-scrollbar-thumb, .party-custom-select-menu::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255,255,255,.16); }
.party-playlist-card {
    min-height: 78px;
    border: 2px solid rgba(255,255,255,.08);
    border-radius: 15px;
    padding: 10px;
    background: rgba(255,255,255,.03);
    color: #fff;
    text-align: left;
    display: grid;
    grid-template-columns: 58px minmax(0,1fr) auto;
    align-items: center;
    gap: 13px;
    transition: .15s ease;
}
.party-playlist-card:hover { background: rgba(255,255,255,.07); border-color: var(--party-border-strong); transform: translateY(-1px); }
.party-playlist-card.is-selected { background: rgba(77, 232, 255, .09); border-color: var(--party-accent); box-shadow: 0 0 0 3px rgba(77, 232, 255, .1); }
.party-playlist-art { width: 58px; height: 58px; border-radius: 12px; overflow: hidden; position: relative; display: grid; place-items: center; color: #baf4ff; background: var(--party-accent-soft); }
.party-playlist-art img { width: 100%; height: 100%; object-fit: cover; }
.party-playlist-art > svg { width: 22px; }
.party-playlist-check { width: 28px; height: 28px; border-radius: 50%; display: none; place-items: center; color: #07141d; background: var(--party-accent); }
.party-playlist-check svg { width: 15px; }
.party-playlist-card.is-selected .party-playlist-check { display: grid; }
.party-playlist-copy { min-width: 0; }
.party-playlist-copy strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .96rem; }
.party-playlist-copy span { display: block; margin-top: 5px; color: var(--party-muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ Designs & review ============ */
.party-design-selector { border-radius: 20px; padding: 16px; overflow: hidden; }
.party-design-selector-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.party-design-selector-head strong, .party-design-selector-head span { display: block; }
.party-design-selector-head > div > span { color: var(--party-muted); font-size: .8rem; margin-top: 3px; }
.party-selection-count { flex: 0 0 auto; padding: 7px 11px; border-radius: 999px; background: rgba(77, 232, 255, .13); color: #bdeeff; font-size: .75rem; font-weight: 800; }
.party-design-categories { display: flex !important; overflow-x: auto; gap: 8px; padding-bottom: 12px; scrollbar-width: none; }
.party-design-categories::-webkit-scrollbar { display: none; }
.party-category-pill { flex: 0 0 auto; white-space: nowrap; min-height: 40px; border: 2px solid var(--party-border); border-radius: 12px; padding: 0 14px; color: var(--party-muted); background: rgba(255,255,255,.04); font-weight: 800; font-size: .83rem; transition: .14s ease; }
.party-category-pill.is-active { color: #fff; background: var(--party-game-gradient); border-color: transparent; }
.party-design-grid { display: flex !important; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 14px; scroll-snap-type: x proximity; scrollbar-color: rgba(77, 232, 255, .35) transparent; }
.party-design-card { flex: 0 0 134px; width: 134px; height: 134px; border: 3px solid transparent; border-radius: 18px; padding: 0; scroll-snap-align: start; position: relative; overflow: hidden; transform-origin: center; background: rgba(255,255,255,.05); transition: .16s ease; }
.party-design-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.party-design-card:hover { transform: translateY(-4px) rotate(-1deg); border-color: rgba(255,255,255,.3); }
.party-design-card.is-selected { border-color: var(--party-accent) !important; box-shadow: 0 0 0 4px rgba(77, 232, 255, .2), 0 14px 32px rgba(20, 6, 50, .5); }
.party-design-check { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%; display: none; place-items: center; color: #07141d; background: var(--party-accent); }
.party-design-card.is-selected .party-design-check { display: grid; }
.party-shuffle-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(145deg, rgba(155, 92, 255, .3), rgba(77, 232, 255, .24)) !important; }
.party-shuffle-card > div { display: flex; align-items: center; gap: 6px; }
.party-design-shuffle-art { font-size: 1.6rem; display: flex; align-items: center; gap: 5px; color: #fff; }
.party-shuffle-card strong { font-size: .84rem; color: #fff; }
.party-shuffle-card svg { width: 24px; }
.party-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.party-review-item { min-height: 82px; border-radius: 15px; padding: 14px; }
.party-review-item span { display: block; color: var(--party-muted); font-size: .8rem; font-weight: 700; }
.party-review-item strong { display: block; margin-top: 7px; font-size: 1rem; }
.party-setup-footer { padding: 16px 26px max(18px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(9, 4, 24, .8); border-top: 1px solid rgba(255,255,255,.07); }
.party-setup-footer-right { display: flex; gap: 10px; margin-left: auto; }

/* ============ Room chrome ============ */
.party-room-view { animation: partyFadeIn .25s ease both; }
.party-room-topbar { min-height: 76px; border-radius: 22px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.party-room-identity { display: flex; align-items: center; gap: 12px; }
.party-mini-mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--party-game-gradient); box-shadow: 0 8px 20px rgba(124, 92, 255, .35); }
.party-mini-mark svg { width: 21px; }
.party-room-label { display: block; color: var(--party-subtle); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.party-room-code { margin-top: 2px; font-family: var(--party-font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: .14em; }
.party-room-actions { display: flex; align-items: center; gap: 8px; }
.party-connection { min-height: 44px; border-radius: 13px; padding: 0 13px; border: 1px solid var(--party-border); background: rgba(255,255,255,.05); display: inline-flex; align-items: center; gap: 8px; color: var(--party-muted); font-size: .78rem; font-weight: 700; }
.party-connection-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--party-green); box-shadow: 0 0 10px rgba(85, 230, 165, .5); }
.party-connection.is-okay .party-connection-dot { background: var(--party-yellow); box-shadow: 0 0 10px rgba(255, 209, 102, .5); }
.party-connection.is-poor .party-connection-dot, .party-connection.is-offline .party-connection-dot { background: var(--party-red); box-shadow: none; }
.party-room-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; align-items: start; }

/* ============ Stage ============ */
.party-stage { min-height: 660px; border-radius: 24px; padding: 22px; overflow: hidden; position: relative; transition: box-shadow .3s ease; }
.party-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% -10%, rgba(155, 92, 255, .16), transparent 55%);
    opacity: 0;
    transition: opacity .6s ease;
}
body[data-party-phase="countdown"] .party-stage::before,
body[data-party-phase="year_guessing"] .party-stage::before,
body[data-party-phase="bonus_guessing"] .party-stage::before,
body[data-party-phase="reveal"] .party-stage::before { opacity: 1; }
body[data-party-phase="reveal"] .party-stage::before { background: radial-gradient(ellipse at 50% -10%, rgba(255, 209, 102, .2), transparent 55%); }
.party-stage.is-lock-pulse { animation: partyStagePulse .55s ease; }
@keyframes partyStagePulse {
    30% { box-shadow: inset 0 0 0 3px rgba(85, 230, 165, .65), 0 0 44px rgba(85, 230, 165, .3), var(--party-shadow); }
}
.party-phase-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; position: relative; z-index: 2; }
.party-phase-copy { min-width: 0; }
.party-phase-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; border-radius: 999px; padding: 0 12px; color: #bfeeff; background: var(--party-accent-soft); border: 1px solid rgba(77, 232, 255, .2); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.party-phase-pill svg { width: 14px; height: 14px; }
.party-phase-pill.is-countdown { color: #ffe9b3; background: rgba(255, 209, 102, .13); border-color: rgba(255, 209, 102, .3); }
.party-phase-pill.is-year_guessing { color: #d9c6ff; background: rgba(155, 92, 255, .15); border-color: rgba(155, 92, 255, .35); }
.party-phase-pill.is-bonus_guessing { color: #ffc7e1; background: rgba(255, 79, 163, .13); border-color: rgba(255, 79, 163, .32); }
.party-phase-pill.is-reveal { color: #b8ffd9; background: rgba(85, 230, 165, .13); border-color: rgba(85, 230, 165, .3); }
.party-phase-pill.is-finished { color: #ffe9b3; background: rgba(255, 209, 102, .13); border-color: rgba(255, 209, 102, .3); }
.party-phase-header h1 { margin: 13px 0 5px; font-family: var(--party-font-display); font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: -.01em; line-height: 1.05; }
.party-phase-header p { margin: 0; color: var(--party-muted); font-size: .92rem; line-height: 1.45; }
.party-phase-header > div:last-child { text-align: right; flex: none; }
.party-phase-header > div:last-child strong { display: block; margin-top: 3px; font-family: var(--party-font-display); font-size: 1.15rem; font-weight: 800; }
.party-progress { height: 6px; border-radius: 999px; margin-top: 16px; overflow: hidden; background: rgba(255,255,255,.09); position: relative; z-index: 2; }
.party-progress b { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--party-game-gradient); box-shadow: 0 0 12px rgba(124, 92, 255, .6); transition: width .4s ease; }
.party-stage-center { min-height: 490px; padding: 26px 0 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; z-index: 2; }
.party-host-controls { min-height: 48px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 12px; position: relative; z-index: 2; }

/* ---- game timer bar ---- */
.party-game-timer { width: 100%; margin-top: 14px; display: flex; align-items: center; gap: 13px; position: relative; z-index: 2; animation: partyFadeIn .25s ease both; }
.party-game-timer-track { flex: 1; height: 16px; border-radius: 999px; background: rgba(4, 2, 14, .6); border: 1px solid rgba(255,255,255,.1); overflow: hidden; box-shadow: inset 0 2px 6px rgba(0,0,0,.45); }
.party-game-timer-fill { height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #4de8ff, #9b5cff); box-shadow: 0 0 14px rgba(124, 92, 255, .55); transition: width .12s linear, background .4s ease; }
.party-game-timer.is-warn .party-game-timer-fill { background: linear-gradient(90deg, #ffd166, #ff9a3d); box-shadow: 0 0 14px rgba(255, 154, 61, .55); }
.party-game-timer.is-critical .party-game-timer-fill { background: linear-gradient(90deg, #ff5d7e, #ff4fa3); box-shadow: 0 0 18px rgba(255, 79, 130, .7); }
.party-game-timer.is-critical { animation: partyTimerShake .5s ease-in-out infinite; }
@keyframes partyTimerShake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.party-game-timer-time { min-width: 58px; font-family: var(--party-font-display); font-size: 1.5rem; font-weight: 800; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.party-game-timer.is-critical .party-game-timer-time { color: #ff8fab; animation: partyTimeBlink .5s ease-in-out infinite; }
@keyframes partyTimeBlink { 50% { transform: scale(1.18); } }
/* full-stage urgency glow in the final seconds */
.party-stage.is-time-critical { animation: partyStageHeartbeat 1s ease-in-out infinite; }
@keyframes partyStageHeartbeat {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 93, 126, 0), inset 0 1px 0 rgba(255,255,255,.07), var(--party-shadow); }
    50% { box-shadow: inset 0 0 0 2px rgba(255, 93, 126, .55), inset 0 0 60px rgba(255, 79, 130, .12), var(--party-shadow); }
}

.party-sound-gate, .party-guess-panel, .party-waiting-card { width: min(520px, 100%); border-radius: 20px; padding: 24px; }
.party-sound-gate { position: relative; overflow: hidden; border-color: rgba(77, 232, 255, .26); background: linear-gradient(145deg, rgba(52, 30, 96, .5), rgba(77, 232, 255, .1)); }
.party-sound-gate::before { content: "🎧"; position: absolute; right: -8px; top: -22px; font-size: 7rem; opacity: .08; transform: rotate(12deg); }
.party-sound-icon { width: 58px; height: 58px; margin: 0 auto 15px; border-radius: 17px; display: grid; place-items: center; color: #fff; background: var(--party-game-gradient); box-shadow: 0 10px 26px rgba(124, 92, 255, .4); animation: partySoundBounce 2.2s ease-in-out infinite; }
@keyframes partySoundBounce { 50% { transform: translateY(-5px) rotate(-4deg); } }
.party-sound-gate h2, .party-waiting-card h2 { margin: 0; font-family: var(--party-font-display); font-size: 1.65rem; letter-spacing: -.01em; }
.party-sound-gate p, .party-waiting-card p { margin: 9px auto 18px; max-width: 440px; color: var(--party-muted); line-height: 1.5; font-size: .92rem; }
.party-waiting-card { border-color: rgba(85, 230, 165, .22); }
.party-lock-animation { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; color: #052012; background: var(--party-green); box-shadow: 0 0 0 0 rgba(85, 230, 165, .5); animation: partyLockRing 1.8s ease-out infinite; }
@keyframes partyLockRing { 70% { box-shadow: 0 0 0 16px rgba(85, 230, 165, 0); } 100% { box-shadow: 0 0 0 0 rgba(85, 230, 165, 0); } }

/* ---- countdown: floats over the card, never collides with it ---- */
.party-countdown {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    z-index: 6;
    margin: 0;
    width: 140px;
    height: 140px;
    border-radius: 44px;
    display: grid;
    place-items: center;
    font-family: var(--party-font-display);
    font-size: 4rem;
    font-weight: 800;
    color: #fff;
    background: var(--party-game-gradient);
    box-shadow: 0 0 0 12px rgba(124, 92, 255, .1), 0 22px 55px rgba(30, 8, 70, .55), inset 0 2px 0 rgba(255,255,255,.3);
    text-shadow: 0 3px 8px rgba(0,0,0,.3);
    animation: partyPop .3s ease both;
}
.party-countdown[data-beat="1"] { background: var(--party-hot-gradient); }
.party-countdown[data-beat="0"] { background: linear-gradient(135deg, #55e6a5, #1f9d63); font-size: 2.6rem; letter-spacing: .02em; }
.party-countdown.is-beating { animation: partyCountdownBeat .45s cubic-bezier(.2,.8,.2,1); }
@keyframes partyPop { from { transform: scale(.85); opacity: 0; } }
@keyframes partyCountdownBeat { 45% { transform: scale(1.2) rotate(2.5deg); box-shadow: 0 0 0 28px rgba(155, 92, 255, .07), 0 28px 66px rgba(124, 92, 255, .45); } }

/* ---- the card ---- */
.party-card-wrap { width: min(320px, 78vw); aspect-ratio: 1; perspective: 1400px; margin: 0 auto 16px; position: relative; animation: partyCardFloat 5s ease-in-out infinite; }
@keyframes partyCardFloat { 50% { transform: translateY(-8px); } }
.party-card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.party-card.is-flipped { transform: rotateY(180deg); }
.party-card-face { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; backface-visibility: hidden; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 26px 60px rgba(2, 0, 12, .5); }
.party-card-front { display: grid; place-items: center; background-image: linear-gradient(145deg, #3b2a72, #14264d); }
.party-card-back { transform: rotateY(180deg); display: grid; place-items: center; background-image: linear-gradient(145deg, #1c2c50, #41296b); }
body[data-party-phase="year_guessing"] .party-card-face, body[data-party-phase="bonus_guessing"] .party-card-face, body[data-party-phase="countdown"] .party-card-face { box-shadow: 0 0 0 2px rgba(124, 92, 255, .35), 0 0 50px rgba(124, 92, 255, .3), 0 26px 60px rgba(2,0,12,.5); }
body[data-party-phase="reveal"] .party-card-face { box-shadow: 0 0 0 2px rgba(255, 209, 102, .45), 0 0 60px rgba(255, 209, 102, .3), 0 26px 60px rgba(2,0,12,.5); }
.party-card-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0,0,0,.02), rgba(0,0,0,.16)); }
.party-card-front-content { position: relative; z-index: 2; width: 52%; aspect-ratio: 1; border-radius: 24px; display: grid; place-items: center; background: rgba(8, 4, 22, .4); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(9px); }
.party-card-front-content svg { width: 48px; height: 48px; }
.party-equalizer { display: flex; height: 34px; align-items: end; gap: 5px; margin-top: 10px; }
.party-equalizer i { display: block; width: 5px; border-radius: 99px; background: #fff; animation: partyBars .8s ease-in-out infinite alternate; }
.party-equalizer i:nth-child(1) { height: 35%; }.party-equalizer i:nth-child(2) { height: 75%; animation-delay: -.3s; }.party-equalizer i:nth-child(3) { height: 48%; animation-delay: -.55s; }.party-equalizer i:nth-child(4) { height: 90%; animation-delay: -.18s; }.party-equalizer i:nth-child(5) { height: 45%; animation-delay: -.7s; }
@keyframes partyBars { to { height: 20%; } }
.party-card-back-content { position: relative; z-index: 2; width: 84%; padding: 18px; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.party-card-year { font-family: var(--party-font-display); font-size: clamp(3.6rem, 12vw, 5.6rem); line-height: .9; letter-spacing: -.04em; font-weight: 800; }
.party-card-title { margin-top: 16px; font-size: clamp(1.2rem, 3.6vw, 1.8rem); line-height: 1.1; font-weight: 800; }
.party-card-artist { margin-top: 7px; color: rgba(255,255,255,.78); font-size: .98rem; }

/* ---- year guessing ---- */
.party-guess-panel { border-color: rgba(155, 92, 255, .3); background: linear-gradient(160deg, rgba(52, 30, 96, .45), rgba(20, 10, 45, .5)); }
.party-guess-year { margin-bottom: 24px; font-family: var(--party-font-display); font-size: clamp(4.4rem, 15vw, 6.6rem); line-height: .9; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(100deg, #fff, #c9b8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.party-guess-limits { display: flex; justify-content: space-between; margin-top: 8px; color: var(--party-subtle); font-size: .75rem; font-weight: 700; }
.party-year-result { width: min(600px,100%); border-radius: 16px; padding: 13px 15px; display: flex; align-items: center; justify-content: center; gap: 11px; margin: 0 auto 14px; background: rgba(85, 230, 165, .1); border: 1px solid rgba(85, 230, 165, .22); }
.party-year-result svg { width: 18px; color: var(--party-green); }
.party-year-result strong { display: block; font-size: .95rem; }
.party-year-result span { display: block; color: var(--party-muted); font-size: .8rem; margin-top: 2px; }
.party-free-form { width: min(560px,100%); display: grid; gap: 11px; }
.party-free-form .party-input { margin-top: 0; }

/* ---- multiple choice: Kahoot-style shape buttons ---- */
.party-choice-grid { width: min(680px,100%); display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.party-choice-button {
    position: relative;
    min-height: 92px;
    border: 0;
    border-radius: 18px;
    color: #fff;
    text-align: left;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 18px 36px rgba(2, 0, 12, .4);
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
    animation: partyChoiceIn .35s cubic-bezier(.2,.8,.3,1.15) both;
    transition: transform .13s ease, box-shadow .13s ease, filter .15s ease, opacity .2s ease;
}
.party-choice-button:nth-child(1) { background: linear-gradient(135deg, #ff5d7e, #d62355); }
.party-choice-button:nth-child(2) { background: linear-gradient(135deg, #38b6ff, #1368ce); animation-delay: .06s; }
.party-choice-button:nth-child(3) { background: linear-gradient(135deg, #ffd166, #e08c00); animation-delay: .12s; }
.party-choice-button:nth-child(4) { background: linear-gradient(135deg, #55e6a5, #1f9d63); animation-delay: .18s; }
.party-choice-button:hover:not(:disabled) { transform: translateY(-3px) scale(1.015); filter: brightness(1.1); }
.party-choice-button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 8px 18px rgba(2,0,12,.4); }
.party-choice-button:disabled { opacity: .42; filter: saturate(.6); }
.party-choice-button.is-chosen { opacity: 1; filter: none; outline: 3px solid rgba(255,255,255,.85); outline-offset: 2px; animation: partyChosenPulse 1.4s ease-in-out infinite; }
@keyframes partyChosenPulse { 50% { outline-color: rgba(255,255,255,.35); } }
.party-choice-shape { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.45rem; background: rgba(0, 0, 0, .25); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.party-choice-copy { min-width: 0; }
.party-choice-copy strong { display: block; font-size: 1rem; font-weight: 800; line-height: 1.2; }
.party-choice-copy > span { display: block; color: rgba(255,255,255,.85); margin-top: 4px; font-size: .82rem; }
@keyframes partyChoiceIn { from { opacity: 0; transform: translateY(16px) scale(.95); } }

/* ---- tension feed ---- */
.party-tension-feed { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 15px; width: 100%; }
.party-tension-player { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid transparent; color: var(--party-muted); font-size: .78rem; transition: .18s ease; }
.party-tension-player > span { display: block; min-width: 0; }
.party-tension-player b, .party-tension-player small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-tension-player b { font-size: .78rem; color: inherit; }
.party-tension-player small { margin-top: 2px; font-size: .66rem; color: var(--party-subtle); }
.party-tension-player svg { width: 16px; height: 16px; flex: none; }
.party-tension-player.is-locked { color: #d9fbff; background: linear-gradient(100deg, rgba(155, 92, 255, .2), rgba(77, 232, 255, .16)); border-color: rgba(77, 232, 255, .25); animation: partyLockPop .35s ease; }
.party-tension-player.is-locked small { color: rgba(217, 251, 255, .72); }
@keyframes partyLockPop { 50% { transform: scale(1.06); } }

/* ---- personal result: your outcome takes the spotlight ---- */
.party-my-result {
    width: min(660px, 100%);
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 20px;
    padding: 16px 18px;
    margin: 0 auto 12px;
    text-align: left;
    border: 1px solid transparent;
    animation: partyMyResultIn .55s cubic-bezier(.2,.8,.3,1.25) both;
}
@keyframes partyMyResultIn { from { opacity: 0; transform: translateY(14px) scale(.94); } }
.party-my-result.is-correct {
    background: linear-gradient(120deg, rgba(85, 230, 165, .22), rgba(77, 232, 255, .1));
    border-color: rgba(85, 230, 165, .45);
    box-shadow: 0 0 36px rgba(85, 230, 165, .16);
}
.party-my-result.is-wrong {
    background: linear-gradient(120deg, rgba(255, 93, 126, .2), rgba(255, 79, 163, .07));
    border-color: rgba(255, 93, 126, .4);
    box-shadow: 0 0 30px rgba(255, 93, 126, .1);
}
.party-my-result-icon {
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    color: #052012;
    background: var(--party-green);
    box-shadow: 0 8px 22px rgba(85, 230, 165, .35), inset 0 1px 0 rgba(255,255,255,.35);
}
.party-my-result.is-wrong .party-my-result-icon { color: #38030f; background: var(--party-red); box-shadow: 0 8px 22px rgba(255, 93, 126, .3), inset 0 1px 0 rgba(255,255,255,.3); }
.party-my-result-main { min-width: 0; flex: 1; }
.party-my-result-main strong { display: block; font-family: var(--party-font-display); font-size: 1.5rem; line-height: 1.05; letter-spacing: -.01em; }
.party-my-result-main span { display: block; margin-top: 5px; color: var(--party-muted); font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party-my-result-stats { flex: none; text-align: right; }
.party-my-result-stats b { display: block; font-family: var(--party-font-display); font-size: 1.6rem; line-height: 1; color: #7dffb8; }
.party-my-result.is-wrong .party-my-result-stats b { color: var(--party-subtle); }
.party-my-result-stats > span { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .82rem; font-weight: 800; color: var(--party-muted); }
.party-my-result-trend { font-size: .72rem; padding: 2px 7px; border-radius: 999px; }
.party-my-result-trend.is-up { color: #7dffb8; background: rgba(85, 230, 165, .14); }
.party-my-result-trend.is-down { color: #ff9db3; background: rgba(255, 93, 126, .14); }

/* ---- group results: secondary, smaller, quieter ---- */
.party-result-summary { width: min(660px,100%); opacity: .94; }
.party-result-summary .party-result-winner { padding: 9px 12px; border-radius: 12px; }
.party-result-summary .party-result-winner strong { font-size: .85rem; font-weight: 700; }
.party-result-summary .party-result-winner span { font-size: .74rem; }
.party-result-summary .party-result-guess { padding: 8px 9px; font-size: .8rem; }
.party-result-summary .party-result-guess small { font-size: .66rem; }
.party-year-result { padding: 9px 12px; font-size: .85rem; }
.party-year-result strong { font-size: .85rem; }
.party-year-result span { font-size: .74rem; }
.party-result-winner { margin-top: 9px; border-radius: 15px; padding: 13px 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); text-align: left; animation: partyFadeIn .3s ease both; }
.party-result-winner strong { display: block; font-size: .94rem; }
.party-result-winner span { display: block; margin-top: 4px; color: var(--party-muted); font-size: .8rem; line-height: 1.4; }
.party-result-winner.is-winner { border-color: rgba(255, 209, 102, .35); background: linear-gradient(110deg, rgba(255, 209, 102, .14), rgba(155, 92, 255, .13)); }
.party-answer-reveal { background: linear-gradient(110deg, rgba(52, 30, 96, .55), rgba(77, 232, 255, .12)) !important; border-color: rgba(155, 92, 255, .3) !important; }
.party-result-guess-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 9px; }
.party-result-guess { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 7px; align-items: center; padding: 11px; border-radius: 13px; background: rgba(255,255,255,.045); color: var(--party-muted); }
.party-result-guess.is-winner { background: linear-gradient(105deg, rgba(255, 209, 102, .18), rgba(85, 230, 165, .14)); color: #fff; }
.party-result-guess svg { width: 17px; }
.party-result-guess small { grid-column: 2/-1; font-size: .7rem; color: var(--party-subtle); }

/* ============ Side panel ============ */
.party-side { border-radius: 24px; padding: 15px; position: sticky; top: 16px; }
.party-invite-card { border-radius: 17px; padding: 14px; text-align: center; }
.party-qr { width: min(170px, 100%); height: auto; border-radius: 14px; background: #fff; padding: 8px; display: block; margin: 0 auto 11px; }
.party-invite-code { font-family: var(--party-font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: .15em; }
.party-side-section { margin-top: 15px; }
.party-side-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.party-side-heading h3 { margin: 0; font-size: .95rem; font-weight: 800; }
.party-side-heading span { color: var(--party-muted); font-size: .74rem; font-weight: 600; }
.party-readiness { border-radius: 15px; padding: 12px; display: flex; align-items: center; gap: 11px; }
.party-readiness-lights { display: flex; gap: 5px; }
.party-readiness-lights i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.15); }
.party-readiness-lights i.on { background: var(--party-game-gradient); box-shadow: 0 0 12px rgba(124, 92, 255, .7); }
.party-readiness strong { display: block; font-size: .83rem; }
.party-readiness span { display: block; color: var(--party-muted); font-size: .7rem; margin-top: 2px; }

/* leaderboard */
.party-player-list { display: grid; gap: 7px; }
.party-player-row { border-radius: 14px; padding: 10px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; animation: partyPlayerIn .3s ease both; animation-delay: var(--player-delay, 0ms); transition: border-color .2s ease, background .2s ease; }
.party-player-row.is-locked { border-color: rgba(77, 232, 255, .25); }
.party-avatar { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: .82rem; font-weight: 800; color: #150826; background: var(--party-game-gradient); position: relative; }
.party-avatar-dot { position: absolute; width: 10px; height: 10px; right: -2px; bottom: -2px; border-radius: 50%; background: var(--party-green); border: 2px solid #17102f; }
.party-avatar-dot.offline { background: rgba(255,255,255,.3); }
.party-rank-badge { position: absolute; left: -5px; top: -7px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: .62rem; font-weight: 800; color: #fff; background: #2b1d52; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.party-rank-badge.is-rank-1 { background: linear-gradient(135deg, #ffd166, #e08c00); color: #3a2500; font-size: .78rem; }
.party-rank-badge.is-rank-2 { background: linear-gradient(135deg, #e8ecf5, #9aa5bd); color: #2c3345; font-size: .78rem; }
.party-rank-badge.is-rank-3 { background: linear-gradient(135deg, #f0a35e, #b06a28); color: #3a2000; font-size: .78rem; }
.party-player-main { min-width: 0; }
.party-player-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.party-player-name strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .86rem; font-weight: 700; }
.party-player-badge { border-radius: 999px; padding: 2px 6px; font-size: .55rem; font-weight: 800; letter-spacing: .04em; background: rgba(155, 92, 255, .2); color: #ddd0ff; }
.party-player-status { margin-top: 3px; color: var(--party-muted); font-size: .68rem; display: flex; align-items: center; gap: 4px; }
.party-player-status svg { width: 12px; height: 12px; }
.party-player-score { text-align: right; position: relative; }
.party-player-score strong { display: block; font-family: var(--party-font-display); font-size: 1.1rem; font-weight: 800; }
.party-player-score span { display: block; color: var(--party-subtle); font-size: .6rem; font-weight: 600; }
.party-player-row.score-changed .party-player-score strong { animation: partyScorePop .7s cubic-bezier(.2,.8,.3,1.3); color: #aeeaff; }
@keyframes partyScorePop { 45% { transform: scale(1.5) rotate(-4deg); } }
.party-score-delta { position: absolute; top: -8px; right: 0; font-family: var(--party-font-display); font-size: .85rem; font-weight: 800; color: #7dffb8; text-shadow: 0 2px 8px rgba(0,0,0,.5); animation: partyDeltaFloat 1.5s ease-out forwards; pointer-events: none; }
@keyframes partyDeltaFloat { 15% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }
.party-streak { font-size: .68rem; font-weight: 800; padding: 3px 7px; border-radius: 999px; background: rgba(255, 154, 61, .16); color: #ffc19c; border: 1px solid rgba(255, 154, 61, .25); animation: partyStreakFlicker 1.2s ease-in-out infinite; }
@keyframes partyStreakFlicker { 50% { background: rgba(255, 154, 61, .26); } }
.party-kick { border: 0; background: transparent; color: rgba(255, 93, 126, .8); padding: 4px; margin-left: 3px; }
@keyframes partyPlayerIn { from { opacity: .4; transform: translateX(6px); } }
.party-history-list { display: grid; gap: 6px; max-height: 190px; overflow: auto; }
.party-history-row { border-radius: 13px; padding: 9px 10px; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 9px; text-align: left; }
.party-history-number { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--party-game-gradient); font-size: .72rem; font-weight: 800; }
.party-history-row strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; }
.party-history-row span { display: block; margin-top: 2px; color: var(--party-muted); font-size: .65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party-empty { color: var(--party-muted); text-align: center; padding: 18px; font-size: .82rem; }
.party-public-empty { font-size: .92rem; padding: 26px 18px; }
.party-guess-panel.is-countdown-ready { border-style: dashed; opacity: .88; animation: partyGetReady 1.6s ease-in-out infinite; }
@keyframes partyGetReady { 50% { border-color: rgba(255, 209, 102, .55); } }

/* ============ Podium & finished ============ */
.party-podium { width: min(600px,100%); display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 22px auto 14px; }
.party-podium-place { width: 31%; min-height: 140px; border-radius: 18px 18px 8px 8px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 14px 8px; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.12); animation: partyPodiumRise .8s cubic-bezier(.2,.85,.3,1.2) both; transform-origin: bottom; }
.party-podium-place.first { min-height: 190px; background: linear-gradient(180deg, rgba(255, 209, 102, .2), rgba(255, 209, 102, .05)); border-color: rgba(255, 209, 102, .4); box-shadow: 0 0 40px rgba(255, 209, 102, .15); }
@keyframes partyPodiumRise { from { transform: scaleY(.15); opacity: 0; } }
.party-podium-medal { font-size: 1.9rem; margin-bottom: 8px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.party-podium-place.first .party-podium-medal { font-size: 2.4rem; animation: partyCrownBob 2s ease-in-out infinite; }
@keyframes partyCrownBob { 50% { transform: translateY(-5px) rotate(-6deg); } }
.party-podium-place .party-avatar { margin-bottom: 9px; }
.party-podium-place strong { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .86rem; }
.party-podium-place span { margin-top: 4px; color: var(--party-muted); font-size: .72rem; }
.party-finished-actions { width: min(540px,100%); display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 14px; }

/* ============ Host controls ============ */
.party-start-game { min-height: 66px !important; min-width: min(100%, 380px); padding: 0 30px !important; border-radius: 20px !important; font-family: var(--party-font-display); font-size: 1.2rem !important; position: relative; overflow: hidden; background: var(--party-game-gradient) !important; box-shadow: 0 6px 0 rgba(23, 8, 54, .85), 0 18px 44px rgba(124, 92, 255, .35) !important; }
.party-start-game::after { content: ""; position: absolute; inset: -2px; transform: translateX(-130%) skewX(-20deg); width: 45%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }
.party-start-game.is-ready::after { animation: partyButtonShine 2.2s ease-in-out infinite; }
.party-start-game.is-ready { animation: partyStartPulse 1.8s ease-in-out infinite; }
@keyframes partyButtonShine { 60%, 100% { transform: translateX(330%) skewX(-20deg); } }
@keyframes partyStartPulse { 50% { transform: translateY(-2px) scale(1.015); box-shadow: 0 8px 0 rgba(23,8,54,.85), 0 24px 52px rgba(124, 92, 255, .45), 0 0 0 8px rgba(155, 92, 255, .1) !important; } }

/* ============ Public lobbies ============ */
.party-public-lobbies { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--party-border); position: relative; }
.party-public-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.party-public-heading h2 { margin: 5px 0 0; font-family: var(--party-font-display); font-size: 1.25rem; }
.party-public-lobby-list { display: grid; gap: 9px; }
.party-public-lobby { width: 100%; min-height: 74px; border: 2px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(255,255,255,.04); color: #fff; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 11px 14px; text-align: left; animation: partyLobbyIn .4s ease both; animation-delay: var(--lobby-delay, 0ms); transition: .18s ease; }
.party-public-lobby:hover { transform: translateY(-3px); border-color: rgba(77, 232, 255, .4); background: linear-gradient(100deg, rgba(155, 92, 255, .16), rgba(77, 232, 255, .1)); }
.party-public-lobby-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; background: linear-gradient(145deg, rgba(155, 92, 255, .3), rgba(77, 232, 255, .22)); }
.party-public-lobby-copy { min-width: 0; }
.party-public-lobby-copy strong, .party-public-lobby-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party-public-lobby-copy strong { font-size: .95rem; }
.party-public-lobby-copy small { margin-top: 4px; color: var(--party-muted); font-size: .76rem; }
.party-public-join { display: flex; align-items: center; gap: 6px; color: #9ee5ff; font-size: .82rem; font-weight: 800; }
.party-public-join svg { width: 15px; }
@keyframes partyLobbyIn { from { opacity: 0; transform: translateY(10px); } }

.party-visibility-options span { gap: 8px; }
.party-visibility-options svg { width: 16px; height: 16px; }
.party-visibility-group .party-field { margin-top: 13px; }

/* ============ Modal & custom select ============ */
.party-modal { position: fixed; inset: 0; z-index: 160; padding: 16px; background: rgba(4, 1, 14, .8); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.party-modal.is-open { opacity: 1; pointer-events: auto; }
.party-modal-panel { width: min(720px,100%); max-height: min(90vh, 820px); overflow: auto; border-radius: 24px; padding: 24px; transform: translateY(10px) scale(.98); transition: transform .2s cubic-bezier(.2,.8,.3,1.1); }
.party-modal.is-open .party-modal-panel { transform: none; }
.party-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.party-modal-head h2 { margin: 0; font-family: var(--party-font-display); font-size: 1.65rem; letter-spacing: -.01em; }
.party-modal-head p { margin: 6px 0 0; color: var(--party-muted); font-size: .88rem; }
.party-modal-sections { display: grid; gap: 12px; margin-bottom: 15px; }
.party-modal-section { padding: 16px; }
.party-custom-select { position: relative; margin-top: 12px; }
.party-custom-select-button { width: 100%; min-height: 50px; border: 2px solid var(--party-border); border-radius: 13px; padding: 0 14px; color: #fff; background: rgba(6, 3, 18, .5); display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.party-custom-select-button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party-custom-select-button svg { width: 17px; color: var(--party-muted); }
.party-custom-select-menu { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 7px); max-height: 260px; overflow: auto; padding: 7px; border-radius: 14px; background: #1d1438; border: 1px solid var(--party-border-strong); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.party-custom-select-option { width: 100%; min-height: 46px; border: 0; border-radius: 10px; padding: 10px 11px; color: #fff; background: transparent; text-align: left; }
.party-custom-select-option:hover, .party-custom-select-option.is-selected { background: rgba(77, 232, 255, .11); }
.party-custom-select-option strong { display: block; font-size: .88rem; }
.party-custom-select-option small { display: block; margin-top: 2px; color: var(--party-muted); font-size: .72rem; }
.party-custom-select-search { min-height: 44px; margin-bottom: 7px; border-radius: 10px; padding: 0 11px; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.party-custom-select-search svg { width: 15px; color: var(--party-subtle); }
.party-custom-select-search input { width: 100%; height: 42px; border: 0; outline: 0; color: #fff; background: transparent; font-size: .88rem; }
.party-compact-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-top: 11px; }
.party-compact-options label { position: relative; cursor: pointer; }
.party-compact-options input { position: absolute; opacity: 0; }
.party-compact-options span { min-height: 46px; border: 2px solid var(--party-border); border-radius: 12px; padding: 0 12px; display: flex; align-items: center; justify-content: center; color: var(--party-muted); background: rgba(255,255,255,.04); font-size: .85rem; font-weight: 800; text-align: center; transition: .14s ease; }
.party-compact-options input:checked + span { color: #fff; background: var(--party-game-gradient); border-color: transparent; }
.party-confirm-modal { z-index: 180; }
.party-confirm-panel { width: min(430px,100%); border-radius: 22px; padding: 26px; text-align: center; }
.party-confirm-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; color: #ffd2de; background: rgba(255, 93, 126, .14); }
.party-confirm-panel h2 { margin: 0; font-family: var(--party-font-display); font-size: 1.5rem; }
.party-confirm-panel p { margin: 9px 0 22px; color: var(--party-muted); font-size: .9rem; line-height: 1.5; }
.party-confirm-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }

/* provider badge */
.party-provider-status { display: inline-flex !important; align-items: center; gap: 6px; width: max-content; margin-top: 8px; padding: 5px 9px; border-radius: 999px; font-style: normal; font-size: .7rem !important; font-weight: 800; line-height: 1; color: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.party-provider-status svg { width: 13px; height: 13px; }
.party-provider-status.is-connected { color: #aaf4d1; border-color: rgba(85, 230, 165, .35); background: rgba(85, 230, 165, .12); }
.party-provider-status.is-missing { color: #ffe0a3; border-color: rgba(255, 190, 85, .32); background: rgba(255, 190, 85, .1); }

/* ============ Toast, confetti, spinner ============ */
.party-toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 220; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 13px 18px; border-radius: 14px; background: #23184a; border: 1px solid var(--party-border-strong); box-shadow: 0 20px 50px rgba(0,0,0,.5); transition: .22s cubic-bezier(.2,.8,.3,1.15); max-width: min(90vw, 540px); text-align: center; font-size: .86rem; font-weight: 600; }
.party-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.party-toast.is-error { border-color: rgba(255, 93, 126, .4); color: #ffdce5; }
.party-confetti { position: fixed; inset: 0; z-index: 210; pointer-events: none; overflow: hidden; }
.party-confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: partyConfettiFall 2.4s linear forwards; }
.party-confetti i:nth-child(3n) { border-radius: 50%; width: 9px; height: 9px; }
.party-confetti i:nth-child(4n) { width: 12px; height: 6px; }
@keyframes partyConfettiFall { to { transform: translate3d(0, 112vh, 0) rotate(560deg); opacity: .7; } }
.party-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.25); border-top-color: currentColor; border-radius: 50%; animation: partySpin .65s linear infinite; }
@keyframes partySpin { to { transform: rotate(360deg); } }

/* ============ Mobile tab bar (JS-injected) ============ */
.party-mobile-nav { display: none; }

/* ============ AdSense / site footer suppression on Party ============ */
body.party-page ins.adsbygoogle,
body.party-page iframe[id^="google_ads_iframe"],
body.party-page div[id^="google_vignette"],
body.party-page .adsbygoogle { display: none !important; }

/* ============ Responsive ============ */
@media (max-width: 920px) {
    .party-room-grid { display: block; }
    .party-side { position: static; display: none; }
    .party-room-view.party-show-details .party-stage { display: none; }
    .party-room-view.party-show-details .party-side { display: block; }
    .party-shell { padding-bottom: 30px; }
    /* --- app-like room: viewport height, internal scroll, pinned tab bar --- */
    body.party-room-active { overflow: hidden; }
    body.party-room-active .party-shell { padding-bottom: 0; display: flex; flex-direction: column; }
    body.party-room-active .party-room-view { display: flex; flex-direction: column; min-height: 0; }
    body.party-room-active .party-room-topbar { flex: none; margin-bottom: 8px; }
    body.party-room-active .party-room-grid {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 14px;
    }
    body.party-room-active .party-room-grid::-webkit-scrollbar { display: none; }
    /* --- compact floating pill tab bar: in-flow at the bottom of the
           viewport-fitted room, so it is pinned like a native app tab bar
           and nothing can ever scroll behind it --- */
    .party-mobile-nav { display: none; }
    body.party-room-active .party-mobile-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        flex: none;
        width: min(330px, calc(100% - 40px));
        margin: 4px auto max(10px, env(safe-area-inset-bottom));
        padding: 6px;
        border-radius: 999px;
        background: linear-gradient(150deg, rgba(34, 24, 66, .92), rgba(15, 10, 34, .92));
        border: 1px solid var(--party-border-strong);
        box-shadow: 0 14px 36px rgba(2, 0, 12, .55);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
    .party-mobile-nav button {
        min-height: 44px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--party-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        font-family: var(--party-font-display);
        font-size: .8rem;
        font-weight: 800;
        letter-spacing: .02em;
        transition: .15s ease;
    }
    .party-mobile-nav button svg { width: 17px; height: 17px; }
    .party-mobile-nav button.is-active { color: #fff; background: var(--party-game-gradient); box-shadow: 0 5px 14px rgba(124, 92, 255, .45); }
    /* the site footer is not part of the game — drop it on small screens */
    body.party-page > footer { display: none !important; }
}
@media (max-width: 700px) {
    .party-shell { width: min(100% - 18px, 1160px); padding-top: 12px; }
    .party-home { margin-top: 12px; padding: 24px 18px; border-radius: 22px; }
    .party-home-main { display: block; }
    .party-home-icon { margin-bottom: 16px; }
    .party-home-notes { gap: 12px; }
    .party-panel, .party-setup { border-radius: 20px; }
    .party-form-grid, .party-segmented, .party-review-grid, .party-stepper-grid { grid-template-columns: 1fr; }
    .party-setup-header { padding: 18px 15px 12px; }
    .party-setup-progress { gap: 6px; }
    .party-step-pill { min-height: 42px; padding: 0; }
    .party-step-pill span { display: none; }
    .party-step-panel { min-height: 0; padding: 24px 15px; }
    .party-setup-footer { padding-left: 15px; padding-right: 15px; align-items: stretch; }
    .party-setup-footer-right { width: 100%; }
    .party-setup-footer-right > * { flex: 1; }
    .party-room-topbar { align-items: center; }
    .party-connection span { display: none; }
    .party-connection { padding: 0 12px; }
    .party-stage { min-height: 0; padding: 15px 13px 18px; border-radius: 20px; }
    .party-stage-center { min-height: 0; padding: 20px 0 4px; }
    .party-phase-header h1 { font-size: 1.45rem; }
    .party-phase-header p { font-size: .85rem; }
    .party-card-wrap { width: min(230px, 68vw); margin-bottom: 12px; }
    .party-card-front-content svg { width: 36px; height: 36px; }
    .party-guess-year { margin-bottom: 16px; }
    .party-sound-gate, .party-guess-panel, .party-waiting-card { padding: 19px; }
    .party-year-result { margin-bottom: 10px; }
    .party-tension-feed { gap: 6px; margin-top: 12px; }
    .party-my-result { gap: 11px; padding: 13px 14px; border-radius: 17px; }
    .party-my-result-icon { width: 46px; height: 46px; border-radius: 14px; font-size: 1.55rem; }
    .party-my-result-main strong { font-size: 1.25rem; }
    .party-my-result-main span { font-size: .76rem; }
    .party-my-result-stats b { font-size: 1.3rem; }
    .party-choice-grid { grid-template-columns: 1fr; }
    .party-choice-button { min-height: 76px; }
    .party-choice-shape { width: 42px; height: 42px; font-size: 1.25rem; }
    .party-finished-actions { grid-template-columns: 1fr; }
    .party-modal-panel { padding: 19px 15px; border-radius: 20px; }
    .party-public-lobby { grid-template-columns: 40px minmax(0,1fr); }
    .party-public-join { display: none; }
    .party-design-card { flex-basis: 118px; width: 118px; height: 118px; }
    .party-tension-feed, .party-result-guess-grid { grid-template-columns: 1fr; }
    .party-start-game { width: 100%; }
    .party-countdown { width: 116px; height: 116px; border-radius: 36px; font-size: 3.3rem; }
    .party-game-timer-time { font-size: 1.3rem; min-width: 50px; }
}
@media (max-width: 460px) {
    .party-home-copy h1 { font-size: 1.9rem; }
    .party-home-notes { display: grid; gap: 9px; }
    .party-value-options { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .party-room-code { font-size: 1.2rem; }
    .party-mini-mark { display: none; }
    .party-room-actions { gap: 6px; }
    .party-phase-header > div:last-child strong { font-size: 1rem; }
    .party-card-face { border-radius: 20px; }
    .party-podium-place { width: 32%; padding-left: 5px; padding-right: 5px; }
    .party-compact-options, .party-confirm-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}