/* =========================================================
   LAYOUT GERAL DA PÁGINA DO PLAYER
   ====================================================== */
:root{
  --tier-bronze:    #d6a67a;
  --tier-prata:     #c7ccd5;
  --tier-ouro:      #ffd35a;
  --tier-platina:   #4da8ff;
  --tier-diamante:  #7f5cff;
  --tier-lendario:  #ffb300;
}

/* Container principal do <main> desta página */
main.container{
  max-width:1200px;
  margin:26px auto 28px;
  padding:0 14px;
}

/* GRID topo: card do jogador + panorama */
.profile-wrap{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,0.95fr);
  gap:18px;
  align-items:stretch;
}

/* impede estouro */
.profile-wrap > *{min-width:0;}
.player-card,.tiles{min-width:0;}

@media (max-width:1024px){
  .profile-wrap{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   CARD BASE
   ====================================================== */

.player-card,
.tiles,
.panel{
  background:var(--panel);
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

/* faixa suave no topo dos cards */
.player-card::before,
.tiles::before,
.panel::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,rgba(255,217,119,.9),rgba(148,181,255,.55));
  opacity:.6;
}

/* =========================================================
   CARD DO JOGADOR (ESQUERDA)
   ====================================================== */

.player-card{
  padding:18px 20px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* topo: avatar + nome + rating + botão editar */
.player-top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:4px;
}

/* avatar */
.avatar{
  width:84px;
  height:84px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#111827;
  color:#fff;
  font-weight:900;
  font-size:34px;
  border:4px solid #f3f4ff;
  box-shadow:0 6px 18px rgba(15,23,42,.18);
}
body:not(.theme-light) .avatar{
  background:#1f2933;
  border-color:#14161d;
}

/* bloco com textos do jogador */
.player-info{
  display:flex;
  flex-direction:column;
  gap:3px;
}

/* linha do nome + nota + editar */
.player-name-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.player-name{
  margin:0;
  font-weight:900;
  font-size:22px;
}

/* selo da nota */
.player-rating-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 9px;
  border-radius:999px;
  background:#fff7e1;
  border:1px solid #ffe6a8;
  font-size:14px;
  font-weight:800;
  color:#8a5e00;
}

