/* mahjong-math / mm.css  v1.0.0 */

#mm-wrap {
  max-width: 700px !important;
  margin: 0 auto !important;
  padding: 10px !important;
  background:
    linear-gradient(160deg, #6b4820 0%, #4e3218 40%, #3d2410 100%) !important;
  color: #f0f3f0 !important;
  border-radius: 10px !important;
  border: 3px solid #8a6030 !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45) !important;
  font-family: 'Yu Gothic UI', 'Meiryo', sans-serif !important;
}

/* タイマー */
#mm-timer-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

#mm-timer-bar-bg {
  flex: 1;
  height: 18px;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,0.15);
}

#mm-timer-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #c02010 0%, #f03010 50%, #f06020 100%) !important;
  border-radius: 3px;
}

#mm-timer-text {
  font-size: 26px;
  font-weight: 900;
  color: #f0c060;
  min-width: 32px;
  text-align: right;
  text-shadow: 0 0 8px rgba(240,180,0,0.6);
  line-height: 1;
}

/* ヘッダー */
#mm-header h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  color: #f0f3f0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  list-style: none !important;
  font-weight: 700 !important;
}

#mm-sub {
  font-size: 11px;
  color: #cdd8d1;
  margin-top: 1px;
}

/* 進捗バー */
#mm-progress-bar {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 12px;
  background: rgba(9, 20, 16, 0.5);
  border: 1px solid #2d5e48;
  border-radius: 6px;
  padding: 4px 8px;
}

#mm-streak-disp {
  color: #f0c060;
  font-weight: bold;
}

/* 状況表 */
#mm-situation {
  margin-top: 8px;
}

.mm-sit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: rgba(8, 18, 15, 0.6);
  border: 1px solid #2f614b;
  border-radius: 6px;
  overflow: hidden;
}

.mm-sit-table th,
.mm-sit-table td {
  padding: 3px 6px;
  border: 1px solid #2a4a38;
}

.mm-sit-table th {
  background: rgba(30, 80, 50, 0.5);
  color: #a8d8b8;
  font-weight: 600;
  white-space: nowrap;
}

.mm-sit-table td {
  color: #e8f0ec;
  background: rgba(8, 18, 15, 0.6) !important;
}

/* 手牌エリア */
.mm-hand-area {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 6px;
  padding: 8px;
  background: rgba(40, 100, 60, 0.35);
  border: 1px solid #3a7050;
  border-radius: 6px;
}

.mm-hand-tiles {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
}

/* 牌画像：ラッパー方式（サンマ与同じ構造） */
.mm-tile-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 46px !important;
  min-width: 34px !important;
  min-height: 46px !important;
  background: linear-gradient(180deg, #fffef9 0%, #f4f1e8 70%, #e6e1d3 100%) !important;
  border: 1.5px solid #c8b88a !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  vertical-align: bottom !important;
  line-height: 0 !important;
}

.mm-tile-inner {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  display: block !important;
  pointer-events: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* アガり牌（金枠） */
.mm-tile-wrap.mm-tile-img-win {
  width: 42px;
  height: 56px;
  border: 2px solid #d4a010 !important;
  box-shadow: 0 0 12px rgba(255,200,50,0.9), 0 2px 5px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

.mm-win-tile {
  margin-left: 2px;
}

.mm-hand-sep {
  font-size: 26px;
  color: #ccc;
  align-self: center;
  margin: 0 2px;
  flex-shrink: 0;
}

.mm-q-intro {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 6px;
}

/* ドラ表示牌エリア */
.mm-dora-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 5px;
  padding: 4px 6px;
  background: rgba(8, 18, 15, 0.5);
  border: 1px solid #2f614b;
  border-radius: 0 0 6px 6px;
}

/* 王牌ヘッダー行 */
.mm-dora-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11px;
}

.mm-dora-count-text {
  color: #f0c060;
  font-size: 13px;
  font-weight: bold;
}

.mm-dora-none {
  color: #888;
  font-weight: normal;
}

.mm-dora-label-text {
  color: #aaa;
  font-size: 11px;
}

/* 王牌 14枚の牌列 */
.mm-oidai-row {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}

