/* robotA2_complete.css - Full Light with arms/shadows/animations */

/* variables */
:root{
  --w:420px;
  --accent:#2b80d9;
  --dark:#10303d;
  --light:#e9f9ff;
  --panel:#0f2a33;
  --screen:#00141c;
  --screen-text:#b2ffd9;
}

/* layout */
.ex-wrap{display:flex;justify-content:center;padding:30px}
.ex-robot{width:var(--w);position:relative;font-family:Inter,Arial,Helvetica,sans-serif}

/* head */
.ex-head{background:var(--light);border:4px solid #c8dcea;border-radius:40px;padding:26px 28px 18px;box-shadow:0 8px 22px rgba(0,0,0,0.12);position:relative}
.ex-eye-panel{background:var(--panel);border-radius:30px;padding:14px 22px;display:flex;justify-content:space-between;align-items:center}
.ex-eye{width:56px;height:56px;background:#0c1a20;border-radius:50%;position:relative;box-shadow:inset 0 6px 12px rgba(255,255,255,0.04)}
.ex-pupil{width:20px;height:20px;background:#9afec9;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 12px #6ff2b0}
.ex-mouth{width:72%;height:12px;background:#1f2a33;border-radius:8px;margin:12px auto 0}

/* antenna */
.ex-antenna{position:absolute;left:50%;top:-34px;transform:translateX(-50%);width:10px;height:36px;background:#263645;border-radius:6px}
.ex-ball{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:24px;height:24px;background:#263645;border-radius:50%}

/* neck */
.ex-neck{height:18px;width:70px;background:#c8dcea;margin:8px auto 0;border-radius:8px}

/* body with arms */
.ex-body{display:flex;align-items:flex-start;justify-content:space-between;margin-top:14px;position:relative}

/* arms */
.ex-arm{width:66px;display:flex;flex-direction:column;align-items:center}
.ex-shoulder{width:46px;height:34px;background:#29434f;border-radius:12px;box-shadow:inset 0 6px 12px rgba(255,255,255,0.03)}
.ex-upper{width:20px;height:60px;background:linear-gradient(180deg,#dff6ff,#cfeeff);border-radius:20px;margin-top:6px;box-shadow:0 6px 12px rgba(0,0,0,0.06)}
.ex-elbow{width:22px;height:16px;background:#29434f;border-radius:8px;margin-top:6px}
.ex-lower{width:20px;height:56px;background:linear-gradient(180deg,#dff6ff,#cfeeff);border-radius:20px;margin-top:6px;box-shadow:0 6px 12px rgba(0,0,0,0.06)}
.ex-claw{width:38px;height:28px;background:#29434f;border-radius:8px;margin-top:8px;position:relative}
.ex-claw::before,.ex-claw::after{content:'';position:absolute;width:16px;height:24px;background:#10303d;border-radius:8px;top:2px}
.ex-claw::before{left:4px;transform:rotate(12deg)}
.ex-claw::after{right:4px;transform:rotate(-12deg)}

/* core */
.ex-core{flex:1;margin:0 12px;background:var(--light);border:4px solid #c8dcea;border-radius:28px;padding:18px;box-shadow:0 8px 22px rgba(0,0,0,0.08)}
.ex-panel{background:var(--panel);border-radius:14px;padding:12px;margin:12px 0;color:#dff6ef}
.ex-panel.ex-title{font-weight:800;text-align:center;font-size:16px}
.ex-select{width:100%;padding:10px;border-radius:10px;border:none;font-weight:700}
.ex-btn{width:100%;padding:12px;border-radius:10px;border:none;background:var(--accent);color:white;font-weight:800;cursor:pointer}

/* output */
.ex-output{background:var(--screen);border-radius:10px;min-height:86px;padding:12px;color:var(--screen-text);font-family:monospace;font-size:16px}

/* base & shadow */
.ex-base{width:260px;height:48px;background:#d4f4ff;border:4px solid #c8dcea;border-radius:80px;margin:16px auto 0;box-shadow:0 8px 20px rgba(0,0,0,0.12)}
.ex-shadow{width:320px;height:34px;background:radial-gradient(ellipse at center, rgba(0,0,0,0.18), rgba(0,0,0,0.02));border-radius:50%;margin:-12px auto 0;filter:blur(4px)}

/* animations */
@keyframes pupil-move{0%{transform:translate(-50%,-50%)}50%{transform:translate(-35%,-45%)}100%{transform:translate(-50%,-50%)}}
.ex-pupil.animated{animation:pupil-move 1.2s ease-in-out infinite}
.ex-antenna-anim{animation:ant-bob 2s ease-in-out infinite}

/* responsiveness */
@media(max-width:420px){:root{--w:320px}.ex-robot{width:320px}.ex-output{min-height:64px}}