@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600&display=swap');

:root{
  --ink:#141210;
  --ink-2:#1c1712;
  --paper:#f7ecd3;
  --paper-2:#efe0ba;
  --wood:#6b4326;
  --wood-dark:#3c2414;
  --orange:#ffa400;
  --orange-2:#ff8a1e;
  --orange-deep:#e0680a;
  --line:#2a2420;
  --green:#4c7a3b;
  --ia:#2f7dff;
  --tint:#e0680a;
  --shadow: 0 30px 60px -20px rgba(0,0,0,.55);
}

.ia{
  color:var(--ia) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.3), 0 0 14px rgba(47,125,255,.6);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  min-height:100dvh;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(255,164,0,.16), transparent 55%),
    radial-gradient(ellipse at 90% 0%, rgba(255,138,30,.12), transparent 45%),
    var(--ink);
  color:var(--paper);
  font-family:'Montserrat',sans-serif;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

img{max-width:100%;display:block;}

.circuit-bg{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:
    radial-gradient(circle at 8% 20%, rgba(255,164,0,.35) 0 3px, transparent 4px),
    radial-gradient(circle at 92% 30%, rgba(255,164,0,.25) 0 3px, transparent 4px),
    radial-gradient(circle at 15% 85%, rgba(255,164,0,.25) 0 3px, transparent 4px),
    radial-gradient(circle at 85% 90%, rgba(255,164,0,.3) 0 3px, transparent 4px);
}

/* ---------- TOPBAR ---------- */
.topbar{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 16px;
  background:linear-gradient(180deg, rgba(20,18,16,.98), rgba(20,18,16,.9));
  border-bottom:2px solid var(--orange);
}
.brand{display:flex; align-items:center; gap:10px; min-width:0;}
.brand__badge{
  width:38px; height:38px; border-radius:10px; background:var(--paper);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  flex:none; border:2px solid var(--orange);
}
.brand__badge img{width:100%; height:100%; object-fit:contain;}
.brand__text{line-height:1; min-width:0;}
.brand__text .t1{
  font-family:'Bebas Neue',sans-serif; letter-spacing:.5px;
  font-size:19px; color:var(--paper); white-space:nowrap;
}
.brand__text .t1 b{color:var(--orange);}
.brand__text .t2{
  font-size:9.5px; letter-spacing:1.5px; color:var(--orange-2);
  text-transform:uppercase; font-weight:700;
}
.topbar__actions{display:flex; gap:8px; flex:none;}
.pill-btn{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:11px;
  letter-spacing:.5px; text-transform:uppercase;
  background:var(--ink-2); color:var(--paper);
  border:1.5px solid var(--orange); border-radius:999px;
  padding:8px 12px; cursor:pointer; white-space:nowrap;
  transition:transform .15s, background .15s;
}
.pill-btn:hover{background:var(--orange); color:var(--ink); transform:translateY(-1px);}
.pill-btn.solid{background:var(--orange); color:var(--ink);}
.pill-btn.solid:hover{background:var(--orange-2);}

/* ---------- STAGE ---------- */
.stage{
  position:relative; z-index:2;
  flex:1; min-height:0; overflow:hidden;
  display:flex;
}
.view{position:relative; width:100%; height:100%;}

