/* Alien Customs — TV/desktop redesign. Authored at 1280x720, scaled by #game-area. */

@font-face {
    font-family: AcTitle;
    src: url('/media/games/alien-custom/fonts/Cloudy.ttf') format('truetype');
}
@font-face {
    font-family: AcAlien;
    src: url('/media/games/alien-custom/fonts/cybattler.otf') format('opentype');
}

:root {
    --ac-space-bg: #05071E;
    --ac-hud-top: #2A2F6E;
    --ac-hud-bottom: #171B4A;
    --ac-hud-edge: #0D1033;
    --ac-violet-top: rgba(34, 20, 84, .94);
    --ac-violet-bottom: rgba(14, 8, 50, .96);
    --ac-violet-edge: rgba(190, 150, 255, .55);
    --ac-violet-edge-top: rgba(220, 195, 255, .75);
    --ac-cyan: #8BE9FD;
    --ac-cyan-deep: #4CC7E8;
    --ac-green: #6EE7A1;
    --ac-green-text: #8FF5B8;
    --ac-fill-top: #7FE99A;
    --ac-fill-bottom: #3BB868;
    --ac-play-top: #8FF0BE;
    --ac-play-bottom: #2FC97F;
    --ac-play-shadow: #1A8A55;
    --ac-btn-play-top: #7BD44E;
    --ac-btn-play-bottom: #3E9B25;
    --ac-btn-play-edge: #2C6B18;
    --ac-btn-switch-top: #6FC7FF;
    --ac-btn-switch-bottom: #2E8FE0;
    --ac-btn-switch-edge: #1B62A6;
    --ac-danger: #FF5064;
    --ac-danger-soft: #FFB3BC;
    --ac-danger-fill-top: #FF8A97;
    --ac-danger-fill-bottom: #E02840;
    --ac-danger-bar-top: #8E1226;
    --ac-danger-bar-bottom: #5A0714;
    --ac-danger-bar-edge: #3A0009;
    --ac-gold-top: #FFCE3A;
    --ac-gold-bottom: #F4A701;
    --ac-gold-edge: #B47B00;
    --ac-gold-strip-top: #FFF3C6;
    --ac-gold-strip-mid: #FFD463;
    --ac-gold-strip-bottom: #F0AE12;
    --ac-gold-bevel-top: #FFF6D2;
    --ac-gold-bevel-bottom: #FFE08A;
    --ac-gold-text: #7A5200;
    --ac-win-text: #1F6B3F;
    --ac-lose-text: #B33B00;
    --ac-coin-hi: #FFE79A;
    --ac-coin-mid: #F4A701;
    --ac-coin-lo: #B47B00;
    --ac-coin-ring: #FFEFC0;
    --ac-sparkle: #B6FFD4;
}

html, body { padding: 0; margin: 0; }

#full-area {
    width: 100%;
    height: 100vh;
    background: var(--ac-space-bg);
    position: absolute;
    overflow: hidden;
    user-select: none;
}

#game-area {
    position: absolute;
    width: 1280px;
    height: 720px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    background: var(--ac-space-bg);
    font-family: AcTitle, sans-serif;
}

#game-area .hidden { display: none !important; }

/* ---------- shared stage backdrop ---------- */

#home-section,
#start-section,
#gameContainer { position: absolute; inset: 0; }

#bgScene, #bgOverlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#bgScene { z-index: 0; }
#bgOverlay { z-index: 1; }

#floatingObjects { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.flying-obj { position: absolute; }
#flyObj0 { top: 60px; width: 190px; animation: acFly1 26s linear infinite; }
#flyObj1 { top: 300px; width: 120px; animation: acFly2 31s linear infinite; }
#flyObj2 { top: 480px; width: 90px; animation: acFly1 34s linear infinite; }

/* ---------- 01 home ---------- */

#home-section { z-index: 3; background: url('/media/games/alien-custom/images/background-scene.jpg') center/cover; }
#home-right { position: absolute; left: 70px; top: 26px; }
#logo {
    width: 330px;
    transform: rotate(-4deg);
    animation: acLogo .65s ease-in-out infinite alternate;
}

#start-section { z-index: 3; }

#intro-section {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: linear-gradient(180deg, rgba(5, 7, 30, .45), rgba(5, 7, 30, .3));
}

