:root {
    --bg-dark: #050505;
    --border-color: #333333;
    --text-main: #e0e0e0;
    --text-muted: #aaaaaa;

    --accent-yellow: #facc15;
    --accent-green: #39ff14;
    --accent-red: #ff3333;

    --glass-bg: rgba(15, 15, 15, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Share Tech Mono', monospace;
    -webkit-tap-highlight-color: transparent;
}

@keyframes radar {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

body {
    background-color: var(--bg-dark);
    margin: 0;
    padding: 0;
    background: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Share Tech Mono', sans-serif;
    height: 100dvh;
    overflow: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url('bunker_bg.jpg') center center / cover no-repeat;
    z-index: -1;
    filter: brightness(0.6) contrast(1.1);
    pointer-events: none;
}

.mobile-wrapper {
    width: 100%;
    max-width: 480px;
    height: 100dvh;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

@media (min-width: 480px) {
    .mobile-wrapper {
        height: 90vh;
        border-radius: 20px;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
        background: rgba(0, 0, 0, 0.2);
    }
}

/* Screens */
.screen-container {
    display: none;
    flex: 1;
    width: 100%;
    height: 100%;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
}

.screen-container.active {
    display: flex;
}

/* Логотип BUNKER (як на скріншоті) */
.bunker-logo-box {
    background: var(--accent-yellow);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    color: #000;
    margin-top: 10px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 5px 20px rgba(250, 204, 21, 0.2);
}

.bunker-logo-box h1 {
    font-family: 'Arial Black', sans-serif;
    font-size: 32px;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.brand-logo {
    display: block;
    height: auto;
    object-fit: contain;
}

.brand-logo-auth {
    width: min(82%, 340px);
    margin: 18px auto 8px;
}

.brand-logo-header {
    width: 150px;
    max-height: 54px;
    margin: 0 auto;
    filter: invert(88%) sepia(91%) saturate(1035%) hue-rotate(345deg) brightness(103%) contrast(96%);
}

@media (max-width: 380px) {
    .brand-logo-auth {
        width: 78%;
        margin-top: 22px;
    }

    .brand-logo-header {
        width: 132px;
    }
}

/* Preserve the exact proportions of the supplied PNG components. */
#tabPlay .mission-brief {
    aspect-ratio: 859 / 553;
    height: auto;
    padding: clamp(42px, 11vw, 58px) clamp(26px, 8vw, 42px) 30px !important;
}

#tabPlay .mission-brief p {
    max-width: 370px;
    font-size: clamp(17px, 4.8vw, 22px) !important;
    line-height: 1.22 !important;
}

#tabPlay .industrial-cta,
#tabPlay .industrial-cta:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 847 / 283;
    padding: 0 28px 9px;
    line-height: 1;
}

#tabPlay .industrial-cta::before {
    position: static;
    flex: 0 0 auto;
    order: 2;
    width: clamp(34px, 10vw, 47px);
    height: clamp(34px, 10vw, 47px);
    transform: none;
}

#tabPlay .join-console {
    grid-template-columns: minmax(0, 3.28fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
}

#tabPlay .join-console .input-group {
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 2001 / 459;
    padding: 7px 20px;
}

#tabPlay .join-console .input-group input {
    height: 100%;
    min-height: 0;
    padding: 15px 7px 2px;
}

#tabPlay .join-console .input-group label {
    top: 50%;
    transform: translateY(-50%);
}

#tabPlay .join-console .input-group input:focus+label,
#tabPlay .join-console .input-group input:not(:placeholder-shown)+label {
    top: 12px;
    transform: none;
}

#tabPlay .join-console .btn-secondary {
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 768 / 576;
    padding: 0 7px 9px;
    font-size: 11px;
}

#mainApp .bottom-nav {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 1672 / 774;
    padding: 9% 5% 5%;
}

#mainApp .nav-item {
    padding: 28% 2px 5px;
    font-size: clamp(10px, 3vw, 13px);
}

#mainApp .nav-item::before {
    top: 8%;
    width: clamp(50px, 18vw, 76px);
    height: clamp(50px, 18vw, 76px);
}

@media (max-height: 740px) {
    #mainApp .bottom-nav {
        flex-basis: auto;
        min-height: 0;
        aspect-ratio: 1672 / 774;
    }

    #tabPlay .mission-brief {
        width: 100%;
    }

    #tabPlay .industrial-cta,
    #tabPlay .industrial-cta:hover,
    #tabPlay .join-console {
        width: 100%;
    }
}

/* Auth screen — supplied 2054 registration artwork. */
#authContainer {
    padding: max(18px, env(safe-area-inset-top)) 20px 36px;
    gap: 0;
    background: linear-gradient(rgba(7, 6, 3, .08), rgba(7, 6, 3, .3));
    scrollbar-width: none;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

#authContainer::-webkit-scrollbar {
    display: none;
}

#authContainer .bunker-logo-box {
    flex: 0 0 auto;
    min-height: 210px;
    margin: 0 0 12px;
    padding: 8px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #c9c6bd;
}

#authContainer .brand-logo-auth {
    width: min(45%, 190px);
    margin: 8px auto 9px;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .75));
}

#authContainer .bunker-logo-box p {
    color: #c8c5bc;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(12px, 3.25vw, 15px);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: .2px;
    text-shadow: 0 2px 5px #000;
    transform: translateY(6px);
}

#authContainer .lang-switcher {
    position: static;
    align-self: center;
    display: flex;
    gap: 9px;
    margin: 15px auto 0;
    flex: 0 0 auto;
}

#authContainer .lang-btn {
    width: 50px;
    height: 50px;
    padding: 0;
    border: 1px solid #5b5b55;
    border-radius: 50%;
    color: #9e9d97;
    background: linear-gradient(180deg, rgba(48, 49, 46, .94), rgba(13, 14, 13, .96));
    box-shadow: inset 0 0 8px rgba(255, 255, 255, .08), 0 5px 10px rgba(0, 0, 0, .5);
}

#authContainer .lang-btn.active {
    color: #f3d258;
    border-color: #8b8156;
    text-shadow: 0 0 8px rgba(255, 214, 61, .65);
    background: linear-gradient(180deg, #4a4531, #181711);
}

.auth-tab-row {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin: -18px 0 8px;
}

#authContainer .auth-tab {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 413 / 135;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px 3px;
    border: 0;
    border-radius: 0;
    clip-path: none;
    color: #a4a29c;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(16px, 4.7vw, 23px);
    font-weight: 500;
    letter-spacing: .2px;
    text-shadow: 0 2px 2px #000;
    box-shadow: none;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#authContainer .auth-tab-login {
    background-image: url('assets/auth/tab-login-off.png');
}

#authContainer .auth-tab-register {
    background-image: url('assets/auth/tab-register-off.png');
}

#authContainer .auth-tab-login.btn-primary {
    color: #1b1708;
    background-image: url('assets/auth/tab-login-on.png');
    text-shadow: 0 1px rgba(255, 255, 255, .3);
}

#authContainer .auth-tab-register.btn-primary {
    color: #1b1708;
    background-image: url('assets/auth/tab-register-on.png');
    text-shadow: 0 1px rgba(255, 255, 255, .3);
}

#authContainer .auth-form {
    position: relative;
    isolation: isolate;
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    aspect-ratio: 616 / 840;
    margin: 0;
    padding: 10% 12% 7%;
    border: 0;
    border-radius: 0;
    clip-path: none;
    background: url('assets/auth/form-border.png') center / 100% 100% no-repeat;
    box-shadow: none;
}

#authContainer .auth-form::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 2.8% 2.6% 2.4%;
    opacity: .35;
    background: url('assets/auth/form-back.png') center / 100% 100% no-repeat;
    transform: scale(1.15);
    transform-origin: center;
    pointer-events: none;
}

#authContainer .auth-form>* {
    position: relative;
    z-index: 1;
}

#authContainer .input-group {
    width: 100%;
    height: auto;
    aspect-ratio: 413 / 82;
    margin: 0 0 8%;
    background: url('assets/auth/input-field.png') center / 100% 100% no-repeat;
}

#authContainer .input-group input,
#authContainer .input-group select {
    width: 100%;
    height: 100%;
    padding: 8px 24px 4px;
    border: 0;
    border-radius: 0;
    color: #f3d258;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    filter: none;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(15px, 4.1vw, 20px);
    font-weight: 400;
}

#authContainer .input-group input:focus {
    box-shadow: none;
}

#authContainer .input-group label,
#authContainer .input-group input:focus~label,
#authContainer .input-group input:not(:placeholder-shown)~label {
    left: 24px;
    top: 50%;
    padding: 0;
    transform: translateY(-50%);
    border-radius: 0;
    color: #f0d160;
    background: transparent;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(14px, 3.9vw, 19px);
    font-weight: 400;
    text-shadow: 0 0 4px rgba(255, 211, 52, .28), 0 2px 3px #000;
}

#authContainer .input-group input:not(:placeholder-shown)~label {
    opacity: 0;
}

.auth-remember-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -1% 0 5%;
}

#authContainer #rememberMe {
    appearance: none;
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    border: 0;
    background: url('assets/auth/checkbox-off.png') center / contain no-repeat;
    cursor: pointer;
}

#authContainer #rememberMe:checked {
    background-image: url('assets/auth/checkbox-on.png');
    filter: drop-shadow(0 0 3px rgba(255, 224, 82, .95)) drop-shadow(0 0 7px rgba(255, 190, 0, .62));
}

.auth-remember-row label {
    color: #aaa79e;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(14px, 3.9vw, 19px);
    font-weight: 400;
    cursor: pointer;
    text-shadow: 0 2px 4px #000;
}

#authContainer .auth-submit {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 413 / 135;
    margin: 0 0 3%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 9% 0;
    border: 0;
    border-radius: 0;
    clip-path: none;
    color: #201a07;
    background: url('assets/auth/tab-login-on.png') center / 100% 100% no-repeat;
    box-shadow: none;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(18px, 5.1vw, 25px);
    font-weight: 600;
    line-height: 1;
}

#authContainer .auth-submit:active {
    transform: translateY(2px) scale(.985);
    filter: brightness(.72);
}

#authContainer .text-button {
    color: #aaa79f;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(12px, 3.2vw, 15px);
    font-weight: 400;
    text-shadow: 0 2px 4px #000;
}

#authContainer #loginForm #forgotPasswordBtn {
    position: absolute;
    left: 50%;
    bottom: 8%;
    margin: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: clamp(10px, 2.8vw, 13px);
}

#authContainer #loginForm .auth-submit {
    top: -6px;
    width: 92%;
    margin-right: auto;
    margin-left: auto;
}

#authContainer #registerForm {
    padding-top: 10%;
}

#authContainer #registerForm .input-group {
    margin-bottom: 4.5%;
}

#authContainer #registerForm .auth-submit {
    width: 92%;
    margin-top: -1%;
    margin-right: auto;
    margin-left: auto;
}

/* Verification stage needs a more compact button to remain inside the frame. */
#authContainer #registerForm:has(#verifyCodeGroup[style*="display: block"]) .auth-submit {
    width: 72%;
    margin: -1% auto 0;
    font-size: clamp(13px, 3.7vw, 18px);
}

/* Once the email is sent, keep only the code step inside the fixed PNG frame. */
#authContainer #registerForm.verification-stage {
    padding-top: 27%;
}

#authContainer #registerForm.verification-stage .input-group:not(#verifyCodeGroup) {
    display: none;
}

#authContainer #registerForm.verification-stage #verifyCodeGroup {
    margin-bottom: 8%;
}

#authContainer #registerForm.verification-stage .auth-submit {
    width: 72%;
    margin: 0 auto;
}

#authContainer #resetPasswordForm {
    padding-top: 10%;
}

#authContainer .auth-form-title {
    color: #f0d160;
    font-family: 'Share Tech Mono', monospace;
    font-weight: 500;
}

#authContainer .auth-form-help {
    color: #b8b4a9;
}

/* Project-wide restrained text glow language. */
:where(
    .text-button,
    .auth-form-title,
    .nav-item.active,
    .timer-display,
    .room-code,
    .trait-cat-label,
    .trait-val-label,
    .settings-section-title,
    .profile-level,
    .vote-count,
    #authContainer .input-group label,
    #authContainer .input-group input
) {
    text-shadow: 0 0 3px rgba(255, 212, 48, .42), 0 0 7px rgba(255, 196, 24, .16);
}

:where(
    .btn-primary,
    .industrial-cta,
    #authContainer .auth-tab.btn-primary,
    #authContainer .auth-submit
) {
    -webkit-text-stroke: .4px rgba(255, 221, 92, .72) !important;
    text-shadow:
        0 0 2px rgba(255, 239, 157, .88),
        0 0 5px rgba(255, 207, 43, .58),
        0 0 10px rgba(255, 183, 0, .24) !important;
}

@media (max-width: 380px) {
    #authContainer {
        padding-inline: 14px;
    }

    #authContainer .bunker-logo-box {
        min-height: 184px;
    }

    #authContainer .brand-logo-auth {
        margin-top: 12px;
    }

    #authContainer .lang-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        font-size: 12px;
    }
}

/* Mobile polish: balanced join row and artwork-cropped toolbar. */
#tabPlay .join-console {
    grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr);
    gap: 7px;
}

#tabPlay .join-console .btn-secondary {
    aspect-ratio: 741 / 418;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 45% 7px 13px;
    overflow: hidden;
    color: #211b0b;
    font-size: clamp(10px, 2.8vw, 13px);
    line-height: 1;
    text-align: left;
    white-space: nowrap;
}

#tabPlay .join-console .input-group {
    padding-inline: 16px;
}

#tabPlay .join-console .input-group label {
    left: 24px;
}

#mainApp .bottom-nav {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 3.55 / 1;
    margin: 0;
    padding: 0 3%;
    overflow: hidden;
    background-size: 100% auto;
    background-position: center 43%;
    background-repeat: no-repeat;
}

#mainApp .nav-item {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    padding: 0 2px 10px;
    overflow: hidden;
    line-height: 1;
}

#mainApp .nav-item::before {
    top: 8px;
    width: clamp(48px, 16vw, 70px);
    height: clamp(48px, 16vw, 70px);
}

@media (max-width: 380px) {
    #mainApp .nav-item {
        padding-bottom: 8px;
        font-size: 9px;
    }

    #mainApp .nav-item::before {
        top: 6px;
        width: 48px;
        height: 48px;
    }

    #tabPlay .join-console .btn-secondary {
        padding-left: 10px;
    }
}

@media (max-height: 740px) {
    #mainApp .bottom-nav {
        aspect-ratio: 3.55 / 1;
    }
}

/* Final lobby-entry sizing. */
#tabPlay .join-console {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 8px;
}

#tabPlay .join-console .btn-secondary {
    justify-content: flex-start;
    padding: 0 44% 7px 14%;
    font-size: clamp(10px, 2.7vw, 13px);
    text-align: left;
    text-indent: 0;
}

@media (max-width: 380px) {
    #tabPlay .join-console {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    }

    #tabPlay .join-console .btn-secondary {
        padding-left: 13%;
        font-size: 10px;
    }
}

/* Final story transparency layer. */
#tabPlay .mission-brief {
    isolation: isolate;
    background: none !important;
    overflow: hidden;
}

#tabPlay .mission-brief::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    opacity: .75;
    background: url('assets/ui/story-frame.png') center / 100% 100% no-repeat;
    pointer-events: none;
}

#tabPlay .mission-brief p {
    position: relative;
    z-index: 1;
}

/* Larger lobby-entry control with text kept inside its safe area. */
#tabPlay .join-console {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 8px;
}

#tabPlay .join-console .btn-secondary {
    justify-content: flex-start;
    padding: 0 44% 7px 14%;
    font-size: clamp(10px, 2.7vw, 13px);
    text-align: left;
    text-indent: 0;
}

@media (max-width: 380px) {
    #tabPlay .join-console {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    }

    #tabPlay .join-console .btn-secondary {
        padding-left: 13%;
        font-size: 10px;
    }
}

/* Story artwork is translucent; its text remains fully opaque. */
#tabPlay .mission-brief {
    isolation: isolate;
    background: none !important;
    overflow: hidden;
}

#tabPlay .mission-brief::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    opacity: .75;
    background: url('assets/ui/story-frame.png') center / 100% 100% no-repeat;
    pointer-events: none;
}

#tabPlay .mission-brief p {
    position: relative;
    z-index: 1;
}

/* Lobby composition matched to the supplied prototype. */
#mainApp .main-app-shell {
    padding: 10px 14px 0 !important;
}

#mainApp .app-brand-header {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    min-height: 105px;
    margin: 0 0 8px;
    padding: 0;
}

#mainApp .app-brand-header .brand-logo-header {
    width: 190px;
    max-height: 107px;
}

#mainApp .emergency-status-chip {
    display: none;
}

#tabPlay {
    gap: 0;
    padding: 0 5px 12px;
    scrollbar-width: none;
}

#tabPlay::-webkit-scrollbar {
    display: none;
}

#tabPlay .mission-brief {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    aspect-ratio: 859 / 553;
    min-height: 0;
    margin: 0 0 20px !important;
    padding: 54px 42px 34px !important;
    border: 0;
    border-radius: 0;
    clip-path: none;
    background: url('assets/ui/story-frame.png') center / 100% 100% no-repeat;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .42);
}

#tabPlay .mission-brief::after {
    display: none;
}

#tabPlay .mission-brief p {
    max-width: 340px;
    margin: 0 !important;
    color: #f5d76a !important;
    font-size: clamp(13px, 3.8vw, 18px) !important;
    line-height: 1.28 !important;
    text-align: center;
    text-wrap: balance;
    text-shadow: 0 2px 3px #000, 0 0 9px rgba(228, 184, 30, .2);
}

#tabPlay .industrial-cta,
#tabPlay .industrial-cta:hover {
    flex: 0 0 auto;
    width: calc(100% - 12px);
    min-height: 0;
    aspect-ratio: 847 / 283;
    margin: 0 auto;
    font-size: clamp(18px, 5vw, 25px);
}

#tabPlay .lobby-divider {
    flex: 0 0 auto;
    margin: 7px 0 9px !important;
    color: #d7bd58 !important;
    font-family: Impact, 'Arial Narrow', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 1px;
    text-shadow: 0 2px 3px #000;
}

#tabPlay .join-console {
    flex: 0 0 auto;
    width: calc(100% - 12px);
    margin: 0 auto;
}

#tabPlay .join-console .btn-secondary {
    overflow: hidden;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

#mainApp .bottom-nav {
    flex: 0 0 112px;
    width: calc(100% - 6px);
    align-self: center;
}

