/* Compact public community invitation. Shared site tokens; no entry animation. */
.discord-community {
  position: fixed;
  z-index: 50;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 272px;
  max-width: calc(100% - 24px);
  padding: 9px 10px 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  color: var(--ink);
  box-shadow: inset 0 2px var(--classic-yellow), 0 4px 18px #0006;
}
.discord-community[hidden] { display: none; }
.discord-community-title {
  display: block;
  padding-right: 30px;
  margin-bottom: 2px;
  font: 600 1.125rem/1.2 "Titillium Web", sans-serif;
}
.discord-community-copy {
  margin: 0 0 7px;
  color: var(--ink-2);
  font: 400 .75rem/1.4 var(--font-body);
}
.discord-community-close {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: 400 23px/1 var(--font-body);
  cursor: pointer;
}
.discord-community-close:hover { background: #ffffff18; }
.discord-community-join {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid #727be0;
  border-radius: 5px;
  background: #4752c4;
  color: #fff;
  font: 600 .875rem/1.4 var(--font-body);
  text-decoration: none;
}
.discord-community-join:hover { background: #535fd2; color: #fff; }
.discord-community-join span { min-width: 0; overflow-wrap: anywhere; }
.discord-community-join svg { width: 24px; height: 24px; flex: none; fill: currentColor; }
.discord-community-join:focus-visible, .discord-community-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .discord-community {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}
@media (forced-colors: active) {
  .discord-community, .discord-community-join { border: 1px solid CanvasText; }
}

/* RestedXP giveaway (until Oct 20, 2026): a goblin climbs out of the corner. */
.discord-community--giveaway {
  right: max(10px, env(safe-area-inset-right));
  bottom: 0;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}
.discord-community--giveaway > * { pointer-events: auto; }
.discord-community--giveaway .discord-community-close {
  top: -14px;
  right: -6px;
  width: 44px;
  height: 44px;
  z-index: 1;
  color: var(--ink);
}
.discord-community--giveaway .discord-community-close::before {
  content: "";
  position: absolute;
  inset: 11px;
  z-index: -1;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg-2);
}
.discord-community--giveaway .discord-community-close:hover { background: transparent; color: #fff; }
.discord-community--giveaway:not(.is-open) .discord-community-close { opacity: 0; animation: gw-fade .2s 2.4s forwards; }
.gw-card {
  width: 272px;
  max-width: calc(100vw - 20px);
  max-height: calc(100dvh - 170px);
  overflow-y: auto;
  margin-bottom: 6px;
  padding: 10px 10px 8px;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  box-shadow: inset 0 2px var(--classic-yellow), 0 4px 18px #0006;
  transform-origin: 90% 100%;
  animation: gw-pop .16s ease-out;
}
.gw-card[hidden] { display: none; }
.gw-card .discord-community-title { padding-right: 26px; }
.gw-how { margin-top: 6px; color: var(--ink-2); font: 400 .75rem/1.4 var(--font-body); }
.gw-how summary { display: flex; align-items: center; min-height: 32px; cursor: pointer; color: var(--ink); }
.gw-how ul { margin: 0 0 4px; padding-left: 18px; }
.gw-how a { display: inline-block; padding: 4px 0; color: var(--classic-yellow); }
.gw-goblin {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.gw-goblin:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.gw-bubble {
  position: relative;
  max-width: 168px;
  margin: 0 -18px 92px 0;
  padding: 7px 26px 8px 11px;
  border: 2px solid #1f2d12;
  border-radius: 12px;
  background: #f8f1dc;
  color: #1d1a14;
  font: 700 .875rem/1.25 "Titillium Web", sans-serif;
  text-align: left;
  box-shadow: 0 3px 10px #0007;
  transform-origin: 100% 100%;
  opacity: 0;
  animation: gw-pop .22s 2.2s ease-out forwards;
}
.gw-bubble::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -9px;
  width: 14px;
  height: 14px;
  border: solid #1f2d12;
  border-width: 0 2px 2px 0;
  background: #f8f1dc;
  transform: skewX(-25deg) rotate(45deg);
}
.gw-goblin:hover .gw-bubble { background: #fff8e4; }
.is-open .gw-bubble { display: none; }
.gw-goblin-art {
  display: block;
  width: 120px;
  height: auto;
  margin-left: -10px;
  filter: drop-shadow(0 2px 8px #000c);
  transform: translateY(105%);
  transform-origin: 50% 100%;
  animation: gw-climb 1s 1.1s cubic-bezier(.3, 1.35, .5, 1) forwards;
}
.gw-goblin-art { transition: rotate .15s; }
.is-open .gw-goblin-art, .gw-goblin:hover .gw-goblin-art { rotate: -3deg; }
/* He grabs the edge, hauls himself halfway, catches his breath, then pops up. */
@keyframes gw-climb {
  0% { transform: translateY(105%); }
  30% { transform: translateY(62%) rotate(-2deg); }
  48% { transform: translateY(64%) rotate(-2deg); }
  100% { transform: translateY(0); }
}
@keyframes gw-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes gw-fade { to { opacity: 1; } }
html[data-motion="quiet"] .discord-community--giveaway *,
html[data-motion="quiet"] .discord-community--giveaway *::after { animation: none !important; }
html[data-motion="quiet"] .gw-goblin-art { transform: none; }
html[data-motion="quiet"] .gw-bubble, html[data-motion="quiet"] .discord-community--giveaway .discord-community-close { opacity: 1; }
@media (max-width: 600px) {
  .discord-community--giveaway { right: max(4px, env(safe-area-inset-right)); }
  .gw-goblin-art { width: 96px; }
  .gw-bubble { max-width: 150px; margin-bottom: 72px; font-size: .8125rem; }
}
@media (forced-colors: active) {
  .gw-card, .gw-bubble { border: 1px solid CanvasText; }
}