/* =========================
   全体リセット・基本設定
========================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "YuGothic", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  background: #f5f5f7;
  color: #333;
}

/* =========================
   共通コンテナ
========================= */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;
}

h1 {
  text-align: center;
  margin: 16px 0;
}

/* =========================
   セットアップ画面
========================= */
#setup {
  min-height: 100vh;
  padding: 40px 20px 56px;
  background:
    radial-gradient(900px 500px at 12% 0%, #ffe6a7 0%, rgba(255,230,167,0) 55%),
    radial-gradient(900px 500px at 88% 8%, #cfe4ff 0%, rgba(207,228,255,0) 55%),
    linear-gradient(180deg, #fffdf6 0%, #f2f6ff 100%);
}

/* ---- 見出し ---- */
.setup-hero {
  max-width: 900px;
  margin: 0 auto 26px;
  text-align: center;
}

.setup-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

#setup h1 {
  margin: 0;
  font-size: 40px;
  letter-spacing: 0.03em;
  color: #23314d;
  text-shadow: 0 2px 0 #fff, 0 4px 10px rgba(35,49,77,0.12);
}

/* 名前の下の副題（何のゲームかを日本語で伝える） */
.setup-sub {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #33415c;
}

.setup-lead {
  margin: 14px 0 0;
  font-size: 15px;
  color: #55607a;
}

/* ---- タイトル横のサイコロ（ゆっくり回り続ける） ---- */
.setup-dice-scene {
  width: 58px;
  height: 58px;
  perspective: 340px;
  flex: 0 0 auto;
}

#setupDice {
  position: relative;
  width: 58px;
  height: 58px;
  transform-style: preserve-3d;
  animation: setup-dice-spin 9s linear infinite;
}

@keyframes setup-dice-spin {
  from { transform: rotateX(-18deg) rotateY(0deg); }
  to   { transform: rotateX(-18deg) rotateY(360deg); }
}

#setupDice .dice-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 7px;
  background: #fffdf8;
  border: 1px solid #ecdfc4;
  border-radius: 9px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.10);
}

#setupDice .face-1 { transform: translateZ(29px); }
#setupDice .face-6 { transform: rotateY(180deg) translateZ(29px); }
#setupDice .face-3 { transform: rotateY(90deg)  translateZ(29px); }
#setupDice .face-4 { transform: rotateY(-90deg) translateZ(29px); }
#setupDice .face-5 { transform: rotateX(90deg)  translateZ(29px); }
#setupDice .face-2 { transform: rotateX(-90deg) translateZ(29px); }

#setupDice .pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a3f47;
  align-self: center;
  justify-self: center;
}

#setupDice .face-1 .pip {
  width: 16px;
  height: 16px;
  background: #ff5a3c;
}

/* ---- 盤面と入力欄を横に並べる ---- */
.setup-main {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: center;
}

.board-preview {
  background: #fff;
  border: 3px solid #ffd977;
  border-radius: 20px;
  padding: 16px 18px 14px;
  box-shadow: 0 8px 22px rgba(35,49,77,0.10);
}

#setupRoad {
  width: 100%;
  height: auto;
  max-height: 420px;
  display: block;
}

.mini-road-edge {
  fill: none;
  stroke: #e8b93f;
  stroke-width: 36;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.35;
}

.mini-road {
  fill: none;
  stroke: #ffd977;
  stroke-width: 26;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 進むほど色が変わるゾーン。黄色い道を残したいので、上に細く重ねる */
.mini-road-zone {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  opacity: 0.9;
}

/* ゾーンの凡例 */
.board-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  margin: 10px 0 0;
  padding: 0;
}

.board-tags li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #55607a;
}

/* ★ li は display:inline-flex なので、hidden 属性だけでは消えない。
   （ブラウザ標準の [hidden]{display:none} より、上の指定のほうが強い） */
.board-tags li[hidden] {
  display: none;
}

.board-tags li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--tag);
}

/* ---- 入力欄 ---- */
.setup-box {
  background: #fff;
  border: 3px solid #a8cbff;
  border-radius: 20px;
  padding: 22px 24px 24px;
  box-shadow: 0 8px 22px rgba(35,49,77,0.10);
}

.setup-field {
  margin-bottom: 18px;
}

.setup-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: bold;
  color: #3f4a63;
}

#playerCount {
  padding: 10px 14px;
  font-size: 15px;
  border: 2px solid #d7e2f5;
  border-radius: 10px;
  background: #fff;
  color: #23314d;
}

/* ---- どこまで遊ぶか（通し / 学生編） ---- */
.mode-opts {
  display: grid;
  gap: 8px;
}