@media (max-width: 380px) {
    #mainApp .main-app-shell {
        padding-inline: 9px !important;
    }

    #mainApp .app-brand-header {
        min-height: 87px;
        margin-bottom: 5px;
    }

    #mainApp .app-brand-header .brand-logo-header {
        width: 160px;
        max-height: 90px;
    }

    #tabPlay .mission-brief {
        padding: 45px 32px 28px !important;
        margin-bottom: 14px !important;
    }

    #tabPlay .industrial-cta,
    #tabPlay .industrial-cta:hover {
        width: 100%;
    }

    #tabPlay .join-console {
        width: 100%;
    }

    #mainApp .bottom-nav {
        flex-basis: 98px;
    }
}

@media (max-height: 740px) {
    #mainApp .app-brand-header {
        min-height: 72px;
    }

    #mainApp .app-brand-header .brand-logo-header {
        width: 136px;
        max-height: 76px;
    }

    #tabPlay .mission-brief {
        width: 88%;
        align-self: center;
        margin-bottom: 8px !important;
        padding-top: 38px !important;
    }

    #tabPlay .industrial-cta,
    #tabPlay .industrial-cta:hover {
        width: 82%;
    }

    #tabPlay .lobby-divider {
        margin-block: 2px 4px !important;
    }

    #tabPlay .join-console {
        width: 82%;
    }

    #mainApp .bottom-nav {
        flex-basis: 88px;
        min-height: 88px;
    }

    #mainApp .nav-item {
        padding-top: 48px;
    }

    #mainApp .nav-item::before {
        width: 42px;
        height: 42px;
    }
}

/* Asset-driven bunker skin */
body::before {
    background-image: linear-gradient(rgba(8, 7, 3, .08), rgba(7, 6, 3, .28)), url('assets/ui/background-main.png');
    background-position: center;
    filter: brightness(.84) contrast(1.08) saturate(.88);
}

.app-brand-header .brand-logo-header {
    width: min(190px, 100%);
    max-height: 105px;
    object-fit: contain;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .78)) drop-shadow(0 0 8px rgba(244, 201, 40, .18));
}

.industrial-cta {
    min-height: 124px;
    padding: 20px 78px 26px 34px;
    border: 0;
    outline: 0;
    clip-path: none;
    color: #211b08;
    background: url('assets/ui/button-primary.png') center / 100% 100% no-repeat;
    box-shadow: none;
    text-shadow: 0 1px rgba(255, 255, 255, .28), 0 2px 3px rgba(0, 0, 0, .22);
}

.industrial-cta::before {
    content: '';
    position: absolute;
    right: 30px;
    top: 50%;
    width: 42px;
    height: 42px;
    transform: translateY(-52%);
    background: url('assets/ui/icon-create.png') center / contain no-repeat;
}

.industrial-cta::after {
    display: none;
}

.industrial-cta:hover {
    background: url('assets/ui/button-primary.png') center / 100% 100% no-repeat;
}

.industrial-cta:active {
    transform: translateY(2px) scale(.992);
    background-image: url('assets/ui/button-primary-pressed.png');
    color: #f2cb42;
}

.join-console {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    align-items: stretch;
    gap: 8px;
    padding: 0 !important;
    border: 0;
    background: none;
    box-shadow: none;
    clip-path: none;
}

.join-console .input-group {
    min-height: 82px;
    margin: 0 !important;
    padding: 14px 22px;
    background: url('assets/ui/code-frame.png') center / 100% 100% no-repeat;
}

.join-console .input-group input {
    height: 54px;
    padding: 18px 8px 4px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #f4d256;
    font-size: 20px;
    letter-spacing: 3px;
}

.join-console .input-group input:focus {
    box-shadow: none;
}

.join-console .input-group label {
    left: 30px;
    top: 31px;
    color: #9a9a92;
}

.join-console .input-group input:focus+label,
.join-console .input-group input:not(:placeholder-shown)+label {
    top: 17px;
    font-size: 9px;
}

.join-console .btn-secondary {
    min-height: 82px;
    margin: 0 !important;
    padding: 16px 10px 20px;
    border: 0;
    clip-path: none;
    color: #24200e;
    font-size: 14px;
    background: url('assets/ui/button-join-static.png') center / 100% 100% no-repeat;
    box-shadow: none;
}

.join-console .btn-secondary:active {
    transform: translateY(2px) scale(.98);
    background-image: url('assets/ui/button-join-active.png');
}

.bottom-nav {
    min-height: 105px;
    margin: 0 3px max(3px, env(safe-area-inset-bottom));
    padding: 8px 13px 5px;
    border: 0;
    border-radius: 0;
    background: url('assets/ui/toolbar-left.png') center / 100% 100% no-repeat;
    box-shadow: none;
    overflow: visible;
}

.bottom-nav[data-active="tabProfile"] {
    background-image: url('assets/ui/toolbar-centre.png');
}

.bottom-nav[data-active="tabSettings"] {
    background-image: url('assets/ui/toolbar-right.png');
}

.nav-item {
    min-width: 0;
    padding: 59px 2px 8px;
    border: 0;
    color: #aaa69a;
    font-size: 11px;
    text-shadow: 0 2px 3px #000;
    background: none !important;
}

.nav-item::before {
    content: '' !important;
    top: 10px;
    width: 52px;
    height: 52px;
    background: center / contain no-repeat;
    filter: none;
    opacity: 1;
}

.nav-item:nth-child(1)::before {
    background-image: url('assets/ui/icon-game-off.png');
}

.nav-item:nth-child(2)::before {
    background-image: url('assets/ui/icon-profile-off.png');
}

.nav-item:nth-child(3)::before {
    background-image: url('assets/ui/icon-settings-off.png');
}

.nav-item:nth-child(1).active::before {
    background-image: url('assets/ui/icon-game-on.png');
}

.nav-item:nth-child(2).active::before {
    background-image: url('assets/ui/icon-profile-on.png');
}

.nav-item:nth-child(3).active::before {
    filter: sepia(1) saturate(3) drop-shadow(0 0 7px #ffd52d);
}

.nav-item.active {
    color: #f2cd48;
}

@media (max-width: 380px) {
    .industrial-cta {
        min-height: 108px;
        padding-right: 66px;
        font-size: 19px;
    }

    .industrial-cta::before {
        right: 25px;
        width: 36px;
        height: 36px;
    }

    .join-console {
        grid-template-columns: minmax(0, 1fr) 104px;
    }

    .join-console .btn-secondary {
        font-size: 12px;
    }

    .bottom-nav {
        min-height: 96px;
    }

    .nav-item {
        padding-top: 54px;
        font-size: 10px;
    }

    .nav-item::before {
        width: 47px;
        height: 47px;
    }
}

.bunker-logo-box p {
    font-family: sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Перемикач мов у стилі скріншота */
.lang-switcher {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.lang-btn {
    background: transparent;
    border: none;
    color: #000;
    font-weight: 800;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    font-family: sans-serif;
}

.lang-btn.active {
    background: rgba(0, 0, 0, 0.1);
}

/* Glass Panels (Текстові блоки) */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    color: #fff;
    line-height: 1.5;
    font-size: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Inputs & Buttons */
.input-group {
    position: relative;
    margin-bottom: 15px;
}

.input-group input,
.input-group select {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--glass-border);
    padding: 16px;
    color: #fff;
    font-size: 16px;
    outline: none;
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.input-group input:focus,
.input-group select:focus {
    border-color: var(--accent-yellow);
}

.input-group label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
    transition: all 0.2s;
}

.input-group input:focus~label,
.input-group input:not(:placeholder-shown)~label {
    top: -10px;
    background: #000;
    padding: 2px 8px;
    font-size: 12px;
    color: var(--accent-yellow);
    border-radius: 10px;
}

/* Кнопки в стилі скріншота */
.btn {
    width: 100%;
    padding: 16px;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 600;
    cursor: pointer;
    border-radius: 16px;
    margin-bottom: 15px;
    transition: all 0.2s;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
}

.btn-primary:hover {
    background: rgba(250, 204, 21, 0.1);
}

.btn-secondary {
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
}

.btn-danger {
    border-color: var(--accent-red);
    color: var(--accent-red);
}

.text-button {
    display: block;
    margin: 4px auto 0;
    padding: 8px;
    border: 0;
    background: transparent;
    color: var(--accent-yellow);
    cursor: pointer;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.auth-form-title {
    color: var(--accent-yellow);
    font-size: 18px;
    margin-bottom: 8px;
    text-align: center;
}

.auth-form-help {
    color: var(--text-muted);
    font-family: sans-serif;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 24px;
    text-align: center;
}

.player-sel-btn {
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: bold;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.2s;
    min-width: 40px;
    margin: 0;
}

.player-sel-btn:active {
    transform: scale(0.95);
}

.dossier-navigation {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 62px;
    align-items: center;
    gap: 7px;
    padding: 7px;
    margin-bottom: 4px;
    border: 1px solid rgba(250, 204, 21, .28);
    border-radius: 16px;
    background: rgba(5, 5, 5, .9);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}

.player-selector-sticky {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.player-selector-sticky::-webkit-scrollbar {
    display: none;
}

.player-selector-sticky .player-sel-btn {
    flex: 0 0 auto;
    min-width: 38px;
    min-height: 38px;
    padding: 7px 11px;
    border-radius: 12px;
    scroll-snap-align: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.player-selector-sticky .player-sel-btn.active {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(250, 204, 21, .28);
}

.intel-edge-btn {
    min-height: 42px;
    padding: 5px 3px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    color: #ddd;
    font: 800 9px/1 sans-serif;
    letter-spacing: .5px;
    cursor: pointer;
}

.intel-story-btn {
    border-color: rgba(255, 70, 45, .65);
    color: #ff725c;
}

.intel-bunker-btn {
    border-color: rgba(250, 204, 21, .65);
    color: var(--accent-yellow);
}

.swipe-hint {
    margin: 2px 0 8px;
    color: rgba(255, 255, 255, .4);
    text-align: center;
    font-size: 9px;
    letter-spacing: .5px;
}

.intel-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: flex-end;
}

.intel-overlay.open {
    display: flex;
}

.intel-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, .78);
    backdrop-filter: blur(5px);
}

.intel-panel {
    position: relative;
    width: min(100%, 480px);
    max-height: 84dvh;
    margin: 0 auto;
    padding: 12px 20px max(20px, env(safe-area-inset-bottom));
    overflow-y: auto;
    border: 1px solid rgba(250, 204, 21, .45);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(160deg, rgba(25, 22, 14, .98), rgba(5, 5, 5, .99));
    box-shadow: 0 -16px 50px rgba(0, 0, 0, .75);
    animation: intelSlideUp .28s cubic-bezier(.2, .8, .2, 1);
}

.intel-panel-handle {
    width: 44px;
    height: 4px;
    margin: 0 auto 18px;
    border-radius: 4px;
    background: #666;
}

.intel-kicker {
    color: var(--accent-red);
    font-size: 10px;
    letter-spacing: 2px;
}

.intel-panel h2 {
    margin: 8px 0 18px;
    color: var(--accent-yellow);
    font: 900 24px/1.15 sans-serif;
}

.intel-body {
    color: #ddd;
    line-height: 1.6;
}

.intel-section {
    margin-bottom: 16px;
    padding: 14px;
    border-left: 3px solid var(--accent-yellow);
    border-radius: 0 12px 12px 0;
    background: rgba(255, 255, 255, .045);
}

.intel-section strong {
    display: block;
    margin-bottom: 6px;
    color: var(--accent-yellow);
    font-size: 11px;
    letter-spacing: 1px;
}

@keyframes intelSlideUp {
    from {
        transform: translateY(100%);
        opacity: .4;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

button,
.trait-div-row,
.vote-item,
.player-sel-btn {
    touch-action: manipulation;
}

button:active,
.vote-item:active,
.trait-div-row:active {
    filter: brightness(1.35);
    transform: scale(.975);
}

/* Bottom Nav */
.bottom-nav {
    display: none;
    flex-direction: row;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
}

.bottom-nav.active {
    display: flex;
}

.nav-item {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 600;
}

.nav-item.active {
    color: var(--accent-yellow);
}

/* Tabs */
.tab-view {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
}

.tab-view.active {
    display: flex;
}

/* Game Specific */
.game-view {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
}

.game-view.active {
    display: flex;
}

.admin-timer-controls {
    display: none;
    grid-template-columns: repeat(3, max-content) minmax(120px, 1fr);
    gap: 6px;
    margin: 0 auto 12px;
    width: 100%;
}

.admin-control-btn {
    width: auto;
    min-height: 34px;
    margin: 0;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 10px;
    background: rgba(8, 8, 8, .8);
    color: #ddd;
    font: 700 11px/1 sans-serif;
    cursor: pointer;
}

.admin-control-primary {
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
}

.dossier-scroll-container {
    flex: 0 0 auto;
    min-height: 260px;
    overflow: visible;
    background: rgba(0, 0, 0, .3);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dossier-note {
    width: 100%;
    min-height: 90px;
    resize: vertical;
    margin-top: 12px;
    padding: 10px;
    border: 1px dashed #777;
    border-radius: 8px;
    background: rgba(255, 255, 255, .25);
    color: #111;
    font: 14px/1.4 'Share Tech Mono', monospace;
}

.special-trait-row {
    border-left: 4px solid #8b0000 !important;
}

.action-card-button {
    margin: 8px 0 0;
    padding: 9px;
    font-size: 12px;
}

.vote-count-badge {
    min-width: 30px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--accent-red);
    color: white;
    font-weight: 900;
    text-align: center;
}

.vote-count-badge.pulse {
    animation: votePulse .45s ease-out;
}

@keyframes votePulse {
    0% {
        transform: scale(.5);
    }

    55% {
        transform: scale(1.35);
        box-shadow: 0 0 20px var(--accent-red);
    }

    100% {
        transform: scale(1);
    }
}

.vote-confirm-bar {
    position: sticky;
    bottom: 0;
    z-index: 30;
    padding: 10px 0 max(6px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, rgba(5, 5, 5, .96) 28%);
}

.vote-confirm-btn {
    display: block !important;
    min-height: 54px;
    margin: 0;
    box-shadow: 0 0 22px rgba(250, 204, 21, .18);
}

.vote-confirm-btn:not(:disabled) {
    animation: confirmReady .32s ease-out;
}

@keyframes confirmReady {
    from {
        transform: translateY(12px);
        opacity: .55;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 380px) {
    .admin-timer-controls {
        grid-template-columns: repeat(3, 1fr);
    }

    .admin-control-primary {
        grid-column: 1 / -1;
    }
}

.player-list {
    list-style: none;
    margin: 20px 0;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    background: var(--glass-bg);
    padding: 10px;
}

.player-list li {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
}

.player-list li:last-child {
    border-bottom: none;
}

/* Trait Cards (My Dossier) */
.trait-card {
    background: rgba(20, 20, 20, 0.7);
    color: var(--text-main);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s, border-color 0.3s;
}

.trait-card:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.2);
    border-color: var(--accent-yellow);
    box-shadow: 0 8px 25px rgba(250, 204, 21, 0.2);
}

.trait-card::before {
    content: 'TOP SECRET';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    font-size: 32px;
    color: rgba(255, 255, 255, 0.03);
    font-weight: 900;
    font-family: 'Share Tech Mono', monospace;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 5px;
}

.trait-category {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--accent-yellow);
    margin-bottom: 8px;
    font-family: 'Share Tech Mono', sans-serif;
    letter-spacing: 1px;
}

.trait-value {
    font-size: 18px;
    font-weight: bold;
    position: relative;
    z-index: 1;
    letter-spacing: 0.5px;
}

.reveal-hint {
    font-size: 11px;
    color: var(--accent-red);
    margin-top: 10px;
    text-align: right;
    text-transform: uppercase;
    font-family: sans-serif;
    opacity: 0.8;
}

.trait-card.public-revealed {
    border: 1px solid var(--accent-green);
    background: rgba(57, 255, 20, 0.05);
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.1);
}

.trait-card.public-revealed::after {
    content: 'РОЗСЕКРЕЧЕНО';
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--accent-green);
    border: 2px solid var(--accent-green);
    padding: 2px 5px;
    font-size: 10px;
    font-weight: bold;
    transform: rotate(10deg);
    border-radius: 4px;
    font-family: sans-serif;
}

/* Card Picking */
.deck-card {
    width: 65px;
    height: 95px;
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.9)), repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.03) 5px, rgba(255, 255, 255, 0.03) 10px);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s, box-shadow 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-yellow);
    font-family: 'Share Tech Mono', sans-serif;
    font-size: 26px;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.5);
    position: relative;
    overflow: hidden;
}

.deck-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.deck-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-yellow);
    box-shadow: 0 10px 20px rgba(250, 204, 21, 0.2);
}

.deck-card.tentative-me {
    border-color: var(--accent-yellow);
    background: linear-gradient(145deg, rgba(250, 204, 21, .38), rgba(80, 55, 0, .75));
    box-shadow: 0 14px 28px rgba(0, 0, 0, .6), 0 0 22px rgba(250, 204, 21, .55), inset 0 0 18px rgba(255, 255, 255, .12);
    pointer-events: none;
    color: #fff;
    font-size: 12px;
    transform: translateY(-11px) rotate(-2deg) scale(1.08);
    animation: cardClaim .42s cubic-bezier(.18, .9, .25, 1.25), cardSelectedGlow 1.7s ease-in-out infinite alternate;
}

.deck-card.tentative-other {
    opacity: 0.8;
    border-color: var(--accent-red);
    pointer-events: none;
    color: var(--accent-red);
    background: #1a0505;
    font-size: 12px;
}

