:root {
    --rare-color: #62c36c;
    --epic-color: #5dbdc8;
    --mystic-color: #a453f6;
    --common-color: #747474;
}


/*lottie-player {*/
/*    width: clamp(180px, 25vw, 320px);;*/
/*}*/


/*#logo svg path{*/
/*    fill: var(--bulma-logo-color);*/
/*}*/

.stay-tuned {
    display: flex;
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.stay-tuned-text {
    font-size: small;
    margin-right: 5px;
}

.stay-tuned-icons {
    font-size: larger;
}

.heading {
    display: block;
    font-size: clamp(0.55rem, 2vw, 0.9rem);
    letter-spacing: 1px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

@media screen and (max-width: 1200px) {
    .lunacian-code-block {
        flex-direction: column;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        line-height: 1rem;
    }
}

/* ── The premium padlock, site-wide ────────────────────────────────────────
   One icon (component/renderLockIcon.jte) in one colour everywhere a feature is
   behind Premium: the leaderboard's played column, the era buttons, auto-update,
   team price, the delegation cards, the axie-image menu and the header menus.

   Gold, matching the "premium" chip in the header — these used to be Font
   Awesome locks in danger-red, which said "error" about something that is
   merely unbought. Locks that mean something else (sign in, cooldown) keep
   inheriting their surroundings and must NOT take this class. */
.premium-lock {
    color: var(--sh-gold-icon);
}

/* --sh-gold-icon darkens for the light theme because it normally sits on a light
   ground. The delegation card's lock sits on a fixed 55%-black scrim instead, so
   there it has to stay the bright gold — the dark one measures 2.7:1 on that
   tile. Selector is .premium-lock-overlay.premium-lock so it only wins for that
   one placement. */
.premium-lock-overlay.premium-lock {
    color: #f4c04e;
}

.lock-ico {
    display: inline-block;
    vertical-align: -0.15em;
    flex: 0 0 auto;
}

/* The label beside a premium lock, for the same reason: quiet, not alarming. */
.is-premium-locked {
    color: var(--sh-ink-quiet);
}

/* ══════════════════════════════════════════════════════════════════════════
   SITE HEADER  (templates/component/renderSiteHeader.jte)

   One 54px row. The nine flat links are grouped into five sections; the one
   you are on is marked with a hexagon in that section's colour, reusing the
   shape and the rarity palette the leaderboard already uses for axie levels.

   Bulma's .navbar is no longer involved, but every page still carries
   body.has-navbar-fixed-top, so --bulma-navbar-height is what reserves the
   space under the fixed bar. Keep it equal to the bar plus its border.
   ═══════════════════════════════════════════════════════════════════════ */
:root,
.theme-light {
    --sh-h: 54px;
    /* box-sizing is border-box site-wide, so the 1px bottom border is INSIDE
       --sh-h. Reserving anything more leaves a strip of page showing under the
       fixed bar. */
    --bulma-navbar-height: var(--sh-h);
    /* Bulma's --bulma-link-invert is only defined inside .is-link scopes, so the
       sign-in button carries its own pair. Both are checked for contrast. */
    --sh-cta-bg: hsl(233, 100%, 60%);
    --sh-cta-fg: #ffffff;
    /* The rarity hues are tuned to glow on a dark ground; as text on white they
       fall to ~1.7:1. Section colour therefore stays on shapes and edges, and
       any text that needs a gold tint uses this darkened pair instead. */
    /* Two golds, because they answer to different contrast bars. --sh-gold-ink is
       TEXT (the "premium" chip, the unlock row) and must clear 4.5:1, which on a
       white ground forces it dark enough to read olive. --sh-gold-icon is the
       padlock: a graphic, so 3:1 is the bar, and that extra room buys back the
       saturation that makes it look like gold instead of mud. */
    --sh-gold-ink: #7a5b00;
    --sh-gold-icon: #b07213;
    /* De-emphasised nav text ("Site info"). --bulma-text-weak alone measures
       4.2:1 on the dark bar, so this sits between weak and text on the site's own
       221deg/14% ramp; the "quiet" then reads from the lighter weight rather than
       from failing contrast. Stated per theme, not color-mix()'d from the Bulma
       vars, because a color-mix() inside a custom property resolves once on
       :root and would not follow the theme class. */
    --sh-ink-quiet: hsl(221, 14%, 44%);
    /* The blessing streak. Gold is not available here: at 0.56rem on white, a hue
       that still reads as gold cannot also clear 4.5:1 — pushing it dark enough
       turns it olive, which is what --sh-gold-ink already is and why it reads as
       mud at this size. So on a light ground the number is plain ink and the
       shrine icon above it carries the identity; on a dark ground gold works and
       is kept. */
    --sh-streak: var(--bulma-text-strong);
}

.theme-dark {
    --sh-cta-bg: hsl(233, 100%, 68%);
    --sh-cta-fg: #0b0d16;
    --sh-gold-ink: #f4c04e;
    --sh-gold-icon: #f4c04e;
    --sh-ink-quiet: hsl(221, 14%, 62%);
    --sh-streak: #f4c04e;
}

.sh {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    height: var(--sh-h);
    padding: 0 clamp(10px, 1.5vw, 18px);
    background: var(--bulma-scheme-main);
    /* The bar is fixed and the page scrolls under it, so the boundary has to
       hold on its own against a same-coloured page. */
    border-bottom: 1px solid var(--bulma-border);
    color: var(--bulma-text);
}

.sh a {
    text-decoration: none;
}

.sh-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--bulma-logo-color);
    transition: opacity 0.15s;
}

