/* The Chameleon: a deep leaf-green page, a lime accent, the topic card as cream cells with ink words, your word ringed
   in your seat colour, the secret in gold at the reveal. Rounded type (Fredoka for display, Nunito to read). The theme
   block swaps the shared tokens while the game is on screen (html.theme-chameleon); the rest is this game's own pieces,
   scoped under .ch-* so nothing leaks into the other games' pages. */
html.theme-chameleon {
    color-scheme: dark;
    --bg: #15331f;
    --panel: #1d4429;
    --panel-2: #245233;
    --panel-3: #2c603d;
    --line: #3b7a4f;
    --text: #effbe6;
    --muted: #a9cdb0;
    --accent: #a3e635;
    --accent-2: #c5f36a;
    --accent-dark: #6fa81b;
    --accent-text: #15331f;
    --parch: #f6f1dc;
    --parch-2: #e8dfbd;
    --parch-ink: #22301f;
    --danger: #ff6b5a;
    --ok: #a3e635;
    --shadow: 0 10px 30px rgba(0, 20, 5, .45);
    --display: "Fredoka", "Nunito", "Segoe UI", sans-serif;
    --body: "Nunito", "Segoe UI", system-ui, sans-serif;
    --ch-cream: #f6f1dc;
    --ch-cream-2: #ece4c4;
    --ch-ink: #22301f;
    --ch-gold: #f5c84c;
    --ch-gold-dark: #b8860b;
    --ch-red: #e5484d;
}
html.theme-chameleon body {
    background:
        radial-gradient(ellipse at 20% -10%, rgba(163, 230, 53, .14), transparent 55%),
        radial-gradient(ellipse at 110% 110%, rgba(30, 120, 60, .35), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}
html.theme-chameleon .topbar .round { color: var(--accent-2); font-weight: 600; }
html.theme-chameleon .btn { border-radius: 14px; font-weight: 800; }
html.theme-chameleon .btn.primary { box-shadow: 0 4px 0 var(--accent-dark); border-color: var(--accent-dark); }
html.theme-chameleon .btn.primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-dark); }
html.theme-chameleon .card { border-radius: 18px; }
html.theme-chameleon .sheet { border-radius: 22px 22px 0 0; }
html.theme-chameleon .sheet-backdrop.see-through { background: transparent; }
html.theme-chameleon .pill.brewing { background: var(--accent); color: var(--accent-text); border-color: var(--accent-dark); }
html.theme-chameleon .standings li.place-1 { color: var(--accent-2); }
@media (min-width: 700px) { html.theme-chameleon .sheet { border-radius: 22px; } }

/* ---- the game page: nothing scrolls during a round */
.ch-page.game-page { padding-top: .45rem; }
.page.ch-page.with-fabs { padding-bottom: 5.6rem; }
.ch-page .topbar { margin-bottom: .4rem; }
.ch-page .topbar .round { font-size: 1.2rem; }

/* ---- the chips: one row up to five, two rows from six, every cell the same width */
.ch-chips { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: .3rem; margin-bottom: .45rem; }
.ch-chip {
    position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center;
    gap: 0 .2rem; padding: .28rem .4rem .3rem; border-radius: 12px; background: var(--panel); border: 2px solid transparent;
    border-top: 3px solid var(--cauldron); font-size: .82rem; line-height: 1.15;
}
.ch-chip .name { display: flex; align-items: center; gap: .2rem; min-width: 0; grid-column: 1 / -1; }
.ch-chip .name .ico.seat { width: 1rem; height: 1rem; flex: none; color: var(--cauldron); --bg: var(--panel); }
.ch-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.ch-chip .score { font-family: var(--display); font-size: 1.05rem; color: var(--accent-2); }
.ch-chip .mark { display: flex; align-items: center; justify-content: flex-end; gap: .2rem; min-height: 1.1rem; }
.ch-chip .mark .ico { width: 1rem; height: 1rem; }
.ch-chip .mark .said { color: var(--muted); --bg: var(--panel); }
.ch-chip .mark .voted { color: var(--accent); }
.ch-chip .votes { display: inline-flex; align-items: center; gap: .2rem; font-weight: 800; color: var(--ch-ink); background: var(--ch-cream); border-radius: 999px; padding: 0 .35rem; font-size: .8rem; }
.ch-chip .votes .dots { display: inline-flex; gap: 1px; }
.ch-chip .votes .dots i { width: .4rem; height: .4rem; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.ch-chip.me { background: var(--panel-2); }
.ch-chip.wait { border-color: var(--cauldron); border-style: dashed; animation: ch-wait 1.6s ease-in-out infinite; }
@keyframes ch-wait { 50% { border-color: transparent; } }
.ch-chip.accused { border-color: var(--ch-gold); border-style: solid; animation: none; }
.ch-chip.cham { background: color-mix(in srgb, var(--cauldron) 30%, var(--panel)); }
.ch-chip.spot { box-shadow: 0 0 0 2px var(--accent); }
.ch-chip .badge { position: absolute; top: -.45rem; right: -.25rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); --bg: var(--accent); }
.ch-chip .badge .ico { width: 1rem; height: 1rem; }
.ch-chips.large .ch-chip { font-size: 1.05rem; padding: .5rem .7rem; }
.ch-chips.large .ch-chip .score { font-size: 1.5rem; }

