:root{color-scheme:dark;}

/*
  BWP Brainrot Overlay
  OBS Browser Source recommended size: 600 x 220
  - Canvas is transparent
  - Card is fully opaque with rounded corners
  - Countdown must tick locally (JS owns timing)
*/

html,body{
  margin:0;
  width:100%;
  height:100%;
  background:transparent;
  overflow:hidden;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Hide overlay completely when inactive */
body.hidden{display:none;}

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

.card{
  width:580px;
  height:200px;
  box-sizing:border-box;
  border-radius:22px;
  padding:14px 16px;

  /* Fully opaque for readability */
  background: rgb(var(--ps-panel-bg-rgb, 11 15 20) / var(--ps-panel-bg-alpha, 0.88));
  border:2px solid rgba(255,255,255,0.10);
  box-shadow:0 16px 45px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.05);

  display:flex;
  gap:14px;
  align-items:center;
}

.left{
  width:150px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tier{
  align-self:flex-start;
  font-weight:900;
  letter-spacing:1.1px;
  font-size:13px;
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.22);
  background: color-mix(in srgb, rgb(var(--ps-panel-bg-rgb, 20 26 34) / var(--ps-panel-bg-alpha, 0.88)) 78%, var(--ps-accent, #22c55e) 22%);
  text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,0.75);
}

.imgBox{
  width:150px;
  height:150px;
  border-radius:14px;
  overflow:hidden;
  background:#070a0f;
  border:1px solid rgba(255,255,255,0.14);
  display:flex;
  align-items:center;
  justify-content:center;
}

.imgBox img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,0.45));
}

.right{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.nameRow{
  display:flex;
  gap:10px;
  align-items:baseline;
  margin:0;
  min-width:0;
}

.id{
  opacity:0.95;
  font-weight:900;
  font-size:14px;
  text-shadow:0 2px 10px rgba(0,0,0,0.85);
}

.name{
  font-size:18px;
  font-weight:900;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 2px 10px rgba(0,0,0,0.85);
}

.meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-content:flex-start;
  margin:0;
}

.pill{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.20);
  background: color-mix(in srgb, rgb(var(--ps-panel-bg-rgb, 20 26 34) / var(--ps-panel-bg-alpha, 0.88)) 78%, var(--ps-accent, #22c55e) 22%);
  font-weight:800;
  font-size:12px;
  text-shadow:0 2px 10px rgba(0,0,0,0.75);
}

.hint{
  font-size:13px;
  opacity:0.98;
  text-shadow:0 2px 10px rgba(0,0,0,0.85);
}