.mode-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 2px solid #d7e2f5;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.mode-opt input {
  margin: 2px 0 0;
  width: 17px;
  height: 17px;
  accent-color: #2f80ed;
  flex: none;
}

/* 選ばれている方をはっきりさせる（:has が効かないブラウザでも枠は出る） */
.mode-opt:has(input:checked) {
  border-color: #2f80ed;
  background: #f2f7ff;
}

.mode-opt:focus-within {
  outline: 2px solid #2f80ed;
  outline-offset: 2px;
}

.mode-body {
  display: block;
}

.mode-body b {
  display: block;
  font-size: 14px;
  color: #23314d;
}

.mode-body small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: #6b7590;
}

#playerNames {
  display: grid;
  gap: 10px;
}

#playerNames input {
  padding: 11px 13px;
  font-size: 14px;
  border-radius: 10px;
  border: 2px solid #d7e2f5;
  background: #fff;
}

#playerNames input:focus {
  outline: none;
  border-color: #2f80ed;
  box-shadow: 0 0 0 4px rgba(47,128,237,0.14);
}

/* 押したくなるボタン（ゆっくり脈打つ） */
#startBtn {
  width: 100%;
  margin-top: 4px;
  padding: 16px;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.06em;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff8a3d 0%, #ff5a3c 100%);
  box-shadow: 0 6px 0 #d9432c, 0 10px 20px rgba(255,90,60,0.28);
  animation: start-pulse 2.4s ease-in-out infinite;
}

@keyframes start-pulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

#startBtn:hover {
  background: linear-gradient(135deg, #ff7a26 0%, #f14a2c 100%);
}

#startBtn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #d9432c, 0 4px 10px rgba(255,90,60,0.28);
  animation: none;
}

/* 画面が狭いときは縦に積む */
@media (max-width: 860px) {
  .setup-main {
    grid-template-columns: 1fr;
  }
  #setup h1 {
    font-size: 30px;
  }
}

/* ★ スマホでは、名前が「スカラシップロー／ン」と1文字だけ折り返さない大きさにする */
@media (max-width: 600px) {
  #setup h1 {
    font-size: clamp(20px, 6.4vw, 30px);
  }
  .setup-title-row {
    gap: 10px;
  }
}

/* 動きを減らす設定の人には、アニメを止める */
@media (prefers-reduced-motion: reduce) {
  #setupDice,
  #startBtn {
    animation: none;
  }
}

/* =========================
   ボタン
========================= */
button {
  cursor: pointer;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  background: #007aff;
  color: #fff;
  transition: background 0.2s, transform 0.1s, box-shadow 0.1s;
}

button:hover {
  background: #005ad1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* =========================
   ゲーム画面
========================= */
.hidden {
  display: none !important;
}

#game {
  margin-top: 16px;
}

/* 上部バー */
.top-bar {
  display: flex;
  flex-direction: column;   /* ★縦に並べる */
  align-items: center;      /* ★中央寄せ */
  gap: 8px;
  margin-bottom: 12px;
}

#turnInfo {
  font-size: 22px;
  font-weight: bold;
  text-align: center;       /* ★テキストも中央 */
  padding: 6px 18px;
  border-radius: 999px;
  color: #fff;
  background: #23314d;
}

/* ★ 誰の番かを、その人の色で出す（コマ・カードと同じ色） */
#turnInfo.turn-pin-0 { background: #e74c3c; }
#turnInfo.turn-pin-1 { background: #3498db; }
#turnInfo.turn-pin-2 { background: #2ecc71; }
#turnInfo.turn-pin-3 { background: #c8a200; }

