/* ==========================================================================
   Clean & Aesthetic Modern Analog Clock
   ========================================================================== */
:root {
  --font-main: 'Plus Jakarta Sans', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --transition-theme: background 0.4s ease, color 0.4s ease;
  --transition-ui: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. 🌿 スカンジナビア（北欧モダン - デフォルト） */
[data-theme="scandi"] {
  --bg-gradient: radial-gradient(circle at 50% 50%, #f4f6f3 0%, #e7ebe5 100%);
  --shadow-color: rgba(46, 58, 48, 0.1);

  --rim-fill: #ffffff;
  --rim-stroke: #d9e0d6;
  --face-fill: #fafcf9;

  --tick-major: #506152;
  --tick-minor: #cbd4cb;
  --number-color: #263327;
  --minute-num-color: #7b8e7e; /* 控えめで上品なオリーブグレー */

  --hour-hand: #e06c53;   /* 温かみのあるテラコッタ */
  --minute-hand: #2f4538; /* 深みのあるフォレストグリーン */
  --second-hand: #e5a93c; /* マスタード */
  --center-cap: #2f4538;

  --ui-bg: rgba(255, 255, 255, 0.88);
  --ui-border: rgba(46, 58, 48, 0.12);
  --ui-text: #2f4538;
  --ui-subtext: #6b7c6f;
  --ui-hover-bg: rgba(46, 58, 48, 0.06);
  --ui-active-bg: #cad7c6;
  --ui-active-border: #425545;
  --accent-color: #e06c53;
}

/* 2. 🎨 カラー（あざやか・見やすい） */
[data-theme="crayon"] {
  --bg-gradient: radial-gradient(circle at 50% 50%, #f8fafc 0%, #eef2f6 100%);
  --shadow-color: rgba(15, 23, 42, 0.08);

  --rim-fill: #ffffff;
  --rim-stroke: #e2e8f0;
  --face-fill: #ffffff;

  --tick-major: #334155;
  --tick-minor: #cbd5e1;
  --number-color: #0f172a;
  --minute-num-color: #64748b; /* スレートグレー */

  --hour-hand: #ef4444;   /* 赤 */
  --minute-hand: #0284c7; /* 青 */
  --second-hand: #f59e0b; /* 黄 */
  --center-cap: #0f172a;

  --ui-bg: rgba(255, 255, 255, 0.9);
  --ui-border: rgba(0, 0, 0, 0.1);
  --ui-text: #0f172a;
  --ui-subtext: #64748b;
  --ui-hover-bg: rgba(239, 68, 68, 0.08);
  --ui-active-bg: #ffdecb;
  --ui-active-border: #f87171;
  --accent-color: #ef4444;
}

/* 3. 🌙 ナイト（おやすみダーク） */
[data-theme="night"] {
  --bg-gradient: radial-gradient(circle at 50% 50%, #1e2430 0%, #0f131a 100%);
  --shadow-color: rgba(0, 0, 0, 0.5);

  --rim-fill: #181d27;
  --rim-stroke: #2a3344;
  --face-fill: #151922;

  --tick-major: #94a3b8;
  --tick-minor: #334155;
  --number-color: #f1f5f9;
  --minute-num-color: #64748b;

  --hour-hand: #f87171;
  --minute-hand: #38bdf8;
  --second-hand: #fbbf24;
  --center-cap: #f1f5f9;

  --ui-bg: rgba(24, 29, 39, 0.85);
  --ui-border: rgba(255, 255, 255, 0.1);
  --ui-text: #f1f5f9;
  --ui-subtext: #94a3b8;
  --ui-hover-bg: rgba(255, 255, 255, 0.08);
  --ui-active-bg: rgba(255, 255, 255, 0.22);
  --ui-active-border: rgba(255, 255, 255, 0.4);
  --accent-color: #38bdf8;
}

/* 4. ☕ ナチュラル（温もりウッド・エクリュ） */
[data-theme="cream"] {
  --bg-gradient: radial-gradient(circle at 50% 50%, #f7f3ee 0%, #ede6dd 100%);
  --shadow-color: rgba(60, 45, 30, 0.08);

  --rim-fill: #ffffff;
  --rim-stroke: #ded6cc;
  --face-fill: #faf8f5;

  --tick-major: #594a3c;
  --tick-minor: #cbbeaf;
  --number-color: #36291e;
  --minute-num-color: #8c7866;

  --hour-hand: #bd5338;
  --minute-hand: #36291e;
  --second-hand: #d97706;
  --center-cap: #36291e;

  --ui-bg: rgba(255, 255, 255, 0.9);
  --ui-border: rgba(89, 74, 60, 0.15);
  --ui-text: #36291e;
  --ui-subtext: #786655;
  --ui-hover-bg: rgba(89, 74, 60, 0.06);
  --ui-active-bg: #dac8b6;
  --ui-active-border: #756353;
  --accent-color: #bd5338;
}

/* ==========================================================================
   Layout Reset & Stage
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-main);
  background: var(--bg-gradient);
  color: var(--ui-text);
  transition: var(--transition-theme);
  touch-action: manipulation;
}

.clock-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* iPad横向き（ランドスケープ）で画面中央にぴったり美しく配置 */
.clock-container {
  position: relative;
  width: min(86vh, 86vw);
  height: min(86vh, 86vw);
  max-width: 840px;
  max-height: 840px;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg#clockSvg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ==========================================================================
   Clock Face SVG Elements
   ========================================================================== */
.clock-rim {
  fill: var(--rim-fill);
  stroke: var(--rim-stroke);
  stroke-width: 8;
  transition: fill 0.3s ease, stroke 0.3s ease;
}

.clock-face {
  fill: var(--face-fill);
  stroke: var(--rim-stroke);
  stroke-width: 1;
  transition: fill 0.3s ease;
}

/* 目盛り */
.tick-minor {
  stroke: var(--tick-minor);
  stroke-width: 2;
  stroke-linecap: round;
}

.tick-major {
  stroke: var(--tick-major);
  stroke-width: 4;
  stroke-linecap: round;
}

/* 外側の数字（1〜12）：美しく整った大きなプロポーション */
.clock-number {
  font-family: var(--font-main);
  font-size: 32px;
  font-weight: 700;
  fill: var(--number-color);
  text-anchor: middle;
  dominant-baseline: central;
  letter-spacing: -0.5px;
  transition: fill 0.3s ease;
}

/* 中心側の分数表示（5, 10, 15... 60）：控えめで上品なサイズ */
#minuteNumbersGroup {
  transition: opacity 0.3s ease;
}

#minuteNumbersGroup.hidden-minutes {
  opacity: 0;
  pointer-events: none;
}

.minute-number {
  font-family: var(--font-main);
  font-size: 13.5px;
  font-weight: 600;
  fill: var(--minute-num-color);
  text-anchor: middle;
  dominant-baseline: central;
  transition: fill 0.3s ease;
}

/* ==========================================================================
   Clock Hands (針)
   ========================================================================== */
.hour-hand {
  stroke: var(--hour-hand);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.minute-hand {
  stroke: var(--minute-hand);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* 秒針 */
.second-hand-group {
  transition: opacity 0.25s ease;
}

.second-hand-group.hidden {
  opacity: 0;
  visibility: hidden;
}

.second-tail {
  stroke: var(--second-hand);
  stroke-width: 3;
  stroke-linecap: round;
}

.second-body {
  stroke: var(--second-hand);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.second-dot {
  fill: var(--second-hand);
}

/* センターキャップ */
.center-cap-outer {
  fill: var(--center-cap);
  stroke: #ffffff;
  stroke-width: 2.5;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
}

.center-cap-inner {
  fill: #ffffff;
}

/* ==========================================================================
   Floating Control Panel
   ========================================================================== */
.control-panel {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
}

.control-panel.fade-out {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
}

.control-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--ui-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--ui-border);
  border-radius: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.panel-hint {
  font-size: 11px;
  color: var(--ui-subtext);
  letter-spacing: 0.5px;
}

.action-btn, .btn-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  background: transparent;
  color: var(--ui-text);
  border: 1px solid transparent;
  border-radius: 20px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.btn-icon {
  flex-shrink: 0;
  transition: transform 0.15s ease, stroke 0.15s ease;
}

.action-btn:hover, .btn-chip:hover {
  background: var(--ui-hover-bg);
  border-color: transparent;
}

.action-btn:active, .btn-chip:active {
  transform: scale(0.97);
}

/* ==========================================================================
   ON 状態（太字と濃い背景色で明確に表現）
   ========================================================================== */
.toggle-btn input[type="checkbox"]:checked + .btn-chip,
.action-btn.active {
  background: var(--ui-active-bg);
  border-color: var(--ui-active-border);
  color: var(--accent-color);
  font-weight: 700;
}

.toggle-btn input[type="checkbox"]:checked + .btn-chip:hover,
.action-btn.active:hover {
  background: var(--ui-active-bg);
  border-color: var(--ui-active-border);
}

.action-btn.icon-only {
  padding: 7px 10px;
}

.toggle-btn {
  display: inline-flex;
  cursor: pointer;
}

.toggle-btn input[type="checkbox"] {
  display: none;
}

/* ドロップダウンメニュー */
.dropdown-wrapper {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 210px;
  background: var(--ui-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.theme-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  color: var(--ui-text);
  border: none;
  border-radius: 10px;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-ui);
}

.theme-opt:hover {
  background: var(--ui-hover-bg);
}

.theme-opt.active {
  background: var(--ui-active-bg);
  color: var(--accent-color);
}

/* レスポンシブ */
@media (max-width: 600px) {
  .control-bar {
    gap: 4px;
    padding: 5px 8px;
  }
  .action-btn, .btn-chip {
    padding: 6px 10px;
    font-size: 12px;
  }
  .panel-hint {
    display: none;
  }
}