/* Fives home, streamlined: play now, today's dailies, the bot ladder, people, your progress.
   Loaded last; scoped to #home so it settles the older layered home styles in index.html. */
#home {
  --hm-ink: #202024; --hm-muted: #68645f; --hm-line: #ddd6c9; --hm-paper: #fffdf7; --hm-cream: #f6f2e9;
  --hm-purple: #613ef0; --hm-purple-soft: #ebe5ff; --hm-coral: #ef6455; --hm-lime: #d6ef40; --hm-shadow: 0 3px 0 #e8e1d4;
}
#home #homeStack { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 26px !important; }
#home #homeStack .hm-section { display: grid; gap: 12px; min-width: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#home #homeStack .hm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
#home #homeStack .hm-head h2 { margin: 0 !important; color: var(--hm-ink) !important; font: 800 21px/1.15 Arial, Helvetica, sans-serif !important; letter-spacing: -.03em !important; text-transform: none !important; }
#home #homeStack .hm-count { margin-left: auto; padding: 5px 11px; border-radius: 999px; background: var(--hm-purple-soft); color: var(--hm-purple); font: 800 12.5px/1 Arial, sans-serif; white-space: nowrap; }
#home #homeStack .hm-count.all { background: var(--hm-lime); color: var(--hm-ink); }
#home #homeStack .hm-streak { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; border-radius: 999px; background: var(--hm-coral); color: #fff; font: 800 12.5px/1 Arial, sans-serif; white-space: nowrap; }
#home #homeStack .hm-streak[hidden] { display: none; }
#home #homeStack .hm-streak svg { width: 15px; height: 15px; fill: currentColor; }
#home #homeStack .hm-streak.at-risk { background: #fff; color: var(--hm-coral); box-shadow: inset 0 0 0 1.5px var(--hm-coral); animation: hm-pulse 1.6s ease-in-out infinite; }
@keyframes hm-pulse { 50% { box-shadow: inset 0 0 0 1.5px var(--hm-coral), 0 0 0 4px rgba(239, 100, 85, .15); } }

/* Hero: the name, the one rule, and one big button. */
#home #homeStack .hm-hero { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: auto auto !important; align-items: center !important; gap: 18px 14px !important; margin: 0 !important; padding: 4px 0 0 !important; }
#home #homeStack .hm-hero .outmark-hero-copy { grid-column: 1 !important; grid-row: 1 !important; align-self: center !important; min-width: 0; }
#home #homeStack .hm-hero h2 { font-size: clamp(60px, 17vw, 112px) !important; line-height: .9 !important; }
#home #homeStack .hm-hero .hm-rule { margin: 12px 0 0 !important; font-size: 17px !important; line-height: 1.35 !important; font-weight: 500 !important; color: var(--hm-ink) !important; }
#home #homeStack .hm-hero .hm-rule > span { display: block; }
#home #homeStack .hm-hero .hm-rule > span + span { color: var(--hm-coral); font-weight: 700; }
#home #homeStack .hm-hero .outmark-hero-board { grid-column: 2 !important; grid-row: 1 !important; gap: 0 !important; }
#home #homeStack .hm-hero .outmark-hero-cells { width: clamp(92px, 25vw, 250px) !important; }
#home #homeStack .hm-hero .outmark-hero-play { grid-column: 1 / -1 !important; grid-row: 2 !important; display: flex !important; align-items: center !important; gap: 14px !important; }
#home #homeStack .hm-cta { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; flex: 1 1 auto; width: auto !important; max-width: 420px; min-height: 66px !important; padding: 10px 18px 10px 11px !important; border-radius: 18px !important; text-align: left !important; }
#home #homeStack .hm-cta > span { font-size: inherit !important; }
#home #homeStack .hm-cta-bot { width: 44px; height: 44px; border-radius: 50%; background: #fff; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
#home #homeStack .hm-cta-copy { display: grid; gap: 2px; min-width: 0; }
#home #homeStack .hm-cta-copy small { overflow: hidden; color: rgba(255, 255, 255, .78); font: 700 12px/1.2 Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
#home #homeStack .hm-cta-copy b { overflow: hidden; color: #fff; font: 900 20px/1.15 Arial, sans-serif; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
#home #homeStack .hm-cta-arrow { font-size: 24px !important; transition: transform .15s; }
#home #homeStack .hm-cta:hover .hm-cta-arrow { transform: translateX(3px); }
#home #homeStack .hm-hero #introHowToPlay { flex: 0 0 auto; }

