/* ============================================================
   COMPONENTS.CSS — extracted from index.html
   ============================================================ */

/* ============================================================
   FALLBACK / ERROR SCREENS
   ============================================================ */
#screen-error{background:var(--BK);}
.error-icon{font-size:4rem;}
.error-boundary-screen{
  position:fixed;top:0;right:0;bottom:0;left:0;background:var(--BK);z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:24px;
}
.opp-left-banner{
  background:rgba(255,45,45,.15);border:2px solid rgba(255,45,45,.3);
  border-radius:14px;padding:16px 24px;text-align:center;
  font-family:'Luckiest Guy',sans-serif;color:var(--R);font-size:1.2rem;letter-spacing:1px;
}


/* ============================================================
   MASCOT / COIN ICON — shared background image assets
   ============================================================ */
.bark-mascot-img{
  background-image:url("../assets/logo/mascot.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:inline-block;
  flex:none;
  border-radius:50%;
}
.bark-coin-icon{
  background-image:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 35%),
    url("../assets/icons/06_bark_coin.webp");
  background-size: 60% 60%, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border-radius:50%;
  display:inline-block;
  flex:none;
  box-sizing:border-box;
  border:3px solid #FFD24A;
  box-shadow:
    0 0 0 2px #B8860B,
    0 0 14px 2px rgba(255,200,60,.65),
    inset 0 0 10px rgba(255,240,200,.5),
    inset 0 -4px 8px rgba(120,60,0,.35);
  background-color:#3a2a0a;
  position:relative;
}
.bark-coin-icon::after{
  content:'';
  position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(135deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,180,0,.25) 100%);
  pointer-events:none;
}


/* ============================================================
   UTILITY CLASSES — extracted from former inline style="" attributes
   ============================================================ */

.u-93b8ea {
  display:none;
}

.u-d9cbab {
  font-size:3rem;
}

.u-35124f {
  color:var(--R);
}

.u-cdaa18 {
  display:flex;
}

.u-3e3665 {
  width:96px;
  height:96px;
  animation:mic-bounce 1s ease-in-out infinite;
}

.u-3ff7ef {
  font-size:clamp(2.2rem,10vw,3.8rem);
}

.u-d9b2ab {
  display:none;
  width:100%;
  max-width:320px;
}

.u-b497fb {
  width:auto;
  padding:10px 16px;
  margin-top:0;
}

.u-f21cc3 {
  text-align:center;
  margin:8px 0;
  font-size:.74rem;
  color:rgba(255,255,255,.3);
  font-weight:800;
}

.u-59cfc7 {
  font-size:.68rem;
  opacity:.25;
  margin-top:6px;
}

.u-d8fbc8 {
  width:32px;
  height:32px;
  animation:title-pulse 2s ease-in-out infinite;
}

.u-299542 {
  width:18px;
  height:18px;
  font-size:0;
}

.u-27955d {
  font-family:'Luckiest Guy',sans-serif;
  font-size:.5rem;
  letter-spacing:.5px;
  padding:1px 6px;
  border-radius:20px;
  background:rgba(255,230,0,.15);
  color:var(--Y);
  border:1px solid rgba(255,230,0,.3);
  white-space:nowrap;
  margin-left:2px;
}

.u-abc799 {
  display:flex;
  align-items:center;
  gap:9px;
}

.u-8ea59b {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--G);
  box-shadow:0 0 5px var(--G);
  display:inline-block;
  animation:live-pulse 1.4s ease-in-out infinite;
}

.u-7e692f {
  font-size:.9rem;
}

.u-803b2b {
  margin-top:5px;
}

.u-024922 {
  border-radius:16px;
}

.u-14a77e {
  --acc:var(--B);
}

.u-864057 {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--G);
  box-shadow:0 0 6px var(--G);
  margin-right:4px;
}

.u-07e748 {
  color:rgba(255,255,255,.3);
}

.u-1bb63c {
  background:var(--panel);
  border:1.5px solid var(--panel-bd);
  border-radius:16px;
  padding:12px;
}

