/* ==============================
   銅鑼タイマー 見た目                [GONG5-CSS-000]
   gong-timer.html から読み込みます
   ============================== */

/* 色と書体  [GONG5-CSS-001] */
:root{
  --sumi:#191512;      /* 背景（墨） */
  --panel:#221D19;     /* パネル面 */
  --panel-2:#2B2521;
  --line:#3A322B;      /* 罫線 */
  --brass:#D7A64A;     /* 真鍮 */
  --brass-hi:#F2D89A;
  --shu:#D9482F;       /* 朱（残りわずか・取消） */
  --seiji:#6E9C8F;     /* 緑青（接続中） */
  --kinari:#EFE7D9;    /* 文字 */
  --muted:#9A8E7E;     /* 補助文字 */
  --disp:"Shippori Mincho B1","Yu Mincho","Hiragino Mincho ProN",serif;
  --body:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",sans-serif;
  --mono:"Roboto Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(1000px 520px at 50% -8%, #241E19 0%, transparent 60%), var(--sumi);
  color:var(--kinari); font-family:var(--body);
  min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  padding:14px 16px calc(24px + env(safe-area-inset-bottom));
  -webkit-text-size-adjust:100%;
}
button,select{font-family:inherit; font-size:inherit; color:inherit}
:focus-visible{outline:2px solid var(--brass-hi); outline-offset:2px}

/* 上部の帯と接続表示  [GONG5-CSS-002] */
.top{width:100%; max-width:460px; display:flex; align-items:center; gap:10px}
.title{font-family:var(--disp); font-size:19px; letter-spacing:.16em}
.grow{flex:1}
.pill{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line);
  background:var(--panel); border-radius:999px; padding:6px 12px; font-size:12px}
.dot{width:8px; height:8px; border-radius:50%; background:var(--muted)}
.pill[data-s="ok"] .dot{background:var(--seiji); box-shadow:0 0 8px var(--seiji)}
.pill[data-s="ng"] .dot{background:var(--shu)}

/* 銅鑼  [GONG5-CSS-003] */
.holder{position:relative; width:min(60vw,220px); aspect-ratio:1; margin:20px 0 6px}
.ripple{position:absolute; inset:0; border-radius:50%; border:1px solid var(--brass);
  opacity:0; pointer-events:none}
.holder.hit .ripple{animation:rip 1.5s cubic-bezier(.2,.7,.3,1) forwards}
.holder.hit .ripple:nth-child(2){animation-delay:.13s}
.holder.hit .ripple:nth-child(3){animation-delay:.27s}
@keyframes rip{0%{transform:scale(1); opacity:.7} 100%{transform:scale(1.7); opacity:0}}

.gong{
  position:absolute; inset:0; border:none; padding:0; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 50% 42%, var(--brass-hi) 0%, var(--brass) 26%, #8A6A22 62%, #6B5019 100%);
  box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 0 0 6px rgba(255,255,255,.07);
  display:grid; place-items:center; transition:transform .08s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.gong::before{ /* 表面の輪紋 */
  content:""; position:absolute; inset:14px; border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 42%, rgba(0,0,0,.10) 0 2px, transparent 2px 9px);
}
.gong::after{ /* 中央のふくらみ（撞座） */
  content:""; position:absolute; width:34%; height:34%; top:31%; border-radius:50%;
  background:radial-gradient(circle at 42% 34%, var(--brass-hi), #A87F26 70%, #7A5B1B);
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.35);
}
.gong b{position:relative; z-index:2; font-family:var(--disp); font-size:min(8.5vw,32px);
  color:#3B2A06; text-shadow:0 1px 0 rgba(255,255,255,.35); transform:translateY(min(13vw,48px))}
.gong:active{transform:scale(.97)}
.holder.hit .gong{animation:shake .4s ease-out}
@keyframes shake{0%,100%{transform:translate(0,0)} 20%{transform:translate(-3px,1px)}
  45%{transform:translate(2px,-1px)} 70%{transform:translate(-1px,0)}}

/* 残り時間  [GONG5-CSS-004] */
.count{font-family:var(--mono); font-weight:700; font-size:clamp(56px,20vw,96px); line-height:1.1;
  letter-spacing:.02em; font-variant-numeric:tabular-nums}
.count.warn{color:var(--shu)}
.state{color:var(--muted); font-size:13px; min-height:20px; text-align:center; margin-top:2px}
.state.err{color:#E6A091}

/* 時間の設定と操作  [GONG5-CSS-005] */
.panel{width:100%; max-width:460px; margin-top:18px}
.picker{display:flex; align-items:flex-end; justify-content:center; gap:10px}
.pick{display:flex; flex-direction:column; gap:6px; align-items:center}
.pick label{font-size:11px; letter-spacing:.1em; color:var(--muted)}
.picker select{background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  padding:14px 12px; font-family:var(--mono); font-size:26px; font-weight:700;
  text-align:center; min-width:96px}
.unit{font-family:var(--disp); font-size:15px; padding-bottom:16px; color:var(--muted)}

.actions{display:flex; gap:10px; margin-top:16px}
.btn{flex:1; border:1px solid var(--line); background:var(--panel-2); border-radius:14px;
  padding:16px; cursor:pointer; font-size:17px; font-weight:700;
  font-family:var(--disp); letter-spacing:.18em}
.btn.start{background:var(--brass); border-color:var(--brass); color:#251C08}
.btn.cancel{background:transparent; color:#E6A091; border-color:#5A342C}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.35; cursor:not-allowed; transform:none}
.note{color:var(--muted); font-size:12px; text-align:center; margin:14px 0 0}

/* 動きを減らす設定の端末への配慮  [GONG5-CSS-006] */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ファイル管理番号: GONG-FE-2026-0812-008 */