/* Jourades board (React island) */

.game-app .jo-wrap { display: flex; flex-direction: column; gap: .8rem; height: 100%; color: var(--text); }
.game-app .jo-head { display: flex; align-items: baseline; gap: .8rem; }
.game-app .jo-title { font-size: 1.3rem; margin: 0; flex: 1; }
.game-app .jo-progress { color: var(--muted); font-variant-numeric: tabular-nums; }
.game-app .jo-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: .6rem .8rem; font-size: .9rem; display: flex; flex-direction: column; gap: .25rem; }
.game-app .jo-rules { color: var(--muted); }
.game-app .jo-target { align-items: center; text-align: center; gap: .4rem; }
.game-app .jo-role { color: var(--muted); font-size: .85rem; }
.game-app .jo-word { font-size: 1.9rem; font-weight: 700; }
.game-app .jo-forbidden { color: #f4a3a3; font-size: .85rem; }
.game-app .jo-cardrules { color: var(--muted); font-size: .82rem; }
.game-app .jo-guessrole { padding: .3rem 0; }
.game-app .jo-log { flex: 1; min-height: 150px; overflow-y: auto; display: flex; flex-direction: column;
  gap: .4rem; padding: .3rem 0; }
.game-app .jo-msg { max-width: 85%; padding: .5rem .7rem; border-radius: 10px; font-size: .95rem; white-space: pre-wrap; }
.game-app .jo-msg.you { align-self: flex-end; background: rgba(143,182,217,.14); border: 1px solid rgba(143,182,217,.25); }
.game-app .jo-msg.them { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); }
.game-app .jo-msg.ref { align-self: center; background: rgba(234,179,8,.14); border: 1px solid rgba(234,179,8,.4); font-size: .88rem; }
.game-app .jo-msg.sys { align-self: center; color: var(--muted); font-size: .85rem; }
.game-app .jo-tag { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-right: .4rem; }
.game-app .jo-tag.ref { color: #eab308; }
.game-app .jo-input { display: flex; gap: .5rem; }
.game-app .jo-input input { flex: 1; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: .55rem .75rem; }
.game-app .jo-input button { font: inherit; padding: .55rem 1rem; border: none; border-radius: 8px;
  background: var(--accent); color: #0b0e12; font-weight: 600; cursor: pointer; }
.game-app .jo-ended { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; }
.game-app .jo-done { text-align: center; padding: 2rem; }