/* COUP DE FOUDRE : TIC-TAC ET CHASSE D'EAU — pastel romance, slightly unhinged. */
:root {
  --pink: #ff5fa2;
  --pink-soft: #ffd3e6;
  --cream: #fff8f1;
  --ink: #3a2340;
  --teal: #38d6c4;
  --orange: #ff8a3d;
  --shadow: 0 10px 30px rgba(60, 20, 60, 0.35);
  --font: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --title: 'Georgia', 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b0f20; font-family: var(--font); color: var(--ink); }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* 16:9 stage, letterboxed; everything inside is sized in % or with --u (1% of stage width) */
#stage { position: absolute; left: 50%; top: 50%; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); overflow: hidden;
  container-type: inline-size; background: #2a1830; }
#stage.shake { animation: shake 0.5s; }
@keyframes shake { 20% { transform: translate(-51%, -50%); } 40% { transform: translate(-49%, -51%); } 60% { transform: translate(-50.6%, -49.4%); } 80% { transform: translate(-49.5%, -50.5%); } }

/* ------------------------------------------------------------ backgrounds */
.bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.9s ease; }
.bg.on { opacity: 1; }
.bg.night { filter: brightness(0.42) saturate(0.85) hue-rotate(195deg) contrast(1.1); }
.bg.fallback-brocante { background-image: linear-gradient(180deg, #bfe6ff 0%, #fff1c9 55%, #d9b98a 56%, #a8875c 100%); }
.bg.fallback-atelier { background-image: linear-gradient(180deg, #5a3b2a 0%, #8a5a3c 60%, #3a2418 100%); }
.bg.fallback-bureau { background-image: radial-gradient(circle at 50% 35%, #3be3ff 0%, #20306a 45%, #0a0d1f 100%); }
.bg.fallback-toilettes { background-image: repeating-linear-gradient(90deg, #f4f1ea 0 40px, #e6dcc6 40px 80px); }
.bg.fallback-horloge { background-image: radial-gradient(circle at 50% 35%, #fff4d0 0 14%, #b98a3a 14.5% 16%, transparent 16.5%), linear-gradient(#ffb48a, #7a5aa0); }

/* ------------------------------------------------------------ characters */
#chars { position: absolute; inset: 0; pointer-events: none; }
.char { position: absolute; bottom: -7%; height: 90%; transform: translateX(-50%); transition: left 0.6s ease, opacity 0.45s ease, filter 0.3s ease, transform 0.3s ease;
  filter: drop-shadow(0 0 1.2cqw rgba(255, 255, 255, 0.35)) brightness(0.82) saturate(0.9); opacity: 0; }
.char.on { opacity: 1; }
.char.speaking { filter: drop-shadow(0 0 1.4cqw rgba(255, 220, 240, 0.7)) brightness(1); transform: translateX(-50%) scale(1.02); }
.char img { height: 100%; display: block; }
.char.small { height: 52%; bottom: 4%; }
.char.bounce { animation: bounce 0.35s; }
@keyframes bounce { 50% { transform: translateX(-50%) translateY(-2.5%) scale(1.02); } }
.char .ph { height: 100%; aspect-ratio: 3 / 4; border-radius: 40% 40% 8% 8%; display: flex; align-items: center; justify-content: center; font: 700 2.4cqw var(--title);
  color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); border: 0.3cqw dashed rgba(255, 255, 255, 0.7); }

/* ------------------------------------------------------------ effects */
#fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.heartfx { position: absolute; bottom: -5%; font-size: 3cqw; color: var(--pink); text-shadow: 0 0 1cqw #fff; animation: rise 2.6s ease-out forwards; }
@keyframes rise { to { transform: translateY(-110cqh) rotate(25deg); opacity: 0; } }
.lovepop { position: absolute; left: 7%; top: 13%; font: 800 2.4cqw var(--font); color: var(--pink); text-shadow: 0 0 0.6cqw #fff; animation: pop 1.6s ease-out forwards; }
.lovepop.minus { color: #6b5a7a; }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 20% { transform: scale(1.3); opacity: 1; } 100% { transform: translateY(-4cqw); opacity: 0; } }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#flash.go { animation: flash 0.7s ease-out; }
#flash.spark { animation: spark 0.9s steps(1); background: #fffbd0; }
@keyframes flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
@keyframes spark { 0%, 30%, 60% { opacity: 0.95; } 15%, 45%, 100% { opacity: 0; } }

/* ------------------------------------------------------------ dialogue box */
#play { position: absolute; inset: 0; }
#box { position: absolute; left: 4%; right: 4%; bottom: 3%; height: 25%; padding: 3.2% 3% 2% 3%; background: linear-gradient(180deg, rgba(255, 248, 241, 0.94), rgba(255, 228, 240, 0.94));
  border: 0.25cqw solid #fff; border-radius: 1.6cqw; box-shadow: var(--shadow), inset 0 0 0 0.2cqw var(--pink-soft); cursor: pointer; }
#name { position: absolute; left: 3%; top: -1.6cqw; padding: 0.4cqw 1.6cqw; border-radius: 1cqw; background: var(--pink); color: #fff; font: 700 1.7cqw var(--font);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); letter-spacing: 0.04em; }
#name:empty { display: none; }
#text { font-size: 1.85cqw; line-height: 1.45; white-space: pre-wrap; }
#text.narration { font-style: italic; color: #5a4060; }
#next { position: absolute; right: 2%; bottom: 6%; color: var(--pink); font-size: 1.4cqw; animation: nudge 0.9s infinite; opacity: 0; }
#next.on { opacity: 1; }
@keyframes nudge { 50% { transform: translateY(0.4cqw); } }

#choices { position: absolute; left: 50%; top: 31%; transform: translateX(-50%); width: 56%; display: flex; flex-direction: column; gap: 1.1cqw; z-index: 5; }
#choices button { padding: 1.2cqw 2cqw; border-radius: 3cqw; border: 0.25cqw solid #fff; background: linear-gradient(180deg, #fff, #ffe1ef); color: var(--ink);
  font: 700 1.7cqw var(--font); box-shadow: var(--shadow); transition: transform 0.12s, background 0.12s; animation: choiceIn 0.35s backwards; }
#choices button:nth-child(2) { animation-delay: 0.08s; }
#choices button:nth-child(3) { animation-delay: 0.16s; }
#choices button:nth-child(4) { animation-delay: 0.24s; }
#choices button:hover { transform: scale(1.03); background: linear-gradient(180deg, #fff, #ffc4dd); }
#choices button::before { content: '♥ '; color: var(--pink); }
@keyframes choiceIn { from { transform: translateY(1cqw); opacity: 0; } }

#meter { position: absolute; left: 2%; top: 3%; display: flex; align-items: center; gap: 0.7cqw; padding: 0.5cqw 1cqw; border-radius: 2cqw; background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow); font: 700 1.1cqw var(--font); color: var(--pink); }
#meter .heart { font-size: 1.8cqw; line-height: 1; animation: beat 1.2s infinite; }
#meter .bar { width: 12cqw; height: 0.9cqw; border-radius: 1cqw; background: #f3d6e4; overflow: hidden; }
#meter .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff9ac6, var(--pink)); transition: width 0.8s ease; }
@keyframes beat { 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } 60% { transform: scale(1); } }

#menu { position: absolute; right: 2%; top: 3%; display: flex; gap: 0.5cqw; }
#menu button { padding: 0.45cqw 1cqw; border-radius: 1.4cqw; border: 0; background: rgba(255, 255, 255, 0.82); color: var(--ink); font: 700 1cqw var(--font); box-shadow: var(--shadow); }
#menu button.on { background: var(--pink); color: #fff; }

#titleCard { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); text-align: center; padding: 2cqw 5cqw; background: rgba(255, 255, 255, 0.9);
  border-radius: 2cqw; box-shadow: var(--shadow); animation: card 2.6s ease forwards; pointer-events: none; }
#titleCard b { display: block; font: 700 1.3cqw var(--font); letter-spacing: 0.3em; text-transform: uppercase; color: var(--pink); }
#titleCard span { display: block; font: italic 3.4cqw var(--title); margin-top: 0.4cqw; }
@keyframes card { 0% { opacity: 0; transform: translate(-50%, -40%); } 15%, 80% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; } }

#log { position: absolute; inset: 6% 12%; background: rgba(255, 248, 241, 0.97); border-radius: 1.6cqw; box-shadow: var(--shadow); z-index: 10; display: flex; flex-direction: column; padding: 2cqw; }
#log .inner { overflow-y: auto; flex: 1; font-size: 1.4cqw; line-height: 1.5; }
#log .inner p { margin: 0 0 0.8cqw; }
#log .inner b { color: var(--pink); }
#log .inner .ch { color: #8a5aa0; font-style: italic; }
#log button { align-self: center; margin-top: 1cqw; padding: 0.6cqw 2cqw; border-radius: 2cqw; border: 0; background: var(--pink); color: #fff; font: 700 1.2cqw var(--font); }

/* ------------------------------------------------------------ screens */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; z-index: 20; }
#title { background: radial-gradient(ellipse at center, rgba(255, 210, 230, 0.15), rgba(40, 10, 40, 0.55)); }
.logo { text-align: center; color: #fff; text-shadow: 0 0.3cqw 1.2cqw rgba(80, 0, 60, 0.7); padding: 1.6cqw 3.5cqw; border-radius: 2.4cqw;
  background: rgba(45, 12, 45, 0.55); backdrop-filter: blur(4px); box-shadow: var(--shadow); }
.logo .kicker { font: 700 1.2cqw var(--font); letter-spacing: 0.3em; text-transform: uppercase; color: var(--pink-soft); }
.logo h1 { margin: 0.6cqw 0; font: 700 6cqw/1 var(--title); }
.logo h1 em { display: block; font-size: 3.6cqw; color: #bff4ff; }
.logo .cast { font: 700 2cqw var(--font); }
.logo .cast span { color: var(--pink); animation: beat 1.2s infinite; display: inline-block; }
.buttons { display: flex; gap: 1.4cqw; flex-wrap: wrap; justify-content: center; }
.big { padding: 1.1cqw 2.8cqw; border-radius: 3cqw; border: 0.25cqw solid #fff; background: linear-gradient(180deg, #ff86bb, var(--pink)); color: #fff; font: 700 1.7cqw var(--font);
  box-shadow: var(--shadow); transition: transform 0.12s; }
.big.alt { background: linear-gradient(180deg, #fff, #ffe1ef); color: var(--ink); }
.big:hover { transform: scale(1.05); }
#lanInfo { position: absolute; bottom: 2.5%; font-size: 1.1cqw; color: #fff; text-align: center; text-shadow: 0 1px 4px #000; }
#lanInfo b { color: #ffe08a; }
#lanInfo small { display: block; opacity: 0.7; font-size: 0.8cqw; }

#ending, #gallery { background: rgba(40, 10, 40, 0.45); }
.card { width: 56%; padding: 3cqw 4cqw; border-radius: 2cqw; background: rgba(255, 248, 241, 0.96); box-shadow: var(--shadow); text-align: center; }
.card.wide { width: 74%; }
.card .kicker { font: 700 1.1cqw var(--font); letter-spacing: 0.3em; text-transform: uppercase; color: var(--pink); }
.card h2 { margin: 0.6cqw 0 1.2cqw; font: 700 3.6cqw var(--title); color: var(--ink); }
.card p { font-size: 1.55cqw; line-height: 1.55; }
#endStat { color: #8a5aa0; font-style: italic; font-size: 1.3cqw !important; }
#galleryList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; margin-bottom: 2cqw; }
#galleryList div { padding: 1.4cqw; border-radius: 1.2cqw; background: #fff; box-shadow: 0 4px 14px rgba(60, 20, 60, 0.15); text-align: left; }
#galleryList b { display: block; font: 700 1.5cqw var(--title); color: var(--pink); }
#galleryList small { display: block; font-size: 1.05cqw; color: #8a5aa0; margin-top: 0.4cqw; }
#galleryList .locked b { color: #b9a9c2; }

#fatal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #000; color: #fff; z-index: 100; }