:root {
  --bg: #0a0e17;
  --bg2: #111520;
  --bg3: #181d2e;
  --card: #1a2035;
  --card-hover: #1f2840;
  --accent: #e63950;
  --accent2: #ff6b35;
  --text: #f0f2f8;
  --text2: #8892a4;
  --text3: #5a6478;
  --border: #252d42;
  --live: #00e676;
  --gold: #ffd700;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
}

/* ── HEADER ── */
header {
  position: sticky; top:0; z-index:100;
  background: rgba(10,14,23,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.logo {
  font-family: 'Space Mono', monospace;
  font-size: 20px; font-weight:700; letter-spacing: -0.5px;
  display: flex; align-items: center; gap: 8px;
}
.logo span { color: var(--accent); }
.logo-dot {
  width:8px; height:8px; border-radius:50%;
  background: var(--accent); animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)}
}
.live-badge {
  font-family: 'Space Mono', monospace;
  font-size:10px; font-weight:700;
  background: var(--live); color:#000;
  padding:2px 7px; border-radius:3px; letter-spacing:1px;
}
nav { display:flex; gap:4px; }
nav button {
  background:none; border:none; color:var(--text2);
  font-family:'Noto Sans JP',sans-serif;
  font-size:13px; padding:6px 14px; border-radius:6px;
  cursor:pointer; transition:all .2s;
}
nav button:hover, nav button.active { background: var(--bg3); color:var(--text); }
nav button.active { border-bottom: 2px solid var(--accent); border-radius: 6px 6px 0 0; }

/* ── API BANNER ── */
#api-banner {
  background: linear-gradient(135deg, #1a1025, #0f1a2e);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display: flex; align-items:center; gap:12px; flex-wrap:wrap;
}
#api-banner .key-icon { font-size:18px; }
#api-banner p { color:var(--text2); font-size:13px; flex:1; min-width:200px; }
#api-banner p a { color:var(--accent); text-decoration:none; }
#api-input-wrap { display:flex; gap:8px; }
#api-key-input {
  background: var(--bg3); border:1px solid var(--border);
  color:var(--text); padding:8px 14px; border-radius:6px;
  font-size:13px; width:260px; outline:none;
  font-family: 'Space Mono', monospace;
}
#api-key-input:focus { border-color:var(--accent); }
#api-key-input::placeholder { color:var(--text3); }
#save-key-btn {
  background:var(--accent); color:#fff; border:none;
  padding:8px 16px; border-radius:6px; cursor:pointer;
  font-size:13px; font-weight:500; transition: opacity .2s;
}
#save-key-btn:hover { opacity:.85; }
#api-status { font-size:12px; color:var(--live); display:none; }

/* ── HERO ── */
.hero {
  background: var(--bg2); border-bottom: 1px solid var(--border);
  padding: 48px 24px 40px; text-align:center;
}
.hero-title {
  font-family:'Space Mono',monospace;
  font-size: clamp(26px,4vw,42px); font-weight:700;
  letter-spacing:-1px; margin-bottom:8px;
}
.hero-title span { color:var(--accent); }
.hero-sub { color:var(--text2); font-size:14px; margin-bottom:28px; }
.search-bar {
  display:flex; max-width:580px; margin:0 auto;
  border:1.5px solid var(--border); border-radius:10px;
  overflow:hidden; transition: border-color .2s;
}
.search-bar:focus-within { border-color:var(--accent); }
#search-input {
  flex:1; background:var(--bg3); border:none;
  color:var(--text); font-size:15px; padding:14px 18px; outline:none;
  font-family:'Noto Sans JP',sans-serif;
}
#search-input::placeholder { color:var(--text3); }
#search-btn {
  background:var(--accent); border:none; color:#fff;
  padding:0 22px; cursor:pointer; font-size:18px; transition:opacity .2s;
}
#search-btn:hover { opacity:.85; }