/* botão editar */
.edit-btn{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel2);
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.edit-btn i{font-size:12px;}
.edit-btn:hover{background:#fff;}

/* “jogador desde...” */
.player-since{
  color:var(--muted);
  font-size:13px;
}

/* ações extras se você quiser colocar no futuro */
.actions{
  display:flex;
  gap:8px;
  margin-top:6px;
  flex-wrap:wrap;
}
.btn{
  height:36px;
  padding:0 14px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  font-weight:800;
  background:linear-gradient(90deg,var(--gold2),var(--gold));
  color:#2b2b2b;
}
.btn-ghost{
  height:36px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-weight:800;
  cursor:pointer;
}

/* bloco de GIFs ocupa o resto do card */
.player-gifs{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* TV principal */
.player-gifs__main{
  position:relative;
  border-radius:16px;
  padding:8px;
  background:linear-gradient(145deg,#f9fafc,#f0f2ff);
  box-shadow:0 12px 26px rgba(10,20,60,.06);
}
body:not(.theme-light) .player-gifs__main{
  background:linear-gradient(145deg,#050814,#02030b);
}

/* vídeo */
.player-gif-main-video{
  display:block;
  width:100%;
  border-radius:12px;
  background:#000;
  box-shadow:0 0 0 1px #d4d8ef;
  cursor:pointer;
  transition:transform .18s ease, filter .18s ease;
}
.player-gifs__main:hover .player-gif-main-video{
  transform:scale(1.01);
  filter:brightness(.95);
}

/* overlay “ver publicação” */
.player-gif-overlay{
  position:absolute;
  inset:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:2px;
  background:linear-gradient(120deg,rgba(0,0,0,.15),rgba(0,0,0,.35));
  color:#fff;
  font-weight:800;
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease-out;
  text-shadow:0 2px 3px rgba(0,0,0,.45);
}
.player-gifs__main:hover .player-gif-overlay{opacity:1;}
.player-gif-overlay i{font-size:22px;margin-bottom:2px;}
.player-gif-overlay .sub{font-size:12px;opacity:.9;}

/* strip das thumbs (DVDs) */
.player-gifs__thumbs{
  display:flex;
  gap:10px;
  padding:8px 10px 10px;
  margin:8px auto 10px;
  justify-content:center;
  flex-wrap:nowrap;
  overflow:hidden;
  max-width:520px;
  border-radius:999px;
  background:#f3f4ff;
  box-shadow:0 8px 18px rgba(10,20,60,.05);
}
.player-gifs__thumbs::-webkit-scrollbar{height:6px;}
.player-gifs__thumbs::-webkit-scrollbar-track{background:transparent;}
.player-gifs__thumbs::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.8);
  border-radius:999px;
}

/* DVD das thumbs */
.gifThumb{
  position:relative;
  flex:0 0 78px;
  width:78px;
  height:78px;
  padding:0;
  border:none;
  border-radius:999px;
  overflow:hidden;
  cursor:pointer;
  outline:none;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 15%, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(circle at 70% 90%, rgba(20,20,20,.9), rgba(5,5,5,1));
  box-shadow:0 4px 10px rgba(0,0,0,.35);
  opacity:.35;
  transition:opacity .18s ease, transform .18s ease, box-shadow .18s ease;
  overflow:visible;
}
.gifThumb video{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:999px;
  -webkit-mask:radial-gradient(circle at center,transparent 0 17%,#000 18% 100%);
          mask:radial-gradient(circle at center,transparent 0 17%,#000 18% 100%);
}

/* centro do DVD */
.gifThumb::before{
  content:"";
  position:absolute;
  width:36%;
  height:36%;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  border-radius:999px;
  background:radial-gradient(circle,rgba(255,255,255,.8) 0 55%,transparent 56% 100%);
  box-shadow:
      0 0 0 2px rgba(229,231,235,0.7),
      0 0 7px rgba(255,255,255,0.6) inset;
  pointer-events:none;
  z-index:3;
}
.gifThumb::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(255,255,255,.32) 0,rgba(255,255,255,.08) 32%,transparent 60%,rgba(15,23,42,.6) 100%);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:2;
}
.gifThumb.is-active{
  opacity:1!important;
  transform:scale(1.05);
  box-shadow:0 6px 16px rgba(55,65,81,.45);
}
.gifThumb:hover:not(.is-active){
  opacity:.85;
  transform:scale(1.03);
}
.gifThumb:hover:not(.is-playing){
  opacity:.6;
}
.gifThumb.is-playing{
  opacity:1 !important;
  transform:scale(1.06);
  box-shadow:0 6px 18px rgba(55,65,81,.55);
}
.gifThumb.is-selected.is-playing{
  box-shadow:
    0 0 0 3px #facc15,
    0 0 22px rgba(250,204,21,.9),
    0 6px 18px rgba(55,65,81,.55);
}

/* giro quando está tocando */
@keyframes spinDiscVideo{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
.gifThumb.is-playing video{
  transform-origin:50% 50%;
  animation:spinDiscVideo 4s linear infinite;
}

/* =========================================================
   PANORAMA / LADO DIREITO
   ====================================================== */

.tiles{
  padding:16px 18px 18px;
}

/* títulos internos “Panorama na sala / Temporada atual” */
.career{
  margin-top:10px;
}
.career-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
}
.career-head strong{
  font-size:14px;
}
.career-head i{
  color:var(--gold);
}

/* grade com os pequenos cards */
.career-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
@media (max-width:1000px){
  .career-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .career-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* mini cards de estatística */
.mini{
  background:var(--panel2);
  border-radius:12px;
  border:1px solid var(--line);
  padding:10px 10px;
  display:flex;
  gap:10px;
  align-items:center;
}
.mini .badge{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#fff7e1;
  border:1px solid #ffe6a8;
  color:#7a5600;
  font-size:18px;
}
.mini strong{
  display:block;
  font-size:17px;
  line-height:1.1;
}
.mini small{
  color:var(--muted);
  font-weight:700;
  font-size:11px;
}

/* =========================================================
   ABA INFERIOR / PAINEL (EXPERIÊNCIA + ESTATÍSTICAS + TÍTULOS)
   ====================================================== */

.section{
  max-width:1200px;
  margin:20px auto 0;
  padding:0 14px;
}

.panel{
  padding:16px 16px 18px;
}

/* tabs */
.panel .tabs{
  display:flex;
  gap:8px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.panel .tab{
  height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:800;
  cursor:pointer;
  font-size:13px;
}
.panel .tab.is-active{
  border-color:#ffd35a;
  color:#2b2b2b;
  background:linear-gradient(90deg,#fff7e1,#fff);
}

/* =========================================================
   XP BAR
   ====================================================== */

.xp-block{
  --xpColor:#4aa8ff;
  --xpPercent:0;
}

.xp-range{
  display:flex;
  align-items:center;
  gap:16px;
  max-width:920px;
  margin:4px auto 12px;
}
.xp-end{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:70px;
  color:#64748b;
  font-weight:800;
  font-size:12px;
}
.xp-end .e-emoji{
  font-size:26px;
  line-height:1;
  filter:grayscale(.1);
  animation:pulseXp 2.2s ease-in-out infinite;
}
.xp-end.right .e-emoji{animation-delay:.8s;}

@keyframes pulseXp{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.12);}
}

.xp-bar{
  position:relative;
  flex:1 1 auto;
  height:12px;
  border-radius:999px;
  background:#eef1f6;
  border:1px solid #e2e6ee;
  overflow:visible;
}
body:not(.theme-light) .xp-bar{
  background:#15171a;
  border-color:#2a2f37;
}
.xp-fill{
  height:100%;
  width:0%;
  background: var(--xpColor);        /* 👈 sem degradê */
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  transition:width 3.8s cubic-bezier(.2,.8,.2,1);
  position:relative;
  z-index:1;
}


/* marcador */
.xp-marker{
  position:absolute;
  left:0;
  top:50%;
  transform:translate(-50%,-58%);
  width:40px;
  height:40px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #e8e8e8;
  box-shadow:0 10px 26px rgba(0,0,0,.14);
  transition:left 3.8s cubic-bezier(.2,.8,.2,1);
  animation:bobXp 2.4s ease-in-out infinite;
  z-index:2;
}
body:not(.theme-light) .xp-marker{
  background:var(--panel);
  border-color:#3a3a3a;
}
@keyframes bobXp{
  0%,100%{transform:translate(-50%,-58%);}
  50%{transform:translate(-50%,-64%);}
}

.xp-marker .tip{
  position:absolute;
  left:50%;
  bottom:46px;
  transform:translate(-50%,-4px);
  background:#111;
  color:#fff;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid #333;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:.15s ease;
}
.xp-marker:hover .tip{
  opacity:1;
  transform:translate(-50%,-10px);
}

/* meta info do XP */
.xp-meta{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* chips de XP */
.xp-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid #e2e6ee;
  box-shadow:0 4px 10px rgba(15,23,42,.03);
  font-size:13px;
  font-weight:600;
  color:#5b647c;
  line-height:1;
}
.xp-pill strong{
  font-weight:800;
  color:#2f3850;
}

/* pílula de nível atual */
.xp-pill.level{
  border-width:1px;
  box-shadow:0 4px 12px rgba(15,23,42,.05);
}
.xp-pill.level.ferro{
  border-color:#6b7280;
  color:#4b5563;
  background:rgba(107,114,128,.06);
}
.xp-pill.level.bronze{
  border-color:#cd7f32;
  color:#92400e;
  background:rgba(205,127,50,.08);
}
.xp-pill.level.prata{
  border-color:#c0c0c0;
  color:#4b5563;
  background:rgba(192,192,192,.10);
}
.xp-pill.level.ouro{
  border-color:#fbbf24;
  color:#854d0e;
  background:rgba(251,191,36,.12);
}
.xp-pill.level.platina{
  border-color:#60a5fa;
  color:#1d4ed8;
  background:rgba(96,165,250,.10);
}
.xp-pill.level.diamante{
  border-color:#3b82f6;
  color:#1d4ed8;
  background:rgba(59,130,246,.12);
}
.xp-pill.level.legendary{
  border-color:#f59e0b;
  color:#92400e;
  background:rgba(245,158,11,.14);
}

/* =========================================================
   ESTATÍSTICAS (GAUGES)
   ====================================================== */

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
@media (max-width:1000px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .grid-3{grid-template-columns:1fr;}
}

.stat-card{
  padding:12px 10px 14px;
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:14px;
}
.stat-title{
  margin:0 0 6px;
  font-weight:900;
  text-align:center;
}

/* gauge semicircular */
.gauge{
  position:relative;
  width:150px;
  height:78px;
  margin:0 auto;
}
.gauge svg{width:100%;height:100%;}
.gauge path{fill:none;stroke-width:12;}
.g-bg{stroke:#e6e6e6;}
body:not(.theme-light) .g-bg{stroke:#1f2933;}
.g-fg{stroke-linecap:round;transition:stroke-dashoffset .8s ease;}

.val{
  position:absolute;
  left:50%;
  top:78%;
  transform:translate(-50%,-50%);
  font-weight:900;
  font-size:18px;
}

.substats{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
}
.bar{
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line);
}
.bar i{
  display:block;
  height:100%;
  width:0;
  background:#9ca3af;
}
.placeholder{
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

/* =========================================================
   MODAL EDITAR GIF FIXADO – LAYOUT NOVO
   ====================================================== */

.edit-gif-inner{
  max-width:900px;
  width:100%;
  background:var(--panel);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  padding:20px 22px 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.edit-gif-title{
  margin:0;
  font-size:18px;
  font-weight:900;
}
.edit-gif-sub{
  margin:0;
  font-size:13px;
  color:var(--muted);
}

/* layout geral: preview + selecionados + faixa */
.edit-gif-layout{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* bloco com preview grande + coluna de selecionados */
.edit-gif-main{
  display:grid;
  grid-template-columns:minmax(0,2.1fr) minmax(0,0.9fr);
  gap:16px;
  align-items:stretch;
}
@media (max-width:900px){
  .edit-gif-main{
    grid-template-columns:1fr;
  }
}

/* preview grande */
.edit-gif-preview{
  background:var(--panel2);
  border-radius:18px;
  border:1px solid var(--line);
  padding:12px;
  position:relative;
  display:flex;
  flex-direction:column;
}
#edit-gif-preview-video{
  width:100%;
  max-height:260px;
  border-radius:14px;
  background:#000;
  object-fit:contain;
}
.edit-gif-preview-label{
  position:absolute;
  left:14px;
  top:12px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.75);
  color:#fff;
  font-size:11px;
  font-weight:800;
}

/* coluna de selecionados */
.edit-gif-selected{
  background:var(--panel2);
  border-radius:18px;
  border:1px solid var(--line);
  padding:10px 10px 8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  height:100%;
  overflow-y:auto;
}
.edit-gif-selected-title{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  margin:0 0 2px;
}
.edit-gif-selected-list{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-auto-rows:1fr;
  column-gap:12px;
  row-gap:14px;
  padding-right:4px;
}
.edit-gif-selected-list .gifThumb{
  justify-self:center;
  align-self:center;
  width:85px;
  height:85px;
}

/* badge com a ordem 1–6 */
.gifThumb-order{
  position:absolute;
  left:-4px;
  top:-4px;
  width:22px;
  height:22px;
  border-radius:999px;
  background:#020617;
  color:#f9fafb;
  font-size:11px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 8px rgba(0,0,0,.45);
  z-index:5;
}

/* faixa horizontal de GIFs no modal */
.edit-gif-strip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 22px 14px;
  border-radius:999px;
  background:#f3f4ff;
  box-shadow:0 8px 18px rgba(10,20,60,.05);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
}
.edit-gif-strip::-webkit-scrollbar{
  height:8px;
}
.edit-gif-strip::-webkit-scrollbar-track{
  background:transparent;
}
.edit-gif-strip::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.9);
  border-radius:999px;
}
.gifThumb-modal{
  flex:0 0 72px;
  width:72px;
  height:72px;
  scroll-snap-align:center;
}

/* ícone do alfinete */
.edit-gif-pin{
  position:absolute;
  right:-6px;
  top:-6px;
  width:26px;
  height:26px;
  border-radius:999px;
  border:none;
  display:grid;
  place-items:center;
  background:rgba(15,23,42,.92);
  color:#e5e7eb;
  font-size:13px;
  cursor:pointer;
  z-index:4;
  box-shadow:0 4px 10px rgba(0,0,0,.45);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.edit-gif-pin i{
  pointer-events:none;
}
.edit-gif-pin:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.55);
}
.gifThumb.is-selected .edit-gif-pin{
  background:#facc15;
  color:#111827;
}

/* estados das thumbs no modal */
.edit-gif-inner .gifThumb video{
  filter:grayscale(.3) brightness(.65);
  transition:filter .18s ease;
}
.edit-gif-inner .gifThumb:hover:not(.is-playing) video{
  filter:grayscale(.15) brightness(.8);
}
.edit-gif-inner .gifThumb.is-playing video{
  filter:none;
}
.edit-gif-inner .gifThumb.is-playing{
  transform:scale(1.06);
  box-shadow:0 6px 18px rgba(55,65,81,.55);
}
.edit-gif-inner .gifThumb.is-selected.is-playing{
  box-shadow:
    0 0 0 3px #facc15,
    0 0 22px rgba(250,204,21,.9),
    0 6px 18px rgba(55,65,81,.55);
}
.edit-gif-inner .gifThumb-order{
  opacity:1;
}
.edit-gif-inner .gifThumb{
  opacity:1 !important;
}
.edit-gif-inner .gifThumb-order,
.edit-gif-inner .edit-gif-pin{
  opacity:1;
  filter:none;
}

/* =========================================================
   MODAL DE MÚSICA – BARRA / PLAY / TEMPOS
   ====================================================== */

.music-cut-block{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* linha: play + barra */
.music-timeline-row{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Botão Play/Pause */
.music-play-btn{
  width:30px;
  height:30px;
  border-radius:50%;
  border:none;
  background:#ffffff;
  color:#111827;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:
    0 0 0 1px rgba(15,23,42,.25),
    0 4px 10px rgba(15,23,42,.35);
}
.music-play-btn i{
  font-size:13px;
  pointer-events:none;
}

/* barra de progresso */
.music-timeline{
  position:relative;
  flex:1;
  height:18px;
  border-radius:999px;
  overflow:hidden;
  cursor:pointer;
  background:linear-gradient(90deg,#020617,#111827);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05),
    0 8px 18px rgba(15,23,42,.8);
}
.music-timeline-bg{
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    90deg,
    rgba(148,163,184,.25) 0,
    rgba(148,163,184,.25) 2px,
    transparent 2px,
    transparent 8px
  );
  opacity:.4;
}

/* janela do trecho */
.music-timeline-window{
  position:absolute;
  top:2px;
  bottom:2px;
  left:0;
  width:25%;
  border-radius:999px;
  background:linear-gradient(90deg,#a855f7,#ec4899,#f97316);
  box-shadow:
    0 0 0 1px rgba(15,23,42,.2),
    0 6px 14px rgba(236,72,153,.7);
  pointer-events:none;
}

/* playhead */
.music-timeline-playhead{
  position:absolute;
  top:50%;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#ffffff;
  border:2px solid #111827;
  box-shadow:
    0 0 0 2px rgba(59,130,246,.25),
    0 4px 10px rgba(15,23,42,.6);
  transform:translate(-50%, -50%);
  pointer-events:none;
}

/* tempos (início/fim/total) */
.music-times-row{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#444;
}

/* =========================================================
   MODAL DE MÚSICA – TAMANHO E BOTÕES
   ====================================================== */

#musicCutModal .modal-content.small{
  max-width:520px;
  width:100%;
}
@media (max-width:560px){
  #musicCutModal .modal-content.small{
    max-width:calc(100% - 32px);
  }
}

/* área de botões */
#musicCutModal .modal-actions{
  position:static !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  margin:18px 0 0 0 !important;
  padding:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}

/* base dos botões */
#musicCutModal .modal-actions .btn,
#musicCutModal .modal-actions .btn-ghost{
  flex:0 0 auto;
  height:38px;
  padding:0 18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}

