/* ============================================
   デルクイ - ホワイト企業風スタイルシート
   ============================================ */

/* カラーパレット（CSS変数） */
:root {
  --navy: #1a2744;
  --navy-light: #2a3a5c;
  --tie-blue: #3a6ea5;
  --tie-blue-light: #5a8ec5;
  --shirt-white: #f0f2f5;
  --bg-light: #e8ecf0;
  --bg-card: #ffffff;
  --text-main: #1a2744;
  --text-sub: #5a6578;
  --text-muted: #8a94a6;
  --border-light: #c8d0dc;
  --gold: #b8960c;
  --gold-light: #d4b030;
  --danger: #c04848;
  --success: #4caf50;
}

/* 残業モード（ダークテーマ） */
body.overtime-mode {
  --navy: #e2e8f0;
  --navy-light: #c8d0dc;
  --tie-blue: #7ab0d4;
  --tie-blue-light: #9ac4e0;
  --shirt-white: #1a2744;
  --bg-light: #1e2230;
  --bg-card: #282c3a;
  --text-main: #e2e8f0;
  --text-sub: #a0a8b8;
  --text-muted: #6a7488;
  --border-light: #3a4258;
  --gold: #d4b030;
  --gold-light: #e8c840;
}

body.overtime-mode #title-screen,
body.overtime-mode #matching-screen,
body.overtime-mode #game-screen,
body.overtime-mode #room-screen,
body.overtime-mode #result-screen {
  background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url('../assets/bg_office_dark.png');
}

body.overtime-mode .title-container,
body.overtime-mode .matching-container,
body.overtime-mode .room-container,
body.overtime-mode .result-container {
  background-color: rgba(30, 34, 48, 0.80);
}

body.overtime-mode .modal-content {
  background-color: #2a2e3c;
  border-color: #3a4258;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

body.overtime-mode .game-header,
body.overtime-mode .score-bar {
  background-color: rgba(30, 34, 48, 0.85);
}

body.overtime-mode .btn-play {
  background-color: #2a2e3c;
  border-color: #e2e8f0;
  color: #e2e8f0;
}

body.overtime-mode .btn-play:hover {
  background-color: #e2e8f0;
  color: #1e2230;
}

body.overtime-mode .home-badge {
  background-color: var(--danger);
}

body.overtime-mode .current-rank-badge {
  background-color: rgba(212, 176, 48, 0.15);
}

body.overtime-mode .home-user-name-area input {
  background-color: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-light);
}

body.overtime-mode .room-id-field {
  background-color: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-light);
}

body.overtime-mode .public-room-item {
  background-color: var(--bg-card);
  border-color: var(--border-light);
}

body.overtime-mode .chat-input-area input {
  background-color: var(--bg-card);
  color: var(--text-main);
}

/* ボタン系: ダークモードではnavyが明色に反転するため、テキスト・背景を個別指定 */
body.overtime-mode .btn-primary {
  background-color: #3a6ea5;
  border-color: #3a6ea5;
  color: #fff;
}

body.overtime-mode .btn-primary:hover {
  background-color: #4a80b8;
  border-color: #4a80b8;
}

body.overtime-mode .btn-primary:active {
  background-color: #5a90c8;
}

body.overtime-mode .btn:active {
  background-color: #3a4258;
  color: #e2e8f0;
}

body.overtime-mode .btn-secondary:hover {
  color: #fff;
}

body.overtime-mode .btn-back:hover {
  background-color: #3a6ea5;
  color: #fff;
}

body.overtime-mode .lobby-tab.active {
  background-color: #3a6ea5;
  border-color: #3a6ea5;
  color: #fff;
}

body.overtime-mode .public-room-item .btn-join-public:hover {
  color: #fff;
}

/* 退出ボタン */
body.overtime-mode .btn-exit-header {
  color: #a0a8b8;
  border-color: #3a4258;
}

body.overtime-mode .btn-exit-header:hover {
  color: #ff6666;
  border-color: #ff6666;
}

