/* とりっこマンカラ: 盤・場面の色だけ。ボタン・枠・見出しは /ui.css のまま（色は CSS 変数で渡す） */
/* 世界観: ガーナのオワレ。赤土を塗った壁の前に木彫りの盤、種石とケンテ布の金・緑・赤（2026-10-23 手直し）。
   地は「赤土」と分かる中間の色（HSL 14,50%,72%）。強い金・緑・赤は種石・主なボタン・題字の帯の小さな面だけ。影・グラデ・光る縁は使わない
   palette: 赤土 #DBA594 / 焦げ茶 #2B1E14・#4A3020 / ケンテの緑 #1E6B3A・金 #F5BE2E・赤 #C8402A / 木 #B97F4A */
:root {
  --paper: #DBA594;
  --sheet: #F6EDE6;
  --risk: #2F4A6B;
  --ink: #2B1E14;
  --ink2: #4A3020;
  --wood: #B97F4A;
  --wood-dk: #7A4A24;
  --pit: #5A3520;
  --rim: #3A2213;
  --hot: #F5BE2E;
  --take: #C8402A;
  --take-ink: #7E2412;
  --line: #B98572;
  --light: #F6EDE6;
}
/* 共通部品の色は変数で渡す（.ui-btn 自体は上書きしない） */
.shell-stage { --ui-chip: #EFD4C9; }

.mk-app { position: absolute; inset: 0; background: var(--paper); color: var(--ink); font-family: "Zen Kaku Gothic New", system-ui, sans-serif; font-size: 30px; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.mk-app .serif, .mk-app h1 { font-family: "Kaisei Decol", serif; }
.mk-screen { position: absolute; inset: 0; }
.mk-abs { position: absolute; }

/* 盤 */
.mk-layer { position: absolute; inset: 0; }
.mk-wood { position: absolute; box-sizing: border-box; background: var(--wood); border-radius: 6px; border-bottom: 10px solid var(--wood-dk); }  /* 木の色と下の厚みだけ（木目の線はやめた。2026-10-24） */
.mk-pit { position: absolute; border-radius: 50%; background: var(--pit); box-shadow: inset 0 0 0 5px var(--rim); transition: box-shadow .15s, transform .12s; }
.mk-dots { position: absolute; inset: 0; pointer-events: none; }
.mk-dots i, .mk-pile i { position: absolute; border-radius: 50%; box-sizing: border-box; border: 1.5px solid #00000040; }
.mk-cnt { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); min-width: 40px; height: 34px; padding: 0 6px; border-radius: 6px; background: var(--sheet); color: var(--ink);
  font: 700 24px/30px "Kaisei Decol", serif; text-align: center; border: 2px solid var(--wood-dk); pointer-events: none; }
.mk-pit.far .mk-cnt { bottom: auto; top: -16px; }
.mk-pit.empty .mk-cnt { opacity: .55; }
.mk-gain { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 800 34px "Kaisei Decol", serif; color: #fff; pointer-events: none; }
.mk-pit.can { cursor: pointer; box-shadow: inset 0 0 0 5px var(--rim), 0 0 0 4px var(--sheet); }
.mk-pit.can:hover { transform: scale(1.04); }
.mk-pit.hot { box-shadow: inset 0 0 0 5px var(--rim), 0 0 0 8px var(--hot); }
.mk-pit.sel { transform: scale(1.06); box-shadow: inset 0 0 0 5px var(--rim), 0 0 0 6px var(--ink); }
.mk-pit.land::after, .mk-pit.will::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 4px dashed var(--ink); pointer-events: none; }
.mk-pit.will::after { border: 5px solid var(--take); }
.mk-pit.take { background: var(--take); }
.mk-pit.pop { animation: mk-pop .18s ease-out; }
.mk-pit.hop { animation: mk-hop .22s ease-out; }
/* 取れる穴: 琥珀の輪が太くなったり細くなったり（ぼかしの光は使わない） */
@keyframes mk-glow { from { box-shadow: inset 0 0 0 5px var(--rim), 0 0 0 4px var(--hot); } to { box-shadow: inset 0 0 0 5px var(--rim), 0 0 0 10px var(--hot); } }
@keyframes mk-pop { 50% { transform: scale(1.07); } }
@keyframes mk-hop { 40% { transform: translateY(5px) scale(1.1); } }
/* 相手に取られる穴: 藍の点線と −数（琥珀の「+数」より控えめ） */
.mk-pit.risk::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 3px dotted var(--risk); pointer-events: none; }
.mk-risk { position: absolute; right: -8px; top: -8px; padding: 0 4px; border-radius: 4px; background: var(--sheet); font: 700 22px "Kaisei Decol", serif; color: var(--risk); pointer-events: none; }
.mk-prev { position: absolute; transform: translate(-50%, -100%); padding: 0 10px; border-radius: 6px; background: var(--sheet); color: var(--ink); font: 700 26px/36px "Kaisei Decol", serif; white-space: nowrap; z-index: 8; pointer-events: none; border: 2px solid var(--wood-dk); }
.mk-prev b { color: var(--take-ink); }
.mk-prev span { color: var(--risk); font-size: 22px; }
/* CPU が選ぶ穴を 1 回光らせる */
.mk-pit.pick { animation: mk-pick .35s ease-out; }
@keyframes mk-pick { 40% { box-shadow: inset 0 0 0 5px var(--rim), 0 0 0 8px var(--hot); transform: scale(1.06); } }
/* 持ち時間の残り 5 秒: 打てる穴の輪が赤く点滅 */
.mk-layer.hurry .mk-pit.can { animation: mk-hurry .5s steps(2, jump-none) infinite; }
@keyframes mk-hurry { from { box-shadow: inset 0 0 0 5px var(--rim), 0 0 0 6px var(--take); } to { box-shadow: inset 0 0 0 5px var(--rim), 0 0 0 4px var(--sheet); } }
/* 連続取り: 盤の揺れ、4 穴以上でふちが赤くなる */
.mk-layer.shake { animation: mk-shake .12s linear; }
@keyframes mk-shake { 25% { transform: translateX(var(--amp)); } 75% { transform: translateX(calc(var(--amp) * -1)); } }
.mk-wood.rim { box-shadow: 0 0 0 8px var(--take); transition: box-shadow .1s; }
/* 初めての 1 手の吹き出し */
.mk-tip { position: absolute; transform: translate(-50%, -100%); padding: 6px 18px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 28px; font-weight: 700; white-space: nowrap; z-index: 9; pointer-events: none; }
.mk-tip::after { content: ""; position: absolute; left: 50%; bottom: -12px; margin-left: -10px; border: 10px solid transparent; border-top-color: var(--ink); border-bottom: 0; }

.mk-store { position: absolute; border-radius: 6px; background: var(--pit); box-shadow: inset 0 0 0 5px var(--rim); overflow: hidden; }
.mk-pile { position: absolute; inset: 0; opacity: .9; }
.mk-num { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 800 64px "Kaisei Decol", serif; color: #fff; }
.mk-store.pop { animation: mk-pop .25s ease-out; }
.mk-name { position: absolute; font-size: 30px; font-weight: 700; color: var(--ink2); white-space: nowrap; }
.mk-name.turn { color: var(--ink); }
.mk-name.turn::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; border-radius: 50%; background: var(--take); vertical-align: 2px; }
.mk-hand { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--sheet); border: 4px solid var(--ink); color: var(--ink); font: 800 28px/1 "Kaisei Decol", serif; display: flex; align-items: center; justify-content: center; z-index: 5; pointer-events: none; }
.mk-hand[hidden] { display: none; }  /* 持ち手の丸は、まいている間だけ（左上に残らない） */
.mk-fly { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; transition: transform .45s cubic-bezier(.5, 0, .6, 1), opacity .45s; z-index: 6; pointer-events: none; }
.mk-pop { position: absolute; transform: translate(-50%, -50%); font: 800 48px "Kaisei Decol", serif; color: var(--hot); -webkit-text-stroke: 3px var(--rim); paint-order: stroke fill; z-index: 7; pointer-events: none; animation: mk-rise .9s ease-out forwards; }
@keyframes mk-rise { to { transform: translate(-50%, -110%); opacity: 0; } }
.mk-pop.big { font-size: 72px; }

