.mascot-button {
  --mascot-size: 74px;
  width: 82px;
  height: 82px;
  flex: none;
  align-self: flex-end;
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  isolation: isolate;
  transition: transform .2s ease;
}
.mascot-button:hover,.mascot-button:focus-visible { transform: translateY(-3px); }
.mascot-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.mascot-button::after {
  content: '';
  position: absolute;
  width: 74px;
  height: 2px;
  left: 4px;
  bottom: 0;
  background: var(--accent);
  opacity: .55;
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
  transition: background-color .75s ease,box-shadow .75s ease;
}
.mascot-sprite {
  position: absolute;
  left: 4px;
  bottom: -1px;
  width: var(--mascot-size);
  height: 88px;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 5px #0006);
  pointer-events: none;
}
.mascot-button::before {
  content: attr(data-action-label);
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 2px;
  transform: translate(-50%,-75%);
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease,transform .2s ease;
}
.mascot-button:hover::before,.mascot-button:focus-visible::before { opacity: 1; transform: translate(-50%,-100%); }
body[data-theme="skogskollen"] .mascot-sprite { filter: drop-shadow(0 4px 4px #315c4230); }
body[data-theme="games"] .mascot-sprite { filter: drop-shadow(0 5px 5px #0009); }
@media (max-width:700px) {
  .topbar { height: 82px; min-height: 82px; flex-wrap: nowrap; justify-content: space-between; gap: 6px; padding: 0; }
  .mascot-button { --mascot-size: 60px; width: 64px; height: 82px; margin-right: 0; }
  .mascot-sprite { height: 72px; }
  .mascot-button::after { width: 60px; }
  .mascot-button::before { display: none; }
  .tabs { order: 0; width: auto; flex: 1; min-width: 0; justify-content: space-between; padding: 3px; gap: 0; }
  .tabs .tab { min-width: 0; padding: 8px 5px; font-size: 11px; }
  .mascot-button::before { left: 0; transform: translate(0,-75%); }
  .mascot-button:hover::before,.mascot-button:focus-visible::before { transform: translate(0,-100%); }
}