#alienRayIntro, #alien-cross, #basket, #ground, #banner { display: none !important; }

#ac-intro-logo {
    position: absolute;
    left: 70px;
    top: 26px;
    width: 330px;
    z-index: 5;
    transform: rotate(-4deg);
    animation: acLogo .65s ease-in-out infinite alternate;
}

#ac-home-officer {
    position: absolute;
    left: 50%;
    top: 50%;
    /* -58%, not -52%: the taller officer would otherwise run under the PLAY button */
    transform: translate(-50%, -58%);
    height: 470px;
    object-fit: contain;
    z-index: 4;
}

#ac-home-cards {
    position: absolute;
    right: 70px;
    top: 205px;
    width: 460px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    z-index: 5;
}
.ac-info-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--ac-violet-top), var(--ac-violet-bottom));
    border: 2px solid var(--ac-violet-edge);
    border-top-color: var(--ac-violet-edge-top);
    box-shadow: 0 6px 0 rgba(6, 4, 26, .55), 0 11px 16px rgba(0, 0, 0, .35);
}
.ac-info-card i {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--ac-gold-top), var(--ac-gold-bottom));
    border: 2px solid var(--ac-gold-edge);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ac-info-card i img { width: 66%; height: 66%; object-fit: contain; }
.ac-info-card span {
    font-family: AcTitle, sans-serif;
    font-size: 24px;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}

#startGame {
    position: absolute;
    left: 50%;
    /* 84px, not the mock's 44px: the platform speech bar overlays the bottom ~70px */
    bottom: 104px;
    transform: translateX(-50%);
    z-index: 6;
    padding: 12px 74px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--ac-play-top), var(--ac-play-bottom));
    border: 5px solid rgba(255, 255, 255, .72);
    box-shadow: 0 9px 0 var(--ac-play-shadow), 0 18px 28px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .5);
    font-family: AcTitle, sans-serif;
    font-size: 36px;
    letter-spacing: 3px;
    color: #10331f;
    cursor: pointer;
    width: auto;
    height: auto;
    line-height: 1;
}

/* ---------- 02 choose level ---------- */

#gameContainer { z-index: 5; }

#tripSelection {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 0 24px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(5, 7, 30, .55), rgba(5, 7, 30, .35));
}

#tripSelectionTitle {
    margin-top: 34px;
    padding: 10px 54px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ac-cyan), var(--ac-cyan-deep));
    border: 4px solid #fff;
    font-family: AcTitle, sans-serif;
    font-size: 38px;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 2px 0 rgba(20, 90, 120, .65);
}

#tripSelectionHint { display: none; }

#tripScrollWrapper {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
}

#tripCards {
    display: grid;
    grid-template-columns: repeat(4, 226px);
    gap: 18px 22px;
    overflow: visible;
}

