/* ============================================================
   ChatBase — 🟩 Daily Word (wordgame.js). Modal shell is beyond.css's .dg-*
   ============================================================ */
.wg-entry { background: linear-gradient(120deg, rgba(52,232,176,.2), rgba(255,209,102,.12)); border-color: rgba(52,232,176,.4); }
.wg-box { width: min(96vw, 860px); height: min(94vh, 760px); }
.wg-streak { flex: 1; text-align: right; font-size: 13px; font-weight: 700; color: #ffb443; }
.wg-main { flex: 1; display: flex; min-height: 0; }
.wg-play { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; min-width: 0; overflow-y: auto; }
.wg-grid { display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px; }
.wg-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wg-row.shake { animation: wg-shake .4s; }
@keyframes wg-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.wg-cell {
    width: clamp(44px, 11vw, 58px); aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,.12);
    font-size: clamp(22px, 5vw, 28px); font-weight: 800; text-transform: uppercase;
}
.wg-cell.filled { border-color: rgba(255,255,255,.35); animation: wg-pop .12s; }
@keyframes wg-pop { 50% { transform: scale(1.08); } }
.wg-cell.correct, .wg-cell.present, .wg-cell.absent { border-color: transparent; animation: wg-flip .5s both; }
.wg-cell.correct { background: #22a06b; }
.wg-cell.present { background: #c9a227; }
.wg-cell.absent { background: #3a3a44; }
@keyframes wg-flip { 0% { transform: rotateX(90deg); } 100% { transform: none; } }
.wg-msg { min-height: 24px; text-align: center; font-size: 15px; }
.wg-msg small { display: block; margin-top: 4px; color: var(--text-secondary, #a0a0b0); font-size: 12px; }
.wg-share { margin-left: 8px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.wg-kb { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 500px; }
.wg-kb-row { display: flex; justify-content: center; gap: 5px; }
.wg-key {
    flex: 1; max-width: 44px; height: 52px;
    border: 0; border-radius: 8px;
    background: rgba(255,255,255,.14); color: #fff;
    font: inherit; font-size: 15px; font-weight: 700; text-transform: uppercase;
    cursor: pointer;
}
.wg-key.wide { max-width: 70px; flex: 1.5; font-size: 12px; }
.wg-key.correct { background: #22a06b; }
.wg-key.present { background: #c9a227; }
.wg-key.absent { background: #2a2a32; color: rgba(255,255,255,.4); }
.wg-board { width: 240px; flex: 0 0 auto; padding: 16px; border-left: 1px solid var(--lg-rim-soft, rgba(255,255,255,.08)); overflow-y: auto; }
.wg-board h4 { margin: 0 0 10px; font-size: 14px; }
.wg-brow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 13px; }
.wg-brow.me { background: rgba(52,232,176,.12); }
.wg-bname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-btries { font-weight: 700; font-variant-numeric: tabular-nums; }
.wg-muted { font-size: 12.5px; color: var(--text-secondary, #a0a0b0); }

@media (max-width: 760px) {
    .wg-main { flex-direction: column; }
    .wg-board { width: auto; border-left: 0; border-top: 1px solid var(--lg-rim-soft, rgba(255,255,255,.08)); max-height: 160px; }
    .wg-key { height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    .wg-row.shake, .wg-cell.filled, .wg-cell.correct, .wg-cell.present, .wg-cell.absent { animation: none; }
}