/* 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}
}

/* Package 67D - TicTacToe Board Cell Alignment Fix
   Fixes desktop TicTacToe cells collapsing when empty.
   All 9 spaces now reserve the same button size before and after selection.
*/

.tic-board{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(96px,1fr))!important;
    gap:18px!important;
    width:100%!important;
    max-width:680px!important;
    margin:28px auto!important;
    align-items:stretch!important;
    justify-items:stretch!important;
}

.tic-board > form{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
}

.tic-cell{
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    height:132px!important;
    min-height:132px!important;
    max-height:132px!important;
    aspect-ratio:auto!important;
    margin:0!important;
    padding:0!important;
    border:1px solid rgba(20,30,60,.10)!important;
    border-radius:34px!important;
    background:linear-gradient(135deg,#fbfcff,#ffffff)!important;
    box-shadow:
        inset 0 0 0 1px rgba(20,30,60,.04),
        0 16px 34px rgba(20,30,60,.08)!important;
    color:#ff477e!important;
    font-size:4.4rem!important;
    font-weight:1000!important;
    line-height:1!important;
    text-align:center!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    transform:none!important;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease!important;
}

.tic-cell.o{
    color:#7b2cff!important;
}

.tic-cell:empty::before,
.tic-cell:not(:disabled):empty::before{
    content:""!important;
    display:block!important;
    width:26px!important;
    height:26px!important;
    border-radius:999px!important;
    border:2px solid rgba(20,30,60,.12)!important;
    background:#fff!important;
    box-shadow:0 6px 16px rgba(20,30,60,.05)!important;
}

.tic-cell:not(:disabled):hover{
    border-color:rgba(255,71,126,.32)!important;
    box-shadow:
        inset 0 0 0 1px rgba(255,71,126,.10),
        0 18px 42px rgba(255,71,126,.12)!important;
}

.tic-cell:disabled{
    opacity:1!important;
    cursor:default!important;
}

.tic-cell:not(:disabled){
    cursor:pointer!important;
}

/* Keep row/column spacing stable even after AJAX refresh */
.game-live-inner .tic-board,
.game-board-panel .tic-board{
    grid-auto-rows:132px!important;
}

/* Tablet */
@media(max-width:900px){
    .tic-board{
        max-width:520px!important;
        gap:14px!important;
    }
    .tic-cell,
    .game-live-inner .tic-board,
    .game-board-panel .tic-board{
        grid-auto-rows:112px!important;
    }
    .tic-cell{
        height:112px!important;
        min-height:112px!important;
        max-height:112px!important;
        border-radius:28px!important;
        font-size:3.8rem!important;
    }
}

/* Mobile */
@media(max-width:560px){
    .tic-board{
        grid-template-columns:repeat(3,minmax(72px,1fr))!important;
        gap:10px!important;
        max-width:360px!important;
        margin:18px auto!important;
    }
    .tic-cell,
    .game-live-inner .tic-board,
    .game-board-panel .tic-board{
        grid-auto-rows:84px!important;
    }
    .tic-cell{
        height:84px!important;
        min-height:84px!important;
        max-height:84px!important;
        border-radius:22px!important;
        font-size:3rem!important;
    }
    .tic-cell:empty::before{
        width:20px!important;
        height:20px!important;
    }
}