/* Progressive widening of the content column for tablets and desktops.
   Inner elements (game grids, hand rows...) already cap their own width,
   so widening .frame just gives them more breathing room, it never
   stretches them awkwardly. */
@media (min-width: 700px){
  .frame{ max-width: 560px; }
}
@media (min-width: 1000px){
  .frame{ max-width: 680px; }
  body{ font-size: 1.02rem; }
}

/* Home screen: let the "En groupe" game cards use the extra width as a
   2-column grid instead of a long single-column stack. */
@media (min-width: 700px){
  .group-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    align-items: start;
  }
  .group-grid .card{ margin-bottom: 0; }
}

/* Mouse hover feedback — gated on (hover:hover) so touchscreens never get
   a "stuck" hover state after a tap. */
@media (hover: hover) and (pointer: fine){
  button:not(:disabled):hover{ filter: brightness(1.08); cursor: pointer; }
  .btn-ghost:hover{ background: rgba(255,255,255,.08); border-color: rgba(243,239,228,.32); }
  .card:hover{ border-color: rgba(243,239,228,.22); }
  .recent-row:hover{ background: rgba(255,255,255,.09); border-color: rgba(243,239,228,.32); }
  .avatar-opt:hover{ border-color: var(--butter, #e9c46a); }
  .chip:hover{ filter: brightness(1.1); }
  .joined-chip:hover, .opp-chip:hover, .sb-chip:hover{ border-color: rgba(243,239,228,.32); }
  .group-grid .card:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.22); transition: transform .15s ease, box-shadow .15s ease; }
}

/* Keyboard focus visibility — only shows for keyboard nav, not mouse clicks. */
button:focus-visible,
input:focus-visible,
a:focus-visible,
.avatar-opt:focus-visible,
.recent-row:focus-visible,
.chip:focus-visible{
  outline: 2px solid var(--butter, #e9c46a);
  outline-offset: 2px;
}