@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
  --yellow: #d4b832;
  --yellow-dark: #a89020;
  --yellow-light: #e8d060;
  --green-grey: #8a9a3a;
  --floor: #b8a030;
  --floor-dark: #907820;
  --wall-light: #e0cc50;
  --ceiling: #c8b838;
  --light-tube: #ffffc0;
  --kitty-pink: #ff69b4;
  --entity-brown: #3a2a10;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background:#111;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100vh;
  overflow:hidden;
  font-family:'VT323', monospace;
}

#hud {
  display:flex;
  gap:30px;
  margin-bottom:8px;
  color: var(--light-tube);
  font-size:24px;
  letter-spacing:2px;
  text-shadow: 0 0 8px var(--yellow-light);
  animation: flicker 5s infinite;
}
@keyframes flicker {
  0%,94%,96%,98%,100%{opacity:1}
  95%,97%{opacity:0.5}
}

/* ── VIEWPORT ── */
#viewport {
  width:900px;
  height:500px;
  overflow:hidden;
  position:relative;
  /* border:3px solid var(--yellow-dark);
  box-shadow: 0 0 30px rgba(212,184,50,0.4); */
}

/* ── WORLD ── */
#world {
  position:absolute;
  top:0; left:0;
  height:500px;
  will-change:transform;
}

/* ── BACKGROUND : papier peint backrooms en SVG repeatable ── */
#bg-sky {
  position:absolute;
  inset:0;
  /* Couleur de base jaune backrooms */
  background-color: #c8b432;
}

/* Papier peint : pattern SVG inline encodé */
#bg-wallpaper {
  position:absolute;
  left:0; top:0; right:0;
  height:390px; /* jusqu'au sol */
  background-image: url('pattern.png');
  background-repeat: repeat;
  background-size: 45px auto;
}

/* Plafond */
#bg-ceiling {
  position:absolute;
  left:0; top:0; right:0;
  height:80px;
  background: #b8a828;
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent 89px, rgba(0,0,0,0.15) 89px, rgba(0,0,0,0.15) 90px),
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(0,0,0,0.15) 27px, rgba(0,0,0,0.15) 28px);
  z-index:2;
}

/* Jonction plafond/mur */
#bg-cornice {
  position:absolute;
  left:0; top:78px; right:0;
  height:8px;
  background: #807010;
  z-index:2;
}

/* Sol moquette */
#bg-floor {
  position:absolute;
  left:0; bottom:0; right:0;
  height:130px;
  /* background: #a09020; */
  /* background-image: repeating-linear-gradient(
    90deg, transparent, transparent 49px,
    rgba(0,0,0,0.08) 49px, rgba(0,0,0,0.08) 50px
  ),
  repeating-linear-gradient(
    0deg, transparent, transparent 19px,
    rgba(0,0,0,0.08) 19px, rgba(0,0,0,0.08) 20px
  ); */
  z-index:2;
}

/* Plinthe */
#bg-baseboard {
  position:absolute;
  left:0; bottom:128px; right:0;
  height:10px;
  background: #706010;
  z-index:3;
}

/* Lights fluorescentes répétées */
.ceiling-light {
  position:absolute;
  top:10px;
  height:20px;
  width:110px;
  background: var(--light-tube);
  border-radius:2px;
  box-shadow: 0 0 18px 6px rgba(255,255,200,0.5), 0 0 40px 10px rgba(255,255,180,0.2);
  z-index:3;
  animation: light-flicker 8s infinite;
}
@keyframes light-flicker {
  0%,92%,94%,96%,100%{opacity:1}
  93%{opacity:0.3}
  95%{opacity:0.8}
}

/* ── PLATFORMS ── */
.platform {
  position:absolute;
  z-index:4;
}
.platform.ground {
  background: #907818;
  border-top: 8px solid #706010;
}
.platform.float {
  background: #a08820;
  border-top: 6px solid #c8aa30;
  border-radius:2px;
}

/* ── CHAISES (obstacles) ── */
.chair {
  position:absolute;
  width:36px;
  height:44px;
  z-index:5;
}
/* Dossier */
.chair::before {
  content:'';
  position:absolute;
  top:0; left:4px;
  width:28px; height:20px;
  background: #7a6010;
  border:2px solid #504008;
  border-radius:3px 3px 0 0;
}
/* Assise */
.chair::after {
  content:'';
  position:absolute;
  top:18px; left:2px;
  width:32px; height:10px;
  background: #9a7818;
  border:2px solid #504008;
  border-radius:2px;
}
/* Pieds via JS */

