/* Pixuvo player (game wrapper) styles */
:root{--bg:#070a14;--line:#222c48;--txt:#eaf0ff;--dim:#8a94b8;--neon:#22d3ee}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;overflow:hidden;
  /* Mobile: no elastic bounce, no pull-to-refresh, no scroll chaining
     from game touches (joystick drags must never move the page). */
  touch-action:none;overscroll-behavior:none}
.bar{
  position:fixed;top:0;left:0;right:0;height:48px;z-index:20;
  display:flex;align-items:center;gap:12px;padding:0 12px;
  background:rgba(7,10,20,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.back{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--txt);font-weight:800;font-size:13px;letter-spacing:.08em;
  background:#151c30;border:1px solid var(--line);border-radius:10px;padding:7px 14px;
  transition:border-color .12s, box-shadow .12s;
}
.back:hover{border-color:var(--neon);box-shadow:0 0 14px rgba(34,211,238,.35)}
.back img{display:block}
.name{flex:1;text-align:center;font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent,var(--neon));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs{
  cursor:pointer;background:#151c30;border:1px solid var(--line);border-radius:10px;
  color:var(--txt);font-size:13px;font-weight:800;padding:7px 14px;letter-spacing:.06em;
  transition:border-color .12s, box-shadow .12s;font-family:inherit;
}
.fs:hover{border-color:var(--neon);box-shadow:0 0 14px rgba(34,211,238,.35)}
.like{
  cursor:pointer;background:#151c30;border:1px solid var(--line);border-radius:10px;
  color:var(--txt);font-size:13px;font-weight:800;padding:7px 14px;letter-spacing:.06em;
  transition:border-color .12s, box-shadow .12s;font-family:inherit;
  display:inline-flex;align-items:center;gap:6px;
}
.like .ht{color:var(--dim);font-size:14px;line-height:1;transition:color .12s}
.like:hover{border-color:#f472b6;box-shadow:0 0 14px rgba(244,114,182,.35)}
.like:hover .ht{color:#f472b6}
.like.liked{border-color:rgba(244,114,182,.6);cursor:default}
.like.liked .ht,.like.liked b{color:#f472b6}
.like.pop .ht{animation:heartpop .35s ease}
@keyframes heartpop{40%{transform:scale(1.6)}}
#stage{position:fixed;top:48px;left:0;right:0;bottom:0;touch-action:none}
iframe{width:100%;height:100%;border:0;display:block;background:#000;touch-action:none}

/* Phones: compact bar (icons only) so the game gets the pixels */
@media (max-width:640px), (max-height:500px){
  .bar{height:42px;gap:8px;padding:0 8px}
  #stage{top:42px}
  .lbl{display:none}
  .back,.fs,.like{padding:6px 10px}
  .name{font-size:12px}
}