.sh-logo:hover {
    opacity: 0.82;
}

/* The animated wordmark. It paints its own SVG into a shadow root, which the
   inline script in renderSiteHeader.jte tints with --bulma-logo-color. */
.sh-logo lottie-player {
    display: block;
    /* The wordmark is ~6.3:1, so the upper bound is what keeps it inside the
       54px bar with room to breathe (240px wide renders 38px tall). */
    width: clamp(160px, 15vw, 240px);
}

/* ── Section rail ──────────────────────────────────────────────────────── */
/* Centred on the bar itself rather than on the space left over between the
   logo and the account cluster, so the sections stay put as those two change
   width (premium chip, Atia pip, signed in vs out). Taken out of flow, so the
   logo and account cluster still sit hard left and hard right. */
.sh-nav {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.sh-item {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    padding: 0 10px;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--bulma-text);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.13s;
}

.sh-item__t {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sh-item:hover,
.sh-item.is-active {
    color: var(--bulma-text-strong);
}

.sh-item--quiet {
    color: var(--sh-ink-quiet);
    font-weight: 500;
}

.sh-chev {
    width: 9px;
    height: 6px;
    opacity: 0.55;
    transition: transform 0.16s;
}

.sh-has-drop.is-open .sh-chev {
    transform: rotate(180deg);
}

.sh-new,
.sh-demo {
    font-family: monospace;
    font-size: 0.5rem;
    font-style: normal;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--bulma-text-strong);
    padding: 1px 5px;
    border-radius: 99px;
    border: 1px solid color-mix(in srgb, var(--hue) 45%, transparent);
    margin-inline-start: 7px;
    vertical-align: middle;
    white-space: nowrap;
}

/* The one live control inside a locked row: the tool itself is out of reach, this
   is the way in. Filled rather than outlined so it reads as pressable next to the
   flat "new" label, and it has to override the row's not-allowed cursor. */
.sh-demo {
    color: var(--bulma-text);
    border-color: color-mix(in srgb, var(--hue) 50%, transparent);
    background: color-mix(in srgb, var(--hue) 14%, transparent);
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
}

.sh-demo:hover {
    color: var(--bulma-text-strong);
    background: color-mix(in srgb, var(--hue) 30%, transparent);
    border-color: color-mix(in srgb, var(--hue) 75%, transparent);
}

/* ── Premium-gated rows ────────────────────────────────────────────────────
   A locked row is an <a> with no href: not focusable, not a destination, but
   still readable. It keeps its description on purpose — the row exists to say
   what you are missing, so blanking it out would defeat the point. Tools that
   have a public demo are never locked; they link to the demo instead. */
.sh-drop__row.is-locked,
.sh-row.is-locked {
    cursor: not-allowed;
}

.sh-drop__row.is-locked:hover,
.sh-row.is-locked:hover {
    background: none;
}

.sh-drop__row.is-locked:hover::before,
.sh-row.is-locked:hover::before {
    opacity: 0;
}

.is-locked .sh-drop__label,
.is-locked .sh-row__l {
    color: var(--sh-ink-quiet);
    font-weight: 500;
}

.is-locked .sh-drop__desc,
.is-locked .sh-row__d {
    color: var(--sh-ink-quiet);
}