/* Today: the Fives Daily card, then one row per other game. */
#home #homeStack .hm-daily { position: relative !important; display: grid !important; grid-template-columns: 62px minmax(0, 1fr) auto !important; align-items: center !important; gap: 4px 14px !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 14px 14px 14px 12px !important; border: 1.5px solid var(--hm-ink) !important; border-radius: 18px !important; background: var(--hm-paper) !important; box-shadow: 0 4px 0 var(--hm-ink) !important; color: var(--hm-ink) !important; text-align: left !important; cursor: pointer; }
#home #homeStack .hm-daily:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--hm-ink) !important; }
#home #homeStack .hm-daily .outmark-daily-preview { grid-column: 1; grid-row: 1; display: block; width: 62px; height: 62px; }
#home #homeStack .hm-daily .outmark-daily-preview svg { width: 62px !important; height: 62px !important; }
#home #homeStack .hm-daily-copy { grid-column: 2; grid-row: 1; display: grid; gap: 3px; min-width: 0; }
#home #homeStack .hm-kicker { color: var(--hm-purple); font: 800 11.5px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
#home #homeStack .hm-daily #dailyProgressTitle { text-transform: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--hm-ink) !important; font: 900 20px/1.1 Arial, sans-serif !important; letter-spacing: -.02em !important; }
#home #homeStack .hm-daily .daily-meta { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 !important; color: var(--hm-muted); font: 600 13px/1.2 Arial, sans-serif; }
#home #homeStack .hm-daily .daily-difficulty { display: inline-flex !important; align-items: center; margin: 0 !important; padding: 3px 8px !important; min-height: 0 !important; border: 0 !important; border-radius: 999px !important; background: #f1edff !important; color: var(--hm-purple) !important; font: 800 11.5px/1 Arial, sans-serif !important; }
#home #homeStack .hm-daily .daily-difficulty[data-level="expert"] { background: #fde6e2 !important; color: #c2412f !important; }
#home #homeStack .hm-daily .daily-difficulty b { font: inherit !important; color: inherit !important; }
#home #homeStack .hm-daily .outmark-daily-bottom { display: flex !important; align-items: center; gap: 8px; margin: 4px 0 0 !important; padding: 0 !important; border: 0 !important; }
#home #homeStack .hm-daily #dailyProgressText { display: none !important; }
#home #homeStack .hm-daily .outmark-daily-week[hidden] { display: none !important; }
#home #homeStack .hm-daily .daily-week-label { color: var(--hm-muted) !important; font: 600 12px/1 Arial, sans-serif !important; }
#home #homeStack .hm-daily-cta { grid-column: 3 !important; grid-row: 1 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; width: auto !important; min-height: 40px !important; margin: 0 !important; padding: 0 14px !important; border-radius: 999px !important; background: var(--hm-purple) !important; color: #fff !important; font: 800 14px/1 Arial, sans-serif !important; white-space: nowrap; }
#home #homeStack .hm-daily-cta > span { font-size: 16px !important; color: inherit !important; }
#home #homeStack .hm-more-dailies { display: grid; gap: 8px; margin: 0 !important; }
#home #homeStack .suite-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; min-height: 58px; padding: 9px 14px 9px 10px; border: 1px solid var(--hm-line); border-radius: 15px; background: var(--hm-paper); color: var(--hm-ink); text-decoration: none; box-shadow: var(--hm-shadow); transition: border-color .15s, transform .1s; }
#home #homeStack .suite-row:hover { border-color: var(--hm-ink); }
#home #homeStack .suite-row:active { transform: translateY(1px); }
#home #homeStack .suite-row-art, #home #homeStack .suite-row-art svg { display: block; width: 38px; height: 38px; }
#home #homeStack .suite-row-copy { display: grid; gap: 2px; min-width: 0; }
#home #homeStack .suite-row-copy b { font: 800 15px/1.2 Arial, sans-serif; }
#home #homeStack .suite-row-copy small { overflow: hidden; color: var(--hm-muted); font: 500 12.5px/1.25 Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
#home #homeStack .suite-row-status { padding: 4px 9px; border-radius: 999px; background: #efeae0; color: var(--hm-muted); font: 800 11.5px/1 Arial, sans-serif; white-space: nowrap; }
#home #homeStack .suite-row.done .suite-row-status { background: var(--hm-purple-soft); color: var(--hm-purple); }
#home #homeStack .suite-row-go svg { width: 18px; height: 18px; fill: none; stroke: var(--hm-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Bot ladder: four portraits, one goal. Details open in the sheet on phones. */
#home #homeStack .hm-ladder { padding: 0 !important; }
#home #homeStack .hm-ladder .hm-goal { flex: 1 1 100%; color: var(--hm-muted); font: 600 14px/1.3 Arial, sans-serif; }
#home #homeStack .hm-ladder .bot-ladder { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; }
#home #homeStack .hm-ladder .bot-rung { position: relative !important; display: grid !important; justify-items: center !important; align-content: start !important; gap: 3px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; margin: 0 !important; padding: 10px 4px 9px !important; border: 1.5px solid var(--hm-line) !important; border-radius: 16px !important; background: var(--hm-paper) !important; box-shadow: var(--hm-shadow) !important; transform: none !important; }
#home #homeStack .hm-ladder .bot-rung.active { border-color: var(--hm-ink) !important; }
#home #homeStack .hm-ladder .bot-rung.up-next { border-color: var(--hm-coral) !important; box-shadow: 0 3px 0 var(--hm-coral) !important; }
#home #homeStack .hm-ladder .bot-rung-art { width: min(56px, 100%) !important; height: auto !important; aspect-ratio: 1; margin: 0 !important; object-fit: contain !important; filter: none !important; }
#home #homeStack .hm-ladder .bot-rung.locked .bot-rung-art { filter: grayscale(1) !important; opacity: .45 !important; }
#home #homeStack .hm-ladder .bot-rung-name { max-width: 100%; overflow: hidden; margin: 2px 0 0 !important; color: var(--hm-ink) !important; font: 900 14px/1.1 Arial, sans-serif !important; text-overflow: ellipsis; white-space: nowrap; }
#home #homeStack .hm-ladder .bot-rung-difficulty { color: var(--hm-muted) !important; font: 600 11px/1.1 Arial, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap; }
#home #homeStack .hm-ladder .bot-threat { display: none !important; }
#home #homeStack .hm-ladder .bot-rung-state { display: inline-flex !important; align-items: center !important; gap: 4px !important; width: auto !important; min-height: 0 !important; margin: 3px 0 0 !important; padding: 3px 7px !important; border: 0 !important; border-radius: 999px !important; background: #efeae0 !important; color: var(--hm-muted) !important; font: 800 10.5px/1 Arial, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; }
#home #homeStack .hm-ladder .bot-rung.cleared .bot-rung-state { background: var(--hm-lime) !important; color: var(--hm-ink) !important; }
#home #homeStack .hm-ladder .bot-rung.up-next .bot-rung-state { background: var(--hm-coral) !important; color: #fff !important; }
#home #homeStack .hm-ladder .bot-rung.locked .bot-rung-state { background: var(--hm-ink) !important; color: #fff !important; }

/* Play people: three small tiles. */
#home #homeStack .hm-people-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 !important; }
#home #homeStack .hm-people-grid .premium-action, #home #homeStack .hm-people-grid .premium-action + .premium-action { display: grid !important; grid-template-columns: 1fr !important; justify-items: start !important; align-content: start !important; gap: 8px !important; min-height: 0 !important; margin: 0 !important; padding: 12px 12px 13px !important; border: 1px solid var(--hm-line) !important; border-radius: 16px !important; background: var(--hm-paper) !important; box-shadow: var(--hm-shadow) !important; text-align: left !important; }
#home #homeStack .hm-people-grid .premium-action:hover { border-color: var(--hm-ink) !important; background: var(--hm-paper) !important; }
#home #homeStack .hm-people-grid .playway-icon { width: 38px !important; height: 38px !important; flex-basis: 38px !important; border-radius: 50% !important; }
#home #homeStack .hm-people-grid .playway-icon.find { background: var(--hm-purple) !important; color: #fff !important; }
#home #homeStack .hm-people-grid .playway-icon.friend { background: var(--hm-coral) !important; color: #fff !important; }
#home #homeStack .hm-people-grid .playway-icon.party { background: var(--hm-lime) !important; color: var(--hm-ink) !important; }
#home #homeStack .hm-people-grid .playway-icon svg { width: 25px !important; height: 25px !important; }
#home #homeStack .hm-people-grid .playway-icon.find svg { fill: #fff !important; }
#home #homeStack .hm-people-grid .playway-icon.friend svg { fill: none !important; stroke: #fff !important; }
#home #homeStack .hm-people-grid .playway-icon.party svg circle { fill: var(--hm-ink) !important; }
#home #homeStack .hm-people-grid .playway-icon.party svg path { fill: none !important; stroke: var(--hm-ink) !important; }
#home #homeStack .hm-people-grid .playway-copy { display: grid !important; gap: 2px !important; }
#home #homeStack .hm-people-grid .premium-action strong { font: 800 14.5px/1.2 Arial, sans-serif !important; color: var(--hm-ink) !important; letter-spacing: -.01em !important; }
#home #homeStack .hm-people-grid .premium-action small { font: 500 12px/1.25 Arial, sans-serif !important; color: var(--hm-muted) !important; }
#home #homeStack .hm-people-grid .playway-arrow { display: none !important; }

