/* The phone layer. Loaded last. Every rule here is inside a touch or small-screen query, so the
   desktop layout does not move. It answers the iPhone audit of 2026-10-10; the matching script
   is js/phone.js. */

/* ---------- safe areas: the notch, the rounded corners, the home bar ---------- */
@media (max-width: 899px) {
  .top {
    padding-top: max(11px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
  }
  .nav { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .nav:has(button:nth-child(5)) { padding-left: max(4px, env(safe-area-inset-left)); padding-right: max(4px, env(safe-area-inset-right)); }
  .view { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}
@media (pointer: coarse) {
  #reveal { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  #game { padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  #inspect { padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
}

/* ---------- the sound switch, in the top bar where a thumb can find it ---------- */
.sound { display: none; }
@media (max-width: 899px) {
  .sound {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -8px -10px -8px -2px;
    border-radius: 50%; color: var(--muted); -webkit-tap-highlight-color: transparent;
  }
  .sound svg { width: 24px; height: 24px; }
  .sound:active { color: var(--gilt-hi); }
  .sound .sound-off, .sound[aria-pressed='true'] .sound-on { display: none; }
  .sound[aria-pressed='true'] .sound-off { display: block; }
}

/* ---------- things a finger does ---------- */
@media (pointer: coarse) {
  /* no double-tap zoom, no text selection or picture menu from a long press */
  html { touch-action: manipulation; }
  .card, .pack, .top, .btn, .link { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .card img, .pack img { pointer-events: none; -webkit-touch-callout: none; }

  /* every control is at least 44 px tall */
  .btn { min-height: 44px; }
  .link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; margin: 0 -10px; }
  .foot { gap: 6px 44px; } /* Start over keeps its distance from the sound switch */
  .game-quit { margin: 4px 0 0; padding: 0 22px; }

  /* the page behind a full-screen layer stays where it is */
  .overlay, .game-results, #inspect { overscroll-behavior: contain; }
  html:has(.overlay:not([hidden])), html:has(.overlay:not([hidden])) body { overflow: hidden; }

  /* a report taller than the screen starts at its top and scrolls, instead of losing its heading */
  .game-results { justify-content: flex-start; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .game-results > :first-child { margin-top: auto; }
  .game-results > :last-child { margin-bottom: auto; }

  /* a swipe that was too short to rip the pack */
  .pack.nope .pack-tilt { animation: pack-nope .4s ease-out; }
  .reveal-hint.pulse { animation: hint-pulse .5s ease-out; }

  /* shelf: the first tap on a pack picture picks it up, the second buys it */
  .shelf-item.armed .pack { transform: translateY(-.6em) scale(1.04); }
  .shelf-item.armed .btn { animation: arm-pulse .8s ease-in-out infinite; }
}
@keyframes pack-nope { 20% { transform: translateX(-4%) rotate(-2.5deg); } 50% { transform: translateX(3.5%) rotate(2deg); } 80% { transform: translateX(-1.5%) rotate(-1deg); } }
@keyframes hint-pulse { 30% { transform: scale(1.1); color: var(--gilt-hi); } }
@keyframes arm-pulse { 50% { transform: scale(1.07); filter: brightness(1.15); } }

/* ---------- small screens: print big enough to read ---------- */
@media (pointer: coarse) and (max-width: 560px) {
  .card-tier { font-size: max(1.05em, 10.5px); }
  .card-count, .card-new { font-size: max(.98em, 10px); }
  .card-price { font-size: max(2.25em, 15px); }
  .reveal-stamp { font-size: 10.5vw; } /* the widest stamp, Super rare, fits the screen */
}

/* ---------- held sideways ---------- */
/* The game is laid out for a phone held upright. Sideways there are about 340 px of height,
   which is not enough for a pack, three cards or the mini game, so it asks for a turn. */
.turn { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  html:not(.typing) .turn {
    position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 16px max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left)); text-align: center;
    background: var(--wall-deep); color: var(--cream);
  }
  .turn svg { width: 64px; height: 64px; color: var(--gilt-hi); animation: turn-me 2.4s var(--ease) infinite; }
  .turn strong { font-size: 1.5rem; font-weight: 700; color: var(--gilt-hi); }
  .turn span { max-width: 34ch; color: var(--muted); }
}
@keyframes turn-me { 0%, 25% { transform: rotate(90deg); } 60%, 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) {
  .turn svg, .shelf-item.armed .btn { animation: none; }
}