/* ── STATS BAR ── */
.stats-bar {
  display:flex; gap:24px; padding:14px 24px;
  background:var(--bg2); border-bottom:1px solid var(--border);
  overflow-x:auto; white-space:nowrap;
}
.stat-item { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.stat-num { font-family:'Space Mono',monospace; font-size:18px; font-weight:700; color:var(--accent); }
.stat-label { font-size:12px; color:var(--text2); }
.stat-div { width:1px; height:28px; background:var(--border); flex-shrink:0; }

/* ── MAIN ── */
main { padding: 28px 24px; max-width:1400px; margin:0 auto; }
section { display:none; }
section.active { display:block; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.section-title {
  font-family:'Space Mono',monospace; font-size:16px; font-weight:700;
  display:flex; align-items:center; gap:10px;
}
.section-title .dot { width:10px; height:10px; border-radius:50%; background:var(--accent); }
.section-badge {
  font-size:11px; color:var(--text2); background:var(--bg3);
  padding:3px 10px; border-radius:20px; border:1px solid var(--border);
}

/* ── MOVIE GRID ── */
.movie-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
  gap:16px;
}
.movie-card {
  background:var(--card); border-radius:10px; overflow:hidden;
  cursor:pointer; border:1px solid var(--border);
  transition:transform .2s, border-color .2s, background .2s; position:relative;
}
.movie-card:hover { transform:translateY(-4px); border-color:var(--accent); background:var(--card-hover); }
.movie-poster { width:100%; aspect-ratio:2/3; object-fit:cover; display:block; background:var(--bg3); }
.movie-poster-placeholder {
  width:100%; aspect-ratio:2/3;
  background: linear-gradient(135deg, var(--bg3) 0%, #0d1525 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:32px; color:var(--text3);
}
.movie-info { padding:10px 12px; }
.movie-title {
  font-size:13px; font-weight:500; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
  margin-bottom:6px; line-height:1.4;
}
.movie-meta { display:flex; align-items:center; justify-content:space-between; }
.movie-year { font-size:11px; color:var(--text3); }
.movie-rating {
  font-family:'Space Mono',monospace; font-size:11px;
  font-weight:700; color:var(--gold);
}
.movie-rating::before { content:'★ '; }
.rank-badge {
  position:absolute; top:8px; left:8px;
  font-family:'Space Mono',monospace; font-size:11px; font-weight:700;
  background:var(--accent); color:#fff;
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.now-badge {
  position:absolute; top:8px; right:8px;
  font-size:9px; font-weight:700;
  background:var(--live); color:#000;
  padding:2px 6px; border-radius:3px; letter-spacing:0.5px;
}

/* ── LOADING / ERROR ── */
.loading {
  display:flex; align-items:center; justify-content:center;
  padding:60px; gap:12px; color:var(--text2);
}
.spinner {
  width:20px; height:20px; border:2px solid var(--border);
  border-top-color:var(--accent); border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }
.error-msg { text-align:center; padding:40px; color:var(--text2); }
.error-msg .e-icon { font-size:32px; margin-bottom:10px; }
.chip {
  font-size:11px; padding:3px 10px; border-radius:20px;
  border:1px solid var(--border); color:var(--text2);
}
.chip.accent { border-color:var(--accent); color:var(--accent); }

/* ══════════════════════════════════
   詳細ページ
══════════════════════════════════ */
#detail-page {
  display: none;
  position: fixed; inset:0; z-index:300;
  background: var(--bg);
  overflow-y: auto;
}
#detail-page.open { display:block; }

#detail-header {
  position: sticky; top:0; z-index:10;
  background: rgba(10,14,23,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex; align-items: center; gap:16px;
  height: 56px;
}
#detail-back-btn {
  background: var(--bg3); border:1px solid var(--border);
  color:var(--text); padding:6px 16px; border-radius:6px;
  cursor:pointer; font-size:13px; display:flex;
  align-items:center; gap:6px; transition:border-color .2s;
}
#detail-back-btn:hover { border-color:var(--accent); }
#detail-header-title {
  font-family:'Space Mono',monospace;
  font-size:14px; color:var(--text2);
}

/* バックドロップ */
.dp-backdrop-wrap {
  position:relative; width:100%; height:420px; overflow:hidden;
}
.dp-backdrop-img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(0.5);
}
.dp-backdrop-gradient {
  position:absolute; inset:0;
  background: linear-gradient(to bottom, transparent 30%, var(--bg) 100%);
}

/* メインレイアウト */
.dp-main {
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:40px;
  max-width:1100px; margin:-140px auto 0;
  padding:0 32px 60px;
  position:relative; z-index:2;
}

/* 左カラム */
.dp-left { display:flex; flex-direction:column; gap:20px; }
.dp-poster {
  width:100%; border-radius:12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  border:1px solid var(--border);
}
.dp-poster-placeholder {
  width:100%; aspect-ratio:2/3; border-radius:12px;
  background:var(--bg3); display:flex;
  align-items:center; justify-content:center;
  font-size:48px; border:1px solid var(--border);
}
.dp-score-wrap {
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; padding:14px 16px;
}
.dp-score-label { display:flex; flex-direction:column; gap:2px; }
.dp-info-table {
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; overflow:hidden;
}
.dp-info-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 14px; border-bottom:1px solid var(--border);
}
.dp-info-row:last-child { border-bottom:none; }
.dp-info-key { font-size:12px; color:var(--text3); }
.dp-info-val { font-size:12px; color:var(--text); text-align:right; max-width:130px; }

