:root {
  /* ダークテーマ変数 (デフォルト) */
  --bg-color: #0d0e11;
  --card-bg: #16171d;
  --accent-red: #ff3b30;
  --ring-dark: #24252c;
  --btn-reset-bg: #222328;
  --btn-x-bg: #000000;
  --btn-x-color: #ffffff;
  --btn-x-border: rgba(255, 255, 255, 0.2);
  --text-white: #ffffff;
  --text-gray: #8e8e93;
  --toggle-btn-bg: #1f2027;
  --toggle-btn-border: rgba(255, 255, 255, 0.15);
  --modal-bg: #1c1d22;
}

[data-theme="light"] {
  /* ホワイトテーマ変数 */
  --bg-color: #f4f5f9;
  --card-bg: #ffffff;
  --accent-red: #ff3b30;
  --ring-dark: #e1e3ed;
  --btn-reset-bg: #e6e8f0;
  --btn-x-bg: #111215;
  --btn-x-color: #ffffff;
  --btn-x-border: rgba(0, 0, 0, 0.1);
  --text-white: #1a1b22;
  --text-gray: #646675;
  --toggle-btn-bg: #ffffff;
  --toggle-btn-border: rgba(0, 0, 0, 0.12);
  --modal-bg: #ffffff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
  background-color: var(--bg-color);
  color: var(--text-white);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.app-fullscreen {
  width: 100%;
  max-width: 390px;
  height: 100vh;
  max-height: 844px;
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 32px 24px;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
  transition: background-color 0.3s ease;
}

/* ヘッダー＆テーマ切替ボタン */
.header-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 6px;
  margin-bottom: 4px;
}

.app-title {
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--text-white);
  text-align: center;
  transition: color 0.3s ease;
}

.theme-toggle-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--toggle-btn-bg);
  border: 1px solid var(--toggle-btn-border);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease;
}

.theme-toggle-btn:hover {
  transform: translateY(-50%) scale(1.08);
}

.theme-icon {
  font-size: 1.1rem;
}

/* 2. 円形プログレスタイマー */
.timer-wrapper {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 14px 0 18px 0;
}

.ring-svg {
  transform: rotate(-90deg);
  width: 220px;
  height: 220px;
}

.ring-bg {
  fill: none;
  stroke: var(--ring-dark);
  stroke-width: 14;
  transition: stroke 0.3s ease;
}

.ring-active {
  fill: none;
  stroke: var(--accent-red);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 596.90;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease;
}

/* タイマー数値 */
.timer-digits {
  position: absolute;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 2.35rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--text-white);
  transition: color 0.3s ease;
}

/* 3. 煽りカード（バッジは枠の右上「外側」に絶対配置） */
.comment-box {
  width: 100%;
  min-height: 106px;
  background-color: var(--card-bg);
  border: 2.5px solid var(--accent-red);
  border-radius: 20px;
  padding: 22px 20px;
  position: relative;
  overflow: visible; /* 外側バッジが切れないようにする */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease;
}

/* 右上「外側」に浮かぶランクバッジ (枠の中のスペースを一切使わない) */
.rarity-corner-badge {
  position: absolute;
  top: -12px;
  right: 12px;
  z-index: 10;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* common: シックなダークグレー */
.badge-common {
  background: #25262c;
  color: #c0c0c0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .badge-common {
  background: #e2e4ed;
  color: #4a4c58;
  border: 1px solid #c8cbd8;
}

/* rare: クッキリ綺麗な青 */
.badge-rare {
  background: #0d2838;
  color: #38bdf8;
  border: 1px solid #0284c7;
}

/* Epic: クッキリ綺麗な紫 */
.badge-epic {
  background: #2a1538;
  color: #c084fc;
  border: 1px solid #9333ea;
}

/* Legendary: クッキリ綺麗なゴールド */
.badge-legendary {
  background: #332608;
  color: #fbbf24;
  border: 1px solid #d97706;
}

/* ur: クッキリ綺麗なクリムゾン */
.badge-ur {
  background: #3d0818;
  color: #fb7185;
  border: 1px solid #e11d48;
}

.comment-text {
  position: relative;
  z-index: 1;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.5;
  color: var(--text-white);
  width: 100%;
  word-break: break-word;
  transition: color 0.3s ease;
}

/* 4. 操作ボタン群 */
.button-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn {
  width: 100%;
  height: 54px;
  border-radius: 20px;
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-red {
  background-color: var(--accent-red);
  color: #ffffff;
}

.btn-red:hover {
  background-color: #ff5247;
}

.btn-red:active {
  transform: scale(0.98);
}

.btn-dark {
  background-color: var(--btn-reset-bg);
  color: var(--text-gray);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-dark:hover {
  opacity: 0.85;
}

.btn-dark:active {
  transform: scale(0.98);
}

.btn-x {
  background-color: var(--btn-x-bg);
  color: var(--btn-x-color);
  border: 1.5px solid var(--btn-x-border);
  font-size: 0.94rem;
  gap: 8px;
}

.x-icon-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 5. フッター */
.footer-area {
  margin-top: 6px;
  margin-bottom: 2px;
}

.umaibo-capsule {
  background-color: var(--card-bg);
  border: 1px solid var(--toggle-btn-border);
  color: var(--text-gray);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: 22px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.heart-icon {
  color: var(--accent-red);
}

/* モーダル */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  padding: 20px;
}

.modal-content {
  background: var(--modal-bg);
  border: 2px solid var(--accent-red);
  border-radius: 22px;
  padding: 26px 22px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.umaibo-emoji {
  font-size: 3rem;
}

.modal-content h2 {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text-white);
}

.modal-content p {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-gray);
  line-height: 1.5;
}

.modal-btn {
  margin-top: 4px;
  height: 46px;
}

.hidden {
  display: none !important;
}