/* css/mobile.css - small-screen, landscape and motion overrides. ALWAYS the last stylesheet (SPEC section 2).
   Owner: WP-shell (SPEC section 14.4). */

/* narrow phones: the HUD second line uses the short form "2/3 ✦4"; below 360 css px the level name is hidden */
@media (max-width: 479px) {
  .hp-full { display: none; }
  .hp-short { display: inline-flex; }
  .hud { gap: 2px; padding-left: calc(6px + var(--sal)); padding-right: calc(6px + var(--sar)); }
  .hud-title { padding: 0 4px; }
  /* phones: the title column is only ~155-195 px wide. The moves chip drops the word "Moves" (its tally icon says it) and the best
     stars shrink, so pieces + moves + stars share one row; if they still do not fit, .hud-line2 wraps, never into the hint button */
  .hud-moves .hm-word { display: none; }
  .hud-line2 { column-gap: 6px; }
  .hud-best { gap: 0; }
  .hud-best .ic { width: 11px; height: 11px; }
  .title-modes .btn-mode { padding: 0 12px; }
}
/* below 420 px the title gets about 190 px: redo moves into the menu sheet (undo, hint and restart stay 44 px buttons) */
@media (max-width: 419px) {
  #hud-redo { display: none; }
  .btn-menu.menu-redo { display: flex; }
}
@media (max-width: 359px) {
  .hud-best { display: none; }              /* the stars row goes before the pieces numbers would be cut */
  .hud-line1 { font-size: 13.5px; }
  .head-title { font-size: 19px; }
  .btn-xl { font-size: 17px; }
  .tile-grid { gap: 8px; }
  .tile-num { font-size: 22px; }
  .ch-body { padding-right: 70px; }
  .res-star, .res-star .ic { width: 52px; height: 52px; }
  .res-row .btn { font-size: 12px; }
  .set-row.is-wide > :last-child { margin-left: 0; }
  .btn-mode { gap: 8px; padding: 0 10px; }
  .btn-mode .ic { width: 22px; height: 22px; }
  .btn-sub { font-size: 11px; }
  .sheet-body { padding-left: 14px; padding-right: 14px; }
}
@media (max-height: 600px) and (orientation: portrait) {
  .title-art { min-height: 80px; }
  .btn-xl { min-height: 54px; }
  .btn-mode { min-height: 56px; }
  .title-menu { gap: 8px; }
  .title-primary { gap: 8px; }
}

/* wide screens: calmer sheet (centered panel instead of a bottom sheet) */
@media (min-width: 700px) and (min-height: 560px) {
  .sheet {
    bottom: auto; top: 50%; border-radius: 28px; border-bottom: 1px solid var(--line-hi); padding-bottom: 0;
    transform: translate3d(0, -46%, 0) scale(.96); opacity: 0; transition: transform .34s var(--ease), opacity .24s ease;
  }
  .modal.is-open .sheet { transform: translate3d(0, -50%, 0); opacity: 1; }
  .res-card { margin-bottom: 32px; }
  .tile-grid { max-width: 560px; }
  .title-menu { width: 440px; }
}

/* desktop and tablets (integration): a larger play HUD title, and the best-stars sit next to the pieces line instead of
   drifting to the far right of a wide bar */
@media (min-width: 1000px) and (min-height: 700px) {
  .hud-title { flex: 0 1 auto; max-width: 50%; padding: 0 10px; }
  .hud-line1 { font-size: 19px; }
  .hud-line2 { justify-content: flex-start; gap: 14px; font-size: 14px; }
  .hud-best .ic { width: 15px; height: 15px; }
  .hud-title + * { margin-left: auto; }
}

/* very large screens: scale the title menu up so it does not look lost */
@media (min-width: 1600px) and (min-height: 900px) {
  .title-menu { width: 560px; gap: 16px; }
  .btn-xl { min-height: 72px; font-size: 22px; }
  .btn-mode { min-height: 78px; }
  .btn-mode .btn-label { font-size: 19px; }
  .btn-link { font-size: 18px; }
  .brand-line { font-size: 18px; }
  .title-chips { transform-origin: right top; transform: scale(1.4); }
}

/* landscape phones and short windows */
@media (orientation: landscape) and (max-height: 520px) {
  .screen-head { height: calc(var(--sat) + 52px); }
  .screen > .scroll { top: calc(var(--sat) + 50px); padding-top: 4px; }
  .levels-progress { margin-bottom: 8px; }
  .head-title { font-size: 19px; }
  .head-title-2 h2 { font-size: 17px; }
  .head-title-2 p { font-size: 12px; }
  /* title: art left, menu right */
  .screen-title.is-shown { display: grid; grid-template-columns: 1fr minmax(300px, 400px); grid-template-rows: auto 1fr; column-gap: 28px; align-items: center; }
  .screen-title::before { background: linear-gradient(270deg, rgba(4, 6, 16, .92) 0%, rgba(4, 6, 16, .7) 46%, rgba(4, 6, 16, 0) 72%); }
  .title-chips { grid-column: 2; grid-row: 1; }
  .title-art { grid-column: 1; grid-row: 1 / span 2; min-height: 0; align-self: stretch; }
  .title-menu { grid-column: 2; grid-row: 2; align-self: center; gap: 8px; width: 100%; }
  .title-primary { gap: 8px; }
  .btn-xl { min-height: 52px; font-size: 17px; }
  .btn-mode { min-height: 52px; }
  .btn-link { min-height: 44px; }
  .wm-a, .wm-b { font-size: clamp(34px, 9vw, 64px); }
  /* levels: 6 x 2 */
  .tile-grid { grid-template-columns: repeat(6, 1fr); max-width: 760px; gap: 8px; }
  .tile { aspect-ratio: auto; min-height: 98px; }
  .tile-num { font-size: 22px; }
  .chapter-list { max-width: 640px; }
  .chapter-card, .ch-body { min-height: 88px; }
  .ch-body { padding-top: 10px; padding-bottom: 10px; }
  .mode-card { margin-top: 4px; padding: 20px; }
  .about-card { padding: 20px; }
}