/* Your progress: record and achievements side by side. */
#home #homeStack .hm-you { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#home #homeStack .hm-you .progress-card { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-content: start !important; gap: 6px !important; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 13px 13px 14px !important; border: 1px solid var(--hm-line) !important; border-radius: 16px !important; background: var(--hm-paper) !important; box-shadow: var(--hm-shadow) !important; text-align: left !important; color: var(--hm-ink) !important; }
#home #homeStack .hm-you .progress-card:hover { border-color: var(--hm-ink) !important; }
#home #homeStack .hm-you .records-progress > strong, #home #homeStack .hm-you .achievement-home-heading .premium-card-label { grid-column: 1 !important; grid-row: auto !important; margin: 0 !important; color: var(--hm-ink) !important; font: 800 15px/1.2 Arial, sans-serif !important; letter-spacing: -.01em !important; text-transform: none !important; }
#home #homeStack .hm-you .outmark-record-empty, #home #homeStack .hm-you #achievementProgressText { grid-column: 1 !important; grid-row: auto !important; margin: 0 !important; color: var(--hm-muted) !important; font: 500 12.5px/1.35 Arial, sans-serif !important; }
#home #homeStack .hm-you .outmark-record-empty b { color: var(--hm-ink); }
#home #homeStack .hm-you .home-record-stats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4px !important; margin: 0 !important; }
#home #homeStack .hm-you .home-record-stats[hidden] { display: none !important; }
#home #homeStack .hm-you .home-record-stats span { display: grid !important; gap: 1px !important; }
#home #homeStack .hm-you .home-record-stats b { font: 900 18px/1 Arial, sans-serif !important; }
#home #homeStack .hm-you .home-record-stats small { color: var(--hm-muted) !important; font: 600 10.5px/1.2 Arial, sans-serif !important; }
#home #homeStack .hm-you .home-card-link { grid-column: 1 !important; grid-row: auto !important; margin: 2px 0 0 !important; color: var(--hm-purple) !important; font: 800 12.5px/1 Arial, sans-serif !important; }
#home #homeStack .hm-you .achievement-home-heading { display: grid !important; gap: 2px !important; margin: 0 !important; }
#home #homeStack .hm-you .achievement-earned-count, #home #homeStack .hm-you #achievementProgressTitle { color: var(--hm-muted) !important; font: 600 12.5px/1.2 Arial, sans-serif !important; }
#home #homeStack .hm-you .achievement-mini-badges { display: flex !important; grid-column: 1 !important; grid-row: auto !important; justify-content: start !important; gap: 4px !important; margin: 2px 0 0 !important; }
#home #homeStack .hm-you .achievement-mini-badges .achievement-badge.mini { width: 24px !important; height: 24px !important; flex-basis: 24px !important; }
#home #homeStack .hm-you .achievement-progress .progress-meter { grid-column: 1 !important; height: 4px !important; margin: 2px 0 0 !important; }
#home #homeStack .hm-you .achievement-progress .home-card-link { display: none !important; }
#home #homeStack .live-pulse { display: none !important; }