/* ---- the topic and the card */
.ch-topic { text-align: center; margin: .1rem 0 .4rem; font-size: 1.3rem; color: var(--accent-2); font-family: var(--display); font-weight: 600; min-height: 1.5rem; }
.ch-grid-wrap { position: relative; }
.ch-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; padding: .45rem; border-radius: 18px;
    background: linear-gradient(160deg, #e8dfbd, #d9cd9d); box-shadow: 0 8px 22px rgba(0, 20, 5, .45), inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.ch-cell {
    position: relative; aspect-ratio: 1 / .86; min-width: 0; padding: .2rem; border-radius: 10px; border: 0;
    background: var(--ch-cream); color: var(--ch-ink); font-family: var(--body); font-weight: 800; font-size: 15px; line-height: 1.1;
    display: grid; place-items: center; text-align: center; box-shadow: 0 2px 0 rgba(90, 70, 20, .25);
    hyphens: manual; overflow-wrap: break-word; word-break: normal; cursor: default; container-type: inline-size; --max: 15px;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .15s, box-shadow .15s;
}
.ch-cell:disabled { opacity: 1; color: var(--ch-ink); }
.ch-cell .w { display: block; max-width: 100%; font-size: min(var(--max), calc((100cqi - 1px) / (var(--len, 8) * .6))); }
.ch-cell.mine { box-shadow: 0 0 0 3px var(--cauldron), 0 0 14px 2px color-mix(in srgb, var(--cauldron) 70%, transparent); z-index: 1; }
.ch-cell.mine::after { content: ""; position: absolute; inset: -6px; border-radius: 14px; border: 3px solid var(--cauldron); animation: ch-ring .9s ease-out; }
@keyframes ch-ring { from { transform: scale(1.35); opacity: 0; } to { transform: none; opacity: 1; } }
.ch-cell.word { background: var(--ch-gold); box-shadow: 0 0 0 3px var(--ch-gold-dark), 0 0 18px 4px rgba(245, 200, 76, .65); z-index: 2; animation: ch-gold 1s ease-out; }
@keyframes ch-gold { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.ch-cell.wrong { background: #f2c4c0; text-decoration: line-through; text-decoration-color: var(--ch-red); text-decoration-thickness: 2px; box-shadow: 0 0 0 3px var(--ch-red); }
.ch-cell.right { background: var(--ch-gold); box-shadow: 0 0 0 3px var(--ch-gold-dark); }
.ch-cell.sweep { box-shadow: 0 0 0 3px var(--cauldron, var(--accent)); transform: scale(1.05); z-index: 1; }
.ch-grid-wrap.guessing .ch-cell:not(:disabled) { cursor: pointer; }
.ch-grid-wrap.guessing .ch-cell:not(:disabled):active { transform: scale(.96); }
.ch-grid-wrap.guessing .ch-grid { box-shadow: 0 0 0 3px var(--accent), 0 8px 22px rgba(0, 20, 5, .45); }
.ch-cell.sel { background: #fff7c9; box-shadow: 0 0 0 3px var(--accent-dark), 0 0 14px rgba(163, 230, 53, .8); transform: scale(1.05); z-index: 2; }
.ch-grid-wrap.face-down .ch-cell { background: repeating-linear-gradient(45deg, #2c603d 0 8px, #245233 8px 16px); box-shadow: none; }
.ch-facedown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .4rem; font-weight: 800; color: var(--ch-cream); pointer-events: none; }
.ch-facedown .ico { width: 1.6rem; height: 1.6rem; --bg: #245233; }
/* The Chameleon's sash: a band above the grid (never across it, the Chameleon must read every word), arriving large and
   settling to a slight tilt. */
.ch-banner {
    position: relative; margin: .1rem .2rem .7rem; transform: rotate(-2deg);
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .3rem .7rem; flex-wrap: wrap; padding: .45rem .6rem .5rem;
    background: rgba(21, 51, 31, .92); border-top: 3px solid var(--accent); border-bottom: 3px solid var(--accent);
    color: var(--accent-2); text-align: center; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); animation: ch-banner .55s cubic-bezier(.2, .9, .3, 1.2) both;
    pointer-events: none;
}
.ch-banner .liz { width: 2.4rem; height: 2.4rem; color: var(--accent); --bg: #15331f; flex: none; }
.ch-banner b { font-family: var(--display); font-size: 1.35rem; font-weight: 700; }
.ch-banner small { color: var(--text); font-size: .85rem; flex-basis: 100%; }
@keyframes ch-banner { from { opacity: 0; transform: rotate(-4deg) scale(1.25); } to { opacity: 1; transform: rotate(-2deg); } }
.ch-yours { text-align: center; margin: .45rem 0 .35rem; min-height: 1.4rem; color: var(--muted); }
.ch-yours b { color: var(--text); }
.ch-yours b.gold { color: var(--ch-gold); }
.ch-yours .ico { width: 1.1rem; height: 1.1rem; vertical-align: -.2rem; color: var(--accent); --bg: var(--bg); }

/* ---- the host choosing the round's topic: the card they are on, mirrored on every phone and the table; on the host's
   phone a layer over the cells takes the swipe (the cells are buttons that take no tap here) and the row under it has
   the arrows and "7 of 35". A card slides in as it changes. */
.ch-topic.ch-browse-name { display: flex; align-items: center; justify-content: center; gap: .5rem; min-width: 0; }
.ch-topic.ch-browse-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-level { flex: none; font-family: var(--body); font-size: .7rem; font-weight: 800; letter-spacing: .02em; padding: .12rem .5rem; border-radius: 999px; background: var(--accent); color: var(--accent-text); }
.ch-level.hard { background: var(--ch-gold); color: var(--ch-ink); }
.ch-browse { position: relative; }
.ch-browse .ch-grid { animation: ch-card-in .26s ease-out; }
@keyframes ch-card-in { from { transform: scale(.96) translateY(6px); opacity: .35; } to { transform: none; opacity: 1; } }
.ch-swipe-layer { position: absolute; inset: 0; z-index: 2; touch-action: pan-y; cursor: grab; }
.ch-browse.mine .ch-grid { box-shadow: 0 0 0 3px var(--accent), 0 8px 22px rgba(0, 20, 5, .45); }
.ch-browse-row { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .45rem 0 .35rem; min-height: 1.4rem; color: var(--muted); }
.ch-browse-row .btn.icon { width: 2.5rem; height: 2.5rem; padding: 0; flex: none; box-shadow: var(--shadow); }
.ch-browse-row .btn.icon .ico { width: 1.3rem; height: 1.3rem; }
.ch-browse-pos { flex: 1; min-width: 0; text-align: center; font-size: .9rem; }
.ch-browse-pos b { color: var(--text); font-family: var(--display); font-size: 1.1rem; }
.ch-played { color: var(--ch-gold); font-weight: 700; }
.ch-actions .ch-random { flex: none; box-shadow: var(--shadow); }
.ch-actions .ch-random .ico { width: 1.2rem; height: 1.2rem; }
.ch-actions .ch-play { flex: 1; }
@media (prefers-reduced-motion: reduce) { .ch-browse .ch-grid { animation: none; } }

/* ---- the speaking order */
.ch-order { display: flex; gap: .25rem; }
.ch-turn {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .25rem .2rem;
    border-radius: 10px; background: var(--panel); border-bottom: 3px solid var(--cauldron); font-size: .78rem; transition: flex-grow .25s;
}
.ch-turn .who { display: flex; align-items: center; gap: .15rem; min-width: 0; max-width: 100%; }
.ch-turn .who .ico.seat { width: .9rem; height: .9rem; flex: none; color: var(--cauldron); --bg: var(--panel); }
.ch-turn .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.ch-turn > .ico.said { width: .9rem; height: .9rem; color: var(--muted); --bg: var(--panel); }
.ch-turn .clue { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ch-gold); font-weight: 700; }
.ch-turn.done { opacity: .7; }
.ch-turn.now { flex-grow: 2; background: var(--panel-3); box-shadow: 0 0 0 2px var(--cauldron); opacity: 1; }
.ch-turn.now .state { color: var(--accent-2); font-weight: 700; }
.ch-order.large .ch-turn { font-size: 1rem; padding: .5rem; }
/* Six to eight players: two rows of four, every cell the same width (the speaker is lit, not wider). */
.ch-order.many { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ch-order.many .ch-turn { min-height: 2.6rem; }

/* ---- the action bar */
.ch-actions { align-items: center; }
.ch-actions .ch-say, .ch-actions .ch-guess, .ch-actions .ch-ready { flex: 1; }
.ch-actions .ch-say .ico { width: 1.3rem; height: 1.3rem; }
.ch-actions .ch-tapfor { flex: none; box-shadow: var(--shadow); }
.ch-actions .ch-result-btn { flex: none; box-shadow: var(--shadow); }

/* ---- the vote and the tie: a see-through sheet at the bottom */
.sheet.ch-vote, .sheet.ch-tie { max-width: 560px; }
.sheet.ch-vote header, .sheet.ch-tie header { padding-bottom: .2rem; }
.ch-pick { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: .4rem; }
.ch-pick-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem; min-width: 0; min-height: 3.6rem;
    border-radius: 14px; border: 2px solid var(--cauldron); background: color-mix(in srgb, var(--cauldron) 22%, var(--panel)); color: var(--text);
    font-weight: 800; font-size: 1rem; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ch-pick-btn .ico.seat { width: 1.3rem; height: 1.3rem; color: var(--seat-text); --bg: var(--panel); }
.ch-pick-btn .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-pick-btn small { font-weight: 600; color: var(--muted); font-size: .72rem; }
.ch-pick-btn:disabled { opacity: .45; cursor: default; border-style: dashed; }
.ch-pick-btn.on { background: var(--cauldron); box-shadow: 0 0 0 3px var(--accent), 0 4px 12px rgba(0, 0, 0, .4); }
.ch-pick-btn.on small { color: #fff; }
.ch-pick-btn:active:not(:disabled) { transform: scale(.97); }
.ch-vote-status { margin: .5rem 0 0; text-align: center; }

/* ---- the card turned over */
.ch-flip { position: relative; width: 8.5rem; height: 11.5rem; margin: .4rem auto .8rem; perspective: 700px; transform-style: preserve-3d; }
.ch-face {
    position: absolute; inset: 0; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); font-weight: 800; text-align: center; padding: .5rem;
}
.ch-face.back { background: repeating-linear-gradient(135deg, #1f6b3a 0 10px, #24773f 10px 20px); color: var(--ch-cream); border: 3px solid var(--cauldron); animation: ch-flip-back 1s .5s ease-in both; }
.ch-face.back .liz { width: 3rem; height: 3rem; color: var(--accent); --bg: #1f6b3a; }
.ch-face.front { background: var(--ch-cream); color: var(--ch-ink); border: 3px solid var(--ch-gold-dark); animation: ch-flip-front 1s .5s ease-in both; }
.ch-face.front .liz.big { width: 5rem; height: 5rem; color: #2f9e5c; --bg: var(--ch-cream); }
.ch-code { display: grid; grid-template-columns: repeat(4, 1rem); gap: .3rem; }
.ch-code i { width: 1rem; height: 1rem; border-radius: 3px; background: #3b5bdb; opacity: .8; }
.ch-code i:nth-child(3n) { background: #f5c84c; }
.ch-code i:nth-child(5n+1) { background: #e5484d; }
@keyframes ch-flip-back { 0% { transform: rotateY(0); } 50%, 100% { transform: rotateY(180deg); } }
@keyframes ch-flip-front { 0% { transform: rotateY(-180deg); } 50% { transform: rotateY(-180deg); } 100% { transform: rotateY(0); } }
.ch-card-line { text-align: center; }
.sheet.ch-card-sheet.caught h2 { color: var(--accent-2); }

/* ---- the reveal */
.ch-reveal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .35rem; }
.ch-who { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--cauldron) 35%, var(--panel)); border: 2px solid var(--cauldron); font-weight: 800; }
.ch-who .ico { width: 1.2rem; height: 1.2rem; color: var(--seat-text); --bg: var(--panel); }
.ch-the-word b { color: var(--ch-gold); font-family: var(--display); font-size: 1.25rem; }
.ch-outcome { margin-bottom: .45rem; }
.ch-points { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: .3rem; }
.ch-pt { display: flex; flex-direction: column; align-items: center; padding: .3rem .2rem; border-radius: 12px; background: var(--panel-2); border-top: 3px solid var(--cauldron); min-width: 0; }
.ch-pt .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .85rem; }
.ch-pt b { font-family: var(--display); font-size: 1.35rem; color: var(--muted); }
.ch-pt.scored b { color: var(--accent-2); }
.ch-pt small { color: var(--muted); font-size: .72rem; }
.ch-pt.me { background: var(--panel-3); }
.ch-target { margin: .5rem 0 0; color: var(--accent-2); font-weight: 700; text-align: center; }
.ch-target .ico { width: 1.1rem; height: 1.1rem; vertical-align: -.2rem; }
.sheet.ch-reveal.escaped h2, .sheet.ch-reveal.right h2 { color: var(--ch-gold); }
.sheet.ch-reveal.wrong h2 { color: var(--accent-2); }

/* ---- splashes */
.ch-splash-topic { font-family: var(--display); font-size: 1.8rem; color: var(--accent-2); margin: .2rem 0; text-align: center; }
.ch-splash-note { text-align: center; color: var(--muted); }
.ch-splash-scores { list-style: none; padding: 0; margin: .5rem auto 0; width: min(320px, 100%); display: grid; gap: .25rem; }
.ch-splash-scores li { display: flex; justify-content: space-between; align-items: center; padding: .3rem .6rem; border-radius: 10px; background: var(--panel-2); border-left: 4px solid var(--cauldron); }
.ch-splash-scores li .ico.seat { width: 1.1rem; height: 1.1rem; color: var(--seat-text); --bg: var(--panel-2); vertical-align: -.2rem; }
.ch-splash-scores.big li { font-size: 1.15rem; }
.ch-splash-scores b { font-family: var(--display); color: var(--accent-2); }

/* ---- the score table in the rules */
.ch-score-table { width: 100%; border-collapse: collapse; margin-bottom: .6rem; }
.ch-score-table td { padding: .3rem .2rem; border-bottom: 1px solid var(--line); }

/* ---- the lobby */
.ch-lobby-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; padding: .35rem; margin-bottom: .6rem; border-radius: 14px; background: linear-gradient(160deg, #e8dfbd, #d9cd9d); }
.ch-lobby-cells .ch-cell { aspect-ratio: auto; padding: .5rem .2rem; --max: 14px; }

/* ---- the table (a television): the card big on the left, the order and the votes on the right */
.ch-tablepage { max-width: 1400px; }
.ch-table-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ch-table-card .ch-topic { font-size: 2rem; }
.ch-grid-wrap.large .ch-grid { gap: .7rem; padding: .7rem; }
.ch-grid-wrap.large .ch-cell { --max: 1.7rem; aspect-ratio: auto; height: clamp(60px, calc((100vh - 410px) / 4), 150px); }
.ch-table-side .card { margin-bottom: 1rem; }
.ch-table-side .ch-order { flex-direction: column; }
.ch-table-side .ch-turn { flex-direction: row; justify-content: space-between; }
.ch-voting { margin: .7rem 0 0; font-size: 1.1rem; }
.ch-tally { list-style: none; padding: 0; margin: .7rem 0 0; display: grid; gap: .3rem; }
.ch-tally li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .6rem; padding: .4rem .6rem; border-radius: 10px; background: var(--panel-2); border-left: 5px solid var(--cauldron); font-size: 1.1rem; }
.ch-tally li.accused { box-shadow: 0 0 0 2px var(--ch-gold); }
.ch-tally li .ico.seat { width: 1.2rem; height: 1.2rem; color: var(--seat-text); --bg: var(--panel-2); vertical-align: -.2rem; }
.ch-tally li b { font-family: var(--display); font-size: 1.4rem; color: var(--accent-2); }
.ch-tally li small { color: var(--muted); }
@media (max-width: 800px) { .ch-table-grid { grid-template-columns: 1fr; } }

/* ---- typed clues: the field in the action bar, the words on the vote buttons */
.ch-actions .ch-clue-input {
    flex: 1; min-width: 0; padding: .85rem 1rem; border-radius: 14px; border: 2px solid var(--accent); background: var(--panel);
    color: var(--text); font: inherit; font-weight: 700; font-size: 1.05rem; box-shadow: var(--shadow);
}
.ch-actions .ch-clue-input::placeholder { color: var(--muted); font-weight: 600; }
.ch-actions .ch-say:disabled { opacity: .55; box-shadow: none; }
.ch-pick-btn .clue { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ch-gold); font-size: .82rem; font-weight: 700; }

/* ---- the host's own topic */
.ch-own { margin-top: .6rem; }
.ch-own p { display: flex; align-items: center; gap: .35rem; margin-bottom: .4rem; }
.ch-own .ico { width: 1.1rem; height: 1.1rem; }
.ch-custom-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.ch-custom-row span { font-weight: 700; }
.ch-custom-row input, .ch-custom-word {
    flex: 1; min-width: 0; padding: .5rem .6rem; border-radius: 10px; border: 1px solid var(--line); background: var(--ch-cream);
    color: var(--ch-ink); font: inherit; font-weight: 700;
}
.ch-custom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.ch-custom-word { font-size: .95rem; padding: .45rem .5rem; }