:root {
  --bg: #0d1b2a; --bg2: #13294b; --card: #fdf6e3; --ink: #2b2118;
  --red: #c1121f; --red2: #e63946; --green: #1b5e3a; --green2: #2a9d8f;
  --gold: #f4c95d; --snow: #f1f5f9; --muted: #9fb3c8;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Nunito', system-ui, sans-serif; color: var(--snow); min-height: 100vh;
  background: radial-gradient(ellipse at top, var(--bg2), var(--bg) 70%) fixed;
}
body.noscroll { overflow: hidden; }
#snow { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
header, main, footer { position: relative; z-index: 1; }
button { font: inherit; cursor: pointer; }

/* ---------- En-tête ---------- */
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; max-width: 1100px; margin: 0 auto; }
.brand small { color: var(--gold); letter-spacing: .15em; text-transform: uppercase; font-size: .75rem; }
h1 { font-family: 'Mountains of Christmas', cursive; margin: 0; font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1; }
h1 span { color: var(--gold); }
h2, h3 { font-family: 'Mountains of Christmas', cursive; margin: .2em 0 .4em; }
h2 { font-size: 2rem; }
.hud { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#agent { color: var(--muted); font-weight: 700; }
.pill { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); padding: 4px 12px; border-radius: 99px; }
.admin-pill { background: var(--red); border-color: var(--red2); font-weight: 900; }
nav { display: flex; gap: 8px; flex-wrap: wrap; }