.deck-card.confirmed {
    opacity: .72;
    border-color: #8d7418;
    background: linear-gradient(145deg, #211c0c, #0d0d0d);
    pointer-events: none;
    color: #d6bd55;
    font-size: 12px;
    transform: scale(.96);
    animation: cardLock .38s ease-out;
}

.deck-card.confirmed::before {
    content: 'ЗАКРІПЛЕНО';
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    color: rgba(250, 204, 21, .7);
    font: 700 6px/1 sans-serif;
    letter-spacing: .7px;
}

@keyframes cardClaim {
    from {
        transform: translateY(0) rotate(0) scale(1);
        filter: brightness(2);
    }

    to {
        transform: translateY(-11px) rotate(-2deg) scale(1.08);
        filter: brightness(1);
    }
}

@keyframes cardSelectedGlow {
    from {
        box-shadow: 0 12px 25px rgba(0, 0, 0, .6), 0 0 12px rgba(250, 204, 21, .35);
    }

    to {
        box-shadow: 0 15px 32px rgba(0, 0, 0, .7), 0 0 28px rgba(250, 204, 21, .72);
    }
}

@keyframes cardLock {
    from {
        transform: scale(1.14) rotate(2deg);
        opacity: 1;
    }

    to {
        transform: scale(.96);
        opacity: .72;
    }
}

/* Voting Item */
.vote-item {
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.vote-item:hover {
    border-color: var(--accent-red);
}

.vote-item.selected {
    border-color: var(--accent-red);
    background: rgba(255, 51, 51, 0.2);
}

.vote-item.voted-out {
    opacity: 0.3;
    text-decoration: line-through;
    pointer-events: none;
}

/* Public Traits Block (Other Players Top Secret) */
.public-player-block {
    background: #2a2a2a;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    border-left: 5px solid var(--accent-yellow);
    position: relative;
    overflow: hidden;
}

.public-player-name {
    font-weight: bold;
    color: var(--accent-yellow);
    margin-bottom: 10px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.public-player-trait {
    font-size: 14px;
    margin-bottom: 5px;
    color: #ccc;
    background: #111;
    padding: 5px 8px;
    border-radius: 4px;
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.top-secret-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    color: rgba(255, 51, 51, 0.4);
    border: 4px solid rgba(255, 51, 51, 0.4);
    padding: 5px 10px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 8px;
    text-transform: uppercase;
    font-family: sans-serif;
    pointer-events: none;
    white-space: nowrap;
}

@keyframes stampIn {
    0% {
        transform: scale(3) rotate(0deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(-15deg);
        opacity: 1;
    }
}

.kick-anim-enter>div {
    animation: stampIn 0.5s ease-out forwards;
}

.blurred-text {
    filter: blur(4px);
    opacity: 0.5;
    user-select: none;
}

.player-voted-icon {
    margin-left: 10px;
    font-size: 16px;
    color: var(--accent-green);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-green);
    box-shadow: 0 0 8px var(--accent-green);
    flex: 0 0 auto;
}

.status-dot.offline {
    background: #666;
    box-shadow: none;
}

.player-meta {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 11px;
}

.eyebrow,
.section-title {
    color: var(--accent-yellow);
    letter-spacing: 2px;
    text-align: center;
}

.eyebrow {
    font-size: 11px;
    margin-bottom: 10px;
}

.section-title {
    font-size: 14px;
    margin: 10px 0;
}

.results-panel {
    text-align: center;
    border-color: var(--accent-green);
    margin-top: auto;
}

.results-panel h2 {
    color: var(--accent-green);
    margin-bottom: 12px;
}

.muted-center {
    color: var(--text-muted);
    text-align: center;
    margin: 10px 0 20px;
}

.btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === 2054 INDUSTRIAL EMERGENCY THEME === */
:root {
    --steel-0: #080908;
    --steel-1: #11130f;
    --steel-2: #24261f;
    --steel-3: #4b4b3e;
    --hazard: #f4c928;
    --hazard-hot: #ffe66b;
    --rust: #6f2918;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: .12;
    background:
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 230, 140, .08) 3px 4px),
        radial-gradient(circle at 50% 15%, rgba(255, 210, 60, .18), transparent 28%);
    mix-blend-mode: screen;
}

.mobile-wrapper {
    background: linear-gradient(180deg, rgba(11, 12, 10, .28), rgba(4, 5, 4, .62));
    border-inline: 1px solid rgba(244, 201, 40, .08);
}

.app-brand-header {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(142px, .85fr);
    align-items: center;
    gap: 12px;
    padding: 8px 2px 14px;
    margin-bottom: 6px;
}

.app-brand-header .brand-logo-header {
    width: min(180px, 100%);
    max-height: 68px;
    filter: invert(84%) sepia(98%) saturate(980%) hue-rotate(346deg) brightness(101%) contrast(95%) drop-shadow(0 0 10px rgba(244, 201, 40, .25));
}

.emergency-status-chip {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    min-height: 54px;
    padding: 8px 9px;
    border: 1px solid #5e6057;
    border-radius: 5px;
    background: linear-gradient(145deg, rgba(49, 52, 47, .92), rgba(12, 13, 12, .96));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 5px 16px rgba(0, 0, 0, .55);
    color: #ddd9c7;
}

.emergency-status-chip small {
    display: block;
    font: 700 7px/1 sans-serif;
    color: #aaa;
}

.emergency-status-chip strong {
    display: block;
    margin-top: 3px;
    font: 900 10px/1 sans-serif;
    color: var(--hazard);
}

.status-bars {
    grid-column: 2;
    display: flex;
    gap: 2px;
}

.emergency-status-chip i {
    display: block;
    width: 13px;
    height: 4px;
    margin-top: 6px;
    background: var(--hazard);
    box-shadow: 0 0 6px rgba(244, 201, 40, .65);
}

.status-orbit {
    font-size: 26px;
    color: var(--hazard);
    text-shadow: 0 0 9px rgba(244, 201, 40, .6);
}

.glass-panel,
.player-list,
.join-console {
    position: relative;
    border: 1px solid #55584f;
    border-radius: 7px;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, .07), transparent 24%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
        linear-gradient(145deg, rgba(30, 32, 28, .95), rgba(7, 8, 7, .96));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .035),
        inset 0 -20px 40px rgba(0, 0, 0, .24),
        0 12px 28px rgba(0, 0, 0, .55);
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}

.mission-brief {
    border-color: #696b60;
    padding: 30px 22px !important;
    color: var(--hazard-hot);
}

.mission-brief::after {
    content: 'AUXILIARY MODE ACTIVE';
    position: absolute;
    right: 12px;
    bottom: 7px;
    color: rgba(244, 201, 40, .42);
    font: 700 6px/1 sans-serif;
    letter-spacing: 1px;
}

.mission-brief p {
    color: #f0d66d !important;
    font-family: Impact, 'Arial Narrow', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-shadow: 0 2px 8px #000;
}

.btn {
    position: relative;
    min-height: 50px;
    border-radius: 5px;
    border-color: #606158;
    background: linear-gradient(180deg, #252720, #0e0f0d);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 6px 13px rgba(0, 0, 0, .45);
    clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
    letter-spacing: .5px;
}

.btn-primary {
    border-color: #d4a814;
    color: #151307;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent) -120% 0 / 55% 100% no-repeat,
        linear-gradient(180deg, #ffe774, #d6a80d 65%, #8d6500);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, .45), 0 0 18px rgba(244, 201, 40, .3), 0 8px 16px rgba(0, 0, 0, .55);
    text-shadow: 0 1px rgba(255, 255, 255, .3);
}

.btn-primary:hover {
    background-position: 180% 0, 0 0;
    transition: background-position .7s ease;
}

.industrial-cta {
    min-height: 70px;
    border: 5px solid #55574f;
    outline: 2px solid #1a1b18;
    font-family: Impact, 'Arial Narrow', sans-serif;
    font-size: 24px;
    letter-spacing: 1px;
}

.industrial-cta::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 7px;
    background: repeating-linear-gradient(135deg, #1c1b16 0 8px, var(--hazard) 8px 16px);
}

.input-group input,
.input-group select {
    border-radius: 4px;
    border-color: #50524c;
    background: linear-gradient(180deg, rgba(5, 6, 5, .92), rgba(25, 26, 23, .94));
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.input-group input:focus {
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7), 0 0 0 2px rgba(244, 201, 40, .18), 0 0 14px rgba(244, 201, 40, .2);
}

.bottom-nav {
    margin: 0 5px max(5px, env(safe-area-inset-bottom));
    border: 1px solid #55584f;
    border-radius: 6px;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #2a2c26, #0b0c0a);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 -7px 22px rgba(0, 0, 0, .55);
    overflow: hidden;
}

.nav-item {
    position: relative;
    padding: 31px 2px 10px;
    border-right: 1px solid rgba(255, 255, 255, .08);
    font-family: Impact, 'Arial Narrow', sans-serif;
    font-size: 12px;
    letter-spacing: .6px;
}

.nav-item:last-child {
    border-right: 0;
}

.nav-item::before {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    filter: grayscale(1);
    opacity: .65;
}

.nav-item:nth-child(1)::before {
    content: '◉';
}

.nav-item:nth-child(2)::before {
    content: '♟';
}

.nav-item:nth-child(3)::before {
    content: '⚙';
}

.nav-item.active {
    color: var(--hazard);
    text-shadow: 0 0 10px rgba(244, 201, 40, .45);
    background: radial-gradient(circle at 50% 20%, rgba(244, 201, 40, .16), transparent 55%);
}

.nav-item.active::before {
    filter: none;
    opacity: 1;
}

.vote-item,
.trait-card,
.public-player-block,
.deck-card {
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), 0 7px 18px rgba(0, 0, 0, .5);
}

.vote-item.selected {
    border-color: var(--hazard);
    background: linear-gradient(90deg, rgba(244, 201, 40, .22), rgba(45, 30, 5, .72));
    box-shadow: inset 4px 0 var(--hazard), 0 0 18px rgba(244, 201, 40, .2);
}

.dossier-navigation {
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(42, 44, 38, .96), rgba(8, 9, 8, .97));
}

.intel-panel {
    border-radius: 12px 12px 0 0;
    background: linear-gradient(160deg, #292a24, #080908 62%);
}

@media (max-width: 380px) {
    .app-brand-header {
        grid-template-columns: 1fr 132px;
        gap: 7px;
    }

    .emergency-status-chip {
        transform: scale(.9);
        transform-origin: right center;
    }

    .mission-brief {
        padding: 24px 16px !important;
    }

    .mission-brief p {
        font-size: 15px !important;
    }

    .industrial-cta {
        min-height: 62px;
        font-size: 21px;
    }
}

/* Avatars */
.avatar-mini {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-yellow);
}

.avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent-yellow);
    margin-bottom: 10px;
    background: #333;
}

.player-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}

.lvl-badge {
    background: var(--accent-yellow);
    color: #000;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    font-family: sans-serif;
}

/* Toasts */
.toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-yellow);
    border-radius: 20px;
    padding: 12px 20px;
    color: #000;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.toast.show {
    opacity: 1;
}

.toast.error {
    background: var(--accent-red);
    color: #fff;
}

/* Physical Card Styles */
.physical-card {
    background: linear-gradient(135deg, #e3dac9 0%, #d5c7b3 100%);
    /* Paper color */
    border: 1px solid #b8a992;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(0, 0, 0, 0.1);
    color: #2b2b2b;
    border-radius: 8px;
    padding: 15px;
    position: relative;
    overflow: hidden;
    font-family: 'Courier New', Courier, monospace;
}

.physical-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)" opacity="0.1"/></svg>');
    opacity: 0.5;
    pointer-events: none;
}

.physical-card .public-player-name {
    color: #111;
    border-bottom: 2px solid #555;
    padding-bottom: 10px;
}

.physical-card .lvl-badge {
    background: #333;
    color: #fff;
}

.physical-card .trait-cat-label {
    color: #aaa397;
    font-weight: bold;
}

.physical-card .trait-val-label {
    color: inherit;
    text-shadow: none !important;
}

/* Voting screen — red emergency HUD and framed candidates. */
#gameVoting {
    padding: 4px 2px 18px;
    overflow: hidden;
}

.voting-status-panel {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 108px;
    margin: 0 auto 8px;
    padding: 13px 12%;
    background-image:
        url('assets/ui/lobby-frame-border.png'),
        url('assets/ui/lobby-frame-back.png');
    background-position: center, center;
    background-size: 100% 100%, 92% 72%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 8px 13px rgba(0, 0, 0, .58));
}

#gameVoting .voting-status-panel h2 {
    margin: 0 0 5px;
    color: #f04b43;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(20px, 5.7vw, 28px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.5px;
    -webkit-text-stroke: 0 transparent !important;
    text-shadow: 0 0 5px rgba(255, 49, 40, .62), 0 0 12px rgba(179, 0, 0, .24) !important;
}

#gameVoting #voteTimer {
    color: #eee9df;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(25px, 7vw, 34px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 3px;
    text-shadow: 0 0 6px rgba(255, 255, 255, .22) !important;
}

#gameVoting .voting-prompt {
    flex: 0 0 auto;
    margin: 3px 0 11px;
    color: #aaa59b;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(11px, 3.2vw, 14px);
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    text-shadow: none !important;
}

#gameVoting #votingList {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 0 7px;
    padding: 2px 0;
    overflow-y: auto;
    scrollbar-width: none;
}

#gameVoting #votingList::-webkit-scrollbar { display: none; }

#gameVoting .vote-item {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto 32px;
    align-items: center;
    gap: 8px;
    min-height: 78px;
    margin: 0 0 7px;
    padding: 11px 8.5%;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#gameVoting .vote-item::before,
#gameVoting .vote-item::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#gameVoting .vote-item::before {
    z-index: -2;
    inset: 13% 4.1% 15%;
    background: url('assets/ui/lobby-frame-back.png') center / 100% 100% no-repeat;
}

#gameVoting .vote-item::after {
    z-index: -1;
    background: url('assets/ui/lobby-frame-border.png') center / 100% 100% no-repeat;
}

#gameVoting .vote-item.selected {
    border: 0;
    background: rgba(182, 18, 13, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 54, 45, .82), 0 0 15px rgba(232, 36, 28, .3);
    transform: translateY(-2px) scale(1.01);
}

#gameVoting .vote-item.selected::after {
    filter: sepia(.55) saturate(2.2) hue-rotate(318deg) brightness(.9);
}

#gameVoting .vote-player-avatar {
    width: 43px;
    height: 43px;
    border: 1px solid rgba(200, 181, 117, .68);
    border-radius: 3px;
    object-fit: cover;
    background: #111;
}

#gameVoting .vote-player-name {
    min-width: 0;
    overflow: hidden;
    color: #ddd6c7;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#gameVoting .player-voted-icon {
    max-width: 70px;
    margin: 0;
    overflow: hidden;
    color: #61d65a;
    font-family: 'Share Tech Mono', monospace;
    font-size: 7px;
    font-weight: 400;
    line-height: 1.05;
    text-align: right;
}

#gameVoting .vote-count-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 112, 104, .66);
    border-radius: 50%;
    color: #fff1ed;
    background: radial-gradient(circle at 35% 28%, #ff625a, #a00e09 72%);
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    font-weight: 400;
    box-shadow: 0 0 8px rgba(231, 34, 26, .32);
}

#gameVoting .vote-confirm-bar {
    flex: 0 0 auto;
    width: 100%;
    padding: 5px 0 max(5px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, rgba(5, 5, 5, .78) 38%);
}

#gameVoting #confirmVoteBtn {
    display: block !important;
    width: 82%;
    min-height: 0;
    aspect-ratio: 413 / 135;
    margin: 0 auto;
    padding: 7px 9% 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    clip-path: none;
    color: #211b08;
    background: url('assets/auth/tab-login-on.png') center / 100% 100% no-repeat;
    box-shadow: none;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(11px, 3.3vw, 15px);
    font-weight: 600;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#gameVoting #confirmVoteBtn:disabled {
    color: #edcb50;
    background-image:
        linear-gradient(rgba(5, 5, 4, .75), rgba(5, 5, 4, .75)),
        url('assets/auth/tab-login-off.png');
    opacity: 1;
}

@media (max-width: 370px) {
    #gameVoting .vote-item {
        grid-template-columns: 42px minmax(0, 1fr) 28px;
        gap: 6px;
        min-height: 70px;
        padding-right: 8%;
        padding-left: 8%;
    }

    #gameVoting .player-voted-icon { display: none; }
    #gameVoting .vote-player-avatar { width: 38px; height: 38px; }
    #gameVoting .vote-count-badge { width: 27px; height: 27px; min-width: 27px; }
}

/* Round HUD refresh: separate dossier controls and prototype-style timer header. */
#gameTurn .round-status-panel {
    min-height: 132px;
    margin-bottom: 10px;
    padding: 20px 10% 15px;
    background-size: 100% 100%, 94% 76%;
}

.speaker-panel { width:min(92%,560px); margin:10px auto 14px; padding:10px 14px; border:1px solid rgba(83,255,108,.35); background:linear-gradient(rgba(0,35,9,.78),rgba(0,18,5,.88)); box-shadow:inset 0 0 22px rgba(46,255,82,.08); text-align:center; font-family:monospace; color:#66ff73; }
.speaker-panel span { display:block; color:#7ba67f; font-size:11px; letter-spacing:2px; }
.speaker-panel strong { display:block; margin:5px 0 8px; font-size:21px; text-shadow:0 0 8px rgba(70,255,92,.55); }
.speaker-actions { display:flex; justify-content:center; gap:7px; }
.speaker-btn { border:1px solid #4b8f55; background:#071c0b; color:#76ff7e; padding:8px 13px; font:700 11px monospace; }
.speaker-btn-muted { color:#a9afa9; border-color:#626862; }
.lie-control-btn { display:block; width:min(76%,320px); margin:0 auto 10px; color:#ff6868; border-color:#8b3030; }
.condition-ability-overlay { position:fixed; inset:0; z-index:10050; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.82); }
.condition-ability-overlay[hidden] { display:none; }
.condition-ability-panel { width:min(92vw,520px); max-height:82vh; overflow:auto; padding:25px 20px; border:1px solid #319447; background:repeating-linear-gradient(0deg,rgba(5,46,13,.96) 0 2px,rgba(2,25,7,.96) 3px 5px); color:#72ff7c; box-shadow:0 0 35px rgba(39,255,75,.18),inset 0 0 35px rgba(39,255,75,.08); }
.condition-ability-kicker { letter-spacing:3px; color:#a2bba5; font:12px monospace; }
.condition-ability-panel h2 { font:700 25px monospace; }
.condition-ability-panel p { font:15px/1.45 monospace; }
.condition-ability-options { display:grid; gap:8px; margin:18px 0; }
.condition-option { padding:12px; border:1px solid #35643c; background:#07170a; color:#baffbf; font:14px monospace; text-align:left; }
.condition-option.selected { border-color:#76ff7e; background:#123b18; box-shadow:0 0 13px rgba(72,255,91,.22); }

#gameTurn .round-status-panel p {
    margin-bottom: 7px;
    color: #bcb7ad;
    font-size: clamp(13px, 3.8vw, 17px);
    letter-spacing: 1px;
    text-shadow: 0 1px 2px #000 !important;
}

#gameTurn #turnTimer {
    font-size: clamp(43px, 12vw, 58px);
    letter-spacing: 2px;
    text-shadow: 0 0 6px rgba(242, 202, 56, .6), 0 0 15px rgba(242, 202, 56, .2) !important;
}

#gameTurn .admin-timer-controls {
    display: grid;
    grid-template-columns: repeat(3, 54px) minmax(0, 1fr);
    align-items: stretch;
    gap: 5px;
    width: 100%;
    margin-bottom: 14px;
}

#gameTurn .admin-control-btn {
    aspect-ratio: 311 / 328;
    padding: 3px 3px 0;
    color: #e8ca56;
    background-image: url('assets/ui/round/player-inactive.png');
    background-size: 100% 100%;
    font-size: clamp(10px, 3vw, 13px);
    text-shadow: 0 0 4px rgba(235, 194, 47, .38) !important;
}

#gameTurn .admin-control-primary {
    grid-column: auto;
    width: 100%;
    aspect-ratio: auto;
    justify-self: stretch;
    color: #e8ca56;
    background-image: url('assets/auth/tab-login-off.png');
    font-size: clamp(12px, 3.5vw, 16px);
    font-weight: 400;
}

#gameTurn .dossier-navigation {
    position: sticky;
    top: 0;
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    gap: 7px;
    min-height: 58px;
    margin: 0;
    padding: 3px 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

#gameTurn .intel-edge-btn {
    width: 72px;
    min-height: 0;
    aspect-ratio: 521 / 384;
    padding: 2px 9px 0;
    color: #e2ca67;
    background-image: url('assets/ui/round/intel-button.png');
    background-size: 100% 100%;
    font-size: 8px;
    text-shadow: 0 0 4px rgba(231, 196, 64, .36) !important;
}

#gameTurn .intel-story-btn { color: #e2ca67; }
#gameTurn .intel-bunker-btn { color: #e2ca67; }

#gameTurn .player-selector-sticky {
    align-items: center;
    gap: 4px;
    min-height: 50px;
    padding: 0;
}

#gameTurn .player-selector-sticky .player-sel-btn {
    flex: 0 0 43px;
    width: 43px;
    min-width: 43px;
    height: 46px;
    min-height: 46px;
    padding: 2px 5px 0;
    border: 0 !important;
    border-radius: 0;
    color: #d3c9a5 !important;
    background: url('assets/ui/round/player-inactive.png') center / 100% 100% no-repeat !important;
    box-shadow: none;
    font-size: 10px;
}

