/* Top stats bar (Matt, 2026-10-10): one even row of glowing numbers, labels underneath on phones. */
body { padding-top: 34px; }
#tanukade-live-players {
  position: fixed; inset: 0 0 auto; z-index: 40; height: 34px;
  display: flex; align-items: center; justify-content: flex-end; gap: 0;
  padding: 0 max(24px, calc((100vw - 1304px) / 2));
  box-sizing: border-box; color: #8f9e8e;
  background:
    radial-gradient(120% 180% at 50% -60%, #d6ff6214, transparent 60%),
    linear-gradient(180deg, #0e140f, #090d0a);
  border-bottom: 1px solid #1f2a20;
  box-shadow: 0 1px 0 #000, 0 8px 24px #0006;
  font: 700 10px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 1.6px; text-transform: uppercase;
}
#tanukade-live-players::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #d6ff6266 30%, #d6ff62aa 50%, #d6ff6266 70%, transparent);
}
.tlp-metric { position: relative; display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 0 16px; }
.tlp-metric + .tlp-metric::before, .tlp-divider + .tlp-metric::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 16px; transform: translateY(-50%);
  background: linear-gradient(180deg, transparent, #3b4d3d, transparent);
}
.tlp-divider { display: none; }
#tanukade-live-players .tlp-time { padding-right: 0; }
.tlp-label-short { display: none; }
#tanukade-live-players .tlp-dot {
  position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #637166;
}
#tanukade-live-players[data-state="online"] .tlp-dot {
  background: #d6ff62; box-shadow: 0 0 8px #d6ff62aa;
}
#tanukade-live-players[data-state="online"] .tlp-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid #d6ff62;
  animation: tlp-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes tlp-ping { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #tanukade-live-players .tlp-dot::after { animation: none; display: none; } }
#tanukade-live-players .tlp-count {
  min-width: 2ch; color: #eef4e6; font-size: 13px;
  font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .2px; white-space: nowrap;
}
#tanukade-live-players .tlp-unit { font-size: .7em; font-weight: 700; margin-left: 1px; opacity: .8; text-transform: none; }
#tanukade-live-players[data-state="online"] .tlp-live .tlp-count,
#tanukade-live-players .tlp-daily[data-state="online"] .tlp-count,
#tanukade-live-players .tlp-all-time[data-state="online"] .tlp-count,
#tanukade-live-players .tlp-time[data-state="online"] .tlp-count { color: #d6ff62; text-shadow: 0 0 12px #d6ff6255; }
#tanukade-live-players .tlp-daily[data-state="unavailable"] .tlp-count,
#tanukade-live-players .tlp-all-time[data-state="unavailable"] .tlp-count,
#tanukade-live-players .tlp-time[data-state="unavailable"] .tlp-count,
#tanukade-live-players[data-state="unavailable"] .tlp-live .tlp-count {
  font-size: 10px; font-weight: 500; color: #a8b6a7; text-transform: none; text-shadow: none;
}
.tlp-daily, .tlp-all-time, .tlp-time { cursor: help; }
.tlp-metric:focus-visible { outline: 1px solid #d6ff62; outline-offset: 2px; border-radius: 4px; }
.tlp-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Phones and tablets: four equal columns across the full width, number on top, label under it. */
@media (max-width: 1099px) {
  body:not(.tchat-gaming) #tanukade-live-players {
    height: 52px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center; padding: 0 max(4px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left));
    font-size: 8.5px; letter-spacing: 1.4px;
  }
  body:not(.tchat-gaming) #tanukade-live-players .tlp-metric {
    height: 100%; padding: 0 2px; flex-direction: column-reverse; align-items: center; justify-content: center;
    gap: 5px; line-height: 1;
  }
  body:not(.tchat-gaming) #tanukade-live-players .tlp-metric::before { height: 24px; }
  body:not(.tchat-gaming) #tanukade-live-players .tlp-label-full { display: none; }
  body:not(.tchat-gaming) #tanukade-live-players .tlp-label-short { display: inline; white-space: nowrap; }
  body:not(.tchat-gaming) #tanukade-live-players .tlp-count { min-width: 0; font-size: 17px; letter-spacing: 0; }
  /* The live dot rides in front of the live number. */
  body:not(.tchat-gaming) #tanukade-live-players .tlp-live { display: grid; grid-template-columns: auto auto; grid-template-areas: "dot count" "label label"; column-gap: 6px; row-gap: 5px; align-content: center; justify-content: center; justify-items: center; }
  body:not(.tchat-gaming) #tanukade-live-players .tlp-live .tlp-dot { grid-area: dot; display: block; width: 6px; height: 6px; }
  body:not(.tchat-gaming) #tanukade-live-players .tlp-live .tlp-count { grid-area: count; }
  body:not(.tchat-gaming) #tanukade-live-players .tlp-live .tlp-label-short { grid-area: label; }
  body:not(.tchat-gaming) #tanukade-live-players .tlp-daily[data-state="unavailable"] .tlp-count,
  body:not(.tchat-gaming) #tanukade-live-players .tlp-all-time[data-state="unavailable"] .tlp-count,
  body:not(.tchat-gaming) #tanukade-live-players .tlp-time[data-state="unavailable"] .tlp-count,
  body:not(.tchat-gaming) #tanukade-live-players[data-state="unavailable"] .tlp-live .tlp-count { font-size: 9px; }
}
/* Pages with the yellow chat button in the bar keep its space on the left; the numbers shrink to fit beside it. */
@media (max-width: 1099px) {
  body:not(.tchat-gaming):not(.tanukade-home-ready):has(#tanukade-chat-launcher) #tanukade-live-players { padding-left: 168px; padding-right: 4px; letter-spacing: .6px; font-size: 7.5px; }
  body:not(.tchat-gaming):not(.tanukade-home-ready):has(#tanukade-chat-launcher) #tanukade-live-players .tlp-count { font-size: 12px; }
  body:not(.tchat-gaming):not(.tanukade-home-ready):has(#tanukade-chat-launcher) #tanukade-live-players .tlp-metric::before { height: 20px; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  body:not(.tchat-gaming):not(.tanukade-home-ready):has(#tanukade-chat-launcher) #tanukade-live-players { padding-left: 184px; font-size: 8.5px; letter-spacing: 1.4px; }
  body:not(.tchat-gaming):not(.tanukade-home-ready):has(#tanukade-chat-launcher) #tanukade-live-players .tlp-count { font-size: 17px; }
}
@media (max-width: 360px) {
  body:not(.tchat-gaming) #tanukade-live-players { font-size: 7.5px; letter-spacing: 1px; }
  body:not(.tchat-gaming) #tanukade-live-players .tlp-count { font-size: 15px; }
}

body.tchat-gaming #tanukade-live-players {
  height: 28px; z-index: 102; display: flex; justify-content: flex-end; gap: 10px;
  padding: 0 10px; font: 600 10px/1 Arial, Helvetica, sans-serif; letter-spacing: .55px;
}
body.tchat-gaming #tanukade-live-players .tlp-divider,
body.tchat-gaming #tanukade-live-players .tlp-daily,
body.tchat-gaming #tanukade-live-players .tlp-all-time { display: none; }
body.tchat-gaming #tanukade-live-players .tlp-live .tlp-dot,
body.tchat-gaming #tanukade-live-players .tlp-label-full { display: none; }
body.tchat-gaming #tanukade-live-players .tlp-label-short { display: inline; }
body.tchat-gaming #tanukade-live-players .tlp-metric { flex-direction: row; align-items: center; gap: 4px; }
body.tchat-gaming #tanukade-live-players .tlp-count { min-width: 0; font: 800 11px/1 Arial, Helvetica, sans-serif; }
body.tchat-gaming #tanukade-live-players .tlp-metric { padding: 0; }
body.tchat-gaming #tanukade-live-players .tlp-metric::before { display: none; }

/* Per-game presence stays compact beside the game title. */
.tanukade-game-live{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;white-space:nowrap;color:#bfd7a7;background:#d6ff620a;border:1px solid #6a845947;border-radius:20px;padding:5px 8px;font:600 11px/1.2 system-ui,sans-serif;letter-spacing:0;text-transform:none}
.tanukade-game-live:before{content:"";width:5px;height:5px;flex:none;border-radius:50%;background:#7e8d78}
.tanukade-game-live[data-state="online"]:before{background:#d6ff62}
.player-title>.tanukade-game-live{margin-left:auto;margin-right:8px}
@media(max-width:600px){.tanukade-game-live{font-size:10px;padding:4px 6px}.game-shell-header{gap:7px}.game-shell-header h1{min-width:0}}

/* Pages with a fixed header (Study Tanuki) sit below the bar instead of under it. */
body:not(.tchat-gaming):has(> #tanukade-live-players) .site-header { top: 34px; }
@media (max-width: 1099px) { body:not(.tchat-gaming):has(> #tanukade-live-players) .site-header { top: 52px; } }