.u-7f0e27 {
  text-align:center;
  padding:16px;
  font-size:.74rem;
  color:rgba(255,255,255,.3);
  font-weight:800;
}

.u-c6665e {
  font-family:'Luckiest Guy',sans-serif;
  font-size:.64rem;
  letter-spacing:2px;
  color:var(--G);
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-bottom:6px;
}

.u-0f3b9c {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--G);
  box-shadow:0 0 8px var(--G);
  display:inline-block;
  animation:live-pulse 1.4s ease-in-out infinite;
}

.u-9c3517 {
  font-family:'Luckiest Guy',sans-serif;
  font-size:clamp(1.6rem,3.5vw,2.4rem);
  color:#fff;
  letter-spacing:.5px;
  margin-bottom:4px;
  line-height:1.1;
}

.u-ee0f0d {
  font-size:.8rem;
  color:rgba(255,255,255,.45);
  font-weight:800;
}

.u-bd88b0 {
  margin-top:12px;
  font-size:.68rem;
  color:rgba(255,255,255,.25);
  font-weight:800;
}

.u-874994 {
  flex-direction:row;
  align-items:center;
  gap:14px;
  padding:14px 18px;
}

.u-ba2c5c {
  font-size:2rem;
}

.u-d5e8c5 {
  flex:1;
}

.u-8f2652 {
  font-family:'Luckiest Guy',sans-serif;
  font-size:.96rem;
  color:#fff;
}

.u-06e274 {
  font-size:.68rem;
  color:rgba(255,255,255,.38);
  font-weight:800;
}

.u-08a0ed {
  text-align:right;
}

.u-560773 {
  font-family:'Luckiest Guy',sans-serif;
  font-size:1.3rem;
  color:var(--Y);
}

.u-da7fb1 {
  font-size:.58rem;
  color:rgba(255,255,255,.28);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.u-725461 {
  text-align:center;
  padding:18px;
  font-size:.72rem;
  color:rgba(255,255,255,.28);
  font-weight:800;
}

.u-cd1d67 {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.u-316e6a {
  --acc:var(--Y);
}

.u-f4e330 {
  margin-top:14px;
}

.u-1e7086 {
  color:rgba(255,255,255,.3);
  font-size:.72rem;
}

.u-c896c4 {
  flex:1;
  min-width:0;
}

.u-519cc5 {
  font-family:'Luckiest Guy',sans-serif;
  font-size:1.25rem;
  letter-spacing:.5px;
  color:#fff;
}

.u-bc4adf {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  flex-wrap:wrap;
}

.u-86237e {
  margin-top:7px;
}

.u-5499ee {
  margin-bottom:18px;
}

.u-30193c {
  color:var(--G);
}

.u-fe679d {
  color:var(--Y);
}

.u-56ffd6 {
  color:var(--B);
}

.u-63065f {
  color:var(--P);
}

.u-76ab2c {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:9px;
}

.u-222ad8 {
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,230,0,.18);
  border-radius:12px;
  padding:12px;
  text-align:center;
}

.u-40a550 {
  font-size:1.4rem;
}

.u-9e08c0 {
  font-family:'Luckiest Guy',sans-serif;
  font-size:.68rem;
  margin-top:4px;
  color:var(--Y);
}

.u-b66bb8 {
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.07);
  border-radius:12px;
  padding:12px;
  text-align:center;
  opacity:.35;
}

.u-1e95ca {
  font-family:'Luckiest Guy',sans-serif;
  font-size:.68rem;
  margin-top:4px;
  color:rgba(255,255,255,.5);
}

.u-15d29c {
  font-size:.66rem;
  color:rgba(255,255,255,.28);
  font-weight:800;
  text-align:center;
}

.u-e4def0 {
  display:flex;
  flex-direction:column;
  gap:7px;
}

.u-112b16 {
  grid-column:1/-1;
}

