* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Courier New', monospace;
overflow: hidden;
}
#game-container {
width: 900px;
height: 600px;
position: relative;
overflow: hidden;
border: 2px solid #1a1a2e;
}
#world {
width: 3200px;
height: 3200px;
position: absolute;
top: 0;
left: 0;
background: #0a0a0f;
}
.tile-wall {
position: absolute;
width: 32px;
height: 32px;
background: #1a1a2e;
border: 1px solid #0d0d1a;
}
.tile-wall::after {
content: '';
position: absolute;
inset: 2px;
background: linear-gradient(135deg, #222244 0%, #111122 100%);
}
.tile-floor {
position: absolute;
width: 32px;
height: 32px;
background: #0f0f1a;
border: 1px solid #0a0a14;
}
#player {
position: absolute;
width: 32px;
height: 32px;
z-index: 5;
}
.player-lamp {
position: absolute;
width: 8px; height: 8px;
top: 0px; left: 12px;
background: #ffd700;
border-radius: 50%;
box-shadow: 0 0 8px #ffd700, 0 0 16px rgba(255,215,0,0.5);
}
.player-head {
position: absolute;
width: 18px; height: 14px;
left: 7px; top: 6px;
background: #f5c5a3;
}
.player-eyes {
position: absolute;
width: 3px; height: 3px;
background: #1a1a2e;
top: 4px; left: 3px;
box-shadow: 6px 0 0 #1a1a2e;
}
.player-body {
position: absolute;
width: 20px; height: 14px;
left: 6px; top: 18px;
background: #4a90d9;
}
.star-el {
position: absolute;
width: 24px; height: 24px;
z-index: 15;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
animation: starFloat 2s ease-in-out infinite;
filter: drop-shadow(0 0 4px #aaf) drop-shadow(0 0 8px #66f);
text-shadow: 0 0 6px #fff, 0 0 12px #aaf, 0 0 20px #66f;
}
@keyframes starFloat {
0%, 100% { transform: translateY(0px) scale(1); }
50% { transform: translateY(-5px) scale(1.1); }
}
.exit-el {
position: absolute;
width: 48px;
height: 64px;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.exit-crack {
width: 10px;
height: 64px;
background: #1a1a2e;
border: 2px solid #333;
position: relative;
border-radius: 2px;
transition: all 0.5s;
}
.exit-crack.open {
width: 44px;
background: linear-gradient(to bottom, #87ceeb, #ffe066 60%, #90ee90);
border-color: #ffd700;
box-shadow:
0 0 20px #ffd700,
0 0 40px #ffe066,
0 0 80px rgba(255,220,50,0.6),
inset 0 0 20px rgba(255,255,200,0.4);
border-radius: 4px 4px 0 0;
}
.exit-crack::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 4px;
opacity: 0;
transition: opacity 0.5s;
}
.exit-crack.open::before {
opacity: 1;
background: radial-gradient(ellipse, rgba(255,230,100,0.3) 0%, transparent 70%);
animation: exitPulse 1.5s ease-in-out infinite;
}
@keyframes exitPulse {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.1); opacity: 1; }
}
.exit-el.visible-through-dark {
z-index: 15;
}
#darkness {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
}
#world-top {
position: absolute;
inset: 0;
z-index: 12;
pointer-events: none;
overflow: hidden;
}
#hud {
position: absolute;
top: 10px; left: 10px;
z-index: 30;
color: #fff;
display: flex;
gap: 16px;
align-items: center;
}
#star-counter {
  background: rgba(0,0,0,0.7);
  border: 1px solid #444;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 16px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;  /* ← Aligne verticalement */
  gap: 8px;            /* ← Espace entre l'image et le texte */
}
#life-bar .heart.lost {
  opacity: 0.3;
  filter: grayscale(100%);
}