.tripCard {
    position: relative;
    width: 226px;
    box-sizing: border-box;
    padding: 24px 16px 28px 12px;
    background: url('/media/games/alien-custom/images/props/alien-square.png') no-repeat center;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    border: none;
    color: #fff;
    transition: transform .18s ease, filter .18s ease;
}
.tripCard .tripCard-index {
    position: absolute;
    left: 13px;
    top: 13px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: AcTitle, sans-serif;
    font-size: 16px;
    color: #fff;
}
.tripCard .tripCard-art {
    width: 120px;
    height: 120px;
    object-fit: contain;
}
/* whole-card lift + glow, not an art-only scale */
.tripCard:not(.is-locked):hover,
.tripCard:not(.is-locked):focus {
    transform: translateY(-10px);
    filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45)) drop-shadow(0 0 12px rgba(139, 233, 253, .65));
}
.tripCard .tripCard-label {
    width: 100%;
    margin-top: -20px;
    padding: 7px 6px;
    box-sizing: border-box;
    border-radius: 999px;
    background: rgba(6, 10, 34, .86);
    border: 2px solid rgba(255, 255, 255, .35);
    font-family: AcTitle, sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
}
.tripCard .tripCard-badge {
    position: absolute;
    right: -10px;
    top: -10px;
    width: 46px;
    height: 46px;
    object-fit: contain;
    display: none;
}
.tripCard.is-done .tripCard-badge { display: block; }
.tripCard.is-current { filter: drop-shadow(0 0 16px rgba(110, 231, 161, .8)); }
.tripCard.is-locked { transform: translateY(-5px); }
.tripCard.is-locked .tripCard-art { filter: brightness(0); }
.tripCard.is-locked .tripCard-label { background: #05060f; font-size: 0; }
.tripCard.is-locked .tripCard-label::after {
    content: "";
    width: 22px;
    height: 22px;
    background: url('/media/games/alien-custom/images/props/padlock.png') no-repeat center/contain;
}

.trip-scroll-btn {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(6, 10, 34, .6);
    border: 3px solid rgba(255, 255, 255, .22);
    font-size: 0;
    color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 auto;
}
.trip-scroll-btn::after {
    content: "";
    width: 28px;
    height: 38px;
    opacity: .35;
    background: url('/media/games/alien-custom/images/props/arrow-point.png') no-repeat center/contain;
}
#tripScrollRight::after { transform: scaleX(-1); }
.trip-scroll-btn.is-active {
    background: linear-gradient(180deg, var(--ac-play-top), var(--ac-play-bottom));
    border-color: rgba(255, 255, 255, .55);
}
.trip-scroll-btn.is-active::after { opacity: 1; }

#ac-pager-dots {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#ac-pager-dots i { width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .32); }
#ac-pager-dots i.on { width: 28px; background: var(--ac-green); }

/* ---------- 03-06 interrogation ---------- */

#gameElements { position: absolute; inset: 0; z-index: 6; }

#gameElements::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 12;
    box-shadow: inset 0 0 140px 40px rgba(255, 40, 70, .55);
    background: radial-gradient(circle at 50% 55%, rgba(0, 0, 0, 0) 30%, rgba(20, 0, 6, .55) 100%);
}
#gameElements.is-rejected::after { opacity: 1; animation: acEdgeGlow .8s ease-in-out infinite; }

#approvalBar {
    position: absolute;
    left: -24px;
    top: 26px;
    z-index: 8;
    width: 440px;
    height: 40px;
    box-sizing: border-box;
    padding: 5px 5px 5px 28px;
    display: flex;
    align-items: center;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, var(--ac-hud-top), var(--ac-hud-bottom));
    border: 2px solid var(--ac-hud-edge);
    border-right: none;
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, .18);
}
#approvalBarFill {
    height: 100%;
    width: 0%;
    border-radius: 0 8px 8px 0;
    background: linear-gradient(180deg, var(--ac-fill-top), var(--ac-fill-bottom));
    box-shadow: inset 0 0 0 2px rgba(20, 90, 45, .55);
    transition: width .35s ease;
}
#approvalBarLabel {
    position: absolute;
    left: 28px;
    right: 52px;
    text-align: center;
    font-family: AcTitle, sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
#ac-approval-coin, #ac-trip-coin {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, var(--ac-coin-hi), var(--ac-coin-mid) 60%, var(--ac-coin-lo));
    border: 4px solid var(--ac-coin-ring);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .5), inset 0 -3px 4px rgba(0, 0, 0, .3), inset 0 2px 3px rgba(255, 255, 255, .6);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* pulled inward so the coin caps the bar's rounded right end instead of floating past it */
#ac-approval-coin { right: -18px; }
#ac-trip-coin { right: -16px; }
/* stays hidden until showCurrentItem() gives it a real src, else it renders a broken-image glyph */
#ac-approval-coin img { width: 32px; height: 32px; object-fit: contain; visibility: hidden; }
#ac-trip-coin img { width: 30px; height: 30px; object-fit: contain; }

#gameElements.is-rejected #approvalBar {
    background: linear-gradient(180deg, var(--ac-danger-bar-top), var(--ac-danger-bar-bottom));
    border-color: var(--ac-danger-bar-edge);
    animation: acXpPulse .8s ease-in-out infinite;
}
#gameElements.is-rejected #approvalBarFill {
    background: linear-gradient(180deg, var(--ac-danger-fill-top), var(--ac-danger-fill-bottom));
}

#tripReasonDisplay {
    position: absolute;
    left: -24px;
    top: 90px;
    z-index: 8;
    height: 44px;
    min-width: 440px;
    box-sizing: border-box;
    padding: 0 58px 0 34px;
    display: flex;
    align-items: center;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, var(--ac-hud-top), var(--ac-hud-bottom));
    border: 2px solid var(--ac-hud-edge);
    border-left: none;
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, .18);
}
#tripReasonText {
    font-family: AcTitle, sans-serif;
    font-size: 19px;
    letter-spacing: 1px;
    color: var(--ac-cyan);
    text-transform: uppercase;
    white-space: nowrap;
}