.u-3e7b9c {
  background:rgba(255,230,0,.12);
  color:var(--Y);
  border:1px solid rgba(255,230,0,.25);
}

.achievements-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(152px,1fr));
  gap:12px;
  margin-top:4px;
}
.achievement-card{
  border-radius:16px;padding:17px 13px;text-align:center;
  background:rgba(255,230,0,.07);border:1.5px solid rgba(255,230,0,.25);
  transition:border-color .2s,transform .2s;
}
.achievement-card:hover{transform:translateY(-2px);}
.achievement-card.locked{
  background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.07);
  opacity:.45;
}
.achievement-card.locked:hover{border-color:rgba(255,255,255,.14);}
.achievement-icon{width:42px;height:42px;margin:0 auto;display:flex;align-items:center;justify-content:center;}
.achievement-icon img{width:100%;height:100%;object-fit:contain;}
.achievement-card.locked .achievement-icon img{filter:grayscale(1);}
.achievement-name{
  font-family:'Luckiest Guy',sans-serif;font-size:.8rem;margin-top:6px;color:var(--Y);
}
.achievement-card.locked .achievement-name{color:rgba(255,255,255,.5);}
.achievement-desc{font-size:.62rem;color:rgba(255,255,255,.3);font-weight:800;margin-top:3px;}
.achievement-badge{
  font-size:.62rem;border-radius:7px;padding:3px 7px;margin-top:7px;font-weight:900;
  display:inline-block;
  background:rgba(0,255,135,.1);color:var(--G);
}
.achievement-card.locked .achievement-badge{background:rgba(255,255,255,.05);color:rgba(255,255,255,.28);}

.u-b8ac73 {
  font-size:.76rem;
  color:rgba(255,255,255,.25);
  font-weight:800;
  margin-top:8px;
}

.u-d47e8f {
  top:8%;
  left:14%;
  width:6px;
  height:6px;
  animation-delay:0s;
}

.u-237a2a {
  top:18%;
  left:82%;
  width:8px;
  height:8px;
  animation-delay:.5s;
}

.u-faf510 {
  top:60%;
  left:6%;
  width:5px;
  height:5px;
  animation-delay:1.1s;
}

.u-8cb56e {
  top:70%;
  left:90%;
  width:7px;
  height:7px;
  animation-delay:1.6s;
}

.u-527431 {
  top:40%;
  left:50%;
  width:5px;
  height:5px;
  animation-delay:2.1s;
}

.u-41012e {
  top:28%;
  left:35%;
  width:4px;
  height:4px;
  animation-delay:2.6s;
}

.u-35f456 {
  top:50%;
  left:75%;
  width:6px;
  height:6px;
  animation-delay:1.9s;
}

.u-12dd48 {
  width:100%;
  height:100%;
}

.u-539b04 {
  text-align:center;
}

.u-cd0692 {
  color:#fff;
  text-shadow:3px 3px 0 rgba(0,0,0,.4);
}

.u-e47ba2 {
  font-size:.72rem;
  color:rgba(255,255,255,.5);
  font-weight:800;
  margin-top:3px;
}

