:root{
  --bg:#02060c;
  --panel:#07111d;
  --panel2:#0b1724;
  --line:#1d3348;
  --text:#f3f8ff;
  --muted:#9aaec4;
  --green:#22e678;
  --blue:#159cff;
  --purple:#a94cff;
  --orange:#ff912c;
  --yellow:#ffe32a;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  margin:0;
  width:100%;
  min-height:100%;
  background:#02060c;
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
}

body{
  overflow-x:hidden;
}

button,select,input{
  font-family:inherit;
}

button{
  cursor:pointer;
}

#app{
  width:100%;
  max-width:960px;
  min-height:100vh;
  margin:0 auto;
  padding:8px;
  background:
    radial-gradient(circle at 50% 4%,rgba(25,52,79,.78),transparent 34%),
    linear-gradient(180deg,#02060c,#050c15 46%,#02060c);
}

/* ===== general ===== */

.card{
  background:
    linear-gradient(180deg,rgba(8,18,31,.98),rgba(3,8,15,.99));
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 16px 45px rgba(0,0,0,.36);
}

.active{
  background:#129447!important;
  border-color:var(--green)!important;
  color:#fff!important;
}

/* ===== top ===== */

.topbar{
  display:grid;
  grid-template-columns:42px 1fr 170px 42px;
  gap:8px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#050d17;
  margin-bottom:8px;
}

.icon{
  border:0;
  background:transparent;
  color:#fff;
  font-size:28px;
}

.brand h1{
  margin:0;
  color:var(--green);
  font-size:30px;
  line-height:1;
  letter-spacing:-.5px;
}

.brand p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:14px;
}

.topbar select{
  height:44px;
  border-radius:10px;
  border:1px solid #2a455c;
  background:#07131f;
  color:white;
  padding:0 12px;
}

/* ===== song ===== */

.song{
  padding:12px;
  margin-bottom:8px;
}

.songInfo{
  display:grid;
  grid-template-columns:38px 1fr 44px;
  gap:10px;
  align-items:center;
}

.noteIcon{
  font-size:30px;
}

.songInfo strong{
  display:block;
  font-size:18px;
}

.songInfo span{
  display:block;
  color:var(--muted);
  margin-top:5px;
  font-size:14px;
}

.songInfo button{
  height:40px;
  border:1px solid #2a455c;
  border-radius:10px;
  background:#07131f;
  color:white;
}

#wave{
  display:block;
  width:100%;
  height:85px;
  margin-top:8px;
  filter:drop-shadow(0 0 12px rgba(18,156,255,.75));
}

/* ===== controls ===== */

.controlGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:8px;
}

.control{
  min-height:150px;
  padding:12px;
}

.control h2{
  margin:0 0 10px;
  font-size:16px;
}

.speedTop{
  display:grid;
  grid-template-columns:48px 1fr 48px;
  gap:8px;
  align-items:center;
}

.speedTop button,
.reset,
.seg button,
.nums button,
.fakeSelect{
  height:40px;
  border:1px solid #28445d;
  background:#0b1828;
  color:white;
  border-radius:9px;
  font-size:17px;
}

.speedTop b{
  color:var(--green);
  text-align:center;
  font-size:39px;
  text-shadow:0 0 18px rgba(34,230,120,.35);
}

input[type=range]{
  width:100%;
  accent-color:var(--green);
}

.rangeText{
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:13px;
}

.reset{
  width:100px;
  height:34px;
  display:block;
  margin:8px auto 0;
}

.seg{
  display:grid;
  grid-template-columns:1fr 1fr;
}

.seg button{
  border-radius:8px 8px 0 0;
}

.times{
  display:grid;
  grid-template-columns:1fr 25px 1fr;
  gap:4px;
  align-items:center;
  margin:9px 0;
}

.times span{
  border:1px solid #28445d;
  border-radius:8px;
  padding:8px 3px;
  color:#eaf3ff;
  text-align:center;
  font-size:13px;
}