#life-bar {
background: rgba(0,0,0,0.8);
border: 1px solid #444;
padding: 6px 10px;
border-radius: 4px;
font-size: 15px;
display: flex;
gap: 4px;
}
.heart { transition: opacity 0.3s; }
.heart.lost { opacity: 0.2; filter: grayscale(1); }
#exit-hint {
position: absolute;
top: 10px; right: 10px;
z-index: 30;
background: rgba(0,0,0,0.8);
border: 1px solid #444;
padding: 6px 14px;
color: #888;
font-size: 13px;
border-radius: 4px;
}
#message {
position: absolute;
bottom: 20px; left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.9);
border: 1px solid #555;
color: #fff;
padding: 8px 20px;
border-radius: 4px;
font-size: 14px;
z-index: 30;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
white-space: nowrap;
}
#intro {
position: absolute;
inset: 0;
background: #000;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
color: #fff;
}
#intro h1 {
font-size: 42px;
letter-spacing: 6px;
text-shadow: 0 0 30px #aaf, 0 0 60px #66f;
animation: pulse 2s ease-in-out infinite;
}
#intro p { color: #888; font-size: 14px; text-align: center; line-height: 2; }
#start-btn {
padding: 12px 40px;
border: 2px solid #aaf;
background: transparent;
color: #aaf;
font-family: 'Courier New', monospace;
font-size: 18px;
cursor: pointer;
letter-spacing: 3px;
}
#start-btn:hover { background: #aaf; color: #000; }
#minigame-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.93);
z-index: 50;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
color: #fff;
}
#minigame-overlay.active { display: flex; }
#mg-title { font-size: 20px; text-shadow: 0 0 10px #aaf; letter-spacing: 2px; }
#mg-sub { color: #aaa; font-size: 13px; }
#mg-lives { display: flex; gap: 4px; font-size: 18px; }
#battle-box {
width: 300px; height: 200px;
border: 3px solid #fff;
position: relative;
background: #000;
overflow: hidden;
}
#battle-heart {
position: absolute;
width: 16px; height: 16px;
font-size: 16px;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
.proj { position: absolute; background: #fff; z-index: 4; }
.proj-h { height: 8px; width: 55px; }
.proj-v { width: 8px; height: 55px; }
.proj-s {
width: 14px; height: 14px;
background: transparent;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
#mg-result { font-size: 18px; min-height: 22px; text-shadow: 0 0 10px currentColor; }
#mg-buttons { display: flex; gap: 16px; }
.mg-btn {
padding: 10px 28px;
font-family: 'Courier New', monospace;
font-size: 15px;
border: 2px solid #fff;
background: #000;
color: #fff;
cursor: pointer;
letter-spacing: 1px;
}
.mg-btn:hover { background: #fff; color: #000; }
.mg-btn.flee { border-color: #888; color: #888; }
.mg-btn.flee:hover { background: #888; color: #000; }
/* ÉCRAN VICTOIRE */
#victory-screen {
position: absolute;
inset: 0;
z-index: 90;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
#victory-screen.active { display: flex; }
#field-bg {
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
#87ceeb 0%,
#b0e0ff 35%,
#90ee90 55%,
#5cb85c 100%
);
animation: fieldFadeIn 2s ease forwards;
opacity: 0;
}
@keyframes fieldFadeIn {
0% { opacity: 0; filter: brightness(0); }
100% { opacity: 1; filter: brightness(1); }
}
#sun {
position: absolute;
top: 40px; right: 120px;
width: 70px; height: 70px;
background: radial-gradient(circle, #fff7a0 30%, #ffd700 60%, transparent 100%);
border-radius: 50%;
box-shadow: 0 0 30px #ffd700, 0 0 60px rgba(255,215,0,0.5);
animation: sunRise 2.5s ease forwards;
opacity: 0;
}
@keyframes sunRise {
0% { opacity: 0; top: 120px; }
100% { opacity: 1; top: 40px; }
}
.cloud {
position: absolute;
background: #fff;
border-radius: 50px;
opacity: 0;
animation: cloudIn 3s ease forwards;
}
@keyframes cloudIn {
0% { opacity: 0; }
100% { opacity: 0.85; }
}
#ground {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 45%;
background: linear-gradient(to bottom, #5cb85c, #3d8b3d);
}
.flower {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
animation: flowerPop 0.5s ease forwards;
opacity: 0;
}
@keyframes flowerPop {
0% { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
70% { transform: scaleY(1.1); }
100% { opacity: 1; transform: scaleY(1); }
}
.flower-stem {
width: 3px;
background: #2d6a2d;
}
.flower-head {
font-size: 22px;
line-height: 1;
animation: sway 2s ease-in-out infinite;
}
@keyframes sway {
0%, 100% { transform: rotate(-5deg); }
50% { transform: rotate(5deg); }
}
.butterfly {
position: absolute;
font-size: 18px;
animation: flyAround linear infinite;
opacity: 0.9;
}
@keyframes flyAround {
0%   { transform: translate(0,0) rotate(0deg); }
25%  { transform: translate(40px,-30px) rotate(10deg); }
50%  { transform: translate(80px,10px) rotate(-5deg); }
75%  { transform: translate(40px,30px) rotate(8deg); }
100% { transform: translate(0,0) rotate(0deg); }
}
#victory-text {
position: relative;
z-index: 5;
text-align: center;
margin-top: -80px;
animation: textAppear 1s 1.5s ease forwards;
opacity: 0;
}
#victory-text h2 {
font-size: 38px;
color: #fff;
text-shadow: 2px 2px 0 #2d6a2d, 0 0 20px rgba(255,255,255,0.8);
letter-spacing: 4px;
margin-bottom: 10px;
}
#victory-text p {
color: #fff;
font-size: 14px;
text-shadow: 1px 1px 0 #2d6a2d;
line-height: 1.9;
}
@keyframes textAppear {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
#victory-restart {
position: relative;
z-index: 6;
margin-top: 20px;
padding: 12px 32px;
border: 2px solid #fff;
background: rgba(255,255,255,0.2);
color: #fff;
font-family: 'Courier New', monospace;
font-size: 16px;
cursor: pointer;
letter-spacing: 2px;
text-shadow: 1px 1px 0 #2d6a2d;
animation: textAppear 1s 2s ease forwards;
opacity: 0;
}
#victory-restart:hover { background: rgba(255,255,255,0.5); }
/* Personnage victoire */
#victory-player {
position: absolute;
width: 32px;
height: 32px;
z-index: 3;
bottom: 45%;
left: 384px;
}
/* GAME OVER */
#endscreen {
position: absolute;
inset: 0;
background: #000;
z-index: 80;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
color: #fff;
}
#endscreen.active { display: flex; }
#end-title { font-size: 36px; letter-spacing: 4px; animation: pulse 2s ease-in-out infinite; }
#end-msg { font-size: 15px; color: #aaa; text-align: center; line-height: 1.9; }
#restart-btn {
padding: 12px 32px;
border: 2px solid #ffd700;
background: transparent;
color: #ffd700;
font-family: 'Courier New', monospace;
font-size: 16px;
cursor: pointer;
letter-spacing: 2px;
}
#restart-btn:hover { background: #ffd700; color: #000; }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}

.mg-btn:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  background: #1a1a2e;
}

.mg-btn:focus-visible {
  background: #1a1a2e;
}

/* ── MINI-JEU TEXTES PLUS GRANDS ── */
#mg-title {
  font-size: 28px !important;
}

#mg-sub {
  font-size: 18px !important;
}

#arrow-combo {
  font-size: 12px !important;
  font-weight: bold;
}

#arrow-score-display {
  font-size: 10px !important;
}


#mg-result {
  font-size: 16px !important;
}

.mg-btn {
  font-size: 18px !important;
  padding: 14px 32px !important;
}

/* ── TEXTE D'INTRO MAP ── */
.map-intro-text {
  font-size: 24px !important;
  line-height: 1.6;
}