.sh-lock {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    color: var(--sh-gold-icon);
}

/* Keep the label clear of the padlock. */
.is-locked .sh-drop__label,
.is-locked .sh-drop__desc,
.is-locked .sh-row__l,
.is-locked .sh-row__d {
    padding-inline-end: 22px;
}

/* The one way forward out of a gated section. Deliberately the quietest thing in
   the panel — a locked row is information, not a sales pitch, and this is the
   footnote that tells you what to do about it. */
.sh-unlock {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 5px 3px 10px;
    padding: 7px 8px;
    border-top: 1px solid var(--bulma-border-weak);
    border-radius: 0 0 8px 8px;
    font-family: monospace;
    font-size: 0.63rem;
    letter-spacing: 0.04em;
    color: var(--sh-ink-quiet);
    transition: color 0.13s, background 0.13s;
}

.sh-unlock:hover {
    color: var(--bulma-text-strong);
    background: color-mix(in srgb, #f4c04e 10%, transparent);
}

/* ── Menus ─────────────────────────────────────────────────────────────── */
.sh-has-drop {
    position: relative;
    display: flex;
    align-self: stretch;
}

.sh-drop {
    position: absolute;
    top: calc(100% - 5px);
    left: 0;
    min-width: 252px;
    max-width: calc(100vw - 20px);
    padding: 6px;
    background: var(--bulma-scheme-main-bis);
    border: 1px solid var(--bulma-border);
    border-radius: 12px;
    box-shadow: 0 14px 34px -14px rgb(0 0 0 / 0.55), 0 2px 8px -4px rgb(0 0 0 / 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.14s, transform 0.14s, visibility 0.14s;
    z-index: 60;
}

.sh-has-drop--end .sh-drop,
.sh-has-drop.is-flipped > .sh-drop {
    left: auto;
    right: 0;
}

/* .is-open is the ONLY thing that opens a menu. Hover-to-open is done in
   common.js by adding the same class, so what is on screen and what
   aria-expanded reports can never disagree - a CSS :hover rule here would keep
   the panel visible after a click closed it. */
.sh-has-drop.is-open > .sh-drop {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.sh-drop__row {
    position: relative;
    display: grid;
    gap: 1px;
    padding: 7px 11px;
    border-radius: 8px;
}

.sh-drop__row::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: var(--hue, var(--bulma-text-weak));
    opacity: 0;
    transition: opacity 0.13s;
}

.sh-drop__row:hover {
    background: color-mix(in srgb, var(--hue, var(--bulma-text-weak)) 11%, transparent);
}

.sh-drop__row:hover::before,
.sh-drop__row.is-current::before {
    opacity: 1;
}

.sh-drop__row.is-current {
    background: color-mix(in srgb, var(--hue, var(--bulma-text-weak)) 11%, transparent);
}

.sh-drop__row--tight {
    padding: 6px 11px;
}

.sh-drop__label {
    font-size: 0.805rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--bulma-text-strong);
}

/* --bulma-text-weak drops to ~4.4:1 on the panel's scheme-main-bis ground, so
   these one-liners use the full text colour; the size and face keep them
   secondary to the label without leaning on contrast to do it. */
.sh-drop__desc {
    font-family: monospace;
    font-size: 0.605rem;
    line-height: 1.4;
    color: var(--bulma-text);
}

.sh-drop__sep {
    display: block;
    height: 1px;
    background: var(--bulma-border-weak);
    margin: 5px 8px;
}

.sh-drop--user {
    min-width: 196px;
}

/* The merged Tools menu. Axie value and Market no longer have their own rail
   items, so they survive as headings in here — the grouping is worth keeping
   even though the rail no longer spends width on it. */
.sh-drop--tools {
    min-width: 274px;
}

.sh-drop--tools .sh-group {
    margin: 12px 0 3px;
    padding-inline-start: 11px;
}

.sh-drop--tools > .sh-group:first-child {
    margin-top: 2px;
}

.sh-drop__row--out .sh-drop__label {
    color: var(--bulma-text);
}

/* ── Account cluster ───────────────────────────────────────────────────── */
.sh-acct {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    align-self: stretch;
    padding-inline-start: 10px;
}

.sh-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    align-self: center;
    border-radius: 8px;
    border: 0;
    background: none;
    color: var(--bulma-text-weak);
    cursor: pointer;
    transition: color 0.13s, background 0.13s;
}

