/* 30.8.10: shared presentation, with the authored scenes and native geometry
 * kept intact. Load after the historical stylesheet layers. */
.app-viewport[data-category] {
  --ui-space: 12px;
  --ui-control: 48px;
  --ui-duration: 160ms;
  --answer-card-surface: var(--v11-surface);
  --answer-card-ink: var(--v11-ink);
  --answer-card-muted: var(--v11-muted);
  --answer-card-line: var(--v11-line);
  --answer-card-accent: var(--v11-accent-text,var(--v11-accent));
}
.app-viewport[data-category=general] {
  --answer-card-surface: #176B82;
  --answer-card-ink: #FFF6E4;
  --answer-card-muted: #FFF6E4;
  --answer-card-line: #176B82;
  --answer-card-accent: #FFF6E4;
}
.app-viewport[data-category] :is(button,input,select,textarea) { font-synthesis: none; }
.app-viewport[data-category] :is(button,a,input,select,textarea,summary):focus-visible {
  outline: 2px solid var(--v11-accent-text,var(--v11-accent));
  outline-offset: 3px;
}
.app-viewport[data-category] :is(.pp-button,.primary-button,.send-button) {
  letter-spacing: .025em;
  transition: background-color var(--ui-duration) ease, border-color var(--ui-duration) ease, color var(--ui-duration) ease, box-shadow var(--ui-duration) ease;
}
.app-viewport[data-category] .pp-home .pp-home-tools {
  gap: 12px;
}
.app-viewport[data-category] .pp-home .pp-home-tools .pp-icon-button {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  padding: 10px; border-width: 1px;
}
.app-viewport[data-category] .pp-home .pp-home-tools .pp-icon { width: 22px; height: 24px; }
.app-viewport[data-category] .pp-home .pp-home-actions {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
}
.app-viewport[data-category] .pp-home .pp-home-actions .pp-start {
  min-height: 58px; margin: 0; padding: 13px 18px;
  font-size: 28px; line-height: 1.05; letter-spacing: .025em;
  box-shadow: 3px 3px 0 var(--v11-shadow);
}
.app-viewport[data-category] .pp-home .pp-home-actions .pp-start > .pp-icon {
  width: 24px; height: 26px; margin-right: 2px;
}
.app-viewport[data-category] .pp-home .pp-home-actions .pp-howto { margin: 0; }
.app-viewport[data-category] .pp-home .pp-home-actions .pp-howto summary {
  min-height: 36px; display: flex; align-items: center; justify-content: center;
  gap: 7px; font-size: 19px; letter-spacing: 0;
}
.app-viewport[data-category] .pp-home .pp-home-actions .pp-home-footer {
  display: flex; flex-direction: column; gap: 8px; margin: 0;
}
.app-viewport[data-category] .pp-home .pp-home-actions .pp-home-meta { margin: 0; }
.app-viewport[data-category] .pp-home .pp-home-actions .pp-home-meta > span {
  font-size: 17px; line-height: 1.25; letter-spacing: .015em;
}
.app-viewport[data-category] .pp-home .pp-home-actions .pp-home-links {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; margin: 0;
}
.app-viewport[data-category] .pp-home .pp-home-actions .pp-home-links .pp-link-button {
  flex: 0 1 auto; width: auto; min-height: 40px; padding: 8px 1px;
  font-size: 18px; line-height: 1.1; letter-spacing: .025em;
  border: 0; border-bottom: 1px solid currentColor; background: transparent;
  box-shadow: none; text-shadow: var(--v29-home-text-shadow);
}
.app-viewport[data-category] .pp-home .pp-home-actions .pp-home-links .pp-link-button:is(:hover,:focus-visible,:active) {
  background: transparent; border-color: currentColor; box-shadow: none;
  text-decoration: underline; text-underline-offset: 4px;
}
.app-viewport[data-category] .pp-home .pp-home-actions .pp-pack-choice {
  min-height: 36px; margin: 0; font-size: 19px; letter-spacing: .02em;
}
.app-viewport[data-category] .pp-home .pp-home-actions .pp-pack-home-status {
  margin: 0; font-size: 17px; line-height: 1.25;
}
.app-viewport[data-category] .pp-home-brand { letter-spacing: .035em; }
.app-viewport[data-category] .pp-home-world { letter-spacing: .025em; }