#itemsContainer {
    position: absolute;
    left: 44px;
    top: 196px;
    z-index: 8;
    box-sizing: border-box;
    /* 44px top: the ITEMS pill hangs ~16px into the panel, so 26px left no real gap */
    padding: 44px 20px 26px;
    border-radius: 22px;
    background: linear-gradient(180deg, var(--ac-violet-top), var(--ac-violet-bottom));
    border: 2px solid var(--ac-violet-edge);
    border-top-color: var(--ac-violet-edge-top);
    box-shadow: 0 8px 0 rgba(6, 4, 26, .55), 0 14px 20px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
/* header strip so the three slots read as one "declared items" panel */
#itemsContainer::before {
    content: "ITEMS";
    position: absolute;
    left: 50%;
    top: -16px;
    transform: translateX(-50%);
    padding: 5px 24px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ac-cyan), var(--ac-cyan-deep));
    border: 3px solid #fff;
    font-family: AcTitle, sans-serif;
    font-size: 16px;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 2px 0 rgba(20, 90, 120, .65);
    white-space: nowrap;
}
.itemCircle {
    position: relative;
    width: 104px;
    height: 104px;
    background: url('/media/games/alien-custom/images/props/oneItemCircle.png') no-repeat center;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .4;
    filter: grayscale(1);
    transition: opacity .25s ease, filter .25s ease;
}
.itemCircle .itemImage {
    width: 58px;
    height: 58px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.itemCircle .itemQuantity { display: none; }
.itemCircle .itemPassed {
    position: absolute;
    right: -6px;
    top: -6px;
    width: 36px;
    height: 36px;
    display: none;
}
.itemCircle.revealed, .itemCircle.current { opacity: 1; filter: none; }
.itemCircle.passed { opacity: 1; filter: none; }
.itemCircle.passed .itemPassed { display: block; }

#alien {
    position: absolute;
    left: 50%;
    top: 96px;
    transform: translateX(-50%);
    height: 430px;
    object-fit: contain;
    z-index: 4;
}
#alienRay { display: none !important; }

#table {
    position: absolute;
    left: 50%;
    top: 398px;
    transform: translateX(-50%);
    width: 340px;
    z-index: 5;
}

#itemLight {
    position: absolute;
    left: 50%;
    top: 330px;
    transform: translateX(-50%);
    width: 340px;
    height: 220px;
    z-index: 4;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(110, 231, 161, .35) 0%, rgba(110, 231, 161, 0) 70%);
    opacity: 0;
    transition: opacity .3s ease;
}
#gameElements.is-approved #itemLight { opacity: 1; }

#currentItemOnTable {
    position: absolute;
    left: 50%;
    top: 312px;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
#currentItemOnTable .ac-item-art {
    width: 150px;
    height: 150px;
    object-fit: contain;
    animation: acFloat 1.7s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 22px rgba(139, 233, 253, .75));
}
#gameElements.is-approved #currentItemOnTable .ac-item-art { filter: drop-shadow(0 0 24px rgba(110, 231, 161, .85)); }
#gameElements.is-rejected #currentItemOnTable .ac-item-art { filter: drop-shadow(0 0 14px rgba(255, 60, 85, .95)); }

#alienTalk {
    position: absolute;
    right: 44px;
    top: 150px;
    width: 460px;
    z-index: 9;
}
#alienTalk > img { display: none !important; }
#alienTalk::before {
    content: attr(data-item);
    position: absolute;
    right: 0;
    top: -30px;
    width: 132px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 10px 10px 0 0;
    background: rgba(3, 16, 9, .82);
    border: 2px solid var(--ac-green);
    border-bottom: none;
    font-family: AcTitle, sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--ac-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
}
#alienTalkText {
    position: relative;
    box-sizing: border-box;
    min-height: 120px;
    padding: 16px 26px;
    border-radius: 8px;
    background: rgba(3, 16, 9, .82);
    border: 2px solid var(--ac-green);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: AcTitle, sans-serif;
    font-size: 24px;
    line-height: 1.25;
    color: var(--ac-green-text);
}
#alienTalkText::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 50%;
    margin-top: -12px;
    width: 15px;
    height: 24px;
    background: var(--ac-green);
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
#gameElements.is-rejected #alienTalkText {
    background: rgba(24, 4, 8, .86);
    border-color: var(--ac-danger);
    color: var(--ac-danger-soft);
}
#gameElements.is-rejected #alienTalkText::before { background: var(--ac-danger); }
#gameElements.is-rejected #alienTalk::before { border-color: var(--ac-danger); }