/* ランキング・左遷リスト: 暗い背景での視認性確保 */
body.overtime-mode .dm-score {
  color: #ff6666 !important;
}

body.overtime-mode .lb-pos-2 {
  color: #d0d0d0;
}

/* トグルスイッチ */
body.overtime-mode .toggle-switch input:checked + .toggle-slider::before {
  background-color: #fff;
}


/* リセットと基本設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'DotGothic16', cursive;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  background-color: var(--bg-light);
  color: var(--text-main);
}

/* 画面共通 */
.screen {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: auto;
}

.screen.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ボタン共通 */
.btn {
  font-family: 'DotGothic16', cursive;
  font-size: 16px;
  padding: 12px 24px;
  border: 2px solid var(--border-light);
  background-color: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  image-rendering: pixelated;
  transition: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover {
  background-color: var(--bg-light);
  border-color: var(--tie-blue);
  color: var(--tie-blue);
}

.btn:active {
  background-color: var(--navy);
  color: var(--shirt-white);
  transform: translate(2px, 2px);
}

.btn-primary {
  background-color: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--navy-light);
  border-color: var(--tie-blue);
}

.btn-primary:active {
  background-color: var(--tie-blue);
  color: #fff;
}

.btn-secondary {
  background-color: var(--bg-card);
  border-color: var(--tie-blue);
  color: var(--tie-blue);
}

.btn-secondary:hover {
  background-color: var(--tie-blue);
  color: #fff;
}

.btn-small {
  font-size: 14px;
  padding: 6px 12px;
  border-width: 2px;
}

/* ============================================
   タイトル+ロビー統合画面
   ============================================ */
#title-screen {
  background: url('../assets/bg_office.png') center / cover no-repeat;
  background-color: var(--bg-light);
}

.title-container {
  text-align: center;
  padding: 24px 20px;
  max-width: 480px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.75);
}

/* ユーザー情報 */
.home-user-info {
  margin-bottom: 16px;
}

.home-user-name-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.home-user-name-area input {
  font-family: 'DotGothic16', cursive;
  font-size: 16px;
  padding: 6px 10px;
  border: 2px solid var(--border-light);
  background-color: var(--bg-card);
  color: var(--text-main);
  width: 160px;
  text-align: center;
  outline: none;
}

.home-user-name-area input:focus {
  border-color: var(--tie-blue);
}

.title-logo {
  font-size: 48px;
  color: var(--navy);
  text-shadow: 3px 3px 0 var(--border-light);
  margin-bottom: 4px;
  letter-spacing: 8px;
}

.title-subtitle {
  font-size: 16px;
  color: var(--tie-blue);
  margin-bottom: 20px;
}

/* メイン「遊ぶ」ボタン */
.btn-play {
  display: inline-block;
  font-family: 'DotGothic16', cursive;
  font-size: 28px;
  padding: 20px 60px;
  border: 4px solid var(--navy);
  background-color: var(--bg-card);
  color: var(--navy);
  cursor: pointer;
  letter-spacing: 8px;
  margin: 16px 0;
  -webkit-tap-highlight-color: transparent;
  transition: none;
}

.btn-play:hover {
  background-color: var(--navy);
  color: var(--shirt-white);
  border-color: var(--navy-light);
}

.btn-play:active {
  background-color: var(--navy-light);
  color: #fff;
  transform: translate(2px, 2px);
}

/* テキストリンク風ボタン */
.home-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.home-links-b {
  margin-bottom: 6px;
}

.home-links-c {
  margin-top: 16px;
}

.home-link {
  font-family: 'DotGothic16', cursive;
  font-size: 13px;
  background: none;
  border: none;
  color: var(--tie-blue);
  cursor: pointer;
  padding: 4px 2px;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.home-link:hover {
  color: var(--navy);
  text-decoration: underline;
}

.home-link:active {
  color: var(--navy-light);
}

.home-link-sep {
  color: var(--border-light);
  font-size: 12px;
  user-select: none;
}

/* 残業モードトグル */
.overtime-toggle {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.overtime-mode-label {
  user-select: none;
  transition: color 0.2s;
  color: var(--text-muted);
  font-weight: 400;
}

.home-badge {
  display: inline-block;
  background-color: var(--danger);
  color: #fff;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: top;
}

.home-room-join {
  display: flex;
  justify-content: center;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}

.room-id-field-compact {
  width: 72px;
  font-size: 13px;
  padding: 4px 8px;
  border-width: 1px;
}

/* ルーム作成モーダル */
.create-room-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* マッチング待機画面 */
#matching-screen {
  background: url('../assets/bg_office.png') center / cover no-repeat;
  background-color: var(--bg-light);
}

.matching-container {
  text-align: center;
  padding: 40px 20px;
  max-width: 400px;
  background-color: rgba(255, 255, 255, 0.75);
}

.matching-title {
  font-size: 18px;
  color: var(--navy);
  margin-bottom: 30px;
}

.matching-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--border-light);
  border-top-color: var(--navy);
  border-radius: 50%;
  margin: 0 auto 30px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* メンバー図鑑 */
.zukan-content {
  max-width: 380px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 16px !important;
}

.zukan-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  gap: 0;
  scrollbar-width: none;
}

.zukan-carousel::-webkit-scrollbar {
  display: none;
}

.zukan-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 12px 16px;
  text-align: center;
}

.zukan-img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  image-rendering: pixelated;
  margin-bottom: 12px;
}

.zukan-nickname {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.zukan-name {
  color: var(--navy);
  font-size: 15px;
  margin-bottom: 8px;
}

.member-pt {
  font-size: 14px;
}

.member-pt.positive {
  color: var(--gold);
}

.member-pt.negative {
  color: var(--danger);
}

.zukan-desc {
  color: var(--text-sub);
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
}

.zukan-indicator {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
}

.zukan-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--border-light);
}

.zukan-dot.active {
  background-color: var(--navy);
}

/* 昇進情報モーダル */
.rank-info-summary {
  margin-bottom: 12px;
  padding: 10px;
  background-color: rgba(26, 39, 68, 0.05);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.8;
}

.rank-info-summary strong {
  color: var(--gold);
}

.rank-next {
  margin-top: 4px;
  color: var(--tie-blue);
}

.rank-next.rank-max {
  color: var(--gold);
}

.rank-info-list {
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
}

.rank-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
  color: var(--text-muted);
}

.rank-info-item:last-child {
  border-bottom: none;
}

.rank-info-item.rank-achieved {
  color: var(--text-sub);
}

.rank-info-item.rank-achieved .rank-info-title {
  color: var(--tie-blue);
}

.rank-info-item.rank-current-row {
  background-color: rgba(184, 150, 12, 0.1);
  color: var(--text-main);
  font-weight: bold;
}

.rank-info-item.rank-current-row .rank-info-title {
  color: var(--gold);
}

.rank-info-score {
  font-size: 14px;
  white-space: nowrap;
}

/* 昇進情報モーダルのタブ */
.rank-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--border-light);
}

.rank-tab {
  flex: 1;
  padding: 8px 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: 'DotGothic16', cursive;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}

.rank-tab.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
}

.rank-tab-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.tab-description {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 8px 0;
  padding: 0;
}

/* 番付表（ランキング） */
.leaderboard-list {
  overflow-y: auto;
  flex: 1;
}

.leaderboard-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 30px 10px;
  font-size: 14px;
}

.leaderboard-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
  color: var(--text-main);
}

.leaderboard-item:last-child {
  border-bottom: none;
}

.leaderboard-item.leaderboard-me {
  background-color: rgba(184, 150, 12, 0.1);
}

.lb-position {
  width: 30px;
  text-align: center;
  font-weight: bold;
  flex-shrink: 0;
  color: var(--text-muted);
}