.sh-icon:hover {
    color: var(--bulma-text-strong);
    background: var(--bulma-scheme-main-ter);
}

.sh-cta {
    display: inline-flex;
    align-items: center;
    align-self: center;
    height: 32px;
    padding: 0 13px;
    border: 0;
    border-radius: 8px;
    background: var(--sh-cta-bg);
    color: var(--sh-cta-fg);
    font-family: inherit;
    font-size: 0.765rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.13s;
}

.sh-cta:hover {
    filter: brightness(1.08);
}

.sh-user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: center;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--bulma-border);
    background: none;
    cursor: pointer;
    color: var(--bulma-text-strong);
    font-family: monospace;
    font-size: 0.72rem;
    transition: background 0.13s;
}

.sh-user:hover {
    background: var(--bulma-scheme-main-ter);
}

/* ── Atia's blessing pip ───────────────────────────────────────────────── */
/* #atia-tooltip is positioned by floating-ui against this element, so it has
   to stay the nearest positioned ancestor - same as Bulma's .navbar-item was. */
#atia-navbar {
    position: relative;
    display: flex;
    /* Column so the streak sits under the shrine it belongs to. The rail is a fixed
       height, so this must not grow it: the icon keeps its 27px and the streak rides
       in the leading below it. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    align-self: center;
    flex: 0 0 auto;
}

/* Consecutive days this site recorded a blessing. Quiet by default — it is a
   reassurance, not something to act on. */
.atia-streak {
    font-family: var(--adm-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--sh-streak);
    white-space: nowrap;
    cursor: default;
}

.atia-streak em {
    font-style: normal;
    opacity: 0.6;
}

/* A run that stopped before yesterday is history. Dropping it to the quiet ink
   keeps it from reading as "the automation is still working". */
.atia-streak.is-stale {
    color: var(--sh-ink-quiet);
}

.atia-icon-container {
    position: relative;
    display: flex;
}

/* Bulma's .navbar-item img rule used to cap this; the images are 152px native. */
#atia-navbar #atia {
    display: block;
    width: 27px;
    height: 27px;
}

/* The shrine is pale silver artwork drawn against the dark bar; on a white one it
   loses its outline and reads as a smudge. A soft dark shadow gives the edges back
   without altering the image itself. */
.theme-light #atia-navbar #atia {
    filter: drop-shadow(0 0 0.5px rgba(24, 28, 38, 0.55))
            drop-shadow(0 1px 1.5px rgba(24, 28, 38, 0.25));
}

#mark {
    position: absolute;
    top: -5px;
    right: -4px;
    width: 15px;
    z-index: 5;
}

/* ── Burger + sheet (below 1024px) ─────────────────────────────────────── */
.sh-burger {
    display: none;
    width: 34px;
    height: 34px;
    place-items: center;
    align-content: center;
    gap: 4px;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0;
    margin-inline-end: 8px;
    flex: 0 0 auto;
}

.sh-burger span {
    display: block;
    width: 17px;
    height: 1.6px;
    border-radius: 2px;
    background: var(--bulma-text-strong);
    transition: transform 0.18s, opacity 0.18s;
}

.sh-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(5.6px) rotate(45deg);
}

.sh-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.sh-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-5.6px) rotate(-45deg);
}

.sh-sheet {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 10px;
    background: var(--bulma-scheme-main);
    border-bottom: 1px solid var(--bulma-border);
    max-height: calc(100dvh - var(--bulma-navbar-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 70;
    box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.6);
}

.sh.is-sheet-open .sh-sheet {
    display: block;
}

/* The section colour rides on the hexagon, not on the label, so the label can
   stay readable on a white ground. */
.sh-group {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: monospace;
    font-size: 0.56rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--bulma-text-weak);
    margin: 14px 0 4px;
    padding-inline-start: 11px;
}

.sh-group::before {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 10px;
    background: var(--hue);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.sh-row {
    position: relative;
    display: grid;
    gap: 1px;
    padding: 9px 11px;
    border-radius: 9px;
}

.sh-row::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 9px;
    bottom: 9px;
    width: 2px;
    border-radius: 2px;
    background: var(--hue);
    opacity: 0;
}

.sh-row.is-current::before,
.sh-row:hover::before {
    opacity: 1;
}

.sh-row.is-current {
    background: color-mix(in srgb, var(--hue) 11%, transparent);
}