/* ドラ表示牌（金枠） */
.mm-tile-dora-indicator {
  border: 2px solid #d4a010 !important;
  box-shadow: 0 0 10px rgba(212,160,16,0.8), 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* 裏ドラ候補（青枠） */
.mm-tile-ura-indicator {
  border: 2px solid #4080c0 !important;
  box-shadow: 0 0 8px rgba(64,128,200,0.7), 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* 王牌の裏向き牌（暗色） */
.mm-tile-oidai {
  background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%) !important;
  border: 1px solid #555 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
  opacity: 0.85;
}
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 46px;
  background: linear-gradient(180deg, #fffbe8 0%, #f5e8a0 100%);
  border: 2px solid #d4a010;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(212,160,16,0.7), 0 2px 4px rgba(0,0,0,0.3);
  overflow: hidden;
  flex-shrink: 0;
}

/* 裏ドラ（青枠） */
.mm-ura-dora-wrap {
  background: linear-gradient(180deg, #e8f4ff 0%, #b0d8f8 100%) !important;
  border-color: #4080c0 !important;
  box-shadow: 0 0 8px rgba(64,128,200,0.7), 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* 鳴き面子エリア */
.mm-naki-area {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding: 4px 8px;
  background: rgba(80, 40, 10, 0.4);
  border: 1px solid #7a5020;
  border-radius: 4px;
}

.mm-naki-label {
  font-size: 11px;
  color: #d4a060;
  white-space: nowrap;
  font-weight: bold;
}

.mm-naki-meld {
  display: flex;
  gap: 2px;
  align-items: flex-end;
}

/* チーの取得牌（横向き） */
.mm-tile-wrap.mm-tile-sideways {
  transform: rotate(90deg);
  transform-origin: center center;
  margin: 0 7px;
}

/* 問題エリア */
#mm-question-area {
  margin-top: 8px;
  background: rgba(8, 18, 15, 0.6);
  border: 1px solid #2f614b;
  border-radius: 6px;
  padding: 8px;
}

#mm-question-text {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* 選択肢ボタン */
#mm-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mm-choice-btn {
  border: 1.5px solid #4a7f67;
  background: linear-gradient(180deg, #2f654f, #214c39);
  color: #eef5f1;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  transition: background 0.15s, transform 0.1s;
}

.mm-choice-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #3a7b5f, #2d624b);
  transform: translateX(3px);
}

.mm-choice-btn:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}

.mm-choice-btn.mm-correct-choice {
  border-color: #60c060 !important;
  background: linear-gradient(180deg, #2a7a2a, #1a5a1a) !important;
  color: #90ff90 !important;
}

/* フィードバック */
.mm-feedback {
  margin-top: 10px;
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  min-height: 28px;
  transition: all 0.2s;
}

/* 役名ヒント（解答後表示） */
.mm-yaku-hint {
  font-size: 12px;
  font-weight: normal;
  color: #c8e8d0;
  margin-top: 4px;
  padding: 3px 6px;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  letter-spacing: 0.03em;
}

/* 符計算ブレークダウン */
.mm-fu-breakdown {
  font-size: 11px;
  font-weight: normal;
  color: #d0d8c8;
  margin-top: 5px;
  padding: 5px 8px;
  background: rgba(0,0,0,0.35);
  border-left: 2px solid #6a9a70;
  border-radius: 0 4px 4px 0;
  text-align: left;
  line-height: 1.8;
}

.mm-fu-breakdown div:last-child {
  margin-top: 2px;
  color: #f0e080;
  font-weight: bold;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 2px;
}

.mm-feedback-correct {
  color: #ff4444;
  text-shadow: 0 0 10px rgba(255, 60, 60, 0.8);
}

.mm-feedback-wrong {
  color: #4488ff;
  text-shadow: 0 0 10px rgba(60, 100, 255, 0.8);
}

@keyframes mm-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1);   opacity: 1; }
}

.mm-feedback-anim {
  animation: mm-pop 0.4s ease forwards;
}

