/* ============================================================
   EKHIO ROBOT — Compact binocular style
   Corps + chenilles + yeux sur tiges + bouche LCD expressifs
   ============================================================ */

:root {
  --robot-accent: #FFB800;
  --robot-body: #3A2E10; /* Base body color */
  --robot-dark: #1A1505; /* Darker shade for depth */
  --robot-eye: #00D4FF;
}

.robot-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 190px;
  position: relative;
}

/* ---- FLOAT ---- */
.robot-float {
  animation: r-float 3.8s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes r-float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-9px) rotate(-1.2deg); }
  70%      { transform: translateY(-5px) rotate(.8deg); }
}

.walle-wrap {
  position: relative;
  width: 120px;
  cursor: pointer;
  user-select: none;
}

/* ---- CHENILLES ---- */
.walle-tracks {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 3px;
}
.walle-track {
  width: 46px; height: 15px;
  background: linear-gradient(180deg, #3A3A3A 0%, #1E1E1E 50%, #3A3A3A 100%);
  border-radius: 7px;
  position: relative; overflow: hidden;
  box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.walle-track::before {
  content:'';
  position:absolute; top:3px; left:0; right:0; bottom:3px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.08) 0px 4px,
    transparent 4px 8px
  );
  animation: track-roll 1s linear infinite;
}
.walle-track::after {
  content:'';
  position:absolute; top:0; left:0; right:0; bottom:0;
  border-radius:7px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.4);
}
@keyframes track-roll { from{background-position:0 0} to{background-position:-16px 0} }

/* Roue avant/arrière */
.walle-track-wheel {
  position:absolute; top:50%; transform:translateY(-50%);
  width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #555, #222);
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.walle-track-wheel.front { right:1px; }
.walle-track-wheel.back  { left:1px; }

/* ---- CORPS ---- */
.walle-body {
  width: 84px; height: 70px;
  background: linear-gradient(160deg, var(--robot-body) 0%, var(--robot-dark) 55%, #000 100%);
  border-radius: 15px 15px 10px 10px;
  margin: 0 auto;
  position: relative;
  box-shadow:
    0 6px 28px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -2px 5px rgba(0,0,0,.5),
    inset 5px 0 15px rgba(255,255,255,0.05),
    0 0 15px rgba(var(--robot-accent-rgb, 255,184,0), .2);
  border: 1.5px solid var(--robot-accent);
  overflow: hidden;
}

/* Glass Highlight on Body */
.walle-body::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%);
  border-radius: 15px 15px 0 0;
  pointer-events: none;
}

/* Panneau solaire */
.walle-solar {
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:50px; height:24px;
  background:linear-gradient(135deg,#1a3a5c,#0d2240,#1a3a5c);
  border-radius:5px;
  border:1px solid rgba(0,100,200,.25);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5px; padding:2px;
}
.walle-solar-cell {
  border-radius:1px;
  background: rgba(0,140,255,.18);
  box-shadow: inset 0 0 2px rgba(0,100,200,.2);
}
.walle-solar-cell:nth-child(odd) { background:rgba(0,80,180,.28); }

/* Écran LCD bouche — key feature */
.walle-screen {
  position:absolute;
  bottom:10px; left:50%; transform:translateX(-50%);
  width:52px; height:20px;
  background:#050D05;
  border-radius:5px;
  border:1.5px solid rgba(0,255,80,.15);
  box-shadow:
    0 0 8px rgba(0,255,80,.08),
    inset 0 0 4px rgba(0,0,0,.8);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.walle-screen-inner {
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}

/* Bouche SVG inline via clip-path */
.walle-mouth {
  width:38px; height:14px;
  position:relative;
  transition: all .45s cubic-bezier(.34,1.2,.64,1);
}
.walle-mouth svg {
  width:100%; height:100%;
  overflow:visible;
}
.mouth-path {
  fill: none;
  stroke: #00FF50;
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(0,255,80,.8));
  transition: d .45s cubic-bezier(.34,1.2,.64,1);
}
/* Scan line */
.walle-screen::after {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:40%;
  background:linear-gradient(180deg, rgba(0,255,80,.04) 0%, transparent 100%);
  pointer-events:none;
  animation: scan .08s steps(1) infinite;
}
@keyframes scan {
  0%{top:0} 50%{top:60%} 100%{top:0}
}

/* Indicateur de charge */
.walle-charge {
  position:absolute; bottom:8px; right:8px;
  display:flex; gap:2px; align-items:flex-end;
}
.walle-charge-bar {
  width:3px; border-radius:1px;
  background:var(--robot-accent); opacity:.5;
  transition: opacity .3s;
}
.walle-charge-bar:nth-child(1){height:4px;}
.walle-charge-bar:nth-child(2){height:6px;}
.walle-charge-bar:nth-child(3){height:8px; opacity:.8;}

/* ---- BRAS ---- */
.walle-arms {
  position:absolute; top:14px; left:-16px; right:-16px;
  display:flex; justify-content:space-between; pointer-events:none;
}
.walle-arm {
  width:12px; height:32px;
  background:linear-gradient(180deg, var(--robot-body), var(--robot-dark));
  border-radius:5px 5px 7px 7px;
  border:1.5px solid var(--robot-accent);
  position:relative;
  transform-origin:top center;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
  box-shadow:2px 2px 6px rgba(0,0,0,.3);
}
.walle-arm.left  { transform: rotate(-18deg); }
.walle-arm.right { transform: rotate(18deg); }
/* Pince */
.walle-arm::after {
  content:'';
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  width:100%; height:7px;
  background:linear-gradient(180deg, var(--robot-body), var(--robot-dark));
  border-radius:0 0 5px 5px;
  border:1px solid var(--robot-accent);
}
/* Articulation milieu bras */
.walle-arm::before {
  content:'';
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:6px; height:4px;
  background:var(--robot-accent);
  border-radius:2px;
}

/* ---- TIGES OCULAIRES ---- */
.walle-neck {
  display:flex; justify-content:center; gap:20px;
  position:relative; z-index:2;
  transform-origin:bottom center;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.walle-stem {
  width:6px; height:24px;
  background:linear-gradient(180deg, var(--robot-accent), var(--robot-dark));
  border-radius:3px;
  position:relative;
  transition:height .4s ease, transform .4s ease;
  box-shadow:1px 1px 4px rgba(0,0,0,.4);
}
.walle-stem::before {
  content:'';
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:9px; height:5px;
  background:var(--robot-accent);
  border-radius:2px;
  border:1px solid rgba(255,255,255,0.2);
}

/* ---- YEUX ---- */
.walle-eyes {
  display:flex; gap:16px;
  position:absolute;
  bottom:calc(100% - 2px);
  left:50%; transform:translateX(-50%);
}
.walle-eye-unit {
  display:flex; flex-direction:column; align-items:center;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.walle-eye-hood {
  width:34px; height:11px;
  background:linear-gradient(180deg,#4A3818,#2A2008);
  border-radius:7px 7px 0 0;
  position:relative; z-index:1;
  box-shadow:0 -2px 6px rgba(0,0,0,.4);
  transition:transform .35s ease;
}
.walle-eye {
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,#1A1208,#0A0800);
  border:2.5px solid #5A4828;
  position:relative; overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.7), inset 0 -2px 4px rgba(0,0,0,.5);
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
}
/* Iris */
.walle-iris {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%,
    var(--eye-hi, #80EEFF) 0%,
    var(--eye-mid, #00A8D4) 40%,
    var(--eye-dark, #004060) 100%
  );
  box-shadow: 0 0 12px var(--eye-glow, rgba(0,212,255,.55));
  transition:all .4s ease;
}
/* Pupille */
.walle-pupil {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:8px; height:8px; border-radius:50%;
  background:rgba(0,0,0,.85);
  transition:all .4s ease;
  z-index:2;
}
/* Mini-reflet */
.walle-eye-shine {
  position:absolute; top:5px; left:7px;
  width:7px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.65); z-index:3;
}
/* Paupière */
.walle-eyelid {
  position:absolute; top:0; left:0; right:0;
  height:0;
  background:linear-gradient(180deg,#2A1E08,#1A1208);
  border-radius:50% 50% 0 0 / 60% 60% 0 0;
  transition:height .35s ease; z-index:4;
}

/* ---- MOODS ---- */

/* neutral */
.walle-wrap.neutral { --eye-hi:#80EEFF; --eye-mid:#00A8D4; --eye-dark:#004060; --eye-glow:rgba(0,212,255,.5); }

/* happy — or, bras levés, capots relevés */
.walle-wrap.happy {
  --eye-hi:#FFE066; --eye-mid:#FFB800; --eye-dark:#804000; --eye-glow:rgba(255,184,0,.7);
}
.walle-wrap.happy .walle-arm.left  { transform:rotate(-50deg) translateY(-5px); }
.walle-wrap.happy .walle-arm.right { transform:rotate(50deg) translateY(-5px); }
.walle-wrap.happy .walle-neck      { transform:scale(1.06) translateY(-3px); }
.walle-wrap.happy .walle-eye       { border-color:#8A6820; }
.walle-wrap.happy .walle-iris      { width:22px; height:22px; }

/* excited — vert, bras grands ouverts, tiges allongées */
.walle-wrap.excited {
  --eye-hi:#90FF90; --eye-mid:#2ECC71; --eye-dark:#005020; --eye-glow:rgba(46,204,113,.75);
}
.walle-wrap.excited .walle-arm.left  { transform:rotate(-65deg) translateY(-7px); }
.walle-wrap.excited .walle-arm.right { transform:rotate(65deg) translateY(-7px); }
.walle-wrap.excited .walle-stem      { height:30px; }
.walle-wrap.excited .walle-iris      { width:22px; height:22px; border-radius:30%; }
.walle-wrap.excited .walle-pupil     { width:6px; height:6px; }

/* curious — tête penchée, pupilles asymétriques */
.walle-wrap.curious .walle-neck { transform:rotate(-10deg); }
.walle-wrap.curious .walle-eye-unit:first-child .walle-iris  { width:22px; height:22px; }
.walle-wrap.curious .walle-eye-unit:last-child  .walle-iris  { width:14px; height:14px; }
.walle-wrap.curious .walle-eye-unit:last-child  .walle-pupil { width:5px; height:5px; }
.walle-wrap.curious .walle-eye-unit:first-child .walle-eye-hood { transform:rotate(-12deg); }
.walle-wrap.curious .walle-eye-unit:last-child  .walle-eye-hood { transform:rotate(6deg); }

/* proud — violet, capots froncés vers l'intérieur */
.walle-wrap.proud {
  --eye-hi:#D0A0FF; --eye-mid:#8B5CF6; --eye-dark:#2D006A; --eye-glow:rgba(139,92,246,.7);
}
.walle-wrap.proud .walle-body  { box-shadow:0 0 22px rgba(139,92,246,.25), 0 6px 28px rgba(0,0,0,.55); }
.walle-wrap.proud .walle-arm.left  { transform:rotate(22deg); }
.walle-wrap.proud .walle-arm.right { transform:rotate(-22deg); }
.walle-wrap.proud .walle-eye-unit:first-child .walle-eye-hood { transform:rotate(-10deg); }
.walle-wrap.proud .walle-eye-unit:last-child  .walle-eye-hood { transform:rotate(10deg); }
.walle-wrap.proud .walle-iris { width:22px; height:22px; }

/* sleeping — paupières tombées, bras pendants, tiges courtes */
.walle-wrap.sleeping .walle-eyelid  { height:75%; }
.walle-wrap.sleeping .walle-iris    { --eye-hi:#666; --eye-mid:#333; --eye-dark:#111; --eye-glow:transparent; width:14px; height:14px; }
.walle-wrap.sleeping .walle-arm.left  { transform:rotate(-6deg) translateY(10px); }
.walle-wrap.sleeping .walle-arm.right { transform:rotate(6deg) translateY(10px); }
.walle-wrap.sleeping .walle-stem    { height:14px; }
.walle-wrap.sleeping .walle-neck    { transform:translateY(5px); }
.walle-wrap.sleeping .walle-charge-bar { opacity:.2; }

/* sad — bleu pâle, capots froncés externe, bras bas, tiges courtes */
.walle-wrap.sad {
  --eye-hi:#A0C8E0; --eye-mid:#4A80A0; --eye-dark:#0A2030; --eye-glow:rgba(80,140,180,.3);
}
.walle-wrap.sad .walle-eye-unit:first-child .walle-eye-hood { transform:rotate(14deg) translateX(3px); }
.walle-wrap.sad .walle-eye-unit:last-child  .walle-eye-hood { transform:rotate(-14deg) translateX(-3px); }
.walle-wrap.sad .walle-stem    { height:17px; }
.walle-wrap.sad .walle-neck    { transform:translateY(3px); }
.walle-wrap.sad .walle-arm.left  { transform:rotate(-5deg) translateY(8px); }
.walle-wrap.sad .walle-arm.right { transform:rotate(5deg) translateY(8px); }
.walle-wrap.sad .walle-eyelid  { height:20%; }

/* ---- MOUTH EXPRESSIONS ---- */
/* Les paths sont mis à jour dynamiquement via JS */
/* Mais on définit les couleurs d'écran par mood */
.walle-wrap.happy   .mouth-path { stroke:#FFB800; filter:drop-shadow(0 0 4px rgba(255,184,0,.9)); }
.walle-wrap.excited .mouth-path { stroke:#2ECC71; filter:drop-shadow(0 0 4px rgba(46,204,113,.9)); }
.walle-wrap.proud   .mouth-path { stroke:#A070FF; filter:drop-shadow(0 0 4px rgba(160,112,255,.9)); }
.walle-wrap.sleeping .mouth-path { stroke:#444; filter:none; }
.walle-wrap.sad     .mouth-path { stroke:#4A90B8; filter:drop-shadow(0 0 2px rgba(74,144,184,.5)); }
.walle-wrap.curious .mouth-path { stroke:#00D4FF; filter:drop-shadow(0 0 4px rgba(0,212,255,.7)); }

/* ---- ANIMATIONS ---- */
.walle-wrap.bounce {
  animation: r-bounce .45s cubic-bezier(.36,.07,.19,.97) !important;
}
@keyframes r-bounce {
  0%,100% { transform:scale(1) rotate(0deg); }
  25%      { transform:scale(1.13) rotate(-3.5deg); }
  75%      { transform:scale(.94) rotate(2deg); }
}
.walle-wrap.celebrate {
  animation: r-celebrate .75s ease-in-out !important;
}
@keyframes r-celebrate {
  0%,100% { transform:translateY(0) rotate(0deg); }
  15%      { transform:translateY(-16px) rotate(-6deg); }
  40%      { transform:translateY(-22px) rotate(6deg); }
  65%      { transform:translateY(-12px) rotate(-3deg); }
  85%      { transform:translateY(-5px) rotate(2deg); }
}
.walle-wrap.shake {
  animation: r-shake .4s ease-in-out !important;
}
@keyframes r-shake {
  0%,100% { transform:translateX(0); }
  20%      { transform:translateX(-8px); }
  40%      { transform:translateX(8px); }
  60%      { transform:translateX(-5px); }
  80%      { transform:translateX(5px); }
}

/* Shadow */
.robot-shadow {
  width:72px; height:9px;
  background:radial-gradient(ellipse,rgba(0,0,0,.45) 0%,transparent 70%);
  margin:3px auto 0;
  transition:width .4s ease, opacity .4s ease;
}