.main-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

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

.filters {
    flex: 1 1 300px;
    min-width: 350px;
}

#leaderboard-and-pagination {
    flex: 1 4 700px;
    margin-top: -25px;
}

#leaderboard-content {
    container-type: inline-size;
}

.announcement {
    min-width: 330px;
}


.part-dropdown {
    object-fit: contain;
    width: clamp(30px, 6vw, 50px);
    height: clamp(30px, 6vw, 50px);
}

/* ── Rune picker ──────────────────────────────────────────────────────────────
   A rune name is three facts glued into one string: the name, the level, and — on the
   off-season copy of the rune, which can only be equipped during the off-season — a
   "(S18.5)" suffix. The flat list this replaced made you read all three at 30px, over
   four near-identical rows, to tell "Shady Exchange Lv.2" from "Shady Exchange Lv.2
   (S18.5)" — and those two are different filter values, so mistaking them returns an
   empty board with nothing on screen to say why.

   So the string is taken apart into the two decisions it actually contains, on two
   axes: the name is a heading read once, the two periods are rows down the left, and
   levels are the columns. 214 name+season pairs become 116 shelves whose tiles line
   up, and "which period" and "which level" stop being one string to parse. The row
   that is equippable right now leads (see RunePickerGroup#variantsFor).

   That grid is the whole idea, so nothing else is allowed to compete with it: no
   resting borders, no shadows, no plates behind the art. Rarity is carried by the
   art's own glow (the .{Rarity}-rune-shadow classes every rune image on the site
   already wears), an outline means state, and gold means season. */
.rp {
    /* The accent this filter card already uses for its live controls (.deck-select,
       .global-range-chip) — declared with a fallback because index.css is also loaded
       by indexPastSeason.jte, which has no --hud-* block. */
    --rp-accent: var(--hud-green, #3fd08b);
    /* The gold that is contrast-checked as TEXT on both grounds; see common.css. */
    --rp-warn: var(--sh-gold-ink, #b07213);
}

/* Above the .tooltip layer (25): a charm tooltip from the board behind must never
   paint through an open picker. Still under the fixed header at 30. */
.rp-menu {
    width: 100%;
    padding-top: 5px;
    z-index: 26;
}

.rp-panel {
    padding: 3px;
    border: 1px solid var(--bulma-border);
    border-radius: 12px;
    background: var(--bulma-scheme-main);
    box-shadow: 0 14px 34px -14px rgb(0 0 0 / 0.55), 0 2px 8px -4px rgb(0 0 0 / 0.4);
    /* Same scroll treatment as the team picker two fields below, so the two panels
       on this card behave identically. */
    max-height: min(56vh, 400px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--bulma-text-weak) 45%, transparent) transparent;
}

.rp-panel::-webkit-scrollbar { width: 9px; }
.rp-panel::-webkit-scrollbar-track { background: transparent; }
.rp-panel::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--bulma-text-weak) 40%, transparent);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* The divider is keyed on being the first *visible* shelf (JS sets .is-first while
   filtering), not on DOM position: a sibling selector cannot know whether the shelf
   above it is one the query hid, and would leave a stray hairline under the panel's
   own top edge. */
.rp-shelf {
    padding: 7px 7px 8px;
    border-top: 1px solid color-mix(in srgb, var(--bulma-border) 65%, transparent);
}

.rp-shelf.is-first {
    border-top-color: transparent;
}

/* No `display` of its own, so [hidden] can do its job when the shelf is filtered out. */
.rp-shelf[hidden] { display: none; }

.rp-shelf__name {
    margin: 0 0 5px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--bulma-text-strong);
}

/* One row per period the rune exists in: the season, and the off-season copy. */
.rp-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.rp-row + .rp-row {
    margin-top: 5px;
}

/* Fixed width: the level tiles then line up in columns across every shelf, and "Any"
   keeps one predictable position instead of trailing the row at a different offset each
   time. Wide enough for "Off-Season" at this size — the word, not "S18.5", because what
   the fraction means is when the rune can be equipped. */
.rp-rail {
    flex: 0 0 auto;
    width: 3.9rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.rp-row__season {
    text-align: right;
    font-family: monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: var(--bulma-text-weak);
    cursor: help;
}

/* Only the off-season row is gold. The plain season number is the ordinary case and
   needs no warning colour; reserving the gold for the copy with a usable-window makes
   the colour mean something. */
.rp-row__season.is-off {
    color: var(--rp-warn);
}

.rp-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* No resting border: eight tiles a shelf, each boxed, turned the panel into a grid of
   outlines competing with the art inside them. The ground alone says "tile"; an outline
   is then free to mean something — hovered, focused, or picked. */
.rp-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 56px;
    padding: 4px 3px 3px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--bulma-scheme-main-bis);
    cursor: pointer;
    transition: border-color 0.14s, background-color 0.14s;
}