.lb-pos-1 { color: #ffd700; }
.lb-pos-2 { color: #c0c0c0; }
.lb-pos-3 { color: #cd7f32; }

.lb-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-rank-title {
  font-size: 12px;
  color: var(--tie-blue);
}

.lb-score {
  white-space: nowrap;
  font-weight: bold;
  color: var(--gold);
  margin-left: 8px;
}

/* 左遷リスト */
.dm-pos-1 { color: #ff4444; }
.dm-pos-2 { color: #ff7744; }
.dm-pos-3 { color: #ff9966; }

.dm-score {
  color: #c04848 !important;
}

.demotion-item .lb-rank-title {
  color: var(--danger);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(26, 39, 68, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
}

.modal-content {
  background-color: var(--bg-card);
  border: 1px solid var(--border-light);
  padding: 24px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 4px 20px rgba(26, 39, 68, 0.15);
}

.modal-title {
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 16px;
}

.title-concept {
  margin-bottom: 20px;
  line-height: 2;
  font-size: 14px;
  color: var(--text-sub);
}

.title-rules {
  margin-bottom: 24px;
  line-height: 1.8;
  font-size: 14px;
  color: var(--text-main);
  text-align: left;
  display: inline-block;
}

.rules-header {
  color: var(--tie-blue);
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 2px;
}

.screen-title {
  font-size: 24px;
  color: var(--navy);
  margin-bottom: 24px;
}

.current-rank-badge {
  font-size: 14px;
  color: var(--gold);
  background-color: rgba(184, 150, 12, 0.1);
  border: 2px solid var(--gold);
  padding: 4px 8px;
  white-space: nowrap;
}


.room-id-field {
  font-family: 'DotGothic16', cursive;
  font-size: 16px;
  padding: 8px 12px;
  border: 2px solid var(--border-light);
  background-color: var(--bg-card);
  color: var(--text-main);
  width: 100px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
}

.room-id-field:focus {
  border-color: var(--tie-blue);
}

/* ============================================
   戻るボタン
   ============================================ */
.btn-back {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: 'DotGothic16', cursive;
  font-size: 14px;
  padding: 6px 12px;
  border: 2px solid var(--border-light);
  background-color: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
}

.btn-back:hover {
  background-color: var(--navy);
  color: #fff;
}

/* ============================================
   ロビータブ
   ============================================ */
.lobby-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 16px;
}

.lobby-tab {
  font-family: 'DotGothic16', cursive;
  font-size: 14px;
  padding: 8px 16px;
  border: 2px solid var(--border-light);
  background-color: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.lobby-tab.active {
  background-color: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* 公開ルーム一覧 */
.public-room-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  padding: 8px;
  margin-bottom: 12px;
}

.public-room-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 16px;
}

.public-room-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  margin-bottom: 4px;
  background-color: var(--bg-light);
  border: 1px solid var(--border-light);
  font-size: 14px;
}

.public-room-item .room-info {
  color: var(--text-main);
}

.public-room-item .room-host {
  color: var(--navy);
}

.public-room-item .room-players {
  color: var(--text-muted);
  font-size: 14px;
}

.public-room-item .btn-join-public {
  font-family: 'DotGothic16', cursive;
  font-size: 14px;
  padding: 4px 10px;
  border: 2px solid var(--tie-blue);
  background-color: var(--bg-card);
  color: var(--tie-blue);
  cursor: pointer;
}

.public-room-item .btn-join-public:hover {
  background-color: var(--tie-blue);
  color: #fff;
}

/* 公開/非公開トグル */
.toggle-public {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-light);
  border: 2px solid var(--border-light);
  transition: background-color 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: var(--bg-card);
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--tie-blue);
  border-color: var(--tie-blue);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
  background-color: #fff;
}

.toggle-label {
  font-size: 14px;
  color: var(--text-main);
  transition: color 0.2s;
}

/* 両ラベル付きトグル共通 */
.toggle-public-label {
  color: var(--text-muted);
  font-weight: 400;
}

.toggle-public-label.toggle-label--active,
.overtime-mode-label.toggle-label--active {
  color: var(--text-main);
  font-weight: 700;
}

/* ============================================
   ルーム画面（フルスクリーン）
   ============================================ */
#room-screen {
  background: url('../assets/bg_office.png') center / cover no-repeat;
  flex-direction: column;
  align-items: center;
  padding-top: 48px;
}


.room-container {
  padding: 16px;
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  background-color: rgba(255, 255, 255, 0.75);
}

.room-header {
  text-align: center;
  margin-bottom: 12px;
}

.room-id-display {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.room-id-display span {
  font-size: 20px;
  color: var(--navy);
  letter-spacing: 4px;
  background-color: var(--bg-light);
  padding: 4px 12px;
  border: 2px solid var(--navy);
}

/* プレイヤーリスト */
.player-list {
  margin-bottom: 12px;
  border: 1px solid var(--border-light);
  padding: 8px;
  max-height: 150px;
  overflow-y: auto;
}

.player-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-light);
}

.player-item:last-child {
  border-bottom: none;
}

.player-item .player-name {
  color: var(--text-main);
}

.player-item .player-name.is-host::before {
  content: '★ ';
  color: var(--gold);
}

.player-item .player-rank-badge {
  font-size: 14px;
  color: var(--tie-blue);
  margin-left: 8px;
}

.player-item .ready-status {
  color: var(--text-muted);
  font-size: 14px;
}

.player-item .ready-status.is-ready {
  color: var(--success);
}

/* チャットエリア */
.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  margin-bottom: 12px;
  min-height: 120px;
}