.sh-row__l {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--bulma-text-strong);
}

.sh-row__d {
    font-family: monospace;
    font-size: 0.62rem;
    color: var(--bulma-text-weak);
}

.sh-row--quiet .sh-row__l {
    color: var(--sh-ink-quiet);
    font-weight: 500;
}

@media screen and (max-width: 1023px) {
    .sh-burger {
        display: grid;
    }
    .sh-nav {
        display: none;
    }
    .sh-acct {
        gap: 6px;
    }
}

@media screen and (max-width: 640px) {
    /* The burger, the Atia pip and the account control all share the bar on a
       phone, so the wordmark has to give way or it pushes the theme toggle off
       the right edge. */
    .sh-logo lottie-player {
        width: 132px;
    }
    .sh-cta {
        padding: 0 10px;
        font-size: 0.72rem;
    }
}

@media screen and (max-width: 420px) {
    .sh-logo lottie-player {
        width: 112px;
    }
}

#close-popup {
    position: absolute;
    right: 8px;
    top: 8px;
}
#wallet-popup-title {
    margin: 0 0 12px;
    font-size: 1.1rem;
    font-weight: 600;
}
#connection-stages {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    text-align: left;
    display: inline-block;
}
#connection-stages li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.95rem;
    line-height: 1.2;
}
#connection-stages .stage-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.stage-pending { color: #9aa0a6; }
.stage-active  { color: inherit; font-weight: 600; }
.stage-done    { color: #2e7d32; }
.stage-error   { color: #c62828; font-weight: 600; }
.stage-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: wallet-spin 0.8s linear infinite;
}
@keyframes wallet-spin { to { transform: rotate(360deg); } }
#wallet-popup-message {
    margin: 0 0 14px;
    font-size: 0.9rem;
    color: #555;
    min-height: 1.2em;
}
#wallet-popup-message.is-error { color: #c62828; }
#wallet-box {
    position: relative;
    padding: 32px 24px 24px;
    border-radius: 10px;
    text-align: center;
    max-width: 360px;
    width: calc(100% - 32px);
}

#wallet-popup {
    display:none;
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.5);
    z-index:1000;
    align-items:center;
    justify-content:center;
    padding: 16px;
}

#code-copied-tooltip {
    white-space: nowrap;
    bottom: -170px;
    transform: translateX(-50%);
    text-align: center;
    left: 50%;
    z-index: 1;
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 5px 0;
    border-radius: 6px;
    align-items: center;
    background-color: var(--bulma-background-code-hover);
    visibility: hidden;
    width: max-content;
}

@keyframes tilt-shaking {
    100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
    50% { transform: rotate(0); }
    0% { transform: rotate(0deg); }
}

.lunacian-code-block {
    font-size: clamp(0.7rem, 2vw, 1rem);
}

#lunacian-code {
    display: block;
    animation: tilt-shaking 1s ease-in-out infinite;
    font-weight: bold;
    cursor: pointer;
    background: var(--bulma-background-code);
    color: var(--bulma-logo-color);
}

#lunacian-code:hover {
    background: var(--bulma-background-code-hover)
}

#code-copied-tooltip img {
    margin: auto;
    width: 150px;
    height: 150px;
    max-height: none;
}

.tag.is-inverted {
    background-color: hsl(var(--bulma-tag-h), var(--bulma-tag-s), calc(var(--bulma-tag-color-l) + var(--bulma-tag-background-l-delta)));
    color: hsl(var(--bulma-tag-h), var(--bulma-tag-s), var(--bulma-tag-background-l));
}

/* HEXAGON */

.hexagon-border {
    z-index: 1;
    display: grid;
    position: relative;
    --hex-width: clamp(15px, 3vw, 26px);
    width: var(--hex-width);
    height: var(--hex-width);
    background-color: black;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hexagon {
    position: absolute;
    display: grid;
    top: 1px;
    left: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    background-color: var(--bulma-hexagon-background);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}


.hexagon-text {
    color: var(--bulma-hexagon-text);
    display: grid;
    align-self: center;
    justify-content: center;
    font-size: clamp(8px, 1.5vw, 14px);
}

/*=====*/

/*CHARM TOOLTIP*/

.tooltip-trigger {
    z-index: 3;
}

.tooltip {
    z-index: 5;
    display: none;
    width: max-content;
    position: absolute;
    top: 0;
    left: 0;
}

/* Streak line, inside the tooltip's status column. Full width of that column with a
   rule above it, so it reads as a second fact about the shrine rather than a
   continuation of the countdown. */
.tooltip-streak {
    width: 100%;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--bulma-tooltip-border);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
}