/* ── FLECHES SUR MUR ── */
.wall-arrow {
  position:absolute;
  z-index:4;
  color: var(--green-grey);
  font-size:32px;
  opacity:0.6;
  font-family: Arial, sans-serif;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

/* ── PORTE (fin de niveau) ── */
.door {
  position:absolute;
  width:60px;
  height:120px;
  z-index:5;
  background: #6a5010;
  border:4px solid #4a3808;
  border-radius:3px 3px 0 0;
  box-shadow: inset 0 0 20px rgba(255,200,50,0.3), 0 0 20px rgba(255,200,50,0.4);
}
.door::before {
  /* panneau haut */
  content:'';
  position:absolute;
  top:8px; left:6px;
  width:44px; height:40px;
  border:2px solid #4a3808;
  border-radius:2px;
}
.door::after {
  /* panneau bas */
  content:'';
  position:absolute;
  top:58px; left:6px;
  width:44px; height:50px;
  border:2px solid #4a3808;
  border-radius:2px;
}
.door .door-knob {
  position:absolute;
  right:8px; top:58px;
  width:7px; height:7px;
  background:#d4a020;
  border-radius:50%;
  box-shadow:0 0 6px rgba(255,200,50,0.8);
}
.door .door-glow {
  position:absolute;
  inset:-4px;
  border-radius:3px;
  box-shadow: 0 0 30px 10px rgba(255,220,80,0.5);
  animation: door-pulse 1.5s ease-in-out infinite;
}
.door .door-label {
  position:absolute;
  top:-28px; left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-family:'VT323',monospace;
  font-size:18px;
  color: var(--light-tube);
  text-shadow: 0 0 8px var(--yellow-light);
}
@keyframes door-pulse {
  0%,100%{opacity:0.6} 50%{opacity:1}
}

/* ── HELLO KITTY PLAYER ── */
#player {
  position:absolute;
  width:38px;
  height:52px;
  
  z-index:10;
  transition: transform 0.05s;
  background-image: url('Hello-Kitty-backrooms-personnage.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

/* === HELLO KITTY CSS ART === */
/* Tête */
.hk-head {
  position:absolute;
  width:34px; height:30px;
  background:#fff;
  border:2.5px solid #111;
  border-radius:50% 50% 45% 45%;
  top:0; left:2px;
}
/* Oreilles */
.hk-ear-l, .hk-ear-r {
  position:absolute;
  width:11px; height:11px;
  background:#fff;
  border:2.5px solid #111;
  top:-8px;
  border-radius:50% 50% 0 0;
}
.hk-ear-l { left:2px; }
.hk-ear-r { right:2px; }

/* Yeux */
.hk-eye-l, .hk-eye-r {
  position:absolute;
  width:5px; height:5px;
  background:#111;
  border-radius:50%;
  top:10px;
}
.hk-eye-l { left:6px; }
.hk-eye-r { right:6px; }

/* Nez */
.hk-nose {
  position:absolute;
  width:5px; height:3px;
  background:#e8a000;
  border-radius:50%;
  top:16px; left:50%;
  transform:translateX(-50%);
}

/* Moustaches */
.hk-whisker-l1, .hk-whisker-l2,
.hk-whisker-r1, .hk-whisker-r2 {
  position:absolute;
  height:1.5px;
  background:#888;
  top:17px;
}
.hk-whisker-l1 { width:12px; left:-2px; transform:rotate(-5deg); }
.hk-whisker-l2 { width:12px; left:-2px; top:20px; transform:rotate(5deg); }
.hk-whisker-r1 { width:12px; right:-2px; transform:rotate(5deg); }
.hk-whisker-r2 { width:12px; right:-2px; top:20px; transform:rotate(-5deg); }

/* Nœud */
.hk-bow {
  position:absolute;
  top:-4px; right:-2px;
  width:16px; height:12px;
}
.hk-bow::before, .hk-bow::after {
  content:'';
  position:absolute;
  width:7px; height:10px;
  background:#e8001a;
  border:1.5px solid #111;
  border-radius:50%;
  top:0;
}
.hk-bow::before { left:0; transform:rotate(-20deg); }
.hk-bow::after  { right:0; transform:rotate(20deg); }
.hk-bow-center {
  position:absolute;
  width:5px; height:5px;
  background:#ff4040;
  border:1.5px solid #111;
  border-radius:50%;
  top:3px; left:5px;
  z-index:2;
}

/* Corps */
.hk-body {
  position:absolute;
  top:28px; left:5px;
  width:28px; height:20px;
  background:#fff;
  border:2.5px solid #111;
  border-radius:3px;
}
/* T-shirt rouge */
.hk-shirt {
  position:absolute;
  top:30px; left:3px;
  width:32px; height:16px;
  background:#e8001a;
  border:2px solid #111;
  border-radius:3px;
}
/* Salopette bleue */
.hk-overalls {
  position:absolute;
  top:36px; left:6px;
  width:26px; height:14px;
  background:#1a60d0;
  border:2px solid #111;
  border-radius:2px;
}
/* Bras gauche */
.hk-arm-l {
  position:absolute;
  top:30px; left:-4px;
  width:10px; height:16px;
  background:#e8001a;
  border:2px solid #111;
  border-radius:5px;
  transform:rotate(10deg);
}
/* Bras droit (levé pour saluer) */
.hk-arm-r {
  position:absolute;
  top:26px; right:-6px;
  width:10px; height:16px;
  background:#e8001a;
  border:2px solid #111;
  border-radius:5px;
  transform:rotate(-30deg);
}
/* Pieds */
.hk-foot-l, .hk-foot-r {
  position:absolute;
  bottom:-2px;
  
  width:13px;
  height:8px;
  
  background-repeat: no-repeat;
  border-radius:0 0 6px 6px;
}
.hk-foot-l { left:9px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170.8 106.1'%3E%3Cpath d='M0 0v15l2 25q4 37 18 46 27 18 69 20h5q42 0 71-19l4-2 2-82z'/%3E%3C/svg%3E"); }
.hk-foot-r { right:7px; 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170.8 106.1'%3E%3Cpath d='M171 0 0 3l2 82 3 2q31 19 72 19h5q42-2 68-20 13-9 19-46l2-25z'/%3E%3C/svg%3E");}

/* Walk animation */
#player.walk .hk-foot-l { animation: foot-l 0.3s infinite alternate; }
#player.walk .hk-foot-r { animation: foot-r 0.3s infinite alternate; }
@keyframes foot-l { from{transform:translateY(0)} to{transform:translateY(-4px)} }
@keyframes foot-r { from{transform:translateY(-4px)} to{transform:translateY(0)} }

#player.flip { transform: scaleX(-1); }
#player.blink { animation: inv-blink 0.15s infinite; }
@keyframes inv-blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── ENTITE (arbre-créature) ── */
.entity {
  position:absolute;
  width:44px;
  height:90px;
  z-index:9;
  background-image: url(entity-base.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center ;
}

/* Corps tronc */

.ent-torso {
  position:absolute;
  bottom:30px;
  left:16px;
  width:12px;
  height:40px;
  background: var(--entity-brown);
  border-radius:6px;
  box-shadow: 0 0 8px rgba(60,40,10,0.8);
}
/* Ramifications corps */
.ent-torso::before {
  content:'';
  position:absolute;
  top:5px; left:-8px;
  width:10px; height:30px;
  background:var(--entity-brown);
  border-radius:5px;
  transform:rotate(20deg);
}
.ent-torso::after {
  content:'';
  position:absolute;
  top:5px; right:-8px;
  width:10px; height:30px;
  background:var(--entity-brown);
  border-radius:5px;
  transform:rotate(-20deg);
}

/* Tête / chapeau */
.ent-hat {
  position:absolute;
  bottom:66px; left:8px;
  width:28px; height:10px;
  background:#1a1000;
  border-radius:2px;
  border:1.5px solid #2a1800;
}
.ent-hat::before {
  content:'';
  position:absolute;
  bottom:8px; left:4px;
  width:20px; height:16px;
  background:#1a1000;
  border-radius:3px 3px 0 0;
  border:1.5px solid #2a1800;
}

/* Yeux lumineux */
.ent-eyes {
  position:absolute;
  bottom:68px; left:14px;
  display:flex; gap:6px;
}
.ent-eye {
  width:5px; height:5px;
  background:#d4a020;
  border-radius:50%;
  box-shadow:0 0 5px #d4a020;
  animation: ent-eye-blink 4s infinite;
}
@keyframes ent-eye-blink {
  0%,88%,92%,100%{transform:scaleY(1)}
  90%{transform:scaleY(0.05)}
}

/* Jambes-racines */
.ent-legs {
  position:absolute;
  bottom:0; left:0; right:0;
  height:37px;
}
.ent-leg {
  position:absolute;
  bottom:0;
  width:7px;
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  /* background:var(--entity-brown); */
  
  transform-origin: top center;
}
.ent-leg:nth-child(2){left:13px;  height:37px; transform:rotate(-20deg); background-image: url(leg-left.webp);}
.ent-leg:nth-child(1){left:25px; height:38px; width: 8px; transform:rotate(-8deg); background-image: url(leg-right.webp);}
.ent-leg:nth-child(3){left:22px; height:30px; transform:rotate(5deg);}
.ent-leg:nth-child(4){left:32px; height:28px; transform:rotate(18deg);}

/* Bras-tentacules */
.ent-arm {
  position:absolute;
  width:5px;
  background:var(--entity-brown);
  border-radius:3px;
  transform-origin: top center;
}
.ent-arm-l {
  bottom:52px; left:2px;
  height:22px;
  transform:rotate(35deg);
}
.ent-arm-r {
  bottom:55px; right:2px;
  height:26px;
  transform:rotate(-40deg);
}
.ent-arm-l::after, .ent-arm-r::after {
  content:'';
  position:absolute;
  bottom:0; left:-3px;
  width:5px; height:10px;
  background:var(--entity-brown);
  border-radius:2px;
  transform:rotate(20deg);
}

/* Walk anim entité */
.entity.walk-a .ent-leg:nth-child(odd)  { animation: ent-walk 0.4s alternate infinite; }
.entity.walk-b .ent-leg:nth-child(even) { animation: ent-walk 0.4s alternate infinite; }
@keyframes ent-walk {
  from{transform-origin:top;transform:rotate(-5deg)}
  to{transform-origin:top;transform:rotate(5deg)}
}

.entity.dead {
  animation: ent-die 0.5s forwards;
}
@keyframes ent-die {
  0%{opacity:1;transform:scale(1) rotate(0)}
  100%{opacity:0;transform:scale(0.1) rotate(180deg)}
}

/* ── COINS (nœuds) ── */
.coin {
  position:absolute;
  font-size:20px;
  z-index:6;
  animation: bow-float 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 4px #ff69b4);
}
@keyframes bow-float {
  0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}
}
.coin.collected { display:none; }

/* ── CHAISE OBSTACLE ── */
.chair-obj {
  position:absolute;
  z-index:5;
  width:40px;
  height:50px;
}
/* dessiné en SVG inline */

/* ── FLECHES MUR ── */
.arrow-sign {
  position:absolute;
  z-index:4;
  font-size:26px;
  color: #8a9a3a;
  opacity:0.75;
  font-weight:bold;
}

/* ── PARTICLES ── */
.particle {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:20;
  animation:part-out 0.6s forwards;
}
@keyframes part-out {
  from{opacity:1} to{opacity:0;transform:translateY(-18px) scale(0)}
}

/* ── OVERLAY ── */
#overlay {
  position:fixed; inset:0;
  background:rgba(5,4,0,0.93);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:18px; z-index:50;
}
#overlay h1 {
  font-size:54px;
  color: #ff69b4;
  text-shadow: 0 0 20px #ff69b4, 3px 3px 0 #8a0020;
  letter-spacing:4px;
}
#overlay .sub {
  font-size:22px;
  color: var(--light-tube);
  text-shadow:0 0 8px var(--yellow-light);
  text-align:center; line-height:1.8;
}
#overlay button {
  font-family:'VT323',monospace;
  font-size:24px; letter-spacing:3px;
  background:transparent;
  border:2px solid #ff69b4;
  color:#ff69b4; padding:12px 34px;
  cursor:pointer;
  text-shadow:0 0 8px #ff69b4;
  box-shadow:0 0 14px #ff69b4;
}
#overlay button:hover { background:#ff69b4; color:#fff; }

/* Flash transition */
#flash {
  position:fixed; inset:0;
  background:#fff8d0;
  opacity:0; pointer-events:none;
  z-index:40;
  transition:opacity 0.3s;
}
#flash.show { opacity:0.7; }

/* Hint */
#hint {
    display: none;
  position:absolute;
  top:90px; right:12px;
  font-size:18px;
  color:rgba(255,255,200,0.55);
  text-shadow:0 0 4px var(--yellow-light);
  z-index:20; pointer-events:none;
}
.power{
  position:absolute;
  width:28px;   /* ✅ plus petit */
  height:auto;
  z-index:6;
}

.talkie{
  position:absolute;
  width:40px;
  height:auto;
  z-index:6;
}

@keyframes float {
  from{transform:translateY(0)}
  to{transform:translateY(-5px)}
}
/* ── FIREBALL ── */
.fireball {
  position:absolute;
  width:10px;
  height:10px;
  background:orange;
  border-radius:50%;
  box-shadow: 0 0 10px red, 0 0 20px orange;
  z-index:15;
  pointer-events:none;
}