html,body{margin:0;height:100%}

/* ひとりのページだけ。共通の 3 つの画面（shell.home / bar / result）に、放課後の教室の色を当てる（色の組は game.js の THEME）
   黒板 #25563a（地。HSL 146/40%/24%）・チョークの白 #ecebe2（字）・桃色のチョーク #f4b8a8（ホームの主なボタン）・木の縁 #7a5233。遊ぶ画面と結果の地は桜色の壁 #e6b3c0（345/50%/80%）、その上のボタンは黒板の緑。一番後ろ（枠の外）の色は共通のまま触らない */
.shell-stage{background:#25563a;--ui-display:"Shippori Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif}

/* 共通の一言（.ui-note）が［立つ］の上に重ならないよう、［立つ］を置いている間（遊んでいる最中）だけ隠す */
.shell-stage .ui-note{pointer-events:none}
.shell-stage:has(.cm-stand) .ui-note,body:has(.cm-stand) .ui-note,body.cm-playing .ui-note,body:has(.cm-pad:not(.off):not(.done)) .ui-note{display:none!important}

/* ホームの題字（黒板にチョーク。SVG）: 76px の高さ・1 行 */
.sh-logo svg.cm-logo{width:440px;max-width:100%;height:auto;max-height:76px;display:block}
.sh-backdrop svg{position:absolute;inset:0;display:block}

/* 地の色の上のボタン: 黒板より少し明るい面に、チョークの線（ホームのオンライン・下の段、帯、小さなウィンドウ） */
.shell-stage .ui-btn.sub{background:#2d6444;color:#ecebe2;border:2px solid #a9c9b5;box-shadow:none;border-radius:4px}
.shell-stage .ui-btn.sub:disabled{opacity:.4}
.shell-stage .sh-tabs .ui-btn.sub[aria-selected="true"]{background:#ecebe2;color:#25563a;border-color:#ecebe2}
.shell-stage .sh-home .ui-btn:not(.sub){box-shadow:none;border-radius:4px;border:2px solid #f4b8a8}
/* 小さなウィンドウ: 黒板を木の縁で囲み、見出しの下にチョーク受けの木の桟を 1 本 */
.shell-stage .sh-box{box-shadow:none;border:4px solid #7a5233;border-radius:4px}
.shell-stage .sh-box header{border-bottom:6px solid #7a5233;margin-bottom:10px;padding-bottom:10px}
.shell-stage .sh-pic{box-shadow:none;outline:2px solid #7a5233;border-radius:2px}

/* ホームの絵（デモの場面は明るい教室）を、黒板の地から木の額縁で区切る */
.sh-home .sh-art{outline:4px solid #7a5233;border-radius:2px}
/* ホームの絵: CPU 同士のデモ（本番の場面を縮めて流す。押しても何も起きない） */
.sh-art .cm-demo{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.sh-art .cm-demo *{pointer-events:none}

/* 設定（ホームの［設定］の小さなウィンドウの中。窓の地は黒板） */
.cm-det{display:flex;flex-direction:column;gap:14px;color:var(--ui-ink)}
.cm-det .cm-opt>span,.cm-det .cm-hint{color:var(--ui-sub)}
.cm-det .ui-chip[aria-pressed="true"]{outline-color:#f4b8a8}
.cm-n{font-size:24px;min-width:3em;text-align:center}
.cm-step{min-width:48px}
.cm-step:disabled{opacity:.35;cursor:default}
.cm-range{font-size:14px;color:var(--ui-sub)}
.cm-det>.cm-opt:first-child>span{font-size:22px;font-weight:800;color:var(--ui-ink)}
.cm-more{border-top:1px solid #4b7a5e;padding-top:10px;font-size:15px}
.cm-more>summary{cursor:pointer;color:var(--ui-sub);font-size:16px}
.cm-more[open]{display:flex;flex-direction:column;gap:10px}
.cm-more .cm-opt{font-size:15px}
/* 記録（自己ベストを大きく、下に最近の結果）。目立たせる数だけ桃色のチョーク */
.cm-rank{min-width:min(460px,100%);color:var(--ui-ink)}
.cm-rk-best{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:6px 0 10px;border-bottom:2px solid var(--ui-ink)}
.cm-rk-best span{font-size:20px;color:var(--ui-sub)}
.cm-rk-best b{font-family:var(--ui-display);font-size:64px;font-weight:800;line-height:1;color:#f4b8a8}
.cm-rk-best small{font-size:22px;margin-left:4px;color:var(--ui-ink)}
.cm-rk-best+.cm-rk-best,.cm-rk-best:has(+.cm-rk-best){padding:4px 0 6px}
.cm-rk-best+.cm-rk-best b,.cm-rk-best:has(+.cm-rk-best) b{font-size:48px}
.cm-det .cm-pick[aria-pressed="true"]{background:#f4b8a8;color:#1d3a29;border-color:#f4b8a8}
.cm-det .cm-pick:disabled{opacity:.4;cursor:default}
.cm-rk-sub{display:flex;gap:10px;margin:10px 0 18px}
.cm-rk-sub div{flex:1;text-align:center;padding:6px 4px;border-top:1px solid #4b7a5e}
.cm-rk-sub dt{font-size:14px;color:var(--ui-sub)}
.cm-rk-sub dd{margin:0;font-size:22px;font-weight:800;white-space:nowrap}
.cm-rk-h{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--ui-sub)}
.cm-rk-recent{list-style:none;margin:0;padding:0;font-size:19px}
.cm-rk-recent li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid #4b7a5e}
.cm-rk-recent li.win b{color:#f4b8a8;text-decoration:underline;text-underline-offset:4px}
.cm-rk-recent span{white-space:nowrap;color:var(--ui-sub)}
.cm-rk-none{margin:4px 0 0;font-size:16px;color:var(--ui-sub)}

/* 遊んでいる最中の帯: ホームと同じ黒板の地に、下にチョーク受けの木の桟。縦の枠でも数字が枠の外に出ない（長いときは折り返す） */
.sh-bar{background:#25563a;color:#ecebe2;border-bottom:4px solid #7a5233}
.sh-bar b{flex:none;white-space:nowrap}
.sh-bar .sh-info2{min-width:0;line-height:1.25;color:#bfcabf}
.sh-bar .sh-r{flex:none}
.sh-port .sh-bar .sh-info2{font-size:16px}

/* 遊んでいる最中: 右下の［立つ］。大きさ・形は共通の .sh-acts .ui-btn のまま、色と書体だけ（桜色の場面の上で目立つ黒板の緑にチョークの字）。立った後は木の色 */
.sh-acts .ui-btn.cm-stand{font-family:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;font-weight:800;touch-action:manipulation;background:#25563a;color:#ecebe2;border:3px solid #25563a;border-radius:4px;box-shadow:none}
.cm-stand:disabled{opacity:.45;cursor:default}
.sh-acts .ui-btn.cm-stand.done{opacity:1;background:#7a5233;color:#ecebe2;border-color:#7a5233}

/* 結果: 共通の結果画面の中に、一言と回ごとの点の表を差し込む。表は桜色の壁の明るい地で描き、ボタンは［立つ］と同じ黒板の緑 */
.sh-result.cm-result{background:#e6b3c0;color:#1f2b24;--ui-ink:#1f2b24;--ui-sub:#34493c;--ink:#1f2b24;--sub:#34493c;--line:#c48a99;--red:#8a281f;gap:10px;font-family:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif}
.cm-result .sh-rb .ui-btn{background:#25563a;color:#ecebe2;border:2px solid #25563a;border-radius:4px;box-shadow:none}
.cm-result .sh-rb .ui-btn.sub{background:transparent;color:#25563a}
.cm-result h2.cm-bad{color:#962e24}
.cm-rsub{margin:0;font-size:22px}
.cm-rbody{max-width:960px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.sh-port .cm-rbody{max-width:680px;gap:10px}
.sh-port .cm-tbl{font-size:18px}.sh-port .cm-tbl th,.sh-port .cm-tbl td{padding:4px 6px}