.times em{
  color:var(--muted);
  text-align:center;
  font-style:normal;
}

.switch{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
}

.switch input{
  display:none;
}

.switch i{
  position:relative;
  display:inline-block;
  width:42px;
  height:24px;
  border-radius:999px;
  background:#19a85b;
}

.switch i:after{
  content:"";
  position:absolute;
  top:2px;
  right:2px;
  width:20px;
  height:20px;
  background:white;
  border-radius:50%;
}

.control p{
  margin:0 0 18px;
  color:var(--muted);
}

.nums{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
}

.fakeSelect{
  width:100%;
  display:block;
  text-align:left;
  padding-left:12px;
  margin-bottom:9px;
}

.volume,
.vol2{
  display:flex;
  align-items:center;
  gap:8px;
}

/* ===== guitar ===== */

.guitarCard{
  padding:12px;
  margin-bottom:8px;
}

.sectionHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:9px;
}

.sectionHead h2{
  margin:0;
  font-size:20px;
}

.viewTabs{
  display:flex;
  overflow:hidden;
  border:1px solid #28445d;
  border-radius:10px;
}

.viewTabs button{
  height:38px;
  padding:0 14px;
  border:0;
  background:#07131f;
  color:white;
}

.stage{
  position:relative;
  height:520px;
  overflow:hidden;
  border-radius:16px;
  background:
    radial-gradient(circle at 75% 38%,rgba(168,90,28,.72) 0 25%,transparent 43%),
    radial-gradient(circle at 22% 34%,rgba(20,42,65,.85) 0 25%,transparent 52%),
    linear-gradient(180deg,#07131f,#02060b);
  box-shadow:
    inset 0 0 75px rgba(0,0,0,.6),
    0 20px 55px rgba(0,0,0,.45);
}

.asset{
  position:absolute;
  display:none;
  pointer-events:none;
  user-select:none;
}

.asset.loaded{
  display:block;
}

.bg.loaded{
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

.leftImg.loaded{
  left:19%;
  top:27%;
  width:22%;
  z-index:30;
}

.rightImg.loaded{
  right:2%;
  top:28%;
  width:21%;
  z-index:31;
}

.assetMode .fallbackGuitar,
.assetMode .hand{
  display:none;
}

/* fallback guitar */

.fallbackGuitar{
  position:absolute;
  inset:0;
  z-index:2;
}

.headstock{
  position:absolute;
  left:-2%;
  top:24%;
  width:16%;
  height:38%;
  border-radius:50% 16px 16px 50%;
  background:
    radial-gradient(circle at 23% 30%,rgba(255,190,110,.45),transparent 18%),
    linear-gradient(90deg,#211007,#8c4b23 54%,#331609);
  box-shadow:inset 0 0 28px rgba(0,0,0,.65);
}

.neck{
  position:absolute;
  left:1.5%;
  top:29%;
  width:84%;
  height:25%;
  border-radius:9px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.16),transparent 6%,transparent 93%,rgba(0,0,0,.25)),
    repeating-linear-gradient(90deg,transparent 0 6.2%,rgba(235,235,225,.92) 6.35% 6.55%,rgba(80,50,30,.2) 6.65% 7.15%),
    linear-gradient(180deg,#9a5b2e,#713819 48%,#4a210e);
  box-shadow:inset 0 8px 18px rgba(255,255,255,.08),inset 0 -18px 35px rgba(0,0,0,.42),0 12px 30px rgba(0,0,0,.45);
}

.body{
  position:absolute;
  right:-10%;
  top:-3%;
  width:54%;
  height:98%;
  border-radius:50%;
  background:
    radial-gradient(circle at 48% 48%,#030303 0 10%,transparent 11%),
    radial-gradient(circle at 48% 48%,transparent 0 16%,rgba(215,126,45,.95) 17% 18%,transparent 19%),
    radial-gradient(circle at 36% 35%,rgba(255,190,95,.36),transparent 32%),
    linear-gradient(115deg,#c47b2d,#8a4418 48%,#3d1506);
  box-shadow:inset 0 0 80px rgba(0,0,0,.58),-18px 0 50px rgba(0,0,0,.42);
}

.rosette{
  position:absolute;
  right:12%;
  top:31%;
  width:21%;
  height:33%;
  border-radius:50%;
  border:10px solid rgba(121,55,16,.95);
  box-shadow:0 0 0 4px rgba(213,126,43,.75), inset 0 0 26px #000;
}

.soundhole{
  position:absolute;
  right:14%;
  top:35%;
  width:16%;
  height:25%;
  border-radius:50%;
  background:#020304;
  box-shadow:0 0 0 9px rgba(177,91,29,.85),0 0 0 14px rgba(55,20,6,.95),0 0 24px rgba(0,0,0,.9);
}

.strings{
  position:absolute;
  left:1.5%;
  right:3%;
  top:35.5%;
  height:15%;
  background:
    repeating-linear-gradient(180deg,rgba(245,250,255,.95) 0 1.35px,transparent 1.8px 16.6%);
  z-index:12;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.8));
}

.frets{
  position:absolute;
  left:9%;
  top:27%;
  width:76%;
  height:30%;
  background:
    repeating-linear-gradient(90deg,transparent 0 6.35%,rgba(240,238,230,.88) 6.48% 6.68%,transparent 6.8% 7.05%);
  z-index:14;
}

.dotmarks{
  position:absolute;
  left:17%;
  top:39%;
  width:61%;
  height:8%;
  opacity:.6;
  background:
    radial-gradient(circle at 12% 50%,rgba(220,210,190,.5) 0 6%,transparent 7%),
    radial-gradient(circle at 32% 50%,rgba(220,210,190,.5) 0 6%,transparent 7%),
    radial-gradient(circle at 52% 50%,rgba(220,210,190,.5) 0 6%,transparent 7%),
    radial-gradient(circle at 72% 50%,rgba(220,210,190,.5) 0 6%,transparent 7%);
  z-index:15;
}

/* hands fallback */

.hand{
  position:absolute;
  z-index:30;
  pointer-events:none;
  transition:.1s linear;
}

.leftHand{
  left:20%;
  top:28.5%;
  width:165px;
  height:205px;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.45));
}

