/* Generated from ios/web/ios-layout.css by scripts/sync-web-presentation.mjs.
 * Update the mobile source and run the generator; do not edit this copy. */
/* Bundled iOS only. Browser HTML never requests this stylesheet. */
html[data-pati-web-design=mobile] { height: 100%; overflow: hidden; overscroll-behavior: none; --pati-visible-height: 100svh; --pati-safe-top: env(safe-area-inset-top,0px); --pati-safe-bottom: env(safe-area-inset-bottom,0px); --pati-safe-left: env(safe-area-inset-left,0px); --pati-safe-right: env(safe-area-inset-right,0px); }
html[data-pati-web-design=mobile] body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
html[data-pati-web-design=mobile] #review-main { position: fixed; inset: 0; height: var(--pati-visible-height); overflow: hidden; }
html[data-pati-web-design=mobile] .preview-shell { position: absolute; inset: 0; display: block; padding: 0; height: 100%; min-height: 0; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] { top: 0 !important; width: 100%; height: 100%; min-height: 0 !important; max-height: none; box-shadow: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-ui { inset: 0; width: 100%; height: 100%; padding: calc(var(--pati-safe-top) + 8px) max(12px,var(--pati-safe-right)) calc(var(--pati-safe-bottom) + 8px) max(12px,var(--pati-safe-left)); display: grid; grid-template: auto auto minmax(0,1fr) auto auto / minmax(0,1fr); gap: 8px; box-sizing: border-box; --ios-row-send: 84px; --ios-row-base-gap: 6px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-hud { position: relative; grid-row: 1; inset: auto; margin: 0 48px; padding: 0; width: auto; max-width: none; height: 44px; min-height: 44px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 5px; background: transparent; border: 0; box-shadow: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-keyboard=true] .game-hud { margin-right: calc(48px + 48px * var(--pati-keyboard-progress,1)); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .hud-stat { position: static; display: flex; flex-direction: column; align-items: center; justify-content: center; width: auto; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; clip-path: none; box-shadow: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .hud-stat::before,
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .hud-stat::after { display: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .hud-stat>span { font-size: 12px; line-height: 1; letter-spacing: .04em; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .hud-stat strong { font-size: 22px; line-height: 1; margin: 2px 0 0; padding: 0; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .hud-stat small { display: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=sports] .hud-stat.score strong { color: #fff1d2; text-shadow: 1px 1px 0 #071321,-1px 0 0 #071321,0 -1px 0 #071321; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=sports] .game-hud :is(.hud-stat>span,.hud-progress>span) { color:#fff1d2; text-shadow:1px 1px 0 #071321,-1px 0 0 #071321,0 -1px 0 #071321; }
/* Keep the tower visible between the letters. Contrast follows the glyphs;
   individual labels and values must not become separate cream stickers. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=general] .game-hud :is(.hud-stat>span,.hud-stat strong,.hud-progress>span) { color: #174b56; text-shadow: 0 1px 0 #fff4d9,1px 0 0 #fff4d9,-1px 0 0 #fff4d9,0 -1px 0 #fff4d9; background: transparent; box-shadow: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=general] .hud-stat>span { font-size: 13px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=general] .hud-dots { padding: 0; background: transparent; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .hud-progress { position: static; width: auto; transform: none; display: flex; flex-direction: column; gap: 4px; justify-content: center; align-items: center; min-width: 0; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .hud-progress>span { font-size: 16px; line-height: 1; letter-spacing: 0; }
/* The notebook desk has both lit wood and dark grain behind the header. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .game-hud :is(.hud-stat>span,.hud-stat strong,.hud-progress>span) { color:#fff1d2; text-shadow:1px 1px 0 #3b2419,-1px 0 0 #3b2419,0 -1px 0 #3b2419,0 1px 0 #3b2419; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .game-hud .hud-stat>span { font-size:13px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .game-hud .hud-stat strong,
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .game-hud .hud-progress>span { color: #f3e8c7; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .hud-dots { gap: 3px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .hud-dots i { width: 8px; height: 8px; border-width: 1px; box-shadow: none; outline: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=general] .hud-dots i { background: transparent; border-color: #174b56; box-shadow: 0 1px 0 rgba(255,244,217,.85); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=general] .hud-dots i.active { background: #e4b358; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=general] .hud-dots i.done { background: #24666d; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=general] .hud-dots i.missed { background: #a05a47; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-controls { position: absolute; left: max(12px,var(--pati-safe-left)); right: max(12px,var(--pati-safe-right)); top: calc(var(--pati-safe-top) + 8px); width: auto; height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 0; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-controls .icon-button { width: 44px; height: 44px; min-height: 44px; padding: 10px; border-width: 1px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-controls .icon-button::after { display: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-keyboard-dismiss { position: absolute; right: 48px; top: 0; opacity: var(--pati-keyboard-progress,0); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] [hidden] { display: none !important; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .question-panel { position: relative; grid-row: 2; inset: auto; width: 100%; min-height: 0; max-height: min(190px,calc(var(--pati-visible-height) * .30)); margin: 0; padding: 10px 12px; overflow: auto; overscroll-behavior: contain; box-sizing: border-box; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .question-panel h1 { font: 400 22px/1.15 var(--mono); letter-spacing: 0; margin: 0; overflow-wrap: break-word; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .question-panel .question-eyebrow { font-size: 13px; margin: 0 0 4px; line-height: 1; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .question-panel p { display: none; }
/* A condition is metadata for the same question, not another paragraph to
   hunt through. The h1 keeps its complete original accessible name. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .question-panel .question-condition { display: block; margin: 0 0 4px; font: 400 16px/1.05 var(--mono); color: var(--v11-accent); letter-spacing: 0; text-transform: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .question-panel .question-core { display: block; }

html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock { position: relative; grid-row: 5; inset: auto; width: 100%; min-height: 0; max-height: none; padding: 6px; margin: 0; box-sizing: border-box; background: var(--v11-surface,var(--paper)); border: 1px solid var(--v11-line); box-shadow: none; clip-path: none; align-self: end; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock::before,
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock::after { display: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-row { display: grid; grid-template-columns: 44px minmax(0,1fr) var(--ios-row-send,84px); align-items: stretch; gap: var(--ios-row-base-gap,6px); min-width: 0; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .countdown { display: flex; align-items: center; justify-content: center; width: 44px; min-width: 0; height: 46px; padding: 0; font-size: 25px; line-height: 1; border: 1px solid var(--v11-line); border-radius: 0; box-sizing: border-box; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-input { width: 100%; min-width: 0; height: 46px; font: 400 22px/1.1 var(--mono); padding: 8px; border: 1px solid var(--v11-line); border-radius: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; outline: none; box-shadow: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-input:focus,
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-input:focus-visible { outline: none; box-shadow: none; border-color: var(--v11-accent); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-input::placeholder { font: inherit; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .send-button { width: var(--ios-row-send,84px); min-width: 0; height: 46px; min-height: 46px; padding: 6px; font: 400 20px/1.05 var(--mono); white-space: nowrap; letter-spacing: 0; box-sizing: border-box; border-width: 1px; box-shadow: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .send-button:disabled { opacity: .64; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] :is(.countdown,.answer-input,.send-button) { min-height: 46px; max-height: 46px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .timer-track { position: absolute; bottom: 2px; left: 57px; right: 97px; height: 2px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-correction,
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .inline-error,
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .pp-inline-service,
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-turn-note { position: relative; inset: auto; width: auto; max-width: none; max-height: 72px; overflow: auto; margin: 0 0 6px; padding: 5px 6px; font: 400 17px/1.15 var(--mono); box-sizing: border-box; }
/* This empty space belongs to every answer, not to a validation error. The
   visible notice is an overlay in that reserved camera band; the live row
   never moves, reflows, or loses its keyboard when feedback changes. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock[data-ios-composer=true] { --ios-notice-height: 48px; --ios-notice-gap: 6px; --ios-row-gap: calc(var(--ios-row-base-gap,6px) + 2px * var(--pati-keyboard-progress,0)); --ios-row-clock: calc(44px + 2px * var(--pati-keyboard-progress,0)); border: 0; padding: calc(7px - 7px * var(--pati-keyboard-progress,0)); padding-bottom: calc(7px - 3px * var(--pati-keyboard-progress,0)); box-shadow: inset 0 0 0 calc(1px - 1px * var(--pati-keyboard-progress,0)) var(--v11-line); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock[data-ios-composer=true] .answer-row { grid-template-columns: var(--ios-row-clock) minmax(0,1fr) var(--ios-row-send,84px); gap: var(--ios-row-gap); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock[data-ios-composer=true] .countdown { width: var(--ios-row-clock); border-radius: calc(23px * var(--pati-keyboard-progress,0)); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock[data-ios-composer=true] .timer-track { left: calc(57px - 3px * var(--pati-keyboard-progress,0)); right: calc(var(--ios-row-send,84px) + var(--ios-row-gap) + 7px - 7px * var(--pati-keyboard-progress,0)); bottom: calc(2px - 2px * var(--pati-keyboard-progress,0)); height: 2px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock[data-ios-composer=true]>:is(.answer-correction,.inline-error,.pp-inline-service,.ios-turn-note) { position: absolute; inset: auto 0 calc(100% + var(--ios-notice-gap)); width: 100%; height: var(--ios-notice-height); max-height: var(--ios-notice-height); margin: 0; padding: 4px 6px; overflow: auto; overscroll-behavior: contain; border: 0; background: var(--v11-surface,var(--paper)); color: var(--v11-ink); box-shadow: none; clip-path: none; font: 400 17px/1.15 var(--mono); text-align: left; z-index: 2; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock[data-ios-composer=true] .inline-error { display: block; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock[data-ios-composer=true] :is(.inline-error,.pp-inline-service) button { display: inline; min-height: 0; height: auto; width: auto; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; color: var(--v11-accent); font: inherit; line-height: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; box-shadow: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-correction p { margin: 3px 0 0; font-size: 16px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .correction-pair { font-size: 19px; flex-wrap: wrap; gap: 4px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .inline-error b { display: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .inline-error button { min-height: 32px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ascent-arrow { display: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .round-continue { position: relative; grid-row: 5; inset: auto !important; transform: none; width: min(100%,268px); justify-self: center; text-align: center; margin: 0; padding: 0; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .round-continue .primary-button { width: 100%; min-height: 48px; font-size: 22px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .round-continue:empty { display: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-callout { max-width: min(240px,calc(100% - 24px)); pointer-events: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-word { font-size: 24px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-meta { font-size: 17px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .preview-count { top: calc(var(--ios-scene-top,0px) + var(--ios-scene-height,100%) * .5); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-ui[aria-hidden=true] { pointer-events: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-ui[aria-hidden=true]>* { pointer-events: none; }
html[data-pati-web-design=mobile] .review-toast { bottom: calc(100% - var(--pati-visible-height) + var(--pati-safe-bottom) + 12px); max-width: calc(100% - 32px); }
@media (max-width:350px) {
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-ui { padding-left: 8px; padding-right: 8px; gap: 6px; --ios-row-send: 72px; --ios-row-base-gap: 5px; }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-controls { left: 8px; right: 8px; }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-row { grid-template-columns: 44px minmax(0,1fr) var(--ios-row-send,72px); gap: var(--ios-row-base-gap,5px); }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .send-button { width: var(--ios-row-send,72px); min-width: 0; font-size: 19px; }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .timer-track { left: 56px; right: 84px; }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .question-panel h1 { font-size: 21px; }
}
@media (orientation:landscape) and (max-height:600px) {
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-ui { gap: 4px; padding-top: calc(var(--pati-safe-top) + 4px); padding-bottom: calc(var(--pati-safe-bottom) + 4px); }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .question-panel { max-height: 72px; padding: 5px 8px; }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .question-panel h1 { font-size: 20px; }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .question-eyebrow { display: none; }
}
/* Keyboard size, including a third-party keyboard, can leave a much shorter
   usable region than the CSS screen-height media query reports. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-compact=true] .game-ui { gap: 4px; padding-top: calc(var(--pati-safe-top) + 4px); padding-bottom: calc(var(--pati-safe-bottom) + 4px); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-compact=true] .game-controls { top: calc(var(--pati-safe-top) + 4px); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-compact=true] .question-panel { padding: 4px 8px; max-height: min(68px,max(30px,calc(var(--pati-visible-height) - var(--pati-safe-top) - var(--pati-safe-bottom) - 172px))); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-compact=true] .question-panel h1 { font-size: 20px; line-height: 1.12; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-compact=true] .question-eyebrow { display: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-compact=true] .answer-dock { padding: 4px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-compact=true] :is(.answer-correction,.inline-error,.pp-inline-service,.ios-turn-note) { max-height: 44px; margin-bottom: 4px; padding: 3px 6px; }

/* English owns a real sheet: its DOM prompt must use the same paper bounds,
   never the generic full-width HUD row. The normal notebook stays unchanged. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english]:not([data-ios-keyboard=true]) .question-panel {
  position: absolute; grid-row: auto; left: var(--ios-paper-question-left,calc(var(--scene-x) + var(--scene-width) * .1547479484)); top: var(--ios-paper-question-top,calc(var(--scene-y) + var(--scene-height) * .1952277657));
  width: var(--ios-paper-question-width,calc(var(--scene-width) * .6893317702)); max-height: var(--ios-paper-question-height,max(38px,calc(var(--scene-height) * .113340564 - 8px))); min-height: 0;
  padding: 0; background: transparent; border: 0; box-shadow: none; clip-path: none; overflow: auto;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .question-panel .question-eyebrow { display: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english]:not([data-ios-keyboard=true]) .question-panel h1 { font-size: 22px; line-height: 1.12; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english][data-ios-paper=true] .question-panel {
  position: absolute; grid-row: auto; left: var(--ios-paper-question-left,16%); top: var(--ios-paper-question-top,25%);
  width: var(--ios-paper-question-width,68%); max-height: var(--ios-paper-question-height,76px); min-height: 0;
  padding: 0; background: transparent; border: 0; box-shadow: none; clip-path: none; overflow: auto;
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english][data-ios-keyboard=true] .question-panel .question-eyebrow { display: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-round-error { grid-row: 5; position: relative; align-self: end; display: grid; grid-template-rows: minmax(0,1fr) 44px; gap: 8px; width: 100%; min-height: 0; max-height: min(180px,calc(var(--pati-visible-height) - var(--pati-safe-top) - var(--pati-safe-bottom) - 80px)); margin: 0; padding: 10px; overflow: hidden; background: var(--v11-surface); border: 1px solid var(--v11-line); color: var(--v11-ink); box-sizing: border-box; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-round-error-message { display: block; min-height: 0; max-height: 86px; overflow: auto; overscroll-behavior: contain; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .ios-round-error button { height: 44px; min-height: 44px; max-height: 44px; padding: 6px 10px; font: 400 20px/1.1 var(--mono); }

/* The keyboard is an editing state of the same scene. Keep the progress and
   question hierarchy visible, and let the composer sit directly above iOS. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-keyboard=true] .hud-dots { display: flex; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-keyboard=true] .hud-progress>span { white-space: nowrap; font-size: 15px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-keyboard=true] .question-panel { border: 1px solid var(--v11-line); box-shadow: none; clip-path: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-keyboard=true] .question-panel .question-eyebrow { display: block; margin-bottom: 5px; color: var(--v11-accent); }
/* The basket occupies the upper-right court. Keep that column visible while
   editing instead of moving/scaling the illustration or hiding the rim. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=sports][data-ios-keyboard=true] .question-panel { justify-self: start; width: calc(100% - 26% * var(--pati-keyboard-progress,1)); max-height: min(calc(190px - 74px * var(--pati-keyboard-progress,1)),calc(var(--pati-visible-height) * .30),max(30px,calc(var(--pati-visible-height) - var(--pati-safe-top) - var(--pati-safe-bottom) - 224px))); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-keyboard=true] .game-ui { padding-bottom: calc(var(--pati-safe-bottom) + var(--ios-composer-edge,8px) + (5px - var(--ios-composer-edge,8px)) * var(--pati-keyboard-progress,1)); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-keyboard=true] .answer-dock { padding: 0 0 4px; border: 0; background: transparent; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-keyboard=true] .answer-row { grid-template-columns: 46px minmax(0,1fr) var(--ios-row-send,84px); gap: calc(var(--ios-row-base-gap,6px) + 2px); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-keyboard=true] .countdown { width: 46px; border-radius: 50%; background: var(--v11-surface); clip-path: none; box-shadow: inset 0 0 0 3px var(--v11-surface); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-keyboard=true] .countdown::before,
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-keyboard=true] .countdown::after { display: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-keyboard=true] .timer-track { left: 54px; right: 92px; bottom: 0; height: 2px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english][data-ios-paper=true] .question-panel { border: 0; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english][data-ios-paper=true] .question-panel .question-eyebrow { display: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english][data-ios-paper=true] .question-panel h1 { font-size: 22px; line-height: 1.12; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .round-continue .primary-button { min-height: 48px; max-height: none; padding: 11px 18px; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-compact=true] .question-panel .question-eyebrow { display: none; }
@media (max-width:350px) {
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-keyboard=true] .hud-progress>span { font-size: 13px; }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-keyboard=true] .answer-row { grid-template-columns: 46px minmax(0,1fr) 72px; gap: 6px; }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-keyboard=true] .timer-track { left: 52px; right: 78px; }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock[data-ios-composer=true] { --ios-notice-height: 66px; }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock[data-ios-composer=true] { --ios-row-gap: calc(5px + var(--pati-keyboard-progress,0) * 1px); }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock[data-ios-composer=true] .answer-row { grid-template-columns: var(--ios-row-clock) minmax(0,1fr) 72px; }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .answer-dock[data-ios-composer=true] .timer-track { left: calc(56px - 4px * var(--pati-keyboard-progress,0)); right: calc(84px - 6px * var(--pati-keyboard-progress,0)); }
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-compact=true] .answer-dock[data-ios-composer=true] { --ios-notice-height: 44px; --ios-notice-gap: 4px; }
/* One typewriter composer in both keyboard states: its keys, border and
   spacing do not morph from a framed rectangle into a separate round timer. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .game-ui { padding-bottom: calc(var(--pati-safe-bottom) + var(--ios-composer-edge,8px) + (5px - var(--ios-composer-edge,8px)) * var(--pati-keyboard-progress,0)); }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .question-panel .question-eyebrow { display: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .answer-dock[data-ios-composer=true] { --ios-row-gap: 6px; --ios-row-clock: 44px; padding: 0 0 4px; border: 0; background: transparent; box-shadow: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .answer-dock[data-ios-composer=true] .countdown { border-radius: 0; background: var(--v11-surface); box-shadow: none; }
html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .answer-dock[data-ios-composer=true] .timer-track { left: 50px; right: 90px; bottom: 0; }
@media (max-width:350px) {
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .answer-dock[data-ios-composer=true] { --ios-row-gap: 5px; }
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category=english] .answer-dock[data-ios-composer=true] .timer-track { left: 49px; right: 77px; }
}
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-compact=true] .game-ui { --ios-composer-edge: 4px; }
@media (orientation:landscape) and (max-height:600px) {
  html[data-pati-web-design=mobile] #review-main .app-viewport[data-category] .game-ui { --ios-composer-edge: 4px; }
}

/* Extend the active panel palette through the status-bar safe area. The native
   icon style is selected from this same computed color, not the game category. */
html[data-pati-web-design=mobile] #review-main .app-viewport[data-ios-panel-open=true]::before { content: ""; position: absolute; z-index: 90; top: 0; left: 0; right: 0; height: var(--pati-safe-top); background: var(--ios-status-background,var(--v11-surface)); pointer-events: none; }