/* 場面の文字（一言の帯） */
.mk-msg { position: absolute; left: 0; right: 0; text-align: center; font-size: 36px; font-weight: 700; min-height: 48px; color: var(--ink); }
.mk-sub { position: absolute; left: 0; right: 0; text-align: center; font-size: 24px; color: var(--take-ink); font-weight: 700; }
.mk-big { font-size: 30px; }
/* 部屋の帯（party.js） */
.mk-bar { position: absolute; left: 24px; right: 24px; top: 18px; display: flex; gap: 14px; align-items: center; font-size: 24px; }
.mk-bar .grow { flex: 1; }

/* ホーム・帯は赤土の地に字だけ置く（共通の .ui-btn は変数経由の色のまま。2026-10-23） */
.sh-home .sh-art { background: var(--paper); border: 2px solid var(--line); box-sizing: border-box; }  /* 左のデモは盤の画面そのまま */
.sh-bar { border-bottom: 2px solid var(--line); }  /* 帯の下は濃い赤土の細い線 */
/* 小さなウィンドウは明るい紙で読む。結果は遊ぶ画面と同じ赤土の地 */
.sh-win, .sh-result { --ui-card: #F6EDE6; --ui-ink: #2B1E14; --ui-sub: #4A3020; --ui-shade: #DBA594f5; }

/* ホーム（共通の shell.home の中身） */
.mk-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.mk-count { font-size: 24px; color: var(--ink2); }
.mk-count b { color: var(--ink); }
/* ホームの絵（CPU 同士のデモ）。押せない */
.mk-art { position: absolute; transform-origin: 0 0; pointer-events: none; background: var(--paper); font-family: "Zen Kaku Gothic New", system-ui, sans-serif; font-size: 30px; color: var(--ink); }
.mk-art > div { position: absolute; inset: 0; }
.mk-tight { gap: 8px; }
/* 詳しく・設定（shell.panel の中身） */
.mk-det { display: flex; flex-direction: column; gap: 8px; }
.mk-det .mk-rules { font-size: 19px; }
.mk-det .mk-note { font-size: 17px; margin: 4px 0; }
.mk-det .mk-tbl { font-size: 20px; margin: 0 0 6px; }
.mk-det .mk-tbl td, .mk-det .mk-tbl th { padding: 4px 16px; }
/* 記録: 自分の数を大きく並べる（2026-10-22）。狭い窓でも切れないよう折り返す */
.mk-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.mk-stats > div { padding: 10px 14px; border-bottom: 3px solid #1E2A2222; min-width: 0; }
.mk-stats p { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.mk-stats b { font: 800 44px/1.1 "Kaisei Decol", serif; }
.mk-stats span { font-size: 17px; color: var(--ink2); }
.mk-h { margin: 10px 0 0; font-size: 22px; font-weight: 700; }
.mk-line { margin: 0; }
.mk-set { display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; align-items: center; }
.mk-set > span { white-space: nowrap; }
.mk-link { background: none; border: 0; padding: 8px 16px; min-height: 48px; min-width: 48px; box-sizing: border-box; font: inherit; font-size: 22px; color: var(--ink2); text-decoration: underline; text-underline-offset: 6px; cursor: pointer; }

/* 結果（共通の shell.result の下に足す行） */
.mk-more { text-align: center; color: var(--ink); font-family: "Zen Kaku Gothic New", system-ui, sans-serif; }
.mk-more .mk-note { margin: 2px 0 6px; }
.mk-more .mk-recs b { font-size: 32px; }

/* 重ねて出す枠（遊び方・詳しく・記録・結果） */
.mk-over { position: absolute; inset: 0; background: #1E2A2266; display: flex; align-items: center; justify-content: center; z-index: 25; }  /* 共通の帯（20）より上、結果（30）より下 */
.mk-over > .ui-panel { max-width: 88%; max-height: 90%; overflow: auto; font-size: 28px; }
.mk-over h2 { margin: 0 0 16px; }
.mk-rules { margin: 0; padding-left: 1.2em; line-height: 1.6; }
/* 部屋の画面の遊び方（shell.guide と同じ形: 札 2 つ・図つき） */
.mk-gsteps { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: mkg; }
.mk-gsteps li { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: center; counter-increment: mkg; }
.mk-gsteps p { margin: 0; font-size: 24px; line-height: 1.5; }
.mk-gsteps p::before { content: counter(mkg) ". "; font-weight: 700; color: var(--take-ink); }
.mk-gpic { position: relative; width: 260px; height: 160px; border-radius: 6px; overflow: hidden; background: var(--paper); }
.mk-rules li { margin-bottom: 6px; }
.mk-tbl { border-collapse: collapse; font-size: 28px; margin-bottom: 18px; }
.mk-tbl td, .mk-tbl th { padding: 6px 18px; text-align: center; border-bottom: 2px solid #1E2A2222; }
.mk-note { font-size: 24px; color: var(--ink2); margin: 4px 0 14px; }
.mk-recs { display: flex; justify-content: center; gap: 28px; margin: 0 0 4px; }
.mk-recs b { display: inline-block; font: 800 40px "Kaisei Decol", serif; }
.mk-recs b.mk-best { animation: mk-best .6s ease-out; color: var(--take-ink); }
@keyframes mk-best { 0%, 60% { transform: scale(1.3); } }
.mk-pb { font: 800 34px "Kaisei Decol", serif; color: var(--take-ink); margin-bottom: 4px; }

/* 部屋の待つ画面 */
.mk-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
.mk-need { font: 800 72px "Kaisei Decol", serif; }
.mk-wait ul { list-style: none; margin: 0; padding: 0; font-size: 24px; line-height: 1.5; color: var(--ink2); }
/* 部屋の持ち時間（文字は出さず、帯だけ） */
.mk-time { position: absolute; left: 50%; width: 320px; margin-left: -160px; height: 8px; border-radius: 4px; background: #1E2A221a; overflow: hidden; }
.mk-time i { display: block; height: 100%; background: var(--ink2); }
.mk-time.low i { background: var(--take-ink); }
/* 押せない穴を押した: 穴が小さく首をふり、理由を一言（U8） */
.mk-pit.no { animation: mk-no .28s linear; }
@keyframes mk-no { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }