html,body{margin:0;height:100%;overflow:hidden;background:#dcdcdc}
[hidden]{display:none!important}
body{font-family:"Zen Kaku Gothic New",sans-serif;color:#2A2622;-webkit-tap-highlight-color:transparent}
/* 世界観「碁会所の木の盤」: 碁笥の布袋の桜鼠の地（hsl 6,40%,76%）・墨の字・藍のボタン #1F4466（白の字）・木の盤と那智黒と蛤の石（2026-10-23 手直し 6） */
.shell-stage{background:#DAAEA9;--ui-shade:rgba(218,174,169,.97);--ui-paper:#E8CCC9;--ui-soft:#BB8781;--ui-chip:#DFBCB9}

.shell-stage .ui-btn{border-radius:4px;box-shadow:none;background-image:none}
/* 薄いボタン（相手をさがす・下の段・帯の遊び方とやめる）は地に合わせた墨の線のボタン */
.shell-stage .ui-btn.sub{background:transparent;color:var(--ui-ink);border:2px solid var(--ui-ink);box-shadow:none}
.shell-stage .ui-btn.sub:hover:not(:disabled){background:rgba(42,38,34,.08)}
.shell-stage .sh-tabs .ui-btn.sub[aria-selected="true"]{background:var(--ui-ink);color:var(--ui-card)}
/* 遊んでいる最中の帯と小窓の見出し: 和紙の地に、盤の縁と同じ木の色の下線 */
.shell-stage .sh-bar{background:var(--ui-card);border-bottom:4px solid #B89A74}
.shell-stage .sh-box header{border-bottom:3px solid #B89A74;padding-bottom:12px}

/* ホームの絵（場の様子の静止画）。共通の .sh-art の中だけに置く */
.hs-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
/* 遊び方の図（共通の .sh-pic の中。260×160 を真ん中に置く） */
.hs-pic{position:absolute;left:50%;top:50%;width:260px;height:160px;transform:translate(-50%,-50%);pointer-events:none}
.hs-pb{position:absolute}
.hs-pb .rv-board{border-radius:6px;box-shadow:inset 0 0 0 2px var(--rv-frame2)}
.hs-pb .rv-lab{display:none}
.hs-pb .rv-grid{gap:1px;padding:1px}
.hs-pb .rv-dot{width:4px;height:4px;margin:-2px 0 0 -2px}
.hs-pb .rv-stone{inset:10%}
.hs-pb .rv-stone.b{box-shadow:none}
.hs-pb .rv-stone.w{box-shadow:inset 0 0 0 1px #aab4ae}
.hs-pb .rv-cell.hint::after{outline-width:2px}
.hs-pb .rv-cell.cur{box-shadow:inset 0 0 0 2px var(--rv-gold)}
.hs-pm{position:absolute;left:0;top:0;width:260px;height:160px;overflow:visible}
.hs-pt{position:absolute;font:700 15px/1.3 "Zen Kaku Gothic New",sans-serif;color:var(--rv-ink);white-space:pre}
.hs-pt.r{color:var(--rv-red)}
.hs-key{position:absolute;min-width:16px;padding:2px 6px;text-align:center;font:700 15px/1.3 "Zen Kaku Gothic New",sans-serif;background:var(--rv-card);color:var(--rv-ink);border:2px solid var(--rv-sub);border-bottom-width:4px;border-radius:4px}
/* 図の中の［待った］は絵（共通の ui-btn を使わず、主なボタンの色だけまねる） */
.hs-pbtn{position:absolute;font:700 16px/1.3 "Zen Kaku Gothic New",sans-serif;padding:6px 14px;white-space:nowrap;background:#1F4466;color:#F7F5F0;border-radius:4px}
/* ホームの「詳しく」「設定」「記録」の中（共通の小さなウィンドウ shell.panel に入る） */
.hs-det{display:flex;flex-direction:column;gap:12px;padding-top:4px}
.hs-dr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;white-space:nowrap}
.hs-dl{width:2.8em;flex:none;font-size:18px}

/* 遊んでいる最中。上 64px は共通の帯、右下（縦の枠では下）は共通の操作ボタンの場所 */
.hs-app{position:absolute;inset:0;background:var(--rv-bg);color:var(--rv-ink);font-size:24px;line-height:1.35;user-select:none;-webkit-user-select:none}
.hs-bw{position:absolute}
.hs-L .hs-bw{left:30px;top:82px}
.hs-P .hs-bw{left:60px;top:160px}
.hs-side{position:absolute;display:flex;flex-direction:column;gap:16px}
.hs-side>*{flex:none}
/* 横: 盤の右、下 110px は［待った］の場所なので空ける */
.hs-L .hs-side{left:680px;right:30px;top:84px;bottom:110px}
/* 縦: 点数は盤の上、案内と定石は盤の下（ボタンの帯より上） */
.hs-P .hs-scores{position:absolute;left:40px;right:40px;top:76px;height:70px}
.hs-P .hs-side{left:40px;right:40px;top:776px;bottom:120px}

.hs-scores{display:flex;gap:10px}
/* 横: 盤の右の欄は狭いので、点数の欄を上下に並べて名前を切らない */
.hs-L .hs-scores{flex-direction:column;gap:8px}
.hs-sc{flex:1;display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--rv-card);border-radius:3px;border:4px solid transparent;border-bottom-width:8px;min-width:0;transition:background .2s}
/* 手番の側は墨の地に白字と赤い帯（ぱっと見でどちらの番か分かる）。手番でない側は薄くせず墨の字のまま */
.hs-sc.turn{border-color:var(--rv-ink);border-bottom-color:var(--rv-red);background:var(--rv-ink);color:var(--rv-white)}
.hs-sc.turn .nm{font-weight:700}
.hs-sc.turn .hs-stone.b{box-shadow:inset 0 0 0 2px var(--rv-white)}
.hs-sc:not(.turn){color:var(--rv-ink)}
.hs-sc .nm{font-size:20px;line-height:1.2;min-width:0;overflow-wrap:anywhere}
.hs-sc .n{margin-left:auto;font-size:40px;font-variant-numeric:tabular-nums}
.hs-stone{display:inline-block;width:28px;height:28px;border-radius:50%;flex:none}
.hs-stone.b{background:var(--rv-black)}
.hs-stone.w{background:var(--rv-white);box-shadow:inset 0 0 0 2px #B5AC9E}

.hs-msg{min-height:1.35em;font-weight:700}
.hs-msg.first{font-size:28px;color:var(--rv-accent);padding:4px 10px;background:var(--rv-card);border-radius:2px}
/* 置けない所を押したときの一言 */
.hs-msg.no{color:var(--rv-red-ink)}
/* 最初の 2 手は光る所を大きく */
.hs-first .rv-cell.hint::after{left:24%;top:24%;width:52%;height:52%}
.hs-jo{display:flex;align-items:baseline;gap:12px;font-size:22px;padding:6px 12px;border-radius:3px;background:var(--rv-card)}
.hs-jo .jl{font-size:18px;color:var(--rv-sub)}
.hs-jo b{font:800 30px "Shippori Mincho B1",serif;color:var(--rv-accent)}
.hs-jo.flash{animation:hs-flash .8s}
@keyframes hs-flash{0%{background:var(--rv-turn)}100%{background:var(--rv-card)}}
.hs-dim{color:var(--rv-sub)}

/* 記録（共通の小さなウィンドウ shell.panel の中）。強い相手から順に、勝ち数を大きく */
.hs-recs p{margin:.4em 0}
.hs-rk{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:12px}
.hs-rkc{padding:10px 14px;border-radius:2px;min-width:0;background:var(--rv-card)}
.hs-rkc .t{display:block;font:800 22px "Shippori Mincho B1",serif;color:var(--rv-accent)}
.hs-rkc .big{display:flex;align-items:baseline;gap:6px;margin:2px 0}
.hs-rkc .big b{font-size:56px;line-height:1;font-variant-numeric:tabular-nums}
.hs-rkc .big span{font-size:22px}
.hs-rkc .sub{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:18px;color:var(--rv-sub);font-variant-numeric:tabular-nums}
.hs-rkc .sub span{white-space:nowrap}
.hs-recs .hs-clr{margin-top:18px}

/* 結果の大きな一言（共通の shell.result）を盤ゲームの書体で */
.shell-stage .sh-result h2{font:800 120px/1 "Shippori Mincho B1",serif;color:var(--rv-accent);animation:hs-big .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes hs-big{from{transform:scale(.25);opacity:0}}