#ac-warning-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: none;
    z-index: 2;
    animation: acXpPulse .8s ease-in-out infinite;
}
#gameElements.is-rejected #alienTalkText { padding-left: 62px; }
#gameElements.is-rejected #ac-warning-icon { display: block; }

#alienLoadingAnimation {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 8px;
    background: rgba(3, 16, 9, .82);
}
#gameElements.is-recorded #alienLoadingAnimation { display: flex; }
#alienLoadingAnimation video { display: none; }
#alienLoadingAnimation::before {
    content: "TRANSMITTING";
    font-family: AcAlien, sans-serif;
    font-size: 15px;
    letter-spacing: 3px;
    color: var(--ac-cyan);
}
#alienLoadingAnimation::after {
    content: "\2022\2022\2022";
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--ac-cyan);
    opacity: .7;
}

#hintBox, #timeoutTimer, #gameStatus, #spacebarButton { display: none !important; }

#speechArea {
    position: absolute;
    left: 360px;
    right: 360px;
    /* 180px, not the mock's 132px: everything shifted above the platform speech bar */
    bottom: 180px;
    z-index: 9;
    min-height: 52px;
    box-sizing: border-box;
    padding: 10px 20px;
    border-radius: 14px;
    background: rgba(6, 10, 30, .94);
    border: 2px solid rgba(139, 233, 253, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.35;
    color: #fff;
}
#gameElements.is-recorded #speechArea {
    background: rgba(4, 10, 28, .97);
    border-color: rgba(139, 233, 253, .8);
}
#gameElements.is-rejected #speechArea {
    background: rgba(30, 4, 10, .94);
    border-color: rgba(255, 80, 100, .65);
}
#ac-speech-bubble { display: none; }

#ac-voice-controls {
    position: absolute;
    left: 50%;
    bottom: 84px;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
#ac-mic-col, #ac-mic-row { display: flex; align-items: center; gap: 20px; }

/* idle: one wide "press to talk" plate. recording: two icon-only round buttons (submit + redo). */
#ac-mic-btn {
    width: 300px;
    height: 84px;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: url('/media/games/alien-custom/images/props/pressToTalk-mobile.png') no-repeat center/contain;
    cursor: pointer;
    animation: acHold 1.4s ease-in-out infinite alternate;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease;
}
#ac-mic-btn img { display: none; }

#ac-mic-btn.recording {
    width: 84px;
    height: 84px;
    background: linear-gradient(180deg, var(--ac-play-top), var(--ac-play-bottom));
    border: 4px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    box-shadow: 0 7px 0 var(--ac-play-shadow), 0 13px 18px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .5);
    animation: acHold 1.1s ease-in-out infinite alternate;
}
#ac-mic-btn.recording img {
    display: block;
    width: 46%;
    height: 46%;
    object-fit: contain;
    pointer-events: none;
}

#ac-clear-btn {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    padding: 0;
    background: linear-gradient(180deg, var(--ac-hud-top), var(--ac-hud-bottom));
    border: 4px solid rgba(139, 233, 253, .6);
    box-shadow: 0 7px 0 var(--ac-hud-edge), 0 13px 18px rgba(0, 0, 0, .35);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* reset-icon.png ships as a black glyph — recolour it white against the dark button */
#ac-clear-btn img { width: 46%; height: 46%; object-fit: contain; pointer-events: none; filter: brightness(0) invert(1); }

/* send stays inert until something has actually been transcribed */
#ac-mic-btn.recording.awaiting-answer {
    background: linear-gradient(180deg, #8892AE, #4E5876);
    border-color: rgba(255, 255, 255, .45);
    box-shadow: 0 7px 0 #2C3247, 0 13px 18px rgba(0, 0, 0, .35);
    cursor: default;
    animation: none;
}
#ac-mic-btn.recording.awaiting-answer img { opacity: .55; }

