:root {
  color-scheme: only light;
  --hub-paper: #FBF7F0;
  --hub-paper-2: #F3ECE0;
  --hub-ink: #1C1712;
  --hub-ink-2: #5E544A;
  --hub-accent: #B83A22;
  --hub-glow: #FFC65C;
  --hub-focus: #2D5BD7;
  --hub-shadow: 0 2px 0 #1C1712, 0 10px 24px rgba(28,23,18,.12);
  --hub-shadow-lift: 0 6px 0 #1C1712, 0 18px 36px rgba(28,23,18,.18);
  --hub-s1: 4px; --hub-s2: 8px; --hub-s3: 12px; --hub-s4: 16px;
  --hub-s5: 24px; --hub-s6: 32px; --hub-s7: 48px; --hub-s8: 64px;
  --hub-ease: cubic-bezier(.2,.8,.2,1);
  --hub-pop: cubic-bezier(.34,1.56,.64,1);
  --hub-font-sans: -apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --hub-font-serif: var(--hub-font-sans);
  --hub-gutter: 12px;
}
* { box-sizing: border-box; }
html { background: var(--hub-paper); color: var(--hub-ink); }
body { margin: 0; font-family: var(--hub-font-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button, svg text { font-family: var(--hub-font-sans); }
a:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 3px; }
.hub-shell { width: min(1200px, calc(100% - var(--hub-gutter) * 2)); margin-inline: auto; }
.hub-top { height: 48px; display: flex; align-items: center; justify-content: space-between; }
.hub-top__brand { display: inline-flex; border-radius: 4px; }
.hub-top__brand svg { height: 24px; width: 80px; }
.hub-top__about { font-size: 13px; color: var(--hub-ink-2); padding: 8px 0 8px 12px; text-underline-offset: 4px; }
.hub-top__about:hover { text-decoration: underline; }
.hub-hero { padding: 24px 0 20px; text-align: center; }
.hub-hero h1 { margin: 0; line-height: 0; animation: hero-in 360ms var(--hub-ease) both; }
.hub-wordmark { display: inline-block; width: auto; max-width: 100%; height: 56px; overflow: visible; }
.hub-hero__sub { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--hub-ink-2); margin: 12px 0 0; }
.hub-eye { transform-box: fill-box; transform-origin: center; animation: owl-blink 5s infinite; }
.hub-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; padding-bottom: 48px; }
.hub-card-shell { min-width: 0; display: flex; animation: card-in 420ms var(--hub-ease) both; animation-delay: calc(var(--order) * 70ms); }
.hub-card { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; border: 2px solid var(--hub-ink); border-radius: 16px; background: var(--card-bg, var(--hub-paper-2)); color: var(--card-ink, var(--hub-ink)); box-shadow: var(--hub-shadow); transition: transform 160ms var(--hub-pop), box-shadow 200ms var(--hub-pop), border-color 200ms; isolation: isolate; }
.hub-card__art { position: relative; aspect-ratio: 16 / 10; width: 100%; flex: none; overflow: hidden; border-radius: 14px 14px 0 0; }
.hub-card__art > svg { width: 100%; height: 100%; display: block; }
.hub-card__copy { display: flex; flex: 1; flex-direction: column; padding: 14px; }
.hub-card__title { font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 0; overflow-wrap: anywhere; }
.hub-card[data-type="serif"] .hub-card__title { font-family: var(--hub-font-serif); }
/* Cards that keep the catalog cover have no in-page theme, so use the shared
   ink for their titles instead of the placeholder's muted ink. */
