/* style.css - 修正版（全文） */

/* :root カラー等は既存のものをそのまま使う想定 */
:root{
  --accent1:#ff7ab6;
  --accent2:#7ad3ff;
  --accent3:#ffd57a;
  --accent4:#9bff7a;
  --link:#0b66c3;
  --bg:#f7f9fc;
  --card:#ffffff;
  --muted:#6b7280;
  --title-grad: linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  --radius:14px;
  --shadow: 0 6px 18px rgba(16,24,40,0.08);
}

/* リセットと基本 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg,#f0f6ff 0%, #ffffff 100%);
  color:#111827;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:20px;
  -webkit-text-size-adjust:100%;
}

/* タッチと選択の抑止（重要） */
html, body, #stage, .hima, .shareBtn, #startBtn {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;
}

/* container */
.container{ max-width:1100px; margin:0 auto; }

/* header */
.header{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; margin-bottom:12px; }

/* title */
.titleWrap{ display:flex; align-items:center; gap:12px; width:100%; }
h1.title{
  margin:0;
  font-size:clamp(20px,4vw,36px);
  line-height:1.05;
  background:var(--title-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:800;
  text-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* share buttons */
.shareRow{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.shareBtn{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,0.6),rgba(255,255,255,0.2));
  border:1px solid rgba(0,0,0,0.06); cursor:pointer; text-decoration:none; color:#111827;
  font-weight:600; box-shadow:var(--shadow); transition:transform .12s ease, box-shadow .12s ease;
  min-height:44px; -webkit-tap-highlight-color: rgba(0,0,0,0.06);
}
.shareBtn:hover{ transform:translateY(-3px) }
.shareBtn.x{ color:#1da1f2; background:linear-gradient(90deg,#e6f6ff,#f0fbff) }
.shareBtn.fb{ color:#1877f2; background:linear-gradient(90deg,#eaf2ff,#f7fbff) }
.shareBtn.line{ color:#00c300; background:linear-gradient(90deg,#f0fff0,#f7fff7) }
.shareBtn.mail{ color:#d946ef; background:linear-gradient(90deg,#fff0fb,#fff7ff) }
.shareBtn.native{ color:#111827; background:linear-gradient(90deg,#fffdf0,#fff) }

/* stage */
.stageWrap{ margin-top:12px; display:flex; flex-direction:column; gap:12px; }
#stage{
  position:relative; background:#000; border-radius:12px; min-height:260px; overflow:hidden;
  box-shadow: 0 8px 30px rgba(2,6,23,0.12); border:4px solid rgba(255,255,255,0.02);
  -webkit-overflow-scrolling: touch;
}

/* hima */
.hima{
  position:absolute; color:#fff; cursor:pointer; opacity:0; transition:transform .18s ease, opacity .18s ease;
  text-shadow: 0 6px 18px rgba(0,0,0,0.6); will-change:transform,opacity; padding:2px 6px; border-radius:6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  -webkit-tap-highlight-color: rgba(0,0,0,0.06);
  min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
}
.hima.explode{ transform:scale(2) rotate(0deg); opacity:0; transition:transform .28s cubic-bezier(.2,.9,.3,1), opacity .28s ease; filter:drop-shadow(0 10px 20px rgba(255,120,120,0.12)); }
.hima.fadeout{ opacity:0 !important; transform:scale(0.8) !important; }

/* controls */
.controls{ display:flex; gap:12px; align-items:center; margin-top:8px; flex-wrap:wrap; }
#startBtn{
  padding:12px 18px; border-radius:12px; background:linear-gradient(90deg,var(--accent1),var(--accent2));
  color:#fff; border:none; font-weight:800; cursor:pointer; box-shadow: 0 8px 20px rgba(123, 97, 255, 0.12);
  min-height:44px; -webkit-user-select:none;
}
#startBtn.playing{ background:linear-gradient(90deg,var(--accent3),var(--accent4)) }
.infoBox{ padding:10px 14px; background:var(--card); border-radius:10px; box-shadow:var(--shadow); display:flex; gap:12px; align-items:center; }
.timer{ font-weight:800; font-size:18px; }
.score{ font-weight:800; color:var(--accent1); }

/* volume */
.volumeRow{ display:flex; gap:12px; align-items:center; margin-top:8px; }
input[type="range"]{ -webkit-appearance:none; height:6px; background:linear-gradient(90deg,var(--accent2),var(--accent1)); border-radius:6px; outline:none; }
input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,0.12); border:4px solid rgba(255,255,255,0.6); }

/* result overlay */
#resultOverlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(2,6,23,0.45); opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:1200; }
#resultOverlay.visible{ opacity:1; pointer-events:auto; }
.resultCard{ background:var(--card); padding:28px; border-radius:18px; text-align:center; box-shadow:0 20px 60px rgba(2,6,23,0.4); max-width:90%; }
.resultCard h2{ margin:0 0 8px 0; font-size:20px; color:var(--accent2) }
.resultCard .bigScore{ font-size:48px; font-weight:900; color:var(--accent1); margin:8px 0 16px 0; }

/* content */
.content{ margin-top:18px; display:flex; flex-direction:column; gap:18px; }
.content h2{ color:#0f172a; margin:0; font-size:20px }
.content h3{ color:#374151; margin:0; font-size:16px }
.content p{ margin:8px 0; color:var(--muted); line-height:1.7 }

/* links */
a{ color:var(--link); text-decoration:underline }
a:visited{ opacity:0.9 }

/* responsive */
@media (max-width:720px){
  body{ padding:14px }
  .header{ align-items:flex-start }
  .shareRow{ gap:6px }
  .shareBtn{ padding:8px 10px; font-size:14px }
  .resultCard{ padding:18px }
}

/* landscape mobile: stage full width */
@media (orientation: landscape) and (max-width:900px){
  #stage{ width:100vw; border-radius:0; min-height:48vh; }
  body{ padding:0; background:linear-gradient(180deg,#fff,#f7fbff) }
}

/* focus styles */
:focus { outline: none; }
:focus-visible { outline: 3px solid #0a84ff; outline-offset: 3px; border-radius:8px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* accessibility helper */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }