/* The product intro (index.html .home-intro): one simple hero, a game screen at night in colour. On the left, a
   headline, one line and one action — make a game (the games themselves start right below). On the right the cast
   (cast.mjs) standing in a row on the grass of Aspen's carrot patch, taking turns to speak in a bubble. Nothing the
   shelves repeat. Flat tones, no border, no gradient fill, 70/180/240ms motion. */
.home-page{--intro-control:#292929;--intro-control-hover:#303030;--intro-gutter:16px} /* --ap-color-control; one tone up */
.home-page .home-intro{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);align-items:center;gap:20px 32px;min-width:0;margin:20px 0 28px;padding:28px 36px 30px;overflow:hidden;border-radius:24px;background:#161a2b} /* one panel, a game screen at night: the backdrop is its sky and ground */
.home-page .intro-backdrop{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none} /* room under the top bar */
.home-page .home-intro [hidden],.home-page .home-continue[hidden]{display:none!important}

/* The words: a headline, one line, one action. */
.home-page .home-intro-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;container:intro-copy/inline-size}
.home-page .home-intro h1{margin:0;max-width:none;color:var(--ink);font:500 40px/48px var(--sans);letter-spacing:-.035em;text-wrap:balance}
.home-page .home-intro-lede{margin:12px 0 0;max-width:520px;color:var(--mute);font:400 16px/26px var(--sans);letter-spacing:0;text-wrap:balance}
.home-page .home-intro h1:is(:lang(zh),:lang(ja)){letter-spacing:0} /* Han and kana are set on a full em */
.home-page .home-intro :is(h1,p):lang(zh){word-break:keep-all;overflow-wrap:anywhere} /* lines break between phrases, at a comma or a space */
.home-page .home-intro :is(h1,p):lang(ja){word-break:auto-phrase}
.home-page .home-intro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px}
.home-page .home-intro-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 20px;border-radius:999px;background:var(--accent);color:#242424;font:500 15px/20px var(--sans);text-decoration:none;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color 180ms cubic-bezier(.2,.8,.2,1),transform 180ms cubic-bezier(.2,.8,.2,1)}
.home-page .home-intro-cta[data-variant=secondary]{background:var(--intro-control);color:var(--ink)}
.home-page .home-intro-cta>svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.home-page .home-intro-cta:is([data-pressed=true],:active){transform:translateY(1px);transition-duration:70ms}
.home-page .home-intro-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Add to Home Screen: a quiet third action, there only where the browser can install (install-guide.js). */
.home-page .home-intro .install-entry{display:inline-flex;align-items:center;gap:8px;width:auto;max-width:none;min-height:44px;margin:0;padding:0 10px;border:0;border-radius:var(--home-control-radius);background:none;box-shadow:none;color:var(--mute);text-align:left;transition:background-color 180ms cubic-bezier(.2,.8,.2,1),color 180ms cubic-bezier(.2,.8,.2,1),transform 180ms cubic-bezier(.2,.8,.2,1)}
.home-page .home-intro .install-entry>svg{width:18px;height:18px;padding:0;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.home-page .home-intro .install-entry>span{display:block}
.home-page .home-intro .install-entry strong{font:400 14px/20px var(--sans);letter-spacing:0;white-space:nowrap}
.home-page .home-intro .install-entry:is([data-pressed=true],:active){transform:translateY(1px);transition-duration:70ms}
.home-page .home-intro .install-entry:focus-visible{outline:1.5px solid #aaa;outline-offset:2px}
.home-page #install-entry-note{display:none}
@container intro-copy (width < 480px){ /* a narrow column keeps both actions and Add to Home Screen on one line: the last turns to its icon */
 .home-page .home-intro .install-entry{width:44px;padding:0;justify-content:center}
 .home-page .home-intro .install-entry>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* the label stays the accessible name */
}
@media(hover:hover){
 .home-page .home-intro-cta:hover{background:var(--ink)}
 .home-page .home-intro-cta[data-variant=secondary]:hover{background:var(--intro-control-hover)}
 .home-page .home-intro .install-entry:hover{background:#ffffff08;color:#e0e0e0}
}

/* The main thing (home-intro-cast.mjs): the cast in a row on the grass, flat pixel art — the stage reaches the panel's
   right and bottom edges, so they stand on the backdrop's grass — and over whoever is speaking a bubble with its name,
   in its colour, and its line (home-intro.js places it). A press on one has it speak. */
.home-page .home-intro-shot{position:relative;align-self:stretch;min-width:0;min-height:340px;margin:-28px -36px -30px 0}
.home-page .intro-cast-stage{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:CanvasText}
.home-page .intro-cast{position:absolute;left:var(--x,50%);top:var(--y,50%);z-index:1;display:flex;align-items:baseline;gap:8px;max-width:calc(100% - 16px);margin:0;padding:8px 14px;box-sizing:border-box;border-radius:14px;background:#f2f2f2;box-shadow:0 2px 0 #0000004d;color:#1d1d1d;font:500 15px/20px var(--sans);white-space:nowrap;pointer-events:none;transform:translate(-50%,calc(-100% - 14px));transition:left 240ms cubic-bezier(.2,.8,.2,1),top 240ms cubic-bezier(.2,.8,.2,1)}
.home-page .intro-cast::after{content:'';position:absolute;left:calc(50% + var(--tail,0px));bottom:-5px;width:12px;height:12px;border-radius:2px;background:inherit;transform:translateX(-50%) rotate(45deg)} /* the tail, pointing at the speaker */
.home-page .intro-cast-name{flex:none;color:var(--cast,#262626);font:700 15px/20px var(--sans)}
.home-page .intro-cast-line{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* 继续玩, on phones only (wider, the bar's search lists the games played lately). One compact row of the games played
   lately; a chip is the card at control scale, the game's object standing on one flat surface. */
.home-page .home-continue{display:none}
.home-page .home-chip-list{display:flex;align-items:center;gap:8px}
.home-page .home-chip{display:flex;align-items:center;gap:10px;flex:none;min-height:44px;padding:0 16px 0 4px;border-radius:var(--home-control-radius);background:var(--home-control-bg);box-shadow:none;color:#d5d5d5;font:400 14px/20px var(--sans);text-decoration:none;white-space:nowrap;scroll-snap-align:start;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color 180ms cubic-bezier(.2,.8,.2,1),transform 180ms cubic-bezier(.2,.8,.2,1)}
.home-page .home-chip:is([data-pressed=true],:active){transform:translateY(1px);transition-duration:70ms}
.home-page .home-chip:focus-visible{outline:1.5px solid #aaa;outline-offset:3px}
.home-page .home-chip-thumb{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;flex:none;width:36px;height:36px;border-radius:8px;background:none;box-shadow:none;overflow:hidden}
.home-page .home-chip-thumb>img{grid-area:1/1;display:block;width:auto;max-width:none;height:calc(32px * var(--thumb-scale,1));transform:translate(var(--thumb-x,0%),var(--thumb-y,0%));pointer-events:none}

/* Narrower columns: the headline steps down and the shot narrows; below 820px the shot follows the words. */
@container home-main (width <= 1100px){
 .home-page .home-intro{grid-template-columns:minmax(0,1fr) minmax(0,47%);gap:20px 28px}
 .home-page .home-intro h1{font-size:36px;line-height:44px}
}
@container home-main (width <= 900px){
 .home-page .home-intro h1{font-size:32px;line-height:40px}
}
@container home-main (width <= 820px){
 .home-page .home-intro{grid-template-columns:minmax(0,1fr)}
 .home-page .home-intro-shot{min-height:260px;margin:0 -36px -30px}
}

/* Phones: the words, then a smaller shot; the row of games played lately follows. */
@media(max-width:760px),(max-width:1000px) and (max-height:500px){
 .home-page .home-continue:not([hidden]){display:flex;align-items:center;gap:12px;min-width:0;margin:-4px calc(-1 * var(--intro-gutter)) 16px;padding:8px var(--intro-gutter);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--intro-gutter);scrollbar-width:none}
 .home-page .home-continue::-webkit-scrollbar{display:none}
 .home-page .home-continue h2{flex:none;margin:0;color:var(--mute);font:400 14px/20px var(--sans);white-space:nowrap;scroll-snap-align:start} /* a snap point, so the row never opens scrolled past its label */
}
@media(max-width:760px){
 .home-page .home-intro{gap:12px;margin:12px 0 16px;padding:20px 18px 18px;border-radius:20px}
 .home-page .home-intro h1{font-size:28px;line-height:36px}
 .home-page .home-intro-lede{font-size:15px;line-height:24px}
 .home-page .home-intro-actions{flex-wrap:nowrap;gap:8px}
 .home-page .home-intro-cta{padding:0 12px 0 14px;font-size:14px}
 .home-page .home-intro-shot{min-height:220px;margin:0 -18px -18px}
 .home-page .intro-cast{padding:6px 12px;font-size:14px}
 .home-page .intro-cast-name{font-size:14px}
}
@media(min-width:761px){.home-page .home-intro .install-entry{display:none!important}} /* one action beside the rail; phones keep it */
@media(max-width:360px){.home-page{--intro-gutter:12px}} /* the shell's own gutter there (home-minimal.css) */
@media(prefers-reduced-motion:reduce){
 .home-page :is(.home-intro-cta,.home-chip),.home-page .home-intro .install-entry{transition:none}
 .home-page :is(.home-intro-cta,.home-chip):is([data-pressed=true],:active),.home-page .home-intro .install-entry:is([data-pressed=true],:active){transform:none}
 .home-page .home-continue{scroll-behavior:auto}
 .home-page .intro-cast{transition:none}
}
@media(forced-colors:active){
 .home-page :is(.home-intro-cta,.home-chip),.home-page .home-intro .install-entry{outline:1px solid CanvasText;outline-offset:-1px}
 .home-page .home-intro-cta{forced-color-adjust:none;background:ButtonText;color:ButtonFace}
 .home-page .home-intro-cta[data-variant=secondary]{background:ButtonFace;color:ButtonText}
}