#gameTurn .player-selector-sticky .player-sel-btn.active {
    flex-basis: 62px;
    width: 62px;
    min-width: 62px;
    height: 41px;
    min-height: 41px;
    color: #211a07 !important;
    background-image: url('assets/ui/round/player-active.png') !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(241, 201, 50, .28);
}

#gameTurn .player-selector-sticky .player-sel-btn.is-kicked {
    opacity: .35;
}

@media (max-width: 370px) {
    #gameTurn .admin-timer-controls {
        grid-template-columns: repeat(3, 48px) minmax(0, 1fr);
        gap: 3px;
    }

    #gameTurn .dossier-navigation {
        grid-template-columns: 62px minmax(0, 1fr) 62px;
        gap: 4px;
    }

    #gameTurn .intel-edge-btn { width: 62px; font-size: 7px; }
    #gameTurn .player-selector-sticky .player-sel-btn { flex-basis: 39px; width: 39px; min-width: 39px; height: 42px; min-height: 42px; }
    #gameTurn .player-selector-sticky .player-sel-btn.active { flex-basis: 55px; width: 55px; min-width: 55px; height: 37px; min-height: 37px; }
}

#mainApp :where(input, textarea, select),
#mainApp .input-group label,
#mainApp .password-slot label,
#mainApp .join-console .input-group label,
#authContainer .input-group input,
#authContainer .input-group label {
    -webkit-text-stroke: 0 transparent !important;
    filter: none !important;
    text-shadow: none !important;
}

/* Settings language selector: only three standalone circular controls. */
#tabSettings .settings-language-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: auto;
    aspect-ratio: auto;
    margin: 2px auto 6px;
    background: none;
    filter: none;
}

#tabSettings .settings-language-card > h2 {
    display: none;
}

#tabSettings .settings-language-options {
    position: static;
    display: flex;
    gap: 9px;
}

#tabSettings .settings-language-options .lang-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

/* Mission story: larger Regular typography instead of the heavy display face. */
#tabPlay .mission-brief p {
    max-width: 390px;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: clamp(20px, 5.6vw, 27px) !important;
    font-weight: 400 !important;
    line-height: 1.16 !important;
    letter-spacing: .2px;
}

/* Waiting lobby — unified auth/profile visual language. */
#gameWaiting {
    align-items: center;
    overflow-y: auto;
    padding: 2px 5px 18px;
    scrollbar-width: none;
}

#gameWaiting::-webkit-scrollbar { display: none; }

.waiting-room-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    width: min(100%, 470px);
    height: min(76vh, 680px);
    min-height: 540px;
    margin: 0 auto;
    padding: 10% 11% 8%;
    background: none;
    filter: drop-shadow(0 15px 22px rgba(0,0,0,.58));
}

.waiting-room-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 2.8% 2.6% 2.4%;
    opacity: 0;
    background: none;
    transform: none;
    transform-origin: center;
    pointer-events: none;
}

.waiting-room-code-panel {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: auto;
    padding: 2px 12px 7px;
    text-align: center;
    background: none;
}

.waiting-room-code-panel p {
    margin: 0 0 5px;
    color: #c9c4b8;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
}

.waiting-room-code-panel h2 {
    margin: 0;
    color: #f2d260;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(34px, 10vw, 52px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 6px;
}

.waiting-room-status {
    margin: 5px 0 10px;
    color: #d0c8b3;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(12px, 3.3vw, 15px);
    font-weight: 400;
    text-align: center;
    letter-spacing: .8px;
}

#gameWaiting .player-list {
    flex: 1 1 auto;
    min-height: 120px;
    margin: 0 0 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 8px 14px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-padding-block: 10px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    clip-path: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(240,201,55,.55) transparent;
}

#gameWaiting .player-list-item {
    position: relative;
    isolation: isolate;
    min-height: 82px;
    margin-bottom: 8px;
    padding: 12px 9.5% 12px 8%;
    border: 0;
    background: transparent;
    overflow: hidden;
}

#gameWaiting .player-list-item::before,
#gameWaiting .player-list-item::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#gameWaiting .player-list-item::before {
    z-index: -2;
    inset: 13% 4.1% 15%;
    background: url('assets/ui/lobby-frame-back.png') center / 100% 100% no-repeat;
}

#gameWaiting .player-list-item::after {
    z-index: -1;
    background: url('assets/ui/lobby-frame-border.png') center / 100% 100% no-repeat;
}

#gameWaiting .player-list-item:last-child { margin-bottom: 0; }

#gameWaiting .avatar-mini {
    width: 52px;
    height: 52px;
    margin: 0;
    border: 2px solid rgba(194,177,129,.75);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(232,201,91,.24);
}

#gameWaiting .status-dot {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin-left: auto;
    box-shadow: 0 0 5px #18ff39, 0 0 13px rgba(24,255,57,.9);
}

#gameWaiting .waiting-player-name {
    overflow: hidden;
    color: #45f151;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(18px, 5.4vw, 27px);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#gameWaiting .player-list-item.is-offline .waiting-player-name { color: #aaa59a; }
#gameWaiting .player-list-item.is-offline .status-dot { box-shadow: none; }

#gameWaiting .lvl-badge {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 3px 7px;
    border: 1px solid rgba(222,184,61,.52);
    border-radius: 3px;
    color: #f0d161;
    background: rgba(20,18,11,.72);
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    font-weight: 400;
}

.waiting-room-actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#adminControlsWait { width: 100%; margin: 0; }

#gameWaiting #startGameBtn,
#gameWaiting #leaveRoomBtn {
    width: 92%;
    min-height: 0;
    aspect-ratio: 413 / 135;
    margin: 0 auto 3px;
    padding: 8px 9% 0;
    border: 0;
    border-radius: 0;
    clip-path: none;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(15px, 4.1vw, 20px);
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
}

#gameWaiting #startGameBtn {
    display: block;
    margin-right: auto;
    margin-left: auto;
    color: #211b08;
    background: url('assets/auth/tab-login-on.png') center / 100% 100% no-repeat;
}

#gameWaiting #startGameBtn:disabled {
    color: #f2d260;
    background-image:
        linear-gradient(rgba(5, 5, 4, .75), rgba(5, 5, 4, .75)),
        url('assets/auth/tab-login-off.png');
    opacity: 1;
}

#gameWaiting #leaveRoomBtn {
    display: block;
    width: 62%;
    align-self: center;
    margin: 3px auto 3px;
    padding-right: 4%;
    padding-left: 4%;
    color: #b5b1a8;
    font-size: clamp(14px, 3.7vw, 17px);
    background: url('assets/auth/tab-login-off.png') center / 100% 100% no-repeat;
}

@media (max-height: 740px) {
    .waiting-room-card {
        width: min(96%, 410px);
        height: 535px;
        min-height: 535px;
        padding-top: 2%;
    }
    #gameWaiting .player-list-item { min-height: 70px; }
    #gameWaiting .avatar-mini { width: 43px; height: 43px; }
}

/* Toolbar artwork and labels remain clean, without text glow. */
#mainApp .bottom-nav,
#mainApp .bottom-nav * {
    -webkit-text-stroke: 0 transparent !important;
    text-shadow: none !important;
}

/* Card selection screen — dedicated industrial card artwork. */
#gamePicking {
    align-items: center;
    padding: 8px 4px 20px;
    overflow-y: auto;
}

#gamePicking .card-picking-title {
    margin: 8px 0 24px;
    color: #e0d8c4;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(22px, 6vw, 30px);
    font-weight: 400;
    letter-spacing: 2px;
    text-align: center;
}

#gamePicking #deckContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 13px 10px;
    width: 100%;
    max-width: 390px;
    margin: 0 auto 22px;
}

#gamePicking .deck-card {
    flex: 0 0 auto;
    width: clamp(76px, 22vw, 98px);
    height: auto;
    aspect-ratio: 314 / 422;
    border: 0;
    border-radius: 0;
    color: #e5c64c;
    background: url('assets/ui/card-picking-back.png') center / 100% 100% no-repeat;
    box-shadow: 0 9px 15px rgba(0, 0, 0, .55);
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(19px, 5.5vw, 27px);
    font-weight: 400;
    text-shadow: 0 0 5px rgba(247, 205, 55, .5) !important;
}

#gamePicking .deck-card-label-window {
    position: relative;
    z-index: 1;
    display: block;
    width: 66%;
    overflow: hidden;
    white-space: nowrap;
}

#gamePicking .deck-card-label {
    display: block;
    width: max-content;
    min-width: 100%;
    text-align: center;
    white-space: nowrap;
}

#gamePicking .deck-card-label.is-overflowing {
    animation: deck-label-shuttle 3.4s ease-in-out infinite alternate;
}

@keyframes deck-label-shuttle {
    0%, 14% { transform: translateX(0); }
    86%, 100% { transform: translateX(var(--card-label-shift)); }
}

#gamePicking .deck-card::after {
    inset: 9% 10%;
    border-radius: 3px;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .5);
}

#gamePicking .deck-card:hover {
    border: 0;
    box-shadow: 0 13px 22px rgba(0, 0, 0, .66), 0 0 12px rgba(232, 194, 58, .22);
}

#gamePicking .deck-card.tentative-me {
    color: #fff3b0;
    background-image:
        linear-gradient(rgba(225, 182, 29, .22), rgba(92, 64, 0, .25)),
        url('assets/ui/card-picking-back.png');
    background-position: center;
    background-size: 100% 100%;
    box-shadow: 0 15px 25px rgba(0, 0, 0, .66), 0 0 19px rgba(250, 204, 21, .58);
}

#gamePicking .deck-card.tentative-other {
    color: #e66d65;
    background-image:
        linear-gradient(rgba(130, 15, 10, .3), rgba(28, 2, 2, .3)),
        url('assets/ui/card-picking-back.png');
    background-position: center;
    background-size: 100% 100%;
}

#gamePicking .deck-card.confirmed {
    color: #b9a65d;
    background-image:
        linear-gradient(rgba(5, 5, 4, .48), rgba(5, 5, 4, .48)),
        url('assets/ui/card-picking-back.png');
    background-position: center;
    background-size: 100% 100%;
}

#gamePicking #confirmPickContainer {
    width: 100%;
    max-width: 340px;
}

#gamePicking #confirmPickBtn {
    display: block;
    width: 76%;
    min-height: 0;
    aspect-ratio: 413 / 135;
    margin: 10px auto 0;
    padding: 7px 8% 0;
    border: 0;
    border-radius: 0;
    clip-path: none;
    color: #211b08;
    background: url('assets/auth/tab-login-on.png') center / 100% 100% no-repeat;
    box-shadow: none;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 600;
    line-height: 1;
}

#gamePicking #confirmPickBtn:active,
#gamePicking #confirmPickBtn.is-pressed {
    color: #f0d36b;
    background-image: url('assets/auth/tab-login-off.png');
}

/* Active-session recovery dialog. */
.reconnect-modal {
    position: fixed;
    z-index: 9999;
    inset: 0;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100dvh;
    padding: 18px;
    background: rgba(0, 0, 0, .86);
    backdrop-filter: blur(5px);
}

.reconnect-panel {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: min(92vw, 410px);
    height: min(68vh, 550px);
    min-height: 455px;
    padding: 13% 11% 9%;
    text-align: center;
    background: url('assets/auth/form-back.png') center / 112% 112% no-repeat;
    filter: drop-shadow(0 16px 25px rgba(0, 0, 0, .75));
}

.reconnect-panel::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: url('assets/auth/form-border.png') center / 100% 100% no-repeat;
    pointer-events: none;
}

.reconnect-panel h2 {
    margin: 0 0 18px;
    color: #ef4b43;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(19px, 5.5vw, 26px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 1px;
    -webkit-text-stroke: 0 transparent !important;
    text-shadow: 0 0 4px rgba(255, 54, 43, .58), 0 0 10px rgba(180, 0, 0, .22) !important;
}

.reconnect-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 142px;
    margin: 0 0 20px;
    padding: 18px 13%;
    color: #c8c4b9;
    background: url('assets/auth/input-field.png') center / 100% 100% no-repeat;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(12px, 3.4vw, 15px);
    font-weight: 400;
    line-height: 1.35;
    text-shadow: none !important;
}

#reconnectCode {
    display: block;
    margin: 9px 0;
    color: #f1d15c;
    font-size: clamp(24px, 7vw, 34px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 5px;
    text-shadow: 0 0 7px rgba(246, 205, 67, .42);
}

.reconnect-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 4px;
}

.reconnect-panel #rejoinBtn,
.reconnect-panel #abandonBtn {
    display: block;
    width: 86%;
    min-height: 0;
    aspect-ratio: 413 / 135;
    margin: 0 auto;
    padding: 7px 9% 0;
    border: 0;
    border-radius: 0;
    clip-path: none;
    box-shadow: none;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(13px, 3.8vw, 17px);
    font-weight: 600;
    line-height: 1;
}

.reconnect-panel #rejoinBtn {
    color: #211b08;
    background: url('assets/auth/tab-login-on.png') center / 100% 100% no-repeat;
}

.reconnect-panel #abandonBtn {
    color: #df5e57;
    background: url('assets/auth/tab-login-off.png') center / 100% 100% no-repeat;
    -webkit-text-stroke: 0 transparent !important;
    text-shadow: 0 0 4px rgba(220, 40, 32, .28) !important;
}

@media (min-width: 600px) {
    .reconnect-panel {
        padding: 68px 46px 40px;
    }
}

@media (max-height: 650px) {
    .reconnect-panel {
        width: min(84vw, 350px);
        height: 440px;
        min-height: 440px;
        padding-top: 10%;
    }

    .reconnect-message { min-height: 120px; margin-bottom: 12px; }
}

/* Desktop access gate: the production game is phone-only. */
.desktop-only-gate {
    display: none;
    position: fixed;
    z-index: 30000;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .88);
    backdrop-filter: blur(7px);
}

.desktop-only-gate.active { display: flex; }
.desktop-access-blocked .mobile-wrapper { visibility: hidden; }

.desktop-only-panel {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(90vw, 430px);
    min-height: 470px;
    padding: 62px 50px 54px;
    color: #d3cdbd;
    text-align: center;
    background: url('assets/auth/form-back.png') center / 112% 112% no-repeat;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .78));
}

.desktop-only-panel::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: url('assets/auth/form-border.png') center / 100% 100% no-repeat;
    pointer-events: none;
}

.desktop-only-panel img {
    width: min(62%, 230px);
    margin-bottom: 24px;
    filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .75));
}

.desktop-phone-icon {
    width: 48px;
    height: 70px;
    margin-bottom: 20px;
    border: 3px solid #e7c84c;
    border-radius: 8px;
    color: transparent;
    box-shadow: inset 0 0 10px rgba(235, 198, 52, .2), 0 0 11px rgba(235, 198, 52, .24);
}

.desktop-phone-icon::after {
    content: '';
    display: block;
    width: 12px;
    height: 3px;
    margin: 57px auto 0;
    border-radius: 3px;
    background: #e7c84c;
}

.desktop-only-panel h1 {
    margin: 0 0 17px;
    color: #ef4b43;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(21px, 2.2vw, 28px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 1px;
    text-shadow: 0 0 5px rgba(235, 48, 39, .55) !important;
}

.desktop-only-panel p {
    max-width: 310px;
    margin: 0;
    color: #c7c2b6;
    font-family: 'Share Tech Mono', monospace;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    text-shadow: none !important;
}

/* Main round screen — unified industrial HUD. */
#gameTurn {
    padding: 4px 2px 24px;
    scrollbar-width: none;
}

#gameTurn::-webkit-scrollbar { display: none; }

.round-status-panel {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 104px;
    margin: 0 auto 9px;
    padding: 13px 12%;
    background-image:
        url('assets/ui/lobby-frame-border.png'),
        url('assets/ui/lobby-frame-back.png');
    background-position: center, center;
    background-size: 100% 100%, 92% 72%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55));
}

.round-status-panel p {
    margin: 0 0 4px;
    color: #aaa69d;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.4px;
}

#gameTurn #turnTimer {
    color: #f0cf51;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(30px, 8vw, 40px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 4px;
    text-shadow: 0 0 7px rgba(242, 202, 56, .46) !important;
}

#gameTurn .admin-timer-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    width: 94%;
    margin: 0 auto 12px;
}

#gameTurn .admin-control-btn {
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 413 / 135;
    margin: 0;
    padding: 4px 7% 0;
    border: 0;
    border-radius: 0;
    color: #b9b4a8;
    background: url('assets/auth/tab-login-off.png') center / 100% 100% no-repeat;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(9px, 2.6vw, 12px);
    font-weight: 400;
    line-height: 1;
}

#gameTurn .admin-control-primary {
    grid-column: 1 / -1;
    width: 58%;
    justify-self: center;
    color: #211b08;
    background-image: url('assets/auth/tab-login-on.png');
    font-size: clamp(11px, 3vw, 14px);
    font-weight: 600;
}

#gameTurn .dossiers-title {
    margin: 1px 0 7px;
    color: #d5cfc0;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 400;
    letter-spacing: 1.3px;
    text-align: center;
}

#gameTurn .dossier-navigation {
    position: sticky;
    top: 0;
    grid-template-columns: 68px minmax(0, 1fr) 68px;
    gap: 5px;
    min-height: 64px;
    margin: 0 0 3px;
    padding: 10px 7px;
    border: 0;
    border-radius: 0;
    background-image:
        url('assets/ui/lobby-frame-border.png'),
        url('assets/ui/lobby-frame-back.png');
    background-position: center, center;
    background-size: 100% 100%, 94% 70%;
    background-repeat: no-repeat;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .45);
    backdrop-filter: none;
}

#gameTurn .intel-edge-btn {
    min-height: 0;
    aspect-ratio: 413 / 135;
    padding: 3px 8% 0;
    border: 0;
    border-radius: 0;
    color: #bbb5a8;
    background: url('assets/auth/tab-login-off.png') center / 100% 100% no-repeat;
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px;
    font-weight: 400;
    line-height: 1;
}

