/* The shared components: buttons, the wallet bar, the top bar with Back, the profile chip and portraits, and
   the pending attack and raid buttons. Game/docs/ui-style.md lists every component and its classes.
   index.html loads the stylesheets in a fixed order (Game/docs/ui-style.md, "Stylesheets"). */

/* ---------------------------------------------------------------------------
   Buttons and navigation shared by the themed screens
   --------------------------------------------------------------------------- */
.rj-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 1.25rem;
    border: 0;
    border-radius: var(--r-pill);
    font: inherit;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}

.rj-button--primary {
    background: var(--theme-accent, var(--gold));
    color: var(--theme-button-text, var(--on-gold));
    box-shadow: 0 4px 0 color-mix(in srgb, var(--theme-accent, var(--gold)) 55%, black);
}

.rj-button--secondary {
    background: color-mix(in srgb, var(--theme-surface, var(--surface)) 94%, var(--theme-text, black));
    color: var(--theme-text, var(--ink));
    border: 2px solid var(--theme-accent, var(--gold));
}

.rj-button:active { transform: scale(var(--press-scale)); }
.rj-button:disabled { opacity: var(--disabled-opacity); cursor: default; }

.rj-nav {
    display: flex;
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   The wallet bar
   --------------------------------------------------------------------------- */
/* The coins pill gets the most width, because its number is the longest; the shields pill the least. */
.rj-wallet {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.1fr) minmax(0, 0.85fr);
    gap: 0.4rem 1.05rem;
    /* Room for the first pill's icon, which overlaps the pill's left edge. */
    padding-left: 0.45rem;
}

/* One balance: the pill, and the currency's name under it across the whole width, so that the longest name ("Matchday
   tickets") fits at 360 px. */
.rj-wallet__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

/* The pill: the icon over the left edge, the number in display text, the time to the next spin under it, and the shop's +
   on the right edge of the coins and spins pills. */
.rj-wallet__pill {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 2.1rem;
    padding: 0.15rem 0.35rem 0.15rem 1.6rem;
    border: var(--ui-border) solid var(--ui-outline);
    border-radius: 0.8rem;
    background: var(--ui-pill-bg);
    box-shadow: inset 0 0 0 1.5px var(--ui-pill-rim), inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 2px 0 var(--ui-outline);
    /* The number's type size follows the pill's inner width (cqw), see .rj-wallet__value. */
    container-type: inline-size;
}

.rj-wallet__item.has-plus .rj-wallet__pill { padding-right: 0.95rem; }

/* A span is the blank disc of a theme without art; an img is the theme's symbol art. */
.rj-wallet__icon {
    position: absolute;
    top: 50%;
    left: -0.45rem;
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid var(--ui-outline);
    border-radius: 50%;
    background: var(--theme-accent, var(--gold));
    transform: translateY(-50%);
}

img.rj-wallet__icon {
    left: -0.55rem;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 0;
    background: none;
    object-fit: contain;
    filter: drop-shadow(0 2px 0 var(--ui-outline)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

/* The art fade (index.html, "The art fade"): the large backgrounds stay transparent until the browser has the whole file,
   so the player never sees one drawn in strips, and fade in when they arrive after they entered the page. */
img.rj-splash__bg,
img.rj-site__bg,
img.rj-theme-card__splash,
img.rj-welcome__bg {
    opacity: 0;
}

img.rj-splash__bg[data-art-loaded],
img.rj-site__bg[data-art-loaded],
img.rj-theme-card__splash[data-art-loaded],
img.rj-welcome__bg[data-art-loaded] {
    opacity: 1;
}

img.rj-splash__bg[data-art-loaded="fade"],
img.rj-site__bg[data-art-loaded="fade"],
img.rj-theme-card__splash[data-art-loaded="fade"],
img.rj-welcome__bg[data-art-loaded="fade"] {
    transition: opacity 0.2s ease-out;
}

.rj-wallet__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    color: var(--theme-text-muted, var(--ink-3));
}

/* A currency number is never cut off: the type shrinks so that --len characters (CurrencyPill.razor) fit the pill's inner
   width. A Lilita One digit with its outline is about 0.62 em wide, and 0.8rem is the smallest size we allow. */
.rj-wallet__value {
    display: block;
    min-width: 0;
    white-space: nowrap;
    font-family: var(--ui-font-display);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    font-size: clamp(0.8rem, calc(100cqw / (var(--len, 5) * 0.62)), 1.05rem);
    line-height: 1.15;
    letter-spacing: 0;
    text-align: center;
    color: var(--ui-pill-ink);
    -webkit-text-stroke: 0.18em var(--ui-pill-stroke);
    paint-order: stroke fill;
}

.rj-wallet__regen {
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    color: var(--ui-pill-ink-2);
}

/* The pulse on the spins pill at each tap on Spin. WalletBar draws a new pill element per spin, so the browser starts the
   animation again at each spin. */
.rj-wallet__item--spins.is-pulse { animation: rj-wallet-pulse 0.5s ease-out; }

@keyframes rj-wallet-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .rj-wallet__item--spins.is-pulse { animation: none; }
}

