.lips-playbar{
  position:fixed;top:0;left:0;right:0;z-index:100000;height:48px;
  display:flex;align-items:center;gap:10px;padding:0 14px;
  background:
    linear-gradient(180deg,rgba(196,137,74,.28),transparent 42%),
    linear-gradient(180deg,#3a2418,#1a0e0a);
  box-shadow:0 4px 0 #8a4a24,0 8px 0 #090508;
  font-family:Syne,system-ui,sans-serif;
  color:#3ee7ff;
  overflow:visible;
  transition:transform .22s ease;
}
.lips-playbar-brand,.lips-playbar-leave{
  display:inline-flex;align-items:center;gap:8px;
  color:#3ee7ff;text-decoration:none;font-weight:800;font-size:.86rem;
  text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000;
  white-space:nowrap;
}
.lips-playbar-brand img{width:36px;height:36px;image-rendering:pixelated}
.lips-playbar-mid{
  flex:1;display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;
}
.lips-playbar-mid strong{
  font-size:.95rem;letter-spacing:-.02em;
  text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000;
}
.lips-playbar-badge{
  font-family:Silkscreen,ui-monospace,monospace;font-size:.58rem;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 7px;border:2px solid rgba(62,231,255,.45);
  text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000;
}
.lips-playbar-badge.is-maint{color:#ff9a3c;border-color:rgba(255,154,60,.55)}
.lips-playbar-badge.is-founder{color:#f0c45a;border-color:rgba(240,196,90,.45)}
.lips-playbar-account{
  font-family:Silkscreen,ui-monospace,monospace;font-size:.58rem;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 7px;border:2px solid rgba(62,231,255,.4);
  text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000;
  white-space:nowrap;
}
.lips-playbar-coins{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  color:#ead27d;text-decoration:none;font:800 .78rem Syne,system-ui,sans-serif;
  text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000;
  box-shadow:inset 0 0 0 2px rgba(232,202,118,.55);
  background:rgba(18,8,6,.55);
  white-space:nowrap;
}
.lips-playbar-coins.is-tick{
  animation:lipsCoinTick .32s ease;
}
.lips-playbar-donate{
  display:inline-flex;align-items:center;padding:5px 10px;
  color:#f0c45a;text-decoration:none;font:800 .78rem Syne,system-ui,sans-serif;
  text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000;
  box-shadow:inset 0 0 0 2px rgba(240,196,90,.55);
  background:rgba(18,8,6,.55);
  white-space:nowrap;
}
.lips-playbar-donate:hover,.lips-playbar-donate:focus-visible{
  color:#ffe08a;box-shadow:inset 0 0 0 2px #f0c45a;
}
@keyframes lipsCoinTick{
  0%{color:#fff4c8}
  100%{color:#ead27d}
}
@media (prefers-reduced-motion: reduce){
  .lips-playbar-coins.is-tick{animation:none}
}
.lips-playbar-leave{
  padding:6px 12px;
  box-shadow:inset 0 0 0 2px #ff9a3c;
  background:rgba(18,8,6,.55);
  border:0;
  font:800 .82rem Syne,system-ui,sans-serif;
  cursor:pointer;
}
button.lips-playbar-toggle,.lips-playbar-toggle{
  all:unset;
  box-sizing:border-box;
  position:absolute;left:50%;top:100%;z-index:2;
  transform:translateX(-50%);
  width:40px;height:16px;padding:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:0;cursor:pointer;color:#3ee7ff;
  font-size:0;line-height:0;text-transform:none;
  background:
    linear-gradient(180deg,rgba(196,137,74,.28),transparent 48%),
    linear-gradient(180deg,#3a2418,#1a0e0a);
  box-shadow:0 3px 0 #8a4a24, 2px 0 0 #090508, -2px 0 0 #090508;
  clip-path:polygon(0 0,100% 0,78% 100%,22% 100%);
  pointer-events:auto;
  touch-action:manipulation;
  -webkit-appearance:none;appearance:none;
}
.lips-playbar-toggle:hover,.lips-playbar-toggle:focus-visible,
button.lips-playbar-toggle:hover,button.lips-playbar-toggle:focus-visible{
  color:#9af6ff;
  background:
    linear-gradient(180deg,rgba(196,137,74,.28),transparent 48%),
    linear-gradient(180deg,#3a2418,#1a0e0a);
  filter:none;box-shadow:0 3px 0 #8a4a24, 2px 0 0 #090508, -2px 0 0 #090508;
}
.lips-playbar-toggle:focus-visible{
  outline:2px solid #3ee7ff;outline-offset:2px;
}
.lips-playbar-caret{
  display:block;width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:6px solid currentColor;
}
body.lips-playbar-off .lips-playbar-caret{
  border-bottom:0;
  border-top:6px solid currentColor;
}
html.lips-play,body.lips-play{background:#0e1110}
body.lips-play #app,body.lips-play #stage{top:48px;height:auto;bottom:0}
body.lips-playbar-off .lips-playbar{transform:translateY(-100%);pointer-events:none;box-shadow:none}
body.lips-playbar-off .lips-playbar-toggle{pointer-events:auto}
body.lips-playbar-off #app,body.lips-playbar-off #stage{top:0}
@media (max-width:720px){
  .lips-playbar-note{display:none}
  .lips-playbar-brand span{display:none}
}
@media (max-height:520px){
  .lips-playbar{height:34px;padding:0 10px;gap:6px}
  .lips-playbar-brand img{width:26px;height:26px}
  .lips-playbar-leave{padding:4px 8px;font-size:.72rem}
  .lips-playbar-donate,.lips-playbar-coins{padding:3px 7px;font-size:.7rem}
  .lips-playbar-mid strong{font-size:.82rem}
  body.lips-play #app,body.lips-play #stage{top:34px}
}