.chat-messages {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
}

.chat-messages .chat-msg {
  margin-bottom: 2px;
}

.chat-messages .chat-msg .chat-rank {
  color: var(--tie-blue);
  font-size: 14px;
}

.chat-messages .chat-msg .chat-name {
  color: var(--navy);
}

.chat-input-area {
  display: flex;
  border-top: 1px solid var(--border-light);
}

.chat-input-area input {
  flex: 1;
  font-family: 'DotGothic16', cursive;
  font-size: 14px;
  padding: 6px 8px;
  border: none;
  background-color: var(--bg-card);
  color: var(--text-main);
  outline: none;
}

.room-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.btn-ready.is-ready {
  background-color: var(--success);
  border-color: var(--success);
  color: #fff;
}

/* ============================================
   ゲーム画面
   ============================================ */
#game-screen {
  background: url('../assets/bg_office.png') center / cover no-repeat;
}

.game-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
}

/* ゲームヘッダー */
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
}

.game-timer {
  color: var(--navy);
  font-size: 16px;
}

.game-timer.warning {
  color: var(--danger);
  animation: blink 0.5s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.game-score {
  color: var(--gold);
  font-size: 18px;
}

.game-combo {
  color: var(--danger);
  font-size: 14px;
  min-width: 40px;
  text-align: right;
}

/* ゲームフィールド */
.game-field {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 4px;
  padding: 8px;
  perspective: 600px;
}

/* 行ごとの奥行き表現 */
.game-field .slot {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background-color: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}


/* 机の表現 */
.slot::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../assets/desk.png') center bottom / contain no-repeat;
  image-rendering: pixelated;
  z-index: 3;
  pointer-events: none;
}

/* 杭（若手）の表現 */
.peg {
  position: absolute;
  bottom: 35%;
  width: 90%;
  height: 82%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  z-index: 2;
  transition: none;
}

/* 杭の種類別スタイル */
.peg.type-normal {
  background-color: transparent;
  border: none;
}

.peg.type-slow {
  background-color: transparent;
  border: none;
}

.peg.type-fast {
  background-color: transparent;
  border: none;
}

