/*
 * Wordzule desktop flow optimization (October 27 2026).
 * Only 761px+ receives the new editorial grid; phone layout retains
 * the original aside/card DOM, game controls, and responsive behavior.
 */
@media (min-width:761px) {
  .game-layout {
    display:grid;
    grid-template-columns:minmax(0,1.75fr) minmax(270px,1fr);
    grid-template-rows:auto auto auto auto;
    column-gap:clamp(16px,1.8vw,26px);
    row-gap:clamp(13px,1.5vw,20px);
    align-items:stretch;
    margin-bottom:0;
  }
  .game-layout>.play-column {
    grid-column:1;
    grid-row:1 / span 2;
    min-width:0;
    align-self:start;
  }
  /*
   * The aside's children join the parent grid at desktop sizes.
   * The aside wrapper still exists for mobile, so IDs/events,
   * screen-reader document order and game logic remain unchanged.
   */
  .game-layout>.aside {display:contents}
  .game-layout .today-card {
    grid-column:2;
    grid-row:1;
    min-width:0;
    align-self:stretch;
  }
  .game-layout #wz-trivia {
    grid-column:2;
    grid-row:2;
    min-width:0;
    align-self:stretch;
  }
  .game-layout .invite-card {
    grid-column:1;
    grid-row:3;
    min-width:0;
    padding:clamp(16px,2vw,24px);
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .game-layout .community-card {
    grid-column:2;
    grid-row:3;
    min-width:0;
    padding:clamp(16px,2vw,24px);
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .game-layout .invite-card h3,
  .game-layout .community-card h3 {
    font-size:clamp(22px,2.4vw,30px);
    line-height:1.14;
    margin:8px 0;
  }
  .game-layout .invite-card p,
  .game-layout .community-card p {
    font-size:12px;
    line-height:1.55;
    max-width:58ch;
    margin:7px 0 12px;
  }
  .game-layout .community-card .aside-icon {
    font-size:25px;
    line-height:1;
    margin:8px 0 0;
  }
  .game-layout .invite-card .aside-chat-open,
  .game-layout .community-card .aside-chat-open {
    align-self:flex-start;
    width:auto;
    max-width:100%;
    margin-top:7px;
    padding:10px 16px;
    font-size:11px;
  }
  .game-layout .how-mini {
    grid-column:1 / -1;
    grid-row:4;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    column-gap:18px;
    row-gap:8px;
    border-top:1px solid #365566;
    border-bottom:1px solid #365566;
    padding:12px 15px;
    min-width:0;
    margin:0;
  }
  .game-layout .how-mini>span {
    flex:0 0 auto;
    white-space:nowrap;
  }
  .game-layout .how-mini p {margin:0;white-space:normal}
  .game-layout .how-mini button{white-space:nowrap}
  /* Keep follow-on content snug against the last game section. */
  .achievements {margin-top:clamp(15px,1.7vw,24px)}
  .five-community {margin-top:clamp(15px,1.8vw,25px)}
}
@media (min-width:1100px) {
  .game-layout .board {
    width:min(100%,354px);
    min-height:320px;
  }
  .game-layout .keyboard {width:min(100%,648px)}
  .game-layout .key {height:48px}
}
@media (min-width:1650px) {
  /* Slightly wider on ultrawide monitors; no unreadably broad game panel. */
  .page {width:min(1480px,calc(100% - 72px))}
  .game-layout {grid-template-columns:minmax(0,1.8fr) minmax(330px,1fr)}
}
@media (min-width:761px) and (max-width:990px) {
  .game-layout {
    grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);
    column-gap:15px;
    row-gap:13px;
  }
  .game-layout .today-card,.game-layout #wz-trivia {padding:16px}
  .game-layout .invite-card,
  .game-layout .community-card {padding:16px}
  .game-layout .invite-card h3,
  .game-layout .community-card h3 {font-size:23px}
  .game-layout .invite-card p,
  .game-layout .community-card p {font-size:11px}
  .game-layout .how-mini {gap:8px}
}
@media (max-width:760px) {
  /* Preserve previous mobile card order and two-column arrangement. */
  .game-layout>.aside{display:grid}
  .game-layout>.play-column{min-width:0}
}
/* Respect light-theme dividers as well. */
html[data-effective-theme="light"] .game-layout .how-mini {
  border-color:#cbd9d8;
}