#gameTurn .intel-story-btn { color: #dd7168; }
#gameTurn .intel-bunker-btn { color: #e0c751; }

#gameTurn .player-selector-sticky {
    align-items: center;
    gap: 5px;
    padding: 2px;
}

#gameTurn .player-selector-sticky .player-sel-btn {
    min-width: 34px;
    min-height: 34px;
    padding: 5px 8px;
    border: 1px solid rgba(193, 183, 148, .45);
    border-radius: 50%;
    color: #c9c3b5;
    background: linear-gradient(180deg, rgba(55, 55, 49, .92), rgba(10, 10, 9, .96));
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: 400;
}

#gameTurn .player-selector-sticky .player-sel-btn.active {
    color: #1d1808 !important;
    border-color: #e2c548 !important;
    background: radial-gradient(circle at 50% 32%, #ffe66b, #ad7e08 72%) !important;
    box-shadow: 0 0 11px rgba(241, 201, 50, .48);
}

#gameTurn .swipe-hint {
    margin: 4px 0 8px;
    color: rgba(211, 204, 186, .52);
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px;
    font-weight: 400;
}

/* Truth adjudication is opt-in and must not leak into the dossier layout while hidden. */
#gameTurn .lie-control-btn[hidden] {
    display: none !important;
}

#gameTurn .lie-control-btn:not([hidden]) {
    display: block;
    aspect-ratio: auto !important;
    width: min(76%, 320px);
    min-height: 42px;
    margin: 0 auto 14px;
    padding: 9px 16px 7px;
    color: #ff6868;
    background: linear-gradient(180deg, rgba(38, 25, 24, .94), rgba(12, 9, 9, .98));
    border: 1px solid rgba(255, 78, 78, .45);
    font-size: 11px;
    letter-spacing: 1px;
}

#gameTurn .condition-used-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 7px 0 2px;
    padding: 4px 8px 3px;
    border: 1px solid rgba(255, 84, 84, .55);
    color: #ff6a63;
    background: rgba(65, 7, 7, .38);
    font: 700 10px/1 'Share Tech Mono', monospace;
    letter-spacing: 1.5px;
    text-shadow: 0 0 6px rgba(255, 65, 65, .35) !important;
}

#gameTurn .condition-is-used {
    opacity: .72;
}

#gameTurn .dossier-scroll-container {
    width: 100%;
    min-height: 280px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

#gameTurn .physical-card {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto 12px !important;
    padding: 12% 10% 10%;
    border: 0;
    border-radius: 0;
    color: #ddd5c4;
    background-image:
        url('assets/auth/form-border.png'),
        url('assets/auth/form-back.png');
    background-position: center, center;
    background-size: 100% 100%, 112% 112%;
    background-repeat: no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 12px 19px rgba(0, 0, 0, .58));
    font-family: 'Share Tech Mono', monospace;
}

#gameTurn .physical-card::before { display: none; }

#gameTurn .physical-card .public-player-name {
    margin-bottom: 11px !important;
    padding: 0 0 9px;
    border-bottom: 1px solid rgba(222, 196, 83, .46);
    color: #e3ca55;
    font-family: 'Share Tech Mono', monospace;
    font-size: 15px;
    font-weight: 400;
}

#gameTurn .physical-card .trait-div-row {
    min-height: 54px;
    margin-bottom: 6px !important;
    padding: 11px 15px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #ddd6c7;
    background: url('assets/auth/input-field.png') center / 100% 100% no-repeat !important;
}

#gameTurn .physical-card .special-trait-row {
    border-left: 2px solid rgba(199, 51, 42, .62) !important;
}

#gameTurn .physical-card .trait-cat-label {
    color: #9f9a90 !important;
    font-size: 10px !important;
    font-weight: 400;
    letter-spacing: .5px;
}

#gameTurn .physical-card .trait-val-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px !important;
    font-weight: 400 !important;
}

#gameTurn .dossier-note {
    min-height: 82px;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid rgba(195, 179, 126, .35);
    border-radius: 3px;
    color: #d7d1c4;
    background: rgba(5, 6, 5, .72);
    resize: vertical;
}

@media (max-width: 370px) {
    #gameTurn .dossier-navigation {
        grid-template-columns: 59px minmax(0, 1fr) 59px;
    }

    #gameTurn .intel-edge-btn { font-size: 7px; }
    #gameTurn .physical-card { padding-right: 9%; padding-left: 9%; }
}

.physical-card .trait-val-label.blurred-text {
    color: #900 !important;
    filter: blur(4px);
}

.physical-card .trait-div-row {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: #888 !important;
}

/* Swipe animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

.slide-in-left {
    animation: slideInLeft 0.3s ease-out;
}

/* Typewriter cursor */
.typewriter-cursor::after {
    content: '|';
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Final asset layer: keep supplied artwork above the legacy theme. */
body::before {
    background-image: linear-gradient(rgba(8, 7, 3, .08), rgba(7, 6, 3, .28)), url('assets/ui/background-main.png');
    background-position: center;
    filter: brightness(.84) contrast(1.08) saturate(.88);
}

.app-brand-header .brand-logo-header {
    width: min(190px, 100%);
    max-height: 105px;
    object-fit: contain;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .78)) drop-shadow(0 0 8px rgba(244, 201, 40, .18));
}

.industrial-cta,
.industrial-cta:hover {
    min-height: 124px;
    padding: 20px 78px 26px 34px;
    border: 0;
    outline: 0;
    clip-path: none;
    color: #211b08;
    background: url('assets/ui/button-primary.png') center / 100% 100% no-repeat;
    box-shadow: none;
}

.industrial-cta::before {
    content: '';
    position: absolute;
    right: 30px;
    top: 50%;
    width: 42px;
    height: 42px;
    transform: translateY(-52%);
    background: url('assets/ui/icon-create.png') center / contain no-repeat;
}

.industrial-cta::after {
    display: none;
}

.industrial-cta:active {
    transform: translateY(2px) scale(.992);
    background-image: url('assets/ui/button-primary-pressed.png');
    color: #f2cb42;
}

.join-console {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    align-items: stretch;
    gap: 8px;
    padding: 0 !important;
    border: 0;
    background: none;
    box-shadow: none;
    clip-path: none;
}

.join-console .input-group {
    min-height: 82px;
    margin: 0 !important;
    padding: 14px 22px;
    background: url('assets/ui/code-frame.png') center / 100% 100% no-repeat;
}

.join-console .input-group input {
    height: 54px;
    padding: 18px 8px 4px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #f4d256;
    font-size: 20px;
    letter-spacing: 3px;
}

.join-console .input-group input:focus {
    box-shadow: none;
}

.join-console .input-group label {
    left: 30px;
    top: 31px;
    color: #9a9a92;
}

.join-console .input-group input:focus+label,
.join-console .input-group input:not(:placeholder-shown)+label {
    top: 17px;
    font-size: 9px;
}

.join-console .btn-secondary {
    min-height: 82px;
    margin: 0 !important;
    padding: 16px 10px 20px;
    border: 0;
    clip-path: none;
    color: #24200e;
    font-size: 14px;
    background: url('assets/ui/button-join-static.png') center / 100% 100% no-repeat;
    box-shadow: none;
}

.join-console .btn-secondary:active {
    transform: translateY(2px) scale(.98);
    background-image: url('assets/ui/button-join-active.png');
}

.bottom-nav {
    min-height: 105px;
    margin: 0 3px max(3px, env(safe-area-inset-bottom));
    padding: 8px 13px 5px;
    border: 0;
    border-radius: 0;
    background: url('assets/ui/toolbar-left.png') center / 100% 100% no-repeat;
    box-shadow: none;
    overflow: visible;
}

.bottom-nav[data-active="tabProfile"] {
    background-image: url('assets/ui/toolbar-centre.png');
}

.bottom-nav[data-active="tabSettings"] {
    background-image: url('assets/ui/toolbar-right.png');
}

.nav-item {
    min-width: 0;
    padding: 59px 2px 8px;
    border: 0;
    color: #aaa69a;
    font-size: 11px;
    text-shadow: 0 2px 3px #000;
    background: none !important;
}

.nav-item::before {
    content: '' !important;
    top: 10px;
    width: 52px;
    height: 52px;
    background: center / contain no-repeat;
    filter: none;
    opacity: 1;
}

.nav-item:nth-child(1)::before {
    background-image: url('assets/ui/icon-game-off.png');
}

.nav-item:nth-child(2)::before {
    background-image: url('assets/ui/icon-profile-off.png');
}

.nav-item:nth-child(3)::before {
    background-image: url('assets/ui/icon-settings-off.png');
}

.nav-item:nth-child(1).active::before {
    background-image: url('assets/ui/icon-game-on.png');
}

.nav-item:nth-child(2).active::before {
    background-image: url('assets/ui/icon-profile-on.png');
}

.nav-item:nth-child(3).active::before {
    filter: sepia(1) saturate(3) drop-shadow(0 0 7px #ffd52d);
}

.nav-item.active {
    color: #f2cd48;
}

@media (max-width: 380px) {

    .industrial-cta,
    .industrial-cta:hover {
        min-height: 108px;
        padding-right: 66px;
        font-size: 19px;
    }

    .industrial-cta::before {
        right: 25px;
        width: 36px;
        height: 36px;
    }

    .join-console {
        grid-template-columns: minmax(0, 1fr) 104px;
    }

    .join-console .btn-secondary {
        font-size: 12px;
    }

    .bottom-nav {
        min-height: 96px;
    }

    .nav-item {
        padding-top: 54px;
        font-size: 10px;
    }

    .nav-item::before {
        width: 47px;
        height: 47px;
    }
}

/* Exact source-image ratios — final cascade authority. */
#tabPlay .mission-brief {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 859 / 553;
    padding: clamp(42px, 11vw, 58px) clamp(26px, 8vw, 42px) 30px !important;
}

#tabPlay .mission-brief p {
    max-width: 370px;
    font-size: clamp(17px, 4.8vw, 22px) !important;
    line-height: 1.22 !important;
}

#tabPlay .industrial-cta,
#tabPlay .industrial-cta:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 847 / 283;
    padding: 0 28px 9px;
    line-height: 1;
}

#tabPlay .industrial-cta::before {
    position: static;
    flex: 0 0 auto;
    order: 2;
    width: clamp(34px, 10vw, 47px);
    height: clamp(34px, 10vw, 47px);
    transform: none;
}

#tabPlay .join-console {
    width: 100%;
    grid-template-columns: minmax(0, 3.28fr) minmax(0, 1fr);
    align-items: center;
}

#tabPlay .join-console .input-group {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 2001 / 459;
    padding: 7px 20px;
}

#tabPlay .join-console .input-group input {
    height: 100%;
    min-height: 0;
    padding: 15px 7px 2px;
}

#tabPlay .join-console .input-group label {
    top: 50%;
    transform: translateY(-50%);
}

#tabPlay .join-console .input-group input:focus+label,
#tabPlay .join-console .input-group input:not(:placeholder-shown)+label {
    top: 12px;
    transform: none;
}

#tabPlay .join-console .btn-secondary {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 768 / 576;
    padding: 0 7px 9px;
    font-size: 11px;
}

#mainApp .bottom-nav {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1672 / 774;
    padding: 9% 5% 5%;
}

#mainApp .nav-item {
    padding: 28% 2px 5px;
    font-size: clamp(10px, 3vw, 13px);
}

#mainApp .nav-item::before {
    top: 8%;
    width: clamp(50px, 18vw, 76px);
    height: clamp(50px, 18vw, 76px);
}

@media (max-height: 740px) {
    #mainApp .bottom-nav {
        flex-basis: auto;
        min-height: 0;
        aspect-ratio: 1672 / 774;
    }

    #tabPlay .mission-brief,
    #tabPlay .industrial-cta,
    #tabPlay .industrial-cta:hover,
    #tabPlay .join-console {
        width: 100%;
    }
}

/* Final mobile alignment corrections. */
#tabPlay .join-console {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 7px;
}

#tabPlay .join-console .btn-secondary {
    aspect-ratio: 741 / 418;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 42% 0 22%;
    overflow: hidden;
    color: #211b0b;
    font-size: clamp(10px, 2.8vw, 13px);
    line-height: 1;
    text-align: left;
    white-space: nowrap;
}

#tabPlay .join-console .input-group {
    padding-inline: 16px;
}

#tabPlay .join-console .input-group label {
    left: 24px;
}

#mainApp .bottom-nav {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 3.55 / 1;
    margin: 0;
    padding: 0 3%;
    overflow: hidden;
    background-size: 100% auto;
    background-position: center 43%;
    background-repeat: no-repeat;
}

#mainApp .nav-item {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    padding: 0 2px 22px;
    overflow: hidden;
    line-height: 1;
}

#mainApp .nav-item::before {
    top: 24px;
    width: clamp(48px, 16vw, 70px);
    height: clamp(48px, 16vw, 70px);
}

@media (max-width: 480px) {
    #mainApp .nav-item {
        padding-bottom: 25px;
        font-size: clamp(9px, 2.7vw, 11px);
    }

    #mainApp .nav-item::before {
        top: 26px;
        width: 52px;
        height: 52px;
    }
}

@media (max-width: 380px) {
    #mainApp .nav-item {
        padding-bottom: 23px;
        font-size: 9px;
    }

    #mainApp .nav-item::before {
        top: 25px;
        width: 46px;
        height: 46px;
    }

    #tabPlay .join-console .btn-secondary {
        padding-left: 20%;
    }
}

@media (max-height: 740px) {
    #mainApp .bottom-nav {
        aspect-ratio: 3.55 / 1;
    }
}

/* Hide the bunker-code label once the player starts typing. */
#tabPlay .join-console .input-group input:not(:placeholder-shown)+label {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#tabPlay .join-console .input-group input:not(:placeholder-shown) {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Industrial profile card. Toolbar rules intentionally remain untouched. */
#tabProfile {
    align-items: center;
    padding: 4px 5px 14px;
    scrollbar-width: none;
}

#tabProfile::-webkit-scrollbar {
    display: none;
}

.profile-metal-card {
    position: relative;
    flex: 0 0 auto;
    width: min(100%, 430px);
    aspect-ratio: 1;
    margin: 0 auto;
    background: url('assets/ui/profile-card.png') center / contain no-repeat;
    color: #e8c85c;
    filter: drop-shadow(0 15px 20px rgba(0, 0, 0, .55));
}

.profile-avatar-slot {
    position: absolute;
    top: 10.5%;
    left: 32.1%;
    width: 35.8%;
    aspect-ratio: 1;
}

#profileAvatar {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8%;
    background: #171713;
    object-fit: cover;
    cursor: pointer;
}

#avatarEditOverlay {
    position: absolute;
    right: 4%;
    bottom: 4%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28%;
    aspect-ratio: 1;
    border: 1px solid #d6aa2f;
    border-radius: 20%;
    background: linear-gradient(145deg, #6a571d, #241d0a);
    color: #f0cc52;
    font-size: clamp(12px, 4vw, 20px);
    cursor: pointer;
    box-shadow: 0 0 8px rgba(242, 199, 55, .45);
}

.profile-name-row {
    position: absolute;
    top: 47.8%;
    left: 13%;
    right: 13%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    color: #e6c35a;
    font-family: Impact, 'Arial Narrow', sans-serif;
    font-size: clamp(24px, 7vw, 35px);
    font-weight: 500;
    letter-spacing: 1px;
    text-shadow: 0 2px 3px #24200c;
}

#editNameBtn {
    color: #d7b348;
    font-size: .7em;
    cursor: pointer;
    opacity: .9;
}

.profile-level-badge {
    position: absolute;
    top: 68.5%;
    left: 36%;
    width: 28%;
    color: #efd265;
    font-family: Impact, 'Arial Narrow', sans-serif;
    font-size: clamp(18px, 5.2vw, 27px);
    line-height: 1;
    text-align: center;
    text-shadow: 0 2px 3px #191506;
}

#profileLevel {
    font-weight: 900;
}

.profile-games {
    position: absolute;
    top: 81%;
    left: 10%;
    right: 10%;
    margin: 0;
    color: #d9ba58;
    font-family: Impact, 'Arial Narrow', sans-serif;
    font-size: clamp(17px, 4.7vw, 24px);
    text-align: center;
    text-shadow: 0 2px 3px #211b08;
}

#profileGames {
    color: #f0d36b;
    font-weight: 700;
}

.profile-logout-btn,
.profile-logout-btn:hover {
    flex: 0 0 auto;
    width: 76%;
    min-height: 0;
    height: auto;
    aspect-ratio: 847 / 283;
    margin: auto auto 16px;
    padding: 0 24px 9px;
    border: 0;
    outline: 0;
    clip-path: none;
    background: url('assets/ui/button-primary-pressed.png') center / 100% 100% no-repeat;
    box-shadow: none;
    color: #e7c957;
    font-family: Impact, 'Arial Narrow', sans-serif;
    font-size: clamp(17px, 4.6vw, 23px);
    line-height: 1;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .55);
}

.profile-logout-btn.is-pressed,
.profile-logout-btn:active {
    background-image: url('assets/ui/button-primary.png');
    color: #211b08;
}

@media (max-height: 740px) {
    .profile-metal-card {
        width: min(82%, 330px);
    }

    .profile-logout-btn,
    .profile-logout-btn:hover {
        width: 62%;
        margin-bottom: 8px;
    }
}

/* Persistent touch feedback for mobile browsers. */
button,
.nav-item,
.vote-item,
.trait-card,
.dossier-tab {
    touch-action: manipulation;
}

button.is-pressed,
.nav-item.is-pressed,
.vote-item.is-pressed,
.trait-card.is-pressed,
.dossier-tab.is-pressed {
    transform: translateY(2px) scale(.975);
    filter: brightness(.82);
    transition: transform 70ms ease, filter 70ms ease;
}

/* Eliminated players remain available as fully public dossiers. */
.player-sel-btn.is-kicked {
    opacity: .35 !important;
}

/* Story intro — emergency terminal assembled from the established UI assets. */
#gameStory {
    align-items: center;
    justify-content: center;
    padding: 2px 5px 18px;
    overflow-y: auto;
    background: none !important;
}

.story-console {
    position: relative;
    isolation: isolate;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    width: min(88%, 380px);
    height: min(68vh, 580px);
    min-height: 490px;
    padding: 12% 10.5% 8%;
    background: none;
    filter: drop-shadow(0 15px 24px rgba(0, 0, 0, .65));
}

.story-console::before,
.story-console::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.story-console::before {
    z-index: 0;
    inset: 3.5%;
    opacity: .45;
    background: url('assets/auth/form-back.png') center / 100% 100% no-repeat;
    transform: scale(1.15);
    transform-origin: center;
}

.story-console::after {
    z-index: 1;
    inset: 0;
    background: url('assets/auth/form-border.png') center / 100% 100% no-repeat;
}