.rj-topbar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rj-topbar__row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.rj-topbar__back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.35rem;
    margin-left: -0.35rem;
    font-weight: 700;
    color: var(--theme-text-muted, var(--ink-2));
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
   The profile chip and the portraits
   --------------------------------------------------------------------------- */
/* The profile chip: the portrait in a thick ring and the name in display text. */
.rj-profile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
}

.rj-profile__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--ui-font-display);
    font-size: 1.15rem;
    font-weight: 400;
    color: #ffffff;
    -webkit-text-stroke: 0.2em var(--ui-outline);
    paint-order: stroke fill;
    text-shadow: 0 0.09em 0 var(--ui-outline);
}

.rj-portrait {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
}

.rj-portrait__art {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* A theme without art shows a disc in its colours with the portrait's number. */
.rj-portrait--placeholder {
    background: radial-gradient(circle at 50% 38%, var(--theme-accent, var(--gold)) 0 28%, color-mix(in srgb, var(--theme-primary, var(--surface-lift)) 30%, var(--theme-background, black)) 29%);
    border: 2px solid var(--theme-accent, var(--gold));
}

.rj-portrait__number {
    align-self: end;
    margin-bottom: 8%;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--theme-text, var(--ink));
}

.rj-profile__portrait {
    width: 2.6rem;
    height: 2.6rem;
    box-shadow: 0 0 0 2.5px var(--ui-outline), 0 3px 0 2.5px var(--ui-outline);
}

.rj-pending__attack {
    background: var(--theme-danger, var(--danger));
    color: var(--theme-danger-text, var(--ink));
}

.rj-pending__raid {
    background: var(--theme-accent, var(--gold));
    color: var(--theme-button-text, var(--on-gold));
}

.rj-pending__attack,
.rj-pending__raid {
    min-height: 2.75rem;
    padding: 0 0.9rem;
    font-size: 0.85rem;
}

/* ---------------------------------------------------------------------------
   The casual-game components (Game/docs/ui-style.md, "Components"). Each reads only the --ui-* tokens in base.css, so
   it takes each theme's colours. The Razor components in Components/Ui draw this markup; a screen may also use the
   classes on its own elements.
   --------------------------------------------------------------------------- */

/* Display text: the display font in white with a dark outline and a drop shadow, for headings, numbers and button
   labels. The outline is a stroke under the fill (paint-order), so the letters keep their full width. */
.rj-display {
    font-family: var(--ui-font-display);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #ffffff;
    -webkit-text-stroke: 0.2em var(--ui-outline);
    paint-order: stroke fill;
    text-shadow: 0 0.09em 0 var(--ui-outline);
}

/* --- GameButton (Components/Ui/GameButton.razor) ---------------------------------------------------------------
   A chunky button: one dark outline, a vertical gradient with a lighter top highlight, a thick darker bottom edge, and a
   press that moves the face down onto that edge. The edge is an inset shadow inside the outline, so the browser draws
   the face and the edge as one shape; the bottom padding adds the edge's height, so the label stays centred on the face.
   The bottom margin keeps room for the press. Variants set the four colours; sizes set the height and the type. */