/* Wide screens: hero across the top, then two columns. */
@media (min-width: 900px) {
  #home #homeStack { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 34px 40px !important; }
  #home #homeStack .hm-hero { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: auto auto !important; padding-bottom: 6px !important; }
  #home #homeStack .hm-hero .outmark-hero-board { grid-row: 1 / 3 !important; }
  #home #homeStack .hm-hero .outmark-hero-play { grid-column: 1 !important; }
  #home #homeStack .hm-hero .hm-rule { font-size: 21px !important; }
  #home #homeStack .hm-today { grid-column: 1; grid-row: 2; }
  #home #homeStack .hm-ladder { grid-column: 2; grid-row: 2 / 4; align-content: start; }
  #home #homeStack .hm-people { grid-column: 1; grid-row: 3; }
  #home #homeStack .hm-you { grid-column: 1 / -1; grid-row: 4; }
}
@media (max-width: 360px) {
  #home #homeStack .hm-hero .hm-rule { font-size: 15.5px !important; }
  #home #homeStack .hm-daily { grid-template-columns: 50px minmax(0, 1fr) !important; }
  #home #homeStack .hm-daily .outmark-daily-preview, #home #homeStack .hm-daily .outmark-daily-preview svg { width: 50px !important; height: 50px !important; }
  #home #homeStack .hm-daily-cta { grid-column: 1 / -1 !important; grid-row: 2 !important; justify-content: center; margin-top: 8px !important; }
  #home #homeStack .hm-people-grid .premium-action { padding: 11px 9px 12px !important; }
  #home #homeStack .hm-you { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { #home #homeStack .hm-streak.at-risk { animation: none; } }

/* First solo game: one name, one agreement, one Play button. The badge waits for later. */
#nameDialog.quick-start #profileAvatarDisclosure { display: none !important; }

/* Hero board: the rule happening. A 7th X drops in and the oldest X fades out, on a loop. */
#home .outmark-hero-cells i.incoming { color: var(--hm-purple); }
#home .outmark-hero-cells i.incoming .hero-mark { animation: hm-drop 4s ease-in-out infinite; }
#home .outmark-hero-cells i.oldest .hero-mark { animation: hm-erase 4s ease-in-out infinite; }
@keyframes hm-drop { 0%, 25% { opacity: 0; transform: scale(.4); } 35%, 85% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(1); } }
@keyframes hm-erase { 0%, 40% { opacity: 1; transform: scale(1); } 55%, 88% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #home .outmark-hero-cells i.incoming .hero-mark, #home .outmark-hero-cells i.oldest .hero-mark { animation: none; } #home .outmark-hero-cells i.incoming .hero-mark { opacity: 0; } }
#home #homeStack .hm-count[hidden] { display: none; }
#home #homeStack .hm-today-line { margin: -6px 0 0; color: var(--hm-muted); font: 500 13.5px/1.35 Arial, sans-serif; }
#home #homeStack .hm-today-line b { color: var(--hm-coral); }
/* One solid purple button per screen: the hero. The Daily's own button is an outline. */
#home #homeStack .hm-daily-cta { background: transparent !important; color: var(--hm-purple) !important; box-shadow: inset 0 0 0 2px var(--hm-purple) !important; }
#home #homeStack .hm-daily .daily-difficulty { background: #efeae0 !important; color: var(--hm-ink) !important; }
#home #homeStack .suite-row:not(.done) .suite-row-status { background: transparent; padding-right: 0; }
#home #homeStack .suite-row.done .suite-row-status { background: var(--hm-lime); color: var(--hm-ink); }
#home #homeStack .suite-row-copy small { white-space: normal; }
#home #homeStack .hm-you[hidden] { display: none !important; }

/* Calmer home (Oct 16): one list for Today, a compact ladder, people near the top. */
#home #homeStack .hm-daily { grid-template-columns: 38px minmax(0, 1fr) auto !important; gap: 12px !important; min-height: 58px !important; padding: 9px 14px 9px 10px !important; border: 1px solid var(--hm-line) !important; border-radius: 15px !important; background: var(--hm-paper) !important; box-shadow: none !important; }
#home #homeStack .hm-daily:hover { border-color: var(--hm-ink) !important; }
#home #homeStack .hm-daily .outmark-daily-preview, #home #homeStack .hm-daily .outmark-daily-preview svg { width: 38px !important; height: 38px !important; }
#home #homeStack .hm-daily .hm-kicker { display: none !important; }
#home #homeStack .hm-daily-copy { gap: 2px !important; }
#home #homeStack .hm-daily #dailyProgressTitle { font: 800 15px/1.2 Arial, sans-serif !important; }
#home #homeStack .hm-daily .daily-meta { font: 500 12.5px/1.25 Arial, sans-serif !important; }
#home #homeStack .hm-daily .daily-difficulty { padding: 2px 7px !important; font-size: 11px !important; }
#home #homeStack .hm-daily-cta { min-height: 0 !important; padding: 0 !important; box-shadow: none !important; font-size: 0 !important; }
#home #homeStack .hm-daily-cta > span { font-size: 20px !important; color: var(--hm-ink) !important; }
#home #homeStack .hm-ladder .bot-detail .bot-detail-stats, #home #homeStack .hm-ladder .bot-detail .bot-detail-empty, #home #homeStack .hm-ladder .bot-detail .bot-detail-note { display: none !important; }
#home #homeStack .hm-people { order: 2; }
#home #homeStack .hm-ladder { order: 3; }
#home #homeStack .hm-rivals { display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; align-items: center; gap: 12px; min-height: 58px; padding: 9px 14px 9px 10px; border: 1px solid var(--hm-line); border-radius: 15px; background: var(--hm-paper); color: var(--hm-ink); text-decoration: none; }
#home #homeStack .hm-rivals:hover { border-color: var(--hm-ink); }
#home #homeStack .hm-rivals-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--hm-ink); color: #fff; }
#home #homeStack .hm-rivals-icon svg, #home #homeStack .hm-rivals-go { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#home #homeStack .hm-rivals > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
#home #homeStack .hm-rivals b { font: 800 15px/1.2 Arial, sans-serif; }
#home #homeStack .hm-rivals small { overflow: hidden; color: var(--hm-muted); font: 500 12.5px/1.25 Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) {
  #home #homeStack .hm-today { grid-column: 1; grid-row: 2 / 4; align-content: start; }
  #home #homeStack .hm-ladder { grid-column: 2; grid-row: 3; }
  #home #homeStack .hm-people { grid-column: 2; grid-row: 2; }
  #home #homeStack .bot-detail { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px !important; padding: 0 !important; border: 0 !important; }
}