/* Public arcade hub stylesheet for the vanilla-TS player. A VERBATIM port of
frontend/src/app/pages/hub/hub.component.scss - every value (px, color, gradient,
transition, max-height/opacity collapse timing, grid gap, padding) is copied
unchanged; nothing visual is altered.
Wrapper strategy (per backend/docs/arcade/SPEC_CSS.md sections 5 and 1B): the Angular
component was ViewEncapsulated, so its :host block and every .mf-* rule were auto-scoped.
In vanilla there is no encapsulation, so:
- the :host { ... } block (the --mf-* token overrides + display/width/height/font-family
layout) moves onto the page-root wrapper class .arcade-hub, and
- every hub-component-local selector (all .mf-hub-*, the .mf-board-overlay/.mf-board-sheet/
.mf-board-mount overlay wrappers, all .mf-set-*, and the hub's own .mf-brand-mire/
.mf-brand-games lockup spans) is prefixed with .arcade-hub so the rules cannot leak
globally and win by specificity over the OLDER hub variant carried in shell.css
(which has a per-card accent border + 12px gap - this live design uses 10px gap, no
accent edge, a gear, and name-below-banner).
The SHARED kit classes the mounted leaderboard panel reads (.mf-card, .mf-btn*, .mf-toggle*,
.mf-list*, .mf-board-row/.mf-board-rank/.mf-board-avatar/.mf-board-name/.mf-board-score/
.mf-board-level/.mf-board-me, etc.) are NOT in this file: they come globally from shell.css
(a verbatim slice also in leaderboard-shared.css) and must stay UNWRAPPED so the mounted
board reads them. Only the board OVERLAY positioning wrappers below (mf-board-overlay/sheet/
mount), which live in hub.component.scss, are reproduced here - and the overlay uses
position:fixed; inset:0 so it still covers the viewport even though it is .arcade-hub-scoped.
The --mf-* tokens are declared on .arcade-hub (the former :host) so they inherit into both
the hub DOM and the mounted board panel mounted inside it. (shell.css also declares the full
--mf-* set on :root; re-asserting the subset here matches the source and keeps the hub true
if it ever loads in isolation.) Loads fourth in the order base -> tokens -> shell -> hub -> play.
The build-player.mjs step auto-copies styles/*.css into the dist root; the is added
by the composer, not here. */
/* :host -> .arcade-hub. The --mf-* token overrides + the box/type layout the host carried. */
.arcade-hub {
--mf-bg: #10131c;
--mf-bg-2: #1c2230;
/* the page + header fill. NIGHT (dark navy) is now the DEFAULT; an optional DAY
(warm parchment) theme is opted into via :root[data-theme="day"] .arcade-hub
below. The theme is set by a data-theme attribute on (index.ts applies
and persists the choice); absence/unknown = night. */
--mf-page-bg: #1c2230;
--mf-surface: rgba(28, 34, 48, 0.86);
/* the flatter row fill, the soft accent wash and the faint hairline the mounted
kit leaderboard card reads; lifted straight from the kit shell :root so the
card renders true inside the hub the same way it does in a game bundle */
--mf-surface-flat: rgba(16, 19, 28, 0.4);
--mf-accent-soft: rgba(184, 168, 216, 0.14);
--mf-faint: rgba(255, 255, 255, 0.12);
--mf-ink: #eef1f7;
--mf-ink-dim: rgba(255, 255, 255, 0.55);
--mf-accent: #b8a8d8;
--mf-card-border: rgba(184, 168, 216, 0.18);
--mf-radius: 14px;
display: block;
width: 100%;
/* a fixed viewport height makes the hub its own scroll container, which is
what lets the toolbar position:sticky actually stick. --tg-viewport-height
tracks the Telegram fullscreen height (100vh stayed pinned to the static
pre-fullscreen box on iOS and letterboxed); 100dvh is the web fallback. */
height: var(--tg-viewport-height, 100dvh);
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
/* ***************************************************************
* DAY theme (optional, opt-in)
* *************************************************************** */
/* OPTIONAL warm-parchment DAY theme, opted into by data-theme="day" on .
hub.css re-declares the --mf-* tokens ON .arcade-hub, so those beat any
:root[data-theme] tokens shell.css sets — the day token overrides MUST therefore
be re-declared at this .arcade-hub-scoped selector to win inside the hub. NIGHT
(no attribute / data-theme="night") keeps the dark default block above untouched. */
:root[data-theme="day"] .arcade-hub {
--mf-page-bg: #faf9f5;
--mf-bg: #faf9f5;
--mf-bg-2: #efe9d9;
--mf-surface: #ffffff;
--mf-surface-flat: #f1eee7;
--mf-ink: #2c2a26;
--mf-ink-dim: #5c5850;
--mf-faint: #e6e2d9;
--mf-accent: #880e4f;
--mf-accent-soft: rgba(136, 14, 79, 0.10);
--mf-card-border: #e6e2d9;
/* Paint the parchment fill on the wrapper itself in day mode. The scroller
(.mf-hub) is made transparent below so the fixed doodle pseudo-element shows
through between this fill and the cards instead of being hidden by an opaque
scroller background. */
background: var(--mf-page-bg);
}
/* DAY-only doodle wallpaper: a faded, repeating Telegram/WhatsApp-style line-art
tile sat BEHIND every hub element. position:fixed pins it to the viewport so it
reads as a calm backdrop without scroll jank; pointer-events:none keeps the cards
and controls fully tappable; z-index:0 (with the scroller lifted to z-index:1
below) keeps it strictly behind content so it never reduces readability. NIGHT
never emits this pseudo-element, so the dark theme is unchanged. */
:root[data-theme="day"] .arcade-hub::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: url('/assets/shared/doodle-bg.webp');
background-repeat: repeat;
background-size: 460px;
opacity: 0.2;
}
/* Lift the hub scroller above the day doodle so cards, grid and the sticky header
all paint over the pattern. Scoped to day so night layering is untouched; the
sticky header (.mf-hub-tools z-index:5) keeps its own higher stacking inside. */
:root[data-theme="day"] .arcade-hub .mf-hub {
position: relative;
z-index: 1;
/* transparent in day so the wrapper parchment fill + the fixed doodle behind
show through; the opaque navy fill is kept for night via the base rule */
background: transparent;
}
.arcade-hub .mf-hub {
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
overflow-y: auto;
/* Hide the scrollbar entirely (still scrollable by wheel / touch) so it never
takes layout width. That keeps the tool row's left and right edge gaps equal
(the scrollbar would otherwise eat the right side), and toggling Favorites
never widens the content box / zooms the cards. */
scrollbar-width: none;
/* Ride the brand lockup at the very top: only the device safe-area inset plus a
small 8px breathing gap (no extra static clearance). On web that inset is 0 so
the lockup pins right to the top; a notch / status bar is still respected. */
padding: calc(env(safe-area-inset-top) + 8px) 16px max(24px, env(safe-area-inset-bottom));
background: var(--mf-page-bg);
color: var(--mf-ink);
}
/* The settings gear, sitting at the right end of the tool row just past the
favorites chip — a 42×42 icon button matching the chip / search height. */
.arcade-hub .mf-hub-gear {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0;
color: var(--mf-ink);
background: var(--mf-surface);
border: 1px solid var(--mf-card-border);
border-radius: 12px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.arcade-hub .mf-hub-gear:active {
background: var(--mf-bg-2);
}
/* The brand lockup, shown in the sticky header top row */
.arcade-hub .mf-hub-lockup {
display: flex;
align-items: center;
gap: 9px;
}
.arcade-hub .mf-hub-mark {
display: block;
height: 30px;
width: 30px;
/* the square brand monogram, the dark-background variant for the night theme */
background: url('/assets/brand/trademire-icon-dark.svg') center / contain no-repeat;
}
/* day theme: swap the faded dark-background icon for the exact-brand-color day icon
(#841B3C bordeaux circles + #746A82 grey figure) so the mark matches the day
wordmark colours, never the washed-out dark variant on the light wallpaper */
:root[data-theme="day"] .arcade-hub .mf-hub-mark {
/* ONE logo regardless of theme: day uses the SAME pinkish dark-variant icon as
night (owner: apply the night look to day, single logo both modes) */
background-image: url('/assets/brand/trademire-icon-dark.svg');
}
.arcade-hub .mf-hub-word {
display: flex;
align-items: baseline;
gap: 5px;
font-size: 20px;
font-weight: 800;
letter-spacing: 0.3px;
}
.arcade-hub .mf-brand-mire {
color: #d96f8a;
}
.arcade-hub .mf-brand-games {
color: #b8b0c2;
}
/* the stats row under the arcade title: the crown tally and the coins pill side by
side, so the two totals read together as one compact stat bar */
.arcade-hub .mf-hub-stats {
display: inline-flex;
align-items: center;
gap: 14px;
}
/* The arcade-wide crown tally, shown on the right of the sticky header top row */
.arcade-hub .mf-hub-total-crowns {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 800;
color: var(--mf-gold);
}
/* the total-coins pill, stacked right under the crown tally (the subrow is a centered
column): the gold jeton mark + the player's shared-economy balance, in the branded
jeton gold so it reads as the account wallet shared across every game */
.arcade-hub .mf-hub-total-coins {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 800;
color: #f7c948;
}
/* The invite tally. It is NOT in this stats row any more - it sits in the title line's
leading flank (see .mf-hub-leftstack far below) - but the
rule lives here beside the two pills it is a sibling in kind to, so the three stay in
one visual family: same 800 weight, same 4px mark-to-text gap, same gold.
The extra rules over the crowns/coins pills are all consequences of it being a BUTTON
parked on its own line rather than a div in a centred strip: the button reset, a
nowrap so a long localized label ("{count} uitgenodigd") breaks the grid column
instead of folding onto a second line, and a slightly smaller type so the label rides
in the flank without out-measuring the heading in most languages. */
.arcade-hub .mf-hub-total-referrals {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0;
font-family: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
color: var(--mf-gold);
background: transparent;
border: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.arcade-hub .mf-hub-total-referrals:active {
opacity: 0.7;
}
/* The mark is a person with an arrow LEAVING them, and an arrow is one of the few
glyphs whose meaning is carried by its direction, so in a right-to-left page it has to
point the other way or it reads as somebody arriving. The label text beside it is
reordered by the bidi algorithm on its own; only the drawing needs this. */
:root[dir="rtl"] .arcade-hub .mf-hub-total-referrals > svg {
transform: scaleX(-1);
}
/* The invite banner — the growth CTA that rides the scroll content directly under the
sticky header. A full-width tappable card: the gift mark, the headline + live
progress subline, and a gold CTA chip. Gold-bordered so it reads as the reward /
invite surface without shouting over the catalog. Hidden outside Telegram. */
.arcade-hub .mf-hub-invite {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
box-sizing: border-box;
margin: 0 0 14px;
padding: 12px 14px;
font-family: inherit;
text-align: left;
background: var(--mf-surface);
border: 1px solid var(--mf-gold);
border-radius: 14px;
cursor: pointer;
}
.arcade-hub .mf-hub-invite-icon {
flex: 0 0 auto;
font-size: 24px;
line-height: 1;
}
.arcade-hub .mf-hub-invite-text {
flex: 1 1 auto;
min-width: 0;
}
.arcade-hub .mf-hub-invite-title {
font-size: 14px;
font-weight: 800;
color: var(--mf-ink);
}
.arcade-hub .mf-hub-invite-sub {
margin-top: 2px;
font-size: 12px;
color: var(--mf-ink-dim);
}
.arcade-hub .mf-hub-invite-cta {
flex: 0 0 auto;
padding: 8px 14px;
font-size: 13px;
font-weight: 800;
/* brand bordeaux on the gold chip — the same readable pairing the coin mark uses */
color: #841b3c;
background: var(--mf-gold);
border-radius: 10px;
white-space: nowrap;
}
/* The community footer — a quiet bottom strip of social-channel links, separated from
the grid by a hairline. Secondary by design (the invite banner is the primary growth
lever), so it is low-emphasis and centered. */
.arcade-hub .mf-hub-community {
max-width: 720px;
margin: 8px auto 20px;
padding: 16px 12px 0;
text-align: center;
border-top: 1px solid var(--mf-card-border);
}
.arcade-hub .mf-hub-community-caption {
margin-bottom: 10px;
font-size: 12px;
color: var(--mf-ink-dim);
}
.arcade-hub .mf-hub-community-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
/* the footer channel buttons are round icon-buttons (the brand glyph only); the icon
is currentColor so it tints with the theme and the active state */
.arcade-hub .mf-hub-community-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
color: var(--mf-ink-dim);
background: var(--mf-surface);
border: 1px solid var(--mf-card-border);
border-radius: 50%;
cursor: pointer;
}
.arcade-hub .mf-hub-community-link:active {
color: var(--mf-ink);
border-color: var(--mf-gold);
}
/* the Community channel buttons in the settings sheet share the language-pill shape
(.mf-set-lang) but center a brand icon instead of text. The compound selector keeps
the icon centering + tint winning over the base pill rule regardless of source
order, since the button carries both classes. */
.arcade-hub .mf-set-lang.mf-set-social {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 52px;
padding: 0 14px;
color: var(--mf-ink-dim);
}
.arcade-hub .mf-set-lang.mf-set-social:active {
color: var(--mf-ink);
}
/* The branded header + search toolbar, pinned to the top. Its fill is the page's
own base background colour (the same --mf-bg the .mf-hub gradient starts from)
and it carries NO drop shadow, so the header reads as part of the page rather
than a separate bar — there is no seam line under it. It stays opaque so the
grid never bleeds through the pinned header while the long list scrolls under it.
Flush at the bottom (no bottom padding); the tool row bleeds to the page edges. */
.arcade-hub .mf-hub-tools {
position: sticky;
top: 0;
z-index: 5;
display: flex;
flex-direction: column;
/* explicit stretch: the kit shell.css `.mf-hub-tools` sets align-items:center,
which (since we only override flex-direction) would otherwise leak in and
center+shrink each row to its content width — that is what stopped the search
from filling the row and the tool row from bleeding to the edges. Stretch makes
every row span the full header width so the search grows and the bleed works. */
align-items: stretch;
/* flexible full width: no fixed cap, so the header band spans the whole content
column edge to edge on any device (was capped at 720px which left big doodle
margins beside it on wide screens). */
max-width: none;
/* bleed the parchment band fully to the screen edges: the -16px side margins
cancel the .mf-hub 16px side padding so the background touches both edges with
no gap, and the matching 16px side padding re-insets the content so the brand,
subtitle and tool row stay exactly where they were (the toolrow -13px bleed
still resolves to the same 3px edge gap). */
margin: 0 -16px 12px;
padding: 12px 16px 2px;
background: var(--mf-page-bg);
/* explicitly none: the kit shell.css ships a `.mf-hub-tools` rule with a drop
shadow, and without this override that shadow leaks in and draws a seam line
under the header. The header must read as part of the page, so: no shadow. */
box-shadow: none;
}
/* Extend the opaque bar up over the Telegram-clearance zone, so once the header
pins there is never a transparent gap above it where the scrolling grid shows
through. Sits behind the brand row and below the gear (which is z-index 6). */
.arcade-hub .mf-hub-tools::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: calc(max(24px, env(safe-area-inset-top)) + 64px);
background: var(--mf-page-bg);
}
/* brand row: the Mire Games mark, centered and always pinned at the top */
.arcade-hub .mf-hub-brandrow {
display: flex;
justify-content: center;
}
/* subtitle row: the arcade label over the crown tally, centered under the brand.
Collapses smoothly when the list is scrolled, leaving just the brand and the
search pinned. A premium ease, not a hard cut.
THE PREMIUM SCROLL FIX (the cause of the web.telegram search-bar / screen shake):
the OLD collapse was a bare `max-height: 64px -> 0` transition. That reflowed every
animation frame AND shrank the sticky header's flow height mid-scroll, which shrank
the total scroll content; the browser then re-seated scrollTop, the re-seat fired
another scroll event, the collapse flipped again => it oscillated and the whole
screen jittered. The 18px-on / 6px-off band sat right where Telegram's momentum /
rubber-band scroll lives, so the oscillation was constant.
Two changes kill it: (1) the visible fold is now carried by a GPU-composited
`transform: scaleY()` + `opacity` (run on the compositor, zero reflow), so the motion
the eye follows never touches layout; the max-height/margin still release the box so
the search rides up with no gap and no clip, but they only SETTLE the box, they no
longer ARE the animation. (2) the index.ts side flips `.scrolled` at most once per
animation frame (rAF-throttled) with a WIDE 64px-on / 24px-off dead-band kept far
from the very top, so a momentum-scroll burst near 0 can never straddle a threshold
and oscillate the box-release. transform-origin: top folds it up into the brand row;
will-change keeps the transform/opacity on their own layer so a phone GPU composites
the fold cheaply. */
.arcade-hub .mf-hub-subrow {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
overflow: hidden;
/* max-height caps (does not stretch) the natural content, so expanded there is
never a gap and never a clip. The tallest content is now the TITLE LINE plus the
stats strip: the leading flank of the title line carries the ~15px invite tally
(~20px with its padding), then this box's own 4px gap and the
~20px crowns/coins strip, so ~78px of real content — and the cap sits well clear of
it so a locale whose invite label wraps taller is not clipped either. It was 96px,
which the tally would have run right up against. The box still releases its space on
collapse (so the search rides up cleanly), but the index.ts side flips it AT MOST
once per animation frame (rAF) with a WIDE dead-band kept far from the very top,
so the box-release transition settles once per crossing instead of thrashing
against momentum scroll near 0. */
max-height: 124px;
margin-top: 7px;
opacity: 1;
transform-origin: top center;
/* the transform + opacity are the GPU-composited motion the eye follows (no reflow);
max-height + margin-top settle the box once underneath them. Premium ease. */
transition:
transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
opacity 0.22s ease,
max-height 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
margin-top 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform, opacity;
}
.arcade-hub .mf-hub-tools.scrolled .mf-hub-subrow {
max-height: 0;
margin-top: 0;
opacity: 0;
transform: scaleY(0) translateY(-10px);
}
/* the Oyun Salonu arcade label inside the subtitle row */
.arcade-hub .mf-hub-arcade {
margin: 0;
font-size: 18px;
font-weight: 700;
color: var(--mf-ink);
text-align: center;
}
/* search row: the search input and the settings gear. It bleeds out past the
.mf-hub 16px side padding (negative side margins) so the search sticks flush to
the left edge and the gear flush to the right edge. The favorites chip used to sit
between them; it moved down into .mf-hub-chiprow with the two play-shape chips. */
.arcade-hub .mf-hub-toolrow {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
/* 3px gap each side: .mf-hub pads 16px, so -13px leaves a 3px edge gap */
margin-left: -13px;
margin-right: -13px;
}
.arcade-hub .mf-hub-search {
flex: 1 1 auto;
min-width: 0;
min-height: 42px;
box-sizing: border-box;
padding: 10px 14px;
font-family: inherit;
font-size: 15px;
color: var(--mf-ink);
background: var(--mf-surface);
border: 1px solid var(--mf-card-border);
border-radius: 12px;
outline: none;
}
.arcade-hub .mf-hub-search::placeholder {
color: var(--mf-ink-dim);
}
.arcade-hub .mf-hub-search:focus {
border-color: var(--mf-accent);
}
/* the filter chip row, directly under the search input: favorites plus the two
play-shape chips (level-based / endless). It bleeds to the same 3px edge gap as the
tool row above so the two rows share one left edge. `flex-wrap` is the safety net,
not the plan: three one-or-two-word chips fit one line down to a 320px phone in
every shipped locale, and a locale that ever outgrows that wraps cleanly instead of
pushing the gear off screen. `overflow-x` is deliberately NOT used - a horizontally
scrolling strip would hide the third chip behind a gesture nobody is told about. */
.arcade-hub .mf-hub-chiprow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 8px;
margin-left: -13px;
margin-right: -13px;
}
/* one filter chip: leading glyph, then the label. All three share this block, so the
row reads as one control set; only the active tint differs (see the two .on rules
below). The pill radius separates them from the 12px-radius search box and gear they
sit under, which is the point - those two act, these three FILTER. */
.arcade-hub .mf-hub-chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 34px;
padding: 0 12px;
font-family: inherit;
font-size: 13px;
font-weight: 700;
color: var(--mf-ink-dim);
background: var(--mf-surface);
border: 1px solid var(--mf-card-border);
border-radius: 999px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: color 0.14s ease, border-color 0.14s ease;
}
/* the glyph never shrinks when a long label competes for the row */
.arcade-hub .mf-hub-chip svg {
flex: 0 0 auto;
}
/* the two play-shape chips light in the app accent. Favorites keeps the GOLD it has
always had (the rule below wins on source order), which is doing real work: gold is
the favorites colour everywhere in this hub - the card star, the crown tally - so the
colour alone says the favorites chip is a different KIND of filter from the two
accent shape chips it sits beside, and that it combines with either. */
.arcade-hub .mf-hub-modechip.on {
color: var(--mf-accent);
border-color: var(--mf-accent);
}
.arcade-hub .mf-hub-favchip.on {
color: var(--mf-gold);
border-color: var(--mf-gold);
}
/* Loading, error and empty state lines */
.arcade-hub .mf-hub-state,
.arcade-hub .mf-hub-empty {
max-width: 720px;
margin: 24px auto;
text-align: center;
color: var(--mf-ink-dim);
font-size: 14px;
}
.arcade-hub .mf-hub-empty {
grid-column: 1 / -1;
}
.arcade-hub .mf-hub-retry {
margin-left: 10px;
padding: 8px 16px;
font-family: inherit;
font-weight: 700;
color: var(--mf-ink);
background: var(--mf-surface);
border: 1px solid var(--mf-card-border);
border-radius: 10px;
cursor: pointer;
}
/* The two-column game grid: minmax keeps two cards per row on a phone */
.arcade-hub .mf-hub-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
max-width: 720px;
margin: 0 auto;
}
.arcade-hub .mf-hub-card {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px;
text-decoration: none;
background: var(--mf-surface);
/* one uniform, calm border on every card. No per-game accent edge, so the
grid reads clean and the colorful hero art is the only color, not a chaos
of clashing card outlines. */
border: 1px solid var(--mf-card-border);
border-radius: var(--mf-radius);
transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.2s ease;
}
/* A filtered-out card must actually leave the layout. The card sets display:flex,
which is an author rule that would otherwise beat the plain [hidden] attribute,
so the favorites and search filters would visually do nothing. This author rule
at attribute specificity restores the hide. */
.arcade-hub .mf-hub-card[hidden] {
display: none;
}
.arcade-hub .mf-hub-card:hover {
background: rgba(28, 34, 48, 0.96);
transform: translateY(-2px);
}
.arcade-hub .mf-hub-card strong {
font-size: 15px;
font-weight: 700;
color: var(--mf-ink);
}
.arcade-hub .mf-hub-card span {
font-size: 12px;
line-height: 1.4;
color: var(--mf-ink-dim);
}
/* Art cards carry the hero banner edge to edge above the text block */
.arcade-hub .mf-hub-card-art {
padding: 0;
gap: 0;
overflow: hidden;
}
/* the banner wrapper holds the hero art and the floated favorite star */
.arcade-hub .mf-hub-card-banner {
position: relative;
}
.arcade-hub .mf-hub-card-banner img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-bottom: 1px solid var(--mf-card-border);
}
/* the game name on its own line below the banner, for every card (Miro Flight
keeps its baked-in art name too, by design) */
.arcade-hub .mf-hub-card-name {
/* 5px, not 9px, above the name: the banner already ends in its own 1px rule and a
15px/1.2 line box carries ~3px of leading above the caps, so a 9px margin read as
a ~12px optical gap and floated the title midway between the art and the footer
instead of labelling the picture. At 5px the name sits under its banner the way a
caption sits under a photo, and the slack it gives up lands below it (the footer
is pinned by margin-top:auto, so the card height is unchanged).
The side margin drops 12px -> 10px to match the footer's tightened gutter. */
margin: 5px 10px 0;
font-size: 15px;
font-weight: 700;
line-height: 1.2;
color: var(--mf-ink);
/* centered under the banner: with the tagline gone the card is art plus one
label, and a label under a picture reads centered, like an app tile. The
footer below keeps its left and right pinned icons, which is fine because
the eye reads art, then label, then footer as three separate bands. */
text-align: center;
}
/* The tagline rule is gone with the tagline itself: the card now carries art,
name and the footer only, and the footer's margin-top:auto still pins it to
the bottom edge, so no replacement spacing is needed. */
/* Favorite: a round frosted-glass star floated on the banner top-right, going
gold when the card is favorited - the premium little control from the mockup. */
.arcade-hub .mf-hub-fav {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
color: #fff;
background: rgba(8, 11, 18, 0.42);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: color 0.14s ease, background 0.14s ease, transform 0.12s ease;
}
.arcade-hub .mf-hub-fav.on {
color: var(--mf-gold);
background: rgba(8, 11, 18, 0.55);
border-color: rgba(255, 215, 94, 0.7);
}
@media (hover: hover) {
.arcade-hub .mf-hub-fav:hover {
background: rgba(8, 11, 18, 0.62);
transform: scale(1.06);
}
.arcade-hub .mf-hub-fav.on:hover {
color: var(--mf-gold);
}
}
/* Level badge: the favorite star's MIRROR on the banner top-left, for the level-
ladder games only (cards.ts paints it from the save blob's extra.levelLadder and
only above level 1). Every value that defines the chip is copied from
`.mf-hub-fav` above — 8px inset, 32px tall, 999px radius, the same frosted glass
fill/border/blur, the same z-index over the hero art — so the two corner marks
read as one pair rather than two borrowed controls. The star's offset is PHYSICAL
(`right: 8px`), so this one is physical too (`left: 8px`): under RTL the whole hub
flips `dir`, and a logical inset here would swap the badge onto the star's corner
and stack the two on top of each other.
THE ONLY DIFFERENCE IS WIDTH, and it is deliberate: the star is a fixed 32x32
square because a glyph never grows, while this chip holds 1-4 glyphs. `min-width:
32px` keeps the common 1-2 digit case an exact circle matching the star, and
`padding: 0 8px` lets 3 and 4 glyphs stretch it into a pill on the SAME 999px
radius and the SAME 32px height, so it grows sideways into empty banner instead of
shrinking its type. Measured at 14px/800 with tabular figures: "2" -> 32px (circle),
"12" -> 32px, "100" -> 41px, "999+" -> 51px. The narrowest card the grid ever
produces is 150px (`repeat(auto-fill, minmax(150px, 1fr))`), i.e. a 148px banner,
and the star takes 40px of the right edge, so even the 51px worst case leaves 57px
of untouched hero art between the two marks.
`pointer-events: none` because it reports, it does not act: without it the badge
would swallow taps on the top-left of the banner, which belong to the card body
(launch the game). The star and the trophy are buttons and stop their own clicks;
this one must not. */
.arcade-hub .mf-hub-level {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 8px;
font-size: 14px;
font-weight: 800;
line-height: 1;
/* tabular figures so a "1" and a "9" occupy the same advance: without it the chip
width jitters between levels of equal digit count */
font-variant-numeric: tabular-nums;
/* the badge is a NUMBER, not a sentence, so it renders identically in every locale.
Without this the RTL locales (ar/fa/ur/bn-adjacent) inherit dir=rtl from the
document and the bidi algorithm moves the neutral "+" of the capped "999+" to the
other side, painting "+999" - a different claim ("over 999" read as a prefix).
Isolating the chip to ltr keeps the cap suffix where it belongs; the chip's own
position stays physically top-left (see the offset above), so this changes the
glyph order only, never the corner. */
direction: ltr;
unicode-bidi: isolate;
color: #fff;
background: rgba(8, 11, 18, 0.42);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
pointer-events: none;
}
/* Play-shape badge: the third corner mark on the banner, bottom-left, carrying the
staircase (level-based) or the lemniscate (endless) glyph the filter chips use. It
is the same frosted glass chip as the level badge and the favorite star, so the
banner's marks read as one family, and it takes the one corner still free: the star
owns top-right, the level badge top-left, and bottom-right is left empty so nothing
crowds the widest edge of a 16/9 hero.
26px, not 32px: this badge is on EVERY classified card (all 76 of them) while the
level badge appears on ~32 and only past level 1, so at equal size the two would
fight and the pair of top corners would stop reading as the primary marks. A 14px
glyph inside 26px keeps the same 6px optical padding the 16px-in-32px marks have.
The offset is PHYSICAL (`left: 8px`) for the same reason the level badge's is: an
RTL page flips the hub's `dir`, and a logical inset would swing this onto the star's
side and stack the two.
`pointer-events: none` because it reports, it does not act - the card is an anchor
and a tap on the banner belongs to the card body (launch the game). The star and the
trophy are buttons that stop their own clicks; this one must never swallow one. */
.arcade-hub .mf-hub-mode {
position: absolute;
bottom: 8px;
left: 8px;
z-index: 2;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
color: #fff;
background: rgba(8, 11, 18, 0.42);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
pointer-events: none;
}
/* The footer meta row: the leaderboard trophy on the left, the skin mark dead
centre, the crown tally on the right, each holding its own corner.
A THREE-COLUMN GRID, not a space-between flex row. Two of the three marks are
conditional (the crowns pill only once the game reports a tally, the skin button
only for a game the catalog says sells skins), and space-between distributes
whatever children are actually present: a card with the trophy and the skin but no
crowns would push the skin to the RIGHT edge, and a card with trophy + crowns and
no skin reads centre-less. With 1fr auto 1fr and each child pinned to its own
column, the trophy is at the left edge, the crowns at the right edge and the skin
at the true midpoint of the row on EVERY card, however many marks it has.
THE WIDTH BUDGET (this is what every number below is solved against). The grid is
`repeat(auto-fill, minmax(150px, 1fr))` with a 10px gap, so the NARROWEST a card
ever gets is exactly 150px — the instant a new column fits, each card is back at
its 150px floor (this happens around a 342px viewport for the 2nd column and a
502px one for the 3rd, so it is a real layout, not a corner case). At 150px the
card's content box is 148px (two 1px borders), the row is 148 - 2*8 = 132px, two
4px gaps leave 124px for the three marks, and the widest triplet in this catalog
measures 36 + 36 + 44 = 116px. 8px of headroom, i.e. the crown count could grow
another whole character before anything touched an edge. The widest real count is
merge-manor's `15/15` (15 progressList goals, the catalog maximum); the skin count
tops out at `0/3`.
The side margin drops 12px -> 8px and the gap 6px -> 4px: that +12px is exactly
what pays for the marks growing 32px -> 36px and their counts 9/11px -> 12px. The
bottom margin drops 9px -> 8px so the footer's gutter is square on three sides. The
26px floor becomes 36px, matching the marks, so a row is never shorter than what it
holds. margin-top:auto still pins the footer to the card's bottom edge whatever
height the title took, so a 2-line title never moves a mark. */
.arcade-hub .mf-hub-meta {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 4px;
min-height: 36px;
margin: auto 8px 8px;
}
/* legacy spacer, no longer emitted now the trophy is the first (left) child */
.arcade-hub .mf-hub-meta-spacer {
flex: 1 1 auto;
}
/* ===============================================================
THE FOOTER MARK STANDARD — trophy, costume, crowns.
ONE block sizes all three, because they are one control family and they used to
read as three: a 32x32 neutral square (trophy), a 32x32 gold square holding a 14px
tee over a 9px count (costume), and a 23px-tall 999px-radius gold pill holding a
13px crown beside an 11px count (crowns). Three heights, two radii, three icon
sizes, two count sizes. The shape difference carried no meaning — all three are
"one mark, optionally with a progress number" — so it was pure noise, and the two
counts were below the size a child can read at arm's length.
The standard, solved against the 150px-card budget documented on .mf-hub-meta:
height 36px (was 32 / 32 / 23.4) — also the touch target, above the 32px
floor, so the marks got EASIER to hit, not harder
min-width 36px so a count-less mark (the trophy) is a true square and the
narrow counts (`0/1`, `0/3`) do not shrink into slivers
radius 11px (was 10 / 10 / 999) — one squircle, no stray pill
padding 0 5px the only thing that varies the width: a mark is as wide as its
count needs and no wider (`15/15` -> 44px, `0/3` -> 36px)
icon 16px (was 16 / 14 / 13) — set on the svg here AND in the markup
count 12px/1 weight 800 (was --- / 9 / 11)
Layout is STACKED (icon over count) for all three, not icon-beside-count: laid out
side by side, a 16px icon + a 12px `15/15` + padding measures ~68px, and 36 + 68 +
a costume mark blows through the 124px budget on a 150px card. Stacked, the widest
mark in the catalog is 44px and the triplet fits with 8px to spare.
Everything below this block only PAINTS (which column, which colour); nothing else
re-declares a size, so the three can never drift apart again. */
.arcade-hub .mf-hub-board,
.arcade-hub .mf-hub-skin,
.arcade-hub .mf-hub-crowns {
box-sizing: border-box;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-width: 36px;
height: 36px;
padding: 0 5px;
font-size: 12px;
font-weight: 800;
line-height: 1;
border: 1px solid transparent;
border-radius: 11px;
-webkit-tap-highlight-color: transparent;
transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
/* the one icon size, re-asserted on the element so a stale width/height attribute in
the markup can never reintroduce the 13/14/16 spread this block exists to end */
.arcade-hub .mf-hub-board svg,
.arcade-hub .mf-hub-skin svg,
.arcade-hub .mf-hub-crowns svg {
display: block;
flex: none;
width: 16px;
height: 16px;
}
/* the one count size. `color: inherit` lets the -empty variants below dim the whole
mark from the parent, and this rule sits AFTER the generic `.mf-hub-card span`
(12px/1.4, dim ink) it has to beat at equal specificity. */
.arcade-hub .mf-hub-board span,
.arcade-hub .mf-hub-skin span,
.arcade-hub .mf-hub-crowns span {
margin: 0;
font-size: 12px;
font-weight: 800;
line-height: 1;
color: inherit;
}
/* ---- paint: the leaderboard trophy, bottom-LEFT (bottom-RIGHT under RTL, where
grid column 1 and justify-self:start both flip with the writing direction). The
neutral one: it opens a board rather than reporting progress, so it stays in card
ink instead of gold and the two gold marks read as the pair they are. */
.arcade-hub .mf-hub-board {
grid-column: 1;
justify-self: start;
color: var(--mf-ink-dim);
background: var(--mf-bg-2);
border-color: var(--mf-card-border);
cursor: pointer;
}
@media (hover: hover) {
.arcade-hub .mf-hub-board:hover {
color: var(--mf-gold);
border-color: rgba(255, 215, 94, 0.5);
}
}
/* ---- paint: the costume shop mark, dead CENTRE. Gold like the crowns because it
carries the same kind of owned/total progress; a real