/* ParentProof Play lives inside one selected child's controls. The default
   state stays compact; forms expand only after an explicit parent action. */

#playProfilePanel.play-card {
  min-width: 0;
  margin-top: 16px;
  padding: 18px;
  overflow: hidden;
}

.play-head,
.play-heading,
.play-actions,
.play-summary,
.play-summary-main,
.play-form-actions {
  display: flex;
  align-items: center;
}

.play-head {
  justify-content: space-between;
  gap: 12px;
}

.play-heading {
  min-width: 0;
  gap: 11px;
}

.play-mark {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--glow) 45%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--glow) 10%, var(--dusk2));
  color: var(--glow);
}

.play-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.play-title {
  margin: 0;
  color: var(--cloud);
  font-size: 16px;
  line-height: 1.2;
}

.play-status {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--dusk2);
  color: var(--haze);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.play-status[data-state="linked"] {
  border-color: color-mix(in srgb, var(--mint) 52%, var(--line));
  background: color-mix(in srgb, var(--mint) 11%, var(--dusk2));
  color: var(--done-text);
}

:root[data-theme="light"] .play-status[data-state="linked"] { color: #0A6242; }

.play-compact-copy {
  margin: 11px 0 0;
  color: var(--haze);
  font-size: 12px;
  line-height: 1.45;
}

/* The blocker under the compact sentence: the identifiers an OWNER acts on,
   deliberately quieter than the line a parent reads first. */
.play-compact-why {
  margin: 5px 0 0;
  color: var(--haze);
  font-size: 11px;
  line-height: 1.4;
  opacity: .8;
  overflow-wrap: anywhere;
}

.play-actions,
.play-form-actions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.play-actions > button,
.play-form-actions > button {
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
}

.play-actions > .primary,
.play-form-actions > .primary {
  width: auto;
  padding: 11px 16px;
  font-size: 14px;
}

.play-summary {
  min-width: 0;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.play-summary-main {
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
}

.play-name {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--cloud);
  font-size: 16px;
}

.play-age,
.play-created {
  color: var(--haze);
  font-size: 12px;
}

.play-form,
.play-confirm,
.play-error {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.play-form-title,
.play-confirm-title {
  margin: 0 0 12px;
  color: var(--cloud);
  font-size: 14px;
}

.play-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(150px, .65fr);
  gap: 12px;
}

.play-field { min-width: 0; }
.play-field .inp { margin: 0; }
.play-field + .play-field-full { margin-top: 12px; }

.play-form-help,
.play-confirm-copy,
.play-error {
  color: var(--haze);
  font-size: 12px;
  line-height: 1.45;
}

.play-form-help { margin: 8px 0 0; }
.play-confirm-copy { margin: 0; }
.play-error { color: var(--coral); }
:root[data-theme="light"] .play-error { color: #B23127; }

.play-live {
  min-height: 0;
  margin: 9px 0 0;
  color: var(--haze);
  font-size: 12px;
}
.play-live:empty { display: none; }

/* The points shelf. Read-only by construction — there is no control in here,
   so nothing needs a 44px target and nothing may look tappable. */
.play-points {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.play-points-title {
  margin: 0;
  color: var(--cloud);
  font-size: 14px;
}

.play-points-balance {
  margin: 9px 0 0;
  color: var(--cloud);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.play-points-list {
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.play-points-row {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.play-points-game {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--cloud);
  font-size: 13px;
}

.play-points-amount {
  flex: 0 0 auto;
  color: var(--haze);
  font-size: 13px;
  font-weight: 700;
}

.play-points-note {
  margin: 9px 0 0;
  color: var(--haze);
  font-size: 12px;
  line-height: 1.45;
}

/* The one sentence a parent must not skim past: points never move a rule.
   Muted, but not so muted it reads as boilerplate. */
.play-points-guard {
  margin-top: 7px;
  color: color-mix(in srgb, var(--haze) 82%, var(--cloud));
}

/* CONNECTED GAMES — PARENTPROOF-PLAY §8/§10.3/§10.4. Same shelf shape as the
   points section above it (a border-topped block under the linked summary),
   because it answers the same kind of question: what does this identity have
   attached to it right now. */
.play-oidc {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.play-oidc-title {
  margin: 0;
  color: var(--cloud);
  font-size: 14px;
}
.play-oidc-note {
  margin: 9px 0 0;
  color: var(--haze);
  font-size: 12px;
  line-height: 1.45;
}
.play-oidc-guard {
  margin-top: 7px;
  color: color-mix(in srgb, var(--haze) 82%, var(--cloud));
}
.play-oidc-list {
  display: grid;
  gap: 8px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}
.play-oidc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--dusk2);
}
.play-oidc-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
.play-oidc-scopes {
  color: var(--haze);
  font-size: 12px;
}
.play-oidc-row > .play-oidc-revoke { flex: none; min-height: 44px; }
.play-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 13px;
  color: var(--cloud);
}

/* THE CHOOSER — one row per Play profile this household already owns and no
   child holds. A list, not a select: the row carries a name AND the age band
   that decides what a game may offer that identity, and a parent choosing
   between two siblings' old profiles needs both visible at once.

   Single column from 375px up (see the query below), because the row's own
   button must keep a 44px target and a name is allowed to be long. */
.play-linkable {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.play-linkable-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--dusk2);
}
.play-linkable-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
/* width: auto overrides .primary's own width: 100% (app.css) -- without it
   flex: none's flex-basis resolves to that 100%, leaving .play-linkable-main
   (min-width: 0, right above) almost no room and wrapping the name one
   character per line. Same fix .engage-tool .primary already uses. */
.play-linkable-row > .play-linkable-pick { flex: none; width: auto; min-height: 44px; }
/* The external blocker's sentence. Separated from the chooser above it so it
   reads as a statement about a different path, not as a caption on the list. */
.play-link-blocked {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

@media (max-width: 420px) {
  #playProfilePanel.play-card { padding: 15px; border-radius: 16px; }
  .play-head { align-items: flex-start; }
  .play-mark { flex-basis: 38px; width: 38px; height: 38px; }
  .play-fields { grid-template-columns: minmax(0, 1fr); }
  .play-summary { align-items: flex-start; flex-direction: column; }
  .play-summary > .play-actions { width: 100%; }
  .play-actions,
  .play-form-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .play-actions > button,
  .play-form-actions > button,
  .play-actions > .primary,
  .play-form-actions > .primary { width: 100%; }
  /* 375x667: name over button rather than side by side, so a long display
     name never squeezes the link button under its 44px target. */
  .play-linkable-row { align-items: stretch; flex-direction: column; }
  .play-linkable-row > .play-linkable-pick { width: 100%; }
  .play-oidc-row { align-items: stretch; flex-direction: column; }
  .play-oidc-row > .play-oidc-revoke { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #playProfilePanel * { scroll-behavior: auto; }
}