/* ==========================================================
   Virtual DJ Booth
   Phase 1 - Booth Chassis
   ========================================================== */


*,
*::before,
*::after {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #111;
    font-family: Arial, Helvetica, sans-serif;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* ---------- App ---------- */

#app {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


#portrait-warning {
    display: none;

    position: fixed;
    inset: 0;

    background: #000;

    justify-content: center;
    align-items: center;

    z-index: 999999;
}

#portrait-warning img {
    max-width: 90%;
    height: auto;
}

@media (orientation: portrait) {

    .mobile-device #portrait-warning {
        display: flex;
    }

    .mobile-device #loading-overlay {
        display: none !important;
    }

    .mobile-device #app {
        display: none;
    }

}

@media (orientation: landscape) {

    .mobile-device #portrait-warning {
        display: none;
    }

    .mobile-device #app {
        display: flex;
    }

}

/*
#portrait-message{
    display:none;

    position:fixed;
    inset:0;

    background:#000;

    justify-content:center;
    align-items:center;

    z-index:99999;
}

#portrait-message img{
    max-width:80%;
    height:auto;
}
*/

/* Phone in portrait 
@media (max-width: 768px) and (orientation: portrait){

    #portrait-message{
        display:flex;
    }

    #app{
        display:none;
    }
}


/* ==========================================================
   LOADING OVERLAY
========================================================== */

#loading-overlay{

    position:fixed;

    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(60,60,60,.5);

    z-index:999998;

    transition:opacity .3s ease;

}

#loading-overlay.hidden{

    display: none;

}

.loading-text{

    color:#fff;

    font-size:24px;

    font-weight:700;

    letter-spacing:2px;

    font-family:Arial,sans-serif;

}
/* ---------- Booth ---------- */

#booth{

    
    width:min(92vw,1402px);
    aspect-ratio:16/7;


    display:grid;
   grid-template-columns:38% auto 38%;   /*39 18 39 */
 /*grid-template-columns: 1fr auto 1fr; */
    padding:2.5%;

    border-radius:28px;

background: linear-gradient(
    180deg,
    #b8b8b8 0%,
    #9d9d9d 12%,
    #888888 45%,
    #747474 100%
);


   box-shadow:
    0 45px 80px rgba(0,0,0,.45),
    inset 0 2px 0 rgba(255,255,255,.65),
    inset 0 -2px 0 rgba(0,0,0,.30);
}

/* ---------- Sections ---------- */

#left-deck{

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;
     
    border-radius:18px;

    background:

        /* Fine brushed metal texture */
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.025) 0px,
            rgba(255,255,255,.025) 1px,
            rgba(0,0,0,.015) 2px,
            rgba(0,0,0,.025) 3px
        ),

        /* Circular recess around platter */
        radial-gradient(
            circle at center,
            transparent 0%,
            transparent 31%,
            rgba(255,255,255,.12) 32.5%,
            rgba(0,0,0,.22) 35%,
            transparent 38%
        ),

        /* Metallic deck */
          linear-gradient(
        180deg,
        #c7c7c7 0%,
        #b3b3b3 18%,
        #9d9d9d 55%,
        #858585 100%
);

box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 2px rgba(0,0,0,.20),
    0 10px 18px rgba(0,0,0,.25);
}


#right-deck{

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;

    border-radius:18px;

    background:

        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.025) 0px,
            rgba(255,255,255,.025) 1px,
            rgba(0,0,0,.015) 2px,
            rgba(0,0,0,.015) 3px
        ),

        radial-gradient(
            circle at center,
            transparent 0%,
            transparent 31%,
            rgba(255,255,255,.12) 32.5%,
            rgba(0,0,0,.22) 35%,
            transparent 38%
        ),

        linear-gradient(
            180deg,
            #c7c7c7 0%,
            #b3b3b3 18%,
            #9d9d9d 55%,
            #858585 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -2px 2px rgba(0,0,0,.20),
        0 10px 18px rgba(0,0,0,.25);
}

#right-deck::before{

    content:"";

    position:absolute;

    width:78%;
    aspect-ratio:1;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.04) 0%,
            rgba(255,255,255,0) 75%
        ),
        linear-gradient(
            180deg,
            #c4c4c4 0%,
            #c2c2c2 45%,
            #bdbdbd 100%
        );

    box-shadow:none;

    z-index:0;
}

#mixer{
    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;
}
/* ==========================================================
   Phase 2 - Left Turntable Geometry
   ========================================================== */

#left-deck { 

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    border-radius: 18px;

    background:

    /* Circular bevel around platter */
    radial-gradient(
        circle at center,
        transparent 0%,
        transparent 31%,
        rgba(255,255,255,.06) 33%,
        rgba(0,0,0,.20) 35%,
        transparent 38%
    ),

   
}