#ac-mic-btn.disabled, #ac-clear-btn.disabled {
    opacity: .45;
    cursor: default;
    filter: grayscale(1);
    animation: none;
}

/* creatures belong to the verdict modal only (.ac-mc); the gameplay rejection cue is the
   red edge glow on #gameElements.is-rejected */

#ac-sparkles { position: absolute; inset: 0; z-index: 11; pointer-events: none; display: none; }
#gameElements.is-approved #ac-sparkles { display: block; }
#ac-sparkles i {
    position: absolute;
    width: 26px;
    height: 26px;
    background: var(--ac-sparkle);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    animation: acSparkle 2.2s ease-in-out infinite;
}
#ac-sparkles i:nth-child(1) { left: 43%; top: 38%; }
#ac-sparkles i:nth-child(2) { left: 56%; top: 46%; animation-delay: .3s; }
#ac-sparkles i:nth-child(3) { left: 49%; top: 56%; animation-delay: .55s; }

/* ---------- 07 / 08 verdict modals ---------- */

#gameOverModal, #levelCompleteModal { position: absolute; inset: 0; z-index: 20; }
#gameOverOverlay, #levelCompleteOverlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 24, .6);
    backdrop-filter: blur(6px);
}

#gameOverContainer, #levelCompleteContainer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    /* 62px top: the ACCESS DENIED / ENTRY GRANTED pill hangs ~36px into the container */
    padding: 62px 34px 28px;
    border-radius: 26px;
    background: linear-gradient(180deg, var(--ac-gold-top), var(--ac-gold-bottom));
    border: 5px solid var(--ac-gold-edge);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
#levelCompleteContainer { width: 600px; }
#gameOverContainer { width: 760px; }

#gameOverContainer::before, #levelCompleteContainer::before {
    position: absolute;
    left: 50%;
    top: -22px;
    transform: translateX(-50%);
    padding: 8px 34px;
    border-radius: 999px;
    border: 4px solid #fff;
    font-family: AcTitle, sans-serif;
    font-size: 28px;
    letter-spacing: 2px;
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 5px 0 rgba(4, 40, 20, .45), 0 10px 18px rgba(0, 0, 0, .35);
}
#levelCompleteContainer::before {
    content: "ENTRY GRANTED";
    background: linear-gradient(90deg, #5FF0A0, #22B06A);
}
#gameOverContainer::before {
    content: "ACCESS DENIED";
    background: linear-gradient(90deg, #FF9A4D, #E8641A);
}

.ac-level-strip {
    align-self: center;
    position: relative;
    height: 58px;
    box-sizing: border-box;
    padding: 0 26px 0 46px;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--ac-gold-strip-top), var(--ac-gold-strip-mid) 55%, var(--ac-gold-strip-bottom));
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    font-family: AcTitle, sans-serif;
    font-size: 26px;
    color: var(--ac-gold-text);
    white-space: nowrap;
}
.ac-level-strip .ac-strip-icon {
    position: absolute;
    left: -18px;
    top: -14px;
    width: 52px;
    height: 52px;
    object-fit: contain;
}

#gameOverMessage, #levelCompleteMessage {
    font-family: AcTitle, sans-serif;
    text-align: center;
    line-height: 1.2;
}
#levelCompleteMessage { font-size: 32px; color: var(--ac-win-text); }
#gameOverMessage { font-size: 36px; color: var(--ac-lose-text); }

.ac-verdict-items { display: flex; align-items: center; justify-content: center; gap: 16px; }
/* drawn in CSS, not oneItemCircle.png: that art is 225x239, so `contain` rendered an ellipse */
.ac-verdict-items .ac-vi {
    position: relative;
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    box-sizing: border-box;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, #6A76B4, #4A5490 58%, #333B70);
    border: 3px solid rgba(180, 245, 255, .6);
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, .28), 0 3px 0 rgba(120, 80, 0, .25);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ac-verdict-items .ac-vi img { width: 54px; height: 54px; object-fit: contain; }
.ac-verdict-items .ac-vi.dim { filter: brightness(.85) grayscale(.3); }
.ac-verdict-items .ac-vi.ok::after {
    content: "";
    position: absolute;
    right: -4px;
    top: -4px;
    width: 34px;
    height: 34px;
    background: url('/media/games/alien-custom/images/props/itemPassed.png') no-repeat center/contain;
}

