/* V30 service views. Original world artwork and the ordered V29 cascade live
   in game.css; new controls inherit the selected world's existing palette. */
.review-header[hidden] { display: none !important; }
.preview-shell { min-height: 100svh; }
.app-viewport.device-desktop {
  width: min(1440px, 100%, max(720px, calc((100svh - 48px) * 1.7777778)));
  height: min(1000px, calc(100svh - 48px), calc((100vw - 48px) * .95));
}

.pp-account-panel, .pp-report-panel, .pp-status-panel {
  color: var(--pp-ink);
  font-weight: 400;
}
.pp-account-panel .pp-action-stack,
.pp-report-panel .pp-action-stack,
.pp-status-panel .pp-action-stack { margin-top: 20px; }
.pp-account-panel p, .pp-report-panel p, .pp-status-panel p {
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.pp-profile-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
  padding: 16px 0;
  border-top: 1px solid var(--pp-line);
  border-bottom: 1px solid var(--pp-line);
  text-align: center;
}
.pp-profile-stats > * { min-width: 0; }
.pp-profile-stats strong { display: block; font-size: 30px; line-height: 1.1; }
.pp-profile-stats span, .pp-profile-stats small {
  display: block;
  margin-top: 5px;
  color: var(--pp-muted);
  font-size: 17px;
  line-height: 1.2;
}
.pp-profile-device-note { margin: 0; }
.pp-profile-storage {
  margin-top: 16px;
  border-top: 1px solid var(--pp-line);
  color: var(--pp-muted);
  font: 400 18px/1.35 var(--mono, 'VT323'), monospace;
}
.pp-profile-storage summary {
  min-height: 44px;
  padding: 11px 0;
  cursor: pointer;
  touch-action: manipulation;
}
.pp-profile-storage p { margin: 0 0 10px; }
.pp-profile-storage summary:focus-visible {
  outline: 1px solid var(--pp-teal);
  outline-offset: 2px;
}
.pp-field { display: grid; gap: 7px; margin: 16px 0; color: var(--pp-ink); }
.pp-field label, label.pp-field { font-size: 20px; line-height: 1.2; }
.pp-field input, .pp-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--pp-edge);
  border-radius: 0;
  background: var(--pp-surface, var(--pp-paper));
  color: var(--pp-ink);
  font: 400 20px/1.25 var(--body, 'VT323'), monospace;
}
.pp-field textarea { min-height: 92px; resize: vertical; }
.pp-field input::placeholder, .pp-field textarea::placeholder { color: var(--pp-muted); opacity: 1; }
.pp-field input:focus-visible, .pp-field textarea:focus-visible {
  outline: 2px solid var(--pp-teal);
  outline-offset: 3px;
}
.pp-service-note {
  display: block;
  margin: 12px 0;
  color: var(--pp-muted);
  font-size: 18px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.pp-service-note:empty { display: none; }
.pp-service-note[role="alert"] { color: var(--pp-ink); }
.pp-loading-status, .pp-inline-service {
  position: absolute;
  left: 50%;
  top: max(12px, env(safe-area-inset-top));
  z-index: 55;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 40px);
  padding: 12px 16px;
  border: 1px solid var(--pp-edge, var(--v11-line, var(--border)));
  background: var(--pp-paper, var(--v11-surface, var(--paper)));
  color: var(--pp-ink, var(--v11-ink, var(--ink)));
  font: 400 20px/1.2 var(--mono, 'VT323'), monospace;
  text-align: center;
  pointer-events: auto;
}
.pp-inline-service {
  position: static;
  width: auto;
  max-width: 750px;
  margin: 0 auto 8px;
  padding: 0;
  transform: none;
  border: 0;
  background: transparent;
  font-size: 18px;
  text-align: left;
}
.pp-inline-service button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-left: 10px;
  padding: 6px;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.inline-error {
  align-items: baseline;
}
.inline-error > b {
  flex: 0 0 auto;
  font: inherit;
}
.inline-error > span {
  min-width: 0;
}
.inline-error button {
  position: relative;
  min-height: 44px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: inherit;
  vertical-align: baseline;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.app-viewport[data-category] .pp-pack-checkout-content .pp-pack-free-return {
  display: block;
  width: max-content;
  max-width: 100%;
  min-height: 44px;
  margin: 16px auto 0;
  padding: 8px 4px;
}
.app-viewport[data-category] .pp-pack-checkout-content .pp-pack-free-return + .pp-pack-free-return {
  margin-top: 4px;
}
.pp-account-panel button, .pp-report-panel button, .pp-status-panel button {
  min-height: 44px;
  touch-action: manipulation;
}
.pp-account-panel > a.pp-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 18px;
  padding: 11px 16px;
  border: 2px solid var(--pp-edge);
  font-size: 22px;
  line-height: 1.1;
  text-decoration: none;
  text-align: center;
}
.pp-account-panel > a.pp-text-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
}
.pp-report-panel form > button {
  display: block;
  width: 100%;
  padding: 11px 16px;
  font: 400 22px/1.1 var(--mono, 'VT323'), monospace;
}