.rj-gbtn {
    --gb-light:  var(--ui-primary-light);
    --gb-face:   var(--ui-primary);
    --gb-dark:   var(--ui-primary-dark);
    --gb-ink:    var(--ui-on-primary);
    --gb-stroke: var(--ui-outline);

    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    box-sizing: border-box;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin: 0 0 var(--ui-edge);
    padding: 0.3rem 1rem calc(0.3rem + var(--ui-edge));
    border: var(--ui-border) solid var(--ui-outline);
    border-radius: var(--ui-radius-button);
    background: linear-gradient(180deg, var(--gb-light) 0%, var(--gb-face) 48%, var(--gb-face) 72%, color-mix(in srgb, var(--gb-face) 80%, var(--gb-dark)) 100%);
    box-shadow:
        inset 0 calc(-1 * var(--ui-edge)) 0 var(--gb-dark),
        0 0.2rem 0.35rem var(--ui-shadow);
    color: var(--gb-ink);
    font-family: var(--ui-font-display);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    -webkit-text-stroke: 0.18em var(--gb-stroke);
    paint-order: stroke fill;
    text-shadow: 0 0.08em 0 var(--gb-stroke);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out, filter var(--t-fast);
}

/* The gloss: a lighter band over the top half of the face. */
.rj-gbtn::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0.14rem;
    left: 0.45rem;
    right: 0.45rem;
    height: 42%;
    border-radius: calc(var(--ui-radius-button) - 0.3rem) calc(var(--ui-radius-button) - 0.3rem) 0.5rem 0.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08));
    pointer-events: none;
}

.rj-gbtn:active:not(:disabled),
.rj-gbtn.is-pressed {
    transform: translateY(var(--ui-press));
    box-shadow:
        inset 0 calc(var(--ui-press) - var(--ui-edge)) 0 var(--gb-dark),
        0 0.1rem 0.2rem var(--ui-shadow);
}

.rj-gbtn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

.rj-gbtn:disabled,
.rj-gbtn[aria-disabled="true"] {
    cursor: default;
    filter: grayscale(0.85) brightness(0.92);
    opacity: 0.75;
}

.rj-gbtn--secondary {
    --gb-light: var(--ui-secondary-light);
    --gb-face:  var(--ui-secondary);
    --gb-dark:  var(--ui-secondary-dark);
    --gb-ink:   var(--ui-on-secondary);
}

.rj-gbtn--danger {
    --gb-light: var(--ui-danger-light);
    --gb-face:  var(--ui-danger);
    --gb-dark:  var(--ui-danger-dark);
    --gb-ink:   var(--ui-on-danger);
}

/* A light secondary face (putki's white) takes dark text with no outline. */
[data-theme="putki"] .rj-gbtn--secondary {
    --gb-stroke: transparent;
}

/* Ghost: a quiet button for Back, Close and Cancel. A translucent dark face, white text, no edge colour. */
.rj-gbtn--ghost {
    --gb-light: rgba(255, 255, 255, 0.2);
    --gb-face:  rgba(0, 0, 0, 0.32);
    --gb-dark:  rgba(0, 0, 0, 0.45);
    --gb-ink:   #ffffff;
}

.rj-gbtn--ghost::before { opacity: 0.35; }

.rj-gbtn--lg {
    min-height: 3.5rem;
    padding: 0.35rem 1.4rem calc(0.35rem + var(--ui-edge));
    border-radius: calc(var(--ui-radius-button) + 0.15rem);
    font-size: 1.45rem;
}

.rj-gbtn--md {
    min-height: 3rem;
    font-size: 1.15rem;
}

.rj-gbtn--sm {
    padding: 0.2rem 0.75rem calc(0.2rem + var(--ui-edge));
    font-size: 0.95rem;
}

/* A button as wide as its container. */
.rj-gbtn--block { display: flex; width: 100%; }

.rj-gbtn__icon {
    flex: none;
    width: 1.7em;
    height: 1.7em;
    object-fit: contain;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3));
}

/* An icon over the label, for a square button. */
.rj-gbtn--stacked {
    flex-direction: column;
    gap: 0.05rem;
}

.rj-gbtn__sub {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 800;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

/* --- CountBadge (Components/Ui/CountBadge.razor) -----------------------------------------------------------------
   A red disc with a white number at the top right corner of its button, for something waiting there: a pending attack,
   a claimable reward. With no number it is a dot. The parent must be positioned. */
.rj-count-badge {
    position: absolute;
    z-index: 2;
    top: -0.45rem;
    right: -0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.3rem;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--ui-badge) 70%, white), var(--ui-badge) 60%);
    box-shadow: 0 2px 0 var(--ui-outline), 0 2px 5px var(--ui-shadow);
    color: var(--ui-on-badge);
    font-family: var(--ui-font-display);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1;
    -webkit-text-stroke: 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    pointer-events: none;
    animation: rj-ui-pop 0.45s var(--ui-pop) both;
}

