.jmvap-player, .jmvap-player *{box-sizing:border-box}

:root{
  --arm-angle:-2deg;
}

.jmvap-player{
  width:var(--jmvap-width,340px);
  margin:20px auto;
  text-align:center;
}

.jmvap-turntable{
  position:relative;
  width:300px;
  height:260px;
  margin:0 auto 15px;
}

/* =========================
   VINYLE
========================= */

.jmvap-vinyl{
  position:absolute;
  left:12px;
  top:8px;
  width:224px;
  height:224px;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%,
      #070707 0 8px,
      #0f0f0f 8px 21px,
      #090909 21px 31px,
      transparent 31px),
    repeating-radial-gradient(circle at 50% 50%,
      #1a1a1a 0 2px,
      #0a0a0a 2px 5px),
    radial-gradient(circle at 50% 50%,
      #2a2a2a 0%,
      #0a0a0a 66%,
      #000000 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 0 22px rgba(255,255,255,.03),
    inset 0 -22px 36px rgba(0,0,0,.44),
    0 18px 42px rgba(0,0,0,.62);
  animation:jmvap-spin 3s linear infinite;
  animation-play-state:paused;
}

.jmvap-vinyl::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.025);
  pointer-events:none;
}

.jmvap-vinyl::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.13), transparent 42%),
    radial-gradient(circle at 67% 78%, rgba(255,255,255,.035), transparent 28%);
  pointer-events:none;
  mix-blend-mode:screen;
}

.jmvap-vinyl.playing{
  animation-play-state:running;
}

.jmvap-cover{
  position:absolute;
  width:92px;
  height:92px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  background:#000;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.28),
    inset 0 0 0 8px rgba(255,255,255,.03),
    0 0 0 1px rgba(255,255,255,.02);
  z-index:2;
}

.jmvap-cover::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    linear-gradient(-35deg, transparent 0 38%, rgba(10,28,48,.18) 38% 44%, transparent 44% 100%),
    linear-gradient(-35deg, transparent 0 58%, rgba(10,28,48,.14) 58% 64%, transparent 64% 100%);
  pointer-events:none;
  z-index:2;
}

.jmvap-cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.045);
  transform-origin:center;
}

/* =========================
   CENTRE MÉTALLIQUE LISSE
========================= */

.jmvap-hole{
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:14px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  z-index:3;
  background:
    radial-gradient(circle at 35% 28%,
      #ffffff 0%,
      #f1f3f5 18%,
      #d0d4d8 42%,
      #8f959c 72%,
      #5d6268 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.85),
    inset 0 -2px 3px rgba(0,0,0,.35),
    0 1px 2px rgba(0,0,0,.25);
}

.jmvap-hole::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%,
      rgba(255,255,255,.82) 0%,
      rgba(255,255,255,.28) 18%,
      rgba(255,255,255,0) 42%);
}

.jmvap-hole::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:20px;
  height:20px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  z-index:-1;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,.03) 40%,
      rgba(0,0,0,.22) 75%,
      transparent 100%);
}

@keyframes jmvap-spin{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}

/* =========================
   BRAS
========================= */

.jmvap-tonearm-base{
  position:absolute;
  left:247px;
  top:32px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:linear-gradient(135deg,#555b68 0%,#2b2f39 55%,#171a20 100%);
  border:2px solid #d9d9d9;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 10px rgba(255,255,255,.06);
  z-index:5;
}

.jmvap-pivot-screw{
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#bbb;
}

.jmvap-lamp{
  position:absolute;
  right:-35px;
  top:10px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#ff5a5a 0%,#c81414 55%,#5a0000 100%);
  box-shadow:
    0 0 6px rgba(168,16,16,.45),
    0 0 10px rgba(168,16,16,.25);
  cursor:pointer;
}

.jmvap-lamp::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:linear-gradient(145deg,#f2f2f2,#b8b8b8 40%,#6e6e6e 60%,#ffffff 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.8),
    inset 0 -2px 3px rgba(0,0,0,.5),
    0 2px 4px rgba(0,0,0,.4);
  z-index:-1;
}

.jmvap-lamp::after{
  content:"";
  position:absolute;
  inset:-11px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.25) 0%, transparent 70%);
  opacity:.4;
  z-index:-2;
}

