/* Games hub (T11a), skin D from docs/play-shell/review/skins.html. Uses the website tokens.
   Placeholders: the settings glyphs, the "coming soon" silhouette and the sky band composition
   are not approved art. Lucy and the butterfly are the approved website files, unchanged. */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.play-hub{max-width:1100px;margin:0 auto;padding:12px 16px 40px}
@media(min-width:48rem){.play-hub{padding:14px 32px 48px}}
.play-ic{width:20px;height:20px;flex:none}
.play-hub__bar{display:flex;justify-content:flex-end;padding-bottom:12px}
.play-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;background:var(--lucy-cream);color:var(--lucy-charcoal);border:2px solid var(--lucy-charcoal);border-radius:3px;box-shadow:3px 3px 0 var(--lucy-sky);font:600 15px/1 var(--lucy-reading);text-decoration:none;transform:rotate(-2deg);cursor:pointer;touch-action:manipulation;transition:transform 150ms,box-shadow 150ms}
.play-chip:hover{transform:none;box-shadow:4px 4px 0 var(--lucy-sky)}
.play-chip:focus-visible,.play-cta:focus-visible,.play-dialog button:focus-visible,.play-dialog a:focus-visible{outline:3px solid var(--lucy-charcoal);outline-offset:3px;box-shadow:0 0 0 6px var(--lucy-cream)}

.play-sky{position:relative;display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:24px;align-items:center;background:var(--lucy-sky);border-radius:6px;padding:20px 28px;overflow:hidden}
.play-sky__scene{position:relative;align-self:stretch;min-height:200px}
.play-sky__lucy{position:absolute;left:0;bottom:-6px;height:96%;max-height:260px;width:auto;aspect-ratio:1;image-rendering:pixelated}
.play-sky__butterfly{position:absolute;left:52%;top:2%;height:32%;width:auto;aspect-ratio:1;image-rendering:pixelated}
.play-sky__copy{min-width:0}
.play-sky__copy .eyebrow{margin:0 0 10px}
.play-sky h1{font:700 clamp(1.75rem,4.4vw,3rem)/1.1 var(--lucy-display);letter-spacing:-.04em}
.play-sky h1 span{background:var(--lucy-butter);box-shadow:8px 0 var(--lucy-butter),-5px 0 var(--lucy-butter);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.play-sky__lede{margin:14px 0 18px;font:500 1.0625rem/1.4 var(--lucy-reading)}
.play-cta{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 22px;background:var(--lucy-pink);color:var(--lucy-charcoal);border:2px solid var(--lucy-charcoal);border-radius:4px;box-shadow:2px 2px 0 var(--lucy-charcoal);font:700 1.0625rem/1 var(--lucy-reading);text-decoration:none;touch-action:manipulation;transition:background 150ms,box-shadow 150ms}
/* 12 Oct 2026, owner decision: only the Play button is the link. The band is not clickable. */
.play-cta:hover{background:var(--lucy-butter);box-shadow:1px 1px 0 var(--lucy-charcoal)}
.play-cta:active{box-shadow:none}
.play-cta:focus-visible{outline-offset:3px}

.play-soon{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;margin:12px 0 0;padding:0}
.play-tile{position:relative;min-height:96px;border-radius:6px;padding:10px 12px;overflow:hidden;color:var(--lucy-charcoal)}
.play-tile--butter{background:var(--lucy-butter)}
.play-tile--leaf{background:var(--lucy-leaf)}
.play-tag{display:inline-block;background:var(--lucy-cream);padding:1px 8px;border-radius:2px;font:700 .75rem/1.4 var(--lucy-reading);letter-spacing:.08em;text-transform:uppercase}
/* Placeholder silhouette, shared with the world map "coming soon" art requirement. No name. */
.play-tile__shape{position:absolute;right:0;bottom:0;width:46%;height:58%;background:var(--lucy-charcoal);opacity:.9;clip-path:polygon(0 100%,0 62%,22% 34%,40% 56%,60% 20%,80% 52%,100% 36%,100% 100%)}

.play-nojs{margin:16px 0 0;font-size:.9375rem}

.play-dialog{width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:14px 16px;background:var(--lucy-cream);color:var(--lucy-charcoal);border:2px solid var(--lucy-charcoal);border-radius:16px;box-shadow:4px 4px 0 var(--lucy-charcoal);overflow:auto}
.play-dialog::backdrop{background:rgba(38,37,35,.55)}
.play-dialog__head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.play-dialog h2{font:700 1.25rem/1.2 var(--lucy-display);letter-spacing:-.03em;margin:0}
.play-dialog__close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:var(--lucy-cream);color:var(--lucy-charcoal);border:2px solid var(--lucy-charcoal);border-radius:4px;cursor:pointer}
.play-dialog__rows{list-style:none;margin:6px 0 0;padding:0}
.play-dialog__rows li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:6px 0;border-top:1px solid #cfc7b8;font-size:.9375rem;line-height:1.4}
.play-row-link{display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:44px;padding:8px 14px;background:var(--lucy-cream);color:var(--lucy-charcoal);border:2px solid var(--lucy-charcoal);border-radius:4px;font:600 15px/1 var(--lucy-reading);text-decoration:none}
.play-row-link:hover{background:var(--lucy-leaf)}