.ac-level-strip .ac-strip-badge {
    position: absolute;
    left: 16px;
    top: -16px;
    width: 26px;
    height: 26px;
}
.ac-level-strip.ok .ac-strip-badge {
    background: url('/media/games/alien-custom/images/props/itemPassed.png') no-repeat center/contain;
}
.ac-level-strip.fail .ac-strip-badge {
    border-radius: 50%;
    background: var(--ac-danger-red, #FF5064);
    border: 2px solid #fff;
    box-sizing: border-box;
}
.ac-level-strip.fail .ac-strip-badge::after {
    content: "\00d7";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: AcTitle, sans-serif;
    font-size: 17px;
    line-height: 1;
}

#acSummary .ac-unlock-pill {
    margin-top: -32px;
    padding: 6px 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, #5FF0A0, #22B06A);
    border: 2px solid #fff;
    font-size: 14px;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
#acSummary .ac-unlock-art { width: 104px; height: 104px; object-fit: contain; }
#acSummary .ac-unlock-name {
    position: relative;
    align-self: stretch;
    padding: 7px 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ac-cyan), var(--ac-cyan-deep));
    border: 2px solid #fff;
    font-size: 15px;
    letter-spacing: 1px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(20, 90, 120, .65);
}
#acSummary .ac-unlock-name img {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-46%);
    width: 34px;
    height: 34px;
    object-fit: contain;
}

#gameOverJupiter, #levelCompleteJupiter { display: none !important; }

.ac-modal-creatures { position: absolute; inset: 0; pointer-events: none; }
.ac-modal-creatures .ac-mc-officer {
    position: absolute;
    left: 50%;
    top: 42px;
    transform: translateX(-50%);
    height: 250px;
    object-fit: contain;
}
/* z-index 3: the monsters crowd IN FRONT of the verdict card (the officer stays behind it) */
.ac-mc { position: absolute; z-index: 3; background-repeat: no-repeat; }
.ac-mc-red {
    left: 96px; bottom: 46px; width: 210px; height: 210px;
    scale: -1 1;
    background-image: url('/media/games/alien-custom/images/props/__monster_1_adult_red_idle.png');
    background-size: 800% 300%;
    animation: acMonsterFrames .95s steps(1, end) infinite;
}
.ac-mc-green {
    right: 110px; bottom: 40px; width: 190px; height: 190px;
    background-image: url('/media/games/alien-custom/images/props/__monster_2_adult_green_idle.png');
    background-size: 500% 500%;
    animation: acMonsterFrames2 1.1s steps(1, end) infinite;
}
.ac-mc-fly {
    left: 210px; top: 96px; width: 150px; height: 150px;
    scale: -1 1;
    background-image: url('/media/games/alien-custom/images/props/__flying_monster_2_black_flying_snapping.png');
    background-size: 400% 300%;
    animation: acFlyFrames .6s steps(1, end) infinite, acFlyBob 1.8s ease-in-out infinite;
}
.ac-mc-yellow {
    right: 330px; bottom: 28px; width: 130px; height: 130px;
    background-image: url('/media/games/alien-custom/images/props/__yellow_virus_monster_05_idle_003.png');
    background-size: contain;
    animation: acSway 2.6s ease-in-out infinite alternate;
}
.ac-mc-pink {
    right: 150px; bottom: 40px; width: 170px; height: 170px;
    background-image: url('/media/games/alien-custom/images/props/__alien_creature_2_pink_idle_000.png');
    background-size: contain;
    animation: acSway 2.4s ease-in-out infinite alternate;
}

#acSummary {
    width: 240px;
    box-sizing: border-box;
    padding: 20px 14px 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, var(--ac-gold-bevel-top), var(--ac-gold-bevel-bottom));
    border: 3px solid #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: AcTitle, sans-serif;
    color: var(--ac-gold-text);
    font-size: 15px;
    text-align: center;
}
#acSummary:empty { display: none; }

