/* SINGLE PAGE LIVE AUCTION SCREEN
   Only index.php loads this file. It does not change admin pages. */

body[data-page="live-spa"]{
    overflow:auto;
}

.live-view{
    display:none;
    min-height:100dvh;
    width:100%;
}

.live-view.active{
    display:block;
}

body[data-page="live-spa"] .live-view .screen,
body[data-page="live-spa"] .live-view .sold-stage,
body[data-page="live-spa"] .live-view .complete-screen{
    min-height:100dvh;
    height:100dvh;
}

/* keep sold menu visible in SPA */
body[data-page="live-spa"] .hamb{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* sold page premium CSS was originally scoped to body[data-page=sold], so duplicate only the safe SPA selectors here */
body[data-page="live-spa"] .sold-new-stage{
    min-height:100dvh;
    height:100dvh;
    overflow:hidden;
    padding:8px 12px 12px;
    position:relative;
    display:flex;
    flex-direction:column;
    background:
        radial-gradient(circle at 50% 15%, rgba(255,216,90,.16), transparent 24%),
        radial-gradient(circle at 15% 21%, rgba(255,47,125,.16), transparent 25%),
        radial-gradient(circle at 88% 24%, rgba(57,213,255,.15), transparent 27%),
        radial-gradient(circle at 50% 83%, rgba(165,87,255,.16), transparent 35%),
        linear-gradient(180deg,#02030a,#070916 54%,#02030a);
}

body[data-page="live-spa"] .sold-new-stage::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
        radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:28px 28px, 42px 42px, 42px 42px;
    opacity:.24;
    mask-image:linear-gradient(#000,transparent 84%);
}

/* make generated sold confetti cleaner inside the single page view */
body[data-page="live-spa"] #viewSold .sparkle-rain,
body[data-page="live-spa"] #viewSold .screen-burst,
body[data-page="live-spa"] #viewSold .celebration-ribbons{
    z-index:36;
}

body[data-page="live-spa"] #viewSold .sparkle-rain i{
    width:calc(var(--size) * .45) !important;
    height:calc(var(--size) * .45) !important;
    box-shadow:0 0 9px currentColor,0 0 16px currentColor !important;
}

body[data-page="live-spa"] #viewSold .screen-burst i{
    width:4px !important;
    height:4px !important;
    box-shadow:0 0 10px currentColor !important;
}

body[data-page="live-spa"] #viewSold .celebration-ribbons i{
    width:5px !important;
    height:22px !important;
    opacity:.58;
}

/* live bidding names should show fully */
body[data-page="live-spa"] .next-bid-team strong,
body[data-page="live-spa"] .bid-word{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:unset !important;
    line-height:1.08;
	text-transform:uppercase;
	
}

.next-bid-team strong { 
	max-width:auto;
	font-size: 22px;
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #ffd85a, #ffffff, #39d5ff, #ff37b7, #ffd85a);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 23px rgba(255, 216, 90, .22);
    animation: shineText 2.5s linear infinite;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

 }

/* Complete screen photo fix for current HTML */
.complete-player-orbit{
    width:280px;
    height:280px;
    margin:12px auto 18px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.complete-player-photo{
    width:225px;
    height:225px;
    border-radius:50%;
    position:relative;
    z-index:5;
    padding:6px;
    background:linear-gradient(135deg,#fff2a8,#ffb700,#ff4fd8,#4dfcff);
    box-shadow:
        0 0 25px rgba(255,196,0,.6),
        0 0 55px rgba(255,79,216,.35),
        0 0 85px rgba(77,252,255,.25);
}

.complete-player-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    border-radius:50%;
    display:block;
    border:4px solid rgba(10,10,25,.95);
}

.complete-player-orbit .orbit-ring{
    position:absolute;
    left:50%;
    top:50%;
    border-radius:50%;
    pointer-events:none;
    transform:translate(-50%,-50%);
}

.complete-player-orbit .ring-one{
    width:250px;
    height:250px;
    border:2px dashed rgba(255,215,90,.85);
    animation:completeOrbitSpin 12s linear infinite;
}

.complete-player-orbit .ring-two{
    width:280px;
    height:280px;
    border:1px solid rgba(255,79,216,.6);
    box-shadow:0 0 25px rgba(255,79,216,.35);
    animation:completeOrbitSpinReverse 9s linear infinite;
}

.complete-player-orbit .ring-three{
    width:220px;
    height:220px;
    border:1px solid rgba(77,252,255,.65);
    box-shadow:0 0 20px rgba(77,252,255,.35);
    animation:completePulseRing 2.4s ease-in-out infinite;
}

@keyframes completeOrbitSpin{
    from{transform:translate(-50%,-50%) rotate(0deg);}
    to{transform:translate(-50%,-50%) rotate(360deg);}
}

@keyframes completeOrbitSpinReverse{
    from{transform:translate(-50%,-50%) rotate(360deg);}
    to{transform:translate(-50%,-50%) rotate(0deg);}
}

@keyframes completePulseRing{
    0%,100%{transform:translate(-50%,-50%) scale(.96);opacity:.45;}
    50%{transform:translate(-50%,-50%) scale(1.06);opacity:1;}
}

@media(max-height:720px){
    .complete-player-orbit{
        width:245px;
        height:245px;
        margin:8px auto 14px;
    }

    .complete-player-photo{
        width:195px;
        height:195px;
    }

    .complete-player-orbit .ring-one{
        width:215px;
        height:215px;
    }

    .complete-player-orbit .ring-two{
        width:245px;
        height:245px;
    }

    .complete-player-orbit .ring-three{
        width:190px;
        height:190px;
    }
}

/* NEXT SECTION - PLAYER NO + PLAYING ROLE INLINE */

.next-meta-row{
    display:flex !important;
    align-items:stretch;
    justify-content:center;
    gap:10px;
    width:100%;
    margin:10px auto 12px;
    flex-wrap:nowrap !important;
}

.next-meta-chip{
    flex:1 1 0;
    min-width:0;
    max-width:160px;
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:9px 8px;
    border-radius:8px;
}

.next-meta-chip span{
    font-size:10px;
    line-height:1;
    white-space:nowrap;
}

.next-meta-chip strong{
    font-size:18px;
    line-height:1.1;
    white-space:nowrap;
	color:#FF9800;
}

/* small mobile fix */
@media(max-width:380px){

    .next-meta-row{
        gap:7px;
    }

    .next-meta-chip{
        padding:8px 6px;
    }

    .next-meta-chip span{
        font-size:13px;
    }

    .next-meta-chip strong{
        font-size:16px;
		font-weight:600
    }
}

.live-bidding-title { font-size:20px }