#left-deck::before {

    content: "";

    position: absolute;

    width: 78%;
    aspect-ratio: 1;

    border-radius: 50%;
        
    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.04) 0%,
        rgba(255,255,255,0) 75%
    ),
    linear-gradient(
        180deg,
        #c4c4c4 0%,
        #c2c2c2 45%,
        #bdbdbd 100%
    );

box-shadow: none;

  

    z-index: 0;
}
.turntable {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
     
  
}

.platter {
    width: 92.5%;
    aspect-ratio: 1; 
    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    background:
        radial-gradient(circle at 35% 30%,
            rgba(255,255,255,.22),
            rgba(255,255,255,0) 28%),

        radial-gradient(circle at center,
            #9a9a9a 100%,
            #868686 55%,
            #6d6d6d 74%,
            #505050 88%,
            #2e2e2e 80%);
    
    touch-action: none;
    user-select: none;
   
       

    position: relative;
    overflow: hidden;
    z-index:1;
   
}

.platter::after {

    content: "";

    position: absolute;
    inset: 0;

    border-radius: 50%;

    background:
        /* brushed aluminium texture */
        repeating-radial-gradient(
            circle,
            rgba(255,255,255,.03) 0px,
            rgba(255,255,255,.03) 1px,
            transparent 2px,
            transparent 4px
        ),
    
        /* outer rim highlight */
        radial-gradient(
            circle,
            transparent 88%,
            rgba(255,255,255,.28) 91%,
            rgba(0,0,0,.55) 97%,
            rgba(0,0,0,.85) 100%
        );
    
        opacity: .35;

    pointer-events: none;
}




.platter-rim {
 
    position: absolute;

    inset: 0;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            transparent 89%,
            rgba(255,255,255,.35) 91%,
            rgba(255,255,255,.10) 92%,
            rgba(0,0,0,.35) 95%,
            rgba(0,0,0,.75) 100%
        );
}

.platter-rotor{
   
    position:absolute;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    transform-origin:center center;
    will-change:transform;
    
    cursor:grab;
    user-select:none;

    
}

.platter-rotor:active{
    cursor:grabbing;
}


/* ==========================================================
   Strobe Canvas
========================================================== */

.strobe-canvas{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:1;
}



.rubber-mat {

    position: relative;
    z-index: 2;

    width: 92%;
    aspect-ratio: 1;
    border-radius: 50%;

    background: #2a2a2a;

    display: flex;
    justify-content: center;
    align-items: center;
}

.vinyl{

    width:98%;
    aspect-ratio:1;

    border-radius:50%;

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle,
            #1d1d1d 0%,
            #101010 55%,
            #070707 82%,
            #000000 100%
        );

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.05),
        inset 0 -6px 10px rgba(0,0,0,.65);
}

.vinyl::before{

    content:"";

    position:absolute;
    inset:0;

    border-radius:50%;

    background:
        repeating-radial-gradient(
            circle,
            rgba(255,255,255,.020) 0px,
            rgba(255,255,255,.020) 1px,
            transparent 2px,
            transparent 4px
        );

    opacity:.8;

    pointer-events:none;
}
 
.vinyl::after{

    content:"";

    position:absolute;

    width:95%;
    aspect-ratio:1;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.03);

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.4);

    pointer-events:none;
}

.vinyl-highlight{

    position:absolute;

    left:50%;
    top:50%;

    width:90.16%;
    aspect-ratio:1;

    transform:translate(-50%,-50%);

    border-radius:50%;

    pointer-events:none;

    z-index:100;

    background:

        radial-gradient(circle at 30% 25%,
            rgba(255,255,255,.18) 0%,
            rgba(255,255,255,0) 18%),

        radial-gradient(circle at 70% 75%,
            rgba(255,255,255,.05) 0%,
            rgba(255,255,255,0) 35%);
}

.record-label{
  outline:2px solid red;
    width:33%;
    aspect-ratio:1;

    border-radius:50%;

    overflow:hidden;

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,.15),
        inset 0 -2px 4px rgba(0,0,0,.35);
}

.record-label img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    user-select:none;
    pointer-events:none;
}

