/* 三国群雄志 — cinematics styles (ink overlays, event cards, advisor banner) */

/* ── ink overlay (prologue / ending) ── */
.cine-ink {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: #0e0a06;
  opacity: 0; transition: opacity .5s ease;
  font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  cursor: pointer;
}
.cine-ink.cine-show { opacity: 1; }
.cine-ink-wash { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(74,52,26,.5) 0%, transparent 58%),
    radial-gradient(ellipse at 18% 88%, rgba(46,34,18,.55) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 75%, rgba(40,28,14,.45) 0%, transparent 45%);
}
.cine-win .cine-ink-wash {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(120,86,30,.55) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 85%, rgba(70,52,22,.5) 0%, transparent 50%);
}
.cine-lose { background: #0a0808; }
.cine-lose .cine-ink-wash {
  background:
    radial-gradient(ellipse at 50% 25%, rgba(74,28,24,.45) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 95%, rgba(30,20,16,.6) 0%, transparent 55%);
}
.cine-ink-body {
  position: relative; max-width: 640px; width: calc(100% - 48px);
  text-align: center; padding: 24px 8px;
}
.cine-ink-title { display: flex; align-items: center; gap: 18px; justify-content: center;
  margin-bottom: 34px; animation: cine-title-in .9s ease-out both; }
.cine-ink-title h2 {
  color: #d9a441; font-size: clamp(26px, 5.5vw, 42px); font-weight: 900;
  letter-spacing: 10px; text-shadow: 0 3px 18px rgba(202, 138, 42, .35);
  white-space: nowrap;
}
.cine-lose .cine-ink-title h2 { color: #b8563c; text-shadow: 0 3px 18px rgba(140,50,40,.4); }
.cine-rule { flex: 0 1 90px; height: 1px;
  background: linear-gradient(90deg, transparent, #8a6a30, transparent); }
@keyframes cine-title-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.cine-ink-lines { min-height: 200px; }
.cine-line {
  color: #e8dcc0; font-size: clamp(16px, 2.6vw, 20px); line-height: 2.1;
  letter-spacing: 2px; margin: 0 0 6px;
  animation: cine-line-in .45s ease-out both;
}
@keyframes cine-line-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cine-ink-hint {
  margin-top: 26px; color: #6a5e49; font-size: 12px; letter-spacing: 4px;
  opacity: 0; transition: opacity .6s;
}
.cine-done .cine-ink-hint { opacity: 1; animation: cine-pulse 2.2s ease-in-out infinite; }
@keyframes cine-pulse { 0%,100% { opacity: .35; } 50% { opacity: .9; } }
.cine-skip {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 18px;
  background: rgba(58,45,30,.6); border: 1px solid #6b5634; color: #b3a584;
  font-size: 13px; letter-spacing: 2px; padding: 6px 16px; border-radius: 20px;
}
.cine-skip:hover { color: #e8dcc0; border-color: #caa84e; background: rgba(77,60,39,.8); }

/* ── event card modal ── */
.cine-eventwrap {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 7, 4, .78); padding: 18px;
  opacity: 0; transition: opacity .35s ease;
  font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
}
.cine-eventwrap.cine-show { opacity: 1; }
.cine-event {
  width: min(560px, 100%); max-height: calc(100vh - 36px);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #221a10, #1b140c);
  border: 1px solid #caa84e; border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.7), 0 0 26px rgba(202,138,42,.12);
  transform: translateY(14px) scale(.98); transition: transform .35s ease;
}
.cine-show .cine-event { transform: none; }
.cine-event-art { width: 100%; height: 150px; display: block; flex: none; }
.cine-event-body { padding: 14px 22px 20px; overflow-y: auto; }
.cine-event-title h3 {
  color: #d9a441; font-size: 24px; font-weight: 900; letter-spacing: 6px;
  text-align: center; text-shadow: 0 2px 10px rgba(202,138,42,.3);
}
.cine-event-rule {
  height: 2px; margin: 10px auto 14px; width: 150px;
  background: linear-gradient(90deg, transparent, #d9a441 30%, #d9a441 70%, transparent);
  position: relative;
}
.cine-event-rule::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  background: #d9a441; transform: translate(-50%,-50%) rotate(45deg);
}
.cine-event-text {
  color: #d6c8a4; font-size: 15px; line-height: 1.95; letter-spacing: 1px;
  margin-bottom: 16px; text-align: justify;
}
.cine-event-choices { display: flex; flex-direction: column; gap: 9px; }
.cine-choice {
  width: 100%; text-align: center; font-size: 15px; letter-spacing: 2px;
  padding: 11px 16px; border-radius: 8px;
  background: #2e2415; border: 1px solid #6b5634; color: #e8dcc0;
}
.cine-choice:hover { background: #3d2f1c; border-color: #caa84e; }
.cine-choice-first { background: #6e1f1f; border-color: #b8563c; }
.cine-choice-first:hover { background: #8a2828; border-color: #e2a05c; }
.cine-event-result {
  color: #c9b98e; font-size: 14px; line-height: 1.9; letter-spacing: 1px;
  padding: 11px 14px; margin-bottom: 4px;
  background: rgba(217,164,65,.07); border-left: 3px solid #d9a441; border-radius: 0 6px 6px 0;
  animation: cine-line-in .4s ease-out both;
}

/* ── advisor banner ── */
.cine-advisor {
  position: fixed; left: 12px; bottom: 122px; z-index: 7;
  display: flex; align-items: flex-end; gap: 10px;
  max-width: min(420px, calc(100vw - 24px));
  opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s;
  pointer-events: auto;
  font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
}
.cine-advisor.cine-show { opacity: 1; transform: none; }
.cine-advisor-face {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  border: 2px solid #caa84e; background: #241a10;
  box-shadow: 0 4px 14px rgba(0,0,0,.55);
}
.cine-advisor-bubble {
  position: relative; background: linear-gradient(180deg, #2c2214, #241b10);
  border: 1px solid #8a6a30; border-radius: 10px 10px 10px 3px;
  padding: 8px 30px 9px 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.cine-advisor-bubble::before {
  content: ''; position: absolute; left: -7px; bottom: 10px;
  border: 7px solid transparent; border-right-color: #8a6a30; border-left-width: 0;
}
.cine-advisor-name { color: #d9a441; font-size: 12px; font-weight: 900; letter-spacing: 2px; margin-bottom: 2px; }
.cine-advisor-text { color: #e0d3ae; font-size: 13.5px; line-height: 1.7; letter-spacing: .5px; }
.cine-advisor-x {
  position: absolute; top: 2px; right: 4px; padding: 2px 6px;
  background: none; border: none; color: #8d8068; font-size: 15px; line-height: 1;
}
.cine-advisor-x:hover { color: #e8dcc0; background: none; border: none; }

@media (max-width: 640px) {
  .cine-advisor { bottom: 82px; }
  .cine-event-art { height: 124px; }
  .cine-event-title h3 { font-size: 20px; letter-spacing: 4px; }
  .cine-ink-lines { min-height: 160px; }
}