/* ===== 軍人将棋：盤面メインのレイアウト ===== */
.h { font-family: var(--serif); margin: 22px 0 10px; font-size: 16px; letter-spacing: .1em; }
.links { margin-top: 14px; }

/* 1画面の構成：状態バー／出来事／盤 （下のツールバーは固定） */
.g { --chrome: 200px; display: grid; gap: 6px; padding-top: 8px; }
.g.setup { --chrome: 250px; }

.gbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; background: rgba(246, 239, 224, .12); }
.gbar b { font-size: 15px; white-space: nowrap; }
.gbar span { font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbar i { font-style: normal; color: var(--lantern); margin: 0 5px; }
.gbar.hot { background: linear-gradient(180deg, #d9533c, var(--red-dark)); }

/* 直近の出来事（高さ固定。◀▶で履歴を1手ずつ） */
.gevent { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 6px; height: 56px; padding: 0 4px; border-radius: 10px; background: var(--cream); color: var(--ink); }
.gevent:not(:has(button)) { grid-template-columns: 1fr; padding: 0 12px; }
.gevent > button { height: 44px; border: 0; border-radius: 8px; background: #e9dcc0; font: 900 14px var(--sans); color: var(--ink); cursor: pointer; }
.gevent > button:disabled { opacity: .3; }
.gevent-t { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.gevent-t small { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10.5px; color: var(--ink-soft); line-height: 1.3; white-space: nowrap; }
.gevent-t span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.35; }
.gevent.past { background: #fff3c4; }
.gevent.warn span { color: var(--red-dark); font-weight: 700; }
.gnow { border: 0; border-radius: 99px; padding: 1px 8px; background: var(--red); color: #fff; font: 700 10px var(--sans); cursor: pointer; }

/* 盤：画面の高さに合わせて大きさを決め、1画面に収める */
.gboard-wrap { display: flex; justify-content: center; }
.board {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; padding: 5px; border-radius: 10px;
  background: linear-gradient(180deg, #5b3b22, #3e2716);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .5), inset 0 0 0 2px #2a1a0e;
  user-select: none; -webkit-user-select: none;
}
.gboard { width: min(100%, calc((100vh - var(--chrome)) * .76)); width: min(100%, calc((100dvh - var(--chrome)) * .76)); }
.gboard-wrap.replaying .board { box-shadow: 0 0 0 3px #fff3c4, 0 10px 22px rgba(0, 0, 0, .5); }
.cell { position: relative; aspect-ratio: 1 / 1; border-radius: 5px; cursor: pointer; background: rgba(226, 198, 151, .16); display: flex; align-items: center; justify-content: center; }
.cell.hq { grid-column: span 2; aspect-ratio: auto; background: rgba(200, 64, 46, .28); box-shadow: inset 0 0 0 1.5px rgba(255, 176, 112, .6); }
.hqlabel { font: 700 9px var(--sans); font-style: normal; color: var(--lantern); pointer-events: none; }
.gate-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; height: 10px; }
.gate-row span { border-radius: 3px; background: repeating-linear-gradient(90deg, #1b2a4d 0 6px, #24365f 6px 12px); }
.gate-row span.gate { background: none; box-shadow: inset 0 0 0 1.5px var(--lantern); }

/* 将棋の駒の形 */
.koma { position: relative; width: 86%; height: 90%; display: flex; align-items: center; justify-content: center; pointer-events: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.koma::before { content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 86% 16%, 100% 100%, 0 100%, 14% 16%); background: linear-gradient(180deg, #f6d77a, #e2b44c); }
.koma > span { position: relative; padding-top: 18%; font-family: var(--serif); font-weight: 900; font-size: clamp(11px, 3.6vw, 16px); line-height: 1; color: #3a2408; }
.koma.l3 > span { font-size: clamp(7px, 2.4vw, 11px); letter-spacing: -.06em; }
.koma.enemy { transform: rotate(180deg); }
.koma.enemy::before { background: linear-gradient(180deg, #e9c565, #c9952f); }
.koma.enemy > span { transform: rotate(180deg); padding: 0 0 18%; color: #6e1f13; }
.koma .seal { position: absolute; left: 6%; right: 6%; top: 34%; transform: rotate(180deg); padding: 1px 0; border-radius: 3px; background: #b04fa6; color: #fff; font: 900 clamp(7px, 2.2vw, 10px) var(--serif); text-align: center; letter-spacing: -.05em; }
.hq .koma { width: 42%; }
.cell.can .koma.mine { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 3px var(--lantern)); }
.cell.sel { background: rgba(255, 176, 112, .6); }
.cell.sel .koma.mine { transform: translateY(-3px); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 4px #fff3c4); }
.cell.last { box-shadow: inset 0 0 0 2px rgba(255, 226, 168, .55); }
.cell.target::after { content: ""; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgba(255, 226, 168, .9); pointer-events: none; }
.cell.target.attack::after { width: auto; height: auto; inset: 1px; border-radius: 5px; background: none; box-shadow: inset 0 0 0 3px #ffe2a8; }
.cell.bad .koma::before { background: linear-gradient(180deg, #ff9b84, #e0553c); }
.cell.sealable .koma.enemy { filter: drop-shadow(0 0 3px #e7a6df); }

/* 配置のボタン */
.gsetup { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
.gsetup .btn { padding: 10px 6px; }

/* 下のツールバー（固定） */
.gtools {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-width: 480px; margin: 0 auto;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(13, 20, 40, .94); backdrop-filter: blur(6px);
}
.gtools button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; border: 0; border-radius: 8px; padding: 5px 0; background: none; color: var(--cream); font: 700 11px var(--sans); cursor: pointer; }
.gtools button i { font-style: normal; font-size: 17px; line-height: 1.1; }
.gtools button.on { background: rgba(176, 79, 166, .45); }
.gtools b { position: absolute; top: 0; right: 22%; min-width: 16px; padding: 0 4px; border-radius: 99px; background: var(--red); font-size: 10px; }

/* シールのトレイ（ツールバーの上に重ねる） */
.gtray { position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 39; max-width: 480px; margin: 0 auto; padding: 6px 8px 8px; background: #f3d7ef; color: #4a2148; box-shadow: 0 -6px 14px rgba(0, 0, 0, .3); }
.gtray-h { font: 700 11px var(--sans); margin-bottom: 5px; }
.gtray-s { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.seal-btn { min-width: 0; height: 34px; border: 0; border-radius: 5px; padding: 0; font: 900 clamp(9px, 2.8vw, 12px)/1.1 var(--serif); letter-spacing: -.06em; background: #b04fa6; color: #fff; cursor: pointer; }
.seal-btn.all { font-size: clamp(8px, 2.3vw, 10px); }
.seal-btn.on { background: #ffe2a8; color: #4a2148; box-shadow: 0 0 0 2px #b04fa6; }
.seal-btn.peel { background: #fff; color: #b04fa6; box-shadow: inset 0 0 0 1.5px #b04fa6; }

/* 子画面 */
.pop-bg { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .5); }
.pop { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 440px); max-height: 82vh; display: flex; flex-direction: column; border-radius: 14px; background: var(--cream); color: var(--ink); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.pop.wide { width: min(96vw, 460px); }
.pop-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px 16px; border-bottom: 1px solid #e3d6b8; }
.pop-h b { font-family: var(--serif); font-size: 16px; }
.pop-h button { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 4px 8px; }
.pop-b { overflow: auto; padding: 10px 14px 14px; }
.mini { font-size: 12px; color: var(--ink-soft); margin: 4px 0 8px; }
.stack { display: grid; gap: 8px; }
.stack .btn { text-align: center; text-decoration: none; }
.btn.ghost-dark { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px #c9b48a; }

/* 相性表 */
.aisho { padding: 6px; border-radius: 10px; background: linear-gradient(180deg, #d6ddf6, #bfc9ee); color: #1d2a55; }
.aisho table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.aisho th, .aisho td { padding: 0; text-align: center; border: 1px solid rgba(255, 255, 255, .55); }
.aisho th { font: 700 10px var(--serif); background: rgba(255, 255, 255, .35); }
.aisho tr > th:first-child { width: 3.4em; white-space: nowrap; letter-spacing: -.08em; }
.aisho th.corner { font: 700 8px var(--sans); }
.aisho th.v { height: 34px; vertical-align: bottom; }
.aisho th.v span { display: inline-block; writing-mode: vertical-rl; letter-spacing: -.08em; line-height: 1; padding: 1px 0; }
.aisho td { height: 17px; font: 900 11px/1 var(--sans); }
.aisho td.o { color: #d33b3b; } .aisho td.x { color: #2f5fc4; } .aisho td.t { color: #2a8f55; }
.aisho td.flag { color: #7a6a9a; font: 700 9px var(--serif); }
.aisho tr.focus th, .aisho tr.focus td { background: #fff3c4; }
.aisho tr.focus th { color: #9c2f1f; }
.aisho p { margin: 6px 2px 0; font-size: 10px; color: #3a4a7a; }

/* 履歴・前回から */
.hists { display: grid; gap: 4px; margin-bottom: 10px; }
.hist { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; width: 100%; border: 0; border-radius: 8px; padding: 8px 10px; background: #fff; text-align: left; font: 13px var(--sans); color: var(--ink); cursor: pointer; }
.hist b { min-width: 2em; color: var(--red-dark); font-family: var(--serif); }
.hist.mine { background: #f2ead6; }
.hist small { grid-column: 2; color: var(--ink-soft); font-size: 11px; }

/* 一時表示（画面の上に重ねる） */
.toast { position: fixed; z-index: 70; left: 50%; top: 12px; transform: translateX(-50%); max-width: 90vw; padding: 10px 14px; border-radius: 10px; background: #fff0ec; color: var(--red-dark); font-size: 13px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }

/* ルールページ */
.rules { background: var(--cream); color: var(--ink); border-radius: 12px; padding: 4px 16px 16px; line-height: 1.7; font-size: 14px; }
.rules h2 { font-family: var(--serif); font-size: 17px; margin: 18px 0 6px; border-bottom: 2px solid var(--wood-dark); }
.rules ul { padding-left: 1.2em; margin: 6px 0; }
.mx-wrap { overflow-x: auto; margin: 8px -16px 0; padding: 0 16px; }
.mx { border-collapse: collapse; font-size: 11px; }
.mx th, .mx td { border: 1px solid #d8c9a8; padding: 3px 4px; text-align: center; white-space: nowrap; }
.mx th { background: #efe3c8; font-weight: 700; }
.mx td.o { color: var(--ok); font-weight: 700; } .mx td.x { color: var(--red-dark); } .mx td.t { color: #8a6a3a; }


.rules.pop-rules { padding: 0; background: none; font-size: 13.5px; }
.rules.pop-rules h2 { margin-top: 10px; }

/* ===== 部屋づくり・招待 ===== */
.lobby-box { display: grid; gap: 10px; }
.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1; min-width: 0; border: 0; border-radius: 10px; padding: 12px; font: 900 18px var(--sans); letter-spacing: .2em; text-transform: uppercase; text-align: center; background: var(--cream); color: var(--ink); }
.join-row input::placeholder { font-size: 14px; letter-spacing: .05em; font-weight: 400; }
.join-row .btn { flex: none; padding: 12px 20px; }
.join-card, .invite { margin-top: 18px; padding: 20px 18px; border-radius: 14px; background: var(--cream); color: var(--ink); text-align: center; display: grid; gap: 10px; box-shadow: 0 10px 22px rgba(0, 0, 0, .4); }
.join-card h2 { margin: 0; font-family: var(--serif); font-size: 22px; }
.join-card p, .invite p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.join-from { font-weight: 700; color: var(--red-dark) !important; }
.join-card .btn, .invite .btn { text-decoration: none; text-align: center; }
.invite-code { font: 900 40px/1.1 var(--sans); letter-spacing: .18em; padding: 12px 0 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px #e3d6b8; user-select: all; -webkit-user-select: all; }
.invite small { color: var(--ink-soft); font-size: 12px; }
.invite .btn.ghost, .join-card .btn.ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px #c9b48a; }
.mini-c { font-size: 12px !important; }