.story-console > * {
    position: relative;
    z-index: 2;
}

#gameStory .story-alert-title {
    margin: 0 0 12px;
    color: #ef4841;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(20px, 5.8vw, 28px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 1.5px;
    text-align: center;
    -webkit-text-stroke: 0 transparent !important;
    text-shadow: 0 0 4px rgba(255, 45, 35, .65), 0 0 10px rgba(210, 0, 0, .25) !important;
}

.story-monitor {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 728 / 398;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: url('assets/ui/story-monitor.png') center / 100% 100% no-repeat;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55));
}

#storyTextContainer {
    position: absolute;
    inset: 9% 8.5%;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    color: #79ef69;
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.36;
    text-align: left;
    text-shadow: 0 0 4px rgba(74, 255, 67, .5) !important;
    animation: story-telemetry-flicker 2.8s steps(1) infinite;
    scrollbar-width: none;
}

#storyTextContainer::-webkit-scrollbar { display: none; }

.story-telemetry {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin-top: 12px;
}

.story-mini-monitor {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 728 / 398;
    min-width: 0;
    padding: 8% 9%;
    overflow: hidden;
    color: #76ed68;
    background: url('assets/ui/story-monitor.png') center / 100% 100% no-repeat;
    font-family: 'Share Tech Mono', monospace;
    line-height: 1;
    text-align: center;
    text-shadow: 0 0 4px rgba(74, 255, 67, .55) !important;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .5));
}

.story-mini-monitor span {
    color: rgba(139, 234, 126, .62);
    font-size: clamp(5px, 1.6vw, 7px);
    letter-spacing: .7px;
}

.story-mini-monitor strong {
    margin-top: 4px;
    overflow: hidden;
    font-size: clamp(8px, 2.4vw, 11px);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    animation: story-telemetry-flicker 2.8s steps(1) infinite;
}

@keyframes story-telemetry-flicker {
    0%, 93%, 100% { opacity: 1; }
    94% { opacity: .55; }
    96% { opacity: .82; }
}

#gameStory .story-accept-btn {
    display: block;
    width: 72%;
    min-height: 0;
    aspect-ratio: 413 / 135;
    margin: 35px auto 0;
    padding: 7px 7% 0;
    border: 0;
    border-radius: 0;
    clip-path: none;
    color: #211b08;
    background: url('assets/auth/tab-login-on.png') center / 100% 100% no-repeat;
    box-shadow: none;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(12px, 3.4vw, 16px);
    font-weight: 600;
    line-height: 1.05;
}

@media (max-height: 740px) {
    .story-console {
        width: min(82%, 340px);
        height: 470px;
        min-height: 470px;
        padding-top: 10%;
    }

    #gameStory .story-accept-btn { margin-top: 28px; }
}

#tabPlay .industrial-cta.is-pressed {
    background-image: url('assets/ui/button-primary-pressed.png');
    color: #f2cb42;
}

#tabPlay .join-console .btn-secondary.is-pressed {
    background-image: url('assets/ui/button-join-active.png');
    filter: brightness(1.08);
}

/* Industrial settings panels. Toolbar rules intentionally remain untouched. */
#tabSettings {
    align-items: center;
    gap: 12px;
    padding: 3px 5px 16px;
    scrollbar-width: none;
}

.settings-language-card,
.settings-password-card {
    zoom: .92;
}

#tabSettings::-webkit-scrollbar {
    display: none;
}

.settings-language-card {
    position: relative;
    flex: 0 0 auto;
    width: min(100%, 430px);
    aspect-ratio: 872 / 354;
    background: url('assets/ui/settings-language.png') center / contain no-repeat;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, .48));
}

.settings-language-card h2 {
    position: absolute;
    top: 15%;
    left: 9%;
    margin: 0;
    color: #e1c262;
    font-family: Impact, 'Arial Narrow', sans-serif;
    font-size: clamp(22px, 6vw, 31px);
    font-weight: 500;
    line-height: 1;
    text-shadow: 0 2px 3px #211b09;
}

.settings-language-options {
    position: absolute;
    top: 48%;
    left: 9%;
    right: 9%;
    bottom: 18%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9%;
}

.settings-language-options .lang-btn {
    min-width: 0;
    padding: 4px 8px;
    border: 0;
    background: transparent;
    color: #d7c288;
    font-family: Impact, 'Arial Narrow', sans-serif;
    font-size: clamp(18px, 5vw, 26px);
    text-shadow: 0 2px 3px #171306;
    opacity: .78;
}

.settings-language-options .lang-btn.active {
    color: #ffdc5b;
    opacity: 1;
    text-shadow: 0 0 9px rgba(255, 209, 55, .62), 0 2px 3px #171306;
}

.settings-password-card {
    position: relative;
    flex: 0 0 auto;
    width: min(100%, 430px);
    aspect-ratio: 861 / 924;
    background: url('assets/ui/settings-password.png') center / contain no-repeat;
    filter: drop-shadow(0 13px 18px rgba(0, 0, 0, .52));
}

.settings-password-card>h2 {
    position: absolute;
    top: 7.2%;
    left: 8.5%;
    margin: 0;
    color: #e2c35e;
    font-family: Impact, 'Arial Narrow', sans-serif;
    font-size: clamp(23px, 6vw, 32px);
    font-weight: 500;
    line-height: 1;
    text-shadow: 0 2px 3px #211b08, 0 0 8px rgba(232, 199, 75, .25);
}

#passwordForm {
    position: absolute;
    inset: 0;
}

.settings-password-card .password-slot {
    position: absolute;
    left: 7%;
    width: 86%;
    height: 15.5%;
    margin: 0;
}

.settings-password-card .password-slot-old {
    top: 20.2%;
}

.settings-password-card .password-slot-new {
    top: 40.2%;
}

.settings-password-card .password-slot input {
    width: 100%;
    height: 100%;
    padding: 18px 20px 5px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #f0d26b;
    font-size: clamp(16px, 4.5vw, 22px);
}

.settings-password-card .password-slot input:focus {
    box-shadow: none;
}

.settings-password-card .password-slot label {
    left: 4%;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(224, 196, 123, .5);
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(14px, 4vw, 20px);
}

.settings-password-card .password-slot input:focus+label,
.settings-password-card .password-slot input:not(:placeholder-shown)+label {
    top: 9%;
    transform: none;
    padding: 0;
    background: transparent;
    font-size: 10px;
}

.settings-password-submit,
.settings-password-submit:hover {
    position: absolute;
    left: 6%;
    bottom: 1.8%;
    width: 88%;
    min-height: 0;
    height: auto;
    aspect-ratio: 847 / 283;
    margin: 0;
    padding: 0 24px 9px;
    border: 0;
    outline: 0;
    clip-path: none;
    background: url('assets/ui/button-primary-pressed.png') center / 100% 100% no-repeat;
    box-shadow: none;
    color: #e2c45b;
    font-family: Impact, 'Arial Narrow', sans-serif;
    font-size: clamp(22px, 6vw, 31px);
    line-height: 1;
}

.settings-password-submit.is-pressed,
.settings-password-submit:active {
    background-image: url('assets/ui/button-primary-pressed.png');
    color: #f0d36b;
    filter: brightness(.82);
}

@media (max-height: 740px) {
    .settings-language-card {
        width: min(78%, 320px);
    }

    .settings-password-card {
        width: min(69%, 285px);
    }
}

/* Unified auth-style skin for Profile and Settings. Bottom toolbar stays untouched. */
#tabProfile,
#tabSettings {
    overflow-y: auto;
    padding: 4px 8px 20px;
    scrollbar-width: none;
}

#tabProfile::-webkit-scrollbar,
#tabSettings::-webkit-scrollbar { display: none; }

.profile-metal-card,
.settings-password-card {
    position: relative;
    isolation: isolate;
    flex: 0 0 auto;
    width: min(94%, 400px);
    margin-inline: auto;
    border: 0;
    background: url('assets/auth/form-border.png') center / 100% 100% no-repeat;
    filter: drop-shadow(0 14px 20px rgba(0,0,0,.55));
}

.profile-metal-card { aspect-ratio: 616 / 690; }
.settings-password-card { aspect-ratio: 616 / 720; }

.profile-metal-card::before,
.settings-password-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 2.8% 2.6% 2.4%;
    opacity: .35;
    background: url('assets/auth/form-back.png') center / 100% 100% no-repeat;
    transform: scale(1.15);
    transform-origin: center;
    pointer-events: none;
}

.profile-metal-card > *,
.settings-password-card > * { z-index: 1; }

.profile-avatar-slot {
    top: 10%;
    left: 34%;
    width: 32%;
    padding: 7px;
    background: url('assets/auth/input-field.png') center / 100% 100% no-repeat;
}

#profileAvatar {
    border-radius: 4px;
    box-shadow: 0 0 9px rgba(255,207,45,.28);
}

#avatarEditOverlay {
    right: 2%;
    bottom: 2%;
    width: 25%;
    border: 0;
    color: #f2d15e;
    background: rgba(17,16,12,.78);
    box-shadow: 0 0 7px rgba(255,211,49,.48);
}

.profile-name-row {
    top: 47%;
    color: #f1d15f;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(20px, 5.8vw, 28px);
    font-weight: 500;
    text-shadow: 0 0 4px rgba(255,205,40,.42), 0 2px 3px #000;
}

.profile-level-badge {
    top: 62%;
    left: 35%;
    width: 30%;
    padding: 7px 5px;
    border: 1px solid rgba(223,183,54,.55);
    border-radius: 4px;
    color: #f0d163;
    background: rgba(19,18,13,.72);
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(15px, 4.3vw, 21px);
    font-weight: 500;
    box-shadow: inset 0 0 8px rgba(255,210,56,.13), 0 0 6px rgba(255,198,30,.16);
}

.profile-games {
    top: 77%;
    color: #d4c8a0;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(14px, 3.8vw, 18px);
    font-weight: 400;
}

.profile-logout-btn,
.profile-logout-btn:hover,
.settings-password-submit,
.settings-password-submit:hover {
    border: 0;
    border-radius: 0;
    outline: 0;
    clip-path: none;
    color: #211b08;
    background: url('assets/auth/tab-login-on.png') center / 100% 100% no-repeat;
    box-shadow: none;
    font-family: 'Share Tech Mono', monospace;
    font-weight: 600;
    -webkit-text-stroke: .4px rgba(255,221,92,.72);
    text-shadow: 0 0 2px rgba(255,239,157,.88), 0 0 5px rgba(255,207,43,.58), 0 0 10px rgba(255,183,0,.24);
}

.profile-logout-btn,
.profile-logout-btn:hover {
    width: min(86%, 350px);
    aspect-ratio: 413 / 135;
    margin: 10px auto 18px;
    padding: 8px 9% 0;
    font-size: clamp(16px, 4.3vw, 21px);
}

.profile-logout-btn.is-pressed,
.profile-logout-btn:active,
.settings-password-submit.is-pressed,
.settings-password-submit:active {
    color: #f0d36b;
    background-image: url('assets/auth/tab-login-off.png');
}

#tabSettings {
    gap: 10px;
}

.settings-language-card,
.settings-password-card { zoom: 1; }

.settings-language-card {
    position: relative;
    flex: 0 0 auto;
    width: min(94%, 400px);
    aspect-ratio: 413 / 112;
    margin-inline: auto;
    background: url('assets/auth/input-field.png') center / 100% 100% no-repeat;
    filter: drop-shadow(0 9px 13px rgba(0,0,0,.45));
}

.settings-language-card h2 {
    top: 50%;
    left: 7%;
    transform: translateY(-50%);
    color: #f0d160;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(15px, 4vw, 19px);
    font-weight: 500;
    text-shadow: 0 0 4px rgba(255,210,45,.35);
}

.settings-language-options {
    top: 18%;
    right: 6%;
    bottom: 18%;
    left: 42%;
    gap: 4px;
}

.settings-language-options .lang-btn {
    width: clamp(42px, 12vw, 54px);
    height: 100%;
    padding: 0;
    border: 1px solid #5b5b55;
    border-radius: 3px;
    color: #a8a69f;
    background: linear-gradient(180deg, rgba(48,49,46,.94), rgba(13,14,13,.96));
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(12px, 3.3vw, 15px);
    font-weight: 500;
    opacity: 1;
    box-shadow: inset 0 0 8px rgba(255,255,255,.08);
}

.settings-language-options .lang-btn.active {
    border-color: #8b8156;
    color: #f3d258;
    background: linear-gradient(180deg, #4a4531, #181711);
    text-shadow: 0 0 7px rgba(255,214,61,.58);
}

.settings-password-card > h2 {
    top: calc(8% + 10px);
    left: 12%;
    right: 12%;
    color: #f0d160;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(17px, 4.6vw, 22px);
    font-weight: 500;
    text-align: center;
    text-shadow: 0 0 4px rgba(255,210,45,.35);
}

.settings-password-card .password-slot {
    left: 12%;
    width: 76%;
    height: auto;
    aspect-ratio: 413 / 82;
    background: url('assets/auth/input-field.png') center / 100% 100% no-repeat;
}

.settings-password-card .password-slot-old { top: 23%; }
.settings-password-card .password-slot-new { top: 44%; }

.settings-password-card .password-slot input {
    padding: 8px 22px 4px;
    border: 0;
    color: #f3d258;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(14px, 3.9vw, 19px);
}

.settings-password-card .password-slot label,
.settings-password-card .password-slot input:focus + label,
.settings-password-card .password-slot input:not(:placeholder-shown) + label {
    left: 22px;
    top: 50%;
    padding: 0;
    transform: translateY(-50%);
    color: rgba(240,209,96,.58);
    background: transparent;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(13px, 3.6vw, 17px);
    font-weight: 400;
}

.settings-password-card .password-slot input:not(:placeholder-shown) + label { opacity: 0; }

.settings-password-submit,
.settings-password-submit:hover {
    left: 12%;
    bottom: 11%;
    width: 76%;
    aspect-ratio: 413 / 135;
    padding: 8px 9% 0;
    font-size: clamp(17px, 4.6vw, 22px);
}

@media (max-height: 740px) {
    .profile-metal-card,
    .settings-password-card { width: min(82%, 330px); }
    .settings-language-card { width: min(82%, 330px); }
    .profile-logout-btn,
    .profile-logout-btn:hover { width: min(72%, 290px); }
}

/* Create bunker uses the same button artwork as Profile logout. */
#tabPlay .industrial-cta,
#tabPlay .industrial-cta:hover {
    width: 96%;
    aspect-ratio: 413 / 135;
    margin-right: auto;
    margin-left: auto;
    padding: 8px 18% 0 9%;
    color: #211b08;
    background-image: url('assets/auth/tab-login-on.png');
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(17px, 4.7vw, 23px);
    font-weight: 600;
}

#tabPlay .industrial-cta:active,
#tabPlay .industrial-cta.is-pressed {
    color: #f0d36b;
    background-image: url('assets/auth/tab-login-off.png');
}

#tabPlay .industrial-cta::before {
    width: clamp(30px, 8vw, 40px);
    height: clamp(30px, 8vw, 40px);
}

/* Visible text glow across every game screen. */
#mainApp :where(
    h1, h2, h3, h4, p, label, button,
    .nav-item, .player-sel-btn, .trait-card,
    .vote-item, .dossier-tab, .public-player-name,
    .trait-cat-label, .trait-val-label, .timer-display,
    .room-code, .profile-name-row, .profile-level-badge,
    .profile-games
) {
    text-shadow:
        0 0 2px rgba(255, 231, 116, .78),
        0 0 6px rgba(255, 204, 39, .42),
        0 0 12px rgba(255, 177, 0, .16) !important;
}

/* Feathered inner-glow approximation for dark lettering on yellow controls. */
#mainApp :where(
    .btn-primary,
    .industrial-cta,
    .profile-logout-btn,
    .settings-password-submit,
    .join-console .btn-secondary
) {
    -webkit-text-stroke: .55px rgba(255, 224, 100, .88) !important;
    text-shadow:
        0 0 1px rgba(255, 247, 190, .98),
        0 0 4px rgba(255, 218, 70, .78),
        0 0 8px rgba(255, 191, 13, .42),
        0 0 14px rgba(255, 168, 0, .18) !important;
}

/* Input copy stays crisp: no glow on values, placeholders or field labels. */
:where(
    input,
    textarea,
    select,
    .input-group label,
    .password-slot label
) {
    -webkit-text-stroke: 0 transparent !important;
    text-shadow: none !important;
}

/* Home story terminal — restrained irregular CRT/VHS flicker. */
#tabPlay .mission-brief::before {
    animation: home-terminal-frame-flicker 6.8s steps(1, end) infinite;
}

#tabPlay .mission-brief::after {
    content: '';
    position: absolute;
    inset: -35% 3% auto;
    z-index: 2;
    display: block;
    height: 28%;
    opacity: 0;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 228, 103, .035) 38%,
        rgba(255, 239, 163, .13) 50%,
        rgba(255, 218, 66, .025) 62%,
        transparent
    );
    mix-blend-mode: screen;
    pointer-events: none;
    animation: home-terminal-scan 7.4s linear infinite;
}

#tabPlay .mission-brief p {
    animation: home-terminal-text-flicker 5.9s steps(1, end) infinite;
}

@keyframes home-terminal-frame-flicker {
    0%, 8%, 10%, 31%, 33%, 67%, 69%, 100% { opacity: .75; filter: brightness(1); }
    8.4% { opacity: .59; filter: brightness(.83); }
    9.1% { opacity: .82; filter: brightness(1.12); }
    31.5% { opacity: .67; filter: brightness(.91); }
    32.1% { opacity: .79; filter: brightness(1.06); }
    67.4% { opacity: .57; filter: brightness(.78); }
    68.1% { opacity: .84; filter: brightness(1.14); }
}

@keyframes home-terminal-text-flicker {
    0%, 13%, 15%, 46%, 48%, 79%, 81%, 100% { opacity: 1; }
    13.5%, 47.1%, 79.6% { opacity: .72; }
    14.1%, 47.6%, 80.2% { opacity: .94; }
}

@keyframes home-terminal-scan {
    0%, 12% { transform: translateY(0); opacity: 0; }
    14% { opacity: .55; }
    42% { transform: translateY(440%); opacity: .25; }
    44%, 100% { transform: translateY(440%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #tabPlay .mission-brief::before,
    #tabPlay .mission-brief::after,
    #tabPlay .mission-brief p { animation: none; }
}

#gameTurn .player-selector-sticky {
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

#gameTurn .selector-test-message {
    margin: 24px auto;
    color: #aaa69d;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    text-align: center;
    text-shadow: none !important;
}

/* Compact voting deck for rooms with up to twelve players. */
#gameVoting #votingList {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: start;
    justify-items: center;
    gap: 13px 7px;
    width: 100%;
    max-width: 390px;
    margin: 0 auto 8px;
    padding: 13px 2px 6px;
}