.tooltip-streak em {
    display: block;
    font-style: normal;
    font-size: 0.64rem;
    opacity: 0.75;
}

.tooltip-container {
    background-color: transparent;
    font-size: clamp(0.65rem, 2vw, 0.85rem);
    font-weight: 550;
    display: flex;
    max-width: fit-content;
    border-radius: 10px;
}


.tooltip-left {
    left: 2px;
    background-color: var(--bulma-background-tooltip);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: clamp(80px, 15vw, 120px);
    border: 2px solid var(--bulma-tooltip-border);
    border-radius: 10px;
    padding: 3px;
    position: relative;
}


.tooltip-right {
    background-color: var(--bulma-background-tooltip);
    width: clamp(150px, 25vw, 200px);
    border: 2px solid var(--bulma-tooltip-border);
    border-radius: 10px;
    padding: 8px;
}

.tooltip-potential-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    position: absolute;
    top: 4px;
    left: 4px;
}

.tooltip-potential-point img {
    width: clamp(18px, 3vw, 24px);
}

.tooltip-season {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: clamp(18px, 3vw, 24px);
    height: auto;
    position: absolute;
    top: 4px;
    right: 4px;
}

.tooltip-img-container {
    width: clamp(40px, 10vw, 56px);
    height: clamp(40px, 10vw, 56px);
}

.tooltip-img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.svg-container {
    width: clamp(12px, 4vw, 20px);
    height: auto;
    display: inline-block;
    margin-bottom: -5px;
    margin-top: -2px;
}

.Epic-rune-shadow {
    filter: drop-shadow(0px 0px 2px var(--epic-color));
}
.Mystic-rune-shadow {
    filter: drop-shadow(0px 0px 2px var(--mystic-color));
}
.Rare-rune-shadow {
    filter: drop-shadow(0px 0px 2px var(--rare-color));
}
.Common-rune-shadow {
    filter: drop-shadow(0px 0px 2px var(--common-color));
}

.Epic-charm-shadow {
    filter: drop-shadow(0px 0px 1px var(--epic-color));
}
.Mystic-charm-shadow {
    filter: drop-shadow(0px 0px 1px var(--mystic-color));
}
.Rare-charm-shadow {
    filter: drop-shadow(0px 0px 1px var(--rare-color));
}
.Common-charm-shadow {
    filter: drop-shadow(0px 0px 1px var(--common-color));
}

.svg-container.Rare {
    color: var(--rare-color);
}
.svg-container.Epic {
    color: var(--epic-color);
}
.svg-container.Mystic {
    color: var(--mystic-color);
}
.svg-container.Common {
    color: var(--common-color);
}

.rune-container {
    display: flex;
    flex-direction: column;
}

/*COLLECTION BADGES*/
.badge-collection {
    position: relative; /* Required for positioning the :after pseudo-element */
    display: inline-flex; /* Adjust to content size */
    align-items: center;
    gap: 5px; /* Space between icon and text */
    border-radius: 50px; /* Rounded edges */
    padding: 5px 10px; /* Inner padding */
    max-width: 100%; /* Prevent overflowing parent container */
    overflow: hidden; /* Ensures the animation stays within the rounded border */
}

.badge-mystic {
    background: #7b36aa; /* Background color */
}
.badge-japan {
    background: #84502b; /* Background color */
}
.badge-xmas {
    background: #17760e; /* Background color */
}
.badge-summer {
    background: #00976e; /* Background color */
}
.badge-shiny {
    background: #007fa8; /* Background color */
}
.badge-nightmare {
    background: #8a0093; /* Background color */
}

.badge-agamogenesis {
    background-color: #e12f64;
}
.badge-origin {
    background-color: #b72c19;
}
.badge-meo, .badge-meo1, .badge-meo2 {
    background-color: #255778;
}


.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.badge-shiny:after {
    content: "";
    position: absolute;
    top: -50%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
            90deg,
            hsla(0, 0%, 100%, 0.1) 0,
            hsla(0, 0%, 100%, 0.15) 77%,
            hsla(0, 0%, 100%, 0.85) 92%,
            hsla(0, 0%, 100%, 0)
    );
    pointer-events: none; /* Prevents the pseudo-element from interfering with clicks */
    animation: shiny 1.5s ease infinite;
    animation-delay: 0.5s;
    border-radius: inherit; /* Ensures the shiny effect respects the badge's border radius */
}