/* compact HUD: viewport height < 480 css px (SPEC 1.6): 44 px bar, second line merged into the title line */
html[data-compact="yes"] .hud { height: calc(44px + var(--sat)); }
html[data-compact="yes"] .hud-title { flex-direction: row; align-items: center; gap: 10px; }
html[data-compact="yes"] .hud-line1 { flex: 0 1 auto; display: block; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; }
html[data-compact="yes"] .hud-line2 { flex: 1 1 auto; justify-content: flex-start; font-size: 12px; }
html[data-compact="yes"] .hint-bubble { top: calc(var(--hud-bar) + 4px); }
html[data-compact="yes"] .toasts { top: calc(var(--sat) + 8px); }
html[data-compact="yes"] body[data-screen="play"] .toasts { top: calc(var(--hud-bar) + 4px); }
/* short landscape: toasts sit under the HUD at the right edge (over the tray strip), never over the board's top rows */
@media (orientation: landscape) and (max-height: 520px) {
  body[data-screen="play"] .toasts { left: auto; right: calc(10px + var(--sar)); top: calc(var(--hud-bar, 44px) + 6px); width: min(300px, 38vw); align-items: flex-end; padding: 0; }
  body[data-screen="play"] .toast { max-width: 100%; }
}
/* integration: on compact landscape the results card is one column on the right, over the tray, so the solved board
   stays in view (the old two-column card covered half the board) */
html[data-compact="yes"] .results.is-shown { justify-content: flex-end; align-items: center; }
html[data-compact="yes"] .results::before { top: var(--hud-bar, 44px); bottom: 0; left: auto; right: 0; width: 46%; height: auto; background: linear-gradient(270deg, rgba(3, 4, 12, .8), rgba(3, 4, 12, .45) 55%, rgba(3, 4, 12, 0)); }
html[data-compact="yes"] .res-card {
  width: min(100% - 24px, 312px); max-height: calc(var(--vh, 100vh) - var(--hud-bar, 44px) - 12px - var(--sab));
  margin: var(--hud-bar, 44px) calc(10px + var(--sar)) calc(var(--sab) + 6px) 0; padding: 12px 14px 12px; overflow-y: auto;
}
html[data-compact="yes"] .res-card > .res-banner { margin: -12px -14px 8px; }
html[data-compact="yes"] .res-title { margin: 0; font-size: 22px; }
html[data-compact="yes"] .res-stars { margin: 4px 0; }
html[data-compact="yes"] .res-star, html[data-compact="yes"] .res-star .ic { width: 38px; height: 38px; }
html[data-compact="yes"] .res-line { margin-top: 0; font-size: 13px; }
html[data-compact="yes"] #res-next { margin-top: 8px; min-height: 46px; }
html[data-compact="yes"] .res-row { margin-top: 8px; }
html[data-compact="yes"] .res-row .btn { min-height: 44px; font-size: 12px; padding: 4px 2px; }
html[data-compact="yes"] .sheet { max-height: 94%; }
html[data-compact="yes"] .menu-list { gap: 6px; padding-bottom: 12px; }
html[data-compact="yes"] .btn-menu { min-height: 46px; }
html[data-compact="yes"] .info-card { padding: 12px 16px 10px; display: grid; grid-template-columns: 150px 1fr; column-gap: 14px; text-align: left; width: min(100%, 560px); align-items: center; }
html[data-compact="yes"] .info-card .card-eyebrow { grid-column: 2; justify-self: start; }
html[data-compact="yes"] .info-card .card-demo { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
html[data-compact="yes"] .info-card .card-title, html[data-compact="yes"] .info-card .card-text, html[data-compact="yes"] .info-card .card-dismiss { grid-column: 2; }
html[data-compact="yes"] .info-card .card-demo[style*="none"] ~ * { grid-column: 1 / -1; }

/* reduced motion (SPEC 9.5: transitions become short cross-fades; nothing slides, springs or loops) */
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; }
html[data-motion="reduced"] .screen, html[data-motion="reduced"] .screen.is-leaving { transform: none; transition: opacity .12s linear; }
html[data-motion="reduced"] .sheet, html[data-motion="reduced"] .dialog, html[data-motion="reduced"] .info-card, html[data-motion="reduced"] .toast { transition: opacity .15s linear; }
html[data-motion="reduced"] .modal.is-open .sheet { transform: none; }
html[data-motion="reduced"] .sheet { transform: none; opacity: 0; }
html[data-motion="reduced"] .modal.is-open .sheet { opacity: 1; }
html[data-motion="reduced"] .res-card { transform: none; opacity: 0; transition: opacity .15s linear; }
html[data-motion="reduced"] .results.is-open .res-card { opacity: 1; }
html[data-motion="reduced"] .res-star.fly .ic:last-child { animation: none; opacity: 1; }
html[data-motion="reduced"] .btn-icon.is-pulse::after { animation: none; opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .screen { transform: none; }
}
@media print { body { display: none; } }