:root {
  --muted: #56685e;
  --red: #b63f3b;
}

.connection,
.entry-tab,
.entry-foot,
.footer,
.intro > p,
.lobby-player small,
.lobby-player.empty,
.room-meta,
.code-button span,
.deck-counter small,
.player-info small,
.book-empty,
.hand-count,
  .ask-prompt > span,
.host-controls p,
.finished p {
  color: var(--muted);
}

.avatar {
  color: #1c674f;
}

.playing-card.red-suit {
  color: var(--red);
}

.game-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:17px}
.mode-button{min-height:72px;display:flex;align-items:center;gap:10px;text-align:left;padding:10px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
.mode-button.active{border:2px solid var(--green);background:#edf6ef}
.mode-icon{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#dceee2;color:var(--green);font-size:22px}
.family-icon{font-size:15px;letter-spacing:-4px;padding-right:4px}
.mode-button strong,.mode-button small{display:block}
.mode-button strong{font-size:11px;line-height:1.25}
.mode-button small{margin-top:4px;color:var(--muted);font-size:9px;line-height:1.25}
.turn-banner{display:flex;flex-direction:column;gap:5px}
.turn-banner strong{color:var(--green);font-weight:600}
.turn-banner small{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:600 13px/1.4 system-ui,sans-serif;color:var(--muted)}
.go-fish-notice-fish{position:relative;display:inline-grid;flex:0 0 112px;width:112px;height:48px;place-items:center}
.go-fish-notice-fish svg{display:block;width:100%;height:100%}
.go-fish-notice-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:13px;font-weight:800;white-space:nowrap;text-shadow:0 1px 2px #123d30}
.computer-avatar{background:#e9e9d7;color:#75652c;font-size:21px}
.player-seat.target-choice{width:100%;text-align:left;color:var(--ink);font:inherit;background:#fff;cursor:pointer;min-height:80px}
.player-seat.target-choice:hover,.player-seat.target-choice:focus-visible{border-color:var(--green);outline:2px solid #66aa89;outline-offset:2px}
.player-seat.target-choice.selected{border:2px solid var(--green);background:#edf6ef}
.player-seat.target-choice:disabled{cursor:default}
.player-seat{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:6px 8px}
.player-seat>.avatar{grid-column:1;grid-row:1}
.player-seat>.player-info{grid-column:2;grid-row:1}
.player-seat>.seat-count{grid-column:3;grid-row:1;white-space:nowrap}
.player-books{grid-column:1/-1;display:flex;align-items:center;gap:6px;min-width:0;padding-top:6px;border-top:1px solid #e5ebe4}
.books-count{flex:none;color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap}
.player-book-ranks{display:flex;flex-wrap:wrap;gap:3px}
.player-book-ranks span{display:grid;place-items:center;min-width:20px;aspect-ratio:1;border:1px solid #bcd9c4;border-radius:3px;background:#e6f2e9;color:#1d5e43;font-size:11px;font-weight:800}
.response-callout{display:grid;justify-items:center;gap:8px;margin:16px 0 4px;padding:17px 14px 18px;border:2px solid #d6a13a;border-radius:8px;background:#fff8e7;text-align:center}
.response-callout[hidden],.go-fish-button[hidden]{display:none}
.response-asker{margin:0;color:var(--ink);font-size:22px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.response-rank{display:flex;align-items:baseline;justify-content:center;gap:8px;color:#815900}
.response-rank span{font-size:16px;font-weight:700}
.response-rank strong{font-family:Fraunces,Georgia,serif;font-size:56px;line-height:1;color:var(--green-dark)}
.response-instruction{max-width:35em;margin:0;color:var(--ink);font-size:17px;font-weight:600;line-height:1.35}
.go-fish-button{width:min(100%,360px);min-height:88px;padding:0;border:2px solid #bb8420;border-radius:8px;background:#fff3d2;cursor:pointer;touch-action:manipulation}
.go-fish-button:hover{background:#ffedbf;border-color:#9a6a13}
.go-fish-button:active{transform:translateY(1px)}
.go-fish-button:focus-visible{outline:3px solid #b78216;outline-offset:3px}
.go-fish-button:disabled{opacity:1;cursor:wait}
.go-fish-art{position:relative;display:grid;place-items:center;width:100%;height:84px}
.go-fish-art svg{display:block;width:100%;height:100%}
.go-fish-label{position:absolute;left:50%;top:50%;max-width:calc(100% - 24px);transform:translate(-50%,-50%);color:#fff;font-size:18px;font-weight:800;line-height:1.1;white-space:normal;text-shadow:0 1px 2px #123d30}
.player-info strong{font-size:14px}
.player-info small{font-size:12px}
.seat-count{font-size:14px}
.hand-count{font-size:14px}
.lobby-player strong{font-size:14px}
.lobby-player small,.deck-counter small,.book-empty{font-size:12px}
.book-chip{font-size:13px}
.room-meta{font-size:13px}
.section-label{font-size:11px;letter-spacing:0}
.turn-banner small{font-size:15px;line-height:1.45}
.entry-tab{font-size:15px}
label{font-size:14px}
.mode-button strong{font-size:15px}
.mode-button small{font-size:12px}
.ask-prompt>span{font-size:15px}
.ask-preview{font-size:22px}
.playing-card{padding:0;overflow:hidden;cursor:pointer;touch-action:manipulation}
.playing-card:focus-visible{outline:3px solid #66aa89;outline-offset:2px}
.playing-card.offered-card{outline:3px solid #d8aa48;outline-offset:2px;background:#fff5dc;cursor:pointer}
.playing-card.offered-card:focus-visible{outline-color:#b78216}
.ask-controls{align-items:center;gap:14px}
.ask-prompt{flex:1;min-width:180px}
.ask-prompt>span{display:block;font-size:15px;font-weight:700;color:var(--green)}
.ask-preview{margin-top:5px;font-family:Fraunces,Georgia,serif;font-size:22px;line-height:1.2;color:var(--ink)}
.ask-button{height:56px;min-width:160px;justify-content:center;font-size:16px;letter-spacing:0;color:#fff;box-shadow:0 3px 0 #084b3e}
.ask-button span{color:inherit}
.ask-button:disabled{opacity:1;background:#e1ebe2;color:#29483b;border:2px solid #8da99a;box-shadow:0 3px 0 #b5c9b9}
.ask-button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #084b3e}
@media(max-width:760px){.game-mode{grid-template-columns:1fr}.mode-button{min-height:62px}.ask-prompt{min-width:100%}.ask-button{min-width:100%;height:58px}}
@media(max-width:760px){.mode-button{min-height:62px}.ask-prompt{min-width:100%}.ask-button{min-width:100%;height:58px}.response-callout{margin-top:12px;padding:15px 11px 16px}.response-asker{font-size:22px}.response-instruction{font-size:17px}.go-fish-button{width:100%;min-height:84px}.go-fish-art{height:80px}.player-info strong{font-size:15px}.player-info small{font-size:13px}.seat-count,.hand-count{font-size:15px}.turn-banner{font-size:22px}.turn-banner small{font-size:15px}.section-label{font-size:12px}}
@media(max-width:390px){.response-callout{padding:13px 9px 14px}.response-asker{font-size:20px}.response-rank strong{font-size:52px}.response-instruction{font-size:16px}.go-fish-art{height:76px}.go-fish-label{font-size:16px}.player-info strong{font-size:14px}.seat-count{font-size:14px}.ask-preview{font-size:20px}}
.table-chat{margin-top:24px;padding:22px 0;border-top:1px solid #dce4dc}
.chat-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.chat-heading h2{margin:6px 0 0;font-family:Fraunces,Georgia,serif;font-size:22px;font-weight:500}
.chat-heading p{margin:0;color:var(--muted);font-size:13px}
.chat-heading p.chat-error{color:#a52f2c;font-weight:700}
.chat-feed{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow:auto;list-style:none;margin:16px 0;padding:0}
.chat-feed[hidden],.chat-reaction-pop[hidden],.action-pop[hidden]{display:none}
.chat-reaction-pop,.action-pop{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:rgb(22 42 33 / 32%);pointer-events:none;opacity:0;transition:opacity .4s ease}
.chat-reaction-pop.is-visible,.action-pop.is-visible{opacity:1}
.chat-reaction-pop.is-leaving,.action-pop.is-leaving{opacity:0}
.chat-reaction-card,.action-pop-card{display:flex;max-width:min(680px,calc(100vw - 32px));align-items:center;justify-content:center;flex-direction:column;gap:8px;padding:28px 38px;border:3px solid #176b53;border-radius:12px;background:#fffefa;color:#183a31;text-align:center;box-shadow:0 12px 42px rgb(12 35 27 / 30%);transform:scale(.9);transition:transform .25s ease}
.chat-reaction-pop.is-visible .chat-reaction-card,.action-pop.is-visible .action-pop-card{transform:scale(1)}
.chat-reaction-emoji,.action-pop-emoji{font-size:80px;line-height:1}
.chat-reaction-sender,.action-pop-sender{font-size:27px;font-weight:700;color:#176b53}
.chat-reaction-phrase,.action-pop-title{font-size:54px;line-height:1.05;overflow-wrap:anywhere}
.action-pop-detail{color:#264a3a;font-size:28px;font-weight:700}
.chat-message{display:flex;align-items:flex-start;gap:8px}
.chat-message.own{flex-direction:row-reverse}
.chat-bubble{max-width:min(80%,560px);padding:9px 12px;border:1px solid #dce6dc;border-radius:6px;background:#f0f5ec;color:#203c32;overflow-wrap:anywhere}
.chat-message.own .chat-bubble{border-color:#a9d1ba;background:#e2f2e6}
.chat-sender{display:block;margin-bottom:3px;color:#496458;font-size:12px;font-weight:700}
.chat-copy{display:flex;align-items:center;gap:7px;font-size:15px;line-height:1.35}
.chat-copy-emoji{font-size:20px}
.chat-time{align-self:flex-end;color:#64766d;font-size:10px;white-space:nowrap}
.chat-reactions{display:flex;gap:8px;overflow-x:auto;padding:3px 2px 8px;scrollbar-width:thin}
.chat-reaction{flex:0 0 auto;min-height:48px;padding:7px 11px;border:1px solid #c8d9ca;border-radius:6px;background:#fff;color:#203c32;font-weight:700;touch-action:manipulation}
.chat-reaction span{margin-right:6px;font-size:19px;vertical-align:-2px}
.chat-reaction:hover,.chat-reaction:focus-visible{border-color:#397a5f;background:#edf6ef;outline:2px solid #6aa789;outline-offset:2px}
.chat-reaction:disabled{opacity:.55}
.chat-unlock-button{margin-top:8px}
.chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;max-width:600px;margin-top:12px}
.chat-form label{grid-column:1/-1;margin:0}
.chat-form input{min-width:0;height:48px}
.chat-form .primary-button{min-width:100px;height:48px;justify-content:center}
.chat-form .error-text{grid-column:1/-1;min-height:0;margin:0}
.chat-compose{max-width:none}
.chat-compose .primary-button{min-width:120px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){.table-chat{margin-top:20px;padding-top:18px}.chat-heading{align-items:flex-start;flex-direction:column;gap:7px}.chat-heading h2{font-size:20px}.chat-heading p{font-size:14px}.chat-feed{max-height:200px}.chat-bubble{max-width:calc(100% - 58px)}.chat-compose .primary-button{min-width:92px}.chat-reaction-card,.action-pop-card{padding:24px 20px}}
@media(max-width:760px){.chat-reaction-emoji,.action-pop-emoji{font-size:60px}.chat-reaction-sender,.action-pop-sender{font-size:20px}.chat-reaction-phrase,.action-pop-title{font-size:36px}.action-pop-detail{font-size:21px}}
@media(min-width:1100px){.chat-reaction-emoji,.action-pop-emoji{font-size:92px}.chat-reaction-sender,.action-pop-sender{font-size:30px}.chat-reaction-phrase,.action-pop-title{font-size:60px}.action-pop-detail{font-size:32px}}
@media(prefers-reduced-motion:reduce){.chat-reaction-pop,.chat-reaction-card,.action-pop,.action-pop-card{transition:none}}