/* 右カラム */
.dp-right { padding-top:100px; }
.dp-genres { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.dp-title {
  font-family:'Space Mono',monospace;
  font-size:clamp(22px,3vw,36px); font-weight:700;
  letter-spacing:-0.5px; margin-bottom:4px; line-height:1.2;
}
.dp-original-title { font-size:14px; color:var(--text3); margin-bottom:8px; }
.dp-tagline {
  font-size:14px; color:var(--accent); font-style:italic;
  margin-bottom:20px; border-left:3px solid var(--accent);
  padding-left:12px;
}
.dp-staff-grid {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px;
}
.dp-staff-item {
  display:flex; flex-direction:column; gap:2px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:8px; padding:8px 14px;
}
.dp-staff-role { font-size:10px; color:var(--accent); letter-spacing:0.5px; }
.dp-staff-name { font-size:13px; color:var(--text); font-weight:500; }

/* セクション */
.dp-section { margin-bottom:32px; }
.dp-section-title {
  font-family:'Space Mono',monospace; font-size:12px;
  color:var(--text3); letter-spacing:2px; text-transform:uppercase;
  margin-bottom:14px; padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.dp-overview { color:var(--text2); line-height:1.9; font-size:14px; }

/* 予告編 */
.dp-trailers { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; }
.dp-trailer-card {
  position:relative; flex-shrink:0; width:200px;
  border-radius:8px; overflow:hidden; cursor:pointer;
  border:1px solid var(--border); transition:border-color .2s;
}
.dp-trailer-card:hover { border-color:var(--accent); }
.dp-trailer-thumb { width:100%; height:112px; object-fit:cover; display:block; }
.dp-trailer-play {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-60%);
  width:40px; height:40px; border-radius:50%;
  background:rgba(230,57,80,0.9);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:#fff;
}
.dp-trailer-name {
  padding:6px 10px; font-size:11px; color:var(--text2);
  background:var(--card);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* キャスト */
.dp-cast-scroll { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; }
.dp-cast-card {
  flex-shrink:0; width:90px; text-align:center; cursor:default;
}
.dp-cast-img {
  width:72px; height:72px; border-radius:50%;
  object-fit:cover; display:block; margin:0 auto 8px;
  border:2px solid var(--border);
}
.dp-cast-placeholder {
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:700;
}
.dp-cast-name { font-size:12px; color:var(--text); font-weight:500; line-height:1.3; }
.dp-cast-char { font-size:11px; color:var(--text3); margin-top:2px; line-height:1.3; }

/* 関連映画 */
.dp-similar-scroll { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; }
.dp-similar-card {
  flex-shrink:0; width:100px; cursor:pointer;
  transition:transform .2s;
}
.dp-similar-card:hover { transform:translateY(-3px); }
.dp-similar-poster {
  width:100%; aspect-ratio:2/3; object-fit:cover;
  border-radius:8px; display:block;
  border:1px solid var(--border); margin-bottom:6px;
}
.dp-similar-placeholder {
  background:var(--bg3); display:flex;
  align-items:center; justify-content:center; font-size:20px;
}
.dp-similar-title {
  font-size:11px; color:var(--text); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.dp-similar-rating { font-size:10px; color:var(--gold); margin-top:3px; }

/* ── 予告編オーバーレイ ── */
#trailer-overlay {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,0.92); align-items:center; justify-content:center;
}
#trailer-overlay.open { display:flex; }
#trailer-frame {
  width:min(90vw,900px); height:min(50.6vw,506px);
  border:none; border-radius:10px;
}
#trailer-close {
  position:absolute; top:20px; right:24px;
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text); width:36px; height:36px; border-radius:50%;
  cursor:pointer; font-size:16px; display:flex;
  align-items:center; justify-content:center;
}

/* ── FOOTER ── */
footer {
  text-align:center; padding:32px 24px; color:var(--text3);
  font-size:12px; border-top:1px solid var(--border); margin-top:40px;
}
footer a { color:var(--accent); text-decoration:none; }
footer .tmdb-logo { font-family:'Space Mono',monospace; font-size:11px; color:var(--text3); margin-top:8px; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .dp-main { grid-template-columns:1fr; padding:0 16px 40px; margin-top:-80px; }
  .dp-left { flex-direction:row; flex-wrap:wrap; }
  .dp-poster { width:140px; flex-shrink:0; }
  .dp-right { padding-top:0; }
  .dp-backdrop-wrap { height:240px; }
}
@media(max-width:600px){
  header { padding:0 14px; }
  nav button { font-size:11px; padding:6px 8px; }
  main { padding:20px 14px; }
  .movie-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
  #api-key-input { width:100%; }
}