/* ============================================================
   cinema.css — 「セル座」ロビー（Excelアニメ映画館ハブ）
   世界観: 夜の小さな映画館 × レトロゲーム(RPGウィンドウ/ドット字)
   ============================================================ */

.cz-body {
  margin: 0;
  background: #12151d;
  color: #e8e6df;
  font-family: "Noto Sans JP", sans-serif;
}

/* ============ 入場ゲート ============ */
.cz-gate {
  position: fixed; inset: 0; z-index: 1000;
  background: radial-gradient(ellipse at 50% 30%, #1c2230 0%, #0c0e14 70%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease;
}
.cz-gate.out { opacity: 0; pointer-events: none; }
.cz-gate-panel {
  text-align: center; padding: 40px 30px;
  border: 2px solid #3a4256; border-radius: 10px;
  background: rgba(10, 12, 18, .8);
  box-shadow: 0 0 60px rgba(255, 213, 79, .08), inset 0 0 30px rgba(0,0,0,.5);
  max-width: 340px; width: 88%;
}
.cz-gate-kicker {
  font-family: "DotGothic16", monospace;
  font-size: 12px; letter-spacing: .5em; color: #ffd54f;
}
.cz-gate-title {
  font-family: "DotGothic16", monospace;
  font-size: 44px; margin: 10px 0 6px; color: #fff;
  text-shadow: 0 0 18px rgba(255, 213, 79, .55);
}
.cz-gate-sub { font-size: 13px; color: #9aa3b5; line-height: 1.9; margin-bottom: 26px; }
.cz-gate-btn {
  font-family: "DotGothic16", monospace;
  font-size: 16px; padding: 12px 34px;
  background: #ffd54f; color: #1a1405;
  border: none; border-radius: 4px; cursor: pointer;
  box-shadow: 0 0 22px rgba(255, 213, 79, .35);
  transition: transform .15s, box-shadow .15s;
}
.cz-gate-btn:hover { transform: scale(1.05); box-shadow: 0 0 32px rgba(255, 213, 79, .55); }
.cz-gate-note { font-size: 11px; color: #5d6577; margin-top: 16px; }

/* ============ ロビー全体 ============ */
.cz-main { min-height: 100vh; }
.cz-room {
  max-width: 980px; margin: 0 auto;
  padding: 40px 18px 80px;
}

/* ============ 電飾看板 ============ */
.cz-marquee {
  text-align: center; margin-bottom: 34px;
  padding: 26px 16px 22px;
  border: 3px solid #ffd54f; border-radius: 12px;
  background:
    radial-gradient(circle at 8px 8px, rgba(255,213,79,.9) 3px, transparent 4px),
    linear-gradient(180deg, #1d2330, #141924);
  background-size: 28px 28px, cover;
  box-shadow: 0 0 40px rgba(255, 213, 79, .18), inset 0 0 40px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 4px;
}
.cz-marquee-kicker {
  font-family: "DotGothic16", monospace;
  font-size: 13px; letter-spacing: .6em; color: #ffd54f;
}
.cz-marquee-name {
  font-family: "DotGothic16", monospace;
  font-size: 58px; line-height: 1.2; color: #fff;
  text-shadow: 0 0 24px rgba(255, 213, 79, .6), 0 0 60px rgba(255, 213, 79, .25);
}
.cz-marquee-sub { font-size: 11px; letter-spacing: .35em; color: #7c8698; }

/* ============ RPG風メッセージウィンドウ ============ */
.cz-window {
  position: relative;
  border: 3px solid #e8e6df; border-radius: 8px;
  background: rgba(8, 10, 16, .92);
  box-shadow: 0 0 0 3px #12151d, 0 0 0 5px #4a5266, 0 8px 24px rgba(0,0,0,.5);
  padding: 22px 26px 26px;
  min-height: 96px;
  cursor: pointer;
  max-width: 760px; margin: 0 auto;
}
.cz-window-name {
  position: absolute; top: -14px; left: 18px;
  font-family: "DotGothic16", monospace;
  font-size: 13px; color: #ffd54f;
  background: #12151d; padding: 2px 12px;
  border: 2px solid #e8e6df; border-radius: 4px;
}
.cz-window-stage {
  font-family: "DotGothic16", monospace;
  font-size: 17px; line-height: 2.0; color: #f2f0e8;
  min-height: 68px;
}
.cz-next {
  position: absolute; right: 18px; bottom: 10px;
  color: #ffd54f; font-size: 14px;
  animation: cz-bob 0.8s ease-in-out infinite;
}
@keyframes cz-bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(4px);} }

.cz-skip-wrap { text-align: right; max-width: 760px; margin: 8px auto 0; }
.cz-skip-btn {
  font-family: "DotGothic16", monospace;
  font-size: 12px; color: #7c8698;
  background: none; border: 1px solid #3a4256; border-radius: 4px;
  padding: 4px 14px; cursor: pointer;
}
.cz-skip-btn:hover { color: #ffd54f; border-color: #ffd54f; }

/* ============ 上映セクション ============ */
.cz-screen { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; margin-top: 46px; }
.cz-screen.on { opacity: 1; transform: translateY(0); }

.cz-section-title {
  font-family: "DotGothic16", monospace;
  font-size: 18px; color: #ffd54f; letter-spacing: .15em;
  margin: 0 0 18px; display: flex; align-items: center; gap: 10px;
}
.cz-section-title--soon { color: #7c8698; margin-top: 52px; }
.cz-blink { color: #ff5252; font-size: 12px; animation: cz-blink 1.2s steps(2) infinite; }
@keyframes cz-blink { 50% { opacity: 0; } }

/* ---- ポスター ---- */
.cz-posters { display: flex; flex-wrap: wrap; gap: 20px; }
.cz-poster {
  --accent: #69f0ae;
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  width: 300px; padding: 26px 22px 20px;
  border: 2px solid var(--accent); border-radius: 10px;
  background: linear-gradient(165deg, #1a2029 0%, #10141c 70%);
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 0 40px rgba(0,0,0,.45);
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
a.cz-poster:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 10px 40px color-mix(in srgb, var(--accent) 40%, transparent);
}
.cz-poster-badge {
  position: absolute; top: -12px; right: 14px;
  font-family: "DotGothic16", monospace;
  font-size: 12px; padding: 2px 12px;
  background: var(--accent); color: #0c0e14; border-radius: 4px;
}
.cz-poster-badge--soon { background: #3a4256; color: #9aa3b5; }
.cz-poster-icon { font-size: 52px; line-height: 1; text-align: center; margin: 8px 0 4px;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 55%, transparent)); }
.cz-poster-title {
  font-family: "DotGothic16", monospace;
  font-size: 22px; color: #fff; text-align: center;
}
.cz-poster-catch {
  font-size: 13px; color: var(--accent); text-align: center;
  min-height: 20px; letter-spacing: .05em;
}
.cz-poster-meta { font-size: 11px; color: #7c8698; text-align: center; margin-top: 4px; }
.cz-poster-desc { font-size: 12px; color: #b9bfcc; line-height: 1.8; margin-top: 6px; }
.cz-poster-enter {
  font-family: "DotGothic16", monospace;
  font-size: 14px; color: #0c0e14; text-align: center;
  background: var(--accent); border-radius: 4px;
  padding: 8px 0; margin-top: 12px;
}

/* 近日公開は暗く・触れない */
.cz-poster--soon { opacity: .55; filter: saturate(.4); width: 220px; padding-bottom: 26px; }

.cz-lobby-note {
  margin-top: 56px; text-align: center;
  font-family: "DotGothic16", monospace;
  font-size: 13px; color: #7c8698; line-height: 2.2;
}

/* ============ レスポンシブ ============ */
@media (max-width: 700px) {
  .cz-marquee-name { font-size: 40px; }
  .cz-posters { justify-content: center; }
  .cz-poster { width: 100%; max-width: 340px; }
  .cz-poster--soon { width: 46%; min-width: 150px; }
}