.leftHand b{
  position:absolute;
  left:46px;
  top:86px;
  width:98px;
  height:104px;
  border-radius:48%;
  background:
    radial-gradient(circle at 35% 20%,rgba(255,206,160,.55),transparent 26%),
    linear-gradient(180deg,#d88d57,#86451f);
}

.leftHand span{
  position:absolute;
  bottom:72px;
  width:35px;
  border-radius:20px;
  background:
    radial-gradient(circle at 40% 12%,rgba(255,210,165,.7),transparent 24%),
    linear-gradient(180deg,#e39a5e,#a25729);
}

.leftHand span:nth-child(1){left:3px;height:106px}
.leftHand span:nth-child(2){left:41px;height:132px}
.leftHand span:nth-child(3){left:80px;height:129px}
.leftHand span:nth-child(4){left:119px;height:107px}

.rightHand{
  right:2%;
  top:28.5%;
  width:185px;
  height:205px;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.45));
}

.rightHand b{
  position:absolute;
  left:8px;
  top:57px;
  width:110px;
  height:114px;
  border-radius:50%;
  background:
    radial-gradient(circle at 36% 22%,rgba(255,205,160,.5),transparent 30%),
    linear-gradient(180deg,#c87942,#88451f);
}

.rightHand span{
  position:absolute;
  right:8px;
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  color:white;
  background:#8438e4;
  box-shadow:0 0 19px rgba(169,76,255,.9);
}

.rp{top:14px;background:#236dff!important}
.ri{top:54px}
.rm{top:94px}
.ra{top:134px}

/* notes */

.note{
  position:absolute;
  z-index:40;
  width:38px;
  height:38px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  color:white;
  border:2px solid rgba(255,255,255,.78);
  box-shadow:0 0 18px currentColor,0 0 35px currentColor;
  transition:.08s linear;
}

.note.isActive{
  transform:translate(-50%,-50%) scale(1.55);
  outline:2px solid rgba(255,255,255,.34);
}

.green{background:#0eaa50;color:var(--green)}
.blue{background:#106ecb;color:var(--blue)}
.purple{background:#7330c8;color:var(--purple)}
.yellow{background:#d4bd00;color:var(--yellow)}
.orange{background:#c1680e;color:var(--orange)}

.stringPanel{
  position:absolute;
  left:3%;
  right:3%;
  bottom:6%;
  height:25%;
  z-index:18;
}

.labels{
  position:absolute;
  width:28px;
  left:0;
  top:0;
  bottom:0;
  display:grid;
  grid-template-rows:repeat(6,1fr);
}

.labels span{
  display:flex;
  align-items:center;
  color:#eef7ff;
  font-size:17px;
}

.lines{
  position:absolute;
  left:36px;
  right:0;
  top:0;
  bottom:0;
  background:
    repeating-linear-gradient(180deg,rgba(140,180,210,.25) 0 1px,transparent 1px 16.66%);
}

.greenCursor{
  position:absolute;
  left:44%;
  top:-6px;
  bottom:-6px;
  width:2px;
  background:var(--green);
  box-shadow:0 0 22px var(--green);
}

.statusGrid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}

.statusGrid div{
  border:1px solid var(--line);
  border-radius:12px;
  background:#06111d;
  padding:11px 4px;
  text-align:center;
}

.statusGrid small{
  display:block;
  color:var(--muted);
  font-size:12px;
}

.statusGrid b{
  display:block;
  margin-top:6px;
  font-size:17px;
}

#techInfo{
  color:var(--purple);
}

/* ===== tablature ===== */

.tabCard{
  padding:12px;
  margin-bottom:8px;
}

.tabNav{
  display:flex;
  gap:28px;
  height:42px;
  border-bottom:1px solid var(--line);
}

.tabNav button{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:16px;
}

.tabNav button.active{
  color:var(--green)!important;
  border-bottom:2px solid var(--green)!important;
}

.tabView{
  position:relative;
  height:190px;
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden;
  margin-top:10px;
  background:#03080f;
}

#tabCanvas{
  width:100%;
  height:100%;
  display:block;
}

.tabCursor{
  position:absolute;
  top:7%;
  bottom:7%;
  left:18%;
  width:2px;
  background:var(--green);
  box-shadow:0 0 20px var(--green);
}

.miniTimeline{
  position:relative;
  height:40px;
  border:1px solid var(--line);
  margin-top:10px;
  background:#03080f;
  overflow:hidden;
}

.dot{
  position:absolute;
  width:10px;
  height:10px;
  top:14px;
  border-radius:50%;
}

.timelineCursor{
  position:absolute;
  top:0;
  bottom:0;
  left:20%;
  width:2px;
  background:var(--green);
  box-shadow:0 0 18px var(--green);
}

.transport{
  margin-top:10px;
  height:78px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#06111d;
  display:grid;
  grid-template-columns:1.2fr .8fr 44px 62px 44px 44px 1.3fr 1fr;
  gap:7px;
  align-items:center;
  padding:8px;
}

.transport strong{
  color:var(--green);
  font-size:23px;
}

.transport span{
  color:var(--muted);
}

.transport button{
  height:44px;
  border-radius:50%;
  border:0;
  background:#0b1828;
  color:white;
  font-size:20px;
}

.transport .play{
  width:58px;
  height:58px;
  background:var(--green);
  font-size:27px;
}

.tempo b{
  color:var(--green);
}

/* ===== footer ===== */

.bottomNav{
  height:84px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  border-radius:16px;
  background:#06111d;
  overflow:hidden;
}

.bottomNav button{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:25px;
}

.bottomNav span{
  display:block;
  font-size:13px;
  margin-top:4px;
}

.bottomNav .active{
  color:var(--green)!important;
}

/* ===== mobile ===== */

@media(max-width:760px){
  #app{
    max-width:none;
    padding:6px;
  }

  .topbar{
    grid-template-columns:34px 1fr 132px 34px;
    padding:9px;
  }

  .brand h1{
    font-size:22px;
  }

  .brand p{
    font-size:11px;
  }

  .song{
    padding:9px;
  }

  #wave{
    height:65px;
  }

  .controlGrid{
    grid-template-columns:1fr 1fr;
    gap:6px;
  }

  .control{
    min-height:126px;
    padding:9px;
  }

  .control h2{
    font-size:14px;
    margin-bottom:7px;
  }

  .speedTop{
    grid-template-columns:40px 1fr 40px;
    gap:5px;
  }

  .speedTop b{
    font-size:31px;
  }

  .speedTop button,
  .nums button,
  .fakeSelect{
    height:34px;
    font-size:14px;
  }

  .reset{
    height:30px;
    margin-top:5px;
  }

  .guitarCard{
    padding:8px;
  }

  .sectionHead h2{
    font-size:15px;
  }

  .viewTabs button{
    height:31px;
    padding:0 8px;
    font-size:12px;
  }

  .stage{
    height:430px;
  }

  .neck{
    left:0%;
    top:31%;
    width:88%;
    height:24%;
  }

  .headstock{
    left:-3%;
    width:15%;
  }

  .body{
    right:-16%;
    top:0%;
    width:61%;
    height:82%;
  }

  .rosette{
    right:8%;
    top:31%;
    width:24%;
    height:31%;
  }

  .soundhole{
    right:10%;
    top:35%;
    width:18%;
    height:23%;
  }

  .leftHand{
    transform:scale(.8);
    transform-origin:left top;
    left:21%;
    top:29%;
  }

  .rightHand{
    transform:scale(.78);
    transform-origin:right top;
    right:-2%;
    top:30%;
  }

  .note{
    width:31px;
    height:31px;
    font-size:13px;
  }

  .statusGrid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }

  .statusGrid div{
    padding:8px 3px;
  }

  .statusGrid small{
    font-size:11px;
  }

  .statusGrid b{
    font-size:14px;
  }

  .tabNav{
    gap:12px;
    overflow-x:auto;
  }

  .tabNav button{
    min-width:max-content;
    font-size:13px;
  }

  .tabView{
    height:145px;
  }

  .transport{
    grid-template-columns:1fr .55fr 34px 48px 34px 34px;
    height:62px;
    gap:4px;
  }

  .transport strong{
    font-size:18px;
  }

  .transport button{
    width:34px;
    height:34px;
    font-size:14px;
  }

  .transport .play{
    width:48px;
    height:48px;
    font-size:23px;
  }

  .transport .tempo,
  .vol2{
    display:none;
  }

  .bottomNav{
    height:72px;
  }
}

@media(max-width:430px){
  .song{
    display:none;
  }

  .controlGrid{
    grid-template-columns:1fr 1fr;
  }

  .controlGrid .control:nth-child(3),
  .controlGrid .control:nth-child(4){
    display:none;
  }

  .stage{
    height:405px;
  }

  .tabView{
    height:130px;
  }
}


/* ===== FLAMENCO_TAB_V6_1_ASSET_REAL_MANDATORY_START ===== */

/*
V6.1:
- Sin fallback visual.
- Si faltan assets, se bloquea la guitarra falsa.
- Si existen assets reales, se usan como base visual.
*/

body.v61-assets-missing .fallbackGuitar,
body.v61-assets-missing .hand,
body.v61-assets-missing #noteLayer,
body.v61-assets-missing .stringPanel {
  display: none !important;
}

body.v61-assets-ready .fallbackGuitar,
body.v61-assets-ready .hand {
  display: none !important;
}

body.v61-assets-ready .asset.loaded {
  display: block !important;
}

body.v61-assets-ready #assetBg.loaded {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

body.v61-assets-ready #assetLeft.loaded {
  position: absolute !important;
  left: 18% !important;
  top: 25% !important;
  width: 25% !important;
  height: auto !important;
  z-index: 35 !important;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.55));
}