#gameOverButtons, #levelCompleteButtons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
#gameOverButtons button, #levelCompleteButtons button {
    width: 250px;
    height: 62px;
    padding: 0;
    border-radius: 16px;
    border: 3px solid;
    cursor: pointer;
    font-family: AcTitle, sans-serif;
    font-size: 26px;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
    display: flex;
    align-items: center;
    justify-content: center;
}
#playAgainBtn, #playAgainBtn2 {
    background: linear-gradient(180deg, var(--ac-btn-play-top), var(--ac-btn-play-bottom));
    border-color: var(--ac-btn-play-edge);
    box-shadow: 0 6px 0 var(--ac-btn-play-edge), 0 11px 16px rgba(0, 0, 0, .35);
}
#switchGameBtn, #switchGameBtn2 {
    background: linear-gradient(180deg, var(--ac-btn-switch-top), var(--ac-btn-switch-bottom));
    border-color: var(--ac-btn-switch-edge);
    box-shadow: 0 6px 0 var(--ac-btn-switch-edge), 0 11px 16px rgba(0, 0, 0, .35);
}
#gameOverButtons button img, #levelCompleteButtons button img { display: none; }
#playAgainBtn::after, #playAgainBtn2::after { content: "PLAY AGAIN"; }
#switchGameBtn::after, #switchGameBtn2::after { content: "SWITCH GAME"; }

#startGame, #gameOverButtons button, #levelCompleteButtons button,
.trip-scroll-btn, #ac-clear-btn, #hq-skip-btn { transition: transform .12s ease; }
#startGame:hover,
#gameOverButtons button:hover:not(:disabled),
#levelCompleteButtons button:hover:not(:disabled),
.trip-scroll-btn.is-active:hover,
#ac-clear-btn:hover:not(:disabled),
#hq-skip-btn:hover { transform: scale(1.05); }
#startGame:hover { transform: translateX(-50%) scale(1.05); }

/* ---------- keyframes ---------- */

@keyframes acLogo { from { transform: rotate(-4deg) scale(.97); } to { transform: rotate(-4deg) scale(1); } }
@keyframes acFloat { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
@keyframes acFly1 { from { transform: translateX(-160px); } to { transform: translateX(1440px); } }
@keyframes acFly2 { from { transform: translateX(-300px); } to { transform: translateX(1440px); } }
@keyframes acHold { from { transform: scale(1); } to { transform: scale(1.03); } }
@keyframes acEdgeGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes acXpPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 60, 85, .9)); }
}
@keyframes acSparkle {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    20% { transform: scale(1) rotate(90deg); opacity: 1; }
    45% { transform: scale(0) rotate(180deg); opacity: 0; }
    100% { transform: scale(0) rotate(180deg); opacity: 0; }
}
@keyframes acRaySpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes acMonsterFrames {
    0%    { background-position: 0% 0%; }
    12.5% { background-position: 14.2857% 0%; }
    25%   { background-position: 28.5714% 0%; }
    37.5% { background-position: 42.8571% 0%; }
    50%   { background-position: 57.1428% 0%; }
    62.5% { background-position: 71.4285% 0%; }
    75%   { background-position: 85.7142% 0%; }
    87.5% { background-position: 100% 0%; }
}
@keyframes acMonsterFrames2 {
    0%  { background-position: 0% 0%; }
    20% { background-position: 25% 0%; }
    40% { background-position: 50% 0%; }
    60% { background-position: 75% 0%; }
    80% { background-position: 100% 0%; }
}
@keyframes acFlyFrames {
    0%  { background-position: 0% 0%; }
    25% { background-position: 33.3333% 0%; }
    50% { background-position: 66.6666% 0%; }
    75% { background-position: 100% 0%; }
}
@keyframes acFlyBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes acSway { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-6px) rotate(2deg); } }
@keyframes acItemOut {
    0% { transform: scale(1); }
    55% { transform: scale(1.18) translateY(-14px); }
    100% { transform: scale(0) translateY(-30px); opacity: 0; }
}
@keyframes acItemIn {
    0%, 48% { transform: scale(0) translateY(40px); opacity: 0; }
    72% { transform: scale(1.16); opacity: 1; }
    86% { transform: scale(.94); }
    100% { transform: scale(1); }
}
@keyframes acFillDrain { 0%, 48% { width: 100%; } 70%, 100% { width: 0%; } }
@keyframes acSwapOut { 0%, 48% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes acSwapIn { 0%, 52% { opacity: 0; } 68%, 100% { opacity: 1; } }