/* 10問連続正解メッセージ */
.mm-perfect-msg {
  margin-top: 8px;
  padding: 8px;
  background: linear-gradient(135deg, #d4a010, #a07000);
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  animation: mm-pop 0.5s ease;
}

/* コントロール */
#mm-controls {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#mm-controls button {
  border: 1px solid #4a7f67;
  background: linear-gradient(180deg, #2f654f, #214c39);
  color: #eef5f1;
  border-radius: 5px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
}

#mm-controls button:hover {
  background: linear-gradient(180deg, #3a7b5f, #2d624b);
}

#mm-reward-btn {
  background: linear-gradient(180deg, #c0408a, #8a2060) !important;
  border-color: #e060a0 !important;
  animation: mm-pulse 1.8s ease-in-out infinite;
}

@keyframes mm-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(200, 60, 140, 0.5); }
  50%       { box-shadow: 0 0 14px rgba(200, 60, 140, 0.9); }
}

/* 結果エリア */
#mm-result-area {
  margin-top: 10px;
  padding: 10px;
  background: rgba(8, 18, 15, 0.6);
  border: 1px solid #2f614b;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
  line-height: 1.8;
}

/* ご褒美オーバーレイ */
#mm-reward-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#mm-reward-overlay.active {
  display: flex;
}

.mm-reward-msg {
  color: #ffd700;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
  text-shadow: 0 0 12px rgba(255, 200, 0, 0.8);
}

#mm-reward-img {
  max-width: 80vw;
  max-height: 70vh;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(255, 200, 0, 0.5);
}

.mm-reward-hint {
  color: #aaa;
  font-size: 13px;
  margin-top: 12px;
}

/* スマホ対応 */
@media (max-width: 900px) {
  #mm-wrap {
    padding: 4px !important;
  }

  /* 牌：デスクトップ 34×46 の約半分 */
  .mm-tile-wrap {
    width: 17px !important;
    height: 23px !important;
    min-width: 17px !important;
    min-height: 23px !important;
    border-radius: 2px !important;
  }

  .mm-tile-wrap.mm-tile-img-win {
    width: 21px !important;
    height: 28px !important;
    min-width: 21px !important;
    min-height: 28px !important;
  }

  .mm-dora-tile-wrap {
    width: 17px !important;
    height: 23px !important;
  }

  .mm-tile-oidai {
    width: 13px !important;
    height: 18px !important;
    min-width: 13px !important;
    min-height: 18px !important;
  }

  .mm-tile-wrap.mm-tile-sideways {
    margin: 0 3px;
  }

  /* 手牌エリア */
  .mm-hand-area {
    gap: 3px;
    margin: 5px 0 3px;
    padding: 4px;
  }

  .mm-hand-tiles {
    gap: 1px;
  }

  .mm-win-tile {
    margin-left: 1px;
  }

  .mm-hand-sep {
    font-size: 14px;
  }

  /* 状況表 */
  #mm-situation {
    margin-top: 4px;
  }

  /* ドラ */
  .mm-dora-area {
    gap: 2px;
    margin-top: 3px;
    padding: 3px 4px;
  }

  .mm-oidai-row {
    gap: 1px;
  }

  /* 問題エリア */
  #mm-question-area {
    margin-top: 4px;
    padding: 5px;
  }

  #mm-question-text {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 6px;
  }

  .mm-q-intro {
    font-size: 12px;
    margin-bottom: 4px;
  }

  /* 選択肢 */
  #mm-choices {
    gap: 4px;
  }

  .mm-choice-btn {
    font-size: 11px;
    padding: 5px 7px;
  }

  /* フィードバック */
  .mm-feedback {
    font-size: 18px;
    margin-top: 6px;
  }

  .mm-yaku-hint {
    font-size: 11px;
    margin-top: 3px;
  }

  .mm-fu-breakdown {
    font-size: 10px;
    line-height: 1.5;
    padding: 3px 6px;
    margin-top: 3px;
  }

  /* 状況表文字 */
  .mm-sit-table {
    font-size: 10px;
  }

  .mm-sit-table th,
  .mm-sit-table td {
    font-size: 10px;
    padding: 2px 3px;
  }

  /* タイマー */
  #mm-timer-wrap {
    margin-top: 3px;
    gap: 6px;
  }

  #mm-timer-bar-bg {
    height: 14px;
  }

  #mm-timer-text {
    font-size: 20px;
  }

  /* 進捗バー */
  #mm-progress-bar {
    margin-top: 3px;
    padding: 3px 6px;
    font-size: 11px;
  }

  /* コントロール */
  #mm-controls {
    margin-top: 4px;
    gap: 4px;
  }
}