:root {
  --rose: #ff8fbd;
  --rose-deep: #e8558f;
  --ink: #6b2f4e;
  --cute: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--cute); font-size: 18px;
  background: linear-gradient(180deg, #ffd6e8 0%, #ffe9f3 42%, #fff4e6 100%) fixed;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
[hidden] { display: none !important; }
h1, h2 { margin: 0 0 .4em; line-height: 1.1; }

.btn {
  display: inline-block; padding: .75em 1.5em; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #ff9ec7, var(--rose-deep));
  box-shadow: 0 6px 0 #c23d75, 0 12px 22px rgba(232, 85, 143, .35);
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #c23d75; }

.card {
  width: min(92vw, 470px); padding: 28px 30px; text-align: center; border-radius: 34px;
  background: rgba(255, 255, 255, .84); box-shadow: 0 24px 60px rgba(232, 85, 143, .25);
  backdrop-filter: blur(6px);
}
.fine { margin: 20px 0 0; font-size: 12.5px; line-height: 1.45; opacity: .78; font-family: var(--ui); }
kbd { padding: 0 5px; border: 1px solid currentColor; border-radius: 4px; font: inherit; }

/* Entrée */
#gate { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; overflow-y: auto; padding: 16px; }
#gateMimi svg { width: 128px; height: auto; margin-bottom: -6px; }
#gate h1 { font-size: 32px; color: var(--rose-deep); }
#gateHello { margin: 0 0 14px; min-height: 1.4em; }
#gate.back #gateAsk { display: none; }
#gate.back #gateHello { font-size: 21px; font-weight: 700; }
#nameInput {
  width: 100%; padding: .7em 1em; border: 3px solid #ffc4dc; border-radius: 18px; outline: 0;
  background: #fff; color: var(--ink); font: inherit; text-align: center;
}
#nameInput:focus { border-color: var(--rose); }
.genre { display: flex; gap: 10px; justify-content: center; margin: 12px 0 16px; font-size: 15px; }
.genre input { position: absolute; opacity: 0; }
.genre span { display: block; padding: .3em .9em; border-radius: 999px; background: #fff; border: 2px solid #ffd3e4; cursor: pointer; }
.genre input:checked + span { background: #ffd3e4; border-color: var(--rose); }
.genre input:focus-visible + span { outline: 2px solid var(--rose-deep); }

/* Royaume rose */
.sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.sky i {
  position: absolute; bottom: -40px; width: 22px; height: 22px; opacity: .55; background: #ffb0d0;
  clip-path: path("M11 20 C-8 8 2 -3 11 5 C20 -3 30 8 11 20Z"); animation: rise 17s linear infinite;
}
.sky i:nth-child(1) { left: 6%; animation-delay: -2s; }
.sky i:nth-child(2) { left: 21%; animation-delay: -8s; animation-duration: 22s; }
.sky i:nth-child(3) { left: 38%; animation-delay: -13s; }
.sky i:nth-child(4) { left: 55%; animation-delay: -5s; animation-duration: 20s; }
.sky i:nth-child(5) { left: 69%; animation-delay: -10s; }
.sky i:nth-child(6) { left: 83%; animation-delay: -1s; animation-duration: 25s; }
.sky i:nth-child(7) { left: 94%; animation-delay: -15s; }
@keyframes rise { to { transform: translateY(-112vh) rotate(40deg); } }

#top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 22px; padding: 12px 24px;
  background: rgba(255, 255, 255, .7); backdrop-filter: blur(10px);
}
.brand { margin-right: auto; font-weight: 800; color: var(--rose-deep); text-decoration: none; }
#top nav { display: flex; gap: 16px; }
#top nav a { color: var(--ink); text-decoration: none; }
.sound { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.sound input { width: 86px; accent-color: var(--rose-deep); }

section { position: relative; }
#hero, #amis, #calin { max-width: 1040px; margin: 0 auto; padding: 56px 24px; }
#hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; align-items: center; min-height: 78vh; }
#hero h1 { font-size: clamp(38px, 6vw, 62px); color: var(--rose-deep); }
#hero p { margin: 0 0 26px; font-size: 20px; line-height: 1.45; }
.heroMimi { position: relative; text-align: center; }
#mimiHero.fright svg { animation: tremble .11s linear infinite; }
@keyframes tremble { 0% { transform: translate(-1.5px, .5px); } 25% { transform: translate(1.5px, -1px) rotate(.5deg); } 50% { transform: translate(-1px, 1px); } 75% { transform: translate(1.5px, .5px) rotate(-.5deg); } }
#mimiHero svg { width: min(78vw, 340px); height: auto; animation: bob 3.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes bob { 50% { transform: translateY(-9px) rotate(1deg); } }
#bubble {
  position: absolute; left: 50%; top: -18px; transform: translateX(-50%); padding: .5em 1em; white-space: nowrap;
  background: #fff; border-radius: 18px; box-shadow: 0 8px 18px rgba(232, 85, 143, .25); font-weight: 700; z-index: 2;
}
#amis h2, #calin h2 { font-size: 36px; color: var(--rose-deep); text-align: center; }
.sub { margin: 0 0 28px; text-align: center; }
#grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; }
.friend {
  padding: 18px 12px 14px; border: 0; border-radius: 26px; background: rgba(255, 255, 255, .8); color: inherit; font: inherit;
  cursor: pointer; box-shadow: 0 10px 24px rgba(232, 85, 143, .16); transition: transform .18s;
}
.friend:hover { transform: translateY(-5px) rotate(-1deg); }
.friend svg { width: 136px; height: auto; display: block; margin: 0 auto 8px; }
.friend b { display: block; font-size: 20px; }
.friend small { opacity: .7; }
.friend.met small::after { content: " 💕"; }

.plush .sockets { display: none; }
.plush.noeyes .sockets { display: inline; }
.plush.noeyes .eyes { visibility: hidden; }
.plush .eye { transform-box: fill-box; transform-origin: center; animation: blink 6.3s infinite; }
.plush .eye:nth-child(2) { animation-delay: .04s; }
@keyframes blink { 0%, 96%, 100% { transform: scaleY(1); } 98% { transform: scaleY(.08); } }

#sheet { width: min(92vw, 430px); padding: 24px; border: 0; border-radius: 28px; color: var(--ink); text-align: center; font-family: var(--cute); }
#sheet::backdrop { background: rgba(255, 170, 205, .5); backdrop-filter: blur(4px); }
#sheetBody svg { width: 160px; height: auto; }
#sheetBody h3 { margin: 6px 0; font-size: 26px; color: var(--rose-deep); }
#sheetBody dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 10px 0; text-align: left; font-size: 16px; }
#sheetBody dt { font-weight: 700; }
#sheetBody dd { margin: 0; }
#sheetBody blockquote { margin: 12px 0 18px; font-size: 18px; font-style: italic; }

#calin { text-align: center; }
#hugBtn {
  width: 260px; height: 290px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, #fff 30%, #ffd3e4 70%, transparent 72%);
  transition: transform .1s; touch-action: manipulation;
}
#hugBtn svg { width: 200px; height: auto; pointer-events: none; }
#hugBtn.locked { filter: grayscale(.45) opacity(.75); cursor: not-allowed; }
#hugBtn.squish { transform: scale(1.08, .92); }
#hugMeter { margin-top: 10px; font-size: 20px; }
.hrt { position: fixed; z-index: 7; pointer-events: none; font-size: 22px; animation: hrt 1s ease-out forwards; }
@keyframes hrt { to { transform: translate(var(--dx), -110px) scale(1.5); opacity: 0; } }

#hugBtn.locked + #hugMeter { opacity: .6; }
#hugMeter.gone { display: none; }

#jeu { max-width: 1040px; margin: 0 auto; padding: 40px 24px 56px; text-align: center; animation: pop .6s ease-out; }
#jeu h2 { font-size: 36px; color: var(--rose-deep); }
@keyframes pop { from { opacity: 0; transform: translateY(26px); } }
#gameBox { overflow: hidden; border: 6px solid #fff; border-radius: 26px; box-shadow: 0 14px 30px rgba(232, 85, 143, .25); }
#game { display: block; width: 100%; aspect-ratio: 860 / 300; touch-action: manipulation; cursor: pointer; }
.linkBtn { border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; opacity: .75; }
#playCta { position: fixed; z-index: 8; left: 50%; bottom: 22px; width: max-content; max-width: 90vw; padding: .7em 1.4em; transform: translateX(-50%); border: 0; border-radius: 999px; background: linear-gradient(180deg, #ff9ec7, var(--rose-deep)); color: #fff; font: 700 18px var(--cute); cursor: pointer; box-shadow: 0 6px 0 #c23d75, 0 14px 26px rgba(232, 85, 143, .4); animation: nudge 1.3s ease-in-out infinite; }
@keyframes nudge { 50% { margin-bottom: 8px; } }
.friend.hostile { cursor: not-allowed; }
.friend.hostile small { color: #a01238; font-weight: 700; opacity: 1; }
#leave { position: fixed; z-index: 28; left: 50%; top: 50%; width: min(92vw, 460px); padding: 24px 28px 28px; transform: translate(-50%, -50%); text-align: center; border-radius: 26px; background: #fff; box-shadow: 0 0 0 100vmax rgba(60, 0, 30, .45), 0 24px 60px rgba(0, 0, 0, .4); color: #7a1038; }
#leave p { margin: 0; }
#leave h2 { margin: 6px 0; font-size: 34px; }
#leaveNum { font: 900 96px/1.1 var(--cute); color: #c1124a; }
#leaveNum.beat { animation: beat .28s ease-out; }
@keyframes beat { from { transform: scale(1.5); } }
#leave .ahah { margin: 0 0 16px; font-weight: 700; font-style: italic; }
#psy { position: fixed; z-index: 45; inset: 0; width: 100%; height: 100%; opacity: .9; will-change: transform; }
#psyPops { position: fixed; z-index: 46; inset: 0; overflow: hidden; pointer-events: none; }
.errDialog.psyPop { width: 300px; top: auto; transform: rotate(var(--r)); padding: 14px 16px; }
.errDialog.psyPop p { margin: 0; color: #5f6368; }
#leaveFloat { position: fixed; z-index: 69; left: 50%; bottom: 18px; padding: 8px 20px; transform: translateX(-50%); border: 1px solid #fff5; border-radius: 10px; background: rgba(0, 0, 0, .7); color: #fff; font: 600 14px var(--ui); cursor: pointer; }
body.psychose { overflow: hidden; background: #000; }
body.psychose #pink { filter: hue-rotate(160deg) brightness(.38) contrast(1.3); }
#abyss.aim { cursor: crosshair; }
#gameSay { min-height: 1.4em; margin: 16px 0 0; font-weight: 700; color: var(--rose-deep); }

footer { position: relative; padding: 30px 20px 54px; text-align: center; font-size: 14px; opacity: .8; font-family: var(--ui); }
#forget { margin-left: 6px; border: 0; background: none; color: inherit; text-decoration: underline; font: inherit; cursor: pointer; }

body.frozen, body.frozen * { animation-play-state: paused !important; transition: none !important; cursor: none !important; pointer-events: none !important; }

/* Le cri */
#fx { position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; display: none; background: #000; }
#fx.on { display: block; }

/* Fausse erreur */
#fakeError { position: fixed; inset: 0; z-index: 30; overflow: hidden; }
#tearEye { position: absolute; left: 50%; top: 50%; width: 46vmin; height: 36vmin; transform: translate(-50%, -50%); opacity: 0; }
.sheetWrap { position: absolute; inset: 0; }
.sheetWrap.right { display: none; }
.torn .sheetWrap { filter: drop-shadow(0 0 7px #f4ecd8) drop-shadow(0 0 2px #fff); will-change: transform; }
.torn .sheetWrap.right { display: block; }
.sheetPage { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #e7cdd9, #ece4dc); }
.sheetPage .ghost { position: absolute; inset: 0; filter: grayscale(.72) brightness(.82) contrast(.92); pointer-events: none; }
.heroClone { display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; align-items: center; max-width: 1040px; min-height: 78vh; margin: 0 auto; padding: 56px 24px; }
.heroClone h1 { font-size: clamp(38px, 6vw, 62px); color: var(--rose-deep); }
.heroClone p { margin: 0 0 26px; font-size: 20px; line-height: 1.45; }
.heroClone #mimiHero svg { animation: none; }
.errDialog {
  position: absolute; left: 50%; top: 12%; width: min(90vw, 448px); padding: 22px 24px 18px; transform: translateX(-50%);
  border-radius: 10px; background: #fff; color: #202124; font-family: var(--ui); font-size: 14px; line-height: 1.45;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3), 0 14px 40px rgba(0, 0, 0, .28);
}
.errDialog h2 { margin: 0 0 12px; font-size: 16px; font-weight: 500; }
.errDialog .host { color: #5f6368; }
.errDialog .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.errDialog button { padding: 7px 16px; border: 1px solid #dadce0; border-radius: 4px; background: #fff; color: #1a73e8; font: 500 13px var(--ui); cursor: default; }
.errDialog button.primary { background: #1a73e8; border-color: #1a73e8; color: #fff; }

/* Royaume inversé */
#inverted { position: fixed; inset: 0; z-index: 20; background: #000; cursor: none; touch-action: none; user-select: none; -webkit-user-select: none; }
#inverted canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#fakeError:not([hidden]) ~ #say { z-index: 35; }
#eyesHud { position: absolute; top: 16px; left: 50%; display: flex; gap: 12px; transform: translateX(-50%); opacity: .75; }
#eyesHud i { width: 13px; height: 13px; border: 1.5px solid #5f5a4c; border-radius: 50%; }
#eyesHud i.got { border-color: #e8e0cb; background: radial-gradient(circle, #000 26%, #e8e0cb 30%); box-shadow: 0 0 7px #e8e0cb88; }
.sound.horror { position: absolute; left: 14px; bottom: 12px; opacity: .3; color: #c9c0ac; font-family: var(--ui); cursor: default; }
.sound.horror:hover { opacity: .75; }
.sound.horror input { accent-color: #6a5f50; }
#inverted input[type=range], #fakeCam button { cursor: pointer; }
#recDot { position: absolute; top: 14px; right: 18px; color: #d11; font: 700 13px var(--ui); animation: rec 1.2s steps(2) infinite; }
@keyframes rec { 50% { opacity: .2; } }
#fakeCam {
  position: absolute; top: 12px; left: 72px; width: 326px; padding: 14px 16px; border-radius: 10px; background: #fff; color: #202124;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .55); font: 14px var(--ui); cursor: default;
}
#fakeCam p { margin: 0 0 8px; }
#fakeCam .cam { color: #5f6368; }
#fakeCam div { display: flex; justify-content: flex-end; gap: 8px; }
#fakeCam button { padding: 6px 14px; border: 1px solid #dadce0; border-radius: 16px; background: #fff; color: #1a73e8; font: 500 13px var(--ui); }
#fakeCam button.ok { background: #1a73e8; color: #fff; border-color: #1a73e8; }

/* Le monde d'en bas */
#abyss { position: fixed; inset: 0; z-index: 26; overflow: hidden; background: #000; cursor: none; touch-action: none; user-select: none; -webkit-user-select: none; }
#abyssView { position: absolute; inset: 0; width: 100%; height: 100%; }
#abyss::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 44%, rgba(0, 0, 0, .78) 100%); }
#nameHud { position: absolute; z-index: 2; top: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; color: #d8331f; font: 700 22px "Comic Sans MS", "Chalkboard SE", ui-rounded, sans-serif; text-shadow: 0 0 8px #000; }
#nameHud span { transition: opacity .5s, transform .5s, filter .5s; }
#nameHud span.gone { opacity: 0; transform: translateY(26px) scale(1.5); filter: blur(4px); }
#holdHint { position: absolute; z-index: 2; left: 0; right: 0; bottom: 5vh; color: #ffd6e8; font: 600 15px var(--ui); text-align: center; text-shadow: 0 0 8px #000; pointer-events: none; }
#bigLetter { position: absolute; z-index: 3; min-width: 92px; padding: 2px 16px; transform: translate(-50%, -50%); border: 0; background: none; color: #ffd6e8; font: 800 88px "Comic Sans MS", "Chalkboard SE", ui-rounded, sans-serif; text-shadow: 0 0 16px #ff4f9a, 0 0 40px #ff4f9a, 0 3px 0 #000; cursor: pointer; animation: letter .13s linear infinite; }
@keyframes letter { 0% { margin: -2px 0 0 2px; } 50% { margin: 2px 0 0 -2px; } 100% { margin: 0 0 0 1px; } }
#abyssFade { position: absolute; z-index: 5; inset: 0; pointer-events: none; opacity: 0; background: #ffeaf3; transition: opacity .55s ease-in; }
#abyssFade.on { opacity: 1; }
body.blackout #escBtn { opacity: .1; }

/* Mimi parle */
#say {
  position: fixed; z-index: 35; left: 50%; bottom: 12vh; width: min(90vw, 760px); transform: translateX(-50%);
  color: #ffd6e8; font: 700 clamp(22px, 3.4vw, 36px)/1.3 var(--cute); text-align: center; pointer-events: none;
  text-shadow: 0 0 12px rgba(255, 110, 170, .55), 0 2px 0 #000; opacity: 0; transition: opacity .45s;
}
#say.on { opacity: 1; transition: none; }
#say.at { bottom: auto; width: min(70vw, 460px); }
#say b { display: inline-block; white-space: nowrap; font-weight: inherit; }
#say span { display: inline-block; }
#say.small { font-size: 18px; }
#say.pink { color: var(--rose-deep); text-shadow: none; }

#void { position: fixed; inset: 0; z-index: 34; background: #000; cursor: none; }
#voidFace { position: absolute; left: 50%; top: 50%; width: 92vmin; height: 92vmin; transform: translate(-50%, -50%); opacity: 0; mix-blend-mode: lighten; }

/* Calme */
#calm { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overflow-y: auto; padding: 16px; background: linear-gradient(180deg, #ffe4ef, #fff6ec); }
#calm h1 { color: var(--rose-deep); }
#calm p { line-height: 1.45; }

#escBtn {
  position: fixed; z-index: 70; right: 12px; bottom: 12px; padding: 5px 11px; border: 1px solid #ffffff55; border-radius: 8px;
  background: #00000066; color: #ffffffb0; font: 12px var(--ui); cursor: pointer; opacity: .55;
}
#escBtn:hover { opacity: 1; }

@media (max-width: 760px) {
  #hero { grid-template-columns: 1fr; text-align: center; min-height: 0; padding-top: 34px; }
  .heroMimi { order: -1; margin-top: 26px; }
  .heroClone { grid-template-columns: 1fr; text-align: center; }
  #top { gap: 12px; padding: 10px 14px; flex-wrap: wrap; }
  #top nav { display: none; }
  #fakeCam { left: 50%; transform: translateX(-50%); width: 92vw; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sky i, #mimiHero svg { animation: none; }
}