: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;
}

/* Above every in-card overlay (level pills, class icons, sticky table headers and the
   page dropdowns all top out at 20) but below the fixed site header at 30 — a tooltip
   at 5 tied with the badges it floats over and lost the tie on DOM order. */
.tooltip {
    z-index: 25;
    display: none;
    width: max-content;
    position: absolute;
    top: 0;
    left: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   RUNE & CHARM TOOLTIP  (templates/tooltip/rune.jte, charm.jte)

   One card, split down the middle. Left is who the item is: the class crest
   and, on a charm, its cost top-left; the level stars centred; the season
   right; the art below them; the name at the foot. Right is what it
   does: the attach rule or the rune's tag, then one line per trigger. The two
   pairs of boxes this replaced read as two tooltips stuck together, and spent
   4px of border on the seam between them.

   Two rules hold it together.

   Rarity owns the colour, and only on shapes — the glow under the art, the
   bullet beside each line, the star pill. The ramp at the top of this file is tuned to
   glow on a dark ground and Epic measures about 2:1 as type on white, so the
   tier is never written in its own hue; same finding as the header's section
   colours. Class stays on the crest, where it already was.

   The braces are markup, not punctuation. ItemRules turns {Status} into a chip,
   <Mechanic> into italics and [Form] into small caps, and lifts a charm's
   "(Alter Any)" out of the prose into the row above the lines. It escapes
   before it marks up, which is what lets the templates print the result.

   --bulma-background-tooltip is deliberately not used: it is a warm cream that
   belongs to nothing else here, and the collection-value tooltips already left
   it for the same reason.

   The note, premium and Atia tooltips are plain text bubbles and want none of
   the layout, so they take .tt-note further down — the same surface, border,
   shadow and entrance, and nothing else.
   ═════════════════════════════════════════════════════════════════════════ */
:root,
.theme-light {
    --tt-surface: #ffffff;
    --tt-surface-2: hsl(220, 24%, 97%);
    --tt-line: hsl(220, 16%, 86%);
    --tt-ink: hsl(222, 30%, 15%);
    --tt-ink-quiet: hsl(220, 10%, 44%);
    --tt-chip: hsl(220, 24%, 95%);
    --tt-shadow: 0 1px 2px hsl(220, 30%, 20%, 0.1), 0 16px 34px -16px hsl(220, 30%, 20%, 0.3);
}

.theme-dark {
    --tt-surface: hsl(223, 24%, 14%);
    --tt-surface-2: hsl(223, 22%, 18%);
    --tt-line: hsl(226, 16%, 27%);
    --tt-ink: hsl(220, 22%, 94%);
    --tt-ink-quiet: hsl(220, 12%, 64%);
    --tt-chip: hsl(223, 20%, 22%);
    --tt-shadow: 0 1px 2px hsl(0, 0%, 0%, 0.35), 0 16px 34px -14px hsl(0, 0%, 0%, 0.75);
}

.tt-card {
    /* every hue on the card comes from here */
    --tt-rare: var(--common-color);
    /* the corner marks and the stars share a size, so the band lines up */
    --tt-mark: clamp(16px, 3vw, 22px);
    --tt-star: clamp(8px, 1.6vw, 11px);

    display: flex;
    text-align: left;
    font-size: clamp(0.65rem, 2vw, 0.8rem);
    line-height: 1.45;
    color: var(--tt-ink);
    background: var(--tt-surface);
    border: 1px solid var(--tt-line);
    border-radius: 12px;
    box-shadow: var(--tt-shadow);
    overflow: hidden;
    /* common.js flips the wrapper between display none and block, so this runs
       once per open without the JS having to know about it */
    animation: tt-card-in 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

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

@keyframes tt-card-in {
    from { opacity: 0; transform: translateY(3px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tt-card,
    .tt-note { animation: none; }
}

/* ── identity ─────────────────────────────────────────────────────────────
   The three marks are pinned as a band so they keep their corners however tall
   the description runs; the art and name centre in what is left. Each
   column centres in the height the other one sets, so neither is left with a
   pocket of air at the bottom. */
.tt-id {
    position: relative;
    flex: 0 0 auto;
    width: clamp(96px, 16vw, 124px);
    padding: calc(var(--tt-mark) + 0.6rem) 0.55rem 0.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--tt-surface-2);
    border-right: 1px solid var(--tt-line);
}

.tt-crest {
    position: absolute;
    top: 6px;
    left: 6px;
    width: var(--tt-mark);
    text-align: center;
    font-weight: 700;
    line-height: 1.1;
}

.tt-crest img {
    display: block;
    width: 100%;
}

.tt-cost {
    display: block;
    font-size: 0.9em;
}

.tt-season {
    position: absolute;
    top: 7px;
    right: 6px;
    font-weight: 700;
    color: var(--tt-ink-quiet);
}

/* The badge the team row already puts under a rune icon: the tier's own star
   art in the tier's own pill. The art carries the rarity by itself, which is
   what lets it hold this slot alone — the rarity spark that used to sit here
   said the same thing twice.

   On a rune the count is the level: three stars fill a tier and then the rune
   is promoted to the next one, which is why RuneModelFactory stops at three on
   purpose. A charm has no level, so it wears one star and the badge is simply
   its tier.

   In flow above the art rather than pinned to the corner band, so the column
   gap sets the same distance on both sides of the art — badge, art, name, each
   one step apart. The crest and season stay in their corners. */
.tt-stars {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    padding: 2px 4px;
}

.tt-stars i {
    display: block;
    height: var(--tt-star);
    background-size: var(--tt-star) var(--tt-star);
    background-repeat: repeat-x;
}

.tt-star-1 i { width: var(--tt-star); }
.tt-star-2 i { width: calc(var(--tt-star) * 2); }
.tt-star-3 i { width: calc(var(--tt-star) * 3); }

.tt-stars.Common { background: #616060; }
.tt-stars.Rare   { background: #104715; }
.tt-stars.Epic   { background: #0f444a; }
.tt-stars.Mystic { background: #310f53; }

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

/* The art, unframed and as large as the column allows — it is the thing being
   identified, and a frame around it only competed. Rarity stays present as the
   same drop-shadow the row icons already wear (.Epic-rune-shadow and friends),
   scaled up for this size. */
.tt-art {
    width: clamp(52px, 10vw, 72px);
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tt-rare) 65%, transparent));
}

.tt-title {
    font-weight: 700;
    line-height: 1.22;
    text-align: center;
    text-wrap: balance;
}

/* ── rules ───────────────────────────────────────────────────────────────── */
.tt-rules {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: clamp(168px, 30vw, 232px);
    padding: 0.7rem 0.75rem 0.75rem;
}

.tt-cap {
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--tt-line);
    color: var(--tt-ink-quiet);
}

.tt-cap b {
    color: var(--tt-ink);
    font-weight: 700;
}

.tt-lines {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    gap: 0.4rem;
}

.tt-line {
    position: relative;
    padding-left: 0.75rem;
    color: var(--tt-ink-quiet);
}

.tt-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 4px;
    height: 4px;
    border-radius: 1px;
    transform: rotate(45deg);
    background: color-mix(in srgb, var(--tt-rare) 75%, var(--tt-ink-quiet));
}

/* The game's grammar, set. One emphasis each: a keyword is chipped, a mechanic
   leans, a form goes to small caps, and a signed value steps up to full ink. */
.tt-kw {
    padding: 0.02em 0.3em;
    border: 1px solid color-mix(in srgb, var(--tt-ink) 12%, transparent);
    border-radius: 4px;
    background: var(--tt-chip);
    color: var(--tt-ink);
    font-weight: 700;
    white-space: nowrap;
}

.tt-mech {
    color: var(--tt-ink);
    font-style: italic;
    font-weight: 600;
}

.tt-form {
    color: var(--tt-ink);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.tt-num {
    color: var(--tt-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* a value and the keyword it applies to are one fact, so they wrap as one */
.tt-pair {
    white-space: nowrap;
}

/* ── the plain bubbles ─────────────────────────────────────────────────────
   The note, the two premium notes and the Atia shrine. Same surface, border,
   shadow and entrance as the item card, so a tooltip reads as a tooltip
   whatever it happens to be carrying.

   The pair these replaced was 120px wide whatever was in it, which turned any
   sentence over four words into a column of two-word lines — "this feature is
   only available for premium users" came out six lines tall. Width is now the
   message's business, up to a measure that still reads at a glance. */
.tt-note {
    max-width: clamp(160px, 34vw, 230px);
    padding: 0.55rem 0.7rem;
    background: var(--tt-surface);
    border: 1px solid var(--tt-line);
    border-radius: 12px;
    box-shadow: var(--tt-shadow);
    color: var(--tt-ink);
    font-size: clamp(0.65rem, 2vw, 0.8rem);
    line-height: 1.45;
    text-align: center;
    animation: tt-card-in 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Two panels when there is a second thing to say — the shrine's last comment
   beside its countdown. One seam, the same way the item card is divided. */
.tt-note--panels {
    display: flex;
    max-width: none;
    padding: 0;
}

.tt-note--panels > * {
    padding: 0.55rem 0.7rem;
}

.tt-note--panels > * + * {
    border-left: 1px solid var(--tt-line);
}

.tt-note__status {
    flex: 0 0 auto;
    width: clamp(96px, 18vw, 132px);
}

.tt-note__aside {
    width: clamp(136px, 26vw, 196px);
    text-align: left;
    color: var(--tt-ink-quiet);
}

.tt-note__label {
    display: block;
    color: var(--tt-ink-quiet);
}

.tt-note__value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The shrine's streak, under a rule: a second fact about the shrine rather than
   a continuation of the countdown. */
.tt-note__streak {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--tt-line);
    font-size: 0.9em;
    line-height: 1.25;
    color: var(--tt-ink-quiet);
}

.tt-note__streak strong {
    color: var(--tt-ink);
}

.tt-note__streak em {
    display: block;
    font-style: normal;
    font-size: 0.86em;
    opacity: 0.75;
}

.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));
}

.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);
}

/* 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;
    }
}