/* Cancelar / Trocar música */
#musicCutModal .modal-actions .btn-ghost{
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  color:#111827;
}

/* Salvar trecho */
#musicCutModal .modal-actions .btn{
  background:#facc15;
  border:1px solid #eab308;
  color:#111827;
}

/* Ícone do botão Trocar música */
#musicCutModal #musicChangeBtn i{
  font-size:13px;
  margin-right:4px;
}

/* Botão mute/unmute ao lado da nota */
.music-mute-btn{
  margin-left:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel2);
  color:var(--ink);
  cursor:pointer;
  padding:0;
  outline:none;
  transition:background .15s ease, transform .12s ease, box-shadow .15s ease, opacity .15s ease;
}
.music-mute-btn i{
  font-size:13px;
  pointer-events:none;
}
.music-mute-btn:hover{
  background:#fff;
  box-shadow:0 2px 6px rgba(15,23,42,.18);
  transform:translateY(-1px);
  opacity:1;
}
.music-mute-btn:active{
  transform:translateY(0);
  box-shadow:none;
}

/* =========================================================
   OVERRIDES ESPECÍFICOS DO TEMA ESCURO
   ====================================================== */

/* selo de nota mais escuro */
body:not(.theme-light) .player-rating-badge{
  background:#1f2937;
  border-color:#374151;
  color:#e5e7eb;
}

/* botão editar / música / gifs */
body:not(.theme-light) .edit-btn{
  background:var(--panel2);
  border-color:var(--line);
  color:#e5e7eb;
}
body:not(.theme-light) .edit-btn:hover{
  background:#020617;
  color:#f9fafb;
}

/* strip de thumbs no card do player */
body:not(.theme-light) .player-gifs__thumbs{
  background:#020617;
  box-shadow:0 8px 18px rgba(0,0,0,.55);
}

/* mini cards do panorama na sala / temporada */
body:not(.theme-light) .mini{
  background:#020617;
  border-color:#1f2933;
}
body:not(.theme-light) .mini .badge{
  background:#111827;
  border-color:#374151;
  color:#e5e7eb;
}

/* tabs do painel inferior */
body:not(.theme-light) .panel .tab{
  background:#020617;
  border-color:#1f2933;
  color:#e5e7eb;
}
body:not(.theme-light) .panel .tab.is-active{
  background:linear-gradient(90deg,#fbbf24,#78350f);
  border-color:#facc15;
  color:#111827;
}

/* chips de XP (pontos, progresso, pontos na semana) */
body:not(.theme-light) .xp-pill{
  background:#020617;
  border-color:#1f2933;
  color:#e5e7eb;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}
body:not(.theme-light) .xp-pill strong{
  color:#f9fafb;
}

/* pílula de nível atual – ajustes de contraste */
body:not(.theme-light) .xp-pill.level.ferro{
  background:rgba(55,65,81,.35);
}
body:not(.theme-light) .xp-pill.level.bronze{
  background:rgba(120,53,15,.45);
}
body:not(.theme-light) .xp-pill.level.prata{
  background:rgba(148,163,184,.25);
}
body:not(.theme-light) .xp-pill.level.ouro{
  background:rgba(180,83,9,.45);
}
body:not(.theme-light) .xp-pill.level.platina{
  background:rgba(37,99,235,.35);
}
body:not(.theme-light) .xp-pill.level.diamante{
  background:rgba(59,130,246,.4);
}
body:not(.theme-light) .xp-pill.level.legendary{
  background:rgba(202,138,4,.45);
}

/* stat cards */
body:not(.theme-light) .stat-card{
  background:#020617;
  border-color:#1f2933;
}
body:not(.theme-light) .bar{
  background:#020617;
  border-color:#1f2933;
}
body:not(.theme-light) .bar i{
  background:#4b5563;
}
body:not(.theme-light) .stat-title{
  color:#e5e7eb;
}

/* placeholder "Em breve" na aba títulos */
body:not(.theme-light) .placeholder{
  color:#9ca3af;
}

/* strip do modal de gifs */
body:not(.theme-light) .edit-gif-strip{
  background:#020617;
  box-shadow:0 8px 18px rgba(0,0,0,.55);
}

/* modal de música – textos e botões */
body:not(.theme-light) .music-times-row{
  color:#e5e7eb;
}
body:not(.theme-light) #musicCutModal .modal-actions .btn-ghost{
  background:#020617;
  border-color:#1f2933;
  color:#e5e7eb;
}
body:not(.theme-light) #musicCutModal .modal-actions .btn{
  background:#facc15;
  border-color:#eab308;
  color:#111827;
}

/* botão mute da música */
body:not(.theme-light) .music-mute-btn{
  background:#020617;
  border-color:#1f2933;
  color:#e5e7eb;
}
body:not(.theme-light) .music-mute-btn:hover{
  background:#111827;
}