/* 番が変わったときに大きく出す「次は〇〇の番」 */
.turn-toast {
  position: fixed;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.92);
  z-index: 1500;
  background: #23314d;
  color: #fff;
  padding: 16px 28px;
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: calc(100vw - 32px);
}
.turn-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.turn-toast.pin-0 { background: #e74c3c; }
.turn-toast.pin-1 { background: #3498db; }
.turn-toast.pin-2 { background: #2ecc71; }
.turn-toast.pin-3 { background: #c8a200; }
.turn-toast-main { font-size: 26px; font-weight: 800; }
.turn-toast-wait { font-size: 15px; opacity: 0.95; margin: 2px 0; }
@media (max-width: 600px) {
  .turn-toast { padding: 12px 18px; width: max-content; }
  .turn-toast-main { font-size: 19px; }
  .turn-toast-wait { font-size: 13px; }
}

/* =========================
   メインレイアウト
========================= */
.main-area {
  display: grid;
  /* ★ minmax(0, …) にしておく。1fr だけだと、中の長い1行（プレイヤーカードの「最後の出来事」）に
       合わせて列が広がり、スマホでは画面ごと横に広がって盤面が小さく縮んでいた */
  grid-template-columns: minmax(0, 3fr) minmax(0, 1.4fr);
  gap: 16px;
  align-items: flex-start;
}

/* =========================
   盤面
========================= */
#board {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  aspect-ratio: 1000 / 900;
}

/* 道（SVG） */
.road-svg {
  position: absolute;
  left: 16px;
  top: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  pointer-events: none;
}
.road-path-edge {
  fill: none;
  stroke: #e0b34c;
  stroke-width: 30;
  stroke-linecap: round;
}
.road-path {
  fill: none;
  stroke: #ffd873;
  stroke-width: 24;
  stroke-linecap: round;
}

/* マス（丸型） */
.tile {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: clamp(20px, 3.6vw, 34px);
  height: clamp(20px, 3.6vw, 34px);
  border-radius: 50%;
  background: #f0f4ff;
  border: 1px solid #d0d7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(8px, 1.4vw, 11px);
  font-weight: 700;
  color: #5a6273;
}

/* 高校ゾーン */
.tile.highschool {
  background: #fff7e6;
  border-color: #ffcf66;
}

/* 大学・専門ゾーン */
.tile.univ-zone {
  background: #eafaf1;
  border-color: #7ed9a8;
}

/* 必ず止まるマス */
.tile.must-stop {
  box-shadow: 0 0 0 2px rgba(255,99,71,0.4);
}

/* 現在地 */
.tile.active {
  outline: 2px solid #ff6b6b;
  outline-offset: 1px;
}

/* マス内番号 */
.tile-num {
  pointer-events: none;
}

/* 着地時の説明ふきだし */
.tile-callout {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  max-width: 42vw;
  background: #2b2d33;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: 10px;
  transform: translate(-50%, calc(-100% - 14px));
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: normal;
}
.tile-callout::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: inherit;
  transform: rotate(45deg);
}
.tile-callout.show {
  opacity: 1;
}
.tile-callout.below {
  transform: translate(-50%, 14px);
}
.tile-callout.below::after {
  top: -6px;
  bottom: auto;
}

/* =========================
   ピン（プレイヤー表示）
========================= */
.pin {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -10px;
  margin-top: -10px;
  font-size: 12px;                  /* 絵文字自体は少し小さく */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: rgba(255,255,255,0.9);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
  transition: transform 0.2s;
}

/* ★ プレイヤーごとのはっきりした色分け */
.player-pin-0 {
  border-color: #ff4b4b;
  background-color: rgba(255, 75, 75, 0.15);
}

.player-pin-1 {
  border-color: #4b8bff;
  background-color: rgba(75, 139, 255, 0.15);
}

.player-pin-2 {
  border-color: #2ecc71;
  background-color: rgba(46, 204, 113, 0.15);
}

.player-pin-3 {
  border-color: #f1c40f;
  background-color: rgba(241, 196, 15, 0.15);
}

/* 今のターンのプレイヤー */
.current-pin {
  transform: scale(1.3);
  z-index: 2;
}

/* 移動中のピン（ぴょんぴょん） */
.moving-pin {
  animation: pin-bounce 0.4s infinite ease-in-out;
}

/* 止まっているけど強調（アクティブマス） */
.tile.active .pin {
  animation: pin-idle 1.2s infinite ease-in-out;
}

/* ピンアニメーション */
@keyframes pin-bounce {
  0%   { transform: translateY(0) scale(1.3); }
  50%  { transform: translateY(-8px) scale(1.35); }
  100% { transform: translateY(0) scale(1.3); }
}

@keyframes pin-idle {
  0%   { transform: translateY(0) scale(1.15); }
  50%  { transform: translateY(-3px) scale(1.18); }
  100% { transform: translateY(0) scale(1.15); }
}

/* =========================
   サイドパネル（プレイヤー情報・ログ）
========================= */
.side-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#players {
  display: grid;
  gap: 8px;
}

/* 人数別レイアウト
   2〜3人は1列にして横幅を使い切る（金額が折り返さない）
   4人だけ2列にする */
.players-2,
.players-3 {
  grid-template-columns: 1fr;
}

.players-4 {
  grid-template-columns: repeat(2, 1fr);
}

/* プレイヤーカードの見た目は、下の「プレイヤーカード（右パネル）」でまとめて定義 */

/* ログ */
.log-panel {
  background: #fff;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
  padding: 10px 12px;
  max-height: 340px;
  overflow-y: auto;
  font-size: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.log-panel h2 {
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eef0f4;
  font-size: 13px;
  color: #5b616b;
  position: sticky;
  top: -10px;
  background: #fff;
}

#log {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* =========================
   イベントオーバーレイ
========================= */
#overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.overlay-content {
  background: #fff;
  max-width: 480px;
  width: 90%;
  padding: 16px 18px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  /* ★ 画面より長いお知らせ（家計チェック・住宅ローンの審査など）は、枠の中でスクロールする。
       高さの上限がないと、スマホでは枠の上下が画面の外に出て「次へ」のボタンが押せなくなっていた */
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#eventTitle {
  font-size: 18px;
  margin-bottom: 8px;
}

#eventText {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
  white-space: pre-wrap;
}

#choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ★ 選択肢は、生徒がゲーム中ずっと押すボタン。
   タブレット（GIGA端末）で指で押すことを考えて、高さを44px以上にする。
   もとは37pxで、指の当たりが小さすぎた。 */
#choices button {
  min-height: 44px;
  padding: 10px 18px;
  line-height: 1.4;
  text-align: center;
}

/* ★ CPUが選んだボタン（押される前に少し光らせる） */
#choices button.cpu-pick {
  outline: 3px solid #f2c46b;
  outline-offset: 2px;
}

/* 開始画面の「CPUを入れて4人にする」 */
.cpu-fill {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  color: #33415c;
}

/* ★ 絵のついた選択肢（家・結婚式・車の 小・中・大）。
   絵を左、文字を右に並べる。 */
#choices button.has-icon {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
#choices .choice-icon {
  flex: none;
  width: 56px;
  height: 35px;
}
#choices .choice-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* =========================
   レスポンシブ
========================= */
@media (max-width: 900px) {
  .main-area {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ★ 中身の長さで枠が広がらないようにする（省略表示の「…」が効くように） */
.side-panel,
#players > * {
  min-width: 0;
}

/* ★ iPadを横にしたくらいの幅では、右の欄がせまく、4人を2列にすると名前や「0マス」が折り返す。1列にする */
@media (min-width: 901px) and (max-width: 1200px) {
  .players-4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .container {
    padding: 16px;
  }
  #turnInfo {
    font-size: 18px;
  }

  /* ★ スマホでは4人でも1列にする */
  .players-4 {
    grid-template-columns: 1fr;
  }
}

/* 下側サイコロボタンのバー */
.bottom-bar {
  margin-top: 12px;
  text-align: center;
}

.bottom-bar button {
  min-width: 160px;
}

/* =====================
   オーバーレイ演出
===================== */
#overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

#overlay:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

.overlay-content {
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  transition: 
    transform 0.35s ease,
    opacity 0.35s ease;
}

#overlay:not(.hidden) .overlay-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ===== 親の支援ルーレット ===== */

.roulette-wrapper {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 20px auto;
}

#rouletteWheel {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 4px solid #333;
  margin: 0 auto;
  position: relative;
  transition: transform 3s cubic-bezier(0.25, 0.8, 0.25, 1);
  background: #fafafa;

  /* ★ここを追加：はみ出した四角形を丸の中に切り落とす */
  overflow: hidden;
}

.roulette-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 14px;

  /* ★横書きに戻す */
  writing-mode: horizontal-tb;
  letter-spacing: 1px;

  /* 見やすさ調整 */
  padding: 6px 10px;
  border-radius: 8px;
  color: #fff;
  white-space: nowrap;
}

/* 円の中の4方向にラベル配置（上・右・下・左） */
.label-full {
  top: 15%;
  left: 50%;
  background: #4caf50;
}

.label-half {
  top: 50%;
  left: 85%;
  background: #2196f3;
}

.label-third {
  top: 85%;
  left: 50%;
  background: #ff9800;
}

.label-none {
  top: 50%;
  left: 15%;
  background: #f44336;
}

.roulette-arrow {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
}

/* ===== ルーレット背景（4等分） ===== */

.roulette-bg {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
  transform-origin: 0% 0%;
}

/* 上 */
.bg-full {
  background: #4caf50;
  transform: rotate(0deg) translate(-100%, -100%);
}

/* 右 */
.bg-half {
  background: #2196f3;
  transform: rotate(90deg) translate(-100%, -100%);
}

/* 下 */
.bg-third {
  background: #ff9800;
  transform: rotate(180deg) translate(-100%, -100%);
}

/* 左 */
.bg-none {
  background: #f44336;
  transform: rotate(270deg) translate(-100%, -100%);
}

/* ===== 親が全額出してくれたときのレア演出 ===== */

.roulette-full-highlight {
  animation: full-glow 0.8s ease-in-out alternate infinite;
}

@keyframes full-glow {
  from {
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.4), 0 0 0 0 rgba(76, 175, 80, 0.2);
    border-color: #4caf50;
  }
  to {
    box-shadow: 0 0 25px rgba(76, 175, 80, 0.9), 0 0 15px 8px rgba(76, 175, 80, 0.4);
    border-color: #a5d6a7;
  }
}