/* Same visible targets and type scale in all four web worlds. Native uses its
 * existing safe-area grid and 46px clock; these rules do not alter that grid. */
html:not([data-pati-platform=ios]) .app-viewport[data-category] .game-controls .icon-button {
  width: 44px; height: 44px; padding: 10px; border-width: 1px;
}
html:not([data-pati-platform=ios]) .app-viewport[data-category] .game-controls .icon-button::after { display: none; }
html:not([data-pati-platform=ios]) .app-viewport[data-category] .game-controls .icon-button .pp-icon { width: 22px; height: 24px; }
html:not([data-pati-platform=ios]) .app-viewport[data-category] .hud-stat > span { letter-spacing: .035em; }
html:not([data-pati-platform=ios]) .app-viewport[data-category] .hud-progress > span { letter-spacing: .015em; }
html:not([data-pati-platform=ios]) .app-viewport[data-category] .question-panel .question-eyebrow {
  letter-spacing: .035em; line-height: 1.2;
}
html:not([data-pati-platform=ios]) .app-viewport[data-category] .answer-row {
  align-items: center; gap: 8px;
}
html:not([data-pati-platform=ios]) .app-viewport[data-category] .countdown {
  flex: 0 0 46px; width: 46px; height: 46px; min-width: 46px;
  border-radius: 50%; font-size: 30px; line-height: 1;
}
html:not([data-pati-platform=ios]) .app-viewport[data-category] .answer-input,
html:not([data-pati-platform=ios]) .app-viewport[data-category] .send-button {
  height: 48px; min-height: 48px; letter-spacing: 0;
}
html:not([data-pati-platform=ios]) .app-viewport[data-category] .round-continue .primary-button {
  min-height: 50px; height: auto; padding: 12px 22px; letter-spacing: .025em;
}

/* Reserve one notice lane above the web input, matching the stable native
 * composer. Invalid/correction states never push the answer row upwards. */
html:not([data-pati-platform=ios]) .app-viewport[data-category] .answer-dock[data-answer-form] {
  --web-notice-room: 76px;
}
html:not([data-pati-platform=ios]) .app-viewport[data-category] .answer-dock[data-answer-form] :is(.inline-error,.answer-correction,.pp-inline-service) {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px);
  max-width: none; max-height: var(--web-notice-room); overflow: auto;
  margin: 0; padding: 10px 12px; border: 1px solid var(--v11-line);
  background: var(--v11-surface); box-shadow: 2px 2px 0 var(--v11-shadow);
  font-size: 18px; line-height: 1.2; letter-spacing: 0;
  overscroll-behavior: contain; scrollbar-width: thin;
}
html:not([data-pati-platform=ios]) .app-viewport[data-category] .answer-dock .pp-inline-service { z-index: 2; }
html:not([data-pati-platform=ios]) .app-viewport[data-category] .answer-dock .answer-correction p { margin: 5px 0 0; font-size: 17px; }

/* Settled answer: clear semantic and visual hierarchy, within the free scene
 * area measured by answer-presentation.js. Only the small tag follows Pati. */
