/* Pixel-Schatztruhe Beyond-Bot.ai – Farben ueber --bb-* von der Seite ueberschreibbar */
.bb-chest{--bb-bubble:#fff;--bb-ink:#1d1b26;--bb-edge:#1d1b26;--bb-name:#7b4bd6;--bb-silver:#68727e;
  position:relative;display:inline-flex;flex-direction:column;align-items:flex-end;width:288px;max-width:100%;margin-top:1rem;color:var(--bb-ink);text-decoration:none;vertical-align:top}
.bb-chest canvas{display:block;width:100%;margin-top:-20%;aspect-ratio:72/40;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
/* Blase im Fluss ueber dem Bot: der leere obere Teil der Truhen-Szene liegt darunter (Canvas mit negativem Rand),
   so ueberdeckt sie auf schmalen Breiten nie Nachbarn */
.bb-bubble{order:-1;position:relative;z-index:1;margin-right:3px;width:max-content;max-width:min(15rem,calc(100% - 6px));
  font:700 .78rem/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--bb-ink);background:var(--bb-bubble);padding:6px 9px;
  box-shadow:0 -3px 0 0 var(--bb-edge),0 3px 0 0 var(--bb-edge),-3px 0 0 0 var(--bb-edge),3px 0 0 0 var(--bb-edge);
  transition:opacity .2s steps(2),transform .2s steps(2)}
.bb-bubble::after{content:"";position:absolute;right:22%;bottom:-9px;width:6px;height:6px;background:var(--bb-bubble);
  box-shadow:0 3px 0 0 var(--bb-edge),-3px 0 0 0 var(--bb-edge),3px 0 0 0 var(--bb-edge)}
.bb-bubble b{color:var(--bb-name)}
.bb-rank{transition:color .3s ease,text-shadow .3s ease}
.bb-bubble.bb-silver .bb-rank{color:var(--bb-silver);background:linear-gradient(105deg,#68727e 0%,#aeb6c0 38%,#fff 49%,#dfe4ea 57%,#68727e 100%);background-size:240% 100%;background-position:100% 0;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 7px rgba(223,228,234,.55);animation:bb-silver-shine 1.05s ease-out both}
@keyframes bb-silver-shine{0%{background-position:100% 0;color:transparent;-webkit-text-fill-color:transparent}82%{background-position:0 0;color:transparent;-webkit-text-fill-color:transparent}100%{background-position:0 0;color:var(--bb-silver);-webkit-text-fill-color:var(--bb-silver);text-shadow:none}}
.bb-bubble.bb-hide{visibility:hidden;opacity:0;transform:translateY(4px)}
.bb-chest:hover .bb-bubble,.bb-chest:focus-visible .bb-bubble{text-decoration:underline}
.bb-chest:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bb-chest{--bb-bubble:#1b2330;--bb-ink:#f2f5f4;--bb-edge:#8fa1b8;--bb-name:#b89cf0;--bb-silver:#c1c7cf}}
:root[data-theme="dark"] .bb-chest{--bb-bubble:#1b2330;--bb-ink:#f2f5f4;--bb-edge:#8fa1b8;--bb-name:#b89cf0;--bb-silver:#c1c7cf}
@media (prefers-reduced-motion:reduce){.bb-bubble{transition:none}.bb-bubble.bb-silver .bb-rank{animation:none;background:none;color:var(--bb-silver);-webkit-text-fill-color:var(--bb-silver);text-shadow:none}}

/* Seiten-Popup links unten */
.bb-pop{--bb-panel:#ffffff;--bb-panel-edge:#1d1b26;
  position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;
  width:min(240px,calc(100vw - 32px));padding:12px 10px 8px;background:var(--bb-panel);
  box-shadow:0 -3px 0 0 var(--bb-panel-edge),0 3px 0 0 var(--bb-panel-edge),-3px 0 0 0 var(--bb-panel-edge),3px 0 0 0 var(--bb-panel-edge),0 12px 30px rgba(0,0,0,.25);
  transform:translateX(calc(-100% - 40px));transition:transform .45s cubic-bezier(.2,.9,.25,1.15)}
.bb-pop.bb-in{transform:none}
.bb-pop .bb-chest{width:100%;margin:0}
.bb-pop .bb-bubble{font-size:.7rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bb-pop{--bb-panel:#111822;--bb-panel-edge:#8fa1b8}}
:root[data-theme="dark"] .bb-pop{--bb-panel:#111822;--bb-panel-edge:#8fa1b8}
@media (prefers-reduced-motion:reduce){.bb-pop{display:none}}