/* One short-lived campaign, on the homepage and below World's online counter. */
.awards-cta[hidden] { display: none !important; }
.awards-cta { box-sizing: border-box; text-decoration: none; }
.awards-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.awards-cta:hover { filter: brightness(1.12); }
/* World: the homepage's yellow button (navy edge, hard drop shadow, Titan One) as a pill: a navy trophy coin, the
   words and a navy VOTE chip, with a glint and a trophy wiggle every few seconds. */
.awards-cta--world {
  position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 3px;
  border: 2px solid #000a2e; border-radius: 999px;
  background: linear-gradient(180deg, #fff3a6, #ffd60a 52%, #f4b400);
  color: #06124f; white-space: nowrap; pointer-events: auto;
  box-shadow: inset 0 2px 0 #fffbe0, inset 0 -2px 0 #d69800, 0 3px 0 #000a2e, 0 0 16px rgba(255, 214, 10, 0.5);
  font-family: var(--display, "Titan One", sans-serif); font-size: 14px; line-height: 1; letter-spacing: 0.02em;
  transition: translate 0.12s ease, box-shadow 0.12s ease;
}
.awards-cta--world::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 26px; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  transform: translateX(-40px) skewX(-20deg); animation: awardsGlint 4.5s 1s ease-in-out infinite;
}
.awards-cta--world .ac-cup {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #1d4bff, #06124f 70%); box-shadow: inset 0 0 0 2px #ffe566;
  font: 14px/1 system-ui, sans-serif; animation: awardsCup 4.5s 1s ease-in-out infinite;
}
.awards-cta--world b { font-weight: 400; text-shadow: 0 1px 0 #fff6b8; }
.awards-cta--world em {
  padding: 5px 8px 4px; border-radius: 999px; background: #06124f; color: #ffd60a;
  font-size: 11px; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase;
}
.awards-cta--world:hover { translate: 0 -2px; box-shadow: inset 0 2px 0 #fffbe0, inset 0 -2px 0 #d69800, 0 5px 0 #000a2e, 0 0 22px rgba(255, 214, 10, 0.7); }
.awards-cta--world:active { translate: 0 2px; box-shadow: inset 0 2px 0 #fffbe0, inset 0 -2px 0 #d69800, 0 1px 0 #000a2e, 0 0 12px rgba(255, 214, 10, 0.5); }
@keyframes awardsGlint { 0%, 70% { transform: translateX(-40px) skewX(-20deg); } 85%, 100% { transform: translateX(240px) skewX(-20deg); } }
@keyframes awardsCup { 0%, 76%, 100% { transform: none; } 80% { transform: rotate(-14deg) scale(1.15); } 85% { transform: rotate(10deg) scale(1.15); } 90% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) {
  .awards-cta--world::after, .awards-cta--world .ac-cup { animation: none; }
  .awards-cta--world { transition: none; }
}
.hud:not(.fold-quests, .hide-vote) .online-wrap:has(.awards-cta:not([hidden])) .online-drop { top: calc(100% + 46px); }
/* Desktop: everything that hangs at the top centre under the counter (card hunt clock, ZAZA live on X, quest and area
   banners, team announcements) drops by the button's height. A margin adds to each one's own top and translate. The
   quest fold (World's ui.js foldHud) folds the button away with the clock, and the room kept for it goes too, as when
   it's ticked away on its own (hud-pick.js). */
@media (min-width: 761px) and (min-height: 501px) {
  .hud:not(.fold-quests, .hide-vote):has(.awards-cta:not([hidden])) :is(#huntPill, .hud-tr .xlive-box, .quest-banner, .area-banner, .hud > .hud-bars) { margin-top: 40px; }
}
/* Phones: in the left HUD stack under the level window and directly below the card-drop clock. The online counter stays
   in its usual top position. Two lines keep this the same width as the clock without squeezing the words; the trophy keeps
   clear of the rounded left end (owner, 2026-11-01: "too close"), and the pill grows past the clock rather than clip. */
@media (max-width: 760px), (max-height: 500px) {
  .awards-cta--world {
    position: static; transform: none; margin-top: 5px;
    display: grid; grid-template-columns: auto auto; column-gap: 4px; row-gap: 2px; align-content: center;
    height: 36px; padding: 0 8px 0 6px; font-size: 11px; letter-spacing: 0;
  }
  .hud-under > .awards-cta--world { width: max-content; min-width: 100%; margin-top: 0; justify-content: start; grid-template-columns: 28px auto; column-gap: 5px; padding-right: 4px; border-radius: 9px; font-size: 10.5px; }
  .hud-under > .awards-cta--world .ac-cup { justify-self: center; } /* the stack's two lines (hunt.css) */
  .awards-cta--world .ac-cup { grid-row: span 2; width: 22px; height: 22px; font-size: 12px; box-shadow: inset 0 0 0 1px #ffe566; }
  .awards-cta--world b { align-self: end; }
  .awards-cta--world em { align-self: start; justify-self: start; padding: 0; background: none; color: #06124f; font-size: 9px; opacity: 0.8; }
}
/* Homepage: an award plate in PlayToEarn's colours (owner, 2026-11-03: "maybe put the play 2 earn logo and colors"):
   their blue running into the violet of their Game of the Year trophy, the site's navy edge, hard navy drop and bevel,
   their emblem in a blue medal (assets/p2e-mark.webp, the white mark cut from their badge), "PlayToEarn Awards" over
   "Game of the Year", and a navy bar that says Vote now and how many days are left (awards-campaign.js fills
   data-awards-left; the owner liked the bar, so it kept its look). A shine crosses it and its glow breathes (owner,
   2026-10-31: "make it pop out more"). It is on its own layer over the hero's canvas, as the words are (styles.css
   .scene-words > *), so an LP aura's spikes pass behind it, and under the name tag (2, later on the page). */
.awards-cta--home {
  position: relative; z-index: 2; isolation: isolate; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px 9px;
  width: fit-content; max-width: 100%; margin: 14px auto 0; padding: 8px 8px 8px;
  border: 3px solid #000a2e; border-radius: 16px; color: #fff;
  background: linear-gradient(160deg, #4a78ff, #2861ff 30%, #2a2ee6 62%, #3418b8);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 #1a0f88, 0 5px 0 #000a2e, 0 0 22px rgba(60, 100, 255, 0.55);
  font: 400 20px/1 'Titan One', 'Arial Black', sans-serif; letter-spacing: 0.01em; white-space: nowrap;
  transition: translate 150ms ease; animation: awardsGlow 2.4s ease-in-out infinite;
}
.awards-cta--home:hover { translate: 0 -2px; }
.awards-cta--home .ac-medal {
  flex: none; display: block; width: 42px; height: 42px; border-radius: 50%;
  background: url(/assets/p2e-mark.webp) 52% 50% / 72% no-repeat, radial-gradient(circle at 38% 30%, #5b86ff, #2861ff 55%, #0b2fe0);
  box-shadow: 0 0 0 2px #000a2e, inset 0 0 0 2px #fff, 0 3px 0 rgba(0, 10, 46, 0.35);
}
.awards-cta--home .ac-name { display: grid; gap: 4px; text-align: left; }
.awards-cta--home .ac-name small { color: #d4dcff; font: 800 10px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.awards-cta--home .ac-name b { font-weight: 400; text-shadow: 0 2px 0 #10107a; }
.awards-cta--home .ac-vote {
  flex: 1 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 30px; padding: 0 12px;
  border-radius: 10px; background: linear-gradient(180deg, #1d3590, #14245b 55%, #0d1a4a); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 #070f33;
}
.awards-cta--home .ac-vote b { color: #ffd60a; font-size: 14px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; }
.awards-cta--home .ac-vote small { color: #dfe6ff; font: 800 12px/1 'Plus Jakarta Sans', sans-serif; }
.awards-cta--home:hover .ac-vote { background: linear-gradient(180deg, #2546b8, #1a2f78 55%, #11205a); }
.awards-cta--home i { font-style: normal; }
.awards-cta--home::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; translate: -110% 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  animation: awardsShine 3.6s ease-in-out infinite;
}
@keyframes awardsGlow { 50% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 #1a0f88, 0 5px 0 #000a2e, 0 0 36px rgba(110, 100, 255, 0.85); } }
@keyframes awardsGlowS { 50% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 #1a0f88, 0 4px 0 #000a2e, 0 0 30px rgba(110, 100, 255, 0.85); } }
@keyframes awardsShine { 0%, 55% { translate: -110% 0; } 85%, 100% { translate: 110% 0; } }
@media (prefers-reduced-motion: reduce) {
  .awards-cta--home, .awards-cta--home::after { animation: none; }
}
/* Computers and tablets: in the left column, over Win real cards (owner, 2026-11-03: ZAZA WORLD went to two lines and
   took the room under the buttons, so the vote moved beside them). On computers it's as wide as that panel and sits where
   it does (styles.css .scene-l), and the panel's slabs give up its height (--l-bar). Its title shrinks with a panel as
   narrow as 220 px ("Game of the Year" is 9.4 times its size wide with its letter spacing, and the medal and gap take 51 px). Phones keep it
   under the buttons. */
@media (min-width: 761px) {
  .scene-words > .awards-cta--home { display: none; }
  .scene-l > .awards-cta--home { container: ac / inline-size; max-width: none; margin: 0; }
  .scene-l > .awards-cta--home .ac-name b { font-size: clamp(15px, (100cqw - 51px) / 9.6, 20px); }
  .scene-l > .awards-cta--home:hover { translate: var(--l-x, 0px) -2px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .scene-l > .awards-cta--home { width: 100%; }
}
/* A plate as wide as a tablet's column: one row, the vote at the right end. */
@container ac (min-width: 470px) {
  .awards-cta--home .ac-vote { flex: none; margin-left: auto; }
}
@media (min-width: 1101px) {
  .scene-l:has(> .awards-cta--home:not([hidden])) { --l-bar: 102px; }
}
@media (max-width: 760px) {
  .scene-l > .awards-cta--home { display: none; }
}
/* Phones: keep both campaign rows, with the GOTY vote above the normal PlayToEarn rank. They need more of the painted
   header, so lower the hero while the vote is visible; its name and aura stay clear of both calls to action. Here the
   plate is one row as tall as before (35 px): a smaller medal, the title, then the Vote bar as a chip. */
@media (max-width: 760px) {
  .awards-cta--home { flex-wrap: nowrap; gap: 8px; margin-top: 10px; padding: 2px 3px 2px 4px; border-width: 2px; border-radius: 14px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 #1a0f88, 0 4px 0 #000a2e, 0 0 18px rgba(60, 100, 255, 0.55); font-size: 15px; animation-name: awardsGlowS; }
  .awards-cta--home .ac-medal { width: 27px; height: 27px; box-shadow: 0 0 0 1.5px #000a2e, inset 0 0 0 1.5px #fff; }
  .awards-cta--home .ac-name small, .awards-cta--home i { display: none; }
  .awards-cta--home .ac-vote { flex: none; gap: 7px; height: 25px; padding: 0 9px; border-radius: 9px; }
  .awards-cta--home .ac-vote b { font-size: 12px; }
  .awards-cta--home .ac-vote small { font-size: 11px; }
  /* Rotate the two campaign rows visually without changing desktop or duplicating either link. Their combined footprint
     stays identical, so the lowered hero and PLAY keep the same safe spacing. */
  .home-scene:has(.awards-cta--home:not([hidden])) .hero-p2e { position: relative; top: 50px; }
  .home-scene:has(.awards-cta--home:not([hidden])) .awards-cta--home { top: -57px; }
  .home-scene:has(.awards-cta--home:not([hidden])) .scene-stage :is(.scene-hero, .scene-shadow) { bottom: calc(var(--ph) * 0.22); }
  .home-scene:has(.awards-cta--home:not([hidden])) .scene-stage .scene-tag { bottom: calc(var(--ph) * 0.22 + var(--tag-rows, var(--rows, 30)) * var(--k) * 1px + 8px); }
  /* Signed in, PLAY's row is shorter, so the hero goes a little lower still: an LP's aura clears the PlayToEarn rank. */
  .home-scene.is-me:has(.awards-cta--home:not([hidden])) .scene-stage :is(.scene-hero, .scene-shadow) { bottom: calc(var(--ph) * 0.17); }
  .home-scene.is-me:has(.awards-cta--home:not([hidden])) .scene-stage .scene-tag { bottom: calc(var(--ph) * 0.17 + var(--tag-rows, var(--rows, 30)) * var(--k) * 1px + 8px); }
  /* With ZAZA WORLD on two lines (2026-11-03), the third row of buttons needs the painting 850 px tall at least, so the
     title keeps its size over the hero's name (styles.css --zw-rest: 50 px more under the title). */
  .home-scene:has(.awards-cta--home:not([hidden])) { --ph: max(850px, 100svh); --zw-rest: 572px; }
}
/* Narrow phones (320-380 px): a little smaller, so the days left still fit. */
@media (max-width: 380px) {
  .awards-cta--home { gap: 5px; font-size: 12.5px; }
  .awards-cta--home .ac-vote { gap: 4px; padding: 0 6px; }
  .awards-cta--home .ac-vote b { font-size: 11px; letter-spacing: 0.03em; }
  .awards-cta--home .ac-vote small { font-size: 9.5px; }
}