/* Shiny animation */
@keyframes shiny {
    0% {
        transform: translateX(0);
        top: -50%;
        left: -100%;
        opacity: 0.5;
    }
    50% {
        transform: translateX(60%);
        opacity: 0.8;
    }
    100% {
        top: 0;
        left: 90%;
        opacity: 1;
        transform: translateX(70%);
    }
}

/* Badge Icon Wrapper */
.badge-icon-wrapper {
    flex-shrink: 0; /* Prevent icon from shrinking */
    width: clamp(16px, 3vw, 20px);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Badge Number */
.badge-number {
    font-size: clamp(0.6rem, 1.5vw, 1rem); /* Adjust text size */
    font-weight: bold;
    color: white;
    white-space: nowrap;
}


/* If only the icon is present */
.badge-collection-container:has(.badge-icon-wrapper):not(:has(.badge-number)) {
    padding: 10px; /* Adjust padding for icon-only case */
}


.badge-container {
    margin-top: -4px;
    align-self: center;
    z-index: 3;
    position: relative;
    border-radius: 10px;
    width: fit-content;
    padding-left: 2px;
    padding-right: 2px;
}
.badge {
    justify-self: center;
    height: clamp(3px, 1vw, 9px);
}
.badge-container.Common {
    background-color: #616060;
    filter: drop-shadow(0px 0px 1px #616060);
}
.badge-container.Rare {
    background-color: #104715;
    filter: drop-shadow(0px 0px 1px #104715);
}
.badge-container.Epic {
    background-color: #0f444a;
    filter: drop-shadow(0px 0px 1px #0f444a);
}
.badge-container.Mystic {
    background-color: #310f53;
    filter: drop-shadow(0px 0px 1px #310f53);
}

.badge.Common {
    background-image: url(/static/assets/css/common-star-c2fee27ea5ec0481b379820e040df59e.webp);
}
.badge.Rare {
    background-image: url(/static/assets/css/rare-star-fdabd15571b5e2843ca9c248493f75ea.webp);
}
.badge.Epic {
    background-image: url(/static/assets/css/epic-star-20ab0d48c0950014aa67dbbb7fb978e9.webp);
}
.badge.Mystic {
    background-image: url(/static/assets/css/mystic-star-010e5031308fb260d352495e568004fd.webp);
}

/* Display one star */
.star-1 {
    background-size: clamp(3px, 1vw, 9px) clamp(3px, 1vw, 9px);
    background-repeat: repeat-x;
    width: clamp(3px, 1vw, 9px);
}

/* Display two stars */
.star-2 {
    background-size: clamp(3px, 1vw, 9px) clamp(3px, 1vw, 9px);
    background-repeat: repeat-x;
    width: clamp(6px, 2vw, 18px);
}

/* Display three stars */
.star-3 {
    background-size: clamp(3px, 1vw, 9px) clamp(3px, 1vw, 9px);
    background-repeat: repeat-x;
    width: clamp(9px, 3vw, 27px);
}

.tooltip-name {
    text-align: center;
}

/* ICON WITH TEXT*/

.icon-text {
    align-items: center;
    justify-content: center;
}

/*=======*/

/* LOADING */

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fcf;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}

.loading-container {
    display: none;
}

.loading-container.htmx-request {
    display: block !important;
}

.leaderboard-title {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: clamp(1rem, 2vw, 1.5rem);
    gap: 0.4em;
}

.leaderboard-season-picker {
    display: inline-flex;
    margin: 0;
}

.leaderboard-season-picker .select,
.leaderboard-season-picker .select select {
    font-size: inherit;
    line-height: 1;
    height: auto;
}


/* ---------- Themed scrollbars, site-wide — thin rounded pill on a transparent
   track (the Collection Value sidebar design, promoted to every page).
   Chromium/Safari use the ::-webkit-scrollbar pseudos; Firefox gets the standard
   properties via @supports so the two don't disable each other. ---------- */
*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--bulma-text-weak, #8a8f98) 32%, transparent);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--bulma-text-weak, #8a8f98) 55%, transparent);
    background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--bulma-text-weak, #8a8f98) 42%, transparent) transparent;
    }
}