/* ===== プレイヤーカラー強調バッジ ===== */


.player-card.current .player-color-badge{
  transform:scale(1.2);
  box-shadow:
    0 0 0 2px #fff,
    0 0 12px rgba(0,122,255,.6);
}

/* ===== プレイヤー欄に盤面と同じピンを表示する（インライン用） ===== */
.pin.mini-pin{
  position: static;     /* 盤面のabsoluteを無効化 */
  transform: none;      /* 盤面用のtransformがあれば無効化 */
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;

  /* サイズは好みで調整 */
  width: 18px;
  height: 18px;
}

/* プレイヤー欄用：盤面と同じピンをインライン表示にする */
.pin.mini-pin{
  position: static;   /* ← absolute を無効化 */
  right: auto;
  bottom: auto;

  display: inline-flex;
  vertical-align: middle;
  margin-right: 8px;

  width: 26px;   /* 盤面と同じサイズにするなら 26px */
  height: 26px;
  font-size: 16px; /* 📍のサイズも同じ */
}

/* =========================
   プレイヤーカード（右パネル）
========================= */
.player-card {
  background: #fff;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* 手番の人をはっきり分かるようにする */
.player-card.current {
  border: 2px solid #007aff;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.12), 0 2px 8px rgba(0,0,0,0.10);
}

/* ★ 手番の人のカードの枠を、ゆっくり光らせる */
@media (prefers-reduced-motion: no-preference) {
  .player-card.current { animation: currentPulse 1.6s ease-in-out infinite; }
}
@keyframes currentPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0,122,255,0.12), 0 2px 8px rgba(0,0,0,0.10); }
  50% { box-shadow: 0 0 0 7px rgba(0,122,255,0.28), 0 2px 8px rgba(0,0,0,0.10); }
}

.player-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef0f4;
  margin-bottom: 8px;
}

.player-name {
  font-size: 14px;
}

/* 今いるマス番号は控えめに右へ */
.player-age {
  font-size: 11px;
  font-weight: 700;
  color: #ffd66b;
  background: rgba(255, 214, 107, 0.12);
  border: 1px solid rgba(255, 214, 107, 0.35);
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.5;
  white-space: nowrap;
}

.player-tile {
  margin-left: auto;
  font-size: 11px;
  color: #8a8f98;
}