.spindle{

    position:absolute;
    left:48.97%;
    top:49%;
    
    width:2.2%;
    height:2.2%;

    border-radius:50%;

    background:
        radial-gradient(circle at 35% 35%,
            #ffffff,
            #d8d8d8 45%,
            #9a9a9a 100%);

 
}
/* ==========================================================
   Tonearm Overlay
   ----------------------------------------------------------
   The complete tonearm assembly (gimbal, counterweight,
   arm tube, headshell and cartridge) is provided as a
   transparent PNG (assets/tonearm.png).

   Keeping this as an image gives a much more realistic
   result than building all mechanical parts in CSS.

   The only values that should normally ever need tweaking
   are:

       width
       top
       right
       transform-origin

   Everything else should remain untouched.
   ========================================================== */
/* ==========================================================
   Tonearm
   ========================================================== */

/* Size of the tonearm image */
:root{
    --tonearm-size: 82%; /*400px originally*/
}


/* ==========================================================
   Tonearm Pivot
   ----------------------------------------------------------
   Position of the real tonearm pivot on the deck.
   Only left and top normally need adjusting.
   ========================================================== */

.tonearm-pivot{

    position:absolute;

    inset:0;

    z-index:100;

    pointer-events:none;
}
 
 
 /* red dot on pivot
.tonearm-pivot::after{
    content:"";
    position:absolute;

    left:91.6%;
    top:13.9%;

    width:10px;
    height:10px;

    background:red;
    border-radius:50%;
    transform:translate(-50%,-50%);
    z-index:9999;
}

*/

/* ==========================================================
   Tonearm Overlay
   ----------------------------------------------------------
   tonearm.png

   Image size : 1500 × 1500

   Pivot inside image:
       X = 1350 px (90%)
       Y = 300 px (20%)
   ========================================================== */

.tonearm-overlay{

    position:absolute;

    width:92.5%;  /*82*/
    height:auto;

    left: 11%; /*28,66*/
    top:-3.2%;      /*2 */

    transform-origin: 87.097% 19.355%;

    pointer-events:none;

    user-select:none;
    -webkit-user-drag:none;
}




.rubber-mat{
    position:relative;
    z-index:10 !important;
}

.vinyl{
    position:relative;
    z-index:11 !important;
}

.record-label{
    position:relative;
    z-index:12 
}

.spindle{
    position:absolute;
    z-index:13 !important;
}


/* ==========================================================
   START / STOP BUTTON
   ========================================================== */

.start-stop{

    position:absolute;

    left:5%;
    bottom:4%;

    width:13%;
    aspect-ratio:1;

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:200;
}

/* Metal surround */

.start-stop::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:10px;

    background:
        linear-gradient(
            180deg,
            #bdbdbd,
            #7f7f7f 40%,
            #505050 100%
        );

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.45),
        inset 0 -2px 3px rgba(0,0,0,.55),
        0 2px 6px rgba(0,0,0,.45);
}

/* Button */

.start-stop-button{

    position:relative;

    width:88%;
    height:88%;

    border:none;

    border-radius:8px;

    cursor:pointer;

    background:
        linear-gradient(
            180deg,
            #3d3d3d,
            #1a1a1a
        );

    color:#f2f2f2;

    font-family:"IBM Plex Sans Condensed", sans-serif;
    font-size:.72rem;
    font-weight:600;

    letter-spacing:.08em;

    display:flex;
    flex-direction:row;
    gap: 10%;
    justify-content:center;
    align-items:center;

    user-select:none;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.08),
        inset 0 -2px 3px rgba(0,0,0,.8),
        0 1px 2px rgba(0,0,0,.5);

    transition:
        transform .06s ease,
        box-shadow .06s ease,
        filter .15s ease;
}

.start-stop-button:hover{

    filter:brightness(1.03);

}

.start-stop-button:active{

    transform:translateY(2px);

    box-shadow:
        inset 0 3px 5px rgba(0,0,0,.85),
        inset 0 1px 1px rgba(255,255,255,.05);

}




.play-icon{

    width:26%;
    aspect-ratio:1;

    background:#f2f2f2;

    clip-path:polygon(
        15% 10%,
        15% 90%,
        85% 50%
    );

    flex-shrink:0;

}

.stop-icon{

    width:20%;
    aspect-ratio:1;

    background:#f2f2f2;

    aspect-ratio:1;

    flex-shrink:0;

}
/* ==========================================
   START LED
========================================== */

.start-led{

    position:absolute;

    top:-14px;
    left:50%;

    transform:translateX(-50%);

    width:8px;
    height:8px;

    border-radius:50%;

    background:#350000;

    border:1px solid #111;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.15);

    transition:
        background .25s,
        box-shadow .25s;
}

/* LED ON */

.start-led.on{

    background:#ff5a5a;

    box-shadow:
        0 0 6px rgba(255,80,80,.95),
        0 0 14px rgba(255,60,60,.80),
        0 0 22px rgba(255,40,40,.45),
        inset 0 0 3px rgba(255,255,255,.95);
}


#mixer {
    position: relative;
}



.manual-button {
    position: fixed;

    bottom: 12px;
    right: 12px;

    height: 22px;
    min-width: 65px;

    padding: 0 8px;

    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,.3);
    border-radius: 4px;

    background: linear-gradient(to bottom, #666, #333);

    color: #fff;
    text-decoration: none;

    font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .6px;

    cursor: pointer;

    z-index: 10000;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.2),
        0 2px 4px rgba(0,0,0,.4);
}

.manual-button:hover {
    background: linear-gradient(to bottom, #777, #444);
}