:root {
  --pink: #ff4fa0;
  --yellow: #ffd23f;
  --cyan: #3ad1ff;
  --violet: #8f5bff;
  --mint: #4cffb0;
  --ink: #2b1846;
  --u: min(1vw, 0.5625vh); /* 1/100 of a 9:16 frame width */
  font-family: 'Nunito', 'Baloo 2', 'Segoe UI Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2a1352; color: #fff; }
body.chroma { background: #00ff00; }
.stage { position: fixed; inset: 0; }
.stage canvas { display: block; width: 100%; height: 100%; }

/* ---------- name tags ---------- */
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tag {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  transform-origin: 50% 100%; will-change: transform; white-space: nowrap;
}
.tag.off { display: none; }
.tag .row {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.4) calc(var(--u) * 1.6) calc(var(--u) * 0.4) calc(var(--u) * 0.4); border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); color: var(--ink); font-weight: 800; font-size: calc(var(--u) * 2.3);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
.tag .name { max-width: calc(var(--u) * 22); overflow: hidden; text-overflow: ellipsis; }
.tag.rank .row { background: linear-gradient(90deg, #fff6c9, #ffe27a); }
.tag .medal { font-size: calc(var(--u) * 2.1); padding: 0 calc(var(--u) * 1.2); border-radius: 6px; color: #3a2400; background: var(--yellow); }
.tag .medal.m2 { background: #dfe7ff; }
.tag .medal.m3 { background: #ffc49e; }
.tag .title { font-style: normal; font-weight: 900; font-size: calc(var(--u) * 1.9); padding: 0 calc(var(--u) * 1.2); border-radius: 6px; letter-spacing: 0.04em; }
.v-aura { background: #7cf7ff; color: #003b46; }
.v-neon { background: #ff4fd8; color: #fff; }
.v-fire { background: #ff8a00; color: #fff; }
.v-royal { background: linear-gradient(90deg, #ffd23f, #fff1a8); color: #4a3000; }

.avatar {
  --hue: 320;
  display: inline-grid; place-items: center; width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); border-radius: 50%; overflow: hidden;
  background: hsl(var(--hue) 80% 62%); color: #fff; font-weight: 900; font-size: calc(var(--u) * 2); flex: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.big { width: calc(var(--u) * 9); height: calc(var(--u) * 9); font-size: calc(var(--u) * 4); border: 3px solid #fff; }

/* ---------- HUD ---------- */
.hud { position: fixed; inset: 0; pointer-events: none; }
body.nohud .hud > :not(.banner):not(.big-text) { display: none; }
body.chroma .hud .title, body.chroma .hud .guide { display: none; }

.title {
  position: absolute; top: calc(var(--u) * 3); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(var(--u) * 2);
}
.title h1 {
  margin: 0; font-size: calc(var(--u) * 7.5); font-weight: 900; letter-spacing: 0.03em; white-space: nowrap;
  color: #fff; text-shadow: 0 4px 0 var(--pink), 0 0 18px rgba(255, 79, 160, 0.9);
}
.title h1 em { font-style: normal; color: var(--yellow); }
.title .spark { color: var(--yellow); font-size: calc(var(--u) * 5); animation: twinkle 1.2s infinite alternate; }

.energy {
  position: absolute; top: calc(var(--u) * 14); left: calc(var(--u) * 5); right: calc(var(--u) * 5);
}
.energy-label { font-weight: 900; font-size: calc(var(--u) * 3.4); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); display: flex; justify-content: space-between; }
.energy-track {
  margin-top: calc(var(--u) * 1); height: calc(var(--u) * 3.6); border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.25); border: 3px solid #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}
.energy-fill {
  width: 0; height: 100%; border-radius: 999px; transition: width 0.4s ease;
  background: linear-gradient(90deg, var(--mint), var(--cyan), var(--violet), var(--pink), var(--yellow));
  background-size: 200% 100%; animation: flow 3s linear infinite;
}

.top {
  position: absolute; top: calc(var(--u) * 24); right: calc(var(--u) * 3); width: calc(var(--u) * 46);
  padding: calc(var(--u) * 2); border-radius: calc(var(--u) * 3.5);
  background: rgba(255, 255, 255, 0.9); color: var(--ink); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
}
.top h2 { margin: 0 0 calc(var(--u) * 1); font-size: calc(var(--u) * 3.6); font-weight: 900; color: var(--pink); }
.top ol { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 1); }
.top li { display: flex; align-items: center; gap: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.7); font-weight: 800; }
.top li.empty { color: #8a7aa8; font-weight: 700; font-size: calc(var(--u) * 2.8); }
.top .pos { display: grid; place-items: center; width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%; background: var(--yellow); color: #4a3000; }
.top .r2 .pos { background: #dfe7ff; color: #2a3355; }
.top .r3 .pos { background: #ffc49e; color: #5a2a00; }
.top .avatar { width: calc(var(--u) * 5.5); height: calc(var(--u) * 5.5); font-size: calc(var(--u) * 2.6); }
.top .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .dia { color: #6b3fd1; white-space: nowrap; }

.guide {
  position: absolute; top: calc(var(--u) * 24); left: calc(var(--u) * 3); width: calc(var(--u) * 44);
  list-style: none; margin: 0; padding: calc(var(--u) * 2); border-radius: calc(var(--u) * 3.5);
  background: rgba(43, 24, 70, 0.72); border: 2px solid rgba(255, 255, 255, 0.5);
  display: grid; gap: calc(var(--u) * 0.6); font-size: calc(var(--u) * 2.4); font-weight: 700; line-height: 1.25;
}
.guide b { color: var(--yellow); }
.guide li.join b { color: var(--mint); }

.feed {
  position: absolute; left: calc(var(--u) * 3); bottom: calc(var(--u) * 26); width: calc(var(--u) * 62);
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: calc(var(--u) * 0.8);
}
.feed li {
  align-self: flex-start; max-width: 100%; padding: calc(var(--u) * 0.8) calc(var(--u) * 2); border-radius: 999px;
  background: rgba(255, 255, 255, 0.88); color: var(--ink); font-size: calc(var(--u) * 2.8); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: pop 0.3s ease; transition: opacity 0.6s;
}
.feed li b { color: var(--pink); }
.feed li.f-join b { color: #0aa36b; }
.feed li.f-follow b, .feed li.f-share b { color: var(--violet); }
.feed li.old { opacity: 0; }

.banner {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(0.6); opacity: 0;
  min-width: calc(var(--u) * 70); max-width: calc(var(--u) * 92); padding: calc(var(--u) * 3) calc(var(--u) * 4);
  border-radius: calc(var(--u) * 5); text-align: center; color: var(--ink);
  background: linear-gradient(160deg, #fff, #ffe6f3); border: 4px solid var(--pink);
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.2), 0 0 40px rgba(255, 79, 160, 0.7);
  transition: transform 0.35s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.25s;
}
.banner.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.b-head { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); }
.b-name { font-size: calc(var(--u) * 5); font-weight: 900; color: var(--pink); max-width: calc(var(--u) * 60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-body { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 4); font-weight: 800; overflow-wrap: anywhere; }
.b-label { display: inline-block; margin-top: calc(var(--u) * 1.5); padding: calc(var(--u) * 0.6) calc(var(--u) * 3); border-radius: 999px; font-size: calc(var(--u) * 4); font-weight: 900; }
.b-combo { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 6); font-weight: 900; color: var(--violet); animation: twinkle 0.4s infinite alternate; }

.big-text {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); white-space: nowrap; opacity: 0;
  font-size: calc(var(--u) * 10); font-weight: 900; color: var(--yellow);
  text-shadow: 0 5px 0 var(--pink), 0 0 30px rgba(255, 210, 63, 0.9);
}
.big-text.show { animation: big 3.2s ease forwards; }

.conn {
  position: absolute; left: 50%; bottom: calc(var(--u) * 4); transform: translateX(-50%);
  padding: 8px 16px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); font-weight: 800; font-size: 14px;
}

.sound-btn {
  position: absolute; left: 50%; bottom: calc(var(--u) * 10); transform: translateX(-50%);
  pointer-events: auto; cursor: pointer; border: 3px solid #fff; border-radius: 999px; white-space: nowrap;
  padding: calc(var(--u) * 2) calc(var(--u) * 5); font: inherit; font-weight: 900; font-size: calc(var(--u) * 4);
  color: #fff; background: linear-gradient(135deg, var(--pink), var(--violet));
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 0 30px rgba(255, 79, 160, 0.7); animation: glow 0.9s infinite alternate;
}
body.chroma .sound-btn { display: none; }

body.landscape { --u: min(0.5625vw, 1vh); }
body.landscape .guide { top: calc(var(--u) * 14); width: calc(var(--u) * 50); }
body.landscape .top { top: calc(var(--u) * 14); }
body.landscape .energy { left: 30%; right: 30%; top: calc(var(--u) * 12); }

@keyframes twinkle { from { opacity: 0.6; transform: scale(0.92); } to { opacity: 1; transform: scale(1.08); } }
@keyframes glow { from { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 0 10px rgba(255, 79, 160, 0.5); } to { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 0 40px rgba(255, 210, 63, 0.95); } }
@keyframes flow { to { background-position: 200% 0; } }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes big {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  25% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}