/* デイリーアンケート(survey.js)— クイズと同系統のフルスクリーンオーバーレイ */
.sv-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(4, 7, 18, 0.92); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.2s;
}
.sv-overlay.is-open { opacity: 1; }
.sv-panel {
  position: relative; width: 100%; max-width: 460px;
  background: linear-gradient(160deg, #0e1633, #070b1c);
  border: 1px solid var(--border-glow, rgba(80,170,255,0.45));
  border-radius: 20px; padding: 26px 22px; box-shadow: 0 0 50px rgba(60, 100, 220, 0.3);
}
.sv-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  border: none; border-radius: 50%; cursor: pointer; font-size: 14px;
  background: rgba(255,255,255,0.08); color: var(--text-dim);
}
.sv-body { min-height: 280px; }
.sv-msg { text-align: center; color: var(--text-dim); padding: 40px 0; }

/* イントロ */
.sv-intro, .sv-result { text-align: center; padding: 8px 0; }
.sv-emoji { font-size: 56px; line-height: 1; }
.sv-title { font-size: 19px; font-weight: 900; margin-top: 10px; }
.sv-rules { margin: 18px auto 6px; display: flex; flex-direction: column; gap: 8px; max-width: 300px; }
.sv-rule { font-size: 13px; color: var(--text-dim); }
.sv-rule b { color: var(--text); }
.sv-coin { color: var(--yellow) !important; }
.sv-note { font-size: 12px; color: var(--text-dim); margin: 14px 0 18px; }
.sv-start { margin-top: 6px; }

/* 設問 */
.sv-play { display: flex; flex-direction: column; gap: 14px; }
.sv-progress-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); font-weight: 800; }
.sv-progress { height: 6px; border-radius: 999px; background: #101a32; overflow: hidden; }
.sv-progress i { display: block; height: 100%; background: linear-gradient(90deg, #22d3ee, #4da3ff); transition: width 0.3s; }
.sv-question { font-size: 17px; font-weight: 800; line-height: 1.5; text-align: center; padding: 8px 0; min-height: 56px; }
.sv-opt-row { display: flex; flex-direction: column; gap: 10px; }
.sv-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 16px 16px; border-radius: 14px; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 800; color: var(--text);
  background: rgba(20, 27, 52, 0.85); border: 1.5px solid var(--border);
  transition: transform 0.08s, border-color 0.15s, background 0.15s;
}
.sv-opt:hover { border-color: var(--border-glow); }
.sv-opt:active { transform: scale(0.98); }
.sv-opt:disabled { opacity: 0.85; cursor: default; }
.sv-opt-key {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px;
}
.sv-opt-a .sv-opt-key { background: rgba(34, 211, 238, 0.18); color: var(--cyan); }
.sv-opt-b .sv-opt-key { background: rgba(255, 61, 122, 0.18); color: var(--magenta); }
.sv-opt.is-picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.sv-opt-a.is-picked { background: rgba(34, 211, 238, 0.16); }
.sv-opt-b.is-picked { background: rgba(255, 61, 122, 0.16); }
.sv-hint { font-size: 11.5px; color: var(--text-dim); text-align: center; }

/* みんなの回答(集計) */
.sv-dist { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; animation: sv-fade 0.3s; }
@keyframes sv-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sv-dist-title { font-size: 12.5px; font-weight: 900; color: var(--text-dim); text-align: center; }
.sv-dist-bar {
  position: relative; height: 34px; border-radius: 10px; overflow: hidden;
  background: #101a32; border: 1px solid var(--border); display: flex; align-items: center;
}
.sv-dist-bar.is-mine { border-color: var(--accent); box-shadow: 0 0 10px rgba(77, 163, 255, 0.4); }
.sv-dist-fill { position: absolute; left: 0; top: 0; bottom: 0; transition: width 0.6s ease; }
.sv-fill-a { background: linear-gradient(90deg, rgba(34,211,238,0.5), rgba(34,211,238,0.25)); }
.sv-fill-b { background: linear-gradient(90deg, rgba(255,61,122,0.5), rgba(255,61,122,0.25)); }
.sv-dist-pct { position: relative; z-index: 1; padding: 0 12px; font-size: 13px; font-weight: 900; }
.sv-dist-note { font-size: 12px; color: var(--text); font-weight: 800; text-align: center; margin-top: 2px; }

/* 結果 */
.sv-result-reward { font-size: 13px; color: var(--text-dim); margin: 16px 0 6px; }
.sv-result-coin { font-size: 26px; color: var(--yellow); }

/* ホームの入口タイル(専用画像なし=グラデ＋アイコン表示) */
.home-tile.tile-survey {
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.20), rgba(15, 20, 42, 0.94));
  border-color: rgba(139, 92, 246, 0.45);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.12);
}
.tile-survey .tile-icon { display: block; font-size: 34px; line-height: 1; margin-bottom: 4px; }
.tile-survey .tile-go { color: var(--accent-2, #8b5cf6); }
.tile-survey.is-done .tile-name { color: #aeb9d6; }
.tile-survey.is-done .tile-go { color: var(--green, #34d399); }