/* Grow only the transparent click region. Visible label spacing stays V29. */
.app-viewport[data-category] .pp-home .pp-pack-choice,
.app-viewport[data-category] .pp-home .pp-howto summary { position: relative; }
.app-viewport[data-category] .pp-home .pp-pack-choice::before,
.app-viewport[data-category] .pp-home .pp-home-actions .pp-howto summary::after {
  content: '';
  display: block;
  position: absolute;
  inset: -5px -4px;
  min-height: 44px;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: auto;
}
.app-viewport .modal-live-timer {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: calc(100% - 32px);
  padding: 0 8px;
  color: var(--pp-ink, var(--v11-ink, var(--ink)));
  background: transparent;
  border: 0;
  box-shadow: none;
  text-shadow: 1px 0 var(--pp-paper, var(--v11-surface, var(--paper))), -1px 0 var(--pp-paper, var(--v11-surface, var(--paper))), 0 1px var(--pp-paper, var(--v11-surface, var(--paper))), 0 -1px var(--pp-paper, var(--v11-surface, var(--paper)));
  font: 400 23px/1.1 var(--mono, 'VT323'), monospace;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 700px) {
  .preview-shell { min-height: 100svh; padding: 0; }
  .app-viewport.device-mobile, .app-viewport.device-desktop {
    width: 100%;
    height: 100svh;
    min-height: 0;
    box-shadow: none;
  }
  .pp-account-panel, .pp-report-panel, .pp-status-panel {
    max-height: calc(100% - 76px);
    padding: 24px 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pp-account-panel *, .pp-report-panel *, .pp-status-panel * { scroll-behavior: auto; }
}

/* A landscape software keyboard can leave only about 220px. Keep the
   question and feedback in separate columns above the persistent input. */
@container (max-height: 280px) and (max-width: 1100px) {
  .app-viewport[data-category].keyboard-open .game-hud {
    top: 7px;
    left: 12px;
    right: auto;
    width: max-content;
    max-width: calc(100% - 132px);
    height: 32px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    color: var(--v11-ink);
    background: var(--v11-surface);
    border: 1px solid var(--v11-line);
  }
  .app-viewport[data-category].keyboard-open .game-hud .hud-stat:not(.score),
  .app-viewport[data-category].keyboard-open .hud-dots { display: none; }
  .app-viewport[data-category].keyboard-open .game-hud .hud-stat.score {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
    height: 32px;
    padding: 0;
    gap: 8px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .app-viewport[data-category].keyboard-open .game-hud .hud-stat.score strong {
    margin: 0;
    font-size: 24px;
    line-height: 1;
  }
  .app-viewport[data-category].keyboard-open .hud-progress {
    position: static;
    transform: none;
    width: auto;
    display: block;
  }
  .app-viewport[data-category].keyboard-open .hud-progress span {
    color: var(--v11-ink);
    font-size: 17px;
    white-space: nowrap;
  }
  .app-viewport[data-category].keyboard-open .game-controls {
    top: 4px;
    right: 8px;
    left: auto;
    width: auto;
    justify-content: flex-end;
    gap: 6px;
  }
  .app-viewport[data-category].keyboard-open .game-controls .icon-button {
    width: 44px;
    height: 44px;
  }
  .app-viewport[data-category].keyboard-open .question-panel {
    top: 52px;
    left: 12px;
    width: calc(100% - 24px);
    min-height: 0;
    max-height: max(24px, calc(100cqh - 130px));
    padding: 7px 10px;
    overflow: auto;
  }
  .app-viewport[data-category].keyboard-open .question-panel h1 {
    font-size: 22px;
    line-height: 1.08;
  }
  .app-viewport[data-category].keyboard-open .question-eyebrow,
  .app-viewport[data-category].keyboard-open .question-panel p,
  .app-viewport[data-category].keyboard-open .ascent-arrow { display: none; }
  .app-viewport[data-category].keyboard-open:is([data-phase=correction],[data-phase=invalid]) .question-panel {
    width: calc(58% - 18px);
  }
  .app-viewport[data-category].keyboard-open .answer-dock {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    min-height: 64px;
    padding: 8px 10px;
  }
  .app-viewport[data-category].keyboard-open .answer-row {
    max-width: none;
    gap: 8px;
  }
  .app-viewport[data-category].keyboard-open .answer-input,
  .app-viewport[data-category].keyboard-open .send-button {
    height: 48px;
    min-height: 48px;
    font-size: 22px;
  }
  .app-viewport[data-category].keyboard-open :is(.answer-correction,.inline-error) {
    position: absolute;
    bottom: calc(100% + 6px);
    left: auto;
    right: 10px;
    width: calc(42% - 18px);
    max-height: max(24px, calc(100cqh - 130px));
    margin: 0;
    padding: 7px 9px;
    border: 1px solid var(--v11-line);
    background: var(--v11-surface);
    color: var(--v11-ink);
    overflow: auto;
    overscroll-behavior: contain;
  }
  .app-viewport[data-category].keyboard-open .inline-error { font-size: 16px; line-height: 1.2; }
  .app-viewport[data-category].keyboard-open .answer-correction p { font-size: 16px; }
}

/* In portrait keyboard views keep a stacked question, feedback, input order.
   Reserve 80px header + 75px dock + 75px feedback + 14px separation. */
@container (min-height: 280px) and (max-width: 700px) {
  .app-viewport[data-category].keyboard-open:is([data-phase=correction],[data-phase=invalid]) .question-panel {
    top: 80px;
    left: 52px;
    width: calc(100% - 104px);
    min-height: 0;
    max-height: max(24px, calc(100cqh - 244px));
    padding: 4px 10px;
    overflow: auto;
  }
  .app-viewport[data-category].keyboard-open :is(.answer-correction,.inline-error) {
    position: absolute;
    bottom: calc(100% + 6px);
    left: var(--v11-dock-padding);
    right: var(--v11-dock-padding);
    width: auto;
    max-height: 75px;
    margin: 0;
    padding: 7px 9px;
    border: 1px solid var(--v11-line);
    background: var(--v11-surface);
    overflow: auto;
    overscroll-behavior: contain;
    z-index: 5;
  }
  .app-viewport[data-category].keyboard-open .inline-error {
    font-size: 16px;
    line-height: 1.2;
  }
}
@container (min-height: 280px) and (max-height: 360px) and (max-width: 700px) {
  .app-viewport[data-category].keyboard-open:is([data-phase=correction],[data-phase=invalid]) .question-panel h1 {
    font-size: 20px;
    line-height: 1.1;
  }
  .app-viewport[data-category].keyboard-open:is([data-phase=correction],[data-phase=invalid]) .question-panel .question-eyebrow {
    display: none;
  }
}