/* Rarity rides on the art's own glow — the .{Rarity}-rune-shadow classes in common.css
   that every other rune image on the site already wears. A tinted plate behind the art
   was invisible: the art is opaque hex-to-hex and covered it completely. */
.rp-tile__img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Mono because the level is a number you compare, not a word you read — the same
   reason the rating and alert-threshold fields on this page are mono. */
.rp-tile__lvl {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
    font-size: 0.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    /* Not --bulma-text-weak: the level IS the choice being made here, and on the light
       theme's near-white tile a weak grey reads as a caption you can skip. */
    color: var(--bulma-text);
}

/* A level-less rune has no caption to show; the shelf heading above already named it. */
.rp-tile__lvl:empty {
    display: none;
}

/* "Any level" — a scope, not a level, so it is deliberately not tile-shaped: a short pill
   that cannot be mistaken for a fifth level. */
.rp-any {
    padding: 3px 9px;
    border: 1px dashed color-mix(in srgb, var(--bulma-text-weak) 45%, transparent);
    border-radius: 99px;
    background: transparent;
    color: var(--bulma-text-weak);
    font-family: monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: border-color 0.14s, background-color 0.14s, color 0.14s;
}

.rp-pick:hover,
.rp-pick:focus-visible {
    border-color: color-mix(in srgb, var(--rp-accent) 55%, var(--bulma-border));
    background: color-mix(in srgb, var(--rp-accent) 10%, var(--bulma-scheme-main-bis));
}

.rp-any:hover,
.rp-any:focus-visible {
    border-style: solid;
    color: var(--bulma-text-strong);
}

.rp-pick:focus-visible {
    outline: 2px solid var(--rp-accent);
    outline-offset: 1px;
}

.rp-pick.is-picked {
    border-color: color-mix(in srgb, var(--rp-accent) 65%, transparent);
    background: color-mix(in srgb, var(--rp-accent) 16%, transparent);
}

.rp-any.is-picked {
    border-style: solid;
    color: var(--bulma-text-strong);
}

.rp-tile.is-picked .rp-tile__lvl {
    color: var(--bulma-text-strong);
}

/* While a row is scoped to any level, its level tiles are covered by that choice — dimmed
   to say so, still clickable to narrow back down to one. */
.rp-row.is-any .rp-tile {
    opacity: 0.45;
}

.rp-row.is-any .rp-tile:hover,
.rp-row.is-any .rp-tile:focus-visible {
    opacity: 1;
}

.rp-tile.is-picked::after {
    content: "✓";
    position: absolute;
    top: -5px;
    right: -5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--rp-accent);
    color: #06281a;
    font-size: 0.56rem;
    font-weight: 900;
    line-height: 15px;
    text-align: center;
}

.rp-note {
    margin: 0;
    padding: 8px 9px;
    font-size: 0.7rem;
    color: var(--bulma-text-weak);
}

.rp-note[hidden] { display: none; }

.rp-note b {
    font-weight: 600;
    color: var(--bulma-text-strong);
}

/* On a selected chip: says the pick is the rune at any level, which its value — a name
   with no level in it — does not say on its own. */
.rune-chip__any {
    margin-left: 0.35em;
    font-style: normal;
    font-size: 0.85em;
    opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
    .rp-tile { transition: none; }
}
/* The .icon-text overrides that used to live here existed only for the leaderboard's
   "last ranked ago" cell, which no longer uses .icon-text — see .last-played-ago
   below. index.css is loaded solely by index.jte and indexPastSeason.jte, and the
   only other .icon-text in the app (battle/midColumn.jte) renders under profile.jte,
   which loads common.css/profile.css and never this file. Leaving dead rules that
   stack icons vertically would be a trap for the next .icon-text added to this page. */

@media screen and (max-width: 768px) {
    .axie-info {
        margin-top: -3px !important;
    }
}

@container (max-width: 650px) {
    .pagination-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .pagination-link {
        display: none;
    }

    .pagination-list li:first-child .pagination-link,
    .pagination-list li:last-child .pagination-link,
    .pagination-list .is-current {
        display: inline-block;
    }

    .leaderboard-unit {
        margin-left: -10px;
        margin-right: -10px;
    }
}


