/* 星形ジャンプ競争。青磁の地に木の盤とガラス玉。色は 地(青磁)・木(黄土)・藍(ボタン) の 3 つを軸にする（world.json の palette。ホームの theme と同じ組）。
   地は「青磁の色」と分かる中間の強さ（HSL 155° 38% 73%）。強い色は駒・ボタン・題字の小さな面だけ。
   部屋のページにも差し込むので、決まりは全部 .hs の中に閉じる */
.hs {
  --paper: #9fd4be;
  --paper2: #8cc6ae;
  --ink: #10261e;
  --ink2: #244a3c;
  --wood: #d6b277;
  --wood2: #c49a5c;
  --edge: #7a5326;
  --hole: #8a6236;
  --shu: #a8431f;  /* 朱（盤の上でなぞる線・残り時間の少ない帯） */
  --shu-ink: #7f2f12;  /* 朱の字（地の上で 4.5 以上） */
  --gold: #f2c94c;
  --ui-red: #2f4f7f; --ui-red-ink: #ffffff;  /* 部屋のページでも主なボタンをホームと同じ藍に（白の字 約 8.6） */
  position: absolute; inset: 0; background: var(--paper); color: var(--ink); overflow: hidden;
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif; font-size: 20px; line-height: 1.5;
}
.hs .mincho, .hs .hs-cap { font-family: "Shippori Mincho", serif; }
.hs [hidden] { display: none !important; }
.hs .scr { position: absolute; inset: 0; display: grid; }

