/* =========================================================
   CROSSWORDY COMPACT PHONE STYLESHEET
   =========================================================
   Loaded after styles.css and before accessible-styles.css.

   This file intentionally contains the proven compact-phone cascade from
   the iPhone SE layout work. V231 is a structural housekeeping release:
   rules have been moved out of styles.css without intentional visual changes.

   IMPORTANT: Do not add model-specific iPhone rules unless unavoidable.
   Prefer viewport/breakpoint rules that also benefit older small phones.
   ========================================================= */

/* CrossWordy V220: iPhone SE first-launch dock.
   On very short phones, keep Start playing in a proper footer container at the
   bottom of the guide instead of floating over the teaching cards. */
@media (max-width: 390px) and (max-height: 700px) and (orientation: portrait) {
  .intro-guide-dialog {
    height: calc(100dvh - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
  }

  .intro-guide-shell {
    box-sizing: border-box !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    padding-bottom: 0 !important;
  }

  .intro-start-dock {
    position: sticky !important;
    z-index: 8 !important;
    bottom: 0 !important;
    margin: 12px -18px 0 !important;
    padding: 10px 18px 12px !important;
    border-top: 1px solid rgba(216,219,225,.95) !important;
    border-radius: 0 0 22px 22px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 -10px 22px rgba(25,39,64,.10) !important;
  }

  .intro-start-dock .how-to-start {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* Allow the final card to scroll fully above the dock. */
  .intro-feedback-list {
    padding-bottom: 8px !important;
  }
}

/* =========================================================
   CROSSWORDY COMPACT-PHONE LAYOUT RULES
   =========================================================

   Purpose:
   Support short/small phone screens such as 375x667
   (e.g. iPhone SE 2nd/3rd generation) without relying on
   device-name-specific CSS.

   Supported/tested baseline:
   - Product test/support target: iOS 16+
   - Xcode deployment target may remain iOS 15 while compatible.

   Compact layout principles:
   - Header uses a controlled visual height and must keep
     Logo / Guesses / Help / Menu fully visible.
   - Maintain approximately 10px structural spacing where possible.
   - Remove Ads remains centred and may move vertically as needed.
   - The 6x6 board must always show all 6 columns and 6 rows.
   - All playable and mask cells derive from one consistent square size.
   - The grid shrinks before essential controls become inaccessible.
   - Status and Hint share one region.
   - When Hint is hidden it must consume zero layout space.
   - Keyboard must always show all 3 rows.
   - Compact phones may reduce key height to preserve fit.
   - Clear / Guess must remain fully visible, centred and usable.
   - Avoid individual iPhone-model overrides unless absolutely necessary.

   Current compact breakpoint:
     max-width: 390px
     max-height: 720px
     portrait

   Minimum regression checks after changing compact layout:
   - 375x667 compact phone
   - standard iPhone
   - tall/large iPhone
   - compact phone with Accessibility enabled

   ARCHITECTURE:
   This file is the single home for compact/short-phone layout rules.
   Keep device behaviour breakpoint-based rather than model-name-based.
   Core/global styles belong in styles.css; accessibility-specific rules
   belong in accessible-styles.css.
   ========================================================= */

/* CrossWordy V244: browser short-viewport regression fix.
   V221-V224 are compact APP-mode rules. Ordinary Safari/Chrome can report a
   visual viewport below 720px simply because browser chrome is visible; those
   browsers must stay on the normal responsive web layout. */
/* CrossWordy V221: general short-screen portrait layout.
   Fixed priorities: header, action tray, keyboard key size and readable status.
   The crossword absorbs the remaining vertical space. */
@media (max-width: 430px) and (max-height: 720px) and (orientation: portrait) {
  html:is(.native-app, .ios-app) .game-shell {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 auto !important;
    padding: max(4px, env(safe-area-inset-top)) 10px calc(78px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-rows: 44px auto minmax(0, 1fr) auto 50px auto !important;
    align-content: stretch !important;
    overflow: hidden !important;
  }

  html:is(.native-app, .ios-app) .game-header {
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 0 10px !important;
    align-self: start !important;
  }
  html:is(.native-app, .ios-app) .brand-logo { max-width: 145px !important; }
  html:is(.native-app, .ios-app) .guess-pill,
  html:is(.native-app, .ios-app) .menu-button,
  html:is(.native-app, .ios-app) .game-help-button { max-height: 40px !important; }

  html:is(.native-app, .ios-app) .puzzle-identity {
    min-height: 18px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    align-self: start !important;
    transform: none !important;
    line-height: 1 !important;
  }
  html:is(.native-app, .ios-app) .remove-ads-header-link {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  html:is(.native-app, .ios-app) .board-wrap,
  html:is(.native-app, .ios-app) .game-shell:has(.assist-row[hidden]) .board-wrap {
    box-sizing: border-box !important;
    place-self: center !important;
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: calc(100vw - 20px) !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto !important;
    padding: 6px !important;
    transform: none !important;
    overflow: hidden !important;
  }
  html:is(.native-app, .ios-app) .board {
    width: 100% !important;
    height: 100% !important;
    grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  html:is(.native-app, .ios-app) .cell {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    border-width: 2px !important;
    border-radius: 8px !important;
    font-size: clamp(21px, 7vw, 27px) !important;
  }

  html:is(.native-app, .ios-app) .selection-indicator {
    align-self: center !important;
    margin: 4px auto !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  html:is(.native-app, .ios-app) .status-assist-zone {
    box-sizing: border-box !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 0 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
  }
  html:is(.native-app, .ios-app) .status-assist-zone .status {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 1px 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 15px !important;
    text-align: center !important;
  }
  html:is(.native-app, .ios-app) .status-assist-zone .assist-row {
    min-height: 0 !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    transform: none !important;
  }
  html:is(.native-app, .ios-app) .status-assist-zone .assist-row[hidden] { display: none !important; }
  html:is(.native-app, .ios-app) .status-assist-zone .hint-button {
    box-sizing: border-box !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    white-space: nowrap !important;
    font-size: 11px !important;
  }

  html:is(.native-app, .ios-app) .controls {
    align-self: end !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }
  html:is(.native-app, .ios-app) .keyboard {
    gap: 6px !important;
    margin: 0 !important;
    transform: none !important;
  }
  html:is(.native-app, .ios-app) .keyboard-row { gap: 4px !important; }
  html:is(.native-app, .ios-app) .key {
    height: 44px !important;
    border-radius: 8px !important;
    font-size: 17px !important;
  }

  html:is(.native-app, .ios-app) .actions {
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
  }
}

/* CrossWordy V222: short-screen rules pass 2.
   Board size is bounded by available width and remaining vertical height. */
@media (max-width: 430px) and (max-height: 720px) and (orientation: portrait) {
  html:is(.native-app, .ios-app) .game-shell {
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: max(4px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  html:is(.native-app, .ios-app) .game-header {
    flex: 0 0 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 0 10px !important;
  }
  html:is(.native-app, .ios-app) .puzzle-identity {
    flex: 0 0 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 0 10px !important;
    transform: none !important;
  }
  html:is(.native-app, .ios-app) .board-wrap,
  html:is(.native-app, .ios-app) .game-shell:has(.assist-row[hidden]) .board-wrap {
    flex: 0 0 auto !important;
    width: min(calc(100vw - 20px), calc(100dvh - 405px)) !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 8px !important;
    padding: 6px !important;
    transform: none !important;
    overflow: hidden !important;
  }
  html:is(.native-app, .ios-app) .selection-indicator {
    flex: 0 0 auto !important;
    min-height: 24px !important;
    margin: 0 auto 4px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }
  html:is(.native-app, .ios-app) .selection-indicator[hidden] { display: none !important; }
  html:is(.native-app, .ios-app) .status-assist-zone {
    flex: 0 0 50px !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 0 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: hidden !important;
  }
  html:is(.native-app, .ios-app) .status-assist-zone .status {
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 1px !important;
    font-size: 11px !important;
    line-height: 15px !important;
    overflow: hidden !important;
  }
  html:is(.native-app, .ios-app) .status-assist-zone .assist-row {
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  html:is(.native-app, .ios-app) .status-assist-zone .assist-row[hidden] { display: none !important; }
  html:is(.native-app, .ios-app) .controls {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html:is(.native-app, .ios-app) .keyboard {
    width: 100% !important;
    margin: 0 0 10px !important;
    gap: 6px !important;
    transform: none !important;
  }
  html:is(.native-app, .ios-app) .keyboard-row { gap: 4px !important; }
  html:is(.native-app, .ios-app) .key {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
    font-size: 17px !important;
  }
  html:is(.native-app, .ios-app) .actions {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
  }
  html:is(.native-app, .ios-app) .action-button {
    height: 52px !important;
    min-height: 52px !important;
  }
}


/* CrossWordy V223: short-screen rules pass 3.
   Smaller bounded board, compact keyboard, centred Remove Ads. */
@media (max-width: 430px) and (max-height: 720px) and (orientation: portrait) {
  html:is(.native-app, .ios-app) .puzzle-identity {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
  }
  html:is(.native-app, .ios-app) .remove-ads-header-link {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  html:is(.native-app, .ios-app) .board-wrap,
  html:is(.native-app, .ios-app) .game-shell:has(.assist-row[hidden]) .board-wrap {
    width: min(calc(100vw - 32px), 292px, calc(100dvh - 440px)) !important;
    max-width: 292px !important;
    margin: 0 auto 8px !important;
  }
  html:is(.native-app, .ios-app) .keyboard {
    gap: 4px !important;
    margin-bottom: 10px !important;
  }
  html:is(.native-app, .ios-app) .keyboard-row { gap: 3px !important; }
  html:is(.native-app, .ios-app) .key {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 7px !important;
    font-size: 16px !important;
  }
}


/* CrossWordy V224: short-screen rules pass 4.
   Make the 6x6 board genuinely responsive, tighten the status/keyboard gap,
   and reclaim hint space automatically when hints are unavailable. */
@media (max-width: 430px) and (max-height: 720px) and (orientation: portrait) {
  html:is(.native-app, .ios-app) .board-wrap,
  html:is(.native-app, .ios-app) .game-shell:has(.assist-row[hidden]) .board-wrap {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: min(calc(100vw - 44px), 268px, calc(100dvh - 456px)) !important;
    max-width: 268px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 6px !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  html:is(.native-app, .ios-app) .board {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  html:is(.native-app, .ios-app) .cell {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 7px !important;
    font-size: clamp(18px, 6vw, 23px) !important;
  }

  html:is(.native-app, .ios-app) .selection-indicator {
    min-height: 20px !important;
    margin: 0 auto 2px !important;
    padding: 2px 7px !important;
  }

  html:is(.native-app, .ios-app) .status-assist-zone {
    flex: 0 0 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 0 4px !important;
    gap: 5px !important;
  }

  html:is(.native-app, .ios-app) .status-assist-zone .status {
    height: 42px !important;
    min-height: 42px !important;
    line-height: 14px !important;
  }

  html:is(.native-app, .ios-app) .status-assist-zone .assist-row,
  html:is(.native-app, .ios-app) .status-assist-zone .hint-button {
    height: 36px !important;
    min-height: 36px !important;
  }

  html:is(.native-app, .ios-app) .status-assist-zone:has(.assist-row[hidden]) {
    flex-basis: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:is(.native-app, .ios-app) .status-assist-zone:has(.assist-row[hidden]) .status {
    height: 38px !important;
    min-height: 38px !important;
  }

  html:is(.native-app, .ios-app) .controls {
    margin: 0 !important;
  }

  html:is(.native-app, .ios-app) .keyboard {
    gap: 3px !important;
    margin: 0 0 7px !important;
  }
  html:is(.native-app, .ios-app) .keyboard-row { gap: 3px !important; }
  html:is(.native-app, .ios-app) .key {
    height: 34px !important;
    min-height: 34px !important;
  }

  html:is(.native-app, .ios-app) .actions {
    flex: 0 0 auto !important;
    margin: 0 0 max(10px, env(safe-area-inset-bottom)) !important;
  }
  html:is(.native-app, .ios-app) .action-button {
    height: 48px !important;
    min-height: 48px !important;
  }
}


/* CrossWordy V225: short-screen grid uniformity + centred action tray.
   Keep the existing mask-cell size as the reference and force playable cells
   to match it exactly. */
@media (max-width: 390px) and (max-height: 720px) and (orientation: portrait) {
  html.native-app .board {
    grid-auto-rows: 1fr !important;
  }

  html.native-app .board .cell,
  html.native-app .board .cell.blocked,
  html.native-app .board .cell.mask,
  html.native-app .board .cell.black {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
  }

  html.native-app .board .cell:not(.blocked):not(.mask):not(.black) {
    padding: 0 !important;
  }

  html.native-app .action-row,
  html.native-app .guess-actions,
  html.native-app .action-tray {
    width: min(calc(100% - 20px), 340px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
  }

  html.native-app .action-row > *,
  html.native-app .guess-actions > *,
  html.native-app .action-tray > * {
    flex: 1 1 0 !important;
  }
}


/* CrossWordy V226: short-screen header spacing + centred two-button action row.
   Refine only the SE/short-phone presentation without changing the now-correct
   board cell geometry. */
@media (max-width: 390px) and (max-height: 720px) and (orientation: portrait) {

  /* Keep the four header items distributed across the full usable width. */
  html.native-app .topbar,
  html.native-app .game-header,
  html.native-app .header-row {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  html.native-app .topbar .brand,
  html.native-app .game-header .brand,
  html.native-app .header-row .brand {
    margin-right: auto !important;
    flex: 0 1 auto !important;
  }

  html.native-app .topbar .header-actions,
  html.native-app .game-header .header-actions,
  html.native-app .header-row .header-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  /* On the short screen the menu button must sit at the right edge, not be
     pulled inward by legacy transforms/margins. */
  html.native-app .menu-button,
  html.native-app #menuButton,
  html.native-app [data-menu-button] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  /* Explicit two-column Clear / Guess tray.  Override legacy one-sided widths
     that caused only Guess to be visible in V225. */
  html.native-app .action-row,
  html.native-app .guess-actions,
  html.native-app .action-tray {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: calc(100% - 28px) !important;
    max-width: 340px !important;
    margin: 10px auto 10px !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  html.native-app .action-row > *,
  html.native-app .guess-actions > *,
  html.native-app .action-tray > * {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Keep the header's three right-side controls visually even. */
  html.native-app .guesses-pill,
  html.native-app .help-button,
  html.native-app .menu-button {
    align-self: center !important;
  }
}


/* CrossWordy V227: target the actual short-screen header and action elements. */
@media (max-width: 390px) and (max-height: 720px) and (orientation: portrait) {
  html.native-app .game-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 42px !important;
    align-items: center !important;
    column-gap: 7px !important;
    width: 100% !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
  }

  html.native-app .logo-heading {
    min-width: 0 !important;
    overflow: visible !important;
  }

  html.native-app .brand-logo {
    width: 100% !important;
    max-width: 145px !important;
    height: auto !important;
  }

  html.native-app .header-guess-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  html.native-app .guess-pill {
    min-width: 92px !important;
    height: 40px !important;
    padding: 0 9px !important;
  }

  html.native-app .game-help-button {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    margin: 0 !important;
  }

  html.native-app #menu-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-self: end !important;
    transform: none !important;
    border-width: 1.5px !important;
  }

  html.native-app #menu-button span {
    width: 20px !important;
    height: 2px !important;
    margin: 0 !important;
  }

  /* Use the real action container. It is no longer fixed on short screens. */
  html.native-app .controls .actions {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 0.78fr 1.55fr !important;
    gap: 9px !important;
    width: calc(100% - 20px) !important;
    max-width: 340px !important;
    margin: 8px auto 10px !important;
    padding: 6px !important;
    transform: none !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(216,219,225,.9) !important;
    border-radius: 18px !important;
    background: rgba(247,248,251,.96) !important;
    box-shadow: 0 -5px 16px rgba(25,39,64,.08) !important;
  }

  html.native-app .controls .actions .action-button {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* Short phones: retain a comfortable right/top position without allowing
   the close button to dominate the dialog heading. */
@media (max-width: 390px) and (max-height: 720px) and (orientation: portrait) {
  html.native-app .panel-dialog .dialog-header {
    gap: 12px !important;
  }

  html.native-app .panel-dialog .dialog-header > .close-button {
    flex-basis: 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 23px !important;
  }
}