.jmvap-lamp.on{
  background:radial-gradient(circle,#6bff6b,#1faa1f 60%,#003000);
  box-shadow:
    0 0 12px rgba(40,200,40,.8),
    0 0 26px rgba(40,200,40,.5);
}

/* Support plastique noir du bras */

.jmvap-cue-rest{
  position:absolute;
  left:248px;
  top:112px;
  width:28px;
  height:48px;
  z-index:3;
  pointer-events:none;
}

.jmvap-cue-rest::before{
  content:"";
  position:absolute;
  left:11px;
  top:10px;
  width:6px;
  height:27px;
  border-radius:3px;
  background:linear-gradient(180deg,#171717 0%,#070707 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.08),
    0 2px 3px rgba(0,0,0,.5);
}

.jmvap-cue-rest::after{
  content:"";
  position:absolute;
  left:3px;
  top:0;
  width:22px;
  height:10px;
  border-radius:4px;
  background:linear-gradient(180deg,#2a2a2a 0%,#0a0a0a 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.12),
    inset 0 -1px 2px rgba(0,0,0,.65),
    0 2px 4px rgba(0,0,0,.45);
}

.jmvap-tonearm{
  position:absolute;
  left:267px;
  top:46px;
  width:86px;
  height:200px;
  transform-origin:0 0;
  transform:rotate(var(--arm-angle));
  z-index:4;
}

.counterweight,
.gimbal,
.arm-tube,
.arm-bend,
.elbow-cap,
.counterweight-rear,
.headshell-top,
.cartridge,
.stylus{
  display:none;
}

.jmvap-arm-straight{
  position:absolute;
  left:-6px;
  top:-10px;
  width:12px;
  height:150px;
  border-radius:10px;
  background:linear-gradient(90deg,#6f737a 0%,#d7d9dd 30%,#9ea3ab 55%,#f0f1f3 75%,#6f737a 100%);
  box-shadow:
    inset 1px 0 3px rgba(255,255,255,.45),
    inset -1px 0 3px rgba(0,0,0,.25);
}

.jmvap-elbow-joint{
  position:absolute;
  left:-6px;
  top:130px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ffffff 0%,#d9dbe0 30%,#9aa0a8 55%,#4a4f57 85%,#1c1f25 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.7),
    inset 0 -2px 3px rgba(0,0,0,.5),
    0 2px 4px rgba(0,0,0,.45);
  z-index:4;
}

.jmvap-arm-end{
  position:absolute;
  left:-32px;
  top:136px;
  width:32px;
  height:12px;
  border-radius:8px;
  transform:rotate(-30deg);
  background:linear-gradient(90deg,#6f737a 0%,#d7d9dd 30%,#9ea3ab 55%,#f0f1f3 75%,#6f737a 100%);
  box-shadow:
    inset 1px 0 3px rgba(255,255,255,.45),
    inset -1px 0 3px rgba(0,0,0,.25);
}

.jmvap-headshell{
  position:absolute;
  left:-53px;
  top:150px;
  width:38px;
  height:38px;
  transform:rotate(-30deg);
  border-radius:5px;
  background:linear-gradient(145deg,#f5d36a 0%,#caa23a 60%,#7d5d1e 100%);
  box-shadow:0 6px 8px rgba(0,0,0,.35);
  cursor:pointer;
  touch-action:manipulation;
}

.jmvap-headshell::before,
.jmvap-headshell::after{
  content:"";
  position:absolute;
  top:12px;
  width:6px;
  height:12px;
  background:linear-gradient(180deg,#f1f1f1,#cfcfcf);
  border-radius:1px;
}

.headshell::before{left:10px}
.jmvap-headshell::after{left:21px}

.jmvap-headshell:active{
  transform:rotate(-30deg) scale(0.96);
}

.jmvap-headshell.pause-ready{
  box-shadow:
    0 6px 8px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.18);
}

/* =========================
   UI
========================= */

.jmvap-title{
  margin-bottom:4px;
  font-weight:bold;
  letter-spacing:.5px;
}

.jmvap-date{
  font-size:12px;
  color:#9a9a9a;
  margin-bottom:8px;
  letter-spacing:.5px;
}

.jmvap-status{
  font-size:12px;
  color:#bbb;
  margin-bottom:10px;
  min-height:16px;
}

.jmvap-audio{
  display:none;
}

.jmvap-controls{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:4px;
}

.jmvap-control-btn{
  min-width:108px;
  height:42px;
  padding:0 18px;
  border-radius:12px;
  border:1px solid #737980;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#111;
  background:
    linear-gradient(180deg,
      #f7f8fa 0%,
      #d7dbe0 20%,
      #a9afb7 48%,
      #e4e7ea 72%,
      #7c838b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -2px 3px rgba(0,0,0,.28),
    0 4px 10px rgba(0,0,0,.35);
  transition:
    transform .12s ease,
    filter .12s ease,
    box-shadow .12s ease,
    background .18s ease,
    color .18s ease,
    border-color .18s ease;
}

.jmvap-control-btn:hover{
  filter:brightness(1.04);
}

.jmvap-control-btn:active{
  transform:translateY(1px) scale(.98);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 2px rgba(0,0,0,.35),
    0 2px 6px rgba(0,0,0,.28);
}

.jmvap-control-btn .jmvap-symbol{
  display:inline-block;
  margin-right:8px;
  font-size:14px;
  vertical-align:middle;
}

.jmvap-control-btn.is-idle{
  color:#171717;
  border-color:#727982;
  background:
    linear-gradient(180deg,
      #f4f5f7 0%,
      #d6dbe0 20%,
      #a0a7b0 48%,
      #dde1e5 72%,
      #727981 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -2px 3px rgba(0,0,0,.26),
    0 4px 10px rgba(0,0,0,.32);
}

.jmvap-control-btn.is-playing{
  color:#0f240f;
  border-color:#5d8361;
  background:
    linear-gradient(180deg,
      #f2f8f2 0%,
      #d5e6d5 18%,
      #8fb58f 46%,
      #dbeadb 72%,
      #5f845f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -2px 3px rgba(0,60,0,.24),
    0 0 10px rgba(70,170,70,.22),
    0 4px 10px rgba(0,0,0,.32);
}

.jmvap-control-btn.is-stopped{
  color:#2a1111;
  border-color:#8d6767;
  background:
    linear-gradient(180deg,
      #f8f1f1 0%,
      #ead3d3 18%,
      #b88989 46%,
      #efdddd 72%,
      #8a5f5f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -2px 3px rgba(80,0,0,.24),
    0 0 10px rgba(180,70,70,.18),
    0 4px 10px rgba(0,0,0,.32);
}

.jmvap-signature{
  margin-top:14px;
  font-size:11px;
  color:#7f7f84;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.jmvap-signature span{
  color:#bdbdc2;
}


.jmvap-player{
  display:block;
  text-align:center !important;
  margin:20px auto !important;
  line-height:1.2;
}
.jmvap-title,
.jmvap-date,
.jmvap-status,
.jmvap-signature{
  display:block;
  width:100%;
  text-align:center !important;
  margin-left:auto;
  margin-right:auto;
}
.jmvap-title{margin-top:0}
.jmvap-turntable,
.jmvap-tonearm,
.jmvap-headshell{
  overflow:visible;
}
.jmvap-headshell::before{left:10px}
.jmvap-headshell::after{left:21px}


/* v1.0.2 hard fixes */
.jmvap-player{
  width:var(--jmvap-width,340px) !important;
  max-width:100% !important;
  display:block !important;
  margin:20px auto !important;
  text-align:center !important;
  font-family:Arial,sans-serif !important;
  color:#fff !important;
}
.jmvap-turntable{
  position:relative !important;
  width:300px !important;
  height:260px !important;
  margin:0 auto 15px !important;
}
.jmvap-title,
.jmvap-date,
.jmvap-status,
.jmvap-signature{
  position:relative !important;
  display:block !important;
  width:100% !important;
  left:auto !important;
  right:auto !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}
.jmvap-title{
  margin-bottom:4px !important;
  font-weight:bold !important;
  letter-spacing:.5px !important;
}
.jmvap-date{
  font-size:12px !important;
  color:#9a9a9a !important;
  margin-bottom:8px !important;
}
.jmvap-status{
  font-size:12px !important;
  color:#bbb !important;
  margin-bottom:10px !important;
  min-height:16px !important;
}
.jmvap-signature{
  margin-top:14px !important;
  font-size:11px !important;
  color:#7f7f84 !important;
  letter-spacing:.8px !important;
  text-transform:uppercase !important;
}
.jmvap-signature span{color:#bdbdc2 !important}

.jmvap-controls{
  display:flex !important;
  justify-content:center !important;
  gap:12px !important;
  margin-top:4px !important;
}
.jmvap-headshell{
  left:-53px !important;
  top:150px !important;
  width:38px !important;
  height:38px !important;
  transform:rotate(-30deg) !important;
  transform-origin:center center !important;
  overflow:visible !important;
}
.jmvap-headshell::before,
.jmvap-headshell::after{
  top:12px !important;
  width:6px !important;
  height:12px !important;
}
.jmvap-headshell::before{left:10px !important;}
.jmvap-headshell::after{left:21px !important;}
.jmvap-headshell:active{transform:rotate(-30deg) scale(.96) !important;}

/* v1.0.3 title color fix */
.jmvap-title{
  color:#000 !important;
}