.app-viewport[data-category] .answer-result-card {
  position: absolute; left: 50%; top: var(--answer-card-top,132px);
  transform: translateX(-50%); width: min(360px,calc(100% - 32px));
  max-height: min(328px,var(--answer-card-room,328px)); min-height: 0;
  margin: 0; padding: 20px; z-index: 4; overflow: auto;
  overscroll-behavior: contain; scrollbar-width: thin;
  background: var(--answer-card-surface); color: var(--answer-card-ink);
  border: 1px solid var(--answer-card-line); box-shadow: 3px 3px 0 var(--v11-shadow);
  text-align: center; animation: answer-card-appear 180ms ease-out both;
}
.app-viewport[data-category] .answer-result-card[hidden] { display: none; }
.app-viewport[data-category] .answer-result-meta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 12px; color: var(--answer-card-accent);
}
.app-viewport[data-category] .answer-result-meta .pp-icon { display: block; width: 20px; height: 22px; }
.app-viewport[data-category] .answer-result-tier { margin: 0; font: 400 20px/1.1 var(--mono); letter-spacing: .03em; }
.app-viewport[data-category] .answer-result-text {
  margin: 0; font: 400 36px/1.08 var(--mono); letter-spacing: 0;
  overflow-wrap: anywhere; color: var(--answer-card-ink);
}
.app-viewport[data-category] .answer-result-points {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  margin: 12px 0 0; color: var(--answer-card-accent);
}
.app-viewport[data-category] .answer-result-points strong { font: 400 42px/1 var(--mono); }
.app-viewport[data-category] .answer-result-points > span { font: 400 17px/1.1 var(--mono); letter-spacing: .04em; }
.app-viewport[data-category] .answer-result-caption {
  margin: 12px 0 0; color: var(--answer-card-muted); font: 400 18px/1.25 var(--mono);
}
.app-viewport[data-category] .answer-result-card[data-compact=true] { padding: 13px 16px; }
.app-viewport[data-category] .answer-result-card[data-compact=true] .answer-result-meta { margin-bottom: 8px; }
.app-viewport[data-category] .answer-result-card[data-compact=true] .answer-result-text { font-size: 29px; }
.app-viewport[data-category] .answer-result-card[data-compact=true] .answer-result-points { margin-top: 8px; }
.app-viewport[data-category] .answer-result-card[data-compact=true] .answer-result-points strong { font-size: 34px; }
.app-viewport[data-category] .answer-result-card[data-compact=true] .answer-result-caption { margin-top: 8px; font-size: 17px; }
.app-viewport[data-category] .answer-callout .answer-tag { letter-spacing: 0; }
.app-viewport[data-category] .answer-callout .answer-meta { letter-spacing: .015em; }