/* メンタルが減ってくると色で知らせる（休職のリスクが上がる） */
.meta-item.mental.warn { color: #d99a4f; font-weight: 700; }
.meta-item.mental.danger { color: #e05a5a; font-weight: 700; }

/* つみたてNISAの残高（プレイヤーカードの下段） */
.meta-item.nisa {
  color: #4fb477;
  font-weight: 700;
}

/* 金額の下に添える小さな注記（毎年の返済額など） */
.figure-sub {
  font-size: 10px;
  color: #d98b8b;
  line-height: 1.4;
  min-height: 14px;
}

/* ★ お金と奨学金は、1行ずつ「左にラベル・右に数字」で出す。
   もとは横に2つ並べていたが、プレイヤー欄の幅では数字の枠が84pxしか
   取れず、「3,000,…」のように桁が切れていた。縦に積めば数字に
   120px以上まわせるので、1億を超えても最後まで読める。 */
.player-figures {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
}

.figure {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.figure-label {
  font-size: 10px;
  color: #8a8f98;
  white-space: nowrap;
  flex: 0 0 auto;
}

.figure-value {
  font-size: 17px;
  font-weight: bold;
  line-height: 1.2;
  white-space: nowrap;
  text-align: right;
  min-width: 0;
  flex: 1 1 auto;
}

.figure-value small {
  font-size: 11px;
  font-weight: normal;
  margin-left: 1px;
}

.figure-value.minus { color: #d63031; }
.figure-value.zero  { color: #b0b5bd; }

/* 仕事・メンタル・休職は小さくまとめる */
.player-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 8px;
  font-size: 12px;
}

.meta-item {
  white-space: nowrap;
}

.meta-label {
  color: #8a8f98;
  font-size: 10px;
  margin-right: 3px;
}

.meta-item.rest {
  color: #d63031;
}

/* 直前の出来事は1行だけ。折り返さず、長ければ末尾を … にする */
.player-latest {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e8eaee;
  font-size: 11px;
  color: #5b616b;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 16px;
}

/* =========================
   ログ（右パネルの下）
========================= */
.log-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid #f1f3f6;
  font-size: 12px;
  line-height: 1.5;
}

.log-row:last-child {
  border-bottom: none;
}

/* 誰の出来事かを、コマと同じ色のタグで示す */
.log-who {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.log-who.player-pin-0 { background: #e74c3c; }
.log-who.player-pin-1 { background: #3498db; }
.log-who.player-pin-2 { background: #2ecc71; }
.log-who.player-pin-3 { background: #c8a200; }

.log-what {
  flex: 1 1 auto;
  min-width: 0;
  color: #3a3f47;
  word-break: break-word;
}

.log-system {
  color: #8a8f98;
}

/* =========================
   結果発表画面（全員ゴール後）
========================= */
#result,
#midReport {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
  overflow-y: auto;
}

.result-content {
  background: #fff;
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px 22px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

#resultTitle,
#midTitle {
  font-size: 22px;
  margin: 0 0 6px;
  text-align: center;
}

#resultLead,
#midLead {
  font-size: 13px;
  color: #666;
  text-align: center;
  margin: 0 0 18px;
  line-height: 1.7;
  white-space: pre-line;
}

#resultCards,
#midCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.result-card {
  border: 2px solid #ddd;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fafafa;
}

.result-card.pin-0 { border-color: #e74c3c; }
.result-card.pin-1 { border-color: #3498db; }
.result-card.pin-2 { border-color: #2ecc71; }
.result-card.pin-3 { border-color: #f1c40f; }

.result-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e5e5;
}

.result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  padding: 3px 0;
}

.result-row .label {
  color: #777;
}

.result-row .value {
  font-weight: bold;
  text-align: right;
}

.result-row .value.minus {
  color: #d63031;
}

.result-row.total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e5e5e5;
  font-size: 15px;
}

.result-note {
  margin-top: 10px;
  font-size: 12px;
  color: #555;
  line-height: 1.6;
  background: #fff;
  border-radius: 8px;
  padding: 8px 10px;
}

.result-footer {
  margin-top: 20px;
  text-align: center;
}

#resultRestartBtn,
#midContinueBtn {
  padding: 10px 28px;
  font-size: 15px;
  border: none;
  border-radius: 999px;
  background: #007aff;
  color: #fff;
  cursor: pointer;
}

#resultRestartBtn:hover,
#midContinueBtn:hover {
  background: #0062cc;
}

/* 中間報告：名前のうしろの年齢 */
.mid-age {
  font-size: 11px;
  font-weight: 400;
  color: #999;
  margin-left: 4px;
}

/* 中間報告：名前の色をコマに合わせる */
.punch-row .pname.pin-0 { color: #e74c3c; }
.punch-row .pname.pin-1 { color: #3498db; }
.punch-row .pname.pin-2 { color: #2ecc71; }
.punch-row .pname.pin-3 { color: #f1c40f; }

/* 中間報告のしめ：これから毎年いくら返すか */
#midPunch {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff6f6;
  border: 1px solid #f0c8c8;
}

.punch-title {
  font-size: 13px;
  font-weight: 700;
  color: #c0392b;
  margin: 0 0 10px;
  text-align: center;
}

.punch-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px dashed #e8d0d0;
  font-size: 13px;
}

.punch-row:first-of-type { border-top: none; }

.punch-row .pname { font-weight: 700; min-width: 84px; }
.punch-row .pyen { font-weight: 700; font-size: 15px; color: #c0392b; margin-left: auto; }
.punch-row .pyen.zero { color: #2e8b57; }
.punch-row .pshare { font-size: 11px; color: #888; }

/* 中間報告のカードは結果画面と同じ枠色を使う */
#midPunch .punch-note,
.forecast .punch-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: #777;
  line-height: 1.7;
}

/* ---- 学生編のしめ「このまま働くと、どうなる？」 ----
   中間報告と同じ並びを使うが、こちらは赤で煽るところではないので、
   枠と見出しを落ち着いた青にして、金額はプラスとマイナスで色を分ける */
.forecast {
  /* ★ #resultCards は grid（カードが横に並ぶ）なので、そのままだと
     見通しが1列ぶんの幅に押し込まれる。横いっぱいに広げる。 */
  grid-column: 1 / -1;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f4f8ff;
  border: 1px solid #c9dcf5;
}

.forecast .punch-title {
  color: #2f6fd0;
}

.forecast .punch-row {
  border-top-color: #d8e5f7;
}

/* 読み違えないための注意書き。注釈より少しだけ強く見せる */
.forecast .fc-caution {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid #2f6fd0;
  background: #e9f1fd;
  color: #3f4a63;
}

/* 1人ぶん2行。上に結果、下にその年の内訳 */
.fc-row {
  padding: 8px 0;
  border-top: 1px dashed #d8e5f7;
}

.fc-row:first-of-type { border-top: none; }

.fc-top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 13px;
}

.fc-top .pname { font-weight: 700; min-width: 72px; }
/* ★ 学生編のふりかえりに出す「一般的な数字（公式の統計）」 */
.facts {
  grid-column: 1 / -1;   /* 見通しと同じく、横いっぱいに広げる */
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #d8e5f7;
  border-radius: 12px;
  background: #fff;
}
.facts-head { margin: 12px 0 4px; font-size: 13px; font-weight: 700; color: #33415c; }
.facts-text { margin: 0; font-size: 13px; line-height: 1.6; }
.facts-table { overflow-x: auto; }
.facts table { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.facts th, .facts td { padding: 4px 12px; border-bottom: 1px solid #e6ecf5; text-align: right; white-space: nowrap; }
.facts th { color: #55607a; font-weight: 500; }
.facts-src { margin: 4px 0 0; font-size: 11px; color: #7a8499; }
.facts-src a { color: inherit; }
.fc-who { font-size: 11.5px; color: #55607a; }
.fc-loan { font-size: 11.5px; color: #888; }

.fc-yen {
  margin-left: auto;
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.fc-yen.plus { color: #2e8b57; }
.fc-yen.minus { color: #c0392b; }

/* 内訳。ここが「なぜ差がついたか」の答えになる */
.fc-calc {
  margin-top: 2px;
  padding-left: 72px;
  font-size: 11.5px;
  color: #6b7590;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .fc-yen { margin-left: 0; }
  .fc-calc { padding-left: 0; }
}

/* =========================
   サイコロ演出（3Dの立体サイコロ）
========================= */
#diceOverlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 52px;
  z-index: 1500;
}

/* 立体に見せるための奥行き */
.dice-scene {
  width: 110px;
  height: 110px;
  perspective: 600px;
}

#dice {
  position: relative;
  width: 110px;
  height: 110px;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(-20deg);
}

/* 転がっている間だけ付けるクラス */
#dice.rolling {
  transition: transform 1.2s cubic-bezier(0.2, 0.9, 0.25, 1);
}

/* サイコロの6面 */
#dice .dice-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 12px;
  background: #fdfdfd;
  border: 1px solid #ddd;
  border-radius: 14px;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.12);
}

/* 各面を立方体の位置に配置する（半分の55px だけ手前に出す） */
#dice .face-1 { transform: translateZ(55px); }
#dice .face-6 { transform: rotateY(180deg) translateZ(55px); }
#dice .face-3 { transform: rotateY(90deg)  translateZ(55px); }
#dice .face-4 { transform: rotateY(-90deg) translateZ(55px); }
#dice .face-5 { transform: rotateX(90deg)  translateZ(55px); }
#dice .face-2 { transform: rotateX(-90deg) translateZ(55px); }

/* サイコロの目（黒丸） */
#dice .pip {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #333;
  align-self: center;
  justify-self: center;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,0.4);
}

/* 1の目だけ赤くする（日本のサイコロらしく） */
#dice .face-1 .pip {
  width: 30px;
  height: 30px;
  background: #d63031;
}

/* 出た目の文字 */
#diceCaption {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  min-height: 28px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.25s;
}

#diceCaption.show {
  opacity: 1;
}

/* 結果画面：奨学金を借りなかった場合との比較 */
.result-compare {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff4f4;
  border: 1px solid #f3c9c9;
}

/* ラベルが長いので、横並びではなく上下に積む */
.result-compare .result-row {
  display: block;
  padding: 0;
}

.result-compare .result-row .label {
  display: block;
  color: #a33;
  font-size: 12px;
}

.result-compare .result-row .value {
  display: block;
  color: #a33;
  font-size: 17px;
  text-align: left;
  white-space: nowrap;
  margin-top: 2px;
}

.result-compare-note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: #555;
}

/* 結果画面：お金の使いみち（残ったお金で勝ち負けに見えないように、使いみちを並べる） */
.result-uses {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f5f8fc;
  border: 1px solid #d7e1ee;
}

.result-uses-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.result-use {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 8px;
  font-size: 12px;
  margin: 4px 0;
}

.result-use .value {
  text-align: right;
  white-space: nowrap;
}

.result-use .bar {
  grid-column: 1 / -1;
  height: 5px;
  background: #e3e9f1;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 2px;
}

.result-use .bar span {
  display: block;
  height: 100%;
  background: #6f95c9;
}

.result-use.kept .bar span {
  background: #4caf7d;
}

/* =========================
   結果画面：タブと人生の分岐点
========================= */
.result-tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 0 18px;
}

.result-tab {
  padding: 9px 20px;
  font-size: 13px;
  font-weight: bold;
  color: #6b7280;
  background: #f1f3f6;
  border-radius: 999px;
}

.result-tab.is-active {
  color: #fff;
  background: #2f4f7f;
}

/* パネルは片方だけ表示する。
   #resultCards は別の場所で display:grid が指定されていて、
   IDセレクタのほうが強いので、こちらもIDを付けて上書きする。 */
#resultCards.result-panel,
#resultMilestones.result-panel,
#resultOrigin.result-panel {
  display: none;
}

#resultCards.result-panel.is-active {
  display: grid;
}

#resultOrigin.result-panel.is-active {
  display: block;
}

#resultMilestones.result-panel.is-active {
  display: block;
}

.ms-intro {
  margin: 0 0 16px;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
}

.ms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.ms-player {
  border: 2px solid #ddd;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fafafa;
}

.ms-player.pin-0 { border-color: #e74c3c; }
.ms-player.pin-1 { border-color: #3498db; }
.ms-player.pin-2 { border-color: #2ecc71; }
.ms-player.pin-3 { border-color: #f1c40f; }

.ms-name {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 8px;
}

/* 自分で決めた数 / 運で決まった数 */
.ms-summary {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.ms-count {
  flex: 1;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11px;
  text-align: center;
}

.ms-count b {
  display: block;
  font-size: 17px;
  margin-top: 2px;
}

.ms-count.choice {
  background: #e8f0fe;
  color: #1a4f9c;
}

.ms-count.luck {
  background: #fdf0e3;
  color: #9a5b12;
}

.ms-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 左の色で「選んだ」と「運」を見分ける */
.ms-item {
  position: relative;
  padding: 0 0 12px 14px;
  border-left: 2px solid #e5e7eb;
}

.ms-item:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.ms-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ms-item.choice::before { background: #2f6fd0; }
.ms-item.luck::before   { background: #e08a2e; }

.ms-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.ms-tile {
  font-size: 10px;
  color: #9aa0a8;
}

.ms-kind {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  color: #fff;
}

.ms-item.choice .ms-kind { background: #2f6fd0; }
.ms-item.luck .ms-kind   { background: #e08a2e; }

.ms-scene {
  font-size: 11px;
  color: #6b7280;
}

.ms-picked {
  font-size: 13px;
  font-weight: bold;
  color: #1f2937;
  line-height: 1.5;
}

.ms-money {
  margin-top: 2px;
  font-size: 12px;
  color: #d63031;
}

/* もし違う選択をしていたら */
.ms-alt {
  margin-top: 4px;
  padding: 5px 8px;
  border-radius: 6px;
  background: #fff;
  border: 1px dashed #e0e3e8;
  font-size: 11px;
  line-height: 1.6;
  color: #6b7280;
}

.ms-none {
  margin: 0;
  font-size: 12px;
  color: #9aa0a8;
}


/* =========================
   はじめの10問 タブ
   ========================= */
.origin-row {
  border-top: 1px dashed #e0e0e0;
  padding: 9px 0;
}

.origin-row:first-of-type { border-top: none; }

.origin-q {
  font-size: 11px;
  color: #888;
  font-weight: 700;
}

.origin-a {
  font-size: 13px;
  color: #333;
  line-height: 1.6;
  margin-top: 2px;
}

.origin-a::before {
  content: "答え：";
  color: #aaa;
  font-size: 11px;
}

.origin-r {
  font-size: 13px;
  color: #1a6b3c;
  line-height: 1.6;
  margin-top: 3px;
  padding-left: 14px;
  position: relative;
}

.origin-r::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #bbb;
}

.origin-row.strong .origin-r {
  color: #c0392b;
  font-weight: 700;
}

/* =====================
   緊急イベント
   マスとは関係なく突然起きる出来事は、ふつうのイベントと見分けがつくように
   赤い見出しにする。
===================== */
.overlay-content.emergency {
  border-top: 5px solid #d64545;
}

.overlay-content.emergency #eventTitle {
  color: #c53030;
  font-weight: 700;
}

.overlay-content.emergency #eventTitle::before {
  content: "緊急";
  display: inline-block;
  background: #d64545;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: 2px;
}

/* =====================
   中間報告の「ここで終わる」ボタン
   1コマで終わらせたいとき用。主役は「社会人編へ進む」なので、
   こちらは控えめな見た目にする。
===================== */
.mid-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.result-footer button.ghost {
  background: transparent;
  color: #5a6472;
  border: 1px solid #c8d0da;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
}

.result-footer button.ghost:hover {
  background: #eef2f7;
  color: #2b3442;
}

/* =====================
   設定画面の下の、出典へのリンク
   授業で配る教材なので、数字の根拠にいつでも行けるようにしておく。
===================== */
.setup-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: #7a828d;
  text-align: center;
}

.setup-note strong {
  color: #5a6472;
  font-weight: 700;
}

.setup-note a {
  color: #2f6fd0;
  font-weight: 700;
}