:root {
    --bg-deep: #03111b;
    --bg-mid: #092437;
    --bg-sheen: #12384f;
    --card: rgba(8, 24, 38, 0.98);
    --card-strong: rgba(11, 31, 47, 0.99);
    --line: rgba(63, 192, 202, 0.42);
    --line-bright: rgba(150, 255, 247, 0.72);
    --text: #f3feff;
    --text-soft: #c0edf2;
    --text-dim: #8dc7cf;
    --teal: #1fe1d1;
    --teal-deep: #0eaab2;
    --teal-soft: #a4fffa;
    --gold: #ffe08b;
    --gold-soft: #ffebaf;
    --gold-strong: #f4c056;
    --gold-surface-border: rgba(240, 194, 92, 0.58);
    --gold-surface-line: rgba(255, 243, 211, 0.14);
    --gold-surface-glow: rgba(244, 192, 79, 0.19);
    --gold-surface-title: #fff0cc;
    --gold-surface-label: #f2dab0;
    --active-panel-outline-width: 2px;
    /* Gold carries "this is the next main action"; teal is reserved for repeat/utility actions. */
    --action-gold-border: rgba(255, 246, 204, 0.68);
    --action-gold-background:
        linear-gradient(110deg, rgba(255, 255, 255, 0.22), transparent 34%),
        linear-gradient(180deg, rgba(255, 229, 157, 0.98), rgba(209, 137, 39, 0.98));
    --action-gold-ink: #211206;
    --action-gold-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -2px 0 rgba(88, 49, 12, 0.28),
        0 16px 30px rgba(255, 196, 78, 0.2);
    --action-gold-hover-border: rgba(255, 252, 226, 0.86);
    --action-gold-focus-ring: rgba(255, 218, 128, 0.18);
    --action-gold-hover-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -2px 0 rgba(88, 49, 12, 0.24),
        0 0 0 3px var(--action-gold-focus-ring),
        0 18px 34px rgba(255, 196, 78, 0.24);
    --danger: #ff8e78;
    --danger-soft: rgba(255, 142, 120, 0.16);
    --info-soft: rgba(39, 208, 195, 0.14);
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.36);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --maze-board-scale: 1;
    --maze-cell: calc(var(--ziar-maze-cell-base) * var(--maze-board-scale));
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    color: var(--text);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

html,
body {
    min-height: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

html {
    scrollbar-gutter: stable;
    background: #03111b;
    scrollbar-color: rgba(141, 199, 207, 0.38) #03111b;
}

/* Match 150% physical text on the captured 4K classroom panel when Windows exposes it at 300%. */
html.is-classroom-display-typography-compensated {
    font-size: var(--ziar-classroom-display-root-font-size, 50%);
}

@supports not (scrollbar-gutter: stable) {
    html {
        overflow-y: scroll;
    }
}

html::-webkit-scrollbar {
    width: 14px;
}

html::-webkit-scrollbar-track {
    background: #03111b;
}

html::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 3px solid #03111b;
    border-radius: 999px;
    background: rgba(141, 199, 207, 0.3);
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 12% 12%, rgba(31, 225, 209, 0.24), transparent 24%),
        radial-gradient(circle at 86% 8%, rgba(164, 255, 250, 0.14), transparent 20%),
        radial-gradient(circle at 50% 100%, rgba(14, 170, 178, 0.28), transparent 34%),
        linear-gradient(180deg, #03111a, #071f31 48%, #051723 100%);
    color: var(--text);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(149, 255, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(149, 255, 246, 0.03) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(circle at center, black, transparent 78%);
    mask-image: radial-gradient(circle at center, black, transparent 78%);
    opacity: 0.6;
}

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

button:disabled {
    cursor: not-allowed;
}

.primary-button:disabled,
.secondary-button:disabled,
.ghost-button:disabled,
.mode-chip-button:disabled {
    background: rgba(22, 33, 41, 0.96);
    border-color: rgba(141, 168, 182, 0.18);
    box-shadow: none;
    color: rgba(230, 241, 247, 0.72);
    opacity: 1;
}

.language-toggle {
    position: static;
    z-index: 1;
    min-height: 50px;
    min-width: 156px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(150, 255, 247, 0.24);
    background: rgba(4, 20, 31, 0.92);
    color: var(--text);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.language-toggle:focus-visible {
    outline: 2px solid rgba(164, 255, 250, 0.52);
    outline-offset: 3px;
}

.language-toggle-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    width: 100%;
    min-height: 40px;
}

.language-toggle-thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(50% - 2px);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(164, 255, 250, 0.98), rgba(31, 225, 209, 0.84));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.52),
        0 10px 18px rgba(6, 29, 41, 0.28);
    transition:
        transform 230ms cubic-bezier(0.2, 0.88, 0.2, 1),
        background 180ms ease,
        box-shadow 180ms ease;
    will-change: transform;
}

.language-toggle.is-korean .language-toggle-thumb {
    transform: translateX(100%);
}

.language-toggle-option {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: rgba(243, 254, 255, 0.72);
    transition:
        color 180ms ease,
        transform 180ms ease;
}

.language-toggle.is-english .language-toggle-option-en,
.language-toggle.is-korean .language-toggle-option-ko {
    color: #062230;
}

.language-toggle.is-english .language-toggle-option-ko,
.language-toggle.is-korean .language-toggle-option-en {
    color: rgba(243, 254, 255, 0.76);
}

.language-toggle:hover {
    border-color: rgba(10, 47, 67, 0.92);
    box-shadow:
        0 0 0 1px rgba(150, 255, 247, 0.18),
        0 12px 26px rgba(0, 0, 0, 0.3);
}

.language-toggle:active {
    transform: translateY(1px) scale(0.985);
}

#app {
    min-height: 100vh;
    position: relative;
    z-index: 1;
    overflow-x: hidden;
    overflow-x: clip;
}

#app.master1000-shell-active {
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}

#app.autotranslator-active {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    overflow: hidden;
}

.page-shell {
    width: min(1440px, calc(100% - 56px));
    margin: 0 auto;
    padding: 18px 0 36px;
    animation: fade-up 240ms ease-out;
}

.page-shell.room-shell,
.page-shell.tool-shell {
    width: min(1840px, calc(100% - 96px));
}

.page-shell.room-shell {
    padding-top: 12px;
    padding-bottom: 24px;
}

.page-shell.page-shell-static {
    animation: none;
}

.landing-shell {
    padding-top: 30px;
}

.landing-stack {
    display: grid;
    gap: 18px;
    width: min(760px, 100%);
    margin: 0 auto;
}

.brand-header,
.room-topbar,
.roster-head,
.setup-head,
.maze-stage-head,
.room-code-card,
.setup-footer,
.waiting-stats,
.room-code-actions,
.lobby-grid,
.landing-grid,
.active-layout {
    display: flex;
    gap: 16px;
}

.brand-header,
.room-topbar,
.roster-head,
.setup-head,
.maze-stage-head,
.room-code-card,
.setup-footer {
    align-items: center;
    justify-content: space-between;
}

.brand-header {
    margin-bottom: 24px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
}

.landing-shell .brand-header {
    width: min(760px, 100%);
    margin: 0 auto 24px;
}

.room-topbar {
    justify-content: space-between;
}

.room-topbar-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.brand-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.account-menu-root {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    z-index: 20;
}

.account-chip {
    min-height: 42px;
    min-width: 0;
    padding: 0 13px 0 8px;
    border-radius: 999px;
    border: 1px solid rgba(150, 255, 247, 0.22);
    background: linear-gradient(180deg, rgba(17, 44, 58, 0.92), rgba(6, 18, 27, 0.96)), rgba(7, 22, 35, 0.94);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    line-height: 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 22px rgba(0, 0, 0, 0.22);
}

.account-chip:hover,
.account-chip:focus-visible {
    border-color: rgba(150, 255, 247, 0.42);
    transform: translateY(-1px);
}

.account-chip-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg, #fff6da, #6fe0dc);
    color: #08202d;
    font-size: 0.82rem;
    font-weight: 900;
}

.account-chip-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-root.is-google-signin {
    width: 104px;
    height: 42px;
    justify-content: center;
}

.account-google-direct,
.account-google-placeholder {
    width: 104px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
}

.account-google-direct {
    position: relative;
    overflow: hidden;
}

.account-google-direct-face,
.account-google-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px 0 7px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.account-google-direct-face {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    border: 1px solid rgba(150, 255, 247, 0.22);
    background: linear-gradient(180deg, rgba(17, 44, 58, 0.92), rgba(6, 18, 27, 0.96)), rgba(7, 22, 35, 0.94);
    color: var(--text);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 22px rgba(0, 0, 0, 0.22);
}

.account-google-direct:hover .account-google-direct-face,
.account-google-direct:focus-within .account-google-direct-face {
    border-color: rgba(150, 255, 247, 0.42);
    transform: translateY(-1px);
}

.account-google-face-mark {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #ffffff;
}

.account-google-g-icon {
    width: 20px;
    height: 20px;
    display: block;
}

.account-google-direct-action {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: 42px;
    opacity: 0.01;
    overflow: hidden;
}

.account-google-placeholder {
    border: 1px solid rgba(218, 220, 224, 0.9);
    background: #ffffff;
    color: #08202d;
}

.account-google-placeholder .spinner {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.account-google-placeholder.is-unavailable {
    cursor: not-allowed;
    opacity: 0.62;
}

.account-google-error-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #ff647c;
    color: #16050a;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(3, 15, 24, 0.98);
}

.brand-mark {
    margin: 0;
    font-size: clamp(2.2rem, 7vw, 4.2rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--teal-soft);
    text-shadow: 0 0 18px rgba(39, 208, 195, 0.28);
}

.brand-home {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    text-align: center;
    color: inherit;
    text-decoration: none;
}

.compact-brand {
    font-size: 1.2rem;
    letter-spacing: 0.16em;
}

.room-brand {
    font-size: clamp(2.2rem, 7vw, 4.2rem);
    letter-spacing: 0.08em;
    line-height: 0.86;
}

.brand-subtitle,
.participant-meta,
.setup-meta,
.maze-status-line,
.roster-meta,
.list-empty,
.roster-empty,
.connecting-message {
    margin: 0;
    color: var(--text-soft);
}

.card,
.room-code-card {
    background: linear-gradient(180deg, rgba(19, 60, 88, 0.68), rgba(5, 18, 29, 0.98)), var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.card {
    padding: 20px;
}

.landing-grid,
.lobby-grid,
.active-layout {
    flex-wrap: wrap;
}

.landing-grid > *,
.lobby-grid > * {
    flex: 1 1 320px;
}

.landing-card {
    display: grid;
    gap: 14px;
    min-height: 0;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-align: center;
}

.landing-card .field {
    text-align: left;
}

.landing-card.is-active-section,
.random-teams-config-card.is-active-section {
    border-width: var(--active-panel-outline-width);
    border-color: var(--gold-surface-border);
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.34),
        0 0 0 var(--active-panel-outline-width) var(--gold-surface-line),
        0 0 28px rgba(244, 192, 79, 0.12);
}

.landing-card.is-active-section::before,
.random-teams-config-card.is-active-section::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(255, 247, 226, 0.05),
        inset 0 1px 0 rgba(255, 249, 236, 0.08);
}

.landing-card.is-active-section > *,
.random-teams-config-card.is-active-section > * {
    position: relative;
    z-index: 1;
}

.landing-card.is-active-section .landing-title {
    color: var(--text);
    text-shadow: none;
}

.landing-card.is-active-section .landing-field-label,
.random-teams-config-card.is-active-section .landing-field-label {
    color: var(--text-soft);
}

.landing-card-join {
    padding-top: 24px;
    padding-bottom: 24px;
}

.qr-join-shell {
    width: min(430px, calc(100vw - 32px));
    min-height: 100vh;
    min-height: 100svh;
    padding: max(32px, 14vh) 0 32px;
    padding: max(32px, 14svh) 0 32px;
    display: grid;
    place-items: center;
}

.qr-join-card {
    width: 100%;
    display: grid;
    gap: 18px;
    padding: clamp(22px, 6vw, 30px);
}

.qr-join-card.is-relic-selected {
    background: linear-gradient(180deg, rgba(88, 64, 36, 0.76), rgba(28, 21, 14, 0.98)), rgba(29, 22, 15, 0.98);
    border-width: var(--active-panel-outline-width);
    border-color: rgba(226, 178, 93, 0.48);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.38),
        0 0 0 var(--active-panel-outline-width) rgba(255, 236, 194, 0.08),
        0 0 30px rgba(230, 174, 73, 0.13);
}

.qr-join-card.is-pictionary-selected {
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 252, 239, 0.2), transparent 24%),
        radial-gradient(circle at 86% 14%, rgba(232, 177, 83, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(63, 58, 49, 0.82), rgba(19, 18, 16, 0.98)), rgba(24, 23, 20, 0.98);
    border-width: var(--active-panel-outline-width);
    border-color: rgba(245, 235, 212, 0.38);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.38),
        0 0 0 var(--active-panel-outline-width) rgba(255, 250, 235, 0.08),
        0 0 30px rgba(232, 177, 83, 0.13);
}

.qr-join-card.is-relic-selected .field input {
    border-color: rgba(226, 178, 93, 0.3);
    background: rgba(24, 18, 12, 0.9);
}

.qr-join-card.is-pictionary-selected .field input {
    border-color: rgba(245, 235, 212, 0.28);
    background: rgba(24, 23, 20, 0.9);
}

.qr-join-card.is-relic-selected .field input:focus {
    border-color: rgba(255, 224, 146, 0.7);
    box-shadow: 0 0 0 3px rgba(240, 184, 82, 0.16);
}

.qr-join-card.is-pictionary-selected .field input:focus {
    border-color: rgba(255, 239, 195, 0.68);
    box-shadow: 0 0 0 3px rgba(232, 177, 83, 0.16);
}

.qr-join-card.is-pictionary-selected .primary-button {
    background: linear-gradient(135deg, #fffdf4, #e8c46f);
    color: #28231b;
    box-shadow:
        0 16px 30px rgba(185, 132, 42, 0.24),
        0 0 36px rgba(255, 250, 232, 0.12);
}

.qr-join-card #screen-banner:empty {
    display: none;
}

.qr-join-field {
    text-align: left;
}

.qr-join-title {
    font-size: clamp(1.7rem, 7vw, 2.4rem);
}

.landing-host-card {
    gap: 0;
}

.landing-host-card.is-expanded {
    gap: 16px;
}

.landing-host-panel {
    display: grid;
    gap: 14px;
}

.landing-tools-card {
    gap: 0;
}

.landing-tools-card.is-expanded {
    gap: 16px;
}

.landing-tools-panel {
    display: grid;
    gap: 14px;
}

.landing-panel-head,
.tool-hero-head,
.random-teams-stage-head,
.random-teams-floor-head,
.random-team-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.landing-panel-head {
    align-items: center;
}

.landing-panel-head .landing-title {
    flex: 1 1 auto;
    text-align: left;
}

.landing-panel-head .panel-collapse-button {
    flex: 0 0 auto;
}

.landing-card.is-active-section .panel-collapse-button {
    border-color: rgba(255, 229, 167, 0.34);
    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(255, 245, 220, 0.09),
        0 0 24px rgba(244, 192, 79, 0.14);
}

.panel-collapse-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(150, 255, 247, 0.24);
    background: rgba(4, 20, 31, 0.96);
    color: var(--text);
    font-size: 1.2rem;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.landing-tool-option {
    width: 100%;
    padding: 18px 20px;
    border-radius: 24px;
    border: 1px solid rgba(150, 255, 247, 0.18);
    background:
        radial-gradient(circle at 12% 16%, rgba(31, 225, 209, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(16, 49, 71, 0.76), rgba(7, 24, 37, 0.98));
    color: var(--text);
    display: grid;
    gap: 6px;
    text-align: left;
    text-decoration: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 34px rgba(0, 0, 0, 0.24);
}

.landing-tool-option:hover,
.panel-collapse-button:hover {
    transform: translateY(-1px);
}

.landing-tool-option:active,
.panel-collapse-button:active {
    transform: translateY(1px) scale(0.985);
}

.landing-tool-option-title {
    font-size: 1.16rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.landing-tool-option-note {
    color: var(--text-soft);
    line-height: 1.45;
}

.landing-title {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--text);
}

.landing-field-label {
    color: var(--text-soft);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.landing-action,
.landing-host-toggle {
    min-height: 58px;
    font-size: 1.08rem;
    justify-content: center;
}

.landing-host-toggle {
    width: 100%;
}

.tool-shell {
    padding-top: 30px;
}

.tool-shell-stack {
    width: 100%;
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.tool-shell .brand-header {
    width: 100%;
    margin: 0 auto 24px;
}

.tool-hero-card {
    padding: 24px 26px;
}

.tool-hero-copy,
.random-teams-copy,
.random-teams-stage-copy {
    display: grid;
    gap: 8px;
}

.tool-hero-title,
.random-teams-title {
    margin: 0;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 0.98;
}

.tool-hero-note,
.random-teams-note,
.random-teams-stage-lead,
.random-teams-floor-copy {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.45;
}

.tool-back-button {
    align-self: center;
}

.autotranslator-tool-shell .tool-shell-stack {
    width: min(1180px, 100%);
}

#app.autotranslator-active .autotranslator-tool-shell {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 10px;
    padding-bottom: 0;
}

#app.autotranslator-active .autotranslator-tool-shell #screen-banner:empty {
    display: none;
}

#app.autotranslator-active .autotranslator-tool-shell .tool-shell-stack {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#app.autotranslator-active .autotranslator-tool-shell #tool-content,
#app.autotranslator-active .autotranslator-tool,
#app.autotranslator-active .autotranslator-stage,
#app.autotranslator-active .autotranslator-stage-inner {
    min-height: 0;
    height: 100%;
}

#app.autotranslator-active .autotranslator-stage {
    min-height: 0;
}

#app.autotranslator-active .autotranslator-feed-shell,
#app.autotranslator-active .autotranslator-feed {
    min-height: 0;
}

#app.autotranslator-active .autotranslator-tool-shell .autotranslator-brand-header {
    flex: 0 0 auto;
    min-height: 34px;
    margin: 0;
    padding: 0 2px;
}

.autotranslator-tool-shell .autotranslator-brand-mark {
    min-height: 34px;
    color: rgba(243, 254, 255, 0.9);
    font-size: 1.02rem;
    letter-spacing: 0.18em;
    line-height: 1;
}

.autotranslator-tool-shell .autotranslator-header-back {
    min-height: 34px;
    padding: 0 11px 0 9px;
    gap: 7px;
    border-color: rgba(150, 255, 247, 0.18);
    background: rgba(7, 22, 35, 0.78);
    color: rgba(243, 254, 255, 0.9);
    font-size: 0.82rem;
    font-weight: 900;
}

.autotranslator-header-back-icon {
    width: 16px;
    height: 16px;
}

.autotranslator-tool {
    position: relative;
}

.autotranslator-stage {
    min-height: min(820px, calc(100vh - 72px));
    min-height: min(820px, calc(100svh - 72px));
    border: 1px solid rgba(150, 255, 247, 0.3);
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 224, 139, 0.1), transparent 32%),
        linear-gradient(215deg, rgba(31, 225, 209, 0.14), transparent 42%),
        linear-gradient(180deg, rgba(12, 37, 49, 0.99), rgba(4, 16, 27, 1));
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 42px rgba(31, 225, 209, 0.08);
}

.autotranslator-stage-inner {
    min-height: inherit;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    transition: transform 180ms ease;
    transform-origin: center;
}

.autotranslator-tool.is-table-mode .autotranslator-stage-inner {
    transform: rotate(180deg);
}

.autotranslator-pagebar,
.autotranslator-top-actions,
.autotranslator-control-dock,
.autotranslator-noun-form,
.autotranslator-noun-list {
    display: flex;
    align-items: center;
}

.autotranslator-pagebar {
    min-height: 40px;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: nowrap;
}

.autotranslator-top-actions {
    flex: 1 1 440px;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
}

.autotranslator-top-actions button,
.autotranslator-back-button,
.autotranslator-mode-toggle,
.autotranslator-noun-form button,
.autotranslator-noun-chip,
.autotranslator-follow-button,
.autotranslator-expanded-close {
    border: 1px solid rgba(182, 205, 201, 0.22);
    border-radius: 8px;
    background: rgba(164, 255, 250, 0.08);
    color: rgba(242, 250, 247, 0.92);
}

.autotranslator-top-actions button,
.autotranslator-back-button,
.autotranslator-noun-form button,
.autotranslator-follow-button,
.autotranslator-expanded-close {
    min-height: 36px;
    padding: 0 10px;
    font-weight: 800;
    cursor: pointer;
}

.autotranslator-top-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.autotranslator-top-actions button:hover,
.autotranslator-top-actions button:focus-visible,
.autotranslator-back-button:hover,
.autotranslator-back-button:focus-visible,
.autotranslator-noun-form button:hover,
.autotranslator-noun-form button:focus-visible,
.autotranslator-noun-chip:hover,
.autotranslator-noun-chip:focus-visible,
.autotranslator-follow-button:hover,
.autotranslator-follow-button:focus-visible,
.autotranslator-expanded-close:hover,
.autotranslator-expanded-close:focus-visible {
    border-color: rgba(102, 229, 194, 0.72);
    outline: none;
}

.autotranslator-clear-icon {
    width: 17px;
    height: 17px;
}

.autotranslator-back-button {
    flex: 0 0 36px;
    width: 36px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    text-decoration: none;
}

.autotranslator-back-icon {
    width: 18px;
    height: 18px;
}

.autotranslator-action-icon {
    width: 17px;
    height: 17px;
}

.autotranslator-noun-close-icon {
    width: 16px;
    height: 16px;
}

.autotranslator-icon-button {
    position: relative;
    flex: 0 0 36px;
    width: 36px;
    padding: 0;
}

.autotranslator-top-actions .autotranslator-noun-toggle {
    border-color: rgba(250, 216, 128, 0.52);
    background: linear-gradient(180deg, rgba(64, 51, 20, 0.86), rgba(27, 51, 48, 0.94)), rgba(250, 216, 128, 0.16);
    color: #ffe4a0;
    box-shadow:
        inset 0 1px 0 rgba(255, 238, 180, 0.14),
        0 0 18px rgba(250, 216, 128, 0.08);
}

.autotranslator-top-actions .autotranslator-noun-toggle:hover,
.autotranslator-top-actions .autotranslator-noun-toggle:focus-visible {
    border-color: rgba(255, 226, 150, 0.84);
    background: linear-gradient(180deg, rgba(84, 65, 23, 0.92), rgba(28, 60, 54, 0.96)), rgba(250, 216, 128, 0.22);
}

.autotranslator-noun-count {
    position: absolute;
    right: -4px;
    top: -5px;
    min-width: 16px;
    height: 16px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--gold);
    color: #10221d;
    font-size: 0.68rem;
    line-height: 1;
}

.autotranslator-mode-toggle {
    flex: 1 1 330px;
    max-width: 390px;
    display: inline-grid;
    grid-template-columns: repeat(3, minmax(64px, 1fr));
    padding: 3px;
    gap: 3px;
    background: linear-gradient(180deg, rgba(10, 32, 44, 0.94), rgba(3, 17, 27, 0.96)), rgba(164, 255, 250, 0.08);
}

.autotranslator-mode-toggle button {
    border: 0;
    border-radius: 6px;
    background: rgba(242, 250, 247, 0.035);
    color: #d7f8f5;
    font-weight: 900;
    white-space: nowrap;
}

.autotranslator-mode-toggle button.is-selected {
    background: #dffff9;
    color: #122620;
}

.autotranslator-tool.is-running .autotranslator-mode-toggle button.is-selected {
    background: #ffe0a6;
    color: #2d1a08;
}

.autotranslator-noun-drawer {
    display: grid;
    gap: 7px;
    max-height: min(30svh, 260px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 7px;
    border: 1px solid rgba(31, 225, 209, 0.22);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(2, 17, 24, 0.9), rgba(2, 11, 17, 0.96)), rgba(2, 15, 22, 0.7);
}

.autotranslator-noun-form {
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.autotranslator-noun-form-inline {
    flex: 1 1 220px;
    min-width: 150px;
    padding: 0;
    border: 0;
    background: transparent;
}

.autotranslator-noun-form-row {
    flex: 0 0 auto;
    width: 100%;
}

.autotranslator-noun-form input {
    flex: 1 1 160px;
    min-width: 0;
    min-height: 38px;
    border: 1px solid rgba(31, 225, 209, 0.26);
    border-radius: 8px;
    padding: 0 12px;
    background: rgba(2, 12, 18, 0.72);
    color: #f4fbf7;
    font: inherit;
}

.autotranslator-noun-form-inline input {
    min-height: 36px;
}

.autotranslator-noun-form-inline .autotranslator-noun-submit {
    min-height: 36px;
    padding: 0 10px;
    white-space: nowrap;
    border-color: rgba(250, 216, 128, 0.72);
    background: #ffe0a6;
    color: #2d1a08;
}

.autotranslator-noun-form-inline .autotranslator-noun-submit:hover,
.autotranslator-noun-form-inline .autotranslator-noun-submit:focus-visible {
    border-color: rgba(255, 238, 180, 0.96);
}

.autotranslator-noun-form-inline .autotranslator-noun-close {
    flex: 0 0 36px;
    width: 36px;
    min-height: 36px;
    padding: 0;
    background: rgba(2, 12, 18, 0.78);
    color: rgba(242, 250, 247, 0.86);
}

.autotranslator-noun-form input:focus {
    border-color: rgba(102, 229, 194, 0.7);
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 229, 194, 0.13);
}

.autotranslator-noun-list {
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 7px;
    min-height: 0;
}

.autotranslator-noun-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 9px;
    cursor: pointer;
}

.autotranslator-noun-chip span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.autotranslator-feed-shell {
    position: relative;
    flex: 1 1 auto;
    min-height: 360px;
    display: flex;
    min-width: 0;
}

.autotranslator-feed {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px;
    border: 1px solid rgba(150, 255, 247, 0.17);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 224, 139, 0.035), rgba(31, 225, 209, 0.025)), rgba(1, 9, 15, 0.5);
    overscroll-behavior: contain;
    overflow-anchor: none;
}

.autotranslator-feed::before {
    content: "";
    margin-top: auto;
}

.autotranslator-empty {
    margin: auto;
    color: rgba(220, 234, 230, 0.58);
    font-size: 1.12rem;
    font-weight: 800;
}

.autotranslator-bubble {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    display: grid;
    gap: 7px;
    align-self: stretch;
    border: 1px solid rgba(150, 255, 247, 0.24);
    border-left: 3px solid rgba(255, 224, 139, 0.48);
    border-radius: 8px;
    padding: 12px 13px;
    background: linear-gradient(180deg, rgba(23, 53, 61, 0.92), rgba(8, 28, 36, 0.98)), rgba(164, 255, 250, 0.08);
    color: #f7fffb;
    text-align: left;
    cursor: zoom-in;
    overflow: hidden;
    transition:
        border-color 140ms ease,
        background 140ms ease,
        box-shadow 180ms ease;
    transform-origin: center bottom;
}

.autotranslator-bubble > span,
.autotranslator-bubble-content {
    position: relative;
    z-index: 1;
}

.autotranslator-bubble-content {
    display: grid;
    gap: 7px;
    width: 100%;
}

.autotranslator-bubble.is-next-to-fade::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 0;
    height: 68%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 17, 25, 0.82), rgba(5, 17, 25, 0.42) 50%, rgba(5, 17, 25, 0));
}

.autotranslator-bubble.is-entering {
    animation: autotranslator-bubble-enter 620ms ease-out both;
}

.autotranslator-bubble:hover,
.autotranslator-bubble:focus-visible {
    border-color: rgba(236, 196, 103, 0.76);
    outline: none;
}

.autotranslator-bubble.is-live {
    border-color: rgba(150, 255, 247, 0.24);
    border-left-color: rgba(255, 224, 139, 0.48);
}

.autotranslator-bubble.has-context::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(236, 196, 103, 0.72);
    box-shadow: 0 0 0 3px rgba(236, 196, 103, 0.08);
}

.autotranslator-bubble.is-hearing {
    min-height: 66px;
    place-items: center start;
    border-color: rgba(102, 229, 194, 0.44);
    border-left-color: var(--teal);
    background: linear-gradient(180deg, rgba(18, 53, 58, 0.86), rgba(7, 27, 35, 0.95)), rgba(102, 229, 194, 0.08);
    cursor: default;
}

.autotranslator-bubble.is-error {
    border-color: rgba(238, 117, 117, 0.7);
    border-left-color: rgba(238, 117, 117, 0.84);
}

.autotranslator-pause {
    align-self: center;
    padding: 5px 10px;
    border: 1px solid rgba(182, 205, 201, 0.18);
    border-radius: 999px;
    color: rgba(220, 234, 230, 0.68);
    background: rgba(242, 250, 247, 0.06);
    font-size: 0.78rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.autotranslator-bubble-transcript {
    color: rgba(200, 234, 247, 0.9);
    font-size: 1rem;
    line-height: 1.36;
}

.autotranslator-bubble-translation {
    color: rgba(200, 234, 247, 0.94);
    font-size: 1.22rem;
    line-height: 1.36;
    font-weight: 850;
}

.autotranslator-bubble-line,
.autotranslator-expanded-transcript,
.autotranslator-expanded-translation,
.autotranslator-expanded-literal,
.autotranslator-expanded-interpretation p {
    display: block;
}

.autotranslator-bubble-line.is-ko,
.autotranslator-expanded-transcript.is-ko,
.autotranslator-expanded-translation.is-ko,
.autotranslator-expanded-literal.is-ko,
.autotranslator-expanded-interpretation .is-ko {
    color: rgba(255, 224, 166, 0.98);
    text-align: right;
    font-weight: 850;
    word-break: keep-all;
}

.autotranslator-bubble-line.is-en,
.autotranslator-bubble-line.is-mixed,
.autotranslator-expanded-transcript.is-en,
.autotranslator-expanded-transcript.is-mixed,
.autotranslator-expanded-translation.is-en,
.autotranslator-expanded-translation.is-mixed,
.autotranslator-expanded-literal.is-en,
.autotranslator-expanded-literal.is-mixed,
.autotranslator-expanded-interpretation .is-en,
.autotranslator-expanded-interpretation .is-mixed {
    color: rgba(200, 234, 247, 0.94);
    text-align: left;
}

.autotranslator-context-diff-token {
    display: inline;
    border-radius: 4px;
    padding: 0 1px;
    margin: 0 -1px;
    color: #ffe7a6;
    background: rgba(250, 216, 128, 0.18);
    box-shadow: 0 0 0 1px rgba(250, 216, 128, 0.1);
    animation: autotranslator-context-diff-flash 1900ms ease-out both;
}

.autotranslator-context-diff-token.is-punctuation {
    padding: 0;
    margin: 0;
    background: rgba(250, 216, 128, 0.1);
    box-shadow: none;
}

.autotranslator-bubble.is-translating .autotranslator-bubble-translation {
    color: rgba(236, 196, 103, 0.86);
}

.autotranslator-bubble-translation.is-pending {
    min-height: 24px;
    line-height: 1;
    opacity: 0.86;
}

.autotranslator-bubble-translation.is-retained {
    line-height: 1.36;
    opacity: 0.7;
    filter: saturate(0.82);
}

.autotranslator-bubble-translation.is-pending .autotranslator-pending-dots {
    color: currentColor;
}

.autotranslator-bubble.is-hearing {
    box-shadow: inset 5px 0 0 rgba(119, 255, 236, 0.9);
}

.autotranslator-pending-dots {
    display: inline-grid;
    grid-template-columns: repeat(3, 9px);
    place-items: center;
    gap: 6px;
    width: 39px;
    min-height: 22px;
    color: rgba(250, 216, 128, 0.96);
}

.autotranslator-pending-dots span {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 12px rgba(250, 216, 128, 0.46);
    opacity: 0.44;
    transform: translateY(0) scale(0.68);
    transform-origin: center;
    animation: autotranslator-pending-dot 900ms ease-in-out infinite;
}

.autotranslator-pending-dots span:nth-child(2) {
    animation-delay: 130ms;
}

.autotranslator-pending-dots span:nth-child(3) {
    animation-delay: 260ms;
}

@keyframes autotranslator-pending-dot {
    0%,
    76%,
    100% {
        opacity: 0.34;
        transform: translateY(0) scale(0.68);
    }

    40% {
        opacity: 1;
        transform: translateY(-5px) scale(1.08);
    }
}

@keyframes autotranslator-hearing-pulse {
    0%,
    100% {
        border-color: rgba(119, 255, 236, 0.58);
        box-shadow: inset 5px 0 0 rgba(119, 255, 236, 0.98);
    }

    50% {
        border-color: rgba(255, 224, 166, 0.62);
        box-shadow:
            inset 5px 0 0 rgba(119, 255, 236, 0.98),
            0 0 24px rgba(119, 255, 236, 0.14);
    }
}

@keyframes autotranslator-bubble-enter {
    from {
        opacity: 0;
        clip-path: inset(18% 0 0 0 round 8px);
    }

    58% {
        opacity: 0.84;
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 8px);
    }
}

@keyframes autotranslator-context-diff-flash {
    0%,
    18% {
        color: #fff0bd;
        background: rgba(250, 216, 128, 0.28);
    }

    100% {
        color: inherit;
        background: rgba(250, 216, 128, 0.06);
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .autotranslator-feed {
        scroll-behavior: auto;
    }

    .autotranslator-bubble.is-hearing,
    .autotranslator-bubble.is-entering,
    .autotranslator-context-diff-token,
    .autotranslator-pending-dots span {
        animation: none;
    }
}

.autotranslator-follow-button {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 4;
    transform: translateX(-50%);
    min-width: min(240px, calc(100% - 28px));
    background: #e8f5ec;
    color: #122620;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.autotranslator-follow-button[hidden] {
    display: none;
}

.autotranslator-control-dock {
    min-height: 58px;
    gap: 10px;
    flex-wrap: nowrap;
    padding: 8px;
    border: 1px solid rgba(31, 225, 209, 0.22);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(13, 31, 42, 0.92), rgba(3, 14, 23, 0.96)), rgba(2, 15, 22, 0.72);
}

.autotranslator-dock-toggle {
    min-height: 36px;
    flex: 0 0 auto;
    border: 1px solid rgba(182, 205, 201, 0.22);
    border-radius: 8px;
    padding: 0 10px;
    background: rgba(164, 255, 250, 0.08);
    color: rgba(242, 250, 247, 0.92);
    font-weight: 800;
    cursor: pointer;
}

.autotranslator-dock-toggle[aria-pressed="true"] {
    border-color: rgba(102, 229, 194, 0.72);
    background: rgba(102, 229, 194, 0.16);
}

.autotranslator-dock-toggle:hover,
.autotranslator-dock-toggle:focus-visible {
    border-color: rgba(102, 229, 194, 0.72);
    outline: none;
}

.autotranslator-info-cluster {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
}

.autotranslator-meter {
    flex: 1 1 86px;
    min-width: 54px;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.autotranslator-meter[hidden] {
    display: none;
}

.autotranslator-meter span {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: left center;
    border-radius: inherit;
    background: linear-gradient(90deg, #66e5c2, #ecc467);
}

.autotranslator-tool.is-far-mode .autotranslator-meter span {
    background: linear-gradient(90deg, #66e5c2, #ecc467, #ff8f70);
}

.autotranslator-start-button {
    flex: 0 0 auto;
    min-width: 136px;
    min-height: 46px;
    border: 0;
    border-radius: 8px;
    background: #f0f8ef;
    color: #10221d;
    font-size: 1.05rem;
    font-weight: 900;
    cursor: pointer;
}

.autotranslator-tool.is-running .autotranslator-start-button {
    background: #f4c3b7;
    color: #321611;
}

.autotranslator-start-button:disabled {
    cursor: wait;
    opacity: 0.72;
}

.autotranslator-details {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(220, 234, 230, 0.72);
    font-size: 0.88rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.autotranslator-details [data-autotranslator-cost] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autotranslator-details[hidden] {
    display: none;
}

.autotranslator-error {
    margin: 0;
    color: #f4c3b7;
    font-weight: 800;
}

.autotranslator-expanded {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 18px;
}

.autotranslator-expanded-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.68);
    cursor: zoom-out;
}

.autotranslator-expanded-panel {
    position: relative;
    width: min(860px, 100%);
    max-height: min(82vh, 780px);
    max-height: min(82svh, 780px);
    overflow: auto;
    display: grid;
    gap: 16px;
    border: 1px solid rgba(229, 241, 237, 0.22);
    border-radius: 8px;
    padding: 22px;
    background: #101819;
    color: #f7fffb;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
}

.autotranslator-tool.is-table-mode .autotranslator-expanded-panel {
    transform: rotate(180deg);
}

.autotranslator-expanded-close {
    justify-self: end;
}

.autotranslator-expanded-transcript,
.autotranslator-expanded-translation,
.autotranslator-expanded-literal,
.autotranslator-expanded-interpretation p {
    margin: 0;
    line-height: 1.5;
}

.autotranslator-expanded-primary,
.autotranslator-expanded-comparison section,
.autotranslator-expanded-interpretation {
    display: grid;
    gap: 6px;
}

.autotranslator-expanded-primary > span,
.autotranslator-expanded-comparison span,
.autotranslator-expanded-interpretation > span {
    color: rgba(220, 234, 230, 0.58);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.autotranslator-expanded-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.autotranslator-expanded-comparison section,
.autotranslator-expanded-interpretation {
    border: 1px solid rgba(229, 241, 237, 0.13);
    border-radius: 8px;
    padding: 12px;
    background: rgba(242, 250, 247, 0.035);
}

.autotranslator-expanded-interpretation {
    border-color: rgba(236, 196, 103, 0.22);
    background: rgba(236, 196, 103, 0.055);
}

.autotranslator-expanded-transcript {
    font-size: 1.1rem;
}

.autotranslator-expanded-translation {
    font-size: 2rem;
    font-weight: 900;
}

.autotranslator-expanded-literal,
.autotranslator-expanded-interpretation p {
    font-size: 1rem;
}

.word-list-tool-shell .tool-shell-stack {
    width: min(1500px, 100%);
}

.word-list-hero-card {
    border-radius: 8px;
}

.word-list-tool {
    display: grid;
    grid-template-columns: minmax(372px, 430px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.word-list-control-panel,
.word-list-preview-shell {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(19, 60, 88, 0.68), rgba(5, 18, 29, 0.98)), var(--card);
    box-shadow: var(--shadow);
}

.word-list-control-panel {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 12px;
    padding: 16px;
    isolation: isolate;
    overflow: hidden;
}

.word-list-control-panel.is-active-section {
    border-width: var(--active-panel-outline-width);
    border-color: var(--gold-surface-border);
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.34),
        0 0 0 var(--active-panel-outline-width) var(--gold-surface-line),
        0 0 28px rgba(244, 192, 79, 0.12);
}

.word-list-control-panel.is-active-section::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(255, 247, 226, 0.05),
        inset 0 1px 0 rgba(255, 249, 236, 0.08);
}

.word-list-preview-shell.is-active-section {
    border-width: var(--active-panel-outline-width);
    border-color: var(--gold-surface-border);
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.34),
        0 0 0 var(--active-panel-outline-width) var(--gold-surface-line),
        0 0 28px rgba(244, 192, 79, 0.12);
}

.word-list-control-panel > * {
    position: relative;
    z-index: 1;
}

.word-list-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.word-list-title-field {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.word-list-title-field span,
.word-list-status {
    color: var(--text-soft);
    font-size: 0.86rem;
}

.word-list-title-field input,
.word-list-custom-template,
.word-list-doc-output-input {
    width: 100%;
    border: 1px solid rgba(150, 255, 247, 0.22);
    border-radius: 16px;
    background: rgba(3, 16, 25, 0.9);
    color: var(--text);
    outline: none;
    resize: vertical;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.word-list-title-field input {
    min-height: 44px;
    padding: 10px 12px;
    font-weight: 800;
}

.word-list-source-input,
.word-list-custom-template {
    padding: 12px;
    line-height: 1.44;
}

.word-list-source-shell {
    position: relative;
    min-height: 262px;
    overflow: hidden;
    border: 1px solid rgba(150, 255, 247, 0.22);
    border-radius: 16px;
    background: rgba(3, 16, 25, 0.9);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.word-list-source-shell.is-guided {
    border-color: rgba(240, 194, 92, 0.54);
    box-shadow:
        0 0 0 1px rgba(255, 243, 211, 0.1),
        0 16px 34px rgba(244, 192, 79, 0.08);
}

.word-list-source-shell:focus-within {
    border-color: var(--line-bright);
    box-shadow: 0 0 0 3px rgba(39, 208, 195, 0.14);
}

.word-list-source-shell.is-guided:focus-within {
    border-color: rgba(255, 221, 122, 0.72);
    box-shadow:
        0 0 0 3px rgba(244, 192, 79, 0.16),
        0 16px 34px rgba(244, 192, 79, 0.08);
}

.word-list-source-highlight,
.word-list-source-input {
    width: 100%;
    min-height: 262px;
    line-height: 1.44;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.word-list-source-highlight {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    color: var(--text);
}

.word-list-source-highlight pre {
    position: absolute;
    inset: 12px;
    margin: 0;
    font: inherit;
    white-space: inherit;
    overflow-wrap: inherit;
}

.word-list-source-context {
    color: #93b3ae;
    font-style: italic;
}

.word-list-source-input {
    position: relative;
    z-index: 1;
    display: block;
    border: 0;
    padding: 12px;
    background: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: var(--text);
    outline: none;
    resize: vertical;
    box-shadow: none;
}

.word-list-source-input::placeholder {
    color: rgba(192, 237, 242, 0.5);
    -webkit-text-fill-color: rgba(192, 237, 242, 0.5);
}

.word-list-context-note {
    margin: 0 2px -2px;
    color: var(--text-soft);
    font-size: 0.84rem;
    line-height: 1.35;
}

.word-list-custom-template {
    min-height: 86px;
}

.word-list-title-field input:focus,
.word-list-custom-template:focus,
.word-list-doc-output-input:focus {
    border-color: var(--line-bright);
    box-shadow: 0 0 0 3px rgba(39, 208, 195, 0.14);
}

.word-list-count-pill {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 221, 122, 0.2);
    background: rgba(255, 221, 122, 0.1);
    color: #ffe0a0;
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
}

.word-list-mode-row {
    display: inline-grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    align-items: center;
    min-height: 46px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(150, 255, 247, 0.24);
    background: rgba(4, 20, 31, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.word-list-mode-button {
    min-width: 0;
    min-height: 40px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-soft);
    font-size: 0.94rem;
    font-weight: 850;
}

.word-list-mode-button.is-selected {
    background: linear-gradient(180deg, rgba(164, 255, 250, 0.98), rgba(31, 225, 209, 0.84));
    color: #062230;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.52),
        0 10px 18px rgba(6, 29, 41, 0.24);
}

.word-list-action-row {
    display: grid;
    grid-template-columns: minmax(120px, 1.35fr) repeat(3, minmax(70px, 0.75fr));
    gap: 8px;
}

.word-list-action-row .primary-button,
.word-list-action-row .secondary-button {
    min-height: 44px;
    padding: 0 12px;
}

.word-list-status {
    min-height: 1.2em;
    margin: 0;
    overflow-wrap: anywhere;
}

.word-list-status.is-error {
    color: #ffd1c6;
}

.word-list-workspace {
    min-width: 0;
    display: grid;
    gap: 18px;
}

.word-list-preview-shell {
    position: relative;
    padding: 62px 14px 14px;
    overflow-x: auto;
}

.word-list-preview-tools {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    display: flex;
    gap: 8px;
    align-items: center;
}

.word-list-preview-option-button {
    display: grid;
    place-items: center;
    min-width: 46px;
    height: 42px;
    padding: 0 11px;
    border-radius: 14px;
    border: 1px solid rgba(150, 255, 247, 0.22);
    background: rgba(4, 20, 31, 0.64);
    color: var(--text);
    font-weight: 900;
    letter-spacing: 0;
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.word-list-preview-option-button.is-active {
    border-color: rgba(164, 255, 250, 0.42);
    background: linear-gradient(180deg, rgba(164, 255, 250, 0.96), rgba(31, 225, 209, 0.82));
    color: #062230;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.48),
        0 12px 22px rgba(31, 225, 209, 0.2);
}

.word-list-preview-pages {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 14px;
    align-items: start;
}

.word-list-doc-page {
    container-type: inline-size;
    aspect-ratio: 8.5 / 11;
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 6.4%;
    border-radius: 8px;
    background: #fffdf9;
    color: #111111;
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.24),
        inset 0 0 0 1px rgba(20, 20, 20, 0.08);
    font-family: "Cambria", "Malgun Gothic", "Noto Serif KR", serif;
}

.word-list-doc-title {
    padding: 1.2% 2%;
    border: 1px solid #808080;
    background: #f2f2f2;
    color: #111111;
    font-size: clamp(0.78rem, 4.6cqw, 1.28rem);
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

.word-list-doc-columns {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5%;
    padding-top: 3.4%;
}

.word-list-doc-column {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: clamp(3px, calc(11px - var(--word-list-page-density) * 0.5px), 8px);
}

.word-list-doc-entry {
    position: relative;
    min-width: 0;
    display: grid;
    gap: 1px;
    break-inside: avoid;
}

.word-list-entry-number {
    position: absolute;
    top: 50%;
    left: clamp(3px, 1.1cqw, 6px);
    transform: translateY(-50%);
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: clamp(11px, 3.2cqw, 17px);
    min-width: clamp(11px, 3.2cqw, 17px);
    height: clamp(11px, 3.2cqw, 17px);
    border-radius: 999px;
    border: 1px solid rgba(92, 78, 52, 0.28);
    border-right-color: rgba(92, 78, 52, 0.08);
    border-bottom-color: rgba(92, 78, 52, 0.08);
    background: linear-gradient(180deg, rgba(255, 250, 235, 0.86), rgba(230, 223, 207, 0.72)), rgba(246, 239, 224, 0.78);
    color: rgba(73, 60, 38, 0.84);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 5px 12px rgba(20, 28, 32, 0.08);
    font-size: clamp(0.38rem, 1.32cqw, 0.58rem);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.word-list-entry-number::before {
    content: "";
    position: absolute;
    inset: -2px;
    border: 1px solid rgba(92, 78, 52, 0.08);
    border-radius: inherit;
    pointer-events: none;
}

.word-list-doc-entry strong {
    min-width: 0;
    overflow-wrap: break-word;
    color: #111111;
    font-size: clamp(0.72rem, calc(4.25cqw - var(--word-list-page-density) * 0.06cqw), 1.24rem);
    font-weight: 850;
    line-height: 1.04;
}

.word-list-doc-output-text,
.word-list-doc-output-input {
    min-width: 0;
    overflow-wrap: break-word;
    color: #333333;
    font-size: clamp(0.54rem, calc(2.6cqw - var(--word-list-page-density) * 0.02cqw), 0.78rem);
    line-height: 1.12;
}

.word-list-doc-output-text {
    padding-left: 0.18em;
}

.word-list-doc-output-shell {
    position: relative;
    min-width: 0;
    display: block;
}

.word-list-doc-output-input {
    height: clamp(17px, 4.1cqw, 24px);
    min-height: clamp(17px, 4.1cqw, 24px);
    padding: clamp(2px, 0.7cqw, 4px) clamp(5px, 1.3cqw, 8px) clamp(2px, 0.7cqw, 4px) clamp(19px, 5.2cqw, 28px);
    border: 1px solid rgba(60, 60, 52, 0.18);
    border-radius: 5px;
    background: rgba(248, 247, 241, 0.58);
    color: #2f2f2a;
    font-family: inherit;
    resize: vertical;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.word-list-doc-output-input:hover,
.word-list-doc-output-input:focus {
    border-color: rgba(60, 60, 52, 0.38);
    background: rgba(255, 255, 250, 0.86);
}

.account-shell {
    padding-top: 30px;
}

.account-brand-header,
.account-dashboard {
    width: min(1040px, 100%);
    margin-inline: auto;
}

.account-dashboard {
    display: grid;
    grid-template-columns: minmax(220px, 0.58fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.account-card {
    min-width: 0;
}

.account-profile-card {
    display: grid;
    gap: 16px;
    align-content: start;
    position: sticky;
    top: 18px;
}

.account-profile-mark {
    width: 70px;
    height: 70px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #fff6da, #6fe0dc);
    color: #08202d;
    font-size: 1.6rem;
    font-weight: 900;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 16px 28px rgba(0, 0, 0, 0.28);
}

.account-profile-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-profile-copy {
    display: grid;
    gap: 6px;
}

.account-title,
.account-card-head h2,
.account-section-head h3 {
    margin: 0;
}

.account-title {
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1;
}

.account-profile-copy p,
.account-muted,
.account-empty,
.account-error {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.account-error {
    color: #ffd1c6;
}

.account-signout-button,
.account-back-button {
    justify-content: center;
}

.account-history-card,
.account-word-lists-card,
.account-uploads-card {
    display: grid;
    gap: 14px;
}

.account-word-lists-card,
.account-uploads-card {
    grid-column: 2;
}

.account-card-head,
.account-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.account-card-head h2 {
    font-size: 1.18rem;
}

.account-history-list,
.account-word-list-history,
.account-upload-list,
.account-upload-grid {
    display: grid;
    gap: 10px;
}

.account-upload-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

@media (min-width: 1100px) {
    .account-upload-grid > .account-upload-section:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .account-upload-grid > .account-upload-section:last-child:nth-child(odd) .account-upload-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.account-upload-section {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.account-section-head {
    justify-content: flex-start;
}

.account-section-icon,
.account-row-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(150, 255, 247, 0.1);
    color: #dffcff;
    flex: 0 0 auto;
}

.account-history-row.is-relic-mode,
.account-upload-section.is-relic-mode {
    --account-mode-accent: 201, 154, 86;
    --account-mode-glow: 255, 221, 146;
    --account-mode-icon: #ffde94;
    --account-played-accent: 228, 125, 61;
    --account-played-glow: 255, 171, 92;
    --account-played-icon: #ffd8a5;
}

.account-history-row.is-pictionary-mode,
.account-upload-section.is-pictionary-mode {
    --account-mode-accent: 243, 240, 229;
    --account-mode-glow: 220, 229, 229;
    --account-mode-icon: #f4f0e5;
    --account-played-accent: 194, 138, 33;
    --account-played-glow: 199, 144, 35;
    --account-played-icon: #f2d38a;
}

.account-history-row.is-vault-mode,
.account-upload-section.is-vault-mode {
    --account-mode-accent: 134, 199, 255;
    --account-mode-glow: 120, 186, 255;
    --account-mode-icon: #cde9ff;
    --account-played-accent: 235, 176, 78;
    --account-played-glow: 255, 205, 112;
    --account-played-icon: #ffe1a0;
}

.account-section-mode-icon,
.account-row-mode-icon {
    width: 20px;
    height: 20px;
}

.account-history-row,
.account-upload-row {
    --account-row-accent: var(--account-mode-accent, 150, 255, 247);
    --account-row-glow: var(--account-mode-glow, 150, 255, 247);
    min-width: 0;
    min-height: 58px;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid rgba(var(--account-row-accent), 0.14);
    background: linear-gradient(90deg, rgba(var(--account-row-glow), 0.1), transparent 62%), rgba(5, 18, 29, 0.48);
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-upload-row.is-played-source {
    --account-row-accent: var(--account-played-accent, 125, 214, 205);
    --account-row-glow: var(--account-played-glow, 125, 214, 205);
}

.account-history-row .account-row-icon,
.account-upload-section .account-section-icon {
    background: rgba(var(--account-mode-accent, 150, 255, 247), 0.14);
    color: var(--account-mode-icon, #dffcff);
}

.account-row-main {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.account-row-main strong,
.account-upload-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-row-main span,
.account-row-meta {
    color: var(--text-soft);
    font-size: 0.86rem;
}

.account-row-meta {
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

.account-history-row {
    display: grid;
    align-items: stretch;
    gap: 0;
}

.account-history-row-summary {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-history-expand-button {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(var(--account-row-accent), 0.2);
    background: linear-gradient(180deg, rgba(var(--account-row-glow), 0.14), transparent), rgba(255, 255, 255, 0.04);
    color: var(--account-mode-icon, #dffcff);
    cursor: pointer;
}

.account-history-expand-button:hover,
.account-history-expand-button:focus-visible {
    border-color: rgba(var(--account-row-accent), 0.38);
    background: linear-gradient(180deg, rgba(var(--account-row-glow), 0.2), transparent), rgba(255, 255, 255, 0.07);
}

.account-history-expand-icon {
    width: 19px;
    height: 19px;
}

.account-history-player-results {
    min-width: 0;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--account-row-accent), 0.12);
}

.player-results-list {
    min-width: 0;
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 8px;
    overflow: auto;
}

.player-result-row {
    --player-result-accent: rgba(185, 214, 226, 0.76);
    --player-result-bg: rgba(255, 255, 255, 0.065);
    --player-result-border: rgba(255, 255, 255, 0.12);
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr) minmax(92px, auto);
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--player-result-border);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--player-result-accent), transparent 86%), transparent 58%), var(--player-result-bg);
}

.player-result-row.is-place-1 {
    --player-result-accent: rgba(255, 214, 113, 0.92);
}

.player-result-row.is-place-2 {
    --player-result-accent: rgba(202, 220, 232, 0.86);
}

.player-result-row.is-place-3 {
    --player-result-accent: rgba(231, 160, 98, 0.82);
}

.player-result-row.is-unplaced {
    --player-result-accent: rgba(159, 176, 185, 0.42);
    opacity: 0.82;
}

.player-result-place {
    color: color-mix(in srgb, var(--player-result-accent), white 18%);
    font-size: 0.86rem;
    font-weight: 950;
    white-space: nowrap;
}

.player-result-name {
    min-width: 0;
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
    color: currentColor;
    font-weight: 850;
    line-height: 1.12;
}

.player-result-value {
    justify-self: end;
    color: color-mix(in srgb, var(--player-result-accent), white 12%);
    font-size: 0.92rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.player-results-list.is-compact {
    max-height: 260px;
    gap: 6px;
}

.player-results-list.is-compact .player-result-row {
    min-height: 40px;
    padding: 7px 10px;
    grid-template-columns: minmax(68px, auto) minmax(0, 1fr) minmax(74px, auto);
}

.player-results-empty {
    margin: 0;
    color: var(--text-soft);
    font-weight: 800;
}

.account-upload-row {
    display: grid;
    align-content: center;
    gap: 4px;
}

.account-upload-row.is-actionable {
    width: 100%;
    position: relative;
    padding-right: 34px;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background-color 150ms ease;
}

.account-upload-row.is-actionable::after {
    content: "\203A";
    position: absolute;
    right: 13px;
    top: 50%;
    color: rgba(var(--account-row-accent), 0.78);
    font-size: 1.55rem;
    line-height: 1;
    transform: translateY(-54%);
}

.account-upload-row.is-actionable:hover,
.account-upload-row.is-actionable:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(var(--account-row-accent), 0.42);
    background-color: rgba(var(--account-row-glow), 0.12);
}

.account-upload-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-left: 0;
}

.account-upload-meta-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-source-badge {
    flex: 0 0 auto;
    min-width: 0;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0;
}

.account-source-badge.is-uploaded-source {
    background: rgba(var(--account-mode-accent, 150, 255, 247), 0.14);
    color: var(--account-mode-icon, #dffcff);
}

.account-source-badge.is-played-source {
    background: rgba(var(--account-played-accent, 125, 214, 205), 0.18);
    color: var(--account-played-icon, #dffcff);
}

.account-card-action {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.86rem;
    white-space: nowrap;
}

.account-word-list-row {
    min-width: 0;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid rgba(150, 255, 247, 0.14);
    border-radius: 18px;
    background: rgba(5, 18, 29, 0.48);
    color: inherit;
    cursor: pointer;
    font: inherit;
    display: grid;
    gap: 4px;
    text-align: left;
}

.account-word-list-row:hover,
.account-word-list-row:focus-visible {
    border-color: rgba(150, 255, 247, 0.32);
    background: rgba(11, 35, 51, 0.72);
}

.account-word-list-name,
.account-word-list-meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-word-list-name {
    font-weight: 800;
}

.account-word-list-meta {
    color: var(--text-soft);
    font-size: 0.86rem;
}

.account-signin-card {
    width: min(430px, 100%);
    margin: max(42px, 14vh) auto 0;
    margin: max(42px, 14svh) auto 0;
    display: grid;
    gap: 18px;
    justify-items: center;
    text-align: center;
}

.account-signin-head {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
}

.account-signin-mark {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    background: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 14px 26px rgba(0, 0, 0, 0.24);
}

.account-signin-gmail-icon {
    width: 30px;
    height: 30px;
    display: block;
}

.google-signin-slot {
    width: min(320px, 100%);
    min-height: 44px;
    display: grid;
    place-items: center;
}

.page-shell.tool-shell.master1000-tool-shell {
    width: min(1920px, calc(100vw - 12px));
    max-width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    height: 100vh;
    height: 100svh;
    padding-top: 10px;
    padding-bottom: 8px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    box-sizing: border-box;
}

.master1000-tool-shell .tool-brand-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    margin-bottom: 10px;
    min-width: 0;
}

.master1000-tool-shell .brand-home {
    grid-column: 2;
    justify-self: center;
    min-width: 0;
    min-height: 0;
    align-self: center;
    line-height: 0.92;
    letter-spacing: 0.06em;
    text-align: center;
}

.master1000-tool-header-actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    flex-wrap: nowrap;
}

.master1000-tool-back-button,
.master1000-tool-header-button {
    min-height: 42px;
    padding: 0 16px;
    white-space: nowrap;
}

.master1000-tool-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.master1000-tool-button-label {
    display: inline-block;
}

.master1000-tool-tools-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1rem;
    font-size: 0;
    line-height: 0;
    flex: 0 0 auto;
}

.master1000-tool-tools-icon::before,
.master1000-tool-tools-icon::after {
    content: "";
    position: absolute;
    display: block;
    border-radius: 999px;
    background: currentColor;
}

.master1000-tool-tools-icon::before {
    left: 0.16rem;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    background: transparent;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    border-radius: 2px;
    transform: translateY(-50%) rotate(45deg);
}

.master1000-tool-tools-icon::after {
    left: 0.28rem;
    top: 50%;
    width: 0.72rem;
    height: 2px;
    transform: translateY(-50%);
}

.master1000-tool-fullscreen-icon {
    flex: 0 0 auto;
}

@media (max-width: 1320px) and (min-width: 980px) {
    .master1000-tool-icon-button {
        width: 42px;
        min-width: 42px;
        padding: 0;
        border-radius: 14px;
        gap: 0;
    }

    .master1000-tool-icon-button .master1000-tool-button-label {
        display: none;
    }
}

.master1000-tool-header-button.is-presenting .random-teams-fullscreen-icon::before,
.master1000-tool-overlay-fullscreen.is-presenting .random-teams-fullscreen-icon::before {
    opacity: 0.94;
    transform: translateY(-50%) scaleX(1);
}

.master1000-tool-header-button.is-presenting .random-teams-fullscreen-icon span,
.master1000-tool-overlay-fullscreen.is-presenting .random-teams-fullscreen-icon span {
    opacity: 0;
    transform: scale(0.4);
}

.master1000-tool-stage {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding-bottom: 8px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(150, 255, 247, 0.16);
    overflow: hidden;
}

.master1000-tool-frame-shell {
    position: relative;
    display: flex;
    flex: 0 1 auto;
    align-items: stretch;
    justify-content: center;
    width: auto;
    height: 100%;
    min-width: 0;
    min-height: 320px;
    max-width: 100%;
    max-height: 960px;
    aspect-ratio: 540 / 960;
    margin: 0 auto;
}

.master1000-tool-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border: 0;
    background: #000;
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.38);
}

.master1000-tool-overlay-fullscreen {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: calc(env(safe-area-inset-right, 0px) + 12px);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(220, 255, 252, 0.14);
    border-radius: 16px;
    background: rgba(4, 20, 31, 0.16);
    color: rgba(246, 252, 252, 0.82);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    z-index: 3;
}

.master1000-tool-overlay-fullscreen[hidden] {
    display: none;
}

.master1000-tool-stage:fullscreen,
.master1000-tool-stage:-webkit-full-screen {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    gap: 12px;
    padding: 12px;
    border-bottom: 0;
    background: radial-gradient(circle at top, rgba(17, 44, 64, 0.92), rgba(5, 10, 16, 0.98) 72%), #050a10;
}

.master1000-tool-stage:fullscreen .master1000-tool-frame-shell,
.master1000-tool-stage:-webkit-full-screen .master1000-tool-frame-shell,
.master1000-tool-stage:fullscreen .master1000-tool-frame,
.master1000-tool-stage:-webkit-full-screen .master1000-tool-frame {
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.master1000-tool-stage:fullscreen .master1000-tool-frame,
.master1000-tool-stage:-webkit-full-screen .master1000-tool-frame {
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
}

#app.master1000-shell-immersive .page-shell.tool-shell.master1000-tool-shell {
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    min-height: 100svh;
    height: 100vh;
    height: 100svh;
    padding: 0;
}

#app.master1000-shell-immersive .master1000-tool-shell .tool-brand-header,
#app.master1000-shell-immersive .master1000-tool-shell #screen-banner {
    display: none;
}

#app.master1000-shell-immersive .master1000-tool-stage {
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) calc(env(safe-area-inset-right, 0px) + 8px)
        calc(env(safe-area-inset-bottom, 0px) + 8px) calc(env(safe-area-inset-left, 0px) + 8px);
    border-bottom: 0;
    background: radial-gradient(circle at top, rgba(17, 44, 64, 0.92), rgba(5, 10, 16, 0.98) 72%), #050a10;
    z-index: 40;
}

#app.master1000-shell-immersive .master1000-tool-frame-shell,
#app.master1000-shell-immersive .master1000-tool-frame {
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

#app.master1000-shell-immersive .master1000-tool-frame {
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
}

@media (max-width: 860px), (pointer: coarse) {
    #app.master1000-shell-immersive .master1000-tool-stage {
        padding: 0;
    }

    #app.master1000-shell-immersive .master1000-tool-frame-shell,
    #app.master1000-shell-immersive .master1000-tool-frame {
        width: 100%;
        max-width: none;
        max-height: none;
    }

    #app.master1000-shell-immersive .master1000-tool-frame-shell {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        aspect-ratio: auto;
        margin: 0;
    }

    #app.master1000-shell-immersive .master1000-tool-frame {
        border-radius: 0;
        box-shadow: none;
    }

    #app.master1000-shell-immersive .master1000-tool-overlay-fullscreen {
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        right: calc(env(safe-area-inset-right, 0px) + 10px);
        background: rgba(4, 20, 31, 0.12);
    }
}

.master1000-tool-empty-card {
    padding: 0;
    overflow: hidden;
    background: #000;
    min-height: 0;
    height: 100%;
    border-radius: 22px;
}

.master1000-tool-empty {
    min-height: inherit;
    display: grid;
    place-content: center;
    gap: 12px;
    padding: 28px;
    text-align: center;
}

.master1000-tool-empty-title {
    margin: 0;
    font-size: clamp(1.24rem, 4.1vw, 1.82rem);
    line-height: 1.08;
}

.master1000-tool-empty-body {
    margin: 0 auto;
    max-width: 760px;
    color: var(--text-soft);
    line-height: 1.6;
}

.gimcheon-school-secret-hit {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 80;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0.02;
}

#app.gimcheon-school-active {
    background: #eef3ed;
    color: #1e2a2a;
}

.gimcheon-school-page {
    min-height: 100vh;
    min-height: 100svh;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 246, 242, 0.84) 58%, #e6efe9), #eef3ed;
    color: #1e2a2a;
    font-family: "Segoe UI", "Noto Sans KR", sans-serif;
}

.gimcheon-school-topbar,
.gimcheon-school-shell {
    width: min(1180px, calc(100vw - 40px));
    margin: 0 auto;
}

.gimcheon-school-topbar {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.gimcheon-school-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #153f33;
}

.gimcheon-school-brand-mark {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #0f5c42;
    box-shadow: 0 10px 20px rgba(26, 67, 50, 0.16);
}

.gimcheon-school-brand-mark img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.gimcheon-school-brand-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.gimcheon-school-brand-copy strong {
    overflow: hidden;
    color: #0f5c42;
    font-size: 1.22rem;
    font-weight: 950;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gimcheon-school-brand-copy small {
    overflow: hidden;
    color: #5b6d67;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gimcheon-school-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.gimcheon-school-nav a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid rgba(34, 67, 57, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #1f4338;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(43, 65, 57, 0.08);
}

.gimcheon-school-nav a:hover {
    border-color: rgba(21, 89, 64, 0.32);
    background: #ffffff;
}

.gimcheon-school-shell {
    display: grid;
    gap: 20px;
    padding: 0 0 42px;
}

.gimcheon-school-hero {
    position: relative;
    min-height: min(540px, calc(100svh - 112px));
    display: grid;
    align-items: end;
    overflow: hidden;
    border-radius: 8px;
    background: #173c32;
    box-shadow: 0 18px 48px rgba(34, 57, 48, 0.16);
}

.gimcheon-school-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(11, 43, 34, 0.88) 0%, rgba(11, 43, 34, 0.62) 42%, rgba(11, 43, 34, 0.12) 100%),
        linear-gradient(0deg, rgba(11, 43, 34, 0.48), rgba(11, 43, 34, 0.04));
}

.gimcheon-school-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gimcheon-school-info-band,
.gimcheon-profile-card,
.gimcheon-symbol-card,
.gimcheon-chat-panel {
    border: 1px solid rgba(31, 67, 55, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 250, 0.88);
    box-shadow: 0 18px 48px rgba(34, 57, 48, 0.12);
}

.gimcheon-school-hero-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 16px;
    max-width: 760px;
    padding: 52px;
    color: #fffdf2;
}

.gimcheon-school-hero-mark {
    width: 106px;
    height: 106px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: rgba(16, 91, 65, 0.72);
    box-shadow: 0 16px 36px rgba(7, 29, 23, 0.28);
}

.gimcheon-school-hero-mark img {
    width: 74px;
    height: 74px;
    object-fit: contain;
}

.gimcheon-school-kicker {
    width: max-content;
    max-width: 100%;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 221, 128, 0.2);
    color: #ffe4a8;
    font-size: 0.86rem;
    font-weight: 900;
}

.gimcheon-school-hero h1 {
    margin: 0;
    font-size: 5.1rem;
    line-height: 0.94;
    letter-spacing: 0;
    word-break: keep-all;
    text-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}

.gimcheon-school-hero p {
    margin: 0;
    max-width: 620px;
    color: rgba(255, 255, 246, 0.86);
    font-size: 1.32rem;
    font-weight: 700;
}

.gimcheon-school-hero .gimcheon-school-identity {
    max-width: 700px;
    color: rgba(255, 255, 246, 0.78);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.55;
}

.gimcheon-school-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.gimcheon-fact-tile {
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.gimcheon-fact-tile span,
.gimcheon-section-head span,
.gimcheon-profile-card span,
.gimcheon-symbol-card span,
.gimcheon-school-info-band span {
    color: rgba(255, 224, 154, 0.96);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.gimcheon-fact-tile strong,
.gimcheon-fact-tile small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gimcheon-fact-tile strong {
    color: #ffffff;
    font-size: 1rem;
}

.gimcheon-fact-tile small {
    color: rgba(255, 255, 245, 0.72);
    font-weight: 700;
}

.gimcheon-school-profile-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.gimcheon-profile-card,
.gimcheon-symbol-card {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 16px;
}

.gimcheon-profile-card.is-wide {
    grid-column: span 2;
}

.gimcheon-profile-card span,
.gimcheon-symbol-card span,
.gimcheon-school-info-band span {
    color: #a0522d;
}

.gimcheon-profile-card strong,
.gimcheon-symbol-card strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #173c32;
    font-size: 1.08rem;
    line-height: 1.18;
}

.gimcheon-profile-card small,
.gimcheon-symbol-card p {
    margin: 0;
    color: #526761;
    line-height: 1.46;
}

.gimcheon-school-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
    gap: 18px;
}

.gimcheon-school-column {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 12px;
}

.gimcheon-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(32, 72, 58, 0.14);
    padding-bottom: 12px;
}

.gimcheon-section-head span {
    color: #a0522d;
}

.gimcheon-section-head h2 {
    margin: 0;
    color: #173c32;
    font-size: 1.64rem;
    line-height: 1;
}

.gimcheon-section-head.is-compact {
    margin-top: 8px;
}

.gimcheon-schedule-list,
.gimcheon-news-list,
.gimcheon-symbol-list {
    display: grid;
    gap: 10px;
}

.gimcheon-schedule-card,
.gimcheon-news-card {
    min-width: 0;
    border: 1px solid rgba(40, 76, 64, 0.14);
    border-radius: 8px;
    background: #fffffb;
}

.gimcheon-schedule-card {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    overflow: hidden;
}

.gimcheon-schedule-date {
    display: grid;
    place-items: center;
    padding: 16px 10px;
    background: #edf3ed;
    color: #21483c;
    font-weight: 950;
    line-height: 1.22;
    overflow-wrap: anywhere;
    text-align: center;
}

.gimcheon-schedule-card.is-exam .gimcheon-schedule-date {
    background: #fff1d1;
    color: #805100;
}

.gimcheon-schedule-card.is-holiday .gimcheon-schedule-date {
    background: #f8ded8;
    color: #873522;
}

.gimcheon-schedule-card.is-event .gimcheon-schedule-date {
    background: #e1edf7;
    color: #1f516f;
}

.gimcheon-schedule-copy {
    min-width: 0;
    display: grid;
    gap: 7px;
    padding: 14px 16px;
}

.gimcheon-schedule-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.gimcheon-schedule-title-row h3,
.gimcheon-news-card h3 {
    min-width: 0;
    margin: 0;
    color: #173c32;
    font-size: 1.05rem;
    line-height: 1.22;
}

.gimcheon-schedule-copy p,
.gimcheon-news-card p,
.gimcheon-school-info-band p {
    margin: 0;
    color: #526761;
    line-height: 1.48;
}

.gimcheon-source-pill {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 999px;
    background: #eef3ed;
    color: #315347;
    font-size: 0.72rem;
    font-weight: 950;
}

.gimcheon-source-pill.is-provided {
    background: #fff0d1;
    color: #805100;
}

.gimcheon-news-card {
    display: grid;
    gap: 7px;
    padding: 15px;
}

.gimcheon-news-card span {
    color: #a0522d;
    font-size: 0.8rem;
    font-weight: 900;
}

.gimcheon-school-info-band {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
    padding: 18px;
}

.gimcheon-school-info-band div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.gimcheon-school-info-band span {
    color: #a0522d;
}

.gimcheon-school-info-band strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #173c32;
    line-height: 1.28;
}

.gimcheon-school-info-band p {
    grid-column: 1 / -1;
    padding-top: 12px;
    border-top: 1px solid rgba(32, 72, 58, 0.12);
}

.gimcheon-chat-launcher {
    position: fixed;
    right: max(18px, env(safe-area-inset-right, 0px) + 18px);
    bottom: max(18px, env(safe-area-inset-bottom, 0px) + 18px);
    z-index: 90;
    width: 76px;
    height: 76px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1px;
    background: #184837;
    color: #fffdf2;
    box-shadow: 0 16px 34px rgba(26, 55, 45, 0.28);
}

.gimcheon-chat-launcher span {
    font-size: 1.25rem;
    font-weight: 950;
    line-height: 1;
}

.gimcheon-chat-launcher strong {
    font-size: 0.78rem;
    line-height: 1;
}

.gimcheon-chat-launcher.is-open {
    background: #a0522d;
}

.gimcheon-chat-panel {
    position: fixed;
    right: max(18px, env(safe-area-inset-right, 0px) + 18px);
    bottom: max(106px, env(safe-area-inset-bottom, 0px) + 106px);
    z-index: 91;
    width: min(420px, calc(100vw - 28px));
    max-height: min(680px, calc(100svh - 128px));
    display: grid;
    grid-template-rows: auto minmax(180px, 1fr) auto auto;
    overflow: hidden;
    border: 1px solid rgba(24, 72, 55, 0.16);
    border-radius: 8px;
    background: #fffdf4;
    box-shadow: 0 24px 60px rgba(28, 54, 46, 0.26);
}

.gimcheon-chat-head,
.gimcheon-chat-compose {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #184837;
    color: #fffdf2;
}

.gimcheon-chat-head {
    justify-content: space-between;
}

.gimcheon-chat-head div {
    display: grid;
    gap: 2px;
}

.gimcheon-chat-head span {
    color: #ffdf91;
    font-size: 0.76rem;
    font-weight: 900;
}

.gimcheon-chat-head strong {
    font-size: 1.05rem;
}

.gimcheon-chat-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fffdf2;
    font-size: 1.35rem;
    line-height: 1;
}

.gimcheon-chat-launcher:hover,
.gimcheon-chat-close:hover,
.gimcheon-chat-prompts button:hover,
.gimcheon-chat-compose button:hover:not(:disabled) {
    filter: brightness(1.04);
}

.gimcheon-chat-launcher:focus-visible,
.gimcheon-chat-close:focus-visible,
.gimcheon-chat-prompts button:focus-visible,
.gimcheon-chat-compose textarea:focus-visible,
.gimcheon-chat-compose button:focus-visible {
    outline: 3px solid #d1973f;
    outline-offset: 3px;
}

.gimcheon-chat-compose textarea:focus-visible {
    border-color: rgba(24, 72, 55, 0.48);
    outline-offset: 0;
}

.gimcheon-chat-body {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 14px;
    overflow-y: auto;
    background: #f9faf4;
}

.gimcheon-chat-message {
    max-width: 88%;
    display: grid;
    justify-self: start;
}

.gimcheon-chat-message.is-user {
    justify-self: end;
}

.gimcheon-chat-message > p,
.gimcheon-chat-bubble {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #ffffff;
    color: #273936;
    line-height: 1.48;
    box-shadow: 0 6px 16px rgba(37, 62, 54, 0.08);
}

.gimcheon-chat-message.is-user > p,
.gimcheon-chat-message.is-user .gimcheon-chat-bubble {
    background: #dbece5;
    color: #173c32;
}

.gimcheon-chat-bubble p {
    margin: 0;
}

.gimcheon-chat-bubble p + p,
.gimcheon-chat-bubble p + ul,
.gimcheon-chat-bubble ul + p {
    margin-top: 10px;
}

.gimcheon-chat-bubble ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

.gimcheon-chat-bubble ul:first-child {
    margin-top: 0;
}

.gimcheon-chat-bubble li + li {
    margin-top: 4px;
}

.gimcheon-chat-bubble strong {
    color: #174738;
    font-weight: 800;
}

.gimcheon-chat-message.is-user .gimcheon-chat-bubble strong {
    color: #102f28;
}

.gimcheon-chat-bubble code {
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(24, 72, 55, 0.08);
    font: inherit;
}

.gimcheon-chat-bubble a {
    color: #145947;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gimcheon-chat-message.is-loading {
    max-width: 94%;
}

.gimcheon-chat-message.is-loading .spinner {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-color: rgba(24, 72, 55, 0.22);
    border-top-color: #184837;
}

.gimcheon-chat-message.is-loading .gimcheon-chat-bubble {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #315347;
}

.gimcheon-chat-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 1px;
}

.gimcheon-chat-typing-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c48a34;
    animation: gimcheon-chat-dot 1.15s ease-in-out infinite;
}

.gimcheon-chat-typing-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.gimcheon-chat-typing-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

.gimcheon-chat-prompts {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    background: #fffdf4;
    border-top: 1px solid rgba(40, 76, 64, 0.12);
}

.gimcheon-chat-prompts button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(40, 76, 64, 0.16);
    border-radius: 999px;
    background: #ffffff;
    color: #315347;
    font-size: 0.86rem;
    font-weight: 800;
}

.gimcheon-chat-prompts button:hover,
.gimcheon-chat-prompts button:focus-visible {
    border-color: rgba(24, 72, 55, 0.32);
    color: #173c32;
}

.gimcheon-chat-compose {
    background: #fffdf4;
    border-top: 1px solid rgba(40, 76, 64, 0.12);
}

.gimcheon-chat-compose textarea {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 120px;
    resize: vertical;
    border: 1px solid rgba(40, 76, 64, 0.18);
    border-radius: 8px;
    padding: 9px 10px;
    background: #ffffff;
    color: #203330;
}

.gimcheon-chat-compose button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: #184837;
    color: #fffdf2;
    font-weight: 900;
}

.gimcheon-chat-compose button:disabled {
    opacity: 0.56;
    cursor: wait;
}

@keyframes gimcheon-chat-dot {
    0%,
    70%,
    100% {
        transform: translateY(0);
        opacity: 0.45;
    }

    35% {
        transform: translateY(-3px);
        opacity: 1;
    }
}

@media (max-width: 920px) {
    .gimcheon-school-topbar,
    .gimcheon-school-shell {
        width: min(100vw - 28px, 720px);
    }

    .gimcheon-school-profile-grid,
    .gimcheon-school-info-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gimcheon-school-grid {
        grid-template-columns: 1fr;
    }

    .gimcheon-school-hero {
        min-height: 470px;
    }

    .gimcheon-school-hero-copy {
        padding: 40px;
    }

    .gimcheon-school-hero h1 {
        font-size: 3.7rem;
    }

    .gimcheon-section-head {
        justify-content: flex-start;
    }

    .gimcheon-section-head h2 {
        font-size: 1.5rem;
    }

    .gimcheon-school-info-band p,
    .gimcheon-profile-card.is-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .gimcheon-school-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        min-height: 66px;
        padding: 10px 0;
    }

    .gimcheon-school-brand-mark {
        width: 42px;
        height: 42px;
    }

    .gimcheon-school-brand-mark img {
        width: 30px;
        height: 30px;
    }

    .gimcheon-school-nav {
        justify-content: flex-start;
    }

    .gimcheon-school-nav a {
        min-height: 36px;
        padding: 0 10px;
        font-size: 0.86rem;
    }

    .gimcheon-school-hero,
    .gimcheon-school-grid,
    .gimcheon-school-profile-grid,
    .gimcheon-school-info-band {
        grid-template-columns: 1fr;
    }

    .gimcheon-school-hero {
        min-height: 560px;
    }

    .gimcheon-school-hero::after {
        background:
            linear-gradient(180deg, rgba(11, 43, 34, 0.88) 0%, rgba(11, 43, 34, 0.72) 62%, rgba(11, 43, 34, 0.5) 100%),
            linear-gradient(0deg, rgba(11, 43, 34, 0.38), rgba(11, 43, 34, 0.06));
    }

    .gimcheon-school-hero-copy {
        padding: 24px;
    }

    .gimcheon-school-hero-mark {
        width: 82px;
        height: 82px;
    }

    .gimcheon-school-hero-mark img {
        width: 58px;
        height: 58px;
    }

    .gimcheon-school-hero h1 {
        font-size: 2.72rem;
    }

    .gimcheon-school-hero p {
        font-size: 1.06rem;
    }

    .gimcheon-school-facts {
        grid-template-columns: 1fr;
    }

    .gimcheon-schedule-card {
        grid-template-columns: 1fr;
    }

    .gimcheon-schedule-date {
        place-items: start;
        padding: 12px 14px;
        text-align: left;
    }

    .gimcheon-chat-launcher {
        width: 66px;
        height: 66px;
    }

    .gimcheon-chat-panel {
        left: 12px;
        right: 12px;
        bottom: max(92px, env(safe-area-inset-bottom, 0px) + 92px);
        width: auto;
        max-height: min(620px, calc(100svh - 110px));
    }
}

.random-teams-stage-head {
    align-items: center;
}

.random-teams-layout {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
    align-items: stretch;
}

.random-teams-config-card,
.random-teams-stage-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.random-teams-config-card {
    gap: 18px;
    height: auto;
    align-self: start;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.random-teams-config-card.is-active-section .random-teams-sentence {
    color: var(--text);
}

.random-teams-config-card.is-active-section .random-teams-mode-toggle {
    border-color: rgba(240, 194, 92, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(255, 243, 211, 0.08);
}

.random-teams-sentence {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
}

.random-teams-today-count {
    margin: -6px 0 0;
    color: rgba(164, 255, 250, 0.88);
    font-size: 0.94rem;
    font-weight: 750;
    line-height: 1.3;
}

.random-teams-today-count[hidden] {
    display: none;
}

.random-teams-mode-toggle {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    align-self: start;
    gap: 0;
    min-height: 46px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(150, 255, 247, 0.24);
    background: rgba(4, 20, 31, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.random-teams-mode-toggle .mode-chip-button {
    min-height: 36px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.random-teams-mode-toggle .mode-chip-button.selected {
    background: linear-gradient(180deg, rgba(164, 255, 250, 0.98), rgba(31, 225, 209, 0.84));
    color: #062230;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.52),
        0 10px 18px rgba(6, 29, 41, 0.24);
}

.random-teams-inline-field {
    display: inline-flex;
    flex: 0 0 auto;
    width: 5rem;
}

.random-teams-inline-field input {
    width: 100%;
    min-height: 46px;
    padding: 0 10px;
    border-radius: 16px;
    text-align: center;
    font-size: 1.08rem;
    font-weight: 800;
}

.random-teams-exclusion-field {
    align-items: start;
}

.random-teams-exclusion-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}

.random-teams-exclusion-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding-right: 4px;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid rgba(150, 255, 247, 0.24);
    background: rgba(3, 16, 25, 0.9);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.random-teams-exclusion-field .random-teams-exclusion-pill input {
    width: 74px;
    min-width: 74px;
    min-height: 42px;
    border: 0;
    background: transparent;
    text-align: center;
    padding: 0 6px 0 10px;
    font-weight: 700;
    font-size: 0.9rem;
    flex: 0 0 auto;
}

.random-teams-exclusion-remove {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(150, 255, 247, 0.22);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
}

.random-teams-exclusion-remove:not(:disabled):hover,
.random-teams-exclusion-remove:focus-visible {
    border-color: var(--line-bright);
    background: rgba(150, 255, 247, 0.22);
}

.random-teams-mobile-exclusion-submit {
    position: fixed;
    display: inline-grid;
    place-items: center;
    left: max(14px, calc(env(safe-area-inset-left, 0px) + 14px));
    right: max(14px, calc(env(safe-area-inset-right, 0px) + 14px));
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--random-teams-mobile-submit-offset, 0px) + 10px);
    z-index: 28;
    min-height: 46px;
    padding: 0 18px;
    overflow: visible;
    isolation: isolate;
    border-radius: 999px;
    border: 1px solid rgba(150, 255, 247, 0.34);
    background: rgba(8, 24, 36, 0.94);
    color: var(--text);
    font-weight: 700;
    letter-spacing: 0;
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(31, 225, 209, 0.08);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.random-teams-mobile-exclusion-submit::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -8px;
    right: -8px;
    top: -12px;
    bottom: -12px;
    border-radius: 24px;
    border: 1px solid rgba(150, 255, 247, 0.14);
    background:
        linear-gradient(180deg, rgba(7, 22, 34, 0.98), rgba(4, 16, 26, 0.92)),
        linear-gradient(180deg, rgba(31, 225, 209, 0.08), rgba(31, 225, 209, 0));
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(31, 225, 209, 0.06);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.random-teams-mobile-exclusion-submit:not(:disabled):hover,
.random-teams-mobile-exclusion-submit:focus-visible {
    border-color: rgba(164, 255, 250, 0.62);
    box-shadow:
        0 0 0 3px rgba(31, 225, 209, 0.12),
        0 18px 40px rgba(0, 0, 0, 0.28);
}

.random-teams-mobile-exclusion-submit[hidden] {
    display: none;
}

@media (min-width: 641px) {
    .random-teams-mobile-exclusion-submit {
        display: none !important;
    }
}

.random-teams-exclusion-pill:focus-within {
    border-color: var(--line-bright);
    box-shadow: 0 0 0 3px rgba(39, 208, 195, 0.14);
}

.random-teams-exclusion-pill.is-invalid {
    border-color: rgba(255, 142, 120, 0.64);
    box-shadow: 0 0 0 2px rgba(255, 142, 120, 0.12);
}

.random-teams-exclusion-pill.is-duplicate-absorbed,
.member-token.is-duplicate-absorbed {
    animation: duplicate-exclusion-absorbed 820ms ease;
}

.random-teams-helper {
    min-height: 1.2rem;
    margin: 0;
    color: var(--danger);
    font-size: 0.92rem;
}

.random-teams-start-button {
    min-height: 58px;
    min-width: 164px;
    font-size: 1.08rem;
    margin-top: 0;
}

.random-teams-start-button.is-repeat-action {
    background: linear-gradient(135deg, var(--teal-soft), var(--teal));
    color: #062230;
    box-shadow:
        0 14px 28px rgba(20, 147, 154, 0.34),
        0 0 32px rgba(79, 235, 225, 0.14);
}

.random-teams-stage-card {
    gap: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.random-teams-stage-card.is-active-section {
    border-width: var(--active-panel-outline-width);
    border-color: var(--gold-surface-border);
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.34),
        0 0 0 var(--active-panel-outline-width) var(--gold-surface-line),
        0 0 28px rgba(244, 192, 79, 0.12);
}

.random-teams-stage-card.is-active-section .random-teams-stage {
    box-shadow:
        inset 0 0 0 1px rgba(255, 247, 226, 0.04),
        inset 0 1px 0 rgba(255, 249, 236, 0.05);
}

.random-teams-presentation-scrim {
    display: none;
}

.is-random-teams-presenting .random-teams-presentation-scrim {
    position: fixed;
    inset: 0;
    z-index: 34;
    display: block;
    width: 100%;
    border: 0;
    background: radial-gradient(circle at 50% 24%, rgba(31, 225, 209, 0.1), transparent 42%), rgba(1, 8, 13, 0.74);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.is-random-teams-presenting:not(.has-random-teams-result) .random-teams-config-card {
    position: fixed;
    z-index: 36;
    top: clamp(88px, 10vh, 126px);
    left: max(12px, env(safe-area-inset-left, 0px));
    width: min(400px, calc(100vw - 76px));
    max-height: calc(100vh - clamp(104px, 12vh, 148px));
    max-height: calc(100svh - clamp(104px, 12svh, 148px));
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 1;
    box-shadow:
        0 0 0 1px rgba(164, 255, 250, 0.1),
        0 30px 70px rgba(0, 0, 0, 0.52),
        0 0 50px rgba(31, 225, 209, 0.1);
    transition:
        opacity 180ms ease,
        box-shadow 180ms ease;
}

.is-random-teams-presenting.has-random-teams-result .random-teams-config-card {
    display: none;
}

.is-random-teams-presenting:not(.has-random-teams-result) .random-teams-start-button {
    order: -1;
    min-height: 50px;
}

@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
    .is-random-teams-presenting:not(.has-random-teams-result) .random-teams-config-card {
        opacity: 0.72;
    }

    .is-random-teams-presenting:not(.has-random-teams-result) .random-teams-config-card:hover,
    .is-random-teams-presenting:not(.has-random-teams-result) .random-teams-config-card:focus-within {
        opacity: 1;
        box-shadow:
            0 0 0 1px rgba(164, 255, 250, 0.14),
            0 34px 82px rgba(0, 0, 0, 0.58),
            0 0 66px rgba(31, 225, 209, 0.14);
    }
}

.is-random-teams-presenting .random-teams-stage-card {
    position: fixed;
    z-index: 35;
    inset: clamp(72px, 8vh, 112px) clamp(12px, 2vw, 36px) clamp(10px, 2vw, 24px);
    height: auto;
    min-height: 0;
    border-color: rgba(150, 255, 247, 0.42);
    box-shadow:
        0 0 0 1px rgba(164, 255, 250, 0.1),
        0 34px 90px rgba(0, 0, 0, 0.56),
        0 0 80px rgba(31, 225, 209, 0.1);
}

.is-random-teams-presentation-settling .random-teams-stage-card {
    visibility: hidden;
}

.random-teams-stage {
    /* Token shape experiment: set both radius variables to 50% to revert soft squares back to orbs. */
    --random-teams-presentation-scale: 1;
    --random-team-token-radius: 22px;
    --random-team-token-inner-radius: 17px;
    --random-team-preview-token-radius: 10px;
    flex: 1 1 auto;
    position: relative;
    min-height: 540px;
    height: 100%;
    border-radius: inherit;
    border: 0;
    background:
        radial-gradient(circle at 18% 14%, rgba(31, 225, 209, 0.13), transparent 22%),
        radial-gradient(circle at 88% 10%, rgba(164, 255, 250, 0.1), transparent 18%),
        linear-gradient(180deg, rgba(8, 28, 42, 0.96), rgba(4, 16, 27, 0.98));
    overflow: hidden;
    overflow: clip;
    padding: 24px;
}

.is-random-teams-presenting .random-teams-stage {
    --random-team-token-radius: calc(22px * var(--random-teams-presentation-scale));
    --random-team-token-inner-radius: calc(17px * var(--random-teams-presentation-scale));
    min-height: 100%;
    padding: calc(42px * var(--random-teams-presentation-scale)) calc(34px * var(--random-teams-presentation-scale))
        calc(24px * var(--random-teams-presentation-scale));
    overflow: hidden;
}

.is-random-teams-presenting .random-teams-board {
    height: 100%;
    min-height: auto;
    align-content: start;
    gap: calc(18px * var(--random-teams-presentation-scale));
}

.is-random-teams-presenting .random-teams-stage:not(.has-order-result) .random-teams-board {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: calc(3px * var(--random-teams-presentation-scale));
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.random-teams-stage-controls {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 8;
    display: flex;
    gap: 8px;
    align-items: center;
}

.is-random-teams-presenting:not(.has-random-teams-result) .random-teams-stage-controls {
    right: calc(34px * var(--random-teams-presentation-scale));
    left: auto;
}

.random-teams-stage.has-order-result .random-teams-stage-controls {
    top: 38px;
    left: 24px;
    width: auto;
    justify-content: flex-start;
}

.is-random-teams-presenting .random-teams-stage.has-order-result .random-teams-stage-controls {
    top: max(38px, calc(42px * var(--random-teams-presentation-scale) + 10px));
    left: calc(34px * var(--random-teams-presentation-scale));
}

.random-teams-fullscreen-button,
.random-teams-sound-button,
.random-teams-animation-button,
.random-teams-excluded-floor-button,
.random-teams-wipe-button,
.random-teams-late-add-toggle,
.random-teams-late-remove-toggle {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 14px;
    border: 1px solid rgba(150, 255, 247, 0.22);
    background: rgba(4, 20, 31, 0.56);
    color: var(--text);
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.random-teams-late-add-toggle {
    padding: 0;
}

.random-teams-late-remove-toggle {
    padding: 0;
}

.random-teams-late-add-anchor {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.random-teams-late-add-toggle[hidden],
.random-teams-late-remove-toggle[hidden],
.random-teams-late-add-panel[hidden] {
    display: none;
}

.random-teams-late-add-icon {
    width: 24px;
    height: 24px;
    overflow: visible;
}

.random-teams-late-remove-icon {
    width: 24px;
    height: 24px;
    overflow: visible;
}

.random-teams-late-add-token,
.random-teams-late-add-badge {
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.random-teams-late-remove-token,
.random-teams-late-remove-badge {
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.random-teams-late-add-token {
    fill: rgba(150, 255, 247, 0.16);
}

.random-teams-late-remove-token {
    fill: rgba(255, 204, 170, 0.14);
}

.random-teams-late-add-badge {
    fill: rgba(35, 211, 196, 0.22);
}

.random-teams-late-remove-badge {
    fill: rgba(255, 148, 94, 0.2);
}

.random-teams-late-add-shine,
.random-teams-late-add-plus {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:
        opacity 160ms ease,
        transform 180ms ease;
}

.random-teams-late-remove-shine,
.random-teams-late-remove-minus {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:
        opacity 160ms ease,
        transform 180ms ease;
}

.random-teams-late-add-shine {
    opacity: 0.72;
}

.random-teams-late-remove-shine {
    opacity: 0.72;
}

.random-teams-late-add-plus {
    transform-origin: 16.95px 16.25px;
}

.random-teams-late-remove-minus {
    transform-origin: 16.95px 16.25px;
}

.random-teams-fullscreen-button[hidden] {
    display: none;
}

.random-teams-excluded-floor-button[hidden] {
    display: none;
}

.random-teams-fullscreen-button:not(:disabled):hover,
.random-teams-fullscreen-button:focus-visible,
.random-teams-sound-button:not(:disabled):hover,
.random-teams-sound-button:focus-visible,
.random-teams-animation-button:not(:disabled):hover,
.random-teams-animation-button:focus-visible,
.random-teams-excluded-floor-button:not(:disabled):hover,
.random-teams-excluded-floor-button:focus-visible,
.random-teams-late-add-toggle:not(:disabled):hover,
.random-teams-late-add-toggle:focus-visible,
.random-teams-late-remove-toggle:not(:disabled):hover,
.random-teams-late-remove-toggle:focus-visible,
.random-teams-wipe-button:not(:disabled):hover,
.random-teams-wipe-button:focus-visible {
    border-color: rgba(164, 255, 250, 0.62);
    background: rgba(4, 20, 31, 0.68);
    box-shadow:
        0 0 0 3px rgba(31, 225, 209, 0.12),
        0 14px 26px rgba(0, 0, 0, 0.24);
}

.random-teams-fullscreen-button:disabled,
.random-teams-animation-button:disabled,
.random-teams-excluded-floor-button:disabled,
.random-teams-late-add-toggle:disabled,
.random-teams-late-remove-toggle:disabled,
.random-teams-wipe-button:disabled {
    cursor: default;
    opacity: 0.6;
}

.random-teams-late-add-toggle.is-active {
    border-color: rgba(164, 255, 250, 0.62);
    background: linear-gradient(135deg, rgba(30, 138, 123, 0.32), rgba(4, 20, 31, 0.72)), rgba(4, 20, 31, 0.68);
}

.random-teams-late-add-toggle:not(:disabled):hover .random-teams-late-add-plus,
.random-teams-late-add-toggle:focus-visible .random-teams-late-add-plus {
    transform: scale(1.06);
}

.random-teams-late-remove-toggle.is-active {
    border-color: rgba(255, 190, 150, 0.56);
    background: linear-gradient(135deg, rgba(158, 86, 41, 0.3), rgba(4, 20, 31, 0.72)), rgba(4, 20, 31, 0.68);
}

.random-teams-late-remove-toggle:not(:disabled):hover .random-teams-late-remove-minus,
.random-teams-late-remove-toggle:focus-visible .random-teams-late-remove-minus {
    transform: scaleX(1.08);
}

.random-teams-late-add-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(0, 74px) auto;
    gap: 6px;
    align-items: center;
    min-width: 146px;
    padding: 6px;
    border-radius: 999px;
    border: 1px solid rgba(150, 255, 247, 0.22);
    background: linear-gradient(180deg, rgba(11, 45, 65, 0.94), rgba(5, 18, 29, 0.96)), rgba(4, 20, 31, 0.92);
    box-shadow:
        0 16px 30px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.random-teams-late-add-field {
    display: block;
    min-width: 0;
    border-radius: 999px;
    border: 1px solid rgba(150, 255, 247, 0.18);
    background: rgba(3, 16, 25, 0.88);
}

.random-teams-late-add-field input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 10px 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    text-align: center;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    box-shadow: none;
}

.random-teams-late-add-field input::placeholder {
    color: rgba(233, 247, 255, 0.42);
}

.random-teams-late-add-field:focus-within {
    border-color: var(--line-bright);
    box-shadow: 0 0 0 3px rgba(39, 208, 195, 0.14);
}

.random-teams-late-add-field input:focus-visible {
    outline: none;
    box-shadow: none;
}

.random-teams-late-add-submit {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(150, 255, 247, 0.22);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 18px rgba(0, 0, 0, 0.16);
}

.random-teams-late-add-submit-icon {
    width: 24px;
    height: 24px;
    overflow: visible;
}

.random-teams-late-add-submit-arrow {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 180ms ease;
    transform-origin: 12px 12px;
}

.random-teams-late-add-submit:not(:disabled):hover,
.random-teams-late-add-submit:focus-visible {
    border-color: var(--line-bright);
    background: rgba(150, 255, 247, 0.22);
    box-shadow:
        0 0 0 3px rgba(31, 225, 209, 0.12),
        0 12px 22px rgba(0, 0, 0, 0.2);
}

.random-teams-late-add-submit:not(:disabled):hover .random-teams-late-add-submit-arrow,
.random-teams-late-add-submit:focus-visible .random-teams-late-add-submit-arrow {
    transform: translateX(1.1px);
}

.random-teams-late-add-submit:disabled {
    cursor: default;
    opacity: 0.68;
}

.random-teams-late-add-helper {
    grid-column: 1 / -1;
    margin: 2px 2px 0;
    color: rgba(255, 190, 176, 0.96);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35;
}

.random-teams-fullscreen-icon {
    position: relative;
    display: block;
    width: 21px;
    height: 21px;
}

.random-teams-fullscreen-icon::before {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    top: 50%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0;
    transform: translateY(-50%) scaleX(0.4);
    transition:
        opacity 160ms ease,
        transform 180ms ease;
}

.random-teams-fullscreen-icon span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-color: currentColor;
    opacity: 0.94;
    transition:
        opacity 160ms ease,
        transform 180ms ease;
}

.random-teams-fullscreen-icon span:nth-child(1) {
    top: 0;
    left: 0;
    border-top: 2px solid;
    border-left: 2px solid;
}

.random-teams-fullscreen-icon span:nth-child(2) {
    top: 0;
    right: 0;
    border-top: 2px solid;
    border-right: 2px solid;
}

.random-teams-fullscreen-icon span:nth-child(3) {
    right: 0;
    bottom: 0;
    border-right: 2px solid;
    border-bottom: 2px solid;
}

.random-teams-fullscreen-icon span:nth-child(4) {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid;
    border-left: 2px solid;
}

.random-teams-fullscreen-button.is-presenting .random-teams-fullscreen-icon::before {
    opacity: 0.94;
    transform: translateY(-50%) scaleX(1);
}

.random-teams-fullscreen-button.is-presenting .random-teams-fullscreen-icon span {
    opacity: 0;
    transform: scale(0.4);
}

.random-teams-sound-icon {
    width: 24px;
    height: 24px;
    overflow: visible;
}

.random-teams-sound-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:
        opacity 160ms ease,
        transform 180ms ease;
}

.random-teams-sound-body {
    fill: currentColor;
    stroke-width: 1.5;
}

.random-teams-sound-wave {
    opacity: 0.92;
    transform-origin: 12px 12px;
}

.random-teams-sound-mute {
    opacity: 0;
    transform: scale(0.72);
    transform-origin: center;
}

.random-teams-sound-button.is-muted .random-teams-sound-wave {
    opacity: 0;
    transform: translateX(-2px) scale(0.68);
}

.random-teams-sound-button.is-muted .random-teams-sound-mute {
    opacity: 0.96;
    transform: scale(1);
}

.random-teams-animation-icon {
    width: 24px;
    height: 24px;
    overflow: visible;
}

.random-teams-animation-icon path,
.random-teams-animation-icon circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:
        opacity 160ms ease,
        transform 180ms ease;
}

.random-teams-animation-orb {
    fill: currentColor;
    stroke-width: 1.5;
}

.random-teams-animation-trail {
    opacity: 0.9;
}

.random-teams-animation-trail-top,
.random-teams-animation-trail-bottom {
    opacity: 0.68;
}

.random-teams-animation-mute {
    opacity: 0;
    transform: scale(0.76);
    transform-origin: center;
}

.random-teams-animation-button.is-muted .random-teams-animation-trail {
    opacity: 0.18;
    transform: translateX(2px) scaleX(0.64);
}

.random-teams-animation-button.is-muted .random-teams-animation-orb {
    opacity: 0.76;
}

.random-teams-animation-button.is-muted .random-teams-animation-mute {
    opacity: 0.96;
    transform: scale(1);
}

.random-teams-animation-button.is-forced-off {
    border-style: dashed;
}

.random-teams-excluded-floor-icon {
    width: 24px;
    height: 24px;
    overflow: visible;
}

.random-teams-excluded-floor-icon rect,
.random-teams-excluded-floor-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:
        opacity 160ms ease,
        transform 180ms ease;
}

.random-teams-excluded-floor-card {
    opacity: 0.82;
}

.random-teams-excluded-floor-base {
    opacity: 0.72;
}

.random-teams-excluded-floor-plus {
    opacity: 0.36;
    transform: scale(0.78);
    transform-origin: 16.8px 11.15px;
}

.random-teams-excluded-floor-slash {
    opacity: 0.92;
    transform-origin: center;
}

.random-teams-excluded-floor-button.is-active {
    border-color: rgba(164, 255, 250, 0.66);
    color: #dffffb;
    box-shadow:
        0 0 0 1px rgba(31, 225, 209, 0.12),
        0 14px 26px rgba(0, 0, 0, 0.24),
        0 0 22px rgba(31, 225, 209, 0.16);
}

.random-teams-excluded-floor-button.is-active .random-teams-excluded-floor-card,
.random-teams-excluded-floor-button.is-active .random-teams-excluded-floor-base {
    opacity: 0.96;
}

.random-teams-excluded-floor-button.is-active .random-teams-excluded-floor-plus {
    opacity: 0.96;
    transform: scale(1);
}

.random-teams-excluded-floor-button.is-active .random-teams-excluded-floor-slash {
    opacity: 0;
    transform: scale(0.72);
}

.random-teams-wipe-icon {
    width: 24px;
    height: 24px;
    overflow: visible;
}

.random-teams-wipe-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:
        opacity 160ms ease,
        transform 180ms ease;
}

.random-teams-wipe-body {
    fill: rgba(150, 255, 247, 0.16);
    stroke-width: 1.4;
}

.random-teams-wipe-lid,
.random-teams-wipe-handle,
.random-teams-wipe-line {
    opacity: 0.86;
}

.random-teams-wipe-line {
    transform-origin: center;
}

.random-teams-wipe-button:not(:disabled):hover .random-teams-wipe-line-left,
.random-teams-wipe-button:focus-visible .random-teams-wipe-line-left {
    transform: translateX(-0.4px);
}

.random-teams-wipe-button:not(:disabled):hover .random-teams-wipe-line-right,
.random-teams-wipe-button:focus-visible .random-teams-wipe-line-right {
    transform: translateX(0.4px);
}

.random-teams-stage-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.96;
}

.random-teams-board {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    align-content: start;
    min-height: 100%;
}

.random-teams-board.has-random-teams-preview {
    align-content: stretch;
}

@media (min-width: 641px) {
    .random-teams-stage:not(.has-order-result) .random-teams-board.has-random-teams-result {
        padding-top: var(--ziar-random-teams-stage-result-control-gutter, 48px);
    }

    .random-teams-stage.has-order-result .random-teams-board.has-random-teams-result {
        padding-top: var(--ziar-random-teams-stage-order-result-control-gutter, 72px);
    }

    .is-random-teams-presenting .random-teams-stage:not(.has-order-result) .random-teams-board.has-random-teams-result {
        padding-top: 0;
    }
}

.random-teams-board.has-random-teams-preview .random-teams-stage-empty {
    height: 100%;
}

.random-teams-stage.has-order-result .random-teams-board {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 3px;
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.random-teams-stage.has-order-result {
    --random-order-token-radius: 18px;
    --random-order-token-inner-radius: 13px;
}

.is-random-teams-presenting .random-teams-stage.has-order-result {
    --random-order-token-radius: clamp(12px, calc(18px * var(--random-teams-presentation-scale)), 18px);
    --random-order-token-inner-radius: clamp(8px, calc(13px * var(--random-teams-presentation-scale)), 13px);
}

.is-random-teams-presenting .random-teams-stage.has-order-result .random-teams-board {
    overflow: hidden;
    padding-right: 0;
}

.random-teams-results-layout {
    display: grid;
    gap: 18px;
    align-content: start;
    min-height: 100%;
}

.random-teams-results-layout.is-order-mode {
    grid-template-columns:
        minmax(196px, max(196px, calc(196px * var(--random-teams-presentation-scale))))
        minmax(0, 1fr);
    align-items: stretch;
}

.is-random-teams-presenting .random-teams-results-layout {
    gap: calc(18px * var(--random-teams-presentation-scale));
}

.is-random-teams-presenting .random-teams-results-layout.is-order-mode {
    height: 100%;
    min-height: 0;
    align-content: stretch;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
}

.random-teams-stage-empty {
    min-height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 8px;
}

.random-teams-preview-grid {
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
    gap: 16px;
    opacity: 0.68;
    filter: saturate(0.86) brightness(0.96);
    pointer-events: none;
}

.random-teams-preview-grid.is-order-mode {
    width: min(920px, 100%);
    grid-template-columns: max-content;
    justify-content: center;
    overflow-x: auto;
    padding-bottom: 4px;
}

.random-team-preview-box {
    min-height: 168px;
    padding: 16px;
    border-style: dashed;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 14px 28px rgba(0, 0, 0, 0.12);
}

.random-team-preview-box .random-team-head {
    min-height: 34px;
    margin-bottom: 10px;
}

.random-team-preview-box .random-team-name {
    font-size: 1.02rem;
}

.random-team-preview-orbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.random-team-preview-orbs.is-order-mode {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow: hidden;
}

.random-teams-preview-orb {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    position: relative;
}

.capy-shield.random-teams-preview-capy,
.capy-shield.random-teams-member-capy {
    --playground-capy-fill-top: var(--member-color-start);
    --playground-capy-fill-bottom: var(--member-color-end);
}

.capy-shield.random-teams-preview-capy {
    --playground-capy-outline: 2px;
    --playground-capy-eye-size: 1px;
    --playground-capy-eye-highlight-size: 0.24px;
    --playground-capy-ear-outline: 0.9px;
    --playground-capy-nostril-size: 0.64px;
    --playground-capy-nostril-fade-size: 0.9px;
    --playground-capy-mouth-stroke: 0.9px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--random-team-preview-token-radius, 10px);
    box-shadow: 0 8px 14px var(--member-shadow);
}

.random-teams-teams-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.random-teams-teams-grid.is-order-mode {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    overflow: visible;
    padding-bottom: 4px;
}

.random-teams-teams-grid.is-order-mode > .random-team-box.is-order-mode {
    flex: 0 0 auto;
}

.is-random-teams-presenting .random-teams-teams-grid {
    gap: calc(22px * var(--random-teams-presentation-scale));
    grid-template-columns: repeat(auto-fit, minmax(min(calc(360px * var(--random-teams-presentation-scale)), 100%), 1fr));
}

.is-random-teams-presenting .random-teams-teams-grid.is-order-mode {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(26px * var(--random-teams-presentation-scale));
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: calc(3px * var(--random-teams-presentation-scale));
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.random-team-box {
    position: relative;
    isolation: isolate;
    transform-origin: center;
    min-height: 210px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid var(--team-accent-edge, rgba(150, 255, 247, 0.16));
    background:
        radial-gradient(circle at 18% 18%, var(--team-accent-glow, rgba(164, 255, 250, 0.24)) 0 18%, transparent 42%),
        radial-gradient(circle at 78% 80%, var(--team-accent-soft, rgba(164, 255, 250, 0.18)) 0 16%, transparent 38%),
        linear-gradient(
            180deg,
            var(--team-accent-panel-top, rgba(18, 49, 68, 0.88)),
            var(--team-accent-panel-bottom, rgba(6, 21, 34, 0.98))
        );
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 18px 32px rgba(0, 0, 0, 0.24),
        0 0 24px var(--team-accent-glow, rgba(164, 255, 250, 0.1));
    transition:
        transform 180ms ease,
        border-color 440ms ease,
        box-shadow 560ms ease,
        background 680ms cubic-bezier(0.18, 0.84, 0.22, 1);
}

.random-team-box.is-drop-target {
    border-color: var(--team-accent-solid, rgba(164, 255, 250, 0.74));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 18px 32px rgba(0, 0, 0, 0.24),
        0 0 0 1px var(--team-accent-paint, rgba(164, 255, 250, 0.26)),
        0 0 34px var(--team-accent-glow, rgba(164, 255, 250, 0.18));
}

.random-team-box.is-order-mode {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    overflow: visible;
    background:
        linear-gradient(135deg, var(--team-accent-glow, rgba(164, 255, 250, 0.18)) 0%, transparent 30%),
        linear-gradient(315deg, var(--team-accent-soft, rgba(164, 255, 250, 0.12)) 0%, transparent 34%),
        linear-gradient(
            180deg,
            var(--team-accent-panel-top, rgba(18, 49, 68, 0.88)),
            var(--team-accent-panel-bottom, rgba(6, 21, 34, 0.98))
        );
}

.is-random-teams-presenting .random-team-box {
    min-height: calc(218px * var(--random-teams-presentation-scale));
    padding: calc(24px * var(--random-teams-presentation-scale));
    border-radius: calc(30px * var(--random-teams-presentation-scale));
}

.is-random-teams-presenting .random-team-box.is-order-mode {
    min-height: 0;
}

.random-team-head {
    position: relative;
    justify-content: center;
    align-items: center;
    min-height: 42px;
    margin-bottom: 12px;
}

.is-random-teams-presenting .random-team-head {
    min-height: calc(44px * var(--random-teams-presentation-scale));
    margin-bottom: calc(12px * var(--random-teams-presentation-scale));
}

.random-team-count {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    pointer-events: none;
}

.random-order-finish-front-button {
    --random-order-finish-front-y-offset: 16px;
    position: absolute;
    top: 50%;
    left: 8px;
    z-index: 3;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 228, 148, 0.24);
    background:
        radial-gradient(circle at 30% 26%, rgba(255, 246, 210, 0.16), transparent 54%),
        linear-gradient(180deg, rgba(16, 43, 58, 0.92), rgba(4, 18, 29, 0.96));
    color: rgba(255, 241, 194, 0.94);
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease,
        transform 180ms ease;
    transform: translateY(calc(-50% - var(--random-order-finish-front-y-offset)));
}

.random-order-finish-front-icon {
    width: 28px;
    height: 28px;
    overflow: visible;
}

.random-order-finish-front-arrow,
.random-order-finish-front-token {
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.random-order-finish-front-arrow {
    fill: none;
}

.random-order-finish-front-token {
    fill: rgba(255, 222, 120, 0.18);
}

.random-order-finish-front-button:not(:disabled):hover,
.random-order-finish-front-button:focus-visible {
    border-color: rgba(255, 239, 191, 0.72);
    background:
        radial-gradient(circle at 30% 26%, rgba(255, 249, 224, 0.22), transparent 54%),
        linear-gradient(180deg, rgba(27, 58, 74, 0.96), rgba(8, 23, 35, 0.98));
    color: #fff6d0;
    box-shadow:
        0 0 0 3px rgba(255, 215, 118, 0.12),
        0 14px 26px rgba(0, 0, 0, 0.24),
        0 0 24px rgba(255, 212, 102, 0.16);
    transform: translateY(calc(-50% - var(--random-order-finish-front-y-offset) + 1px));
}

.random-order-finish-front-button:disabled {
    cursor: default;
    opacity: 0.4;
    color: rgba(236, 247, 255, 0.56);
    border-color: rgba(150, 255, 247, 0.12);
}

.is-random-teams-presenting .random-order-finish-front-button {
    --random-order-finish-front-y-offset: calc(16px * var(--random-teams-presentation-scale));
    left: clamp(6px, calc(8px * var(--random-teams-presentation-scale)), 12px);
    width: clamp(34px, calc(42px * var(--random-teams-presentation-scale)), 52px);
    height: clamp(34px, calc(42px * var(--random-teams-presentation-scale)), 52px);
}

.is-random-teams-presenting .random-order-finish-front-icon {
    width: clamp(22px, calc(28px * var(--random-teams-presentation-scale)), 30px);
    height: clamp(22px, calc(28px * var(--random-teams-presentation-scale)), 30px);
}

.random-team-name,
.random-teams-floor-name {
    margin: 0;
    font-size: 1.28rem;
    text-align: center;
}

.is-random-teams-presenting .random-team-name,
.is-random-teams-presenting .random-teams-floor-name {
    font-size: calc(1.7rem * var(--random-teams-presentation-scale));
}

.random-team-members,
.random-teams-floor-members {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-content: flex-start;
}

.is-random-teams-presenting .random-team-members,
.is-random-teams-presenting .random-teams-floor-members {
    gap: calc(14px * var(--random-teams-presentation-scale));
}

.random-teams-floor-members:not(.is-order-mode) {
    padding: 2px 2px 4px;
}

.random-team-members {
    min-height: 108px;
    justify-content: center;
}

.is-random-teams-presenting .random-team-members {
    min-height: calc(108px * var(--random-teams-presentation-scale));
}

.random-team-members.is-order-mode {
    min-height: 0;
    display: block;
    width: 100%;
    overflow: visible;
    padding: 4px 8px 6px;
}

.random-order-coil {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.random-order-row {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 18px 16px;
    padding: 8px 42px 12px;
}

.random-order-row.has-finish-front-button {
    padding-left: 58px;
}

.is-random-teams-presenting .random-order-row {
    gap: calc(18px * var(--random-teams-presentation-scale)) calc(16px * var(--random-teams-presentation-scale));
    padding: calc(8px * var(--random-teams-presentation-scale)) calc(42px * var(--random-teams-presentation-scale))
        calc(12px * var(--random-teams-presentation-scale));
}

.is-random-teams-presenting .random-order-row.has-finish-front-button {
    padding-left: calc(58px * var(--random-teams-presentation-scale));
}

.random-order-row.has-continuation {
    margin-top: 18px;
    padding-top: 12px;
}

.is-random-teams-presenting .random-order-row.has-continuation {
    margin-top: calc(18px * var(--random-teams-presentation-scale));
    padding-top: calc(12px * var(--random-teams-presentation-scale));
}

.random-order-connector-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.random-order-connector-path,
.random-order-connector-dot {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    animation: none;
}

.random-order-connector-path,
.random-order-connector-dot {
    stroke: rgba(255, 226, 128, 0.84);
    opacity: 0.82;
}

.random-order-connector-path {
    stroke-width: 2;
}

.random-order-connector-dot {
    fill: rgba(255, 226, 128, 0.72);
    stroke-width: 1.4;
}

.random-team-empty,
.random-teams-floor-empty {
    margin: 0;
    color: var(--text-dim);
    font-style: italic;
    width: 100%;
    max-width: 180px;
    text-align: center;
    line-height: 1.16;
    justify-self: center;
    grid-column: 1 / -1;
}

.random-teams-floor-tray {
    margin-top: 0;
    padding: 18px;
    border-radius: 24px;
    border: 1px dashed rgba(150, 255, 247, 0.28);
    background: linear-gradient(180deg, rgba(5, 18, 29, 0.92), rgba(3, 12, 20, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.random-teams-results-layout.is-order-mode .random-teams-floor-tray {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.is-random-teams-presenting .random-teams-floor-tray {
    padding: calc(12px * var(--random-teams-presentation-scale)) calc(16px * var(--random-teams-presentation-scale));
    border-radius: calc(24px * var(--random-teams-presentation-scale));
}

.is-random-teams-presenting .random-teams-floor-tray:not(.is-order-mode) {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.is-random-teams-presenting .random-teams-floor-tray:not(.is-order-mode) .random-teams-floor-members {
    min-height: 0;
    max-height: min(28vh, calc(280px * var(--random-teams-presentation-scale)));
    max-height: min(28svh, calc(280px * var(--random-teams-presentation-scale)));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: calc(3px * var(--random-teams-presentation-scale));
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    gap: calc(8px * var(--random-teams-presentation-scale));
}

.is-random-teams-presenting .random-teams-floor-tray:not(.is-order-mode) .member-token-floor {
    width: clamp(40px, calc(74px * var(--random-teams-presentation-scale)), 54px);
    height: clamp(40px, calc(74px * var(--random-teams-presentation-scale)), 54px);
    font-size: clamp(0.96rem, calc(1.5rem * var(--random-teams-presentation-scale)), 1.14rem);
}

.is-random-teams-presenting .random-teams-floor-tray:not(.is-order-mode) .member-token-floor::after {
    inset: clamp(3px, calc(5px * var(--random-teams-presentation-scale)), 5px);
}

.is-random-teams-presenting .random-teams-results-layout.is-order-mode .random-teams-floor-tray {
    min-height: 0;
    overflow: hidden;
}

.random-teams-floor-head {
    position: relative;
    min-height: 42px;
    margin-bottom: 14px;
    justify-content: center;
    align-items: center;
}

.is-random-teams-presenting .random-teams-floor-head {
    margin-bottom: calc(12px * var(--random-teams-presentation-scale));
}

.random-teams-floor-head .setup-meta {
    position: absolute;
    top: 50%;
    right: 0;
    display: inline-grid;
    place-items: center;
    margin-left: 0;
    padding: 0;
    transform: translateY(-50%);
}

.random-teams-floor-members.is-order-mode {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--random-teams-order-finished-track-size, 50px), max-content));
    width: 100%;
    min-width: 0;
    min-height: 0;
    justify-content: center;
    justify-items: center;
    align-content: flex-start;
    row-gap: 12px;
    column-gap: 12px;
    overflow-x: hidden;
}

.random-teams-floor-tray.is-order-mode.is-scrollable .random-teams-floor-members {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 3px;
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.is-random-teams-presenting .random-teams-floor-tray.is-order-mode {
    --random-teams-order-finished-track-size: calc(54px * var(--random-teams-presentation-scale));
}

.is-random-teams-presenting .random-teams-floor-members.is-order-mode {
    min-height: 0;
    row-gap: calc(9px * var(--random-teams-presentation-scale));
    column-gap: calc(9px * var(--random-teams-presentation-scale));
}

.is-random-teams-presenting .random-teams-floor-tray.is-order-mode.is-scrollable .random-teams-floor-members {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding-right: calc(3px * var(--random-teams-presentation-scale));
}

.is-random-teams-presenting .random-team-box.is-order-mode .random-team-members {
    touch-action: pan-y;
}

@media (hover: hover) and (pointer: fine) {
    /* On desktop, let the page own wheel scrolling so hovering an Order panel does not trap the document. */
    .random-teams-stage.has-order-result .random-teams-board {
        height: auto;
        max-height: none;
        min-height: 100%;
        overflow: visible;
        overscroll-behavior: auto;
        padding-right: 0;
    }

    .random-teams-results-layout.is-order-mode .random-teams-floor-tray {
        overflow: visible;
    }

    .random-teams-floor-tray.is-order-mode.is-scrollable .random-teams-floor-members {
        overflow: visible;
        overscroll-behavior: auto;
        padding-right: 0;
    }
}

.random-teams-floor-tray.is-order-mode .member-token-finished {
    width: 48px;
    height: 48px;
    font-size: 1rem;
}

.random-teams-drag-ghost.member-token-finished,
.random-teams-launch-orb.is-order-finished {
    width: 48px;
    height: 48px;
    font-size: 1rem;
}

.member-token-stack {
    display: grid;
    justify-items: center;
    gap: 6px;
}

.member-token-stack.is-order-mode {
    gap: 8px;
}

.member-token-order {
    display: inline-grid;
    place-items: center;
    position: relative;
    isolation: isolate;
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid rgba(150, 255, 247, 0.22);
    background: rgba(4, 20, 31, 0.82);
    color: #f3feff;
    font-size: 0.9rem;
    font-weight: 900;
    text-align: center;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
}

.member-token-order.is-first-order {
    min-width: 34px;
    height: 30px;
    border-color: rgba(255, 244, 196, 0.94);
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 235, 0.38), transparent 52%),
        linear-gradient(180deg, rgba(148, 102, 22, 0.98), rgba(63, 38, 7, 0.96));
    color: #fff6d0;
    font-size: 1rem;
    box-shadow:
        0 0 0 1px rgba(255, 240, 186, 0.32),
        0 0 18px rgba(255, 225, 128, 0.5),
        0 0 38px rgba(255, 190, 64, 0.28),
        0 10px 20px rgba(0, 0, 0, 0.24);
    text-shadow: 0 0 12px rgba(255, 245, 206, 0.82);
}

.member-token-order.is-first-order::after {
    content: "";
    position: absolute;
    inset: -10px -12px;
    border-radius: 999px;
    background: radial-gradient(
        circle at center,
        rgba(255, 249, 214, 0.62) 0 16%,
        rgba(255, 229, 145, 0.34) 34%,
        rgba(255, 196, 74, 0.18) 56%,
        rgba(255, 196, 74, 0) 76%
    );
    opacity: 0.34;
    pointer-events: none;
    transform: scale(0.94);
    transform-origin: center;
    z-index: -1;
    will-change: transform, opacity;
    animation: random-order-first-pulse 1680ms ease-in-out infinite;
}

.member-token,
.random-teams-drag-ghost,
.random-teams-launch-orb {
    width: 76px;
    height: 76px;
    border-radius: var(--random-team-token-radius, 22px);
    border: 0;
    background: transparent;
    color: #04131b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.56rem;
    font-weight: 900;
    box-shadow: none;
    position: relative;
    user-select: none;
    touch-action: none;
}

.random-teams-drag-ghost,
.random-teams-launch-orb,
.random-teams-splash {
    will-change: transform, opacity;
}

.capy-shield.random-teams-member-capy {
    --playground-capy-outline: 4px;
    --playground-capy-eye-size: 2.1px;
    --playground-capy-eye-highlight-size: 0.6px;
    --playground-capy-ear-outline: 1.8px;
    --playground-capy-nostril-size: 1.4px;
    --playground-capy-nostril-fade-size: 1.9px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: 0 14px 22px var(--member-shadow);
}

.capy-shield.random-teams-member-capy::before {
    opacity: 0.28;
}

.capy-shield.random-teams-member-capy::after {
    opacity: 0.2;
}

.random-teams-member-capy .capy-shield-muzzle {
    opacity: 0.24;
}

.member-token-finished .random-teams-member-capy,
.random-teams-launch-orb.is-order-finished .random-teams-member-capy {
    --playground-capy-outline: 2px;
    --playground-capy-eye-size: 1px;
    --playground-capy-eye-highlight-size: 0.22px;
    --playground-capy-ear-outline: 0.86px;
    --playground-capy-nostril-size: 0.62px;
    --playground-capy-nostril-fade-size: 0.88px;
}

.member-token-label {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0;
    color: #03131b;
    font: inherit;
    /* Common classroom IDs get the room-facing emphasis; longer IDs step down only enough to stay on the Capy. */
    font-size: 1.5em;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.035em;
    line-height: 0.9;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.84),
        0 0 5px rgba(255, 255, 255, 0.72),
        0 2px 4px rgba(2, 12, 18, 0.14);
    pointer-events: none;
}

.member-token-label[data-member-digits="1"] {
    font-size: 1.64em;
    letter-spacing: 0;
}

.member-token-label[data-member-digits="3"] {
    font-size: 1.27em;
}

.member-token-label[data-member-digits="4"] {
    font-size: 1.02em;
    letter-spacing: -0.055em;
}

.member-token.is-order-shape,
.random-teams-drag-ghost.is-order-shape,
.random-teams-launch-orb.is-order-shape {
    border-radius: var(--random-order-token-radius, var(--random-team-token-radius, 22px));
}

.member-token.is-order-shape.member-token-finished,
.random-teams-drag-ghost.is-order-shape.member-token-finished,
.random-teams-launch-orb.is-order-shape.is-order-finished {
    border-radius: 8px;
}

.is-random-teams-presenting .member-token.is-order-shape,
.is-random-teams-presenting .random-teams-drag-ghost.is-order-shape,
.is-random-teams-presenting .random-teams-launch-orb.is-order-shape {
    border-radius: var(--random-order-token-radius, var(--random-team-token-radius, calc(22px * var(--random-teams-presentation-scale))));
}

.is-random-teams-presenting .member-token.is-order-shape.member-token-finished,
.is-random-teams-presenting .random-teams-drag-ghost.is-order-shape.member-token-finished,
.is-random-teams-presenting .random-teams-launch-orb.is-order-shape.is-order-finished {
    border-radius: calc(9px * var(--random-teams-presentation-scale));
}

.member-token:hover {
    transform: translateY(-2px);
}

.member-token.is-incoming,
.member-token.is-drag-origin {
    opacity: 0;
    pointer-events: none;
}

.member-token-floor {
    animation: none;
}

.random-teams-floor-tray.is-order-mode .member-token-floor {
    animation: none;
}

.is-random-teams-presenting .member-token,
.is-random-teams-presenting .random-teams-drag-ghost,
.is-random-teams-presenting .random-teams-launch-orb {
    width: calc(94px * var(--random-teams-presentation-scale));
    height: calc(94px * var(--random-teams-presentation-scale));
    font-size: calc(1.95rem * var(--random-teams-presentation-scale));
}

.is-random-teams-presenting .random-teams-floor-tray.is-order-mode .member-token-finished {
    width: calc(54px * var(--random-teams-presentation-scale));
    height: calc(54px * var(--random-teams-presentation-scale));
    font-size: calc(1rem * var(--random-teams-presentation-scale));
}

.is-random-teams-presenting .random-teams-drag-ghost.member-token-finished,
.is-random-teams-presenting .random-teams-launch-orb.is-order-finished {
    width: calc(54px * var(--random-teams-presentation-scale));
    height: calc(54px * var(--random-teams-presentation-scale));
    font-size: calc(1rem * var(--random-teams-presentation-scale));
}

.is-random-teams-presenting .member-token-order {
    min-width: calc(36px * var(--random-teams-presentation-scale));
    height: calc(32px * var(--random-teams-presentation-scale));
    padding: 0 calc(8px * var(--random-teams-presentation-scale));
    font-size: calc(1.02rem * var(--random-teams-presentation-scale));
}

.is-random-teams-presenting .member-token-order.is-first-order {
    min-width: calc(40px * var(--random-teams-presentation-scale));
    height: calc(34px * var(--random-teams-presentation-scale));
    font-size: calc(1.08rem * var(--random-teams-presentation-scale));
}

.is-random-teams-motion-muted .member-token-order.is-first-order::after {
    animation: none;
    opacity: 0.24;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .member-token-order.is-first-order::after {
        animation: none;
        opacity: 0.24;
        transform: scale(1);
    }
}

.random-teams-drag-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.random-teams-drag-ghost,
.random-teams-launch-orb {
    position: absolute;
    left: 0;
    top: 0;
}

.random-teams-drag-ghost {
    z-index: 7;
}

.random-teams-launch-orb {
    z-index: 6;
    will-change: transform, opacity;
}

.random-teams-splash {
    position: absolute;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(var(--splash-tilt, 0deg));
    opacity: 0;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle at 50% 50%, var(--team-accent-paint) 0 10px, transparent 11px),
        radial-gradient(circle at 30% 38%, var(--team-accent-paint) 0 7px, transparent 8px),
        radial-gradient(circle at 68% 34%, var(--team-accent-paint) 0 6px, transparent 7px),
        radial-gradient(circle at 24% 66%, var(--team-accent-paint) 0 6px, transparent 7px),
        radial-gradient(circle at 76% 68%, var(--team-accent-paint) 0 7px, transparent 8px);
    filter: drop-shadow(0 0 18px var(--team-accent-glow));
    animation: random-team-splash-core 620ms cubic-bezier(0.1, 0.84, 0.2, 1) forwards;
}

.random-teams-splash::before,
.random-teams-splash::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
}

.random-teams-splash::before {
    border-radius: 44% 56% 52% 48% / 48% 44% 56% 52%;
    background:
        radial-gradient(circle at 50% 50%, var(--team-accent-paint) 0 24%, transparent 25%),
        radial-gradient(circle at 36% 44%, var(--team-accent-soft) 0 18%, transparent 19%),
        radial-gradient(circle at 64% 58%, var(--team-accent-soft) 0 16%, transparent 17%);
    animation: random-team-splash-blot 620ms cubic-bezier(0.1, 0.84, 0.2, 1) forwards;
}

.random-teams-splash::after {
    background:
        radial-gradient(circle at 18% 28%, var(--team-accent-paint) 0 5px, transparent 6px),
        radial-gradient(circle at 82% 24%, var(--team-accent-paint) 0 5px, transparent 6px),
        radial-gradient(circle at 14% 72%, var(--team-accent-paint) 0 4px, transparent 5px),
        radial-gradient(circle at 86% 76%, var(--team-accent-paint) 0 5px, transparent 6px),
        radial-gradient(circle at 52% 16%, var(--team-accent-paint) 0 4px, transparent 5px);
    animation: random-team-splash-spray 620ms cubic-bezier(0.1, 0.84, 0.2, 1) forwards;
}

.card-label,
.chip-label,
.metric-label {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    color: var(--text-dim);
}

.field {
    display: grid;
    gap: 8px;
}

.field span {
    color: var(--text-soft);
    font-size: 0.92rem;
}

.field input,
.field textarea {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(150, 255, 247, 0.24);
    background: rgba(3, 16, 25, 0.9);
    color: var(--text);
    outline: none;
    resize: vertical;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.field textarea {
    min-height: 220px;
}

.field input:focus,
.field textarea:focus {
    border-color: var(--line-bright);
    box-shadow: 0 0 0 3px rgba(39, 208, 195, 0.14);
}

.primary-button,
.secondary-button,
.ghost-button,
.mode-button,
.mode-chip-button,
.brand-home {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 120ms ease,
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease;
}

.primary-button,
.secondary-button,
.ghost-button,
.mode-button,
.mode-chip-button {
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0 18px;
    font-weight: 700;
    text-decoration: none;
}

.primary-button {
    border-color: var(--action-gold-border);
    background: var(--action-gold-background);
    color: var(--action-gold-ink);
    box-shadow: var(--action-gold-shadow);
}

.primary-button.button-accent-teal {
    background: linear-gradient(135deg, var(--teal-soft), var(--teal));
    color: #062230;
    box-shadow:
        0 14px 28px rgba(20, 147, 154, 0.34),
        0 0 32px rgba(79, 235, 225, 0.14);
}

.secondary-button,
.ghost-button,
.mode-button,
.mode-chip-button {
    background: rgba(4, 20, 31, 0.96);
    border-color: rgba(150, 255, 247, 0.24);
    color: var(--text);
}

.mode-button.selected,
.mode-chip-button.selected {
    border-color: rgba(131, 236, 232, 0.48);
    box-shadow: inset 0 0 0 1px rgba(39, 208, 195, 0.18);
}

.mode-chip-button {
    min-height: 42px;
    padding: 0 16px;
}

.setup-mode-stack {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.mode-subtitle {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.95rem;
    line-height: 1.3;
    max-width: 20rem;
    text-align: right;
}

.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover,
.mode-button:hover,
.mode-chip-button:hover,
.brand-home:hover {
    transform: translateY(-1px);
}

.primary-button:active,
.secondary-button:active,
.ghost-button:active,
.mode-button:active,
.mode-chip-button:active,
.brand-home:active {
    transform: translateY(1px) scale(0.985);
}

.landing-card .secondary-button {
    background: rgba(4, 20, 31, 0.98);
    border-color: rgba(150, 255, 247, 0.2);
}

.danger-button {
    background: rgba(72, 24, 19, 0.96);
    border-color: rgba(255, 142, 120, 0.34);
    color: #ffd7cf;
}

.danger-button:hover {
    border-color: rgba(255, 173, 157, 0.48);
    box-shadow: 0 14px 24px rgba(56, 16, 12, 0.22);
}

.viewer-badge,
.stat-chip,
.metric-pill,
.setup-meta {
    border-radius: 999px;
    padding: 10px 14px;
    background: rgba(4, 20, 31, 0.96);
    border: 1px solid rgba(150, 255, 247, 0.22);
    color: var(--text);
}

#app.theme-relic-run .card,
#app.theme-relic-run .room-code-card {
    background: linear-gradient(180deg, rgba(76, 55, 33, 0.72), rgba(28, 21, 14, 0.98)), rgba(29, 22, 15, 0.98);
    border-color: rgba(181, 138, 75, 0.4);
}

#app.theme-relic-run .secondary-button,
#app.theme-relic-run .ghost-button,
#app.theme-relic-run .mode-button,
#app.theme-relic-run .mode-chip-button {
    background: rgba(31, 23, 15, 0.96);
    border-color: rgba(214, 170, 103, 0.26);
}

#app.theme-relic-run .danger-button {
    background: rgba(78, 24, 18, 0.96);
    border-color: rgba(255, 142, 120, 0.34);
    color: #ffd7cf;
}

#app.theme-relic-run .mode-button.selected,
#app.theme-relic-run .mode-chip-button {
    border-color: rgba(243, 216, 148, 0.5);
    box-shadow: inset 0 0 0 1px rgba(213, 161, 61, 0.22);
}

#app.theme-relic-run .viewer-badge,
#app.theme-relic-run .stat-chip,
#app.theme-relic-run .metric-pill,
#app.theme-relic-run .setup-meta {
    background: rgba(31, 23, 15, 0.96);
    border-color: rgba(214, 170, 103, 0.24);
}

#app.theme-relic-run .mode-subtitle,
#app.theme-relic-run .maze-status-line,
#app.theme-relic-run .participant-meta,
#app.theme-relic-run .roster-meta {
    color: #dfc9a2;
}

#app.theme-relic-run .lobby-playground-name-button {
    color: #f7ebcf;
}

#app.theme-relic-run .lobby-playground-edit-icon,
#app.theme-relic-run .lobby-playground-count-badge {
    background: rgba(31, 23, 15, 0.94);
    border-color: rgba(214, 170, 103, 0.24);
}

#app.theme-relic-run .lobby-playground-mode {
    color: #ffd46e;
}

#app.theme-relic-run .room-code-display {
    color: #ffd46e;
    text-shadow:
        0 0 24px rgba(255, 212, 110, 0.18),
        0 10px 26px rgba(0, 0, 0, 0.24);
}

#app.theme-relic-run,
.room-shell.has-lobby-relic-selection {
    --player-roster-card-bg:
        radial-gradient(circle at 18% 16%, rgba(255, 215, 130, 0.13), transparent 28%),
        linear-gradient(180deg, rgba(76, 55, 33, 0.72), rgba(28, 21, 14, 0.98)), rgba(29, 22, 15, 0.98);
    --player-roster-card-border: rgba(181, 138, 75, 0.4);
    --player-roster-row-bg: linear-gradient(180deg, rgba(45, 32, 18, 0.92), rgba(20, 15, 10, 0.96));
    --player-roster-row-border: rgba(214, 170, 103, 0.2);
    --player-roster-action-bg: linear-gradient(180deg, rgba(54, 38, 20, 0.66), rgba(27, 19, 10, 0.86));
    --player-roster-action-hover-bg: linear-gradient(180deg, rgba(82, 57, 28, 0.74), rgba(38, 26, 13, 0.92));
    --player-roster-action-border: rgba(214, 170, 103, 0.24);
    --player-roster-action-hover-border: rgba(246, 207, 136, 0.38);
    --player-roster-action-color: #fff0cc;
    --player-roster-action-dot-shadow: rgba(255, 240, 204, 0.86);
    --player-roster-action-menu-bg: rgba(24, 17, 10, 0.98);
    --player-roster-action-item-hover-bg: rgba(255, 214, 128, 0.12);
}

#app.theme-pictionary .card,
#app.theme-pictionary .room-code-card {
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 250, 0.2), transparent 24%),
        radial-gradient(circle at 86% 12%, rgba(214, 222, 223, 0.12), transparent 26%),
        linear-gradient(180deg, rgba(43, 52, 56, 0.78), rgba(16, 22, 26, 0.98)), rgba(18, 24, 28, 0.98);
    border-color: rgba(243, 240, 229, 0.3);
}

#app.theme-pictionary .secondary-button,
#app.theme-pictionary .ghost-button,
#app.theme-pictionary .mode-button,
#app.theme-pictionary .mode-chip-button {
    background: rgba(22, 30, 35, 0.96);
    border-color: rgba(243, 240, 229, 0.22);
}

#app.theme-pictionary .danger-button {
    background: rgba(86, 27, 41, 0.96);
    border-color: rgba(255, 144, 174, 0.3);
    color: #ffe0ea;
}

#app.theme-pictionary .mode-button.selected,
#app.theme-pictionary .mode-chip-button {
    border-color: rgba(255, 252, 241, 0.42);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 250, 0.14);
}

#app.theme-pictionary .viewer-badge,
#app.theme-pictionary .stat-chip,
#app.theme-pictionary .metric-pill,
#app.theme-pictionary .setup-meta {
    background: rgba(25, 33, 38, 0.96);
    border-color: rgba(243, 240, 229, 0.22);
}

#app.theme-pictionary .mode-subtitle,
#app.theme-pictionary .maze-status-line,
#app.theme-pictionary .participant-meta,
#app.theme-pictionary .roster-meta {
    color: #edf1ed;
}

#app.theme-pictionary .lobby-playground-name-button {
    color: #fffaf0;
}

#app.theme-pictionary .lobby-playground-edit-icon,
#app.theme-pictionary .lobby-playground-count-badge {
    background: rgba(25, 33, 38, 0.94);
    border-color: rgba(243, 240, 229, 0.22);
}

#app.theme-pictionary .lobby-playground-mode {
    color: #fffdf3;
}

#app.theme-pictionary .room-code-display {
    color: #fffdf3;
    text-shadow:
        0 0 24px rgba(255, 255, 250, 0.16),
        0 10px 26px rgba(0, 0, 0, 0.24);
}

#app.theme-pictionary,
.room-shell.has-lobby-pictionary-selection {
    --player-roster-card-bg:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 250, 0.16), transparent 25%),
        radial-gradient(circle at 86% 12%, rgba(214, 222, 223, 0.1), transparent 26%),
        linear-gradient(180deg, rgba(43, 52, 56, 0.78), rgba(16, 22, 26, 0.98)), rgba(18, 24, 28, 0.98);
    --player-roster-card-border: rgba(243, 240, 229, 0.3);
    --player-roster-row-bg: linear-gradient(180deg, rgba(31, 43, 50, 0.86), rgba(17, 25, 31, 0.96));
    --player-roster-row-border: rgba(243, 240, 229, 0.18);
    --player-roster-action-bg: linear-gradient(180deg, rgba(38, 49, 55, 0.62), rgba(18, 27, 33, 0.84));
    --player-roster-action-hover-bg: linear-gradient(180deg, rgba(54, 66, 72, 0.7), rgba(24, 34, 40, 0.9));
    --player-roster-action-border: rgba(243, 240, 229, 0.18);
    --player-roster-action-hover-border: rgba(243, 240, 229, 0.32);
    --player-roster-action-color: #fffdf3;
    --player-roster-action-dot-shadow: rgba(255, 253, 243, 0.86);
    --player-roster-action-menu-bg: rgba(17, 25, 31, 0.98);
    --player-roster-action-item-hover-bg: rgba(243, 240, 229, 0.1);
}

.room-shell.has-lobby-relic-selection .lobby-playground-mode {
    color: #ffd46e;
}

.room-shell.has-lobby-pictionary-selection .lobby-playground-mode {
    color: #fffdf3;
}

.viewer-badge {
    white-space: nowrap;
}

.banner {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    color: var(--text);
}

.banner-info {
    border: 1px solid rgba(39, 208, 195, 0.36);
    background: var(--info-soft);
}

.banner-error {
    border: 1px solid rgba(255, 142, 120, 0.38);
    background: var(--danger-soft);
}

.release-watch-indicator {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    right: env(safe-area-inset-right, 0px);
    z-index: 1000;
    width: 0;
    height: 0;
    border-top: 13px solid rgba(49, 219, 201, 0.78);
    border-left: 13px solid transparent;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.72);
    transform-origin: top right;
    filter: drop-shadow(0 0 7px rgba(49, 219, 201, 0.2));
    transition:
        opacity 240ms ease,
        transform 240ms ease,
        border-top-color 2600ms ease,
        filter 2600ms ease;
}

.release-watch-indicator.is-visible {
    opacity: 0.78;
    transform: scale(1);
}

.release-watch-indicator.is-fading {
    opacity: 0;
    transform: scale(0.56);
    border-top-color: rgba(49, 219, 201, 0);
    filter: drop-shadow(0 0 0 rgba(49, 219, 201, 0));
}

.connecting-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.connecting-card {
    width: min(460px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 16px;
    justify-items: center;
    text-align: center;
}

.connecting-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.spinner {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid rgba(149, 255, 246, 0.18);
    border-top-color: var(--teal-soft);
    animation: spin 900ms linear infinite;
}

.room-shell {
    --lobby-mode-label-color: #8fdfe7;
    --lobby-panel-top: rgba(16, 49, 68, 0.95);
    --lobby-panel-bottom: rgba(5, 17, 28, 0.96);
    --lobby-panel-border: rgba(112, 214, 222, 0.22);
    --lobby-panel-shadow: rgba(35, 159, 173, 0.12);
    --lobby-panel-glow: rgba(111, 206, 219, 0.14);
    --lobby-panel-orb: rgba(121, 222, 232, 0.16);
    --lobby-panel-outline: rgba(235, 203, 145, 0.58);
    --lobby-stage-top: rgba(11, 35, 49, 0.94);
    --lobby-stage-bottom: rgba(4, 15, 24, 0.97);
    --lobby-stage-border: rgba(120, 226, 236, 0.18);
    --lobby-stage-radial: rgba(106, 209, 227, 0.1);
    --lobby-world-top: rgba(16, 49, 68, 0.95);
    --lobby-world-bottom: rgba(7, 23, 34, 0.98);
    --lobby-world-glow: rgba(121, 222, 232, 0.12);
    --lobby-world-spark: rgba(255, 255, 255, 0.08);
    --lobby-chip-bg: rgba(6, 19, 28, 0.82);
    --lobby-chip-border: rgba(142, 230, 236, 0.16);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: calc(100vh - 54px);
    width: 100%;
}

.room-shell.is-host-lobby {
    gap: 10px;
}

.room-shell.has-lobby-relic-selection {
    --lobby-mode-label-color: #ffd46e;
    --lobby-panel-top: rgba(86, 60, 30, 0.95);
    --lobby-panel-bottom: rgba(25, 17, 10, 0.97);
    --lobby-panel-border: rgba(214, 173, 104, 0.24);
    --lobby-panel-shadow: rgba(233, 177, 74, 0.14);
    --lobby-panel-glow: rgba(255, 214, 128, 0.16);
    --lobby-panel-orb: rgba(255, 210, 118, 0.2);
    --lobby-stage-top: rgba(18, 34, 43, 0.94);
    --lobby-stage-bottom: rgba(8, 12, 17, 0.97);
    --lobby-stage-border: rgba(230, 193, 122, 0.18);
    --lobby-stage-radial: rgba(255, 216, 140, 0.08);
    --lobby-world-top: rgba(24, 42, 48, 0.95);
    --lobby-world-bottom: rgba(10, 15, 20, 0.98);
    --lobby-world-glow: rgba(255, 221, 156, 0.09);
    --lobby-world-spark: rgba(255, 234, 174, 0.11);
    --lobby-chip-bg: rgba(31, 23, 15, 0.84);
    --lobby-chip-border: rgba(214, 170, 103, 0.18);
}

.room-shell.has-lobby-pictionary-selection {
    --lobby-mode-label-color: #fffdf3;
    --lobby-panel-top: rgba(48, 58, 62, 0.95);
    --lobby-panel-bottom: rgba(17, 24, 29, 0.97);
    --lobby-panel-border: rgba(243, 240, 229, 0.24);
    --lobby-panel-shadow: rgba(235, 240, 236, 0.08);
    --lobby-panel-glow: rgba(255, 255, 250, 0.13);
    --lobby-panel-orb: rgba(236, 241, 237, 0.14);
    --lobby-panel-outline: rgba(104, 117, 124, 0.62);
    --lobby-stage-top: rgba(37, 45, 49, 0.94);
    --lobby-stage-bottom: rgba(12, 18, 22, 0.97);
    --lobby-stage-border: rgba(243, 240, 229, 0.18);
    --lobby-stage-radial: rgba(255, 255, 250, 0.08);
    --lobby-world-top: rgba(41, 50, 54, 0.95);
    --lobby-world-bottom: rgba(14, 20, 24, 0.98);
    --lobby-world-glow: rgba(255, 255, 250, 0.08);
    --lobby-world-spark: rgba(255, 255, 250, 0.12);
    --lobby-chip-bg: rgba(23, 31, 36, 0.84);
    --lobby-chip-border: rgba(243, 240, 229, 0.16);
}

.room-shell.is-active-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    height: 100vh;
    height: 100svh;
    max-height: 100vh;
    max-height: 100svh;
    overflow: hidden;
    overscroll-behavior: none;
    animation: none;
}

.room-shell.is-active-layout .room-content {
    order: 1;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.room-shell.is-active-layout .room-content > * {
    flex: 1 1 auto;
    min-height: 0;
}

.room-shell.is-active-layout .player-strip {
    order: 2;
}

.room-shell.is-active-layout .room-topbar {
    order: 3;
    flex: 0 0 auto;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(150, 255, 247, 0.18);
}

.room-shell.is-active-layout:has(.pictionary-shell) .room-topbar,
.room-shell.is-active-layout:has(.vault-player-shell) .room-topbar,
.room-shell.is-active-layout:has(.ph-game) .room-topbar {
    margin-top: 4px;
    padding-top: 4px;
    align-items: center;
    gap: 10px;
}

.room-shell.is-active-layout:has(.pictionary-shell) .room-brand,
.room-shell.is-active-layout:has(.vault-player-shell) .room-brand,
.room-shell.is-active-layout:has(.ph-game) .room-brand {
    min-width: 0;
    overflow: hidden;
    font-size: clamp(1.12rem, 2.6vw, 2.2rem);
    letter-spacing: 0.06em;
    line-height: 1;
    text-overflow: clip;
    white-space: nowrap;
}

.room-shell.is-active-layout:has(.pictionary-shell) .room-topbar-actions,
.room-shell.is-active-layout:has(.vault-player-shell) .room-topbar-actions,
.room-shell.is-active-layout:has(.ph-game) .room-topbar-actions {
    align-items: center;
    gap: 8px;
}

.room-shell.is-active-layout:has(.pictionary-shell) .account-chip,
.room-shell.is-active-layout:has(.vault-player-shell) .account-chip,
.room-shell.is-active-layout:has(.ph-game) .account-chip {
    min-height: 36px;
    padding: 0 11px 0 6px;
}

.room-shell.is-active-layout:has(.pictionary-shell) .account-chip-avatar,
.room-shell.is-active-layout:has(.vault-player-shell) .account-chip-avatar,
.room-shell.is-active-layout:has(.ph-game) .account-chip-avatar {
    width: 26px;
    height: 26px;
    font-size: 0.76rem;
}

.room-shell.is-active-layout:has(.pictionary-shell) .room-topbar-actions .ghost-button,
.room-shell.is-active-layout:has(.vault-player-shell) .room-topbar-actions .ghost-button,
.room-shell.is-active-layout:has(.ph-game) .room-topbar-actions .ghost-button {
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.84rem;
}

.room-shell.is-active-layout:has(.pictionary-shell) .room-topbar-actions .language-toggle,
.room-shell.is-active-layout:has(.vault-player-shell) .room-topbar-actions .language-toggle,
.room-shell.is-active-layout:has(.ph-game) .room-topbar-actions .language-toggle {
    min-height: 38px;
    min-width: 126px;
    padding: 3px;
}

.room-shell.is-active-layout .room-utility-slot {
    order: 4;
    flex: 0 0 auto;
}

.room-shell.is-active-layout #screen-banner {
    order: 5;
    position: fixed;
    left: 50%;
    bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 72px);
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 24px));
    z-index: 40;
    pointer-events: none;
}

.room-shell.is-active-layout .room-footer {
    order: 6;
    flex: 0 0 auto;
}

.room-shell.is-active-layout:has(.pictionary-shell) .room-footer,
.room-shell.is-active-layout:has(.vault-player-shell) .room-footer {
    min-height: 0;
    padding-top: 2px;
}

.room-shell.is-active-layout #screen-banner .banner {
    margin: 0;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.room-topbar-copy {
    display: grid;
    gap: 10px;
}

.player-strip {
    display: flex;
    justify-content: flex-start;
}

.room-content,
.room-utility-slot,
.player-strip {
    width: 100%;
}

.room-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 8px;
}

.room-footer:empty {
    display: none;
}

#app.theme-relic-run .page-shell.room-shell.is-active-layout {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

#app.theme-relic-run .room-shell.is-active-layout .room-topbar {
    margin-top: 8px;
    padding-top: 10px;
}

.room-utility-slot:empty,
.room-overlay-root:empty {
    display: none;
}

.room-overlay-root {
    pointer-events: none;
}

.room-shell.is-results-layout {
    min-height: 100vh;
    min-height: 100svh;
}

.room-shell.is-results-layout .room-content {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.final-results-shell {
    --final-results-stage-grid: rgba(255, 226, 160, 0.035);
    --final-results-stage-wash: rgba(255, 214, 124, 0.08);
    position: relative;
    isolation: isolate;
    flex: 1 1 auto;
    min-height: min(720px, calc(100vh - 138px));
    min-height: min(720px, calc(100svh - 138px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(18px, 4vw, 34px);
    padding: clamp(22px, 4vw, 46px);
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 22%, var(--final-results-stage-wash), transparent 26%),
        linear-gradient(135deg, rgba(9, 28, 38, 0.96), rgba(31, 28, 38, 0.96) 52%, rgba(45, 34, 18, 0.95)), #101c23;
    border: 1px solid rgba(226, 210, 161, 0.16);
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
}

.final-results-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 32%, rgba(255, 213, 126, 0.05)),
        linear-gradient(var(--final-results-stage-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--final-results-stage-grid) 1px, transparent 1px),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 16px);
    background-size:
        100% 100%,
        54px 54px,
        54px 54px,
        auto;
    opacity: 0.55;
}

.final-results-shell::after {
    content: "";
    position: absolute;
    left: clamp(34px, 8vw, 130px);
    right: clamp(34px, 8vw, 130px);
    bottom: clamp(18px, 3.8vw, 46px);
    z-index: 0;
    height: clamp(88px, 14vw, 164px);
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 217, 129, 0.18) 24%,
            rgba(255, 248, 214, 0.12) 50%,
            rgba(255, 217, 129, 0.18) 76%,
            transparent
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 72%);
    border-top: 1px solid rgba(255, 218, 132, 0.22);
    opacity: 0.76;
    transform: perspective(880px) rotateX(58deg);
    transform-origin: bottom center;
}

.final-results-shell.is-pictionary-results {
    --final-results-stage-grid: rgba(45, 54, 56, 0.025);
    --final-results-stage-wash: rgba(255, 238, 180, 0.32);
    background:
        radial-gradient(circle at 48% 20%, rgba(255, 251, 226, 0.54), transparent 30%),
        linear-gradient(135deg, rgba(244, 241, 228, 0.98), rgba(205, 211, 202, 0.96) 54%, rgba(31, 36, 40, 0.95)), #f4f0e4;
    color: #20282c;
    border-color: rgba(55, 61, 61, 0.2);
}

.final-results-shell.is-pictionary-results::after {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(155, 102, 18, 0.16) 24%,
            rgba(255, 245, 203, 0.24) 50%,
            rgba(155, 102, 18, 0.16) 76%,
            transparent
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 72%);
    border-top-color: rgba(134, 92, 22, 0.24);
}

.final-results-actions {
    position: absolute;
    top: clamp(14px, 2.4vw, 24px);
    right: clamp(14px, 2.4vw, 24px);
    z-index: 2;
    display: flex;
    justify-content: flex-end;
}

.final-results-continue-button {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    font-weight: 850;
}

.final-results-waiting {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(7, 18, 25, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem;
    font-weight: 800;
}

.is-pictionary-results .final-results-waiting {
    background: rgba(255, 255, 255, 0.58);
    border-color: rgba(32, 40, 44, 0.16);
    color: rgba(32, 40, 44, 0.76);
}

.final-results-header {
    position: relative;
    z-index: 2;
    width: min(920px, 100%);
    display: grid;
    gap: 8px;
    padding-right: min(190px, 36vw);
}

.final-results-kicker {
    margin: 0;
    color: #ffd884;
    font-size: clamp(0.92rem, 1.7vw, 1.08rem);
    font-weight: 900;
    text-transform: uppercase;
}

.is-pictionary-results .final-results-kicker {
    color: #8d5f13;
}

.final-results-header h1 {
    margin: 0;
    color: #fff7d6;
    font-size: 5.2rem;
    line-height: 0.92;
    letter-spacing: 0;
}

.is-pictionary-results .final-results-header h1 {
    color: #1d2629;
}

.final-results-podium {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-areas: "second first third";
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.22fr) minmax(0, 0.9fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: end;
    gap: clamp(12px, 2vw, 22px);
    padding: 0 clamp(0px, 1.5vw, 20px) clamp(10px, 2.2vw, 26px);
}

.final-results-podium.is-empty {
    display: grid;
    place-items: center;
}

.final-results-empty {
    margin: 0;
    width: min(420px, 100%);
    padding: 26px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    font-size: clamp(1.35rem, 4vw, 2.2rem);
    font-weight: 900;
}

.is-pictionary-results .final-results-empty {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(32, 40, 44, 0.14);
    color: rgba(32, 40, 44, 0.74);
}

.final-result-place {
    --final-result-accent: #d6e7f5;
    --final-result-accent-glow: rgba(178, 216, 246, 0.18);
    --final-result-panel: rgba(13, 26, 34, 0.78);
    --final-result-panel-top: rgba(255, 255, 255, 0.13);
    --final-result-panel-bottom: rgba(255, 255, 255, 0.04);
    --final-result-metric-bg: rgba(8, 23, 31, 0.78);
    --final-result-metric-border: rgba(214, 232, 245, 0.18);
    --final-result-y: 0px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    min-height: clamp(230px, 31vw, 330px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
    gap: 18px;
    padding: clamp(18px, 3vw, 30px);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(180deg, var(--final-result-panel-top), var(--final-result-panel-bottom)), var(--final-result-panel);
    color: #f8fbf7;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 20px 42px rgba(0, 0, 0, 0.22);
    opacity: 0;
    transform: translateY(calc(var(--final-result-y) + 24px)) scale(0.96);
    animation: final-result-reveal 640ms cubic-bezier(0.18, 0.84, 0.2, 1) forwards;
    animation-delay: var(--final-result-reveal-delay, calc(var(--final-result-reveal-index) * 820ms + 180ms));
}

.final-result-place::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 42%),
        radial-gradient(ellipse at 50% -18%, var(--final-result-accent-glow), transparent 64%);
    opacity: 0.88;
}

.final-result-place::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 0;
    height: 5px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--final-result-accent), transparent);
    opacity: 0.72;
}

.final-result-rank,
.final-result-metric,
.final-result-player-list {
    position: relative;
    z-index: 1;
}

.is-pictionary-results .final-result-place {
    --final-result-panel: #f3eee2;
    --final-result-panel-top: rgba(255, 255, 255, 0.92);
    --final-result-panel-bottom: rgba(233, 228, 216, 0.86);
    --final-result-metric-bg: rgba(239, 232, 215, 0.78);
    --final-result-metric-border: rgba(42, 50, 52, 0.14);
    background:
        repeating-linear-gradient(0deg, rgba(32, 40, 44, 0.026) 0, rgba(32, 40, 44, 0.026) 1px, transparent 1px, transparent 28px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(239, 235, 220, 0.82)), #f4efe1;
    color: #20282c;
    border-color: rgba(38, 44, 45, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 20px 42px rgba(20, 24, 24, 0.18);
}

.final-result-place.is-place-1 {
    --final-result-accent: #ffd884;
    --final-result-accent-glow: rgba(255, 216, 132, 0.34);
    --final-result-panel: rgba(26, 38, 33, 0.88);
    --final-result-panel-top: rgba(255, 234, 168, 0.26);
    --final-result-panel-bottom: rgba(255, 255, 255, 0.06);
    --final-result-metric-bg: rgba(44, 32, 13, 0.76);
    --final-result-metric-border: rgba(255, 222, 142, 0.32);
    --final-result-y: -18px;
    grid-area: first;
    justify-items: center;
    min-height: clamp(320px, 42vw, 460px);
    text-align: center;
    background:
        radial-gradient(circle at 50% 52%, rgba(255, 247, 210, 0.2), transparent 34%),
        linear-gradient(180deg, var(--final-result-panel-top), var(--final-result-panel-bottom)), var(--final-result-panel);
    border-color: rgba(255, 216, 125, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 24px 62px rgba(0, 0, 0, 0.3),
        0 0 44px rgba(255, 213, 114, 0.16);
}

.is-pictionary-results .final-result-place.is-place-1 {
    --final-result-accent: #9c6811;
    --final-result-accent-glow: rgba(255, 207, 93, 0.46);
    --final-result-panel: #f7efd8;
    --final-result-panel-top: rgba(255, 231, 152, 0.84);
    --final-result-panel-bottom: rgba(255, 255, 255, 0.9);
    --final-result-metric-bg: rgba(255, 243, 203, 0.88);
    --final-result-metric-border: rgba(156, 104, 17, 0.24);
    background:
        radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.44), transparent 36%),
        linear-gradient(180deg, rgba(255, 229, 149, 0.84), rgba(255, 255, 255, 0.9)), #f6eed8;
    border-color: rgba(151, 106, 24, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 24px 62px rgba(24, 28, 28, 0.2),
        0 0 46px rgba(182, 122, 20, 0.16);
}

.final-result-place.is-place-2 {
    --final-result-accent: #c8d8e4;
    --final-result-accent-glow: rgba(202, 223, 241, 0.22);
    --final-result-panel: rgba(18, 35, 48, 0.78);
    --final-result-metric-bg: rgba(8, 25, 38, 0.72);
    grid-area: second;
}

.final-result-place.is-place-3 {
    --final-result-accent: #e5a16e;
    --final-result-accent-glow: rgba(229, 161, 110, 0.2);
    --final-result-panel: rgba(23, 29, 32, 0.78);
    --final-result-metric-bg: rgba(31, 24, 20, 0.72);
    grid-area: third;
    min-height: clamp(220px, 29vw, 312px);
}

.is-pictionary-results .final-result-place.is-place-2 {
    --final-result-accent: #687580;
    --final-result-accent-glow: rgba(94, 109, 118, 0.14);
    --final-result-panel: #f0eee8;
    --final-result-metric-bg: rgba(230, 232, 229, 0.82);
}

.is-pictionary-results .final-result-place.is-place-3 {
    --final-result-accent: #9e6541;
    --final-result-accent-glow: rgba(158, 101, 65, 0.14);
    --final-result-panel: #f2ede5;
    --final-result-metric-bg: rgba(236, 229, 217, 0.82);
}

.final-result-rank {
    order: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid color-mix(in srgb, var(--final-result-accent), transparent 50%);
    color: var(--final-result-accent);
    font-size: 1.05rem;
    font-weight: 950;
    line-height: 1;
    text-shadow: none;
    box-shadow: 0 0 24px var(--final-result-accent-glow);
}

.final-result-place.is-place-1 .final-result-rank,
.final-result-place.is-place-1 .final-result-metric {
    justify-self: center;
}

.is-pictionary-results .final-result-rank {
    color: var(--final-result-accent);
    background: rgba(255, 255, 255, 0.5);
}

.final-result-place.is-place-1 .final-result-rank {
    min-height: 40px;
    padding: 0 16px;
    font-size: 1.16rem;
    background: color-mix(in srgb, var(--final-result-accent), transparent 82%);
}

.final-result-metric {
    order: 3;
    justify-self: start;
    display: grid;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
    padding: 10px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent), var(--final-result-metric-bg);
    border: 1px solid var(--final-result-metric-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 24px rgba(0, 0, 0, 0.14);
}

.final-result-metric span {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
    line-height: 1;
}

.is-pictionary-results .final-result-metric span {
    color: rgba(32, 40, 44, 0.58);
}

.is-pictionary-results .final-result-metric {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent), var(--final-result-metric-bg);
    border-color: var(--final-result-metric-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 12px 24px rgba(30, 34, 34, 0.08);
}

.final-result-metric strong {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 950;
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
    text-shadow: none;
}

.is-pictionary-results .final-result-metric strong {
    color: #1d2629;
    text-shadow: none;
}

.final-result-place.is-place-1 .final-result-metric strong {
    font-size: 2.45rem;
}

.final-result-player-list {
    order: 2;
    align-self: center;
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.final-result-player-list.has-tied-players {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.final-result-player-list.has-many-players {
    gap: 6px;
}

.final-result-player {
    min-width: 0;
    max-width: 100%;
}

.final-result-player-name {
    display: block;
    max-width: 100%;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    color: #ffffff;
    font-size: 2.85rem;
    font-weight: 950;
    line-height: 0.96;
    overflow-wrap: anywhere;
    text-wrap: balance;
    text-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
}

.is-pictionary-results .final-result-player-name {
    background: transparent;
    border-color: transparent;
    color: #182226;
    text-shadow: none;
}

.final-result-player-list.has-tied-players .final-result-player-name {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 1.5rem;
    line-height: 1.02;
    text-shadow: none;
}

.is-pictionary-results .final-result-player-list.has-tied-players .final-result-player-name {
    background: rgba(31, 40, 43, 0.08);
    border-color: rgba(31, 40, 43, 0.12);
}

.final-result-place.is-place-1 .final-result-player-name {
    font-size: 5.6rem;
}

.final-result-place.is-place-1 .final-result-player-list.has-tied-players .final-result-player-name {
    font-size: 1.7rem;
}

@media (max-width: 1120px) {
    .final-results-header h1 {
        font-size: 4.4rem;
    }

    .final-result-player-name {
        font-size: 2.25rem;
    }

    .final-result-player-list.has-tied-players .final-result-player-name {
        font-size: 1.3rem;
    }

    .final-result-place.is-place-1 .final-result-player-name {
        font-size: 4rem;
    }
}

@media (max-width: 760px) {
    .final-results-shell {
        min-height: calc(100vh - 112px);
        min-height: calc(100svh - 112px);
        padding: 78px clamp(16px, 5vw, 28px) clamp(18px, 5vw, 30px);
        gap: 20px;
    }

    .final-results-header {
        padding-right: 0;
    }

    .final-results-header h1 {
        font-size: 4.1rem;
    }

    .final-results-podium {
        display: flex;
        flex-direction: column-reverse;
        align-items: stretch;
        justify-content: flex-end;
        padding: 0;
    }

    .final-results-shell::after {
        display: none;
    }

    .final-result-place,
    .final-result-place.is-place-1,
    .final-result-place.is-place-2,
    .final-result-place.is-place-3 {
        --final-result-y: 0px;
        grid-column: auto;
        grid-area: auto;
        min-height: auto;
    }

    .final-result-place {
        padding: 18px;
        gap: 12px;
    }

    .final-result-place.is-place-1 {
        min-height: 214px;
    }

    .final-result-place.is-place-2,
    .final-result-place.is-place-3 {
        min-height: 136px;
    }

    .final-result-rank {
        min-height: 34px;
        padding: 0 13px;
        font-size: 1rem;
    }

    .final-result-place.is-place-1 .final-result-rank {
        min-height: 36px;
        font-size: 1.05rem;
    }

    .final-result-metric strong {
        font-size: 1.55rem;
    }

    .final-result-place.is-place-1 .final-result-metric strong {
        font-size: 1.8rem;
    }

    .final-result-player-name {
        font-size: 2.05rem;
    }

    .final-result-place.is-place-1 .final-result-player-name {
        font-size: 3.25rem;
    }

    .final-result-player-list.has-tied-players .final-result-player-name,
    .final-result-place.is-place-1 .final-result-player-list.has-tied-players .final-result-player-name {
        min-height: 36px;
        padding: 0 12px;
        font-size: 1.18rem;
    }
}

@media (max-width: 520px) {
    .final-results-header h1 {
        font-size: 3.25rem;
    }

    .final-result-player-name,
    .final-result-place.is-place-2 .final-result-player-name,
    .final-result-place.is-place-3 .final-result-player-name {
        font-size: 2.1rem;
    }

    .final-result-place.is-place-1 .final-result-player-name {
        font-size: 2.85rem;
    }
}

.final-results-shell {
    --final-results-stage-grid: rgba(255, 226, 160, 0.032);
    --final-results-stage-wash: rgba(255, 210, 118, 0.2);
    --final-results-stage-rim: rgba(255, 225, 143, 0.36);
    --final-results-stage-face: rgba(112, 79, 38, 0.26);
    --final-results-stage-spark: rgba(255, 226, 142, 0.76);
    --final-results-title: #fff7d6;
    --final-results-title-shadow: rgba(255, 204, 95, 0.28);
    min-height: min(710px, calc(100vh - 138px));
    min-height: min(710px, calc(100svh - 138px));
    grid-template-rows: auto minmax(0, 1fr);
    gap: 16px;
    padding: 34px 42px 38px;
    background:
        linear-gradient(180deg, rgba(255, 244, 202, 0.08), transparent 18%),
        radial-gradient(ellipse at 50% 18%, var(--final-results-stage-wash), transparent 38%),
        radial-gradient(ellipse at 50% 104%, rgba(255, 184, 66, 0.24), transparent 44%),
        linear-gradient(135deg, rgba(5, 18, 27, 0.99), rgba(24, 25, 34, 0.99) 54%, rgba(47, 35, 19, 0.97)), #101c23;
    border-color: rgba(255, 220, 139, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 34px 90px rgba(0, 0, 0, 0.3);
}

.final-results-shell.is-relic-results {
    --final-results-stage-grid: rgba(255, 222, 145, 0.034);
    --final-results-stage-wash: rgba(255, 194, 88, 0.24);
    --final-results-stage-rim: rgba(255, 220, 132, 0.42);
    --final-results-stage-face: rgba(112, 74, 27, 0.34);
}

.final-results-shell.is-pictionary-results {
    --final-results-stage-grid: rgba(24, 32, 35, 0.065);
    --final-results-stage-wash: rgba(36, 46, 49, 0.25);
    --final-results-stage-rim: rgba(34, 43, 46, 0.42);
    --final-results-stage-face: rgba(18, 25, 28, 0.2);
    --final-results-stage-spark: rgba(178, 129, 43, 0.48);
    --final-results-title: #1d2629;
    --final-results-title-shadow: rgba(21, 28, 31, 0.22);
    border-color: rgba(26, 35, 38, 0.26);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 22%),
        radial-gradient(ellipse at 48% 18%, rgba(38, 48, 51, 0.25), transparent 38%),
        radial-gradient(ellipse at 50% 100%, rgba(17, 24, 27, 0.24), transparent 50%),
        linear-gradient(135deg, rgba(225, 225, 218, 0.99), rgba(200, 205, 202, 0.98) 62%, rgba(147, 159, 159, 0.96)), #d5d8d2;
}

.final-results-shell::before {
    background:
        linear-gradient(
            110deg,
            transparent 0 21%,
            rgba(255, 235, 180, 0.07) 21% 22%,
            transparent 22% 48%,
            rgba(255, 235, 180, 0.055) 48% 49%,
            transparent 49% 100%
        ),
        linear-gradient(var(--final-results-stage-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--final-results-stage-grid) 1px, transparent 1px),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 16px);
    background-size:
        100% 100%,
        54px 54px,
        54px 54px,
        auto;
    opacity: 0.62;
}

.final-results-shell::after {
    inset: 0;
    display: block;
    height: auto;
    border: 0;
    opacity: 0.78;
    transform: none;
    background:
        conic-gradient(
            from 214deg at 50% 21%,
            transparent 0deg,
            rgba(255, 222, 136, 0.2) 5deg,
            transparent 11deg,
            transparent 28deg,
            rgba(255, 222, 136, 0.15) 34deg,
            transparent 42deg,
            transparent 318deg,
            rgba(255, 222, 136, 0.15) 326deg,
            transparent 334deg,
            transparent 360deg
        ),
        radial-gradient(circle at 37% 27%, var(--final-results-stage-spark) 0 1px, transparent 2px),
        radial-gradient(circle at 63% 31%, var(--final-results-stage-spark) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 20%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px),
        radial-gradient(circle at 28% 42%, rgba(255, 255, 255, 0.52) 0 1px, transparent 2px),
        linear-gradient(180deg, rgba(255, 229, 153, 0.08), transparent 45%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.72) 52%, transparent 94%);
}

.final-results-shell.is-pictionary-results::after {
    opacity: 0.58;
    background:
        conic-gradient(
            from 214deg at 50% 21%,
            transparent 0deg,
            rgba(31, 40, 43, 0.14) 5deg,
            transparent 11deg,
            transparent 28deg,
            rgba(31, 40, 43, 0.1) 34deg,
            transparent 42deg,
            transparent 318deg,
            rgba(31, 40, 43, 0.1) 326deg,
            transparent 334deg,
            transparent 360deg
        ),
        radial-gradient(circle at 37% 27%, var(--final-results-stage-spark) 0 1px, transparent 2px),
        radial-gradient(circle at 63% 31%, var(--final-results-stage-spark) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 20%, rgba(255, 255, 255, 0.48) 0 1px, transparent 2px),
        radial-gradient(circle at 28% 42%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
        linear-gradient(180deg, rgba(31, 40, 43, 0.08), transparent 45%);
}

.final-results-continue-button {
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid rgba(255, 220, 132, 0.72);
    background: linear-gradient(180deg, rgba(255, 238, 184, 0.16), transparent 48%), rgba(10, 14, 17, 0.88);
    color: #fff5d0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 0 1px rgba(255, 188, 61, 0.12),
        0 12px 28px rgba(0, 0, 0, 0.3),
        0 0 24px rgba(255, 193, 75, 0.2);
}

.final-results-continue-button:hover,
.final-results-continue-button:focus-visible {
    border-color: rgba(255, 231, 157, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 0 1px rgba(255, 188, 61, 0.18),
        0 14px 30px rgba(0, 0, 0, 0.34),
        0 0 30px rgba(255, 202, 87, 0.26);
}

.is-pictionary-results .final-results-continue-button {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 52%), #182225;
    border-color: rgba(31, 39, 42, 0.74);
    color: #f5f1e6;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 10px 24px rgba(30, 36, 38, 0.24),
        0 0 18px rgba(31, 39, 42, 0.16);
}

.final-results-header {
    width: min(820px, 100%);
    gap: 7px;
    padding-right: min(210px, 34vw);
}

.final-results-kicker {
    color: #ffd884;
    font-size: 0.95rem;
    letter-spacing: 0;
}

.final-results-header h1 {
    color: var(--final-results-title);
    font-size: 5.15rem;
    line-height: 0.92;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.08),
        0 18px 44px var(--final-results-title-shadow);
}

.final-results-podium {
    isolation: isolate;
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.2fr) minmax(0, 0.84fr);
    gap: 18px;
    align-self: start;
    min-height: 524px;
    max-height: 564px;
    margin-top: 24px;
    padding: 64px 42px 58px;
    perspective: 1100px;
}

.final-results-podium::before {
    content: "";
    position: absolute;
    left: 1%;
    right: 1%;
    bottom: 0;
    z-index: 0;
    height: 150px;
    pointer-events: none;
    border-radius: 50% 50% 12px 12px / 34% 34% 14px 14px;
    background:
        radial-gradient(ellipse at 50% 10%, rgba(255, 246, 210, 0.24), transparent 62%) 50% 0 / 60% 42px no-repeat,
        linear-gradient(180deg, var(--final-results-stage-rim), var(--final-results-stage-face)) 50% 100% / 36% 118px no-repeat,
        linear-gradient(180deg, color-mix(in srgb, var(--final-results-stage-rim), transparent 18%), var(--final-results-stage-face)) 7%
            100% / 31% 78px no-repeat,
        linear-gradient(180deg, color-mix(in srgb, var(--final-results-stage-rim), transparent 34%), var(--final-results-stage-face)) 93%
            100% / 31% 68px no-repeat,
        linear-gradient(90deg, transparent, var(--final-results-stage-rim), transparent) 50% 24px / 100% 1px no-repeat;
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.26));
    opacity: 0.96;
}

.final-results-podium::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 94px;
    z-index: 0;
    width: min(620px, 58%);
    height: 390px;
    pointer-events: none;
    background: conic-gradient(
        from 205deg at 50% 100%,
        transparent 0deg,
        rgba(255, 224, 139, 0.24) 14deg,
        transparent 28deg,
        transparent 52deg,
        rgba(255, 224, 139, 0.16) 66deg,
        transparent 82deg,
        transparent 278deg,
        rgba(255, 224, 139, 0.14) 294deg,
        transparent 310deg,
        transparent 360deg
    );
    mask-image: radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.9) 0 36%, transparent 74%);
    opacity: 0.7;
    transform: translateX(-50%);
}

.final-result-place {
    --final-result-frame: color-mix(in srgb, var(--final-result-accent), transparent 58%);
    z-index: 2;
    overflow: visible;
    grid-template-rows: minmax(0, 1fr);
    min-height: 292px;
    align-content: center;
    gap: 0;
    padding: 64px 24px 26px;
    border-radius: 12px;
    border-color: var(--final-result-frame);
    background:
        linear-gradient(180deg, var(--final-result-panel-top), var(--final-result-panel-bottom)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 13px),
        var(--final-result-panel);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.035),
        0 24px 48px rgba(0, 0, 0, 0.28),
        0 0 34px var(--final-result-accent-glow);
}

.final-result-place.is-place-1 {
    --final-result-y: -28px;
    min-height: 418px;
    padding-top: 86px;
    border-width: 2px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 0 0 1px rgba(255, 239, 184, 0.08),
        0 30px 70px rgba(0, 0, 0, 0.35),
        0 0 68px rgba(255, 210, 100, 0.28);
}

.final-result-place.is-place-2 {
    --final-result-y: 14px;
    min-height: 296px;
}

.final-result-place.is-place-3 {
    --final-result-y: 24px;
    min-height: 278px;
}

.is-pictionary-results .final-result-place {
    background:
        repeating-linear-gradient(0deg, rgba(32, 40, 44, 0.03) 0, rgba(32, 40, 44, 0.03) 1px, transparent 1px, transparent 28px),
        linear-gradient(180deg, var(--final-result-panel-top), var(--final-result-panel-bottom)), var(--final-result-panel);
}

.final-result-place::before {
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 50% -12%, var(--final-result-accent-glow), transparent 58%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 42%);
    opacity: 0.9;
}

.final-result-place::after {
    inset: 7px;
    height: auto;
    border: 1px solid color-mix(in srgb, var(--final-result-accent), transparent 62%);
    border-radius: 8px;
    background:
        linear-gradient(90deg, transparent, color-mix(in srgb, var(--final-result-accent), transparent 58%), transparent) 50% 0 / 72% 1px
            no-repeat,
        linear-gradient(90deg, transparent, color-mix(in srgb, var(--final-result-accent), transparent 66%), transparent) 50% 100% / 64% 1px
            no-repeat;
    opacity: 0.82;
}

.final-result-rank,
.final-result-core {
    position: relative;
    z-index: 1;
}

.final-result-rank {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
    justify-content: center;
    width: 76px;
    height: 76px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(255, 255, 255, 0.96),
            color-mix(in srgb, var(--final-result-accent), white 16%) 34%,
            var(--final-result-accent) 68%,
            color-mix(in srgb, var(--final-result-accent), black 34%)
        ),
        var(--final-result-accent);
    border: 1px solid color-mix(in srgb, var(--final-result-accent), white 42%);
    color: rgba(30, 24, 15, 0.92);
    font-size: 1.58rem;
    font-weight: 950;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.42),
        inset 0 -4px 8px rgba(0, 0, 0, 0.2),
        0 10px 24px rgba(0, 0, 0, 0.26),
        0 0 30px var(--final-result-accent-glow);
    transform: translate(-50%, -50%);
}

.final-result-place.is-place-1 .final-result-rank {
    width: 96px;
    height: 96px;
    background: radial-gradient(circle at 34% 24%, #fff4bd 0 15%, #f8d66d 35%, #d59623 68%, #83530e 100%), #d59623;
    border: 2px solid #ffefae;
    color: #302006;
    font-size: 2.08rem;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36);
    box-shadow:
        inset 0 3px 5px rgba(255, 255, 255, 0.48),
        inset 0 -5px 10px rgba(76, 43, 4, 0.3),
        0 12px 26px rgba(0, 0, 0, 0.3),
        0 0 36px rgba(255, 205, 85, 0.42);
}

.final-result-rank::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--final-result-accent), transparent 46%);
    box-shadow: 0 0 22px var(--final-result-accent-glow);
}

.final-result-place.is-place-1 .final-result-rank::after {
    inset: -7px;
    border: 2px solid rgba(255, 235, 166, 0.72);
    box-shadow:
        inset 0 0 0 1px rgba(119, 75, 9, 0.24),
        0 0 26px rgba(255, 205, 85, 0.4);
}

.final-result-place.is-place-1 .final-result-rank::before {
    content: "";
    position: absolute;
    top: -28px;
    left: 50%;
    width: 54px;
    height: 32px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), transparent 34%), linear-gradient(180deg, #ffe9a6, #d58c18);
    clip-path: polygon(0 100%, 9% 35%, 28% 72%, 50% 0, 72% 72%, 91% 35%, 100% 100%);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.22));
    transform: translateX(-50%);
}

.is-pictionary-results .final-result-rank {
    color: #2a2114;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.62),
        inset 0 -4px 8px rgba(100, 66, 14, 0.16),
        0 10px 22px rgba(44, 38, 28, 0.16),
        0 0 28px var(--final-result-accent-glow);
}

.final-result-core {
    order: 1;
    align-self: center;
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 14px;
    text-align: center;
}

.final-result-core::after {
    content: "";
    order: 2;
    width: min(250px, 72%);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--final-result-accent), transparent);
    opacity: 0.68;
}

.final-result-player-list {
    order: 1;
    display: grid;
    justify-items: center;
    gap: 9px;
    width: 100%;
}

.final-result-player-list.has-tied-players {
    justify-content: center;
    gap: 8px;
}

.final-result-player-name {
    font-size: 2.5rem;
    line-height: 1;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 36px rgba(0, 0, 0, 0.36),
        0 0 26px var(--final-result-accent-glow);
}

.final-result-place.is-place-1 .final-result-player-name {
    font-size: 5.15rem;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.1),
        0 18px 42px rgba(0, 0, 0, 0.42),
        0 0 36px rgba(255, 217, 121, 0.34);
}

.final-result-place.has-long-name .final-result-player-name {
    font-size: 2rem;
    line-height: 1.04;
}

.final-result-place.has-very-long-name .final-result-player-name {
    font-size: 1.7rem;
    line-height: 1.06;
}

.final-result-place.is-place-1.has-long-name .final-result-player-name {
    font-size: 3.55rem;
}

.final-result-place.is-place-1.has-very-long-name .final-result-player-name {
    font-size: 2.8rem;
}

.is-pictionary-results .final-result-player-name {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7),
        0 14px 28px rgba(82, 70, 45, 0.14);
}

.final-result-player-list.has-tied-players .final-result-player-name,
.final-result-place.is-place-1 .final-result-player-list.has-tied-players .final-result-player-name {
    min-height: 40px;
    padding: 0 14px;
    font-size: 1.26rem;
    line-height: 1;
}

.final-result-place.is-place-1 .final-result-player-list.has-tied-players .final-result-player-name {
    font-size: 1.42rem;
}

.final-result-metric {
    order: 3;
    justify-self: center;
    min-width: min(260px, 100%);
    padding: 12px 18px 13px;
    border-radius: 10px;
    text-align: center;
}

.final-result-place.is-place-1 .final-result-metric {
    min-width: min(320px, 100%);
    margin-top: 3px;
    padding: 14px 22px 15px;
}

.final-result-metric span {
    font-size: 0.7rem;
    letter-spacing: 0;
}

.final-result-metric strong {
    font-size: 2.05rem;
    color: color-mix(in srgb, var(--final-result-accent), white 34%);
    text-shadow: 0 0 22px var(--final-result-accent-glow);
}

.final-result-place.is-place-1 .final-result-metric strong {
    font-size: 2.75rem;
}

.is-pictionary-results .final-results-kicker {
    color: #566267;
}

.is-pictionary-results .final-result-place {
    --final-result-accent: #4c575c;
    --final-result-accent-glow: rgba(34, 42, 45, 0.18);
    --final-result-panel: #e3e3dc;
    --final-result-panel-top: rgba(250, 250, 245, 0.82);
    --final-result-panel-bottom: rgba(190, 197, 195, 0.88);
    --final-result-metric-bg: rgba(230, 231, 225, 0.9);
    --final-result-metric-border: rgba(29, 38, 41, 0.18);
    --final-result-frame: rgba(35, 43, 46, 0.28);
    color: #1d2629;
    border-color: var(--final-result-frame);
    background:
        repeating-linear-gradient(0deg, rgba(31, 40, 43, 0.045) 0, rgba(31, 40, 43, 0.045) 1px, transparent 1px, transparent 28px),
        linear-gradient(180deg, var(--final-result-panel-top), var(--final-result-panel-bottom)), var(--final-result-panel);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        inset 0 0 0 1px rgba(32, 40, 43, 0.035),
        0 24px 48px rgba(29, 36, 38, 0.16),
        0 0 28px var(--final-result-accent-glow);
}

.is-pictionary-results .final-result-place.is-place-1 {
    --final-result-accent: #c28a21;
    --final-result-accent-glow: rgba(199, 144, 35, 0.34);
    --final-result-panel: #e8cf82;
    --final-result-panel-top: rgba(255, 239, 178, 0.96);
    --final-result-panel-bottom: rgba(206, 160, 67, 0.82);
    --final-result-metric-bg: rgba(255, 240, 192, 0.9);
    --final-result-metric-border: rgba(166, 110, 13, 0.36);
    --final-result-frame: rgba(176, 118, 18, 0.66);
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 250, 210, 0.48), transparent 38%),
        radial-gradient(ellipse at 50% 105%, rgba(151, 92, 10, 0.28), transparent 58%),
        repeating-linear-gradient(0deg, rgba(91, 63, 15, 0.055) 0, rgba(91, 63, 15, 0.055) 1px, transparent 1px, transparent 30px),
        linear-gradient(180deg, var(--final-result-panel-top), var(--final-result-panel-bottom)), var(--final-result-panel);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        inset 0 0 0 1px rgba(104, 66, 7, 0.08),
        0 30px 70px rgba(24, 31, 34, 0.24),
        0 0 52px rgba(197, 141, 31, 0.24);
}

.is-pictionary-results .final-result-place.is-place-2 {
    --final-result-accent: #7c8990;
    --final-result-accent-glow: rgba(113, 129, 137, 0.28);
    --final-result-panel: #d4dcdb;
    --final-result-panel-top: rgba(250, 253, 251, 0.94);
    --final-result-panel-bottom: rgba(169, 181, 184, 0.78);
    --final-result-metric-bg: rgba(239, 242, 239, 0.88);
    --final-result-metric-border: rgba(98, 113, 120, 0.3);
    --final-result-frame: rgba(103, 119, 128, 0.58);
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.5), transparent 38%),
        radial-gradient(ellipse at 50% 105%, rgba(82, 96, 103, 0.2), transparent 58%),
        repeating-linear-gradient(0deg, rgba(32, 40, 43, 0.045) 0, rgba(32, 40, 43, 0.045) 1px, transparent 1px, transparent 30px),
        linear-gradient(180deg, var(--final-result-panel-top), var(--final-result-panel-bottom)), var(--final-result-panel);
}

.is-pictionary-results .final-result-place.is-place-3 {
    --final-result-accent: #a86139;
    --final-result-accent-glow: rgba(166, 96, 54, 0.28);
    --final-result-panel: #e4bea1;
    --final-result-panel-top: rgba(255, 231, 208, 0.9);
    --final-result-panel-bottom: rgba(185, 115, 71, 0.72);
    --final-result-metric-bg: rgba(252, 226, 205, 0.86);
    --final-result-metric-border: rgba(150, 84, 45, 0.3);
    --final-result-frame: rgba(152, 86, 49, 0.56);
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 237, 217, 0.42), transparent 38%),
        radial-gradient(ellipse at 50% 105%, rgba(102, 53, 27, 0.22), transparent 58%),
        repeating-linear-gradient(0deg, rgba(78, 42, 24, 0.046) 0, rgba(78, 42, 24, 0.046) 1px, transparent 1px, transparent 30px),
        linear-gradient(180deg, var(--final-result-panel-top), var(--final-result-panel-bottom)), var(--final-result-panel);
}

.is-pictionary-results .final-result-rank {
    background: radial-gradient(circle at 34% 24%, #f7f6ee 0 14%, #cfd4d3 38%, #6d7a80 72%, #303a3e 100%), #6d7a80;
    border-color: rgba(247, 246, 238, 0.88);
    color: #152023;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52);
    box-shadow:
        inset 0 3px 5px rgba(255, 255, 255, 0.56),
        inset 0 -5px 10px rgba(30, 38, 42, 0.32),
        0 10px 22px rgba(33, 40, 43, 0.18),
        0 0 24px var(--final-result-accent-glow);
}

.is-pictionary-results .final-result-place.is-place-1 .final-result-rank {
    background: radial-gradient(circle at 34% 24%, #fff3b8 0 14%, #f4cf61 36%, #c88e22 70%, #6c4108 100%), #c88e22;
    border-color: #ffefb0;
    color: #2e1d04;
    box-shadow:
        inset 0 3px 5px rgba(255, 255, 255, 0.6),
        inset 0 -5px 10px rgba(93, 55, 4, 0.32),
        0 12px 26px rgba(31, 38, 41, 0.22),
        0 0 32px rgba(203, 146, 34, 0.34);
}

.is-pictionary-results .final-result-place.is-place-2 .final-result-rank {
    background: radial-gradient(circle at 34% 24%, #ffffff 0 14%, #dce2e3 38%, #8c9aa1 72%, #3b474c 100%), #8c9aa1;
    border-color: #f7f9f7;
    color: #172125;
    box-shadow:
        inset 0 3px 5px rgba(255, 255, 255, 0.62),
        inset 0 -5px 10px rgba(42, 52, 57, 0.3),
        0 10px 22px rgba(33, 40, 43, 0.16),
        0 0 24px rgba(121, 137, 145, 0.22);
}

.is-pictionary-results .final-result-place.is-place-3 .final-result-rank {
    background: radial-gradient(circle at 34% 24%, #fff0df 0 14%, #e2a477 38%, #a45f35 72%, #50301f 100%), #a45f35;
    border-color: #f2c8a4;
    color: #2b170c;
    box-shadow:
        inset 0 3px 5px rgba(255, 255, 255, 0.46),
        inset 0 -5px 10px rgba(75, 39, 20, 0.32),
        0 10px 22px rgba(33, 40, 43, 0.16),
        0 0 24px rgba(153, 88, 50, 0.24);
}

.is-pictionary-results .final-result-place.is-place-1 .final-result-rank::after {
    border-color: rgba(255, 235, 166, 0.78);
    box-shadow:
        inset 0 0 0 1px rgba(119, 75, 9, 0.22),
        0 0 24px rgba(203, 146, 34, 0.34);
}

.is-pictionary-results .final-result-place.is-place-1 .final-result-rank::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), transparent 34%), linear-gradient(180deg, #ffe7a0, #c68518);
}

.is-pictionary-results .final-result-player-name {
    color: #182226;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.72),
        0 14px 28px rgba(29, 38, 41, 0.16);
}

.is-pictionary-results .final-result-place.is-place-1 .final-result-player-name {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.76),
        0 16px 34px rgba(28, 35, 38, 0.18);
}

.is-pictionary-results .final-result-metric {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent), var(--final-result-metric-bg);
    border-color: var(--final-result-metric-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 12px 24px rgba(29, 36, 38, 0.1);
}

.is-pictionary-results .final-result-metric span {
    color: rgba(29, 38, 41, 0.56);
}

.is-pictionary-results .final-result-metric strong {
    color: #172225;
    text-shadow: 0 0 16px rgba(31, 39, 42, 0.1);
}

.is-pictionary-results .final-result-player-list.has-tied-players .final-result-player-name {
    background: rgba(31, 40, 43, 0.1);
    border-color: rgba(31, 40, 43, 0.16);
}

@media (max-width: 1120px) {
    .final-results-shell {
        padding: 30px 28px 32px;
    }

    .final-results-header h1 {
        font-size: 4.2rem;
    }

    .final-results-podium {
        gap: 14px;
        min-height: 482px;
        max-height: 530px;
        margin-top: 18px;
        padding: 58px 16px 48px;
    }

    .final-result-place {
        min-height: 268px;
        padding-inline: 18px;
    }

    .final-result-place.is-place-1 {
        min-height: 380px;
    }

    .final-result-player-name {
        font-size: 2.08rem;
    }

    .final-result-place.is-place-1 .final-result-player-name {
        font-size: 3.86rem;
    }

    .final-result-rank {
        width: 70px;
        height: 70px;
        font-size: 1.42rem;
    }

    .final-result-place.is-place-1 .final-result-rank {
        width: 88px;
        height: 88px;
        font-size: 1.92rem;
    }
}

@media (orientation: portrait) and (min-width: 761px) and (max-width: 1024px) {
    .final-results-shell {
        min-height: calc(100vh - 112px);
        min-height: calc(100svh - 112px);
        padding: 78px 30px 34px;
        gap: 20px;
    }

    .final-results-header {
        width: min(680px, 100%);
        padding-right: min(180px, 30vw);
    }

    .final-results-header h1 {
        font-size: 4rem;
    }

    .final-results-podium {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: flex-start;
        gap: 28px;
        min-height: 0;
        max-height: none;
        margin-top: 8px;
        padding: 8px 0 0;
    }

    .final-results-podium::before,
    .final-results-podium::after {
        display: none;
    }

    .final-results-shell::after {
        opacity: 0.42;
    }

    .final-result-place,
    .final-result-place.is-place-1,
    .final-result-place.is-place-2,
    .final-result-place.is-place-3 {
        --final-result-y: 0px;
        grid-area: auto;
        min-height: auto;
    }

    .final-result-place {
        width: min(560px, 92%);
        margin-top: 32px;
        padding: 58px 30px 22px;
    }

    .final-result-place.is-place-1 {
        width: min(660px, 100%);
        min-height: 246px;
        margin-top: 42px;
        padding-top: 72px;
    }

    .final-result-place.is-place-2,
    .final-result-place.is-place-3 {
        min-height: 164px;
    }

    .final-result-place.is-place-1 .final-result-player-name {
        font-size: 3.55rem;
    }

    .final-result-player-name {
        font-size: 2.08rem;
    }

    .final-result-place.has-long-name .final-result-player-name {
        font-size: 1.72rem;
    }

    .final-result-place.has-very-long-name .final-result-player-name {
        font-size: 1.44rem;
    }

    .final-result-place.is-place-1.has-long-name .final-result-player-name {
        font-size: 2.78rem;
    }

    .final-result-place.is-place-1.has-very-long-name .final-result-player-name {
        font-size: 2.28rem;
    }

    .final-result-metric {
        min-width: min(280px, 100%);
    }

    .final-result-place.is-place-1 .final-result-metric {
        min-width: min(320px, 100%);
    }
}

@media (max-width: 760px) {
    .final-results-shell {
        min-height: calc(100vh - 112px);
        min-height: calc(100svh - 112px);
        padding: 82px 16px 22px;
        gap: 18px;
    }

    .final-results-header {
        padding-right: 0;
    }

    .final-results-header h1 {
        font-size: 3.05rem;
    }

    .final-results-kicker {
        font-size: 0.8rem;
    }

    .final-results-podium {
        display: flex;
        flex-direction: column-reverse;
        align-items: stretch;
        justify-content: flex-start;
        gap: 20px;
        align-self: start;
        min-height: 0;
        max-height: none;
        margin-top: 4px;
        padding: 10px 0 0;
    }

    .final-results-podium::before,
    .final-results-podium::after {
        display: none;
    }

    .final-results-shell::after {
        opacity: 0.34;
    }

    .final-result-place,
    .final-result-place.is-place-1,
    .final-result-place.is-place-2,
    .final-result-place.is-place-3 {
        --final-result-y: 0px;
        grid-column: auto;
        grid-area: auto;
        min-height: auto;
    }

    .final-result-place {
        margin-top: 30px;
        padding: 54px 16px 18px;
    }

    .final-result-place.is-place-1 {
        margin-top: 38px;
        min-height: 222px;
        padding-top: 64px;
    }

    .final-result-place.is-place-2,
    .final-result-place.is-place-3 {
        min-height: 152px;
    }

    .final-result-core {
        gap: 10px;
    }

    .final-result-rank,
    .final-result-place.is-place-1 .final-result-rank {
        width: 60px;
        height: 60px;
        font-size: 1.18rem;
    }

    .final-result-place.is-place-1 .final-result-rank {
        width: 76px;
        height: 76px;
        font-size: 1.58rem;
    }

    .final-result-place.is-place-1 .final-result-rank::before {
        top: -22px;
        width: 40px;
        height: 24px;
    }

    .final-result-player-name {
        font-size: 1.88rem;
    }

    .final-result-place.is-place-1 .final-result-player-name {
        font-size: 2.9rem;
    }

    .final-result-place.has-long-name .final-result-player-name,
    .final-result-place.has-very-long-name .final-result-player-name {
        font-size: 1.28rem;
    }

    .final-result-place.is-place-1.has-long-name .final-result-player-name,
    .final-result-place.is-place-1.has-very-long-name .final-result-player-name {
        font-size: 2rem;
    }

    .final-result-player-list.has-tied-players .final-result-player-name,
    .final-result-place.is-place-1 .final-result-player-list.has-tied-players .final-result-player-name {
        min-height: 32px;
        padding: 0 11px;
        font-size: 1rem;
    }

    .final-result-metric {
        min-width: min(230px, 100%);
        padding: 8px 13px 9px;
    }

    .final-result-metric span {
        font-size: 0.58rem;
    }

    .final-result-metric strong,
    .final-result-place.is-place-1 .final-result-metric strong {
        font-size: 1.48rem;
    }
}

@media (max-width: 520px) {
    .final-results-shell {
        padding-inline: 12px;
    }

    .final-results-header h1 {
        font-size: 2.48rem;
    }

    .final-result-place.is-place-1 {
        min-height: 204px;
    }

    .final-result-place.is-place-2,
    .final-result-place.is-place-3 {
        min-height: 142px;
    }

    .final-result-place.is-place-1 .final-result-player-name {
        font-size: 2.38rem;
    }

    .final-result-player-name {
        font-size: 1.58rem;
    }
}

.final-result-player-list.has-tied-players {
    display: grid;
    width: min(100%, 720px);
    justify-content: initial;
    justify-items: stretch;
    align-content: center;
    gap: 0;
    max-height: min(30vh, 236px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--final-result-accent), transparent 35%) transparent;
    --final-tied-name-size: clamp(1.4rem, 2.2vw, 2.4rem);
    --final-tied-name-size-first: clamp(1.74rem, 3vw, 3.3rem);
}

.final-result-player-list.has-tied-players.has-3-players {
    --final-tied-name-size: clamp(1.28rem, 1.9vw, 2.02rem);
    --final-tied-name-size-first: clamp(1.54rem, 2.45vw, 2.72rem);
}

.final-result-player-list.has-tied-players.has-4-players,
.final-result-player-list.has-tied-players.has-5-plus-players {
    --final-tied-name-size: clamp(1.12rem, 1.55vw, 1.74rem);
    --final-tied-name-size-first: clamp(1.34rem, 2.1vw, 2.24rem);
}

.final-result-place.is-place-1 .final-result-player-list.has-tied-players {
    max-height: min(34vh, 288px);
}

.final-result-player-list.has-tied-players .final-result-player {
    position: relative;
    display: grid;
    justify-items: center;
    width: 100%;
    padding: clamp(8px, 1.05vw, 12px) 0;
}

.final-result-player-list.has-tied-players .final-result-player:first-child {
    padding-top: 0;
}

.final-result-player-list.has-tied-players .final-result-player:last-child {
    padding-bottom: 0;
}

.final-result-player-list.has-tied-players .final-result-player + .final-result-player::before {
    content: "";
    position: absolute;
    top: 0;
    left: clamp(16px, 16%, 72px);
    right: clamp(16px, 16%, 72px);
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--final-result-accent), white 8%) 18% 82%, transparent);
    opacity: 0.9;
    pointer-events: none;
}

.is-pictionary-results .final-result-player-list.has-tied-players .final-result-player + .final-result-player::before {
    background: linear-gradient(90deg, transparent, rgba(27, 35, 38, 0.62) 18% 82%, transparent);
    opacity: 1;
}

.is-pictionary-results
    .final-result-place.is-place-1
    .final-result-player-list.has-tied-players
    .final-result-player
    + .final-result-player::before {
    background: linear-gradient(90deg, transparent, rgba(104, 66, 7, 0.62) 18% 82%, transparent);
}

.final-result-player-list.has-tied-players .final-result-player-name,
.final-result-place.is-place-1 .final-result-player-list.has-tied-players .final-result-player-name {
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: var(--final-tied-name-size);
    line-height: 1;
}

.final-result-place.is-place-1 .final-result-player-list.has-tied-players .final-result-player-name {
    font-size: var(--final-tied-name-size-first);
}

.is-pictionary-results .final-result-player-list.has-tied-players .final-result-player-name {
    background: transparent;
    border-color: transparent;
}

@media (max-width: 1120px) {
    .final-result-player-list.has-tied-players {
        --final-tied-name-size: clamp(1.34rem, 2.3vw, 2.08rem);
        --final-tied-name-size-first: clamp(1.6rem, 3.2vw, 2.96rem);
    }

    .final-result-player-list.has-tied-players.has-3-players {
        --final-tied-name-size: clamp(1.2rem, 2.1vw, 1.78rem);
        --final-tied-name-size-first: clamp(1.42rem, 2.7vw, 2.36rem);
    }

    .final-result-player-list.has-tied-players.has-4-players,
    .final-result-player-list.has-tied-players.has-5-plus-players {
        --final-tied-name-size: clamp(1.04rem, 1.72vw, 1.46rem);
        --final-tied-name-size-first: clamp(1.22rem, 2.34vw, 2.02rem);
    }

    .final-result-player-list.has-tied-players .final-result-player-name,
    .final-result-place.is-place-1 .final-result-player-list.has-tied-players .final-result-player-name {
        font-size: var(--final-tied-name-size);
    }

    .final-result-place.is-place-1 .final-result-player-list.has-tied-players .final-result-player-name {
        font-size: var(--final-tied-name-size-first);
    }
}

@media (max-width: 760px) {
    .final-result-player-list.has-tied-players {
        --final-tied-name-size: 1.36rem;
        --final-tied-name-size-first: 1.86rem;
    }

    .final-result-player-list.has-tied-players.has-3-players,
    .final-result-player-list.has-tied-players.has-4-players,
    .final-result-player-list.has-tied-players.has-5-plus-players {
        --final-tied-name-size: 1.08rem;
        --final-tied-name-size-first: 1.42rem;
    }

    .final-result-place.is-place-1 .final-result-player-list.has-tied-players {
        max-height: min(30vh, 220px);
    }

    .final-result-player-list.has-tied-players .final-result-player-name,
    .final-result-place.is-place-1 .final-result-player-list.has-tied-players .final-result-player-name {
        min-height: 0;
        padding: 0;
        font-size: var(--final-tied-name-size);
    }

    .final-result-place.is-place-1 .final-result-player-list.has-tied-players .final-result-player-name {
        font-size: var(--final-tied-name-size-first);
    }
}

@media (max-width: 520px) {
    .final-result-player-list.has-tied-players {
        --final-tied-name-size: 1.18rem;
        --final-tied-name-size-first: 1.56rem;
    }

    .final-result-player-list.has-tied-players.has-3-players,
    .final-result-player-list.has-tied-players.has-4-players,
    .final-result-player-list.has-tied-players.has-5-plus-players {
        --final-tied-name-size: 0.98rem;
        --final-tied-name-size-first: 1.18rem;
    }

    .final-result-player-list.has-tied-players .final-result-player-name,
    .final-result-place.is-place-1 .final-result-player-list.has-tied-players .final-result-player-name {
        font-size: var(--final-tied-name-size);
    }

    .final-result-place.is-place-1 .final-result-player-list.has-tied-players .final-result-player-name {
        font-size: var(--final-tied-name-size-first);
    }
}

@media (prefers-reduced-motion: reduce) {
    .final-result-place {
        opacity: 1;
        transform: translateY(var(--final-result-y)) scale(1);
        animation: none;
    }

    .final-results-shell.is-sequenced-results .final-results-podium {
        opacity: 0;
        visibility: hidden;
        animation: none;
    }

    .final-results-shell.is-sequenced-results .final-results-header {
        opacity: 0;
        visibility: hidden;
        animation: none;
    }

    .final-results-shell.is-sequenced-results .final-results-standings {
        opacity: 1;
        transform: translateY(0);
        animation: none;
        pointer-events: auto;
    }
}

.final-results-shell.is-static-results .final-result-place {
    opacity: 1;
    transform: translateY(var(--final-result-y)) scale(1);
    animation: none;
    filter: brightness(1);
}

.final-results-standings {
    position: absolute;
    left: clamp(18px, 4vw, 42px);
    right: clamp(18px, 4vw, 42px);
    top: clamp(88px, 14vh, 128px);
    bottom: clamp(22px, 4vw, 38px);
    z-index: 5;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    align-content: stretch;
    min-height: 0;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    overflow: hidden;
}

.is-pictionary-results .final-results-standings {
    top: clamp(48px, 6vh, 64px);
    gap: clamp(10px, 1.8vh, 16px);
}

.final-results-mini-podium {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-areas: "second first third";
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.08fr) minmax(0, 0.88fr);
    align-items: end;
    gap: clamp(8px, 1.2vw, 14px);
    min-height: clamp(136px, 19vh, 178px);
    padding: clamp(40px, 4.8vh, 52px) clamp(10px, 2.2vw, 32px) clamp(16px, 2.3vh, 24px);
    overflow: visible;
}

.final-results-mini-podium::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    height: clamp(56px, 8vh, 78px);
    border-radius: 50% 50% 9px 9px / 30% 30% 12px 12px;
    background:
        radial-gradient(ellipse at 50% 8%, rgba(255, 251, 228, 0.38), transparent 62%) 50% 0 / 58% 34px no-repeat,
        linear-gradient(180deg, rgba(36, 45, 48, 0.34), rgba(23, 30, 33, 0.16)) 50% 100% / 36% 92% no-repeat,
        linear-gradient(180deg, rgba(54, 65, 68, 0.28), rgba(25, 32, 35, 0.12)) 7% 100% / 31% 66% no-repeat,
        linear-gradient(180deg, rgba(99, 66, 36, 0.24), rgba(75, 41, 24, 0.1)) 93% 100% / 31% 56% no-repeat,
        linear-gradient(90deg, transparent, rgba(31, 40, 43, 0.34), transparent) 50% 13px / 100% 1px no-repeat;
    filter: drop-shadow(0 15px 24px rgba(20, 25, 27, 0.16));
    pointer-events: none;
}

.final-results-mini-podium::after {
    content: "";
    position: absolute;
    inset: 0 8%;
    z-index: 0;
    pointer-events: none;
    background: conic-gradient(
        from 205deg at 50% 100%,
        transparent 0deg,
        rgba(255, 229, 154, 0.22) 12deg,
        transparent 24deg,
        transparent 68deg,
        rgba(31, 40, 43, 0.09) 82deg,
        transparent 96deg,
        transparent 264deg,
        rgba(31, 40, 43, 0.08) 278deg,
        transparent 294deg,
        transparent 360deg
    );
    mask-image: radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.88) 0 38%, transparent 76%);
    opacity: 0.72;
}

.final-results-mini-place {
    --player-result-accent: rgba(122, 136, 142, 0.88);
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: center;
    gap: 5px;
    min-height: 94px;
    padding: 25px 12px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--player-result-accent), transparent 42%);
    background:
        radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.52), transparent 42%),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--player-result-accent), white 42%),
            color-mix(in srgb, var(--player-result-accent), transparent 48%)
        ),
        rgba(255, 255, 255, 0.66);
    color: #1d2629;
    text-align: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 12px 24px rgba(20, 25, 27, 0.12),
        0 0 22px color-mix(in srgb, var(--player-result-accent), transparent 74%);
}

.final-results-mini-place.is-place-1 {
    --player-result-accent: rgba(255, 214, 113, 0.94);
    grid-area: first;
    min-height: clamp(118px, 14vh, 138px);
    transform: translateY(-8px);
}

.final-results-mini-place.is-place-2 {
    --player-result-accent: rgba(202, 220, 232, 0.9);
    grid-area: second;
    min-height: clamp(96px, 11.5vh, 112px);
    transform: translateY(9px);
}

.final-results-mini-place.is-place-3 {
    --player-result-accent: rgba(231, 160, 98, 0.86);
    grid-area: third;
    min-height: clamp(88px, 10.4vh, 104px);
    transform: translateY(16px);
}

.final-results-mini-rank {
    position: absolute;
    left: 50%;
    top: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--player-result-accent), white 58%);
    background:
        radial-gradient(
            circle at 34% 24%,
            rgba(255, 255, 255, 0.96) 0 14%,
            color-mix(in srgb, var(--player-result-accent), white 32%) 38%,
            color-mix(in srgb, var(--player-result-accent), black 8%) 72%,
            color-mix(in srgb, var(--player-result-accent), black 38%) 100%
        ),
        var(--player-result-accent);
    color: #201a10;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -4px 8px rgba(40, 24, 8, 0.16),
        0 8px 18px rgba(29, 36, 38, 0.16),
        0 0 20px color-mix(in srgb, var(--player-result-accent), transparent 58%);
    font-size: 0.78rem;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
    transform: translate(-50%, -46%);
}

.final-results-mini-place.is-place-1 .final-results-mini-rank {
    width: 50px;
    height: 50px;
    border-width: 2px;
    font-size: 0.88rem;
}

.final-results-mini-value {
    color: color-mix(in srgb, var(--player-result-accent), #1d2629 42%);
    font-size: clamp(0.82rem, 1.04vw, 0.98rem);
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}

.final-results-mini-value {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    max-width: 100%;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.46);
    border: 1px solid color-mix(in srgb, var(--player-result-accent), transparent 54%);
}

.final-results-mini-names {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: #1d2629;
    font-size: clamp(1rem, 1.36vw, 1.28rem);
    font-weight: 950;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.final-results-mini-extra {
    color: color-mix(in srgb, currentColor, transparent 28%);
    font-size: 0.86em;
}

.final-results-standings .player-results-list {
    width: min(100%, 744px);
    height: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(clamp(66px, 7.4vh, 70px), auto);
    align-content: start;
    justify-self: center;
    justify-content: center;
    gap: clamp(8px, 1vh, 10px);
    overflow: auto;
}

.final-results-standings .player-results-list.is-fitted {
    grid-template-rows: repeat(var(--player-results-row-count, 1), minmax(0, 1fr));
    grid-auto-rows: unset;
    overflow: hidden;
}

.final-results-standings .player-result-row {
    position: relative;
    min-height: clamp(66px, 7.4vh, 70px);
    padding: 18px 16px 16px;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-items: center;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--player-result-accent), transparent 80%), transparent 60%), rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.final-results-standings .player-results-list.is-fitted .player-result-row {
    min-height: 0;
}

.is-pictionary-results .final-results-standings .player-result-row {
    --player-result-bg: rgba(255, 255, 255, 0.5);
    --player-result-border: rgba(31, 39, 42, 0.12);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--player-result-accent), transparent 78%), transparent 60%), rgba(255, 255, 255, 0.5);
}

.is-pictionary-results .final-results-standings .player-result-row.is-placed,
.is-pictionary-results .final-results-standings .player-result-row.is-unplaced {
    --player-result-accent: rgba(52, 68, 73, 0.78);
}

.is-pictionary-results .final-results-standings .player-result-place,
.is-pictionary-results .final-results-standings .player-result-value {
    color: color-mix(in srgb, var(--player-result-accent), #1d2629 58%);
}

.final-results-standings .player-result-name {
    width: 100%;
    padding: 0 28px;
    font-size: clamp(1.1rem, 1.65vw, 1.5rem);
    text-align: center;
}

.final-results-standings .player-result-place,
.final-results-standings .player-result-value {
    position: absolute;
    font-size: clamp(0.86rem, 1.1vw, 1.02rem);
}

.final-results-standings .player-result-place {
    left: 10px;
    top: 8px;
}

.final-results-standings .player-result-value {
    right: 10px;
    bottom: 8px;
}

.final-results-shell.is-sequenced-results .final-results-header {
    animation: final-results-header-fade-out 3920ms cubic-bezier(0.16, 1, 0.3, 1) var(--final-results-full-list-delay, 0ms) forwards;
}

.final-results-shell.is-sequenced-results .final-results-podium {
    animation: final-results-podium-fade-out 3920ms cubic-bezier(0.16, 1, 0.3, 1) var(--final-results-full-list-delay, 0ms) forwards;
}

.final-results-shell.is-sequenced-results .final-results-standings {
    animation: final-results-standings-fade-in 3920ms cubic-bezier(0.16, 1, 0.3, 1) var(--final-results-full-list-delay, 0ms) forwards;
}

.final-results-shell.is-static-results .final-results-podium:not(.is-empty) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.final-results-shell.is-static-results .final-results-header {
    opacity: 0;
    visibility: hidden;
}

.final-results-shell.is-static-results .final-results-standings {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@keyframes final-results-podium-fade-out {
    to {
        opacity: 0;
        transform: translateY(-14px) scale(0.985);
        filter: blur(3px) brightness(0.92);
        pointer-events: none;
    }
}

@keyframes final-results-header-fade-out {
    to {
        opacity: 0;
        transform: translateY(-10px);
        visibility: hidden;
    }
}

@keyframes final-results-standings-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.final-results-actions {
    z-index: 8;
    align-items: center;
    gap: 10px;
}

.final-results-player-list-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 48px;
    min-height: 48px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 220, 132, 0.46);
    background: linear-gradient(180deg, rgba(255, 238, 184, 0.12), transparent 48%), rgba(10, 14, 17, 0.76);
    color: #fff5d0;
    font-size: 0.88rem;
    font-weight: 950;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 10px 24px rgba(0, 0, 0, 0.24);
    cursor: pointer;
}

.final-results-player-list-button:hover,
.final-results-player-list-button:focus-visible {
    border-color: rgba(255, 231, 157, 0.74);
    background: linear-gradient(180deg, rgba(255, 238, 184, 0.18), transparent 48%), rgba(18, 23, 26, 0.84);
}

.is-pictionary-results .final-results-player-list-button {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 52%), rgba(24, 34, 37, 0.9);
    border-color: rgba(31, 39, 42, 0.5);
    color: #f5f1e6;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 10px 22px rgba(30, 36, 38, 0.2);
}

.final-results-player-list-icon {
    width: 20px;
    height: 20px;
}

.final-results-player-list-modal {
    --player-result-accent: rgba(226, 210, 161, 0.78);
    position: fixed;
    inset: clamp(10px, 2vw, 24px);
    z-index: 41;
    pointer-events: auto;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 16px;
    padding: clamp(18px, 3vw, 30px);
    border-radius: 8px;
    border: 1px solid rgba(255, 220, 132, 0.24);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 211, 117, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(6, 18, 26, 0.98), rgba(20, 24, 31, 0.98) 58%, rgba(37, 28, 16, 0.98)), #111b22;
    color: #f9f4df;
    box-shadow: 0 34px 96px rgba(0, 0, 0, 0.42);
    overflow: hidden;
}

.final-results-player-list-modal.is-pictionary-results {
    border-color: rgba(31, 39, 42, 0.24);
    background:
        radial-gradient(circle at 48% 0%, rgba(255, 243, 199, 0.42), transparent 34%),
        linear-gradient(135deg, rgba(242, 240, 231, 0.99), rgba(207, 213, 210, 0.98) 62%, rgba(151, 161, 160, 0.97)), #d7d9d4;
    color: #1d2629;
    box-shadow: 0 34px 96px rgba(20, 25, 27, 0.34);
}

.final-results-player-list-head {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.final-results-player-list-head p,
.final-results-player-list-head h2 {
    margin: 0;
}

.final-results-player-list-head p {
    color: color-mix(in srgb, currentColor, transparent 34%);
    font-size: 0.82rem;
    font-weight: 950;
    text-transform: uppercase;
}

.final-results-player-list-head h2 {
    font-size: clamp(2rem, 5vw, 4.3rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.final-results-player-list-close {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    color: currentColor;
    cursor: pointer;
}

.final-results-player-list-close:hover,
.final-results-player-list-close:focus-visible {
    background: rgba(255, 255, 255, 0.12);
}

.final-results-player-list-close-icon {
    width: 20px;
    height: 20px;
}

.final-results-player-list-modal .player-results-list {
    padding-right: 4px;
}

.final-results-player-list-modal .player-result-row {
    min-height: 58px;
    padding: 11px 14px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--player-result-accent), transparent 82%), transparent 58%), rgba(255, 255, 255, 0.06);
}

.final-results-player-list-modal.is-pictionary-results .player-result-row {
    --player-result-bg: rgba(255, 255, 255, 0.46);
    --player-result-border: rgba(31, 39, 42, 0.12);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--player-result-accent), transparent 80%), transparent 58%), rgba(255, 255, 255, 0.46);
}

.final-results-player-list-modal.is-pictionary-results .player-result-row.is-unplaced {
    opacity: 0.72;
}

.final-results-player-list-modal.is-pictionary-results .player-result-place,
.final-results-player-list-modal.is-pictionary-results .player-result-value {
    color: color-mix(in srgb, var(--player-result-accent), #1d2629 38%);
}

.final-results-shell.is-vault-results {
    --final-results-stage-grid: rgba(184, 119, 255, 0.078);
    --final-results-stage-wash: rgba(139, 74, 204, 0.28);
    --final-results-stage-rim: rgba(222, 175, 255, 0.42);
    --final-results-stage-face: rgba(65, 31, 92, 0.38);
    --final-results-stage-spark: rgba(255, 222, 126, 0.82);
    --final-results-title: #fff7fe;
    --final-results-title-shadow: rgba(184, 119, 255, 0.36);
    border-color: rgba(184, 119, 255, 0.34);
    background:
        linear-gradient(180deg, rgba(255, 222, 126, 0.07), transparent 20%),
        repeating-linear-gradient(90deg, rgba(184, 119, 255, 0.055) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 42px),
        radial-gradient(ellipse at 50% 16%, rgba(139, 74, 204, 0.28), transparent 42%),
        radial-gradient(ellipse at 50% 100%, rgba(32, 14, 52, 0.84), transparent 55%),
        linear-gradient(135deg, rgba(13, 8, 22, 0.99), rgba(30, 18, 45, 0.99) 52%, rgba(54, 27, 76, 0.98)), #12091d;
}

.final-results-shell.is-vault-results::after {
    opacity: 0.76;
    background:
        conic-gradient(
            from 214deg at 50% 21%,
            transparent 0deg,
            rgba(222, 175, 255, 0.2) 5deg,
            transparent 11deg,
            transparent 28deg,
            rgba(255, 222, 126, 0.16) 34deg,
            transparent 42deg,
            transparent 318deg,
            rgba(184, 119, 255, 0.18) 326deg,
            transparent 334deg,
            transparent 360deg
        ),
        radial-gradient(circle at 37% 27%, var(--final-results-stage-spark) 0 1px, transparent 2px),
        radial-gradient(circle at 63% 31%, rgba(145, 247, 221, 0.72) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 20%, rgba(255, 255, 255, 0.62) 0 1px, transparent 2px),
        linear-gradient(180deg, rgba(184, 119, 255, 0.12), transparent 45%);
}

.is-vault-results .final-results-kicker,
.is-vault-results .final-results-waiting {
    color: #e8c7ff;
}

.is-vault-results .final-results-continue-button,
.is-vault-results .final-results-player-list-button {
    border-color: rgba(222, 175, 255, 0.5);
    background: linear-gradient(180deg, rgba(255, 238, 184, 0.13), transparent 50%), rgba(31, 17, 48, 0.92);
    color: #fff2bd;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 0 1px rgba(184, 119, 255, 0.18),
        0 12px 26px rgba(0, 0, 0, 0.3),
        0 0 24px rgba(184, 119, 255, 0.14);
}

.is-vault-results .final-result-place {
    border-color: rgba(145, 247, 221, 0.34);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(145, 247, 221, 0.18), transparent 58%),
        linear-gradient(180deg, rgba(255, 245, 190, 0.08), transparent 32%),
        repeating-linear-gradient(90deg, rgba(145, 247, 221, 0.045) 0 1px, transparent 1px 16px),
        linear-gradient(180deg, rgba(16, 82, 58, 0.93), rgba(8, 20, 22, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 0 0 1px rgba(145, 247, 221, 0.08),
        0 24px 48px rgba(0, 0, 0, 0.28),
        0 0 36px rgba(145, 247, 221, 0.16);
}

.is-vault-results .final-result-place.is-place-1 {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 0 0 1px rgba(255, 239, 184, 0.08),
        0 30px 70px rgba(0, 0, 0, 0.35),
        0 0 54px rgba(145, 247, 221, 0.2),
        0 0 36px rgba(255, 210, 100, 0.16);
}

.is-vault-results .final-result-rank,
.is-vault-results .final-result-metric span {
    color: #a8ffe4;
}

.is-vault-results .final-result-metric {
    border-color: rgba(255, 222, 126, 0.24);
    background: rgba(5, 25, 22, 0.72);
}

.is-vault-results .final-result-metric strong,
.is-vault-results .final-results-mini-value {
    color: #ffe08a;
    text-shadow: 0 0 22px rgba(255, 215, 111, 0.24);
}

.is-vault-results .final-results-mini-podium {
    border-color: rgba(145, 247, 221, 0.26);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(145, 247, 221, 0.16), transparent 62%),
        linear-gradient(90deg, rgba(145, 247, 221, 0.1), transparent 58%), rgba(7, 24, 25, 0.84);
}

.is-vault-results .final-results-mini-podium::before {
    background:
        radial-gradient(ellipse at 50% 8%, rgba(255, 246, 196, 0.3), transparent 62%) 50% 0 / 58% 34px no-repeat,
        linear-gradient(180deg, rgba(25, 96, 71, 0.5), rgba(7, 30, 29, 0.22)) 50% 100% / 36% 92% no-repeat,
        linear-gradient(180deg, rgba(37, 112, 84, 0.38), rgba(8, 32, 30, 0.18)) 7% 100% / 31% 66% no-repeat,
        linear-gradient(180deg, rgba(37, 112, 84, 0.32), rgba(8, 32, 30, 0.16)) 93% 100% / 31% 56% no-repeat,
        linear-gradient(90deg, transparent, rgba(145, 247, 221, 0.28), transparent) 50% 13px / 100% 1px no-repeat;
}

.is-vault-results .final-results-mini-place {
    border-color: rgba(145, 247, 221, 0.24);
    background:
        linear-gradient(180deg, rgba(255, 245, 190, 0.07), transparent 38%),
        repeating-linear-gradient(90deg, rgba(145, 247, 221, 0.035) 0 1px, transparent 1px 14px),
        linear-gradient(180deg, rgba(16, 82, 58, 0.92), rgba(8, 20, 22, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 24px rgba(0, 0, 0, 0.22),
        0 0 22px rgba(145, 247, 221, 0.12);
}

.is-vault-results .final-results-mini-rank,
.is-vault-results .final-results-mini-names {
    color: #f7fff3;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.32);
}

.is-vault-results .final-results-mini-extra {
    border-color: rgba(255, 222, 126, 0.34);
    background: rgba(255, 222, 126, 0.16);
    color: #ffe08a;
}

.is-vault-results .final-results-standings .player-result-row,
.final-results-player-list-modal.is-vault-results .player-result-row {
    --player-result-bg: rgba(31, 17, 48, 0.78);
    --player-result-border: rgba(222, 175, 255, 0.16);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--player-result-accent), transparent 76%), transparent 62%), rgba(31, 17, 48, 0.78);
}

.is-vault-results .final-results-standings .player-result-place,
.is-vault-results .final-results-standings .player-result-value,
.final-results-player-list-modal.is-vault-results .player-result-place,
.final-results-player-list-modal.is-vault-results .player-result-value {
    color: #ffe08a;
}

@media (max-width: 760px) {
    .final-results-actions {
        gap: 8px;
    }

    .final-results-standings {
        left: 12px;
        right: 12px;
        top: 82px;
        bottom: 14px;
        gap: 8px;
    }

    .is-pictionary-results .final-results-standings {
        top: 54px;
    }

    .final-results-mini-podium {
        grid-template-areas: "second first third";
        grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr) minmax(0, 0.86fr);
        gap: 5px;
        min-height: 114px;
        padding: 32px 0 11px;
    }

    .final-results-mini-place {
        min-height: 68px;
        padding: 18px 5px 8px;
        gap: 4px;
        border-radius: 8px;
    }

    .final-results-mini-place.is-place-1 {
        min-height: 84px;
        transform: translateY(-5px);
    }

    .final-results-mini-place.is-place-2 {
        min-height: 70px;
        transform: translateY(6px);
    }

    .final-results-mini-place.is-place-3 {
        min-height: 64px;
        transform: translateY(10px);
    }

    .final-results-mini-rank {
        width: 32px;
        height: 32px;
        font-size: 0.62rem;
    }

    .final-results-mini-place.is-place-1 .final-results-mini-rank {
        width: 38px;
        height: 38px;
        font-size: 0.68rem;
    }

    .final-results-mini-value {
        min-height: 19px;
        padding: 0 5px;
        font-size: 0.68rem;
    }

    .final-results-mini-names {
        font-size: 0.82rem;
    }

    .final-results-standings .player-results-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(46px, auto);
        gap: 7px;
    }

    .final-results-standings .player-result-row {
        min-height: 46px;
        padding: 18px 8px 16px;
        grid-template-columns: minmax(0, 1fr);
    }

    .final-results-standings .player-result-value {
        right: 8px;
        bottom: 6px;
        justify-self: auto;
    }

    .final-results-standings .player-result-place {
        left: 8px;
        top: 6px;
    }

    .final-results-player-list-button {
        min-width: 42px;
        min-height: 42px;
        padding: 0 10px;
    }

    .final-results-player-list-icon {
        width: 18px;
        height: 18px;
    }

    .final-results-player-list-modal {
        inset: 0;
        border-radius: 0;
        padding: 18px 14px 16px;
    }

    .final-results-player-list-head h2 {
        font-size: 2.25rem;
    }

    .player-result-row,
    .final-results-player-list-modal .player-result-row {
        grid-template-columns: minmax(58px, auto) minmax(0, 1fr) minmax(68px, auto);
        gap: 9px;
        min-height: 48px;
        padding: 8px 10px;
    }

    .player-result-place,
    .player-result-value {
        font-size: 0.78rem;
    }
}

.room-code-card {
    padding: 18px 22px;
    flex-wrap: wrap;
}

.room-code-stack {
    display: grid;
    gap: 6px;
}

.room-code-display {
    font-size: clamp(2.8rem, 10vw, 5rem);
    font-weight: 900;
    letter-spacing: 0.18em;
    color: var(--gold);
    text-shadow: 0 0 24px rgba(255, 214, 127, 0.18);
}

.room-code-display[data-room-code-length="5"],
.room-code-display[data-room-code-length="6"] {
    font-size: clamp(2.1rem, 7vw, 3.7rem);
}

.room-code-display[data-room-code-length="7"],
.room-code-display[data-room-code-length="8"] {
    font-size: clamp(1.8rem, 5.4vw, 3rem);
}

.room-code-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.host-lobby-shell,
.player-lobby-grid,
.controller-lobby-grid {
    display: grid;
    gap: 18px;
    align-items: stretch;
}

.host-lobby-shell {
    position: relative;
    /* Browser zoom and classroom whiteboards can shrink the CSS viewport; cap the floor so the host screen fits. */
    min-height: clamp(min(700px, calc(100vh - 114px)), calc(100vh - 130px), 980px);
    min-height: clamp(min(700px, calc(100svh - 114px)), calc(100svh - 130px), 980px);
}

.player-lobby-grid {
    min-height: clamp(min(700px, calc(100vh - 114px)), calc(100vh - 146px), 980px);
    min-height: clamp(min(700px, calc(100svh - 114px)), calc(100svh - 146px), 980px);
}

.host-lobby-overlays {
    --host-lobby-side-rail-width: clamp(
        var(--ziar-host-lobby-side-rail-min-width, 670px),
        var(--ziar-host-lobby-side-rail-width, 46vw),
        min(var(--ziar-host-lobby-side-rail-max-width, 904px), var(--ziar-host-lobby-side-rail-max-share, 48%))
    );
    position: absolute;
    inset: 18px;
    z-index: 12;
    display: grid;
    grid-template-columns:
        minmax(320px, 1fr)
        minmax(min(500px, var(--host-lobby-side-rail-width)), var(--host-lobby-side-rail-width));
    align-items: stretch;
    min-height: 0;
    gap: 18px;
    pointer-events: none;
}

.host-lobby-side-rail {
    min-width: 0;
    display: grid;
    grid-template-columns:
        minmax(250px, 1fr)
        minmax(320px, clamp(340px, 23vw, var(--ziar-host-lobby-qr-card-max-width, 406px)));
    align-items: start;
    align-content: start;
    gap: 16px;
    pointer-events: auto;
}

@media (min-width: 1241px) {
    .host-lobby-side-rail,
    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-lobby-side-rail {
        height: 100%;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
        align-content: stretch;
    }

    .host-lobby-side-rail > .host-qr-card {
        align-self: start;
    }

    .host-lobby-side-rail > .host-presence-card {
        height: auto;
        max-height: 100%;
        align-self: start;
    }
}

.room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-lobby-overlays {
    grid-template-columns: minmax(0, 1fr) var(--host-lobby-side-rail-width);
}

.room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-lobby-side-rail {
    grid-template-columns:
        minmax(250px, 1fr)
        minmax(320px, clamp(340px, 23vw, var(--ziar-host-lobby-qr-card-max-width, 406px)));
}

.room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-mode-card {
    width: 100%;
}

.room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-mode-config-view {
    font-size: clamp(0.86rem, 0.92vw, 1rem);
}

.player-lobby-grid {
    grid-template-columns: minmax(0, 1fr);
}

.player-lobby-grid > * {
    min-height: 0;
}

.controller-lobby-grid {
    grid-template-columns: minmax(0, 1fr);
}

.controller-ready-card {
    min-height: calc(100vh - 180px);
    min-height: calc(100svh - 180px);
    align-content: center;
    justify-items: center;
    text-align: center;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 229, 167, 0.16), transparent 30%),
        linear-gradient(180deg, rgba(58, 49, 36, 0.92), rgba(23, 19, 15, 0.98)), rgba(27, 23, 18, 0.98);
    border-color: rgba(232, 177, 83, 0.28);
}

#app.theme-pictionary .controller-ready-card {
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 250, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(45, 58, 64, 0.92), rgba(17, 25, 31, 0.98)), rgba(18, 27, 33, 0.98);
    border-color: rgba(243, 240, 229, 0.24);
}

.controller-ready-copy {
    display: grid;
    gap: 10px;
    max-width: 32rem;
}

.controller-ready-title,
.controller-ready-status {
    margin: 0;
}

.controller-ready-title {
    color: #fff8ec;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 0.96;
}

#app.theme-pictionary .controller-ready-title {
    color: #fffdf3;
}

.controller-ready-status {
    color: #f1e6d1;
    font-size: 1.02rem;
    line-height: 1.55;
}

#app.theme-pictionary .controller-ready-status {
    color: #dce3df;
}

.controller-room-switch,
.pictionary-controller-room-switch {
    display: inline-grid;
    grid-template-columns: minmax(62px, 1fr) auto;
    align-items: center;
    gap: 6px;
    width: min(230px, 100%);
}

.controller-ready-copy .controller-room-switch {
    justify-self: center;
}

.controller-room-code-input,
.pictionary-controller-room-code-input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid rgba(243, 240, 229, 0.18);
    background: rgba(14, 22, 28, 0.72);
    color: #fffdf3;
    font-size: 1.22rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

.controller-room-code-input:focus,
.pictionary-controller-room-code-input:focus {
    border-color: rgba(213, 179, 93, 0.54);
    box-shadow: 0 0 0 3px rgba(213, 179, 93, 0.15);
    outline: 0;
}

.controller-room-switch-button,
.pictionary-controller-room-switch-button {
    min-width: 42px;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0;
}

.host-card-head,
.waiting-card-head,
.host-setup-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.host-mode-card,
.host-waiting-card,
.host-qr-card {
    position: relative;
    display: grid;
    gap: 18px;
}

.host-mode-card {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    max-height: min(72vh, 820px);
    max-height: min(72svh, 820px);
    min-height: 0;
    min-width: 0;
    height: auto;
    align-self: start;
    pointer-events: auto;
    border-color: var(--lobby-panel-outline);
    overflow: hidden;
    transition:
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.host-mode-card.is-config-open {
    height: 100%;
    max-height: 100%;
    align-self: stretch;
    grid-template-rows: minmax(0, 1fr);
}

.host-mode-card.is-selection-open {
    align-self: start;
}

.host-mode-card.is-awaiting-selection {
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 221, 146, 0.12), transparent 24%),
        radial-gradient(circle at 84% 14%, rgba(255, 240, 200, 0.08), transparent 22%),
        linear-gradient(180deg, rgba(24, 64, 93, 0.54), rgba(7, 22, 35, 0.78)), rgba(9, 24, 37, 0.72);
    border-color: rgba(201, 154, 86, 0.36);
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 236, 193, 0.08),
        0 0 44px rgba(243, 184, 74, 0.12);
}

.host-mode-card.is-selected,
.host-mode-card.is-relic-selected {
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 221, 146, 0.18), transparent 24%),
        radial-gradient(circle at 84% 14%, rgba(255, 240, 200, 0.12), transparent 22%),
        linear-gradient(180deg, rgba(102, 69, 35, 0.68), rgba(32, 21, 12, 0.84)), rgba(29, 22, 15, 0.78);
    border-color: rgba(201, 154, 86, 0.52);
}

.host-mode-card.is-pictionary-selected {
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 250, 0.18), transparent 24%),
        radial-gradient(circle at 82% 14%, rgba(220, 229, 229, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(65, 77, 81, 0.7), rgba(22, 30, 35, 0.88)), rgba(22, 30, 35, 0.82);
    border-color: rgba(243, 240, 229, 0.42);
}

.host-mode-card::before {
    content: "";
    position: absolute;
    inset: auto -14% -36% auto;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 210, 118, 0.16), rgba(255, 210, 118, 0));
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease;
}

.host-mode-card.is-selected::before,
.host-mode-card.is-relic-selected::before {
    opacity: 1;
}

.host-mode-card.is-awaiting-selection::before {
    opacity: 0.56;
}

.host-mode-card.is-pictionary-selected::before {
    opacity: 1;
    background: radial-gradient(circle, rgba(245, 247, 240, 0.16), rgba(245, 247, 240, 0));
}

.room-shell.is-host-lobby .lobby-playground-mode {
    color: var(--lobby-mode-label-color);
}

.host-mode-card {
    background:
        radial-gradient(circle at 18% 18%, var(--lobby-panel-glow), transparent 24%),
        radial-gradient(circle at 84% 14%, rgba(255, 255, 255, 0.05), transparent 22%),
        linear-gradient(180deg, var(--lobby-panel-top), var(--lobby-panel-bottom)), rgba(5, 17, 28, 0.96);
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 245, 224, 0.06),
        0 0 42px var(--lobby-panel-shadow);
}

.host-mode-card::before {
    background: radial-gradient(circle, var(--lobby-panel-orb), rgba(255, 255, 255, 0) 72%);
    opacity: 0.92;
}

.host-mode-card.is-selection-open,
.host-mode-card.is-awaiting-selection {
    background:
        radial-gradient(circle at 18% 18%, rgba(111, 206, 219, 0.12), transparent 24%),
        radial-gradient(circle at 84% 14%, rgba(255, 255, 255, 0.05), transparent 22%),
        linear-gradient(180deg, rgba(16, 49, 68, 0.95), rgba(5, 17, 28, 0.96)), rgba(5, 17, 28, 0.96);
}

.host-mode-card.is-selection-open,
.host-mode-card.is-awaiting-selection,
.host-mode-card.is-selected,
.host-mode-card.is-relic-selected,
.host-mode-card.is-pictionary-selected,
.host-mode-card.is-vault-selected {
    border-width: var(--active-panel-outline-width);
    border-color: var(--lobby-panel-outline);
}

.host-mode-card.is-selection-open::before,
.host-mode-card.is-awaiting-selection::before {
    background: radial-gradient(circle, rgba(121, 222, 232, 0.16), rgba(121, 222, 232, 0) 72%);
    opacity: 0.72;
}

.host-mode-selection-view,
.host-mode-config-view {
    display: grid;
    gap: 14px;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

.host-mode-selection-view {
    overflow: auto;
    overscroll-behavior: contain;
}

.host-mode-card.is-selection-open {
    grid-template-rows: minmax(0, 1fr);
}

.host-mode-config-view {
    overflow: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.host-mode-card.is-config-open .host-mode-config-view {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
}

.host-mode-config-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.host-mode-config-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.host-mode-config-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.host-mode-summary-pill {
    min-height: 42px;
    padding-inline: 14px;
    white-space: nowrap;
}

.host-mode-card.is-pictionary-selected .host-mode-summary-pill {
    max-width: min(100%, 360px);
    line-height: 1.25;
    white-space: normal;
}

.host-mode-return-button {
    width: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
}

.host-mode-return-glyph {
    width: 20px;
    height: 20px;
}

.host-mode-focus-pill {
    min-height: 46px;
    max-width: 100%;
    padding: 0 18px 0 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 233, 187, 0.26);
    background: rgba(14, 10, 7, 0.44);
    color: #fff2d2;
    font-weight: 800;
}

.host-mode-focus-icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 228, 156, 0.12);
    color: #ffe39b;
}

.host-mode-focus-glyph {
    width: 18px;
    height: 18px;
}

.host-mode-focus-label {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.host-mode-card.is-pictionary-selected .host-mode-focus-pill {
    border-color: rgba(243, 240, 229, 0.26);
    background: rgba(20, 28, 33, 0.58);
    color: #fffdf3;
}

.host-mode-card.is-pictionary-selected .host-mode-focus-icon {
    background: rgba(255, 255, 250, 0.12);
    color: #f7f4ea;
}

.host-mode-toggle-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.host-start-button {
    position: static;
    z-index: auto;
    min-height: 50px;
    padding: 0 22px;
    max-width: 220px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    white-space: normal;
}

.host-start-button.is-starting,
.host-start-button.is-starting:disabled {
    cursor: wait;
    border-color: rgba(149, 255, 246, 0.36);
    background: linear-gradient(180deg, rgba(24, 71, 81, 0.96), rgba(12, 35, 44, 0.98)), rgba(8, 27, 35, 0.96);
    color: #eafffb;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        0 0 0 1px rgba(149, 255, 246, 0.08),
        0 12px 22px rgba(0, 0, 0, 0.2);
}

.host-start-spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-width: 2px;
}

.host-start-loading-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3vh, 28px);
    padding: clamp(20px, 4vh, 48px) clamp(16px, 5vw, 72px);
    overflow: hidden;
    cursor: wait;
    background:
        radial-gradient(circle at 50% 44%, rgba(239, 192, 111, 0.18), transparent 50%),
        rgba(3, 12, 18, 0.92);
    backdrop-filter: blur(14px) saturate(0.78);
    animation: host-start-loading-reveal var(--ziar-host-start-loading-reveal-ms, 500ms) ease-in-out both;
}

@keyframes host-start-loading-reveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

html:has(.host-start-loading-overlay.is-visible) {
    scrollbar-gutter: auto;
}

html:has(.host-start-loading-overlay.is-visible),
body:has(.host-start-loading-overlay.is-visible) {
    overflow: hidden;
}

.host-start-loading-overlay[hidden] {
    display: none;
}

.host-start-loading-photo-shell {
    overflow: hidden;
    flex: 0 1 auto;
    padding: clamp(7px, 0.8vw, 11px);
    border: 1px solid rgba(255, 241, 207, 0.42);
    border-radius: clamp(24px, 3vw, 38px);
    background: rgba(255, 246, 220, 0.12);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.46),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 64px rgba(233, 174, 82, 0.12);
    animation: fade-up 240ms ease-out both;
}

.host-start-loading-photo {
    display: block;
    width: min(74vw, 900px);
    max-width: 100%;
    max-height: calc(100vh - 210px);
    max-height: calc(100svh - 210px);
    height: auto;
    border-radius: clamp(18px, 2.4vw, 29px);
    object-fit: contain;
}

.host-start-loading-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2vw, 22px);
    min-width: min(72vw, 560px);
    min-height: clamp(76px, 9vh, 94px);
    padding: 14px clamp(22px, 3vw, 36px);
    border: 1px solid rgba(149, 255, 246, 0.34);
    border-radius: 999px;
    background: rgba(7, 25, 32, 0.94);
    color: #f4fffd;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 18px 42px rgba(0, 0, 0, 0.36),
        0 0 34px rgba(98, 235, 220, 0.1);
    animation: fade-up 260ms 70ms ease-out both;
}

.host-start-loading-status strong {
    font-size: clamp(1.45rem, 3vw, 2.55rem);
    font-weight: 900;
    letter-spacing: 0.025em;
    line-height: 1;
}

.host-start-loading-spinner {
    width: clamp(46px, 5vw, 62px);
    height: clamp(46px, 5vw, 62px);
    flex: 0 0 auto;
    border-width: clamp(4px, 0.45vw, 6px);
    border-color: rgba(149, 255, 246, 0.18);
    border-top-color: #95fff6;
}

@media (max-width: 600px) {
    .host-start-loading-overlay {
        gap: 18px;
        padding-inline: 14px;
    }

    .host-start-loading-photo {
        width: 88vw;
        max-height: calc(100vh - 180px);
        max-height: calc(100svh - 180px);
    }

    .host-start-loading-status {
        width: min(88vw, 560px);
        min-width: 0;
        min-height: 70px;
        padding: 12px 20px;
    }

    .host-start-loading-status strong {
        font-size: clamp(1.35rem, 7vw, 1.9rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .host-start-loading-overlay,
    .host-start-loading-photo-shell,
    .host-start-loading-status {
        animation: none;
    }
}

.host-mode-button-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: 14px;
}

@media (min-width: 641px) and (max-width: 1180px) {
    .host-mode-button-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .host-mode-button-grid > :nth-child(3):last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 7px);
    }
}

.relic-mode-button,
.pictionary-mode-button,
.vault-mode-button {
    position: relative;
    isolation: isolate;
    min-height: clamp(148px, 17vh, 176px);
    min-width: 0;
    width: 100%;
    padding: clamp(20px, 1.8vw, 26px);
    padding-right: clamp(24px, 2.2vw, 34px);
    border-radius: 22px;
    border: 1px solid rgba(150, 255, 247, 0.26);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    justify-items: start;
    gap: clamp(20px, 3vh, 28px);
    text-align: left;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 16px 34px rgba(0, 0, 0, 0.24);
}

.relic-mode-button::before,
.pictionary-mode-button::before,
.vault-mode-button::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 22px 0 0 22px;
    opacity: 0.88;
}

.relic-mode-button::after,
.pictionary-mode-button::after,
.vault-mode-button::after {
    content: "";
    position: absolute;
    right: clamp(20px, 1.8vw, 26px);
    bottom: clamp(21px, 2vw, 28px);
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.46;
    transform: rotate(-45deg);
    transition:
        opacity 150ms ease,
        transform 150ms ease;
}

.relic-mode-button {
    border-color: rgba(214, 170, 103, 0.28);
    background:
        radial-gradient(circle at 92% 8%, rgba(255, 223, 155, 0.16), transparent 34%),
        linear-gradient(145deg, rgba(76, 53, 31, 0.94), rgba(22, 14, 8, 0.99));
    color: #fdf3de;
}

.relic-mode-button::before {
    background: linear-gradient(180deg, #f5cf82, rgba(245, 207, 130, 0.1));
}

.pictionary-mode-button {
    border-color: rgba(243, 240, 229, 0.2);
    background:
        radial-gradient(circle at 92% 8%, rgba(247, 220, 144, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(48, 60, 64, 0.96), rgba(15, 22, 27, 0.99));
    color: #fffdf3;
}

.pictionary-mode-button::before {
    background: linear-gradient(180deg, #f5dda0, rgba(245, 221, 160, 0.08));
}

.relic-mode-button.selected {
    border-color: rgba(255, 240, 183, 0.88);
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 240, 191, 0.34), transparent 26%),
        linear-gradient(180deg, rgba(154, 101, 38, 0.78), rgba(88, 54, 23, 0.74) 42%, rgba(34, 22, 12, 0.98));
    color: #fff5de;
    box-shadow:
        inset 0 0 0 1px rgba(255, 243, 204, 0.12),
        0 0 0 1px rgba(255, 239, 178, 0.18),
        0 26px 46px rgba(0, 0, 0, 0.3),
        0 0 42px rgba(246, 189, 62, 0.18);
}

.pictionary-mode-button.selected {
    border-color: rgba(255, 255, 250, 0.88);
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 250, 0.34), transparent 26%),
        radial-gradient(circle at 82% 14%, rgba(225, 232, 232, 0.2), transparent 24%),
        linear-gradient(180deg, rgba(104, 119, 122, 0.82), rgba(52, 66, 72, 0.82) 42%, rgba(18, 27, 33, 0.98));
    color: #fffdf8;
    box-shadow:
        inset 0 0 0 1px rgba(255, 250, 235, 0.12),
        0 0 0 1px rgba(255, 255, 250, 0.18),
        0 26px 46px rgba(0, 0, 0, 0.3),
        0 0 42px rgba(242, 244, 238, 0.12);
}

.relic-mode-kicker,
.relic-mode-cta {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(4, 20, 31, 0.5);
    border: 1px solid rgba(150, 255, 247, 0.18);
    color: var(--text-soft);
}

.relic-mode-kicker {
    display: block;
    min-height: 0;
    padding: 0 clamp(24px, 2vw, 32px) 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: clamp(0.84rem, 0.82vw, 0.94rem);
    line-height: 1.48;
    order: 2;
    align-self: end;
    max-width: min(100%, 38rem);
    white-space: normal;
}

.relic-mode-kicker-focus {
    font-weight: 850;
}

.relic-mode-button .relic-mode-kicker {
    background: transparent;
    border-color: transparent;
    color: rgba(247, 229, 194, 0.84);
}

.relic-mode-button.selected .relic-mode-kicker {
    background: rgba(27, 19, 12, 0.46);
    border-color: rgba(255, 233, 182, 0.2);
    color: #f7e7c2;
}

.pictionary-mode-button .relic-mode-kicker {
    background: transparent;
    border-color: transparent;
    color: rgba(238, 241, 236, 0.82);
}

.pictionary-mode-button.selected .relic-mode-kicker {
    background: rgba(28, 38, 44, 0.6);
    border-color: rgba(255, 255, 250, 0.2);
    color: #fffdf3;
}

.relic-mode-cta {
    font-size: 0.88rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.relic-mode-marquee {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    order: 1;
    min-width: 0;
}

.relic-mode-title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: "Aptos Display", "Avenir Next", "Segoe UI", sans-serif;
    font-size: clamp(1.55rem, 2.15vw, 2.08rem);
    font-style: normal;
    font-weight: 850;
    letter-spacing: -0.025em;
    line-height: 1.02;
    text-transform: none;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    text-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.pictionary-mode-title {
    font-family: "Aptos Display", "Avenir Next", "Segoe UI", sans-serif;
    font-size: clamp(1.55rem, 2.15vw, 2.08rem);
    font-style: normal;
    font-weight: 850;
    letter-spacing: -0.025em;
    line-height: 1.02;
    overflow-wrap: normal;
    word-break: keep-all;
    text-wrap: balance;
    text-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.vault-mode-title {
    font-family: "Aptos Display", "Avenir Next", "Segoe UI", sans-serif;
    font-size: clamp(1.55rem, 2.15vw, 2.08rem);
    font-style: normal;
    font-weight: 850;
    letter-spacing: -0.025em;
    line-height: 1.02;
    overflow-wrap: normal;
    word-break: keep-all;
    text-wrap: balance;
    text-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.relic-mode-emblem {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: clamp(46px, 5vw, var(--ziar-host-mode-card-emblem-size, 52px));
    height: clamp(46px, 5vw, var(--ziar-host-mode-card-emblem-size, 52px));
    padding: clamp(8px, 0.9vw, var(--ziar-host-mode-card-emblem-padding, 10px));
    border-radius: 15px;
    background: rgba(5, 18, 29, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
}

.relic-mode-emblem-icon {
    width: 100%;
    height: 100%;
}

.relic-mode-button .relic-mode-emblem {
    background: rgba(40, 25, 12, 0.4);
    border-color: rgba(255, 225, 162, 0.16);
    color: #ffe4a3;
}

.pictionary-mode-button .relic-mode-emblem {
    background: rgba(17, 26, 31, 0.6);
    border-color: rgba(245, 221, 160, 0.24);
    color: #f5dda0;
}

.pictionary-mode-button .relic-mode-marquee {
    position: static;
    padding-right: 0;
}

.pictionary-mode-button .relic-mode-emblem {
    position: static;
}

.host-mode-summary {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.35;
}

.host-mode-card.is-selected .host-mode-summary,
.host-mode-card.is-relic-selected .host-mode-summary {
    color: #f2dec1;
}

.host-mode-card.is-pictionary-selected .host-mode-summary {
    color: #eef1ec;
}

.host-mode-inline-panel {
    display: grid;
    gap: 16px;
    padding: clamp(16px, 1.8vw, 22px);
    min-height: 0;
    max-height: 100%;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(10, 30, 44, 0.78), rgba(5, 16, 26, 0.92)), rgba(7, 22, 35, 0.94);
    border: 1px solid rgba(150, 255, 247, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -18px 30px rgba(0, 0, 0, 0.18);
}

.host-mode-inline-panel.is-pictionary {
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.host-mode-inline-panel.is-selected:not(.is-pictionary) {
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.host-mode-inline-panel.is-selected {
    background: linear-gradient(180deg, rgba(20, 13, 8, 0.78), rgba(10, 6, 4, 0.92)), rgba(12, 8, 5, 0.94);
    border-width: var(--active-panel-outline-width);
    border-color: rgba(255, 220, 149, 0.18);
}

.host-mode-inline-panel.is-selected.is-pictionary {
    background:
        radial-gradient(circle at 82% 12%, rgba(255, 255, 250, 0.1), transparent 28%),
        linear-gradient(180deg, rgba(49, 59, 63, 0.84), rgba(16, 23, 28, 0.95)), rgba(18, 25, 30, 0.96);
    border-color: rgba(243, 240, 229, 0.22);
}

.host-mode-card.is-selected .setup-meta,
.host-mode-card.is-relic-selected .setup-meta,
.host-mode-inline-panel.is-selected:not(.is-pictionary) .setup-meta {
    background: rgba(31, 23, 15, 0.96);
    border-color: rgba(214, 170, 103, 0.24);
}

.host-mode-card.is-pictionary-selected .setup-meta,
.host-mode-inline-panel.is-selected.is-pictionary .setup-meta {
    background: rgba(25, 33, 38, 0.96);
    border-color: rgba(243, 240, 229, 0.22);
}

.host-mode-card,
.host-waiting-card,
.host-qr-card,
.host-presence-card {
    background: linear-gradient(180deg, rgba(18, 57, 84, 0.48), rgba(7, 22, 35, 0.8)), var(--card);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.host-waiting-card,
.host-qr-card,
.host-presence-card,
.waiting-card,
.lobby-roster-card {
    background:
        radial-gradient(circle at 18% 18%, var(--lobby-panel-glow), transparent 26%),
        linear-gradient(180deg, var(--lobby-panel-top), var(--lobby-panel-bottom)), rgba(5, 17, 28, 0.95);
    border-color: var(--lobby-panel-border);
}

.host-waiting-card {
    min-height: 0;
    align-content: stretch;
    --playground-bleed: 0px;
}

.host-lobby-stage-card {
    position: relative;
    min-height: inherit;
    padding: 0;
    overflow: hidden;
    border-color: var(--lobby-stage-border);
    background:
        radial-gradient(circle at 18% 18%, var(--lobby-stage-radial), transparent 26%),
        radial-gradient(circle at 76% 80%, var(--lobby-world-spark), transparent 20%),
        linear-gradient(180deg, var(--lobby-stage-top), var(--lobby-stage-bottom)), var(--card);
}

.room-shell.is-host-lobby.has-lobby-relic-selection .host-lobby-stage-card::before,
.room-shell.is-host-lobby.has-lobby-pictionary-selection .host-lobby-stage-card::before,
.room-shell.is-host-lobby.has-lobby-vault-selection .host-lobby-stage-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.room-shell.is-host-lobby.has-lobby-relic-selection .host-lobby-stage-card::before {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 222, 146, 0.095), transparent 30%),
        linear-gradient(180deg, rgba(112, 79, 40, 0.045), rgba(28, 19, 11, 0.008));
}

.room-shell.is-host-lobby.has-lobby-pictionary-selection .host-lobby-stage-card::before {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 246, 223, 0.11), transparent 30%),
        linear-gradient(180deg, rgba(112, 84, 45, 0.05), rgba(25, 21, 16, 0));
}

.room-shell.is-host-lobby.has-lobby-vault-selection .host-lobby-stage-card::before {
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.055), transparent 18% 100%),
        radial-gradient(circle at 18% 22%, rgba(184, 119, 255, 0.08), transparent 31%),
        linear-gradient(180deg, rgba(44, 35, 58, 0.05), rgba(10, 8, 14, 0));
}

.host-presence-card {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    min-height: 0;
    align-content: start;
    overflow: visible;
    box-shadow:
        0 24px 40px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0 28px var(--lobby-panel-shadow);
}

.host-presence-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.host-presence-name-button {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 50px;
    border-radius: 999px;
    border: 1px solid var(--lobby-chip-border);
    background: var(--lobby-chip-bg);
    color: #eefcff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.host-presence-name-button:hover,
.host-presence-name-button:focus-visible {
    border-color: color-mix(in srgb, var(--lobby-chip-border) 100%, white 18%);
    background: color-mix(in srgb, var(--lobby-chip-bg) 84%, white 6%);
}

.host-presence-name-label {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
}

.host-presence-edit-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--lobby-chip-border);
    flex: 0 0 auto;
    transform: translateY(-50%);
}

.host-presence-roster {
    position: relative;
    min-height: 0;
    padding-top: 0;
    border-top: 0;
    overflow: visible;
}

.host-presence-roster .player-roster-actions-menu {
    top: calc(100% + 5px);
    bottom: auto;
    transform-origin: 100% 0;
}

.host-presence-roster > #lobby-participants {
    min-height: 0;
}

@media (min-width: 1241px) {
    .host-presence-roster {
        grid-template-rows: minmax(0, 1fr);
    }
}

.host-presence-count {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 6;
    pointer-events: none;
}

.host-presence-history-menu.roster-history-menu {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 7;
}

.host-presence-history-menu.roster-history-menu .host-presence-count {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    pointer-events: auto;
}

.roster-qr-button {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: calc(var(--ziar-player-roster-floating-count-size) + 6px);
    right: 14px;
    z-index: 5;
    display: grid;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ziar-qr-roster-overlay-frame-radius);
    background: transparent;
    color: inherit;
    opacity: var(--ziar-qr-roster-overlay-opacity);
    filter: saturate(0.88);
    cursor: pointer;
    transition:
        opacity 160ms ease,
        filter 160ms ease,
        transform 160ms ease;
}

.host-mobile-qr-button {
    display: none;
}

.roster-qr-button:hover,
.roster-qr-button:focus-visible {
    opacity: 0.96;
    filter: saturate(1);
    transform: translateY(-1px);
}

.roster-qr-button:focus-visible {
    outline: 2px solid rgba(164, 255, 250, 0.46);
    outline-offset: 4px;
}

.roster-qr-button .room-qr-frame.roster-qr-frame {
    width: var(--ziar-qr-roster-overlay-frame-width);
    margin: 0;
    padding: var(--ziar-qr-roster-overlay-frame-padding);
    border-radius: var(--ziar-qr-roster-overlay-frame-radius);
    box-shadow:
        inset 0 0 0 1px rgba(9, 20, 30, 0.06),
        0 10px 24px rgba(0, 0, 0, 0.24);
}

.roster-qr-button .room-qr-frame.roster-qr-frame .room-qr-placeholder {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
}

.host-qr-card {
    width: 100%;
    max-width: var(--ziar-host-lobby-qr-card-max-width, 406px);
    justify-self: end;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: start;
    justify-items: center;
    gap: 12px;
    pointer-events: auto;
    border-color: var(--lobby-panel-border);
    background:
        radial-gradient(circle at 18% 18%, var(--lobby-panel-glow), transparent 26%),
        linear-gradient(180deg, var(--lobby-panel-top), var(--lobby-panel-bottom)), rgba(255, 255, 255, 0.02);
    box-shadow:
        0 24px 46px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0 28px var(--lobby-panel-shadow);
}

.host-qr-card .room-qr-button {
    min-height: 0;
    align-self: start;
}

.host-qr-code-shell {
    position: relative;
    width: 100%;
    max-width: var(--ziar-qr-host-lobby-frame-max-width, 354px);
    display: grid;
    justify-items: center;
    justify-self: center;
}

.room-qr-button {
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    display: grid;
    justify-items: center;
}

.room-qr-frame {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, var(--ziar-qr-frame-max-width, 320px));
    aspect-ratio: 1;
    margin: 0 auto;
    padding: var(--ziar-qr-frame-padding, 16px);
    border-radius: var(--ziar-qr-frame-radius, 28px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 250, 0.98)), #ffffff;
    box-shadow:
        inset 0 0 0 1px rgba(9, 20, 30, 0.06),
        0 24px 40px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.host-qr-card .room-qr-frame {
    width: 100%;
    max-width: var(--ziar-qr-host-lobby-frame-max-width, 354px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(248, 250, 252, 0.992)), #ffffff;
    box-shadow:
        inset 0 0 0 1px rgba(9, 20, 30, 0.05),
        0 24px 40px rgba(0, 0, 0, 0.16);
}

.room-qr-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.room-qr-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #1c2c35;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
}

.room-qr-frame.is-ready .room-qr-placeholder {
    opacity: 0;
}

.host-qr-meta {
    display: grid;
    gap: 4px;
    justify-items: center;
    text-align: center;
}

.host-room-code-display {
    font-size: clamp(2.8rem, 4.6vw, 4.6rem);
    line-height: 0.84;
}

.host-qr-caption {
    display: none;
}

.host-qr-copy-link-button {
    position: absolute;
    right: 10px;
    bottom: -14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 236, 173, 0.62);
    background: linear-gradient(180deg, rgba(36, 45, 48, 0.96), rgba(15, 23, 28, 0.98)), rgba(16, 24, 30, 0.94);
    color: #fff0c2;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 24px rgba(0, 0, 0, 0.28),
        0 0 0 4px rgba(15, 23, 28, 0.72);
    transition:
        transform 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease,
        background 140ms ease;
}

.host-qr-copy-link-button:hover,
.host-qr-copy-link-button:focus-visible {
    border-color: rgba(255, 244, 204, 0.86);
    background: linear-gradient(180deg, rgba(50, 58, 56, 0.98), rgba(23, 31, 30, 0.98)), rgba(24, 34, 30, 0.96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 0 4px rgba(15, 23, 28, 0.78),
        0 0 0 7px rgba(223, 169, 71, 0.18),
        0 14px 26px rgba(0, 0, 0, 0.3);
    outline: none;
}

.host-qr-copy-link-button:active {
    transform: translateY(1px) scale(0.98);
}

.host-qr-copy-link-icon {
    width: 21px;
    height: 21px;
}

.host-qr-copy-link-button::before {
    content: attr(data-copy-feedback-label);
    position: absolute;
    right: 0;
    bottom: calc(100% + 9px);
    z-index: 2;
    min-width: 72px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(161, 255, 248, 0.5);
    background: rgba(7, 34, 43, 0.94);
    color: #d9fffb;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.24),
        0 0 16px rgba(74, 231, 222, 0.16);
    opacity: 0;
    pointer-events: none;
    transform: translateY(5px) scale(0.96);
    transform-origin: 85% 100%;
    transition:
        opacity 120ms ease,
        transform 160ms ease;
}

.host-qr-copy-link-button.is-copy-confirmed::before {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.player-roster {
    --player-roster-column-min: var(--ziar-player-roster-balanced-column-min);
    --player-roster-row-min: var(--ziar-player-roster-balanced-row-min);
    --player-roster-gap: var(--ziar-player-roster-balanced-gap);
    --player-roster-row-padding-y: var(--ziar-player-roster-balanced-row-padding-y);
    --player-roster-row-padding-x: var(--ziar-player-roster-balanced-row-padding-x);
    --player-roster-action-size: var(--ziar-player-roster-balanced-action-size);
    --player-roster-badge-min-height: var(--ziar-player-roster-balanced-badge-min-height);
    --player-roster-name-font-size: var(--ziar-player-roster-balanced-name-font-size);
    --player-roster-badge-font-size: var(--ziar-player-roster-balanced-badge-font-size);
}

.player-roster-density-roomy {
    --player-roster-column-min: var(--ziar-player-roster-roomy-column-min);
    --player-roster-row-min: var(--ziar-player-roster-roomy-row-min);
    --player-roster-gap: var(--ziar-player-roster-roomy-gap);
    --player-roster-row-padding-y: var(--ziar-player-roster-roomy-row-padding-y);
    --player-roster-row-padding-x: var(--ziar-player-roster-roomy-row-padding-x);
    --player-roster-action-size: var(--ziar-player-roster-roomy-action-size);
    --player-roster-badge-min-height: var(--ziar-player-roster-roomy-badge-min-height);
    --player-roster-name-font-size: var(--ziar-player-roster-roomy-name-font-size);
    --player-roster-badge-font-size: var(--ziar-player-roster-roomy-badge-font-size);
}

.player-roster-density-compact {
    --player-roster-column-min: var(--ziar-player-roster-compact-column-min);
    --player-roster-row-min: var(--ziar-player-roster-compact-row-min);
    --player-roster-gap: var(--ziar-player-roster-compact-gap);
    --player-roster-row-padding-y: var(--ziar-player-roster-compact-row-padding-y);
    --player-roster-row-padding-x: var(--ziar-player-roster-compact-row-padding-x);
    --player-roster-action-size: var(--ziar-player-roster-compact-action-size);
    --player-roster-badge-min-height: var(--ziar-player-roster-compact-badge-min-height);
    --player-roster-name-font-size: var(--ziar-player-roster-compact-name-font-size);
    --player-roster-badge-font-size: var(--ziar-player-roster-compact-badge-font-size);
}

.player-roster-density-dense {
    --player-roster-column-min: var(--ziar-player-roster-dense-column-min);
    --player-roster-row-min: var(--ziar-player-roster-dense-row-min);
    --player-roster-gap: var(--ziar-player-roster-dense-gap);
    --player-roster-row-padding-y: var(--ziar-player-roster-dense-row-padding-y);
    --player-roster-row-padding-x: var(--ziar-player-roster-dense-row-padding-x);
    --player-roster-action-size: var(--ziar-player-roster-dense-action-size);
    --player-roster-badge-min-height: var(--ziar-player-roster-dense-badge-min-height);
    --player-roster-name-font-size: var(--ziar-player-roster-dense-name-font-size);
    --player-roster-badge-font-size: var(--ziar-player-roster-dense-badge-font-size);
}

.host-presence-card .participant-list,
.host-presence-card .list-empty,
.player-lobby-roster-card .participant-list,
.player-lobby-roster-card .list-empty {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.host-presence-card .participant-list,
.player-lobby-roster-card .participant-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--player-roster-gap);
}

@media (min-width: 981px) {
    #app .room-shell.is-host-lobby .host-presence-card .participant-list {
        max-height: min(
            var(--ziar-host-lobby-roster-list-max-viewport-height, 48svh),
            var(--ziar-host-lobby-roster-list-max-height, 520px)
        );
        overflow: auto;
        padding-right: 4px;
    }
}

.host-presence-card .participant-list.player-roster-density-roomy,
.player-lobby-roster-card .participant-list.player-roster-density-roomy,
.pictionary-shell.is-host-view .pictionary-roster-card .roster-list.player-roster-density-roomy {
    grid-template-columns: minmax(0, 1fr);
}

.host-presence-card .participant-list.player-roster-density-balanced,
.host-presence-card .participant-list.player-roster-density-compact,
.player-lobby-roster-card .participant-list.player-roster-density-balanced,
.player-lobby-roster-card .participant-list.player-roster-density-compact,
.pictionary-shell.is-host-view .pictionary-roster-card .roster-list.player-roster-density-balanced,
.pictionary-shell.is-host-view .pictionary-roster-card .roster-list.player-roster-density-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pictionary-shell.is-host-view .pictionary-roster-card .roster-list.player-roster-density-dense {
    --player-roster-row-min: 30px;
    --player-roster-row-padding-y: 3px;
    --player-roster-row-padding-x: 6px;
    --player-roster-action-size: 20px;
    --player-roster-badge-min-height: 16px;
    --player-roster-name-font-size: 0.74rem;
    --player-roster-badge-font-size: 0.54rem;
}

.host-presence-card .participant-list.player-roster-single,
.host-presence-card .participant-list.player-roster:has(> :only-child),
.player-lobby-roster-card .participant-list.player-roster-single,
.player-lobby-roster-card .participant-list.player-roster:has(> :only-child),
.pictionary-shell.is-host-view .pictionary-roster-card .roster-list.player-roster-single,
.pictionary-shell.is-host-view .pictionary-roster-card .roster-list.player-roster:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
}

.host-presence-card .participant-row,
.player-lobby-roster-card .participant-row {
    min-height: var(--player-roster-row-min);
    gap: var(--player-roster-gap);
    padding: var(--player-roster-row-padding-y) var(--player-roster-row-padding-x);
    border-radius: 10px;
}

.host-presence-card .participant-identity,
.player-lobby-roster-card .participant-identity {
    flex: 1 1 auto;
    gap: var(--player-roster-gap);
}

.host-presence-card .participant-name,
.player-lobby-roster-card .participant-name {
    font-size: var(--player-roster-name-font-size);
    line-height: 1.15;
}

.host-presence-card .player-roster-actions,
.player-lobby-roster-card .player-roster-actions {
    --player-roster-action-strip-width: calc(var(--player-roster-action-size) + 4px);
}

.host-presence-card .participant-statuses,
.player-lobby-roster-card .participant-statuses {
    margin-left: 2px;
    gap: 4px;
    flex-wrap: nowrap;
}

.host-presence-card .participant-badge,
.player-lobby-roster-card .participant-badge {
    min-height: var(--player-roster-badge-min-height);
    padding: 0 5px;
    font-size: var(--player-roster-badge-font-size);
}

.host-presence-card .participant-list.player-roster-density-dense,
.player-lobby-roster-card .participant-list.player-roster-density-dense {
    max-height: min(56vh, 560px);
    max-height: min(56svh, 560px);
    overflow: auto;
    padding-right: 4px;
}

.waiting-room-roster {
    display: grid;
    gap: 12px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.waiting-room-roster .participant-list,
.waiting-room-roster .list-empty,
.lobby-roster-card .participant-list,
.lobby-roster-card .list-empty {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.waiting-room-roster .participant-list.player-roster-density-dense,
.lobby-roster-card .participant-list.player-roster-density-dense {
    max-height: min(56vh, 560px);
    max-height: min(56svh, 560px);
    overflow: auto;
    padding-right: 4px;
}

.waiting-card {
    position: relative;
    align-content: start;
    --playground-bleed: 20px;
    border-color: var(--lobby-stage-border);
    overflow: hidden;
}

.room-shell.has-lobby-relic-selection .player-lobby-grid .waiting-card::before,
.room-shell.has-lobby-pictionary-selection .player-lobby-grid .waiting-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.room-shell.has-lobby-relic-selection .player-lobby-grid .waiting-card::before {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 223, 155, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(112, 79, 40, 0.036), rgba(28, 19, 11, 0.006));
}

.room-shell.has-lobby-pictionary-selection .player-lobby-grid .waiting-card::before {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 246, 223, 0.095), transparent 32%),
        linear-gradient(180deg, rgba(112, 84, 45, 0.042), rgba(25, 21, 16, 0));
}

.player-lobby-grid .waiting-card > * {
    position: relative;
    z-index: 1;
}

.player-lobby-grid .waiting-card {
    --player-lobby-stage-min-height: min(72vh, 620px);
    align-content: stretch;
    grid-template-rows: minmax(0, 1fr);
}

@supports (height: 100svh) {
    .player-lobby-grid .waiting-card {
        --player-lobby-stage-min-height: min(72svh, 620px);
    }
}

.waiting-room-meta {
    display: grid;
    gap: 14px;
}

.waiting-stats-centered {
    justify-content: center;
}

.lobby-roster-card {
    align-content: start;
}

.roster-head.roster-head-count-only {
    justify-content: flex-end;
}

.player-lobby-grid .player-lobby-roster-card {
    position: relative;
    align-content: stretch;
    grid-template-rows: minmax(0, 1fr);
    overflow: visible;
    padding-top: 14px;
}

.player-lobby-grid .player-lobby-roster-card:has(.player-lobby-join-qr-button) {
    padding-top: 14px;
}

.player-lobby-roster-card:not(:has(.player-lobby-join-qr-button)) .player-lobby-participants {
    padding-top: 12px;
}

.player-lobby-roster-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
}

.player-lobby-roster-head .roster-head {
    min-width: 0;
}

.player-lobby-join-qr-button {
    width: auto;
    max-width: none;
    margin: 0;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.player-lobby-join-qr-frame {
    justify-self: center;
}

.player-lobby-count {
    position: absolute;
    top: -1px;
    right: calc(14px + (var(--ziar-qr-roster-overlay-frame-width) - var(--ziar-player-roster-floating-count-size)) / 2);
    z-index: 6;
    pointer-events: none;
}

.player-lobby-participants {
    min-height: 0;
    display: grid;
    align-content: start;
}

.player-lobby-participants > .participant-list,
.player-lobby-participants > .list-empty {
    min-height: 0;
    max-height: none;
}

@media (max-width: 1180px), (max-height: 760px) {
    .player-lobby-grid .player-lobby-roster-card:has(.player-lobby-join-qr-button) {
        padding-top: 18px;
    }

    .player-lobby-join-qr-button {
        top: calc(var(--ziar-player-roster-floating-count-size) + 6px);
        right: 12px;
    }

    .player-lobby-count {
        right: calc(12px + (var(--ziar-qr-roster-overlay-frame-width) - var(--ziar-player-roster-floating-count-size)) / 2);
    }
}

.player-lobby-grid .waiting-card [data-lobby-playground-root],
.player-lobby-grid .waiting-card .lobby-playground-shell {
    display: grid;
    min-height: var(--player-lobby-stage-min-height, min(72vh, 620px));
    min-height: var(--player-lobby-stage-min-height, min(72svh, 620px));
}

.player-lobby-grid .waiting-card .lobby-playground-stage {
    height: auto;
    min-height: var(--player-lobby-stage-min-height, min(72vh, 620px));
    min-height: var(--player-lobby-stage-min-height, min(72svh, 620px));
}

.lobby-playground-shell {
    display: grid;
    gap: 0;
}

.lobby-playground-stage-head {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    pointer-events: none;
}

.lobby-playground-stage-spacer {
    min-width: 0;
}

.lobby-playground-name-button {
    position: relative;
    z-index: 1;
    justify-self: start;
    max-width: min(100%, 220px);
    min-height: 42px;
    padding: 0 12px 0 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(5, 18, 29, 0.58);
    color: #eefcff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1;
    text-align: left;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    pointer-events: auto;
}

.lobby-playground-name-button:hover .lobby-playground-edit-icon,
.lobby-playground-name-button:focus-visible .lobby-playground-edit-icon {
    border-color: rgba(164, 255, 250, 0.42);
    background: rgba(255, 255, 255, 0.12);
}

.lobby-playground-name-button:focus-visible {
    outline: none;
}

.lobby-playground-name-button.is-readonly {
    cursor: default;
    padding-inline: 12px;
}

.lobby-playground-name-button.is-readonly:hover .lobby-playground-edit-icon,
.lobby-playground-name-button.is-readonly:focus-visible .lobby-playground-edit-icon {
    border-color: var(--lobby-chip-border);
    background: rgba(5, 18, 29, 0.62);
}

.lobby-playground-name-button.is-readonly .lobby-playground-edit-icon {
    display: none;
}

.lobby-playground-viewer-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateY(-1px);
    white-space: nowrap;
}

.lobby-playground-edit-icon,
.roster-count,
.maze-level-chip {
    border-radius: 999px;
    background: var(--lobby-chip-bg);
    border: 1px solid var(--lobby-chip-border);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.18);
}

.lobby-playground-edit-icon {
    width: 30px;
    height: 30px;
    background: rgba(5, 18, 29, 0.62);
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 0.92rem;
}

.roster-count,
.maze-level-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 800;
}

.roster-count,
.host-presence-count,
.player-lobby-count,
.roster-head .roster-count {
    box-sizing: border-box;
    width: var(--ziar-player-roster-floating-count-size, 30px);
    min-width: var(--ziar-player-roster-floating-count-size, 30px);
    height: var(--ziar-player-roster-floating-count-size, 30px);
    min-height: var(--ziar-player-roster-floating-count-size, 30px);
    padding: 0;
    border-radius: 5px;
    border-color: rgba(119, 232, 255, 0.5);
    background: linear-gradient(180deg, rgba(28, 92, 110, 0.96), rgba(8, 43, 58, 0.98)), rgba(10, 52, 67, 0.98);
    color: #effeff;
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.22),
        0 0 0 3px rgba(3, 18, 28, 0.74),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    font-size: 0.84rem;
    line-height: 1;
}

.roster-history-slot {
    display: contents;
}

.roster-history-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    z-index: 7;
    pointer-events: auto;
}

.roster-history-trigger {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    pointer-events: auto;
    font-family: inherit;
    cursor: pointer;
    transition:
        border-color 150ms ease,
        color 150ms ease,
        transform 150ms ease,
        background 150ms ease;
}

.roster-history-trigger:hover,
.roster-history-trigger:focus-visible,
.roster-history-menu.is-open .roster-history-trigger {
    border-color: rgba(164, 255, 250, 0.72);
    background: linear-gradient(180deg, rgba(24, 82, 98, 0.98), rgba(8, 39, 54, 1)), rgba(10, 65, 78, 0.96);
    color: #ffffff;
    transform: translateY(-1px);
}

.roster-history-trigger:focus-visible,
.roster-history-download-button:focus-visible {
    outline: 2px solid rgba(164, 255, 250, 0.48);
    outline-offset: 3px;
}

.roster-history-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: min(82vw, 328px);
    min-width: 230px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 6px;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(133, 237, 255, 0.32);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(15, 55, 72, 0.98), rgba(5, 23, 34, 0.99)), rgba(8, 31, 43, 0.98);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.roster-history-popover[hidden] {
    display: none;
}

.roster-history-list {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    gap: 3px;
    max-height: min(42vh, 260px);
    max-height: min(42svh, 260px);
    overflow-y: auto;
    padding-right: 2px;
}

.roster-history-event,
.roster-history-empty {
    display: grid;
    min-width: 0;
    border-radius: 6px;
    color: #effeff;
}

.roster-history-event {
    --roster-history-accent-rgb: 117 234 255;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 6px;
    row-gap: 2px;
    padding: 5px 7px 5px 5px;
    border-left: 2px solid rgb(var(--roster-history-accent-rgb) / 0.68);
    background:
        linear-gradient(90deg, rgb(var(--roster-history-accent-rgb) / 0.13), rgba(117, 234, 255, 0.045)),
        rgba(117, 234, 255, 0.045);
    box-shadow: inset 0 0 0 1px rgb(var(--roster-history-accent-rgb) / 0.08);
}

.roster-history-event.is-join {
    --roster-history-accent-rgb: 101 225 166;
}

.roster-history-event.is-reconnect {
    --roster-history-accent-rgb: 121 205 255;
}

.roster-history-event.is-rename {
    --roster-history-accent-rgb: 255 198 102;
}

.roster-history-event.is-rename-request {
    --roster-history-accent-rgb: 205 177 255;
}

.roster-history-event.is-disconnect {
    --roster-history-accent-rgb: 166 185 199;
}

.roster-history-event.is-kick {
    --roster-history-accent-rgb: 255 139 139;
}

.roster-history-empty {
    grid-column: 1;
    grid-row: 1;
    padding: 7px 8px;
    background: rgba(117, 234, 255, 0.07);
    color: rgba(239, 254, 255, 0.74);
    font-size: 0.74rem;
    font-weight: 750;
    line-height: 1.2;
}

.roster-history-event-kind {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding: 3px 5px;
    border-radius: 999px;
    background: rgb(var(--roster-history-accent-rgb) / 0.14);
    color: rgb(var(--roster-history-accent-rgb) / 0.96);
    font-size: 0.52rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.roster-history-event-name,
.roster-history-event-detail {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roster-history-event-name {
    grid-column: 2;
    grid-row: 1;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1.15;
}

.roster-history-event-detail {
    grid-column: 2;
    grid-row: 2;
    color: rgba(239, 254, 255, 0.7);
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.15;
}

.roster-history-download-button {
    -webkit-appearance: none;
    appearance: none;
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(133, 237, 255, 0.26);
    border-radius: 6px;
    background: rgba(117, 234, 255, 0.09);
    color: #d9fbff;
    font-family: inherit;
    cursor: pointer;
    transition:
        border-color 140ms ease,
        background 140ms ease,
        color 140ms ease,
        transform 140ms ease;
}

.roster-history-download-button:hover,
.roster-history-download-button:focus-visible {
    border-color: rgba(164, 255, 250, 0.58);
    background: rgba(117, 234, 255, 0.17);
    color: #ffffff;
    transform: translateY(-1px);
}

.roster-history-download-button .ziarcadia-icon {
    width: 16px;
    height: 16px;
    display: block;
}

.roster-head .roster-history-menu {
    flex: 0 0 auto;
    pointer-events: auto;
}

.lobby-playground-title {
    margin: 0;
    color: #eefcff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: center;
    min-width: 0;
    max-width: min(100%, 620px);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    line-height: 1.2;
    pointer-events: none;
}

.lobby-playground-room-code {
    font-size: 1.3rem;
    font-weight: 900;
}

.lobby-playground-title-divider {
    opacity: 0.6;
}

.lobby-playground-mode {
    color: #9ffbe9;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

.lobby-playground-stage {
    -webkit-tap-highlight-color: transparent;
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border-radius: calc(var(--radius-xl) - 4px);
    border: 0;
    background:
        radial-gradient(circle at center, var(--lobby-stage-radial), transparent 56%),
        linear-gradient(180deg, var(--lobby-stage-top), var(--lobby-stage-bottom));
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    width: 100%;
}

.lobby-playground-stage.is-spectator {
    touch-action: auto;
}

.lobby-playground-stage * {
    user-select: none;
    -webkit-user-select: none;
}

.host-lobby-stage-card .lobby-playground-stage,
.waiting-card .lobby-playground-stage {
    width: calc(100% + (var(--playground-bleed) * 2));
    margin-inline: calc(var(--playground-bleed) * -1);
}

.host-lobby-stage-card [data-lobby-playground-root],
.host-lobby-stage-card .lobby-playground-shell {
    display: grid;
    min-height: 100%;
}

.host-lobby-stage-card .lobby-playground-stage {
    height: 100%;
    min-height: inherit;
}

.host-lobby-stage-card .lobby-playground-stage-head {
    inset: 16px;
    display: block;
}

.host-lobby-stage-card .lobby-playground-name-button {
    position: absolute;
    top: 0;
    left: 0;
    max-width: min(100%, 320px);
}

.host-lobby-stage-card .lobby-playground-title {
    position: absolute;
    left: 50%;
    bottom: 16px;
    max-width: min(100%, 620px);
    padding: 7px 12px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--lobby-chip-bg);
    border: 1px solid var(--lobby-chip-border);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.host-lobby-stage-card .lobby-playground-stage-spacer {
    display: none;
}

.lobby-playground-world {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    border-radius: inherit;
    border: 0;
    background:
        radial-gradient(circle at 20% 20%, var(--lobby-world-glow), transparent 20%),
        radial-gradient(circle at 78% 82%, var(--lobby-world-spark), transparent 18%),
        linear-gradient(180deg, var(--lobby-world-top), var(--lobby-world-bottom));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.lobby-playground-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.lobby-playground-stage.is-canvas-rendered .lobby-playground-world {
    background: transparent;
    box-shadow: none;
}

.lobby-playground-world::before,
.lobby-playground-world::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lobby-playground-world::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 36px 36px;
}

.lobby-playground-world::after {
    background:
        linear-gradient(180deg, rgba(4, 10, 18, 0.32), rgba(4, 10, 18, 0) 18%, rgba(4, 10, 18, 0) 82%, rgba(4, 10, 18, 0.38)),
        radial-gradient(circle at center, rgba(0, 0, 0, 0) 0 58%, rgba(0, 0, 0, 0.18) 100%);
}

.lobby-playground-stage.is-canvas-rendered .lobby-playground-world::before,
.lobby-playground-stage.is-canvas-rendered .lobby-playground-world::after {
    display: none;
}

.lobby-playground-stage.is-follow-camera .lobby-playground-world {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 0 84px rgba(0, 0, 0, 0.14);
}

.lobby-playground-stage:focus-visible {
    outline: none;
    box-shadow:
        inset 0 0 0 2px rgba(164, 255, 250, 0.32),
        inset 0 0 0 6px rgba(164, 255, 250, 0.08);
}

.lobby-playground-canvas,
.lobby-playground-avatars {
    position: absolute;
    inset: 0;
}

.lobby-playground-avatars {
    z-index: 2;
}

.lobby-playground-avatars:has(.lobby-playground-avatar.is-high-fiving),
.lobby-playground-avatars:has(.lobby-playground-avatar.is-speed-boosted) {
    z-index: 4;
}

.lobby-playground-effects {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}

.lobby-high-five-burst {
    position: absolute;
    width: 1px;
    height: 1px;
    pointer-events: none;
    animation: lobby-high-five-burst 720ms cubic-bezier(0.16, 0.78, 0.2, 1) both;
}

.lobby-high-five-burst::before,
.lobby-high-five-burst::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 999px;
    transform: translate(-50%, -50%);
}

.lobby-high-five-burst::before {
    width: 66px;
    height: 66px;
    border: 3px solid rgba(255, 255, 255, 0.86);
    box-shadow:
        0 0 16px rgba(255, 255, 255, 0.78),
        inset 0 0 12px rgba(255, 255, 255, 0.36);
}

.lobby-high-five-burst::after {
    width: 24px;
    height: 24px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 72%);
}

.lobby-high-five-ray {
    position: absolute;
    left: -2px;
    top: -5px;
    width: 4px;
    height: 54px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--lobby-high-five-color), transparent 92%);
    box-shadow: 0 0 10px var(--lobby-high-five-color);
    transform: rotate(var(--lobby-high-five-angle)) translateY(-70px);
    transform-origin: 2px 5px;
}

@keyframes lobby-high-five-burst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.32) rotate(-5deg);
    }

    18% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.76) rotate(0deg);
    }

    52% {
        opacity: 0.92;
        transform: translate(-50%, -50%) scale(1) rotate(3deg);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.22) rotate(6deg);
    }
}

.lobby-pellet,
.lobby-playground-avatar {
    position: absolute;
    transform: translate(-50%, -50%);
}

.lobby-pellet {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.08),
        0 0 12px rgba(255, 255, 255, 0.4);
    transition:
        opacity 140ms ease,
        transform 140ms ease;
}

.lobby-pellet.is-collected {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
}

.lobby-pellet-splash {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 68%);
    box-shadow:
        0 0 16px rgba(255, 255, 255, 0.82),
        0 0 34px rgba(255, 255, 255, 0.34);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.32);
    animation: lobby-pellet-splash 560ms ease-out forwards;
    mix-blend-mode: screen;
    pointer-events: none;
}

.lobby-pellet-splash::before,
.lobby-pellet-splash::after {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: inherit;
    background:
        linear-gradient(90deg, transparent 0 38%, rgba(255, 255, 255, 0.8) 48% 52%, transparent 62% 100%),
        linear-gradient(0deg, transparent 0 38%, rgba(255, 255, 255, 0.8) 48% 52%, transparent 62% 100%);
}

.lobby-pellet-splash::after {
    transform: rotate(45deg);
    opacity: 0.72;
}

.lobby-playground-avatar {
    --playground-avatar-hue: 184;
    display: grid;
    place-items: center;
    pointer-events: none;
    z-index: 2;
}

.lobby-playground-avatar.is-self {
    z-index: 3;
}

.lobby-playground-avatar.is-high-fiving {
    z-index: 4;
}

.lobby-playground-avatar.is-pellet-celebrating {
    z-index: 4;
}

.lobby-playground-avatar.is-speed-boosted {
    z-index: 4;
}

.lobby-speed-boost-effect {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    width: 62px;
    height: 48px;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 215, 80, 0.18), transparent 72%);
}

.lobby-speed-boost-effect::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 2px solid transparent;
    border-top-color: rgba(255, 233, 140, 0.7);
    border-bottom-color: rgba(255, 202, 65, 0.45);
    border-radius: 50%;
}

.lobby-playground-avatar.is-speed-boosted .lobby-speed-boost-effect {
    opacity: 1;
    animation: lobby-speed-boost-aura 900ms ease-in-out infinite;
}

.lobby-playground-avatar.is-speed-boosted .lobby-playground-square {
    filter: drop-shadow(0 0 3px rgba(255, 226, 112, 0.65));
}

.lobby-high-five-cooldown {
    position: absolute;
    z-index: 6;
    top: calc(100% + 3px);
    left: 50%;
    width: 34px;
    height: 6px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: rgba(3, 16, 25, 0.88);
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.42),
        0 0 6px rgba(255, 213, 79, 0.18);
}

.lobby-high-five-cooldown::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffc946 0%, #fff09b 46%, #76f4df 100%);
    box-shadow: 0 0 5px rgba(255, 221, 97, 0.72);
    transform: scaleX(1);
    transform-origin: left center;
}

.lobby-playground-avatar.is-high-five-cooling-down .lobby-high-five-cooldown {
    opacity: 1;
    animation: lobby-high-five-cooldown-track var(--lobby-high-five-cooldown-duration, 10s) linear both;
}

.lobby-playground-avatar.is-high-five-cooling-down .lobby-high-five-cooldown::after {
    animation: lobby-high-five-cooldown-drain var(--lobby-high-five-cooldown-duration, 10s) linear both;
}

.lobby-playground-avatar:not(.is-self) .lobby-high-five-cooldown {
    width: 29px;
    height: 5px;
}

@keyframes lobby-high-five-cooldown-track {
    0%,
    92% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes lobby-high-five-cooldown-drain {
    to {
        transform: scaleX(0);
    }
}

@keyframes lobby-speed-boost-aura {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.92, 0.96);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.02, 1.01);
    }
}

@keyframes lobby-speed-boost-ring {
    to {
        transform: rotate(360deg);
    }
}

@keyframes lobby-speed-boost-bolt {
    0%,
    100% {
        opacity: 0.72;
        transform: translateY(1px) scale(0.9);
    }

    50% {
        opacity: 1;
        transform: translateY(-2px) scale(1.08);
    }
}

.lobby-playground-square {
    --vault-capy-mask-size: 42px;
    --playground-capy-outline: 4px;
    --playground-capy-eye-size: 1.7px;
    --playground-capy-eye-highlight-size: 0.5px;
    --playground-capy-ear-outline: 1.7px;
    --playground-capy-nostril-size: 1.15px;
    --playground-capy-nostril-fade-size: 1.5px;
    --playground-capy-mouth-stroke: 1.5px;
    --playground-capy-rim: rgba(255, 255, 255, 0.8);
    --playground-capy-fill-top: hsl(var(--playground-avatar-hue) 96% 82%);
    --playground-capy-fill-bottom: hsl(var(--playground-avatar-hue) 86% 54%);
    --playground-capy-muzzle: rgba(159, 106, 70, 0.64);
    --playground-capy-ink: rgba(4, 24, 33, 0.82);
    /* The box stays square because movement and high-five contact are center-based; only these paint layers form the shield. */
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: transparent;
    border: 0;
    box-shadow:
        0 0 0 10px hsl(var(--playground-avatar-hue) 90% 62% / 0.12),
        0 18px 24px rgba(0, 0, 0, 0.34);
    isolation: isolate;
    z-index: 1;
}

.lobby-playground-avatar .vault-capy-bandit-mask,
.lobby-capy-monocle,
.lobby-capy-adventurer-hat {
    display: none;
}

[data-lobby-capy-costume="vault-robber"] .lobby-playground-avatar .vault-capy-bandit-mask,
[data-lobby-capy-costume="picture-detective"] .lobby-capy-monocle,
[data-lobby-capy-costume="relic-adventurer"] .lobby-capy-adventurer-hat {
    display: block;
}

.lobby-capy-monocle {
    position: absolute;
    z-index: 6;
    top: 20%;
    left: 61%;
    width: 27%;
    aspect-ratio: 1;
    pointer-events: none;
    border: max(1.2px, calc(var(--vault-capy-mask-size) * 0.045)) solid #e9c45a;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.55), rgba(194, 238, 255, 0.08) 46%, rgba(7, 33, 43, 0.12) 72%);
    box-shadow:
        0 0 0 1px rgba(90, 55, 8, 0.72),
        0 0 5px rgba(255, 223, 112, 0.6),
        inset 0 0 3px rgba(255, 255, 255, 0.42);
}

.lobby-capy-monocle::after {
    content: "";
    position: absolute;
    left: 78%;
    top: 82%;
    width: max(1px, calc(var(--vault-capy-mask-size) * 0.03));
    height: 115%;
    border-radius: 999px;
    background: linear-gradient(180deg, #f6d66d, #a87113);
    box-shadow: 0 0 1px rgba(255, 233, 150, 0.7);
    transform: rotate(-19deg);
    transform-origin: top;
}

.lobby-capy-adventurer-hat {
    position: absolute;
    z-index: 6;
    left: -3%;
    top: -28%;
    width: 106%;
    height: 48%;
    pointer-events: none;
    transform: rotate(-2deg);
    filter: drop-shadow(0 2px 2px rgba(30, 16, 5, 0.36));
}

.lobby-capy-adventurer-hat-crown,
.lobby-capy-adventurer-hat-band,
.lobby-capy-adventurer-hat-brim {
    position: absolute;
    display: block;
}

.lobby-capy-adventurer-hat-crown {
    left: 21%;
    top: 0;
    width: 58%;
    height: 74%;
    border: max(0.7px, calc(var(--vault-capy-mask-size) * 0.024)) solid #67411c;
    border-radius: 42% 42% 20% 20% / 28% 28% 16% 16%;
    background: linear-gradient(150deg, #e5b96f 0%, #bd7c37 58%, #8c5225 100%);
    clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}

.lobby-capy-adventurer-hat-band {
    z-index: 2;
    left: 19%;
    top: 52%;
    width: 62%;
    height: 19%;
    border-radius: 999px;
    background: linear-gradient(180deg, #5e301e, #341a16);
    box-shadow: inset 0 1px 0 rgba(255, 213, 113, 0.28);
}

.lobby-capy-adventurer-hat-brim {
    z-index: 3;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 31%;
    border: max(0.7px, calc(var(--vault-capy-mask-size) * 0.022)) solid #70441e;
    border-radius: 50%;
    background: linear-gradient(180deg, #d89b50, #9c5c28);
    box-shadow: inset 0 1px 0 rgba(255, 229, 168, 0.38);
}

.lobby-playground-square::before,
.lobby-playground-square::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.lobby-playground-square::before {
    z-index: 3;
    inset: 0;
    background:
        radial-gradient(
            circle at 24.3% 33.5%,
            rgba(255, 255, 255, 0.92) 0 var(--playground-capy-eye-highlight-size),
            transparent calc(var(--playground-capy-eye-highlight-size) + 0.3px)
        ),
        radial-gradient(
            circle at 74.3% 33.5%,
            rgba(255, 255, 255, 0.92) 0 var(--playground-capy-eye-highlight-size),
            transparent calc(var(--playground-capy-eye-highlight-size) + 0.3px)
        ),
        radial-gradient(
            circle at 25% 35%,
            var(--playground-capy-ink) 0 var(--playground-capy-eye-size),
            transparent calc(var(--playground-capy-eye-size) + 0.45px)
        ),
        radial-gradient(
            circle at 75% 35%,
            var(--playground-capy-ink) 0 var(--playground-capy-eye-size),
            transparent calc(var(--playground-capy-eye-size) + 0.45px)
        );
}

.lobby-playground-square::after {
    z-index: 4;
    left: 41%;
    right: 41%;
    top: 69%;
    height: 4px;
    border-bottom: var(--playground-capy-mouth-stroke) solid var(--playground-capy-ink);
    border-radius: 0 0 999px 999px;
    background: none;
}

.lobby-playground-capy-ears,
.lobby-playground-capy-shield,
.lobby-playground-capy-muzzle {
    position: absolute;
    pointer-events: none;
}

.lobby-playground-capy-ears {
    z-index: 0;
    inset: 0;
}

.lobby-playground-capy-ears::before,
.lobby-playground-capy-ears::after {
    content: "";
    position: absolute;
    top: -5%;
    width: 17%;
    height: 17%;
    border: var(--playground-capy-ear-outline) solid var(--playground-capy-rim);
    border-radius: 50%;
    background: #74513d;
}

.lobby-playground-capy-ears::before {
    left: 12%;
    transform: rotate(-4deg);
}

.lobby-playground-capy-ears::after {
    right: 12%;
    transform: rotate(4deg);
}

.lobby-playground-capy-shield {
    z-index: 1;
    inset: 0;
}

.lobby-playground-capy-shield::before,
.lobby-playground-capy-shield::after {
    content: "";
    position: absolute;
    clip-path: polygon(18% 3%, 82% 3%, 96% 19%, 96% 72%, 85% 88%, 59% 99%, 41% 99%, 15% 88%, 4% 72%, 4% 19%);
}

.lobby-playground-capy-shield::before {
    inset: 0;
    background: var(--playground-capy-rim);
}

.lobby-playground-capy-shield::after {
    inset: var(--playground-capy-outline);
    background: linear-gradient(180deg, var(--playground-capy-fill-top), var(--playground-capy-fill-bottom));
}

.lobby-playground-capy-muzzle {
    z-index: 2;
    top: 48%;
    left: 16%;
    width: 68%;
    height: 40%;
    border-radius: 42% 42% 32% 32%;
    background: var(--playground-capy-muzzle);
}

.lobby-playground-capy-muzzle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(
            circle at 39% 37%,
            var(--playground-capy-ink) 0 var(--playground-capy-nostril-size),
            transparent var(--playground-capy-nostril-fade-size)
        ),
        radial-gradient(
            circle at 61% 37%,
            var(--playground-capy-ink) 0 var(--playground-capy-nostril-size),
            transparent var(--playground-capy-nostril-fade-size)
        );
}

.lobby-playground-avatar.is-pellet-celebrating .lobby-playground-square {
    animation: lobby-block-pellet-celebrate 620ms cubic-bezier(0.16, 0.84, 0.24, 1);
}

.lobby-playground-avatar.is-pellet-celebrating .lobby-playground-square::before {
    background:
        radial-gradient(circle at 26.3% 34.5%, rgba(255, 255, 255, 0.94) 0 0.65px, transparent 0.95px),
        radial-gradient(circle at 72.3% 34.5%, rgba(255, 255, 255, 0.94) 0 0.65px, transparent 0.95px),
        radial-gradient(
            circle at 27% 36%,
            rgba(4, 24, 33, 0.86) 0 calc(var(--playground-capy-eye-size) + 0.35px),
            transparent calc(var(--playground-capy-eye-size) + 0.75px)
        ),
        radial-gradient(
            circle at 73% 36%,
            rgba(4, 24, 33, 0.86) 0 calc(var(--playground-capy-eye-size) + 0.35px),
            transparent calc(var(--playground-capy-eye-size) + 0.75px)
        );
}

.lobby-playground-avatar.is-pellet-celebrating .lobby-playground-square::after {
    left: 35%;
    right: 35%;
    top: 66%;
    height: 5px;
    border: 0;
    border-bottom: var(--playground-capy-mouth-stroke) solid rgba(4, 24, 33, 0.78);
    border-radius: 0 0 999px 999px;
    background: none;
    box-shadow: none;
}

@keyframes lobby-block-pellet-celebrate {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    32% {
        transform: translateY(-5px) scale(0.92, 1.1);
    }

    58% {
        transform: translateY(1px) scale(1.1, 0.9);
    }

    78% {
        transform: translateY(-2px) scale(0.98, 1.04);
    }
}

.lobby-playground-avatar.is-high-fiving .lobby-playground-square {
    animation: lobby-block-high-five 620ms cubic-bezier(0.18, 0.82, 0.22, 1);
}

.lobby-playground-avatar.is-high-fiving .lobby-playground-square::before {
    background:
        radial-gradient(ellipse at 50% 100%, transparent 0 48%, rgba(4, 24, 33, 0.84) 52% 65%, transparent 69%) 20% 30% / 32% 21% no-repeat,
        radial-gradient(ellipse at 50% 100%, transparent 0 48%, rgba(4, 24, 33, 0.84) 52% 65%, transparent 69%) 80% 30% / 32% 21% no-repeat;
}

.lobby-playground-avatar.is-high-fiving .lobby-playground-square::after {
    left: 31%;
    right: 31%;
    top: 63%;
    height: 7px;
    border: 0;
    border-bottom: var(--playground-capy-mouth-stroke) solid rgba(4, 24, 33, 0.8);
    border-radius: 0 0 999px 999px;
    background: none;
    box-shadow: none;
}

@keyframes lobby-block-high-five {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    34% {
        transform: translate(var(--lobby-high-five-x, 0), var(--lobby-high-five-y, 0)) scale(1.14, 0.88);
    }

    62% {
        transform: translate(0, 0) scale(0.92, 1.1);
    }

    82% {
        transform: translate(0, -2px) scale(1.04, 0.98);
    }
}

.lobby-playground-avatar:not(.is-self) .lobby-playground-square {
    --vault-capy-mask-size: 34px;
    --playground-capy-outline: 2.4px;
    --playground-capy-eye-size: 1.2px;
    --playground-capy-eye-highlight-size: 0.3px;
    --playground-capy-ear-outline: 1.25px;
    --playground-capy-nostril-size: 0.8px;
    --playground-capy-nostril-fade-size: 1.1px;
    --playground-capy-mouth-stroke: 1.25px;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    box-shadow:
        0 0 0 8px hsl(var(--playground-avatar-hue) 90% 62% / 0.1),
        0 14px 20px rgba(0, 0, 0, 0.28);
}

.lobby-playground-avatar.is-paper-white .lobby-playground-square {
    --playground-capy-rim: rgba(52, 68, 74, 0.78);
    --playground-capy-fill-top: #ffffff;
    --playground-capy-fill-bottom: #edf4f5;
    --playground-capy-muzzle: rgba(159, 112, 79, 0.42);
    box-shadow:
        0 0 0 10px rgba(255, 255, 255, 0.15),
        0 0 0 1px rgba(24, 38, 45, 0.5),
        0 18px 24px rgba(0, 0, 0, 0.34);
}

/* Active-mode mascots carry the paper-white state on the shield itself instead of a lobby avatar wrapper. */
.capy-shield.is-paper-white {
    --playground-capy-rim: rgba(52, 68, 74, 0.78);
    --playground-capy-fill-top: #ffffff;
    --playground-capy-fill-bottom: #edf4f5;
    --playground-capy-muzzle: rgba(159, 112, 79, 0.42);
    box-shadow:
        0 0 0 10px rgba(255, 255, 255, 0.15),
        0 0 0 1px rgba(24, 38, 45, 0.5),
        0 18px 24px rgba(0, 0, 0, 0.34);
}

.lobby-playground-avatar:not(.is-self).is-paper-white .lobby-playground-square {
    box-shadow:
        0 0 0 8px rgba(255, 255, 255, 0.13),
        0 0 0 1px rgba(24, 38, 45, 0.48),
        0 14px 20px rgba(0, 0, 0, 0.28);
}

.lobby-playground-score {
    position: absolute;
    z-index: 5;
    top: auto;
    bottom: calc(100% + 5px);
    left: 50%;
    min-width: 28px;
    min-height: 26px;
    padding: 0 7px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(5, 18, 29, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 900;
}

.lobby-playground-avatar:not(.is-self) .lobby-playground-score {
    top: auto;
    bottom: calc(100% + 4px);
    left: 50%;
    min-width: 24px;
    min-height: 22px;
    padding: 0 6px;
    font-size: 0.66rem;
}

.lobby-playground-name {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    max-width: 92px;
    padding: 4px 8px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(5, 18, 29, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #eefcff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.room-overlay-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(2, 10, 16, 0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    pointer-events: auto;
}

.rename-popover-dismiss-region {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
    pointer-events: auto;
}

.rename-popover-dismiss-region.is-prompted {
    background: rgba(2, 10, 16, 0.58);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.rename-popover,
.room-modal,
.qr-preview-panel {
    position: fixed;
    z-index: 41;
    pointer-events: auto;
}

.room-modal {
    left: 50%;
    top: 50%;
    width: min(760px, calc(100vw - 28px));
    max-height: min(88vh, 860px);
    padding: 24px;
    transform: translate(-50%, -50%);
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(89, 61, 31, 0.98), rgba(28, 19, 11, 0.98)), rgba(28, 19, 11, 0.98);
    border: 1px solid rgba(255, 222, 158, 0.32);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    overflow: auto;
}

.rename-popover {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(9, 26, 38, 0.98), rgba(4, 14, 22, 0.98)), rgba(4, 14, 22, 0.98);
    border: 1px solid rgba(158, 238, 255, 0.2);
    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 28px rgba(65, 198, 224, 0.08);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    animation: rename-popover-enter 150ms ease-out both;
}

.rename-popover.is-prompted {
    gap: 16px;
    padding: 22px;
    border-radius: 28px;
    border-color: rgba(158, 238, 255, 0.28);
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.46),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0 40px rgba(65, 198, 224, 0.12);
}

.rename-popover::before {
    content: "";
    position: absolute;
    left: var(--rename-popover-arrow-left, 44px);
    width: 16px;
    height: 16px;
    background: rgba(7, 21, 31, 0.98);
    border: 1px solid rgba(158, 238, 255, 0.2);
    box-shadow: 0 12px 18px rgba(0, 0, 0, 0.16);
    transform: translateX(-50%) rotate(45deg);
}

.rename-popover.is-below::before {
    top: -9px;
    border-right: 0;
    border-bottom: 0;
}

.rename-popover.is-above::before {
    bottom: -9px;
    border-left: 0;
    border-top: 0;
}

.rename-popover.is-unanchored::before {
    display: none;
}

.rename-popover-note {
    margin: 0;
    color: rgba(234, 252, 255, 0.88);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
}

.rename-popover.is-prompted .rename-popover-note {
    font-size: 1.12rem;
}

.rename-popover-field {
    gap: 0;
}

.rename-popover-field input {
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 18px;
    font-size: 1rem;
}

.rename-popover.is-prompted .rename-popover-field input {
    min-height: 58px;
    padding: 14px 16px;
    font-size: 1.12rem;
}

.rename-popover-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rename-popover-actions .primary-button,
.rename-popover-actions .secondary-button {
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
}

.rename-popover.is-prompted .rename-popover-actions .primary-button,
.rename-popover.is-prompted .rename-popover-actions .secondary-button {
    min-height: 48px;
}

@keyframes rename-popover-enter {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.host-setup-modal {
    display: grid;
    gap: 20px;
}

.modal-close-button {
    min-height: 42px;
}

.host-setup-hero {
    display: grid;
    gap: 10px;
}

.host-setup-hero h2,
.host-setup-hero p {
    margin: 0;
}

.host-setup-hero h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif;
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-style: italic;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.host-setup-hero p {
    color: #ead8bb;
    line-height: 1.55;
}

.toggle-field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: rgba(16, 11, 7, 0.46);
    border: 1px solid rgba(255, 214, 127, 0.14);
    color: #f7ecd5;
    font-weight: 600;
}

.toggle-field input {
    width: 20px;
    height: 20px;
    accent-color: #dfa947;
    flex: 0 0 auto;
}

.host-mode-toggle-field {
    min-height: 56px;
    align-items: center;
}

.host-participation-toggle-field,
.active-host-participation-field {
    justify-content: space-between;
}

.host-mode-toggle-row .host-participation-toggle-field {
    justify-content: flex-start;
}

.host-relic-single-line-label,
.host-relic-participation-label,
.host-pictionary-no-translations-label,
.host-pictionary-no-hints-label,
.host-participation-toggle-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.host-source-field {
    gap: 10px;
}

.host-mode-inline-panel.is-pictionary .host-source-field {
    min-height: 0;
    height: 100%;
}

.host-source-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.host-source-editor {
    --host-source-line-height: 1.55;
    --host-source-row-height: calc(1em * var(--host-source-line-height));
    --host-source-gutter-width: clamp(104px, 14vw, 128px);
    display: grid;
    grid-template-columns: var(--host-source-gutter-width) minmax(0, 1fr);
    align-items: stretch;
    min-height: 164px;
    position: relative;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 214, 127, 0.18);
    background: rgba(16, 11, 7, 0.46);
    overflow: hidden;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.host-source-editor:focus-within {
    border-color: rgba(255, 214, 127, 0.44);
    box-shadow: 0 0 0 3px rgba(223, 169, 71, 0.16);
}

.host-source-editor.is-single-line {
    grid-template-columns: var(--host-source-gutter-width) minmax(0, 1fr);
}

.host-source-editor.is-pictionary {
    --host-source-gutter-width: clamp(76px, 10vw, 92px);
    --host-controller-qr-width: var(--ziar-host-controller-qr-width);
    border-color: rgba(243, 240, 229, 0.24);
    background: rgba(22, 30, 35, 0.52);
}

.host-source-editor.is-pictionary:focus-within {
    border-color: rgba(255, 255, 250, 0.46);
    box-shadow: 0 0 0 3px rgba(244, 241, 229, 0.14);
}

.host-source-gutter-shell {
    overflow: hidden;
    user-select: none;
    background: rgba(8, 6, 4, 0.38);
    border-right: 1px solid rgba(255, 214, 127, 0.12);
}

.host-source-editor.is-pictionary .host-source-gutter-shell {
    background: rgba(20, 28, 33, 0.48);
    border-right-color: rgba(243, 240, 229, 0.14);
}

.host-source-gutter {
    padding: 14px 10px 14px 14px;
    will-change: transform;
}

.host-source-gutter-row {
    height: var(--host-source-row-height);
    min-height: var(--host-source-row-height);
    line-height: var(--host-source-line-height);
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #fff0c8;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
}

.host-source-editor.is-pictionary .host-source-gutter-row {
    color: #edf1ec;
}

.host-source-level-label,
.host-source-level-count {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.host-source-level-label {
    flex: 0 0 auto;
}

.host-source-level-count {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 24px;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(31, 23, 15, 0.94);
    border: 1px solid rgba(214, 170, 103, 0.24);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
    color: #f3feff;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
}

.host-source-editor.is-pictionary .host-source-level-count {
    background: rgba(25, 33, 38, 0.94);
    border-color: rgba(243, 240, 229, 0.24);
    color: #fffdf3;
}

.host-source-gutter-row.is-empty {
    visibility: hidden;
}

.host-source-editor textarea {
    display: block;
    min-height: 164px;
    margin: 0;
    padding: 14px 68px 14px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    line-height: var(--host-source-line-height);
    resize: vertical;
    overflow-x: hidden;
    overflow-wrap: anywhere;
    outline: none;
    box-shadow: none;
}

.host-source-editor.is-pictionary textarea {
    color: #fffdf3;
    padding-right: calc(var(--host-controller-qr-width) + 86px);
}

.host-source-import-button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 226, 162, 0.32);
    background: linear-gradient(180deg, rgba(27, 39, 43, 0.96), rgba(8, 15, 18, 0.96)), rgba(5, 18, 29, 0.92);
    color: #fff1c6;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 12px 22px rgba(0, 0, 0, 0.24);
    transition:
        transform 140ms ease,
        border-color 140ms ease,
        background 140ms ease,
        box-shadow 140ms ease;
}

.host-source-editor.is-pictionary .host-source-import-button {
    right: calc(var(--host-controller-qr-width) + 18px);
}

.host-source-import-button:hover,
.host-source-import-button:focus-visible {
    border-color: rgba(255, 238, 190, 0.68);
    background: linear-gradient(180deg, rgba(47, 57, 55, 0.98), rgba(15, 22, 20, 0.98)), rgba(24, 34, 30, 0.96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 0 3px rgba(223, 169, 71, 0.18),
        0 14px 24px rgba(0, 0, 0, 0.28);
}

.host-source-import-button:active {
    transform: translateY(1px) scale(0.98);
}

.host-vault-tool-rail {
    position: relative;
    top: auto;
    right: auto;
    grid-column: 1 / -1;
    grid-row: 1;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--host-vault-tool-padding-block, 12px) 12px;
    border-bottom: 1px solid rgba(190, 171, 255, 0.18);
    background: linear-gradient(180deg, rgba(32, 25, 43, 0.96), rgba(15, 11, 21, 0.94));
}

.host-vault-tool-rail .host-source-import-button,
.host-vault-tool-rail .host-vault-fog-button {
    position: static;
    inset: auto;
    width: var(--host-vault-tool-button-size, 40px);
    min-width: var(--host-vault-tool-button-size, 40px);
    height: var(--host-vault-tool-button-size, 40px);
    min-height: var(--host-vault-tool-button-size, 40px);
}

.host-source-translation-control {
    position: relative;
    z-index: 9;
    flex: 0 0 auto;
}

.host-source-translate-button {
    display: inline-grid;
    place-items: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 999px;
    border-color: rgba(169, 135, 255, 0.34);
    background: linear-gradient(180deg, rgba(42, 34, 55, 0.98), rgba(15, 11, 21, 0.98)), rgba(18, 13, 24, 0.96);
    color: #f5efff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 10px 20px rgba(0, 0, 0, 0.22);
}

.host-vault-tool-rail .host-source-translate-button {
    width: var(--host-vault-tool-button-size, 40px);
    min-width: var(--host-vault-tool-button-size, 40px);
    height: var(--host-vault-tool-button-size, 40px);
    min-height: var(--host-vault-tool-button-size, 40px);
}

.host-source-translate-button:hover,
.host-source-translate-button:focus-visible,
.host-source-translation-control.is-open .host-source-translate-button {
    border-color: rgba(222, 210, 255, 0.62);
    background: linear-gradient(180deg, rgba(63, 51, 80, 0.98), rgba(24, 17, 32, 0.98)), rgba(28, 20, 37, 0.96);
    color: #fff9de;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 0 3px rgba(169, 135, 255, 0.16),
        0 12px 22px rgba(0, 0, 0, 0.26);
}

.host-source-editor.is-pictionary-grid .host-source-translate-button {
    border-color: rgba(40, 48, 54, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 250, 0.98), rgba(226, 225, 217, 0.94)), rgba(240, 238, 230, 0.92);
    color: #334047;
}

.host-source-editor.is-pictionary-grid .host-source-translate-button:hover,
.host-source-editor.is-pictionary-grid .host-source-translate-button:focus-visible,
.host-source-editor.is-pictionary-grid .host-source-translation-control.is-open .host-source-translate-button {
    border-color: rgba(61, 74, 81, 0.38);
    background: linear-gradient(180deg, #fffef8, rgba(234, 232, 223, 0.98));
    color: #202a30;
    box-shadow:
        0 0 0 3px rgba(56, 68, 75, 0.1),
        0 12px 22px rgba(0, 0, 0, 0.18);
}

.host-source-translate-button:disabled {
    cursor: wait;
    opacity: 0.58;
}

.host-source-translate-button:not(.is-loading):disabled {
    cursor: not-allowed;
}

.host-source-translate-icon {
    width: 22px;
    height: 22px;
}

.host-source-translate-button.is-loading .host-source-translate-icon {
    opacity: 0.66;
}

.host-source-translation-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 12;
    display: grid;
    gap: 6px;
    width: min(248px, calc(100vw - 24px));
    padding: 8px;
    border: 1px solid rgba(199, 181, 255, 0.3);
    border-radius: 17px;
    background: linear-gradient(180deg, rgba(38, 30, 49, 0.99), rgba(14, 10, 20, 0.99)), #130e1b;
    color: #f8f3ff;
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

.host-source-editor.is-pictionary-grid .host-source-translation-menu {
    border-color: rgba(40, 48, 54, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 250, 0.995), rgba(229, 228, 219, 0.995)), #eeece4;
    color: #243038;
    box-shadow:
        0 18px 34px rgba(20, 27, 31, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.44);
}

.host-source-translation-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 42px;
    padding: 8px 10px 8px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 850;
    text-align: left;
}

.host-source-translation-option > span {
    color: inherit;
    font-size: inherit;
}

.host-source-translation-option small {
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(205, 188, 255, 0.14);
    color: #e5dbff;
    font-size: 0.72rem;
    font-weight: 900;
}

.host-source-translation-option:hover,
.host-source-translation-option:focus-visible {
    border-color: rgba(207, 190, 255, 0.28);
    background: rgba(196, 174, 255, 0.11);
}

.host-source-editor.is-pictionary-grid .host-source-translation-option small {
    background: rgba(43, 53, 59, 0.1);
    color: #46545c;
}

.host-source-editor.is-pictionary-grid .host-source-translation-option {
    color: #243038;
}

.host-source-editor.is-pictionary-grid .host-source-translation-option:hover,
.host-source-editor.is-pictionary-grid .host-source-translation-option:focus-visible {
    border-color: rgba(40, 48, 54, 0.18);
    background: rgba(38, 48, 55, 0.08);
}

.host-source-translation-option:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.host-source-translation-status,
.host-source-translation-error {
    margin: 2px 4px 1px;
    color: rgba(237, 229, 255, 0.76);
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.35;
}

.host-source-translation-error {
    color: #ffd3ca;
}

.host-source-editor.is-pictionary-grid .host-source-translation-status {
    color: #66737a;
}

.host-source-editor.is-pictionary-grid .host-source-translation-error {
    color: #934232;
}

.host-vault-fog-button {
    display: grid;
    place-items: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 999px;
    border-color: rgba(169, 135, 255, 0.32);
    background: linear-gradient(180deg, rgba(27, 39, 43, 0.96), rgba(8, 15, 18, 0.96)), rgba(5, 18, 29, 0.92);
    color: #f5f1ff;
}

.host-vault-fog-button:hover,
.host-vault-fog-button:focus-visible,
.host-vault-fog-button.is-active {
    border-color: rgba(222, 210, 255, 0.54);
    background: linear-gradient(180deg, rgba(47, 40, 61, 0.98), rgba(17, 13, 24, 0.98)), rgba(24, 18, 31, 0.96);
    color: #fff8d7;
}

.host-vault-fog-icon {
    width: 21px;
    height: 21px;
}

.host-source-import-menu {
    position: absolute;
    top: 58px;
    right: 10px;
    z-index: 8;
    width: min(260px, calc(100% - 20px));
    padding: 8px;
    border-radius: 18px;
    border: 1px solid rgba(255, 226, 162, 0.28);
    background: linear-gradient(180deg, rgba(25, 38, 43, 0.98), rgba(6, 16, 21, 0.98)), rgba(5, 18, 29, 0.98);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    display: grid;
    gap: 6px;
}

.host-source-editor.is-pictionary-grid .host-source-import-menu {
    top: 58px;
    right: var(--host-pictionary-controller-panel-reserve);
    border-color: rgba(40, 48, 54, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 250, 0.98), rgba(226, 225, 217, 0.98)), rgba(240, 238, 230, 0.98);
    color: #243038;
}

.host-source-import-option {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 13px;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    display: grid;
    gap: 2px;
    text-align: left;
    font: inherit;
    font-weight: 800;
}

.host-source-import-option small {
    color: var(--text-soft);
    font-size: 0.75rem;
    font-weight: 700;
}

.host-source-editor.is-pictionary-grid .host-source-import-option small {
    color: #68757c;
}

.host-source-import-option:hover,
.host-source-import-option:focus-visible {
    border-color: rgba(255, 226, 162, 0.24);
    background: rgba(255, 226, 162, 0.1);
}

.host-source-editor.is-pictionary-grid .host-source-import-option:hover,
.host-source-editor.is-pictionary-grid .host-source-import-option:focus-visible {
    border-color: rgba(40, 48, 54, 0.18);
    background: rgba(38, 48, 55, 0.08);
}

.host-source-import-button svg {
    width: 23px;
    height: 23px;
    overflow: visible;
}

.host-source-import-file {
    fill: rgba(255, 244, 218, 0.12);
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.host-source-import-fold,
.host-source-import-arrow {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.host-source-editor textarea:focus {
    border-color: transparent;
    box-shadow: none;
}

.host-stem-field {
    max-width: 34rem;
}

.host-stem-field input {
    font-size: 1rem;
}

.host-controller-qr-panel {
    position: relative;
    z-index: auto;
    color: inherit;
    text-align: left;
    transition:
        transform 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease;
}

.host-controller-qr-panel:hover,
.host-controller-qr-panel:focus-visible {
    border-color: rgba(255, 255, 250, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 3px rgba(244, 241, 229, 0.14),
        0 16px 30px rgba(0, 0, 0, 0.28);
}

.host-controller-qr-panel.is-connected {
    border-color: rgba(152, 255, 211, 0.36);
}

.host-controller-qr-copy {
    display: grid;
    gap: 4px;
}

.host-controller-qr-status {
    color: #fffdf3;
    font-size: 0.82rem;
    line-height: 1.35;
}

.room-qr-frame.host-controller-qr-frame {
    width: 100%;
    padding: 10px;
    border-radius: var(--ziar-qr-controller-frame-radius);
    box-shadow:
        inset 0 0 0 1px rgba(9, 20, 30, 0.06),
        0 12px 24px rgba(0, 0, 0, 0.18);
}

.room-qr-frame.host-controller-qr-frame .room-qr-placeholder {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
}

.pictionary-controller-status {
    max-width: 34rem;
}

.host-pictionary-toggle-row .toggle-field {
    background: rgba(24, 33, 38, 0.56);
    border-color: rgba(243, 240, 229, 0.2);
    color: #edf1ec;
}

.host-pictionary-toggle-row .toggle-field input {
    accent-color: #46545b;
}

.host-source-editor.is-pictionary-grid {
    --host-pictionary-grid-columns: minmax(0, 0.92fr) minmax(0, 0.86fr) minmax(0, 1.72fr);
    --host-pictionary-entry-number-size: 17px;
    --host-pictionary-pad-line-height: 32px;
    --host-pictionary-pad-rule-color: rgba(56, 65, 70, 0.22);
    --host-pictionary-pad-top: 8px;
    --host-pictionary-pad-inline: 16px;
    --host-pictionary-pad-bottom: 16px;
    --host-pictionary-controller-panel-width: calc(var(--ziar-host-controller-qr-width) + 2px);
    --host-pictionary-controller-panel-reserve: calc(var(--host-pictionary-controller-panel-width) + 22px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    min-height: clamp(340px, 48vh, 620px);
    min-height: clamp(340px, 48svh, 620px);
    border-color: rgba(243, 240, 229, 0.26);
    background: rgba(23, 32, 38, 0.52);
}

.host-mode-inline-panel.is-pictionary .host-source-editor.is-pictionary-grid {
    height: 100%;
    max-height: 100%;
}

.host-source-editor.is-pictionary-grid.is-no-translations {
    --host-pictionary-grid-columns: minmax(0, 0.9fr) minmax(0, 1.7fr);
}

.host-source-editor.is-pictionary-grid.is-no-hints {
    --host-pictionary-grid-columns: minmax(0, 0.95fr) minmax(0, 0.9fr);
}

.host-source-editor.is-pictionary-grid.is-no-translations.is-no-hints {
    --host-pictionary-grid-columns: minmax(0, 1fr);
}

.host-source-editor.is-pictionary-grid:focus-within {
    border-color: rgba(255, 255, 250, 0.46);
    box-shadow: 0 0 0 3px rgba(244, 241, 229, 0.14);
}

.host-pictionary-editor-shell {
    width: 100%;
    min-width: 0;
    display: grid;
    min-height: inherit;
    height: 100%;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    border-radius: calc(var(--radius-md) - 2px);
    background: rgba(245, 244, 236, 0.1);
}

.host-pictionary-pad-shell {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, rgba(247, 246, 240, 0.96), rgba(226, 225, 217, 0.94)), rgba(239, 238, 230, 0.94);
    border-bottom: 1px solid rgba(40, 48, 54, 0.14);
}

.host-pictionary-pad-toolbar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 0;
}

.host-source-editor.is-pictionary-grid .host-pictionary-pad-toolbar {
    padding-right: var(--host-pictionary-controller-panel-reserve);
}

.host-pictionary-upload-button {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 999px;
    border-color: rgba(40, 48, 54, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 250, 0.98), rgba(226, 225, 217, 0.94)), rgba(240, 238, 230, 0.92);
    color: #243038;
    box-shadow:
        0 12px 22px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.host-pictionary-upload-button:hover,
.host-pictionary-upload-button:focus-visible {
    border-color: rgba(38, 48, 55, 0.34);
    background: linear-gradient(180deg, rgba(255, 255, 250, 1), rgba(235, 234, 226, 0.98)), rgba(244, 242, 234, 0.96);
}

.host-pictionary-upload-button svg {
    width: 22px;
    height: 22px;
    overflow: visible;
}

.host-pictionary-fog-button {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 999px;
    border-color: rgba(40, 48, 54, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 250, 0.92), rgba(226, 225, 217, 0.86)), rgba(240, 238, 230, 0.88);
    color: #334047;
}

.host-pictionary-fog-button:hover,
.host-pictionary-fog-button:focus-visible,
.host-pictionary-fog-button.is-active {
    border-color: rgba(67, 82, 90, 0.34);
    background: linear-gradient(180deg, rgba(72, 86, 94, 0.95), rgba(38, 49, 56, 0.96)), rgba(46, 58, 65, 0.94);
    color: #f3f0e5;
}

.host-pictionary-fog-icon {
    width: 21px;
    height: 21px;
}

.host-pictionary-editor-mode-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(58px, 1fr));
    align-items: center;
    min-width: min(160px, 100%);
    padding: 3px;
    border-radius: 999px;
    border: 1px solid rgba(43, 52, 58, 0.14);
    background: rgba(62, 70, 73, 0.12);
    box-shadow: inset 0 1px 1px rgba(15, 22, 26, 0.08);
}

.host-pictionary-editor-mode-button {
    min-width: 0;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(39, 48, 54, 0.72);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}

.host-pictionary-editor-mode-button.is-selected {
    background: linear-gradient(180deg, rgba(255, 255, 250, 0.96), rgba(224, 222, 214, 0.92)), rgba(244, 242, 234, 0.96);
    color: #20292f;
    box-shadow:
        0 6px 12px rgba(20, 28, 32, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.host-pictionary-editor-mode-button:hover,
.host-pictionary-editor-mode-button:focus-visible {
    color: #20292f;
}

.host-pictionary-source-pad-shell {
    position: relative;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.host-pictionary-source-pad-shell,
.host-pictionary-table-shell {
    transition:
        filter 160ms ease,
        opacity 160ms ease;
}

.host-source-editor.is-source-fogged .host-pictionary-source-pad-shell,
.host-source-editor.is-source-fogged .host-pictionary-table-shell {
    filter: blur(7px);
    opacity: 0.58;
    pointer-events: none;
    user-select: none;
}

.host-source-fog-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: scale(0.985);
    transition:
        opacity 160ms ease,
        transform 160ms ease,
        visibility 0s linear 160ms;
}

.host-source-fog-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255, 255, 250, 0.1), transparent 64%);
    opacity: 0.76;
}

.host-source-fog-overlay > * {
    position: relative;
    z-index: 1;
}

.host-source-editor.is-source-fogged > .host-source-fog-overlay {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    transition-delay: 0s;
}

.host-source-fog-overlay--pictionary {
    inset: 72px calc(var(--host-pictionary-controller-panel-reserve) + 16px) 18px 18px;
}

.host-pictionary-fog-sheet {
    position: relative;
    display: grid;
    grid-template-columns: minmax(70px, 0.72fr) minmax(0, 1fr);
    grid-template-rows: minmax(68px, 0.8fr) minmax(72px, 0.75fr);
    gap: 12px;
    width: min(420px, 92%);
    min-height: min(260px, 92%);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(58, 68, 75, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 255, 250, 0.98), rgba(232, 230, 220, 0.94)),
        repeating-linear-gradient(180deg, transparent 0 31px, rgba(68, 78, 84, 0.08) 31px 32px);
    box-shadow:
        0 22px 44px rgba(20, 28, 32, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.44);
    transform: rotate(-1deg);
}

.host-pictionary-fog-tab {
    position: absolute;
    top: -13px;
    left: 22px;
    width: 34%;
    height: 24px;
    border-radius: 12px 12px 3px 3px;
    border: 1px solid rgba(58, 68, 75, 0.16);
    border-bottom: 0;
    background: linear-gradient(180deg, rgba(242, 219, 158, 0.98), rgba(220, 184, 104, 0.92));
    box-shadow: 0 -5px 14px rgba(20, 28, 32, 0.08);
}

.host-pictionary-fog-mark {
    position: absolute;
    top: 15px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(58, 68, 75, 0.18);
    background: rgba(255, 255, 250, 0.64);
    color: rgba(38, 48, 55, 0.74);
    box-shadow: 0 8px 18px rgba(20, 28, 32, 0.1);
}

.host-pictionary-fog-mark-icon {
    width: 22px;
    height: 22px;
}

.host-pictionary-fog-photo {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    border-radius: 12px;
    border: 1px solid rgba(58, 68, 75, 0.15);
    background:
        linear-gradient(135deg, transparent 44%, rgba(58, 68, 75, 0.1) 44% 46%, transparent 46%),
        linear-gradient(45deg, transparent 50%, rgba(58, 68, 75, 0.08) 50% 52%, transparent 52%),
        rgba(58, 68, 75, 0.06);
}

.host-pictionary-fog-lines {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    min-width: 0;
    margin-right: 40px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, rgba(58, 68, 75, 0.24), rgba(58, 68, 75, 0.24)) 0 11px / 72% 5px no-repeat,
        linear-gradient(90deg, rgba(58, 68, 75, 0.18), rgba(58, 68, 75, 0.18)) 0 35px / 94% 4px no-repeat,
        linear-gradient(90deg, rgba(58, 68, 75, 0.14), rgba(58, 68, 75, 0.14)) 0 59px / 64% 4px no-repeat;
}

.host-pictionary-fog-clue-grid {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    min-width: 0;
}

.host-pictionary-fog-clue-grid span {
    min-height: 26px;
    border-radius: 7px;
    border: 1px solid rgba(58, 68, 75, 0.12);
    background: rgba(58, 68, 75, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.host-source-editor.is-pictionary-grid .host-pictionary-source-pad {
    --host-pictionary-pad-line-height: 32px;
    --host-pictionary-pad-rule-color: rgba(56, 65, 70, 0.22);
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: var(--host-pictionary-pad-top) var(--host-pictionary-pad-inline) var(--host-pictionary-pad-bottom);
    border: 0;
    resize: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 250, 0.34), rgba(255, 255, 255, 0.02)),
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent calc(var(--host-pictionary-pad-line-height) - 1px),
            var(--host-pictionary-pad-rule-color) calc(var(--host-pictionary-pad-line-height) - 1px),
            var(--host-pictionary-pad-rule-color) var(--host-pictionary-pad-line-height)
        );
    background-attachment: local, local;
    background-position:
        0 0,
        0 var(--host-pictionary-pad-top);
    background-size:
        auto,
        100% var(--host-pictionary-pad-line-height);
    color: #20292f;
    font-family: "Cascadia Code", "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.97rem;
    line-height: var(--host-pictionary-pad-line-height);
    box-shadow: none;
    outline: none;
}

.host-source-editor.is-pictionary-grid .host-pictionary-source-pad {
    padding-left: var(--host-pictionary-pad-inline);
    padding-right: calc(var(--host-pictionary-pad-inline) + 42px);
}

.host-source-editor.is-pictionary-grid textarea.host-pictionary-source-pad {
    color: #20292f;
}

.host-pictionary-source-gutter {
    position: absolute;
    top: var(--host-pictionary-pad-top);
    bottom: var(--host-pictionary-pad-bottom);
    left: var(--host-pictionary-pad-inline);
    z-index: 2;
    width: 0;
    display: grid;
    align-content: start;
    overflow: visible;
    pointer-events: none;
    will-change: transform;
}

.host-pictionary-source-gutter-row {
    position: relative;
    display: grid;
    align-items: start;
    justify-items: start;
    height: var(--host-pictionary-pad-line-height);
    min-height: var(--host-pictionary-pad-line-height);
    box-sizing: border-box;
}

.host-pictionary-source-pad::placeholder {
    color: rgba(55, 66, 73, 0.52);
}

.host-source-editor.is-pictionary-grid .host-pictionary-source-pad:focus {
    background:
        linear-gradient(180deg, rgba(255, 255, 250, 0.38), rgba(255, 255, 255, 0.04)),
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent calc(var(--host-pictionary-pad-line-height) - 1px),
            var(--host-pictionary-pad-rule-color) calc(var(--host-pictionary-pad-line-height) - 1px),
            var(--host-pictionary-pad-rule-color) var(--host-pictionary-pad-line-height)
        );
    background-attachment: local, local;
    background-position:
        0 0,
        0 var(--host-pictionary-pad-top);
    background-size:
        auto,
        100% var(--host-pictionary-pad-line-height);
}

.host-pictionary-preview-shell {
    --host-pictionary-grid-head-bg: rgba(229, 228, 220, 0.94);
    --host-pictionary-grid-row-bg: rgba(248, 247, 241, 0.92);
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    max-height: none;
    overflow: auto;
    scrollbar-gutter: stable;
    box-sizing: border-box;
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, var(--host-pictionary-grid-head-bg) 0 55px, var(--host-pictionary-grid-row-bg) 55px 100%);
}

.host-pictionary-table-shell {
    border-top: 1px solid rgba(38, 48, 55, 0.12);
}

.host-pictionary-grid-head {
    display: grid;
    grid-template-columns: var(--host-pictionary-grid-columns);
    align-items: center;
    min-height: 54px;
    background: var(--host-pictionary-grid-head-bg);
    border-bottom: 1px solid rgba(38, 48, 55, 0.12);
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
}

.host-pictionary-grid-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    min-width: 0;
    padding: 0 8px;
    color: #354148;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
    border-right: 1px solid rgba(38, 48, 55, 0.12);
    box-sizing: border-box;
}

.host-source-editor.is-pictionary-grid .host-pictionary-grid-label {
    color: #354148;
}

.host-pictionary-grid-head .host-pictionary-grid-label:last-of-type {
    border-right: 0;
}

.host-pictionary-grid {
    display: grid;
    align-content: start;
    min-height: 100%;
    max-height: none;
    overflow: visible;
    background: var(--host-pictionary-grid-row-bg);
}

.host-pictionary-preview-row {
    display: grid;
    grid-template-columns: var(--host-pictionary-grid-columns);
    min-height: 58px;
    background: var(--host-pictionary-grid-row-bg);
    width: 100%;
    box-sizing: border-box;
}

.host-pictionary-preview-row + .host-pictionary-preview-row {
    border-top: 1px solid rgba(38, 48, 55, 0.08);
}

.host-pictionary-preview-cell {
    min-width: 0;
    min-height: 58px;
    padding: 14px 16px;
    border-right: 1px solid rgba(38, 48, 55, 0.12);
    color: #20292f;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
    box-sizing: border-box;
}

.host-source-editor.is-pictionary-grid .host-pictionary-preview-cell {
    color: #20292f;
}

.host-pictionary-preview-word {
    position: relative;
    display: block;
    overflow: visible;
}

.host-pictionary-preview-word-text {
    display: block;
    min-width: 0;
}

.host-source-editor.is-pictionary-grid .host-pictionary-entry-number {
    position: absolute;
    top: 7px;
    left: 0;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: var(--host-pictionary-entry-number-size);
    min-width: var(--host-pictionary-entry-number-size);
    height: var(--host-pictionary-entry-number-size);
    border-radius: 999px;
    border: 1px solid rgba(92, 78, 52, 0.28);
    border-right-color: rgba(92, 78, 52, 0.08);
    border-bottom-color: rgba(92, 78, 52, 0.08);
    background: linear-gradient(180deg, rgba(255, 250, 235, 0.86), rgba(230, 223, 207, 0.72)), rgba(246, 239, 224, 0.78);
    color: rgba(73, 60, 38, 0.84);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 5px 12px rgba(20, 28, 32, 0.08);
    transform: translate(-12%, -38%);
    pointer-events: none;
    font-size: 0.58rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-shadow: none;
}

.host-source-editor.is-pictionary-grid .host-pictionary-entry-number::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    width: calc(100% + 5px);
    height: calc(100% + 5px);
    border-top: 1px solid rgba(92, 78, 52, 0.13);
    border-left: 1px solid rgba(92, 78, 52, 0.13);
    border-radius: 11px 0 0 0;
    pointer-events: none;
}

.host-source-editor.is-pictionary-grid .host-pictionary-source-number {
    transform: translate(-108%, -38%);
}

.host-pictionary-preview-row .host-pictionary-preview-cell:last-child {
    border-right: 0;
}

.host-pictionary-table-cell {
    display: block;
    font-size: 0;
    line-height: 0;
    padding: 0;
}

.host-pictionary-table-cell.host-pictionary-preview-word {
    display: block;
}

.host-source-editor.is-pictionary-grid .host-pictionary-table-input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 58px;
    height: 100%;
    padding: 14px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #20292f;
    -webkit-text-fill-color: #20292f;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    outline: none;
    box-shadow: none;
}

.host-source-editor.is-pictionary-grid .host-pictionary-table-input:focus {
    background: linear-gradient(180deg, rgba(255, 255, 250, 0.48), rgba(255, 255, 255, 0.12)), rgba(255, 255, 250, 0.34);
    box-shadow: inset 0 0 0 2px rgba(54, 66, 73, 0.32);
}

.host-source-editor.is-vault-grid.is-vault-table-mode {
    --host-pictionary-grid-columns:
        minmax(96px, 0.86fr)
        minmax(64px, 0.42fr)
        minmax(160px, 1.72fr)
        minmax(104px, 0.84fr)
        minmax(116px, 0.96fr);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    min-height: clamp(320px, 55svh, 640px);
    height: 100%;
    overflow: hidden;
}

.host-source-editor.is-vault-grid.is-vault-table-mode .host-vault-tool-rail {
    position: relative;
}

.host-source-editor.is-vault-grid.is-vault-table-mode .host-vault-tool-rail .host-source-import-button,
.host-source-editor.is-vault-grid.is-vault-table-mode .host-vault-tool-rail .host-vault-fog-button {
    width: var(--host-vault-tool-button-size);
    min-width: var(--host-vault-tool-button-size);
    height: var(--host-vault-tool-button-size);
    min-height: var(--host-vault-tool-button-size);
}

.host-vault-editor-mode-switch {
    min-width: min(160px, 100%);
    border-color: rgba(190, 171, 255, 0.18);
    background: rgba(245, 241, 255, 0.08);
}

.host-vault-editor-mode-button {
    color: rgba(245, 241, 255, 0.78);
}

.host-vault-editor-mode-button.is-selected {
    background: linear-gradient(180deg, rgba(245, 241, 255, 0.94), rgba(204, 192, 235, 0.88));
    color: #20182c;
}

.host-vault-table-shell {
    --host-pictionary-grid-head-bg: rgba(35, 27, 48, 0.96);
    --host-pictionary-grid-row-bg: rgba(17, 13, 24, 0.96);
    grid-row: 2;
    border-top: 0;
}

.host-vault-grid-head {
    border-bottom-color: rgba(190, 171, 255, 0.2);
}

.host-vault-grid-label {
    border-right-color: rgba(190, 171, 255, 0.16);
    color: #f5f1ff;
}

.host-vault-table-row + .host-vault-table-row {
    border-top-color: rgba(190, 171, 255, 0.1);
}

.host-vault-table-cell {
    border-right-color: rgba(190, 171, 255, 0.16);
}

.host-source-editor.is-vault-grid.is-vault-table-mode .host-pictionary-entry-number {
    position: absolute;
    top: 7px;
    left: 0;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: var(--host-pictionary-entry-number-size, 17px);
    min-width: var(--host-pictionary-entry-number-size, 17px);
    height: var(--host-pictionary-entry-number-size, 17px);
    border-radius: 999px;
    border: 1px solid rgba(190, 171, 255, 0.28);
    background: linear-gradient(180deg, rgba(245, 241, 255, 0.86), rgba(190, 171, 255, 0.72));
    color: #20182c;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 5px 12px rgba(0, 0, 0, 0.14);
    transform: translate(-12%, -38%);
    pointer-events: none;
    font-size: 0.58rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.host-source-editor.is-vault-grid.is-vault-table-mode .host-pictionary-table-input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 58px;
    height: 100%;
    padding: 14px 13px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #f5f1ff;
    -webkit-text-fill-color: #f5f1ff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.32;
    text-align: left;
    outline: none;
    box-shadow: none;
}

.host-source-editor.is-vault-grid.is-vault-table-mode .host-vault-table-input[data-vault-field="value"] {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.host-source-editor.is-vault-grid.is-vault-table-mode .host-pictionary-table-input:focus {
    background: linear-gradient(180deg, rgba(245, 241, 255, 0.14), rgba(255, 255, 255, 0.04)), rgba(190, 171, 255, 0.08);
    box-shadow: inset 0 0 0 2px rgba(190, 171, 255, 0.42);
}

.host-source-editor.is-vault-grid.is-vault-table-mode.is-source-fogged .host-vault-table-shell {
    filter: blur(7px);
    opacity: 0.58;
    pointer-events: none;
    user-select: none;
}

.host-pictionary-preview-empty {
    min-height: 100%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0)),
        repeating-linear-gradient(180deg, rgba(68, 78, 84, 0.08) 0, rgba(68, 78, 84, 0.08) 1px, transparent 1px, transparent 58px);
}

.host-pictionary-preview-row.is-shared-stem .host-pictionary-preview-stem {
    background: rgba(42, 52, 58, 0.04);
}

.host-pictionary-preview-stem.is-shared-preview {
    color: rgba(58, 68, 75, 0.72);
    font-style: italic;
}

.host-controller-access-panel {
    display: grid;
    gap: 0;
}

.host-source-editor.is-pictionary-grid .host-pictionary-pad-shell .host-controller-access-panel {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: min(var(--host-pictionary-controller-panel-width), calc(100% - 28px));
    gap: 8px;
}

.host-source-editor.is-pictionary-table-mode .host-pictionary-pad-shell {
    grid-template-rows: auto minmax(0, 1fr);
}

.host-source-editor.is-pictionary-table-mode .host-pictionary-pad-toolbar {
    padding-right: 16px;
}

.host-source-editor.is-pictionary-table-mode .host-pictionary-pad-shell .host-controller-access-panel {
    position: absolute;
    top: 62px;
    right: 14px;
    z-index: 4;
    width: min(var(--host-pictionary-controller-panel-width), calc(100% - 28px));
    margin: 0;
    opacity: 0.68;
    transition:
        opacity 140ms ease,
        transform 140ms ease;
}

.host-source-editor.is-pictionary-table-mode .host-pictionary-pad-shell .host-controller-access-panel.is-external-claimed {
    top: 7px;
}

.host-source-editor.is-pictionary-table-mode .host-pictionary-grid-head {
    padding-right: 0;
}

.host-source-editor.is-pictionary-table-mode:focus-within
    .host-pictionary-pad-shell
    .host-controller-access-panel:not(:hover):not(:focus-within) {
    opacity: 0.46;
}

.host-source-editor.is-pictionary-table-mode .host-pictionary-pad-shell .host-controller-access-panel:hover,
.host-source-editor.is-pictionary-table-mode .host-pictionary-pad-shell .host-controller-access-panel:focus-within {
    opacity: 0.86;
}

.host-source-editor.is-pictionary-table-mode .host-pictionary-table-shell {
    grid-row: 2;
    padding-right: var(--host-pictionary-controller-panel-reserve);
}

.host-source-editor.is-pictionary-table-mode .host-controller-qr-panel {
    min-height: 44px;
    padding: 9px 10px 8px;
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 250, 0.1), transparent 28%),
        linear-gradient(180deg, rgba(43, 52, 56, 0.72), rgba(22, 30, 35, 0.84)), rgba(22, 30, 35, 0.66);
}

.host-source-editor.is-pictionary-table-mode .room-qr-frame.host-controller-qr-frame {
    display: grid;
}

.host-source-editor.is-pictionary-table-mode .host-controller-qr-panel::after {
    content: none;
    display: none;
}

.host-source-editor.is-pictionary-table-mode .host-pictionary-device-controller-field {
    min-height: 44px;
    padding: 8px 10px 9px;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(180deg, rgba(43, 52, 56, 0.68), rgba(22, 30, 35, 0.82)), rgba(22, 30, 35, 0.64);
}

.host-controller-access-panel.is-claimed {
    gap: 8px;
}

.host-controller-qr-panel {
    width: 100%;
    min-height: 0;
    padding: 10px 10px 8px;
    border-radius: 18px 18px 0 0;
    border: 1px solid rgba(243, 240, 229, 0.24);
    background: linear-gradient(180deg, rgba(246, 245, 238, 0.94), rgba(214, 216, 210, 0.9)), rgba(234, 233, 225, 0.86);
    color: #20292f;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.host-source-editor.is-pictionary-grid .host-controller-qr-panel {
    padding: 10px 10px 8px;
    border-color: rgba(243, 240, 229, 0.18);
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 250, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(43, 52, 56, 0.94), rgba(22, 30, 35, 0.98)), rgba(22, 30, 35, 0.94);
    color: #fffdf3;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: 8px;
}

.host-controller-qr-panel.is-collapsed {
    padding: 8px 8px 8px 10px;
}

.host-source-editor.is-pictionary-grid .host-controller-qr-panel.is-collapsed {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 7px 8px 7px 10px;
    border-radius: 16px 16px 0 0;
}

.host-controller-qr-copy {
    width: 100%;
    display: grid;
    gap: 4px;
}

.host-source-editor.is-pictionary-grid .host-controller-qr-copy {
    justify-items: center;
    text-align: center;
}

.host-source-editor.is-pictionary-grid .host-controller-qr-panel.is-collapsed .host-controller-qr-copy {
    justify-items: start;
    text-align: left;
}

.host-source-editor.is-pictionary-grid .host-controller-qr-panel.is-collapsed .host-controller-qr-label {
    font-size: 0.66rem;
    letter-spacing: 0.06em;
}

.host-controller-qr-label {
    color: #34434b;
    white-space: nowrap;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    line-height: 1.1;
    text-transform: uppercase;
}

.host-source-editor.is-pictionary-grid .host-controller-qr-label {
    color: #edf1ed;
}

.host-controller-qr-status {
    color: #263139;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
}

.host-source-editor.is-pictionary-grid .host-controller-qr-status {
    color: #fffdf3;
}

.room-qr-frame.host-controller-qr-frame {
    width: min(100%, 120px);
    max-width: none;
    padding: 8px;
}

.host-source-editor.is-pictionary-grid .room-qr-frame.host-controller-qr-frame {
    width: min(104px, 100%);
    justify-self: center;
}

.host-controller-qr-expand-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 12px;
    border: 1px solid rgba(243, 240, 229, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 250, 0.12), rgba(255, 255, 250, 0.04)), rgba(14, 21, 26, 0.88);
    color: #fffdf3;
    position: relative;
}

.host-controller-qr-expand-svg {
    display: block;
    width: 22px;
    height: 22px;
}

.host-controller-qr-expand-icon::before {
    content: none;
}

.host-controller-qr-expand-icon::after {
    content: none;
}

.host-pictionary-device-controller-field {
    min-height: 0;
    padding: 8px 10px 9px;
    border-radius: 0 0 18px 18px;
    border-color: rgba(243, 240, 229, 0.18);
    border-top-color: rgba(243, 240, 229, 0.1);
    background: linear-gradient(180deg, rgba(43, 52, 56, 0.9), rgba(22, 30, 35, 0.94)), rgba(22, 30, 35, 0.9);
    color: #fffdf3;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.host-source-editor.is-pictionary-grid .host-pictionary-device-controller-field {
    width: 100%;
    min-height: 0;
    padding: 8px 9px;
    background: linear-gradient(180deg, rgba(43, 52, 56, 0.88), rgba(22, 30, 35, 0.94)), rgba(22, 30, 35, 0.88);
}

.host-controller-access-panel.is-external-claimed {
    gap: 0;
}

.host-controller-access-panel.is-external-claimed .host-pictionary-device-controller-field {
    display: none;
}

.host-source-editor.is-pictionary-grid .host-controller-access-panel.is-external-claimed .host-controller-qr-panel {
    border-radius: 16px;
}

.host-pictionary-device-controller-field input {
    accent-color: #46545b;
}

.host-pictionary-device-controller-label {
    color: #edf1ed;
    min-width: 0;
    line-height: 1.35;
}

.qr-preview-panel {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(calc(100vw - 48px), var(--ziar-qr-preview-panel-max-width));
    max-height: calc(100vh - 48px);
    max-height: calc(100svh - 48px);
    border: 0;
    background: none;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "qr"
        "code"
        "close";
    align-items: center;
    justify-content: center;
    justify-items: center;
    gap: clamp(10px, 3vh, 24px);
    gap: clamp(10px, 3svh, 24px);
}

.qr-preview-panel.has-title {
    grid-template-areas:
        "title"
        "qr"
        "code"
        "close";
}

.qr-preview-panel.has-title .qr-preview-code {
    color: #f3f0e5;
    text-shadow:
        0 0 24px rgba(243, 240, 229, 0.16),
        0 10px 28px rgba(0, 0, 0, 0.32);
}

.room-qr-frame.qr-preview-frame {
    grid-area: qr;
    width: min(100%, var(--ziar-qr-preview-max-height), var(--ziar-qr-preview-max-width));
    border-radius: var(--ziar-qr-preview-frame-radius);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 30px 80px rgba(0, 0, 0, 0.4);
}

.room-code-display.qr-preview-code {
    grid-area: code;
    justify-self: center;
    color: #ffd46e;
    font-size: var(--ziar-qr-preview-code-font-size);
    line-height: 0.86;
    letter-spacing: 0.14em;
    text-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
    white-space: nowrap;
}

.room-code-display.qr-preview-code[data-room-code-length="5"],
.room-code-display.qr-preview-code[data-room-code-length="6"] {
    font-size: clamp(3.4rem, 8vw, 6rem);
}

.room-code-display.qr-preview-code[data-room-code-length="7"],
.room-code-display.qr-preview-code[data-room-code-length="8"] {
    font-size: clamp(2.7rem, 6vw, 4.3rem);
}

.qr-preview-close {
    grid-area: close;
    justify-self: center;
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(4, 20, 31, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.qr-preview-title {
    grid-area: title;
    justify-self: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pictionary-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 18px;
    align-items: stretch;
    min-height: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.pictionary-shell.is-host-view {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
}

.pictionary-view-root {
    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
}

.pictionary-view-root > .pictionary-shell {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.pictionary-stage-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    padding: 14px;
    overflow: hidden;
}

.pictionary-stage-head {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 18px;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(100px, auto) minmax(0, 1fr) minmax(100px, auto);
    align-items: start;
    gap: 10px;
    pointer-events: none;
}

.pictionary-head-chip-left {
    grid-column: 1;
}

.pictionary-stem-banner {
    grid-column: 2;
}

.pictionary-head-chip-right {
    grid-column: 3;
}

.pictionary-head-chip {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 20px;
    background: rgba(22, 31, 36, 0.86);
    border: 1px solid rgba(243, 240, 229, 0.2);
    text-align: center;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.pictionary-head-label {
    color: #dce3df;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pictionary-stage-head > [hidden] {
    display: none;
}

.pictionary-round-answer-slot {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    max-width: min(100%, 560px);
    pointer-events: none;
}

.pictionary-points-value,
.pictionary-round-value {
    color: #fffdf3;
    font-size: clamp(1.3rem, 2.1vw, 1.8rem);
    line-height: 1;
}

.pictionary-stem-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 10px 18px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 16% 20%, rgba(255, 255, 250, 0.14), transparent 26%),
        linear-gradient(135deg, rgba(42, 55, 62, 0.72), rgba(22, 31, 36, 0.78));
    border: 1px solid rgba(243, 240, 229, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 26px rgba(0, 0, 0, 0.16);
    color: #fffdf3;
    font-size: calc(clamp(1.06rem, 1.52vw, 1.285rem) + 2px);
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.pictionary-canvas-shell {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 30px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        inset 0 0 0 1px rgba(18, 10, 38, 0.04),
        0 0 0 1px rgba(255, 250, 235, 0.08),
        0 24px 44px rgba(0, 0, 0, 0.24);
}

.pictionary-capy-peek {
    --pictionary-capy-size: 34px;
    --pictionary-capy-size-compact: 27px;
    position: absolute;
    z-index: 2;
    top: 34%;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    opacity: 0;
    cursor: pointer;
    touch-action: manipulation;
    transition:
        transform 340ms cubic-bezier(0.22, 0.8, 0.22, 1),
        opacity 180ms ease;
}

.pictionary-capy-peek[hidden] {
    display: none;
}

.pictionary-capy-peek[data-capy-anchor^="left"] {
    left: 0;
    transform: translate(-88%, -50%);
}

.pictionary-capy-peek[data-capy-anchor^="right"] {
    right: 0;
    transform: translate(88%, -50%);
}

.pictionary-capy-peek[data-capy-anchor$="upper"] {
    top: 31%;
}

.pictionary-capy-peek[data-capy-anchor$="middle"] {
    top: 52%;
}

.pictionary-capy-peek.is-visible,
.pictionary-capy-peek.is-startled {
    opacity: 1;
}

.pictionary-capy-peek[data-capy-anchor^="left"].is-visible,
.pictionary-capy-peek[data-capy-anchor^="left"].is-startled {
    transform: translate(-32%, -50%);
}

.pictionary-capy-peek[data-capy-anchor^="right"].is-visible,
.pictionary-capy-peek[data-capy-anchor^="right"].is-startled {
    transform: translate(32%, -50%);
}

.pictionary-capy-peek.is-retreating {
    opacity: 0;
}

.pictionary-capy-shield {
    --playground-capy-outline: 2px;
    --playground-capy-eye-size: 1.1px;
    --playground-capy-eye-highlight-size: 0.26px;
    --playground-capy-ear-outline: 1px;
    --playground-capy-nostril-size: 0.72px;
    --playground-capy-nostril-fade-size: 1px;
    --playground-capy-mouth-stroke: 1.05px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--pictionary-capy-size);
    height: var(--pictionary-capy-size);
    border-radius: calc(var(--pictionary-capy-size) * 0.3);
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0 7px hsl(var(--playground-avatar-hue) 90% 62% / 0.1),
        0 10px 16px rgba(0, 0, 0, 0.22);
}

.pictionary-capy-shield.is-paper-white {
    box-shadow:
        0 0 0 7px rgba(255, 255, 255, 0.13),
        0 0 0 1px rgba(24, 38, 45, 0.48),
        0 10px 16px rgba(0, 0, 0, 0.22);
}

.pictionary-capy-peek.is-startled .pictionary-capy-shield {
    animation: pictionary-capy-startle 520ms cubic-bezier(0.2, 0.86, 0.28, 1);
}

@keyframes pictionary-capy-startle {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    34% {
        transform: translate(-50%, -66%) scale(0.9, 1.12) rotate(-4deg);
    }

    68% {
        transform: translate(-50%, -46%) scale(1.08, 0.92) rotate(3deg);
    }
}

.pictionary-shell.is-player-view.is-guessing .pictionary-capy-peek {
    display: none;
}

@media (max-width: 640px) {
    .pictionary-capy-peek {
        width: 46px;
        height: 46px;
    }

    .pictionary-capy-shield {
        width: var(--pictionary-capy-size-compact);
        height: var(--pictionary-capy-size-compact);
        border-radius: calc(var(--pictionary-capy-size-compact) * 0.3);
        box-shadow:
            0 0 0 5px hsl(var(--playground-avatar-hue) 90% 62% / 0.1),
            0 8px 13px rgba(0, 0, 0, 0.2);
    }

    .pictionary-capy-shield.is-paper-white {
        box-shadow:
            0 0 0 5px rgba(255, 255, 255, 0.13),
            0 0 0 1px rgba(24, 38, 45, 0.48),
            0 8px 13px rgba(0, 0, 0, 0.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pictionary-capy-peek {
        transition: opacity 120ms ease;
    }

    .pictionary-capy-peek.is-startled .pictionary-capy-shield {
        animation: none;
    }
}

.pictionary-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: #ffffff;
    touch-action: none;
    cursor: default;
}

.pictionary-shell.has-drawing-bottom-crop .pictionary-canvas-shell {
    background: linear-gradient(
        180deg,
        #ffffff 0 calc(100% - var(--pictionary-drawing-bottom-crop, 0px)),
        #ffffff calc(100% - var(--pictionary-drawing-bottom-crop, 0px)) 100%
    );
}

.pictionary-shell.has-drawing-bottom-crop .pictionary-canvas-shell::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: var(--pictionary-drawing-bottom-crop, 0px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), #ffffff);
    box-shadow: inset 0 1px 0 rgba(14, 22, 28, 0.08);
    pointer-events: none;
}

.pictionary-shell.has-drawing-bottom-crop .pictionary-canvas {
    background: transparent;
}

.pictionary-canvas.is-drawable {
    cursor: crosshair;
}

.pictionary-round-timer {
    --pictionary-round-remaining: 1;
    position: relative;
    width: 100%;
    height: 7px;
    min-width: 54px;
    margin-top: 4px;
    margin-bottom: 0;
    border-radius: 999px;
    border: 1px solid rgba(243, 240, 229, 0.24);
    background: linear-gradient(90deg, rgba(244, 196, 76, 0.96) calc(var(--pictionary-round-remaining) * 100%), rgba(243, 240, 229, 0.2) 0);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 16px rgba(213, 179, 93, 0.22);
    pointer-events: none;
    transition: margin-bottom 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pictionary-round-timer.has-countdown {
    margin-bottom: clamp(50px, 6vw, 62px);
}

.pictionary-round-timer.is-grace-countdown {
    margin-bottom: clamp(58px, 6.8vw, 72px);
}

.pictionary-round-timer.has-countdown::before {
    content: attr(data-countdown);
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: calc(100% + 4px);
    display: inline-grid;
    place-items: center;
    min-width: clamp(60px, 6.2vw, 76px);
    min-height: clamp(40px, 4.5vw, 52px);
    padding: 0 15px 2px;
    transform: translateX(-50%);
    border: 1px solid rgba(243, 240, 229, 0.22);
    border-top-color: rgba(243, 240, 229, 0.08);
    border-radius: 0 0 16px 16px;
    background:
        radial-gradient(circle at 50% 18%, rgba(243, 240, 229, 0.13), transparent 58%),
        linear-gradient(180deg, rgba(55, 64, 64, 0.98), rgba(24, 33, 37, 0.97)), rgba(22, 31, 36, 0.94);
    color: #f8f3e6;
    font-size: clamp(1.72rem, 2.65vw, 2.32rem);
    font-weight: 950;
    line-height: 1;
    text-align: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 10px 20px rgba(0, 0, 0, 0.18);
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.32),
        0 0 12px rgba(243, 240, 229, 0.14);
    animation: pictionary-round-countdown-pulse-odd 1300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pictionary-round-timer.is-grace-countdown::before {
    min-width: clamp(62px, 7vw, 84px);
    min-height: clamp(48px, 5.4vw, 62px);
    padding: 0 17px 3px;
    border-color: rgba(243, 240, 229, 0.3);
    background:
        radial-gradient(circle at 50% 44%, rgba(243, 240, 229, 0.2), transparent 62%),
        linear-gradient(180deg, rgba(75, 82, 82, 0.98), rgba(36, 45, 48, 0.98)), rgba(22, 31, 36, 0.96);
    color: #fffaf0;
    font-size: clamp(2.2rem, 3.9vw, 3.18rem);
}

.pictionary-round-timer.has-countdown[data-countdown-pulse="even"]::before {
    animation-name: pictionary-round-countdown-pulse-even;
}

.pictionary-round-timer.has-countdown[data-countdown-pulse="odd"]::before {
    animation-name: pictionary-round-countdown-pulse-odd;
}

.pictionary-round-timer::after {
    content: "";
    position: absolute;
    top: 50%;
    left: clamp(3px, calc(var(--pictionary-round-remaining) * 100%), calc(100% - 3px));
    width: 6px;
    height: 14px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: #fffdf3;
    box-shadow:
        0 0 0 2px rgba(213, 179, 93, 0.18),
        0 0 14px rgba(213, 179, 93, 0.34);
}

.pictionary-round-timer.is-grace-countdown::after {
    display: none;
}

.pictionary-round-timer[hidden] {
    display: none;
}

@keyframes pictionary-round-countdown-pulse-even {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-5px) scale(0.98);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            0 0 0 0 rgba(214, 217, 214, 0.28),
            0 10px 20px rgba(0, 0, 0, 0.18);
    }

    34% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1.015);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            0 0 0 5px rgba(214, 217, 214, 0.09),
            0 12px 24px rgba(0, 0, 0, 0.2);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            0 0 0 14px rgba(214, 217, 214, 0),
            0 10px 20px rgba(0, 0, 0, 0.18);
    }
}

@keyframes pictionary-round-countdown-pulse-odd {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-5px) scale(0.98);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            0 0 0 0 rgba(214, 217, 214, 0.28),
            0 10px 20px rgba(0, 0, 0, 0.18);
    }

    34% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1.015);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            0 0 0 5px rgba(214, 217, 214, 0.09),
            0 12px 24px rgba(0, 0, 0, 0.2);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            0 0 0 14px rgba(214, 217, 214, 0),
            0 10px 20px rgba(0, 0, 0, 0.18);
    }
}

.pictionary-stage-status {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 2;
    max-width: min(calc(100% - 260px), 520px);
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(18, 27, 33, 0.82);
    border: 1px solid rgba(243, 240, 229, 0.2);
    color: #fffdf3;
    font-weight: 700;
    line-height: 1.4;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.pictionary-stage-viewer-chip {
    position: absolute;
    left: 18px;
    top: 90px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    max-width: min(280px, calc(100% - 220px));
    padding: 0 8px 0 12px;
    border-radius: 999px;
    background: rgba(18, 27, 33, 0.82);
    border: 1px solid rgba(243, 240, 229, 0.2);
    color: #fffdf3;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    text-align: left;
    min-width: 0;
    cursor: default;
    -webkit-appearance: none;
    appearance: none;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.pictionary-stage-viewer-chip.is-score-popping {
    animation: pictionary-score-pop 780ms cubic-bezier(0.18, 0.84, 0.24, 1);
}

.pictionary-stage-viewer-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}

.pictionary-stage-viewer-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(32, 44, 51, 0.9);
    border: 1px solid rgba(243, 240, 229, 0.22);
    color: #fffdf3;
    font-size: 0.8rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.pictionary-stage-viewer-icon {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 250, 0.12);
    color: #d5b35d;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.pictionary-stage-viewer-icon svg {
    width: 14px;
    height: 14px;
}

.pictionary-player-celebration {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    pointer-events: none;
    overflow: hidden;
}

.pictionary-player-celebration[hidden] {
    display: none;
}

.pictionary-player-celebration::before,
.pictionary-player-celebration::after,
.pictionary-celebration-burst {
    content: "";
    position: absolute;
    border-radius: 999px;
    opacity: 0;
    transform: scale(0.6);
}

.pictionary-player-celebration::before {
    width: min(62vw, 420px);
    height: min(62vw, 420px);
    background: radial-gradient(circle, rgba(247, 232, 179, 0.38), rgba(213, 179, 93, 0.16) 44%, transparent 70%);
}

.pictionary-player-celebration::after {
    width: min(46vw, 300px);
    height: min(46vw, 300px);
    border: 5px solid rgba(255, 244, 191, 0.54);
}

.pictionary-celebration-burst {
    width: min(74vw, 520px);
    height: min(74vw, 520px);
    background: conic-gradient(
        from 0deg,
        transparent 0deg 12deg,
        rgba(255, 221, 116, 0.78) 12deg 18deg,
        transparent 18deg 36deg,
        rgba(255, 250, 235, 0.72) 36deg 42deg,
        transparent 42deg 60deg
    );
    mask: radial-gradient(circle, transparent 0 38%, #000 39% 68%, transparent 69%);
}

.pictionary-celebration-card {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 10px;
    min-width: min(88vw, 380px);
    padding: clamp(16px, 4vw, 26px) clamp(22px, 6vw, 40px);
    border-radius: 24px;
    background:
        radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.1), transparent 34%),
        linear-gradient(180deg, rgba(48, 58, 61, 0.97), rgba(22, 30, 33, 0.98)), #1d2629;
    border: 1px solid rgba(255, 244, 191, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(11, 16, 18, 0.22),
        0 28px 56px rgba(0, 0, 0, 0.34),
        0 0 42px rgba(213, 179, 93, 0.16);
    text-align: center;
    opacity: 0;
    transform: translateY(18px) scale(0.86);
}

.pictionary-celebration-points,
.pictionary-celebration-copy {
    text-align: center;
}

.pictionary-celebration-points {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.03em;
    color: #fff4bd;
    font-size: clamp(3.6rem, 15vw, 7.8rem);
    font-weight: 950;
    line-height: 0.82;
    text-shadow:
        0 4px 0 rgba(72, 40, 9, 0.28),
        0 0 34px rgba(255, 218, 108, 0.38);
}

.pictionary-celebration-number {
    font-variant-numeric: tabular-nums;
}

.pictionary-celebration-plus {
    margin-bottom: 0.04em;
    font-size: 0.58em;
}

.pictionary-celebration-unit {
    margin: 0 0 0.16em 0.1em;
    color: rgba(255, 244, 191, 0.88);
    font-size: 0.22em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(255, 218, 108, 0.28);
}

.pictionary-celebration-copy {
    display: block;
    color: #fff3bf;
    font-size: clamp(1.02rem, 3.2vw, 1.46rem);
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 0 18px rgba(213, 179, 93, 0.26);
}

.pictionary-celebration-copy.is-speed-bonus,
.pictionary-celebration-copy.is-breakthrough-bonus,
.pictionary-celebration-copy.is-effort-bonus,
.pictionary-celebration-copy.is-never-quit-bonus {
    font-weight: 950;
}

.pictionary-celebration-copy.is-speed-bonus {
    color: #9ffbe9;
    font-size: clamp(1.12rem, 3.8vw, 1.62rem);
    text-shadow:
        0 0 18px rgba(31, 225, 209, 0.26),
        0 1px 0 rgba(7, 13, 14, 0.42);
}

.pictionary-celebration-copy.is-breakthrough-bonus {
    color: #ffd1ec;
    text-shadow:
        0 0 20px rgba(255, 113, 207, 0.3),
        0 1px 0 rgba(26, 8, 18, 0.42);
}

.pictionary-celebration-copy.is-effort-bonus,
.pictionary-celebration-copy.is-never-quit-bonus {
    color: #c8ffb8;
    text-shadow:
        0 0 18px rgba(119, 239, 95, 0.22),
        0 1px 0 rgba(9, 20, 8, 0.42);
}

.pictionary-celebration-breakdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: min(100%, 340px);
}

.pictionary-celebration-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 244, 191, 0.28);
    background: radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.2), transparent 38%), rgba(34, 43, 42, 0.78);
    color: #f7f2dc;
    font-size: clamp(0.78rem, 2.6vw, 0.96rem);
    font-weight: 850;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pictionary-celebration-chip strong {
    color: #fff4bd;
    font-size: 1.08em;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.pictionary-celebration-chip.is-speed {
    border-color: rgba(127, 244, 219, 0.4);
    background: rgba(19, 62, 62, 0.78);
}

.pictionary-celebration-chip.is-speed strong {
    color: #9ffbe9;
}

.pictionary-celebration-chip.is-breakthrough {
    border-color: rgba(255, 159, 224, 0.42);
    background: rgba(70, 26, 58, 0.78);
}

.pictionary-celebration-chip.is-breakthrough strong {
    color: #ffd1ec;
}

.pictionary-celebration-chip.is-effort,
.pictionary-celebration-chip.is-never-quit {
    border-color: rgba(173, 247, 148, 0.38);
    background: rgba(33, 62, 30, 0.78);
}

.pictionary-celebration-chip.is-effort strong,
.pictionary-celebration-chip.is-never-quit strong {
    color: #c8ffb8;
}

.pictionary-player-celebration.is-active::before {
    animation: pictionary-celebration-glow 980ms ease-out forwards;
}

.pictionary-player-celebration.is-active::after {
    animation: pictionary-celebration-ring 1060ms ease-out forwards;
}

.pictionary-player-celebration.is-active .pictionary-celebration-burst {
    animation: pictionary-celebration-burst 1180ms ease-out forwards;
}

.pictionary-player-celebration.is-active .pictionary-celebration-card {
    animation: pictionary-celebration-copy 4650ms cubic-bezier(0.18, 0.84, 0.24, 1) forwards;
}

.pictionary-worth-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 1px;
    height: 1px;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.pictionary-worth-burst[hidden] {
    display: none;
}

.pictionary-worth-burst-value {
    position: relative;
    z-index: 1;
    min-width: 92px;
    padding: 10px 16px 11px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.18), transparent 36%),
        linear-gradient(180deg, rgba(54, 63, 65, 0.98), rgba(24, 32, 35, 0.98));
    border: 1px solid rgba(255, 244, 191, 0.32);
    box-shadow:
        0 12px 32px rgba(12, 18, 20, 0.28),
        0 0 30px rgba(255, 221, 116, 0.22);
    color: #fff2a8;
    font-size: clamp(1.22rem, 4.4vw, 2.2rem);
    font-weight: 950;
    line-height: 1;
    text-align: center;
    opacity: 0;
    transform: translateY(8px) scale(0.74);
}

.pictionary-worth-burst-particle {
    position: absolute;
    width: var(--burst-size, 8px);
    height: var(--burst-size, 8px);
    border-radius: 999px;
    background: var(--burst-color, #fff0a6);
    box-shadow: 0 0 14px var(--burst-color, #fff0a6);
    opacity: 0;
    transform: rotate(var(--burst-angle, 0deg)) translateY(0) scale(0.5);
}

.pictionary-worth-burst.is-active .pictionary-worth-burst-value {
    animation: pictionary-worth-burst-value 1120ms cubic-bezier(0.18, 0.84, 0.24, 1) forwards;
}

.pictionary-worth-burst.is-active .pictionary-worth-burst-particle {
    animation: pictionary-worth-burst-particle 940ms cubic-bezier(0.12, 0.78, 0.26, 1) forwards;
    animation-delay: var(--burst-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    .pictionary-worth-burst.is-active .pictionary-worth-burst-value,
    .pictionary-worth-burst.is-active .pictionary-worth-burst-particle {
        animation-duration: 1ms;
        animation-delay: 0ms;
    }
}

.pictionary-host-tools {
    position: absolute;
    top: 86px;
    right: 18px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.pictionary-host-tools .secondary-button {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(229, 216, 255, 0.94)), rgba(251, 246, 255, 0.96);
    border-color: rgba(57, 33, 101, 0.28);
    color: #281646;
}

#app.theme-pictionary .pictionary-host-tools .secondary-button {
    background: linear-gradient(180deg, rgba(255, 255, 250, 0.96), rgba(230, 232, 226, 0.94)), rgba(242, 241, 234, 0.96);
    border-color: rgba(38, 48, 55, 0.24);
    color: #20292f;
}

.pictionary-host-tool-button {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 16px;
    display: inline-grid;
    place-items: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 12px 24px rgba(12, 8, 28, 0.18);
}

.pictionary-host-tool-button svg {
    width: 20px;
    height: 20px;
    color: inherit;
}

.pictionary-side-card {
    display: grid;
    align-content: start;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.pictionary-role-card {
    display: grid;
    gap: 16px;
    align-content: start;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.pictionary-role-copy {
    display: grid;
    gap: 8px;
}

.pictionary-controller-lock-copy {
    display: grid;
    gap: 10px;
}

.pictionary-role-title,
.pictionary-role-status,
.pictionary-role-meta {
    margin: 0;
}

.pictionary-role-title {
    color: #fffdf3;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.04;
}

.pictionary-role-status {
    color: #dce3df;
    line-height: 1.5;
}

.pictionary-role-meta {
    color: #c8d1ce;
    line-height: 1.45;
}

.pictionary-host-actions {
    display: grid;
    gap: 10px;
}

.pictionary-stage-console {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}

.pictionary-console {
    pointer-events: auto;
}

.pictionary-console--host {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.pictionary-console--player {
    position: relative;
    display: grid;
    gap: 10px;
    width: min(100%, 760px);
    margin-left: auto;
    padding: 14px 16px;
    border-radius: 26px;
    background: rgba(18, 27, 33, 0.9);
    border: 1px solid rgba(243, 240, 229, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 22px 34px rgba(0, 0, 0, 0.22);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.pictionary-console--player.is-feedback-only {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "feedback actions";
    align-items: center;
    gap: 14px;
    min-height: 78px;
    padding: 16px 14px 16px 18px;
}

.pictionary-console--player.is-feedback-only .pictionary-console-topline {
    grid-area: actions;
    justify-self: end;
}

.pictionary-console--player.is-feedback-only .pictionary-console-metrics {
    display: none;
}

.pictionary-console--player.is-feedback-only .pictionary-console-actions {
    justify-content: flex-end;
}

.pictionary-console--player.is-feedback-only .pictionary-feedback-message {
    grid-area: feedback;
    align-self: center;
    min-height: 0;
    font-size: clamp(1rem, 1.4vw, 1.12rem);
}

.pictionary-console-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pictionary-console-metrics,
.pictionary-console-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pictionary-inline-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(25, 36, 42, 0.8);
    border: 1px solid rgba(243, 240, 229, 0.16);
    color: #fffdf3;
}

.pictionary-inline-chip strong {
    font-size: 0.96rem;
}

.pictionary-inline-chip--lives {
    padding-right: 10px;
}

.pictionary-inline-chip--worth {
    gap: 6px;
}

.pictionary-inline-chip--worth strong {
    white-space: nowrap;
}

.pictionary-inline-label {
    color: #dce3df;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pictionary-life-strip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pictionary-life-token {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
}

.pictionary-life-token.is-empty {
    opacity: 0.22;
    filter: grayscale(0.3);
}

.pictionary-console-timer {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(76, 52, 21, 0.26);
    border: 1px solid rgba(213, 179, 93, 0.3);
    color: #f8d787;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.pictionary-feedback-message {
    margin: 0;
    min-height: 1.42em;
    color: #edf1ed;
    font-size: clamp(0.98rem, 1vw, 1.05rem);
    font-weight: 800;
    line-height: 1.42;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.pictionary-advice-message {
    margin: -2px 0 0;
    color: #f2d58a;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.pictionary-feedback-message.is-wrong {
    color: #ffd4c2;
}

.pictionary-feedback-message.is-misspelling {
    color: #ffe1a6;
}

.pictionary-feedback-message.is-correct {
    color: #d9f7e7;
}

.pictionary-guess-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.pictionary-guess-field {
    margin: 0;
    min-width: 0;
}

.pictionary-guess-shell {
    position: relative;
    min-width: 0;
}

.pictionary-guess-shell input {
    position: relative;
    z-index: 1;
    padding-right: 16px;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease,
        padding-right 180ms ease;
}

.pictionary-guess-field.has-draft .pictionary-guess-shell input {
    padding-right: 64px;
    border-color: rgba(213, 179, 93, 0.4);
}

.pictionary-guess-field.has-suggestions .pictionary-guess-shell input {
    padding-right: min(calc(100% - 20px), var(--pictionary-guess-assist-padding, 238px));
}

.pictionary-guess-assist {
    position: absolute;
    z-index: 2;
    top: 4px;
    right: 4px;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    max-width: min(calc(100% - 8px), 430px);
    opacity: 0;
    pointer-events: auto;
    transform: translateX(8px) scale(0.98);
    transition:
        opacity 160ms ease,
        transform 180ms ease;
}

.pictionary-guess-field.has-draft .pictionary-guess-assist {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.pictionary-guess-search-zone {
    display: inline-grid;
    place-items: center;
    align-self: stretch;
    flex: 0 0 42px;
    width: 42px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 247, 224, 0.12), rgba(213, 179, 93, 0.18)), rgba(28, 39, 46, 0.88);
    border: 1px solid rgba(213, 179, 93, 0.28);
    color: #f5d984;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 8px 16px rgba(0, 0, 0, 0.18);
    cursor: text;
    pointer-events: auto;
}

.pictionary-guess-search-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.pictionary-guess-suggestions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 47px);
}

.pictionary-guess-suggestions[hidden] {
    display: none;
}

.pictionary-guess-field.has-suggestions .pictionary-guess-suggestions {
    max-width: 100%;
}

.pictionary-guess-field.has-suggestions .pictionary-guess-search-zone {
    display: none;
}

.pictionary-guess-suggestion-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    min-width: 48px;
    max-width: min(22ch, 100%);
    height: 36px;
    padding: 0 10px;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(243, 240, 229, 0.22);
    background: linear-gradient(180deg, rgba(255, 253, 243, 0.15), rgba(213, 179, 93, 0.2)), rgba(34, 45, 52, 0.94);
    color: #fff8df;
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 9px 17px rgba(0, 0, 0, 0.18);
    transition:
        border-color 140ms ease,
        background 140ms ease,
        box-shadow 140ms ease,
        transform 120ms ease;
}

.pictionary-guess-suggestion-button span {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
    max-width: 100%;
    text-overflow: ellipsis;
}

.pictionary-guess-suggestion-button::after {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -65%;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    opacity: 0;
    transform: skewX(-18deg);
    pointer-events: none;
}

.pictionary-guess-suggestion-button:not(:disabled):hover,
.pictionary-guess-suggestion-button:focus-visible {
    border-color: rgba(255, 230, 156, 0.58);
    background: linear-gradient(180deg, rgba(255, 253, 243, 0.2), rgba(226, 186, 89, 0.28)), rgba(43, 54, 58, 0.98);
    box-shadow:
        0 0 0 3px rgba(213, 179, 93, 0.14),
        0 10px 18px rgba(0, 0, 0, 0.2);
}

.pictionary-guess-suggestion-button:not(:disabled):active {
    transform: translateY(1px) scale(0.99);
}

.pictionary-guess-suggestions.is-refreshing .pictionary-guess-suggestion-button {
    animation: pictionary-guess-suggestion-pulse 430ms ease;
}

.pictionary-guess-suggestions.is-refreshing .pictionary-guess-suggestion-button:nth-child(2) {
    animation-delay: 45ms;
}

.pictionary-guess-suggestions.is-refreshing .pictionary-guess-suggestion-button::after {
    animation: pictionary-guess-suggestion-sheen 520ms ease;
}

@keyframes pictionary-guess-suggestion-pulse {
    0% {
        transform: scale(0.96);
        border-color: rgba(255, 230, 156, 0.3);
    }

    45% {
        transform: scale(1.035);
        border-color: rgba(255, 230, 156, 0.72);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes pictionary-guess-suggestion-sheen {
    0% {
        left: -65%;
        opacity: 0;
    }

    22% {
        opacity: 0.78;
    }

    100% {
        left: 126%;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pictionary-guess-suggestions.is-refreshing .pictionary-guess-suggestion-button,
    .pictionary-guess-suggestions.is-refreshing .pictionary-guess-suggestion-button::after {
        animation: none;
    }
}

.pictionary-point-picker {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.pictionary-point-button {
    min-height: 44px;
    border-radius: 16px;
    border: 1px solid rgba(243, 240, 229, 0.16);
    background: rgba(28, 39, 46, 0.72);
    color: #fffdf3;
    font-size: 1rem;
    font-weight: 800;
    transition:
        border-color 140ms ease,
        background 140ms ease,
        transform 140ms ease,
        box-shadow 140ms ease;
}

.pictionary-point-button:hover,
.pictionary-point-button:focus-visible {
    border-color: rgba(243, 240, 229, 0.34);
    background: rgba(40, 53, 60, 0.88);
}

.pictionary-point-button.is-selected {
    border-color: rgba(213, 179, 93, 0.62);
    background: linear-gradient(135deg, rgba(213, 179, 93, 0.28), rgba(34, 45, 52, 0.84)), rgba(33, 45, 52, 0.94);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22);
}

.pictionary-next-button,
.pictionary-guess-button {
    width: 100%;
    min-width: 112px;
    font-size: 0.98rem;
    font-weight: 800;
    white-space: nowrap;
}

.pictionary-controller-shell {
    display: grid;
    gap: 10px;
    align-content: start;
}

.pictionary-controller-shell.is-host-controller {
    gap: 14px;
}

.pictionary-controller-title {
    margin: 0;
    color: #fffdf3;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    line-height: 1.08;
}

.pictionary-controller-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
    align-items: center;
    gap: 8px;
}

.pictionary-controller-title-row .pictionary-controller-room-switch {
    justify-self: end;
    width: min(168px, 100%);
}

.pictionary-controller-lock-copy .pictionary-controller-room-switch {
    justify-self: center;
    width: min(220px, 100%);
}

.pictionary-controller-meta-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pictionary-controller-chip {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 20px;
    background: rgba(25, 36, 42, 0.9);
    border: 1px solid rgba(243, 240, 229, 0.18);
}

.pictionary-controller-chip strong {
    color: #fffdf3;
    font-size: 1.55rem;
    line-height: 1;
}

.pictionary-controller-current {
    display: grid;
    gap: 8px;
    padding: 18px 20px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 250, 0.12), transparent 22%),
        linear-gradient(180deg, rgba(39, 53, 60, 0.92), rgba(18, 27, 33, 0.98));
    border: 1px solid rgba(243, 240, 229, 0.18);
}

.pictionary-controller-word {
    color: #fffdf3;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.12;
}

.pictionary-controller-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.pictionary-controller-shell.is-host-controller .pictionary-host-actions {
    margin-top: 2px;
}

.pictionary-entry-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: 10px;
    max-height: min(54vh, 540px);
    overflow: auto;
    padding-right: 4px;
}

.pictionary-shell.is-host-controller-view .pictionary-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pictionary-entry-button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    min-height: 58px;
    padding: 8px 10px;
    border-radius: 18px;
    border: 1px solid rgba(243, 240, 229, 0.16);
    background: rgba(24, 35, 41, 0.76);
    color: inherit;
    text-align: left;
    transition:
        border-color 140ms ease,
        background 140ms ease,
        transform 140ms ease,
        box-shadow 140ms ease;
}

.pictionary-entry-button:hover,
.pictionary-entry-button:focus-visible {
    border-color: rgba(243, 240, 229, 0.32);
    background: rgba(35, 48, 55, 0.88);
}

.pictionary-entry-button.is-selected {
    border-color: rgba(213, 179, 93, 0.56);
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 250, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(49, 61, 62, 0.9), rgba(22, 31, 36, 0.98));
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22);
}

.pictionary-entry-english {
    color: #fffdf3;
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.pictionary-entry-korean {
    color: #dce3df;
    font-size: 0.88rem;
    font-style: italic;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.pictionary-entry-used {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(20, 29, 35, 0.78);
    border: 1px solid rgba(243, 240, 229, 0.16);
    color: #dce3df;
    font-size: 0.78rem;
    font-weight: 700;
}

.pictionary-guess-field input {
    font-size: 1rem;
}

.pictionary-guess-field.is-wrong input {
    border-color: rgba(255, 120, 136, 0.82);
    box-shadow: 0 0 0 3px rgba(255, 120, 136, 0.18);
    background: rgba(50, 10, 16, 0.18);
}

.pictionary-guess-field.is-misspelling input {
    border-color: rgba(255, 184, 95, 0.82);
    box-shadow: 0 0 0 3px rgba(255, 184, 95, 0.16);
    background: rgba(85, 48, 18, 0.18);
}

.pictionary-guess-field.is-correct input {
    border-color: rgba(116, 232, 174, 0.72);
    box-shadow: 0 0 0 3px rgba(116, 232, 174, 0.16);
}

.pictionary-scoreboard-panel {
    position: absolute;
    top: 92px;
    right: 18px;
    bottom: 92px;
    z-index: 4;
    width: min(360px, calc(100% - 36px));
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 16px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(28, 39, 46, 0.94), rgba(14, 22, 28, 0.98)), rgba(16, 24, 30, 0.98);
    border: 1px solid rgba(243, 240, 229, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 28px 48px rgba(0, 0, 0, 0.32);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.pictionary-scoreboard-head {
    display: flex;
    justify-content: flex-end;
}

.pictionary-scoreboard-close,
.pictionary-board-toggle {
    min-height: 38px;
    padding: 0 14px;
}

.pictionary-scoreboard-empty {
    margin: 0;
    color: #dce3df;
    line-height: 1.5;
}

.pictionary-team-list {
    list-style: none;
    padding: 0 2px 0 0;
    margin: 0;
    display: grid;
    gap: 10px;
    max-height: 100%;
    overflow: auto;
}

.pictionary-team-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(24, 35, 41, 0.78);
    border: 1px solid rgba(243, 240, 229, 0.16);
}

.pictionary-team-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.pictionary-team-name-line,
.pictionary-player-team-name-line {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.pictionary-team-name-line {
    width: fit-content;
    max-width: 100%;
}

.pictionary-player-team-name-line {
    flex: 1 1 auto;
}

.pictionary-team-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fffdf3;
    font-size: 1rem;
}

.pictionary-team-meta {
    color: #c8d1ce;
    font-size: 0.92rem;
    line-height: 1.35;
}

.pictionary-team-score {
    color: #d5b35d;
    font-size: 1.4rem;
    line-height: 1;
}

.pictionary-shell.is-player-view {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
}

.pictionary-shell.is-player-view .pictionary-side-card {
    display: none;
}

.pictionary-shell.is-player-view .pictionary-stage-viewer-chip {
    display: none;
}

.pictionary-shell.is-player-view.is-guessing .pictionary-player-board-card {
    display: none;
}

.pictionary-shell.is-player-view.is-guessing {
    height: min(100%, var(--pictionary-visual-viewport-height, 100svh));
    max-height: var(--pictionary-visual-viewport-height, 100svh);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
}

.pictionary-shell.is-player-view.is-guessing .pictionary-stage-card {
    height: 100%;
    min-height: 0;
    max-height: var(--pictionary-visual-viewport-height, 100svh);
    padding: 8px;
}

.pictionary-shell.is-player-view.is-guessing .pictionary-canvas-shell {
    min-height: 0;
    border-radius: 24px;
}

.pictionary-shell.is-player-view.is-guessing .pictionary-stage-console {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 12px;
    z-index: 30;
    isolation: isolate;
}

.pictionary-shell.is-player-view.is-guessing .pictionary-stage-console::before {
    content: "";
    position: absolute;
    inset: -8px -8px -12px;
    z-index: -1;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), #ffffff 72%), #ffffff;
    box-shadow:
        0 -1px 0 rgba(14, 22, 28, 0.08),
        0 -14px 28px rgba(14, 22, 28, 0.08);
    pointer-events: none;
}

.pictionary-shell.is-player-view.is-guessing.is-keyboard-short .pictionary-stage-console::before {
    inset: -6px -6px -8px;
    border-radius: 22px;
}

.pictionary-shell.is-player-view.is-guessing.is-keyboard-short .pictionary-console--player {
    gap: 0;
    padding: 6px;
    border-radius: 18px;
}

.pictionary-shell.is-player-view.is-guessing.is-keyboard-short .pictionary-console-topline {
    display: none;
}

.pictionary-shell.is-player-view.is-guessing.is-keyboard-short .pictionary-guess-row {
    grid-template-columns: minmax(0, 1fr) minmax(84px, 0.22fr);
    gap: 8px;
}

.pictionary-shell.is-player-view.is-guessing.is-keyboard-short .pictionary-guess-row:has(.pictionary-guess-field.has-suggestions) {
    grid-template-columns: minmax(0, 1fr);
    position: relative;
    padding-top: 38px;
}

.pictionary-shell.is-player-view.is-guessing.is-keyboard-short
    .pictionary-guess-row:has(.pictionary-guess-field.has-suggestions)
    .pictionary-guess-button {
    width: 100%;
}

.pictionary-shell.is-player-view.is-guessing.is-keyboard-short .pictionary-guess-field input,
.pictionary-shell.is-player-view.is-guessing.is-keyboard-short .pictionary-guess-button {
    min-height: 44px;
}

.pictionary-shell.is-player-view.is-guessing.is-keyboard-short .pictionary-guess-field.has-suggestions .pictionary-guess-shell input {
    padding-right: 12px;
}

.pictionary-shell.is-player-view.is-guessing.is-keyboard-short .pictionary-guess-field.has-suggestions .pictionary-guess-shell {
    position: static;
}

.pictionary-shell.is-player-view.is-guessing.is-keyboard-short .pictionary-guess-assist {
    gap: 4px;
    max-width: calc(100% - 8px);
}

.pictionary-shell.is-player-view.is-guessing.is-keyboard-short .pictionary-guess-field.has-suggestions .pictionary-guess-assist {
    top: 0;
    right: 4px;
    bottom: auto;
    height: 32px;
    width: calc(100% - 8px);
    max-width: calc(100% - 8px);
    transform: none;
}

.pictionary-shell.is-player-view.is-guessing.is-keyboard-short .pictionary-guess-field.has-suggestions .pictionary-guess-suggestions {
    width: 100%;
    max-width: 100%;
    justify-content: flex-end;
}

.pictionary-shell.is-player-view.is-guessing.is-keyboard-short .pictionary-guess-search-zone {
    flex-basis: 38px;
    width: 38px;
    border-radius: 12px;
}

.pictionary-shell.is-player-view.is-guessing.is-keyboard-short .pictionary-guess-suggestion-button {
    min-width: 48px;
    max-width: min(18ch, 100%);
    height: 32px;
    padding: 0 8px;
    font-size: 0.78rem;
}

.pictionary-shell.is-player-view.is-guessing.is-keyboard-short .pictionary-guess-field.has-suggestions .pictionary-guess-suggestion-button {
    flex: 0 1 auto;
    min-width: 0;
}

@media (orientation: landscape) and (min-width: 700px) and (max-height: 840px) {
    .pictionary-shell.is-player-view {
        grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.55fr);
        grid-template-rows: minmax(0, 1fr);
        gap: 14px;
    }

    .pictionary-shell.is-player-view.is-guessing,
    .pictionary-shell.is-player-view:has(.pictionary-player-board-card[hidden]) {
        grid-template-columns: minmax(0, 1fr);
    }

    .pictionary-shell.is-player-view .pictionary-stage-card,
    .pictionary-shell.is-player-view .pictionary-player-board-card {
        min-height: 0;
        max-height: 100%;
    }

    .pictionary-shell.is-player-view .pictionary-player-board-card {
        align-self: stretch;
        overflow: auto;
    }

    .pictionary-shell.is-player-view .pictionary-player-board-card.is-small-bank {
        align-self: start;
        height: auto;
        max-height: min(100%, 300px);
        overflow: hidden;
    }

    .pictionary-shell.is-player-view:not(.is-guessing) .pictionary-player-team-rail {
        grid-auto-flow: row;
        grid-auto-columns: unset;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        overflow: auto;
    }
}

.pictionary-shell.is-controller-view {
    grid-template-columns: minmax(0, 1fr);
}

.pictionary-shell.is-controller-view .pictionary-stage-card {
    display: none;
}

.pictionary-shell.is-controller-view .pictionary-role-card {
    min-height: calc(100vh - 160px);
    min-height: calc(100svh - 160px);
}

.pictionary-shell {
    grid-template-columns: minmax(0, 1fr) minmax(296px, 372px);
    min-height: 0;
}

.pictionary-stage-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.pictionary-head-chip {
    gap: 3px;
    min-width: 88px;
    padding: 8px 11px;
    border-radius: 18px;
}

.pictionary-points-value,
.pictionary-round-value {
    font-size: clamp(1.08rem, 1.9vw, 1.54rem);
}

.pictionary-stem-banner {
    flex-wrap: wrap;
    gap: 0.18em;
}

@media (min-width: 641px) {
    .pictionary-shell.is-host-view .pictionary-stage-head {
        grid-template-columns: minmax(108px, auto) minmax(0, 1fr) minmax(108px, auto);
        gap: 12px;
    }

    .pictionary-shell.is-host-view .pictionary-head-chip {
        min-width: 102px;
        padding: 10px 14px;
        border-radius: 20px;
    }

    .pictionary-shell.is-host-view .pictionary-head-label {
        font-size: 0.78rem;
    }

    .pictionary-shell.is-host-view .pictionary-points-value,
    .pictionary-shell.is-host-view .pictionary-round-value {
        font-size: clamp(1.45rem, 2.25vw, 2.05rem);
    }

    .pictionary-shell.is-host-view .pictionary-round-timer.has-countdown {
        margin-bottom: clamp(58px, 6.8vw, 72px);
    }

    .pictionary-shell.is-host-view .pictionary-round-timer.is-grace-countdown {
        margin-bottom: clamp(66px, 7.6vw, 82px);
    }

    .pictionary-shell.is-host-view .pictionary-round-timer.has-countdown::before {
        min-width: clamp(70px, 7vw, 92px);
        min-height: clamp(48px, 5.4vw, 64px);
        padding-inline: 18px;
        font-size: clamp(2.05rem, 3.2vw, 2.82rem);
    }

    .pictionary-shell.is-host-view .pictionary-round-timer.is-grace-countdown::before {
        min-width: clamp(74px, 7.8vw, 100px);
        min-height: clamp(56px, 6.2vw, 74px);
        font-size: clamp(2.55rem, 4.2vw, 3.4rem);
    }

    .pictionary-shell.is-host-view .pictionary-stem-banner {
        min-height: 64px;
        padding: 12px 22px;
        font-size: clamp(1.32rem, 2.15vw, 1.95rem);
        line-height: 1.24;
    }
}

.pictionary-stem-segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 1.7em;
    padding-inline: 0.18em;
    border-radius: 999px;
    transition:
        color 220ms ease,
        background 420ms ease,
        box-shadow 420ms ease,
        text-shadow 420ms ease;
}

.pictionary-target-blank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.7em;
    min-height: 1.7em;
    margin-inline: 0.08em;
    padding: 0 0.34em 0.08em;
    border-radius: 999px;
    border: 2px solid rgba(213, 179, 93, 0.8);
    box-shadow:
        0 0 0 4px rgba(213, 179, 93, 0.11),
        0 0 24px rgba(213, 179, 93, 0.18);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
}

.pictionary-round-answer-panel {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    justify-content: center;
    width: auto;
    max-width: 100%;
    margin-top: 2px;
    padding: 9px 18px 10px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.68), transparent 34%), linear-gradient(180deg, #fff1b6, #f1c250), #f4cf68;
    border: 1px solid rgba(255, 253, 230, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.56),
        0 0 0 1px rgba(83, 55, 18, 0.28),
        0 14px 28px rgba(4, 9, 12, 0.32),
        0 24px 42px rgba(4, 9, 12, 0.16),
        0 0 34px rgba(239, 195, 82, 0.34);
}

.pictionary-round-answer {
    display: block;
    max-width: 100%;
    color: #201506;
    font-size: 2.05rem;
    font-weight: 900;
    line-height: 1.02;
    overflow-wrap: anywhere;
    text-shadow:
        0 1px 0 rgba(255, 255, 238, 0.82),
        0 0 16px rgba(255, 255, 240, 0.36);
}

.pictionary-round-answer-translation {
    color: #51401d;
    font-size: clamp(.85rem, 1.6vw, 1.3rem);
    font-weight: 750;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-align: center;
    max-width: 100%;
}

.pictionary-stem-segment.is-hidden {
    color: rgba(145, 132, 105, 0.78);
    background: transparent;
    box-shadow: none;
    text-shadow: none;
}

.pictionary-stem-segment.is-revealed {
    color: #f4f6f4;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

.pictionary-stem-segment.is-new {
    color: #f8fbf8;
    background:
        radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.55), rgba(172, 182, 185, 0.64) 36%, transparent 64%),
        linear-gradient(180deg, rgba(117, 130, 136, 0.96), rgba(47, 58, 64, 0.98)), rgba(62, 73, 79, 0.92);
    box-shadow:
        0 0 0 1px rgba(255, 255, 250, 0.68),
        0 0 0 10px rgba(142, 156, 162, 0.16),
        0 0 34px rgba(91, 106, 112, 0.28);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.24);
}

.pictionary-side-card {
    gap: 16px;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.pictionary-player-board-card {
    display: grid;
    gap: 10px;
    min-height: 118px;
    max-height: clamp(128px, 24vh, 210px);
    overflow: hidden;
    padding: 10px 12px 12px;
    background: linear-gradient(180deg, rgba(32, 45, 52, 0.76), rgba(14, 22, 28, 0.96)), var(--card);
    border-color: rgba(243, 240, 229, 0.18);
}

.pictionary-player-board-layout {
    display: grid;
    gap: 8px;
    min-height: 0;
    height: 100%;
}

.pictionary-player-board-layout.has-word-bank.has-team-rail {
    grid-template-rows: minmax(0, 1fr) auto;
}

.pictionary-player-word-bank {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
    min-height: 0;
}

.pictionary-player-word-bank-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
}

.pictionary-player-word-bank-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(213, 179, 93, 0.18);
    border: 1px solid rgba(213, 179, 93, 0.26);
    color: #fff5c8;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
}

.pictionary-player-word-bank-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: 6px;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
}

.pictionary-player-word-bank-chip {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 48px;
    padding: 7px 9px;
    border-radius: 12px;
    background: rgba(245, 241, 226, 0.08);
    border: 1px solid rgba(243, 240, 229, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.pictionary-player-word-bank-chip strong,
.pictionary-player-word-bank-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pictionary-player-word-bank-chip strong {
    color: #fffdf3;
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.08;
}

.pictionary-player-word-bank-chip span {
    color: #d5e8dd;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.1;
}

.pictionary-host-utility-card {
    padding: 12px 14px;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 250, 0.1), transparent 28%),
        linear-gradient(180deg, rgba(35, 48, 55, 0.92), rgba(16, 24, 30, 0.98)), rgba(17, 25, 31, 0.98);
    border-color: rgba(243, 240, 229, 0.22);
}

.pictionary-host-utility-strip {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(112px, 0.72fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pictionary-host-utility-strip .active-host-join-panel {
    align-items: center;
    gap: 10px;
}

.pictionary-host-utility-strip .active-room-code-display {
    font-size: clamp(2rem, 3vw, 3.1rem);
}

.pictionary-host-utility-strip .room-qr-frame.active-room-qr-frame {
    width: min(
        var(--ziar-qr-active-room-host-frame-width, 194px),
        var(--ziar-qr-active-room-host-compact-frame-width, 107px)
    );
}

.pictionary-host-utility-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.pictionary-host-utility-actions .secondary-button {
    min-height: 34px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 0.76rem;
    line-height: 1.12;
}

.pictionary-host-player-count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(18, 27, 33, 0.74);
    border: 1px solid rgba(243, 240, 229, 0.16);
    color: #fffdf3;
}

.pictionary-host-player-count span {
    color: #dce3df;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.pictionary-host-player-count strong {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.pictionary-roster-card {
    background: linear-gradient(180deg, rgba(32, 45, 52, 0.78), rgba(16, 24, 30, 0.98)), var(--card);
    border-color: rgba(243, 240, 229, 0.18);
}

.pictionary-console--player {
    padding: 12px 14px 14px;
    background: rgba(18, 27, 33, 0.86);
}

.pictionary-console-metrics,
.pictionary-console-actions {
    gap: 10px;
}

.pictionary-icon-button {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 14px;
    display: inline-grid;
    place-items: center;
}

.pictionary-icon-button svg {
    width: 20px;
    height: 20px;
}

.pictionary-host-controller-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 16px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

#app.theme-pictionary .pictionary-host-controller-button {
    background: linear-gradient(180deg, rgba(44, 54, 60, 0.96), rgba(20, 29, 35, 0.98)), rgba(22, 30, 35, 0.96);
    border-color: rgba(243, 240, 229, 0.24);
    color: #f3f0e5;
}

.pictionary-host-controller-button.is-connected {
    border-color: rgba(152, 255, 211, 0.38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(152, 255, 211, 0.12),
        0 10px 20px rgba(0, 0, 0, 0.2);
}

.pictionary-life-token {
    position: relative;
    width: 17px;
    height: 17px;
    border-radius: 999px;
    color: #d5b35d;
    background: transparent;
    box-shadow: none;
    filter: none;
    isolation: isolate;
    box-sizing: border-box;
    overflow: visible;
    transition:
        background-color 140ms ease,
        box-shadow 140ms ease,
        color 140ms ease,
        opacity 140ms ease;
}

.pictionary-life-icon {
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    line-height: 1;
}

.pictionary-life-icon::before {
    content: "\1F50D";
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 0.94rem;
    line-height: 1;
    color: #d5b35d;
    text-shadow: 0 0 10px rgba(213, 179, 93, 0.2);
}

.pictionary-life-token.is-empty {
    opacity: 1;
    color: rgba(224, 214, 191, 0.18);
    background: transparent;
    box-shadow: none;
    filter: none;
}

.pictionary-life-token.is-empty .pictionary-life-icon::before {
    opacity: 0.24;
    filter: grayscale(0.25);
    text-shadow: none;
}

.pictionary-life-token.is-risked {
    color: #dd7771;
    background: transparent;
    box-shadow: none;
    animation: none;
    transform: none;
}

.pictionary-life-token.is-risked .pictionary-life-icon::before {
    filter: grayscale(1) sepia(1) saturate(5) hue-rotate(315deg) brightness(1.05);
    text-shadow: none;
}

.pictionary-life-fall {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background:
        radial-gradient(circle at 34% 26%, rgba(255, 245, 211, 0.28), transparent 32%),
        linear-gradient(145deg, rgba(255, 106, 83, 0.38), rgba(99, 39, 42, 0.42));
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 206, 0.28),
        inset 0 0 0 1px rgba(255, 126, 92, 0.72),
        0 0 0 1px rgba(255, 215, 124, 0.14),
        0 5px 10px rgba(2, 10, 16, 0.28),
        0 0 12px rgba(255, 91, 77, 0.26);
    pointer-events: none;
    animation: pictionary-magnifier-fall 980ms ease forwards;
    will-change: opacity, transform;
}

.pictionary-life-token.is-empty .pictionary-life-fall .pictionary-life-icon::before,
.pictionary-life-fall .pictionary-life-icon::before {
    opacity: 1;
    filter: none;
    color: #ffe4b0;
    -webkit-text-stroke: 0;
    text-shadow:
        0 1px 0 rgba(2, 10, 16, 0.34),
        0 0 9px rgba(255, 226, 154, 0.2);
}

.pictionary-life-risk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 32px;
    min-height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 18%, rgba(255, 244, 206, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(84, 48, 39, 0.92), rgba(39, 31, 36, 0.96));
    border: 1px solid rgba(255, 197, 111, 0.42);
    color: #ffd98c;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 206, 0.18),
        0 0 0 1px rgba(255, 91, 77, 0.08),
        0 6px 14px rgba(2, 10, 16, 0.2);
    transition:
        opacity 140ms ease,
        visibility 140ms ease;
}

.pictionary-life-risk::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #ff6958;
    box-shadow: 0 0 8px rgba(255, 105, 88, 0.58);
}

.pictionary-life-risk.is-empty {
    visibility: hidden;
    opacity: 0;
}

.pictionary-feedback-message.is-misspelling {
    color: #ffbb6a;
}

.pictionary-player-team-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(168px, 1fr);
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 0;
}

.pictionary-player-team-chip {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(24, 35, 41, 0.72);
    border: 1px solid rgba(243, 240, 229, 0.16);
}

.pictionary-player-team-chip.is-self {
    border-color: rgba(213, 179, 93, 0.42);
    box-shadow: inset 0 0 0 1px rgba(255, 252, 236, 0.08);
}

.pictionary-player-team-chip.is-away {
    opacity: 0.68;
}

.pictionary-player-team-chip.is-solved,
.pictionary-team-row.is-solved,
.pictionary-shell.is-host-view .pictionary-roster-card .roster-row.is-solved {
    background: radial-gradient(circle at 14% 22%, rgba(104, 255, 179, 0.18), transparent 30%), rgba(28, 62, 45, 0.92);
    border-color: rgba(148, 238, 187, 0.34);
    box-shadow:
        inset 0 0 0 1px rgba(215, 255, 231, 0.06),
        0 10px 24px rgba(4, 35, 22, 0.18);
}

.pictionary-player-team-chip.is-solved .pictionary-player-team-name,
.pictionary-team-row.is-solved .pictionary-team-name,
.pictionary-shell.is-host-view .pictionary-roster-card .roster-row.is-solved .roster-name {
    color: #d7ffe7;
}

.pictionary-player-team-chip-head {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
}

.pictionary-player-team-name,
.pictionary-player-team-score {
    color: #fffdf3;
    font-weight: 800;
}

.pictionary-player-team-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pictionary-player-team-score {
    white-space: nowrap;
}

.pictionary-player-team-metrics {
    margin-block: -10px;
}

.pictionary-player-team-meta {
    color: #c8d1ce;
    font-size: 0.78rem;
    line-height: 1.35;
}

.pictionary-controller-topline {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.pictionary-controller-stat-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

.pictionary-controller-stat-chip {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 3px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(31, 43, 50, 0.72), rgba(17, 25, 31, 0.84)), rgba(18, 27, 33, 0.78);
    border: 1px solid rgba(243, 240, 229, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    text-align: center;
}

.pictionary-controller-remaining-chip {
    align-content: center;
    justify-items: center;
}

.pictionary-controller-remaining-chip.is-idle {
    opacity: 0.52;
}

.pictionary-controller-round-label,
.pictionary-stepper-label {
    color: #dce3df;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pictionary-controller-round-value {
    color: #fffdf3;
    font-size: 1rem;
    line-height: 1;
}

.pictionary-controller-control-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 8px;
    align-items: stretch;
}

.pictionary-stepper-card {
    display: grid;
    gap: 7px;
    padding: 10px 12px 12px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 12%, rgba(255, 255, 250, 0.1), transparent 30%),
        linear-gradient(180deg, rgba(35, 48, 55, 0.92), rgba(18, 27, 33, 0.98));
    border: 1px solid rgba(243, 240, 229, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 12px 22px rgba(0, 0, 0, 0.14);
}

.pictionary-controller-remaining-chip strong {
    color: #d9f7e7;
    font-size: 1.08rem;
    line-height: 1;
}

.pictionary-stepper-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 8px;
    align-items: center;
}

.pictionary-stepper-row.is-disabled {
    opacity: 0.58;
}

.pictionary-stepper-value {
    color: #fffdf3;
    font-size: 1.1rem;
    text-align: center;
    line-height: 1;
}

.pictionary-stepper-button {
    min-height: 38px;
    border-radius: 14px;
    border: 1px solid rgba(243, 240, 229, 0.16);
    background: rgba(17, 25, 31, 0.94);
    color: #fffdf3;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

.pictionary-stepper-button:hover,
.pictionary-stepper-button:focus-visible {
    border-color: rgba(243, 240, 229, 0.34);
    background: rgba(34, 47, 54, 0.96);
}

.pictionary-stepper-button:disabled {
    opacity: 0.4;
}

.pictionary-stepper-card--hint {
    gap: 9px;
    text-align: center;
}

.pictionary-stepper-card--hint > .pictionary-stepper-label {
    justify-self: center;
    text-align: center;
}

.pictionary-stepper-card--worth {
    gap: 9px;
    min-width: 0;
    padding-inline: 8px;
    text-align: center;
}

.pictionary-stepper-card--worth .pictionary-stepper-row {
    grid-template-columns: 30px minmax(42px, 1fr) 30px;
    gap: 4px;
}

.pictionary-stepper-card--worth .pictionary-stepper-button {
    min-height: 34px;
}

.pictionary-stepper-card--worth .pictionary-stepper-value {
    font-size: 1rem;
}

.pictionary-segmented-control.pictionary-worth-mode-control {
    grid-template-columns: repeat(2, minmax(48px, 1fr));
    width: min(100%, 126px);
    justify-self: center;
}

.pictionary-segmented-control {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.pictionary-segmented-control.pictionary-hint-mode-control {
    grid-template-columns: minmax(58px, 1.24fr) minmax(38px, 0.86fr) minmax(36px, 0.76fr);
    gap: 5px;
}

.pictionary-segmented-button {
    min-width: 0;
    min-height: 34px;
    padding: 0 5px;
    border-radius: 999px;
    border: 1px solid rgba(243, 240, 229, 0.16);
    background: rgba(18, 27, 33, 0.82);
    color: #edf1ed;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.pictionary-segmented-label {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.pictionary-segmented-label--short {
    display: none;
}

.pictionary-shell.is-host-controller-view .pictionary-hint-mode-control .pictionary-segmented-label--full,
.pictionary-shell.is-controller-view .pictionary-hint-mode-control .pictionary-segmented-label--full {
    display: none;
}

.pictionary-shell.is-host-controller-view .pictionary-hint-mode-control .pictionary-segmented-label--short,
.pictionary-shell.is-controller-view .pictionary-hint-mode-control .pictionary-segmented-label--short {
    display: inline-block;
}

.pictionary-segmented-button:hover,
.pictionary-segmented-button:focus-visible {
    border-color: rgba(243, 240, 229, 0.34);
    background: rgba(34, 47, 54, 0.96);
}

.pictionary-segmented-button.is-selected {
    border-color: rgba(213, 179, 93, 0.5);
    background: linear-gradient(180deg, rgba(82, 76, 56, 0.94), rgba(38, 46, 42, 0.98));
    color: #fffdf3;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 18px rgba(0, 0, 0, 0.16);
}

.pictionary-controller-current {
    padding: 16px 18px;
    position: relative;
    width: 100%;
    min-height: 112px;
    overflow: hidden;
    appearance: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

.pictionary-controller-picker-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    padding: 10px;
    border-radius: 24px;
    border: 1px solid rgba(243, 240, 229, 0.14);
    background: rgba(16, 24, 30, 0.46);
}

.pictionary-controller-picker-panel.is-next-action {
    border-color: rgba(213, 179, 93, 0.58);
    box-shadow:
        inset 0 0 0 1px rgba(255, 252, 236, 0.08),
        0 0 0 1px rgba(213, 179, 93, 0.16),
        0 0 28px rgba(213, 179, 93, 0.1);
}

.pictionary-controller-picker-panel:not(.is-next-action) {
    align-self: start;
}

.pictionary-controller-current.is-highlighted {
    height: 132px;
    min-height: 132px;
    align-content: center;
    border-color: rgba(213, 179, 93, 0.56);
    box-shadow:
        inset 0 0 0 1px rgba(255, 252, 236, 0.1),
        0 0 0 1px rgba(213, 179, 93, 0.14),
        0 18px 34px rgba(0, 0, 0, 0.26);
    background:
        radial-gradient(circle at 88% 12%, rgba(247, 232, 179, 0.14), transparent 24%),
        linear-gradient(180deg, rgba(52, 60, 54, 0.9), rgba(22, 31, 36, 0.96));
}

.pictionary-controller-current.is-private {
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
}

.pictionary-controller-current.is-preview .pictionary-controller-private-content {
    padding-inline-end: 0;
}

.pictionary-controller-private-content {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding-inline-end: 72px;
    transition:
        filter 120ms ease,
        opacity 120ms ease;
}

.pictionary-controller-current.is-private .pictionary-controller-private-content {
    filter: blur(8px);
    opacity: 0.58;
}

.pictionary-controller-current.is-private:active .pictionary-controller-private-content,
.pictionary-controller-current.is-private:focus-visible .pictionary-controller-private-content {
    filter: none;
    opacity: 1;
}

.pictionary-controller-current.is-private:focus-visible {
    outline: 2px solid rgba(255, 244, 191, 0.86);
    outline-offset: 3px;
}

.pictionary-controller-reveal-cue {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 244, 191, 0.5);
    background: linear-gradient(180deg, rgba(255, 230, 151, 0.96), rgba(198, 139, 43, 0.96)), #c68b2b;
    color: #2c1905;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 8px 16px rgba(12, 7, 2, 0.24);
}

.pictionary-controller-current.is-private:active .pictionary-controller-reveal-cue,
.pictionary-controller-current.is-private:focus-visible .pictionary-controller-reveal-cue {
    background: linear-gradient(180deg, rgba(255, 244, 191, 0.98), rgba(220, 166, 58, 0.98)), #dca63a;
}

.pictionary-controller-current.is-empty {
    min-height: 112px;
    place-items: center;
    background: linear-gradient(180deg, rgba(33, 46, 53, 0.76), rgba(17, 25, 31, 0.9)), rgba(17, 25, 31, 0.9);
    border-style: dashed;
    border-color: rgba(213, 179, 93, 0.34);
    box-shadow: inset 0 0 0 1px rgba(255, 252, 236, 0.04);
}

.pictionary-controller-wordline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.18em 0.42em;
    min-width: 0;
}

.pictionary-controller-word {
    font-size: clamp(1.34rem, 2.2vw, 1.78rem);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.pictionary-controller-word.is-translation {
    color: #efe2b8;
    -webkit-line-clamp: 1;
}

.pictionary-controller-hint {
    margin: 0;
    color: #c8d1ce;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.45;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.pictionary-controller-placeholder {
    color: #dce3df;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.pictionary-entry-grid {
    gap: 6px;
    overscroll-behavior: contain;
}

.pictionary-entry-button {
    position: relative;
    gap: 3px;
    min-height: 56px;
    padding: 7px 10px;
}

.pictionary-entry-korean {
    font-size: 0.82rem;
}

.pictionary-entry-stem {
    color: rgba(211, 221, 216, 0.78);
    font-size: 0.72rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.pictionary-entry-used {
    position: static;
    min-height: 19px;
    padding: 0 6px;
    font-size: 0.66rem;
}

.pictionary-shell.is-controller-view .pictionary-role-card {
    min-height: calc(100vh - 112px);
    min-height: calc(100svh - 112px);
    max-height: none;
    padding: 14px 10px;
    overflow: hidden;
}

.pictionary-shell.is-controller-view .pictionary-controller-shell {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
}

.pictionary-shell.is-controller-view .pictionary-controller-topline {
    gap: 8px;
}

.pictionary-shell.is-controller-view .pictionary-controller-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pictionary-shell.is-controller-view .pictionary-stepper-card {
    gap: 5px;
    padding: 8px 10px;
    border-radius: 16px;
}

.pictionary-shell.is-controller-view .pictionary-stepper-row {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 7px;
}

.pictionary-shell.is-controller-view .pictionary-stepper-button {
    min-height: 34px;
    border-radius: 12px;
}

.pictionary-shell.is-controller-view .pictionary-segmented-button {
    min-height: 31px;
    padding: 0 8px;
}

.pictionary-shell.is-controller-view .pictionary-stepper-card--worth .pictionary-segmented-button {
    padding-inline: 10px;
    font-size: 0.7rem;
}

.pictionary-shell.is-controller-view .pictionary-controller-current {
    padding: 13px 15px;
}

.pictionary-shell.is-controller-view .pictionary-controller-current.is-highlighted,
.pictionary-shell.is-host-controller-view .pictionary-controller-current.is-highlighted {
    height: clamp(104px, 14svh, 132px);
    min-height: clamp(104px, 14svh, 132px);
}

.pictionary-shell.is-controller-view .pictionary-controller-private-content,
.pictionary-shell.is-host-controller-view .pictionary-controller-private-content {
    padding-inline-end: 64px;
}

.pictionary-shell.is-controller-view .pictionary-controller-current.is-empty {
    height: clamp(104px, 14svh, 132px);
    min-height: clamp(104px, 14svh, 132px);
}

.pictionary-shell.is-host-controller-view .pictionary-controller-current.is-empty {
    height: clamp(104px, 14svh, 132px);
    min-height: clamp(104px, 14svh, 132px);
}

.pictionary-shell.is-controller-view .pictionary-controller-actions {
    gap: 8px;
}

.pictionary-shell.is-controller-view .pictionary-controller-picker-panel {
    min-height: 0;
}

.pictionary-shell.is-controller-view .pictionary-entry-grid {
    min-height: 0;
    max-height: none;
}

.pictionary-shell.is-controller-view .pictionary-entry-button {
    min-height: 56px;
}

@media (max-width: 820px) {
    .pictionary-shell.is-controller-view .pictionary-entry-grid,
    .pictionary-shell.is-host-controller-view .pictionary-entry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pictionary-shell.is-controller-view .pictionary-entry-button,
    .pictionary-shell.is-host-controller-view .pictionary-entry-button {
        min-height: 62px;
        padding: 8px 38px 8px 10px;
    }

    .pictionary-shell.is-controller-view .pictionary-entry-used,
    .pictionary-shell.is-host-controller-view .pictionary-entry-used {
        position: static;
        margin-top: 2px;
    }
}

.pictionary-roster-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.pictionary-roster-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pictionary-roster-name-row .roster-name {
    min-width: 0;
}

.pictionary-score-popup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 34px;
    min-height: 26px;
    padding: 0 9px 2px;
    border-radius: 999px;
    border: 1px solid rgba(255, 244, 191, 0.52);
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.34), transparent 36%),
        linear-gradient(180deg, rgba(255, 225, 124, 0.98), rgba(196, 133, 38, 0.98));
    color: #2b1906;
    font-size: 0.96rem;
    font-weight: 950;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow:
        0 8px 18px rgba(16, 10, 3, 0.24),
        0 0 18px rgba(255, 225, 124, 0.24);
    pointer-events: none;
    transform-origin: 50% 100%;
    animation: pictionary-score-popup 1850ms cubic-bezier(0.18, 0.84, 0.24, 1) forwards;
}

.pictionary-score-popup.is-big-award {
    min-width: 42px;
    min-height: 30px;
    border-color: rgba(255, 244, 191, 0.68);
    font-size: 1.08rem;
    box-shadow:
        0 10px 22px rgba(16, 10, 3, 0.28),
        0 0 24px rgba(255, 225, 124, 0.34);
}

.pictionary-card-metrics {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    align-self: stretch;
    flex: 0 0 auto;
    gap: 6px;
    min-width: 82px;
    padding: 0;
    margin-block: calc(var(--player-roster-row-padding-y, 8px) * -1);
    margin-right: calc(var(--player-roster-row-padding-x, 10px) * -1);
    pointer-events: none;
}

.pictionary-card-metrics.is-score-adjustable {
    z-index: 5;
    pointer-events: auto;
}

.pictionary-shell.is-host-view .pictionary-roster-card .pictionary-card-metrics.is-score-adjustable {
    margin-right: calc(var(--player-roster-action-size, 24px) + 2px);
}

.pictionary-card-metric {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0;
    border: 0;
    color: #dce3df;
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pictionary-card-metric:is(button) {
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    cursor: pointer;
}

.pictionary-card-metric--points {
    align-self: stretch;
    min-width: 38px;
    padding: 0 10px;
    justify-content: center;
    border-left: 1px solid rgba(145, 237, 247, 0.62);
    background: linear-gradient(90deg, rgba(56, 157, 170, 0.24), rgba(22, 72, 82, 0.5)), rgba(13, 35, 41, 0.44);
    color: #d5fbff;
    text-align: center;
    box-shadow:
        inset 1px 0 0 rgba(196, 251, 255, 0.18),
        inset 0 0 16px rgba(72, 207, 221, 0.11);
}

.pictionary-score-adjust-trigger {
    transition:
        background 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease;
}

.pictionary-score-adjust-trigger:hover,
.pictionary-score-adjust-trigger:focus-visible,
.pictionary-score-adjust-trigger[aria-expanded="true"] {
    background: linear-gradient(90deg, rgba(77, 189, 202, 0.34), rgba(22, 88, 99, 0.62)), rgba(13, 45, 52, 0.56);
    box-shadow:
        inset 1px 0 0 rgba(196, 251, 255, 0.24),
        inset 0 0 18px rgba(72, 207, 221, 0.16),
        0 0 0 2px rgba(145, 237, 247, 0.16);
}

.pictionary-score-adjust-popover {
    position: absolute;
    top: 50%;
    right: calc(100% + 7px);
    z-index: 36;
    display: none;
    grid-template-columns: repeat(2, 28px);
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(145, 237, 247, 0.26);
    background: rgba(15, 31, 36, 0.98);
    transform: translateY(-50%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 26px rgba(0, 0, 0, 0.3);
}

.pictionary-score-adjust-popover.is-open {
    display: grid;
}

.pictionary-score-adjust-popover::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -5px;
    width: 9px;
    height: 9px;
    background: inherit;
    border-top: 1px solid rgba(145, 237, 247, 0.26);
    border-right: 1px solid rgba(145, 237, 247, 0.26);
    transform: translateY(-50%) rotate(45deg);
}

.pictionary-score-adjust-button {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0 0 2px;
    border-radius: 999px;
    border: 1px solid rgba(216, 253, 255, 0.2);
    background: rgba(25, 51, 58, 0.96);
    color: #d5fbff;
    font-family: inherit;
    font-size: 1.18rem;
    font-weight: 950;
    line-height: 1;
    cursor: pointer;
}

.pictionary-score-adjust-button:hover,
.pictionary-score-adjust-button:focus-visible {
    background: rgba(40, 87, 96, 0.98);
    border-color: rgba(216, 253, 255, 0.42);
}

.pictionary-card-metric--tries {
    gap: 3px;
    min-width: 31px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid rgba(213, 179, 93, 0.48);
    border-radius: 999px;
    background: rgba(39, 43, 34, 0.82);
    color: #efe0b0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pictionary-card-metric--tries.is-exhausted {
    border-color: rgba(186, 194, 191, 0.4);
    background: rgba(40, 45, 46, 0.82);
    color: #c1c7c4;
}

.pictionary-card-metric strong {
    color: currentColor;
    font-weight: 950;
    line-height: 1;
}

.pictionary-card-metric--points strong {
    font-size: 1.12rem;
}

.pictionary-card-metric--tries strong {
    font-size: 0.84rem;
}

.pictionary-metric-icon {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
}

.pictionary-guess-field.is-misspelling input {
    border-color: rgba(255, 171, 68, 0.82);
    box-shadow: 0 0 0 3px rgba(255, 171, 68, 0.18);
    background: rgba(93, 45, 8, 0.18);
}

.pictionary-word-bank-panel {
    position: absolute;
    top: 92px;
    right: 18px;
    bottom: 92px;
    z-index: 4;
    width: min(420px, calc(100% - 36px));
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 16px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(28, 39, 46, 0.94), rgba(14, 22, 28, 0.98)), rgba(16, 24, 30, 0.98);
    border: 1px solid rgba(243, 240, 229, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 28px 48px rgba(0, 0, 0, 0.32);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.pictionary-shell.is-host-view .pictionary-roster-card {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    overflow: visible;
    padding: 14px;
    background: linear-gradient(180deg, rgba(32, 45, 52, 0.78), rgba(16, 24, 30, 0.98)), var(--card);
    border-color: rgba(243, 240, 229, 0.18);
}

.pictionary-shell.is-host-view .pictionary-roster-card .roster-head {
    position: absolute;
    top: -1px;
    right: -1px;
    z-index: 7;
    justify-content: flex-end;
    gap: 0;
    margin: 0;
    pointer-events: none;
}

.pictionary-shell.is-host-view .pictionary-roster-card .maze-roster-label {
    display: none;
}

.pictionary-shell.is-host-view .pictionary-roster-card .roster-count {
    font-size: 0.84rem;
}

.pictionary-shell.is-host-controller-view .pictionary-roster-card .roster-head {
    display: none;
}

.pictionary-shell.is-host-view .pictionary-roster-card .roster-body {
    min-height: 0;
    overflow-y: auto;
    padding: 8px 4px 0 0;
}

.pictionary-shell.is-host-view .pictionary-roster-card .roster-list {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--player-roster-gap);
    padding-right: 0;
}

.pictionary-shell.is-host-view .pictionary-roster-card .roster-list.player-roster-density-roomy,
.pictionary-shell.is-host-view .pictionary-roster-card .roster-list.pictionary-roster-columns-1 {
    grid-template-columns: minmax(0, 1fr);
}

.pictionary-shell.is-host-view .pictionary-roster-card .roster-list.pictionary-roster-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pictionary-shell.is-host-view .pictionary-roster-card .roster-list.player-roster-density-dense {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.active-layout.is-host-view .roster-list.player-roster-density-balanced {
    --player-roster-column-min: var(--ziar-player-roster-balanced-column-min);
    --player-roster-row-min: var(--ziar-player-roster-balanced-row-min);
    --player-roster-gap: var(--ziar-player-roster-balanced-gap);
    --player-roster-row-padding-y: var(--ziar-player-roster-balanced-row-padding-y);
    --player-roster-row-padding-x: var(--ziar-player-roster-balanced-row-padding-x);
    --player-roster-action-size: var(--ziar-player-roster-balanced-action-size);
    --player-roster-badge-min-height: var(--ziar-player-roster-balanced-badge-min-height);
    --player-roster-name-font-size: var(--ziar-player-roster-balanced-name-font-size);
    --player-roster-badge-font-size: var(--ziar-player-roster-balanced-badge-font-size);
}

.pictionary-shell.is-host-view .pictionary-roster-card .roster-list.player-roster-density-balanced {
    --player-roster-column-min: 118px;
    --player-roster-row-min: 38px;
    --player-roster-gap: 5px;
    --player-roster-row-padding-y: 4px;
    --player-roster-row-padding-x: 7px;
    --player-roster-action-size: 22px;
    --player-roster-badge-min-height: 17px;
    --player-roster-name-font-size: 0.8rem;
    --player-roster-badge-font-size: 0.58rem;
}

.pictionary-shell.is-host-view .pictionary-roster-card .roster-row {
    gap: var(--player-roster-gap);
    min-height: var(--player-roster-row-min);
    padding: var(--player-roster-row-padding-y) var(--player-roster-row-padding-x);
    border-radius: 10px;
}

.pictionary-shell.is-host-view .pictionary-roster-card .pictionary-roster-copy {
    flex: 1 1 auto;
    gap: 0;
}

.pictionary-shell.is-host-view .pictionary-roster-card .pictionary-roster-name-row {
    gap: var(--player-roster-gap);
    min-width: 0;
}

.pictionary-shell.is-host-view .pictionary-roster-card .roster-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--player-roster-name-font-size);
    line-height: 1.15;
}

.pictionary-shell.is-host-view .pictionary-roster-card .player-roster-actions {
    --player-roster-action-strip-width: auto;
    position: relative;
    inset: auto;
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    opacity: 1;
}

.pictionary-shell.is-host-view .pictionary-roster-card .player-roster-actions-trigger.pictionary-roster-name-trigger {
    justify-content: start;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-size: var(--player-roster-name-font-size);
    font-weight: 850;
    line-height: 1.16;
    text-align: left;
    box-shadow: none;
}

.pictionary-shell.is-host-view .pictionary-roster-card .player-roster-actions-trigger.pictionary-roster-name-trigger:hover,
.pictionary-shell.is-host-view .pictionary-roster-card .player-roster-actions-trigger.pictionary-roster-name-trigger:focus-visible,
.pictionary-shell.is-host-view
    .pictionary-roster-card
    .player-roster-actions.is-open
    .player-roster-actions-trigger.pictionary-roster-name-trigger {
    color: #d5fbff;
    background: transparent;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.pictionary-shell.is-host-view .pictionary-roster-card .pictionary-roster-name-trigger .player-roster-actions-trigger-label {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.pictionary-shell.is-host-view .pictionary-roster-card .player-roster-actions-menu {
    left: 0;
    right: auto;
}

.pictionary-shell.is-host-view .pictionary-roster-card .pictionary-card-metrics.is-score-adjustable {
    margin-right: calc(var(--player-roster-row-padding-x, 10px) * -1);
}

.pictionary-shell.is-host-view .pictionary-roster-card .pictionary-roster-away-badge {
    flex: 0 0 auto;
    min-height: 15px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 140, 151, 0.32);
    background: rgba(106, 20, 33, 0.86);
    color: #ffd7dc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--player-roster-badge-font-size);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
}

.pictionary-shell.is-host-view
    .pictionary-roster-card
    .roster-list.player-roster-density-dense
    .pictionary-roster-name-trigger
    .player-roster-actions-trigger-label,
.pictionary-shell.is-host-view .pictionary-roster-card .roster-list.player-roster-density-dense .roster-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pictionary-shell.is-host-view .pictionary-roster-card .roster-row.is-away .pictionary-roster-name-row {
    align-content: center;
    flex-wrap: wrap;
    row-gap: 2px;
}

.pictionary-shell.is-host-view .pictionary-roster-card .roster-row.is-away .roster-name {
    flex-basis: 100%;
}

.pictionary-shell.is-host-view
    .pictionary-roster-card
    .roster-list.player-roster-density-dense
    .roster-row.is-away
    .pictionary-roster-name-row {
    flex-wrap: nowrap;
}

.pictionary-shell.is-host-view .pictionary-roster-card .roster-list.player-roster-density-dense .roster-row.is-away .roster-name {
    flex-basis: auto;
}

.pictionary-shell.is-host-view .pictionary-roster-card .roster-row.is-away {
    background: radial-gradient(circle at 14% 22%, rgba(255, 123, 137, 0.18), transparent 30%), rgba(42, 14, 21, 0.96);
    border-color: rgba(255, 132, 144, 0.28);
    box-shadow:
        inset 0 0 0 1px rgba(255, 216, 220, 0.05),
        0 10px 24px rgba(38, 5, 12, 0.22);
}

.pictionary-shell.is-host-view .pictionary-roster-card .roster-row.is-solved {
    background: radial-gradient(circle at 12% 18%, rgba(109, 255, 166, 0.18), transparent 32%), rgba(19, 54, 39, 0.94);
    border-color: rgba(120, 255, 174, 0.32);
}

.pictionary-word-bank-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pictionary-word-bank-table-shell {
    min-height: 0;
    overflow: auto;
}

.pictionary-word-bank-table {
    width: 100%;
    border-collapse: collapse;
    color: #fffdf3;
    font-size: 0.9rem;
}

.pictionary-word-bank-table th,
.pictionary-word-bank-table td {
    padding: 10px 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pictionary-word-bank-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(18, 27, 33, 0.96);
    color: #dce3df;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@keyframes pictionary-magnifier-fall {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    20% {
        opacity: 1;
        transform: translate(0, 4px) rotate(-4deg) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--pictionary-fall-x, 0px), 56px) rotate(-18deg) scale(0.92);
    }
}

@keyframes pictionary-score-pop {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 225, 124, 0);
    }

    34% {
        transform: scale(1.12);
        box-shadow:
            0 0 0 6px rgba(255, 225, 124, 0.2),
            0 0 26px rgba(255, 225, 124, 0.28);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 225, 124, 0);
    }
}

@keyframes pictionary-score-popup {
    0% {
        opacity: 0;
        transform: translateY(8px) rotate(-2deg) scale(0.58);
    }

    18% {
        opacity: 1;
        transform: translateY(-4px) rotate(1deg) scale(1.24);
    }

    44% {
        opacity: 1;
        transform: translateY(-9px) rotate(0deg) scale(1.04);
    }

    100% {
        opacity: 0;
        transform: translateY(-24px) rotate(2deg) scale(0.9);
    }
}

@keyframes pictionary-celebration-copy {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.86);
    }

    22%,
    88% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-14px) scale(0.96);
    }
}

@keyframes pictionary-celebration-glow {
    0% {
        opacity: 0;
        transform: scale(0.42);
    }

    28% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

@keyframes pictionary-celebration-ring {
    0% {
        opacity: 0;
        transform: scale(0.34);
    }

    26% {
        opacity: 0.92;
    }

    100% {
        opacity: 0;
        transform: scale(1.42);
    }
}

@keyframes pictionary-celebration-burst {
    0% {
        opacity: 0;
        transform: scale(0.42) rotate(0deg);
    }

    20% {
        opacity: 0.86;
    }

    100% {
        opacity: 0;
        transform: scale(1.18) rotate(34deg);
    }
}

@keyframes pictionary-worth-burst-value {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.74);
    }

    24%,
    72% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px) scale(0.92);
    }
}

@keyframes pictionary-worth-burst-particle {
    0% {
        opacity: 0;
        transform: rotate(var(--burst-angle, 0deg)) translateY(0) scale(0.4);
    }

    18% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(var(--burst-angle, 0deg)) translateY(calc(0px - var(--burst-distance, 96px))) scale(0.88);
    }
}

.setup-card,
.waiting-card,
.lobby-roster-card,
.maze-stage-card,
.active-side-card,
.active-host-utility-card {
    display: grid;
    gap: 16px;
}

.roster-card {
    display: grid;
    gap: 16px;
    padding: 20px;
    background: var(--player-roster-card-bg, linear-gradient(180deg, rgba(16, 49, 75, 0.55), rgba(7, 22, 36, 0.95)), var(--card));
    border: 1px solid var(--player-roster-card-border, var(--line));
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.waiting-stats,
.maze-metrics {
    flex-wrap: wrap;
}

.stat-chip,
.metric-pill {
    display: grid;
    gap: 4px;
    min-width: 116px;
}

.setup-footer {
    flex-wrap: wrap;
}

.participant-list,
.roster-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.list-empty,
.roster-empty {
    padding: 4px 2px;
}

.participant-row,
.roster-row {
    --player-roster-placement-corner: transparent;
    --player-roster-placement-glow: transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--player-roster-row-bg, rgba(4, 17, 27, 0.88));
    border: 1px solid var(--player-roster-row-border, rgba(150, 255, 247, 0.14));
}

.participant-row.is-away,
.roster-row.is-away {
    background: radial-gradient(circle at 14% 22%, rgba(255, 123, 137, 0.18), transparent 30%), rgba(42, 14, 21, 0.96);
    border-color: rgba(255, 132, 144, 0.28);
    box-shadow:
        inset 0 0 0 1px rgba(255, 216, 220, 0.05),
        0 10px 24px rgba(38, 5, 12, 0.22);
}

.participant-row.is-rename-pending,
.roster-row.is-rename-pending,
.vault-team-row.is-rename-pending {
    border-color: rgba(255, 204, 94, 0.48);
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 204, 94, 0.18), transparent 32%),
        var(--player-roster-row-bg, rgba(35, 27, 12, 0.94));
    box-shadow:
        inset 0 0 0 1px rgba(255, 236, 180, 0.08),
        0 0 0 1px rgba(255, 204, 94, 0.1);
}

.participant-row.is-away .participant-name,
.roster-row.is-away .roster-name {
    color: #fff7f8;
}

.participant-row.is-rename-pending .participant-name,
.roster-row.is-rename-pending .roster-name,
.roster-row.is-rename-pending .player-roster-actions-trigger-label,
.vault-team-row.is-rename-pending .player-roster-actions-trigger-label {
    color: #ffe8a3;
    font-style: italic;
}

.participant-identity {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.roster-row.is-active-view {
    border-color: rgba(255, 223, 148, 0.46);
    box-shadow:
        inset 0 0 0 1px rgba(255, 236, 193, 0.08),
        0 0 0 1px rgba(255, 223, 148, 0.12);
    background: radial-gradient(circle at 12% 18%, rgba(255, 227, 154, 0.12), transparent 26%), rgba(34, 24, 15, 0.94);
}

.participant-row::before,
.roster-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--player-roster-placement-corner), white 18%),
        var(--player-roster-placement-corner)
    );
    clip-path: polygon(0 0, 100% 0, 0 100%);
    border-top-left-radius: inherit;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 7px var(--player-roster-placement-glow));
}

.participant-row.is-placement-1,
.roster-row.is-placement-1 {
    --player-roster-placement-corner: #d4af37;
    --player-roster-placement-glow: rgba(212, 175, 55, 0.42);
}

.participant-row.is-placement-2,
.roster-row.is-placement-2 {
    --player-roster-placement-corner: #b8c1cc;
    --player-roster-placement-glow: rgba(184, 193, 204, 0.36);
}

.participant-row.is-placement-3,
.roster-row.is-placement-3 {
    --player-roster-placement-corner: #cd7f32;
    --player-roster-placement-glow: rgba(205, 127, 50, 0.38);
}

.participant-row.is-placement-1::before,
.participant-row.is-placement-2::before,
.participant-row.is-placement-3::before,
.roster-row.is-placement-1::before,
.roster-row.is-placement-2::before,
.roster-row.is-placement-3::before {
    opacity: 1;
}

.participant-name,
.roster-name,
.metric-value {
    color: var(--text);
    font-weight: 700;
}

.participant-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-roster-actions {
    --player-roster-action-strip-width: 30px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    width: var(--player-roster-action-strip-width);
    opacity: 0;
    pointer-events: auto;
    transition: opacity 140ms ease;
}

.participant-row:hover > .player-roster-actions,
.participant-row:focus-within > .player-roster-actions,
.roster-row:hover > .player-roster-actions,
.roster-row:focus-within > .player-roster-actions,
.player-roster-actions.is-open {
    opacity: 1;
    pointer-events: auto;
}

.player-roster-actions-trigger {
    width: 100%;
    min-width: 0;
    min-height: var(--player-roster-row-min, 32px);
    padding: 0;
    border: 0;
    border-left: 1px solid var(--player-roster-action-border, rgba(170, 229, 255, 0.2));
    border-radius: 0 9px 9px 0;
    background: var(--player-roster-action-bg, linear-gradient(180deg, rgba(11, 29, 45, 0.44), rgba(5, 18, 29, 0.7)));
    color: var(--player-roster-action-color, #eefcff);
    display: inline-grid;
    place-items: center;
    flex: 1 1 auto;
    cursor: pointer;
}

.player-roster-actions-trigger span:not(.player-roster-actions-trigger-label) {
    display: inline-grid;
    place-items: center;
    width: 4px;
    height: 18px;
    font-size: 0;
}

.player-roster-actions-trigger span:not(.player-roster-actions-trigger-label)::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    box-shadow:
        0 -7px 0 var(--player-roster-action-dot-shadow, rgba(238, 252, 255, 0.86)),
        0 7px 0 var(--player-roster-action-dot-shadow, rgba(238, 252, 255, 0.86));
}

.player-roster-actions-trigger-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-roster-actions-trigger:hover,
.player-roster-actions-trigger:focus-visible,
.player-roster-actions.is-open .player-roster-actions-trigger {
    border-color: var(--player-roster-action-hover-border, rgba(196, 241, 255, 0.34));
    background: var(--player-roster-action-hover-bg, linear-gradient(180deg, rgba(18, 46, 68, 0.62), rgba(7, 25, 39, 0.86)));
}

.player-roster-actions-menu {
    position: absolute;
    top: auto;
    right: 0;
    bottom: calc(100% + 5px);
    z-index: 30;
    display: none;
    min-width: 104px;
    padding: 4px;
    border: 1px solid var(--player-roster-action-border, rgba(170, 229, 255, 0.2));
    border-radius: 10px;
    background: var(--player-roster-action-menu-bg, rgba(4, 17, 27, 0.98));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
    transform-origin: 100% 100%;
}

.player-roster-actions-menu[popover] {
    margin: 0;
    inset: auto;
}

.player-roster-actions-menu.is-floating {
    position: fixed;
    right: auto;
    bottom: auto;
    z-index: 1000;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform-origin: 100% 0;
}

.player-roster-actions-menu.is-floating[data-roster-actions-placement="above"] {
    transform-origin: 100% 100%;
}

.player-roster-actions.is-open .player-roster-actions-menu {
    display: grid;
    gap: 3px;
}

.participant-row:has(.player-roster-actions.is-open),
.roster-row:has(.player-roster-actions.is-open) {
    position: relative;
    z-index: 12;
}

.player-roster-action-item {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-width: 0;
    min-height: 28px;
    padding: 6px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--player-roster-action-color, #eefcff);
    font-size: 0.74rem;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
}

.player-roster-action-item:hover,
.player-roster-action-item:focus-visible {
    background: var(--player-roster-action-item-hover-bg, rgba(170, 229, 255, 0.12));
}

.player-roster-action-item.participant-kick-button {
    color: #ffd9de;
}

.participant-identity .participant-name,
.participant-identity .roster-name,
.pictionary-roster-name-row .roster-name {
    flex: 1 1 auto;
}

.participant-statuses {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: 10px;
}

.participant-badge {
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(170, 229, 255, 0.16);
    background: rgba(9, 24, 38, 0.58);
    color: #eefcff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.participant-badge-complete {
    padding-inline: 8px;
    color: #ffe39b;
    border-color: rgba(255, 215, 130, 0.24);
    background: rgba(54, 33, 8, 0.82);
    letter-spacing: 0;
}

.participant-badge-away {
    min-width: 38px;
    min-height: 20px;
    padding: 0 7px;
    color: #ffd7dc;
    border-color: rgba(255, 140, 151, 0.28);
    background: rgba(106, 20, 33, 0.86);
    font-size: 0.62rem;
    letter-spacing: 0;
    line-height: 1;
}

.participant-badge-away::before {
    content: none;
}

.host-presence-card .participant-badge-away,
.player-lobby-roster-card .participant-badge-away {
    min-width: 34px;
    min-height: var(--player-roster-badge-min-height);
    padding: 0 6px;
}

.active-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    height: 100%;
    align-items: stretch;
}

.active-layout:not(.is-host-view) .active-side-card {
    display: none;
}

.active-layout.is-host-view {
    grid-template-columns: minmax(0, 1fr) minmax(288px, 352px);
}

.maze-stage-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.active-side-card {
    display: grid;
    gap: 16px;
    align-content: stretch;
    min-height: 0;
    height: 100%;
}

.active-side-card.has-host-utility {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
}

.active-host-utility-card {
    align-content: start;
    gap: 14px;
    padding: 16px 18px 18px;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 219, 142, 0.16), transparent 28%),
        linear-gradient(180deg, rgba(93, 63, 34, 0.9), rgba(29, 20, 11, 0.98)), rgba(26, 19, 12, 0.98);
    border-color: rgba(214, 168, 100, 0.28);
}

.active-host-join-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "code qr";
    align-items: start;
    gap: 14px;
    min-width: 0;
}

.active-room-qr-button {
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    grid-area: qr;
    justify-items: start;
    justify-self: end;
    align-self: start;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
}

.active-room-qr-button:focus-visible {
    outline: 2px solid rgba(164, 255, 250, 0.46);
    outline-offset: 4px;
}

.active-room-code-stack {
    grid-area: code;
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    padding-top: 2px;
}

.active-room-code-display {
    font-size: clamp(2.8rem, 3.9vw, 4.15rem);
    line-height: 0.82;
    white-space: nowrap;
}

.room-qr-frame.active-room-qr-frame {
    width: var(--ziar-qr-active-room-frame-width);
    margin: 0;
    padding: var(--ziar-qr-compact-frame-padding);
    border-radius: var(--ziar-qr-active-room-frame-radius);
    box-shadow:
        inset 0 0 0 1px rgba(9, 20, 30, 0.06),
        0 14px 24px rgba(0, 0, 0, 0.2);
}

.active-layout.is-host-view .room-qr-frame.active-room-qr-frame {
    width: var(--ziar-qr-active-room-host-frame-width);
}

.room-qr-frame.active-room-qr-frame .room-qr-placeholder {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
}

.active-host-utility-actions {
    display: grid;
    gap: 10px;
}

.active-host-participation-field {
    width: 100%;
    min-height: 46px;
    padding-inline: 14px;
    background: rgba(22, 14, 8, 0.58);
    border-color: rgba(255, 224, 152, 0.22);
}

.active-host-participation-field input {
    accent-color: #f2bc52;
}

.active-host-utility-actions .secondary-button {
    width: 100%;
    min-height: 46px;
    padding: 12px 16px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
}

.active-layout.is-host-view .roster-card {
    order: 2;
    position: relative;
    min-height: 0;
    height: 100%;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: 14px;
}

.active-layout.is-host-view .active-host-utility-card {
    order: 1;
}

.active-layout.is-host-view .roster-head {
    position: absolute;
    top: -1px;
    right: -1px;
    z-index: 7;
    justify-content: flex-end;
    gap: 0;
    margin: 0;
    pointer-events: none;
}

.active-layout.is-host-view .maze-roster-label {
    display: none;
}

.active-layout.is-host-view .roster-count {
    font-size: 0.84rem;
}

.active-layout.is-host-view .roster-body {
    min-height: 0;
    overflow-y: auto;
    padding: 8px 4px 0 0;
}

.active-layout.is-host-view .roster-body:has(.player-roster-density-roomy) {
    max-height: none;
    overflow-y: visible;
}

.active-layout.is-host-view .roster-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: var(--player-roster-gap);
    padding-right: 0;
}

.active-layout.is-host-view .roster-list.player-roster-density-roomy {
    grid-template-columns: minmax(0, 1fr);
}

.active-layout.is-host-view .roster-list.player-roster-density-balanced,
.active-layout.is-host-view .roster-list.player-roster-density-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.active-layout.is-host-view .roster-row {
    align-items: center;
    flex-direction: row;
    gap: var(--player-roster-gap);
    min-height: var(--player-roster-row-min);
    padding: var(--player-roster-row-padding-y) var(--player-roster-row-padding-x);
    border-radius: 10px;
}

.active-layout.is-host-view .participant-identity {
    flex: 1 1 auto;
    gap: var(--player-roster-gap);
}

.active-layout.is-host-view .roster-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--player-roster-name-font-size);
    line-height: 1.15;
}

.active-layout.is-host-view .roster-meta {
    margin-left: auto;
    white-space: nowrap;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1.1;
}

.active-layout.is-host-view .roster-meta-running {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 28px;
}

.roster-progress-arrow {
    position: relative;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: rgba(238, 209, 139, 0.72);
}

.roster-progress-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    width: 6px;
    height: 6px;
    border-top: 2px solid rgba(238, 209, 139, 0.82);
    border-right: 2px solid rgba(238, 209, 139, 0.82);
    transform: translateY(-50%) rotate(45deg);
}

.roster-progress-relic {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #f2bd52;
    box-shadow:
        0 0 0 2px rgba(242, 189, 82, 0.14),
        0 0 10px rgba(242, 189, 82, 0.28);
}

.active-layout.is-host-view .player-roster-actions {
    --player-roster-action-strip-width: calc(var(--player-roster-action-size) + 4px);
}

.active-layout.is-host-view .roster-empty {
    padding: 12px 2px;
}

.maze-progress-panel {
    display: grid;
    gap: 12px;
    order: 1;
    position: relative;
    min-height: 38px;
    align-items: center;
}

.maze-passage-button {
    position: absolute;
    left: 50%;
    top: 16px;
    z-index: 3;
    transform: translateX(-50%);
    justify-self: center;
    overflow: hidden;
    isolation: isolate;
}

.maze-passage-button::after {
    content: "";
    position: absolute;
    inset: -30% -58%;
    z-index: 0;
    transform: translateX(-120%) rotate(16deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 251, 226, 0.34), rgba(255, 255, 255, 0));
    opacity: 0;
    pointer-events: none;
}

.maze-passage-button:hover {
    transform: translateX(-50%) translateY(-1px);
}

.maze-passage-button:active {
    transform: translateX(-50%) translateY(1px) scale(0.985);
}

.maze-passage-inline {
    position: absolute;
    left: 50%;
    top: 72px;
    z-index: 3;
    width: min(640px, calc(100% - 40px));
    padding: 14px 18px;
    transform: translateX(-50%);
    border-radius: 24px;
    border: 1px solid rgba(240, 205, 143, 0.28);
    background: linear-gradient(180deg, rgba(97, 67, 30, 0.34), rgba(24, 16, 9, 0.94));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #f6edd7;
    font-size: clamp(0.96rem, 0.34vw + 0.92rem, 1.08rem);
    font-weight: 700;
    line-height: 1.55;
    text-align: center;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--ziar-maze-passage-preview-lines, 3);
    white-space: normal;
    pointer-events: none;
}

.maze-passage-inline[hidden] {
    display: none;
}

.maze-passage-inline.is-truncated::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(1.6em + 12px);
    border-radius: 0 0 inherit inherit;
    background: linear-gradient(180deg, rgba(24, 16, 9, 0), rgba(24, 16, 9, 0.78) 58%, rgba(24, 16, 9, 0.96));
}

.maze-passage-button.is-mistake-flash {
    animation: passage-sheen 1600ms ease;
}

.maze-passage-button.is-mistake-flash::after {
    animation: passage-button-shimmer 1600ms ease;
}

.maze-stage-head {
    order: 3;
}

.maze-stage {
    order: 2;
    flex: 1 1 auto;
}

.maze-stage .maze-level-chip {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    min-height: 38px;
    padding: 0 14px;
}

.maze-viewer-badge {
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    max-width: min(52%, 240px);
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(5, 18, 29, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #eefcff;
    font-size: 0.96rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    pointer-events: none;
}

.maze-time-chip {
    position: absolute;
    right: 8px;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(8, 23, 31, 0.82);
    border: 1px solid rgba(118, 255, 228, 0.2);
    color: #eafff9;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 8px 18px rgba(0, 0, 0, 0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 0.92rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.maze-time-chip.has-best {
    min-width: 148px;
    color: #fff4c7;
    border-color: rgba(255, 222, 142, 0.24);
    background: rgba(35, 27, 14, 0.8);
    font-size: 0.82rem;
}

.maze-time-chip.is-paused {
    opacity: 0.82;
}

.maze-progress-bar {
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: rgba(78, 56, 27, 0.42);
    overflow: hidden;
}

.maze-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold), #c07a24);
    transition: width 240ms ease;
}

.maze-stage {
    position: relative;
    isolation: isolate;
    min-height: min(70vh, 620px);
    overflow: hidden;
    border-radius: calc(var(--radius-xl) - 4px);
    border: 1px solid rgba(214, 170, 103, 0.28);
    background:
        linear-gradient(
            180deg,
            rgb(var(--maze-level-tint-rgb, 255 255 255) / var(--maze-level-stage-wash, 0)),
            rgb(var(--maze-level-tint-rgb, 255 255 255) / var(--maze-level-stage-wash, 0))
        ),
        radial-gradient(circle at 50% 18%, rgba(255, 214, 124, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(78, 56, 33, 0.98), rgba(31, 22, 13, 1));
    touch-action: pan-y;
    overscroll-behavior: none;
}

.maze-stage.is-viewer-controlled {
    touch-action: none;
}

.maze-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgb(var(--maze-level-tint-rgb, 255 255 255) / var(--maze-level-stage-grid, 0)),
            rgb(var(--maze-level-tint-rgb, 255 255 255) / var(--maze-level-stage-grid, 0))
        ),
        linear-gradient(rgba(17, 11, 7, 0.28) 2px, transparent 2px), linear-gradient(90deg, rgba(17, 11, 7, 0.28) 2px, transparent 2px),
        linear-gradient(135deg, rgba(255, 226, 160, 0.03), transparent 34%),
        linear-gradient(118deg, transparent 0 46%, rgba(86, 58, 29, 0.2) 47%, transparent 48%),
        linear-gradient(64deg, transparent 0 30%, rgba(70, 46, 23, 0.16) 31%, transparent 32%),
        linear-gradient(154deg, transparent 0 62%, rgba(110, 77, 39, 0.14) 63%, transparent 64%);
    background-size:
        100% 100%,
        var(--maze-cell) var(--maze-cell),
        var(--maze-cell) var(--maze-cell),
        100% 100%,
        180px 180px,
        160px 160px,
        220px 220px;
    background-position:
        0 0,
        0 0,
        0 0,
        0 0,
        12px 18px,
        46px 62px,
        94px 28px;
}

.maze-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 191, 94, 0.06), transparent 18%),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 6%,
            rgba(0, 0, 0, 0.94) 12%,
            rgba(0, 0, 0, 0.64) 18%,
            rgba(0, 0, 0, 0.28) 24%,
            rgba(0, 0, 0, 0.06) 30%,
            rgba(0, 0, 0, 0) 38%,
            rgba(0, 0, 0, 0) 62%,
            rgba(0, 0, 0, 0.06) 70%,
            rgba(0, 0, 0, 0.28) 76%,
            rgba(0, 0, 0, 0.64) 82%,
            rgba(0, 0, 0, 0.94) 88%,
            rgba(0, 0, 0, 1) 94%,
            rgba(0, 0, 0, 1) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.92) 8%,
            rgba(0, 0, 0, 0.56) 16%,
            rgba(0, 0, 0, 0.2) 24%,
            rgba(0, 0, 0, 0.04) 32%,
            rgba(0, 0, 0, 0) 40%,
            rgba(0, 0, 0, 0) 60%,
            rgba(0, 0, 0, 0.04) 68%,
            rgba(0, 0, 0, 0.2) 76%,
            rgba(0, 0, 0, 0.56) 84%,
            rgba(0, 0, 0, 0.92) 92%,
            rgba(0, 0, 0, 1) 100%
        ),
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0) 0 34%,
            rgba(0, 0, 0, 0.06) 50%,
            rgba(0, 0, 0, 0.24) 68%,
            rgba(0, 0, 0, 0.7) 86%,
            rgba(0, 0, 0, 1) 100%
        );
    opacity: 0.92;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.maze-board-shell {
    position: absolute;
    inset: 0;
    transform: translate(
            calc(var(--board-translate-x, 50%) + var(--board-shift-x, 0px)),
            calc(var(--board-translate-y, 50%) + var(--board-shift-y, 0px))
        )
        rotate(var(--board-tilt, 0deg)) scale(var(--maze-board-scale, 1));
    will-change: transform;
    z-index: 1;
    transform-origin: center center;
}

.maze-board-canvas {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    pointer-events: none;
}

.maze-board {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.maze-avatar-layer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    z-index: 3;
}

.maze-avatar-layer.is-submerged {
    z-index: 0;
}

.maze-avatar {
    --avatar-hue: 178;
    width: var(--maze-avatar-size, calc(42px * var(--maze-board-scale, 1)));
    height: var(--maze-avatar-size, calc(42px * var(--maze-board-scale, 1)));
    border-radius: var(--maze-avatar-radius, calc(14px * var(--maze-board-scale, 1)));
    background: linear-gradient(180deg, hsl(var(--avatar-hue) 100% 82%), hsl(var(--avatar-hue) 88% 54%));
    border: var(--maze-avatar-border, calc(4px * var(--maze-board-scale, 1))) solid rgba(255, 255, 255, 0.76);
    box-shadow:
        0 0 0 var(--maze-avatar-halo, calc(8px * var(--maze-board-scale, 1))) hsl(var(--avatar-hue) 90% 62% / 0.12),
        0 0 0 1px rgba(43, 28, 14, 0.42),
        0 18px 26px rgba(0, 0, 0, 0.34);
    will-change: transform, opacity;
    transform: translate(0px, 0px) scale(1);
}

.maze-avatar.is-paper-white {
    background: linear-gradient(180deg, #ffffff, #edf4f5);
    border-color: rgba(52, 68, 74, 0.76);
    box-shadow:
        0 0 0 var(--maze-avatar-halo, calc(8px * var(--maze-board-scale, 1))) rgba(255, 255, 255, 0.15),
        0 0 0 1px rgba(24, 38, 45, 0.58),
        0 18px 26px rgba(0, 0, 0, 0.34);
}

.maze-pit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 88px;
    height: 88px;
    transform: translate(calc(-50% + var(--pit-x, 0px)), calc(-50% + var(--pit-y, 0px))) scale(0.82);
    transform-origin: center center;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(0, 0, 0, 0.92) 0 28%,
        rgba(16, 10, 8, 0.9) 38%,
        rgba(120, 214, 224, 0.28) 56%,
        rgba(110, 255, 235, 0.46) 70%,
        rgba(110, 255, 235, 0) 100%
    );
    box-shadow:
        inset 0 0 0 1px rgba(179, 255, 247, 0.18),
        0 0 36px rgba(90, 255, 232, 0.24),
        0 18px 30px rgba(0, 0, 0, 0.34);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}

.maze-pit::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 242, 190, 0.18) 0 20%,
            rgba(255, 214, 111, 0.18) 34%,
            rgba(255, 214, 111, 0.04) 54%,
            rgba(255, 214, 111, 0) 70%
        ),
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 52%);
}

.maze-flare {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translate(calc(-50% + var(--flare-x, 0px)), calc(-50% + var(--flare-y, 0px))) scale(0.2);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    background: radial-gradient(
        circle,
        rgba(255, 252, 219, 0.96) 0%,
        rgba(255, 212, 120, 0.82) 38%,
        rgba(213, 161, 61, 0.24) 68%,
        rgba(213, 161, 61, 0) 100%
    );
    box-shadow:
        0 0 10px rgba(255, 245, 184, 0.86),
        0 0 20px rgba(213, 161, 61, 0.24);
}

.maze-jump-trail {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--jump-trail-span, 104px);
    height: 12px;
    transform-origin: 0 50%;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    overflow: visible;
}

.maze-jump-trail::before,
.maze-jump-trail::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.maze-jump-trail::before {
    left: 0;
    top: 50%;
    width: 100%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(255, 244, 205, 0.52) 0%,
        rgba(255, 231, 156, 0.68) 12%,
        rgba(255, 219, 110, 0.92) 42%,
        rgba(246, 189, 62, 0.88) 70%,
        rgba(246, 189, 62, 0.12) 90%,
        rgba(246, 189, 62, 0) 100%
    );
}

.maze-jump-trail::after {
    right: -4px;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 250, 223, 0.96) 0 26%,
        rgba(255, 224, 135, 0.88) 46%,
        rgba(246, 189, 62, 0.44) 62%,
        rgba(246, 189, 62, 0) 78%
    );
}

.maze-fall-curtain {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    background: #000;
}

.maze-level-best-callout {
    position: absolute;
    left: 50%;
    top: 70px;
    z-index: 6;
    max-width: min(82%, 520px);
    transform: translate(-50%, -6px) scale(0.98);
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(24, 69, 58, 0.94), rgba(63, 45, 16, 0.94)), rgba(16, 35, 31, 0.92);
    border: 1px solid rgba(255, 230, 155, 0.34);
    color: #fff6d1;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 18px 34px rgba(0, 0, 0, 0.24);
    font-size: 0.92rem;
    font-weight: 850;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
}

.maze-level-best-callout[hidden] {
    display: none;
}

.maze-level-best-callout.is-active {
    animation: level-best-callout 1800ms cubic-bezier(0.18, 0.84, 0.2, 1) forwards;
}

.maze-flare::before,
.maze-flare::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 16px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 252, 219, 0), rgba(255, 252, 219, 0.92), rgba(255, 252, 219, 0));
}

.maze-flare::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.maze-flare.is-active {
    animation: flare-burst 380ms cubic-bezier(0.2, 0.78, 0.2, 1) forwards;
}

.maze-pit.is-active {
    opacity: 1;
}

.maze-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(10, 7, 4, 0.52);
    text-align: center;
    z-index: 5;
    pointer-events: auto;
}

.maze-overlay[hidden] {
    display: none;
    pointer-events: none;
}

.overlay-message {
    display: grid;
    gap: 8px;
    padding: 22px 24px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(72, 50, 28, 0.96), rgba(26, 19, 12, 0.96)), rgba(26, 19, 12, 0.96);
    border: 1px solid rgba(255, 214, 127, 0.38);
}

.passage-overlay-message {
    width: min(720px, 100%);
    max-height: min(72vh, 620px);
    gap: 16px;
    text-align: left;
}

.passage-overlay-copy {
    overflow: auto;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: rgba(16, 11, 7, 0.64);
    border: 1px solid rgba(255, 214, 127, 0.16);
    color: #f7ecd5;
    line-height: 1.65;
    white-space: pre-wrap;
}

.overlay-treasure {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--ziar-maze-overlay-treasure-size);
    height: var(--ziar-maze-overlay-treasure-size);
    margin: 0 auto 4px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 26%, rgba(255, 243, 186, 0.34), transparent 34%),
        linear-gradient(180deg, rgba(120, 81, 31, 0.98) 0 42%, rgba(74, 47, 16, 0.99) 42% 100%);
    border: 1px solid rgba(255, 224, 137, 0.5);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.08),
        inset 0 -8px 0 rgba(0, 0, 0, 0.14),
        0 18px 30px rgba(0, 0, 0, 0.34),
        0 0 24px rgba(255, 219, 117, 0.18);
    font-size: 3rem;
    line-height: 1;
    text-shadow: 0 6px 12px rgba(0, 0, 0, 0.22);
}

.overlay-treasure::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 10px;
    width: 18px;
    height: 12px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 232, 148, 0.96), rgba(205, 141, 35, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 2px 10px rgba(246, 189, 62, 0.26);
}

.overlay-message h2,
.overlay-message p {
    margin: 0;
}

.overlay-actions {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

.maze-tile {
    --tile-size: var(--ziar-maze-tile-size);
    --tile-half-size: calc(var(--tile-size) / 2);
    --tile-base-opacity: 1;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: var(--tile-size);
    min-height: var(--tile-size);
    padding: 8px;
    transform: translate(calc(var(--tile-x) - var(--tile-half-size)), calc(var(--tile-y) - var(--tile-half-size)));
    border-radius: 22px;
    border: 2px solid rgba(133, 99, 54, 0.42);
    background: linear-gradient(180deg, rgba(82, 56, 31, 0.99), rgba(34, 23, 14, 1));
    color: var(--text);
    display: grid;
    align-content: center;
    gap: 6px;
    text-align: center;
    opacity: var(--tile-base-opacity);
    box-shadow:
        inset 0 1px 0 rgba(255, 239, 189, 0.04),
        inset 0 -10px 16px rgba(0, 0, 0, 0.12),
        0 10px 20px rgba(0, 0, 0, 0.24);
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    isolation: isolate;
    transition:
        transform 120ms ease,
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease;
}

.maze-stage.is-canvas-rendered .maze-tile {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none;
}

.maze-stage.is-canvas-rendered .maze-tile:focus-visible {
    outline: 3px solid rgba(255, 238, 174, 0.98);
    outline-offset: 5px;
}

.maze-stage.is-canvas-rendered .maze-tile::before,
.maze-stage.is-canvas-rendered .maze-tile::after {
    display: none !important;
}

.maze-stage.is-canvas-rendered .maze-tile .tile-word,
.maze-stage.is-canvas-rendered .maze-tile .tile-mark {
    opacity: 0;
}

.maze-stage.is-canvas-rendered .maze-tile.is-collapsing {
    animation: none;
    opacity: 0;
}

.maze-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.54;
    background:
        linear-gradient(
            rgb(var(--maze-level-tint-rgb, 255 255 255) / var(--maze-level-tile-wash, 0)),
            rgb(var(--maze-level-tint-rgb, 255 255 255) / var(--maze-level-tile-wash, 0))
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.22)),
        linear-gradient(128deg, rgba(255, 255, 255, 0.08), transparent 34%);
}

.maze-tile:disabled {
    cursor: default;
}

.maze-tile-path,
.maze-tile-start,
.maze-tile-end {
    background: linear-gradient(180deg, rgba(72, 49, 28, 0.98), rgba(29, 20, 12, 0.99));
}

.maze-tile-trail {
    --tile-base-opacity: 1;
    gap: 0;
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 235, 166, 0.28), rgba(255, 243, 191, 0) 44%),
        linear-gradient(180deg, rgba(158, 113, 46, 0.98), rgba(82, 53, 18, 0.99));
    border-color: rgba(255, 222, 145, 0.84);
    box-shadow:
        0 0 0 1px rgba(255, 239, 188, 0.26),
        inset 0 1px 0 rgba(255, 247, 223, 0.12),
        inset 0 -10px 18px rgba(86, 50, 10, 0.24),
        0 14px 24px rgba(0, 0, 0, 0.3),
        0 0 18px rgba(230, 177, 78, 0.14);
}

.maze-tile-trail::before,
.maze-tile-trail::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.maze-tile-trail::before {
    inset: -22px;
    z-index: 0;
    opacity: 0.84;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 242, 191, 0.2) 0 24%,
        rgba(255, 214, 115, 0.12) 40%,
        rgba(255, 214, 115, 0) 68%
    );
}

.maze-tile-trail::after {
    inset: -16px;
    z-index: 0;
    opacity: 0.9;
    background:
        radial-gradient(circle at 20% 84%, rgba(255, 248, 214, 0.9) 0 2px, transparent 3.2px),
        radial-gradient(circle at 78% 80%, rgba(255, 226, 132, 0.82) 0 2.4px, transparent 3.4px),
        radial-gradient(circle at 46% 92%, rgba(255, 236, 170, 0.84) 0 1.9px, transparent 3px),
        radial-gradient(circle at 86% 58%, rgba(255, 211, 96, 0.66) 0 1.8px, transparent 2.9px),
        radial-gradient(circle at 28% 56%, rgba(255, 242, 186, 0.78) 0 1.7px, transparent 2.8px);
}

.maze-tile-trail .tile-word {
    display: none;
}

.maze-tile-trail .tile-mark {
    display: none;
}

.maze-tile-start {
    background:
        radial-gradient(circle at 50% 24%, rgba(219, 255, 252, 0.42), rgba(219, 255, 252, 0) 42%),
        linear-gradient(180deg, rgba(49, 121, 118, 0.98), rgba(24, 63, 67, 0.99));
    border-color: rgba(132, 255, 238, 0.72);
    box-shadow:
        0 0 0 1px rgba(171, 255, 244, 0.28),
        0 0 24px rgba(79, 255, 228, 0.22),
        0 0 56px rgba(79, 255, 228, 0.14),
        0 16px 30px rgba(0, 0, 0, 0.32);
}

.maze-tile-start::after {
    content: "";
    position: absolute;
    inset: -22px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.9;
    background:
        radial-gradient(circle at 18% 82%, rgba(214, 255, 250, 0.9) 0 2.2px, transparent 3.2px),
        radial-gradient(circle at 78% 80%, rgba(133, 255, 240, 0.88) 0 2.6px, transparent 3.8px),
        radial-gradient(circle at 46% 94%, rgba(212, 255, 250, 0.88) 0 2px, transparent 3px),
        radial-gradient(circle at 88% 56%, rgba(111, 255, 230, 0.78) 0 1.8px, transparent 2.9px),
        radial-gradient(circle at 28% 58%, rgba(176, 255, 246, 0.84) 0 1.9px, transparent 3px);
    animation: portal-spark-drift 2520ms linear infinite;
}

.maze-tile-end {
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 246, 204, 0.72), rgba(255, 250, 215, 0) 42%),
        linear-gradient(180deg, rgba(218, 176, 84, 0.34), rgba(138, 89, 25, 0.18));
    border-color: rgba(255, 240, 183, 0.94);
    box-shadow:
        0 0 0 1px rgba(255, 248, 219, 0.34),
        0 0 20px rgba(255, 237, 170, 0.42),
        0 0 44px rgba(255, 221, 122, 0.22),
        0 0 72px rgba(246, 189, 62, 0.12),
        0 16px 30px rgba(0, 0, 0, 0.28);
    animation: end-tile-pulse 1540ms ease-in-out infinite;
}

.maze-tile-portal {
    padding: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 46%,
        rgba(255, 255, 255, 0.18) 0 5%,
        rgba(14, 12, 12, 0.24) 13%,
        rgba(0, 0, 0, 0.98) 34%,
        rgba(0, 0, 0, 1) 57%,
        rgba(213, 178, 108, 0.26) 74%,
        rgba(68, 44, 24, 0.96) 100%
    );
    border-color: rgba(235, 205, 139, 0.9);
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, 0.74),
        0 0 0 1px rgba(255, 235, 175, 0.2),
        0 0 28px rgba(255, 220, 145, 0.28),
        0 0 76px rgba(255, 214, 118, 0.16),
        0 18px 32px rgba(0, 0, 0, 0.38);
    overflow: visible;
}

.maze-tile-portal::before,
.maze-tile-portal::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.maze-tile-portal::before {
    inset: -42px;
    border-radius: 50%;
    opacity: 0.72;
    mix-blend-mode: screen;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 249, 230, 0.24) 0 16%,
            rgba(255, 244, 208, 0.18) 30%,
            rgba(255, 244, 208, 0.08) 44%,
            rgba(255, 244, 208, 0) 72%
        ),
        radial-gradient(circle at 18% 82%, rgba(255, 252, 232, 0.94) 0 2.3px, transparent 3.4px),
        radial-gradient(circle at 78% 80%, rgba(255, 243, 201, 0.9) 0 2.6px, transparent 3.8px),
        radial-gradient(circle at 48% 92%, rgba(255, 247, 218, 0.88) 0 2.1px, transparent 3.2px),
        radial-gradient(circle at 88% 56%, rgba(255, 233, 176, 0.76) 0 2px, transparent 3.1px),
        radial-gradient(circle at 28% 58%, rgba(255, 246, 210, 0.88) 0 2px, transparent 3px);
}

.maze-tile-portal::after {
    inset: 7px;
    border-radius: 50%;
    opacity: 0.96;
    background: radial-gradient(
        circle at 50% 42%,
        rgba(255, 255, 255, 0.44) 0 4%,
        rgba(255, 255, 255, 0.2) 10%,
        rgba(18, 16, 13, 0.08) 16%,
        rgba(0, 0, 0, 0.98) 42%,
        rgba(0, 0, 0, 1) 66%,
        rgba(255, 229, 162, 0.2) 84%,
        rgba(255, 249, 224, 0) 100%
    );
    box-shadow:
        inset 0 0 24px rgba(0, 0, 0, 0.96),
        0 0 20px rgba(255, 230, 158, 0.18);
}

.maze-tile-portal .tile-word {
    color: #fff6e4;
    text-shadow: 0 1px 10px rgba(255, 214, 127, 0.14);
}

.maze-tile-portal .tile-mark {
    color: #ffdca2;
}

.maze-tile-end::before,
.maze-tile-end::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.maze-tile-end::before {
    inset: -74px;
    z-index: 0;
    opacity: 0.84;
    mix-blend-mode: screen;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 242, 182, 0.24) 0 18%,
            rgba(255, 215, 110, 0.14) 32%,
            rgba(246, 181, 52, 0.06) 48%,
            rgba(246, 181, 52, 0) 68%
        ),
        radial-gradient(circle at 50% 50%, rgba(255, 246, 202, 0.14) 0 10%, rgba(255, 246, 202, 0) 36%);
    animation: end-halo-breathe 1880ms ease-in-out infinite;
}

.maze-tile-end::after {
    inset: -28px;
    z-index: 0;
    opacity: 0.82;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle at 18% 84%, rgba(255, 248, 214, 0.88) 0 2.1px, transparent 3.2px),
        radial-gradient(circle at 76% 88%, rgba(255, 229, 143, 0.84) 0 2.6px, transparent 3.7px),
        radial-gradient(circle at 46% 94%, rgba(255, 241, 186, 0.84) 0 1.9px, transparent 2.9px),
        radial-gradient(circle at 90% 72%, rgba(255, 212, 95, 0.72) 0 1.8px, transparent 2.8px),
        radial-gradient(circle at 30% 78%, rgba(255, 238, 168, 0.82) 0 1.7px, transparent 2.7px);
    animation: end-particles-b 2680ms linear infinite;
}

.maze-tile.is-current {
    background: linear-gradient(180deg, rgba(126, 85, 30, 0.34), rgba(55, 36, 14, 0.3));
    border-color: rgba(244, 214, 145, 0.76);
    box-shadow:
        0 0 0 1px rgba(222, 174, 82, 0.16),
        inset 0 0 0 1px rgba(255, 236, 188, 0.08),
        0 16px 28px rgba(0, 0, 0, 0.34);
}

.maze-tile-path.is-current,
.maze-tile-trail.is-current {
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 231, 156, 0.32), rgba(255, 243, 191, 0) 44%),
        linear-gradient(180deg, rgba(156, 111, 45, 0.98), rgba(78, 50, 17, 0.99));
    border-color: rgba(255, 222, 145, 0.92);
    box-shadow:
        0 0 0 1px rgba(255, 239, 188, 0.3),
        inset 0 1px 0 rgba(255, 247, 223, 0.14),
        inset 0 -10px 18px rgba(86, 50, 10, 0.24),
        0 16px 28px rgba(0, 0, 0, 0.34),
        0 0 18px rgba(230, 177, 78, 0.18),
        0 0 36px rgba(246, 189, 62, 0.1);
}

.maze-tile-path.is-current::after {
    content: "";
    position: absolute;
    inset: -18px;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.82;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle at 20% 84%, rgba(255, 248, 214, 0.88) 0 2px, transparent 3.1px),
        radial-gradient(circle at 78% 80%, rgba(255, 226, 132, 0.82) 0 2.3px, transparent 3.3px),
        radial-gradient(circle at 46% 92%, rgba(255, 236, 170, 0.84) 0 1.8px, transparent 2.9px),
        radial-gradient(circle at 86% 58%, rgba(255, 211, 96, 0.66) 0 1.7px, transparent 2.8px),
        radial-gradient(circle at 28% 56%, rgba(255, 242, 186, 0.78) 0 1.6px, transparent 2.7px);
    animation: trail-particles-rise 2460ms linear infinite;
}

.maze-tile-start.is-current {
    background:
        radial-gradient(circle at 50% 24%, rgba(219, 255, 252, 0.42), rgba(219, 255, 252, 0) 42%),
        linear-gradient(180deg, rgba(49, 121, 118, 0.98), rgba(24, 63, 67, 0.99));
    border-color: rgba(132, 255, 238, 0.72);
    box-shadow:
        0 0 0 1px rgba(171, 255, 244, 0.28),
        0 0 24px rgba(79, 255, 228, 0.22),
        0 0 56px rgba(79, 255, 228, 0.14),
        0 16px 30px rgba(0, 0, 0, 0.32);
}

.maze-tile.is-reachable {
    background: linear-gradient(180deg, rgba(76, 54, 30, 0.98), rgba(34, 24, 15, 0.99));
    border-color: rgba(243, 216, 148, 0.82);
    box-shadow:
        0 0 0 1px rgba(221, 173, 81, 0.24),
        inset 0 0 0 1px rgba(255, 238, 195, 0.1),
        0 14px 24px rgba(0, 0, 0, 0.3),
        0 0 14px rgba(213, 161, 61, 0.1);
}

.maze-tile.is-next-step {
    background: linear-gradient(180deg, rgba(92, 64, 32, 0.99), rgba(43, 29, 15, 1));
    border-color: rgba(247, 224, 159, 0.92);
    box-shadow:
        0 0 0 1px rgba(228, 183, 90, 0.36),
        inset 0 0 0 1px rgba(255, 242, 205, 0.14),
        0 14px 24px rgba(0, 0, 0, 0.3),
        0 0 18px rgba(219, 169, 74, 0.14);
}

.maze-tile-end.is-reachable,
.maze-tile-end.is-next-step {
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 244, 196, 0.82), rgba(255, 250, 215, 0) 42%),
        linear-gradient(180deg, rgba(220, 177, 82, 0.44), rgba(133, 84, 21, 0.24));
    border-color: rgba(255, 240, 183, 0.98);
    box-shadow:
        0 0 0 1px rgba(255, 248, 219, 0.4),
        0 0 22px rgba(255, 237, 170, 0.6),
        0 0 54px rgba(255, 221, 122, 0.34),
        0 0 92px rgba(246, 189, 62, 0.22),
        0 0 0 2px rgba(255, 204, 94, 0.12),
        0 16px 30px rgba(0, 0, 0, 0.34);
    animation: end-tile-pulse 1540ms ease-in-out infinite;
}

.maze-tile-portal.is-reachable,
.maze-tile-portal.is-next-step {
    border-color: rgba(255, 228, 160, 0.98);
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, 0.78),
        0 0 0 1px rgba(255, 240, 190, 0.34),
        0 0 24px rgba(255, 225, 154, 0.46),
        0 0 58px rgba(255, 222, 148, 0.3),
        0 0 104px rgba(255, 214, 118, 0.2),
        0 16px 30px rgba(0, 0, 0, 0.34);
}

.maze-tile.is-pressed {
    transform: translate(calc(var(--tile-x) - var(--tile-half-size)), calc(var(--tile-y) - var(--tile-half-size) + 2px)) scale(0.98);
}

.maze-tile.is-collapsing {
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 20px 34px rgba(0, 0, 0, 0.34);
    will-change: transform, opacity, filter;
    transition: none;
    animation: tile-collapse 440ms cubic-bezier(0.12, 0.82, 0.18, 1) forwards;
}

.maze-tile.is-collapsing .tile-word,
.maze-tile.is-collapsing .tile-mark {
    animation: none;
}

.tile-word {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.1;
    word-break: break-word;
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.tile-mark {
    margin: 0;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    position: relative;
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 1320px) {
    .relic-mode-button,
    .pictionary-mode-button,
    .vault-mode-button {
        min-height: clamp(118px, 15vw, 148px);
    }

    .relic-mode-title,
    .pictionary-mode-title,
    .vault-mode-title {
        font-size: clamp(1.48rem, 2.45vw, 1.9rem);
    }
}

@media (max-width: 979px) {
    .page-shell {
        width: min(1440px, calc(100% - 18px));
        padding: 14px 0 28px;
    }

    .page-shell.room-shell,
    .page-shell.tool-shell {
        width: min(1440px, calc(100% - 18px));
    }

    .brand-mark {
        font-size: clamp(1.7rem, 9vw, 3rem);
    }

    .landing-shell {
        padding-top: 22px;
    }

    .language-toggle {
        min-height: 36px;
        min-width: 112px;
        padding: 3px;
    }

    .language-toggle-track,
    .language-toggle-option {
        min-height: 28px;
    }

    .language-toggle-option {
        padding: 0 8px;
        font-size: 0.72rem;
    }

    .room-code-display {
        font-size: clamp(2.1rem, 15vw, 3.4rem);
    }

    .room-code-card,
    .room-code-actions,
    .brand-header,
    .room-topbar,
    .connecting-topbar,
    .room-footer,
    .host-card-head,
    .waiting-card-head,
    .host-setup-modal-head,
    .setup-head,
    .setup-footer,
    .maze-stage-head,
    .waiting-stats {
        flex-direction: column;
        align-items: stretch;
    }

    .room-shell.is-active-layout .maze-stage-card {
        min-height: calc(100vh - 160px);
        min-height: calc(100svh - 160px);
    }

    .room-shell.is-active-layout .maze-stage {
        flex: 1 1 auto;
        min-height: calc(100vh - 228px);
        min-height: calc(100svh - 228px);
    }

    .active-layout.is-host-view {
        grid-template-columns: minmax(0, 1fr);
    }

    .room-shell.is-active-layout:has(.active-layout.is-host-view) {
        height: auto;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .room-shell.is-active-layout:has(.active-layout.is-host-view) .room-content {
        flex: 0 0 auto;
        min-height: calc(100vh - 18px);
        min-height: calc(100svh - 18px);
        overflow: visible;
    }

    .room-shell.is-active-layout .active-layout.is-host-view .maze-stage-card {
        min-height: min(62vh, 600px);
        min-height: min(62svh, 600px);
    }

    .room-shell.is-active-layout .active-layout.is-host-view .maze-stage {
        min-height: min(56vh, 520px);
        min-height: min(56svh, 520px);
    }

    .active-layout.is-host-view .active-side-card.has-host-utility {
        grid-template-columns: minmax(0, 1.12fr) minmax(210px, 0.88fr);
        grid-template-rows: auto;
        align-items: start;
    }

    .active-layout.is-host-view .active-side-card.has-host-utility > * {
        min-width: 0;
    }

    .active-layout.is-host-view .roster-card {
        order: 1;
    }

    .active-layout.is-host-view .active-host-utility-card {
        order: 2;
    }

    .active-layout.is-host-view .roster-body {
        max-height: min(34vh, 340px);
        max-height: min(34svh, 340px);
    }

    .active-layout.is-host-view .roster-body:has(.player-roster-density-roomy) {
        max-height: none;
        overflow-y: visible;
    }

    .active-layout.is-host-view .roster-list.player-roster-density-roomy:not(.player-roster-single) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pictionary-shell,
    .pictionary-shell.is-host-view {
        grid-template-columns: minmax(0, 1fr);
    }

    .room-shell.is-active-pictionary-host,
    .room-shell.is-active-layout:has(.pictionary-shell.is-host-view) {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .room-shell.is-active-pictionary-host .room-content,
    .room-shell.is-active-layout:has(.pictionary-shell.is-host-view) .room-content {
        flex: 0 0 auto;
        min-height: calc(100vh - 18px);
        min-height: calc(100svh - 18px);
        overflow: visible;
    }

    .pictionary-shell.is-host-view {
        height: auto;
        max-height: none;
        align-content: start;
        overflow: visible;
    }

    .pictionary-shell.is-host-view .pictionary-stage-card {
        min-height: min(62vh, 560px);
        min-height: min(62svh, 560px);
    }

    .pictionary-shell.is-host-view .pictionary-side-card {
        grid-template-rows: auto auto auto;
        max-height: none;
        overflow: visible;
    }

    .pictionary-shell.is-host-view .pictionary-roster-card {
        min-height: 164px;
        max-height: min(42vh, 360px);
        max-height: min(42svh, 360px);
    }

    .pictionary-stage-card {
        min-height: 0;
    }

    .pictionary-side-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .maze-stage {
        min-height: min(60vh, 520px);
    }

    .brand-header {
        text-align: center;
    }

    .landing-shell .brand-header {
        display: flex;
        width: 100%;
        margin-bottom: 24px;
        align-items: center;
    }

    .tool-shell .brand-header,
    .tool-shell-stack {
        width: 100%;
    }

    #app.autotranslator-active .autotranslator-tool-shell {
        gap: 0;
        padding-top: 8px;
    }

    .autotranslator-tool-shell .autotranslator-brand-header {
        min-height: 30px;
        flex-direction: row;
        align-items: center;
        padding: 0 1px;
    }

    .autotranslator-tool-shell .autotranslator-brand-mark {
        min-height: 30px;
        font-size: 0.88rem;
    }

    .autotranslator-tool-shell .autotranslator-header-back {
        min-height: 30px;
        padding: 0 9px 0 7px;
        font-size: 0.74rem;
    }

    .autotranslator-stage-inner {
        padding: 9px;
        gap: 6px;
    }

    .autotranslator-pagebar {
        min-height: 32px;
        gap: 5px;
        flex-wrap: nowrap;
    }

    .autotranslator-pagebar.is-noun-form-open {
        flex-wrap: nowrap;
        align-items: center;
    }

    .autotranslator-top-actions {
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: 4px;
    }

    .autotranslator-top-actions > button {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 0 6px;
    }

    .autotranslator-flip-button {
        width: 58px;
        white-space: nowrap;
    }

    .autotranslator-mode-toggle {
        flex: 0 1 136px;
        min-width: 136px;
        max-width: 210px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .autotranslator-mode-toggle button {
        min-height: 28px;
        padding: 0 3px;
        font-size: 0.72rem;
    }

    .autotranslator-icon-button {
        flex-basis: 32px;
        width: 32px;
        padding: 0;
    }

    .autotranslator-back-button {
        flex-basis: 34px;
        width: 34px;
        min-height: 34px;
    }

    .autotranslator-noun-drawer {
        max-height: min(24svh, 180px);
        padding: 6px;
    }

    .autotranslator-noun-form {
        align-items: center;
        flex-direction: row;
        gap: 6px;
        padding: 0;
    }

    .autotranslator-noun-form-row {
        flex: 0 0 auto;
        min-width: 0;
        padding: 0;
    }

    .autotranslator-top-actions.is-noun-form-open [data-autotranslator-toggle-noun-form] {
        display: inline-flex;
    }

    .autotranslator-noun-form input {
        min-height: 36px;
        padding: 0 8px;
    }

    .autotranslator-noun-form .autotranslator-noun-submit,
    .autotranslator-noun-form .autotranslator-noun-close {
        min-height: 36px;
    }

    .autotranslator-noun-form .autotranslator-noun-submit {
        padding: 0 10px;
    }

    .autotranslator-noun-form-row .autotranslator-noun-submit,
    .autotranslator-noun-form-row .autotranslator-noun-close {
        flex: 0 0 30px;
        width: 30px;
        padding: 0;
        overflow: hidden;
    }

    .autotranslator-noun-form-row .autotranslator-noun-submit {
        font-size: 0;
    }

    .autotranslator-noun-form-row .autotranslator-noun-submit::before {
        content: "+";
        font-size: 1rem;
        line-height: 1;
    }

    .autotranslator-feed-shell {
        min-height: 320px;
    }

    .autotranslator-feed {
        padding: 8px;
    }

    .autotranslator-bubble {
        width: 100%;
        padding: 11px 12px;
    }

    .autotranslator-bubble-transcript {
        font-size: 1rem;
    }

    .autotranslator-bubble-translation {
        font-size: 1.12rem;
    }

    .autotranslator-control-dock {
        display: flex;
        gap: 9px;
        align-items: center;
        flex-wrap: nowrap;
    }

    .autotranslator-start-button {
        min-width: 96px;
        min-height: 42px;
    }

    .autotranslator-info-cluster {
        gap: 7px;
    }

    .autotranslator-details {
        align-self: center;
        flex: 1 1 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 7px;
        row-gap: 5px;
        font-size: 0.74rem;
    }

    .autotranslator-details [data-autotranslator-cost] {
        justify-self: end;
        max-width: 100%;
        text-align: right;
    }

    .autotranslator-meter {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 42px;
        height: 8px;
    }

    @media (max-width: 359px) {
        .autotranslator-pagebar {
            flex-wrap: wrap;
            row-gap: 4px;
        }

        .autotranslator-top-actions {
            order: 3;
            flex: 1 0 100%;
        }

        .autotranslator-noun-form-row {
            flex-basis: 100%;
        }

        .autotranslator-start-button {
            min-width: 82px;
        }

        .autotranslator-dock-toggle {
            padding: 0 8px;
        }

        .autotranslator-details {
            font-size: 0.68rem;
        }

        .autotranslator-details [data-autotranslator-cost] {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .autotranslator-expanded-panel {
        padding: 16px;
    }

    .autotranslator-expanded-transcript {
        font-size: 1.08rem;
    }

    .autotranslator-expanded-translation {
        font-size: 1.45rem;
    }

    .autotranslator-expanded-comparison {
        grid-template-columns: minmax(0, 1fr);
    }

    .word-list-tool {
        grid-template-columns: minmax(0, 1fr);
    }

    .word-list-control-panel {
        position: static;
    }

    .tool-hero-head,
    .random-teams-stage-head,
    .random-teams-floor-head,
    .random-team-head {
        flex-direction: column;
        align-items: stretch;
    }

    .random-team-head,
    .random-teams-floor-head {
        flex-direction: row;
        align-items: center;
    }

    .landing-panel-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .random-teams-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-shell.tool-shell.master1000-tool-shell {
        width: min(100%, calc(100vw - 8px));
        max-width: 100%;
        min-height: 100vh;
        min-height: 100svh;
        height: 100vh;
        height: 100svh;
        padding-top: 8px;
        padding-bottom: 6px;
    }

    .master1000-tool-shell .tool-brand-header {
        grid-template-columns: minmax(0, 1fr) auto;
        margin-bottom: 8px;
        min-width: 0;
    }

    .master1000-tool-shell .brand-home {
        grid-column: 1;
        justify-self: stretch;
        text-align: left;
    }

    .master1000-tool-header-actions {
        grid-column: 2;
    }

    .master1000-tool-header-actions {
        width: auto;
        justify-content: flex-end;
        gap: 8px;
    }

    .master1000-tool-shell .language-toggle {
        min-width: 102px;
    }

    .master1000-tool-header-button,
    .master1000-tool-back-button {
        min-height: 40px;
        font-size: 0.84rem;
    }

    .master1000-tool-icon-button {
        width: 40px;
        min-width: 40px;
        padding: 0;
        border-radius: 14px;
    }

    .master1000-tool-icon-button .master1000-tool-button-label {
        display: none;
    }

    .master1000-tool-empty-card {
        border-radius: 20px;
    }

    .master1000-tool-frame {
        min-height: 0;
        border-radius: 20px;
    }

    .random-teams-results-layout.is-order-mode {
        grid-template-columns: minmax(196px, 0.34fr) minmax(0, 1fr);
        gap: 12px;
    }

    .random-teams-stage-card {
        min-height: 0;
    }

    .random-teams-stage {
        min-height: 480px;
        padding: 18px;
    }

    .random-teams-inline-field {
        width: 88px;
    }

    .random-teams-sentence {
        font-size: 1rem;
    }

    .random-team-box {
        min-height: 0;
    }

    .random-teams-exclusion-pill {
        min-width: 104px;
    }

    .random-teams-exclusion-field .random-teams-exclusion-pill input {
        width: 74px;
        min-width: 74px;
        font-size: 16px;
    }

    .maze-passage-button {
        top: 12px;
        width: max-content;
    }

    .maze-passage-inline {
        top: 58px;
        width: calc(100% - 24px);
        padding: 12px 14px;
        border-radius: 20px;
        font-size: 0.96rem;
        line-height: 1.45;
    }

    .host-source-editor {
        --host-source-gutter-width: 96px;
    }

    .host-source-editor.is-pictionary {
        --host-controller-qr-width: var(--ziar-host-controller-qr-width-tablet);
    }

    .host-source-gutter {
        padding-left: 12px;
        padding-right: 8px;
        font-size: 0.88rem;
    }

    .host-source-editor textarea {
        padding-left: 12px;
        padding-right: 60px;
    }

    .host-vault-source-guides {
        padding-left: 12px;
        padding-right: 60px;
    }

    .host-source-import-button {
        top: 9px;
        right: 9px;
        width: 38px;
        height: 38px;
    }

    .host-source-import-button svg {
        width: 21px;
        height: 21px;
    }

    .setup-mode-stack {
        justify-items: start;
    }

    .mode-subtitle {
        text-align: left;
    }

    .host-lobby-shell,
    .player-lobby-grid,
    .controller-lobby-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .host-lobby-shell {
        min-height: 0;
    }

    .player-lobby-grid {
        min-height: 0;
    }

    .player-lobby-grid .waiting-card {
        --player-lobby-stage-min-height: min(66vh, 560px);
    }

    @supports (height: 100svh) {
        .player-lobby-grid .waiting-card {
            --player-lobby-stage-min-height: min(66svh, 560px);
        }
    }

    .host-lobby-overlays,
    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-lobby-overlays {
        position: static;
        inset: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        pointer-events: auto;
        order: 2;
    }

    .host-lobby-side-rail,
    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-lobby-side-rail {
        grid-template-columns: minmax(0, 1fr);
    }

    .active-layout.is-host-view .active-side-card.has-host-utility {
        grid-template-columns: minmax(0, 1.12fr) minmax(210px, 0.88fr);
    }

    .player-lobby-join-qr-button {
        display: grid;
    }

    .player-lobby-grid .player-lobby-roster-card {
        padding-top: 18px;
    }

    .player-lobby-participants > .participant-list,
    .player-lobby-participants > .list-empty {
        padding-right: 0;
    }

    .host-mobile-qr-button {
        display: grid;
    }

    .host-presence-count {
        right: calc(14px + (var(--ziar-qr-roster-overlay-frame-width) - var(--ziar-player-roster-floating-count-size)) / 2);
    }

    .host-mode-card {
        width: 100%;
    }

    .host-presence-card {
        max-width: none;
    }

    .host-waiting-card {
        order: 3;
    }

    .host-qr-card {
        display: none;
    }

    .relic-mode-button,
    .pictionary-mode-button,
    .vault-mode-button {
        min-height: 138px;
    }

    .host-start-button {
        width: 100%;
        max-width: none;
    }

    .host-source-editor.is-pictionary-grid .host-pictionary-editor-shell {
        min-height: 0;
    }

    .host-source-editor.is-pictionary-grid {
        --host-pictionary-controller-panel-width: calc(var(--ziar-host-controller-qr-width-tablet) + 4px);
        --host-pictionary-controller-panel-reserve: calc(var(--host-pictionary-controller-panel-width) + 20px);
    }

    .host-source-editor.is-pictionary-grid .host-pictionary-pad-shell .host-controller-access-panel {
        top: 12px;
        right: 12px;
        width: min(var(--host-pictionary-controller-panel-width), calc(100% - 24px));
    }

    .host-source-editor.is-pictionary-grid .host-pictionary-editor-shell {
        grid-template-rows: minmax(0, 1fr);
    }

    .host-source-editor.is-pictionary-grid .host-pictionary-preview-shell {
        max-height: none;
    }

    .relic-mode-marquee {
        align-items: center;
        flex-direction: row;
    }

    .room-qr-frame {
        width: min(100%, var(--ziar-qr-frame-max-width-mobile));
    }

    .room-qr-frame.active-room-qr-frame {
        width: var(--ziar-qr-active-room-frame-width-mobile);
    }

    .active-layout.is-host-view .room-qr-frame.active-room-qr-frame {
        width: var(--ziar-qr-active-room-host-frame-width-mobile);
    }

    .qr-preview-panel {
        width: min(calc(100vw - 28px), var(--ziar-qr-preview-panel-max-width-mobile));
        max-height: calc(100vh - 28px);
        max-height: calc(100svh - 28px);
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "qr"
            "code"
            "close";
        gap: clamp(8px, 1.6vh, 16px);
        gap: clamp(8px, 1.6svh, 16px);
    }

    .qr-preview-panel.has-title {
        grid-template-areas:
            "qr"
            "code"
            "title"
            "close";
    }

    .room-qr-frame.qr-preview-frame {
        width: min(calc(100vw - 40px), var(--ziar-qr-preview-max-height-mobile), var(--ziar-qr-preview-max-width-mobile));
    }

    .room-code-display.qr-preview-code {
        justify-self: center;
        font-size: var(--ziar-qr-preview-code-font-size-mobile);
        line-height: 0.84;
    }

    .room-code-display.qr-preview-code[data-room-code-length="5"],
    .room-code-display.qr-preview-code[data-room-code-length="6"] {
        font-size: clamp(2.8rem, 12vw, 3.4rem);
    }

    .room-code-display.qr-preview-code[data-room-code-length="7"],
    .room-code-display.qr-preview-code[data-room-code-length="8"] {
        font-size: clamp(2.1rem, 9vw, 2.6rem);
    }

    .qr-preview-title {
        text-align: center;
    }

    .room-shell.is-active-layout .player-strip,
    .room-shell.is-active-layout .room-topbar {
        align-items: stretch;
    }

    .room-footer {
        justify-content: stretch;
    }

    .room-shell,
    .room-content,
    .room-utility-slot,
    .player-strip {
        width: 100%;
    }

    .room-brand {
        min-width: 0;
        overflow: hidden;
        font-size: 1rem;
        letter-spacing: 0.12em;
        text-overflow: clip;
    }

    .brand-header,
    .room-topbar,
    .connecting-topbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .brand-actions {
        gap: 6px;
    }

    .account-chip {
        min-height: 36px;
        padding: 0 9px 0 5px;
    }

    .account-chip-avatar {
        width: 26px;
        height: 26px;
        font-size: 0.76rem;
    }

    .room-topbar-actions {
        flex: 0 0 auto;
        gap: 6px;
    }

    .room-topbar-actions .ghost-button {
        min-height: 36px;
        padding: 0 10px;
        font-size: 0.82rem;
    }

    .room-topbar-actions .language-toggle {
        flex: 0 0 auto;
        min-width: 100px;
    }
}

@media (max-width: 979px) and (orientation: portrait) {
    .maze-passage-button {
        top: auto;
        bottom: 12px;
        width: fit-content;
        max-width: calc(100% - 24px);
    }

    .maze-passage-inline {
        top: auto;
        bottom: 64px;
    }
}

@media (max-width: 640px) {
    .active-layout.is-host-view .active-side-card.has-host-utility {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .active-layout.is-host-view .roster-card,
    .active-layout.is-host-view .active-host-utility-card {
        width: 100%;
    }

    .account-menu-root.is-google-signin,
    .account-google-direct,
    .account-google-placeholder {
        width: 42px;
        flex: 0 0 42px;
    }

    .account-google-direct-face,
    .account-google-placeholder {
        gap: 0;
        padding: 0;
    }

    .account-google-direct-face > span:last-child,
    .account-google-placeholder > span:not(.spinner):not(.account-google-face-mark) {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .account-dashboard {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-profile-card {
        position: static;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
    }

    .account-signout-button {
        grid-column: 1 / -1;
    }

    .account-word-lists-card,
    .account-uploads-card {
        grid-column: auto;
    }

    .account-upload-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .word-list-preview-pages {
        grid-template-columns: minmax(0, 1fr);
    }

    .word-list-action-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .word-list-action-row .word-list-generate-button {
        grid-column: 1 / -1;
    }

    .word-list-mode-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .word-list-source-shell,
    .word-list-source-highlight,
    .word-list-source-input {
        min-height: 210px;
    }

    .word-list-preview-shell {
        padding: 56px 10px 10px;
    }

    .word-list-preview-tools {
        top: 10px;
        left: 10px;
    }

    .account-history-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
    }

    .account-history-row .account-row-main strong {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .account-history-row .account-row-meta {
        grid-column: 2;
        margin-left: 0;
        text-align: left;
    }

    .account-row-meta {
        white-space: normal;
        text-align: right;
    }

    .account-card-action {
        max-width: 48%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .account-word-list-meta {
        white-space: normal;
    }

    .account-chip-label {
        display: none;
    }

    .account-chip {
        width: 38px;
        min-width: 38px;
        justify-content: center;
        padding: 0;
    }

    .room-shell.is-active-layout .room-brand {
        font-size: 0.92rem;
        letter-spacing: 0.1em;
    }

    .room-shell.is-active-layout .room-topbar-actions {
        gap: 5px;
    }

    .room-shell.is-active-layout .room-topbar-actions .ghost-button {
        padding: 0 9px;
    }

    .room-shell.is-active-layout .room-topbar-actions .language-toggle {
        min-width: 96px;
    }

    .room-shell.is-active-layout .language-toggle-option {
        padding: 0 5px;
        font-size: 0.66rem;
    }

    .page-shell.room-shell.is-active-layout:has(.pictionary-shell.is-player-view) {
        padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-player-view) .room-topbar {
        gap: 5px;
        margin-top: 2px;
        padding-top: 3px;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-player-view) .room-brand {
        display: inline-flex;
        align-items: center;
        flex: 1 1 auto;
        height: 32px;
        min-height: 0;
        font-size: 0.78rem;
        letter-spacing: 0.08em;
        line-height: 1;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-player-view) .room-topbar-actions {
        gap: 4px;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-player-view) .account-chip {
        width: 32px;
        min-width: 32px;
        min-height: 32px;
        padding: 0;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-player-view) .account-chip-avatar {
        width: 24px;
        height: 24px;
        font-size: 0.68rem;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-player-view) .account-menu-root.is-google-signin,
    .room-shell.is-active-layout:has(.pictionary-shell.is-player-view) .account-google-direct,
    .room-shell.is-active-layout:has(.pictionary-shell.is-player-view) .account-google-placeholder {
        width: 32px;
        height: 32px;
        min-height: 32px;
        flex: 0 0 32px;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-player-view) .account-google-face-mark {
        width: 24px;
        height: 24px;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-player-view) .account-google-g-icon {
        width: 17px;
        height: 17px;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-player-view) .account-google-direct-action {
        min-height: 32px;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-player-view) .room-topbar-actions .ghost-button {
        min-height: 32px;
        padding: 0 8px;
        font-size: 0.72rem;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-player-view) .room-topbar-actions .language-toggle {
        min-width: 86px;
        min-height: 32px;
        padding: 2px;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-player-view) .language-toggle-track,
    .room-shell.is-active-layout:has(.pictionary-shell.is-player-view) .language-toggle-option {
        min-height: 26px;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-player-view) .language-toggle-option {
        padding: 0 4px;
        font-size: 0.58rem;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-controller-view),
    .room-shell.is-active-pictionary-host-controller,
    .room-shell.is-active-layout:has(.pictionary-shell.is-host-controller-view) {
        overflow: hidden;
        overscroll-behavior: contain;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-controller-view) .room-topbar,
    .room-shell.is-active-pictionary-host-controller .room-topbar,
    .room-shell.is-active-layout:has(.pictionary-shell.is-host-controller-view) .room-topbar {
        gap: 6px;
        min-width: 0;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-controller-view) .room-brand,
    .room-shell.is-active-pictionary-host-controller .room-brand,
    .room-shell.is-active-layout:has(.pictionary-shell.is-host-controller-view) .room-brand {
        min-width: 0;
        overflow: hidden;
        font-size: 0.74rem;
        letter-spacing: 0.07em;
        line-height: 1;
        white-space: nowrap;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-controller-view) .room-topbar-actions,
    .room-shell.is-active-pictionary-host-controller .room-topbar-actions,
    .room-shell.is-active-layout:has(.pictionary-shell.is-host-controller-view) .room-topbar-actions {
        flex: 0 0 auto;
        gap: 4px;
        min-width: 0;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-controller-view) .room-topbar-actions .ghost-button,
    .room-shell.is-active-pictionary-host-controller .room-topbar-actions .ghost-button,
    .room-shell.is-active-layout:has(.pictionary-shell.is-host-controller-view) .room-topbar-actions .ghost-button {
        min-height: 34px;
        padding: 0 8px;
        font-size: 0.72rem;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-controller-view) .room-topbar-actions .language-toggle,
    .room-shell.is-active-pictionary-host-controller .room-topbar-actions .language-toggle,
    .room-shell.is-active-layout:has(.pictionary-shell.is-host-controller-view) .room-topbar-actions .language-toggle {
        min-width: 88px;
        min-height: 36px;
        padding: 3px;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-controller-view) .language-toggle-track,
    .room-shell.is-active-layout:has(.pictionary-shell.is-controller-view) .language-toggle-option,
    .room-shell.is-active-pictionary-host-controller .language-toggle-track,
    .room-shell.is-active-pictionary-host-controller .language-toggle-option,
    .room-shell.is-active-layout:has(.pictionary-shell.is-host-controller-view) .language-toggle-track,
    .room-shell.is-active-layout:has(.pictionary-shell.is-host-controller-view) .language-toggle-option {
        min-height: 30px;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-controller-view) .language-toggle-option,
    .room-shell.is-active-pictionary-host-controller .language-toggle-option,
    .room-shell.is-active-layout:has(.pictionary-shell.is-host-controller-view) .language-toggle-option {
        padding: 0 4px;
        font-size: 0.58rem;
    }

    .room-shell.is-active-layout:has(.pictionary-shell.is-controller-view) .room-content,
    .room-shell.is-active-pictionary-host-controller .room-content,
    .room-shell.is-active-layout:has(.pictionary-shell.is-host-controller-view) .room-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .pictionary-shell.is-controller-view,
    .pictionary-shell.is-host-controller-view {
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
    }

    .pictionary-shell.is-host-controller-view .pictionary-stage-card,
    .pictionary-shell.is-host-controller-view .pictionary-host-utility-card,
    .pictionary-shell.is-host-controller-view .pictionary-roster-card {
        display: none;
    }

    .pictionary-shell.is-controller-view .pictionary-side-card,
    .pictionary-shell.is-host-controller-view .pictionary-side-card {
        max-height: none;
        overflow: visible;
    }

    .pictionary-shell.is-controller-view .pictionary-role-card,
    .pictionary-shell.is-host-controller-view .pictionary-role-card {
        align-content: stretch;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        padding: 14px 8px;
        overflow: hidden;
    }

    .pictionary-shell.is-controller-view .pictionary-controller-shell,
    .pictionary-shell.is-host-controller-view .pictionary-controller-shell {
        height: 100%;
        min-height: 0;
        grid-template-rows: auto minmax(0, 1fr);
        align-content: stretch;
    }

    .pictionary-shell.is-controller-view .pictionary-controller-picker-panel,
    .pictionary-shell.is-host-controller-view .pictionary-controller-picker-panel {
        overflow: hidden;
    }

    .pictionary-shell.is-controller-view .pictionary-entry-grid,
    .pictionary-shell.is-host-controller-view .pictionary-entry-grid {
        min-height: 0;
        max-height: none;
        overflow: auto;
    }

    .tool-shell {
        padding-top: 12px;
    }

    .tool-shell .brand-header {
        margin-bottom: 12px;
    }

    .tool-shell-stack {
        gap: 10px;
    }

    .brand-header .brand-mark:not(.room-brand) {
        font-size: clamp(1.35rem, 7vw, 2.25rem);
        letter-spacing: 0.12em;
    }

    .page-shell.room-shell.is-active-layout {
        width: 100vw;
    }

    .room-shell.is-active-layout {
        --maze-board-scale: var(--ziar-maze-board-scale-mobile);
    }

    .room-shell.is-active-layout .maze-stage-card {
        min-height: calc(100vh - 146px);
        min-height: calc(100svh - 146px);
    }

    .room-shell.is-active-layout .maze-stage {
        min-height: calc(100vh - 210px);
        min-height: calc(100svh - 210px);
    }

    .room-shell.is-active-layout .active-layout.is-host-view {
        gap: 12px;
        align-content: start;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .room-shell.is-active-layout .active-layout.is-host-view .maze-stage-card {
        height: auto;
        min-height: min(var(--ziar-maze-host-stage-card-min-height-mobile), var(--ziar-maze-host-stage-card-max-height-mobile));
    }

    .room-shell.is-active-layout .active-layout.is-host-view .maze-stage {
        min-height: min(var(--ziar-maze-host-stage-min-height-mobile), var(--ziar-maze-host-stage-max-height-mobile));
    }

    .maze-stage::after {
        opacity: 1;
    }

    .maze-stage .maze-level-chip {
        top: 12px;
        right: 12px;
        min-height: 36px;
        padding: 0 10px;
        font-size: 0.82rem;
    }

    .maze-viewer-badge {
        top: 12px;
        left: 12px;
        max-width: calc(100% - 156px);
        min-height: 38px;
        padding: 0 12px;
        font-size: 0.84rem;
    }

    .maze-time-chip {
        min-width: 96px;
        min-height: 28px;
        padding: 0 10px;
        font-size: 0.82rem;
    }

    .maze-time-chip.has-best {
        min-width: 132px;
        font-size: 0.74rem;
    }

    .maze-level-best-callout {
        top: 92px;
        max-width: calc(100% - 28px);
        padding: 9px 12px;
        font-size: 0.82rem;
    }

    .maze-passage-button {
        top: auto;
        bottom: 12px;
        width: fit-content;
        max-width: calc(100% - 24px);
    }

    .maze-passage-inline {
        top: auto;
        bottom: 64px;
    }

    .room-shell.is-active-layout .pictionary-stage-card {
        min-height: 0;
    }

    .pictionary-stage-head {
        left: 12px;
        right: 12px;
        top: 12px;
        grid-template-columns: minmax(0, 1fr);
    }

    .pictionary-round-answer-slot {
        grid-column: 1;
    }

    .pictionary-stage-viewer-chip {
        left: 12px;
        top: 72px;
        max-width: calc(100% - 24px);
    }

    .pictionary-head-chip {
        min-width: 0;
    }

    .pictionary-stem-banner {
        border-radius: 24px;
    }

    .pictionary-console--player {
        width: 100%;
        padding: 12px 12px 14px;
        border-radius: 22px;
    }

    .pictionary-console--player.is-feedback-only {
        grid-template-columns: minmax(0, 1fr) 40px;
        gap: 10px;
        min-height: 70px;
        padding: 12px;
    }

    .pictionary-console--player.is-feedback-only .pictionary-console-topline {
        align-items: center;
    }

    .pictionary-console--player.is-feedback-only .pictionary-feedback-message {
        font-size: 0.98rem;
    }

    .pictionary-stage-status {
        left: 12px;
        bottom: 12px;
        max-width: calc(100% - 24px);
        border-radius: 22px;
    }

    .pictionary-host-tools {
        top: 134px;
        left: auto;
        right: 12px;
    }

    .pictionary-stage-console {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .pictionary-scoreboard-panel {
        top: 88px;
        right: 12px;
        left: 12px;
        bottom: 96px;
        width: auto;
        border-radius: 24px;
    }

    .pictionary-guess-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .pictionary-guess-field.has-suggestions .pictionary-guess-shell input {
        padding-right: min(calc(100% - 18px), var(--pictionary-guess-assist-padding, 208px));
    }

    .pictionary-guess-assist {
        max-width: calc(100% - 8px);
    }

    .pictionary-guess-search-zone {
        flex-basis: 40px;
        width: 40px;
        border-radius: 13px;
    }

    .pictionary-guess-suggestion-button {
        min-width: 50px;
        max-width: min(18ch, 100%);
        height: 34px;
        padding: 0 9px;
        font-size: 0.82rem;
    }

    .pictionary-controller-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .pictionary-entry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pictionary-stage-head {
        grid-template-columns: minmax(68px, auto) minmax(0, 1fr) minmax(68px, auto);
        gap: 8px;
    }

    .pictionary-round-answer-slot {
        grid-column: 2;
    }

    .pictionary-stage-viewer-chip {
        top: 82px;
    }

    .pictionary-player-board-card {
        min-height: 112px;
        max-height: clamp(118px, 28svh, 192px);
        overflow: visible;
        padding: 10px;
        border-radius: 22px;
    }

    .pictionary-player-word-bank {
        grid-template-rows: minmax(0, 1fr);
        gap: 0;
        position: relative;
    }

    .pictionary-player-word-bank-head {
        position: absolute;
        top: -22px;
        right: 6px;
        z-index: 2;
        min-height: 0;
        pointer-events: none;
    }

    .pictionary-player-word-bank-head .card-label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .pictionary-player-word-bank-count {
        min-width: 26px;
        height: 22px;
        padding: 0 7px;
        box-shadow:
            0 6px 14px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.14);
        font-size: 0.7rem;
    }

    .pictionary-head-chip {
        min-width: 68px;
        padding: 7px 9px;
    }

    .pictionary-stem-banner {
        min-height: 48px;
        padding: 8px 12px;
        font-size: 0.92rem;
    }

    .pictionary-round-answer-panel {
        margin-top: 6px;
        padding: 8px 12px 9px;
        border-radius: 18px;
    }

    .pictionary-round-answer {
        font-size: 1.66rem;
    }

    .pictionary-console-topline {
        align-items: flex-start;
    }

    .pictionary-console-timer {
        display: none;
    }

    .pictionary-console-metrics,
    .pictionary-console-actions {
        gap: 6px;
    }

    .pictionary-inline-chip {
        gap: 5px;
        min-height: 32px;
        padding: 0 8px;
    }

    .pictionary-inline-label {
        font-size: 0.64rem;
        letter-spacing: 0.08em;
    }

    .pictionary-life-strip {
        gap: 2px;
    }

    .pictionary-life-token {
        width: 13px;
        height: 13px;
    }

    .pictionary-life-icon {
        width: 11px;
        height: 11px;
    }

    .pictionary-life-icon::before {
        font-size: 0.76rem;
    }

    .pictionary-life-risk {
        gap: 3px;
        min-width: 28px;
        min-height: 22px;
        padding: 0 5px;
        font-size: 0.68rem;
    }

    .pictionary-life-risk::before {
        width: 4px;
        height: 4px;
    }

    .pictionary-inline-chip--worth strong {
        font-size: 0.86rem;
    }

    .pictionary-player-team-rail {
        grid-auto-columns: minmax(138px, 1fr);
    }

    .pictionary-player-word-bank-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pictionary-player-word-bank-chip {
        min-height: 44px;
        padding: 6px 8px;
        border-radius: 11px;
    }

    .pictionary-player-word-bank-chip strong {
        font-size: 0.84rem;
    }

    .pictionary-player-word-bank-chip span {
        font-size: 0.74rem;
    }

    .pictionary-controller-topline {
        grid-template-columns: minmax(0, 1fr);
    }

    .pictionary-controller-title-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .pictionary-controller-title-row .pictionary-controller-room-switch {
        justify-self: stretch;
        width: 100%;
    }

    .pictionary-controller-control-grid {
        grid-template-columns: minmax(150px, 0.88fr) minmax(0, 1.12fr);
    }

    .pictionary-controller-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pictionary-controller-round-chip {
        min-width: 72px;
        width: auto;
    }

    .pictionary-entry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .pictionary-entry-button {
        min-height: 62px;
        padding: 8px 10px;
    }

    .pictionary-entry-english {
        font-size: 0.86rem;
    }

    .pictionary-entry-korean {
        font-size: 0.74rem;
    }

    .pictionary-entry-stem {
        font-size: 0.68rem;
    }

    .pictionary-entry-used {
        position: static;
        margin-top: 2px;
    }

    .pictionary-scoreboard-panel,
    .pictionary-word-bank-panel {
        top: 88px;
        right: 12px;
        left: 12px;
        bottom: 96px;
        width: auto;
        border-radius: 24px;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-stage-console {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 10px;
        z-index: 30;
    }

    .pictionary-shell.is-player-view.is-guessing {
        grid-template-rows: minmax(0, 1fr);
        gap: 0;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-stage-card {
        min-height: 0;
        padding: 8px;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-canvas-shell {
        min-height: 0;
        border-radius: 22px;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-console--player {
        gap: 7px;
        padding: 8px;
        border-radius: 20px;
        background: rgba(18, 27, 33, 0.88);
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-console-topline {
        align-items: center;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-console-metrics {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-console-actions {
        display: none;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-inline-chip {
        min-height: 28px;
        padding: 0 7px;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-inline-chip--lives {
        padding-right: 7px;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-inline-chip--worth {
        flex: 1 1 92px;
        min-width: 0;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-inline-chip--worth strong {
        font-size: 0.84rem;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-life-token {
        width: 12px;
        height: 12px;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-life-icon {
        width: 10px;
        height: 10px;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-life-icon::before {
        font-size: 0.7rem;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-life-risk {
        gap: 2px;
        min-width: 25px;
        min-height: 20px;
        padding: 0 4px;
        font-size: 0.64rem;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-life-risk::before {
        width: 4px;
        height: 4px;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-guess-row {
        grid-template-columns: minmax(0, 1fr) minmax(86px, 0.34fr);
        gap: 8px;
        align-items: stretch;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-guess-row:has(.pictionary-guess-field.has-suggestions) {
        position: relative;
        padding-top: 38px;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-guess-field input {
        min-height: 48px;
        padding: 10px 12px;
        border-radius: 16px;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-guess-field.has-draft .pictionary-guess-shell input {
        padding-right: 62px;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-guess-field.has-suggestions .pictionary-guess-shell input {
        padding-right: 12px;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-guess-field.has-suggestions .pictionary-guess-shell {
        position: static;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-guess-field.has-suggestions .pictionary-guess-assist {
        top: 0;
        right: 4px;
        bottom: auto;
        height: 32px;
        width: calc(100% - 8px);
        max-width: calc(100% - 8px);
        transform: none;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-guess-field.has-suggestions .pictionary-guess-suggestions {
        width: 100%;
        max-width: 100%;
        justify-content: flex-end;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-guess-field.has-suggestions .pictionary-guess-suggestion-button {
        flex: 0 1 auto;
        min-width: 0;
        height: 32px;
        padding: 0 8px;
        font-size: 0.78rem;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-guess-button {
        min-width: 0;
        min-height: 48px;
        padding: 0 12px;
    }

    .card,
    .room-code-card {
        padding: 16px;
    }

    .host-lobby-stage-card,
    .waiting-card {
        --playground-bleed: 25px;
    }

    .player-lobby-grid .waiting-card {
        --player-lobby-stage-min-height: min(68vh, 540px);
        --playground-bleed: 0px;
        padding: 0;
        overflow: hidden;
    }

    @supports (height: 100svh) {
        .player-lobby-grid .waiting-card {
            --player-lobby-stage-min-height: min(68svh, 540px);
        }
    }

    .player-lobby-grid .waiting-card [data-lobby-playground-root],
    .player-lobby-grid .waiting-card .lobby-playground-shell,
    .player-lobby-grid .waiting-card .lobby-playground-stage {
        height: 100%;
    }

    .host-lobby-stage-card .lobby-playground-stage,
    .waiting-card .lobby-playground-stage {
        min-height: min(72vh, 620px);
        min-height: min(72svh, 620px);
    }

    .host-lobby-stage-card {
        --playground-bleed: 0px;
    }

    .roster-qr-button {
        top: calc(var(--ziar-player-roster-floating-count-size) + 4px);
        right: 10px;
    }

    .player-lobby-grid .player-lobby-roster-card {
        padding-top: 18px;
    }

    .player-lobby-grid .player-lobby-roster-card:has(.player-lobby-join-qr-button) {
        padding-top: 18px;
    }

    .player-lobby-count {
        top: -1px;
        right: calc(10px + (var(--ziar-qr-roster-overlay-frame-width-small) - var(--ziar-player-roster-floating-count-size)) / 2);
    }

    .host-presence-count {
        right: calc(10px + (var(--ziar-qr-roster-overlay-frame-width-small) - var(--ziar-player-roster-floating-count-size)) / 2);
    }

    .player-lobby-participants > .participant-list.player-roster-density-dense {
        padding-top: 0;
    }

    .host-presence-card {
        width: 100%;
        max-width: none;
        padding: 12px;
    }

    .roster-qr-button .room-qr-frame.roster-qr-frame {
        width: var(--ziar-qr-roster-overlay-frame-width-small);
        padding: var(--ziar-qr-roster-overlay-frame-padding-small);
        border-radius: var(--ziar-qr-roster-overlay-frame-radius-small);
    }

    .active-host-join-panel {
        gap: 12px;
    }

    .active-room-code-display {
        font-size: clamp(2.25rem, 10vw, 3.1rem);
    }

    .room-qr-frame.active-room-qr-frame {
        width: var(--ziar-qr-active-room-frame-width-small);
        padding: var(--ziar-qr-compact-frame-padding-small);
        border-radius: var(--ziar-qr-active-room-frame-radius-small);
    }

    .active-layout.is-host-view .room-qr-frame.active-room-qr-frame {
        width: var(--ziar-qr-active-room-host-frame-width-small);
    }

    .active-layout.is-host-view .active-side-card {
        height: auto;
        gap: 12px;
    }

    .active-layout.is-host-view .active-side-card.has-host-utility {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: start;
    }

    .active-layout.is-host-view .active-side-card.has-host-utility > * {
        min-width: 0;
    }

    .active-layout.is-host-view .active-host-utility-card {
        padding: 14px;
        gap: 10px;
    }

    .active-layout.is-host-view .active-host-join-panel {
        gap: 10px;
        align-items: center;
    }

    .active-layout.is-host-view .pictionary-host-utility-strip {
        grid-template-columns: minmax(0, 1fr) minmax(104px, 0.58fr);
        gap: 8px;
    }

    .active-layout.is-host-view .pictionary-host-utility-actions {
        gap: 5px;
    }

    .active-layout.is-host-view .pictionary-host-utility-actions .secondary-button {
        min-height: 32px;
        padding: 0 7px;
        font-size: 0.7rem;
    }

    .active-layout.is-host-view .active-room-code-display {
        font-size: clamp(1.9rem, 9vw, 2.8rem);
    }

    .active-layout.is-host-view .active-host-utility-actions {
        gap: 8px;
    }

    .active-layout.is-host-view .active-host-participation-field {
        min-height: 42px;
        padding-inline: 12px;
    }

    .active-layout.is-host-view .active-host-utility-actions .secondary-button {
        min-height: 42px;
        padding: 10px 12px;
        font-size: 0.84rem;
    }

    .active-layout.is-host-view .roster-card {
        height: auto;
        grid-template-rows: auto;
        min-height: 156px;
        padding: 14px;
    }

    .active-layout.is-host-view .roster-head {
        top: -1px;
        right: -1px;
    }

    .active-layout.is-host-view .roster-count {
        font-size: 0.84rem;
    }

    .active-layout.is-host-view .roster-body {
        overflow-y: auto;
        padding: 12px 4px 0 0;
    }

    .active-layout.is-host-view .roster-list {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-auto-columns: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--player-roster-gap);
        overflow: visible;
        padding-bottom: 0;
        scroll-snap-type: none;
    }

    .active-layout.is-host-view .roster-list.player-roster-density-roomy:not(.player-roster-single) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .active-layout.is-host-view .roster-list.player-roster-density-balanced,
    .active-layout.is-host-view .roster-list.player-roster-density-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .active-layout.is-host-view .pictionary-roster-card .roster-body {
        overflow-y: auto;
        padding: 12px 4px 0 0;
    }

    .active-layout.is-host-view .pictionary-roster-card .roster-list {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-auto-columns: auto;
        overflow-x: hidden;
        overflow-y: visible;
        padding-bottom: 0;
        scroll-snap-type: none;
    }

    .active-layout.is-host-view .roster-row {
        min-height: var(--player-roster-row-min);
        padding: var(--player-roster-row-padding-y) var(--player-roster-row-padding-x);
        scroll-snap-align: none;
    }

    .active-layout.is-host-view .roster-name {
        font-size: var(--player-roster-name-font-size);
    }

    .active-layout.is-host-view .roster-meta {
        font-size: 0.58rem;
    }

    .host-mode-inline-panel {
        padding: 16px;
        border-radius: 22px;
    }

    .host-mode-config-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .host-mode-config-nav {
        width: 100%;
        justify-content: space-between;
    }

    .host-mode-config-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .host-mode-summary-pill {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .host-mode-focus-pill {
        flex: 1 1 auto;
    }

    .host-mode-toggle-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .host-mode-button-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .host-mode-button-grid > :nth-child(3):last-child {
        grid-column: auto;
        justify-self: stretch;
        width: 100%;
    }

    .host-start-button {
        width: 100%;
        max-width: none;
    }

    .relic-mode-button,
    .pictionary-mode-button,
    .vault-mode-button {
        min-height: 120px;
        padding: 16px;
    }

    .host-source-editor.is-pictionary-grid {
        --host-pictionary-controller-panel-width: calc(var(--ziar-host-controller-qr-width-mobile) + 8px);
        --host-pictionary-controller-panel-reserve: calc(var(--host-pictionary-controller-panel-width) + 16px);
        --host-pictionary-grid-columns: minmax(0, 0.94fr) minmax(0, 0.88fr) minmax(0, 1.62fr);
    }

    .host-source-editor.is-pictionary-grid.is-no-translations {
        --host-pictionary-grid-columns: minmax(0, 0.9fr) minmax(0, 1.62fr);
    }

    .host-source-editor.is-pictionary-grid.is-no-hints {
        --host-pictionary-grid-columns: minmax(0, 0.96fr) minmax(0, 0.9fr);
    }

    .host-source-editor.is-pictionary-grid.is-no-translations.is-no-hints {
        --host-pictionary-grid-columns: minmax(0, 1fr);
    }

    .host-source-editor.is-vault-grid.is-vault-table-mode {
        --host-pictionary-grid-columns:
            minmax(78px, 0.86fr)
            minmax(52px, 0.42fr)
            minmax(116px, 1.48fr)
            minmax(78px, 0.78fr)
            minmax(82px, 0.86fr);
    }

    .host-source-editor.is-pictionary-grid .host-pictionary-pad-shell .host-controller-access-panel {
        position: relative;
        top: auto;
        right: auto;
        z-index: 2;
        grid-row: 2;
        width: auto;
        margin: 0 10px 10px;
    }

    .host-controller-qr-panel {
        padding: 10px;
        border-radius: 16px;
    }

    .host-controller-qr-label {
        font-size: 0.68rem;
    }

    .host-pictionary-upload-button {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .host-source-editor.is-pictionary-grid .host-source-translate-button {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .host-pictionary-editor-mode-switch {
        grid-template-columns: repeat(2, minmax(48px, 1fr));
        min-width: 118px;
    }

    .host-pictionary-editor-mode-button {
        min-height: 32px;
        padding: 0 9px;
        font-size: 0.76rem;
    }

    .host-source-editor.is-pictionary-grid .host-pictionary-pad-toolbar {
        padding: 12px 12px 8px;
    }

    .host-source-import-menu,
    .host-source-editor.is-pictionary-grid .host-source-import-menu {
        top: 54px;
        right: 10px;
        width: min(250px, calc(100% - 20px));
    }

    .host-source-editor.is-pictionary-grid .host-pictionary-source-pad-shell {
        grid-row: 3;
    }

    .host-source-editor.is-pictionary-grid .host-pictionary-source-pad {
        --host-pictionary-pad-inline: 12px;
        --host-pictionary-pad-bottom: 12px;
        padding-right: var(--host-pictionary-pad-inline);
    }

    .host-source-editor.is-pictionary-grid .host-pictionary-pad-shell {
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    .host-source-editor.is-pictionary-grid .host-pictionary-table-shell {
        grid-row: 3;
    }

    .host-source-editor.is-pictionary-grid .host-pictionary-grid-label {
        padding-inline: 4px;
        font-size: 0.56rem;
        letter-spacing: 0;
    }

    .host-source-editor.is-pictionary-table-mode .host-pictionary-pad-shell {
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    .host-source-editor.is-pictionary-table-mode .host-pictionary-pad-shell .host-controller-access-panel {
        position: relative;
        top: auto;
        right: auto;
        z-index: 2;
        grid-row: 2;
        width: auto;
        margin: 0 10px 10px;
        opacity: 1;
    }

    .host-source-editor.is-pictionary-table-mode .host-pictionary-table-shell {
        grid-row: 3;
        padding-right: 0;
    }

    .host-source-fog-overlay--pictionary {
        inset: 128px 12px 12px;
    }

    .host-pictionary-fog-sheet {
        grid-template-columns: minmax(58px, 0.7fr) minmax(0, 1fr);
        gap: 8px;
        width: min(300px, 88%);
        min-height: min(210px, 88%);
        padding: 14px;
        border-radius: 13px;
    }

    .host-pictionary-fog-tab {
        left: 16px;
        height: 20px;
    }

    .host-pictionary-fog-mark {
        top: 10px;
        right: 11px;
        width: 32px;
        height: 32px;
    }

    .host-pictionary-fog-mark-icon {
        width: 18px;
        height: 18px;
    }

    .host-pictionary-fog-lines {
        margin-right: 30px;
    }

    .host-pictionary-fog-clue-grid {
        gap: 5px;
    }

    .host-pictionary-fog-clue-grid span {
        min-height: 20px;
        border-radius: 5px;
    }

    .panel-collapse-button {
        width: 40px;
        height: 40px;
    }

    .tool-hero-card {
        padding: 14px 16px;
    }

    .tool-hero-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }

    .tool-hero-title {
        font-size: clamp(1.18rem, 6.5vw, 1.6rem);
        line-height: 1.02;
    }

    .page-shell.tool-shell.master1000-tool-shell {
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        min-height: 100svh;
        height: 100vh;
        height: 100svh;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .master1000-tool-shell .tool-brand-header {
        min-width: 0;
        padding: 0 10px;
        margin-bottom: 6px;
    }

    .master1000-tool-shell .brand-home {
        display: block;
        min-width: 0;
        min-height: 0;
        text-align: left;
        font-size: clamp(1.9rem, 8.6vw, 3rem);
        letter-spacing: 0.055em;
    }

    .master1000-tool-header-actions {
        width: auto;
        min-width: 0;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .master1000-tool-shell .language-toggle {
        min-width: 92px;
    }

    .master1000-tool-header-button,
    .master1000-tool-back-button {
        min-height: 36px;
        font-size: 0.79rem;
    }

    .master1000-tool-icon-button {
        width: 36px;
        min-width: 36px;
        padding: 0;
        border-radius: 13px;
        gap: 0;
    }

    .master1000-tool-icon-button .master1000-tool-button-label {
        display: none;
    }

    .master1000-tool-overlay-fullscreen {
        width: 40px;
        height: 40px;
        border-radius: 15px;
    }

    .master1000-tool-frame {
        min-height: 0;
        border-radius: 18px;
    }

    .master1000-tool-empty-card {
        border-radius: 18px;
    }

    .random-teams-stage {
        min-height: 300px;
        padding: 56px 14px 14px;
    }

    .random-teams-stage-controls {
        top: 10px;
        left: 10px;
        gap: 6px;
    }

    .random-teams-fullscreen-button,
    .random-teams-sound-button,
    .random-teams-animation-button,
    .random-teams-excluded-floor-button,
    .random-teams-wipe-button,
    .random-teams-late-add-toggle,
    .random-teams-late-remove-toggle {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .random-teams-late-add-icon {
        width: 22px;
        height: 22px;
    }

    .random-teams-late-remove-icon {
        width: 22px;
        height: 22px;
    }

    .random-teams-late-add-panel {
        top: calc(100% + 8px);
        min-width: 138px;
        padding: 5px;
    }

    .random-teams-late-add-field input {
        height: 32px;
        font-size: 0.82rem;
    }

    .random-teams-late-add-submit {
        width: 32px;
        height: 32px;
    }

    .random-teams-late-add-submit-icon {
        width: 22px;
        height: 22px;
    }

    .random-teams-layout {
        gap: 12px;
    }

    .random-teams-config-card {
        gap: 14px;
    }

    .is-random-teams-presenting:not(.has-random-teams-result) .random-teams-config-card {
        top: calc(env(safe-area-inset-top, 0px) + 58px);
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 72px);
        max-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 72px);
        opacity: 1;
        transform: none;
    }

    .is-random-teams-presenting .random-teams-mobile-exclusion-submit {
        z-index: 38;
    }

    .random-teams-mode-toggle {
        min-height: 42px;
    }

    .random-teams-mode-toggle .mode-chip-button {
        min-height: 32px;
        padding: 0 14px;
    }

    .random-teams-sentence {
        gap: 6px;
        font-size: 0.95rem;
    }

    .random-teams-start-button {
        min-height: 50px;
        font-size: 1rem;
    }

    .random-teams-inline-field {
        width: 74px;
    }

    .random-teams-inline-field input {
        min-height: 46px;
        font-size: 1.02rem;
    }

    .random-teams-exclusion-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        width: 100%;
    }

    .random-teams-exclusion-pill {
        width: 100%;
        min-width: 0;
        gap: 2px;
        padding-right: 3px;
    }

    .random-teams-exclusion-field .random-teams-exclusion-pill input {
        width: auto;
        min-width: 0;
        padding: 0 4px 0 8px;
        flex: 1 1 auto;
        font-size: 16px;
    }

    .random-teams-exclusion-remove {
        width: 24px;
        height: 24px;
    }

    .random-teams-board.has-random-teams-preview {
        align-content: start;
    }

    .is-random-teams-presenting .random-teams-results-layout:not(.is-order-mode) {
        height: 100%;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr) auto;
        align-content: stretch;
        overflow: hidden;
    }

    .is-random-teams-presenting .random-teams-results-layout:not(.is-order-mode) .random-teams-teams-grid:not(.is-order-mode) {
        min-height: 0;
        overflow: hidden;
    }

    .random-teams-board.has-random-teams-preview .random-teams-stage-empty {
        min-height: 0;
        height: auto;
        place-items: start center;
        padding: 0;
    }

    .random-teams-preview-grid {
        width: 100%;
        gap: 12px;
    }

    .random-teams-preview-grid.is-order-mode {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        overflow: visible;
        padding-bottom: 0;
    }

    .random-team-preview-box {
        min-height: 136px;
        padding: 14px;
    }

    .random-team-preview-box.is-order-mode {
        min-height: 124px;
    }

    .random-team-preview-orbs.is-order-mode {
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow: visible;
        gap: 10px;
    }

    .random-teams-preview-orb {
        width: 30px;
        height: 30px;
    }

    .random-teams-results-layout.is-order-mode {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 6px;
    }

    .random-teams-stage.has-order-result .random-teams-stage-controls,
    .is-random-teams-presenting .random-teams-stage.has-order-result .random-teams-stage-controls {
        top: 10px;
        left: 10px;
        width: auto;
        justify-content: flex-start;
    }

    .random-teams-results-layout.is-order-mode .random-teams-floor-tray,
    .is-random-teams-presenting .random-teams-results-layout.is-order-mode .random-teams-floor-tray {
        padding: 14px 8px 12px;
    }

    .random-teams-results-layout.is-order-mode .random-teams-floor-head,
    .is-random-teams-presenting .random-teams-results-layout.is-order-mode .random-teams-floor-head {
        display: grid;
        justify-items: center;
        gap: 8px;
        min-height: 0;
        margin-bottom: 10px;
    }

    .random-teams-results-layout.is-order-mode .random-teams-floor-head .setup-meta,
    .is-random-teams-presenting .random-teams-results-layout.is-order-mode .random-teams-floor-head .setup-meta {
        position: static;
        transform: none;
    }

    .random-team-name,
    .random-teams-floor-name {
        font-size: 1.06rem;
    }

    .random-teams-results-layout.is-order-mode .random-teams-floor-name,
    .is-random-teams-presenting .random-teams-results-layout.is-order-mode .random-teams-floor-name {
        font-size: 0.94rem;
        line-height: 1.05;
    }

    .random-teams-floor-head .setup-meta {
        width: 38px;
        min-width: 38px;
        height: 38px;
        font-size: 0.94rem;
    }

    .random-order-finish-front-button {
        left: 10px;
        width: 38px;
        height: 38px;
    }

    .random-order-finish-front-icon {
        width: 24px;
        height: 24px;
    }

    .random-teams-teams-grid:not(.is-order-mode) {
        gap: 12px;
    }

    .random-teams-teams-grid:not(.is-order-mode) .random-team-box {
        min-height: 0;
        display: block;
        padding: 16px 14px 14px;
    }

    .random-teams-teams-grid:not(.is-order-mode) .random-team-head {
        position: static;
        min-height: 0;
        margin-bottom: 0;
    }

    .random-teams-teams-grid:not(.is-order-mode) .random-team-count {
        position: absolute;
        top: 10px;
        right: 10px;
        transform: none;
    }

    .random-teams-teams-grid:not(.is-order-mode) .random-team-name {
        position: absolute;
        top: 13px;
        left: 14px;
        max-width: calc(100% - 70px);
        font-size: 0.82rem;
        opacity: 0.84;
        text-align: left;
        line-height: 1.05;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .random-teams-teams-grid:not(.is-order-mode) .random-team-members {
        min-height: 0;
        justify-content: center;
        align-content: flex-start;
        padding-top: 22px;
    }

    .is-random-teams-presenting .random-teams-teams-grid.is-roomy-team-layout {
        gap: 10px;
    }

    .is-random-teams-presenting .random-teams-teams-grid.is-roomy-team-layout .random-team-box {
        min-height: clamp(206px, calc(512px * var(--random-teams-presentation-scale)), 228px);
        padding: 12px 10px;
    }

    .is-random-teams-presenting .random-teams-teams-grid.is-roomy-team-layout .random-team-name {
        top: 11px;
        left: 12px;
        font-size: 0.88rem;
    }

    .is-random-teams-presenting .random-teams-teams-grid.is-roomy-team-layout .random-team-count {
        top: 9px;
        right: 9px;
    }

    .is-random-teams-presenting .random-teams-teams-grid.is-roomy-team-layout .random-team-members {
        gap: 6px 8px;
        padding-top: 19px;
    }

    .is-random-teams-presenting .random-teams-teams-grid.is-roomy-team-layout .member-token {
        width: clamp(52px, calc(136px * var(--random-teams-presentation-scale)), 60px);
        height: clamp(52px, calc(136px * var(--random-teams-presentation-scale)), 60px);
        font-size: clamp(1.06rem, calc(3rem * var(--random-teams-presentation-scale)), 1.32rem);
    }

    .is-random-teams-presenting .random-teams-teams-grid:not(.is-order-mode):not(.is-roomy-team-layout) {
        gap: clamp(6px, calc(18px * var(--random-teams-presentation-scale)), 12px);
    }

    .is-random-teams-presenting .random-teams-teams-grid:not(.is-order-mode):not(.is-roomy-team-layout) .random-team-box {
        padding: clamp(7px, calc(16px * var(--random-teams-presentation-scale)), 16px)
            clamp(6px, calc(14px * var(--random-teams-presentation-scale)), 14px)
            clamp(7px, calc(14px * var(--random-teams-presentation-scale)), 14px);
    }

    .is-random-teams-presenting .random-teams-teams-grid:not(.is-order-mode):not(.is-roomy-team-layout) .random-team-name {
        top: clamp(7px, calc(13px * var(--random-teams-presentation-scale)), 13px);
        left: clamp(8px, calc(14px * var(--random-teams-presentation-scale)), 14px);
        max-width: calc(100% - clamp(52px, calc(70px * var(--random-teams-presentation-scale)), 70px));
    }

    .is-random-teams-presenting .random-teams-teams-grid:not(.is-order-mode):not(.is-roomy-team-layout) .random-team-count {
        top: clamp(6px, calc(10px * var(--random-teams-presentation-scale)), 10px);
        right: clamp(6px, calc(10px * var(--random-teams-presentation-scale)), 10px);
    }

    .is-random-teams-presenting .random-teams-teams-grid:not(.is-order-mode):not(.is-roomy-team-layout) .random-team-members {
        gap: clamp(4px, calc(14px * var(--random-teams-presentation-scale)), 14px)
            clamp(5px, calc(14px * var(--random-teams-presentation-scale)), 14px);
        padding-top: clamp(15px, calc(22px * var(--random-teams-presentation-scale)), 22px);
    }

    .is-random-teams-presenting .random-teams-teams-grid:not(.is-order-mode):not(.is-roomy-team-layout) .member-token,
    .is-random-teams-presenting .random-teams-stage.has-dense-team-result .random-teams-drag-ghost,
    .is-random-teams-presenting .random-teams-stage.has-dense-team-result .random-teams-launch-orb {
        width: clamp(30px, calc(94px * var(--random-teams-presentation-scale)), 65px);
        height: clamp(30px, calc(94px * var(--random-teams-presentation-scale)), 65px);
        font-size: clamp(0.72rem, calc(1.95rem * var(--random-teams-presentation-scale)), 1.32rem);
    }

    .is-random-teams-presenting .random-teams-teams-grid:not(.is-order-mode):not(.is-roomy-team-layout) .member-token::after,
    .is-random-teams-presenting .random-teams-stage.has-dense-team-result .random-teams-drag-ghost::after,
    .is-random-teams-presenting .random-teams-stage.has-dense-team-result .random-teams-launch-orb::after {
        inset: clamp(3px, calc(6px * var(--random-teams-presentation-scale)), 6px);
    }

    .random-team-box.is-order-mode {
        padding: 10px 8px 8px;
    }

    .is-random-teams-presenting .random-team-box.is-order-mode {
        overflow: hidden;
    }

    .random-team-members.is-order-mode {
        padding: 2px 0 4px;
    }

    .is-random-teams-presenting .random-team-members.is-order-mode,
    .is-random-teams-presenting .random-order-coil {
        overflow: hidden;
    }

    .random-teams-stage.has-order-result {
        --random-order-token-radius: 14px;
        --random-order-token-inner-radius: 10px;
    }

    .is-random-teams-presenting .random-teams-stage.has-order-result {
        --random-order-token-radius: clamp(10px, calc(14px * var(--random-teams-presentation-scale)), 12px);
        --random-order-token-inner-radius: clamp(7px, calc(10px * var(--random-teams-presentation-scale)), 8px);
    }

    .random-team-box.is-order-mode .member-token {
        width: 50px;
        height: 50px;
        font-size: 1.04rem;
    }

    .random-teams-stage.has-order-result .random-teams-drag-ghost.is-order-shape:not(.member-token-finished),
    .random-teams-stage.has-order-result .random-teams-launch-orb.is-order-shape:not(.is-order-finished) {
        width: 50px;
        height: 50px;
        font-size: 1.04rem;
    }

    .is-random-teams-presenting .random-team-box.is-order-mode .member-token {
        width: clamp(40px, calc(76px * var(--random-teams-presentation-scale)), 48px);
        height: clamp(40px, calc(76px * var(--random-teams-presentation-scale)), 48px);
        font-size: clamp(0.92rem, calc(1.58rem * var(--random-teams-presentation-scale)), 1.08rem);
    }

    .is-random-teams-presenting .random-teams-stage.has-order-result .random-teams-drag-ghost.is-order-shape:not(.member-token-finished),
    .is-random-teams-presenting .random-teams-stage.has-order-result .random-teams-launch-orb.is-order-shape:not(.is-order-finished) {
        width: clamp(40px, calc(76px * var(--random-teams-presentation-scale)), 48px);
        height: clamp(40px, calc(76px * var(--random-teams-presentation-scale)), 48px);
        font-size: clamp(0.92rem, calc(1.58rem * var(--random-teams-presentation-scale)), 1.08rem);
    }

    .random-team-box.is-order-mode .member-token-order {
        min-width: 24px;
        height: 22px;
        padding: 0 7px;
        font-size: 0.88rem;
    }

    .is-random-teams-presenting .random-team-box.is-order-mode .member-token-order {
        min-width: clamp(20px, calc(32px * var(--random-teams-presentation-scale)), 26px);
        height: clamp(18px, calc(28px * var(--random-teams-presentation-scale)), 22px);
        padding: 0 clamp(5px, calc(7px * var(--random-teams-presentation-scale)), 7px);
        font-size: clamp(0.72rem, calc(0.92rem * var(--random-teams-presentation-scale)), 0.82rem);
    }

    .random-order-finish-front-button {
        left: 8px;
        width: 34px;
        height: 34px;
    }

    .random-order-finish-front-icon {
        width: 22px;
        height: 22px;
    }

    .random-order-row {
        gap: 8px 6px;
        padding: 4px 14px 8px 8px;
    }

    .random-order-row.has-finish-front-button {
        padding-left: 46px;
    }

    .is-random-teams-presenting .random-order-row {
        gap: clamp(5px, calc(8px * var(--random-teams-presentation-scale)), 8px)
            clamp(5px, calc(6px * var(--random-teams-presentation-scale)), 6px);
        padding: clamp(3px, calc(4px * var(--random-teams-presentation-scale)), 4px)
            clamp(8px, calc(12px * var(--random-teams-presentation-scale)), 12px)
            clamp(6px, calc(8px * var(--random-teams-presentation-scale)), 8px)
            clamp(3px, calc(4px * var(--random-teams-presentation-scale)), 4px);
    }

    .is-random-teams-presenting .random-order-row.has-finish-front-button {
        padding-left: clamp(28px, calc(44px * var(--random-teams-presentation-scale)), 44px);
    }

    .random-order-row.has-continuation {
        margin-top: 8px;
        padding-top: 7px;
    }

    .is-random-teams-presenting .random-order-row.has-continuation {
        margin-top: clamp(5px, calc(8px * var(--random-teams-presentation-scale)), 8px);
        padding-top: clamp(5px, calc(7px * var(--random-teams-presentation-scale)), 7px);
    }

    .random-teams-floor-members.is-order-mode {
        grid-template-columns: repeat(2, max-content);
        justify-content: center;
        overflow-x: hidden;
        row-gap: 8px;
        column-gap: 5px;
    }

    .is-random-teams-presenting .random-teams-floor-members.is-order-mode {
        row-gap: 8px;
        column-gap: 4px;
        padding-right: 0;
    }

    .random-teams-results-layout.is-order-mode .random-teams-floor-empty,
    .is-random-teams-presenting .random-teams-results-layout.is-order-mode .random-teams-floor-empty {
        width: 100%;
        max-width: 100%;
        font-size: 0.72rem;
        line-height: 1.12;
        text-align: center;
        overflow-wrap: break-word;
    }

    .random-teams-results-layout.is-order-mode .random-teams-floor-empty {
        display: none;
    }

    .member-token,
    .random-teams-drag-ghost,
    .random-teams-launch-orb {
        width: 65px;
        height: 65px;
        font-size: 1.32rem;
    }

    .capy-shield.random-teams-member-capy {
        --playground-capy-outline: 3px;
        --playground-capy-eye-size: 1.5px;
        --playground-capy-eye-highlight-size: 0.38px;
        --playground-capy-ear-outline: 1.3px;
        --playground-capy-nostril-size: 0.96px;
        --playground-capy-nostril-fade-size: 1.32px;
    }

    .member-token-finished .capy-shield.random-teams-member-capy,
    .random-teams-launch-orb.is-order-finished .capy-shield.random-teams-member-capy {
        --playground-capy-outline: 1.75px;
        --playground-capy-eye-size: 0.9px;
        --playground-capy-eye-highlight-size: 0.2px;
        --playground-capy-ear-outline: 0.75px;
        --playground-capy-nostril-size: 0.55px;
        --playground-capy-nostril-fade-size: 0.78px;
    }

    .random-teams-floor-tray.is-order-mode .member-token-finished {
        width: 31px;
        height: 31px;
        font-size: 0.7rem;
    }

    .is-random-teams-presenting .random-teams-floor-tray.is-order-mode .member-token-finished {
        width: 33px;
        height: 33px;
        font-size: 0.74rem;
    }

    .random-teams-floor-tray.is-order-mode.is-scrollable .random-teams-floor-members {
        max-height: none;
        overflow-x: hidden;
        scrollbar-gutter: auto;
    }

    .is-random-teams-presenting .random-teams-floor-tray:not(.is-order-mode) {
        min-height: clamp(92px, calc(164px * var(--random-teams-presentation-scale)), 124px);
        max-height: min(24vh, calc(190px * var(--random-teams-presentation-scale)));
        max-height: min(24svh, calc(190px * var(--random-teams-presentation-scale)));
        padding: 8px 10px 10px;
        overflow: hidden;
    }

    .is-random-teams-presenting .random-teams-floor-tray:not(.is-order-mode) .random-teams-floor-head {
        min-height: 0;
        margin-bottom: 5px;
    }

    .is-random-teams-presenting .random-teams-floor-tray:not(.is-order-mode) .random-teams-floor-name {
        font-size: 0.9rem;
        line-height: 1.05;
    }

    .is-random-teams-presenting .random-teams-floor-tray:not(.is-order-mode) .random-teams-floor-head .setup-meta {
        width: 34px;
        min-width: 34px;
        height: 34px;
        font-size: 0.88rem;
    }

    .is-random-teams-presenting .random-teams-floor-tray:not(.is-order-mode) .random-teams-floor-members {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(34px, 46px));
        justify-content: center;
        justify-items: center;
        align-content: flex-start;
        flex: 1 1 auto;
        min-height: clamp(48px, calc(86px * var(--random-teams-presentation-scale)), 62px);
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        gap: calc(6px * var(--random-teams-presentation-scale));
        padding: 1px 3px 5px 0;
        scrollbar-gutter: auto;
        scrollbar-width: thin;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    .is-random-teams-presenting .random-teams-floor-tray:not(.is-order-mode) .member-token.member-token-floor {
        width: clamp(34px, calc(60px * var(--random-teams-presentation-scale)), 46px);
        height: clamp(34px, calc(60px * var(--random-teams-presentation-scale)), 46px);
        font-size: clamp(0.84rem, calc(1.16rem * var(--random-teams-presentation-scale)), 1rem);
    }

    .is-random-teams-presenting .random-teams-floor-tray:not(.is-order-mode) .member-token.member-token-floor::after {
        inset: clamp(2px, calc(4px * var(--random-teams-presentation-scale)), 4px);
    }

    .random-teams-drag-ghost.member-token-finished,
    .random-teams-launch-orb.is-order-finished {
        width: 31px;
        height: 31px;
        font-size: 0.7rem;
    }

    .is-random-teams-presenting .random-teams-drag-ghost.member-token-finished,
    .is-random-teams-presenting .random-teams-launch-orb.is-order-finished {
        width: 33px;
        height: 33px;
        font-size: 0.74rem;
    }

    .is-random-teams-presenting .random-teams-stage-card {
        inset: calc(env(safe-area-inset-top, 0px) + 8px) 6px calc(env(safe-area-inset-bottom, 0px) + 6px) 6px;
    }

    .is-random-teams-presenting .random-teams-stage {
        padding: calc(env(safe-area-inset-top, 0px) + 58px) 10px calc(env(safe-area-inset-bottom, 0px) + 12px);
    }

    .is-random-teams-presenting .random-teams-board {
        gap: 10px;
    }

    .is-random-teams-presenting .random-teams-stage.has-order-result .random-teams-board {
        height: 100%;
        max-height: 100%;
        min-height: 0;
        overflow: hidden;
        overscroll-behavior: contain;
        padding-right: 0;
    }

    .is-random-teams-presenting .random-teams-results-layout.is-order-mode {
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 6px;
    }

    .is-random-teams-presenting .random-teams-teams-grid.is-order-mode {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .is-random-teams-presenting .random-teams-floor-tray.is-order-mode.is-scrollable .random-teams-floor-members {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 0;
    }

    .room-modal {
        width: calc(100vw - 18px);
        padding: 18px;
        border-radius: 24px;
    }

    .lobby-playground-name-button {
        max-width: min(100%, 180px);
        font-size: 0.94rem;
    }

    .lobby-playground-stage-head {
        top: 12px;
        left: 12px;
        right: 12px;
        gap: 10px;
    }

    .host-lobby-stage-card .lobby-playground-stage-head {
        inset: 12px;
    }

    .host-lobby-stage-card .lobby-playground-name-button {
        max-width: min(100%, 220px);
    }

    .host-presence-card {
        max-width: none;
    }

    .lobby-playground-title {
        font-size: 1.02rem;
        max-width: 100%;
    }

    .lobby-playground-stage {
        min-height: 340px;
    }

    .lobby-playground-avatar.is-self .lobby-playground-square {
        --vault-capy-mask-size: 38px;
        --playground-capy-outline: 3px;
        --playground-capy-eye-size: 1.85px;
        --playground-capy-eye-highlight-size: 0.6px;
        --playground-capy-mouth-stroke: 1.35px;
        width: 38px;
        height: 38px;
    }

    .maze-tile {
        --tile-size: 72px;
        --tile-half-size: 36px;
    }

    .maze-pit {
        width: 72px;
        height: 72px;
        border-radius: 50%;
    }

    .maze-tile.is-pressed {
        transform: translate(calc(var(--tile-x) - var(--tile-half-size)), calc(var(--tile-y) - var(--tile-half-size) + 2px)) scale(0.98);
    }

    .tile-word {
        font-size: 0.84rem;
    }
}

@media (orientation: landscape) and (min-width: 641px) and (max-height: 720px) {
    .random-team-box.is-order-mode .member-token {
        width: 62px;
        height: 62px;
        font-size: 1.28rem;
    }

    .random-team-box.is-order-mode .member-token-order {
        min-width: 26px;
        height: 24px;
        padding: 0 7px;
        font-size: 0.84rem;
    }

    .random-team-members.is-order-mode {
        padding: 3px 6px 5px;
    }

    .random-order-row {
        gap: 14px 12px;
        padding: 6px 34px 10px;
    }

    .random-order-row.has-finish-front-button {
        padding-left: 50px;
    }

    .random-order-row.has-continuation {
        margin-top: 14px;
        padding-top: 10px;
    }

    .random-teams-floor-tray.is-order-mode .member-token-finished,
    .random-teams-drag-ghost.member-token-finished,
    .random-teams-launch-orb.is-order-finished {
        width: 46px;
        height: 46px;
        font-size: 0.92rem;
    }
}

@media (min-width: 981px) and (max-height: 760px) {
    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-lobby-shell {
        min-height: clamp(min(700px, calc(100vh - 114px)), calc(100vh - 130px), 980px);
        min-height: clamp(min(700px, calc(100svh - 114px)), calc(100svh - 130px), 980px);
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-lobby-overlays {
        position: absolute;
        inset: 18px;
        grid-template-columns: minmax(0, 1fr) var(--host-lobby-side-rail-width);
        pointer-events: none;
        order: initial;
    }

    .host-lobby-side-rail,
    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-lobby-side-rail {
        grid-template-columns:
            minmax(250px, 1fr)
            minmax(320px, clamp(340px, 23vw, var(--ziar-host-lobby-qr-card-max-width, 406px)));
        pointer-events: auto;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-qr-card {
        display: grid;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-mobile-qr-button {
        display: none;
    }
}

@media (min-width: 981px) and (max-width: 1240px) {
    .host-lobby-overlays,
    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-lobby-overlays {
        --host-lobby-side-rail-width: clamp(440px, 43vw, 540px);
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-lobby-overlays {
        grid-template-columns: minmax(0, 1fr) var(--host-lobby-side-rail-width);
    }

    .host-lobby-side-rail,
    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-lobby-side-rail {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .active-layout.is-host-view .active-side-card.has-host-utility {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .active-layout.is-host-view .active-host-utility-card {
        padding: 12px;
    }

    .active-layout.is-host-view .active-host-join-panel {
        gap: 8px;
    }

    .active-layout.is-host-view .pictionary-host-utility-strip {
        grid-template-columns: minmax(0, 1fr) minmax(92px, 0.52fr);
        gap: 6px;
    }

    .active-layout.is-host-view .pictionary-host-utility-actions .secondary-button {
        min-height: 30px;
        padding: 0 6px;
        font-size: 0.66rem;
    }

    .active-layout.is-host-view .active-room-code-display {
        font-size: clamp(1.65rem, 8.4vw, 2.35rem);
    }

    .active-layout.is-host-view .room-qr-frame.active-room-qr-frame {
        width: var(--ziar-qr-active-room-host-frame-width-small);
        padding: 4px;
        border-radius: 10px;
    }

    .active-layout.is-host-view .room-qr-frame.active-room-qr-frame .room-qr-placeholder {
        font-size: 0.64rem;
        letter-spacing: 0.1em;
        text-indent: 0.1em;
    }

    .active-layout.is-host-view .active-host-participation-field {
        min-height: 38px;
        padding-inline: 10px;
    }

    .active-layout.is-host-view .active-host-utility-actions .secondary-button {
        min-height: 38px;
        padding: 9px 10px;
    }

    .active-layout.is-host-view .roster-head {
        top: 8px;
        right: 8px;
    }

    .active-layout.is-host-view .roster-body {
        padding-top: 8px;
    }

    .active-layout.is-host-view .roster-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .active-layout.is-host-view .roster-list.player-roster-single,
    .active-layout.is-host-view .roster-list.player-roster:has(> :only-child),
    .pictionary-shell.is-host-view .pictionary-roster-card .roster-list.player-roster-single,
    .pictionary-shell.is-host-view .pictionary-roster-card .roster-list.player-roster:has(> :only-child) {
        grid-template-columns: minmax(0, 1fr);
    }

    .active-layout.is-host-view .roster-row {
        min-width: 0;
    }

    .active-layout.is-host-view .player-roster-actions {
        --player-roster-action-strip-width: 24px;
        margin-block: 0;
        margin-right: 0;
    }

    .active-layout.is-host-view .player-roster-actions-trigger {
        border-radius: 8px;
        min-height: 34px;
    }
}

@media (min-width: 1280px) {
    .room-shell.is-active-layout {
        --maze-board-scale: var(--ziar-maze-board-scale-desktop);
        --maze-avatar-size: var(--ziar-maze-avatar-size-desktop);
        --maze-avatar-radius: var(--ziar-maze-avatar-radius-desktop);
        --maze-avatar-border: var(--ziar-maze-avatar-border-desktop);
        --maze-avatar-halo: var(--ziar-maze-avatar-halo-desktop);
    }
}

@keyframes random-order-first-pulse {
    0%,
    100% {
        opacity: 0.24;
        transform: scale(0.94);
    }

    50% {
        opacity: 0.52;
        transform: scale(1.08);
    }
}

@keyframes random-team-floor-roll {
    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-2px) rotate(3deg);
    }
}

@keyframes duplicate-exclusion-absorbed {
    0% {
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        transform: scale(1);
    }

    26% {
        border-color: rgba(255, 255, 255, 0.92);
        box-shadow:
            0 0 0 3px rgba(255, 255, 255, 0.2),
            0 0 22px rgba(255, 255, 255, 0.26);
        transform: scale(1.04);
    }

    100% {
        border-color: rgba(150, 255, 247, 0.24);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        transform: scale(1);
    }
}

@keyframes lobby-pellet-splash {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.32);
    }

    22% {
        opacity: 0.96;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.8);
    }
}

@keyframes random-team-splash-core {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--splash-tilt, 0deg)) scale(0.22);
    }

    24% {
        opacity: 0.96;
        transform: translate(-50%, -50%) rotate(var(--splash-tilt, 0deg)) scale(0.76);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--splash-tilt, 0deg)) scale(1.18);
    }
}

@keyframes random-team-splash-blot {
    0% {
        opacity: 0;
        transform: scale(0.34) rotate(-8deg);
    }

    20% {
        opacity: 0.88;
        transform: scale(0.9) rotate(2deg);
    }

    100% {
        opacity: 0;
        transform: scale(1.28) rotate(10deg);
    }
}

@keyframes random-team-splash-spray {
    0% {
        opacity: 0;
        transform: scale(0.18);
    }

    26% {
        opacity: 0.92;
        transform: scale(0.82);
    }

    100% {
        opacity: 0;
        transform: scale(1.42);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pit-open {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--pit-x, 0px)), calc(-50% + var(--pit-y, 0px))) scale(0.82);
        filter: brightness(1);
    }

    18% {
        opacity: 1;
    }

    34% {
        opacity: 1;
        transform: translate(calc(-50% + var(--pit-x, 0px)), calc(-50% + var(--pit-y, 0px))) scale(1);
        filter: brightness(0.9);
    }

    62% {
        opacity: 1;
        transform: translate(calc(-50% + var(--pit-x, 0px)), calc(-50% + var(--pit-y, 0px))) scale(1.06, 0.54);
        filter: brightness(0.52);
    }

    100% {
        opacity: 1;
        transform: translate(calc(-50% + var(--pit-x, 0px)), calc(-50% + var(--pit-y, 0px))) scale(1.08, 0.18);
        filter: brightness(0.42);
    }
}

@keyframes flare-burst {
    0% {
        opacity: 0;
        transform: translate(calc(-50% + var(--flare-x, 0px)), calc(-50% + var(--flare-y, 0px))) scale(0.18);
        filter: brightness(1);
    }

    32% {
        opacity: 1;
        transform: translate(calc(-50% + var(--flare-x, 0px)), calc(-50% + var(--flare-y, 0px))) scale(1.06);
        filter: brightness(1.45);
    }

    72% {
        opacity: 0.58;
        transform: translate(calc(-50% + var(--flare-x, 0px)), calc(-50% + var(--flare-y, 0px))) scale(0.62);
        filter: brightness(1.08);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--flare-x, 0px)), calc(-50% + var(--flare-y, 0px))) scale(0.14);
        filter: brightness(0.92);
    }
}

@keyframes level-best-callout {
    0% {
        opacity: 0;
        transform: translate(-50%, -8px) scale(0.96);
        filter: brightness(1);
    }

    14% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
        filter: brightness(1.18);
    }

    72% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
        filter: brightness(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -4px) scale(0.98);
        filter: brightness(0.92);
    }
}

@keyframes final-result-reveal {
    0% {
        opacity: 0;
        transform: translateY(calc(var(--final-result-y) + 24px)) scale(0.96);
        filter: brightness(0.92);
    }

    62% {
        opacity: 1;
        transform: translateY(calc(var(--final-result-y) - 4px)) scale(1.015);
        filter: brightness(1.08);
    }

    100% {
        opacity: 1;
        transform: translateY(var(--final-result-y)) scale(1);
        filter: brightness(1);
    }
}

@keyframes passage-sheen {
    0% {
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        filter: brightness(1);
    }

    28%,
    64% {
        box-shadow:
            0 0 0 1px rgba(255, 250, 224, 0.24),
            0 0 28px rgba(255, 239, 181, 0.36),
            0 0 54px rgba(255, 223, 128, 0.18);
        filter: brightness(1.16);
    }

    100% {
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        filter: brightness(1);
    }
}

@keyframes passage-button-shimmer {
    0% {
        opacity: 0;
        transform: translateX(-120%) rotate(16deg);
    }

    18% {
        opacity: 0.9;
    }

    56% {
        opacity: 0.84;
        transform: translateX(36%) rotate(16deg);
    }

    100% {
        opacity: 0;
        transform: translateX(120%) rotate(16deg);
    }
}

@keyframes end-tile-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(255, 248, 219, 0.4),
            0 0 24px rgba(255, 237, 170, 0.54),
            0 0 52px rgba(255, 218, 114, 0.28),
            0 0 88px rgba(246, 189, 62, 0.18),
            0 16px 30px rgba(0, 0, 0, 0.34);
    }

    50% {
        box-shadow:
            0 0 0 1px rgba(255, 252, 228, 0.54),
            0 0 30px rgba(255, 244, 190, 0.72),
            0 0 72px rgba(255, 224, 127, 0.42),
            0 0 120px rgba(246, 189, 62, 0.26),
            0 18px 32px rgba(0, 0, 0, 0.34);
    }
}

@keyframes trail-halo-breathe {
    0% {
        opacity: 0.74;
        transform: scale(0.92);
    }

    50% {
        opacity: 0.98;
        transform: scale(1.06);
    }

    100% {
        opacity: 0.74;
        transform: scale(0.92);
    }
}

@keyframes trail-particles-rise {
    0%,
    14% {
        opacity: 0;
        transform: translateY(12px) scale(0.78);
    }

    28% {
        opacity: 0.88;
    }

    72% {
        opacity: 0.56;
        transform: translateY(-10px) scale(1.04);
    }

    88%,
    100% {
        opacity: 0;
        transform: translateY(-24px) scale(1.12);
    }
}

@keyframes end-halo-breathe {
    0% {
        opacity: 0.88;
        transform: scale(0.92);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }

    100% {
        opacity: 0.88;
        transform: scale(0.92);
    }
}

@keyframes end-particles-b {
    0%,
    14% {
        opacity: 0;
        transform: translateY(12px) scale(0.78);
    }

    30% {
        opacity: 0.92;
    }

    70% {
        opacity: 0.58;
        transform: translateY(-12px) scale(1.04);
    }

    88%,
    100% {
        opacity: 0;
        transform: translateY(-32px) scale(1.12);
    }
}

@keyframes portal-core-breathe {
    0%,
    100% {
        filter: brightness(0.98);
        transform: scale(0.96);
    }

    50% {
        filter: brightness(1.1);
        transform: scale(1.02);
    }
}

@keyframes portal-spark-drift {
    0%,
    14% {
        opacity: 0;
        transform: translateY(12px) scale(0.88);
    }

    32% {
        opacity: 0.92;
    }

    72% {
        opacity: 0.44;
        transform: translateY(-8px) scale(1.02);
    }

    88%,
    100% {
        opacity: 0;
        transform: translateY(-22px) scale(1.08);
    }
}

@keyframes tile-collapse {
    0% {
        transform: translate(calc(var(--tile-x) - var(--tile-half-size)), calc(var(--tile-y) - var(--tile-half-size))) scale(1);
        opacity: 1;
        filter: brightness(1);
    }

    18% {
        transform: translate(
                calc(var(--tile-x) - var(--tile-half-size) + (var(--collapse-fall-x, 0px) * 0.24)),
                calc(var(--tile-y) - var(--tile-half-size) + (var(--collapse-fall-y, 0px) * 0.24))
            )
            scale(0.84);
        opacity: 0.92;
        filter: brightness(0.96);
    }

    100% {
        transform: translate(
                calc(var(--tile-x) - var(--tile-half-size) + var(--collapse-fall-x, 0px)),
                calc(var(--tile-y) - var(--tile-half-size) + var(--collapse-fall-y, 0px))
            )
            scale(0.12);
        opacity: 0;
        filter: brightness(0.62);
    }
}

@keyframes tile-label-drop {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(30px);
    }
}

@media (max-width: 979px) {
    .host-presence-card .participant-list,
    .host-presence-card .list-empty {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .host-presence-card .participant-list.player-roster-density-dense {
        max-height: min(56vh, 560px);
        max-height: min(56svh, 560px);
        overflow: auto;
        padding-right: 4px;
    }

    .host-presence-card .participant-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (orientation: landscape) and (min-width: 641px) and (max-height: 840px) {
    .room-shell.is-active-layout .room-topbar {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin-top: 6px;
        padding-top: 6px;
    }

    .room-shell.is-active-layout .room-brand {
        font-size: 0.78rem;
        line-height: 1;
    }

    .room-shell.is-active-layout .room-topbar-actions {
        align-items: center;
        gap: 6px;
    }

    .room-shell.is-active-layout .account-chip {
        min-height: 30px;
        padding: 0 8px 0 4px;
        font-size: 0.74rem;
    }

    .room-shell.is-active-layout .account-chip-avatar {
        width: 22px;
        height: 22px;
        font-size: 0.66rem;
    }

    .room-shell.is-active-layout .room-topbar-actions .ghost-button {
        min-height: 30px;
        padding: 0 8px;
        font-size: 0.74rem;
    }

    .room-shell.is-active-layout .room-topbar-actions .language-toggle {
        min-width: 86px;
        min-height: 30px;
        padding: 2px;
    }

    .room-shell.is-active-layout .language-toggle-track,
    .room-shell.is-active-layout .language-toggle-option {
        min-height: 24px;
    }

    .room-shell.is-active-layout .language-toggle-option {
        padding: 0 6px;
        font-size: 0.64rem;
    }
}

@media (max-width: 640px) {
    .pictionary-round-timer {
        height: 6px;
        min-width: 46px;
    }

    .pictionary-round-timer.has-countdown {
        margin-bottom: 50px;
    }

    .pictionary-round-timer.is-grace-countdown {
        margin-bottom: 58px;
    }

    .pictionary-round-timer.has-countdown::before {
        top: calc(100% + 4px);
        min-width: 54px;
        min-height: 36px;
        padding: 0 12px 2px;
        border-radius: 0 0 14px 14px;
        font-size: 1.58rem;
    }

    .pictionary-round-timer.is-grace-countdown::before {
        min-width: 58px;
        min-height: 44px;
        padding: 0 14px 2px;
        font-size: 2.08rem;
    }

    .pictionary-round-timer::after {
        width: 5px;
        height: 12px;
    }

    .pictionary-stage-viewer-chip {
        max-width: min(280px, calc(50% - 18px));
    }

    .pictionary-shell.is-player-view .pictionary-stage-viewer-chip {
        max-width: min(320px, calc(100% - 24px));
    }
}

#app.theme-vault-breakers,
.room-shell.has-lobby-vault-selection {
    --player-roster-card-bg: linear-gradient(180deg, rgba(21, 35, 41, 0.92), rgba(8, 16, 20, 0.98)), rgba(9, 19, 24, 0.98);
    --player-roster-card-border: rgba(96, 226, 236, 0.28);
    --player-roster-row-bg: linear-gradient(180deg, rgba(20, 42, 48, 0.86), rgba(9, 21, 26, 0.94));
    --player-roster-row-border: rgba(124, 238, 244, 0.18);
    --player-roster-action-bg: linear-gradient(180deg, rgba(42, 74, 82, 0.58), rgba(14, 30, 36, 0.84));
    --player-roster-action-hover-bg: linear-gradient(180deg, rgba(62, 100, 108, 0.72), rgba(18, 42, 50, 0.9));
    --player-roster-action-border: rgba(124, 238, 244, 0.22);
    --player-roster-action-hover-border: rgba(156, 249, 251, 0.38);
    --player-roster-action-color: #d9feff;
    --player-roster-action-dot-shadow: rgba(173, 253, 255, 0.86);
    --player-roster-action-menu-bg: rgba(8, 18, 22, 0.98);
    --player-roster-action-item-hover-bg: rgba(96, 226, 236, 0.12);
}

#app.theme-vault-breakers .card,
#app.theme-vault-breakers .room-code-card {
    background: linear-gradient(180deg, rgba(20, 41, 48, 0.82), rgba(7, 15, 19, 0.98)), rgba(8, 17, 21, 0.98);
    border-color: rgba(111, 235, 241, 0.28);
}

#app.theme-vault-breakers .secondary-button,
#app.theme-vault-breakers .ghost-button,
#app.theme-vault-breakers .mode-button,
#app.theme-vault-breakers .mode-chip-button {
    background: rgba(9, 21, 26, 0.96);
    border-color: rgba(116, 237, 244, 0.22);
    color: #e9feff;
}

#app.theme-vault-breakers .mode-button.selected,
#app.theme-vault-breakers .mode-chip-button {
    border-color: rgba(144, 249, 251, 0.48);
    box-shadow: inset 0 0 0 1px rgba(206, 255, 255, 0.12);
}

#app.theme-vault-breakers .viewer-badge,
#app.theme-vault-breakers .stat-chip,
#app.theme-vault-breakers .metric-pill,
#app.theme-vault-breakers .setup-meta {
    background: rgba(10, 24, 30, 0.96);
    border-color: rgba(116, 237, 244, 0.2);
}

#app.theme-vault-breakers .room-code-display {
    color: #eaffff;
    text-shadow:
        0 0 18px rgba(118, 237, 244, 0.18),
        0 10px 26px rgba(0, 0, 0, 0.28);
}

.qr-join-card.is-vault-selected {
    border-color: rgba(96, 226, 236, 0.44);
    background: linear-gradient(180deg, rgba(18, 47, 55, 0.88), rgba(5, 18, 23, 0.96)), rgba(5, 18, 23, 0.96);
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(181, 251, 253, 0.08);
}

.qr-join-card.is-vault-selected .field input:focus {
    border-color: rgba(116, 237, 244, 0.6);
    box-shadow: 0 0 0 3px rgba(96, 226, 236, 0.16);
}

.host-mode-card.is-vault-selected {
    background: linear-gradient(180deg, rgba(18, 47, 55, 0.92), rgba(6, 18, 23, 0.96)), rgba(6, 18, 23, 0.96);
    border-color: rgba(100, 226, 236, 0.46);
}

.host-mode-card.is-vault-selected::before {
    opacity: 0.9;
    background: linear-gradient(135deg, rgba(87, 225, 236, 0.16), rgba(87, 225, 236, 0));
}

.host-mode-card.is-vault-selected .host-mode-summary-pill,
.host-mode-card.is-vault-selected .host-mode-focus-pill,
.host-mode-card.is-vault-selected .setup-meta {
    background: rgba(8, 26, 32, 0.9);
    border-color: rgba(116, 237, 244, 0.22);
    color: #e9feff;
}

.relic-mode-button,
.pictionary-mode-button,
.vault-mode-button {
    min-width: 0;
}

.vault-mode-button {
    border: 1px solid rgba(116, 237, 244, 0.22);
    background: linear-gradient(180deg, rgba(16, 45, 54, 0.88), rgba(7, 20, 25, 0.96)), rgba(7, 20, 25, 0.96);
    color: #e9feff;
}

.vault-mode-button.selected {
    border-color: rgba(144, 249, 251, 0.56);
    box-shadow:
        inset 0 0 0 1px rgba(215, 255, 255, 0.1),
        0 18px 34px rgba(15, 220, 230, 0.12);
}

.vault-mode-button .relic-mode-kicker {
    color: rgba(225, 253, 255, 0.78);
}

.vault-mode-button.selected .relic-mode-kicker {
    color: #f3ffff;
}

.vault-mode-button .relic-mode-emblem {
    background: rgba(9, 28, 34, 0.78);
    border-color: rgba(123, 238, 245, 0.28);
    color: #9df7fb;
}

.host-source-editor.is-vault-grid {
    border-color: rgba(106, 230, 238, 0.24);
    background: rgba(7, 20, 25, 0.54);
}

.host-source-editor.is-vault-grid:focus-within {
    border-color: rgba(132, 245, 248, 0.5);
    box-shadow: 0 0 0 3px rgba(94, 226, 236, 0.16);
}

.host-source-editor.is-vault-grid .host-source-gutter-shell {
    background: rgba(5, 15, 19, 0.48);
    border-right-color: rgba(116, 237, 244, 0.16);
}

.host-source-editor.is-vault-grid .host-source-gutter-row {
    color: #bdfbff;
}

.host-source-editor.is-vault-grid .host-source-import-button,
.host-source-editor.is-vault-grid .host-source-translate-button {
    border-color: rgba(123, 238, 245, 0.32);
    color: #dbfeff;
}

.host-mode-inline-panel.is-vault .host-source-field {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr);
    align-items: stretch;
    gap: 10px;
}

.host-vault-preview {
    min-height: 116px;
    max-height: 100%;
    border: 1px solid rgba(106, 230, 238, 0.18);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(10, 29, 35, 0.76), rgba(5, 16, 20, 0.92)), rgba(5, 16, 20, 0.92);
    overflow: auto;
}

.host-vault-preview-empty {
    min-height: 116px;
    display: grid;
    place-items: center;
    padding: 18px;
    color: rgba(226, 252, 255, 0.72);
    text-align: center;
}

.host-vault-preview-grid {
    display: grid;
    grid-template-columns: repeat(var(--vault-preview-columns, 5), minmax(86px, 1fr));
    gap: 1px;
    min-width: calc(var(--vault-preview-columns, 5) * 92px);
    padding: 1px;
}

.host-vault-preview-category,
.host-vault-preview-cell {
    min-height: 42px;
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 7px 8px;
    background: rgba(11, 28, 34, 0.92);
    color: #e9feff;
    line-height: 1.15;
}

.host-vault-preview-category {
    min-height: 36px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #9df7fb;
}

.host-vault-preview-cell strong {
    font-size: 0.86rem;
}

.host-vault-preview-cell span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(226, 252, 255, 0.74);
    font-size: 0.76rem;
}

.host-vault-preview-cell.is-empty {
    background: rgba(8, 18, 22, 0.62);
}

.vault-view-root {
    min-height: 0;
    height: 100%;
    color: #edfeff;
}

.vault-view-root.is-vault-resolving {
    animation: vaultResolvePulse 640ms ease-out 1;
}

@keyframes vaultResolvePulse {
    0% {
        box-shadow: inset 0 0 0 rgba(255, 104, 104, 0);
    }
    34% {
        box-shadow: inset 0 0 0 999px rgba(255, 71, 71, 0.045);
    }
    100% {
        box-shadow: inset 0 0 0 rgba(255, 104, 104, 0);
    }
}

.vault-shell {
    min-height: 0;
    height: 100%;
    display: grid;
    gap: 14px;
}

.vault-host-shell {
    --vault-host-panel-width: clamp(340px, 24vw, 430px);
    grid-template-columns: minmax(0, 1fr) var(--vault-host-panel-width);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
}

.vault-board-card,
.vault-host-panel,
.vault-host-join-card,
.vault-current-card,
.vault-score-card,
.vault-question-card,
.vault-choice-card {
    border: 1px solid rgba(106, 230, 238, 0.18);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(14, 33, 39, 0.86), rgba(5, 14, 18, 0.96)), rgba(5, 14, 18, 0.96);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.vault-board-card {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.vault-board-head,
.vault-host-actions,
.vault-control-row,
.vault-choice-toolbar,
.vault-player-head,
.vault-score-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vault-board-head,
.vault-player-head,
.vault-score-head {
    justify-content: space-between;
}

.vault-title-stack {
    display: grid;
    gap: 2px;
}

.vault-title-stack span,
.vault-player-score span,
.vault-player-timer span,
.vault-question-card span,
.vault-current-meta span,
.vault-score-head span {
    color: rgba(196, 249, 252, 0.74);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.vault-title-stack strong {
    color: #f5ffff;
    font-size: clamp(1.55rem, 4vw, 3rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.vault-host-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.vault-chooser-pill {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid rgba(125, 238, 245, 0.2);
    border-radius: 999px;
    background: rgba(8, 25, 31, 0.78);
    color: #d9feff;
    font-size: 0.88rem;
    font-weight: 800;
}

.vault-board-grid {
    display: grid;
    grid-template-columns: repeat(var(--vault-board-columns, 5), minmax(86px, 1fr));
    gap: 8px;
    min-width: 0;
}

.vault-category-cell,
.vault-tile-cell,
.vault-tile-button {
    min-width: 0;
    position: relative;
    border-radius: 8px;
}

.vault-category-cell {
    min-height: 48px;
    display: grid;
    place-items: center;
    padding: 8px;
    background: rgba(10, 30, 36, 0.9);
    border: 1px solid rgba(116, 237, 244, 0.18);
    color: #c9fbff;
    font-size: clamp(0.78rem, 1vw, 0.98rem);
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.vault-tile-cell.is-empty {
    min-height: 74px;
    background: rgba(8, 18, 22, 0.36);
}

.vault-tile-button {
    position: relative;
    width: 100%;
    min-height: clamp(58px, 10vh, 96px);
    display: grid;
    place-items: center;
    border: 1px solid rgba(93, 215, 224, 0.28);
    background: linear-gradient(180deg, rgba(21, 67, 78, 0.96), rgba(7, 27, 34, 0.98)), rgba(7, 27, 34, 0.98);
    color: #eaffff;
    font: inherit;
    font-weight: 950;
    cursor: pointer;
    transition:
        transform 120ms ease,
        border-color 140ms ease,
        background 140ms ease,
        opacity 140ms ease;
}

.vault-tile-button > span {
    font-size: clamp(1.25rem, 3vw, 2.5rem);
    line-height: 1;
}

.vault-tile-button:not(:disabled):hover,
.vault-tile-button:not(:disabled):focus-visible {
    transform: translateY(-1px);
    border-color: rgba(162, 249, 251, 0.62);
    outline: none;
}

.vault-tile-button.is-current {
    border-color: rgba(255, 255, 255, 0.58);
    background: linear-gradient(180deg, rgba(47, 119, 132, 0.98), rgba(10, 48, 58, 0.98)), rgba(10, 48, 58, 0.98);
}

.vault-tile-button.is-cleared {
    opacity: 0.48;
    background: rgba(7, 19, 24, 0.9);
}

.vault-tile-button.is-locked {
    opacity: 0.38;
    cursor: not-allowed;
}

.vault-host-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.vault-host-join-card {
    display: grid;
    align-content: start;
    padding: 10px;
    min-width: 0;
}

.vault-host-join-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.vault-host-join-panel .active-room-code-display {
    font-size: clamp(1.75rem, 2.7vw, 2.55rem);
}

.vault-room-qr-frame.active-room-qr-frame {
    width: min(var(--ziar-qr-active-room-host-frame-width), 82px);
}

.vault-current-card,
.vault-score-card {
    padding: 14px;
}

.vault-current-card {
    display: grid;
    gap: 14px;
    align-content: start;
}

.vault-current-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vault-current-meta strong,
.vault-player-timer strong,
.vault-player-score strong {
    color: #f6ffff;
    font-size: clamp(1.55rem, 4vw, 2.6rem);
    line-height: 1;
    font-weight: 950;
}

.vault-question-text {
    margin: 0;
    color: #f3ffff;
    font-size: clamp(1.08rem, 2vw, 1.55rem);
    line-height: 1.28;
    font-weight: 850;
}

.vault-question-text.is-empty {
    color: rgba(220, 250, 253, 0.72);
}

.vault-answer-reveal {
    display: grid;
    gap: 3px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(135, 244, 248, 0.24);
    background: rgba(10, 37, 45, 0.84);
    color: #ffffff;
    font-weight: 950;
}

.vault-answer-reveal span {
    color: rgba(211, 253, 255, 0.75);
    font-size: 0.92rem;
}

.vault-control-row {
    flex-wrap: wrap;
}

.vault-score-card {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
}

.vault-roster-card {
    position: relative;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    overflow: visible;
}

.vault-roster-head {
    position: absolute;
    grid-row: 1;
    grid-column: 1;
    top: -1px;
    right: -1px;
    z-index: 7;
    justify-content: flex-end;
    gap: 0;
    margin: 0;
    pointer-events: none;
}

.vault-roster-toolbar {
    position: relative;
    z-index: 6;
    grid-row: 1;
    grid-column: 1;
    min-width: 0;
    display: grid;
    gap: 6px;
    padding-right: calc(var(--ziar-player-roster-floating-count-size) + 48px);
}

.vault-roster-primary-row {
    min-width: 0;
    min-height: 34px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: auto;
    align-items: center;
    gap: 6px;
}

.vault-roll-button,
.vault-unlock-value-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-radius: 8px;
    font-size: 0;
    line-height: 1.05;
}

.vault-roll-button .ziarcadia-icon,
.vault-unlock-value-button .ziarcadia-icon {
    width: 16px;
    height: 16px;
    display: block;
}

.vault-unlock-value-button {
    border-color: rgba(255, 222, 126, 0.4);
    background: linear-gradient(180deg, rgba(65, 47, 22, 0.88), rgba(18, 13, 12, 0.94)), rgba(29, 20, 14, 0.86);
    color: #ffe08a;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 16px rgba(255, 211, 112, 0.12);
}

.vault-unlock-value-button:hover,
.vault-unlock-value-button:focus-visible {
    border-color: rgba(255, 236, 168, 0.62);
    background: linear-gradient(180deg, rgba(86, 61, 27, 0.92), rgba(23, 16, 12, 0.96)), rgba(35, 24, 13, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 0 2px rgba(255, 211, 112, 0.14),
        0 0 18px rgba(255, 211, 112, 0.16);
}

.vault-crack-duration-control {
    position: relative;
    min-width: 0;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-self: end;
    overflow: visible;
}

.vault-crack-duration-trigger {
    -webkit-appearance: none;
    appearance: none;
    min-width: 54px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 6px;
    border: 1px solid rgba(145, 247, 221, 0.28);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(13, 34, 32, 0.84), rgba(7, 14, 17, 0.9)), rgba(8, 21, 24, 0.78);
    color: #d9fff7;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 950;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.vault-crack-duration-trigger:hover,
.vault-crack-duration-trigger:focus-visible,
.vault-crack-duration-control.is-open .vault-crack-duration-trigger {
    border-color: rgba(145, 247, 221, 0.48);
    background: linear-gradient(180deg, rgba(17, 48, 44, 0.9), rgba(7, 18, 20, 0.94)), rgba(8, 27, 28, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 2px rgba(145, 247, 221, 0.12);
}

.vault-crack-duration-trigger .ziarcadia-icon {
    width: 13px;
    height: 13px;
    display: block;
    flex: 0 0 auto;
}

.vault-crack-duration-trigger strong {
    color: #ffe08a;
    font-weight: 950;
}

.vault-crack-duration-trigger span {
    color: rgba(255, 224, 138, 0.78);
    font-size: 0.68rem;
    font-weight: 900;
}

.vault-crack-duration-editor {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 24;
    min-height: 32px;
    display: none;
    grid-template-columns: 28px minmax(42px, auto) 28px;
    align-items: stretch;
    gap: 3px;
    padding: 3px;
    border: 1px solid rgba(145, 247, 221, 0.32);
    border-radius: 999px;
    background: rgba(10, 25, 28, 0.98);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 26px rgba(0, 0, 0, 0.34),
        0 0 18px rgba(145, 247, 221, 0.12);
}

.vault-crack-duration-editor.is-open {
    display: grid;
}

.vault-crack-duration-editor::after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: -5px;
    width: 9px;
    height: 9px;
    border-right: 1px solid rgba(145, 247, 221, 0.32);
    border-bottom: 1px solid rgba(145, 247, 221, 0.32);
    background: inherit;
    transform: rotate(45deg);
}

.vault-crack-duration-label {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    color: rgba(217, 255, 247, 0.78);
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.vault-crack-duration-step {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    border-left: 1px solid rgba(145, 247, 221, 0.15);
    background: rgba(145, 247, 221, 0.08);
    color: #d9fff7;
    font-size: 0.72rem;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}

.vault-crack-duration-editor .vault-crack-duration-step {
    position: relative;
    z-index: 1;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    display: inline-grid;
    place-items: center;
    padding: 0 0 2px;
    border: 1px solid rgba(216, 253, 255, 0.18);
    border-radius: 999px;
    background: rgba(25, 51, 58, 0.96);
    color: #d9fff7;
    font-size: 1.08rem;
    cursor: pointer;
}

.vault-crack-duration-editor .vault-crack-duration-step:hover,
.vault-crack-duration-editor .vault-crack-duration-step:focus-visible {
    border-color: rgba(216, 253, 255, 0.42);
    background: rgba(40, 87, 96, 0.98);
}

.vault-crack-duration-step:hover,
.vault-crack-duration-step:focus-visible {
    background: rgba(145, 247, 221, 0.17);
}

.vault-crack-duration-input-wrap {
    min-width: 0;
    display: inline-grid;
    grid-template-columns: minmax(2ch, 1fr) auto;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding-inline: 4px;
    border-left: 1px solid rgba(145, 247, 221, 0.16);
    color: #ffe08a;
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1;
}

.vault-crack-duration-editor .vault-crack-duration-input-wrap {
    position: relative;
    z-index: 1;
    min-height: 28px;
    padding-inline: 6px;
    border: 0;
    border-radius: 999px;
    background: rgba(7, 16, 18, 0.82);
}

.vault-crack-duration-input {
    width: 2.4ch;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff4c6;
    font: inherit;
    text-align: right;
}

.vault-crack-duration-input::-webkit-outer-spin-button,
.vault-crack-duration-input::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
}

.vault-crack-duration-input[type="number"] {
    appearance: textfield;
}

.vault-chooser-chip {
    appearance: none;
    min-width: 0;
    width: 100%;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 141, 239, 0.2);
    background: rgba(10, 8, 15, 0.7);
    color: rgba(244, 233, 255, 0.72);
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1;
    text-align: left;
}

.vault-chooser-chip.is-ready {
    border-color: rgba(145, 247, 221, 0.38);
    background: rgba(11, 34, 32, 0.78);
    color: #d9fff7;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(145, 247, 221, 0.09);
}

.vault-chooser-chip.is-ready:hover,
.vault-chooser-chip.is-ready:focus-visible {
    border-color: rgba(255, 222, 126, 0.48);
    background: linear-gradient(180deg, rgba(255, 222, 126, 0.08), transparent), rgba(11, 34, 32, 0.84);
    box-shadow:
        0 0 0 1px rgba(255, 222, 126, 0.1),
        0 0 20px rgba(145, 247, 221, 0.14);
}

.vault-chooser-chip:disabled {
    cursor: default;
}

.vault-chooser-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(244, 233, 255, 0.42);
}

.vault-chooser-chip.is-ready .vault-chooser-dot {
    background: #91f7dd;
    box-shadow: 0 0 12px rgba(145, 247, 221, 0.52);
}

.vault-chooser-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vault-roster-head .roster-count {
    font-size: 0.84rem;
}

.vault-roster-card .roster-body {
    position: relative;
    z-index: 1;
    grid-row: 2;
    grid-column: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0;
}

.vault-score-head strong {
    color: #dffeff;
    font-variant-numeric: tabular-nums;
}

.vault-team-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    gap: var(--player-roster-gap, 8px);
    overflow: visible;
    padding-right: 0;
}

.vault-team-row {
    min-height: var(--player-roster-row-min, 40px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 4px;
    padding: var(--player-roster-row-padding-y, 6px) var(--player-roster-row-padding-x, 8px);
    border-radius: 8px;
    border: 1px solid rgba(116, 237, 244, 0.16);
    background: var(--player-roster-row-bg);
    overflow: visible;
}

.vault-team-row.is-solved {
    border-color: rgba(128, 255, 201, 0.42);
    background: radial-gradient(circle at 12% 20%, rgba(128, 255, 201, 0.16), transparent 30%), var(--player-roster-row-bg);
}

.vault-team-row.is-status-armed {
    border-color: rgba(255, 214, 126, 0.38);
}

.vault-team-row.is-status-cracking {
    border-color: rgba(255, 141, 239, 0.3);
}

.vault-team-row.is-status-failed {
    border-color: rgba(255, 139, 152, 0.4);
}

.vault-team-row.is-status-logged {
    border-color: rgba(156, 184, 255, 0.38);
}

.vault-team-row.is-chooser {
    border-color: rgba(145, 247, 221, 0.46);
    background:
        radial-gradient(circle at 10% 18%, rgba(145, 247, 221, 0.2), transparent 34%),
        linear-gradient(180deg, rgba(19, 45, 42, 0.9), rgba(9, 20, 22, 0.96));
    box-shadow:
        inset 0 0 0 1px rgba(222, 255, 247, 0.06),
        0 0 0 1px rgba(145, 247, 221, 0.1),
        0 12px 24px rgba(7, 18, 18, 0.22);
}

.vault-team-row.is-away {
    border-color: rgba(255, 132, 144, 0.3);
    background: radial-gradient(circle at 14% 22%, rgba(255, 123, 137, 0.18), transparent 30%), rgba(42, 14, 21, 0.96);
    box-shadow:
        inset 0 0 0 1px rgba(255, 216, 220, 0.05),
        0 10px 24px rgba(38, 5, 12, 0.22);
}

.vault-team-identity {
    min-width: 0;
    display: grid;
    gap: 3px;
    overflow: visible;
}

.vault-team-name-line {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    overflow: visible;
}

.vault-team-row .player-roster-actions {
    --player-roster-action-strip-width: auto;
    position: relative;
    inset: auto;
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    opacity: 1;
}

.vault-team-row .player-roster-actions-menu {
    top: calc(100% + 5px);
    left: 0;
    right: auto;
    bottom: auto;
    transform-origin: 0 0;
}

.vault-team-name-trigger {
    justify-items: start;
    justify-content: start;
    align-items: start;
    min-height: 0;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #f3ffff;
    font-size: var(--player-roster-name-font-size, 0.82rem);
    font-weight: 850;
    line-height: 1.16;
    text-align: left;
    box-shadow: none;
}

.vault-team-name-trigger:hover,
.vault-team-name-trigger:focus-visible,
.vault-team-row .player-roster-actions.is-open .vault-team-name-trigger {
    color: #d9fff7;
    background: transparent;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.vault-team-name-trigger .player-roster-actions-trigger-label {
    max-width: 100%;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.vault-team-name-trigger.is-long-name {
    font-size: calc(var(--player-roster-name-font-size, 0.82rem) * 0.88);
}

.vault-team-name-trigger.is-extra-long-name {
    font-size: calc(var(--player-roster-name-font-size, 0.82rem) * 0.76);
}

.vault-team-status-led {
    --vault-team-led-color: rgba(220, 250, 253, 0.48);
    --vault-team-led-glow: rgba(220, 250, 253, 0.18);
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 0.22em;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--vault-team-led-color), white 30%);
    background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.72), transparent 28%), var(--vault-team-led-color);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--vault-team-led-color), transparent 78%),
        0 0 10px var(--vault-team-led-glow);
}

.vault-team-status-led.is-ready {
    --vault-team-led-color: #91f7dd;
    --vault-team-led-glow: rgba(145, 247, 221, 0.46);
}

.vault-team-status-led.is-armed {
    --vault-team-led-color: #ffe08a;
    --vault-team-led-glow: rgba(255, 224, 138, 0.5);
}

.vault-team-status-led.is-cracking {
    --vault-team-led-color: #ff8def;
    --vault-team-led-glow: rgba(255, 141, 239, 0.46);
}

.vault-team-status-led.is-done {
    --vault-team-led-color: #80ffc9;
    --vault-team-led-glow: rgba(128, 255, 201, 0.48);
}

.vault-team-status-led.is-failed {
    --vault-team-led-color: #ff8b98;
    --vault-team-led-glow: rgba(255, 139, 152, 0.42);
}

.vault-team-status-led.is-logged,
.vault-team-status-led.is-closed {
    --vault-team-led-color: #9cb8ff;
    --vault-team-led-glow: rgba(156, 184, 255, 0.42);
}

.vault-team-status-led.is-away {
    --vault-team-led-color: #ff8b98;
    --vault-team-led-glow: rgba(255, 139, 152, 0.36);
}

.vault-team-lock-position {
    flex: 0 0 auto;
    min-height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    border: 1px solid rgba(255, 224, 138, 0.28);
    background: rgba(255, 224, 138, 0.12);
    color: #ffe8a5;
    font-size: 0.62rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(255, 224, 138, 0.14);
}

.vault-team-away-badge {
    flex: 0 0 auto;
    min-height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 140, 151, 0.34);
    background: rgba(106, 20, 33, 0.88);
    color: #ffd7dc;
    font-size: var(--player-roster-badge-font-size, 0.58rem);
    font-weight: 900;
    line-height: 1;
}

.vault-chooser-badge {
    flex: 0 0 auto;
    width: 10px;
    min-width: 10px;
    height: 10px;
    min-height: 10px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(145, 247, 221, 0.4);
    background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.7), transparent 30%), rgba(145, 247, 221, 0.72);
    color: #d9fff7;
    font-size: 0;
    font-weight: 950;
    line-height: 1;
    box-shadow:
        0 0 0 2px rgba(145, 247, 221, 0.13),
        0 0 10px rgba(145, 247, 221, 0.32);
}

.vault-team-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
    overflow: visible;
}

.vault-team-score-line {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    overflow: visible;
}

.vault-team-score-wrap {
    position: relative;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow: visible;
}

.vault-crack-meter {
    flex: 0 1 auto;
    min-width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    overflow: visible;
}

.vault-crack-dot {
    width: 14px;
    height: 14px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(220, 250, 253, 0.18);
    background: rgba(7, 5, 10, 0.64);
    color: rgba(220, 250, 253, 0.56);
    font-size: 0.52rem;
    font-weight: 950;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.vault-crack-dot.is-current {
    border-color: rgba(255, 141, 239, 0.44);
    background: rgba(255, 111, 232, 0.16);
    color: #ffd4f8;
    box-shadow: 0 0 12px rgba(255, 111, 232, 0.16);
}

.vault-crack-dot.is-armed {
    border-color: rgba(255, 214, 126, 0.52);
    background: rgba(255, 214, 126, 0.18);
    color: #ffe6a0;
}

.vault-crack-dot.is-submitted {
    border-color: rgba(156, 184, 255, 0.46);
    background: rgba(111, 142, 255, 0.18);
    color: #d7e0ff;
}

.vault-crack-dot.is-solved {
    border-color: rgba(128, 255, 201, 0.48);
    background: rgba(128, 255, 201, 0.18);
    color: #caffe8;
}

.vault-crack-dot.is-failed {
    border-color: rgba(255, 139, 152, 0.48);
    background: rgba(255, 92, 113, 0.17);
    color: #ffd7dc;
    box-shadow: 0 0 12px rgba(255, 92, 113, 0.16);
}

.vault-score-popup {
    position: absolute;
    left: calc(100% + 5px);
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 28px;
    min-height: 18px;
    padding: 0 6px 1px;
    border-radius: 999px;
    border: 1px solid rgba(255, 226, 126, 0.48);
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.34), transparent 36%),
        linear-gradient(180deg, rgba(255, 225, 124, 0.98), rgba(196, 133, 38, 0.98));
    color: #2b1906;
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow:
        0 5px 12px rgba(16, 10, 3, 0.2),
        0 0 12px rgba(255, 225, 124, 0.2);
    pointer-events: none;
    transform-origin: 50% 50%;
    animation: vault-score-popup 1800ms cubic-bezier(0.18, 0.84, 0.24, 1) forwards;
    animation-delay: var(--vault-score-popup-delay, 0ms);
}

.vault-score-popup.is-effort {
    border-color: rgba(230, 237, 248, 0.72);
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.52), transparent 36%),
        linear-gradient(180deg, rgba(240, 244, 250, 0.98), rgba(154, 166, 181, 0.98));
    color: #18212d;
    box-shadow:
        0 5px 12px rgba(8, 12, 18, 0.2),
        0 0 12px rgba(218, 228, 242, 0.22);
}

.vault-score-popup.is-big-award {
    min-width: 34px;
    min-height: 20px;
    font-size: 0.74rem;
}

.vault-team-score {
    min-width: 0;
    text-align: left;
    color: #f3ffff;
    font-size: 0.82rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

@keyframes vault-score-popup {
    0% {
        opacity: 0;
        transform: translate3d(0, calc(-50% + 2px), 0) scale(0.9);
    }

    14% {
        opacity: 1;
        transform: translate3d(0, -50%, 0) scale(1.03);
    }

    76% {
        opacity: 1;
        transform: translate3d(0, calc(-50% - 1px), 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, calc(-50% - 4px), 0) scale(0.97);
    }
}

.vault-team-actions {
    display: flex;
    gap: 4px;
}

.vault-team-actions button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid rgba(116, 237, 244, 0.18);
    background: rgba(8, 25, 31, 0.84);
    color: #dffeff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
}

.vault-player-shell {
    min-height: 0;
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
}

.vault-player-head {
    gap: 10px;
}

.vault-player-score,
.vault-player-timer {
    min-height: 76px;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid rgba(106, 230, 238, 0.18);
    border-radius: 8px;
    background: rgba(7, 20, 25, 0.86);
}

.vault-player-timer {
    min-width: 112px;
    text-align: right;
}

.vault-player-main {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

.vault-question-card {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.vault-question-card p {
    margin: 0;
    color: #f7ffff;
    font-size: clamp(1.18rem, 4.5vw, 2.25rem);
    line-height: 1.2;
    font-weight: 900;
}

.vault-choice-card {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
}

.vault-choice-toolbar {
    justify-content: space-between;
}

.vault-scanner-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid rgba(138, 244, 248, 0.26);
    background: rgba(8, 27, 34, 0.92);
    color: #eaffff;
    font: inherit;
    cursor: pointer;
}

.vault-scanner-button span {
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px rgba(118, 237, 244, 0.16);
}

.vault-feedback {
    min-width: 0;
    flex: 1 1 auto;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(116, 237, 244, 0.14);
    background: rgba(5, 17, 22, 0.72);
    color: rgba(226, 252, 255, 0.78);
    font-size: 0.9rem;
    font-weight: 800;
    text-align: right;
}

.vault-feedback.is-correct {
    border-color: rgba(121, 243, 186, 0.32);
    color: #dffff1;
}

.vault-feedback.is-wrong {
    border-color: rgba(255, 124, 124, 0.26);
    color: #ffe7e7;
}

.vault-choice-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(104px, 27vw, 168px), 1fr));
    grid-auto-rows: minmax(54px, auto);
    gap: 8px;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 2px 2px max(10px, env(safe-area-inset-bottom, 0px)) 2px;
    scroll-padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.vault-choice-button {
    position: relative;
    min-width: 0;
    min-height: 54px;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 9px 10px;
    border-radius: 8px;
    border: 1px solid rgba(106, 230, 238, 0.2);
    background: linear-gradient(180deg, rgba(21, 58, 68, 0.96), rgba(7, 25, 31, 0.98)), rgba(7, 25, 31, 0.98);
    color: #f4ffff;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 120ms ease,
        border-color 140ms ease,
        background 140ms ease,
        opacity 140ms ease;
}

.vault-choice-button:not(:disabled):hover,
.vault-choice-button:not(:disabled):focus-visible {
    transform: translateY(-1px);
    border-color: rgba(162, 249, 251, 0.58);
    outline: none;
}

.vault-choice-button.is-selected {
    border-color: rgba(255, 255, 255, 0.72);
    background: linear-gradient(180deg, rgba(56, 128, 141, 0.98), rgba(11, 52, 63, 0.98)), rgba(11, 52, 63, 0.98);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 10px 22px rgba(43, 221, 232, 0.12);
}

.vault-choice-button.is-soft-eliminating {
    animation: vaultChoiceSoftEliminate 720ms ease-out 1;
}

@keyframes vaultChoiceSoftEliminate {
    0% {
        border-color: rgba(106, 230, 238, 0.2);
    }
    35% {
        border-color: rgba(255, 118, 118, 0.45);
        background: linear-gradient(180deg, rgba(78, 38, 44, 0.92), rgba(31, 13, 16, 0.98)), rgba(31, 13, 16, 0.98);
    }
    100% {
        border-color: rgba(106, 230, 238, 0.2);
    }
}

.vault-choice-button:disabled {
    cursor: default;
}

.vault-choice-button:disabled:not(.is-selected) {
    opacity: 0.72;
    filter: saturate(0.78);
}

.vault-view-root.is-vault-choice-hold .vault-choice-button:disabled:not(.is-selected) {
    opacity: 0.46;
    filter: saturate(0.48) brightness(0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.vault-view-root.is-vault-choice-hold .vault-choice-button:disabled:not(.is-selected)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 6, 12, 0.08), rgba(8, 6, 12, 0.32));
}

.vault-view-root.is-vault-choice-hold .vault-scanner-button:disabled {
    cursor: default;
    opacity: 0.56;
    filter: saturate(0.5) brightness(0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.vault-view-root.is-vault-choice-hold .vault-scanner-button:disabled .vault-scanner-lens {
    box-shadow:
        inset 0 0 0 7px rgba(184, 119, 255, 0.08),
        0 0 10px rgba(184, 119, 255, 0.12);
}

.vault-choice-answer,
.vault-choice-korean {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vault-choice-answer {
    font-size: clamp(0.98rem, 3.6vw, 1.18rem);
}

.vault-choice-korean {
    max-height: 0;
    opacity: 0;
    color: #aaf8fc;
    font-size: 0.86rem;
    line-height: 1.08;
    transition:
        opacity 110ms ease,
        max-height 140ms ease;
}

.vault-view-root.is-scanning .vault-choice-korean {
    display: -webkit-box;
    max-height: 2.35em;
    opacity: 1;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.vault-view-root.is-scanner-closing .vault-choice-korean {
    animation: vaultSpyTranslationAway 240ms cubic-bezier(0.18, 0.84, 0.24, 1) both;
}

.vault-view-root.is-scanning .vault-scanner-button {
    border-color: rgba(184, 255, 255, 0.62);
    background: rgba(18, 60, 70, 0.96);
}

.vault-view-root.is-scanner-closing .vault-scanner-button {
    animation: vaultScannerDismiss 260ms cubic-bezier(0.18, 0.84, 0.24, 1) both;
}

@keyframes vaultSpyTranslationAway {
    from {
        max-height: 1.2em;
        opacity: 1;
        transform: translateY(0);
    }
    to {
        max-height: 0;
        opacity: 0;
        transform: translateY(-5px);
    }
}

@keyframes vaultScannerDismiss {
    0% {
        transform: scale(1);
        filter: brightness(1.16);
    }
    56% {
        transform: scale(0.982);
        filter: brightness(1.04);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

.vault-choice-empty,
.vault-team-empty {
    display: grid;
    place-items: center;
    min-height: 120px;
    color: rgba(226, 252, 255, 0.68);
    text-align: center;
}

@media (max-width: 980px) {
    .host-mode-inline-panel.is-vault .host-source-field {
        grid-template-columns: minmax(0, 1fr);
    }

    .vault-host-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .vault-host-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .vault-board-grid {
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
    }
}

@media (max-width: 720px) {
    .vault-view-root {
        min-height: calc(100svh - 78px);
    }

    .vault-board-card,
    .vault-current-card,
    .vault-score-card,
    .vault-question-card,
    .vault-choice-card {
        padding: 10px;
    }

    .vault-board-head,
    .vault-player-head,
    .vault-choice-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .vault-host-actions,
    .vault-control-row {
        justify-content: stretch;
    }

    .vault-host-actions > *,
    .vault-control-row > *,
    .vault-scanner-button {
        width: 100%;
        justify-content: center;
    }

    .vault-board-grid {
        grid-template-columns: repeat(var(--vault-board-columns, 5), minmax(70px, 1fr));
        gap: 5px;
    }

    .vault-category-cell {
        min-height: 42px;
        font-size: 0.68rem;
    }

    .vault-tile-button {
        min-height: 54px;
    }

    .vault-team-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .vault-team-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .vault-player-score,
    .vault-player-timer {
        min-height: 62px;
    }

    .vault-player-timer,
    .vault-feedback {
        text-align: left;
    }

    .vault-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Vault Breakers final tint: graphite with laser-lime security accents. */
#app.theme-vault-breakers,
.room-shell.has-lobby-vault-selection {
    --player-roster-card-bg: linear-gradient(180deg, rgba(25, 32, 25, 0.92), rgba(9, 14, 11, 0.98)), rgba(9, 14, 11, 0.98);
    --player-roster-card-border: rgba(177, 255, 90, 0.28);
    --player-roster-row-bg: linear-gradient(180deg, rgba(33, 47, 31, 0.86), rgba(13, 22, 15, 0.94));
    --player-roster-row-border: rgba(190, 255, 108, 0.18);
    --player-roster-action-bg: linear-gradient(180deg, rgba(63, 82, 45, 0.58), rgba(23, 34, 20, 0.84));
    --player-roster-action-hover-bg: linear-gradient(180deg, rgba(86, 112, 55, 0.72), rgba(28, 47, 24, 0.9));
    --player-roster-action-border: rgba(190, 255, 108, 0.22);
    --player-roster-action-hover-border: rgba(213, 255, 142, 0.38);
    --player-roster-action-color: #efffd9;
    --player-roster-action-dot-shadow: rgba(213, 255, 142, 0.86);
    --player-roster-action-menu-bg: rgba(10, 16, 11, 0.98);
    --player-roster-action-item-hover-bg: rgba(177, 255, 90, 0.12);
}

#app.theme-vault-breakers .card,
#app.theme-vault-breakers .room-code-card {
    background: linear-gradient(180deg, rgba(30, 39, 28, 0.84), rgba(8, 13, 10, 0.98)), rgba(8, 13, 10, 0.98);
    border-color: rgba(177, 255, 90, 0.28);
}

#app.theme-vault-breakers .secondary-button,
#app.theme-vault-breakers .ghost-button,
#app.theme-vault-breakers .mode-button,
#app.theme-vault-breakers .mode-chip-button {
    background: rgba(12, 20, 13, 0.96);
    border-color: rgba(190, 255, 108, 0.22);
    color: #f3ffe4;
}

#app.theme-vault-breakers .mode-button.selected,
#app.theme-vault-breakers .mode-chip-button {
    border-color: rgba(213, 255, 142, 0.48);
    box-shadow: inset 0 0 0 1px rgba(241, 255, 215, 0.12);
}

#app.theme-vault-breakers .viewer-badge,
#app.theme-vault-breakers .stat-chip,
#app.theme-vault-breakers .metric-pill,
#app.theme-vault-breakers .setup-meta {
    background: rgba(13, 22, 15, 0.96);
    border-color: rgba(190, 255, 108, 0.2);
}

#app.theme-vault-breakers .room-code-display {
    color: #f7ffe9;
    text-shadow:
        0 0 18px rgba(177, 255, 90, 0.18),
        0 10px 26px rgba(0, 0, 0, 0.28);
}

.qr-join-card.is-vault-selected,
.host-mode-card.is-vault-selected {
    border-color: rgba(177, 255, 90, 0.46);
    background: linear-gradient(180deg, rgba(31, 45, 26, 0.9), rgba(8, 15, 10, 0.97)), rgba(8, 15, 10, 0.97);
}

.qr-join-card.is-vault-selected .field input:focus {
    border-color: rgba(213, 255, 142, 0.6);
    box-shadow: 0 0 0 3px rgba(177, 255, 90, 0.16);
}

.host-mode-card.is-vault-selected::before {
    background: linear-gradient(135deg, rgba(177, 255, 90, 0.14), rgba(177, 255, 90, 0));
}

.host-mode-card.is-vault-selected .host-mode-summary-pill,
.host-mode-card.is-vault-selected .host-mode-focus-pill,
.host-mode-card.is-vault-selected .setup-meta {
    background: rgba(12, 24, 13, 0.9);
    border-color: rgba(190, 255, 108, 0.24);
    color: #f3ffe4;
}

.vault-mode-button {
    border-color: rgba(190, 255, 108, 0.24);
    background: linear-gradient(180deg, rgba(36, 57, 30, 0.9), rgba(12, 22, 13, 0.97)), rgba(12, 22, 13, 0.97);
    color: #f3ffe4;
}

.vault-mode-button.selected {
    border-color: rgba(213, 255, 142, 0.58);
    box-shadow:
        inset 0 0 0 1px rgba(241, 255, 215, 0.1),
        0 18px 34px rgba(177, 255, 90, 0.1);
}

.vault-mode-button .relic-mode-kicker {
    color: rgba(237, 255, 219, 0.78);
}

.vault-mode-button.selected .relic-mode-kicker {
    color: #fbfff1;
}

.vault-mode-button .relic-mode-emblem {
    background: rgba(15, 31, 16, 0.78);
    border-color: rgba(190, 255, 108, 0.28);
    color: #c6ff6a;
}

.host-mode-inline-panel.is-vault .host-source-field {
    grid-template-columns: minmax(0, 1fr);
}

.host-source-editor.is-vault-grid,
.host-vault-preview,
.vault-board-card,
.vault-current-card,
.vault-score-card,
.vault-question-card,
.vault-choice-card {
    border-color: rgba(177, 255, 90, 0.2);
    background: linear-gradient(180deg, rgba(19, 29, 19, 0.86), rgba(7, 12, 8, 0.96)), rgba(7, 12, 8, 0.96);
}

.host-source-editor.is-vault-grid {
    min-height: 156px;
    max-height: min(28vh, 260px);
}

.host-source-editor.is-vault-grid .host-source-gutter-shell,
.host-source-editor.is-vault-grid textarea {
    max-height: min(28vh, 260px);
}

#app.theme-vault-breakers .page-shell.room-shell.is-active-layout {
    background: linear-gradient(180deg, rgba(18, 33, 17, 0.96), rgba(5, 9, 7, 0.98)), rgba(5, 9, 7, 0.98);
}

.host-source-editor.is-vault-grid:focus-within {
    border-color: rgba(213, 255, 142, 0.5);
    box-shadow: 0 0 0 3px rgba(177, 255, 90, 0.14);
}

.host-source-editor.is-vault-grid .host-source-gutter-shell {
    background: rgba(6, 12, 7, 0.5);
    border-right-color: rgba(190, 255, 108, 0.16);
}

.host-source-editor.is-vault-grid .host-source-gutter-row,
.host-vault-preview-category,
.vault-category-cell,
.vault-title-stack span,
.vault-player-score span,
.vault-player-timer span,
.vault-question-card span,
.vault-current-meta span,
.vault-score-head span,
.vault-choice-korean {
    color: #c6ff6a;
}

.host-source-editor.is-vault-grid .host-source-import-button,
.host-source-editor.is-vault-grid .host-source-translate-button,
.vault-scanner-button,
.vault-chooser-pill,
.vault-feedback,
.vault-team-row,
.vault-team-actions button {
    border-color: rgba(190, 255, 108, 0.22);
}

.host-vault-preview-category,
.host-vault-preview-cell,
.vault-category-cell {
    background: rgba(14, 28, 14, 0.92);
}

.vault-tile-button,
.vault-choice-button {
    border-color: rgba(177, 255, 90, 0.24);
    background: linear-gradient(180deg, rgba(35, 66, 31, 0.96), rgba(11, 28, 12, 0.98)), rgba(11, 28, 12, 0.98);
    color: #f8ffed;
}

.vault-tile-button:not(:disabled):hover,
.vault-tile-button:not(:disabled):focus-visible,
.vault-choice-button:not(:disabled):hover,
.vault-choice-button:not(:disabled):focus-visible {
    border-color: rgba(213, 255, 142, 0.62);
}

.vault-tile-button.is-current,
.vault-choice-button.is-selected {
    background: linear-gradient(180deg, rgba(81, 121, 51, 0.98), rgba(27, 65, 22, 0.98)), rgba(27, 65, 22, 0.98);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 10px 22px rgba(177, 255, 90, 0.1);
}

.vault-tile-button.is-cleared {
    background: rgba(9, 17, 10, 0.9);
}

.vault-scanner-button {
    background: rgba(12, 29, 13, 0.92);
}

.vault-view-root.is-scanning .vault-scanner-button {
    border-color: rgba(227, 255, 166, 0.62);
    background: rgba(37, 75, 28, 0.96);
}

/* Vault Breakers color direction: graphite with blacklight-magenta security accents. */
#app.theme-vault-breakers,
.room-shell.has-lobby-vault-selection {
    --player-roster-card-bg: linear-gradient(180deg, rgba(32, 25, 38, 0.92), rgba(12, 9, 16, 0.98)), rgba(12, 9, 16, 0.98);
    --player-roster-card-border: rgba(255, 111, 232, 0.28);
    --player-roster-row-bg: linear-gradient(180deg, rgba(43, 31, 52, 0.86), rgba(19, 14, 26, 0.94));
    --player-roster-row-border: rgba(255, 141, 239, 0.18);
    --player-roster-action-bg: linear-gradient(180deg, rgba(70, 46, 82, 0.58), rgba(32, 20, 42, 0.84));
    --player-roster-action-hover-bg: linear-gradient(180deg, rgba(94, 58, 112, 0.72), rgba(44, 27, 58, 0.9));
    --player-roster-action-border: rgba(255, 141, 239, 0.22);
    --player-roster-action-hover-border: rgba(255, 180, 247, 0.38);
    --player-roster-action-color: #fff0fd;
    --player-roster-action-dot-shadow: rgba(255, 180, 247, 0.86);
    --player-roster-action-menu-bg: rgba(12, 8, 17, 0.98);
    --player-roster-action-item-hover-bg: rgba(255, 111, 232, 0.12);
}

#app.theme-vault-breakers .page-shell.room-shell.is-active-layout {
    background: linear-gradient(180deg, rgba(26, 19, 34, 0.96), rgba(7, 5, 10, 0.98)), rgba(7, 5, 10, 0.98);
}

#app.theme-vault-breakers .card,
#app.theme-vault-breakers .room-code-card {
    background: linear-gradient(180deg, rgba(34, 25, 43, 0.84), rgba(10, 7, 14, 0.98)), rgba(10, 7, 14, 0.98);
    border-color: rgba(255, 111, 232, 0.28);
}

#app.theme-vault-breakers .secondary-button,
#app.theme-vault-breakers .ghost-button,
#app.theme-vault-breakers .mode-button,
#app.theme-vault-breakers .mode-chip-button {
    background: rgba(18, 12, 25, 0.96);
    border-color: rgba(255, 141, 239, 0.22);
    color: #fff2fd;
}

#app.theme-vault-breakers .primary-button,
.room-shell.has-lobby-vault-selection .primary-button,
.host-mode-card.is-vault-selected .primary-button {
    background: linear-gradient(180deg, rgba(255, 119, 235, 0.98), rgba(151, 54, 174, 0.98)), #b647c6;
    border-color: rgba(255, 207, 250, 0.58);
    color: #fffaff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 14px 28px rgba(255, 111, 232, 0.16);
}

#app.theme-vault-breakers .primary-button:disabled,
.room-shell.has-lobby-vault-selection .primary-button:disabled,
.host-mode-card.is-vault-selected .primary-button:disabled {
    background: linear-gradient(180deg, rgba(45, 37, 52, 0.92), rgba(22, 18, 29, 0.98)), rgba(22, 18, 29, 0.98);
    border-color: rgba(255, 141, 239, 0.16);
    color: rgba(255, 239, 253, 0.6);
    box-shadow: none;
}

#app.theme-vault-breakers .mode-button.selected,
#app.theme-vault-breakers .mode-chip-button {
    border-color: rgba(255, 180, 247, 0.48);
    box-shadow: inset 0 0 0 1px rgba(255, 230, 252, 0.12);
}

#app.theme-vault-breakers .viewer-badge,
#app.theme-vault-breakers .stat-chip,
#app.theme-vault-breakers .metric-pill,
#app.theme-vault-breakers .setup-meta {
    background: rgba(18, 13, 25, 0.96);
    border-color: rgba(255, 141, 239, 0.2);
}

#app.theme-vault-breakers .room-code-display {
    color: #fff7fe;
    text-shadow:
        0 0 18px rgba(255, 111, 232, 0.18),
        0 10px 26px rgba(0, 0, 0, 0.28);
}

.qr-join-card.is-vault-selected,
.host-mode-card.is-vault-selected {
    border-color: rgba(255, 111, 232, 0.46);
    background: linear-gradient(180deg, rgba(41, 28, 52, 0.9), rgba(12, 8, 17, 0.97)), rgba(12, 8, 17, 0.97);
}

.qr-join-card.is-vault-selected .field input:focus {
    border-color: rgba(255, 180, 247, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 111, 232, 0.16);
}

.host-mode-card.is-vault-selected::before {
    background: linear-gradient(135deg, rgba(255, 111, 232, 0.14), rgba(255, 111, 232, 0));
}

.host-mode-card.is-vault-selected .host-mode-summary-pill,
.host-mode-card.is-vault-selected .host-mode-focus-pill,
.host-mode-card.is-vault-selected .setup-meta {
    background: rgba(20, 13, 29, 0.9);
    border-color: rgba(255, 141, 239, 0.24);
    color: #fff2fd;
}

.vault-mode-button {
    border-color: rgba(255, 141, 239, 0.24);
    background:
        radial-gradient(circle at 92% 8%, rgba(255, 141, 239, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(44, 30, 58, 0.97), rgba(16, 10, 23, 0.99));
    color: #fff2fd;
}

.vault-mode-button::before {
    background: linear-gradient(180deg, #ff8def, rgba(255, 141, 239, 0.08));
}

.vault-mode-button.selected {
    border-color: rgba(255, 180, 247, 0.58);
    box-shadow:
        inset 0 0 0 1px rgba(255, 230, 252, 0.1),
        0 18px 34px rgba(255, 111, 232, 0.1);
}

.vault-mode-button .relic-mode-kicker {
    background: transparent;
    border-color: transparent;
    color: rgba(255, 235, 253, 0.82);
}

.vault-mode-button.selected .relic-mode-kicker {
    color: #fff9ff;
}

.vault-mode-button .relic-mode-emblem {
    border-radius: 15px;
    background: rgba(25, 15, 36, 0.72);
    border-color: rgba(255, 141, 239, 0.28);
    color: #ff83ec;
}

.host-source-editor.is-vault-grid,
.host-vault-preview,
.vault-board-card,
.vault-current-card,
.vault-score-card,
.vault-question-card,
.vault-choice-card {
    border-color: rgba(255, 111, 232, 0.2);
    background: linear-gradient(180deg, rgba(24, 18, 31, 0.88), rgba(8, 6, 12, 0.96)), rgba(8, 6, 12, 0.96);
}

.host-source-editor.is-vault-grid:focus-within {
    border-color: rgba(255, 180, 247, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 111, 232, 0.14);
}

.host-source-editor.is-vault-grid .host-source-gutter-shell {
    background: rgba(8, 6, 12, 0.54);
    border-right-color: rgba(255, 141, 239, 0.16);
}

.host-source-editor.is-vault-grid .host-source-gutter-row,
.host-vault-preview-category,
.vault-category-cell,
.vault-title-stack span,
.vault-player-score span,
.vault-player-timer span,
.vault-question-card span,
.vault-current-meta span,
.vault-score-head span,
.vault-choice-korean {
    color: #ff83ec;
}

.host-source-editor.is-vault-grid .host-source-import-button,
.host-source-editor.is-vault-grid .host-source-translate-button,
.vault-scanner-button,
.vault-chooser-pill,
.vault-feedback,
.vault-team-row,
.vault-team-actions button {
    border-color: rgba(255, 141, 239, 0.22);
}

.host-vault-preview-category,
.host-vault-preview-cell,
.vault-category-cell {
    background: rgba(18, 12, 25, 0.92);
}

.vault-tile-button,
.vault-choice-button {
    border-color: rgba(255, 111, 232, 0.24);
    background: linear-gradient(180deg, rgba(55, 34, 69, 0.96), rgba(22, 12, 32, 0.98)), rgba(22, 12, 32, 0.98);
    color: #fff7fe;
}

.vault-tile-button:not(:disabled):hover,
.vault-tile-button:not(:disabled):focus-visible,
.vault-choice-button:not(:disabled):hover,
.vault-choice-button:not(:disabled):focus-visible {
    border-color: rgba(255, 180, 247, 0.62);
}

.vault-tile-button.is-current,
.vault-choice-button.is-selected {
    background: linear-gradient(180deg, rgba(105, 58, 127, 0.98), rgba(56, 24, 75, 0.98)), rgba(56, 24, 75, 0.98);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 10px 22px rgba(255, 111, 232, 0.1);
}

.vault-tile-button.is-cleared {
    background: rgba(13, 9, 17, 0.9);
}

.vault-scanner-button {
    background: rgba(21, 12, 31, 0.92);
}

.vault-player-score,
.vault-player-timer {
    border-color: rgba(255, 111, 232, 0.22);
    background: linear-gradient(180deg, rgba(26, 18, 36, 0.9), rgba(9, 7, 13, 0.96)), rgba(9, 7, 13, 0.96);
}

.vault-player-score span,
.vault-player-timer span {
    color: #ff83ec;
}

.vault-view-root.is-scanning .vault-scanner-button {
    border-color: rgba(255, 205, 250, 0.62);
    background: rgba(68, 31, 86, 0.96);
}

/* Subtle vault-metal finish over the purple theme. */
.host-mode-card.is-vault-selected,
.host-vault-preview,
.vault-board-card,
.vault-host-join-card,
.vault-current-card,
.vault-score-card,
.vault-question-card,
.vault-choice-card,
.vault-player-score,
.vault-player-timer {
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.42),
        0 18px 42px rgba(0, 0, 0, 0.28);
}

.host-mode-card.is-vault-selected::after,
.host-vault-preview::before,
.vault-board-card::before,
.vault-host-join-card::before,
.vault-current-card::before,
.vault-score-card::before,
.vault-question-card::before,
.vault-choice-card::before,
.vault-player-score::before,
.vault-player-timer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(118deg, transparent 0 18%, rgba(255, 255, 255, 0.055) 21%, transparent 25% 100%),
        repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 18px);
    opacity: 0.42;
}

.host-mode-card.is-vault-selected > *,
.host-vault-preview > *,
.vault-board-card > *,
.vault-host-join-card > *,
.vault-current-card > *,
.vault-score-card > *,
.vault-question-card > *,
.vault-choice-card > *,
.vault-player-score > *,
.vault-player-timer > * {
    position: relative;
    z-index: 1;
}

.host-vault-preview-grid,
.vault-board-grid,
.vault-choice-grid {
    position: relative;
    z-index: 1;
}

.host-vault-preview-category,
.host-vault-preview-cell,
.vault-category-cell,
.vault-tile-button,
.vault-choice-button,
.vault-scanner-button,
.vault-chooser-pill,
.vault-team-row,
.vault-team-actions button {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.42);
}

.vault-tile-button,
.vault-choice-button {
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 24% 100%),
        linear-gradient(180deg, rgba(59, 48, 66, 0.28), transparent 52%),
        linear-gradient(180deg, rgba(55, 34, 69, 0.96), rgba(22, 12, 32, 0.98)), rgba(22, 12, 32, 0.98);
}

.vault-tile-button.is-current,
.vault-choice-button.is-selected {
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.1), transparent 24% 100%),
        linear-gradient(180deg, rgba(112, 98, 124, 0.22), transparent 50%),
        linear-gradient(180deg, rgba(105, 58, 127, 0.98), rgba(56, 24, 75, 0.98)), rgba(56, 24, 75, 0.98);
}

.vault-tile-button.is-locked {
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.035), transparent 24% 100%),
        linear-gradient(180deg, rgba(32, 27, 38, 0.92), rgba(15, 11, 20, 0.98)), rgba(15, 11, 20, 0.98);
}

.vault-category-cell,
.host-vault-preview-category {
    background: linear-gradient(180deg, rgba(54, 49, 60, 0.34), rgba(14, 10, 19, 0.92)), rgba(18, 12, 25, 0.92);
}

.vault-player-head {
    display: grid;
    grid-template-columns: minmax(70px, 0.55fr) minmax(88px, 0.7fr) minmax(112px, 0.55fr);
    align-items: stretch;
}

.vault-player-vault {
    position: relative;
    min-height: 76px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 111, 232, 0.22);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(26, 18, 36, 0.9), rgba(9, 7, 13, 0.96)), rgba(9, 7, 13, 0.96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.42),
        0 18px 42px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.vault-player-vault::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(118deg, transparent 0 18%, rgba(255, 255, 255, 0.055) 21%, transparent 25% 100%),
        repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 18px);
    opacity: 0.42;
}

.vault-player-vault > * {
    position: relative;
    z-index: 1;
}

.vault-player-vault span {
    color: #ff83ec;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.vault-player-vault strong {
    color: #f6ffff;
    font-size: clamp(1.55rem, 4vw, 2.6rem);
    line-height: 1;
    font-weight: 950;
}

.vault-board-head-compact {
    justify-content: flex-end;
    min-height: 36px;
}

.vault-board-card.vault-stage-card {
    gap: 8px;
}

.vault-board-head-compact .vault-host-actions {
    flex: 1 1 auto;
    width: 100%;
}

.vault-board-head-compact .vault-chooser-pill {
    max-width: min(100%, 440px);
    margin-left: auto;
}

.vault-massive-loot-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid rgba(120, 255, 214, 0.62);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(120, 255, 214, 0.28), rgba(255, 131, 236, 0.2)), rgba(14, 23, 28, 0.82);
    color: #dfffee;
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 18px rgba(120, 255, 214, 0.2);
}

.vault-current-card .vault-massive-loot-badge {
    margin-bottom: 8px;
}

.vault-tile-button .vault-massive-loot-badge {
    position: absolute;
    right: 6px;
    bottom: 6px;
    min-height: 18px;
    padding: 2px 6px;
    font-size: 0.58rem;
}

.vault-player-vault .vault-massive-loot-badge {
    margin-top: 4px;
    justify-self: center;
}

.vault-massive-loot-reveal {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: clamp(128px, 20vh, 188px);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(255, 229, 151, 0.46);
    border-radius: 8px;
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.14), transparent 22% 100%),
        linear-gradient(135deg, rgba(120, 255, 214, 0.2), rgba(255, 131, 236, 0.18)),
        linear-gradient(180deg, rgba(41, 31, 19, 0.96), rgba(12, 9, 8, 0.98)), #120d08;
    color: #fff7d4;
    text-align: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 36px rgba(255, 217, 112, 0.14);
    animation: vaultMassiveLootReveal 420ms cubic-bezier(0.18, 0.84, 0.24, 1) both;
}

.vault-massive-loot-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.vault-massive-loot-particle {
    position: absolute;
    left: var(--vault-loot-x, 50%);
    top: var(--vault-loot-y, 50%);
    width: var(--vault-loot-size, 7px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 34% 28%,
            rgba(255, 255, 255, 0.82),
            rgba(255, 240, 168, 0.72) 32%,
            rgba(120, 255, 214, 0.34) 62%,
            transparent 72%
        ),
        #fff0a8;
    box-shadow:
        0 0 9px rgba(255, 240, 168, 0.24),
        0 0 18px rgba(120, 255, 214, 0.16);
    animation: vaultMassiveLootParticle 1560ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
    animation-delay: var(--vault-loot-delay, 0ms);
}

.vault-massive-loot-reveal > span,
.vault-massive-loot-reveal > strong {
    position: relative;
    z-index: 1;
}

.vault-massive-loot-reveal span {
    color: #fff0a8;
    font-size: clamp(1.35rem, 3.2vw, 2.25rem);
    font-weight: 950;
    line-height: 0.95;
    text-transform: uppercase;
}

.vault-massive-loot-reveal strong {
    color: #9fffe5;
    font-size: clamp(3.2rem, 9vw, 6rem);
    font-weight: 950;
    line-height: 0.85;
    text-shadow:
        0 4px 0 rgba(35, 19, 6, 0.38),
        0 0 30px rgba(120, 255, 214, 0.28);
}

@keyframes vaultMassiveLootReveal {
    from {
        opacity: 1;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes vaultMassiveLootParticle {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.45) rotate(0deg);
    }
    18% {
        opacity: 0.72;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--vault-loot-drift, 28px)), -64px) scale(1.06) rotate(160deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vault-massive-loot-particle {
        animation: none;
        opacity: 0.38;
        transform: translate(-50%, -50%);
    }
}

.vault-player-main {
    grid-template-rows: minmax(0, 1fr);
}

@media (max-width: 720px) {
    .vault-player-head {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }

    .vault-player-vault {
        min-height: 62px;
    }
}

/* Vault Breakers player polish: darker amethyst metal, bigger scanner, chunkier answer pads. */
#app.theme-vault-breakers,
.room-shell.has-lobby-vault-selection {
    --vault-accent: #b877ff;
    --vault-accent-soft: rgba(184, 119, 255, 0.28);
    --vault-accent-bright: #d8c3ff;
    --vault-lock-accent: #72ffd8;
    --vault-lock-soft: rgba(114, 255, 216, 0.18);
    --vault-metal-dark: #0b0910;
    --vault-metal-panel: #17131d;
    --vault-metal-rail: #2c2932;
    --lobby-mode-label-color: #d8c3ff;
    --lobby-panel-top: rgba(30, 24, 39, 0.95);
    --lobby-panel-bottom: rgba(10, 8, 14, 0.97);
    --lobby-panel-border: rgba(184, 119, 255, 0.22);
    --lobby-panel-shadow: rgba(116, 77, 158, 0.13);
    --lobby-panel-glow: rgba(184, 119, 255, 0.13);
    --lobby-panel-orb: rgba(184, 119, 255, 0.12);
    --lobby-panel-outline: rgba(122, 101, 148, 0.58);
    --lobby-stage-top: rgba(20, 17, 26, 0.94);
    --lobby-stage-bottom: rgba(8, 7, 11, 0.97);
    --lobby-stage-border: rgba(184, 119, 255, 0.16);
    --lobby-stage-radial: rgba(184, 119, 255, 0.07);
    --lobby-world-top: rgba(23, 20, 29, 0.95);
    --lobby-world-bottom: rgba(9, 8, 13, 0.98);
    --lobby-world-glow: rgba(184, 119, 255, 0.08);
    --lobby-world-spark: rgba(232, 222, 255, 0.1);
    --lobby-chip-bg: rgba(16, 12, 22, 0.84);
    --lobby-chip-border: rgba(184, 119, 255, 0.16);
}

#app.theme-vault-breakers .page-shell.room-shell,
.page-shell.room-shell.has-lobby-vault-selection {
    background:
        radial-gradient(circle at 16% 0%, rgba(72, 47, 102, 0.28), transparent 28%),
        linear-gradient(180deg, rgba(17, 14, 23, 0.98), rgba(5, 5, 8, 0.99)), #07060a;
}

#app.theme-vault-breakers .primary-button,
.room-shell.has-lobby-vault-selection .primary-button,
.host-mode-card.is-vault-selected .primary-button {
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.13), transparent 23% 100%),
        linear-gradient(180deg, rgba(160, 110, 216, 0.98), rgba(92, 60, 132, 0.98)), #6c448e;
    border-color: rgba(216, 195, 255, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.38),
        0 14px 28px rgba(122, 79, 170, 0.16);
}

#app.theme-vault-breakers .card,
#app.theme-vault-breakers .room-code-card,
.qr-join-card.is-vault-selected,
.host-mode-card.is-vault-selected,
.host-source-editor.is-vault-grid,
.host-vault-preview,
.vault-board-card,
.vault-host-join-card,
.vault-current-card,
.vault-score-card,
.vault-question-card,
.vault-choice-card {
    border-color: rgba(184, 119, 255, 0.2);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.035), transparent 18% 100%),
        linear-gradient(180deg, rgba(25, 21, 31, 0.94), rgba(9, 7, 12, 0.98)), var(--vault-metal-dark);
}

.host-source-editor.is-vault-grid .host-source-gutter-row,
.host-vault-preview-category,
.vault-category-cell,
.vault-title-stack span,
.vault-player-score span,
.vault-player-vault span,
.vault-player-timer span,
.vault-question-card span,
.vault-current-meta span,
.vault-score-head span,
.vault-choice-korean {
    color: var(--vault-accent-bright);
}

.vault-tile-button,
.vault-choice-button {
    border-color: rgba(184, 119, 255, 0.22);
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.07), transparent 24% 100%),
        linear-gradient(180deg, rgba(56, 49, 66, 0.42), transparent 52%),
        linear-gradient(180deg, rgba(39, 31, 51, 0.98), rgba(15, 11, 22, 0.99)), var(--vault-metal-dark);
    color: #f8f5ff;
}

.vault-tile-button:not(:disabled):hover,
.vault-tile-button:not(:disabled):focus-visible,
.vault-choice-button:not(:disabled):hover,
.vault-choice-button:not(:disabled):focus-visible {
    border-color: rgba(216, 195, 255, 0.6);
}

.vault-tile-button.is-current,
.vault-choice-button.is-selected {
    border-color: rgba(218, 204, 255, 0.76);
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.12), transparent 24% 100%),
        linear-gradient(180deg, rgba(88, 78, 103, 0.45), transparent 52%),
        linear-gradient(180deg, rgba(84, 57, 119, 0.98), rgba(44, 29, 68, 0.99)), #2c1d44;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.38),
        0 10px 24px rgba(134, 91, 188, 0.18);
}

.vault-player-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(156px, 0.9fr);
    gap: 10px;
}

.vault-player-meter-stack {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vault-player-score,
.vault-player-vault,
.vault-player-timer {
    min-width: 0;
    min-height: 74px;
    border-color: rgba(184, 119, 255, 0.2);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.045), transparent 22% 100%),
        linear-gradient(180deg, rgba(29, 25, 36, 0.94), rgba(10, 8, 13, 0.98)), var(--vault-metal-dark);
}

.vault-player-score {
    justify-items: center;
    padding-inline: 18px;
    text-align: center;
}

.vault-player-score strong {
    font-size: 3rem;
}

.vault-player-vault,
.vault-player-timer {
    text-align: center;
}

.vault-player-vault strong,
.vault-player-timer strong {
    font-size: 2.25rem;
}

.vault-scanner-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.vault-scanner-panel.has-scanner {
    grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1fr);
}

.vault-scanner-button {
    position: relative;
    isolation: isolate;
    min-height: 70px;
    justify-content: center;
    display: grid;
    grid-template-columns: auto minmax(0, auto);
    grid-template-rows: auto;
    column-gap: 12px;
    row-gap: 2px;
    padding: 10px 16px;
    border-color: rgba(184, 119, 255, 0.26);
    background:
        radial-gradient(circle at 28% 48%, rgba(114, 255, 216, 0.18), transparent 34%),
        linear-gradient(116deg, rgba(255, 255, 255, 0.08), transparent 28% 100%),
        linear-gradient(180deg, rgba(38, 31, 49, 0.98), rgba(15, 11, 22, 0.99)), var(--vault-metal-dark);
    transition:
        transform 90ms cubic-bezier(0.2, 0.8, 0.24, 1),
        border-color 120ms ease,
        background 120ms ease,
        box-shadow 120ms ease;
}

.vault-scanner-button.is-awaiting-first-scan {
    color: #f2fffc;
    border-color: rgba(145, 247, 221, 0.94);
    background:
        linear-gradient(104deg, rgba(145, 247, 221, 0.28), rgba(87, 189, 232, 0.2) 50%, transparent 76%),
        radial-gradient(circle at 24% 48%, rgba(114, 255, 216, 0.42), transparent 38%),
        linear-gradient(180deg, rgba(23, 68, 71, 0.99), rgba(10, 27, 35, 0.99)), #0a1b23;
    animation: vaultScannerDiscoveryPulse var(--ziar-vault-scanner-discovery-pulse-ms, 1200ms) ease-in-out infinite;
}

.vault-scanner-button.is-awaiting-first-scan::after {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: -1;
    pointer-events: none;
    border: 2px solid rgba(145, 247, 221, 0.76);
    border-radius: inherit;
    animation: vaultScannerDiscoveryRing var(--ziar-vault-scanner-discovery-pulse-ms, 1200ms) ease-out infinite;
}

.vault-scanner-button.is-awaiting-first-scan strong {
    text-shadow: 0 0 16px rgba(183, 255, 238, 0.68);
}

.vault-scanner-button.is-awaiting-first-scan .vault-scanner-lens {
    color: #91f7dd;
    animation: vaultScannerDiscoveryLens var(--ziar-vault-scanner-discovery-pulse-ms, 1200ms) ease-in-out infinite;
}

.vault-scanner-button.is-awaiting-first-scan .vault-scanner-lens::before {
    opacity: 0.82;
    transform: scale(0.9);
}

.vault-scanner-button:active {
    transform: translateY(1px) scale(0.985);
}

@keyframes vaultScannerDiscoveryPulse {
    0%,
    100% {
        filter: brightness(1) saturate(1.05);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            inset 0 -2px 0 rgba(22, 90, 91, 0.36),
            0 0 16px rgba(114, 255, 216, 0.32),
            0 8px 18px rgba(0, 0, 0, 0.16);
    }
    50% {
        filter: brightness(1.2) saturate(1.2);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.24),
            inset 0 -2px 0 rgba(73, 199, 198, 0.44),
            0 0 34px rgba(114, 255, 216, 0.76),
            0 0 62px rgba(87, 189, 232, 0.34),
            0 8px 18px rgba(0, 0, 0, 0.16);
    }
}

@keyframes vaultScannerDiscoveryRing {
    from {
        opacity: 0.88;
        transform: scale(0.985);
    }
    to {
        opacity: 0;
        transform: scale(1.09);
    }
}

@keyframes vaultScannerDiscoveryLens {
    0%,
    100% {
        box-shadow:
            inset 0 0 0 6px rgba(145, 247, 221, 0.18),
            0 0 14px rgba(145, 247, 221, 0.34);
        transform: scale(0.92);
    }
    50% {
        box-shadow:
            inset 0 0 0 2px rgba(220, 255, 250, 0.38),
            0 0 28px rgba(145, 247, 221, 0.82);
        transform: scale(1.1);
    }
}

.vault-scanner-lens {
    grid-row: 1;
    position: relative;
    align-self: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border: 2px solid currentColor;
    border-radius: 999px;
    color: rgba(145, 247, 221, 0.76);
    box-shadow:
        inset 0 0 0 7px rgba(184, 119, 255, 0.14),
        0 0 18px rgba(184, 119, 255, 0.22);
    animation: vaultScannerReadyLens var(--ziar-vault-scanner-ready-pulse-ms, 2200ms) ease-in-out infinite;
}

.vault-scanner-lens::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(220, 255, 250, 0.95) 0 18%, rgba(145, 247, 221, 0.82) 48%, rgba(64, 230, 226, 0.36) 78%);
    opacity: 0.1;
    transform: scale(0.34);
    transform-origin: center;
    animation: vaultScannerReadyFill var(--ziar-vault-scanner-ready-pulse-ms, 2200ms) ease-in-out infinite;
}

.vault-scanner-lens::after {
    content: "";
    position: absolute;
    top: 2px;
    left: calc(50% - 2px);
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #bffcff;
    opacity: 0.46;
    box-shadow: 0 0 6px rgba(145, 247, 221, 0.68);
    transform-origin: 50% 12px;
    animation: vaultScannerLensTrace var(--ziar-vault-scanner-trace-loop-ms, 1800ms) linear infinite;
}

@keyframes vaultScannerReadyLens {
    0%,
    100% {
        box-shadow:
            inset 0 0 0 7px rgba(145, 247, 221, 0.08),
            0 0 8px rgba(145, 247, 221, 0.12);
    }
    50% {
        box-shadow:
            inset 0 0 0 6px rgba(145, 247, 221, 0.14),
            0 0 15px rgba(145, 247, 221, 0.24);
    }
}

@keyframes vaultScannerReadyFill {
    0%,
    100% {
        opacity: 0.16;
        transform: scale(0.38);
    }
    50% {
        opacity: 0.34;
        transform: scale(0.54);
    }
}

@keyframes vaultScannerLensTrace {
    to {
        transform: rotate(1turn);
    }
}

.vault-scanner-button strong,
.vault-scanner-button small {
    min-width: 0;
    line-height: 1;
    text-align: left;
}

.vault-scanner-button strong {
    font-size: clamp(0.95rem, 3.4vw, 1.12rem);
    font-weight: 950;
    line-height: 1.05;
    text-wrap: balance;
}

.vault-scanner-button small {
    color: rgba(235, 226, 255, 0.72);
    font-size: 0.82rem;
    font-weight: 850;
}

.vault-view-root.is-scanning .vault-scanner-button {
    border-color: rgba(151, 255, 224, 0.78);
    background:
        linear-gradient(100deg, rgba(151, 255, 224, 0.22), rgba(184, 119, 255, 0.2) 46%, transparent 72%),
        radial-gradient(circle at 24% 50%, rgba(114, 255, 216, 0.32), transparent 34%),
        linear-gradient(180deg, rgba(26, 75, 67, 0.98), rgba(13, 36, 39, 0.99)), #0d2427;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 24px rgba(114, 255, 216, 0.26);
}

.vault-view-root.is-scanning .vault-scanner-lens {
    color: #91f7dd;
    animation: vaultScannerLens 1350ms ease-in-out infinite;
}

.vault-view-root.is-scanning .vault-scanner-lens::before {
    animation: vaultScannerLensFill 1350ms ease-in-out infinite;
}

.vault-view-root.is-scanner-closing .vault-scanner-lens {
    animation: vaultScannerLensDismiss 260ms cubic-bezier(0.18, 0.84, 0.24, 1) both;
}

.vault-view-root.is-scanner-closing .vault-scanner-lens::before {
    animation: vaultScannerLensFillDismiss 260ms cubic-bezier(0.18, 0.84, 0.24, 1) both;
}

@keyframes vaultScannerLens {
    0%,
    100% {
        box-shadow:
            inset 0 0 0 7px rgba(145, 247, 221, 0.12),
            0 0 16px rgba(145, 247, 221, 0.18);
    }
    54% {
        box-shadow:
            inset 0 0 0 3px rgba(220, 255, 250, 0.28),
            0 0 30px rgba(145, 247, 221, 0.42);
    }
}

@keyframes vaultScannerLensFill {
    0%,
    100% {
        opacity: 0.2;
        transform: scale(0.38);
    }
    52% {
        opacity: 0.92;
        transform: scale(1);
    }
}

@keyframes vaultScannerLensDismiss {
    0% {
        box-shadow:
            inset 0 0 0 4px rgba(220, 255, 250, 0.24),
            0 0 28px rgba(145, 247, 221, 0.36);
        transform: scale(1);
    }
    100% {
        box-shadow:
            inset 0 0 0 8px rgba(184, 119, 255, 0.08),
            0 0 8px rgba(184, 119, 255, 0.12);
        transform: scale(0.86);
    }
}

@keyframes vaultScannerLensFillDismiss {
    from {
        opacity: 0.55;
        transform: scale(0.9);
    }
    to {
        opacity: 0.1;
        transform: scale(0.24);
    }
}

.vault-feedback {
    display: grid;
    align-content: center;
    min-height: 70px;
    text-align: left;
    border-color: rgba(184, 119, 255, 0.18);
    background: linear-gradient(180deg, rgba(24, 20, 30, 0.86), rgba(10, 8, 13, 0.94)), var(--vault-metal-dark);
    color: rgba(238, 232, 255, 0.78);
    font-size: 0.98rem;
}

.vault-feedback.has-award-breakdown {
    align-content: center;
    justify-items: start;
    gap: 7px;
    padding-block: 9px;
    border-color: rgba(143, 255, 207, 0.3);
    background:
        radial-gradient(circle at 12% 18%, rgba(121, 243, 186, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(22, 34, 31, 0.9), rgba(8, 14, 13, 0.96)), var(--vault-metal-dark);
    color: #ecfff7;
}

.vault-feedback.is-status {
    justify-items: start;
    font-weight: 950;
    letter-spacing: 0;
}

.vault-feedback.is-status.is-info {
    border-color: rgba(214, 191, 255, 0.24);
    color: rgba(244, 239, 255, 0.86);
}

.vault-feedback.is-status.is-wrong {
    border-color: rgba(255, 147, 135, 0.3);
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 174, 104, 0.1), transparent 34%),
        linear-gradient(180deg, rgba(38, 26, 25, 0.9), rgba(15, 10, 10, 0.96)), var(--vault-metal-dark);
    color: #ffe7dc;
}

.vault-feedback-main {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    color: #f3fff9;
    font-weight: 950;
    line-height: 1;
}

.vault-feedback-main strong {
    color: #b6ffd8;
    font-size: 1.2em;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.vault-feedback-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.vault-feedback-rank {
    width: max-content;
    max-width: 100%;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(229, 218, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(246, 241, 255, 0.86);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}

.vault-feedback.has-selected-code {
    justify-items: center;
    gap: 5px;
    padding-block: 9px;
    text-align: center;
    border-color: rgba(145, 247, 221, 0.28);
    background:
        radial-gradient(circle at 12% 18%, rgba(145, 247, 221, 0.12), transparent 35%),
        linear-gradient(180deg, rgba(20, 34, 32, 0.9), rgba(8, 14, 14, 0.96)), var(--vault-metal-dark);
    color: #eafff9;
}

.vault-selected-code-main {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
}

.vault-selected-code-word {
    min-width: 0;
    max-width: min(28ch, 100%);
    overflow: hidden;
    color: #fbf8ff;
    font-size: 1.02rem;
    font-weight: 950;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vault-selected-code-main strong {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(145, 247, 221, 0.36);
    background: rgba(145, 247, 221, 0.12);
    color: #9fffe5;
    font-size: 0.72rem;
    font-weight: 950;
    line-height: 1;
}

.vault-selected-code-korean {
    justify-self: center;
    color: rgba(218, 255, 247, 0.72);
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
    text-align: center;
}

.vault-failed-crack-banner {
    isolation: isolate;
    min-height: 58px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 128, 145, 0.42);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 128, 145, 0.24), transparent 50%),
        linear-gradient(180deg, rgba(80, 26, 38, 0.94), rgba(26, 9, 17, 0.98)), #1a0911;
    color: #ffe9ec;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 24px rgba(255, 82, 111, 0.18);
    animation: vaultFailedBannerPop 2000ms cubic-bezier(0.18, 0.84, 0.24, 1) both;
}

.vault-failed-crack-banner > span:last-child {
    position: relative;
    z-index: 1;
    font-size: clamp(1.35rem, 4vw, 2.35rem);
    font-weight: 950;
    line-height: 0.95;
    text-align: center;
    text-shadow:
        0 2px 0 rgba(44, 7, 15, 0.5),
        0 0 18px rgba(255, 128, 145, 0.28);
}

.vault-failed-crack-particle {
    position: absolute;
    left: var(--vault-fail-x);
    top: 50%;
    width: 6px;
    aspect-ratio: 1;
    border-radius: 999px;
    background: #ffd6da;
    opacity: 0;
    box-shadow: 0 0 10px rgba(255, 128, 145, 0.72);
    animation: vaultFailedParticle 1200ms cubic-bezier(0.16, 0.84, 0.28, 1) both;
    animation-delay: calc(var(--vault-fail-particle) * 38ms);
}

@keyframes vaultFailedBannerPop {
    0% {
        opacity: 1;
        transform: translateY(-6px) scale(0.96);
    }
    14% {
        opacity: 1;
        transform: translateY(0) scale(1.02);
    }
    24%,
    88% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0.92;
        transform: translateY(0) scale(1);
    }
}

@keyframes vaultFailedParticle {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }
    18% {
        opacity: 0.95;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--vault-fail-drift)), -34px) scale(1);
    }
}

.vault-score-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 27px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(229, 218, 255, 0.24);
    background: radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.16), transparent 38%), rgba(35, 29, 45, 0.78);
    color: #f6f1ff;
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.vault-score-chip.has-subaward {
    align-items: stretch;
    flex-direction: column;
    gap: 3px;
    padding-block: 5px;
}

.vault-score-chip-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.vault-score-chip-line.is-subaward {
    padding-top: 3px;
    border-top: 1px solid rgba(229, 218, 255, 0.18);
    color: rgba(246, 241, 255, 0.8);
    font-size: 0.78em;
}

.vault-score-chip-line.is-detail {
    color: rgba(238, 247, 255, 0.74);
    font-size: 0.76em;
    font-weight: 900;
    letter-spacing: 0;
}

.vault-score-chip strong {
    color: #f7f2ff;
    font-size: 1.08em;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.vault-score-chip.is-quick {
    border-color: rgba(143, 245, 255, 0.38);
    background: rgba(17, 56, 67, 0.8);
}

.vault-score-chip.is-quick strong {
    color: #9ff4ff;
}

.vault-score-chip.is-quick .vault-score-chip-line.is-subaward strong {
    color: #c7ffbf;
}

.vault-score-chip.is-quick .vault-score-chip-line.is-detail {
    color: rgba(207, 250, 255, 0.78);
}

.vault-score-chip.is-effort {
    border-color: rgba(222, 230, 242, 0.46);
    background: rgba(54, 63, 74, 0.78);
}

.vault-score-chip.is-signal strong {
    color: #ffe2a3;
}

.vault-score-chip.is-effort strong {
    color: #f1f5ff;
}

.vault-score-chip.is-signal {
    border-color: rgba(255, 205, 103, 0.44);
    background: rgba(76, 50, 16, 0.78);
}

.vault-score-chip.is-loot {
    border-color: rgba(120, 255, 214, 0.5);
    background: rgba(120, 255, 214, 0.1);
}

.vault-score-chip.is-loot strong {
    color: #9fffe5;
}

.vault-choice-grid {
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
    grid-auto-rows: minmax(66px, 1fr);
    gap: 9px;
    padding: 2px 2px max(10px, env(safe-area-inset-bottom, 0px)) 2px;
    scroll-padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
}

.vault-choice-grid.is-medium {
    grid-auto-rows: minmax(76px, 1fr);
}

.vault-choice-grid.is-focused {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-auto-rows: minmax(92px, 1fr);
}

.vault-choice-button {
    position: relative;
    overflow: hidden;
    align-content: center;
    justify-items: center;
    gap: 5px;
    min-height: 66px;
    padding: 10px 12px;
    text-align: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 90ms cubic-bezier(0.2, 0.8, 0.24, 1),
        border-color 120ms ease,
        background 120ms ease,
        opacity 120ms ease,
        box-shadow 120ms ease;
}

.vault-choice-button.has-locks {
    padding-top: 28px;
}

.vault-choice-button:not(:disabled):active {
    transform: translateY(1px) scale(0.982);
}

.vault-choice-button.is-selected {
    transform: translateY(-1px);
}

.vault-choice-button.has-locks:not(.is-selected) {
    border-color: rgba(114, 255, 216, 0.28);
}

.vault-choice-answer,
.vault-choice-korean {
    position: relative;
    z-index: 1;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
}

.vault-choice-answer {
    display: -webkit-box;
    max-width: 100%;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.08;
    font-size: 1.18rem;
}

.vault-choice-grid.is-medium .vault-choice-answer {
    font-size: 1.3rem;
}

.vault-choice-grid.is-focused .vault-choice-answer {
    font-size: 1.48rem;
}

.vault-choice-korean {
    font-size: 0.98rem;
    color: #d8c3ff;
}

.vault-choice-lock {
    position: absolute;
    top: 7px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    max-width: calc(100% - 16px);
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(114, 255, 216, 0.42);
    background: rgba(5, 20, 19, 0.72);
    color: var(--vault-lock-accent);
    font-size: 0.7rem;
    font-weight: 950;
    line-height: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 14px rgba(114, 255, 216, 0.16);
    animation: vaultLockBadgeSnap 260ms cubic-bezier(0.18, 0.84, 0.24, 1) both;
}

.vault-choice-lock.is-mine {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 58%), var(--vault-lock-accent);
    border-color: rgba(225, 255, 247, 0.82);
    color: #10221e;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 0 18px rgba(114, 255, 216, 0.34);
}

.vault-choice-lock.is-other {
    opacity: 0.82;
}

@keyframes vaultLockBadgeSnap {
    from {
        opacity: 1;
        transform: translateY(3px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.vault-award-pop {
    position: fixed;
    inset: auto 14px 18px 14px;
    z-index: 25;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.vault-award-card {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: min(360px, calc(100vw - 28px));
    padding: 14px 18px;
    border-radius: 8px;
    border: 1px solid rgba(229, 218, 255, 0.3);
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.12), transparent 24% 100%),
        linear-gradient(180deg, rgba(35, 29, 45, 0.96), rgba(13, 10, 18, 0.98)), #110d18;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.38),
        0 20px 42px rgba(0, 0, 0, 0.36),
        0 0 28px rgba(184, 119, 255, 0.16);
    animation: vaultAwardCard 2600ms cubic-bezier(0.18, 0.84, 0.24, 1) both;
    animation-delay: var(--vault-award-delay, 0ms);
}

.vault-award-card strong {
    color: #f7f2ff;
    font-size: 3.35rem;
    font-weight: 950;
    line-height: 0.9;
    text-shadow:
        0 3px 0 rgba(30, 18, 47, 0.42),
        0 0 26px rgba(184, 119, 255, 0.3);
}

.vault-award-card > span,
.vault-award-card em {
    color: #e7ddff;
    font-size: 0.95rem;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.vault-award-card em {
    color: #ffffff;
    text-transform: none;
}

.vault-award-parts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.vault-award-parts .vault-score-chip {
    min-height: 29px;
    font-size: clamp(0.78rem, 2.4vw, 0.92rem);
}

.vault-award-pop.is-effort .vault-award-card {
    border-color: rgba(222, 230, 242, 0.44);
    background:
        radial-gradient(circle at 50% 0%, rgba(222, 230, 242, 0.18), transparent 44%),
        linear-gradient(116deg, rgba(255, 255, 255, 0.12), transparent 24% 100%),
        linear-gradient(180deg, rgba(39, 47, 58, 0.97), rgba(14, 17, 23, 0.98)), #0e1117;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.38),
        0 20px 42px rgba(0, 0, 0, 0.36),
        0 0 28px rgba(218, 228, 242, 0.18);
}

.vault-award-pop.is-effort .vault-award-card strong {
    color: #edf3ff;
    text-shadow:
        0 3px 0 rgba(6, 10, 16, 0.42),
        0 0 22px rgba(218, 228, 242, 0.26);
}

.vault-award-pop.is-effort .vault-award-card > span {
    color: #dde7f5;
}

@keyframes vaultAwardCard {
    0% {
        opacity: 0;
        transform: translateY(22px) scale(0.88);
    }
    12% {
        opacity: 1;
        transform: translateY(0) scale(1.04);
    }
    20% {
        transform: scale(1);
    }
    78% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }
}

@media (max-width: 720px) {
    .vault-player-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .vault-player-meter-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vault-player-score,
    .vault-player-vault,
    .vault-player-timer {
        min-height: 62px;
    }

    .vault-player-score strong {
        font-size: 2.55rem;
    }

    .vault-player-vault strong,
    .vault-player-timer strong {
        font-size: 1.85rem;
    }

    .vault-scanner-panel,
    .vault-scanner-panel.has-scanner {
        grid-template-columns: minmax(0, 1fr);
    }

    .vault-scanner-button {
        min-height: 76px;
    }

    .vault-feedback {
        min-height: 46px;
        padding-block: 8px;
        text-align: center;
    }

    .vault-feedback.has-award-breakdown {
        justify-items: center;
        gap: 6px;
    }

    .vault-feedback-badges {
        justify-content: center;
    }

    .vault-score-chip {
        min-height: 25px;
        padding-inline: 8px;
        font-size: 0.72rem;
    }

    .vault-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(68px, 1fr);
    }

    .vault-choice-grid.is-medium {
        grid-auto-rows: minmax(78px, 1fr);
    }

    .vault-choice-grid.is-focused {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(96px, 1fr);
    }

    .vault-choice-button.has-locks {
        padding-top: 30px;
    }

    .vault-choice-lock {
        top: 6px;
        right: 6px;
        max-width: calc(100% - 12px);
        font-size: 0.66rem;
    }

    .vault-choice-answer {
        font-size: 1.12rem;
    }

    .vault-choice-grid.is-medium .vault-choice-answer {
        font-size: 1.24rem;
    }

    .vault-choice-grid.is-focused .vault-choice-answer {
        font-size: 1.38rem;
    }
}

.vault-category-cell {
    min-height: 58px;
    padding: 10px 9px;
    border-color: rgba(159, 255, 229, 0.42);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.12), transparent 24% 100%),
        linear-gradient(180deg, rgba(38, 63, 67, 0.52), rgba(12, 16, 22, 0.96)), #101019;
    color: #f7ffff;
    font-size: 0.96rem;
    line-height: 1.08;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(0, 0, 0, 0.38),
        0 8px 18px rgba(0, 0, 0, 0.24),
        0 0 18px rgba(159, 255, 229, 0.12);
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.6),
        0 0 16px rgba(159, 255, 229, 0.18);
}

.vault-current-result {
    display: grid;
    gap: 12px;
}

.vault-current-result .vault-question-text {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(229, 218, 255, 0.16);
}

.vault-answer-reveal {
    gap: 5px;
    padding: 16px;
    border-color: rgba(159, 255, 229, 0.52);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.13), transparent 24% 100%),
        linear-gradient(90deg, rgba(159, 255, 229, 0.16), transparent 58%),
        linear-gradient(180deg, rgba(20, 45, 42, 0.94), rgba(7, 13, 16, 0.98)), #070d10;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 26px rgba(159, 255, 229, 0.14);
}

.vault-answer-reveal strong {
    color: #f7ffff;
    font-size: 2.4rem;
    line-height: 0.95;
    font-weight: 950;
    overflow-wrap: anywhere;
    text-shadow: 0 0 20px rgba(159, 255, 229, 0.2);
}

.vault-answer-reveal span {
    color: #a9ffe7;
    font-size: 1.08rem;
    font-weight: 900;
}

.vault-player-meter-stack {
    grid-template-columns: minmax(88px, 0.72fr) minmax(148px, 1.28fr);
}

.vault-player-timer {
    min-height: 96px;
    border-color: rgba(159, 255, 229, 0.44);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.1), transparent 22% 100%),
        linear-gradient(90deg, rgba(159, 255, 229, 0.15), transparent 62%),
        linear-gradient(180deg, rgba(22, 44, 44, 0.96), rgba(7, 11, 15, 0.99)), #070b0f;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.42),
        0 0 30px rgba(159, 255, 229, 0.14);
}

.vault-player-timer span {
    color: #a9ffe7;
    font-size: 0.92rem;
}

.vault-player-timer strong {
    color: #f7ffff;
    font-size: 4.4rem;
    line-height: 0.82;
    font-variant-numeric: tabular-nums;
    text-shadow:
        0 3px 0 rgba(4, 8, 12, 0.48),
        0 0 28px rgba(159, 255, 229, 0.2);
}

@media (max-width: 720px) {
    .vault-category-cell {
        min-height: 46px;
        font-size: 0.78rem;
    }

    .vault-current-result {
        gap: 10px;
    }

    .vault-answer-reveal {
        padding: 14px;
    }

    .vault-answer-reveal strong {
        font-size: 2rem;
    }

    .vault-player-meter-stack {
        grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    }

    .vault-player-timer {
        min-height: 88px;
    }

    .vault-player-timer strong {
        font-size: 3.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vault-choice-button.is-selected,
    .vault-choice-lock,
    .vault-award-card,
    .vault-view-root.is-scanning .vault-scanner-lens {
        animation: none;
    }
}

/* Vault Breakers cohesion pass: amethyst metal, compact controls, readable answer pads. */
#app.theme-vault-breakers,
.room-shell.has-lobby-vault-selection,
.host-mode-card.is-vault-selected,
.host-source-editor.is-vault-grid {
    --vault-accent: #a987ff;
    --vault-accent-muted: rgba(169, 135, 255, 0.2);
    --vault-accent-bright: #ded2ff;
    --vault-lock-accent: #91f7dd;
    --vault-lock-soft: rgba(145, 247, 221, 0.16);
    --vault-metal-dark: #09070d;
    --vault-metal-mid: #17121f;
    --vault-metal-raised: #211a2c;
}

#app.theme-vault-breakers {
    background:
        radial-gradient(circle at 18% 0%, rgba(85, 60, 124, 0.22), transparent 28%),
        linear-gradient(180deg, rgba(15, 12, 21, 0.98), rgba(5, 5, 8, 0.99)), #07060a;
}

#app.theme-vault-breakers .page-shell.room-shell {
    background:
        radial-gradient(circle at 18% 0%, rgba(85, 60, 124, 0.22), transparent 28%),
        linear-gradient(180deg, rgba(15, 12, 21, 0.98), rgba(5, 5, 8, 0.99)), #07060a;
}

#app.theme-vault-breakers .primary-button,
.host-mode-card.is-vault-selected .primary-button {
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 24% 100%),
        linear-gradient(180deg, rgba(142, 104, 205, 0.98), rgba(76, 53, 116, 0.98)), #5d3f88;
    border-color: rgba(222, 210, 255, 0.46);
    color: #fbf8ff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(0, 0, 0, 0.38),
        0 12px 24px rgba(108, 76, 156, 0.14);
}

#app.theme-vault-breakers .primary-button:disabled,
.host-mode-card.is-vault-selected .primary-button:disabled {
    background: linear-gradient(180deg, rgba(31, 26, 39, 0.94), rgba(15, 12, 20, 0.98)), var(--vault-metal-dark);
    border-color: rgba(169, 135, 255, 0.16);
    color: rgba(235, 226, 255, 0.56);
    box-shadow: none;
}

.host-mode-card.is-vault-selected .host-start-button:not(:disabled) {
    background: linear-gradient(180deg, rgba(255, 229, 157, 0.98), rgba(209, 137, 39, 0.98)), #d58d31;
    border-color: rgba(255, 246, 204, 0.68);
    color: #211206;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -2px 0 rgba(88, 49, 12, 0.28),
        0 16px 30px rgba(255, 196, 78, 0.2);
}

.host-mode-card.is-vault-selected .host-start-button:not(:disabled):hover,
.host-mode-card.is-vault-selected .host-start-button:not(:disabled):focus-visible {
    border-color: rgba(255, 252, 226, 0.86);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -2px 0 rgba(88, 49, 12, 0.24),
        0 0 0 3px rgba(255, 218, 128, 0.18),
        0 18px 34px rgba(255, 196, 78, 0.24);
}

#app.theme-vault-breakers .secondary-button,
#app.theme-vault-breakers .ghost-button,
#app.theme-vault-breakers .mode-button,
#app.theme-vault-breakers .mode-chip-button {
    background: linear-gradient(180deg, rgba(25, 20, 34, 0.92), rgba(10, 8, 14, 0.98)), var(--vault-metal-dark);
    border-color: rgba(169, 135, 255, 0.2);
    color: #f4efff;
}

.host-source-editor.is-vault-grid,
.host-vault-preview,
.vault-board-card,
.vault-current-card,
.vault-score-card,
.vault-question-card,
.vault-choice-card,
.vault-player-score,
.vault-player-vault,
.vault-player-timer,
.vault-feedback {
    border-color: rgba(169, 135, 255, 0.2);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.035), transparent 18% 100%),
        linear-gradient(180deg, rgba(25, 20, 34, 0.94), rgba(9, 7, 12, 0.98)), var(--vault-metal-dark);
}

.vault-category-cell,
.host-vault-preview-category {
    min-height: 50px;
    border-color: rgba(169, 135, 255, 0.28);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.08), transparent 24% 100%),
        linear-gradient(180deg, rgba(41, 34, 54, 0.72), rgba(15, 11, 21, 0.96)), var(--vault-metal-mid);
    color: #f5f1ff;
    font-size: clamp(0.78rem, 0.9vw, 0.9rem);
    line-height: 1.1;
    text-shadow: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.36);
}

.host-source-editor.is-vault-grid .host-source-gutter-row,
.vault-title-stack span,
.vault-player-score span,
.vault-player-vault span,
.vault-player-timer span,
.vault-question-card span,
.vault-current-meta span,
.vault-score-head span,
.vault-choice-korean {
    color: var(--vault-accent-bright);
}

.host-source-editor.is-vault-grid {
    --host-source-gutter-width: clamp(122px, 20vw, 160px);
    --host-vault-source-divider: rgba(190, 171, 255, 0.58);
    --host-vault-source-divider-glow: rgba(190, 171, 255, 0.24);
    --host-vault-tool-button-size: 40px;
    --host-vault-tool-padding-block: 12px;
    --host-vault-tool-row-height: calc(
        var(--host-vault-tool-button-size) + var(--host-vault-tool-padding-block) + var(--host-vault-tool-padding-block) + 1px
    );
    grid-template-rows: var(--host-vault-tool-row-height) minmax(0, 1fr);
    min-height: clamp(320px, 55svh, 640px);
    max-height: 100%;
    height: 100%;
}

.host-mode-inline-panel.is-selected.is-vault {
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    overflow: hidden;
}

.host-mode-inline-panel.is-selected.is-vault .host-source-field {
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
    min-height: 0;
    height: 100%;
}

.host-source-editor.is-vault-grid .host-source-gutter-shell,
.host-source-editor.is-vault-grid textarea {
    min-height: 0;
    max-height: none;
    height: 100%;
}

.host-source-editor.is-vault-grid:not(.is-vault-table-mode) .host-source-gutter-shell {
    grid-column: 1;
    grid-row: 2;
}

.host-source-editor.is-vault-grid:not(.is-vault-table-mode) textarea {
    grid-column: 2;
    grid-row: 2;
}

.host-source-editor.is-vault-grid .host-source-import-menu {
    top: calc(var(--host-vault-tool-row-height) - 2px);
    right: auto;
    left: 12px;
}

.host-mode-inline-panel.is-vault .host-source-field > .host-source-editor.is-vault-grid {
    min-height: max(100%, clamp(320px, 55svh, 640px));
}

.host-source-editor.is-vault-grid textarea {
    position: relative;
    z-index: 2;
    padding-right: 24px;
    padding-bottom: 14px;
}

.host-source-editor.is-vault-grid .host-source-gutter-row {
    align-items: center;
}

.host-source-editor.is-vault-grid .host-source-gutter-row.is-vault-category {
    position: relative;
    gap: 0;
    padding: 0 6px 0 5px;
    color: #f5f1ff;
    font-size: 0.76rem;
    line-height: 1.02;
    white-space: normal;
    background: linear-gradient(90deg, rgba(190, 171, 255, 0.12), rgba(190, 171, 255, 0.02) 78%);
    box-shadow: inset 0 2px 0 var(--host-vault-source-divider);
}

.host-source-editor.is-vault-grid .host-source-gutter-row.is-vault-category::before {
    content: "";
    position: absolute;
    top: 1px;
    right: 2px;
    left: 2px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 82%);
    pointer-events: none;
}

.host-source-editor.is-vault-grid .host-source-gutter-row.is-vault-category .host-source-level-label {
    flex: 1 1 auto;
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
    white-space: nowrap;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(190, 171, 255, 0.22);
}

.host-source-editor.is-vault-grid .host-source-gutter-row.is-vault-category .host-source-level-count {
    order: -1;
    width: 19px;
    min-width: 19px;
    height: 19px;
    border-color: rgba(190, 171, 255, 0.24);
    background: rgba(15, 11, 22, 0.82);
    color: rgba(245, 241, 255, 0.76);
    font-size: 0.66rem;
    box-shadow: none;
}

.host-source-editor.is-vault-grid .host-source-gutter-row.is-vault-value {
    justify-content: flex-start;
    color: rgba(235, 226, 255, 0.74);
    font-size: 0.82rem;
}

.host-source-editor.is-vault-grid .host-source-gutter-row.is-vault-value .host-source-level-label {
    flex: 1 1 auto;
    text-align: left;
}

.host-source-editor.is-vault-grid .host-source-gutter-row.is-vault-value .host-source-level-count {
    width: auto;
    min-width: 38px;
    padding: 0 7px;
    border-color: rgba(255, 225, 148, 0.36);
    background: rgba(41, 28, 53, 0.9);
    color: #fff8d7;
}

.host-source-level-answer {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.host-source-editor.is-vault-grid .host-source-level-answer {
    flex: 1 1 auto;
    color: rgba(245, 241, 255, 0.78);
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1.2;
}

.host-vault-private-answer {
    filter: none;
    opacity: inherit;
}

.host-vault-preview-cell.has-answer {
    cursor: pointer;
    outline: none;
}

.host-vault-preview-cell.has-answer:focus-visible {
    box-shadow:
        inset 0 0 0 2px rgba(245, 241, 255, 0.72),
        0 0 0 1px rgba(169, 135, 255, 0.24);
}

.host-vault-preview-cell .host-vault-preview-answer {
    color: rgba(245, 241, 255, 0.72);
}

.host-vault-mini-board {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(var(--vault-mini-columns, 5), minmax(0, 1fr));
    gap: 2px;
    width: clamp(96px, 13vw, 136px);
    padding: 5px;
    border-radius: 8px;
    border: 1px solid rgba(190, 171, 255, 0.18);
    background: linear-gradient(180deg, rgba(24, 18, 31, 0.14), rgba(8, 6, 12, 0.22)), rgba(8, 6, 12, 0.16);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 20px rgba(0, 0, 0, 0.16);
    pointer-events: none;
}

.host-vault-mini-cell {
    display: block;
    aspect-ratio: 1.08;
    min-width: 0;
    min-height: 8px;
    border-radius: 2px;
    border: 1px solid rgba(169, 135, 255, 0.18);
    background: rgba(245, 241, 255, 0.035);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}

.host-vault-mini-cell.is-header {
    aspect-ratio: 2.15;
    min-height: 10px;
    border-radius: 3px 3px 2px 2px;
}

.host-vault-mini-cell.is-filled {
    border-color: rgba(169, 135, 255, 0.5);
    background: linear-gradient(180deg, rgba(191, 171, 255, 0.56), rgba(93, 65, 137, 0.62)), rgba(93, 65, 137, 0.58);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 12px rgba(169, 135, 255, 0.12);
}

.host-vault-mini-cell.is-header.is-filled {
    border-color: rgba(228, 233, 255, 0.66);
    background: linear-gradient(180deg, rgba(225, 231, 255, 0.52), rgba(112, 88, 170, 0.66)), rgba(112, 88, 170, 0.56);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(28, 20, 52, 0.34),
        0 0 14px rgba(190, 171, 255, 0.18);
}

.host-vault-mini-cell.is-active {
    border-color: rgba(255, 252, 214, 0.95);
    background: linear-gradient(180deg, rgba(255, 252, 214, 0.84), rgba(214, 176, 72, 0.88)), rgba(214, 176, 72, 0.88);
    box-shadow:
        0 0 0 2px rgba(255, 252, 214, 0.22),
        0 0 16px rgba(255, 223, 95, 0.32);
}

.host-vault-mini-cell.is-header.is-active {
    border-color: rgba(255, 252, 214, 0.98);
    background: linear-gradient(180deg, rgba(255, 252, 214, 0.9), rgba(221, 184, 77, 0.92)), rgba(221, 184, 77, 0.9);
    box-shadow:
        0 0 0 2px rgba(255, 252, 214, 0.24),
        0 0 18px rgba(255, 223, 95, 0.38);
}

.host-source-fog-overlay--vault {
    z-index: 5;
    inset: calc(var(--host-vault-tool-row-height) + 24px) 24px 24px;
}

.host-source-fog-overlay--vault::before {
    background:
        radial-gradient(ellipse at center, rgba(190, 171, 255, 0.12), transparent 62%),
        linear-gradient(180deg, rgba(12, 8, 18, 0.14), rgba(12, 8, 18, 0.04));
}

.host-vault-fog-panel {
    display: grid;
    grid-template-columns: repeat(var(--vault-fog-columns, 5), minmax(0, 1fr));
    grid-template-rows: minmax(24px, 0.58fr) repeat(var(--vault-fog-value-rows, 5), minmax(0, 1fr));
    gap: clamp(4px, 0.65vw, 8px);
    width: min(620px, 76%);
    aspect-ratio: 1.38;
    padding: clamp(8px, 1.1vw, 14px);
    border-radius: 14px;
    border: 1px solid rgba(190, 171, 255, 0.24);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 24% 100%),
        linear-gradient(180deg, rgba(41, 34, 54, 0.6), rgba(15, 11, 21, 0.78)), rgba(15, 11, 21, 0.66);
    box-shadow:
        0 24px 44px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.host-vault-fog-cell {
    display: block;
    min-width: 0;
    min-height: 18px;
    border-radius: 7px;
    border: 1px solid rgba(190, 171, 255, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 36% 100%),
        rgba(190, 171, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

.host-vault-fog-cell.is-header {
    min-height: 22px;
    border-color: rgba(228, 233, 255, 0.26);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 30% 100%),
        rgba(222, 210, 255, 0.16);
}

.host-vault-fog-cell.is-vault {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 38% 100%),
        linear-gradient(180deg, rgba(113, 84, 169, 0.24), rgba(59, 39, 95, 0.22)), rgba(88, 60, 132, 0.22);
}

@media (max-width: 720px) {
    .host-source-editor.is-vault-grid {
        --host-source-gutter-width: clamp(96px, 29vw, 118px);
    }

    .host-source-editor.is-vault-grid textarea {
        padding-right: 18px;
        padding-bottom: 18px;
    }

    .host-vault-mini-board {
        display: none;
        right: 8px;
        top: calc(var(--host-vault-tool-row-height) + 12px);
        bottom: auto;
        width: min(72px, 20vw);
        gap: 1px;
        padding: 3px;
        border-radius: 6px;
    }

    .host-vault-mini-cell {
        min-height: 4px;
        border-radius: 1.5px;
    }

    .host-source-fog-overlay--vault {
        inset: calc(var(--host-vault-tool-row-height) + 12px) 12px 16px;
        align-items: start;
        padding-top: 12px;
    }

    .host-vault-fog-panel {
        width: min(360px, 88%);
        gap: 3px;
        padding: 7px;
        border-radius: 10px;
    }

    .host-vault-fog-cell {
        min-height: 8px;
        border-radius: 4px;
    }
}

.host-vault-source-guides {
    position: absolute;
    top: var(--host-vault-tool-row-height);
    right: 0;
    bottom: 0;
    left: var(--host-source-gutter-width);
    z-index: 1;
    padding: 14px 24px 14px 16px;
    pointer-events: none;
    will-change: transform;
}

.host-vault-source-guide-row {
    position: relative;
    display: block;
    height: var(--host-source-row-height);
    min-height: var(--host-source-row-height);
}

.host-vault-source-guide-row.is-vault-category::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--host-vault-source-divider), rgba(190, 171, 255, 0.24) 68%, transparent 96%);
    box-shadow: 0 0 16px var(--host-vault-source-divider-glow);
}

.host-vault-source-guide-row.is-vault-category::after {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: var(--host-vault-source-divider);
}

.page-shell.room-shell.has-lobby-vault-selection {
    background: none;
}

/* Lobby overlays stay legible while allowing the moving waiting room to remain visible underneath. */
#app .room-shell.is-host-lobby .host-lobby-overlays > .host-mode-card,
#app .room-shell.is-host-lobby .host-lobby-side-rail > .host-presence-card,
#app .room-shell.is-host-lobby .host-lobby-side-rail > .host-qr-card {
    background:
        radial-gradient(circle at 18% 18%, var(--lobby-panel-glow), transparent 26%),
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--lobby-panel-top) var(--ziar-host-lobby-panel-surface-mix, 90%),
                transparent
            ),
            color-mix(
                in srgb,
                var(--lobby-panel-bottom) var(--ziar-host-lobby-panel-surface-mix, 90%),
                transparent
            )
        ),
        rgba(5, 17, 28, 0.08);
}

#app .room-shell.is-host-lobby .host-mode-inline-panel {
    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--lobby-panel-top) var(--ziar-host-lobby-inner-panel-surface-mix, 65%),
                transparent
            ),
            color-mix(
                in srgb,
                var(--lobby-panel-bottom) var(--ziar-host-lobby-inner-panel-surface-mix, 65%),
                transparent
            )
        ),
        rgba(5, 17, 28, 0.08);
}

#app .room-shell.is-host-lobby .host-mode-card:has(.host-source-editor.is-source-fogged) {
    transition:
        opacity 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

#app
    .room-shell.is-host-lobby
    .host-mode-card:has(.host-source-editor.is-source-fogged):not(:hover):not(:has(:focus-visible)) {
    opacity: var(--ziar-host-lobby-fogged-idle-opacity, 0.72);
}

.host-source-editor.is-vault-grid .host-source-gutter,
.host-source-editor.is-vault-grid textarea,
.host-source-editor.is-vault-grid .host-vault-source-guides,
.host-source-editor.is-vault-grid .host-vault-mini-board {
    transition:
        filter 160ms ease,
        opacity 160ms ease;
}

.host-source-editor.is-vault-grid.is-source-fogged .host-source-gutter,
.host-source-editor.is-vault-grid.is-source-fogged textarea,
.host-source-editor.is-vault-grid.is-source-fogged .host-vault-source-guides,
.host-source-editor.is-vault-grid.is-source-fogged .host-vault-mini-board {
    filter: blur(7px);
    opacity: 0.58;
    pointer-events: none;
    user-select: none;
}

@media (min-width: 981px) and (max-height: 760px) {
    .host-lobby-overlays,
    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-lobby-overlays {
        --host-lobby-side-rail-width: clamp(
            var(--ziar-host-lobby-short-side-rail-min-width, 607px),
            var(--ziar-host-lobby-short-side-rail-width, 42vw),
            var(--ziar-host-lobby-short-side-rail-max-width, 760px)
        );
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-lobby-shell {
        min-height: min(620px, calc(100vh - 128px));
        min-height: min(620px, calc(100svh - 128px));
    }

    .host-lobby-overlays,
    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-lobby-overlays {
        inset: 14px;
        gap: 14px;
        grid-template-columns: minmax(0, 1fr) var(--host-lobby-side-rail-width);
    }

    .host-lobby-side-rail,
    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-lobby-side-rail {
        grid-template-columns: minmax(230px, 0.95fr) minmax(292px, clamp(300px, 20vw, 338px));
        gap: 12px;
        align-items: start;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-mode-config-view {
        gap: 12px;
        font-size: 0.9rem;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-mode-config-head {
        gap: 10px;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-mode-config-actions {
        gap: 10px;
        flex-wrap: nowrap;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-mode-summary-pill {
        min-height: 40px;
        padding-inline: 12px;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-start-button {
        min-height: 46px;
        max-width: 180px;
        padding-inline: 18px;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-mode-inline-panel {
        gap: 12px;
        padding: 14px;
        border-radius: 20px;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-presence-card {
        max-height: 100%;
        padding: 12px;
        overflow: visible;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-presence-name-button {
        min-height: 40px;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-presence-roster,
    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) #lobby-participants {
        min-height: 0;
        overflow: visible;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open)
        .host-presence-card
        .participant-list.player-roster-density-roomy:not(.player-roster-single) {
        --player-roster-row-min: 48px;
        --player-roster-gap: 8px;
        --player-roster-row-padding-y: 7px;
        --player-roster-row-padding-x: 8px;
        --player-roster-action-size: 24px;
        --player-roster-badge-min-height: 20px;
        --player-roster-name-font-size: 0.82rem;
        --player-roster-badge-font-size: 0.58rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-presence-card .participant-list,
    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-presence-card .list-empty {
        max-height: min(42vh, 300px);
        max-height: min(42svh, 300px);
        overflow: auto;
        padding-right: 4px;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-qr-card {
        max-width: 338px;
        gap: 10px;
        padding: 16px;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-qr-card .room-qr-frame {
        max-width: 292px;
        padding: 12px;
        border-radius: 24px;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-config-open) .host-room-code-display {
        font-size: clamp(2.4rem, 3.8vw, 3.5rem);
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-vault-selected.is-config-open) .host-source-editor.is-vault-grid {
        --host-source-line-height: 1.36;
        --host-source-gutter-width: clamp(108px, 14vw, 136px);
        --host-vault-tool-button-size: 36px;
        --host-vault-tool-padding-block: 8px;
        min-height: 0;
        height: 100%;
        font-size: 0.88rem;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-vault-selected.is-config-open)
        .host-mode-inline-panel.is-vault
        .host-source-field
        > .host-source-editor.is-vault-grid {
        min-height: 0;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-vault-selected.is-config-open) .host-source-editor.is-vault-grid .host-source-gutter {
        padding: 12px 8px 12px 10px;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-vault-selected.is-config-open) .host-source-editor.is-vault-grid textarea {
        padding: 12px 18px 12px 14px;
        font-size: 0.88rem;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-vault-selected.is-config-open) .host-vault-source-guides {
        padding: 12px 18px 12px 14px;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-vault-selected.is-config-open) .host-vault-tool-rail {
        top: auto;
        right: auto;
        gap: 6px;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-vault-selected.is-config-open) .host-vault-tool-rail .host-source-import-button,
    .room-shell.is-host-lobby:has(.host-mode-card.is-vault-selected.is-config-open) .host-vault-tool-rail .host-vault-fog-button {
        width: var(--host-vault-tool-button-size);
        min-width: var(--host-vault-tool-button-size);
        height: var(--host-vault-tool-button-size);
        min-height: var(--host-vault-tool-button-size);
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-vault-selected.is-config-open) .host-vault-mini-board {
        right: 9px;
        bottom: 9px;
        width: clamp(78px, 9vw, 104px);
        gap: 1px;
        padding: 4px;
    }

    .room-shell.is-host-lobby:has(.host-mode-card.is-vault-selected.is-config-open)
        .host-source-editor.is-vault-grid.is-vault-table-mode
        .host-vault-tool-rail {
        top: auto;
        right: auto;
        gap: 6px;
    }
}

.vault-tile-button,
.vault-choice-button {
    border-color: rgba(169, 135, 255, 0.22);
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.065), transparent 24% 100%),
        linear-gradient(180deg, rgba(48, 40, 61, 0.48), transparent 52%),
        linear-gradient(180deg, rgba(33, 26, 44, 0.98), rgba(13, 10, 19, 0.99)), var(--vault-metal-dark);
    color: #fbf8ff;
}

.vault-tile-button:not(:disabled):hover,
.vault-tile-button:not(:disabled):focus-visible,
.vault-choice-button:not(:disabled):hover,
.vault-choice-button:not(:disabled):focus-visible {
    border-color: rgba(222, 210, 255, 0.58);
}

.vault-choice-button:not(:disabled):focus-visible {
    outline: 2px solid rgba(145, 247, 221, 0.52);
    outline-offset: 3px;
}

@media (hover: none), (pointer: coarse) {
    .vault-choice-button:not(.is-selected):not(:disabled):hover,
    .vault-choice-button:not(.is-selected):not(:disabled):focus-visible {
        transform: none;
        border-color: rgba(169, 135, 255, 0.22);
        outline: none;
    }
}

.vault-tile-button.is-current,
.vault-choice-button.is-selected {
    border-color: rgba(224, 213, 255, 0.72);
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.11), transparent 24% 100%),
        linear-gradient(180deg, rgba(86, 72, 104, 0.44), transparent 52%),
        linear-gradient(180deg, rgba(76, 54, 111, 0.98), rgba(41, 28, 65, 0.99)), #2b1d42;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.11),
        inset 0 -1px 0 rgba(0, 0, 0, 0.38),
        0 10px 22px rgba(119, 88, 170, 0.16);
}

.vault-player-timer {
    min-height: 74px;
    border-color: rgba(169, 135, 255, 0.24);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.05), transparent 22% 100%),
        linear-gradient(180deg, rgba(29, 24, 38, 0.94), rgba(9, 7, 12, 0.98)), var(--vault-metal-dark);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.38),
        0 18px 42px rgba(0, 0, 0, 0.24);
}

.vault-player-timer span {
    color: var(--vault-accent-bright);
    font-size: 0.78rem;
}

.vault-player-timer strong {
    color: #fbf8ff;
    font-size: 2.45rem;
    line-height: 0.95;
    text-shadow: none;
}

.vault-host-actions .secondary-button,
.vault-control-row .primary-button,
.vault-control-row .secondary-button {
    min-height: 42px;
    padding: 0 16px;
    font-size: 0.92rem;
    font-weight: 850;
}

.vault-host-actions .vault-icon-button {
    min-width: 54px;
}

.vault-chooser-pill {
    min-height: 34px;
    border-radius: 8px;
    border-color: rgba(145, 247, 221, 0.26);
    background: linear-gradient(180deg, rgba(13, 33, 34, 0.9), rgba(7, 17, 20, 0.96)), #071114;
    color: #e2fff8;
    font-size: 0.86rem;
}

.vault-massive-loot-badge {
    min-height: 18px;
    padding: 3px 8px;
    border-radius: 6px;
    border-color: rgba(145, 247, 221, 0.42);
    background: linear-gradient(180deg, rgba(145, 247, 221, 0.14), rgba(53, 37, 70, 0.18)), rgba(11, 18, 24, 0.86);
    color: #dffbf3;
    font-size: 0.68rem;
    line-height: 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 12px rgba(145, 247, 221, 0.12);
}

.vault-current-card .vault-massive-loot-badge {
    margin-bottom: 6px;
}

.vault-tile-button .vault-massive-loot-badge {
    right: 6px;
    bottom: 6px;
    max-width: calc(100% - 12px);
    min-height: 16px;
    padding: 1px 4px;
    font-size: 0.5rem;
    transform: scale(0.86);
    transform-origin: 100% 100%;
    white-space: nowrap;
}

.vault-value-multiplier {
    display: inline-grid;
    place-items: center;
    padding: 0.1em 0.24em 0.12em;
    border: 1px solid rgba(230, 235, 244, 0.5);
    border-radius: 0.18em;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(160, 170, 184, 0.14)), rgba(30, 34, 42, 0.62);
    color: #edf2f7;
    font-size: 0.46em;
    line-height: 0.9;
    vertical-align: 0.22em;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18),
        0 2px 10px rgba(226, 232, 240, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 0 16px rgba(226, 232, 240, 0.12);
}

.vault-tile-button:has(.vault-massive-loot-badge) > span:not(.vault-massive-loot-badge) {
    transform: translateY(-8px);
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button.is-diamond:not(.is-cleared) {
    --vault-door-line: rgba(201, 251, 255, 0.2);
    --vault-door-bolt-strong: rgba(215, 253, 255, 0.58);
    --vault-door-bolt-soft: rgba(174, 246, 255, 0.38);
    --vault-door-hardware: rgba(174, 246, 255, 0.5);
    border-color: rgba(174, 246, 255, 0.38);
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.1), transparent 22% 100%),
        radial-gradient(circle at 50% 18%, rgba(201, 251, 255, 0.14), transparent 42%),
        linear-gradient(180deg, rgba(20, 43, 64, 0.9), rgba(10, 15, 26, 0.98)), #0a0f1a;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 0 1px rgba(201, 251, 255, 0.05),
        0 0 14px rgba(130, 232, 255, 0.1);
}

.vault-stage-card:not(:has(.vault-preview-stage))
    .vault-tile-button:has(.vault-display-money.is-stash):not(.is-cleared):not(.is-diamond) {
    border-color: rgba(187, 249, 176, 0.34);
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.085), transparent 24% 100%),
        radial-gradient(circle at 50% 18%, rgba(179, 255, 162, 0.1), transparent 44%),
        linear-gradient(180deg, rgba(37, 53, 41, 0.76), rgba(13, 17, 18, 0.99)), var(--vault-metal-dark);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 0 rgba(151, 237, 139, 0.14),
        0 0 12px rgba(112, 222, 128, 0.08);
}

.vault-stage-card:not(:has(.vault-preview-stage))
    .vault-tile-button.is-diamond:has(.vault-display-money.is-stash):not(.is-cleared) {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -3px 0 rgba(151, 237, 139, 0.18),
        inset 0 0 0 1px rgba(201, 251, 255, 0.05),
        0 0 14px rgba(130, 232, 255, 0.1);
}

.vault-tile-button.is-cleared {
    opacity: 0.58;
    border-color: rgba(145, 247, 221, 0.16);
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.035), transparent 24% 100%),
        linear-gradient(180deg, rgba(24, 34, 37, 0.86), rgba(8, 11, 14, 0.96)), #080b0e;
}

.vault-tile-button.is-cleared .vault-tile-cleared-mark {
    width: clamp(22px, 2.3vw, 34px);
    height: clamp(4px, 0.44vw, 6px);
    display: block;
    border-radius: 999px;
    background: rgba(145, 247, 221, 0.48);
    box-shadow: 0 0 14px rgba(145, 247, 221, 0.16);
}

.vault-player-vault .vault-massive-loot-badge {
    max-width: 100%;
    margin-top: 3px;
    font-size: 0.64rem;
}

.vault-player-vault strong:has(.vault-value-multiplier),
.vault-player-vault strong:has(.vault-value-modifiers) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.12em;
}

.vault-scanner-panel.has-scanner {
    grid-template-columns: minmax(142px, 0.58fr) minmax(0, 1fr);
}

.vault-scanner-button {
    min-height: 58px;
    border-color: rgba(169, 135, 255, 0.24);
}

.vault-scanner-lens {
    width: 28px;
    height: 28px;
}

.vault-feedback {
    min-height: 58px;
    color: rgba(238, 232, 255, 0.78);
    font-size: 0.94rem;
}

.vault-feedback.has-award-breakdown {
    border-color: rgba(145, 247, 221, 0.28);
    background:
        radial-gradient(circle at 12% 18%, rgba(145, 247, 221, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(18, 32, 31, 0.88), rgba(8, 13, 15, 0.96)), #080d0f;
}

.vault-score-chip {
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 8px;
    border-color: rgba(222, 210, 255, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent), rgba(32, 26, 42, 0.78);
    color: #f6f1ff;
    font-size: 0.74rem;
}

.vault-score-chip.has-subaward {
    gap: 2px;
    padding-block: 5px;
}

.vault-score-chip.is-quick {
    border-color: rgba(145, 217, 247, 0.34);
    background: rgba(18, 47, 58, 0.72);
}

.vault-score-chip.is-loot {
    border-color: rgba(145, 247, 221, 0.42);
    background: rgba(18, 52, 46, 0.68);
}

.vault-score-chip.is-stash {
    border-color: rgba(187, 249, 176, 0.4);
    background: rgba(27, 54, 31, 0.72);
}

.vault-score-chip.is-effort {
    border-color: rgba(222, 230, 242, 0.38);
    background: rgba(50, 59, 70, 0.74);
}

.vault-score-chip.is-signal {
    border-color: rgba(255, 205, 103, 0.36);
    background: rgba(68, 45, 15, 0.72);
}

.vault-award-card .vault-score-chip strong,
.vault-award-pop.is-effort .vault-award-card .vault-score-chip strong {
    color: inherit;
    font-size: 1.08em;
    line-height: 1;
    text-shadow: none;
}

.vault-award-card {
    width: min(420px, calc(100vw - 28px));
    min-width: 0;
    padding: 13px 16px;
}

.vault-award-card > strong {
    font-size: 3rem;
}

.vault-award-parts {
    max-width: 100%;
    align-items: center;
}

.vault-award-parts.has-special-stack,
.vault-feedback-badges.has-special-stack {
    display: inline-grid;
    grid-template-columns: minmax(0, auto);
    justify-items: center;
    align-items: center;
    gap: 5px;
}

.vault-award-parts.has-special-stack .vault-score-chip,
.vault-feedback-badges.has-special-stack .vault-score-chip {
    width: max-content;
    max-width: 100%;
}

.vault-host-utility-strip {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(112px, 0.72fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.vault-host-utility-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.vault-host-controller-button,
.vault-host-utility-actions .active-host-end-button {
    min-height: 40px;
    padding-inline: 10px;
    border-radius: 8px;
    font-size: 0.76rem;
    line-height: 1.1;
}

.vault-host-controller-button.is-connected {
    border-color: rgba(159, 255, 229, 0.44);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(159, 255, 229, 0.16);
}

.vault-host-shell.has-selected-vault {
    grid-template-columns: minmax(0, 1fr) var(--vault-host-panel-width);
}

.vault-host-shell.has-selected-vault .vault-host-panel {
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
}

.vault-host-shell.has-selected-vault .vault-stage-card {
    min-height: 0;
    height: 100%;
}

.vault-host-shell.has-selected-vault .vault-score-card {
    min-height: 0;
}

.vault-stage-card {
    overflow: hidden;
}

.vault-stage-card:not(:has(.vault-preview-stage)) {
    min-height: 0;
    height: 100%;
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-board-grid {
    min-height: 0;
    height: 100%;
    grid-template-rows: minmax(78px, 0.68fr) repeat(var(--vault-board-rows, 5), minmax(86px, 1fr));
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell,
.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-cell,
.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button {
    height: 100%;
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell {
    min-height: 74px;
    padding: 12px 14px 16px;
    font-size: clamp(1.08rem, 1.42vw, 1.5rem);
    line-height: 1.02;
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-title {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button {
    min-height: 96px;
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button > .vault-tile-value {
    font-size: clamp(2rem, 4.4vw, 4.1rem);
}

.vault-tile-button.is-current,
.vault-choice-button.is-selected {
    transform: none;
}

.vault-tile-button:not(:disabled):active,
.vault-choice-button:not(:disabled):active,
.vault-tile-button.is-pressing:not(:disabled),
.vault-choice-button.is-pressing:not(:disabled) {
    transform: translateY(2px) scale(0.985);
    filter: brightness(0.9) saturate(0.92);
    box-shadow:
        inset 0 3px 7px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 3px 8px rgba(0, 0, 0, 0.18);
    transition-duration: 60ms;
}

.vault-choice-button.is-selected {
    animation: none;
    border-color: color-mix(in srgb, var(--vault-lock-accent) 58%, var(--vault-accent-bright) 42%);
    box-shadow:
        inset 0 0 0 1px rgba(145, 247, 221, 0.14),
        inset 0 -1px 0 rgba(0, 0, 0, 0.34),
        0 8px 16px rgba(95, 76, 136, 0.14);
}

.vault-preview-stage {
    --vault-preview-hot-r: 58;
    --vault-preview-hot-g: 31;
    --vault-preview-hot-b: 49;
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(12px, 2.2vh, 22px);
    padding: clamp(14px, 2.2vw, 28px);
    border-radius: 8px;
    border: 1px solid rgba(218, 204, 255, 0.28);
    background:
        radial-gradient(circle at 50% 6%, rgba(255, 215, 111, 0.12), transparent 36%),
        linear-gradient(
            180deg,
            rgba(var(--vault-preview-hot-r), var(--vault-preview-hot-g), var(--vault-preview-hot-b), 0.96),
            rgba(9, 7, 13, 0.99)
        ),
        var(--vault-metal-dark);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 90px rgba(255, 255, 255, 0.035),
        0 20px 46px rgba(0, 0, 0, 0.26);
}

.vault-preview-stage.is-crack-2 {
    --vault-preview-hot-r: 54;
    --vault-preview-hot-g: 38;
    --vault-preview-hot-b: 76;
}

.vault-preview-stage.is-resolving {
    --vault-preview-hot-r: 58;
    --vault-preview-hot-g: 42;
    --vault-preview-hot-b: 88;
}

.vault-preview-stage.is-crack-3 {
    --vault-preview-hot-r: 88;
    --vault-preview-hot-g: 46;
    --vault-preview-hot-b: 18;
}

.vault-preview-stage.is-success {
    --vault-preview-hot-r: 24;
    --vault-preview-hot-g: 75;
    --vault-preview-hot-b: 48;
    border-color: rgba(159, 255, 187, 0.42);
}

.vault-preview-stage.is-failed {
    --vault-preview-hot-r: 116;
    --vault-preview-hot-g: 22;
    --vault-preview-hot-b: 34;
    border-color: rgba(255, 111, 134, 0.44);
}

.vault-crack-timer-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: clamp(10px, 1.6vw, 18px);
}

.vault-crack-timer {
    display: grid;
    justify-items: center;
    gap: 0;
    min-width: 0;
}

.vault-crack-timer > span:not(.vault-timer-ring) {
    color: rgba(245, 241, 255, 0.76);
    font-size: clamp(0.7rem, 0.85vw, 0.86rem);
    font-weight: 900;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.vault-crack-timer.is-current > span:not(.vault-timer-ring),
.vault-crack-timer.is-done > span:not(.vault-timer-ring) {
    color: #f8f5ff;
}

.vault-crack-timer.is-failed > span:not(.vault-timer-ring) {
    color: #ffd0d8;
}

.vault-crack-timer .vault-timer-ring {
    --vault-timer-outline-color: color-mix(in srgb, var(--vault-ring-color) 36%, rgba(255, 255, 255, 0.1));
    --vault-timer-outline-width: 1.45px;
    width: clamp(54px, 5.6vw, 78px);
}

.vault-crack-timer .vault-timer-ring span {
    display: grid;
    place-items: center;
    width: auto;
    max-width: 100%;
    min-height: 1.15em;
    overflow: visible;
    color: #fbf8ff;
    font-size: clamp(1.28rem, 2vw, 1.9rem);
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
}

.vault-crack-timer.is-pending .vault-timer-ring {
    opacity: 0.58;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.vault-crack-timer.is-pending .vault-timer-ring span {
    font-size: clamp(1.05rem, 1.7vw, 1.55rem);
}

@property --vault-timer-fill {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

.vault-timer-ring {
    --vault-ring-color: #ffd76f;
    --vault-ring-bg: rgba(245, 241, 255, 0.12);
    --vault-timer-divider-color: transparent;
    --vault-timer-divider-width: 0deg;
    --vault-timer-outline-color: rgba(255, 255, 255, 0.09);
    --vault-timer-outline-width: 1px;
    --vault-timer-segments: 15;
    position: relative;
    isolation: isolate;
    width: clamp(68px, 7.5vw, 100px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(15, 10, 20, 0.96) 0 57%, transparent 58%),
        repeating-conic-gradient(
            from -90deg,
            var(--vault-timer-divider-color) 0 var(--vault-timer-divider-width),
            transparent var(--vault-timer-divider-width) calc(360deg / var(--vault-timer-segments))
        ),
        conic-gradient(from -90deg, var(--vault-ring-color) var(--vault-timer-fill, 0%), var(--vault-ring-bg) 0);
    color: #fbf8ff;
    box-shadow:
        inset 0 0 0 var(--vault-timer-outline-width) var(--vault-timer-outline-color),
        0 0 24px rgba(255, 215, 111, 0.12);
    transition: --vault-timer-fill 250ms linear;
}

.vault-timer-ring.has-ticks {
    --vault-timer-divider-color: rgba(0, 0, 0, 0.82);
    --vault-timer-divider-width: 1.15deg;
}

.vault-timer-ring::before,
.vault-timer-ring::after {
    content: "";
    position: absolute;
    inset: -7%;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
}

.vault-timer-ring::before {
    border: 2px solid color-mix(in srgb, var(--vault-ring-color) 68%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--vault-ring-color) 26%, transparent);
    will-change: opacity, transform;
}

.vault-timer-ring::after {
    background:
        radial-gradient(circle at 24% 18%, var(--vault-ring-color) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 20%, var(--vault-ring-color) 0 1.5px, transparent 3px),
        radial-gradient(circle at 78% 76%, var(--vault-ring-color) 0 2px, transparent 3px),
        radial-gradient(circle at 16% 72%, var(--vault-ring-color) 0 1.5px, transparent 3px);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--vault-ring-color) 58%, transparent));
    will-change: opacity, transform;
}

.vault-timer-ring span {
    position: relative;
    z-index: 1;
    font-size: clamp(1.6rem, 2.7vw, 2.6rem);
    font-weight: 950;
    line-height: 0.9;
    font-variant-numeric: tabular-nums;
}

.vault-timer-ring.cracking,
.vault-timer-ring.ready {
    --vault-ring-color: #ffd76f;
}

.vault-crack-timer.is-crack-1 .vault-timer-ring.paused,
.vault-crack-timer.is-crack-1 .vault-timer-ring.cracking,
.vault-crack-timer.is-crack-1 .vault-timer-ring.ready,
.vault-crack-timer.is-crack-1 .vault-timer-ring.idle {
    --vault-ring-color: #9fffe5;
}

.vault-crack-timer.is-crack-2 .vault-timer-ring.paused,
.vault-crack-timer.is-crack-2 .vault-timer-ring.cracking,
.vault-crack-timer.is-crack-2 .vault-timer-ring.ready,
.vault-crack-timer.is-crack-2 .vault-timer-ring.idle {
    --vault-ring-color: #ffd76f;
}

.vault-crack-timer.is-crack-3 .vault-timer-ring.paused,
.vault-crack-timer.is-crack-3 .vault-timer-ring.cracking,
.vault-crack-timer.is-crack-3 .vault-timer-ring.resolving,
.vault-crack-timer.is-crack-3 .vault-timer-ring.ready,
.vault-crack-timer.is-crack-3 .vault-timer-ring.idle {
    --vault-ring-color: #ff9f4a;
}

.vault-timer-ring.paused {
    --vault-ring-bg: rgba(245, 241, 255, 0.16);
    opacity: 0.66;
    box-shadow:
        inset 0 0 0 var(--vault-timer-outline-width) color-mix(in srgb, var(--vault-ring-color) 22%, transparent),
        0 0 18px color-mix(in srgb, var(--vault-ring-color) 10%, transparent);
}

.vault-timer-ring.paused span {
    color: rgba(251, 248, 255, 0.84);
}

.vault-timer-ring.cracking.is-second-pulse::before {
    animation: vaultTimerRingPulse 1000ms cubic-bezier(0.16, 0.84, 0.28, 1) infinite;
    animation-delay: var(--vault-timer-pulse-delay, 0ms);
}

.vault-crack-timer.is-current .vault-timer-ring.cracking.is-second-pulse::after,
.vault-player-timer .vault-timer-ring.cracking.is-second-pulse::after {
    animation: vaultTimerRingFlecks 1000ms ease-out infinite;
    animation-delay: var(--vault-timer-pulse-delay, 0ms);
}

.vault-timer-ring.cracking.is-second-pulse span {
    animation: vaultTimerNumberPulse 1000ms cubic-bezier(0.16, 0.84, 0.28, 1) infinite;
    animation-delay: var(--vault-timer-pulse-delay, 0ms);
}

.vault-timer-ring.resolving {
    --vault-ring-color: #ff9f4a;
    box-shadow:
        inset 0 0 0 var(--vault-timer-outline-width) var(--vault-timer-outline-color),
        0 0 32px rgba(255, 159, 74, 0.2);
}

.vault-timer-ring.failed {
    --vault-ring-color: #ff6f86;
    color: #ffdbe2;
    box-shadow:
        inset 0 0 0 var(--vault-timer-outline-width) var(--vault-timer-outline-color),
        0 0 32px rgba(255, 111, 134, 0.22);
}

.vault-timer-ring.success {
    --vault-ring-color: #9fffb4;
}

.vault-timer-ring.loot {
    --vault-ring-color: #9fffe5;
}

@keyframes vaultTimerRingPulse {
    0% {
        opacity: 0.92;
        transform: scale(0.9);
    }
    38% {
        opacity: 0.56;
    }
    94%,
    100% {
        opacity: 0;
        transform: scale(1.32);
    }
}

@keyframes vaultTimerRingFlecks {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0.94);
    }
    14% {
        opacity: 0.06;
    }
    30%,
    58% {
        opacity: 0.3;
    }
    78% {
        opacity: 0.08;
    }
    94%,
    100% {
        opacity: 0;
        transform: rotate(96deg) scale(1.08);
    }
}

@keyframes vaultTimerNumberPulse {
    0%,
    26%,
    100% {
        transform: scale(1);
    }
    11% {
        transform: scale(1.035);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vault-timer-ring.cracking.is-second-pulse::before,
    .vault-crack-timer.is-current .vault-timer-ring.cracking.is-second-pulse::after,
    .vault-player-timer .vault-timer-ring.cracking.is-second-pulse::after,
    .vault-timer-ring.cracking.is-second-pulse span {
        animation: none;
    }
}

.vault-preview-main {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    justify-items: center;
    gap: clamp(14px, 2.4vh, 24px);
    text-align: center;
}

.vault-preview-stage:not(.is-round-complete) .vault-preview-main {
    grid-template-rows: minmax(min-content, 1fr) auto;
    gap: clamp(22px, 3.2vh, 34px);
}

.vault-preview-content,
.vault-preview-main > .vault-massive-loot-reveal {
    align-self: center;
}

.vault-preview-main > .vault-massive-loot-reveal {
    width: min(82%, 720px);
    min-height: clamp(220px, 30vh, 280px);
    gap: clamp(12px, 2vh, 20px);
    padding: clamp(20px, 2.6vh, 28px) clamp(28px, 4vw, 48px);
}

.vault-preview-main > .vault-massive-loot-reveal span {
    font-size: clamp(2.5rem, 4.2vw, 4rem);
}

.vault-preview-main > .vault-massive-loot-reveal strong {
    font-size: clamp(6rem, 10vw, 9rem);
}

.vault-preview-content {
    width: 100%;
    min-height: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: clamp(14px, 2.4vh, 24px);
}

.vault-preview-value {
    display: grid;
    justify-items: center;
    gap: 6px;
    align-self: end;
}

.vault-preview-value span {
    color: var(--vault-accent-bright);
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.vault-preview-value strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.12em;
    color: #ffd76f;
    font-size: clamp(3rem, 7.2vw, 7rem);
    font-weight: 950;
    line-height: 0.82;
    text-shadow:
        0 5px 0 rgba(31, 19, 6, 0.46),
        0 0 34px rgba(255, 215, 111, 0.22);
}

.vault-preview-value strong:has(.vault-value-multiplier.is-massive-loot) {
    align-items: center;
    gap: 0.16em;
}

.vault-preview-value strong:has(.vault-value-modifiers) {
    flex-direction: column;
    align-items: center;
    gap: 0.08em;
}

.vault-preview-value strong:has(.vault-growing-stash-worth),
.vault-preview-value strong:has(.vault-diamond-worth) {
    color: #f3ffff;
    text-shadow:
        0 5px 0 rgba(6, 18, 35, 0.36),
        0 0 24px rgba(130, 232, 255, 0.22),
        0 0 12px rgba(255, 255, 255, 0.1);
}

.vault-value-modifiers {
    display: inline-grid;
    grid-auto-flow: row;
    justify-items: stretch;
    align-items: center;
    gap: 0.08em;
    line-height: 1;
}

.vault-preview-value .vault-value-modifiers {
    display: inline-flex;
    max-width: min(100%, 8.6em);
    flex-wrap: wrap;
    justify-content: center;
    justify-items: center;
    align-items: center;
    gap: 0.08em 0.12em;
    font: inherit;
    line-height: 1;
    text-transform: none;
}

.vault-preview-value .vault-value-modifiers .vault-value-multiplier.is-massive-loot {
    font-size: 0.35em;
}

.vault-value-modifiers .vault-growing-stash-worth,
.vault-value-modifiers .vault-diamond-worth {
    margin: 0;
}

.vault-preview-value .vault-value-multiplier.is-massive-loot {
    display: inline-grid;
    align-self: center;
    justify-items: center;
    gap: 0.03em;
    padding: 0.08em 0.18em 0.12em;
    border-color: rgba(120, 255, 214, 0.44);
    border-radius: 0.22em;
    background: linear-gradient(180deg, rgba(120, 255, 214, 0.2), rgba(255, 131, 236, 0.1)), rgba(10, 20, 25, 0.78);
    color: #9fffe5;
    font-size: 0.64em;
    line-height: 0.78;
    letter-spacing: 0;
    text-shadow:
        0 2px 0 rgba(18, 13, 8, 0.4),
        0 0 16px rgba(120, 255, 214, 0.18);
}

.vault-preview-value .vault-value-multiplier-main {
    display: block;
    color: inherit;
    font-size: 1em;
    line-height: 0.8;
}

.vault-preview-value .vault-value-multiplier-label {
    display: block;
    margin-top: 0.12em;
    padding-top: 0.1em;
    border-top: 1px solid rgba(255, 240, 168, 0.46);
    color: #fff0a8;
    font-size: 0.24em;
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: none;
}

.vault-preview-value .vault-value-multiplier.is-diamond {
    border-color: rgba(174, 246, 255, 0.46);
    background: linear-gradient(180deg, rgba(174, 246, 255, 0.2), rgba(130, 178, 255, 0.1)), rgba(7, 24, 38, 0.78);
    color: #c9fbff;
    text-shadow:
        0 2px 0 rgba(6, 18, 35, 0.36),
        0 0 16px rgba(130, 232, 255, 0.18);
}

.vault-preview-value .vault-value-multiplier.is-diamond .vault-value-multiplier-label {
    border-top-color: rgba(201, 251, 255, 0.44);
    color: #e9ffff;
}

.vault-growing-stash-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.06em;
    flex: 0 0 auto;
}

.vault-growing-stash-icons .vault-growing-stash-bills:not(:first-child) {
    margin-left: -0.42em;
}

.vault-growing-stash-icons .vault-growing-stash-bills:nth-child(2) {
    transform: translateY(-0.05em) rotate(3deg);
}

.vault-growing-stash-icons .vault-growing-stash-bills:nth-child(3) {
    transform: translateY(0.04em) rotate(-4deg);
}

.vault-growing-stash-bills {
    position: relative;
    display: inline-block;
    width: 1.08em;
    height: 0.78em;
    flex: 0 0 auto;
}

.vault-growing-stash-bills span {
    position: absolute;
    left: 0.04em;
    width: 0.9em;
    height: 0.42em;
    font-size: inherit;
    border: 1px solid rgba(226, 255, 211, 0.72);
    border-radius: 0.12em;
    background:
        linear-gradient(90deg, transparent 0 42%, rgba(255, 236, 145, 0.62) 42% 58%, transparent 58% 100%),
        radial-gradient(circle at 22% 50%, rgba(247, 255, 220, 0.82), transparent 18%),
        linear-gradient(180deg, rgba(184, 248, 172, 0.95), rgba(73, 177, 111, 0.92)), #62c97a;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.44),
        0 0 10px rgba(102, 220, 139, 0.18);
}

.vault-growing-stash-bills span:nth-child(1) {
    top: 0.26em;
    transform: rotate(-7deg);
}

.vault-growing-stash-bills span:nth-child(2) {
    top: 0.13em;
    left: 0.11em;
    transform: rotate(4deg);
}

.vault-growing-stash-bills span:nth-child(3) {
    top: 0;
    left: 0.19em;
    transform: rotate(-2deg);
}

.vault-growing-stash-worth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.24em;
    margin-left: 0.18em;
    padding: 0.15em 0.28em 0.16em;
    border: 1px solid rgba(187, 249, 176, 0.54);
    border-radius: 0.26em;
    background: linear-gradient(180deg, rgba(255, 247, 181, 0.2), rgba(121, 230, 145, 0.12)), rgba(12, 37, 24, 0.76);
    color: #d9ffd0;
    font-size: 0.36em;
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 0 12px rgba(102, 220, 139, 0.26);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 16px rgba(102, 220, 139, 0.14);
}

.vault-growing-stash-worth > span:not(.vault-growing-stash-icons) {
    color: inherit;
    font-size: inherit;
    line-height: 1;
}

.vault-growing-stash-worth.is-compact {
    margin: 3px 0 0;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 0.7rem;
}

.vault-growing-stash-worth.is-compact .vault-growing-stash-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.06em;
    flex: 0 0 auto;
}

.vault-growing-stash-icons .vault-growing-stash-bills:not(:first-child) {
    margin-left: -0.42em;
}

.vault-growing-stash-icons .vault-growing-stash-bills:nth-child(2) {
    transform: translateY(-0.05em) rotate(3deg);
}

.vault-growing-stash-icons .vault-growing-stash-bills:nth-child(3) {
    transform: translateY(0.04em) rotate(-4deg);
}

.vault-growing-stash-bills {
    width: 16px;
    height: 12px;
}

.vault-growing-stash-worth.is-compact > span:not(.vault-growing-stash-icons) {
    font-size: 0.7rem;
}

.vault-diamond-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex: 0 0 auto;
}

.vault-diamond-icons .vault-diamond-gem:not(:first-child) {
    margin-left: -0.32em;
}

.vault-diamond-icons .vault-diamond-gem:nth-child(2) {
    transform: rotate(45deg) translateY(-0.08em);
}

.vault-diamond-icons .vault-diamond-gem:nth-child(3) {
    transform: rotate(45deg) translateY(0.08em);
}

.vault-diamond-gem {
    display: inline-block;
    width: 0.86em;
    aspect-ratio: 1;
    transform: rotate(45deg);
    border: 1px solid rgba(232, 255, 255, 0.78);
    border-radius: 0.16em;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0 18%, transparent 19%),
        linear-gradient(315deg, rgba(135, 255, 246, 0.82), rgba(130, 178, 255, 0.68)), #bffcff;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.34),
        0 0 12px rgba(130, 232, 255, 0.34);
}

.vault-diamond-worth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.24em;
    margin-left: 0.18em;
    padding: 0.16em 0.28em;
    border: 1px solid rgba(174, 246, 255, 0.54);
    border-radius: 0.26em;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(120, 255, 232, 0.12)), rgba(8, 29, 38, 0.74);
    color: #c9fbff;
    font-size: 0.36em;
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 0 12px rgba(130, 232, 255, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 16px rgba(105, 213, 255, 0.16);
}

.vault-diamond-worth .vault-diamond-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex: 0 0 auto;
}

.vault-diamond-icons .vault-diamond-gem:not(:first-child) {
    margin-left: -0.32em;
}

.vault-diamond-icons .vault-diamond-gem:nth-child(2) {
    transform: rotate(45deg) translateY(-0.08em);
}

.vault-diamond-icons .vault-diamond-gem:nth-child(3) {
    transform: rotate(45deg) translateY(0.08em);
}

.vault-diamond-gem {
    width: 0.72em;
    flex: 0 0 auto;
}

.vault-diamond-worth > span:not(.vault-diamond-icons) {
    color: inherit;
    font-size: inherit;
    line-height: 1;
}

.vault-diamond-worth.is-compact {
    margin: 3px 0 0;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 0.7rem;
}

.vault-diamond-worth.is-compact .vault-diamond-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex: 0 0 auto;
}

.vault-diamond-icons .vault-diamond-gem:not(:first-child) {
    margin-left: -0.32em;
}

.vault-diamond-icons .vault-diamond-gem:nth-child(2) {
    transform: rotate(45deg) translateY(-0.08em);
}

.vault-diamond-icons .vault-diamond-gem:nth-child(3) {
    transform: rotate(45deg) translateY(0.08em);
}

.vault-diamond-gem {
    width: 13px;
}

.vault-diamond-worth.is-compact > span:not(.vault-diamond-icons) {
    font-size: 0.7rem;
}

.vault-display-money {
    display: inline-block;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-transform: none;
}

.vault-preview-value .vault-display-money,
.vault-player-vault .vault-display-money,
.vault-tile-value .vault-display-money {
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-transform: none;
}

.vault-display-money.is-diamond {
    color: transparent;
    background: linear-gradient(112deg, #ffffff 0 12%, #ddfbff 22%, #a8edf8 44%, #ffffff 52%, #c6e5ff 70%, #f7ffff 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 6px rgba(130, 232, 255, 0.12));
    animation: vaultDiamondMoneyGleam 4200ms ease-in-out infinite alternate;
}

.vault-category-cell.is-diamond-arriving,
.vault-tile-button.is-diamond-arriving:not(.is-cleared) {
    animation: vaultDiamondColumnFirstSheen 1700ms cubic-bezier(0.18, 0.84, 0.24, 1) var(--vault-diamond-column-gleam-delay, 0ms) both;
}

.vault-tile-button.is-diamond-arriving .vault-display-money.is-diamond {
    animation:
        vaultDiamondMoneyFirstSheen 1700ms cubic-bezier(0.18, 0.84, 0.24, 1) var(--vault-diamond-column-gleam-delay, 0ms) both,
        vaultDiamondMoneyGleam 4200ms ease-in-out calc(var(--vault-diamond-column-gleam-delay, 0ms) + 1700ms) infinite alternate;
}

.vault-preview-value .vault-display-money.is-stash,
.vault-player-vault .vault-display-money.is-stash {
    color: #e8ffdd;
    text-shadow:
        0 2px 0 rgba(11, 35, 17, 0.42),
        0 0 22px rgba(108, 226, 129, 0.28);
}

.vault-tile-button .vault-display-money.is-stash:not(.is-diamond) {
    color: #eaffdc;
    text-shadow:
        0 2px 0 rgba(11, 35, 17, 0.4),
        0 0 20px rgba(125, 229, 137, 0.26);
}

.vault-tile-button.is-diamond .vault-display-money.is-diamond {
    filter: drop-shadow(0 0 4px rgba(130, 232, 255, 0.14)) drop-shadow(0 2px 0 rgba(3, 14, 24, 0.4));
}

.vault-tile-value {
    display: inline-grid;
    place-items: center;
    gap: 2px;
    line-height: 1;
}

.vault-tile-value .vault-value-modifiers.is-compact {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 3px;
}

.vault-tile-value .vault-value-modifiers.is-compact .vault-growing-stash-worth,
.vault-tile-value .vault-value-modifiers.is-compact .vault-diamond-worth {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}

.vault-tile-value .vault-value-modifiers.is-compact.has-stash.has-diamond .vault-growing-stash-worth,
.vault-tile-value .vault-value-modifiers.is-compact.has-stash.has-diamond .vault-diamond-worth {
    padding-inline: 4px;
    font-size: 0.6rem;
}

.vault-tile-value .vault-value-modifiers.is-compact.has-stash.has-diamond .vault-growing-stash-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.06em;
    flex: 0 0 auto;
}

.vault-growing-stash-icons .vault-growing-stash-bills:not(:first-child) {
    margin-left: -0.42em;
}

.vault-growing-stash-icons .vault-growing-stash-bills:nth-child(2) {
    transform: translateY(-0.05em) rotate(3deg);
}

.vault-growing-stash-icons .vault-growing-stash-bills:nth-child(3) {
    transform: translateY(0.04em) rotate(-4deg);
}

.vault-growing-stash-bills {
    width: 13px;
    height: 10px;
}

.vault-tile-value .vault-value-modifiers.is-compact.has-stash.has-diamond .vault-diamond-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex: 0 0 auto;
}

.vault-diamond-icons .vault-diamond-gem:not(:first-child) {
    margin-left: -0.32em;
}

.vault-diamond-icons .vault-diamond-gem:nth-child(2) {
    transform: rotate(45deg) translateY(-0.08em);
}

.vault-diamond-icons .vault-diamond-gem:nth-child(3) {
    transform: rotate(45deg) translateY(0.08em);
}

.vault-diamond-gem {
    width: 11px;
}

.vault-preview-value .vault-growing-stash-worth,
.vault-preview-value .vault-diamond-worth {
    align-self: center;
    font-size: 0.3em;
    vertical-align: 0.18em;
}

.vault-player-vault .vault-growing-stash-worth,
.vault-player-vault .vault-diamond-worth {
    font-size: 0.64rem;
}

.vault-diamond-reveal,
.vault-growing-stash-reveal {
    min-height: clamp(136px, 22vh, 204px);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 20px;
    border: 1px solid rgba(174, 246, 255, 0.56);
    border-radius: 8px;
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.16), transparent 24% 100%),
        radial-gradient(circle at 50% 16%, rgba(194, 255, 255, 0.22), transparent 42%),
        linear-gradient(135deg, rgba(91, 226, 255, 0.22), rgba(159, 119, 255, 0.2)),
        linear-gradient(180deg, rgba(13, 41, 54, 0.96), rgba(7, 12, 22, 0.98)), #070c16;
    color: #e9ffff;
    text-align: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 42px rgba(108, 217, 255, 0.18);
    animation: vaultMassiveLootReveal 420ms cubic-bezier(0.18, 0.84, 0.24, 1) both;
}

.vault-diamond-reveal .vault-diamond-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex: 0 0 auto;
}

.vault-diamond-icons .vault-diamond-gem:not(:first-child) {
    margin-left: -0.32em;
}

.vault-diamond-icons .vault-diamond-gem:nth-child(2) {
    transform: rotate(45deg) translateY(-0.08em);
}

.vault-diamond-icons .vault-diamond-gem:nth-child(3) {
    transform: rotate(45deg) translateY(0.08em);
}

.vault-diamond-gem {
    width: clamp(36px, 7vw, 74px);
    border-radius: 0.2em;
}

.vault-diamond-reveal > span:not(.vault-diamond-gem),
.vault-growing-stash-reveal > span:not(.vault-growing-stash-icons):not(.vault-growing-stash-bills) {
    color: #c9fbff;
    font-size: clamp(1.28rem, 3vw, 2.1rem);
    font-weight: 950;
    line-height: 0.95;
    text-transform: uppercase;
}

.vault-diamond-reveal strong,
.vault-growing-stash-reveal strong {
    color: #ffffff;
    font-size: clamp(2.35rem, 6.5vw, 5.1rem);
    font-weight: 950;
    line-height: 0.86;
    text-shadow:
        0 4px 0 rgba(6, 18, 35, 0.42),
        0 0 32px rgba(130, 232, 255, 0.36);
}

.vault-growing-stash-reveal {
    border-color: rgba(187, 249, 176, 0.6);
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.14), transparent 24% 100%),
        radial-gradient(circle at 50% 16%, rgba(202, 255, 179, 0.24), transparent 42%),
        linear-gradient(135deg, rgba(97, 228, 126, 0.22), rgba(28, 111, 61, 0.3)),
        linear-gradient(180deg, rgba(19, 58, 32, 0.96), rgba(7, 17, 10, 0.98)), #07110a;
    color: #e8ffdd;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 42px rgba(108, 226, 129, 0.2);
}

.vault-growing-stash-reveal .vault-growing-stash-icons {
    margin-bottom: 2px;
}

.vault-growing-stash-reveal > span:not(.vault-growing-stash-icons):not(.vault-growing-stash-bills) {
    color: #c9ffba;
    font-size: clamp(1.38rem, 3.2vw, 2.35rem);
}

.vault-growing-stash-reveal strong {
    color: #f0ffe9;
    text-shadow:
        0 4px 0 rgba(11, 35, 17, 0.44),
        0 0 34px rgba(108, 226, 129, 0.38);
}

.vault-score-chip.is-diamond {
    border-color: rgba(174, 246, 255, 0.48);
    background: rgba(20, 55, 72, 0.72);
}

.vault-growing-stash-worth .vault-growing-stash-bills {
    width: 1.08em;
    height: 0.78em;
}

.vault-growing-stash-worth.is-compact .vault-growing-stash-bills {
    width: 14px;
    height: 10px;
}

.vault-tile-value .vault-value-modifiers.is-compact.has-stash.has-diamond .vault-growing-stash-bills {
    width: 12px;
    height: 9px;
}

.vault-diamond-worth .vault-diamond-gem {
    width: 0.72em;
}

.vault-diamond-worth.is-compact .vault-diamond-gem {
    width: 12px;
}

.vault-tile-value .vault-value-modifiers.is-compact.has-stash.has-diamond .vault-diamond-gem {
    width: 10px;
}

.vault-diamond-reveal .vault-diamond-gem {
    width: clamp(36px, 7vw, 74px);
}

.vault-growing-stash-reveal .vault-growing-stash-bills {
    width: clamp(42px, 8vw, 88px);
    font-size: clamp(42px, 8vw, 88px);
}

.vault-growing-stash-reveal .vault-growing-stash-bills {
    height: calc(clamp(42px, 8vw, 88px) * 0.72);
}

.vault-score-chip.is-diamond strong {
    color: #c9fbff;
}

.vault-score-chip.is-stash strong {
    color: #c9ffba;
}

@keyframes vaultDiamondMoneyGleam {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 100% 50%;
    }
}

@keyframes vaultDiamondColumnFirstSheen {
    0% {
        filter: brightness(1.18) saturate(1.08) drop-shadow(0 0 8px rgba(170, 246, 255, 0.34));
    }
    18% {
        filter: brightness(1.46) saturate(1.2) drop-shadow(0 0 20px rgba(192, 251, 255, 0.68));
    }
    48% {
        filter: brightness(1.16) saturate(1.08) drop-shadow(0 0 12px rgba(150, 234, 255, 0.28));
    }
    100% {
        filter: brightness(1) saturate(1) drop-shadow(0 0 0 transparent);
    }
}

@keyframes vaultDiamondMoneyFirstSheen {
    0% {
        background-position: 100% 50%;
        filter: brightness(1.28) drop-shadow(0 0 7px rgba(210, 253, 255, 0.4));
    }
    22% {
        background-position: 48% 50%;
        filter: brightness(1.72) drop-shadow(0 0 14px rgba(224, 255, 255, 0.82));
    }
    56% {
        background-position: 12% 50%;
        filter: brightness(1.16) drop-shadow(0 0 8px rgba(166, 239, 255, 0.32));
    }
    100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 6px rgba(130, 232, 255, 0.12));
    }
}

@media (prefers-reduced-motion: reduce) {
    .vault-display-money.is-diamond,
    .vault-category-cell.is-diamond-arriving,
    .vault-tile-button.is-diamond-arriving:not(.is-cleared),
    .vault-tile-button.is-diamond-arriving .vault-display-money.is-diamond {
        animation: none;
        filter: none;
    }

    .vault-display-money.is-diamond,
    .vault-tile-button.is-diamond-arriving .vault-display-money.is-diamond {
        background-position: 58% 50%;
    }
}

.vault-preview-question {
    max-width: min(18ch, 100%);
    padding-block: 0.05em 0.08em;
    color: #fbf8ff;
    font-size: clamp(3rem, min(6.4vw, 10vh), 6.6rem);
    line-height: 1.08;
    overflow-wrap: break-word;
    text-wrap: balance;
    word-break: normal;
}

.vault-preview-question.is-long-prompt {
    max-width: min(25ch, 100%);
    font-size: clamp(2.45rem, min(4.15vw, 8vh), 4.15rem);
    line-height: 1.08;
}

.vault-preview-question.is-extra-long-prompt {
    max-width: min(31ch, 100%);
    font-size: clamp(2.2rem, min(3.35vw, 7vh), 3.35rem);
    line-height: 1.08;
}

.vault-preview-answer {
    width: min(100%, 1040px);
    min-height: clamp(170px, 28vh, 300px);
    place-items: center;
    padding: clamp(18px, 3vw, 34px);
    border-color: rgba(159, 255, 187, 0.55);
    background:
        radial-gradient(circle at 50% 0%, rgba(190, 255, 159, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(22, 94, 56, 0.95), rgba(7, 38, 28, 0.98));
}

.vault-preview-answer > span {
    color: rgba(234, 255, 236, 0.8);
    font-size: clamp(0.86rem, 1.2vw, 1.1rem);
    font-weight: 900;
    text-transform: uppercase;
}

.vault-answer-copy {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: clamp(5px, 0.8vw, 10px);
}

.vault-preview-answer > strong,
.vault-preview-answer .vault-answer-term {
    color: #ffd76f;
    font-size: clamp(4.4rem, 10vw, 10rem);
    text-shadow:
        0 5px 0 rgba(25, 46, 16, 0.48),
        0 0 36px rgba(255, 215, 111, 0.26);
}

.vault-preview-answer > em,
.vault-preview-answer .vault-answer-korean {
    color: #eaffdc;
    font-size: clamp(1.4rem, 3vw, 3rem);
    font-style: normal;
    font-weight: 900;
}

.vault-preview-stage.is-round-complete .vault-preview-main {
    grid-template-rows: minmax(0, 1fr);
    gap: 10px;
}

.vault-preview-stage.is-round-complete .vault-preview-content {
    gap: clamp(16px, 2.4vh, 26px);
}

.vault-preview-stage.is-round-complete .vault-result-value {
    position: relative;
    align-self: center;
}

.vault-preview-stage.is-round-complete .vault-result-value strong {
    position: relative;
    font-size: clamp(2.6rem, min(4.4vw, 7vh), 4.8rem);
    padding-bottom: clamp(5px, 0.56vw, 8px);
}

.vault-preview-stage.is-round-complete .vault-result-value strong::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: clamp(1px, 0.12vw, 2px);
    width: min(62%, 3.75em);
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 246, 196, 0.42) 24%,
        rgba(255, 222, 126, 0.58) 48%,
        rgba(255, 196, 68, 0.3) 70%,
        transparent
    );
    filter: none;
    transform: translateX(-50%);
    animation: vaultResultValueGlow 2200ms ease-in-out infinite;
}

.vault-preview-stage.is-round-complete .vault-preview-question {
    max-width: min(30ch, 100%);
    font-size: clamp(1.9rem, min(3.8vw, 6.6vh), 4.5rem);
    line-height: 1.06;
}

.vault-preview-stage.is-round-complete .vault-preview-answer {
    min-height: clamp(140px, 22vh, 230px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(18px, 4vw, 64px);
    padding: clamp(14px, 2.3vw, 26px);
}

.vault-preview-stage.is-round-complete .vault-answer-copy {
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
    justify-items: stretch;
}

.vault-preview-stage.is-round-complete .vault-preview-answer .vault-answer-term {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
    text-wrap: balance;
    font-size: clamp(2.3rem, min(4.6vw, 7.2vh), 4.9rem);
    line-height: 1.04;
}

.vault-preview-stage.is-round-complete .vault-preview-answer .vault-answer-korean {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: clamp(1.1rem, min(1.8vw, 3vh), 2.2rem);
}

@media (min-width: 981px) and (max-height: 900px) {
    .vault-preview-stage.is-round-complete {
        gap: clamp(6px, 1vh, 10px);
        padding-block: clamp(10px, 1.7vh, 16px);
    }

    .vault-preview-stage.is-round-complete .vault-preview-content {
        gap: clamp(8px, 1.15vh, 12px);
    }

    .vault-preview-stage.is-round-complete .vault-crack-timer .vault-timer-ring {
        width: clamp(46px, 4.3vw, 62px);
    }

    .vault-preview-stage.is-round-complete .vault-crack-timer .vault-timer-ring span {
        font-size: clamp(1rem, 1.38vw, 1.34rem);
    }

    .vault-preview-stage.is-round-complete .vault-preview-question {
        max-width: min(36ch, 100%);
        font-size: clamp(1.55rem, 3.72vw, 3.72rem);
        line-height: 1.06;
    }

    .vault-preview-stage.is-round-complete .vault-preview-answer {
        min-height: clamp(108px, 16.5vh, 158px);
        gap: clamp(12px, 2.6vw, 38px);
        padding: clamp(9px, 1.45vw, 16px);
    }

    .vault-preview-stage.is-round-complete .vault-answer-copy {
        gap: 4px;
    }

    .vault-preview-stage.is-round-complete .vault-preview-answer .vault-answer-term {
        font-size: clamp(2.15rem, 4.55vw, 4.55rem);
        line-height: 1.08;
    }

    .vault-preview-stage.is-round-complete .vault-preview-answer .vault-answer-korean {
        font-size: clamp(1.14rem, 2.05vw, 1.85rem);
    }

    .vault-preview-stage.is-round-complete .vault-result-value strong {
        font-size: clamp(2.3rem, 4.15vw, 4.05rem);
    }
}

@keyframes vaultResultValueGlow {
    0%,
    100% {
        opacity: 0.36;
        transform: translateX(-50%) scaleX(0.92);
    }
    48% {
        opacity: 0.68;
        transform: translateX(-50%) scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vault-preview-stage.is-round-complete .vault-result-value strong::after {
        opacity: 0.64;
        animation: none;
    }
}

.vault-preview-control-dock {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(12px, 2vw, 22px);
    min-width: 0;
}

.vault-preview-control-dock.is-complete {
    justify-content: center;
}

.vault-preview-control-dock.is-complete .vault-control-row {
	width: 100%;
	justify-content: center;
}

.vault-control-row.is-bank-heisted {
	width: 100%;
	justify-content: center;
}

.vault-bank-heisted-callout {
	position: relative;
	width: min(680px, 100%);
	display: grid;
	justify-items: center;
	gap: 12px;
	padding: 22px 24px 24px;
	border: 1px solid rgba(255, 222, 126, 0.58);
	border-radius: 8px;
	background:
		linear-gradient(90deg, rgba(255, 222, 126, 0.12), transparent 16% 84%, rgba(145, 247, 221, 0.1)),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 16px),
		linear-gradient(180deg, rgba(35, 24, 18, 0.96), rgba(9, 10, 12, 0.98));
	color: #fff4c8;
	text-align: center;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		inset 0 -2px 0 rgba(255, 196, 78, 0.18),
		0 22px 54px rgba(0, 0, 0, 0.4),
		0 0 0 1px rgba(255, 222, 126, 0.12);
}

.vault-bank-heisted-callout.is-overlay {
	position: absolute;
	inset: 50% auto auto 50%;
	z-index: 6;
	width: min(720px, calc(100% - 32px));
	transform: translate(-50%, -50%);
	pointer-events: auto;
}

.vault-bank-heisted-callout strong {
	display: block;
	max-width: 14ch;
	padding-block: 2px 3px;
	color: #ffdf7a;
	font-size: 2.12rem;
	font-weight: 950;
	letter-spacing: 0;
	line-height: 1.08;
	text-wrap: balance;
	text-shadow:
		0 3px 0 rgba(46, 24, 8, 0.44),
		0 0 26px rgba(255, 215, 111, 0.22);
}

.vault-bank-heisted-mark {
	display: inline-grid;
	grid-template-columns: repeat(3, 24px);
	align-items: end;
	justify-content: center;
	gap: 5px;
	min-height: 28px;
}

.vault-bank-heisted-mark span {
	display: block;
	height: 18px;
	border: 1px solid rgba(255, 239, 180, 0.78);
	border-radius: 3px;
	background:
		linear-gradient(180deg, rgba(255, 250, 206, 0.88), rgba(245, 184, 62, 0.98)),
		#f5b83e;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 8px 18px rgba(255, 196, 78, 0.16);
}

.vault-bank-heisted-mark span:nth-child(2) {
	height: 24px;
	transform: translateY(-3px);
}

#app.theme-vault-breakers .vault-results-button {
	min-width: min(260px, 100%);
	min-height: 48px;
	border-color: rgba(159, 255, 229, 0.62);
	background: linear-gradient(180deg, rgba(164, 255, 231, 0.96), rgba(64, 185, 151, 0.98)), #40b997;
	color: #071716;
	font-size: 1rem;
	font-weight: 950;
	letter-spacing: 0;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.42),
		inset 0 -3px 0 rgba(9, 81, 67, 0.24),
		0 16px 32px rgba(64, 185, 151, 0.22);
}

#app.theme-vault-breakers .vault-results-button:not(:disabled):hover,
#app.theme-vault-breakers .vault-results-button:focus-visible {
	border-color: rgba(221, 255, 246, 0.9);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.46),
		inset 0 -3px 0 rgba(9, 81, 67, 0.18),
		0 0 0 3px rgba(145, 247, 221, 0.18),
		0 18px 36px rgba(64, 185, 151, 0.28);
}

.vault-next-vault-button {
	min-width: clamp(220px, 24vw, 360px);
	min-height: clamp(54px, 6vh, 70px);
    border-color: rgba(255, 246, 204, 0.74);
    background: linear-gradient(180deg, rgba(255, 232, 148, 0.98), rgba(209, 137, 39, 0.98)), #d58d31;
    color: #211206;
    font-size: clamp(1.02rem, 1.35vw, 1.35rem);
    font-weight: 950;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -3px 0 rgba(88, 49, 12, 0.28),
        0 18px 34px rgba(255, 196, 78, 0.24);
}

#app.theme-vault-breakers .vault-next-vault-button {
    border-color: rgba(255, 246, 204, 0.74);
    background: linear-gradient(180deg, rgba(255, 232, 148, 0.98), rgba(209, 137, 39, 0.98)), #d58d31;
    color: #211206;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -3px 0 rgba(88, 49, 12, 0.28),
        0 18px 34px rgba(255, 196, 78, 0.24);
}

.vault-next-vault-button:not(:disabled):hover,
.vault-next-vault-button:focus-visible {
    border-color: rgba(255, 252, 226, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.44),
        inset 0 -3px 0 rgba(88, 49, 12, 0.22),
        0 0 0 3px rgba(255, 218, 128, 0.18),
        0 20px 38px rgba(255, 196, 78, 0.28);
}

#app.theme-vault-breakers .vault-next-vault-button:not(:disabled):hover,
#app.theme-vault-breakers .vault-next-vault-button:focus-visible {
    border-color: rgba(255, 252, 226, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.44),
        inset 0 -3px 0 rgba(88, 49, 12, 0.22),
        0 0 0 3px rgba(255, 218, 128, 0.18),
        0 20px 38px rgba(255, 196, 78, 0.28);
}

.vault-preview-timer {
    display: inline-grid;
    grid-template-columns: auto minmax(0, auto);
    align-items: center;
    gap: 10px;
    justify-self: start;
    min-width: 0;
}

.vault-preview-timer .vault-timer-ring {
    width: clamp(76px, 8vw, 118px);
}

.vault-preview-timer > span {
    color: rgba(245, 241, 255, 0.82);
    font-size: clamp(0.8rem, 1vw, 0.96rem);
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.vault-preview-control-dock .vault-control-row {
    justify-content: flex-end;
}

.vault-player-timer {
    --vault-player-crack-color: #9fffe5;
    grid-template-columns: auto minmax(0, auto);
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: left;
}

.vault-player-timer.is-crack-1 {
    --vault-player-crack-color: #9fffe5;
}

.vault-player-timer.is-crack-2 {
    --vault-player-crack-color: #ffd76f;
}

.vault-player-timer.is-crack-3 {
    --vault-player-crack-color: #ff9f4a;
}

.vault-player-timer > .vault-player-crack-label {
    min-width: 34px;
    padding: 4px 7px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--vault-player-crack-color) 58%, transparent);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 62%),
        color-mix(in srgb, var(--vault-player-crack-color) 18%, rgba(10, 8, 13, 0.94));
    color: var(--vault-player-crack-color);
    font-size: 0.78rem;
    font-weight: 950;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0 0 16px color-mix(in srgb, var(--vault-player-crack-color) 18%, transparent);
}

.vault-player-timer .vault-timer-ring {
    width: clamp(62px, 7vw, 82px);
}

.vault-player-timer.is-crack-1 .vault-timer-ring.paused,
.vault-player-timer.is-crack-1 .vault-timer-ring.cracking,
.vault-player-timer.is-crack-1 .vault-timer-ring.ready {
    --vault-ring-color: #9fffe5;
}

.vault-player-timer.is-crack-2 .vault-timer-ring.paused,
.vault-player-timer.is-crack-2 .vault-timer-ring.cracking,
.vault-player-timer.is-crack-2 .vault-timer-ring.ready {
    --vault-ring-color: #ffd76f;
}

.vault-player-timer.is-crack-3 .vault-timer-ring.paused,
.vault-player-timer.is-crack-3 .vault-timer-ring.cracking,
.vault-player-timer.is-crack-3 .vault-timer-ring.resolving,
.vault-player-timer.is-crack-3 .vault-timer-ring.ready {
    --vault-ring-color: #ff9f4a;
}

.vault-player-timer .vault-timer-ring span {
    color: #fbf8ff;
    font-size: clamp(1.45rem, 3vw, 2.2rem);
    line-height: 0.9;
    text-transform: none;
}

.vault-choice-card {
    position: relative;
    align-self: stretch;
    height: 100%;
    gap: 10px;
    overflow: hidden;
}

.vault-choice-card > * {
    position: relative;
    z-index: 1;
}

.vault-choice-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(115deg, transparent 0 34%, rgba(145, 247, 221, 0.16) 45%, transparent 58% 100%),
        repeating-linear-gradient(180deg, rgba(145, 247, 221, 0.1) 0 1px, transparent 1px 12px), rgba(55, 255, 214, 0.05);
    background-size:
        280% 100%,
        auto,
        auto;
    background-position:
        -140% 0,
        0 0,
        0 0;
    mix-blend-mode: screen;
    transition: opacity 140ms ease;
}

.vault-view-root.is-scanning .vault-choice-card::after {
    opacity: 1;
    animation: vaultScannerTintSweep 2600ms cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

@keyframes vaultScannerTintSweep {
    0% {
        opacity: 0.62;
        background-position:
            -140% 0,
            0 0,
            0 0;
    }
    10% {
        opacity: 0.92;
    }
    64% {
        opacity: 0.9;
        background-position:
            126% 0,
            0 0,
            0 0;
    }
    100% {
        opacity: 0.62;
        background-position:
            210% 0,
            0 0,
            0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vault-scanner-button.is-awaiting-first-scan,
    .vault-scanner-button.is-awaiting-first-scan::after,
    .vault-scanner-lens,
    .vault-scanner-lens::before,
    .vault-scanner-lens::after,
    .vault-scanner-button.is-awaiting-first-scan .vault-scanner-lens,
    .vault-view-root.is-scanning .vault-choice-card::after,
    .vault-view-root.is-scanning .vault-scanner-lens,
    .vault-view-root.is-scanning .vault-scanner-lens::before {
        animation: none;
    }
}

.vault-choice-grid {
    align-content: start;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-auto-rows: minmax(clamp(84px, 10vh, 112px), 1fr);
    gap: 8px;
    overflow: auto;
}

.vault-choice-grid.is-medium {
    grid-auto-rows: minmax(clamp(90px, 11vh, 122px), 1fr);
}

.vault-choice-grid.is-focused {
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    grid-auto-rows: minmax(clamp(100px, 13vh, 140px), 1fr);
}

.vault-choice-button {
    min-height: clamp(84px, 10vh, 112px);
    padding: 10px 12px;
}

.vault-choice-button.has-locks {
    padding-top: 28px;
}

.vault-choice-answer {
    font-size: clamp(1.12rem, 1.4vw, 1.38rem);
    line-height: 1.08;
}

.vault-choice-grid.is-medium .vault-choice-answer {
    font-size: clamp(1.18rem, 1.55vw, 1.48rem);
}

.vault-choice-grid.is-focused .vault-choice-answer {
    font-size: clamp(1.28rem, 1.8vw, 1.68rem);
}

.vault-choice-korean {
    color: #91f7dd;
    font-size: 0.9rem;
}

.vault-choice-button.is-inactive {
    border-color: rgba(169, 135, 255, 0.12);
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.025), transparent 24% 100%),
        linear-gradient(180deg, rgba(29, 24, 38, 0.58), rgba(11, 9, 16, 0.96)), var(--vault-metal-dark);
    color: rgba(245, 241, 255, 0.52);
    filter: saturate(0.56);
    opacity: 0.56;
    box-shadow: none;
}

.vault-choice-button.is-inactive .vault-choice-korean {
    color: rgba(145, 247, 221, 0.54);
}

.vault-choice-lock {
    min-height: 20px;
    padding: 3px 7px;
    border-color: rgba(145, 247, 221, 0.4);
    background: rgba(6, 22, 22, 0.76);
    color: var(--vault-lock-accent);
    font-size: 0.66rem;
}

.vault-choice-lock.is-mine {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 58%), var(--vault-lock-accent);
    color: #10221e;
}

.vault-board-frame {
    position: relative;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: grid;
    isolation: isolate;
}

.vault-board-frame > .vault-board-grid {
    min-height: 0;
}

.vault-player-waiting-stage {
    min-height: 0;
    height: 100%;
    isolation: isolate;
}

.vault-player-waiting-capy-slot {
    position: relative;
    width: var(--ziar-vault-player-capy-size, 92px);
    height: var(--ziar-vault-player-capy-size, 92px);
    display: grid;
    place-items: center;
    transform: translateY(-4%);
}

.vault-player-waiting-capy-slot::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 8%;
    right: 8%;
    bottom: -12%;
    height: 24%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(145, 247, 221, 0.18), rgba(8, 6, 12, 0) 70%);
    filter: blur(3px);
}

.vault-player-waiting-capy-slot .vault-player-waiting-capy {
    --vault-capy-mask-size: var(--ziar-vault-player-capy-size, 92px);
    --playground-capy-outline: 4.5px;
    --playground-capy-eye-size: 2.4px;
    --playground-capy-eye-highlight-size: 0.68px;
    --playground-capy-ear-outline: 2.2px;
    --playground-capy-nostril-size: 1.7px;
    --playground-capy-nostril-fade-size: 2.2px;
    --playground-capy-mouth-stroke: 1.8px;
    width: 100%;
    height: 100%;
    border-radius: 30%;
    box-shadow:
        0 0 0 12px hsl(var(--playground-avatar-hue) 90% 62% / 0.08),
        0 18px 28px rgba(0, 0, 0, 0.32);
    animation: vault-player-capy-idle var(--ziar-vault-player-capy-idle-ms, 4200ms) ease-in-out infinite;
}

.vault-player-waiting-capy-slot .vault-player-waiting-capy.is-paper-white {
    box-shadow:
        0 0 0 12px rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(24, 38, 45, 0.44),
        0 18px 28px rgba(0, 0, 0, 0.32);
}

@keyframes vault-player-capy-idle {
    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }

    48% {
        transform: translateY(-7px) rotate(1deg);
    }

    58% {
        transform: translateY(-6px) rotate(0.5deg);
    }
}

@media (max-width: 720px) {
    .vault-player-waiting-capy-slot {
        width: var(--ziar-vault-player-capy-size-mobile, 76px);
        height: var(--ziar-vault-player-capy-size-mobile, 76px);
    }

    .vault-player-waiting-capy-slot .vault-player-waiting-capy {
        --vault-capy-mask-size: var(--ziar-vault-player-capy-size-mobile, 76px);
        --playground-capy-outline: 4px;
        --playground-capy-eye-size: 2px;
        --playground-capy-eye-highlight-size: 0.56px;
        --playground-capy-ear-outline: 1.8px;
        --playground-capy-nostril-size: 1.4px;
        --playground-capy-nostril-fade-size: 1.9px;
        --playground-capy-mouth-stroke: 1.5px;
        box-shadow:
            0 0 0 10px hsl(var(--playground-avatar-hue) 90% 62% / 0.08),
            0 14px 22px rgba(0, 0, 0, 0.3);
    }

    .vault-player-waiting-capy-slot .vault-player-waiting-capy.is-paper-white {
        box-shadow:
            0 0 0 10px rgba(255, 255, 255, 0.08),
            0 0 0 1px rgba(24, 38, 45, 0.44),
            0 14px 22px rgba(0, 0, 0, 0.3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vault-player-waiting-capy-slot .vault-player-waiting-capy {
        animation: none;
    }
}

html.ziar-vault-motion-disabled .vault-player-waiting-capy,
.vault-view-root.is-vault-motion-disabled .vault-player-waiting-capy {
    animation: none;
}

.vault-capy-runner {
    z-index: 1;
    filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.22));
}

.vault-capy-trail-spark {
    position: absolute;
    z-index: 0;
    width: var(--vault-capy-spark-size, 4px);
    height: var(--vault-capy-spark-size, 4px);
    pointer-events: none;
    background: linear-gradient(135deg, #fff9c7 8%, #ffd45f 48%, #f2a51f 92%);
    clip-path: polygon(50% 0, 62% 37%, 100% 50%, 62% 63%, 50% 100%, 38% 63%, 0 50%, 38% 37%);
    filter:
        drop-shadow(0 0 4px rgba(255, 236, 142, 1))
        drop-shadow(0 0 8px rgba(255, 184, 38, 0.72));
    opacity: 0;
    animation: vault-capy-trail-spark 620ms ease-out forwards;
    will-change: opacity, transform;
}

.vault-capy-runner-shield {
    --vault-capy-mask-size: var(--vault-capy-size, 38.4px);
    --playground-capy-outline: 1.75px;
    --playground-capy-eye-size: 1.05px;
    --playground-capy-eye-highlight-size: 0.24px;
    --playground-capy-ear-outline: 1px;
    --playground-capy-nostril-size: 0.68px;
    --playground-capy-nostril-fade-size: 0.95px;
    --playground-capy-mouth-stroke: 1.05px;
    border-radius: calc(var(--vault-capy-size, 32px) * 0.3);
    box-shadow:
        0 0 0 6px hsl(var(--playground-avatar-hue) 90% 62% / 0.1),
        0 9px 14px rgba(0, 0, 0, 0.24);
    transform-origin: 50% 82%;
}

.vault-capy-runner-shield.is-paper-white {
    box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.13),
        0 0 0 1px rgba(24, 38, 45, 0.48),
        0 9px 14px rgba(0, 0, 0, 0.24);
}

.vault-capy-bandit-mask {
    position: absolute;
    z-index: 5;
    top: 23%;
    left: 5%;
    width: 90%;
    height: 25%;
    pointer-events: none;
    border: max(0.45px, calc(var(--vault-capy-mask-size, 38.4px) * 0.014)) solid rgba(255, 255, 255, 0.18);
    border-radius: 48% 48% 42% 42% / 55% 55% 45% 45%;
    background: linear-gradient(180deg, #282d39 0%, #141821 54%, #090c12 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1px 1px rgba(0, 0, 0, 0.28);
    clip-path: polygon(0 22%, 18% 5%, 50% 12%, 82% 5%, 100% 22%, 96% 78%, 76% 96%, 50% 84%, 24% 96%, 4% 78%);
}

.vault-capy-bandit-eye {
    position: absolute;
    top: 21%;
    width: 24%;
    height: 58%;
    border-radius: 50% 45% 50% 45%;
    background:
        radial-gradient(circle at 43% 37%, rgba(255, 255, 255, 0.94) 0 5%, transparent 7%),
        radial-gradient(circle at 50% 50%, var(--playground-capy-ink) 0 22%, transparent 25%),
        var(--playground-capy-fill-top);
    box-shadow: inset 0 0 0 max(0.4px, calc(var(--vault-capy-mask-size, 38.4px) * 0.012)) rgba(0, 0, 0, 0.6);
}

.vault-capy-bandit-eye.is-left {
    left: 13%;
    transform: rotate(-5deg);
}

.vault-capy-bandit-eye.is-right {
    right: 13%;
    transform: rotate(5deg);
}

.vault-capy-runner.is-running .vault-capy-runner-shield {
    animation: vault-capy-run 270ms ease-in-out infinite;
}

.vault-capy-runner.is-facing-left.is-running .vault-capy-runner-shield {
    animation-direction: reverse;
}

.vault-capy-runner.is-climbing .vault-capy-runner-shield {
    animation: vault-capy-climb 360ms ease-in-out infinite;
}

.vault-capy-runner.is-dropping .vault-capy-runner-shield {
    animation: vault-capy-drop 300ms ease-in-out infinite;
}

.vault-capy-runner.is-perched .vault-capy-runner-shield {
    transform: translateY(-1px);
}

.vault-capy-runner.is-landing .vault-capy-runner-shield {
    animation: vault-capy-land 260ms cubic-bezier(0.2, 0.82, 0.22, 1) both;
}

@keyframes vault-capy-run {
    0%,
    100% {
        transform: translateY(-1px) rotate(-2deg) scale(1.01, 0.99);
    }

    50% {
        transform: translateY(-1px) rotate(2deg) scale(0.99, 1.01);
    }
}

@keyframes vault-capy-climb {
    0%,
    100% {
        transform: translateX(-1px) rotate(-3deg) scale(0.96, 1.04);
    }

    50% {
        transform: translateX(1px) rotate(3deg) scale(1.04, 0.96);
    }
}

@keyframes vault-capy-drop {
    0%,
    100% {
        transform: translateY(-1px) scale(0.96, 1.04);
    }

    50% {
        transform: translateY(2px) scale(1.05, 0.95);
    }
}

@keyframes vault-capy-land {
    0% {
        transform: translateY(-1px) scale(0.97, 1.03);
    }

    45% {
        transform: translateY(-1px) scale(1.06, 0.94);
    }

    78% {
        transform: translateY(-1px) scale(0.99, 1.01);
    }

    100% {
        transform: translateY(-1px) scale(1);
    }
}

@keyframes vault-capy-trail-spark {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(0.35);
    }

    22% {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0) rotate(calc(var(--vault-capy-spark-turn) * 0.3)) scale(1.08);
    }

    62% {
        opacity: 0.78;
        transform: translate3d(
                calc(-50% + var(--vault-capy-spark-drift-x, -5px)),
                calc(-50% + var(--vault-capy-spark-drift-y, -9px)),
                0
            )
            rotate(var(--vault-capy-spark-turn, 24deg)) scale(0.76);
    }

    100% {
        opacity: 0;
        transform: translate3d(
                calc(-50% + var(--vault-capy-spark-drift-x, -5px)),
                calc(-50% + var(--vault-capy-spark-drift-y, -9px)),
                0
            )
            rotate(var(--vault-capy-spark-turn, 24deg)) scale(0.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vault-capy-runner .vault-capy-runner-shield,
    .vault-capy-trail-spark {
        animation: none !important;
        transform: none;
    }

    .vault-capy-trail-spark {
        display: none;
    }
}

.vault-board-frame.has-global-bonus {
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 5px;
}

.vault-board-frame.has-global-bonus.is-final-vault {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.vault-board-frame.has-global-bonus > .vault-board-grid {
    height: auto;
}

.vault-board-global-bonus {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-self: center;
    gap: 7px;
    padding: 4px 12px;
    border: 1px solid rgba(187, 249, 176, 0.6);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 247, 181, 0.16), rgba(121, 230, 145, 0.1)), rgba(12, 37, 24, 0.78);
    color: #d9ffd0;
    font-size: 0.82rem;
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 0 12px rgba(102, 220, 139, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 18px rgba(102, 220, 139, 0.14);
}

.vault-board-global-bonus .vault-growing-stash-icons {
    font-size: 0.82rem;
}

.vault-category-cell.has-diamond {
    align-content: center;
    gap: 4px;
}

.vault-category-cell > .vault-diamond-worth.is-compact {
    margin: 0;
    padding: 2px 5px;
    font-size: 0.58rem;
}

.vault-category-cell > .vault-diamond-worth.is-compact > span:not(.vault-diamond-icons) {
    font-size: inherit;
}

.vault-category-cell > .vault-diamond-worth.is-compact .vault-diamond-gem {
    width: 10px;
}

.vault-scanner-button,
.vault-choice-button,
.vault-tile-button,
.vault-control-row button,
.vault-roll-button,
.vault-unlock-value-button,
.vault-crack-duration-trigger,
.vault-crack-duration-step,
.vault-host-utility-actions button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.vault-roster-card {
    overflow: visible;
}

.vault-roster-card > .vault-roster-head {
    position: absolute;
    grid-row: 1;
    grid-column: 1;
    top: -1px;
    right: -1px;
    z-index: 7;
    justify-content: flex-end;
    gap: 0;
    margin: 0;
    pointer-events: none;
}

@media (min-width: 981px) {
    .vault-roster-card > .vault-roster-head {
        top: -22px;
    }
}

.vault-roster-card > .vault-roster-toolbar {
    position: relative;
    z-index: 6;
    grid-row: 1;
    grid-column: 1;
    padding-right: 0;
}

.vault-roster-card > .roster-body {
    position: relative;
    z-index: 1;
    grid-row: 2;
    grid-column: 1;
}

.vault-roster-card.is-question-view {
    grid-template-rows: minmax(0, 1fr);
}

.vault-roster-card.is-question-view > .roster-body {
    grid-row: 1;
    padding-top: 8px;
}

.vault-roster-card .roster-body {
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
}

#app .vault-roster-card .roster-body:not(.player-roster-needs-scroll) {
    overflow-y: hidden;
}

.vault-team-list.player-roster-density-balanced {
    --player-roster-gap: 6px;
    --player-roster-row-min: 54px;
    --player-roster-row-padding-y: 6px;
    --player-roster-row-padding-x: 8px;
    --player-roster-name-font-size: 0.84rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vault-team-list.player-roster-density-compact {
    --player-roster-gap: 3px;
    --player-roster-row-min: 38px;
    --player-roster-row-padding-y: 3px;
    --player-roster-row-padding-x: 6px;
    --player-roster-name-font-size: 0.72rem;
    --player-roster-badge-font-size: 0.52rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 981px) and (max-height: 820px) {
    .room-shell.is-active-layout:has(.vault-host-shell) {
        gap: 8px;
        padding-top: 8px;
        padding-bottom: 16px;
    }

    .vault-host-shell {
        --vault-host-panel-width: clamp(320px, 24vw, 400px);
        gap: 10px;
    }

    .vault-board-card {
        padding: 12px;
    }

    .vault-host-panel {
        gap: 8px;
    }

    .vault-host-join-card,
    .vault-roster-card {
        padding: 8px;
    }

    .vault-host-utility-strip {
        gap: 8px;
    }

    .vault-host-join-panel .active-room-code-display {
        font-size: clamp(1.42rem, 2.35vw, 2rem);
    }

    .vault-room-qr-frame.active-room-qr-frame {
        width: min(
            var(--ziar-qr-active-room-host-frame-width, 194px),
            var(--ziar-qr-active-room-host-short-frame-width, 86px)
        );
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-board-grid {
        gap: 6px;
        grid-template-rows: minmax(96px, 0.9fr) repeat(var(--vault-board-rows, 5), minmax(62px, 1fr));
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell {
        min-height: 94px;
        padding: 8px 9px 10px;
        font-size: clamp(0.82rem, 1.1vw, 1.12rem);
        line-height: 1.02;
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button {
        min-height: 62px;
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button > .vault-tile-value {
        font-size: clamp(1.5rem, 3.2vw, 3rem);
        line-height: 1.08;
    }

    .vault-host-shell:not(.has-selected-vault) .vault-team-list.player-roster-density-roomy:not(.player-roster-single),
    .vault-host-shell.has-selected-vault .vault-team-list.player-roster-density-roomy:not(.player-roster-single) {
        --player-roster-gap: 6px;
        --player-roster-row-min: 64px;
        --player-roster-row-padding-y: 8px;
        --player-roster-row-padding-x: 8px;
        --player-roster-name-font-size: 0.88rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Vault Breakers classroom-fit refinements: larger headers without allowing long copy or menus to reflow the board. */
.player-roster-actions-menu.is-floating:not([data-roster-actions-placement]) {
    visibility: hidden;
}

.vault-team-name-trigger {
    width: 100%;
    max-width: 100%;
}

.vault-team-name-trigger .player-roster-actions-trigger-label {
    display: -webkit-box;
    max-height: 2.32em;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.vault-team-list.player-roster-density-dense .vault-team-name-trigger .player-roster-actions-trigger-label {
    display: block;
    max-height: 1.16em;
    white-space: nowrap;
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell {
    font-size: clamp(1.22rem, 1.7vw, 1.72rem);
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-title {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-wrap: balance;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-title.is-long-category {
    font-size: 0.96em;
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-title.is-extra-long-category {
    font-size: 0.88em;
    line-height: 1.06;
    -webkit-line-clamp: 4;
}

.host-mode-card.is-config-open .host-mode-config-view {
    padding: 6px 8px 8px 6px;
}

.host-mode-card.is-config-open .host-mode-config-head {
    padding: 2px;
}

/* The Final Vault is a single, centered red lock with a restrained glow across the board and reveal stage. */
.vault-stage-card:not(:has(.vault-preview-stage))
    .vault-board-frame.is-final-vault
    .vault-tile-button:not(.is-cleared) {
    box-shadow:
        inset 0 1px 0 rgba(255, 234, 222, 0.12),
        inset 0 -2px 0 rgba(29, 0, 6, 0.4),
        0 0 15px rgba(224, 48, 59, 0.18),
        0 8px 18px rgba(40, 0, 8, 0.26);
}

.vault-stage-card:not(:has(.vault-preview-stage))
    .vault-board-frame.is-final-vault
    .vault-tile-button.is-final-eligible {
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 216, 0.26),
        0 0 0 1px rgba(255, 118, 93, 0.17),
        0 0 22px rgba(235, 58, 67, 0.28),
        0 10px 22px rgba(68, 1, 12, 0.3);
}

.vault-preview-stage.is-final-vault {
    --vault-preview-hot-r: 126;
    --vault-preview-hot-g: 18;
    --vault-preview-hot-b: 31;
    border-color: rgba(255, 82, 91, 0.7);
    background:
        radial-gradient(circle at 50% 36%, rgba(238, 51, 61, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(72, 9, 18, 0.99), rgba(14, 4, 8, 0.995));
    box-shadow:
        inset 0 0 0 1px rgba(255, 151, 126, 0.12),
        inset 0 0 100px rgba(147, 4, 24, 0.12),
        0 20px 48px rgba(59, 0, 10, 0.38);
}

.vault-preview-stage.is-final-vault .vault-crack-timer-strip {
    width: min(100%, 220px);
    grid-template-columns: minmax(110px, 160px);
    justify-content: center;
    justify-self: center;
}

.vault-preview-stage.is-final-vault .vault-crack-timer .vault-timer-ring {
    --vault-ring-color: #ff4a58;
    --vault-ring-bg: rgba(106, 14, 27, 0.48);
    --vault-timer-outline-color: rgba(255, 164, 145, 0.5);
    width: clamp(82px, 8vw, 116px);
    box-shadow:
        inset 0 0 0 var(--vault-timer-outline-width) var(--vault-timer-outline-color),
        inset 0 0 22px rgba(255, 49, 65, 0.13),
        0 0 12px rgba(255, 47, 64, 0.42),
        0 0 32px rgba(208, 15, 36, 0.25);
    animation: vault-final-lock-glow 1.8s ease-in-out infinite;
}

.vault-preview-stage.is-final-vault .vault-crack-timer > span:not(.vault-timer-ring) {
    color: #ffd8d4;
    font-size: clamp(0.78rem, 1vw, 0.98rem);
    text-shadow: 0 0 12px rgba(255, 72, 84, 0.42);
}

.vault-preview-stage.is-final-vault .vault-preview-control-dock {
    border-color: rgba(255, 83, 92, 0.32);
    background: linear-gradient(180deg, rgba(84, 13, 24, 0.82), rgba(28, 6, 12, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 195, 174, 0.08), 0 0 24px rgba(177, 8, 29, 0.12);
}

@keyframes vault-final-lock-glow {
    0%,
    100% {
        filter: brightness(0.96);
    }

    50% {
        filter: brightness(1.1);
        box-shadow:
            inset 0 0 0 var(--vault-timer-outline-width) var(--vault-timer-outline-color),
            inset 0 0 26px rgba(255, 49, 65, 0.18),
            0 0 17px rgba(255, 55, 70, 0.56),
            0 0 40px rgba(208, 15, 36, 0.32);
    }
}

@media (min-width: 981px) and (max-height: 820px) {
    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell {
        font-size: clamp(1.08rem, 1.5vw, 1.45rem);
    }
}

@media (min-width: 981px) and (max-height: 680px) {
    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell {
        font-size: clamp(0.84rem, 1.14vw, 1.08rem);
    }
}

@media (max-width: 720px) {
    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell {
        font-size: clamp(0.7rem, 2.8vw, 0.94rem);
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-title {
        overflow-wrap: normal;
        -webkit-line-clamp: 2;
    }
}

@media (max-width: 420px) {
    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell {
        font-size: clamp(0.58rem, 2.45vw, 0.74rem);
    }
}

.vault-team-status-led.is-left {
    --vault-team-led-color: #ff354e;
    --vault-team-led-glow: rgba(255, 34, 66, 0.72);
}

#app .vault-team-row.is-left {
    border-color: rgba(255, 65, 83, 0.88);
    background:
        linear-gradient(112deg, rgba(255, 100, 104, 0.16), transparent 34%),
        radial-gradient(circle at 12% 18%, rgba(255, 46, 68, 0.34), transparent 38%),
        linear-gradient(180deg, rgba(104, 15, 28, 0.98), rgba(50, 6, 15, 0.99));
    box-shadow:
        inset 4px 0 0 rgba(255, 65, 83, 0.96),
        inset 0 0 0 1px rgba(255, 186, 181, 0.14),
        inset 0 1px 0 rgba(255, 225, 218, 0.12),
        0 0 18px rgba(255, 29, 61, 0.22),
        0 9px 18px rgba(47, 0, 9, 0.3);
}

.vault-team-row.is-left .vault-team-name-trigger,
.vault-team-row.is-left .vault-team-score {
    color: #fff3ef;
    text-shadow: 0 0 10px rgba(255, 95, 102, 0.28);
}

.vault-team-row.is-left .vault-team-away-badge {
    border-color: rgba(255, 179, 169, 0.56);
    background: linear-gradient(180deg, rgba(225, 42, 57, 0.98), rgba(139, 13, 31, 0.98));
    color: #fff8f2;
    box-shadow: 0 0 12px rgba(255, 40, 66, 0.32);
}

@media (prefers-reduced-motion: reduce) {
    .vault-preview-stage.is-final-vault .vault-crack-timer .vault-timer-ring {
        animation: none;
    }
}

/* Final Vault: one board-level announcement keeps the busy 5x5 grid readable. */
.vault-final-button.secondary-button {
    border-color: rgba(255, 105, 105, 0.72);
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.17), transparent 32%),
        linear-gradient(180deg, #a7252d, #5d101b);
    color: #fff4e9;
    font-weight: 900;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 8px 18px rgba(82, 4, 15, 0.24);
}

.vault-final-button.secondary-button:is(:hover, :focus-visible) {
    border-color: rgba(255, 206, 151, 0.9);
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.23), transparent 32%),
        linear-gradient(180deg, #c9363d, #781521);
    color: #fffaf2;
}

.vault-final-button.secondary-button.is-active,
.vault-final-button.secondary-button[aria-pressed="true"] {
    border-color: rgba(255, 224, 151, 0.98);
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.28), transparent 32%),
        linear-gradient(180deg, #e04a45, #8f1824);
    box-shadow:
        inset 0 0 0 2px rgba(255, 226, 164, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 0 18px rgba(230, 61, 69, 0.38);
}

.vault-board-frame.is-final-vault {
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(8px, 1.2vw, 14px);
}

.vault-final-banner {
    position: relative;
    z-index: 4;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
    padding: clamp(10px, 1.25vw, 16px) clamp(14px, 2vw, 24px);
    overflow: hidden;
    border: 1px solid rgba(255, 154, 121, 0.78);
    border-radius: 10px;
    background:
        linear-gradient(112deg, rgba(255, 241, 213, 0.15), transparent 24% 72%, rgba(255, 204, 146, 0.08)),
        radial-gradient(circle at 18% 50%, rgba(255, 96, 77, 0.3), transparent 34%),
        linear-gradient(180deg, rgba(112, 17, 27, 0.99), rgba(42, 7, 14, 0.99));
    color: #fff5e9;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -3px 0 rgba(39, 0, 7, 0.36),
        0 12px 26px rgba(48, 0, 9, 0.34),
        0 0 24px rgba(213, 37, 47, 0.14);
}

.vault-final-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 22%, rgba(255, 239, 197, 0.15) 48%, transparent 72%);
    transform: translateX(-120%);
    animation: vault-final-sweep 3.8s ease-in-out infinite;
    pointer-events: none;
}

.vault-final-banner > * {
    position: relative;
    z-index: 1;
}

.vault-final-banner-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.vault-final-banner-copy span {
    min-width: 0;
    font-size: clamp(1.25rem, 2.5vw, 2.2rem);
    font-weight: 1000;
    letter-spacing: -0.035em;
    line-height: 0.95;
    text-transform: uppercase;
    text-shadow: 0 2px 0 rgba(39, 0, 7, 0.72);
}

.vault-final-banner-copy small {
    color: rgba(255, 244, 230, 0.84);
    font-size: clamp(0.72rem, 1.05vw, 0.9rem);
    font-weight: 750;
    line-height: 1.15;
}

.vault-final-banner strong {
    color: #ffe0a0;
    font-size: clamp(1.3rem, 2.6vw, 2.25rem);
    font-weight: 1000;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 2px 0 rgba(48, 4, 9, 0.8), 0 0 18px rgba(255, 202, 105, 0.18);
}

.vault-final-banner em {
    color: rgba(255, 244, 230, 0.82);
    font-size: clamp(0.7rem, 1vw, 0.86rem);
    font-style: normal;
    font-weight: 850;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-board-frame.is-final-vault .vault-category-cell,
.vault-stage-card:not(:has(.vault-preview-stage)) .vault-board-frame.is-final-vault .vault-tile-button {
    --vault-door-line: rgba(255, 139, 126, 0.25);
    --vault-door-bolt-strong: rgba(255, 229, 186, 0.58);
    --vault-door-bolt-soft: rgba(255, 160, 139, 0.4);
    --vault-door-hardware: rgba(255, 184, 151, 0.5);
    border-color: rgba(198, 58, 67, 0.52);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.08), transparent 24%),
        radial-gradient(circle at 50% -18%, rgba(255, 99, 83, 0.16), transparent 48%),
        linear-gradient(180deg, rgba(70, 18, 27, 0.99), rgba(25, 7, 13, 0.99));
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-board-frame.is-final-vault .vault-category-cell {
    color: #ffe8dc;
    box-shadow: inset 0 1px 0 rgba(255, 235, 221, 0.15), inset 0 -3px 0 rgba(89, 5, 17, 0.35);
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-board-frame.is-final-vault .vault-tile-button.is-locked,
.vault-stage-card:not(:has(.vault-preview-stage)) .vault-board-frame.is-final-vault .vault-tile-button.is-cleared {
    border-color: rgba(125, 38, 50, 0.35);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.03), transparent 22%),
        linear-gradient(180deg, rgba(45, 17, 24, 0.97), rgba(18, 8, 12, 0.99));
    opacity: 0.62;
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-board-frame.is-final-vault .vault-tile-button.is-final-eligible {
    border-color: rgba(255, 181, 133, 0.88);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.16), transparent 26%),
        radial-gradient(circle at 50% 0%, rgba(255, 183, 109, 0.2), transparent 52%),
        linear-gradient(180deg, rgba(150, 34, 41, 0.99), rgba(71, 10, 20, 0.99));
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 216, 0.26),
        0 0 0 1px rgba(255, 118, 93, 0.15),
        0 10px 22px rgba(68, 1, 12, 0.3);
}

.vault-stage-card:not(:has(.vault-preview-stage))
    .vault-board-frame.is-final-vault
    .vault-tile-button.is-final-eligible
    .vault-display-money {
    color: #ffe0a0;
    font-size: clamp(0.78rem, 2.1vw, 2.05rem);
    letter-spacing: -0.055em;
}

.vault-preview-stage.is-final-vault {
    border-color: rgba(242, 75, 82, 0.54);
    background:
        radial-gradient(circle at 50% 38%, rgba(214, 45, 52, 0.1), transparent 40%),
        linear-gradient(180deg, rgba(45, 10, 18, 0.98), rgba(12, 6, 10, 0.99));
    box-shadow: inset 0 0 0 1px rgba(255, 128, 112, 0.08), 0 20px 46px rgba(48, 0, 9, 0.3);
}

@keyframes vault-final-sweep {
    0%, 58% { transform: translateX(-120%); }
    84%, 100% { transform: translateX(120%); }
}

@media (max-width: 640px) {
    .vault-final-banner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px 10px;
        padding: 9px 11px;
    }

    .vault-final-banner-copy {
        gap: 2px;
    }

    .vault-final-banner-copy span {
        font-size: clamp(1.05rem, 5.4vw, 1.45rem);
    }

    .vault-final-banner-copy small {
        font-size: clamp(0.62rem, 2.75vw, 0.72rem);
    }

    .vault-final-banner strong {
        font-size: clamp(1.15rem, 6vw, 1.58rem);
    }

    .vault-final-banner em {
        grid-column: 1 / -1;
        justify-self: end;
        font-size: 0.66rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vault-final-banner::after {
        animation: none;
    }
}

@media (min-width: 981px) and (max-height: 680px) {
    .room-shell.is-active-layout:has(.vault-host-shell) {
        padding-bottom: 12px;
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-board-grid {
        grid-template-rows: minmax(48px, 0.5fr) repeat(var(--vault-board-rows, 5), minmax(54px, 1fr));
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell {
        min-height: 48px;
        padding: 6px 7px 8px;
        font-size: clamp(0.74rem, 1.02vw, 0.96rem);
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button {
        min-height: 54px;
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button > .vault-tile-value {
        font-size: clamp(1.32rem, 2.75vw, 2.45rem);
        line-height: 1.08;
    }

    .vault-host-shell:not(.has-selected-vault) .vault-team-list.player-roster-density-roomy:not(.player-roster-single),
    .vault-host-shell.has-selected-vault .vault-team-list.player-roster-density-roomy:not(.player-roster-single) {
        --player-roster-gap: 5px;
        --player-roster-row-min: 56px;
        --player-roster-row-padding-y: 6px;
        --player-roster-row-padding-x: 7px;
        --player-roster-name-font-size: 0.84rem;
    }
}

.vault-team-list.player-roster-density-compact .vault-team-row,
.vault-team-list.player-roster-density-dense .vault-team-row {
    gap: 6px;
}

.vault-team-list.player-roster-density-compact .vault-team-score {
    font-size: 0.78rem;
}

.vault-team-list.player-roster-density-dense {
    --player-roster-gap: 4px;
    --player-roster-row-min: 36px;
    --player-roster-row-padding-y: 3px;
    --player-roster-row-padding-x: 6px;
    --player-roster-name-font-size: 0.72rem;
    --player-roster-badge-font-size: 0.52rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vault-team-list.player-roster-density-dense .vault-team-name-line {
    align-items: center;
    gap: 4px;
}

.vault-team-list.player-roster-density-dense .vault-team-name-trigger .player-roster-actions-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vault-team-list.player-roster-density-dense .vault-team-score {
    font-size: 0.7rem;
}

.vault-team-list.player-roster-density-dense .vault-team-meta {
    display: none;
}

.vault-team-list.player-roster-density-compact .vault-team-status-led,
.vault-team-list.player-roster-density-dense .vault-team-status-led {
    width: 8px;
    height: 8px;
}

.vault-team-list.player-roster-density-dense .vault-team-lock-position {
    min-height: 14px;
    padding: 0 4px;
    font-size: 0.52rem;
}

.vault-team-list.player-roster-density-dense .vault-team-away-badge {
    min-height: 14px;
    padding: 0 4px;
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button {
    border-color: rgba(167, 238, 235, 0.34);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.045),
        0 0 0 1px rgba(255, 222, 126, 0.08);
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell {
    overflow: hidden;
    border-color: rgba(255, 211, 112, 0.42);
    background:
        linear-gradient(180deg, rgba(255, 235, 169, 0.2), rgba(178, 116, 32, 0.08) 48%, rgba(8, 7, 12, 0.82) 100%),
        linear-gradient(90deg, rgba(255, 210, 112, 0.16), transparent 24% 76%, rgba(255, 244, 196, 0.12)), rgba(13, 10, 10, 0.9);
    color: #fff1bd;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -2px 0 rgba(255, 196, 78, 0.36),
        0 0 0 1px rgba(255, 211, 112, 0.1);
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 7px;
    left: 12px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 211, 112, 0.86), transparent);
    opacity: 0.78;
    pointer-events: none;
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button:not(:disabled):hover,
.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button:not(:disabled):focus-visible {
    border-color: rgba(218, 255, 244, 0.64);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(255, 222, 126, 0.16),
        0 0 22px rgba(145, 247, 221, 0.13);
}

.vault-chooser-spotlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: grid;
    place-items: center;
    padding: clamp(14px, 2.4vw, 28px);
}

.vault-chooser-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 48%, rgba(7, 14, 16, 0.72), transparent 42%),
        radial-gradient(circle at 50% 50%, rgba(145, 247, 221, 0.14), transparent 58%);
}

.vault-chooser-spotlight::before,
.vault-chooser-spotlight-panel {
    opacity: 0;
    transform: scale(0.97);
    animation-name: vaultChooserSpotlightIn, vaultChooserSpotlightOut;
    animation-duration: var(--vault-chooser-spotlight-fade-in, 900ms), var(--vault-chooser-spotlight-fade-out, 4000ms);
    animation-timing-function: cubic-bezier(0.24, 0.72, 0.24, 1), cubic-bezier(0.36, 0, 0.28, 1);
    animation-fill-mode: both, forwards;
    animation-delay: var(--vault-chooser-spotlight-in-delay, 500ms), var(--vault-chooser-spotlight-out-delay, 5500ms);
}

.vault-chooser-spotlight.is-dismissing::before,
.vault-chooser-spotlight.is-dismissing .vault-chooser-spotlight-panel {
    animation-name: vaultChooserSpotlightDismiss;
    animation-duration: var(--vault-chooser-spotlight-dismiss-ms, 360ms);
    animation-timing-function: cubic-bezier(0.36, 0, 0.28, 1);
    animation-fill-mode: both;
    animation-delay: var(--vault-chooser-spotlight-dismiss-delay, 0ms);
}

.vault-chooser-spotlight-panel {
    appearance: none;
    position: relative;
    z-index: 7;
    width: min(760px, 96%);
    min-width: min(420px, 100%);
    max-width: 100%;
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: clamp(18px, 3vw, 30px) clamp(24px, 5vw, 54px);
    border-radius: 8px;
    border: 1px solid rgba(255, 222, 126, 0.4);
    background:
        linear-gradient(180deg, rgba(255, 244, 186, 0.12), transparent 44%),
        radial-gradient(circle at 50% 0%, rgba(145, 247, 221, 0.18), transparent 46%), rgba(7, 27, 25, 0.9);
    color: #f7fff3;
    font: inherit;
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 26px 56px rgba(0, 0, 0, 0.34),
        0 0 42px rgba(145, 247, 221, 0.16);
}

.vault-chooser-spotlight-panel:hover,
.vault-chooser-spotlight-panel:focus-visible {
    border-color: rgba(255, 234, 160, 0.68);
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 26px 56px rgba(0, 0, 0, 0.34),
        0 0 50px rgba(145, 247, 221, 0.22);
}

.vault-chooser-spotlight.is-dismissing .vault-chooser-spotlight-panel {
    pointer-events: none;
}

.vault-chooser-spotlight-copy {
    width: 100%;
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 7px;
}

.vault-chooser-spotlight-copy > span {
    color: #a8ffe4;
    font-size: clamp(0.74rem, 1.1vw, 0.98rem);
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.vault-chooser-spotlight-copy > strong {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    color: #ffe08a;
    font-size: 4.8rem;
    font-weight: 950;
    line-height: 1.02;
    text-align: center;
    text-shadow: 0 0 24px rgba(255, 222, 126, 0.28);
    white-space: normal;
}

.vault-chooser-spotlight-copy > .vault-chooser-stash-pop {
    max-width: min(560px, 100%);
    padding: 7px 12px;
    border: 1px solid rgba(187, 249, 176, 0.42);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 243, 176, 0.13), rgba(102, 220, 139, 0.1)),
        rgba(8, 28, 18, 0.78);
    color: #dfffd5;
    font-size: clamp(0.82rem, 1.16vw, 1rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.18;
    text-align: center;
    text-transform: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 18px rgba(102, 220, 139, 0.12);
}

.vault-chooser-spotlight-panel.has-diamond {
    width: min(820px, 98%);
    gap: 11px;
    overflow: hidden;
    border-color: rgba(174, 246, 255, 0.68);
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.13), transparent 24% 100%),
        radial-gradient(circle at 23% 45%, rgba(164, 246, 255, 0.24), transparent 32%),
        linear-gradient(135deg, rgba(38, 119, 143, 0.26), rgba(91, 69, 151, 0.24)),
        rgba(6, 18, 34, 0.96);
    color: #dafcff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 28px 62px rgba(0, 0, 0, 0.42),
        0 0 54px rgba(112, 224, 255, 0.28);
}

.vault-chooser-spotlight-panel.has-diamond::before,
.vault-chooser-spotlight-panel.has-diamond::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.vault-chooser-spotlight-panel.has-diamond::before {
    inset: -55% 48% -55% -12%;
    background: repeating-conic-gradient(
        from 8deg,
        rgba(194, 251, 255, 0.12) 0deg 8deg,
        transparent 8deg 24deg
    );
    opacity: 0.6;
}

.vault-chooser-spotlight-panel.has-diamond::after {
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 42px rgba(124, 226, 255, 0.12);
}

.vault-chooser-diamond-pop {
    position: relative;
    z-index: 1;
    width: min(670px, 100%);
    min-height: clamp(154px, 23vh, 218px);
    display: grid;
    grid-template-columns: minmax(112px, 0.72fr) minmax(0, 1.7fr);
    align-items: center;
    gap: clamp(22px, 4vw, 46px);
    padding: clamp(18px, 2.8vw, 28px) clamp(22px, 4vw, 42px);
    border: 1px solid rgba(195, 251, 255, 0.48);
    border-radius: 10px;
    background:
        linear-gradient(116deg, rgba(255, 255, 255, 0.13), transparent 28% 100%),
        radial-gradient(circle at 20% 50%, rgba(189, 252, 255, 0.2), transparent 34%),
        rgba(10, 31, 50, 0.78);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 32px rgba(105, 218, 255, 0.18);
    animation: vaultChooserDiamondReveal 560ms 180ms cubic-bezier(0.18, 0.84, 0.24, 1) both;
}

.vault-chooser-diamond-visual {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(104px, 13vw, 148px);
    aspect-ratio: 1;
    justify-self: center;
    filter: drop-shadow(0 18px 22px rgba(2, 11, 25, 0.46));
}

.vault-chooser-diamond-visual::before {
    content: "";
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(185, 253, 255, 0.42), rgba(106, 197, 255, 0.12) 45%, transparent 72%);
    box-shadow: 0 0 42px rgba(127, 232, 255, 0.44);
    animation: vaultChooserDiamondHalo 1500ms ease-in-out infinite;
}

.vault-chooser-diamond-visual::after {
    content: "";
    position: absolute;
    top: 2%;
    right: 5%;
    width: clamp(18px, 2.4vw, 28px);
    aspect-ratio: 1;
    background: rgba(238, 255, 255, 0.96);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    filter: drop-shadow(0 0 10px rgba(211, 255, 255, 0.94));
    animation: vaultChooserDiamondSparkle 1100ms ease-in-out infinite;
}

.vault-chooser-diamond-visual .vault-diamond-gem {
    position: relative;
    z-index: 1;
    width: clamp(72px, 9.6vw, 112px);
    border-width: 2px;
    border-radius: 11px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0 16%, transparent 17%),
        linear-gradient(45deg, transparent 0 46%, rgba(235, 255, 255, 0.72) 47% 52%, transparent 53%),
        linear-gradient(315deg, rgba(142, 255, 247, 0.94), rgba(122, 164, 255, 0.82)), #bffcff;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.38),
        inset -14px -14px 28px rgba(54, 79, 189, 0.18),
        0 0 28px rgba(130, 232, 255, 0.68);
    animation: vaultChooserDiamondGem 1500ms ease-in-out infinite;
}

.vault-chooser-diamond-copy {
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: 7px;
    text-align: left;
}

.vault-chooser-diamond-title {
    color: #f4ffff;
    font-size: clamp(2rem, 4.3vw, 3.65rem);
    font-weight: 950;
    letter-spacing: -0.035em;
    line-height: 0.92;
    text-transform: uppercase;
    text-shadow:
        0 4px 0 rgba(7, 18, 43, 0.48),
        0 0 28px rgba(142, 241, 255, 0.42);
}

.vault-chooser-diamond-category {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: #a8ffe4;
    font-size: clamp(0.86rem, 1.5vw, 1.16rem);
    font-weight: 950;
    line-height: 1.05;
    text-transform: uppercase;
}

.vault-chooser-diamond-bonus {
    display: grid;
    justify-items: start;
    color: #ffffff;
    font-size: clamp(1.5rem, 3.2vw, 2.6rem);
    font-weight: 950;
    line-height: 0.98;
    text-shadow: 0 0 24px rgba(130, 232, 255, 0.36);
}

.vault-chooser-diamond-bonus-lead,
.vault-chooser-diamond-bonus-result,
.vault-chooser-diamond-bonus-amount {
    display: block;
}

.vault-chooser-diamond-bonus-amount {
    white-space: nowrap;
}

.vault-chooser-diamond-bonus .vault-chooser-diamond-category {
    display: inline;
    max-width: none;
    overflow-wrap: normal;
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
    white-space: nowrap;
}

.vault-chooser-spotlight-panel.has-diamond .vault-chooser-spotlight-copy > span:not(.vault-chooser-diamond-copy) {
    margin-top: 2px;
    font-size: clamp(0.68rem, 0.9vw, 0.82rem);
}

.vault-chooser-spotlight-panel.has-diamond .vault-chooser-spotlight-copy > strong {
    font-size: clamp(1.7rem, 3.3vw, 2.65rem);
}

.vault-chooser-spotlight-panel.has-diamond .vault-chooser-dial {
    --vault-chooser-dial-offset: -35%;
    left: auto;
    right: clamp(14px, 2.8vw, 28px);
    width: clamp(46px, 6vw, 62px);
    padding: 6px;
}

.vault-chooser-spotlight-copy.is-diamond-only {
    gap: 0;
}

.vault-chooser-dial {
    --vault-chooser-dial-offset: -42%;
    position: absolute;
    left: clamp(16px, 4vw, 36px);
    top: 0;
    width: clamp(58px, 8vw, 88px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: clamp(6px, 0.9vw, 9px);
    border-radius: 50%;
    border: 1px solid rgba(255, 243, 188, 0.68);
    background:
        radial-gradient(circle at 31% 22%, rgba(255, 255, 255, 0.68), transparent 21%),
        linear-gradient(145deg, #fff2b4 0%, #d9a94e 50%, #7b5220 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        inset 0 -3px 7px rgba(77, 42, 10, 0.38),
        0 16px 30px rgba(0, 0, 0, 0.28),
        0 0 28px rgba(255, 222, 126, 0.32);
    opacity: 0;
    transform: translateY(var(--vault-chooser-dial-offset)) scale(0.82);
    animation: vaultChooserDialReveal 650ms 0ms cubic-bezier(0.18, 0.8, 0.22, 1) both;
    isolation: isolate;
}

.vault-chooser-dial::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 2px;
    left: 50%;
    width: 10px;
    height: 13px;
    background: #a8ffe4;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    filter: drop-shadow(0 0 5px rgba(145, 247, 221, 0.72));
    transform: translateX(-50%);
    transform-origin: 50% 0;
    animation: vaultChooserDialPointerLock 2450ms 0ms linear both;
}

.vault-chooser-dial::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 4px;
    border: 1px solid rgba(255, 250, 224, 0.42);
    border-radius: inherit;
    box-shadow: inset 0 0 8px rgba(66, 34, 8, 0.34);
    pointer-events: none;
    animation: vaultChooserDialLockRing 2450ms 0ms linear both;
}

.vault-chooser-dial-face {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(70, 43, 12, 0.76);
    border-radius: 999px;
    background:
        repeating-conic-gradient(from -1deg, rgba(17, 54, 48, 0.96) 0deg 2deg, transparent 2deg 15deg),
        radial-gradient(circle at 34% 27%, #fff8d8 0%, #e5bc63 55%, #a06b27 100%);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.66),
        0 2px 5px rgba(48, 25, 4, 0.42);
    animation: vaultChooserDialSpinAndLock 2450ms 0ms linear both;
}

.vault-chooser-dial-face::before {
    content: "";
    position: absolute;
    inset: 17%;
    border: 1px solid rgba(255, 239, 177, 0.38);
    border-radius: inherit;
    background:
        radial-gradient(circle at 33% 28%, rgba(197, 255, 238, 0.36), transparent 24%),
        linear-gradient(145deg, #2d655b, #102c28 70%);
    box-shadow:
        inset 0 0 0 2px rgba(5, 24, 22, 0.38),
        inset 0 -4px 8px rgba(0, 0, 0, 0.34);
}

.vault-chooser-dial-hub {
    position: absolute;
    z-index: 1;
    inset: 35%;
    border: 1px solid rgba(255, 244, 197, 0.56);
    border-radius: 50%;
    background: linear-gradient(145deg, #fff0a6, #b97c2c 72%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.66),
        0 2px 5px rgba(0, 0, 0, 0.42);
}

.vault-chooser-dial-hub::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 190%;
    height: 34%;
    border: 1px solid rgba(255, 245, 202, 0.42);
    border-radius: 999px;
    background: linear-gradient(180deg, #f4d681, #8f5b21);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.34);
    transform: translate(-50%, -50%);
}

.vault-chooser-dial-hub::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 31%;
    border-radius: 50%;
    background: #16352f;
    box-shadow: 0 0 0 1px rgba(255, 242, 187, 0.38);
}

@keyframes vaultChooserDialReveal {
    0% {
        opacity: 0;
        transform: translateY(var(--vault-chooser-dial-offset)) scale(0.82);
    }
    100% {
        opacity: 1;
        transform: translateY(var(--vault-chooser-dial-offset)) scale(1);
    }
}

@keyframes vaultChooserDialSpinAndLock {
    0% {
        filter: brightness(0.86) blur(0.35px);
        transform: rotate(-2160deg) scale(0.94);
    }
    18% {
        filter: brightness(0.94) blur(0.28px);
        transform: rotate(-1350deg) scale(0.97);
    }
    38% {
        filter: brightness(1) blur(0.18px);
        transform: rotate(-720deg) scale(1);
    }
    58% {
        filter: brightness(1.04) blur(0.08px);
        transform: rotate(-300deg) scale(1);
    }
    73% {
        filter: brightness(1.06) blur(0);
        transform: rotate(-105deg) scale(1);
    }
    84% {
        transform: rotate(-28deg) scale(1);
    }
    90% {
        transform: rotate(9deg) scale(1.035);
    }
    95% {
        filter: brightness(1.16);
        transform: rotate(-4deg) scale(0.985);
    }
    100% {
        filter: brightness(1);
        transform: rotate(0deg) scale(1);
    }
}

@keyframes vaultChooserDialPointerLock {
    0%,
    83% {
        transform: translateX(-50%) translateY(0) scaleY(1);
    }
    87% {
        transform: translateX(-50%) translateY(2px) scaleY(0.8);
    }
    90% {
        transform: translateX(-50%) translateY(0) scaleY(1.05);
    }
    93% {
        transform: translateX(-50%) translateY(1px) scaleY(0.9);
    }
    100% {
        transform: translateX(-50%) translateY(0) scaleY(1);
    }
}

@keyframes vaultChooserDialLockRing {
    0%,
    88% {
        border-color: rgba(255, 250, 224, 0.42);
        box-shadow: inset 0 0 8px rgba(66, 34, 8, 0.34);
    }
    94% {
        border-color: rgba(168, 255, 228, 0.92);
        box-shadow:
            inset 0 0 8px rgba(66, 34, 8, 0.34),
            0 0 13px rgba(145, 247, 221, 0.82);
    }
    100% {
        border-color: rgba(255, 250, 224, 0.42);
        box-shadow: inset 0 0 8px rgba(66, 34, 8, 0.34);
    }
}

@media (max-width: 700px) {
    .vault-chooser-spotlight-panel {
        min-width: 0;
        justify-items: center;
        padding: 18px 20px;
    }

    .vault-chooser-spotlight-copy {
        justify-items: center;
    }

    .vault-chooser-spotlight-copy > strong {
        font-size: 2.8rem;
        text-align: center;
    }

    .vault-chooser-spotlight-panel.has-diamond {
        width: min(520px, 100%);
        padding: 18px 14px;
    }

    .vault-chooser-diamond-pop {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 18px 14px;
    }

    .vault-chooser-diamond-visual {
        width: 86px;
    }

    .vault-chooser-diamond-visual .vault-diamond-gem {
        width: 64px;
    }

    .vault-chooser-diamond-copy {
        justify-items: center;
        text-align: center;
    }

    .vault-chooser-diamond-bonus {
        justify-items: center;
    }

    .vault-chooser-diamond-title {
        font-size: clamp(1.85rem, 8vw, 2.55rem);
    }

    .vault-chooser-diamond-bonus {
        font-size: clamp(1.35rem, 6vw, 2rem);
    }

    .vault-chooser-spotlight-panel.has-diamond .vault-chooser-spotlight-copy > strong {
        font-size: 2rem;
    }

    .vault-chooser-spotlight-panel.has-diamond .vault-chooser-dial {
        --vault-chooser-dial-offset: -35%;
        right: 10px;
        width: 44px;
        padding: 5px;
    }

    .vault-chooser-dial {
        --vault-chooser-dial-offset: -38%;
        width: 58px;
        padding: 6px;
        left: 16px;
    }
}

@keyframes vaultChooserDiamondReveal {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes vaultChooserDiamondGem {
    0%,
    100% {
        filter: brightness(1) saturate(1);
        transform: rotate(45deg) scale(0.96);
    }
    50% {
        filter: brightness(1.18) saturate(1.12);
        transform: rotate(45deg) scale(1.04);
    }
}

@keyframes vaultChooserDiamondHalo {
    0%,
    100% {
        opacity: 0.72;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes vaultChooserDiamondSparkle {
    0%,
    100% {
        opacity: 0.48;
        transform: scale(0.72) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.08) rotate(45deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vault-chooser-dial,
    .vault-chooser-dial::before,
    .vault-chooser-dial::after,
    .vault-chooser-dial-face,
    .vault-chooser-diamond-pop,
    .vault-chooser-diamond-visual::before,
    .vault-chooser-diamond-visual::after,
    .vault-chooser-diamond-visual .vault-diamond-gem {
        animation: none;
    }

    .vault-chooser-dial {
        opacity: 1;
        transform: translateY(var(--vault-chooser-dial-offset));
    }
}

@keyframes vaultChooserSpotlightIn {
    0% {
        opacity: 0;
        transform: scale(0.97);
    }
    52% {
        opacity: 0.68;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes vaultChooserSpotlightOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.02);
    }
}

@keyframes vaultChooserSpotlightDismiss {
    from {
        opacity: var(--vault-chooser-spotlight-dismiss-opacity, 1);
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(1.015);
    }
}

.vault-crack-timer .vault-timer-ring {
    width: clamp(82px, 8.2vw, 122px);
}

.vault-crack-timer .vault-timer-ring span {
    font-size: clamp(1.82rem, 3.05vw, 2.72rem);
}

.vault-timer-ring {
    width: clamp(74px, 7.9vw, 110px);
}

.vault-player-timer .vault-timer-ring {
    width: clamp(70px, 7.6vw, 94px);
}

.vault-player-timer .vault-timer-ring span {
    font-size: clamp(1.58rem, 3.1vw, 2.36rem);
}

.vault-timer-ring.is-money-value span,
.vault-crack-timer .vault-timer-ring.is-money-value span,
.vault-player-timer .vault-timer-ring.is-money-value span {
    font-size: clamp(0.9rem, 1.5vw, 1.4rem);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.vault-preview-main,
.vault-preview-content {
    min-height: 0;
    overflow: hidden;
}

.vault-preview-stage:not(.is-round-complete) .vault-preview-main,
.vault-preview-stage:not(.is-round-complete) .vault-preview-content {
    overflow: visible;
}

.vault-preview-stage.is-round-complete {
    gap: clamp(8px, 1.2vh, 14px);
}

.vault-preview-stage.is-round-complete .vault-preview-content {
    align-content: center;
    gap: clamp(10px, 1.6vh, 16px);
    max-height: 100%;
}

.vault-preview-stage.is-round-complete .vault-crack-timer .vault-timer-ring {
    width: clamp(52px, 5vw, 72px);
}

.vault-preview-stage.is-round-complete .vault-crack-timer .vault-timer-ring span {
    font-size: clamp(1.12rem, 1.7vw, 1.56rem);
}

.vault-preview-stage.is-round-complete .vault-preview-question {
    overflow-wrap: anywhere;
}

.vault-preview-stage.is-round-complete .vault-preview-answer {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(18px, 2.4vw, 28px);
    overflow: hidden;
    border-color: rgba(255, 229, 143, 0.46);
    background:
        linear-gradient(90deg, rgba(255, 236, 166, 0.1) 0 1px, transparent 1px 17px),
        radial-gradient(circle at 16% 50%, rgba(145, 247, 221, 0.18), transparent 20%),
        radial-gradient(circle at 84% 50%, rgba(255, 222, 126, 0.16), transparent 22%),
        linear-gradient(135deg, rgba(26, 110, 70, 0.96), rgba(8, 42, 31, 0.98)), #0b2c22;
    box-shadow:
        inset 0 0 0 1px rgba(255, 248, 214, 0.08),
        inset 0 18px 48px rgba(255, 255, 255, 0.045),
        0 24px 48px rgba(0, 0, 0, 0.24),
        0 0 32px rgba(145, 247, 221, 0.12);
}

.vault-preview-stage.is-round-complete .vault-preview-answer::before,
.vault-preview-stage.is-round-complete .vault-preview-answer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.vault-preview-stage.is-round-complete .vault-preview-answer::before {
    opacity: 0.58;
    background:
        radial-gradient(
            ellipse at 50% 50%,
            transparent 0 27%,
            rgba(255, 246, 196, 0.09) 27.5% 28.3%,
            transparent 28.8% 38%,
            rgba(159, 255, 187, 0.07) 38.5% 39.2%,
            transparent 39.7%
        ),
        repeating-radial-gradient(ellipse at 16% 50%, rgba(255, 246, 196, 0.11) 0 1px, transparent 1.8px 12px),
        repeating-radial-gradient(ellipse at 84% 50%, rgba(145, 247, 221, 0.1) 0 1px, transparent 1.8px 13px),
        repeating-linear-gradient(103deg, rgba(255, 246, 196, 0.075) 0 1px, transparent 1px 18px),
        linear-gradient(77deg, rgba(8, 42, 31, 0.16), transparent 42% 58%, rgba(8, 42, 31, 0.12));
    mix-blend-mode: screen;
    transform: translate3d(0, 0, 0);
    animation: vaultAnswerBillPrintDrift 5400ms linear infinite alternate;
}

.vault-preview-stage.is-round-complete .vault-preview-answer::after {
    opacity: 0.42;
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 220, 0.42) 0 1px, transparent 2px),
        radial-gradient(circle at 32% 72%, rgba(159, 255, 187, 0.26) 0 1px, transparent 2.8px),
        radial-gradient(circle at 58% 18%, rgba(255, 222, 126, 0.32) 0 1px, transparent 2.8px),
        radial-gradient(circle at 76% 64%, rgba(232, 255, 220, 0.32) 0 1px, transparent 2.5px);
    filter: drop-shadow(0 0 5px rgba(255, 246, 196, 0.2));
    animation: vaultAnswerBillFlecks 2600ms ease-in-out infinite;
}

.vault-preview-stage.is-round-complete .vault-answer-copy,
.vault-preview-stage.is-round-complete .vault-result-value {
    position: relative;
    z-index: 1;
}

.vault-preview-stage.is-round-complete .vault-result-value {
    position: relative;
    padding-inline: clamp(18px, 1.9vw, 26px);
    border-left: 2px solid rgba(255, 222, 126, 0.58);
}

.vault-preview-stage.is-round-complete .vault-result-value::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 12%;
    bottom: 12%;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, rgba(255, 246, 196, 0.82), transparent);
}

@media (min-width: 981px) and (max-height: 900px) {
    .vault-preview-stage.is-round-complete .vault-preview-answer {
        min-height: clamp(144px, 21vh, 204px);
        padding: clamp(9px, 1.4vw, 16px);
    }

    .vault-preview-stage.is-round-complete .vault-answer-copy {
        gap: 3px;
    }

    .vault-preview-stage.is-round-complete .vault-preview-answer .vault-answer-term {
        font-size: clamp(2.1rem, 4.35vw, 4.15rem);
        line-height: 1.02;
    }

    .vault-preview-stage.is-round-complete .vault-preview-answer .vault-answer-korean {
        font-size: clamp(1.12rem, 2.05vw, 1.85rem);
    }
}

@keyframes vaultAnswerBillPrintDrift {
    0% {
        background-position:
            0 0,
            0 0,
            0 0,
            0 0,
            0 0;
        transform: translate3d(0, 0, 0);
    }
    100% {
        background-position:
            0 0,
            13px -5px,
            -11px 6px,
            20px 0,
            0 0;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes vaultAnswerBillFlecks {
    0%,
    100% {
        opacity: 0.28;
        transform: translate3d(-4px, 2px, 0);
    }
    46% {
        opacity: 0.56;
        transform: translate3d(5px, -4px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vault-preview-stage.is-round-complete .vault-preview-answer::before,
    .vault-preview-stage.is-round-complete .vault-preview-answer::after {
        animation: none;
    }
}

@media (max-width: 980px) {
    .room-shell.is-active-layout:has(.vault-host-shell) {
        height: auto;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .room-shell.is-active-layout:has(.vault-host-shell) .room-content {
        flex: 0 0 auto;
        min-height: calc(100vh - 18px);
        min-height: calc(100svh - 18px);
        overflow: visible;
    }

    .vault-host-shell.has-selected-vault {
        grid-template-columns: minmax(0, 1fr);
    }

    .vault-host-shell,
    .vault-host-shell.has-selected-vault {
        grid-template-rows: auto auto;
        height: auto;
        align-content: start;
    }

    .vault-host-shell.has-selected-vault .vault-host-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .vault-host-panel,
    .vault-host-shell.has-selected-vault .vault-host-panel {
        grid-template-rows: auto auto;
        height: auto;
    }

    .vault-host-shell.has-selected-vault .vault-stage-card,
    .vault-stage-card:not(:has(.vault-preview-stage)) {
        height: auto;
    }

    .vault-host-shell.has-selected-vault .vault-score-card {
        max-height: none;
    }

    .vault-host-shell.has-selected-vault .vault-score-card .roster-body {
        overflow-y: visible;
    }

    .vault-preview-stage {
        min-height: min(640px, calc(100svh - 102px));
    }

    .vault-preview-question {
        max-width: 18ch;
        font-size: clamp(2.4rem, 8vw, 5.2rem);
    }

    .vault-preview-question.is-long-prompt {
        max-width: min(24ch, 100%);
        font-size: 3rem;
    }

    .vault-preview-question.is-extra-long-prompt {
        max-width: min(28ch, 100%);
        font-size: 2.45rem;
    }

    .vault-preview-value strong {
        font-size: clamp(3.1rem, 11vw, 7rem);
    }

    .vault-choice-grid {
        grid-auto-rows: minmax(78px, 1fr);
    }
}

@media (max-width: 720px) {
    .vault-view-root {
        min-height: calc(100svh - 72px);
    }

    .vault-board-head,
    .vault-player-head,
    .vault-choice-toolbar {
        align-items: stretch;
    }

    .vault-host-actions {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 8px;
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) {
        min-height: min(620px, calc(100svh - 92px));
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-board-grid {
        grid-template-columns: repeat(var(--vault-board-columns, 5), minmax(0, 1fr));
        gap: 6px;
        overflow-x: visible;
        padding-bottom: 0;
        grid-template-rows: minmax(62px, 0.62fr) repeat(var(--vault-board-rows, 5), minmax(74px, 1fr));
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell {
        min-height: 58px;
        padding: 8px 5px 11px;
        font-size: clamp(0.62rem, 2.4vw, 0.82rem);
        line-height: 1.04;
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-title {
        display: -webkit-box;
        overflow: hidden;
        overflow-wrap: normal;
        word-break: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell::after {
        right: 8px;
        left: 8px;
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button {
        min-height: 74px;
        padding-inline: 2px;
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button > .vault-tile-value {
        max-width: 100%;
        font-size: clamp(1rem, 5.35vw, 1.48rem);
        line-height: 0.96;
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button .vault-massive-loot-badge {
        right: 4px;
        bottom: 4px;
        left: 4px;
        max-width: none;
        padding-inline: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        transform: none;
        font-size: clamp(0.34rem, 1.55vw, 0.46rem);
    }

    .vault-host-utility-strip,
    .vault-host-utility-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .vault-host-utility-strip .vault-room-qr-frame.active-room-qr-frame {
        width: min(
            var(--ziar-qr-active-room-host-frame-width-small, 122px),
            var(--ziar-qr-active-room-host-stacked-frame-width, 115px)
        );
        padding: 4px;
        border-radius: 12px;
    }

    .vault-preview-stage {
        min-height: min(590px, calc(100svh - 84px));
        padding: 12px;
        gap: 12px;
    }

    .vault-preview-main > .vault-massive-loot-reveal {
        width: 100%;
        min-height: clamp(200px, 30vh, 260px);
        padding: 18px;
    }

    .vault-crack-timer-strip {
        gap: 7px;
    }

    .vault-crack-timer .vault-timer-ring {
        width: clamp(62px, 20vw, 84px);
    }

    .vault-crack-timer .vault-timer-ring span {
        font-size: clamp(1.42rem, 5.6vw, 2rem);
    }

    .vault-timer-ring {
        width: clamp(54px, 17vw, 74px);
    }

    .vault-timer-ring span {
        font-size: clamp(1.25rem, 5.2vw, 2rem);
    }

    .vault-crack-timer > span:not(.vault-timer-ring) {
        font-size: 0.66rem;
    }

    .vault-preview-value strong {
        font-size: clamp(2.7rem, 15vw, 5rem);
    }

    .vault-preview-question {
        max-width: 13ch;
        font-size: clamp(2.15rem, 11vw, 4.6rem);
    }

    .vault-preview-question.is-long-prompt {
        max-width: min(22ch, 100%);
        font-size: 2.45rem;
    }

    .vault-preview-question.is-extra-long-prompt {
        max-width: min(26ch, 100%);
        font-size: 2.05rem;
    }

    .vault-preview-answer {
        min-height: clamp(140px, 24vh, 220px);
        padding: 16px;
    }

    .vault-preview-answer > strong,
    .vault-preview-answer .vault-answer-term {
        font-size: clamp(3rem, 16vw, 5.8rem);
    }

    .vault-preview-answer > em,
    .vault-preview-answer .vault-answer-korean {
        font-size: clamp(1.2rem, 6vw, 2rem);
    }

    .vault-preview-stage.is-round-complete .vault-preview-answer {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px 22px;
        min-height: clamp(130px, 24vh, 210px);
    }

    .vault-preview-stage.is-round-complete .vault-preview-answer .vault-answer-term {
        overflow-wrap: break-word;
        word-break: normal;
        font-size: clamp(1.85rem, 8.7vw, 3.3rem);
    }

    .vault-preview-stage.is-round-complete .vault-result-value {
        justify-self: center;
        padding-top: 12px;
        padding-left: 0;
        border-top: 2px solid rgba(255, 222, 126, 0.58);
        border-left: 0;
    }

    .vault-preview-stage.is-round-complete .vault-result-value::before {
        left: 12%;
        right: 12%;
        top: -7px;
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(255, 246, 196, 0.82), transparent);
    }

    .vault-preview-stage.is-round-complete .vault-preview-question {
        max-width: min(20ch, 100%);
        font-size: clamp(1.62rem, 7.6vw, 3.8rem);
    }

    .vault-preview-stage.is-round-complete .vault-result-value strong {
        font-size: clamp(2.7rem, 14vw, 4.7rem);
    }

    .vault-preview-control-dock {
        justify-content: center;
        gap: 10px;
    }

	.vault-preview-control-dock .vault-control-row {
		justify-content: center;
	}

	.vault-bank-heisted-callout {
		gap: 10px;
		padding: 18px 16px 20px;
	}

	.vault-bank-heisted-callout.is-overlay {
		width: min(360px, calc(100% - 20px));
	}

	.vault-bank-heisted-callout strong {
		font-size: 1.55rem;
	}

	.vault-results-button {
		width: 100%;
		min-width: 0;
	}

	.vault-preview-timer {
		justify-self: center;
	}

    .vault-host-actions > *,
    .vault-control-row > * {
        width: auto;
    }

    .vault-host-actions .secondary-button {
        min-width: 78px;
        min-height: 40px;
        padding-inline: 12px;
        font-size: 0.9rem;
    }

    .vault-chooser-pill {
        min-width: 0;
        justify-content: center;
        padding-inline: 10px;
    }

    .vault-control-row {
        align-items: center;
        justify-content: start;
        gap: 8px;
    }

    .vault-control-row .primary-button,
    .vault-control-row .secondary-button {
        min-height: 42px;
        padding-inline: 14px;
        font-size: 0.9rem;
    }

    .vault-player-head {
        display: grid;
        grid-template-columns: minmax(112px, 1fr) minmax(0, 0.82fr) minmax(0, 0.82fr);
        gap: 8px;
    }

    .vault-player-meter-stack {
        display: contents;
    }

    .vault-player-score,
    .vault-player-vault,
    .vault-player-timer {
        min-height: 76px;
        padding: 10px 11px;
    }

    .vault-player-score {
        justify-items: center;
        text-align: center;
    }

    .vault-player-vault,
    .vault-player-timer {
        justify-items: center;
        justify-content: center;
        text-align: center;
    }

    .vault-player-score span,
    .vault-player-vault span,
    .vault-player-timer span {
        font-size: 0.7rem;
    }

    .vault-player-score strong {
        font-size: 2.18rem;
    }

    .vault-player-vault strong {
        font-size: 1.7rem;
    }

    .vault-player-timer strong {
        font-size: 2.2rem;
    }

    .vault-player-timer {
        gap: 5px;
    }

    .vault-player-timer > .vault-player-crack-label {
        min-width: 29px;
        padding: 4px 6px;
        font-size: 0.66rem;
    }

    .vault-player-timer .vault-timer-ring {
        width: clamp(54px, 15vw, 66px);
    }

    .vault-player-timer .vault-timer-ring span {
        font-size: clamp(1.18rem, 5.4vw, 1.65rem);
    }

    .vault-player-vault .vault-massive-loot-badge {
        padding-inline: 4px;
        font-size: 0.5rem;
    }

    .vault-scanner-panel,
    .vault-scanner-panel.has-scanner {
        grid-template-columns: minmax(0, 1fr);
    }

    .vault-scanner-button {
        min-height: 58px;
        width: 100%;
    }

    .vault-feedback {
        min-height: 42px;
        padding-block: 8px;
        text-align: center;
    }

    .vault-feedback.has-award-breakdown {
        justify-items: center;
    }

    .vault-feedback.has-selected-code {
        justify-items: center;
        min-height: 44px;
        text-align: center;
    }

    .vault-selected-code-main {
        max-width: 100%;
        justify-content: center;
    }

    .vault-selected-code-word {
        max-width: min(20ch, 44vw);
        font-size: 0.94rem;
    }

    .vault-feedback-badges {
        justify-content: center;
    }

    .vault-score-chip {
        min-height: 22px;
        padding: 4px 7px;
        font-size: 0.68rem;
    }

    .vault-choice-grid,
    .vault-choice-grid.is-medium {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(76px, 1fr);
        gap: 8px;
    }

    .vault-choice-grid.is-compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: minmax(54px, 1fr);
        gap: 6px;
    }

    .vault-view-root.is-scanning .vault-choice-grid.is-compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: minmax(54px, 1fr);
    }

    .vault-choice-grid.is-focused {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(88px, 1fr);
    }

    .vault-choice-button {
        min-height: 76px;
        padding: 9px 10px;
    }

    .vault-choice-button.has-locks {
        padding-top: 28px;
    }

    .vault-choice-grid.is-compact .vault-choice-button {
        min-height: 54px;
        padding: 7px 6px;
        gap: 2px;
    }

    .vault-choice-grid.is-compact .vault-choice-button.has-locks {
        padding-top: 21px;
    }

    .vault-choice-answer,
    .vault-choice-grid.is-medium .vault-choice-answer {
        font-size: 1.12rem;
    }

    .vault-choice-grid.is-compact .vault-choice-answer {
        font-size: clamp(0.78rem, 3.2vw, 0.94rem);
        line-height: 1.02;
        -webkit-line-clamp: 2;
    }

    .vault-choice-grid.is-compact .vault-choice-korean {
        font-size: 0.68rem;
        line-height: 1.05;
    }

    .vault-view-root.is-scanning .vault-choice-grid.is-compact .vault-choice-korean {
        max-height: 1.08em;
        font-size: clamp(0.56rem, 2.35vw, 0.64rem);
        line-height: 1.02;
        -webkit-line-clamp: 1;
    }

    .vault-choice-grid.is-focused .vault-choice-answer {
        font-size: 1.24rem;
    }

    .vault-choice-lock {
        top: 6px;
        right: 6px;
        font-size: 0.62rem;
    }

    .vault-choice-grid.is-compact .vault-choice-lock {
        top: 4px;
        right: 4px;
        min-height: 15px;
        max-width: calc(100% - 8px);
        padding: 2px 5px;
        font-size: 0.5rem;
    }

    .vault-award-pop {
        inset: auto 10px 12px 10px;
    }

    .vault-award-card {
        width: min(340px, calc(100vw - 20px));
        padding: 12px 14px;
    }

    .vault-award-card > strong {
        font-size: 2.45rem;
    }

    .vault-award-parts {
        gap: 4px;
    }

    .vault-award-parts .vault-score-chip {
        font-size: 0.72rem;
    }

    .vault-category-cell {
        min-height: 44px;
        font-size: 0.74rem;
    }
}

@media (max-width: 420px) {
    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-board-grid {
        gap: 4px;
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell {
        padding-inline: 4px;
        font-size: clamp(0.54rem, 2.2vw, 0.68rem);
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button > .vault-tile-value {
        font-size: clamp(0.96rem, 5.05vw, 1.24rem);
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button .vault-massive-loot-badge {
        font-size: clamp(0.32rem, 1.38vw, 0.4rem);
    }

    .vault-host-actions {
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    .vault-chooser-pill {
        grid-column: 1 / -1;
    }

    .vault-player-head {
        grid-template-columns: minmax(96px, 1.05fr) minmax(0, 0.82fr) minmax(0, 0.82fr);
    }

    .vault-player-score {
        grid-column: auto;
        min-height: 64px;
    }

    .vault-player-score,
    .vault-player-vault,
    .vault-player-timer {
        min-width: 0;
    }

    .vault-player-vault,
    .vault-player-timer {
        min-height: 64px;
        padding-inline: 6px;
    }

    .vault-player-score strong {
        font-size: 1.9rem;
    }

    .vault-player-vault strong,
    .vault-player-timer strong {
        font-size: 1.55rem;
    }

    .vault-player-vault strong:has(.vault-value-modifiers) {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex-direction: column;
        gap: 2px;
    }

    .vault-player-vault .vault-value-modifiers {
        max-width: 100%;
        justify-items: center;
        gap: 2px;
    }

    .vault-player-vault .vault-growing-stash-worth,
    .vault-player-vault .vault-diamond-worth {
        box-sizing: border-box;
        max-width: 100%;
    }
}

/* Vault Breakers motion pass: clear one-shot surface changes and state-color transitions only. */
.vault-view-root.is-vault-motion-enabled .vault-stage-card,
.vault-view-root.is-vault-motion-enabled .vault-choice-card,
.vault-view-root.is-vault-motion-enabled .vault-feedback,
.vault-view-root.is-vault-motion-enabled .vault-team-row,
.vault-view-root.is-vault-motion-enabled .vault-player-score,
.vault-view-root.is-vault-motion-enabled .vault-player-vault,
.vault-view-root.is-vault-motion-enabled .vault-player-timer {
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease,
        opacity 180ms ease;
}

.vault-view-root.is-vault-motion-enabled .vault-team-status-led,
.vault-view-root.is-vault-motion-enabled .vault-crack-dot,
.vault-view-root.is-vault-motion-enabled .vault-score-chip {
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease,
        opacity 160ms ease;
}

.vault-view-root.is-vault-motion-enabled .vault-stage-card.is-vault-surface-entering,
.vault-view-root.is-vault-motion-enabled .vault-choice-card.is-vault-surface-entering {
    animation: vaultSurfaceSettle var(--ziar-vault-surface-settle-ms, 520ms) cubic-bezier(0.16, 0.84, 0.24, 1) both;
    animation-delay: var(--vault-surface-settle-delay, 0ms);
    will-change: opacity, transform, filter;
}

@keyframes vaultSurfaceSettle {
    from {
        opacity: 0.76;
        filter: blur(0.7px) saturate(0.88) brightness(0.94);
        transform: translate3d(0, 12px, 0);
    }
    62% {
        opacity: 1;
        filter: none;
        transform: translate3d(0, -1px, 0);
    }
    to {
        opacity: 1;
        filter: none;
        transform: translate3d(0, 0, 0);
    }
}

html.ziar-vault-motion-disabled .vault-view-root,
html.ziar-vault-motion-disabled .vault-view-root *,
html.ziar-vault-motion-disabled .vault-view-root *::before,
html.ziar-vault-motion-disabled .vault-view-root *::after,
.vault-view-root.is-vault-motion-disabled,
.vault-view-root.is-vault-motion-disabled *,
.vault-view-root.is-vault-motion-disabled *::before,
.vault-view-root.is-vault-motion-disabled *::after,
html.ziar-vault-motion-disabled .final-results-shell.is-vault-results,
html.ziar-vault-motion-disabled .final-results-shell.is-vault-results *,
html.ziar-vault-motion-disabled .final-results-shell.is-vault-results *::before,
html.ziar-vault-motion-disabled .final-results-shell.is-vault-results *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

html.ziar-vault-motion-disabled .vault-massive-loot-particle,
.vault-view-root.is-vault-motion-disabled .vault-massive-loot-particle {
    opacity: 0 !important;
}

html.ziar-vault-motion-disabled .vault-score-popup,
.vault-view-root.is-vault-motion-disabled .vault-score-popup {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(1);
}

html.ziar-vault-motion-disabled .vault-chooser-spotlight,
.vault-view-root.is-vault-motion-disabled .vault-chooser-spotlight {
    opacity: 1;
    transform: none;
}

html.ziar-vault-motion-disabled .vault-chooser-spotlight::before,
html.ziar-vault-motion-disabled .vault-chooser-spotlight-panel,
.vault-view-root.is-vault-motion-disabled .vault-chooser-spotlight::before,
.vault-view-root.is-vault-motion-disabled .vault-chooser-spotlight-panel {
    opacity: 1;
    transform: none;
}

html.ziar-vault-motion-disabled .vault-chooser-dial,
.vault-view-root.is-vault-motion-disabled .vault-chooser-dial {
    opacity: 1;
    transform: translateY(var(--vault-chooser-dial-offset));
}

html.ziar-vault-motion-disabled .vault-award-card,
.vault-view-root.is-vault-motion-disabled .vault-award-card {
    opacity: 1;
    transform: none;
}

html.ziar-vault-motion-disabled .final-results-shell.is-vault-results .final-result-place {
    opacity: 1;
    transform: translateY(var(--final-result-y)) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.vault-view-root.is-vault-motion-enabled .vault-stage-card.is-vault-surface-entering,
	.vault-view-root.is-vault-motion-enabled .vault-choice-card.is-vault-surface-entering {
		animation: none;
	}
}

/* Vault Breakers visual clarity pass: richer depth, stronger action hierarchy, and scannable state color. */
.vault-view-root {
	--vault-loot-bright: #ffe9a3;
	--vault-loot: #f5c95f;
	--vault-security: #91f7dd;
	--vault-security-soft: rgba(145, 247, 221, 0.22);
	background:
		radial-gradient(circle at 52% -12%, rgba(132, 96, 196, 0.16), transparent 34%),
		radial-gradient(circle at 92% 18%, rgba(145, 247, 221, 0.045), transparent 24%),
		linear-gradient(180deg, rgba(15, 11, 22, 0.42), rgba(5, 4, 8, 0.18));
}

.vault-board-card,
.vault-host-join-card,
.vault-score-card,
.vault-choice-card,
.vault-player-score,
.vault-player-vault,
.vault-player-timer,
.vault-feedback {
	border-radius: 12px;
}

.vault-stage-card,
.vault-choice-card,
.vault-score-card,
.vault-host-join-card {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		inset 0 0 0 1px rgba(255, 255, 255, 0.018),
		0 22px 48px rgba(0, 0, 0, 0.3);
}

.vault-stage-card:not(:has(.vault-preview-stage)) {
	background:
		radial-gradient(circle at 50% -8%, rgba(255, 222, 126, 0.07), transparent 28%),
		linear-gradient(118deg, rgba(255, 255, 255, 0.028), transparent 18% 100%),
		linear-gradient(180deg, rgba(19, 15, 27, 0.98), rgba(7, 6, 10, 0.99));
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell {
	border-color: rgba(255, 222, 126, 0.42);
	background:
		linear-gradient(112deg, rgba(255, 255, 255, 0.12), transparent 22% 100%),
		radial-gradient(circle at 50% 0%, rgba(255, 226, 139, 0.13), transparent 54%),
		linear-gradient(180deg, rgba(54, 43, 27, 0.97), rgba(19, 14, 11, 0.99));
	box-shadow:
		inset 0 1px 0 rgba(255, 250, 221, 0.22),
		inset 0 -3px 0 rgba(196, 147, 42, 0.2),
		0 8px 18px rgba(0, 0, 0, 0.2);
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-title {
	color: #fff5ce;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button {
	border-width: 1.5px;
	border-color: rgba(169, 135, 255, 0.28);
	background:
		linear-gradient(118deg, rgba(255, 255, 255, 0.075), transparent 24% 100%),
		radial-gradient(circle at 50% -18%, rgba(169, 135, 255, 0.14), transparent 48%),
		linear-gradient(180deg, rgba(37, 29, 49, 0.98), rgba(12, 9, 18, 0.99));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -2px 0 rgba(0, 0, 0, 0.42),
		0 8px 16px rgba(0, 0, 0, 0.16);
}

.vault-stage-card:not(:has(.vault-preview-stage))
	.vault-tile-button:not(.is-locked):not(.is-cleared)
	.vault-display-money:not(.is-diamond) {
	color: var(--vault-loot-bright);
	text-shadow:
		0 1px 0 rgba(0, 0, 0, 0.72),
		0 0 18px rgba(245, 201, 95, 0.08);
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button.is-locked {
	border-color: rgba(122, 112, 139, 0.19);
	background:
		linear-gradient(118deg, rgba(255, 255, 255, 0.028), transparent 22% 100%),
		linear-gradient(180deg, rgba(20, 18, 25, 0.97), rgba(9, 8, 12, 0.99));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button:not(:disabled):hover,
.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button:not(:disabled):focus-visible {
	transform: translateY(-2px);
	border-color: rgba(255, 235, 174, 0.68);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		0 14px 28px rgba(0, 0, 0, 0.28),
		0 0 0 1px rgba(245, 201, 95, 0.12);
}

.vault-preview-stage {
	position: relative;
	isolation: isolate;
	border-radius: 12px;
}

.vault-preview-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(rgba(228, 217, 255, 0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(228, 217, 255, 0.018) 1px, transparent 1px),
		radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.035), transparent 38%);
	background-size:
		28px 28px,
		28px 28px,
		auto;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.62), transparent 78%);
}

.vault-preview-stage.is-success::before {
	background:
		linear-gradient(rgba(196, 255, 220, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(196, 255, 220, 0.025) 1px, transparent 1px),
		radial-gradient(circle at 50% 46%, rgba(145, 247, 221, 0.08), transparent 44%);
	background-size:
		28px 28px,
		28px 28px,
		auto;
}

.vault-reveal-button {
	min-width: clamp(132px, 13vw, 188px);
	min-height: 48px;
	padding-inline: clamp(22px, 2.5vw, 34px);
	border-color: rgba(255, 239, 188, 0.72) !important;
	background:
		linear-gradient(120deg, rgba(255, 255, 255, 0.3), transparent 28% 100%),
		linear-gradient(180deg, #ffe187, #d99a28) !important;
	color: #251706 !important;
	font-weight: 950;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.68),
		inset 0 -3px 0 rgba(112, 66, 8, 0.28),
		0 12px 26px rgba(219, 157, 40, 0.2) !important;
}

.vault-reveal-button:hover,
.vault-reveal-button:focus-visible {
	border-color: #fff6d7 !important;
	filter: brightness(1.05);
}

.vault-player-score,
.vault-player-vault,
.vault-player-timer {
	font-variant-numeric: tabular-nums;
	border-bottom-width: 2px;
}

.vault-player-score {
	border-bottom-color: rgba(190, 171, 255, 0.56);
}

.vault-player-vault {
	border-bottom-color: rgba(255, 222, 126, 0.56);
}

.vault-player-vault > span {
	color: rgba(255, 232, 166, 0.88);
}

.vault-player-timer {
	border-bottom-color: rgba(145, 247, 221, 0.5);
}

.vault-choice-card {
	background:
		radial-gradient(circle at 14% 0%, rgba(169, 135, 255, 0.09), transparent 30%),
		linear-gradient(118deg, rgba(255, 255, 255, 0.03), transparent 18% 100%),
		linear-gradient(180deg, rgba(22, 17, 30, 0.98), rgba(7, 6, 10, 0.99));
}

.vault-choice-button {
	border-radius: 10px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -2px 0 rgba(0, 0, 0, 0.34),
		0 8px 16px rgba(0, 0, 0, 0.13);
}

.vault-choice-button:not(.is-selected):not(:disabled)::before {
	content: "";
	position: absolute;
	right: 18%;
	bottom: 0;
	left: 18%;
	height: 2px;
	border-radius: 999px 999px 0 0;
	background: linear-gradient(90deg, transparent, rgba(190, 171, 255, 0.46), transparent);
	opacity: 0.58;
}

.vault-choice-button.is-selected {
	border-color: rgba(145, 247, 221, 0.72);
	background:
		linear-gradient(116deg, rgba(255, 255, 255, 0.12), transparent 24% 100%),
		radial-gradient(circle at 50% 0%, rgba(145, 247, 221, 0.17), transparent 54%),
		linear-gradient(180deg, rgba(45, 67, 73, 0.98), rgba(17, 28, 35, 0.99));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		inset 0 -2px 0 rgba(31, 105, 88, 0.34),
		0 10px 24px rgba(64, 214, 178, 0.12);
}

.vault-scanner-button {
	border-radius: 10px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.11),
		inset 0 -2px 0 rgba(0, 0, 0, 0.32),
		0 8px 18px rgba(0, 0, 0, 0.16);
}

.vault-team-row {
	font-variant-numeric: tabular-nums;
	box-shadow:
		inset 3px 0 0 rgba(169, 135, 255, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.055),
		0 7px 14px rgba(0, 0, 0, 0.1);
}

.vault-team-row.is-status-armed {
	box-shadow:
		inset 3px 0 0 rgba(255, 214, 126, 0.72),
		inset 0 1px 0 rgba(255, 255, 255, 0.07),
		0 7px 16px rgba(0, 0, 0, 0.12);
}

.vault-team-row.is-status-cracking {
	box-shadow:
		inset 3px 0 0 rgba(255, 141, 239, 0.68),
		inset 0 1px 0 rgba(255, 255, 255, 0.07),
		0 7px 16px rgba(0, 0, 0, 0.12);
}

.vault-team-row.is-solved {
	box-shadow:
		inset 3px 0 0 rgba(145, 247, 221, 0.68),
		inset 0 1px 0 rgba(255, 255, 255, 0.07),
		0 7px 16px rgba(0, 0, 0, 0.12);
}

.vault-team-row.is-status-failed,
.vault-team-row.is-away {
	box-shadow:
		inset 3px 0 0 rgba(255, 111, 134, 0.64),
		inset 0 1px 0 rgba(255, 255, 255, 0.055),
		0 7px 16px rgba(0, 0, 0, 0.12);
}

.vault-team-score {
	color: rgba(250, 247, 255, 0.92);
	font-weight: 850;
}

@media (min-width: 721px) {
	.vault-choice-grid {
		grid-auto-rows: minmax(clamp(96px, 12vh, 132px), 1fr);
	}

	.vault-choice-grid.is-compact {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vault-choice-grid.is-medium {
		grid-auto-rows: minmax(clamp(100px, 13vh, 140px), 1fr);
	}
}

@media (min-width: 1000px) {
	.vault-choice-grid.is-compact {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.vault-reveal-button {
		min-width: min(52vw, 210px);
		min-height: 50px;
	}

	.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button:not(:disabled):hover,
	.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button:not(:disabled):focus-visible {
		transform: none;
	}

	.vault-choice-button {
		border-radius: 9px;
	}
}

/* Shared measured roster ladder: roomy one column, fitted one column, roomy two columns, fitted two columns, then scroll. */
#app .roster-list.player-roster.player-roster-columns-1,
#app .participant-list.player-roster.player-roster-columns-1 {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

#app .roster-list.player-roster.player-roster-columns-2,
#app .participant-list.player-roster.player-roster-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

#app .player-roster.player-roster-space-roomy {
    --player-roster-gap: 9px;
    --player-roster-row-min: clamp(76px, 8.4svh, 96px);
    --player-roster-row-padding-y: 10px;
    --player-roster-row-padding-x: 10px;
    --player-roster-name-font-size: var(--ziar-player-roster-roomy-name-font-size, 1.1rem);
    --player-roster-badge-font-size: 0.62rem;
    --player-roster-badge-min-height: 20px;
}

#app .player-roster.player-roster-single.player-roster-space-roomy,
#app .player-roster.player-roster-columns-1.player-roster-space-roomy:has(> :only-child) {
    --player-roster-row-min: clamp(96px, 13svh, 124px);
    --player-roster-row-padding-y: 14px;
    --player-roster-name-font-size: var(--ziar-player-roster-single-roomy-name-font-size, 1.22rem);
    --player-roster-badge-font-size: 0.68rem;
}

#app .player-roster.player-roster-space-tight {
    --player-roster-gap: 4px;
    --player-roster-row-min: 40px;
    --player-roster-row-padding-y: 4px;
    --player-roster-row-padding-x: 7px;
    --player-roster-name-font-size: 0.78rem;
    --player-roster-badge-font-size: 0.54rem;
    --player-roster-badge-min-height: 16px;
}

#app .player-roster.player-roster-fills-height.player-roster-space-tight {
    --player-roster-name-font-size: clamp(1rem, 2.25svh, 1.14rem);
}

#app .vault-team-list.player-roster-fills-height.player-roster-space-tight .vault-team-score {
    font-size: clamp(0.92rem, 2.05svh, 1.04rem);
}

#app .player-roster.player-roster-fills-height {
    height: var(--player-roster-fit-height);
    grid-auto-rows: minmax(var(--player-roster-row-min), 1fr);
    align-content: stretch;
}

#app .player-roster-needs-scroll {
    max-height: var(--player-roster-available-height);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Picture Detectives clarity pass: preserve the canvas while making every playable control read as an action or state. */
#app.theme-pictionary .pictionary-console--player {
    border-color: rgba(255, 244, 209, 0.24);
    background:
        radial-gradient(circle at 10% 0%, rgba(224, 188, 88, 0.09), transparent 32%),
        linear-gradient(180deg, rgba(24, 35, 41, 0.94), rgba(12, 20, 26, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -1px 0 rgba(0, 0, 0, 0.38),
        0 22px 38px rgba(0, 0, 0, 0.28);
}

#app.theme-pictionary .pictionary-inline-chip--lives {
    border-color: rgba(213, 179, 93, 0.28);
    background: linear-gradient(180deg, rgba(57, 54, 40, 0.88), rgba(25, 32, 32, 0.92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 6px 12px rgba(0, 0, 0, 0.12);
}

#app.theme-pictionary .pictionary-inline-chip--worth {
    border-color: rgba(140, 225, 217, 0.24);
    background: linear-gradient(180deg, rgba(32, 55, 57, 0.86), rgba(21, 34, 38, 0.92));
}

.pictionary-life-strip {
    gap: 5px;
}

#app.theme-pictionary .pictionary-guess-shell input {
    border-color: rgba(238, 233, 213, 0.24);
    background: linear-gradient(180deg, rgba(255, 255, 251, 0.98), rgba(240, 239, 229, 0.98));
    color: #19262b;
    box-shadow:
        inset 0 1px 2px rgba(22, 30, 34, 0.08),
        0 7px 16px rgba(0, 0, 0, 0.14);
}

#app.theme-pictionary .pictionary-guess-shell input::placeholder {
    color: rgba(43, 59, 63, 0.58);
}

#app.theme-pictionary .pictionary-guess-field.has-draft .pictionary-guess-shell input {
    border-color: rgba(213, 179, 93, 0.72);
    box-shadow:
        inset 0 1px 2px rgba(22, 30, 34, 0.06),
        0 0 0 3px rgba(213, 179, 93, 0.13),
        0 8px 18px rgba(0, 0, 0, 0.16);
}

#app.theme-pictionary .pictionary-guess-shell:focus-within input {
    border-color: rgba(120, 226, 219, 0.82);
    box-shadow:
        inset 0 1px 2px rgba(22, 30, 34, 0.04),
        0 0 0 4px rgba(96, 219, 211, 0.16),
        0 9px 20px rgba(0, 0, 0, 0.17);
}

#app.theme-pictionary .pictionary-guess-button,
#app.theme-pictionary .pictionary-next-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-right: 42px;
    overflow: hidden;
    border-color: rgba(255, 238, 174, 0.74);
    background:
        linear-gradient(110deg, rgba(255, 255, 255, 0.24), transparent 32%),
        linear-gradient(180deg, #ffe7a1, #e8b947 58%, #c98b20);
    color: #261705;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.52),
        inset 0 -3px 0 rgba(118, 68, 10, 0.24),
        0 10px 20px rgba(105, 65, 11, 0.22);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
    transition:
        transform 130ms ease,
        filter 150ms ease,
        box-shadow 150ms ease,
        border-color 150ms ease;
}

#app.theme-pictionary .pictionary-guess-button::after,
#app.theme-pictionary .pictionary-next-button::after {
    content: "\2192";
    position: absolute;
    right: 14px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(57, 31, 3, 0.12);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1;
    transform: translateY(-50%);
    transition:
        transform 130ms ease,
        background 150ms ease;
}

#app.theme-pictionary .pictionary-guess-button:not(:disabled):hover,
#app.theme-pictionary .pictionary-guess-button:focus-visible,
#app.theme-pictionary .pictionary-next-button:not(:disabled):hover,
#app.theme-pictionary .pictionary-next-button:focus-visible {
    border-color: rgba(255, 248, 211, 0.96);
    filter: saturate(1.06) brightness(1.04);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -3px 0 rgba(118, 68, 10, 0.2),
        0 0 0 4px rgba(213, 179, 93, 0.14),
        0 13px 24px rgba(105, 65, 11, 0.27);
}

#app.theme-pictionary .pictionary-guess-button:not(:disabled):hover::after,
#app.theme-pictionary .pictionary-guess-button:focus-visible::after,
#app.theme-pictionary .pictionary-next-button:not(:disabled):hover::after,
#app.theme-pictionary .pictionary-next-button:focus-visible::after {
    background: rgba(57, 31, 3, 0.18);
    transform: translate(2px, -50%);
}

#app.theme-pictionary .pictionary-guess-button:not(:disabled):active,
#app.theme-pictionary .pictionary-next-button:not(:disabled):active {
    filter: saturate(1.02) brightness(0.98);
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 2px rgba(106, 61, 7, 0.18),
        inset 0 -1px 0 rgba(255, 255, 255, 0.22),
        0 5px 11px rgba(86, 50, 7, 0.2);
}

#app.theme-pictionary .pictionary-guess-button:disabled,
#app.theme-pictionary .pictionary-next-button:disabled {
    border-color: rgba(226, 219, 194, 0.2);
    background: linear-gradient(180deg, rgba(68, 70, 65, 0.9), rgba(42, 47, 47, 0.92));
    color: rgba(245, 241, 226, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    text-shadow: none;
}

#app.theme-pictionary .pictionary-guess-button:disabled::after,
#app.theme-pictionary .pictionary-next-button:disabled::after {
    opacity: 0.34;
}

#app.theme-pictionary .pictionary-player-board-card {
    border-color: rgba(229, 211, 153, 0.22);
    background:
        linear-gradient(90deg, rgba(213, 179, 93, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(213, 179, 93, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(31, 44, 50, 0.88), rgba(13, 21, 27, 0.98));
    background-size: 22px 22px, 22px 22px, auto;
    box-shadow:
        inset 3px 0 0 rgba(213, 179, 93, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 13px 24px rgba(0, 0, 0, 0.16);
}

.pictionary-player-word-bank-count {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 6px 12px rgba(0, 0, 0, 0.16);
}

.pictionary-player-word-bank-chip {
    position: relative;
    overflow: hidden;
    border-color: rgba(235, 223, 184, 0.2);
    background: linear-gradient(180deg, rgba(255, 253, 243, 0.1), rgba(223, 196, 118, 0.055));
    box-shadow:
        inset 3px 0 0 rgba(213, 179, 93, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 6px 12px rgba(0, 0, 0, 0.1);
}

#app.theme-pictionary .pictionary-controller-picker-panel {
    border-color: rgba(228, 207, 145, 0.22);
    background:
        radial-gradient(circle at 50% 0%, rgba(213, 179, 93, 0.055), transparent 34%),
        linear-gradient(180deg, rgba(20, 30, 35, 0.78), rgba(10, 17, 22, 0.72));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 18px 34px rgba(0, 0, 0, 0.18);
}

#app.theme-pictionary .pictionary-stepper-button,
#app.theme-pictionary .pictionary-segmented-button,
#app.theme-pictionary .pictionary-entry-button {
    transition:
        transform 120ms ease,
        border-color 140ms ease,
        background 140ms ease,
        color 140ms ease,
        box-shadow 140ms ease;
}

#app.theme-pictionary .pictionary-stepper-button {
    border-color: rgba(238, 231, 207, 0.22);
    background: linear-gradient(180deg, rgba(32, 44, 50, 0.98), rgba(12, 20, 25, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -2px 0 rgba(0, 0, 0, 0.28);
}

#app.theme-pictionary .pictionary-stepper-button:not(:disabled):hover,
#app.theme-pictionary .pictionary-stepper-button:focus-visible {
    border-color: rgba(255, 226, 143, 0.5);
    background: linear-gradient(180deg, rgba(61, 63, 50, 0.98), rgba(25, 33, 34, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 3px rgba(213, 179, 93, 0.11);
}

#app.theme-pictionary .pictionary-stepper-button:not(:disabled):active,
#app.theme-pictionary .pictionary-segmented-button:not(:disabled):active,
#app.theme-pictionary .pictionary-entry-button:not(:disabled):active {
    transform: translateY(1px) scale(0.99);
}

#app.theme-pictionary .pictionary-segmented-button {
    position: relative;
    font-weight: 800;
}

#app.theme-pictionary .pictionary-segmented-button.is-selected {
    border-color: rgba(255, 225, 139, 0.72);
    background:
        linear-gradient(110deg, rgba(255, 255, 255, 0.12), transparent 42%),
        linear-gradient(180deg, rgba(100, 87, 54, 0.98), rgba(40, 47, 40, 0.99));
    color: #fff7dc;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -2px 0 rgba(213, 179, 93, 0.26),
        0 7px 14px rgba(0, 0, 0, 0.18);
}

#app.theme-pictionary .pictionary-entry-button {
    border-color: rgba(238, 231, 207, 0.18);
    background: linear-gradient(180deg, rgba(34, 46, 52, 0.92), rgba(17, 25, 30, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 6px 12px rgba(0, 0, 0, 0.1);
}

#app.theme-pictionary .pictionary-entry-button:hover,
#app.theme-pictionary .pictionary-entry-button:focus-visible {
    border-color: rgba(248, 228, 163, 0.52);
    background: linear-gradient(180deg, rgba(52, 61, 61, 0.98), rgba(23, 31, 34, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 3px rgba(213, 179, 93, 0.1),
        0 9px 17px rgba(0, 0, 0, 0.16);
}

#app.theme-pictionary .pictionary-entry-button.is-selected {
    padding-right: 38px;
    border-color: rgba(255, 224, 133, 0.84);
    background:
        radial-gradient(circle at 94% 10%, rgba(255, 239, 179, 0.18), transparent 30%),
        linear-gradient(180deg, rgba(75, 73, 52, 0.98), rgba(27, 36, 35, 0.99));
    box-shadow:
        inset 4px 0 0 rgba(242, 197, 84, 0.82),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 10px 20px rgba(0, 0, 0, 0.2);
}

#app.theme-pictionary .pictionary-entry-button.is-selected::after {
    content: "\2713";
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 242, 190, 0.58);
    background: linear-gradient(180deg, #ffe69b, #d9a437);
    color: #2b1a04;
    font-size: 0.8rem;
    font-weight: 950;
    line-height: 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        0 5px 11px rgba(0, 0, 0, 0.2);
}

#app.theme-pictionary .pictionary-controller-current.is-highlighted {
    border-color: rgba(255, 223, 130, 0.7);
    background:
        radial-gradient(circle at 90% 4%, rgba(255, 240, 184, 0.2), transparent 30%),
        linear-gradient(180deg, rgba(56, 64, 56, 0.96), rgba(20, 29, 34, 0.99));
    box-shadow:
        inset 4px 0 0 rgba(225, 184, 77, 0.68),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(213, 179, 93, 0.15),
        0 17px 32px rgba(0, 0, 0, 0.25);
}

.pictionary-controller-private-content {
    padding-inline-end: 84px;
}

.pictionary-controller-reveal-cue {
    gap: 5px;
    padding-inline: 9px 10px;
}

.pictionary-controller-private-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

#app.theme-pictionary .pictionary-controller-current.is-private:hover .pictionary-controller-reveal-cue {
    border-color: rgba(255, 250, 222, 0.82);
    filter: brightness(1.05);
}

#app.theme-pictionary .pictionary-controller-close-button,
#app.theme-pictionary .pictionary-host-tool-button {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -2px 0 rgba(0, 0, 0, 0.24),
        0 7px 14px rgba(0, 0, 0, 0.12);
    transition:
        transform 120ms ease,
        border-color 140ms ease,
        background 140ms ease,
        box-shadow 140ms ease;
}

#app.theme-pictionary .pictionary-controller-close-button:not(:disabled):active,
#app.theme-pictionary .pictionary-host-tool-button:not(:disabled):active {
    transform: translateY(1px) scale(0.98);
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);
}

@media (max-width: 640px) {
    .pictionary-player-word-bank-head {
        left: 6px;
        right: 6px;
        width: auto;
    }

    .pictionary-player-word-bank-head .card-label {
        position: static !important;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
        border: 0 !important;
        color: rgba(246, 232, 190, 0.88);
        font-size: 0.58rem;
        font-weight: 850;
        letter-spacing: 0.11em;
        line-height: 1;
        white-space: nowrap !important;
    }

    .pictionary-player-word-bank-head .card-label::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 999px;
        background: #e2ba57;
        box-shadow: 0 0 8px rgba(226, 186, 87, 0.48);
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-life-token {
        width: 14px;
        height: 14px;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-life-icon {
        width: 12px;
        height: 12px;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-life-icon::before {
        font-size: 0.78rem;
    }

    .pictionary-shell.is-player-view.is-guessing .pictionary-life-risk {
        gap: 3px;
        min-width: 29px;
        min-height: 22px;
        padding-inline: 5px;
        font-size: 0.68rem;
    }

    #app.theme-pictionary .pictionary-guess-button,
    #app.theme-pictionary .pictionary-next-button {
        padding-right: 38px;
    }

    #app.theme-pictionary .pictionary-guess-button::after,
    #app.theme-pictionary .pictionary-next-button::after {
        right: 11px;
        width: 21px;
        height: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #app.theme-pictionary .pictionary-guess-button,
    #app.theme-pictionary .pictionary-next-button,
    #app.theme-pictionary .pictionary-stepper-button,
    #app.theme-pictionary .pictionary-segmented-button,
    #app.theme-pictionary .pictionary-entry-button,
    #app.theme-pictionary .pictionary-controller-close-button,
    #app.theme-pictionary .pictionary-host-tool-button {
        transition: none;
    }
}

/* Shared newcomer pass: make the next action and current state obvious across lobbies, results, and tools. */
.landing-tool-option {
    position: relative;
    padding-right: 58px;
    transition:
        transform 150ms ease,
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}

.landing-tool-option::after {
    content: "\2192";
    position: absolute;
    top: 50%;
    right: 20px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(157, 255, 248, 0.2);
    background: rgba(4, 20, 31, 0.52);
    color: #a9fff7;
    font-size: 1rem;
    font-weight: 900;
    transform: translateY(-50%);
    transition:
        transform 150ms ease,
        border-color 160ms ease,
        background 160ms ease;
}

.landing-tool-option:hover,
.landing-tool-option:focus-visible {
    border-color: rgba(157, 255, 248, 0.42);
    background:
        radial-gradient(circle at 12% 16%, rgba(31, 225, 209, 0.18), transparent 27%),
        linear-gradient(180deg, rgba(20, 61, 84, 0.84), rgba(7, 24, 37, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 4px rgba(31, 225, 209, 0.08),
        0 20px 38px rgba(0, 0, 0, 0.26);
}

.landing-tool-option:hover::after,
.landing-tool-option:focus-visible::after {
    border-color: rgba(169, 255, 247, 0.5);
    background: rgba(31, 225, 209, 0.16);
    transform: translate(2px, -50%);
}

.relic-mode-button,
.pictionary-mode-button,
.vault-mode-button {
    transition:
        transform 150ms ease,
        border-color 170ms ease,
        filter 170ms ease,
        box-shadow 170ms ease;
}

.relic-mode-button:hover,
.relic-mode-button:focus-visible,
.pictionary-mode-button:hover,
.pictionary-mode-button:focus-visible,
.vault-mode-button:hover,
.vault-mode-button:focus-visible {
    z-index: 1;
    filter: brightness(1.06) saturate(1.04);
    transform: translateY(-2px) scale(1.006);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 4px rgba(143, 250, 241, 0.09),
        0 27px 46px rgba(0, 0, 0, 0.32);
}

.relic-mode-button:hover::after,
.relic-mode-button:focus-visible::after,
.pictionary-mode-button:hover::after,
.pictionary-mode-button:focus-visible::after,
.vault-mode-button:hover::after,
.vault-mode-button:focus-visible::after {
    opacity: 0.9;
    transform: translateX(3px) rotate(-45deg);
}

.relic-mode-button:active,
.pictionary-mode-button:active,
.vault-mode-button:active {
    filter: brightness(0.99);
    transform: translateY(1px) scale(0.994);
}

.host-start-button {
    position: relative;
    padding-right: 48px;
    overflow: hidden;
    border-color: rgba(255, 237, 176, 0.68);
    background:
        linear-gradient(110deg, rgba(255, 255, 255, 0.22), transparent 34%),
        linear-gradient(180deg, #ffe7a1, #e8b947 58%, #ca8c20);
    color: #291905;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.52),
        inset 0 -3px 0 rgba(112, 63, 8, 0.22),
        0 10px 21px rgba(99, 59, 9, 0.22);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
    transition:
        transform 130ms ease,
        filter 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease;
}

.host-start-button:not(:disabled):not(.is-starting)::after {
    content: "\2192";
    position: absolute;
    top: 50%;
    right: 14px;
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border-radius: 999px;
    background: rgba(57, 31, 3, 0.12);
    font-weight: 950;
    transform: translateY(-50%);
    transition:
        transform 130ms ease,
        background 150ms ease;
}

.host-start-button:not(:disabled):not(.is-starting):hover,
.host-start-button:not(:disabled):not(.is-starting):focus-visible {
    border-color: rgba(255, 249, 219, 0.94);
    filter: brightness(1.04) saturate(1.05);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -3px 0 rgba(112, 63, 8, 0.18),
        0 0 0 4px rgba(226, 184, 80, 0.12),
        0 13px 25px rgba(99, 59, 9, 0.26);
}

.host-start-button:not(:disabled):not(.is-starting):hover::after,
.host-start-button:not(:disabled):not(.is-starting):focus-visible::after {
    background: rgba(57, 31, 3, 0.18);
    transform: translate(2px, -50%);
}

.host-start-button:not(:disabled):not(.is-starting):active {
    filter: brightness(0.98);
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 2px rgba(100, 57, 7, 0.16),
        0 5px 11px rgba(83, 48, 7, 0.2);
}

.host-start-button:disabled:not(.is-starting) {
    border-color: rgba(230, 224, 205, 0.18);
    background: linear-gradient(180deg, rgba(73, 76, 72, 0.9), rgba(43, 48, 48, 0.94));
    color: rgba(246, 242, 228, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    text-shadow: none;
}

.host-presence-name-button,
.room-qr-button,
.host-qr-copy-link-button {
    transition:
        transform 130ms ease,
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}

.host-presence-name-button:hover,
.host-presence-name-button:focus-visible {
    border-color: color-mix(in srgb, var(--lobby-chip-border) 80%, white 34%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 4px rgba(124, 238, 231, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.14);
}

.host-presence-name-button:active,
.room-qr-button:active,
.host-qr-copy-link-button:active {
    transform: translateY(1px) scale(0.985);
}

.room-qr-button:hover,
.room-qr-button:focus-visible {
    transform: translateY(-2px);
}

.lobby-playground-viewer-status {
    display: none;
}

.lobby-playground-name-button.is-readonly {
    gap: 8px;
    min-width: 0;
    border-color: rgba(151, 247, 230, 0.24);
    background: linear-gradient(180deg, rgba(12, 42, 53, 0.9), rgba(5, 22, 31, 0.92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 8px 18px rgba(0, 0, 0, 0.16);
}

.lobby-playground-name-button.is-readonly .lobby-playground-viewer-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid rgba(151, 247, 230, 0.28);
    background: rgba(37, 201, 181, 0.13);
    color: #a8fff2;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    line-height: 1;
    text-transform: uppercase;
}

.lobby-playground-name-button.is-readonly .lobby-playground-viewer-name {
    color: #f2fffc;
    font-weight: 850;
}

.player-lobby-grid .lobby-playground-title {
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid rgba(150, 255, 247, 0.16);
    background: rgba(4, 20, 31, 0.58);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 8px 18px rgba(0, 0, 0, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.lobby-playground-mode {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
}

.lobby-playground-mode::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 15%, transparent);
    animation: shared-waiting-pulse 1800ms ease-in-out infinite;
}

.player-lobby-grid .lobby-playground-stage {
    cursor: pointer;
}

.player-lobby-grid .lobby-playground-stage:focus-visible {
    outline: 2px solid rgba(151, 247, 230, 0.52);
    outline-offset: -3px;
    box-shadow: inset 0 0 0 4px rgba(43, 215, 198, 0.08);
}

.final-results-actions {
    gap: 8px;
}

.final-results-continue-button {
    position: relative;
    max-width: calc(100vw - 28px);
    min-height: 46px;
    padding: 0 48px 0 20px;
    overflow: hidden;
    border-color: rgba(144, 246, 229, 0.28);
    background:
        linear-gradient(110deg, rgba(255, 255, 255, 0.08), transparent 38%),
        linear-gradient(180deg, rgba(31, 48, 55, 0.98), rgba(13, 25, 31, 0.99));
    color: #f3fffc;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        inset 0 -2px 0 rgba(0, 0, 0, 0.28),
        0 12px 24px rgba(0, 0, 0, 0.24);
    transition:
        transform 130ms ease,
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}

.final-results-continue-button::after {
    content: "\2192";
    position: absolute;
    top: 50%;
    right: 13px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 999px;
    background: rgba(118, 241, 222, 0.12);
    color: #a7fff2;
    font-weight: 950;
    transform: translateY(-50%);
    transition:
        transform 130ms ease,
        background 150ms ease;
}

.final-results-continue-button:hover,
.final-results-continue-button:focus-visible {
    border-color: rgba(157, 255, 240, 0.58);
    background:
        linear-gradient(110deg, rgba(255, 255, 255, 0.11), transparent 38%),
        linear-gradient(180deg, rgba(37, 63, 67, 0.99), rgba(13, 30, 34, 0.99));
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 4px rgba(96, 226, 207, 0.1),
        0 14px 28px rgba(0, 0, 0, 0.28);
}

.final-results-continue-button:hover::after,
.final-results-continue-button:focus-visible::after {
    background: rgba(118, 241, 222, 0.2);
    transform: translate(2px, -50%);
}

.final-results-continue-button:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 2px rgba(0, 0, 0, 0.22),
        0 5px 12px rgba(0, 0, 0, 0.2);
}

.final-results-waiting {
    gap: 8px;
}

.final-results-waiting::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
    animation: shared-waiting-pulse 1800ms ease-in-out infinite;
}

.player-result-row {
    box-shadow:
        inset 3px 0 0 color-mix(in srgb, currentColor 18%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 7px 14px rgba(0, 0, 0, 0.08);
}

.random-teams-config-card {
    border-color: rgba(150, 255, 247, 0.18);
    background:
        radial-gradient(circle at 16% 0%, rgba(31, 225, 209, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(16, 49, 70, 0.95), rgba(5, 22, 34, 0.99));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 20px 38px rgba(0, 0, 0, 0.22);
}

.random-teams-config-card.is-active-section {
    border-color: rgba(244, 200, 99, 0.62);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 4px 0 0 rgba(244, 200, 99, 0.54),
        0 0 0 1px rgba(244, 200, 99, 0.1),
        0 21px 40px rgba(0, 0, 0, 0.25),
        0 0 30px rgba(244, 192, 79, 0.1);
}

.random-teams-mode-toggle .mode-chip-button {
    font-weight: 850;
    transition:
        color 140ms ease,
        background 150ms ease,
        box-shadow 150ms ease,
        transform 120ms ease;
}

.random-teams-mode-toggle .mode-chip-button:not(.selected):hover,
.random-teams-mode-toggle .mode-chip-button:not(.selected):focus-visible {
    background: rgba(150, 255, 247, 0.08);
    color: #f2fffc;
}

.random-teams-mode-toggle .mode-chip-button:active {
    transform: scale(0.98);
}

.random-teams-mode-toggle .mode-chip-button.selected {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        inset 0 -2px 0 rgba(3, 95, 91, 0.24),
        0 8px 17px rgba(6, 29, 41, 0.26);
}

.random-teams-inline-field input {
    border-color: rgba(12, 35, 44, 0.22);
    box-shadow:
        inset 0 2px 3px rgba(4, 18, 26, 0.1),
        0 7px 15px rgba(0, 0, 0, 0.13);
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}

.random-teams-inline-field input:hover {
    border-color: rgba(74, 218, 206, 0.42);
}

.random-teams-inline-field input:focus-visible {
    border-color: rgba(74, 218, 206, 0.82);
    outline: 0;
    box-shadow:
        inset 0 1px 2px rgba(4, 18, 26, 0.07),
        0 0 0 4px rgba(31, 225, 209, 0.14),
        0 9px 18px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.random-teams-start-button {
    position: relative;
    padding-right: 50px;
    overflow: hidden;
    border-color: rgba(255, 238, 178, 0.72);
    background:
        linear-gradient(110deg, rgba(255, 255, 255, 0.24), transparent 34%),
        linear-gradient(180deg, #ffe7a2, #edbd4c 58%, #ca8d21);
    color: #281805;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.54),
        inset 0 -3px 0 rgba(112, 63, 8, 0.2),
        0 11px 22px rgba(99, 59, 9, 0.22);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
    transition:
        transform 130ms ease,
        filter 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease;
}

.random-teams-start-button::after {
    content: "\2192";
    position: absolute;
    top: 50%;
    right: 15px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 999px;
    background: rgba(57, 31, 3, 0.12);
    font-weight: 950;
    transform: translateY(-50%);
    transition:
        transform 130ms ease,
        background 150ms ease;
}

.random-teams-start-button.is-repeat-action {
    border-color: rgba(173, 255, 248, 0.56);
    text-shadow: none;
}

.random-teams-start-button.is-repeat-action::after {
    background: rgba(4, 44, 50, 0.14);
}

.random-teams-start-button:not(:disabled):hover,
.random-teams-start-button:focus-visible {
    border-color: rgba(255, 250, 221, 0.96);
    filter: brightness(1.04) saturate(1.04);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        0 0 0 4px rgba(232, 191, 89, 0.11),
        0 14px 26px rgba(99, 59, 9, 0.25);
}

.random-teams-start-button:not(:disabled):hover::after,
.random-teams-start-button:focus-visible::after {
    background: rgba(57, 31, 3, 0.18);
    transform: translate(2px, -50%);
}

.random-teams-start-button:not(:disabled):active {
    filter: brightness(0.98);
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 2px rgba(100, 57, 7, 0.17),
        0 5px 11px rgba(83, 48, 7, 0.2);
}

.random-teams-start-button:disabled {
    border-color: rgba(230, 224, 205, 0.18);
    background: linear-gradient(180deg, rgba(70, 76, 75, 0.86), rgba(39, 48, 49, 0.92));
    color: rgba(246, 242, 228, 0.54);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    text-shadow: none;
}

.random-teams-start-button.is-shuffling::after {
    content: "";
    width: 19px;
    height: 19px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: rgba(255, 255, 255, 0.92);
    background: transparent;
    animation: random-teams-button-spin 680ms linear infinite;
}

.random-teams-start-button.is-shuffling:disabled {
    border-color: rgba(173, 255, 248, 0.38);
    background: linear-gradient(135deg, rgba(31, 166, 163, 0.82), rgba(15, 112, 121, 0.88));
    color: rgba(237, 255, 252, 0.9);
}

@keyframes random-teams-button-spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

.random-teams-stage-controls > button,
.random-teams-stage-controls > .random-teams-late-add-anchor > button {
    position: relative;
    overflow: visible;
    transition:
        transform 120ms ease,
        border-color 140ms ease,
        background 140ms ease,
        color 140ms ease,
        box-shadow 140ms ease;
}

.random-teams-stage-controls > button::after,
.random-teams-stage-controls > .random-teams-late-add-anchor > button::after {
    content: attr(aria-label);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 20;
    width: max-content;
    max-width: min(190px, 72vw);
    padding: 6px 9px;
    border-radius: 9px;
    border: 1px solid rgba(151, 247, 230, 0.2);
    background: rgba(3, 17, 25, 0.96);
    color: #effffc;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.15;
    white-space: normal;
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -4px);
    transition:
        opacity 130ms ease,
        transform 130ms ease;
}

.random-teams-stage-controls > button:hover::after,
.random-teams-stage-controls > button:focus-visible::after,
.random-teams-stage-controls > .random-teams-late-add-anchor > button:hover::after,
.random-teams-stage-controls > .random-teams-late-add-anchor > button:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.random-teams-stage-controls > button:first-child::after {
    left: 0;
    transform: translate(0, -4px);
}

.random-teams-stage-controls > button:first-child:hover::after,
.random-teams-stage-controls > button:first-child:focus-visible::after {
    transform: translate(0, 0);
}

.random-teams-stage-controls > button:last-child::after {
    right: 0;
    left: auto;
    transform: translate(0, -4px);
}

.random-teams-stage-controls > button:last-child:hover::after,
.random-teams-stage-controls > button:last-child:focus-visible::after {
    transform: translate(0, 0);
}

.random-teams-stage-controls button[aria-pressed="true"],
.random-teams-stage-controls button.is-active {
    border-color: rgba(156, 255, 246, 0.58);
    background: rgba(31, 225, 209, 0.16);
    color: #eafffc;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 0 0 3px rgba(31, 225, 209, 0.08),
        0 9px 18px rgba(0, 0, 0, 0.2);
}

.random-teams-stage-controls button:not(:disabled):active {
    transform: translateY(1px) scale(0.97);
}

.member-token {
    cursor: grab;
}

.member-token:active {
    cursor: grabbing;
}

@media (min-width: 981px) {
    .random-teams-config-card {
        position: sticky;
        top: 14px;
    }
}

@media (max-width: 360px) {
    .random-teams-sentence {
        gap: 4px;
        font-size: 0.88rem;
    }

    .random-teams-stage {
        padding-right: 10px;
        padding-left: 10px;
    }

    .random-teams-stage-controls {
        left: 4px;
        gap: 2px;
    }

    .random-teams-fullscreen-button,
    .random-teams-sound-button,
    .random-teams-animation-button,
    .random-teams-excluded-floor-button,
    .random-teams-wipe-button,
    .random-teams-late-add-toggle,
    .random-teams-late-remove-toggle {
        width: 35px;
        height: 35px;
    }

    .random-teams-results-layout.is-order-mode,
    .is-random-teams-presenting .random-teams-results-layout.is-order-mode {
        grid-template-columns: 80px minmax(0, 1fr);
    }

    .random-teams-results-layout.is-order-mode .random-teams-floor-tray,
    .is-random-teams-presenting .random-teams-results-layout.is-order-mode .random-teams-floor-tray {
        padding-right: 6px;
        padding-left: 6px;
    }
}

@keyframes shared-waiting-pulse {
    0%,
    100% {
        opacity: 0.54;
        transform: scale(0.82);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 640px) {
    .player-lobby-grid .lobby-playground-stage-head {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        justify-items: stretch;
        gap: 8px;
    }

    .player-lobby-grid .lobby-playground-title {
        grid-row: 1;
        grid-column: 1;
        justify-self: start;
        max-width: 100%;
        min-width: 0;
        min-height: 38px;
        padding: 0 11px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 6px;
        font-size: 0.78rem;
        text-align: left;
    }

    .player-lobby-grid .lobby-playground-room-code {
        flex: 0 0 auto;
        font-size: 1rem;
    }

    .player-lobby-grid .lobby-playground-title-text,
    .player-lobby-grid .lobby-playground-title-divider {
        display: none;
    }

    .player-lobby-grid .lobby-playground-mode {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .player-lobby-grid .lobby-playground-name-button {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
        width: max-content;
        min-width: 120px;
        max-width: min(36vw, 150px);
        min-height: 38px;
        padding: 0 10px;
        font-size: 0.88rem;
    }

    .player-lobby-grid .lobby-playground-name-button.is-readonly {
        gap: 7px;
    }

    .player-lobby-grid .lobby-playground-name-button.is-readonly .lobby-playground-viewer-status {
        width: 7px;
        min-width: 7px;
        height: 7px;
        min-height: 7px;
        padding: 0;
        overflow: hidden;
        border: 0;
        background: currentColor;
        box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 15%, transparent);
        font-size: 0;
    }

    .player-lobby-grid .lobby-playground-stage-spacer {
        display: none;
    }

    .final-results-continue-button {
        min-height: 48px;
        padding-left: 17px;
        padding-right: 44px;
        font-size: 0.86rem;
    }

    .random-teams-stage-controls > button::after,
    .random-teams-stage-controls > .random-teams-late-add-anchor > button::after {
        top: calc(100% + 6px);
        font-size: 0.64rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-tool-option,
    .landing-tool-option::after,
    .relic-mode-button,
    .pictionary-mode-button,
    .vault-mode-button,
    .host-start-button,
    .host-start-button::after,
    .final-results-continue-button,
    .final-results-continue-button::after,
    .random-teams-start-button,
    .random-teams-start-button::after,
    .random-teams-stage-controls > button,
    .random-teams-stage-controls > .random-teams-late-add-anchor > button,
    .random-teams-stage-controls > button::after,
    .random-teams-stage-controls > .random-teams-late-add-anchor > button::after {
        transition: none;
    }

    .random-teams-start-button.is-shuffling::after {
        animation: none;
    }

    .lobby-playground-avatar.is-pellet-celebrating .lobby-playground-square,
    .lobby-playground-avatar.is-high-fiving .lobby-playground-square {
        animation: none;
    }

    .lobby-playground-avatar.is-speed-boosted .lobby-speed-boost-effect,
    .lobby-playground-avatar.is-speed-boosted .lobby-speed-boost-effect::before,
    .lobby-playground-avatar.is-speed-boosted .lobby-speed-boost-effect::after {
        animation: none;
    }

    .lobby-playground-avatar.is-speed-boosted .lobby-speed-boost-effect {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1);
    }

    .lobby-high-five-burst {
        animation: none;
        opacity: 0.72;
        transform: translate(-50%, -50%) scale(0.92);
    }

    .lobby-playground-mode::before,
    .final-results-waiting::before {
        animation: none;
    }
}

/* Restrained mode details: reinforce each game at its main surface without changing its control grammar. */
#app.theme-pictionary .pictionary-stage-card {
    background:
        radial-gradient(circle at 8% 6%, rgba(213, 179, 93, 0.08), transparent 24%),
        repeating-linear-gradient(90deg, rgba(244, 235, 204, 0.018) 0 1px, transparent 1px 34px),
        linear-gradient(180deg, rgba(29, 40, 45, 0.96), rgba(12, 20, 25, 0.99));
}

#app.theme-pictionary .pictionary-canvas-shell {
    border-color: rgba(226, 202, 132, 0.34);
    box-shadow:
        inset 0 0 0 1px rgba(18, 10, 38, 0.04),
        0 0 0 1px rgba(255, 250, 235, 0.08),
        5px 6px 0 -2px rgba(231, 222, 193, 0.1),
        0 24px 44px rgba(0, 0, 0, 0.24);
}

#app.theme-pictionary .pictionary-canvas-shell::before {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: 2;
    border-radius: 21px;
    background:
        linear-gradient(90deg, rgba(122, 94, 30, 0.42), rgba(122, 94, 30, 0.42)) left top / 18px 1px no-repeat,
        linear-gradient(180deg, rgba(122, 94, 30, 0.42), rgba(122, 94, 30, 0.42)) left top / 1px 18px no-repeat,
        linear-gradient(90deg, rgba(122, 94, 30, 0.42), rgba(122, 94, 30, 0.42)) right top / 18px 1px no-repeat,
        linear-gradient(180deg, rgba(122, 94, 30, 0.42), rgba(122, 94, 30, 0.42)) right top / 1px 18px no-repeat,
        linear-gradient(90deg, rgba(122, 94, 30, 0.42), rgba(122, 94, 30, 0.42)) left bottom / 18px 1px no-repeat,
        linear-gradient(180deg, rgba(122, 94, 30, 0.42), rgba(122, 94, 30, 0.42)) left bottom / 1px 18px no-repeat,
        linear-gradient(90deg, rgba(122, 94, 30, 0.42), rgba(122, 94, 30, 0.42)) right bottom / 18px 1px no-repeat,
        linear-gradient(180deg, rgba(122, 94, 30, 0.42), rgba(122, 94, 30, 0.42)) right bottom / 1px 18px no-repeat;
    opacity: 0.46;
    pointer-events: none;
}

#app.theme-pictionary .pictionary-controller-current {
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 3px 0 0 rgba(213, 179, 93, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 14px 26px rgba(0, 0, 0, 0.18);
}

#app.theme-pictionary .pictionary-controller-current::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 38px;
    height: 7px;
    border-radius: 2px;
    background: rgba(231, 199, 111, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 248, 220, 0.18);
    transform: translateX(-50%) rotate(-1.5deg);
    pointer-events: none;
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button,
.vault-player-vault {
    --vault-door-line: rgba(228, 217, 255, 0.13);
    --vault-door-bolt-strong: rgba(255, 239, 190, 0.52);
    --vault-door-bolt-soft: rgba(255, 239, 190, 0.34);
    --vault-door-hardware: rgba(255, 228, 153, 0.42);
}

.vault-stage-card:not(:has(.vault-preview-stage))
    .vault-tile-button:has(.vault-display-money.is-stash):not(.is-cleared):not(.is-diamond) {
    --vault-door-line: rgba(187, 249, 176, 0.24);
    --vault-door-bolt-strong: rgba(224, 255, 213, 0.62);
    --vault-door-bolt-soft: rgba(174, 242, 159, 0.42);
    --vault-door-hardware: rgba(173, 242, 159, 0.52);
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button::before {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: 0;
    border: 1.5px solid var(--vault-door-line);
    border-radius: 6px;
    background:
        radial-gradient(circle at 4px 4px, var(--vault-door-bolt-strong) 0 1.5px, transparent 2px),
        radial-gradient(circle at calc(100% - 4px) 4px, var(--vault-door-bolt-strong) 0 1.5px, transparent 2px),
        radial-gradient(circle at 4px calc(100% - 4px), var(--vault-door-bolt-soft) 0 1.5px, transparent 2px),
        radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), var(--vault-door-bolt-soft) 0 1.5px, transparent 2px);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.16);
    opacity: 0.68;
    pointer-events: none;
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button::after,
.vault-player-vault::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    width: clamp(13px, 1.1vw, 16px);
    aspect-ratio: 1;
    border: 1.5px solid var(--vault-door-hardware);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 40%, var(--vault-door-bolt-strong) 0 11%, transparent 14%),
        linear-gradient(var(--vault-door-hardware), var(--vault-door-hardware)) 50% 68% / 2px 35% no-repeat,
        radial-gradient(circle, transparent 0 35%, var(--vault-door-hardware) 38% 44%, transparent 47%),
        radial-gradient(circle, rgba(58, 45, 69, 0.92) 0 52%, rgba(16, 12, 22, 0.97) 56% 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.045),
        0 2px 5px rgba(0, 0, 0, 0.28);
    opacity: 0.8;
    pointer-events: none;
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button > * {
    position: relative;
    z-index: 2;
}

.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button.is-locked::before,
.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button.is-locked::after,
.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button.is-cleared::before,
.vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button.is-cleared::after {
    opacity: 0.28;
}

@media (max-width: 640px) {
    #app.theme-pictionary .pictionary-canvas-shell::before {
        inset: 7px;
        border-radius: 18px;
        opacity: 0.36;
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button::before {
        inset: 4px;
    }

    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-tile-button::after,
    .vault-player-vault::after {
        top: 6px;
        right: 6px;
    }
}

/*
 * Gold is semantic, not a mode palette: it marks the surface that needs attention
 * and the enabled action that advances the flow. Selected/toggled state keeps its
 * local mode color; repeat, utility, danger, and disabled actions stay non-gold.
 * Keep this guard after mode styling so local palettes cannot silently replace it.
 */
:is(
    .landing-card,
    .random-teams-config-card,
    .random-teams-stage-card,
    .word-list-control-panel,
    .word-list-preview-shell
).is-active-section,
#app
    .host-mode-card:is(
        .is-selection-open,
        .is-awaiting-selection,
        .is-selected,
        .is-relic-selected,
        .is-pictionary-selected,
        .is-vault-selected
    ),
.gimcheon-chat-panel {
    border-width: var(--active-panel-outline-width);
    border-color: var(--gold-surface-border);
    outline: var(--active-panel-outline-width) solid var(--gold-surface-line);
    outline-offset: calc(-1 * var(--active-panel-outline-width));
}

:is(
    #app .primary-button:not(.button-accent-teal):not(.is-repeat-action):not(.danger-button),
    .autotranslator-tool:not(.is-running) .autotranslator-start-button,
    .gimcheon-chat-launcher:not(.is-open),
    .gimcheon-chat-compose button
):not(:disabled) {
    border-color: var(--action-gold-border);
    background: var(--action-gold-background);
    color: var(--action-gold-ink);
    box-shadow: var(--action-gold-shadow);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
}

:is(
    #app .primary-button:not(.button-accent-teal):not(.is-repeat-action):not(.danger-button),
    .autotranslator-tool:not(.is-running) .autotranslator-start-button,
    .gimcheon-chat-launcher:not(.is-open),
    .gimcheon-chat-compose button
):not(:disabled):is(:hover, :focus-visible) {
    border-color: var(--action-gold-hover-border);
    background: var(--action-gold-background);
    color: var(--action-gold-ink);
    box-shadow: var(--action-gold-hover-shadow);
    filter: brightness(1.04) saturate(1.04);
}

:is(
    #app .primary-button:not(.button-accent-teal):not(.is-repeat-action):not(.danger-button),
    .autotranslator-tool:not(.is-running) .autotranslator-start-button,
    .gimcheon-chat-launcher:not(.is-open),
    .gimcheon-chat-compose button
):not(:disabled):focus-visible {
    outline: 2px solid rgba(255, 246, 204, 0.92);
    outline-offset: 3px;
}

.final-results-continue-button.primary-button::after {
    background: rgba(57, 31, 3, 0.12);
    color: var(--action-gold-ink);
}

.final-results-continue-button.primary-button:is(:hover, :focus-visible)::after {
    background: rgba(57, 31, 3, 0.18);
}

/* Large host displays should treat results as a fitted stage, not a document to scroll. */
@media (min-width: 981px) {
    .room-shell.is-results-layout {
        min-height: 100vh;
        min-height: 100svh;
        height: 100vh;
        height: 100svh;
        max-height: 100vh;
        max-height: 100svh;
        overflow: hidden;
        overscroll-behavior: none;
        animation: none;
    }

    .room-shell.is-results-layout .room-content {
        min-height: 0;
        overflow: hidden;
    }

    .room-shell.is-results-layout .final-results-shell {
        min-height: 0;
        height: 100%;
        max-height: 100%;
    }
}

@media (min-width: 981px) and (max-height: 820px) {
    .final-results-shell {
        gap: 8px;
        padding: 24px 34px 26px;
    }

    .final-results-header {
        gap: 4px;
    }

    .final-results-header h1 {
        font-size: clamp(3.65rem, 9svh, 4.55rem);
    }

    .final-results-podium {
        align-self: stretch;
        min-height: 0;
        height: 100%;
        max-height: none;
        margin-top: 0;
        padding: 44px 28px 24px;
    }

    .final-result-place {
        min-height: clamp(224px, 38svh, 292px);
    }

    .final-result-place.is-place-1 {
        min-height: clamp(312px, 52svh, 418px);
    }

    .final-result-place.is-place-2 {
        min-height: clamp(226px, 38.5svh, 296px);
    }

    .final-result-place.is-place-3 {
        min-height: clamp(214px, 36svh, 278px);
    }
}

/* Keep the classroom-sized Vault Breakers overrides last so compact legacy rules cannot shrink them again. */
.vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell {
    font-size: clamp(1.22rem, 1.7vw, 1.72rem);
}

.vault-stage-card:not(:has(.vault-preview-stage))
    .vault-board-frame.is-final-vault
    .vault-tile-button:not(.is-cleared) {
    box-shadow:
        inset 0 1px 0 rgba(255, 234, 222, 0.12),
        inset 0 -2px 0 rgba(29, 0, 6, 0.4),
        0 0 15px rgba(224, 48, 59, 0.18),
        0 8px 18px rgba(40, 0, 8, 0.26);
}

.vault-stage-card:not(:has(.vault-preview-stage))
    .vault-board-frame.is-final-vault
    .vault-tile-button.is-final-eligible {
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 216, 0.26),
        0 0 0 1px rgba(255, 118, 93, 0.17),
        0 0 22px rgba(235, 58, 67, 0.28),
        0 10px 22px rgba(68, 1, 12, 0.3);
}

.vault-preview-stage.is-final-vault {
    --vault-preview-hot-r: 126;
    --vault-preview-hot-g: 18;
    --vault-preview-hot-b: 31;
    border-color: rgba(255, 82, 91, 0.7);
    background:
        radial-gradient(circle at 50% 36%, rgba(238, 51, 61, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(72, 9, 18, 0.99), rgba(14, 4, 8, 0.995));
    box-shadow:
        inset 0 0 0 1px rgba(255, 151, 126, 0.12),
        inset 0 0 100px rgba(147, 4, 24, 0.12),
        0 20px 48px rgba(59, 0, 10, 0.38);
}

@media (min-width: 981px) and (max-height: 820px) {
    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell {
        font-size: clamp(1.08rem, 1.5vw, 1.45rem);
    }
}

@media (min-width: 981px) and (max-height: 680px) {
    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell {
        font-size: clamp(0.84rem, 1.14vw, 1.08rem);
    }
}

@media (max-width: 720px) {
    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell {
        font-size: clamp(0.7rem, 2.8vw, 0.94rem);
    }
}

@media (max-width: 420px) {
    .vault-stage-card:not(:has(.vault-preview-stage)) .vault-category-cell {
        font-size: clamp(0.58rem, 2.45vw, 0.74rem);
    }
}


/* Keep the game name with its concealed setup template. */
.host-source-fog-overlay { display:flex; flex-direction:column; justify-content:center; gap:24px; }
.host-source-fog-title { flex:none; font-size:clamp(22px,3vw,36px); line-height:1.15; text-align:center; letter-spacing:.04em; }
.host-source-fog-overlay--vault .host-source-fog-title { color:#eadfff; }
.host-source-fog-overlay--pictionary .host-source-fog-title { color:#344450; }
.host-vault-fog-panel, .host-pictionary-fog-sheet { flex-shrink:0; }
@media(max-width:600px) {
    .host-source-fog-overlay { gap:20px; }
    .host-source-fog-overlay--vault { align-items:center; justify-content:flex-start; }
}
.host-source-fog-overlay--vault .host-vault-fog-panel { flex-shrink:1; min-height:0; max-height:calc(100% - 66px); }
@media(max-width:600px) {
    .host-vault-tool-rail .host-vault-editor-mode-switch { min-width:0; flex:1 1 160px; }
}

/* Vocabulary presentation owns the host surface; the drawing and roster keep their state underneath. */
.pictionary-shell.is-vocabulary-review {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}
.pictionary-shell.is-vocabulary-review > :not(.pictionary-word-bank-panel) { display: none; }
.pictionary-shell.is-vocabulary-review > .pictionary-word-bank-panel {
    position: static;
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: stretch;
    padding: clamp(12px, 2vw, 32px);
    border-radius: 24px;
    background: #f6f2e7;
    color: #25353c;
}
.pictionary-review-navigation { display: flex; align-items: center; justify-content: center; gap: 16px; }
.pictionary-review-navigation > span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pictionary-shell.is-vocabulary-review .card-label { color: #35434a; font-size: clamp(16px, 1.5vw, 26px); }
.pictionary-shell.is-vocabulary-review .secondary-button { color: #34454e; background: #e6e5dc; border-color: #bfc5c0; }
.pictionary-shell.is-vocabulary-review .pictionary-word-bank-table {
    color: #24353d;
    font-size: clamp(26px, 3.3vw, 72px);
    table-layout: fixed;
}
.pictionary-word-bank-table td { overflow-wrap: anywhere; }
.pictionary-word-bank-table td button {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: left;
    font: inherit;
    font-weight: 800;
    line-height: inherit;
    cursor: pointer;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.pictionary-shell.is-vocabulary-review .pictionary-word-bank-table th {
    background: #f6f2e7;
    color: #576770;
    font-size: clamp(12px, 1vw, 20px);
}
.pictionary-shell.is-vocabulary-review .pictionary-word-bank-table td {
    padding: clamp(18px, 2.2vh, 36px) clamp(12px, 2vw, 36px);
    border-bottom-color: #d4d8d1;
}
.pictionary-word-bank-table .is-current { background: rgba(219, 179, 76, .2); }
.pictionary-word-bank-table-shell { overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding-block: 48px; }
.pictionary-review-remote { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100%; min-height: 0; gap: 12px; }
.pictionary-review-remote .pictionary-word-bank-table { table-layout: fixed; font-size: 1.1rem; }
.pictionary-review-remote .pictionary-word-bank-table td { padding: 16px 8px; }
.pictionary-review-remote .pictionary-review-navigation { gap: 8px; justify-content: space-between; }
.pictionary-review-remote .pictionary-review-navigation button { padding-inline: 10px; }
.pictionary-review-launch { width: 100%; min-height: 44px; }
.pictionary-case-file-toggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    padding: 4px 8px; border: 0; border-radius: 9px; background: transparent;
    color: #f2dfa2; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer;
    pointer-events: auto;
}
.pictionary-case-file-toggle:hover, .pictionary-case-file-toggle:focus-visible { background: #ffffff18; }
.pictionary-player-word-bank-head .pictionary-player-word-bank-count { margin-right: auto; }
.pictionary-player-word-bank .pictionary-case-translation {
    /* Keep every word in place when translations switch off, including wrapped Korean. */
    visibility: hidden;
    user-select: none;
}
.pictionary-player-word-bank.is-translations-visible .pictionary-case-translation {
    visibility: visible;
    user-select: auto;
}
.pictionary-translation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 3px 9px 3px 5px;
    border: 1px solid #9ac8bd70;
    border-radius: 999px;
    background: #294c49;
    color: #e1fff5;
    font: inherit;
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}
.pictionary-translation-button:hover:not([aria-disabled=true]) { background: #35625a; }
.pictionary-translation-button:focus-visible { outline: 2px solid #c1f9e4; outline-offset: 2px; }
.pictionary-translation-button[data-phase=revealing] { background: #365c51; border-color: #b7e0c9; }
.pictionary-translation-button[data-phase=recharging] { background: #233735; color: #aac0b8; cursor: default; }
.pictionary-translation-dial { position: relative; display: grid; place-items: center; width: 30px; height: 30px; }
.pictionary-translation-dial > .ziarcadia-icon { width: 16px; height: 16px; }
.pictionary-translation-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pictionary-translation-ring circle { fill: none; stroke-width: 2.5; }
.pictionary-translation-ring-track { stroke: currentColor; opacity: .18; }
.pictionary-translation-ring-progress { stroke: currentColor; stroke-linecap: round; }
.pictionary-player-word-bank-chip strong, .pictionary-player-word-bank-chip span {
    white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; line-height: 1.25;
}
.pictionary-player-word-bank-list { overscroll-behavior: contain; scrollbar-gutter: stable; touch-action: pan-y; }
.pictionary-shell.is-case-file-expanded > .pictionary-stage-card { visibility: hidden; }
.pictionary-shell.is-case-file-expanded > .pictionary-player-board-card {
    position: absolute; inset: 0; z-index: 20; max-height: none; min-height: 0;
    height: 100%; padding: 16px; background: #18262e;
}
.pictionary-shell.is-case-file-expanded .pictionary-player-word-bank { grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
.pictionary-shell.is-case-file-expanded .pictionary-player-word-bank-head { position: static; }
.pictionary-shell.is-case-file-expanded .pictionary-player-word-bank-list { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.pictionary-shell.is-case-file-expanded .pictionary-player-word-bank-chip { padding: 14px; }
.pictionary-shell.is-case-file-expanded .pictionary-player-word-bank-chip strong { font-size: 1.2rem; }
.pictionary-shell.is-case-file-expanded .pictionary-player-word-bank-chip span { font-size: 1rem; }
.pictionary-shell { position: relative; }
/* Flatten repeated controller boxes into one compact instrument strip. */
#app.theme-pictionary .pictionary-controller-stat-chip { border: 0; box-shadow: none; background: transparent; }
#app.theme-pictionary .pictionary-controller-topline { gap: 8px; }
#app.theme-pictionary .pictionary-controller-control-grid { gap: 8px; }
#app.theme-pictionary .pictionary-stepper-card { border-radius: 14px; box-shadow: none; }
@media (max-width: 640px) {
    .pictionary-player-word-bank-head { top: -32px; }
    .pictionary-case-file-toggle { font-size: .68rem; }
    .pictionary-player-word-bank-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .room-shell.is-active-layout:has(.pictionary-shell) { position: relative; overflow: visible; gap: 6px; }
    .room-shell.is-active-layout:has(.pictionary-shell) .room-topbar {
        position: absolute; top: 100%; left: 12px; right: 12px;
        margin-top: 0; padding-block: 6px;
    }
    .pictionary-shell.is-vocabulary-review .pictionary-word-bank-head { align-items: center; }
    .pictionary-shell.is-vocabulary-review .pictionary-word-bank-table td { padding: 16px 8px; }
}

#app.theme-pictionary .pictionary-shell.is-vocabulary-review .secondary-button {
    background: #e4e6dd; color: #263a44; border-color: #bbc2b8;
}
.pictionary-shell.is-case-file-expanded > .pictionary-player-board-card {
    position: fixed; inset: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
    height: auto; z-index: 60;
}
@media (max-width: 640px) {
    .pictionary-player-board-card { padding-top: 2px; }
    .pictionary-player-word-bank { grid-template-rows: auto minmax(0, 1fr); }
    .pictionary-player-word-bank-head { position: static; min-height: 36px; pointer-events: auto; }
    .pictionary-case-file-toggle { min-height: 36px; }
    .pictionary-player-word-bank-count { position: static; }
}
@media (max-width: 900px) and (max-height: 500px) {
    .room-shell.is-active-layout:has(.pictionary-shell) { position: relative; overflow: visible; gap: 6px; }
    .room-shell.is-active-layout:has(.pictionary-shell) .room-topbar {
        position: absolute; top: 100%; left: 12px; right: 12px; margin-top: 0; padding-block: 6px;
    }
}
@media (max-width: 640px), (max-width: 900px) and (max-height: 500px) {
    #app.theme-pictionary .pictionary-guess-row,
    #app.theme-pictionary .pictionary-shell.is-player-view.is-guessing .pictionary-guess-row {
        grid-template-columns: minmax(0, 1fr) 48px; align-items: end; gap: 8px;
    }
    #app.theme-pictionary .pictionary-guess-button,
    #app.theme-pictionary .pictionary-shell.is-player-view.is-guessing .pictionary-guess-button {
        min-width: 48px; width: 48px; height: 48px; min-height: 48px;
        padding: 0; font-size: 0; display: grid; place-items: center; border-radius: 50%;
    }
    #app.theme-pictionary .pictionary-guess-button::after,
    #app.theme-pictionary .pictionary-guess-button:disabled::after {
        content: attr(data-compact-label); position: static; transform: none;
        display: grid; place-items: center; width: 28px; height: 28px;
        opacity: 1; font-size: 20px; line-height: 1; margin: 0;
    }
}

/* Picture Detectives classroom follow-up: compact utilities and clearer live feedback. */
#app.theme-pictionary .pictionary-review-launch {
    width: auto;
    min-height: 32px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    white-space: nowrap;
}

#app.theme-pictionary .pictionary-entry-button .pictionary-entry-used {
    position: absolute;
    z-index: 1;
    top: 5px;
    right: 5px;
    margin: 0;
    min-height: 18px;
    padding: 1px 6px;
    border-color: rgba(236, 217, 149, 0.32);
    background: rgba(20, 29, 35, 0.94);
    color: #f6e8bd;
    font-size: 0.65rem;
    line-height: 1;
    pointer-events: none;
}

@media (max-width: 820px) {
    #app.theme-pictionary .pictionary-entry-button.has-used-count { padding-right: 10px; }
}

#app.theme-pictionary .pictionary-controller-stat-row {
    align-items: center;
    grid-template-columns: minmax(64px, 0.8fr) minmax(82px, 1fr) auto;
}

#app.theme-pictionary .pictionary-stem-banner.is-long {
    font-size: clamp(1rem, 2.45vw, 1.55rem);
    line-height: 1.13;
    padding-block: 8px;
}

#app.theme-pictionary .pictionary-stem-banner.is-very-long {
    font-size: clamp(0.78rem, 1.35vw, 1.05rem);
    line-height: 1.08;
    padding-block: 6px;
}

#app.theme-pictionary .pictionary-stem-banner.is-very-long .pictionary-stem-segment,
#app.theme-pictionary .pictionary-stem-banner.is-very-long .pictionary-target-blank {
    min-height: 1.38em;
}

/* Personal screens keep the drawing dominant; host projector sizing stays above. */
#app.theme-pictionary .pictionary-shell.is-player-view .pictionary-stem-banner {
    min-height: 32px;
    padding: 5px 7px;
    border-radius: 14px;
    font-size: clamp(0.8125rem, 1.65vw, 1rem);
    line-height: 1.12;
    gap: 0.1em;
}

#app.theme-pictionary .pictionary-shell.is-player-view .pictionary-stem-segment,
#app.theme-pictionary .pictionary-shell.is-player-view .pictionary-target-blank {
    min-height: 1.35em;
}
#app.theme-pictionary .pictionary-stem-segment.is-new {
    position: relative;
    color: #26313d;
    background: linear-gradient(180deg, #f3f6fa, #aebbc9);
    border-radius: 0.34em;
    box-shadow:
        0 0 0 2px rgba(237, 244, 252, 0.92),
        0 0 0 7px rgba(174, 187, 201, 0.18),
        0 8px 22px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px rgba(255, 255, 255, 0.55);
    animation: pictionary-new-clue-arrival 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

#app.theme-pictionary .pictionary-stem-segment.is-new::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -0.18em;
    height: 3px;
    border-radius: 999px;
    background: #dce7f2;
    box-shadow: 0 0 12px rgba(220, 231, 242, 0.82);
}

@keyframes pictionary-new-clue-arrival {
    0% { opacity: 0; transform: translateY(-0.35em) scale(0.82); }
    55% { opacity: 1; transform: translateY(0.08em) scale(1.08); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

#app.theme-pictionary .roster-body:not(.player-roster-needs-scroll) {
    overflow-y: hidden;
    scrollbar-gutter: auto;
}

#app.theme-pictionary .roster-body.player-roster-needs-scroll {
    scrollbar-gutter: stable;
}

#app.theme-pictionary .pictionary-shell.is-host-view .pictionary-roster-card .roster-body:not(.player-roster-needs-scroll) {
    overflow-y: hidden;
}

#app.theme-pictionary .pictionary-guess-field.has-suggestions .pictionary-guess-suggestion-button {
    border-color: rgba(255, 224, 126, 0.72);
    background: linear-gradient(180deg, #fff4bd, #e1b84d);
    color: #26311f;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.34), 0 0 0 2px rgba(225, 184, 77, 0.16);
}

@media (orientation: landscape) and (min-width: 800px) and (max-height: 840px) {
    #app.theme-pictionary .pictionary-shell.is-player-view:not(.is-guessing) {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.6fr);
    }

    #app.theme-pictionary .pictionary-shell.is-player-view:not(.is-case-file-expanded) .pictionary-player-word-bank-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    #app.theme-pictionary .pictionary-player-word-bank {
        position: relative;
        grid-template-rows: minmax(0, 1fr);
        gap: 0;
    }

    #app.theme-pictionary .pictionary-player-word-bank-head {
        position: absolute;
        z-index: 4;
        top: 4px;
        right: 4px;
        left: auto;
        width: auto;
        min-height: 40px;
        gap: 3px;
        padding: 2px;
        border-radius: 999px;
        background: rgba(13, 22, 27, 0.9);
        border: 1px solid rgba(226, 186, 87, 0.26);
        box-shadow: 0 7px 18px rgba(0, 0, 0, 0.25);
        pointer-events: auto;
    }

    #app.theme-pictionary .pictionary-case-file-toggle {
        min-height: 28px;
        padding: 3px 7px;
    }

    #app.theme-pictionary .pictionary-player-word-bank-count {
        position: static;
        min-width: 25px;
        height: 25px;
        padding-inline: 6px;
    }

    #app.theme-pictionary .pictionary-player-word-bank-list {
        padding-top: 48px;
    }

    #app.theme-pictionary .pictionary-shell.is-case-file-expanded .pictionary-player-word-bank {
        grid-template-rows: auto minmax(0, 1fr);
        gap: 10px;
    }

    #app.theme-pictionary .pictionary-shell.is-case-file-expanded .pictionary-player-word-bank-head {
        position: static;
        width: 100%;
        min-height: 36px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    #app.theme-pictionary .pictionary-shell.is-case-file-expanded .pictionary-player-word-bank-list {
        padding-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #app.theme-pictionary .pictionary-stem-segment.is-new { animation: none; }
}
.pictionary-shell.is-controller-view .pictionary-side-card { grid-template-rows: minmax(0, 1fr); }
.pictionary-shell.is-controller-view .pictionary-role-card { height: 100%; min-height: 0; }
@media (max-width: 640px) {
    .pictionary-shell.is-host-controller-view .pictionary-side-card { grid-template-rows: minmax(0, 1fr); }
}

/* Leave room to center even the first and last vocabulary entries. */
:is(.is-vocabulary-review, .pictionary-review-remote) .pictionary-word-bank-table-shell {
    container-type: size;
}
:is(.is-vocabulary-review, .pictionary-review-remote) .pictionary-word-bank-table-shell::before,
:is(.is-vocabulary-review, .pictionary-review-remote) .pictionary-word-bank-table-shell::after {
    content: "";
    display: block;
    height: 50cqh;
}
.pictionary-review-navigation > span {
    font-size: clamp(24px, 3vw, 56px);
    font-weight: 900;
    line-height: 1.15;
}
.pictionary-review-remote .pictionary-review-navigation > span { font-size: 24px; }
.pictionary-shell.is-vocabulary-review .pictionary-word-bank-table .is-current {
    background: #f5d778;
    box-shadow: inset 6px 0 #a76b09;
}

/* Personal placement stays readable during the podium-to-standings transition. */
.final-results-shell.is-player-results .final-results-header {
    grid-row: 1;
    opacity: 1;
    visibility: visible;
    animation: none;
}

.final-results-shell.is-player-results .final-results-header h1 {
    font-size: clamp(3.5rem, 9vw, 6rem);
    overflow-wrap: anywhere;
}

.final-results-shell.is-player-results .final-results-podium,
.final-results-shell.is-player-results .final-results-standings {
    grid-column: 1;
    grid-row: 2;
}

.final-results-shell.is-player-results .final-results-standings {
    position: relative;
    inset: auto;
    align-self: stretch;
}

.final-results-shell.is-player-results.is-static-results .final-results-podium:not(.is-empty) {
    display: none;
}

/* Player names are the action targets in lobby and Relic Run rosters. */
.participant-identity > .player-roster-actions {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    opacity: 1;
    margin: 0;
}
.participant-identity > .player-roster-actions > .player-roster-actions-trigger {
    display: flex;
    justify-content: flex-start;
    text-align: left;
    border: 0;
    border-radius: 5px;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
}
.participant-identity > .player-roster-actions > .player-roster-actions-trigger:is(:hover, :focus-visible) {
    background: rgba(170, 229, 255, 0.1);
}

/* Let the shared measured fit ladder use the whole host rail. */
@media (min-width: 1241px) {
    #app .room-shell.is-host-lobby .host-presence-card .participant-list {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
    #app .room-shell.is-host-lobby .host-presence-roster,
    #app .room-shell.is-host-lobby #lobby-participants { min-height: 0; }
}

/* Names may use the card's second line before losing meaningful characters. */
#app .player-roster :is(.participant-name, .roster-name, .player-roster-actions-trigger-label) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    max-height: none;
    overflow: hidden;
    line-height: 1.2;
}

/* The captured 300% classroom display needs desktop proportions in host setup,
   not half-size text inside full-size pixel controls. Keep gameplay's existing
   typography treatment; zoom only while the shared host lobby is mounted. */
html.is-classroom-display-typography-compensated:has(.room-shell.is-host-lobby) {
    font-size: 100%;
    zoom: var(--ziar-classroom-display-scale);
}
html.is-classroom-display-typography-compensated #app .room-shell.is-host-lobby {
    min-height: calc(100svh / var(--ziar-classroom-display-scale) - 54px);
}
html.is-classroom-display-typography-compensated #app .room-shell.is-host-lobby .host-lobby-shell {
    min-height: calc(100svh / var(--ziar-classroom-display-scale) - 130px);
}
html.is-classroom-display-typography-compensated #app .room-shell.is-host-lobby .host-lobby-overlays {
    --host-lobby-side-rail-width: 44%;
    grid-template-columns: minmax(0, 1fr) var(--host-lobby-side-rail-width);
}
html.is-classroom-display-typography-compensated #app .room-shell.is-host-lobby .host-lobby-side-rail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: 100%;
    min-height: 0;
}
html.is-classroom-display-typography-compensated #app .room-shell.is-host-lobby .host-presence-card .participant-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}
/* Keep source text at its desktop size instead of the short-viewport reduction. */
html.is-classroom-display-typography-compensated #app .room-shell.is-host-lobby .host-source-editor.is-vault-grid textarea {
    font-size: 1rem;
}