:root {
    --base:#FFFFFF; --base-dark:#F0F2F5;
    --main:#1e3a5f; --main-light:#2d5a8f;
    --accent:#d4af37; --accent-light:#f4cf5f;
    --text:#2C3E50; --text-light:#7F8C8D; --border:#E8E8E8;
    --shadow:0 4px 20px rgba(30,58,95,0.12);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  .analog-clock-wrap{
    background:linear-gradient(135deg,#fff 0%,#F8F9FA 50%,#F0F2F5 100%);
    min-height:100vh;
    font-family:'Zen Kaku Gothic New',sans-serif;
    overflow-y:auto; padding:72px 16px 40px;
  }

  /* 全画面エリア */
  #playArea{
    position:relative;
  }
  #playArea:fullscreen{
    background:linear-gradient(135deg,#fff 0%,#F8F9FA 50%,#F0F2F5 100%);
    padding:72px 16px 40px;
    overflow:auto;
  }

  /* 全画面中のtop-barは通常表示のままでOK（fixed） */

  /* 拡大縮小UI（全画面のときだけ表示） */
  .zoom-ui{display:none;}
  #playArea:fullscreen .zoom-ui{
    display:flex;
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:2147483647;
    gap:8px;
    padding:10px;
    border-radius:16px;
    background:rgba(255,255,255,.9);
    border:1px solid rgba(30,58,95,.15);
    box-shadow:0 8px 24px rgba(30,58,95,.18);
    backdrop-filter:blur(6px);
    align-items:center;
  }
  .zoom-ui .zlabel{
    display:flex; align-items:center; justify-content:center;
    min-width:56px; padding:8px 10px;
    border-radius:10px; border:1.5px solid var(--border);
    background:#fff; font-weight:900; font-size:13px;
    color:var(--main);
  }
  .zoom-ui button{
    padding:8px 14px; border-radius:10px;
    border:2px solid var(--main); background:#fff;
    color:var(--main); font-weight:900; font-size:15px;
    cursor:pointer;
  }
  .zoom-ui button:hover{background:var(--main);color:#fff;}
  .zoom-ui button:active{transform:translateY(1px);}
  .zoom-sep{
    width:1.5px; align-self:stretch;
    background:rgba(30,58,95,0.15); border-radius:2px;
    margin:0 2px;
  }

  /* 上部固定ボタンエリア */
  .top-bar{
    position:fixed; top:12px; left:50%; transform:translateX(-50%);
    z-index:9999; display:flex; gap:10px; align-items:center;
    background:rgba(248,249,250,0.92);
    padding:8px 16px; border-radius:20px;
    box-shadow:0 2px 12px rgba(30,58,95,0.15);
    backdrop-filter:blur(6px);
  }
  .add-btn{
    padding:10px 24px;
    background:linear-gradient(135deg,var(--main-light),var(--main));
    color:#fff; border:none; border-radius:16px;
    font-family:'Zen Kaku Gothic New',sans-serif;
    font-size:14px; font-weight:900; letter-spacing:0.15em;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(30,58,95,0.35);
    transition:all 0.25s; white-space:nowrap;
  }
  .add-btn:hover{box-shadow:0 8px 20px rgba(30,58,95,0.4);}
  .add-btn:disabled{background:#aaa;box-shadow:none;cursor:not-allowed;}
  .fs-btn{
    display:inline-block; padding:10px 18px;
    background:#fff; color:var(--main);
    border:2px solid var(--main); border-radius:16px;
    font-family:'Zen Kaku Gothic New',sans-serif;
    font-size:14px; font-weight:900; letter-spacing:0.1em;
    cursor:pointer; white-space:nowrap;
    box-shadow:0 4px 14px rgba(30,58,95,0.15);
    transition:all 0.2s;
  }
  .fs-btn:hover{background:var(--main);color:#fff;}
  /* トグルスイッチ */
  .toggle-wrap{
    display:flex; align-items:center; gap:7px;
    font-family:'Zen Kaku Gothic New',sans-serif;
    font-size:13px; font-weight:900; color:var(--main);
    cursor:pointer; user-select:none; white-space:nowrap;
  }
  .toggle-track{
    position:relative; width:44px; height:24px;
    background:#ccc; border-radius:12px;
    transition:background 0.25s;
    flex-shrink:0;
  }
  .toggle-track.on{ background:var(--main); }
  .toggle-thumb{
    position:absolute; top:3px; left:3px;
    width:18px; height:18px; border-radius:50%;
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,0.25);
    transition:transform 0.25s;
  }
  .toggle-track.on .toggle-thumb{ transform:translateX(20px); }
  .fun-btn{
    display:inline-block;
    padding:10px 20px;
    background:#fff;
    color:var(--main); border:2.5px solid var(--main); border-radius:16px;
    font-family:'Zen Kaku Gothic New',sans-serif;
    font-size:14px; font-weight:900; letter-spacing:0.1em;
    cursor:pointer; white-space:nowrap;
    box-shadow:0 4px 14px rgba(30,58,95,0.15);
    transition:background 0.2s, color 0.2s;
  }
  .fun-btn.mode-10{
    background:var(--main); color:#fff;
    border-color:var(--main);
  }
  .fun-btn.mode-all{
    background:var(--accent); color:var(--main);
    border-color:var(--accent);
  }
  .fun-btn.mode-off{
    background:#888; color:#fff;
    border-color:#888;
  }

  #clockGrid{
    display:flex; flex-wrap:wrap; gap:24px;
    justify-content:center; align-items:flex-start;
    transition:all 0.4s;
    margin-top:16px;
  }

  .clock-unit{
    display:flex; flex-direction:column; align-items:center;
    gap:0;
    animation:fadeIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
  }
  @keyframes fadeIn{from{opacity:0;transform:scale(0.75)}to{opacity:1;transform:scale(1)}}

  /* clock-outer: サイズはJS側でscaleプロパティで制御 */
  .clock-outer{
    position:relative;
    width:360px; height:360px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:0;
    transform-origin:top center;
    transition:transform 0.45s cubic-bezier(0.34,1.2,0.64,1);
  }
  .clock-panel{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    background:var(--base);
    border:3px solid var(--border); border-radius:50%;
    box-shadow:var(--shadow), 0 0 0 6px rgba(30,58,95,0.04);
    width:350px; height:350px;
    display:flex; align-items:center; justify-content:center;
  }
  .clock-canvas{display:block;border-radius:50%;cursor:grab;}
  .clock-canvas:active{cursor:grabbing;}

  .num-label{
    position:absolute;
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    font-family:'M PLUS Rounded 1c',sans-serif;
    font-size:20px; font-weight:900; border-radius:50%;
    color:#C8CDD6; background:transparent;
    pointer-events:none; user-select:none;
    transition:color 0.25s,background 0.25s,box-shadow 0.25s,transform 0.25s;
  }
  .num-label.active{
    color:#e02020; background:#fff;
    box-shadow:0 3px 12px rgba(220,50,50,0.3), 0 0 0 2px rgba(220,50,50,0.12);
    transform:scale(1.2); font-size:22px;
  }

  /* 分ラベル（目盛り外側の白リング・funMode=2用） */
  .fun-label{
    position:absolute;
    width:18px; height:18px;
    display:none; align-items:center; justify-content:center;
    font-family:'M PLUS Rounded 1c',sans-serif;
    font-size:9px; font-weight:700;
    border-radius:50%;
    color:#4a7ab5;
    pointer-events:none; user-select:none;
  }
  .fun-label-10{
    font-size:11px; font-weight:900;
    color:var(--main);
    width:20px; height:20px;
  }
  .fun-label-5{
    font-size:10px; font-weight:700;
    color:var(--main-light);
  }

  /* デジタルパネル全体：枠 */
  .digital-panel{
    display:flex; align-items:stretch;
    border:2.5px solid var(--accent); border-radius:16px;
    overflow:hidden;
    box-shadow:var(--shadow); margin-bottom:0;
    background:var(--base);
  }
  /* 左：ごぜん/ごご ボタン */
  .ampm-btn{
    display:flex; align-items:center; justify-content:center;
    padding:6px 10px; min-width:48px;
    background:var(--main); color:#fff;
    font-family:'Zen Kaku Gothic New',sans-serif;
    font-size:13px; font-weight:900; letter-spacing:0.05em;
    cursor:pointer; user-select:none; border:none;
    border-right:2px solid var(--accent);
    transition:background 0.2s;
    flex-shrink:0;
  }
  .ampm-btn:active{background:var(--main-light);}
  /* 中央：時刻表示（タップで隠す） */
  .time-wrap{
    flex:1; display:flex; align-items:center; justify-content:center;
    padding:6px 12px; cursor:pointer; user-select:none; position:relative;
  }
  .time-text{
    font-family:'Zen Kaku Gothic New',sans-serif; font-size:28px; font-weight:900;
    color:var(--main); letter-spacing:0.02em; white-space:nowrap;
  }
  .digital-panel.hidden-mode .time-text{
    color:transparent; position:relative;
  }
  .digital-panel.hidden-mode .time-text::after{
    content:'?じ??ふん';
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    font-family:'Zen Kaku Gothic New',sans-serif; font-size:28px; font-weight:900;
    color:#bbb; white-space:nowrap;
  }
  /* 右：削除ボタン */
  .del-btn{
    display:flex; align-items:center; justify-content:center;
    padding:6px 10px; min-width:38px;
    background:none; border:none; border-left:2px solid var(--accent);
    color:#e02020; font-size:16px; font-weight:900;
    cursor:pointer; user-select:none; flex-shrink:0;
    transition:background 0.2s;
  }
  .del-btn:hover{background:#fff0f0;}
  .del-btn:active{background:#ffe0e0;}