#gameVoting .vote-item {
    position: relative;
    display: block;
    width: clamp(68px, 21vw, 86px);
    min-height: 0;
    aspect-ratio: 311 / 328;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: url('assets/ui/round/player-inactive.png') center / 100% 100% no-repeat;
    cursor: pointer;
    transition: transform .32s cubic-bezier(.18, .9, .25, 1.25), filter .3s, box-shadow .3s;
    filter: drop-shadow(0 7px 8px rgba(0, 0, 0, .48));
}

#gameVoting .vote-item::before,
#gameVoting .vote-item::after { display: none; }

#gameVoting .vote-item:hover { transform: translateY(-3px); }

#gameVoting .vote-item.selected {
    background:
        linear-gradient(rgba(235, 190, 31, .2), rgba(95, 65, 0, .18)),
        url('assets/ui/round/player-inactive.png') center / 100% 100% no-repeat;
    box-shadow: none;
    transform: translateY(-10px) rotate(-1deg) scale(1.05);
    filter: drop-shadow(0 11px 12px rgba(0, 0, 0, .62)) drop-shadow(0 0 8px rgba(239, 197, 48, .45));
    animation: vote-card-claim .38s cubic-bezier(.18, .9, .25, 1.25);
}

@keyframes vote-card-claim {
    from { transform: translateY(0) scale(1); filter: brightness(1.8); }
    to { transform: translateY(-10px) rotate(-1deg) scale(1.05); filter: brightness(1); }
}

#gameVoting .vote-player-avatar {
    position: absolute;
    top: 14%;
    left: 18%;
    width: 64%;
    height: 56%;
    border: 1px solid rgba(186, 176, 139, .48);
    border-radius: 3px;
    object-fit: cover;
    background: #111;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
}

#gameVoting .vote-player-name-window {
    position: absolute;
    right: 14%;
    bottom: 12%;
    left: 14%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
}

#gameVoting .vote-player-name {
    display: block;
    width: max-content;
    min-width: 100%;
    overflow: visible;
    color: #d8c25f;
    font-size: clamp(7px, 2.2vw, 10px);
    line-height: 1.15;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
    text-shadow: 0 0 3px rgba(227, 191, 53, .32) !important;
}

#gameVoting .vote-player-name.is-overflowing {
    animation: vote-name-shuttle 3.4s ease-in-out infinite alternate;
}

@keyframes vote-name-shuttle {
    0%, 14% { transform: translateX(0); }
    86%, 100% { transform: translateX(var(--vote-name-shift)); }
}

#gameVoting .player-voted-icon { display: none; }

#gameVoting .vote-count-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    z-index: 3;
    display: none;
    width: 24px;
    min-width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 145, 137, .72);
    font-size: 11px;
}

#gameVoting .vote-count-badge.is-visible { display: flex; }

@media (max-width: 345px) {
    #gameVoting #votingList { gap: 11px 4px; }
    #gameVoting .vote-item { width: clamp(62px, 20.5vw, 72px); }
    #gameVoting .vote-count-badge { width: 21px; min-width: 21px; height: 21px; font-size: 9px; }
}

/* Transparent VHS/CRT voting header. */
#gameVoting .voting-status-panel {
    isolation: isolate;
    min-height: 88px;
    margin-bottom: 5px;
    padding: 8px 8% 10px;
    background: none;
    filter: none;
}

#gameVoting .voting-status-panel::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 8% 5%;
    opacity: .2;
    background: repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 3px,
        rgba(111, 255, 98, .11) 4px
    );
    pointer-events: none;
}

#gameVoting .voting-status-panel h2 {
    color: #78ef69;
    font-weight: 400;
    letter-spacing: 2px;
    -webkit-text-stroke: 0 transparent !important;
    text-shadow:
        -1px 0 rgba(230, 255, 225, .65),
        1px 0 rgba(39, 255, 71, .42),
        0 0 4px rgba(74, 255, 67, .62),
        0 0 12px rgba(74, 255, 67, .2) !important;
    animation: story-telemetry-flicker 2.8s steps(1) infinite, voting-vhs-jitter 4.6s steps(1) infinite;
}

#gameVoting #voteTimer {
    color: #b7f5ad;
    font-weight: 400;
    text-shadow:
        0 0 2px rgba(240, 255, 237, .82),
        0 0 6px rgba(83, 255, 75, .58),
        0 0 15px rgba(65, 238, 59, .18) !important;
    animation: story-telemetry-flicker 2.8s steps(1) infinite;
}

@keyframes voting-vhs-jitter {
    0%, 91%, 100% { transform: translate(0); }
    92% { transform: translate(-1px, 0); }
    93% { transform: translate(1px, 1px); }
    94% { transform: translate(0); }
}

/* Player dossier as a readable VHS/CRT terminal inside the metal frame. */
#gameTurn .physical-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #8bea7d;
    background-image:
        url('assets/auth/form-border.png'),
        radial-gradient(ellipse at 50% 28%, rgba(52, 101, 47, .34), rgba(4, 20, 8, .94) 72%),
        linear-gradient(180deg, rgba(19, 47, 23, .96), rgba(2, 13, 5, .98));
    background-position: center, center, center;
    background-size: 100% 100%, 86% 90%, 86% 90%;
    background-repeat: no-repeat;
}

#gameTurn .physical-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    display: block;
    inset: 5% 6%;
    opacity: .32;
    background:
        linear-gradient(90deg, transparent 0 49.5%, rgba(191, 255, 181, .035) 50%, transparent 50.5%),
        repeating-linear-gradient(180deg, transparent 0, transparent 3px, rgba(113, 255, 100, .13) 4px);
    pointer-events: none;
    animation: dossier-vhs-flicker 3.1s steps(1) infinite;
}

#gameTurn .physical-card > * {
    position: relative;
    z-index: 1;
}

#gameTurn .physical-card .public-player-name {
    border-bottom-color: rgba(104, 238, 91, .42);
    color: #a2f494;
    text-shadow: 0 0 4px rgba(70, 255, 61, .46), 0 0 11px rgba(70, 255, 61, .14) !important;
    animation: story-telemetry-flicker 3.1s steps(1) infinite;
}

#gameTurn .physical-card .trait-div-row {
    border: 1px solid rgba(103, 214, 92, .18) !important;
    border-radius: 3px !important;
    color: #7eed70;
    background:
        repeating-linear-gradient(180deg, transparent 0, transparent 3px, rgba(104, 244, 91, .045) 4px),
        linear-gradient(180deg, rgba(18, 52, 23, .74), rgba(3, 25, 8, .86)) !important;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, .5), 0 0 5px rgba(73, 216, 62, .08);
}

#gameTurn .physical-card .trait-cat-label {
    color: rgba(141, 224, 130, .6) !important;
    text-shadow: none !important;
}

#gameTurn .physical-card .trait-val-label {
    color: #7ff171 !important;
    text-shadow: 0 0 4px rgba(71, 255, 62, .48) !important;
    animation: story-telemetry-flicker 3.1s steps(1) infinite;
}

#gameTurn .physical-card .special-trait-row {
    border-left-width: 2px !important;
}

#gameTurn .physical-card .special-trait-row:nth-last-of-type(2) {
    border-color: rgba(224, 181, 56, .42) !important;
    background: linear-gradient(180deg, rgba(66, 50, 13, .68), rgba(28, 20, 3, .84)) !important;
}

#gameTurn .physical-card .special-trait-row:nth-last-of-type(1) {
    border-color: rgba(225, 69, 56, .4) !important;
    background: linear-gradient(180deg, rgba(69, 18, 14, .66), rgba(30, 5, 3, .84)) !important;
}

#gameTurn .physical-card .trait-val-label.blurred-text {
    color: rgba(91, 201, 81, .55) !important;
    filter: blur(4px) saturate(.75);
    text-shadow: 0 0 6px rgba(80, 255, 69, .35) !important;
}

#gameTurn .physical-card .dossier-note {
    border-color: rgba(164, 157, 128, .3);
    color: #ccc8bb;
    background: rgba(5, 8, 6, .86);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, .62);
    text-shadow: none !important;
}

@keyframes dossier-vhs-flicker {
    0%, 91%, 94%, 100% { opacity: .32; transform: translateY(0); }
    92% { opacity: .18; transform: translateY(1px); }
    93% { opacity: .4; transform: translateY(-1px); }
}

/* Fixed-ratio dossier frame; only its inner terminal content scrolls. */
#gameTurn .physical-card {
    width: min(100%, 420px) !important;
    height: auto;
    aspect-ratio: 616 / 726;
    padding: 0;
    overflow: hidden;
    background-size: 100% 100%, 86% 90%, 86% 90%;
}

#gameTurn .dossier-screen-content {
    position: absolute;
    z-index: 1;
    inset: 7.8% 9% 7.2%;
    display: block;
    min-width: 0;
    min-height: 0;
    padding: 4% 2.5% 8%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 224, 91, .42) transparent;
    -webkit-overflow-scrolling: touch;
}

#gameTurn .dossier-screen-content::-webkit-scrollbar { width: 3px; }
#gameTurn .dossier-screen-content::-webkit-scrollbar-track { background: transparent; }
#gameTurn .dossier-screen-content::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(102, 224, 91, .42);
}

/* Terminal dossier rows: label — leader — value, without individual boxes. */
#gameTurn .physical-card .trait-div-row {
    position: relative;
    display: grid !important;
    grid-template-columns: auto minmax(18px, 1fr) minmax(0, auto);
    align-items: end !important;
    gap: 7px;
    min-height: 38px;
    margin: 0 !important;
    padding: 9px 4px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none;
}

#gameTurn .physical-card .trait-cat-label,
#gameTurn .physical-card .trait-val-label {
    line-height: 1.2;
}

#gameTurn .physical-card .trait-leader {
    min-width: 16px;
    margin-bottom: 3px;
    border-bottom: 1px solid rgba(99, 231, 87, .48);
}

#gameTurn .physical-card .trait-div-row.is-revealed .trait-leader {
    border-bottom-color: rgba(108, 250, 95, .72);
}

#gameTurn .physical-card .trait-div-row.is-revealed .trait-val-label {
    color: #86f477 !important;
}

#gameTurn .physical-card .trait-div-row.is-own-hidden {
    padding-bottom: 15px !important;
}

#gameTurn .physical-card .trait-div-row.is-own-hidden .trait-leader {
    border-bottom: 1px dashed rgba(230, 191, 57, .62);
}

#gameTurn .physical-card .trait-div-row.is-own-hidden .trait-val-label {
    color: #dfc052 !important;
    text-shadow: 0 0 3px rgba(225, 187, 55, .28) !important;
}

#gameTurn .physical-card .trait-div-row.is-own-hidden::after,
#gameTurn .physical-card .trait-div-row.is-hidden::after {
    position: absolute;
    right: 4px;
    bottom: 1px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 6px;
    font-weight: 400;
    letter-spacing: .7px;
    text-shadow: none !important;
}

#gameTurn .physical-card .trait-div-row.is-own-hidden::after {
    content: 'НЕ ПОКАЗАНО';
    color: rgba(225, 191, 64, .62);
}

#gameTurn .physical-card .trait-div-row.is-hidden {
    opacity: .58;
    padding-bottom: 15px !important;
}

#gameTurn .physical-card .trait-div-row.is-hidden .trait-leader {
    border-bottom: 1px dashed rgba(119, 155, 115, .36);
}

#gameTurn .physical-card .trait-div-row.is-hidden::after {
    content: 'ЗАСЕКРЕЧЕНО';
    color: rgba(154, 173, 150, .52);
}

#gameTurn .physical-card .special-trait-row {
    grid-template-columns: auto minmax(18px, 1fr);
    padding-top: 13px !important;
}

#gameTurn .physical-card .special-trait-row .trait-val-label {
    grid-column: 1 / -1;
    padding: 5px 0 2px;
    text-align: left;
}

#gameTurn .physical-card .special-trait-row:nth-last-of-type(2),
#gameTurn .physical-card .special-trait-row:nth-last-of-type(1) {
    border-top: 1px solid rgba(105, 231, 92, .22) !important;
    background: none !important;
}

/* Story and bunker intelligence as one VHS/CRT terminal. */
#intelPanel.intel-panel {
    isolation: isolate;
    padding: 15px 20px max(22px, env(safe-area-inset-bottom));
    border: 1px solid rgba(99, 231, 87, .34);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    color: #83ed75;
    background:
        radial-gradient(ellipse at 50% 18%, rgba(54, 104, 49, .42), rgba(3, 19, 7, .97) 67%),
        #031207;
    box-shadow: 0 -14px 42px rgba(0, 0, 0, .78), inset 0 0 34px rgba(24, 112, 28, .18);
    font-family: 'Share Tech Mono', monospace;
}

#intelPanel.intel-panel::before {
    content: '';
    position: fixed;
    z-index: -1;
    inset: auto 0 0;
    width: min(100%, 480px);
    height: 84dvh;
    margin: 0 auto;
    opacity: .3;
    background:
        linear-gradient(90deg, transparent 0 49.5%, rgba(194, 255, 185, .035) 50%, transparent 50.5%),
        repeating-linear-gradient(180deg, transparent 0, transparent 3px, rgba(110, 255, 97, .12) 4px);
    pointer-events: none;
    animation: intel-vhs-flicker 3s steps(1) infinite;
}

#intelPanel .intel-panel-handle {
    background: rgba(120, 213, 112, .42);
    box-shadow: 0 0 5px rgba(76, 255, 67, .28);
}

#intelPanel .intel-kicker {
    color: rgba(126, 232, 115, .62);
    font-size: 10px;
    font-weight: 400;
    text-shadow: none !important;
}

#intelPanel h2 {
    color: #91f382;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(21px, 6vw, 28px);
    font-weight: 400;
    text-shadow: 0 0 4px rgba(74, 255, 67, .52), 0 0 12px rgba(74, 255, 67, .16) !important;
    animation: story-telemetry-flicker 3s steps(1) infinite;
}

#intelPanel .intel-body {
    color: #83e977;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.5;
}

#intelPanel .intel-section {
    margin-bottom: 5px;
    padding: 15px 3px 16px;
    border: 0;
    border-bottom: 1px solid rgba(101, 229, 89, .27);
    border-radius: 0;
    background: none;
}

#intelPanel .intel-section strong {
    color: rgba(137, 235, 126, .68);
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1.2px;
    text-shadow: none !important;
}

#intelPanel .intel-section > div {
    color: #86ec78;
    text-shadow: 0 0 4px rgba(71, 255, 62, .38) !important;
    animation: story-telemetry-flicker 3s steps(1) infinite;
}

#intelPanel #closeIntelPanelBtn {
    width: 72%;
    min-height: 0;
    aspect-ratio: 413 / 135;
    margin: 16px auto 0;
    padding: 7px 8% 0;
    border: 0;
    border-radius: 0;
    color: #89ed7b;
    background: url('assets/auth/tab-login-off.png') center / 100% 100% no-repeat;
    font-family: 'Share Tech Mono', monospace;
    font-weight: 400;
    text-shadow: 0 0 4px rgba(74, 255, 67, .4) !important;
}

@keyframes intel-vhs-flicker {
    0%, 92%, 95%, 100% { opacity: .3; transform: translateY(0); }
    93% { opacity: .16; transform: translateY(1px); }
    94% { opacity: .4; transform: translateY(-1px); }
}

/* Preserve the original story-frame ratio instead of stretching the PNG. */
#gameStory .story-console {
    width: min(90%, 420px);
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 616 / 726;
    padding: 9% 9.5% 7%;
}

#gameStory .story-console::before {
    inset: 5%;
    transform: none;
}

#gameStory .story-alert-title { margin-bottom: 8px; }
#gameStory .story-telemetry { margin-top: 8px; }
#gameStory .story-accept-btn { margin-top: 20px; }

/* Discussion timer becomes a transparent VHS readout. */
#gameTurn .round-status-panel {
    isolation: isolate;
    min-height: 102px;
    padding: 9px 8% 11px;
    background: none;
    filter: none;
}

#gameTurn .round-status-panel::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 7% 5%;
    opacity: .22;
    background: repeating-linear-gradient(180deg, transparent 0, transparent 3px, rgba(110, 255, 97, .12) 4px);
    pointer-events: none;
    animation: story-telemetry-flicker 3s steps(1) infinite;
}

#gameTurn .round-status-panel p {
    color: rgba(153, 235, 144, .68);
    font-weight: 400;
    text-shadow: none !important;
}

#gameTurn #turnTimer {
    color: #a9f39f;
    text-shadow: 0 0 3px rgba(235, 255, 232, .72), 0 0 7px rgba(74, 255, 67, .52), 0 0 16px rgba(74, 255, 67, .16) !important;
    animation: story-telemetry-flicker 3s steps(1) infinite;
}

/* Smaller centered Intel close control, retaining its readable text size. */
#intelPanel #closeIntelPanelBtn {
    display: block;
    width: 54%;
    margin: 18px auto 0;
    padding-right: 5%;
    padding-left: 5%;
    font-size: clamp(15px, 4.2vw, 19px);
}

/* End-of-game screen as a final green VHS protocol. */
#gameEnded {
    align-items: stretch;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 8px 6% 24px;
    color: #86ed78;
    font-family: 'Share Tech Mono', monospace;
    scrollbar-width: none;
}

#gameEnded::-webkit-scrollbar { display: none; }

#gameEnded .results-panel {
    position: relative;
    isolation: isolate;
    margin: auto 0 12px;
    padding: 23px 14px;
    border: 1px solid rgba(100, 230, 88, .3);
    border-radius: 4px;
    background: radial-gradient(ellipse at center, rgba(35, 87, 39, .38), rgba(3, 20, 7, .9) 72%);
    box-shadow: inset 0 0 22px rgba(18, 93, 24, .18);
}

#gameEnded .results-panel::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .27;
    background: repeating-linear-gradient(180deg, transparent 0, transparent 3px, rgba(111, 255, 98, .12) 4px);
    pointer-events: none;
}

#gameEnded .eyebrow {
    color: rgba(139, 230, 129, .62);
    font-size: 9px;
    font-weight: 400;
    text-shadow: none !important;
}

#gameEnded .results-panel h2 {
    color: #85f277;
    font-size: clamp(22px, 6.4vw, 30px);
    font-weight: 400;
    text-shadow: 0 0 4px rgba(74, 255, 67, .52), 0 0 12px rgba(74, 255, 67, .15) !important;
    animation: story-telemetry-flicker 3s steps(1) infinite;
}

#gameEnded #gameResultSummary {
    color: #a8e9a0;
    font-size: clamp(13px, 3.6vw, 16px);
    text-shadow: 0 0 3px rgba(72, 255, 63, .25) !important;
}

#gameEnded .section-title {
    color: rgba(145, 235, 135, .7);
    font-weight: 400;
    text-shadow: none !important;
}

#gameEnded #survivorsList {
    margin: 0 0 12px;
    padding: 2px 4px;
    border-top: 1px solid rgba(101, 225, 90, .24);
    border-bottom: 1px solid rgba(101, 225, 90, .24);
    background: transparent;
}

