/* 茶碗サイコロ: トランプ・カジノと同じ「明るく落ち着いた」シリーズ（2026-10-23 手直し）。地 #E9E8E3 に墨色 #1E2B27 の字、主なボタンはえんじ #8E3B2E。
   遊ぶ卓は cards.js の共通の緑。椀は朱塗り（木）と染付（陶器）
   部屋のページにも読み込まれるので、すべて .cw（このゲームの箱）の中だけに効かせる */
.cw { --washi: #E9E8E3; --washi2: #DEDCD5; --ink: #1E2B27; --sumi: #5C6660; --shu: #8E3B2E; --kin: #8E3B2E; --line: #C9C7BF;
  --ui-red: #8E3B2E; --ui-red-ink: #FFFFFF;
  font-family: "Shippori Mincho", serif; color: var(--ink); font-size: 24px; }
.cw:not(.cd-table) { background: var(--washi); }
/* 共通の 3 つの画面（shell.home / bar / result）の書体と色もシリーズに合わせる。一番後ろ（--ui-gamebg）は共通のまま触らない */
.cw.stage-root { --ui-display: "Shippori Mincho B1", "Shippori Mincho", serif; --ui-body: "Shippori Mincho", serif; --ui-ink: #1E2B27; --ui-sub: #5C6660; --ui-shade: rgba(233, 232, 227, .97);
  --ui-red: #8E3B2E; --ui-red-ink: #FFFFFF; --ui-card: #E9E8E3; --ui-chip: #DEDCD5; }
/* 2 つ目以降のボタン（相手をさがす・下の段・帯・ウィンドウ・結果）: 墨色の細い線のボタン（地は透明） */
.cw.stage-root :is(.sh-home, .sh-bar, .sh-box, .sh-result, .sh-acts) .ui-btn.sub { background: transparent; color: #1E2B27; border: 1.5px solid #1E2B27; box-shadow: none; }
.cw.stage-root :is(.sh-home, .sh-bar, .sh-box, .sh-result, .sh-acts) .ui-btn.sub:hover { background: #DEDCD5; color: #1E2B27; }
/* 遊び方の札（タブ）の選んでいる方: 墨色の地に白字 */
.cw.stage-root .sh-tabs .ui-btn.sub[aria-selected="true"] { background: #1E2B27; color: #FFFFFF; border-color: #1E2B27; }
/* ウィンドウの見出し: 細い罫 */
.cw .sh-box header { border-bottom: 1px solid var(--line); margin: 0 20px 10px; padding-left: 0; padding-right: 0; }
.cw.stage-root .sh-box { box-shadow: none; border: 1.5px solid #1E2B27; }
.cw.stage-root :is(.sh-home, .sh-bar, .sh-box, .sh-result, .sh-acts) .ui-btn:not(.sub) { box-shadow: none; border-color: var(--ui-red); }
.cw .sh-room .ui-entry { background: none; border: 0; box-shadow: none; color: var(--ui-ink); }
.cw .ui-input { background: transparent; color: #1E2B27; border: 1.5px solid #1E2B27; box-shadow: none; }
/* 遊んでいる最中の帯もホームと同じ地と字。右下の線のボタンは卓の緑の上でも読めるよう地の色で塗る */
.cw.stage-root > .sh-bar { background: var(--ui-card); border-bottom: 1px solid #C9C7BF; }
.cw.stage-root > .sh-acts .ui-btn.sub { background: var(--ui-card); }
.cw.stage-root > .tbl { position: absolute; left: 0; top: 0; }
.cw.tbl { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; }
/* 遊んでいる場は共通の卓（cards.js の table）。緑の地に合わせて文字の色を明るく、強調は淡い生成りにする */
.cw.tbl.cd-table, .cw .cw-art.cd-table { padding: 0; border-radius: 0; box-sizing: border-box;
  --ink: #f4f1ea; --sumi: #E8E6DE; --line: rgba(255, 255, 255, .2); --washi2: rgba(0, 0, 0, .2); --shu: #F4E3B0; color: var(--ink); }
.cw .cw-art.cd-table { border-radius: 6px; }
/* 卓の上の板（一番・どよめき）と、部屋で場の箱に出す小さなウィンドウ（早見表・おしまい）はホームと同じ地と字 */
.cw.tbl .sh-win, .cw.tbl .bonus, .cw.tbl .dyo { --washi: #E9E8E3; --ink: #1E2B27; --sumi: #5C6660; --line: #C9C7BF; --washi2: #DEDCD5; --shu: #8E3B2E; color: var(--ink); }
/* 椀（斜め上から見た場の椀＋振り茶碗）。重なり: 場の椀 → サイコロ → 場の椀の手前の縁 → 振り茶碗 */
.cw .bowl3d { touch-action: none; cursor: default; }
.cw.tbl.myturn .bowl3d { cursor: grab; }
.cw.tbl.myturn .bowl3d:active { cursor: grabbing; }
/* 人の番: 振り茶碗を薄くして、いまは押せないと見せる（自分の番・転がっている間は元どおり） */
.cw .bowl3d .sk-b, .cw .bowl3d .sk-f { transition: opacity .2s; }
.cw.tbl.others:not(.demo) .bowl3d .sk-b, .cw.tbl.others:not(.demo) .bowl3d .sk-f { opacity: .45; }
.cw .hint.nope { animation: cw-nope .36s; }
.cw .bowl3d canvas { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.cw .bowl3d .bw-b { z-index: 1; }
.cw .bowl3d .bw-f { z-index: 3; }
.cw .bowl3d .sk-b, .cw .bowl3d .sk-f { transform-origin: 50% 42%; will-change: transform; }
.cw .bowl3d .sk-b { z-index: 4; }
.cw .bowl3d .sk-f { z-index: 6; filter: none; }
/* サイコロは cards.js の diceEl を 6 面に貼った立方体。刻みごとに transform だけ変える */
.cw .bowl-dice { position: absolute; inset: 0; pointer-events: none; z-index: 2; transition: opacity .12s; }
.cw .bowl-dice.in-sk { z-index: 5; }
.cw .bowl-dice.in-sk .die-sh { display: none; }
.cw .bowl-die { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; perspective: 700px; }
.cw .cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.cw .cube .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border-radius: 12%; }
.cw .cube .cd-dice { display: block; }
.cw .cube .cd-die { border-radius: 12%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); background: #f7f4ec; }
.cw .cube .core { position: absolute; inset: 3%; background: #d9d0bf; }
.cw .cube .shade { position: absolute; inset: 0; background: #2a1a12; opacity: 0; pointer-events: none; }
.cw .die-sh { position: absolute; left: 0; top: 0; border-radius: 50%; background: rgba(20, 8, 4, .26); transform-origin: 50% 50%; }
.cw .note { color: var(--sumi); font-size: 20px; margin: 6px 0; }

/* ---- ホームの背景: シリーズ共通の細い菱形。shell.home の backdrop に描く */
.cw .cw-bd { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* ---- ホーム（shell.home）の絵: 上に CPU 同士のデモ（本番の場を縮めたもの。押しても何も起きない）、下に役の出目の小さな絵 */
.cw .cw-art { pointer-events: none; }
/* デモの箱（howto.js の demo がこの大きさに合わせて 1080×720 の場を縮める）。横は絵の幅 520 いっぱい、縦は下に出目の段を残す高さ 330 */
.cw .cw-art .cw-dmbox { position: absolute; left: 0; right: 0; top: 0; height: 347px; pointer-events: none; }
.cw.pt .cw-art .cw-dmbox { height: 330px; }
.cw .cw-art .kids { position: absolute; left: 20px; right: 20px; top: 368px; bottom: 16px; margin: 0; padding: 14px 0 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 22px 16px; border-top: 1px solid var(--line); }
.cw .kids li { display: flex; align-items: center; gap: 10px; line-height: 1.25; min-width: 0; }
.cw .kids li .cd-dice { flex: none; }
.cw .kids .k-t { display: flex; flex-direction: column; min-width: 0; }
.cw .kids b { color: var(--shu); font-size: 24px; }
.cw .kids .k-t span { font-size: 16px; color: var(--sumi); }
/* 縦のホーム: 絵は 656×400。デモは上 330px、出目は下に 4 つ横並び（出目の上に名前・一言） */
.cw.pt .cw-art .kids { left: 8px; right: 8px; top: 334px; bottom: 2px; padding: 4px 0 0; grid-template-columns: repeat(4, 1fr); gap: 0 6px; }
.cw.pt .kids li { flex-direction: column; gap: 1px; text-align: center; }
.cw.pt .kids .k-t { align-items: center; }
.cw.pt .kids b { font-size: 16px; }
.cw.pt .kids .k-t span { font-size: 12px; }
/* デモの場: 自前の帯にはボタンを出さない。巡目だけ */
.cw.tbl.demo .bar { justify-content: flex-start; }
/* 詳しく・遊び方（shell.panel の中）: 遊び方の一言と早見表 */
.cw .cw-det p { margin: 0 0 .4em; font-size: 18px; line-height: 1.5; }
.cw .sh-body .guide { font-size: 18px; }
.cw .sh-body .guide td { padding: 6px 6px; }
.cw .sh-body .guide-rule { font-size: 17px; }
/* 設定（shell.panel の中）: 巡の数・椀・音。押せる札と分かるよう大きめに */
.cw .cw-set { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.cw .cw-set-r { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cw .cw-set-c { width: 80px; font-weight: 800; }
.cw .cw-set-o { display: flex; gap: 10px; flex-wrap: wrap; }
.cw .cw-set .ui-chip { font-size: 20px; padding: 8px 18px; }
/* オンラインの箱（共通の roomEntry）: 少し詰めて置く。人数は共通の行のまま */
.cw .sh-room .ui-entry { padding: 10px 16px; margin: 0; }
.cw .sh-room .ui-entry .ui-title { margin: 0; }
/* 記録（shell.panel の中）: この端末の自分の記録 */
.cw .cw-rk h3 { margin: 6px 0 4px; font-size: 18px; color: var(--sumi); }
.cw .cw-rk-me { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 16px; font-size: 18px; }
.cw .cw-rk-me li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding: 2px 0; }
.cw .cw-rk-me li.note { display: block; border: 0; }
.cw .cw-rk-me b { color: var(--shu); }
.cw .cw-rk-best { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.cw .cw-rk-best li { display: flex; flex-direction: column; align-items: center; padding: 8px 6px; border-bottom: 2px solid var(--line); }
.cw .cw-rk-best span { font-size: 16px; color: var(--sumi); }
.cw .cw-rk-best b { font-size: 32px; line-height: 1.2; color: var(--shu); }
.cw .cw-rk-recent { list-style: none; margin: 0; padding: 0; font-size: 18px; }
.cw .cw-rk-recent li { display: grid; grid-template-columns: 4em 4em 1fr; gap: 8px; border-bottom: 1px solid var(--line); padding: 2px 0; }
.cw .cw-rk-recent li.note { display: block; border: 0; }
.cw .cw-rk-recent b { text-align: right; color: var(--shu); }
.cw .ui-chip.on { color: var(--shu); border-color: var(--shu); border-width: 2px; font-weight: 800; background: #DEDCD5; }
.cw .cw-lobby .order li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.cw .o-i { width: 36px; text-align: center; font-weight: 800; font-size: 26px; color: var(--shu); }
.cw .o-n { flex: 1; font-size: 26px; }

/* ---- 場（横） */
.cw .bar { position: absolute; left: 24px; right: 24px; top: 12px; height: 60px; display: flex; align-items: center; justify-content: space-between; }
.cw .rnd { font-size: 30px; font-weight: 800; letter-spacing: .08em; }
.cw .bar-btns { display: flex; gap: 8px; }
/* ミニゲーム: 巡目の欄に説明 1 行を添える */
.cw.tbl.mini .rnd { font-size: 22px; letter-spacing: 0; white-space: nowrap; }
.cw.tbl.mini.pt .rnd { font-size: 17px; }
.cw .turn { position: absolute; left: 0; width: 720px; top: 80px; text-align: center; font-size: 36px; white-space: nowrap; }
.cw .turn b { color: var(--shu); }
.cw .tries, .cw .turn small { font-size: 20px; color: var(--sumi); margin-left: 12px; }
.cw .bowl { position: absolute; left: 110px; top: 122px; }
.cw .yaku { position: absolute; left: 0; width: 720px; top: 604px; height: 60px; display: flex; justify-content: center; align-items: baseline; gap: 18px; }
.cw .y-n { font-size: 52px; font-weight: 800; letter-spacing: .1em; }
.cw .y-w { font-size: 26px; }
.cw .y-p { font-size: 32px; font-weight: 800; }
.cw .yaku.good .y-n, .cw .yaku.good .y-p { color: var(--shu); }
.cw .yaku.bad .y-n { color: var(--sumi); }
.cw .act { position: absolute; left: 0; width: 720px; top: 664px; height: 52px; display: flex; justify-content: center; align-items: center; }
.cw .hint { margin: 0; font-size: 24px; color: var(--sumi); }
.cw .hint.go { color: var(--shu); animation: cw-pulse 1.4s ease-in-out infinite; }
.cw .choose { display: flex; gap: 14px; }
/* 手を送ってから盤面が届くまで（U4）: 押したボタンは沈めて濃く残し、ほかは薄くする。掛け声は 1 秒だけ墨色に反転 */
.cw .ui-btn.cw-pressed, .cw .ui-btn.cw-pressed:disabled { opacity: 1; transform: translateY(2px); outline: 3px solid var(--ui-red, #8E3B2E); outline-offset: 2px; }
.cw .calls .ui-btn.cw-sent { background: #1E2B27; color: #FFFFFF; border-color: #1E2B27; transform: translateY(2px); }
.cw .choose[hidden],.cw .hint[hidden], .cw .choose .ui-btn[hidden], .cw .cw-acts .ui-btn[hidden] { display: none; }
.cw .board { position: absolute; left: 744px; top: 86px; width: 312px; bottom: 24px; margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--ink); }
.cw.party .board { bottom: 250px; }
.cw .board li { display: grid; grid-template-columns: 1fr auto 88px; gap: 8px; align-items: center; font-size: 24px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); }
.cw.party .board li { padding-top: 5px; padding-bottom: 5px; }
.cw .board li.now { background: var(--washi2); border-left: 6px solid var(--shu); padding-left: 8px; }
.cw .board li.me .b-n { text-decoration: underline; text-underline-offset: 5px; }
.cw .b-n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cw .b-h { font-size: 19px; color: var(--sumi); white-space: nowrap; }
.cw .b-h.top { color: var(--shu); font-weight: 800; }
.cw .b-s { text-align: right; font-weight: 800; font-size: 28px; }
.cw .b-s .cd-chips, .cw .f-s .cd-chips { justify-content: flex-end; }
.cw .board li.called { animation: cw-bump .5s; }
.cw.stir .board li { animation: cw-hop .3s 4 alternate; }
.cw .calls { position: absolute; left: 744px; width: 312px; bottom: 20px; height: 216px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* ひとりで遊ぶ（共通の帯）: 上 64px は帯。右下は振る・決める・振り直すの置き場なので、椀と役は左へ寄せ、得点表は上で止める */
.cw.tbl.solo.ls .bowl { left: 50px; }
.cw.tbl.solo.ls .turn, .cw.tbl.solo.ls .yaku, .cw.tbl.solo.ls .act { left: 30px; width: 540px; }
.cw.tbl.solo .turn { font-size: 32px; }
.cw.tbl.solo .hint { font-size: 20px; line-height: 1.25; text-align: center; }
.cw.tbl.solo.ls .board { bottom: 112px; }
/* 得点表（ひとり）: 名前を切らないよう、1 段目に名前と点、2 段目に役 */
.cw.tbl.solo .board li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n s" "h s"; row-gap: 0; }
.cw.tbl.solo .b-n { grid-area: n; overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.25; }
.cw.tbl.solo .b-h { grid-area: h; min-height: 1.3em; }
.cw.tbl.solo .b-s { grid-area: s; }

/* ---- 場（縦） */
.cw.tbl.pt .bowl { left: 80px; top: 132px; }
.cw.tbl.pt .yaku { top: 696px; }
.cw.tbl.pt .act { top: 768px; height: 60px; }
.cw.tbl.pt .board { left: 24px; right: 24px; width: auto; top: 842px; bottom: 20px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; column-gap: 24px; }
.cw.tbl.pt.party .board { bottom: 118px; }
.cw.tbl.pt.solo .board { bottom: 106px; }
.cw.tbl.pt .board li { font-size: 22px; padding: 5px 6px 5px 12px; grid-template-columns: 1fr auto 76px; }
.cw.tbl.pt .b-s { font-size: 24px; }
.cw.tbl.pt.solo .board li { grid-template-columns: minmax(0, 1fr) auto; }
.cw.tbl.pt .calls { left: 24px; right: 24px; width: auto; bottom: 14px; height: 96px; grid-template-columns: repeat(3, 1fr); }

/* ---- 演出 */
.cw .cw-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.cw .dyo { position: absolute; left: 0; width: 720px; top: 290px; text-align: center; }
.cw.tbl.pt .dyo { top: 330px; }
.cw .dyo b { display: block; font-size: 112px; font-weight: 800; color: var(--shu); letter-spacing: .06em; -webkit-text-stroke: 6px var(--washi); paint-order: stroke fill; animation: cw-shake .07s infinite alternate; }
.cw .dyo.big b { font-size: 140px; }
.cw .dyo span { display: inline-block; font-size: 34px; background: #E9E8E3; color: #1E2B27; border: 1.5px solid #8E3B2E; padding: 2px 20px; margin-top: 6px; animation: cw-shake .09s infinite alternate-reverse; }
.cw .shout { position: absolute; font-style: normal; font-size: 44px; white-space: nowrap; font-weight: 800; color: var(--ink); opacity: 0; animation: cw-shout 1.7s var(--d) both; }
.cw .call-pop { position: absolute; left: 0; width: 720px; top: 132px; text-align: center; font-size: 30px; font-weight: 800; animation: cw-pop 1.7s both; }
.cw .call-pop::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--shu); margin-right: 10px; vertical-align: middle; }
.cw .bonus { position: absolute; left: 140px; width: 440px; top: 300px; text-align: center; background: var(--washi); border: 1.5px solid #8E3B2E; padding: 14px 10px; animation: cw-pop 2.3s both; }
.cw.tbl.pt .bonus { top: 340px; }
.cw .bonus small { display: block; font-size: 22px; color: var(--sumi); }
.cw .bonus b { display: block; font-size: 44px; }
.cw .bonus span { font-size: 40px; font-weight: 800; color: var(--shu); }

/* ---- 部屋の小さなウィンドウ（view.js の boxPanel。単独のページの shell.panel と同じ作り）の地と線 */
.cw.tbl .sh-win { --ui-card: #E9E8E3; --ui-ink: #1E2B27; --ui-sub: #5C6660; --ui-body: "Shippori Mincho", serif; }
.cw.tbl .sh-box { box-shadow: none; border: 1.5px solid #1E2B27; }
.cw.tbl .sh-box .ui-btn.sub { background: transparent; color: #1E2B27; border: 1.5px solid #1E2B27; box-shadow: none; }
.cw .ui-chip { background: transparent; color: #1E2B27; border: 1.5px solid #1E2B27; box-shadow: none; }
.cw .guide { width: 100%; border-collapse: collapse; font-size: 22px; margin: 6px 0 10px; }
.cw .guide th { text-align: left; font-size: 18px; color: var(--sumi); border-bottom: 2px solid var(--ink); padding: 4px 10px; }
.cw .guide td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.cw .g-n { font-weight: 800; white-space: nowrap; }
.cw .g-d .cd-dice { gap: 4px; vertical-align: middle; }
.cw .g-d small { display: block; font-size: 17px; color: var(--sumi); margin-top: 2px; }
.cw .g-p { font-weight: 800; text-align: right; color: var(--shu); white-space: nowrap; }
.cw .guide-rule { margin: 0 0 12px; padding-left: 1.2em; font-size: 20px; line-height: 1.6; }
/* ---- 部屋の待つ画面（集まっている人・順番・巡の数）。待っている間だけ場の代わりに出す。字は卓の上の明るい色 */
.cw.tbl.lobbying > :is(.turn, .bowl, .yaku, .act, .board, .calls) { display: none; }
.cw .cw-lobby { position: absolute; left: 0; right: 0; top: 84px; bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; overflow: auto; }
.cw .cw-lobby[hidden] { display: none; }
.cw .cw-lobby h2 { margin: 0; font-size: 40px; font-weight: 800; }
.cw .cw-lobby .lb-n { color: var(--shu); margin-left: 12px; }
.cw .cw-lobby .order { list-style: none; padding: 0; margin: 0; width: 560px; max-width: calc(100% - 48px); border-top: 2px solid var(--ink); }
.cw .cw-lobby .ui-btn.sub, .cw .cw-lobby .ui-chip { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: none; }
.cw .cw-lobby .ui-chip { font-size: 24px; padding: 8px 24px; }
.cw .cw-lobby .ui-chip.on { background: var(--ink); color: #1E2B27; border-color: var(--ink); }
.cw .cw-lobby .lb-r { font-size: 28px; font-weight: 800; }
.cw .cw-lobby .ui-btn:not(.sub) { background: #8E3B2E; color: #FFFFFF; border-color: #8E3B2E; box-shadow: none; font-size: 28px; padding: 12px 40px; }
.cw .cw-lobby .lb-go { gap: 12px; align-items: center; }
.cw .cw-lobby .note { margin: 0; }

.cw .final { list-style: none; margin: 8px 0; padding: 0; }
.cw .final li { display: grid; grid-template-columns: 44px 1fr auto 150px; gap: 10px; align-items: baseline; padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: 26px; }
.cw .final li.win { background: var(--washi2); }
.cw .f-r { font-weight: 800; color: var(--shu); text-align: center; }
.cw .f-n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cw .f-z { font-size: 18px; color: var(--sumi); }
.cw .f-s { text-align: right; font-weight: 800; }

/* 遊び方の図（howto.js）。卓（cards.js）の上に 260×160 の場面。縦の枠で欄が広いときも真ん中に置く */
.sh-pic.cw-hp { padding: 0; border-radius: 6px; }
.cw-hp-in { position: absolute; left: 50%; top: 50%; width: 260px; height: 160px; transform: translate(-50%, -50%); }
.cw-hp-in canvas, .cw-hp-in svg { position: absolute; left: 0; top: 0; width: 260px; height: 160px; pointer-events: none; }
.cw-hp-in svg { z-index: 3; }
.cw-hp-in .cw-hp-d { position: absolute; gap: 4px; transform: translate(-50%, -50%); z-index: 1; }
.cw-hp-t { position: absolute; z-index: 2; white-space: nowrap; font: 700 14px/1.2 var(--ui-body); color: #f4f1ea; }
.cw-hp-t.row { padding: 2px 6px; background: rgba(0,0,0,.28); border-radius: 4px; }
.cw-hp-t.hi { color: #F4E3B0; }
.cw-hp-t.nm { font-size: 13px; padding: 2px 6px; background: rgba(0,0,0,.28); border-radius: 4px; }
.cw-hp-t.big { font-size: 24px; color: #F4E3B0; }
.cw-hp-t.key { font-size: 15px; padding: 4px 10px; background: #f4f1ea; color: #16233a; border-radius: 6px; border-bottom: 3px solid #9c9488; }
.cw-hp-b.ui-btn { position: absolute; z-index: 2; margin: 0; padding: 4px 12px; font-size: 15px; min-height: 0; min-width: 0; white-space: nowrap; pointer-events: none; }

@keyframes cw-shake { from { transform: translate(-3px, 1px) rotate(-1.2deg); } to { transform: translate(3px, -1px) rotate(1.2deg); } }
@keyframes cw-shout { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1.1) rotate(-4deg); } 30% { transform: scale(1) rotate(3deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px); } }
@keyframes cw-pop { 0% { opacity: 0; transform: translateY(14px); } 10% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cw-hop { to { transform: translateY(-6px); } }
@keyframes cw-bump { 30% { background: rgba(255, 255, 255, .16); transform: scale(1.03); } }
@keyframes cw-pulse { 50% { opacity: .45; } }
@keyframes cw-nope { 25% { transform: translateX(-8px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .cw .dyo b, .cw .dyo span, .cw.stir .board li, .cw .hint.go, .cw .hint.nope { animation: none; }
}