/* PicoChest Play Hub v2 (Human-approved design, 2026-10-18). Loaded only by /ja/play/ and /en/play/, after styles.css
   and home.css (shared header nav, cream page, tokens, badge); everything here is in the ph- namespace. A small Game Room
   header (Visual Header A), then the game cards (2 x 2 wide cards on desktop, rows on phones), then a compact tools link. */
.hm-header-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--hm-coral); border-radius: .5rem .5rem 0 0; }

/* ---------- Visual Header A: copy, then the room art (phones, tablets) or beside it (desktop) ---------- */
.ph-hero { display: grid; gap: .8rem; }
.ph-hero h1 { margin: 0; font-size: clamp(1.55rem, 5.6vw, 2.3rem); line-height: 1.25; letter-spacing: -.02em; color: #3a2a1f; }
.ph-lede { margin: .45rem 0 0; color: #5a4636; font-size: clamp(.95rem, 2.1vw, 1.06rem); line-height: 1.6; }
.ph-note { margin: .45rem 0 0; color: #6e5d4f; font-size: .8rem; line-height: 1.5; }
/* the art box is reserved before any picture loads: 12:5 everywhere, 3:1 on tablets */
.ph-hero-art { position: relative; overflow: hidden; aspect-ratio: 12 / 5; border-radius: 1rem; background: linear-gradient(180deg, #f7e9d6 0 62%, #ecd2ae 62% 100%); }
.ph-hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 46rem) and (max-width: 61.99rem) { .ph-hero-art { aspect-ratio: 3 / 1; } }
/* desktop: one ~17rem panel, copy on a warm wash at the left, the room in the right 60% fading into the wash over its left 20% */
@media (min-width: 62rem) {
  .ph-hero { grid-template-columns: 40% 60%; gap: 0; height: 17rem; border: 1px solid #f0e3d0; border-radius: 1.5rem; overflow: hidden; background: linear-gradient(180deg, #fbefe0, #fdf6ec); }
  .ph-hero-copy { align-self: center; padding: 0 1rem 0 clamp(1.5rem, 3.5vw, 2.75rem); }
  .ph-hero-art { aspect-ratio: auto; height: 100%; border-radius: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%); mask-image: linear-gradient(90deg, transparent 0, #000 20%); }
  /* Game Room A: at 992-1119 px the box is narrower than 12:5, so crop both sides evenly; with the 20% fade Shiro's face
     stays fully opaque and the clock stays whole at every desktop width */
  .ph-hero-art img { object-position: 50% 50%; }
}

/* ---------- game cards (Game Card v2): rows on phones, wide cards on tablets, 2 x 2 wide cards on desktop ---------- */
.ph-games { margin-top: clamp(1.25rem, 3.5vw, 2rem); }
/* the newest game: one wide card above the four (swapped when a new game launches) */
.ph-feature { margin-bottom: .7rem; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: .9rem; padding: .6rem; border: 2px solid var(--hm-gold); border-radius: 1rem; background: #fffaf0; color: var(--ink); text-decoration: none; box-shadow: var(--hm-shadow); }
.ph-feature:hover { border-color: var(--hm-coral); }
.ph-feature:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ph-feature-art { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: .75rem; background: var(--hm-peach); }
.ph-feature-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-feature-body { min-width: 0; display: grid; gap: .2rem; align-content: center; }
.ph-feature-kicker { color: #9a6510; font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
@media (min-width: 46rem) {
  .ph-feature { margin-bottom: 1rem; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.25rem; padding: .75rem 1.25rem .75rem .75rem; }
  .ph-feature .ph-card-foot { flex-direction: row; align-items: center; }
  .ph-feature .ph-card-cta { padding: .3rem 1rem; border-radius: 999px; background: var(--hm-coral); color: #fff; }
}
.ph-game-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.ph-card { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: .9rem; height: 100%; padding: .6rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--hm-shadow); }
.ph-card:hover { border-color: var(--hm-coral); }
.ph-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* the visual slot: today an icon or the Spot picture; later the 4:3 Character mini illustration (cover, centred) */
.ph-card-art { position: relative; width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; border-radius: .75rem; }
/* a picture fills the slot without setting the card's height (the text does) */
.ph-card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-card-art svg { width: 42%; height: 42%; }
.ph-art-spot { background: var(--hm-peach); color: #6b4a2e; }
.ph-art-logic { background: #e7eef9; color: #2c3e66; }
.ph-art-sort { background: #f6ead9; color: var(--hm-wood); }
.ph-art-merge { background: #fdecc8; color: #8a5a30; }
.ph-art-memory { background: #f8e8d2; color: #8a5a30; }
.ph-art-ten { background: #fff1c9; color: #8a5a10; }
.ph-card-body { min-width: 0; display: grid; gap: .2rem; align-content: center; }
.ph-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: 1.06rem; font-weight: 800; line-height: 1.35; }
.ph-badge-daily { display: inline-block; padding: 0 .4rem; border: 1.5px solid #2c3e66; border-radius: 999px; background: #fff; color: #2c3e66; font-size: .66rem; font-weight: 800; letter-spacing: .05em; line-height: 1.5; }
.ph-card-text { color: var(--muted); font-size: .9rem; line-height: 1.5; }
/* status (facts of the game) and the Play cue; a future progress line ("cleared today", streak) goes between them */
.ph-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem .75rem; }
.ph-card-status { color: #6b5a48; font-size: .8rem; font-weight: 650; }
.ph-card-cta { color: var(--hm-coral); font-weight: 800; }
@media (min-width: 46rem) {
  .ph-game-list { gap: 1rem; }
  .ph-card { grid-template-columns: 13rem minmax(0, 1fr); align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
  .ph-card-art { aspect-ratio: auto; height: 100%; min-height: 10rem; border-radius: 0; }
  .ph-card-body { align-content: start; gap: .35rem; padding: 1rem 1.15rem 1.1rem; }
  .ph-card-foot { flex-direction: column; align-items: flex-start; gap: .55rem; }
  .ph-card-cta { padding: .3rem 1rem; border-radius: 999px; background: var(--hm-coral); color: #fff; }
}
@media (min-width: 62rem) {
  .ph-game-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-card { grid-template-columns: 44% minmax(0, 1fr); min-height: 12rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .ph-card { transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
  .ph-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(16, 35, 63, .1); }
}

/* ---------- tools: a compact link card after the games (a future "Play at home" section goes between them) ---------- */
.ph-tools { margin-top: clamp(1.5rem, 4vw, 2.25rem); display: grid; gap: .6rem 1.25rem; align-items: center; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.ph-tools h2 { margin: 0; font-size: 1.12rem; color: #3a2a1f; }
.ph-tools p { margin: .15rem 0 0; color: var(--muted); font-size: .92rem; }
.ph-tools-cta { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 1.15rem; border: 2px solid var(--accent-dark); border-radius: 999px; color: var(--accent-dark); font-weight: 750; text-decoration: none; white-space: nowrap; }
.ph-tools-cta:hover { background: var(--soft); }
.ph-tools-cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (min-width: 46rem) { .ph-tools { grid-template-columns: minmax(0, 1fr) auto; } }
/* Today's pick (Improvement 06): one published game a day, right under the hero, kept compact so the list moves as
   little as possible. The fallback line and the card share one height per screen width, so drawing the card does not
   move the list below it; no motion, and the heading says what it is. */
.ph-today { margin-top: clamp(.9rem, 3vw, 1.25rem); }
.ph-today-heading { margin: 0 0 .4rem; color: #3a2a1f; font-size: 1rem; font-weight: 800; line-height: 1.35; }
.ph-today-fallback, .ph-today-card { min-height: 8.25rem; border-radius: 1rem; }
.ph-today-fallback { margin: 0; display: grid; align-items: center; padding: .6rem 1rem; border: 2px dashed var(--line); color: var(--muted); font-size: .95rem; line-height: 1.5; }
.ph-today-card { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: .8rem; padding: .5rem .6rem; border: 2px solid var(--hm-coral); background: var(--surface); color: var(--ink); text-decoration: none; }
.ph-today-card[hidden], .ph-today-fallback[hidden] { display: none; }
.ph-today-card:hover { border-color: var(--hm-coral-dark); }
.ph-today-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ph-today-art { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: .75rem; background: var(--hm-peach); }
.ph-today-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-today-body { min-width: 0; display: grid; gap: .1rem; align-content: center; }
.ph-today-line { color: #9a3a2f; font-size: .8rem; font-weight: 800; line-height: 1.35; }
.ph-today-card .ph-card-title { font-size: 1rem; }
.ph-today-card .ph-card-text { font-size: .85rem; line-height: 1.45; }
.ph-today-body .ph-card-cta { justify-self: start; font-size: .9rem; }
@media (max-width: 23.99rem) { .ph-today-fallback, .ph-today-card { min-height: 10.4rem; } }
@media (min-width: 46rem) {
  .ph-today-fallback, .ph-today-card { min-height: 10rem; }
  .ph-today-card { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.1rem; padding: .6rem 1.25rem .6rem .6rem; }
  .ph-today-body { gap: .25rem; }
  .ph-today-body .ph-card-cta { padding: .25rem 1rem; border-radius: 999px; background: var(--hm-coral); color: #fff; }
}