.rj-count-badge--dot {
    min-width: 0.95rem;
    width: 0.95rem;
    height: 0.95rem;
    padding: 0;
    top: -0.2rem;
    right: -0.2rem;
}

/* --- Panel and Ribbon (Components/Ui/Panel.razor, Components/Ui/Ribbon.razor) -------------------------------------
   A framed card: a coloured border, an inner highlight, a soft shadow. A ribbon header sits on its top edge. */
.rj-panel {
    position: relative;
    box-sizing: border-box;
    padding: 0.9rem;
    border: 3px solid var(--ui-panel-border);
    border-radius: var(--ui-radius-panel);
    background: linear-gradient(180deg, var(--ui-panel-light) 0%, var(--ui-panel) 38%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.28),
        inset 0 0 0 2px color-mix(in srgb, var(--ui-panel-border) 35%, transparent),
        0 0 0 2px var(--ui-outline),
        0 6px 0 2px color-mix(in srgb, var(--ui-outline) 55%, transparent),
        0 12px 24px var(--ui-shadow);
    color: var(--ui-panel-ink);
}

/* A panel with a ribbon leaves room at its top for the ribbon's lower half. */
.rj-panel--ribbon { padding-top: 1.6rem; margin-top: 1.1rem; }

.rj-panel > .rj-ribbon:first-child {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -55%);
    max-width: calc(100% - 2.5rem);
}

.rj-panel__muted { color: var(--ui-panel-ink-2); }

.rj-ribbon {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 2.3rem;
    margin: 0;
    padding: 0.2rem 1.25rem 0.3rem;
    border: var(--ui-border) solid var(--ui-outline);
    border-radius: 0.55rem;
    background: linear-gradient(180deg, var(--ui-ribbon-light) 0%, var(--ui-ribbon) 55%, color-mix(in srgb, var(--ui-ribbon) 75%, var(--ui-ribbon-dark)) 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 var(--ui-ribbon-dark), 0 3px 0 var(--ui-outline);
    color: #ffffff;
    font-family: var(--ui-font-display);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    -webkit-text-stroke: 0.18em var(--ui-outline);
    paint-order: stroke fill;
    text-shadow: 0 0.08em 0 var(--ui-outline);
}

/* The folded tails behind both ends. */
.rj-ribbon::before,
.rj-ribbon::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -0.45rem;
    width: 1.1rem;
    height: 70%;
    border: var(--ui-border) solid var(--ui-outline);
    background: var(--ui-ribbon-dark);
}

.rj-ribbon::before {
    left: -0.75rem;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%);
    border-right: 0;
}

.rj-ribbon::after {
    right: -0.75rem;
    clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%);
    border-left: 0;
}

/* --- Tooltip (Components/Ui/Tooltip.razor) -------------------------------------------------------------------------
   A small rounded bubble with a tail, in the theme's light colour with dark text and a soft shadow. The modifier names
   the side the tail is on; --tail-x moves the tail along the top or bottom edge (default: the middle). */
.rj-tip {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0.5rem 0.8rem;
    border-radius: 0.9rem;
    background: var(--ui-bubble);
    color: var(--ui-bubble-ink);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.28);
    animation: rj-ui-pop 0.35s var(--ui-pop) both;
}

.rj-tip::after {
    content: "";
    position: absolute;
    width: 0.9rem;
    height: 0.9rem;
    background: inherit;
    border-radius: 0.15rem;
    transform: translateX(-50%) rotate(45deg);
}

.rj-tip--tail-top::after    { top: -0.35rem;    left: var(--tail-x, 50%); }
.rj-tip--tail-bottom::after { bottom: -0.35rem; left: var(--tail-x, 50%); }
.rj-tip--tail-none::after   { display: none; }

/* --- CurrencyPill (the wallet bar, Components/Meta/WalletBar.razor) ----------------------------------------------------
   The icon overlaps the pill's left edge, the number is display text, and a small green + opens the shop. */