@container (min-width: 651px) {
    .pagination-next, .pagination-previous {
        display: none;
    }
}

.pagination-container {
    container-type: inline-size;
    transition: all 0.3s ease;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--bulma-scheme-main);
    padding: 10px 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    z-index: 3;
}


.leaderboard-unit {
    display: block;
    border-bottom: 1px solid var(--bulma-border-leaderboard-unit);
    transition: background-color 0.3s;
}

.leaderboard-unit:hover {
    background-color: var(--bulma-hover-background-leaderboard-unit);
}

/* A live row is marked at BOTH ends. The "Played" column sits at the far right of a
   ~1000px row, while the bubble chart and the filters sit off to the left, so a signal
   that only exists on the right edge is unreadable to anyone whose gaze is on the chart
   — catching it means sweeping the full width of the screen. Mirroring it onto the row's
   left edge means the live state is peripherally visible from either side.

   Same --lr-fill that drives the rail and the right-hand glow, so all three decay in
   lockstep. Alpha peaks at 22% for a one-second-old row and is gone by the 59th second —
   weaker than the right-hand wash because this one sits under the rank numeral and the
   "new" tag, which have to stay readable.

   Drawn as background-image rather than a pseudo-element on purpose: backgrounds paint
   BELOW all content, so the axie artwork, rank tag and name need no z-index of their own
   and the row opens no stacking context. It layers over the background-color hover
   transition above, so a live row still visibly responds to hover.

   The fill is folded into the mix percentage — color-mix() does accept a calc() that
   reads a custom property; verified in Chromium that fill 100 yields alpha .22 and fill
   50 yields .11. */
.leaderboard-unit.is-live-row {
    background-image: linear-gradient(
        to right,
        color-mix(in srgb, var(--bulma-success-on-scheme) calc(var(--lr-fill, 0) * 0.22%), transparent),
        transparent 18%);
}

.rune-battle-image {
    width: clamp(15px, 3vw, 26px);
    height: clamp(15px, 3vw, 26px);
}

.axie-info {
    align-self: baseline;
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}

.axie-container .rune-battle-image {
    object-fit: contain;
    position: relative;
    align-self: center;
}

.axie-container {
    display: flex;
    align-items: center;
    width: calc(clamp(90px, 20vw, 200px) * 3 / 4);
}

.axie-container .axie-image {
    transform: translate(-20%, -5%) scale(1.2);
    margin-top: -10px;
}

.buttons.era-buttons {
    justify-content: center;
    margin: 8px;
}


.liquid-font {
    font-size: clamp(0.75rem, 2vw, 1rem);
}
.tag.vstar-tag {
    font-size: clamp(0.5rem, 1vw, 0.65rem);
    padding: 0.85em 0.3em 0.85em 0.3em;
    margin-left: 5px;
}
.vstar-tag img {
    width: clamp(10px, 1vw, 16px);
    height: clamp(10px, 1vw, 16px);
}

#dropdownRuneContent .dropdown-item,
#dropdownPartContent .dropdown-item {
    display: none;
    align-items: center;
    padding-bottom: 2px;
    padding-top: 2px;
}

#dropdownRuneContent .dropdown-item:nth-child(-n+10),
#dropdownPartContent .dropdown-item:nth-child(-n+10)  {
    display: flex;
    align-items: center;
    padding-bottom: 2px;
    padding-top: 2px;
}
.full-width-dropdown {
    display: block;
}
.tag.amount-tag {
    font-size: 0.65rem;
}
.tag.rating {
    padding: 0.85em 0.3em 0.85em 0.3em;
    height: 1em;
    font-size: clamp(0.4rem, 1vw, 0.65rem);
}

.chart-container svg {
    width: 100%;
    max-width: 960px;
    height: auto;
    margin: -10px;
}


.noUi-handle:before, .noUi-handle:after {
    display: none;
}

.slider {
    height: 10px;
}

/* noUiSlider ships a near-white track (#FAFAFA), which is the loudest thing on the
   card in dark mode. Bind both sliders to the scheme instead. */
.slider.noUi-target {
    background: var(--bulma-border-weak);
    border: none;
    box-shadow: none;
}

.slider .noUi-connect {
    background: var(--bulma-primary);
}

.slider .noUi-handle {
    height: 15px;
    width: 15px;
    top: -4px;
    right: -9px;
    border: 2px solid var(--bulma-primary);
    background: var(--bulma-scheme-main);
    border-radius: 50%;
    box-shadow: none;
    cursor: grab;
}

