/* Durak — mobile touch layer (Issue #10, v0.12 "Mobile Friendly").
   Loaded after app.css; purely additive so both files can evolve in
   parallel. Goals:
   1. >= 44x44px touch targets on every playable element.
   2. Action buttons (Aufnehmen / Passen / Trumpf tauschen) as a sticky
      bottom bar on small screens, clear of the home-indicator safe area.
   3. Explicit tap feedback (:active / aria-busy / htmx request classes)
      instead of hover-only states. */

/* ---------- 1. touch target sizes ---------- */

/* All buttons: WCAG 2.5.5 minimum target size. */
.btn,
.hints-toggle,
.theme-toggle,
.lang-toggle {
  min-height: 44px;
  min-width: 44px;
}

/* Hand cards keep their visual size; only the *tap box* grows to 44px.
   Card height is always >= width * 1.42, so width is the only limit and
   is enforced here; the fanned overlap is fixed per breakpoint below. */
.hand .card-btn {
  min-width: 44px;
}

/* ---------- 2. tap ergonomics (no hover dependency, no 300ms delay) ---------- */

button,
a,
summary {
  touch-action: manipulation; /* removes double-tap-zoom / 300ms delay */
}

.btn,
.hints-toggle,
.theme-toggle,
.lang-toggle,
.hand .card-btn {
  -webkit-tap-highlight-color: transparent; /* our own :active states below */
  -webkit-user-select: none;
  user-select: none;
}

/* Hover lifts/brightens are for precise pointers only — on touch devices
   they tend to "stick" after a tap (cards staying lifted). Reset app.css.
   Kept *above* the :active rules on purpose: where a touch browser applies
   hover and active at once, the press feedback must win. */
@media (hover: none), (pointer: coarse) {
  .btn:hover,
  .hand .card-btn:hover {
    transform: none;
    filter: none;
  }
  .hints-toggle:hover,
  .theme-toggle:hover,
  .lang-toggle:hover {
    color: var(--ink-dim);
    border-color: var(--panel-line);
  }
}

/* Clear press feedback — works with fingers, not just mice. */
.btn:active {
  transform: scale(0.96);
  filter: brightness(1.25);
}
.hints-toggle:active,
.theme-toggle:active,
.lang-toggle:active {
  transform: scale(0.95);
  border-color: var(--gold);
  color: var(--ink);
}
.hand .card-btn:not(:disabled):active {
  transform: translateY(4px) scale(0.97);
  z-index: 3;
}
.hand .card-btn:not(:disabled):active .card {
  box-shadow: 0 0 0 3px var(--gold), var(--shadow);
  filter: brightness(1.1);
}

/* Ongoing-request feedback. htmx 1.x sets .htmx-request + aria-busy on the
   triggering element, htmx 2.x uses .htmx-requesting — style all of them. */
.btn:is(.htmx-request, .htmx-requesting, [aria-busy="true"]),
.hand .card-btn:is(.htmx-request, .htmx-requesting, [aria-busy="true"]) {
  transform: scale(0.97);
  cursor: progress;
  animation: tap-busy 0.7s ease-in-out infinite;
}
.hand .card-btn:is(.htmx-request, .htmx-requesting, [aria-busy="true"]) .card {
  box-shadow: 0 0 0 3px var(--accent), var(--shadow);
}
@keyframes tap-busy {
  50% { filter: brightness(1.35); }
}

/* The aria-pressed state of the "Hinweise" toggle must be visible without hover. */
.hints-toggle[aria-pressed="false"] {
  color: var(--ink-dim);
  border-style: dashed;
  opacity: 0.7;
}

/* ---------- 3. sticky bottom action bar + full-hand reachability ---------- */

@media (max-width: 760px) {
  /* Aufnehmen / Passen / Trumpf tauschen ride the bottom edge so they stay
     inside thumb reach; the table content scrolls behind them. */
  .game .actions.has-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40; /* below #flash (50) */
    margin: 0;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
    background: rgba(9, 32, 21, 0.94);
    border-top: 1px solid var(--panel-line);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .game .actions.has-actions .btn {
    flex: 1 1 auto;
    min-height: 48px;
    min-width: 0;
    padding-inline: 0.8rem;
    font-size: 0.95rem;
  }

  /* Keep the page scrollable so nothing hides permanently behind the bar. */
  main {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  }

  /* Fanned hand: leave at least 44px of every card uncovered so each one
     keeps its own collision-free 44px-wide tap column. */
  .hand .card-btn {
    margin-left: calc(-1 * max(var(--card-w) - 44px, 4px));
  }

  /* A big hand may exceed the screen width — wrap it instead of pushing
     cards off-screen (unreachable for a thumb would be the alternative). */
  .hand {
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }
}