.btn { background: var(--red); color: #fff; border: 0; border-radius: 99px; padding: 10px 18px; font-weight: 700; box-shadow: 0 3px 0 #7a0a13; transition: transform .1s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #7a0a13; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: rgba(255,255,255,.08); color: inherit; border: 1px solid rgba(255,255,255,.25); box-shadow: none; }
.modal .btn.ghost { color: var(--ink); border-color: rgba(0,0,0,.2); background: rgba(0,0,0,.04); }
.btn.small { padding: 6px 12px; font-size: .9rem; }
.admin-btn { background: #6d28d9; box-shadow: 0 3px 0 #3b0f87; margin-top: 10px; }

/* ---------- Calendrier ---------- */
main { max-width: 1100px; margin: 0 auto; padding: 0 16px 40px; }
.countdown { text-align: center; color: var(--gold); font-weight: 700; margin: 4px 0 18px; }
.calendar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.door {
  position: relative; aspect-ratio: 1; border: 0; border-radius: var(--radius); color: #fff;
  background: linear-gradient(145deg, var(--green), #0f3d25); box-shadow: inset 0 0 0 3px rgba(244,201,93,.45), 0 6px 14px rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .15s;
}
.door:nth-child(3n) { background: linear-gradient(145deg, var(--red), #7a0a13); }
.door:nth-child(4n+1) { background: linear-gradient(145deg, #1d4e89, #0f2a4d); }
.door .num { font-family: 'Mountains of Christmas', cursive; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1; }
.door .ico { font-size: clamp(1.2rem, 3vw, 1.8rem); margin-top: 4px; }
.door.open:hover { transform: scale(1.05) rotate(-1deg); }
.door.locked { filter: grayscale(.6) brightness(.65); cursor: not-allowed; }
.door.today { animation: glow 1.6s ease-in-out infinite alternate; }
.door.done { background: linear-gradient(145deg, var(--gold), #c08b1c) !important; color: var(--ink); }
.door.done .ico { font-family: 'Mountains of Christmas', cursive; font-size: 2rem; font-weight: 700; }
.door .tick { position: absolute; top: 6px; right: 10px; font-size: .9rem; }
@keyframes glow { from { box-shadow: inset 0 0 0 3px var(--gold), 0 0 6px var(--gold); } to { box-shadow: inset 0 0 0 3px var(--gold), 0 0 26px var(--gold); } }

footer { text-align: center; color: var(--muted); padding: 20px; font-size: .85rem; }
.admin-link { background: none; border: 0; opacity: .25; margin-left: 6px; }
.admin-link:hover { opacity: 1; }

/* ---------- Fenêtres ---------- */
.modal { position: fixed; inset: 0; z-index: 10; background: rgba(5,10,20,.75); display: flex; align-items: flex-start; justify-content: center; padding: 30px 12px; overflow-y: auto; animation: fade .2s; }
.modal-box { position: relative; background: var(--card); color: var(--ink); border-radius: 18px; padding: 26px 24px; width: 100%; max-width: 480px; box-shadow: 0 20px 60px rgba(0,0,0,.5); border: 4px solid var(--gold); }
.modal.wide .modal-box { max-width: 720px; }
.close { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 1.3rem; color: var(--ink); opacity: .6; }
@keyframes fade { from { opacity: 0; } }
.small { font-size: .88rem; opacity: .8; }
.center { text-align: center; }

.day-head { display: flex; gap: 14px; align-items: center; }
.day-head .big { font-size: 3rem; }
.day-head small { color: var(--red); font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.story { background: #fff; border-left: 5px solid var(--red); padding: 12px 14px; border-radius: 8px; font-style: italic; margin: 10px 0 16px; }
.solved-banner { background: #e7f6ec; border: 2px solid var(--green2); padding: 10px; border-radius: 10px; margin-bottom: 12px; }
.paper { background: #fffaf0 repeating-linear-gradient(transparent 0 27px, #e8dcc0 27px 28px); border: 1px solid #e3d3b0; padding: 14px 18px; border-radius: 6px; font-family: Georgia, serif; line-height: 28px; box-shadow: 2px 3px 0 #e3d3b0; }
.paper p { margin: 0; }
.paper ol { margin: 6px 0; padding-left: 22px; }
.poem p { font-style: italic; }
.cipher { font-family: 'Courier New', monospace; font-size: 1.25rem; letter-spacing: .12em; text-align: center; font-weight: 700; word-spacing: .4em; }
.labels { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.labels span { background: var(--red); color: #fff; padding: 4px 14px; border-radius: 4px 14px 14px 4px; font-family: monospace; font-size: 1.2rem; letter-spacing: .15em; }
.mirror { transform: scale(-1, -1); text-align: center; font-size: 1.15rem; font-family: 'Mountains of Christmas', cursive; }

.answer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.answer input { flex: 1; min-width: 160px; padding: 10px 14px; border-radius: 99px; border: 2px solid #d6c7a1; font: inherit; text-transform: uppercase; }
.answer input[type=password], .answer input.name-input { text-transform: none; }
.answer input:focus { outline: none; border-color: var(--red); }
.feedback { width: 100%; color: var(--red); font-weight: 700; min-height: 1.2em; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.hints { margin-top: 16px; display: grid; gap: 8px; }
.hint { background: #fff7d6; border: 1px dashed #d4a017; padding: 8px 12px; border-radius: 8px; }

.success { text-align: center; }
.success .big { font-size: 3rem; }
.frag-letter { font-family: 'Mountains of Christmas', cursive; font-size: 5rem; color: var(--red); line-height: 1.1; text-shadow: 0 0 20px var(--gold); animation: pop .6s; }
@keyframes pop { from { transform: scale(0) rotate(-30deg); } }

.parch .slots { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: 12px 0; }
.slot { background: #eadfc4; border-radius: 6px; text-align: center; padding: 4px 0; }
.slot b { display: block; font-family: 'Mountains of Christmas', cursive; font-size: 1.5rem; color: #a99a78; }
.slot.got { background: var(--gold); }
.slot.got b { color: var(--ink); }
.slot small { font-size: .65rem; opacity: .6; }
.finale, .ending { background: #fff; padding: 12px 16px; border-radius: 10px; border: 2px solid var(--gold); }

.ranking { list-style: none; padding: 0; margin: 0; }
.ranking li { display: grid; grid-template-columns: 40px 1fr auto auto auto; gap: 10px; padding: 8px; border-bottom: 1px solid #eadfc4; align-items: center; }
.ranking .nm { display: flex; align-items: center; gap: 6px; }
.ranking .nm img { height: 28px; image-rendering: pixelated; }
.ranking .tm { font-size: .85rem; opacity: .75; }
.ranking li.me { background: #fff1c2; font-weight: 900; }
.ranking .rk { text-align: center; font-weight: 900; }
.ranking .pt { font-weight: 900; color: var(--red); }

.check { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 100px); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 99px; z-index: 20; transition: transform .3s; max-width: 90vw; text-align: center; }
.toast.show { transform: translate(-50%, 0); }
.confetti { position: fixed; top: -30px; z-index: 30; pointer-events: none; animation: fall 3s linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* ---------- Mini-jeux ---------- */
.game, .widget { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }
.g-status { font-weight: 700; text-align: center; background: #fff; padding: 6px 14px; border-radius: 99px; }
.g-grid { display: grid; gap: 8px; width: 100%; max-width: 420px; }
.g-canvas { width: 100%; max-width: 360px; border-radius: 12px; background: linear-gradient(#cfe8ff, #fff); touch-action: none; border: 3px solid var(--ink); }

.memory { grid-template-columns: repeat(5, 1fr); }
.card { aspect-ratio: 3/4; border: 0; border-radius: 10px; background: linear-gradient(145deg, var(--red), #7a0a13); font-size: 1.8rem; box-shadow: inset 0 0 0 3px var(--gold); }
.card span { visibility: hidden; }
.card.up { background: #fff; }
.card.up span { visibility: visible; }
.card.ok { background: #d9f2e1; box-shadow: inset 0 0 0 3px var(--green2); }

.sliding { max-width: 300px; gap: 4px; }
.tile { aspect-ratio: 1; position: relative; overflow: hidden; border: 0; border-radius: 6px; background: #e8f3ff; padding: 0; }
.tile.empty { background: transparent; }
.tile .pic { position: absolute; pointer-events: none; }
.tile .pic svg { width: 100%; height: 100%; display: block; }
.tile i { position: absolute; top: 2px; left: 6px; font-style: normal; font-size: .75rem; font-weight: 900; color: var(--red); }
.sliding.won .tile i { display: none; }

.simon { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 240px; }
.pad { aspect-ratio: 1; border: 0; border-radius: 20px; opacity: .55; transition: opacity .1s, transform .1s; }
.pad.lit { opacity: 1; transform: scale(1.06); box-shadow: 0 0 25px #fff; }

.lights { max-width: 320px; gap: 6px; }
.bulb { aspect-ratio: 1; border: 0; border-radius: 50%; background: #2b2b3a; color: #555; font-size: 1.3rem; }
.bulb.on { background: radial-gradient(#fff6b0, #f4c95d); box-shadow: 0 0 14px var(--gold); }

.mm-board { display: grid; gap: 4px; width: 100%; max-width: 320px; }
.mm-row { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; padding: 6px 10px; border-radius: 8px; font-size: 1.3rem; }
.mm-n { font-size: .75rem; font-weight: 900; opacity: .5; width: 1.2em; }
.mm-b { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: 50%; border: 4px solid transparent; line-height: 1; }
.mm-b.ok { border-color: #1f9d55; background: #dcf5e6; }
.mm-b.near { border-color: #f59e0b; background: #fff1d6; }
.mm-b.no { border-color: #d64545; background: #fde3e3; }
.mm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: .8rem; font-weight: 700; }
.mm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mm-legend .mm-b { width: 1.1em; height: 1.1em; border-width: 3px; }
.mm-cur { font-size: 2rem; display: flex; gap: 6px; }
.mm-pick { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mm-color { font-size: 1.8rem; background: #fff; border: 2px solid #ddd; border-radius: 50%; width: 52px; height: 52px; }

.g-canvas.maze-canvas { max-width: 480px; background: #050a19; border-color: #0c4a6e; }
.dpad { display: grid; grid-template-columns: repeat(3, 52px); gap: 4px; }
.dpad button { height: 46px; border-radius: 10px; border: 0; background: #fff; font-size: 1.3rem; box-shadow: 0 2px 0 #ccc; }

.hanoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.peg { background: #fff; border: 2px solid #e3d3b0; border-radius: 10px; padding: 8px 4px; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; }
.peg.sel { border-color: var(--red); background: #ffe9ea; }
.peg .stack { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.disc { background: linear-gradient(var(--red2), var(--red)); border-radius: 8px; height: 30px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px var(--gold); }
.peg .base { margin-top: 6px; font-size: .75rem; font-weight: 700; border-top: 4px solid #8b5a2b; padding-top: 4px; }

.whack { grid-template-columns: repeat(3, 1fr); max-width: 330px; }
.hole { aspect-ratio: 1; border: 0; border-radius: 50%; background: radial-gradient(#222 45%, #8b5a2b 47%, #6b4423); font-size: 2.6rem; }

.picross { display: grid; gap: 2px; width: 100%; max-width: 380px; }
.picross .clue { font-size: .8rem; font-weight: 900; display: flex; align-items: flex-end; justify-content: center; color: var(--green); }
.picross .clue.row { justify-content: flex-end; align-items: center; padding-right: 6px; white-space: nowrap; }
.px { aspect-ratio: 1; border: 1px solid #c9b88f; background: #fff; border-radius: 3px; padding: 0; color: #aaa; }
.px.s1 { background: var(--green); }
.picross.won .px.s1 { background: var(--green2); }

.lamp { font-size: 5rem; filter: grayscale(1) brightness(.5); transition: filter .05s; }
.lamp.on { filter: drop-shadow(0 0 30px #fff7a8) brightness(1.4); }
.morse-table { width: 100%; }
.morse-table summary { cursor: pointer; font-weight: 700; }
.morse-table span { display: inline-block; width: 25%; font-family: monospace; padding: 2px 0; }
.phone { display: grid; grid-template-columns: repeat(3, 70px); gap: 6px; background: #333; padding: 12px; border-radius: 20px; }
.phone div { background: #eee; border-radius: 8px; text-align: center; padding: 4px; }
.phone b { display: block; font-size: 1.2rem; }
.phone small { font-size: .65rem; }

.scene { position: relative; aspect-ratio: 16/10; background: linear-gradient(#5b3a29 0 55%, #3d2516 55%); border-radius: 12px; overflow: hidden; border: 4px solid #2b1a10; }
.scene .obj { position: absolute; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; line-height: 1; transition: transform .15s; }
.scene .obj:hover { transform: translate(-50%, -50%) scale(1.15); }
.scene .obj.seen { filter: drop-shadow(0 0 4px var(--gold)); }
.scene-note { background: #fff; border: 2px dashed #8b5a2b; border-radius: 8px; padding: 10px; margin-top: 8px; min-height: 3em; }

.quiz fieldset { border: 1px solid #e3d3b0; border-radius: 10px; margin: 0 0 10px; background: #fff; }
.quiz legend { font-weight: 700; }
.quiz label { display: inline-flex; gap: 6px; margin: 4px 14px 4px 0; }

/* ---------- Attaques surprises de Krampware ---------- */
body.kw-flip header, body.kw-flip main { transform: rotate(180deg); transition: transform .6s cubic-bezier(.5,1.6,.4,1); }
header, main { transition: transform .6s; }
.kw-shake { animation: shakeScreen .12s linear 4; }
.kw-popup { position: fixed; z-index: 60; left: 50%; top: 30%; transform: translate(-50%, -50%); width: min(420px, 92vw); background: #e8e8e8; color: #111; border: 2px solid #555; box-shadow: 8px 8px 0 rgba(0,0,0,.4); font-family: 'Courier New', monospace; animation: pop .3s; }
.kw-bar { background: linear-gradient(90deg, #7a0a13, #c1121f); color: #fff; padding: 4px 8px; font-weight: 900; display: flex; justify-content: space-between; align-items: center; }
.kw-bar button { background: #ddd; border: 1px solid #333; font-weight: 900; width: 24px; height: 22px; padding: 0; }
.kw-body { padding: 14px; text-align: center; }
.kw-icon { font-size: 3rem; animation: pulse .4s infinite alternate; }
.kw-prog { height: 14px; border: 2px solid #333; margin: 10px 0; background: #fff; }
.kw-prog i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #c1121f 0 10px, #e63946 10px 20px); animation: fill 2.2s forwards; }
.kw-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.kw-virus { position: fixed; z-index: 55; font-size: 2.6rem; background: none; border: 0; padding: 4px; cursor: crosshair; filter: drop-shadow(0 0 10px #ff2b4e); animation: pulse .3s infinite alternate; transform: translate(-50%, -50%); }
.kw-virus.boom { animation: pop .4s reverse; }
.toast.kramp { background: #1a0006; border: 2px solid #ff2b4e; color: #ffd1d9; font-family: 'VT323', monospace; font-size: 1.2rem; box-shadow: 0 0 20px rgba(255,43,78,.5); }
.toast.kramp b { color: #ff5c7a; }
.toast.badge-toast { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #f4c95d, #c08b1c); color: var(--ink); border-radius: 16px; bottom: 80px; }
.badge-toast .bi { font-size: 2.2rem; }
.badge-toast small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }

/* ---------- Salle secrète, carte d'agent, badges ---------- */
.secret-room .story { border-left-color: #29a9d6; }
.secret-room .intro-mati { float: none; display: block; margin: 10px auto 0; width: 70px; }
.agent-card { width: 100%; max-width: 760px; display: block; margin: 0 auto 10px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.row-btns.center { justify-content: center; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.badge { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; gap: 0 8px; align-items: center; background: #f1ece0; border-radius: 12px; padding: 8px 10px; opacity: .55; filter: grayscale(1); }
.badge span { grid-row: 1 / 3; font-size: 2rem; text-align: center; }
.badge b { font-size: .9rem; }
.badge small { font-size: .72rem; opacity: .8; }
.badge.got { opacity: 1; filter: none; background: #fff6d8; box-shadow: inset 0 0 0 2px #f4c95d; }

/* ---------- Bonnet de Noël (récompense collective du palier 75 %) sur les avatars affichés en image ---------- */
.xmas-hat .r-agent::before, .xmas-hat #agent::before {
  content: ''; position: absolute; z-index: 2; pointer-events: none; background: no-repeat center / contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'><path d='M7 24 C9 14 13 6 21 4 C27 3 32 7 34 13 L30 13 C29 10 26 9 24 11 L30 24 Z' fill='%23d62839'/><path d='M12 22 C14 15 17 9 21 7' stroke='%23ff5a6a' stroke-width='2' fill='none'/><rect x='3' y='21' width='31' height='8' rx='4' fill='%23fff'/><circle cx='33' cy='14' r='4.5' fill='%23fff'/></svg>");
}
.xmas-hat .r-agent::before { left: 5%; width: 90%; aspect-ratio: 40 / 32; top: -7%; }
.xmas-hat #agent { position: relative; }
.xmas-hat #agent::before { left: 0; top: -9px; width: 30px; height: 24px; }

/* ---------- Village ---------- */
.view-switch { display: flex; justify-content: flex-end; margin: -6px 0 8px; }
/* (classe distincte de .village, déjà utilisée par le décor de fond en bas de page) */
.village-map { position: relative; border-radius: 18px; overflow: hidden; border: 4px solid #f4c95d; box-shadow: 0 12px 40px rgba(0,0,0,.5); background: #dfe9f5; }
.village-map[hidden], .calendar[hidden] { display: none; }
.village-cv { display: block; width: 100%; image-rendering: pixelated; cursor: pointer; outline: none; }
.village-mini { position: absolute; top: 10px; right: 10px; width: 224px; height: 144px; border: 3px solid #f4c95d; border-radius: 10px; background: #dfe9f5; box-shadow: 0 4px 14px rgba(0,0,0,.4); image-rendering: pixelated; pointer-events: none; }
.village-team { position: absolute; left: 12px; top: 48px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 290px;
  background: rgba(13,27,42,.86); color: #fff; border: 2px solid #f4c95d; border-radius: 14px; padding: 7px 12px 8px; font-size: .82rem; text-align: left; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.village-team:hover { background: rgba(13,27,42,.95); }
.village-team b { color: var(--gold); font-size: 1rem; }
.village-team small { color: var(--muted); font-size: .7rem; }
.vt-bar { position: relative; width: 100%; height: 9px; border-radius: 99px; background: rgba(255,255,255,.15); }
.vt-bar i { display: block; height: 100%; border-radius: 99px; background: repeating-linear-gradient(-45deg, #e63946 0 6px, #fff 6px 12px); }
.vt-bar em { position: absolute; top: -3px; width: 3px; height: 15px; margin-left: -1px; background: rgba(255,255,255,.5); border-radius: 2px; }
.vt-bar em.ok { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.village-help { position: absolute; left: 12px; top: 10px; background: rgba(13,27,42,.82); color: #fff; font-size: .8rem; padding: 6px 12px; border-radius: 99px; pointer-events: none; }

/* ---------- Jauge collective ---------- */
.team-card { position: relative; display: flex; align-items: center; gap: 22px; max-width: 820px; margin: -4px auto 22px; padding: 16px 22px 14px;
  background: linear-gradient(135deg, rgba(193,18,31,.35), rgba(19,41,75,.85) 45%, rgba(27,94,58,.35)); border: 2px solid rgba(244,201,93,.55);
  border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 30px rgba(244,201,93,.08); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.team-card[hidden] { display: none; } /* masqué en mode village (la jauge est dans la carte) */
.team-card:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.45), 0 0 0 3px rgba(244,201,93,.25); }
.team-card::before { content: '🎄'; position: absolute; top: -14px; left: 18px; font-size: 1.6rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
/* anneau de progression */
.team-ring { flex: 0 0 auto; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(255,255,255,.12) 0); box-shadow: 0 0 22px rgba(244,201,93,.35); }
.team-ring > div { width: 80px; height: 80px; border-radius: 50%; background: #0d1b2a; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.team-ring b { font-family: 'Mountains of Christmas', cursive; font-size: 2.1rem; line-height: 1; color: var(--gold); }
.team-ring b small { font-size: .55em; }
.team-ring span { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.team-main { flex: 1; min-width: 0; }
.team-title { font-family: 'Mountains of Christmas', cursive; font-size: 1.6rem; line-height: 1.1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.team-more { font-family: 'Nunito', sans-serif; font-size: .78rem; font-weight: 700; color: var(--gold); opacity: .8; white-space: nowrap; }
.team-sub { font-size: .85rem; color: #c8d6e5; margin: 2px 0 12px; }
.team-sub b { color: #fff; }
/* barre « sucre d'orge » avec les paliers en cadeaux */
.team-track { position: relative; height: 16px; border-radius: 99px; background: rgba(0,0,0,.4); box-shadow: inset 0 2px 4px rgba(0,0,0,.5); margin: 4px 14px 26px 6px; }
.team-fill { height: 100%; border-radius: 99px; min-width: 16px; transition: width 1.2s cubic-bezier(.2,.9,.3,1);
  background: repeating-linear-gradient(-45deg, #e63946 0 10px, #fff 10px 20px); box-shadow: 0 0 12px rgba(230,57,70,.6); animation: candy 1.2s linear infinite; background-size: 28px 28px; }
@keyframes candy { to { background-position: 28px 0; } }
.team-node { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.team-node i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .95rem;
  background: #24304a; border: 2px solid rgba(255,255,255,.3); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.team-node.ok i { background: radial-gradient(#fff6c8, #f4c95d); border-color: #fff; box-shadow: 0 0 14px #f4c95d; animation: pulse .9s infinite alternate; }
.team-node small { position: absolute; top: 32px; font-size: .68rem; font-weight: 700; color: var(--muted); }
.team-node.ok small { color: var(--gold); }
.team-next { font-size: .85rem; background: rgba(0,0,0,.25); border-radius: 10px; padding: 6px 10px; display: inline-block; }
.team-next b { color: var(--gold); }
@media (max-width: 600px) {
  .team-card { flex-direction: column; text-align: center; gap: 10px; padding: 18px 14px 12px; }
  .team-title { justify-content: center; flex-wrap: wrap; }
  .team-track { margin: 4px 16px 26px; }
}
.team-goals { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: .78rem; opacity: .8; }
.team-goals .ok { color: var(--gold); opacity: 1; }
.team-goals.big { flex-direction: column; font-size: .95rem; opacity: 1; margin: 10px 0; }
.modal .team-goals.big .ok { color: #14653a; }
.team-today { text-align: center; font-size: .8rem; margin-top: 4px; color: var(--muted); }
.team-chart { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 140px; padding-top: 18px; }
.team-chart div { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.team-chart i { width: 100%; background: linear-gradient(#f4c95d, #2a9d8f); border-radius: 3px 3px 0 0; min-height: 2px; }
.team-chart b { position: absolute; top: -16px; font-size: .65rem; }
.team-chart small { font-size: .6rem; opacity: .6; }

/* ---------- Énigmes coopératives ---------- */
.coop { border: 3px dashed #2a9d8f; background: #e9f8f5; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.coop-head { font-weight: 900; color: #14653a; }
.coop-groups { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0; flex-wrap: wrap; }
.coop-groups > div:not(.coop-arrow) { background: #fff; border-radius: 12px; padding: 6px 16px; text-align: center; min-width: 150px; }
.coop-groups small { display: block; font-size: .72rem; opacity: .7; }
.coop-groups b { font-size: 1.15rem; }
.coop-me { border: 3px solid #2a9d8f; }
.coop-find { border: 3px dashed #f59e0b; }
.coop-arrow { font-size: 1.4rem; color: #2a9d8f; }
.coop-part { margin-top: 8px; }
.coop-label { font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #2a9d8f; margin-bottom: 4px; }
.coop-admin { margin-top: 10px; font-size: .85rem; }
.coop-count { background: #fff; border-radius: 10px; padding: 6px 12px; margin: 8px 0; font-size: .88rem; text-align: center; }
.coop-count span { white-space: nowrap; }
.coop-count span.none { color: #c2410c; }
.coop-count small { color: #c2410c; }
.coop-sos { margin-top: 10px; }
.coop-part.sos .coop-label { color: #7c3aed; }
.labels .missing { background: #aaa; opacity: .6; }
.door .coop-badge { position: absolute; bottom: 6px; right: 8px; font-size: .9rem; }
.replay-ep { margin-top: 10px; margin-right: 8px; }

/* ---------- Admin : gérer les parties ---------- */
.games-search { width: 100%; padding: 8px 14px; border-radius: 99px; border: 2px solid #d6c7a1; font: inherit; margin: 6px 0 10px; }
.tbl.games th img { height: 26px; vertical-align: middle; image-rendering: pixelated; }
.tbl.games code { font-family: 'Courier New', monospace; font-weight: 900; letter-spacing: .05em; }
.tbl.games td, .tbl.games th { text-align: left; }
.btn.danger { background: #b91c1c; box-shadow: 0 3px 0 #7f1d1d; }
.btn.ghost.danger { background: transparent; color: #b91c1c; border-color: #b91c1c; box-shadow: none; }

/* ---------- Code agent / sauvegarde ---------- */
.save-box { margin-top: 18px; padding-top: 12px; border-top: 2px dashed #e3d3b0; }
.save-box h3 { margin: 0 0 6px; }
.agent-code { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.agent-code code { font-family: 'Courier New', monospace; font-weight: 900; font-size: 1.3rem; letter-spacing: .12em; background: var(--ink); color: var(--gold); padding: 6px 14px; border-radius: 8px; user-select: all; }
.agent-code.big code { font-size: 1.7rem; }
.resume-btn { display: block; margin: 14px auto 0; }
.save-box label.btn, .modal label.btn { cursor: pointer; }

/* ---------- Chrono, détail des points, tableau des temps ---------- */
.day-head .chrono { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; background: var(--ink); color: #fff; padding: 4px 12px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.day-head .chrono b { font-size: 1.2rem; }
.day-head .chrono small { font-size: .7rem; opacity: .7; }
.time-done { font-size: 1.05rem; }
.pts-detail { list-style: none; padding: 0; margin: 10px auto 16px; max-width: 320px; text-align: left; }
.pts-detail li { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed #e3d3b0; }
.pts-detail li b { font-variant-numeric: tabular-nums; }
.pts-detail li.tot { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 6px; color: var(--red); }
.tbl-wrap { overflow: auto; max-height: 60vh; border: 1px solid #e3d3b0; border-radius: 8px; background: #fff; }
.tbl { border-collapse: collapse; font-size: .8rem; width: 100%; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { padding: 5px 6px; border-bottom: 1px solid #f0e6cf; text-align: center; white-space: nowrap; }
.tbl thead th { position: sticky; top: 0; background: var(--ink); color: #fff; z-index: 1; }
.tbl tbody th { position: sticky; left: 0; background: #fffaf0; text-align: left; z-index: 1; }
.tbl.stats tbody th { white-space: normal; min-width: 160px; }
.tbl td i { font-style: normal; font-size: .7rem; margin-left: 2px; }
.tbl .fast, .legend-times .fast { background: #dcf5e6; color: #14653a; }
.tbl .mid, .legend-times .mid { background: #fff1d6; color: #8a5a00; }
.tbl .slow, .legend-times .slow { background: #fde3e3; color: #9b1c1c; }
.tbl .open, .legend-times .open { color: #666; font-style: italic; background: #f3f3f3; }
.tbl .none { color: #ccc; }
.tbl .tot { font-weight: 900; }
.legend-times { display: flex; flex-wrap: wrap; gap: 6px; font-size: .75rem; font-weight: 700; margin: 6px 0; }
.legend-times span { padding: 2px 8px; border-radius: 99px; }

/* ---------- Console du serveur (n°23) ---------- */
.hterm { width: 100%; height: 380px; overflow-y: auto; background: #050b05; color: #c8facc; font-family: 'VT323', 'Courier New', monospace; font-size: 1.15rem; line-height: 1.25; padding: 12px 14px; border-radius: 10px; border: 3px solid #1b3a1b; box-shadow: inset 0 0 40px rgba(61,255,138,.08); cursor: text; text-align: left; }
.hterm-out > div { white-space: pre-wrap; word-break: break-word; }
.hterm-out .err { color: #ff7a8a; }
.hterm-out .ok { color: #3dff8a; text-shadow: 0 0 6px rgba(61,255,138,.6); }
.hterm-out .dim { opacity: .6; }
.hterm-out .file-content { color: #fff; border-left: 2px solid #3dff8a; padding-left: 10px; margin: 4px 0; }
.hterm-prompt { color: #3dff8a; }
.hterm-line { display: flex; gap: 8px; align-items: baseline; }
.hterm-line input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; font: inherit; caret-color: #3dff8a; }
.hterm-link { cursor: pointer; text-decoration: underline dotted; }
.hterm-link.dir { color: #7dd3fc; }
.hterm-link.file { color: #fff7a8; }
.hterm-link:hover { background: rgba(61,255,138,.2); }
.hterm-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.hterm-chips .btn { font-family: 'Courier New', monospace; }

/* ---------- Choix du personnage ---------- */
#agent { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); border-radius: 99px; padding: 2px 12px 2px 4px; color: var(--muted); font-weight: 700; }
#agent:hover { background: rgba(255,255,255,.18); color: #fff; }
#agent[hidden] { display: none; }
#agent .edit { font-size: .8rem; }
#agent img { height: 34px; image-rendering: pixelated; }
.avatar-pick h3 { margin: 14px 0 6px; }
.avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.avatar { background: #fff; border: 2px solid #e3d3b0; border-radius: 10px; padding: 6px 2px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .1s; }
.avatar img { height: 64px; image-rendering: pixelated; }
.avatar span { font-size: .75rem; font-weight: 700; }
.avatar:hover { transform: translateY(-2px); }
.avatar.sel { border-color: var(--red); background: #ffe9ea; box-shadow: 0 0 0 2px var(--red); }

/* ---------- Salles explorables ---------- */
.room-wrap { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scene-room { position: relative; width: 100%; max-width: 760px; border-radius: 12px; overflow: hidden; cursor: pointer; user-select: none;
  background: #222 center / cover no-repeat; box-shadow: 0 10px 30px rgba(0,0,0,.4); border: 3px solid var(--ink); }
.r-spot { position: absolute; z-index: 5; border-radius: 10px; transition: box-shadow .2s, background .2s; }
.r-spot:not(.r-emoji):hover, .r-spot:not(.r-emoji).near { box-shadow: 0 0 0 3px rgba(255,247,168,.9), 0 0 18px rgba(255,247,168,.8); background: rgba(255,247,168,.12); }
.r-emoji { z-index: 6; /* toujours cliquable par-dessus les zones du décor (portes...) */ width: auto; height: auto; transform: translate(-50%, -50%); line-height: 1; filter: drop-shadow(0 3px 2px rgba(0,0,0,.45)); transition: transform .15s, filter .15s; }
.r-emoji:hover, .r-emoji.near { transform: translate(-50%, -50%) scale(1.15); filter: drop-shadow(0 0 6px #fff7a8) drop-shadow(0 0 2px #fff); }
.r-spot.near { animation: nearPulse 1s ease-in-out infinite alternate; }
/* Lettres cachées dans le décor (salle 1) : aucune mise en valeur, elles doivent se fondre dans l'image */
.r-emoji.hidden-letter, .r-emoji.hidden-letter:hover { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); filter: none; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; cursor: inherit; animation: none; }
.r-emoji.secret { opacity: .45; filter: saturate(.6); } /* objets cachés : discrets, mais trouvables */
.r-emoji.secret:hover, .r-emoji.secret.near { opacity: 1; filter: drop-shadow(0 0 8px #fff7a8); }
@keyframes nearPulse { to { filter: drop-shadow(0 0 10px #fff7a8) brightness(1.15); } }
.r-spot.cloth { background: repeating-linear-gradient(45deg, #eee 0 3px, #d6d6d6 3px 6px); border-radius: 4px 4px 30% 30%; padding: .1em; }
.r-spot.switch { background: linear-gradient(#fff, #e6e6e6); border: 1px solid #999; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.r-spot.switch::after { content: ''; position: absolute; left: 30%; right: 30%; top: 25%; bottom: 25%; background: #ccc; border: 1px solid #999; border-radius: 2px; }
.r-screen { position: absolute; z-index: 4; border-radius: 3px; background: #8fdcff; opacity: .05; transition: opacity .05s; pointer-events: none; }
.r-screen.lit { opacity: .22; }
.scene-room.is-dark .r-screen.lit { opacity: 1; box-shadow: 0 0 30px 10px #8fdcff; }
.modal.xwide .modal-box { max-width: 920px; }
.r-agent { position: absolute; transform: translate(-50%, -100%); pointer-events: none; display: flex; justify-content: center; }
.r-agent img { height: 100%; width: auto; display: block; image-rendering: pixelated; transform-origin: 50% 100%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.r-shadow { position: absolute; left: 50%; bottom: -3%; width: 90%; height: 9%; transform: translateX(-50%); background: radial-gradient(rgba(0,0,0,.45), transparent 70%); }
.r-label { position: absolute; z-index: 210; transform: translate(-50%, -110%); background: rgba(13,27,42,.9); color: #fff; font-size: .8rem; padding: 3px 10px; border-radius: 99px; white-space: nowrap; pointer-events: none; }
.r-label b { color: var(--gold); }
.room-dark { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 200; }
.r-dialog { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: min(560px, 94%); z-index: 300;
  background: #fffdf5; color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: fade .15s; }
.r-dialog .btn { margin-top: 8px; float: right; }
.r-dialog::after { content: ''; display: block; clear: both; }
.r-got { margin-top: 8px; background: #fff1c2; border-radius: 8px; padding: 6px 10px; }
/* Inventaire dans la scène, en haut à gauche, au-dessus de l'obscurité */
.r-invbar { position: absolute; top: 8px; left: 8px; z-index: 250; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 16px);
  background: rgba(13,27,42,.82); border: 2px solid #f4c95d; border-radius: 14px; padding: 6px 8px; box-shadow: 0 4px 14px rgba(0,0,0,.45); cursor: default; }
.r-inv-label { font-size: max(22px, calc(var(--w) * .035)); }
.r-inv { display: flex; flex-wrap: wrap; gap: 5px; }
.r-item, .r-slot { width: max(38px, calc(var(--w) * .068)); height: max(38px, calc(var(--w) * .068)); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0; }
.r-item { font-size: max(22px, calc(var(--w) * .042)); font-weight: 900; font-family: 'Courier New', monospace; color: var(--ink); background: linear-gradient(#fffbea, #fff1c2); border: 3px solid #f4c95d; box-shadow: 0 0 10px rgba(244,201,93,.6); cursor: pointer; }
.r-item:hover { transform: scale(1.08); }
.r-item.new { animation: itemPop .7s cubic-bezier(.2,1.6,.4,1); }
@keyframes itemPop { 0% { transform: scale(0) rotate(-20deg); } 60% { transform: scale(1.35); box-shadow: 0 0 24px #fff7a8; } }
.r-slot { border: 2px dashed rgba(255,255,255,.35); color: rgba(255,255,255,.35); font-weight: 900; font-size: max(16px, calc(var(--w) * .03)); }
/* objets qui cachent encore quelque chose (salle tutoriel) */
.r-spot.has-item::after { content: '✨'; position: absolute; top: -6px; right: -6px; font-size: max(16px, calc(var(--w) * .03)); animation: sparkle 1.2s ease-in-out infinite; pointer-events: none; }
.r-emoji.has-item::after { top: -40%; right: -40%; }
@keyframes sparkle { 0%, 100% { opacity: .3; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }
.r-help { font-size: .8rem; opacity: .7; text-align: center; }
.room-pad { grid-template-columns: repeat(3, 48px); }
.room-pad .act { background: var(--gold); }
@media (hover: hover) and (pointer: fine) { .room-pad { display: none; } } /* souris + clavier : pas besoin des flèches à l'écran */
.r-panel h3, .r-padlock h3 { margin-top: 0; }
.caesar { display: grid; gap: 6px; }
.c-ctrl { display: flex; align-items: center; justify-content: center; gap: 12px; }
.c-row { display: flex; gap: 2px; font-family: 'Courier New', monospace; font-weight: 900; font-size: clamp(.6rem, 1.6vw, .95rem); }
.c-row i { font-style: normal; flex: 1 1 0; min-width: 0; text-align: center; background: #fff; border: 1px solid #e3d3b0; border-radius: 3px; padding: 2px 0; }
.c-row.dec i { background: #fff1c2; color: var(--red); }
.c-lab { flex: 0 0 auto; width: 3.6em; font-size: .7rem; align-self: center; }
.sms { background: #c9d6a3; color: #1d2a12; font-family: 'VT323', monospace; font-size: 1.4rem; padding: 10px 14px; border-radius: 6px; border: 4px solid #555; margin-bottom: 10px; text-align: center; }
.r-terminal { background: #050b05; color: #3dff8a; font-family: 'VT323', monospace; font-size: 1.25rem; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
.r-terminal pre { margin: 0 0 8px; white-space: pre-wrap; font: inherit; }
.r-terminal form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.r-terminal input { flex: 1; min-width: 120px; background: transparent; border: 0; border-bottom: 2px solid #3dff8a; color: #fff; font: inherit; text-transform: uppercase; outline: none; }
.r-terminal .out.ok { color: #3dff8a; text-shadow: 0 0 8px #3dff8a; }
.r-terminal .out.ko { color: #ff5c7a; }
.r-padlock { text-align: center; }
.r-padlock .wheels { display: flex; justify-content: center; gap: 10px; margin: 10px 0; }
.wheel { display: flex; flex-direction: column; background: linear-gradient(#999, #ddd 30%, #fff 50%, #ddd 70%, #999); border-radius: 8px; border: 2px solid #555; width: 54px; }
.wheel button { background: none; border: 0; font-size: 1rem; padding: 4px; }
.wheel b { font-size: 2rem; font-family: 'Courier New', monospace; }
.r-padlock.open h3 { color: var(--green2); }

/* ---------- Décor de fond ---------- */
.decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sky-stars { position: absolute; inset: 0; background-image:
  radial-gradient(1.5px 1.5px at 10% 15%, #fff, transparent), radial-gradient(1px 1px at 25% 35%, #fff, transparent),
  radial-gradient(2px 2px at 40% 10%, #fff8c4, transparent), radial-gradient(1px 1px at 55% 28%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 70% 8%, #fff, transparent), radial-gradient(1px 1px at 85% 30%, #fff, transparent),
  radial-gradient(2px 2px at 92% 18%, #fff8c4, transparent), radial-gradient(1px 1px at 5% 45%, #fff, transparent),
  radial-gradient(1px 1px at 33% 52%, #fff, transparent), radial-gradient(1.5px 1.5px at 62% 48%, #fff, transparent);
  animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .4; } to { opacity: 1; } }
.moon { position: absolute; top: 70px; right: 6%; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbe6, #f4e7b0 60%, #d9c98a); box-shadow: 0 0 60px 20px rgba(255,248,200,.25); }
.moon::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.06); top: 45%; left: 25%; box-shadow: 30px -18px 0 -4px rgba(0,0,0,.05); }
.sleigh { position: absolute; top: 120px; left: -200px; font-size: 2rem; white-space: nowrap; filter: drop-shadow(0 0 6px rgba(255,255,255,.5)); animation: fly 28s linear infinite 3s; }
.sleigh span { display: inline-block; transform: scaleX(-1); }
@keyframes fly { 0% { transform: translate(0, 0); } 45% { transform: translate(calc(100vw + 400px), -60px); } 100% { transform: translate(calc(100vw + 400px), -60px); } }
.village { position: absolute; bottom: 0; left: 0; width: 100%; height: 220px; opacity: .9; }
.village .win { fill: #ffcf5c; animation: lamp 3s infinite alternate; }
.village .win.w2 { animation-delay: 1.3s; }
@keyframes lamp { from { fill: #ffcf5c; } to { fill: #ffe9a8; } }
main { padding-bottom: 160px; }

.garland { position: fixed; top: 0; left: 0; right: 0; height: 36px; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 60px 22px at 50% -6px, transparent 90%, #1b5e3a 92%, transparent 100%) 0 0 / 92px 30px repeat-x; }
.garland i { position: absolute; width: 10px; height: 15px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; transform: translateX(-50%); animation: blink 1.4s infinite alternate; }
.garland i::before { content: ''; position: absolute; top: -4px; left: 2px; width: 6px; height: 5px; background: #333; border-radius: 2px; }
.garland i:nth-child(4n+1) { background: #ff3b3b; color: #ff3b3b; }
.garland i:nth-child(4n+2) { background: #ffd23b; color: #ffd23b; animation-delay: .35s; }
.garland i:nth-child(4n+3) { background: #3bd4ff; color: #3bd4ff; animation-delay: .7s; }
.garland i:nth-child(4n) { background: #4cff7a; color: #4cff7a; animation-delay: 1.05s; }
@keyframes blink { from { opacity: .35; box-shadow: none; } to { opacity: 1; box-shadow: 0 0 12px 3px currentColor; } }
header { padding-top: 34px; }

.logo-badge { display: inline-block; background: #fff; border-radius: 14px; padding: 10px 18px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.logo-badge img { display: block; height: 52px; width: auto; }
.logo-badge.small { padding: 5px 10px; border-radius: 10px; margin-bottom: 6px; }
.logo-badge.small img { height: 26px; }

.mati-corner { position: fixed; right: 14px; bottom: 10px; z-index: 5; background: none; border: 0; padding: 0; width: 70px; animation: bob 3s ease-in-out infinite; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.mati-corner img { width: 100%; display: block; }
.mati-corner:hover { animation-duration: .6s; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-3deg); } }
.mati-bubble { position: fixed; right: 92px; bottom: 90px; z-index: 6; max-width: 260px; background: #fff; color: var(--ink); padding: 10px 14px; border-radius: 14px 14px 2px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.4); font-weight: 700; font-size: .92rem; border: 3px solid #29a9d6; animation: fade .25s; }
.intro-mati { float: right; width: 90px; margin: 0 0 8px 12px; animation: bob 3s ease-in-out infinite; }

/* ---------- Cinématique ---------- */
.cine { position: fixed; inset: 0; z-index: 100; background: #000; color: #fff; overflow: hidden; cursor: pointer; transition: opacity .6s, background .4s; }
.cine.out { opacity: 0; }
.cine.red { background: #1a0006; }
.cine.shake { animation: shakeScreen .12s linear 6; }
@keyframes shakeScreen { 25% { transform: translate(-8px, 4px); } 50% { transform: translate(6px, -6px); } 75% { transform: translate(-4px, -3px); } }
.cine-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.cine-skip { position: absolute; top: 16px; right: 16px; z-index: 3; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; padding: 8px 16px; }
.cine-hint { position: absolute; bottom: 16px; width: 100%; text-align: center; font-size: .8rem; opacity: .45; animation: twinkle 1.2s infinite alternate; }

.cine-terminal { font-family: 'VT323', monospace; font-size: clamp(1.2rem, 3.4vw, 2rem); color: #3dff8a; text-shadow: 0 0 8px #3dff8a; max-width: 760px; width: 100%; }
.cine-terminal p { margin: .25em 0; min-height: 1.2em; }
.cine-terminal p:last-child::after { content: '▌'; animation: twinkle .5s infinite alternate; }
.cine-terminal p.alert { color: #ff3b5c; text-shadow: 0 0 10px #ff3b5c; }

.cine-matrix { position: absolute; inset: 0; opacity: .35; }
.cine-hack { position: relative; text-align: center; max-width: 760px; font-family: 'VT323', monospace; }
.cine-hack .skull { font-size: clamp(4rem, 14vw, 7rem); animation: pulse .5s infinite alternate; filter: drop-shadow(0 0 20px #ff2b4e); }
@keyframes pulse { to { transform: scale(1.08); } }
.glitch { position: relative; font-family: 'VT323', monospace; font-size: clamp(3rem, 13vw, 7rem); letter-spacing: .1em; margin: 0; color: #fff; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; }
.glitch::before { color: #ff2b4e; animation: glitch1 .9s infinite steps(2); }
.glitch::after { color: #29d6ff; animation: glitch2 .7s infinite steps(2); }
@keyframes glitch1 { 0% { clip-path: inset(0 0 60% 0); transform: translate(-4px, -2px); } 50% { clip-path: inset(40% 0 20% 0); transform: translate(4px, 2px); } 100% { clip-path: inset(70% 0 0 0); transform: translate(-2px, 1px); } }
@keyframes glitch2 { 0% { clip-path: inset(50% 0 10% 0); transform: translate(4px, 1px); } 50% { clip-path: inset(10% 0 70% 0); transform: translate(-4px, -1px); } 100% { clip-path: inset(30% 0 40% 0); transform: translate(2px, 2px); } }
.cine-hack .enc { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 14px 0; font-size: 1.3rem; flex-wrap: wrap; }
.cine-hack .bar { width: 160px; height: 14px; border: 2px solid #ff2b4e; }
.cine-hack .bar i { display: block; height: 100%; width: 0; background: #ff2b4e; animation: fill 2.5s forwards; }
@keyframes fill { to { width: 100%; } }
.cine-hack .lock { color: #ff2b4e; opacity: 0; animation: show .3s 2.5s forwards; }
@keyframes show { to { opacity: 1; } }
.cine-hack .msg { font-size: clamp(1.2rem, 3.5vw, 1.8rem); color: #ffd1d9; min-height: 6em; }
.cine-hack .msg p { margin: .2em 0; }

.scene-mati { background: radial-gradient(ellipse at center, #13294b, #050c18); }
.cine-mati { display: flex; align-items: flex-end; gap: 20px; max-width: 820px; width: 100%; }
.cine-mati img { width: clamp(110px, 24vw, 200px); animation: slideIn .8s cubic-bezier(.2,1.6,.4,1) both, bob 3s ease-in-out .8s infinite; }
@keyframes slideIn { from { transform: translateX(-120vw) rotate(-30deg); } }
.cine-mati .bubble { position: relative; flex: 1; min-width: 0; background: #fff; color: var(--ink); border-radius: 20px; padding: 18px 22px; font-size: clamp(1rem, 2.8vw, 1.35rem); border: 4px solid #29a9d6; margin-bottom: 40%; min-height: 6.5em; animation: fade .4s .7s both; }
.cine-mati .bubble::before { content: ''; position: absolute; left: -18px; bottom: 20px; border: 12px solid transparent; border-right: 16px solid #29a9d6; border-left: 0; }
.cine-mati .bubble b { color: #29a9d6; font-family: 'VT323', monospace; font-size: 1.4em; }
.cine-mati .bubble p { margin: .3em 0 0; }

.scene-title { background: radial-gradient(ellipse at top, #13294b, #0d1b2a 70%); }
.cine-title { text-align: center; position: relative; width: 100%; }
.cine-title .logo-badge { animation: drop 1s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes drop { from { transform: translateY(-60vh); opacity: 0; } }
.cine-title .presents { letter-spacing: .4em; text-transform: uppercase; color: var(--muted); animation: fade 1s .9s both; }
.cine-title h1 { font-size: clamp(2.6rem, 9vw, 5.5rem); animation: zoomIn 1.2s 1.2s both; text-shadow: 0 0 30px rgba(244,201,93,.5); }
@keyframes zoomIn { from { transform: scale(.3); opacity: 0; filter: blur(10px); } }
.cine-title .tag { color: var(--gold); animation: fade 1s 2s both; }
.btn.big { font-size: 1.2rem; padding: 14px 28px; margin-top: 10px; animation: fade 1s 2.4s both, glowBtn 1.5s 3s infinite alternate; }
@keyframes glowBtn { to { box-shadow: 0 3px 0 #7a0a13, 0 0 30px var(--red2); } }
.cine-flake { position: absolute; top: -10vh; color: #fff; opacity: .7; animation: fallFlake 6s linear infinite; pointer-events: none; }
@keyframes fallFlake { to { transform: translateY(120vh) rotate(360deg); } }

/* Épisodes du feuilleton */
.scene-dialog { background: radial-gradient(ellipse at center, #1a1030, #05030c); }
.cine.glitch-flash { animation: shakeScreen .08s linear 3; }
.cine-dialog { width: 100%; max-width: 900px; }
.ep-title { text-align: center; font-family: 'VT323', monospace; font-size: 1.5rem; color: var(--gold); letter-spacing: .1em; margin-bottom: 18px; }
.ep-stage { display: grid; grid-template-columns: 1fr 2.4fr 1fr; align-items: end; gap: 16px; }
.ep-char { text-align: center; opacity: .35; filter: grayscale(.7); transition: all .3s; }
.ep-char b { display: block; font-family: 'VT323', monospace; font-size: 1.2rem; letter-spacing: .1em; }
.ep-char.talk { opacity: 1; filter: none; transform: translateY(-8px) scale(1.06); }
.ep-char.k .ep-face { font-size: clamp(3.5rem, 11vw, 6rem); filter: drop-shadow(0 0 18px #ff2b4e); }
.ep-char.k.talk .ep-face { animation: pulse .4s infinite alternate; }
.ep-char.k b { color: #ff5c7a; }
.ep-char.m img { width: clamp(70px, 14vw, 120px); }
.ep-char.m.talk img { animation: bob 1.2s ease-in-out infinite; }
.ep-char.m b { color: #29a9d6; }
.ep-bubble { background: #fff; color: var(--ink); border-radius: 18px; padding: 16px 20px; min-height: 7em; font-size: clamp(1rem, 2.4vw, 1.25rem); border: 4px solid #999; align-self: center; }
.ep-bubble .who { display: block; font-family: 'VT323', monospace; font-size: 1.3em; }
.ep-bubble p { margin: .3em 0 0; }
.ep-bubble.sp-k { border-color: #ff2b4e; background: #1a0006; color: #ffd1d9; font-family: 'VT323', monospace; font-size: clamp(1.15rem, 2.8vw, 1.5rem); }
.ep-bubble.sp-k .who { color: #ff5c7a; }
.ep-bubble.sp-m { border-color: #29a9d6; }
.ep-bubble.sp-m .who { color: #29a9d6; }
.ep-bubble.sp-n { border-color: var(--gold); font-style: italic; background: #fffaf0; }
@media (max-width: 700px) {
  .ep-stage { grid-template-columns: 1fr 1fr; }
  .ep-bubble { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .sleigh, .cine.shake, .glitch::before, .glitch::after, .mati-corner { animation: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  .calendar { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  header { padding: 12px 16px; }
  .modal-box { padding: 22px 14px; }
  .parch .slots { grid-template-columns: repeat(8, 1fr); }
  .memory { grid-template-columns: repeat(4, 1fr); }
  .card { font-size: 1.5rem; }
  .moon { width: 56px; height: 56px; top: 50px; }
  .village { height: 140px; }
  .mati-corner { width: 52px; }
  .mati-bubble { right: 70px; bottom: 70px; max-width: 200px; }
  .cine-mati { flex-direction: column; align-items: center; }
  .cine-mati .bubble { margin-bottom: 0; }
  .cine-mati .bubble::before { display: none; }
}
@media (max-width: 380px) { .calendar { grid-template-columns: repeat(3, 1fr); } }