/* =====================================================
   style.css  ―  スターVtuber教材 共通スタイル
   ===================================================== */

/* ===== リセット・基本 ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --or:      #E8701A;
  --or-lt:   #FEF0E6;
  --or-mid:  #F5A06A;
  --or-dk:   #B54E10;
  --gold:    #FFB830;
  --gold-lt: #FFF4D6;
  --bg:      #FAFAFA;
  --card:    #FFFFFF;
  --txt:     #1E1E1E;
  --txt2:    #444444;
  --txt3:    #999999;
  --border:  rgba(0,0,0,0.09);
  --green:   #27AE60;
  --red:     #E74C3C;
  --blue:    #2980B9;
  --radius:  14px;
  --shadow:  0 4px 24px rgba(232,112,26,0.10);
}

html   { scroll-behavior: smooth; }
body   {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
               'Noto Sans JP', 'Meiryo', sans-serif;
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.7;
}

/* ===== ルビ ===== */
ruby    { ruby-align: center; }
ruby rt { font-size: 0.5em; color: inherit; opacity: 0.6; font-weight: normal; line-height: 1; }

/* ルビが入る要素の行間を確保 */
.vn-bbl, .ss-body, .it-body, .hint,
.goal-list li, .tech-body, .act-body { line-height: 2.1; }

/* ===== 背景装飾 ===== */
.hex-pattern {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200'%3E%3Cpolygon points='55,40 27.5,87.7 -27.5,87.7 -55,40 -27.5,-7.7 27.5,-7.7' fill='none' stroke='%23E8701A' stroke-width='1.2' stroke-opacity='0.13'/%3E%3Cpolygon points='250,100 215,160.6 145,160.6 110,100 145,39.4 215,39.4' fill='none' stroke='%23E8701A' stroke-width='1.0' stroke-opacity='0.07'/%3E%3Cpolygon points='345,155 322.5,194 277.5,194 255,155 277.5,116 322.5,116' fill='none' stroke='%23FFB830' stroke-width='0.9' stroke-opacity='0.09'/%3E%3Cpolygon points='135,3 117.5,33.3 82.5,33.3 65,3 82.5,-27.3 117.5,-27.3' fill='none' stroke='%23FFB830' stroke-width='0.8' stroke-opacity='0.11'/%3E%3Cpolygon points='288,28 274,52.2 246,52.2 232,28 246,3.8 274,3.8' fill='none' stroke='%23E8701A' stroke-width='0.7' stroke-opacity='0.08'/%3E%3Cpolygon points='72,172 61,191 39,191 28,172 39,153 61,153' fill='none' stroke='%23FFB830' stroke-width='0.8' stroke-opacity='0.10'/%3E%3Cpolygon points='175,185 164.5,204 143.5,204 133,185 143.5,166 164.5,166' fill='none' stroke='%23E8701A' stroke-width='0.6' stroke-opacity='0.07'/%3E%3C/svg%3E");
  background-size: 320px 200px;
}

/* ===== パーティクル ===== */
.particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.particle  {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  animation: particleFloat 8s infinite linear;
}
@keyframes particleFloat {
  0%   { transform: translateY(100vh); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: .8; }
  100% { transform: translateY(-100px) translateX(60px); opacity: 0; }
}

/* ===== 星アニメーション ===== */
.star-animation {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 100px; color: var(--gold); z-index: 999;
  opacity: 0; pointer-events: none;
  filter: drop-shadow(0 0 20px rgba(255,184,48,.8));
}
@keyframes starPop {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0) rotate(0deg); }
  50%  { opacity:1; transform:translate(-50%,-50%) scale(1.3) rotate(180deg); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(.8) rotate(360deg); }
}
.star-animation.anim { animation: starPop 1.5s ease-out; }