.slider .noUi-handle:active {
    cursor: grabbing;
}

.slider .noUi-handle:focus-visible {
    outline: 2px solid var(--bulma-link);
    outline-offset: 2px;
}

.slider-col {
    align-self: center;
}
.top-input {
    min-width: 70px;
}

/* ── Online filter ────────────────────────────────────────────────────────────
   The rail teaches its own scale. Ticks sit exactly 2s apart across the first
   minute (the leading 30% of the track, where the slider steps by 1s) and
   exactly 1m apart across the rest — so the change in step size is legible,
   not just felt. */
.online-filter {
    --online-fine-zone: 30%;   /* share of the track covering 0-60s */
    margin-bottom: 0.75rem;
}

.online-filter__label {
    margin-bottom: 0.4rem;
}

/* --bulma-primary is scheme-invariant (41% lightness in both themes) and drops to
   ~2:1 on a white card. --bulma-primary-on-scheme is the adaptive one: 21% light,
   41% dark. This span is the only place the chosen value is shown, so it has to
   hold up in both. */
.online-filter__value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bulma-primary-on-scheme);
    letter-spacing: 0.01em;
}

/* "off" is a state, not a magnitude — it never gets the accent colour, so the
   card answers "am I filtering?" without being read. */
.online-filter.is-off .online-filter__value {
    color: var(--bulma-text-weak);
    font-weight: 500;
}

.online-filter__rail {
    position: relative;
}

.online-filter__scale {
    display: flex;
    height: 4px;
    margin-top: 3px;
    color: var(--bulma-text-weak);
    opacity: 0.55;
}

.online-filter__ticks {
    background-image: linear-gradient(90deg, currentColor 0 1px, transparent 1px);
    background-repeat: repeat-x;
}

/* 30 ticks over 0-60s → one every 2 seconds. */
.online-filter__ticks--fine {
    width: var(--online-fine-zone);
    background-size: calc(100% / 30) 100%;
}

/* 19 ticks over 1-20m → one every minute. */
.online-filter__ticks--coarse {
    width: calc(100% - var(--online-fine-zone));
    background-size: calc(100% / 19) 100%;
}

.online-filter__marks {
    position: relative;
    height: 0.95rem;
    margin-top: 1px;
    font-size: 0.625rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--bulma-text-weak);
}

.online-filter__marks span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

.online-filter__marks span:first-child {
    transform: none;
}

.online-filter__marks span:last-child {
    transform: translateX(-100%);
}

/* Premium gate: dim only the parts that are actually inert. The sentence and the
   "ranked" link stay at full contrast — the link is still clickable and focusable,
   so it gets no disabled exemption, and the copy is the upsell. */
.online-filter.is-locked .online-filter__rail,
.online-filter.is-locked .online-filter__scale,
.online-filter.is-locked .online-filter__marks {
    opacity: 0.45;
    filter: saturate(0.15);
}

.online-filter.is-locked .online-filter__rail {
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    .online-filter .slider .noUi-handle {
        height: 24px;
        width: 24px;
        top: -8px;
        right: -13px;
    }
}

/* ── "Played" (last ranked) ───────────────────────────────────────────────────
   One line, right-aligned, no icon. The column is an unsized 1/12 Bulma column —
   about 49px at a 390px viewport — so the old 16px clock icon spent a third of the
   budget on information the header already carried, and the standalone "ago" span
   forced a third line through the global .icon-text { flex-direction: column }.
   Both are gone.

   Only one state is highlighted: under a minute. That is the seam the online filter
   already teaches (1s slider steps below 60s, 1m above, and formatOnlineFilter
   switches "s" -> "m" there). Everything older is plain body text — the numeral and
   its unit letter carry the magnitude.

   Deliberately no ramp of intermediate weights or muted greys. The project ships no
   @font-face, and on the resulting system stack 400/500 render identically and
   550/600/700 render identically, so a multi-step weight ramp is fiction on most
   machines. --bulma-text-weak measures 4.04:1 and --bulma-text at opacity .75
   measures 4.28:1 against the light row-hover background, both under 4.5:1, so
   neither is available for de-emphasis here. */