.u-e2ab9d {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.u-bd9259 {
  width:34px;
  height:34px;
  flex:none;
}

.u-3c4976 {
  color:var(--Y);
  text-shadow:3px 3px 0 var(--R);
}

.u-a008b8 {
  font-size:.72rem;
  color:rgba(255,230,0,.7);
  font-weight:800;
  margin-top:3px;
}

.u-96ecf5 {
  font-family:'Luckiest Guy',sans-serif;
  font-size:1.1rem;
  color:var(--Y);
}

.u-7a5c14 {
  font-size:.82rem;
  color:rgba(255,255,255,.5);
  font-weight:800;
}

.u-226b0a {
  flex:1;
  overflow-y:auto;
  padding:0;
  margin-top:14px;
}

.u-bf1de2 {
  max-width:680px;
  width:100%;
  margin:0 auto;
  padding:0;
}

.u-06d51c {
  font-size:1.5rem;
}

.u-78f6f2 {
  margin-top:12px;
}

.u-58aba5 {
  cursor:pointer;
}

.u-6bcf4c {
  flex:1;
  border-radius:0;
  border:none;
  background:transparent;
  border-bottom:none;
}

.u-d72ebd {
  text-align:center;
  padding:20px 0;
}

.u-7cc7a8 {
  font-size:.74rem;
  color:rgba(255,255,255,.22);
  font-weight:800;
  margin-top:4px;
}

.u-d79ce2 {
  margin-top:8px;
}

.u-bb680e {
  margin-top:4px;
}

.u-3543ea {
  display:flex;
  align-items:center;
  justify-content:center;
}

.u-494ee8 {
  width:46px;
  height:46px;
}

.u-1efd74 {
  margin-top:16px;
}

.u-0c5a39 {
  display:flex;
  gap:24px;
  margin-top:8px;
  align-items:center;
}

.u-6d38a5 {
  font-size:2.5rem;
  margin-bottom:4px;
  /* fixed circle so an uploaded photo can't blow up to full width next to an emoji opponent */
  width:84px;height:84px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}

.u-1ebab3 {
  margin:4px 0;
}

.u-438a2c {
  font-size:.9rem;
  padding:12px 22px;
}

.u-814c58 {
  font-size:.82rem;
  margin-top:6px;
}

.u-acd9fb {
  display:none;
  max-width:300px;
  text-align:center;
}

.u-596f14 {
  font-size:2rem;
  margin-bottom:8px;
}

.u-4b2db3 {
  color:#ffaa44;
}

.u-a2c369 {
  font-size:2rem;
  margin-bottom:6px;
}

.u-c8c726 {
  color:#ff8080;
}

.u-9fa694 {
  font-size:.78rem;
  color:rgba(255,255,255,.45);
  margin-top:6px;
}

.u-92d173 {
  margin-top:10px;
}

.u-3d6ebb {
  font-size:.82rem;
  margin-top:4px;
}

.u-cd1cfe {
  font-size:.68rem;
  opacity:.22;
  color:#fff;
  font-weight:800;
}

.u-3ec9da {
  gap:8px;
}

.u-daf9f0 {
  height:140px;
  width:44px;
}

.u-cae874 {
  font-size:.56rem;
  margin-top:3px;
}

.u-e4245f {
  position:relative;
  z-index:3;
}

.u-ef2343 {
  display:none;
  margin-top:12px;
}

.u-ea655f {
  color:rgba(255,100,100,.7);
  font-size:.8rem;
}

.u-ff6eee {
  margin-top:6px;
}

.u-bd604b {
  display:flex;
  gap:10px;
  margin-top:4px;
}

.u-67e48d {
  font-size:3.5rem;
}

.u-2d050a {
  display:none;
  margin-top:8px;
}

.u-3cf857 {
  padding:6px 14px;
  font-size:.82rem;
}

.u-4ca747 {
  display:flex;
  align-items:center;
  gap:8px;
}

.u-6386b3 {
  width:24px;
  height:24px;
}

.u-4e0b25 {
  width:100%;
  flex:1;
  overflow-y:auto;
}

.u-923533 {
  font-size:.82rem;
  color:rgba(255,255,255,.5);
  font-weight:800;
  margin-left:4px;
}

/* ============================================================
   BARK AI STATUS BADGE — real-time bark-vs-not-a-bark indicator
   (js/bark-ai.js toggles the is-bark / not-bark classes)
   ============================================================ */
.bark-ai-status {
  margin: 6px auto;
  padding: 4px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .85rem;
  width: fit-content;
  text-align: center;
  transition: background .15s ease, color .15s ease;
}
.bark-ai-status.is-bark {
  background: rgba(0,255,135,.18);
  color: #00FF87;
  border: 1px solid rgba(0,255,135,.4);
}
.bark-ai-status.not-bark {
  background: rgba(255,45,45,.18);
  color: #FF6B6B;
  border: 1px solid rgba(255,45,45,.4);
}