/* ---- 盤 ---- */
.hs .hs-board { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.hs .hs-board svg { width: 100%; height: 100%; display: block; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.hs .hs-wood { fill: var(--wood); stroke: var(--edge); stroke-width: 7; stroke-linejoin: round; }
.hs .hs-wood-in { fill: none; stroke: var(--wood2); stroke-width: 2; stroke-linejoin: round; }
.hs .hs-hole { fill: var(--hole); stroke: #5e3f1c; stroke-width: 1.2; }
.hs .hs-stone { fill: #9a948a; stroke: #4d4943; stroke-width: 1.6; }
.hs .hs-sel { fill: none; stroke: var(--ink); stroke-width: 3; }
.hs .hs-glow { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 3 3; opacity: .55; }
.hs .hs-ts { fill: #fff8e6; stroke: var(--ink); stroke-width: 1.5; }
.hs .hs-tj { fill: var(--gold); stroke: var(--ink); stroke-width: 2; }
.hs .hs-ts.pre, .hs .hs-tj.pre { fill: none; stroke-dasharray: 4 3; stroke-width: 2; }
.hs .hs-tn { text-anchor: middle; font: 700 16px "Zen Kaku Gothic New", sans-serif; fill: var(--ink); pointer-events: none; }
.hs .hs-tn.pre { opacity: .6; }
.hs .hs-last { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .5; }
.hs .hs-from { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: .5; }
.hs .hs-shadow { display: none; }
.hs .hs-trace { fill: none; stroke: var(--shu); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.hs .hs-dot { fill: var(--shu); opacity: 0; animation: hs-dot 1.4s ease-out forwards; }
@keyframes hs-dot { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.hs .hs-cap { position: absolute; left: 0; right: 0; top: 42%; text-align: center; pointer-events: none;
  font-size: 56px; font-weight: 700; color: var(--shu-ink); letter-spacing: .08em;
  -webkit-text-stroke: 8px var(--paper); paint-order: stroke fill;
  opacity: 0; transform: scale(.9); transition: opacity .2s, transform .2s; }
.hs .hs-cap.show { opacity: 1; transform: scale(1); }
/* キーボードで選んでいる穴（Tab で盤に入ったときだけ見える） */
.hs .hs-board svg:focus { outline: none; }
.hs .hs-kcur { display: none; fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 5 3; }
.hs .hs-board svg:focus-visible .hs-kcur { display: inline; }
/* 盤の拡大と全体の切り替え（スマホで盤を拡大しているときだけ出る）。小さい画面でも 44px 以上になるよう枠の座標で大きめに */
.hs .hs-zoom { position: absolute; left: 8px; top: 8px; z-index: 2; min-width: 112px; min-height: 84px; padding: 0 16px;
  font: 700 26px "Zen Kaku Gothic New", sans-serif; color: var(--ink); background: #b9e0cf; border: 2px solid #5f9a83; border-radius: 4px; cursor: pointer; }
.hs .hs-zoom:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---- 横と縦の並び ---- */
.hs.land .scr.play { grid-template-columns: 690px 1fr; }
.hs.port .scr.play { grid-template-rows: 740px 1fr; }
.hs .scr.play .hs-board { padding: 10px; }
.hs.port .scr.play .hs-board { padding: 0; }  /* 縦は盤を枠の幅いっぱいにして穴を大きく */
.hs .side { padding: 22px 26px 18px 6px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.hs.port .side { padding: 0 28px 20px; }

/* ひとりで遊ぶページ（app.js）だけ: 上 64px は共通の帯（shell.bar）、右下（縦は下）は共通の操作の置き場 */
.hs.hs-solo .scr.play { top: 64px; }
.hs.hs-solo.land .scr.play { grid-template-columns: 660px 1fr; }
.hs.hs-solo.land .scr.play .hs-board { padding: 0 6px; }  /* 横は高さが盤の大きさを決めるので上下の余白を詰め、穴を少しでも大きく */
.hs.hs-solo.port .scr.play { grid-template-rows: 660px 1fr; }
.hs.hs-solo .side { padding-bottom: 104px; }
.hs.hs-solo.land .side { padding-top: 14px; }
/* ホームの絵（shell.home の h.art の中）: CPU どうしのデモ対局。操作は受け付けない */
.hs.hs-art { pointer-events: none; }
.hs.hs-art .demo-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; }
.hs.hs-art .hs-board { flex: 1; padding: 14px; }
.hs.hs-art .hs-cap { font-size: 44px; }
.hs .demo-cap { margin: 0 0 10px; text-align: center; font-size: 17px; color: var(--ink2); }
/* ホームの右の列: 背の低い画面でも下の段まで送れるように */
.hs-home .sh-info { overflow-y: auto; }
/* 顔の色の組（world.json）: 地 #9fd4be（青磁）・文字 #10261e（9.6）・薄い文字 #244a3c（6.0）・ボタン #2f4f7f（藍のガラス玉。白の字 約 8.6。淡い地に山吹のボタンの組はやめた）。
   ボタンの大きさは共通のまま。色と質感だけ: 影を消し、主なボタンは地と分かれるよう濃い藍の線、控えめなボタンは明るい青磁と細い線で */
.hs-face .ui-btn { box-shadow: none; }
.hs-face .ui-btn:not(.sub) { border-color: #1c3253; }
.hs-face .ui-btn.sub { background: #b9e0cf; color: #10261e; border-color: #5f9a83; }
/* 木の質感: 帯は盤の縁と同じ木の線で区切り、小さなウィンドウは上に木の桟を渡す */
.hs-face .sh-bar { background: #9fd4be; border-bottom: 3px solid #c49a5c; }
.hs-face .sh-box { box-shadow: none; border: 1.5px solid #6fae95; border-top: 6px solid #8a6236; }
.hs-face .sh-box header { border-bottom: 1px solid #6fae95; }
/* 遊び方の図（guide.js）: shell.guide の 260×160 の枠いっぱいに盤の一部を描く */
.hs.hs-pic { pointer-events: none; }
.hs.hs-pic > div { position: absolute; inset: 0; }
/* 小さなウィンドウ（shell.panel）の中身。.hs の外なので値を直に書く */
.hs-rules p { margin: 0 0 10px; }
.hs-pzl { display: flex; flex-direction: column; gap: 10px; color: #10261e; }
.hs-pzn { margin: 0; color: #244a3c; font-size: 18px; }
.hs-pz { display: flex; align-items: center; gap: 14px; padding: 8px 4px; border-bottom: 1px solid #6fae95; }
.hs-pz .nm { flex: 1; min-width: 0; font-family: "Shippori Mincho", serif; font-size: 21px; }
.hs-pz .st { color: #244a3c; font-size: 16px; line-height: 1.4; text-align: right; white-space: nowrap; }
.hs-recp { display: flex; flex-direction: column; gap: 14px; }
.hs-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; color: #10261e; }
.hs-big > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-top: 3px solid #2f4f7f; }
.hs-big b { font-size: 40px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hs-big small { font-size: 18px; margin-left: 2px; }
.hs-big span { font-size: 15px; color: #244a3c; white-space: nowrap; }
.hs-pzt { width: 100%; border-collapse: collapse; font-size: 18px; color: #10261e; }
.hs-pzt th { font-size: 14px; font-weight: 400; color: #244a3c; text-align: right; padding: 0 8px 4px; border-bottom: 2px solid #244a3c; }
.hs-pzt th:first-child, .hs-pzt td:first-child { text-align: left; }
.hs-pzt td { padding: 6px 8px; text-align: right; border-bottom: 1px solid #6fae95; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hs-pzt td:nth-child(2) { font-weight: 700; }
.hs-pzt tr.ok td:nth-child(2) { color: #5e3d08; }
/* 設定（shell.home の settings） */
.hs-det { display: flex; flex-direction: column; gap: 10px; padding: 8px 2px 4px; color: #10261e; font-size: 18px; }
.hs-det p { margin: 0; }
.hs-det .hs-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hs-det .hs-lbl { min-width: 5.5em; color: #244a3c; }
.hs-det .seg-on, .hs .seg-on { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
/* 結果（shell.result）に足す一行 */
.hs-rnote { margin: 0; font-size: 20px; color: var(--ui-sub, #244a3c); text-align: center; max-width: 80%; }

.hs .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hs .row .lbl { min-width: 4.5em; color: var(--ink2); font-size: 18px; }
.hs .grow { flex: 1; }
.hs .lead { margin: 0; color: var(--ink2); }
/* 手番の札 */
.hs .turn { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 700; min-height: 44px; }
.hs .dot { width: 22px; height: 22px; border-radius: 50%; display: inline-block; flex: none; border: 2px solid var(--ink); }
.hs .dot.s { width: 14px; height: 14px; border-width: 1.5px; }
.hs .bar { height: 10px; background: var(--paper2); border: 1px solid var(--ink2); overflow: hidden; }
.hs .bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 0; }
.hs .bar.low i { background: var(--shu); }
.hs .meta { display: flex; justify-content: space-between; color: var(--ink2); font-size: 18px; }
.hs .note { margin: 0; color: var(--ink2); font-size: 17px; }
.hs .plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 19px; }
.hs .plist li { display: flex; align-items: center; gap: 10px; padding: 3px 8px; border-left: 4px solid transparent; min-width: 0; }
.hs .plist li.now { border-left-color: var(--ink); background: var(--paper2); }
.hs .plist .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs .plist .pc { font-variant-numeric: tabular-nums; color: var(--ink2); }
.hs.port .plist { display: grid; grid-template-columns: 1fr 1fr; }

/* 結果はひとりのページは共通の shell.result、部屋（party.js）は部屋の共通の結果画面。作品で結果の重ねは作らない */