/* v056 candidate: presentation only for the two PLAY chooser menus. */
.pp-mode-dialog {
  width:min(440px,calc(100vw - 32px)); padding:30px 24px 24px;
  border:2px solid color-mix(in srgb,var(--ink) 19%,transparent); border-radius:28px;
  background:radial-gradient(ellipse at 15% 0%,color-mix(in srgb,var(--pop) 13%,transparent),transparent 65%),linear-gradient(155deg,var(--bg1),var(--bg0) 85%);
  box-shadow:inset 0 1px 0 #ffffff16,0 26px 80px #0008;
}
.pp-mode-dialog .pp-mode-wordmark { font-size:15px; margin:0 38px 23px; letter-spacing:-.035em; }
.pp-mode-dialog h2 { max-width:16ch; margin:0 auto 10px; font-size:clamp(26px,6.8vw,30px); line-height:1.12; letter-spacing:-.035em; }
.pp-mode-dialog p { max-width:30ch; margin:0 auto 24px; font-size:14px; line-height:1.5; }
.pp-mode-dialog .pp-mode-close {
  top:12px; right:12px; width:44px; height:44px; min-width:44px; min-height:44px;
  border:1px solid #ffffff12; background:#ffffff07; font-size:18px;
}
.pp-mode-dialog .pp-mode-close:hover { background:#ffffff12; }
.pp-mode-dialog .pp-mode-options { display:grid; grid-auto-rows:1fr; gap:12px; }
.pp-mode-dialog .pp-mode-options .btn.mode-choice {
  display:grid; grid-template-columns:42px minmax(0,1fr) 12px; align-items:center; justify-content:start;
  width:100%; max-width:none; height:100%; min-height:88px; margin:0; padding:16px 15px; gap:13px;
  border-radius:18px; text-align:left; text-transform:none; letter-spacing:0; line-height:1.25;
}
.pp-mode-dialog .mode-choice::after {
  content:''; width:7px; height:7px; border-top:2px solid currentColor; border-right:2px solid currentColor;
  transform:rotate(45deg); justify-self:center; opacity:.5;
}
.pp-mode-dialog .pp-mode-options .mode-glyph {
  box-sizing:border-box; width:42px; height:42px; padding:9px; border-radius:13px;
  fill:none; stroke:currentColor; stroke-width:1.8; background:#0000000a; border:1px solid #0000000a;
}
.pp-mode-dialog .pp-mode-options .btn .choice-copy {
  display:block; min-width:0; min-height:0; max-width:none; margin:0;
  font:850 17px/1.2 var(--font); letter-spacing:-.015em; opacity:1; text-transform:none;
}
.pp-mode-dialog .pp-mode-options .choice-copy small {
  display:block; width:100%; max-width:none; text-align:left; margin:6px 0 0; font:600 12px/1.35 var(--font); letter-spacing:0; text-transform:none; opacity:.8;
}
.pp-mode-dialog .choice-copy small::before { content:none; }
/* v065: use the regular game primary/secondary fills, lips and pressed states. */
.pp-mode-dialog .btn-secondary .mode-glyph { background:#ffffff09; border-color:#ffffff10; }
.pp-mode-dialog .pp-mode-back { min-height:44px; margin:18px auto 0; padding:10px 16px; font-size:13px; font-weight:650; border:1px solid #ffffff10; background:#ffffff04; border-radius:12px; }
.pp-mode-dialog .pp-mode-back:hover { background:#ffffff0c; }
.pp-mode-dialog .mode-choice:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
@media(max-width:355px) {
  .pp-mode-dialog { padding:26px 18px 20px; border-radius:24px; }
  .pp-mode-dialog .pp-mode-wordmark { margin-bottom:20px; font-size:14px; }
  .pp-mode-dialog .pp-mode-options .btn.mode-choice { grid-template-columns:36px minmax(0,1fr) 8px; gap:10px; padding:14px 11px; }
  .pp-mode-dialog .pp-mode-options .mode-glyph { width:36px; height:36px; padding:7px; border-radius:11px; }
  .pp-mode-dialog .pp-mode-options .btn .choice-copy { font-size:16px; }
}
@media(max-height:520px) {
  .pp-mode-dialog { padding:18px 24px 16px; }
  .pp-mode-dialog .pp-mode-wordmark { margin-bottom:12px; font-size:14px; }
  .pp-mode-dialog h2 { font-size:25px; max-width:none; margin-bottom:6px; }
  .pp-mode-dialog p { margin-bottom:16px; font-size:13px; }
  .pp-mode-dialog .pp-mode-options { gap:10px; }
  .pp-mode-dialog .pp-mode-options .btn.mode-choice { min-height:68px; padding-block:10px; }
  .pp-mode-dialog .pp-mode-back { margin-top:12px; }
}

/* v057: compact choices sized to their icon and label, without subtitles. */
.pp-mode-dialog .pp-mode-options { justify-items:center; grid-auto-rows:auto; gap:12px; }
.pp-mode-dialog .pp-mode-options .btn.mode-choice {
  display:inline-flex; flex-direction:row; justify-content:center; align-items:center;
  width:fit-content; max-width:100%; height:auto; min-height:48px;
  padding:11px 18px; gap:10px; border-radius:14px;
}
.pp-mode-dialog .mode-choice::after { content:none; }
.pp-mode-dialog .pp-mode-options .mode-glyph {
  flex:0 0 24px; width:24px; height:24px; padding:1px;
  border:0; border-radius:0; background:none;
}
.pp-mode-dialog .pp-mode-options .btn .choice-copy {
  flex:0 1 auto; width:auto; min-width:0; font-size:16px; line-height:1.25;
}
@media(max-width:355px) {
  .pp-mode-dialog .pp-mode-options .btn.mode-choice { padding-inline:14px; gap:9px; }
  .pp-mode-dialog .pp-mode-options .btn .choice-copy { font-size:15px; }
}

/* v058: one compact size for all four choices across both menu steps. */
.pp-mode-dialog .pp-mode-options .btn.mode-choice {
  box-sizing:border-box; width:248px; max-width:100%; height:50px; min-height:50px;
  padding:10px 12px; border-radius:14px;
}
@media(max-width:355px) {
  .pp-mode-dialog .pp-mode-options .btn.mode-choice { width:224px; padding-inline:10px; }
}

/* v059 preview: fixed icon and label columns align both choices in each menu. */
.pp-mode-dialog .pp-mode-options .btn.mode-choice {
  display:grid; grid-template-columns:24px minmax(0,1fr); justify-content:normal;
  column-gap:10px; text-align:left;
}
.pp-mode-dialog .pp-mode-options .mode-glyph { justify-self:center; }
.pp-mode-dialog .pp-mode-options .btn .choice-copy { justify-self:start; text-align:left; }

/* v060 preview: labels center on the full button; icons retain a fixed column. */
.pp-mode-dialog .pp-mode-options .btn.mode-choice {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr);
  padding:4px 38px; column-gap:0; text-align:center;
}
.pp-mode-dialog .pp-mode-options .mode-glyph {
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:24px; height:24px;
}
.pp-mode-dialog .pp-mode-options .btn .choice-copy {
  justify-self:stretch; width:100%; text-align:center; text-wrap:balance;
}

/* v061 preview: use the reserved side space efficiently without reducing type. */
.pp-mode-dialog .pp-mode-options .btn.mode-choice { padding-inline:30px; }
.pp-mode-dialog .pp-mode-options .mode-glyph { left:5px; width:22px; height:22px; }
.pp-mode-dialog .pp-mode-options .btn .choice-copy { white-space:nowrap; text-wrap:nowrap; }

/* v062 preview: a subtle, shared inset adjustment for the device glyphs. */
.pp-mode-dialog .pp-mode-options .mode-glyph { left:7px; }

/* v066: shift the existing icon/label arrangement together for optical balance. */
.pp-mode-dialog .pp-mode-options .mode-glyph { left:10px; }
.pp-mode-dialog .pp-mode-options .btn .choice-copy { position:relative; left:3px; }

/* v068: no chooser wordmark; keep a clear row for the unchanged close control. */
.pp-mode-dialog { padding-top:60px; }

/* v070: a smaller visible close control inside the unchanged 44px hit target. */
.pp-mode-dialog { padding-top:50px; }
.pp-mode-dialog .pp-mode-close {
  top:4px; right:8px; border:0; font-size:14px;
  background:radial-gradient(circle at center,#ffffff07 0 15px,#ffffff12 15px 16px,transparent 16px);
}
.pp-mode-dialog .pp-mode-close:hover {
  background:radial-gradient(circle at center,#ffffff12 0 15px,#ffffff20 15px 16px,transparent 16px);
}