body.v61-assets-ready #assetRight.loaded {
  position: absolute !important;
  right: 1% !important;
  top: 28% !important;
  width: 23% !important;
  height: auto !important;
  z-index: 36 !important;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.55));
}

body.v61-assets-ready #noteLayer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 60 !important;
}

body.v61-assets-ready .stringPanel {
  z-index: 55 !important;
}

#assetMandatoryBlocker {
  position: absolute;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 20%, rgba(130,25,25,.32), transparent 42%),
    rgba(0,0,0,.88);
  color: #fff;
}

.assetBlockerInner {
  width: min(92%, 760px);
  border: 1px solid rgba(255,80,80,.65);
  border-radius: 18px;
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(30,8,8,.96), rgba(8,8,12,.98));
  box-shadow: 0 0 45px rgba(255,30,30,.18);
}

.assetBlockerInner h2 {
  margin: 0 0 12px;
  color: #ff5c5c;
  font-size: 30px;
}

.assetBlockerInner p {
  color: #f4dede;
  font-size: 16px;
  line-height: 1.4;
}

.assetBlockerInner ul {
  margin: 14px 0;
  padding-left: 20px;
}

.assetBlockerInner li {
  margin: 9px 0;
}

.assetBlockerInner small {
  color: #d6a8a8;
}

