/* Package 25A: Mobile conversation + live games + Word Tiles */

/* Conversation header mobile fix */
@media (max-width: 640px){
  .chat-shell-v2 .chat-head,
  .chat-shell .chat-head{
    display:grid!important;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:10px 12px;
  }
  .chat-shell-v2 .chat-head > .btn,
  .chat-shell .chat-head > .btn{
    grid-column:1 / 2;
    grid-row:1;
    width:auto;
    white-space:nowrap;
  }
  .chat-shell-v2 .chat-person,
  .chat-shell .chat-person{
    grid-column:2 / 3;
    grid-row:1;
    min-width:0;
    overflow:hidden;
  }
  .chat-shell-v2 .chat-person strong,
  .chat-shell .chat-person strong{
    display:block;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .chat-shell-v2 .chat-head-actions,
  .chat-shell .chat-head-actions{
    grid-column:1 / -1;
    grid-row:2;
    display:flex!important;
    gap:10px;
    width:100%;
    padding-top:4px;
    position:relative;
    z-index:2;
  }
  .chat-shell-v2 .chat-head-actions .btn,
  .chat-shell .chat-head-actions .btn{
    flex:1 1 0;
    text-align:center;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
  }
}

/* Live game flash */
.game-live-flash{
  min-height:0;
  margin:0 0 12px;
  border-radius:14px;
  font-weight:800;
}
.game-live-flash.success,
.game-live-flash.error{
  padding:12px 14px;
}
.game-live-flash.success{background:#ecfdf5;color:#166534;border:1px solid #86efac}
.game-live-flash.error{background:#fef2f2;color:#991b1b;border:1px solid #fca5a5}

.turn-card{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.1);
  background:#f8fafc;
  margin:14px 0;
}
.turn-card.your-turn{background:#ecfdf5;border-color:#86efac;color:#166534}
.turn-card.their-turn{background:#fffbeb;border-color:#fde68a;color:#92400e}
.turn-card.complete{background:#eef2ff;border-color:#c7d2fe;color:#3730a3}

/* Word Tiles */
.word-tiles-choice{border-color:rgba(124,58,237,.28)!important;background:linear-gradient(135deg,#fff,#f5f3ff)}
.word-tiles-board{
  display:grid;
  gap:8px;
  max-width:520px;
  margin:16px auto;
}
.word-guess-row{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:10px;
  align-items:center;
}
.word-guess-name{
  font-size:.82rem;
  color:#64748b;
  font-weight:800;
  text-align:right;
}
.word-tiles{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
}
.word-tile{
  aspect-ratio:1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#f1f5f9;
  border:1px solid rgba(15,23,42,.1);
  font-weight:900;
  color:#0f172a;
  text-transform:uppercase;
  min-height:42px;
}
.word-tile.correct{background:#16a34a;color:#fff;border-color:#15803d}
.word-tile.present{background:#f59e0b;color:#fff;border-color:#d97706}
.word-tile.miss{background:#64748b;color:#fff;border-color:#475569}
.word-tile-key{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin:12px 0 16px;
  color:#64748b;
  font-weight:700;
  font-size:.9rem;
}
.word-tile-key span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.word-tile-key .word-tile{
  width:26px;
  height:26px;
  min-height:26px;
  border-radius:7px;
  font-size:.8rem;
}
.word-guess-form{
  display:flex;
  gap:10px;
  max-width:520px;
  margin:0 auto;
}
.word-guess-form input{
  text-transform:uppercase;
  text-align:center;
  font-size:1.3rem;
  letter-spacing:.25em;
  font-weight:900;
}
@media(max-width:560px){
  .word-guess-row{grid-template-columns:1fr}
  .word-guess-name{text-align:left}
  .word-guess-form{display:grid}
}

/* Game mobile polish */
@media(max-width:760px){
  .game-room-grid{grid-template-columns:1fr!important}
  .game-action-row{display:flex;flex-wrap:wrap;gap:10px}
  .game-action-row form,.game-action-row .btn{width:100%}
  .tic-cell{min-height:72px}
}