@media(max-width:47.99rem){
  .play-sky{grid-template-columns:1fr;gap:8px;padding:16px}
  .play-sky__scene{min-height:120px;height:120px}
  .play-sky__lucy{height:120px;max-height:none;bottom:-4px}
  .play-sky__butterfly{left:calc(120px * .9);top:0;height:40px}
}
/* Short landscape (844 x 390): keep the band compact so Play and the tiles stay in view. */
@media(max-height:520px) and (orientation:landscape){
  .play-hub{padding-top:6px;padding-bottom:20px}
  /* The shared site header already takes about 150 px here, so the Settings chip sits over the
     band's top right corner instead of in its own row, which keeps Play inside the viewport. */
  .play-hub__bar{position:relative;z-index:2;height:0;padding:0}
  .play-chip{position:absolute;right:10px;top:10px}
  .play-sky h1{max-width:calc(100% - 140px)}
  .play-sky{grid-template-columns:minmax(0,30%) minmax(0,1fr);padding:12px 24px}
  .play-sky__scene{min-height:130px;height:auto}
  .play-sky__lucy{height:130px;max-height:none}
  .play-sky__butterfly{left:calc(130px * .85);top:0;height:44px}
  .play-sky__lede{margin:8px 0 12px}
  .play-tile{min-height:64px}
}
@media(prefers-reduced-motion:reduce){.play-chip,.play-cta{transition:none}.play-chip{transform:none}}

/* 11 Oct 2026, owner decision: the sky band runs edge to edge, as on the other pages. The hub itself
   is full width; the Settings row, the tiles and the band's content keep the shared 1100px column. */
.play-hub{width:100%;max-width:none;padding-left:0;padding-right:0}
.play-hub__bar,.play-soon,.play-nojs{width:min(1100px,calc(100% - 2 * var(--page-gutter)));margin-left:auto;margin-right:auto}
.play-sky{border-radius:0;padding-left:max(var(--page-gutter),calc((100% - 1100px) / 2));padding-right:max(var(--page-gutter),calc((100% - 1100px) / 2))}

/* 12 Oct 2026, owner request: the Settings chip sits on the sky band's top right corner at every
   size (as it already did in short landscape), so the band starts right under the header exactly as
   on Home and there is no cream row above it. */
.play-hub{padding-top:0}
.play-hub__bar{position:relative;z-index:2;height:0;padding:0}
.play-chip{position:absolute;right:0;top:12px}
/* Side by side layout: the copy starts just below the chip in the band's top right corner, so the
   heading keeps its full width and stays on one line on wide screens. */
@media(min-width:48rem){.play-sky__copy{padding-top:18px}}