:root {
  --bg: #FFF9E8;
  --ink: #6B5536;
  --panel: #FFF9E8;
  --text: #6B5536;
  --light: #FFF9E8;
  --muted: #7C6C50;
  --yellow: #F7CD46;
  --yellow-d: #D9A92E;
  --blue: #8FD8F2;
  --blue-d: #69B4CD;
  --pink: #F6A55B;
  --red: #C84F42;
  --p0: #F6A55B; --p1: #8FD8F2; --p2: #FFD85C; --p3: #78C27A;
  --round: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  --display: var(--round);
  --dot: "DotGothic16", monospace;
  --window: #000;
  --wood: #C8A877;
  --window-shadow: none;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--round);
  font-weight: 700;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
body { position: fixed; inset: 0; overflow: hidden; }
.hidden { display: none !important; }
button { font-family: inherit; }
select { font: inherit; color: inherit; }
.language-bar { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 12px; }
.language-bar select { max-width: 190px; min-height: 40px; border: 2px solid #DCCFB2; border-radius: 14px; padding: 5px 10px; background: #FFF9E8; }
.play-intro { margin: 0; font-size: 12px; text-align: center; line-height: 1.7; text-wrap: balance; }
.beta-notice { flex-shrink: 0; padding: 10px 14px; border: 1px solid #D9A92E; border-radius: 14px; background: var(--panel); font-size: 11px; line-height: 1.65; }
.beta-notice strong { display: block; font-size: 12px; }
.beta-notice p { margin: 3px 0; }
.beta-notice a { color: inherit; text-underline-offset: 3px; }
.game-footer { font-size: 11px; text-align: center; line-height: 1.7; }
.game-footer nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 14px; }
.game-footer a, .game-footer button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; color: var(--ink); }
.game-footer button { font: inherit; cursor: pointer; border: 0; background: transparent; text-decoration: underline; padding: 5px 8px; }
html:not([lang="ja"]) .logo-big { font-size: clamp(35px, 10vw, 47px); letter-spacing: 0; }
html:not([lang="ja"]) .logo-small { font-size: 28px; }
html:not([lang="ja"]) .btn.big { font-size: 19px; letter-spacing: 0; }
html:not([lang="ja"]) .rule { flex-wrap: wrap; }
html:not([lang="ja"]) .act-btn b { font-size: 10px; }
html:not([lang="ja"]) .disease-tag { max-width: 49px; }
.row input, .mode-card, .rule-label, .ticket-label { min-width: 0; }
.result-card { max-height: calc(100dvh - 36px); overflow-y: auto; }

.bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.screen { position: absolute; inset: 0; display: none; z-index: 1; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.screen.active { display: flex; }
#home, #lobby { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.home-inner, .lobby-inner { width: 100%; max-width: 420px; margin: 0 auto; padding: 20px 16px 36px; display: flex; flex-direction: column; gap: 14px; }
/* 長い画面は内容の高さでスクロールさせ、子の窓を画面内へ押しつぶさない。 */
.home-inner, .lobby-inner { height: max-content; min-height: 100%; }
.quota-notice { padding: 16px; border: 2px solid #C84F42; border-radius: 16px; background: #FFF2DF; color: #713429; line-height: 1.65; flex-shrink: 0; }
.quota-notice strong { display: block; font-size: 17px; }
.quota-notice p { margin: 6px 0 0; font-size: 14px; text-wrap: balance; }

/* ---------- ロゴ ---------- */
.logo { text-align: center; margin-top: 6px; position: relative; }
.logo-bomb { width: 96px; height: 106px; display: block; margin: 0 auto -16px; animation: wobble 1.6s ease-in-out infinite; filter: drop-shadow(0 6px 0 rgba(0,0,0,.25)); }
@keyframes wobble { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.06); } }
.logo-text { display: flex; flex-direction: column; align-items: center; line-height: .95; }
.logo-small, .logo-big { font-family: var(--round); font-weight: 800; color: #FFF9E8; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 #B07D4F; letter-spacing: 2px; }
.logo-small { font-size: 34px; color: #FFF9E8; transform: rotate(-4deg); }
.logo-big { font-size: clamp(46px, 16vw, 64px); position: relative; color: #FFF9E8; -webkit-text-stroke: 6px var(--ink); text-shadow: 0 4px 0 #B07D4F; }
.logo-fill { position: absolute; left: 0; top: 0; -webkit-text-stroke: 0; text-shadow: none; color: #FFF9E8; }
.logo-sub { display: inline-block; margin: 14px 0 0; padding: 5px 14px; border-radius: 50px; font-size: 12px; color: var(--ink); background: #FFF9E8e8; }

/* ---------- パネル・ボタン ---------- */
.panel { background: var(--panel); color: var(--text); border-radius: 30px; padding: 20px 18px; border: 2px solid #FFF9E8; box-shadow: 0 6px 24px #5A46321A; display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
input {
  font: inherit; font-size: 22px; font-weight: 800; padding: 12px 14px; border-radius: 16px;
  border: 3px solid #DCCFB2; background: #FBF3DD; color: var(--ink); width: 100%;
  -webkit-user-select: text; user-select: text;
}
input:focus { outline: none; border-color: var(--blue); background: #fff; }
.row { display: flex; gap: 8px; }
.row input { flex: 1; text-align: center; letter-spacing: 10px; font-family: var(--display); font-weight: 400; }

.btn { --button-shadow: #D8C6A3; font-size: 17px; font-weight: 800; padding: 14px 18px; border-radius: 999px; border: 2px solid #ffffff80; color: var(--ink); background: #FFF9E8; cursor: pointer; touch-action: manipulation; box-shadow: 0 5px 0 var(--button-shadow); position: relative; transition: transform .08s, box-shadow .08s; line-height: 1.5; }
.btn::after { content: none; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--button-shadow); }
.btn.yellow { --button-shadow: #D7AD3E; background: #F7CD46; }
.btn.blue { --button-shadow: #5AAE5E; background: #8FD3A8; color: var(--ink); text-shadow: none; }
.btn.white { background: #FFF9E8; }
.btn.big { font-size: 22px; padding: 14px 16px; font-family: var(--round); font-weight: 800; letter-spacing: .03em; }
.btn.small { font-size: 14px; padding: 9px 12px; border-width: 2px; }
.btn.ghost { background: #FFF8E7; color: var(--ink); border-color: #fff9e8; font-size: 14px; }
.btn.ghost::after { display: none; }
.btn:disabled { filter: grayscale(.7) opacity(.6); }
.or { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 -4px; }
.msg { flex-shrink: 0; min-height: 1.6em; line-height: 1.6; text-align: center; margin: 0; font-size: 14px; color: var(--pink); }
#lobby .msg { color: var(--ink); text-shadow: none; background: #FFF9E8dd; border-radius: 20px; padding: 8px; }

/* ---------- 待合室 ---------- */
.ticket { background: #FFD85C; color: var(--ink); border: 2px solid #FFF9E8; border-radius: 26px; box-shadow: 0 5px 0 #D7AD3E, 0 10px 24px #5A463218; padding: 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 10px; position: relative; }
.ticket::before, .ticket::after { content: none; }
.ticket::before { left: -12px; clip-path: inset(0 0 0 50%); }
.ticket::after { right: -12px; clip-path: inset(0 50% 0 0); }
.ticket-label { font-size: 13px; grid-column: 1; }
.ticket-code { font-family: var(--display); font-size: 48px; letter-spacing: 8px; line-height: 1; grid-column: 1; }
.ticket .btn { grid-column: 2; grid-row: 1 / 3; }

.slots { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.slot { position: relative; background: #FFF9E8; color: var(--ink); border: 2px solid #FFF9E8; border-radius: 26px; padding: 10px 6px; box-shadow: 0 5px 18px #5A463218; display: flex; flex-direction: column; align-items: center; min-height: 168px; overflow: hidden; }
.slot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 58%; background: var(--c); opacity: .28; }
.slot .stage { position: relative; width: 84px; height: 104px; display: flex; align-items: flex-end; justify-content: center; }
.slot .stage img { width: 76px; animation: hop 1s ease-in-out infinite; transform-origin: 50% 100%; }
.slot:nth-child(2) .stage img { animation-delay: -.25s; } .slot:nth-child(3) .stage img { animation-delay: -.5s; } .slot:nth-child(4) .stage img { animation-delay: -.75s; }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-8px) scale(.96, 1.04); } 55% { transform: translateY(-8px); } 90% { transform: translateY(0) scale(1.06, .94); } }
.slot .nm { position: relative; font-size: 17px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .outfit-change { position: relative; margin-top: 8px; min-height: 44px; }
.slot .tag { position: relative; font-size: 11px; color: var(--muted); }
.slot .badge { position: absolute; top: 7px; left: 7px; background: var(--c); color: var(--ink); border: 2px solid #FFF9E8; border-radius: 11px; font-family: var(--round); font-size: 12px; padding: 1px 6px; }
.slot .crown { position: absolute; top: 4px; right: 8px; font-size: 20px; }
.slot.me { outline: 4px solid var(--yellow); outline-offset: 3px; }
.slot.empty { background: #FFF9E8b8; border: 2px dashed #B9CCA3; box-shadow: none; color: var(--muted); justify-content: center; font-size: 15px; }
.slot.empty::before { display: none; }
.slot .q { font-family: var(--display); font-size: 44px; opacity: .5; }
.slot .arrow { position: absolute; top: 44px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #FFF9E8; background: #fff; color: var(--ink); font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 #D8C6A3; }
.slot .arrow:active { transform: translateY(2px); box-shadow: 0 1px 0 #D8C6A3; }
.slot .arrow.l { left: 6px; } .slot .arrow.r { right: 6px; }
.slot .kick { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #FFF9E8; background: #fff; color: var(--ink); font-size: 14px; line-height: 1; }
.hint { margin: 0; text-align: center; font-size: 11px; color: var(--ink); background: #FFF9E8dd; padding: 7px 10px; border-radius: 20px; }

.rules { background: #FFF9E8; color: var(--ink); border: 2px solid #fff; border-radius: 28px; padding: 16px 14px; box-shadow: 0 6px 22px #5A463218; display: flex; flex-direction: column; gap: 14px; }
.rule { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rule-label { font-size: 15px; }
.rule-label small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }
.chips { display: flex; gap: 6px; }
.chips button { width: 40px; height: 40px; border-radius: 12px; border: 2px solid #FFF9E8; background: #fff; color: var(--ink); font-family: var(--display); font-size: 17px; box-shadow: 0 3px 0 #D8C6A3; }
.chips button.on { background: var(--yellow); transform: translateY(2px); box-shadow: 0 1px 0 #D8C6A3; }
.toggle { width: 62px; height: 34px; border-radius: 20px; border: 2px solid #FFF9E8; background: #D6CFB7; position: relative; padding: 0; }
.toggle span { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid #FFF9E8; transition: left .15s; }
.toggle[aria-pressed="true"] { background: #78C27A; }
.toggle[aria-pressed="true"] span { left: 30px; }
.rules.readonly button:not(.item-chip) { pointer-events: none; }
.host-ctl { display: flex; flex-direction: column; gap: 12px; }

/* ---------- 対戦画面 ---------- */
#game { flex-direction: column; touch-action: none; background: repeating-linear-gradient(135deg, #ffffff09 0 22px, #ffffff00 22px 44px), linear-gradient(#B7D99B, #8EC181); }
.hud { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 8px 2px; }
.plate { position: relative; padding: 7px 8px 6px 43px; min-height: 54px; min-width: 0; overflow: hidden; }
.plate::before { content: ""; position: absolute; left: 7px; top: 9px; width: 29px; height: 33px; border-radius: 9px; background: color-mix(in srgb, var(--c) 65%, #fff); }
.plate img.face { position: absolute; left: 6px; top: 10px; width: 32px; }
.plate .top { display: flex; align-items: baseline; gap: 6px; }
.plate .nm { font-size: 13px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; min-width: 0; }
.plate .wins { margin-left: auto; flex: none; font-size: 10px; letter-spacing: -1.5px; color: #fff; line-height: 1.1; }
.plate .icons { display: flex; flex-wrap: wrap; gap: 0 4px; font-size: 12px; line-height: 18px; align-items: center; }
.plate .icons img { width: 18px; height: 18px; vertical-align: -4px; }
.plate.dead { color: #FF8B80; }
.plate.dead::after { content: "×"; position: absolute; left: 13px; top: 15px; font-size: 25px; color: #FF8B80; }
.plate.me { outline: 2px solid #FFD85C; outline-offset: 1px; }

.board-wrap { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding-top: 26px; }
.board-frame { border: 4px solid transparent; border-radius: 15px; overflow: hidden; background: repeating-linear-gradient(0deg, #B07D4F 0 5px, #C4905F 5px 6px, #B07D4F 6px 11px) border-box; box-shadow: 0 5px 0 #885D38, 0 10px 24px #5A46322B, 0 0 0 2px #D5AC7B; line-height: 0; }
#board { display: block; }
.timer { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 14px; padding: 5px 14px 6px; letter-spacing: 1px; line-height: 1.05; }
.timer.hurry { color: #FF8B80; animation: timer-flash .7s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.count { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 88px; line-height: 1.3; min-width: 148px; max-width: 88%; padding: 12px 26px 18px; text-align: center; pointer-events: none; z-index: 3; }
.count.anim { animation: countPop .9s ease-out both; }
@keyframes countPop { from { transform: translate(-50%, -50%) scale(1.05); } to { transform: translate(-50%, -50%); } }
.count.go { font-size: 76px; color: #fff; }
.count small { display: block; font-size: 18px; color: #fff; text-align: center; letter-spacing: 1px; margin-bottom: 0; white-space: nowrap; }
.count.goal { width: 224px; max-width: calc(100% - 12px); min-width: 0; padding: 8px 12px; font-size: 52px; line-height: 1; }
.count.goal .round-goal { display: block; margin-bottom: 6px; font-size: 20px; line-height: 1.25; color: #ffe066; white-space: nowrap; }
.count.goal small { font-size: 12px; line-height: 1.3; letter-spacing: 0; }
.count.goal .round-digit { display: block; font-size: 52px; line-height: 1; }
.count.goal .round-victory { display: block; margin-top: 4px; font-size: 12px; line-height: 1.3; color: #fff; white-space: nowrap; }
.banner { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; top: 50%; transform: translateY(-50%); z-index: 3; pointer-events: none; padding: 16px 20px; text-align: center; max-width: 92%; animation: bannerIn .35s ease-out both; display: flex; align-items: center; gap: 10px; }
.banner img { width: 54px; flex: none; }
.banner .t { font-family: var(--dot); font-size: clamp(20px, 7vw, 30px); line-height: 1.35; overflow-wrap: anywhere; }
.banner small { display: block; font-family: var(--dot); font-size: 24px; color: #fff; letter-spacing: 1px; }
.banner.hurry { background: var(--window); color: #fff; }
.banner.hurry .t { font-size: clamp(22px, 7vw, 32px); }
@keyframes bannerIn { from { transform: translate(-50%, -50%) scale(.96); } }
@keyframes cardIn { from { transform: scale(.96); } }
.pickup { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 3; background: var(--ink); color: #fff; border-radius: 14px; padding: 5px 12px 5px 6px; font-size: 14px; display: flex; align-items: center; gap: 6px; pointer-events: none; animation: rise .3s ease-out both; white-space: nowrap; }
.pickup img { width: 26px; }
@keyframes rise { from { transform: translate(-50%, 16px); } }
.net-info { position: absolute; left: 8px; bottom: 2px; font-size: 10px; color: var(--ink); pointer-events: none; }
.mute { position: absolute; right: 6px; top: 0; background: none; border: 0; font-size: 18px; opacity: .8; z-index: 2; }

.controls { height: 34%; max-height: 250px; min-height: 168px; display: flex; align-items: stretch; justify-content: space-between; padding: 6px 14px max(12px, env(safe-area-inset-bottom)); gap: 12px; }
.pad { position: relative; flex: 1; max-width: 58%; touch-action: none; }
.pad-base { position: absolute; width: 132px; height: 132px; margin: -66px 0 0 -66px; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; background: #FFF9E880; border: 3px solid #FFF9E8; box-shadow: inset 0 3px 8px #5A463214, 0 4px 0 #6EA661; }
.pad .arw { position: absolute; width: 0; height: 0; border: 9px solid transparent; opacity: .5; }
.pad .arw.u { left: 50%; top: 8px; margin-left: -9px; border-bottom-color: #7D9D66; border-top-width: 0; }
.pad .arw.d { left: 50%; bottom: 8px; margin-left: -9px; border-top-color: #7D9D66; border-bottom-width: 0; }
.pad .arw.l { top: 50%; left: 8px; margin-top: -9px; border-right-color: #7D9D66; border-left-width: 0; }
.pad .arw.r { top: 50%; right: 8px; margin-top: -9px; border-left-color: #7D9D66; border-right-width: 0; }
.pad-knob { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: #FFF8E7; border: 2px solid #fff; box-shadow: 0 5px 0 #BDAE87; }
.pad.active .pad-base { border-color: rgba(255,207,63,.7); }
.buttons { position: relative; display: flex; align-items: center; justify-content: center; }
.bomb-btn { width: min(36vw, 150px); height: min(36vw, 150px); border-radius: 50%; border: 3px solid #FFF1B8; padding: 0; background: #F7CD46; box-shadow: 0 7px 0 #D7AD3E, 0 12px 22px #5A46321A; touch-action: none; display: flex; align-items: center; justify-content: center; position: relative; }
.bomb-btn::after { content: none; }
.bomb-btn img { width: 62%; margin-top: -6%; pointer-events: none; }
.bomb-btn.down { transform: translateY(6px); box-shadow: 0 1px 0 #D7AD3E; }
.act-btn {
  position: absolute; top: -6px; left: -46px; width: 70px; height: 70px; border-radius: 50%; border: 2px solid #FFF9E8;
  background: #8FD3A8; box-shadow: 0 6px 0 #D8C6A3; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; line-height: 1; touch-action: none; padding: 0;
  animation: actIn .3s cubic-bezier(.2, 1.6, .4, 1) both;
}
.act-btn b { font-size: 10px; margin-top: 2px; }
.act-btn.down { transform: translateY(5px); box-shadow: 0 1px 0 #D8C6A3; }
@keyframes actIn { from { transform: scale(0); } }

/* 横向き：盤面を真ん中、操作を左右に */
@media (orientation: landscape) and (max-height: 560px) {
  #game.active { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto 1fr; }
  .hud { grid-column: 1 / 4; grid-row: 1; padding: 4px 8px 0; grid-template-columns: repeat(4, 1fr); }
  .plate { min-height: 40px; }
  .plate .nm { font-size: 12px; }
  .plate .icons img { width: 15px; height: 15px; }
  .board-wrap { grid-column: 2; grid-row: 2; padding-top: 24px; }
  .controls { display: contents; }
  .pad { grid-column: 1; grid-row: 2; max-width: none; margin: 4px 0 8px max(8px, env(safe-area-inset-left)); }
  .buttons { grid-column: 3; grid-row: 2; }
  .bomb-btn { width: min(30vh, 140px); height: min(30vh, 140px); }
}

/* ---------- 優勝 ---------- */
.result { position: absolute; inset: 0; background: rgba(90,70,50,.28); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 5; }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.result-card { position: relative; padding: 22px 20px; width: 100%; max-width: 360px; max-height: 100%; overflow-y: auto; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; animation: cardIn .35s ease-out both; }
.result-title { margin: 0; font-family: var(--dot); font-size: 24px; color: #fff; }
.champ-img { width: 110px; animation: hop .7s ease-in-out infinite; transform-origin: 50% 100%; }
.champ { margin: 0; font-family: var(--dot); font-size: 30px; max-width: 100%; overflow-wrap: anywhere; }
.final { list-style: none; padding: 0; margin: 4px 0 8px; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.final li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #ffffff55; padding: 5px 6px; font-size: 15px; }
.final li img { width: 30px; }
.final li .rk { font-family: var(--display); width: 22px; }
.final li .sc { margin-left: auto; color: #fff; }
.result .btn { width: 100%; }

/* ---------- あそびかた ---------- */
.modal { position: fixed; inset: 0; z-index: 20; background: rgba(90,70,50,.28); display: flex; align-items: flex-start; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 12px 16px; overflow-y: auto; }
.modal-card { position: relative; padding: 22px 18px; width: 100%; max-width: 440px; }
.modal-card h2 { margin: 0 0 12px; padding-right: 30px; font-family: var(--dot); font-weight: 400; font-size: 24px; }
.modal-card h3 { margin: 16px 0 6px; font-size: 16px; }
.close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 8px; border: 1px solid #fff; background: #000; color: #fff; font-size: 20px; line-height: 1; }
.howto-list { padding-left: 20px; margin: 0; line-height: 1.7; font-size: 14px; font-weight: 500; }
.item-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.item-list li { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: 1.3; }
.item-list li img { width: 36px; flex: none; }
.item-list li b { display: block; font-size: 13px; font-weight: 800; }
.note { font-size: 12px; font-weight: 400; color: inherit; margin: 0 0 6px; line-height: 1.65; }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink); border: 3px solid #fff; padding: 10px 16px; border-radius: 14px; font-size: 14px; z-index: 30; max-width: 90vw; text-align: center; }

/* ---------- 待合室の設定（ステージ・アイテム） ---------- */
.rule.col { flex-direction: column; align-items: stretch; gap: 6px; }
.stage-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 2px 0 4px; }
.stage-chips::-webkit-scrollbar { display: none; }
.stage-chip {
  min-width: 0; border-radius: 14px; border: 2px solid #FFF9E8; background: #fff; color: var(--ink); padding: 0 0 4px;
  box-shadow: 0 3px 0 #D8C6A3; overflow: hidden; display: flex; flex-direction: column; align-items: center; font-size: 12px; font-weight: 800;
}
.stage-chip img { width: 100%; height: 44px; object-fit: cover; object-position: center bottom; display: block; margin-bottom: 3px; }
.stage-chip .big { height: 44px; display: flex; align-items: center; justify-content: center; font-size: 28px; background: #F7CD46; width: 100%; margin-bottom: 3px; }
.stage-chip.on { background: var(--yellow); transform: translateY(2px); box-shadow: 0 1px 0 #D8C6A3; outline: 3px solid #fff; }
.item-chips { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.item-chip { position: relative; aspect-ratio: 1; border: 0; padding: 0; background: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.item-chip img { pointer-events: none; }
.item-help-hint { font-size: 12px; }
.item-help { position: fixed; z-index: 30; width: min(248px, calc(100vw - 16px)); padding: 9px 12px; text-align: left; pointer-events: none; color: var(--ink); background: #FFF9E8; border: 1px solid #D8C9A3; border-radius: 10px; box-shadow: 0 3px 10px #6B553630; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.item-help[hidden] { display: none; }
.item-help b { display: block; margin-bottom: 3px; font-size: 13px; }
.item-help::after { content: ""; position: absolute; left: var(--arrow-left); width: 8px; height: 8px; background: #FFF9E8; transform: translateX(-50%) rotate(45deg); }
.item-help[data-side="above"]::after { bottom: -5px; border-right: 1px solid #D8C9A3; border-bottom: 1px solid #D8C9A3; }
.item-help[data-side="below"]::after { top: -5px; border-left: 1px solid #D8C9A3; border-top: 1px solid #D8C9A3; }
.item-chip img { width: 100%; display: block; transition: filter .15s, opacity .15s; }
.item-chip.off img { filter: grayscale(1); opacity: .35; }
.item-chip.off::after { content: ""; position: absolute; left: 8%; right: 8%; top: 46%; height: 4px; background: var(--red); border-radius: 2px; transform: rotate(-35deg); box-shadow: 0 0 0 2px var(--ink); }
.item-tools { display: flex; gap: 6px; justify-content: flex-end; }
.item-tools button { font-size: 11px; padding: 3px 8px; border-radius: 8px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font-weight: 800; }

/* ---------- 対戦中のメニュー ---------- */
.menu-btn { position: absolute; left: 6px; top: 0; z-index: 2; width: 34px; height: 28px; border-radius: 9px; border: 3px solid #fff; background: var(--ink); display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 6px; }
.menu-btn i { display: block; height: 3px; border-radius: 2px; background: #fff; }
.modal.center { align-items: center; }
.menu-card { max-width: 340px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.menu-card h2 { margin: 0; }
.note.center { text-align: center; margin: -4px 0 0; }

/* ---------- CPUの強さ・タマゴの出やすさ ---------- */
.slot.bot { padding-bottom: 6px; }
.slot .tag { text-align: center; line-height: 1.3; padding: 0 2px; }
.slot .lv { position: relative; display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.slot .lv button { width: 28px; height: 26px; border-radius: 8px; border: 2px solid #FFF9E8; background: #fff; color: var(--ink); font-size: 11px; box-shadow: 0 2px 0 #D8C6A3; padding: 0; }
.slot .lv button:disabled { opacity: 1; cursor: default; }
.lvb { font-family: var(--display); font-size: 13px; background: var(--ink); color: var(--yellow); border-radius: 8px; padding: 1px 7px; }
.chips.wide { width: 100%; }
.chips.wide button { flex: 1; width: auto; padding: 0 4px; font-size: 13px; font-family: var(--round); font-weight: 800; }
.item-list.one { grid-template-columns: 1fr; }
.item-list .lvb { flex: none; }

/* ---------- 特技のまち時間（ボタンが時計回りに戻る） ---------- */
.act-btn, .bomb-btn { --cd: 0; }
.cooldown-ring {
  position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px);
  fill: none; stroke: #6B5536; stroke-width: 4; pointer-events: none; z-index: 2;
  transform: rotate(-90deg);
}
.cooldown-ring circle { stroke-dasharray: calc(var(--cd) * 100) 100; }
.bomb-btn.dragon { background: #F7CD46; }

/* ---------- 2D / 一人称3D の切り替え ---------- */
#board3d { display: block; }
.view-btn { position: absolute; left: 46px; top: 0; z-index: 2; height: 28px; padding: 0 8px; border-radius: 9px; border: 3px solid #fff; background: var(--pink); color: #fff; font-family: var(--display); font-size: 13px; }

/* ---------- もらったポイント（優勝画面） ---------- */
.reward { width: 100%; padding: 12px; animation: cardIn .5s .3s ease-out both; }
.reward b { font-family: var(--dot); font-size: 22px; }
.reward .new { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; color: #fff; font-weight: 400; }
.reward .new img { width: 44px; }
.slot .member { position: absolute; bottom: 6px; right: 8px; font-size: 14px; }

/* ---------- ばくだんダンジョン（一人称3Dの別ゲーム） ---------- */

.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-card { border: 2px solid #FFF9E8; border-radius: 14px; background: #fff; color: var(--ink); padding: 8px 6px; box-shadow: 0 3px 0 #D8C6A3; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.mode-card b { font-size: 14px; }
.mode-card small { font-size: 11px; color: var(--muted); font-weight: 700; }
.mode-card.on { background: var(--yellow); transform: translateY(2px); box-shadow: 0 1px 0 #D8C6A3; outline: 3px solid #fff; }
.mode-card[data-mode="dungeon"].on { background: #8FD3A8; color: #fff; }
.mode-card[data-mode="dungeon"].on small { color: #5A4632; }
body.dungeon .ticket { background: linear-gradient(135deg, #B5DEAA, #78C27A); }
.ticket-label b { font-weight: 800; }

/* ---------- 音ボタン（タイトル・待合室） ---------- */
.sound-pill { position: fixed; top: calc(env(safe-area-inset-top) + 10px); right: 10px; z-index: 15; height: 40px; min-width: 40px; border-radius: 20px; border: 2px solid #FFF9E8; background: #fff; color: var(--ink); font-size: 18px; display: flex; align-items: center; gap: 4px; padding: 0 8px; box-shadow: 0 3px 0 #D8C6A3; }
.sound-pill span { font-size: 12px; font-weight: 800; }
.sound-pill.wait { background: var(--yellow); animation: pillPulse 1.2s ease-in-out infinite; }
@keyframes pillPulse { 50% { transform: scale(1.06); } }

/* ---------- ストーリーと、手を動かすチュートリアル ---------- */
.first-tutorial { border: 2px solid #FFF9E8; border-radius: 28px; padding: 16px; color: var(--ink); background: #FFF9E8; text-align: center; box-shadow: 0 6px 24px #5A46321A; }
.first-tutorial > b { font-size: 14px; color: #608843; }
.first-tutorial p { margin: 6px 0 12px; font-size: 18px; }
.first-tutorial .btn { width: 100%; }
.tutorial-later { color: #7C6C50; background: none; border: 0; padding: 12px 20px 0; font-size: 14px; cursor: pointer; }
.solo-choices { display: grid; gap: 12px; }
.story-btn { --button-shadow: #5AAE5E; background: #A6D69B; font-size: 17px; }
.story-screen { overflow-y: auto; color: var(--ink); background: radial-gradient(ellipse at 100% 0, #E4EFCE, transparent 55%), #FBF3DD; }
.chapter-inner { width: 100%; max-width: 540px; margin: 0 auto; padding: 20px 22px 40px; }
.story-back { border: 0; color: #5A4632; background: transparent; padding: 10px 0; font: inherit; cursor: pointer; }
.story-eyebrow { color: #608843; font-size: 11px; letter-spacing: .16em; margin: 16px 0 10px; }
.chapter-inner h1 { font-size: clamp(22px, 5.6vw, 30px); line-height: 1.6; margin: 0; text-wrap: balance; }
.chapter-summary { font-size: 14px; font-weight: 400; line-height: 1.9; margin: 16px 0 24px; padding: 16px; }
.story-path { list-style: none; padding: 0; margin: 0 0 22px; position: relative; }
.story-path::before { content: ""; position: absolute; top: 25px; bottom: 25px; left: 23px; width: 2px; background: #B6CB91; }
.story-path li { position: relative; margin-bottom: 10px; }
.story-path button { display: flex; align-items: center; gap: 13px; width: 100%; padding: 10px 8px; background: #FFF9E8; color: var(--ink); border: 2px solid #E4D8BC; border-radius: 22px; text-align: left; cursor: pointer; }
.path-number { flex: 0 0 46px; height: 46px; display: grid; place-items: center; border: 2px solid #D8C6A3; background: #FFF9E8; border-radius: 50%; font-size: 19px; }
.story-path b { font-size: 13px; display: block; }
.story-path small { display: block; margin-top: 4px; color: #7C6C50; font-size: 10px; }
.story-path .cleared .path-number { background: #78C27A; color: #5A4632; border-color: #5AAE5E; }
.story-path .next button { background: #FFF4C2; border-color: #E5C35E; box-shadow: 0 4px 0 #E4C56E; }
.story-path .next .path-number { background: #ffdc80; color: #5A4632; border-color: #ffdc80; box-shadow: 0 0 20px #ffdc8040; }
.story-path .next small { color: #7C6330; }
.story-path .locked button { opacity: .65; cursor: default; }
.chapter-inner > .btn { width: 100%; }
.story-progress { text-align: center; font-size: 11px; color: #7C6C50; margin: 16px 0 0; }
.dialogue-screen { background: #8FD8F2; }
.dialogue-scene { --scene-bg: #B5D997; position: relative; flex: 1; min-width: 0; overflow: hidden; background-color: var(--story-background-fallback,var(--scene-bg)); background-size: cover; background-position: var(--story-background-position,50% 50%); background-repeat: no-repeat; }
.dialogue-scene::before { content: ""; position: absolute; inset: 55% -25% 0; border-radius: 45% 45% 0 0; background: repeating-linear-gradient(135deg, #ffffff16 0 26px, transparent 26px 52px); }
.dialogue-scene[data-background-status="loaded"] { background-image: var(--story-background-image); }
.dialogue-scene[data-background-status="loaded"]::before { display: none; }
@media (orientation: portrait) { .dialogue-scene { background-position: var(--story-background-position-portrait,50% 50%); } }
.dialogue-place { position: absolute; top: 76px; width: 100%; text-align: center; padding: 0 20px; font-size: 12px; color: var(--ink); }
.dialogue-exit { position: absolute; top: 12px; left: 20px; z-index: 3; }
.dialogue-skip { position: absolute; right: 16px; top: 16px; z-index: 3; padding: 10px 16px; color: var(--ink); border: 2px solid #fff; border-radius: 30px; background: #FFF9E8; font: inherit; font-size: 12px; cursor: pointer; }
.dialogue-actor { position: absolute; width: min(66vw, 300px); height: 46%; object-fit: contain; bottom: 30%; left: 50%; transform: translateX(-50%); filter: drop-shadow(0 18px 20px #0007); animation: story-appear .5s ease-out; }
.dialogue-box { position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); left: 5%; width: 90%; min-height: 210px; max-height: 45%; overflow-y: auto; padding: 20px 20px 24px; text-align: left; cursor: pointer; }
.dialogue-name { display: block; margin: 0 0 8px; padding: 0; color: #fff; background: none; font: inherit; }
.dialogue-text { display: block; font-size: 17px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.dialogue-hint { display: block; text-align: right; margin-top: 14px; font-size: 11px; color: #fff; }
.narration .dialogue-box { top: 27%; bottom: auto; max-height: 55%; min-height: 200px; left: 5%; width: 90%; display: flex; flex-direction: column; justify-content: center; padding: 26px 22px; }
.narration .dialogue-text { text-align: left; font-size: 18px; line-height: 2; font-weight: 400; }
.narration .dialogue-hint { color: #fff; text-align: right; }
.finale .dialogue-box { top: 20%; max-height: 70%; padding: 50px 28px; animation: ending-reveal 3s ease-out; }
.finale .dialogue-text { font-size: 26px; color: #fff; font-weight: 400; line-height: 2; }
.story-center { align-items: center; justify-content: center; overflow-y: auto; background: radial-gradient(ellipse at 50% 0, #D5EDCD, transparent 65%), #FBF3DD; padding: 24px 20px; }
.story-card { width: 100%; max-width: 420px; margin: auto; padding: 22px; text-align: center; position: relative; z-index: 1; }
.story-card h1 { font-size: 26px; line-height: 1.6; }
.story-card > p:not(.story-eyebrow):not(.story-emblem) { line-height: 1.8; font-size: 14px; color: #fff; }
.story-card > .btn { display: block; width: 100%; margin-top: 15px; }
.story-emblem { font-size: 66px; margin: 8px; }
.story-reward-card h1 { font-size: 24px; color: #fff; }
.story-reward-actor { display: block; width: 180px; height: 252px; object-fit: contain; margin: 5px auto; filter: drop-shadow(0 0 30px #ffdd8866); animation: reward-rise 1.2s ease-out; }
.story-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.story-confetti i { position: absolute; top: -20px; left: var(--x); width: 8px; height: 14px; animation: story-confetti-fall 5s var(--delay) linear infinite; }
.tutorial-step { flex: 0 0 auto; display: flex; gap: 12px; align-items: center; margin: 8px 8px 0; padding: 14px; font-size: 14px; line-height: 1.6; }
.tutorial-step b { flex: 0 0 42px; font-size: 16px; text-align: center; }
.tutorial-step.step-achieved { color: #fff; animation: tutorial-check .6s ease-out; }
.tutorial-game .controls { height: 26%; min-height: 158px; max-height: 210px; }
.tutorial-glow { outline: 3px solid #ffdb73; outline-offset: -3px; animation: tutorial-pulse 1.2s ease-in-out infinite; }
.tutorial-glow::after { content: "▼"; color: #6B5536; position: absolute; top: -8px; left: 50%; font-size: 34px; pointer-events: none; transform: translateX(-50%); filter: drop-shadow(0 2px 2px #0009); }
#btnBomb.tutorial-glow::after { top: -36px; }
@keyframes story-appear { from { margin-left: 20px; } to { margin-left: 0; } }
@keyframes ending-reveal { from { transform: translateY(8px); } to { transform: none; } }
@keyframes reward-rise { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes story-confetti-fall { to { transform: translate(35px, 100vh) rotate(600deg); } }
@keyframes tutorial-pulse { 50% { box-shadow: 0 0 22px #ffdb73aa; } }
@keyframes tutorial-check { 50% { transform: scale(1.025); } }
@media (orientation: landscape) and (max-height: 560px) {
  .tutorial-game .tutorial-step { grid-column: 1 / 4; grid-row: 1; margin: 4px; padding: 4px 10px; }
  #game.tutorial-game.active { grid-template-rows: auto auto 1fr; }
  .tutorial-game .hud { grid-row: 2; }
  .tutorial-game .board-wrap, .tutorial-game .pad, .tutorial-game .buttons { grid-row: 3; }
  .dialogue-actor { width: 30%; height: 80%; bottom: 0; left: 21%; }
  .dialogue-box { left: 40%; width: 56%; bottom: 20px; min-height: 190px; max-height: 72%; }
  .dialogue-place { top: 64px; text-align: left; }
  .narration .dialogue-box { top: 23%; min-height: 150px; padding: 20px 60px; max-height: 70%; }
  .story-center { align-items: flex-start; }
  .story-reward-actor { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-confetti i, .tutorial-glow, .dialogue-actor, .story-reward-actor, .finale .dialogue-box { animation: none; }
}

/* 島の画面。窓以外は丸ゴシック・こげ茶・同系色の立体感。 */
.home-inner { padding-top: 48px; }
.lobby-inner { padding-top: 58px; }
.logo { align-self: center; width: 100%; }
.logo-bomb { width: 78px; height: 86px; margin-bottom: -14px; filter: drop-shadow(0 4px 0 #B07D4F33); }
.logo-text { position: relative; width: max-content; margin: auto; }
.logo-text::before { content: ""; position: absolute; top: 1px; right: -20px; width: 34px; height: 22px; border-radius: 90% 5% 90% 5%; background: #78C27A; transform: rotate(-24deg); box-shadow: inset 0 -3px #5AAE5E; }
.logo-text::after { content: ""; position: absolute; bottom: 5px; left: -14px; width: 15px; height: 15px; border-radius: 50%; background: #FFD85C; box-shadow: -7px -5px 0 #FFF9E8, -6px 7px 0 #FFF9E8; }
input { min-width: 0; border-width: 2px; background: #FBF3DD; }
input:focus { border-color: #5AAE5E; }
.row .btn { flex: none; }
.btn.app-button { display: flex; align-items: center; justify-content: center; gap: 10px; }
.app-icon { flex: 0 0 32px; width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 11px; background: #FBF3DD; font-size: 19px; box-shadow: inset 0 2px 0 #ffffff90; vertical-align: middle; }
.story-btn .app-icon { background: #E5F0C6; }
.dungeon-btn { --button-shadow: #7AA868; background: #D6E8C0; color: var(--ink); text-shadow: none; font-size: 13px; }
.dungeon-btn .app-icon { background: #8FD8F2; }
.mode-card { font-family: var(--round); background: #FBF3DD; }
.mode-card[data-mode="dungeon"].on { color: var(--ink); }
.mode-card b { font-size: 12px; }
.mode-card small { font-size: 10px; }
.slot .arrow, .slot .kick, .slot .lv button { border-color: #E3D6BA; box-shadow: 0 2px 0 #D8C6A3; }
.slot .member { color: #577D40; }
.lvb { background: #E6EDD0; color: var(--ink); font-family: var(--round); }
.toggle { border-color: #C3CBAA; }
.toggle span { border: 1px solid #F1E6C8; }
.item-chip { background: #EAF0D6; border-radius: 12px; }
.item-chip.off::after { box-shadow: 0 0 0 1px #FFF9E8; }
.sound-pill { color: var(--ink); border-color: #FFF9E8; background: #FFF9E8; box-shadow: 0 3px 0 #D8C6A3; }
.mute { width: 34px; height: 28px; border-radius: 10px; background: #FFF9E8; color: var(--ink); opacity: 1; }
.story-back { padding: 10px 14px; background: #FFF9E8; border-radius: 30px; color: var(--ink); }
.path-number { border-color: #DBCDAC; }
.story-path::before { left: 33px; width: 4px; }
.story-path .next .path-number { box-shadow: none; }
.act-btn { background: #8FD3A8; border-color: #E4F1D4; box-shadow: 0 5px 0 #5AAE5E; }
.act-btn.down { box-shadow: 0 1px 0 #5AAE5E; }
.bomb-btn.dragon { background: #F7CD46; }

/* 文字の窓。黒地に白い線を1本。 */
.plate, .timer, .count, .banner, .pickup, .toast, .modal-card, .result-card,
.dialogue-box, .narration .dialogue-box, .tutorial-step, .chapter-summary, .story-card, .reward,
.msg:not(:empty), #lobby .msg:not(:empty) {
  background: var(--window); color: #fff; border: 3px solid #fff; border-radius: 9px;
  box-shadow: var(--window-shadow); font-family: var(--dot); font-weight: 400;
  text-shadow: none; -webkit-text-stroke: 0; flex-shrink: 0;
}
/* 高さに上限のある窓は、中身を縮めず既存のスクロールで読めるようにする。 */
.result-card > *, .menu-card > *, .narration .dialogue-box > * { flex-shrink: 0; }
.narration .dialogue-box { justify-content: safe center; }
.plate .icons .stat { white-space: nowrap; }
.plate .icons img { width: 15px; height: 15px; }
.plate.dead .wins { color: #FF8B80; }
.plate.dead .face { opacity: .4; }
.pickup { padding: 9px 14px; max-width: 94%; white-space: normal; }
.toast { font-size: 15px; }
.menu-btn { background: #000; border: 2px solid #fff; border-radius: 7px; box-shadow: none; padding: 0 8px; }
.menu-btn i { height: 2px; }
.menu-card { gap: 8px; }
.menu-card h2 { padding: 0; margin-bottom: 6px; }
.modal-card h3 { font-weight: 400; margin-top: 20px; border-bottom: 1px solid #ffffff66; padding-bottom: 7px; }
.modal-card .lvb { background: #000; color: #fff; border: 1px solid #fff; font-family: var(--dot); }
.howto-list, .item-list li { font-weight: 400; }
.howto-list b, .item-list li b { font-weight: 400; }
.item-list { gap: 12px 8px; }
.final .rk { font-family: var(--dot); }
.final li .n { min-width: 0; overflow-wrap: anywhere; }
.result .msg, .story-card .story-eyebrow { color: #fff; }
.reward { font-size: 13px; line-height: 1.6; }
.msg:not(:empty), #lobby .msg:not(:empty) {
  height: auto; min-height: calc(1.6em + 30px); width: 100%;
  padding: 12px 16px; line-height: 1.6; overflow-wrap: anywhere;
}
.story-card h1, .story-card h2 { font-weight: 400; }
.reward b { color: #fff; font-weight: 400; }
.reward .new { display: flex; align-items: center; gap: 8px; text-align: left; }
.reward .new img { width: 44px; }

/* 窓内の選択肢だけをコマンド表示に。押せる範囲は44px以上。 */
.menu-card .btn, .result-card .btn, .story-card .btn {
  display: block; position: relative; background: #000; color: #fff; border: 0; border-radius: 4px;
  box-shadow: none; text-shadow: none; font: 400 19px/1.6 var(--dot); text-align: left;
  padding: 11px 6px 11px 30px; min-height: 48px; letter-spacing: 0; white-space: normal;
}
.menu-card .btn::after, .result-card .btn::after, .story-card .btn::after { content: none; }
.menu-card .btn::before, .result-card .btn::before, .story-card .btn::before {
  content: "▶"; position: absolute; left: 8px; top: 11px; color: #fff; opacity: 0;
}
/* 非表示になった行は選択対象から外し、未操作の窓は最初の行を選ぶ。 */
:is(.menu-card, .result-card, .story-card) .btn.command-current:not(.hidden)::before,
:is(.menu-card, .result-card, .story-card):not(:has(.command-current:not(.hidden))) .btn:not(.hidden)::before { opacity: 1; }
:is(.menu-card, .result-card, .story-card):not(:has(.command-current:not(.hidden))) .btn:not(.hidden) ~ .btn::before { opacity: 0; }
.menu-card .btn:active, .result-card .btn:active, .story-card .btn:active { transform: translateY(2px); background: #ffffff18; }
.menu-card .note { text-align: left; padding-left: 30px; }
.dialogue-hint::after { content: none; }
.dialogue-box.typing .dialogue-hint { visibility: hidden; }
@keyframes dialogue-cursor { 50% { opacity: 0; } }
@keyframes timer-flash { 50% { color: #fff; } }
button:focus-visible { outline: 3px solid #5AAE5E; outline-offset: 4px; }
:is(.modal-card, .result-card, .story-card) button:focus-visible, .dialogue-box:focus-visible { outline-color: #FFD85C; }
@media (orientation: landscape) and (max-height: 560px) {
  .plate { padding-top: 5px; padding-bottom: 5px; min-height: 48px; }
  .plate img.face { top: 7px; }
  .plate::before { top: 6px; }
  .plate .nm { font-size: 12px; }
  .dialogue-box { left: 40%; width: 56%; bottom: 20px; min-height: 180px; max-height: 72%; padding: 18px; }
  .narration .dialogue-box { left: 8%; width: 84%; top: 23%; min-height: 150px; padding: 20px 28px; max-height: 70%; }
  .dialogue-text { font-size: 16px; line-height: 1.7; }
  .dialogue-name { margin-bottom: 8px; }
  .dialogue-hint { margin-top: 8px; }
  .tutorial-game .tutorial-step { padding: 7px 12px; }
  .result-card { max-height: 100%; }
}
@media (max-width: 360px) {
  .home-inner, .lobby-inner { padding-left: 12px; padding-right: 12px; }
  .plate { padding-left: 36px; }
  .plate img.face { width: 27px; }
  .plate::before { width: 25px; }
  .plate .icons { font-size: 11px; gap: 0 2px; }
  .chips { gap: 4px; }
  .chips button { width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-bomb, .slot .stage img, .champ-img, .sound-pill.wait, .dialogue-hint::after { animation: none; }
}

/* 第2弾の指定色。島のボタンは単色、窓内はコマンドの行。 */
.ui-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon { width: 24px; height: 24px; display: inline-block; flex: none; vertical-align: middle; fill: none; stroke: #6B5536; stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; }
.app-icon, .story-btn .app-icon, .dungeon-btn .app-icon { background: none; box-shadow: none; }
.app-icon .ui-icon { width: 28px; height: 28px; }
.story-emblem .ui-icon { width: 64px; height: 64px; }
.stage-chip .big .ui-icon { width: 30px; height: 30px; }
.bg { background: repeating-linear-gradient(45deg,#BFE3A6 0 24px,#B3DB98 24px 48px); }
:is(.btn, .chips button, .stage-chip, .mode-card, .item-chip, .item-tools button, .slot .arrow, .slot .kick, .slot .lv button, .toggle, .sound-pill, .mute, .menu-btn, .view-btn, .tutorial-later, .story-back, .dialogue-skip, .story-path button, .bomb-btn, .act-btn) {
  --button-shadow: #D8C9A3; background: #FFF8E7; color: #6B5536;
  border-radius: 999px; font-weight: 700; box-shadow: 0 4px 0 var(--button-shadow);
  text-shadow: none; opacity: 1; transition: transform .08s, box-shadow .08s;
}
:is(.btn.yellow, .chips button.on, .stage-chip.on, .mode-card.on, .sound-pill.wait, .story-path .next button, .bomb-btn, .bomb-btn.dragon) {
  --button-shadow: #D9A92E; background: #F7CD46;
}
:is(.btn.blue, .btn.story-btn, .btn.dungeon-btn, .mode-card[data-mode="dungeon"].on, .toggle[aria-pressed="true"], .act-btn) {
  --button-shadow: #5FAF7E; background: #8FD3A8;
}
:is(.btn, .chips button, .stage-chip, .mode-card, .item-chip, .item-tools button, .slot .arrow, .slot .kick, .slot .lv button, .toggle, .sound-pill, .mute, .menu-btn, .view-btn, .tutorial-later, .story-back, .dialogue-skip, .story-path button, .bomb-btn, .act-btn):active,
.bomb-btn.down, .act-btn.down { transform: translateY(4px); box-shadow: 0 0 0 var(--button-shadow); }
.btn:disabled { filter: grayscale(.5); opacity: 1; }
.stage-chip { position: relative; isolation: isolate; height: 72px; padding: 0; justify-content: center; }
.stage-chip .big { height: 30px; margin: 0 0 2px; background: none; }
.stage-chip .stage-label { position: relative; z-index: 2; max-width: calc(100% - 10px); font-size: clamp(10px, 3vw, 12px); line-height: 1.3; white-space: nowrap; pointer-events: none; }
.stage-chip img.stage-art { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: inherit; object-fit: cover; object-position: center 38%; pointer-events: none; }
.stage-chip.has-art::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(transparent 24%, #102e3b18 42%, #102e3bdf 100%); pointer-events: none; }
.stage-chip.has-art .stage-label { position: absolute; bottom: 10px; color: #fffdf3; font-weight: 800; text-shadow: 0 1px 3px #071e2f; }
.stage-chip.on { border-color: #ffc65b; outline: 2px solid #b97920; outline-offset: 0; }
.stage-chip:focus-visible { outline: 3px solid #14798c; outline-offset: 2px; }
.stage-chip.on, .mode-card.on, .chips button.on { transform: none; }
.mode-card[data-mode="dungeon"].on { color: #6B5536; }
.mode-card small, .mode-card[data-mode="dungeon"].on small, .story-path small, .story-path .next small { color: #6B5536; }
.tutorial-later { margin-top: 12px; padding: 8px 20px; }
.menu-btn { border: 2px solid #FFF8E7; }
.menu-btn i { background: #6B5536; }
.pad-base { background: #FFF8E7; box-shadow: 0 4px 0 #D8C9A3; }
.pad-knob { background: #FFF8E7; box-shadow: 0 4px 0 #D8C9A3; }
.story-path .locked button { opacity: 1; }
.board-frame { background: #C8A877; border-color: #C8A877; border-radius: 16px; box-shadow: none; }

/* 窓は不透明・白線1本。内線やぼかした影を重ねない。 */
.plate, .timer, .count, .banner, .pickup, .toast, .modal-card, .result-card,
.dialogue-box, .narration .dialogue-box, .tutorial-step, .chapter-summary, .story-card, .reward,
.msg:not(:empty), #lobby .msg:not(:empty) {
  background: #000; border: 3px solid #fff; border-radius: 8px;
  box-shadow: none; padding: 14px 16px; opacity: 1;
}
.plate { display: grid; grid-template-columns: 26px minmax(0,1fr); column-gap: 6px; }
.plate::before { content: none; }
.plate.me { outline: none; }
.plate img.face { position: static; width: 26px; grid-row: 1 / 3; align-self: center; }
.plate .top, .plate .icons { grid-column: 2; }
.plate .icons { font-size: 11px; gap: 0 3px; }
.plate .nm { font-size: 12px; }
.plate.dead::after { left: 17px; }
.board-wrap { padding-top: 54px; }
.controls { max-height: 210px; }
.count.go { font-size: 40px; }
.count small { white-space: normal; min-width: 200px; }
.banner { position: fixed; left: 50%; right: auto; top: 50%; margin: 0; transform: translate(-50%, -50%); width: 80%; max-width: 80%; justify-content: center; }
.banner .t { font-size: clamp(20px, 6vw, 28px); }
.banner.hurry .t { font-size: 22px; }
/* 試合を止めない表示（2026-10-19）：盤面を隠さない。
   はじめ！＝うすい窓ですぐ消える。お知らせ（アイテム・復活など）＝盤面に重なるときは小さく半透明で、自分のキャラと反対の端へ（client.js の placePickup）。
   盤面を大きく隠すハリーアップの告知は、その間サーバーがゲームの時間を止める（game.js の HURRY_PAUSE）。 */
.count.go { background: rgba(0, 0, 0, .45); }
.count.anim.go { animation: goFade .8s ease-in both; }
@keyframes goFade { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 55% { opacity: .85; } 100% { opacity: 0; transform: translate(-50%, -50%); } }
.pickup.over { background: rgba(0, 0, 0, .58); border-width: 2px; padding: 4px 10px; font-size: 12px; line-height: 1.4; max-width: 86%; }
.pickup img { height: 26px; flex: none; object-fit: contain; } /* 絵の読み込み前後で大きさが変わらないように（置き場所を先に測るため） */
.pickup.over img { width: 20px; height: 20px; }
@media (orientation: landscape) and (max-height: 560px) {
  /* 横向きは右の列（時間とポンボタンの間）に出して、盤面にかぶせない */
  #game .pickup { position: fixed; left: auto; bottom: auto; top: calc(max(6px, env(safe-area-inset-top)) + 58px); right: max(6px, env(safe-area-inset-right)); width: calc(var(--side, 160px) - 12px); max-width: none; transform: none; padding: 6px 8px; font-size: 13px; line-height: 1.45; animation-name: riseSide; }
  #game .pickup img { width: 22px; height: 22px; }
  @keyframes riseSide { from { transform: translateY(10px); opacity: .4; } }
}
.howto-list { list-style: none; padding-left: 0; }
.howto-list li { position: relative; padding-left: 1em; }
.howto-list li::before { content: "・"; position: absolute; left: 0; }
.close { position: static; display: block; margin: 0 0 10px auto; width: auto; min-height: 44px; padding: 8px; border: 0; border-radius: 0; background: #000; color: #fff; font: 400 18px/1.5 var(--dot); box-shadow: none; }
.modal-card h2 { padding-right: 0; }

.dialogue-scene { --dialogue-height: 242px; }
.dialogue-box, .narration .dialogue-box, .finale .dialogue-box {
  top: auto; bottom: 24px; left: 5%; width: 90%; height: var(--dialogue-height);
  min-height: 0; max-height: none; padding: 14px 16px; display: flex; z-index: 2;
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  overflow: hidden; font-size: 17px; text-align: left; animation: none;
}
.dialogue-name { display: block; margin: 0 0 8px; padding: 0; color: #fff; background: none; border-radius: 0; box-shadow: none; transform: none; font: inherit; }
.dialogue-text, .narration .dialogue-text, .finale .dialogue-text { font-size: inherit; line-height: 1.8; font-weight: 400; max-height: calc(100% - 52px); overflow-y: auto; }
.narration .dialogue-text { max-height: calc(100% - 24px); }
.dialogue-hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 16px; animation: blink 1s steps(2) infinite; }
.dialogue-actor { opacity: 1; bottom: calc(var(--dialogue-height) + 24px); height: calc(100% - var(--dialogue-height) - 140px); max-height: 46%; filter: none; z-index: 1; }

/* コマンドは色つきボタンに戻さず、一行だけの選択表示を保つ。 */
:is(.menu-card, .result-card, .story-card) .btn {
  background: #000; color: #fff; border: 0; border-radius: 0; box-shadow: none;
  font: 400 19px/1.6 var(--dot); padding: 11px 6px 11px 30px; min-height: 48px;
}
:is(.menu-card, .result-card, .story-card) .btn:active { background: #000; box-shadow: none; }

/* ひと休みの行は、共通ボタンの色・丸みより優先する。 */
#menu .menu-card .btn {
  background: none; color: #fff; border: 0; border-radius: 0; box-shadow: none;
  font: 400 19px/1.6 var(--dot); text-align: left; transform: none;
}
#menu .menu-card .btn:active { background: none; box-shadow: none; transform: none; }
#menu .menu-card .btn:focus-visible { outline: none; }
#menu .menu-card .btn .ui-icon { display: none; }

@media (orientation: landscape) and (max-height: 560px) {
  .hud { gap: 4px; }
  .plate { grid-template-columns: 20px minmax(0,1fr); column-gap: 4px; }
  .plate img.face { width: 20px; }
  .plate .nm { font-size: 11px; }
  .plate .icons { font-size: 10px; line-height: 14px; }
  .board-wrap { padding-top: 54px; }
  .dialogue-scene { --dialogue-height: 166px; }
  .dialogue-text { line-height: 1.6; }
  .dialogue-box, .narration .dialogue-box, .finale .dialogue-box { font-size: 16px; }
  .dialogue-actor { width: 24%; left: 50%; height: calc(100% - var(--dialogue-height) - 56px); max-height: none; }
  .dialogue-place { top: 66px; text-align: left; width: auto; }
  .tutorial-game .tutorial-step { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { .dialogue-hint { animation: none; } }

/* 横向き：上の状態窓を1行にちぢめて、盤面を大きく */
@media (orientation: landscape) and (max-height: 560px) {
  .hud { padding: 3px 8px 0; gap: 4px; }
  .plate { min-height: 0; padding: 3px 8px; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; }
  .plate img.face { width: 20px; grid-row: 1; }
  .plate .top { grid-column: 2; }
  .plate .icons { grid-column: 3; grid-row: 1; font-size: 11px; line-height: 14px; }
  .plate .nm { font-size: 11px; line-height: 1.3; }
  .plate .wins { display: none; }
  .board-wrap { padding-top: 22px; }
}

/* タイトルの6枚（①入口 ②なまえ ③だれと ④ひとりで ⑤みんなで ⑥さそわれた）。色と形は上の島のボタン・札をそのまま使う。 */
.home-step { display: none; flex-direction: column; gap: 14px; }
.home-inner[data-step="title"] #stepTitleScreen, .home-inner[data-step="terms"] #stepTerms,
.home-inner[data-step="gate"] #stepGate, .home-inner[data-step="name"] #stepName, .home-inner[data-step="main"] #stepMain,
.home-inner[data-step="solo"] #stepSolo, .home-inner[data-step="multi"] #stepMulti, .home-inner[data-step="invite"] #stepInvite { display: flex; }
.step-head { display: none; flex-direction: column; align-items: flex-start; gap: 12px; }
.home-inner:is([data-step="name"], [data-step="solo"], [data-step="multi"]) .step-head { display: flex; }
.home-inner:is([data-step="name"], [data-step="solo"], [data-step="multi"]) .logo { display: none; }
.home-inner:is([data-step="name"], [data-step="solo"], [data-step="multi"]) { padding-top: 58px; }
.step-head h1 { margin: 0; padding: 6px 20px; border-radius: 999px; background: #FFF9E8e8; color: var(--ink); font-size: 22px; line-height: 1.5; }
.step-ask { margin: 4px 0 -2px; text-align: center; font-size: 18px; color: var(--ink); }
.step-ask b { font-family: var(--display); font-weight: 400; letter-spacing: 4px; }
#stepGate .step-ask, #stepMain .step-ask { align-self: center; padding: 5px 18px; border-radius: 999px; background: #FFF9E8e8; }
.btn small { display: block; font-size: 12px; font-weight: 700; line-height: 1.4; opacity: .85; letter-spacing: 0; }
.btn.app-button > span:not(.app-icon) { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.who-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.who-choices .btn { padding: 22px 8px; }
.home-me { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 18px; border-radius: 999px; background: #FFF9E8; color: var(--ink); font-size: 14px; }
.home-me b { font-size: 17px; margin-left: 4px; }
.home-step > .tutorial-later { align-self: center; margin-top: 0; }
.solo-choices.first #btnTutorial { order: -1; }
#inviteSlot .step-ask { margin: 0; }

/* 横向き（2026-10-18）：盤面を横幅いっぱいに。左の列＝状態窓とスティック、右の列＝時間・音とポンボタン。
   盤面が高さに入りきらない分は client.js の moveCam が自分のキャラを追って上下にずらす。 */
@media (orientation: landscape) and (max-height: 560px) {
  #game.active { --side: clamp(150px, 19vw, 200px); grid-template-columns: var(--side) minmax(0, 1fr) var(--side); grid-template-rows: minmax(0, 1fr); }
  .hud { grid-column: 1; grid-row: 1; align-self: start; grid-template-columns: 1fr; gap: 3px; padding: 40px 0 0 max(6px, env(safe-area-inset-left)); z-index: 1; }
  .board-wrap { grid-column: 2; grid-row: 1; padding: 4px 0 0; }
  .pad { grid-column: 1; grid-row: 1; align-self: end; height: 170px; margin: 0 0 max(6px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); }
  .buttons { grid-column: 3; grid-row: 1; align-self: end; height: 170px; margin: 0 max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) 0; }
  .plate { grid-template-columns: 20px minmax(0, 1fr); row-gap: 0; padding: 3px 8px; }
  .plate .icons { grid-column: 2; grid-row: 2; }
  .bomb-btn { width: min(34vh, 132px); height: min(34vh, 132px); }
  .timer { position: fixed; top: max(6px, env(safe-area-inset-top)); left: auto; right: calc(max(6px, env(safe-area-inset-right)) + 44px); transform: none; }
  .mute { position: fixed; top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); }
  .menu-btn { position: fixed; top: max(6px, env(safe-area-inset-top)); left: max(6px, env(safe-area-inset-left)); }
  .view-btn { position: fixed; top: max(6px, env(safe-area-inset-top)); left: calc(max(6px, env(safe-area-inset-left)) + 44px); }
  #game.tutorial-game.active { grid-template-rows: auto minmax(0, 1fr); }
  .tutorial-game .tutorial-step { grid-column: 2; grid-row: 1; }
  #game.tutorial-game .hud { grid-row: 1 / 3; }
  #game.tutorial-game .board-wrap { grid-row: 2; }
  #game.tutorial-game .pad, #game.tutorial-game .buttons { grid-row: 1 / 3; }
}

/* 縦向き（2026-10-18）：状態窓を1行にちぢめ、操作の場所を少しせまくして、盤面を横幅いっぱいに出す高さを空ける */
@media (orientation: portrait) {
  .hud { gap: 4px; padding: 6px 6px 0; }
  .plate { min-height: 0; padding: 3px 8px; grid-template-columns: 22px minmax(0, 1fr); column-gap: 6px; row-gap: 0; align-items: center; }
  .plate img.face { width: 22px; grid-row: 1 / 3; }
  .plate .top, .plate .icons { grid-column: 2; }
  .plate .icons { font-size: 11px; line-height: 15px; }
  .plate .nm { font-size: 12px; line-height: 1.35; }
  .controls { height: 172px; min-height: 0; max-height: none; padding-top: 4px; }
  .pad-base { width: 124px; height: 124px; margin: -62px 0 0 -62px; }
  .bomb-btn { width: min(34vw, 136px); height: min(34vw, 136px); }
}

/* 押している向きの矢印を光らせる */
.pad .arw { transition: opacity .08s, transform .08s; }
.pad .arw.on { opacity: 1; transform: scale(1.45); }
.pad .arw.u.on { border-bottom-color: #F29A2E; }
.pad .arw.d.on { border-top-color: #F29A2E; }
.pad .arw.l.on { border-right-color: #F29A2E; }
.pad .arw.r.on { border-left-color: #F29A2E; }

/* レトロな十字キーと、位置が変わらない4つの丸ボタン。四隅は入力しない。 */
#game .controls { padding-left: 8px; padding-right: 8px; gap: 8px; }
#game .pad { min-width: 132px; max-width: none; }
#game .pad-base {
  --pad-size: clamp(132px, 37vw, 150px);
  width: var(--pad-size); height: var(--pad-size); margin: 0;
  transform: translate(-50%, -50%); border: 0; border-radius: 50%;
  background: #d8d9d4; box-shadow: inset 0 2px 4px #777a7640, 0 2px 0 #faf9eb;
}
.pad-hit { position: absolute; inset: calc(-1 * var(--pad-slop)); pointer-events: auto; touch-action: none; }
/* 名前や持ち物は表示専用。十字キーと重なっても入力を遮らない。 */
.hud { pointer-events: none; }
.pad-cross { position: absolute; inset: 0; background: linear-gradient(135deg, #535752, #292d2b);
  clip-path: polygon(33.333% 0, 66.667% 0, 66.667% 33.333%, 100% 33.333%, 100% 66.667%, 66.667% 66.667%, 66.667% 100%, 33.333% 100%, 33.333% 66.667%, 0 66.667%, 0 33.333%, 33.333% 33.333%);
}
.pad-cross::after { content: ""; position: absolute; inset: 3px; background: linear-gradient(145deg, #666b65, #3d423e); clip-path: inherit; }
.pad-center { position: absolute; left: 41%; top: 41%; width: 18%; height: 18%; border-radius: 50%; background: #373c38; box-shadow: inset 0 2px 4px #1118, 0 1px 0 #74786f; }
#game .pad .arw { opacity: .8; filter: drop-shadow(0 1px 0 #888); transition: filter .05s; }
#game .pad .arw.u { top: 11%; border-bottom-color: #252b25; }
#game .pad .arw.d { bottom: 11%; border-top-color: #252b25; }
#game .pad .arw.l { left: 11%; border-right-color: #252b25; }
#game .pad .arw.r { right: 11%; border-left-color: #252b25; }
#game .pad .arw.on { opacity: 1; transform: none; filter: drop-shadow(0 0 4px #ffd85c); }
#game .pad .arw.u.on { border-bottom-color: #ffd85c; }
#game .pad .arw.d.on { border-top-color: #ffd85c; }
#game .pad .arw.l.on { border-right-color: #ffd85c; }
#game .pad .arw.r.on { border-left-color: #ffd85c; }
#game .buttons {
  --key: clamp(40px, 12vw, 50px);
  width: calc(var(--key) * 3.6); height: calc(var(--key) * 3.1);
  flex: 0 0 auto; align-self: center; margin: 0; display: block;
  border-radius: 48%; background: #c4c7c180;
}
#game .buttons button {
  position: absolute; width: var(--key); height: var(--key); border-radius: 50%;
  border: 2px solid #f4f4e9; padding: 0; color: #fff; opacity: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--key-color); box-shadow: inset 0 2px 3px #ffffff65, 0 4px 0 var(--key-shadow), 0 5px 2px #3334;
  animation: none; touch-action: none; text-shadow: 0 1px 1px #0006;
}
#game .buttons .ui-icon { width: 22px; height: 22px; stroke: currentColor; }
#game .buttons b { font: 700 10px/1.2 var(--dot); margin: 1px 0 0; white-space: nowrap; }
#game #btnRemote { --key-color: #487cc7; --key-shadow: #2b4e88; left: calc(var(--key) * 1.05); top: 0; }
#game #btnLine { --key-color: #d4ad2f; --key-shadow: #927519; left: 0; top: calc(var(--key) * 1.05); color: #3e3214; text-shadow: none; }
#game #btnAct { --key-color: #4b9d68; --key-shadow: #2b6845; left: calc(var(--key) * 1.05); top: calc(var(--key) * 2.1); }
#game #btnBomb { --key-color: #db6657; --key-shadow: #9e403c; width: calc(var(--key) * 1.5); height: calc(var(--key) * 1.5); left: auto; right: 0; top: calc(var(--key) * .8); }
#game #btnBomb img { width: 56%; margin: -3% 0 0; }
#game #btnBomb b { font-size: 12px; }
#game .buttons button:disabled { background: #b4b8b3; color: #535c54; box-shadow: inset 0 2px 3px #ffffff65, 0 4px 0 #8c918c, 0 5px 2px #3334; text-shadow: none; filter: none; cursor: default; }
#game .buttons button:disabled img { filter: grayscale(1); opacity: .5; }
#game .buttons button:disabled .ui-icon { opacity: .6; }
#game .buttons button:not(:disabled):active, #game .buttons button.down { transform: translateY(3px); box-shadow: inset 0 2px 3px #0002, 0 1px 0 var(--key-shadow); }
#game .buttons button:disabled:active { transform: none; }
/* キーの案内はマウス・トラックパッドのあるPCだけ。スマホは縦横とも出さない。 */
.keyboard-hint { display: none; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  #game .keyboard-hint {
    display: grid; place-items: center; position: absolute; z-index: 1;
    font: 700 15px/1 monospace; color: #fff7d7; text-shadow: 0 1px 2px #0008;
  }
  #game .pad .arw { visibility: hidden; }
  #game .pad-key { width: 28%; height: 28%; transform: translate(-50%, -50%); }
  #game .pad-key.u { left: 50%; top: 16.667%; }
  #game .pad-key.r { left: 83.333%; top: 50%; }
  #game .pad-key.d { left: 50%; top: 83.333%; }
  #game .pad-key.l { left: 16.667%; top: 50%; }
  #game .buttons .keyboard-hint {
    top: -6px; right: -5px; width: 22px; height: 22px;
    border: 1px solid #f4f4e9; border-radius: 5px;
    background: #303831; box-shadow: 0 2px 0 #172219; text-shadow: none;
  }
}
@media (orientation: landscape) and (max-height: 560px) {
  #game .buttons { --key: clamp(38px, 4.7vw, 46px); align-self: end; justify-self: center; margin-bottom: max(10px, env(safe-area-inset-bottom)); }
  #game .pad { min-width: 0; }
  #game .pad-base { --pad-size: clamp(126px, 17vw, 146px); }
}

/* プレイヤーの窓は、名前・数値・持ち物8枠の3段を最初から確保する。
   長い名前、取得、乗り物、病気、外野ポンへの切り替えでも盤面を動かさない。 */
#game { --plate-height: 52px; }
#game .hud { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: var(--plate-height); gap: 4px; padding: 6px 6px 0; flex: none; }
#game .hud-side { display: contents; }
#game .plate {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 16px 14px 14px;
  height: var(--plate-height); min-height: 0; padding: 2px 4px; border-width: 2px;
  gap: 0; align-items: center;
}
#game .plate::before { display: none; }
#game .plate .top { grid-column: 1; grid-row: 1; min-width: 0; gap: 4px; align-items: center; }
#game .plate img.face { position: static; width: 16px; height: 16px; object-fit: contain; flex: none; }
#game .plate .nm { flex: 1; font-size: 12px; line-height: 16px; }
#game .plate .disease-tag {
  flex: 0 0 44px; width: 44px; height: 14px; padding: 0 2px; box-sizing: border-box;
  font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; white-space: nowrap;
  border-radius: 3px; color: #fff7ff; background: #673b82;
}
#game .plate .disease-tag:empty { visibility: hidden; }
#game .plate.afflicted { box-shadow: inset 0 0 0 1px #a178ba; }
#game .plate .wins { display: block; font-size: 10px; line-height: 16px; letter-spacing: 0; }
#game .plate .stats { grid-column: 1; grid-row: 2; display: flex; gap: 4px; height: 14px; }
#game .plate .stat { display: flex; align-items: center; gap: 2px; flex: 1; font-size: 11px; line-height: 14px; white-space: nowrap; }
#game .plate .stat > span { min-width: 2ch; }
#game .plate .stat :is(img, svg) { width: 14px; height: 14px; flex: none; }
#game .plate .icons { grid-column: 1; grid-row: 3; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1px; height: 14px; line-height: 14px; }
#game .plate .item-slot { display: flex; align-items: center; min-width: 0; height: 14px; }
#game .plate .icons img { display: block; width: 14px; height: 14px; object-fit: contain; }
#game .plate .hud-status { font-size: 11px; line-height: 14px; white-space: nowrap; }
#game .plate.dead::after { left: 4px; top: 0; font-size: 19px; }
#game .pickup.disease { border-color: #c9a0e5; animation-name: diseaseIn; }
@keyframes diseaseIn { from { opacity: .4; } }
.pickup.disease > span { display: grid; gap: 2px; min-width: 0; }
.pickup.disease strong { color: #f1ccff; font-size: 14px; line-height: 1.3; }
.pickup.disease > span > span { font-size: 12px; line-height: 1.35; }

@media (orientation: landscape) {
  /* 両端の上に各2人、下に操作部。メニューと時計は中央の盤面の上へ。 */
  #game.active { --side: clamp(160px, 21vw, 200px); display: grid; grid-template-columns: var(--side) minmax(0, 1fr) var(--side); grid-template-rows: minmax(0, 1fr); }
  #game { --land-pad: clamp(90px, calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), clamp(126px, 17vw, 146px)); }
  #game .hud { display: contents; }
  #game .hud-side { position: absolute; top: max(6px, env(safe-area-inset-top)); width: calc(var(--side) - 12px); display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: var(--plate-height); gap: 4px; z-index: 1; }
  #game .hud-left { left: max(6px, env(safe-area-inset-left)); }
  #game .hud-right { right: max(6px, env(safe-area-inset-right)); }
  #game .board-wrap { grid-column: 2; grid-row: 1; padding: 38px 0 0; }
  #game .controls { display: contents; }
  #game .pad { grid-column: 1; grid-row: 1; align-self: end; height: calc(var(--land-pad) + 24px); margin: 0 0 6px 4px; min-width: 0; }
  #game .pad-base { --pad-size: var(--land-pad); }
  #game .buttons { --key: clamp(38px, 4.7vw, 46px); grid-column: 3; grid-row: 1; align-self: end; justify-self: center; margin-bottom: 10px; }
  #game .menu-btn { position: fixed; top: max(6px, env(safe-area-inset-top)); left: calc(env(safe-area-inset-left) + var(--side) + 6px); }
  #game .view-btn { position: fixed; top: max(6px, env(safe-area-inset-top)); left: calc(env(safe-area-inset-left) + var(--side) + 50px); }
  #game .timer { position: fixed; top: max(6px, env(safe-area-inset-top)); left: auto; right: calc(env(safe-area-inset-right) + var(--side) + 50px); transform: none; height: 28px; min-width: 62px; padding: 4px 10px; line-height: 14px; }
  #game .mute { position: fixed; top: max(6px, env(safe-area-inset-top)); right: calc(env(safe-area-inset-right) + var(--side) + 6px); }
  #game.tutorial-game.active { grid-template-rows: auto minmax(0, 1fr); }
  #game.tutorial-game .tutorial-step { grid-column: 2; grid-row: 1; }
  #game.tutorial-game .board-wrap { grid-row: 2; }
  #game.tutorial-game .pad, #game.tutorial-game .buttons { grid-row: 1 / 3; }
  /* 右側もプレイヤー用に使うため、お知らせは既存の盤面内の端寄せに任せる。 */
  #game .pickup { position: absolute; left: 50%; right: auto; top: auto; bottom: 8px; width: max-content; max-width: 86%; transform: translateX(-50%); animation-name: rise; }
}

/* メニューと説明画面は、メインと同じクリーム色・茶色・丸いボタンに揃える。 */
.modal-card {
  background: var(--panel); color: var(--ink); border: 2px solid #D8C9A3; border-radius: 22px;
  font-family: var(--round); font-weight: 700; padding: 20px 18px;
  box-shadow: 0 6px 24px #5A46321A; max-height: calc(100dvh - 32px); overflow-y: auto;
}
.modal-card h2 { font-family: var(--round); font-weight: 800; }
.modal-card h3 { font-weight: 800; border-bottom-color: #D8C9A3; }
.modal-card :is(.howto-list, .item-list li, .note) { color: var(--ink); font-weight: 500; }
.modal-card :is(.howto-list b, .item-list li b) { font-weight: 800; }
.modal-card .lvb { background: #E6EDD0; color: var(--ink); border-color: #C3CBAA; font-family: var(--round); }
.modal-card .close {
  min-height: 44px; padding: 8px 14px; border: 2px solid #D8C9A3; border-radius: 999px;
  background: var(--panel); color: var(--ink); font: 700 14px/1.5 var(--round);
}
#menu .menu-card { gap: 12px; }
#menu .menu-card h2 { margin: 0 0 4px; }
#menu .menu-card .btn {
  --button-shadow: #D8C9A3; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--panel); color: var(--ink); border: 2px solid #D8C9A3; border-radius: 999px;
  box-shadow: 0 4px 0 var(--button-shadow); font: 700 17px/1.5 var(--round);
  min-height: 48px; padding: 12px 16px; text-align: center; transform: none;
}
#menu .menu-card .btn.yellow { --button-shadow: #D9A92E; background: var(--yellow); border-color: var(--yellow); }
#menu .menu-card .btn.big { font-size: 22px; font-weight: 800; }
#menu .menu-card .btn::before { content: none; }
#menu .menu-card .btn .ui-icon { display: inline-block; width: 20px; height: 20px; }
#menu .menu-card .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--button-shadow); }
#menu .menu-card .btn:focus-visible { outline: 3px solid #5AAE5E; outline-offset: 3px; }
#menu .menu-card .note { padding-left: 0; text-align: center; }

/* 2Dバトル内の図解：文字は短く、操作と結果を同じ絵でつなぐ。 */
.tutorial-rule { gap: 12px; cursor: pointer; }
.tutorial-rule input { flex: none; width: 24px; height: 24px; accent-color: #bf7630; }
.tutorial-rule span { font-size: 14px; line-height: 1.5; }
.tutorial-rule small { display: block; font-size: 12px; color: #806e54; }
.guide { position: fixed; z-index: 110; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(350px, calc(100% - 24px)); pointer-events: none; }
.guide.at-top { bottom: auto; top: max(12px, env(safe-area-inset-top)); }
.guide-card { position: relative; box-sizing: border-box; width: 100%; padding: 32px 14px 12px; border: 3px solid #b97b37; border-radius: 24px; color: #5a4632; background: #fff9e8; box-shadow: 0 8px 26px #42311f35; pointer-events: auto; max-height: calc(100dvh - 24px); overflow-y: auto; display: grid; grid-template-columns: 46% 1fr; column-gap: 10px; align-items: center; }
.guide-skip { position: absolute; top: 3px; right: 10px; background: transparent; border: 0; color: #766047; font: inherit; font-size: 11px; min-height: 30px; text-decoration: underline; cursor: pointer; }
.guide-label { display: none; }
.guide-art { grid-column: 1; grid-row: 1 / 3; min-width: 0; }
.guide-drawing { display: block; width: 100%; height: auto; overflow: visible; }
.guide h2 { grid-column: 2; font-size: 17px; line-height: 1.3; margin: 0; align-self: end; }
#guideText { grid-column: 2; font-size: 12px; font-weight: 700; line-height: 1.5; margin: 5px 0 0; align-self: start; }
.guide .btn { grid-column: 1 / -1; width: 100%; min-height: 40px; margin-top: 10px; padding: 7px 14px; font-size: 17px; }
.guide.blocking { inset: 0; transform: none; width: auto; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); background: #30231599; display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.guide.blocking .guide-card { max-width: 440px; padding: 38px 20px 18px; grid-template-columns: 1fr; text-align: center; row-gap: 8px; }
.guide.blocking .guide-art { grid-column: 1; grid-row: 2; width: 100%; }
.guide.blocking h2 { grid-column: 1; grid-row: 1; font-size: 23px; }
.guide.blocking #guideText { grid-column: 1; grid-row: 3; font-size: 16px; margin: 0; }
.guide.blocking .btn { grid-row: 4; min-height: 46px; margin-top: 4px; }
.guide-target { outline: 3px solid #e39b30 !important; outline-offset: 3px; }
#game .pickup.item-tip img { width: 44px; height: 44px; }
#game .pickup.item-tip { width: 340px; max-width: calc(100% - 24px); padding: 8px 12px; font-size: 14px; line-height: 1.45; }
#game .pickup.item-tip > span { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
#game .pickup.item-tip strong { font-size: 16px; line-height: 1.3; }
#game .plate .hud-item-help { appearance: none; padding: 0; border: 0; border-radius: 3px; background: transparent; color: inherit; font-family: inherit; font-weight: inherit; text-align: left; pointer-events: auto; cursor: pointer; }
#game .plate .hud-item-help:focus-visible { outline: 2px solid #147f95; outline-offset: -1px; }
#guideText { white-space: pre-line; }
@media (orientation: landscape) and (max-height: 500px) {
  .guide:not(.blocking) { width: min(300px, calc(100% - 24px)); }
  .guide.blocking .guide-card { max-width: 460px; padding: 27px 16px 10px; grid-template-columns: 58% 1fr; column-gap: 14px; row-gap: 4px; }
  .guide.blocking .guide-art { grid-column: 1; grid-row: 1 / 4; }
  .guide.blocking h2 { grid-column: 2; grid-row: 1; font-size: 18px; }
  .guide.blocking #guideText { grid-column: 2; grid-row: 2; font-size: 12px; }
  .guide.blocking .btn { grid-column: 2; grid-row: 3; min-height: 40px; }
}
body:has(#menu:not(.hidden), #howto:not(.hidden)) #guide:not(.blocking) { display: none; }

/* 街は盤面の外側だけ。通路・操作面の寸法を変えない。 */
#game { isolation: isolate; }
#stageSurroundings { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
#game .board-frame { border-color: #9b9a7d; border-radius: 8px; }
.story-hero-picker { border: 0; padding: 0; margin: 14px 0; }
.story-hero-picker legend { font-size: 14px; margin-bottom: 8px; font-weight: 700; }
.story-hero-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.story-hero-choice { display: flex; align-items: center; justify-content: center; gap: 4px; background: #fff8e7; color: #5a4632; border: 2px solid #d1b98e; border-radius: 14px; padding: 4px; cursor: pointer; font: inherit; }
.story-hero-choice[aria-pressed="true"] { background: #e7f1d3; border-color: #62926b; box-shadow: inset 0 0 0 1px #62926b; }
.story-hero-choice:focus-visible { outline: 3px solid #449daf; outline-offset: 2px; }
.story-hero-choice img { width: 58px; height: 82px; object-fit: contain; }
.story-hero-choice span { display: grid; text-align: left; }
.story-hero-choice small { font-size: 12px; margin-top: 4px; }

/* 対戦の前後・序章・終章も、読む物語と同じ左右の立ち絵で見せる。 */
#storyDialogue { color: #49362e; font-family: 'M PLUS Rounded 1c', sans-serif; }
#storyDialogue [hidden] { display: none !important; }
#storyDialogue .dialogue-scene { --dialogue-height: 232px; width: 100%; }
#storyDialogue .dialogue-place { top: 72px; left: 10%; width: 80%; padding: 7px 12px; border-radius: 22px; background: #fff9e8cf; font-size: 12px; }
#storyDialogue .dialogue-standing-actors { position: absolute; top: 116px; bottom: calc(var(--dialogue-height) + 40px); left: max(1%,calc((100% - 1050px)/2)); right: max(1%,calc((100% - 1050px)/2)); display: flex; justify-content: space-around; align-items: flex-end; }
#storyDialogue .dialogue-standing-actors figure { position: relative; width: 49%; height: 100%; margin: 0; display: flex; align-items: flex-end; justify-content: center; filter: saturate(.7) brightness(.9); transform: translateY(4px) scale(.97); transition: filter .18s, transform .18s; }
#storyDialogue .dialogue-standing-actors figure.is-speaking { filter: none; transform: none; z-index: 1; }
#storyDialogue .dialogue-standing-actors img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 8px #4f482120); }
#storyDialogue .dialogue-standing-actors figure[data-portrait="sumimaru"] img { height: 61%; }
#storyDialogue .dialogue-standing-actors figure[data-portrait="dongara"] img { width: 100%; height: 75%; }
#storyDialogue .dialogue-standing-actors figure[data-portrait^="mob-soldier-"] img { width: 85%; height: 85%; }
#storyDialogue .dialogue-standing-actors figcaption { position: absolute; bottom: 0; padding: 4px 10px; border-radius: 16px; font-size: 11px; text-align: center; background: #fff9e8dc; }
#storyDialogue .dialogue-standing-actors figure.is-speaking figcaption { background: #fff1bd; }
#storyDialogue .dialogue-box { top: auto; bottom: max(18px,env(safe-area-inset-bottom)); left: max(3%,calc((100% - 1000px)/2)); right: max(3%,calc((100% - 1000px)/2)); width: auto; height: var(--dialogue-height); min-height: 0; max-height: none; box-sizing: border-box; padding: 23px 22px 24px; border: 2px solid #a6845840; border-radius: 22px; background: #fffaf0f5; color: #49362e; box-shadow: 0 6px 0 #7d634322,0 12px 30px #78604320; font: 500 18px/1.8 'M PLUS Rounded 1c',sans-serif; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; animation: none; }
#storyDialogue .dialogue-name { flex: none; margin: 0 0 9px; color: #427d80; font-weight: 800; font-size: 16px; }
#storyDialogue .dialogue-text { flex: 1; min-height: 0; max-height: none; text-align: left; color: #49362e; font: inherit; overflow-y: auto; }
#storyDialogue .dialogue-hint { color: #8d795f; bottom: 4px; font-size: 14px; }
#storyDialogue .dialogue-box:focus-visible { outline: 3px solid #368c92; outline-offset: 3px; }
@media (max-width: 600px) {
  #storyDialogue .dialogue-scene { --dialogue-height: 236px; }
  #storyDialogue .dialogue-box { left: 12px; right: 12px; padding: 17px 16px 24px; font-size: 17px; }
  #storyDialogue .dialogue-standing-actors { left: 0; right: 0; }
  #storyDialogue .dialogue-standing-actors figure { width: 50%; }
}
@media (max-height: 650px) and (orientation: portrait) {
  #storyDialogue .dialogue-scene { --dialogue-height: 205px; }
  #storyDialogue .dialogue-standing-actors { top: 103px; bottom: calc(var(--dialogue-height) + 35px); }
  #storyDialogue .dialogue-place { top: 66px; padding: 4px 12px; }
  #storyDialogue .dialogue-box { bottom: 12px; font-size: 15px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  #storyDialogue .dialogue-place { display: none; }
  #storyDialogue .dialogue-standing-actors { top: 58px; bottom: 16px; left: 0; right: 0; justify-content: space-between; }
  #storyDialogue .dialogue-standing-actors figure { width: 27%; }
  #storyDialogue .dialogue-standing-actors figcaption { display: none; }
  #storyDialogue .dialogue-box { left: 26%; right: 26%; bottom: 14px; height: calc(100% - 85px); padding: 15px 14px 24px; font-size: 15px; line-height: 1.6; }
  #storyDialogue .dialogue-name { font-size: 13px; margin-bottom: 6px; }
  #storyDialogue .dialogue-exit { top: 8px; left: 12px; }
  #storyDialogue .dialogue-skip { top: 8px; right: 12px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #storyDialogue .dialogue-standing-actors figure { transition: none; }
}