#gameEnded #survivorsList .player-list-item {
    min-height: 46px;
    padding: 9px 6px;
    border-bottom: 1px dashed rgba(101, 225, 90, .18);
    color: #8ced7e;
}

#gameEnded #survivorsList .player-list-item:last-child { border-bottom: 0; }

#gameEnded #survivorsList .lvl-badge {
    margin-left: auto;
    border: 1px solid rgba(107, 239, 95, .42);
    border-radius: 3px;
    color: #86ed78;
    background: rgba(9, 38, 12, .72);
    font-family: 'Share Tech Mono', monospace;
    font-weight: 400;
}

#gameEnded #rematchHint {
    color: rgba(158, 201, 153, .68);
    font-size: 12px;
    text-shadow: none !important;
}

#gameEnded #restartGameBtn,
#gameEnded #leaveEndedRoomBtn {
    width: 72%;
    min-height: 0;
    aspect-ratio: 413 / 135;
    margin: 5px auto 0;
    padding: 7px 7% 0;
    border: 0;
    border-radius: 0;
    color: #8bed7d;
    background: url('assets/auth/tab-login-off.png') center / 100% 100% no-repeat;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(12px, 3.4vw, 16px);
    font-weight: 400;
    text-shadow: 0 0 4px rgba(74, 255, 67, .35) !important;
}

/* Metal timer frame with VHS only on the inner display; time remains yellow. */
#gameTurn .round-status-panel {
    min-height: 122px;
    padding: 16px 10% 14px;
    background: url('assets/ui/lobby-frame-border.png') center / 100% 100% no-repeat;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .52));
}

#gameTurn .round-status-panel::before {
    inset: 13% 5.8% 15%;
    opacity: 1;
    border-radius: 3px;
    background:
        repeating-linear-gradient(180deg, transparent 0, transparent 3px, rgba(110, 255, 97, .07) 4px),
        radial-gradient(ellipse at center, rgba(38, 75, 39, .3), rgba(5, 16, 7, .86) 72%);
}

#gameTurn .round-status-panel p {
    color: #b9b6ad;
    text-shadow: 0 1px 2px #000 !important;
}

#gameTurn #turnTimer {
    color: #f0cf51;
    text-shadow: 0 0 7px rgba(242, 202, 56, .46), 0 0 15px rgba(242, 202, 56, .18) !important;
}

/* Dynamic expulsion: emergency flash and two bunker doors slam shut. */
#kickAnimationOverlay {
    position: absolute;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(8, 5, 3, .88);
}

#kickAnimationOverlay .kick-door {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 50.5%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: inset 0 0 35px rgba(0, 0, 0, .88), 0 0 22px rgba(0, 0, 0, .9);
}

#kickAnimationOverlay .kick-door::before {
    display: none;
}

#kickAnimationOverlay .kick-door-left {
    left: 0;
    transform: translateX(-105%);
    background-image: url('assets/ui/kick/door-left.png');
    background-position: center right;
}

#kickAnimationOverlay .kick-door-right {
    right: 0;
    transform: translateX(105%);
    background-image: url('assets/ui/kick/door-right.png');
    background-position: center left;
}

#kickAnimationOverlay.kick-anim-enter > .kick-door-left {
    animation: bunker-door-left .78s cubic-bezier(.68, .02, .2, 1) forwards;
}

#kickAnimationOverlay.kick-anim-enter > .kick-door-right {
    animation: bunker-door-right .78s cubic-bezier(.68, .02, .2, 1) forwards;
}

#kickAnimationOverlay .kick-content {
    position: relative;
    z-index: 5;
    width: 88%;
    opacity: 0;
    text-align: center;
}

#kickAnimationOverlay.kick-anim-enter > .kick-content {
    animation: kick-content-reveal .55s .72s cubic-bezier(.18, .9, .25, 1.25) forwards;
}

#kickAnimationOverlay .kick-content p {
    margin: 0 0 18px;
    color: #ff4c43;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(9px, 2.7vw, 12px);
    letter-spacing: 1.3px;
    text-shadow: 0 0 5px rgba(255, 39, 30, .72) !important;
}

#kickAnimationOverlay .kick-stamp {
    display: inline-block;
    padding: 11px 18px 8px;
    border: 4px solid #ff3b32;
    border-radius: 5px;
    color: #ff3b32;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(35px, 11vw, 54px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 4px;
    transform: rotate(-5deg);
    text-shadow: 0 0 7px rgba(255, 42, 32, .66) !important;
    box-shadow: inset 0 0 10px rgba(255, 38, 29, .16), 0 0 18px rgba(255, 38, 29, .28);
}

#kickAnimationOverlay #kickedPlayerName {
    margin: 24px 0 0;
    color: #f2eee5;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(23px, 7vw, 34px);
    font-weight: 400;
    text-shadow: 0 0 5px rgba(255, 255, 255, .3) !important;
}

#kickAnimationOverlay.kick-anim-enter {
    animation: kick-emergency-flash 1.45s ease-out both;
}

@keyframes bunker-door-left {
    0% { transform: translateX(-105%); }
    82% { transform: translateX(2%); }
    100% { transform: translateX(0); }
}

@keyframes bunker-door-right {
    0% { transform: translateX(105%); }
    82% { transform: translateX(-2%); }
    100% { transform: translateX(0); }
}

/* Waiting lobby — fixed industrial frames with a VHS terminal interior. */
#gameWaiting .player-list-item {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1047 / 319;
    margin-right: 0;
    margin-left: 0;
    padding: 15px 10.5%;
    gap: clamp(7px, 2.2vw, 12px);
    background: transparent;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45));
}

#gameWaiting .player-list-item::before {
    display: block;
    z-index: -2;
    inset: 13% 4.2% 15%;
    background:
        repeating-linear-gradient(0deg, rgba(115, 255, 116, .035) 0 1px, transparent 1px 4px),
        radial-gradient(circle at 50% 45%, rgba(58, 137, 56, .2), transparent 65%),
        linear-gradient(90deg, rgba(1, 24, 9, .91), rgba(3, 39, 13, .84), rgba(1, 20, 7, .92));
}

#gameWaiting .player-list-item::after {
    inset: 0;
    background: url('assets/ui/lobby-frame-border.png') center / contain no-repeat;
}

#gameWaiting .avatar-mini {
    flex: 0 0 auto;
    width: clamp(42px, 11vw, 52px);
    height: clamp(42px, 11vw, 52px);
    border-color: rgba(202, 193, 166, .76);
    box-shadow: 0 0 6px rgba(0, 0, 0, .7);
    filter: none;
}

#gameWaiting .waiting-player-name {
    min-width: 0;
    color: #72ff72;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(17px, 4.5vw, 23px);
    font-weight: 400;
    text-shadow: 0 0 4px rgba(91, 255, 91, .82), 0 0 10px rgba(36, 255, 57, .38) !important;
}

#gameWaiting .lvl-badge {
    border-color: rgba(86, 221, 92, .42);
    color: #83ff7c;
    background: rgba(0, 20, 7, .72);
    box-shadow: inset 0 0 9px rgba(40, 255, 62, .1), 0 0 5px rgba(42, 255, 62, .18);
    font-size: clamp(8px, 2.4vw, 10px);
    text-shadow: 0 0 4px rgba(71, 255, 81, .65);
}

#gameWaiting #leaveRoomBtn {
    color: #aaa69d;
    font-family: 'Share Tech Mono', monospace;
    font-weight: 400;
    text-shadow: none !important;
}

/* Voting tie: the administrator chooses whether to revote or keep everyone. */
#gameVoting .tie-decision-controls {
    width: min(100%, 420px);
    margin: 10px auto 0;
}

#gameVoting .tie-decision-controls:not([hidden]) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

#gameVoting .tie-decision-controls .btn {
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 0;
    color: #171307;
    background: url('assets/auth/tab-login-on.png') center / 100% 100% no-repeat;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(11px, 3.1vw, 15px);
    line-height: 1.05;
}

#gameVoting .tie-decision-controls .btn-secondary {
    color: #d0cbc0;
    background-image: url('assets/auth/tab-login-off.png');
}

/* Main navigation transition — bunker doors cover the tab swap. */
#tabDoorTransition {
    position: fixed;
    inset: 0;
    z-index: 3500;
    display: block;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

#tabDoorTransition.is-active {
    visibility: visible;
    pointer-events: auto;
    animation: tab-transition-shade .9s ease both;
}

#tabDoorTransition .tab-transition-door {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50.5%;
    background-repeat: no-repeat;
    background-size: cover;
    filter: drop-shadow(0 0 18px rgba(0, 0, 0, .9));
    will-change: transform;
}

#tabDoorTransition .tab-transition-door-left {
    left: 0;
    transform: translateX(-105%);
    background-image: url('assets/ui/kick/door-left.png');
    background-position: center right;
}

#tabDoorTransition .tab-transition-door-right {
    right: 0;
    transform: translateX(105%);
    background-image: url('assets/ui/kick/door-right.png');
    background-position: center left;
}

#tabDoorTransition.is-active .tab-transition-door-left {
    animation: tab-door-left .9s cubic-bezier(.7, .02, .2, 1) both;
}

#tabDoorTransition.is-active .tab-transition-door-right {
    animation: tab-door-right .9s cubic-bezier(.7, .02, .2, 1) both;
}

#tabDoorTransition .tab-transition-seam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 2;
    width: 3px;
    opacity: 0;
    background: #ffd332;
    box-shadow: 0 0 7px #ffd332, 0 0 18px rgba(255, 181, 19, .7);
    transform: translateX(-50%);
}

#tabDoorTransition.is-active .tab-transition-seam {
    animation: tab-door-seam .9s ease both;
}

@keyframes tab-door-left {
    0% { transform: translateX(-105%); }
    43%, 57% { transform: translateX(0); }
    100% { transform: translateX(-105%); }
}

@keyframes tab-door-right {
    0% { transform: translateX(105%); }
    43%, 57% { transform: translateX(0); }
    100% { transform: translateX(105%); }
}

@keyframes tab-door-seam {
    0%, 40%, 65%, 100% { opacity: 0; }
    46%, 57% { opacity: 1; }
}

@keyframes tab-transition-shade {
    0%, 100% { background: rgba(0, 0, 0, 0); }
    43%, 57% { background: rgba(0, 0, 0, .52); }
}

@media (prefers-reduced-motion: reduce) {
    #tabDoorTransition { display: none; }
}

@keyframes kick-content-reveal {
    0% { opacity: 0; transform: scale(1.8); filter: brightness(2); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes kick-emergency-flash {
    0%, 30% { background-color: rgba(8, 5, 3, .88); }
    38% { background-color: rgba(179, 11, 7, .82); }
    47% { background-color: rgba(15, 5, 3, .94); }
    59% { background-color: rgba(224, 20, 13, .7); }
    72%, 100% { background-color: rgba(8, 5, 3, .94); }
}

/* Final round HUD overrides — keep after the legacy round rules. */
#gameTurn .round-status-panel {
    min-height: 132px;
    margin-bottom: 10px;
    padding: 20px 10% 15px;
    background-size: 100% 100%, 94% 76%;
}

#gameTurn .round-status-panel p {
    margin-bottom: 7px;
    color: #bcb7ad;
    font-size: clamp(13px, 3.8vw, 17px);
    letter-spacing: 1px;
    text-shadow: 0 1px 2px #000 !important;
}

#gameTurn #turnTimer {
    font-size: clamp(43px, 12vw, 58px);
    letter-spacing: 2px;
}

#gameTurn .admin-timer-controls {
    display: grid;
    grid-template-columns: repeat(3, 54px) minmax(0, 1fr);
    align-items: stretch;
    gap: 5px;
    width: 100%;
    margin-bottom: 14px;
}

#gameTurn .admin-control-btn {
    aspect-ratio: 311 / 328;
    padding: 3px 3px 0;
    color: #e8ca56;
    background: url('assets/ui/round/player-inactive.png') center / 100% 100% no-repeat;
    font-size: clamp(10px, 3vw, 13px);
}

#gameTurn .admin-control-primary {
    grid-column: auto;
    width: 100%;
    aspect-ratio: auto;
    justify-self: stretch;
    color: #e8ca56;
    background-image: url('assets/auth/tab-login-off.png');
    font-size: clamp(12px, 3.5vw, 16px);
    font-weight: 400;
}

#gameTurn .dossier-navigation {
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    gap: 7px;
    min-height: 58px;
    margin: 0;
    padding: 3px 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

#gameTurn .intel-edge-btn {
    width: 72px;
    min-height: 0;
    aspect-ratio: 521 / 384;
    padding: 2px 9px 0;
    border: 0;
    color: #e2ca67;
    background: url('assets/ui/round/intel-button.png') center / 100% 100% no-repeat;
    font-size: 8px;
}

#gameTurn .intel-story-btn,
#gameTurn .intel-bunker-btn { color: #e2ca67; }

#gameTurn .player-selector-sticky {
    align-items: center;
    gap: 4px;
    min-height: 50px;
    padding: 0;
}

#gameTurn .player-selector-sticky .player-sel-btn {
    flex: 0 0 43px;
    width: 43px;
    min-width: 43px;
    height: 46px;
    min-height: 46px;
    padding: 2px 5px 0;
    border: 0 !important;
    border-radius: 0;
    color: #d3c9a5 !important;
    background: url('assets/ui/round/player-inactive.png') center / 100% 100% no-repeat !important;
    box-shadow: none;
    font-size: 10px;
}

#gameTurn .player-selector-sticky .player-sel-btn.active {
    flex-basis: 62px;
    width: 62px;
    min-width: 62px;
    height: 41px;
    min-height: 41px;
    color: #211a07 !important;
    background-image: url('assets/ui/round/player-active.png') !important;
    box-shadow: 0 0 10px rgba(241, 201, 50, .28);
}

#gameTurn .player-selector-sticky .player-sel-btn.is-kicked { opacity: .35; }

@media (max-width: 370px) {
    #gameTurn .admin-timer-controls { grid-template-columns: repeat(3, 48px) minmax(0, 1fr); gap: 3px; }
    #gameTurn .dossier-navigation { grid-template-columns: 62px minmax(0, 1fr) 62px; gap: 4px; }
    #gameTurn .intel-edge-btn { width: 62px; font-size: 7px; }
    #gameTurn .player-selector-sticky .player-sel-btn { flex-basis: 39px; width: 39px; min-width: 39px; height: 42px; min-height: 42px; }
    #gameTurn .player-selector-sticky .player-sel-btn.active { flex-basis: 55px; width: 55px; min-width: 55px; height: 37px; min-height: 37px; }
}

/* Force the active PNG to fit its button instead of rendering at native size. */
#gameTurn .player-selector-sticky .player-sel-btn.active {
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    overflow: hidden;
}

/* Timer header uses the same translucent plate as the Voting control. */
#gameTurn .round-status-panel {
    isolation: isolate;
    min-height: 126px;
    padding: 20px 11% 16px;
    background: none;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5));
}

#gameTurn .round-status-panel::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: url('assets/auth/tab-login-off.png') center / 100% 100% no-repeat;
    opacity: .75;
    pointer-events: none;
}

#gameTurn .swipe-hint {
    color: rgba(185, 185, 180, .72);
    -webkit-text-stroke: 0 transparent !important;
    text-shadow: none !important;
}

/* Compact ambient volume control in the Settings industrial/VHS language. */
#tabSettings .settings-volume-card {
    box-sizing: border-box;
    width: min(88%, 365px);
    aspect-ratio: 412 / 82;
    margin: -2px auto 14px;
    padding: 16px 24px 14px;
    border: 0;
    border-radius: 0;
    background: url('assets/auth/input-field.png') center / 100% 100% no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45));
    font-family: 'Share Tech Mono', monospace;
}

#tabSettings .settings-volume-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #dfc76f;
    font-size: 14px;
    letter-spacing: 1px;
    text-shadow: none !important;
}

#tabSettings #ambientVolumeValue {
    color: #dfc76f;
    text-shadow: none !important;
}

#tabSettings #ambientVolume {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    height: 4px;
    margin: 0;
    border-radius: 5px;
    background: linear-gradient(90deg, #7f6720, #d2ae39);
    box-shadow: inset 0 1px 3px #000, 0 0 3px rgba(225, 190, 66, .25);
}

#tabSettings #ambientVolume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #5a4716;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #fff1a0, #dbad22 56%, #58400e 100%);
    box-shadow: 0 0 9px rgba(255, 215, 65, .46);
}

#tabSettings #ambientVolume::-moz-range-thumb {
    width: 19px;
    height: 19px;
    border: 2px solid #5a4716;
    border-radius: 50%;
    background: #dbad22;
    box-shadow: 0 0 9px rgba(255, 215, 65, .46);
}

/* The text belongs to the metal JOIN asset and should not carry global glow. */
#tabPlay #joinRoomBtn {
    -webkit-text-stroke: 0 transparent !important;
    text-shadow: none !important;
}

/* Fill the story border: both source PNGs share the same ratio. */
#gameStory .story-console::before {
    inset: 0;
    background-position: center;
    background-size: 108% 108%;
}

/* Keep only the PNG button visible—no dark wrapper behind it. */
#gamePicking #confirmPickContainer {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: visible;
}

#gamePicking #confirmPickBtn {
    font-size: clamp(17px, 4.8vw, 22px);
}

.action-activate-btn {
    display: block;
    width: min(100%, 260px);
    min-height: 42px;
    margin: 12px auto 2px;
    padding: 8px 18px;
    border: 1px solid rgba(103, 255, 112, .48);
    background: rgba(0, 31, 8, .78);
    color: #72ff78;
    font: 16px/1.1 'Share Tech Mono', monospace;
    letter-spacing: 1.5px;
    text-shadow: 0 0 7px rgba(96, 255, 105, .75);
    box-shadow: inset 0 0 18px rgba(45, 255, 64, .08), 0 0 8px rgba(45, 255, 64, .12);
    cursor: pointer;
}

.action-activate-btn:active {
    transform: translateY(2px) scale(.98);
    filter: brightness(1.25);
}

.voting-action-btn {
    margin-bottom: 18px;
}

.condition-age-input {
    width: min(100%, 240px);
    min-height: 52px;
    margin: 0 auto;
    border: 1px solid rgba(103, 255, 112, .55);
    background: rgba(0, 22, 6, .9);
    color: #72ff78;
    font: 24px 'Share Tech Mono', monospace;
    text-align: center;
    outline: none;
}

.action-automatic-badge,
.private-spy-report {
    display: block;
    width: 100%;
    margin-top: 10px;
    color: #72ff78;
    font: 12px/1.35 'Share Tech Mono', monospace;
    letter-spacing: 1px;
    text-shadow: 0 0 6px rgba(96, 255, 105, .55);
}

.private-spy-report {
    padding: 10px;
    border: 1px solid rgba(103, 255, 112, .35);
    background: rgba(0, 25, 7, .72);
}