/* The RocSite Quest - dialogue sheet, stamp, title and ending */

/* ---------- dialogue sheet ---------- */
.sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 20; width: min(560px, 100%);
  transform: translate(-50%, 110%); transition: transform 0.38s cubic-bezier(.2, 1.1, .3, 1);
  padding: 16px calc(16px + var(--sr)) calc(16px + var(--sb)) calc(16px + var(--sl));
  background: linear-gradient(180deg, rgba(36, 26, 32, 0.92), rgba(22, 16, 20, 0.97));
  border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.sheet.on { transform: translate(-50%, 0); }
.sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.portrait {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid var(--gold2); box-shadow: 0 0 0 4px rgba(255, 179, 87, 0.15), 0 6px 16px rgba(0, 0, 0, 0.4);
  margin-top: -34px; background: #20323a;
}
.who b { display: block; font-size: 18px; font-family: var(--serif); letter-spacing: 0.01em; }
.who small { display: block; font-size: 14px; color: var(--muted); }
.line { margin: 4px 0 14px; font-size: 17px; line-height: 1.5; color: var(--ink); min-height: 3em; cursor: pointer; }
.reading { display: none; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin: 4px 0 6px; border-radius: 12px; background: rgba(15, 29, 34, 0.9); border: 1px solid rgba(111, 216, 204, 0.3); }
.reading.on { display: flex; }
.reading .tab { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); width: 100%; }
.reading .k { font-size: 16px; color: #b9d4cf; }
.reading .v { font-size: 22px; font-weight: 800; }
.reading .v.warn { color: var(--warn); } .reading .v.ok { color: var(--ok); }
.choices { display: grid; gap: 8px; opacity: 0; transform: translateY(6px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.choices.on { opacity: 1; transform: none; pointer-events: auto; }
.choice {
  min-height: 52px; padding: 12px 16px; border-radius: 14px; text-align: left; font-size: 17px; font-weight: 650;
  background: rgba(255, 240, 220, 0.08); border: 1px solid var(--line); color: var(--ink);
}
.choice:first-child { background: linear-gradient(180deg, #ffcf86, #f5a54a); color: #2a1608; border: 0; }
.choice.bad { background: linear-gradient(180deg, #ff9d7e, #e8694a); color: #2a0e06; border: 0; }
.choice.good { background: linear-gradient(180deg, #a6f3c5, #63cf93); color: #062a14; border: 0; }
.choice.quiet { background: transparent; color: var(--muted); }
.choice:active { transform: scale(0.98); }
.sheet[data-npc="atom"] .portrait { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(111, 216, 204, 0.18), 0 0 22px rgba(111, 216, 204, 0.45); }

/* ---------- Rex's stamp ---------- */
.stamp { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 25; }
.stamp div {
  opacity: 0; padding: 14px 26px 10px; border: 6px solid #d9452f; border-radius: 14px; color: #d9452f; text-align: center;
  background: rgba(255, 248, 238, 0.9); transform: rotate(-12deg) scale(3); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.stamp b { display: block; font: 900 46px/1 var(--serif); letter-spacing: 0.08em; }
.stamp small { display: block; font-size: 16px; font-weight: 700; margin-top: 4px; letter-spacing: 0.04em; }
.stamp.go div { animation: stamp 2.6s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-18deg) scale(3); } 14% { opacity: 1; transform: rotate(-12deg) scale(0.92); } 20% { transform: rotate(-12deg) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: rotate(-12deg) scale(1.04); } }

/* ---------- title ---------- */
.title-screen {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(96px + var(--st)) calc(22px + var(--sr)) calc(34px + var(--sb)) calc(22px + var(--sl));
  background: linear-gradient(180deg, rgba(30, 18, 34, 0.55) 0%, rgba(30, 18, 34, 0) 38%, rgba(30, 18, 34, 0) 55%, rgba(24, 14, 20, 0.82) 100%);
  opacity: 0; transition: opacity 0.7s ease;
}
.title-screen.on { opacity: 1; }
.title-screen.leaving { opacity: 0; pointer-events: none; }
.title-block { text-align: center; text-shadow: 0 2px 18px rgba(60, 20, 30, 0.55); }
.kicker { margin: 0 0 8px; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold2); font-weight: 700; }
.title-screen h1 { margin: 0; font: 600 clamp(42px, 12vw, 84px)/1.0 var(--serif); letter-spacing: -0.01em; color: #fffaf0; }
.title-screen .sub { margin: 12px 0 0; font-size: 18px; color: var(--ink2); }
.title-screen .sub em { font-family: var(--serif); font-style: italic; }
.title-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 34px; border-radius: 29px; border: 0;
  background: radial-gradient(circle at 35% 25%, #ffe6b4, #ffb357 55%, #e98a2c); color: #2a1608; font-size: 19px; font-weight: 800;
  text-decoration: none; box-shadow: 0 10px 34px rgba(233, 138, 44, 0.5); animation: glowPulse 2.2s ease-in-out infinite;
}
@keyframes glowPulse { 50% { box-shadow: 0 10px 46px rgba(255, 179, 87, 0.85); transform: translateY(-1px); } }
.ghost { min-height: 48px; padding: 0 22px; border-radius: 24px; background: rgba(255, 240, 220, 0.1); border: 1px solid var(--line); font-size: 16px; font-weight: 650; }
.howto { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 6px 0 0; font-size: 14px; color: var(--ink2); opacity: 0.9; }
.howto span::before { content: "\25C6"; color: var(--gold); font-size: 10px; margin-right: 6px; vertical-align: 2px; }

/* ---------- ending ---------- */
.ending {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: end center; overflow-y: auto;
  padding: calc(70px + var(--st)) 16px calc(16px + var(--sb));
  background: linear-gradient(180deg, rgba(20, 14, 34, 0) 0%, rgba(20, 14, 34, 0.35) 45%, rgba(16, 10, 22, 0.8) 100%);
  opacity: 0; transition: opacity 1.2s ease;
}
.ending.on { opacity: 1; }
.ending .card {
  width: min(520px, 100%); padding: 22px 20px 18px; border-radius: 24px; text-align: center;
  background: linear-gradient(180deg, rgba(38, 26, 40, 0.88), rgba(22, 14, 24, 0.95)); border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transform: translateY(30px); transition: transform 1s cubic-bezier(.2, 1.2, .3, 1);
}
.ending.on .card { transform: none; }
.ending h2 { margin: 0 0 14px; font: 600 30px/1.15 var(--serif); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; }
.stats div { padding: 10px 4px; border-radius: 14px; background: rgba(255, 240, 220, 0.07); }
.stats b { display: block; font-size: 20px; color: var(--gold2); }
.stats small { display: block; font-size: 13px; color: var(--muted); }
.ending blockquote { margin: 0 0 16px; font: italic 19px/1.45 var(--serif); color: var(--ink); }
.ending cite { display: block; margin-top: 6px; font: 700 14px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; font-style: normal; color: var(--teal); }
.ending cite::before { content: "\2014\00a0"; }
.ending .cta { width: 100%; font-size: 17px; padding: 0 16px; }
.ending .ghost { margin-top: 10px; width: 100%; }
.credits { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

@media (min-width: 900px) {
  .title-screen { padding-top: calc(120px + var(--st)); }
  .ending { place-items: center; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .title-screen { padding-top: calc(64px + var(--st)); padding-bottom: calc(14px + var(--sb)); justify-content: center; gap: 18px; }
  .howto { display: none; }
  .title-screen h1 { font-size: 44px; }
  .action { height: 80px; min-width: 80px; }
  .ending .card { padding: 14px; } .ending h2 { font-size: 24px; margin-bottom: 8px; } .ending blockquote { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01s !important; transition-duration: 0.01s !important; } }