.rj-pill-plus {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: -0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border: 2px solid var(--ui-outline);
    border-radius: 0.45rem;
    background: linear-gradient(180deg, var(--ui-plus-light) 0%, var(--ui-plus) 55%, var(--ui-plus-dark) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 0 var(--ui-outline);
    transform: translateY(-50%);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* The tap area is 44 px square around the small button. */
.rj-pill-plus::after {
    content: "";
    position: absolute;
    inset: calc((1.3rem - 2.75rem) / 2);
}

.rj-pill-plus .rj-icon {
    width: 0.85rem;
    height: 0.85rem;
}

.rj-pill-plus:active { transform: translateY(calc(-50% + 1px)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 var(--ui-outline); }

/* --- BottomNav (Components/Ui/BottomNav.razor) -------------------------------------------------------------------------
   A bar of icon buttons with short labels and the big Spin button in the centre. Each item is at least 44 px. */
.rj-bnav {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 0.25rem;
    padding: 0.4rem 0.4rem 0.35rem;
    border: var(--ui-border) solid var(--ui-outline);
    border-radius: 1.2rem;
    background: linear-gradient(180deg, var(--ui-nav-light) 0%, var(--ui-nav) 45%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), inset 0 -3px 0 rgba(0, 0, 0, 0.2), 0 4px 0 var(--ui-outline), 0 10px 22px var(--ui-shadow);
}

.rj-bnav__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    box-sizing: border-box;
    min-width: 2.75rem;
    min-height: 3.1rem;
    margin: 0;
    padding: 0.2rem 0.1rem;
    border: 0;
    border-radius: 0.8rem;
    background: none;
    color: var(--ui-nav-ink);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--t-fast) ease-out;
}

.rj-bnav__item:active { transform: translateY(2px) scale(0.95); }

.rj-bnav__item:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 1px;
}

/* An open panel's button (Build with the build panel open). */
.rj-bnav__item[aria-expanded="true"],
.rj-bnav__item[aria-current="page"] {
    background: rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.rj-bnav__icon {
    position: relative;
    display: block;
    width: 1.85rem;
    height: 1.85rem;
}

.rj-bnav__icon svg,
.rj-bnav__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35));
}

.rj-bnav__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--ui-font-display);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1;
    color: #ffffff;
    -webkit-text-stroke: 0.2em var(--ui-outline);
    paint-order: stroke fill;
    text-shadow: 0 0.09em 0 var(--ui-outline);
}

.rj-bnav__item[aria-expanded="true"] .rj-bnav__label { color: var(--ui-nav-active); }

/* The centre Spin button stands above the bar: a stacked GameButton with the theme's spins symbol over the label, because
   the centre column is too narrow for the symbol and the label side by side. */
.rj-bnav__spin {
    align-self: stretch;
    min-width: 0;
    margin: -0.9rem 0 var(--ui-edge);
    min-height: 3.6rem;
    padding: 0.25rem 0.3rem calc(0.2rem + var(--ui-edge));
    font-size: 1.2rem;
}

.rj-bnav__spin .rj-gbtn__icon {
    width: 1.75rem;
    height: 1.75rem;
}

.rj-bnav__spin .rj-gbtn__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Animations shared by the components. --- */
@keyframes rj-ui-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* A small bounce for a reward or a tap: add the class again (or draw a new element) to play it again. */
.rj-bounce { animation: rj-ui-bounce 0.5s var(--ui-pop); }

@keyframes rj-ui-bounce {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* NumberCountUp (Components/Ui/NumberCountUp.razor) adds is-counting while its number runs. */
.rj-count.is-counting {
    display: inline-block;
    animation: rj-ui-bounce 0.5s var(--ui-pop);
}

@media (prefers-reduced-motion: reduce) {
    .rj-gbtn,
    .rj-bnav__item { transition: none; }

    .rj-count-badge,
    .rj-tip,
    .rj-bounce,
    .rj-count.is-counting { animation: none; }
}

/* --- NavIcon (Components/Ui/NavIcon.razor): every shape inherits the theme's dark outline; a shape's own stroke
   attributes win over the inherited values. --- */
.rj-icon {
    overflow: visible;
    stroke: var(--ui-outline);
    stroke-width: 1.6;
    stroke-linejoin: round;
}