:root {
  --ink: #23324a;
  --paper: #fffdf6;
  --line: rgba(35, 50, 74, .14);
  --accent: #ff7a45;
  --sky0: #bfe9ff;
  --sky1: #fff4dc;
  --tb: 0px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: linear-gradient(180deg, var(--sky0), var(--sky1)); color: var(--ink);
  font-family: 'M PLUS Rounded 1c', system-ui, -apple-system, 'Hiragino Maru Gothic ProN', sans-serif; -webkit-text-size-adjust: 100%; }
/* 地図をドラッグしても画面の文字が選択されないように（2026-10-20 本人指摘）。入力欄は選べるまま */
body { -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
button { font: inherit; color: inherit; touch-action: manipulation; cursor: pointer; }

/* 上の帯 */
.top { position: fixed; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 10px) 14px 0; pointer-events: none; }
.brand, .date { background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 5px 14px 6px; box-shadow: 0 3px 0 var(--ink); }
.brand b { font-weight: 900; font-size: 18px; letter-spacing: .04em; }
.brand span { font-weight: 700; font-size: 12px; margin-left: 8px; opacity: .6; }
.date { font-weight: 800; font-size: 15px; }

/* 下の操作 */
.dock { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 12px + var(--tb)); display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 0 12px; pointer-events: none; }
.seg { display: flex; background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 3px 0 var(--ink); overflow: hidden; pointer-events: auto; }
.seg button { border: 0; background: none; min-width: 46px; min-height: 44px; padding: 0 12px; font-weight: 800; font-size: 16px; }
.seg button + button { border-left: 2px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* 領地の札 */
.panel { position: fixed; left: 12px; top: calc(env(safe-area-inset-top) + 62px); width: min(300px, calc(100% - 24px)); background: var(--paper); border: 2px solid var(--ink); border-radius: 18px;
  box-shadow: 0 4px 0 var(--ink); padding: 12px 14px 14px; animation: pop .22s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.panel-close { position: absolute; right: 6px; top: 4px; border: 0; background: none; width: 40px; height: 40px; font-size: 22px; font-weight: 800; }
.panel-head { display: flex; align-items: center; gap: 8px; padding-right: 30px; }
.panel h2 { margin: 0; font-size: 22px; font-weight: 900; }
.chip { display: inline-block; border-radius: 999px; padding: 2px 10px 3px; font-size: 12px; font-weight: 800; color: #fff; border: 2px solid var(--ink); white-space: nowrap; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.stats div { background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 4px 10px 6px; }
.stats dt { font-size: 11px; font-weight: 700; opacity: .6; }
.stats dd { margin: 0; font-size: 16px; font-weight: 800; }
.row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.row-label { font-size: 12px; font-weight: 800; opacity: .7; flex: 0 0 auto; width: 64px; }
.owners { display: flex; gap: 6px; flex-wrap: wrap; }
.owners button { border: 2px solid var(--ink); border-radius: 12px; min-width: 44px; min-height: 40px; padding: 0 8px; font-weight: 800; font-size: 13px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.owners button[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #fff; }
input[type="range"] { flex: 1; accent-color: var(--accent); touch-action: pan-y; }

/* 地名 */
.labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.lb { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap; font-weight: 900; font-size: 13px; color: #fff; padding: 2px 9px 3px; border-radius: 999px;
  border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); will-change: transform; transition: opacity .25s; }
.lb.nb { background: rgba(255, 255, 255, .85) !important; color: var(--ink); font-size: 12px; }
.lb .k { display: inline-block; margin-right: 4px; font-size: 10px; background: #fff; color: var(--ink); border-radius: 6px; padding: 0 4px; vertical-align: 1px; }
.lb.cap { font-size: 15px; }
.lb .anc { display: inline-block; width: 1em; height: 1em; margin-right: 3px; vertical-align: -2px; }

/* 演出の帯 */
.banner { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); background: #ff4d5e; color: #fff; font-weight: 900; font-size: clamp(22px, 7vw, 40px);
  padding: 10px 26px 12px; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); white-space: nowrap; pointer-events: none; animation: bang 1.8s cubic-bezier(.3, 1.5, .5, 1) both; }
.banner.good { background: #2ea8ff; }
@keyframes bang { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-8deg); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.06) rotate(2deg); opacity: 1; }
  80% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; } 100% { transform: translate(-50%, -60%) scale(.96); opacity: 0; } }

.loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(180deg, var(--sky0), var(--sky1)); font-weight: 800; transition: opacity .4s; }
.loading.done { opacity: 0; pointer-events: none; }
.spin { width: 44px; height: 44px; border-radius: 50%; border: 5px solid rgba(35, 50, 74, .15); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.dev { position: fixed; right: 8px; top: calc(env(safe-area-inset-top) + 56px); margin: 0; font: 11px/1.4 ui-monospace, monospace; background: rgba(0, 0, 0, .6); color: #fff; padding: 6px 8px; border-radius: 8px; pointer-events: none; }

@media (max-width: 560px) {
  .panel { top: auto; bottom: calc(env(safe-area-inset-bottom) + 76px + var(--tb)); left: 12px; width: calc(100% - 24px); }
  .brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .panel, .banner { animation: none; } }

/* ── ゲームの画面（2026-10-16 追加）── */
.top { flex-direction: column; align-items: stretch; }
.top-row { display: flex; align-items: center; gap: 8px; }
.top-row .date { margin-left: auto; }
.icon-btn { pointer-events: auto; width: 44px; height: 40px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 0 3px 0 var(--ink); font-size: 20px; font-weight: 900; }
.brand .fchip { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); margin-right: 6px; vertical-align: -1px; }
.res { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; pointer-events: none; }
.pill { background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px 3px; font-size: 13px; font-weight: 800; box-shadow: 0 2px 0 var(--ink); white-space: nowrap; }
.pill i { font-style: normal; font-size: 10px; opacity: .6; margin-right: 4px; }
.pill em { font-style: normal; font-size: 10px; margin-left: 3px; color: #1b9a5a; }
.pill em.neg { color: #d64545; }
.pill em.dim { color: inherit; opacity: .55; }
/* 士気と勢い（2026-10-17） */
.pill.shiki.low b { color: #d64545; }
.pill.shiki.high b { color: #1b9a5a; }
button.pill { pointer-events: auto; font: inherit; font-size: 13px; font-weight: 800; color: inherit; cursor: pointer; touch-action: manipulation; }
.pill.poll.low b, .pill.poll.low .left { color: #d64545; }
.pill.poll .left { margin-left: 5px; font-size: 10px; font-weight: 800; opacity: .8; }
.pill.poll .left[hidden] { display: none; }
.pill .ride { display: inline-block; margin-left: 5px; padding: 0 6px 1px; border-radius: 999px; background: linear-gradient(90deg, #ff4d2e, #ffb11a); color: #fff; font-size: 10px; font-weight: 900; animation: ride 1.2s ease-in-out infinite alternate; }
.pill .ride[hidden] { display: none; }
/* まとめて行う（2026-10-19） */
.cmds .bulk, #panel .bulk { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 6px 12px; border: 2px dashed var(--ink); border-radius: 12px; background: #fff; text-align: left; }
#panel .bulk b { flex: none; font-size: 14px; font-weight: 900; white-space: nowrap; }
#panel .bulk small { font-size: 11px; font-weight: 800; opacity: .7; text-align: right; }
#panel .bulk::before { content: ''; flex: none; width: 34px; height: 20px; border: 2px solid var(--ink); border-radius: 999px; background: #e6e9ef; box-shadow: inset -14px 0 0 2px #fff; transition: .15s; }
#panel .bulk.on { border-style: solid; background: #fff3d6; }
#panel .bulk.on::before { background: var(--accent); box-shadow: inset 14px 0 0 2px #fff; }
/* 名産の札：種類の色とレベル（2026-10-19） */
.set .bdot { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border: 2px solid var(--ink); border-radius: 50%; background: var(--bc, #ccc); vertical-align: -1px; }
.set-head > span { flex: none; display: inline-flex; align-items: center; white-space: nowrap; }
.set .lv { display: inline-block; flex: none; width: auto; margin-left: 6px; padding: 1px 7px 2px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 11px; line-height: 1.3; }
.set:not(.done) .lv { background: #9aa5b1; }
.mcard em { font-style: normal; font-size: 10px; margin-left: 4px; opacity: .7; }
/* CPU の気質の札（2026-10-17） */
.kishitsu { display: inline-block; margin-left: 6px; padding: 1px 7px 2px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; font-size: 11px; font-weight: 800; vertical-align: 1px; }
@keyframes ride { to { filter: brightness(1.25); transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .pill .ride { animation: none; } }
.ap { display: inline-flex; gap: 4px; align-items: center; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 10px; box-shadow: 0 2px 0 var(--ink); }
.ap i { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); border: 2px solid var(--ink); }
.ap i.used { background: #e6e1d6; }
.panel { top: auto; bottom: calc(env(safe-area-inset-bottom) + 78px + var(--tb)); left: 12px; width: min(360px, calc(100% - 24px)); max-height: calc(100% - 210px); overflow: auto; overscroll-behavior: contain; touch-action: pan-y; }
.stats { grid-template-columns: 1fr 1fr; }
.bar { display: block; height: 10px; border-radius: 6px; background: #eee6da; margin-top: 6px; overflow: hidden; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, #ff7a45, #ffd23f, #2ec4b6); border-radius: 6px; }
.lv { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.lv span { font-size: 11px; font-weight: 800; background: #fff; border: 2px solid var(--line); border-radius: 8px; padding: 1px 7px; }
.cmds { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.cmd { border: 2px solid var(--ink); background: #fff; border-radius: 12px; padding: 6px 6px 7px; min-height: 48px; text-align: left; box-shadow: 0 2px 0 var(--ink); }
.cmd b { display: block; font-size: 14px; font-weight: 900; }
.cmd small { display: block; font-size: 10px; font-weight: 700; opacity: .65; }
.cmd.war { background: #ffe9e4; }
.cmd:disabled { opacity: .45; box-shadow: none; }
.cmd:not(:disabled):active { transform: translateY(2px); box-shadow: none; }
.note { margin: 8px 0 0; font-size: 12px; font-weight: 700; opacity: .7; }
.targets { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.targets button { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; padding: 6px 10px; min-height: 44px; font-weight: 800; }
.targets .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); flex: 0 0 auto; }
.odds-tag { font-size: 12px; font-weight: 900; padding: 1px 8px; border-radius: 999px; color: #fff; }
.sheet { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 90px + var(--tb)); transform: translateX(-50%); width: min(360px, calc(100% - 24px)); background: var(--paper); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); padding: 14px; z-index: 5; animation: pop .22s cubic-bezier(.3, 1.6, .5, 1); }
.sheet h3 { margin: 0 0 10px; font-size: 18px; font-weight: 900; }
.sheet select { width: 100%; font: inherit; font-weight: 800; font-size: 16px; padding: 8px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; margin: 4px 0 10px; }
.sheet .row-label { display: block; width: auto; }
.sheet input[type="range"] { width: 100%; margin: 6px 0 10px; }
.odds { font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.sheet-btns, .title-btns { display: flex; gap: 8px; }
.title-btns { flex-wrap: wrap; }
.title-btns .btn { flex: 1 1 auto; white-space: nowrap; }   /* 「セーブを読みこむ」の「む」だけが次の行に落ちていた（2026-10-20 本人指摘）。入りきらなければボタンごと次の段へ */
.btn { flex: 1; border: 2px solid var(--ink); background: var(--accent); color: #fff; font-weight: 900; font-size: 16px; border-radius: 14px; min-height: 48px; padding: 0 14px; box-shadow: 0 3px 0 var(--ink); display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.btn.ghost { background: #fff; color: var(--ink); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.file { position: relative; overflow: hidden; cursor: pointer; }
.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.next { pointer-events: auto; border: 3px solid var(--ink); background: var(--accent); color: #fff; font: inherit; font-weight: 900; font-size: 17px; border-radius: 18px; min-height: 48px; padding: 0 18px; box-shadow: 0 4px 0 var(--ink); }
.next span { margin-left: 6px; }
.next:disabled { background: #bbb; }
.next:not(:disabled):active { transform: translateY(3px); box-shadow: none; }
.title { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 16px; background: rgba(255, 250, 240, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 10; overflow: auto; }
.title-card { margin: auto 0; width: min(520px, 100%); background: var(--paper); border: 3px solid var(--ink); border-radius: 24px; box-shadow: 0 6px 0 var(--ink); padding: 20px; }
.title-card h1 { margin: 0; font-size: 40px; font-weight: 900; letter-spacing: .04em; }
.title-card h1 small { display: block; font-size: 14px; font-weight: 800; opacity: .6; letter-spacing: .1em; }
/* ロゴ（image/logo.svg・本人作成 2026-10-21）。単色の文字の形なので型抜きにして色を付ける */
.logo { display: block; width: 230px; aspect-ratio: 476.3 / 116.26; background: var(--ink); -webkit-mask: url(../image/logo.svg?v=20261021a) center / contain no-repeat; mask: url(../image/logo.svg?v=20261021a) center / contain no-repeat; }
.title-card .lead span { display: inline-block; }   /* 言葉の区切りで折り返す（スマホで「選ん／で」と折れていた） */
.title-card h1 .logo-wrap { display: block; width: max-content; margin: 2px 0 8px; filter: drop-shadow(3px 3px 0 var(--accent)); }   /* 型抜きの要素に直接かけると影も抜かれるので、包みにかける */
.loading .logo { width: 200px; margin-bottom: 6px; }
/* 読み込み（2026-10-21 本人要望「いけてるロードエフェクト」）：ロゴが墨で引かれ、47の升が進み具合に合わせて県の色で埋まる。
   升の動きは CSS（重い処理で JS が止まっても動く）。読みこめたら「タップしてはじめる」＝ここで音を始める */
.loading { z-index: 60; overflow: hidden; }
.loading::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 42%); pointer-events: none; }
.loading .logo { position: relative; width: min(320px, 72vw); margin-bottom: 4px; animation: ldLogo 1.1s cubic-bezier(.2, .9, .3, 1) both; filter: drop-shadow(3px 3px 0 var(--accent)); }
@keyframes ldLogo { 0% { clip-path: inset(0 100% 0 0); transform: translateY(6px); } 70% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); transform: none; } }
.ld-tiles { position: relative; display: grid; grid-template-columns: repeat(12, 14px); gap: 5px; margin-top: 6px; }
.ld-tiles i { width: 14px; height: 14px; border-radius: 4px; background: rgba(35, 50, 74, .12); box-shadow: inset 0 0 0 1.5px rgba(35, 50, 74, .18); }
.ld-tiles i.on { background: var(--c); box-shadow: inset 0 0 0 1.5px var(--ink), 0 2px 0 var(--ink); animation: ldPop .38s cubic-bezier(.3, 1.6, .5, 1) both; }
.ld-tiles i.wait { animation: ldWait 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--k) * 40ms); }
@keyframes ldPop { from { transform: scale(.2) rotate(-20deg); } to { transform: none; } }
@keyframes ldWait { from { opacity: .45; transform: translateY(0); } to { opacity: 1; transform: translateY(-3px); } }
.ld-msg { position: relative; margin: 2px 0 0; font-size: 14px; font-weight: 800; color: var(--ink); min-height: 1.6em; }
.ld-gate { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }
.ld-gate[hidden] { display: none !important; }
.ld-start { border: 3px solid var(--ink); background: var(--accent); color: #fff; font: inherit; font-size: 20px; font-weight: 900; letter-spacing: .06em; padding: 14px 30px 15px; border-radius: 999px; box-shadow: 0 5px 0 var(--ink); cursor: pointer; animation: ldStart 1.2s ease-in-out infinite; }
@keyframes ldStart { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.04); } }
.ld-sound { border: 2px solid var(--ink); background: #fff; color: var(--ink); font: inherit; font-size: 12px; font-weight: 900; letter-spacing: .08em; padding: 6px 14px 7px; border-radius: 999px; box-shadow: 0 2px 0 var(--ink); cursor: pointer; }
.ld-sound[aria-pressed="false"] { opacity: .7; }
.loading.ready .ld-msg { opacity: .6; }
/* はじめる：ロゴと升が跳ねて消え、画面が墨の輪から抜けていく */
.loading.go { animation: ldGo .7s cubic-bezier(.6, 0, .4, 1) forwards; pointer-events: none; }
.loading.go .logo { animation: ldLogoOut .5s cubic-bezier(.5, -0.4, .7, 1) forwards; }
.loading.go .ld-tiles i { animation: ldTileOut .45s ease-in forwards; animation-delay: calc(var(--k) * 6ms); }
@keyframes ldGo { 0%, 35% { clip-path: circle(150% at var(--gx, 50%) var(--gy, 60%)); } 100% { clip-path: circle(0% at var(--gx, 50%) var(--gy, 60%)); } }
@keyframes ldLogoOut { to { transform: translateY(-30px) scale(1.15); opacity: 0; } }
@keyframes ldTileOut { to { transform: translateY(-18px) scale(.4) rotate(40deg); opacity: 0; } }
/* タップの演出：押した所に墨の輪と小さな粒（タイトルとはじめの画面） */
.tap-ink { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 70; }
.tap-ink::before { content: ''; position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--ink); animation: tapRing .5s cubic-bezier(.2, .8, .3, 1) forwards; }
.tap-ink i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--accent)); border: 1.5px solid var(--ink); animation: tapDot .55s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes tapRing { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
@keyframes tapDot { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .loading .logo, .ld-tiles i, .ld-start, .loading.go, .loading.go .logo, .loading.go .ld-tiles i { animation: none !important; } .tap-ink { display: none; } }
.lead { font-weight: 700; margin: 10px 0 14px; }
.picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.pick { border: 3px solid var(--ink); border-radius: 18px; padding: 12px; text-align: left; color: #fff; box-shadow: 0 4px 0 var(--ink); min-height: 96px; }
/* 遊ぶ長さ（2026-10-17） */
.mode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; }
.mode-label { font-size: 12px; font-weight: 800; opacity: .65; margin-right: 4px; }
.mode button { min-height: 38px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: inherit; font-weight: 900; font-size: 14px; box-shadow: 0 2px 0 var(--ink); cursor: pointer; }
.mode button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.mode small { flex: 1 0 100%; font-size: 12px; font-weight: 700; opacity: .7; }
.pick b { display: block; font-size: 22px; font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.pick small { display: block; font-size: 12px; font-weight: 800; opacity: .95; margin-top: 4px; }
.pick .star { font-size: 12px; letter-spacing: 0; margin-top: 1px; white-space: nowrap; }   /* 5段階：92px の札にも1行で入る */
/* 淡い色の札は墨の字（2026-10-17） */
.pick.light, .lb.light, .chip.light { color: var(--ink); }
.pick.light b, .lb.light { text-shadow: none; }
.pick:active { transform: translateY(3px); box-shadow: none; }
.menu { position: fixed; right: 12px; top: calc(env(safe-area-inset-top) + 62px); width: min(320px, calc(100% - 24px)); background: var(--paper); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); padding: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 6; }
.menu h3 { margin: 0 0 4px; font-weight: 900; }
.menu-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.seg.small button { min-width: 0; min-height: 40px; padding: 0 9px; font-size: 13px; }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 84px + var(--tb)); transform: translateX(-50%); background: var(--ink); color: #fff; font-weight: 800; font-size: 14px; padding: 8px 14px; border-radius: 12px; z-index: 20; max-width: calc(100% - 32px); }
.news { position: fixed; right: 12px; top: calc(env(safe-area-inset-top) + 100px); display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; z-index: 4; max-width: min(320px, 70%); }
.news div { background: rgba(255, 253, 246, .95); border: 2px solid var(--ink); border-radius: 12px; padding: 4px 10px 5px; font-size: 12px; font-weight: 800; box-shadow: 0 2px 0 var(--ink); animation: pop .22s cubic-bezier(.3, 1.6, .5, 1); }
.lb.pref { font-size: 16px; padding: 3px 12px 4px; }
.lb.pref.compact { font-size: 12px; padding: 2px 8px 3px; }   /* 引いたとき：小さく短く（全部の県名を出すため） */
.lb.pref.ruled.compact { padding: 2px 8px 3px; border-radius: 10px; }
.lb.pref.ruled.compact small { font-size: 8.5px; }
@media (max-width: 560px) {
  .pill, button.pill { font-size: 12px; padding: 1px 8px 2px; }
  .pill.poll .left { display: none; }   /* 上の欄が3段になって速報の帯が左の札に重なるので、残りの月数は速報の帯に任せる */
  .title-card h1 { font-size: 32px; }
  .title-card h1 .logo { width: 190px; }
  .dock { justify-content: space-between; }
}

/* 速報の帯・外交・名産（2026-10-16 追加）*/
.word-btn { pointer-events: auto; height: 40px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 0 3px 0 var(--ink); font-size: 14px; font-weight: 900; }
.word-btn:active, .icon-btn:active { transform: translateY(2px); box-shadow: none; }
.ticker { display: flex; align-items: stretch; margin-top: 8px; height: 34px; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--paper); box-shadow: 0 2px 0 var(--ink); pointer-events: auto; }
.ticker-tag { flex: 0 0 auto; display: flex; align-items: center; padding: 0 10px; background: #ff4d5e; color: #fff; font-weight: 900; font-size: 13px; letter-spacing: .1em; border-right: 2px solid var(--ink); }
.ticker-view { position: relative; flex: 1; overflow: hidden; }
.ticker-track { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; will-change: transform; animation: ticker var(--dur, 40s) linear infinite; }
.ticker:hover .ticker-track, .ticker.hold .ticker-track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-track button { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 800; padding: 0 22px 0 0; height: 100%; display: inline-flex; align-items: center; gap: 6px; }
.ticker-track button::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #9aa5b1; flex: 0 0 auto; }
.ticker-track button.alert { color: #c62f3d; }
.ticker-track button.alert::before { background: #ff4d5e; }
.ticker-track button.good::before { background: #2ec4b6; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }
.sidepanel { position: fixed; right: 12px; top: calc(env(safe-area-inset-top) + 150px); width: min(360px, calc(100% - 24px)); max-height: calc(100% - 260px); overflow: auto; overscroll-behavior: contain; touch-action: pan-y; background: var(--paper); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); padding: 12px 14px 14px; z-index: 5; animation: pop .22s cubic-bezier(.3, 1.6, .5, 1); }
.sidepanel h3 { margin: 0 0 4px; font-size: 20px; font-weight: 900; }
.fac { border: 2px solid var(--line); border-radius: 14px; padding: 8px 10px; margin-top: 8px; background: #fff; }
.fac-head { display: flex; align-items: center; gap: 8px; font-weight: 900; }
.fac-head .tag { margin-left: auto; font-size: 11px; font-weight: 900; color: #fff; border-radius: 999px; padding: 1px 8px; background: #9aa5b1; }
.relbar { position: relative; height: 8px; border-radius: 6px; background: linear-gradient(90deg, #ff5a5f, #eee6da 50%, #2ec4b6); margin: 6px 0; }
.relbar i { position: absolute; top: -3px; width: 4px; height: 14px; border-radius: 2px; background: var(--ink); transform: translateX(-50%); }
.fac-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.fac-btns button { border: 2px solid var(--ink); border-radius: 10px; background: #fff; font-weight: 800; font-size: 13px; min-height: 40px; padding: 0 10px; }
.fac-btns button:disabled { opacity: .4; }
.set { margin-top: 10px; }
.set-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 900; }
.set-head small { font-size: 11px; font-weight: 800; opacity: .7; text-align: right; }
.set.done .set-head { color: #1b9a5a; }
.cardrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mcard { border: 2px solid var(--ink); border-radius: 10px; padding: 4px 8px; font-size: 12px; font-weight: 800; background: #fff; min-height: 40px; display: flex; flex-direction: column; justify-content: center; }
.mcard small { font-size: 10px; opacity: .65; }
.mcard.mine { background: #fff4c7; box-shadow: 0 2px 0 var(--ink); }
.mcard:not(.mine) { opacity: .7; border-style: dashed; }
.ask-card h2 { margin: 0; font-size: 24px; font-weight: 900; }
/* 書状：上から巻物がひらき、相手の色の印が押される（2026-10-17） */
.ask-card { background: repeating-linear-gradient(180deg, transparent 0 29px, rgba(35, 50, 74, .06) 29px 30px), var(--paper); }
.ask-card.open { animation: askOpen .45s cubic-bezier(.2, .9, .3, 1) both; transform-origin: 50% 0; }
.ask-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ask-seal { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 3px solid var(--ink); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 18px; transform: rotate(-8deg); }
.ask-seal.light { color: var(--ink); }
.ask-card.open .ask-seal { animation: vdStamp .35s .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.ask-kicker { font-size: 12px; font-weight: 800; opacity: .65; letter-spacing: .06em; }
.ask-who { margin: 4px 0 0; font-size: 13px; font-weight: 700; opacity: .7; }
@keyframes askOpen { from { clip-path: inset(0 0 100% 0 round 22px); transform: translateY(-10px); } to { clip-path: inset(0 0 0 0 round 22px); transform: none; } }
@media (prefers-reduced-motion: reduce) { .ask-card.open, .ask-card.open .ask-seal { animation: none; } }
@media (max-width: 560px) {
  .word-btn { padding: 0 9px; font-size: 13px; }
  .brand b { font-size: 15px; }
  .sidepanel { top: auto; bottom: calc(env(safe-area-inset-bottom) + 78px + var(--tb)); max-height: calc(100% - 300px); left: 12px; width: auto; }
}
/* 上の帯を1行に保つ（スマホで折り返さない） */
.brand, .date, .word-btn, .icon-btn { white-space: nowrap; flex: 0 0 auto; }
.top-row { flex-wrap: nowrap; min-width: 0; }
.news { top: calc(env(safe-area-inset-top) + 152px); }
@media (max-width: 560px) {
  .top-row { gap: 6px; }
  .brand { padding: 4px 10px 5px; }
  .brand b { font-size: 14px; }
  .date { font-size: 13px; padding: 5px 10px 6px; }
  .word-btn { height: 36px; padding: 0 8px; font-size: 13px; border-radius: 12px; }
  .icon-btn { width: 36px; height: 36px; font-size: 18px; border-radius: 12px; }
  .ticker { height: 32px; }
  .ticker-track button { font-size: 13px; }
  .news { top: calc(env(safe-area-inset-top) + 172px); right: 8px; }
}
@media (max-width: 370px) { .brand .fchip { display: none; } }

/* 左の札・人材（2026-10-16 追加）*/
.sidetabs { position: fixed; left: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.sidetabs button { width: 46px; min-height: 58px; border: 2px solid var(--ink); border-left: 0; border-radius: 0 14px 14px 0; background: var(--paper); box-shadow: 2px 3px 0 var(--ink); font-weight: 900; font-size: 14px; writing-mode: vertical-rl; letter-spacing: .2em; padding: 8px 0; }
.sidetabs button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.sidetabs button:active { transform: translateX(-2px); }
.off { border: 2px solid var(--line); border-radius: 14px; padding: 8px 10px; margin-top: 8px; background: #fff; }
.off-head { display: flex; align-items: center; gap: 8px; font-weight: 900; }
.off-face { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-weight: 900; color: #fff; flex: 0 0 auto; }
.off-head small { font-size: 11px; font-weight: 800; opacity: .7; }
.off-trait { margin-left: auto; font-size: 11px; font-weight: 900; background: #fff4c7; border: 2px solid var(--ink); border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.abil { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; margin: 6px 0; font-size: 12px; font-weight: 800; }
.abil span.b { height: 8px; border-radius: 4px; background: #eee6da; overflow: hidden; }
.abil span.b i { display: block; height: 100%; border-radius: 4px; }
.off select, .dl select { font: inherit; font-weight: 800; font-size: 14px; padding: 6px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; max-width: 100%; }
.dl { border: 2px solid var(--line); border-radius: 14px; padding: 8px 10px; margin-top: 8px; background: #fff; display: grid; gap: 6px; }
.dl-head { display: flex; justify-content: space-between; font-weight: 900; }
.dl-head small { font-weight: 800; opacity: .7; }
.seg.tiny button { min-width: 0; min-height: 36px; padding: 0 10px; font-size: 13px; }
@media (max-width: 560px) { .sidetabs { top: max(46%, calc(var(--tick-b, 240px) + 14px + 142px)); }   /* 速報の帯の下端（--tick-b・main.js が測る）から14px あける。札5枚の高さ284の半分が142（2026-10-21 本人指摘：実機で外交の札が速報にかぶる） */   /* 背の低いスマホ（375×667）で速報の帯にかぶらないように（札5枚の高さ284の半分＋帯の下端） */ .sidetabs button { width: 40px; min-height: 52px; font-size: 13px; } .panel { left: 48px; width: calc(100% - 60px); } }
@media (max-width: 560px) { .sidepanel { left: 48px; width: auto; right: 8px; } }
/* 引いたときの小さな地名 */
.lb.mini { background: none !important; border: 0; box-shadow: none; color: var(--ink); font-size: 11px; font-weight: 800; padding: 0; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff; transform-origin: 50% 100%; }
.lb.mini::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; vertical-align: 1px; background: var(--dot, #999); border: 1.5px solid var(--ink); }
.lb.mini .k { display: none; }
/* 参謀の進言 */
.adv-who { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; font-weight: 800; font-size: 13px; }
.adv { border: 2px solid var(--line); border-radius: 14px; padding: 8px 10px; margin-top: 8px; background: #fff; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; }
.adv b { font-size: 15px; font-weight: 900; }
.adv small { grid-column: 1; font-size: 12px; font-weight: 700; opacity: .7; }
.adv button { grid-row: 1 / span 2; grid-column: 2; border: 2px solid var(--ink); background: var(--accent); color: #fff; font-weight: 900; border-radius: 12px; min-height: 44px; padding: 0 12px; box-shadow: 0 2px 0 var(--ink); }
.adv button:disabled { background: #bbb; box-shadow: none; }
.adv-sec { margin-top: 12px; font-size: 12px; font-weight: 900; letter-spacing: .2em; color: #fff; background: var(--ink); display: inline-block; padding: 1px 10px; border-radius: 999px; }
/* 47都道府県の県選び */
.picks { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); max-height: min(56vh, 520px); overflow: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 2px 4px 6px; }
.region { grid-column: 1 / -1; font-size: 12px; font-weight: 900; letter-spacing: .15em; opacity: .7; margin-top: 6px; }
.pick.small { min-height: 0; padding: 7px 9px 8px; border-width: 2px; box-shadow: 0 3px 0 var(--ink); border-radius: 14px; }
.pick.small b { font-size: 16px; }
.pick.small small { font-size: 10px; margin-top: 2px; }
/* 月の進行 */
.next.skip { background: #fff; color: var(--ink); }
.float { position: absolute; left: 0; top: 0; white-space: nowrap; font-weight: 900; font-size: 15px; padding: 3px 10px 4px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; box-shadow: 0 2px 0 var(--ink); transition: opacity .2s; opacity: 0; pointer-events: none; }
.float.good { background: #2ec4b6; color: #fff; }
.float.bad { background: #ff5a5f; color: #fff; }
.float.fx { opacity: 1; transition: none; font-size: 14px; }
.float.card { background: #fff4c7; color: var(--ink); }
/* 参謀の策・スカウト・コマンドの見込み */
.cmd small.eff { opacity: 1; color: #1b9a5a; font-weight: 900; }
.cmd.war small.eff { color: inherit; opacity: .7; }
.plan-card { border: 2px solid var(--ink); border-radius: 14px; background: #fff8e1; padding: 10px 12px; margin-top: 8px; display: grid; gap: 6px; }
.plan-card b { font-size: 16px; font-weight: 900; }
.plan-card ol { margin: 0; padding-left: 1.4em; font-weight: 800; font-size: 14px; }
/* 策の手順のチェック：外した手は行わない（2026-10-17） */
.plan-card ol:has(.step) { list-style: none; padding-left: 0; display: grid; gap: 2px; }
.plan-card .step { display: flex; align-items: flex-start; gap: 8px; min-height: 32px; padding: 4px 2px; cursor: pointer; }
.plan-card .step input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.plan-card li.skipped span { opacity: .45; text-decoration: line-through; }
.plan-card small.skip-note { color: #c62f3d; }
.plan-card small.skip-note:empty { display: none; }
@media (pointer: coarse) { .plan-card .step { min-height: 40px; align-items: center; } .plan-card .step input { width: 22px; height: 22px; margin: 0; } }
.plan-card small { font-size: 12px; font-weight: 700; line-height: 1.6; }
.plan-card small.how { opacity: .6; }
@keyframes blink { to { opacity: .4; } }
.off button.mini { margin-top: 6px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; font-weight: 800; font-size: 13px; min-height: 36px; padding: 0 10px; }
.off button.mini:disabled { opacity: .45; }
.search { width: 100%; font: inherit; font-size: 16px; font-weight: 700; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; margin: 6px 0 2px; }
.off { padding-bottom: 10px; }
.off button.mini { display: inline-flex; align-items: center; margin: 8px 6px 2px 0; }
.off select { margin-top: 6px; }

/* カットイン：本拠の陥落・降伏・臣従・知事選・統一・海からの大軍（2026-10-16） */
.cutin { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(20, 26, 40, .28); animation: ciFade var(--ci, 2.2s) ease both; cursor: pointer; }
.cutin[hidden] { display: none !important; }
.ci-band { --c: #ff4d5e; position: relative; flex: none; width: max(160vw, 160vh); padding: 22px 0 24px; background: var(--c); border-block: 5px solid var(--ink); box-shadow: 0 8px 0 rgba(0, 0, 0, .25); transform: rotate(-6deg); overflow: hidden; animation: ciBand var(--ci, 2.2s) cubic-bezier(.2, .9, .3, 1) both; }
.ci-lines { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .0) 0 38px, rgba(255, 255, 255, .22) 38px 44px, rgba(255, 255, 255, 0) 44px 90px); animation: ciLines .6s linear infinite; }
.ci-in { position: relative; width: min(92vw, 760px); margin: 0 auto; transform: rotate(6deg); text-align: center; color: #fff; animation: ciText var(--ci, 2.2s) cubic-bezier(.2, .9, .3, 1) both; }
.ci-kicker { display: inline-block; background: var(--ink); color: #ffd23f; font-weight: 900; font-size: 13px; letter-spacing: .2em; padding: 3px 12px 4px; border-radius: 6px; margin-bottom: 6px; }
.ci-title { font-weight: 900; font-size: clamp(30px, 9vw, 64px); line-height: 1.1; -webkit-text-stroke: 0; text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 0 6px 0 var(--ink); }
.ci-sub { margin-top: 8px; font-weight: 800; font-size: clamp(13px, 3.6vw, 17px); text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.cutin.light .ci-in { color: var(--ink); }
.cutin.light .ci-title { color: #fff; }
.cutin.light .ci-sub { text-shadow: none; }
@keyframes ciFade { 0% { opacity: 0; } 6% { opacity: 1; } 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ciBand { 0% { transform: rotate(-6deg) translateX(-110vw); } 9% { transform: rotate(-6deg) translateX(0); } 92% { transform: rotate(-6deg) translateX(0); } 100% { transform: rotate(-6deg) translateX(110vw); } }
@keyframes ciText { 0%, 6% { transform: rotate(6deg) translateX(40vw) scale(1.4); opacity: 0; } 16% { transform: rotate(6deg) translateX(-1vw) scale(1); opacity: 1; } 90% { transform: rotate(6deg) translateX(1.5vw); opacity: 1; } 100% { transform: rotate(6deg) translateX(-20vw); opacity: 0; } }
@keyframes ciLines { to { background-position: -90px 0; } }
@media (prefers-reduced-motion: reduce) { .cutin, .ci-band, .ci-in, .ci-lines { animation: none; } }

/* 参謀の「考え中」：動きで気づいてもらう（2026-10-16） */
.thinking { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; padding: 12px;   /* 下の札とのあいだ（考え中は下が詰まっていた 2026-10-21） */
   border: 2px solid var(--ink); border-radius: 14px; background: #fff7d6; box-shadow: 0 3px 0 var(--ink); }
.tk-face { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--ink); background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 20px; animation: tkNod 1.1s ease-in-out infinite; position: relative; }
.tk-face::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--ink); border-right-color: var(--ink); animation: spin .9s linear infinite; }
.tk-body { flex: 1; min-width: 0; }
.tk-body b { font-size: 14px; }
.tk-dots { display: inline-flex; gap: 3px; margin-left: 4px; }
.tk-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: tkHop .9s ease-in-out infinite; }
.tk-dots i:nth-child(2) { animation-delay: .15s; } .tk-dots i:nth-child(3) { animation-delay: .3s; }
.tk-msg { display: block; margin-top: 2px; font-size: 12px; opacity: .75; min-height: 1.4em; }
.tk-msg.in { animation: tkIn .3s ease both; }
.tk-bar { margin-top: 6px; height: 6px; border-radius: 99px; background: rgba(35, 50, 74, .12); overflow: hidden; }
.tk-bar i { display: block; width: 40%; height: 100%; border-radius: 99px; background: var(--accent); animation: tkBar 1.2s ease-in-out infinite; }
@keyframes tkNod { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-2px); } }
@keyframes tkHop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
@keyframes tkIn { from { opacity: 0; transform: translateY(4px); } }
@keyframes tkBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.sidetabs button.busy { position: relative; }
.sidetabs button.busy::after { content: ''; position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--ink); animation: tkPulse .8s ease-in-out infinite alternate; }
@keyframes tkPulse { to { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .tk-face, .tk-face::after, .tk-dots i, .tk-bar i, .tk-msg.in, .sidetabs button.busy::after { animation: none; } }

/* ほかの勢力の下にある県：県名の下に小さく「〇〇勢」（2026-10-17） */
.lb.pref.ruled { display: flex; flex-direction: column; align-items: center; line-height: 1.15; border-radius: 14px; padding: 3px 12px 4px; }
.lb.pref.ruled small { font-size: 10px; font-weight: 800; letter-spacing: .04em; opacity: .95; }
/* 占領下：もとの色の札に、占領した勢力の色の点（2026-10-17） */
.lb.pref.ruled small.occ { display: inline-flex; align-items: center; gap: 4px; }
.lb.pref.ruled small.occ::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--oc); border: 1.5px solid var(--ink); flex: none; }

/* カットインを飛ばす案内と、飛ばしたときの短いフェード（2026-10-17） */
.ci-skip { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 96px + var(--tb, 0px)); transform: translateX(-50%); background: rgba(255, 255, 255, .92); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 14px 5px; font-size: 12px; font-weight: 800; box-shadow: 0 2px 0 var(--ink); animation: ciSkip 1s .6s ease both; pointer-events: none; }
@keyframes ciSkip { from { opacity: 0; transform: translate(-50%, 6px); } }
.cutin.out { animation: ciOut .18s ease forwards; }
.cutin.out .ci-band, .cutin.out .ci-in { animation-play-state: paused; }
@keyframes ciOut { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ci-skip, .cutin.out { animation: none; } }

/* 結果の判子：交渉・引き抜き・登用（2026-10-17） */
.verdict { position: fixed; inset: 0; z-index: 39; display: grid; place-items: center; background: rgba(20, 26, 40, .32); }
.verdict[hidden] { display: none !important; }
.vd-card { position: relative; width: min(84vw, 320px); padding: 22px 18px 18px; text-align: center; background: var(--paper); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 var(--ink); animation: vdIn .28s cubic-bezier(.3, 1.5, .5, 1) both; }
.vd-card.out { animation: vdOut .16s ease forwards; }
.vd-face { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; border: 3px solid var(--ink); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 28px; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); animation: tkNod 1s ease-in-out infinite; }
.vd-wait { margin: 0; font-weight: 800; font-size: 14px; }
.vd-card.shown .vd-wait { display: none; }
.vd-card.shown .vd-face { animation: none; }
.vd-stamp { display: none; margin: 4px auto 8px; width: max-content; padding: 6px 16px 8px; font-weight: 900; font-size: 30px; letter-spacing: .08em; border: 4px solid currentColor; border-radius: 12px; transform: rotate(-10deg); }
.vd-card.shown .vd-stamp { display: block; animation: vdStamp .32s cubic-bezier(.2, 1.6, .4, 1) both; }
.vd-card.ok .vd-stamp { color: #e0393e; background: rgba(224, 57, 62, .08); }
.vd-card.bad .vd-stamp { color: #5b6577; background: rgba(91, 101, 119, .08); }
.vd-card.bad.shown { animation: vdShake .4s .1s ease both; }
.vd-line { display: none; margin: 4px 0 0; font-weight: 800; font-size: 14px; }
.vd-card.shown .vd-line { display: block; animation: tkIn .3s .15s ease both; }
@keyframes vdIn { from { transform: scale(.7); opacity: 0; } }
@keyframes vdOut { to { transform: scale(.92); opacity: 0; } }
@keyframes vdStamp { 0% { transform: rotate(-10deg) scale(2.6); opacity: 0; } 60% { transform: rotate(-10deg) scale(.92); opacity: 1; } 100% { transform: rotate(-10deg) scale(1); } }
@keyframes vdShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .vd-card, .vd-face, .vd-card.shown .vd-stamp, .vd-card.bad.shown, .vd-card.shown .vd-line { animation: none; } }

/* 物見：県名を押して開く（2026-10-17） */
.lb.pref { cursor: pointer; }
/* 自分を囲む包囲網のなかまの県（2026-10-17） */
.lb.pref.houi { outline: 3px dashed #e0393e; outline-offset: 3px; }
.lb.pref.houi::after { content: '包囲網'; position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); padding: 1px 6px; border-radius: 6px; background: #e0393e; color: #fff; font-size: 10px; font-weight: 900; white-space: nowrap; }
#intel h3 { margin: 0 0 6px; }
.intel-stats { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 6px 0 10px; font-size: 14px; }
.intel-stats dt { font-weight: 700; opacity: .65; }
.intel-stats dd { margin: 0; font-weight: 800; }
.intel-plans { margin: 6px 0 8px; padding-left: 1.2em; font-size: 14px; font-weight: 700; line-height: 1.6; }
.intel-plans li.danger { color: #d64545; font-weight: 900; }
.spy-btn { width: 100%; margin-top: 8px; }
.intel-fac + .intel-fac { margin-top: 14px; padding-top: 12px; border-top: 2px dashed rgba(35, 50, 74, .18); }

/* 指で押すときは速報の帯を少し高く（流れる項目を押しやすく）（2026-10-17） */
@media (pointer: coarse) { .ticker { height: 40px; } }

/* 遊び方へのリンク（a でもボタンと同じ見た目）（2026-10-17） */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; }

/* SOUND（2026-10-19） */
.sound-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin: 2px 0 8px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: inherit; font-weight: 900; font-size: 13px; letter-spacing: .06em; box-shadow: 0 2px 0 var(--ink); cursor: pointer; }
.sound-btn::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #1b9a5a; }
.sound-btn[aria-pressed="false"] { opacity: .75; }
.sound-btn[aria-pressed="false"]::before { background: #9aa5b1; }

/* 県選びのむずかしさ（2026-10-19 5段階に） */
.picks-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; font-weight: 900; font-size: 14px; }
.picks-note span { font-size: 12px; font-weight: 700; opacity: .7; }

/* 順位（2026-10-19）：上の欄の勢力名を押すと順位表 */
button.brand { font: inherit; color: inherit; text-align: left; pointer-events: auto; cursor: pointer; }
button.brand:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.brand .rank-no { font-style: normal; margin-left: 8px; padding: 1px 7px 2px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 900; vertical-align: 2px; }
.brand .rank-no small { font-size: 10px; opacity: .7; margin-left: 1px; }
#rank:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; }   /* 見出しは残し、表だけ送る */
.rank-list { list-style: none; margin: 6px 0 0; padding: 0; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; position: relative; }
.rk { display: grid; grid-template-columns: 26px 14px 1fr auto 30px; align-items: center; gap: 6px; padding: 6px 4px; border-bottom: 1px dashed rgba(35, 50, 74, .18); font-weight: 800; font-size: 14px; }
.rk .rk-no { text-align: right; font-size: 15px; }
.rk .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); }
.rk .rk-name small { margin-left: 6px; font-size: 11px; opacity: .6; }
.rk .rk-n { text-align: right; white-space: nowrap; }
.rk .rk-n small { display: block; font-size: 10px; font-weight: 700; opacity: .55; }
.rk .rk-mv { font-size: 11px; text-align: right; }
.rk .rk-mv.up { color: #1b9a5a; }
.rk .rk-mv.down { color: #d64545; }
.rk.me { background: #fff3c4; border-radius: 10px; border-bottom-color: transparent; }
.rk.gone { opacity: .5; }
@media (max-width: 560px) { .brand .rank-no { margin-left: 6px; padding: 1px 6px 2px; } }

/* 戦果（2026-10-19）：月末の合戦で取った・取られた */
.war-month { margin-top: 10px; }
.war-month h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 14px; font-weight: 900; }
.war-month.latest h4::after { content: '最新'; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--ink); color: #fff; }
.war-sum { display: inline-flex; flex-wrap: wrap; gap: 4px; font-size: 11px; }
.wk { display: inline-block; min-width: 52px; padding: 2px 7px 3px; border-radius: 999px; border: 2px solid var(--ink); font-size: 11px; font-weight: 900; text-align: center; color: #fff; white-space: nowrap; }
.war-sum .wk { min-width: 0; padding: 0 6px 1px; border-width: 1.5px; font-size: 10px; }
.wk.take { background: #1b9a5a; } .wk.lost { background: #d64545; } .wk.held { background: #3f7fd6; } .wk.fail { background: #e08a2c; } .wk.storm { background: #7c8796; }
.war-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 4px; border: 0; border-bottom: 1px dashed rgba(35, 50, 74, .18); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.war-row:disabled { cursor: default; }
.war-row:not(:disabled):active { background: rgba(35, 50, 74, .06); }
.war-row .wt b { display: block; font-size: 15px; font-weight: 900; }
.war-row .wt small { display: block; font-size: 11px; font-weight: 700; opacity: .65; }
/* 出陣の弧の頂点の札 */
.order-tags { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.order-tag { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 4px 4px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 0 3px 0 var(--ink); font-weight: 900; font-size: 13px; white-space: nowrap; transition: opacity .2s; will-change: transform; }
.order-tag b { padding: 1px 7px 2px; border-radius: 999px; background: var(--c); color: #fff; font-size: 11px; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.order-tag em { font-style: normal; padding: 1px 6px 2px; border-radius: 999px; color: #fff; font-size: 11px; }
.order-tag.move { opacity: .9; font-size: 12px; }
.order-tag.move b { background: #7c8796; }
@media (max-width: 560px) { .order-tag { font-size: 12px; padding: 2px 7px 3px 3px; } }

/* 補給線・陣の知らせ（町の札・2026-10-19） */
.p-alert { margin: 6px 0 8px; display: grid; gap: 6px; }
.p-alert p { margin: 0; padding: 7px 10px 8px; border: 2px solid var(--ink); border-radius: 12px; font-size: 12px; font-weight: 700; line-height: 1.55; }
.p-alert b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 900; margin-bottom: 2px; }
.p-alert b::before { content: '!'; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; }
.p-alert .bad { background: #ffe1df; }
.p-alert .bad b { color: #c0392b; }
.p-alert .chance { background: #fff1d6; }
.p-alert .chance b { color: #b8650a; }
.p-alert .camp { background: #e3f0ff; }

/* 名産の札の Lv：町の札の .lv（下の余白8px）が当たって上へずれていた（2026-10-19） */
.set-head > span > .lv { align-self: center; margin-bottom: 0; }

/* 総攻め（参謀の札のいちばん上・2026-10-19） */
.soseme { margin: 0 0 10px; padding: 10px 12px 12px; border: 2px solid var(--ink); border-radius: 14px; background: #fff1e6; box-shadow: 0 3px 0 var(--ink); }
.soseme .so-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.soseme .so-head b { font-size: 18px; font-weight: 900; color: #c4471b; }
.soseme .so-head small { font-size: 12px; font-weight: 700; opacity: .75; }
.soseme ul { list-style: none; margin: 6px 0 8px; padding: 0; font-size: 13px; font-weight: 700; }
.soseme li { display: flex; align-items: center; gap: 4px; padding: 3px 0; border-bottom: 1px dashed rgba(35, 50, 74, .18); }
.soseme li .so-t { flex: 1; min-width: 0; }
.soseme li .so-n { font-size: 11px; opacity: .7; white-space: nowrap; }
.soseme li em { flex: none; font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: #4d96ff; color: #fff; }
.soseme li em.big { background: #2ec4b6; }
.soseme li.more { opacity: .6; border: 0; }
.soseme .so-go { width: 100%; background: #e2531f; color: #fff; }

/* ライセンスへの小さなリンク（2026-10-19） */
.title-foot { margin: 14px 0 0; text-align: center; font-size: 12px; font-weight: 800; line-height: 1.9; opacity: .75; }
.title-foot .sep { margin: 0 .3em; opacity: .6; }
.title-foot .line { white-space: nowrap; }
.title-foot a, .menu-link { color: inherit; text-underline-offset: 3px; }
.menu-link { display: block; margin: 2px 0 8px; text-align: center; font-size: 13px; font-weight: 800; opacity: .75; }

/* 期限での決着（2026-10-19）：順位に関係なくクリア */
.clear-rank { display: inline-block; margin: 2px 0 4px; padding: 2px 12px 3px; border: 2px solid var(--ink); border-radius: 999px; background: var(--accent); color: #fff; font-size: 1.15em; }

/* 演出と手触りの評価を受けた直し（2026-10-20） */
@media (min-width: 561px) {
  .panel { left: 58px; }   /* 左の札（外交・名産…）に重ならない */
  body:has(.sidepanel:not([hidden])) .news { right: calc(24px + min(360px, 100% - 24px)); }   /* 横の札が開いていたら報せはその左へ */
}
.ci-sub { text-wrap: balance; }
/* 帯は6度傾いていて、中の文字はまっすぐ。文字の幅の半分×tan6°（約0.105）だけ、端で帯のふちが上下にずれるので、そのぶん帯の上下に余白をとる
   （2026-10-21 本人指摘：長い説明の右端が帯のふちで欠けていた。PC で8px はみ出し）。文字の幅も少しだけ狭める */
.ci-band { padding-block: calc(14px + min(5vw, 40px)) calc(16px + min(5vw, 40px)); }
.ci-in { width: min(90vw, 720px); }   /* 1字だけ次の行に残さない（短い1〜2行なので balance） */
.cmd small { overflow-wrap: anywhere; }   /* 効果の文字を切らずに折り返す */

/* 予算などが足りない手（2026-10-20） */
.cmd.short { opacity: .55; }
.cmd small.lack { color: #c0392b; font-weight: 900; opacity: 1; }
.brand .rank-no i { font-style: normal; margin-left: 4px; font-size: 10px; }
.brand .rank-no i.up { color: #7ee2b0; }
.brand .rank-no i.down { color: #ff9a9a; }
/* はじめての案内（3枚・1回だけ）。指す相手は輪で光らせ、札はその横へ */
.coach { position: fixed; inset: 0; z-index: 45; background: rgba(20, 26, 40, .28); animation: coachFade .25s ease both; }
@keyframes coachFade { from { opacity: 0; } to { opacity: 1; } }
.coach-card { position: fixed; width: min(320px, calc(100% - 20px)); padding: 14px 16px 12px; background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); animation: coachIn .35s cubic-bezier(.3, 1.5, .5, 1) both; }
.coach-card.c-center { left: 50%; top: 42%; transform: translate(-50%, -50%); animation-name: coachInC; }
.coach-card small { font-size: 11px; font-weight: 900; opacity: .55; letter-spacing: .08em; }
.coach-card b { display: block; margin: 2px 0 6px; font-size: 18px; font-weight: 900; }
.coach-card p { margin: 0 0 12px; font-size: 14px; font-weight: 700; line-height: 1.65; }
.coach-btns { display: flex; gap: 8px; }
.coach-btns .btn { min-height: 42px; font-size: 15px; }
.coach-card.c-right::before { content: ''; position: absolute; left: -12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--paper); border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); }
.coach-card.c-top::after { content: ''; position: absolute; left: var(--ax, 50%); bottom: -12px; width: 18px; height: 18px; margin-left: -9px; background: var(--paper); border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); }
.coach-hl-up { z-index: 46 !important; }
.coach-hl { position: relative; z-index: 46; box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--accent) !important; animation: coachHl 1s ease-in-out infinite alternate; }
@keyframes coachIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes coachInC { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes coachHl { to { box-shadow: 0 0 0 4px #fff, 0 0 0 12px rgba(255, 122, 69, .55) !important; } }
@media (prefers-reduced-motion: reduce) { .coach, .coach-card, .coach-hl { animation: none; } }