.bunting{position:absolute; top:2px; left:0; right:0; display:flex; justify-content:center; pointer-events:none; z-index:3;}
.bunting__row{display:flex; gap:4px;}
.flag{width:20px; height:26px; clip-path:polygon(0 0,100% 0,50% 100%); opacity:.9;}
.flag:nth-child(6n+1){background:var(--orange);}
.flag:nth-child(6n+2){background:repeating-conic-gradient(#171412 0 90deg, #2c241d 0 180deg); background-size:8px 8px;}
.flag:nth-child(6n+3){background:var(--orange-2);}
.flag:nth-child(6n+4){background:repeating-linear-gradient(45deg,#171412 0 4px,#3a2f24 4px 8px);}
.flag:nth-child(6n+5){background:var(--orange-deep);}
.flag:nth-child(6n+6){background:repeating-conic-gradient(#171412 0 90deg, #2c241d 0 180deg); background-size:8px 8px;}

/* ---------- BROWSE VIEW ---------- */
.view--browse{overflow-y:auto; padding:34px 18px 40px;}
.browse__wrap{max-width:820px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center;}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--ink); color:var(--orange);
  font-weight:800; font-size:11.5px; letter-spacing:1px;
  padding:6px 12px; border-radius:999px; text-transform:uppercase;
  border:1px solid var(--orange-2);
}
.hero{margin-top:10px;}
.hero__title{
  font-family:'Bebas Neue',sans-serif; font-size:clamp(30px,7vw,52px);
  line-height:1.05; margin:12px 0 8px; color:var(--paper);
}
.hero__title .accent{color:var(--orange);}
.hero__sub{font-size:14px; color:#d8c7a0; max-width:520px; margin:0 auto 22px; line-height:1.55;}

.linkbox,.searchbox{
  width:100%; max-width:560px; display:flex; align-items:center; gap:8px;
  background:rgba(247,236,211,.06); border:1.5px solid rgba(255,164,0,.35);
  border-radius:999px; padding:6px 6px 6px 16px; margin-bottom:12px;
  backdrop-filter:blur(8px);
}
.linkbox__icon,.searchbox__icon{font-size:15px; flex:none; opacity:.8;}
.linkbox input,.searchbox input{
  flex:1; background:transparent; border:none; outline:none; color:var(--paper);
  font-family:'Montserrat',sans-serif; font-size:14px; min-width:0; padding:8px 0;
}
.linkbox input::placeholder,.searchbox input::placeholder{color:#9a8b70;}

.status{min-height:18px; font-size:12.5px; color:var(--orange-2); margin:2px 0 18px;}
.status.error{color:#ff6b5a;}

.section-label{
  font-family:'Bebas Neue',sans-serif; letter-spacing:1px; font-size:20px;
  color:var(--orange); margin:6px 0 14px; align-self:flex-start;
}

.song-grid{
  width:100%; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
.song-card{
  position:relative; border-radius:14px; overflow:hidden; cursor:pointer;
  background:var(--ink-2); border:1px solid rgba(255,164,0,.25);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  transition:transform .15s, border-color .15s;
  text-align:left;
}
.song-card:hover{transform:translateY(-3px); border-color:var(--orange);}
.song-card__thumb{width:100%; aspect-ratio:16/9; object-fit:cover; background:#000;}
.song-card__body{padding:10px 12px 12px;}
.song-card__title{font-size:13px; font-weight:700; color:var(--paper); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.song-card__artist{font-size:11px; color:var(--orange-2); margin-top:4px; text-transform:uppercase; letter-spacing:.5px;}
.song-card__play{
  position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%;
  background:rgba(20,18,16,.75); border:1.5px solid var(--orange); color:var(--orange);
  display:flex; align-items:center; justify-content:center; font-size:12px;
}

/* ---------- PLAYER VIEW ---------- */
/* :not([hidden]) é essencial aqui: sem isso, esta regra de display vence o
   [hidden] do HTML (mesma especificidade, CSS do autor por cima do UA) e a
   tela do player fica sempre "ligada" por baixo da busca. */
.view--player:not([hidden]){display:flex; flex-direction:column;}
.player__bg{
  position:absolute; inset:-30px; z-index:0;
  background-size:cover; background-position:center;
  filter:blur(38px) saturate(1.3) brightness(.55);
  transform:scale(1.15);
  transition:background-image .6s ease;
}
.player__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(20,18,16,.15), rgba(20,18,16,.55) 60%),
    linear-gradient(180deg, rgba(10,9,8,.15) 0%, rgba(10,9,8,.35) 45%, rgba(10,9,8,.92) 100%);
}

.player__top{
  position:relative; z-index:5; display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(10,9,8,.85), rgba(10,9,8,0));
}
.nav-arrow{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:rgba(20,18,16,.6); border:2px solid var(--orange);
  color:var(--orange); font-size:17px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s, background .15s;
}
.nav-arrow:hover{background:var(--orange); color:var(--ink); transform:scale(1.06);}

.back-btn{
  flex:none; display:flex; align-items:center; gap:6px;
  background:var(--ink-2); border:2px solid var(--orange);
  color:var(--orange); font-family:'Montserrat',sans-serif; font-weight:800;
  font-size:12.5px; text-transform:uppercase; letter-spacing:.5px;
  border-radius:999px; padding:9px 16px 9px 12px; cursor:pointer;
  transition:transform .15s, background .15s, color .15s;
}
.back-btn__icon{font-size:17px; line-height:1;}
.back-btn:hover{background:var(--orange); color:var(--ink); transform:translateY(-1px);}
.player__meta{flex:1; min-width:0; text-align:center;}
.player__title{font-family:'Bebas Neue',sans-serif; font-size:clamp(16px,3.4vw,22px); color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.player__artist{font-size:11px; color:var(--orange-2); text-transform:uppercase; letter-spacing:1px;}

.player__video{
  position:absolute; inset:0; z-index:1; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,164,0,.14), transparent 60%),
    var(--ink);
}
.player__video #ytplayer,
.player__video iframe{
  position:absolute; top:50%; left:50%;
  width:100vw; height:56.25vw; /* 16:9 based on width */
  min-width:177.78vh; min-height:100vh; /* 16:9 based on height */
  transform:translate(-50%,-50%);
}

.lyrics{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  height:clamp(140px,24vh,220px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:12px 20px; overflow:hidden; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,9,8,0), rgba(10,9,8,.55) 35%, rgba(10,9,8,.94) 100%);
}
.lyrics__lines, .lyrics__hint{pointer-events:auto;}
.lyrics__hint{font-size:13px; color:var(--orange-2); letter-spacing:.5px; display:flex; flex-direction:column; align-items:center; gap:10px; max-width:420px; text-align:center;}
.lyrics-fix__msg{font-size:12px; color:#d8c7a0; line-height:1.45;}
.lyrics-fix{display:flex; flex-direction:column; gap:8px; width:100%; max-width:300px;}
.lyrics-fix input{
  background:rgba(247,236,211,.08); border:1.5px solid rgba(255,164,0,.35); border-radius:999px;
  color:var(--paper); font-family:'Montserrat',sans-serif; font-size:13px; padding:8px 14px; outline:none;
}
.lyrics-fix input::placeholder{color:#9a8b70;}
.lyrics__line--plain{color:rgba(247,236,211,.75); transform:none;}
.lyrics__lines{
  width:100%; max-width:820px; max-height:100%; overflow-y:auto;
  display:flex; flex-direction:column; gap:8px; text-align:center;
  scrollbar-width:none; padding:50% 0;
}
.lyrics__lines::-webkit-scrollbar{display:none;}
.lyrics__line{
  font-family:'Bebas Neue',sans-serif; letter-spacing:.5px;
  font-size:clamp(15px,2.6vw,21px); line-height:1.25;
  color:rgba(247,236,211,.45);
  transition:color .3s ease, transform .3s ease;
  transform:scale(.92);
}
.lyrics__line.is-active{
  color:var(--orange);
  font-size:clamp(20px,3.6vw,30px);
  text-shadow:0 0 18px rgba(255,164,0,.55), 0 2px 4px rgba(0,0,0,.4);
  transform:scale(1);
}
.lyrics__line.is-past{color:rgba(247,236,211,.28);}

/* ---------- FULLSCREEN ---------- */
:fullscreen .topbar{opacity:.35;}
:fullscreen .view--browse{display:none;}

@media (max-width:640px){
  .brand__text .t1{font-size:16px;}
}