.hub-card:has(> .hub-card__art > .game-cover:only-child) .hub-card__title,
.hub-card[data-game-slug="money-split"] .hub-card__title { color: var(--hub-ink); }
.hub-card__hook { color: var(--card-muted, var(--hub-ink-2)); font-size: 14px; font-weight: 400; line-height: 1.45; margin: 8px 0 16px; }
.hub-card__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--card-muted, var(--hub-ink-2)); font-size: 12px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--card-rule); }
.hub-card__meta .meta-dot { opacity: .65; }
.hub-card__status { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.hub-card__status::before { content: ''; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.hub-card__arrow { width: 16px; height: 16px; margin-left: 4px; }
.hub-badge { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--hub-accent); color: #fff; font-weight: 800; font-size: 12px; transform: rotate(-6deg); box-shadow: 0 2px 0 #792c1e; }
/* Compact paper-tag badge for a playable card that is still being polished.
   Palette, 12px label and 8px radius match the existing hub tags. */
.hub-card__badge { position: absolute; z-index: 2; top: 12px; right: 12px; padding: 5px 9px; border: 1.5px solid var(--hub-ink); border-radius: var(--hub-s2); background: var(--hub-glow); color: var(--hub-ink); font-size: var(--hub-s3); font-weight: 800; line-height: 1; letter-spacing: .04em; transform: rotate(-3deg); box-shadow: 0 2px 0 var(--hub-ink); }
.hub-badge::after { content: ''; position: absolute; inset: 4px; border: 1px dashed #ffffff80; border-radius: 50%; }
.hub-ribbon { position: absolute; z-index: 2; top: 12px; right: 12px; padding: 7px 10px; background: #FFF6D8; color: #0F3554; border: 1.5px solid #0F3554; font-size: 12px; font-weight: 800; letter-spacing: .08em; transform: rotate(9deg); box-shadow: 2px 3px 0 #0f355426; }
.hub-ribbon::before { content: ''; position: absolute; top: -5px; left: calc(50% - 4px); width: 7px; height: 7px; border-radius: 50%; background: #D87951; border: 1px solid #0F3554; box-shadow: 0 1px 0 #0F3554; }
.hub-card__notice { position: absolute; z-index: 3; inset: auto 10px 10px; padding: 12px 8px; background: #FFF6D8; color: #0F3554; border: 1.5px solid #0F3554; border-radius: 8px; text-align: center; font-size: 14px; font-weight: 600; box-shadow: 0 3px 10px #0f355420; opacity: 0; transform: translateY(12px); visibility: hidden; transition: opacity 200ms var(--hub-ease), transform 200ms var(--hub-ease), visibility 200ms; }
.hub-card.is-notifying .hub-card__notice { visibility: visible; opacity: 1; transform: translateY(0); }
.hub-card.is-notifying .hub-ribbon { animation: ribbon-wiggle 400ms var(--hub-ease); }
.hub-card--placeholder { border-style: dashed; box-shadow: none; }
.hub-card--placeholder .hub-card__hook { margin-bottom: 0; }
.hub-foot { background: var(--hub-paper-2); color: var(--hub-ink-2); font-size: 12px; line-height: 1.5; }
.hub-foot__inner { min-height: 72px; padding-block: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; }
.hub-foot p { margin: 0; }
.hub-foot time { font-variant-numeric: tabular-nums; }
.hub-foot__sign { display: flex; gap: 8px; align-items: center; }
.hub-foot__star { width: 13px; height: 13px; }
@media (min-width: 375px) {
  :root { --hub-gutter: 16px; }
  .hub-wordmark { height: 64px; }
  .hub-hero__sub { font-size: 15px; }
  .hub-card__copy { padding: 16px; }
  .hub-card__title { font-size: 26px; }
  .hub-card__hook { font-size: 15px; }
  .hub-card__meta, .hub-foot { font-size: 13px; }
}
@media (min-width: 600px) {
  :root { --hub-gutter: 24px; }
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .hub-card__art { aspect-ratio: 16 / 9; }
  .hub-hero { padding-block: 40px 32px; }
  .hub-wordmark { height: 80px; }
}
@media (min-width: 1024px) {
  :root { --hub-gutter: 32px; }
  .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-bottom: 64px; }
  .hub-hero { padding-block: 56px 40px; }
  .hub-wordmark { height: 96px; }
  .hub-hero__sub { font-size: 18px; margin-top: 16px; }
  .hub-card__title { font-size: 28px; }
  .hub-badge { font-size: 13px; }
  .hub-card-shell--placeholder { grid-column: 1 / -1; }
  .hub-card--placeholder { flex-direction: row; align-items: center; height: 160px; }
  .hub-card--placeholder .hub-card__art { width: 240px; height: 100%; aspect-ratio: auto; border-radius: 14px 0 0 14px; }
  .hub-card--placeholder .hub-card__art > svg { object-fit: contain; }
  .hub-card--placeholder .hub-card__copy { min-width: 0; padding: 24px 32px; }
  .hub-card--placeholder .hub-card__hook { margin-top: 12px; }
}
@media (hover: hover) {
  a.hub-card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--hub-shadow-lift); }
  a.hub-card:hover:where(:not(.is-releasing)) { transition-duration: 200ms; }
  a.hub-card:hover .lamp-light { animation: lamp-flash 600ms var(--hub-ease); }
  a.hub-card:hover .money-coin { transform-box: fill-box; transform-origin: center; animation: coin-hop 600ms var(--hub-ease); }
  a.hub-card:hover .clone-adventurer { transform-box: fill-box; transform-origin: 50% 95%; animation: clone-peek 600ms var(--hub-ease); }
  a.hub-card:hover .clone-adventurer .clone-eyes { animation: quick-blink 600ms; transform-box: fill-box; transform-origin: center; }
}
a.hub-card:active, a.hub-card.is-pressed { transform: scale(.98); transition-duration: 90ms; box-shadow: 0 1px 0 var(--hub-ink), 0 4px 12px #1c171212; }
@keyframes hero-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes owl-blink { 0%, 45%, 49.4%, 100% { transform: scaleY(1); } 46%, 48.4% { transform: scaleY(.08); } }
@keyframes lamp-flash { 0%, 100% { opacity: .9; } 25% { opacity: .65; } 45%, 75% { opacity: 1; } }
@keyframes coin-hop { 0%, 100% { transform: translateY(0) scaleX(1); } 45% { transform: translateY(-28px) scaleX(.15); } 70% { transform: translateY(-16px) scaleX(1); } }
@keyframes clone-peek { 0%, 100% { transform: none; } 45%, 70% { transform: translateX(8px) rotate(3deg); } }
@keyframes quick-blink { 0%, 40%, 65%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.1); } }
@keyframes ribbon-wiggle { 0%, 50%, 100% { transform: rotate(9deg); } 25%, 75% { transform: rotate(12deg); } 38%, 88% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  a.hub-card:hover, a.hub-card:active, a.hub-card.is-pressed { transform: none; box-shadow: var(--hub-shadow); }
  /* Draw the 3px hover border over the existing edge to avoid any reflow. */
  a.hub-card:hover::before { content: ''; position: absolute; z-index: 4; inset: -2px; border: 3px solid var(--hub-ink); border-radius: 16px; pointer-events: none; }
  .hub-card__notice { transform: none; }
  a.hub-card:active::after, a.hub-card.is-pressed::after { content: ''; position: absolute; inset: 0; border-radius: 13px; background: #0000000a; pointer-events: none; }
}

/* Keep catalog covers available before scripts load. */
.game-cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.hub-card__art > svg ~ .game-cover { display: none; }
.hub-card[role="button"] { cursor: pointer; }

/* C2 palette, pinned to money-split-ui-c eb35233. Scoped to this card only.
   hub.js retains the original T4 artwork; presentation-attribute overrides keep
   its geometry and animation intact without changing other games. */
.hub-card[data-game-slug="money-split"] {
  --c-bean: #A8625A;
  --c-bean-dark: #84473F;
  --c-cloth-pink: #CF8A8F;
  --c-cloth-red: #B5675E;
  --c-cloth-teal: #6F9C94;
  --c-cloth-teal-dark: #4F7A73;
  --c-cloth-yellow: #D9B56A;
  --c-coin: #E6CFA9;
  --c-coin-line: #B08A55;
  --c-focus: #3E6680;
  --c-frame: #5A4A40;
  --c-honey: #E9D9B8;
  --c-ink: #2E2622;
  --c-ink-2: #6A5D52;
  --c-line: #8F7E6E;
  --c-paper: #FBF7F0;
  --c-paper-2: #EDE3D3;
  --c-press: #9A564E;
  --c-sage: #B7CDB3;
  --c-sage-pale: #DCE6D5;
  --c-shadow: rgba(90,74,64,.22);
  --c-shadow-deep: rgba(90,74,64,.28);
  --c-skin: #DEC0A5;
  --c-skin-dark: #BD9680;
  --c-skin-light: #F0DCC5;
  --c-up: #3F6B4E;
  --c-wood: #D8B98F;
  --c-wood-dark: #8A6A52;
  --c-wood-front: #C9A27A;
  /* The catalog renderer sets these four properties inline. */
  --card-bg: var(--c-paper) !important;
  --card-ink: var(--c-ink) !important;
  --card-muted: var(--c-ink-2) !important;
  --card-rule: var(--c-line) !important;
  --hub-ink: var(--c-ink);
  --hub-focus: var(--c-focus);
  --hub-shadow: 0 2px 0 var(--c-ink), 0 10px 24px var(--c-shadow);
  --hub-shadow-lift: 0 6px 0 var(--c-ink), 0 18px 36px var(--c-shadow-deep);
}
.hub-card[data-game-slug="money-split"]:active, .hub-card[data-game-slug="money-split"].is-pressed { box-shadow: 0 1px 0 var(--c-ink), 0 4px 12px var(--c-shadow); }
.hub-card[data-game-slug="money-split"] .hub-badge { background: var(--c-press); color: var(--c-paper); box-shadow: 0 2px 0 var(--c-bean-dark); }
.hub-card[data-game-slug="money-split"] .hub-badge::after { border-color: var(--c-paper); opacity: .5; }
.hub-card[data-game-slug="money-split"] svg { fill: var(--c-ink); }
@media (prefers-reduced-motion: reduce) {
  .hub-card[data-game-slug="money-split"]:active, .hub-card[data-game-slug="money-split"].is-pressed { box-shadow: var(--hub-shadow); }
  .hub-card[data-game-slug="money-split"]:active::after, .hub-card[data-game-slug="money-split"].is-pressed::after { background: var(--c-frame); opacity: .04; }
}
.hub-card[data-game-slug="money-split"] [fill="#1E5C3A"],
.hub-card[data-game-slug="money-split"] [fill="#698F62"] { fill: var(--c-up); }
.hub-card[data-game-slug="money-split"] [fill="#3F5475"],
.hub-card[data-game-slug="money-split"] [fill="#D4A038"],
.hub-card[data-game-slug="money-split"] [fill="#D4BA80"],
.hub-card[data-game-slug="money-split"] [fill="#DBA436"] { fill: var(--c-coin-line); }
.hub-card[data-game-slug="money-split"] [fill="#4E3A29"],
.hub-card[data-game-slug="money-split"] [fill="#563F2C"],
.hub-card[data-game-slug="money-split"] [fill="#705139"] { fill: var(--c-ink); }
.hub-card[data-game-slug="money-split"] [fill="#536750"] { fill: var(--c-press); }
.hub-card[data-game-slug="money-split"] [fill="#536A8A"] { fill: var(--c-cloth-yellow); }
.hub-card[data-game-slug="money-split"] [fill="#6C4B31"],
.hub-card[data-game-slug="money-split"] [fill="#705037"],
.hub-card[data-game-slug="money-split"] [fill="#76553D"],
.hub-card[data-game-slug="money-split"] [fill="#795C41"] { fill: var(--c-frame); }
.hub-card[data-game-slug="money-split"] [fill="#73846C"] { fill: var(--c-cloth-red); }
.hub-card[data-game-slug="money-split"] [fill="#8D9788"],
.hub-card[data-game-slug="money-split"] [fill="#91AA74"],
.hub-card[data-game-slug="money-split"] [fill="#BDC3A0"] { fill: var(--c-sage); }
.hub-card[data-game-slug="money-split"] [fill="#8D9FB2"],
.hub-card[data-game-slug="money-split"] [fill="#F1D7AA"],
.hub-card[data-game-slug="money-split"] [fill="#F2DAA4"] { fill: var(--c-honey); }
.hub-card[data-game-slug="money-split"] [fill="#934835"] { fill: var(--c-bean-dark); }
.hub-card[data-game-slug="money-split"] [fill="#98623F"] { fill: var(--c-wood-dark); }
.hub-card[data-game-slug="money-split"] [fill="#B75A43"] { fill: var(--c-cloth-pink); }
.hub-card[data-game-slug="money-split"] [fill="#B78333"] { fill: var(--c-cloth-teal-dark); }
.hub-card[data-game-slug="money-split"] [fill="#BB9466"] { fill: var(--c-wood); }
.hub-card[data-game-slug="money-split"] [fill="#C29760"] { fill: var(--c-wood-front); }
.hub-card[data-game-slug="money-split"] [fill="#D39A74"],
.hub-card[data-game-slug="money-split"] [fill="#E6AE82"],
.hub-card[data-game-slug="money-split"] [fill="#ECC09B"] { fill: var(--c-skin); }
.hub-card[data-game-slug="money-split"] [fill="#D4A447"] { fill: var(--c-cloth-teal); }
.hub-card[data-game-slug="money-split"] [fill="#E6D3A8"],
.hub-card[data-game-slug="money-split"] [fill="#E8D6AE"] { fill: var(--c-paper-2); }
.hub-card[data-game-slug="money-split"] [fill="#F0C49B"] { fill: var(--c-skin-light); }
.hub-card[data-game-slug="money-split"] [fill="#F5C84B"] { fill: var(--c-coin); }
.hub-card[data-game-slug="money-split"] [fill="#FFE9B8"],
.hub-card[data-game-slug="money-split"] [fill="#FFF8DC"],
.hub-card[data-game-slug="money-split"] [fill="#FFF8DF"] { fill: var(--c-paper); }
.hub-card[data-game-slug="money-split"] [stroke="#1E5C3A"],
.hub-card[data-game-slug="money-split"] [stroke="#224C36"],
.hub-card[data-game-slug="money-split"] [stroke="#345D3D"] { stroke: var(--c-up); }
.hub-card[data-game-slug="money-split"] [stroke="#556884"],
.hub-card[data-game-slug="money-split"] [stroke="#765332"],
.hub-card[data-game-slug="money-split"] [stroke="#7D5A29"],
.hub-card[data-game-slug="money-split"] [stroke="#C18E2E"],
.hub-card[data-game-slug="money-split"] [stroke="#C48F2F"],
.hub-card[data-game-slug="money-split"] [stroke="#C49431"] { stroke: var(--c-coin-line); }
.hub-card[data-game-slug="money-split"] [stroke="#65432F"],
.hub-card[data-game-slug="money-split"] [stroke="#6B5032"],
.hub-card[data-game-slug="money-split"] [stroke="#76553D"],
.hub-card[data-game-slug="money-split"] [stroke="#795C41"] { stroke: var(--c-frame); }
.hub-card[data-game-slug="money-split"] [stroke="#664334"],
.hub-card[data-game-slug="money-split"] [stroke="#97734A"],
.hub-card[data-game-slug="money-split"] [stroke="#9C8562"] { stroke: var(--c-ink-2); }
.hub-card[data-game-slug="money-split"] [stroke="#798B70"] { stroke: var(--c-press); }
.hub-card[data-game-slug="money-split"] [stroke="#8B6340"],
.hub-card[data-game-slug="money-split"] [stroke="#9D693F"],
.hub-card[data-game-slug="money-split"] [stroke="#A76E44"],
.hub-card[data-game-slug="money-split"] [stroke="#BB915B"] { stroke: var(--c-wood-dark); }
.hub-card[data-game-slug="money-split"] [stroke="#A77A36"] { stroke: var(--c-cloth-teal-dark); }
.hub-card[data-game-slug="money-split"] [stroke="#AA7054"],
.hub-card[data-game-slug="money-split"] [stroke="#B67C59"],
.hub-card[data-game-slug="money-split"] [stroke="#BC8C69"],
.hub-card[data-game-slug="money-split"] [stroke="#C28E68"] { stroke: var(--c-skin-dark); }
.hub-card[data-game-slug="money-split"] [stroke="#AAC18B"],
.hub-card[data-game-slug="money-split"] [stroke="#B9CB92"],
.hub-card[data-game-slug="money-split"] [stroke="#BFC798"] { stroke: var(--c-sage); }
.hub-card[data-game-slug="money-split"] [stroke="#B39668"],
.hub-card[data-game-slug="money-split"] [stroke="#BC9864"] { stroke: var(--c-line); }
.hub-card[data-game-slug="money-split"] [stroke="#B96549"] { stroke: var(--c-bean); }
.hub-card[data-game-slug="money-split"] [stroke="#D4D8BC"] { stroke: var(--c-sage-pale); }
.hub-card[data-game-slug="money-split"] [stroke="#E5CCA0"],
.hub-card[data-game-slug="money-split"] [stroke="#E8CFA0"] { stroke: var(--c-paper-2); }
.hub-card[data-game-slug="money-split"] [stroke="#E9BF86"],
.hub-card[data-game-slug="money-split"] [stroke="#F0C592"],
.hub-card[data-game-slug="money-split"] [stroke="#F5C994"] { stroke: var(--c-wood); }
.hub-card[data-game-slug="money-split"] [stroke="#FADEC0"] { stroke: var(--c-skin-light); }
.hub-card[data-game-slug="money-split"] [stroke="#FAE4B6"] { stroke: var(--c-paper); }
.hub-card[data-game-slug="money-split"] [stroke="#FFF0AD"] { stroke: var(--c-honey); }
.hub-card[data-game-slug="money-split"] [stop-color="#BC8253"] { stop-color: var(--c-wood-front); }
.hub-card[data-game-slug="money-split"] [stop-color="#DAB477"] { stop-color: var(--c-coin-line); }
.hub-card[data-game-slug="money-split"] [stop-color="#E1AF78"] { stop-color: var(--c-wood); }
.hub-card[data-game-slug="money-split"] [stop-color="#F2D59B"] { stop-color: var(--c-coin); }

/* Scale the cover art while keeping the card geometry unchanged. */
.hub-card__art > svg, .hub-card__art > .game-cover { transform: scale(.75); }