.peg.type-ace {
  background-color: transparent;
  border: none;
  filter: drop-shadow(0 0 6px #c8a030) drop-shadow(0 0 12px #c8a030);
  animation: aceGlow 0.8s ease-in-out infinite alternate;
}

@keyframes aceGlow {
  from { filter: drop-shadow(0 0 4px #c8a030) drop-shadow(0 0 8px #c8a030); }
  to { filter: drop-shadow(0 0 8px #c8a030) drop-shadow(0 0 16px #d4b050); }
}

.peg.type-executive {
  background-color: transparent;
  border: none;
  filter: drop-shadow(0 0 5px #a04038) drop-shadow(0 0 10px #8a3530);
  animation: execGlow 0.6s ease-in-out infinite alternate;
}

@keyframes execGlow {
  from { filter: drop-shadow(0 0 4px #a04038) drop-shadow(0 0 8px #8a3530); }
  to { filter: drop-shadow(0 0 8px #c05050) drop-shadow(0 0 14px #a04038); }
}

/* 杭の画像 */
.peg-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 杭の出現アニメーション */
.peg.appearing {
  animation: pegAppear 0.2s ease-out forwards;
}

@keyframes pegAppear {
  from {
    transform: translateY(200%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 杭の打撃アニメーション */
.peg.hit {
  animation: pegHit 0.8s ease-in forwards;
}

@keyframes pegHit {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  35% {
    transform: translateY(21%);
    opacity: 1;
  }
  55% {
    transform: translateY(24%);
    opacity: 0.1;
  }
  100% {
    transform: translateY(60%);
    opacity: 0;
  }
}

/* ヒットリアクションアイコン */
.hit-reaction {
  position: absolute;
  top: 12px;
  right: 2px;
  width: 30px;
  height: 30px;
  pointer-events: none;
  z-index: 15;
  animation: reactionAppear 0.15s ease-out;
}

@keyframes reactionAppear {
  0% { transform: scale(0.5); }
  100% { transform: scale(1.0); }
}

/* 杭の自然退場アニメーション */
.peg.disappearing {
  animation: pegDisappear 0.3s ease-in forwards;
}

@keyframes pegDisappear {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    transform: translateY(200%);
    opacity: 0;
  }
}

/* 得点フロートアニメーション */
.score-float {
  position: absolute;
  z-index: 10;
  font-size: 16px;
  font-family: 'DotGothic16', cursive;
  font-weight: bold;
  pointer-events: none;
  animation: floatUp 0.8s ease-out forwards;
}

.score-float.mine.positive {
  color: #ffe066;
  text-shadow: 0 0 6px #d4a830, 0 0 12px #d4a830, 1px 1px 0 #000;
  font-size: 20px;
}

.score-float.mine.negative {
  color: #ff6666;
  text-shadow: 0 0 6px #c04848, 0 0 12px #c04848, 1px 1px 0 #000;
  font-size: 20px;
}

.score-float.other.positive {
  color: #aaa;
  text-shadow: 1px 1px 0 #000;
  font-size: 12px;
}

.score-float.other.negative {
  color: #cc8888;
  text-shadow: 1px 1px 0 #000;
  font-size: 12px;
}

@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateY(-10px);
  }
  100% {
    opacity: 0;
    transform: translateY(-50px);
  }
}

/* コンボ表示ポップアップ */
.combo-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: #fff;
  text-shadow: 0 0 6px #c04848, 0 0 12px #c04848, 2px 2px 0 #000;
  pointer-events: none;
  z-index: 20;
  animation: comboPop 0.5s ease-out forwards;
}

@keyframes comboPop {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.0);
  }
}

/* 叩いたプレイヤー名表示 */
.hit-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  animation: fadeOut 0.6s ease-out 0.3s forwards;
  opacity: 1;
}

.hit-label.mine {
  color: #ffe066;
  text-shadow: 0 0 4px #d4a830, 1px 1px 0 #000, -1px -1px 0 #000;
  font-size: 10px;
}

.hit-label.other {
  color: #999;
  text-shadow: 1px 1px 0 #000;
  font-size: 8px;
}

@keyframes fadeOut {
  to { opacity: 0; }
}

/* スコアバー */
.score-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.85);
  border-top: 1px solid var(--border-light);
  font-size: 12px;
  min-height: 36px;
}

.score-bar-item {
  color: var(--text-sub);
}

.score-bar-item .rank {
  color: var(--gold);
}

.score-bar-item .name {
  color: var(--navy);
}

.score-bar-item .rank-title {
  color: var(--tie-blue);
  font-size: 10px;
}

/* 退出ボタン（ヘッダー内） */
.btn-exit-header {
  font-family: 'DotGothic16', cursive;
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid var(--border-light);
  background-color: transparent;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn-exit-header:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.exit-message {
  color: var(--text-sub);
  font-size: 14px;
  margin-bottom: 16px;
}

.exit-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* カウントダウンオーバーレイ */
.countdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(26, 39, 68, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.countdown-number {
  font-size: 96px;
  color: #d4a830;
  text-shadow: 4px 4px 0 var(--navy);
  animation: countdownPulse 0.9s ease-out;
}

@keyframes countdownPulse {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  30% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
}

/* ============================================
   リザルト画面
   ============================================ */
#result-screen {
  background: url('../assets/bg_office.png') center / cover no-repeat;
}

.result-container {
  text-align: center;
  padding: 20px;
  max-width: 480px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.75);
}

.result-winner {
  font-size: 20px;
  color: var(--gold);
  margin-bottom: 16px;
}

.result-list {
  margin-bottom: 24px;
}

.result-item {
  padding: 8px 12px;
  margin-bottom: 4px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-light);
  font-size: 14px;
}

.result-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-item.rank-1 {
  border-color: var(--gold);
  background-color: rgba(184, 150, 12, 0.08);
}

.result-item .result-rank {
  color: var(--gold);
  min-width: 30px;
}

.result-item .result-name {
  color: var(--navy);
  flex: 1;
  text-align: left;
  margin-left: 8px;
}

.result-item .result-name .result-rank-title {
  color: var(--tie-blue);
  font-size: 14px;
  margin-right: 4px;
}

.result-item .result-score {
  color: var(--text-main);
  min-width: 60px;
  text-align: right;
}

.result-title {
  font-size: 14px;
  color: var(--gold);
  margin-top: 2px;
}

.result-pegs {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.result-peg-item {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  color: var(--gold);
}

.result-peg-item.type-executive {
  color: var(--danger);
}

.result-peg-item img {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
  object-fit: contain;
}

.result-peg-nick {
  font-size: 14px;
  color: var(--text-muted);
}

.result-peg-count {
  font-size: 14px;
}

/* 昇格演出 */
.promotion-display {
  margin-bottom: 16px;
  padding: 12px;
  border: 2px solid var(--gold);
  background-color: rgba(184, 150, 12, 0.08);
  animation: promotionGlow 1s ease-in-out infinite alternate;
}

.promotion-display .promotion-text {
  font-size: 18px;
  color: var(--gold);
  margin-bottom: 4px;
}

.promotion-display .promotion-detail {
  font-size: 14px;
  color: var(--text-main);
}

.promotion-display .promotion-arrow {
  color: var(--danger);
  margin: 0 8px;
}

@keyframes promotionGlow {
  from {
    box-shadow: 0 0 4px var(--gold-light);
  }
  to {
    box-shadow: 0 0 16px var(--gold-light);
  }
}

/* 役職バッジ表示用 */
.rank-badge {
  font-size: 14px;
  color: var(--gold);
  background-color: rgba(184, 150, 12, 0.1);
  border: 1px solid var(--gold);
  padding: 2px 6px;
  margin-right: 4px;
  display: inline-block;
}

/* リザルト画面のボタン群 */
.result-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* エラーメッセージ */
.error-message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--danger);
  color: #fff;
  padding: 8px 16px;
  font-size: 14px;
  z-index: 200;
  animation: fadeOut 3s ease-out forwards;
}

/* ============================================
   レスポンシブ対応（スマホ縦持ち基準）
   ============================================ */
@media (max-width: 480px) {
  .title-logo {
    font-size: 36px;
  }

  .title-concept,
  .title-rules {
    font-size: 14px;
  }

  .game-header {
    font-size: 12px;
    padding: 6px 8px;
  }

  .game-timer {
    font-size: 14px;
  }

  .game-score {
    font-size: 16px;
  }

  .game-field {
    gap: 2px;
    padding: 4px;
  }

  .peg {
    font-size: 8px;
  }

  .score-bar {
    font-size: 10px;
    padding: 6px 8px;
  }

  .btn {
    font-size: 14px;
    padding: 10px 20px;
  }

}