.assetPath {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  font-family: monospace;
  font-size: 13px;
  word-break: break-all;
}

.assetHard {
  margin-top: 14px;
  color: #22e678 !important;
  font-weight: bold;
}

@media(max-width:760px){
  .assetBlockerInner {
    padding: 15px;
  }

  .assetBlockerInner h2 {
    font-size: 22px;
  }

  .assetBlockerInner p {
    font-size: 13px;
  }

  .assetPath {
    font-size: 11px;
  }

  body.v61-assets-ready #assetLeft.loaded {
    left: 15% !important;
    top: 26% !important;
    width: 30% !important;
  }

  body.v61-assets-ready #assetRight.loaded {
    right: -2% !important;
    top: 30% !important;
    width: 28% !important;
  }
}

/* ===== FLAMENCO_TAB_V6_1_ASSET_REAL_MANDATORY_END ===== */


/* ===== FLAMENCO_TAB_V6_2_ASSETS_WORKING_START ===== */

body.v62-assets-ready .fallbackGuitar,
body.v62-assets-ready .hand {
  display: none !important;
}

body.v62-assets-ready #assetBg.loaded {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

body.v62-assets-ready #assetLeft.loaded {
  display: block !important;
  position: absolute !important;
  left: 18% !important;
  top: 20% !important;
  width: 28% !important;
  height: auto !important;
  z-index: 48 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 20px 22px rgba(0,0,0,.65));
}

body.v62-assets-ready #assetRight.loaded {
  display: block !important;
  position: absolute !important;
  right: 0% !important;
  top: 25% !important;
  width: 25% !important;
  height: auto !important;
  z-index: 49 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 20px 22px rgba(0,0,0,.65));
}

body.v62-assets-ready #noteLayer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 65 !important;
}

body.v62-assets-ready .stringPanel {
  position: relative !important;
  z-index: 60 !important;
}

body.v62-assets-ready .stage,
body.v62-assets-ready #stage,
body.v62-assets-ready .stage3d {
  background: #05090e !important;
  overflow: hidden !important;
}

@media(max-width:760px){
  body.v62-assets-ready #assetBg.loaded {
    object-position: center center !important;
  }

  body.v62-assets-ready #assetLeft.loaded {
    left: 15% !important;
    top: 21% !important;
    width: 31% !important;
  }

  body.v62-assets-ready #assetRight.loaded {
    right: -3% !important;
    top: 27% !important;
    width: 29% !important;
  }
}

/* ===== FLAMENCO_TAB_V6_2_ASSETS_WORKING_END ===== */