@container (min-width:720px) {
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .game-ui {
    --card-left: clamp(32px,5cqw,72px);
    --card-width: min(440px,max(320px,calc(var(--scene-x) - var(--card-left) - 32px)),calc(100cqw - var(--card-left) * 2));
  }
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .game-hud {
    left: clamp(32px,5cqw,72px); top: 24px;
    width: min(540px,max(340px,calc(var(--scene-x) - var(--card-left) - 32px)),calc(100cqw - var(--card-left) * 2));
  }
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .game-controls {
    left: var(--card-left); right: auto; width: 100px; top: 108px;
  }
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .question-panel {
    padding: 20px 22px; top: max(176px,22%); max-height: calc(100% - max(176px,22%) - 196px);
  }
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .question-panel h1 {
    font-size: clamp(30px,3.2cqw,38px); line-height: 1.1;
  }
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .answer-dock,
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .round-continue {
    left: var(--card-left); width: var(--card-width); max-width: var(--card-width);
  }
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .round-continue .primary-button { width: 100%; }
  .app-viewport[data-category] .answer-result-card {
    left: var(--card-left); transform: none; width: var(--card-width); padding: 22px 24px;
  }
  .app-viewport[data-category] .answer-result-text { font-size: 40px; }
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .pp-home .pp-home-actions {
    left: clamp(32px,5cqw,72px); width: min(360px,max(300px,calc(var(--scene-x) - 104px)));
    bottom: max(36px,7cqh); gap: 14px;
  }
  .app-viewport[data-category] .pp-home .pp-home-actions .pp-start { min-height: 62px; font-size: 30px; }
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .pp-home .pp-home-tools {
    left: clamp(32px,5cqw,72px); right: auto; width: 100px; top: 24px;
  }
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .pp-home-identity { left: clamp(32px,5cqw,72px); }
  .app-viewport[data-category] .pp-home .pp-home-brand { font-size: 42px; }
  .app-viewport[data-category] .pp-home .pp-home-world { margin-top: 8px; font-size: 21px; }
  html:not([data-pati-platform=ios]) .app-viewport[data-category=english] .game-ui {
    --card-left: clamp(32px,5cqw,72px);
    --card-width: min(440px,max(320px,calc(var(--paper-x) - var(--card-left) - 32px)),calc(100cqw - var(--card-left) * 2));
  }
  html:not([data-pati-platform=ios]) .app-viewport[data-category=english] .question-panel {
    left: var(--card-left); width: var(--card-width);
  }
}
@container (min-width:720px) and (max-height:650px) {
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .game-hud { top: 14px; }
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .game-controls { top: 80px; }
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .question-panel {
    top: 140px; max-height: calc(100% - 320px); padding: 14px 18px;
  }
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .question-panel h1 { font-size: 30px; }
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .pp-home .pp-home-actions { bottom: 24px; gap: 8px; }
}
/* Preserve the typewriter's existing stacked tablet composition. */
@container (min-width:720px) and (min-height:700px) and (max-aspect-ratio:23/20) {
  html:not([data-pati-platform=ios]) .app-viewport[data-category=english] .game-ui {
    --card-left: 32px; --card-width: min(440px,calc(100% - 64px));
  }
  html:not([data-pati-platform=ios]) .app-viewport[data-category=english] .game-controls { left: auto; right: 32px; top: 24px; }
  html:not([data-pati-platform=ios]) .app-viewport[data-category=english] .question-panel {
    left: calc(var(--paper-x) + var(--paper-width) * .0545454545);
    top: calc(var(--paper-y) + var(--paper-height) * .1043841336);
    width: calc(var(--paper-width) * .8909090909);
    max-height: max(38px,calc(var(--paper-height) * .2181628392 - 8px));
    padding: 0; background: transparent; border: 0; box-shadow: none;
  }
  html:not([data-pati-platform=ios]) .app-viewport[data-category=english] .question-panel h1 { font-size: clamp(24px,3cqw,28px); }
}
@container (max-width:719px) {
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .game-controls { top: 72px; left: 12px; right: 12px; }
  html:not([data-pati-platform=ios]) .app-viewport[data-category]:not(.keyboard-open):not([data-category=english]) .question-panel {
    top: max(132px,calc(var(--scene-y) + var(--scene-height) * .154));
    max-height: max(36px,calc(100% - max(132px,calc(var(--scene-y) + var(--scene-height) * .154)) - 190px));
    overflow: auto; overscroll-behavior: contain;
  }
  html:not([data-pati-platform=ios]) .app-viewport[data-category].keyboard-open .game-controls { top: 72px; }
  html:not([data-pati-platform=ios]) .app-viewport[data-category].keyboard-open .question-panel { left: 64px; width: calc(100% - 128px); }
  html:not([data-pati-platform=ios]) .app-viewport[data-category].keyboard-open .answer-dock[data-answer-form] { --web-notice-room: 62px; }
  html:not([data-pati-platform=ios]) .app-viewport[data-category].keyboard-open .question-panel { max-height: max(36px,calc(100% - 236px)); }
}
@container (max-width:360px) {
  .app-viewport[data-category] .pp-home .pp-home-actions { gap: 8px; }
  .app-viewport[data-category] .pp-home .pp-home-actions .pp-start { min-height: 52px; padding: 10px 14px; font-size: 25px; }
  .app-viewport[data-category] .pp-home .pp-home-actions .pp-home-links { gap: 4px 10px; }
  .app-viewport[data-category] .pp-home .pp-home-actions .pp-home-links .pp-link-button { font-size: 17px; }
  .app-viewport[data-category] .answer-result-card { padding: 16px; }
  .app-viewport[data-category] .answer-result-text { font-size: 30px; }
  html:not([data-pati-platform=ios]) .app-viewport[data-category] .answer-row { gap: 6px; }
}
/* Existing iOS layout owns positions, including the keyboard and typewriter.
 * These are typography-only refinements for the same home hierarchy. */
html[data-pati-platform=ios] #review-main .app-viewport[data-category] .pp-home .pp-start {
  font-size: 27px; line-height: 1.1; letter-spacing: .025em;
}
html[data-pati-platform=ios] #review-main .app-viewport[data-category] .pp-home .pp-home-links .pp-link-button {
  font-size: 18px; letter-spacing: .025em;
}
.app-viewport[data-reduce-motion=true] { --ui-duration: 0ms; }
.app-viewport[data-reduce-motion=true] .answer-result-card { animation: none; }
@keyframes answer-card-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion:reduce) {
  .app-viewport[data-category] { --ui-duration: 0ms; }
  .app-viewport[data-category] .answer-result-card { animation: none; }
}
@media (forced-colors:active) {
  .app-viewport[data-category] { --answer-card-surface:Canvas; --answer-card-ink:CanvasText; --answer-card-muted:CanvasText; --answer-card-line:ButtonText; --answer-card-accent:Highlight; }
  .app-viewport[data-category] :is(button,a,input,select,textarea,summary):focus-visible { outline-color: Highlight; }
}