/* ===== サイトヘッダー ===== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--or);
  box-shadow: 0 2px 20px rgba(232,112,26,.12);
}

.header-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 0 20px;
  display: flex; align-items: center; gap: 14px; height: 64px;
}

/* ロゴ六角形 */
.logo-hex {
  width: 38px; height: 38px; flex-shrink: 0; cursor: pointer;
  background: var(--or);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display: flex; align-items: center; justify-content: center;
}
.logo-hex i { color: #fff; font-size: 14px; }

/* ヘッダータイトル */
.header-info   { flex: 1; min-width: 0; }
.header-num    { font-size: 10px; font-weight: 700; color: var(--or); letter-spacing: .12em; }
.header-title  { font-size: 14px; font-weight: 700; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 戻るボタン */
.back-button {
  font-size: 12px; color: var(--or); border: 1.5px solid var(--or);
  padding: 6px 14px; border-radius: 20px; text-decoration: none;
  white-space: nowrap; transition: .2s; flex-shrink: 0;
}
.back-button:hover { background: var(--or); color: #fff; }

/* ===== ハンバーガーメニュー ===== */
.hamburger-menu   { position: relative; z-index: 101; }
.hamburger-button {
  background: rgba(232,112,26,.1); border: 1.5px solid rgba(232,112,26,.35);
  border-radius: 8px; width: 40px; height: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; cursor: pointer; transition: all .3s;
}
.hamburger-button span { display: block; width: 18px; height: 2px; background: var(--or); border-radius: 2px; }
.hamburger-button:hover { background: rgba(232,112,26,.2); }

.menu-dropdown {
  position: absolute; top: 50px; left: 0;
  background: rgba(255,255,255,.98); backdrop-filter: blur(15px);
  border: 1px solid rgba(232,112,26,.22); border-radius: 14px;
  padding: 12px; min-width: 280px;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: all .25s; box-shadow: 0 12px 40px rgba(0,0,0,.12); z-index: 200;
}
.menu-dropdown.open { transform: translateY(0); opacity: 1; visibility: visible; }

.menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin: 3px 0; border-radius: 8px;
  cursor: pointer; transition: all .2s; color: var(--txt); font-size: 13px;
}
.menu-item:hover { background: var(--or-lt); color: var(--or-dk); }

.menu-item-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  background: linear-gradient(135deg,var(--or),var(--gold));
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; font-weight: 700;
}
.menu-item-star { color: var(--gold); font-size: 14px; margin-left: auto; opacity: .3; transition: .2s; }
.menu-item.done .menu-item-star { opacity: 1; }

/* ===== 進捗バー ===== */
.header-progress {
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid rgba(232,112,26,.15);
  position: sticky; top: 64px; z-index: 99;
}
.header-progress .header-inner { height: 36px; }
.progress-bar {
  flex: 1; background: rgba(232,112,26,.1); border-radius: 10px;
  height: 8px; overflow: hidden;
}
.progress-fill {
  background: linear-gradient(90deg,var(--or-mid),var(--or),var(--gold));
  height: 100%; border-radius: 10px; transition: width .6s ease;
  position: relative;
}
.progress-fill::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation: shine 2.5s ease-in-out infinite;
}
@keyframes shine { 0%{left:-100%} 100%{left:100%} }

/* ===== 星プログレス（下部固定） ===== */
.star-progress {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 98;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding: 10px 0 14px;
  display: flex; justify-content: center; gap: 10px;
}
.star-slot {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px dashed #ddd; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .3s;
}
.star-slot:hover { border-color: rgba(255,184,48,.5); transform: scale(1.1); }
.star-slot.filled { border: 2px solid var(--gold); background: radial-gradient(circle,rgba(255,184,48,.2),transparent); }
.star-slot.current { border-color: var(--or); animation: pulseBorder 1s ease-in-out infinite alternate; }
@keyframes pulseBorder {
  from { box-shadow: 0 0 0 0 rgba(232,112,26,.5); }
  to   { box-shadow: 0 0 0 7px rgba(232,112,26,0); }
}
.star-icon { font-size: 18px; color: var(--gold); opacity: 0; transform: scale(0); transition: all .35s cubic-bezier(.34,1.56,.64,1); }
.star-slot.filled  .star-icon { opacity: 1; transform: scale(1); }
.star-slot.current .star-icon { opacity: .4; transform: scale(.8); color: var(--or); }

/* ===== ステップドット ===== */
.step-dots-row { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 16px 0 18px; }
.sdot { width: 9px; height: 9px; border-radius: 50%; background: #ddd; cursor: pointer; transition: all .25s; }
.sdot:hover { background: var(--or-mid); transform: scale(1.2); }
.sdot.done   { background: var(--or-mid); }
.sdot.active { background: var(--or); width: 26px; border-radius: 5px; }

/* ===== 完了ポップアップ ===== */
.popup-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.popup-overlay.show { opacity: 1; pointer-events: all; }
.popup-overlay.hidden { display: none; }

.popup-content {
  background: #fff; border-radius: 20px; padding: 40px 36px;
  text-align: center; max-width: 420px; width: 90%;
  border-top: 6px solid var(--or);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: popIn .45s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
@keyframes popIn { from{transform:scale(.8) translateY(20px);opacity:0} to{transform:scale(1);opacity:1} }
.popup-content h2 {
  font-size: 24px; font-weight: 900; margin: 12px 0 10px;
  background: linear-gradient(135deg,var(--or),var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.popup-content p { font-size: 15px; color: var(--txt2); line-height: 1.8; margin-bottom: 22px; }
.close-btn { position: absolute; top: 14px; right: 18px; background: none; border: none; font-size: 24px; cursor: pointer; color: #ccc; }
.close-btn:hover { color: var(--or); }

/* ===== スクロールバー ===== */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,var(--or),var(--gold)); border-radius: 4px; }

/* ===== セーブボタン ===== */
.save-btn {
  width: 38px; height: 38px; flex-shrink: 0;
  background: rgba(232,112,26,.1);
  border: 1.5px solid rgba(232,112,26,.35);
  border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--or); font-size: 15px;
  transition: all .2s;
}
.save-btn:hover { background: var(--or); color: #fff; }