.last-played-ago {
    /* anchors the live rail, which is positioned against the cell, not the readout */
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    /* Right edge, not left: the left edge of this cell butts gaplessly against the
       axie artwork of "Last ranked team". Right-aligning puts the scan column against
       the page's quiet margin, and it lands on the right-aligned header. */
    justify-content: flex-end;
    /* Reserved for the live rail on EVERY row, live or not, so the numerals keep a
       common right edge and nothing shifts when a row crosses 60s and the rail goes. */
    padding-right: 8px;
    /* was clamp(0.65rem, 1vw, 0.85rem), which resolved to 10.4px on everything under
       ~1040px — below the 12px floor the rest of the page uses. Dropping the icon and
       the "ago" word bought the room; the desktop cap is unchanged. */
    font-size: clamp(0.75rem, 1.6vw, 0.85rem);
    /* The row is a single <a>, so without this the cell inherits --bulma-link-text. */
    color: var(--bulma-text);
}

/* is-past and is-none intentionally have no rules of their own — this base IS their
   styling. They exist as hooks the ticker swaps. */
.last-played-ago__value {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-weight: 400;
    /* Same numeric-readout recipe as .online-filter__value, so the column that answers
       "who is on right now" is set in the same ink as the control that asks. */
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

/* Scaffolding for the number, never the point. */
.last-played-ago__unit {
    font-size: 0.85em;
    margin-left: 0.06em;
}

/* Under a minute. Three redundant channels — a rail no other row has, bold, and the
   accent — because in the light theme --bulma-success-on-scheme is marginally
   *lighter* than --bulma-text on the card (8.14:1 vs 9.45:1), so hue alone would
   slightly reduce prominence rather than add it. The rail and the weight do the work;
   the colour only confirms. */
.last-played-ago__value.is-live {
    color: var(--bulma-success-on-scheme);
    font-weight: 700;
}

/* The live state is driven by ONE number: --lr-fill, 100 down to 1 across the minute,
   set inline by LastRanked.fillFor() at render and rewritten once a second by the
   ticker. The rail reads it as height, the glow reads it as opacity, so the bar and
   the wash decay in lockstep off a single write. */

/* The rail: a bar down the right edge of the cell that drains from the top as the
   minute runs out. One second ago is a full-height bar; the 59th second is a 1% stub
   sitting on the floor of the cell; at 60s the row stops being live and nothing draws.

   Bottom-anchored so the DRAINING reads as downward motion — the remaining fill falls
   toward the floor rather than shrinking toward the middle.

   Right edge rather than left: the cell's left edge butts gaplessly against the axie
   artwork, so a rail there reads as a divider between the two columns. Against the
   page's quiet margin it reads as a scan line down the table instead. */
.last-played-ago__rail {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 3px;
    height: calc(var(--lr-fill, 0) * 1%);
    border-radius: 2px 0 0 2px;
    background: var(--bulma-success-on-scheme);
    /* Height and opacity change once a second; a transition would still be mid-flight
       when the next tick lands, and 50 rows of interpolation is motion this table has
       twice chosen against. */
    transition: none;
}

/* The glow: the rail's colour bled leftward across the whole cell, fading out before
   it reaches the axie artwork. Full cell height — it is the rail's INTENSITY that
   decays, not its reach, so a freshly-finished battle lights the whole cell and a
   59-second-old one is a barely-there tint.

   Peak alpha is capped at 30% inside the gradient itself, then modulated by --lr-fill,
   so even a 1-second-old row is a wash rather than a fill and the numeral on top of it
   keeps its measured contrast. */
.last-played-ago__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: calc(var(--lr-fill, 0) / 100);
    background: linear-gradient(
        to left,
        color-mix(in srgb, var(--bulma-success-on-scheme) 30%, transparent),
        transparent 92%);
    transition: none;
}

/* The readout sits above the wash. Absolutely-positioned children paint over in-flow
   content regardless of source order, so the text has to claim a layer explicitly. */
.last-played-ago__num,
.last-played-ago__unit {
    position: relative;
    z-index: 1;
}

/* Non-live rows show neither, even though both elements survive a tier flip. This is
   what makes the ticker's job a single class swap. */
.last-played-ago__value:not(.is-live) .last-played-ago__rail,
.last-played-ago__value:not(.is-live) .last-played-ago__glow {
    display: none;
}

.morph-announce {
    --morph-accent: 260 91% 62%;
    border: 1px solid hsl(var(--morph-accent) / 0.35);
    background: hsl(var(--morph-accent) / 0.08);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 0.5em !important;
}

.morph-announce-link {
    color: hsl(var(--morph-accent));
    font-weight: 700;
}

.morph-announce-hint {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.92em;
    opacity: 0.8;
}

.morph-announce-try {
    display: inline-block;
    margin-top: 4px;
    color: hsl(var(--morph-accent));
    font-weight: 600;
}

.morph-announce-try:hover {
    text-decoration: underline;
}