/* ============================================================
   ICONS.CSS — icon system that replaced every emoji (js/icons.js)
   ============================================================ */
.ico{
  width:1.05em; height:1.05em; display:inline-block; vertical-align:-.16em;
  flex-shrink:0; overflow:visible;
}
.ico-xl{ width:1em; height:1em; vertical-align:middle; stroke-width:1.8; filter:drop-shadow(0 4px 14px rgba(0,0,0,.45)); }
.ico-ok{ color:#00FF87; }
.ico-gold{ color:#FFD54A; }

/* painted game icons used inline next to text */
.gico{
  width:1.3em; height:1.3em; display:inline-block; vertical-align:-.3em;
  object-fit:contain; flex-shrink:0;
}
.gico-head{ width:30px; height:30px; vertical-align:middle; }
.rank-ico{ width:1.35em; height:1.35em; vertical-align:-.34em; }
.rank-ico-lg{ width:1em; height:1em; }

/* #1 / #2 / #3 medals */
.medal{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.55em; height:1.55em; border-radius:50%;
  font-family:'Luckiest Guy', 'Rajdhani', sans-serif; font-size:.9em; line-height:1; color:#1a1300;
  vertical-align:middle; flex-shrink:0;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.45);
  border:2px solid rgba(0,0,0,.55);
}
.medal-1{ background:radial-gradient(circle at 35% 30%, #fff6b0, #FFD54A 45%, #c98f00); }
.medal-2{ background:radial-gradient(circle at 35% 30%, #ffffff, #cfd6e2 45%, #8a93a3); }
.medal-3{ background:radial-gradient(circle at 35% 30%, #ffd9b0, #d38a4a 45%, #8a4f1c); color:#1f0f00; }
.podium-stand .medal{ font-size:1.4rem; }
.lb-rank .medal, .lb-preview-rank .medal, .daily-rank .medal{ font-size:.8rem; }

/* live / online dot */
.live-dot{
  display:inline-block; width:.6em; height:.6em; border-radius:50%; background:#00FF87;
  box-shadow:0 0 0 2px rgba(0,255,135,.2), 0 0 8px #00FF87; margin-right:.4em; vertical-align:.05em;
  animation:live-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes live-dot-pulse{ 50%{ box-shadow:0 0 0 4px rgba(0,255,135,.08), 0 0 12px #00FF87; } }

/* dog headshot avatars (replaced the animal emoji) */
.av-dog{ width:100%; height:100%; display:block; object-fit:cover; border-radius:50%; }
.lb-preview-avatar{ width:28px; height:28px; }
.daily-avatar{ width:28px; height:28px; flex-shrink:0; }
.avatar-opt{ padding:3px; }
.avatar-opt .av-dog{ border-radius:10px; }
.room-row-icon .av-dog{ border-radius:10px; }

/* buttons: keep icon + label on one line, centred */
button .ico, .btn .ico{ margin-right:.1em; }
.pw-eye .ico{ width:1.15em; height:1.15em; }

/* ---------- landscape gate (phones held upright) — js/install.js ---------- */
#rotate-gate{
  position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center;
  padding:24px; background:radial-gradient(ellipse at 50% 30%, #1a2350 0%, #070a16 70%); color:#fff; text-align:center;
}
#rotate-gate .rg-card{ max-width:320px; display:flex; flex-direction:column; align-items:center; gap:14px; }
#rotate-gate .rg-phone{ width:96px; height:96px; color:#FFE600; filter:drop-shadow(0 0 16px rgba(255,230,0,.45));
  animation:rg-turn 2.2s ease-in-out infinite; }
@keyframes rg-turn{ 0%,20%{ transform:rotate(0); } 50%,80%{ transform:rotate(-90deg); } 100%{ transform:rotate(0); } }
#rotate-gate .rg-title{ font-family:'Luckiest Guy',sans-serif; font-size:2rem; color:#FFE600; letter-spacing:1px; text-shadow:3px 3px 0 #7a1010; }
#rotate-gate .rg-sub{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.05rem; color:rgba(255,255,255,.8); line-height:1.35; }
#rotate-gate .rg-ios{ font-size:.95rem; color:rgba(255,255,255,.65); }
#rotate-gate .rg-btn{
  margin-top:8px; width:100%; padding:16px 20px; border-radius:16px; cursor:pointer;
  font-family:'Luckiest Guy',sans-serif; font-size:1.25rem; letter-spacing:1px; color:#03301a;
  background:linear-gradient(180deg, #8dffc6 0%, #00ff87 45%, #00c463 100%); border:2px solid #044d29;
  box-shadow:0 5px 0 #067a3f, 0 10px 20px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.7);
}
#rotate-gate .rg-btn:active{ transform:translateY(4px); box-shadow:0 1px 0 #067a3f, inset 0 2px 0 rgba(255,255,255,.4); }

/* rank number badges (Codex art) */
.rank-badge{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0; vertical-align:middle; }
.rank-badge img{ width:100%; height:100%; object-fit:contain; display:block; }
.rank-badge b{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Oswald','Rajdhani',sans-serif; font-weight:700; font-size:.95em; color:#F4F7FF; text-shadow:0 1px 2px #000; }
.podium-stand .rank-badge{ width:56px; height:56px; }
.daily-prize-pill .medal{ font-size:.75rem; }