/* Game covers: color belongs to the objects; the interface around them stays graphite. */
.home-page .world-motion{opacity:.10}
body.home-page::before{opacity:.07}
.home-page .game-filters{position:relative;isolation:isolate;display:flex;width:max-content;max-width:100%;gap:2px;padding:0;margin:0;border-radius:10px;background:none;box-shadow:none;overflow-x:auto;scrollbar-width:none}
.home-page .game-filters::-webkit-scrollbar{display:none}
.home-page .game-filters button{position:relative;z-index:1;flex:none;min-height:44px;padding:0 15px;border:0;border-radius:var(--home-control-radius);background:none;box-shadow:none;color:#919191;font:400 13px var(--sans);white-space:nowrap;cursor:pointer;transition:color .18s,background .18s}
.home-page .game-filters button[aria-pressed=true]{background:var(--home-control-bg);box-shadow:var(--home-control-shadow);color:#eee}
.home-page .game-filters[data-ready] button[aria-pressed=true]{background:none;box-shadow:none}
.home-page .game-filters button:active{transform:none}
.home-page .game-filters button:focus-visible{outline:1.5px solid #aaa;outline-offset:-3px}
.home-page .game-filter-indicator{position:absolute;top:0;left:0;z-index:0;pointer-events:none;border-radius:10px;background:var(--home-control-bg);box-shadow:var(--home-control-shadow);transition:transform .28s cubic-bezier(.2,.8,.2,1),width .28s cubic-bezier(.2,.8,.2,1)}
.home-page .game-filters:not([data-ready]) .game-filter-indicator{visibility:hidden}
/* Game cards: the harness card (design-system/components.css, @component card) on product variables.
   The cover carries the object on one solid graphite plane; the title and a quiet meta line sit beneath it;
   the launch control appears on hover and keyboard focus. No tint, no gradient, no border: tone and light only.
   Motion keeps to the harness tempos: 70ms press, 180ms feedback, 240ms entrance, 400ms launch travel, 650ms art drift. */
.home-page{
 --card-cover:#242424;--card-cover-hover:#292929;--card-radius:16px;--card-caption-gap:12px;
 --card-title:#ededed;--card-meta:#878787;--card-focus:#d1d1d1;
 --card-enter:cubic-bezier(.22,1,.36,1);--card-feedback:cubic-bezier(.2,.8,.2,1);
}
.home-page .game-collection .game-card{
 display:flex;flex-direction:column;gap:var(--card-caption-gap);position:relative;isolation:isolate;
 min-width:0;min-height:0;height:auto;aspect-ratio:auto;padding:0;border:0;border-radius:var(--card-radius);
 background:none;box-shadow:none;overflow:visible;animation:none;color:inherit;text-decoration:none;
 touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:none;
}
.home-page .game-card::before,.home-page .game-card::after{display:none;content:none}
/* The cover: one plane with a hairline of light on its top edge. */
.home-page .card-art{
 position:relative;isolation:isolate;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;flex:none; /* one definite cell, so the art's % height reads the cover */
 aspect-ratio:4/3;height:auto;min-height:0;padding:0;overflow:hidden;
 border:0;border-radius:var(--card-radius);background:var(--card-cover);box-shadow:inset 0 1px 0 #ffffff08;
 pointer-events:none;transform:none;
 transition:background-color 180ms var(--card-feedback),transform 240ms var(--card-enter);
}
.home-page .card-art::before,.home-page .card-art::after{display:none;content:none}
/* The object: its drawing is sized by the cover's height (--art-h) times the game's optical scale, so it is
   drawn at its final size and stays sharp; it moves in percentages of its own box, so one set of values holds
   for every cover ratio (4:3 shelves, 16:9 featured, 1:1 recent). */
.home-page .game-object{
 display:block;grid-area:1/1;width:auto;max-width:none;height:calc(var(--art-h,84%) * var(--object-scale,1));object-fit:contain;filter:none;
 transform:translate(var(--object-x,0%),var(--object-y,0%));transform-origin:50% 55%;
 transition:transform 650ms var(--card-enter);
}
/* Optical framing, measured from the drawings: each object's solid box inside its 400x260 art (alpha above 200,
   soft shadows left out). Scale brings every object to one optical size, the geometric mean of its width and
   height weighted by how much of that box it inks (thin line art reads lighter, so it is drawn a little larger),
   with tall objects held to 69% of the art height, then corrected by eye where contrast or perspective misleads
   the measure: chess x.92 (a white king reads larger), flight x.95, gomoku x1.04 (a board seen at an angle reads
   smaller than its box), uno x1.06. x centres the box; y stands its lowest solid point on one baseline, 29% of
   the art height below the cover's centre (74.5% down a 4:3 cover). */
.home-page .object-sheep{--object-scale:1.107;--object-x:0%;--object-y:3.27%}
.home-page .object-blocks{--object-scale:.954;--object-x:1.5%;--object-y:-7.12%}
.home-page .object-snake{--object-scale:1.028;--object-x:1.37%;--object-y:-1.24%}
.home-page .object-merge{--object-scale:.979;--object-x:-1.12%;--object-y:-5.2%}
.home-page .object-chroma{--object-scale:1.008;--object-x:-.12%;--object-y:-4.52%}
.home-page .object-chess{--object-scale:1;--object-x:-.62%;--object-y:-4.29%}
.home-page .object-gomoku{--object-scale:.878;--object-x:.12%;--object-y:-7.93%}
.home-page .object-xiangqi{--object-scale:.935;--object-x:.62%;--object-y:-6.11%}
.home-page .object-flight{--object-scale:.963;--object-x:2.25%;--object-y:-5.86%}
.home-page .object-doudizhu{--object-scale:1.027;--object-x:-.5%;--object-y:-1.98%}
.home-page .object-guandan{--object-scale:.991;--object-x:.87%;--object-y:-3.64%}
.home-page .object-uno{--object-scale:.778;--object-x:-1.12%;--object-y:-10.2%}
.home-page .object-poker{--object-scale:.845;--object-x:0%;--object-y:2.21%}
.home-page .object-relay{--object-scale:1.06;--object-x:.62%;--object-y:-2.48%}
.home-page .object-ojisan{--object-scale:1.008;--object-x:-.5%;--object-y:-.68%}
.home-page .object-king{--object-scale:.867;--object-x:1.12%;--object-y:-7.12%}
.home-page .object-truth{--object-scale:.921;--object-x:-1.12%;--object-y:-5.64%}
.home-page .object-undercover{--object-scale:.933;--object-x:-.25%;--object-y:-6.81%}
.home-page .object-dice{--object-scale:.939;--object-x:-1.12%;--object-y:-1.63%}
/* Launch: the harness control. Hidden at rest; the whole card is the target. */
.home-page .card-launch{
 position:absolute;right:12px;bottom:12px;z-index:2;display:grid;place-items:center;
 width:36px;height:36px;margin:0;border:0;border-radius:50%;background:var(--card-title);color:#181818;
 box-shadow:0 4px 12px #0000004d;opacity:0;transform:translateY(6px) scale(.92);
 transition:opacity 240ms var(--card-feedback),transform 400ms var(--card-enter);
}
.home-page .card-launch svg{display:block;width:14px;height:14px;margin:0;fill:currentColor;stroke:none} /* the triangle is drawn centred on its centroid */
/* Caption: title and meta on the left, activity on the right, sharing the title's baseline. */
.home-page .card-caption{
 position:static;display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex:none;
 min-height:0;margin:0;padding:0 2px;border:0;background:none;
}
.home-page .card-caption>div{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.home-page .card-caption h3{margin:0;font:500 15px/20px var(--sans);letter-spacing:-.01em;color:var(--card-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-page .card-meta{display:block;font:400 12px/16px var(--sans);letter-spacing:0;color:var(--card-meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-page .card-caption h3:is(:lang(zh),:lang(ja)){letter-spacing:0} /* Han and kana are set on a full em: no negative tracking */
.home-page .card-meta:empty{display:none}
.home-page .game-card[hidden]{display:none}
.home-page .game-filters button:hover{color:#eee}
.home-page .card-heat[data-heat='0'],.home-page .card-heat[data-heat='unknown']{visibility:hidden}
/* Focus: the ring wraps the whole card, cover and title; the cover takes its hover tone and the launch comes forward. */
.home-page .game-collection .game-card:focus-visible{outline:2px solid var(--card-focus);outline-offset:6px}
.home-page .game-collection .game-card:focus-visible .card-art{background:var(--card-cover-hover)}
.home-page .game-card:focus-visible .card-launch{opacity:1;transform:none}
@media(hover:hover){
 .home-page .game-collection .game-card:hover .card-art{background:var(--card-cover-hover)}
 .home-page .game-card:hover .game-object{transform:translate(var(--object-x,0%),calc(var(--object-y,0%) - 3% / var(--object-scale,1))) scale(1.06) rotate(-2deg)} /* the same lift for every object: 3% of the art height */
 .home-page .game-card:hover .card-launch{opacity:1;transform:none}
}
/* Touch: there is no hover, so the launch stays out of the art. Nineteen bright discs would outshine the objects,
   and the card itself is the target. The press is answered by the cover. */
/* Press: the cover gives a little; the object stays where it is. */
.home-page .game-collection .game-card:is([data-pressed=true],:active) .card-art{transform:scale(.985);transition-duration:70ms}
/* The flat grid (a filter is on): the same card, six to a row. */
.home-page .game-collection[data-filter] .game-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 16px;max-width:none;padding:0;border-radius:0;background:none;box-shadow:none}
@media(max-width:1100px){
 .home-page .game-collection[data-filter] .game-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 12px}
}
@media(max-width:760px){
 .home-page .game-filters{margin-bottom:14px}
 .home-page .game-filters button{min-height:44px;padding-inline:12px;font-size:12px}
 .home-page .game-collection[data-filter] .game-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;padding:0;border-radius:0}
 .home-page{--card-radius:14px}
 .home-page .card-caption h3{font-size:14px;line-height:20px}
 .home-page .card-meta{font-size:11px}
 .home-page .card-launch{right:10px;bottom:10px;width:32px;height:32px}
 .home-page .card-launch svg{width:12px;height:12px}
 .home-page .game-card .card-heat,.home-page .discovery-heat{display:none}
}
@media(max-width:360px){
 .home-page .game-filters{width:100%}
 .home-page .game-filters button{flex:1;padding-inline:9px;font-size:11px}
 .home-page .card-caption h3{font-size:13px} /* a 127px card: the longest names (テキサスホールデム) still fit on one line */
}
@media(prefers-reduced-motion:reduce){
 .home-page .game-card,.home-page .card-art,.home-page .game-object,.home-page .card-launch,.home-page .game-filters button,.home-page .game-filter-indicator{animation:none!important;transition:none!important}
 .home-page .game-card:hover .game-object{transform:translate(var(--object-x,0%),var(--object-y,0%))}
 .home-page .game-collection .game-card:is([data-pressed=true],:active) .card-art{transform:none}
}
@media(forced-colors:active){
 .home-page .card-art{outline:1px solid CanvasText;outline-offset:-1px}
 .home-page .card-launch{forced-color-adjust:none;background:ButtonText;color:ButtonFace}
 .home-page .game-collection .game-card:focus-visible{outline-color:Highlight}
}

/* Activity occupies the existing caption line, with details only on request. */
.home-page .collection-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.home-page .collection-toolbar .game-filters{min-width:0;margin:0}
.home-page .game-heat-info{display:flex;align-items:center;justify-content:center;gap:5px;flex:none;margin-left:auto;min-height:44px;padding:0 8px;border:0;border-radius:9px;background:none;color:#909090;font:400 12px var(--sans)}
.home-page .game-heat-info:hover{color:#d6d6d6;background:#ffffff04}
.home-page .game-heat-info svg,.home-page .card-heat svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linejoin:round;stroke-linecap:round}
.home-page .card-heat{display:inline-flex;align-items:baseline;gap:4px;flex:none;margin-left:auto;color:#878787;font:400 12px/16px var(--sans);font-variant-numeric:tabular-nums}
.home-page .card-heat svg{align-self:center} /* the number sits on the title's baseline; the flame centres on the number */
.home-page .card-heat[data-heat='0'],.home-page .card-heat[data-heat='unknown']{color:#717171}
.home-page .card-heat[data-heat='2']{color:#c2c2c2}
.home-page .card-heat[data-heat='2'] svg{fill:#c2c2c233}
.home-page .card-heat[data-heat='3']{color:#e0e0e0}
.home-page .card-heat[data-heat='3'] svg{fill:#e0e0e0}
.game-heat-description{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}
.home-page .game-heat-dialog{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.home-page .game-heat-dialog .game-mode-heading{margin-bottom:10px}
.home-page #game-heat-note{margin:0;font-size:13px;line-height:1.7;color:#b2b2b2}
.home-page #game-heat-status{margin:10px 0 15px;font-size:11px;line-height:1.5;color:#909090}
.home-page .game-heat-details{display:grid;gap:2px}
.home-page .game-heat-row{display:grid;grid-template-columns:1fr auto 84px;align-items:center;gap:12px;min-height:33px;font:400 13px var(--sans);color:#c8c8c8}
.home-page .game-heat-row>span:nth-child(2){font-variant-numeric:tabular-nums}
.home-page .game-heat-row small{font:400 10px var(--sans);text-align:right;color:#888}
@media(max-width:760px){
 .home-page .collection-toolbar{gap:6px;margin-bottom:8px}
 .home-page .collection-toolbar .game-filters{flex:1;width:auto}
 .home-page .game-heat-info{padding-inline:4px;font-size:11px;gap:3px}
 .home-page .card-heat{font-size:9px;gap:2px}
 .home-page .card-heat svg{width:11px;height:11px}
 .home-page .game-heat-dialog .game-mode-heading{gap:12px}
 .home-page .game-heat-dialog .game-mode-heading h2{font-size:20px}
 .home-page .game-heat-row{grid-template-columns:1fr auto 70px;gap:8px;font-size:12px}
}
@media(max-width:360px){
 .home-page .game-heat-info{width:40px;padding:0}
 .home-page .game-heat-info>span{display:none}
 .home-page .card-heat .heat-number{display:none}
}