/* Play-first layouts share the field guide's palette and original project media. */
header{padding-block:18px;gap:24px}header nav{gap:20px}.header-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:6px;padding:0 10px;max-width:220px;min-width:140px}.header-search input{width:100%;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:13px;padding:10px 0}.header-search button{background:none;color:var(--accent);min-width:32px;min-height:44px;font-size:20px}
.play-home{padding:34px 0 0}.home-intro{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px}.home-intro h1{font-size:clamp(36px,3.5vw,56px);line-height:1.06;letter-spacing:-.055em;margin:14px 0}.home-intro>div>p:last-child{color:var(--muted);font-size:14px;line-height:1.65;max-width:420px}.home-search{max-width:520px;width:100%;justify-self:end}.home-search label{display:block;font-size:14px;margin-bottom:12px}.home-search>div{display:flex;border:1px solid var(--line);padding:5px;border-radius:6px;background:var(--panel)}.home-search input{width:100%;min-width:0;background:none;border:0;padding:12px;color:var(--ink);font:inherit;font-size:15px}.home-search .button{min-height:44px;padding:10px 18px}.home-search>a{display:inline-block;font-size:12px;color:var(--muted);margin-top:12px}.category-pills{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 22px}.category-pills a{border:1px solid var(--line);border-radius:30px;padding:10px 15px;font-size:12px;min-height:44px;display:flex;align-items:center}.category-pills a:hover{border-color:var(--accent);color:var(--accent)}
.play-tile{display:block;position:relative;overflow:hidden;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:8px;aspect-ratio:1.65}.play-tile img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .25s}.play-tile:hover img{transform:scale(1.025)}.tile-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:start;justify-content:end;padding:18px;background:linear-gradient(transparent 15%,#10130fa8 55%,#10130ff5)}.tile-copy>span:first-child{font-size:10px;color:#d2d8c9;letter-spacing:.08em}.tile-copy h2,.tile-copy h3{font-size:24px;line-height:1.15;margin:5px 0;color:#f1f3e8;letter-spacing:-.03em}.tile-copy .tile-launch{font-size:11px;color:#d1ed83;margin-top:7px}.play-tile--featured .tile-copy{padding:28px}.play-tile--featured h2{font-size:42px}.tile-copy p{font-size:14px;color:#e0e3d9;line-height:1.6;max-width:340px}.play-tile--featured .tile-launch{padding:10px 16px;background:var(--accent);color:var(--bg);border-radius:4px;font-weight:700;font-size:13px;margin-top:16px}.home-footnote{display:flex;justify-content:space-between;gap:16px;padding:17px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:11px}.home-more{padding:38px 0}.home-more .section-title h2{font-size:32px}.play-home~.section{padding-block:38px}.play-home~.section .section-title h2{font-size:32px}.play-home~.section .theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.play-home~.closing{padding-block:38px}.play-home~.closing h2{font-size:44px}
/* Keep the featured game and its four companion cards above the referral. */
.play-home { padding-top: 18px; }
.home-intro h1 { font-size: clamp(32px, 3vw, 48px); margin-block: 6px 8px; text-wrap: balance; }
.home-intro > div > p:last-child { max-width: none; line-height: 1.45; }
.home-picks, .home-more-grid {
  --home-card-height-limit: max(clamp(166px, 20svh, 220px), calc(100svh - 860px));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.home-picks { margin-top: 16px; }
/* The two shelves share a card size, with a height cap to protect the first screen. */
:is(.home-picks, .home-more-grid) > .play-tile:not(.play-tile--featured) {
  width: 100%;
  max-height: var(--home-card-height-limit);
}
.home-picks .play-tile:not(.play-tile--featured, .play-tile--full-preview) .tile-copy {
  padding: 12px;
  background: linear-gradient(0deg, #10130ff5, #10130fc2 58%, transparent);
}
.home-picks .tile-copy h3 { font-size: clamp(17px, 2vw, 24px); }
.home-picks .play-tile--full-preview {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.home-picks .play-tile--full-preview img {
  display: block;
  object-fit: contain;
  object-position: center;
}
.home-picks .play-tile--full-preview:hover img { transform: none; }
.home-picks .play-tile--full-preview .tile-copy {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2px 8px;
  padding: 7px 10px;
  background: #10130f;
}
.home-picks .play-tile--full-preview .tile-copy h3 { grid-column: 1; margin: 0; }
.home-picks .play-tile--full-preview .tile-launch { grid-area: 2 / 2; margin: 0; }

@media (max-height: 1000px), (max-width: 800px) {
  .home-more-grid .tile-copy { padding: 7px 10px; }
  .home-more-grid .tile-copy h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    flex: none;
    font-size: clamp(15px, 1.4vw, 20px);
    line-height: 1.1;
    margin-block: 2px;
  }
  .home-more-grid .tile-copy > span { line-height: 1.25; }
  .home-more-grid .tile-copy .tile-launch { margin-top: 3px; }
}
.play-tile--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template: "copy media" minmax(0, 1fr) / minmax(220px, 1fr) minmax(0, 3fr);
  aspect-ratio: auto;
  height: clamp(300px, calc(100svh - 270px - var(--home-card-height-limit)), 640px);
  background: #131b23;
}
.play-tile--featured picture {
  grid-area: media;
  display: flex;
  align-items: center;
  container-type: inline-size;
  min-height: 0;
  background: #0d1319;
}
.play-tile--featured img {
  display: block;
  /* Fill the width without cropping the original 320 × 200 frame. */
  max-height: 62.5cqw;
  object-fit: fill;
}
@media (prefers-reduced-motion: reduce) {
  .play-tile--featured img { max-height: none; object-fit: contain; }
}
.play-tile--featured:hover img { transform: none; }
.play-tile--featured .tile-copy {
  grid-area: copy;
  position: static;
  justify-content: center;
  background: none;
}
.play-home .category-pills { margin-block: 16px 0; }
@media (min-width: 681px) and (max-height: 1240px) {
  .play-home { padding-top: 10px; }
  .home-intro h1 { font-size: clamp(26px, 2.35vw, 35px); margin-block: 4px 6px; }
  .home-intro .eyebrow, .home-intro .home-tagline { display: none; }
  .home-intro > div > p:last-child { font-size: 13px; line-height: 1.35; }
  .home-search label { margin-bottom: 5px; }
  .home-search > div { padding: 2px; }
  .home-search > a { margin-top: 5px; }
  .home-picks { margin-top: 12px; }
}
@media (max-height: 1240px), (max-width: 680px) {
  .home-search label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}
@media (min-width: 681px) and (max-height: 820px) {
  .home-intro h1 { font-size: clamp(26px, 2.35vw, 32px); }
  .home-picks, .home-more-grid { --home-card-height-limit: clamp(145px, 20svh, 166px); gap: 10px; }
  .play-tile--featured { height: clamp(220px, calc(100svh - 259px - var(--home-card-height-limit)), 430px); }
}
@media (min-width: 681px) and (max-width: 1100px) and (max-height: 820px) {
  .play-tile--featured { height: clamp(220px, calc(100svh - 293px - var(--home-card-height-limit)), 430px); }
}
.game-page-heading{padding:22px 0 24px;align-items:center;gap:24px}.game-page-heading h1{font-size:clamp(32px,3.4vw,52px);line-height:1.08;margin:9px 0 12px}.game-page-heading .lede{font-size:14px;line-height:1.6;max-width:760px}.game-page-heading .tags{margin-top:13px}.game-page-heading .launch{flex-basis:210px;gap:8px}.game-page-heading .launch p{margin-top:0;font-size:10px}.game-page-heading .launch .button{min-height:44px;padding:10px 16px;font-size:12px}.game-page-heading .launch>.save{display:none}.game-page-heading+.play-workspace{margin-top:0}
.play-workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start}.play-workspace>.embed-game{margin:0;padding:0;min-width:0;border-radius:8px;overflow:hidden}.play-workspace .embed-header{padding:12px 16px;margin:0;gap:16px;align-items:center}.play-workspace .embed-header h2{font-size:17px;margin:0}.play-workspace .embed-header .eyebrow,.play-workspace .embed-header p:not(.eyebrow){display:none}.play-workspace .embed-header>a{font-size:11px;gap:8px}.play-workspace .embed-stage{border-inline:0;width:100%}.play-workspace .embed-viewport{height:clamp(320px,52svh,510px)}.play-workspace .embed-controls{padding:10px 16px;margin:0;font-size:12px}.play-workspace .embed-status,.play-workspace .embed-note{padding-inline:16px;font-size:11px;line-height:1.65}.play-workspace .embed-note{margin-bottom:14px}.play-workspace .embed-toolbar{gap:10px;padding:10px 12px}.embed-toolbar .outline{padding:9px 12px;font-size:12px;min-height:44px}.play-workspace .embed-stage:has(.embed-toolbar[hidden]){border-bottom:0}.embed-poster picture{display:block;width:100%;height:100%}.embed-poster picture img{width:100%;height:100%;object-fit:contain;opacity:.75}.embed-poster-label{background:#10120f40}.embed-poster-label strong{display:flex;gap:12px;align-items:center}
.play-help{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:20px}.play-help h2{font-size:23px;line-height:1.15;margin:8px 0 15px}.play-help .eyebrow{font-size:9px;letter-spacing:1.3px}.play-help .control-list{margin:0}.play-help .control-list>div{grid-template-columns:1fr;gap:5px;padding:10px 0}.play-help .control-list dt{font-size:12px}.play-help .control-list dd{font-size:12px;line-height:1.6;color:var(--muted)}.play-help .caption{font-size:10px}.quick-tip{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}.quick-tip h3{font-size:18px;line-height:1.3;margin:10px 0}.quick-tip>p:not(.eyebrow){font-size:12px;line-height:1.7;color:var(--muted)}.quick-tip a{display:inline-block;font-size:11px;margin-top:12px;color:var(--accent)}.play-workspace>.detail-photo{min-width:0;margin:0}.play-workspace>.detail-photo figcaption{font-size:11px;line-height:1.7}.play-workspace .external-game-overlay{opacity:1;background:linear-gradient(transparent,#10120fc9)}
.next-games{padding:24px 0;border-bottom:1px solid var(--line)}.shelf-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px}.shelf-heading h2{font-size:22px}.shelf-heading>a{font-size:12px;color:var(--muted)}.next-game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.next-game{display:flex;gap:14px;align-items:center;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:6px;min-width:0}.next-game img{width:90px;height:66px;object-fit:cover;border-radius:3px;flex:none}.next-game>div{min-width:0}.next-game h3{font-size:17px;line-height:1.2;letter-spacing:-.02em}.next-game p{font-size:11px;line-height:1.5;color:var(--muted);margin-top:5px}.next-game div>span{display:block;font-size:10px;color:var(--accent);margin-top:5px}.next-arrow{margin-left:auto}.next-games~.first-moves{padding-top:30px}.next-games~.first-moves h2{font-size:30px}.next-games~.article-layout{padding-top:38px}.play-workspace:has(.theater-active){display:block}.play-workspace:has(.theater-active)>.play-help{display:none}.theater-active .embed-viewport{height:min(76svh,850px)}
@media(min-width:1001px) and (max-width:1300px){header nav{gap:12px;font-size:11px}.header-search{max-width:170px}.brand-wordmark{font-size:21px}}
@media(max-width:1100px){.play-workspace{grid-template-columns:minmax(0,1fr) 240px;gap:16px}.play-help{padding:16px}.next-game img{width:64px;height:60px}.next-game p{display:none}}
@media(max-width:1000px){header .header-search{margin-left:auto;max-width:260px}.play-home~.section .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.play-workspace{grid-template-columns:1fr}.play-workspace .embed-viewport{height:clamp(320px,55svh,510px)}.play-help{display:grid;grid-template-columns:1fr 1fr;gap:24px}.quick-tip{border-top:0;border-left:1px solid var(--line);padding:0 0 0 20px;margin:0}.home-intro{gap:24px}.next-game-grid{grid-template-columns:1fr}.next-game img{width:84px}.next-game p{display:block}.game-page-heading .launch{flex-basis:180px}}
@media(max-width:600px){header{padding-block:14px;gap:12px}header .header-search{display:none}.home-intro{grid-template-columns:1fr;gap:22px}.play-home{padding-top:26px}.home-intro h1{font-size:39px}.home-search{max-width:none}.category-pills{margin-block:20px;gap:6px}.category-pills a{font-size:11px;padding:8px 12px}.play-tile--featured .tile-copy{padding:20px}.play-tile--featured h2{font-size:32px}.tile-copy{padding:12px}.tile-copy h3{font-size:19px}.tile-copy>span:first-child{font-size:8px}.tile-copy .tile-launch{font-size:10px}.home-footnote{font-size:10px;line-height:1.6}.home-footnote>a{flex:none}.play-home~.section .theme-grid{grid-template-columns:1fr}.game-page-heading{padding:18px 0}.game-page-heading .launch{margin-top:14px;display:block}.game-page-heading .launch p{display:none}.game-page-heading .tags span{font-size:9px}.game-page-heading h1{font-size:36px}.play-workspace .embed-header{padding:12px;flex-direction:row}.play-workspace .embed-header h2{font-size:15px}.play-workspace .embed-header>a{font-size:10px;flex-shrink:1}.play-workspace .embed-viewport{height:clamp(300px,48svh,430px)}.play-workspace .embed-poster-label strong{padding:12px 18px;font-size:16px}.play-workspace .embed-status,.play-workspace .embed-note{padding-inline:12px}.play-help{grid-template-columns:1fr;gap:18px}.quick-tip{padding:18px 0 0;border-left:0;border-top:1px solid var(--line)}.play-help .control-list>div{grid-template-columns:110px minmax(0,1fr);gap:12px}.shelf-heading h2{font-size:20px}.shelf-heading>a{font-size:11px}.next-games~.first-moves h2{font-size:27px}.play-workspace:has(.theater-active) .embed-viewport{height:70svh}}
@media (max-width: 1000px) {
  :is(.home-picks, .home-more-grid) > .play-tile:not(.play-tile--featured) { aspect-ratio: 1.4; }
}
@media (max-width: 680px) {
  .play-home { padding-top: 8px; }
  .home-intro { grid-template-columns: 1fr; gap: 7px; }
  .home-search { max-width: none; }
  .home-intro h1 { font-size: clamp(25px, 6.4vw, 33px); }
  .home-intro .home-tagline { display: none; }
  .home-intro > div > p:last-child { font-size: 12px; }
  .home-search > div { padding: 2px; }
  .home-search > a { margin-top: 4px; font-size: 11px; }
  .home-picks, .home-more-grid {
    --home-card-height-limit: clamp(107px, 14svh, 129px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .home-picks { margin-top: 12px; }
  .play-tile--featured {
    grid-template: "media" minmax(0, 1fr) "copy" auto / minmax(0, 1fr);
    height: clamp(158px, calc(55svh - 2 * var(--home-card-height-limit)), 305px);
  }
  .play-tile--featured .tile-copy { padding: 8px 14px; }
  .play-tile--featured h2 { font-size: 27px; margin-block: 2px; }
  .play-tile--featured .tile-copy p { font-size: 12px; line-height: 1.35; }
  .play-tile--featured .tile-launch { margin-top: 5px; padding: 7px 12px; }
  :is(.home-picks, .home-more-grid) > .play-tile:not(.play-tile--featured, .play-tile--full-preview) .tile-copy { padding: 8px 10px; }
  .home-picks .tile-copy h3 { font-size: 17px; margin-block: 3px; }
  .home-picks .tile-copy .tile-launch { margin-top: 4px; }
  .home-more-grid .tile-copy h3 { font-size: clamp(14px, 4vw, 17px); }
  .home-picks .play-tile--full-preview .tile-copy { padding: 4px 8px; }
  .play-tile--featured .tile-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    align-items: center;
  }
  .play-tile--featured .tile-copy h2 { grid-column: 1; }
  .play-tile--featured .tile-copy p { grid-column: 1 / -1; }
  .play-tile--featured .tile-launch { grid-area: 1 / 2 / 3; margin: 0; }

}
@media (max-width: 359px) {
  .home-picks .play-tile--full-preview .tile-copy { grid-template-columns: 1fr; }
  .home-picks .play-tile--full-preview .tile-launch { grid-area: auto; }
}
@media (max-width: 400px) and (max-height: 760px) {
  .home-picks, .home-more-grid { --home-card-height-limit: 102px; }
  .home-intro > div > p { display: none; }
  .home-intro h1 { margin-block: 0; }
  .play-tile--featured { height: 165px; }
}
@media(prefers-reduced-motion:reduce){.play-tile img{transition:none}}
.play-main{min-width:0}.play-workspace .play-main>.embed-game{margin:0;padding:0;border-radius:8px;overflow:hidden}.poster-credit{margin:10px 0 0;max-width:85ch}.game-page-heading .launch>.save{display:block;min-height:44px;padding:8px 12px;font-size:12px}.play-workspace .embed-viewport:fullscreen{height:100dvh}.theater-active .embed-viewport{height:min(76svh,850px)}
.home-search .button{flex:none;white-space:nowrap;gap:6px}
.theme-body .collection-cover-game{font-size:12px;line-height:1.6;margin:10px 0 12px;color:var(--muted)}.collection-cover-game strong{font-weight:500;color:var(--accent)}

.home-intro .home-tagline{font-size:18px;margin:0 0 8px}.game-page-heading .launch .launch-explanation{text-align:left;font-size:12px;line-height:1.5;margin:0}
@media(max-width:600px){.game-page-heading .launch .launch-explanation{display:block;margin:0 0 10px}}

.arcade-referral-strip{display:flex;align-items:center;justify-content:center;gap:18px;padding:6px var(--pad);background:#20291b;border-bottom:1px solid #475139;font-size:12px;line-height:1.4;color:var(--muted)}.arcade-referral-strip strong{color:var(--ink);font-weight:500}.arcade-referral-link{display:inline-flex;align-items:center;min-height:32px;flex:none;color:var(--accent);text-decoration:underline;text-underline-offset:3px}.arcade-referral-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);align-items:center;gap:32px;margin:28px 0;padding:30px;border:1px solid #61703d;border-radius:8px;background:radial-gradient(ellipse at top right,#344128 0,transparent 65%),#19221a}.arcade-referral-label{font-size:10px;letter-spacing:1.5px;color:var(--accent);margin-bottom:12px}.arcade-referral-card h2{font-size:clamp(24px,2.5vw,38px);line-height:1.15;letter-spacing:-.04em}.arcade-referral-intro>h2+p{font-size:14px;line-height:1.65;color:var(--muted);margin:14px 0 20px;max-width:48ch}.arcade-referral-card .button{min-height:46px;font-size:13px;padding:12px 18px;gap:8px}.arcade-referral-note{font-size:10px;line-height:1.6;color:var(--muted);margin-top:12px;max-width:52ch}.arcade-referral-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0}.arcade-referral-game{min-width:0}.arcade-referral-cover{position:relative;aspect-ratio:3/4;background:#283124;border:1px solid #ffffff25;border-radius:5px;overflow:hidden}.arcade-referral-cover img{width:100%;height:100%;object-fit:cover;transition:transform .2s}.arcade-referral-cover>span{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;background:var(--accent);color:#141713;width:30px;height:30px;border-radius:50%}.arcade-referral-game:hover img{transform:scale(1.04)}.arcade-referral-game h3{font-size:18px;line-height:1.2;margin:10px 0 5px;letter-spacing:-.03em}.arcade-referral-game>p{font-size:11px;line-height:1.5;color:var(--muted)}.arcade-referral-open{display:inline-block;font-size:11px;color:var(--accent);margin-top:8px;min-height:24px}.arcade-referral-credit{grid-column:1/-1;font-size:9px;color:var(--muted);line-height:1.5;margin-top:2px}
@media(max-width:1000px){.arcade-referral-card{grid-template-columns:1fr;gap:22px}.arcade-referral-intro>h2+p{max-width:65ch}.arcade-referral-picks{max-width:650px;width:100%}}
@media(max-width:600px){.arcade-referral-strip{justify-content:space-between;gap:10px;font-size:11px;padding-block:4px}.arcade-strip-context{display:block;font-size:10px}.arcade-referral-link{min-height:36px}.arcade-referral-card{padding:18px;gap:20px}.arcade-referral-card h2{font-size:27px}.arcade-referral-card .button{width:100%;padding-inline:10px;font-size:12px}.arcade-referral-picks{gap:9px}.arcade-referral-game h3{font-size:14px}.arcade-referral-game>p{font-size:10px}.arcade-referral-cover>span{width:25px;height:25px;right:5px;bottom:5px}.arcade-referral-open{font-size:10px}.arcade-referral-credit{font-size:8px}}
@media(prefers-reduced-motion:reduce){.arcade-referral-cover img{transition:none}}
